@buoy-gg/shared-ui 7.0.22 → 7.0.24

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-18T00:32:52.026Z
+ * Generated at: 2026-08-19T20:50:51.001Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/index.js

@@ -82,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
+  }
+});

package/lib/module/license/index.js

@@ -2,43 +2,8 @@
 
 export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, ProBadge, ProUpgradeModal } from "./FeatureGate.js";
 export { LicenseEntryModal } from "./LicenseEntryModal.js";
-// Centralized lazy loading for license hooks to avoid duplication across packages
-// This is the SINGLE source of truth - all packages should import from here
-let _useIsPro = null;
-let _useLicense = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModuleCentral() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-      _useLicense = mod.useLicense ?? null;
-    }
-  } catch {
-    // License package not available - will use fallback
-  }
-}
-
-/**
- * Get the useIsPro hook from @buoy-gg/license
- * Falls back to () => false if license package is not available
- *
- * IMPORTANT: Use this instead of doing your own lazy loading in other packages
- */
-export function getUseIsPro() {
-  loadLicenseModuleCentral();
-  return _useIsPro ?? (() => false);
-}
-
-/**
- * Get the useLicense hook from @buoy-gg/license
- * Returns null if license package is not available
- *
- * IMPORTANT: Use this instead of doing your own lazy loading in other packages
- */
-export function getUseLicense() {
-  loadLicenseModuleCentral();
-  return _useLicense;
-}
+export { FreeAccountPrompt, LOGIN_COMMAND } from "./FreeAccountPrompt.js";
+// Lazy license-module access lives in ./licenseModule so tierLimits can use it
+// without an import cycle. Re-exported here to keep the existing surface.
+export { getUseIsPro, getUseLicense, getUseTier } from "./licenseModule.js";
+export { TIER_LIMITS, useLimit, resolveEffectiveTier, freeKeyRaises } from "./tierLimits.js";

package/lib/module/license/licenseModule.js

@@ -0,0 +1,92 @@
+"use strict";
+
+/**
+ * Centralized lazy loading of `@buoy-gg/license`.
+ *
+ * This is the SINGLE place any package resolves license hooks — tools must not
+ * `require("@buoy-gg/license")` themselves. Lives in its own module (rather
+ * than `./index`) so `tierLimits` can consume it without an import cycle.
+ */
+
+/** Access tier. Mirrors BuoyTier in @buoy-gg/license. */
+
+let _useIsPro = null;
+let _useLicense = null;
+let _useTier = null;
+let _anonymousTierEnabled = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModuleCentral() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+      _useLicense = mod.useLicense ?? null;
+      _useTier = mod.useTier ?? null;
+      _anonymousTierEnabled = typeof mod.ANONYMOUS_TIER_ENABLED === "boolean" ? mod.ANONYMOUS_TIER_ENABLED : null;
+    }
+  } catch {
+    // License package not available - will use fallback
+  }
+}
+
+/**
+ * Get the useIsPro hook from @buoy-gg/license.
+ * Falls back to () => false if the license package is not available.
+ *
+ * IMPORTANT: Use this instead of doing your own lazy loading in other packages
+ */
+export function getUseIsPro() {
+  loadLicenseModuleCentral();
+  return _useIsPro ?? (() => false);
+}
+
+/**
+ * Get the useLicense hook from @buoy-gg/license.
+ * Returns null if the license package is not available.
+ *
+ * IMPORTANT: Use this instead of doing your own lazy loading in other packages
+ */
+export function getUseLicense() {
+  loadLicenseModuleCentral();
+  return _useLicense;
+}
+
+/**
+ * Get the useTier hook from @buoy-gg/license.
+ *
+ * Falls back to `"free"` — NOT `"anonymous"` — when the license package can't
+ * be resolved. That deliberately matches the existing `getUseIsPro()` fallback,
+ * which yields free-tier behavior today, and it picks the safer failure:
+ *
+ *  - falling back to "anonymous" would let one bundler quirk silently cut every
+ *    legitimate user's limits by ~80%;
+ *  - falling back to "free" costs no revenue, because Pro still requires a key
+ *    that a live license server validated — this path can never grant Pro.
+ *
+ * Reaching it at all requires `@buoy-gg/license` to be missing, and it is a
+ * hard dependency of `@buoy-gg/core`.
+ */
+export function getUseTier() {
+  loadLicenseModuleCentral();
+  return _useTier ?? (() => "free");
+}
+
+/**
+ * Whether the anonymous tier is switched on.
+ *
+ * The switch itself lives in @buoy-gg/license (see its config.ts) because the
+ * Weekend Pass change has to flip at the same moment as the reduced limits, and
+ * those live in different packages. Read through the same lazy loader as the
+ * hooks so a missing license package degrades gracefully rather than throwing
+ * at module load.
+ *
+ * Falls back to `false` — the anonymous tier off, everyone on free limits —
+ * which matches the `getUseTier()` fallback of "free". A build that cannot
+ * resolve the license package must never take limits AWAY from someone.
+ */
+export function isAnonymousTierEnabled() {
+  loadLicenseModuleCentral();
+  return _anonymousTierEnabled ?? false;
+}