@buoy-gg/images 7.0.41 → 7.0.43

package/lib/commonjs/components/ImageDetail.js

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

package/lib/commonjs/components/ImageDetailFooter.js

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