@mrrocket/sdk 0.4.0 → 0.9.0

package/dist/browser.js

@@ -1,8 +1,9 @@
 "use client";
 
 // src/browser.ts
-import { CockpitProvider, Experiment, Text, useCockpit, useFlag, useFlagVariant, useVariant } from "./client.js";
+import { CockpitProvider, Experiment, Text, useCancelFlow, useCockpit, useFlag, useFlagVariant, usePush, useVariant } from "./client.js";
 import { FeedbackBoard, FeedbackWidget, useFeedback } from "./feedback.js";
+import { Messenger, useMessenger } from "./messenger.js";
 import { Survey } from "./survey.js";
 import {
   createApi
@@ -13,14 +14,18 @@ export {
   Experiment,
   FeedbackBoard,
   FeedbackWidget,
+  Messenger,
   Survey,
   Text,
   CSS as WIDGET_CSS,
   createApi,
+  useCancelFlow,
   useCockpit,
   useFeedback,
   useFlag,
   useFlagVariant,
+  useMessenger,
+  usePush,
   useStyles,
   useVariant
 };

package/dist/browser.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/browser.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Everything of the SDK that needs the browser or React state. It is its own file with the \"use client\" directive so\n * that the build keeps one client chunk: server components import these as client references, while the plain\n * helpers (`core`, `server`, `proxy`) stay free of the directive.\n */\nexport { CockpitProvider, Experiment, Text, useCockpit, useFlag, useFlagVariant, useVariant, type CockpitProviderProps } from \"./client\";\nexport { FeedbackBoard, FeedbackWidget, useFeedback, type FeedbackBoardProps, type FeedbackWidgetProps } from \"./feedback\";\nexport { Survey } from \"./survey\";\nexport type { CockpitUser } from \"./context\";\nexport {\n    type ChangelogEntry,\n    type FeedbackBoardInfo,\n    type FeedbackComment,\n    type FeedbackList,\n    type FeedbackPost,\n    type FeedbackRoadmap,\n    type PostStatus,\n    type SurveyAnswer,\n    type SurveyDefinition,\n    type SurveyQuestion,\n    type SurveyQuestionKind,\n    createApi,\n} from \"./api\";\nexport { CSS as WIDGET_CSS, useStyles } from \"./styles\";\n"],"mappings":";;;AAOA,SAAS,iBAAiB,YAAY,MAAM,YAAY,SAAS,gBAAgB,kBAA6C;AAC9H,SAAS,eAAe,gBAAgB,mBAAsE;AAC9G,SAAS,cAAc;AAEvB;AAAA,EAYI;AAAA,OACG;AACP,SAAgB,KAAY,iBAAiB;","names":[]}
+{"version":3,"sources":["../src/browser.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Everything of the SDK that needs the browser or React state. It is its own file with the \"use client\" directive so\n * that the build keeps one client chunk: server components import these as client references, while the plain\n * helpers (`core`, `server`, `proxy`) stay free of the directive.\n */\nexport { CockpitProvider, Experiment, Text, useCancelFlow, useCockpit, useFlag, useFlagVariant, usePush, useVariant, type CockpitProviderProps } from \"./client\";\nexport { FeedbackBoard, FeedbackWidget, useFeedback, type FeedbackBoardProps, type FeedbackWidgetProps } from \"./feedback\";\nexport { Messenger, useMessenger, type MessengerProps } from \"./messenger\";\nexport { Survey } from \"./survey\";\nexport type { CockpitUser } from \"./context\";\nexport {\n    type ChangelogEntry,\n    type ChatMessage,\n    type ChatThread,\n    type FeedbackBoardInfo,\n    type FeedbackComment,\n    type FeedbackList,\n    type FeedbackPost,\n    type FeedbackRoadmap,\n    type PostStatus,\n    type SurveyAnswer,\n    type SurveyDefinition,\n    type SurveyQuestion,\n    type SurveyQuestionKind,\n    createApi,\n} from \"./api\";\nexport { CSS as WIDGET_CSS, useStyles } from \"./styles\";\n"],"mappings":";;;AAOA,SAAS,iBAAiB,YAAY,MAAM,eAAe,YAAY,SAAS,gBAAgB,SAAS,kBAA6C;AACtJ,SAAS,eAAe,gBAAgB,mBAAsE;AAC9G,SAAS,WAAW,oBAAyC;AAC7D,SAAS,cAAc;AAEvB;AAAA,EAcI;AAAA,OACG;AACP,SAAgB,KAAY,iBAAiB;","names":[]}

