npm - @anker-in/headless-ui - Versions diffs - 1.1.99 → 1.2.1 - Mend

@anker-in/headless-ui 1.1.99 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/esm/biz-components/SceneShelfV2/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SceneShelfV2/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n  | 'root'\n  | 'media'\n  | 'mediaOverlay'\n  | 'mediaQuote'\n  | 'mediaPlayButton'\n  | 'products'\n  | 'productsTitle'\n  | 'productGrid'\n  | 'productCardSlideWrapper'\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTags'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceWrapper'\n  | 'productCardCurrentPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n  label: string\n  variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n  /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n  productKey: string\n  /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n  title: string\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 */\n  imageUrl: string\n  imageAlt: string\n  /**\n   * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n   */\n  href?: string\n  /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags?: SceneShelfV2Tag[]\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut?: boolean\n  /**\n   * sku\n   */\n  sku?: string\n  /**\n   * \u53D8\u4F53id\n   */\n  variantId?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n  /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n  viewMoreLabel?: string\n  /** \u6536\u8D77\u6807\u7B7E */\n  viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n  theme?: 'light' | 'dark'\n  isShowTag?: boolean\n  sceneImage: ResponsiveMedia\n  /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n  productsTitle?: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: SceneShelfV2Product[]\n  /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n  viewMoreLimit?: number\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  data: SceneShelfV2Data\n  /**\n   * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n   * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n   */\n  onPlayClick?: (isPlaying: boolean) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n  product: SceneShelfV2Product\n  isShowTag: boolean\n  onImageClick?: (product: SceneShelfV2Product) => void\n  onLearnMore?: (link: string) => void | Promise<void>\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n  className?: string\n  theme?: Theme\n  index?: number\n}\n\nconst ProductCardInner = React.memo(\n  ({\n    product,\n    isShowTag = true,\n    onImageClick,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    secondaryButtonText,\n    secondaryButtonFun,\n    primaryButtonText,\n    primaryButtonFun,\n    classNames,\n    className,\n    theme,\n    index,\n  }: ProductCardInnerProps) => {\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const pageGroup = trackingData?.pageGroup\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product?.href ?? '')\n              break\n            default:\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [onLearnMore, onShopNow, onAddToCart, product]\n    )\n\n    const handlePrimary = React.useCallback(\n      () => handleButtonClick(primaryButtonFun, 'primary'),\n      [handleButtonClick, primaryButtonFun]\n    )\n    const handleSecondary = React.useCallback(\n      () => handleButtonClick(secondaryButtonFun, 'secondary'),\n      [handleButtonClick, secondaryButtonFun]\n    )\n\n    const handleImageClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n        if (!product.href && onImageClick) {\n          e.preventDefault()\n        }\n        onImageClick?.(product)\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'select_item',\n          item_list_name: 'Scene_Shelf_2_Products',\n          page_group: pageGroup,\n          items: [\n            {\n              item_id: product.sku,\n              item_name: product.custom_name || product.title,\n              item_variant: product.variantId,\n              price: product.currentPrice,\n              index: index,\n            },\n          ],\n        })\n      },\n      [index, onImageClick, pageGroup, product]\n    )\n\n    return (\n      <div\n        className={cn(\n          'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n          className,\n          classNames?.productCard,\n          {\n            'bg-container-secondary-0': theme === 'dark',\n          }\n        )}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247 */}\n        {product.href ? (\n          <a\n            href={getLocalizedPath(\n              trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n              locale\n            )}\n            onClick={handleImageClick}\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            aria-label={`View ${product.title}`}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </a>\n        ) : (\n          <div\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n              onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            onClick={onImageClick ? handleImageClick : undefined}\n            role={onImageClick ? 'button' : undefined}\n            tabIndex={onImageClick ? 0 : undefined}\n            aria-label={onImageClick ? `View ${product.title}` : undefined}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </div>\n        )}\n\n        {/* \u4EA7\u54C1\u4FE1\u606F */}\n        <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n          {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n          <div className=\"flex flex-col gap-2\">\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n                classNames?.productCardTags\n              )}\n            >\n              {isShowTag &&\n                product?.tags?.map((tag, idx) => (\n                  <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n                    {tag.label}\n                  </Badge>\n                ))}\n            </div>\n\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn(\n                'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 tablet:text-[20px] line-clamp-3 pr-[16%] text-[16px]',\n                classNames?.productCardTitle\n              )}\n            >\n              {product.custom_name || product.title}\n            </Heading>\n\n            {(product.custom_description || product.description) && (\n              <Text\n                as=\"p\"\n                size={1}\n                className={cn(\n                  'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n                  classNames?.productCardDescription\n                )}\n              >\n                {product.custom_description || product.description}\n              </Text>\n            )}\n          </div>\n\n          {/* \u4EF7\u683C + \u6309\u94AE */}\n          <div className=\"flex flex-col gap-2\">\n            {/* \u4EF7\u683C */}\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n                classNames?.productCardPriceWrapper\n              )}\n            >\n              <Heading\n                as=\"h6\"\n                size={2}\n                className={cn(\n                  'scene-shelf-v2-product-card-current-price text-info-primary',\n                  classNames?.productCardCurrentPrice\n                )}\n              >\n                {product.currentPrice}\n              </Heading>\n              {product.originalPrice && (\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn(\n                    'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n                    classNames?.productCardOriginalPrice\n                  )}\n                >\n                  {product.originalPrice}\n                </Heading>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u7EC4 */}\n            {(secondaryButtonText || primaryButtonText) && (\n              <div\n                className={cn(\n                  'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n                  classNames?.productCardButtons\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handleSecondary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handlePrimary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n  (\n    { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n    ref\n  ) => {\n    const {\n      theme = 'light',\n      sceneImage,\n      productsTitle,\n      products,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      viewMoreLimit = 2,\n      copy,\n    } = data\n    const videoRef = React.useRef<HTMLVideoElement>(null)\n    const mediaRef = React.useRef<HTMLDivElement>(null)\n    const productWrapperRef = React.useRef<HTMLDivElement>(null)\n    const [isPlaying, setIsPlaying] = React.useState(false)\n    const [isExpanded, setIsExpanded] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    useExposure(mediaRef, {\n      componentType: 'image',\n      componentName: 'scene_shelf_banner',\n    })\n\n    useViewItemList(productWrapperRef, {\n      componentType: 'video',\n      componentName: 'scene_shelf_banner',\n      itemListName: 'Scene_Shelf_2_Products',\n      items: products.map((item, index) => ({\n        item_id: item.sku ?? '',\n        item_name: item.title,\n        item_variant: item.variantId ?? '',\n        price: item.currentPrice,\n        index: index,\n      })),\n      tabName: '',\n    })\n\n    const visibleLimit = useGridRowCount({\n      rows: viewMoreLimit ?? 0,\n      mobileCols: 2,\n    })\n\n    const hasVideo = React.useMemo(\n      () =>\n        [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n          media => media?.mimeType === 'video/mp4'\n        ),\n      [sceneImage]\n    )\n\n    const handlePlayButtonClick = React.useCallback(() => {\n      const video = videoRef.current\n      if (video) {\n        if (video.paused) {\n          video.play()\n          setIsPlaying(true)\n          onPlayClick?.(true)\n        } else {\n          video.pause()\n          setIsPlaying(false)\n          onPlayClick?.(false)\n        }\n      } else {\n        onPlayClick?.(true)\n      }\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingData?.pageGroup,\n          component_type: 'video',\n          component_name: 'scene_shelf_banner',\n          position: 1,\n          creative_id: sceneImage?.pc?.id,\n        },\n      })\n    }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n    // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n    React.useEffect(() => {\n      const video = videoRef.current\n      if (!video || !hasVideo) return\n\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n              video.play().catch(error => {\n                // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n                console.warn('Video autoplay failed:', error)\n              })\n            } else {\n              // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n              video.pause()\n            }\n          })\n        },\n        {\n          threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n        }\n      )\n\n      observer.observe(video)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [])\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'scene-shelf-v2-root w-full overflow-hidden',\n          { 'aiui-dark': theme === 'dark' },\n          className,\n          classNames?.root\n        )}\n      >\n        {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n        <div\n          className={cn(\n            'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n            classNames?.media\n          )}\n          ref={mediaRef}\n        >\n          <Media\n            pcImage={sceneImage?.pc}\n            desktopImage={sceneImage?.desktop}\n            laptopImage={sceneImage?.laptop}\n            padImage={sceneImage?.pad}\n            mobileImage={sceneImage?.mobile}\n            className=\"size-full\"\n            videoClassName=\"absolute inset-0 size-full object-cover\"\n            videoRef={videoRef}\n            onVideoPlay={() => setIsPlaying(true)}\n            onVideoPause={() => setIsPlaying(false)}\n            onVideoEnded={() => setIsPlaying(false)}\n          />\n          {/* \u6E10\u53D8\u906E\u7F69 */}\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n              classNames?.mediaOverlay\n            )}\n          />\n\n          {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n          {hasVideo && (\n            <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n              <button\n                type=\"button\"\n                aria-label={isPlaying ? 'Pause video' : 'Play video'}\n                onClick={handlePlayButtonClick}\n                className={cn(\n                  'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n                  classNames?.mediaPlayButton\n                )}\n              >\n                {isPlaying ? <PauseIcon /> : <PlayIcon />}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n        <div\n          ref={productWrapperRef}\n          className={cn(\n            'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n            classNames?.products\n          )}\n        >\n          {productsTitle && (\n            <Heading\n              as=\"h2\"\n              size={3}\n              className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n              html={productsTitle}\n            />\n          )}\n\n          {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n          <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n            {(() => {\n              const shouldShowViewMore =\n                viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n              const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n              return (\n                <>\n                  {displayedProducts.map((product, index) => (\n                    <ProductCardInner\n                      key={product.productKey}\n                      isShowTag={data.isShowTag ?? true}\n                      product={product}\n                      onImageClick={onImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  ))}\n                  {shouldShowViewMore && (\n                    <div className=\"col-span-2 mt-6 flex justify-center\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setIsExpanded(prev => !prev)}\n                        className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n                        aria-expanded={isExpanded}\n                      >\n                        {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n                        <svg\n                          className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          viewBox=\"0 0 24 24\"\n                        >\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                        </svg>\n                      </button>\n                    </div>\n                  )}\n                </>\n              )\n            })()}\n          </div>\n\n          {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n          <div className=\"tablet:block hidden\">\n            <div className=\"relative\">\n              <Swiper\n                slidesPerView=\"auto\"\n                observer\n                observeParents\n                modules={[Mousewheel]}\n                mousewheel={{\n                  enabled: true,\n                  forceToAxis: true,\n                  sensitivity: 1,\n                }}\n                className=\"!overflow-visible\"\n                breakpoints={{\n                  768: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.3 : 2,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.8 : 3,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                  1920: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                }}\n              >\n                {products.map((product, index) => (\n                  <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n                    <ProductCardInner\n                      product={product}\n                      isShowTag={data.isShowTag ?? true}\n                      onImageClick={onImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n  | 'root'\n  | 'media'\n  | 'mediaOverlay'\n  | 'mediaQuote'\n  | 'mediaPlayButton'\n  | 'products'\n  | 'productsTitle'\n  | 'productGrid'\n  | 'productCardSlideWrapper'\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTags'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceWrapper'\n  | 'productCardCurrentPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n  label: string\n  variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n  /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n  productKey: string\n  /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n  title: string\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 */\n  imageUrl: string\n  imageAlt: string\n  /**\n   * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n   */\n  href?: string\n  /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags?: SceneShelfV2Tag[]\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut?: boolean\n  /**\n   * sku\n   */\n  sku?: string\n  /**\n   * \u53D8\u4F53id\n   */\n  variantId?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n  /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n  viewMoreLabel?: string\n  /** \u6536\u8D77\u6807\u7B7E */\n  viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n  theme?: 'light' | 'dark'\n  isShowTag?: boolean\n  sceneImage: ResponsiveMedia\n  /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n  productsTitle?: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: SceneShelfV2Product[]\n  /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n  viewMoreLimit?: number\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  data: SceneShelfV2Data\n  /**\n   * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n   * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n   */\n  onPlayClick?: (isPlaying: boolean) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n  product: SceneShelfV2Product\n  isShowTag: boolean\n  onImageClick?: (product: SceneShelfV2Product) => void\n  onLearnMore?: (link: string) => void | Promise<void>\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n  className?: string\n  theme?: Theme\n  index?: number\n}\n\nconst ProductCardInner = React.memo(\n  ({\n    product,\n    isShowTag = true,\n    onImageClick,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    secondaryButtonText,\n    secondaryButtonFun,\n    primaryButtonText,\n    primaryButtonFun,\n    classNames,\n    className,\n    theme,\n    index,\n  }: ProductCardInnerProps) => {\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const pageGroup = trackingData?.pageGroup\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product?.href ?? '')\n              break\n            default:\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [onLearnMore, onShopNow, onAddToCart, product]\n    )\n\n    const handlePrimary = React.useCallback(\n      () => handleButtonClick(primaryButtonFun, 'primary'),\n      [handleButtonClick, primaryButtonFun]\n    )\n    const handleSecondary = React.useCallback(\n      () => handleButtonClick(secondaryButtonFun, 'secondary'),\n      [handleButtonClick, secondaryButtonFun]\n    )\n\n    const handleImageClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n        if (!product.href && onImageClick) {\n          e.preventDefault()\n        }\n        onImageClick?.(product)\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'select_item',\n          item_list_name: 'Scene_Shelf_2_Products',\n          page_group: pageGroup,\n          items: [\n            {\n              item_id: product.sku,\n              item_name: product.custom_name || product.title,\n              item_variant: product.variantId,\n              price: product.currentPrice,\n              index: index,\n            },\n          ],\n        })\n      },\n      [index, onImageClick, pageGroup, product]\n    )\n\n    return (\n      <div\n        className={cn(\n          'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n          className,\n          classNames?.productCard,\n          {\n            'bg-container-secondary-0': theme === 'dark',\n          }\n        )}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247 */}\n        {product.href ? (\n          <a\n            href={getLocalizedPath(\n              trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n              locale\n            )}\n            onClick={handleImageClick}\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            aria-label={`View ${product.title}`}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </a>\n        ) : (\n          <div\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n              onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            onClick={onImageClick ? handleImageClick : undefined}\n            role={onImageClick ? 'button' : undefined}\n            tabIndex={onImageClick ? 0 : undefined}\n            aria-label={onImageClick ? `View ${product.title}` : undefined}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </div>\n        )}\n\n        {/* \u4EA7\u54C1\u4FE1\u606F */}\n        <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n          {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n          <div className=\"flex flex-col gap-2\">\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n                classNames?.productCardTags\n              )}\n            >\n              {isShowTag &&\n                product?.tags?.map((tag, idx) => (\n                  <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n                    {tag.label}\n                  </Badge>\n                ))}\n            </div>\n\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn(\n                'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n                classNames?.productCardTitle\n              )}\n            >\n              {product.custom_name || product.title}\n            </Heading>\n\n            {(product.custom_description || product.description) && (\n              <Text\n                as=\"p\"\n                size={1}\n                className={cn(\n                  'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n                  classNames?.productCardDescription\n                )}\n              >\n                {product.custom_description || product.description}\n              </Text>\n            )}\n          </div>\n\n          {/* \u4EF7\u683C + \u6309\u94AE */}\n          <div className=\"flex flex-col gap-2\">\n            {/* \u4EF7\u683C */}\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n                classNames?.productCardPriceWrapper\n              )}\n            >\n              <Heading\n                as=\"h6\"\n                size={2}\n                className={cn(\n                  'scene-shelf-v2-product-card-current-price text-info-primary',\n                  classNames?.productCardCurrentPrice\n                )}\n              >\n                {product.currentPrice}\n              </Heading>\n              {product.originalPrice && (\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn(\n                    'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n                    classNames?.productCardOriginalPrice\n                  )}\n                >\n                  {product.originalPrice}\n                </Heading>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u7EC4 */}\n            {(secondaryButtonText || primaryButtonText) && (\n              <div\n                className={cn(\n                  'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n                  classNames?.productCardButtons\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handleSecondary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handlePrimary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n  (\n    { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n    ref\n  ) => {\n    const {\n      theme = 'light',\n      sceneImage,\n      productsTitle,\n      products,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      viewMoreLimit = 2,\n      copy,\n    } = data\n    const videoRef = React.useRef<HTMLVideoElement>(null)\n    const mediaRef = React.useRef<HTMLDivElement>(null)\n    const productWrapperRef = React.useRef<HTMLDivElement>(null)\n    const [isPlaying, setIsPlaying] = React.useState(false)\n    const [isExpanded, setIsExpanded] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    useExposure(mediaRef, {\n      componentType: 'image',\n      componentName: 'scene_shelf_banner',\n    })\n\n    useViewItemList(productWrapperRef, {\n      componentType: 'video',\n      componentName: 'scene_shelf_banner',\n      itemListName: 'Scene_Shelf_2_Products',\n      items: products.map((item, index) => ({\n        item_id: item.sku ?? '',\n        item_name: item.title,\n        item_variant: item.variantId ?? '',\n        price: item.currentPrice,\n        index: index,\n      })),\n      tabName: '',\n    })\n\n    const visibleLimit = useGridRowCount({\n      rows: viewMoreLimit ?? 0,\n      mobileCols: 2,\n    })\n\n    const hasVideo = React.useMemo(\n      () =>\n        [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n          media => media?.mimeType === 'video/mp4'\n        ),\n      [sceneImage]\n    )\n\n    const handlePlayButtonClick = React.useCallback(() => {\n      const video = videoRef.current\n      if (video) {\n        if (video.paused) {\n          video.play()\n          setIsPlaying(true)\n          onPlayClick?.(true)\n        } else {\n          video.pause()\n          setIsPlaying(false)\n          onPlayClick?.(false)\n        }\n      } else {\n        onPlayClick?.(true)\n      }\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingData?.pageGroup,\n          component_type: 'video',\n          component_name: 'scene_shelf_banner',\n          position: 1,\n          creative_id: sceneImage?.pc?.id,\n        },\n      })\n    }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n    // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n    React.useEffect(() => {\n      const video = videoRef.current\n      if (!video || !hasVideo) return\n\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n              video.play().catch(error => {\n                // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n                console.warn('Video autoplay failed:', error)\n              })\n            } else {\n              // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n              video.pause()\n            }\n          })\n        },\n        {\n          threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n        }\n      )\n\n      observer.observe(video)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [])\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'scene-shelf-v2-root w-full overflow-hidden',\n          { 'aiui-dark': theme === 'dark' },\n          className,\n          classNames?.root\n        )}\n      >\n        {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n        <div\n          className={cn(\n            'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n            classNames?.media\n          )}\n          ref={mediaRef}\n        >\n          <Media\n            pcImage={sceneImage?.pc}\n            desktopImage={sceneImage?.desktop}\n            laptopImage={sceneImage?.laptop}\n            padImage={sceneImage?.pad}\n            mobileImage={sceneImage?.mobile}\n            className=\"size-full\"\n            videoClassName=\"absolute inset-0 size-full object-cover\"\n            videoRef={videoRef}\n            onVideoPlay={() => setIsPlaying(true)}\n            onVideoPause={() => setIsPlaying(false)}\n            onVideoEnded={() => setIsPlaying(false)}\n          />\n          {/* \u6E10\u53D8\u906E\u7F69 */}\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n              classNames?.mediaOverlay\n            )}\n          />\n\n          {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n          {hasVideo && (\n            <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n              <button\n                type=\"button\"\n                aria-label={isPlaying ? 'Pause video' : 'Play video'}\n                onClick={handlePlayButtonClick}\n                className={cn(\n                  'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n                  classNames?.mediaPlayButton\n                )}\n              >\n                {isPlaying ? <PauseIcon /> : <PlayIcon />}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n        <div\n          ref={productWrapperRef}\n          className={cn(\n            'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n            classNames?.products\n          )}\n        >\n          {productsTitle && (\n            <Heading\n              as=\"h2\"\n              size={3}\n              className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n              html={productsTitle}\n            />\n          )}\n\n          {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n          <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n            {(() => {\n              const shouldShowViewMore =\n                viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n              const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n              return (\n                <>\n                  {displayedProducts.map((product, index) => (\n                    <ProductCardInner\n                      key={product.productKey}\n                      isShowTag={data.isShowTag ?? true}\n                      product={product}\n                      onImageClick={onImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  ))}\n                  {shouldShowViewMore && (\n                    <div className=\"col-span-2 mt-6 flex justify-center\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setIsExpanded(prev => !prev)}\n                        className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n                        aria-expanded={isExpanded}\n                      >\n                        {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n                        <svg\n                          className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          viewBox=\"0 0 24 24\"\n                        >\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                        </svg>\n                      </button>\n                    </div>\n                  )}\n                </>\n              )\n            })()}\n          </div>\n\n          {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n          <div className=\"tablet:block hidden\">\n            <div className=\"relative\">\n              <Swiper\n                slidesPerView=\"auto\"\n                observer\n                observeParents\n                modules={[Mousewheel]}\n                mousewheel={{\n                  enabled: true,\n                  forceToAxis: true,\n                  sensitivity: 1,\n                }}\n                className=\"!overflow-visible\"\n                breakpoints={{\n                  768: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.3 : 2,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.8 : 3,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                  1920: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                }}\n              >\n                {products.map((product, index) => (\n                  <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n                    <ProductCardInner\n                      product={product}\n                      isShowTag={data.isShowTag ?? true}\n                      onImageClick={onImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "getLocalizedPath", "Heading", "Text", "Badge", "Button", "Picture", "Media", "Swiper", "SwiperSlide", "Mousewheel", "withLayout", "useGridRowCount", "useExposure", "useViewItemList", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "PlayIcon", "PauseIcon", "ProductCardInner", "product", "isShowTag", "onImageClick", "onLearnMore", "onShopNow", "onAddToCart", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "classNames", "className", "theme", "index", "locale", "trackingData", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "pageGroup", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "handlePrimary", "handleSecondary", "handleImageClick", "e", "tag", "idx", "SceneShelfV2", "data", "onPlayClick", "props", "ref", "sceneImage", "productsTitle", "products", "viewMoreLimit", "copy", "videoRef", "mediaRef", "productWrapperRef", "isPlaying", "setIsPlaying", "isExpanded", "setIsExpanded", "item", "visibleLimit", "hasVideo", "media", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "shouldShowViewMore", "displayedProducts", "prev", "SceneShelfV2_default"]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.99",
+  "version": "1.2.1",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css CHANGED Viewed

@@ -1651,9 +1651,6 @@ video {
 .min-h-\[610px\] {
   min-height: 610px;
 }
-.min-h-screen {
-  min-height: 100vh;
-}
 .\!w-1\/2 {
   width: 50% !important;
 }