@buoy-gg/time-machine 7.0.21 → 7.0.23

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

@@ -3,9 +3,10 @@
 /**
  * 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.
+ * ONE virtualized FlatList is the scrollable area (the section header, the
+ * source rows, their item rows and the inline diffs are all list rows) with
+ * a sticky Restore CTA footer — no nested scroll regions, so 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,
@@ -16,20 +17,16 @@
  * 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 { ActivityIndicator, FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ChevronUp, AlertTriangle, RefreshCw, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { useToolHeader, useToolHost } from "@buoy-gg/core";
-import { timeMachineStore } from "../../store/timeMachineStore";
+import { DisclosureChevron, Group, SectionLabel } from "../../ui/primitives";
+import { TM_MONO, tm } from "../../ui/tmTheme";
+import { timeMachineStore, willRestoreRoute } from "../../store/timeMachineStore";
+import { ItemDiffPanel } from "./ItemDiffPanel";
+import { RestorePointNameRow } from "./RestorePointNameRow";
 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",
@@ -37,6 +34,29 @@ const SOURCE_NOUNS = {
   jotai: "atoms",
   query: "queries"
 };
+
+/**
+ * Where a row sits in the one card that holds the whole list. The list has
+ * to stay flat to stay virtualized, so each row paints its own share of the
+ * card: the first row rounds its top, the last rounds its bottom, and every
+ * other row draws the hairline above it.
+ */
+
+/**
+ * The route leg, as a row in the same card as the sources. It is not a
+ * source — nothing diffs it — but "will this also take me back to
+ * /checkout?" is a decision about THIS restore, so it belongs beside the
+ * other things the restore is about to do rather than on the list screen.
+ */
+
+/** Shared empty selection — a stable identity for "nothing is excluded". */
+const EMPTY_SELECTION = new Set();
+function sameSelection(a, b) {
+  if (a.size !== b.size) return false;
+  for (const key of a) if (!b.has(key)) return false;
+  return true;
+}
+
 /** Compound exclusion key — what timeMachineStore.restore expects. */
 function cKey(sourceId, itemKey) {
   return `${sourceId}::${itemKey}`;
@@ -51,95 +71,120 @@ function shortPreview(value) {
     return "[complex]";
   }
 }
-function sideName(ref, snapshots) {
-  if (ref === "current") return "Current state";
-  return snapshots.find(s => s.id === ref.snapshotId)?.name ?? ref.snapshotId;
+
+/**
+ * The grouped-card shell one row paints. Rounds the ends, insets the card
+ * from the sheet, and draws the hairline that separates it from the row
+ * above — the same shape the home list's <Group> makes, rebuilt per row so
+ * the list stays virtualized.
+ */
+function CardRow({
+  position,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.cardRow, position.first ? styles.cardRowFirst : null, position.last ? styles.cardRowLast : null],
+    children: [position.first ? null : /*#__PURE__*/_jsx(View, {
+      style: styles.cardSeparator
+    }), children]
+  });
 }
