@alia.onl/sdk 11.1.0 → 13.0.0

package/src/components/AliaChatScreen.tsx

@@ -17,14 +17,13 @@
  * `livekit-client` never enters the bundle.
  */
 
-import React from 'react';
-import { useTheme } from '@oxy.so/bloom/theme';
+import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KeyboardAvoidingView } from '../lib/keyboard';
-import { AliaChatContent } from './AliaChatContent';
+import { AliaChatContent, type AliaChatContentProps } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
-import type { WelcomeSuggestion } from './AliaWelcomeMessage';
+import type { AliaSuggestion } from '../types';
 import type { AliaChatLabels } from '../lib/labels';
 import type { VoiceSessionComponent } from '../types';
 
@@ -35,8 +34,14 @@ export interface AliaChatScreenProps {
   model?: string;
   /** API URL override */
   apiUrl?: string;
-  /** Optional header left action (e.g., back button) */
+  /** Draws the header's back button; omit where there is nowhere to go back to. */
+  onBack?: () => void;
+  /** Optional header left content instead of the back button (e.g. a drawer's menu button) */
   headerLeft?: React.ReactNode;
+  /** Draws the header's share button once there is a conversation; omitted, no share button. */
+  onShare?: () => void;
+  /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
+  headerMenu?: React.ReactNode;
   /** Optional header right action (e.g., settings button) */
   headerRight?: React.ReactNode;
   /** Welcome screen greeting */
@@ -44,7 +49,13 @@ export interface AliaChatScreenProps {
   /** Welcome screen subtitle */
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
-  welcomeSuggestions?: WelcomeSuggestion[];
+  welcomeSuggestions?: AliaSuggestion[];
+  /** The agents the host knows, with their look: a delegation's thinking avatar is drawn from them until the agent answers. */
+  agents?: AliaChatContentProps['agents'];
+  /** What the host found for the typed text, shown over the composer (see `onSuggestionQuery`). */
+  suggestionMatches?: AliaSuggestion[];
+  /** The typed text, once typing has settled, for the host to search suggestions with. */
+  onSuggestionQuery?: (query: string) => void;
   /** Dark-mode flag — forwarded to the ambient wave overlay. */
   isDarkMode?: boolean;
   /** Voice capability — `VoiceSession` from `@alia.onl/sdk/voice`. */
@@ -57,18 +68,22 @@ export function AliaChatScreen({
   clientContext,
   model,
   apiUrl,
+  onBack,
   headerLeft,
+  onShare,
+  headerMenu,
   headerRight,
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
+  agents,
+  suggestionMatches,
+  onSuggestionQuery,
   isDarkMode,
   voiceSession,
   labels,
 }: AliaChatScreenProps) {
   const insets = useSafeAreaInsets();
-  const { colors } = useTheme();
-
   // The screen owns the whole window, so it keeps its composer out of both
   // system bars: the top inset clears the status bar, the bottom one the
   // gesture bar or home indicator an edge-to-edge app draws over.
@@ -79,14 +94,26 @@ export function AliaChatScreen({
   // keyboard's height minus the inset: the composer sits on the keyboard, not
   // one inset above it. (Its parent-relative layout would read as zero overlap
   // this deep in a host's tree, which is why the offset is measured.)
+  const header = useCallback<NonNullable<AliaChatContentProps['header']>>(
+    ({ hasMessages, clear, agents: answered }) => (
+      <AliaChatHeader
+        hasMessages={hasMessages}
+        agents={answered}
+        onClear={clear}
+        onBack={onBack}
+        onShare={onShare}
+        menu={headerMenu}
+        leading={headerLeft}
+        trailing={headerRight}
+      />
+    ),
+    [onBack, onShare, headerMenu, headerLeft, headerRight],
+  );
+
   return (
     <View
-      className="flex-1"
-      style={{
-        backgroundColor: colors.background,
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-      }}
+      className="flex-1 bg-background-full"
+      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
     >
       <KeyboardAvoidingView behavior="padding" automaticOffset style={{ flex: 1 }}>
         <AliaChatContent
@@ -96,18 +123,13 @@ export function AliaChatScreen({
           welcomeGreeting={welcomeGreeting}
           welcomeSubtitle={welcomeSubtitle}
           welcomeSuggestions={welcomeSuggestions}
+          agents={agents}
+          suggestionMatches={suggestionMatches}
+          onSuggestionQuery={onSuggestionQuery}
           isDarkMode={isDarkMode}
           voiceSession={voiceSession}
           labels={labels}
-          title={null}
-          headerLeading={({ hasMessages, clear }) => (
-            <AliaChatHeader
-              hasMessages={hasMessages}
-              onClear={clear}
-              leading={headerLeft}
-              trailing={headerRight}
-            />
-          )}
+          header={header}
         />
       </KeyboardAvoidingView>
     </View>

package/src/components/AliaChatSheet.tsx

@@ -1,11 +1,15 @@
+import { AvatarFlightLayer, useAvatarFlights } from '@oxy.so/bloom/avatar-flight';
 import { BottomSheet, type BottomSheetRef } from '@oxy.so/bloom/bottom-sheet';
-import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { useColorScheme, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BREAKPOINTS } from '@oxy.so/bloom/styles';
 import type { AliaChatLabels } from '../lib/labels';
 import type { VoiceSessionComponent } from '../types';
-import { AliaChatContent } from './AliaChatContent';
+import { AliaChatContent, type AliaChatContentProps, type AliaTurn } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
-import type { WelcomeSuggestion } from './AliaWelcomeMessage';
+import type { AliaSuggestion } from '../types';
 
 /**
  * TODO(bloom): drop this once Bloom's sheet is rounder by default. Its detached
@@ -16,6 +20,9 @@ import type { WelcomeSuggestion } from './AliaWelcomeMessage';
  */
 const SHEET_RADIUS = 40;
 
+/** The sheet floats (detached) from tablet width up; on a phone it is flush with the screen edges. */
+const DETACHED_FROM = BREAKPOINTS.md;
+
 export interface AliaChatSheetProps {
   /** App context injected into system prompt */
   clientContext?: string;
@@ -28,7 +35,13 @@ export interface AliaChatSheetProps {
   /** Welcome screen subtitle */
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
-  welcomeSuggestions?: WelcomeSuggestion[];
+  welcomeSuggestions?: AliaSuggestion[];
+  /** The agents the host knows, with their look: a delegation's thinking avatar is drawn from them until the agent answers. */
+  agents?: AliaChatContentProps['agents'];
+  /** What the host found for the typed text, shown over the composer (see `onSuggestionQuery`). */
+  suggestionMatches?: AliaSuggestion[];
+  /** The typed text, once typing has settled, for the host to search suggestions with. */
+  onSuggestionQuery?: (query: string) => void;
   /** Dark-mode flag — forwarded to the ambient wave overlay (defaults to the sheet's own color scheme). */
   isDarkMode?: boolean;
   /**
@@ -39,6 +52,10 @@ export interface AliaChatSheetProps {
   voiceSession?: VoiceSessionComponent;
   /** Overrides for the chat's own copy (header, composer, plan, research…); omitted, English. */
   labels?: Partial<AliaChatLabels>;
+  /** Draws the header's share button once there is a conversation; omitted, no share button. */
+  onShare?: () => void;
+  /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
+  headerMenu?: React.ReactNode;
 }
 
 export interface AliaChatSheetRef {
@@ -55,72 +72,156 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       welcomeGreeting,
       welcomeSubtitle,
       welcomeSuggestions,
+      agents,
+      suggestionMatches,
+      onSuggestionQuery,
       isDarkMode,
       voiceSession,
       labels,
+      onShare,
+      headerMenu,
     },
     ref,
   ) => {
-    const isDark = useColorScheme() === 'dark';
-    const sheetRef = useRef<BottomSheetRef>(null);
-    const chatStopRef = useRef<(() => void) | null>(null);
+    // Bloom's resolved mode, not the system's scheme.
+    const { isDark } = useTheme();
+    const mainRef = useRef<BottomSheetRef>(null);
+    const conversationRef = useRef<BottomSheetRef>(null);
+    // Each sheet's chat registers its own canceller; closing a sheet stops its own turn.
+    const mainStopRef = useRef<(() => void) | null>(null);
+    const conversationStopRef = useRef<(() => void) | null>(null);
+
+    // The conversation sheet, stacked over the main one while a chat is open. The key makes
+    // every conversation a fresh chat.
+    const [conversation, setConversation] = useState<{ key: number; turn: AliaTurn } | null>(null);
 
-    const stopChat = useCallback(() => {
-      chatStopRef.current?.();
+    const registerMainStop = useCallback((stop: (() => void) | null) => {
+      mainStopRef.current = stop;
+    }, []);
+    const registerConversationStop = useCallback((stop: (() => void) | null) => {
+      conversationStopRef.current = stop;
     }, []);
 
-    const registerChatStop = useCallback((stop: (() => void) | null) => {
-      chatStopRef.current = stop;
+    const startConversation = useCallback((turn: AliaTurn) => {
+      setConversation((current) => ({ key: (current?.key ?? 0) + 1, turn }));
+    }, []);
+    useEffect(() => {
+      if (conversation) conversationRef.current?.present();
+    }, [conversation]);
+
+    // Back, and the menu's Clear: close the conversation, back to the main screen underneath.
+    const closeConversation = useCallback(() => {
+      conversationStopRef.current?.();
+      conversationRef.current?.dismiss();
+    }, []);
+    const onConversationDismissAttempt = useCallback(() => {
+      conversationStopRef.current?.();
+      return true;
     }, []);
 
     const handleDismiss = useCallback(() => {
-      stopChat();
-      sheetRef.current?.dismiss();
-    }, [stopChat]);
+      conversationStopRef.current?.();
+      mainStopRef.current?.();
+      conversationRef.current?.dismiss();
+      mainRef.current?.dismiss();
+    }, []);
 
     useImperativeHandle(
       ref,
-      () => ({ present: () => sheetRef.current?.present(), dismiss: handleDismiss }),
+      () => ({ present: () => mainRef.current?.present(), dismiss: handleDismiss }),
       [handleDismiss],
     );
 
-    // A drag, backdrop press, Back or Escape starts closing here: stop the turn first.
-    const onDismissAttempt = useCallback(() => {
-      stopChat();
+    // Closing the main sheet (a drag, backdrop press, Back or Escape) closes what is stacked on it.
+    const onMainDismissAttempt = useCallback(() => {
+      mainStopRef.current?.();
+      conversationStopRef.current?.();
+      conversationRef.current?.dismiss();
       return true;
-    }, [stopChat]);
+    }, []);
+
+    const { width } = useWindowDimensions();
+    const detached = width >= DETACHED_FROM;
+    // Flush with the screen edge the sheet runs behind the home indicator: the composer clears it.
+    const { bottom } = useSafeAreaInsets();
+    const sheetStyle = detached
+      ? { maxWidth: 600, alignSelf: 'center' as const, borderRadius: SHEET_RADIUS }
+      : undefined;
+
+    // The avatars fly between the two sheets: one controller, one layer.
+    const flights = useAvatarFlights();
+    const shared = {
+      flights,
+      clientContext,
+      model,
+      apiUrl,
+      isDarkMode: isDarkMode ?? isDark,
+      voiceSession,
+      bottomInset: detached ? 0 : bottom,
+      labels,
+    };
 
     return (
-      <BottomSheet
-        ref={sheetRef}
-        detached
-        scrollable={false}
-        manualActivation
-        onDismissAttempt={onDismissAttempt}
-        onDismiss={stopChat}
-        style={{ maxWidth: 600, alignSelf: 'center', borderRadius: SHEET_RADIUS }}
-      >
-        <AliaChatContent
-          clientContext={clientContext}
-          model={model}
-          apiUrl={apiUrl}
-          welcomeGreeting={welcomeGreeting}
-          welcomeSubtitle={welcomeSubtitle}
-          welcomeSuggestions={welcomeSuggestions}
-          isDarkMode={isDarkMode ?? isDark}
-          voiceSession={voiceSession}
-          labels={labels}
-          onStopReady={registerChatStop}
-          // The top padding clears the 28px drag handle, which Bloom floats over the content
-          // instead of reserving room for.
-          title={null}
-          headerLeading={({ hasMessages, clear }) => (
-            <View className="pt-8">
-              <AliaChatHeader hasMessages={hasMessages} onClear={clear} onClose={handleDismiss} />
-            </View>
-          )}
-        />
-      </BottomSheet>
+      <>
+        <BottomSheet
+          ref={mainRef}
+          detached={detached}
+          scrollable={false}
+          manualActivation
+          onDismissAttempt={onMainDismissAttempt}
+          onDismiss={() => setConversation(null)}
+          style={sheetStyle}
+        >
+          {/* The main screen: the greeting, the suggestions and the composer. A first turn opens
+              the conversation in its own sheet over this one, so this chat stays empty. */}
+          <AliaChatContent
+            {...shared}
+            welcomeGreeting={welcomeGreeting}
+            welcomeSubtitle={welcomeSubtitle}
+            welcomeSuggestions={welcomeSuggestions}
+            agents={agents}
+            suggestionMatches={suggestionMatches}
+            onSuggestionQuery={onSuggestionQuery}
+            onStopReady={registerMainStop}
+            onStart={startConversation}
+          />
+        </BottomSheet>
+
+        {conversation ? (
+          <BottomSheet
+            key={conversation.key}
+            ref={conversationRef}
+            detached={detached}
+            scrollable={false}
+            manualActivation
+            onDismissAttempt={onConversationDismissAttempt}
+            onDismiss={() => setConversation(null)}
+            style={sheetStyle}
+          >
+            <AliaChatContent
+              {...shared}
+              initialTurn={conversation.turn}
+              agents={agents}
+              onStopReady={registerConversationStop}
+              // The bar is the conversation's: back to the main screen, the profile, share and
+              // the menu.
+              header={({ agents }) => (
+                <View className="pt-8">
+                  <AliaChatHeader
+                    hasMessages
+                    agents={agents}
+                    onClear={closeConversation}
+                    onBack={closeConversation}
+                    onShare={onShare}
+                    menu={headerMenu}
+                  />
+                </View>
+              )}
+            />
+          </BottomSheet>
+        ) : null}
+        <AvatarFlightLayer flights={flights} />
+      </>
     );
   },
 );

package/src/components/AliaWelcomeMessage.tsx

@@ -1,71 +1,44 @@
-import { Item } from '@oxy.so/bloom/item';
+import { AvatarAnchor } from '@oxy.so/bloom/avatar-flight';
 import { Text } from '@oxy.so/bloom/typography';
 import { View } from 'react-native';
-import Animated, { FadeIn } from 'react-native-reanimated';
-import type { WelcomeSuggestion } from '../types';
+import { ALIA_ANCHORS, useAliaFlights } from '../lib/flights';
+import { greetingLines } from '../lib/greeting';
 import { AliaAvatar } from './AliaAvatar';
 
-export type { WelcomeSuggestion };
-
 export interface AliaWelcomeMessageProps {
   /** The greeting, e.g. "Hi Nate, what's on your mind?". */
   greeting: string;
   subtitle?: string;
-  suggestions?: WelcomeSuggestion[];
-  onSuggestionPress?: (text: string) => void;
   markSize?: number;
-  /** Leave the avatar out, where the surrounding header already shows it. */
-  hideMark?: boolean;
 }
 
 /**
- * The empty chat, as the Alia app has it: the avatar beside the greeting at display
- * size, centred (stacked on a phone, side by side from `md`), and the suggestions as
- * compact rows under it.
+ * The empty chat's greeting: the avatar above it, both centred, the address on top ("Hi Nate,")
+ * and the rest under it (`greetingLines`). The Alia app and the SDK chat
+ * draw exactly this. The greeting has a max width (`max-w-xs`, 20rem) so it sets in two lines at
+ * any width, as a headline under a mark rather than one long line across a wide column. The
+ * suggestions are not part of it; they sit over the composer (`ComposerSuggestions`).
  */
-export function AliaWelcomeMessage({
-  greeting,
-  subtitle,
-  suggestions = [],
-  onSuggestionPress,
-  markSize = 38,
-  hideMark = false,
-}: AliaWelcomeMessageProps) {
+export function AliaWelcomeMessage({ greeting, subtitle, markSize = 88 }: AliaWelcomeMessageProps) {
+  const flights = useAliaFlights();
+  const avatar = <AliaAvatar size={markSize} interactive />;
   return (
-    <View className="flex-1 items-center justify-center gap-6 px-4">
-      <View className="items-center gap-2">
-        <View className="flex-col items-center justify-center gap-3 md:flex-row">
-          {hideMark ? null : <AliaAvatar size={markSize} interactive />}
-          <Text
-            selectable={false}
-            className="text-center text-4xl tracking-tight text-text-primary md:text-left"
-          >
-            {greeting}
-          </Text>
-        </View>
-        {subtitle ? (
-          <Text className="text-center text-lg text-text-secondary">{subtitle}</Text>
-        ) : null}
+    <View className="items-center gap-2">
+      <View className="items-center justify-center gap-4">
+        {/* It flies up into the header's profile when the conversation begins. */}
+        {flights ? (
+          <AvatarAnchor flights={flights} anchor={ALIA_ANCHORS.welcome}>
+            {avatar}
+          </AvatarAnchor>
+        ) : (
+          avatar
+        )}
+        <Text selectable={false} className="max-w-xs shrink text-center text-4xl text-text-primary">
+          {greetingLines(greeting).join('\n')}
+        </Text>
       </View>
-
-      {suggestions.length > 0 ? (
-        <Animated.View
-          entering={FadeIn.duration(400)}
-          accessibilityRole="list"
-          className="w-full max-w-[768px]"
-        >
-          {suggestions.map((item) => (
-            <Item
-              key={item.id}
-              density="compact"
-              accessibilityRole="button"
-              accessibilityLabel={item.title}
-              onPress={() => onSuggestionPress?.(item.description)}
-              title={<Text numberOfLines={1}>{item.title}</Text>}
-              subtitle={item.description}
-            />
-          ))}
-        </Animated.View>
+      {subtitle ? (
+        <Text className="text-center text-lg text-text-secondary">{subtitle}</Text>
       ) : null}
     </View>
   );

package/src/components/AmbientField.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { AppState, Platform, View, type LayoutChangeEvent, type ViewStyle } from 'react-native';
 import Animated, {
   cancelAnimation,
@@ -55,16 +55,16 @@ const EXIT_EASE = Easing.bezier(0.2, 0.7, 0.2, 1);
 const PULSE_DURATION = 900;
 
 /**
- * A field shorter than a phone screen (the chat's sheet) is not drawn at its own scale: the
- * blobs are sized in `vmax` of the field, which would be its small side, and laid out across
- * its width, which would pile them on the centre. It takes the blob size of a phone screen,
- * and its blobs are spread wider (`SHORT_FIELD_SPREAD`), cropped by its edges — the blue, warm
- * and green of the intro side by side, not one smudge in the middle.
+ * How the field lays itself out in a container that is not a screen. The blobs are sized in
+ * `vmax` of the field and laid out across its width, which on a short, wide card (the chat's
+ * sheet) would make them half as big and pile them on the centre. The `sheet` layout draws
+ * them at the size of a phone screen (`reference`), spread wider across the width (`spread`)
+ * and shifted back toward the right (`shift`, a share of the width, since the spread leaves the
+ * composition leaning left), cropped by the card's edges: the blue, warm and green of the
+ * intro side by side. Asked for, not inferred from the height, so a short app screen is
+ * never reinterpreted.
  */
-const MIN_FIELD_REFERENCE = 800;
-const SHORT_FIELD_SPREAD = 1.4;
-/** The spread leaves the composition leaning left; this much of the width puts it back. */
-const SHORT_FIELD_SHIFT = 0.17;
+const SHEET_LAYOUT = { reference: 800, spread: 1.4, shift: 0.17 } as const;
 
 /** One keyframe stop of a float loop: [translateX in vw, translateY in vh, scale]. */
 type FloatStop = readonly [number, number, number];
@@ -368,6 +368,8 @@ function Flourish({
 }
 
 export interface AmbientFieldProps {
+  /** `screen` (default) fills a page; `sheet` is for a short card, see `SHEET_LAYOUT`. */
+  layout?: 'screen' | 'sheet';
   /**
    * Combined amplitude from `useAmbientWave` — swells and brightens the blobs.
    * Omit where there is no audio (the intro) and the field simply rests.
@@ -420,7 +422,8 @@ export interface AmbientFieldProps {
  * layer, nothing is seen THROUGH it, and the translucent surfaces over it are
  * Bloom's, which follow that setting themselves.
  */
-export function AmbientField({
+export const AmbientField = memo(function AmbientField({
+  layout = 'screen',
   waveAmplitude,
   agentState = 'idle',
   intensity = 1,
@@ -487,11 +490,11 @@ export function AmbientField({
     setField({ width, height });
   };
 
-  const short = field.height > 0 && field.height < MIN_FIELD_REFERENCE;
-  const vw = (field.width / 100) * (short ? SHORT_FIELD_SPREAD : 1);
+  const sheet = layout === 'sheet';
+  const vw = (field.width / 100) * (sheet ? SHEET_LAYOUT.spread : 1);
   const vh = field.height / 100;
-  const vmax = Math.max(field.width, field.height, short ? MIN_FIELD_REFERENCE : 0) / 100;
-  const shiftX = short ? field.width * SHORT_FIELD_SHIFT : 0;
+  const vmax = Math.max(field.width, field.height, sheet ? SHEET_LAYOUT.reference : 0) / 100;
+  const shiftX = sheet ? field.width * SHEET_LAYOUT.shift : 0;
 
   const fieldStyle = useAnimatedStyle(() => ({
     // On the way out the field keeps 45% of its opacity, sinking as it goes.
@@ -572,6 +575,6 @@ export function AmbientField({
       ) : null}
     </View>
   );
-}
+});
 
 export { PARALLAX_DURATION, PARALLAX_EASE };

package/src/components/ComposerSuggestions.tsx

@@ -0,0 +1,45 @@
+import { Item } from '@oxy.so/bloom/item';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import type { Completion } from '../lib/suggestions';
+import type { AliaSuggestion } from '../types';
+
+/**
+ * Suggestions over the composer, one line each, the typed part highlighted and the row the
+ * keyboard is on marked. The Alia app and the SDK chat draw exactly this.
+ */
+export function ComposerSuggestions<T extends AliaSuggestion>({
+  completions,
+  selected,
+  onPick,
+}: {
+  completions: readonly Completion<T>[];
+  selected: number;
+  onPick: (suggestion: T) => void;
+}) {
+  if (completions.length === 0) return null;
+  return (
+    <View accessibilityRole="list" className="w-full max-w-[768px] self-center">
+      {completions.map(({ suggestion, matchStart, matchEnd }, index) => {
+        const { text } = suggestion;
+        return (
+          <Item
+            key={suggestion.id}
+            density="compact"
+            highlighted={index === selected}
+            accessibilityRole="button"
+            accessibilityLabel={text}
+            onPress={() => onPick(suggestion)}
+            title={
+              <Text numberOfLines={1}>
+                {text.slice(0, matchStart)}
+                <Text className="font-medium text-primary">{text.slice(matchStart, matchEnd)}</Text>
+                {text.slice(matchEnd)}
+              </Text>
+            }
+          />
+        );
+      })}
+    </View>
+  );
+}

package/src/components/IdentityMark.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
+import type { AliaAvatarState } from './AliaAvatar';
 import * as Haptics from 'expo-haptics';
 import Svg, { Path } from 'react-native-svg';
 import Animated, {
@@ -13,7 +14,8 @@ import Animated, {
   Easing,
 } from 'react-native-reanimated';
 
-export type IdentityMarkState = 'idle' | 'thinking' | 'working' | 'writing';
+/** What the mark is doing: the same states as the avatar's. */
+export type IdentityMarkState = AliaAvatarState;
 
 export interface IdentityMarkProps {
   /** Width & height in px. Default 24. */