@buoy-gg/images 7.0.28 → 7.0.30

package/src/components/ImageDetailFooter.tsx

@@ -1,271 +0,0 @@
-/**
- * ImageDetailFooter — bottom navbar for the detail view: previous/next
- * stepping through the captured list at the edges, per-image actions in the
- * middle (hard reload / retry), with inline action feedback. Styling matches
- * shared-ui's EventStepperFooter so it reads like the rest of Buoy.
- *
- * Mount with key={record.id} so action feedback resets when stepping.
- */
-
-import { useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import {
-  ChevronLeft,
-  ChevronRight,
-  RefreshCw,
-  night,
-  useSafeAreaInsets,
-} from "@buoy-gg/shared-ui";
-import { hardReloadRecord, retryRecord } from "../capture/actions";
-import type { ActionResult } from "../capture/actions";
-import { clearOverride, flashRecord, setOverride } from "../capture/overrides";
-import type { ImageRecord } from "../types";
-
-interface ImageDetailFooterProps {
-  record: ImageRecord;
-  hasPrevious: boolean;
-  hasNext: boolean;
-  onPrevious: () => void;
-  onNext: () => void;
-}
-
-export function ImageDetailFooter({
-  record,
-  hasPrevious,
-  hasNext,
-  onPrevious,
-  onNext,
-}: ImageDetailFooterProps) {
-  const insets = useSafeAreaInsets();
-  const [message, setMessage] = useState<string | null>(null);
-
-  const runAction = (action: () => Promise<ActionResult>) => {
-    setMessage("…");
-    action()
-      .then((result) => setMessage(result.message))
-      .catch((error) => setMessage(String(error?.message ?? error)));
-  };
-
-  const actionsDisabled = !record.mounted;
-  const overrideActive = record.overrideLabel != null;
-
-  const simulate = (
-    source: { type: "error" } | { type: "hang" } | { type: "blank" },
-    label: string
-  ) => {
-    setOverride(record.id, { source, label });
-    setMessage(`${label} — Restore to undo`);
-  };
-
-  return (
-    <View style={[styles.footer, { paddingBottom: 12 + insets.bottom }]}>
-      {message ? (
-        <Text style={styles.message} numberOfLines={1}>
-          {message}
-        </Text>
-      ) : actionsDisabled ? (
-        <Text style={styles.hint} numberOfLines={1}>
-          Instance unmounted — reload actions need the image on screen.
-        </Text>
-      ) : null}
-
-      <View style={styles.row}>
-        <TouchableOpacity
-          onPress={onPrevious}
-          disabled={!hasPrevious}
-          style={[styles.navButton, !hasPrevious && styles.disabled]}
-          activeOpacity={0.7}
-          accessibilityLabel="Previous image"
-        >
-          <ChevronLeft
-            size={20}
-            color={hasPrevious ? night.color.accent : night.color.textTertiary}
-          />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => runAction(() => hardReloadRecord(record))}
-          disabled={actionsDisabled}
-          style={[styles.actionButton, actionsDisabled && styles.disabled]}
-          activeOpacity={0.7}
-        >
-          <RefreshCw
-            size={13}
-            color={actionsDisabled ? night.color.textTertiary : night.color.info}
-          />
-          <Text style={[styles.actionText, actionsDisabled && styles.actionTextDisabled]}>
-            Hard reload
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => runAction(() => retryRecord(record))}
-          disabled={actionsDisabled}
-          style={[styles.actionButton, actionsDisabled && styles.disabled]}
-          activeOpacity={0.7}
-        >
-          <Text style={[styles.actionText, actionsDisabled && styles.actionTextDisabled]}>
-            {record.status === "error" ? "Retry" : "Reload"}
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={onNext}
-          disabled={!hasNext}
-          style={[styles.navButton, !hasNext && styles.disabled]}
-          activeOpacity={0.7}
-          accessibilityLabel="Next image"
-        >
-          <ChevronRight
-            size={20}
-            color={hasNext ? night.color.accent : night.color.textTertiary}
-          />
-        </TouchableOpacity>
-      </View>
-
-      <View style={styles.row}>
-        <SimButton
-          label="Error"
-          disabled={actionsDisabled}
-          onPress={() => simulate({ type: "error" }, "Forced error")}
-        />
-        <SimButton
-          label="Loading"
-          disabled={actionsDisabled}
-          onPress={() => simulate({ type: "hang" }, "Forced loading")}
-        />
-        <SimButton
-          label="Blank"
-          disabled={actionsDisabled}
-          onPress={() => simulate({ type: "blank" }, "Blanked")}
-        />
-        <SimButton
-          label="Find"
-          disabled={actionsDisabled}
-          onPress={() => {
-            flashRecord(record.id);
-            setMessage("Flashing a red border on the image (2.5s)");
-          }}
-        />
-        <SimButton
-          label="Restore"
-          accent
-          disabled={!overrideActive}
-          onPress={() => {
-            clearOverride(record.id);
-            setMessage("Override removed — original source restored");
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-function SimButton({
-  label,
-  onPress,
-  disabled,
-  accent,
-}: {
-  label: string;
-  onPress: () => void;
-  disabled?: boolean;
-  accent?: boolean;
-}) {
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      disabled={disabled}
-      style={[styles.simButton, disabled && styles.disabled]}
-      activeOpacity={0.7}
-    >
-      <Text
-        style={[
-          styles.simText,
-          accent && !disabled && styles.simTextAccent,
-          disabled && styles.actionTextDisabled,
-        ]}
-      >
-        {label}
-      </Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  footer: {
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    // Dark glass over the star field — matches EventStepperFooter's night bar.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    gap: 8,
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  navButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  actionButton: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-  },
-  actionText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.text,
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-  },
-  actionTextDisabled: {
-    color: night.color.textTertiary,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-  simButton: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 7,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-  },
-  simText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-  },
-  simTextAccent: {
-    color: night.color.warning,
-  },
-  message: {
-    color: night.color.info,
-    fontSize: 10,
-    fontFamily: "monospace",
-  },
-  hint: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-  },
-});

