@snowcone-app/ui 0.9.1 → 0.9.3

package/dist/index.d.cts

@@ -1510,7 +1510,7 @@ interface UseProductGalleryReturn {
  * ```tsx
  * // Fetch specific products
  * const { products, loading, error, refetch } = useProductGallery(
- *   ['BEEB77', 'CAXHQC'],
+ *   ['BC43BE', 'CAXHQC'],
  *   { endpoint: 'http://localhost:3000', mode: 'mock' }
  * );
  *
@@ -1599,7 +1599,7 @@ interface ProductGalleryProps extends UseProductGalleryOptions {
  * 2. List all products: Pass empty array or omit productIds
  *
  * @example Specific products
- * <ProductGallery productIds={["BEEB77", "CAXHQC", "KMYKUK"]}>
+ * <ProductGallery productIds={["BC43BE", "CAXHQC", "XTNA6J"]}>
  *   {(products, loading, error) => (
  *     <div className="grid grid-cols-3 gap-4">
  *       {products.map(product => (
@@ -1917,7 +1917,7 @@ interface CurrentSelectionDisplayProps {
  * ```tsx
  * import { Product, ProductOptions, CurrentSelectionDisplay } from '@yourorg/ui-react';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <ProductOptions />
  *   <CurrentSelectionDisplay />
  * </Product>
@@ -2928,6 +2928,8 @@ declare function useShopOptional(): ShopContextValue | undefined;
 interface MockupResult {
     mockupId: string;
     imageUrl: string;
+    /** The canvas version this frame was rendered from (see getCanvasVersion). */
+    requestVersion?: number;
 }
 type RealtimeState = RealtimeContextValue;
 interface RealtimeContextValue {
@@ -3043,6 +3045,13 @@ interface RealtimeContextValue {
      * subsequent blobs to the same placement.
      */
     subscribeBlobSent: (callback: (placement: string) => void) => () => void;
+    /**
+     * The canvas version the session last sent (0 before the first edit
+     * reaches the server). Every rendered result carries the `requestVersion`
+     * it was rendered from: a picture whose version is below this one shows an
+     * older design. Read it after a `subscribeBlobSent` notification.
+     */
+    getCanvasVersion: () => number;
     flushPendingBlobs: () => void;
     hasPendingBlobs: () => boolean;
     subscribePipelineSettled: (callback: () => void) => () => void;
@@ -4265,7 +4274,7 @@ type ArtworkCustomizerProps = {
  * // CORRECT: Use with ArtSelector to manage artwork via context
  * import { Product, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <ArtSelector artworks={[
  *     { type: 'regular', src: 'https://example.com/photo.jpg' },
  *     { type: 'pattern', src: 'https://example.com/pattern.jpg', tileCount: 1 }
@@ -4279,7 +4288,7 @@ type ArtworkCustomizerProps = {
  * // CORRECT: Full example with ProductImage
  * import { Product, ProductImage, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <div className="grid grid-cols-2 gap-8">
  *     <ProductImage />
  *     <div>

package/dist/index.d.ts

@@ -1510,7 +1510,7 @@ interface UseProductGalleryReturn {
  * ```tsx
  * // Fetch specific products
  * const { products, loading, error, refetch } = useProductGallery(
- *   ['BEEB77', 'CAXHQC'],
+ *   ['BC43BE', 'CAXHQC'],
  *   { endpoint: 'http://localhost:3000', mode: 'mock' }
  * );
  *
@@ -1599,7 +1599,7 @@ interface ProductGalleryProps extends UseProductGalleryOptions {
  * 2. List all products: Pass empty array or omit productIds
  *
  * @example Specific products
- * <ProductGallery productIds={["BEEB77", "CAXHQC", "KMYKUK"]}>
+ * <ProductGallery productIds={["BC43BE", "CAXHQC", "XTNA6J"]}>
  *   {(products, loading, error) => (
  *     <div className="grid grid-cols-3 gap-4">
  *       {products.map(product => (
@@ -1917,7 +1917,7 @@ interface CurrentSelectionDisplayProps {
  * ```tsx
  * import { Product, ProductOptions, CurrentSelectionDisplay } from '@yourorg/ui-react';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <ProductOptions />
  *   <CurrentSelectionDisplay />
  * </Product>
@@ -2928,6 +2928,8 @@ declare function useShopOptional(): ShopContextValue | undefined;
 interface MockupResult {
     mockupId: string;
     imageUrl: string;
+    /** The canvas version this frame was rendered from (see getCanvasVersion). */
+    requestVersion?: number;
 }
 type RealtimeState = RealtimeContextValue;
 interface RealtimeContextValue {
@@ -3043,6 +3045,13 @@ interface RealtimeContextValue {
      * subsequent blobs to the same placement.
      */
     subscribeBlobSent: (callback: (placement: string) => void) => () => void;
+    /**
+     * The canvas version the session last sent (0 before the first edit
+     * reaches the server). Every rendered result carries the `requestVersion`
+     * it was rendered from: a picture whose version is below this one shows an
+     * older design. Read it after a `subscribeBlobSent` notification.
+     */
+    getCanvasVersion: () => number;
     flushPendingBlobs: () => void;
     hasPendingBlobs: () => boolean;
     subscribePipelineSettled: (callback: () => void) => () => void;
@@ -4265,7 +4274,7 @@ type ArtworkCustomizerProps = {
  * // CORRECT: Use with ArtSelector to manage artwork via context
  * import { Product, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <ArtSelector artworks={[
  *     { type: 'regular', src: 'https://example.com/photo.jpg' },
  *     { type: 'pattern', src: 'https://example.com/pattern.jpg', tileCount: 1 }
@@ -4279,7 +4288,7 @@ type ArtworkCustomizerProps = {
  * // CORRECT: Full example with ProductImage
  * import { Product, ProductImage, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <div className="grid grid-cols-2 gap-8">
  *     <ProductImage />
  *     <div>

package/dist/index.js

@@ -5703,6 +5703,11 @@ async function compositeCroppedFrame(args) {
 import { jsx as jsx52 } from "react/jsx-runtime";
 var DEFAULT_ARTBOARD_SIZE = 2e3;
 var MAX_CONCURRENT_BLOBS = 5;
+function mergeMockupIds(current, extra) {
+  const out = [...current];
+  for (const id of extra) if (!out.includes(id)) out.push(id);
+  return out;
+}
 var RealtimeContext = createContext8(
   void 0
 );
@@ -5843,6 +5848,15 @@ function RealtimeProvider({
   const compositeQueueRef = useRef12(/* @__PURE__ */ new Map());
   const compositeBusyRef = useRef12(/* @__PURE__ */ new Set());
   const compositeCanvasRef = useRef12(null);
+  const requestedMockupIdsRef = useRef12([]);
+  const fullFrameRerenderIdsRef = useRef12(/* @__PURE__ */ new Set());
+  const fullFrameRerenderTimerRef = useRef12(null);
+  useEffect17(
+    () => () => {
+      if (fullFrameRerenderTimerRef.current) clearTimeout(fullFrameRerenderTimerRef.current);
+    },
+    []
+  );
   const registerBlobUrl = useCallback10((blobOrUrl, placementName) => {
     let url;
     if (blobOrUrl instanceof Blob) {
@@ -5874,6 +5888,7 @@ function RealtimeProvider({
       const base = lastConfigBaseRef.current;
       if (!base) return;
       croppedActiveRef.current = withCrop;
+      requestedMockupIdsRef.current = base.mockupIds ?? [];
       sendConfigRaw({
         ...base,
         placementSettings: { ...placementSettingsOverridesRef.current },
@@ -5886,6 +5901,44 @@ function RealtimeProvider({
     if (!croppedActiveRef.current) return;
     sendCropConfig(false);
   }, [sendCropConfig]);
+  const rerenderFullFrame = useCallback10(
+    (mockupId) => {
+      fullFrameRerenderIdsRef.current.add(mockupId);
+      if (fullFrameRerenderTimerRef.current) return;
+      fullFrameRerenderTimerRef.current = setTimeout(() => {
+        fullFrameRerenderTimerRef.current = null;
+        const failed = [...fullFrameRerenderIdsRef.current];
+        fullFrameRerenderIdsRef.current.clear();
+        const base = lastConfigBaseRef.current;
+        if (!base || failed.length === 0) return;
+        const previous = requestedMockupIdsRef.current;
+        const ids = mergeMockupIds(previous, failed);
+        croppedActiveRef.current = false;
+        requestedMockupIdsRef.current = ids;
+        const send = (mockupIds) => sendConfigRaw({
+          ...base,
+          mockupIds,
+          placementSettings: { ...placementSettingsOverridesRef.current }
+        });
+        const fingerprint = (list) => [...list].sort().join(",");
+        if (fingerprint(ids) !== fingerprint(previous)) {
+          send(ids);
+          return;
+        }
+        const step = fingerprint(failed) !== fingerprint(previous) ? failed : ids.slice(0, -1);
+        if (step.length === 0) {
+          console.error(
+            `[RealtimeProvider] E_OVERLAY_RERENDER_UNAVAILABLE: cannot force a full-frame re-render of ${failed.join(", ")} (single-mockup session); it updates on the next edit.`
+          );
+          send(ids);
+          return;
+        }
+        send(step);
+        send(ids);
+      }, 0);
+    },
+    [sendConfigRaw]
+  );
   const maybeFlipCrop = useCallback10(() => {
     if (!croppedDeliveryEnabled || !cropCapableRef.current) return;
     if (croppedActiveRef.current) return;
@@ -5985,8 +6038,7 @@ function RealtimeProvider({
         console.error(
           `[RealtimeProvider] E_OVERLAY_NO_BACKGROUND: cropped frame for ${result.mockupId} has no frozen background \u2014 falling back to full-frame and re-rendering it.`
         );
-        unflipCrop();
-        updateMockupIdsRaw([result.mockupId]);
+        rerenderFullFrame(result.mockupId);
         return;
       }
       try {
@@ -6004,16 +6056,18 @@ function RealtimeProvider({
         if (gen !== sceneGenRef.current) return;
         deliverResults([{ ...result, imageUrl: registerBlobUrl(blob) }]);
       } catch (err) {
+        if (gen !== sceneGenRef.current || compositeQueueRef.current.has(result.mockupId) || processedFrameRef.current.get(result.mockupId) !== result.imageUrl) {
+          return;
+        }
         console.error(
           "[RealtimeProvider] E_OVERLAY_COMPOSITE_FAILED: cropped-frame composite failed \u2014 full-frame delivery for the rest of this session.",
           err
         );
         cropCapableRef.current = false;
-        unflipCrop();
-        updateMockupIdsRaw([result.mockupId]);
+        rerenderFullFrame(result.mockupId);
       }
     },
-    [deliverResults, registerBlobUrl, unflipCrop, updateMockupIdsRaw]
+    [deliverResults, registerBlobUrl, rerenderFullFrame]
   );
   const pumpCompositeQueue = useCallback10(
     (mockupId) => {
@@ -6201,6 +6255,7 @@ function RealtimeProvider({
       });
     }
     lastConfigBaseRef.current = configPayload;
+    requestedMockupIdsRef.current = mockupIds;
     sendConfigRaw(
       croppedActiveRef.current ? { ...configPayload, overlayCrop: "auto" } : configPayload
     );
@@ -6260,6 +6315,7 @@ function RealtimeProvider({
       if (croppedActiveRef.current && mockupIds.some((id) => !backgroundsRef.current.has(id))) {
         unflipCrop();
       }
+      requestedMockupIdsRef.current = [...mockupIds];
       return updateMockupIdsRaw(mockupIds);
     },
     [updateMockupIdsRaw, unflipCrop]
@@ -6516,6 +6572,9 @@ function RealtimeProvider({
     },
     []
   );
+  const getLastSentVersionRef = useRef12(getLastSentVersion);
+  getLastSentVersionRef.current = getLastSentVersion;
+  const getCanvasVersion = useCallback10(() => getLastSentVersionRef.current?.() ?? 0, []);
   const stableSubscribePipelineSettled = useCallback10(
     (callback) => {
       return subscribePipelineSettledRef.current(callback);
@@ -6564,6 +6623,7 @@ function RealtimeProvider({
       // Centralized URL management
       getMockupUrl: getMockupUrl3,
       getMockupUrls,
+      getCanvasVersion,
       isMockupLoading,
       registerBlobUrl,
       // WebRTC streaming
@@ -6595,6 +6655,7 @@ function RealtimeProvider({
       hasPendingBlobs,
       getMockupUrl3,
       getMockupUrls,
+      getCanvasVersion,
       isMockupLoading,
       registerBlobUrl
     ]
@@ -7471,17 +7532,33 @@ function MockupPriorityProvider({ children }) {
     if (!realtimeContext?.updateMockupIds) {
       return;
     }
+    const mobile = mobileCarouselRef.current;
+    const universe = mobile && mobile.mockupIds.length > 0 ? mobile.mockupIds : registrationOrderRef.current;
+    const inView = [];
+    if (level1MockupRef.current) {
+      inView.push(level1MockupRef.current);
+      if (!mobile || mobile.mockupIds.length === 0) {
+        visibilityMapRef.current.forEach((info, id) => {
+          if (info.visibleArea > 0 && !inView.includes(id)) inView.push(id);
+        });
+      }
+    }
     let mockupIds;
     switch (level) {
       case 1:
-        mockupIds = level1MockupRef.current ? [level1MockupRef.current] : [];
+        mockupIds = inView;
         break;
       case 2:
-        mockupIds = [...level2MockupsRef.current];
+        mockupIds = level2MockupsRef.current.filter((id) => !inView.includes(id));
         break;
-      case 3:
-        mockupIds = [...level3QueueRef.current];
+      case 3: {
+        const earlier = /* @__PURE__ */ new Set([...inView, ...level2MockupsRef.current]);
+        mockupIds = [
+          ...level3QueueRef.current.filter((id) => !earlier.has(id)),
+          ...universe.filter((id) => !earlier.has(id) && !level3QueueRef.current.includes(id))
+        ];
         break;
+      }
       default:
         mockupIds = [];
     }
@@ -7506,6 +7583,16 @@ function MockupPriorityProvider({ children }) {
       const isStillDragging = timeSinceLastPendingBlob < DRAG_STOP_DEBOUNCE_MS;
       if (currentLevel === 1 && isStillDragging) {
         currentRenderingLevelRef.current = null;
+        if (levelAdvanceTimeoutRef.current) {
+          clearTimeout(levelAdvanceTimeoutRef.current);
+        }
+        levelAdvanceTimeoutRef.current = setTimeout(() => {
+          levelAdvanceTimeoutRef.current = null;
+          const quiet = Date.now() - lastPendingBlobTimeRef.current >= DRAG_STOP_DEBOUNCE_MS;
+          if (quiet && currentRenderingLevelRef.current === null && pendingMockupsRef.current.size === 0) {
+            requestMockupsForLevel(2);
+          }
+        }, DRAG_STOP_DEBOUNCE_MS - timeSinceLastPendingBlob + 10);
         return;
       }
       if (isStillDragging) {
@@ -10363,6 +10450,52 @@ var HeroProductImage = memo3(function HeroProductImage2({
       unsubscribe?.();
     };
   }, [mode, realtimeContext?.subscribePendingBlob, placement]);
+  const renderVersionRef = useRef23(0);
+  const refusalCodeRef = useRef23(null);
+  refusalCodeRef.current = unavailable?.code ?? null;
+  const sessionErrorCodeRef = useRef23(null);
+  sessionErrorCodeRef.current = realtimeContext?.renderError?.code ?? null;
+  const getCanvasVersion = realtimeContext?.getCanvasVersion;
+  const applyRenderStamp = useCallback18(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const canvas = getCanvasVersion?.() ?? 0;
+    if (canvas <= 0) {
+      delete node.dataset.canvasVersion;
+      delete node.dataset.renderVersion;
+      delete node.dataset.renderState;
+      return;
+    }
+    const rendered = renderVersionRef.current;
+    const behind = rendered < canvas;
+    node.dataset.canvasVersion = String(canvas);
+    node.dataset.renderVersion = String(rendered);
+    node.dataset.renderState = refusalCodeRef.current || behind && sessionErrorCodeRef.current ? "refused" : behind ? "stale" : "current";
+  }, [getCanvasVersion]);
+  useEffect32(() => {
+    applyRenderStamp();
+  });
+  useEffect32(() => {
+    const subscribeSent = realtimeContext?.subscribeBlobSent;
+    const subscribeResult = realtimeContext?.subscribeMockupResultById;
+    if (!actualMockupId || !subscribeSent || !subscribeResult) return;
+    const offSent = subscribeSent(() => applyRenderStamp());
+    const offResult = subscribeResult(actualMockupId, (result) => {
+      if (typeof result?.requestVersion === "number" && result.requestVersion > renderVersionRef.current) {
+        renderVersionRef.current = result.requestVersion;
+      }
+      applyRenderStamp();
+    });
+    return () => {
+      offSent?.();
+      offResult?.();
+    };
+  }, [
+    actualMockupId,
+    realtimeContext?.subscribeBlobSent,
+    realtimeContext?.subscribeMockupResultById,
+    applyRenderStamp
+  ]);
   useEffect32(() => {
     if (!priorityContext || !actualMockupId || !placement) return;
     priorityContext.registerMockup(actualMockupId, placement, initialPriority);