@mrrocket/sdk 0.10.0 → 0.11.0

package/dist/pick.js

@@ -0,0 +1,117 @@
+// src/pick.ts
+var PICK_PARAM = "ck_pick";
+var PICK_ORIGIN_PARAM = "ck_origin";
+var esc = (s) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+var stableClasses = (el) => [...el.classList].filter((c) => c.length < 30 && !/\d{2,}|[_-][a-z0-9]{5,}$|^(is|has)-|hover|active|focus|open|selected|:|\[/.test(c)).slice(0, 2);
+var pickSelector = (el) => {
+  const doc = el.ownerDocument;
+  const unique = (sel) => {
+    try {
+      return doc.querySelectorAll(sel).length === 1;
+    } catch {
+      return false;
+    }
+  };
+  const named = el.getAttribute("data-ck-target");
+  if (named) return `[data-ck-target="${named.replace(/"/g, '\\"')}"]`;
+  if (el.id && !/\d{3,}/.test(el.id) && unique(`#${esc(el.id)}`)) return `#${esc(el.id)}`;
+  const parts = [];
+  let node = el;
+  while (node && node !== doc.documentElement && parts.length < 6) {
+    if (node !== el && node.id && !/\d{3,}/.test(node.id)) {
+      parts.unshift(`#${esc(node.id)}`);
+      break;
+    }
+    const tag = node.tagName.toLowerCase();
+    const cls = stableClasses(node).map((c) => `.${esc(c)}`).join("");
+    const parent = node.parentElement;
+    const same = parent ? [...parent.children].filter((c) => c.tagName === node.tagName) : [];
+    const nth = same.length > 1 ? `:nth-of-type(${same.indexOf(node) + 1})` : "";
+    parts.unshift(`${tag}${cls}${nth}`);
+    const sel = parts.join(" > ");
+    if (unique(sel)) return sel;
+    node = parent;
+  }
+  return parts.join(" > ");
+};
+var startPicker = () => {
+  if (typeof window === "undefined" || window.top === window) return null;
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(PICK_PARAM) !== "1") return null;
+  let origin;
+  try {
+    origin = new URL(params.get(PICK_ORIGIN_PARAM) ?? "").origin;
+  } catch {
+    return null;
+  }
+  if (!/^https?:\/\//.test(origin)) return null;
+  const send = (data) => window.parent.postMessage(data, origin);
+  const box = document.createElement("div");
+  box.setAttribute("aria-hidden", "true");
+  Object.assign(box.style, {
+    position: "fixed",
+    zIndex: "2147483647",
+    pointerEvents: "none",
+    border: "2px solid #0ea5e9",
+    background: "rgba(14,165,233,.12)",
+    borderRadius: "6px",
+    transition: "all 60ms linear",
+    display: "none"
+  });
+  const tag = document.createElement("div");
+  Object.assign(tag.style, {
+    position: "absolute",
+    left: "-2px",
+    bottom: "calc(100% + 4px)",
+    font: "600 11px/1.4 system-ui, sans-serif",
+    color: "#fff",
+    background: "#0c4a6e",
+    padding: "2px 6px",
+    borderRadius: "4px",
+    whiteSpace: "nowrap",
+    maxWidth: "360px",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  });
+  box.appendChild(tag);
+  document.body.appendChild(box);
+  let current = null;
+  const show = (el) => {
+    current = el && el !== box && !box.contains(el) ? el : null;
+    if (!current) {
+      box.style.display = "none";
+      return;
+    }
+    const r = current.getBoundingClientRect();
+    Object.assign(box.style, { display: "block", left: `${r.left - 2}px`, top: `${r.top - 2}px`, width: `${r.width + 4}px`, height: `${r.height + 4}px` });
+    tag.textContent = pickSelector(current);
+  };
+  const move = (e) => show(document.elementFromPoint(e.clientX, e.clientY));
+  const click = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const el = document.elementFromPoint(e.clientX, e.clientY) ?? current;
+    if (!el || el === box) return;
+    send({ type: "mrrocket:picked", selector: pickSelector(el), text: (el.textContent ?? "").trim().replace(/\s+/g, " ").slice(0, 80) });
+  };
+  const key = (e) => {
+    if (e.key === "Escape") send({ type: "mrrocket:pick-cancel" });
+  };
+  window.addEventListener("mousemove", move, true);
+  window.addEventListener("click", click, true);
+  window.addEventListener("keydown", key, true);
+  send({ type: "mrrocket:pick-ready" });
+  return () => {
+    window.removeEventListener("mousemove", move, true);
+    window.removeEventListener("click", click, true);
+    window.removeEventListener("keydown", key, true);
+    box.remove();
+  };
+};
+export {
+  PICK_ORIGIN_PARAM,
+  PICK_PARAM,
+  pickSelector,
+  startPicker
+};
+//# sourceMappingURL=pick.js.map

