@mrrocket/sdk 0.17.0 → 0.18.0

package/dist/react-native/index.js

@@ -48,10 +48,10 @@ __export(native_exports, {
   useVariant: () => useVariant
 });
 module.exports = __toCommonJS(native_exports);
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.17.0";
+var SDK_VERSION = "0.18.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -173,6 +173,46 @@ var textChanges = (config, distinctId, preview) => {
 };
 var newDistinctId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `ck_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
 
+// src/onboarding-state.ts
+var import_react = require("react");
+var none = [];
+var useOnboardingItem = (flows, id, start) => {
+  const [state, setState] = (0, import_react.useState)(() => flows && id ? flows.onboarding.item(id) : null);
+  (0, import_react.useEffect)(() => {
+    if (!flows || !id) {
+      setState(null);
+      return;
+    }
+    const up = () => {
+      const s = flows.onboarding.item(id);
+      setState(s);
+      if (s && !s.done && !s.dismissed) flows.onboarding.seen(id);
+    };
+    up();
+    return flows.subscribe(up);
+  }, [flows, id]);
+  return (0, import_react.useMemo)(
+    () => ({
+      item: state?.item ?? null,
+      steps: state?.steps ?? none,
+      done: !!state?.done,
+      dismissed: !!state?.dismissed,
+      eligible: !!state?.eligible,
+      complete: (stepId) => {
+        if (flows && id) flows.onboarding.complete(id, stepId);
+      },
+      dismiss: () => {
+        if (flows && id) flows.onboarding.dismissItem(id);
+      },
+      answer: (question, value) => {
+        if (flows && id) flows.onboarding.answerItem(id, question, value);
+      },
+      start
+    }),
+    [state, flows, id, start]
+  );
+};
+
 // src/identity.ts
 var UNSIGNED_HELP = "401: sign the user id on your server with userHash(id) from @mrrocket/sdk/next/server and pass identify(id, props, { hash }).";
 var warnUnsigned = (status, log = (m) => console.warn(m)) => {
@@ -359,7 +399,21 @@ var matchesTrigger = (trigger, event) => {
 };
 var startsOnLoad = (trigger) => /^(first (launch|visit|open|session|login|sign ?in|app open)|app (opened|launched)|on load|every visit|always)?$/i.test(trigger.trim());
 var isPageTrigger = (trigger) => trigger.trim().startsWith("/");
-var manual = (trigger) => eventSlug(trigger) === "from_a_checklist";
+var NEEDS_NEWER = "Needs tracking code 0.18.0";
+var momentOf = (f) => f.when ?? f.trigger;
+var manual = (trigger) => eventSlug(trigger) === "from_a_checklist" || eventSlug(trigger) === "from_your_code" || eventSlug(trigger) === eventSlug(NEEDS_NEWER);
+var AFTER_PREFIX = "after:";
+var afterOf = (trigger) => {
+  const t = (trigger ?? "").trim();
+  return t.toLowerCase().startsWith(AFTER_PREFIX) ? t.slice(AFTER_PREFIX.length).trim() || null : null;
+};
+var opensOf = (step) => step.opens ?? (step.startsTour ? { kind: "tour", id: step.startsTour } : void 0);
+var answerOk = (q, value) => {
+  if (!q || value == null) return false;
+  if (q.type === "choice") return (q.options ?? []).some((o) => o.id === value);
+  return value.trim().length > 0 && value.length <= 500;
+};
+var answerLabel = (q, value) => q?.type === "choice" ? q.options?.find((o) => o.id === value)?.label ?? value : value.trim();
 var videoEmbed = (url) => {
   const u = (url ?? "").trim();
   if (!/^https?:\/\//i.test(u)) return null;
@@ -425,7 +479,12 @@ var createFlows = (env) => {
   const now = () => env.now?.() ?? Date.now();
   let timer = null;
   let returnTo = null;
+  const answers = /* @__PURE__ */ new Map();
+  const drafts = /* @__PURE__ */ new Map();
+  const celebrated = /* @__PURE__ */ new Set();
+  let finaleNow = null;
   const flows = () => config?.onboarding ?? [];
+  const drawn = () => flows().filter((f) => f.shownBy !== "code");
   const flowById = (id) => id ? flows().find((f) => f.id === id) : void 0;
   const prog = (id) => {
     let p = progress.get(id);
@@ -499,6 +558,14 @@ var createFlows = (env) => {
   };
   const keyOf = (pid) => `${PROGRESS_KEY}:${pid ?? "visitor"}`;
   const eventsKeyOf = (pid) => `${PROGRESS_KEY}:events:${pid ?? "visitor"}`;
+  const answersKeyOf = (pid) => `${PROGRESS_KEY}:answers:${pid ?? "visitor"}`;
+  const celebrate = (f) => {
+    if (!f.finish || f.finish === "none" || f.shownBy === "code" || celebrated.has(f.id)) return;
+    const p = progress.get(f.id);
+    if (!p || p.dismissed || walkLine(f, nodesOf(f), p, false).at !== "end") return;
+    celebrated.add(f.id);
+    finaleNow = { kind: f.finish, key: `${f.id}:${now()}` };
+  };
   const save = () => {
     dirty = false;
     const store = env.storage?.();
@@ -514,6 +581,7 @@ var createFlows = (env) => {
       };
     try {
       store.set(keyOf(env.personId()), JSON.stringify(out));
+      if (answers.size) store.set(answersKeyOf(env.personId()), JSON.stringify(Object.fromEntries(answers)));
       if (seenEvents.size) store.set(eventsKeyOf(env.personId()), JSON.stringify([...seenEvents].slice(-200)));
     } catch {
     }
@@ -566,8 +634,17 @@ var createFlows = (env) => {
         type: "checklist",
         flow,
         items: items.map((s) => {
-          const tour = s.startsTour && s.startsTour !== flow.id ? flowById(s.startsTour) : void 0;
-          return { step: s, done: p.done.has(s.id), ...tour && nodesOf(tour).length ? { tour } : {} };
+          const o = opensOf(s);
+          const t = o && (o.kind === "tour" || o.kind === "modal") && o.id !== flow.id ? flowById(o.id) : void 0;
+          const target = t && t.shownBy !== "code" && nodesOf(t).length ? t : void 0;
+          const opens = o && (o.kind === "page" ? !!o.target.trim() : o.kind === "code" || !!target) ? o : void 0;
+          return {
+            step: s,
+            done: p.done.has(s.id),
+            ...target && o?.kind === "tour" ? { tour: target } : {},
+            ...opens ? { opens } : {},
+            ...target ? { target } : {}
+          };
         })
       };
     }
@@ -578,7 +655,16 @@ var createFlows = (env) => {
     const rest = line.slice(index + 1);
     const fork = rest.findIndex((n) => n.kind === "condition");
     const ahead = (fork < 0 ? rest : rest.slice(0, fork)).filter(isStep).length;
-    return { type: "step", flow, step, index: w.before, total: w.before + 1 + ahead, last: !ahead && fork < 0 };
+    return {
+      type: "step",
+      flow,
+      step,
+      index: w.before,
+      total: w.before + 1 + ahead,
+      last: !ahead && fork < 0,
+      // 0.18.0: a question's answer so far, and whether there is one before it to go back to.
+      ...step.kind === "question" ? { answer: drafts.get(step.id) ?? (step.question ? answers.get(step.question.key) : void 0), back: w.before > 0 } : {}
+    };
   };
   const view = () => {
     if (cancel) {
@@ -605,23 +691,25 @@ var createFlows = (env) => {
     if (ob) return ob;
     if (active && !holding) {
       const back = returnTo;
-      const ended = active;
+      const ended2 = active;
       returnTo = null;
       active = null;
       const list = back ? flowById(back.flow) : void 0;
       if (back && list) {
         const item = stepsIn(nodesOf(list)).find((s) => s.id === back.step);
         const p = prog(list.id);
-        if (item && !item.event && !progress.get(ended)?.dismissed && !p.done.has(item.id)) {
+        if (item && !item.event && !progress.get(ended2)?.dismissed && !p.done.has(item.id)) {
           markDone(p, item.id);
           record({ flow: list.id, step: item.id, kind: "checklist", action: "completed" });
+          celebrate(list);
         }
         active = list.id;
         const again = onboardingView();
         if (again) return again;
         if (!holding) active = null;
       } else if (known) {
-        const after = flowById(ended)?.trigger;
+        const was = flowById(ended2);
+        const after = was ? momentOf(was) : void 0;
         Promise.resolve().then(() => autoStart(after));
       }
     }
@@ -649,22 +737,64 @@ var createFlows = (env) => {
     emit();
     return true;
   };
-  const allowed = (f) => f.audience !== "signed_in" || !!env.personId();
+  const allowed = (f) => f.audience === "answered" ? !!f.answered && answers.get(f.answered.question) === f.answered.option : f.audience !== "signed_in" || !!env.personId();
+  const predecessorEnded = (id) => {
+    const g = flowById(id);
+    return !g || finished(g);
+  };
+  const due = (f, trigger = momentOf(f)) => {
+    const path = env.path?.();
+    const pred = afterOf(trigger);
+    if (pred) return predecessorEnded(pred);
+    if (manual(trigger)) return false;
+    if (isPageTrigger(trigger)) return path !== void 0 && pageMatches(trigger, path);
+    if (startsOnLoad(trigger)) return true;
+    for (const e of seenEvents) if (matchesTrigger(trigger, e)) return true;
+    return false;
+  };
   const autoStart = (after) => {
     if (!auto || active || !known) return;
     if (!env.personId() && !env.storage?.()) return;
     const path = env.path?.();
     const same2 = after && !manual(after) ? eventSlug(after) : "";
-    const next = flows().find(
-      (f) => (isPageTrigger(f.trigger) ? path !== void 0 && pageMatches(f.trigger, path) : startsOnLoad(f.trigger) || !!same2 && eventSlug(f.trigger) === same2) && allowed(f) && nodesOf(f).length && !finished(f)
+    const next = drawn().find(
+      (f) => (afterOf(momentOf(f)) ? predecessorEnded(afterOf(momentOf(f))) : isPageTrigger(momentOf(f)) ? path !== void 0 && pageMatches(momentOf(f), path) : startsOnLoad(momentOf(f)) || !!same2 && eventSlug(momentOf(f)) === same2) && allowed(f) && nodesOf(f).length && !finished(f)
     );
     if (next) start(next);
   };
+  const openItem = (list, stepId, target) => {
+    const p = prog(target.id);
+    p.done.clear();
+    p.at.clear();
+    p.dismissed = false;
+    returnTo = { flow: list.id, step: stepId };
+    active = target.id;
+    env.track(ONBOARDING_EVENT, { flow: target.id, action: "started", from: list.id });
+    save();
+    emit();
+  };
+  const answerStep = (flow, step, raw) => {
+    const q = step.question;
+    const value = q.type === "text" ? raw.trim().slice(0, 500) : raw;
+    answers.set(q.key, value);
+    drafts.delete(step.id);
+    markDone(prog(flow.id), step.id);
+    env.track(ONBOARDING_EVENT, { flow: flow.id, step: step.id, kind: "question", action: "completed", question: q.key, answer: value, label: answerLabel(q, value) });
+    celebrate(flow);
+    save();
+  };
+  const ended = (f) => {
+    save();
+    if (finished(f)) Promise.resolve().then(() => autoStart());
+    emit();
+  };
   const refresh = () => {
     const pid = env.personId();
     if (progressFor !== null && progressFor !== pid) {
       progress.clear();
       seenEvents.clear();
+      answers.clear();
+      drafts.clear();
       handled.clear();
       active = null;
       returnTo = null;
@@ -681,6 +811,10 @@ var createFlows = (env) => {
           if (seen) {
             for (const e of JSON.parse(seen)) if (typeof e === "string") seenEvents.add(e);
           }
+          const said = await store.get(answersKeyOf(pid));
+          if (said) {
+            for (const [k, v] of Object.entries(JSON.parse(said))) if (typeof v === "string") answers.set(k, v);
+          }
         } catch {
         }
       }
@@ -691,6 +825,7 @@ var createFlows = (env) => {
         if (state && env.personId() === pid) {
           merge(state.onboarding);
           for (const e of state.events ?? []) if (typeof e === "string") seenEvents.add(eventSlug(e));
+          for (const [k, v] of Object.entries(state.answers ?? {})) if (typeof v === "string" && !answers.has(k)) answers.set(k, v);
           messages = (state.messages ?? []).filter((m) => m && m.id && m.title);
         }
       }
@@ -784,27 +919,33 @@ var createFlows = (env) => {
       if (fresh) seenEvents.add(slug);
       const flow = flowById(active);
       let ticked = false;
-      if (flow) {
-        const p = prog(flow.id);
-        for (const s of stepsIn(nodesOf(flow)))
+      const lists = [...flow ? [flow] : [], ...flows().filter((f) => f.shownBy === "code" && f.id !== flow?.id)];
+      for (const l of lists) {
+        const p = prog(l.id);
+        let here = false;
+        for (const s of stepsIn(nodesOf(l)))
           if (s.kind === "checklist" && s.event && !p.done.has(s.id) && matchesTrigger(s.event, name)) {
             markDone(p, s.id);
-            ticked = true;
-            env.track(ONBOARDING_EVENT, { flow: flow.id, step: s.id, kind: s.kind, action: "completed" });
+            here = true;
+            env.track(ONBOARDING_EVENT, { flow: l.id, step: s.id, kind: s.kind, action: "completed" });
           }
+        if (here) {
+          ticked = true;
+          celebrate(l);
+        }
       }
-      if (ticked || fresh && flow) {
+      if (ticked || fresh && (flow || lists.length)) {
         save();
         emit();
       } else if (fresh) save();
       if (!auto || !env.personId() && !env.storage?.()) return;
-      const next = flows().find((f) => nodesOf(f).length && !manual(f.trigger) && matchesTrigger(f.trigger, name) && allowed(f) && !finished(f));
+      const next = drawn().find((f) => nodesOf(f).length && !manual(momentOf(f)) && matchesTrigger(momentOf(f), name) && allowed(f) && !finished(f));
       if (next) start(next);
     },
     openCancelFlow,
     startOnboarding: (id) => {
-      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !manual(x.trigger) && !finished(x));
-      if (!f || !nodesOf(f).length) return false;
+      const f = id ? flowById(id) : drawn().find((x) => nodesOf(x).length && !manual(momentOf(x)) && !afterOf(momentOf(x)) && !finished(x));
+      if (!f || !nodesOf(f).length || f.shownBy === "code") return false;
       const p = prog(f.id);
       p.dismissed = false;
       return start(f);
@@ -895,8 +1036,17 @@ var createFlows = (env) => {
       next: () => {
         const v = onboardingView();
         if (v?.type !== "step") return;
+        if (v.step.kind === "question") {
+          const q = v.step.question;
+          const a = drafts.get(v.step.id) ?? (q ? answers.get(q.key) : void 0);
+          if (!q || !answerOk(q, a)) return;
+          answerStep(v.flow, v.step, a);
+          emit();
+          return;
+        }
         markDone(prog(v.flow.id), v.step.id);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "completed" });
+        celebrate(v.flow);
         save();
         emit();
         const url = v.step.kind === "modal" ? safeUrl(v.step.url) : void 0;
@@ -909,6 +1059,7 @@ var createFlows = (env) => {
         if (!item || item.done) return;
         markDone(prog(v.flow.id), stepId);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
+        celebrate(v.flow);
         save();
         emit();
       },
@@ -925,20 +1076,112 @@ var createFlows = (env) => {
       startTour: (stepId) => {
         const v = onboardingView();
         if (v?.type !== "checklist") return false;
-        const tour = v.items.find((i) => i.step.id === stepId)?.tour;
-        if (!tour) return false;
-        const p = prog(tour.id);
-        p.done.clear();
-        p.at.clear();
-        p.dismissed = false;
-        returnTo = { flow: v.flow.id, step: stepId };
-        active = tour.id;
-        env.track(ONBOARDING_EVENT, { flow: tour.id, action: "started", from: v.flow.id });
+        const target = v.items.find((i) => i.step.id === stepId)?.target;
+        if (!target) return false;
+        openItem(v.flow, stepId, target);
+        return true;
+      },
+      open: (stepId) => {
+        const v = onboardingView();
+        if (v?.type !== "checklist") return false;
+        const it = v.items.find((i) => i.step.id === stepId);
+        const o = it?.opens;
+        if (!it || !o) return false;
+        env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "opened", opens: o.kind });
+        if ((o.kind === "tour" || o.kind === "modal") && it.target) {
+          openItem(v.flow, stepId, it.target);
+          return true;
+        }
+        if (!it.done && !it.step.event) {
+          markDone(prog(v.flow.id), stepId);
+          env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
+          celebrate(v.flow);
+        }
         save();
         emit();
+        if (o.kind === "page") env.navigate?.(o.target.trim());
+        else env.task?.(stepId, v.flow);
         return true;
+      },
+      answer: (value) => {
+        const v = onboardingView();
+        if (v?.type !== "step" || v.step.kind !== "question") return;
+        drafts.set(v.step.id, String(value).slice(0, 500));
+        emit();
+      },
+      back: () => {
+        const v = onboardingView();
+        if (v?.type !== "step" || v.step.kind !== "question" || !v.back) return;
+        const line = stepsIn(nodesOf(v.flow));
+        const at = line.findIndex((s) => s.id === v.step.id);
+        const p = prog(v.flow.id);
+        for (let i = at - 1; i >= 0; i--)
+          if (p.done.has(line[i].id)) {
+            p.done.delete(line[i].id);
+            p.at.delete(line[i].id);
+            break;
+          }
+        save();
+        emit();
+      },
+      item: (id) => {
+        const f = flowById(id);
+        if (!f) return null;
+        const p = progress.get(f.id);
+        const steps = stepsIn(nodesOf(f)).map((s) => {
+          const a = s.question ? answers.get(s.question.key) : void 0;
+          return { ...s, done: !!p?.done.has(s.id), ...a !== void 0 ? { answer: a } : {} };
+        });
+        const done = steps.length > 0 && steps.every((s) => s.done);
+        const dismissed = !!p?.dismissed;
+        return { item: f, steps, done, dismissed, eligible: !done && !dismissed && allowed(f) && due(f) };
+      },
+      seen: (id) => {
+        const f = flowById(id);
+        if (!f || f.shownBy !== "code" || !known) return;
+        if (!shown.has(`f:${f.id}`)) {
+          shown.add(`f:${f.id}`);
+          env.track(ONBOARDING_EVENT, { flow: f.id, action: "started" });
+        }
+        const p = progress.get(f.id);
+        for (const s of stepsIn(nodesOf(f)))
+          if (!p?.done.has(s.id) && !shown.has(`s:${s.id}`)) {
+            shown.add(`s:${s.id}`);
+            env.track(ONBOARDING_EVENT, { flow: f.id, step: s.id, kind: s.kind, action: "shown" });
+            if (s.kind !== "checklist") break;
+          }
+      },
+      complete: (id, stepId) => {
+        const f = flowById(id);
+        const s = f && stepsIn(nodesOf(f)).find((x) => x.id === stepId);
+        if (!f || !s || s.kind === "question") return;
+        const p = prog(f.id);
+        if (p.done.has(s.id)) return;
+        markDone(p, s.id);
+        env.track(ONBOARDING_EVENT, { flow: f.id, step: s.id, kind: s.kind, action: "completed" });
+        ended(f);
+      },
+      dismissItem: (id) => {
+        const f = flowById(id);
+        if (!f) return;
+        const p = prog(f.id);
+        if (p.dismissed) return;
+        p.dismissed = true;
+        env.track(ONBOARDING_EVENT, { flow: f.id, action: "dismissed" });
+        if (active === f.id) active = null;
+        ended(f);
+      },
+      answerItem: (id, question, value) => {
+        const f = flowById(id);
+        const s = f && stepsIn(nodesOf(f)).find((x) => x.kind === "question" && (x.id === question || x.question?.key === question));
+        if (!f || !s?.question || !answerOk(s.question, value)) return;
+        answerStep(f, s, value);
+        ended(f);
       }
     },
+    finale: () => finaleNow,
+    accent: () => config?.onboardingAccent,
+    answers: () => Object.fromEntries(answers),
     message: {
       click: () => {
         const v = view();
@@ -1372,7 +1615,14 @@ var createClient = (options, deps) => {
       set: (k, v) => void set(k, v)
     } : null,
     openUrl: deps.openUrl,
-    fetchInApp: (id) => fetchInApp(id)
+    fetchInApp: (id) => fetchInApp(id),
+    // 0.18.0: a task's page or screen goes to the app's navigator; without one only a link with a scheme opens.
+    navigate: (target) => {
+      if (options.onNavigate) return options.onNavigate(target);
+      if (/^[a-z][a-z0-9+.-]*:/i.test(target) && !/^(javascript|data|vbscript):/i.test(target)) deps.openUrl?.(target);
+      else warn(`A checklist task opens "${target}": pass onNavigate to MRRocketProvider to open screens and paths.`);
+    },
+    task: (taskId, item) => options.onTask?.(taskId, item)
   });
   const refreshFlows = () => {
     if (!isReady || closed) return;
@@ -2010,30 +2260,216 @@ var activeRouteName = (state) => {
 };
 
 // src/native/flows-view.ts
-var import_react = require("react");
+var import_react2 = require("react");
+
+// src/icons.ts
+var FLOW_ICONS = {
+  check: { label: "Check", paths: ["M5 12.5l4.5 4.5L19 7.5"], emoji: "\u2705" },
+  star: { label: "Star", paths: ["M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"], emoji: "\u2B50" },
+  rocket: {
+    label: "Rocket",
+    paths: ["M12 3c3 2 4.5 5.5 4 10l-2 3h-4l-2-3c-.5-4.5 1-8 4-10z", "M8 13.5l-3 3 3.5.5", "M16 13.5l3 3-3.5.5", "M13.5 9.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z", "M11 19.5v1.5M13 19.5v1.5"],
+    emoji: "\u{1F680}"
+  },
+  user: { label: "Person", paths: ["M15.5 8a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z", "M5 20c.8-3.5 3.6-5.5 7-5.5s6.2 2 7 5.5"], emoji: "\u{1F464}" },
+  users: {
+    label: "Team",
+    paths: ["M13 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z", "M3.5 19c.6-3 3-4.8 6.5-4.8s5.9 1.8 6.5 4.8", "M16 5.2a3 3 0 0 1 0 5.6", "M18 14.6c1.5.6 2.4 2 2.7 4.4"],
+    emoji: "\u{1F465}"
+  },
+  settings: {
+    label: "Settings",
+    paths: ["M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7", "M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0z", "M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"],
+    emoji: "\u2699\uFE0F"
+  },
+  bell: { label: "Bell", paths: ["M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z", "M10 20.5a2 2 0 0 0 4 0"], emoji: "\u{1F514}" },
+  mail: { label: "Mail", paths: ["M4 6h16v12H4z", "M4 7l8 6 8-6"], emoji: "\u2709\uFE0F" },
+  chat: { label: "Chat", paths: ["M4 5h16v11H9l-5 4z"], emoji: "\u{1F4AC}" },
+  heart: { label: "Heart", paths: ["M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"], emoji: "\u2764\uFE0F" },
+  flag: { label: "Flag", paths: ["M5 21V4", "M5 4h11l-2 4 2 4H5"], emoji: "\u{1F6A9}" },
+  bolt: { label: "Bolt", paths: ["M13 3L5 13.5h6L10 21l8-10.5h-6z"], emoji: "\u26A1" },
+  book: { label: "Book", paths: ["M4 5.5C6.5 4 9.5 4 12 6c2.5-2 5.5-2 8-.5V19c-2.5-1.5-5.5-1.5-8 .5-2.5-2-5.5-2-8-.5z", "M12 6v13.5"], emoji: "\u{1F4D6}" },
+  calendar: { label: "Calendar", paths: ["M4 6h16v14H4z", "M4 10h16", "M8 3.5v4M16 3.5v4"], emoji: "\u{1F4C5}" },
+  camera: { label: "Camera", paths: ["M4 8h3.5L9 5.5h6L16.5 8H20v11H4z", "M15.5 13a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"], emoji: "\u{1F4F7}" },
+  cart: { label: "Cart", paths: ["M3.5 4.5H6l2 10h10l2-7H7", "M9.5 19.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z", "M18.5 19.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"], emoji: "\u{1F6D2}" },
+  chart: { label: "Chart", paths: ["M4 20h16", "M7 16v-4M12 16V8M17 16V9"], emoji: "\u{1F4CA}" },
+  gift: { label: "Gift", paths: ["M4 10h16v10H4z", "M3 7h18v3H3z", "M12 7v13", "M12 7c-1.5-3-5-3-5-1s3.5 1 5 1z", "M12 7c1.5-3 5-3 5-1s-3.5 1-5 1z"], emoji: "\u{1F381}" },
+  home: { label: "Home", paths: ["M4 11l8-7 8 7", "M6 9.5V20h12V9.5", "M10 20v-6h4v6"], emoji: "\u{1F3E0}" },
+  link: { label: "Link", paths: ["M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1", "M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"], emoji: "\u{1F517}" },
+  lock: { label: "Lock", paths: ["M6 11h12v9H6z", "M8.5 11V8a3.5 3.5 0 0 1 7 0v3"], emoji: "\u{1F512}" },
+  pencil: { label: "Pencil", paths: ["M4 20l1-4L16 5l3 3L8 19z", "M14 7l3 3"], emoji: "\u270F\uFE0F" },
+  plus: { label: "Plus", paths: ["M12 5v14M5 12h14"], emoji: "\u2795" },
+  search: { label: "Search", paths: ["M16 10.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z", "M14.5 14.5L20 20"], emoji: "\u{1F50D}" },
+  upload: { label: "Upload", paths: ["M12 15V4", "M7.5 8.5L12 4l4.5 4.5", "M4 15v5h16v-5"], emoji: "\u2B06\uFE0F" },
+  play: { label: "Play", paths: ["M8 5l11 7-11 7z"], emoji: "\u25B6\uFE0F" },
+  sparkle: { label: "Sparkle", paths: ["M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z", "M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"], emoji: "\u2728" },
+  globe: {
+    label: "Globe",
+    paths: ["M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0z", "M4 12h16", "M12 4c2.2 2.2 3.3 4.9 3.3 8s-1.1 5.8-3.3 8c-2.2-2.2-3.3-4.9-3.3-8S9.8 6.2 12 4z"],
+    emoji: "\u{1F310}"
+  }
+};
+var FLOW_ICON_NAMES = Object.keys(FLOW_ICONS);
+var iconOf = (icon) => {
+  if (!icon) return void 0;
+  if (icon.kind === "builtin") return icon.name && FLOW_ICONS[icon.name] ? icon : void 0;
+  if (icon.kind === "emoji") return icon.value && icon.value.trim() && [...icon.value.trim()].length <= 8 ? icon : void 0;
+  if (icon.kind === "image") return icon.url && /^https?:\/\//i.test(icon.url) ? icon : void 0;
+  return void 0;
+};
+
+// src/native/flows-view.ts
 var RN = require("react-native");
+var svg = (() => {
+  try {
+    return require("react-native-svg");
+  } catch {
+    return null;
+  }
+})();
+var iconNode = (icon, size, color) => {
+  const i = iconOf(icon);
+  if (!i) return null;
+  if (i.kind === "image")
+    return RN.Image ? (0, import_react2.createElement)(RN.Image, { source: { uri: i.url }, accessibilityElementsHidden: true, style: { width: size, height: size, borderRadius: size / 4 } }) : null;
+  const Svg = svg?.Svg ?? svg?.default;
+  if (i.kind === "builtin" && Svg && svg?.Path)
+    return (0, import_react2.createElement)(
+      Svg,
+      { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
+      ...FLOW_ICONS[i.name].paths.map((d, k) => (0, import_react2.createElement)(svg.Path, { key: k, d }))
+    );
+  return (0, import_react2.createElement)(RN.Text, { style: { fontSize: size * 0.8, lineHeight: size, textAlign: "center", width: size } }, i.kind === "emoji" ? i.value : FLOW_ICONS[i.name].emoji);
+};
+var FINALE_COLORS = ["#f59e0b", "#10b981", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899"];
+var finaleBits = (kind, accent) => {
+  const rnd = (a, b) => a + Math.random() * (b - a);
+  const colors = [accent, accent, ...FINALE_COLORS];
+  const pick = () => colors[Math.floor(Math.random() * colors.length)];
+  if (kind === "confetti")
+    return Array.from({ length: 48 }, (_, i) => ({
+      x: i % 2 ? 12 : 82,
+      y: 92,
+      dx: (i % 2 ? 1 : -1) * rnd(40, 200),
+      mid: -rnd(380, 620),
+      dy: -rnd(120, 300),
+      size: rnd(7, 11),
+      rot: rnd(-540, 540),
+      color: pick(),
+      delay: rnd(0, 160),
+      life: rnd(1500, 2e3),
+      shape: "rect"
+    }));
+  if (kind === "fireworks")
+    return Array.from({ length: 3 }, (_, b) => {
+      const x = rnd(20, 75);
+      const y = rnd(18, 45);
+      const color = pick();
+      return Array.from({ length: 18 }, (_2, i) => {
+        const a = Math.PI * 2 * i / 18;
+        const r = rnd(70, 130);
+        return { x, y, dx: Math.cos(a) * r, mid: Math.sin(a) * r * 0.8, dy: Math.sin(a) * r + 40, size: 5, rot: 0, color, delay: b * 320, life: rnd(900, 1200), shape: "dot" };
+      });
+    }).flat();
+  return Array.from({ length: 22 }, () => ({
+    x: rnd(6, 88),
+    y: rnd(20, 80),
+    dx: 0,
+    mid: -rnd(10, 25),
+    dy: -rnd(30, 60),
+    size: rnd(16, 28),
+    rot: rnd(-40, 40),
+    color: pick(),
+    delay: rnd(0, 600),
+    life: rnd(900, 1300),
+    shape: "star"
+  }));
+};
+var Finale = ({ kind, accent }) => {
+  const A = RN.Animated;
+  const [bits] = (0, import_react2.useState)(() => finaleBits(kind, accent));
+  const [values] = (0, import_react2.useState)(() => A ? bits.map(() => new A.Value(0)) : []);
+  const [on, setOn] = (0, import_react2.useState)(!!A);
+  (0, import_react2.useEffect)(() => {
+    if (!A) return;
+    let stopped = false;
+    let run = null;
+    const go = () => {
+      if (stopped) return;
+      run = A.parallel(values.map((v, i) => A.timing(v, { toValue: 1, duration: bits[i].life, delay: bits[i].delay, useNativeDriver: true })));
+      run.start(() => !stopped && setOn(false));
+    };
+    Promise.resolve(RN.AccessibilityInfo?.isReduceMotionEnabled?.()).then((reduce) => reduce ? !stopped && setOn(false) : go()).catch(go);
+    return () => {
+      stopped = true;
+      run?.stop();
+    };
+  }, [A, bits, values]);
+  if (!on || !A) return null;
+  return (0, import_react2.createElement)(
+    RN.View,
+    { pointerEvents: "none", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 } },
+    ...bits.map((b, i) => {
+      const t = values[i];
+      const fade = t.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1, 0] });
+      const scale = b.shape === "star" ? t.interpolate({ inputRange: [0, 0.25, 1], outputRange: [0.2, 1.15, 0.6] }) : 1;
+      return (0, import_react2.createElement)(
+        A.View,
+        {
+          key: i,
+          style: {
+            position: "absolute",
+            left: `${b.x}%`,
+            top: `${b.y}%`,
+            width: b.size,
+            height: b.shape === "rect" ? b.size * 0.45 : b.size,
+            borderRadius: b.shape === "dot" ? b.size / 2 : 2,
+            backgroundColor: b.shape === "star" ? "transparent" : b.color,
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: fade,
+            transform: [
+              { translateX: t.interpolate({ inputRange: [0, 1], outputRange: [0, b.dx] }) },
+              { translateY: t.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, b.mid, b.dy] }) },
+              { rotate: t.interpolate({ inputRange: [0, 1], outputRange: ["0deg", `${b.rot}deg`] }) },
+              { scale }
+            ]
+          }
+        },
+        b.shape === "star" ? (0, import_react2.createElement)(RN.Text, { style: { color: b.color, fontSize: b.size, lineHeight: b.size } }, "\u2605") : null
+      );
+    })
+  );
+};
 var LIGHT = { bg: "#ffffff", fg: "#1c1d20", muted: "#5d6068", soft: "#f4f5f7", line: "#e4e5e8" };
 var DARK = { bg: "#17181b", fg: "#f1f2f4", muted: "#a9acb3", soft: "#232428", line: "#2e2f35" };
 var months = (n) => `${n} ${n === 1 ? "month" : "months"}`;
-var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
+var MRRocketFlows = (props) => {
+  const [, setTick] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => props.flows.subscribe(() => setTick((t) => t + 1)), [props.flows]);
+  const fin = props.flows.finale?.() ?? null;
+  const accent = props.appearance?.accent ?? props.flows.accent?.() ?? "#3f76ff";
+  return (0, import_react2.createElement)(import_react2.Fragment, null, (0, import_react2.createElement)(FlowsBody, props), fin ? (0, import_react2.createElement)(Finale, { key: fin.key, kind: fin.kind, accent }) : null);
+};
+var FlowsBody = ({ flows, paywall, appearance = {} }) => {
   const scheme = RN.useColorScheme?.();
   const dark = appearance.theme === "dark" || (appearance.theme ?? "auto") === "auto" && scheme === "dark";
-  const p = { ...dark ? DARK : LIGHT, accent: appearance.accent ?? "#3f76ff", danger: "#d92d20" };
-  const [, setTick] = (0, import_react.useState)(0);
-  (0, import_react.useEffect)(() => flows.subscribe(() => setTick((t) => t + 1)), [flows]);
-  (0, import_react.useEffect)(() => paywall?.subscribe(() => setTick((t) => t + 1)), [paywall]);
+  const p = { ...dark ? DARK : LIGHT, accent: appearance.accent ?? flows.accent?.() ?? "#3f76ff", danger: "#d92d20" };
+  const [, setTick] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => flows.subscribe(() => setTick((t) => t + 1)), [flows]);
+  (0, import_react2.useEffect)(() => paywall?.subscribe(() => setTick((t) => t + 1)), [paywall]);
   const pw = paywall?.view() ?? null;
   const v = flows.view();
-  const [comment, setComment] = (0, import_react.useState)("");
+  const [comment, setComment] = (0, import_react2.useState)("");
   const screen = v?.type === "cancel" ? v.screen : null;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!screen) setComment("");
   }, [screen]);
   if (!v && !pw) return null;
-  const text2 = (children, style = {}) => (0, import_react.createElement)(RN.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
+  const text2 = (children, style = {}) => (0, import_react2.createElement)(RN.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
   const muted = (children, style = {}) => text2(children, { color: p.muted, fontSize: 13, ...style });
-  const title = (children) => (0, import_react.createElement)(RN.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 18, fontWeight: "700" } }, children);
-  const btn = (label, kind, onPress, disabled = false) => (0, import_react.createElement)(
+  const title = (children) => (0, import_react2.createElement)(RN.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 18, fontWeight: "700" } }, children);
+  const btn = (label, kind, onPress, disabled = false) => (0, import_react2.createElement)(
     RN.Pressable,
     {
       key: label,
@@ -2057,12 +2493,12 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
       fontWeight: kind === "quiet" ? "500" : "600"
     })
   );
-  const close = (label, onPress) => (0, import_react.createElement)(
+  const close = (label, onPress) => (0, import_react2.createElement)(
     RN.Pressable,
     { onPress, accessibilityRole: "button", accessibilityLabel: label, hitSlop: 12, style: { marginLeft: "auto", padding: 4 } },
     text2("\xD7", { fontSize: 22, color: p.muted })
   );
-  const card = (children, style = {}) => (0, import_react.createElement)(
+  const card = (children, style = {}) => (0, import_react2.createElement)(
     RN.View,
     {
       style: {
@@ -2079,16 +2515,16 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     },
     ...children
   );
-  const sheet = (children, onClose) => (0, import_react.createElement)(
+  const sheet = (children, onClose) => (0, import_react2.createElement)(
     RN.Modal,
     { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose },
-    (0, import_react.createElement)(
+    (0, import_react2.createElement)(
       RN.View,
       { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.4)", justifyContent: "flex-end" } },
       card(children, { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, paddingBottom: 34 })
     )
   );
-  const input = (placeholder, value = comment, onChange = setComment) => (0, import_react.createElement)(RN.TextInput, {
+  const input = (placeholder, value = comment, onChange = setComment) => (0, import_react2.createElement)(RN.TextInput, {
     value,
     onChangeText: onChange,
     placeholder,
@@ -2103,19 +2539,19 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     const host = paywall;
     return sheet(
       [
-        (0, import_react.createElement)(
+        (0, import_react2.createElement)(
           RN.View,
           { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
           ...w.total > 1 ? Array.from(
             { length: w.total },
-            (_, i) => (0, import_react.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= w.index ? p.accent : p.line } })
+            (_, i) => (0, import_react2.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= w.index ? p.accent : p.line } })
           ) : [],
           close("Close", host.close)
         ),
         title(pg.title),
         pg.body ? muted(pg.body, { fontSize: 15 }) : null,
         ...pg.kind === "benefits" ? (pg.items ?? []).map(
-          (item, i) => (0, import_react.createElement)(
+          (item, i) => (0, import_react2.createElement)(
             RN.View,
             { key: `b${i}`, style: { flexDirection: "row", gap: 10, alignItems: "flex-start" } },
             text2("\u2713", { color: p.accent, fontWeight: "700" }),
@@ -2123,13 +2559,13 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
           )
         ) : [],
         ...pg.kind === "proof" ? (pg.quotes ?? []).map(
-          (q, i) => (0, import_react.createElement)(RN.View, { key: `q${i}`, style: { backgroundColor: p.soft, borderRadius: 12, padding: 12, gap: 6 } }, text2(q.text), q.by ? muted(q.by) : null)
+          (q, i) => (0, import_react2.createElement)(RN.View, { key: `q${i}`, style: { backgroundColor: p.soft, borderRadius: 12, padding: 12, gap: 6 } }, text2(q.text), q.by ? muted(q.by) : null)
         ) : [],
-        pg.kind === "plans" ? (0, import_react.createElement)(
+        pg.kind === "plans" ? (0, import_react2.createElement)(
           RN.View,
           { key: "plans", accessibilityRole: "radiogroup", style: { gap: 6 } },
           ...w.plans.map(
-            (plan) => (0, import_react.createElement)(
+            (plan) => (0, import_react2.createElement)(
               RN.Pressable,
               {
                 key: plan.id,
@@ -2149,7 +2585,7 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
                   gap: 10
                 }
               },
-              (0, import_react.createElement)(RN.View, { style: { flex: 1 } }, text2(plan.name, { fontWeight: "600" }), plan.note ? muted(plan.note) : null),
+              (0, import_react2.createElement)(RN.View, { style: { flex: 1 } }, text2(plan.name, { fontWeight: "600" }), plan.note ? muted(plan.note) : null),
               text2(plan.price, { fontWeight: "700" })
             )
           )
@@ -2164,22 +2600,22 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
   if (pw) return paywallSheet(pw);
   if (!v) return null;
   if (v.type === "cancel") {
-    const top = (0, import_react.createElement)(
+    const top = (0, import_react2.createElement)(
       RN.View,
       { style: { flexDirection: "row", alignItems: "center", gap: 4 } },
       ...v.steps > 1 ? Array.from(
         { length: v.steps },
-        (_, i) => (0, import_react.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i < v.step ? p.accent : p.line } })
+        (_, i) => (0, import_react2.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i < v.step ? p.accent : p.line } })
       ) : [],
       close("Close", flows.cancel.close)
     );
     const error = v.error ? text2(v.error, { color: p.danger, fontSize: 13 }) : null;
     let body = [];
-    const choices = (items) => (0, import_react.createElement)(
+    const choices = (items) => (0, import_react2.createElement)(
       RN.ScrollView,
       { style: { maxHeight: 320 }, contentContainerStyle: { gap: 6 }, accessibilityRole: "radiogroup" },
       ...items.map(
-        (c) => (0, import_react.createElement)(
+        (c) => (0, import_react2.createElement)(
           RN.Pressable,
           {
             key: c.key,
@@ -2224,7 +2660,7 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
       body = [
         label ? muted(`You said: ${label}`) : null,
         title(o.headline),
-        detail ? (0, import_react.createElement)(RN.View, { style: { backgroundColor: p.soft, borderRadius: 10, padding: 12 } }, text2(detail, { fontWeight: "600" })) : null,
+        detail ? (0, import_react2.createElement)(RN.View, { style: { backgroundColor: p.soft, borderRadius: 10, padding: 12 } }, text2(detail, { fontWeight: "600" })) : null,
         o.kind === "contact" ? input("What would make you stay?") : null,
         btn(v.busy ? "One moment\u2026" : offerButton(o), "primary", () => flows.cancel.accept(comment), v.busy),
         btn("No thanks, continue cancelling", "quiet", flows.cancel.decline, v.busy)
@@ -2243,7 +2679,7 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     const m2 = mediaOf(s);
     if (!m2) return null;
     if (m2.kind === "image")
-      return RN.Image ? (0, import_react.createElement)(RN.Image, {
+      return RN.Image ? (0, import_react2.createElement)(RN.Image, {
         key: "media",
         source: { uri: m2.url },
         accessibilityLabel: m2.alt,
@@ -2255,15 +2691,75 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     return RN.Linking ? btn("\u25B6 Watch the video", "secondary", () => void RN.Linking?.openURL(open).catch(() => {
     })) : null;
   };
+  if (v.type === "step" && v.step.kind === "question") {
+    const s = v.step;
+    const q = s.question;
+    const ok = answerOk(q, v.answer);
+    return sheet(
+      [
+        (0, import_react2.createElement)(
+          RN.View,
+          { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
+          ...v.total > 1 ? Array.from(
+            { length: v.total },
+            (_, i) => (0, import_react2.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= v.index ? p.accent : p.line } })
+          ) : [],
+          close("Close", flows.onboarding.dismiss)
+        ),
+        v.index === 0 && v.flow.icon ? (0, import_react2.createElement)(RN.View, { key: "icon" }, iconNode(v.flow.icon, 36, p.accent)) : null,
+        title(s.title),
+        s.body ? muted(s.body, { fontSize: 15 }) : null,
+        q?.type === "choice" ? (0, import_react2.createElement)(
+          RN.ScrollView,
+          { key: "opts", style: { maxHeight: 320 }, contentContainerStyle: { gap: 6 }, accessibilityRole: "radiogroup" },
+          ...(q.options ?? []).map(
+            (o) => (0, import_react2.createElement)(
+              RN.Pressable,
+              {
+                key: o.id,
+                onPress: () => flows.onboarding.answer(o.id),
+                accessibilityRole: "radio",
+                accessibilityState: { checked: v.answer === o.id },
+                style: {
+                  minHeight: 44,
+                  paddingHorizontal: 12,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: v.answer === o.id ? p.accent : p.line,
+                  backgroundColor: v.answer === o.id ? p.soft : p.bg,
+                  justifyContent: "center"
+                }
+              },
+              text2(o.label, { fontWeight: "500" })
+            )
+          )
+        ) : q ? (0, import_react2.createElement)(RN.TextInput, {
+          key: "answer",
+          value: v.answer ?? "",
+          onChangeText: (t) => flows.onboarding.answer(t),
+          onSubmitEditing: flows.onboarding.next,
+          placeholder: q.placeholder || "Your answer",
+          placeholderTextColor: p.muted,
+          maxLength: 500,
+          accessibilityLabel: s.title,
+          style: { height: 44, borderWidth: 1, borderColor: p.line, borderRadius: 10, paddingHorizontal: 12, color: p.fg }
+        }) : null,
+        btn(s.button || (v.last ? "Done" : "Continue"), "primary", flows.onboarding.next, !ok),
+        v.back ? btn("Back", "quiet", flows.onboarding.back) : null
+      ],
+      flows.onboarding.dismiss
+    );
+  }
   if (v.type === "step")
     return sheet(
       [
-        (0, import_react.createElement)(
+        (0, import_react2.createElement)(
           RN.View,
           { style: { flexDirection: "row", alignItems: "center" } },
           v.total > 1 ? muted(`Step ${v.index + 1} of ${v.total}`) : null,
           close("Close the tour", flows.onboarding.dismiss)
         ),
+        v.step.kind === "modal" && v.flow.icon ? (0, import_react2.createElement)(RN.View, { key: "icon" }, iconNode(v.flow.icon, 36, p.accent)) : null,
         media(v.step),
         title(v.step.title),
         v.step.body ? muted(v.step.body, { fontSize: 15 }) : null,
@@ -2273,11 +2769,11 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     );
   if (v.type === "checklist") {
     const done = v.items.filter((i) => i.done).length;
-    return (0, import_react.createElement)(
+    return (0, import_react2.createElement)(
       RN.View,
       { pointerEvents: "box-none", style: { position: "absolute", left: 12, right: 12, bottom: 28 } },
       card([
-        (0, import_react.createElement)(
+        (0, import_react2.createElement)(
           RN.View,
           { key: "t", style: { flexDirection: "row", alignItems: "center" } },
           title(v.flow.name),
@@ -2285,18 +2781,19 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
         ),
         muted(`${done} of ${v.items.length} done`),
         ...v.items.map(
-          ({ step, done: d, tour }) => (0, import_react.createElement)(
+          ({ step, done: d, opens }) => (0, import_react2.createElement)(
             RN.Pressable,
             {
               key: step.id,
-              // 0.17.0: an item that starts a tour opens it; finishing the tour ticks it.
-              disabled: d || !!step.event && !tour,
-              onPress: () => tour ? flows.onboarding.startTour(step.id) : flows.onboarding.check(step.id),
-              accessibilityRole: tour && !d ? "button" : "checkbox",
+              // 0.17.0/0.18.0: a task that opens something (a tour, a modal, a screen, the app's code) does it;
+              // a finished tour or modal ticks it, a screen or the app's code once opened (unless an event does).
+              disabled: d || !!step.event && !opens,
+              onPress: () => opens ? flows.onboarding.open(step.id) : flows.onboarding.check(step.id),
+              accessibilityRole: opens && !d ? "button" : "checkbox",
               accessibilityState: { checked: d },
               style: { flexDirection: "row", gap: 10, alignItems: "flex-start", paddingVertical: 6 }
             },
-            (0, import_react.createElement)(
+            (0, import_react2.createElement)(
               RN.View,
               {
                 style: {
@@ -2312,7 +2809,8 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
               },
               d ? text2("\u2713", { color: "#fff", fontSize: 12 }) : null
             ),
-            (0, import_react.createElement)(
+            step.icon ? iconNode(step.icon, 20, p.accent) : null,
+            (0, import_react2.createElement)(
               RN.View,
               { style: { flex: 1 } },
               text2(step.title, { fontWeight: "600", color: d ? p.muted : p.fg, textDecorationLine: d ? "line-through" : "none" }),
@@ -2325,14 +2823,14 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
   }
   const m = v.message;
   if (m.style === "banner")
-    return (0, import_react.createElement)(
+    return (0, import_react2.createElement)(
       RN.View,
       { pointerEvents: "box-none", style: { position: "absolute", left: 12, right: 12, top: 56 } },
       card([
-        (0, import_react.createElement)(
+        (0, import_react2.createElement)(
           RN.View,
           { key: "t", style: { flexDirection: "row", alignItems: "center", gap: 8 } },
-          (0, import_react.createElement)(RN.View, { style: { flex: 1 } }, text2(m.title, { fontWeight: "700" }), m.body ? muted(m.body) : null),
+          (0, import_react2.createElement)(RN.View, { style: { flex: 1 } }, text2(m.title, { fontWeight: "700" }), m.body ? muted(m.body) : null),
           close("Dismiss", flows.message.dismiss)
         ),
         m.button ? btn(m.button, "primary", flows.message.click) : null
@@ -2340,7 +2838,7 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
     );
   return sheet(
     [
-      (0, import_react.createElement)(RN.View, { key: "t", style: { flexDirection: "row" } }, close("Dismiss", flows.message.dismiss)),
+      (0, import_react2.createElement)(RN.View, { key: "t", style: { flexDirection: "row" } }, close("Dismiss", flows.message.dismiss)),
       title(m.title),
       m.body ? muted(m.body, { fontSize: 15 }) : null,
       m.button ? btn(m.button, "primary", flows.message.click) : null
@@ -2523,7 +3021,7 @@ var optionalModules = () => ({
 });
 
 // src/native/widgets-view.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var RN3 = require("react-native");
 var usePalette = (appearance = {}) => {
   const scheme = RN3.useColorScheme?.();
@@ -2531,10 +3029,10 @@ var usePalette = (appearance = {}) => {
   return { ...dark ? DARK : LIGHT, accent: appearance.accent ?? "#3f76ff", danger: "#d92d20" };
 };
 var kit = (p) => {
-  const text2 = (children, style = {}) => (0, import_react2.createElement)(RN3.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
+  const text2 = (children, style = {}) => (0, import_react3.createElement)(RN3.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
   const muted = (children, style = {}) => text2(children, { color: p.muted, fontSize: 13, ...style });
-  const title = (children) => (0, import_react2.createElement)(RN3.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 17, fontWeight: "700", flex: 1 } }, children);
-  const btn = (label, kind, onPress, disabled = false, style = {}) => (0, import_react2.createElement)(
+  const title = (children) => (0, import_react3.createElement)(RN3.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 17, fontWeight: "700", flex: 1 } }, children);
+  const btn = (label, kind, onPress, disabled = false, style = {}) => (0, import_react3.createElement)(
     RN3.Pressable,
     {
       key: label,
@@ -2557,8 +3055,8 @@ var kit = (p) => {
     },
     text2(label, { color: kind === "primary" ? "#ffffff" : p.fg, fontWeight: "600" })
   );
-  const closeX = (label, onPress) => (0, import_react2.createElement)(RN3.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, hitSlop: 12, style: { padding: 4 } }, text2("\xD7", { fontSize: 24, color: p.muted }));
-  const field = (o) => (0, import_react2.createElement)(RN3.TextInput, {
+  const closeX = (label, onPress) => (0, import_react3.createElement)(RN3.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, hitSlop: 12, style: { padding: 4 } }, text2("\xD7", { fontSize: 24, color: p.muted }));
+  const field = (o) => (0, import_react3.createElement)(RN3.TextInput, {
     value: o.value,
     onChangeText: o.onChange,
     placeholder: o.placeholder,
@@ -2581,7 +3079,7 @@ var kit = (p) => {
       ...o.style
     }
   });
-  const chip = (label, on, onPress, key = label) => (0, import_react2.createElement)(
+  const chip = (label, on, onPress, key = label) => (0, import_react3.createElement)(
     RN3.Pressable,
     {
       key,
@@ -2592,13 +3090,13 @@ var kit = (p) => {
     },
     text2(label, { fontSize: 13, fontWeight: "600", color: on ? p.accent : p.fg })
   );
-  const page = (heading, onClose, children) => (0, import_react2.createElement)(
+  const page = (heading, onClose, children) => (0, import_react3.createElement)(
     RN3.Modal,
     { visible: true, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: onClose },
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.KeyboardAvoidingView,
       { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: p.bg } },
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.View,
         { style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingTop: 16, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: p.line } },
         title(heading),
@@ -2626,8 +3124,8 @@ var opener = () => {
     listeners.forEach((l) => l(v));
   };
   const useOpen = () => {
-    const [v, setV] = (0, import_react2.useState)(open);
-    (0, import_react2.useEffect)(() => {
+    const [v, setV] = (0, import_react3.useState)(open);
+    (0, import_react3.useEffect)(() => {
       listeners.add(setV);
       setV(open);
       return () => {
@@ -2641,19 +3139,19 @@ var opener = () => {
 var isAnswered = (a) => Array.isArray(a) ? a.length > 0 : typeof a === "number" ? true : !!a?.trim();
 var SurveySheet = ({ survey, api, p, onDone }) => {
   const k = kit(p);
-  const [step, setStep] = (0, import_react2.useState)(0);
-  const [answers, setAnswers] = (0, import_react2.useState)({});
-  const [done, setDone] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)("");
-  const started = (0, import_react2.useRef)(Date.now());
-  const finished = (0, import_react2.useRef)(false);
+  const [step, setStep] = (0, import_react3.useState)(0);
+  const [answers, setAnswers] = (0, import_react3.useState)({});
+  const [done, setDone] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)("");
+  const started = (0, import_react3.useRef)(Date.now());
+  const finished = (0, import_react3.useRef)(false);
   const q = survey.questions[step];
   const last = step === survey.questions.length - 1;
   const value = answers[q.key];
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     api.seen(survey.id).catch(() => void 0);
   }, [api, survey.id]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!done) return;
     const t = setTimeout(onDone, 2500);
     return () => clearTimeout(t);
@@ -2682,16 +3180,16 @@ var SurveySheet = ({ survey, api, p, onDone }) => {
   if (q.kind === "nps" || q.kind === "rating") {
     const scale = q.kind === "nps" ? 11 : Math.min(Math.max(q.scale ?? 5, 2), 10);
     const start = q.kind === "nps" ? 0 : 1;
-    input = (0, import_react2.createElement)(
+    input = (0, import_react3.createElement)(
       RN3.View,
       { style: { gap: 6 } },
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.View,
         { style: { flexDirection: "row", flexWrap: "wrap", gap: 6 }, accessibilityRole: "radiogroup", accessibilityLabel: q.title },
         ...Array.from({ length: scale }, (_, i) => {
           const n = i + start;
           const on = value === n;
-          return (0, import_react2.createElement)(
+          return (0, import_react3.createElement)(
             RN3.Pressable,
             {
               key: n,
@@ -2705,17 +3203,17 @@ var SurveySheet = ({ survey, api, p, onDone }) => {
           );
         })
       ),
-      q.low || q.high || q.kind === "nps" ? (0, import_react2.createElement)(RN3.View, { style: { flexDirection: "row", justifyContent: "space-between" } }, k.muted(q.low ?? (q.kind === "nps" ? "Not likely" : "")), k.muted(q.high ?? (q.kind === "nps" ? "Very likely" : ""))) : null
+      q.low || q.high || q.kind === "nps" ? (0, import_react3.createElement)(RN3.View, { style: { flexDirection: "row", justifyContent: "space-between" } }, k.muted(q.low ?? (q.kind === "nps" ? "Not likely" : "")), k.muted(q.high ?? (q.kind === "nps" ? "Very likely" : ""))) : null
     );
   } else if (q.kind === "single" || q.kind === "multi") {
     const multi = q.kind === "multi";
     const picked = multi ? value ?? [] : [];
-    input = (0, import_react2.createElement)(
+    input = (0, import_react3.createElement)(
       RN3.View,
       { style: { gap: 6 } },
       ...(q.options ?? []).map((o) => {
         const on = multi ? picked.includes(o) : value === o;
-        return (0, import_react2.createElement)(
+        return (0, import_react3.createElement)(
           RN3.Pressable,
           {
             key: o,
@@ -2730,26 +3228,26 @@ var SurveySheet = ({ survey, api, p, onDone }) => {
     );
   } else input = k.field({ value: value ?? "", onChange: pick, placeholder: q.placeholder ?? "Type your answer", multiline: true });
   const body = done ? [k.text(survey.thanks || "Thanks for your feedback.", { fontWeight: "600", textAlign: "center", paddingVertical: 16 })] : [
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.View,
       { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
-      ...survey.questions.map((x, i) => (0, import_react2.createElement)(RN3.View, { key: x.key, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= step ? p.accent : p.line } })),
-      (0, import_react2.createElement)(RN3.View, { style: { flex: 1 } }),
+      ...survey.questions.map((x, i) => (0, import_react3.createElement)(RN3.View, { key: x.key, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= step ? p.accent : p.line } })),
+      (0, import_react3.createElement)(RN3.View, { style: { flex: 1 } }),
       k.closeX("Close survey", dismiss)
     ),
-    (0, import_react2.createElement)(RN3.Text, { key: "q", accessibilityRole: "header", style: { color: p.fg, fontSize: 17, fontWeight: "700" } }, q.title, q.required ? "" : (0, import_react2.createElement)(RN3.Text, { style: { color: p.muted, fontSize: 13, fontWeight: "400" } }, "  optional")),
+    (0, import_react3.createElement)(RN3.Text, { key: "q", accessibilityRole: "header", style: { color: p.fg, fontSize: 17, fontWeight: "700" } }, q.title, q.required ? "" : (0, import_react3.createElement)(RN3.Text, { style: { color: p.muted, fontSize: 13, fontWeight: "400" } }, "  optional")),
     q.description ? k.muted(q.description) : null,
     input,
     error ? k.text(error, { color: p.danger, fontSize: 13 }) : null,
     k.btn(last ? "Send" : "Next", "primary", next)
   ];
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     RN3.Modal,
     { visible: true, transparent: true, animationType: "slide", onRequestClose: dismiss },
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.KeyboardAvoidingView,
       { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: "rgba(0,0,0,0.35)", justifyContent: "flex-end" } },
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.View,
         {
           accessibilityViewIsModal: true,
@@ -2763,10 +3261,10 @@ var SurveySheet = ({ survey, api, p, onDone }) => {
 };
 var MRRocketSurveys = ({ client, appearance }) => {
   const p = usePalette(appearance);
-  const [survey, setSurvey] = (0, import_react2.useState)(null);
-  const [who2, setWho] = (0, import_react2.useState)(() => client.getDistinctId());
-  (0, import_react2.useEffect)(() => client.subscribe(() => setWho(client.getDistinctId())), [client]);
-  (0, import_react2.useEffect)(() => {
+  const [survey, setSurvey] = (0, import_react3.useState)(null);
+  const [who2, setWho] = (0, import_react3.useState)(() => client.getDistinctId());
+  (0, import_react3.useEffect)(() => client.subscribe(() => setWho(client.getDistinctId())), [client]);
+  (0, import_react3.useEffect)(() => {
     let stop = false;
     const ctrl = new AbortController();
     const timer = setTimeout(() => {
@@ -2786,33 +3284,33 @@ var MRRocketSurveys = ({ client, appearance }) => {
       ctrl.abort();
     };
   }, [client, who2]);
-  const done = (0, import_react2.useCallback)(() => {
+  const done = (0, import_react3.useCallback)(() => {
     setSurvey((cur) => {
       if (cur) client.markSurveyDone(cur.s.id);
       return null;
     });
   }, [client]);
   if (!survey) return null;
-  return (0, import_react2.createElement)(SurveySheet, { key: survey.s.id, survey: survey.s, api: survey.api, p, onDone: done });
+  return (0, import_react3.createElement)(SurveySheet, { key: survey.s.id, survey: survey.s, api: survey.api, p, onDone: done });
 };
 var feedbackOpen = opener();
 var useFeedback = () => ({ open: () => feedbackOpen.set(true), close: () => feedbackOpen.set(false) });
 var FeedbackSheet = ({ client, p, title }) => {
   const k = kit(p);
-  const [tab, setTab] = (0, import_react2.useState)("top");
-  const [posts, setPosts] = (0, import_react2.useState)(null);
-  const [boards, setBoards] = (0, import_react2.useState)([]);
-  const [error, setError] = (0, import_react2.useState)("");
-  const [board, setBoard] = (0, import_react2.useState)("feature");
-  const [subject, setSubject] = (0, import_react2.useState)("");
-  const [details, setDetails] = (0, import_react2.useState)("");
-  const [name, setName] = (0, import_react2.useState)("");
-  const [email, setEmail] = (0, import_react2.useState)("");
-  const [sending, setSending] = (0, import_react2.useState)(false);
-  const [sent, setSent] = (0, import_react2.useState)(false);
+  const [tab, setTab] = (0, import_react3.useState)("top");
+  const [posts, setPosts] = (0, import_react3.useState)(null);
+  const [boards, setBoards] = (0, import_react3.useState)([]);
+  const [error, setError] = (0, import_react3.useState)("");
+  const [board, setBoard] = (0, import_react3.useState)("feature");
+  const [subject, setSubject] = (0, import_react3.useState)("");
+  const [details, setDetails] = (0, import_react3.useState)("");
+  const [name, setName] = (0, import_react3.useState)("");
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [sending, setSending] = (0, import_react3.useState)(false);
+  const [sent, setSent] = (0, import_react3.useState)(false);
   const close = () => feedbackOpen.set(false);
   const user = client.getUser();
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const api = client.api();
     if (!api) return setError("Feedback is off while tracking is off.");
     const ctrl = new AbortController();
@@ -2844,7 +3342,7 @@ var FeedbackSheet = ({ client, p, title }) => {
       setSent(true);
     }).catch((e) => setError(e.message)).finally(() => setSending(false));
   };
-  const tabs = (0, import_react2.createElement)(
+  const tabs = (0, import_react3.createElement)(
     RN3.View,
     { style: { flexDirection: "row", gap: 8, paddingHorizontal: 16, paddingTop: 12 } },
     k.chip("Top requests", tab === "top", () => setTab("top")),
@@ -2853,17 +3351,17 @@ var FeedbackSheet = ({ client, p, title }) => {
       setSent(false);
     })
   );
-  const list = (0, import_react2.createElement)(
+  const list = (0, import_react3.createElement)(
     RN3.ScrollView,
     { style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 10 } },
     error ? k.text(error, { color: p.danger, fontSize: 13 }) : null,
     posts === null && !error ? k.muted("Loading\u2026") : null,
     posts?.length === 0 ? k.muted("No requests yet. Be the first to suggest one.") : null,
     ...(posts ?? []).map(
-      (post) => (0, import_react2.createElement)(
+      (post) => (0, import_react3.createElement)(
         RN3.View,
         { key: post.id, style: { flexDirection: "row", gap: 12, alignItems: "flex-start", paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: p.line } },
-        (0, import_react2.createElement)(
+        (0, import_react3.createElement)(
           RN3.Pressable,
           {
             onPress: () => vote(post),
@@ -2875,15 +3373,15 @@ var FeedbackSheet = ({ client, p, title }) => {
           k.text("\u25B2", { fontSize: 11, color: post.voted ? p.accent : p.muted }),
           k.text(String(post.votes), { fontWeight: "700", fontSize: 14, color: post.voted ? p.accent : p.fg })
         ),
-        (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 2 } }, k.text(post.title, { fontWeight: "600" }), post.body ? k.muted(post.body.slice(0, 160)) : null)
+        (0, import_react3.createElement)(RN3.View, { style: { flex: 1, gap: 2 } }, k.text(post.title, { fontWeight: "600" }), post.body ? k.muted(post.body.slice(0, 160)) : null)
       )
     )
   );
-  const form = (0, import_react2.createElement)(
+  const form = (0, import_react3.createElement)(
     RN3.ScrollView,
     { style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 10 }, keyboardShouldPersistTaps: "handled" },
     sent ? k.text("Thanks! Your request is on the board.", { fontWeight: "600" }) : null,
-    boards.length > 1 ? (0, import_react2.createElement)(RN3.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6 } }, ...boards.map((b) => k.chip(b.label, board === b.id, () => setBoard(b.id), b.id))) : null,
+    boards.length > 1 ? (0, import_react3.createElement)(RN3.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6 } }, ...boards.map((b) => k.chip(b.label, board === b.id, () => setBoard(b.id), b.id))) : null,
     k.field({ value: subject, onChange: setSubject, placeholder: "Short title", max: 120 }),
     k.field({ value: details, onChange: setDetails, placeholder: "Details (optional)", multiline: true }),
     ...user?.email ? [] : [
@@ -2899,7 +3397,7 @@ var FeedbackSheet = ({ client, p, title }) => {
 var MRRocketFeedback = ({ client, appearance, options = {} }) => {
   const p = usePalette(appearance);
   const open = feedbackOpen.useOpen();
-  return open ? (0, import_react2.createElement)(FeedbackSheet, { client, p, title: options.title ?? "Feedback" }) : null;
+  return open ? (0, import_react3.createElement)(FeedbackSheet, { client, p, title: options.title ?? "Feedback" }) : null;
 };
 var POLL_OPEN_MS = 4e3;
 var POLL_WAITING_MS = 8e3;
@@ -2939,11 +3437,11 @@ try {
 }
 var PHOTO_TYPES = { jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", webp: "image/webp", gif: "image/gif" };
 var teamOf = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
-var svg = null;
+var svg2 = null;
 try {
-  svg = require("react-native-svg");
+  svg2 = require("react-native-svg");
 } catch {
-  svg = null;
+  svg2 = null;
 }
 var GLYPH = {
   chat: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z",
@@ -2958,15 +3456,15 @@ var GLYPH = {
 };
 var FALLBACK = { chat: "\u{1F4AC}", home: "\u2302", help: "?", send: "\u2192", up: "\u2191", next: "\u203A", search: "\u2315", cross: "\xD7", clip: "\u{1F4CE}" };
 var glyph = (name, color, size = 20) => {
-  const Svg = svg?.Svg ?? svg?.default;
-  if (!svg || !Svg) return (0, import_react2.createElement)(RN3.Text, { style: { color, fontSize: Math.round(size * 0.85), lineHeight: size + 2, textAlign: "center", minWidth: size } }, FALLBACK[name]);
-  return (0, import_react2.createElement)(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none" }, (0, import_react2.createElement)(svg.Path, { d: GLYPH[name], stroke: color, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }));
+  const Svg = svg2?.Svg ?? svg2?.default;
+  if (!svg2 || !Svg) return (0, import_react3.createElement)(RN3.Text, { style: { color, fontSize: Math.round(size * 0.85), lineHeight: size + 2, textAlign: "center", minWidth: size } }, FALLBACK[name]);
+  return (0, import_react3.createElement)(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none" }, (0, import_react3.createElement)(svg2.Path, { d: GLYPH[name], stroke: color, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }));
 };
 var alpha = (hex, a) => /^#[0-9a-f]{6}$/i.test(hex) ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
-var teamMark = (title, bg, fg, size = 36) => (0, import_react2.createElement)(
+var teamMark = (title, bg, fg, size = 36) => (0, import_react3.createElement)(
   RN3.View,
   { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: bg, alignItems: "center", justifyContent: "center" } },
-  (0, import_react2.createElement)(RN3.Text, { style: { color: fg, fontSize: Math.round(size * 0.42), fontWeight: "700" } }, (title.trim()[0] ?? "?").toUpperCase())
+  (0, import_react3.createElement)(RN3.Text, { style: { color: fg, fontSize: Math.round(size * 0.42), fontWeight: "700" } }, (title.trim()[0] ?? "?").toUpperCase())
 );
 var HU = {
   light: { bg: "#ffffff", surface: "#f4f4f5", def: "#ececee", segment: "#ffffff", fg: "#18181b", muted: "#71717a" },
@@ -2974,20 +3472,20 @@ var HU = {
 };
 var hairline = { shadowColor: "#000", shadowOpacity: 0.07, shadowRadius: 3, shadowOffset: { width: 0, height: 1 }, elevation: 1 };
 var useChat = (client, o, open, view) => {
-  const [thread, setThread] = (0, import_react2.useState)(null);
-  const [loaded, setLoaded] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)("");
-  const [unseen, setUnseen] = (0, import_react2.useState)([]);
-  const known = (0, import_react2.useRef)(null);
+  const [thread, setThread] = (0, import_react3.useState)(null);
+  const [loaded, setLoaded] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)("");
+  const [unseen, setUnseen] = (0, import_react3.useState)([]);
+  const known = (0, import_react3.useRef)(null);
   const watching = open && view === "messages";
-  const watch = (0, import_react2.useRef)(watching);
+  const watch = (0, import_react3.useRef)(watching);
   watch.current = watching;
-  const [active, setActive] = (0, import_react2.useState)(RN3.AppState.currentState === "active");
-  (0, import_react2.useEffect)(() => {
+  const [active, setActive] = (0, import_react3.useState)(RN3.AppState.currentState === "active");
+  (0, import_react3.useEffect)(() => {
     const sub = RN3.AppState.addEventListener("change", (st) => setActive(st === "active"));
     return () => sub.remove();
   }, []);
-  const take = (0, import_react2.useCallback)(
+  const take = (0, import_react3.useCallback)(
     (t) => {
       const team = teamOf(t);
       if (known.current !== null) {
@@ -3003,10 +3501,10 @@ var useChat = (client, o, open, view) => {
     },
     [o.haptics]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (watching) setUnseen([]);
   }, [watching]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!active) return;
     let stop = false;
     let timer;
@@ -3046,9 +3544,9 @@ var useChat = (client, o, open, view) => {
   return { thread, loaded, error, setError, unseen, take };
 };
 var useArticles = (client, on, query) => {
-  const [list, setList] = (0, import_react2.useState)(null);
-  const [any, setAny] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const [list, setList] = (0, import_react3.useState)(null);
+  const [any, setAny] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
     if (!on) return;
     let stop = false;
     const t = setTimeout(
@@ -3069,7 +3567,7 @@ var useArticles = (client, on, query) => {
   return { list, any };
 };
 var spansOf = (p, spans, base) => spans.map(
-  (s, i) => (0, import_react2.createElement)(
+  (s, i) => (0, import_react3.createElement)(
     RN3.Text,
     {
       key: i,
@@ -3088,10 +3586,10 @@ var spansOf = (p, spans, base) => spans.map(
 );
 var ArticleView = ({ client, p, id, onAsk }) => {
   const k = kit(p);
-  const [a, setA] = (0, import_react2.useState)(null);
-  const [error, setError] = (0, import_react2.useState)("");
-  const [rated, setRated] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [a, setA] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)("");
+  const [rated, setRated] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const ctrl = new AbortController();
     client.api()?.article(id, ctrl.signal).then(setA).catch((e) => e.name !== "AbortError" && setError(e.message));
     return () => ctrl.abort();
@@ -3100,30 +3598,30 @@ var ArticleView = ({ client, p, id, onAsk }) => {
   if (!a) return k.muted("Loading\u2026");
   const base = { color: p.fg, fontSize: 15, lineHeight: 22 };
   const blocks = a.blocks.map((b, i) => {
-    if (b.type === "h2" || b.type === "h3") return (0, import_react2.createElement)(RN3.Text, { key: i, accessibilityRole: "header", style: { ...base, fontSize: b.type === "h2" ? 17 : 16, fontWeight: "700", marginTop: 8 } }, ...spansOf(p, b.spans, {}));
-    if (b.type === "p") return (0, import_react2.createElement)(RN3.Text, { key: i, style: base }, ...spansOf(p, b.spans, {}));
-    if (b.type === "quote") return (0, import_react2.createElement)(RN3.View, { key: i, style: { borderLeftWidth: 3, borderLeftColor: p.line, paddingLeft: 10 } }, (0, import_react2.createElement)(RN3.Text, { style: { ...base, color: p.muted } }, ...spansOf(p, b.spans, {})));
+    if (b.type === "h2" || b.type === "h3") return (0, import_react3.createElement)(RN3.Text, { key: i, accessibilityRole: "header", style: { ...base, fontSize: b.type === "h2" ? 17 : 16, fontWeight: "700", marginTop: 8 } }, ...spansOf(p, b.spans, {}));
+    if (b.type === "p") return (0, import_react3.createElement)(RN3.Text, { key: i, style: base }, ...spansOf(p, b.spans, {}));
+    if (b.type === "quote") return (0, import_react3.createElement)(RN3.View, { key: i, style: { borderLeftWidth: 3, borderLeftColor: p.line, paddingLeft: 10 } }, (0, import_react3.createElement)(RN3.Text, { style: { ...base, color: p.muted } }, ...spansOf(p, b.spans, {})));
     if (b.type === "ul" || b.type === "ol")
-      return (0, import_react2.createElement)(
+      return (0, import_react3.createElement)(
         RN3.View,
         { key: i, style: { gap: 4 } },
-        ...b.items.map((it, j) => (0, import_react2.createElement)(RN3.View, { key: j, style: { flexDirection: "row", gap: 8 } }, k.text(b.type === "ol" ? `${j + 1}.` : "\u2022", base), (0, import_react2.createElement)(RN3.Text, { style: { ...base, flex: 1 } }, ...spansOf(p, it, {}))))
+        ...b.items.map((it, j) => (0, import_react3.createElement)(RN3.View, { key: j, style: { flexDirection: "row", gap: 8 } }, k.text(b.type === "ol" ? `${j + 1}.` : "\u2022", base), (0, import_react3.createElement)(RN3.Text, { style: { ...base, flex: 1 } }, ...spansOf(p, it, {}))))
       );
-    if (b.type === "code") return (0, import_react2.createElement)(RN3.View, { key: i, style: { backgroundColor: p.soft, borderRadius: 8, padding: 10 } }, k.text(b.text, { fontFamily: RN3.Platform.OS === "ios" ? "Menlo" : "monospace", fontSize: 13 }));
-    return (0, import_react2.createElement)(RN3.View, { key: i, style: { height: 1, backgroundColor: p.line } });
+    if (b.type === "code") return (0, import_react3.createElement)(RN3.View, { key: i, style: { backgroundColor: p.soft, borderRadius: 8, padding: 10 } }, k.text(b.text, { fontFamily: RN3.Platform.OS === "ios" ? "Menlo" : "monospace", fontSize: 13 }));
+    return (0, import_react3.createElement)(RN3.View, { key: i, style: { height: 1, backgroundColor: p.line } });
   });
   const rate = (helpful) => {
     setRated(true);
     client.api()?.rateArticle(id, helpful).catch(() => void 0);
     if (!helpful) onAsk();
   };
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     RN3.View,
     { style: { gap: 10 } },
     k.muted(a.collection),
-    (0, import_react2.createElement)(RN3.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 20, fontWeight: "700" } }, a.title),
+    (0, import_react3.createElement)(RN3.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 20, fontWeight: "700" } }, a.title),
     ...blocks,
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.View,
       { style: { flexDirection: "row", alignItems: "center", gap: 8, padding: 12, borderRadius: 10, backgroundColor: p.soft, marginTop: 8 } },
       rated ? k.muted("Thanks for letting us know.") : k.muted("Did this answer your question?", { flex: 1 }),
@@ -3143,19 +3641,26 @@ var MessengerSheet = ({
   brand
 }) => {
   const k = kit(p);
-  const [body, setBody] = (0, import_react2.useState)("");
-  const [email, setEmail] = (0, import_react2.useState)("");
-  const [pending, setPending] = (0, import_react2.useState)(null);
-  const [photos, setPhotos] = (0, import_react2.useState)([]);
-  const [query, setQuery] = (0, import_react2.useState)("");
+  const [body, setBody] = (0, import_react3.useState)("");
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [pending, setPending] = (0, import_react3.useState)(null);
+  const [slow, setSlow] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setSlow(false);
+    if (!pending) return;
+    const t = setTimeout(() => setSlow(true), 1500);
+    return () => clearTimeout(t);
+  }, [pending]);
+  const [photos, setPhotos] = (0, import_react3.useState)([]);
+  const [query, setQuery] = (0, import_react3.useState)("");
   const helpOn = o.help !== false;
   const arts = useArticles(client, helpOn, query);
-  const scroll = (0, import_react2.useRef)(null);
+  const scroll = (0, import_react3.useRef)(null);
   const close = () => messengerOpen.set(false);
   const greeting = o.greeting ?? "Hi! How can we help?";
   const { thread } = chat;
   const count = (thread?.messages.length ?? 0) + (pending ? 1 : 0);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (view === "messages") setTimeout(() => scroll.current?.scrollToEnd?.({ animated: true }), 50);
   }, [count, view]);
   const needEmail = (o.askEmail ?? true) && !thread?.hasEmail && !client.getUser()?.email;
@@ -3238,7 +3743,7 @@ var MessengerSheet = ({
       setPending(null);
     }
   };
-  const localUris = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const localUris = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
   for (const f of photos) localUris.current.set(f.key, f.uri);
   const fileUrl = (id) => localUris.current.get(id) ?? client.api()?.attachmentUrl(id) ?? "";
   const ink = inkOn(p.accent);
@@ -3253,11 +3758,11 @@ var MessengerSheet = ({
   const title = o.title?.trim() ?? "";
   const bubble = (m, isPending = false) => {
     const mine = m.from === "visitor";
-    return (0, import_react2.createElement)(
+    return (0, import_react3.createElement)(
       RN3.View,
       { key: m.id, style: { alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "82%", gap: 4 } },
       ...(m.attachments ?? []).map(
-        (f) => (0, import_react2.createElement)(
+        (f) => (0, import_react3.createElement)(
           RN3.Pressable,
           {
             key: f.id,
@@ -3266,10 +3771,10 @@ var MessengerSheet = ({
             accessibilityLabel: f.name,
             style: { alignSelf: mine ? "flex-end" : "flex-start", opacity: isPending ? 0.7 : 1 }
           },
-          f.type.startsWith("image/") ? (0, import_react2.createElement)(RN3.Image, { source: { uri: fileUrl(f.id) }, resizeMode: "cover", style: { width: 200, height: 150, borderRadius: r.bubble, backgroundColor: p.soft } }) : (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.soft, borderRadius: r.card, paddingHorizontal: 10, paddingVertical: 7 } }, k.text(`\u{1F4C4} ${f.name}`, { fontSize: 13 }))
+          f.type.startsWith("image/") ? (0, import_react3.createElement)(RN3.Image, { source: { uri: fileUrl(f.id) }, resizeMode: "cover", style: { width: 200, height: 150, borderRadius: r.bubble, backgroundColor: p.soft } }) : (0, import_react3.createElement)(RN3.View, { style: { backgroundColor: p.soft, borderRadius: r.card, paddingHorizontal: 10, paddingVertical: 7 } }, k.text(`\u{1F4C4} ${f.name}`, { fontSize: 13 }))
         )
       ),
-      !m.body && m.attachments?.length ? null : (0, import_react2.createElement)(
+      !m.body && m.attachments?.length ? null : (0, import_react3.createElement)(
         RN3.View,
         {
           style: {
@@ -3286,23 +3791,23 @@ var MessengerSheet = ({
         k.text(m.body, { color: mine ? ink : hu.fg })
       ),
       ...(m.articles ?? []).map(
-        (a) => (0, import_react2.createElement)(
+        (a) => (0, import_react3.createElement)(
           RN3.Pressable,
           { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { backgroundColor: p.soft, borderRadius: r.card, paddingHorizontal: 10, paddingVertical: 7 } },
           k.text(`\u{1F4C4} ${a.title}`, { fontSize: 13 })
         )
       ),
-      m.at ? k.muted(`${mine ? "" : `${who(m.from, o.agentName)} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
+      m.at ? k.muted(`${mine ? "" : `${who(m.from, o.agentName)} \xB7 `}${isPending && slow ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
     );
   };
