@wireai/activation 0.1.0

package/src/components/CenteredModal.tsx

@@ -0,0 +1,184 @@
+/**
+ * CenteredModal - the content-agnostic centered-popup shell.
+ *
+ * Renders its children as an alert-style card in the MIDDLE of the screen, over a dimmed
+ * backdrop, with a spring/fade entrance. It knows nothing about what it presents: the reviews
+ * gate uses it (via the `ReviewModal` back-compat re-export) and the questionnaire module reuses
+ * the same shell, neither depends on the other.
+ *
+ * Adapted from the mobile-launcher boilerplate's `animated-modal` (transparent RN Modal +
+ * centered container + backdrop-tap dismiss + content stop-propagation + springy zoom-in), but
+ * reimplemented on RN's built-in `Animated` (native driver) so the shell stays dependency-free:
+ * the boilerplate uses react-native-reanimated, which the kit does not.
+ *
+ * Dismissal (backdrop tap / Android back / the imperative `close()` handle) animates the card
+ * out, then fires `onDismiss`. It never auto-closes on resolve: the host keeps the card showing
+ * whatever payoff it wants (a thank-you, a summary) until the user taps the backdrop to close,
+ * exactly like CompletionView.
+ */
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Animated, BackHandler, Easing, Modal, Pressable, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import type { OnboardingTheme } from "../theme/types";
+import { REDUCED_FADE_MS } from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+import { CENTERED_MODAL_ANIM } from "../motion/centeredModalMotion";
+
+/** Imperative handle so an in-card "Not now"/"Skip" link can trigger the exit animation. */
+export type CenteredModalHandle = { close: () => void };
+
+export type CenteredModalProps = {
+  /** The (already merged) active theme - card surface/radius/spacing come from here. */
+  theme: OnboardingTheme;
+  /** Whether a backdrop tap / back press dismisses. Default true (never a dead end). */
+  dismissible?: boolean;
+  /** Fired once, AFTER the exit animation, on any dismiss. Wire to the host's resolve. */
+  onDismiss: () => void;
+  children: React.ReactNode;
+};
+
+const _CenteredModal = forwardRef<CenteredModalHandle, CenteredModalProps>(
+  ({ theme, dismissible = true, onDismiss, children }, ref) => {
+    const progress = useRef(new Animated.Value(0)).current;
+    const [open, setOpen] = useState(true);
+    const closingRef = useRef(false);
+    const reduced = useReducedMotion();
+
+    // Entrance: spring the card in (scale + fade); the backdrop fades up in lock-step.
+    // Reduce motion: a short fade to the settled card, no spring/scale.
+    useEffect(() => {
+      const anim = reduced
+        ? Animated.timing(progress, {
+            toValue: 1,
+            duration: REDUCED_FADE_MS,
+            useNativeDriver: true,
+          })
+        : Animated.spring(progress, {
+            toValue: 1,
+            useNativeDriver: true,
+            friction: CENTERED_MODAL_ANIM.enterSpring.friction,
+            tension: CENTERED_MODAL_ANIM.enterSpring.tension,
+          });
+      anim.start();
+      return () => anim.stop();
+    }, [progress, reduced]);
+
+    const close = useCallback(() => {
+      if (closingRef.current) return;
+      closingRef.current = true;
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: reduced ? REDUCED_FADE_MS : CENTERED_MODAL_ANIM.exitMs,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }).start(() => {
+        setOpen(false);
+        onDismiss();
+      });
+    }, [progress, onDismiss, reduced]);
+
+    useImperativeHandle(ref, () => ({ close }), [close]);
+
+    // Android hardware back -> dismiss (when allowed). Always consume so it never pops a route.
+    useEffect(() => {
+      const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+        if (dismissible) close();
+        return true;
+      });
+      return () => sub.remove();
+    }, [dismissible, close]);
+
+    const onBackdrop = useCallback(() => {
+      if (dismissible) close();
+    }, [dismissible, close]);
+
+    const backdropOpacity = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, CENTERED_MODAL_ANIM.backdropOpacity],
+    });
+    // Reduce motion: the card fades in already settled (no zoom).
+    const cardScale = reduced
+      ? 1
+      : progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [CENTERED_MODAL_ANIM.scaleFrom, 1],
+        });
+
+    return (
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        statusBarTranslucent
+        onRequestClose={dismissible ? close : undefined}
+      >
+        {/* Dimmed backdrop (fades with the entrance). */}
+        <Animated.View
+          style={[styles.backdrop, { opacity: backdropOpacity }]}
+          pointerEvents="none"
+        />
+
+        {/* Full-screen tap target: a tap outside the card dismisses. */}
+        <Pressable
+          style={styles.fill}
+          onPress={onBackdrop}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+        >
+          <SafeAreaView style={styles.center} pointerEvents="box-none">
+            {/* Inner Pressable swallows taps so the card itself never dismisses. */}
+            <Pressable onPress={() => {}} style={styles.cardWrap}>
+              <Animated.View
+                accessibilityViewIsModal
+                accessibilityRole="alert"
+                style={[
+                  styles.card,
+                  {
+                    backgroundColor: theme.colors.surface,
+                    borderRadius: theme.radius.lg,
+                    padding: theme.spacing.lg,
+                    gap: theme.spacing.md,
+                    opacity: progress,
+                    transform: [{ scale: cardScale }],
+                  },
+                ]}
+              >
+                {children}
+              </Animated.View>
+            </Pressable>
+          </SafeAreaView>
+        </Pressable>
+      </Modal>
+    );
+  },
+);
+
+_CenteredModal.displayName = "CenteredModal";
+
+export const CenteredModal = React.memo(_CenteredModal);
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  backdrop: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "#000" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
+  cardWrap: { width: "100%", maxWidth: 420 },
+  card: {
+    width: "100%",
+    // Soft elevation so the popup reads as lifted above the app in both themes.
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+});
+
+export default CenteredModal;

