{label}
{format ? format(value) : `${value > 0 ? "+" : ""}${value}${unit}`}
);
}
// ---------- FilteredPhoto: renders a presetId applied to a source ImageData.
// Memoizes via a per-photo cache keyed by presetId so the same thumb isn't
// recomputed on every render. Callers must guard on truthy sourceData.
// --------------------------------------------------------------------------
function FilteredPhoto({ sourceData, sourceW, sourceH, cache, presetId, intensity = 1, userAdjust, style = {}, className = "", objectFit = "contain" }) {
const canvasRef = React.useRef(null);
React.useEffect(() => {
if (!sourceData) return;
let cancelled = false;
// Yield a frame so initial paint can finish before the (potentially
// heavy) pipeline run blocks the main thread.
requestAnimationFrame(() => {
if (cancelled) return;
let filtered = cache && cache.get(presetId);
if (!filtered) {
filtered = applyPreset(sourceData, presetId, sourceW, sourceH);
if (cache) cache.set(presetId, filtered);
}
if (cancelled) return;
// Apply user adjustments on top — never mutate the cached preset output.
const display = isUserAdjustActive(userAdjust)
? applyUserAdjustments(filtered, sourceW, sourceH, userAdjust)
: filtered;
const canvas = canvasRef.current;
if (!canvas) return;
canvas.width = sourceW; canvas.height = sourceH;
canvas.getContext("2d").putImageData(display, 0, 0);
});
return () => { cancelled = true; };
}, [sourceData, sourceW, sourceH, presetId, cache, userAdjust]);
// object-fit on a