-  const row = (a) => (0, import_react2.createElement)(
+  const row = (a) => (0, import_react3.createElement)(
     RN3.Pressable,
     { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "button", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 11, paddingHorizontal: 8 } },
     k.text(a.title, { flex: 1 }),
     glyph("next", p.accent, 14)
   );
-  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: raised, borderRadius: r.card, padding: 16, ...surf, ...style } }, ...children);
-  const searchRow = (onPress) => (0, import_react2.createElement)(
+  const card = (children, style = {}) => (0, import_react3.createElement)(RN3.View, { style: { backgroundColor: raised, borderRadius: r.card, padding: 16, ...surf, ...style } }, ...children);
+  const searchRow = (onPress) => (0, import_react3.createElement)(
     RN3.Pressable,
     { key: "s", onPress, accessibilityRole: "search", style: { flexDirection: "row", alignItems: "center", height: 44, borderRadius: r.field, paddingHorizontal: 14, backgroundColor: hu.def } },
     k.muted("Search for help", { flex: 1, fontSize: 15 }),
@@ -3311,12 +3816,12 @@ var MessengerSheet = ({
   const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200, style: { borderWidth: 0, borderRadius: r.field, backgroundColor: raised, ...surf } });
   const first = client.getUser()?.name?.trim().split(/\s+/)[0];
   const rest = greeting.replace(/^(hi|hello|hey|hallo)( there)?\s*[!,.]*\s*/i, "").trim() || "How can we help you today?";
-  const hero = (fg, sub) => (0, import_react2.createElement)(
+  const hero = (fg, sub) => (0, import_react3.createElement)(
     RN3.Text,
     { key: "hero", accessibilityRole: "header", style: { color: fg, fontSize: 25, fontWeight: "600", letterSpacing: -0.6, lineHeight: 30 } },
     first ? `Hi, ${first} \u{1F44B}
 ` : "Hi there \u{1F44B}\n",
-    (0, import_react2.createElement)(RN3.Text, { style: { color: sub, fontWeight: "500" } }, rest)
+    (0, import_react3.createElement)(RN3.Text, { style: { color: sub, fontWeight: "500" } }, rest)
   );
   const last = thread?.messages.at(-1);
   const showHelp = helpOn && arts.any !== false;
@@ -3324,11 +3829,11 @@ var MessengerSheet = ({
   if (view === "home") {
     const cards = [
       // "Ask a question": the words go into the chat's field and are sent as the chat opens.
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.View,
         { key: "ask", style: { flexDirection: "row", alignItems: "center", gap: 8, height: 48, borderRadius: 24, paddingLeft: 18, paddingRight: 6, backgroundColor: hu.surface, ...surf } },
         k.field({ value: body, onChange: setBody, placeholder: "Ask a question", max: 4e3, style: { flex: 1, borderWidth: 0, paddingHorizontal: 0, backgroundColor: "transparent" } }),
-        (0, import_react2.createElement)(
+        (0, import_react3.createElement)(
           RN3.Pressable,
           {
             onPress: () => {
@@ -3342,59 +3847,60 @@ var MessengerSheet = ({
           glyph("up", body.trim() ? ink : hu.muted, 18)
         )
       ),
-      last ? (0, import_react2.createElement)(
+      last ? (0, import_react3.createElement)(
         RN3.Pressable,
         { key: "recent", onPress: () => setView("messages"), accessibilityRole: "button" },
         card([
-          (0, import_react2.createElement)(
+          (0, import_react3.createElement)(
             RN3.View,
             { key: "r", style: { flexDirection: "row", alignItems: "center", gap: 10 } },
             title ? teamMark(title, alpha(p.accent, 0.16), p.accent, 26) : null,
-            (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 1 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: hu.fg, fontSize: 14, fontWeight: "500" } }, last.body || (last.attachments?.length ? `Sent ${last.attachments.length === 1 ? last.attachments[0].name : `${last.attachments.length} files`}` : "")), k.muted(`${last.from === "visitor" ? "You" : who(last.from, o.agentName)} \xB7 ${timeAgo(last.at)}`, { fontSize: 11.5 })),
-            chat.unseen.length ? (0, import_react2.createElement)(RN3.View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : glyph("next", p.muted, 14)
+            (0, import_react3.createElement)(RN3.View, { style: { flex: 1, gap: 1 } }, (0, import_react3.createElement)(RN3.Text, { numberOfLines: 1, style: { color: hu.fg, fontSize: 14, fontWeight: "500" } }, last.body || (last.attachments?.length ? `Sent ${last.attachments.length === 1 ? last.attachments[0].name : `${last.attachments.length} files`}` : "")), k.muted(`${last.from === "visitor" ? "You" : who(last.from, o.agentName)} \xB7 ${timeAgo(last.at)}`, { fontSize: 11.5 })),
+            chat.unseen.length ? (0, import_react3.createElement)(RN3.View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : glyph("next", p.muted, 14)
           )
         ], { paddingVertical: 10, paddingHorizontal: 12 })
       ) : null,
       showHelp ? card([searchRow(() => setView("help")), ...(arts.list ?? []).slice(0, 4).map(row)], { padding: 8, gap: 2 }) : null
     ];
-    content = plain ? (0, import_react2.createElement)(
+    content = plain ? (0, import_react3.createElement)(
       RN3.ScrollView,
       { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 24, gap: 12 }, keyboardShouldPersistTaps: "handled" },
-      (0, import_react2.createElement)(RN3.View, { key: "top", style: { paddingHorizontal: 6, paddingBottom: 10 } }, hero(p.fg, p.muted)),
+      (0, import_react3.createElement)(RN3.View, { key: "top", style: { paddingHorizontal: 6, paddingBottom: 10 } }, hero(p.fg, p.muted)),
       ...cards
-    ) : (0, import_react2.createElement)(
+    ) : (0, import_react3.createElement)(
       RN3.ScrollView,
       { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingBottom: 24 }, keyboardShouldPersistTaps: "handled" },
-      (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.accent, paddingHorizontal: 22, paddingTop: 4, paddingBottom: 64 } }, hero(ink, alpha(ink, 0.8))),
-      (0, import_react2.createElement)(RN3.View, { style: { marginTop: -48, paddingHorizontal: 16, gap: 12 } }, ...cards)
+      (0, import_react3.createElement)(RN3.View, { style: { backgroundColor: p.accent, paddingHorizontal: 22, paddingTop: 4, paddingBottom: 64 } }, hero(ink, alpha(ink, 0.8))),
+      (0, import_react3.createElement)(RN3.View, { style: { marginTop: -48, paddingHorizontal: 16, gap: 12 } }, ...cards)
     );
   } else if (view === "messages")
-    content = (0, import_react2.createElement)(
+    content = (0, import_react3.createElement)(
       RN3.View,
       { key: "messages", style: { flex: 1, backgroundColor: hu.bg } },
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.ScrollView,
         { ref: scroll, style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 16, gap: 12 } },
-        bubble({ id: "greeting", from: "team", body: greeting, at: "" }),
+        // The greeting opens an empty chat only, never above the visitor's first words (2026-10-30).
+        !thread?.messages.length && !pending ? bubble({ id: "greeting", from: "team", body: greeting, at: "" }) : null,
         !chat.loaded ? k.muted("Loading\u2026") : null,
         ...(thread?.messages ?? []).map((m) => bubble(m)),
         pending ? bubble(pending, true) : null,
         thread?.conversation?.status === "solved" && !pending ? k.muted("This conversation is closed. Write to start a new one.", { textAlign: "center" }) : null
       ),
-      (0, import_react2.createElement)(
+      (0, import_react3.createElement)(
         RN3.View,
         { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 6, gap: 8 } },
         chat.error ? k.text(chat.error, { color: p.danger, fontSize: 12 }) : null,
         // Photos picked for the next message, each with a way to take it out again.
-        photos.length ? (0, import_react2.createElement)(
+        photos.length ? (0, import_react3.createElement)(
           RN3.View,
           { style: { flexDirection: "row", flexWrap: "wrap", gap: 10, paddingTop: 6, paddingHorizontal: 2 } },
           ...photos.map(
-            (f) => (0, import_react2.createElement)(
+            (f) => (0, import_react3.createElement)(
               RN3.View,
               { key: f.key, style: { width: 56, height: 56 } },
-              (0, import_react2.createElement)(RN3.Image, { source: { uri: f.uri }, resizeMode: "cover", accessibilityLabel: f.id ? f.name : `${f.name}, uploading`, style: { width: 56, height: 56, borderRadius: Math.max(4, r.card - 4), backgroundColor: p.soft, opacity: f.id ? 1 : 0.5 } }),
-              (0, import_react2.createElement)(
+              (0, import_react3.createElement)(RN3.Image, { source: { uri: f.uri }, resizeMode: "cover", accessibilityLabel: f.id ? f.name : `${f.name}, uploading`, style: { width: 56, height: 56, borderRadius: Math.max(4, r.card - 4), backgroundColor: p.soft, opacity: f.id ? 1 : 0.5 } }),
+              (0, import_react3.createElement)(
                 RN3.Pressable,
                 {
                   onPress: () => setPhotos((list) => list.filter((x) => x.key !== f.key)),
@@ -3409,7 +3915,7 @@ var MessengerSheet = ({
           )
         ) : null,
         // The message field on top, the paperclip (when the app has expo-image-picker) and the send button under it.
-        (0, import_react2.createElement)(
+        (0, import_react3.createElement)(
           RN3.View,
           { style: { gap: 2, borderRadius: 20, paddingTop: 10, paddingBottom: 6, paddingRight: 6, paddingLeft: 16, backgroundColor: hu.surface, ...surf } },
           // The optional email: the box's first line, under a hairline the message follows.
@@ -3422,16 +3928,16 @@ var MessengerSheet = ({
             style: { minHeight: 0, marginRight: 10, marginBottom: 4, paddingHorizontal: 0, paddingTop: 0, paddingBottom: 8, borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderBottomColor: emailOk ? p.line : p.danger, backgroundColor: "transparent", fontSize: 13.5 }
           }) : null,
           k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { minHeight: 28, maxHeight: 120, borderWidth: 0, paddingHorizontal: 0, paddingVertical: 4, backgroundColor: "transparent" } }),
-          (0, import_react2.createElement)(
+          (0, import_react3.createElement)(
             RN3.View,
             { style: { flexDirection: "row", alignItems: "center", marginLeft: -8 } },
-            imagePicker?.launchImageLibraryAsync ? (0, import_react2.createElement)(
+            imagePicker?.launchImageLibraryAsync ? (0, import_react3.createElement)(
               RN3.Pressable,
               { onPress: () => void pickPhotos(), disabled: !!pending, accessibilityRole: "button", accessibilityLabel: "Attach a photo or screenshot", hitSlop: 6, style: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center" } },
               glyph("clip", hu.muted, 19)
             ) : null,
-            (0, import_react2.createElement)(RN3.View, { style: { flex: 1 } }),
-            (0, import_react2.createElement)(
+            (0, import_react3.createElement)(RN3.View, { style: { flex: 1 } }),
+            (0, import_react3.createElement)(
               RN3.Pressable,
               {
                 onPress: () => void send(),
@@ -3449,24 +3955,24 @@ var MessengerSheet = ({
   else if (view === "help") {
     const groups = /* @__PURE__ */ new Map();
     for (const a of arts.list ?? []) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
-    content = (0, import_react2.createElement)(
+    content = (0, import_react3.createElement)(
       RN3.ScrollView,
       { key: "help", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
       search,
       arts.list === null ? k.muted("Loading\u2026") : null,
-      arts.list?.length === 0 ? (0, import_react2.createElement)(RN3.View, { style: { gap: 10, alignItems: "center", paddingVertical: 24 } }, k.muted(query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), k.btn("Send us a message", "primary", () => setView("messages"))) : null,
-      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row), { padding: 8 })] : [] : [...groups].map(([name, items]) => (0, import_react2.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`, { fontSize: 12, fontWeight: "600", paddingHorizontal: 2 }), card(items.map(row), { padding: 8 })))
+      arts.list?.length === 0 ? (0, import_react3.createElement)(RN3.View, { style: { gap: 10, alignItems: "center", paddingVertical: 24 } }, k.muted(query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), k.btn("Send us a message", "primary", () => setView("messages"))) : null,
+      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row), { padding: 8 })] : [] : [...groups].map(([name, items]) => (0, import_react3.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`, { fontSize: 12, fontWeight: "600", paddingHorizontal: 2 }), card(items.map(row), { padding: 8 })))
     );
   } else
-    content = (0, import_react2.createElement)(
+    content = (0, import_react3.createElement)(
       RN3.ScrollView,
       { key: `a-${view.article}`, style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 32 } },
-      (0, import_react2.createElement)(ArticleView, { client, p, id: view.article, onAsk: () => setView("messages") })
+      (0, import_react3.createElement)(ArticleView, { client, p, id: view.article, onAsk: () => setView("messages") })
     );
   const current = typeof view === "string" ? view : "help";
   const tab = (v, name, icon, badge = 0) => {
     const on = current === v;
-    return (0, import_react2.createElement)(
+    return (0, import_react3.createElement)(
       RN3.Pressable,
       {
         key: v,
@@ -3479,48 +3985,48 @@ var MessengerSheet = ({
       },
       glyph(icon, on ? hu.fg : hu.muted, 17),
       on ? k.text(name, { fontSize: 13.5, fontWeight: "500", color: hu.fg }) : null,
-      badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 7, right: 12, width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : null
+      badge ? (0, import_react3.createElement)(RN3.View, { style: { position: "absolute", top: 7, right: 12, width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : null
     );
   };
   const onAccent = view === "home" && !plain;
   const ground = onAccent ? p.accent : hu.bg;
-  const back = (to, label) => (0, import_react2.createElement)(
+  const back = (to, label) => (0, import_react3.createElement)(
     RN3.Pressable,
     { key: "back", onPress: () => setView(to), accessibilityRole: "button", accessibilityLabel: label, hitSlop: 10, style: { width: 32, height: 32, alignItems: "center", justifyContent: "center", transform: [{ rotate: "180deg" }] } },
     glyph("next", hu.fg, 18)
   );
-  const head = (0, import_react2.createElement)(
+  const head = (0, import_react3.createElement)(
     RN3.View,
     { key: "head", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 12, paddingRight: 12, paddingTop: 12, paddingBottom: 6, backgroundColor: ground } },
-    typeof view !== "string" ? back("help", "All articles") : view === "messages" ? back("home", "Back to home") : view === "home" && (o.logo || title) ? o.logo ? (0, import_react2.createElement)(RN3.Image, { key: "logo", source: { uri: o.logo }, accessibilityIgnoresInvertColors: true, resizeMode: "contain", style: { height: 28, aspectRatio: 1, maxWidth: 132, borderRadius: 8, marginLeft: 4 } }) : teamMark(title, alpha(p.accent, 0.16), p.accent, 28) : null,
+    typeof view !== "string" ? back("help", "All articles") : view === "messages" ? back("home", "Back to home") : view === "home" && (o.logo || title) ? o.logo ? (0, import_react3.createElement)(RN3.Image, { key: "logo", source: { uri: o.logo }, accessibilityIgnoresInvertColors: true, resizeMode: "contain", style: { height: 28, aspectRatio: 1, maxWidth: 132, borderRadius: 8, marginLeft: 4 } }) : teamMark(title, alpha(p.accent, 0.16), p.accent, 28) : null,
     // In the chat: who answers, in the middle.
-    view === "messages" && title ? (0, import_react2.createElement)(
+    view === "messages" && title ? (0, import_react3.createElement)(
       RN3.View,
       { style: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 } },
       teamMark(title, alpha(p.accent, 0.16), p.accent, 28),
-      (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { flexShrink: 1, color: hu.fg, fontSize: 15, fontWeight: "600" } }, title)
-    ) : (0, import_react2.createElement)(RN3.View, { style: { flex: 1 } }),
-    (0, import_react2.createElement)(RN3.Pressable, { onPress: close, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 12, style: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" } }, glyph("cross", onAccent ? ink : p.muted, 18))
+      (0, import_react3.createElement)(RN3.Text, { numberOfLines: 1, style: { flexShrink: 1, color: hu.fg, fontSize: 15, fontWeight: "600" } }, title)
+    ) : (0, import_react3.createElement)(RN3.View, { style: { flex: 1 } }),
+    (0, import_react3.createElement)(RN3.Pressable, { onPress: close, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 12, style: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" } }, glyph("cross", onAccent ? ink : p.muted, 18))
   );
-  const powered = brand ? (0, import_react2.createElement)(
+  const powered = brand ? (0, import_react3.createElement)(
     RN3.View,
     { key: "brand", style: { paddingTop: 2, paddingBottom: 6, alignItems: "center", backgroundColor: hu.bg } },
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.Text,
       { onPress: () => void RN3.Linking.openURL(BRAND_URL).catch(() => void 0), accessibilityRole: "link", hitSlop: 8, style: { color: p.muted, fontSize: 11.5 } },
       "Powered by ",
-      (0, import_react2.createElement)(RN3.Text, { style: { fontWeight: "600" } }, "MRRocket")
+      (0, import_react3.createElement)(RN3.Text, { style: { fontWeight: "600" } }, "MRRocket")
     )
   ) : null;
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     RN3.Modal,
     { visible: true, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: close },
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.KeyboardAvoidingView,
       { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: hu.bg } },
       head,
       content,
-      view === "messages" ? null : (0, import_react2.createElement)(
+      view === "messages" ? null : (0, import_react3.createElement)(
         RN3.View,
         { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", marginHorizontal: 12, marginTop: 6, marginBottom: 6, padding: 4, borderRadius: 22, backgroundColor: hu.surface } },
         tab("home", "Home", "home"),
@@ -3528,13 +4034,13 @@ var MessengerSheet = ({
         showHelp ? tab("help", "Help", "help") : null
       ),
       powered,
-      (0, import_react2.createElement)(RN3.View, { style: { height: 16 } })
+      (0, import_react3.createElement)(RN3.View, { style: { height: 16 } })
     )
   );
 };
 var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
-  const [look, setLook] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const [look, setLook] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
     const ctrl = new AbortController();
     void client.ready.then(
       () => client.api()?.messengerLook(ctrl.signal).then(setLook).catch(() => void 0)
@@ -3562,9 +4068,9 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
   const p = usePalette({ theme: appearance?.theme ?? look?.theme, accent: appearance?.accent ?? look?.accent });
   const k = kit(p);
   const open = messengerOpen.useOpen();
-  const [view, setViewState] = (0, import_react2.useState)(msgView);
-  const [banner, setBanner] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const [view, setViewState] = (0, import_react3.useState)(msgView);
+  const [banner, setBanner] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
     if (open) setViewState(msgView);
   }, [open]);
   const setView = (v) => {
@@ -3573,13 +4079,13 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
   };
   const chat = useChat(client, options, open, view);
   const latest = chat.unseen.at(-1);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!latest || open || options.preview === false) return;
     setBanner(latest);
     const t = setTimeout(() => setBanner(null), 6e3);
     return () => clearTimeout(t);
   }, [latest, open, options.preview]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (open) setBanner(null);
   }, [open]);
   const unseen = chat.unseen.length;
@@ -3591,10 +4097,10 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     ...edge === "top" ? { top: 60 } : edge === "bottom" ? { bottom: 34 } : { top: 0, bottom: 0, justifyContent: "center" },
     ...side === "left" ? { left: 20 } : side === "right" ? { right: 20 } : { left: 0, right: 0, alignItems: "center" }
   };
-  const launcher = options.launcher ? (0, import_react2.createElement)(
+  const launcher = options.launcher ? (0, import_react3.createElement)(
     RN3.View,
     { key: "launcher", pointerEvents: "box-none", style: { position: "absolute", ...place } },
-    (0, import_react2.createElement)(
+    (0, import_react3.createElement)(
       RN3.Pressable,
       {
         onPress: () => openAt(unseen ? "messages" : "home"),
@@ -3619,10 +4125,10 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       },
       glyph("chat", ink, label ? 20 : 26),
       label ? k.text(label, { color: ink, fontWeight: "700" }) : null,
-      unseen ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: p.danger, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: p.bg } }, k.text(String(Math.min(unseen, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
+      unseen ? (0, import_react3.createElement)(RN3.View, { style: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: p.danger, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: p.bg } }, k.text(String(Math.min(unseen, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
     )
   ) : null;
-  const toast = banner ? (0, import_react2.createElement)(
+  const toast = banner ? (0, import_react3.createElement)(
     RN3.Pressable,
     {
       key: "banner",
@@ -3647,29 +4153,29 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       }
     },
     k.muted(`${who(banner.from, options.agentName)}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
-    (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15, lineHeight: 20 } }, banner.body)
+    (0, import_react3.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15, lineHeight: 20 } }, banner.body)
   ) : null;
   if (!launcher && !toast && !open) return null;
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     RN3.View,
     { pointerEvents: "box-none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } },
     launcher,
     toast,
-    open ? (0, import_react2.createElement)(MessengerSheet, { client, p, o: options, chat, view, setView, brand: look?.branding !== false }) : null
+    open ? (0, import_react3.createElement)(MessengerSheet, { client, p, o: options, chat, view, setView, brand: look?.branding !== false }) : null
   );
 };
 
 // src/native/index.tsx
 var RN4 = require("react-native");
 var MRRocketMask = ({ children, style }) => {
-  const ref = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     maskedViews.add(ref);
     return () => {
       maskedViews.delete(ref);
     };
   }, []);
-  return (0, import_react3.createElement)(RN4.View, { ref, collapsable: false, style }, children);
+  return (0, import_react4.createElement)(RN4.View, { ref, collapsable: false, style }, children);
 };
 var shared = null;
 var sharedKey = "";
@@ -3686,16 +4192,16 @@ var createMRRocket = (options) => {
   return shared;
 };
 var getMRRocket = () => shared;
-var Ctx = (0, import_react3.createContext)(null);
+var Ctx = (0, import_react4.createContext)(null);
 var MRRocketProvider = ({ client: given, children, consent, flows = true, appearance, surveys = true, messenger = {}, feedback = {}, heatmaps = true, ...options }) => {
-  const [client] = (0, import_react3.useState)(() => given ?? createMRRocket({ ...options, consent }));
-  (0, import_react3.useEffect)(() => {
+  const [client] = (0, import_react4.useState)(() => given ?? createMRRocket({ ...options, consent }));
+  (0, import_react4.useEffect)(() => {
     if (consent) client.setConsent(consent);
   }, [client, consent]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (options.replay !== void 0) client.setReplay(options.replay);
   }, [client, options.replay]);
-  const start = (0, import_react3.useRef)(null);
+  const start = (0, import_react4.useRef)(null);
   const touch = (e, end) => {
     const n = e.nativeEvent;
     const x = n.pageX ?? n.changedTouches?.[0]?.pageX;
@@ -3704,22 +4210,22 @@ var MRRocketProvider = ({ client: given, children, consent, flows = true, appear
     if (!end) start.current = { x, y, t: Date.now() };
     else if (start.current && Math.hypot(x - start.current.x, y - start.current.y) < 10 && Date.now() - start.current.t < 500) client.tap(x, y);
   };
-  return (0, import_react3.createElement)(
+  return (0, import_react4.createElement)(
     Ctx.Provider,
     { value: client },
-    heatmaps ? (0, import_react3.createElement)(RN4.View, { style: { flex: 1 }, onTouchStartCapture: (e) => touch(e, false), onTouchEndCapture: (e) => touch(e, true) }, children) : children,
-    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, paywall: client.paywall, appearance }) : null,
-    surveys ? (0, import_react3.createElement)(MRRocketSurveys, { client, appearance }) : null,
-    feedback ? (0, import_react3.createElement)(MRRocketFeedback, { client, appearance, options: feedback }) : null,
-    messenger ? (0, import_react3.createElement)(MRRocketMessenger, { client, appearance, options: messenger }) : null
+    heatmaps ? (0, import_react4.createElement)(RN4.View, { style: { flex: 1 }, onTouchStartCapture: (e) => touch(e, false), onTouchEndCapture: (e) => touch(e, true) }, children) : children,
+    flows ? (0, import_react4.createElement)(MRRocketFlows, { flows: client.flows, paywall: client.paywall, appearance }) : null,
+    surveys ? (0, import_react4.createElement)(MRRocketSurveys, { client, appearance }) : null,
+    feedback ? (0, import_react4.createElement)(MRRocketFeedback, { client, appearance, options: feedback }) : null,
+    messenger ? (0, import_react4.createElement)(MRRocketMessenger, { client, appearance, options: messenger }) : null
   );
 };
 var useClient = () => {
-  const c = (0, import_react3.useContext)(Ctx);
+  const c = (0, import_react4.useContext)(Ctx);
   if (!c) throw new Error("MRRocket: wrap your app in <MRRocketProvider apiKey=\u2026>.");
   return c;
 };
-var useVersion = (client) => (0, import_react3.useSyncExternalStore)(client.subscribe, client.getVersion, client.getVersion);
+var useVersion = (client) => (0, import_react4.useSyncExternalStore)(client.subscribe, client.getVersion, client.getVersion);
 var useMRRocket = () => {
   const client = useClient();
   useVersion(client);
@@ -3753,9 +4259,9 @@ var useReview = () => {
   const client = useClient();
   return { request: client.requestReview };
 };
-var useOnboarding = () => {
+var useOnboarding = (id) => {
   const client = useClient();
-  return { start: client.startOnboarding };
+  return useOnboardingItem(client.flows, id, client.startOnboarding);
 };
 var useFlag = (key) => {
   const client = useClient();
@@ -3772,7 +4278,7 @@ var useVariant = (key) => {
   useVersion(client);
   const config = client.getConfig();
   const variant = client.peekVariant(key);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (config) client.expose(key, variant);
   }, [client, config, key, variant]);
   return variant;
@@ -3783,7 +4289,7 @@ var useText = (id, fallback) => {
   const config = client.getConfig();
   const text2 = client.peekText(id);
   const person = client.getDistinctId();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (config) client.exposeText(id);
   }, [client, config, id, person]);
   return text2 ?? fallback;
@@ -3808,13 +4314,13 @@ var useExpoRouterTracking = () => {
     console.warn("[MRRocket] useExpoRouterTracking needs expo-router. With React Navigation use useNavigationTracking.");
   }
   const pathname = (router?.usePathname ?? noPathname)();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (pathname) client.screen(pathname);
   }, [client, pathname]);
 };
 var useNavigationTracking = () => {
   const client = useClient();
-  return (0, import_react3.useCallback)(
+  return (0, import_react4.useCallback)(
     (state) => {
       const name = activeRouteName(state);
       if (name) client.screen(name);