@buoy-gg/time-machine 7.0.17 → 7.0.19

package/lib/module/components/preview/RestorePreviewScreen.js

@@ -0,0 +1,1051 @@
+"use strict";
+
+/**
+ * Restore Preview — "what will restoring this snapshot actually change?"
+ *
+ * ONE virtualized FlatList is the scrollable area (compare card, filters,
+ * source cards and item rows are all list rows) with a sticky Restore CTA
+ * footer — no nested scroll regions, thousands of storage keys stay cheap.
+ *
+ * Layout follows the Time Machine mockup: source sections are card
+ * dropdowns with tool-icon tiles, a "N keys · M changed" detection subtitle,
+ * ±≈ badges, a search field with an expand/collapse-all button, and a bottom
+ * "Restore State" pill. Only rows a restore would touch (or can't touch)
+ * render — unchanged items never do. Every applicable item keeps its
+ * INCLUDE checkbox (source headers toggle their whole section) — unchecked
+ * items are passed to restore as exclusions and left untouched.
+ */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { ChevronDown, ChevronUp, Filter, RefreshCw, Search, buoyColors, macOSColors } from "@buoy-gg/shared-ui";
+import { JotaiIcon, QueryIcon, ReduxIcon, StorageIcon, TimeMachineIcon, ZustandIcon } from "@buoy-gg/floating-tools-core";
+import { useToolHeader, useToolHost } from "@buoy-gg/core";
+import { timeMachineStore } from "../../store/timeMachineStore";
+import { VERDICT_META } from "./verdictMeta";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SOURCE_ICONS = {
+  storage: StorageIcon,
+  redux: ReduxIcon,
+  zustand: ZustandIcon,
+  jotai: JotaiIcon,
+  query: QueryIcon
+};
+const SOURCE_NOUNS = {
+  storage: "keys",
+  redux: "slices",
+  zustand: "stores",
+  jotai: "atoms",
+  query: "queries"
+};
+/** Compound exclusion key — what timeMachineStore.restore expects. */
+function cKey(sourceId, itemKey) {
+  return `${sourceId}::${itemKey}`;
+}
+function shortPreview(value) {
+  if (value === undefined) return "∅";
+  try {
+    const s = typeof value === "string" ? `"${value}"` : JSON.stringify(value);
+    if (!s) return String(value);
+    return s.length > 46 ? `${s.slice(0, 43)}…` : s;
+  } catch {
+    return "[complex]";
+  }
+}
+function sideName(ref, snapshots) {
+  if (ref === "current") return "Current state";
+  return snapshots.find(s => s.id === ref.snapshotId)?.name ?? ref.snapshotId;
+}
+function timeAgo(ts) {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.round(m / 60);
+  return h < 24 ? `${h}h` : `${Math.round(h / 24)}d`;
+}
+function Checkbox({
+  state
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.checkbox, state !== "none" && styles.checkboxChecked],
+    children: [state === "all" && /*#__PURE__*/_jsx(Text, {
+      style: styles.checkboxGlyph,
+      children: "\u2713"
+    }), state === "some" && /*#__PURE__*/_jsx(Text, {
+      style: styles.checkboxGlyph,
+      children: "\u2212"
+    })]
+  });
+}
+const ItemRow = /*#__PURE__*/memo(function ItemRow({
+  row,
+  onOpen,
+  onToggle
+}) {
+  const meta = VERDICT_META[row.item.verdict];
+  const dimmed = !meta.applies || row.excluded;
+  const openable = row.item.verdict === "changed" || row.item.verdict === "added" || row.item.verdict === "removed";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.itemRow, dimmed && styles.dimmed],
+    children: [meta.applies && /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onToggle,
+      hitSlop: {
+        top: 10,
+        bottom: 10,
+        left: 8,
+        right: 8
+      },
+      testID: `tm-preview-toggle-${row.sourceId}-${row.item.key}`,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        state: row.excluded ? "none" : "all"
+      })
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.itemBodyTouch,
+      onPress: () => openable && onOpen(),
+      disabled: !openable,
+      testID: `tm-preview-item-${row.sourceId}-${row.item.key}`,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.itemGlyph, {
+          color: meta.color
+        }],
+        children: meta.glyph
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.itemBody,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.itemLabel,
+          numberOfLines: 1,
+          children: row.item.label
+        }), row.item.verdict === "changed" && /*#__PURE__*/_jsxs(Text, {
+          style: styles.itemPreview,
+          numberOfLines: 1,
+          children: [shortPreview(row.item.oldValue), " \u2192", " ", shortPreview(row.item.newValue)]
+        }), row.item.verdict === "added" && /*#__PURE__*/_jsx(Text, {
+          style: styles.itemPreview,
+          numberOfLines: 1,
+          children: shortPreview(row.item.newValue)
+        }), row.item.verdict === "removed" && /*#__PURE__*/_jsx(Text, {
+          style: [styles.itemPreview, styles.itemPreviewRemoved],
+          numberOfLines: 1,
+          children: shortPreview(row.item.oldValue)
+        }), row.excluded ? /*#__PURE__*/_jsx(Text, {
+          style: styles.itemExcluded,
+          children: "excluded \u2014 restore leaves this untouched"
+        }) : row.item.reason && /*#__PURE__*/_jsx(Text, {
+          style: styles.itemReason,
+          numberOfLines: 2,
+          children: row.item.reason
+        })]
+      }), openable && /*#__PURE__*/_jsx(Text, {
+        style: styles.itemChevron,
+        children: "\u203A"
+      })]
+    })]
+  });
+});
+export function RestorePreviewScreen({
+  preview,
+  snapshots,
+  busy,
+  onBack,
+  onOpenItem,
+  onRestore,
+  onPickSide,
+  onRefresh
+}) {
+  const host = useToolHost();
+  const hosted = host.instanceId !== undefined;
+  const [localSearch, setLocalSearch] = useState("");
+  const [collapsed, setCollapsed] = useState({});
+  const [allCollapsed, setAllCollapsed] = useState(false);
+  const [excluded, setExcluded] = useState(new Set());
+  const search = localSearch;
+  const rightMeta = preview.right === "current" ? undefined : snapshots.find(s => s.id === preview.right.snapshotId);
+  const isBaseline = rightMeta?.baseline === true;
+  const liveLeft = preview.left === "current";
+
+  // Master selection: "None → tick just what you want" is the fast path for
+  // targeted restores ("only my cart"), the inverse of the default all-in.
+  const selectAll = useCallback(() => setExcluded(new Set()), []);
+  const selectNone = useCallback(() => {
+    const next = new Set();
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        if (VERDICT_META[item.verdict].applies) next.add(cKey(src.id, item.key));
+      }
+    }
+    setExcluded(next);
+  }, [preview.sources]);
+
+  // A saved scope pre-selects the checkboxes: everything applicable that is
+  // OUTSIDE the scope starts excluded, so the preview shows exactly what a
+  // scoped restore will do (and stays adjustable).
+  const seededScopeFor = useRef(null);
+  useEffect(() => {
+    if (!rightMeta?.scope?.length || preview.building) return;
+    if (seededScopeFor.current === rightMeta.id) return;
+    seededScopeFor.current = rightMeta.id;
+    const scopeSet = new Set(rightMeta.scope);
+    const next = new Set();
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        const key = cKey(src.id, item.key);
+        if (VERDICT_META[item.verdict].applies && !scopeSet.has(key)) {
+          next.add(key);
+        }
+      }
+    }
+    setExcluded(next);
+  }, [rightMeta, preview.building, preview.sources]);
+
+  // Persist the current selection as this restore point's scope — from then
+  // on, RESTORE (home row, MCP, this screen) touches only these items.
+  // Selecting everything clears the scope back to a full restore.
+  const saveScope = useCallback(() => {
+    if (!rightMeta) return;
+    const selected = [];
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        const key = cKey(src.id, item.key);
+        if (VERDICT_META[item.verdict].applies && !excluded.has(key)) {
+          selected.push(key);
+        }
+      }
+    }
+    const clearing = excluded.size === 0;
+    void timeMachineStore.setScope(rightMeta.id, clearing ? null : selected);
+    host.showToast(clearing ? "Scope cleared — full restore" : `Scope saved — this restore point now restores only ${selected.length} item${selected.length === 1 ? "" : "s"}`, "success");
+  }, [rightMeta, preview.sources, excluded, host]);
+  const toggleItem = useCallback(key => {
+    setExcluded(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);else next.add(key);
+      return next;
+    });
+  }, []);
+  const toggleSource = useCallback((source, includeState) => {
+    setExcluded(prev => {
+      const next = new Set(prev);
+      for (const item of source.items) {
+        if (!VERDICT_META[item.verdict].applies) continue;
+        const key = cKey(source.id, item.key);
+        if (includeState === "all") next.add(key);else next.delete(key);
+      }
+      return next;
+    });
+  }, []);
+
+  // Takes the EFFECTIVE collapsed state — the map is sparse (defaults come
+  // from the ?? fallback), so `!map[id]` would no-op the first tap on a
+  // default-collapsed card.
+  const toggleCollapse = useCallback((id, currentlyCollapsed) => {
+    setCollapsed(c => ({
+      ...c,
+      [id]: !currentlyCollapsed
+    }));
+  }, []);
+  const toggleAllCollapsed = useCallback(() => {
+    setAllCollapsed(prev => {
+      const next = !prev;
+      setCollapsed(Object.fromEntries(preview.sources.map(s => [s.id, next])));
+      return next;
+    });
+  }, [preview.sources]);
+  const totals = useMemo(() => {
+    let applies = 0;
+    let excludedCount = 0;
+    let wontApply = 0;
+    const perSource = [];
+    for (const src of preview.sources) {
+      let n = 0;
+      for (const item of src.items) {
+        const m = VERDICT_META[item.verdict];
+        if (m.applies) {
+          if (excluded.has(cKey(src.id, item.key))) excludedCount += 1;else {
+            applies += 1;
+            n += 1;
+          }
+        } else if (item.verdict === "wont-apply") wontApply += 1;
+      }
+      if (n > 0) perSource.push(`${n} ${src.label.toLowerCase()}`);
+    }
+    return {
+      applies,
+      excludedCount,
+      wontApply,
+      perSource
+    };
+  }, [preview.sources, excluded]);
+
+  // Hosted: back + identity in the shared modal header. Restore lives in the
+  // bottom CTA; the preset's labeled RELOAD APP action stays available.
+  useToolHeader(hosted ? {
+    title: "Restore Preview",
+    subtitle: rightMeta?.name ?? "compare",
+    onBack,
+    searchable: false // the in-body "Filter keys…" field covers it
+  } : null,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [hosted, rightMeta?.name]);
+  const rows = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const out = [];
+    for (const src of preview.sources) {
+      // Every detected source gets a card whose subtitle carries the
+      // detection proof ("60 keys · 7 changed" / "2 slices · no changes"),
+      // so clean sources need no expansion. Unchanged ITEMS never render.
+      const relevant = src.items.some(i => i.verdict !== "unchanged");
+      const expandable = relevant || src.notes.length > 0 || !!src.error;
+      const applicable = src.items.filter(i => VERDICT_META[i.verdict].applies);
+      const wontApplyCount = src.items.filter(i => i.verdict === "wont-apply").length;
+      const noun = src.items.length === 1 ? (SOURCE_NOUNS[src.id] ?? "items").replace(/ies$/, "y").replace(/s$/, "") : SOURCE_NOUNS[src.id] ?? "items";
+      const summary = `${src.items.length} ${noun} · ` + (applicable.length > 0 ? `${applicable.length} changed` : wontApplyCount > 0 ? `${wontApplyCount} won't apply` : "no changes");
+      const excludedInSource = applicable.filter(i => excluded.has(cKey(src.id, i.key))).length;
+      const includeState = applicable.length === 0 || excludedInSource === 0 ? "all" : excludedInSource === applicable.length ? "none" : "some";
+      const counts = {
+        added: 0,
+        removed: 0,
+        changed: 0
+      };
+      for (const i of src.items) {
+        if (excluded.has(cKey(src.id, i.key))) continue;
+        if (i.verdict === "added") counts.added += 1;else if (i.verdict === "removed") counts.removed += 1;else if (i.verdict === "changed" || i.verdict === "too-large") counts.changed += 1;
+      }
+      const visible = src.items.filter(item => {
+        // Unchanged items never render — the dropdowns show only what a
+        // restore would touch (changed) or can't touch (won't-apply).
+        if (item.verdict === "unchanged") return false;
+        if (q && !item.label.toLowerCase().includes(q)) return false;
+        return true;
+      });
+      const isCollapsed = !expandable ? true : collapsed[src.id] ?? (applicable.length === 0 && !src.error);
+      out.push({
+        kind: "source",
+        source: src,
+        collapsed: isCollapsed,
+        includeState,
+        applicableCount: applicable.length,
+        counts,
+        expandable,
+        summary
+      });
+      if (!isCollapsed) {
+        for (const note of src.notes) {
+          out.push({
+            kind: "note",
+            id: `${src.id}:${note}`,
+            text: note
+          });
+        }
+        if (src.error) {
+          out.push({
+            kind: "note",
+            id: `${src.id}:err`,
+            text: `⚠ ${src.error}`
+          });
+        }
+        for (const item of visible) {
+          out.push({
+            kind: "item",
+            sourceId: src.id,
+            item,
+            excluded: excluded.has(cKey(src.id, item.key))
+          });
+        }
+      }
+    }
+    return out;
+  }, [preview.sources, search, collapsed, excluded]);
+  const renderRow = useCallback(({
+    item: row
+  }) => {
+    if (row.kind === "source") {
+      const src = row.source;
+      const {
+        counts
+      } = row;
+      const clean = counts.added + counts.removed + counts.changed === 0 && !src.error;
+      const IconComp = SOURCE_ICONS[src.id] ?? TimeMachineIcon;
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.sourceCard,
+        children: [row.applicableCount > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => toggleSource(src, row.includeState),
+          hitSlop: {
+            top: 10,
+            bottom: 10,
+            left: 8,
+            right: 8
+          },
+          testID: `tm-preview-source-toggle-${src.id}`,
+          children: /*#__PURE__*/_jsx(Checkbox, {
+            state: row.includeState
+          })
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.sourceCardTouch,
+          onPress: () => row.expandable && toggleCollapse(src.id, row.collapsed),
+          disabled: !row.expandable,
+          testID: `tm-preview-source-${src.id}`,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.sourceIconTile,
+            children: /*#__PURE__*/_jsx(IconComp, {
+              size: 18
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.sourceNameBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.sourceName,
+              numberOfLines: 1,
+              children: src.label
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sourceSummary,
+              numberOfLines: 1,
+              children: row.includeState === "none" && row.applicableCount > 0 ? `${row.summary} · excluded` : row.summary
+            })]
+          }), !clean && /*#__PURE__*/_jsxs(View, {
+            style: styles.sourceBadges,
+            children: [counts.removed > 0 && /*#__PURE__*/_jsxs(Text, {
+              style: [styles.sourceBadge, {
+                color: buoyColors.error
+              }],
+              children: ["\u2212", counts.removed]
+            }), counts.added > 0 && /*#__PURE__*/_jsxs(Text, {
+              style: [styles.sourceBadge, {
+                color: buoyColors.success
+              }],
+              children: ["+", counts.added]
+            }), counts.changed > 0 && /*#__PURE__*/_jsxs(Text, {
+              style: [styles.sourceBadge, {
+                color: buoyColors.info
+              }],
+              children: ["\u2248", counts.changed]
+            })]
+          }), row.expandable ? row.collapsed ? /*#__PURE__*/_jsx(ChevronDown, {
+            size: 16,
+            color: buoyColors.textMuted
+          }) : /*#__PURE__*/_jsx(ChevronUp, {
+            size: 16,
+            color: buoyColors.textMuted
+          }) : null]
+        })]
+      });
+    }
+    if (row.kind === "note") {
+      return /*#__PURE__*/_jsx(Text, {
+        style: styles.noteRow,
+        children: row.text
+      });
+    }
+    return /*#__PURE__*/_jsx(ItemRow, {
+      row: row,
+      onOpen: () => onOpenItem(row.sourceId, row.item),
+      onToggle: () => toggleItem(cKey(row.sourceId, row.item.key))
+    });
+  }, [onOpenItem, toggleCollapse, toggleItem, toggleSource]);
+  const keyExtractor = useCallback(row => {
+    if (row.kind === "source") return `s:${row.source.id}`;
+    if (row.kind === "note") return `n:${row.id}`;
+    return `i:${row.sourceId}:${row.item.key}`;
+  }, []);
+  const header = /*#__PURE__*/_jsxs(View, {
+    children: [!hosted && /*#__PURE__*/_jsxs(View, {
+      style: styles.fallbackHeader,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onBack,
+        hitSlop: HIT,
+        testID: "tm-preview-back",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.backText,
+          children: "\u2039 Back"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.screenTitle,
+        numberOfLines: 1,
+        children: "Restore Preview"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.compareCard,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.compareSide,
+        onPress: () => onPickSide("left"),
+        testID: "tm-preview-pick-left",
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.compareTagRow,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.stateDot, {
+              backgroundColor: buoyColors.info
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.compareTag,
+            children: liveLeft ? "CURRENT STATE" : "SNAPSHOT"
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.compareName,
+          numberOfLines: 1,
+          children: sideName(preview.left, snapshots)
+        }), liveLeft ? /*#__PURE__*/_jsxs(View, {
+          style: styles.compareMetaRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.compareMeta,
+            children: ["built ", timeAgo(preview.builtAt), " ago"]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onRefresh,
+            disabled: preview.building,
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 6,
+              right: 8
+            },
+            accessibilityLabel: "Rebuild preview",
+            testID: "tm-preview-refresh",
+            children: /*#__PURE__*/_jsx(RefreshCw, {
+              size: 11,
+              color: preview.building ? macOSColors.text.disabled : buoyColors.textSecondary
+            })
+          })]
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.compareMeta,
+          children: "snapshot"
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.swapBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.swapGlyph,
+          children: "\u21C4"
+        })
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.compareSide, styles.compareSideRight],
+        onPress: () => onPickSide("right"),
+        testID: "tm-preview-pick-right",
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.compareTagRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.compareTag,
+            children: isBaseline ? "BASELINE" : "SNAPSHOT"
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.stateDot, {
+              backgroundColor: buoyColors.success
+            }]
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.compareName, styles.compareNameRight],
+          numberOfLines: 1,
+          children: sideName(preview.right, snapshots)
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.compareMeta, styles.compareMetaRight],
+          children: rightMeta ? `${timeAgo(rightMeta.createdAt)} ago` : ""
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.changesRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.changesTitleRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.changesTitle,
+          children: "Changes to restore"
+        }), totals.applies + totals.excludedCount > 1 && /*#__PURE__*/_jsxs(View, {
+          style: styles.selectLinks,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: selectAll,
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 4,
+              right: 4
+            },
+            testID: "tm-preview-select-all",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.selectLink, totals.excludedCount === 0 && styles.selectLinkActive],
+              children: "all"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.selectLinkSep,
+            children: "\xB7"
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: selectNone,
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 4,
+              right: 4
+            },
+            testID: "tm-preview-select-none",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.selectLink, totals.applies === 0 && totals.excludedCount > 0 && styles.selectLinkActive],
+              children: "none"
+            })
+          }), liveLeft && rightMeta && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.selectLinkSep,
+              children: "\xB7"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: saveScope,
+              hitSlop: {
+                top: 8,
+                bottom: 8,
+                left: 4,
+                right: 4
+              },
+              testID: "tm-preview-save-scope",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.selectLink, !!rightMeta.scope?.length && styles.selectLinkActive],
+                children: "save scope"
+              })
+            })]
+          })]
+        })]
+      }), preview.building ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: buoyColors.primary
+      }) : /*#__PURE__*/_jsx(View, {
+        style: styles.changesChip,
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: styles.changesChipText,
+          numberOfLines: 1,
+          children: [totals.applies === 0 ? totals.excludedCount > 0 ? "everything excluded" : "no changes" : totals.perSource.join(" · "), totals.excludedCount > 0 && totals.applies > 0 ? `  ·  ${totals.excludedCount} excluded` : ""]
+        })
+      })]
+    }), totals.wontApply > 0 && /*#__PURE__*/_jsxs(Text, {
+      style: styles.wontApplyLine,
+      children: ["\u2298 ", totals.wontApply, " item", totals.wontApply === 1 ? "" : "s", " won't apply \u2014 shown inline with the reason"]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.searchRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.searchField,
+        children: [/*#__PURE__*/_jsx(Search, {
+          size: 14,
+          color: buoyColors.textMuted
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: styles.searchInput,
+          value: localSearch,
+          onChangeText: setLocalSearch,
+          placeholder: "Filter keys\u2026",
+          placeholderTextColor: buoyColors.textMuted,
+          autoCorrect: false,
+          autoCapitalize: "none",
+          testID: "tm-preview-search"
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.collapseAllButton,
+        onPress: toggleAllCollapsed,
+        accessibilityLabel: allCollapsed ? "Expand all" : "Collapse all",
+        testID: "tm-preview-collapse-all",
+        children: /*#__PURE__*/_jsx(Filter, {
+          size: 15,
+          color: buoyColors.textSecondary
+        })
+      })]
+    })]
+  });
+  const ctaDisabled = busy || preview.building || totals.applies === 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      data: rows,
+      renderItem: renderRow,
+      keyExtractor: keyExtractor,
+      ListHeaderComponent: header,
+      ListEmptyComponent: preview.building ? null : /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: search ? "Nothing matches this filter." : "No changes — restoring would change nothing."
+      }),
+      removeClippedSubviews: true,
+      initialNumToRender: 20,
+      windowSize: 7,
+      contentContainerStyle: styles.listContent
+    }), liveLeft && rightMeta && /*#__PURE__*/_jsxs(View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.cta, isBaseline && styles.ctaDanger, ctaDisabled && styles.ctaDisabled],
+        onPress: () => onRestore(isBaseline ? "reload" : "live", Array.from(excluded)),
+        disabled: isBaseline ? busy || preview.building : ctaDisabled,
+        testID: "tm-preview-restore",
+        children: [/*#__PURE__*/_jsx(RefreshCw, {
+          size: 16,
+          color: "#0A0A0A"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.ctaText,
+          children: isBaseline ? "Wipe & Reload" : "Restore State"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.ctaCaption,
+        children: isBaseline ? "This wipes all app storage and reloads the app." : totals.excludedCount > 0 ? `Restores ${totals.applies} of ${totals.applies + totals.excludedCount} change${totals.applies + totals.excludedCount === 1 ? "" : "s"} — everything else stays as it is.` : "This will replace the current state with the snapshot."
+      })]
+    })]
+  });
+}
+const HIT = {
+  top: 10,
+  bottom: 10,
+  left: 10,
+  right: 10
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  fallbackHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    gap: 10
+  },
+  backText: {
+    color: buoyColors.primary,
+    fontSize: 14
+  },
+  screenTitle: {
+    color: buoyColors.text,
+    fontSize: 13,
+    fontWeight: "700",
+    flex: 1
+  },
+  toolbarButton: {
+    padding: 4,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dimmed: {
+    opacity: 0.55
+  },
+  listContent: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12
+  },
+  // Compare card
+  compareCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 14,
+    gap: 10
+  },
+  compareSide: {
+    flex: 1,
+    minWidth: 0,
+    gap: 3
+  },
+  compareSideRight: {
+    alignItems: "flex-end"
+  },
+  compareTagRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5
+  },
+  stateDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  compareTag: {
+    color: buoyColors.textSecondary,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6
+  },
+  compareName: {
+    color: buoyColors.text,
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  compareNameRight: {
+    textAlign: "right"
+  },
+  compareMeta: {
+    color: buoyColors.textMuted,
+    fontSize: 10
+  },
+  compareMetaRight: {
+    textAlign: "right"
+  },
+  compareMetaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  swapBadge: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  swapGlyph: {
+    color: buoyColors.textSecondary,
+    fontSize: 14
+  },
+  // Changes row
+  changesRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 14,
+    gap: 10
+  },
+  changesTitle: {
+    color: buoyColors.text,
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  changesTitleRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 8
+  },
+  selectLinks: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 4
+  },
+  selectLink: {
+    color: buoyColors.textMuted,
+    fontSize: 12
+  },
+  selectLinkActive: {
+    color: buoyColors.primary,
+    fontWeight: "600"
+  },
+  selectLinkSep: {
+    color: buoyColors.textMuted,
+    fontSize: 12
+  },
+  changesChip: {
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    maxWidth: "60%"
+  },
+  changesChipText: {
+    color: buoyColors.textSecondary,
+    fontSize: 11
+  },
+  wontApplyLine: {
+    color: buoyColors.warning,
+    fontSize: 11,
+    marginTop: 6
+  },
+  // Search row
+  searchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginTop: 10,
+    marginBottom: 6
+  },
+  searchField: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10
+  },
+  searchInput: {
+    flex: 1,
+    color: buoyColors.text,
+    fontSize: 12,
+    paddingVertical: 8
+  },
+  collapseAllButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Checkbox
+  checkbox: {
+    width: 18,
+    height: 18,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: buoyColors.textMuted,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkboxChecked: {
+    borderColor: buoyColors.primary,
+    backgroundColor: `${buoyColors.primary}26`
+  },
+  checkboxGlyph: {
+    color: buoyColors.primary,
+    fontSize: 11,
+    fontWeight: "700",
+    lineHeight: 13
+  },
+  // Source cards
+  sourceCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginTop: 8,
+    gap: 10
+  },
+  sourceCardTouch: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minWidth: 0
+  },
+  sourceIconTile: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  sourceNameBlock: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  sourceName: {
+    color: buoyColors.text,
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  sourceSummary: {
+    color: buoyColors.textMuted,
+    fontSize: 11,
+    fontVariant: ["tabular-nums"]
+  },
+  sourceBadges: {
+    flexDirection: "row",
+    gap: 8
+  },
+  sourceBadge: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"]
+  },
+  noteRow: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    paddingLeft: 24,
+    paddingTop: 6
+  },
+  // Item rows (nested under a source card)
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 9,
+    marginTop: 6,
+    marginLeft: 14,
+    gap: 10
+  },
+  itemBodyTouch: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 0
+  },
+  itemGlyph: {
+    fontSize: 13,
+    fontWeight: "700",
+    width: 14,
+    textAlign: "center"
+  },
+  itemBody: {
+    flex: 1,
+    minWidth: 0
+  },
+  itemLabel: {
+    color: buoyColors.text,
+    fontSize: 12
+  },
+  itemPreview: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    marginTop: 2,
+    fontVariant: ["tabular-nums"]
+  },
+  itemPreviewRemoved: {
+    textDecorationLine: "line-through"
+  },
+  itemReason: {
+    color: buoyColors.warning,
+    fontSize: 10,
+    marginTop: 2
+  },
+  itemExcluded: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    marginTop: 2,
+    fontStyle: "italic"
+  },
+  itemChevron: {
+    color: buoyColors.textMuted,
+    fontSize: 16
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 24
+  },
+  // Footer CTA
+  footer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    gap: 6,
+    borderTopColor: buoyColors.border,
+    borderTopWidth: 1,
+    backgroundColor: buoyColors.base
+  },
+  cta: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: buoyColors.primary,
+    borderRadius: 24,
+    paddingVertical: 13
+  },
+  ctaDanger: {
+    backgroundColor: buoyColors.error
+  },
+  ctaDisabled: {
+    opacity: 0.4
+  },
+  ctaText: {
+    color: "#0A0A0A",
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  ctaCaption: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    textAlign: "center"
+  }
+});
+//# sourceMappingURL=RestorePreviewScreen.js.map