{"version":3,"file":"shared-lib.B8JsInu9.mjs","names":["React.useRef","React.useMemo","React.useState"],"sources":["https:/framerusercontent.com/modules/5b8OTZC68SEYrPOInwYK/l5fq5OrZT50VXtxhEgHy/GlassPillFX.js","https:/framerusercontent.com/modules/bXNVX5J32UMwil3v4YbF/O5lDSt776m7o7qdSTY75/siteMetadata.js"],"sourcesContent":["// GlassPillFX — Framer code component · barre de navigation en verre liquide.\n// La pastille suit l'élément survolé avec un ressort, le reflet spéculaire glisse avec elle,\n// et le verre réfracte réellement le fond (flou + saturation + bord lumineux).\n//\n// Pourquoi ce composant : d'après l'étude du catalogue complet, « Navigation » est la\n// catégorie aux MEILLEURS likes médians (7,5) et le motif « liquid glass » est celui qui\n// monte le plus vite sur les 120 derniers jours (Liquid Glass Navbar, Gooey Navbar,\n// Floating Pill Nav à 418 likes). Voir G:\\TemplateFactory\\market\\ETUDE.md\n//\n// CSS + SVG purs, zéro dépendance, zéro ressource externe.\n// Conforme au contrôle G:\\Framer3D\\prototypes\\preflight.mjs dès l'écriture.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 64\n * @framerDisableUnlink\n */export default function GlassPillFX(props){const{liens,actif,flou,saturation,teinte,opacite,bordure,rayon,hauteur,espacement,couleurTexte,couleurActive,pastille,reflet,ressort,police}=props;const barreRef=React.useRef(null);const itemsRef=React.useRef([]);const pastilleRef=React.useRef(null);const refletRef=React.useRef(null);const isStatic=useIsStaticRenderer();const items=React.useMemo(()=>(liens||[]).filter(Boolean),[liens]);const[survol,setSurvol]=React.useState(-1);const cible=survol>=0?survol:Math.min(actif,items.length-1);// La cible passe par une RÉFÉRENCE, jamais par les dépendances de l'effet.\n// Sinon chaque survol remonte l'effet, l'état du ressort (position, vitesse) repart\n// de zéro, et la pastille se TÉLÉPORTE au lieu de rattraper — le ressort et le retard\n// du reflet, qui sont l'argument de vente du composant, ne se voient jamais.\nconst cibleRef=React.useRef(cible);cibleRef.current=cible;React.useEffect(()=>{const barre=barreRef.current;const p=pastilleRef.current;if(!barre||!p||isStatic||!items.length)return;const reduit=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;let raf=0;let mort=false;let x=0,l=0,vx=0,vl=0;let init=false;function boucle(){if(mort)return;raf=requestAnimationFrame(boucle);const el=itemsRef.current[cibleRef.current];if(!el)return;const rb=barre.getBoundingClientRect();const re=el.getBoundingClientRect();const cx=re.left-rb.left;const cl=re.width;if(!init){x=cx;l=cl;init=true;}if(reduit){x=cx;l=cl;}else{// ressort critique : la pastille rattrape sans osciller bêtement\nconst k=ressort*.06;const amorti=2*Math.sqrt(k);vx+=(cx-x)*k-vx*amorti;vl+=(cl-l)*k-vl*amorti;x+=vx;l+=vl;}p.style.transform=`translateX(${x.toFixed(2)}px)`;p.style.width=`${l.toFixed(2)}px`;if(refletRef.current){// le reflet spéculaire glisse en retard sur la pastille : c'est ce décalage\n// qui fait lire la surface comme du verre et non comme un aplat\nconst retard=Math.max(-1,Math.min(1,vx*.08));refletRef.current.style.transform=`translateX(${(retard*26).toFixed(2)}%)`;}}// Hors écran, la boucle est réellement ANNULÉE — pas seulement mise en sommeil.\n// Une boucle qui se réarme en ne dessinant rien continue de coûter 60 réveils par\n// seconde au navigateur : c'est exactement le motif de rejet du 05/08. Une barre de\n// navigation est le pire cas : elle vit tout en haut de page, donc hors écran dès\n// que le visiteur descend.\nfunction demarrer(){// garde indispensable : un IntersectionObserver peut notifier plusieurs fois\n// de suite, et deux boucles en parallele doubleraient la vitesse\nif(mort||raf)return;// ici le ressort n'intègre pas de dt : rien à remettre à l'heure, mais on repart\n// de la position courante, donc aucun saut visible au retour à l'écran\nraf=requestAnimationFrame(boucle);}function arreter(){cancelAnimationFrame(raf);raf=0;}const io=new IntersectionObserver(es=>{es.some(e=>e.isIntersecting)?demarrer():arreter();},{rootMargin:\"120px\"});io.observe(barre);return()=>{mort=true;cancelAnimationFrame(raf);io.disconnect();};},[items.length,ressort,isStatic]);const fd=police&&police.fontFamily||\"Inter, ui-sans-serif, system-ui, sans-serif\";return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsxs(\"nav\",{ref:barreRef,onPointerLeave:()=>setSurvol(-1),style:{position:\"relative\",display:\"inline-flex\",alignItems:\"center\",gap:espacement,padding:`0 ${espacement}px`,height:hauteur,borderRadius:rayon,// le verre : flou du fond + saturation + teinte très légère\nbackground:teinte,backdropFilter:`blur(${flou}px) saturate(${saturation})`,WebkitBackdropFilter:`blur(${flou}px) saturate(${saturation})`,border:`1px solid rgba(255,255,255,${bordure})`,boxShadow:`inset 0 1px 0 rgba(255,255,255,${bordure*1.6}), 0 18px 50px rgba(0,0,0,.35)`,opacity:opacite,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:refletRef,\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,pointerEvents:\"none\",background:`linear-gradient(105deg, transparent 30%, rgba(255,255,255,${reflet}) 48%, transparent 62%)`,transition:\"transform .25s ease-out\"}}),/*#__PURE__*/_jsx(\"div\",{ref:pastilleRef,\"aria-hidden\":\"true\",style:{position:\"absolute\",top:5,bottom:5,left:0,width:0,borderRadius:rayon-5,background:pastille,boxShadow:\"inset 0 1px 0 rgba(255,255,255,.28)\",pointerEvents:\"none\"}}),items.map((it,i)=>/*#__PURE__*/_jsx(\"a\",{ref:el=>{itemsRef.current[i]=el;},href:it&&it.lien||\"#\",onPointerEnter:()=>setSurvol(i),onFocus:()=>setSurvol(i),style:{position:\"relative\",padding:`0 ${Math.round(espacement*1.1)}px`,height:hauteur-10,display:\"inline-flex\",alignItems:\"center\",borderRadius:rayon-5,textDecoration:\"none\",whiteSpace:\"nowrap\",fontFamily:fd,fontSize:police&&police.fontSize||14,fontWeight:police&&police.fontWeight||500,letterSpacing:police&&police.letterSpacing||\"0.01em\",color:i===cible?couleurActive:couleurTexte,transition:\"color .25s ease\"},children:it&&it.libelle||\"\"},i))]})});}GlassPillFX.defaultProps={liens:[{libelle:\"Work\",lien:\"#\"},{libelle:\"Studio\",lien:\"#\"},{libelle:\"Journal\",lien:\"#\"},{libelle:\"Contact\",lien:\"#\"}],actif:0,flou:14,saturation:1.7,teinte:\"rgba(255,255,255,0.10)\",opacite:1,bordure:.22,rayon:26,hauteur:52,espacement:8,couleurTexte:\"rgba(255,255,255,0.62)\",couleurActive:\"#0B0B12\",pastille:\"rgba(255,255,255,0.92)\",reflet:.16,ressort:1};addPropertyControls(GlassPillFX,{liens:{type:ControlType.Array,title:\"Links\",control:{type:ControlType.Object,controls:{libelle:{type:ControlType.String,title:\"Label\",defaultValue:\"Link\"},lien:{type:ControlType.Link,title:\"Destination\"}}}},actif:{type:ControlType.Number,min:0,max:12,step:1,title:\"Active by default\"},flou:{type:ControlType.Number,min:0,max:40,step:1,unit:\"px\",title:\"Glass blur\"},saturation:{type:ControlType.Number,min:1,max:3,step:.05,title:\"Saturation\"},teinte:{type:ControlType.Color,title:\"Glass tint\"},bordure:{type:ControlType.Number,min:0,max:.6,step:.02,title:\"Edge highlight\"},reflet:{type:ControlType.Number,min:0,max:.5,step:.02,title:\"Specular highlight\"},pastille:{type:ControlType.Color,title:\"Pill\"},couleurTexte:{type:ControlType.Color,title:\"Text\"},couleurActive:{type:ControlType.Color,title:\"Active text\"},ressort:{type:ControlType.Number,min:.3,max:3,step:.1,title:\"Spring\",description:\"How quickly the pill catches up. The highlight slides along just behind it.\"},rayon:{type:ControlType.Number,min:0,max:40,step:1,unit:\"px\",title:\"Corner radius\"},hauteur:{type:ControlType.Number,min:36,max:88,step:1,unit:\"px\",title:\"Height\"},espacement:{type:ControlType.Number,min:2,max:24,step:1,unit:\"px\",title:\"Spacing\"},opacite:{type:ControlType.Number,min:.2,max:1,step:.05,title:\"Opacity\"},police:{type:ControlType.Font,title:\"Font\",controls:\"extended\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GlassPillFX\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"64\",\"framerDisableUnlink\":\"\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"640\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GlassPillFX.map","// Generated by Framer (bbed9c4)\nexport default function metadata(params,activeLocale){return{description:\"Pei Li - Design Portfolio\",robots:\"max-image-preview:large\",title:\"Pei Li Portfolio\"};}export const metadataVersion=1;\nexport const __FramerMetadata__ = {\"exports\":{\"metadataVersion\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}