@wireai/activation 0.3.0 → 0.7.0

package/dist/index.js

@@ -12,6 +12,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React14__default = /*#__PURE__*/_interopDefault(React14);
 
 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 });
@@ -85,11 +91,15 @@ var useOnboardingTheme = () => {
   const ctx = React14.useContext(OnboardingThemeContext);
   return ctx != null ? ctx : mergeTheme();
 };
-var IllustrationContext = React14.createContext({});
+var EMPTY_REGISTRY = {};
+var IllustrationContext = React14.createContext(EMPTY_REGISTRY);
 var IllustrationProvider = ({
   registry,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(IllustrationContext.Provider, { value: registry != null ? registry : {}, children });
+}) => {
+  const value = React14.useMemo(() => registry != null ? registry : EMPTY_REGISTRY, [registry]);
+  return /* @__PURE__ */ jsxRuntime.jsx(IllustrationContext.Provider, { value, children });
+};
 var useIllustration = (name) => {
   const registry = React14.useContext(IllustrationContext);
   if (!name) return void 0;
@@ -380,23 +390,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__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: animatedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles2.box, { width: size, height: size }, animatedStyle], children: /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.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__default.default.memo(_AnimatedSparkle);
 var styles2 = reactNative.StyleSheet.create({
-  glyph: { textAlign: "center" }
+  box: { alignItems: "center", justifyContent: "center" },
+  glyph: {
+    textAlign: "center",
+    textAlignVertical: "center",
+    includeFontPadding: false
+  }
 });
-var LoaderChromeContext = React14.createContext({ offsetY: 0 });
-var LoaderChromeProvider = LoaderChromeContext.Provider;
-var useLoaderChrome = () => React14.useContext(LoaderChromeContext);
 var STAGE_SIZE = 96;
 var ORBIT_DOT = 9;
 var OrbitDot = ({ color, reduced }) => {
@@ -460,39 +480,45 @@ var _LoadingBlock = ({
 }) => {
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
-  const { offsetY } = useLoaderChrome();
   const [showSkeleton, setShowSkeleton] = React14.useState(false);
   React14.useEffect(() => {
     const timer = setTimeout(() => setShowSkeleton(true), SKELETON_DELAY_MS);
     return () => clearTimeout(timer);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.View,
-    {
-      style: [
-        styles3.center,
-        { gap: t.spacing.md, padding: t.spacing.lg },
-        offsetY ? { transform: [{ translateY: offsetY }] } : null
-      ],
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.stage, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }] }),
-          /* @__PURE__ */ jsxRuntime.jsx(OrbitDot, { color: t.colors.primary, reduced }),
-          /* @__PURE__ */ jsxRuntime.jsx(AnimatedSparkle, { size: 40, variant: "pulse" })
-        ] }),
-        title ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) : null,
-        hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: hint }) : null,
-        showSkeleton ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { width: "80%", delay: 0, color: t.colors.surface, reduced }),
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { width: "60%", delay: 200, color: t.colors.surface, reduced })
-        ] }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.center, { padding: t.spacing.lg }], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.stage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }] }),
+      /* @__PURE__ */ jsxRuntime.jsx(OrbitDot, { color: t.colors.primary, reduced }),
+      /* @__PURE__ */ jsxRuntime.jsx(AnimatedSparkle, { size: 40, variant: "pulse" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        style: [
+          styles3.labels,
+          { marginTop: STAGE_SIZE / 2 + t.spacing.lg, gap: t.spacing.md, paddingHorizontal: t.spacing.lg }
+        ],
+        pointerEvents: "none",
+        children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) : null,
+          hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: hint }) : null,
+          showSkeleton ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { width: "80%", delay: 0, color: t.colors.surface, reduced }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { width: "60%", delay: 200, color: t.colors.surface, reduced })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
 };
 var LoadingBlock = React14__default.default.memo(_LoadingBlock);
 var styles3 = reactNative.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,
