@buoy-gg/shared-ui 7.0.21 → 7.0.23

package/lib/module/dataViewer/TimestampDeltaBar.js

@@ -0,0 +1,91 @@
+"use strict";
+
+/**
+ * TimestampDeltaBar — reads out the timestamp pairs in a diff.
+ *
+ * Sits under the diff summary and translates `1787085897165 → 1787012175875`
+ * into "20h 29m earlier", with both instants spelled out. The raw values stay
+ * on the rows below: this annotates the diff, it never replaces it.
+ *
+ * Renders nothing when no side of the diff is confidently a timestamp — see
+ * timestampDiff.ts for how narrow "confidently" is.
+ */
+import { memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TimestampDeltaBar = /*#__PURE__*/memo(function TimestampDeltaBar({
+  deltas,
+  theme
+}) {
+  if (deltas.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }],
+    children: deltas.map(delta => /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.glyph, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u25F7"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.text,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.headline,
+          children: [delta.path ? /*#__PURE__*/_jsxs(Text, {
+            style: [styles.path, {
+              color: theme.lineNumberText
+            }],
+            children: [delta.path, " "]
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: theme.summaryModifiedText
+            },
+            children: delta.deltaLabel
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.instants, {
+            color: theme.lineNumberText
+          }],
+          children: [delta.fromLabel, " \u2192 ", delta.toLabel]
+        })]
+      })]
+    }, delta.path ?? "__value__"))
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    gap: 6
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 7
+  },
+  glyph: {
+    fontSize: 12,
+    lineHeight: 15
+  },
+  text: {
+    flex: 1,
+    minWidth: 0
+  },
+  headline: {
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 15
+  },
+  path: {
+    fontWeight: "400"
+  },
+  instants: {
+    fontSize: 11,
+    marginTop: 1,
+    fontVariant: ["tabular-nums"]
+  }
+});

package/lib/module/dataViewer/index.js

@@ -33,6 +33,10 @@ export { DataTreeActionDock } from "./DataTreeActionDock.js";
 // Diff viewer components
 export { SplitDiffViewer } from "./SplitDiffViewer.js";
 export { DiffSummary } from "./DiffSummary.js";
+export { TimestampDeltaBar } from "./TimestampDeltaBar.js";
+export { JsonStringNotice } from "./JsonStringNotice.js";
+export { decodeJsonStringPair, parseJsonContainer } from "./jsonStringValue.js";
+export { detectTimestamp, describeTimestampDeltas, formatDuration, formatInstant } from "./timestampDiff.js";
 // Diff utilities and themes
 export { computeLineDiff, DiffType, ABSENT_VALUE, isAbsent } from "./lineDiff.js";
 export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.js";

package/lib/module/dataViewer/jsonStringValue.js

@@ -0,0 +1,89 @@
+"use strict";
+
+/**
+ * JSON-encoded string values in diffs.
+ *
+ * Every device storage backend stores STRINGS, so apps write
+ * `JSON.stringify(["pikachu"])` and the stored value is the six-character
+ * string `["pikachu"]`. Rendering that through the diff's own
+ * `JSON.stringify` escapes it a second time and you get `"[\"pikachu\"]"` on
+ * one unreadable line — and a real change (one entry added to a list of
+ * twenty) becomes a single modified line you can't read.
+ *
+ * So: when a side is a JSON-encoded OBJECT OR ARRAY, diff the decoded value
+ * and say so on screen. The label is the whole contract — the store really
+ * does hold a string, and a viewer that quietly showed an array without
+ * mentioning it would be lying about the shape of the data.
+ *
+ * Scalars are deliberately NOT decoded. Turning the stored string `"5"` into
+ * the number 5, or `"true"` into a boolean, changes the apparent type while
+ * adding no readability — the exact misrepresentation this is trying to
+ * avoid.
+ */
+import { isAbsent } from "./lineDiff.js";
+
+/**
+ * Parse a string that encodes a JSON object or array. Returns a wrapper so a
+ * successfully decoded `null`-ish payload is still distinguishable from "not
+ * decodable" (the prefix check makes that unreachable today, but callers
+ * shouldn't have to know that).
+ */
+export function parseJsonContainer(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  // Cheap gate before JSON.parse: only containers qualify, and this keeps a
+  // try/catch off the path for every ordinary string in a diff.
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    return {
+      value: parsed
+    };
+  } catch {
+    return null;
+  }
+}
+/** A side that carries no value at all — an add or a delete, not a change. */
+function isMissing(value) {
+  return isAbsent(value) || value === undefined || value === null;
+}
+
+/**
+ * Decode both sides of a diff when they are JSON-encoded containers.
+ *
+ * One side alone is decoded ONLY when the other side is missing entirely
+ * (a key being added or removed). A JSON string on one side and an ordinary
+ * value on the other is a change of shape, and decoding just one half would
+ * present it as something it isn't.
+ */
+export function decodeJsonStringPair(left, right) {
+  const decodedLeft = parseJsonContainer(left);
+  const decodedRight = parseJsonContainer(right);
+  if (decodedLeft && decodedRight) {
+    return {
+      left: decodedLeft.value,
+      right: decodedRight.value,
+      decoded: true
+    };
+  }
+  if (decodedLeft && isMissing(right)) {
+    return {
+      left: decodedLeft.value,
+      right,
+      decoded: true
+    };
+  }
+  if (decodedRight && isMissing(left)) {
+    return {
+      left,
+      right: decodedRight.value,
+      decoded: true
+    };
+  }
+  return {
+    left,
+    right,
+    decoded: false
+  };
+}

