@snowcone-app/ui 0.4.13 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- [#2249](https://github.com/snowcone-app/snowcone-monorepo/pull/2249) [`19f7ee5`](https://github.com/snowcone-app/snowcone-monorepo/commit/19f7ee583638ccedd8fd5f309ad3e5ba6a06c0f9) Thanks [@kevinsproles](https://github.com/kevinsproles)! - A mockup whose scene failed render parity is refused by the server (`E_MOCKUP_NOT_BLESSED`) instead of silently rendering on the slow path. `RealtimeRenderError` gains `mockupId` for per-mockup errors; `RealtimeProvider` exposes `unavailableMockups` (mockupId → error) and `HeroProductImage` shows that mockup as unavailable (`data-mockup-unavailable`) while the others keep streaming.
+
+### Patch Changes
+
+- Updated dependencies [[`19f7ee5`](https://github.com/snowcone-app/snowcone-monorepo/commit/19f7ee583638ccedd8fd5f309ad3e5ba6a06c0f9)]:
+  - @snowcone-app/sdk@0.23.0
+
+## 0.7.0
+
+### Minor Changes
+
+- [#2240](https://github.com/snowcone-app/snowcone-monorepo/pull/2240) [`61c4826`](https://github.com/snowcone-app/snowcone-monorepo/commit/61c48267d77b93628ef525df5a6aee66421d67f7) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Realtime send policy: pipeline depth two. `CanvasExportService` now keeps up to two edits in flight (`maxInFlight`, default 2) before holding the latest state — the box's window is ~30 ms of a ~96 ms edit→frame, so one in flight left it idle ~70% of every drag cycle. `RealtimeProvider` settles once per landed send (every mockup of a `requestVersion`) instead of on the first frame after any send, using the SDK's new `getLastSentVersion()` on the realtime service and hook.
+
+### Patch Changes
+
+- Updated dependencies [[`61c4826`](https://github.com/snowcone-app/snowcone-monorepo/commit/61c48267d77b93628ef525df5a6aee66421d67f7)]:
+  - @snowcone-app/sdk@0.22.0
+
+## 0.6.0
+
+### Minor Changes
+
+- [#2231](https://github.com/snowcone-app/snowcone-monorepo/pull/2231) [`ecc5bde`](https://github.com/snowcone-app/snowcone-monorepo/commit/ecc5bde83c091a5c0de179903b18c67d7c674fc0) Thanks [@kevinsproles](https://github.com/kevinsproles)! - `RealtimeProvider` accepts `initialGrant` — a session grant minted server-side while the page rendered. The first connect spends it (if it has more than 30 s of life left) instead of paying a grant round trip; renewals and reconnects still go through `grantUrl`.
+
+## 0.5.0
+
+### Minor Changes
+
+- [#2230](https://github.com/snowcone-app/snowcone-monorepo/pull/2230) [`9f99c8a`](https://github.com/snowcone-app/snowcone-monorepo/commit/9f99c8a362f38b26d57c62a80a3845080338478f) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Realtime editor send policy is now one-in-flight: a change goes out immediately when no frame is in flight; while a frame is in flight the latest state is held and sent the moment that frame lands (`subscribePipelineSettled`), so the render pipeline is never idle during a drag and never more than one edit behind. `handleInteractionEnd()` (exported from the canvas isolation boundary) flushes a held state on pointer release. Replaces the fixed 300 ms settle / 1 s max-wait debounce.
+
+## 0.4.15
+
+### Patch Changes
+
+- Updated dependencies [[`aaa73cc`](https://github.com/snowcone-app/snowcone-monorepo/commit/aaa73ccb4b2d4c7c107b66f18be29f67032422b8)]:
+  - @snowcone-app/sdk@0.21.0
+
+## 0.4.14
+
+### Patch Changes
+
+- [#1638](https://github.com/snowcone-app/snowcone-monorepo/pull/1638) [`045645a`](https://github.com/snowcone-app/snowcone-monorepo/commit/045645ae6d9d7683bc0cb8b487da9440af151ef2) Thanks [@kevinsproles](https://github.com/kevinsproles)! - CanvasExportService: the first canvas change after idle is sent to the realtime renderer immediately (leading edge) instead of waiting for the 300ms settle. Editor actions emit two state changes ~250ms apart, so the trailing-only debounce left ~550ms of dead time before anything was sent; the settled state still follows as before.
+
 ## 0.4.13
 
 ### Patch Changes

package/dist/index.cjs

@@ -412,7 +412,7 @@ var brand_default = {
       display_name: "Snowcone",
       tagline: "Your art, on everything.",
       seo_title: "Snowcone \u2014 Your art, on everything.",
-      legal_entity: "Snowcone Inc.",
+      legal_entity: "Art Shop AI LLC",
       lang: "en",
       wordmark: "/assets/wordmark-en.svg"
     },
@@ -422,7 +422,7 @@ var brand_default = {
       display_name: "\u96EA\u7ED8 (Snowcone)",
       tagline: "\u5728\u96EA\u767D\u4E4B\u4E0A\uFF0C\u7ED8\u51FA\u4F60\u7684\u8272\u5F69\u3002",
       seo_title: "\u96EA\u7ED8 (Snowcone) \u2014 \u5728\u96EA\u767D\u4E4B\u4E0A\uFF0C\u7ED8\u51FA\u4F60\u7684\u8272\u5F69",
-      legal_entity: "\u96EA\u7ED8\u79D1\u6280\u6709\u9650\u516C\u53F8",
+      legal_entity: "Art Shop AI LLC",
       lang: "zh",
       wordmark: "/assets/wordmark-zh.svg"
     },
@@ -432,7 +432,7 @@ var brand_default = {
       display_name: "Snowcone",
       tagline: "Tu arte, en todo.",
       seo_title: "Snowcone \u2014 Tu arte, en todo.",
-      legal_entity: "Snowcone Inc.",
+      legal_entity: "Art Shop AI LLC",
       lang: "es",
       wordmark: "/assets/wordmark-en.svg"
     },
@@ -442,7 +442,7 @@ var brand_default = {
       display_name: "Snowcone",
       tagline: "Votre art, sur tout.",
       seo_title: "Snowcone \u2014 Votre art, sur tout.",
-      legal_entity: "Snowcone Inc.",
+      legal_entity: "Art Shop AI LLC",
       lang: "fr",
       wordmark: "/assets/wordmark-en.svg"
     }
@@ -6006,13 +6006,18 @@ function RealtimeProvider({
   autoEnable = false,
   shop,
   grantUrl,
+  initialGrant,
   delivery = "cropped"
 }) {
   const productContext = useProductOptional();
   const mockupBg = useMockupBackgroundOptional();
   const [isEnabled, setIsEnabled] = (0, import_react25.useState)(autoEnable);
   const useSessionGrant = Boolean(shop && grantUrl);
+  const initialGrantRef = (0, import_react25.useRef)(initialGrant);
   const getToken = (0, import_react25.useCallback)(async () => {
+    const minted = initialGrantRef.current;
+    initialGrantRef.current = void 0;
+    if (minted && minted.expiresAt * 1e3 - Date.now() > 3e4) return minted;
     const res = await fetch(grantUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -6035,6 +6040,9 @@ function RealtimeProvider({
   const [spreadCropsVersion, setSpreadCropsVersion] = (0, import_react25.useState)(0);
   const lastSentSpreadCropsRef = (0, import_react25.useRef)("null");
   const lastSentColorsRef = (0, import_react25.useRef)({});
+  const [unavailableMockups, setUnavailableMockups] = (0, import_react25.useState)(
+    () => /* @__PURE__ */ new Map()
+  );
   const realtimeMockup = (0, import_react26.useRealtimeMockup)({
     wsUrl,
     getToken: useSessionGrant ? getToken : void 0,
@@ -6064,6 +6072,10 @@ function RealtimeProvider({
     },
     onError: (error, detail) => {
       console.error(`[RealtimeProvider] Render error [${detail.code}]:`, error);
+      if (detail.mockupId) {
+        const id = detail.mockupId;
+        setUnavailableMockups((prev) => prev.get(id)?.code === detail.code ? prev : new Map(prev).set(id, detail));
+      }
     }
   });
   const subscribeRTCTiming = (0, import_react25.useCallback)((_callback) => {
@@ -6084,7 +6096,8 @@ function RealtimeProvider({
     connect,
     disconnect,
     flushPendingBlobs,
-    hasPendingBlobs
+    hasPendingBlobs,
+    getLastSentVersion
   } = realtimeMockup;
   const mockupResultsRef = (0, import_react25.useRef)([]);
   const mockupSubscribersRef = (0, import_react25.useRef)(
@@ -6106,6 +6119,8 @@ function RealtimeProvider({
   const blobQueuedGenRef = (0, import_react25.useRef)(0);
   const hasBlobInFlightRef = (0, import_react25.useRef)(false);
   const pipelineResetCooldownRef = (0, import_react25.useRef)(false);
+  const dueByVersionRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const configuredMockupIdsRef = (0, import_react25.useRef)([]);
   const mockupUrlCacheRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
   const registeredBlobUrlsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
   const pendingPlacementsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
@@ -6224,7 +6239,29 @@ function RealtimeProvider({
           console.log(`[RTP] No subscribers for ${result.mockupId} \u2014 result received but nobody listening`);
         }
       });
-      if (hasBlobInFlightRef.current && !hasPendingBlobs() && !pipelineResetCooldownRef.current) {
+      let settledVersions = 0;
+      const due = dueByVersionRef.current;
+      results.forEach((result) => {
+        const v = result.requestVersion;
+        if (v === void 0) return;
+        const entry = due.get(v);
+        if (!entry) return;
+        if (entry.due <= 1) {
+          due.delete(v);
+          settledVersions += 1;
+        } else {
+          entry.due -= 1;
+        }
+      });
+      due.forEach((entry, v) => {
+        if (now - entry.at > 1e4) due.delete(v);
+      });
+      if (settledVersions > 0) {
+        if (!pipelineResetCooldownRef.current) {
+          hasBlobInFlightRef.current = false;
+          for (let i = 0; i < settledVersions; i++) pipelineSettledSubscribersRef.current.forEach((cb) => cb());
+        }
+      } else if (due.size === 0 && hasBlobInFlightRef.current && !hasPendingBlobs() && !pipelineResetCooldownRef.current) {
         hasBlobInFlightRef.current = false;
         pipelineSettledSubscribersRef.current.forEach((cb) => cb());
       }
@@ -6353,11 +6390,17 @@ function RealtimeProvider({
         canvasBlobsSentRef.current += 1;
         lastBlobSentTimeRef.current = (/* @__PURE__ */ new Date()).toLocaleTimeString();
         isPendingMockupsRef.current = true;
+        const version = getLastSentVersion();
+        if (version > 0) {
+          const configured = configuredMockupIdsRef.current.length;
+          const expected = Math.max(1, Math.min(configured || Infinity, mockupCount || Infinity));
+          dueByVersionRef.current.set(version, { due: Number.isFinite(expected) ? expected : 1, at: Date.now() });
+        }
         pendingBlobSubscribersRef.current.forEach((cb) => cb(placement));
       }
       return result;
     },
-    [sendCanvasStateRaw]
+    [sendCanvasStateRaw, getLastSentVersion]
   );
   const sendColorBlobTracked = (0, import_react25.useCallback)(
     (placement, color) => {
@@ -6377,6 +6420,8 @@ function RealtimeProvider({
       return () => {
         disconnect();
         configSentRef.current = false;
+        dueByVersionRef.current.clear();
+        setUnavailableMockups((prev) => prev.size ? /* @__PURE__ */ new Map() : prev);
         lastSentVariantIdRef.current = null;
         lastSentBgRef.current = void 0;
         lastSentSpreadCropsRef.current = "null";
@@ -6420,6 +6465,7 @@ function RealtimeProvider({
         }
       });
     }
+    configuredMockupIdsRef.current = mockupIds;
     const configPayload = useSessionGrant ? {
       productId,
       mockupIds,
@@ -6635,6 +6681,7 @@ function RealtimeProvider({
     () => {
       pipelineGenRef.current++;
       hasBlobInFlightRef.current = false;
+      dueByVersionRef.current.clear();
       pipelineResetCooldownRef.current = true;
       requestAnimationFrame(() => {
         pipelineResetCooldownRef.current = false;
@@ -6773,6 +6820,7 @@ function RealtimeProvider({
       isConnected,
       isConfigured,
       renderError,
+      unavailableMockups,
       // Read from ref - this is a snapshot at render time, NOT reactive
       // For reactive updates, use getMockupResultsImmediate() or subscribe functions
       get mockupResults() {
@@ -6818,6 +6866,7 @@ function RealtimeProvider({
       isConnected,
       isConfigured,
       renderError,
+      unavailableMockups,
       // mockupResults removed from deps - it's a getter that reads from ref
       canvasExportSize,
       mockupWidth,
@@ -8658,9 +8707,18 @@ var CanvasExportService = class _CanvasExportService {
   // Debounce state for handleStateChange
   stateChangeThrottleTimeout = null;
   stateChangeLastSendTime = 0;
-  /** How long to wait after last change before sending (quick discrete actions) */
-  static SETTLE_MS = 300;
-  /** During continuous activity (drag), force a send at least this often */
+  /** Send policy: send times of the edits whose frames have not landed yet, oldest first. */
+  inFlightSentAt = [];
+  maxInFlight = 2;
+  // CanvasExportServiceConfig.maxInFlight
+  subscribePipelineSettled = null;
+  unsubscribePipelineSettled = null;
+  /**
+   * Safety net for the one-in-flight policy: a held state never waits longer
+   * than this for the in-flight frame (a swallowed render error would
+   * otherwise hold the pipeline forever), and a change arriving while a
+   * frame has been in flight this long is sent regardless.
+   */
   static MAX_WAIT_MS = 1e3;
   // Internal state for tracking exports
   lastExportedArtwork = null;
@@ -8702,6 +8760,14 @@ var CanvasExportService = class _CanvasExportService {
     if (config.disableRealtime !== void 0) {
       this.disableRealtime = config.disableRealtime;
     }
+    if (config.maxInFlight !== void 0) {
+      this.maxInFlight = config.maxInFlight;
+    }
+    if (config.subscribePipelineSettled !== void 0 && config.subscribePipelineSettled !== this.subscribePipelineSettled) {
+      this.unsubscribePipelineSettled?.();
+      this.subscribePipelineSettled = config.subscribePipelineSettled;
+      this.unsubscribePipelineSettled = config.subscribePipelineSettled?.(this.onPipelineSettled) ?? null;
+    }
     if (config.clearImageBitmapCache !== void 0) {
       this.clearImageBitmapCache = config.clearImageBitmapCache;
     }
@@ -8905,32 +8971,62 @@ var CanvasExportService = class _CanvasExportService {
       console.log(`[CES] handleStateChange #${callId}: not ready (realtime=${this.isRealtimeEnabled} sendState=${!!this.sendCanvasState} serialize=${!!this.serializeStateForServer}) \u2014 state cached`);
       return;
     }
-    const settleMs = _CanvasExportService.SETTLE_MS;
-    const maxWaitMs = _CanvasExportService.MAX_WAIT_MS;
-    const hasSentBefore = this.stateChangeLastSendTime > 0;
-    const timeSinceLastSend = hasSentBefore ? now - this.stateChangeLastSendTime : 0;
-    const isActiveDrag = hasSentBefore && timeSinceLastSend < maxWaitMs * 3;
-    if (isActiveDrag && timeSinceLastSend >= maxWaitMs) {
-      console.log(`[CES] handleStateChange #${callId}: MAX-WAIT FLUSH (${timeSinceLastSend}ms >= ${maxWaitMs}ms)`);
-      if (this.stateChangeThrottleTimeout) {
-        clearTimeout(this.stateChangeThrottleTimeout);
-        this.stateChangeThrottleTimeout = null;
-      }
+    this.dropStalledSends(now);
+    const inFlight = this.inFlightSentAt.length;
+    if (inFlight < this.maxInFlight) {
+      console.log(`[CES] handleStateChange #${callId}: SEND now (${inFlight} in flight)`);
+      this.clearFlushTimer();
       this.sendStateNow(state);
       return;
     }
-    if (this.stateChangeThrottleTimeout) {
-      clearTimeout(this.stateChangeThrottleTimeout);
+    const oldestMs = now - this.inFlightSentAt[0];
+    console.log(`[CES] handleStateChange #${callId}: HELD (${inFlight} in flight, oldest ${oldestMs}ms) \u2014 sends when one lands`);
+    this.armFlushTimer(_CanvasExportService.MAX_WAIT_MS - oldestMs);
+  };
+  /** A send landed (every mockup of it): free its slot, release the held state if any. */
+  onPipelineSettled = () => {
+    this.inFlightSentAt.shift();
+    this.clearFlushTimer();
+    if (this.pendingCanvasState && this.isRealtimeEnabled) {
+      console.log(`[CES] pipeline settled \u2192 sending held state`);
+      this.sendStateNow(this.pendingCanvasState);
     }
-    console.log(`[CES] handleStateChange #${callId}: SETTLE scheduled ${settleMs}ms`);
+  };
+  /**
+   * The pointer was released (drag end, slider release, key up). Send the held
+   * state NOW instead of waiting for the in-flight frame: the server coalesces
+   * (latest wins), and the "let go" frame is the one the shopper waits for.
+   * A no-op when nothing is held, so it is safe on every pointerup.
+   */
+  handleInteractionEnd = () => {
+    if (!this.pendingCanvasState || !this.isRealtimeEnabled || !this.sendCanvasState || !this.serializeStateForServer) return;
+    if (this.inFlightSentAt.length < this.maxInFlight) return;
+    console.log(`[CES] interaction end \u2192 flushing held state`);
+    this.clearFlushTimer();
+    this.sendStateNow(this.pendingCanvasState);
+  };
+  armFlushTimer(ms) {
+    this.clearFlushTimer();
     this.stateChangeThrottleTimeout = setTimeout(() => {
       this.stateChangeThrottleTimeout = null;
-      console.log(`[CES] handleStateChange #${callId}: SETTLE FIRED at ${Date.now()} (${Date.now() - now}ms after call)`);
       if (this.pendingCanvasState) {
+        console.log(`[CES] flush timer \u2192 sending held state (no frame landed within ${_CanvasExportService.MAX_WAIT_MS}ms)`);
+        this.dropStalledSends(Date.now());
         this.sendStateNow(this.pendingCanvasState);
       }
-    }, settleMs);
-  };
+    }, Math.max(0, ms));
+  }
+  /** A send whose frame has not landed within MAX_WAIT_MS no longer occupies a slot. */
+  dropStalledSends(now) {
+    if (this.inFlightSentAt.length === 0) return;
+    this.inFlightSentAt = this.inFlightSentAt.filter((t) => now - t < _CanvasExportService.MAX_WAIT_MS);
+  }
+  clearFlushTimer() {
+    if (this.stateChangeThrottleTimeout) {
+      clearTimeout(this.stateChangeThrottleTimeout);
+      this.stateChangeThrottleTimeout = null;
+    }
+  }
   sendStateNow(state) {
     if (!this.sendCanvasState || !this.serializeStateForServer) {
       console.log(`[CES] sendStateNow SKIPPED: sendCanvasState=${!!this.sendCanvasState} serializeStateForServer=${!!this.serializeStateForServer}`);
@@ -8955,6 +9051,7 @@ var CanvasExportService = class _CanvasExportService {
     if (sent) {
       this.pendingCanvasState = null;
       this.jsonModeSentSuccessfully = true;
+      this.inFlightSentAt.push(Date.now());
       console.log(`[CES] JSON state sent for ${artboards.length} artboard(s)`);
     } else {
       console.log(`[CES] JSON state send FAILED for all ${artboards.length} artboard(s) \u2014 state remains pending, jsonEverSent=${this.jsonModeSentSuccessfully}`);
@@ -8976,6 +9073,7 @@ var CanvasExportService = class _CanvasExportService {
       this.stateChangeThrottleTimeout = null;
     }
     this.stateChangeLastSendTime = 0;
+    this.inFlightSentAt = [];
     this.jsonModeSentSuccessfully = false;
     this.pendingCanvasState = null;
     if (this.clearImageBitmapCache) {
@@ -9011,7 +9109,10 @@ function CanvasIsolationConfigurator({
       // Wire CES's "I sent nothing" signal to the realtime context's
       // cancellation broadcaster. Roll back any optimistic
       // notifyPendingExport that didn't end up producing a real export.
-      notifyExportSkipped: realtimeContext?.notifyPendingExportCancelled
+      notifyExportSkipped: realtimeContext?.notifyPendingExportCancelled,
+      // One-in-flight send policy: the held state goes out when the last
+      // send's frame lands.
+      subscribePipelineSettled: realtimeContext?.subscribePipelineSettled
     });
   }, [
     realtimeContext?.sendCanvasBlob,
@@ -9023,6 +9124,7 @@ function CanvasIsolationConfigurator({
     realtimeContext?.enableRealtime,
     realtimeContext?.disableRealtime,
     realtimeContext?.notifyPendingExportCancelled,
+    realtimeContext?.subscribePipelineSettled,
     placementNameProp,
     onArtworkChange,
     clearImageBitmapCache
@@ -9068,6 +9170,8 @@ function useIsolatedCanvas() {
     handleExport: canvasExportService.handleExport,
     /** Stable state change handler - pass to SnowconeCanvas onChange for JSON mode */
     handleStateChange: canvasExportService.handleStateChange,
+    /** Pointer released (drag end): flush a state held behind an in-flight frame. Safe on every pointerup. */
+    handleInteractionEnd: canvasExportService.handleInteractionEnd,
     /** Call when entering editor mode */
     onEnterEditorMode: () => canvasExportService.onEnterEditorMode(),
     /** Call when exiting editor mode */
@@ -10327,6 +10431,7 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
   const actualMockupId = (0, import_react46.useMemo)(() => {
     return (0, import_sdk10.resolveMockupId)(context, actualGvid, mockupId);
   }, [mockupId, actualGvid, context]);
+  const unavailable = actualMockupId ? realtimeContext?.unavailableMockups?.get(actualMockupId) ?? null : null;
   const artworkSrc = artwork?.src;
   const selectedArtworkSrc = designContext?.selectedArtwork?.src;
   const effectiveArtworkSrc = artworkSrc || selectedArtworkSrc;
@@ -10775,7 +10880,17 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
       className: `relative overflow-hidden ${className || ""}`,
       style,
       "data-hero-image": "true",
+      "data-mockup-unavailable": unavailable ? unavailable.code : void 0,
       children: [
+        unavailable && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          "div",
+          {
+            role: "status",
+            title: unavailable.message,
+            className: "absolute inset-0 z-20 flex items-center justify-center bg-white/80 text-sm text-neutral-700",
+            children: "Mockup unavailable"
+          }
+        ),
         renderedUrl && !imgFailed && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "img",
           {