Title

Logo Composer — “Reset to Original” (revert to initial import)

Goal

On /brand-development/ai-logo-creator/logo-composer-*, add a Reset to Original button in the top-right tab/action area. It should restore the canvas to the exact state it had when the composer first loaded (whether it came from a draft or a template).

Implementation notes

Capture the initial composer state once (first successful load), keep it in a ref so it never changes.

Clicking the button replaces current composer state with a deep clone of that original snapshot.

Button is disabled if nothing has changed.

Micro-diff (single file)

File: client/src/pages/LogoCustomizerPage.tsx

--- a/client/src/pages/LogoCustomizerPage.tsx
+++ b/client/src/pages/LogoCustomizerPage.tsx
@@ -694,6 +694,8 @@
 // existing imports above...
 // ensure React hooks are imported; useRef/useEffect already in file

+const originalRef = React.useRef<LogoComposer | null>(null);
+
 useEffect(() => {
   let id = composerId || "";
   id = id.replace(/^logo-composer-/, "").replace(/^logo-wordmark-/, "");
@@ -706,6 +708,7 @@ useEffect(() => {
     if (!raw) { setError(`This draft isn't available anymore. Generate a new logo and try again.`); return; }
     const { svg } = JSON.parse(raw) as { svg: string };
     setComposer({
       id, name: "AI Draft", svg,
       defaultFields: {}, defaultColors: { primary: "#231f20", secondary: "#6dc282", accent: "#00CB51" }
     });
+    return;
   }
   // existing Firebase/template loading continues below...
 }, [composerId]);
@@ -718,6 +721,17 @@
 // Small Step 2 header once composer is present
 const stepHeader = composer ? (
   <div className="mb-3">
     <h2 className="text-xl font-semibold">Step 2: Customize Your Logo</h2>
     <p className="text-sm text-gray-600">Edit text, shapes, and colors. When finished, click “Save to Brand Kit”.</p>
   </div>) : null;

+// Capture original snapshot once (first time composer is set)
+React.useEffect(() => {
+  if (composer && !originalRef.current) {
+    originalRef.current = JSON.parse(JSON.stringify(composer));
+  }
+}, [composer]);
+
+const resetToOriginal = () => {
+  if (originalRef.current) setComposer(JSON.parse(JSON.stringify(originalRef.current)));
+};
+


Place the button in the top-right tab/action group. Example (adjust to your layout):

@@
-  <div className="flex items-center justify-between mb-3">
+  <div className="flex items-center justify-between mb-3">
     {stepHeader}
-    {/* existing right-side actions */}
+    <div className="flex items-center gap-2">
+      <Button
+        onClick={resetToOriginal}
+        aria-label="Reset to Original"
+        title="Reset to Original"
+        disabled={!originalRef.current || JSON.stringify(composer) === JSON.stringify(originalRef.current)}
+      >
+        Reset to Original
+      </Button>
+    </div>
   </div>


(If your header JSX differs, just mount that <Button> alongside the existing top-right controls.)

QA

Load a draft/template → edit text/colors/shapes → Reset to Original → canvas snaps back to the initial imported state.

On first load (no edits), button is disabled.

Switch between drafts/templates → each new load captures a new original snapshot.

No layout shift; button appears in top-right tab/action area.