@buoy-gg/shared-ui 7.0.22 → 7.0.23

package/lib/commonjs/JsModal.js

@@ -697,6 +697,14 @@ const JsModalComponent = ({
       } else {
         // Floating mode entrance - simple fade without scale pop
         floatingScale.setValue(1); // Set scale to 1 directly, no animation
+        // Minimizing animated the window to the dock icon's corner. Put it
+        // back where it actually lives, or reopening leaves it parked
+        // off-screen — `initialModalState` only covers the dock's restore
+        // path, and the dial opens the same tool without one.
+        floatingPosition.setValue({
+          x: currentDimensionsRef.current.left,
+          y: currentDimensionsRef.current.top
+        });
         openAnimation = _reactNative.Animated.timing(visibilityProgress, {
           toValue: 1,
           duration: 200,
@@ -745,7 +753,7 @@ const JsModalComponent = ({
         // Stopped close animation
       }
     };
-  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
+  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
 
   // ============================================================================
   // OPTIMIZED PAN RESPONDER: Bottom Sheet Resize
@@ -1115,22 +1123,18 @@ const JsModalComponent = ({
   // RENDER: Modal UI with transform-based animations
   // ============================================================================
 
-  // When not visible, render off-screen to keep children mounted (preserves state/listeners)
-  // This is similar to how React Navigation keeps screens mounted
-  if (!visible) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.hiddenContainer,
-      pointerEvents: "none",
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: children
-    });
-  }
+  // When not visible the SAME tree is rendered, just parked off-screen. It has
+  // to be the same tree: React reconciles by position, so a separate "hidden"
+  // branch would unmount and rebuild every child on each minimize AND each
+  // restore — which is the whole cost minimizing is supposed to avoid.
 
   // Render floating mode
   if (mode === "floating") {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
       nativeID: "jsmodal-root",
+      pointerEvents: visible ? "auto" : "none",
+      accessibilityElementsHidden: !visible,
+      importantForAccessibility: visible ? "auto" : "no-hide-descendants",
       style: [styles.floatingModal, {
         width: dimensions.width,
         // Use state dimensions for real-time updates
@@ -1144,7 +1148,7 @@ const JsModalComponent = ({
         ...(zIndex !== undefined && {
           zIndex
         })
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container],
+      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.DraggableHeader, {
         position: floatingPosition,
         onDragStart: handleFloatingDragStart,
@@ -1241,10 +1245,16 @@ const JsModalComponent = ({
 
   // Render bottom sheet mode with proper height animation
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.fullScreenContainer, zIndex !== undefined && {
+    style: [
+    // Same box either way — parking it off-screen instead of resizing it
+    // keeps the sheet's layout intact, so coming back is a translate and
+    // not a full relayout.
+    visible ? styles.fullScreenContainer : styles.parkedFullScreen, visible && zIndex !== undefined && {
       zIndex
     }],
-    pointerEvents: "box-none",
+    pointerEvents: visible ? "box-none" : "none",
+    accessibilityElementsHidden: !visible,
+    importantForAccessibility: visible ? "auto" : "no-hide-descendants",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       nativeID: "jsmodal-root",
       style: [styles.bottomSheetWrapper, {
@@ -1340,10 +1350,23 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 12,
     elevation: 20
   },
-  hiddenContainer: {
+  /** Off-screen park for a minimized floating modal — same box, moved away. */
+  parkedOffscreen: {
+    left: -9999,
+    top: -9999,
+    opacity: 0
+  },
+  /**
+   * Off-screen park for a minimized bottom sheet. Screen-sized on purpose:
+   * `fullScreenContainer` is an absolute fill, and shrinking it here would
+   * relayout the whole sheet on every minimize/restore.
+   */
+  parkedFullScreen: {
     position: "absolute",
     left: -9999,
     top: -9999,
+    width: SCREEN.width,
+    height: SCREEN.height,
     opacity: 0
   },
   floatingModal: {

package/lib/commonjs/dataViewer/JsonStringNotice.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JsonStringNotice = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Says out loud that the diff below is showing a decoded value.
+ *
+ * Not decoration: the store holds a STRING, and the rows underneath show an
+ * object or an array. Without this line the viewer would be misreporting the
+ * type of what is stored — see jsonStringValue.ts.
+ */
+
+const JsonStringNotice = exports.JsonStringNotice = /*#__PURE__*/(0, _react.memo)(function JsonStringNotice({
+  visible,
+  theme
+}) {
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.glyph, {
+        color: theme.lineNumberText
+      }],
+      children: "{ }"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: theme.lineNumberText
+      }],
+      children: "Stored as a JSON string \u2014 decoded below so the change is readable."
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 7,
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  glyph: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  text: {
+    flex: 1,
+    fontSize: 11,
+    lineHeight: 14
+  }
+});

package/lib/commonjs/dataViewer/ThemedSplitView.js

@@ -8,6 +8,10 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _lineDiff = require("./lineDiff.js");
 var _DiffSummary = require("./DiffSummary.js");
+var _TimestampDeltaBar = require("./TimestampDeltaBar.js");
+var _timestampDiff = require("./timestampDiff.js");
+var _JsonStringNotice = require("./JsonStringNotice.js");
+var _jsonStringValue = require("./jsonStringValue.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ThemedSplitView — the production-grade split diff renderer, promoted from
@@ -47,7 +51,12 @@ function ThemedSplitView({
     showDiffOnly: options.showDiffOnly,
     contextLines: options.contextLines
   }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
-  const lineDiffs = (0, _react.useMemo)(() => (0, _lineDiff.computeLineDiff)(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
+
+  // A JSON-encoded string is diffed decoded, or its one real change reads as
+  // one unreadable escaped line. Everything downstream — the line diff, the
+  // timestamp scan — works off the decoded pair.
+  const pair = (0, _react.useMemo)(() => (0, _jsonStringValue.decodeJsonStringPair)(oldValue, newValue), [oldValue, newValue]);
+  const lineDiffs = (0, _react.useMemo)(() => (0, _lineDiff.computeLineDiff)(pair.left, pair.right, diffComputeOptions), [pair, diffComputeOptions]);
 
   // One pass for the summary instead of three .filter() calls per render.
   const summary = (0, _react.useMemo)(() => {
@@ -64,6 +73,10 @@ function ThemedSplitView({
     };
   }, [lineDiffs]);
 
+  // Detection walks at most one object level, but it runs on every render of
+  // a diff that may hold thousands of lines — keep it on the value identities.
+  const timestampDeltas = (0, _react.useMemo)(() => (0, _timestampDiff.describeTimestampDeltas)(pair.left, pair.right), [pair]);
+
   // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
   // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
   // the rest into a tappable header.
@@ -152,6 +165,12 @@ function ThemedSplitView({
       removed: summary.removed,
       modified: summary.modified,
       theme: theme
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonStringNotice.JsonStringNotice, {
+      visible: pair.decoded,
+      theme: theme
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimestampDeltaBar.TimestampDeltaBar, {
+      deltas: timestampDeltas,
+      theme: theme
     }), lineDiffs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: dynamicStyles.emptyState,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {

package/lib/commonjs/dataViewer/TimestampDeltaBar.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimestampDeltaBar = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+const TimestampDeltaBar = exports.TimestampDeltaBar = /*#__PURE__*/(0, _react.memo)(function TimestampDeltaBar({
+  deltas,
+  theme
+}) {
+  if (deltas.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }],
+    children: deltas.map(delta => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.glyph, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u25F7"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.text,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.headline,
+          children: [delta.path ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: [styles.path, {
+              color: theme.lineNumberText
+            }],
+            children: [delta.path, " "]
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: theme.summaryModifiedText
+            },
+            children: delta.deltaLabel
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: [styles.instants, {
+            color: theme.lineNumberText
+          }],
+          children: [delta.fromLabel, " \u2192 ", delta.toLabel]
+        })]
+      })]
+    }, delta.path ?? "__value__"))
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    borderTopWidth: _reactNative.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/commonjs/dataViewer/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "IndentGuidesOverlay", {
     return _IndentGuidesOverlay.IndentGuidesOverlay;
   }
 });
+Object.defineProperty(exports, "JsonStringNotice", {
+  enumerable: true,
+  get: function () {
+    return _JsonStringNotice.JsonStringNotice;
+  }
+});
 Object.defineProperty(exports, "SplitDiffViewer", {
   enumerable: true,
   get: function () {
@@ -75,6 +81,12 @@ Object.defineProperty(exports, "ThemedSplitView", {
     return _ThemedSplitView.ThemedSplitView;
   }
 });
+Object.defineProperty(exports, "TimestampDeltaBar", {
+  enumerable: true,
+  get: function () {
+    return _TimestampDeltaBar.TimestampDeltaBar;
+  }
+});
 Object.defineProperty(exports, "TreeDiffViewer", {
   enumerable: true,
   get: function () {
@@ -117,6 +129,24 @@ Object.defineProperty(exports, "computeLineDiff", {
     return _lineDiff.computeLineDiff;
   }
 });
+Object.defineProperty(exports, "decodeJsonStringPair", {
+  enumerable: true,
+  get: function () {
+    return _jsonStringValue.decodeJsonStringPair;
+  }
+});
+Object.defineProperty(exports, "describeTimestampDeltas", {
+  enumerable: true,
+  get: function () {
+    return _timestampDiff.describeTimestampDeltas;
+  }
+});
+Object.defineProperty(exports, "detectTimestamp", {
+  enumerable: true,
+  get: function () {
+    return _timestampDiff.detectTimestamp;
+  }
+});
 Object.defineProperty(exports, "devToolsDefaultTheme", {
   enumerable: true,
   get: function () {
@@ -129,6 +159,18 @@ Object.defineProperty(exports, "diffThemes", {
     return _diffThemes.diffThemes;
   }
 });
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function () {
+    return _timestampDiff.formatDuration;
+  }
+});
+Object.defineProperty(exports, "formatInstant", {
+  enumerable: true,
+  get: function () {
+    return _timestampDiff.formatInstant;
+  }
+});
 Object.defineProperty(exports, "getAtPath", {
   enumerable: true,
   get: function () {
@@ -165,6 +207,12 @@ Object.defineProperty(exports, "objectDiff", {
     return _objectDiff.objectDiff;
   }
 });
+Object.defineProperty(exports, "parseJsonContainer", {
+  enumerable: true,
+  get: function () {
+    return _jsonStringValue.parseJsonContainer;
+  }
+});
 Object.defineProperty(exports, "selectionPathAfterOp", {
   enumerable: true,
   get: function () {
@@ -214,6 +262,10 @@ var _DataTreeActionBar = require("./DataTreeActionBar.js");
 var _DataTreeActionDock = require("./DataTreeActionDock.js");
 var _SplitDiffViewer = require("./SplitDiffViewer.js");
 var _DiffSummary = require("./DiffSummary.js");
+var _TimestampDeltaBar = require("./TimestampDeltaBar.js");
+var _JsonStringNotice = require("./JsonStringNotice.js");
+var _jsonStringValue = require("./jsonStringValue.js");
+var _timestampDiff = require("./timestampDiff.js");
 var _lineDiff = require("./lineDiff.js");
 var _diffThemes = require("./diffThemes.js");
 var _objectDiff = require("./objectDiff.js");

package/lib/commonjs/dataViewer/jsonStringValue.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decodeJsonStringPair = decodeJsonStringPair;
+exports.parseJsonContainer = parseJsonContainer;
+var _lineDiff = require("./lineDiff.js");
+/**
+ * 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.
+ */
+
+/**
+ * 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).
+ */
+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 (0, _lineDiff.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.
+ */
+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/commonjs/dataViewer/timestampDiff.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.describeTimestampDeltas = describeTimestampDeltas;
+exports.detectTimestamp = detectTimestamp;
+exports.formatDuration = formatDuration;
+exports.formatInstant = formatInstant;
+/**
+ * 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.
+ */
+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. */
+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". */
+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.
+ */
+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/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-18T00:32:52.026Z
+ * Generated at: 2026-08-19T20:01:42.950Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *