@wireai/activation 0.7.0 → 0.9.0

package/dist/questionnaire/index.mjs

@@ -1,5 +1,5 @@
-import React4, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
-import { StyleSheet, Animated, Easing, BackHandler, Modal, Pressable, Text, AccessibilityInfo, TextInput } from 'react-native';
+import React8, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
+import { StyleSheet, Animated, Easing, BackHandler, Modal, Pressable, Text, AccessibilityInfo, View, TextInput } from 'react-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -88,12 +88,24 @@ 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] = useState(lastKnown);
@@ -205,7 +217,7 @@ var _Button = ({
     }
   );
 };
-var Button = React4.memo(_Button);
+var Button = React8.memo(_Button);
 var styles = StyleSheet.create({
   base: { alignItems: "center", justifyContent: "center" },
   fill: { width: "100%" }
@@ -325,7 +337,7 @@ var _CenteredModal = forwardRef(
   }
 );
 _CenteredModal.displayName = "CenteredModal";
-var CenteredModal = React4.memo(_CenteredModal);
+var CenteredModal = React8.memo(_CenteredModal);
 var styles2 = StyleSheet.create({
   fill: { flex: 1 },
   backdrop: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "#000" },
@@ -341,6 +353,319 @@ var styles2 = StyleSheet.create({
     elevation: 12
   }
 });
+var _DoneCheck = ({ theme, size = 48 }) => {
+  const reduced = useReducedMotion();
+  const pop = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  useEffect(() => {
+    if (reduced) {
+      pop.setValue(1);
+      return;
+    }
+    const anim = 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__ */ jsx(
+    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__ */ jsx(
+        Animated.Text,
+        {
+          style: [
+            styles3.glyph,
+            { color: theme.colors.onPrimary, fontSize: Math.round(size * 0.5), fontFamily: theme.fonts.bold }
+          ],
+          children: "\u2713"
+        }
+      )
+    }
+  );
+};
+var DoneCheck = React8.memo(_DoneCheck);
+DoneCheck.displayName = "DoneCheck";
+var styles3 = StyleSheet.create({
+  ring: { alignItems: "center", justifyContent: "center", alignSelf: "center" },
+  glyph: { includeFontPadding: false, textAlign: "center" }
+});
+var easeWire = Easing.bezier(...WIRE_BEZIER);
+var _CardHandoff = ({
+  transitionKey,
+  variant = "slide",
+  direction = "forward",
+  layout = "fill",
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const [leaving, setLeaving] = useState(null);
+  const enterT = useRef(new Animated.Value(0)).current;
+  const exitT = useRef(new Animated.Value(0)).current;
+  const prev = useRef({ key: transitionKey, node: children, variant });
+  const running = useRef({});
+  const mounted = useRef(false);
+  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 = 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;
+  });
+  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__ */ jsxs(Fragment, { children: [
+    leaving ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "none",
+        style: [
+          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__ */ jsx(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" ? Animated.spring(value, {
+    toValue: 1,
+    delay: scaledMs(delay),
+    damping: CARD_SPRING.damping,
+    stiffness: CARD_SPRING.stiffness,
+    mass: CARD_SPRING.mass,
+    useNativeDriver: true
+  }) : 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.memo(_CardHandoff);
+var styles4 = StyleSheet.create({
+  fill: { flex: 1 }
+});
+var easeWire2 = Easing.bezier(...WIRE_BEZIER);
+var _ModalPaneHost = ({
+  paneKey,
+  direction = "forward",
+  header,
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const height = useRef(new Animated.Value(0)).current;
+  const measured = useRef(null);
+  const [sized, setSized] = useState(false);
+  const paneChanged = useRef(false);
+  const running = useRef(null);
+  useEffect(() => {
+    paneChanged.current = true;
+  }, [paneKey]);
+  useEffect(() => () => {
+    var _a;
+    return (_a = running.current) == null ? void 0 : _a.stop();
+  }, []);
+  const onLayout = 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 = 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__ */ jsx(Animated.View, { style: sized ? { height, overflow: "hidden" } : void 0, children: /* @__PURE__ */ jsxs(View, { onLayout, style: styles5.pane, children: [
+    header,
+    /* @__PURE__ */ jsx(CardHandoff, { transitionKey: paneKey, direction, layout: "auto", variant: "slide", children })
+  ] }) });
+};
+var ModalPaneHost = React8.memo(_ModalPaneHost);
+ModalPaneHost.displayName = "ModalPaneHost";
+var styles5 = StyleSheet.create({
+  pane: { width: "100%" }
+});
+var easeWire3 = Easing.bezier(...WIRE_BEZIER);
+var Dot = ({ theme, filled, size }) => {
+  const reduced = useReducedMotion();
+  const fill = useRef(new Animated.Value(filled ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = 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__ */ jsx(
+    View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: theme.radius.full,
+        backgroundColor: theme.colors.border
+      },
+      children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [
+            StyleSheet.absoluteFill,
+            {
+              borderRadius: theme.radius.full,
+              backgroundColor: theme.colors.primary,
+              opacity: fill
+            }
+          ]
+        }
+      )
+    }
+  );
+};
+var _StepDots = ({ theme, count, index }) => /* @__PURE__ */ jsx(
+  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__ */ jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsx(Dot, { theme, filled: i <= index, size: theme.spacing.sm }) }, i))
+  }
+);
+var StepDots = React8.memo(_StepDots);
+StepDots.displayName = "StepDots";
+var styles6 = 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;
@@ -355,6 +680,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) => {
@@ -402,6 +739,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;
@@ -438,16 +861,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,
@@ -459,150 +872,208 @@ var _QuestionnaireGate = ({
   theme: themeOverride,
   dismissible = true
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const active = useOnboardingTheme();
   const t = useMemo(() => mergeThemeOver(active, themeOverride), [active, themeOverride]);
-  const modalRef = React4.useRef(null);
+  const modalRef = useRef(null);
   const id = questionnaire.id;
+  const steps = 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] = useState("form");
-  const [opinion, setOpinion] = useState("");
-  const [improve, setImprove] = useState("");
-  const [suggestions, setSuggestions] = useState("");
-  const shownRef = React4.useRef(false);
-  const onShownRef = React4.useRef(onShown);
-  const onEventRef = React4.useRef(onEvent);
+  const [state, setState] = useState(initialStepState);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const draftRef = useRef("");
+  const [answered, setAnswered] = useState(false);
+  const answeredRef = useRef(false);
+  const seedDraft = useCallback((value) => {
+    draftRef.current = value;
+    const has = value.trim().length > 0;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
+  const handleChangeText = useCallback((text) => {
+    draftRef.current = text;
+    const has = text.trim().length > 0;
+    if (has === answeredRef.current) return;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
+  const shownRef = useRef(false);
+  const onShownRef = useRef(onShown);
+  const onEventRef = useRef(onEvent);
   onShownRef.current = onShown;
   onEventRef.current = onEvent;
-  React4.useEffect(() => {
+  React8.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.useRef(null);
-  React4.useEffect(() => {
+  const resolveTimer = useRef(null);
+  React8.useEffect(() => {
     return () => {
       if (resolveTimer.current) clearTimeout(resolveTimer.current);
     };
   }, []);
-  const resolve = useCallback(() => {
-    onResolved == null ? void 0 : onResolved();
-  }, [onResolved]);
-  const canSend = opinion.trim().length > 0;
-  const send = 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 = useCallback(() => {
+  const submittedRef = useRef(false);
+  const handleDismissed = 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: title }),
-    phase === "form" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "A few words is plenty. Only the first box is required." }),
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: opinionLabel }),
-      /* @__PURE__ */ jsx(
-        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__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: improveLabel }),
-      /* @__PURE__ */ jsx(
-        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__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: suggestionsLabel }),
-      /* @__PURE__ */ jsx(
-        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__ */ jsx(Button, { title: "Send", onPress: send, variant: "primary", fullWidth: true, disabled: !canSend }),
-      dismissible && /* @__PURE__ */ jsx(Pressable, { onPress: handleDismissTap, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), styles3.link, { color: t.colors.textMuted }], children: "Not now" }) })
-    ] }),
-    phase === "thanks" && /* @__PURE__ */ jsx(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 = 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 = 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 = useCallback(() => {
+    applyTransition(commitStep(steps, stateRef.current, draftRef.current));
+  }, [applyTransition, steps]);
+  const handleSkip = useCallback(() => {
+    applyTransition(skipStep(steps, stateRef.current));
+  }, [applyTransition, steps]);
+  const handleBack = 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__ */ jsxs(View, { style: [styles7.header, { marginBottom: t.spacing.md }], children: [
+    /* @__PURE__ */ jsx(View, { style: styles7.headerSide, children: canGoBack(state) && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handleBack,
+        hitSlop: 12,
+        accessibilityRole: "button",
+        accessibilityLabel: "Back to the previous question",
+        children: /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), styles7.backGlyph, { color: t.colors.textMuted }], children: "\u2039" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StepDots, { theme: t, count: steps.length, index: state.index }),
+    /* @__PURE__ */ jsx(View, { style: styles7.headerSide })
+  ] }) : null;
+  const formPane = step ? /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: step.label }),
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      Button,
+      {
+        title: last ? "Send" : "Next",
+        onPress: handleNext,
+        variant: "primary",
+        fullWidth: true,
+        disabled: sendDisabled
+      }
+    ),
+    canSkip && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handleSkip,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Skip this question",
+        children: /* @__PURE__ */ jsx(Text, { style: linkStyle, children: "Skip step" })
+      }
+    )
+  ] }) : null;
+  const thanksPane = /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsx(DoneCheck, { theme: t }),
+    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), styles7.centerText, { color: t.colors.text }], children: "Thank you" }),
+    /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), styles7.centerText, { color: t.colors.textMuted }], children: "This helps us make it better." })
   ] });
-  return /* @__PURE__ */ jsx(CenteredModal, { ref: modalRef, theme: t, dismissible, onDismiss: resolve, children: content });
+  return /* @__PURE__ */ jsx(CenteredModal, { ref: modalRef, theme: t, dismissible, onDismiss: handleDismissed, children: /* @__PURE__ */ 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.memo(_QuestionnaireGate);
+var QuestionnaireGate = React8.memo(_QuestionnaireGate);
 QuestionnaireGate.displayName = "QuestionnaireGate";
-var styles3 = StyleSheet.create({
+var styles7 = 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