@@ -575,7 +601,6 @@ var styles5 = reactNative.StyleSheet.create({
   track: { height: 6, width: "100%", overflow: "hidden" },
   fill: { height: 6 }
 });
-var PROGRESS_TRACK = 6;
 var _OnboardingScaffold = ({
   step,
   complete,
@@ -587,33 +612,41 @@ var _OnboardingScaffold = ({
   children
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = React14.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__ */ jsxRuntime.jsxs(
     reactNativeSafeAreaContext.SafeAreaView,
     {
       edges: ["top", "bottom"],
-      style: [styles6.flex, { backgroundColor: t.colors.background }],
+      style: [styles16.flex, { backgroundColor: t.colors.background }],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.header, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.progressWrap, children: /* @__PURE__ */ jsxRuntime.jsx(StepProgress, { step, complete, approxScreens }) }),
-          onSkip ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onSkip, hitSlop: hit, style: { marginLeft: t.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: skipLabel }) }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles16.header, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.progressWrap, children: /* @__PURE__ */ jsxRuntime.jsx(StepProgress, { step, complete, approxScreens }) }),
+          onSkip ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onSkip, hitSlop: hit, style: styles16.skip, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: skipLabel }) }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }], children: /* @__PURE__ */ jsxRuntime.jsx(LoaderChromeProvider, { value: { offsetY: loaderOffsetY }, children }) }),
-        onBack ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.footer, { paddingHorizontal: t.spacing.md, paddingBottom: t.spacing.sm }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onBack, hitSlop: hit, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: backLabel }) }) }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [styles16.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }],
+            children
+          }
+        ),
+        onBack ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles16.footer, { paddingHorizontal: t.spacing.md, paddingBottom: t.spacing.sm }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onBack, hitSlop: hit, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: backLabel }) }) }) : null
       ]
     }
   );
 };
 var OnboardingScaffold = React14__default.default.memo(_OnboardingScaffold);
-var styles6 = reactNative.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 reactNative.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,
@@ -644,6 +677,14 @@ var _Button = ({
     },
     [pressT, reduced]
   );
+  const lastPress = React14.useRef(0);
+  const handlePress = React14.useCallback(() => {
+    if (!onPress) return;
+    const now = Date.now();
+    if (now - lastPress.current < 500) return;
+    lastPress.current = now;
+    onPress();
+  }, [onPress]);
   const handlePressIn = React14.useCallback(() => pressTo(1), [pressTo]);
   const handlePressOut = React14.useCallback(() => pressTo(0), [pressTo]);
   const scale = pressT.interpolate({
@@ -657,19 +698,19 @@ var _Button = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.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__ */ jsxRuntime.jsx(
         reactNative.Animated.View,
         {
           style: [
-            styles7.base,
-            fullWidth && styles7.fill,
+            styles6.base,
+            fullWidth && styles6.fill,
             {
               borderRadius: t.button.radius,
               minHeight: t.button.height,
@@ -697,7 +738,7 @@ var _Button = ({
   );
 };
 var Button = React14__default.default.memo(_Button);
-var styles7 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   base: { alignItems: "center", justifyContent: "center" },
   fill: { width: "100%" }
 });
@@ -708,14 +749,14 @@ var _ErrorBlock = ({
   onRetry
 }) => {
   const t = useOnboardingTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.center, { gap: t.spacing.md, padding: t.spacing.lg }], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.center, { gap: t.spacing.md, padding: t.spacing.lg }], children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: message }),
     onRetry ? /* @__PURE__ */ jsxRuntime.jsx(Button, { title: retryLabel, onPress: onRetry, variant: "outline" }) : null
   ] });
 };
 var ErrorBlock = React14__default.default.memo(_ErrorBlock);
