@wireai/activation 0.1.0

package/src/components/AnimatedSparkle.tsx

@@ -0,0 +1,101 @@
+/**
+ * AnimatedSparkle — the themed "AI is thinking" glyph (✦), animated with RN's
+ * built-in `Animated` (native driver) so the kit needs neither reanimated nor a
+ * vector-icon dependency.
+ *
+ * Variants:
+ *   - "spin" (default, unchanged): continuous rotation — the original loader.
+ *   - "pulse": the Wire Activation loading treatment — the mark breathes
+ *     (opacity 0.35 ↔ 1, 1600ms loop) instead of rotating.
+ *
+ * Reduce motion: no loop at all — the glyph renders static at full opacity
+ * (final frame), per design-refs/EXTRACTED-SPEC.md row 17.
+ */
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, Text } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { LOADER_PULSE_MIN_OPACITY, LOADER_PULSE_MS, loopEnabled, scaledMs } from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+
+const ROTATION_MS = 1800;
+
+export type AnimatedSparkleProps = {
+  /** Glyph size in px. */
+  size?: number;
+  /** Override color; defaults to the theme primary. */
+  color?: string;
+  /** "spin" rotates (default, the original), "pulse" breathes (the loader treatment). */
+  variant?: "spin" | "pulse";
+};
+
+const _AnimatedSparkle: React.FC<AnimatedSparkleProps> = ({ size = 30, color, variant = "spin" }) => {
+  const t = useOnboardingTheme();
+  const reduced = useReducedMotion();
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!loopEnabled(reduced)) {
+      // Static final frame: no rotation, full opacity.
+      progress.setValue(0);
+      return;
+    }
+    const loop =
+      variant === "pulse"
+        ? Animated.loop(
+            Animated.sequence([
+              Animated.timing(progress, {
+                toValue: 1,
+                duration: scaledMs(LOADER_PULSE_MS / 2),
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+              }),
+              Animated.timing(progress, {
+                toValue: 0,
+                duration: scaledMs(LOADER_PULSE_MS / 2),
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+              }),
+            ]),
+          )
+        : Animated.loop(
+            Animated.timing(progress, {
+              toValue: 1,
+              duration: scaledMs(ROTATION_MS),
+              easing: Easing.linear,
+              useNativeDriver: true,
+            }),
+          );
+    loop.start();
+    return () => loop.stop();
+  }, [progress, variant, reduced]);
+
+  const rotate = progress.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+  const pulse = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, LOADER_PULSE_MIN_OPACITY],
+  });
+
+  const animatedStyle = reduced
+    ? undefined
+    : variant === "pulse"
+      ? { opacity: pulse }
+      : { transform: [{ rotate }] };
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text
+        accessibilityElementsHidden
+        importantForAccessibility="no"
+        style={[styles.glyph, { fontSize: size, lineHeight: size * 1.1, color: color ?? t.colors.primary }]}
+      >
+        ✦
+      </Text>
+    </Animated.View>
+  );
+};
+
+export const AnimatedSparkle = React.memo(_AnimatedSparkle);
+
+const styles = StyleSheet.create({
+  glyph: { textAlign: "center" },
+});

package/src/components/Button.tsx