package/dist/capture.d.ts

@@ -33,18 +33,6 @@ export declare const selectorOf: (el: Element) => string;
 export declare const labelOf: (el: Element) => string;
 /** The click's description, or null when it did not land on an element. */
 export declare const clickInfo: (e: MouseEvent) => ClickInfo | null;
-/**
- * Three or more clicks within one second on the same spot (30 pixels) are a rage click. `push` answers true once per
- * burst, on the third click.
- */
-export declare class RageDetector {
-    private readonly windowMs;
-    private readonly radius;
-    private readonly count;
-    private clicks;
-    private fired;
-    constructor(windowMs?: number, radius?: number, count?: number);
-    push(x: number, y: number, t: number): boolean;
-}
+export { RageDetector } from "./rage.js";
 /** How far down the page the visitor has seen, 0 to 100. */
 export declare const seenDepth: () => number;

package/dist/capture.js

@@ -1,4 +1,5 @@
 // src/capture.ts
+import { RageDetector } from "./rage.js";
 var INTERACTIVE = 'a[href],button,input,select,textarea,label,summary,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[role="checkbox"],[role="switch"],[onclick],[data-ck-goal]';
 var MASK_SELECTOR = "[data-ck-mask]";
 var BLOCK_ATTR_SELECTOR = "[data-ck-block]";
@@ -50,28 +51,6 @@ var clickInfo = (e) => {
     interactive: !!hit
   };
 };
