@buoy-gg/images 7.0.28 → 7.0.30

package/src/components/ImageDetail.tsx

@@ -1,466 +0,0 @@
-/**
- * ImageDetail — full record view: preview, source, load timeline, dimensions
- * with the oversize verdict + estimated decoded/wasted memory, cache verdict,
- * and error details (including HTTP status/headers when the platform provides
- * them). Cache actions live here too (expo-image global clears).
- */
-
-import { useState, type ReactNode } from "react";
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { macOSColors, night } from "@buoy-gg/shared-ui";
-import { clearOverride, setOverride } from "../capture/overrides";
-import { proveSavings } from "../capture/savings";
-import type { SavingsResult } from "../capture/savings";
-import { remoteImagesDispatch } from "../remote";
-import {
-  effectivePixelRatio,
-  estDecodedBytes,
-  estWastedBytes,
-  neededPixels,
-} from "../store/imageEventStore";
-import { cacheBadge, formatBytes, formatMs, sizeVerdict } from "../format";
-import type { ImageRecord } from "../types";
-
-interface ImageDetailProps {
-  record: ImageRecord;
-}
-
-function Section({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>{title}</Text>
-      <View style={styles.sectionBody}>{children}</View>
-    </View>
-  );
-}
-
-function Row({ label, value, color }: { label: string; value: string; color?: string }) {
-  return (
-    <View style={styles.kvRow}>
-      <Text style={styles.kvLabel}>{label}</Text>
-      <Text style={[styles.kvValue, color ? { color } : null]} selectable>
-        {value}
-      </Text>
-    </View>
-  );
-}
-
-/** expo-image global cache clears (no-ops if expo-image is absent). */
-function clearExpoCache(kind: "memory" | "disk"): void {
-  // Mirror mode: the caches live on the synced device.
-  const remote = remoteImagesDispatch();
-  if (remote) {
-    void remote("clearExpoCaches", {
-      memory: kind === "memory",
-      disk: kind === "disk",
-    });
-    return;
-  }
-  try {
-    const expo = require("expo-image");
-    if (kind === "memory") void expo.Image.clearMemoryCache();
-    else void expo.Image.clearDiskCache();
-  } catch {
-    // expo-image not installed
-  }
-}
-
-/** Free-text source swap: test another URL/format/CDN param on the live view. */
-function SwapUrlSection({ record }: { record: ImageRecord }) {
-  const [url, setUrl] = useState(record.uri);
-  const trimmed = url.trim();
-  const canApply = record.mounted && trimmed.length > 0 && trimmed !== record.uri;
-
-  return (
-    <Section title="SWAP SOURCE URL">
-      <TextInput
-        style={styles.urlInput}
-        value={url}
-        onChangeText={setUrl}
-        placeholder="https://…"
-        placeholderTextColor={night.color.placeholder}
-        autoCapitalize="none"
-        autoCorrect={false}
-        multiline
-      />
-      <View style={styles.actionsRow}>
-        <TouchableOpacity
-          style={[styles.actionButton, !canApply && styles.actionDisabled]}
-          disabled={!canApply}
-          onPress={() =>
-            setOverride(record.id, {
-              source: { type: "url", uri: trimmed },
-              label: "URL swapped",
-            })
-          }
-        >
-          <Text style={styles.actionText}>Apply</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.actionButton}
-          onPress={() => setUrl(record.uri)}
-        >
-          <Text style={styles.actionText}>Reset field</Text>
-        </TouchableOpacity>
-      </View>
-    </Section>
-  );
-}
-
-/**
- * Real, on-device savings proof: re-encode at displayed size as WebP via
- * expo-image-manipulator, report actual bytes, offer an in-place preview.
- */
-function SavingsSection({ record }: { record: ImageRecord }) {
-  const [busy, setBusy] = useState(false);
-  const [result, setResult] = useState<SavingsResult | null>(null);
-
-  const run = () => {
-    setBusy(true);
-    proveSavings(record)
-      .then(setResult)
-      .catch((error) => setResult({ ok: false, message: String(error?.message ?? error) }))
-      .finally(() => setBusy(false));
-  };
-
-  return (
-    <Section title="PROVE SAVINGS (re-encode on device)">
-      {result == null ? (
-        <View style={styles.actionsRow}>
-          <TouchableOpacity style={styles.actionButton} onPress={run} disabled={busy}>
-            <Text style={styles.actionText}>
-              {busy ? "Re-encoding…" : "Re-encode at displayed size (WebP)"}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      ) : (
-        <>
-          <Row
-            label="Result"
-            value={result.message || (result.ok ? "done" : "failed")}
-            color={result.ok ? macOSColors.semantic.success : macOSColors.semantic.error}
-          />
-          {result.originalBytes != null ? (
-            <Row
-              label="Original"
-              value={`${formatBytes(result.originalBytes)} (${result.originalBytesSource})`}
-            />
-          ) : null}
-          {result.optimizedBytes != null ? (
-            <Row
-              label="Optimized"
-              value={`${formatBytes(result.optimizedBytes)} — ${result.optimizedDims?.width}×${result.optimizedDims?.height} WebP`}
-              color={macOSColors.semantic.success}
-            />
-          ) : null}
-          {result.savedBytes != null ? (
-            <Row
-              label="Saved"
-              value={`${formatBytes(result.savedBytes)} (${result.savedPct}%)`}
-              color={macOSColors.semantic.success}
-            />
-          ) : null}
-          <View style={styles.actionsRow}>
-            {result.ok && result.optimizedUri && record.mounted ? (
-              <TouchableOpacity
-                style={styles.actionButton}
-                onPress={() =>
-                  setOverride(record.id, {
-                    source: { type: "url", uri: result.optimizedUri! },
-                    label: "Optimized preview",
-                  })
-                }
-              >
-                <Text style={styles.actionText}>Preview in place</Text>
-              </TouchableOpacity>
-            ) : null}
-            <TouchableOpacity style={styles.actionButton} onPress={run} disabled={busy}>
-              <Text style={styles.actionText}>{busy ? "Re-encoding…" : "Re-run"}</Text>
-            </TouchableOpacity>
-          </View>
-        </>
-      )}
-    </Section>
-  );
-}
-
-export function ImageDetail({ record }: ImageDetailProps) {
-  const verdict = sizeVerdict(record);
-  const cache = cacheBadge(record);
-  const needed = neededPixels(record);
-  const decoded = estDecodedBytes(record);
-  const wasted = estWastedBytes(record);
-
-  return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-      {record.overrideLabel ? (
-        <View style={styles.overrideBanner}>
-          <Text style={styles.overrideText}>
-            Simulation active: {record.overrideLabel} — stats below describe the
-            override, not the original source.
-          </Text>
-          <TouchableOpacity onPress={() => clearOverride(record.id)}>
-            <Text style={styles.overrideRestore}>RESTORE</Text>
-          </TouchableOpacity>
-        </View>
-      ) : null}
-
-      {record.uri && record.sourceKind !== "data" ? (
-        <View style={styles.previewBox}>
-          <Image
-            testID="buoy-internal-images-preview"
-            source={{ uri: record.uri }}
-            style={styles.preview}
-            resizeMode="contain"
-          />
-        </View>
-      ) : null}
-
-      <Section title="SOURCE">
-        <Row label="URI" value={record.uri || "(none)"} />
-        <Row label="Kind" value={record.sourceKind} />
-        <Row label="Library" value={record.lib === "expo" ? "expo-image" : "RN <Image>"} />
-        {record.hasAltText === false ? (
-          <Row
-            label="Alt text"
-            value="missing — add alt/accessibilityLabel"
-            color={macOSColors.semantic.warning}
-          />
-        ) : null}
-        {record.mediaType != null ? <Row label="Media type" value={String(record.mediaType)} /> : null}
-        {record.isAnimated != null ? (
-          <Row label="Animated" value={record.isAnimated ? "yes" : "no"} />
-        ) : null}
-      </Section>
-
-      <Section title="LOAD">
-        <Row
-          label="Status"
-          value={record.status}
-          color={
-            record.status === "error"
-              ? macOSColors.semantic.error
-              : record.status === "loaded"
-                ? macOSColors.semantic.success
-                : macOSColors.semantic.warning
-          }
-        />
-        <Row label="Duration" value={formatMs(record.durationMs)} />
-        {record.displayedAt && record.loadedAt ? (
-          <Row
-            label="Decode → display"
-            value={formatMs(Math.max(0, record.displayedAt - record.loadedAt))}
-          />
-        ) : null}
-        <Row label="Cache" value={`${cache.label}`} color={cache.color} />
-        {record.cacheVerdictSource ? (
-          <Row
-            label="Cache source"
-            value={
-              record.cacheVerdictSource === "event"
-                ? "reported by expo-image onLoad"
-                : "Image.queryCache after load"
-            }
-          />
-        ) : null}
-        {record.progressSeen ? (
-          <Row
-            label="Downloaded"
-            value={
-              record.bytesTotal
-                ? `${formatBytes(record.bytesLoaded ?? 0)} / ${formatBytes(record.bytesTotal)}`
-                : "network transfer observed"
-            }
-          />
-        ) : null}
-        <Row label="Load cycles" value={String(record.loadCount)} />
-        <Row label="Still mounted" value={record.mounted ? "yes" : "no"} />
-      </Section>
-
-      <Section title="DIMENSIONS">
-        {record.intrinsic ? (
-          <Row
-            label="Decoded"
-            value={`${record.intrinsic.width}×${record.intrinsic.height} px`}
-          />
-        ) : (
-          <Row label="Decoded" value="unknown" />
-        )}
-        {record.layout ? (
-          <Row
-            label="Displayed"
-            value={`${Math.round(record.layout.width)}×${Math.round(record.layout.height)} dp (needs ${
-              needed ? `${needed.width}×${needed.height}` : "?"
-            } px @${Math.round(effectivePixelRatio() * 100) / 100}x)`}
-          />
-        ) : (
-          <Row label="Displayed" value="no layout yet" />
-        )}
-        {verdict.label ? <Row label="Verdict" value={verdict.label} color={verdict.color} /> : null}
-        {decoded > 0 ? <Row label="Est. decoded memory" value={formatBytes(decoded)} /> : null}
-        {wasted > 0 ? (
-          <Row
-            label="Est. wasted"
-            value={`${formatBytes(wasted)} — resize the source to ${
-              needed ? `${needed.width}×${needed.height}` : "the displayed size"
-            }`}
-            color={macOSColors.semantic.warning}
-          />
-        ) : null}
-        {(record.layoutShifts ?? 0) > 0 ? (
-          <Row
-            label="Layout shifts"
-            value={`${record.layoutShifts} — box resized after load; reserve explicit width/height`}
-            color={macOSColors.semantic.warning}
-          />
-        ) : null}
-      </Section>
-
-      {record.sourceKind === "network" || record.sourceKind === "asset" ? (
-        <SavingsSection key={`savings-${record.id}`} record={record} />
-      ) : null}
-
-      {record.status === "error" ? (
-        <Section title="ERROR">
-          <Row label="Message" value={record.error ?? "unknown"} color={macOSColors.semantic.error} />
-          {record.errorCode != null ? <Row label="HTTP status" value={String(record.errorCode)} /> : null}
-          {record.errorHeaders
-            ? Object.entries(record.errorHeaders).map(([k, v]) => (
-                <Row key={k} label={k} value={String(v)} />
-              ))
-            : null}
-        </Section>
-      ) : null}
-
-      {record.sourceKind === "network" && record.mounted ? (
-        <SwapUrlSection key={record.id} record={record} />
-      ) : null}
-
-      {record.lib === "expo" ? (
-        <Section title="CACHE ACTIONS (expo-image, global)">
-          <View style={styles.actionsRow}>
-            <TouchableOpacity style={styles.actionButton} onPress={() => clearExpoCache("memory")}>
-              <Text style={styles.actionText}>Clear memory cache</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.actionButton} onPress={() => clearExpoCache("disk")}>
-              <Text style={styles.actionText}>Clear disk cache</Text>
-            </TouchableOpacity>
-          </View>
-        </Section>
-      ) : null}
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 12,
-    gap: 12,
-  },
-  previewBox: {
-    height: 140,
-    borderRadius: 8,
-    backgroundColor: night.color.bg,
-    overflow: "hidden",
-  },
-  preview: {
-    width: "100%",
-    height: "100%",
-  },
-  section: {
-    gap: 6,
-  },
-  sectionTitle: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.8,
-  },
-  sectionBody: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-  },
-  kvRow: {
-    flexDirection: "row",
-    paddingVertical: 5,
-    gap: 12,
-  },
-  kvLabel: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    width: 110,
-  },
-  kvValue: {
-    color: night.color.text,
-    fontSize: 11,
-    flex: 1,
-  },
-  actionsRow: {
-    flexDirection: "row",
-    gap: 8,
-    paddingVertical: 8,
-  },
-  actionButton: {
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-  },
-  actionText: {
-    color: night.color.text,
-    fontSize: 11,
-    fontWeight: "600",
-  },
-  actionDisabled: {
-    opacity: 0.4,
-  },
-  urlInput: {
-    color: night.color.text,
-    fontSize: 11,
-    fontFamily: "monospace",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginTop: 8,
-  },
-  overrideBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    padding: 10,
-    borderRadius: 8,
-    backgroundColor: night.color.warningSoft,
-  },
-  overrideText: {
-    flex: 1,
-    color: night.color.warning,
-    fontSize: 11,
-    lineHeight: 15,
-  },
-  overrideRestore: {
-    color: night.color.warning,
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-});