@alia.onl/sdk 3.1.2 → 3.1.4

package/src/components/AliaChatScreen.tsx

@@ -13,11 +13,11 @@
  * ```
  */
 
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
-import { AliaFace, type AliaExpression } from './AliaFace';
+import { AliaChatContent } from './AliaChatContent';
+import { AliaMark } from './AliaMark';
 import type { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 export interface AliaChatScreenProps {
@@ -37,6 +37,10 @@ export interface AliaChatScreenProps {
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
   welcomeSuggestions?: WelcomeSuggestion[];
+  /** Theme primary color hex — forwarded to the ambient wave overlay palette. */
+  primaryColor?: string;
+  /** Dark-mode flag — forwarded to the ambient wave overlay. */
+  isDarkMode?: boolean;
 }
 
 export function AliaChatScreen({
@@ -48,58 +52,40 @@ export function AliaChatScreen({
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
+  primaryColor,
+  isDarkMode,
 }: AliaChatScreenProps) {
   const insets = useSafeAreaInsets();
-  const contentRef = useRef<AliaChatContentRef>(null);
-
-  const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
-  const [hasMessages, setHasMessages] = useState(false);
-
-  // Poll content ref for header state
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (contentRef.current) {
-        setFaceExpression(contentRef.current.faceExpression);
-        setHasMessages(contentRef.current.messages.length > 0);
-      }
-    }, 200);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleClear = useCallback(() => {
-    contentRef.current?.clear();
-  }, []);
 
   return (
     <View className="flex-1 bg-background" style={{ paddingTop: insets.top }}>
-      {/* Header */}
-      <View className="flex-row items-center justify-between px-4 py-3">
-        <View className="flex-row items-center gap-2.5">
-          {headerLeft}
-          <AliaFace size={28} expression={faceExpression} />
-          <Text className="text-lg font-semibold text-foreground">Alia</Text>
-        </View>
-        <View className="flex-row items-center gap-2">
-          {hasMessages && (
-            <TouchableOpacity onPress={handleClear} className="px-2.5 py-1.5">
-              <Text className="text-sm text-muted-foreground">Clear</Text>
-            </TouchableOpacity>
-          )}
-          {headerRight}
-        </View>
-      </View>
-
-      {/* Chat content */}
       <AliaChatContent
-        ref={contentRef}
         clientContext={clientContext}
         model={model}
         apiUrl={apiUrl}
         welcomeGreeting={welcomeGreeting}
         welcomeSubtitle={welcomeSubtitle}
         welcomeSuggestions={welcomeSuggestions}
+        primaryColor={primaryColor}
+        isDarkMode={isDarkMode}
+        header={({ markState, hasMessages, clear }) => (
+          <View className="flex-row items-center justify-between px-4 py-3">
+            <View className="flex-row items-center gap-2.5">
+              {headerLeft}
+              <AliaMark size={28} state={markState} />
+              <Text className="text-lg font-semibold text-foreground">Alia</Text>
+            </View>
+            <View className="flex-row items-center gap-2">
+              {hasMessages && (
+                <TouchableOpacity onPress={clear} className="px-2.5 py-1.5">
+                  <Text className="text-sm text-muted-foreground">Clear</Text>
+                </TouchableOpacity>
+              )}
+              {headerRight}
+            </View>
+          </View>
+        )}
       />
     </View>
   );
 }
-

package/src/components/AliaChatSheet.tsx

@@ -17,6 +17,7 @@ import {
   Dimensions,
   Platform,
   useColorScheme,
+  type ViewStyle,
 } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
@@ -28,8 +29,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
-import { AliaFace, type AliaExpression } from './AliaFace';
+import { AliaChatContent } from './AliaChatContent';
+import { AliaMark } from './AliaMark';
 import type { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
@@ -53,6 +54,10 @@ export interface AliaChatSheetProps {
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
   welcomeSuggestions?: WelcomeSuggestion[];
+  /** Theme primary color hex — forwarded to the ambient wave overlay palette. */
+  primaryColor?: string;
+  /** Dark-mode flag — forwarded to the ambient wave overlay (defaults to the sheet's own color scheme). */
+  isDarkMode?: boolean;
 }
 
 export interface AliaChatSheetRef {
@@ -61,33 +66,16 @@ export interface AliaChatSheetRef {
 }
 
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
-  ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions }, ref) => {
+  ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions, primaryColor, isDarkMode }, ref) => {
     const scheme = useColorScheme();
     const isDark = scheme === 'dark';
     const insets = useSafeAreaInsets();
 
-    // Content ref for reading state
-    const contentRef = useRef<AliaChatContentRef>(null);
-    const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
-    const [hasMessages, setHasMessages] = useState(false);
-
     // Sheet visibility
     const [rendered, setRendered] = useState(false);
     const hasClosedRef = useRef(false);
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // Poll content ref for header state (lightweight, only when rendered)
-    useEffect(() => {
-      if (!rendered) return;
-      const interval = setInterval(() => {
-        if (contentRef.current) {
-          setFaceExpression(contentRef.current.faceExpression);
-          setHasMessages(contentRef.current.messages.length > 0);
-        }
-      }, 200);
-      return () => clearInterval(interval);
-    }, [rendered]);
-
     // Reanimated shared values
     const translateY = useSharedValue(SCREEN_HEIGHT);
     const backdropOpacity = useSharedValue(0);
@@ -214,10 +202,6 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       [insets.top],
     );
 
-    const handleClear = useCallback(() => {
-      contentRef.current?.clear();
-    }, []);
-
     if (!rendered) return null;
 
     return (
@@ -254,38 +238,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                 />
               </View>
 
-              {/* Header */}
-              <View style={styles.header}>
-                <View style={styles.headerLeft}>
-                  <AliaFace size={28} expression={faceExpression} />
-                  <Text className="text-lg font-semibold text-foreground">
-                    Alia
-                  </Text>
-                </View>
-                <View style={styles.headerRight}>
-                  {hasMessages && (
-                    <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-                      <Text className="text-sm text-muted-foreground">
-                        Clear
-                      </Text>
-                    </TouchableOpacity>
-                  )}
-                  <TouchableOpacity
-                    onPress={handleDismiss}
-                    style={styles.closeButton}
-                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                  >
-                    <Text className="text-lg font-semibold text-muted-foreground">
-                      {'\u2715'}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* Chat content */}
+              {/* Chat content (header rendered inside via render prop) */}
               <GestureDetector gesture={nativeGesture}>
                 <AliaChatContent
-                  ref={contentRef}
                   clientContext={clientContext}
                   model={model}
                   apiUrl={apiUrl}
@@ -293,6 +248,36 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                   welcomeGreeting={welcomeGreeting}
                   welcomeSubtitle={welcomeSubtitle}
                   welcomeSuggestions={welcomeSuggestions}
+                  primaryColor={primaryColor}
+                  isDarkMode={isDarkMode ?? isDark}
+                  header={({ markState, hasMessages, clear }) => (
+                    <View style={styles.header}>
+                      <View style={styles.headerLeft}>
+                        <AliaMark size={28} state={markState} />
+                        <Text className="text-lg font-semibold text-foreground">
+                          Alia
+                        </Text>
+                      </View>
+                      <View style={styles.headerRight}>
+                        {hasMessages && (
+                          <TouchableOpacity onPress={clear} style={styles.clearButton}>
+                            <Text className="text-sm text-muted-foreground">
+                              Clear
+                            </Text>
+                          </TouchableOpacity>
+                        )}
+                        <TouchableOpacity
+                          onPress={handleDismiss}
+                          style={styles.closeButton}
+                          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                        >
+                          <Text className="text-lg font-semibold text-muted-foreground">
+                            {'\u2715'}
+                          </Text>
+                        </TouchableOpacity>
+                      </View>
+                    </View>
+                  )}
                 />
               </GestureDetector>
             </Animated.View>
@@ -324,7 +309,7 @@ const styles = StyleSheet.create({
       web: {
         marginHorizontal: 'auto',
         boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
-      } as any,
+      } as ViewStyle & { boxShadow?: string },
       default: { elevation: 16 },
     }),
   },

package/src/components/AliaMark.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { Pressable } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import Svg, { Path } from 'react-native-svg';
+import Animated, {
+  useSharedValue,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+  cancelAnimation,
+  Easing,
+} from 'react-native-reanimated';
+
+export type AliaMarkState = 'idle' | 'thinking' | 'working' | 'writing';
+
+export interface AliaMarkProps {
+  /** Width & height in px. Default 24. */
+  size?: number;
+  /** Animation state — spins while thinking/working, opacity-pulses while writing, still when idle. Default 'idle'. */
+  state?: AliaMarkState;
+  /** Layout classes for the outer box (color comes from `color`, not classes). */
+  className?: string;
+  /** Glyph fill. Defaults to the Alia brand purple — never a theme token. */
+  color?: string;
+  /** Called after the press flourish. The mark spins on press wherever it's used. */
+  onPress?: () => void;
+  /** Accessible name when the mark acts as a button. */
+  accessibilityLabel?: string;
+  /** Play the one-shot spin when the mark mounts (e.g. the sidebar rail collapsing in). */
+  spinOnMount?: boolean;
+}
+
+/** Alia brand purple — the mark keeps its identity color across themes. */
+const BRAND_FILL = '#d269e6';
+
+/**
+ * Square viewBox centered on the glyph (exact curve bounds sampled from the
+ * path: x 140.6–1359.6, y 74.4–1425.0), so the mark renders margin-free at any
+ * size without distortion.
+ */
+const VIEWBOX = '74.8 74.4 1350.6 1350.6';
+
+const GLYPH_PATH =
+  'M 728 76.199219 C 659.800781 84 596.601562 133.199219 558.800781 207.199219 C 539.800781 244.601562 527.199219 292.398438 524.601562 336.398438 L 523.398438 357.800781 L 506.199219 349 C 457.398438 324.199219 413.601562 313.398438 361 313.199219 C 314.601562 313 281.800781 320 247.199219 337.199219 C 194.398438 363.601562 161 404.601562 145.800781 461.199219 C 140.199219 482.199219 139.601562 527.398438 144.601562 550.199219 C 156.199219 601.800781 182 649.199219 220.601562 689.398438 C 239.800781 709.199219 271 734.601562 287.800781 744 C 292.199219 746.601562 296 749.199219 296 749.800781 C 296 750.398438 292.398438 753 288 755.601562 C 270.800781 765.398438 240 790.601562 221 810.398438 C 137.199219 897.398438 116.601562 1013 170.199219 1095.199219 C 200.199219 1141.199219 247.601562 1171.199219 309 1183.199219 C 333.601562 1188 383.800781 1188 410.800781 1183.199219 C 444 1177.199219 474.398438 1167 505.800781 1151.199219 L 524 1142 L 524 1153.601562 C 524 1180.398438 530.800781 1218.601562 541.199219 1250 C 582.800781 1376 690 1446.800781 796.800781 1419 C 846.398438 1406 893.800781 1369.800781 926 1320 C 953.601562 1277.199219 972.199219 1218.398438 975.398438 1163.601562 L 976.601562 1142.398438 L 994.398438 1151.398438 C 1044.800781 1176.601562 1087.800781 1187 1142 1186.800781 C 1192.601562 1186.601562 1229.601562 1177.199219 1269 1154.199219 C 1289.601562 1142.199219 1319.800781 1112.398438 1331.800781 1092.398438 C 1351.398438 1059.800781 1358.398438 1033.800781 1358.601562 994 C 1358.800781 953.199219 1353.199219 929.398438 1334 888.601562 C 1310.800781 839.601562 1265.398438 789 1217.601562 759.398438 C 1210.199219 754.800781 1204 750.601562 1204 750 C 1204 749.398438 1210.199219 745.199219 1217.601562 740.601562 C 1251.398438 719.601562 1291 681.199219 1313 648 C 1348.601562 594.601562 1364.601562 537 1358.199219 484.800781 C 1347.398438 397.800781 1285.398438 335.398438 1191 316.800781 C 1164.398438 311.398438 1114.199219 311.800781 1085 317.601562 C 1054.601562 323.601562 1029.398438 332 1000.601562 346 L 976 357.800781 L 976 346.398438 C 976 290 952.800781 217.800781 919.800781 171 C 881 116.398438 829 83.601562 769.199219 76 C 751.398438 73.800781 749.398438 73.800781 728 76.199219 Z';
+
+/**
+ * Alia brand mark — the six-lobed flower glyph as an SVG (unselectable by
+ * nature). Effect-free reanimated: spin while thinking/using tools,
+ * opacity-pulse while streaming text, still when idle.
+ */
+export function AliaMark({
+  size = 24,
+  state = 'idle',
+  className,
+  color,
+  onPress,
+  accessibilityLabel,
+  spinOnMount = false,
+}: AliaMarkProps) {
+  // Imperative animations via reanimated's reactive primitive (NOT a React effect):
+  // on this reanimated-web setup, animations returned from mappers/styles never
+  // tick, but `sharedValue.value = withRepeat(...)` does.
+  const rotation = useSharedValue(0);
+  useAnimatedReaction(
+    () => state === 'thinking' || state === 'working',
+    (spinning, previous) => {
+      if (spinning === previous) return;
+      if (spinning) {
+        rotation.value = 0;
+        rotation.value = withRepeat(withTiming(360, { duration: 1000, easing: Easing.linear }), -1);
+      } else {
+        cancelAnimation(rotation);
+        rotation.value = withTiming(0, { duration: 200 });
+      }
+    },
+    [state],
+  );
+
+  const opacity = useSharedValue(1);
+  useAnimatedReaction(
+    () => state === 'writing',
+    (pulsing, previous) => {
+      if (pulsing === previous) return;
+      if (pulsing) {
+        opacity.value = withRepeat(
+          withSequence(
+            withTiming(0.5, { duration: 1000, easing: Easing.bezier(0.4, 0, 0.6, 1) }),
+            withTiming(1, { duration: 1000, easing: Easing.bezier(0.4, 0, 0.6, 1) }),
+          ),
+          -1,
+        );
+      } else {
+        cancelAnimation(opacity);
+        opacity.value = withTiming(1, { duration: 200 });
+      }
+    },
+    [state],
+  );
+
+  // One-shot press/mount flourish. Skipped while the state-driven spin runs so
+  // the two never fight over the shared rotation value.
+  const [spinCount, setSpinCount] = useState(spinOnMount ? 1 : 0);
+  useAnimatedReaction(
+    () => spinCount,
+    (current, previous) => {
+      if (current === previous || current === 0) return;
+      rotation.value = 0;
+      rotation.value = withTiming(360, { duration: 500, easing: Easing.bezier(0.34, 1.3, 0.64, 1) });
+    },
+    [spinCount],
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  const handlePress = () => {
+    if (state !== 'thinking' && state !== 'working') {
+      setSpinCount((count) => count + 1);
+    }
+    // Best-effort flourish: rejects on platforms without haptics — not an error.
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+    onPress?.();
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole={onPress ? 'button' : 'image'}
+      accessibilityLabel={accessibilityLabel}
+      className={className}
+      style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Animated.View style={animatedStyle}>
+        <Svg width={size} height={size} viewBox={VIEWBOX}>
+          <Path d={GLYPH_PATH} fill={color ?? BRAND_FILL} />
+        </Svg>
+      </Animated.View>
+    </Pressable>
+  );
+}

package/src/components/AliaWelcomeMessage.tsx

@@ -2,7 +2,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { BlurView } from 'expo-blur';
 import { Text } from './ui/text';
 import Animated, { FadeIn } from 'react-native-reanimated';
-import { AliaFace } from './AliaFace';
+import { AliaMark } from './AliaMark';
 import type { WelcomeSuggestion } from '../types';
 
 export type { WelcomeSuggestion };
@@ -12,7 +12,7 @@ export interface AliaWelcomeMessageProps {
   subtitle?: string;
   suggestions?: WelcomeSuggestion[];
   onSuggestionPress?: (text: string) => void;
-  faceSize?: number;
+  markSize?: number;
 }
 
 export function AliaWelcomeMessage({
@@ -20,15 +20,15 @@ export function AliaWelcomeMessage({
   subtitle,
   suggestions = [],
   onSuggestionPress,
-  faceSize = 64,
+  markSize = 64,
 }: AliaWelcomeMessageProps) {
   return (
     <View className="flex-1 items-center justify-center px-4">
       <View className="w-full max-w-2xl">
-        {/* Face + Title */}
+        {/* Mark + Title */}
         <View className="items-start mb-8">
           <View className="mb-4">
-            <AliaFace size={faceSize} expression="Greeting" />
+            <AliaMark size={markSize} />
           </View>
           <View className="space-y-2">
             <Text className="text-3xl font-bold tracking-tight text-foreground">

package/src/components/Markdown.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type ReactNode } from 'react';
 import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
-import Markdown from 'react-native-markdown-display';
+import Markdown, { type ASTNode } from 'react-native-markdown-display';
 import type { AliaColors } from '../theme';
 
 // Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
@@ -29,7 +29,7 @@ function createRules(colors: AliaColors) {
   const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
   return {
-    heading1: (node: any, children: any) => (
+    heading1: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 8, marginTop: 12, fontSize: 18, fontWeight: '600', lineHeight: 24, color: textColor }}
@@ -37,7 +37,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    heading2: (node: any, children: any) => (
+    heading2: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
@@ -45,7 +45,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    heading3: (node: any, children: any) => (
+    heading3: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
@@ -53,7 +53,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    heading4: (node: any, children: any) => (
+    heading4: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
@@ -61,7 +61,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    heading5: (node: any, children: any) => (
+    heading5: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
@@ -69,7 +69,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    heading6: (node: any, children: any) => (
+    heading6: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
@@ -77,7 +77,7 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    code: (node: any, children: any, parent: any) => {
+    code: (node: ASTNode, children: ReactNode[], parent: ASTNode[]) => {
       return parent.length > 1 ? (
         <View
           key={node.key}
@@ -109,7 +109,7 @@ function createRules(colors: AliaColors) {
         </Text>
       );
     },
-    list_item: (node: any, children: any, parent: any) => {
+    list_item: (node: ASTNode, children: ReactNode[], parent: ASTNode[]) => {
       const isOrdered = parent[parent.length - 1]?.type === 'ordered_list';
       const bullet = isOrdered
         ? `${parent[parent.length - 1].children.indexOf(node) + 1}.`
@@ -122,16 +122,16 @@ function createRules(colors: AliaColors) {
         </View>
       );
     },
-    ordered_list: (node: any, children: any) => (
+    ordered_list: (node: ASTNode, children: ReactNode[]) => (
       <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
     ),
-    unordered_list: (node: any, children: any) => (
+    unordered_list: (node: ASTNode, children: ReactNode[]) => (
       <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
     ),
-    strong: (node: any, children: any) => (
+    strong: (node: ASTNode, children: ReactNode[]) => (
       <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
-    link: (node: any, children: any) => (
+    link: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
         style={{ color: primary, textDecorationLine: 'underline', ...BODY_TEXT }}
@@ -142,10 +142,10 @@ function createRules(colors: AliaColors) {
         {children}
       </Text>
     ),
-    paragraph: (node: any, children: any) => (
+    paragraph: (node: ASTNode, children: ReactNode[]) => (
       <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
-    blockquote: (node: any, children: any) => (
+    blockquote: (node: ASTNode, children: ReactNode[]) => (
       <View
         key={node.key}
         style={{
@@ -162,7 +162,7 @@ function createRules(colors: AliaColors) {
         {children}
       </View>
     ),
-    hr: (node: any) => (
+    hr: (node: ASTNode) => (
       <View
         key={node.key}
         style={{
@@ -172,7 +172,7 @@ function createRules(colors: AliaColors) {
         }}
       />
     ),
-    body: (node: any, children: any) => {
+    body: (node: ASTNode, children: ReactNode[]) => {
       return <View key={node.key} style={{ marginBottom: -8 }}>{children}</View>;
     },
   };

package/src/components/ThinkingIndicator.tsx

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { View, Text } from "react-native";
 import Animated, {
-  useSharedValue,
   useAnimatedStyle,
   withRepeat,
   withTiming,
   withSequence,
-  Easing,
 } from "react-native-reanimated";
+import { AliaMark } from "./AliaMark";
 
 const thinkingPhrases = [
   "Thinking...",
@@ -44,33 +43,15 @@ export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking
     setPhraseIndex(Math.floor(Math.random() * phrases.length));
   }, [isWorking]);
 
-  // Spinning asterisk animation
-  const rotation = useSharedValue(0);
-  useEffect(() => {
-    rotation.value = withRepeat(
-      withTiming(360, { duration: 2000, easing: Easing.linear }),
-      -1
-    );
-  }, [rotation]);
-
-  const spinStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${rotation.value}deg` }],
-  }));
-
-  // Pulsing cursor animation
-  const cursorOpacity = useSharedValue(1);
-  useEffect(() => {
-    cursorOpacity.value = withRepeat(
+  // Pulsing cursor animation (effect-free, declarative)
+  const cursorStyle = useAnimatedStyle(() => ({
+    opacity: withRepeat(
       withSequence(
         withTiming(0.2, { duration: 400 }),
         withTiming(1, { duration: 400 })
       ),
       -1
-    );
-  }, [cursorOpacity]);
-
-  const cursorStyle = useAnimatedStyle(() => ({
-    opacity: cursorOpacity.value,
+    ),
   }));
 
   // Typewriter effect — skipped when statusText is provided (real-time status shown directly)
@@ -103,9 +84,7 @@ export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking
 
   return (
     <View className="flex-row items-center gap-2 py-2">
-      <Animated.View style={spinStyle}>
-        <Text className="text-base text-muted-foreground">✱</Text>
-      </Animated.View>
+      <AliaMark size={16} state={isWorking ? 'working' : 'thinking'} className="text-muted-foreground" />
       <View className="flex-row items-center">
         <Text className="text-base text-muted-foreground">{shownText}</Text>
         {(statusText || isTyping) && (

package/src/components/ui/chat-text-input.tsx

@@ -7,6 +7,7 @@ import {
   type TextInputKeyPressEventData,
   type NativeSyntheticEvent as RNSyntheticEvent,
   type TextInputContentSizeChangeEventData,
+  type TextStyle,
 } from "react-native";
 import { cn } from "../../lib/utils";
 
@@ -144,12 +145,12 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
           scrollEnabled={fillContainer || props.multiline}
           style={[
             style,
-            !fillContainer && props.multiline && !disableAutoHeight && {
+            !fillContainer && props.multiline && !disableAutoHeight && ({
               minHeight,
               maxHeight,
-              overflow: 'auto' as any,
+              overflow: 'auto',
               ...(Platform.OS === 'web' ? { fieldSizing: 'content' } : {}),
-            },
+            } as TextStyle & { overflow: 'auto'; fieldSizing?: string }),
             fillContainer && { flex: 1, height: '100%' },
           ]}
           {...props}