@alia.onl/sdk 5.1.0 → 7.1.1

package/src/components/{AliaMark.tsx → IdentityMark.tsx}

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, View } from 'react-native';
 import * as Haptics from 'expo-haptics';
 import Svg, { Path } from 'react-native-svg';
 import Animated, {
@@ -13,20 +13,53 @@ import Animated, {
   Easing,
 } from 'react-native-reanimated';
 
-export type AliaMarkState = 'idle' | 'thinking' | 'working' | 'writing';
+export type IdentityMarkState = 'idle' | 'thinking' | 'working' | 'writing';
 
-export interface AliaMarkProps {
+export interface IdentityMarkProps {
   /** 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;
+  state?: IdentityMarkState;
   /** 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. */
+  /**
+   * Who the mark stands for, as a colour. An agent passes its own colour and
+   * gets the same artwork at the same size, which is the whole of the
+   * difference between Alia's mark and an agent's.
+   *
+   * The default is the Alia brand purple, and that is what an agent-less
+   * surface gets when it passes nothing. But do not read the default as a rule:
+   * three of Alia's own surfaces — the sidebar logo, the chat's mark and the
+   * welcome message — deliberately pass `colors.primary`, so Alia's face
+   * follows the account's accent there and stays brand purple elsewhere
+   * (`welcome-intro.tsx`). That split predates this component and is not
+   * settled; it is written down here so the next reader picks a side knowingly
+   * rather than copying whichever neighbour they happened to open.
+   */
   color?: string;
-  /** Called after the press flourish. The mark spins on press wherever it's used. */
+  /**
+   * Called after the press flourish, for a mark that is a control — the sidebar
+   * logo, which goes home.
+   */
   onPress?: () => void;
-  /** Accessible name when the mark acts as a button. */
+  /**
+   * Take the tap for the flourish alone: spin, haptic, nothing else.
+   *
+   * For a mark that IS Alia standing on its own — the welcome greeting, a chat
+   * header — where the spin has always been the whole of what a tap does. There
+   * is no callback to give it, and `onPress={() => {}}` would be a lie about
+   * that, so this is how such a mark asks to be pressable.
+   *
+   * Sibling of `spinOnMount`, and off by default like it. Off is what lets the
+   * mark sit inside a row that is itself pressable — a sidebar agent entry, a
+   * card — without swallowing the tap meant for the row, which is the whole
+   * reason the press target is opt-in.
+   */
+  spinOnPress?: boolean;
+  /**
+   * Accessible name. A mark standing in for whoever is speaking is not
+   * decoration, so it says who; Alia's own, drawn beside her name, is.
+   */
   accessibilityLabel?: string;
   /** Play the one-shot spin when the mark mounts (e.g. the sidebar rail collapsing in). */
   spinOnMount?: boolean;
@@ -46,19 +79,28 @@ 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.
+ * The mark that stands for whoever is speaking — the six-lobed flower glyph as
+ * an SVG (unselectable by nature), painted in one colour.
+ *
+ * Alia and every agent draw THIS, and nothing else: the colour is the only
+ * difference between them, and where a face would otherwise go it is the size
+ * that adapts, not a background. There is no disc, no crop and no image to fall
+ * back from — an agent's Oxy account carries no avatar at all, so this is the
+ * whole of an agent's likeness in the app.
+ *
+ * Effect-free reanimated: spin while thinking/using tools, opacity-pulse while
+ * streaming text, still when idle.
  */
-export function AliaMark({
+export function IdentityMark({
   size = 24,
   state = 'idle',
   className,
   color,
   onPress,
+  spinOnPress = false,
   accessibilityLabel,
   spinOnMount = false,
-}: AliaMarkProps) {
+}: IdentityMarkProps) {
   // 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.
@@ -126,19 +168,45 @@ export function AliaMark({
     onPress?.();
   };
 
+  const box = { width: size, height: size, alignItems: 'center', justifyContent: 'center' } as const;
+  const glyph = (
+    <Animated.View style={animatedStyle}>
+      <Svg width={size} height={size} viewBox={VIEWBOX}>
+        <Path d={GLYPH_PATH} fill={color ?? BRAND_FILL} />
+      </Svg>
+    </Animated.View>
+  );
+
+  // A `Pressable` captures the touch whether or not the caller wanted one, so
+  // the inert mark is a plain view — a mark drawn as somebody's face inside a
+  // row that is itself pressable must not stop that row from opening. Asking for
+  // the touch is therefore explicit, and either prop asks: a callback to run, or
+  // the flourish for its own sake.
+  if (onPress === undefined && !spinOnPress) {
+    return (
+      <View
+        accessibilityRole="image"
+        accessibilityLabel={accessibilityLabel}
+        className={className}
+        style={box}
+      >
+        {glyph}
+      </View>
+    );
+  }
+
   return (
     <Pressable
       onPress={handlePress}
-      accessibilityRole={onPress ? 'button' : 'image'}
+      // Pressable, but a button only when the press DOES something beyond the
+      // flourish. A screen reader announcing the welcome greeting's mark as a
+      // button would promise an action it does not have.
+      accessibilityRole={onPress === undefined ? 'image' : 'button'}
       accessibilityLabel={accessibilityLabel}
       className={className}
-      style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}
+      style={box}
     >
-      <Animated.View style={animatedStyle}>
-        <Svg width={size} height={size} viewBox={VIEWBOX}>
-          <Path d={GLYPH_PATH} fill={color ?? BRAND_FILL} />
-        </Svg>
-      </Animated.View>
+      {glyph}
     </Pressable>
   );
 }

package/src/components/Markdown.tsx

@@ -22,7 +22,6 @@ const FALLBACK_DARK: typeof FALLBACK_LIGHT = {
 
 const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
 const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
-const SANS_FONT = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' })!;
 const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
 
 function createRules(colors: AliaColors) {
@@ -178,12 +177,27 @@ function createRules(colors: AliaColors) {
   };
 }
 
-function createStyles(colors: AliaColors) {
+function createStyles(colors: AliaColors, fontFamily: string | undefined) {
   const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
   return {
-    body: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
-    text: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    // On WEB the family arrives through the cascade down to `html`, so naming
+    // one here would override Bloom rather than complement it.
+    //
+    // On NATIVE nothing arrives. Bloom's only app-wide mechanism is the
+    // `Text.defaultProps.style` mutation in its `FontLoader.native.tsx`, and
+    // **React 19 drops `defaultProps` under the automatic JSX runtime** that
+    // Expo compiles to — measured on react@19.2.3: `createElement(Foo, {})`
+    // yields `{style:{fontFamily}}` while `jsx(Foo, {})` yields `{}`, for
+    // function AND class components alike. So that mutation reaches no `<Text>`
+    // in any Expo consumer, and this renderer cannot inherit a face.
+    //
+    // `fontFamily` therefore comes from the caller, which is the only party
+    // that both knows the family and is allowed to name it: this package has no
+    // `@oxyhq/bloom` dependency, and react-native-markdown-display takes RN
+    // style objects, so there is no className path to NativeWind's token.
+    body: { ...BODY_TEXT, color: textColor, fontFamily },
+    text: { ...BODY_TEXT, color: textColor, fontFamily },
     paragraph: { marginTop: 0, marginBottom: 8 },
     strong: { fontWeight: '600' as const },
     em: { fontStyle: 'italic' as const },
@@ -236,6 +250,17 @@ function createStyles(colors: AliaColors) {
 }
 
 export interface AliaMarkdownProps {
+  /**
+   * The sans family for body text, as a SINGLE family name — RN's `fontFamily`
+   * takes one, not a CSS stack.
+   *
+   * Omitted, body text inherits: correct on web, where Bloom's
+   * `--bloom-font-sans` reaches it through the cascade. On native nothing is
+   * inherited (see `createStyles`), so a native caller that wants Bloom's face
+   * has to pass it — this package has no `@oxyhq/bloom` dependency and so
+   * cannot name it itself.
+   */
+  fontFamily?: string;
   content: string;
   colors?: Partial<AliaColors>;
 }
@@ -306,13 +331,13 @@ const MarkdownBlock = React.memo(function MarkdownBlock({ content, rules, styles
   return <Markdown rules={rules} style={styles}>{content}</Markdown>;
 });
 
-export function AliaMarkdown({ content, colors: colorOverrides }: AliaMarkdownProps) {
+export function AliaMarkdown({ content, colors: colorOverrides, fontFamily }: AliaMarkdownProps) {
   const scheme = useColorScheme();
   const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
   const colors = { ...fallback, ...colorOverrides } as AliaColors;
 
   const customRules = useMemo(() => createRules(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
-  const markdownStyles = useMemo(() => createStyles(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
+  const markdownStyles = useMemo(() => createStyles(colors, fontFamily), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground, fontFamily]);
   const blocks = useMemo(() => splitMarkdownBlocks(content), [content]);
 
   if (blocks.length === 1) {

package/src/components/ThinkingIndicator.tsx

@@ -6,7 +6,7 @@ import Animated, {
   withTiming,
   withSequence,
 } from "react-native-reanimated";
-import { AliaMark } from "./AliaMark";
+import { IdentityMark } from "./IdentityMark";
 
 const thinkingPhrases = [
   "Thinking...",
@@ -84,7 +84,7 @@ export function ThinkingIndicator({ isWorking = false, statusText, color }: { is
 
   return (
     <View className="flex-row items-center gap-2 py-2">
-      <AliaMark size={16} state={isWorking ? 'working' : 'thinking'} color={color} />
+      <IdentityMark size={16} state={isWorking ? 'working' : 'thinking'} color={color} />
       <View className="flex-row items-center">
         <Text className="text-base text-muted-foreground">{shownText}</Text>
         {(statusText || isTyping) && (

package/src/components/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
         outline:
           "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
-        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+        secondary: "bg-muted web:hover:opacity-80 active:opacity-80",
         ghost:
           "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
         link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
@@ -42,7 +42,7 @@ const buttonTextVariants = cva(
         destructive: "text-destructive-foreground",
         outline: "group-active:text-accent-foreground",
         secondary:
-          "text-secondary-foreground group-active:text-secondary-foreground",
+          "text-muted-foreground group-active:text-muted-foreground",
         ghost: "group-active:text-accent-foreground",
         link: "text-primary group-active:underline",
         pill: "text-primary-foreground",

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

@@ -21,6 +21,7 @@ declare module "react-native" {
 }
 
 type ChatTextInputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
+  unstyled?: boolean;
   noFocus?: boolean;
   onEnterPress?: () => void;
   onCompletionKey?: (key: string) => boolean;
@@ -36,6 +37,7 @@ type ChatTextInputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
 const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
   ({
     className,
+    unstyled = false,
     noFocus = false,
     onEnterPress,
     onCompletionKey,
@@ -54,6 +56,28 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
     const inputRef = React.useRef<TextInput>(null);
     const wrapperRef = React.useRef<View>(null);
 
+    // react-native-css observes `style` by reference. Memoizing the composed
+    // value prevents its own state update from manufacturing another changed
+    // style prop and recursively re-rendering this TextInput on native.
+    const inputStyle = React.useMemo(() => [
+      style,
+      !fillContainer && props.multiline && !disableAutoHeight && ({
+        minHeight,
+        maxHeight,
+        ...(Platform.OS === 'web'
+          ? { overflow: 'auto' as const, fieldSizing: 'content' }
+          : {}),
+      } as TextStyle & { fieldSizing?: string }),
+      fillContainer && { flex: 1, height: '100%' as const },
+    ], [
+      disableAutoHeight,
+      fillContainer,
+      maxHeight,
+      minHeight,
+      props.multiline,
+      style,
+    ]);
+
     React.useImperativeHandle(ref, () => inputRef.current as TextInput);
 
     // Attach paste event listener (web only)
@@ -135,7 +159,8 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
         <TextInput
           ref={inputRef}
           className={cn(
-            "native:text-md native:leading-[1.25] rounded-xl border border-input bg-background px-3.5 text-base text-foreground file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:flex web:w-full web:py-2 lg:text-sm",
+            "native:text-md native:leading-[1.25] text-base text-foreground file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:flex web:w-full web:py-2 lg:text-sm",
+            !unstyled && "rounded-xl border border-input bg-background px-3.5",
             "web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
             !fillContainer && !props.multiline && "h-9",
             fillContainer && "h-full",
@@ -147,16 +172,7 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
           onKeyPress={handleKeyPress}
           onContentSizeChange={handleContentSizeChange}
           scrollEnabled={fillContainer || props.multiline}
-          style={[
-            style,
-            !fillContainer && props.multiline && !disableAutoHeight && ({
-              minHeight,
-              maxHeight,
-              overflow: 'auto',
-              ...(Platform.OS === 'web' ? { fieldSizing: 'content' } : {}),
-            } as TextStyle & { overflow: 'auto'; fieldSizing?: string }),
-            fillContainer && { flex: 1, height: '100%' },
-          ]}
+          style={inputStyle}
           {...props}
         />
       </View>

package/src/components/ui/prompt-input/textarea.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { cn } from "../../../lib/utils";
 import { ChatTextInput } from "../chat-text-input";
 import { usePromptInput } from "./context";
@@ -28,6 +28,11 @@ export function PromptInputTextarea({
     handleCompletionKey,
   } = usePromptInput();
 
+  const inputStyle = React.useMemo(
+    () => [style, styles.borderless, isFullscreen && styles.fullscreen],
+    [isFullscreen, style],
+  );
+
   const textInput = (
     <ChatTextInput
       ref={textareaRef}
@@ -42,12 +47,14 @@ export function PromptInputTextarea({
       maxHeight={isFullscreen ? 10000 : maxHeight}
       onImagePaste={onImagePaste}
       fillContainer={isFullscreen}
+      unstyled
       className={cn(
-        "w-full border-0 bg-transparent text-foreground shadow-none",
+        "w-full border-0 bg-transparent text-foreground web:shadow-none",
         isFullscreen ? "px-4 pt-4" : "min-h-[44px] py-3",
         className
       )}
-      style={[style, isFullscreen && { paddingBottom: 100 }]}
+      style={inputStyle}
+      underlineColorAndroid="transparent"
       placeholder={placeholder}
       multiline
       editable={!disabled}
@@ -62,3 +69,12 @@ export function PromptInputTextarea({
 
   return textInput;
 }
+
+const styles = StyleSheet.create({
+  borderless: {
+    borderWidth: 0,
+  },
+  fullscreen: {
+    paddingBottom: 100,
+  },
+});