https://chemillusion.com/assets/AutocompleteDemoPlayer-C5A_kCX2.js

1import{j as e,b as st,B as G}from"./index-DN2b6gf5.js";import{R as nt,r as T}from"./react-vendor-DRshJiK8.js";import{u as V,i as h,A as O,I as U,c as rt,P as it}from"./index-BwrLGSav.js";import{L as M,w as ct}from"./AutocompleteLandingPage-Dci_1vSM.js";const at=1280,lt=720,dt=30,S="#0ea5e9",A="#f59e0b",B="#0f172a",K="#1a202c",X="#ffffff",P="#64748b",f={extrapolateLeft:"clamp",extrapolateRight:"clamp"},_={x:40,y:92,w:660,h:520},b={x:740,y:92,w:500},i={w:106,h:96,gap:10,perRow:4,top:128,left:20};function D(o){const t=o%i.perRow,s=Math.floor(o/i.perRow);return{x:b.x+i.left+t*(i.w+i.gap),y:b.y+i.top+s*(i.h+i.gap)}}function ut(o){return t=>o==="static"?rt(t.replace(/^\//,"")):t}function Y(){return e.jsxs("div",{style:{position:"absolute",left:40,top:28,display:"flex",alignItems:"center",gap:14},children:[e.jsxs("div",{style:{color:"#ffffff",fontSize:26,fontWeight:800,letterSpacing:"-0.01em"},children:["Chem",e.jsx("span",{style:{color:A},children:"I"}),"llusion"]}),e.jsx("div",{style:{color:S,fontSize:14,fontWeight:700,letterSpacing:"0.12em",textTransform:"uppercase",border:`1px solid ${S}66`,borderRadius:999,padding:"5px 12px"},children:"Autocomplete"})]})}function C({text:o,frame:t,start:s,end:l}){const r=h(t,[s,s+8,l-8,l],[0,1,1,0],f);return e.jsx("div",{style:{position:"absolute",left:0,right:0,bottom:34,display:"flex",justifyContent:"center",opacity:r},children:e.jsx("div",{style:{background:"rgba(2, 6, 23, 0.86)",color:"#f8fafc",fontSize:26,fontWeight:600,padding:"12px 22px",borderRadius:12,maxWidth:1100,textAlign:"center"},children:o})})}function Z({layers:o}){return e.jsxs("div",{style:{position:"absolute",left:_.x,top:_.y,width:_.w,height:_.h,background:X,borderRadius:18,boxShadow:"0 20px 50px rgba(0,0,0,0.35)",overflow:"hidden"},children:[e.jsx("div",{style:{position:"absolute",left:18,top:14,color:P,fontSize:14,fontWeight:600},children:"Canvas"}),o.map((t,s)=>e.jsx(U,{src:t.src,style:{position:"absolute",inset:40,width:_.w-80,height:_.h-80,objectFit:"contain",opacity:t.opacity}},`${t.src}-${s}`))]})}function F({title:o,description:t,opacity:s,lift:l,glow:r,children:a}){return e.jsxs("div",{style:{position:"absolute",left:b.x,top:b.y,width:b.w,opacity:s,transform:`translateY(${l}px)`,background:X,borderRadius:16,border:`2px solid ${S}`,boxShadow:`0 0 0 ${r*4}px ${S}55, 0 18px 40px rgba(0,0,0,0.3)`,padding:"18px 20px 20px",minHeight:150},children:[e.jsx("div",{style:{color:P,fontSize:12,fontWeight:700,letterSpacing:"0.1em",textTransform:"uppercase"},children:"Autocomplete"}),e.jsx("div",{style:{color:B,fontSize:24,fontWeight:800,marginTop:6},children:o}),e.jsx("div",{style:{color:P,fontSize:16,marginTop:4,lineHeight:1.35},children:t}),a]})}function q({src:o,label:t,index:s,pressed:l,chosen:r}){const a=D(s);return e.jsxs("div",{style:{position:"absolute",left:a.x-b.x-2,top:a.y-b.y-2,width:i.w,height:i.h,borderRadius:10,border:`2px solid ${r&&l>0?A:"#e2e8f0"}`,background:"#ffffff",transform:`scale(${1-.05*l})`,display:"flex",flexDirection:"column",alignItems:"center",overflow:"hidden"},children:[e.jsx(U,{src:o,style:{width:i.w-8,height:i.h-28,objectFit:"contain",marginTop:3}}),e.jsx("div",{style:{fontSize:13,fontWeight:700,color:B,whiteSpace:"nowrap"},children:t})]})}function J({x:o,y:t,pressed:s}){return e.jsx("svg",{width:34,height:34,viewBox:"0 0 24 24",style:{position:"absolute",left:o,top:t,transform:`scale(${1-.15*s})`,filter:"drop-shadow(0 2px 3px rgba(0,0,0,0.5))"},children:e.jsx("path",{d:"M3 2 L3 20 L8 15 L11.5 22 L14.5 20.6 L11 13.8 L18 13.8 Z",fill:"#ffffff",stroke:B,strokeWidth:1.4})})}function Q({frame:o,start:t}){const s=h(o,[t,t+12],[0,1],f);return e.jsxs(O,{style:{background:`rgba(26, 32, 44, ${.94*s})`,justifyContent:"center",alignItems:"center",opacity:s},children:[e.jsxs("div",{style:{color:"#ffffff",fontSize:54,fontWeight:800},children:["Chem",e.jsx("span",{style:{color:A},children:"I"}),"llusion Autocomplete"]}),e.jsx("div",{style:{color:"#cbd5e1",fontSize:28,marginTop:14},children:"Free in the Generator · no account needed to try"}),e.jsx("div",{style:{color:A,fontSize:32,fontWeight:700,marginTop:26},children:"chemillusion.com/autocomplete"})]})}function W(o,t,s){const l=h(o,[t,t+10,s-8,s],[0,1,1,0],f),r=h(o,[t,t+10],[14,0],f),a=h(o,[t,t+8,t+40],[0,1,0],f);return{opacity:l,lift:r,glow:a}}function tt(o,t){const s=t.map(l=>l.f);return{x:h(o,s,t.map(l=>l.x),f),y:h(o,s,t.map(l=>l.y),f)}}function I(o,t){return h(o,[t-3,t,t+6],[0,1,0],f)}const z=400;function pt({src:o}){const t=V(),{start:s,steps:l,name:r}=M.protect,[a,c]=l,d=112,p=228,j=[{src:o(s.svg),opacity:h(t,[d+4,d+22],[1,0],f)},{src:o(a.result.svg),opacity:h(t,[d+4,d+22,p+4,p+22],[0,1,1,0],f)},{src:o(c.result.svg),opacity:h(t,[p+4,p+22],[0,1],f)}],w=W(t,40,d+26),k=W(t,d+36,p+40),x=D(a.chosen_index),y=D(c.chosen_index),v=tt(t,[{f:60,x:1150,y:640},{f:d-6,x:x.x+i.w/2,y:x.y+i.h/2},{f:d+40,x:x.x+i.w/2,y:x.y+i.h/2},{f:p-6,x:y.x+i.w/2,y:y.y+i.h/2}]),u=h(t,[58,66,p+24,p+34],[0,1,1,0],f),n=(m,H,N)=>m.map((L,E)=>e.jsx(q,{src:o(L.svg),label:L.abbreviation.split(" / ")[0],index:E,pressed:E===H?I(t,N):0,chosen:E===H&&t>=N},L.smiles)),g=m=>Math.ceil(m/i.perRow),$=m=>m&&m.length?e.jsxs("div",{style:{color:P,fontSize:14,marginTop:4},children:["Also suggested: ",m.join(" · ")]}):null;return e.jsxs(O,{style:{background:K,fontFamily:"Inter, system-ui, sans-serif"},children:[e.jsx(Y,{}),e.jsx(Z,{layers:j}

1),e.jsxs(F,{title:a.card_title,description:a.card_description,...w,children:[e.jsx("div",{style:{height:g(a.variants.length)*(i.h+i.gap)+26}}),n(a.variants,a.chosen_index,d),$(a.also_shown)]}),e.jsxs(F,{title:c.card_title,description:c.card_description,...k,children:[e.jsx("div",{style:{height:g(c.variants.length)*(i.h+i.gap)+26}}),n(c.variants,c.chosen_index,p),$(c.also_shown)]}),e.jsx("div",{style:{opacity:u},children:e.jsx(J,{x:v.x,y:v.y,pressed:I(t,d)+I(t,p)})}),e.jsx(C,{frame:t,start:0,end:70,text:`Draw ${r}. Autocomplete reads the canvas.`}),e.jsx(C,{frame:t,start:70,end:d+30,text:`"${a.card_title}": ${a.variants.length} catalog groups fit. Pick Fmoc.`}),e.jsx(C,{frame:t,start:d+30,end:p+30,text:`Next: "${c.card_title}". Pick TBDMS.`}),e.jsx(C,{frame:t,start:p+30,end:z-60,text:"Fmoc-Ser(TBS)-OMe: two orthogonal protecting groups, two clicks."}),e.jsx(Q,{frame:t,start:z-60})]})}const et=20,R=64;function ot(){return et+M.literature.frames.length*R+150}function ht({card:o,src:t,opacity:s,lift:l,glow:r,pressed:a}){return e.jsx(F,{title:o.card_title,description:ct(o.card_description),opacity:s,lift:l,glow:r,children:o.thumb_svg?e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{height:i.top+i.h+44-110}}),e.jsx(q,{src:t(o.thumb_svg),label:"Use this",index:0,pressed:a,chosen:a>0}),e.jsxs("div",{style:{position:"absolute",left:i.left,top:i.top+i.h+12,color:S,fontSize:15,fontWeight:600},children:["View CID ",o.cid," on PubChem ↗"]})]}):e.jsxs("div",{style:{color:S,fontSize:15,fontWeight:600,marginTop:10},children:["View CID ",o.cid," on PubChem ↗"]})})}function ft({src:o}){const t=V(),{frames:s,surfaced:l}=M.literature,r=s.map((u,n)=>et+n*R),c=r[r.length-1]+R+20,d=ot(),p=s.map((u,n)=>({src:o(u.svg),opacity:h(t,n===s.length-1?[r[n],r[n]+8,c+4,c+22]:[r[n],r[n]+8,r[n+1],r[n+1]+8],[n===0?1:0,1,1,0],f)}));p.push({src:o(l.svg),opacity:h(t,[c+4,c+22],[0,1],f)});const j=D(0),w=tt(t,[{f:c-40,x:1150,y:640},{f:c-6,x:j.x+i.w/2,y:j.y+i.h/2}]),k=h(t,[c-40,c-32,c+24,c+34],[0,1,1,0],f),x=s[s.length-1].literature_card,y=u=>u.card_title.replace(/^(Complete as|This is) /,""),v=u=>{const n=s[u].literature_card;if(u===0)return(n==null?void 0:n.kind)==="identify"?`Start drawing. PubChem, checked in the background, recognises ${y(n)}.`:"Start drawing. A distinctive structure is looked up on PubChem in the background.";if(!n)return"Still too generic to call: Autocomplete shows nothing rather than guess.";if(u===s.length-1)return`One methyl short: Autocomplete offers to complete ${y(n)}.`;const g=s[u-1].literature_card;return(g==null?void 0:g.cid)===n.cid?"The chain grows a carbon at a time; the match holds.":`A carbon opposite the side chain points to ${y(n)}.`};return e.jsxs(O,{style:{background:K,fontFamily:"Inter, system-ui, sans-serif"},children:[e.jsx(Y,{}),e.jsx(Z,{layers:p}),s.map((u,n)=>{const g=r[n]+26,$=n===s.length-1?c+30:r[n]+R,m=h(t,[r[n]+4,r[n]+8,g-2,g+2],[0,1,1,0],f);return e.jsxs(nt.Fragment,{children:[u.gate==="ok"?e.jsx("div",{style:{position:"absolute",left:b.x,top:b.y-36,opacity:m,color:S,fontSize:16,fontWeight:700},children:"Checking PubChem in the background…"}):null,u.literature_card?e.jsx(ht,{card:u.literature_card,src:o,...W(t,g,$),pressed:n===s.length-1?I(t,c):0}):null]},u.smiles)}),e.jsx("div",{style:{opacity:k},children:e.jsx(J,{x:w.x,y:w.y,pressed:I(t,c)})}),s.map((u,n)=>e.jsx(C,{frame:t,start:r[n],end:n===s.length-1?c+30:r[n]+R,text:v(n)}

1,n)),x?e.jsx(C,{frame:t,start:c+30,end:d-60,text:`${x.card_title.replace(/^Complete as /,"")}: PubChem CID ${x.cid}${x.published_year?`, cited as recently as ${x.published_year}`:""}.`}):null,e.jsx(Q,{frame:t,start:d-60})]})}function xt(o){return o==="protect"?z:ot()}const gt=({example:o,assetBase:t="web"})=>{const s=ut(t);return o==="protect"?e.jsx(pt,{src:s}):e.jsx(ft,{src:s})};function yt(){var o;try{return typeof window<"u"&&((o=window.matchMedia)==null?void 0:o.call(window,"(prefers-reduced-motion: reduce)").matches)===!0}catch{return!1}}const vt=({example:o,label:t})=>{const s=T.useRef(null),l=T.useRef(null),r=T.useRef(!1),[a]=T.useState(yt),c=st("gray.200","gray.700"),d=xt(o);return T.useEffect(()=>{var w;if(a){(w=s.current)==null||w.seekTo(d-75);return}const p=l.current;if(!p||typeof IntersectionObserver>"u")return;const j=new IntersectionObserver(k=>{var y,v;const x=k.some(u=>u.isIntersecting);x&&!r.current?(r.current=!0,(y=s.current)==null||y.play()):!x&&r.current&&((v=s.current)==null||v.pause(),r.current=!1)},{threshold:.25});return j.observe(p),()=>j.disconnect()},[a,d]),e.jsx(G,{ref:l,w:"100%",role:"figure","aria-label":t,"data-testid":`autocomplete-demo-${o}`,children:e.jsx(G,{borderRadius:"xl",overflow:"hidden",border:"1px solid",borderColor:c,boxShadow:"2xl",bg:"gray.900",children:e.jsx(it,{acknowledgeRemotionLicense:!0,ref:s,component:gt,inputProps:{example:o,assetBase:"web"},durationInFrames:d,compositionWidth:at,compositionHeight:lt,fps:dt,loop:!a,controls:a,style:{width:"100%",display:"block"}})})})};export{vt as default};