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

components/canvas/nodes/use-node-local-data.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
+
+function hashNodeData(value: unknown): string {
+  return JSON.stringify(value);
+}
+
+function logNodeDataDebug(event: string, payload: Record<string, unknown>): void {
+  const nodeSyncDebugEnabled =
+    process.env.NODE_ENV !== "production" &&
+    (globalThis as typeof globalThis & { __LEMONSPACE_DEBUG_NODE_SYNC__?: boolean })
+      .__LEMONSPACE_DEBUG_NODE_SYNC__ === true;
+
+  if (!nodeSyncDebugEnabled) {
+    return;
+  }
+
+  console.info("[Canvas node debug]", event, payload);
+}
+
+export function useNodeLocalData<T>({
+  data,
+  normalize,
+  saveDelayMs,
+  onSave,
+  debugLabel,
+}: {
+  data: unknown;
+  normalize: (value: unknown) => T;
+  saveDelayMs: number;
+  onSave: (value: T) => Promise<void> | void;
+  debugLabel: string;
+}) {
+  const [localData, setLocalDataState] = useState<T>(() => normalize(data));
+  const localDataRef = useRef(localData);
+  const hasPendingLocalChangesRef = useRef(false);
+
+  useEffect(() => {
+    localDataRef.current = localData;
+  }, [localData]);
+
+  const queueSave = useDebouncedCallback(() => {
+    void onSave(localDataRef.current);
+  }, saveDelayMs);
+
+  useEffect(() => {
+    const incomingData = normalize(data);
+    const incomingHash = hashNodeData(incomingData);
+    const localHash = hashNodeData(localDataRef.current);
+
+    if (incomingHash === localHash) {
+      hasPendingLocalChangesRef.current = false;
+      return;
+    }
+
+    if (hasPendingLocalChangesRef.current) {
+      logNodeDataDebug("skip-stale-external-data", {
+        nodeType: debugLabel,
+        incomingHash,
+        localHash,
+      });
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      localDataRef.current = incomingData;
+      setLocalDataState(incomingData);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [data, debugLabel, normalize]);
+
+  const applyLocalData = useCallback(
+    (next: T) => {
+      hasPendingLocalChangesRef.current = true;
+      localDataRef.current = next;
+      setLocalDataState(next);
+      queueSave();
+    },
+    [queueSave],
+  );
+
+  const updateLocalData = useCallback(
+    (updater: (current: T) => T) => {
+      hasPendingLocalChangesRef.current = true;
+      setLocalDataState((current) => {
+        const next = updater(current);
+        localDataRef.current = next;
+        queueSave();
+        return next;
+      });
+    },
+    [queueSave],
+  );
+
+  return {
+    localData,
+    applyLocalData,
+    updateLocalData,
+  };
+}