https://motion.dev/assets/UiSectionChrome-DW_BFcN9.js

1import{r as f,j as t,L as k,H as Ne}from"./chunk-6CSD65Y2-BDCp14CY.js";import{F as Ke}from"./FreshArticleNav-CwRIHDb0.js";import"./FreshPageHeader-D0QytumP.js";import{e as we,c as Z}from"./motion-ui-DBjKjyYL.js";import{o as Xe,p as et,q as tt,r as nt,N as st,t as oe,w as rt,m as w}from"./react-HV0pzbkM.js";import{r as ot}from"./resolve-elements-BfI7WMiw.js";import{G as it}from"./index-D4Vv9Kts.js";import"./index-bMnskurX.js";import"./index--Wa840Wt.js";import{f as at}from"./frame-BbS1luyY.js";/* empty css              */import{h as ct}from"./code-highlight-BhLnT2-W.js";import{C as z,a as $,b as lt}from"./CopyCommandButton-DjWJVGpk.js";import{b as dt}from"./FreshPrimaryAction-uIBlEi7e.js";import{F as ut}from"./FreshMotionPlusLockup-Ck4jtNnx.js";import{F as pt}from"./FreshProductCallout-D4KAja7F.js";import{F as ht}from"./FreshSectionHeading-DBILzPK_.js";import{u as mt,a as ft,F as xt}from"./use-plus-ownership-cxAREQnf.js";import{B as ie}from"./brand-palette-DlSqAes_.js";import{p as T}from"./plus-content-counts-jHbAmLFF.js";import{u as $e}from"./auth-C7w8kEHa.js";import{s as G,f as ke,p as gt,g as jt}from"./motion-plus-checkout-BGbpcb3D.js";import{c as vt,a as Ce,b as yt,d as bt,e as ae,f as Nt}from"./motion-ui-converters-CWLkUxVX.js";import{u as wt}from"./use-reduced-motion-BZ3C-By8.js";import{L as $t}from"./index-BLsGppgI.js";import{A as D}from"./index-CJnYBG3-.js";const ce=new WeakMap,kt=(e,s="")=>`${e}:${s}`;function Ct(e){let s=ce.get(e);return s||(s=new Map,ce.set(e,s)),s}const It=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius",...Xe,"width","maxWidth","height","maxHeight","top","right","bottom","left","inset","insetBlock","insetBlockStart","insetBlockEnd","insetInline","insetInlineStart","insetInlineEnd","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingBlock","paddingBlockStart","paddingBlockEnd","paddingInline","paddingInlineStart","paddingInlineEnd","margin","marginTop","marginRight","marginBottom","marginLeft","marginBlock","marginBlockStart","marginBlockEnd","marginInline","marginInlineStart","marginInlineEnd","fontSize","backgroundPositionX","backgroundPositionY"]);function Lt(e,s){for(let n=0;n<e.length;n++)typeof e[n]=="number"&&It.has(s)&&(e[n]=e[n]+"px")}function le(e,s){const n=window.getComputedStyle(e);return et(s)?n.getPropertyValue(s):n[s]}function Pt(e,s,n,r){if(e==null)return[];const o=ot(e,r),i=o.length,a=[];for(let l=0;l<i;l++){const u=o[l],p={...n};typeof p.delay=="function"&&(p.delay=p.delay(l,i));for(const x in s){let h=s[x];Array.isArray(h)||(h=[h]);const m={...tt(p,x)};m.duration&&(m.duration=oe(m.duration)),m.delay&&(m.delay=oe(m.delay));const g=Ct(u),v=kt(x,m.pseudoElement||""),y=g.get(v);y&&y.stop(),a.push({map:g,key:v,unresolvedKeyframes:h,options:{...m,element:u,name:x,allowFlatten:!p.type&&!p.ease}})}}for(let l=0;l<a.length;l++){const{unresolvedKeyframes:u,options:p}=a[l],{element:x,name:h,pseudoElement:m}=p;!m&&u[0]===null&&(u[0]=le(x,h)),nt(u),Lt(u,h),!m&&u.length<2&&u.unshift(le(x,h)),p.keyframes=u}const d=[];for(let l=0;l<a.length;l++){const{map:u,key:p,options:x}=a[l],h=new st(x);u.set(p,h),h.finished.finally(()=>u.delete(p)),d.push(h)}return d}const St=e=>{function s(n,r,o){return new it(Pt(n,r,o,e))}return s},A=St(),Mt="motion-curtains",Ie="motion-curtain",Tt="#0b0b0c",de="motion-curtains-style",Le="data-motion-curtains";function At(){if(typeof document>"u"||document.getElementById(de))return;const e=document.createElement("style");e.id=de,e.textContent=`.${Ie}{background:${Tt};}[${Le}]::backdrop{background:transparent;}`,document.head.insertBefore(e,document.head.firstChild)}function Pe(e){At();const s=document.createElement("div");return s.className=Mt,s.setAttribute(Le,""),s.setAttribute("aria-hidden","true"),Object.assign(s.style,e),s}function Et(){const e=Pe({position:"fixed",margin:"0",padding:"0",border:"0",inset:"0",width:"100vw",height:"100vh",maxWidth:"none",maxHeight:"none",background:"transparent",overflow:"hidden"});e.setAttribute("popover","manual"),document.body.appendChild(e);try{e.showPopover()}catch{e.style.zIndex="2147483647"}return{element:e,remove(){try{e.hidePopover()}catch{}e.remove()}}}function Rt(e){rt(typeof getComputedStyle!="function"||getComputedStyle(e).position!=="static");const s=Pe({position:"absolute",inset:"0",overflow:"hidden",zIndex:"999999"});return e.appendChild(s),{element:s,remove(){s.remove()}}}const Ft={duration:0,delay:0},Se=Symbol(),H=new Map;function Ut(e){e.settled||(e.settled=!0,e.resolve())}function ue(e,s){e.settled||(e.settled=!0,e.reject(s))}function Ot(e,s){const n=e??Se,r=H.get(n);if(!r){const o={phase:"covering",batch:[s],pending:[]};H.set(n,o),Me(e,o);return}r.phase==="covering"?r.batch.push(s):r.pending.push(s)}async function Me(e,s){let n;try{const r=s.batch[0].inEffect,o=s.batch[0].coverTransition;n=e?Rt(e):Et();let i;if(e){const l=n.element.getBoundingClientRect();i={width:l.width,height:l.height}}const a=n.element;r.setup(a,i),await r.cover(o).finished;for(let l=0;l<s.batch.length;l++){const u=s.batch[l];try{await u.callback()}catch(p){ue(u,p)}}

