Read the review card fill from localStorage before picking a new one.

The review screen’s effect ran before draft hydration, so reload always generated a fresh color and overwrote the stored one.

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

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

@@ -1,23 +1,8 @@
 "use client";
 
 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;
-}
+import { dominantColorFromImageUrl } from "../../../../lib/create/previewSurfaceColor";
+import { resolvePreviewSurfaceFallback } from "../utils/resolvePreviewSurfaceFallback";
 
 /**
  * Fill for the review preview card. An uploaded logo contributes its most
@@ -27,7 +12,7 @@ function storedOrRandom(
  *
  * @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.
+ * @param persistFallback Writes the fallback onto React state once.
  * @returns A CSS color, or `undefined` before the client picks one.
  *
  * @example
@@ -42,15 +27,23 @@ export function usePreviewSurfaceColor(
 
   useEffect(() => {
     if (!imageUrl) {
+      const next = resolvePreviewSurfaceFallback(storedFallback);
+      persistFallback(next);
       // eslint-disable-next-line react-hooks/set-state-in-effect -- random fill is client-only; first paint stays on the fallback class
-      setColor(storedOrRandom(storedFallback, persistFallback));
+      setColor(next);
       return;
     }
 
     let cancelled = false;
-    void dominantColorFromImageUrl(imageUrl).then((next) => {
+    void dominantColorFromImageUrl(imageUrl).then((extracted) => {
       if (cancelled) return;
-      setColor(next ?? storedOrRandom(storedFallback, persistFallback));
+      if (extracted) {
+        setColor(extracted);
+        return;
+      }
+      const next = resolvePreviewSurfaceFallback(storedFallback);
+      persistFallback(next);
+      setColor(next);
     });
 
     return () => {