@snowcone-app/ui 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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.24.2"
+    "@snowcone-app/sdk": "0.24.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

package/src/composed/ArtworkCustomizer.tsx

@@ -65,7 +65,7 @@ export 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 }
@@ -79,7 +79,7 @@ export 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/src/composed/ColorPicker.tsx

@@ -43,7 +43,7 @@ const QUICK_COLORS = [
  * ```tsx
  * import { Product, ColorPicker } from '@snowcone-app/ui';
  *
- * <Product productId="AR2P3G">
+ * <Product productId="CAXHQC">
  *   <ColorPicker placement="Crown" defaultColor="#ff0000" />
  * </Product>
  * ```

package/src/composed/CurrentSelectionDisplay.tsx

@@ -36,7 +36,7 @@ export interface CurrentSelectionDisplayProps {
  * ```tsx
  * import { Product, ProductOptions, CurrentSelectionDisplay } from '@yourorg/ui-react';
  *
- * <Product productId="BEEB77">
+ * <Product productId="BC43BE">
  *   <ProductOptions />
  *   <CurrentSelectionDisplay />
  * </Product>

package/src/composed/HeroProductImage.tsx

@@ -24,6 +24,7 @@ import {
   getMockupUrl,
   type Design,
   resolveVariantId,
+  resolvePreviewVariantId,
   resolveMockupId,
 } from "@snowcone-app/sdk";
 
@@ -232,13 +233,18 @@ export const HeroProductImage = memo(function HeroProductImage({
   const actualProductId = product?.id || productId || context?.product?.id;
 
   // Resolve variant and mockup IDs - MOVED UP for initial URL computation
-  const actualGvid = useMemo(() => {
+  const selectedGvid = useMemo(() => {
     return resolveVariantId(context, gvid, variantId);
   }, [gvid, variantId, context?.selection, context?.combinations]);
 
   const actualMockupId = useMemo(() => {
-    return resolveMockupId(context, actualGvid, mockupId);
-  }, [mockupId, actualGvid, context]);
+    return resolveMockupId(context, selectedGvid, mockupId);
+  }, [mockupId, selectedGvid, context]);
+
+  // What this image renders: a selected size with no scene previews a listed one. A variant the caller named is theirs.
+  const actualGvid = useMemo(() => {
+    return gvid || variantId ? selectedGvid : resolvePreviewVariantId(context, selectedGvid, actualMockupId);
+  }, [gvid, variantId, selectedGvid, actualMockupId, context]);
 
   // The server refused THIS mockup for the session (its scene failed render
   // parity — E_MOCKUP_NOT_BLESSED). Shown as unavailable on top of whatever

package/src/composed/ProductGallery.tsx

@@ -23,7 +23,7 @@ export interface ProductGalleryProps extends UseProductGalleryOptions {
  * 2. List all products: Pass empty array or omit productIds
  *
  * @example Specific products
- * <ProductGallery productIds={["BEEB77", "AR2P3G", "KMYKUK"]}>
+ * <ProductGallery productIds={["BC43BE", "CAXHQC", "XTNA6J"]}>
  *   {(products, loading, error) => (
  *     <div className="grid grid-cols-3 gap-4">
  *       {products.map(product => (

package/src/hooks/useProductGallery.ts

@@ -49,7 +49,7 @@ export interface UseProductGalleryReturn {
  * ```tsx
  * // Fetch specific products
  * const { products, loading, error, refetch } = useProductGallery(
- *   ['BEEB77', 'AR2P3G'],
+ *   ['BC43BE', 'CAXHQC'],
  *   { endpoint: 'http://localhost:3000', mode: 'mock' }
  * );
  *

package/src/patterns/RealtimeProvider.tsx

@@ -37,7 +37,7 @@ import React, {
   useMemo,
 } from "react";
 import { useRealtimeMockup } from "@snowcone-app/sdk/react";
-import { resolveVariantId as resolveVariantIdUtil } from "@snowcone-app/sdk";
+import { resolvePreviewVariantId, resolveVariantId as resolveVariantIdUtil } from "@snowcone-app/sdk";
 import type {
   RealtimeRenderError,
   MockupResult as SdkMockupResult,
@@ -987,10 +987,9 @@ export function RealtimeProvider({
     const placements = product.placements || [];
 
     // Resolve variant ID based on current selection
-    const variantId = resolveVariantIdUtil(
+    const variantId = resolvePreviewVariantId(
       productContext,
-      undefined,
-      undefined
+      resolveVariantIdUtil(productContext, undefined, undefined)
     );
 
     // Check if we need to send config:

package/src/patterns/__tests__/RealtimeProvider.cropDelivery.test.tsx

@@ -64,6 +64,7 @@ vi.mock("@snowcone-app/sdk/react", () => ({
 
 vi.mock("@snowcone-app/sdk", () => ({
   resolveVariantId: () => "gv1",
+  resolvePreviewVariantId: (_context: unknown, variantId: string) => variantId,
 }));
 
 vi.mock("../Product", () => {