1s.phase="revealing";const d=s.batch.filter(l=>!l.settled);if(d.length){const l=d[d.length-1],u=l.outEffect;if(u!==r){const p=Array.from(a.children);u.setup(a,i),await u.cover(Ft).finished;for(const x of p)x.remove()}await u.reveal(l.revealTransition).finished;for(const p of d)Ut(p)}}catch(r){for(const o of s.batch)ue(o,r)}finally{n==null||n.remove()}s.pending.length?(s.batch=s.pending,s.pending=[],s.phase="covering",Me(e,s)):H.delete(e??Se)}const Bt={duration:.5,ease:[.76,0,.24,1]};function E(e){return{...Bt,...e}}function Wt(e,s){if(s)return s;const n=e.getBoundingClientRect();return{width:n.width||window.innerWidth,height:n.height||window.innerHeight}}function Te(e="transform"){const s=document.createElement("div");s.className=Ie;const n=s.style;return n.position="absolute",n.inset="0",n.width="100%",n.height="100%",n.willChange=e,s}function _t(){let e;return{setup(s){e=Te("opacity"),e.style.opacity="0",s.appendChild(e)},cover(s){return A(e,{opacity:[0,1]},E(s))},reveal(s){return A(e,{opacity:[1,0]},E(s))}}}function Vt(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}const Dt={up:"down",down:"up",left:"right",right:"left"};function Ht(e){return Dt[e]}function pe(e){return e==="left"||e==="right"}function Qt(e="right",s="normal"){return Array.isArray(e)?{cover:e[0],reveal:e[1]}:{cover:e,reveal:s==="reverse"?Ht(e):e}}function j(e,s){const n=Math.round(e*100)/100,r=Math.round(s);return r===0?`${n}%`:n===0?`${r}px`:`calc(${n}% + ${r}px)`}function he(e,s,n){const r=s*100,o=-n*(1-s),i=n*s;switch(e){case"right":return`0% 0%, ${j(r,o)} 0%, ${j(r,i)} 100%, 0% 100%`;case"left":return`100% 0%, ${j(100-r,-o)} 0%, ${j(100-r,-i)} 100%, 100% 100%`;case"down":return`0% 0%, 100% 0%, 100% ${j(r,i)}, 0% ${j(r,o)}`;default:return`0% 100%, 100% 100%, 100% ${j(100-r,-i)}, 0% ${j(100-r,-o)}`}}function me(e,s,n){const r=s*100,o=-n*(1-s),i=n*s;switch(e){case"right":return`${j(r,o)} 0%, 100% 0%, 100% 100%, ${j(r,i)} 100%`;case"left":return`${j(100-r,-o)} 0%, 0% 0%, 0% 100%, ${j(100-r,-i)} 100%`;case"down":return`0% ${j(r,o)}, 100% ${j(r,i)}, 100% 100%, 0% 100%`;default:return`0% ${j(100-r,-o)}, 100% ${j(100-r,-i)}, 100% 0%, 0% 0%`}}const S=e=>`polygon(${e})`,M=e=>`path("${e}")`,c=e=>Math.round(e*10)/10;function fe(e,s,n,r,o){const i=2*n;switch(e){case"down":{const a=-n+s*(o+n);return`M 0 0 L ${c(r)} 0 L ${c(r)} ${c(a)} Q ${c(r/2)} ${c(a+i)} 0 ${c(a)} Z`}case"up":{const a=(o+n)*(1-s);return`M 0 ${c(o)} L ${c(r)} ${c(o)} L ${c(r)} ${c(a)} Q ${c(r/2)} ${c(a-i)} 0 ${c(a)} Z`}case"right":{const a=-n+s*(r+n);return`M 0 0 L ${c(a)} 0 Q ${c(a+i)} ${c(o/2)} ${c(a)} ${c(o)} L 0 ${c(o)} Z`}default:{const a=(r+n)*(1-s);return`M ${c(r)} 0 L ${c(a)} 0 Q ${c(a-i)} ${c(o/2)} ${c(a)} ${c(o)} L ${c(r)} ${c(o)} Z`}}}function xe(e,s,n,r,o){const i=2*n;switch(e){case"down":{const a=-n+s*(o+n);return`M 0 ${c(a)} Q ${c(r/2)} ${c(a+i)} ${c(r)} ${c(a)} L ${c(r)} ${c(o)} L 0 ${c(o)} Z`}case"up":{const a=(o+n)*(1-s);return`M 0 ${c(a)} Q ${c(r/2)} ${c(a-i)} ${c(r)} ${c(a)} L ${c(r)} 0 L 0 0 Z`}case"right":{const a=-n+s*(r+n);return`M ${c(a)} 0 Q ${c(a+i)} ${c(o/2)} ${c(a)} ${c(o)} L ${c(r)} ${c(o)} L ${c(r)} 0 Z`}default:{const a=(r+n)*(1-s);return`M ${c(a)} 0 Q ${c(a-i)} ${c(o/2)} ${c(a)} ${c(o)} L 0 ${c(o)} L 0 0 Z`}}}function Zt(e={}){const{direction:s,directionMode:n,angle:r=0}=e,o=Math.max(0,e.bow??0),{cover:i,reveal:a}=Qt(s,n),d=a===i;let l,u;return{setup(p,x){u=Te("clip-path");const{width:h,height:m}=Wt(p,x);if(o>0){const g=o*(pe(i)?h:m),v=M(fe(i,0,g,h,m)),y=M(fe(i,1,g,h,m));l={coverFrom:v,coverTo:y,revealFrom:d?M(xe(i,0,g,h,m)):y,revealTo:d?M(xe(i,1,g,h,m)):v}}else{const g=pe(i)?m:h,v=Math.abs(Math.tan(r*Math.PI/180)*g),y=S(he(i,0,v)),C=S(he(i,1,v));l={coverFrom:y,coverTo:C,revealFrom:d?S(me(i,0,v)):C,revealTo:d?S(me(i,1,v)):y}}u.style.clipPath=l.coverFrom,p.appendChild(u)},cover(p){return A(u,{clipPath:[l.coverFrom,l.coverTo]},E(p))},reveal(p){return A(u,{clipPath:[l.revealFrom,l.revealTo]},E(p))}}}function ge(e){return e?typeof e=="function"?e():e:_t()}function Ae(e){return Array.isArray(e)?[e[0],e[1]]:[e,e]}function zt(e){const[s,n]=Ae(e),r=ge(s),o=n===s?r:ge(n);return[r,o]}async function Gt(e,s={}){if(Vt()){await e();return}

1const[n,r]=zt(s.effect),[o,i]=Ae(s.transition);return new Promise((a,d)=>{Ot(s.scope,{callback:e,inEffect:n,outEffect:r,coverTransition:o,revealTransition:i,resolve:a,reject:d,settled:!1})})}function qt(){const[e,s]=f.useTransition(),[,n]=f.useReducer(d=>d+1,0),r=f.useRef(null),o=f.useRef(e),i=f.useRef(!0);return f.useEffect(()=>(i.current=!0,()=>{var d;i.current=!1,(d=r.current)==null||d.resolve(),r.current=null}),[]),f.useEffect(()=>{const d=o.current&&!e;if(o.current=e,d&&r.current){const{resolve:l}=r.current;r.current=null,at.postRender(()=>l())}},[e]),[f.useCallback((d,l)=>Gt(()=>new Promise((p,x)=>{if(!i.current){p();return}r.current={resolve:p,reject:x},s(async()=>{try{await d()}catch(h){r.current=null,x(h);return}n()})}),l).finally(()=>{r.current=null}),[s]),e]}function Jt({href:e,className:s,iconClassName:n,shaftClassName:r,label:o="Open",iconOnly:i=!1}){return t.jsxs("a",{href:e,target:"_blank",rel:"noreferrer",className:s,"aria-label":i?o:void 0,title:i?o:void 0,children:[i?null:t.jsx("span",{className:"oint-label",children:o}),t.jsxs("svg",{className:n,xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[t.jsxs("g",{className:r,children:[t.jsx("path",{d:"M15 3h6v6"}),t.jsx("path",{d:"M10 14 21 3"})]}),t.jsx("path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"})]})]})}function Zn({sectionCategories:e,components:s,activeHref:n,className:r,componentBasePath:o="/ui/components"}){const i=[{label:"Sections",items:e.map(a=>

1({label:a.label,href:`/ui/${a.slug}`}))},{label:"Components",items:s.map(a=>({label:`<${we(a.slug)}>`,href:`${o}/${a.slug}`,code:!0}))}];return t.jsx(Ke,{className:r,title:"Motion UI",groups:i,activeHref:n})}function Ee(e){const s=[];let n=0,r=0;for(;n<e.length;){const o=e.indexOf("`",n);if(o===-1){s.push(e.slice(n));break}const i=e.indexOf("`",o+1);if(i===-1){s.push(e.slice(n));break}o>n&&s.push(e.slice(n,o)),s.push(t.jsx("code",{children:e.slice(o+1,i)},r++)),n=i+1}return s.length===1?s[0]:s}function je({html:e,code:s,onCopy:n}){return t.jsxs("div",{className:"sc-usage-block",children:[t.jsx(z,{text:s,label:"Copy",className:"sc-usage-copy",onCopy:n}),t.jsx("div",{className:"sc-usage-html",dangerouslySetInnerHTML:{__html:e}})]})}const Yt=["component","hook","function"],Kt={component:"Components",hook:"Hooks",function:"Functions"};function Xt(e){return e.kind==="component"?`<${e.name} />`:e.name}function ve({field:e}){return t.jsxs("div",{className:"sc-api-field",children:[t.jsx("h4",{className:"sc-api-field-name",children:t.jsxs("code",{children:[e.name,e.required?"":"?"]})}),t.jsxs("p",{className:"sc-api-field-meta",children:[t.jsx("code",{children:e.type}),e.default?t.jsxs(t.Fragment,{children:[" ",t.jsxs("span",{className:"sc-api-field-default",children:["= ",t.jsx("code",{children:e.default})]})]}):null]}),e.description?t.jsx("p",{className:"sc-api-field-desc",children:Ee(e.description)}):null]})}function en({entry:e}){const s=e.props??[],n=e.returns??[];return t.jsxs("section",{className:"sc-api-entry",children:[t.jsx("h3",{className:"sc-api-name",children:t.jsx("code",{children:Xt(e)})}),e.description?t.jsx("p",{className:"sc-api-desc",children:Ee(e.description)}):null,e.kind!=="component"&&e.signature?t.jsx("pre",{className:"sc-api-signature",children:t.jsx("code",{children:e.signature})}):null,s.length>0?t.jsx("div",{className:"sc-api-fields",children:s.map(r=>t.jsx(ve,{field:r},r.name))}):null,n.length>0?t.jsxs("div",{className:"sc-api-fields",children:[t.jsx("p",{className:"sc-api-fields-label",children:"Returns"}),n.map(r=>t.jsx(ve,{field:r},r.name))]}):null]})}function tn({api:e}){if(e.length===0)return null;const s=Yt.map(n=>({kind:n,label:Kt[n],entries:e.filter(r=>r.kind===n)})).filter(n=>n.entries.length>0);return s.length===0?null:t.jsx("div",{className:"sc-api",children:s.map(n=>t.jsxs("section",{className:"sc-api-section",children:[t.jsx("h2",{className:"sc-api-heading",children:n.label}),n.entries.map(r=>t.jsx(en,{entry:r},r.name))]},n.kind))})}function nn({grade:e}){return t.jsxs("a",{href:"https://score.motion.dev/methodology",className:"sc-grade","data-grade":e,title:`This section has a MotionScore of ${e}, an S-to-F render-cost grade for its animation code. Learn how grades work.`,children:[t.jsx("span",{className:"sc-grade-box",children:t.jsx("span",{className:"sc-grade-label",children:"MotionScore"})}),t.jsx(w.span,{className:"sc-grade-badge","aria-hidden":"true",initial:{scale:.4,opacity:0,rotate:-14},animate:{scale:1,opacity:1,rotate:0},whileHover:{rotate:-7,scale:1.1},transition:{type:"spring",visualDuration:.35,bounce:.45},children:e})]})}function sn({actions:e,className:s}){return e.length===0?null:t.jsx(t.Fragment,{children:e.map(n=>n.asAnchor?t.jsx("a",{href:n.href,className:s,children:n.label},n.key):t.jsx(k,{to:n.href,className:s,prefetch:"intent",children:n.label},n.key))})}function rn({actions:e}){return e.length===0?null:t.jsx(sn,{actions:e,className:"sc-toolbar-link"})}function on(){return t.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[t.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),t.jsx("path",{d:"M3 3v5h5"})]})}function an(){return t.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[t.jsx("path",{d:"M12 15V3"}),t.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),t.jsx("path",{d:"m7 10 5 5 5-5"})]})}function cn(){return t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:t.jsx("path",{d:"M12.983 21.186a1 1 0 0 1-1.966 0 10 10 0 0 0-8.203-8.203 1 1 0 0 1 0-1.966 10 10 0 0 0 8.203-8.203 1 1 0 0 1 1.966 0 10 10 0 0 0 8.203 8.203 1 1 0 0 1 0 1.966 10 10 0 0 0-8.203 8.203"})})}function ln(){return t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:t.jsx("path",{d:"M20 6 9 17l-5-5"})})}function dn(){return t.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[t.jsx("path",{d:"m16 18 6-6-6-6"}),t.jsx("path",{d:"m8 6-6 6 6 6"})]})}function un({openHref:e,onReplay:s}

1){return t.jsxs("div",{className:"sc-surface-controls","aria-label":"Preview controls",children:[t.jsx("button",{type:"button",className:"sc-surface-control","aria-label":"Replay",title:"Replay",onClick:s,children:t.jsx(on,{})}),t.jsx(Jt,{href:e,label:"Open in new tab",iconOnly:!0,className:"sc-surface-control sc-surface-open",shaftClassName:"sc-surface-open-shaft"})]})}const ye={duration:.52,ease:[.25,0,0,1]};function be(e){return()=>{const s=Zt({direction:e,angle:7});return{setup(n,r){s.setup(n,r);const o=n.querySelector(".motion-curtain");o&&(o.style.background="var(--foreground)")},cover:n=>s.cover(n),reveal:n=>s.reveal(n)}}}function pn({view:e,onChange:s,sourceAvailable:n,usageAvailable:r,disabled:o}){return t.jsxs("div",{className:"sc-flip",role:"group","aria-label":"Section panel",children:[t.jsx("button",{type:"button",className:"sc-flip-btn","aria-pressed":e==="preview",disabled:o,onClick:()=>s("preview"),children:"Preview"}),r?t.jsx("button",{type:"button",className:"sc-flip-btn","aria-pressed":e==="usage",disabled:o,onClick:()=>s("usage"),children:"Usage"}):null,n?t.jsxs("button",{type:"button",className:"sc-flip-btn","aria-pressed":e==="source",disabled:o,onClick:()=>s("source"),children:[t.jsx(dn,{}),"Source"]}):null]})}function hn({slug:e}){const s=Ne({key:`ui-usage-${e}`}),{data:n,state:r,load:o}=s;return f.useEffect(()=>{!n&&r==="idle"&&o(`/ui/usage/${e}`)},[n,r,o,e]),n?n.ok?t.jsxs("div",{className:"sc-usage",children:[t.jsx(je,{html:n.imports.html,code:n.imports.code,onCopy:()=>ae(e)}),t.jsx(je,{html:n.jsx.html,code:n.jsx.code,onCopy:()=>ae(e)}),n.components&&n.components.length>0?t.jsx("div",{className:"sc-usage-docs",children:n.components.map(i=>t.jsxs(k,{to:`/ui/components/${i.slug}`,className:"sc-usage-docs-link",prefetch:"intent",children:["Read the full ",i.title," docs",t.jsx("span",{"aria-hidden":"true",children:"→"})]},i.slug))}):n.api&&n.api.length>0?t.jsx(tn,{api:n.api}):null]}):t.jsx("div",{className:"sc-usage",children:t.jsx("p",{className:"sc-usage-note",children:"Usage example coming soon."})}):t.jsx("div",{className:"sc-usage","aria-busy":"true",children:t.jsx("p",{className:"sc-usage-note",children:"Loading usage…"})})}function mn({slug:e,title:s,sourceKind:n,referralLabel:r}){const o=Ne({key:`ui-source-code-${e}`}),{loading:i,status:a}=$e(),{data:d,state:l,load:u}=o,[p,x]=f.useState(null),h=!!(a!=null&&a.hasPlus);if(f.useEffect(()=>{i||!h||!d&&l==="idle"&&u(`/ui/source/${e}`)},[i,h,d,l,u,e]),!i&&!h)return t.jsx("div",{className:"sc-usage",children:t.jsx(Q,{slug:e,title:s,sourceKind:n,referralLabel:r})});if(!d)return t.jsx("div",{className:"sc-usage","aria-busy":"true",children:t.jsx("p",{className:"sc-usage-note",children:"Loading source…"})});if(!d.ok)return t.jsx("div",{className:"sc-usage",children:t.jsx(Q,{slug:e,title:s,sourceKind:n,referralLabel:r})});const m=d.files.find(g=>g.path===p)??d.files[0];return t.jsx("div",{className:"sc-usage sc-source-panel",children:t.jsxs("div",{className:"sc-source-browser",children:[t.jsx("nav",{className:"sc-source-files","aria-label":"Source files",children:d.files.map(g=>t.jsx("button",{type:"button",className:"sc-source-file-button","aria-pressed":g.path===m.path,onClick:()=>x(g.path),children:g.path},g.path))}),t.jsxs("div",{className:"ui-source-modal-code sc-source-code",children:[t.jsxs("div",{className:"sc-source-file-toolbar",children:[t.jsx("code",{children:m.path}),t.jsx(z,{text:m.code,label:"Copy file",className:"ui-source-modal-copy",onCopy:()=>bt(e)})]}),t.jsx("div",{className:"ui-source-modal-html",children:t.jsx("pre",{className:"cb-source",children:t.jsx("code",{children:ct(m.code,m.lang==="tsx"?"jsx":m.lang)})})})]})]})})}function Q({slug:e,title:s,sourceKind:n="section",referralLabel:r}){const o=mt(),i=ft(),a=r??(e?ke(e):void 0),d=s?Z(s):null,l=d?`Unlock the ${d} ${n} source`:`Unlock the full ${n} source`,u=()=>{e&&Ce(e)};return t.jsxs("div",{className:"sc-source-gate",children:[t.jsx(ht,{index:"M+",label:"Code locked",title:l,titleId:`sc-source-gate-${e??n}`,copy:t.jsxs(t.Fragment,{children:["Motion UI source is part of Motion+. Join to copy the editable"," ",n," code, all ",T.motionUiSections," Motion UI sections, ",T.examples," examples and the component library. Already a member?"," ",t.jsx(k,{to:"/login?redirect=%2Fdashboard%2Ftokens",children:"Log in to access your source."})]})}),t.jsx(xt,{className:"sc-source-pricing-board",pricing:o,ownership:i,onCheckoutIntent:u,referralLabel:a})]})}function fn({view:e,sourceSlug:s,usageSlug:n,title:r,sourceKind:o,referralLabel:i}){return e==="source"&&s?t.jsx(mn,{slug:s,title:r,sourceKind:o,referralLabel:i}):e==="usage"&&n?t.jsx(hn,{slug:n}):null}function xn({slug:e,onBeforeCopy:s}){const[n,r]=f.useState("idle"),o=async()=>

1{if(n!=="copying"){if((s==null?void 0:s())===!1){r("alert"),window.setTimeout(()=>r("idle"),1800);return}r("copying");try{const l=await fetch(`/ui/prompt/${e}`);if(!l.ok)throw new Error("Prompt unavailable");const u=await l.json();if(!u.ok){r("alert"),window.setTimeout(()=>r("idle"),1800);return}await navigator.clipboard.writeText(u.prompt),Nt(e),G(jt(e)),r("copied"),window.setTimeout(()=>r("idle"),1500)}catch{r("error"),window.setTimeout(()=>r("idle"),1500)}}},i=n==="alert"?"alert":n==="copied"?"copied":n==="error"?"none":"asteroid",a=n==="copied"?"copied":n==="error"?"error":n==="alert"?"alert":"idle",d=a==="copied"?"Prompt copied":a==="error"?"Prompt failed":a==="alert"?"Motion+ required":"Adapt with AI";return t.jsxs(w.button,{type:"button",layout:!0,className:"copy-cmd-btn sc-copy-prompt-btn",onClick:o,disabled:n==="copying","aria-live":"polite","data-state":n==="alert"?"alert":n==="copied"?"copied":n==="error"?"error":void 0,transition:$,children:[t.jsx(D,{mode:"popLayout",initial:!1,children:i==="none"?null:t.jsx(w.span,{layout:"position",className:"sc-copy-prompt-icon","aria-hidden":"true",transition:$,children:t.jsx(D,{mode:"popLayout",initial:!1,children:t.jsx(w.span,{className:"sc-copy-prompt-icon-inner","data-icon":i,initial:{clipPath:"inset(0 100% 0 0)"},animate:{clipPath:"inset(0 0% 0 0%)"},exit:{clipPath:"inset(0 0 0 100%)"},transition:$,children:i==="alert"?t.jsx(lt,{}):i==="copied"?t.jsx(ln,{}):t.jsx(cn,{})},i)})},"icon-slot")}),t.jsx(w.span,{layout:"position",className:"sc-copy-prompt-label",transition:$,children:t.jsx(D,{mode:"popLayout",initial:!1,children:t.jsx(w.span,{className:"sc-copy-prompt-label-inner","data-label":a,initial:{clipPath:"inset(0 100% 0 0)"},animate:{clipPath:"inset(0 0% 0 0%)"},exit:{clipPath:"inset(0 0 0 100%)"},transition:$,children:d},a)})})]})}function gn({command:e,onCopy:s,onBeforeCopy:n,promptSlug:r,actions:o,viewSwitch:i}){return t.jsxs("div",{className:"sc-toolbar-command-row",children:[i,t.jsx("div",{className:"sc-toolbar-install-actions",children:t.jsxs($t,{children:[t.jsxs(w.div,{layout:!0,className:"sc-toolbar-install-group",transition:$,children:[t.jsx("span",{className:"sc-toolbar-command-label",title:"Manual install","aria-label":"Manual install",children:t.jsx(an,{})}),t.jsx("code",{className:"sc-cmdline-code sc-cmdline-code--hero",children:e}),t.jsx(z,{text:e,onBeforeCopy:n,onCopy:s,label:"Copy",iconOnly:!0})]}),r?t.jsx(xn,{slug:r,onBeforeCopy:n}):null]})}),o.length>0?t.jsx("div",{className:"sc-toolbar-command-actions",children:t.jsx(rn,{actions:o})}):null]})}function jn({grade:e,componentNames:s}){const n=!!(s&&s.length>0);return!e&&!n?null:t.jsxs("div",{className:"sc-toolbar-rail",children:[n?t.jsxs("div",{className:"sc-components-used","aria-label":"Motion UI components used",children:[t.jsx("span",{className:"sc-components-used-label",children:"Components used"}),t.jsx("span",{className:"sc-components-used-list",children:s.map(r=>t.jsx(k,{to:`/ui/components/${r}`,className:"sc-components-used-link",prefetch:"intent",children:we(r)},r))})]}):t.jsx("span",{}),e?t.jsxs("div",{className:"sc-rail-meta",children:[t.jsx(k,{to:"/ui/install",className:"sc-rail-install-guide",prefetch:"intent",children:"Install guide"}),t.jsx(nn,{grade:e})]}):null]})}function vn({title:e,sourceKind:s,componentCount:n,onUpsellClick:r,className:o,referralLabel:i}){const a=i?gt(i):"/plus",d=Z(e);return t.jsx("div",{className:o,children:t.jsx(pt,{className:"ui-cat-offer sc-upsell-offer",accent:ie.plus.accent,signalLabel:"Motion UI",signal:t.jsx(ut,{size:"lg",tone:"inverse",accent:ie.plus.accent}),signalFooter:t.jsxs(t.Fragment,{children:["Included in Motion+",t.jsx("br",{}),"Lifetime updates"]}),kicker:"Motion UI in Motion+",title:`Unlock the ${d} ${s}`,titleId:"sc-motion-plus-offer",copy:`Copy the editable source, install all ${T.motionUiSections} Motion UI sections and components with shadcn, and paste tailored adaptation prompts directly into your agent.`,readout:[{label:"Sections",value:T.motionUiSections},{label:"Components",value:n},{label:"Updates",value:"Lifetime"}],action:t.jsx("div",{className:"ui-cat-offer-actions",children:t.jsx(k,{to:a,className:"fresh-primary-action",prefetch:"intent",onClick:()=>{i&&G(i),r==null||r()},children:t.jsx(dt,{label:"Get Motion+",icon:null})})})})})}function zn({titleTag:e="h2",title:s,description:n,showHead:r=!0,grade:o,command:i,onCopy:a,showSetupDetails:d=!0,actions:l,openHref:u,viewSourceSlug:p,promptSlug:x,usageSlug:h,componentNames:m,componentCount:g,sourceKind:v="section",rail:y,meta:C,byline:q,apisFooter:Re,iframeSrc:Fe,iframeTitle:Ue,sandbox:Oe,showUpsell:Be,wipeToUpsellOnLockedAction:We=!1,onUpsellClick:_e,referralLabel:Ve}){const De=e,J=!!p,Y=!!h,P=J||Y,N=p??x,I=Ve??(N?ke(N):void 0),K=f.useRef(null),L=f.useRef(null),R=f.useRef(!1),X=f.useRef(!1),ee=wt(),[te,F]=qt(),{loading:He,status:U}=$e(),Qe=!!(U!=null&&U.hasPlus),[O,B]=f.useState("preview"),[Ze,ne]=f.useState("preview"),[ze,Ge]=f.useState(0),[W,_]=f.useState(!1),se=P&&O!=="preview";f.useEffect(()=>{P||(B("preview"),ne("preview"))},[P]),f.useEffect(()=>{if(!N||R.current)return;const b=K.current;if(!b||typeof IntersectionObserver>"u")return;const V=new IntersectionObserver(Je=>{Je.some(Ye=>Ye.isIntersecting)&&(R.current||(R.current=!0,vt(N),V.disconnect()))},{threshold:.35});return V.observe(b),()=>V.disconnect()},[N]);const re=b=>{if(!(b===O||F)){if(_(!1),ne(b),b==="source"&&p&&!X.current&&(X.current=!0,yt(p)),ee||!L.current){B(b);return}te(()=>B(b),{effect:be(b==="preview"?"left":"right"),transition:ye,scope:L.current})}},qe=()=>He||Qe?!0:(N&&Ce(N),I&&G(I),We?(W||F||(ee||!L.current?_(!0):te(()=>_(!0),{effect:be("right"),transition:ye,scope:L.current})),!1):(p&&re("source"),!1));return t.jsxs("div",{className:"sc",ref:K,children:[r?t.jsxs(t.Fragment,{children:[y?t.jsx("div",{className:"sc-rail",children:y}):null,t.jsxs("div",{className:"sc-head",children:[t.jsx(De,{className:"sc-title",children:Z(s)}),n?t.jsx("p",{className:"sc-desc",children:n}):null,C||q?t.jsxs("div",{className:"sc-meta-row",children:[C,q]}):null]})]}):null,t.jsxs("div",{className:"sc-frame",children:[t.jsx("div",{className:"sc-toolbar sc-toolbar--terminal",children:t.jsx(gn,{command:i,onCopy:a,onBeforeCopy:qe,promptSlug:x,actions:l,viewSwitch:P?t.jsx(pn,{view:Ze,onChange:re,sourceAvailable:J,usageAvailable:Y,disabled:F}):null})}),t.jsx("div",{className:"sc-surface",ref:L,children:W?t.jsx("div",{className:"sc-surface-upsell",children:t.jsx(Q,{slug:N,title:s,sourceKind:v,referralLabel:I})}):t.jsxs(t.Fragment,{children:[t.jsx("iframe",{src:Fe,title:Ue,loading:"lazy",sandbox:Oe,hidden:se},ze),se?t.jsx(fn,{view:O,sourceSlug:p,usageSlug:h,title:s,sourceKind:v,referralLabel:I}):t.jsx(un,{openHref:u,onReplay:()=>Ge(b=>b+1)})]})}),t.jsx(jn,{grade:o,componentNames:m}),Re]}),Be&&!W?t.jsx("div",{className:"sc-below",children:t.jsx(vn,{title:s,sourceKind:v,componentCount:g,onUpsellClick:_e,referralLabel:I,className:"sc-upsell"})}):null]})}export{Jt as O,Zn as U,zn as a,tn as b};