@snowcone-app/ui 0.4.8 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",
@@ -103,7 +103,7 @@
     "react-instantsearch": "^7.15.5",
     "react-zoom-pan-pinch": "^3.6.4",
     "tailwind-merge": "^3.0.0",
-    "@snowcone-app/sdk": "0.20.1"
+    "@snowcone-app/sdk": "0.20.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

package/src/composed/HeroProductImage.tsx

@@ -156,6 +156,14 @@ export interface HeroProductImageProps {
   shimmerDelay?: number;
   shimmerFadeDuration?: number;
   darkShimmerFadeInDuration?: number;
+
+  /** Label shown when no artwork is applied. Host apps pass a localized
+   *  string (this package stays i18n-framework-free). */
+  emptyText?: string;
+  /** Label shown when mockup generation fails. */
+  errorText?: string;
+  /** Label shown when the image fails to load with no stale image to keep. */
+  unavailableText?: string;
 }
 
 /**
@@ -201,6 +209,9 @@ export const HeroProductImage = memo(function HeroProductImage({
   shimmerDelay = 200,
   shimmerFadeDuration = 500,
   darkShimmerFadeInDuration = 300,
+  emptyText = "No artwork",
+  errorText = "Error loading",
+  unavailableText = "Preview unavailable",
 }: HeroProductImageProps) {
   // Context
   const context = useProductOptional();
@@ -904,14 +915,15 @@ export const HeroProductImage = memo(function HeroProductImage({
   // instead of the browser's native broken-image glyph. Reset on every new
   // URL attempt (below) so a fresh render can recover.
   const [imgFailed, setImgFailed] = useState(false);
-  // One-shot cache-bust retry. A reload / Safari bfcache restore can serve a
-  // mockup from WebKit's disk cache as a CORS-less entry (cached by an earlier
-  // non-crossorigin request), which then fails the crossorigin <img> here and
-  // paints a broken image. On the FIRST load failure for a URL we retry once
-  // with a `_cb` query param — a fresh URL can't hit the poisoned cache entry.
-  // This fires ONLY on failure, so the cached happy path (and realtime, which
-  // already cache-busts via `_t`) is untouched; only a genuinely-broken image
-  // pays the re-fetch. A second failure falls through to the clean fallback.
+  // One-shot cache-recovery retry. A reload / Safari bfcache restore can serve
+  // a mockup from WebKit's disk cache as a CORS-less entry (cached by an
+  // earlier non-crossorigin request), which then fails the crossorigin <img>
+  // here and paints a broken image. On the FIRST load failure for a URL we
+  // re-prime the cache via `fetch(url, {cache:"reload"})` and remount the
+  // <img> (key bump) on the SAME canonical URL — never a mutated one, since
+  // the public resolver rejects unknown params and signed URLs fail signature
+  // verification with extras. Fires ONLY on failure, so the cached happy path
+  // is untouched; a second failure falls through to the clean fallback.
   const [retryNonce, setRetryNonce] = useState(0);
   const retriedUrlRef = useRef<string | null>(null);
   const prevDisplayUrlRef = useRef<string | null>(displayUrl);
@@ -987,7 +999,7 @@ export const HeroProductImage = memo(function HeroProductImage({
               d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
             />
           </svg>
-          <p className="text-xs">No artwork</p>
+          <p className="text-xs">{emptyText}</p>
         </div>
       </div>
     );
@@ -1002,7 +1014,7 @@ export const HeroProductImage = memo(function HeroProductImage({
         style={style}
       >
         <div className="text-red-600 text-center p-4">
-          <p className="text-xs">Error loading</p>
+          <p className="text-xs">{errorText}</p>
         </div>
       </div>
     );
@@ -1023,19 +1035,18 @@ export const HeroProductImage = memo(function HeroProductImage({
           covered NEW with OLD, then OLD faded back to NEW). */}
       {renderedUrl && !imgFailed && (
         <img
+          // Remounts on retry (key bump) so the browser issues a fresh request
+          // for the SAME canonical URL after the cache re-prime below. The URL
+          // itself is never mutated: the public resolver 400s on any param
+          // outside its grammar, and a signed URL fails signature verification
+          // with extra params — the old `_cb` cache-bust retry hit both
+          // (QA finding #0011).
+          key={retryNonce}
           alt={`Product mockup${placement ? ` - ${placement}` : ""}`}
           crossOrigin="anonymous"
           className="absolute inset-0 w-full h-full object-cover"
           draggable={draggable}
-          // On a retry, append a cache-bust param so the request can't be
-          // served from the poisoned (CORS-less) disk-cache entry. The base
-          // `renderedUrl` is what we hand back to `onUrlGenerated` — never the
-          // busted variant — so caches/state stay keyed on the canonical URL.
-          src={
-            retriedUrlRef.current === renderedUrl
-              ? `${renderedUrl}${renderedUrl.includes("?") ? "&" : "?"}_cb=${retryNonce}`
-              : renderedUrl
-          }
+          src={renderedUrl}
           loading="eager"
           // eslint-disable-next-line react/no-unknown-property
           fetchPriority="high"
@@ -1050,13 +1061,16 @@ export const HeroProductImage = memo(function HeroProductImage({
             onUrlGeneratedRef.current?.(renderedUrl);
           }}
           onError={() => {
-            // First failure for this URL → retry once with a cache-bust before
-            // giving up (recovers a WebKit disk-cache entry cached without CORS
-            // headers). Fires only on failure, so the cached happy path and the
-            // realtime `_t` flow are untouched.
+            // First failure for this URL → retry once before giving up
+            // (recovers a WebKit disk-cache entry cached without CORS
+            // headers). `cache:"reload"` bypasses the poisoned entry and
+            // stores a fresh CORS-tagged copy; the key-bumped <img> remount
+            // then loads that copy under the same canonical URL.
             if (renderedUrl && retriedUrlRef.current !== renderedUrl) {
               retriedUrlRef.current = renderedUrl;
-              setRetryNonce((n) => n + 1);
+              void fetch(renderedUrl, { mode: "cors", cache: "reload", credentials: "omit" })
+                .catch(() => {})
+                .then(() => setRetryNonce((n) => n + 1));
               return;
             }
             // Retry also failed → genuine failure. Unmount the broken <img> so
@@ -1105,7 +1119,7 @@ export const HeroProductImage = memo(function HeroProductImage({
           beats a blank one — so we only show this when there's nothing else. */}
       {imgFailed && !prevUrl && (
         <div className="absolute inset-0 flex items-center justify-center bg-muted">
-          <p className="text-muted-foreground text-xs">Preview unavailable</p>
+          <p className="text-muted-foreground text-xs">{unavailableText}</p>
         </div>
       )}
 

package/src/composed/carousels/MobileProductCarousel.tsx

@@ -161,6 +161,21 @@ export interface MobileProductCarouselProps {
    * provider's mockup cache themselves.
    */
   onMockupUrlGenerated?: (mockupId: string, url: string) => void;
+
+  /**
+   * Per-image action overlay, floated top-right of the slide (e.g. the
+   * draft preview's Pass button). Return null for images without actions.
+   * Taps on the action stop propagating so they don't trigger the
+   * carousel's tap-to-zoom or swipe handling.
+   */
+  renderImageAction?: (image: CarouselImage, index: number) => React.ReactNode;
+
+  /** Passed through to HeroProductImage — label when mockup generation
+   *  fails. Host apps pass a localized string. */
+  errorText?: string;
+  /** Passed through to HeroProductImage — label when the image fails to
+   *  load with no stale image to keep. */
+  unavailableText?: string;
 }
 
 /**
@@ -183,6 +198,9 @@ export const MobileProductCarousel = memo(function MobileProductCarousel({
   stickyHeroContext,
   mockupWidth,
   onMockupUrlGenerated,
+  renderImageAction,
+  errorText,
+  unavailableText,
 }: MobileProductCarouselProps) {
   const [activeIndex, setActiveIndex] = useState(currentIndex);
   const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(
@@ -896,6 +914,8 @@ export const MobileProductCarousel = memo(function MobileProductCarousel({
                         ? (url) => handleUrlGenerated(image.mockupId!, url)
                         : undefined
                     }
+                    errorText={errorText}
+                    unavailableText={unavailableText}
                     className="w-full h-full object-cover cursor-pointer pointer-events-none"
                   />
                 ) : image.isRealMockup && !currentArtwork ? (
@@ -907,6 +927,24 @@ export const MobileProductCarousel = memo(function MobileProductCarousel({
                     className="w-full h-full object-cover cursor-pointer pointer-events-none"
                   />
                 )}
+                {/* Per-image action (e.g. draft preview Pass). Stops
+                    propagation so a tap doesn't open the zoom viewer or
+                    read as a swipe. */}
+                {isWithinDecodeWindow &&
+                  (() => {
+                    const action = renderImageAction?.(image, index);
+                    return action ? (
+                      <div
+                        className="absolute top-3 right-3 z-10"
+                        onClick={(e) => e.stopPropagation()}
+                        onTouchStart={(e) => e.stopPropagation()}
+                        onTouchEnd={(e) => e.stopPropagation()}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      >
+                        {action}
+                      </div>
+                    ) : null;
+                  })()}
               </div>
             );
           })}