@anker-in/headless-ui 1.1.87 → 1.1.89

package/dist/esm/biz-components/PromotionalBar/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us' } = useAiuiContext()\n    const { backgroundImage } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root, className)}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading\n                className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n                html={data.contentTitle}\n                size={3}\n              />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                  href={getLocalizedPath(data.buttonLink || '', locale)}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
-  "mappings": "aAgHU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA9GV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,kBAAAC,MAAsB,2BAmD/B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBvB,EAAM,WAC3B,CAAC,CAAE,WAAAwB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAItB,EAAe,EACnC,CAAE,gBAAAE,CAAgB,EAAIgB,EACtBK,EAAgB9B,EAAM,QAAQ,IAC3BQ,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACEX,EAAC,OACC,IAAK8B,EACJ,GAAGD,EACJ,UAAW1B,EAAG,kDAAmDuB,GAAY,KAAME,CAAS,EAG5F,SAAA3B,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAuB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJ3B,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BuB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJ3B,EAAC,KACC,UAAWG,EACT,6HACAuB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEF3B,EAAC,OAAI,UAAU,mBACZ,SAAA2B,EAAK,YACJ3B,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBuB,GAAY,MAAM,EACvD,KAAMlB,EAAiBmB,EAAK,YAAc,GAAII,CAAM,EACpD,cAAc,SAEb,SAAAJ,EAAK,WACR,EAEJ,GACF,EACA3B,EAACM,EAAA,CACC,OAAQ0B,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAP,EAAe,YAAc,iBAC7B,IAAOQ,EAAQ1B,EAAWkB,CAAc",
-  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "getLocalizedPath", "useAiuiContext", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "pictureSource", "PromotionalBar_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  theme: Theme\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us' } = useAiuiContext()\n    const { backgroundImage, theme = 'dark' } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn(\n          'laptop:h-[192px] lg-desktop:h-[240px] h-[240px] text-[#080A0F]',\n          {\n            'text-[#F5F6F7]': theme === 'dark',\n          },\n          classNames?.root,\n          className\n        )}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading className={cn('line-clamp-2 ', classNames?.title)} html={data.contentTitle} size={3} />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] ',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn(\n                    '!p-0 text-[#F5F6F7]',\n                    {\n                      'text-[#080A0F]': theme === 'light',\n                    },\n                    classNames?.button\n                  )}\n                  href={getLocalizedPath(data.buttonLink || '', locale)}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
+  "mappings": "aAwHU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBAtHV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,kBAAAC,MAAsB,2BAoD/B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBvB,EAAM,WAC3B,CAAC,CAAE,WAAAwB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAItB,EAAe,EACnC,CAAE,gBAAAE,EAAiB,MAAAqB,EAAQ,MAAO,EAAIL,EACtCM,EAAgB/B,EAAM,QAAQ,IAC3BQ,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACEX,EAAC,OACC,IAAK8B,EACJ,GAAGD,EACJ,UAAW1B,EACT,iEACA,CACE,iBAAkB6B,IAAU,MAC9B,EACAN,GAAY,KACZE,CACF,EAGA,SAAA3B,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAuB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJ3B,EAACI,EAAA,CAAQ,UAAWD,EAAG,gBAAiBuB,GAAY,KAAK,EAAG,KAAMC,EAAK,aAAc,KAAM,EAAG,EAE/FA,EAAK,aACJ3B,EAAC,KACC,UAAWG,EACT,+GACAuB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEF3B,EAAC,OAAI,UAAU,mBACZ,SAAA2B,EAAK,YACJ3B,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EACT,sBACA,CACE,iBAAkB6B,IAAU,OAC9B,EACAN,GAAY,MACd,EACA,KAAMlB,EAAiBmB,EAAK,YAAc,GAAII,CAAM,EACpD,cAAc,SAEb,SAAAJ,EAAK,WACR,EAEJ,GACF,EACA3B,EAACM,EAAA,CACC,OAAQ2B,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAR,EAAe,YAAc,iBAC7B,IAAOS,EAAQ3B,EAAWkB,CAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "getLocalizedPath", "useAiuiContext", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "theme", "pictureSource", "PromotionalBar_default"]
 }

