@wireai/activation 0.3.0 → 0.7.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';
@@ -6,6 +6,12 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { z } from 'zod';
 
 var __defProp = Object.defineProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -79,11 +85,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 +384,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 +474,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 +595,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 +606,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 +671,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 +692,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 +732,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 +743,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 +762,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 +781,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 +792,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 +881,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 +902,7 @@ var _CompletionView = ({
             Animated.View,
             {
               style: [
-                styles10.badge,
+                styles8.badge,
                 {
                   backgroundColor: t.colors.primarySoft,
                   borderRadius: t.radius.full,
@@ -864,7 +910,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 +921,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 +944,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 +952,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 +959,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 +989,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 +1006,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 +1047,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 +1177,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 +1296,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 +1325,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 +1339,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 +1353,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 +1508,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
         Animated.View,
         {
           style: [
-            styles12.chip,
+            styles10.chip,
             {
               borderRadius: t.radius.full,
               paddingHorizontal: t.spacing.md,
@@ -1477,7 +1525,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 +1539,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 +1550,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 +1612,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 +1632,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 +1664,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 +1691,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 +1705,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 +1729,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 +1813,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
         Animated.View,
         {
           style: [
-            styles14.option,
+            styles11.option,
             {
               padding: t.spacing.md,
               borderRadius: t.radius.md,
@@ -1778,7 +1830,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 +1844,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 +1852,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 +1931,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 +1953,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 +2010,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 +2019,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 +2058,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 +2083,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 +2116,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 +2137,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 +2206,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 +2227,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 +2305,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 +2328,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" },
@@ -2288,6 +2349,57 @@ var onboardingComponents = [
   NumberStepperCard,
   InterstitialCard
 ];
+
+// src/device/appVersion.ts
+var coerceVersion = (value) => {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+};
+var runtimeRequire = (moduleName) => {
+  try {
+    if (typeof __require !== "function") return void 0;
+    return __require(moduleName);
+  } catch {
+    return void 0;
+  }
+};
+var interop = (mod) => {
+  if (!mod || typeof mod !== "object") return void 0;
+  const def = mod.default;
+  if (def && typeof def === "object") return def;
+  return mod;
+};
+var safeInterop = (requireModule, moduleName) => {
+  try {
+    return interop(requireModule(moduleName));
+  } catch {
+    return void 0;
+  }
+};
+var detectAppVersion = (requireModule = runtimeRequire) => {
+  try {
+    const constants = safeInterop(requireModule, "expo-constants");
+    if (constants) {
+      const expoConfig = constants.expoConfig;
+      if (expoConfig && typeof expoConfig === "object") {
+        const fromExpoConfig = coerceVersion(expoConfig.version);
+        if (fromExpoConfig) return fromExpoConfig;
+      }
+      const fromNative = coerceVersion(constants.nativeAppVersion);
+      if (fromNative) return fromNative;
+    }
+    const application = safeInterop(requireModule, "expo-application");
+    if (application) {
+      const fromApplication = coerceVersion(application.nativeApplicationVersion);
+      if (fromApplication) return fromApplication;
+    }
+  } catch {
+  }
+  return void 0;
+};
+
+// src/device/deviceContext.ts
 var deriveFormFactor = (iosIdiom, width, height) => {
   if (iosIdiom === "pad") return "tablet";
   if (iosIdiom === "phone") return "phone";
@@ -2357,9 +2469,21 @@ var collectDeviceContext = () => {
     if (resolved.timeZone) ctx.timeZone = resolved.timeZone;
   } catch {
   }
+  const appVersion = detectAppVersion();
+  if (appVersion) ctx.appVersion = appVersion;
   return ctx;
 };
 
+// src/analytics/currentSession.ts
+var _currentSessionId;
+var setCurrentSessionId = (id) => {
+  if (typeof id === "string" && id.length > 0) _currentSessionId = id;
+};
+var getCurrentSessionId = () => _currentSessionId;
+var resetCurrentSessionId = () => {
+  _currentSessionId = void 0;
+};
+
 // src/session/persistedSession.ts
 var DEFAULT_SESSION_TTL_MS = 36e5;
 var READ_TIMEOUT_MS = 1500;
@@ -2438,6 +2562,7 @@ var identifyOnboarding = async (opts) => {
       contextId = stored == null ? void 0 : stored.id;
     }
   }
+  if (!contextId) contextId = getCurrentSessionId();
   if (!contextId) return false;
   reportClientEvent(
     { serverUrl: opts.config.serverUrl, apiKey: opts.config.apiKey },
@@ -2505,6 +2630,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 +2646,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 +2661,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 +2726,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 +2740,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 +2748,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 +2761,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 +2843,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 +2928,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 +2968,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 +3122,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,
@@ -3085,6 +3219,80 @@ var attributionMetadata = (a) => {
   return { attribution };
 };
 
+// src/context/userContext.ts
+var RESERVED_USER_CONTEXT_KEYS = [
+  "device_key",
+  "app_version",
+  "app_build",
+  "network_type",
+  "session_count",
+  "returning",
+  "platform",
+  "user_email",
+  "user_email_hashed"
+];
+var EXTRA_KEY_PREFIX = "custom.";
+var isWireScalar = (value) => {
+  const t = typeof value;
+  if (t === "string" || t === "boolean") return true;
+  if (t === "number") return Number.isFinite(value);
+  return false;
+};
+var hashEmailFnv1a = (email) => {
+  const normalized = email.trim().toLowerCase();
+  let hash = 2166136261;
+  for (let i = 0; i < normalized.length; i++) {
+    hash ^= normalized.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+};
+var cleanString = (value) => {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+};
+var namespaceExtra = (extra) => {
+  const out = {};
+  if (!extra || typeof extra !== "object") return out;
+  for (const [key, value] of Object.entries(extra)) {
+    const cleanKey = cleanString(key);
+    if (!cleanKey) continue;
+    if (!isWireScalar(value)) continue;
+    out[`${EXTRA_KEY_PREFIX}${cleanKey}`] = value;
+  }
+  return out;
+};
+var resolveUserContext = (ctx = {}, opts = {}) => {
+  var _a;
+  const result = {};
+  const bucket = {};
+  const userId = sanitizeUserId(ctx.userId);
+  if (userId) result.userId = userId;
+  const deviceKey = cleanString(ctx.deviceKey);
+  if (deviceKey) {
+    result.deviceKey = deviceKey;
+    bucket.device_key = deviceKey;
+  }
+  const appVersion = (_a = cleanString(ctx.appVersion)) != null ? _a : cleanString(opts.autoAppVersion);
+  if (appVersion) {
+    result.appVersion = appVersion;
+    bucket.app_version = appVersion;
+  }
+  const email = cleanString(ctx.userEmail);
+  if (email) {
+    if (ctx.hashEmail) {
+      bucket.user_email = hashEmailFnv1a(email);
+      bucket.user_email_hashed = true;
+    } else {
+      bucket.user_email = email;
+    }
+  }
+  Object.assign(bucket, namespaceExtra(ctx.extra));
+  if (Object.keys(bucket).length > 0) result.userContext = bucket;
+  return result;
+};
+
 // src/session-analytics/reportSessionStart.ts
 var SESSION_STARTED_EVENT = "app.session_started";
 var _emitted = /* @__PURE__ */ new Set();
@@ -3097,6 +3305,7 @@ var reportSessionStart = (opts) => {
   const target = opts.target;
   if (!opts.sink && !(target == null ? void 0 : target.serverUrl)) return;
   const sessionId = (_a = opts.sessionId) != null ? _a : makeSessionId();
+  setCurrentSessionId(sessionId);
   if (opts.once !== false) {
     if (_emitted.has(sessionId)) return;
     if (_emitted.size >= _GUARD_MAX) {
@@ -3153,7 +3362,7 @@ var useSessionStart = (config, options = {}) => {
       if (opts.enabled === false) return;
       const target = { serverUrl: cfg.serverUrl, apiKey: (_a = cfg.apiKey) != null ? _a : "" };
       const device = collectDeviceContext();
-      if (cfg.appVersion && !device.appVersion) device.appVersion = cfg.appVersion;
+      if (cfg.appVersion) device.appVersion = cfg.appVersion;
       reportSessionStart({
         target,
         // A fresh per-open id each fire; the emitter's once-guard dedupes within the open.
@@ -3406,6 +3615,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 +3624,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 = () => {
@@ -3522,7 +3736,7 @@ var useLifecycleEvents = (config, options = {}) => {
       const { config: cfg, options: opts } = latest.current;
       if (opts.enabled !== false) {
         const device = collectDeviceContext();
-        if ((cfg == null ? void 0 : cfg.appVersion) && !device.appVersion) device.appVersion = cfg.appVersion;
+        if (cfg == null ? void 0 : cfg.appVersion) device.appVersion = cfg.appVersion;
         reportFirstOpen({
           target: targetOf(cfg),
           sink: resolveSink(),
@@ -3544,7 +3758,7 @@ var useLifecycleEvents = (config, options = {}) => {
       if (opts.enabled === false) return;
       if (!(cfg == null ? void 0 : cfg.serverUrl) && !opts.sink) return;
       const device = collectDeviceContext();
-      if ((cfg == null ? void 0 : cfg.appVersion) && !device.appVersion) device.appVersion = cfg.appVersion;
+      if (cfg == null ? void 0 : cfg.appVersion) device.appVersion = cfg.appVersion;
       reportSessionStart({
         target: targetOf(cfg),
         sink: resolveSink(),
@@ -3578,6 +3792,6 @@ var useLifecycleEvents = (config, options = {}) => {
   }, []);
 };
 
-export { AnimatedSparkle, BACKGROUND_SESSION_MS, CardHandoff, CenteredModal, ChipSelectCard, CompletionView, DEFAULT_FEATURES_TTL_MS, DEFAULT_SESSION_TTL_MS, DemoOnboarding, DoneBlock, ErrorBlock, FIRST_OPEN_EVENT, IllustrationProvider, InterstitialCard, LoadingBlock, LoadingScreen, NumberStepperCard, Button as OnboardingButton, OnboardingFlow, OnboardingScaffold, OnboardingThemeProvider, SESSION_STARTED_EVENT, SelectionCard, StatusCard, StepProgress, TextInputCard, USER_ID_MAX_LENGTH, WIRE_ONBOARDING_EVENTS, WireFeaturesProvider, WireOnboarding, attributionMetadata, clearPersistedSession, collectDeviceContext, defaultIllustrations, defaultOnboardingTheme, defaultWireFeatures, deriveAnswers, featuresCacheKey, featuresEqual, fetchWireFeatures, firstOpenStorageKey, identifyOnboarding, isFeaturesFresh, isOnboardingEnabled, loadPersistedSession, makeSessionId, mergeTheme, motionSpec_exports as motionSpec, onboardingComponents, parseWireFeatures, peekPersistedSession, readCachedFeatures, readProgress, reportClientEvent, reportClientEvents, reportFirstOpen, reportSessionStart, resetFirstOpenLatch, resetSessionStartGuard, sanitizeUserId, savePersistedSession, sessionStorageKey, themeFromBrand, toAnalyticsEvent, useIllustration, useLifecycleEvents, useOnboardingTheme, useReducedMotion, useResolvedFeatures, useSessionStart, useWireFeatures, useWireFeaturesContext, wireConfigFromEnv, wireLifecycleEvents, writeCachedFeatures };
+export { AnimatedSparkle, BACKGROUND_SESSION_MS, CardHandoff, CenteredModal, ChipSelectCard, CompletionView, DEFAULT_FEATURES_TTL_MS, DEFAULT_SESSION_TTL_MS, DemoOnboarding, DoneBlock, EXTRA_KEY_PREFIX, ErrorBlock, FIRST_OPEN_EVENT, IllustrationProvider, InterstitialCard, LoadingBlock, LoadingScreen, NumberStepperCard, Button as OnboardingButton, OnboardingFlow, OnboardingScaffold, OnboardingThemeProvider, RESERVED_USER_CONTEXT_KEYS, SESSION_STARTED_EVENT, SelectionCard, StatusCard, StepProgress, TextInputCard, USER_ID_MAX_LENGTH, WIRE_ONBOARDING_EVENTS, WireFeaturesProvider, WireOnboarding, attributionMetadata, clearPersistedSession, collectDeviceContext, defaultIllustrations, defaultOnboardingTheme, defaultWireFeatures, deriveAnswers, detectAppVersion, featuresCacheKey, featuresEqual, fetchWireFeatures, firstOpenStorageKey, getCurrentSessionId, hashEmailFnv1a, identifyOnboarding, isFeaturesFresh, isOnboardingEnabled, isWireScalar, loadPersistedSession, makeSessionId, mergeTheme, motionSpec_exports as motionSpec, namespaceExtra, onboardingComponents, parseWireFeatures, peekPersistedSession, readCachedFeatures, readProgress, reportClientEvent, reportClientEvents, reportFirstOpen, reportSessionStart, resetCurrentSessionId, resetFirstOpenLatch, resetSessionStartGuard, resolveUserContext, sanitizeUserId, savePersistedSession, sessionStorageKey, setCurrentSessionId, themeFromBrand, toAnalyticsEvent, useIllustration, useLifecycleEvents, useOnboardingTheme, useReducedMotion, useResolvedFeatures, useSessionStart, useWireFeatures, useWireFeaturesContext, wireConfigFromEnv, wireLifecycleEvents, writeCachedFeatures };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map