feat(canvas): implement dropped connection resolution and enhance connection handling

components/canvas/nodes/curves-node.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
 import { useMutation } from "convex/react";
 import { useTranslations } from "next-intl";
@@ -9,10 +9,10 @@ import { TrendingUp } from "lucide-react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import { useCanvasAdjustmentPresets } from "@/components/canvas/canvas-presets-context";
-import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
 import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
 import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+import { useNodeLocalData } from "@/components/canvas/nodes/use-node-local-data";
 import {
   ParameterSlider,
   type SliderConfig,
@@ -49,42 +49,30 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
   const savePreset = useMutation(api.presets.save);
   const userPresets = useCanvasAdjustmentPresets("curves") as PresetDoc[];
 
-  const [localData, setLocalData] = useState<CurvesData>(() =>
-    normalizeCurvesData({ ...cloneAdjustmentData(DEFAULT_CURVES_DATA), ...data }),
-  );
   const [presetSelection, setPresetSelection] = useState("custom");
-  const localDataRef = useRef(localData);
-
-  useEffect(() => {
-    localDataRef.current = localData;
-  }, [localData]);
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      setLocalData(
-        normalizeCurvesData({ ...cloneAdjustmentData(DEFAULT_CURVES_DATA), ...data }),
-      );
-    }, 0);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [data]);
-
-  const queueSave = useDebouncedCallback(() => {
-    void queueNodeDataUpdate({
-      nodeId: id as Id<"nodes">,
-      data: localDataRef.current,
-    });
-  }, 16);
+  const normalizeData = useCallback(
+    (value: unknown) =>
+      normalizeCurvesData({
+        ...cloneAdjustmentData(DEFAULT_CURVES_DATA),
+        ...(value as Record<string, unknown>),
+      }),
+    [],
+  );
+  const { localData, applyLocalData, updateLocalData } = useNodeLocalData<CurvesData>({
+    data,
+    normalize: normalizeData,
+    saveDelayMs: 16,
+    onSave: (next) =>
+      queueNodeDataUpdate({
+        nodeId: id as Id<"nodes">,
+        data: next,
+      }),
+    debugLabel: "curves",
+  });
 
   const updateData = (updater: (draft: CurvesData) => CurvesData) => {
     setPresetSelection("custom");
-    setLocalData((current) => {
-      const next = updater(current);
-      localDataRef.current = next;
-      queueSave();
-      return next;
-    });
+    updateLocalData(updater);
   };
 
   const builtinOptions = useMemo(() => Object.entries(CURVE_PRESETS), []);
@@ -136,9 +124,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
       const preset = CURVE_PRESETS[key];
       if (!preset) return;
       setPresetSelection(value);
-      setLocalData(cloneAdjustmentData(preset));
-      localDataRef.current = cloneAdjustmentData(preset);
-      queueSave();
+      applyLocalData(cloneAdjustmentData(preset));
       return;
     }
 
@@ -148,9 +134,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
       if (!preset) return;
       const next = normalizeCurvesData(preset.params);
       setPresetSelection(value);
-      setLocalData(next);
-      localDataRef.current = next;
-      queueSave();
+      applyLocalData(next);
     }
   };