) => {
+ const pos = getCanvasPos(e);
+ const idx = findNearPoint(pos.x, pos.y);
+
+ if (idx >= 0 && currentPoints.length > 2) {
+ const newPoints = currentPoints.filter((_, i) => i !== idx);
+ setCurves((prev) => ({ ...prev, [channel]: newPoints }));
+ setPreset("Custom");
+ }
+ },
+ [getCanvasPos, findNearPoint, currentPoints, channel],
+ );
+
+ const handlePresetChange = useCallback(
+ (name: string) => {
+ setPreset(name);
+ const presetPoints = CURVE_PRESETS[name];
+ if (presetPoints) {
+ setCurves((prev) => ({
+ ...prev,
+ [channel]: presetPoints.map((p) => ({ ...p })),
+ }));
+ }
+ },
+ [channel],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+ Click to add point. Drag to move. Double-click to remove.
+
+
+ {TOGGLE_FILTERS.map((type) => {
+ const filter = filters.find((f) => f.type === type);
+ if (!filter) return null;
+
+ return (
+
+ );
+ })}
+
+ );
+}
+
+function SliderFiltersSection() {
+ const filters = useEditorStore((s) => s.filters);
+ const toggleFilter = useEditorStore((s) => s.toggleFilter);
+ const setFilterParam = useEditorStore((s) => s.setFilterParam);
+
+ return (
+
+ {SLIDER_FILTERS.map(({ type, label, params }) => {
+ const filter = filters.find((f) => f.type === type);
+ if (!filter) return null;
+
+ return (
+
+
+ {filter.enabled &&
+ params.map((p) => (
+ setFilterParam(type, p.key, v)}
+ />
+ ))}
+
+ );
+ })}
+
+ {BLUR_FILTERS.map(({ type, label, params }) => {
+ const filter = filters.find((f) => f.type === type);
+ if (!filter) return null;
+
+ return (
+
+
+ {filter.enabled &&
+ params.map((p) => (
+ setFilterParam(type, p.key, v)}
+ />
+ ))}
+
+ );
+ })}
+
+
+ {filter.enabled &&
+ VIGNETTE_PARAMS.map((p) => (
+ setFilterParam("vignette", p.key, v)}
+ />
+ ))}
+
+ );
+}
+
+function GrainSection() {
+ const filters = useEditorStore((s) => s.filters);
+ const toggleFilter = useEditorStore((s) => s.toggleFilter);
+ const setFilterParam = useEditorStore((s) => s.setFilterParam);
+
+ const filter = filters.find((f) => f.type === "grain");
+ if (!filter) return null;
+
+ return (
+
+
+ {filter.enabled &&
+ GRAIN_PARAMS.map((p) => (
+ setFilterParam("grain", p.key, v)}
+ />
+ ))}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Main Panel
+// ---------------------------------------------------------------------------
+
+export function AdjustmentsPanel() {
+ const adjustments = useEditorStore((s) => s.adjustments);
+ const filters = useEditorStore((s) => s.filters);
+ const resetAdjustments = useEditorStore((s) => s.resetAdjustments);
+
+ const hasChanges = useMemo(() => {
+ const hasAdjustmentChanges = Object.values(adjustments).some((v) => v !== 0);
+ const hasFilterChanges = filters.some((f) => f.enabled);
+ return hasAdjustmentChanges || hasFilterChanges;
+ }, [adjustments, filters]);
+
+ const handleResetAll = useCallback(() => {
+ resetAdjustments();
+ // Reset all filters by toggling off any enabled ones
+ const store = useEditorStore.getState();
+ for (const f of store.filters) {
+ if (f.enabled) {
+ store.toggleFilter(f.type);
+ }
+ }
+ }, [resetAdjustments]);
+
+ const handleApply = useCallback(() => {
+ // Bake adjustments and filters into pixel data
+ // For now, mark dirty and reset adjustment values
+ // The actual baking happens in the canvas rendering pipeline
+ const store = useEditorStore.getState();
+ store.markDirty();
+ resetAdjustments();
+ for (const f of store.filters) {
+ if (f.enabled) {
+ store.toggleFilter(f.type);
+ }
+ }
+ }, [resetAdjustments]);
+
+ return (
+
+ {/* Histogram */}
+
+
+ {/* Auto Adjustments */}
+
+
+
+ {/* Adjustment Sliders */}
+
+
+
+ {/* Levels */}
+
+
+
+ {/* Curves */}
+
+
+
+ {/* Filters */}
+
+
+
+
+ {/* Additional Blurs */}
+
+
+
+ {/* Vignette & Grain */}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {stats && (
+
+
+ Mean
+
+ {stats.mean[0]}{" "}
+ {stats.mean[1]}{" "}
+ {stats.mean[2]}
+
+
+ StdDev
+
+ {stats.stdDev[0]}{" "}
+ {stats.stdDev[1]}{" "}
+ {stats.stdDev[2]}
+
+
+ Median
+
+ {stats.median[0]}{" "}
+ {stats.median[1]}{" "}
+ {stats.median[2]}
+
+
+ )}
+