@buoy-gg/images 7.0.3

package/src/components/ImagesListFooter.tsx

@@ -0,0 +1,193 @@
+/**
+ * ImagesListFooter — the list screen's action bar: mass simulations applied
+ * to EVERY mounted image at once (error / loading / blank), mass hard-reload,
+ * flash everything, restore all — plus the global network simulation modes
+ * (Normal / Offline / Cold). Styled to match the detail footer.
+ */
+
+import { useState, useSyncExternalStore } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { hardReloadAllMounted, subscribeActions } from "../capture/actions";
+import {
+  clearAllOverrides,
+  flashAllMounted,
+  getGlobalModes,
+  setNetworkMode,
+  setOverrideForAllMounted,
+} from "../capture/overrides";
+import type { NetworkMode, OverrideSource } from "../capture/overrides";
+
+const NETWORK_MODES: { key: NetworkMode; label: string }[] = [
+  { key: "normal", label: "Normal" },
+  { key: "offline", label: "Offline" },
+  { key: "cold", label: "Cold" },
+];
+
+export function ImagesListFooter() {
+  const insets = useSafeAreaInsets();
+  const [message, setMessage] = useState<string | null>(null);
+  const network = useSyncExternalStore(
+    subscribeActions,
+    () => getGlobalModes().network
+  );
+
+  const massOverride = (source: OverrideSource, label: string) => {
+    const count = setOverrideForAllMounted(source, label);
+    setMessage(count > 0 ? `${label} on ${count} image${count === 1 ? "" : "s"} — Restore all to undo` : "No mounted images");
+  };
+
+  return (
+    <View style={[styles.footer, { paddingBottom: 10 + insets.bottom }]}>
+      {message ? (
+        <Text style={styles.message} numberOfLines={1}>
+          {message}
+        </Text>
+      ) : (
+        <Text style={styles.caption}>MASS ACTIONS — every image on screen</Text>
+      )}
+      <View style={styles.row}>
+        <MassButton label="Error" onPress={() => massOverride({ type: "error" }, "Forced error")} />
+        <MassButton label="Loading" onPress={() => massOverride({ type: "hang" }, "Forced loading")} />
+        <MassButton label="Blank" onPress={() => massOverride({ type: "blank" }, "Blanked")} />
+        <MassButton
+          label="Reload"
+          onPress={() => {
+            setMessage("…");
+            hardReloadAllMounted().then((r) => setMessage(r.message));
+          }}
+        />
+        <MassButton
+          label="Find"
+          onPress={() => {
+            const count = flashAllMounted();
+            setMessage(`Flashing ${count} image${count === 1 ? "" : "s"} (2.5s)`);
+          }}
+        />
+        <MassButton
+          label="Restore"
+          accent
+          onPress={() => {
+            const count = clearAllOverrides();
+            setMessage(count > 0 ? `Restored ${count} image${count === 1 ? "" : "s"}` : "No overrides active");
+          }}
+        />
+      </View>
+
+      <View style={styles.row}>
+        <Text style={styles.netLabel}>NET</Text>
+        {NETWORK_MODES.map((mode) => {
+          const active = network === mode.key;
+          return (
+            <TouchableOpacity
+              key={mode.key}
+              onPress={() => {
+                setNetworkMode(mode.key);
+                // Modes only affect loads that happen AFTER they're set — an
+                // on-screen image keeps its bitmap until something reloads it.
+                setMessage(
+                  mode.key === "normal"
+                    ? "Network simulation off — tap RELOAD to load normally again"
+                    : mode.key === "offline"
+                      ? "Offline: network images FAIL (bundled assets still load) — tap RELOAD to apply to on-screen images"
+                      : "Cold (bypass caches) — tap RELOAD: everything refetches like first launch"
+                );
+              }}
+              style={[styles.netButton, active && styles.netButtonActive]}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.buttonText, active && styles.netTextActive]}>
+                {mode.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function MassButton({
+  label,
+  onPress,
+  accent,
+}: {
+  label: string;
+  onPress: () => void;
+  accent?: boolean;
+}) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.button} activeOpacity={0.7}>
+      <Text style={[styles.buttonText, accent && styles.buttonTextAccent]}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    backgroundColor: macOSColors.background.base,
+    borderTopWidth: 1,
+    borderTopColor: macOSColors.border.default,
+    gap: 8,
+  },
+  caption: {
+    color: macOSColors.text.muted,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+  },
+  message: {
+    color: macOSColors.semantic.info,
+    fontSize: 10,
+    fontFamily: "monospace",
+  },
+  row: {
+    flexDirection: "row",
+    gap: 6,
+  },
+  button: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+  },
+  buttonText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+  },
+  buttonTextAccent: {
+    color: macOSColors.semantic.warning,
+  },
+  netLabel: {
+    color: macOSColors.text.muted,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+    alignSelf: "center",
+    marginRight: 2,
+  },
+  netButton: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 6,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+  },
+  netButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info,
+  },
+  netTextActive: {
+    color: macOSColors.semantic.info,
+  },
+});