package/dist/esm/biz-components/SceneShelfV2/index.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import type { ResponsiveMedia, Theme } from '../../types/props.js';
+import 'swiper/css';
+import 'swiper/css/navigation';
+/**
+ * 按钮功能类型
+ */
+export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+export type SceneShelfV2SemanticName = 'root' | 'media' | 'mediaOverlay' | 'mediaQuote' | 'mediaPlayButton' | 'products' | 'productsTitle' | 'productGrid' | 'productCardSlideWrapper' | 'productCard' | 'productCardImage' | 'productCardTags' | 'productCardTitle' | 'productCardDescription' | 'productCardPriceWrapper' | 'productCardCurrentPrice' | 'productCardOriginalPrice' | 'productCardButtons';
+export interface SceneShelfV2Tag {
+    label: string;
+    variant?: 'outline' | 'fill';
+}
+export interface SceneShelfV2Product {
+    /** 产品唯一标识 */
+    productKey: string;
+    /** 产品主标题 */
+    title: string;
+    /** 产品描述 */
+    description?: string;
+    /** 产品图片 */
+    imageUrl: string;
+    imageAlt: string;
+    /**
+     * 产品链接 URL。
+     */
+    href?: string;
+    /** 当前价格（格式化字符串，如 "$1,999.00"） */
+    currentPrice: string;
+    /** 原价（显示删除线） */
+    originalPrice?: string;
+    /** 标签列表 */
+    tags?: SceneShelfV2Tag[];
+    /** 是否售罄 */
+    soldOut?: boolean;
+    /**
+     * sku
+     */
+    sku?: string;
+    /**
+     * 变体id
+     */
+    variantId?: string;
+}
+/**
+ * 文案配置
+ */
+export interface SceneShelfV2CopyConfig {
+    /** 查看更多标签 */
+    viewMoreLabel?: string;
+    /** 收起标签 */
+    viewLessLabel?: string;
+}
+export interface SceneShelfV2Data {
+    theme?: 'light' | 'dark';
+    isShowTag?: boolean;
+    sceneImage: ResponsiveMedia;
+    /** 产品区标题（可选） */
+    productsTitle?: string;
+    /** 产品列表 */
+    products: SceneShelfV2Product[];
+    /** 次要按钮文本 */
+    secondaryButtonText?: string;
+    /** 次要按钮功能类型 */
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 主要按钮文本 */
+    primaryButtonText?: string;
+    /** 主要按钮功能类型 */
+    primaryButtonFun?: ButtonFunctionType;
+    /** 查看更多限制数（手机端超过两行时显示viewMore按钮） */
+    viewMoreLimit?: number;
+    /** 文案配置 */
+    copy?: SceneShelfV2CopyConfig;
+}
+export interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {
+    data: SceneShelfV2Data;
+    /**
+     * 点击播放/暂停按钮回调。
+     * 当媒体区为视频时，组件内部会自动控制播放/暂停,此回调仍会触发。
+     */
+    onPlayClick?: (isPlaying: boolean) => void;
+    /** 点击产品图片回调 */
+    onImageClick?: (product: SceneShelfV2Product) => void;
+    /** 点击了解更多回调（支持异步） */
+    onLearnMore?: (link: string) => void | Promise<void>;
+    /** 点击立即购买回调（支持异步） */
+    onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>;
+    /** 点击加入购物车回调（支持异步） */
+    onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>;
+    classNames?: Partial<Record<SceneShelfV2SemanticName, string>>;
+}
+interface ProductCardInnerProps {
+    product: SceneShelfV2Product;
+    isShowTag: boolean;
+    onImageClick?: (product: SceneShelfV2Product) => void;
+    onLearnMore?: (link: string) => void | Promise<void>;
+    onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>;
+    onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>;
+    secondaryButtonText?: string;
+    secondaryButtonFun?: ButtonFunctionType;
+    primaryButtonText?: string;
+    primaryButtonFun?: ButtonFunctionType;
+    classNames?: Partial<Record<SceneShelfV2SemanticName, string>>;
+    className?: string;
+    theme?: Theme;
+    index?: number;
+}
+declare const ProductCardInner: React.MemoExoticComponent<({ product, isShowTag, onImageClick, onLearnMore, onShopNow, onAddToCart, secondaryButtonText, secondaryButtonFun, primaryButtonText, primaryButtonFun, classNames, className, theme, index, }: ProductCardInnerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.ForwardRefExoticComponent<Omit<SceneShelfV2Props & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+    readonly $$typeof: symbol;
+};
+export default _default;
+export { ProductCardInner as SceneShelfV2ProductCard };

package/dist/esm/biz-components/SceneShelfV2/index.js

