@wireai/activation 0.2.0 → 0.4.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React14, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useContext, useMemo } from 'react';
+import React14, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
 import { useWireAIThread, useWireAIAction, ComponentRenderer, WireAIProvider } from 'wireai-rn';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleSheet, Easing, Animated, BackHandler, Modal, Pressable, Text, View, TouchableOpacity, KeyboardAvoidingView, ScrollView, useWindowDimensions, TextInput, Image, AccessibilityInfo, Platform, Dimensions, I18nManager, AppState } from 'react-native';
@@ -79,11 +79,15 @@ var useOnboardingTheme = () => {
   const ctx = useContext(OnboardingThemeContext);
   return ctx != null ? ctx : mergeTheme();
 };
-var IllustrationContext = createContext({});
+var EMPTY_REGISTRY = {};
+var IllustrationContext = createContext(EMPTY_REGISTRY);
 var IllustrationProvider = ({
   registry,
   children
-}) => /* @__PURE__ */ jsx(IllustrationContext.Provider, { value: registry != null ? registry : {}, children });
+}) => {
+  const value = useMemo(() => registry != null ? registry : EMPTY_REGISTRY, [registry]);
+  return /* @__PURE__ */ jsx(IllustrationContext.Provider, { value, children });
+};
 var useIllustration = (name) => {
   const registry = useContext(IllustrationContext);
   if (!name) return void 0;
@@ -374,23 +378,33 @@ var _AnimatedSparkle = ({ size = 30, color, variant = "spin" }) => {
     outputRange: [1, LOADER_PULSE_MIN_OPACITY]
   });
   const animatedStyle = reduced ? void 0 : variant === "pulse" ? { opacity: pulse } : { transform: [{ rotate }] };
-  return /* @__PURE__ */ jsx(Animated.View, { style: animatedStyle, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Animated.View, { style: [styles2.box, { width: size, height: size }, animatedStyle], children: /* @__PURE__ */ jsx(
     Text,
     {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      style: [styles2.glyph, { fontSize: size, lineHeight: size * 1.1, color: color != null ? color : t.colors.primary }],
+      style: [
+        styles2.glyph,
+        {
+          width: size,
+          fontSize: size,
+          lineHeight: size,
+          color: color != null ? color : t.colors.primary
+        }
+      ],
       children: "\u2726"
     }
   ) });
 };
 var AnimatedSparkle = React14.memo(_AnimatedSparkle);
 var styles2 = StyleSheet.create({
-  glyph: { textAlign: "center" }
+  box: { alignItems: "center", justifyContent: "center" },
+  glyph: {
+    textAlign: "center",
+    textAlignVertical: "center",
+    includeFontPadding: false
+  }
 });
