@buoy-gg/time-machine 7.0.22 → 7.0.24

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

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

package/lib/module/components/preview/ItemDetailScreen.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useMemo","useRef","useState","ScrollView","StyleSheet","Text","TouchableOpacity","View","DiffModeTabs","buoyColors","devToolsStorageKeys","persistentStorage","useToolHeader","useToolHost","ABSENT_VALUE","ThemedSplitView","TreeDiffViewer","devToolsDefaultTheme","toDiffable","VERDICT_META","jsx","_jsx","jsxs","_jsxs","DIFF_MODE_KEY","timeMachine","diffViewerMode","TABS","key","label","ItemDetailScreen","sourceLabel","item","leftLabel","rightLabel","onBack","diffMode","setDiffMode","hasLoadedMode","current","getItem","then","saved","changeMode","mode","setItem","catch","meta","verdict","host","hosted","instanceId","undefined","title","subtitle","searchable","oldValue","newValue","style","styles","container","children","screenHeader","onPress","hitSlop","HIT","testID","backText","titleBlock","numberOfLines","color","glyph","reason","tabs","activeTab","onTabChange","scroll","contentContainerStyle","scrollContent","theme","showUnchanged","scrollEnabled","differences","EMPTY","top","bottom","left","right","create","flex","flexDirection","alignItems","paddingHorizontal","paddingVertical","gap","primary","fontSize","minWidth","text","fontWeight","textMuted","marginTop","warning","paddingBottom"],"sourceRoot":"../../../../src","sources":["components/preview/ItemDetailScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/preview/ItemDetailScreen.d.ts

@@ -1,11 +0,0 @@
-import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
-export interface ItemDetailScreenProps {
-    sourceLabel: string;
-    item: StateSnapshotPreviewItem;
-    /** "old → new" side labels, e.g. "CURRENT STATE" / snapshot name. */
-    leftLabel: string;
-    rightLabel: string;
-    onBack: () => void;
-}
-export declare function ItemDetailScreen({ sourceLabel, item, leftLabel, rightLabel, onBack, }: ItemDetailScreenProps): import("react").JSX.Element;
-//# sourceMappingURL=ItemDetailScreen.d.ts.map

package/lib/typescript/components/preview/ItemDetailScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemDetailScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/preview/ItemDetailScreen.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAgBnE,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,wBAAwB,CAAC;IAC/B,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,SAAS,EACT,UAAU,EACV,MAAM,GACP,EAAE,qBAAqB,+BA+FvB"}

package/src/components/preview/ItemDetailScreen.tsx

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