@buoy-gg/images 7.0.40 → 7.0.42

package/lib/module/components/ImageDetail.js

@@ -1,450 +1 @@
-"use strict";
-
-/**
- * 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 } from "react";
-import { Image, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { macOSColors, night, monoFont } from "@buoy-gg/shared-ui";
-import { clearOverride, setOverride } from "../capture/overrides";
-import { proveSavings } from "../capture/savings";
-import { remoteImagesDispatch } from "../remote";
-import { effectivePixelRatio, estDecodedBytes, estWastedBytes, neededPixels } from "../store/imageEventStore";
-import { cacheBadge, formatBytes, formatMs, sizeVerdict } from "../format";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Section({
-  title,
-  children
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.section,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.sectionTitle,
-      children: title
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.sectionBody,
-      children: children
-    })]
-  });
-}
-function Row({
-  label,
-  value,
-  color
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.kvRow,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.kvLabel,
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.kvValue, color ? {
-        color
-      } : null],
-      selectable: true,
-      children: value
-    })]
-  });
-}
-
-/** expo-image global cache clears (no-ops if expo-image is absent). */
-function clearExpoCache(kind) {
-  // 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
-}) {
-  const [url, setUrl] = useState(record.uri);
-  const trimmed = url.trim();
-  const canApply = record.mounted && trimmed.length > 0 && trimmed !== record.uri;
-  return /*#__PURE__*/_jsxs(Section, {
-    title: "SWAP SOURCE URL",
-    children: [/*#__PURE__*/_jsx(TextInput, {
-      style: styles.urlInput,
-      value: url,
-      onChangeText: setUrl,
-      placeholder: "https://\u2026",
-      placeholderTextColor: night.color.placeholder,
-      autoCapitalize: "none",
-      autoCorrect: false,
-      multiline: true
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.actionsRow,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.actionButton, !canApply && styles.actionDisabled],
-        disabled: !canApply,
-        onPress: () => setOverride(record.id, {
-          source: {
-            type: "url",
-            uri: trimmed
-          },
-          label: "URL swapped"
-        }),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.actionText,
-          children: "Apply"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.actionButton,
-        onPress: () => setUrl(record.uri),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.actionText,
-          children: "Reset field"
-        })
-      })]
-    })]
-  });
-}
-
-/**
- * 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
-}) {
-  const [busy, setBusy] = useState(false);
-  const [result, setResult] = useState(null);
-  const run = () => {
-    setBusy(true);
-    proveSavings(record).then(setResult).catch(error => setResult({
-      ok: false,
-      message: String(error?.message ?? error)
-    })).finally(() => setBusy(false));
-  };
-  return /*#__PURE__*/_jsx(Section, {
-    title: "PROVE SAVINGS (re-encode on device)",
-    children: result == null ? /*#__PURE__*/_jsx(View, {
-      style: styles.actionsRow,
-      children: /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.actionButton,
-        onPress: run,
-        disabled: busy,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.actionText,
-          children: busy ? "Re-encoding…" : "Re-encode at displayed size (WebP)"
-        })
-      })
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Row, {
-        label: "Result",
-        value: result.message || (result.ok ? "done" : "failed"),
-        color: result.ok ? macOSColors.semantic.success : macOSColors.semantic.error
-      }), result.originalBytes != null ? /*#__PURE__*/_jsx(Row, {
-        label: "Original",
-        value: `${formatBytes(result.originalBytes)} (${result.originalBytesSource})`
-      }) : null, result.optimizedBytes != null ? /*#__PURE__*/_jsx(Row, {
-        label: "Optimized",
-        value: `${formatBytes(result.optimizedBytes)} — ${result.optimizedDims?.width}×${result.optimizedDims?.height} WebP`,
-        color: macOSColors.semantic.success
-      }) : null, result.savedBytes != null ? /*#__PURE__*/_jsx(Row, {
-        label: "Saved",
-        value: `${formatBytes(result.savedBytes)} (${result.savedPct}%)`,
-        color: macOSColors.semantic.success
-      }) : null, /*#__PURE__*/_jsxs(View, {
-        style: styles.actionsRow,
-        children: [result.ok && result.optimizedUri && record.mounted ? /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => setOverride(record.id, {
-            source: {
-              type: "url",
-              uri: result.optimizedUri
-            },
-            label: "Optimized preview"
-          }),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionText,
-            children: "Preview in place"
-          })
-        }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: run,
-          disabled: busy,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionText,
-            children: busy ? "Re-encoding…" : "Re-run"
-          })
-        })]
-      })]
-    })
-  });
-}
-export function ImageDetail({
-  record
-}) {
-  const verdict = sizeVerdict(record);
-  const cache = cacheBadge(record);
-  const needed = neededPixels(record);
-  const decoded = estDecodedBytes(record);
-  const wasted = estWastedBytes(record);
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.content,
-    children: [record.overrideLabel ? /*#__PURE__*/_jsxs(View, {
-      style: styles.overrideBanner,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: styles.overrideText,
-        children: ["Simulation active: ", record.overrideLabel, " \u2014 stats below describe the override, not the original source."]
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => clearOverride(record.id),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.overrideRestore,
-          children: "RESTORE"
-        })
-      })]
-    }) : null, record.uri && record.sourceKind !== "data" ? /*#__PURE__*/_jsx(View, {
-      style: styles.previewBox,
-      children: /*#__PURE__*/_jsx(Image, {
-        testID: "buoy-internal-images-preview",
-        source: {
-          uri: record.uri
-        },
-        style: styles.preview,
-        resizeMode: "contain"
-      })
-    }) : null, /*#__PURE__*/_jsxs(Section, {
-      title: "SOURCE",
-      children: [/*#__PURE__*/_jsx(Row, {
-        label: "URI",
-        value: record.uri || "(none)"
-      }), /*#__PURE__*/_jsx(Row, {
-        label: "Kind",
-        value: record.sourceKind
-      }), /*#__PURE__*/_jsx(Row, {
-        label: "Library",
-        value: record.lib === "expo" ? "expo-image" : "RN <Image>"
-      }), record.hasAltText === false ? /*#__PURE__*/_jsx(Row, {
-        label: "Alt text",
-        value: "missing \u2014 add alt/accessibilityLabel",
-        color: macOSColors.semantic.warning
-      }) : null, record.mediaType != null ? /*#__PURE__*/_jsx(Row, {
-        label: "Media type",
-        value: String(record.mediaType)
-      }) : null, record.isAnimated != null ? /*#__PURE__*/_jsx(Row, {
-        label: "Animated",
-        value: record.isAnimated ? "yes" : "no"
-      }) : null]
-    }), /*#__PURE__*/_jsxs(Section, {
-      title: "LOAD",
-      children: [/*#__PURE__*/_jsx(Row, {
-        label: "Status",
-        value: record.status,
-        color: record.status === "error" ? macOSColors.semantic.error : record.status === "loaded" ? macOSColors.semantic.success : macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx(Row, {
-        label: "Duration",
-        value: formatMs(record.durationMs)
-      }), record.displayedAt && record.loadedAt ? /*#__PURE__*/_jsx(Row, {
-        label: "Decode \u2192 display",
-        value: formatMs(Math.max(0, record.displayedAt - record.loadedAt))
-      }) : null, /*#__PURE__*/_jsx(Row, {
-        label: "Cache",
-        value: `${cache.label}`,
-        color: cache.color
-      }), record.cacheVerdictSource ? /*#__PURE__*/_jsx(Row, {
-        label: "Cache source",
-        value: record.cacheVerdictSource === "event" ? "reported by expo-image onLoad" : "Image.queryCache after load"
-      }) : null, record.progressSeen ? /*#__PURE__*/_jsx(Row, {
-        label: "Downloaded",
-        value: record.bytesTotal ? `${formatBytes(record.bytesLoaded ?? 0)} / ${formatBytes(record.bytesTotal)}` : "network transfer observed"
-      }) : null, /*#__PURE__*/_jsx(Row, {
-        label: "Load cycles",
-        value: String(record.loadCount)
-      }), /*#__PURE__*/_jsx(Row, {
-        label: "Still mounted",
-        value: record.mounted ? "yes" : "no"
-      })]
-    }), /*#__PURE__*/_jsxs(Section, {
-      title: "DIMENSIONS",
-      children: [record.intrinsic ? /*#__PURE__*/_jsx(Row, {
-        label: "Decoded",
-        value: `${record.intrinsic.width}×${record.intrinsic.height} px`
-      }) : /*#__PURE__*/_jsx(Row, {
-        label: "Decoded",
-        value: "unknown"
-      }), record.layout ? /*#__PURE__*/_jsx(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)`
-      }) : /*#__PURE__*/_jsx(Row, {
-        label: "Displayed",
-        value: "no layout yet"
-      }), verdict.label ? /*#__PURE__*/_jsx(Row, {
-        label: "Verdict",
-        value: verdict.label,
-        color: verdict.color
-      }) : null, decoded > 0 ? /*#__PURE__*/_jsx(Row, {
-        label: "Est. decoded memory",
-        value: formatBytes(decoded)
-      }) : null, wasted > 0 ? /*#__PURE__*/_jsx(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 ? /*#__PURE__*/_jsx(Row, {
-        label: "Layout shifts",
-        value: `${record.layoutShifts} — box resized after load; reserve explicit width/height`,
-        color: macOSColors.semantic.warning
-      }) : null]
-    }), record.sourceKind === "network" || record.sourceKind === "asset" ? /*#__PURE__*/_jsx(SavingsSection, {
-      record: record
-    }, `savings-${record.id}`) : null, record.status === "error" ? /*#__PURE__*/_jsxs(Section, {
-      title: "ERROR",
-      children: [/*#__PURE__*/_jsx(Row, {
-        label: "Message",
-        value: record.error ?? "unknown",
-        color: macOSColors.semantic.error
-      }), record.errorCode != null ? /*#__PURE__*/_jsx(Row, {
-        label: "HTTP status",
-        value: String(record.errorCode)
-      }) : null, record.errorHeaders ? Object.entries(record.errorHeaders).map(([k, v]) => /*#__PURE__*/_jsx(Row, {
-        label: k,
-        value: String(v)
-      }, k)) : null]
-    }) : null, record.sourceKind === "network" && record.mounted ? /*#__PURE__*/_jsx(SwapUrlSection, {
-      record: record
-    }, record.id) : null, record.lib === "expo" ? /*#__PURE__*/_jsx(Section, {
-      title: "CACHE ACTIONS (expo-image, global)",
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.actionsRow,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => clearExpoCache("memory"),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionText,
-            children: "Clear memory cache"
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => clearExpoCache("disk"),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionText,
-            children: "Clear disk cache"
-          })
-        })]
-      })
-    }) : null]
-  });
-}
-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: monoFont,
-    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
-  }
-});
-//# sourceMappingURL=ImageDetail.js.map
+"use strict";import{loadExpoImage as C}from"../capture/nativeImageModules";import{useState as f}from"react";import{Image as T,ScrollView as B,StyleSheet as v,Text as c,TextInput as z,TouchableOpacity as m,View as u}from"react-native";import{macOSColors as d,night as a,monoFont as $}from"@buoy-gg/shared-ui";import{clearOverride as k,setOverride as x}from"../capture/overrides";import{proveSavings as D}from"../capture/savings";import{remoteImagesDispatch as I}from"../remote";import{effectivePixelRatio as P,estDecodedBytes as A,estWastedBytes as O,neededPixels as E}from"../store/imageEventStore";import{cacheBadge as V,formatBytes as y,formatMs as w,sizeVerdict as L}from"../format";import{jsx as l,jsxs as r,Fragment as W}from"react/jsx-runtime";function p({title:e,children:n}){return r(u,{style:t.section,children:[l(c,{style:t.sectionTitle,children:e}),l(u,{style:t.sectionBody,children:n})]})}function i({label:e,value:n,color:s}){return r(u,{style:t.kvRow,children:[l(c,{style:t.kvLabel,children:e}),l(c,{style:[t.kvValue,s?{color:s}:null],selectable:true,children:n})]})}function S(e){const n=I();if(n){void n("clearExpoCaches",{memory:e==="memory",disk:e==="disk"});return}try{const s=C();if(e==="memory")void s.Image.clearMemoryCache();else void s.Image.clearDiskCache()}catch{}}function M({record:e}){const[n,s]=f(e.uri);const o=n.trim();const h=e.mounted&&o.length>0&&o!==e.uri;return r(p,{title:"SWAP SOURCE URL",children:[l(z,{style:t.urlInput,value:n,onChangeText:s,placeholder:"https://\u2026",placeholderTextColor:a.color.placeholder,autoCapitalize:"none",autoCorrect:false,multiline:true}),r(u,{style:t.actionsRow,children:[l(m,{style:[t.actionButton,!h&&t.actionDisabled],disabled:!h,onPress:()=>x(e.id,{source:{type:"url",uri:o},label:"URL swapped"}),children:l(c,{style:t.actionText,children:"Apply"})}),l(m,{style:t.actionButton,onPress:()=>s(e.uri),children:l(c,{style:t.actionText,children:"Reset field"})})]})]})}function U({record:e}){const[n,s]=f(false);const[o,h]=f(null);const b=()=>{s(true);D(e).then(h).catch(g=>h({ok:false,message:String(g?.message??g)})).finally(()=>s(false))};return l(p,{title:"PROVE SAVINGS (re-encode on device)",children:o==null?l(u,{style:t.actionsRow,children:l(m,{style:t.actionButton,onPress:b,disabled:n,children:l(c,{style:t.actionText,children:n?"Re-encoding\u2026":"Re-encode at displayed size (WebP)"})})}):r(W,{children:[l(i,{label:"Result",value:o.message||(o.ok?"done":"failed"),color:o.ok?d.semantic.success:d.semantic.error}),o.originalBytes!=null?l(i,{label:"Original",value:`${y(o.originalBytes)} (${o.originalBytesSource})`}):null,o.optimizedBytes!=null?l(i,{label:"Optimized",value:`${y(o.optimizedBytes)} \u2014 ${o.optimizedDims?.width}\xD7${o.optimizedDims?.height} WebP`,color:d.semantic.success}):null,o.savedBytes!=null?l(i,{label:"Saved",value:`${y(o.savedBytes)} (${o.savedPct}%)`,color:d.semantic.success}):null,r(u,{style:t.actionsRow,children:[o.ok&&o.optimizedUri&&e.mounted?l(m,{style:t.actionButton,onPress:()=>x(e.id,{source:{type:"url",uri:o.optimizedUri},label:"Optimized preview"}),children:l(c,{style:t.actionText,children:"Preview in place"})}):null,l(m,{style:t.actionButton,onPress:b,disabled:n,children:l(c,{style:t.actionText,children:n?"Re-encoding\u2026":"Re-run"})})]})]})})}export function ImageDetail({record:e}){const n=L(e);const s=V(e);const o=E(e);const h=A(e);const b=O(e);return r(B,{style:t.container,contentContainerStyle:t.content,children:[e.overrideLabel?r(u,{style:t.overrideBanner,children:[r(c,{style:t.overrideText,children:["Simulation active: ",e.overrideLabel," \u2014 stats below describe the override, not the original source."]}),l(m,{onPress:()=>k(e.id),children:l(c,{style:t.overrideRestore,children:"RESTORE"})})]}):null,e.uri&&e.sourceKind!=="data"?l(u,{style:t.previewBox,children:l(T,{testID:"buoy-internal-images-preview",source:{uri:e.uri},style:t.preview,resizeMode:"contain"})}):null,r(p,{title:"SOURCE",children:[l(i,{label:"URI",value:e.uri||"(none)"}),l(i,{label:"Kind",value:e.sourceKind}),l(i,{label:"Library",value:e.lib==="web"?"Browser <img>":e.lib==="expo"?"expo-image":"RN <Image>"}),e.hasAltText===false?l(i,{label:"Alt text",value:"missing \u2014 add alt/accessibilityLabel",color:d.semantic.warning}):null,e.mediaType!=null?l(i,{label:"Media type",value:String(e.mediaType)}):null,e.isAnimated!=null?l(i,{label:"Animated",value:e.isAnimated?"yes":"no"}):null]}),r(p,{title:"LOAD",children:[l(i,{label:"Status",value:e.status,color:e.status==="error"?d.semantic.error:e.status==="loaded"?d.semantic.success:d.semantic.warning}),l(i,{label:"Duration",value:w(e.durationMs)}),e.displayedAt&&e.loadedAt?l(i,{label:"Decode \u2192 display",value:w(Math.max(0,e.displayedAt-e.loadedAt))}):null,l(i,{label:"Cache",value:`${s.label}`,color:s.color}),e.cacheVerdictSource?l(i,{label:"Cache source",value:e.cacheVerdictSource==="event"?"reported by expo-image onLoad":"Image.queryCache after load"}):null,e.progressSeen?l(i,{label:"Downloaded",value:e.bytesTotal?`${y(e.bytesLoaded??0)} / ${y(e.bytesTotal)}`:"network transfer observed"}):null,l(i,{label:"Load cycles",value:String(e.loadCount)}),l(i,{label:"Still mounted",value:e.mounted?"yes":"no"})]}),r(p,{title:"DIMENSIONS",children:[e.intrinsic?l(i,{label:"Decoded",value:`${e.intrinsic.width}\xD7${e.intrinsic.height} px`}):l(i,{label:"Decoded",value:"unknown"}),e.layout?l(i,{label:"Displayed",value:`${Math.round(e.layout.width)}\xD7${Math.round(e.layout.height)} dp (needs ${o?`${o.width}\xD7${o.height}`:"?"} px @${Math.round(P()*100)/100}x)`}):l(i,{label:"Displayed",value:"no layout yet"}),n.label?l(i,{label:"Verdict",value:n.label,color:n.color}):null,h>0?l(i,{label:"Est. decoded memory",value:y(h)}):null,b>0?l(i,{label:"Est. wasted",value:`${y(b)} \u2014 resize the source to ${o?`${o.width}\xD7${o.height}`:"the displayed size"}`,color:d.semantic.warning}):null,(e.layoutShifts??0)>0?l(i,{label:"Layout shifts",value:`${e.layoutShifts} \u2014 box resized after load; reserve explicit width/height`,color:d.semantic.warning}):null]}),e.sourceKind==="network"||e.sourceKind==="asset"?l(U,{record:e},`savings-${e.id}`):null,e.status==="error"?r(p,{title:"ERROR",children:[l(i,{label:"Message",value:e.error??"unknown",color:d.semantic.error}),e.errorCode!=null?l(i,{label:"HTTP status",value:String(e.errorCode)}):null,e.errorHeaders?Object.entries(e.errorHeaders).map(([g,R])=>l(i,{label:g,value:String(R)},g)):null]}):null,e.sourceKind==="network"&&e.mounted?l(M,{record:e},e.id):null,e.lib==="expo"?l(p,{title:"CACHE ACTIONS (expo-image, global)",children:r(u,{style:t.actionsRow,children:[l(m,{style:t.actionButton,onPress:()=>S("memory"),children:l(c,{style:t.actionText,children:"Clear memory cache"})}),l(m,{style:t.actionButton,onPress:()=>S("disk"),children:l(c,{style:t.actionText,children:"Clear disk cache"})})]})}):null]})}const t=v.create({container:{flex:1},content:{padding:12,gap:12},previewBox:{height:140,borderRadius:8,backgroundColor:a.color.bg,overflow:"hidden"},preview:{width:"100%",height:"100%"},section:{gap:6},sectionTitle:{color:a.color.textTertiary,fontSize:10,fontWeight:"700",letterSpacing:.8},sectionBody:{backgroundColor:a.color.surface,borderRadius:8,borderWidth:v.hairlineWidth,borderColor:a.color.border,paddingHorizontal:10,paddingVertical:4},kvRow:{flexDirection:"row",paddingVertical:5,gap:12},kvLabel:{color:a.color.textSecondary,fontSize:11,width:110},kvValue:{color:a.color.text,fontSize:11,flex:1},actionsRow:{flexDirection:"row",gap:8,paddingVertical:8},actionButton:{backgroundColor:a.color.surfaceElevated,borderRadius:6,paddingHorizontal:10,paddingVertical:6,borderWidth:v.hairlineWidth,borderColor:a.color.border},actionText:{color:a.color.text,fontSize:11,fontWeight:"600"},actionDisabled:{opacity:.4},urlInput:{color:a.color.text,fontSize:11,fontFamily:$,backgroundColor:a.color.surfaceElevated,borderRadius:6,borderWidth:v.hairlineWidth,borderColor:a.color.border,paddingHorizontal:8,paddingVertical:6,marginTop:8},overrideBanner:{flexDirection:"row",alignItems:"center",gap:10,padding:10,borderRadius:8,backgroundColor:a.color.warningSoft},overrideText:{flex:1,color:a.color.warning,fontSize:11,lineHeight:15},overrideRestore:{color:a.color.warning,fontSize:11,fontWeight:"700",letterSpacing:.5}});

package/lib/module/components/ImageDetailFooter.js

@@ -1,154 +1 @@
-"use strict";
-
-/**
- * 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, TouchableOpacity } from "react-native";
-import { ChevronLeft, ChevronRight, FooterButton, FooterMessage, FooterRow, RefreshCw, ToolFooter, night } from "@buoy-gg/shared-ui";
-import { hardReloadRecord, retryRecord } from "../capture/actions";
-import { clearOverride, flashRecord, setOverride } from "../capture/overrides";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ImageDetailFooter({
-  record,
-  hasPrevious,
-  hasNext,
-  onPrevious,
-  onNext
-}) {
-  const [message, setMessage] = useState(null);
-  const runAction = action => {
-    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, label) => {
-    setOverride(record.id, {
-      source,
-      label
-    });
-    setMessage(`${label} — Restore to undo`);
-  };
-  return /*#__PURE__*/_jsxs(ToolFooter, {
-    children: [message ? /*#__PURE__*/_jsx(FooterMessage, {
-      children: message
-    }) : actionsDisabled ? /*#__PURE__*/_jsx(FooterMessage, {
-      tone: "muted",
-      children: "Instance unmounted \u2014 reload actions need the image on screen."
-    }) : null, /*#__PURE__*/_jsxs(FooterRow, {
-      style: {
-        gap: 8
-      },
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onPrevious,
-        disabled: !hasPrevious,
-        style: [styles.navButton, !hasPrevious && styles.disabled],
-        activeOpacity: 0.7,
-        accessibilityLabel: "Previous image",
-        children: /*#__PURE__*/_jsx(ChevronLeft, {
-          size: 20,
-          color: hasPrevious ? night.color.accent : night.color.textTertiary
-        })
-      }), /*#__PURE__*/_jsx(FooterButton, {
-        label: "Hard reload",
-        size: "md",
-        disabled: actionsDisabled,
-        icon: /*#__PURE__*/_jsx(RefreshCw, {
-          size: 13,
-          color: actionsDisabled ? night.color.textTertiary : night.color.info
-        }),
-        onPress: () => runAction(() => hardReloadRecord(record))
-      }), /*#__PURE__*/_jsx(FooterButton, {
-        label: record.status === "error" ? "Retry" : "Reload",
-        size: "md",
-        disabled: actionsDisabled,
-        onPress: () => runAction(() => retryRecord(record))
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onNext,
-        disabled: !hasNext,
-        style: [styles.navButton, !hasNext && styles.disabled],
-        activeOpacity: 0.7,
-        accessibilityLabel: "Next image",
-        children: /*#__PURE__*/_jsx(ChevronRight, {
-          size: 20,
-          color: hasNext ? night.color.accent : night.color.textTertiary
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(FooterRow, {
-      style: {
-        gap: 8
-      },
-      children: [/*#__PURE__*/_jsx(SimButton, {
-        label: "Error",
-        disabled: actionsDisabled,
-        onPress: () => simulate({
-          type: "error"
-        }, "Forced error")
-      }), /*#__PURE__*/_jsx(SimButton, {
-        label: "Loading",
-        disabled: actionsDisabled,
-        onPress: () => simulate({
-          type: "hang"
-        }, "Forced loading")
-      }), /*#__PURE__*/_jsx(SimButton, {
-        label: "Blank",
-        disabled: actionsDisabled,
-        onPress: () => simulate({
-          type: "blank"
-        }, "Blanked")
-      }), /*#__PURE__*/_jsx(SimButton, {
-        label: "Find",
-        disabled: actionsDisabled,
-        onPress: () => {
-          flashRecord(record.id);
-          setMessage("Flashing a red border on the image (2.5s)");
-        }
-      }), /*#__PURE__*/_jsx(SimButton, {
-        label: "Restore",
-        accent: true,
-        disabled: !overrideActive,
-        onPress: () => {
-          clearOverride(record.id);
-          setMessage("Override removed — original source restored");
-        }
-      })]
-    })]
-  });
-}
-function SimButton({
-  label,
-  onPress,
-  disabled,
-  accent
-}) {
-  return /*#__PURE__*/_jsx(FooterButton, {
-    label: label,
-    onPress: onPress,
-    disabled: disabled,
-    accent: accent,
-    style: {
-      paddingVertical: 7
-    }
-  });
-}
-const styles = StyleSheet.create({
-  navButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  disabled: {
-    opacity: 0.4
-  }
-});
-//# sourceMappingURL=ImageDetailFooter.js.map
+"use strict";import{useState as P}from"react";import{StyleSheet as x,TouchableOpacity as h}from"react-native";import{ChevronLeft as B,ChevronRight as z,FooterButton as u,FooterMessage as f,FooterRow as v,RefreshCw as O,ToolFooter as j,night as s}from"@buoy-gg/shared-ui";import{hardReloadRecord as C,retryRecord as L}from"../capture/actions";import{clearOverride as S,flashRecord as T,setOverride as k}from"../capture/overrides";import{jsx as e,jsxs as g}from"react/jsx-runtime";export function ImageDetailFooter({record:t,hasPrevious:i,hasNext:n,onPrevious:c,onNext:R}){const[y,a]=P(null);const p=m=>{a("\u2026");m().then(r=>a(r.message)).catch(r=>a(String(r?.message??r)))};const o=!t.mounted;const F=t.overrideLabel!=null;const b=(m,r)=>{k(t.id,{source:m,label:r});a(`${r} \u2014 Restore to undo`)};return g(j,{children:[y?e(f,{children:y}):o?e(f,{tone:"muted",children:"Instance unmounted \u2014 reload actions need the image on screen."}):null,g(v,{style:{gap:8},children:[e(h,{onPress:c,disabled:!i,style:[d.navButton,!i&&d.disabled],activeOpacity:.7,accessibilityLabel:"Previous image",children:e(B,{size:20,color:i?s.color.accent:s.color.textTertiary})}),e(u,{label:"Hard reload",size:"md",disabled:o,icon:e(O,{size:13,color:o?s.color.textTertiary:s.color.info}),onPress:()=>p(()=>C(t))}),e(u,{label:t.status==="error"?"Retry":"Reload",size:"md",disabled:o,onPress:()=>p(()=>L(t))}),e(h,{onPress:R,disabled:!n,style:[d.navButton,!n&&d.disabled],activeOpacity:.7,accessibilityLabel:"Next image",children:e(z,{size:20,color:n?s.color.accent:s.color.textTertiary})})]}),g(v,{style:{gap:8},children:[e(l,{label:"Error",disabled:o,onPress:()=>b({type:"error"},"Forced error")}),e(l,{label:"Loading",disabled:o,onPress:()=>b({type:"hang"},"Forced loading")}),e(l,{label:"Blank",disabled:o,onPress:()=>b({type:"blank"},"Blanked")}),e(l,{label:"Find",disabled:o,onPress:()=>{T(t.id);a("Flashing a red border on the image (2.5s)")}}),e(l,{label:"Restore",accent:true,disabled:!F,onPress:()=>{S(t.id);a("Override removed \u2014 original source restored")}})]})]})}function l({label:t,onPress:i,disabled:n,accent:c}){return e(u,{label:t,onPress:i,disabled:n,accent:c,style:{paddingVertical:7}})}const d=x.create({navButton:{paddingHorizontal:10,paddingVertical:8,borderRadius:6,backgroundColor:s.color.button,alignItems:"center",justifyContent:"center"},disabled:{opacity:.4}});