-var RageDetector = class {
-  constructor(windowMs = 1e3, radius = 30, count = 3) {
-    this.windowMs = windowMs;
-    this.radius = radius;
-    this.count = count;
-  }
-  windowMs;
-  radius;
-  count;
-  clicks = [];
-  fired = false;
-  push(x, y, t) {
-    const near = this.clicks.filter((c) => t - c.t <= this.windowMs && Math.hypot(c.x - x, c.y - y) <= this.radius);
-    if (near.length !== this.clicks.length) this.fired = false;
-    this.clicks = [...near, { x, y, t }];
-    if (this.clicks.length >= this.count && !this.fired) {
-      this.fired = true;
-      return true;
-    }
-    return false;
-  }
-};
 var seenDepth = () => {
   const doc = document.documentElement;
   const h = Math.max(doc.scrollHeight, document.body?.scrollHeight ?? 0);

package/dist/capture.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/capture.ts"],"sourcesContent":["/**\n * Clicks and scroll depth for heatmaps, and the rage-click detector session recordings share. Small on purpose: it is\n * part of every page that uses the provider. Runs under the normal analytics consent; it never reads what anyone typed.\n *\n * A click is described by where it landed (x in CSS pixels with the viewport width, y in page pixels with the page\n * height), a short CSS selector and, for links and buttons only, a label of at most 40 characters. Nothing inside\n * `data-ck-mask` or `data-ck-block` gets a label, form fields never do.\n */\n\n/** Elements a click is meant for. A click on anything else is a dead click. */\nexport const INTERACTIVE =\n    'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"tab\"],[role=\"menuitem\"],[role=\"checkbox\"],[role=\"switch\"],[onclick],[data-ck-goal]';\n/** Text inside is masked in recordings and never becomes a click label. */\nexport const MASK_SELECTOR = \"[data-ck-mask]\";\n/** Left out of recordings entirely (a placeholder of the same size) and never labelled. */\nexport const BLOCK_ATTR_SELECTOR = \"[data-ck-block]\";\n\nexport interface ClickInfo {\n    /** Pointer position: x in CSS pixels from the left of the viewport, y in page pixels from the top of the document. */\n    x: number;\n    y: number;\n    /** Viewport width and height, and the page height, in CSS pixels. */\n    vw: number;\n    vh: number;\n    docH: number;\n    /** A short CSS path, like `main > section.pricing > button`. Ids and classes only, never text. */\n    selector: string;\n    /** For links and buttons: what they say (aria-label, title or text), at most 40 characters; else \"\". */\n    label: string;\n    /** On a link, button or field; false is a dead click. */\n    interactive: boolean;\n}\n\n/** Ids and classes that look generated (hashes, long numbers) say nothing across builds. */\nconst generated = /\\d{4,}|^[a-z]{1,3}-[a-z0-9]{5,}$|^_|__|css-|^sc-|^jsx-/i;\n\nconst part = (el: Element) => {\n    const tag = el.tagName.toLowerCase();\n    if (el.id && !generated.test(el.id) && el.id.length <= 40) return `${tag}#${el.id}`;\n    const cls = typeof el.className === \"string\" ? el.className.split(/\\s+/).filter((c) => c && !generated.test(c) && c.length <= 30 && !c.includes(\":\")) : [];\n    const base = cls.length ? `${tag}.${cls.slice(0, 2).join(\".\")}` : tag;\n    // Siblings of the same kind (two plain buttons side by side) are told apart by their place.\n    const same = el.parentElement ? [...el.parentElement.children].filter((c) => c.tagName === el.tagName) : [];\n    return same.length > 1 ? `${base}:nth-of-type(${same.indexOf(el) + 1})` : base;\n};\n\n/** A selector for the element, three levels at most; stops early at an id. */\nexport const selectorOf = (el: Element) => {\n    const out: string[] = [];\n    let cur: Element | null = el;\n    while (cur && out.length < 3 && cur.tagName && cur.tagName !== \"BODY\" && cur.tagName !== \"HTML\") {\n        const p = part(cur);\n        out.unshift(p);\n        if (p.includes(\"#\")) break;\n        cur = cur.parentElement;\n    }\n    return out.join(\" > \").slice(0, 160);\n};\n\nconst clean = (s: string | null | undefined) => (s ?? \"\").replace(/\\s+/g, \" \").trim().slice(0, 40);\n\n/** What a link or button says, never a field's value; \"\" inside masked or blocked parts. */\nexport const labelOf = (el: Element) => {\n    if (el.closest(`${MASK_SELECTOR},${BLOCK_ATTR_SELECTOR}`)) return \"\";\n    const tag = el.tagName.toLowerCase();\n    if (tag === \"input\") {\n        const type = (el.getAttribute(\"type\") ?? \"text\").toLowerCase();\n        return type === \"submit\" || type === \"button\" ? clean(el.getAttribute(\"aria-label\") ?? (el as HTMLInputElement).value) : clean(el.getAttribute(\"aria-label\"));\n    }\n    if (tag === \"select\" || tag === \"textarea\") return clean(el.getAttribute(\"aria-label\"));\n    return clean(el.getAttribute(\"aria-label\") ?? el.getAttribute(\"title\") ?? (el as HTMLElement).innerText ?? el.textContent);\n};\n\n/** The click's description, or null when it did not land on an element. */\nexport const clickInfo = (e: MouseEvent): ClickInfo | null => {\n    const target = e.target instanceof Element ? e.target : null;\n    if (!target) return null;\n    const hit = target.closest(INTERACTIVE);\n    const el = hit ?? target;\n    const doc = document.documentElement;\n    return {\n        x: Math.round(e.clientX),\n        y: Math.round(e.clientY + window.scrollY),\n        vw: window.innerWidth,\n        vh: window.innerHeight,\n        docH: Math.max(doc.scrollHeight, document.body?.scrollHeight ?? 0),\n        selector: selectorOf(el),\n        label: hit ? labelOf(hit) : \"\",\n        interactive: !!hit,\n    };\n};\n\n/**\n * Three or more clicks within one second on the same spot (30 pixels) are a rage click. `push` answers true once per\n * burst, on the third click.\n */\nexport class RageDetector {\n    private clicks: { x: number; y: number; t: number }[] = [];\n    private fired = false;\n    constructor(\n        private readonly windowMs = 1000,\n        private readonly radius = 30,\n        private readonly count = 3,\n    ) {}\n    push(x: number, y: number, t: number) {\n        const near = this.clicks.filter((c) => t - c.t <= this.windowMs && Math.hypot(c.x - x, c.y - y) <= this.radius);\n        if (near.length !== this.clicks.length) this.fired = false;\n        this.clicks = [...near, { x, y, t }];\n        if (this.clicks.length >= this.count && !this.fired) {\n            this.fired = true;\n            return true;\n        }\n        return false;\n    }\n}\n\n/** How far down the page the visitor has seen, 0 to 100. */\nexport const seenDepth = () => {\n    const doc = document.documentElement;\n    const h = Math.max(doc.scrollHeight, document.body?.scrollHeight ?? 0);\n    if (!h) return 0;\n    return Math.min(100, Math.round(((window.scrollY + window.innerHeight) / h) * 100));\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/capture.ts"],"sourcesContent":["/**\n * Clicks and scroll depth for heatmaps, and the rage-click detector session recordings share. Small on purpose: it is\n * part of every page that uses the provider. Runs under the normal analytics consent; it never reads what anyone typed.\n *\n * A click is described by where it landed (x in CSS pixels with the viewport width, y in page pixels with the page\n * height), a short CSS selector and, for links and buttons only, a label of at most 40 characters. Nothing inside\n * `data-ck-mask` or `data-ck-block` gets a label, form fields never do.\n */\n\n/** Elements a click is meant for. A click on anything else is a dead click. */\nexport const INTERACTIVE =\n    'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"tab\"],[role=\"menuitem\"],[role=\"checkbox\"],[role=\"switch\"],[onclick],[data-ck-goal]';\n/** Text inside is masked in recordings and never becomes a click label. */\nexport const MASK_SELECTOR = \"[data-ck-mask]\";\n/** Left out of recordings entirely (a placeholder of the same size) and never labelled. */\nexport const BLOCK_ATTR_SELECTOR = \"[data-ck-block]\";\n\nexport interface ClickInfo {\n    /** Pointer position: x in CSS pixels from the left of the viewport, y in page pixels from the top of the document. */\n    x: number;\n    y: number;\n    /** Viewport width and height, and the page height, in CSS pixels. */\n    vw: number;\n    vh: number;\n    docH: number;\n    /** A short CSS path, like `main > section.pricing > button`. Ids and classes only, never text. */\n    selector: string;\n    /** For links and buttons: what they say (aria-label, title or text), at most 40 characters; else \"\". */\n    label: string;\n    /** On a link, button or field; false is a dead click. */\n    interactive: boolean;\n}\n\n/** Ids and classes that look generated (hashes, long numbers) say nothing across builds. */\nconst generated = /\\d{4,}|^[a-z]{1,3}-[a-z0-9]{5,}$|^_|__|css-|^sc-|^jsx-/i;\n\nconst part = (el: Element) => {\n    const tag = el.tagName.toLowerCase();\n    if (el.id && !generated.test(el.id) && el.id.length <= 40) return `${tag}#${el.id}`;\n    const cls = typeof el.className === \"string\" ? el.className.split(/\\s+/).filter((c) => c && !generated.test(c) && c.length <= 30 && !c.includes(\":\")) : [];\n    const base = cls.length ? `${tag}.${cls.slice(0, 2).join(\".\")}` : tag;\n    // Siblings of the same kind (two plain buttons side by side) are told apart by their place.\n    const same = el.parentElement ? [...el.parentElement.children].filter((c) => c.tagName === el.tagName) : [];\n    return same.length > 1 ? `${base}:nth-of-type(${same.indexOf(el) + 1})` : base;\n};\n\n/** A selector for the element, three levels at most; stops early at an id. */\nexport const selectorOf = (el: Element) => {\n    const out: string[] = [];\n    let cur: Element | null = el;\n    while (cur && out.length < 3 && cur.tagName && cur.tagName !== \"BODY\" && cur.tagName !== \"HTML\") {\n        const p = part(cur);\n        out.unshift(p);\n        if (p.includes(\"#\")) break;\n        cur = cur.parentElement;\n    }\n    return out.join(\" > \").slice(0, 160);\n};\n\nconst clean = (s: string | null | undefined) => (s ?? \"\").replace(/\\s+/g, \" \").trim().slice(0, 40);\n\n/** What a link or button says, never a field's value; \"\" inside masked or blocked parts. */\nexport const labelOf = (el: Element) => {\n    if (el.closest(`${MASK_SELECTOR},${BLOCK_ATTR_SELECTOR}`)) return \"\";\n    const tag = el.tagName.toLowerCase();\n    if (tag === \"input\") {\n        const type = (el.getAttribute(\"type\") ?? \"text\").toLowerCase();\n        return type === \"submit\" || type === \"button\" ? clean(el.getAttribute(\"aria-label\") ?? (el as HTMLInputElement).value) : clean(el.getAttribute(\"aria-label\"));\n    }\n    if (tag === \"select\" || tag === \"textarea\") return clean(el.getAttribute(\"aria-label\"));\n    return clean(el.getAttribute(\"aria-label\") ?? el.getAttribute(\"title\") ?? (el as HTMLElement).innerText ?? el.textContent);\n};\n\n/** The click's description, or null when it did not land on an element. */\nexport const clickInfo = (e: MouseEvent): ClickInfo | null => {\n    const target = e.target instanceof Element ? e.target : null;\n    if (!target) return null;\n    const hit = target.closest(INTERACTIVE);\n    const el = hit ?? target;\n    const doc = document.documentElement;\n    return {\n        x: Math.round(e.clientX),\n        y: Math.round(e.clientY + window.scrollY),\n        vw: window.innerWidth,\n        vh: window.innerHeight,\n        docH: Math.max(doc.scrollHeight, document.body?.scrollHeight ?? 0),\n        selector: selectorOf(el),\n        label: hit ? labelOf(hit) : \"\",\n        interactive: !!hit,\n    };\n};\n\nexport { RageDetector } from \"./rage\";\n\n/** How far down the page the visitor has seen, 0 to 100. */\nexport const seenDepth = () => {\n    const doc = document.documentElement;\n    const h = Math.max(doc.scrollHeight, document.body?.scrollHeight ?? 0);\n    if (!h) return 0;\n    return Math.min(100, Math.round(((window.scrollY + window.innerHeight) / h) * 100));\n};\n"],"mappings":"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","names":[]}

