@wireai/activation 0.8.0 → 0.9.1

package/dist/questionnaire/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React4 = require('react');
+var React8 = require('react');
 var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 
 // src/questionnaire/QuestionnaireGate.tsx
 
@@ -60,9 +60,9 @@ var defaultOnboardingTheme = {
 var mergeTheme = (override) => {
   return defaultOnboardingTheme;
 };
-var OnboardingThemeContext = React4.createContext(null);
+var OnboardingThemeContext = React8.createContext(null);
 var useOnboardingTheme = () => {
-  const ctx = React4.useContext(OnboardingThemeContext);
+  const ctx = React8.useContext(OnboardingThemeContext);
   return ctx != null ? ctx : mergeTheme();
 };
 
@@ -94,16 +94,28 @@ var buttonLabelStyle = (f) => {
 };
 
 // src/motion/motionSpec.ts
+var WIRE_BEZIER = [0.16, 1, 0.3, 1];
 var REDUCED_FADE_MS = 120;
 var BUTTON_PRESS_SCALE = 0.975;
 var REDUCED_PRESS_OPACITY = 0.85;
 var BUTTON_PRESS_SPRING = { friction: 8, tension: 240 };
+var SELECT_FILL_MS = 180;
+var CARD_ENTER_MS = 220;
+var CARD_EXIT_MS = 180;
+var CARD_EXIT_LEAD_MS = 80;
+var CARD_SLIDE_PX = 26;
+var CARD_ENTER_SCALE_FROM = 0.96;
+var CARD_SPRING = { damping: 14, stiffness: 180, mass: 1 };
+var LOADER_HANDOFF_FADE_MS = 120;
+var STATUS_POP_SPRING = { friction: 6, tension: 200 };
+var STATUS_POP_SCALE_FROM = 0.4;
 var durationScale = 1;
 var scaledMs = (ms) => Math.round(ms * durationScale);
+var stateChangeDuration = (reduced, durationMs) => reduced ? 0 : durationMs;
 var lastKnown = false;
 var useReducedMotion = () => {
-  const [reduced, setReduced] = React4.useState(lastKnown);
-  React4.useEffect(() => {
+  const [reduced, setReduced] = React8.useState(lastKnown);
+  React8.useEffect(() => {
     let mounted = true;
     reactNative.AccessibilityInfo.isReduceMotionEnabled().then((value) => {
       lastKnown = value;
@@ -131,8 +143,8 @@ var _Button = ({
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
   const isPrimary = variant === "primary";
-  const pressT = React4.useRef(new reactNative.Animated.Value(0)).current;
-  const pressTo = React4.useCallback(
+  const pressT = React8.useRef(new reactNative.Animated.Value(0)).current;
+  const pressTo = React8.useCallback(
     (to) => {
       if (reduced) {
         reactNative.Animated.timing(pressT, {
@@ -151,16 +163,16 @@ var _Button = ({
     },
     [pressT, reduced]
   );
-  const lastPress = React4.useRef(0);
-  const handlePress = React4.useCallback(() => {
+  const lastPress = React8.useRef(0);
+  const handlePress = React8.useCallback(() => {
     if (!onPress) return;
     const now = Date.now();
     if (now - lastPress.current < 500) return;
     lastPress.current = now;
     onPress();
   }, [onPress]);
-  const handlePressIn = React4.useCallback(() => pressTo(1), [pressTo]);
-  const handlePressOut = React4.useCallback(() => pressTo(0), [pressTo]);
+  const handlePressIn = React8.useCallback(() => pressTo(1), [pressTo]);
+  const handlePressOut = React8.useCallback(() => pressTo(0), [pressTo]);
   const scale = pressT.interpolate({
     inputRange: [0, 1],
     outputRange: [1, reduced ? 1 : BUTTON_PRESS_SCALE]
@@ -211,7 +223,7 @@ var _Button = ({
     }
   );
 };
-var Button = React4__default.default.memo(_Button);
+var Button = React8__default.default.memo(_Button);
 var styles = reactNative.StyleSheet.create({
   base: { alignItems: "center", justifyContent: "center" },
   fill: { width: "100%" }
@@ -228,13 +240,13 @@ var CENTERED_MODAL_ANIM = {
   /** Peak dim of the backdrop at progress 1. */
   backdropOpacity: 0.55
 };
-var _CenteredModal = React4.forwardRef(
+var _CenteredModal = React8.forwardRef(
   ({ theme, dismissible = true, onDismiss, children }, ref) => {
-    const progress = React4.useRef(new reactNative.Animated.Value(0)).current;
-    const [open, setOpen] = React4.useState(true);
-    const closingRef = React4.useRef(false);
+    const progress = React8.useRef(new reactNative.Animated.Value(0)).current;
+    const [open, setOpen] = React8.useState(true);
+    const closingRef = React8.useRef(false);
     const reduced = useReducedMotion();
-    React4.useEffect(() => {
+    React8.useEffect(() => {
       const anim = reduced ? reactNative.Animated.timing(progress, {
         toValue: 1,
         duration: REDUCED_FADE_MS,
@@ -248,7 +260,7 @@ var _CenteredModal = React4.forwardRef(
       anim.start();
       return () => anim.stop();
     }, [progress, reduced]);
-    const close = React4.useCallback(() => {
+    const close = React8.useCallback(() => {
       if (closingRef.current) return;
       closingRef.current = true;
       reactNative.Animated.timing(progress, {
@@ -261,15 +273,15 @@ var _CenteredModal = React4.forwardRef(
         onDismiss();
       });
     }, [progress, onDismiss, reduced]);
-    React4.useImperativeHandle(ref, () => ({ close }), [close]);
-    React4.useEffect(() => {
+    React8.useImperativeHandle(ref, () => ({ close }), [close]);
+    React8.useEffect(() => {
       const sub = reactNative.BackHandler.addEventListener("hardwareBackPress", () => {
         if (dismissible) close();
         return true;
       });
       return () => sub.remove();
     }, [dismissible, close]);
-    const onBackdrop = React4.useCallback(() => {
+    const onBackdrop = React8.useCallback(() => {
       if (dismissible) close();
     }, [dismissible, close]);
     const backdropOpacity = progress.interpolate({
@@ -331,7 +343,7 @@ var _CenteredModal = React4.forwardRef(
   }
 );
 _CenteredModal.displayName = "CenteredModal";
-var CenteredModal = React4__default.default.memo(_CenteredModal);
+var CenteredModal = React8__default.default.memo(_CenteredModal);
 var styles2 = reactNative.StyleSheet.create({
   fill: { flex: 1 },
   backdrop: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "#000" },
@@ -347,6 +359,319 @@ var styles2 = reactNative.StyleSheet.create({
     elevation: 12
   }
 });
+var _DoneCheck = ({ theme, size = 48 }) => {
+  const reduced = useReducedMotion();
+  const pop = React8.useRef(new reactNative.Animated.Value(reduced ? 1 : 0)).current;
+  React8.useEffect(() => {
+    if (reduced) {
+      pop.setValue(1);
+      return;
+    }
+    const anim = reactNative.Animated.spring(pop, {
+      toValue: 1,
+      friction: STATUS_POP_SPRING.friction,
+      tension: STATUS_POP_SPRING.tension,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [pop, reduced]);
+  const scale = pop.interpolate({
+    inputRange: [0, 1],
+    outputRange: [STATUS_POP_SCALE_FROM, 1]
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Animated.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        styles3.ring,
+        {
+          width: size,
+          height: size,
+          borderRadius: theme.radius.full,
+          backgroundColor: theme.colors.success,
+          opacity: pop,
+          transform: [{ scale }]
+        }
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Animated.Text,
+        {
+          style: [
+            styles3.glyph,
+            { color: theme.colors.onPrimary, fontSize: Math.round(size * 0.5), fontFamily: theme.fonts.bold }
+          ],
+          children: "\u2713"
+        }
+      )
+    }
+  );
+};
+var DoneCheck = React8__default.default.memo(_DoneCheck);
+DoneCheck.displayName = "DoneCheck";
+var styles3 = reactNative.StyleSheet.create({
+  ring: { alignItems: "center", justifyContent: "center", alignSelf: "center" },
+  glyph: { includeFontPadding: false, textAlign: "center" }
+});
+var easeWire = reactNative.Easing.bezier(...WIRE_BEZIER);
+var _CardHandoff = ({
+  transitionKey,
+  variant = "slide",
+  direction = "forward",
+  layout = "fill",
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const [leaving, setLeaving] = React8.useState(null);
+  const enterT = React8.useRef(new reactNative.Animated.Value(0)).current;
+  const exitT = React8.useRef(new reactNative.Animated.Value(0)).current;
+  const prev = React8.useRef({ key: transitionKey, node: children, variant });
+  const running = React8.useRef({});
+  const mounted = React8.useRef(false);
+  React8.useEffect(() => {
+    var _a, _b;
+    const last = prev.current;
+    prev.current = { key: transitionKey, node: children, variant };
+    if (!mounted.current) {
+      mounted.current = true;
+      running.current.enter = startEnter(enterT, variant, reduced, 0);
+      return;
+    }
+    if (last.key === transitionKey) return;
+    (_a = running.current.enter) == null ? void 0 : _a.stop();
+    (_b = running.current.exit) == null ? void 0 : _b.stop();
+    setLeaving(last);
+    enterT.setValue(0);
+    exitT.setValue(0);
+    const exitDuration = reduced ? REDUCED_FADE_MS : last.variant === "fade" ? LOADER_HANDOFF_FADE_MS : CARD_EXIT_MS;
+    const exit = reactNative.Animated.timing(exitT, {
+      toValue: 1,
+      duration: scaledMs(exitDuration),
+      easing: easeWire,
+      useNativeDriver: true
+    });
+    running.current.exit = exit;
+    exit.start();
+    const enter = startEnter(
+      enterT,
+      variant,
+      reduced,
+      reduced ? 0 : CARD_EXIT_LEAD_MS,
+      () => setLeaving(null)
+    );
+    running.current.enter = enter;
+  });
+  React8.useEffect(
+    () => () => {
+      var _a, _b;
+      (_a = running.current.enter) == null ? void 0 : _a.stop();
+      (_b = running.current.exit) == null ? void 0 : _b.stop();
+    },
+    []
+  );
+  const enterStyle = {
+    opacity: enterT,
+    transform: transformFor(variant, enterT, reduced, "enter", direction)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leaving ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        pointerEvents: "none",
+        style: [
+          reactNative.StyleSheet.absoluteFill,
+          {
+            opacity: exitT.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+            // The CURRENT direction drives BOTH layers: one transition, one geography.
+            transform: transformFor(leaving.variant, exitT, reduced, "exit", direction)
+          }
+        ],
+        children: leaving.node
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [layout === "fill" ? styles4.fill : null, enterStyle], children }, variant)
+  ] });
+};
+var startEnter = (value, variant, reduced, delay, onDone) => {
+  value.setValue(0);
+  const anim = !reduced && variant === "spring" ? reactNative.Animated.spring(value, {
+    toValue: 1,
+    delay: scaledMs(delay),
+    damping: CARD_SPRING.damping,
+    stiffness: CARD_SPRING.stiffness,
+    mass: CARD_SPRING.mass,
+    useNativeDriver: true
+  }) : reactNative.Animated.timing(value, {
+    toValue: 1,
+    delay: scaledMs(delay),
+    duration: scaledMs(
+      reduced ? REDUCED_FADE_MS : variant === "fade" ? LOADER_HANDOFF_FADE_MS : CARD_ENTER_MS
+    ),
+    easing: easeWire,
+    useNativeDriver: true
+  });
+  anim.start(({ finished }) => {
+    if (finished) onDone == null ? void 0 : onDone();
+  });
+  return anim;
+};
+var transformFor = (variant, t, reduced, layer, travel) => {
+  if (reduced || variant === "fade") return [];
+  if (variant === "spring" && layer === "enter") {
+    return [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [CARD_ENTER_SCALE_FROM, 1] }) }];
+  }
+  const slide = travel === "forward" ? CARD_SLIDE_PX : -CARD_SLIDE_PX;
+  return [
+    {
+      translateX: t.interpolate({
+        inputRange: [0, 1],
+        outputRange: layer === "enter" ? [slide, 0] : [0, -slide]
+      })
+    }
+  ];
+};
+var CardHandoff = React8__default.default.memo(_CardHandoff);
+var styles4 = reactNative.StyleSheet.create({
+  fill: { flex: 1 }
+});
+var easeWire2 = reactNative.Easing.bezier(...WIRE_BEZIER);
+var _ModalPaneHost = ({
+  paneKey,
+  direction = "forward",
+  header,
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const height = React8.useRef(new reactNative.Animated.Value(0)).current;
+  const measured = React8.useRef(null);
+  const [sized, setSized] = React8.useState(false);
+  const paneChanged = React8.useRef(false);
+  const running = React8.useRef(null);
+  React8.useEffect(() => {
+    paneChanged.current = true;
+  }, [paneKey]);
+  React8.useEffect(() => () => {
+    var _a;
+    return (_a = running.current) == null ? void 0 : _a.stop();
+  }, []);
+  const onLayout = React8.useCallback(
+    (event) => {
+      var _a;
+      const next = Math.round(event.nativeEvent.layout.height);
+      if (!next) return;
+      const previous = measured.current;
+      if (previous !== null && Math.abs(previous - next) < 1) return;
+      const first = previous === null;
+      const ease = !first && !reduced && paneChanged.current;
+      paneChanged.current = false;
+      measured.current = next;
+      (_a = running.current) == null ? void 0 : _a.stop();
+      if (!ease) {
+        height.setValue(next);
+        if (first) setSized(true);
+        return;
+      }
+      const anim = reactNative.Animated.timing(height, {
+        toValue: next,
+        duration: scaledMs(CARD_ENTER_MS),
+        easing: easeWire2,
+        // height is layout, not transform — see the header note.
+        useNativeDriver: false
+      });
+      running.current = anim;
+      anim.start();
+    },
+    [height, reduced]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: sized ? { height, overflow: "hidden" } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { onLayout, style: styles5.pane, children: [
+    header,
+    /* @__PURE__ */ jsxRuntime.jsx(CardHandoff, { transitionKey: paneKey, direction, layout: "auto", variant: "slide", children })
+  ] }) });
+};
+var ModalPaneHost = React8__default.default.memo(_ModalPaneHost);
+ModalPaneHost.displayName = "ModalPaneHost";
+var styles5 = reactNative.StyleSheet.create({
+  pane: { width: "100%" }
+});
+var easeWire3 = reactNative.Easing.bezier(...WIRE_BEZIER);
+var Dot = ({ theme, filled, size }) => {
+  const reduced = useReducedMotion();
+  const fill = React8.useRef(new reactNative.Animated.Value(filled ? 1 : 0)).current;
+  React8.useEffect(() => {
+    const anim = reactNative.Animated.timing(fill, {
+      toValue: filled ? 1 : 0,
+      duration: scaledMs(stateChangeDuration(reduced, SELECT_FILL_MS)),
+      easing: easeWire3,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [fill, filled, reduced]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: theme.radius.full,
+        backgroundColor: theme.colors.border
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Animated.View,
+        {
+          style: [
+            reactNative.StyleSheet.absoluteFill,
+            {
+              borderRadius: theme.radius.full,
+              backgroundColor: theme.colors.primary,
+              opacity: fill
+            }
+          ]
+        }
+      )
+    }
+  );
+};
+var _StepDots = ({ theme, count, index }) => /* @__PURE__ */ jsxRuntime.jsx(
+  reactNative.View,
+  {
+    style: [styles6.row, { gap: theme.spacing.sm }],
+    accessibilityRole: "progressbar",
+    accessibilityLabel: `Step ${index + 1} of ${count}`,
+    accessibilityValue: { min: 1, max: count, now: index + 1 },
+    children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { theme, filled: i <= index, size: theme.spacing.sm }) }, i))
+  }
+);
+var StepDots = React8__default.default.memo(_StepDots);
+StepDots.displayName = "StepDots";
+var styles6 = reactNative.StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
+});
+
+// src/haptics/haptics.ts
+var play = async (tone) => {
+  try {
+    const mod = await import('expo-haptics');
+    if (!mod) return false;
+    if (tone === "selection") {
+      await mod.selectionAsync();
+      return true;
+    }
+    if (tone === "light") {
+      await mod.impactAsync(mod.ImpactFeedbackStyle.Light);
+      return true;
+    }
+    await mod.notificationAsync(mod.NotificationFeedbackType.Success);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var playHaptic = (tone) => {
+  void play(tone);
+};
 
 // src/reviews/feedbackForm.ts
 var FEEDBACK_MIN_LINES = 4;
@@ -361,6 +686,18 @@ var feedbackInputHeights = (fonts, verticalPadding = 0) => {
   };
 };
 
+// src/theme/mergeThemeOver.ts
+var mergeThemeOver = (base, override) => {
+  if (!override) return base;
+  return {
+    colors: { ...base.colors, ...override.colors },
+    fonts: { ...base.fonts, ...override.fonts },
+    radius: { ...base.radius, ...override.radius },
+    spacing: { ...base.spacing, ...override.spacing },
+    button: { ...base.button, ...override.button }
+  };
+};
+
 // src/reviews/decision.ts
 var decideReview = (local, decision) => decision != null ? decision : local;
 var resolveRules = (config) => {
@@ -408,6 +745,92 @@ var buildQuestionnaireSubmission = (input) => {
   };
 };
 
+// src/questionnaire/steps.ts
+var REQUIRED_STEPS = {
+  opinion: false,
+  improve: false,
+  suggestions: true
+};
+var DEFAULT_STEP_LABELS = {
+  opinion: "What do you think about the app?",
+  improve: "How can we improve?",
+  suggestions: "Any suggestions?"
+};
+var STEP_PLACEHOLDERS = {
+  opinion: "e.g. it feels fast and clear",
+  improve: "e.g. fewer steps to start",
+  suggestions: "e.g. a dark theme"
+};
+var buildQuestionnaireSteps = (questionnaire) => {
+  var _a, _b, _c;
+  return [
+    {
+      key: "opinion",
+      label: (_a = questionnaire.opinion_label) != null ? _a : DEFAULT_STEP_LABELS.opinion,
+      placeholder: STEP_PLACEHOLDERS.opinion,
+      required: REQUIRED_STEPS.opinion
+    },
+    {
+      key: "improve",
+      label: (_b = questionnaire.improve_label) != null ? _b : DEFAULT_STEP_LABELS.improve,
+      placeholder: STEP_PLACEHOLDERS.improve,
+      required: REQUIRED_STEPS.improve
+    },
+    {
+      key: "suggestions",
+      label: (_c = questionnaire.suggestions_label) != null ? _c : DEFAULT_STEP_LABELS.suggestions,
+      placeholder: STEP_PLACEHOLDERS.suggestions,
+      required: REQUIRED_STEPS.suggestions
+    }
+  ];
+};
+var initialStepState = () => ({
+  index: 0,
+  drafts: {},
+  direction: "forward",
+  done: false
+});
+var currentStep = (steps, state) => steps[state.index];
+var isLastStep = (steps, index) => index >= steps.length - 1;
+var canGoBack = (state) => state.index > 0;
+var canSkipStep = (steps, state) => {
+  var _a, _b;
+  return !((_b = (_a = steps[state.index]) == null ? void 0 : _a.required) != null ? _b : false);
+};
+var canCommitStep = (steps, state, value) => {
+  const step = steps[state.index];
+  if (!step) return false;
+  return !step.required || value.trim().length > 0;
+};
+var stashDraft = (steps, state, value) => {
+  const step = steps[state.index];
+  if (!step) return state;
+  return { ...state, drafts: { ...state.drafts, [step.key]: value } };
+};
+var commitStep = (steps, state, value) => {
+  const step = steps[state.index];
+  if (!step) return state;
+  if (!canCommitStep(steps, state, value)) return state;
+  const { drafts } = stashDraft(steps, state, value);
+  const last = isLastStep(steps, state.index);
+  return {
+    index: last ? state.index : state.index + 1,
+    drafts,
+    direction: "forward",
+    done: last
+  };
+};
+var skipStep = (steps, state) => commitStep(steps, state, "");
+var goBack = (state) => state.index <= 0 ? state : { ...state, index: state.index - 1, direction: "backward" };
+var toAnswers = (drafts) => {
+  var _a, _b, _c;
+  return {
+    opinion: (_a = drafts.opinion) != null ? _a : "",
+    improve: (_b = drafts.improve) != null ? _b : "",
+    suggestions: (_c = drafts.suggestions) != null ? _c : ""
+  };
+};
+
 // src/questionnaire/transport.ts
 var submitQuestionnaireResponse = (target, id, submission) => {
   if (!(target == null ? void 0 : target.serverUrl) || !id) return;
@@ -444,16 +867,6 @@ var fetchQuestionnaireDecision = async (target, options = {}) => {
     return null;
   }
 };
-var mergeThemeOver = (base, override) => {
-  if (!override) return base;
-  return {
-    colors: { ...base.colors, ...override.colors },
-    fonts: { ...base.fonts, ...override.fonts },
-    radius: { ...base.radius, ...override.radius },
-    spacing: { ...base.spacing, ...override.spacing },
-    button: { ...base.button, ...override.button }
-  };
-};
 var _QuestionnaireGate = ({
   questionnaire,
   target,
@@ -465,150 +878,208 @@ var _QuestionnaireGate = ({
   theme: themeOverride,
   dismissible = true
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const active = useOnboardingTheme();
-  const t = React4.useMemo(() => mergeThemeOver(active, themeOverride), [active, themeOverride]);
-  const modalRef = React4__default.default.useRef(null);
+  const t = React8.useMemo(() => mergeThemeOver(active, themeOverride), [active, themeOverride]);
+  const modalRef = React8.useRef(null);
   const id = questionnaire.id;
-  const [phase, setPhase] = React4.useState("form");
-  const [opinion, setOpinion] = React4.useState("");
-  const [improve, setImprove] = React4.useState("");
-  const [suggestions, setSuggestions] = React4.useState("");
-  const shownRef = React4__default.default.useRef(false);
-  const onShownRef = React4__default.default.useRef(onShown);
-  const onEventRef = React4__default.default.useRef(onEvent);
+  const steps = React8.useMemo(
+    () => buildQuestionnaireSteps({
+      opinion_label: questionnaire.opinion_label,
+      improve_label: questionnaire.improve_label,
+      suggestions_label: questionnaire.suggestions_label
+    }),
+    [questionnaire.opinion_label, questionnaire.improve_label, questionnaire.suggestions_label]
+  );
+  const [phase, setPhase] = React8.useState("form");
+  const [state, setState] = React8.useState(initialStepState);
+  const stateRef = React8.useRef(state);
+  stateRef.current = state;
+  const draftRef = React8.useRef("");
+  const [answered, setAnswered] = React8.useState(false);
+  const answeredRef = React8.useRef(false);
+  const seedDraft = React8.useCallback((value) => {
+    draftRef.current = value;
+    const has = value.trim().length > 0;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
+  const handleChangeText = React8.useCallback((text) => {
+    draftRef.current = text;
+    const has = text.trim().length > 0;
+    if (has === answeredRef.current) return;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
+  const shownRef = React8.useRef(false);
+  const onShownRef = React8.useRef(onShown);
+  const onEventRef = React8.useRef(onEvent);
   onShownRef.current = onShown;
   onEventRef.current = onEvent;
-  React4__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     var _a2, _b2;
     if (shownRef.current) return;
     shownRef.current = true;
     (_a2 = onShownRef.current) == null ? void 0 : _a2.call(onShownRef);
     (_b2 = onEventRef.current) == null ? void 0 : _b2.call(onEventRef, { name: "questionnaire_prompt_shown", id });
   }, []);
-  const resolveTimer = React4__default.default.useRef(null);
-  React4__default.default.useEffect(() => {
+  const resolveTimer = React8.useRef(null);
+  React8__default.default.useEffect(() => {
     return () => {
       if (resolveTimer.current) clearTimeout(resolveTimer.current);
     };
   }, []);
-  const resolve = React4.useCallback(() => {
-    onResolved == null ? void 0 : onResolved();
-  }, [onResolved]);
-  const canSend = opinion.trim().length > 0;
-  const send = React4.useCallback(() => {
-    if (!canSend) return;
-    const submission = buildQuestionnaireSubmission({
-      answers: { opinion, improve, suggestions },
-      sessionId,
-      meta
-    });
-    submitQuestionnaireResponse(target, id, submission);
-    onEvent == null ? void 0 : onEvent({ name: "questionnaire_submitted", id });
-    setPhase("thanks");
-    if (resolveTimer.current) clearTimeout(resolveTimer.current);
-    resolveTimer.current = setTimeout(() => {
-      var _a2;
-      (_a2 = modalRef.current) == null ? void 0 : _a2.close();
-    }, 1500);
-  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent]);
-  const handleDismissTap = React4.useCallback(() => {
+  const submittedRef = React8.useRef(false);
+  const handleDismissed = React8.useCallback(() => {
     var _a2;
-    onEvent == null ? void 0 : onEvent({ name: "questionnaire_dismissed", id });
-    (_a2 = modalRef.current) == null ? void 0 : _a2.close();
-  }, [onEvent, id]);
-  const title = (_a = questionnaire.title) != null ? _a : "How's it going so far?";
-  const opinionLabel = (_b = questionnaire.opinion_label) != null ? _b : "What do you think about the app?";
-  const improveLabel = (_c = questionnaire.improve_label) != null ? _c : "How can we improve? (optional)";
-  const suggestionsLabel = (_d = questionnaire.suggestions_label) != null ? _d : "Any suggestions? (optional)";
-  const opinionBox = feedbackInputHeights(t.fonts, t.spacing.md);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: title }),
-    phase === "form" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "A few words is plenty. Only the first box is required." }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: opinionLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TextInput,
-        {
-          value: opinion,
-          onChangeText: setOpinion,
-          placeholder: "e.g. it feels fast and clear",
-          placeholderTextColor: t.colors.textMuted,
-          multiline: true,
-          textAlignVertical: "top",
-          style: [
-            bodyStyle(t.fonts),
-            styles3.input,
-            {
-              color: t.colors.text,
-              backgroundColor: t.colors.background,
-              borderRadius: t.radius.md,
-              borderColor: t.colors.border,
-              padding: t.spacing.md,
-              minHeight: opinionBox.minHeight,
-              maxHeight: opinionBox.maxHeight
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: improveLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TextInput,
-        {
-          value: improve,
-          onChangeText: setImprove,
-          placeholder: "e.g. fewer steps to start",
-          placeholderTextColor: t.colors.textMuted,
-          style: [
-            bodyStyle(t.fonts),
-            styles3.input,
-            {
-              color: t.colors.text,
-              backgroundColor: t.colors.background,
-              borderRadius: t.radius.md,
-              borderColor: t.colors.border,
-              paddingHorizontal: t.spacing.md,
-              paddingVertical: t.spacing.sm,
-              minHeight: t.button.height
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: suggestionsLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TextInput,
-        {
-          value: suggestions,
-          onChangeText: setSuggestions,
-          placeholder: "e.g. a dark theme",
-          placeholderTextColor: t.colors.textMuted,
-          style: [
-            bodyStyle(t.fonts),
-            styles3.input,
-            {
-              color: t.colors.text,
-              backgroundColor: t.colors.background,
-              borderRadius: t.radius.md,
-              borderColor: t.colors.border,
-              paddingHorizontal: t.spacing.md,
-              paddingVertical: t.spacing.sm,
-              minHeight: t.button.height
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { title: "Send", onPress: send, variant: "primary", fullWidth: true, disabled: !canSend }),
-      dismissible && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: handleDismissTap, hitSlop: 8, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [captionStyle(t.fonts), styles3.link, { color: t.colors.textMuted }], children: "Not now" }) })
-    ] }),
-    phase === "thanks" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: "Thank you. This helps us make it better." })
+    if (!submittedRef.current) {
+      (_a2 = onEventRef.current) == null ? void 0 : _a2.call(onEventRef, { name: "questionnaire_dismissed", id });
+    }
+    onResolved == null ? void 0 : onResolved();
+  }, [id, onResolved]);
+  const finish = React8.useCallback(
+    (drafts) => {
+      const submission = buildQuestionnaireSubmission({
+        answers: toAnswers(drafts),
+        sessionId,
+        meta
+      });
+      submitQuestionnaireResponse(target, id, submission);
+      submittedRef.current = true;
+      onEvent == null ? void 0 : onEvent({ name: "questionnaire_submitted", id });
+      playHaptic("success");
+      setPhase("thanks");
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+      resolveTimer.current = setTimeout(() => {
+        var _a2;
+        (_a2 = modalRef.current) == null ? void 0 : _a2.close();
+      }, 1500);
+    },
+    [sessionId, meta, target, id, onEvent]
+  );
+  const applyTransition = React8.useCallback(
+    (next) => {
+      var _a2, _b2, _c2;
+      if (next === stateRef.current) return;
+      setState(next);
+      if (next.done) {
+        finish(next.drafts);
+        return;
+      }
+      seedDraft((_c2 = next.drafts[(_b2 = (_a2 = steps[next.index]) == null ? void 0 : _a2.key) != null ? _b2 : "opinion"]) != null ? _c2 : "");
+      playHaptic("light");
+    },
+    [finish, seedDraft, steps]
+  );
+  const handleNext = React8.useCallback(() => {
+    applyTransition(commitStep(steps, stateRef.current, draftRef.current));
+  }, [applyTransition, steps]);
+  const handleSkip = React8.useCallback(() => {
+    applyTransition(skipStep(steps, stateRef.current));
+  }, [applyTransition, steps]);
+  const handleBack = React8.useCallback(() => {
+    var _a2, _b2, _c2;
+    const next = goBack(stashDraft(steps, stateRef.current, draftRef.current));
+    setState(next);
+    seedDraft((_c2 = next.drafts[(_b2 = (_a2 = steps[next.index]) == null ? void 0 : _a2.key) != null ? _b2 : "opinion"]) != null ? _c2 : "");
+    playHaptic("light");
+  }, [seedDraft, steps]);
+  const step = currentStep(steps, state);
+  const last = isLastStep(steps, state.index);
+  const canSkip = canSkipStep(steps, state);
+  const sendDisabled = ((_a = step == null ? void 0 : step.required) != null ? _a : false) && !answered;
+  const answerBox = feedbackInputHeights(t.fonts, t.spacing.md);
+  const linkStyle = [captionStyle(t.fonts), styles7.link, { color: t.colors.textMuted }];
+  const header = phase === "form" ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.header, { marginBottom: t.spacing.md }], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.headerSide, children: canGoBack(state) && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress: handleBack,
+        hitSlop: 12,
+        accessibilityRole: "button",
+        accessibilityLabel: "Back to the previous question",
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), styles7.backGlyph, { color: t.colors.textMuted }], children: "\u2039" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(StepDots, { theme: t, count: steps.length, index: state.index }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.headerSide })
+  ] }) : null;
+  const formPane = step ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: step.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        defaultValue: (_b = state.drafts[step.key]) != null ? _b : "",
+        onChangeText: handleChangeText,
+        placeholder: step.placeholder,
+        placeholderTextColor: t.colors.textMuted,
+        accessibilityLabel: step.label,
+        multiline: true,
+        textAlignVertical: "top",
+        style: [
+          bodyStyle(t.fonts),
+          styles7.input,
+          {
+            color: t.colors.text,
+            backgroundColor: t.colors.background,
+            borderRadius: t.radius.md,
+            borderColor: t.colors.border,
+            padding: t.spacing.md,
+            minHeight: answerBox.minHeight,
+            maxHeight: answerBox.maxHeight
+          }
+        ]
+      },
+      step.key
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        title: last ? "Send" : "Next",
+        onPress: handleNext,
+        variant: "primary",
+        fullWidth: true,
+        disabled: sendDisabled
+      }
+    ),
+    canSkip && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress: handleSkip,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Skip this question",
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: linkStyle, children: "Skip step" })
+      }
+    )
+  ] }) : null;
+  const thanksPane = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DoneCheck, { theme: t }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [headingStyle(t.fonts), styles7.centerText, { color: t.colors.text }], children: "Thank you" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [bodyStyle(t.fonts), styles7.centerText, { color: t.colors.textMuted }], children: "This helps us make it better." })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(CenteredModal, { ref: modalRef, theme: t, dismissible, onDismiss: resolve, children: content });
+  return /* @__PURE__ */ jsxRuntime.jsx(CenteredModal, { ref: modalRef, theme: t, dismissible, onDismiss: handleDismissed, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ModalPaneHost,
+    {
+      paneKey: phase === "thanks" ? "thanks" : (_c = step == null ? void 0 : step.key) != null ? _c : "done",
+      direction: state.direction,
+      header,
+      children: phase === "thanks" ? thanksPane : formPane
+    }
+  ) });
 };
-var QuestionnaireGate = React4__default.default.memo(_QuestionnaireGate);
+var QuestionnaireGate = React8__default.default.memo(_QuestionnaireGate);
 QuestionnaireGate.displayName = "QuestionnaireGate";
-var styles3 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   input: { borderWidth: 1 },
-  link: { textAlign: "center", textDecorationLine: "underline" }
+  link: { textAlign: "center", textDecorationLine: "underline" },
+  centerText: { textAlign: "center" },
+  header: { flexDirection: "row", alignItems: "center" },
+  // Equal flex on both sides keeps the dots optically centred whether Back is drawn or not.
+  // `flex-start` matters: without it the back Pressable stretches across the whole left
+  // third of the card, so a tap anywhere near the dots would navigate back.
+  headerSide: { flex: 1, alignItems: "flex-start" },
+  backGlyph: { includeFontPadding: false }
 });
 
 // src/coachmarks/runtime.ts
@@ -750,16 +1221,16 @@ var fetchWireFeatures = async (config) => {
 
 // src/features/useWireFeatures.ts
 var useStableValue = (value, isEqual) => {
-  const ref = React4.useRef(value);
+  const ref = React8.useRef(value);
   if (!isEqual(ref.current, value)) ref.current = value;
   return ref.current;
 };
 var sameFetchKey = (a, b) => (a == null ? void 0 : a.serverUrl) === (b == null ? void 0 : b.serverUrl) && (a == null ? void 0 : a.apiKey) === (b == null ? void 0 : b.apiKey) && (a == null ? void 0 : a.appId) === (b == null ? void 0 : b.appId);
 var useWireFeatures = (config) => {
   const stableConfig = useStableValue(config, sameFetchKey);
-  const [flags, setFlags] = React4.useState(defaultWireFeatures);
+  const [flags, setFlags] = React8.useState(defaultWireFeatures);
   const canFetch = !!(stableConfig == null ? void 0 : stableConfig.serverUrl) && !!(stableConfig == null ? void 0 : stableConfig.apiKey);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!canFetch) {
       setFlags((prev) => featuresEqual(prev, defaultWireFeatures) ? prev : defaultWireFeatures);
       return;
@@ -778,10 +1249,10 @@ var useWireFeatures = (config) => {
 var CONTEXT_SYMBOL = /* @__PURE__ */ Symbol.for("wireai.features.context");
 var globalObj = global;
 if (!globalObj[CONTEXT_SYMBOL]) {
-  globalObj[CONTEXT_SYMBOL] = React4.createContext(null);
+  globalObj[CONTEXT_SYMBOL] = React8.createContext(null);
 }
 var WireFeaturesContext = globalObj[CONTEXT_SYMBOL];
-var useWireFeaturesContext = () => React4.useContext(WireFeaturesContext);
+var useWireFeaturesContext = () => React8.useContext(WireFeaturesContext);
 var useResolvedFeatures = (options) => {
   var _a, _b, _c;
   const ctx = useWireFeaturesContext();
@@ -838,7 +1309,7 @@ var questionnaireSessionsKey = (id) => `wire_questionnaire_${id}_sessions`;
 
 // src/questionnaire/useQuestionnaireGate.ts
 var useStableValue2 = (value, isEqual) => {
-  const ref = React4.useRef(value);
+  const ref = React8.useRef(value);
   if (!isEqual(ref.current, value)) ref.current = value;
   return ref.current;
 };
@@ -861,7 +1332,7 @@ var useQuestionnaireGate = ({
   );
   const lastKey = questionnaireLastShownKey(config.id);
   const sessionsKey = questionnaireSessionsKey(config.id);
-  const sessions = React4.useState(() => {
+  const sessions = React8.useState(() => {
     const store = resolveStorage(storage);
     const next = readInt(store, sessionsKey) + 1;
     writeInt(store, sessionsKey, next);
@@ -870,8 +1341,8 @@ var useQuestionnaireGate = ({
   const hasServerDecision = decision != null;
   const timeoutMs = config.timeoutFallbackMs;
   const waits = !hasServerDecision && timeoutMs != null && timeoutMs > 0;
-  const [elapsed, setElapsed] = React4.useState(!waits);
-  React4.useEffect(() => {
+  const [elapsed, setElapsed] = React8.useState(!waits);
+  React8.useEffect(() => {
     if (!waits) {
       setElapsed(true);
       return;
@@ -879,7 +1350,7 @@ var useQuestionnaireGate = ({
     const timer = setTimeout(() => setElapsed(true), timeoutMs);
     return () => clearTimeout(timer);
   }, [waits, timeoutMs]);
-  const { visible, verdict } = React4.useMemo(() => {
+  const { visible, verdict } = React8.useMemo(() => {
     if (!featureEnabled)
       return {
         visible: false,
@@ -916,16 +1387,16 @@ var useQuestionnaireGate = ({
     storage,
     isTesting
   ]);
-  const shownRef = React4.useRef(false);
-  const markShown = React4.useCallback(() => {
+  const shownRef = React8.useRef(false);
+  const markShown = React8.useCallback(() => {
     if (shownRef.current) return;
     shownRef.current = true;
     writeInt(resolveStorage(storage), lastKey, Date.now());
   }, [storage, lastKey]);
-  const markResolved = React4.useCallback(() => {
+  const markResolved = React8.useCallback(() => {
     markSeenGate(seenKey, storage, isTesting);
   }, [seenKey, storage, isTesting]);
-  return React4.useMemo(
+  return React8.useMemo(
     () => ({ visible, decision: verdict, markShown, markResolved }),
     [visible, verdict, markShown, markResolved]
   );