@@ -0,0 +1,129 @@
+/**
+ * Button — the kit's themed primary/outline button, replacing the SDK's hardcoded
+ * `Btn`. Every color/radius/font comes from the active theme.
+ *
+ * Motion (design-refs/EXTRACTED-SPEC.md row 20): "a footer button that answers
+ * the tap" — scale 1→0.975 spring on press-in, back on release, native driver.
+ * Reduce motion: an opacity dip to 0.85 while pressed, no scale. Disabled keeps
+ * the `disabled` token fill with no press handler (unchanged).
+ */
+import React, { useCallback, useRef } from "react";
+import { Animated, Pressable, StyleSheet, Text } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { buttonLabelStyle } from "../theme/typography";
+import {
+  BUTTON_PRESS_SCALE,
+  BUTTON_PRESS_SPRING,
+  REDUCED_FADE_MS,
+  REDUCED_PRESS_OPACITY,
+  scaledMs,
+} from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+
+type Variant = "primary" | "outline";
+
+type ButtonProps = {
+  title: string;
+  onPress?: () => void;
+  variant?: Variant;
+  disabled?: boolean;
+  /** Stretch to the container width — for form-style CTAs (e.g. the review form's
+   *  "Send feedback"). Default false keeps the content-width pill used by cards. */
+  fullWidth?: boolean;
+};
+
+const _Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = "primary",
+  disabled = false,
+  fullWidth = false,
+}) => {
+  const t = useOnboardingTheme();
+  const reduced = useReducedMotion();
+  const isPrimary = variant === "primary";
+
+  // 0 = at rest, 1 = pressed. Scale normally; opacity dip under reduce motion.
+  const pressT = useRef(new Animated.Value(0)).current;
+  const pressTo = useCallback(
+    (to: number) => {
+      if (reduced) {
+        Animated.timing(pressT, {
+          toValue: to,
+          duration: scaledMs(REDUCED_FADE_MS),
+          useNativeDriver: true,
+        }).start();
+        return;
+      }
+      Animated.spring(pressT, {
+        toValue: to,
+        friction: BUTTON_PRESS_SPRING.friction,
+        tension: BUTTON_PRESS_SPRING.tension,
+        useNativeDriver: true,
+      }).start();
+    },
+    [pressT, reduced],
+  );
+  const handlePressIn = useCallback(() => pressTo(1), [pressTo]);
+  const handlePressOut = useCallback(() => pressTo(0), [pressTo]);
+
+  const scale = pressT.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, reduced ? 1 : BUTTON_PRESS_SCALE],
+  });
+  const opacity = pressT.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, reduced ? REDUCED_PRESS_OPACITY : 1],
+  });
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      onPressIn={disabled ? undefined : handlePressIn}
+      onPressOut={disabled ? undefined : handlePressOut}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      style={fullWidth ? styles.fill : undefined}
+    >
+      <Animated.View
+        style={[
+          styles.base,
+          fullWidth && styles.fill,
+          {
+            borderRadius: t.button.radius,
+            minHeight: t.button.height,
+            paddingHorizontal: t.button.paddingX,
+            opacity,
+            transform: [{ scale }],
+          },
+          isPrimary
+            ? { backgroundColor: disabled ? t.colors.disabled : t.colors.primary }
+            : { borderWidth: 1.5, borderColor: disabled ? t.colors.border : t.colors.primary },
+        ]}
+      >
+        <Text
+          style={[
+            buttonLabelStyle(t.fonts),
+            {
+              color: disabled
+                ? t.colors.textMuted
+                : isPrimary
+                  ? t.colors.onPrimary
+                  : t.colors.primary,
+            },
+          ]}
+        >
+          {title}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export const Button = React.memo(_Button);
+
+const styles = StyleSheet.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  fill: { width: "100%" },
+});

package/src/components/CardHandoff.tsx