-var LoaderChromeContext = createContext({ offsetY: 0 });
-var LoaderChromeProvider = LoaderChromeContext.Provider;
-var useLoaderChrome = () => useContext(LoaderChromeContext);
 var STAGE_SIZE = 96;
 var ORBIT_DOT = 9;
 var OrbitDot = ({ color, reduced }) => {
@@ -454,39 +468,45 @@ var _LoadingBlock = ({
 }) => {
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
-  const { offsetY } = useLoaderChrome();
   const [showSkeleton, setShowSkeleton] = useState(false);
   useEffect(() => {
     const timer = setTimeout(() => setShowSkeleton(true), SKELETON_DELAY_MS);
     return () => clearTimeout(timer);
   }, []);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: [
-        styles3.center,
-        { gap: t.spacing.md, padding: t.spacing.lg },
-        offsetY ? { transform: [{ translateY: offsetY }] } : null
-      ],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles3.stage, children: [
-          /* @__PURE__ */ jsx(View, { style: [styles3.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }] }),
-          /* @__PURE__ */ jsx(OrbitDot, { color: t.colors.primary, reduced }),
-          /* @__PURE__ */ jsx(AnimatedSparkle, { size: 40, variant: "pulse" })
-        ] }),
-        title ? /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) : null,
-        hint ? /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: hint }) : null,
-        showSkeleton ? /* @__PURE__ */ jsxs(View, { style: [styles3.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }], children: [
-          /* @__PURE__ */ jsx(SkeletonLine, { width: "80%", delay: 0, color: t.colors.surface, reduced }),
-          /* @__PURE__ */ jsx(SkeletonLine, { width: "60%", delay: 200, color: t.colors.surface, reduced })
-        ] }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { style: [styles3.center, { padding: t.spacing.lg }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles3.stage, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles3.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }] }),
+      /* @__PURE__ */ jsx(OrbitDot, { color: t.colors.primary, reduced }),
+      /* @__PURE__ */ jsx(AnimatedSparkle, { size: 40, variant: "pulse" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles3.labels,
+          { marginTop: STAGE_SIZE / 2 + t.spacing.lg, gap: t.spacing.md, paddingHorizontal: t.spacing.lg }
+        ],
+        pointerEvents: "none",
+        children: [
+          title ? /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) : null,
+          hint ? /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: hint }) : null,
+          showSkeleton ? /* @__PURE__ */ jsxs(View, { style: [styles3.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }], children: [
+            /* @__PURE__ */ jsx(SkeletonLine, { width: "80%", delay: 0, color: t.colors.surface, reduced }),
+            /* @__PURE__ */ jsx(SkeletonLine, { width: "60%", delay: 200, color: t.colors.surface, reduced })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
 };
 var LoadingBlock = React14.memo(_LoadingBlock);
 var styles3 = StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  // Absolutely-positioned label column, pinned just under the centered stage: its top
+  // edge starts at the flow center (top: 50%) and the inline marginTop (STAGE_SIZE/2 +
+  // a gap) drops it below the stage. Out of flow → it never moves the stage, so the
+  // 300ms skeleton reveal grows DOWNWARD only and the icon stays centered.
+  labels: { position: "absolute", top: "50%", left: 0, right: 0, alignItems: "center" },
   stage: {
     width: STAGE_SIZE,
     height: STAGE_SIZE,
@@ -569,7 +589,6 @@ var styles5 = StyleSheet.create({
   track: { height: 6, width: "100%", overflow: "hidden" },
   fill: { height: 6 }
 });
-var PROGRESS_TRACK = 6;
 var _OnboardingScaffold = ({
   step,
   complete,
@@ -581,33 +600,41 @@ var _OnboardingScaffold = ({
   children
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = useMemo(() => makeStyles(t), [t]);
   const hit = { top: 12, bottom: 12, left: 12, right: 12 };
-  const topChrome = t.spacing.md + PROGRESS_TRACK + t.spacing.md;
-  const loaderOffsetY = -Math.round(topChrome / 2);
   return /* @__PURE__ */ jsxs(
     SafeAreaView,
     {
       edges: ["top", "bottom"],
-      style: [styles6.flex, { backgroundColor: t.colors.background }],
+      style: [styles16.flex, { backgroundColor: t.colors.background }],
       children: [
-        /* @__PURE__ */ jsxs(View, { style: [styles6.header, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: [
-          /* @__PURE__ */ jsx(View, { style: styles6.progressWrap, children: /* @__PURE__ */ jsx(StepProgress, { step, complete, approxScreens }) }),
-          onSkip ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onSkip, hitSlop: hit, style: { marginLeft: t.spacing.md }, children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: skipLabel }) }) : null
+        /* @__PURE__ */ jsxs(View, { style: [styles16.header, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: [
+          /* @__PURE__ */ jsx(View, { style: styles16.progressWrap, children: /* @__PURE__ */ jsx(StepProgress, { step, complete, approxScreens }) }),
+          onSkip ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onSkip, hitSlop: hit, style: styles16.skip, children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: skipLabel }) }) : null
         ] }),
-        /* @__PURE__ */ jsx(View, { style: [styles6.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: /* @__PURE__ */ jsx(LoaderChromeProvider, { value: { offsetY: loaderOffsetY }, children }) }),
-        onBack ? /* @__PURE__ */ jsx(View, { style: [styles6.footer, { paddingHorizontal: t.spacing.md, paddingBottom: t.spacing.sm }], children: /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onBack, hitSlop: hit, children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: backLabel }) }) }) : null
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [styles16.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }],
+            children
+          }
+        ),
+        onBack ? /* @__PURE__ */ jsx(View, { style: [styles16.footer, { paddingHorizontal: t.spacing.md, paddingBottom: t.spacing.sm }], children: /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onBack, hitSlop: hit, children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: backLabel }) }) }) : null
       ]
     }
   );
 };
 var OnboardingScaffold = React14.memo(_OnboardingScaffold);