package/src/components/ImageRow.tsx

@@ -1,148 +0,0 @@
-/**
- * ImageRow — one captured image in the list: thumbnail, filename, library +
- * cache badges, load time, and the size verdict.
- *
- * Thumbnails carry the buoy-internal testID so the capture layer skips them —
- * the tool must never appear in its own registry.
- */
-
-import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, night } from "@buoy-gg/shared-ui";
-import { cacheBadge, formatMs, sizeVerdict, statusColor, uriTail } from "../format";
-import type { ImageRecord } from "../types";
-
-interface ImageRowProps {
-  record: ImageRecord;
-  onPress: (id: number) => void;
-}
-
-export function ImageRow({ record, onPress }: ImageRowProps) {
-  const verdict = sizeVerdict(record);
-  const cache = cacheBadge(record);
-  const showThumb =
-    record.sourceKind === "network" ||
-    record.sourceKind === "asset" ||
-    record.sourceKind === "file";
-
-  return (
-    <TouchableOpacity
-      style={styles.row}
-      testID={`buoy-image-row-${record.id}`}
-      onPress={() => onPress(record.id)}
-    >
-      <View style={styles.thumbBox}>
-        {showThumb && record.uri ? (
-          <Image
-            testID="buoy-internal-images-thumb"
-            source={{ uri: record.uri }}
-            style={styles.thumb}
-            resizeMode="cover"
-          />
-        ) : (
-          <Text style={styles.thumbFallback}>?</Text>
-        )}
-        <View style={[styles.statusDot, { backgroundColor: statusColor(record) }]} />
-      </View>
-
-      <View style={styles.main}>
-        <Text style={styles.name} numberOfLines={1}>
-          {uriTail(record.uri)}
-        </Text>
-        <View style={styles.metaRow}>
-          <Text style={[styles.badge, { color: night.color.textTertiary }]}>
-            {record.lib === "expo" ? "EXPO" : "RN"}
-          </Text>
-          <Text style={[styles.badge, { color: cache.color }]}>{cache.label}</Text>
-          {record.overrideLabel ? (
-            <Text style={[styles.badge, { color: night.color.warning }]}>SIM</Text>
-          ) : null}
-          <Text style={styles.meta}>{formatMs(record.durationMs)}</Text>
-          {record.intrinsic ? (
-            <Text style={styles.meta}>
-              {record.intrinsic.width}×{record.intrinsic.height}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-
-      <View style={styles.right}>
-        {record.status === "error" ? (
-          <Text style={[styles.verdict, { color: macOSColors.semantic.error }]}>FAILED</Text>
-        ) : verdict.label ? (
-          <Text style={[styles.verdict, { color: verdict.color }]}>{verdict.label}</Text>
-        ) : null}
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.border,
-    gap: 10,
-  },
-  thumbBox: {
-    width: 40,
-    height: 40,
-    borderRadius: 6,
-    backgroundColor: night.color.bg,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-  },
-  thumb: {
-    width: 40,
-    height: 40,
-  },
-  thumbFallback: {
-    color: night.color.textTertiary,
-    fontSize: 16,
-    fontWeight: "700",
-  },
-  statusDot: {
-    position: "absolute",
-    right: 2,
-    bottom: 2,
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: night.color.bg,
-  },
-  main: {
-    flex: 1,
-    gap: 2,
-  },
-  name: {
-    color: night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-  },
-  metaRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  badge: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-  meta: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-  right: {
-    alignItems: "flex-end",
-  },
-  verdict: {
-    fontSize: 10,
-    fontWeight: "700",
-  },
-});

package/src/components/ImagesHeader.tsx

@@ -1,77 +0,0 @@
-/**
- * ImagesHeader — shared ModalHeader wiring for the Images tool, matching the
- * Console/Network header pattern. List mode shows aggregate stats, the shared
- * ToolbarCopyButton (full registry report) and the shared ToolbarClearButton;
- * detail mode shows back navigation plus the copy button for that record's
- * report. Copy behavior (Pro gating, hint banner, success/error feedback)
- * comes from shared-ui — identical to every other tool.
- */
-
-import {
-  ModalHeader,
-  ToolbarClearButton,
-  ToolbarCopyButton,
-} from "@buoy-gg/shared-ui";
-import { formatBytes } from "../format";
-import type { ImageStats } from "../types";
-
-interface ImagesHeaderProps {
-  stats: ImageStats;
-  detailOpen: boolean;
-  /** Index of the open record in the list (-1 when unknown). */
-  detailIndex?: number;
-  detailTotal?: number;
-  onCloseDetail: () => void;
-  onClear: () => void;
-  /** Builds the mode-appropriate report (registry or single record). */
-  getReport: () => string;
-  /** App-stack back (from the floating menu's AppHost). */
-  onBack?: () => void;
-}
-
-export function ImagesHeader({
-  stats,
-  detailOpen,
-  detailIndex = -1,
-  detailTotal = 0,
-  onCloseDetail,
-  onClear,
-  getReport,
-  onBack,
-}: ImagesHeaderProps) {
-  if (detailOpen) {
-    const counter =
-      detailIndex >= 0 && detailTotal > 0
-        ? `${detailIndex + 1} of ${detailTotal}`
-        : undefined;
-    return (
-      <ModalHeader>
-        <ModalHeader.Navigation onBack={onCloseDetail} />
-        <ModalHeader.Content title="Image detail" subtitle={counter} />
-        <ModalHeader.Actions>
-          <ToolbarCopyButton value={getReport} />
-        </ModalHeader.Actions>
-      </ModalHeader>
-    );
-  }
-
-  const subtitleParts = [
-    `${stats.total} images`,
-    `${stats.errors} failed`,
-    `≈${formatBytes(stats.estDecodedBytes)} decoded`,
-  ];
-  if (stats.estWastedBytes > 0) {
-    subtitleParts.push(`${formatBytes(stats.estWastedBytes)} wasted`);
-  }
-
-  return (
-    <ModalHeader>
-      {onBack ? <ModalHeader.Navigation onBack={onBack} /> : null}
-      <ModalHeader.Content title="Images" subtitle={subtitleParts.join(" · ")} />
-      <ModalHeader.Actions>
-        <ToolbarCopyButton value={getReport} />
-        <ToolbarClearButton onPress={onClear} />
-      </ModalHeader.Actions>
-    </ModalHeader>
-  );
-}

package/src/components/ImagesIcon.tsx

@@ -1,9 +0,0 @@
-/**
- * ImagesIcon — re-exported from the Buoy Icon Format.
- *
- * The artwork lives in shared/icons/images.json and is generated into
- * @buoy-gg/floating-tools-core, so React Native, the desktop dashboard and
- * Flutter all render the same drawing. Edit the JSON, then `pnpm icons`.
- */
-
-export { ImagesIcon, IMAGES_ICON_COLOR } from "@buoy-gg/shared-ui";

package/src/components/ImagesListFooter.tsx

@@ -1,194 +0,0 @@
-/**
- * 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 { night, 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,
-    // Dark glass over the star field — matches EventStepperFooter's night bar.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    gap: 8,
-  },
-  caption: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.8,
-  },
-  message: {
-    color: night.color.info,
-    fontSize: 10,
-    fontFamily: "monospace",
-  },
-  row: {
-    flexDirection: "row",
-    gap: 6,
-  },
-  button: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-  },
-  buttonText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-  },
-  buttonTextAccent: {
-    color: night.color.warning,
-  },
-  netLabel: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.8,
-    alignSelf: "center",
-    marginRight: 2,
-  },
-  netButton: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 6,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-  },
-  netButtonActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong,
-  },
-  netTextActive: {
-    color: night.color.accent,
-  },
-});