@@ -0,0 +1,212 @@
+/**
+ * CardHandoff — the card-to-card transition from the Wire Activation design:
+ * "cards hand off, they don't cut". When `transitionKey` changes, the outgoing
+ * child leaves left (translateX 0→-26, fade, 180ms) in an absolute layer while
+ * the incoming child arrives from the right (translateX +26→0, fade, 220ms)
+ * delayed by the 80ms exit lead — one moving surface, ~300ms total.
+ *
+ * Variants (per child):
+ *   - "slide": questions — the directional stepper motion above.
+ *   - "spring": the InterstitialCard value beat — scale 0.96→1 spring pop
+ *     (the shell's springier variant, kept from AnimatedCard).
+ *   - "fade": loaders — enter/exit as a plain 120ms fade so the "thinking"
+ *     state hands off to the first card without a hard cut.
+ *
+ * Reduce motion: every handoff becomes a 120ms crossfade, no translate/scale.
+ * All values run on the native driver (transform/opacity only); in-flight
+ * animations are stopped when superseded and on unmount.
+ *
+ * This SUPERSEDES the enter-only AnimatedCard: same keyed-remount contract from
+ * OnboardingFlow (the child renderer stays keyed on the message id), plus the
+ * paired exit layer the design calls for.
+ */
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, StyleSheet } from "react-native";
+import {
+  CARD_ENTER_MS,
+  CARD_ENTER_SCALE_FROM,
+  CARD_EXIT_LEAD_MS,
+  CARD_EXIT_MS,
+  CARD_SLIDE_PX,
+  CARD_SPRING,
+  LOADER_HANDOFF_FADE_MS,
+  REDUCED_FADE_MS,
+  WIRE_BEZIER,
+  scaledMs,
+} from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+
+const easeWire = Easing.bezier(...WIRE_BEZIER);
+
+export type CardHandoffVariant = "slide" | "spring" | "fade";
+
+export type CardHandoffProps = {
+  /** Identity of the current child (e.g. the message id). A change runs the handoff. */
+  transitionKey: string;
+  /** How the CURRENT child enters (and, snapshotted, how it will later exit). */
+  variant?: CardHandoffVariant;
+  children: React.ReactNode;
+};
+
+type Snapshot = { key: string; node: React.ReactNode; variant: CardHandoffVariant };
+
+const _CardHandoff: React.FC<CardHandoffProps> = ({
+  transitionKey,
+  variant = "slide",
+  children,
+}) => {
+  const reduced = useReducedMotion();
+  const [leaving, setLeaving] = useState<Snapshot | null>(null);
+
+  const enterT = useRef(new Animated.Value(0)).current;
+  const exitT = useRef(new Animated.Value(0)).current;
+  // The previous render's child, snapshotted so it can play the exit layer.
+  const prev = useRef<Snapshot>({ key: transitionKey, node: children, variant });
+  // Variant of the child currently entering (drives the enter interpolations).
+  const [enterVariant, setEnterVariant] = useState<CardHandoffVariant>(variant);
+  const running = useRef<{ enter?: Animated.CompositeAnimation; exit?: Animated.CompositeAnimation }>({});
+  const mounted = useRef(false);
+
+  // One orchestration effect, run every render: refresh the snapshot while the key
+  // is stable; on a key change, snapshot the old child into the exit layer and run
+  // the paired exit+enter. (No deps array on purpose — `children` is a fresh node
+  // every parent render and must keep the snapshot current.)
+  useEffect(() => {
+    const last = prev.current;
+    prev.current = { key: transitionKey, node: children, variant };
+
+    // First mount: enter only (the design's initial reveal), nothing exits.
+    if (!mounted.current) {
+      mounted.current = true;
+      setEnterVariant(variant);
+      running.current.enter = startEnter(enterT, variant, reduced, 0);
+      return;
+    }
+    if (last.key === transitionKey) return;
+
+    running.current.enter?.stop();
+    running.current.exit?.stop();
+    setLeaving(last);
+    setEnterVariant(variant);
+    enterT.setValue(0);
+    exitT.setValue(0);
+
+    const exitDuration = reduced
+      ? REDUCED_FADE_MS
+      : last.variant === "fade"
+        ? LOADER_HANDOFF_FADE_MS
+        : CARD_EXIT_MS;
+    const exit = Animated.timing(exitT, {
+      toValue: 1,
+      duration: scaledMs(exitDuration),
+      easing: easeWire,
+      useNativeDriver: true,
+    });
+    running.current.exit = exit;
+    exit.start();
+
+    const enter = startEnter(enterT, variant, reduced, reduced ? 0 : CARD_EXIT_LEAD_MS, () =>
+      setLeaving(null),
+    );
+    running.current.enter = enter;
+  });
+
+  // Stop anything in flight on unmount (leaked animations drain the JS thread).
+  useEffect(
+    () => () => {
+      running.current.enter?.stop();
+      running.current.exit?.stop();
+    },
+    [],
+  );
+
+  const enterStyle = {
+    opacity: enterT,
+    transform: transformFor(enterVariant, enterT, reduced, "enter"),
+  };
+
+  return (
+    <>
+      {leaving ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              opacity: exitT.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+              transform: transformFor(leaving.variant, exitT, reduced, "exit"),
+            },
+          ]}
+        >
+          {leaving.node}
+        </Animated.View>
+      ) : null}
+      <Animated.View style={[styles.fill, enterStyle]}>{children}</Animated.View>
+    </>
+  );
+};
+
+/** Kick off the enter animation for a variant (spring for the value beat, timing otherwise). */
+const startEnter = (
+  value: Animated.Value,
+  variant: CardHandoffVariant,
+  reduced: boolean,
+  delay: number,
+  onDone?: () => void,
+): Animated.CompositeAnimation => {
+  value.setValue(0);
+  const anim =
+    !reduced && variant === "spring"
+      ? Animated.spring(value, {
+          toValue: 1,
+          delay: scaledMs(delay),
+          damping: CARD_SPRING.damping,
+          stiffness: CARD_SPRING.stiffness,
+          mass: CARD_SPRING.mass,
+          useNativeDriver: true,
+        })
+      : Animated.timing(value, {
+          toValue: 1,
+          delay: scaledMs(delay),
+          duration: scaledMs(
+            reduced
+              ? REDUCED_FADE_MS
+              : variant === "fade"
+                ? LOADER_HANDOFF_FADE_MS
+                : CARD_ENTER_MS,
+          ),
+          easing: easeWire,
+          useNativeDriver: true,
+        });
+  anim.start(({ finished }) => {
+    if (finished) onDone?.();
+  });
+  return anim;
+};
+
+/** Transform track per variant/direction; reduce motion = opacity-only crossfade. */
+const transformFor = (
+  variant: CardHandoffVariant,
+  t: Animated.Value,
+  reduced: boolean,
+  direction: "enter" | "exit",
+) => {
+  if (reduced || variant === "fade") return [];
+  if (variant === "spring" && direction === "enter") {
+    return [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [CARD_ENTER_SCALE_FROM, 1] }) }];
+  }
+  return [
+    {
+      translateX: t.interpolate({
+        inputRange: [0, 1],
+        outputRange: direction === "enter" ? [CARD_SLIDE_PX, 0] : [0, -CARD_SLIDE_PX],
+      }),
+    },
+  ];
+};
+
+export const CardHandoff = React.memo(_CardHandoff);
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+});