-var styles6 = StyleSheet.create({
-  flex: { flex: 1 },
-  header: { flexDirection: "row", alignItems: "center" },
-  progressWrap: { flex: 1 },
-  body: { flex: 1 },
-  footer: { flexDirection: "row", justifyContent: "flex-start" }
-});
+function makeStyles(t) {
+  return StyleSheet.create({
+    flex: { flex: 1 },
+    header: { flexDirection: "row", alignItems: "center" },
+    progressWrap: { flex: 1 },
+    body: { flex: 1 },
+    footer: { flexDirection: "row", justifyContent: "flex-start" },
+    skip: { marginLeft: t.spacing.md }
+  });
+}
 var _Button = ({
   title,
   onPress,
@@ -638,6 +665,14 @@ var _Button = ({
     },
     [pressT, reduced]
   );
+  const lastPress = useRef(0);
+  const handlePress = useCallback(() => {
+    if (!onPress) return;
+    const now = Date.now();
+    if (now - lastPress.current < 500) return;
+    lastPress.current = now;
+    onPress();
+  }, [onPress]);
   const handlePressIn = useCallback(() => pressTo(1), [pressTo]);
   const handlePressOut = useCallback(() => pressTo(0), [pressTo]);
   const scale = pressT.interpolate({
@@ -651,19 +686,19 @@ var _Button = ({
   return /* @__PURE__ */ jsx(
     Pressable,
     {
-      onPress: disabled ? void 0 : onPress,
+      onPress: disabled ? void 0 : handlePress,
       onPressIn: disabled ? void 0 : handlePressIn,
       onPressOut: disabled ? void 0 : handlePressOut,
       disabled,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      style: fullWidth ? styles7.fill : void 0,
+      style: fullWidth ? styles6.fill : void 0,
       children: /* @__PURE__ */ jsx(
         Animated.View,
         {
           style: [
-            styles7.base,
-            fullWidth && styles7.fill,
+            styles6.base,
+            fullWidth && styles6.fill,
             {
               borderRadius: t.button.radius,
               minHeight: t.button.height,
@@ -691,7 +726,7 @@ var _Button = ({
   );
 };
 var Button = React14.memo(_Button);
-var styles7 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   base: { alignItems: "center", justifyContent: "center" },
   fill: { width: "100%" }
 });
@@ -702,14 +737,14 @@ var _ErrorBlock = ({
   onRetry
 }) => {
   const t = useOnboardingTheme();
-  return /* @__PURE__ */ jsxs(View, { style: [styles8.center, { gap: t.spacing.md, padding: t.spacing.lg }], children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles7.center, { gap: t.spacing.md, padding: t.spacing.lg }], children: [
     /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }),
     /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: message }),
     onRetry ? /* @__PURE__ */ jsx(Button, { title: retryLabel, onPress: onRetry, variant: "outline" }) : null
   ] });
 };
 var ErrorBlock = React14.memo(_ErrorBlock);
-var styles8 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" }
 });
 var _CardLayout = ({
@@ -721,9 +756,10 @@ var _CardLayout = ({
   titleNode
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = useMemo(() => makeStyles2(t), [t]);
   const hasHeader = !!title || !!subtitle || !!titleNode;
-  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: styles9.fill, behavior: "padding", children: [
-    hasHeader ? /* @__PURE__ */ jsxs(View, { style: { marginBottom: t.spacing.lg }, children: [
+  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: styles16.fill, behavior: "padding", children: [
+    hasHeader ? /* @__PURE__ */ jsxs(View, { style: styles16.header, children: [
       titleNode != null ? titleNode : title ? /* @__PURE__ */ jsx(Text, { style: [labelStyle(t.fonts), { color: t.colors.text }], children: title }) : null,
       subtitle ? /* @__PURE__ */ jsx(
         Text,
@@ -739,10 +775,10 @@ var _CardLayout = ({
     /* @__PURE__ */ jsx(
       ScrollView,
       {
-        style: styles9.fill,
+        style: styles16.fill,
         contentContainerStyle: [
-          styles9.scrollContent,
-          align === "center" && styles9.center
+          styles16.scrollContent,
+          align === "center" && styles16.center
         ],
         keyboardShouldPersistTaps: "handled",
         keyboardDismissMode: "on-drag",
@@ -750,17 +786,21 @@ var _CardLayout = ({
         children
       }
     ),
-    footer ? /* @__PURE__ */ jsx(View, { style: { paddingTop: t.spacing.lg }, children: footer }) : null
+    footer ? /* @__PURE__ */ jsx(View, { style: styles16.footer, children: footer }) : null
   ] });
 };
 var CardLayout = React14.memo(_CardLayout);
-var styles9 = 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" }
-});
+function makeStyles2(t) {
+  return StyleSheet.create({
+    fill: { flex: 1 },
+    header: { marginBottom: t.spacing.lg },
+    footer: { paddingTop: t.spacing.lg },
+    // 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" }
+  });
+}
 var easeWire2 = Easing.bezier(...WIRE_BEZIER);
 var BADGE_SIZE = 64;
 var BURST_SIZE = 104;
@@ -835,14 +875,14 @@ var _CompletionView = ({
     {
       align: "center",
       footer: /* @__PURE__ */ jsx(Button, { title: ctaLabel, onPress: handlePress, variant: "primary", disabled: submitted }),
-      children: /* @__PURE__ */ jsxs(View, { style: [styles10.center, { gap: t.spacing.md }], children: [
-        /* @__PURE__ */ jsxs(View, { style: styles10.badgeStage, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: [styles8.center, { gap: t.spacing.md }], children: [
+        /* @__PURE__ */ jsxs(View, { style: styles8.badgeStage, children: [
           /* @__PURE__ */ jsx(
             Animated.View,
             {
               pointerEvents: "none",
               style: [
-                styles10.burst,
+                styles8.burst,
                 {
                   backgroundColor: t.colors.primarySoft,
                   borderRadius: t.radius.full,
@@ -856,7 +896,7 @@ var _CompletionView = ({
             Animated.View,
             {
               style: [
-                styles10.badge,
+                styles8.badge,
                 {
                   backgroundColor: t.colors.primarySoft,
                   borderRadius: t.radius.full,
@@ -864,7 +904,7 @@ var _CompletionView = ({
                   opacity: pop
                 }
               ],
-              children: /* @__PURE__ */ jsx(Text, { style: [styles10.check, { color: t.colors.primary }], children: "\u2713" })
+              children: /* @__PURE__ */ jsx(Text, { style: [styles8.check, { color: t.colors.primary }], children: "\u2713" })
             }
           )
         ] }),
@@ -875,7 +915,7 @@ var _CompletionView = ({
   );
 };
 var CompletionView = React14.memo(_CompletionView);
-var styles10 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   badgeStage: {
     width: BURST_SIZE,
@@ -898,7 +938,6 @@ var _CardHandoff = ({
   const enterT = useRef(new Animated.Value(0)).current;
   const exitT = useRef(new Animated.Value(0)).current;
   const prev = useRef({ key: transitionKey, node: children, variant });
-  const [enterVariant, setEnterVariant] = useState(variant);
   const running = useRef({});
   const mounted = useRef(false);
   useEffect(() => {
@@ -907,7 +946,6 @@ var _CardHandoff = ({
     prev.current = { key: transitionKey, node: children, variant };
     if (!mounted.current) {
       mounted.current = true;
-      setEnterVariant(variant);
       running.current.enter = startEnter(enterT, variant, reduced, 0);
       return;
     }
@@ -915,7 +953,6 @@ var _CardHandoff = ({
     (_a = running.current.enter) == null ? void 0 : _a.stop();
     (_b = running.current.exit) == null ? void 0 : _b.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;
@@ -946,7 +983,7 @@ var _CardHandoff = ({
   );
   const enterStyle = {
     opacity: enterT,
-    transform: transformFor(enterVariant, enterT, reduced, "enter")
+    transform: transformFor(variant, enterT, reduced, "enter")
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     leaving ? /* @__PURE__ */ jsx(
@@ -963,7 +1000,7 @@ var _CardHandoff = ({
         children: leaving.node
       }
     ) : null,
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles11.fill, enterStyle], children })
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles9.fill, enterStyle], children }, variant)
   ] });
 };
 var startEnter = (value, variant, reduced, delay, onDone) => {
@@ -1004,7 +1041,7 @@ var transformFor = (variant, t, reduced, direction) => {
   ];
 };
 var CardHandoff = React14.memo(_CardHandoff);
-var styles11 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   fill: { flex: 1 }
 });
 
@@ -1134,6 +1171,10 @@ var OnboardingFlow = ({
   onEventRef.current = onEvent;
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const validatorsRef = useRef(validators);
+  validatorsRef.current = validators;
   const reportTargetRef = useRef(reportTarget);
   reportTargetRef.current = reportTarget;
   const sessionIdRef = useRef(sessionId);
@@ -1249,8 +1290,8 @@ var OnboardingFlow = ({
   const handleFinish = useCallback(() => {
     if (finished.current) return;
     finished.current = true;
-    onComplete({ answers: deriveAnswers(messages), raw: messages });
-  }, [messages, onComplete]);
+    onCompleteRef.current({ answers: deriveAnswers(messages), raw: messages });
+  }, [messages]);
   const handleRetry = useCallback(() => {
     attempts.current = 0;
     degradedRef.current = false;
@@ -1278,9 +1319,10 @@ var OnboardingFlow = ({
   }, []);
   const wrappedActions = useCallback(
     (messageId) => {
+      var _a2;
       const base = makeActions(messageId);
       const key = progress.key;
-      const validator = key ? validators == null ? void 0 : validators[key] : void 0;
+      const validator = key ? (_a2 = validatorsRef.current) == null ? void 0 : _a2[key] : void 0;
       if (!validator) return base;
       const out = { ...base };
       for (const name of ANSWER_CALLBACKS) {
@@ -1291,12 +1333,12 @@ var OnboardingFlow = ({
           if (typeof value !== "string") return original(...args);
           setValidating(true);
           validator(value).then((res) => {
-            var _a2;
+            var _a3;
             if (res.ok) {
               setValidationError(void 0);
               original(...args);
             } else {
-              setValidationError((_a2 = res.error) != null ? _a2 : "That value isn't available.");
+              setValidationError((_a3 = res.error) != null ? _a3 : "That value isn't available.");
             }
           }).catch(() => {
             original(...args);
@@ -1305,7 +1347,7 @@ var OnboardingFlow = ({
       }
       return out;
     },
-    [makeActions, progress.key, validators]
+    [makeActions, progress.key]
   );
   if (degraded) {
     if (fallbackFlow !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallbackFlow });
@@ -1460,7 +1502,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
         Animated.View,
         {
           style: [
-            styles12.chip,
+            styles10.chip,
             {
               borderRadius: t.radius.full,
               paddingHorizontal: t.spacing.md,
@@ -1477,7 +1519,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
                 pointerEvents: "none",
                 style: [
                   StyleSheet.absoluteFill,
-                  styles12.fillOverlay,
+                  styles10.fillOverlay,
                   {
                     borderRadius: t.radius.full,
                     borderColor: t.colors.primary,
@@ -1491,7 +1533,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
               Animated.Text,
               {
                 style: [
-                  styles12.check,
+                  styles10.check,
                   { color: t.colors.onPrimary, opacity: checkT, transform: [{ scale: checkScale }] }
                 ],
                 children: "\u2713"
@@ -1502,7 +1544,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
               {
                 style: [
                   captionStyle(t.fonts),
-                  styles12.chipLabel,
+                  styles10.chipLabel,
                   { color: isSelected ? t.colors.onPrimary : t.colors.textMuted }
                 ],
                 children: chip
@@ -1564,7 +1606,7 @@ var _ChipSelectCard = ({
           disabled: selected.length === 0 || submitted
         }
       ),
-      children: /* @__PURE__ */ jsx(View, { style: [styles12.chipsRow, { gap: t.spacing.sm + t.spacing.xs }], children: chips.map((chip) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(View, { style: [styles10.chipsRow, { gap: t.spacing.sm + t.spacing.xs }], children: chips.map((chip) => /* @__PURE__ */ jsx(
         ChipItem,
         {
           chip,
@@ -1584,7 +1626,7 @@ var ChipSelectCard = {
   propsSchema: schema,
   defaultProps: { multiSelect: true, submitLabel: "Continue" }
 };
-var styles12 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   chipsRow: { flexDirection: "row", flexWrap: "wrap" },
   chip: { borderWidth: 1.5, flexDirection: "row", alignItems: "center", gap: 6, overflow: "hidden" },
   fillOverlay: { borderWidth: 1.5 },
@@ -1616,6 +1658,7 @@ var _TextInputCard = ({
   lines = 6
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = useMemo(() => makeStyles3(t), [t]);
   const { height: screenHeight } = useWindowDimensions();
   const [value, setValue] = useState("");
   const [submitted, setSubmitted] = useState(false);
@@ -1642,7 +1685,7 @@ var _TextInputCard = ({
           disabled: !value.trim() || locked
         }
       ),
-      children: /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.sm }, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: styles16.row, children: [
         /* @__PURE__ */ jsx(
           TextInput,
           {
@@ -1656,7 +1699,7 @@ var _TextInputCard = ({
             textAlignVertical: multiline ? "top" : "center",
             style: [
               bodyStyle(t.fonts),
-              styles13.input,
+              styles16.input,
               {
                 color: t.colors.text,
                 backgroundColor: t.colors.surface,
@@ -1680,9 +1723,12 @@ var TextInputCard = {
   propsSchema: schema2,
   defaultProps: { submitLabel: "Submit", multiline: true, lines: 6 }
 };
-var styles13 = StyleSheet.create({
-  input: { borderWidth: 1 }
-});
+function makeStyles3(t) {
+  return StyleSheet.create({
+    row: { gap: t.spacing.sm },
+    input: { borderWidth: 1 }
+  });
+}
 var easeWire5 = Easing.bezier(...WIRE_BEZIER);
 var optionObjectSchema = z.object({
   value: z.string().describe("Option value"),
@@ -1761,7 +1807,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
         Animated.View,
         {
           style: [
-            styles14.option,
+            styles11.option,
             {
               padding: t.spacing.md,
               borderRadius: t.radius.md,
@@ -1778,7 +1824,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
                 pointerEvents: "none",
                 style: [
                   StyleSheet.absoluteFill,
-                  styles14.selectedOverlay,
+                  styles11.selectedOverlay,
                   {
                     borderRadius: t.radius.md,
                     borderColor: t.colors.primary,
@@ -1792,7 +1838,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
               View,
               {
                 style: [
-                  styles14.indicator,
+                  styles11.indicator,
                   { borderRadius: t.radius.full },
                   isSelected ? { borderColor: t.colors.primary, backgroundColor: t.colors.primary } : { borderColor: t.colors.borderStrong, backgroundColor: "transparent" }
                 ],
@@ -1800,7 +1846,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
                   Animated.Text,
                   {
                     style: [
-                      styles14.check,
+                      styles11.check,
                       { color: t.colors.onPrimary, opacity: checkT, transform: [{ scale: checkScale }] }
                     ],
                     children: "\u2713"
@@ -1879,7 +1925,7 @@ var SelectionCard = {
   propsSchema: schema3,
   defaultProps: { submitLabel: "Continue", multiSelect: false }
 };
-var styles14 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   option: { borderWidth: 1.5, flexDirection: "row", alignItems: "center", overflow: "hidden" },
   selectedOverlay: { borderWidth: 1.5 },
   indicator: { width: 24, height: 24, borderWidth: 2, alignItems: "center", justifyContent: "center" },
@@ -1901,17 +1947,22 @@ var STATUS_ICONS = {
   info: "\u2139"
 };
 var _StatusCard = ({ status, title, message, ctaLabel, onContinue, onPress, onSubmit }) => {
-  var _a, _b;
+  var _a;
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
   const [submitted, setSubmitted] = useState(false);
-  const colorFor = {
-    success: t.colors.success,
-    warning: t.colors.warning,
-    error: t.colors.error,
-    info: t.colors.info
-  };
-  const color = (_a = colorFor[status]) != null ? _a : t.colors.info;
+  const color = useMemo(() => {
+    switch (status) {
+      case "success":
+        return t.colors.success;
+      case "warning":
+        return t.colors.warning;
+      case "error":
+        return t.colors.error;
+      default:
+        return t.colors.info;
+    }
+  }, [status, t.colors]);
   const popT = useRef(new Animated.Value(reduced ? 1 : 0)).current;
   const copyT = useRef(new Animated.Value(reduced ? 1 : 0)).current;
   useEffect(() => {
@@ -1953,8 +2004,8 @@ var _StatusCard = ({ status, title, message, ctaLabel, onContinue, onPress, onSu
     {
       align: "center",
       footer: ctaLabel ? /* @__PURE__ */ jsx(Button, { title: ctaLabel, onPress: handleContinue, variant: "primary", disabled: submitted }) : void 0,
-      children: /* @__PURE__ */ jsxs(View, { style: [styles15.center, { gap: t.spacing.sm }], children: [
-        /* @__PURE__ */ jsxs(View, { style: [styles15.titleRow, { gap: t.spacing.sm }], children: [
+      children: /* @__PURE__ */ jsxs(View, { style: [styles12.center, { gap: t.spacing.sm }], children: [
+        /* @__PURE__ */ jsxs(View, { style: [styles12.titleRow, { gap: t.spacing.sm }], children: [
           /* @__PURE__ */ jsx(
             Animated.Text,
             {
@@ -1962,7 +2013,7 @@ var _StatusCard = ({ status, title, message, ctaLabel, onContinue, onPress, onSu
                 headingStyle(t.fonts),
                 { color, opacity: popT, transform: [{ scale: popScale }] }
               ],
-              children: (_b = STATUS_ICONS[status]) != null ? _b : "\xB7"
+              children: (_a = STATUS_ICONS[status]) != null ? _a : "\xB7"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -2001,7 +2052,7 @@ var StatusCard = {
   component: React14.memo(_StatusCard),
   propsSchema: schema4
 };
-var styles15 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   titleRow: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
 });
@@ -2026,6 +2077,7 @@ var _NumberStepperCard = ({
   onSubmit
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = useMemo(() => makeStyles4(t), [t]);
   const safeMin = safeNum(min, 1);
   const safeMaxRaw = safeNum(max, 30);
   const safeMax = safeMaxRaw < safeMin ? safeMin : safeMaxRaw;
@@ -2058,7 +2110,7 @@ var _NumberStepperCard = ({
       title: label,
       align: "center",
       footer: /* @__PURE__ */ jsx(Button, { title: submitLabel, onPress: handleSubmit, variant: "primary", disabled: submitted }),
-      children: /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md, alignItems: "center" }, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: styles16.wrap, children: [
         /* @__PURE__ */ jsxs(View, { style: [styles16.stepper, { gap: t.spacing.lg }], children: [
           /* @__PURE__ */ jsx(Pressable, { onPress: atMin || submitted ? void 0 : handleDecrement, disabled: atMin || submitted, style: stepBtnStyle(atMin), children: /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: atMin ? t.colors.textMuted : t.colors.primary }], children: "\u2212" }) }),
           /* @__PURE__ */ jsxs(View, { style: styles16.valueBox, children: [
@@ -2079,11 +2131,14 @@ var NumberStepperCard = {
   propsSchema: schema5,
   defaultProps: { min: 1, max: 30, defaultValue: 1, step: 1, submitLabel: "Confirm" }
 };
-var styles16 = StyleSheet.create({
-  stepper: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
-  stepBtn: { width: 44, height: 44, borderWidth: 2, alignItems: "center", justifyContent: "center" },
-  valueBox: { alignItems: "center", minWidth: 80 }
-});
+function makeStyles4(t) {
+  return StyleSheet.create({
+    wrap: { gap: t.spacing.md, alignItems: "center" },
+    stepper: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+    stepBtn: { width: 44, height: 44, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+    valueBox: { alignItems: "center", minWidth: 80 }
+  });
+}
 var easeWire7 = Easing.bezier(...WIRE_BEZIER);
 var RISE_PX = 10;
 var schema6 = z.object({
@@ -2145,20 +2200,20 @@ var _WorkItem = ({
   return /* @__PURE__ */ jsxs(
     Animated.View,
     {
-      style: [styles17.itemRow, { gap: t.spacing.sm + t.spacing.xs, opacity: rowT, transform: [{ translateY: rise }] }],
+      style: [styles13.itemRow, { gap: t.spacing.sm + t.spacing.xs, opacity: rowT, transform: [{ translateY: rise }] }],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles17.itemBadge,
+              styles13.itemBadge,
               { backgroundColor: t.colors.primarySoft, borderRadius: t.radius.full }
             ],
             children: /* @__PURE__ */ jsx(
               Animated.Text,
               {
                 style: [
-                  styles17.itemCheck,
+                  styles13.itemCheck,
                   { color: t.colors.primary, opacity: checkT, transform: [{ scale: checkScale }] }
                 ],
                 children: "\u2713"
@@ -2166,7 +2221,7 @@ var _WorkItem = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), styles17.itemText, { color: t.colors.text }], children: text })
+        /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), styles13.itemText, { color: t.colors.text }], children: text })
       ]
     }
   );
@@ -2244,18 +2299,18 @@ var _InterstitialCard = ({
           disabled: submitted || !canAdvance
         }
       ),
-      children: /* @__PURE__ */ jsxs(View, { style: [styles17.center, { gap: t.spacing.md }], children: [
-        /* @__PURE__ */ jsx(Animated.View, { style: [styles17.fullWidth, riseStyle(artT)], children: showImage ? /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(View, { style: [styles13.center, { gap: t.spacing.md }], children: [
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles13.fullWidth, riseStyle(artT)], children: showImage ? /* @__PURE__ */ jsx(
           Image,
           {
             source: { uri: imageUrl },
-            style: styles17.image,
+            style: styles13.image,
             resizeMode: "contain",
             onError: () => setImgFailed(true)
           }
-        ) : art ? /* @__PURE__ */ jsx(View, { style: styles17.art, children: art }) : null }),
+        ) : art ? /* @__PURE__ */ jsx(View, { style: styles13.art, children: art }) : null }),
         /* @__PURE__ */ jsx(Animated.View, { style: riseStyle(titleT), children: /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) }),
-        (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsx(View, { style: [styles17.items, { gap: t.spacing.md, marginTop: t.spacing.sm }], children: items.map((item, i) => /* @__PURE__ */ jsx(WorkItem, { text: item, index: i, reduced }, item)) }) : body ? /* @__PURE__ */ jsx(Animated.View, { style: riseStyle(bodyT), children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: body }) }) : null
+        (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsx(View, { style: [styles13.items, { gap: t.spacing.md, marginTop: t.spacing.sm }], children: items.map((item, i) => /* @__PURE__ */ jsx(WorkItem, { text: item, index: i, reduced }, `${item}-${i}`)) }) : body ? /* @__PURE__ */ jsx(Animated.View, { style: riseStyle(bodyT), children: /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: body }) }) : null
       ] })
     }
   );
@@ -2267,7 +2322,7 @@ var InterstitialCard = {
   propsSchema: schema6,
   defaultProps: { ctaLabel: "Continue", illustrationFallback: "momentum" }
 };
-var styles17 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   fullWidth: { width: "100%", alignItems: "center" },
   art: { alignItems: "center", justifyContent: "center" },
@@ -2505,6 +2560,10 @@ var WireOnboarding = ({
   );
   const sessionId = (_a = session == null ? void 0 : session.id) != null ? _a : "";
   const startupUserIdRef = useRef(boundUserId);
+  const metadataKey = config.metadata ? JSON.stringify(config.metadata) : "";
+  const metadataStable = useMemo(() => metadataKey ? JSON.parse(metadataKey) : void 0, [metadataKey]);
+  const componentNamesKey = (components != null ? components : onboardingComponents).map((c) => c.name).join(",");
+  const componentsStable = useMemo(() => components != null ? components : onboardingComponents, [componentNamesKey]);
   const llm = useMemo(() => {
     const baseUrl = config.serverUrl.replace(/\/$/, "");
     return {
@@ -2517,9 +2576,9 @@ var WireOnboarding = ({
       // names of the components this device can actually render — so the backend only
       // emits cards the kit knows how to draw.
       metadata: {
-        ...config.metadata,
+        ...metadataStable,
         sessionId,
-        supportedComponents: (components != null ? components : onboardingComponents).map((c) => c.name),
+        supportedComponents: componentsStable.map((c) => c.name),
         // Device snapshot + host-injected user context ride the session-start metadata so the
         // backend can segment the funnel. Old servers ignore these unknown keys (backward compat).
         device,
@@ -2532,7 +2591,7 @@ var WireOnboarding = ({
       },
       timeoutMs: 6e4
     };
-  }, [config.serverUrl, config.appId, config.apiKey, config.metadata, sessionId, components, device, userContextStable]);
+  }, [config.serverUrl, config.appId, config.apiKey, metadataStable, sessionId, componentsStable, device, userContextStable]);
   const reportTarget = useMemo(
     () => ({ serverUrl: config.serverUrl, apiKey: config.apiKey }),
     [config.serverUrl, config.apiKey]
@@ -2597,7 +2656,7 @@ function DemoOnboarding({
   const [open, setOpen] = useState(false);
   const [runId, setRunId] = useState(0);
   const t = useMemo(() => mergeTheme(theme != null ? theme : {}), [theme]);
-  const styles20 = useMemo(() => makeStyles(t), [t]);
+  const styles16 = useMemo(() => makeStyles5(t), [t]);
   const openDemo = useCallback(() => {
     setRunId((n) => n + 1);
     setOpen(true);
@@ -2611,7 +2670,7 @@ function DemoOnboarding({
     [onComplete]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderTrigger ? renderTrigger(openDemo) : /* @__PURE__ */ jsx(Pressable, { onPress: openDemo, style: styles20.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles20.triggerText, children: label }) }),
+    renderTrigger ? renderTrigger(openDemo) : /* @__PURE__ */ jsx(Pressable, { onPress: openDemo, style: styles16.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles16.triggerText, children: label }) }),
     /* @__PURE__ */ jsx(
       Modal,
       {
@@ -2619,7 +2678,7 @@ function DemoOnboarding({
         animationType: "slide",
         presentationStyle: "fullScreen",
         onRequestClose: close,
-        children: /* @__PURE__ */ jsx(View, { style: styles20.modal, children: config ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(View, { style: styles16.modal, children: config ? /* @__PURE__ */ jsx(
           WireOnboarding,
           {
             config,
@@ -2632,16 +2691,16 @@ function DemoOnboarding({
             onError: close
           },
           runId
-        ) : /* @__PURE__ */ jsxs(View, { style: styles20.notice, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles20.noticeTitle, children: "Wire AI not configured" }),
-          /* @__PURE__ */ jsx(Text, { style: styles20.noticeBody, children: "Set the Wire AI key + server URL (e.g. via wireConfigFromEnv) to demo the AI onboarding here." }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: close, style: styles20.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles20.triggerText, children: "Close" }) })
+        ) : /* @__PURE__ */ jsxs(View, { style: styles16.notice, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles16.noticeTitle, children: "Wire AI not configured" }),
+          /* @__PURE__ */ jsx(Text, { style: styles16.noticeBody, children: "Set the Wire AI key + server URL (e.g. via wireConfigFromEnv) to demo the AI onboarding here." }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: close, style: styles16.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles16.triggerText, children: "Close" }) })
         ] }) })
       }
     )
   ] });
 }
-function makeStyles(t) {
+function makeStyles5(t) {
   return StyleSheet.create({
     trigger: {
       backgroundColor: t.colors.primary,
@@ -2714,13 +2773,13 @@ var _DoneBlock = ({
   message = "Personalizing your experience\u2026"
 }) => {
   const t = useOnboardingTheme();
-  return /* @__PURE__ */ jsxs(View, { style: [styles18.center, { gap: t.spacing.sm, padding: t.spacing.lg }], children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles14.center, { gap: t.spacing.sm, padding: t.spacing.lg }], children: [
     /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.success, textAlign: "center" }], children: title }),
     /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: message })
   ] });
 };
 var DoneBlock = React14.memo(_DoneBlock);
-var styles18 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" }
 });
 
@@ -2799,25 +2858,25 @@ var _CenteredModal = forwardRef(
           /* @__PURE__ */ jsx(
             Animated.View,
             {
-              style: [styles19.backdrop, { opacity: backdropOpacity }],
+              style: [styles15.backdrop, { opacity: backdropOpacity }],
               pointerEvents: "none"
             }
           ),
           /* @__PURE__ */ jsx(
             Pressable,
             {
-              style: styles19.fill,
+              style: styles15.fill,
               onPress: onBackdrop,
               accessibilityRole: "button",
               accessibilityLabel: "Dismiss",
-              children: /* @__PURE__ */ jsx(SafeAreaView, { style: styles19.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-              }, style: styles19.cardWrap, children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx(SafeAreaView, { style: styles15.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              }, style: styles15.cardWrap, children: /* @__PURE__ */ jsx(
                 Animated.View,
                 {
                   accessibilityViewIsModal: true,
                   accessibilityRole: "alert",
                   style: [
-                    styles19.card,
+                    styles15.card,
                     {
                       backgroundColor: theme.colors.surface,
                       borderRadius: theme.radius.lg,
@@ -2839,7 +2898,7 @@ var _CenteredModal = forwardRef(
 );
 _CenteredModal.displayName = "CenteredModal";
 var CenteredModal = React14.memo(_CenteredModal);
-var styles19 = StyleSheet.create({
+var styles15 = 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 },
@@ -2993,7 +3052,12 @@ var useWireFeatures = (config) => {
   }, [canFetch, stableConfig]);
   return flags;
 };
-var WireFeaturesContext = createContext(null);
+var CONTEXT_SYMBOL = /* @__PURE__ */ Symbol.for("wireai.features.context");
+var globalObj = global;
+if (!globalObj[CONTEXT_SYMBOL]) {
+  globalObj[CONTEXT_SYMBOL] = createContext(null);
+}
+var WireFeaturesContext = globalObj[CONTEXT_SYMBOL];
 var WireFeaturesProvider = ({
   config,
   flags,
@@ -3406,6 +3470,8 @@ var createEventQueue = (options) => {
   })();
   const postBatch = async (events) => {
     if (!(target == null ? void 0 : target.serverUrl) || events.length === 0) return false;
+    const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+    const timer = setTimeout(() => controller == null ? void 0 : controller.abort(), 15e3);
     try {
       const url = `${target.serverUrl.replace(/\/$/, "")}/v1/events`;
       const headers = { "Content-Type": "application/json" };
@@ -3413,11 +3479,14 @@ var createEventQueue = (options) => {
       const res = await fetch(url, {
         method: "POST",
         headers,
-        body: JSON.stringify({ events })
+        body: JSON.stringify({ events }),
+        signal: controller == null ? void 0 : controller.signal
       });
       return !!(res && res.ok);
     } catch {
       return false;
+    } finally {
+      clearTimeout(timer);
     }
   };
   const clearRetry = () => {