@stillkinetic/rn-sdk 0.1.0

package/README.md

@@ -0,0 +1,72 @@
+# @stillkinetic/rn-sdk
+
+Behavioral tracking + threshold-triggered Stripe billing for React Native apps.
+
+## Install
+
+```bash
+npm install @stillkinetic/rn-sdk @stripe/stripe-react-native
+```
+
+`@stripe/stripe-react-native` is a peer dependency. Follow its own native linking / pod install steps for iOS.
+
+Wrap your app root in Stripe's provider (required by `@stripe/stripe-react-native`):
+
+```tsx
+import { StripeProvider } from '@stripe/stripe-react-native';
+
+<StripeProvider publishableKey="pk_live_...">
+  <App />
+</StripeProvider>
+```
+
+## Usage
+
+```tsx
+import { useStillKinetic, CardBindScreen } from '@stillkinetic/rn-sdk';
+import { ScrollView, TextInput, Pressable, Text } from 'react-native';
+
+const config = {
+  appId: 'app_123',
+  apiKey: 'pk_app_abc',
+  apiBaseUrl: 'https://api.yourplatform.com',
+  stripePublishableKey: 'pk_live_...',
+  endUserId: currentUser.id,
+  trackedMetrics: ['stay_duration', 'type_speed'] as const,
+};
+
+function HomeScreen() {
+  const { onScroll, onChangeText, onPressIn } = useTrackPay(config, 'HomeScreen');
+
+  return (
+    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
+      <TextInput onChangeText={onChangeText} placeholder="Type here" />
+      <Pressable onPressIn={onPressIn}>
+        <Text>Tap me</Text>
+      </Pressable>
+    </ScrollView>
+  );
+}
+
+// One-time screen, shown once per end user before any charge can fire:
+function BillingSetupScreen({ navigation }) {
+  return (
+    <CardBindScreen
+      config={config}
+      defaultCap={{ amountCents: 5000, period: 'monthly' }}
+      onComplete={(result) => {
+        if (result.success) navigation.goBack();
+        else console.error(result.error);
+      }}
+    />
+  );
+}
+```
+
+## Screen focus vs mount/unmount
+
+`useStayTracker` (used internally by `useTrackPay`) starts/stops its timer on component mount/unmount and pauses on app background. If you use React Navigation and want stay-duration to reset per screen *focus* (not just mount), call `useTrackPay` inside a screen component that React Navigation actually unmounts on blur (e.g. within a stack navigator with `unmountOnBlur`), or wrap it in your own `useFocusEffect` that calls `tp.start()`/`stop()`-equivalent logic — the hook is intentionally simple so it composes with whatever navigation library you use.
+
+## Notes
+
+Same architecture as the web SDK: this package only reports metrics and handles the one-time card bind. All threshold evaluation and Stripe charges happen server-side.

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+import * as react_native from 'react-native';
+import React from 'react';
+
+type Metric = 'press_count' | 'scroll_length' | 'scroll_speed' | 'type_speed' | 'stay_duration' | 'swipe_count' | 'pinch_zoom_count' | 'long_press_count' | 'form_submit_count' | 'tab_switch_count' | 'search_count' | 'video_play_count' | 'video_watch_duration' | 'file_download_count' | 'share_count' | 'mouse_distance';
+declare const ALL_METRICS: Metric[];
+interface TrackEvent {
+    appId: string;
+    endUserId: string;
+    pageId: string;
+    metric: Metric;
+    value: number;
+    timestamp: number;
+}
+interface StillKineticConfig {
+    appId: string;
+    apiKey: string;
+    apiBaseUrl: string;
+    stripePublishableKey: string;
+    endUserId: string;
+    trackedMetrics: Metric[];
+    batchIntervalMs?: number;
+}
+interface SpendingCapInput {
+    amountCents: number;
+    period: 'weekly' | 'monthly';
+}
+interface CardBindResult {
+    success: boolean;
+    error?: string;
+}
+
+interface Props {
+    config: StillKineticConfig;
+    defaultCap: SpendingCapInput;
+    onComplete: (result: CardBindResult) => void;
+}
+/**
+ * Drop-in screen/component for the ONE-TIME card bind + spending cap flow.
+ * Render this once (e.g. on signup, or the first time a threshold is
+ * approached) — never per-transaction. After this succeeds, all future
+ * threshold charges fire server-side with no further screen.
+ */
+declare function CardBindScreen({ config, defaultCap, onComplete }: Props): React.JSX.Element;
+
+/**
+ * Primary hook for React Native screens. Give it the config, the current
+ * screen's pageId, and which metrics this app selected to track — it wires
+ * up whichever handlers are relevant and returns them for you to spread
+ * onto your components.
+ *
+ * const { onScroll, onChangeText, onPressIn } = useStillKinetic(config, 'HomeScreen');
+ *
+ * <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
+ *   <TextInput onChangeText={onChangeText} />
+ *   <Pressable onPressIn={onPressIn} />
+ * </ScrollView>
+ */
+declare function useStillKinetic(config: StillKineticConfig, pageId: string): {
+    onPressIn: (() => void) | undefined;
+    onScroll: ((e: react_native.NativeSyntheticEvent<react_native.NativeScrollEvent>) => void) | undefined;
+    onChangeText: ((text: string) => void) | undefined;
+};
+
+export { ALL_METRICS, type CardBindResult, CardBindScreen, type Metric, type SpendingCapInput, type StillKineticConfig, type TrackEvent, useStillKinetic };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import * as react_native from 'react-native';
+import React from 'react';
+
+type Metric = 'press_count' | 'scroll_length' | 'scroll_speed' | 'type_speed' | 'stay_duration' | 'swipe_count' | 'pinch_zoom_count' | 'long_press_count' | 'form_submit_count' | 'tab_switch_count' | 'search_count' | 'video_play_count' | 'video_watch_duration' | 'file_download_count' | 'share_count' | 'mouse_distance';
+declare const ALL_METRICS: Metric[];
+interface TrackEvent {
+    appId: string;
+    endUserId: string;
+    pageId: string;
+    metric: Metric;
+    value: number;
+    timestamp: number;
+}
+interface StillKineticConfig {
+    appId: string;
+    apiKey: string;
+    apiBaseUrl: string;
+    stripePublishableKey: string;
+    endUserId: string;
+    trackedMetrics: Metric[];
+    batchIntervalMs?: number;
+}
+interface SpendingCapInput {
+    amountCents: number;
+    period: 'weekly' | 'monthly';
+}
+interface CardBindResult {
+    success: boolean;
+    error?: string;
+}
+
+interface Props {
+    config: StillKineticConfig;
+    defaultCap: SpendingCapInput;
+    onComplete: (result: CardBindResult) => void;
+}
+/**
+ * Drop-in screen/component for the ONE-TIME card bind + spending cap flow.
+ * Render this once (e.g. on signup, or the first time a threshold is
+ * approached) — never per-transaction. After this succeeds, all future
+ * threshold charges fire server-side with no further screen.
+ */
+declare function CardBindScreen({ config, defaultCap, onComplete }: Props): React.JSX.Element;
+
+/**
+ * Primary hook for React Native screens. Give it the config, the current
+ * screen's pageId, and which metrics this app selected to track — it wires
+ * up whichever handlers are relevant and returns them for you to spread
+ * onto your components.
+ *
+ * const { onScroll, onChangeText, onPressIn } = useStillKinetic(config, 'HomeScreen');
+ *
+ * <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
+ *   <TextInput onChangeText={onChangeText} />
+ *   <Pressable onPressIn={onPressIn} />
+ * </ScrollView>
+ */
+declare function useStillKinetic(config: StillKineticConfig, pageId: string): {
+    onPressIn: (() => void) | undefined;
+    onScroll: ((e: react_native.NativeSyntheticEvent<react_native.NativeScrollEvent>) => void) | undefined;
+    onChangeText: ((text: string) => void) | undefined;
+};
+
+export { ALL_METRICS, type CardBindResult, CardBindScreen, type Metric, type SpendingCapInput, type StillKineticConfig, type TrackEvent, useStillKinetic };