package/src/components/CardLayout.tsx

@@ -0,0 +1,103 @@
+/**
+ * CardLayout — the shared full-screen card body every card renders into. It owns
+ * the Cal-AI style vertical rhythm so no card re-implements layout:
+ *
+ *   [ title ]                 ← fixed at top (small gap → subtitle)
+ *   [ subtitle / hint ]
+ *   [ ─ scrollable content ─ ]← options / chips / input; a flex:1 ScrollView that
+ *                               fills the gap, so it scrolls only when tall and
+ *                               otherwise just pushes the footer down
+ *   [ footer / CTA ]          ← the submit button, ANCHORED to the bottom
+ *
+ * The middle ScrollView (flex:1) IS the flexible spacer: when the content is short
+ * it grows to fill, pinning the footer to the bottom of the screen; when the
+ * content is many/tall options it scrolls while the CTA stays put. Everything
+ * reads from the theme tokens — no hardcoded spacing or color.
+ *
+ * `align="center"` vertically centers the content (used by the value/status beats:
+ * InterstitialCard / StatusCard), keeping the same pinned-CTA footer.
+ *
+ * The whole column sits in a KeyboardAvoidingView (behavior="padding") so the pinned
+ * footer rides above the soft keyboard on text questions (TextInputCard). On hosts
+ * whose window already resizes for the keyboard the computed overlap is ~0, so the
+ * padding is a no-op — safe on both iOS and Android, edge-to-edge or not.
+ */
+import React from "react";
+import { KeyboardAvoidingView, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { bodyStyle, labelStyle } from "../theme/typography";
+
+export type CardLayoutProps = {
+  /** Fixed question/label shown at the top. Omit for a header-less centered beat. */
+  title?: string;
+  /** Optional supporting line under the title (small gap between them). */
+  subtitle?: string;
+  /** The options / chips / input area — the scrollable middle. */
+  children: React.ReactNode;
+  /** The pinned bottom CTA (usually a <Button/>). Omitted → no footer. */
+  footer?: React.ReactNode;
+  /** Vertical alignment of the middle content. "top" (questions) | "center" (beats). */
+  align?: "top" | "center";
+  /** Custom title node (e.g. StatusCard's icon+title row) rendered in place of `title`. */
+  titleNode?: React.ReactNode;
+};
+
+const _CardLayout: React.FC<CardLayoutProps> = ({
+  title,
+  subtitle,
+  children,
+  footer,
+  align = "top",
+  titleNode,
+}) => {
+  const t = useOnboardingTheme();
+  const hasHeader = !!title || !!subtitle || !!titleNode;
+
+  return (
+    <KeyboardAvoidingView style={styles.fill} behavior="padding">
+      {hasHeader ? (
+        <View style={{ marginBottom: t.spacing.lg }}>
+          {titleNode ??
+            (title ? (
+              <Text style={[labelStyle(t.fonts), { color: t.colors.text }]}>{title}</Text>
+            ) : null)}
+          {subtitle ? (
+            <Text
+              style={[
+                bodyStyle(t.fonts),
+                { color: t.colors.textMuted, marginTop: t.spacing.xs },
+              ]}
+            >
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+
+      <ScrollView
+        style={styles.fill}
+        contentContainerStyle={[
+          styles.scrollContent,
+          align === "center" && styles.center,
+        ]}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+        showsVerticalScrollIndicator={false}
+      >
+        {children}
+      </ScrollView>
+
+      {footer ? <View style={{ paddingTop: t.spacing.lg }}>{footer}</View> : null}
+    </KeyboardAvoidingView>
+  );
+};
+
+export const CardLayout = React.memo(_CardLayout);
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  // flexGrow lets a short content block grow to fill (pinning the footer) while a
+  // tall one scrolls past the visible area.
+  scrollContent: { flexGrow: 1 },
+  center: { justifyContent: "center" },
+});