@shopify/shop-minis-react 0.4.11 → 0.4.13

package/dist/_virtual/index4.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+var i = r();
 export {
-  e as __module
+  i as l
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index6.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
-var i = r();
+var r = {};
 export {
-  i as l
+  r as __exports
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/commerce/merchant-card.js

@@ -29,7 +29,7 @@ function B({
         backgroundColor: n.backgroundColor
       },
       className: c(
-        "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square",
+        "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate",
         a
       ),
       ...r

package/dist/components/commerce/merchant-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useCallback, useContext, useMemo} from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {Star} from 'lucide-react'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {Image} from '../atoms/image'\nimport {Touchable} from '../atoms/touchable'\n\ninterface MerchantCardContextValue {\n  // Core data\n  shop: Shop\n\n  // Derived data\n  cardTheme: ExtractedBrandTheme\n\n  // UI configuration\n  touchable: boolean\n  featuredImagesLimit: number\n\n  // Actions\n  onClick: () => void\n}\n\nconst MerchantCardContext = createContext<MerchantCardContextValue | undefined>(\n  undefined\n)\n\nfunction useMerchantCardContext() {\n  const context = useContext(MerchantCardContext)\n  if (!context) {\n    throw new Error(\n      'useMerchantCardContext must be used within a MerchantCardProvider'\n    )\n  }\n  return context\n}\n\nfunction MerchantCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, cardTheme, onClick} = useMerchantCardContext()\n\n  const content = (\n    <div\n      style={{\n        backgroundColor: cardTheme.backgroundColor,\n      }}\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',\n\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <Image\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn(className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('size-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {\n  const {shop} = useMerchantCardContext()\n  const {name, visualTheme} = shop\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const logoUrl = visualTheme?.logoImage?.url\n  const altText = `${name} logo`\n\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        logoBackgroundClassName,\n        className\n      )}\n      {...props}\n    >\n      {logoUrl ? (\n        <img\n          src={logoUrl}\n          alt={altText}\n          className=\"w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {name?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isDarkTheme = useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 flex-shrink-0 flex flex-col min-w-0',\n        textColor,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {shop} = useMerchantCardContext()\n  const {name} = shop\n  const nameContent = children ?? name\n\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn('text-sm font-medium truncate', className)}\n      {...props}\n    >\n      {nameContent}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  const {shop} = useMerchantCardContext()\n\n  const {\n    reviewAnalytics: {averageRating, reviewCount},\n  } = shop\n\n  if (!averageRating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()\n  const {visualTheme} = shop\n\n  const featuredImages = useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const displayDefaultCover = () => {\n    if (numberOfFeaturedImages > 0) {\n      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'\n      return featuredImages?.map((image, index) => (\n        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>\n          <MerchantCardImage\n            src={image.url}\n            alt={image.altText ?? undefined}\n            thumbhash={image.thumbhash ?? undefined}\n            className=\"aspect-square\"\n          />\n        </div>\n      ))\n    } else if (cardTheme.type === 'coverImage') {\n      return (\n        <MerchantCardImage\n          src={cardTheme.coverImageUrl}\n          thumbhash={cardTheme.coverImageThumbhash}\n        />\n      )\n    }\n\n    return null\n  }\n\n  return (\n    <div className=\"w-full h-full bg-muted relative flex flex-wrap overflow-hidden\">\n      {withLogo && (\n        <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n          <MerchantCardLogo />\n        </div>\n      )}\n\n      {displayDefaultCover()}\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme} = useMerchantCardContext()\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      {withLogo && (\n        <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n          {wordmarkImage ? (\n            <img\n              src={wordmarkImage.url}\n              alt={wordmarkImage.altText || shop.name}\n              className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n              data-testid=\"store-data-wordmark\"\n            />\n          ) : (\n            <MerchantCardLogo />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface MerchantCardHeaderProps {\n  isDefault?: boolean\n  withLogo?: boolean\n}\n\nfunction MerchantCardHeader({\n  isDefault,\n  withLogo,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isBranded =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div\n      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}\n      {...props}\n    >\n      {isBranded && !isDefault ? (\n        <MerchantCardBrandedHeader withLogo={withLogo} />\n      ) : (\n        <MerchantCardDefaultHeader withLogo={withLogo} />\n      )}\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  featuredImagesLimit?: number\n  children?: React.ReactNode\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  featuredImagesLimit = 4,\n  children,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {id, visualTheme} = shop\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const cardTheme = useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const contextValue = useMemo<MerchantCardContextValue>(\n    () => ({\n      shop,\n      cardTheme,\n      touchable,\n      featuredImagesLimit,\n      onClick: handleClick,\n    }),\n    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]\n  )\n\n  return (\n    <MerchantCardContext.Provider value={contextValue}>\n      {children ?? (\n        <MerchantCardContainer>\n          <MerchantCardHeader withLogo />\n          <MerchantCardInfo>\n            <MerchantCardName />\n            <MerchantCardRating />\n          </MerchantCardInfo>\n        </MerchantCardContainer>\n      )}\n    </MerchantCardContext.Provider>\n  )\n}\n\nexport {\n  MerchantCard,\n  MerchantCardContainer,\n  MerchantCardHeader,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\n"],"names":["MerchantCardContext","createContext","useMerchantCardContext","context","useContext","MerchantCardContainer","className","props","touchable","cardTheme","onClick","content","jsx","cn","Touchable","MerchantCardImage","src","alt","thumbhash","Image","MerchantCardLogo","shop","name","visualTheme","logoAverageColor","logoDominantColor","logoColor","logoBackgroundClassName","useMemo","isDarkColor","logoUrl","altText","MerchantCardInfo","textColor","MerchantCardName","children","nameContent","MerchantCardRating","averageRating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardDefaultHeader","withLogo","featuredImagesLimit","featuredImages","getFeaturedImages","numberOfFeaturedImages","heightClass","image","index","MerchantCardBrandedHeader","wordmarkImage","Fragment","MerchantCardHeader","isDefault","isBranded","MerchantCard","navigateToShop","useShopNavigation","id","handleClick","useCallback","extractBrandTheme","contextValue"],"mappings":"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"}
+{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useCallback, useContext, useMemo} from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {Star} from 'lucide-react'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {Image} from '../atoms/image'\nimport {Touchable} from '../atoms/touchable'\n\ninterface MerchantCardContextValue {\n  // Core data\n  shop: Shop\n\n  // Derived data\n  cardTheme: ExtractedBrandTheme\n\n  // UI configuration\n  touchable: boolean\n  featuredImagesLimit: number\n\n  // Actions\n  onClick: () => void\n}\n\nconst MerchantCardContext = createContext<MerchantCardContextValue | undefined>(\n  undefined\n)\n\nfunction useMerchantCardContext() {\n  const context = useContext(MerchantCardContext)\n  if (!context) {\n    throw new Error(\n      'useMerchantCardContext must be used within a MerchantCardProvider'\n    )\n  }\n  return context\n}\n\nfunction MerchantCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, cardTheme, onClick} = useMerchantCardContext()\n\n  const content = (\n    <div\n      style={{\n        backgroundColor: cardTheme.backgroundColor,\n      }}\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate',\n\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <Image\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn(className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('size-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {\n  const {shop} = useMerchantCardContext()\n  const {name, visualTheme} = shop\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const logoUrl = visualTheme?.logoImage?.url\n  const altText = `${name} logo`\n\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        logoBackgroundClassName,\n        className\n      )}\n      {...props}\n    >\n      {logoUrl ? (\n        <img\n          src={logoUrl}\n          alt={altText}\n          className=\"w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {name?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isDarkTheme = useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 flex-shrink-0 flex flex-col min-w-0',\n        textColor,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {shop} = useMerchantCardContext()\n  const {name} = shop\n  const nameContent = children ?? name\n\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn('text-sm font-medium truncate', className)}\n      {...props}\n    >\n      {nameContent}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  const {shop} = useMerchantCardContext()\n\n  const {\n    reviewAnalytics: {averageRating, reviewCount},\n  } = shop\n\n  if (!averageRating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()\n  const {visualTheme} = shop\n\n  const featuredImages = useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const displayDefaultCover = () => {\n    if (numberOfFeaturedImages > 0) {\n      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'\n      return featuredImages?.map((image, index) => (\n        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>\n          <MerchantCardImage\n            src={image.url}\n            alt={image.altText ?? undefined}\n            thumbhash={image.thumbhash ?? undefined}\n            className=\"aspect-square\"\n          />\n        </div>\n      ))\n    } else if (cardTheme.type === 'coverImage') {\n      return (\n        <MerchantCardImage\n          src={cardTheme.coverImageUrl}\n          thumbhash={cardTheme.coverImageThumbhash}\n        />\n      )\n    }\n\n    return null\n  }\n\n  return (\n    <div className=\"w-full h-full bg-muted relative flex flex-wrap overflow-hidden\">\n      {withLogo && (\n        <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n          <MerchantCardLogo />\n        </div>\n      )}\n\n      {displayDefaultCover()}\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme} = useMerchantCardContext()\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      {withLogo && (\n        <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n          {wordmarkImage ? (\n            <img\n              src={wordmarkImage.url}\n              alt={wordmarkImage.altText || shop.name}\n              className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n              data-testid=\"store-data-wordmark\"\n            />\n          ) : (\n            <MerchantCardLogo />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface MerchantCardHeaderProps {\n  isDefault?: boolean\n  withLogo?: boolean\n}\n\nfunction MerchantCardHeader({\n  isDefault,\n  withLogo,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isBranded =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div\n      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}\n      {...props}\n    >\n      {isBranded && !isDefault ? (\n        <MerchantCardBrandedHeader withLogo={withLogo} />\n      ) : (\n        <MerchantCardDefaultHeader withLogo={withLogo} />\n      )}\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  featuredImagesLimit?: number\n  children?: React.ReactNode\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  featuredImagesLimit = 4,\n  children,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {id, visualTheme} = shop\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const cardTheme = useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const contextValue = useMemo<MerchantCardContextValue>(\n    () => ({\n      shop,\n      cardTheme,\n      touchable,\n      featuredImagesLimit,\n      onClick: handleClick,\n    }),\n    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]\n  )\n\n  return (\n    <MerchantCardContext.Provider value={contextValue}>\n      {children ?? (\n        <MerchantCardContainer>\n          <MerchantCardHeader withLogo />\n          <MerchantCardInfo>\n            <MerchantCardName />\n            <MerchantCardRating />\n          </MerchantCardInfo>\n        </MerchantCardContainer>\n      )}\n    </MerchantCardContext.Provider>\n  )\n}\n\nexport {\n  MerchantCard,\n  MerchantCardContainer,\n  MerchantCardHeader,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\n"],"names":["MerchantCardContext","createContext","useMerchantCardContext","context","useContext","MerchantCardContainer","className","props","touchable","cardTheme","onClick","content","jsx","cn","Touchable","MerchantCardImage","src","alt","thumbhash","Image","MerchantCardLogo","shop","name","visualTheme","logoAverageColor","logoDominantColor","logoColor","logoBackgroundClassName","useMemo","isDarkColor","logoUrl","altText","MerchantCardInfo","textColor","MerchantCardName","children","nameContent","MerchantCardRating","averageRating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardDefaultHeader","withLogo","featuredImagesLimit","featuredImages","getFeaturedImages","numberOfFeaturedImages","heightClass","image","index","MerchantCardBrandedHeader","wordmarkImage","Fragment","MerchantCardHeader","isDefault","isBranded","MerchantCard","navigateToShop","useShopNavigation","id","handleClick","useCallback","extractBrandTheme","contextValue"],"mappings":"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"}

package/dist/components/commerce/product-card.js

@@ -28,7 +28,7 @@ function q({
     "div",
     {
       className: d(
-        "relative size-full overflow-hidden rounded-xl border-0",
+        "relative size-full overflow-hidden rounded-xl border-0 isolate",
         t
       ),
       ...e

package/dist/components/commerce/product-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  favoriteButtonDisabled: boolean\n  reviewsDisabled: boolean\n\n  // State\n  isFavorited: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative size-full overflow-hidden rounded-xl border-0',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          objectFit=\"cover\"\n          className={cn('size-full', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, favoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (favoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-testid=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardReviewStars({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {product, reviewsDisabled} = useProductCardContext()\n  const reviewAnalytics = product.reviewAnalytics\n\n  if (reviewsDisabled || !reviewAnalytics?.averageRating) {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-review-stars\"\n      className={cn('', className)}\n      {...props}\n    >\n      <ProductReviewStars\n        averageRating={reviewAnalytics.averageRating}\n        reviewCount={reviewAnalytics.reviewCount}\n      />\n    </div>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n  /** Whether review stars are disabled */\n  reviewsDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n  reviewsDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardReviewStars />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardReviewStars,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","favoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardReviewStars","reviewsDisabled","reviewAnalytics","ProductReviewStars","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":"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"}
+{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  favoriteButtonDisabled: boolean\n  reviewsDisabled: boolean\n\n  // State\n  isFavorited: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative size-full overflow-hidden rounded-xl border-0 isolate',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          objectFit=\"cover\"\n          className={cn('size-full', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, favoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (favoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-testid=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardReviewStars({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {product, reviewsDisabled} = useProductCardContext()\n  const reviewAnalytics = product.reviewAnalytics\n\n  if (reviewsDisabled || !reviewAnalytics?.averageRating) {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-review-stars\"\n      className={cn('', className)}\n      {...props}\n    >\n      <ProductReviewStars\n        averageRating={reviewAnalytics.averageRating}\n        reviewCount={reviewAnalytics.reviewCount}\n      />\n    </div>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n  /** Whether review stars are disabled */\n  reviewsDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n  reviewsDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardReviewStars />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardReviewStars,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","favoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardReviewStars","reviewsDisabled","reviewAnalytics","ProductReviewStars","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":"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"}

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index5.js";
+import { __module as q } from "../../../../../../../../_virtual/index4.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index6.js";
+import { l as Q } from "../../../../../../../_virtual/index5.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index4.js";
+import { __exports as i } from "../../../../../../_virtual/index6.js";
 var c;
 function d() {
   if (c) return i;

package/eslint/config.cjs

@@ -38,7 +38,9 @@ module.exports = {
     'react/no-danger': 'error',
 
     // Shop Minis custom rules
+    'shop-minis/no-dynamic-asset-paths': 'warn',
     'shop-minis/no-env-without-fallback': 'error',
+    'shop-minis/no-hardcoded-asset-paths': 'error',
     'shop-minis/no-internal-imports': 'error',
     'shop-minis/no-secrets': ['error'],
     'shop-minis/prefer-sdk-components': 'warn',

package/eslint/index.cjs

@@ -4,7 +4,9 @@
  * @fileoverview Custom ESLint rules for Shop Minis React SDK
  */
 
+const noDynamicAssetPaths = require('./rules/no-dynamic-asset-paths.cjs')
 const noEnvWithoutFallback = require('./rules/no-env-without-fallback.cjs')
+const noHardcodedAssetPaths = require('./rules/no-hardcoded-asset-paths.cjs')
 const noInternalImports = require('./rules/no-internal-imports.cjs')
 const noSecrets = require('./rules/no-secrets.cjs')
 const preferSdkComponents = require('./rules/prefer-sdk-components.cjs')
@@ -13,7 +15,9 @@ const validateManifest = require('./rules/validate-manifest.cjs')
 
 module.exports = {
   rules: {
+    'no-dynamic-asset-paths': noDynamicAssetPaths,
     'no-env-without-fallback': noEnvWithoutFallback,
+    'no-hardcoded-asset-paths': noHardcodedAssetPaths,
     'no-internal-imports': noInternalImports,
     'no-secrets': noSecrets,
     'prefer-sdk-components': preferSdkComponents,

package/eslint/rules/asset-path-patterns.cjs

@@ -0,0 +1,30 @@
+/**
+ * Shared patterns for asset path detection rules
+ * @fileoverview Regex patterns for detecting asset file extensions and path types
+ */
+
+// Asset file extensions to detect
+const ASSET_EXTENSIONS = /\.(png|jpe?g|gif|svg|webp|ico|bmp|avif)$/i
+
+// Patterns that indicate a local path (not a remote URL)
+const LOCAL_PATH_PATTERNS = [
+  /^\.?\//, // Starts with / or ./
+  /^\.\.\//, // Starts with ../
+  /\/src\//i, // Contains /src/
+  /\/assets\//i, // Contains /assets/
+  /\/images?\//i, // Contains /image/ or /images/
+  /\/public\//i, // Contains /public/
+]
+
+// Patterns that indicate a remote URL or data URL (should be allowed)
+const REMOTE_PATTERNS = [
+  /^https?:\/\//i, // http:// or https://
+  /^data:/i, // data: URLs
+  /^blob:/i, // blob: URLs
+]
+
+module.exports = {
+  ASSET_EXTENSIONS,
+  LOCAL_PATH_PATTERNS,
+  REMOTE_PATTERNS,
+}

package/eslint/rules/no-dynamic-asset-paths.cjs

@@ -0,0 +1,78 @@
+/**
+ * ESLint rule to warn about dynamic asset paths in template literals
+ * @fileoverview Warns about template literals that may construct asset paths dynamically
+ */
+
+const {
+  ASSET_EXTENSIONS,
+  LOCAL_PATH_PATTERNS,
+  REMOTE_PATTERNS,
+  // eslint-disable-next-line import/extensions
+} = require('./asset-path-patterns.cjs')
+
+/**
+ * Check if a template literal might contain an asset path but we can't be certain
+ * Returns true only for UNCERTAIN cases (ends with asset extension but doesn't
+ * start with a known local path pattern). Definite cases are handled by
+ * no-hardcoded-asset-paths rule.
+ * @param {object} node - The TemplateLiteral AST node
+ * @returns {boolean}
+ */
+function isUncertainAssetTemplateLiteral(node) {
+  const quasis = node.quasis
+  if (quasis.length === 0) return false
+
+  // Get the first static part to check if it starts with a local path
+  const firstPart = quasis[0].value.raw || quasis[0].value.cooked || ''
+
+  // Get the last static part to check if it ends with an asset extension
+  const lastPart =
+    quasis[quasis.length - 1].value.raw ||
+    quasis[quasis.length - 1].value.cooked ||
+    ''
+
+  // Must end with an asset extension
+  if (!ASSET_EXTENSIONS.test(lastPart)) return false
+
+  // Check if it starts with a remote URL (only need to check first static part)
+  if (REMOTE_PATTERNS.some(pattern => pattern.test(firstPart))) return false
+
+  // If it starts with a local path pattern, it's a DEFINITE error (handled by other rule)
+  // We only want to flag UNCERTAIN cases here
+  if (LOCAL_PATH_PATTERNS.some(pattern => pattern.test(firstPart))) return false
+
+  // Ends with asset extension but doesn't start with known local path = uncertain
+  return true
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warn about template literals that may construct asset paths dynamically',
+      category: 'Best Practices',
+      recommended: true,
+      url: 'https://vite.dev/guide/assets',
+    },
+    messages: {
+      noDynamicAssetPath:
+        'Template literal may contain a hardcoded asset path that will not work in production. Import assets instead of constructing paths dynamically. See: https://vite.dev/guide/assets',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      TemplateLiteral(node) {
+        // Only flag uncertain cases (definite cases handled by no-hardcoded-asset-paths)
+        if (isUncertainAssetTemplateLiteral(node)) {
+          context.report({
+            node,
+            messageId: 'noDynamicAssetPath',
+          })
+        }
+      },
+    }
+  },
+}

package/eslint/rules/no-hardcoded-asset-paths.cjs

@@ -0,0 +1,124 @@
+/**
+ * ESLint rule to detect hardcoded local asset paths that won't work in production
+ * @fileoverview Prevents using un-imported hardcoded asset paths that work in Vite dev but fail in production
+ */
+
+const {
+  ASSET_EXTENSIONS,
+  LOCAL_PATH_PATTERNS,
+  REMOTE_PATTERNS,
+  // eslint-disable-next-line import/extensions
+} = require('./asset-path-patterns.cjs')
+
+/**
+ * Check if a string looks like a local asset path
+ * @param {string} value - The string to check
+ * @returns {boolean}
+ */
+function isLocalAssetPath(value) {
+  if (typeof value !== 'string') return false
+
+  // Must have an asset extension
+  if (!ASSET_EXTENSIONS.test(value)) return false
+
+  // Skip remote URLs and data URLs
+  if (REMOTE_PATTERNS.some(pattern => pattern.test(value))) return false
+
+  // Check if it looks like a local path
+  return LOCAL_PATH_PATTERNS.some(pattern => pattern.test(value))
+}
+
+/**
+ * Check if a template literal is definitely a local asset path
+ * Returns true only if we can determine with certainty it's a local path
+ * (starts with a local path pattern AND ends with an asset extension)
+ * @param {object} node - The TemplateLiteral AST node
+ * @returns {boolean}
+ */
+function isLocalAssetTemplateLiteral(node) {
+  const quasis = node.quasis
+  if (quasis.length === 0) return false
+
+  // Get the first static part to check if it starts with a local path
+  const firstPart = quasis[0].value.raw || quasis[0].value.cooked || ''
+
+  // Get the last static part to check if it ends with an asset extension
+  const lastPart =
+    quasis[quasis.length - 1].value.raw ||
+    quasis[quasis.length - 1].value.cooked ||
+    ''
+
+  // Must end with an asset extension
+  if (!ASSET_EXTENSIONS.test(lastPart)) return false
+
+  // Check if it starts with a remote URL (only need to check first static part)
+  if (REMOTE_PATTERNS.some(pattern => pattern.test(firstPart))) return false
+
+  // Must start with a local path pattern (this makes it a definite error)
+  return LOCAL_PATH_PATTERNS.some(pattern => pattern.test(firstPart))
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow hardcoded local asset paths that work in dev but fail in production',
+      category: 'Possible Errors',
+      recommended: true,
+      url: 'https://vite.dev/guide/assets',
+    },
+    messages: {
+      noHardcodedAssetPath:
+        'Hardcoded asset path "{{path}}" will not work in production. Import the asset instead: `import asset from "{{path}}"` then use the imported variable. See: https://vite.dev/guide/assets',
+      noHardcodedAssetPathTemplate:
+        'Template literal contains a hardcoded local asset path that will not work in production. Import assets instead of constructing paths. See: https://vite.dev/guide/assets',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      Literal(node) {
+        // Only check string literals
+        if (typeof node.value !== 'string') return
+
+        // Skip import/export declarations - those are the CORRECT way to use assets
+        const parent = node.parent
+        if (
+          parent &&
+          (parent.type === 'ImportDeclaration' ||
+            parent.type === 'ExportNamedDeclaration' ||
+            parent.type === 'ExportAllDeclaration' ||
+            (parent.type === 'CallExpression' &&
+              parent.callee &&
+              (parent.callee.name === 'require' ||
+                parent.callee.type === 'Import')))
+        ) {
+          return
+        }
+
+        if (isLocalAssetPath(node.value)) {
+          context.report({
+            node,
+            messageId: 'noHardcodedAssetPath',
+            data: {
+              path: node.value,
+            },
+          })
+        }
+      },
+
+      TemplateLiteral(node) {
+        // Only flag template literals that are DEFINITELY local asset paths
+        // (start with local path pattern AND end with asset extension)
+        if (isLocalAssetTemplateLiteral(node)) {
+          context.report({
+            node,
+            messageId: 'noHardcodedAssetPathTemplate',
+          })
+        }
+      },
+    }
+  },
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/commerce/merchant-card.tsx

@@ -58,7 +58,7 @@ function MerchantCardContainer({
         backgroundColor: cardTheme.backgroundColor,
       }}
       className={cn(
-        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',
+        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate',
 
         className
       )}

package/src/components/commerce/product-card.tsx

@@ -61,7 +61,7 @@ function ProductCardContainer({
   const content = (
     <div
       className={cn(
-        'relative size-full overflow-hidden rounded-xl border-0',
+        'relative size-full overflow-hidden rounded-xl border-0 isolate',
         className
       )}
       {...props}