package/dist/pick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pick.ts"],"sourcesContent":["/**\n * \"Pick on your site\" (0.11.0). MRRocket's onboarding editor opens the site in a frame with\n * `?ck_embed=1&ck_pick=1&ck_origin=<the editor's origin>`: nothing is tracked (ck_embed), the element under the pointer\n * gets an outline with its selector, and a click picks it instead of doing what it does on the page. The selector goes to\n * the editor by postMessage, to that origin only; Esc tells it the person stopped. Only inside a frame, only with the\n * parameter: a normal visit never sees any of this.\n *\n * Messages to the editor: `{ type: \"mrrocket:pick-ready\" }` once listening, `{ type: \"mrrocket:picked\", selector, text }`\n * on a click, `{ type: \"mrrocket:pick-cancel\" }` on Esc.\n */\nexport const PICK_PARAM = \"ck_pick\";\nexport const PICK_ORIGIN_PARAM = \"ck_origin\";\n\nconst esc = (s: string) => (typeof CSS !== \"undefined\" && CSS.escape ? CSS.escape(s) : s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\\\${c}`));\n\n/** Classes worth naming: no state classes, no generated hashes or numbers (css-modules, tailwind arbitrary values). */\nconst stableClasses = (el: Element) =>\n    [...el.classList].filter((c) => c.length < 30 && !/\\d{2,}|[_-][a-z0-9]{5,}$|^(is|has)-|hover|active|focus|open|selected|:|\\[/.test(c)).slice(0, 2);\n\n/** A short CSS selector that finds this element, and only it, on the page. */\nexport const pickSelector = (el: Element): string => {\n    const doc = el.ownerDocument;\n    const unique = (sel: string) => {\n        try {\n            return doc.querySelectorAll(sel).length === 1;\n        } catch {\n            return false;\n        }\n    };\n    const named = el.getAttribute(\"data-ck-target\");\n    if (named) return `[data-ck-target=\"${named.replace(/\"/g, '\\\\\"')}\"]`;\n    if (el.id && !/\\d{3,}/.test(el.id) && unique(`#${esc(el.id)}`)) return `#${esc(el.id)}`;\n    const parts: string[] = [];\n    let node: Element | null = el;\n    while (node && node !== doc.documentElement && parts.length < 6) {\n        if (node !== el && node.id && !/\\d{3,}/.test(node.id)) {\n            parts.unshift(`#${esc(node.id)}`);\n            break;\n        }\n        const tag = node.tagName.toLowerCase();\n        const cls = stableClasses(node)\n            .map((c) => `.${esc(c)}`)\n            .join(\"\");\n        const parent: Element | null = node.parentElement;\n        const same = parent ? [...parent.children].filter((c) => c.tagName === node!.tagName) : [];\n        const nth = same.length > 1 ? `:nth-of-type(${same.indexOf(node) + 1})` : \"\";\n        parts.unshift(`${tag}${cls}${nth}`);\n        const sel = parts.join(\" > \");\n        if (unique(sel)) return sel;\n        node = parent;\n    }\n    return parts.join(\" > \");\n};\n\n/** Starts picking when the page was opened for it; returns how to stop, or null when it was not. */\nexport const startPicker = (): (() => void) | null => {\n    if (typeof window === \"undefined\" || window.top === window) return null;\n    const params = new URLSearchParams(window.location.search);\n    if (params.get(PICK_PARAM) !== \"1\") return null;\n    let origin: string;\n    try {\n        origin = new URL(params.get(PICK_ORIGIN_PARAM) ?? \"\").origin;\n    } catch {\n        return null;\n    }\n    if (!/^https?:\\/\\//.test(origin)) return null;\n    const send = (data: Record<string, unknown>) => window.parent.postMessage(data, origin);\n\n    const box = document.createElement(\"div\");\n    box.setAttribute(\"aria-hidden\", \"true\");\n    Object.assign(box.style, {\n        position: \"fixed\",\n        zIndex: \"2147483647\",\n        pointerEvents: \"none\",\n        border: \"2px solid #0ea5e9\",\n        background: \"rgba(14,165,233,.12)\",\n        borderRadius: \"6px\",\n        transition: \"all 60ms linear\",\n        display: \"none\",\n    });\n    const tag = document.createElement(\"div\");\n    Object.assign(tag.style, {\n        position: \"absolute\",\n        left: \"-2px\",\n        bottom: \"calc(100% + 4px)\",\n        font: \"600 11px/1.4 system-ui, sans-serif\",\n        color: \"#fff\",\n        background: \"#0c4a6e\",\n        padding: \"2px 6px\",\n        borderRadius: \"4px\",\n        whiteSpace: \"nowrap\",\n        maxWidth: \"360px\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n    });\n    box.appendChild(tag);\n    document.body.appendChild(box);\n\n    let current: Element | null = null;\n    const show = (el: Element | null) => {\n        current = el && el !== box && !box.contains(el) ? el : null;\n        if (!current) {\n            box.style.display = \"none\";\n            return;\n        }\n        const r = current.getBoundingClientRect();\n        Object.assign(box.style, { display: \"block\", left: `${r.left - 2}px`, top: `${r.top - 2}px`, width: `${r.width + 4}px`, height: `${r.height + 4}px` });\n        tag.textContent = pickSelector(current);\n    };\n    const move = (e: MouseEvent) => show(document.elementFromPoint(e.clientX, e.clientY));\n    const click = (e: MouseEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        const el = document.elementFromPoint(e.clientX, e.clientY) ?? current;\n        if (!el || el === box) return;\n        send({ type: \"mrrocket:picked\", selector: pickSelector(el), text: (el.textContent ?? \"\").trim().replace(/\\s+/g, \" \").slice(0, 80) });\n    };\n    const key = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") send({ type: \"mrrocket:pick-cancel\" });\n    };\n    // Capturing, so the page's own handlers (links, buttons) never see the picking click.\n    window.addEventListener(\"mousemove\", move, true);\n    window.addEventListener(\"click\", click, true);\n    window.addEventListener(\"keydown\", key, true);\n    send({ type: \"mrrocket:pick-ready\" });\n    return () => {\n        window.removeEventListener(\"mousemove\", move, true);\n        window.removeEventListener(\"click\", click, true);\n        window.removeEventListener(\"keydown\", key, true);\n        box.remove();\n    };\n};\n"],"mappings":"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","names":[]}