package/src/components/ImagesModal.tsx

@@ -0,0 +1,195 @@
+/**
+ * ImagesModal — bottom-sheet wrapper rendered by FloatingDevTools when the
+ * Images tool is opened. List of captured images → tap for detail. Also
+ * surfaces the capture status so a mis-ordered install is self-diagnosing
+ * instead of silently empty.
+ */
+
+import { useState } from "react";
+import { FlatList, StyleSheet, Text, View } from "react-native";
+import { JsModal, macOSColors } from "@buoy-gg/shared-ui";
+import type { ModalState } from "@buoy-gg/shared-ui";
+import { getCaptureStatus, installImageCapture } from "../capture/install";
+import { getGlobalModes } from "../capture/overrides";
+import { formatRecordMarkdown, formatRegistryMarkdown } from "../export";
+import { useImageRecords } from "../hooks/useImageRecords";
+import { clearRecords, getRecord } from "../store/imageEventStore";
+import { ImageDetail } from "./ImageDetail";
+import { ImageDetailFooter } from "./ImageDetailFooter";
+import { ImageRow } from "./ImageRow";
+import { ImagesHeader } from "./ImagesHeader";
+import { ImagesListFooter } from "./ImagesListFooter";
+import { InsightsBar } from "./InsightsBar";
+import { computeInsights } from "../store/insights";
+import type { ImageRecord } from "../types";
+
+interface ImagesModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onBack?: () => void;
+  onMinimize?: (modalState: ModalState) => void;
+  persistenceKey?: string;
+}
+
+function CaptureNotice() {
+  const status = getCaptureStatus();
+  const notices: string[] = [];
+  if (status.rnDecoratorTooLate) {
+    notices.push(
+      'RN <Image> instrumentation missed the module-load race — add `import "@buoy-gg/images/register"` as the FIRST import of your entry file.'
+    );
+  }
+  if (!status.expoAvailable && !status.rnDecoratorActive && !status.rnDecoratorTooLate) {
+    notices.push("Waiting for images… render some <Image> components to populate the list.");
+  }
+  if (notices.length === 0) return null;
+  return (
+    <View style={styles.notice}>
+      {notices.map((n) => (
+        <Text key={n} style={styles.noticeText}>
+          {n}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+function EmptyState() {
+  return (
+    <View style={styles.empty}>
+      <Text style={styles.emptyTitle}>No images captured yet</Text>
+      <Text style={styles.emptyText}>
+        Every RN {"<Image>"} and expo-image load is recorded here with cache
+        verdicts, timings, and oversize checks.
+      </Text>
+    </View>
+  );
+}
+
+export function ImagesModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  persistenceKey,
+}: ImagesModalProps) {
+  // Safety net: ensures capture is live even without the early register
+  // import (expo-image capture is timing-immune, so this still gets most data).
+  installImageCapture();
+
+  const { records, stats } = useImageRecords();
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const selected = selectedId != null ? getRecord(selectedId) : undefined;
+
+  // Stepping is relative to the live list (newest first): previous = newer.
+  const selectedIndex = selected
+    ? records.findIndex((r) => r.id === selected.id)
+    : -1;
+  const stepTo = (index: number) => {
+    const target = records[index];
+    if (target) setSelectedId(target.id);
+  };
+
+  // Mode-appropriate report: single record in detail, full registry (stats +
+  // insights + table) in the list. The shared ToolbarCopyButton resolves this
+  // lazily on press and handles clipboard + feedback + gating.
+  const getReport = () =>
+    selected
+      ? formatRecordMarkdown(selected)
+      : formatRegistryMarkdown(
+          records,
+          stats,
+          computeInsights(records),
+          getCaptureStatus(),
+          getGlobalModes()
+        );
+
+  return (
+    <JsModal
+      visible={visible}
+      onClose={onClose}
+      onMinimize={onMinimize}
+      persistenceKey={persistenceKey}
+      header={{
+        showToggleButton: true,
+        customContent: (
+          <ImagesHeader
+            stats={stats}
+            detailOpen={selected != null}
+            detailIndex={selectedIndex}
+            detailTotal={records.length}
+            onCloseDetail={() => setSelectedId(null)}
+            onClear={clearRecords}
+            getReport={getReport}
+            onBack={onBack}
+          />
+        ),
+      }}
+      enablePersistence
+      initialMode="bottomSheet"
+      disableScrollWrapper
+    >
+      {selected ? (
+        <View style={styles.detailContainer}>
+          <ImageDetail record={selected} />
+          <ImageDetailFooter
+            key={selected.id}
+            record={selected}
+            hasPrevious={selectedIndex > 0}
+            hasNext={selectedIndex >= 0 && selectedIndex < records.length - 1}
+            onPrevious={() => stepTo(selectedIndex - 1)}
+            onNext={() => stepTo(selectedIndex + 1)}
+          />
+        </View>
+      ) : (
+        <View style={styles.listContainer}>
+          <InsightsBar insights={computeInsights(records)} />
+          <CaptureNotice />
+          <FlatList
+            data={records}
+            keyExtractor={(item: ImageRecord) => String(item.id)}
+            renderItem={({ item }) => <ImageRow record={item} onPress={setSelectedId} />}
+            ListEmptyComponent={<EmptyState />}
+          />
+          <ImagesListFooter />
+        </View>
+      )}
+    </JsModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    flex: 1,
+  },
+  detailContainer: {
+    flex: 1,
+  },
+  notice: {
+    margin: 10,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    gap: 4,
+  },
+  noticeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+  },
+  empty: {
+    alignItems: "center",
+    padding: 32,
+    gap: 8,
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  emptyText: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    textAlign: "center",
+    lineHeight: 16,
+  },
+});

package/src/components/ImagesRoot.tsx

@@ -0,0 +1,18 @@
+/**
+ * Mount once near the app root to start image capture immediately.
+ *
+ * NOTE: for full RN-core <Image> coverage prefer the side-effect import
+ * `import "@buoy-gg/images/register"` as the first import of your entry file —
+ * the RN decorator must be installed before React Native's Image module first
+ * evaluates. ImagesRoot alone still captures every expo-image instance
+ * (timing-immune) and reports whether the RN hook landed.
+ */
+
+import { installImageCapture } from "../capture/install";
+
+export function ImagesRoot(): null {
+  // Synchronous on first render — earlier than an effect, though still later
+  // than the register import. Idempotent.
+  installImageCapture();
+  return null;
+}

package/src/components/InsightsBar.tsx

@@ -0,0 +1,51 @@
+/**
+ * InsightsBar — compact warning chips above the list when cross-record
+ * findings exist (duplicates, retry storms, queue saturation, missing alt,
+ * layout shifts). Renders nothing when all clear.
+ *
+ * A wrapping row (not a horizontal ScrollView — that under-measures its
+ * height inside the modal's flex column and clips the chips).
+ */
+
+import { StyleSheet, Text, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { insightChips } from "../store/insights";
+import type { ImageInsights } from "../types";
+
+export function InsightsBar({ insights }: { insights: ImageInsights }) {
+  const chips = insightChips(insights);
+  if (chips.length === 0) return null;
+  return (
+    <View style={styles.bar}>
+      {chips.map((chip) => (
+        <View key={chip} style={styles.chip}>
+          <Text style={styles.chipText}>{chip}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: macOSColors.border.default,
+  },
+  chip: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  chipText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "600",
+    lineHeight: 13,
+  },
+});

package/src/export.ts

@@ -0,0 +1,100 @@
+/**
+ * Copy-friendly markdown reports — paste-ready context for an issue, PR, or
+ * an AI chat. One for the whole registry (list header copy) and one for a
+ * single record (detail header copy).
+ */
+
+import { PixelRatio } from "react-native";
+import {
+  estDecodedBytes,
+  estWastedBytes,
+  neededPixels,
+} from "./store/imageEventStore";
+import { insightChips } from "./store/insights";
+import { cacheBadge, formatBytes, formatMs, sizeVerdict, uriTail } from "./format";
+import type { CaptureStatus, ImageInsights, ImageRecord, ImageStats } from "./types";
+
+export function formatRecordMarkdown(record: ImageRecord): string {
+  const verdict = sizeVerdict(record);
+  const cache = cacheBadge(record);
+  const needed = neededPixels(record);
+  const decoded = estDecodedBytes(record);
+  const wasted = estWastedBytes(record);
+
+  const lines: string[] = [];
+  lines.push(`## Image report — ${uriTail(record.uri)}`);
+  lines.push("");
+  lines.push(`- URI: ${record.uri || "(none)"}`);
+  lines.push(`- Library: ${record.lib === "expo" ? "expo-image" : "RN <Image>"} · kind: ${record.sourceKind} · mounted: ${record.mounted ? "yes" : "no"}`);
+  lines.push(`- Status: ${record.status}${record.errorCode ? ` (HTTP ${record.errorCode})` : ""} · load cycles: ${record.loadCount}`);
+  lines.push(`- Cache: ${cache.label}${record.cacheVerdictSource ? ` (via ${record.cacheVerdictSource === "event" ? "expo onLoad" : "Image.queryCache"})` : ""}`);
+  lines.push(`- Load time: ${formatMs(record.durationMs)}${record.displayedAt && record.loadedAt ? ` · decode→display ${formatMs(Math.max(0, record.displayedAt - record.loadedAt))}` : ""}`);
+  if (record.intrinsic) {
+    lines.push(`- Decoded: ${record.intrinsic.width}×${record.intrinsic.height}px${record.mediaType ? ` (${record.mediaType})` : ""}${record.isAnimated ? " animated" : ""} ≈ ${formatBytes(decoded)} decoded memory`);
+  }
+  if (record.layout) {
+    lines.push(`- Displayed: ${Math.round(record.layout.width)}×${Math.round(record.layout.height)}dp @${PixelRatio.get()}x (needs ${needed ? `${needed.width}×${needed.height}px` : "?"})`);
+  }
+  if (verdict.label) {
+    lines.push(`- Size verdict: ${verdict.label}${wasted > 0 && needed ? ` — wasting ≈${formatBytes(wasted)}; serve ${needed.width}×${needed.height}` : ""}`);
+  }
+  if (record.progressSeen) {
+    lines.push(`- Network transfer: ${record.bytesTotal ? formatBytes(record.bytesTotal) : "observed"}`);
+  }
+  if (record.hasAltText === false) lines.push(`- Accessibility: MISSING alt/accessibilityLabel`);
+  if ((record.layoutShifts ?? 0) > 0) lines.push(`- Layout shifts after load: ${record.layoutShifts} (reserve explicit dimensions)`);
+  if (record.error) {
+    lines.push(`- Error: ${record.error}`);
+    if (record.errorHeaders) {
+      lines.push(`- Response headers: ${JSON.stringify(record.errorHeaders)}`);
+    }
+  }
+  if (record.overrideLabel) lines.push(`- Simulation active: ${record.overrideLabel}`);
+  return lines.join("\n");
+}
+
+export function formatRegistryMarkdown(
+  records: ImageRecord[],
+  stats: ImageStats,
+  insights: ImageInsights,
+  captureStatus: CaptureStatus,
+  modes: { network: string; blank: boolean }
+): string {
+  const lines: string[] = [];
+  lines.push(`## Buoy Images registry (${stats.total} records)`);
+  lines.push("");
+  lines.push(
+    `${stats.loaded} loaded · ${stats.errors} failed · ${stats.loading} in flight · ≈${formatBytes(stats.estDecodedBytes)} decoded` +
+      (stats.estWastedBytes > 0 ? ` · ${formatBytes(stats.estWastedBytes)} wasted on oversized sources` : "")
+  );
+  const chips = insightChips(insights);
+  if (chips.length > 0) lines.push(`Insights: ${chips.join(" · ")}`);
+  if (modes.network !== "normal" || modes.blank) {
+    lines.push(`Simulation active: network=${modes.network}${modes.blank ? ", blank images" : ""}`);
+  }
+  if (captureStatus.rnDecoratorTooLate) {
+    lines.push(`⚠ RN <Image> capture inactive (register import too late)`);
+  }
+  lines.push("");
+  lines.push("| image | lib | status | cache | ms | decoded px | shown dp | verdict | notes |");
+  lines.push("|---|---|---|---|---|---|---|---|---|");
+  for (const r of records) {
+    const verdict = sizeVerdict(r);
+    const cache = cacheBadge(r);
+    const dims = r.intrinsic ? `${r.intrinsic.width}×${r.intrinsic.height}` : "–";
+    const layout = r.layout ? `${Math.round(r.layout.width)}×${Math.round(r.layout.height)}` : "–";
+    const notes = [
+      r.error ? `error: ${r.error}` : null,
+      r.overrideLabel ? `sim: ${r.overrideLabel}` : null,
+      r.hasAltText === false ? "no alt" : null,
+      (r.layoutShifts ?? 0) > 0 ? `${r.layoutShifts} layout shifts` : null,
+      r.mounted ? null : "unmounted",
+    ]
+      .filter(Boolean)
+      .join("; ");
+    lines.push(
+      `| ${uriTail(r.uri)} | ${r.lib} | ${r.status} | ${cache.label} | ${r.durationMs != null ? Math.round(r.durationMs) : "–"} | ${dims} | ${layout} | ${verdict.label || "–"} | ${notes || "–"} |`
+    );
+  }
+  return lines.join("\n");
+}

package/src/format.ts

@@ -0,0 +1,85 @@
+/**
+ * Formatting + verdict helpers shared by list rows and the detail view.
+ */
+
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { oversizeFactor } from "./store/imageEventStore";
+import type { ImageRecord } from "./types";
+
+export function formatBytes(bytes: number): string {
+  if (bytes <= 0) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function formatMs(ms: number | undefined): string {
+  if (ms == null) return "—";
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+/** Last path segment of a URI, for compact row display. */
+export function uriTail(uri: string): string {
+  if (!uri) return "(no source)";
+  // Metro dev-server asset URLs put the real path in ?unstable_path=…
+  const unstable = uri.match(/[?&]unstable_path=([^&?]+)/);
+  const effective = unstable ? decodeURIComponent(unstable[1]!) : uri;
+  const withoutQuery = effective.split("?")[0] ?? effective;
+  const segments = withoutQuery.split("/").filter(Boolean);
+  return segments[segments.length - 1] ?? effective;
+}
+
+export interface SizeVerdict {
+  label: string;
+  color: string;
+  /** Linear factor (2 = twice as wide/tall as needed). */
+  factor: number | null;
+}
+
+/**
+ * Fresco-style fit verdict: green within 10%, yellow within 50%, red beyond.
+ * Undersized sources (upscaled, likely blurry) get their own callout.
+ */
+export function sizeVerdict(record: ImageRecord): SizeVerdict {
+  const factor = oversizeFactor(record);
+  if (factor == null) return { label: "", color: macOSColors.text.muted, factor };
+  if (factor < 0.9) {
+    return { label: `${factor.toFixed(1)}× upscaled`, color: macOSColors.semantic.info, factor };
+  }
+  if (factor <= 1.1) {
+    return { label: "right-sized", color: macOSColors.semantic.success, factor };
+  }
+  if (factor <= 1.5) {
+    return { label: `${factor.toFixed(1)}× oversized`, color: macOSColors.semantic.warning, factor };
+  }
+  return { label: `${factor.toFixed(1)}× oversized`, color: macOSColors.semantic.error, factor };
+}
+
+export function statusColor(record: ImageRecord): string {
+  switch (record.status) {
+    case "loaded":
+      return macOSColors.semantic.success;
+    case "error":
+      return macOSColors.semantic.error;
+    case "loading":
+      return macOSColors.semantic.warning;
+    default:
+      return macOSColors.text.muted;
+  }
+}
+
+/** Cache verdict badge text + tint (memory=green, disk=yellow, network=red). */
+export function cacheBadge(record: ImageRecord): { label: string; color: string } {
+  const verdict = record.cacheVerdict;
+  if (verdict === "memory" || verdict === "disk/memory") {
+    return { label: verdict.toUpperCase(), color: macOSColors.semantic.success };
+  }
+  if (verdict === "disk") {
+    return { label: "DISK", color: macOSColors.semantic.warning };
+  }
+  if (verdict === "none" || record.progressSeen) {
+    return { label: "NETWORK", color: macOSColors.semantic.error };
+  }
+  return { label: "?", color: macOSColors.text.muted };
+}

package/src/hooks/useImageRecords.ts

@@ -0,0 +1,24 @@
+/**
+ * React bindings for the image event store.
+ */
+
+import { useMemo, useSyncExternalStore } from "react";
+import { computeStats, getSnapshot, subscribe } from "../store/imageEventStore";
+import type { ImageRecord, ImageStats } from "../types";
+
+export interface UseImageRecordsResult {
+  /** Newest first. */
+  records: ImageRecord[];
+  stats: ImageStats;
+}
+
+export function useImageRecords(): UseImageRecordsResult {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return useMemo(
+    () => ({
+      records: [...snapshot].reverse(),
+      stats: computeStats(snapshot),
+    }),
+    [snapshot]
+  );
+}