-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 CountPill({
+  glyph,
+  count,
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.countPill, {
+      backgroundColor: `${color}26`
+    }],
+    children: /*#__PURE__*/_jsxs(Text, {
+      style: [styles.countPillText, {
+        color
+      }],
+      children: [glyph, count]
+    })
+  });
 }
 function Checkbox({
   state
 }) {
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     style: [styles.checkbox, state !== "none" && styles.checkboxChecked],
-    children: [state === "all" && /*#__PURE__*/_jsx(Text, {
-      style: styles.checkboxGlyph,
-      children: "\u2713"
-    }), state === "some" && /*#__PURE__*/_jsx(Text, {
+    children: state === "none" ? null : /*#__PURE__*/_jsx(Text, {
       style: styles.checkboxGlyph,
-      children: "\u2212"
-    })]
+      children: state === "all" ? "✓" : "−"
+    })
   });
 }
 const ItemRow = /*#__PURE__*/memo(function ItemRow({
   row,
+  expanded,
   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,
+  return /*#__PURE__*/_jsx(CardRow, {
+    position: row,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.itemRow, dimmed && styles.dimmed],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onToggle,
+        disabled: !meta.applies,
+        hitSlop: {
+          top: 10,
+          bottom: 10,
+          left: 8,
+          right: 8
+        },
+        testID: `tm-preview-toggle-${row.sourceId}-${row.item.key}`,
+        children: /*#__PURE__*/_jsx(Checkbox, {
+          state: !meta.applies || 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.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"
+          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 ? expanded ? /*#__PURE__*/_jsx(ChevronUp, {
+          size: 16,
+          color: tm.color.labelTertiary
+        }) : /*#__PURE__*/_jsx(DisclosureChevron, {}) : null]
       })]
-    })]
+    })
   });
 });
 export function RestorePreviewScreen({
@@ -147,43 +192,65 @@ export function RestorePreviewScreen({
   snapshots,
   busy,
   onBack,
-  onOpenItem,
-  onRestore,
-  onPickSide,
-  onRefresh
+  onRestore
 }) {
   const host = useToolHost();
   const hosted = host.instanceId !== undefined;
-  const [localSearch, setLocalSearch] = useState("");
+  // `minBottom` is a floor, not a preference: the dimension map can't know
+  // about a device that ships next year, and an unmapped one falls through to
+  // `bottom: 0`. This keeps the CTA off the home indicator either way.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
   const [collapsed, setCollapsed] = useState({});
-  const [allCollapsed, setAllCollapsed] = useState(false);
   const [excluded, setExcluded] = useState(new Set());
-  const search = localSearch;
+  /** Set by every checkbox interaction — see the auto-save effect below. */
+  const userEditedRef = useRef(false);
+  /** Item rows whose diff is expanded inline, by compound key. */
+  const [openDiffs, setOpenDiffs] = useState(EMPTY_SELECTION);
+  const toggleDiff = useCallback(key => {
+    setOpenDiffs(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);else next.add(key);
+      return next;
+    });
+  }, []);
+  // Filtering lives in the shared modal header (the magnifier), same as the
+  // restore-point list and every other Buoy tool — one place to look for it.
+  const search = host.search;
   const rightMeta = preview.right === "current" ? undefined : snapshots.find(s => s.id === preview.right.snapshotId);
+  // Latest-ref: `renderRow` is memoized on its handlers, so this one has to
+  // keep a stable identity while still reading the current snapshot.
+  const rightMetaRef = useRef(rightMeta);
+  rightMetaRef.current = rightMeta;
+
+  /** Flip whether this restore also navigates back to the captured route. */
+  const toggleRoute = useCallback(() => {
+    if (!rightMetaRef.current) return;
+    const meta = rightMetaRef.current;
+    void timeMachineStore.setRestoreRoute(meta.id, !willRestoreRoute(meta));
+  }, []);
   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]);
+  /**
+   * The selection this restore point already remembers, as exclusions. Null
+   * until there is a snapshot on the right-hand side to have one.
+   */
+  const savedExcluded = useMemo(() => {
+    if (!rightMeta) return null;
+    return rightMeta.excludedKeys?.length ? new Set(rightMeta.excludedKeys) : EMPTY_SELECTION;
+  }, [rightMeta]);
 