-var styles8 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" }
 });
 var _CardLayout = ({
@@ -727,9 +768,10 @@ var _CardLayout = ({
   titleNode
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = React14.useMemo(() => makeStyles2(t), [t]);
   const hasHeader = !!title || !!subtitle || !!titleNode;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.KeyboardAvoidingView, { style: styles9.fill, behavior: "padding", children: [
-    hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { marginBottom: t.spacing.lg }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.KeyboardAvoidingView, { style: styles16.fill, behavior: "padding", children: [
+    hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.header, children: [
       titleNode != null ? titleNode : title ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [labelStyle(t.fonts), { color: t.colors.text }], children: title }) : null,
       subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.Text,
@@ -745,10 +787,10 @@ var _CardLayout = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.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",
@@ -756,17 +798,21 @@ var _CardLayout = ({
         children
       }
     ),
-    footer ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { paddingTop: t.spacing.lg }, children: footer }) : null
+    footer ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.footer, children: footer }) : null
   ] });
 };
 var CardLayout = React14__default.default.memo(_CardLayout);
-var styles9 = reactNative.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 reactNative.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 = reactNative.Easing.bezier(...WIRE_BEZIER);
 var BADGE_SIZE = 64;
 var BURST_SIZE = 104;
@@ -841,14 +887,14 @@ var _CompletionView = ({
     {
       align: "center",
       footer: /* @__PURE__ */ jsxRuntime.jsx(Button, { title: ctaLabel, onPress: handlePress, variant: "primary", disabled: submitted }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles10.center, { gap: t.spacing.md }], children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.badgeStage, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.center, { gap: t.spacing.md }], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.badgeStage, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Animated.View,
             {
               pointerEvents: "none",
               style: [
-                styles10.burst,
+                styles8.burst,
                 {
                   backgroundColor: t.colors.primarySoft,
                   borderRadius: t.radius.full,
@@ -862,7 +908,7 @@ var _CompletionView = ({
             reactNative.Animated.View,
             {
               style: [
-                styles10.badge,
+                styles8.badge,
                 {
                   backgroundColor: t.colors.primarySoft,
                   borderRadius: t.radius.full,
@@ -870,7 +916,7 @@ var _CompletionView = ({
                   opacity: pop
                 }
               ],
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.check, { color: t.colors.primary }], children: "\u2713" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.check, { color: t.colors.primary }], children: "\u2713" })
             }
           )
         ] }),
@@ -881,7 +927,7 @@ var _CompletionView = ({
   );
 };
 var CompletionView = React14__default.default.memo(_CompletionView);
-var styles10 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   badgeStage: {
     width: BURST_SIZE,
@@ -904,7 +950,6 @@ var _CardHandoff = ({
   const enterT = React14.useRef(new reactNative.Animated.Value(0)).current;
   const exitT = React14.useRef(new reactNative.Animated.Value(0)).current;
   const prev = React14.useRef({ key: transitionKey, node: children, variant });
-  const [enterVariant, setEnterVariant] = React14.useState(variant);
   const running = React14.useRef({});
   const mounted = React14.useRef(false);
   React14.useEffect(() => {
@@ -913,7 +958,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;
     }
@@ -921,7 +965,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;
@@ -952,7 +995,7 @@ var _CardHandoff = ({
   );
   const enterStyle = {
     opacity: enterT,
-    transform: transformFor(enterVariant, enterT, reduced, "enter")
+    transform: transformFor(variant, enterT, reduced, "enter")
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     leaving ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -969,7 +1012,7 @@ var _CardHandoff = ({
         children: leaving.node
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles11.fill, enterStyle], children })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles9.fill, enterStyle], children }, variant)
   ] });
 };
 var startEnter = (value, variant, reduced, delay, onDone) => {
@@ -1010,7 +1053,7 @@ var transformFor = (variant, t, reduced, direction) => {
   ];
 };
 var CardHandoff = React14__default.default.memo(_CardHandoff);
-var styles11 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   fill: { flex: 1 }
 });
 
