feat: add snapshot caching functionality to PricingEngine and implement snapshot store

src/components/PricingEngine.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useConfigStore } from '@/store/useConfigStore';
 import { usePricingStore, pricingStore } from '@/store/usePricingStore';
 import { orderStore } from '@/store/useOrderStore';
+import { snapshotStore } from '@/store/useSnapshotStore';
 
 const DEFAULT_COLOR = '#96a2b6';
 
@@ -31,6 +32,9 @@ export function PricingEngine() {
   const personaLabel = items.find((i) => i.id === persona)?.label ?? '';
 
   const handleProceed = () => {
+    // Cache the robot snapshot now, while the canvas is still visible
+    snapshotStore.getState().cacheSnapshot();
+
     const store = orderStore.getState();
     const lineItems: { label: string; price: number }[] = [
       { label: 'G1 Robot Base', price: basePrice },

src/store/useSnapshotStore.ts

@@ -2,17 +2,31 @@ import { createStore } from 'zustand/vanilla';
 
 interface SnapshotStore {
   _captureFn: (() => string | null) | null;
+  cachedSnapshot: string | null;
   registerCapture: (fn: () => string | null) => void;
   capture: () => string | null;
+  cacheSnapshot: () => void;
 }
 
 export const snapshotStore = createStore<SnapshotStore>((set, get) => ({
   _captureFn: null,
+  cachedSnapshot: null,
 
   registerCapture: (fn) => set({ _captureFn: fn }),
 
   capture: () => {
+    // Return cached snapshot if available (taken before overlay opened)
+    const cached = get().cachedSnapshot;
+    if (cached) return cached;
     const fn = get()._captureFn;
     return fn ? fn() : null;
   },
+
+  cacheSnapshot: () => {
+    const fn = get()._captureFn;
+    if (fn) {
+      const data = fn();
+      if (data) set({ cachedSnapshot: data });
+    }
+  },
 }));