-  // 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;
+  /**
+   * A snapshot still carrying the older `scope` include-list ("only ever
+   * touch these", set via MCP). It seeds the checkboxes and is converted to
+   * exclusions on read — a restore of it would otherwise still apply include
+   * semantics, and the two forms would disagree about what one tap does.
+   */
+  const legacyScoped = !!rightMeta?.scope?.length && !rightMeta?.excludedKeys?.length;
+  const legacySeed = useMemo(() => {
+    if (!legacyScoped || !rightMeta?.scope) return EMPTY_SELECTION;
     const scopeSet = new Set(rightMeta.scope);
     const next = new Set();
     for (const src of preview.sources) {
@@ -194,28 +261,48 @@ export function RestorePreviewScreen({
         }
       }
     }
-    setExcluded(next);
-  }, [rightMeta, preview.building, preview.sources]);
+    return next;
+  }, [legacyScoped, rightMeta, 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);
-        }
-      }
+  // Open with the saved selection already applied — once per snapshot, and
+  // only once there is a diff to apply it to.
+  const seededFor = useRef(null);
+  useEffect(() => {
+    if (!rightMeta || preview.building || !savedExcluded) return;
+    if (seededFor.current === rightMeta.id) return;
+    seededFor.current = rightMeta.id;
+    userEditedRef.current = false;
+    const seed = savedExcluded.size > 0 ? savedExcluded : legacySeed;
+    if (seed.size > 0) setExcluded(new Set(seed));
+    // Convert an older include-list scope the moment it's read, so the two
+    // forms never disagree about what a restore will do.
+    if (legacyScoped && seed.size > 0) {
+      void timeMachineStore.setExclusions(rightMeta.id, Array.from(seed));
     }
-    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]);
+  }, [rightMeta, preview.building, savedExcluded, legacySeed, legacyScoped]);
+
+  /**
+   * Auto-save. The checkboxes ARE the restore point's setting, so there is
+   * nothing to confirm — every edit persists as EXCLUSIONS (the items to
+   * leave alone), and every later restore of this point honors them, one-tap
+   * RESTORE and MCP included.
+   *
+   * Never an include list: unchecking one of ten keys must keep restoring the
+   * other nine AND anything that only starts differing tomorrow, which a list
+   * built from today's diff cannot do.
+   *
+   * Gated on a ref rather than on comparing to what's stored, because on the
+   * frames before the seed lands `excluded` is legitimately empty — writing
+   * that would erase the saved selection we are about to load.
+   */
+  useEffect(() => {
+    if (!rightMeta || !savedExcluded || !userEditedRef.current) return;
+    if (sameSelection(excluded, savedExcluded)) return;
+    const keys = Array.from(excluded);
+    void timeMachineStore.setExclusions(rightMeta.id, keys.length ? keys : null);
+  }, [excluded, rightMeta, savedExcluded]);
   const toggleItem = useCallback(key => {
+    userEditedRef.current = true;
     setExcluded(prev => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);else next.add(key);
@@ -223,6 +310,7 @@ export function RestorePreviewScreen({
     });
   }, []);
   const toggleSource = useCallback((source, includeState) => {
+    userEditedRef.current = true;
     setExcluded(prev => {
       const next = new Set(prev);
       for (const item of source.items) {
@@ -243,13 +331,6 @@ export function RestorePreviewScreen({
       [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;
@@ -280,23 +361,31 @@ export function RestorePreviewScreen({
   // 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
+    subtitle: rightMeta?.name ?? "preview",
+    onBack
   } : null,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [hosted, rightMeta?.name]);
-  const rows = useMemo(() => {
+  const {
+    rows,
+    blockedSources
+  } = useMemo(() => {
     const q = search.trim().toLowerCase();
     const out = [];
+    // Sources the restore would not touch at all get no card: "no changes"
+    // rows are noise on a screen about what WILL change.
+    /** Sources holding a won't-apply item, so the note can name where to look. */
+    const blocked = [];
     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");
+      if (!relevant && !src.error) continue;
       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;
+      if (wontApplyCount > 0) blocked.push(src.label);
       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;
@@ -317,7 +406,10 @@ export function RestorePreviewScreen({
         if (q && !item.label.toLowerCase().includes(q)) return false;
         return true;
       });
-      const isCollapsed = !expandable ? true : collapsed[src.id] ?? (applicable.length === 0 && !src.error);
+      // Everything starts collapsed. The screen's job on open is "which
+      // sources would this touch, and how much" — expanding a source with
+      // 58 keys before you asked buries that under its own contents.
+      const isCollapsed = expandable ? collapsed[src.id] ?? true : true;
       out.push({
         kind: "source",
         source: src,
@@ -326,35 +418,73 @@ export function RestorePreviewScreen({
         applicableCount: applicable.length,
         counts,
         expandable,
-        summary
+        summary,
+        first: false,
+        last: false
       });
       if (!isCollapsed) {
         for (const note of src.notes) {
           out.push({
             kind: "note",
             id: `${src.id}:${note}`,
-            text: note
+            text: note,
+            first: false,
+            last: false
           });
         }
         if (src.error) {
           out.push({
             kind: "note",
             id: `${src.id}:err`,
-            text: `⚠ ${src.error}`
+            text: `⚠ ${src.error}`,
+            first: false,
+            last: false
           });
         }
         for (const item of visible) {
+          const key = cKey(src.id, item.key);
           out.push({
             kind: "item",
             sourceId: src.id,
             item,
-            excluded: excluded.has(cKey(src.id, item.key))
+            excluded: excluded.has(key),
+            first: false,
+            last: false
           });
+          if (openDiffs.has(key)) {
+            out.push({
+              kind: "diff",
+              sourceId: src.id,
+              item,
+              first: false,
+              last: false
+            });
+          }
         }
       }
     }
-    return out;
-  }, [preview.sources, search, collapsed, excluded]);
+    if (rightMeta?.route) {
+      out.push({
+        kind: "route",
+        href: rightMeta.route.href,
+        on: willRestoreRoute(rightMeta),
+        first: false,
+        last: false
+      });
+    }
+    // ONE card holds every source — the ends of the LIST round, and every
+    // other boundary is just a hairline. Per-source cards would read as
+    // separate groups, which they aren't: this is one list of what a restore
+    // would touch.
+    if (out.length > 0) {
+      out[0].first = true;
+      out[out.length - 1].last = true;
+    }
+    return {
+      rows: out,
+      blockedSources: blocked
+    };
+  }, [preview.sources, search, collapsed, excluded, openDiffs, rightMeta]);
   const renderRow = useCallback(({
     item: row
   }) => {
@@ -363,86 +493,119 @@ export function RestorePreviewScreen({
       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
+      return /*#__PURE__*/_jsx(CardRow, {
+        position: row,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.sourceCard,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => toggleSource(src, row.includeState),
+            disabled: row.applicableCount === 0,
+            hitSlop: {
+              top: 10,
+              bottom: 10,
+              left: 8,
+              right: 8
+            },
+            testID: `tm-preview-source-toggle-${src.id}`,
+            children: /*#__PURE__*/_jsx(Checkbox, {
+              state: row.applicableCount === 0 ? "none" : 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__*/_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
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.sourceBadges,
+              children: [counts.removed > 0 ? /*#__PURE__*/_jsx(CountPill, {
+                glyph: "\u2212",
+                count: counts.removed,
+                color: tm.color.danger
+              }) : null, counts.added > 0 ? /*#__PURE__*/_jsx(CountPill, {
+                glyph: "+",
+                count: counts.added,
+                color: tm.color.accent
+              }) : null, counts.changed > 0 ? /*#__PURE__*/_jsx(CountPill, {
+                glyph: "\u2248",
+                count: counts.changed,
+                color: tm.color.info
+              }) : null]
+            }), row.expandable ? row.collapsed ? /*#__PURE__*/_jsx(DisclosureChevron, {}) : /*#__PURE__*/_jsx(ChevronUp, {
+              size: 16,
+              color: tm.color.labelTertiary
+            }) : null]
+          })]
+        })
+      });
+    }
+    if (row.kind === "note") {
+      return /*#__PURE__*/_jsx(CardRow, {
+        position: row,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.noteRow,
+          children: row.text
+        })
+      });
+    }
+    if (row.kind === "route") {
+      return /*#__PURE__*/_jsx(CardRow, {
+        position: row,
+        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.routeRow,
+          onPress: toggleRoute,
+          accessibilityRole: "switch",
+          accessibilityState: {
+            checked: row.on
+          },
+          accessibilityLabel: `Also return to ${row.href}`,
+          testID: "tm-preview-route",
+          children: [/*#__PURE__*/_jsx(Checkbox, {
+            state: row.on ? "all" : "none"
           }), /*#__PURE__*/_jsxs(View, {
-            style: styles.sourceNameBlock,
+            style: styles.routeText,
             children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.sourceName,
-              numberOfLines: 1,
-              children: src.label
+              style: styles.routeTitle,
+              children: "Return to this screen"
             }), /*#__PURE__*/_jsx(Text, {
-              style: styles.sourceSummary,
+              style: styles.routeHref,
               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]
+              children: row.href
             })]
-          }), 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
+    if (row.kind === "diff") {
+      return /*#__PURE__*/_jsx(CardRow, {
+        position: row,
+        children: /*#__PURE__*/_jsx(ItemDiffPanel, {
+          item: row.item
+        })
       });
     }
     return /*#__PURE__*/_jsx(ItemRow, {
       row: row,
-      onOpen: () => onOpenItem(row.sourceId, row.item),
+      expanded: openDiffs.has(cKey(row.sourceId, row.item.key)),
+      onOpen: () => toggleDiff(cKey(row.sourceId, row.item.key)),
       onToggle: () => toggleItem(cKey(row.sourceId, row.item.key))
     });
-  }, [onOpenItem, toggleCollapse, toggleItem, toggleSource]);
+  }, [openDiffs, toggleDiff, toggleCollapse, toggleItem, toggleSource, toggleRoute]);
   const keyExtractor = useCallback(row => {
     if (row.kind === "source") return `s:${row.source.id}`;
     if (row.kind === "note") return `n:${row.id}`;
+    if (row.kind === "route") return "route";
+    if (row.kind === "diff") return `d:${row.sourceId}:${row.item.key}`;
     return `i:${row.sourceId}:${row.item.key}`;
   }, []);
   const header = /*#__PURE__*/_jsxs(View, {
@@ -461,179 +624,17 @@ export function RestorePreviewScreen({
         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
+    }), rightMeta ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SectionLabel, {
+        children: "Restore Point"
+      }), /*#__PURE__*/_jsx(Group, {
+        children: /*#__PURE__*/_jsx(RestorePointNameRow, {
+          name: rightMeta.name,
+          onRename: next => void timeMachineStore.rename(rightMeta.id, next)
         })
       })]
