@snowcone-app/ui 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",
@@ -103,7 +103,7 @@
     "react-instantsearch": "^7.15.5",
     "react-zoom-pan-pinch": "^3.6.4",
     "tailwind-merge": "^3.0.0",
-    "@snowcone-app/sdk": "0.20.1"
+    "@snowcone-app/sdk": "0.20.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

package/src/patterns/RealtimeProvider.tsx

@@ -127,6 +127,26 @@ export interface RealtimeContextValue {
    */
   updatePlacementSettings: (settings: Record<string, { scaleMode?: 'fill' | 'fit'; tiles?: number; alignment?: string }>) => boolean;
 
+  /**
+   * Declare spread-mode crop geometry (ADR-0060) for canvases that run
+   * combined spread/group artboards: artboard name → artboard dims + piece
+   * rects keyed by the product's placement labels. Sent on the realtime
+   * config (re-sent when it changes) so the server can slice each rendered
+   * spread canvas_state into per-placement images. Pass undefined to clear.
+   */
+  setSpreadCrops: (
+    crops:
+      | Record<
+          string,
+          {
+            width: number;
+            height: number;
+            pieces: Array<{ placement: string; x: number; y: number; width: number; height: number }>;
+          }
+        >
+      | undefined
+  ) => void;
+
   // PERFORMANCE: Direct access without state updates
   getMockupResultsImmediate: () => MockupResult[];
 
@@ -310,6 +330,21 @@ export function RealtimeProvider({
   // Track last sent variantId to detect when we need to re-send config
   const lastSentVariantIdRef = useRef<string | null>(null);
   const lastSentBgRef = useRef<string | undefined>(undefined);
+  // Spread crop geometry (ADR-0060) declared via setSpreadCrops. Ref holds
+  // the payload; the version state re-runs the config effect on change.
+  const spreadCropsRef = useRef<
+    | Record<
+        string,
+        {
+          width: number;
+          height: number;
+          pieces: Array<{ placement: string; x: number; y: number; width: number; height: number }>;
+        }
+      >
+    | undefined
+  >(undefined);
+  const [spreadCropsVersion, setSpreadCropsVersion] = useState(0);
+  const lastSentSpreadCropsRef = useRef<string>("null");
 
   // Track last sent colors to prevent duplicates
   const lastSentColorsRef = useRef<Record<string, string>>({});
@@ -583,6 +618,7 @@ export function RealtimeProvider({
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
         lastSentBgRef.current = undefined;
+        lastSentSpreadCropsRef.current = "null";
         lastSentColorsRef.current = {};
       };
     }
@@ -619,8 +655,12 @@ export function RealtimeProvider({
                            lastSentVariantIdRef.current !== variantId;
     // 3. Background changed (theme flip swaps the MockupBackground hex)
     const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
+    // 4. Spread crop geometry changed (spread-mode editor mounted/unmounted)
+    const spreadCropsJson = JSON.stringify(spreadCropsRef.current ?? null);
+    const spreadCropsChanged =
+      configSentRef.current && lastSentSpreadCropsRef.current !== spreadCropsJson;
 
-    if (!isFirstSend && !variantChanged && !bgChanged) {
+    if (!isFirstSend && !variantChanged && !bgChanged && !spreadCropsChanged) {
       return; // Nothing changed, skip
     }
 
@@ -646,6 +686,7 @@ export function RealtimeProvider({
           shop: shop as string,
           width: mockupWidth,
           ...(mockupBg ? { bg: mockupBg } : {}),
+          ...(spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {}),
           placementSettings: { ...placementSettingsOverridesRef.current },
         }
       : {
@@ -656,6 +697,7 @@ export function RealtimeProvider({
           seal: "bypass-sig-for-k6-load-test",
           width: mockupWidth,
           ...(mockupBg ? { bg: mockupBg } : {}),
+          ...(spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {}),
           placementSettings: { ...placementSettingsOverridesRef.current },
         };
 
@@ -673,6 +715,7 @@ export function RealtimeProvider({
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
     lastSentBgRef.current = mockupBg;
+    lastSentSpreadCropsRef.current = spreadCropsJson;
 
     // Send default colors for color placements
     setTimeout(() => {
@@ -694,6 +737,7 @@ export function RealtimeProvider({
     sendColorBlobTracked,
     mockupWidth,
     mockupBg,
+    spreadCropsVersion,
   ]);
 
   // Watch for color placement changes
@@ -737,6 +781,32 @@ export function RealtimeProvider({
     [updatePlacementSettingsRaw]
   );
 
+  // Declare spread crop geometry (ADR-0060). Stored in a ref; bumping the
+  // version state re-runs the config effect, which re-sends the config when
+  // the serialized geometry actually changed.
+  const setSpreadCrops = useCallback(
+    (
+      crops:
+        | Record<
+            string,
+            {
+              width: number;
+              height: number;
+              pieces: Array<{ placement: string; x: number; y: number; width: number; height: number }>;
+            }
+          >
+        | undefined
+    ) => {
+      const next = crops && Object.keys(crops).length > 0 ? crops : undefined;
+      if (JSON.stringify(next ?? null) === JSON.stringify(spreadCropsRef.current ?? null)) {
+        return;
+      }
+      spreadCropsRef.current = next;
+      setSpreadCropsVersion((v) => v + 1);
+    },
+    []
+  );
+
   const enableRealtime = useCallback(() => {
     setIsEnabled(true);
   }, []);
@@ -1111,6 +1181,7 @@ export function RealtimeProvider({
       sendCanvasState,
       updateMockupIds: updateMockupIdsRaw,
       updatePlacementSettings: updatePlacementSettingsWrapped,
+      setSpreadCrops,
       getMockupResultsImmediate: () => mockupResultsRef.current,
       subscribeMockupResults: stableSubscribeMockupResults,
       subscribeMockupResultById: stableSubscribeMockupResultById,
@@ -1147,6 +1218,7 @@ export function RealtimeProvider({
       sendCanvasState,
       updateMockupIdsRaw,
       updatePlacementSettingsWrapped,
+      setSpreadCrops,
       stableSubscribeMockupResults,
       stableSubscribeMockupResultById,
       notifyPendingExport,