@anker-in/headless-ui 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764141671439

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n  TEXT_START_OFFSET: '10%',\n  TEXT_ANIMATION_MULTIPLIER: 1.5,\n  TEXT_ANIMATION_OFFSET: 80,\n  VIDEO_HEIGHT_BASE: 102,\n  OVERLAP_FACTOR: 0.5,\n  VIDEO_PROGRESS_THRESHOLD: 0.9,\n  HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\ninterface ScrollTriggerInstance {\n  progress: number\n  kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n    useEffect(() => {\n      if (!titleRef.current || !sticky) return\n\n      // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n      const calculateLayout = () => {\n        if (!titleRef.current) return\n\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n        const newBtb = distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom\n        const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n        // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n        setbtb(prevBtb => {\n          return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n        })\n\n        setTitleHeight(prevHeight => {\n          return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n            ? newTitleHeight\n            : prevHeight\n        })\n      }\n\n      // \u521D\u59CB\u8BA1\u7B97\n      calculateLayout()\n\n      // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n      const resizeObserver = new ResizeObserver(() => {\n        // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      })\n\n      resizeObserver.observe(titleRef.current)\n\n      // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n      const handleScroll = () => {\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      }\n\n      // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n      let scrollTimeout: NodeJS.Timeout\n      const throttledScroll = () => {\n        if (!scrollTimeout) {\n          scrollTimeout = setTimeout(() => {\n            handleScroll()\n            scrollTimeout = null as any\n          }, 100)\n        }\n      }\n\n      window.addEventListener('scroll', throttledScroll, { passive: true })\n\n      return () => {\n        resizeObserver.disconnect()\n        window.removeEventListener('scroll', throttledScroll)\n        if (scrollTimeout) clearTimeout(scrollTimeout)\n      }\n    }, [sticky])\n\n    // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n    useEffect(() => {\n      if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n      const titleElement = titleFadeInRef.current\n      const height = titleElement.clientHeight || 80\n\n      // \u5206\u8BCD\n      splitTextInstance.current = new SplitText(titleElement, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n\n      const words = splitTextInstance.current.words\n      const total = words.length\n      const interval = 1 / total\n\n      // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n      const wordAnimations = words.map((_, i) => {\n        const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n        const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n        return { start, width }\n      })\n\n      // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n      gsap.set(words, { opacity: 0 })\n\n      // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        scrub: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n          words.forEach((word, i) => {\n            const { start, width } = wordAnimations[i]\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n\n          // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n          if (bgRef.current) {\n            gsap.set(bgRef.current, { opacity: progress })\n          }\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        splitTextInstance.current?.revert()\n        scrollTriggerRef.current?.kill()\n      }\n    }, [titleAnimation, inView])\n\n    // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n    useEffect(() => {\n      if (!inView || !titleRef.current) return\n\n      heightTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: self => {\n          setVideoHeightProgress(self.progress)\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        heightTriggerRef.current?.kill()\n      }\n    }, [inView])\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n    const handleBtnClick = useCallback(() => {\n      setVisible(true)\n      onBtnClick?.()\n    }, [onBtnClick])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n    // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n    if (!sticky) {\n      return (\n        <>\n          <div\n            id={id}\n            className={cn(\n              'relative overflow-hidden',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {/* \u5185\u5BB9\u5C42 */}\n              {!titleAnimation && (\n                <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* \u89C6\u9891\u5C42 */}\n              <ScrollLoadVideo\n                videoRef={videoRef}\n                poster={img?.url || ''}\n                src={video?.url!}\n                className=\"tablet:block hidden size-full\"\n                videoClassName=\"object-cover\"\n                muted\n                loop\n                playsInline\n                autoplay\n                webkit-playsinline\n                x5-playsinline\n              />\n              <ScrollLoadVideo\n                videoRef={videoRef}\n                poster={img?.url || ''}\n                src={mobileVideo?.url || video?.url!}\n                className=\"tablet:hidden block size-full\"\n                videoClassName=\"object-cover\"\n                muted\n                loop\n                playsInline\n                autoplay\n                webkit-playsinline\n                x5-playsinline\n              />\n            </div>\n\n            {/* \u57CB\u70B9\u5143\u7D20 */}\n            <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n          </div>\n\n          {visible && youtubeId && (\n            <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n          )}\n        </>\n      )\n    }\n\n    // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n    return (\n      <>\n        <div\n          ref={titleRef}\n          className={cn(\n            'relative z-10',\n            aspect,\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef}>\n            {!titleAnimation && (\n              <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px]  text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px]  text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n                    {btnText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <div\n          style={{\n            marginBottom: `-${btb}px`,\n            marginTop: `-${titleHeight}px`,\n            zIndex: zIndexVideo,\n          }}\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0\">\n            <div\n              id={id}\n              className={cn('relative h-screen w-full overflow-hidden', {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px]  absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div\n                className=\"media-cover absolute left-0 top-0 size-full\"\n                style={{\n                  height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n                }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { MediaPlayerMultiProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -3,7 +3,7 @@ import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<{
     mediaPlayerStickyRef: HTMLDivElement;
 }>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MediaSceneSwitcherProps } from './types.js';
+import 'swiper/css';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js

@@ -0,0 +1,11 @@
+"use client";import{Fragment as Q,jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as z,useRef as v,useEffect as R,forwardRef as H,useImperativeHandle as F}from"react";import{useMediaQuery as D}from"react-responsive";import{cn as x}from"../../helpers/utils.js";import{withLayout as V}from"../../shared/Styles.js";import{Heading as p,Text as T,Picture as A}from"../../components/index.js";import"../SwiperBox/index.js";import{useExposure as I}from"../../hooks/useExposure.js";import{Swiper as B,SwiperSlide as _}from"swiper/react";import{Autoplay as q}from"swiper/modules";import"swiper/css";const k="media",U="media_scene_switcher",h=3e3,$=({data:t,configuration:o,theme:u})=>{const m=v(null),a=o?.isActive||!1;return I(m,{componentType:k,componentName:U,componentTitle:t?.title,position:(o?.index??0)+1}),r("div",{ref:m,className:x("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":a,"bg-[#EAEAEC] text-[1D1D1F]":a&&u==="light"}),onClick:()=>o?.onItemClick?.(o?.index??0),children:[r("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[e("div",{className:"media-scene-switcher-item-title flex-1",children:e(p,{as:"h6",size:2,html:t?.title})}),e("div",{className:"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",children:e(p,{as:"h6",size:2,html:t?.tag})})]}),e("div",{className:x("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":a}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:a?`progress-bar ${h}ms ease-out`:"none"}})]})},O=({data:t,configuration:o,theme:u})=>{const m=v(null),a=o?.isActive||!1,n=D({query:"(max-width: 768px)"});I(m,{componentType:k,componentName:U,componentTitle:t?.title,position:(o?.index??0)+1});const c=n&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,s=n&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,f=s||t?.videoUrl?.thumbnailURL||"";return r("div",{ref:m,className:"media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden",children:[e("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:c?e("video",{src:c,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:f,className:"size-full object-cover"}):s?e(A,{className:"size-full",imgClassName:"size-full object-cover",source:s,alt:t?.title||""}):null}),r("div",{className:"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white",children:[e("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:e(p,{as:"h6",size:2,html:t?.title})}),e("div",{className:"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",children:e(p,{as:"h6",size:1,html:t?.tag})})]}),e("div",{className:x("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":a}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:a?`progress-bar ${h}ms ease-out`:"none"}})]})},E=H(({className:t="",data:o,id:u,style:m},a)=>{const{title:n,subtitle:c,items:s=[],theme:f="light"}=o||{},[w,b]=z(0),[P,C]=z(0),g=v(null),d=v(0),S=D({query:"(max-width: 1023px)"});F(a,()=>g.current),I(g,{componentType:k,componentName:U,componentTitle:n}),R(()=>{if(!(S||s.length===0))return d.current=window.setInterval(()=>{b(i=>(i+1)%s.length)},h),()=>{d.current&&window.clearInterval(d.current)}},[S,s.length]);const L=i=>{b(i),d.current&&window.clearInterval(d.current),d.current=window.setInterval(()=>{b(l=>(l+1)%s.length)},h)},N=s[w],G=N?.videoUrl?.url,K=N?.imageUrl?.url||N?.videoUrl?.thumbnailURL||"";return r(Q,{children:[e("style",{children:`
+          @keyframes progress-bar {
+            from {
+              transform: translate3d(-100%, -2px, 0);
+            }
+            to {
+              transform: translate3d(0, -2px, 0);
+            }
+          }
+        `}),r("section",{id:u,ref:g,className:x("media-scene-switcher text-info-primary w-full overflow-hidden",{"aiui-dark":f==="dark"},t),children:[r("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",children:s.map((i,l)=>{const M=i?.videoUrl?.url,y=i?.imageUrl?.url,j=y||i?.videoUrl?.thumbnailURL||"";return e("div",{className:x("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":l===w}),children:M?e("video",{src:M,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:j,className:"size-full object-cover"}):y?e(A,{className:"size-full",imgClassName:"size-full object-cover",source:y,alt:i?.title||""}):null},i.id||l)})}),r("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[r("div",{className:"media-scene-switcher-header flex flex-col",children:[n&&e(p,{as:"h3",html:n,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),c&&e(T,{as:"span",size:4,html:c,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:s.map((i,l)=>e($,{data:i,configuration:{index:l,isActive:l===w,onItemClick:L}},i.id||l))})]})]}),r("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[r("div",{className:"media-scene-switcher-mobile-header",children:[n&&e(p,{as:"h2",html:n,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight"}),c&&e(T,{as:"span",size:4,html:c,className:"media-scene-switcher-subtitle text-[14px] text-white"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(B,{onSlideChange:i=>C(i.realIndex),initialSlide:0,modules:[q],loop:s.length>1,autoplay:s.length>1?{delay:h,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:s.map((i,l)=>e(_,{className:"!h-auto !w-[296px]",children:e(O,{data:i,configuration:{index:l,isActive:l===P}})},i.id||l))})})]})]})]})});E.displayName="MediaSceneSwitcher";var ae=V(E);export{ae as default};
+//# sourceMappingURL=MediaSceneSwitcher.js.map

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'text-[#6D6D6F]',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n        <div className=\"media-scene-switcher-item-title flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className=\"media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden\"\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div className=\"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white\">\n        <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n  ({ className = '', data, id, style }, ref) => {\n    const { title, subtitle, items = [], theme = 'light' } = data || {}\n    const [currentIndex, setCurrentIndex] = useState(0)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const intervalRef = useRef<number>(0)\n    const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n    })\n\n    // Auto-play functionality for desktop\n    useEffect(() => {\n      if (isMobile || items.length === 0) return\n\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [isMobile, items.length])\n\n    const handleItemClick = (index: number) => {\n      setCurrentIndex(index)\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n    }\n\n    const currentItem = items[currentIndex]\n    const videoUrl = currentItem?.videoUrl?.url\n    const imageUrl = currentItem?.imageUrl?.url\n    const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n    return (\n      <>\n        <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, -2px, 0);\n            }\n            to {\n              transform: translate3d(0, -2px, 0);\n            }\n          }\n        `}</style>\n        <section\n          id={id}\n          ref={innerRef}\n          className={cn(\n            'media-scene-switcher text-info-primary w-full overflow-hidden',\n            {\n              'aiui-dark': theme === 'dark',\n            },\n            className\n          )}\n        >\n          {/* Desktop Layout */}\n          <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n            <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n              {items.map((item, index) => {\n                const itemVideoUrl = item?.videoUrl?.url\n                const itemImageUrl = item?.imageUrl?.url\n                const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n                return (\n                  <div\n                    key={item.id || index}\n                    className={cn(\n                      'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                      {\n                        'inline-block': index === currentIndex,\n                      }\n                    )}\n                  >\n                    {itemVideoUrl ? (\n                      <video\n                        src={itemVideoUrl}\n                        playsInline\n                        autoPlay\n                        loop\n                        muted\n                        poster={itemPosterUrl}\n                        className=\"size-full object-cover\"\n                      />\n                    ) : itemImageUrl ? (\n                      <Picture\n                        className=\"size-full\"\n                        imgClassName=\"size-full object-cover\"\n                        source={itemImageUrl}\n                        alt={item?.title || ''}\n                      />\n                    ) : null}\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n              <div className=\"media-scene-switcher-header flex flex-col\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                  />\n                )}\n                {subtitle && (\n                  <Text\n                    as=\"span\"\n                    size={4}\n                    html={subtitle}\n                    className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n                  />\n                )}\n              </div>\n\n              <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n                {items.map((item, index) => (\n                  <DesktopItem\n                    key={item.id || index}\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === currentIndex,\n                      onItemClick: handleItemClick,\n                    }}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Mobile Layout */}\n          <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n            <div className=\"media-scene-switcher-mobile-header\">\n              {title && (\n                <Heading\n                  as=\"h2\"\n                  html={title}\n                  size={2}\n                  className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n                />\n              )}\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n              <Swiper\n                onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n                initialSlide={0}\n                modules={[Autoplay]}\n                loop={items.length > 1}\n                autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n                spaceBetween={12}\n                slidesPerView=\"auto\"\n                watchSlidesProgress={true}\n                className=\"w-full !overflow-visible\"\n              >\n                {items.map((item, index) => (\n                  <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n                    <MobileItem\n                      data={item}\n                      configuration={{\n                        index,\n                        isActive: index === activeIndex,\n                      }}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </section>\n      </>\n    )\n  }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MediaSceneSwitcher.js';
+export * from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as e}from"./MediaSceneSwitcher.js";export*from"./types.js";export{e as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaSceneSwitcher/index.ts"],
+  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport * from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,0BACxB,WAAc",
+  "names": ["default"]
+}

package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentCommonProps, Media, Theme } from '../../types/props.js';
+export interface MediaSceneSwitcherItem {
+    id: string;
+    title: string;
+    tag?: string;
+    videoUrl?: Media | null;
+    imageUrl?: Media | null;
+    mobVideoUrl?: Media | null;
+    mobImageUrl?: Media | null;
+}
+export interface MediaSceneSwitcherProps extends ComponentCommonProps {
+    data: {
+        title?: string;
+        subtitle?: string;
+        items?: MediaSceneSwitcherItem[];
+        /** 主题，默认 light */
+        theme?: Theme;
+    };
+}

package/dist/esm/biz-components/MediaSceneSwitcher/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/MediaSceneSwitcher/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MemberEquityProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { MultiLayoutGraphicBlockProps } from './types';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MultiLayoutGraphicBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export type { MultiLayoutGraphicBlockProps };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigationSearchProps } from './types.js';
 export declare const canSearch: (target: any) => boolean;
 declare const NavigationSearch: import("react").ForwardRefExoticComponent<NavigationSearchProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import type { Media, Theme } from '../../types/props.js';
+export interface ProductItemData {
+    /** 产品标签文本 */
+    text?: string;
+    /** 桌面端媒体（视频或图片） */
+    media?: Media;
+    /** 移动端媒体（视频或图片） */
+    mobMedia?: Media;
+    /** 桌面端封面图（仅用于视频） */
+    poster?: Media;
+    /** 移动端封面图（仅用于视频） */
+    mobPoster?: Media;
+}
+/** 标题类型 */
+export type TitleType = 'selling-point' | 'primary' | 'secondary';
+/** 文本对齐方式 */
+export type TextAlign = 'left' | 'center';
+/** 图片宽度比例（2张图片时） */
+export type TwoImageRatio = '2:3' | '1:1';
+/** 图片宽度比例（3张图片时） */
+export type ThreeImageRatio = '1:1:1';
+export interface ProductCompareProps {
+    /** 组件数据 */
+    data: {
+        /** 主标题 */
+        title?: string;
+        /** 标题类型：selling-point（卖点）、primary（一级标题）、secondary（二级标题） */
+        titleType?: TitleType;
+        /** 标题图标（仅当 titleType 为 selling-point 时有效） */
+        titleIcon?: Media;
+        /** 副标题 */
+        subtitle?: string;
+        /** 副标题下方的图片 */
+        subtitleImage?: Media;
+        /** 文本对齐方式：left（左对齐）、center（居中） */
+        textAlign?: TextAlign;
+        /** 产品列表（支持2-3个产品） */
+        products?: ProductItemData[];
+        /** 2张图片时的宽度比例 */
+        twoImageRatio?: TwoImageRatio;
+        /** 3张图片时的宽度比例 */
+        threeImageRatio?: ThreeImageRatio;
+        /** 主题：light 或 dark */
+        theme?: Theme;
+    };
+    /** 外层容器类名 */
+    className?: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useEffect as T,useRef as I,useState as M}from"react";import{Heading as x,Text as P}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as R}from"../../shared/Styles.js";function k({children:e,offset:a=800}){const[r,i]=M(!1),p=I(null);return T(()=>{const o=new IntersectionObserver(([u])=>u.isIntersecting&&i(!0),{rootMargin:`${a}px`});return p.current&&o.observe(p.current),()=>o.disconnect()},[a]),t("div",{ref:p,className:"size-full",children:r&&e})}function g({media:e,poster:a,className:r}){return e?.url?e.mimeType?.startsWith("video/")?t("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:a?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:r,width:e.width,height:e.height}):t("img",{src:e.url,alt:e.alt||"",className:r,width:e.width,height:e.height}):null}function z(e,a,r){return a===2?r==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function C(e){const{title:a,titleType:r="primary",titleIcon:i,subtitle:p,subtitleImage:o,textAlign:u="left",products:n=[],twoImageRatio:h="2:3",threeImageRatio:L="1:1:1",theme:b="light"}=e.data,m=u==="center"?"text-center":"text-left laptop:text-left",f=()=>r==="secondary"?3:4,y=()=>a?r==="selling-point"&&i?d("div",{className:l("product-compare-title-wrapper flex items-center gap-[8px]",m==="text-center"?"justify-center":""),children:[t("img",{src:i.url,alt:i.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),t(x,{as:"h2",size:f(),html:a,className:"product-compare-title",style:{color:"#00BEFA"}})]}):t(x,{as:"h2",size:f(),html:a,className:l("product-compare-title",m)}):null;return d("section",{className:l("product-compare text-info-primary",e.className,{"aiui-dark":b==="dark"}),children:[y(),p&&t(P,{as:"p",size:2,html:p,className:l("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",m)}),o&&t("div",{className:l("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",m==="text-center"?"flex justify-center":""),children:t("img",{src:o.url,alt:o.alt||"",className:"max-w-full",width:o.width,height:o.height})}),t("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:n.map((s,c)=>{const v=c===n.length-1,w=z(c,n.length,h),N=v?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return d("div",{className:l("product-compare-item rounded-box relative shrink overflow-hidden",w,{"order-2 tablet:order-1":c===0&&n.length===2,"order-1 tablet:order-2":c===1&&n.length===2}),children:[s.text&&t("div",{className:l("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white",N),children:t(x,{as:"h6",className:"font-bold",size:1,children:s.text})}),d(k,{offset:1500,children:[t(g,{media:s.media,poster:s.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),t(g,{media:s.mobMedia,poster:s.mobPoster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},c)})})]})}var H=R(C);export{H as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n      rootMargin: `${offset}px`,\n    })\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n  if (!media?.url) return null\n\n  const isVideo = media.mimeType?.startsWith('video/')\n\n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n                'order-2 tablet:order-1': index === 0 && products.length === 2,\n                'order-1 tablet:order-2': index === 1 && products.length === 2,\n              })}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia}\n                  poster={product.mobPoster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "getProductLayoutClasses", "index", "totalProducts", "twoImageRatio", "ProductCompare", "props", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass", "ProductCompare_default"]
+}

package/dist/esm/biz-components/ProductHero/ProductHero.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ProductHeroProps } from './types.js';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/ProductHero/ProductHero.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import f,{useRef as b,useImperativeHandle as x}from"react";import{Heading as a,Button as _,Picture as k,Text as N}from"../../components/index.js";import{cn as H}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";import{useExposure as P}from"../../hooks/useExposure.js";const v="image",w="product_hero",l=f.forwardRef(({data:c,className:i},m)=>{const{title:s,subtitle:e,ctaText:p,poster:u,mobPoster:n,ctaLink:d,theme:h="light"}=c,o=b(null);return P(o,{componentType:v,componentName:w,componentTitle:s,componentDescription:e}),x(m,()=>o.current),r("section",{ref:o,"data-ui-component-id":"ProductHero",className:H("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":h==="dark"},i),children:[r("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[r("div",{className:"product-hero__text",children:[t(a,{as:"h3",size:4,html:s,className:"product-hero__title"}),t(a,{as:"h4",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),t(N,{as:"p",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),p&&t("a",{href:d,className:"product-hero__cta-link",children:t(_,{className:"product-hero__cta-button w-fit",children:p})})]}),t(k,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] aspect-[358/360] shrink",source:`${u?.url}, ${n?.url} 768`})]})});l.displayName="ProductHero";var R=g(l);export{R as default};
+//# sourceMappingURL=ProductHero.js.map

package/dist/esm/biz-components/ProductHero/ProductHero.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "aAsCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,EAAStB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYc,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMQ,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,cACrB,UAAWhB,EACT,sJACA,CACE,YAAae,IAAU,MACzB,EACAR,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,0GACb,UAAAA,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,UAAU,sBAAsB,EACzElB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,yHACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,wHACZ,GACF,EACCC,GACCpB,EAAC,KAAE,KAAMuB,EAAS,UAAU,yBAC1B,SAAAvB,EAACM,EAAA,CAAO,UAAU,iCAAkC,SAAAc,EAAQ,EAC9D,GAEJ,EACApB,EAACO,EAAA,CACC,UAAU,4GACV,OAAQ,GAAGc,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOY,EAAQhB,EAAWI,CAAW",
+  "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef", "ProductHero_default"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './ProductHero.js';
+export type { ProductHeroProps } from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as e}from"./ProductHero.js";export{e as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductHero/index.ts"],
+  "sourcesContent": ["export { default } from './ProductHero.js'\nexport type { ProductHeroProps } from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
+}

package/dist/esm/biz-components/ProductHero/types.d.ts

@@ -0,0 +1,23 @@
+import type { Media, Theme } from '../../types/props';
+export interface ProductHeroProps {
+    data: {
+        /** 主标题 */
+        title: string;
+        /** 副标题 */
+        subtitle: string;
+        /** CTA 按钮文本 */
+        ctaText: string;
+        /** CTA 按钮链接 */
+        ctaLink: string;
+        /** 桌面端图片 URL */
+        poster: Media;
+        /** 移动端图片 URL */
+        mobPoster: Media;
+        /** 3D 模型源（可选，暂未使用） */
+        modelSrc?: string;
+        /** 主题，默认 light */
+        theme?: Theme;
+    };
+    /** 自定义类名 */
+    className?: string;
+}

package/dist/esm/biz-components/ProductHero/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/ProductHero/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/biz-components/ProductNav/ProductNav.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ProductNavProps } from './types.js';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<ProductNavProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/ProductNav/ProductNav.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as N,useEffect as y,forwardRef as E,useImperativeHandle as P,useRef as T}from"react";import{cn as i}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";import{Button as x,Text as d}from"../../components/index.js";import{useExposure as C}from"../../hooks/useExposure.js";import*as c from"@radix-ui/react-popover";const D="navigation",H="product_nav",M=s=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:e("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),v=E(({className:s="",data:m,id:u},f)=>{const{tabLinks:p=[],anchorList:h=[],textLink:a,buyBtn:r,theme:k="light"}=m||{},[g,w]=N(""),l=T(null);P(f,()=>l.current),C(l,{componentType:D,componentName:H}),y(()=>{const t=()=>{w(window.location.hash)};return t(),window.addEventListener("hashchange",t),()=>{window.removeEventListener("hashchange",t)}},[]);const b=t=>{t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})};return o("div",{id:u,ref:l,className:i("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":k==="dark"},s),children:[o("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[o("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[o("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[p.map((t,n)=>o("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[e("a",{href:t.link,className:i("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":n!==0,"hidden desktop:block":n===1}),children:e("span",{children:t.label})}),n!==p.length-1&&e("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},t.link||n)),p.length>1&&o(c.Root,{children:[e(c.Trigger,{asChild:!0,children:e("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-[4px] inline-block","aria-label":"More products",children:e(M,{className:"text-[#1D1D1F]"})})}),e(c.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:p.slice(1).map(t=>e("a",{href:t.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:e("span",{children:t.label})},t.link))})]})]}),o("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[a?.link&&e("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:e(d,{size:2,className:"text-nowrap",children:a.text})}),r?.link&&e(x,{as:"a",href:r.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:r.text})]})]}),e("div",{className:"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]",children:h.map(t=>o("a",{href:`#${t.id}`,className:"product-nav-anchor-link",onClick:n=>{b(n)},children:[e(d,{size:2,className:"product-nav-anchor-text text-nowrap",children:t.label}),e("div",{className:i("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"bg-brand-color":g===`#${t.id}`})})]},t.id))})]}),o("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[a?.link&&e("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:e(d,{size:2,className:"text-nowrap",children:a.text})}),r?.link&&e(x,{as:"a",href:r.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:r.text})]})]})});v.displayName="ProductNav";var V=L(v);export{V as default};
+//# sourceMappingURL=ProductNav.js.map