void;
hasSelection: boolean;
onDeleteSelection: () => void;
+ /** CMF eyedropper probe visibility toggle */
+ probesVisible?: boolean;
+ onToggleProbes?: () => void;
}
const tools: { id: AnnotationTool; icon: typeof Square; label: string; shortcut?: string }[] = [
@@ -69,6 +74,7 @@ const tools: { id: AnnotationTool; icon: typeof Square; label: string; shortcut?
{ id: "freehand", icon: Pencil, label: "Freehand", shortcut: "F" },
{ id: "text", icon: Type, label: "Text label", shortcut: "T" },
{ id: "pin", icon: MapPin, label: "Pin", shortcut: "P" },
+ { id: "eyedropper", icon: Pipette, label: "CMF Eyedropper", shortcut: "D" },
];
export function AnnotationTools({
@@ -84,6 +90,8 @@ export function AnnotationTools({
onToggleVisibility,
hasSelection,
onDeleteSelection,
+ probesVisible,
+ onToggleProbes,
}: AnnotationToolsProps) {
return (
@@ -217,6 +225,31 @@ export function AnnotationTools({
+ {/* CMF probes visibility toggle */}
+ {onToggleProbes && (
+
+
+
+
+
+ {probesVisible ? "Hide CMF probes" : "Show CMF probes"}
+
+
+ )}
+
{/* Delete selection */}
{hasSelection && (
diff --git a/src/components/review/color-probe-layer.tsx b/src/components/review/color-probe-layer.tsx
new file mode 100644
index 0000000..fc395bb
--- /dev/null
+++ b/src/components/review/color-probe-layer.tsx
@@ -0,0 +1,341 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ColorProbeMarker, ColorProbeGhostMarker } from "@/components/review/color-probe-marker";
+import { ColorProbePanel } from "@/components/review/color-probe-panel";
+import {
+ useColorProbes,
+ useCreateColorProbe,
+ useUpdateColorProbe,
+ useDeleteColorProbe,
+ useClearColorProbes,
+} from "@/hooks/use-color-probes";
+import {
+ rgbToHsb,
+ compareHsb,
+ sampleFromImage,
+ type ProbeResult,
+} from "@/lib/utils/color";
+
+export interface ColorProbeLayerProps {
+ revisionId: string | null;
+ /** Whether the eyedropper tool is active */
+ active: boolean;
+ /** Whether probes are visible */
+ visible: boolean;
+ /** Viewport state */
+ zoom: number;
+ panX: number;
+ panY: number;
+ containerWidth: number;
+ containerHeight: number;
+ /** Working image URL (the current render) */
+ workingImageUrl: string | null;
+ /** Reference image URL */
+ referenceImageUrl: string | null;
+}
+
+const MAX_PROBES = 12;
+
+export function ColorProbeLayer({
+ revisionId,
+ active,
+ visible,
+ zoom,
+ panX,
+ panY,
+ containerWidth,
+ containerHeight,
+ workingImageUrl,
+ referenceImageUrl,
+}: ColorProbeLayerProps) {
+ const { data: probes = [] } = useColorProbes(revisionId);
+ const createProbe = useCreateColorProbe(revisionId);
+ const updateProbe = useUpdateColorProbe(revisionId);
+ const deleteProbe = useDeleteColorProbe(revisionId);
+ const clearProbes = useClearColorProbes(revisionId);
+
+ const [selectedProbeId, setSelectedProbeId] = useState(null);
+
+ // Loaded image refs for sampling
+ const workingImgRef = useRef(null);
+ const referenceImgRef = useRef(null);
+
+ // Load working image
+ useEffect(() => {
+ if (!workingImageUrl) {
+ workingImgRef.current = null;
+ return;
+ }
+ const img = new Image();
+ img.crossOrigin = "anonymous";
+ img.onload = () => { workingImgRef.current = img; };
+ img.src = workingImageUrl;
+ }, [workingImageUrl]);
+
+ // Load reference image
+ useEffect(() => {
+ if (!referenceImageUrl) {
+ referenceImgRef.current = null;
+ return;
+ }
+ const img = new Image();
+ img.crossOrigin = "anonymous";
+ img.onload = () => { referenceImgRef.current = img; };
+ img.src = referenceImageUrl;
+ }, [referenceImageUrl]);
+
+ // Compute probe results by sampling both images
+ const probeResults = useMemo(() => {
+ const results = new Map();
+ const workingImg = workingImgRef.current;
+ const refImg = referenceImgRef.current;
+
+ if (!workingImg || !refImg) return results;
+
+ for (const probe of probes) {
+ const workingSample = sampleFromImage(workingImg, probe.workingX, probe.workingY);
+ const refSample = sampleFromImage(refImg, probe.referenceX, probe.referenceY);
+
+ if (workingSample && refSample) {
+ const workingHsb = rgbToHsb(workingSample);
+ const refHsb = rgbToHsb(refSample);
+ results.set(probe.index, compareHsb(workingHsb, refHsb));
+ }
+ }
+
+ return results;
+ // Re-sample whenever probes or images change
+ }, [probes, workingImageUrl, referenceImageUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ // Handle click to place a new probe
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
+ if (!active || !revisionId) return;
+ if (probes.length >= MAX_PROBES) return;
+
+ const svg = e.currentTarget;
+ const rect = svg.getBoundingClientRect();
+ const imgX = (e.clientX - rect.left - panX) / zoom;
+ const imgY = (e.clientY - rect.top - panY) / zoom;
+
+ // Find next available index
+ const usedIndices = new Set(probes.map((p) => p.index));
+ let nextIndex = 1;
+ while (usedIndices.has(nextIndex) && nextIndex <= MAX_PROBES) {
+ nextIndex++;
+ }
+ if (nextIndex > MAX_PROBES) return;
+
+ createProbe.mutate({
+ index: nextIndex,
+ workingX: Math.round(imgX),
+ workingY: Math.round(imgY),
+ referenceX: Math.round(imgX),
+ referenceY: Math.round(imgY),
+ });
+ },
+ [active, revisionId, probes, panX, panY, zoom, createProbe]
+ );
+
+ // Drag handler for working-side probe
+ const handleProbeDrag = useCallback(
+ (probeId: string, e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setSelectedProbeId(probeId);
+
+ const probe = probes.find((p) => p.id === probeId);
+ if (!probe) return;
+
+ let lastX = e.clientX;
+ let lastY = e.clientY;
+
+ const handleMove = (me: MouseEvent) => {
+ const dx = (me.clientX - lastX) / zoom;
+ const dy = (me.clientY - lastY) / zoom;
+ lastX = me.clientX;
+ lastY = me.clientY;
+
+ // We update the offset relative to original — accumulate in a ref is better
+ // but for simplicity, we do a debounced update on mouseup
+ probe.workingX += dx;
+ probe.workingY += dy;
+ // Also move reference if not Alt-dragged
+ if (!me.altKey) {
+ probe.referenceX += dx;
+ probe.referenceY += dy;
+ }
+ };
+
+ const handleUp = () => {
+ window.removeEventListener("mousemove", handleMove);
+ window.removeEventListener("mouseup", handleUp);
+ updateProbe.mutate({
+ probeId,
+ data: {
+ workingX: Math.round(probe.workingX),
+ workingY: Math.round(probe.workingY),
+ referenceX: Math.round(probe.referenceX),
+ referenceY: Math.round(probe.referenceY),
+ },
+ });
+ };
+
+ window.addEventListener("mousemove", handleMove);
+ window.addEventListener("mouseup", handleUp);
+ },
+ [probes, zoom, updateProbe]
+ );
+
+ // Drag handler for reference-side ghost marker (Alt+drag to offset)
+ const handleRefDrag = useCallback(
+ (probeId: string, e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const probe = probes.find((p) => p.id === probeId);
+ if (!probe) return;
+
+ let lastX = e.clientX;
+ let lastY = e.clientY;
+
+ const handleMove = (me: MouseEvent) => {
+ const dx = (me.clientX - lastX) / zoom;
+ const dy = (me.clientY - lastY) / zoom;
+ lastX = me.clientX;
+ lastY = me.clientY;
+ probe.referenceX += dx;
+ probe.referenceY += dy;
+ };
+
+ const handleUp = () => {
+ window.removeEventListener("mousemove", handleMove);
+ window.removeEventListener("mouseup", handleUp);
+ updateProbe.mutate({
+ probeId,
+ data: {
+ referenceX: Math.round(probe.referenceX),
+ referenceY: Math.round(probe.referenceY),
+ },
+ });
+ };
+
+ window.addEventListener("mousemove", handleMove);
+ window.addEventListener("mouseup", handleUp);
+ },
+ [probes, zoom, updateProbe]
+ );
+
+ // Delete probe on right-click
+ const handleContextMenu = useCallback(
+ (probeId: string, e: React.MouseEvent) => {
+ e.preventDefault();
+ deleteProbe.mutate(probeId);
+ },
+ [deleteProbe]
+ );
+
+ // Delete key handler
+ useEffect(() => {
+ if (!selectedProbeId) return;
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Delete" || e.key === "Backspace") {
+ if (
+ e.target instanceof HTMLInputElement ||
+ e.target instanceof HTMLTextAreaElement
+ )
+ return;
+ deleteProbe.mutate(selectedProbeId);
+ setSelectedProbeId(null);
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [selectedProbeId, deleteProbe]);
+
+ if (!visible || !revisionId) return null;
+
+ // Check if any reference point is offset from working point
+ const hasOffsets = probes.some(
+ (p) =>
+ Math.abs(p.referenceX - p.workingX) > 1 ||
+ Math.abs(p.referenceY - p.workingY) > 1
+ );
+
+ return (
+ <>
+ {/* SVG overlay for probe markers */}
+
+
+ {/* Summary panel — bottom-left */}
+ {probes.length > 0 && (
+
+ clearProbes.mutate()}
+ isClearing={clearProbes.isPending}
+ />
+
+ )}
+
+ );
+}
diff --git a/src/components/review/color-probe-marker.tsx b/src/components/review/color-probe-marker.tsx
new file mode 100644
index 0000000..170a232
--- /dev/null
+++ b/src/components/review/color-probe-marker.tsx
@@ -0,0 +1,284 @@
+"use client";
+
+import { useState } from "react";
+import type { ProbeResult } from "@/lib/utils/color";
+
+interface ColorProbeMarkerProps {
+ index: number;
+ x: number;
+ y: number;
+ result: ProbeResult | null;
+ isSelected?: boolean;
+ onDragStart?: (e: React.MouseEvent) => void;
+}
+
+const STATUS_COLORS = {
+ pass: "#22C55E",
+ warn: "#F97316",
+ fail: "#EF4444",
+ unknown: "#6B7280",
+} as const;
+
+const MARKER_RADIUS = 8;
+
+export function ColorProbeMarker({
+ index,
+ x,
+ y,
+ result,
+ isSelected,
+ onDragStart,
+}: ColorProbeMarkerProps) {
+ const [hovered, setHovered] = useState(false);
+ const status = result?.status ?? "unknown";
+ const color = STATUS_COLORS[status];
+
+ return (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ onMouseDown={onDragStart}
+ >
+ {/* Outer ring */}
+
+ {/* Background circle */}
+
+ {/* Index number */}
+
+ {index}
+
+
+ {/* Status pill — positioned to the right */}
+
+ {/* Compact pill (always visible) */}
+
+
+ {/* Expanded detail panel on hover */}
+ {hovered && result && (
+
+ {/* Panel background */}
+
+ {/* Header */}
+
+ PROBE {index}
+
+
+
+ {status.toUpperCase()}
+
+
+ {/* H row */}
+
+ {/* S row */}
+
+ {/* B row */}
+
+
+ )}
+
+
+ );
+}
+
+function HsbRow({
+ label,
+ working,
+ reference,
+ delta,
+ pass,
+ y,
+}: {
+ label: string;
+ working: string;
+ reference: string;
+ delta: string;
+ pass: boolean;
+ y: number;
+}) {
+ return (
+
+
+ {label}:
+
+
+ {working}
+
+
+ →
+
+
+ {reference}
+
+
+ {delta}
+
+
+ {pass ? "✓" : "✗"}
+
+
+ );
+}
+
+/**
+ * Ghost marker shown on the reference image for an offset probe.
+ */
+export function ColorProbeGhostMarker({
+ index,
+ x,
+ y,
+ onDragStart,
+}: {
+ index: number;
+ x: number;
+ y: number;
+ onDragStart?: (e: React.MouseEvent) => void;
+}) {
+ return (
+
+
+
+ {index}
+
+
+ );
+}
diff --git a/src/components/review/color-probe-panel.tsx b/src/components/review/color-probe-panel.tsx
new file mode 100644
index 0000000..58c553e
--- /dev/null
+++ b/src/components/review/color-probe-panel.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { Trash2, Pipette } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { ProbeResult } from "@/lib/utils/color";
+
+interface ColorProbePanelProps {
+ probeResults: Map;
+ probeCount: number;
+ onClearAll: () => void;
+ isClearing?: boolean;
+}
+
+const STATUS_COLORS = {
+ pass: "#22C55E",
+ warn: "#F97316",
+ fail: "#EF4444",
+} as const;
+
+export function ColorProbePanel({
+ probeResults,
+ probeCount,
+ onClearAll,
+ isClearing,
+}: ColorProbePanelProps) {
+ if (probeCount === 0) return null;
+
+ const passCount = Array.from(probeResults.values()).filter(
+ (r) => r.status === "pass"
+ ).length;
+ const failCount = Array.from(probeResults.values()).filter(
+ (r) => r.status === "fail"
+ ).length;
+ const warnCount = Array.from(probeResults.values()).filter(
+ (r) => r.status === "warn"
+ ).length;
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Clear all probes
+
+
+
+
+ {/* Summary stats */}
+
+
+ {probeCount} of 12
+
+
+ {passCount > 0 && (
+
+ {passCount}
+
+ )}
+ {warnCount > 0 && (
+
+ {warnCount}
+
+ )}
+ {failCount > 0 && (
+
+ {failCount}
+
+ )}
+
+
+
+ {/* Probe rows */}
+
+ {Array.from({ length: probeCount }, (_, i) => i + 1).map((idx) => {
+ const result = probeResults.get(idx);
+ if (!result) return null;
+ const status = result.status;
+ const color = STATUS_COLORS[status];
+
+ return (
+
+ {/* Index */}
+
+ {idx}
+
+
+ {/* Status dot */}
+
+
+ {/* Deltas */}
+
+
+
+
+
+
+ );
+ })}
+
+