@ateam-ai-mobile/plugin-runtime 0.1.0

package/src/surfaces/AdaOrb.tsx

@@ -0,0 +1,318 @@
+import { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withRepeat,
+  withTiming,
+  withSequence,
+  withDelay,
+  Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import Svg, { Circle, Defs, RadialGradient, Stop, Text as SvgText } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export type AdaOrbState = 'idle' | 'listening' | 'thinking' | 'speaking';
+
+interface AdaOrbProps {
+  size?: number;
+  state?: AdaOrbState;
+  /** Show the "iA" wordmark inside the orb. Suppressed below 60px because
+   *  glyphs become unreadable at avatar/chevron sizes — render as a plain
+   *  orb there. Default true. */
+  inscription?: boolean;
+}
+
+export default function AdaOrb({ size = 120, state = 'idle', inscription = true }: AdaOrbProps) {
+  const showInscription = inscription && size >= 60;
+  const center = size / 2;
+  const coreR = size * 0.32;
+  const innerHaloR = size * 0.42;
+  const outerHaloR = size * 0.5;
+
+  // Base breath layers
+  const coreScale = useSharedValue(1);
+  const innerScale = useSharedValue(1);
+  const outerScale = useSharedValue(1);
+  const outerOpacity = useSharedValue(0.55);
+
+  // Listening: continuous ripple cycle (one shared value, phase-shifted reads)
+  const rippleCycle = useSharedValue(0);
+
+  // Thinking: 3 orbiting sparks at different speeds + directions
+  const orbit1 = useSharedValue(0); // fast inner
+  const orbit2 = useSharedValue(0); // medium mid
+  const orbit3 = useSharedValue(0); // slow outer (counter)
+
+  // Speaking: secondary fast double-beat overlay
+  const beat = useSharedValue(1);
+
+  useEffect(() => {
+    cancelAnimation(coreScale);
+    cancelAnimation(innerScale);
+    cancelAnimation(outerScale);
+    cancelAnimation(outerOpacity);
+    cancelAnimation(rippleCycle);
+    cancelAnimation(orbit1);
+    cancelAnimation(orbit2);
+    cancelAnimation(orbit3);
+    cancelAnimation(beat);
+
+    // Reset state-specific drivers
+    rippleCycle.value = 0;
+    orbit1.value = 0;
+    orbit2.value = 0;
+    orbit3.value = 0;
+    beat.value = 1;
+
+    let breathMs = 3600;
+    let breathAmount = 0.025;
+
+    if (state === 'listening') {
+      breathMs = 2000;
+      breathAmount = 0.05;
+      // Continuous ripple loop — one cycle = one ripple lifetime
+      rippleCycle.value = withRepeat(
+        withTiming(1, { duration: 2000, easing: Easing.out(Easing.quad) }),
+        -1,
+        false,
+      );
+    } else if (state === 'thinking') {
+      breathMs = 2400;
+      breathAmount = 0.04;
+      // Three sparks orbiting at different speeds + directions — feels like processing
+      orbit1.value = withRepeat(
+        withTiming(1, { duration: 1100, easing: Easing.linear }),
+        -1,
+        false,
+      );
+      orbit2.value = withRepeat(
+        withTiming(1, { duration: 1900, easing: Easing.linear }),
+        -1,
+        false,
+      );
+      orbit3.value = withRepeat(
+        withTiming(-1, { duration: 2700, easing: Easing.linear }),
+        -1,
+        false,
+      );
+    } else if (state === 'speaking') {
+      breathMs = 700;
+      breathAmount = 0.13;
+      // Double-beat overlay — quick punch + secondary kick
+      beat.value = withRepeat(
+        withSequence(
+          withTiming(1.08, { duration: 90, easing: Easing.out(Easing.quad) }),
+          withTiming(1.0, { duration: 130, easing: Easing.in(Easing.quad) }),
+          withTiming(1.05, { duration: 80, easing: Easing.out(Easing.quad) }),
+          withTiming(1.0, { duration: 200, easing: Easing.in(Easing.quad) }),
+          withTiming(1.0, { duration: 280 }),
+        ),
+        -1,
+        false,
+      );
+    }
+
+    // Base breath — different easing per state
+    const breathEasing =
+      state === 'speaking' ? Easing.out(Easing.cubic) : Easing.inOut(Easing.sin);
+
+    coreScale.value = withRepeat(
+      withSequence(
+        withTiming(1 + breathAmount, { duration: breathMs, easing: breathEasing }),
+        withTiming(1, { duration: breathMs, easing: breathEasing }),
+      ),
+      -1,
+      false,
+    );
+    innerScale.value = withRepeat(
+      withSequence(
+        withTiming(1 + breathAmount * 1.4, { duration: breathMs * 1.15, easing: breathEasing }),
+        withTiming(1, { duration: breathMs * 1.15, easing: breathEasing }),
+      ),
+      -1,
+      false,
+    );
+    outerScale.value = withRepeat(
+      withSequence(
+        withTiming(1 + breathAmount * 1.8, { duration: breathMs * 1.3, easing: breathEasing }),
+        withTiming(1, { duration: breathMs * 1.3, easing: breathEasing }),
+      ),
+      -1,
+      false,
+    );
+    outerOpacity.value = withRepeat(
+      withSequence(
+        withTiming(state === 'idle' ? 0.55 : 0.8, { duration: breathMs * 1.3, easing: breathEasing }),
+        withTiming(0.35, { duration: breathMs * 1.3, easing: breathEasing }),
+      ),
+      -1,
+      false,
+    );
+  }, [state]);
+
+  // Animated props for base layers — multiplied by `beat` so speaking double-pulse stacks
+  const coreProps = useAnimatedProps(() => ({
+    r: coreR * coreScale.value * beat.value,
+  }));
+  const innerProps = useAnimatedProps(() => ({
+    r: innerHaloR * innerScale.value * beat.value,
+  }));
+  const outerProps = useAnimatedProps(() => ({
+    r: outerHaloR * outerScale.value,
+    opacity: outerOpacity.value,
+  }));
+
+  // Listening ripples — three phase-shifted reads of rippleCycle
+  const ripple1Props = useAnimatedProps(() => {
+    const t = rippleCycle.value;
+    return {
+      r: outerHaloR * (1 + t * 0.55),
+      opacity: state === 'listening' ? 0.55 * (1 - t) : 0,
+    };
+  });
+  const ripple2Props = useAnimatedProps(() => {
+    const t = (rippleCycle.value + 0.34) % 1;
+    return {
+      r: outerHaloR * (1 + t * 0.55),
+      opacity: state === 'listening' ? 0.45 * (1 - t) : 0,
+    };
+  });
+  const ripple3Props = useAnimatedProps(() => {
+    const t = (rippleCycle.value + 0.67) % 1;
+    return {
+      r: outerHaloR * (1 + t * 0.55),
+      opacity: state === 'listening' ? 0.35 * (1 - t) : 0,
+    };
+  });
+
+  // Thinking sparks — three at different radii and angular velocities
+  const spark1Props = useAnimatedProps(() => {
+    const angle = orbit1.value * Math.PI * 2 - Math.PI / 2;
+    const r = coreR * 0.55;
+    return {
+      cx: center + Math.cos(angle) * r,
+      cy: center + Math.sin(angle) * r,
+      opacity: state === 'thinking' ? 1 : 0,
+    };
+  });
+  const spark2Props = useAnimatedProps(() => {
+    const angle = orbit2.value * Math.PI * 2 + Math.PI * 0.6;
+    const r = coreR * 0.85;
+    return {
+      cx: center + Math.cos(angle) * r,
+      cy: center + Math.sin(angle) * r,
+      opacity: state === 'thinking' ? 0.9 : 0,
+    };
+  });
+  const spark3Props = useAnimatedProps(() => {
+    const angle = orbit3.value * Math.PI * 2 + Math.PI * 1.3;
+    const r = coreR * 1.05;
+    return {
+      cx: center + Math.cos(angle) * r,
+      cy: center + Math.sin(angle) * r,
+      opacity: state === 'thinking' ? 0.7 : 0,
+    };
+  });
+
+  return (
+    <View style={[styles.wrap, { width: size, height: size }]}>
+      <Svg width={size} height={size}>
+        <Defs>
+          <RadialGradient id="adaCore" cx="36%" cy="30%" r="70%">
+            <Stop offset="0%" stopColor="#FFE0B0" stopOpacity="1" />
+            <Stop offset="28%" stopColor="#FFA85A" stopOpacity="1" />
+            <Stop offset="65%" stopColor="#FF7A28" stopOpacity="1" />
+            <Stop offset="100%" stopColor="#B8410A" stopOpacity="1" />
+          </RadialGradient>
+          <RadialGradient id="adaInner" cx="50%" cy="50%" r="50%">
+            <Stop offset="0%" stopColor="#FF8A3C" stopOpacity="0.55" />
+            <Stop offset="100%" stopColor="#FF7028" stopOpacity="0" />
+          </RadialGradient>
+          <RadialGradient id="adaOuter" cx="50%" cy="50%" r="50%">
+            <Stop offset="0%" stopColor="#FF7A28" stopOpacity="0.4" />
+            <Stop offset="100%" stopColor="#FF6018" stopOpacity="0" />
+          </RadialGradient>
+          <RadialGradient id="adaSpark" cx="50%" cy="50%" r="50%">
+            <Stop offset="0%" stopColor="#FFFAEB" stopOpacity="1" />
+            <Stop offset="60%" stopColor="#FFD095" stopOpacity="0.9" />
+            <Stop offset="100%" stopColor="#FFA85A" stopOpacity="0" />
+          </RadialGradient>
+        </Defs>
+
+        {/* Listening ripples — drawn behind orb body */}
+        <AnimatedCircle
+          cx={center}
+          cy={center}
+          stroke="#FF7A28"
+          strokeWidth={1.5}
+          fill="none"
+          animatedProps={ripple1Props}
+        />
+        <AnimatedCircle
+          cx={center}
+          cy={center}
+          stroke="#FF7A28"
+          strokeWidth={1.5}
+          fill="none"
+          animatedProps={ripple2Props}
+        />
+        <AnimatedCircle
+          cx={center}
+          cy={center}
+          stroke="#FF7A28"
+          strokeWidth={1.5}
+          fill="none"
+          animatedProps={ripple3Props}
+        />
+
+        {/* Base orb body */}
+        <AnimatedCircle cx={center} cy={center} fill="url(#adaOuter)" animatedProps={outerProps} />
+        <AnimatedCircle cx={center} cy={center} fill="url(#adaInner)" animatedProps={innerProps} />
+        <AnimatedCircle cx={center} cy={center} fill="url(#adaCore)" animatedProps={coreProps} />
+
+        {/* Thinking sparks — three orbiting particles drawn on top */}
+        <AnimatedCircle
+          r={Math.max(3, size * 0.05)}
+          fill="url(#adaSpark)"
+          animatedProps={spark1Props}
+        />
+        <AnimatedCircle
+          r={Math.max(2.5, size * 0.04)}
+          fill="url(#adaSpark)"
+          animatedProps={spark2Props}
+        />
+        <AnimatedCircle
+          r={Math.max(2, size * 0.032)}
+          fill="url(#adaSpark)"
+          animatedProps={spark3Props}
+        />
+
+        {/* "iA" wordmark — matches the app icon. Suppressed at small sizes
+            where the glyphs would be unreadable (see showInscription). */}
+        {showInscription && (
+          <SvgText
+            x={center}
+            y={center + size * 0.11}
+            fontSize={size * 0.34}
+            fontWeight="600"
+            fill="#FFF5E0"
+            textAnchor="middle"
+            letterSpacing={-size * 0.005}
+          >
+            iA
+          </SvgText>
+        )}
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/surfaces/SurfaceCard.tsx

@@ -0,0 +1,137 @@
+/**
+ * SurfaceCard — a tappable tile shape for plugins that surface as cards
+ * (empty-state suggestions, dashboards, daily-brief items).
+ *
+ * Plugins declare icon + title + subtitle + onPress; the host provides
+ * the warm Ada chrome (paper-soft bg, soft border, arrow chevron, haptic).
+ *
+ * Optional `children` render below the title block for richer previews
+ * (e.g. small ring widget, last-meal photo, current weather).
+ *
+ * Usage:
+ *   <SurfaceCard
+ *     icon="🥗"
+ *     title="Today's plate"
+ *     subtitle="2,100 kcal · 140g protein"
+ *     onPress={() => sendPrompt('Tell me about my nutrition today')}
+ *   />
+ */
+import { type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { getHaptics } from '../host';
+import { ada, borderRadius } from '@ateam-ai-mobile/core';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface SurfaceCardProps {
+  /** Emoji or short string icon shown on the left */
+  icon?: string;
+  /** Card headline (e.g. "Today's plate") */
+  title: string;
+  /** Optional secondary line below title */
+  subtitle?: string;
+  /** Tap handler. Fires haptic before invoking. */
+  onPress?: () => void;
+  /** Long-press handler. Fires a heavier haptic. Used by user widgets for
+   *  the Delete / (later) Hide / Rename context menu. */
+  onLongPress?: () => void;
+  /** Whether to show the ›-style trailing arrow (default: true if onPress) */
+  showArrow?: boolean;
+  /** Optional preview content rendered below the title block */
+  children?: ReactNode;
+}
+
+export default function SurfaceCard({
+  icon,
+  title,
+  subtitle,
+  onPress,
+  onLongPress,
+  showArrow,
+  children,
+}: SurfaceCardProps) {
+  const arrow = showArrow ?? !!onPress;
+  const handlePress = () => {
+    if (!onPress) return;
+    getHaptics()?.impact('light');
+    onPress();
+  };
+  const handleLongPress = () => {
+    if (!onLongPress) return;
+    getHaptics()?.impact('medium');
+    onLongPress();
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={[icon, title, subtitle].filter(Boolean).join(', ')}
+      accessibilityHint={onLongPress ? 'Long-press for more options' : undefined}
+      style={styles.card}
+      onPress={onPress ? handlePress : undefined}
+      onLongPress={onLongPress ? handleLongPress : undefined}
+      disabled={!onPress && !onLongPress}
+    >
+      <View style={styles.row}>
+        {icon ? <Text style={styles.icon}>{icon}</Text> : null}
+        <View style={{ flex: 1 }}>
+          <Text style={styles.title}>{title}</Text>
+          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+        </View>
+        {arrow ? <Text style={styles.arrow}>{'\u2192'}</Text> : null}
+      </View>
+      {children ? <View style={styles.body}>{children}</View> : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: ada.paperSoft,
+    borderWidth: 1,
+    borderColor: ada.border,
+    borderRadius: borderRadius.xl,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+  },
+  icon: {
+    fontSize: 22,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: ada.ink,
+    letterSpacing: -0.2,
+    fontFamily: fontFam,
+  },
+  subtitle: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: ada.inkMuted,
+    marginTop: 2,
+    letterSpacing: -0.1,
+    fontFamily: fontFam,
+  },
+  arrow: {
+    fontSize: 18,
+    color: ada.inkMuted,
+    fontWeight: '400',
+  },
+  body: {
+    marginTop: 10,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: ada.border,
+  },
+});

package/src/surfaces/SurfaceDrawer.tsx

@@ -0,0 +1,216 @@
+/**
+ * SurfaceDrawer — generic bottom-sheet container for plugins.
+ *
+ * Plugins render their content; SurfaceDrawer provides the Ada chrome:
+ * drag handle, header (orb + title + subtitle + optional privacy pill),
+ * close button, motion, backdrop dismiss.
+ *
+ * Usage:
+ *   <SurfaceDrawer
+ *     visible={open}
+ *     onClose={() => setOpen(false)}
+ *     title="What I remember about you"
+ *     subtitle="Only you can see this"
+ *     privacy
+ *   >
+ *     <MyPluginContent />
+ *   </SurfaceDrawer>
+ */
+import { useEffect, useRef, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { ada } from '@ateam-ai-mobile/core';
+import AdaOrb from './AdaOrb';
+
+const SCREEN_H = Dimensions.get('window').height;
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface SurfaceDrawerProps {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  /** Show the lock + "Only you can see this" privacy pill under the title */
+  privacy?: boolean;
+  /** Show the small Ada orb in the header (default: true) */
+  showOrb?: boolean;
+  /** Sheet height ratio of screen (default: 0.85) */
+  heightRatio?: number;
+  children: ReactNode;
+}
+
+export default function SurfaceDrawer({
+  visible,
+  onClose,
+  title,
+  subtitle,
+  privacy,
+  showOrb = true,
+  heightRatio = 0.85,
+  children,
+}: SurfaceDrawerProps) {
+  const sheetH = Math.round(SCREEN_H * heightRatio);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(sheetH)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(fadeAnim, { toValue: 1, duration: 220, useNativeDriver: true }),
+        Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, tension: 80, friction: 12 }),
+      ]).start();
+    } else {
+      fadeAnim.setValue(0);
+      slideAnim.setValue(sheetH);
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const close = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 0, duration: 160, useNativeDriver: true }),
+      Animated.timing(slideAnim, { toValue: sheetH, duration: 200, useNativeDriver: true }),
+    ]).start(() => onClose());
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View style={[styles.overlay, { opacity: fadeAnim }]} pointerEvents="auto">
+      <Pressable style={StyleSheet.absoluteFill} onPress={close} />
+      <Animated.View
+        style={[
+          styles.sheet,
+          { height: sheetH, transform: [{ translateY: slideAnim }] },
+        ]}
+      >
+        {/* Drag handle */}
+        <View style={styles.handle} />
+
+        {/* Header */}
+        <View style={styles.header}>
+          {showOrb ? (
+            <View style={styles.headerOrb}>
+              <AdaOrb size={36} state="idle" />
+            </View>
+          ) : null}
+          <View style={{ flex: 1 }}>
+            <Text style={styles.title}>{title}</Text>
+            {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+            {privacy ? (
+              <View style={styles.privacyPill}>
+                <Svg width={11} height={11} viewBox="0 0 24 24" fill="none" stroke={ada.inkSoft} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
+                  <Path d="M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2z" />
+                  <Path d="M7 11V7a5 5 0 0110 0v4" />
+                </Svg>
+                <Text style={styles.privacyText}>Only you can see this</Text>
+              </View>
+            ) : null}
+          </View>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            style={styles.closeBtn}
+            onPress={close}
+            hitSlop={12}
+          >
+            <Svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke={ada.inkSoft} strokeWidth={2.2} strokeLinecap="round">
+              <Path d="M18 6L6 18M6 6l12 12" />
+            </Svg>
+          </Pressable>
+        </View>
+
+        {/* Body — caller renders content */}
+        <View style={styles.body}>{children}</View>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0, left: 0, right: 0, bottom: 0,
+    backgroundColor: 'rgba(26, 20, 16, 0.35)',
+    justifyContent: 'flex-end',
+    zIndex: 999,
+    elevation: 999,
+  },
+  sheet: {
+    backgroundColor: ada.paper,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    overflow: 'hidden',
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: ada.inkMuted,
+    opacity: 0.3,
+    alignSelf: 'center',
+    marginTop: 10,
+    marginBottom: 6,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 22,
+    paddingVertical: 16,
+    gap: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: ada.border,
+  },
+  headerOrb: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: ada.ink,
+    letterSpacing: -0.2,
+    fontFamily: fontFam,
+  },
+  subtitle: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: ada.inkSoft,
+    marginTop: 2,
+    letterSpacing: -0.1,
+    fontFamily: fontFam,
+  },
+  privacyPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    marginTop: 4,
+  },
+  privacyText: {
+    fontSize: 11,
+    fontWeight: '500',
+    color: ada.inkSoft,
+    letterSpacing: 0.2,
+    fontFamily: fontFam,
+  },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: ada.paperSoft,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  body: {
+    flex: 1,
+  },
+});