@@ -0,0 +1,2 @@
+"use client";import{Fragment as ce,jsx as t,jsxs as d}from"react/jsx-runtime";import*as a from"react";import{cn as o,getLocalizedPath as $}from"../../helpers/index.js";import{Heading as R,Text as Q,Badge as q,Button as A,Picture as O}from"../../components/index.js";import J from"../Media/index.js";import{Swiper as X,SwiperSlide as Y}from"swiper/react";import{Mousewheel as Z}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{withLayout as ee}from"../../shared/Styles.js";import{useGridRowCount as te}from"../../hooks/useGridRowCount.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{useViewItemList as oe}from"../../hooks/useViewItemList.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{useAiuiContext as G}from"../AiuiProvider/index.js";import{gaTrack as E}from"../../shared/track.js";const re="shelf",ne="scene_shelf_v2",se=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),le=()=>d("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),t("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),H=a.memo(({product:e,isShowTag:p=!0,onImageClick:l,onLearnMore:g,onShopNow:w,onAddToCart:S,secondaryButtonText:v,secondaryButtonFun:y,primaryButtonText:x,primaryButtonFun:P,classNames:n,className:r,theme:T,index:s})=>{const{locale:V="us",trackingData:N}=G(),[B,L]=a.useState(!1),[k,M]=a.useState(!1),u=N?.pageGroup,h=a.useCallback(async(c,_)=>{if(!c)return;const C=_==="primary"?L:M;C(!0);try{switch(c){case"buyNow":await w?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await g?.(e?.href??"");break;default:break}}finally{C(!1)}},[g,w,S,e]),z=a.useCallback(()=>h(P,"primary"),[h,P]),I=a.useCallback(()=>h(y,"secondary"),[h,y]),m=a.useCallback(c=>{!e.href&&l&&c.preventDefault(),l?.(e),E({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:u,items:[{item_id:e.sku,item_name:e.title,item_variant:e.variantId,price:e.currentPrice,index:s}]})},[s,l,u,e]);return d("div",{className:o("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",r,n?.productCard,{"bg-container-secondary-0":T==="dark"}),children:[e.href?t("a",{href:$(ae(e.href,u+"_"+re+"_"+ne),V),onClick:m,className:o("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?.productCardImage),"aria-label":`View ${e.title}`,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):t("div",{className:o("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 ",l&&"cursor-pointer transition-opacity hover:opacity-80",n?.productCardImage),onClick:l?m:void 0,role:l?"button":void 0,tabIndex:l?0:void 0,"aria-label":l?`View ${e.title}`:void 0,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),d("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[d("div",{className:"flex flex-col gap-2",children:[t("div",{className:o("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",n?.productCardTags),children:p&&e?.tags?.map((c,_)=>t(q,{variant:c.variant??"outline",size:"sm",className:"",children:c.label},_))}),t(R,{as:"h3",size:2,className:o("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",n?.productCardTitle),children:e.title}),e.description&&t(Q,{as:"p",size:1,className:o("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",n?.productCardDescription),children:e.description})]}),d("div",{className:"flex flex-col gap-2",children:[d("div",{className:o("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",n?.productCardPriceWrapper),children:[t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-current-price text-info-primary",n?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",n?.productCardOriginalPrice),children:e.originalPrice})]}),(v||x)&&d("div",{className:o("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",n?.productCardButtons),children:[v&&t(A,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{I(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:u||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:v,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&y!=="learnMore",loading:k,children:v}),x&&t(A,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{z(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:u||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&P!=="learnMore",loading:B,children:x})]})]})]})]})});H.displayName="SceneShelfV2.ProductCard";const U=a.forwardRef(({className:e,classNames:p={},data:l,onPlayClick:g,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,...x},P)=>{const{theme:n="light",sceneImage:r,productsTitle:T,products:s,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,viewMoreLimit:k=2,copy:M}=l,u=a.useRef(null),h=a.useRef(null),z=a.useRef(null),[I,m]=a.useState(!1),[c,_]=a.useState(!1),{trackingData:C}=G();ie(h,{componentType:"image",componentName:"scene_shelf_banner"}),oe(z,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:s.map((i,f)=>({item_id:i.sku??"",item_name:i.title,item_variant:i.variantId??"",price:i.currentPrice,index:f})),tabName:""});const D=te({rows:k??0,mobileCols:2}),F=a.useMemo(()=>[r?.pc,r?.desktop,r?.laptop,r?.pad,r?.mobile].some(i=>i?.mimeType==="video/mp4"),[r]),W=a.useCallback(()=>{const i=u.current;i?i.paused?(i.play(),m(!0),g?.(!0)):(i.pause(),m(!1),g?.(!1)):g?.(!0),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:C?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:r?.pc?.id}})},[g,r?.pc?.id,C?.pageGroup]);return a.useEffect(()=>{const i=u.current;if(!i||!F)return;const f=new IntersectionObserver(b=>{b.forEach(j=>{j.isIntersecting?i.play().catch(K=>{console.warn("Video autoplay failed:",K)}):i.pause()})},{threshold:.5});return f.observe(i),()=>{f.disconnect()}},[]),d("div",{...x,ref:P,className:o("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":n==="dark"},e,p?.root),children:[d("div",{className:o("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",p?.media),ref:h,children:[t(J,{pcImage:r?.pc,desktopImage:r?.desktop,laptopImage:r?.laptop,padImage:r?.pad,mobileImage:r?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:u,onVideoPlay:()=>m(!0),onVideoPause:()=>m(!1),onVideoEnded:()=>m(!1)}),t("div",{"aria-hidden":"true",className:o("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",p?.mediaOverlay)}),F&&t("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:t("button",{type:"button","aria-label":I?"Pause video":"Play video",onClick:W,className:o("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",p?.mediaPlayButton),children:I?t(le,{}):t(se,{})})})]}),d("div",{ref:z,className:o("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",p?.products),children:[T&&t(R,{as:"h2",size:3,className:o("scene-shelf-v2-products-title text-info-primary",p?.productsTitle),html:T}),t("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const i=k!==void 0&&k>0&&s.length>D,f=i&&!c?s.slice(0,D):s;return d(ce,{children:[f.map((b,j)=>t(H,{isShowTag:l.isShowTag??!0,product:b,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:n,index:j},b.productKey)),i&&t("div",{className:"col-span-2 mt-6 flex justify-center",children:d("button",{type:"button",onClick:()=>_(b=>!b),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":c,children:[c?M?.viewLessLabel??"View Less":M?.viewMoreLabel??"View More",t("svg",{className:o("size-4 transition-transform",c&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),t("div",{className:"tablet:block hidden",children:t("div",{className:"relative",children:t(X,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Z],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:s.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:s.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:s.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:s.length>4?3.8:4}},children:s.map((i,f)=>t(Y,{className:o("!h-auto ",p.productCardSlideWrapper),children:t(H,{product:i,isShowTag:l.isShowTag??!0,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:n,index:f})},i.productKey))})})})]})]})});U.displayName="SceneShelfV2";var ke=ee(U);export{H as SceneShelfV2ProductCard,ke as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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}\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.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.title}\n            </Heading>\n\n            {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.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/dist/esm/biz-components/SceneShelfV3/ProductCard.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { BadgeProps } from '../../components/badge.js';
+import type { ButtonFunctionType, CopyConfig } from './types.js';
+import type { Theme } from '../../types/props.js';
+/**
+ * 语义化类名
+ */
+export type SceneShelfV3SemanticName = 'root' | 'title' | 'description' | 'tabsList' | 'promotionalBar' | 'productGrid' | 'viewMore' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockTrack' | 'stockBar';
+/**
+ * 库存展示模式
+ */
+export type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage';
+/**
+ * 产品卡片数据接口（直接匹配 mock.json 结构）
+ */
+export interface ProductCardData {
+    sku?: string;
+    id: string;
+    /** 产品标题 */
+    title: string;
+    /**
+     * 产品描述
+     */
+    description?: string;
+    /** 产品图片 URL */
+    imageUrl: string;
+    /** 产品图片 alt 文本 */
+    imageAlt: string;
+    /** 当前价格 */
+    currentPrice: string;
+    /** 原价（格式化字符串，如 "$129.99"，用于显示删除线价格） */
+    originalPrice?: string;
+    /** 标签列表 */
+    tags: Array<{
+        label: string;
+        variant?: 'outline' | 'fill' | 'promotional';
+        promotionalType?: BadgeProps['promotionalType'];
+    }>;
+    /** 产品详情页链接 */
+    href: string;
+    /** 是否售罄 */
+    soldOut: boolean;
+    /** 自定义产品名称 */
+    custom_name?: string;
+    /** 自定义产品描述 */
+    custom_description?: string;
+    /** 价格标签（如 "Member Price"） */
+    priceLabel?: string;
+    /** 库存信息（如果后端提供） */
+    totalInventory?: number;
+    quantityAvailable?: number;
+}
+/**
+ * 产品卡片组件 Props
+ */
+export interface ProductCardProps {
+    product: ProductCardData;
+    className?: string;
+    showTags?: boolean;
+    stockDisplayMode?: StockDisplayMode;
+    stockThresholdValue?: number;
+    /** 点击了解更多回调（支持异步） */
+    onLearnMore?: (link: string) => void | Promise<void>;
+    /** 点击立即购买回调（支持异步） */
+    onShopNow?: (product: ProductCardData) => void | Promise<void>;
+    /** 点击加入购物车回调（支持异步） */
+    onAddToCart?: (product: ProductCardData) => void | Promise<void>;
+    classNames?: Partial<Record<SceneShelfV3SemanticName, string>>;
+    secondaryButtonText?: string;
+    secondaryButtonFun?: ButtonFunctionType;
+    primaryButtonText?: string;
+    primaryButtonFun?: ButtonFunctionType;
+    showOriginalPrice?: boolean;
+    copy?: CopyConfig;
+    onProductImageClick?: (product: ProductCardData) => void;
+    /** 主题 */
+    theme?: Theme;
+    /** 语言环境 */
+    locale?: string;
+    /** 当前下标  */
+    index?: number;
+    /** tabName */
+    tabName?: string;
+}
+/**
+ * SceneShelfV3 产品卡片组件
+ */
+export declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCard;

package/dist/esm/biz-components/SceneShelfV3/ProductCard.js

@@ -0,0 +1,2 @@
+"use client";import{Fragment as Q,jsx as t,jsxs as s}from"react/jsx-runtime";import*as n from"react";import{cn as a,getLocalizedPath as F}from"../../helpers/index.js";import{Button as C,Badge as R,Card as V,CardContent as q,Picture as K,Text as S,Heading as c}from"../../components/index.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{gaTrack as g}from"../../shared/track.js";import{useAiuiContext as J}from"../AiuiProvider/index.js";const N=n.forwardRef(({product:e,className:T,showTags:B=!0,onLearnMore:u,onShopNow:f,onAddToCart:y,classNames:o,secondaryButtonText:p,secondaryButtonFun:v,primaryButtonText:m,primaryButtonFun:b,showOriginalPrice:L,copy:z,onProductImageClick:_,theme:D="light",locale:h="us",index:l=0,tabName:x},M)=>{const[H,O]=n.useState(!1),[j,A]=n.useState(!1),{trackingData:G}=J(),r=G?.pageGroup,k=!e.soldOut,P=n.useCallback(async(i,d)=>{if(!i)return;const w=d==="primary"?O:A;w(!0);try{switch(i){case"buyNow":await f?.(e);break;case"addCart":await y?.(e);break;case"learnMore":await u?.(e.href);break}}finally{w(!1)}},[e,f,y,u]),U=n.useMemo(()=>F(I(e.href,r+"_shelf_scene_shelf_v3"),h),[e.href,r,h]),E=n.useCallback(()=>{_?.(e),g({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_3_Products",page_group:r,items:[{item_id:e.sku,item_name:e.title,item_variant:e.id,price:e.currentPrice,index:l}],tab_name:x,position:l})},[_,e,r,l,x]);return t(V,{ref:M,className:a("bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white",T,o?.productCard,{"hover:bg-container-secondary-0 ":D==="dark"}),children:s(q,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[t("div",{className:"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden",children:t("a",{href:U,onClick:E,rel:"noreferrer",children:t(K,{source:e.imageUrl,alt:e.imageAlt,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),t("div",{className:"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1",children:B&&e.tags?.map((i,d)=>t(R,{size:"sm",variant:i.variant||"outline",className:a(i.variant==="promotional"?"ml-2":""),promotionalType:i.promotionalType,children:i.label},d))}),s("div",{className:"flex h-full flex-1 grow flex-col justify-between",children:[s("div",{className:"mb-4",children:[t(c,{as:"h3",size:2,className:a("text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]",o?.productTitle),html:e.custom_name||e.title}),(e?.custom_description||e?.description)&&t(S,{size:2,className:a("text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",o?.productDescription),html:e.custom_description||e.description})]}),e?.priceLabel&&k&&t(S,{size:4,className:a("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",o?.productPriceLabel),children:e.priceLabel}),s("div",{children:[t("div",{className:a("mb-2",o?.productPrice),children:t("div",{className:"flex items-baseline gap-2",children:k?s(Q,{children:[t(c,{size:2,className:"text-info-primary",as:"h6",children:e.currentPrice}),L&&e.originalPrice&&t(c,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):t(c,{size:2,className:"text-info-tertiary",children:z?.outOfStockLabel??"Sold Out"})})}),s("div",{className:a("lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2",o?.buttonGroup),children:[p&&t(C,{variant:"secondary",size:"base",className:a("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",o?.secondaryButton),onClick:()=>{P(v,"secondary"),g({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:r||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:p,SKU:e.sku||"",position:l}})},disabled:e.soldOut&&v!=="learnMore",loading:j,children:p}),m&&t(C,{variant:"primary",size:"base",className:a("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",o?.primaryButton),onClick:()=>{P(b,"primary"),g({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:r||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:m,SKU:e.sku||"",position:l}})},disabled:e.soldOut&&b!=="learnMore",loading:H,children:m})]})]})]})]})})});N.displayName="SceneShelfV3.ProductCard";var ee=N;export{N as ProductCard,ee as default};
+//# sourceMappingURL=ProductCard.js.map

package/dist/esm/biz-components/SceneShelfV3/ProductCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SceneShelfV3/ProductCard.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n  | 'stockTrack'\n  | 'stockBar'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\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  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\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: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\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          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a href={trackedHref} onClick={onProductClick} rel=\"noreferrer\">\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u6807\u7B7E */}\n            {product?.priceLabel && availableForSale && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                  classNames?.productPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className=\"flex items-baseline gap-2\">\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                          {product.originalPrice}\n                        </Heading>\n                      )}\n                    </>\n                  ) : (\n                    <Heading size={2} className=\"text-info-tertiary\">\n                      {copy?.outOfStockLabel ?? 'Sold Out'}\n                    </Heading>\n                  )}\n                </div>\n              </div>\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\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.custom_name || product.title,\n                          component_description: product.custom_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                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\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.custom_name || product.title,\n                          component_description: product.custom_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            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "getLocalizedPath", "Button", "Badge", "Card", "CardContent", "Picture", "Text", "Heading", "trackUrlRef", "gaTrack", "useAiuiContext", "ProductCard", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "theme", "locale", "index", "tabName", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "trackingData", "pageGroup", "availableForSale", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "trackedHref", "onProductClick", "tag", "ProductCard_default"]
+}

package/dist/esm/biz-components/SceneShelfV3/index.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { type PromotionalBarProps } from '../PromotionalBar/index.js';
+import { ProductCard, type ProductCardData, type SceneShelfV3SemanticName, type StockDisplayMode } from './ProductCard.js';
+import type { ButtonFunctionType, CopyConfig } from './types.js';
+/**
+ * 场景 Tab 数据接口（匹配 mock.json.sceneTabs 结构）
+ */
+export interface ProductTab {
+    /** Tab 唯一 ID */
+    id: string;
+    /** Tab 标签文本 */
+    label: string;
+    /** 产品列表 */
+    products: ProductCardData[];
+    /** 资源块（如 PromotionalBar） */
+    resourceBlocks?: Array<PromotionalBarProps['data'] & {
+        blockType: string;
+        display: 'visible' | 'hidden';
+    }>;
+}
+/**
+ * SceneShelfV3 数据接口（直接匹配 mock.json 结构）
+ */
+export interface SceneShelfV3Data {
+    /** 组件实例 ID */
+    id: string;
+    /** 主题 */
+    theme?: 'light' | 'dark';
+    /** 显示状态 */
+    display?: 'visible' | 'hidden';
+    /** 组件类型标识 */
+    blockType: 'ipc-scene-shelf-v3';
+    /** 场景 Tab 列表（每个 Tab 包含产品和 resourceBlocks） */
+    sceneTabs: ProductTab[];
+    copy?: CopyConfig;
+    /** 是否显示标签 */
+    showTags?: boolean;
+    /** 查看更多限制数 */
+    viewMoreLimit?: number;
+    /** 主按钮文本 */
+    primaryButtonText?: string;
+    /** 主按钮功能 */
+    primaryButtonFun?: ButtonFunctionType;
+    /** 次按钮文本 */
+    secondaryButtonText?: string;
+    /** 次按钮功能 */
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 组件标题（可选，非 mock 必需） */
+    title?: string;
+    /** 组件描述（可选，非 mock 必需） */
+    description?: string;
+    /** 库存展示模式（可选） */
+    stockDisplayMode?: StockDisplayMode;
+    /** 库存阈值（可选） */
+    stockThresholdValue?: number;
+    /** 是否显示原价（可选） */
+    showOriginalPrice?: boolean;
+}
+export interface SceneShelfV3Props extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: SceneShelfV3Data;
+    /** 点击了解更多回调 */
+    onLearnMore?: (link: string) => void;
+    /** 点击立即购买回调 */
+    onShopNow?: (product: ProductCardData) => void;
+    /** 点击加入购物车回调 */
+    onAddToCart?: (product: ProductCardData) => void;
+    /** 语义化类名 */
+    classNames?: Partial<Record<SceneShelfV3SemanticName, string>>;
+}
+export interface SceneShelfV3Component extends React.ForwardRefExoticComponent<SceneShelfV3Props & React.RefAttributes<HTMLDivElement>> {
+    ProductCard: typeof ProductCard;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<SceneShelfV3Props & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+    readonly $$typeof: symbol;
+    ProductCard: typeof ProductCard;
+};
+export default _default;
+export type { StockDisplayMode, SceneShelfV3SemanticName, ProductCardData };

package/dist/esm/biz-components/SceneShelfV3/index.js

@@ -0,0 +1,2 @@
+"use client";import{Fragment as X,jsx as o,jsxs as f}from"react/jsx-runtime";import*as p from"react";import{cn as i}from"../../helpers/index.js";import{Text as E,Heading as _,Tabs as H,TabsList as G,TabsTrigger as A,TabsContent as O}from"../../components/index.js";import z from"../PromotionalBar/index.js";import{useExposure as I}from"../../hooks/useExposure.js";import{useViewItemList as W}from"../../hooks/useViewItemList.js";import{useGridRowCount as j}from"../../hooks/useGridRowCount.js";import{useAiuiContext as q}from"../AiuiProvider/index.js";import{ProductCard as V}from"./ProductCard.js";import{withLayout as J}from"../../shared/Styles.js";const K="shelf",Q="Scene_Shelf_3_Products";function U({products:a,copy:r,showTags:S,stockDisplayMode:b,stockThresholdValue:P,onLearnMore:n,onShopNow:k,onAddToCart:x,classNames:s,secondaryButtonText:C,secondaryButtonFun:u,primaryButtonText:d,primaryButtonFun:v,showOriginalPrice:B,viewMoreLimit:m,theme:w="light",locale:D="us",tabName:y=""}){const[l,M]=p.useState(!1),h=p.useRef(null);W(h,{componentType:K,componentName:Q,itemListName:"Scene_Shelf_3_Products",items:a.map((e,c)=>({item_id:e.sku??"",item_name:e.title,item_variant:e.id??"",price:e.currentPrice,index:c})),tabName:y});const g=j({rows:m??0,mobileCols:2,tabletCols:3,desktopCols:4});if(!a?.length)return null;const T=m!==void 0&&m>0&&a.length>g,L=T&&!l?a.slice(0,g):a,t=()=>{M(e=>!e)};return f(X,{children:[o("div",{ref:h,className:i("lg-desktop:gap-4 tablet:grid-cols-3 text-info-primary laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-3 grid grid-cols-2 gap-3",s?.productGrid),children:L.map((e,c)=>o(V,{product:e,showTags:S,stockDisplayMode:b,stockThresholdValue:P,onLearnMore:n,onShopNow:k,onAddToCart:x,classNames:s,secondaryButtonText:C,secondaryButtonFun:u,primaryButtonText:d,primaryButtonFun:v,showOriginalPrice:B,copy:r,theme:w,locale:D,index:c,tabName:y},e.sku||c))}),T&&o("div",{className:i("laptop:mt-4 mt-3 flex justify-center",s?.viewMore),children:f("button",{onClick:t,className:"text-info-primary hover:text-brand-0 lg-desktop:text-[16px] flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":l,children:[l?r?.viewLessLabel:r?.viewMoreLabel,o("svg",{className:i("size-4 transition-transform",l&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})}const N=p.memo(U);N.displayName="SceneShelfV3.ProductsGrid";const R=p.forwardRef(({className:a,data:r,onLearnMore:S,onShopNow:b,onAddToCart:P,classNames:n,...k},x)=>{const s=p.useRef(null),{locale:C="us"}=q();I(s,{componentType:"image",componentName:"scene_shelf_banner"}),p.useImperativeHandle(x,()=>s.current);const{theme:u="light",sceneTabs:d=[],showTags:v=!0,stockDisplayMode:B,stockThresholdValue:m,showOriginalPrice:w=!0,secondaryButtonText:D,primaryButtonText:y,secondaryButtonFun:l="learnMore",primaryButtonFun:M="buyNow",copy:h,viewMoreLimit:g}=r,T=d.length>1,L={copy:h,showTags:v,stockDisplayMode:B,stockThresholdValue:m,onLearnMore:S,onShopNow:b,onAddToCart:P,classNames:n,secondaryButtonText:D,secondaryButtonFun:l,primaryButtonText:y,primaryButtonFun:M,showOriginalPrice:w,viewMoreLimit:g,theme:u,locale:C};return f("div",{ref:s,className:i("w-full",{"aiui-dark":u==="dark"},a,n?.root),style:{"--progress-track-bg":u==="dark"?"rgba(255, 255, 255, 0.2)":"rgba(0, 0, 0, 0.2)"},...k,children:[r.title&&o(_,{as:"h2",html:r.title,size:4,className:i("text-info-primary mb-4",n?.title)}),r.description&&o(E,{size:3,as:"p",html:r.description,className:i("text-info-primary mb-6",n?.description)}),f(H,{defaultValue:d[0]?.id,className:"w-full",children:[T&&o(G,{className:i("mb-6",n?.tabsList),children:d.map(t=>o(A,{value:t.id,children:t.label},t.id))}),d.map(t=>{const e=t.resourceBlocks?.find(c=>c.blockType==="PromotionalBar"&&c.display==="visible");return f(O,{value:t.id,children:[e&&o(z,{data:e,className:i("laptop:mb-4 mb-3",n?.promotionalBar)}),o(N,{products:t.products,...L,tabName:t.label})]},t.id)})]})]})});R.displayName="SceneShelfV3";const F=R;F.ProductCard=V;var ae=J(F);export{ae as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SceneShelfV3/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SceneShelfV3/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Heading, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\nimport PromotionalBar, { type PromotionalBarProps } from '../PromotionalBar/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport {\n  ProductCard,\n  type ProductCardData,\n  type SceneShelfV3SemanticName,\n  type StockDisplayMode,\n} from './ProductCard.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst componentType = 'shelf'\nconst componentName = 'Scene_Shelf_3_Products'\n\n/**\n * \u573A\u666F Tab \u6570\u636E\u63A5\u53E3\uFF08\u5339\u914D mock.json.sceneTabs \u7ED3\u6784\uFF09\n */\nexport interface ProductTab {\n  /** Tab \u552F\u4E00 ID */\n  id: string\n  /** Tab \u6807\u7B7E\u6587\u672C */\n  label: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: ProductCardData[]\n  /** \u8D44\u6E90\u5757\uFF08\u5982 PromotionalBar\uFF09 */\n  resourceBlocks?: Array<PromotionalBarProps['data'] & { blockType: string; display: 'visible' | 'hidden' }>\n}\n\n/**\n * SceneShelfV3 \u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface SceneShelfV3Data {\n  // ===== \u9876\u5C42\u914D\u7F6E\u5B57\u6BB5 =====\n  /** \u7EC4\u4EF6\u5B9E\u4F8B ID */\n  id: string\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u663E\u793A\u72B6\u6001 */\n  display?: 'visible' | 'hidden'\n  /** \u7EC4\u4EF6\u7C7B\u578B\u6807\u8BC6 */\n  blockType: 'ipc-scene-shelf-v3'\n\n  // ===== \u573A\u666F Tab \u5217\u8868 =====\n  /** \u573A\u666F Tab \u5217\u8868\uFF08\u6BCF\u4E2A Tab \u5305\u542B\u4EA7\u54C1\u548C resourceBlocks\uFF09 */\n  sceneTabs: ProductTab[]\n\n  // ===== \u6587\u6848\u914D\u7F6E =====\n  copy?: CopyConfig\n\n  // ===== \u663E\u793A\u914D\u7F6E =====\n  /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n  showTags?: boolean\n  /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570 */\n  viewMoreLimit?: number\n\n  // ===== \u6309\u94AE\u914D\u7F6E =====\n  /** \u4E3B\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u4E3B\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u6B21\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u6B21\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08\u7EC4\u4EF6\u5185\u90E8\u53EF\u80FD\u4F7F\u7528\uFF09 =====\n  /** \u7EC4\u4EF6\u6807\u9898\uFF08\u53EF\u9009\uFF0C\u975E mock \u5FC5\u9700\uFF09 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0\uFF08\u53EF\u9009\uFF0C\u975E mock \u5FC5\u9700\uFF09 */\n  description?: string\n  /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\uFF08\u53EF\u9009\uFF09 */\n  stockDisplayMode?: StockDisplayMode\n  /** \u5E93\u5B58\u9608\u503C\uFF08\u53EF\u9009\uFF09 */\n  stockThresholdValue?: number\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u53EF\u9009\uFF09 */\n  showOriginalPrice?: boolean\n}\n\nexport interface SceneShelfV3Props extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: SceneShelfV3Data\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (link: string) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n}\n\nexport interface SceneShelfV3Component extends React.ForwardRefExoticComponent<\n  SceneShelfV3Props & React.RefAttributes<HTMLDivElement>\n> {\n  ProductCard: typeof ProductCard\n}\n\n/**\n * \u4EA7\u54C1\u7F51\u683C\u7EC4\u4EF6 Props\n */\ninterface ProductsGridProps {\n  products: ProductCardData[]\n  copy?: CopyConfig\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  onLearnMore?: (link: string) => void\n  onShopNow?: (product: ProductCardData) => void\n  onAddToCart?: (product: ProductCardData) => void\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  viewMoreLimit?: number\n  theme?: 'light' | 'dark'\n  locale?: string\n  tabName?: string\n}\n\n/**\n * \u4EA7\u54C1\u7F51\u683C\u7EC4\u4EF6 - \u4EC5\u652F\u6301\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u65E0\u8F6E\u64AD\uFF09\n */\nfunction ProductsGridComponent({\n  products,\n  copy,\n  showTags,\n  stockDisplayMode,\n  stockThresholdValue,\n  onLearnMore,\n  onShopNow,\n  onAddToCart,\n  classNames,\n  secondaryButtonText,\n  secondaryButtonFun,\n  primaryButtonText,\n  primaryButtonFun,\n  showOriginalPrice,\n  viewMoreLimit,\n  theme = 'light',\n  locale = 'us',\n  tabName = '',\n}: ProductsGridProps) {\n  const [isExpanded, setIsExpanded] = React.useState(false)\n  const productWrapperRef = React.useRef<HTMLDivElement>(null)\n\n  useViewItemList(productWrapperRef, {\n    componentType,\n    componentName,\n    itemListName: 'Scene_Shelf_3_Products',\n    items: products.map((item, index) => ({\n      item_id: item.sku ?? '',\n      item_name: item.title,\n      item_variant: item.id ?? '',\n      price: item.currentPrice,\n      index: index,\n    })),\n    tabName,\n  })\n\n  const visibleLimit = useGridRowCount({\n    rows: viewMoreLimit ?? 0,\n    mobileCols: 2,\n    tabletCols: 3,\n    desktopCols: 4,\n  })\n\n  if (!products?.length) return null\n\n  const shouldShowViewMore = viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n\n  const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n  // \u5207\u6362\u5C55\u5F00\u72B6\u6001\n  const toggleExpanded = () => {\n    setIsExpanded(prev => !prev)\n  }\n\n  return (\n    <>\n      <div\n        ref={productWrapperRef}\n        className={cn(\n          'lg-desktop:gap-4 tablet:grid-cols-3 text-info-primary laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-3 grid grid-cols-2 gap-3',\n          classNames?.productGrid\n        )}\n      >\n        {displayedProducts.map((product, index) => (\n          <ProductCard\n            key={product.sku || index}\n            product={product}\n            showTags={showTags}\n            stockDisplayMode={stockDisplayMode}\n            stockThresholdValue={stockThresholdValue}\n            onLearnMore={onLearnMore}\n            onShopNow={onShopNow}\n            onAddToCart={onAddToCart}\n            classNames={classNames}\n            secondaryButtonText={secondaryButtonText}\n            secondaryButtonFun={secondaryButtonFun}\n            primaryButtonText={primaryButtonText}\n            primaryButtonFun={primaryButtonFun}\n            showOriginalPrice={showOriginalPrice}\n            copy={copy}\n            theme={theme}\n            locale={locale}\n            index={index}\n            tabName={tabName}\n          />\n        ))}\n      </div>\n\n      {/* \u67E5\u770B\u66F4\u591A\u6309\u94AE */}\n      {shouldShowViewMore && (\n        <div className={cn('laptop:mt-4 mt-3 flex justify-center', classNames?.viewMore)}>\n          <button\n            onClick={toggleExpanded}\n            className=\"text-info-primary hover:text-brand-0 lg-desktop:text-[16px] flex items-center gap-2 text-[14px] font-bold transition-colors\"\n            aria-expanded={isExpanded}\n          >\n            {isExpanded ? copy?.viewLessLabel : copy?.viewMoreLabel}\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\nconst ProductsGrid = React.memo(ProductsGridComponent)\nProductsGrid.displayName = 'SceneShelfV3.ProductsGrid'\n\n/**\n * SceneShelfV3 - \u573A\u666F\u63A8\u8350\u8D27\u67B6 V3\n *\n * @description \u5E73\u94FA\u7F51\u683C\u5E03\u5C40\u7684\u8D27\u67B6\u7EC4\u4EF6\uFF0C\u652F\u6301 Tab \u5206\u7EC4\u3001\u6BCF\u4E2A Tab \u72EC\u7ACB\u914D\u7F6E PromotionalBar \u548C\u67E5\u770B\u66F4\u591A\u529F\u80FD\n */\nconst SceneShelfV3 = React.forwardRef<HTMLDivElement, SceneShelfV3Props>(\n  ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, ...props }, ref) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n    const { locale = 'us' } = useAiuiContext()\n\n    useExposure(boxRef, {\n      componentType: 'image',\n      componentName: 'scene_shelf_banner',\n    })\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const {\n      theme = 'light',\n      sceneTabs = [],\n      showTags = true,\n      stockDisplayMode,\n      stockThresholdValue,\n      showOriginalPrice = true,\n      secondaryButtonText,\n      primaryButtonText,\n      secondaryButtonFun = 'learnMore',\n      primaryButtonFun = 'buyNow',\n      copy,\n      viewMoreLimit,\n    } = data\n\n    // \u5224\u65AD\u662F\u5426\u663E\u793A Tab\uFF08\u591A\u4E8E 1 \u4E2A Tab \u65F6\u663E\u793A\uFF09\n    const shouldShowTab = sceneTabs.length > 1\n\n    const gridProps: Omit<ProductsGridProps, 'products'> = {\n      copy,\n      showTags,\n      stockDisplayMode,\n      stockThresholdValue,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      viewMoreLimit,\n      theme,\n      locale,\n    }\n\n    return (\n      <div\n        ref={boxRef}\n        className={cn('w-full', { 'aiui-dark': theme === 'dark' }, className, classNames?.root)}\n        style={\n          {\n            '--progress-track-bg': theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {/* \u6807\u9898\u533A\u57DF */}\n        {data.title && (\n          <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n        )}\n        {data.description && (\n          <Text\n            size={3}\n            as=\"p\"\n            html={data.description}\n            className={cn('text-info-primary mb-6', classNames?.description)}\n          />\n        )}\n\n        {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n        <Tabs defaultValue={sceneTabs[0]?.id} className=\"w-full\">\n          {/* Tab \u5217\u8868 */}\n          {shouldShowTab && (\n            <TabsList className={cn('mb-6', classNames?.tabsList)}>\n              {sceneTabs.map(tab => (\n                <TabsTrigger key={tab.id} value={tab.id}>\n                  {tab.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          )}\n\n          {/* \u4EA7\u54C1\u5185\u5BB9\u533A\u57DF */}\n          {sceneTabs.map(tab => {\n            // \u4ECE resourceBlocks \u4E2D\u63D0\u53D6 PromotionalBar \u6570\u636E\n            const promotionalBarBlock: any = tab.resourceBlocks?.find(\n              block => block.blockType === 'PromotionalBar' && block.display === 'visible'\n            )\n\n            return (\n              <TabsContent key={tab.id} value={tab.id}>\n                {/* \u6BCF\u4E2A Tab \u72EC\u7ACB\u7684 PromotionalBar\uFF08\u53EF\u9009\uFF09 */}\n                {promotionalBarBlock && (\n                  <PromotionalBar\n                    data={promotionalBarBlock}\n                    className={cn('laptop:mb-4 mb-3', classNames?.promotionalBar)}\n                  />\n                )}\n                <ProductsGrid products={tab.products} {...gridProps} tabName={tab.label} />\n              </TabsContent>\n            )\n          })}\n        </Tabs>\n      </div>\n    )\n  }\n)\n\nSceneShelfV3.displayName = 'SceneShelfV3'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst SceneShelfV3WithProductCard = SceneShelfV3 as SceneShelfV3Component\nSceneShelfV3WithProductCard.ProductCard = ProductCard\n\nexport default withLayout(SceneShelfV3WithProductCard)\nexport type { StockDisplayMode, SceneShelfV3SemanticName, ProductCardData }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Text", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "PromotionalBar", "useExposure", "useViewItemList", "useGridRowCount", "useAiuiContext", "ProductCard", "withLayout", "componentType", "componentName", "ProductsGridComponent", "products", "copy", "showTags", "stockDisplayMode", "stockThresholdValue", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "viewMoreLimit", "theme", "locale", "tabName", "isExpanded", "setIsExpanded", "productWrapperRef", "item", "index", "visibleLimit", "shouldShowViewMore", "displayedProducts", "toggleExpanded", "prev", "product", "ProductsGrid", "SceneShelfV3", "className", "data", "props", "ref", "boxRef", "sceneTabs", "shouldShowTab", "gridProps", "tab", "promotionalBarBlock", "block", "SceneShelfV3WithProductCard", "SceneShelfV3_default"]
+}