package/dist/client.d.ts

@@ -1,6 +1,9 @@
 import { type ReactNode } from "react";
 import { type AttributionMode } from "./referral.js";
 import { type CockpitConfig, type ConsentChoice, type ConsentMode, type VariantId } from "./core.js";
+import type { PushResult, WebPushOptions } from "./push-web.js";
+import { type CancelFlowOptions, type CancelFlowResult } from "./flows.js";
+import type { FlowsTheme } from "./flows-ui.js";
 export interface CockpitProviderProps {
     /** The product's public key from Cockpit › Settings › SDK. Safe in the browser. Default: `NEXT_PUBLIC_MRROCKET_KEY`. */
     apiKey?: string;
@@ -48,6 +51,13 @@ export interface CockpitProviderProps {
     attribution?: AttributionMode;
     /** The query parameter of direct partner links, default `ref` (`https://your.site/?ref=maya`). */
     referralParam?: string;
+    /**
+     * Onboarding flows start on their own when the visitor does their trigger (default true). False: only
+     * `useCockpit().startOnboarding()` starts one. In-app messages and `openCancelFlow` work either way.
+     */
+    onboarding?: boolean;
+    /** The look of the cancel flow, onboarding and message dialogs: `{ theme: "dark", accent: "#0f766e", className }`. */
+    appearance?: FlowsTheme;
     children: ReactNode;
 }
 /**
@@ -57,7 +67,7 @@ export interface CockpitProviderProps {
  * `preview` forces variants for this render, for example from the `ck_preview` search param on the server,
  * so a Cockpit preview never flickers. Without it the provider reads the param itself after the first render.
  */
-export declare const CockpitProvider: ({ apiKey: apiKeyProp, host: hostProp, preview: forced, embedded: embeddedProp, config: bootstrapConfig, distinctId: bootstrapId, consent: consentProp, respectDnt, replay: replayProp, heatmaps, surveys, errors, release, attribution, referralParam, children, }: CockpitProviderProps) => import("react").JSX.Element;
+export declare const CockpitProvider: ({ apiKey: apiKeyProp, host: hostProp, preview: forced, embedded: embeddedProp, config: bootstrapConfig, distinctId: bootstrapId, consent: consentProp, respectDnt, replay: replayProp, heatmaps, surveys, errors, release, attribution, referralParam, onboarding, appearance, children, }: CockpitProviderProps) => import("react").JSX.Element;
 /**
  * `track`, `identify`, `captureError`, the consent mode, the replay consent and their setter, the visitor id and whether
  * the experiments and flags have loaded. `setConsent("cookies")` sets the mode, `setConsent({ replay: true })` the
@@ -73,6 +83,21 @@ export declare const useCockpit: () => {
     consent: ConsentMode;
     replay: boolean;
     setConsent: (choice: ConsentChoice) => void;
+    openCancelFlow: (options?: CancelFlowOptions) => Promise<CancelFlowResult>;
+    startOnboarding: (id?: string) => boolean;
+};
+/**
+ * Push notifications from your Lifecycle journeys for the signed-in person (`identify` first). Call `subscribe()` from
+ * a click: it asks the browser's permission and signs this browser up (your site hosts `/mrrocket-sw.js`). Call
+ * `unsubscribe()` on sign-out. Resolves with `{ status: "subscribed" | "denied" | "not-asked" | "unsupported" |
+ * "not-signed-in" | "error" }`.
+ *
+ *     const push = usePush();
+ *     <button onClick={() => push.subscribe()}>Turn on notifications</button>
+ */
+export declare const usePush: () => {
+    subscribe: (options?: WebPushOptions) => Promise<PushResult>;
+    unsubscribe: () => Promise<boolean>;
 };
 /**
  * A feature flag from MRRocket › Build › Feature flags: true while it is on for this visitor (its audience and rollout
@@ -101,3 +126,13 @@ export declare const Text: ({ id, children }: {
     id: string;
     children: string;
 }) => import("react").JSX.Element;
+/**
+ * The cancel flow you built in MRRocket › Churn › Cancel flow. Call `open` from your Cancel button: it shows the flow
+ * and resolves with what the customer did. MRRocket never changes the subscription; your `onCancel` and `onSave` do.
+ *
+ *     const cancelFlow = useCancelFlow();
+ *     <button onClick={() => cancelFlow.open({ customer: "business", onCancel: cancelSubscription, onSave: applyOffer })}>
+ */
+export declare const useCancelFlow: () => {
+    open: (options?: CancelFlowOptions) => Promise<CancelFlowResult>;
+};

package/dist/client.js

@@ -18,19 +18,25 @@ import {
 } from "./referral.js";
 import {
   EMBED_PARAM,
+  EXPOSURE_PARAM,
   ID_COOKIE,
   PREVIEW_PARAM,
   SDK_VERSION,
   SESSION_COOKIE,
   envKey,
+  experimentsOfText,
+  exposureFrom,
   flagFor,
   parsePreview,
+  redirectFor,
   resolveHost,
   resolveVariant,
   textChanges
 } from "./core.js";
 import { bodies } from "./batch.js";
 import { YEAR_S, deleteCookie, enterPage, page, privacySignal, touchSession, visitorId, writeCookie } from "./web-state.js";
+import { createFlows } from "./flows.js";
+import { forgetFlowsStorage, webFlowsEnv } from "./flows-web.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var warned = /* @__PURE__ */ new Set();
 var warnOnce = (message) => {
@@ -54,6 +60,8 @@ var CockpitProvider = ({
   release,
   attribution = "consent",
   referralParam = "ref",
+  onboarding = true,
+  appearance,
   children
 }) => {
   const pathname = usePathname();
@@ -115,6 +123,7 @@ var CockpitProvider = ({
       deleteCookie(ID_COOKIE);
       deleteCookie(SESSION_COOKIE);
       forgetStoredDismissals();
+      forgetFlowsStorage();
     }
     if (effectiveConsent === "off") {
       queue.current.length = 0;
@@ -196,12 +205,24 @@ var CockpitProvider = ({
   }, []);
   const replayer = useRef(null);
   const errorer = useRef(null);
+  const flowsRef = useRef(null);
+  const flows = flowsRef.current ??= createFlows(
+    webFlowsEnv({
+      host,
+      apiKey,
+      track: (event, props) => record(event, props),
+      personId: () => live.current.tracking && live.current.identified ? live.current.distinctId : void 0,
+      canStore: () => live.current.persist,
+      auto: onboarding
+    })
+  );
   const track = useCallback(
     (event, props) => {
       record(event, props);
       if (live.current.tracking) replayer.current?.event(event);
+      flows.onEvent(event);
     },
-    [record]
+    [record, flows]
   );
   const identify = useCallback(
     (id, props) => {
@@ -268,6 +289,35 @@ var CockpitProvider = ({
     },
     [pathname, track, tracking]
   );
+  const decided = useRef(null);
+  const arrived = useRef(void 0);
+  useEffect(() => {
+    if (!ready || !visitor) return;
+    if (decided.current?.path !== pathname) {
+      const r2 = redirectFor(config, window.location.href, distinctId, preview);
+      decided.current = { path: pathname, r: r2 };
+      if (r2?.to) {
+        flush(true);
+        window.location.replace(r2.to);
+        return;
+      }
+    }
+    if (arrived.current === void 0) {
+      const params = new URLSearchParams(window.location.search);
+      arrived.current = params.get(EXPOSURE_PARAM);
+      if (arrived.current !== null) {
+        params.delete(EXPOSURE_PARAM);
+        const q = params.toString();
+        window.history.replaceState(window.history.state, "", `${window.location.pathname}${q ? `?${q}` : ""}${window.location.hash}`);
+      }
+    }
+    if (!tracking) return;
+    const r = decided.current.r;
+    if (r?.experiment && !r.to) expose(r.experiment, r.variant);
+    const x = exposureFrom(config, arrived.current);
+    if (x) expose(x.experiment, x.variant);
+    arrived.current = null;
+  }, [ready, visitor, pathname, config, distinctId, preview, tracking, expose, flush]);
   useEffect(() => {
     enterPage();
     replayer.current?.page(pathname);
@@ -378,10 +428,102 @@ var CockpitProvider = ({
       if (replayer.current === handle) replayer.current = null;
     };
   }, [recording, replayConfig, host, apiKey]);
+  useEffect(() => {
+    if (!ready || !visitor || embedded) return;
+    flows.setConfig(config);
+    void flows.refresh();
+  }, [flows, ready, visitor, embedded, config, identified, tracking, effectiveConsent]);
+  const look = useRef(appearance);
+  look.current = appearance;
+  useEffect(() => {
+    if (embedded) return;
+    let unmount = null;
+    let loading = false;
+    let gone = false;
+    const show = () => {
+      if (unmount || loading || !flows.view()) return;
+      loading = true;
+      void (typeof window === "undefined" ? Promise.resolve(null) : import("./flows-ui.js")).then((m) => {
+        if (!m || gone) return;
+        unmount = m.mountFlows(flows, look.current);
+      }).catch(() => warnOnce("The cancel flow and onboarding dialogs did not load.")).finally(() => {
+        loading = false;
+      });
+    };
+    const off = flows.subscribe(show);
+    show();
+    return () => {
+      gone = true;
+      off();
+      unmount?.();
+    };
+  }, [flows, embedded]);
+  const openCancelFlow = useCallback((options) => flows.openCancelFlow(options), [flows]);
+  const startOnboarding = useCallback((id) => flows.startOnboarding(id), [flows]);
+  const subscribeToPush = useCallback(
+    (options) => {
+      if (typeof window === "undefined") return Promise.resolve({ status: "unsupported" });
+      const now = live.current;
+      const distinctId2 = now.tracking && now.identified ? now.distinctId : void 0;
+      if (!distinctId2) return Promise.resolve({ status: "not-signed-in" });
+      const N = window.Notification;
+      const permission = Promise.resolve(N && N.permission === "default" && options?.ask !== false ? N.requestPermission() : N?.permission);
+      return import("./push-web.js").then((m) => m.subscribeWebPush({ host, apiKey, distinctId: distinctId2, permission }, options));
+    },
+    [host, apiKey]
+  );
+  const unsubscribeFromPush = useCallback(
+    () => typeof window === "undefined" ? Promise.resolve(false) : import("./push-web.js").then((m) => m.unsubscribeWebPush({ host, apiKey, distinctId: live.current.identified ? live.current.distinctId : void 0 })),
+    [host, apiKey]
+  );
   const texts = useMemo(() => textChanges(config, distinctId, preview), [config, distinctId, preview]);
   const value = useMemo(
-    () => ({ apiKey, host, user, ready, distinctId, config, preview, embedded, consent, effectiveConsent, replayConsent, setConsent, texts, track, identify, expose, captureError }),
-    [apiKey, host, user, ready, distinctId, config, preview, embedded, consent, effectiveConsent, replayConsent, setConsent, texts, track, identify, expose, captureError]
+    () => ({
+      apiKey,
+      host,
+      user,
+      ready,
+      distinctId,
+      config,
+      preview,
+      embedded,
+      consent,
+      effectiveConsent,
+      replayConsent,
+      setConsent,
+      texts,
+      track,
+      identify,
+      expose,
+      captureError,
+      openCancelFlow,
+      startOnboarding,
+      subscribeToPush,
+      unsubscribeFromPush
+    }),
+    [
+      apiKey,
+      host,
+      user,
+      ready,
+      distinctId,
+      config,
+      preview,
+      embedded,
+      consent,
+      effectiveConsent,
+      replayConsent,
+      setConsent,
+      texts,
+      track,
+      identify,
+      expose,
+      captureError,
+      openCancelFlow,
+      startOnboarding,
+      subscribeToPush,
+      unsubscribeFromPush
+    ]
   );
   return /* @__PURE__ */ jsxs(Ctx.Provider, { value, children: [
     children,
@@ -389,8 +531,12 @@ var CockpitProvider = ({
   ] });
 };
 var useCockpit = () => {
-  const { track, identify, captureError, distinctId, ready, embedded, consent, replayConsent, setConsent } = useCtx();
-  return { track, identify, captureError, distinctId, ready, embedded, consent, replay: replayConsent, setConsent };
+  const { track, identify, captureError, distinctId, ready, embedded, consent, replayConsent, setConsent, openCancelFlow, startOnboarding } = useCtx();
+  return { track, identify, captureError, distinctId, ready, embedded, consent, replay: replayConsent, setConsent, openCancelFlow, startOnboarding };
+};
+var usePush = () => {
+  const { subscribeToPush, unsubscribeFromPush } = useCtx();
+  return useMemo(() => ({ subscribe: subscribeToPush, unsubscribe: unsubscribeFromPush }), [subscribeToPush, unsubscribeFromPush]);
 };
 var useFlag = (key) => useFlagValue(key) !== false;
 var useFlagVariant = (key) => {
@@ -414,16 +560,25 @@ var Experiment = ({ name, variants }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: variants[variant] ?? variants.control });
 };
 var Text = ({ id, children }) => {
-  const { texts } = useCtx();
+  const { texts, config, distinctId, preview, expose } = useCtx();
+  useEffect(() => {
+    for (const key of experimentsOfText(config, id)) expose(key, resolveVariant(key, config, distinctId, preview));
+  }, [config, id, distinctId, preview, expose]);
   return /* @__PURE__ */ jsx(Fragment, { children: texts[id] ?? children });
 };
+var useCancelFlow = () => {
+  const { openCancelFlow } = useCtx();
+  return useMemo(() => ({ open: openCancelFlow }), [openCancelFlow]);
+};
 export {
   CockpitProvider,
   Experiment,
   Text,
+  useCancelFlow,
   useCockpit,
   useFlag,
   useFlagVariant,
+  usePush,
   useVariant
 };
 //# sourceMappingURL=client.js.map