@snowcone-app/ui 0.4.7 → 0.4.8

package/dist/index.js

@@ -5549,8 +5549,8 @@ import { useRef as useRef13, useEffect as useEffect18, useMemo as useMemo8, useS
 
 // src/patterns/RealtimeProvider.tsx
 import {
-  createContext as createContext7,
-  useContext as useContext5,
+  createContext as createContext8,
+  useContext as useContext6,
   useState as useState17,
   useEffect as useEffect17,
   useCallback as useCallback10,
@@ -5559,10 +5559,23 @@ import {
 } from "react";
 import { useRealtimeMockup as useRealtimeMockup2 } from "@snowcone-app/sdk/react";
 import { resolveVariantId as resolveVariantIdUtil } from "@snowcone-app/sdk";
+
+// src/patterns/MockupBackground.tsx
+import { createContext as createContext7, useContext as useContext5 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
+var MockupBackgroundContext = createContext7(void 0);
+function MockupBackground({ bg, children }) {
+  return /* @__PURE__ */ jsx51(MockupBackgroundContext.Provider, { value: bg, children });
+}
+function useMockupBackgroundOptional() {
+  return useContext5(MockupBackgroundContext);
+}
+
+// src/patterns/RealtimeProvider.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
 var DEFAULT_ARTBOARD_SIZE = 2e3;
 var MAX_CONCURRENT_BLOBS = 5;
-var RealtimeContext = createContext7(
+var RealtimeContext = createContext8(
   void 0
 );
 function RealtimeProvider({
@@ -5576,6 +5589,7 @@ function RealtimeProvider({
   grantUrl
 }) {
   const productContext = useProductOptional();
+  const mockupBg = useMockupBackgroundOptional();
   const [isEnabled, setIsEnabled] = useState17(autoEnable);
   const useSessionGrant = Boolean(shop && grantUrl);
   const getToken = useCallback10(async () => {
@@ -5596,6 +5610,7 @@ function RealtimeProvider({
   const configSentRef = useRef12(false);
   const placementSettingsOverridesRef = useRef12({});
   const lastSentVariantIdRef = useRef12(null);
+  const lastSentBgRef = useRef12(void 0);
   const lastSentColorsRef = useRef12({});
   const realtimeMockup = useRealtimeMockup2({
     wsUrl,
@@ -5781,6 +5796,7 @@ function RealtimeProvider({
         disconnect();
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
+        lastSentBgRef.current = void 0;
         lastSentColorsRef.current = {};
       };
     }
@@ -5802,7 +5818,8 @@ function RealtimeProvider({
     );
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null && lastSentVariantIdRef.current !== variantId;
-    if (!isFirstSend && !variantChanged) {
+    const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
+    if (!isFirstSend && !variantChanged && !bgChanged) {
       return;
     }
     const mockupIds = [];
@@ -5819,6 +5836,7 @@ function RealtimeProvider({
       variantId,
       shop,
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     } : {
       productId,
@@ -5827,6 +5845,7 @@ function RealtimeProvider({
       shop: "hTidnpNnNa",
       seal: "bypass-sig-for-k6-load-test",
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     };
     if (variantChanged) {
@@ -5838,6 +5857,7 @@ function RealtimeProvider({
     sendConfigRaw(configPayload);
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
+    lastSentBgRef.current = mockupBg;
     setTimeout(() => {
       const colorPlacements = placements.filter((p) => p.type === "color");
       colorPlacements.forEach((p) => {
@@ -5855,7 +5875,8 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
-    mockupWidth
+    mockupWidth,
+    mockupBg
   ]);
   useEffect17(() => {
     if (!isEnabled || !isConnected || !isConfigured || !productContext?.product)
@@ -6223,17 +6244,17 @@ function RealtimeProvider({
       registerBlobUrl
     ]
   );
-  return /* @__PURE__ */ jsx51(RealtimeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx52(RealtimeContext.Provider, { value: contextValue, children });
 }
 function useRealtime() {
-  const context = useContext5(RealtimeContext);
+  const context = useContext6(RealtimeContext);
   if (!context) {
     throw new Error("useRealtime must be used within a RealtimeProvider");
   }
   return context;
 }
 function useRealtimeOptional() {
-  return useContext5(RealtimeContext);
+  return useContext6(RealtimeContext);
 }
 
 // src/hooks/useCanvasContext.ts
@@ -7043,19 +7064,19 @@ import { useCallback as useCallback15, useMemo as useMemo10 } from "react";
 
 // src/patterns/MockupPriorityProvider.tsx
 import {
-  createContext as createContext8,
-  useContext as useContext6,
+  createContext as createContext9,
+  useContext as useContext7,
   useCallback as useCallback14,
   useRef as useRef18,
   useMemo as useMemo9,
   useState as useState23,
   useEffect as useEffect23
 } from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var MAX_LEVEL3_PREFETCH = 5;
 var PRIORITY_RECALC_DEBOUNCE_MS = 50;
 var PRELOAD_MARGIN_PX = 750;
-var MockupPriorityContext = createContext8(
+var MockupPriorityContext = createContext9(
   void 0
 );
 function MockupPriorityProvider({ children }) {
@@ -7635,10 +7656,10 @@ function MockupPriorityProvider({ children }) {
       subscribeLevel1Change
     ]
   );
-  return /* @__PURE__ */ jsx52(MockupPriorityContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx53(MockupPriorityContext.Provider, { value: contextValue, children });
 }
 function useMockupPriority() {
-  const context = useContext6(MockupPriorityContext);
+  const context = useContext7(MockupPriorityContext);
   if (!context) {
     throw new Error(
       "useMockupPriority must be used within a MockupPriorityProvider"
@@ -7647,7 +7668,7 @@ function useMockupPriority() {
   return context;
 }
 function useMockupPriorityOptional() {
-  return useContext6(MockupPriorityContext);
+  return useContext7(MockupPriorityContext);
 }
 
 // src/hooks/useProductPage.ts
@@ -8373,8 +8394,8 @@ var CanvasExportService = class _CanvasExportService {
 var canvasExportService = new CanvasExportService();
 
 // src/components/CanvasIsolationBoundary.tsx
-import React40, { useEffect as useEffect26 } from "react";
-import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import React41, { useEffect as useEffect26 } from "react";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 function CanvasIsolationConfigurator({
   placementName: placementNameProp,
   onArtworkChange,
@@ -8421,9 +8442,9 @@ function CanvasIsolationConfigurator({
   }, []);
   return null;
 }
-var IsolatedChildren = React40.memo(
+var IsolatedChildren = React41.memo(
   function IsolatedChildren2({ children }) {
-    return /* @__PURE__ */ jsx53(Fragment9, { children });
+    return /* @__PURE__ */ jsx54(Fragment9, { children });
   },
   // Custom comparison: ALWAYS return true (never re-render due to parent changes)
   // This is intentional - children should use refs/services for updates that need to bypass this
@@ -8437,7 +8458,7 @@ function CanvasIsolationBoundary({
   serializeStateForServer
 }) {
   return /* @__PURE__ */ jsxs33(Fragment9, { children: [
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(
       CanvasIsolationConfigurator,
       {
         placementName,
@@ -8446,7 +8467,7 @@ function CanvasIsolationBoundary({
         serializeStateForServer
       }
     ),
-    /* @__PURE__ */ jsx53(IsolatedChildren, { children })
+    /* @__PURE__ */ jsx54(IsolatedChildren, { children })
   ] });
 }
 function useIsolatedCanvas() {
@@ -8470,7 +8491,7 @@ function useIsolatedCanvas() {
 
 // src/components/LoadingOverlayPrism.tsx
 import { useState as useState26, useEffect as useEffect27, useCallback as useCallback16, useRef as useRef19 } from "react";
-import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function generateParticles() {
   return Array.from({ length: 16 }, () => ({
     left: 10 + Math.random() * 80,
@@ -8614,13 +8635,13 @@ function LoadingOverlayPrism({
       onTransitionEnd: handleTransitionEnd,
       children: [
         /* @__PURE__ */ jsxs34("div", { className: "prism-loading-rainbow", children: [
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" })
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" })
         ] }),
-        particles.map((p, i) => /* @__PURE__ */ jsx54(
+        particles.map((p, i) => /* @__PURE__ */ jsx55(
           "div",
           {
             className: "prism-loading-particle",
@@ -8682,7 +8703,7 @@ import {
   useCallback as useCallback17
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var BANDS = [
   { rgb: "230, 45, 55", delay: "-0.0s" },
   // red
@@ -8863,8 +8884,8 @@ function CandyVisual({
       style,
       onTransitionEnd,
       children: [
-        BANDS.map((_, i) => /* @__PURE__ */ jsx55("div", { className: "candy-band" }, `b-${i}`)),
-        particles.map((p, i) => /* @__PURE__ */ jsx55(
+        BANDS.map((_, i) => /* @__PURE__ */ jsx56("div", { className: "candy-band" }, `b-${i}`)),
+        particles.map((p, i) => /* @__PURE__ */ jsx56(
           "div",
           {
             className: "candy-particle",
@@ -8930,7 +8951,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
   if (!visible) fadeClass = "candy-fade-out";
   else if (mounted) fadeClass = "candy-fade-in";
   return /* @__PURE__ */ jsxs35(Fragment10, { children: [
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       "div",
       {
         ref: anchorRef,
@@ -8943,7 +8964,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
       }
     ),
     bounds && typeof document !== "undefined" && createPortal2(
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         CandyVisual,
         {
           fadeClass,
@@ -8984,7 +9005,7 @@ var LoadingOverlayPrismCandyInline = memo2(
     let fadeClass = "";
     if (!visible) fadeClass = "candy-fade-out";
     else if (mounted) fadeClass = "candy-fade-in";
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       CandyVisual,
       {
         fadeClass,
@@ -9004,17 +9025,6 @@ var LoadingOverlayPrismCandyInline = memo2(
 import { useRealtimeMockup as useRealtimeMockup3 } from "@snowcone-app/sdk/react";
 import { getProduct as getProduct3, listProducts as listProducts4, getMockupUrl as getMockupUrl2 } from "@snowcone-app/sdk";
 
-// src/patterns/MockupBackground.tsx
-import { createContext as createContext9, useContext as useContext7 } from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
-var MockupBackgroundContext = createContext9(void 0);
-function MockupBackground({ bg, children }) {
-  return /* @__PURE__ */ jsx56(MockupBackgroundContext.Provider, { value: bg, children });
-}
-function useMockupBackgroundOptional() {
-  return useContext7(MockupBackgroundContext);
-}
-
 // src/patterns/ProductPageProvider.tsx
 import { jsx as jsx57 } from "react/jsx-runtime";
 function ProductPageProvider({