@buoy-gg/time-machine 7.0.29 → 7.0.31

package/src/sync/timeMachineSyncAdapter.ts

@@ -1,241 +0,0 @@
-/**
- * Sync adapter for the Time Machine tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it).
- *
- * Snapshots stay ON-DEVICE — getSnapshot ships METADATA only (list, provider
- * statuses, last restore outcome), far under the 2MB per-tool budget. Payload
- * inspection goes through the `inspect` action (8MB action-result budget).
- *
- * The `restore` action uses the store's scheduleReloadApp path for reload
- * mode, so the action RESULT is flushed to the broker before the JS realm
- * dies — a remote caller always gets its answer.
- */
-import {
-  getStateSnapshotProviders,
-  subscribeToStateSnapshotProviders,
-  superJsonDeserialize,
-} from "@buoy-gg/shared-ui";
-import { jsonLikelyLargerThan } from "@buoy-gg/shared-ui/dataViewer";
-import {
-  timeMachineStore,
-  type PreviewSideRef,
-  type RestoreMode,
-} from "../store/timeMachineStore";
-import { loadSnapshot } from "../store/snapshotVault";
-import { canNavigate, currentRoute } from "../store/routeRestore";
-
-interface CaptureParams {
-  name?: string;
-  sourceIds?: string[];
-}
-interface RestoreParams {
-  id: string;
-  mode?: RestoreMode;
-  /** Compound "sourceId::itemKey" strings — items the caller opted out of. */
-  excludeKeys?: string[];
-  /** Also navigate back to the route the snapshot was captured on. */
-  restoreRoute?: boolean;
-}
-interface IdParams {
-  id: string;
-}
-interface RenameParams {
-  id: string;
-  name: string;
-}
-interface InspectParams {
-  id: string;
-  sourceId: string;
-}
-
-function providerStatuses() {
-  return getStateSnapshotProviders().map((p) => {
-    const s = p.status();
-    return {
-      id: p.id,
-      label: p.label,
-      canCapture: s.canCapture,
-      canRestore: s.canRestore,
-      detail: s.detail,
-    };
-  });
-}
-
-function metadata() {
-  const { snapshots, busy, lastOutcome } = timeMachineStore.getState();
-  const current = currentRoute();
-  return {
-    snapshots,
-    busy,
-    lastOutcome,
-    providers: providerStatuses(),
-    // Route capture/restore is a device capability, not a snapshot provider —
-    // a dashboard has no router of its own to probe, so it's mirrored here.
-    route: {
-      available: canNavigate(),
-      ...(current ? { current: current.href } : {}),
-    },
-  };
-}
-
-export const timeMachineSyncAdapter = {
-  // v2 adds `route` (device route capability) and `snapshots[].route`.
-  version: 2,
-  getSnapshot: () => metadata(),
-  subscribe: (onChange: () => void) => {
-    const unsubStore = timeMachineStore.subscribe(onChange);
-    const unsubProviders = subscribeToStateSnapshotProviders(onChange);
-    return () => {
-      unsubStore();
-      unsubProviders();
-    };
-  },
-  actions: {
-    list: () => metadata(),
-
-    capture: async (params: unknown) => {
-      const { name = "", sourceIds } = (params as CaptureParams) ?? {};
-      const meta = await timeMachineStore.capture(name, sourceIds);
-      return { captured: true, snapshot: meta };
-    },
-
-    captureBaseline: async () => {
-      const meta = await timeMachineStore.captureBaseline();
-      return { captured: true, snapshot: meta };
-    },
-
-    /** Wipe every clearable source to fresh-install state, then reload. */
-    wipeAll: async () => await timeMachineStore.wipeAll(),
-
-    /** mode "live" (default) replaces state in place; "reload" restores
-     * persisted storage then reloads the JS bundle (always the path for
-     * baseline snapshots). */
-    restore: async (params: unknown) => {
-      const {
-        id,
-        mode = "live",
-        excludeKeys,
-        restoreRoute,
-      } = (params as RestoreParams) ?? {};
-      if (!id) throw new Error("restore requires a snapshot `id`");
-      return await timeMachineStore.restore(id, mode, excludeKeys, {
-        restoreRoute,
-      });
-    },
-
-    delete: async (params: unknown) => {
-      const { id } = (params as IdParams) ?? {};
-      if (!id) throw new Error("delete requires a snapshot `id`");
-      await timeMachineStore.delete(id);
-      return { deleted: true, id };
-    },
-
-    rename: async (params: unknown) => {
-      const { id, name } = (params as RenameParams) ?? {};
-      if (!id || !name) throw new Error("rename requires `id` and `name`");
-      await timeMachineStore.rename(id, name);
-      return { renamed: true, id, name };
-    },
-
-    /**
-     * Save (or clear with null/empty) the items a restore of this snapshot
-     * must leave alone — the persisted form of the preview's checkboxes.
-     */
-    setExclusions: async (params: unknown) => {
-      const { id, excludedKeys } =
-        (params as { id?: string; excludedKeys?: string[] | null }) ?? {};
-      if (!id) throw new Error("setExclusions requires `id`");
-      await timeMachineStore.setExclusions(id, excludedKeys ?? null);
-      return { id, excluded: excludedKeys?.length ?? 0 };
-    },
-
-    /** Turn a restore point's route restore on or off. */
-    setRestoreRoute: async (params: unknown) => {
-      const { id, restoreRoute } =
-        (params as { id?: string; restoreRoute?: boolean }) ?? {};
-      if (!id) throw new Error("setRestoreRoute requires `id`");
-      await timeMachineStore.setRestoreRoute(id, restoreRoute !== false);
-      return { id, restoreRoute: restoreRoute !== false };
-    },
-
-    /** Copy a restore point so a variation can start from a known base. */
-    duplicate: async (params: unknown) => {
-      const { id } = (params as { id?: string }) ?? {};
-      if (!id) throw new Error("duplicate requires `id`");
-      const snapshot = await timeMachineStore.duplicate(id);
-      if (!snapshot) throw new Error(`No snapshot with id "${id}"`);
-      return { snapshot };
-    },
-
-    /** Save (or clear with null/empty) a snapshot's targeted-restore scope. */
-    setScope: async (params: unknown) => {
-      const { id, scope } =
-        (params as { id?: string; scope?: string[] | null }) ?? {};
-      if (!id) throw new Error("setScope requires a snapshot `id`");
-      await timeMachineStore.setScope(id, scope ?? null);
-      return { scoped: true, id, count: scope?.length ?? 0 };
-    },
-
-    /**
-     * Item-level restore preview, computed ON-DEVICE. Values above ~4KB per
-     * item are omitted (valueOmitted) so the result stays far under the 8MB
-     * action budget on any app size.
-     */
-    preview: async (params: unknown) => {
-      const { id, compareTo } =
-        (params as { id?: string; compareTo?: string }) ?? {};
-      if (!id) throw new Error("preview requires a snapshot `id`");
-      const right: PreviewSideRef = { snapshotId: id };
-      const left: PreviewSideRef = compareTo
-        ? { snapshotId: compareTo }
-        : "current";
-      await timeMachineStore.buildPreview(right, left);
-      const preview = timeMachineStore.getState().preview;
-      if (!preview) throw new Error("preview build produced no result");
-      const VALUE_BUDGET = 4 * 1024;
-      return {
-        left,
-        right,
-        builtAt: preview.builtAt,
-        sources: preview.sources.map((src) => ({
-          ...src,
-          items: src.items.map((item) => {
-            const oldBig =
-              item.oldValue !== undefined &&
-              jsonLikelyLargerThan(item.oldValue, VALUE_BUDGET);
-            const newBig =
-              item.newValue !== undefined &&
-              jsonLikelyLargerThan(item.newValue, VALUE_BUDGET);
-            return {
-              ...item,
-              oldValue: oldBig ? undefined : item.oldValue,
-              newValue: newBig ? undefined : item.newValue,
-              ...(oldBig || newBig ? { valueOmitted: true } : {}),
-            };
-          }),
-        })),
-      };
-    },
-
-    /** One source's captured payload, deserialized — for remote inspection. */
-    inspect: async (params: unknown) => {
-      const { id, sourceId } = (params as InspectParams) ?? {};
-      if (!id || !sourceId) {
-        throw new Error("inspect requires `id` and `sourceId`");
-      }
-      const stored = await loadSnapshot(id);
-      if (!stored) throw new Error(`No snapshot with id "${id}"`);
-      const payload = stored.data[sourceId];
-      if (!payload) {
-        throw new Error(`Snapshot "${id}" has no "${sourceId}" source`);
-      }
-      return {
-        id,
-        sourceId,
-        warnings: stored.meta.sources[sourceId]?.warnings ?? [],
-        data: superJsonDeserialize(payload),
-      };
-    },
-  },
-};

