@snowcone-app/ui 0.4.7 → 0.4.9

package/dist/index.d.cts

@@ -2929,6 +2929,24 @@ interface RealtimeContextValue {
         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;
     getMockupResultsImmediate: () => MockupResult[];
     subscribeMockupResults: (callback: (results: MockupResult[]) => void) => () => void;
     subscribeMockupResultById: (mockupId: string, callback: (result: MockupResult) => void) => () => void;

package/dist/index.d.ts

@@ -2929,6 +2929,24 @@ interface RealtimeContextValue {
         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;
     getMockupResultsImmediate: () => MockupResult[];
     subscribeMockupResults: (callback: (results: MockupResult[]) => void) => () => void;
     subscribeMockupResultById: (mockupId: string, callback: (result: MockupResult) => void) => () => void;

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,10 @@ function RealtimeProvider({
   const configSentRef = useRef12(false);
   const placementSettingsOverridesRef = useRef12({});
   const lastSentVariantIdRef = useRef12(null);
+  const lastSentBgRef = useRef12(void 0);
+  const spreadCropsRef = useRef12(void 0);
+  const [spreadCropsVersion, setSpreadCropsVersion] = useState17(0);
+  const lastSentSpreadCropsRef = useRef12("null");
   const lastSentColorsRef = useRef12({});
   const realtimeMockup = useRealtimeMockup2({
     wsUrl,
@@ -5781,6 +5799,8 @@ function RealtimeProvider({
         disconnect();
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
+        lastSentBgRef.current = void 0;
+        lastSentSpreadCropsRef.current = "null";
         lastSentColorsRef.current = {};
       };
     }
@@ -5802,7 +5822,10 @@ function RealtimeProvider({
     );
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null && lastSentVariantIdRef.current !== variantId;
-    if (!isFirstSend && !variantChanged) {
+    const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
+    const spreadCropsJson = JSON.stringify(spreadCropsRef.current ?? null);
+    const spreadCropsChanged = configSentRef.current && lastSentSpreadCropsRef.current !== spreadCropsJson;
+    if (!isFirstSend && !variantChanged && !bgChanged && !spreadCropsChanged) {
       return;
     }
     const mockupIds = [];
@@ -5819,6 +5842,8 @@ function RealtimeProvider({
       variantId,
       shop,
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
+      ...spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     } : {
       productId,
@@ -5827,6 +5852,8 @@ function RealtimeProvider({
       shop: "hTidnpNnNa",
       seal: "bypass-sig-for-k6-load-test",
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
+      ...spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     };
     if (variantChanged) {
@@ -5838,6 +5865,8 @@ function RealtimeProvider({
     sendConfigRaw(configPayload);
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
+    lastSentBgRef.current = mockupBg;
+    lastSentSpreadCropsRef.current = spreadCropsJson;
     setTimeout(() => {
       const colorPlacements = placements.filter((p) => p.type === "color");
       colorPlacements.forEach((p) => {
@@ -5855,7 +5884,9 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
-    mockupWidth
+    mockupWidth,
+    mockupBg,
+    spreadCropsVersion
   ]);
   useEffect17(() => {
     if (!isEnabled || !isConnected || !isConfigured || !productContext?.product)
@@ -5889,6 +5920,17 @@ function RealtimeProvider({
     },
     [updatePlacementSettingsRaw]
   );
+  const setSpreadCrops = useCallback10(
+    (crops) => {
+      const next = crops && Object.keys(crops).length > 0 ? crops : void 0;
+      if (JSON.stringify(next ?? null) === JSON.stringify(spreadCropsRef.current ?? null)) {
+        return;
+      }
+      spreadCropsRef.current = next;
+      setSpreadCropsVersion((v) => v + 1);
+    },
+    []
+  );
   const enableRealtime = useCallback10(() => {
     setIsEnabled(true);
   }, []);
@@ -6174,6 +6216,7 @@ function RealtimeProvider({
       sendCanvasState,
       updateMockupIds: updateMockupIdsRaw,
       updatePlacementSettings: updatePlacementSettingsWrapped,
+      setSpreadCrops,
       getMockupResultsImmediate: () => mockupResultsRef.current,
       subscribeMockupResults: stableSubscribeMockupResults,
       subscribeMockupResultById: stableSubscribeMockupResultById,
@@ -6210,6 +6253,7 @@ function RealtimeProvider({
       sendCanvasState,
       updateMockupIdsRaw,
       updatePlacementSettingsWrapped,
+      setSpreadCrops,
       stableSubscribeMockupResults,
       stableSubscribeMockupResultById,
       notifyPendingExport,
@@ -6223,17 +6267,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 +7087,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 +7679,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 +7691,7 @@ function useMockupPriority() {
   return context;
 }
 function useMockupPriorityOptional() {
-  return useContext6(MockupPriorityContext);
+  return useContext7(MockupPriorityContext);
 }
 
 // src/hooks/useProductPage.ts
@@ -8373,8 +8417,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 +8465,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 +8481,7 @@ function CanvasIsolationBoundary({
   serializeStateForServer
 }) {
   return /* @__PURE__ */ jsxs33(Fragment9, { children: [
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(
       CanvasIsolationConfigurator,
       {
         placementName,
@@ -8446,7 +8490,7 @@ function CanvasIsolationBoundary({
         serializeStateForServer
       }
     ),
-    /* @__PURE__ */ jsx53(IsolatedChildren, { children })
+    /* @__PURE__ */ jsx54(IsolatedChildren, { children })
   ] });
 }
 function useIsolatedCanvas() {
@@ -8470,7 +8514,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 +8658,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 +8726,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 +8907,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 +8974,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 +8987,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
       }
     ),
     bounds && typeof document !== "undefined" && createPortal2(
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         CandyVisual,
         {
           fadeClass,
@@ -8984,7 +9028,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 +9048,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({