@snowcone-app/ui 0.4.7 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "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.0"
+    "@snowcone-app/sdk": "0.20.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

package/src/patterns/RealtimeProvider.tsx

@@ -42,6 +42,7 @@ import type { RealtimeRenderError } from "@snowcone-app/sdk";
 import { readEnv } from "../lib/env";
 import { useProductOptional } from "./Product";
 import type { ReactProductContext } from "./Product";
+import { useMockupBackgroundOptional } from "./MockupBackground";
 
 // Default artboard size for export calculations (matches @snowcone-app/canvas default)
 const DEFAULT_ARTBOARD_SIZE = 2000;
@@ -273,6 +274,9 @@ export function RealtimeProvider({
   grantUrl,
 }: RealtimeProviderProps) {
   const productContext = useProductOptional();
+  // Page background for renders (see MockupBackground) — sent on the config so
+  // realtime results match static `bg=` mockup URLs.
+  const mockupBg = useMockupBackgroundOptional();
 
   const [isEnabled, setIsEnabled] = useState(autoEnable);
 
@@ -305,6 +309,7 @@ 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);
 
   // Track last sent colors to prevent duplicates
   const lastSentColorsRef = useRef<Record<string, string>>({});
@@ -577,6 +582,7 @@ export function RealtimeProvider({
         disconnect();
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
+        lastSentBgRef.current = undefined;
         lastSentColorsRef.current = {};
       };
     }
@@ -611,8 +617,10 @@ export function RealtimeProvider({
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null &&
                            lastSentVariantIdRef.current !== variantId;
+    // 3. Background changed (theme flip swaps the MockupBackground hex)
+    const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
 
-    if (!isFirstSend && !variantChanged) {
+    if (!isFirstSend && !variantChanged && !bgChanged) {
       return; // Nothing changed, skip
     }
 
@@ -637,6 +645,7 @@ export function RealtimeProvider({
           variantId,
           shop: shop as string,
           width: mockupWidth,
+          ...(mockupBg ? { bg: mockupBg } : {}),
           placementSettings: { ...placementSettingsOverridesRef.current },
         }
       : {
@@ -646,6 +655,7 @@ export function RealtimeProvider({
           shop: "hTidnpNnNa",
           seal: "bypass-sig-for-k6-load-test",
           width: mockupWidth,
+          ...(mockupBg ? { bg: mockupBg } : {}),
           placementSettings: { ...placementSettingsOverridesRef.current },
         };
 
@@ -662,6 +672,7 @@ export function RealtimeProvider({
 
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
+    lastSentBgRef.current = mockupBg;
 
     // Send default colors for color placements
     setTimeout(() => {
@@ -682,6 +693,7 @@ export function RealtimeProvider({
     sendConfigRaw,
     sendColorBlobTracked,
     mockupWidth,
+    mockupBg,
   ]);
 
   // Watch for color placement changes