{"version":3,"file":"WithSmoothPauseScroll.BaO2M4fr.mjs","names":["useMemo","useRef","useState"],"sources":["https:/framerusercontent.com/modules/1cunNVXbkmI31RhCT2Og/ffPztGy1AdfIRt0ZH3ZC/WithSmoothPauseScroll.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{forwardRef,useRef,useState,useMemo,useLayoutEffect}from\"react\";import{motion,useAnimation,useMotionValue}from\"framer-motion\";export function withSmoothPauseScroll(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const{autoIntervalSec=2.5,gap=24,overshoot=28,flingVelocityThreshold=300,itemWidth,evenCenter=\"left\",children,style,...rest}=props;// childrenを正規化\nconst baseItems=useMemo(()=>(Array.isArray(children)?children:[children]).filter(Boolean),[children]);if(baseItems.length===0)return null;// 無限ループ用に3倍化したリスト\nconst loopedItems=useMemo(()=>[...baseItems,...baseItems,...baseItems],[baseItems]);const controls=useAnimation();const x=useMotionValue(0);// 幅計測Refs\nconst viewportRef=useRef(null);const sampleItemRef=useRef(null);const[slotWidth,setSlotWidth]=useState(itemWidth?itemWidth+gap:null);const[cardWidth,setCardWidth]=useState(itemWidth??null);const[viewportWidth,setViewportWidth]=useState(null);// カード幅とスロット幅を計測\nuseLayoutEffect(()=>{if(itemWidth){setCardWidth(itemWidth);setSlotWidth(itemWidth+gap);return;}const el=sampleItemRef.current;if(!el)return;const updateMeasuredWidths=()=>{const rect=el.getBoundingClientRect();setCardWidth(rect.width);setSlotWidth(rect.width+gap);};updateMeasuredWidths();const ro=new ResizeObserver(updateMeasuredWidths);ro.observe(el);return()=>ro.disconnect();},[itemWidth,gap]);// ビューポート幅を計測\nuseLayoutEffect(()=>{const el=viewportRef.current;if(!el)return;const updateViewportWidth=()=>setViewportWidth(el.clientWidth);updateViewportWidth();const ro=new ResizeObserver(updateViewportWidth);ro.observe(el);return()=>ro.disconnect();},[]);// ループ開始インデックス\nconst loopStartIndex=baseItems.length;// 偶数時の中央インデックス（論理的中心）\nconst logicalCenterIndex=useMemo(()=>{const count=baseItems.length;if(count%2===1)return Math.floor(count/2);return evenCenter===\"left\"?count/2-1:count/2;},[baseItems.length,evenCenter]);// 現在のインデックス\nconst[currentIndex,setCurrentIndex]=useState(loopStartIndex+logicalCenterIndex);// 指定indexを中央に配置するためのtranslateXを算出\nconst getTranslateXForIndex=i=>{if(slotWidth==null||cardWidth==null||viewportWidth==null)return 0;const cardCenter=i*slotWidth+cardWidth/2;const viewportCenter=viewportWidth/2;return-(cardCenter-viewportCenter);};// 初期位置合わせ\nuseLayoutEffect(()=>{if(slotWidth==null||cardWidth==null||viewportWidth==null)return;const start=loopStartIndex+logicalCenterIndex;setCurrentIndex(start);x.set(getTranslateXForIndex(start));// eslint-disable-next-line react-hooks/exhaustive-deps\n},[slotWidth,cardWidth,viewportWidth,logicalCenterIndex]);// オーバーシュート付きアニメーション\nconst animateBounceTransition=async(toIndex,fromX)=>{if(slotWidth==null||cardWidth==null||viewportWidth==null)return;const target=getTranslateXForIndex(toIndex);const current=fromX??x.get();const direction=target-current>=0?1:-1;await controls.start({x:[current,target+direction*overshoot*.4,target],transition:{times:[0,.7,1],duration:.4,ease:\"easeOut\"}});x.set(target);setCurrentIndex(toIndex);};// 無限ループ境界の巻き戻しを考慮して移動\nconst wrapIndexAndAnimateTo=async(nextIndex,fromX)=>{const count=baseItems.length;if(nextIndex<=count-2){const aligned=nextIndex+count;x.set(getTranslateXForIndex(aligned));setCurrentIndex(aligned);await animateBounceTransition(aligned);}else if(nextIndex>=count*2+1){const aligned=nextIndex-count;x.set(getTranslateXForIndex(aligned));setCurrentIndex(aligned);await animateBounceTransition(aligned);}else{await animateBounceTransition(nextIndex,fromX);}};// 自動スクロール\nuseLayoutEffect(()=>{if(slotWidth==null||cardWidth==null||viewportWidth==null)return;if(autoIntervalSec<=0)return;const id=setInterval(()=>wrapIndexAndAnimateTo(currentIndex+1),autoIntervalSec*1e3);return()=>clearInterval(id);// eslint-disable-next-line react-hooks/exhaustive-deps\n},[slotWidth,cardWidth,viewportWidth,currentIndex,autoIntervalSec]);// ドラッグ終了時のスナップ処理\nconst handleDragSnapEnd=async(_,info)=>{if(slotWidth==null||cardWidth==null||viewportWidth==null)return;const currentX=x.get()+info.offset.x;const currentCardCenterX=-currentX+viewportWidth/2;const approxIndex=currentCardCenterX/slotWidth-cardWidth/2/slotWidth;let nearest=Math.round(approxIndex);if(Math.abs(info.velocity.x)>flingVelocityThreshold){nearest+=info.velocity.x<0?1:-1;}await wrapIndexAndAnimateTo(nearest,currentX);};return /*#__PURE__*/_jsxs(Component,{ref:ref,...rest,style:{...style,overflow:\"hidden\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:viewportRef,style:{width:\"100%\"},children:/*#__PURE__*/_jsx(motion.div,{style:{display:\"flex\",flexDirection:\"row\",alignItems:\"center\",gap,width:\"max-content\",touchAction:\"pan-x\",x},drag:\"x\",dragMomentum:false,onDragEnd:handleDragSnapEnd,animate:controls,children:loopedItems.map((node,i)=>/*#__PURE__*/_jsx(\"div\",{ref:i===loopStartIndex+logicalCenterIndex?sampleItemRef:undefined,style:{flex:\"0 0 auto\"},children:node},i))})}),/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",gap:6,marginTop:12,justifyContent:\"center\"},children:baseItems.map((_,i)=>{const count=baseItems.length;const logical=((currentIndex-loopStartIndex)%count+count)%count;const isActive=logical===i;return /*#__PURE__*/_jsx(\"div\",{style:{width:8,height:8,borderRadius:\"50%\",backgroundColor:isActive?\"rgba(0,0,0,0.8)\":\"rgba(0,0,0,0.2)\",transition:\"background-color 0.3s ease\"}},i);})})]});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withSmoothPauseScroll\":{\"type\":\"reactHoc\",\"name\":\"withSmoothPauseScroll\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WithSmoothPauseScroll.map"],"mappings":"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"}