@snowcone-app/ui 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.9.4
+
+### Patch Changes
+
+- [#4344](https://github.com/snowcone-app/snowcone-monorepo/pull/4344) [`379a042`](https://github.com/snowcone-app/snowcone-monorepo/commit/379a042eb69a26f98fe0050f694c4ccf342e55b8) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Per-placement render versions and an explicit re-render. SDK: `MockupResult.versions` (every placement folded into a frame, from boxes that stamp it), `getLatestSentVersions()`, and `rerender(mockupIds)` (answered by `rerender_queued`; refusals are typed `E_RERENDER_*` errors). UI: a picture's `data-render-state` is `current` only when every placement is at its latest sent version, and a picture whose cropped frame failed is re-rendered with `rerender` once the box stamps versions (falling back to forcing it with configs on an `E_RERENDER_*` refusal or an older box).
+
+- Updated dependencies [[`379a042`](https://github.com/snowcone-app/snowcone-monorepo/commit/379a042eb69a26f98fe0050f694c4ccf342e55b8)]:
+  - @snowcone-app/sdk@0.25.0
+
+## 0.9.3
+
+### Patch Changes
+
+- [#4338](https://github.com/snowcone-app/snowcone-monorepo/pull/4338) [`80ec516`](https://github.com/snowcone-app/snowcone-monorepo/commit/80ec5166f3b2d9e52a9791ae54c8d67e8a217cae) Thanks [@kevinsproles](https://github.com/kevinsproles)! - The full-frame fallback really re-renders: when a cropped frame can't be composited, the realtime session now sends a config that differs from the one before it and then the full set, so the render server (which ignores overlayCrop and sorts mockupIds when deciding whether a config changed anything) re-renders the failed pictures instead of leaving them on their old render until the next edit.
+
+- [#4307](https://github.com/snowcone-app/snowcone-monorepo/pull/4307) [`1b510d0`](https://github.com/snowcone-app/snowcone-monorepo/commit/1b510d08c9e2c4399fd7731d3032b7e71abbfe9f) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Live pictures update on every edit: a cropped frame that can't be shown no longer narrows the realtime session to one mockup (it re-renders full-frame with the whole set); a frame superseded mid-drag is dropped instead of killing cropped delivery; the priority provider requests every picture in view as one set and, after the edit stops, every registered picture. `HeroProductImage` exposes `data-canvas-version`, `data-render-version` and `data-render-state` (current | stale | refused); the realtime context adds `getCanvasVersion()`.
+
 ## 0.9.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -6062,6 +6062,11 @@ async function compositeCroppedFrame(args) {
 var import_jsx_runtime52 = require("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 = (0, import_react25.createContext)(
   void 0
 );
@@ -6140,6 +6145,12 @@ function RealtimeProvider({
     },
     onError: (error, detail) => {
       console.error(`[RealtimeProvider] Render error [${detail.code}]:`, error);
+      if (detail.code.startsWith("E_RERENDER_") && pendingRerenderRef.current.length > 0) {
+        const ids = pendingRerenderRef.current;
+        pendingRerenderRef.current = [];
+        forceRerenderByConfigRef.current?.(ids);
+        return;
+      }
       if (detail.mockupId) {
         const id = detail.mockupId;
         setUnavailableMockups((prev) => prev.get(id)?.code === detail.code ? prev : new Map(prev).set(id, detail));
@@ -6165,7 +6176,9 @@ function RealtimeProvider({
     disconnect,
     flushPendingBlobs,
     hasPendingBlobs,
-    getLastSentVersion
+    getLastSentVersion,
+    getLatestSentVersions,
+    rerender: rerenderRaw
   } = realtimeMockup;
   const mockupResultsRef = (0, import_react25.useRef)([]);
   const mockupSubscribersRef = (0, import_react25.useRef)(
@@ -6202,6 +6215,18 @@ function RealtimeProvider({
   const compositeQueueRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
   const compositeBusyRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
   const compositeCanvasRef = (0, import_react25.useRef)(null);
+  const requestedMockupIdsRef = (0, import_react25.useRef)([]);
+  const serverStampsVersionsRef = (0, import_react25.useRef)(false);
+  const pendingRerenderRef = (0, import_react25.useRef)([]);
+  const forceRerenderByConfigRef = (0, import_react25.useRef)(null);
+  const fullFrameRerenderIdsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const fullFrameRerenderTimerRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(
+    () => () => {
+      if (fullFrameRerenderTimerRef.current) clearTimeout(fullFrameRerenderTimerRef.current);
+    },
+    []
+  );
   const registerBlobUrl = (0, import_react25.useCallback)((blobOrUrl, placementName) => {
     let url;
     if (blobOrUrl instanceof Blob) {
@@ -6233,6 +6258,7 @@ function RealtimeProvider({
       const base = lastConfigBaseRef.current;
       if (!base) return;
       croppedActiveRef.current = withCrop;
+      requestedMockupIdsRef.current = base.mockupIds ?? [];
       sendConfigRaw({
         ...base,
         placementSettings: { ...placementSettingsOverridesRef.current },
@@ -6245,6 +6271,65 @@ function RealtimeProvider({
     if (!croppedActiveRef.current) return;
     sendCropConfig(false);
   }, [sendCropConfig]);
+  const sendFullFrameConfig = (0, import_react25.useCallback)(
+    (mockupIds) => {
+      const base = lastConfigBaseRef.current;
+      if (!base) return;
+      sendConfigRaw({
+        ...base,
+        mockupIds,
+        placementSettings: { ...placementSettingsOverridesRef.current }
+      });
+    },
+    [sendConfigRaw]
+  );
+  const forceRerenderByConfig = (0, import_react25.useCallback)(
+    (failed) => {
+      const inForce = requestedMockupIdsRef.current;
+      const fp = (list) => [...list].sort().join(",");
+      const step = fp(failed) !== fp(inForce) ? failed : inForce.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 on a box without \`rerender\`); it updates on the next edit.`
+        );
+        sendFullFrameConfig(inForce);
+        return;
+      }
+      sendFullFrameConfig(step);
+      sendFullFrameConfig(inForce);
+    },
+    [sendFullFrameConfig]
+  );
+  forceRerenderByConfigRef.current = forceRerenderByConfig;
+  const rerenderFullFrame = (0, import_react25.useCallback)(
+    (mockupId) => {
+      fullFrameRerenderIdsRef.current.add(mockupId);
+      if (fullFrameRerenderTimerRef.current) return;
+      fullFrameRerenderTimerRef.current = setTimeout(() => {
+        fullFrameRerenderTimerRef.current = null;
+        const failed = [...fullFrameRerenderIdsRef.current];
+        fullFrameRerenderIdsRef.current.clear();
+        if (!lastConfigBaseRef.current || failed.length === 0) return;
+        const previous = requestedMockupIdsRef.current;
+        const ids = mergeMockupIds(previous, failed);
+        croppedActiveRef.current = false;
+        requestedMockupIdsRef.current = ids;
+        const fp = (list) => [...list].sort().join(",");
+        if (fp(ids) !== fp(previous)) {
+          sendFullFrameConfig(ids);
+          return;
+        }
+        if (serverStampsVersionsRef.current) {
+          sendFullFrameConfig(ids);
+          pendingRerenderRef.current = failed;
+          if (rerenderRaw(failed)) return;
+          pendingRerenderRef.current = [];
+        }
+        forceRerenderByConfig(failed);
+      }, 0);
+    },
+    [sendFullFrameConfig, forceRerenderByConfig, rerenderRaw]
+  );
   const maybeFlipCrop = (0, import_react25.useCallback)(() => {
     if (!croppedDeliveryEnabled || !cropCapableRef.current) return;
     if (croppedActiveRef.current) return;
@@ -6278,6 +6363,10 @@ function RealtimeProvider({
         else merged.push(result);
       });
       mockupResultsRef.current = merged;
+      if (pendingRerenderRef.current.length > 0) {
+        const delivered = new Set(results.map((r) => r.mockupId));
+        pendingRerenderRef.current = pendingRerenderRef.current.filter((id) => !delivered.has(id));
+      }
       const clearedPlacements = /* @__PURE__ */ new Set();
       results.forEach((result) => {
         const wasPending = pendingMockupIdsRef.current.has(result.mockupId);
@@ -6344,8 +6433,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 {
@@ -6363,16 +6451,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 = (0, import_react25.useCallback)(
     (mockupId) => {
@@ -6398,6 +6488,9 @@ function RealtimeProvider({
     }
     console.log(`[RTP] rawMockupResults changed: ${rawMockupResults.length} result(s)`, rawMockupResults.map((r) => `${r.mockupId}${r.imageUrl ? " \u2713url" : " \u2717NO-URL"}${r.cropRect ? " [crop]" : ""}`));
     const displayable = [];
+    if (!serverStampsVersionsRef.current && rawMockupResults.some((r) => r.versions && typeof r.versions === "object")) {
+      serverStampsVersionsRef.current = true;
+    }
     rawMockupResults.forEach((result) => {
       if (!result.imageUrl) {
         console.log(`[RTP] Result for ${result.mockupId} has NO imageUrl \u2014 not caching, pending NOT cleared`);
@@ -6560,6 +6653,7 @@ function RealtimeProvider({
       });
     }
     lastConfigBaseRef.current = configPayload;
+    requestedMockupIdsRef.current = mockupIds;
     sendConfigRaw(
       croppedActiveRef.current ? { ...configPayload, overlayCrop: "auto" } : configPayload
     );
@@ -6619,6 +6713,7 @@ function RealtimeProvider({
       if (croppedActiveRef.current && mockupIds.some((id) => !backgroundsRef.current.has(id))) {
         unflipCrop();
       }
+      requestedMockupIdsRef.current = [...mockupIds];
       return updateMockupIdsRaw(mockupIds);
     },
     [updateMockupIdsRaw, unflipCrop]
@@ -6875,6 +6970,12 @@ function RealtimeProvider({
     },
     []
   );
+  const getLastSentVersionRef = (0, import_react25.useRef)(getLastSentVersion);
+  getLastSentVersionRef.current = getLastSentVersion;
+  const getCanvasVersion = (0, import_react25.useCallback)(() => getLastSentVersionRef.current?.() ?? 0, []);
+  const getLatestSentVersionsRef = (0, import_react25.useRef)(getLatestSentVersions);
+  getLatestSentVersionsRef.current = getLatestSentVersions;
+  const getLatestSentVersionsStable = (0, import_react25.useCallback)(() => getLatestSentVersionsRef.current?.() ?? {}, []);
   const stableSubscribePipelineSettled = (0, import_react25.useCallback)(
     (callback) => {
       return subscribePipelineSettledRef.current(callback);
@@ -6923,6 +7024,8 @@ function RealtimeProvider({
       // Centralized URL management
       getMockupUrl: getMockupUrl3,
       getMockupUrls,
+      getCanvasVersion,
+      getLatestSentVersions: getLatestSentVersionsStable,
       isMockupLoading,
       registerBlobUrl,
       // WebRTC streaming
@@ -6954,6 +7057,8 @@ function RealtimeProvider({
       hasPendingBlobs,
       getMockupUrl3,
       getMockupUrls,
+      getCanvasVersion,
+      getLatestSentVersionsStable,
       isMockupLoading,
       registerBlobUrl
     ]
@@ -7822,17 +7927,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 = [];
     }
@@ -7857,6 +7978,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) {
@@ -10681,6 +10812,57 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
       unsubscribe?.();
     };
   }, [mode, realtimeContext?.subscribePendingBlob, placement]);
+  const renderVersionRef = (0, import_react46.useRef)(0);
+  const renderVersionsRef = (0, import_react46.useRef)(null);
+  const getLatestSentVersions = realtimeContext?.getLatestSentVersions;
+  const refusalCodeRef = (0, import_react46.useRef)(null);
+  refusalCodeRef.current = unavailable?.code ?? null;
+  const sessionErrorCodeRef = (0, import_react46.useRef)(null);
+  sessionErrorCodeRef.current = realtimeContext?.renderError?.code ?? null;
+  const getCanvasVersion = realtimeContext?.getCanvasVersion;
+  const applyRenderStamp = (0, import_react46.useCallback)(() => {
+    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 versions = renderVersionsRef.current;
+    const sent = versions ? getLatestSentVersions?.() : void 0;
+    const behind = versions && sent ? Object.entries(sent).some(([placement2, v]) => (versions[placement2] ?? -1) < v) : 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, getLatestSentVersions]);
+  (0, import_react46.useEffect)(() => {
+    applyRenderStamp();
+  });
+  (0, import_react46.useEffect)(() => {
+    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;
+        renderVersionsRef.current = result.versions ?? null;
+      }
+      applyRenderStamp();
+    });
+    return () => {
+      offSent?.();
+      offResult?.();
+    };
+  }, [
+    actualMockupId,
+    realtimeContext?.subscribeBlobSent,
+    realtimeContext?.subscribeMockupResultById,
+    applyRenderStamp
+  ]);
   (0, import_react46.useEffect)(() => {
     if (!priorityContext || !actualMockupId || !placement) return;
     priorityContext.registerMockup(actualMockupId, placement, initialPriority);