package/src/components/CompletionView.tsx

@@ -0,0 +1,186 @@
+/**
+ * CompletionView — the terminal "you're all set" screen, shown when the flow
+ * reaches its final StatusCard. It surfaces the backend's recap (what the app
+ * will do for the user, derived from their answers) and a single clear CTA.
+ *
+ * WHY a dedicated screen (not an instant hand-off): the backend spends the last
+ * turn summarizing the user's tastes and what their experience will now look
+ * like. The user should actually SEE that payoff and tap to continue — so
+ * `onContinue` fires only on the button press, never automatically.
+ *
+ * Motion (design-refs/EXTRACTED-SPEC.md rows 14-16, the peak-end beat): the
+ * badge pops in with a spring (scale 0.4→1, slight overshoot), ONE soft accent
+ * burst radiates once behind it (scale 0.4→1.5, opacity 0.5→0, 500ms) —
+ * celebratory without confetti — and the copy fades up 80ms apart. Everything
+ * settles well under a second. Reduce motion: final frame, no burst.
+ */
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Easing, StyleSheet, Text, View } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { bodyStyle, headingStyle } from "../theme/typography";
+import { Button } from "./Button";
+import { CardLayout } from "./CardLayout";
+import {
+  STATUS_BURST_MS,
+  STATUS_BURST_OPACITY_FROM,
+  STATUS_BURST_SCALE_FROM,
+  STATUS_BURST_SCALE_TO,
+  STATUS_COPY_MS,
+  STATUS_POP_SCALE_FROM,
+  STATUS_POP_SPRING,
+  WIRE_BEZIER,
+  scaledMs,
+  statusCopyDelay,
+} from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+
+const easeWire = Easing.bezier(...WIRE_BEZIER);
+const BADGE_SIZE = 64;
+const BURST_SIZE = 104;
+
+export type CompletionViewProps = {
+  title: string;
+  message?: string;
+  ctaLabel?: string;
+  onContinue: () => void;
+};
+
+const _CompletionView: React.FC<CompletionViewProps> = ({
+  title,
+  message,
+  ctaLabel = "Let's go",
+  onContinue,
+}) => {
+  const t = useOnboardingTheme();
+  const reduced = useReducedMotion();
+  const [submitted, setSubmitted] = useState(false);
+
+  const pop = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  const burst = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  const titleT = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  const messageT = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (reduced) {
+      // Final frame: badge + copy settled, burst already faded out.
+      pop.setValue(1);
+      burst.setValue(1);
+      titleT.setValue(1);
+      messageT.setValue(1);
+      return;
+    }
+    const rise = (value: Animated.Value, delay: number) =>
+      Animated.timing(value, {
+        toValue: 1,
+        duration: scaledMs(STATUS_COPY_MS),
+        delay,
+        easing: easeWire,
+        useNativeDriver: true,
+      });
+    const anims = [
+      Animated.spring(pop, {
+        toValue: 1,
+        friction: STATUS_POP_SPRING.friction,
+        tension: STATUS_POP_SPRING.tension,
+        useNativeDriver: true,
+      }),
+      // One-shot celebratory burst: fires once, never loops.
+      Animated.timing(burst, {
+        toValue: 1,
+        duration: scaledMs(STATUS_BURST_MS),
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }),
+      rise(titleT, scaledMs(statusCopyDelay(0))),
+      rise(messageT, scaledMs(statusCopyDelay(1))),
+    ];
+    anims.forEach((a) => a.start());
+    return () => anims.forEach((a) => a.stop());
+  }, [reduced, pop, burst, titleT, messageT]);
+
+  const handlePress = useCallback(() => {
+    if (submitted) return;
+    setSubmitted(true);
+    onContinue();
+  }, [submitted, onContinue]);
+
+  const scale = pop.interpolate({ inputRange: [0, 1], outputRange: [STATUS_POP_SCALE_FROM, 1] });
+  const burstScale = burst.interpolate({
+    inputRange: [0, 1],
+    outputRange: [STATUS_BURST_SCALE_FROM, STATUS_BURST_SCALE_TO],
+  });
+  const burstOpacity = burst.interpolate({
+    inputRange: [0, 1],
+    outputRange: [STATUS_BURST_OPACITY_FROM, 0],
+  });
+  const riseStyle = (value: Animated.Value) => ({
+    opacity: value,
+    transform: [{ translateY: value.interpolate({ inputRange: [0, 1], outputRange: [10, 0] }) }],
+  });
+
+  return (
+    <CardLayout
+      align="center"
+      footer={<Button title={ctaLabel} onPress={handlePress} variant="primary" disabled={submitted} />}
+    >
+      <View style={[styles.center, { gap: t.spacing.md }]}>
+        <View style={styles.badgeStage}>
+          {/* Soft accent burst behind the badge: primarySoft keeps the tint calm. */}
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.burst,
+              {
+                backgroundColor: t.colors.primarySoft,
+                borderRadius: t.radius.full,
+                opacity: burstOpacity,
+                transform: [{ scale: burstScale }],
+              },
+            ]}
+          />
+          <Animated.View
+            style={[
+              styles.badge,
+              {
+                backgroundColor: t.colors.primarySoft,
+                borderRadius: t.radius.full,
+                transform: [{ scale }],
+                opacity: pop,
+              },
+            ]}
+          >
+            <Text style={[styles.check, { color: t.colors.primary }]}>✓</Text>
+          </Animated.View>
+        </View>
+
+        <Animated.View style={riseStyle(titleT)}>
+          <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
+            {title}
+          </Text>
+        </Animated.View>
+        {message ? (
+          <Animated.View style={riseStyle(messageT)}>
+            <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+              {message}
+            </Text>
+          </Animated.View>
+        ) : null}
+      </View>
+    </CardLayout>
+  );
+};
+
+export const CompletionView = React.memo(_CompletionView);
+
+const styles = StyleSheet.create({
+  center: { width: "100%", alignItems: "center", justifyContent: "center" },
+  badgeStage: {
+    width: BURST_SIZE,
+    height: BURST_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  burst: { position: "absolute", width: BURST_SIZE, height: BURST_SIZE },
+  badge: { width: BADGE_SIZE, height: BADGE_SIZE, alignItems: "center", justifyContent: "center" },
+  check: { fontSize: 34, fontWeight: "800" },
+});

package/src/components/DoneBlock.tsx

@@ -0,0 +1,37 @@
+/**
+ * DoneBlock — a brief themed "all set" state shown when the flow completes, while
+ * the host persists results and navigates away. Purely cosmetic; the real
+ * terminal signal is the SDK's StatusCard (handled in OnboardingFlow).
+ */
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { bodyStyle, headingStyle } from "../theme/typography";
+
+export type DoneBlockProps = {
+  title?: string;
+  message?: string;
+};
+
+const _DoneBlock: React.FC<DoneBlockProps> = ({
+  title = "You're all set",
+  message = "Personalizing your experience…",
+}) => {
+  const t = useOnboardingTheme();
+  return (
+    <View style={[styles.center, { gap: t.spacing.sm, padding: t.spacing.lg }]}>
+      <Text style={[headingStyle(t.fonts), { color: t.colors.success, textAlign: "center" }]}>
+        {title}
+      </Text>
+      <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+        {message}
+      </Text>
+    </View>
+  );
+};
+
+export const DoneBlock = React.memo(_DoneBlock);
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+});