@@ -1140,6 +1183,10 @@ var OnboardingFlow = ({
   onEventRef.current = onEvent;
   const onErrorRef = React14.useRef(onError);
   onErrorRef.current = onError;
+  const onCompleteRef = React14.useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const validatorsRef = React14.useRef(validators);
+  validatorsRef.current = validators;
   const reportTargetRef = React14.useRef(reportTarget);
   reportTargetRef.current = reportTarget;
   const sessionIdRef = React14.useRef(sessionId);
@@ -1255,8 +1302,8 @@ var OnboardingFlow = ({
   const handleFinish = React14.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 = React14.useCallback(() => {
     attempts.current = 0;
     degradedRef.current = false;
@@ -1284,9 +1331,10 @@ var OnboardingFlow = ({
   }, []);
   const wrappedActions = React14.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) {
@@ -1297,12 +1345,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);
@@ -1311,7 +1359,7 @@ var OnboardingFlow = ({
       }
       return out;
     },
-    [makeActions, progress.key, validators]
+    [makeActions, progress.key]
   );
   if (degraded) {
     if (fallbackFlow !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallbackFlow });
@@ -1466,7 +1514,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
         reactNative.Animated.View,
         {
           style: [
-            styles12.chip,
+            styles10.chip,
             {
               borderRadius: t.radius.full,
               paddingHorizontal: t.spacing.md,
@@ -1483,7 +1531,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
                 pointerEvents: "none",
                 style: [
                   reactNative.StyleSheet.absoluteFill,
-                  styles12.fillOverlay,
+                  styles10.fillOverlay,
                   {
                     borderRadius: t.radius.full,
                     borderColor: t.colors.primary,
@@ -1497,7 +1545,7 @@ var _ChipItem = ({ chip, isSelected, multiSelect, onToggle }) => {
               reactNative.Animated.Text,
               {
                 style: [
-                  styles12.check,
+                  styles10.check,
                   { color: t.colors.onPrimary, opacity: checkT, transform: [{ scale: checkScale }] }
                 ],
                 children: "\u2713"
@@ -1508,7 +1556,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
@@ -1570,7 +1618,7 @@ var _ChipSelectCard = ({
           disabled: selected.length === 0 || submitted
         }
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.chipsRow, { gap: t.spacing.sm + t.spacing.xs }], children: chips.map((chip) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles10.chipsRow, { gap: t.spacing.sm + t.spacing.xs }], children: chips.map((chip) => /* @__PURE__ */ jsxRuntime.jsx(
         ChipItem,
         {
           chip,
@@ -1590,7 +1638,7 @@ var ChipSelectCard = {
   propsSchema: schema,
   defaultProps: { multiSelect: true, submitLabel: "Continue" }
 };
-var styles12 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   chipsRow: { flexDirection: "row", flexWrap: "wrap" },
   chip: { borderWidth: 1.5, flexDirection: "row", alignItems: "center", gap: 6, overflow: "hidden" },
   fillOverlay: { borderWidth: 1.5 },
@@ -1622,6 +1670,7 @@ var _TextInputCard = ({
   lines = 6
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = React14.useMemo(() => makeStyles3(t), [t]);
   const { height: screenHeight } = reactNative.useWindowDimensions();
   const [value, setValue] = React14.useState("");
   const [submitted, setSubmitted] = React14.useState(false);
@@ -1648,7 +1697,7 @@ var _TextInputCard = ({
           disabled: !value.trim() || locked
         }
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: t.spacing.sm }, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.row, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TextInput,
           {
@@ -1662,7 +1711,7 @@ var _TextInputCard = ({
             textAlignVertical: multiline ? "top" : "center",
             style: [
               bodyStyle(t.fonts),
-              styles13.input,
+              styles16.input,
               {
                 color: t.colors.text,
                 backgroundColor: t.colors.surface,
@@ -1686,9 +1735,12 @@ var TextInputCard = {
   propsSchema: schema2,
   defaultProps: { submitLabel: "Submit", multiline: true, lines: 6 }
 };
-var styles13 = reactNative.StyleSheet.create({
-  input: { borderWidth: 1 }
-});
+function makeStyles3(t) {
+  return reactNative.StyleSheet.create({
+    row: { gap: t.spacing.sm },
+    input: { borderWidth: 1 }
+  });
+}
 var easeWire5 = reactNative.Easing.bezier(...WIRE_BEZIER);
 var optionObjectSchema = zod.z.object({
   value: zod.z.string().describe("Option value"),
@@ -1767,7 +1819,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
         reactNative.Animated.View,
         {
           style: [
-            styles14.option,
+            styles11.option,
             {
               padding: t.spacing.md,
               borderRadius: t.radius.md,
@@ -1784,7 +1836,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
                 pointerEvents: "none",
                 style: [
                   reactNative.StyleSheet.absoluteFill,
-                  styles14.selectedOverlay,
+                  styles11.selectedOverlay,
                   {
                     borderRadius: t.radius.md,
                     borderColor: t.colors.primary,
@@ -1798,7 +1850,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
               reactNative.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" }
                 ],
@@ -1806,7 +1858,7 @@ var _OptionRow = ({ opt, isSelected, multiSelect, onToggle }) => {
                   reactNative.Animated.Text,
                   {
                     style: [
-                      styles14.check,
+                      styles11.check,
                       { color: t.colors.onPrimary, opacity: checkT, transform: [{ scale: checkScale }] }
                     ],
                     children: "\u2713"
@@ -1885,7 +1937,7 @@ var SelectionCard = {
   propsSchema: schema3,
   defaultProps: { submitLabel: "Continue", multiSelect: false }
 };
-var styles14 = reactNative.StyleSheet.create({
+var styles11 = reactNative.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" },
@@ -1907,17 +1959,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] = React14.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 = React14.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 = React14.useRef(new reactNative.Animated.Value(reduced ? 1 : 0)).current;
   const copyT = React14.useRef(new reactNative.Animated.Value(reduced ? 1 : 0)).current;
   React14.useEffect(() => {
@@ -1959,8 +2016,8 @@ var _StatusCard = ({ status, title, message, ctaLabel, onContinue, onPress, onSu
     {
       align: "center",
       footer: ctaLabel ? /* @__PURE__ */ jsxRuntime.jsx(Button, { title: ctaLabel, onPress: handleContinue, variant: "primary", disabled: submitted }) : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles15.center, { gap: t.spacing.sm }], children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles15.titleRow, { gap: t.spacing.sm }], children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.center, { gap: t.spacing.sm }], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.titleRow, { gap: t.spacing.sm }], children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Animated.Text,
             {
@@ -1968,7 +2025,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__ */ jsxRuntime.jsx(
@@ -2007,7 +2064,7 @@ var StatusCard = {
   component: React14__default.default.memo(_StatusCard),
   propsSchema: schema4
 };
-var styles15 = reactNative.StyleSheet.create({
+var styles12 = reactNative.StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   titleRow: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
 });
@@ -2032,6 +2089,7 @@ var _NumberStepperCard = ({
   onSubmit
 }) => {
   const t = useOnboardingTheme();
+  const styles16 = React14.useMemo(() => makeStyles4(t), [t]);
   const safeMin = safeNum(min, 1);
   const safeMaxRaw = safeNum(max, 30);
   const safeMax = safeMaxRaw < safeMin ? safeMin : safeMaxRaw;
@@ -2064,7 +2122,7 @@ var _NumberStepperCard = ({
       title: label,
       align: "center",
       footer: /* @__PURE__ */ jsxRuntime.jsx(Button, { title: submitLabel, onPress: handleSubmit, variant: "primary", disabled: submitted }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: t.spacing.md, alignItems: "center" }, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.wrap, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles16.stepper, { gap: t.spacing.lg }], children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: atMin || submitted ? void 0 : handleDecrement, disabled: atMin || submitted, style: stepBtnStyle(atMin), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: atMin ? t.colors.textMuted : t.colors.primary }], children: "\u2212" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.valueBox, children: [
@@ -2085,11 +2143,14 @@ var NumberStepperCard = {
   propsSchema: schema5,
   defaultProps: { min: 1, max: 30, defaultValue: 1, step: 1, submitLabel: "Confirm" }
 };
-var styles16 = reactNative.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 reactNative.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 = reactNative.Easing.bezier(...WIRE_BEZIER);
 var RISE_PX = 10;
 var schema6 = zod.z.object({
@@ -2151,20 +2212,20 @@ var _WorkItem = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.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__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
-              styles17.itemBadge,
+              styles13.itemBadge,
               { backgroundColor: t.colors.primarySoft, borderRadius: t.radius.full }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Animated.Text,
               {
                 style: [
-                  styles17.itemCheck,
+                  styles13.itemCheck,
                   { color: t.colors.primary, opacity: checkT, transform: [{ scale: checkScale }] }
                 ],
                 children: "\u2713"
@@ -2172,7 +2233,7 @@ var _WorkItem = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), styles17.itemText, { color: t.colors.text }], children: text })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), styles13.itemText, { color: t.colors.text }], children: text })
       ]
     }
   );
@@ -2250,18 +2311,18 @@ var _InterstitialCard = ({
           disabled: submitted || !canAdvance
         }
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles17.center, { gap: t.spacing.md }], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles17.fullWidth, riseStyle(artT)], children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles13.center, { gap: t.spacing.md }], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.fullWidth, riseStyle(artT)], children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Image,
           {
             source: { uri: imageUrl },
-            style: styles17.image,
+            style: styles13.image,
             resizeMode: "contain",
             onError: () => setImgFailed(true)
           }
-        ) : art ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles17.art, children: art }) : null }),
+        ) : art ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.art, children: art }) : null }),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: riseStyle(titleT), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }], children: title }) }),
-        (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles17.items, { gap: t.spacing.md, marginTop: t.spacing.sm }], children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(WorkItem, { text: item, index: i, reduced }, item)) }) : body ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: riseStyle(bodyT), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: body }) }) : null
+        (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles13.items, { gap: t.spacing.md, marginTop: t.spacing.sm }], children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(WorkItem, { text: item, index: i, reduced }, `${item}-${i}`)) }) : body ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: riseStyle(bodyT), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: body }) }) : null
       ] })
     }
   );