+    }) : null, /*#__PURE__*/_jsx(SectionLabel, {
+      children: "Changes to Restore"
     })]
   });
   const ctaDisabled = busy || preview.building || totals.applies === 0;
@@ -644,16 +645,34 @@ export function RestorePreviewScreen({
       renderItem: renderRow,
       keyExtractor: keyExtractor,
       ListHeaderComponent: header,
-      ListEmptyComponent: preview.building ? null : /*#__PURE__*/_jsx(Text, {
+      ListEmptyComponent: preview.building ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        style: styles.buildingSpinner,
+        size: "small",
+        color: tm.color.accent
+      }) : /*#__PURE__*/_jsx(Text, {
         style: styles.emptyText,
         children: search ? "Nothing matches this filter." : "No changes — restoring would change nothing."
       }),
+      ListFooterComponent: /*#__PURE__*/_jsx(View, {
+        children: totals.wontApply > 0 ? /*#__PURE__*/_jsxs(View, {
+          style: styles.warnNote,
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            size: 12,
+            color: tm.color.warning
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.warnNoteText,
+            children: [totals.wontApply, " item", totals.wontApply === 1 ? "" : "s", " ", "won't apply \u2014 expand", " ", blockedSources.length > 0 ? blockedSources.join(" and ") : "the source", " ", "to see the reason."]
+          })]
+        }) : null
+      }),
       removeClippedSubviews: true,
       initialNumToRender: 20,
       windowSize: 7,
       contentContainerStyle: styles.listContent
     }), liveLeft && rightMeta && /*#__PURE__*/_jsxs(View, {
-      style: styles.footer,
+      style: [styles.footer, {
+        paddingBottom: insets.bottom
+      }],
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
         style: [styles.cta, isBaseline && styles.ctaDanger, ctaDisabled && styles.ctaDisabled],
         onPress: () => onRestore(isBaseline ? "reload" : "live", Array.from(excluded)),
@@ -661,9 +680,9 @@ export function RestorePreviewScreen({
         testID: "tm-preview-restore",
         children: [/*#__PURE__*/_jsx(RefreshCw, {
           size: 16,
-          color: "#0A0A0A"
+          color: isBaseline ? tm.color.onDanger : tm.color.onAccent
         }), /*#__PURE__*/_jsx(Text, {
-          style: styles.ctaText,
+          style: [styles.ctaText, isBaseline ? styles.ctaTextDanger : null],
           children: isBaseline ? "Wipe & Reload" : "Restore State"
         })]
       }), /*#__PURE__*/_jsx(Text, {
@@ -681,226 +700,133 @@ const HIT = {
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    backgroundColor: tm.color.sheet
   },
   fallbackHeader: {
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 8,
+    paddingHorizontal: tm.gutter,
+    paddingVertical: 10,
     gap: 10
   },
   backText: {
-    color: buoyColors.primary,
-    fontSize: 14
+    color: tm.color.accent,
+    fontSize: tm.font.control
   },
   screenTitle: {
-    color: buoyColors.text,
-    fontSize: 13,
+    color: tm.color.label,
+    fontSize: 20,
     fontWeight: "700",
+    letterSpacing: tm.tracking.row,
     flex: 1
   },
-  toolbarButton: {
-    padding: 4,
-    justifyContent: "center",
-    alignItems: "center"
-  },
   dimmed: {
-    opacity: 0.55
+    opacity: 0.5
   },
   listContent: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
+    paddingTop: 14,
     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
+  // ── The grouped card each list row paints its own share of ──────────────
+  cardRow: {
+    marginHorizontal: tm.gutter,
+    backgroundColor: tm.color.group
   },
-  swapBadge: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
-    backgroundColor: buoyColors.hover,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
+  cardRowFirst: {
+    borderTopLeftRadius: tm.radius.group,
+    borderTopRightRadius: tm.radius.group
   },
-  swapGlyph: {
-    color: buoyColors.textSecondary,
-    fontSize: 14
+  cardRowLast: {
+    borderBottomLeftRadius: tm.radius.group,
+    borderBottomRightRadius: tm.radius.group,
+    marginBottom: 10
   },
-  // Changes row
-  changesRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginTop: 14,
-    gap: 10
-  },
-  changesTitle: {
-    color: buoyColors.text,
-    fontSize: 14,
-    fontWeight: "700"
+  cardSeparator: {
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 51,
+    backgroundColor: tm.color.separator
   },
-  changesTitleRow: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    gap: 8
-  },
-  selectLinks: {
+  // ── Selection card ──────────────────────────────────────────────────────
+
+  // ── The "won't apply" heads-up under the card ───────────────────────────
+  warnNote: {
     flexDirection: "row",
-    alignItems: "baseline",
-    gap: 4
-  },
-  selectLink: {
-    color: buoyColors.textMuted,
-    fontSize: 12
+    alignItems: "flex-start",
+    gap: 6,
+    paddingHorizontal: tm.gutter + tm.textInset,
+    paddingTop: 8
   },
-  selectLinkActive: {
-    color: buoyColors.primary,
+  warnNoteText: {
+    flex: 1,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35
+  },
+  // ── Count pills on a source row ─────────────────────────────────────────
+  countPill: {
+    borderRadius: tm.radius.pill,
+    paddingHorizontal: 9,
+    paddingVertical: 3
+  },
+  countPillText: {
+    fontFamily: TM_MONO,
+    fontSize: tm.font.footnote,
     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
+  // ── Include checkbox ────────────────────────────────────────────────────
+  checkbox: {
+    width: 23,
+    height: 23,
+    borderRadius: tm.radius.pill,
+    borderWidth: 1.7,
+    borderColor: tm.color.labelTertiary,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  wontApplyLine: {
-    color: buoyColors.warning,
-    fontSize: 11,
-    marginTop: 6
+  checkboxChecked: {
+    borderColor: tm.color.accent,
+    backgroundColor: tm.color.accent
   },
-  // Search row
-  searchRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginTop: 10,
-    marginBottom: 6
+  checkboxGlyph: {
+    color: tm.color.onAccent,
+    fontSize: 13,
+    fontWeight: "700",
+    lineHeight: 15
   },
-  searchField: {
-    flex: 1,
+  // ── Route row ───────────────────────────────────────────────────────────
+  routeRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10
+    minHeight: 58,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 9,
+    gap: 12
   },
-  searchInput: {
+  routeText: {
     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"
+    minWidth: 0,
+    gap: 2
   },
-  checkboxChecked: {
-    borderColor: buoyColors.primary,
-    backgroundColor: `${buoyColors.primary}26`
+  routeTitle: {
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row
   },
-  checkboxGlyph: {
-    color: buoyColors.primary,
-    fontSize: 11,
-    fontWeight: "700",
-    lineHeight: 13
+  routeHref: {
+    color: tm.color.labelSecondary,
+    fontFamily: TM_MONO,
+    fontSize: tm.font.mono
   },
-  // Source cards
+  // ── Source header row (first row of its card) ───────────────────────────
   sourceCard: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    marginTop: 8,
-    gap: 10
+    minHeight: 58,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 9,
+    gap: 12
   },
   sourceCardTouch: {
     flex: 1,
@@ -909,67 +835,51 @@ const styles = StyleSheet.create({
     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"
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row
   },
   sourceSummary: {
-    color: buoyColors.textMuted,
-    fontSize: 11,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
     fontVariant: ["tabular-nums"]
   },
   sourceBadges: {
     flexDirection: "row",
-    gap: 8
-  },
-  sourceBadge: {
-    fontSize: 13,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"]
+    gap: 6
   },
   noteRow: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    paddingLeft: 24,
-    paddingTop: 6
+    color: tm.color.labelTertiary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 9
   },
-  // Item rows (nested under a source card)
+  // ── Item rows (further rows of the same 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
+    paddingLeft: tm.textInset,
+    paddingRight: tm.textInset,
+    paddingVertical: 10,
+    gap: 12
   },
   itemBodyTouch: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: 10,
     minWidth: 0
   },
   itemGlyph: {
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: "700",
     width: 14,
     textAlign: "center"
@@ -979,72 +889,76 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
   itemLabel: {
-    color: buoyColors.text,
-    fontSize: 12
+    color: tm.color.label,
+    fontSize: tm.font.control,
+    letterSpacing: tm.tracking.control
   },
   itemPreview: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    marginTop: 2,
-    fontVariant: ["tabular-nums"]
+    color: tm.color.labelSecondary,
+    fontFamily: TM_MONO,
+    fontSize: tm.font.mono,
+    marginTop: 3
   },
   itemPreviewRemoved: {
     textDecorationLine: "line-through"
   },
   itemReason: {
-    color: buoyColors.warning,
-    fontSize: 10,
-    marginTop: 2
+    color: tm.color.warning,
+    fontSize: tm.font.mono,
+    marginTop: 3
   },
   itemExcluded: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    marginTop: 2,
+    color: tm.color.labelTertiary,
+    fontSize: tm.font.mono,
+    marginTop: 3,
     fontStyle: "italic"
   },
-  itemChevron: {
-    color: buoyColors.textMuted,
-    fontSize: 16
+  buildingSpinner: {
+    marginTop: 28
   },
   emptyText: {
-    color: buoyColors.textMuted,
-    fontSize: 12,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
     textAlign: "center",
-    marginTop: 24
+    marginTop: 28
   },
-  // Footer CTA
+  // ── Sticky restore CTA ──────────────────────────────────────────────────
   footer: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 12,
-    gap: 6,
-    borderTopColor: buoyColors.border,
-    borderTopWidth: 1,
-    backgroundColor: buoyColors.base
+    paddingHorizontal: tm.gutter,
+    paddingTop: 10,
+    gap: 8,
+    borderTopColor: tm.color.separator,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    backgroundColor: tm.color.sheet
   },
   cta: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: 8,
-    backgroundColor: buoyColors.primary,
-    borderRadius: 24,
-    paddingVertical: 13
+    height: 50,
+    backgroundColor: tm.color.accent,
+    borderRadius: tm.radius.group
   },
   ctaDanger: {
-    backgroundColor: buoyColors.error
+    backgroundColor: tm.color.danger
+  },
+  ctaTextDanger: {
+    color: tm.color.onDanger
   },
   ctaDisabled: {
     opacity: 0.4
   },
   ctaText: {
-    color: "#0A0A0A",
-    fontSize: 14,
-    fontWeight: "700"
+    color: tm.color.onAccent,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row
   },
   ctaCaption: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35,
     textAlign: "center"
   }
 });