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>

tests/components/FinalReviewPreviewSurface.test.tsx

@@ -1,11 +1,15 @@
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { waitFor } from "@testing-library/react";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
 import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
-import { dominantColorFromImageUrl } from "../../lib/create/previewSurfaceColor";
+import {
+  dominantColorFromImageUrl,
+  randomPreviewSurfaceColor,
+} from "../../lib/create/previewSurfaceColor";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 vi.mock("../../lib/create/previewSurfaceColor", async (importOriginal) => {
   const actual =
@@ -15,6 +19,7 @@ vi.mock("../../lib/create/previewSurfaceColor", async (importOriginal) => {
   return {
     ...actual,
     dominantColorFromImageUrl: vi.fn(async () => "rgb(12, 80, 40)"),
+    randomPreviewSurfaceColor: vi.fn(() => "hsl(12, 50%, 80%)"),
   };
 });
 
@@ -30,6 +35,30 @@ function FinalReviewWithAvatar() {
   return <FinalReviewScreen />;
 }
 
+function FinalReviewWithStateProbe({
+  initial,
+  onState,
+}: {
+  initial: CreateFlowState;
+  onState: (_state: CreateFlowState) => void;
+}) {
+  const { state, replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState(initial);
+  }, [replaceState, initial]);
+  useEffect(() => {
+    onState(state);
+  }, [onState, state]);
+  if (state.title !== initial.title) return null;
+  if (
+    initial.previewSurfaceColor &&
+    state.previewSurfaceColor !== initial.previewSurfaceColor
+  ) {
+    return null;
+  }
+  return <FinalReviewScreen />;
+}
+
 describe("Final review preview surface", () => {
   it("fills the card from the uploaded logo’s most common color", async () => {
     render(<FinalReviewWithAvatar />);
@@ -45,4 +74,46 @@ describe("Final review preview surface", () => {
       screen.getByRole("img", { name: "Oak Park Commons" }),
     ).toHaveAttribute("src", expect.stringContaining("avatar-1"));
   });
+
+  it("writes a fallback fill onto the draft when no logo is uploaded", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        initial={{
+          title: "Oak Park Commons",
+          communityContext: "Local mutual aid.",
+        }}
+        onState={(state) => {
+          latest = state;
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(latest.previewSurfaceColor).toBe("hsl(12, 50%, 80%)");
+    });
+    expect(vi.mocked(randomPreviewSurfaceColor)).toHaveBeenCalled();
+  });
+
+  it("reuses the stored fallback instead of picking a new color", async () => {
+    vi.mocked(randomPreviewSurfaceColor).mockClear();
+    render(
+      <FinalReviewWithStateProbe
+        initial={{
+          title: "Oak Park Commons",
+          communityContext: "Local mutual aid.",
+          previewSurfaceColor: "hsl(200, 60%, 80%)",
+        }}
+        onState={() => {}}
+      />,
+    );
+
+    await waitFor(() => {
+      const card = screen.getByRole("button", { name: /Oak Park Commons/i });
+      expect(card.style.backgroundColor).not.toBe("");
+    });
+    expect(vi.mocked(randomPreviewSurfaceColor)).not.toHaveBeenCalled();
+    const card = screen.getByRole("button", { name: /Oak Park Commons/i });
+    expect(card.style.backgroundColor).not.toBe("rgb(12, 80, 40)");
+  });
 });