package/dist/index.js

@@ -0,0 +1,413 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ALL_METRICS: () => ALL_METRICS,
+  CardBindScreen: () => CardBindScreen,
+  useStillKinetic: () => useStillKinetic
+});
+module.exports = __toCommonJS(index_exports);
+var import_react6 = require("react");
+
+// src/transport/batchSender.ts
+var import_react_native = require("react-native");
+var BatchSender = class {
+  constructor(config) {
+    this.config = config;
+    this.buffer = [];
+    this.timer = null;
+    this.maxBufferSize = 200;
+    this.appStateSub = null;
+    this.endpoint = `${config.apiBaseUrl.replace(/\/$/, "")}/api/events`;
+  }
+  start() {
+    const intervalMs = this.config.batchIntervalMs ?? 5e3;
+    this.timer = setInterval(() => this.flush(), intervalMs);
+    const handleAppStateChange = (state) => {
+      if (state === "background" || state === "inactive") this.flush();
+    };
+    this.appStateSub = import_react_native.AppState.addEventListener("change", handleAppStateChange);
+  }
+  stop() {
+    if (this.timer) clearInterval(this.timer);
+    this.appStateSub?.remove();
+    this.flush();
+  }
+  enqueue(event) {
+    this.buffer.push(event);
+    if (this.buffer.length >= this.maxBufferSize) this.flush();
+  }
+  flush() {
+    if (this.buffer.length === 0) return;
+    const events = this.buffer;
+    this.buffer = [];
+    this.sendWithRetry(events, 3);
+  }
+  sendWithRetry(events, retriesLeft) {
+    fetch(this.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-Key": this.config.apiKey
+      },
+      body: JSON.stringify({ appId: this.config.appId, events })
+    }).catch(() => {
+      if (retriesLeft > 0) {
+        const delay = Math.pow(2, 3 - retriesLeft) * 1e3;
+        setTimeout(() => this.sendWithRetry(events, retriesLeft - 1), delay);
+      }
+    });
+  }
+};
+
+// src/trackers/pressTracker.ts
+var import_react = require("react");
+function usePressTracker(config, sender, pageId) {
+  const onPressIn = (0, import_react.useCallback)(() => {
+    sender.enqueue({
+      appId: config.appId,
+      endUserId: config.endUserId,
+      pageId,
+      metric: "press_count",
+      value: 1,
+      timestamp: Date.now()
+    });
+  }, [config, sender, pageId]);
+  return { onPressIn };
+}
+
+// src/trackers/scrollTracker.ts
+var import_react2 = require("react");
+function useScrollTracker(config, sender, pageId, enabledMetrics) {
+  const lastY = (0, import_react2.useRef)(null);
+  const lastTimestamp = (0, import_react2.useRef)(Date.now());
+  const wantsLength = enabledMetrics.includes("scroll_length");
+  const wantsSpeed = enabledMetrics.includes("scroll_speed");
+  const onScroll = (0, import_react2.useCallback)(
+    (e) => {
+      if (!wantsLength && !wantsSpeed) return;
+      const currentY = e.nativeEvent.contentOffset.y;
+      const now = Date.now();
+      if (lastY.current === null) {
+        lastY.current = currentY;
+        lastTimestamp.current = now;
+        return;
+      }
+      const deltaY = Math.abs(currentY - lastY.current);
+      const deltaT = Math.max(now - lastTimestamp.current, 1);
+      if (deltaY > 0) {
+        if (wantsLength) {
+          sender.enqueue({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            pageId,
+            metric: "scroll_length",
+            value: deltaY,
+            timestamp: now
+          });
+        }
+        if (wantsSpeed) {
+          sender.enqueue({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            pageId,
+            metric: "scroll_speed",
+            value: deltaY / deltaT,
+            timestamp: now
+          });
+        }
+      }
+      lastY.current = currentY;
+      lastTimestamp.current = now;
+    },
+    [config, sender, pageId, wantsLength, wantsSpeed]
+  );
+  return { onScroll };
+}
+
+// src/trackers/typeTracker.ts
+var import_react3 = require("react");
+function useTypeTracker(config, sender, pageId) {
+  const timestamps = (0, import_react3.useRef)([]);
+  const lastLength = (0, import_react3.useRef)(0);
+  const windowMs = 1e4;
+  const onChangeText = (0, import_react3.useCallback)(
+    (text) => {
+      const now = Date.now();
+      const lengthDelta = text.length - lastLength.current;
+      lastLength.current = text.length;
+      if (lengthDelta === 0) return;
+      timestamps.current.push(now);
+      while (timestamps.current.length > 0 && now - timestamps.current[0] > windowMs) {
+        timestamps.current.shift();
+      }
+      if (timestamps.current.length < 2) return;
+      const elapsedMinutes = (now - timestamps.current[0]) / 6e4;
+      const charsPerMinute = elapsedMinutes > 0 ? timestamps.current.length / elapsedMinutes : 0;
+      sender.enqueue({
+        appId: config.appId,
+        endUserId: config.endUserId,
+        pageId,
+        metric: "type_speed",
+        value: Math.round(charsPerMinute),
+        timestamp: now
+      });
+    },
+    [config, sender, pageId]
+  );
+  return { onChangeText };
+}
+
+// src/trackers/stayTracker.ts
+var import_react4 = require("react");
+var import_react_native2 = require("react-native");
+function useStayTracker(config, sender, pageId) {
+  const activeMsRef = (0, import_react4.useRef)(0);
+  const segmentStart = (0, import_react4.useRef)(Date.now());
+  const intervalRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    const closeSegment = () => {
+      if (segmentStart.current !== null) {
+        activeMsRef.current += Date.now() - segmentStart.current;
+        segmentStart.current = null;
+      }
+    };
+    const openSegment = () => {
+      if (segmentStart.current === null) segmentStart.current = Date.now();
+    };
+    const report = () => {
+      closeSegment();
+      const elapsed = activeMsRef.current;
+      activeMsRef.current = 0;
+      if (elapsed > 0) {
+        sender.enqueue({
+          appId: config.appId,
+          endUserId: config.endUserId,
+          pageId,
+          metric: "stay_duration",
+          value: elapsed,
+          timestamp: Date.now()
+        });
+      }
+      openSegment();
+    };
+    const handleAppStateChange = (state) => {
+      if (state === "active") openSegment();
+      else closeSegment();
+    };
+    const sub = import_react_native2.AppState.addEventListener("change", handleAppStateChange);
+    intervalRef.current = setInterval(report, 5e3);
+    return () => {
+      closeSegment();
+      const remaining = activeMsRef.current;
+      if (remaining > 0) {
+        sender.enqueue({
+          appId: config.appId,
+          endUserId: config.endUserId,
+          pageId,
+          metric: "stay_duration",
+          value: remaining,
+          timestamp: Date.now()
+        });
+      }
+      sub.remove();
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [config, sender, pageId]);
+}
+
+// src/core/types.ts
+var ALL_METRICS = [
+  "press_count",
+  "scroll_length",
+  "scroll_speed",
+  "type_speed",
+  "stay_duration",
+  "swipe_count",
+  "pinch_zoom_count",
+  "long_press_count",
+  "form_submit_count",
+  "tab_switch_count",
+  "search_count",
+  "video_play_count",
+  "video_watch_duration",
+  "file_download_count",
+  "share_count",
+  "mouse_distance"
+];
+
+// src/billing/CardBindScreen.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_stripe_react_native = require("@stripe/stripe-react-native");
+function CardBindScreen({ config, defaultCap, onComplete }) {
+  const { confirmSetupIntent } = (0, import_stripe_react_native.useStripe)();
+  const [capAmount, setCapAmount] = (0, import_react5.useState)(String(defaultCap.amountCents / 100));
+  const [period, setPeriod] = (0, import_react5.useState)(defaultCap.period);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [errorMsg, setErrorMsg] = (0, import_react5.useState)(null);
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setErrorMsg(null);
+    try {
+      const setupResp = await fetch(
+        `${config.apiBaseUrl.replace(/\/$/, "")}/api/billing/setup-intent`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Api-Key": config.apiKey },
+          body: JSON.stringify({ appId: config.appId, endUserId: config.endUserId })
+        }
+      );
+      if (!setupResp.ok) throw new Error(`Setup failed (${setupResp.status})`);
+      const { clientSecret } = await setupResp.json();
+      const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
+        paymentMethodType: "Card"
+      });
+      if (error) throw new Error(error.message);
+      const paymentMethodId = setupIntent?.paymentMethodId;
+      if (!paymentMethodId) throw new Error("No payment method returned.");
+      const amountCents = Math.round(parseFloat(capAmount) * 100);
+      if (!Number.isFinite(amountCents) || amountCents <= 0) {
+        throw new Error("Enter a valid spending cap amount.");
+      }
+      const capResp = await fetch(
+        `${config.apiBaseUrl.replace(/\/$/, "")}/api/billing/end-user-config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Api-Key": config.apiKey },
+          body: JSON.stringify({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            paymentMethodId,
+            spendingCapCents: amountCents,
+            spendingCapPeriod: period
+          })
+        }
+      );
+      if (!capResp.ok) throw new Error(`Spending cap could not be saved (${capResp.status})`);
+      onComplete({ success: true });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setErrorMsg(message);
+      onComplete({ success: false, error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.container }, /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.title }, "Add a payment method"), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.subtitle }, "You'll be charged automatically based on usage in this app, up to the limit you set below. You can change or remove this at any time."), /* @__PURE__ */ import_react5.default.createElement(
+    import_stripe_react_native.CardField,
+    {
+      postalCodeEnabled: true,
+      style: styles.cardField,
+      placeholders: { number: "4242 4242 4242 4242" }
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.label }, "Spending cap ($)"), /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native3.TextInput,
+    {
+      style: styles.input,
+      keyboardType: "decimal-pad",
+      value: capAmount,
+      onChangeText: setCapAmount
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.label }, "Cap period"), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.periodRow }, ["weekly", "monthly"].map((p) => /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native3.Pressable,
+    {
+      key: p,
+      style: [styles.periodButton, period === p && styles.periodButtonActive],
+      onPress: () => setPeriod(p)
+    },
+    /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: period === p ? styles.periodTextActive : styles.periodText }, p === "weekly" ? "Weekly" : "Monthly")
+  ))), errorMsg && /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.error }, errorMsg), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Pressable, { style: styles.submitButton, onPress: handleSubmit, disabled: submitting }, /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.submitText }, submitting ? "Saving\u2026" : "Confirm")));
+}
+var styles = import_react_native3.StyleSheet.create({
+  container: { padding: 20 },
+  title: { fontSize: 18, fontWeight: "600", marginBottom: 8 },
+  subtitle: { fontSize: 13, color: "#555", marginBottom: 20 },
+  cardField: { height: 50, marginVertical: 12 },
+  label: { fontSize: 13, fontWeight: "500", marginTop: 12, marginBottom: 4 },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    fontSize: 16
+  },
+  periodRow: { flexDirection: "row", gap: 8, marginTop: 4 },
+  periodButton: {
+    flex: 1,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  periodButtonActive: { backgroundColor: "#111", borderColor: "#111" },
+  periodText: { color: "#111" },
+  periodTextActive: { color: "#fff" },
+  error: { color: "#c00", marginTop: 12 },
+  submitButton: {
+    marginTop: 24,
+    backgroundColor: "#111",
+    padding: 14,
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  submitText: { color: "#fff", fontWeight: "600" }
+});
+
+// src/index.ts
+function useStillKinetic(config, pageId) {
+  const senderRef = (0, import_react6.useRef)(null);
+  if (senderRef.current === null) {
+    senderRef.current = new BatchSender(config);
+    senderRef.current.start();
+  }
+  const sender = senderRef.current;
+  const metrics = config.trackedMetrics;
+  const { onPressIn } = usePressTracker(config, sender, pageId);
+  const { onScroll } = useScrollTracker(config, sender, pageId, metrics);
+  const { onChangeText } = useTypeTracker(config, sender, pageId);
+  useStayTracker(config, sender, pageId);
+  return (0, import_react6.useMemo)(
+    () => ({
+      onPressIn: metrics.includes("press_count") ? onPressIn : void 0,
+      onScroll: metrics.includes("scroll_length") || metrics.includes("scroll_speed") ? onScroll : void 0,
+      onChangeText: metrics.includes("type_speed") ? onChangeText : void 0
+    }),
+    [metrics, onPressIn, onScroll, onChangeText]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ALL_METRICS,
+  CardBindScreen,
+  useStillKinetic
+});

package/dist/index.mjs

@@ -0,0 +1,376 @@
+// src/index.ts
+import { useMemo, useRef as useRef4 } from "react";
+
+// src/transport/batchSender.ts
+import { AppState } from "react-native";
+var BatchSender = class {
+  constructor(config) {
+    this.config = config;
+    this.buffer = [];
+    this.timer = null;
+    this.maxBufferSize = 200;
+    this.appStateSub = null;
+    this.endpoint = `${config.apiBaseUrl.replace(/\/$/, "")}/api/events`;
+  }
+  start() {
+    const intervalMs = this.config.batchIntervalMs ?? 5e3;
+    this.timer = setInterval(() => this.flush(), intervalMs);
+    const handleAppStateChange = (state) => {
+      if (state === "background" || state === "inactive") this.flush();
+    };
+    this.appStateSub = AppState.addEventListener("change", handleAppStateChange);
+  }
+  stop() {
+    if (this.timer) clearInterval(this.timer);
+    this.appStateSub?.remove();
+    this.flush();
+  }
+  enqueue(event) {
+    this.buffer.push(event);
+    if (this.buffer.length >= this.maxBufferSize) this.flush();
+  }
+  flush() {
+    if (this.buffer.length === 0) return;
+    const events = this.buffer;
+    this.buffer = [];
+    this.sendWithRetry(events, 3);
+  }
+  sendWithRetry(events, retriesLeft) {
+    fetch(this.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-Key": this.config.apiKey
+      },
+      body: JSON.stringify({ appId: this.config.appId, events })
+    }).catch(() => {
+      if (retriesLeft > 0) {
+        const delay = Math.pow(2, 3 - retriesLeft) * 1e3;
+        setTimeout(() => this.sendWithRetry(events, retriesLeft - 1), delay);
+      }
+    });
+  }
+};
+
+// src/trackers/pressTracker.ts
+import { useCallback } from "react";
+function usePressTracker(config, sender, pageId) {
+  const onPressIn = useCallback(() => {
+    sender.enqueue({
+      appId: config.appId,
+      endUserId: config.endUserId,
+      pageId,
+      metric: "press_count",
+      value: 1,
+      timestamp: Date.now()
+    });
+  }, [config, sender, pageId]);
+  return { onPressIn };
+}
+
+// src/trackers/scrollTracker.ts
+import { useCallback as useCallback2, useRef } from "react";
+function useScrollTracker(config, sender, pageId, enabledMetrics) {
+  const lastY = useRef(null);
+  const lastTimestamp = useRef(Date.now());
+  const wantsLength = enabledMetrics.includes("scroll_length");
+  const wantsSpeed = enabledMetrics.includes("scroll_speed");
+  const onScroll = useCallback2(
+    (e) => {
+      if (!wantsLength && !wantsSpeed) return;
+      const currentY = e.nativeEvent.contentOffset.y;
+      const now = Date.now();
+      if (lastY.current === null) {
+        lastY.current = currentY;
+        lastTimestamp.current = now;
+        return;
+      }
+      const deltaY = Math.abs(currentY - lastY.current);
+      const deltaT = Math.max(now - lastTimestamp.current, 1);
+      if (deltaY > 0) {
+        if (wantsLength) {
+          sender.enqueue({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            pageId,
+            metric: "scroll_length",
+            value: deltaY,
+            timestamp: now
+          });
+        }
+        if (wantsSpeed) {
+          sender.enqueue({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            pageId,
+            metric: "scroll_speed",
+            value: deltaY / deltaT,
+            timestamp: now
+          });
+        }
+      }
+      lastY.current = currentY;
+      lastTimestamp.current = now;
+    },
+    [config, sender, pageId, wantsLength, wantsSpeed]
+  );
+  return { onScroll };
+}
+
+// src/trackers/typeTracker.ts
+import { useCallback as useCallback3, useRef as useRef2 } from "react";
+function useTypeTracker(config, sender, pageId) {
+  const timestamps = useRef2([]);
+  const lastLength = useRef2(0);
+  const windowMs = 1e4;
+  const onChangeText = useCallback3(
+    (text) => {
+      const now = Date.now();
+      const lengthDelta = text.length - lastLength.current;
+      lastLength.current = text.length;
+      if (lengthDelta === 0) return;
+      timestamps.current.push(now);
+      while (timestamps.current.length > 0 && now - timestamps.current[0] > windowMs) {
+        timestamps.current.shift();
+      }
+      if (timestamps.current.length < 2) return;
+      const elapsedMinutes = (now - timestamps.current[0]) / 6e4;
+      const charsPerMinute = elapsedMinutes > 0 ? timestamps.current.length / elapsedMinutes : 0;
+      sender.enqueue({
+        appId: config.appId,
+        endUserId: config.endUserId,
+        pageId,
+        metric: "type_speed",
+        value: Math.round(charsPerMinute),
+        timestamp: now
+      });
+    },
+    [config, sender, pageId]
+  );
+  return { onChangeText };
+}
+
+// src/trackers/stayTracker.ts
+import { useEffect, useRef as useRef3 } from "react";
+import { AppState as AppState2 } from "react-native";
+function useStayTracker(config, sender, pageId) {
+  const activeMsRef = useRef3(0);
+  const segmentStart = useRef3(Date.now());
+  const intervalRef = useRef3(null);
+  useEffect(() => {
+    const closeSegment = () => {
+      if (segmentStart.current !== null) {
+        activeMsRef.current += Date.now() - segmentStart.current;
+        segmentStart.current = null;
+      }
+    };
+    const openSegment = () => {
+      if (segmentStart.current === null) segmentStart.current = Date.now();
+    };
+    const report = () => {
+      closeSegment();
+      const elapsed = activeMsRef.current;
+      activeMsRef.current = 0;
+      if (elapsed > 0) {
+        sender.enqueue({
+          appId: config.appId,
+          endUserId: config.endUserId,
+          pageId,
+          metric: "stay_duration",
+          value: elapsed,
+          timestamp: Date.now()
+        });
+      }
+      openSegment();
+    };
+    const handleAppStateChange = (state) => {
+      if (state === "active") openSegment();
+      else closeSegment();
+    };
+    const sub = AppState2.addEventListener("change", handleAppStateChange);
+    intervalRef.current = setInterval(report, 5e3);
+    return () => {
+      closeSegment();
+      const remaining = activeMsRef.current;
+      if (remaining > 0) {
+        sender.enqueue({
+          appId: config.appId,
+          endUserId: config.endUserId,
+          pageId,
+          metric: "stay_duration",
+          value: remaining,
+          timestamp: Date.now()
+        });
+      }
+      sub.remove();
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [config, sender, pageId]);
+}
+
+// src/core/types.ts
+var ALL_METRICS = [
+  "press_count",
+  "scroll_length",
+  "scroll_speed",
+  "type_speed",
+  "stay_duration",
+  "swipe_count",
+  "pinch_zoom_count",
+  "long_press_count",
+  "form_submit_count",
+  "tab_switch_count",
+  "search_count",
+  "video_play_count",
+  "video_watch_duration",
+  "file_download_count",
+  "share_count",
+  "mouse_distance"
+];
+
+// src/billing/CardBindScreen.tsx
+import React, { useState } from "react";
+import { View, Text, TextInput, Pressable, StyleSheet } from "react-native";
+import { CardField, useStripe } from "@stripe/stripe-react-native";
+function CardBindScreen({ config, defaultCap, onComplete }) {
+  const { confirmSetupIntent } = useStripe();
+  const [capAmount, setCapAmount] = useState(String(defaultCap.amountCents / 100));
+  const [period, setPeriod] = useState(defaultCap.period);
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMsg, setErrorMsg] = useState(null);
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setErrorMsg(null);
+    try {
+      const setupResp = await fetch(
+        `${config.apiBaseUrl.replace(/\/$/, "")}/api/billing/setup-intent`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Api-Key": config.apiKey },
+          body: JSON.stringify({ appId: config.appId, endUserId: config.endUserId })
+        }
+      );
+      if (!setupResp.ok) throw new Error(`Setup failed (${setupResp.status})`);
+      const { clientSecret } = await setupResp.json();
+      const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
+        paymentMethodType: "Card"
+      });
+      if (error) throw new Error(error.message);
+      const paymentMethodId = setupIntent?.paymentMethodId;
+      if (!paymentMethodId) throw new Error("No payment method returned.");
+      const amountCents = Math.round(parseFloat(capAmount) * 100);
+      if (!Number.isFinite(amountCents) || amountCents <= 0) {
+        throw new Error("Enter a valid spending cap amount.");
+      }
+      const capResp = await fetch(
+        `${config.apiBaseUrl.replace(/\/$/, "")}/api/billing/end-user-config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Api-Key": config.apiKey },
+          body: JSON.stringify({
+            appId: config.appId,
+            endUserId: config.endUserId,
+            paymentMethodId,
+            spendingCapCents: amountCents,
+            spendingCapPeriod: period
+          })
+        }
+      );
+      if (!capResp.ok) throw new Error(`Spending cap could not be saved (${capResp.status})`);
+      onComplete({ success: true });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setErrorMsg(message);
+      onComplete({ success: false, error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(Text, { style: styles.title }, "Add a payment method"), /* @__PURE__ */ React.createElement(Text, { style: styles.subtitle }, "You'll be charged automatically based on usage in this app, up to the limit you set below. You can change or remove this at any time."), /* @__PURE__ */ React.createElement(
+    CardField,
+    {
+      postalCodeEnabled: true,
+      style: styles.cardField,
+      placeholders: { number: "4242 4242 4242 4242" }
+    }
+  ), /* @__PURE__ */ React.createElement(Text, { style: styles.label }, "Spending cap ($)"), /* @__PURE__ */ React.createElement(
+    TextInput,
+    {
+      style: styles.input,
+      keyboardType: "decimal-pad",
+      value: capAmount,
+      onChangeText: setCapAmount
+    }
+  ), /* @__PURE__ */ React.createElement(Text, { style: styles.label }, "Cap period"), /* @__PURE__ */ React.createElement(View, { style: styles.periodRow }, ["weekly", "monthly"].map((p) => /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      key: p,
+      style: [styles.periodButton, period === p && styles.periodButtonActive],
+      onPress: () => setPeriod(p)
+    },
+    /* @__PURE__ */ React.createElement(Text, { style: period === p ? styles.periodTextActive : styles.periodText }, p === "weekly" ? "Weekly" : "Monthly")
+  ))), errorMsg && /* @__PURE__ */ React.createElement(Text, { style: styles.error }, errorMsg), /* @__PURE__ */ React.createElement(Pressable, { style: styles.submitButton, onPress: handleSubmit, disabled: submitting }, /* @__PURE__ */ React.createElement(Text, { style: styles.submitText }, submitting ? "Saving\u2026" : "Confirm")));
+}
+var styles = StyleSheet.create({
+  container: { padding: 20 },
+  title: { fontSize: 18, fontWeight: "600", marginBottom: 8 },
+  subtitle: { fontSize: 13, color: "#555", marginBottom: 20 },
+  cardField: { height: 50, marginVertical: 12 },
+  label: { fontSize: 13, fontWeight: "500", marginTop: 12, marginBottom: 4 },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    fontSize: 16
+  },
+  periodRow: { flexDirection: "row", gap: 8, marginTop: 4 },
+  periodButton: {
+    flex: 1,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  periodButtonActive: { backgroundColor: "#111", borderColor: "#111" },
+  periodText: { color: "#111" },
+  periodTextActive: { color: "#fff" },
+  error: { color: "#c00", marginTop: 12 },
+  submitButton: {
+    marginTop: 24,
+    backgroundColor: "#111",
+    padding: 14,
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  submitText: { color: "#fff", fontWeight: "600" }
+});
+
+// src/index.ts
+function useStillKinetic(config, pageId) {
+  const senderRef = useRef4(null);
+  if (senderRef.current === null) {
+    senderRef.current = new BatchSender(config);
+    senderRef.current.start();
+  }
+  const sender = senderRef.current;
+  const metrics = config.trackedMetrics;
+  const { onPressIn } = usePressTracker(config, sender, pageId);
+  const { onScroll } = useScrollTracker(config, sender, pageId, metrics);
+  const { onChangeText } = useTypeTracker(config, sender, pageId);
+  useStayTracker(config, sender, pageId);
+  return useMemo(
+    () => ({
+      onPressIn: metrics.includes("press_count") ? onPressIn : void 0,
+      onScroll: metrics.includes("scroll_length") || metrics.includes("scroll_speed") ? onScroll : void 0,
+      onChangeText: metrics.includes("type_speed") ? onChangeText : void 0
+    }),
+    [metrics, onPressIn, onScroll, onChangeText]
+  );
+}
+export {
+  ALL_METRICS,
+  CardBindScreen,
+  useStillKinetic
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@stillkinetic/rn-sdk",
+  "version": "0.1.0",
+  "description": "Selectable-metric behavioral tracking with threshold-triggered Stripe billing, for React Native apps.",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist --clean --external react-native,react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --out-dir dist --watch --external react-native,react",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@stripe/stripe-react-native": "^0.37.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@stripe/stripe-react-native": "^0.37.3",
+    "@types/react": "^18.3.31",
+    "react": "^18.3.1",
+    "react-native": "^0.74.7",
+    "tsup": "^8.0.2",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}