package/dist/react-native/index.d.cts

@@ -224,7 +224,9 @@ type Api = ReturnType<typeof createApi>;
  *   `finished` with `outcome: "saved"` into a save and with `outcome: "cancelled"` into a cancellation on the Churn page.
  *   MRRocket never changes a subscription: an accepted offer goes to the app's `onSave`, a confirmed cancel to its
  *   `onCancel`, and only after they succeed is the outcome recorded.
- * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`.
+ * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`; since 0.11.0 a wait records
+ *   "shown" when the person reaches it and "completed" when it is over, a condition `{action: "answered", answer: "yes"
+ *   | "no"}` once it is decided.
  * - `$inapp` `{message, journey, action: "shown" | "clicked" | "dismissed"}`; the journey moves the person on.
  */
 
@@ -276,13 +278,37 @@ interface OnboardingStep {
     /** Checklist items: the event that ticks them (`track("<event>")`). Without it the person ticks it themselves. */
     event?: string;
 }
+/** A pause in a flow (0.11.0): the next step shows this long after the one before was done. */
+interface OnboardingWait {
+    id: string;
+    kind: "wait";
+    amount: number;
+    unit: "hours" | "days";
+}
+/**
+ * A fork in a flow (0.11.0): "Did <event> happen?" (the person's events, here and on MRRocket) or "Is on <page>?" (the
+ * page they are on when they reach it; `*` at the end for everything below). Decided once, when the person reaches it;
+ * like a journey's branch it ends its line, the rest of the flow lives in its two paths.
+ */
+interface OnboardingCondition {
+    id: string;
+    kind: "condition";
+    event?: string;
+    page?: string;
+    yes: OnboardingNode[];
+    no: OnboardingNode[];
+}
+type OnboardingNode = OnboardingStep | OnboardingWait | OnboardingCondition;
 /** A live onboarding flow's in-app steps (MRRocket › Conversion › Onboarding); its emails go out from MRRocket. */
 interface OnboardingFlow {
     id: string;
     name: string;
     /** When it starts: an event's words ("Signed up", "First export"), or "First launch" / "First visit". */
     trigger: string;
+    /** What every version shows: with `nodes`, only the in-app steps before the first wait or condition. */
     steps: OnboardingStep[];
+    /** 0.11.0+: the whole flow with its waits and conditions. Read instead of `steps` when it is there. */
+    nodes?: OnboardingNode[];
 }
 /** An in-app message a Lifecycle journey has for this person. */
 interface InAppMessage {
@@ -395,7 +421,7 @@ interface FlowsController {
 
 type VariantId = string;
 /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
-declare const SDK_VERSION = "0.10.0";
+declare const SDK_VERSION = "0.11.0";
 /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
 interface VariantConfig {
     id: VariantId;

package/dist/react-native/index.d.ts

@@ -224,7 +224,9 @@ type Api = ReturnType<typeof createApi>;
  *   `finished` with `outcome: "saved"` into a save and with `outcome: "cancelled"` into a cancellation on the Churn page.
  *   MRRocket never changes a subscription: an accepted offer goes to the app's `onSave`, a confirmed cancel to its
  *   `onCancel`, and only after they succeed is the outcome recorded.
- * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`.
+ * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`; since 0.11.0 a wait records
+ *   "shown" when the person reaches it and "completed" when it is over, a condition `{action: "answered", answer: "yes"
+ *   | "no"}` once it is decided.
  * - `$inapp` `{message, journey, action: "shown" | "clicked" | "dismissed"}`; the journey moves the person on.
  */
 
@@ -276,13 +278,37 @@ interface OnboardingStep {
     /** Checklist items: the event that ticks them (`track("<event>")`). Without it the person ticks it themselves. */
     event?: string;
 }
+/** A pause in a flow (0.11.0): the next step shows this long after the one before was done. */
+interface OnboardingWait {
+    id: string;
+    kind: "wait";
+    amount: number;
+    unit: "hours" | "days";
+}
+/**
+ * A fork in a flow (0.11.0): "Did <event> happen?" (the person's events, here and on MRRocket) or "Is on <page>?" (the
+ * page they are on when they reach it; `*` at the end for everything below). Decided once, when the person reaches it;
+ * like a journey's branch it ends its line, the rest of the flow lives in its two paths.
+ */
+interface OnboardingCondition {
+    id: string;
+    kind: "condition";
+    event?: string;
+    page?: string;
+    yes: OnboardingNode[];
+    no: OnboardingNode[];
+}
+type OnboardingNode = OnboardingStep | OnboardingWait | OnboardingCondition;
 /** A live onboarding flow's in-app steps (MRRocket › Conversion › Onboarding); its emails go out from MRRocket. */
 interface OnboardingFlow {
     id: string;
     name: string;
     /** When it starts: an event's words ("Signed up", "First export"), or "First launch" / "First visit". */
     trigger: string;
+    /** What every version shows: with `nodes`, only the in-app steps before the first wait or condition. */
     steps: OnboardingStep[];
+    /** 0.11.0+: the whole flow with its waits and conditions. Read instead of `steps` when it is there. */
+    nodes?: OnboardingNode[];
 }
 /** An in-app message a Lifecycle journey has for this person. */
 interface InAppMessage {
@@ -395,7 +421,7 @@ interface FlowsController {
 
 type VariantId = string;
 /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
-declare const SDK_VERSION = "0.10.0";
+declare const SDK_VERSION = "0.11.0";
 /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
 interface VariantConfig {
     id: VariantId;

package/dist/react-native/index.js

@@ -49,7 +49,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.10.0";
+var SDK_VERSION = "0.11.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -329,6 +329,19 @@ var safeUrl = (url) => {
   const u = (url ?? "").trim();
   return /^https?:\/\//i.test(u) || /^\/(?!\/)/.test(u) ? u : void 0;
 };
+var nodesOf = (f) => f.nodes ?? f.steps;
+var waitMs = (w) => Math.max(0, w.amount) * (w.unit === "hours" ? 36e5 : 864e5);
+var pageMatches = (pattern, path) => {
+  const p = pattern.trim();
+  const at = (path.split(/[?#]/)[0] || "/").replace(/\/+$/, "") || "/";
+  if (!p) return false;
+  if (p.endsWith("*")) {
+    const base = p.slice(0, -1).replace(/\/+$/, "");
+    return !base || at === base || at.startsWith(`${base}/`);
+  }
+  return at === (p.replace(/\/+$/, "") || "/");
+};
+var stepsIn = (nodes) => nodes.flatMap((n) => n.kind === "condition" ? [...stepsIn(n.yes), ...stepsIn(n.no)] : n.kind === "wait" ? [] : [n]);
 var createFlows = (env) => {
   let config = null;
   let cancel = null;
@@ -343,25 +356,99 @@ var createFlows = (env) => {
   const shown = /* @__PURE__ */ new Set();
   const listeners = /* @__PURE__ */ new Set();
   const auto = env.auto !== false;
+  const seenEvents = /* @__PURE__ */ new Set();
+  const now = () => env.now?.() ?? Date.now();
+  let timer = null;
   const flows = () => config?.onboarding ?? [];
   const flowById = (id) => id ? flows().find((f) => f.id === id) : void 0;
   const prog = (id) => {
     let p = progress.get(id);
-    if (!p) progress.set(id, p = { done: /* @__PURE__ */ new Set(), dismissed: false });
+    if (!p) progress.set(id, p = { done: /* @__PURE__ */ new Set(), dismissed: false, answers: /* @__PURE__ */ new Map(), at: /* @__PURE__ */ new Map(), reached: /* @__PURE__ */ new Map() });
     return p;
   };
+  let dirty = false;
+  const record = (props) => {
+    env.track(ONBOARDING_EVENT, props);
+    dirty = true;
+  };
+  const markDone = (p, id) => {
+    p.done.add(id);
+    p.at.set(id, now());
+  };
+  const decide = (c) => {
+    if (c.page?.trim()) {
+      const path = env.path?.();
+      return path === void 0 ? false : pageMatches(c.page, path);
+    }
+    if (c.event?.trim()) {
+      if (!known) return void 0;
+      for (const e of seenEvents) if (matchesTrigger(c.event, e)) return true;
+      return false;
+    }
+    return false;
+  };
+  const walkLine = (flow, line, p, live, before = 0, last) => {
+    for (let i = 0; i < line.length; i++) {
+      const n = line[i];
+      if (n.kind === "wait") {
+        if (p.done.has(n.id)) {
+          last = p.at.get(n.id) ?? last;
+          continue;
+        }
+        let since = p.reached.get(n.id);
+        if (since === void 0) {
+          if (!live) return { at: "pending" };
+          since = last ?? now();
+          p.reached.set(n.id, since);
+          record({ flow: flow.id, step: n.id, kind: "wait", action: "shown" });
+        }
+        const until = since + waitMs(n);
+        if (now() < until) return { at: "wait", until };
+        if (!live) return { at: "pending" };
+        markDone(p, n.id);
+        record({ flow: flow.id, step: n.id, kind: "wait", action: "completed" });
+        last = until;
+        continue;
+      }
+      if (n.kind === "condition") {
+        let answer = p.answers.get(n.id);
+        if (answer === void 0) {
+          if (!live) return { at: "pending" };
+          answer = decide(n);
+          if (answer === void 0) return { at: "pending" };
+          p.answers.set(n.id, answer);
+          record({ flow: flow.id, step: n.id, kind: "condition", action: "answered", answer: answer ? "yes" : "no" });
+        }
+        return walkLine(flow, answer ? n.yes : n.no, p, live, before, last);
+      }
+      if (!p.done.has(n.id)) return { at: "step", step: n, line, index: i, before };
+      last = p.at.get(n.id) ?? last;
+      before++;
+    }
+    return { at: "end" };
+  };
   const finished = (f) => {
     const p = progress.get(f.id);
-    return !!p && (p.dismissed || f.steps.every((s) => p.done.has(s.id)));
+    return !!p && (p.dismissed || walkLine(f, nodesOf(f), p, false).at === "end");
   };
   const keyOf = (pid) => `${PROGRESS_KEY}:${pid ?? "visitor"}`;
+  const eventsKeyOf = (pid) => `${PROGRESS_KEY}:events:${pid ?? "visitor"}`;
   const save = () => {
+    dirty = false;
     const store = env.storage?.();
     if (!store) return;
     const out = {};
-    for (const [id, p] of progress) out[id] = { done: [...p.done], ...p.dismissed ? { dismissed: true } : {} };
+    for (const [id, p] of progress)
+      out[id] = {
+        done: [...p.done],
+        ...p.dismissed ? { dismissed: true } : {},
+        ...p.answers.size ? { answers: Object.fromEntries([...p.answers].map(([k, v]) => [k, v ? "yes" : "no"])) } : {},
+        ...p.at.size ? { at: Object.fromEntries(p.at) } : {},
+        ...p.reached.size ? { reached: Object.fromEntries(p.reached) } : {}
+      };
     try {
       store.set(keyOf(env.personId()), JSON.stringify(out));
+      if (seenEvents.size) store.set(eventsKeyOf(env.personId()), JSON.stringify([...seenEvents].slice(-200)));
     } catch {
     }
   };
@@ -370,23 +457,55 @@ var createFlows = (env) => {
       const p = prog(id);
       for (const d of s.done ?? []) p.done.add(d);
       if (s.dismissed) p.dismissed = true;
+      for (const [k, v] of Object.entries(s.answers ?? {})) if (!p.answers.has(k)) p.answers.set(k, v === "yes");
+      for (const [k, v] of Object.entries(s.at ?? {})) if (typeof v === "number" && !p.at.has(k)) p.at.set(k, v);
+      for (const [k, v] of Object.entries(s.reached ?? {})) if (typeof v === "number" && (!p.reached.has(k) || v < p.reached.get(k))) p.reached.set(k, v);
+    }
+  };
+  const wakeAt = (until) => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    const ms = until - now();
+    if (ms > 0 && ms <= 864e5) {
+      timer = setTimeout(() => (timer = null, emit()), ms + 50);
+      timer.unref?.();
     }
   };
+  let holding = false;
   const onboardingView = () => {
+    holding = false;
     const flow = flowById(active);
     if (!flow) return null;
     const p = prog(flow.id);
-    const at = flow.steps.findIndex((s) => !p.done.has(s.id));
-    if (at < 0 || p.dismissed) return null;
-    const step = flow.steps[at];
+    if (p.dismissed) return null;
+    const w = walkLine(flow, nodesOf(flow), p, true);
+    if (dirty) save();
+    if (w.at === "wait") wakeAt(w.until);
+    holding = w.at === "wait" || w.at === "pending";
+    if (w.at !== "step") return null;
+    const { step, line, index } = w;
+    const isStep = (n) => !!n && n.kind !== "wait" && n.kind !== "condition";
     if (step.kind === "checklist") {
-      let from = at;
-      while (from > 0 && flow.steps[from - 1].kind === "checklist") from--;
-      let to = at;
-      while (to + 1 < flow.steps.length && flow.steps[to + 1].kind === "checklist") to++;
-      return { type: "checklist", flow, items: flow.steps.slice(from, to + 1).map((s) => ({ step: s, done: p.done.has(s.id) })) };
+      let from = index;
+      while (from > 0 && isStep(line[from - 1]) && line[from - 1].kind === "checklist") from--;
+      let to = index;
+      while (to + 1 < line.length && isStep(line[to + 1]) && line[to + 1].kind === "checklist") to++;
+      const items = line.slice(from, to + 1).filter(isStep);
+      for (const i of items)
+        if (!p.done.has(i.id) && !shown.has(`s:${i.id}`)) {
+          shown.add(`s:${i.id}`);
+          env.track(ONBOARDING_EVENT, { flow: flow.id, step: i.id, kind: "checklist", action: "shown" });
+        }
+      return { type: "checklist", flow, items: items.map((s) => ({ step: s, done: p.done.has(s.id) })) };
+    }
+    if (!shown.has(`s:${step.id}`)) {
+      shown.add(`s:${step.id}`);
+      env.track(ONBOARDING_EVENT, { flow: flow.id, step: step.id, kind: step.kind, action: "shown" });
     }
-    return { type: "step", flow, step, index: at, total: flow.steps.length, last: at === flow.steps.length - 1 };
+    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 };
   };
   const view = () => {
     if (cancel) {
@@ -406,22 +525,13 @@ var createFlows = (env) => {
     }
     const ob = onboardingView();
     if (ob) return ob;
-    if (active) active = null;
+    if (active && !holding) active = null;
     const m = messages.find((x) => !handled.has(x.id));
     return m ? { type: "message", message: m } : null;
   };
   const emit = () => {
     const v = view();
-    if (v?.type === "step" && !shown.has(`s:${v.step.id}`)) {
-      shown.add(`s:${v.step.id}`);
-      env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "shown" });
-    } else if (v?.type === "checklist") {
-      for (const i of v.items)
-        if (!i.done && !shown.has(`s:${i.step.id}`)) {
-          shown.add(`s:${i.step.id}`);
-          env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: i.step.id, kind: "checklist", action: "shown" });
-        }
-    } else if (v?.type === "message" && !shown.has(`m:${v.message.id}`)) {
+    if (v?.type === "message" && !shown.has(`m:${v.message.id}`)) {
       shown.add(`m:${v.message.id}`);
       env.track(INAPP_EVENT, { message: v.message.id, journey: v.message.journey, action: "shown" });
     }
@@ -443,13 +553,14 @@ var createFlows = (env) => {
   const autoStart = () => {
     if (!auto || active || !known) return;
     if (!env.personId() && !env.storage?.()) return;
-    const next = flows().find((f) => startsOnLoad(f.trigger) && f.steps.length && !finished(f));
+    const next = flows().find((f) => startsOnLoad(f.trigger) && nodesOf(f).length && !finished(f));
     if (next) start(next);
   };
   const refresh = () => {
     const pid = env.personId();
     if (progressFor !== null && progressFor !== pid) {
       progress.clear();
+      seenEvents.clear();
       handled.clear();
       active = null;
       loadedFor = void 0;
@@ -461,6 +572,10 @@ var createFlows = (env) => {
         try {
           const raw = await store.get(keyOf(pid));
           if (raw) merge(JSON.parse(raw));
+          const seen = await store.get(eventsKeyOf(pid));
+          if (seen) {
+            for (const e of JSON.parse(seen)) if (typeof e === "string") seenEvents.add(e);
+          }
         } catch {
         }
       }
@@ -470,6 +585,7 @@ var createFlows = (env) => {
         const state = await env.fetchInApp(pid).catch(() => null);
         if (state && env.personId() === pid) {
           merge(state.onboarding);
+          for (const e of state.events ?? []) if (typeof e === "string") seenEvents.add(eventSlug(e));
           messages = (state.messages ?? []).filter((m) => m && m.id && m.title);
         }
       }
@@ -546,29 +662,32 @@ var createFlows = (env) => {
     refresh,
     onEvent: (name) => {
       if (!name || name.startsWith("$")) return;
+      const slug = eventSlug(name);
+      const fresh = !!slug && !seenEvents.has(slug);
+      if (fresh) seenEvents.add(slug);
       const flow = flowById(active);
       let ticked = false;
       if (flow) {
         const p = prog(flow.id);
-        for (const s of flow.steps)
+        for (const s of stepsIn(nodesOf(flow)))
           if (s.kind === "checklist" && s.event && !p.done.has(s.id) && matchesTrigger(s.event, name)) {
-            p.done.add(s.id);
+            markDone(p, s.id);
             ticked = true;
             env.track(ONBOARDING_EVENT, { flow: flow.id, step: s.id, kind: s.kind, action: "completed" });
           }
       }
-      if (ticked) {
+      if (ticked || fresh && flow) {
         save();
         emit();
-      }
+      } else if (fresh) save();
       if (!auto || !env.personId() && !env.storage?.()) return;
-      const next = flows().find((f) => f.steps.length && matchesTrigger(f.trigger, name) && !finished(f));
+      const next = flows().find((f) => nodesOf(f).length && matchesTrigger(f.trigger, name) && !finished(f));
       if (next) start(next);
     },
     openCancelFlow,
     startOnboarding: (id) => {
-      const f = id ? flowById(id) : flows().find((x) => x.steps.length && !finished(x));
-      if (!f || !f.steps.length) return false;
+      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !finished(x));
+      if (!f || !nodesOf(f).length) return false;
       const p = prog(f.id);
       p.dismissed = false;
       return start(f);
@@ -639,7 +758,7 @@ var createFlows = (env) => {
       next: () => {
         const v = onboardingView();
         if (v?.type !== "step") return;
-        prog(v.flow.id).done.add(v.step.id);
+        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" });
         save();
         emit();
@@ -649,7 +768,7 @@ var createFlows = (env) => {
         if (v?.type !== "checklist") return;
         const item = v.items.find((i) => i.step.id === stepId);
         if (!item || item.done) return;
-        prog(v.flow.id).done.add(stepId);
+        markDone(prog(v.flow.id), stepId);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
         save();
         emit();