@@ -2273,7 +2334,7 @@ var InterstitialCard = {
   propsSchema: schema6,
   defaultProps: { ctaLabel: "Continue", illustrationFallback: "momentum" }
 };
-var styles17 = reactNative.StyleSheet.create({
+var styles13 = reactNative.StyleSheet.create({
   center: { width: "100%", alignItems: "center", justifyContent: "center" },
   fullWidth: { width: "100%", alignItems: "center" },
   art: { alignItems: "center", justifyContent: "center" },
@@ -2294,6 +2355,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";
@@ -2363,9 +2475,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;
@@ -2444,6 +2568,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 },
@@ -2511,6 +2636,10 @@ var WireOnboarding = ({
   );
   const sessionId = (_a = session == null ? void 0 : session.id) != null ? _a : "";
   const startupUserIdRef = React14.useRef(boundUserId);
+  const metadataKey = config.metadata ? JSON.stringify(config.metadata) : "";
+  const metadataStable = React14.useMemo(() => metadataKey ? JSON.parse(metadataKey) : void 0, [metadataKey]);
+  const componentNamesKey = (components != null ? components : onboardingComponents).map((c) => c.name).join(",");
+  const componentsStable = React14.useMemo(() => components != null ? components : onboardingComponents, [componentNamesKey]);
   const llm = React14.useMemo(() => {
     const baseUrl = config.serverUrl.replace(/\/$/, "");
     return {
@@ -2523,9 +2652,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,
@@ -2538,7 +2667,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 = React14.useMemo(
     () => ({ serverUrl: config.serverUrl, apiKey: config.apiKey }),
     [config.serverUrl, config.apiKey]
@@ -2603,7 +2732,7 @@ function DemoOnboarding({
   const [open, setOpen] = React14.useState(false);
   const [runId, setRunId] = React14.useState(0);
   const t = React14.useMemo(() => mergeTheme(theme != null ? theme : {}), [theme]);
-  const styles20 = React14.useMemo(() => makeStyles(t), [t]);
+  const styles16 = React14.useMemo(() => makeStyles5(t), [t]);
   const openDemo = React14.useCallback(() => {
     setRunId((n) => n + 1);
     setOpen(true);
@@ -2617,7 +2746,7 @@ function DemoOnboarding({
     [onComplete]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    renderTrigger ? renderTrigger(openDemo) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: openDemo, style: styles20.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.triggerText, children: label }) }),
+    renderTrigger ? renderTrigger(openDemo) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: openDemo, style: styles16.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles16.triggerText, children: label }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Modal,
       {
@@ -2625,7 +2754,7 @@ function DemoOnboarding({
         animationType: "slide",
         presentationStyle: "fullScreen",
         onRequestClose: close,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles20.modal, children: config ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.modal, children: config ? /* @__PURE__ */ jsxRuntime.jsx(
           WireOnboarding,
           {
             config,
@@ -2638,16 +2767,16 @@ function DemoOnboarding({
             onError: close
           },
           runId
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles20.notice, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.noticeTitle, children: "Wire AI not configured" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.noticeBody, children: "Set the Wire AI key + server URL (e.g. via wireConfigFromEnv) to demo the AI onboarding here." }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: close, style: styles20.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.triggerText, children: "Close" }) })
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.notice, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles16.noticeTitle, children: "Wire AI not configured" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles16.noticeBody, children: "Set the Wire AI key + server URL (e.g. via wireConfigFromEnv) to demo the AI onboarding here." }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: close, style: styles16.trigger, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles16.triggerText, children: "Close" }) })
         ] }) })
       }
     )
   ] });
 }