package/src/ui/SwipeActionsRow.tsx

@@ -1,199 +0,0 @@
-/**
- * Swipe-left-to-reveal-actions wrapper for a grouped-list row.
- *
- * Deliberately dependency-free (Animated + PanResponder): the package has no
- * gesture-handler peer and a devtool must not add one to the host app.
- *
- * Gesture contract, in the order the checks matter:
- *  - The pan only claims the gesture once the finger has moved LEFT past a
- *    threshold and is travelling more horizontally than vertically, so taps
- *    still reach the row and vertical drags still scroll the list.
- *  - Releasing past half the action width latches open; anything less snaps
- *    shut, so a hesitant swipe never leaves a half-open row.
- *  - Only one row stays open at a time (module-level latch below) — matching
- *    iOS, and it means "swipe, then tap an action" can't hit the wrong row.
- */
-import { useEffect, useRef, type ReactNode } from "react";
-import {
-  Animated,
-  PanResponder,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type PanResponderInstance,
-} from "react-native";
-import { tm } from "./tmTheme";
-
-const ACTION_WIDTH = 84;
-/** Horizontal travel before the pan takes the gesture from the scroll view. */
-const CLAIM_THRESHOLD = 8;
-
-/** The one open row, so opening another closes it. */
-let closeOpenRow: (() => void) | null = null;
-
-interface Gesture {
-  pan: PanResponderInstance;
-  /** Closes this row — also the row's identity in the open-row latch. */
-  close: () => void;
-}
-
-/**
- * Everything gesture-side for one row, built once. Kept out of the component
- * so it reads as the state machine it is: `open` is the only state, and the
- * pan handlers are the only writers.
- */
-function createGesture(
-  translateX: Animated.Value,
-  openWidth: number
-): Gesture {
-  let open = false;
-
-  const settle = (next: boolean) => {
-    open = next;
-    if (next) {
-      if (closeOpenRow && closeOpenRow !== close) closeOpenRow();
-      closeOpenRow = close;
-    } else if (closeOpenRow === close) {
-      closeOpenRow = null;
-    }
-    Animated.spring(translateX, {
-      toValue: next ? -openWidth : 0,
-      useNativeDriver: true,
-      bounciness: 0,
-      speed: 18,
-    }).start();
-  };
-
-  const close = () => settle(false);
-
-  const pan = PanResponder.create({
-    onMoveShouldSetPanResponder: (_e, g) => {
-      const horizontal = Math.abs(g.dx) > Math.abs(g.dy) * 1.5;
-      if (!horizontal) return false;
-      // Left to open; right only matters when there is something to close.
-      return g.dx < -CLAIM_THRESHOLD || (open && g.dx > CLAIM_THRESHOLD);
-    },
-    onPanResponderMove: (_e, g) => {
-      const base = open ? -openWidth : 0;
-      // Clamp: no rubber-banding past the actions, none past closed.
-      translateX.setValue(Math.min(0, Math.max(-openWidth, base + g.dx)));
-    },
-    onPanResponderRelease: (_e, g) => {
-      const resting = (open ? -openWidth : 0) + g.dx;
-      // A fast flick decides on velocity; a slow drag on distance.
-      settle(
-        g.vx < -0.5 ? true : g.vx > 0.5 ? false : resting < -openWidth / 2
-      );
-    },
-    onPanResponderTerminate: () => settle(open),
-  });
-
-  return { pan, close };
-}
-
-export interface SwipeAction {
-  label: string;
-  /** Called after the row closes itself. */
-  onPress: () => void;
-  /** Fill behind the row. Defaults to the neutral action fill. */
-  background?: string;
-  color?: string;
-  testID?: string;
-}
-
-export function SwipeActionsRow({
-  children,
-  actions,
-  testID,
-}: {
-  children: ReactNode;
-  /** Rightmost is the one furthest from the content, iOS-style. */
-  actions: SwipeAction[];
-  testID?: string;
-}) {
-  const openWidth = ACTION_WIDTH * actions.length;
-  const translateX = useRef(new Animated.Value(0)).current;
-  const gestureRef = useRef<Gesture | null>(null);
-  if (gestureRef.current === null)
-    gestureRef.current = createGesture(translateX, openWidth);
-  const { pan, close } = gestureRef.current;
-
-  // A row that unmounts while open (deleted, filtered out, screen changed)
-  // must not leave the latch pointing at a dead closer.
-  useEffect(
-    () => () => {
-      if (closeOpenRow === close) closeOpenRow = null;
-    },
-    [close]
-  );
-
-  return (
-    <View style={styles.clip}>
-      <View style={[styles.actionLayer, { width: openWidth }]}>
-        {actions.map((action) => (
-          <TouchableOpacity
-            key={action.label}
-            style={[
-              styles.action,
-              action.background ? { backgroundColor: action.background } : null,
-            ]}
-            onPress={() => {
-              close();
-              action.onPress();
-            }}
-            accessibilityLabel={action.label}
-            testID={action.testID ?? (testID ? `${testID}-${action.label.toLowerCase()}` : undefined)}
-          >
-            <Text
-              style={[styles.actionText, action.color ? { color: action.color } : null]}
-              numberOfLines={1}
-            >
-              {action.label}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <Animated.View
-        style={[styles.content, { transform: [{ translateX }] }]}
-        {...pan.panHandlers}
-      >
-        {children}
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  clip: {
-    overflow: "hidden",
-  },
-  // Own geometry, no percentages: an absoluteFill layer with a `height:
-  // "100%"` child measured against this content-sized parent inflated every
-  // row to several hundred points on iOS/Fabric.
-  actionLayer: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: 0,
-    flexDirection: "row",
-  },
-  action: {
-    width: ACTION_WIDTH,
-    height: "100%",
-    backgroundColor: tm.color.fillStrong,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 6,
-  },
-  actionText: {
-    color: tm.color.label,
-    fontSize: tm.font.footnote,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.control,
-  },
-  // Opaque so the red action never bleeds through the row it sits under.
-  content: {
-    backgroundColor: tm.color.group,
-  },
-});

package/src/ui/primitives.tsx

@@ -1,174 +0,0 @@
-/**
- * Grouped-inset list primitives — the building blocks of the Time Machine
- * surface (see ./tmTheme for the tokens and the promotion plan).
- *
- * The shape they compose to:
- *
- *   SectionLabel      SOURCES                 ← outside the card, uppercase
- *   Group             ┌──────────────────┐
- *     <row>           │ All sources …  6 ›│    ← rows are plain children;
- *     <row>           ├──────────────────┤      Group draws the hairlines
- *                     └──────────────────┘
- *   Footnote          Route is captured with… ← explains the group above
- *
- * Rows are whatever a screen needs — Group only owns the card, the clipping
- * and the separators, so a row never has to know its position in the list.
- */
-import { Children, type ReactNode } from "react";
-import { StyleSheet, Text, View, type ViewStyle } from "react-native";
-import { ChevronRight } from "@buoy-gg/shared-ui";
-import { tm } from "./tmTheme";
-
-/** Uppercase section label that sits above a Group. */
-export function SectionLabel({
-  children,
-  testID,
-}: {
-  children: string;
-  testID?: string;
-}) {
-  return (
-    <Text style={styles.sectionLabel} testID={testID}>
-      {children}
-    </Text>
-  );
-}
-
-/**
- * Explanatory line under a Group ("Swipe a restore point to delete it").
- * `centered` matches the iOS convention for a footnote under a lone button.
- */
-export function Footnote({
-  children,
-  centered,
-  tone = "secondary",
-  testID,
-}: {
-  children: ReactNode;
-  centered?: boolean;
-  tone?: "secondary" | "warning";
-  testID?: string;
-}) {
-  return (
-    <Text
-      style={[
-        styles.footnote,
-        centered ? styles.footnoteCentered : null,
-        tone === "warning" ? styles.footnoteWarning : null,
-      ]}
-      testID={testID}
-    >
-      {children}
-    </Text>
-  );
-}
-
-/**
- * A rounded grouped card. Draws a hairline between consecutive children and
- * clips them, so a row can paint edge-to-edge (swipe actions, press washes)
- * without punching through the corners.
- */
-export function Group({
-  children,
-  style,
-}: {
-  children: ReactNode;
-  style?: ViewStyle;
-}) {
-  const rows = Children.toArray(children);
-  return (
-    <View style={[styles.group, style]}>
-      {rows.map((row, index) => (
-        // Children.toArray assigns stable synthetic keys ('.$id' for keyed
-        // children), so a row keeps its identity as the list changes.
-        <View key={(row as { key?: string }).key ?? index}>
-          {index > 0 ? <View style={styles.separator} /> : null}
-          {row}
-        </View>
-      ))}
-    </View>
-  );
-}
-
-/**
- * Trailing disclosure chevron for a row that opens or expands.
- *
- * A real glyph, not two rotated hairlines: at this size the hand-built
- * version's strokes never met at the vertex, so it read as a broken arrow.
- */
-export function DisclosureChevron() {
-  return <ChevronRight size={16} color={tm.color.labelTertiary} />;
-}
-
-/**
- * Pill button. Parameterized by color rather than by variant flags so a
- * screen can name its own (`CapturePill`, `RestorePill`) in one line.
- */
-export function PillLabel({
-  label,
-  color,
-  background,
-  testID,
-}: {
-  label: string;
-  color: string;
-  background: string;
-  testID?: string;
-}) {
-  return (
-    <View style={[styles.pill, { backgroundColor: background }]}>
-      <Text style={[styles.pillText, { color }]} testID={testID}>
-        {label}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  sectionLabel: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.4,
-    paddingHorizontal: tm.gutter + tm.textInset,
-    paddingTop: 22,
-    paddingBottom: 7,
-  },
-  footnote: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    lineHeight: tm.font.footnote * 1.35,
-    paddingHorizontal: tm.gutter + tm.textInset,
-    paddingTop: 7,
-  },
-  footnoteCentered: {
-    textAlign: "center",
-  },
-  footnoteWarning: {
-    color: tm.color.warning,
-  },
-  group: {
-    marginHorizontal: tm.gutter,
-    backgroundColor: tm.color.group,
-    borderRadius: tm.radius.group,
-    overflow: "hidden",
-  },
-  separator: {
-    height: StyleSheet.hairlineWidth,
-    marginLeft: tm.separatorInset,
-    backgroundColor: tm.color.separator,
-  },
-  pill: {
-    height: 32,
-    paddingHorizontal: 15,
-    borderRadius: tm.radius.pill,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  pillText: {
-    fontSize: tm.font.control,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.control,
-  },
-});