package/src/components/ErrorBlock.tsx

@@ -0,0 +1,42 @@
+/**
+ * ErrorBlock — shown on backend error/timeout. Carries a retry action so the flow
+ * never dead-ends. The host decides what retry does (re-send start, or fall back).
+ */
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { bodyStyle, headingStyle } from "../theme/typography";
+import { Button } from "./Button";
+
+export type ErrorBlockProps = {
+  title?: string;
+  message?: string;
+  retryLabel?: string;
+  onRetry?: () => void;
+};
+
+const _ErrorBlock: React.FC<ErrorBlockProps> = ({
+  title = "Something went wrong",
+  message = "We couldn't load this step. You can try again.",
+  retryLabel = "Try again",
+  onRetry,
+}) => {
+  const t = useOnboardingTheme();
+  return (
+    <View style={[styles.center, { gap: t.spacing.md, padding: t.spacing.lg }]}>
+      <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
+        {title}
+      </Text>
+      <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+        {message}
+      </Text>
+      {onRetry ? <Button title={retryLabel} onPress={onRetry} variant="outline" /> : null}
+    </View>
+  );
+};
+
+export const ErrorBlock = React.memo(_ErrorBlock);
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+});

package/src/components/Illustration.tsx

@@ -0,0 +1,36 @@
+/**
+ * Illustration registry — lets the host app supply brand artwork (SVG / Lottie /
+ * Image nodes) keyed by name, which the backend references from an InterstitialCard
+ * by `illustration`. Keeping the registry in React context (rather than as a card
+ * prop) is what keeps the kit dependency-free: the kit never imports react-native-svg
+ * or Lottie — the app brings its own nodes and the kit just slots the matching one.
+ *
+ *   <WireOnboarding illustrations={{ "before-after": <BeforeAfter/> }} ... />
+ *
+ * When the backend names an illustration the registry doesn't have, the
+ * InterstitialCard falls back to its `imageUrl` (a plain RN <Image>).
+ */
+import React, { createContext, useContext } from "react";
+
+export type IllustrationRegistry = Record<string, React.ReactNode>;
+
+const IllustrationContext = createContext<IllustrationRegistry>({});
+
+export type IllustrationProviderProps = {
+  registry?: IllustrationRegistry;
+  children: React.ReactNode;
+};
+
+export const IllustrationProvider: React.FC<IllustrationProviderProps> = ({
+  registry,
+  children,
+}) => (
+  <IllustrationContext.Provider value={registry ?? {}}>{children}</IllustrationContext.Provider>
+);
+
+/** Look up an app-supplied illustration node by name. Returns undefined if absent. */
+export const useIllustration = (name?: string): React.ReactNode | undefined => {
+  const registry = useContext(IllustrationContext);
+  if (!name) return undefined;
+  return registry[name];
+};

