@buoy-gg/time-machine 7.0.17 → 7.0.18

package/src/components/TimeMachineModal.tsx

@@ -44,6 +44,7 @@ export function TimeMachineModal({
       }}
       enablePersistence
       initialMode="bottomSheet"
+      disableScrollWrapper
     >
       <TimeMachineBody />
     </JsModal>

package/src/components/preview/ItemDetailScreen.tsx

@@ -0,0 +1,172 @@
+/**
+ * Item detail — one preview item's before/after, rendered with the two
+ * familiar views (TREE / SPLIT, same as storage events).
+ *
+ * The render-layer viewers only handle plain JSON faithfully, so both sides
+ * pass through toDiffable (Dates→ISO, Maps→objects, BigInt→"1n", cycles→
+ * "[Circular]") and the pair is memoized ONCE per item — the storage tool's
+ * fix for the fresh-identity-every-render trap that redux/zustand still have.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import {
+  DiffModeTabs,
+  buoyColors,
+  devToolsStorageKeys,
+  persistentStorage,
+} from "@buoy-gg/shared-ui";
+import { useToolHeader, useToolHost } from "@buoy-gg/core";
+import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
+import {
+  ABSENT_VALUE,
+  ThemedSplitView,
+  TreeDiffViewer,
+  devToolsDefaultTheme,
+  toDiffable,
+} from "@buoy-gg/shared-ui/dataViewer";
+import { VERDICT_META } from "./verdictMeta";
+
+const DIFF_MODE_KEY = devToolsStorageKeys.timeMachine.diffViewerMode();
+const TABS = [
+  { key: "tree", label: "TREE VIEW" },
+  { key: "split", label: "SPLIT VIEW" },
+];
+
+export interface ItemDetailScreenProps {
+  sourceLabel: string;
+  item: StateSnapshotPreviewItem;
+  /** "old → new" side labels, e.g. "CURRENT STATE" / snapshot name. */
+  leftLabel: string;
+  rightLabel: string;
+  onBack: () => void;
+}
+
+export function ItemDetailScreen({
+  sourceLabel,
+  item,
+  leftLabel,
+  rightLabel,
+  onBack,
+}: ItemDetailScreenProps) {
+  // Persisted view preference — storage's load-guard/validate/optimistic
+  // pattern, default TREE (structured state reads better as a tree).
+  const [diffMode, setDiffMode] = useState<string>("tree");
+  const hasLoadedMode = useRef(false);
+  useEffect(() => {
+    if (hasLoadedMode.current) return;
+    hasLoadedMode.current = true;
+    void persistentStorage.getItem(DIFF_MODE_KEY).then((saved) => {
+      if (saved === "tree" || saved === "split") setDiffMode(saved);
+    });
+  }, []);
+  const changeMode = (mode: string) => {
+    setDiffMode(mode);
+    void persistentStorage.setItem(DIFF_MODE_KEY, mode).catch(() => {});
+  };
+
+  const meta = VERDICT_META[item.verdict];
+  const host = useToolHost();
+  const hosted = host.instanceId !== undefined;
+
+  // Hosted: the shared modal header shows this item's identity + back.
+  useToolHeader(
+    hosted
+      ? {
+          title: item.label,
+          subtitle: `${sourceLabel} · ${meta.label} · ${leftLabel} → ${rightLabel}`,
+          onBack,
+          searchable: false, // nothing searchable on a single item's diff
+        }
+      : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hosted, item.key, sourceLabel, leftLabel, rightLabel]
+  );
+
+  // Normalize ONCE per item; ABSENT_VALUE keeps added/removed reading as
+  // pure additions/removals instead of diffs against the literal "null".
+  const { oldValue, newValue } = useMemo(
+    () => ({
+      oldValue:
+        item.verdict === "added" ? ABSENT_VALUE : toDiffable(item.oldValue),
+      newValue:
+        item.verdict === "removed" ? ABSENT_VALUE : toDiffable(item.newValue),
+    }),
+    [item]
+  );
+
+  return (
+    <View style={styles.container}>
+      {!hosted && (
+        <View style={styles.screenHeader}>
+          <TouchableOpacity onPress={onBack} hitSlop={HIT} testID="tm-item-back">
+            <Text style={styles.backText}>‹ Preview</Text>
+          </TouchableOpacity>
+          <View style={styles.titleBlock}>
+            <Text style={styles.title} numberOfLines={1}>
+              <Text style={{ color: meta.color }}>{meta.glyph} </Text>
+              {item.label}
+            </Text>
+            <Text style={styles.subtitle} numberOfLines={1}>
+              {sourceLabel} · {meta.label} · {leftLabel} → {rightLabel}
+            </Text>
+          </View>
+        </View>
+      )}
+
+      {item.reason && <Text style={styles.reason}>⚠ {item.reason}</Text>}
+
+      <View style={styles.tabs}>
+        <DiffModeTabs tabs={TABS} activeTab={diffMode} onTabChange={changeMode} />
+      </View>
+
+      {/* One page-level scroller; both viewers render inline at natural
+          height (scrollEnabled=false) — the storage matched-pair contract. */}
+      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+        {diffMode === "tree" ? (
+          <TreeDiffViewer
+            oldValue={oldValue}
+            newValue={newValue}
+            theme="dark"
+            showUnchanged={false}
+            scrollEnabled={false}
+          />
+        ) : (
+          <ThemedSplitView
+            oldValue={oldValue}
+            newValue={newValue}
+            differences={EMPTY}
+            theme={devToolsDefaultTheme}
+            scrollEnabled={false}
+          />
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const EMPTY: unknown[] = [];
+const HIT = { top: 10, bottom: 10, left: 10, right: 10 };
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  screenHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 10,
+  },
+  backText: { color: buoyColors.primary, fontSize: 14 },
+  titleBlock: { flex: 1, minWidth: 0 },
+  title: { color: buoyColors.text, fontSize: 13, fontWeight: "700" },
+  subtitle: { color: buoyColors.textMuted, fontSize: 10, marginTop: 2 },
+  reason: {
+    color: buoyColors.warning,
+    fontSize: 11,
+    paddingHorizontal: 12,
+    paddingBottom: 6,
+  },
+  tabs: { paddingHorizontal: 12, paddingBottom: 8 },
+  scroll: { flex: 1 },
+  scrollContent: { paddingHorizontal: 12, paddingBottom: 24 },
+});