-function makeStyles(t) {
+function makeStyles5(t) {
   return reactNative.StyleSheet.create({
     trigger: {
       backgroundColor: t.colors.primary,
@@ -2720,13 +2849,13 @@ var _DoneBlock = ({
   message = "Personalizing your experience\u2026"
 }) => {
   const t = useOnboardingTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles18.center, { gap: t.spacing.sm, padding: t.spacing.lg }], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles14.center, { gap: t.spacing.sm, padding: t.spacing.lg }], children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.success, textAlign: "center" }], children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }], children: message })
   ] });
 };
 var DoneBlock = React14__default.default.memo(_DoneBlock);
-var styles18 = reactNative.StyleSheet.create({
+var styles14 = reactNative.StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" }
 });
 
@@ -2805,25 +2934,25 @@ var _CenteredModal = React14.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Animated.View,
             {
-              style: [styles19.backdrop, { opacity: backdropOpacity }],
+              style: [styles15.backdrop, { opacity: backdropOpacity }],
               pointerEvents: "none"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
             {
-              style: styles19.fill,
+              style: styles15.fill,
               onPress: onBackdrop,
               accessibilityRole: "button",
               accessibilityLabel: "Dismiss",
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSafeAreaContext.SafeAreaView, { style: styles19.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: () => {
-              }, style: styles19.cardWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSafeAreaContext.SafeAreaView, { style: styles15.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: () => {
+              }, style: styles15.cardWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Animated.View,
                 {
                   accessibilityViewIsModal: true,
                   accessibilityRole: "alert",
                   style: [
-                    styles19.card,
+                    styles15.card,
                     {
                       backgroundColor: theme.colors.surface,
                       borderRadius: theme.radius.lg,
@@ -2845,7 +2974,7 @@ var _CenteredModal = React14.forwardRef(
 );
 _CenteredModal.displayName = "CenteredModal";
 var CenteredModal = React14__default.default.memo(_CenteredModal);
-var styles19 = reactNative.StyleSheet.create({
+var styles15 = reactNative.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 },
@@ -2999,7 +3128,12 @@ var useWireFeatures = (config) => {
   }, [canFetch, stableConfig]);
   return flags;
 };
-var WireFeaturesContext = React14.createContext(null);
+var CONTEXT_SYMBOL = /* @__PURE__ */ Symbol.for("wireai.features.context");
+var globalObj = global;
+if (!globalObj[CONTEXT_SYMBOL]) {
+  globalObj[CONTEXT_SYMBOL] = React14.createContext(null);
+}
+var WireFeaturesContext = globalObj[CONTEXT_SYMBOL];
 var WireFeaturesProvider = ({
   config,
   flags,
@@ -3091,6 +3225,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();
@@ -3103,6 +3311,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) {
@@ -3159,7 +3368,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.
@@ -3412,6 +3621,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" };
@@ -3419,11 +3630,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 = () => {
@@ -3528,7 +3742,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(),
@@ -3550,7 +3764,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(),
@@ -3594,6 +3808,7 @@ exports.DEFAULT_FEATURES_TTL_MS = DEFAULT_FEATURES_TTL_MS;
 exports.DEFAULT_SESSION_TTL_MS = DEFAULT_SESSION_TTL_MS;
 exports.DemoOnboarding = DemoOnboarding;
 exports.DoneBlock = DoneBlock;
+exports.EXTRA_KEY_PREFIX = EXTRA_KEY_PREFIX;
 exports.ErrorBlock = ErrorBlock;
 exports.FIRST_OPEN_EVENT = FIRST_OPEN_EVENT;
 exports.IllustrationProvider = IllustrationProvider;
@@ -3605,6 +3820,7 @@ exports.OnboardingButton = Button;
 exports.OnboardingFlow = OnboardingFlow;
 exports.OnboardingScaffold = OnboardingScaffold;
 exports.OnboardingThemeProvider = OnboardingThemeProvider;
+exports.RESERVED_USER_CONTEXT_KEYS = RESERVED_USER_CONTEXT_KEYS;
 exports.SESSION_STARTED_EVENT = SESSION_STARTED_EVENT;
 exports.SelectionCard = SelectionCard;
 exports.StatusCard = StatusCard;
@@ -3621,17 +3837,22 @@ exports.defaultIllustrations = defaultIllustrations;
 exports.defaultOnboardingTheme = defaultOnboardingTheme;
 exports.defaultWireFeatures = defaultWireFeatures;
 exports.deriveAnswers = deriveAnswers;
+exports.detectAppVersion = detectAppVersion;
 exports.featuresCacheKey = featuresCacheKey;
 exports.featuresEqual = featuresEqual;
 exports.fetchWireFeatures = fetchWireFeatures;
 exports.firstOpenStorageKey = firstOpenStorageKey;
+exports.getCurrentSessionId = getCurrentSessionId;
+exports.hashEmailFnv1a = hashEmailFnv1a;
 exports.identifyOnboarding = identifyOnboarding;
 exports.isFeaturesFresh = isFeaturesFresh;
 exports.isOnboardingEnabled = isOnboardingEnabled;
+exports.isWireScalar = isWireScalar;
 exports.loadPersistedSession = loadPersistedSession;
 exports.makeSessionId = makeSessionId;
 exports.mergeTheme = mergeTheme;
 exports.motionSpec = motionSpec_exports;
+exports.namespaceExtra = namespaceExtra;
 exports.onboardingComponents = onboardingComponents;
 exports.parseWireFeatures = parseWireFeatures;
 exports.peekPersistedSession = peekPersistedSession;
@@ -3641,11 +3862,14 @@ exports.reportClientEvent = reportClientEvent;
 exports.reportClientEvents = reportClientEvents;
 exports.reportFirstOpen = reportFirstOpen;
 exports.reportSessionStart = reportSessionStart;
+exports.resetCurrentSessionId = resetCurrentSessionId;
 exports.resetFirstOpenLatch = resetFirstOpenLatch;
 exports.resetSessionStartGuard = resetSessionStartGuard;
+exports.resolveUserContext = resolveUserContext;
 exports.sanitizeUserId = sanitizeUserId;
 exports.savePersistedSession = savePersistedSession;
 exports.sessionStorageKey = sessionStorageKey;
+exports.setCurrentSessionId = setCurrentSessionId;
 exports.themeFromBrand = themeFromBrand;
 exports.toAnalyticsEvent = toAnalyticsEvent;
 exports.useIllustration = useIllustration;