package/src/components/LoadingBlock.tsx

@@ -0,0 +1,182 @@
+/**
+ * LoadingBlock — the "AI is thinking" indicator, shown before the first card and
+ * between every turn (each round-trip to the backend). The Wire Activation
+ * loading treatment: no generic spinner — the brand mark breathes inside a
+ * dashed ring while an accent dot orbits it, and skeleton lines appear (softly
+ * pulsing) only when the fetch runs past 300ms so a fast turn never flashes
+ * placeholder chrome (design-refs/EXTRACTED-SPEC.md rows 17-19).
+ *
+ * Reduce motion: static mark + copy, no orbit, no pulse.
+ */
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, StyleSheet, Text, View } from "react-native";
+import { useOnboardingTheme } from "../theme/ThemeContext";
+import { bodyStyle, headingStyle } from "../theme/typography";
+import { AnimatedSparkle } from "./AnimatedSparkle";
+import {
+  LOADER_ORBIT_MS,
+  SKELETON_DELAY_MS,
+  SKELETON_MIN_OPACITY,
+  SKELETON_PULSE_MS,
+  loopEnabled,
+  scaledMs,
+} from "../motion/motionSpec";
+import { useReducedMotion } from "../motion/useReducedMotion";
+import { useLoaderChrome } from "./loaderChrome";
+
+const STAGE_SIZE = 96;
+const ORBIT_DOT = 9;
+
+export type LoadingBlockProps = {
+  /** Primary line, e.g. "Thinking…". */
+  title?: string;
+  /** Supporting line under the title. */
+  hint?: string;
+};
+
+/** The orbiting accent dot: a full-stage rotating layer with the dot at 12 o'clock. */
+const OrbitDot: React.FC<{ color: string; reduced: boolean }> = ({ color, reduced }) => {
+  const spin = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!loopEnabled(reduced)) return;
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: scaledMs(LOADER_ORBIT_MS),
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin, reduced]);
+
+  if (reduced) return null;
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+  return (
+    <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { transform: [{ rotate }] }]}>
+      <View style={[styles.orbitDot, { backgroundColor: color }]} />
+    </Animated.View>
+  );
+};
+
+/** A skeleton line that softly pulses (static under reduce motion). */
+const SkeletonLine: React.FC<{ width: `${number}%`; delay: number; color: string; reduced: boolean }> = ({
+  width,
+  delay,
+  color,
+  reduced,
+}) => {
+  const pulse = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!loopEnabled(reduced)) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.delay(delay),
+        Animated.timing(pulse, {
+          toValue: SKELETON_MIN_OPACITY,
+          duration: scaledMs(SKELETON_PULSE_MS / 2),
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: scaledMs(SKELETON_PULSE_MS / 2),
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, delay, reduced]);
+
+  return (
+    <Animated.View
+      style={[styles.skeletonLine, { width, backgroundColor: color, opacity: reduced ? 1 : pulse }]}
+    />
+  );
+};
+
+const _LoadingBlock: React.FC<LoadingBlockProps> = ({
+  title = "Thinking…",
+  hint = "Personalizing your experience",
+}) => {
+  const t = useOnboardingTheme();
+  const reduced = useReducedMotion();
+  // When the loader renders inside the scaffold body it sits below the header; the scaffold
+  // publishes how far to shift UP so the loader centers in the full flow area, not the body.
+  // Standalone (no provider) → 0. A static transform (visual only): it never reflows the body,
+  // so the card underneath and the card↔loader handoff are unaffected.
+  const { offsetY } = useLoaderChrome();
+
+  // Skeleton lines are gated behind the 300ms window: a fast fetch never shows them.
+  const [showSkeleton, setShowSkeleton] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSkeleton(true), SKELETON_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <View
+      style={[
+        styles.center,
+        { gap: t.spacing.md, padding: t.spacing.lg },
+        offsetY ? { transform: [{ translateY: offsetY }] } : null,
+      ]}
+    >
+      <View style={styles.stage}>
+        <View style={[styles.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }]} />
+        <OrbitDot color={t.colors.primary} reduced={reduced} />
+        <AnimatedSparkle size={40} variant="pulse" />
+      </View>
+      {title ? (
+        <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
+          {title}
+        </Text>
+      ) : null}
+      {hint ? (
+        <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+          {hint}
+        </Text>
+      ) : null}
+      {showSkeleton ? (
+        <View style={[styles.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }]}>
+          <SkeletonLine width="80%" delay={0} color={t.colors.surface} reduced={reduced} />
+          <SkeletonLine width="60%" delay={200} color={t.colors.surface} reduced={reduced} />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export const LoadingBlock = React.memo(_LoadingBlock);
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  stage: {
+    width: STAGE_SIZE,
+    height: STAGE_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  ring: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+  },
+  orbitDot: {
+    position: "absolute",
+    top: -ORBIT_DOT / 2 + 1,
+    left: STAGE_SIZE / 2 - ORBIT_DOT / 2,
+    width: ORBIT_DOT,
+    height: ORBIT_DOT,
+    borderRadius: ORBIT_DOT / 2,
+  },
+  skeleton: { width: "100%", alignItems: "center" },
+  skeletonLine: { height: 12, borderRadius: 6 },
+});