package/lib/module/dataViewer/timestampDiff.js

@@ -0,0 +1,139 @@
+"use strict";
+
+/**
+ * Timestamp detection for diff views.
+ *
+ * `1787085897165 → 1787012175875` is unreadable. It is also the single most
+ * common diff in a devtool: `lastSyncTimestamp`, `expiresAt`, `updatedAt`,
+ * every cache stamp. This turns that pair into "20h 29m earlier" plus both
+ * instants spelled out, WITHOUT hiding the raw values — a devtool that
+ * silently reinterprets what is stored is worse than one that says nothing.
+ *
+ * DETECTION IS DELIBERATELY NARROW, because the failure mode is confidently
+ * mislabelling an id or a counter as a date:
+ *  - Epoch milliseconds only in [2001-09-09, 2100), i.e. 13 digits.
+ *  - Epoch seconds only in the same window, i.e. 10 digits.
+ *    The two ranges cannot overlap, so a value is never ambiguous.
+ *  - ISO 8601 strings that both match the shape AND parse.
+ *  - BOTH sides must be the same kind. An ISO string against an epoch number
+ *    is a representation change, not a time delta, and reporting a gap there
+ *    would bury the more interesting fact.
+ */
+
+/** Units we recognize. A pair must agree on one of them. */
+
+/** 2001-09-09 — below this, a 13-digit-ish number is not a plausible stamp. */
+const MS_MIN = 1_000_000_000_000;
+/** 2100-01-01. */
+const MS_MAX = 4_102_444_800_000;
+const S_MIN = 1_000_000_000;
+const S_MAX = 4_102_444_800;
+
+/** Date, or date-time with optional seconds/fraction/zone. */
+const ISO_RE = /^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+function fromNumber(n) {
+  if (!Number.isInteger(n)) return null;
+  if (n >= MS_MIN && n < MS_MAX) return {
+    kind: "epoch-ms",
+    epochMs: n
+  };
+  if (n >= S_MIN && n < S_MAX) return {
+    kind: "epoch-s",
+    epochMs: n * 1000
+  };
+  return null;
+}
+
+/**
+ * Read one value as an instant, or null when it isn't confidently a time.
+ * Numeric strings count: storage backends hand back everything as strings.
+ */
+export function detectTimestamp(value) {
+  if (value instanceof Date) {
+    const ms = value.getTime();
+    return Number.isFinite(ms) ? {
+      kind: "iso",
+      epochMs: ms
+    } : null;
+  }
+  if (typeof value === "number") return fromNumber(value);
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  if (/^\d+$/.test(trimmed)) return fromNumber(Number(trimmed));
+  if (!ISO_RE.test(trimmed)) return null;
+  const parsed = Date.parse(trimmed);
+  return Number.isFinite(parsed) ? {
+    kind: "iso",
+    epochMs: parsed
+  } : null;
+}
+function two(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
+
+/** Local wall-clock, fixed format — a devtool wants it sortable, not chatty. */
+export function formatInstant(epochMs) {
+  const d = new Date(epochMs);
+  return `${d.getFullYear()}-${two(d.getMonth() + 1)}-${two(d.getDate())} ` + `${two(d.getHours())}:${two(d.getMinutes())}:${two(d.getSeconds())}`;
+}
+
+/** Coarsest two units that still carry the magnitude: "3d 4h", "5m 30s". */
+export function formatDuration(ms) {
+  const abs = Math.abs(ms);
+  if (abs < 1000) return `${abs}ms`;
+  const seconds = Math.floor(abs / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const restSeconds = seconds % 60;
+  if (minutes < 60) return restSeconds ? `${minutes}m ${restSeconds}s` : `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const restMinutes = minutes % 60;
+  if (hours < 24) return restMinutes ? `${hours}h ${restMinutes}m` : `${hours}h`;
+  const days = Math.floor(hours / 24);
+  const restHours = hours % 24;
+  return restHours ? `${days}d ${restHours}h` : `${days}d`;
+}
+function pair(oldValue, newValue, path) {
+  const before = detectTimestamp(oldValue);
+  const after = detectTimestamp(newValue);
+  if (!before || !after || before.kind !== after.kind) return null;
+  const deltaMs = after.epochMs - before.epochMs;
+  return {
+    path,
+    kind: before.kind,
+    deltaMs,
+    deltaLabel: deltaMs === 0 ? "same instant" : `${formatDuration(deltaMs)} ${deltaMs < 0 ? "earlier" : "later"}`,
+    fromLabel: formatInstant(before.epochMs),
+    toLabel: formatInstant(after.epochMs)
+  };
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+}
+
+/** Beyond a handful the bar stops being a summary and becomes the diff. */
+const MAX_DELTAS = 6;
+
+/**
+ * Every timestamp pair worth explaining in a diff of these two values.
+ *
+ * Scalars give at most one entry. Plain objects are inspected ONE level deep
+ * — enough for the `{ updatedAt, expiresAt }` shape that dominates, without
+ * walking a whole document to hunt for dates.
+ */
+export function describeTimestampDeltas(oldValue, newValue) {
+  const scalar = pair(oldValue, newValue);
+  if (scalar) return [scalar];
+  if (!isPlainObject(oldValue) || !isPlainObject(newValue)) return [];
+  const out = [];
+  for (const key of Object.keys(oldValue)) {
+    if (out.length >= MAX_DELTAS) break;
+    if (!(key in newValue)) continue;
+    // Unchanged stamps are noise: the point is explaining what MOVED.
+    if (Object.is(oldValue[key], newValue[key])) continue;
+    const entry = pair(oldValue[key], newValue[key], key);
+    if (entry) out.push(entry);
+  }
+  return out;
+}

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-15T04:40:03.239Z
+ * Generated at: 2026-08-19T20:01:42.950Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/index.js

@@ -33,13 +33,15 @@ registerStateSnapshotProvider, getStateSnapshotProviders, getStateSnapshotProvid
 superJsonSerialize, superJsonDeserialize,
 // JS-bundle reload (core's `app` adapter + perf-monitor's batch runner)
 reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS,
+// Dev-server origin — how a remote driver recovers an app that crashed too
+// hard to reload itself
+getDevServerOrigin,
 // Subscribable base class for self-managing listeners
 Subscribable,
 // Subscriber count notifier for cross-package notifications
 subscriberCountNotifier, subscribeToSubscriberCountChanges, notifySubscriberCountChange,
 // Safe expo-router wrappers (falls back to no-ops on RN CLI)
-useSafeRouter, useSafePathname, useSafeSegments, useSafeGlobalSearchParams, getSafeRouter, getSafeCurrentPathname, isExpoRouterAvailable } from "./utils/index.js";
-
+useSafeRouter, useSafePathname, useSafeSegments, useSafeGlobalSearchParams, getSafeRouter, getSafeCurrentPathname, getSafeCurrentRoute, isExpoRouterAvailable } from "./utils/index.js";
 // Also export formatting utils
 export * from "./utils/formatting/index.js";
 export * from "./utils/time/index.js";
@@ -80,4 +82,4 @@ export { HintsProvider, useHintsDisabled, useHintsContext } from "./context/inde
 export * from "./history/index.js";
 
 // License/Feature gating exports
-export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, LicenseEntryModal, ProBadge, ProUpgradeModal, getUseIsPro, getUseLicense } from "./license/index.js";
+export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, LicenseEntryModal, ProBadge, ProUpgradeModal, FreeAccountPrompt, LOGIN_COMMAND, getUseIsPro, getUseLicense, getUseTier, TIER_LIMITS, useLimit, resolveEffectiveTier, freeKeyRaises } from "./license/index.js";

package/lib/module/license/FeatureGate.js

@@ -12,6 +12,9 @@ import { gameUIColors, buoyColors } from "../ui/gameUI/constants/gameUIColors.js
 import { LockIcon, X, Zap, Shield, Clock, Check } from "../icons/lucide-icons.js";
 import { LicenseEntryModal } from "./LicenseEntryModal.js";
 import { openPricing, isWeb } from "./openPricing.js";
+import { FreeAccountPrompt } from "./FreeAccountPrompt.js";
+import { getUseTier } from "./licenseModule.js";
+import { freeKeyRaises } from "./tierLimits.js";
 import { useIsPro, useLicense, useProAccess } from "@buoy-gg/license";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Weekend Pass branding — a distinct violet so it never reads as the gold PRO.
@@ -49,14 +52,19 @@ export const ProBadge = ({
 export const ProUpgradeModal = ({
   visible,
   onClose,
-  featureName = "This feature"
+  featureName = "This feature",
+  limitKey
 }) => {
   // Simple wrapper around UpgradeModal with minimal description and no benefits
   return /*#__PURE__*/_jsx(UpgradeModal, {
     visible: visible,
     onClose: onClose,
-    featureName: featureName,
-    description: `${featureName} requires a Pro subscription.`
+    featureName: featureName
+    // Only meaningful when this upsell is about a LIMIT; without it the
+    // description below (which promises Pro) is the accurate message.
+    ,
+    limitKey: limitKey,
+    description: limitKey ? undefined : `${featureName} requires a Pro subscription.`
   });
 };
 /**
@@ -66,9 +74,13 @@ export const ProUpgradeModal = ({
 export const UpgradePrompt = ({
   featureName,
   onUpgradePress,
-  compact = false
+  compact = false,
+  limitKey
 }) => {
   const [showLicenseModal, setShowLicenseModal] = useState(false);
+  // Only offer the free key when it would actually raise this limit — see
+  // UpgradeModalProps.limitKey.
+  const isAnonymous = getUseTier()() === "anonymous" && limitKey != null && freeKeyRaises(limitKey);
   const handlePress = useCallback(() => {
     if (onUpgradePress) {
       onUpgradePress();
@@ -96,7 +108,11 @@ export const UpgradePrompt = ({
           style: styles.compactText,
           children: "PRO"
         })]
-      }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+      }), isAnonymous ? /*#__PURE__*/_jsx(FreeAccountPrompt, {
+        visible: showLicenseModal,
+        onClose: handleCloseModal,
+        featureName: featureName
+      }) : /*#__PURE__*/_jsx(LicenseEntryModal, {
         visible: showLicenseModal,
         onClose: handleCloseModal
       })]
@@ -113,23 +129,27 @@ export const UpgradePrompt = ({
         })
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.title,
-        children: "Pro Feature"
+        children: isAnonymous ? "Get a free key" : "Pro Feature"
       }), featureName && /*#__PURE__*/_jsx(Text, {
         style: styles.featureName,
         children: featureName
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.description,
-        children: "Upgrade to React Buoy Pro to unlock this feature and more."
+        children: isAnonymous ? "Buoy works without an account, with a small slice of each tool. A free key opens it up." : "Upgrade to React Buoy Pro to unlock this feature and more."
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.upgradeButton,
         onPress: handlePress,
         activeOpacity: 0.8,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.upgradeButtonText,
-          children: "Upgrade to Pro"
+          children: isAnonymous ? "Get a free key" : "Upgrade to Pro"
         })
       })]
-    }), /*#__PURE__*/_jsx(LicenseEntryModal, {
+    }), isAnonymous ? /*#__PURE__*/_jsx(FreeAccountPrompt, {
+      visible: showLicenseModal,
+      onClose: handleCloseModal,
+      featureName: featureName
+    }) : /*#__PURE__*/_jsx(LicenseEntryModal, {
       visible: showLicenseModal,
       onClose: handleCloseModal
     })]
@@ -308,8 +328,14 @@ export const UpgradeModal = ({
   onClose,
   featureName = "This Feature",
   description,
-  benefits
+  benefits,
+  limitKey
 }) => {
+  // Anonymous users get a different ask — but ONLY when a free key would
+  // actually fix what they just hit. Everything else here is Pro-exclusive,
+  // where a free key changes nothing and offering one would be dishonest.
+  const tier = getUseTier()();
+  const offerFreeKey = tier === "anonymous" && limitKey != null && freeKeyRaises(limitKey);
   const hasBenefits = benefits && benefits.length > 0;
   const [showLicenseModal, setShowLicenseModal] = useState(false);
   const license = useLicense();
@@ -332,6 +358,13 @@ export const UpgradeModal = ({
     onClose();
   }, [onClose]);
   if (!visible) return null;
+  if (offerFreeKey) {
+    return /*#__PURE__*/_jsx(FreeAccountPrompt, {
+      visible: visible,
+      onClose: onClose,
+      featureName: featureName === "This Feature" ? undefined : featureName
+    });
+  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Modal, {
       visible: visible && !showLicenseModal,

package/lib/module/license/FreeAccountPrompt.js

@@ -0,0 +1,176 @@
+"use strict";
+
+/**
+ * The upsell an ANONYMOUS user sees — someone with no key at all.
+ *
+ * Deliberately not the Pro modal. Their next step is free and takes about
+ * thirty seconds, so asking them for money would be asking the wrong question
+ * at the wrong moment, and would suppress exactly the signup this exists to
+ * produce. Pro is still offered, as a secondary action.
+ *
+ * The command is shown inline and copyable rather than linked, because there is
+ * no grace period: someone who just watched their limits shrink needs the fix
+ * in front of them, not a link to a page that has a link to a command.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Modal, StyleSheet, Text, TouchableOpacity } from "react-native";
+import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { Check, Copy, X } from "../icons/lucide-icons.js";
+import { copyToClipboard } from "../clipboard/index.js";
+import { openPricing } from "./openPricing.js";
+
+/** The one thing a reader has to be able to act on. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LOGIN_COMMAND = "npx buoy login";
+export const FreeAccountPrompt = ({
+  visible,
+  onClose,
+  featureName
+}) => {
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef(null);
+  useEffect(() => () => {
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, []);
+  const handleCopy = useCallback(() => {
+    void copyToClipboard(LOGIN_COMMAND).then(ok => {
+      if (!ok) return;
+      setCopied(true);
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => setCopied(false), 1500);
+    });
+  }, []);
+  if (!visible) return null;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.overlay,
+      onPress: onClose,
+      activeOpacity: 1,
+      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.card,
+        activeOpacity: 1,
+        onPress: () => {},
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.close,
+          onPress: onClose,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(X, {
+            size: 18,
+            color: buoyColors.textMuted
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: featureName ? `More ${featureName}` : "See more"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.subtitle,
+          children: "Buoy runs without an account \u2014 you just get a small slice of each tool. A free key opens it up."
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.command,
+          onPress: handleCopy,
+          activeOpacity: 0.7,
+          accessibilityLabel: `Copy ${LOGIN_COMMAND}`,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.commandText,
+            children: LOGIN_COMMAND
+          }), copied ? /*#__PURE__*/_jsx(Check, {
+            size: 14,
+            color: buoyColors.success
+          }) : /*#__PURE__*/_jsx(Copy, {
+            size: 14,
+            color: buoyColors.textMuted
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.reassure,
+          children: "Free forever. No card. About thirty seconds."
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.secondary,
+          onPress: () => openPricing(),
+          activeOpacity: 0.8,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.secondaryText,
+            children: "Or see Pro"
+          })
+        })]
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20
+  },
+  card: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "60",
+    padding: 24,
+    maxWidth: 340,
+    width: "100%",
+    position: "relative"
+  },
+  close: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    padding: 6,
+    zIndex: 1
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: buoyColors.text,
+    textAlign: "center",
+    marginBottom: 8
+  },
+  subtitle: {
+    fontSize: 13,
+    lineHeight: 19,
+    color: buoyColors.textMuted,
+    textAlign: "center",
+    marginBottom: 20
+  },
+  command: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: buoyColors.base,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    gap: 10
+  },
+  commandText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  reassure: {
+    fontSize: 12,
+    color: buoyColors.textMuted,
+    textAlign: "center",
+    marginTop: 10
+  },
+  secondary: {
+    marginTop: 18,
+    paddingVertical: 10,
+    alignItems: "center"
+  },
+  secondaryText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.textMuted
+  }
+});