Keep the review card’s fallback color on the draft so a reload does not pick a new one.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/hooks/usePreviewSurfaceColor.ts

@@ -3,39 +3,60 @@
 import { useEffect, useState } from "react";
 import {
   dominantColorFromImageUrl,
+  isPreviewSurfaceColor,
   randomPreviewSurfaceColor,
 } from "../../../../lib/create/previewSurfaceColor";
 
+function storedOrRandom(
+  storedFallback: string | undefined,
+  persistFallback: (_color: string) => void,
+): string {
+  if (storedFallback && isPreviewSurfaceColor(storedFallback)) {
+    return storedFallback;
+  }
+  const next = randomPreviewSurfaceColor();
+  persistFallback(next);
+  return next;
+}
+
 /**
  * Fill for the review preview card. An uploaded logo contributes its most
- * common color; no image uses a random light color. Unset until mount so the
- * server and client share the fallback class.
+ * common color; no image uses a random light color stored on the draft so
+ * reload keeps the same fill. Unset until mount so the server and client
+ * share the fallback class.
  *
  * @param imageUrl Uploaded logo URL, or `null` when the user skipped the photo.
+ * @param storedFallback Draft `previewSurfaceColor`, if already picked.
+ * @param persistFallback Writes the fallback onto the draft once.
  * @returns A CSS color, or `undefined` before the client picks one.
+ *
+ * @example
+ * const color = usePreviewSurfaceColor(avatarUrl, state.previewSurfaceColor, persist);
  */
 export function usePreviewSurfaceColor(
   imageUrl: string | null,
+  storedFallback: string | undefined,
+  persistFallback: (_color: string) => void,
 ): string | undefined {
   const [color, setColor] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     if (!imageUrl) {
       // eslint-disable-next-line react-hooks/set-state-in-effect -- random fill is client-only; first paint stays on the fallback class
-      setColor(randomPreviewSurfaceColor());
+      setColor(storedOrRandom(storedFallback, persistFallback));
       return;
     }
 
     let cancelled = false;
     void dominantColorFromImageUrl(imageUrl).then((next) => {
       if (cancelled) return;
-      setColor(next ?? randomPreviewSurfaceColor());
+      setColor(next ?? storedOrRandom(storedFallback, persistFallback));
     });
 
     return () => {
       cancelled = true;
     };
-  }, [imageUrl]);
+  }, [imageUrl, persistFallback, storedFallback]);
 
   return color;
 }