@hyperframes/studio 0.1.11 → 0.1.12

package/dist/assets/{index-Bj0pPj_X.js → index-BEwJNmPo.js}

@@ -81,7 +81,7 @@ Preserve all other elements and timing outside this range.`},[f,d,p,o]),S=m.useC
             ${v}px !important;
             ${w}px !important;
           }
-        `),()=>{var P;(P=l.current)==null||P.removeAttribute("data-motion-pop-id"),$.contains(k)&&$.removeChild(k)}},[e]),g.jsx(bX,{isPresent:e,childRef:l,sizeRef:a,pop:s,children:s===!1?t:m.cloneElement(t,{ref:h})})}const QX=({children:t,initial:e,isPresent:n,onExitComplete:r,custom:i,presenceAffectsLayout:s,mode:o,anchorX:l,anchorY:a,root:c})=>{const u=AO($X),h=m.useId();let f=!0,d=m.useMemo(()=>(f=!1,{id:h,initial:e,isPresent:n,custom:i,onExitComplete:p=>{u.set(p,!0);for(const x of u.values())if(!x)return;r&&r()},register:p=>(u.set(p,!1),()=>u.delete(p))}),[n,u,r]);return s&&f&&(d={...d}),m.useMemo(()=>{u.forEach((p,x)=>u.set(x,!1))},[n]),m.useEffect(()=>{!n&&!u.size&&r&&r()},[n]),t=g.jsx(PX,{pop:o==="popLayout",isPresent:n,anchorX:l,anchorY:a,root:c,children:t}),g.jsx(nh.Provider,{value:d,children:t})};function $X(){return new Map}function pQ(t=!0){const e=m.useContext(nh);if(e===null)return[!0,null];const{isPresent:n,onExitComplete:r,register:i}=e,s=m.useId();m.useEffect(()=>{if(t)return i(s)},[t]);const o=m.useCallback(()=>t&&r&&r(s),[s,r,t]);return!n&&r?[!1,o]:[!0]}const Ea=t=>t.key||"";function Vx(t){const e=[];return m.Children.forEach(t,n=>{m.isValidElement(n)&&e.push(n)}),e}const TX=({children:t,custom:e,initial:n=!0,onExitComplete:r,presenceAffectsLayout:i=!0,mode:s="sync",propagate:o=!1,anchorX:l="left",anchorY:a="top",root:c})=>{const[u,h]=pQ(o),f=m.useMemo(()=>Vx(t),[t]),d=o&&!u?[]:f.map(Ea),p=m.useRef(!0),x=m.useRef(f),S=AO(()=>new Map),O=m.useRef(new Set),[y,v]=m.useState(f),[w,k]=m.useState(f);Nb(()=>{p.current=!1,x.current=f;for(let Q=0;Q<w.length;Q++){const M=Ea(w[Q]);d.includes(M)?(S.delete(M),O.current.delete(M)):S.get(M)!==!0&&S.set(M,!1)}},[w,d.length,d.join("-")]);const $=[];if(f!==y){let Q=[...f];for(let M=0;M<w.length;M++){const T=w[M],V=Ea(T);d.includes(V)||(Q.splice(M,0,T),$.push(T))}return s==="wait"&&$.length&&(Q=$),k(Vx(Q)),v(f),null}const{forceRender:P}=m.useContext(CO);return g.jsx(g.Fragment,{children:w.map(Q=>{const M=Ea(Q),T=o&&!u?!1:f===w||d.includes(M),V=()=>{if(O.current.has(M))return;if(S.has(M))O.current.add(M),S.set(M,!0);else return;let C=!0;S.forEach(j=>{j||(C=!1)}),C&&(P==null||P(),k(x.current),o&&(h==null||h()),r&&r())};return g.jsx(QX,{isPresent:T,initial:!p.current||n?void 0:!1,custom:e,presenceAffectsLayout:i,mode:s,root:c,onExitComplete:T?void 0:V,anchorX:l,anchorY:a,children:Q},M)})})},mQ=m.createContext({strict:!1}),Xx={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};let Lx=!1;function CX(){if(Lx)return;const t={};for(const e in Xx)t[e]={isEnabled:n=>Xx[e].some(r=>!!n[r])};IP(t),Lx=!0}function OQ(){return CX(),fV()}function AX(t){const e=OQ();for(const n in t)e[n]={...e[n],...t[n]};IP(e)}const MX=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function Su(t){return t.startsWith("while")||t.startsWith("drag")&&t!=="draggable"||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||MX.has(t)}let gQ=t=>!Su(t);function EX(t){typeof t=="function"&&(gQ=e=>e.startsWith("on")?!Su(e):t(e))}try{EX(require("@emotion/is-prop-valid").default)}catch{}function RX(t,e,n){const r={};for(const i in t)i==="values"&&typeof t.values=="object"||lt(t[i])||(gQ(i)||n===!0&&Su(i)||!e&&!Su(i)||t.draggable&&i.startsWith("onDrag"))&&(r[i]=t[i]);return r}const oh=m.createContext({});function jX(t,e){if(sh(t)){const{initial:n,animate:r}=t;return{initial:n===!1||Pl(n)?n:void 0,animate:Pl(r)?r:void 0}}return t.inherit!==!1?e:{}}function ZX(t){const{initial:e,animate:n}=jX(t,m.useContext(oh));return m.useMemo(()=>({initial:e,animate:n}),[Dx(e),Dx(n)])}function Dx(t){return Array.isArray(t)?t.join(" "):t}const ng=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function yQ(t,e,n){for(const r in e)!lt(e[r])&&!HP(r,n)&&(t[r]=e[r])}function VX({transformTemplate:t},e){return m.useMemo(()=>{const n=ng();return JO(n,e,t),Object.assign({},n.vars,n.style)},[e])}function XX(t,e){const n=t.style||{},r={};return yQ(r,n,t),Object.assign(r,VX(t,e)),r}function LX(t,e){const n={},r=XX(t,e);return t.drag&&t.dragListener!==!1&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=t.drag===!0?"none":`pan-${t.drag==="x"?"y":"x"}`),t.tabIndex===void 0&&(t.onTap||t.onTapStart||t.whileTap)&&(n.tabIndex=0),n.style=r,n}const xQ=()=>({...ng(),attrs:{}});function DX(t,e,n,r){const i=m.useMemo(()=>{const s=xQ();return KP(s,e,eQ(r),t.transformTemplate,t.style),{...s.attrs,style:{...s.style}}},[e]);if(t.style){const s={};yQ(s,t.style,t),i.style={...s,...i.style}}return i}const _X=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function rg(t){return typeof t!="string"||t.includes("-")?!1:!!(_X.indexOf(t)>-1||/[A-Z]/u.test(t))}function NX(t,e,n,{latestValues:r},i,s=!1,o){const a=(o??rg(t)?DX:LX)(e,r,i,t),c=RX(e,typeof t=="string",s),u=t!==m.Fragment?{...c,...a,ref:n}:{},{children:h}=e,f=m.useMemo(()=>lt(h)?h.get():h,[h]);return m.createElement(t,{...u,children:f})}function zX({scrapeMotionValuesFromProps:t,createRenderState:e},n,r,i){return{latestValues:WX(n,r,i,t),renderState:e()}}function WX(t,e,n,r){const i={},s=r(t,{});for(const f in s)i[f]=hc(s[f]);let{initial:o,animate:l}=t;const a=sh(t),c=zP(t);e&&c&&!a&&t.inherit!==!1&&(o===void 0&&(o=e.initial),l===void 0&&(l=e.animate));let u=n?n.initial===!1:!1;u=u||o===!1;const h=u?l:o;if(h&&typeof h!="boolean"&&!ih(h)){const f=Array.isArray(h)?h:[h];for(let d=0;d<f.length;d++){const p=BO(t,f[d]);if(p){const{transitionEnd:x,transition:S,...O}=p;for(const y in O){let v=O[y];if(Array.isArray(v)){const w=u?v.length-1:0;v=v[w]}v!==null&&(i[y]=v)}for(const y in x)i[y]=x[y]}}}return i}const vQ=t=>(e,n)=>{const r=m.useContext(oh),i=m.useContext(nh),s=()=>zX(t,e,r,i);return n?s():AO(s)},IX=vQ({scrapeMotionValuesFromProps:eg,createRenderState:ng}),BX=vQ({scrapeMotionValuesFromProps:tQ,createRenderState:xQ}),YX=Symbol.for("motionComponentSymbol");function FX(t,e,n){const r=m.useRef(n);m.useInsertionEffect(()=>{r.current=n});const i=m.useRef(null);return m.useCallback(s=>{var l;s&&((l=t.onMount)==null||l.call(t,s));const o=r.current;if(typeof o=="function")if(s){const a=o(s);typeof a=="function"&&(i.current=a)}else i.current?(i.current(),i.current=null):o(s);else o&&(o.current=s);e&&(s?e.mount(s):e.unmount())},[e])}const SQ=m.createContext({});function Wi(t){return t&&typeof t=="object"&&Object.prototype.hasOwnProperty.call(t,"current")}function qX(t,e,n,r,i,s){var v,w;const{visualElement:o}=m.useContext(oh),l=m.useContext(mQ),a=m.useContext(nh),c=m.useContext(tg),u=c.reducedMotion,h=c.skipAnimations,f=m.useRef(null),d=m.useRef(!1);r=r||l.renderer,!f.current&&r&&(f.current=r(t,{visualState:e,parent:o,props:n,presenceContext:a,blockInitialAnimation:a?a.initial===!1:!1,reducedMotionConfig:u,skipAnimations:h,isSVG:s}),d.current&&f.current&&(f.current.manuallyAnimateOnMount=!0));const p=f.current,x=m.useContext(SQ);p&&!p.projection&&i&&(p.type==="html"||p.type==="svg")&&UX(f.current,n,i,x);const S=m.useRef(!1);m.useInsertionEffect(()=>{p&&S.current&&p.update(n,a)});const O=n[CP],y=m.useRef(!!O&&typeof window<"u"&&!((v=window.MotionHandoffIsComplete)!=null&&v.call(window,O))&&((w=window.MotionHasOptimisedAnimation)==null?void 0:w.call(window,O)));return Nb(()=>{d.current=!0,p&&(S.current=!0,window.MotionIsMounted=!0,p.updateFeatures(),p.scheduleRenderMicrotask(),y.current&&p.animationState&&p.animationState.animateChanges())}),m.useEffect(()=>{p&&(!y.current&&p.animationState&&p.animationState.animateChanges(),y.current&&(queueMicrotask(()=>{var k;(k=window.MotionHandoffMarkAsComplete)==null||k.call(window,O)}),y.current=!1),p.enteringChildren=void 0)}),p}function UX(t,e,n,r){const{layoutId:i,layout:s,drag:o,dragConstraints:l,layoutScroll:a,layoutRoot:c,layoutAnchor:u,layoutCrossfade:h}=e;t.projection=new n(t.latestValues,e["data-framer-portal-id"]?void 0:wQ(t.parent)),t.projection.setOptions({layoutId:i,layout:s,alwaysMeasureLayout:!!o||l&&Wi(l),visualElement:t,animationType:typeof s=="string"?s:"both",initialPromotionConfig:r,crossfade:h,layoutScroll:a,layoutRoot:c,layoutAnchor:u})}function wQ(t){if(t)return t.options.allowProjection!==!1?t.projection:wQ(t.parent)}function Af(t,{forwardMotionProps:e=!1,type:n}={},r,i){r&&AX(r);const s=n?n==="svg":rg(t),o=s?BX:IX;function l(c,u){let h;const f={...m.useContext(tg),...c,layoutId:GX(c)},{isStatic:d}=f,p=ZX(c),x=o(c,d);if(!d&&typeof window<"u"){HX();const S=KX(f);h=S.MeasureLayout,p.visualElement=qX(t,x,f,i,S.ProjectionNode,s)}return g.jsxs(oh.Provider,{value:p,children:[h&&p.visualElement?g.jsx(h,{visualElement:p.visualElement,...f}):null,NX(t,c,FX(x,p.visualElement,u),x,d,e,s)]})}l.displayName=`motion.${typeof t=="string"?t:`create(${t.displayName??t.name??""})`}`;const a=m.forwardRef(l);return a[YX]=t,a}function GX({layoutId:t}){const e=m.useContext(CO).id;return e&&t!==void 0?e+"-"+t:t}function HX(t,e){m.useContext(mQ).strict}function KX(t){const e=OQ(),{drag:n,layout:r}=e;if(!n&&!r)return{};const i={...n,...r};return{MeasureLayout:n!=null&&n.isEnabled(t)||r!=null&&r.isEnabled(t)?i.MeasureLayout:void 0,ProjectionNode:i.ProjectionNode}}function JX(t,e){if(typeof Proxy>"u")return Af;const n=new Map,r=(s,o)=>Af(s,o,t,e),i=(s,o)=>r(s,o);return new Proxy(i,{get:(s,o)=>o==="create"?r:(n.has(o)||n.set(o,Af(o,void 0,t,e)),n.get(o))})}const eL=(t,e)=>e.isSVG??rg(t)?new CV(e):new kV(e,{allowProjection:t!==m.Fragment});class tL extends ni{constructor(e){super(e),e.animationState||(e.animationState=jV(e))}updateAnimationControlsSubscription(){const{animate:e}=this.node.getProps();ih(e)&&(this.unmountControls=e.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){const{animate:e}=this.node.getProps(),{animate:n}=this.node.prevProps||{};e!==n&&this.updateAnimationControlsSubscription()}unmount(){var e;this.node.animationState.reset(),(e=this.unmountControls)==null||e.call(this)}}let nL=0;class rL extends ni{constructor(){super(...arguments),this.id=nL++,this.isExitComplete=!1}update(){var s;if(!this.node.presenceContext)return;const{isPresent:e,onExitComplete:n}=this.node.presenceContext,{isPresent:r}=this.node.prevPresenceContext||{};if(!this.node.animationState||e===r)return;if(e&&r===!1){if(this.isExitComplete){const{initial:o,custom:l}=this.node.getProps();if(typeof o=="string"){const a=wi(this.node,o,l);if(a){const{transition:c,transitionEnd:u,...h}=a;for(const f in h)(s=this.node.getValue(f))==null||s.jump(h[f])}}this.node.animationState.reset(),this.node.animationState.animateChanges()}else this.node.animationState.setActive("exit",!1);this.isExitComplete=!1;return}const i=this.node.animationState.setActive("exit",!e);n&&!e&&i.then(()=>{this.isExitComplete=!0,n(this.id)})}mount(){const{register:e,onExitComplete:n}=this.node.presenceContext||{};n&&n(this.id),e&&(this.unmount=e(this.id))}unmount(){}}const iL={animation:{Feature:tL},exit:{Feature:rL}};function Wl(t){return{point:{x:t.pageX,y:t.pageY}}}const sL=t=>e=>UO(e)&&t(e,Wl(e));function Bo(t,e,n,r){return Ql(t,e,sL(n),r)}const kQ=({current:t})=>t?t.ownerDocument.defaultView:null,_x=(t,e)=>Math.abs(t-e);function oL(t,e){const n=_x(t.x,e.x),r=_x(t.y,e.y);return Math.sqrt(n**2+r**2)}const Nx=new Set(["auto","scroll"]);class bQ{constructor(e,n,{transformPagePoint:r,contextWindow:i=window,dragSnapToOrigin:s=!1,distanceThreshold:o=3,element:l}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.lastRawMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=d=>{this.handleScroll(d.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;this.lastRawMoveEventInfo&&(this.lastMoveEventInfo=Ra(this.lastRawMoveEventInfo,this.transformPagePoint));const d=Mf(this.lastMoveEventInfo,this.history),p=this.startEvent!==null,x=oL(d.offset,{x:0,y:0})>=this.distanceThreshold;if(!p&&!x)return;const{point:S}=d,{timestamp:O}=it;this.history.push({...S,timestamp:O});const{onStart:y,onMove:v}=this.handlers;p||(y&&y(this.lastMoveEvent,d),this.startEvent=this.lastMoveEvent),v&&v(this.lastMoveEvent,d)},this.handlePointerMove=(d,p)=>{this.lastMoveEvent=d,this.lastRawMoveEventInfo=p,this.lastMoveEventInfo=Ra(p,this.transformPagePoint),ke.update(this.updatePoint,!0)},this.handlePointerUp=(d,p)=>{this.end();const{onEnd:x,onSessionEnd:S,resumeAnimation:O}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&O&&O(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const y=Mf(d.type==="pointercancel"?this.lastMoveEventInfo:Ra(p,this.transformPagePoint),this.history);this.startEvent&&x&&x(d,y),S&&S(d,y)},!UO(e))return;this.dragSnapToOrigin=s,this.handlers=n,this.transformPagePoint=r,this.distanceThreshold=o,this.contextWindow=i||window;const a=Wl(e),c=Ra(a,this.transformPagePoint),{point:u}=c,{timestamp:h}=it;this.history=[{...u,timestamp:h}];const{onSessionStart:f}=n;f&&f(e,Mf(c,this.history)),this.removeListeners=_l(Bo(this.contextWindow,"pointermove",this.handlePointerMove),Bo(this.contextWindow,"pointerup",this.handlePointerUp),Bo(this.contextWindow,"pointercancel",this.handlePointerUp)),l&&this.startScrollTracking(l)}startScrollTracking(e){let n=e.parentElement;for(;n;){const r=getComputedStyle(n);(Nx.has(r.overflowX)||Nx.has(r.overflowY))&&this.scrollPositions.set(n,{x:n.scrollLeft,y:n.scrollTop}),n=n.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0}),window.addEventListener("scroll",this.onWindowScroll),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(e){const n=this.scrollPositions.get(e);if(!n)return;const r=e===window,i=r?{x:window.scrollX,y:window.scrollY}:{x:e.scrollLeft,y:e.scrollTop},s={x:i.x-n.x,y:i.y-n.y};s.x===0&&s.y===0||(r?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=s.x,this.lastMoveEventInfo.point.y+=s.y):this.history.length>0&&(this.history[0].x-=s.x,this.history[0].y-=s.y),this.scrollPositions.set(e,i),ke.update(this.updatePoint,!0))}updateHandlers(e){this.handlers=e}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),Hr(this.updatePoint)}}function Ra(t,e){return e?{point:e(t.point)}:t}function zx(t,e){return{x:t.x-e.x,y:t.y-e.y}}function Mf({point:t},e){return{point:t,delta:zx(t,PQ(e)),offset:zx(t,lL(e)),velocity:aL(e,.1)}}function lL(t){return t[0]}function PQ(t){return t[t.length-1]}function aL(t,e){if(t.length<2)return{x:0,y:0};let n=t.length-1,r=null;const i=PQ(t);for(;n>=0&&(r=t[n],!(i.timestamp-r.timestamp>qt(e)));)n--;if(!r)return{x:0,y:0};r===t[0]&&t.length>2&&i.timestamp-r.timestamp>qt(e)*2&&(r=t[1]);const s=an(i.timestamp-r.timestamp);if(s===0)return{x:0,y:0};const o={x:(i.x-r.x)/s,y:(i.y-r.y)/s};return o.x===1/0&&(o.x=0),o.y===1/0&&(o.y=0),o}function cL(t,{min:e,max:n},r){return e!==void 0&&t<e?t=r?Ce(e,t,r.min):Math.max(t,e):n!==void 0&&t>n&&(t=r?Ce(n,t,r.max):Math.min(t,n)),t}function Wx(t,e,n){return{min:e!==void 0?t.min+e:void 0,max:n!==void 0?t.max+n-(t.max-t.min):void 0}}function uL(t,{top:e,left:n,bottom:r,right:i}){return{x:Wx(t.x,n,i),y:Wx(t.y,e,r)}}function Ix(t,e){let n=e.min-t.min,r=e.max-t.max;return e.max-e.min<t.max-t.min&&([n,r]=[r,n]),{min:n,max:r}}function hL(t,e){return{x:Ix(t.x,e.x),y:Ix(t.y,e.y)}}function fL(t,e){let n=.5;const r=kt(t),i=kt(e);return i>r?n=kl(e.min,e.max-r,t.min):r>i&&(n=kl(t.min,t.max-i,e.min)),Jn(0,1,n)}function dL(t,e){const n={};return e.min!==void 0&&(n.min=e.min-t.min),e.max!==void 0&&(n.max=e.max-t.min),n}const Yp=.35;function pL(t=Yp){return t===!1?t=0:t===!0&&(t=Yp),{x:Bx(t,"left","right"),y:Bx(t,"top","bottom")}}function Bx(t,e,n){return{min:Yx(t,e),max:Yx(t,n)}}function Yx(t,e){return typeof t=="number"?t:t[e]||0}const mL=new WeakMap;class OL{constructor(e){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=qe(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=e}start(e,{snapToCursor:n=!1,distanceThreshold:r}={}){const{presenceContext:i}=this.visualElement;if(i&&i.isPresent===!1)return;const s=h=>{n&&this.snapToCursor(Wl(h).point),this.stopAnimation()},o=(h,f)=>{const{drag:d,dragPropagation:p,onDragStart:x}=this.getProps();if(d&&!p&&(this.openDragLock&&this.openDragLock(),this.openDragLock=zZ(d),!this.openDragLock))return;this.latestPointerEvent=h,this.latestPanInfo=f,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),Xn(O=>{let y=this.getAxisMotionValue(O).get()||0;if(Kn.test(y)){const{projection:v}=this.visualElement;if(v&&v.layout){const w=v.layout.layoutBox[O];w&&(y=kt(w)*(parseFloat(y)/100))}}this.originPoint[O]=y}),x&&ke.update(()=>x(h,f),!1,!0),Xp(this.visualElement,"transform");const{animationState:S}=this.visualElement;S&&S.setActive("whileDrag",!0)},l=(h,f)=>{this.latestPointerEvent=h,this.latestPanInfo=f;const{dragPropagation:d,dragDirectionLock:p,onDirectionLock:x,onDrag:S}=this.getProps();if(!d&&!this.openDragLock)return;const{offset:O}=f;if(p&&this.currentDirection===null){this.currentDirection=yL(O),this.currentDirection!==null&&x&&x(this.currentDirection);return}this.updateAxis("x",f.point,O),this.updateAxis("y",f.point,O),this.visualElement.render(),S&&ke.update(()=>S(h,f),!1,!0)},a=(h,f)=>{this.latestPointerEvent=h,this.latestPanInfo=f,this.stop(h,f),this.latestPointerEvent=null,this.latestPanInfo=null},c=()=>{const{dragSnapToOrigin:h}=this.getProps();(h||this.constraints)&&this.startAnimation({x:0,y:0})},{dragSnapToOrigin:u}=this.getProps();this.panSession=new bQ(e,{onSessionStart:s,onStart:o,onMove:l,onSessionEnd:a,resumeAnimation:c},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:u,distanceThreshold:r,contextWindow:kQ(this.visualElement),element:this.visualElement.current})}stop(e,n){const r=e||this.latestPointerEvent,i=n||this.latestPanInfo,s=this.isDragging;if(this.cancel(),!s||!i||!r)return;const{velocity:o}=i;this.startAnimation(o);const{onDragEnd:l}=this.getProps();l&&ke.postRender(()=>l(r,i))}cancel(){this.isDragging=!1;const{projection:e,animationState:n}=this.visualElement;e&&(e.isAnimationBlocked=!1),this.endPanSession();const{dragPropagation:r}=this.getProps();!r&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),n&&n.setActive("whileDrag",!1)}endPanSession(){this.panSession&&this.panSession.end(),this.panSession=void 0}updateAxis(e,n,r){const{drag:i}=this.getProps();if(!r||!ja(e,i,this.currentDirection))return;const s=this.getAxisMotionValue(e);let o=this.originPoint[e]+r[e];this.constraints&&this.constraints[e]&&(o=cL(o,this.constraints[e],this.elastic[e])),s.set(o)}resolveConstraints(){var s;const{dragConstraints:e,dragElastic:n}=this.getProps(),r=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):(s=this.visualElement.projection)==null?void 0:s.layout,i=this.constraints;e&&Wi(e)?this.constraints||(this.constraints=this.resolveRefConstraints()):e&&r?this.constraints=uL(r.layoutBox,e):this.constraints=!1,this.elastic=pL(n),i!==this.constraints&&!Wi(e)&&r&&this.constraints&&!this.hasMutatedConstraints&&Xn(o=>{this.constraints!==!1&&this.getAxisMotionValue(o)&&(this.constraints[o]=dL(r.layoutBox[o],this.constraints[o]))})}resolveRefConstraints(){const{dragConstraints:e,onMeasureDragConstraints:n}=this.getProps();if(!e||!Wi(e))return!1;const r=e.current,{projection:i}=this.visualElement;if(!i||!i.layout)return!1;const s=gV(r,i.root,this.visualElement.getTransformPagePoint());let o=hL(i.layout.layoutBox,s);if(n){const l=n(pV(o));this.hasMutatedConstraints=!!l,l&&(o=YP(l))}return o}startAnimation(e){const{drag:n,dragMomentum:r,dragElastic:i,dragTransition:s,dragSnapToOrigin:o,onDragTransitionEnd:l}=this.getProps(),a=this.constraints||{},c=Xn(u=>{if(!ja(u,n,this.currentDirection))return;let h=a&&a[u]||{};(o===!0||o===u)&&(h={min:0,max:0});const f=i?200:1e6,d=i?40:1e7,p={type:"inertia",velocity:r?e[u]:0,bounceStiffness:f,bounceDamping:d,timeConstant:750,restDelta:1,restSpeed:10,...s,...h};return this.startAxisValueAnimation(u,p)});return Promise.all(c).then(l)}startAxisValueAnimation(e,n){const r=this.getAxisMotionValue(e);return Xp(this.visualElement,e),r.start(IO(e,r,0,n,this.visualElement,!1))}stopAnimation(){Xn(e=>this.getAxisMotionValue(e).stop())}getAxisMotionValue(e){const n=`_drag${e.toUpperCase()}`,r=this.visualElement.getProps(),i=r[n];return i||this.visualElement.getValue(e,(r.initial?r.initial[e]:void 0)||0)}snapToCursor(e){Xn(n=>{const{drag:r}=this.getProps();if(!ja(n,r,this.currentDirection))return;const{projection:i}=this.visualElement,s=this.getAxisMotionValue(n);if(i&&i.layout){const{min:o,max:l}=i.layout.layoutBox[n],a=s.get()||0;s.set(e[n]-Ce(o,l,.5)+a)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag:e,dragConstraints:n}=this.getProps(),{projection:r}=this.visualElement;if(!Wi(n)||!r||!this.constraints)return;this.stopAnimation();const i={x:0,y:0};Xn(o=>{const l=this.getAxisMotionValue(o);if(l&&this.constraints!==!1){const a=l.get();i[o]=fL({min:a,max:a},this.constraints[o])}});const{transformTemplate:s}=this.visualElement.getProps();this.visualElement.current.style.transform=s?s({},""):"none",r.root&&r.root.updateScroll(),r.updateLayout(),this.constraints=!1,this.resolveConstraints(),Xn(o=>{if(!ja(o,e,null))return;const l=this.getAxisMotionValue(o),{min:a,max:c}=this.constraints[o];l.set(Ce(a,c,i[o]))}),this.visualElement.render()}addListeners(){if(!this.visualElement.current)return;mL.set(this.visualElement,this);const e=this.visualElement.current,n=Bo(e,"pointerdown",c=>{const{drag:u,dragListener:h=!0}=this.getProps(),f=c.target,d=f!==e&&qZ(f);u&&h&&!d&&this.start(c)});let r;const i=()=>{const{dragConstraints:c}=this.getProps();Wi(c)&&c.current&&(this.constraints=this.resolveRefConstraints(),r||(r=gL(e,c.current,()=>this.scalePositionWithinConstraints())))},{projection:s}=this.visualElement,o=s.addEventListener("measure",i);s&&!s.layout&&(s.root&&s.root.updateScroll(),s.updateLayout()),ke.read(i);const l=Ql(window,"resize",()=>this.scalePositionWithinConstraints()),a=s.addEventListener("didUpdate",({delta:c,hasLayoutChanged:u})=>{this.isDragging&&u&&(Xn(h=>{const f=this.getAxisMotionValue(h);f&&(this.originPoint[h]+=c[h].translate,f.set(f.get()+c[h].translate))}),this.visualElement.render())});return()=>{l(),n(),o(),a&&a(),r&&r()}}getProps(){const e=this.visualElement.getProps(),{drag:n=!1,dragDirectionLock:r=!1,dragPropagation:i=!1,dragConstraints:s=!1,dragElastic:o=Yp,dragMomentum:l=!0}=e;return{...e,drag:n,dragDirectionLock:r,dragPropagation:i,dragConstraints:s,dragElastic:o,dragMomentum:l}}}function Fx(t){let e=!0;return()=>{if(e){e=!1;return}t()}}function gL(t,e,n){const r=ex(t,Fx(n)),i=ex(e,Fx(n));return()=>{r(),i()}}function ja(t,e,n){return(e===!0||e===t)&&(n===null||n===t)}function yL(t,e=10){let n=null;return Math.abs(t.y)>e?n="y":Math.abs(t.x)>e&&(n="x"),n}class xL extends ni{constructor(e){super(e),this.removeGroupControls=un,this.removeListeners=un,this.controls=new OL(e)}mount(){const{dragControls:e}=this.node.getProps();e&&(this.removeGroupControls=e.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||un}update(){const{dragControls:e}=this.node.getProps(),{dragControls:n}=this.node.prevProps||{};e!==n&&(this.removeGroupControls(),e&&(this.removeGroupControls=e.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners(),this.controls.isDragging||this.controls.endPanSession()}}const Ef=t=>(e,n)=>{t&&ke.update(()=>t(e,n),!1,!0)};class vL extends ni{constructor(){super(...arguments),this.removePointerDownListener=un}onPointerDown(e){this.session=new bQ(e,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:kQ(this.node)})}createPanHandlers(){const{onPanSessionStart:e,onPanStart:n,onPan:r,onPanEnd:i}=this.node.getProps();return{onSessionStart:Ef(e),onStart:Ef(n),onMove:Ef(r),onEnd:(s,o)=>{delete this.session,i&&ke.postRender(()=>i(s,o))}}}mount(){this.removePointerDownListener=Bo(this.node.current,"pointerdown",e=>this.onPointerDown(e))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}let Rf=!1;class SL extends m.Component{componentDidMount(){const{visualElement:e,layoutGroup:n,switchLayoutGroup:r,layoutId:i}=this.props,{projection:s}=e;s&&(n.group&&n.group.add(s),r&&r.register&&i&&r.register(s),Rf&&s.root.didUpdate(),s.addEventListener("animationComplete",()=>{this.safeToRemove()}),s.setOptions({...s.options,layoutDependency:this.props.layoutDependency,onExitComplete:()=>this.safeToRemove()})),fc.hasEverUpdated=!0}getSnapshotBeforeUpdate(e){const{layoutDependency:n,visualElement:r,drag:i,isPresent:s}=this.props,{projection:o}=r;return o&&(o.isPresent=s,e.layoutDependency!==n&&o.setOptions({...o.options,layoutDependency:n}),Rf=!0,i||e.layoutDependency!==n||n===void 0||e.isPresent!==s?o.willUpdate():this.safeToRemove(),e.isPresent!==s&&(s?o.promote():o.relegate()||ke.postRender(()=>{const l=o.getStack();(!l||!l.members.length)&&this.safeToRemove()}))),null}componentDidUpdate(){const{visualElement:e,layoutAnchor:n}=this.props,{projection:r}=e;r&&(r.options.layoutAnchor=n,r.root.didUpdate(),qO.postRender(()=>{!r.currentAnimation&&r.isLead()&&this.safeToRemove()}))}componentWillUnmount(){const{visualElement:e,layoutGroup:n,switchLayoutGroup:r}=this.props,{projection:i}=e;Rf=!0,i&&(i.scheduleCheckAfterUnmount(),n&&n.group&&n.group.remove(i),r&&r.deregister&&r.deregister(i))}safeToRemove(){const{safeToRemove:e}=this.props;e&&e()}render(){return null}}function QQ(t){const[e,n]=pQ(),r=m.useContext(CO);return g.jsx(SL,{...t,layoutGroup:r,switchLayoutGroup:m.useContext(SQ),isPresent:e,safeToRemove:n})}const wL={pan:{Feature:vL},drag:{Feature:xL,ProjectionNode:dQ,MeasureLayout:QQ}};function qx(t,e,n){const{props:r}=t;t.animationState&&r.whileHover&&t.animationState.setActive("whileHover",n==="Start");const i="onHover"+n,s=r[i];s&&ke.postRender(()=>s(e,Wl(e)))}class kL extends ni{mount(){const{current:e}=this.node;e&&(this.unmount=IZ(e,(n,r)=>(qx(this.node,r,"Start"),i=>qx(this.node,i,"End"))))}unmount(){}}class bL extends ni{constructor(){super(...arguments),this.isActive=!1}onFocus(){let e=!1;try{e=this.node.current.matches(":focus-visible")}catch{e=!0}!e||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){!this.isActive||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=_l(Ql(this.node.current,"focus",()=>this.onFocus()),Ql(this.node.current,"blur",()=>this.onBlur()))}unmount(){}}function Ux(t,e,n){const{props:r}=t;if(t.current instanceof HTMLButtonElement&&t.current.disabled)return;t.animationState&&r.whileTap&&t.animationState.setActive("whileTap",n==="Start");const i="onTap"+(n==="End"?"":n),s=r[i];s&&ke.postRender(()=>s(e,Wl(e)))}class PL extends ni{mount(){const{current:e}=this.node;if(!e)return;const{globalTapTarget:n,propagate:r}=this.node.props;this.unmount=GZ(e,(i,s)=>(Ux(this.node,s,"Start"),(o,{success:l})=>Ux(this.node,o,l?"End":"Cancel")),{useGlobalTarget:n,stopPropagation:(r==null?void 0:r.tap)===!1})}unmount(){}}const Fp=new WeakMap,jf=new WeakMap,QL=t=>{const e=Fp.get(t.target);e&&e(t)},$L=t=>{t.forEach(QL)};function TL({root:t,...e}){const n=t||document;jf.has(n)||jf.set(n,{});const r=jf.get(n),i=JSON.stringify(e);return r[i]||(r[i]=new IntersectionObserver($L,{root:t,...e})),r[i]}function CL(t,e,n){const r=TL(e);return Fp.set(t,n),r.observe(t),()=>{Fp.delete(t),r.unobserve(t)}}const AL={some:0,all:1};class ML extends ni{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){var a;(a=this.stopObserver)==null||a.call(this);const{viewport:e={}}=this.node.getProps(),{root:n,margin:r,amount:i="some",once:s}=e,o={root:n?n.current:void 0,rootMargin:r,threshold:typeof i=="number"?i:AL[i]},l=c=>{const{isIntersecting:u}=c;if(this.isInView===u||(this.isInView=u,s&&!u&&this.hasEnteredView))return;u&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",u);const{onViewportEnter:h,onViewportLeave:f}=this.node.getProps(),d=u?h:f;d&&d(c)};this.stopObserver=CL(this.node.current,o,l)}mount(){this.startObserver()}update(){if(typeof IntersectionObserver>"u")return;const{props:e,prevProps:n}=this.node;["amount","margin","root"].some(EL(e,n))&&this.startObserver()}unmount(){var e;(e=this.stopObserver)==null||e.call(this),this.hasEnteredView=!1,this.isInView=!1}}function EL({viewport:t={}},{viewport:e={}}={}){return n=>t[n]!==e[n]}const RL={inView:{Feature:ML},tap:{Feature:PL},focus:{Feature:bL},hover:{Feature:kL}},jL={layout:{ProjectionNode:dQ,MeasureLayout:QQ}},ZL={...iL,...RL,...wL,...jL},Gx=JX(ZL,eL);function ig({children:t,expandedContent:e,expandScale:n=.75,delay:r=300,className:i="",onClick:s}){const[o,l]=m.useState(!1),[a,c]=m.useState({x:0,y:0,w:0,h:0}),u=m.useRef(null),h=m.useRef(null),f=m.useRef(null),d=m.useRef(null),p=m.useCallback(()=>{f.current&&(clearTimeout(f.current),f.current=null),d.current&&(clearTimeout(d.current),d.current=null),l(!1)},[]),x=m.useCallback(()=>{if(!u.current)return;const Q=u.current.getBoundingClientRect();c({x:Q.left,y:Q.top,w:Q.width,h:Q.height}),l(!0)},[]),S=m.useCallback(()=>{o||(f.current&&clearTimeout(f.current),f.current=setTimeout(x,r))},[r,x,o]),O=m.useCallback(()=>{o||f.current&&(clearTimeout(f.current),f.current=null)},[o]);m.useEffect(()=>{if(!o)return;const Q=600,M=400;let T=!1;const V=setTimeout(()=>{T=!0},M),C=j=>{if(!T)return;const N=h.current;if(!N)return;const _=N.getBoundingClientRect(),I=20;j.clientX>=_.left-I&&j.clientX<=_.right+I&&j.clientY>=_.top-I&&j.clientY<=_.bottom+I?d.current&&(clearTimeout(d.current),d.current=null):d.current||(d.current=setTimeout(()=>{l(!1)},Q))};return window.addEventListener("mousemove",C),()=>{clearTimeout(V),d.current&&(clearTimeout(d.current),d.current=null),window.removeEventListener("mousemove",C)}},[o]);const y=typeof window<"u"?window.innerWidth:1440,v=typeof window<"u"?window.innerHeight:900,w=y*n,k=v*n,$=(y-w)/2,P=(v-k)/2;return g.jsxs(g.Fragment,{children:[g.jsx("div",{ref:u,className:i,onMouseEnter:S,onMouseLeave:O,onClick:s,style:{opacity:o?0:1,transition:"opacity 100ms ease-out"},children:t}),g.jsx(TX,{children:o&&g.jsxs(g.Fragment,{children:[g.jsx(Gx.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.15},className:"fixed inset-0 z-40 bg-black/60 backdrop-blur-sm",onClick:p}),g.jsx(Gx.div,{ref:h,initial:{left:a.x,top:a.y,width:a.w,height:a.h},animate:{left:$,top:P,width:w,height:k},exit:{left:a.x,top:a.y,width:a.w,height:a.h},transition:{type:"spring",stiffness:280,damping:28,mass:.8},className:"fixed z-50 overflow-hidden rounded-[16px] shadow-dialog",onClick:Q=>{Q.stopPropagation(),p(),s==null||s()},children:typeof e=="function"?e(p):e??t})]})})]})}function VL({previewUrl:t,name:e,comp:n,onSelect:r}){const i=m.useRef(null),s=m.useRef(null),[o,l]=m.useState({w:1920,h:1080}),[a,c]=m.useState(1),u=m.useCallback(()=>{const p=i.current;if(!p)return;const x=Math.min(p.clientWidth/o.w,p.clientHeight/o.h);c(x)},[o]);m.useEffect(()=>{u();const p=i.current;if(!p)return;const x=new ResizeObserver(u);return x.observe(p),()=>x.disconnect()},[u]);const h=m.useCallback(()=>{const p=s.current;if(!p)return;try{const O=p.contentDocument;if(O){const y=O.querySelector("[data-composition-id]");if(y){const v=parseInt(y.getAttribute("data-width")??"0",10),w=parseInt(y.getAttribute("data-height")??"0",10);v>0&&w>0&&l({w:v,h:w})}}}catch{}let x=0;const S=setInterval(()=>{try{const O=p.contentWindow;if(O!=null&&O.__player){O.__player.seek(.5),O.__player.play(),clearInterval(S);return}if(O!=null&&O.__timelines){const y=Object.keys(O.__timelines),v=y.length>0?O.__timelines[y[y.length-1]]:null;v&&(v.seek(.5),v.play(),clearInterval(S))}}catch{}++x>15&&clearInterval(S)},200)},[]),f=i.current?(i.current.clientWidth-o.w*a)/2:0,d=i.current?(i.current.clientHeight-o.h*a)/2:0;return g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsx("div",{ref:i,className:"flex-1 min-h-0 relative overflow-hidden bg-black",children:g.jsx("iframe",{ref:s,src:t,sandbox:"allow-scripts allow-same-origin",onLoad:h,className:"absolute border-none",style:{left:Math.max(0,f),top:Math.max(0,d),width:o.w,height:o.h,transformOrigin:"0 0",transform:`scale(${a})`},tabIndex:-1})}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:e}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:n})]}),g.jsx("button",{onClick:p=>{p.stopPropagation(),r()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Open"})]})]})}function XL({projectId:t,comp:e,isActive:n,onSelect:r}){const i=e.replace(/^compositions\//,"").replace(/\.html$/,""),s=`/api/projects/${t}/thumbnail/${e}?t=0.5`,o=`/api/projects/${t}/preview/comp/${e}`,l=g.jsxs("div",{className:`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${n?"bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]":"border-l-2 border-transparent hover:bg-neutral-800/50"}`,children:[g.jsx("div",{className:"w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0",children:g.jsx("img",{src:s,alt:i,loading:"lazy",className:"w-full h-full object-cover",onError:a=>{a.target.style.display="none"}})}),g.jsxs("div",{className:"min-w-0 flex-1",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate block",children:i}),g.jsx("span",{className:"text-[9px] text-neutral-600 truncate block",children:e})]})]});return g.jsx(ig,{expandedContent:a=>g.jsx(VL,{previewUrl:o,name:i,comp:e,onSelect:()=>{a(),r()}}),onClick:r,expandScale:.5,delay:500,children:l})}const LL=m.memo(function({projectId:e,compositions:n,activeComposition:r,onSelect:i}){return n.length===0?g.jsx("div",{className:"flex-1 flex items-center justify-center px-4",children:g.jsx("p",{className:"text-xs text-neutral-600 text-center",children:"No compositions found"})}):g.jsx("div",{className:"flex-1 overflow-y-auto",children:n.map(s=>g.jsx(XL,{projectId:e,comp:s,isActive:r===s,onSelect:()=>i(s)},s))})}),DL=/\.(mp4|webm|mov|mp3|wav|ogg|m4a|jpg|jpeg|png|gif|webp|svg)$/i,_L=/\.(jpg|jpeg|png|gif|webp|svg)$/i,NL=/\.(mp4|webm|mov)$/i,zL=/\.(mp3|wav|ogg|m4a)$/i;function WL({serveUrl:t,name:e,isImage:n,isVideo:r,isAudio:i}){return g.jsxs("div",{className:"w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative",children:[n&&g.jsx("img",{src:t,alt:e,loading:"lazy",className:"w-full h-full object-cover",onError:s=>{s.target.style.display="none"}}),r&&g.jsxs(g.Fragment,{children:[g.jsx("video",{src:t,muted:!0,playsInline:!0,preload:"metadata",className:"w-full h-full object-cover"}),g.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black/30",children:g.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"white",className:"opacity-80",children:g.jsx("polygon",{points:"6,3 20,12 6,21"})})})]}),i&&g.jsx("div",{className:"w-full h-full flex items-center justify-center bg-neutral-900",children:g.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-purple-400",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]})}),!n&&!r&&!i&&g.jsx("div",{className:"w-full h-full flex items-center justify-center bg-neutral-900",children:g.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"14 2 14 8 20 8",strokeLinecap:"round",strokeLinejoin:"round"})]})})]})}function IL({serveUrl:t,name:e,asset:n,isImage:r,isVideo:i,isAudio:s,onCopy:o}){return g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsxs("div",{className:"flex-1 min-h-0 flex items-center justify-center bg-black p-4",children:[r&&g.jsx("img",{src:t,alt:e,className:"max-w-full max-h-full object-contain rounded"}),i&&g.jsx("video",{src:t,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,className:"max-w-full max-h-full object-contain rounded"}),s&&g.jsxs("div",{className:"flex flex-col items-center gap-4",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-purple-400",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]}),g.jsx("audio",{src:t,controls:!0,autoPlay:!0,className:"w-64"})]})]}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:e}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:n})]}),g.jsx("button",{onClick:l=>{l.stopPropagation(),o()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Copy Path"})]})]})}function BL({projectId:t,asset:e,onCopy:n,isCopied:r}){const i=e.split("/").pop()??e,s=`/api/projects/${t}/preview/${e}`,o=_L.test(e),l=NL.test(e),a=zL.test(e),c=o||l||a,u=g.jsxs("div",{className:`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${r?"bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]":"border-l-2 border-transparent hover:bg-neutral-800/50"}`,children:[g.jsx(WL,{serveUrl:s,name:i,isImage:o,isVideo:l,isAudio:a}),g.jsxs("div",{className:"min-w-0 flex-1",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate block",children:i}),r?g.jsx("span",{className:"text-[9px] text-[#3CE6AC]",children:"Copied!"}):g.jsx("span",{className:"text-[9px] text-neutral-600 truncate block",children:e})]})]});return c?g.jsx(ig,{expandedContent:h=>g.jsx(IL,{serveUrl:s,name:i,asset:e,isImage:o,isVideo:l,isAudio:a,onCopy:()=>{h(),n(e)}}),onClick:()=>n(e),expandScale:.45,delay:500,children:u}):g.jsx("button",{type:"button",onClick:()=>n(e),title:"Click to copy path",className:"w-full",children:u})}const YL=m.memo(function({projectId:e,assets:n,onImport:r}){const i=m.useRef(null),[s,o]=m.useState(!1),[l,a]=m.useState(null),c=m.useCallback(f=>{f.preventDefault(),o(!1),f.dataTransfer.files.length&&(r==null||r(f.dataTransfer.files))},[r]),u=m.useCallback(async f=>{try{await navigator.clipboard.writeText(f),a(f),setTimeout(()=>a(null),1500)}catch{}},[]),h=n.filter(f=>DL.test(f));return g.jsxs("div",{className:`flex-1 flex flex-col min-h-0 transition-colors ${s?"bg-blue-950/20":""}`,onDragOver:f=>{f.preventDefault(),o(!0)},onDragLeave:()=>o(!1),onDrop:c,children:[r&&g.jsxs("div",{className:"px-3 py-2 border-b border-neutral-800/40 flex-shrink-0",children:[g.jsxs("button",{onClick:()=>{var f;return(f=i.current)==null?void 0:f.click()},className:"w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-[11px] rounded-lg border border-dashed border-neutral-700/50 text-neutral-500 hover:text-neutral-300 hover:border-neutral-600 transition-colors",children:[g.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:g.jsx("path",{d:"M12 5v14M5 12h14"})}),"Import media"]}),g.jsx("input",{ref:i,type:"file",accept:"video/*,image/*,audio/*",multiple:!0,className:"hidden",onChange:f=>{var d;(d=f.target.files)!=null&&d.length&&(r(f.target.files),f.target.value="")}})]}),g.jsx("div",{className:"flex-1 overflow-y-auto",children:h.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full px-4 gap-2",children:[g.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-700",children:[g.jsx("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"17 8 12 3 7 8",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("line",{x1:"12",y1:"3",x2:"12",y2:"15",strokeLinecap:"round"})]}),g.jsx("p",{className:"text-[10px] text-neutral-600 text-center",children:"Drop media files here"})]}):h.map(f=>g.jsx(BL,{projectId:e,asset:f,onCopy:u,isCopied:l===f},f))})]})}),$Q="hf-studio-sidebar-tab";function FL(){return localStorage.getItem($Q)==="assets"?"assets":"compositions"}const qL=m.memo(function({width:e=240,projectId:n,compositions:r,assets:i,activeComposition:s,onSelectComposition:o,onImportFiles:l}){const[a,c]=m.useState(FL),u=m.useCallback(h=>{c(h),localStorage.setItem($Q,h)},[]);return Ot(()=>{const h=f=>{!f.metaKey&&!f.ctrlKey||(f.key==="1"&&(f.preventDefault(),u("compositions")),f.key==="2"&&(f.preventDefault(),u("assets")))};return window.addEventListener("keydown",h),()=>window.removeEventListener("keydown",h)}),g.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50",style:{width:e},children:[g.jsxs("div",{className:"flex border-b border-neutral-800/50 flex-shrink-0",children:[g.jsx("button",{type:"button",onClick:()=>u("compositions"),className:`flex-1 py-2 text-[11px] font-medium transition-colors ${a==="compositions"?"text-neutral-200 border-b-2 border-blue-500":"text-neutral-500 hover:text-neutral-400"}`,children:"Compositions"}),g.jsx("button",{type:"button",onClick:()=>u("assets"),className:`flex-1 py-2 text-[11px] font-medium transition-colors ${a==="assets"?"text-neutral-200 border-b-2 border-blue-500":"text-neutral-500 hover:text-neutral-400"}`,children:"Assets"})]}),a==="compositions"?g.jsx(LL,{projectId:n,compositions:r,activeComposition:s,onSelect:o}):g.jsx(YL,{projectId:n,assets:i,onImport:l})]})});function UL(t){if(t<1e3)return`${t}ms`;const e=Math.round(t/1e3);return e<60?`${e}s`:`${Math.floor(e/60)}m ${e%60}s`}function GL(t){const e=Date.now()-t;return e<6e4?"just now":e<36e5?`${Math.floor(e/6e4)}m ago`:`${Math.floor(e/36e5)}h ago`}const HL=m.memo(function({job:e,onDelete:n}){const[r,i]=m.useState(!1),s=m.useCallback(()=>{const o=document.createElement("a");o.href=`/api/render/${e.id}/download`,o.download=e.filename,o.click()},[e.id,e.filename]);return g.jsx("div",{onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1),className:"px-3 py-2.5 border-b border-neutral-800/30 last:border-0",children:g.jsxs("div",{className:"flex items-center gap-2",children:[g.jsxs("div",{className:"flex-shrink-0",children:[e.status==="rendering"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-[#3CE6AC] animate-pulse"}),e.status==="complete"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-green-400"}),e.status==="failed"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-red-400"}),e.status==="cancelled"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-neutral-600"})]}),g.jsxs("div",{className:"flex-1 min-w-0",children:[g.jsxs("div",{className:"flex items-center gap-1.5",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate",children:e.filename}),e.durationMs&&g.jsx("span",{className:"text-[9px] text-neutral-600 flex-shrink-0",children:UL(e.durationMs)})]}),e.status==="rendering"&&g.jsxs("div",{className:"mt-1",children:[g.jsxs("div",{className:"flex items-center justify-between mb-0.5",children:[g.jsx("span",{className:"text-[9px] text-neutral-500",children:e.stage||"Rendering"}),g.jsxs("span",{className:"text-[9px] font-mono text-[#3CE6AC]",children:[e.progress,"%"]})]}),g.jsx("div",{className:"w-full h-1 bg-neutral-800 rounded-full overflow-hidden",children:g.jsx("div",{className:"h-full bg-[#3CE6AC] rounded-full transition-all duration-300",style:{width:`${e.progress}%`}})})]}),e.status!=="rendering"&&g.jsx("span",{className:"text-[9px] text-neutral-600",children:GL(e.createdAt)})]}),r&&g.jsxs("div",{className:"flex items-center gap-1 flex-shrink-0",children:[e.status==="complete"&&g.jsx("button",{onClick:s,className:"p-1 rounded text-neutral-500 hover:text-green-400 transition-colors",title:"Download",children:g.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"}),g.jsx("polyline",{points:"7 10 12 15 17 10"}),g.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),g.jsx("button",{onClick:n,className:"p-1 rounded text-neutral-500 hover:text-red-400 transition-colors",title:"Remove",children:g.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:g.jsx("path",{d:"M18 6L6 18M6 6l12 12"})})})]})]})})});function KL({onStartRender:t,isRendering:e}){const[n,r]=m.useState("mp4");return g.jsxs("div",{className:"flex items-center gap-0.5",children:[g.jsxs("select",{value:n,onChange:i=>r(i.target.value),disabled:e,className:"h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50",children:[g.jsx("option",{value:"mp4",children:"MP4"}),g.jsx("option",{value:"webm",children:"WebM"})]}),g.jsx("button",{onClick:()=>t(n),disabled:e,className:"flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-[#3CE6AC] text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50",children:e?"Rendering...":"Export"})]})}const JL=m.memo(function({jobs:e,onDelete:n,onClearCompleted:r,onStartRender:i,isRendering:s}){const o=m.useRef(null),l=m.useRef(e.length);e.length>l.current&&o.current&&queueMicrotask(()=>{var c;(c=o.current)==null||c.scrollTo({top:o.current.scrollHeight,behavior:"smooth"})}),l.current=e.length;const a=e.filter(c=>c.status!=="rendering").length;return g.jsxs("div",{className:"flex flex-col h-full",children:[g.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-neutral-800/50 flex-shrink-0",children:[g.jsxs("span",{className:"text-[11px] font-medium text-neutral-500 uppercase tracking-wider",children:["Renders (",e.length,")"]}),g.jsxs("div",{className:"flex items-center gap-1.5",children:[a>0&&g.jsx("button",{onClick:r,className:"text-[10px] text-neutral-600 hover:text-neutral-400 transition-colors",children:"Clear"}),g.jsx(KL,{onStartRender:i,isRendering:s})]})]}),g.jsx("div",{ref:o,className:"flex-1 overflow-y-auto",children:e.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full px-4 gap-2",children:[g.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-700",children:[g.jsx("rect",{x:"2",y:"2",width:"20",height:"20",rx:"2.18",ry:"2.18",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("path",{d:"M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5",strokeLinecap:"round",strokeLinejoin:"round"})]}),g.jsx("p",{className:"text-[10px] text-neutral-600 text-center",children:"No renders yet"})]}):e.map(c=>g.jsx(HL,{job:c,onDelete:()=>n(c.id)},c.id))})]})});function eD(t){const[e,n]=m.useState([]),r=m.useRef(null),i=m.useRef(null),s=m.useCallback(async()=>{if(t)try{const c=await fetch(`/api/projects/${t}/renders`);if(!c.ok)return;const u=await c.json();Array.isArray(u.renders)&&n(h=>{const f=new Set(h.map(p=>p.id)),d=u.renders.filter(p=>!f.has(p.id)).map(p=>({id:p.id,status:p.status==="failed"?"failed":"complete",progress:100,filename:p.filename,createdAt:p.createdAt,durationMs:p.durationMs}));return[...h,...d]})}catch{}},[t]);m.useEffect(()=>{s()},[s]);const o=m.useCallback(async(c=30,u="standard",h="mp4")=>{if(!t)return;const f=Date.now(),d=await fetch(`/api/projects/${t}/render`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({fps:c,quality:u,format:h})});if(!d.ok)return;const{jobId:p}=await d.json(),S={id:p,status:"rendering",progress:0,filename:`${p}${h==="webm"?".webm":".mp4"}`,createdAt:f};n(y=>[...y,S]),i.current=p;const O=new EventSource(`/api/render/${p}/progress`);return r.current=O,O.addEventListener("progress",y=>{try{const v=JSON.parse(y.data);n(w=>w.map(k=>k.id===p?{...k,progress:v.progress??k.progress,stage:v.stage??v.message??k.stage,status:v.status==="complete"?"complete":v.status==="failed"?"failed":k.status,durationMs:v.status==="complete"?Date.now()-f:void 0}:k)),(v.status==="complete"||v.status==="failed")&&(O.close(),i.current=null)}catch{}}),O.onerror=()=>{O.close(),n(y=>y.map(v=>v.id===p&&v.status==="rendering"?{...v,status:"failed"}:v)),i.current=null},p},[t]),l=m.useCallback(async c=>{try{await fetch(`/api/render/${c}`,{method:"DELETE"})}catch{}n(u=>u.filter(h=>h.id!==c))},[]),a=m.useCallback(()=>{n(c=>c.filter(u=>u.status==="rendering"))},[]);return m.useEffect(()=>()=>{var c;(c=r.current)==null||c.close(),r.current=null},[t]),{jobs:e,startRender:o,deleteRender:l,clearCompleted:a,isRendering:e.some(c=>c.status==="rendering")}}const TQ=2,tD=1,Hx=TQ+tD;function nD(t,e){const n=[],r=Math.floor(t.length/e);if(r===0)return Array(e).fill(0);for(let s=0;s<e;s++){let o=0;const l=s*r,a=Math.min(l+r,t.length);for(let c=l;c<a;c++){const u=Math.abs(t[c]??0);u>o&&(o=u)}n.push(o)}const i=Math.max(...n,.001);return n.map(s=>s/i)}function rD(t,e){let n=0;for(let s=0;s<t.length;s++)n=(n<<5)-n+t.charCodeAt(s)|0;n=Math.abs(n)||42;const r=()=>(n=n*16807%2147483647,(n&2147483647)/2147483647),i=[];for(let s=0;s<e;s++){const o=s/e,l=.3+.3*Math.sin(o*Math.PI*3.2)+.2*Math.sin(o*Math.PI*7.1);i.push(Math.max(.05,Math.min(1,l*(.4+.6*r()))))}return i}const Zf=new Map,iD=m.memo(function({audioUrl:e,label:n,labelColor:r}){const i=m.useRef(null),s=m.useRef(null),o=m.useRef(null),[l,a]=m.useState(Zf.get(e)??null);m.useEffect(()=>{if(l||!e)return;const h=new AbortController;return fetch(e,{signal:h.signal}).then(f=>f.arrayBuffer()).then(f=>{const d=new AudioContext;return d.decodeAudioData(f).finally(()=>d.close())}).then(f=>{if(h.signal.aborted)return;const d=f.getChannelData(0),p=nD(d,4e3);Zf.set(e,p),a(p)}).catch(()=>{if(h.signal.aborted)return;const f=rD(e,4e3);Zf.set(e,f),a(f)}),()=>h.abort()},[e,l]);const c=m.useCallback(()=>{const h=i.current,f=s.current;if(!h||!f||!l)return;const d=h.clientWidth||400,p=Math.min(Math.floor(d/Hx),l.length);let x="";for(let S=0;S<p;S++){const O=Math.floor(S/p*l.length),y=l[O]??0,v=Math.max(3,Math.round(y*100)),w=(.45+y*.4).toFixed(2);x+=`<div style="position:absolute;bottom:0;left:${S*Hx}px;width:${TQ}px;height:${v}%;background:rgba(75,163,210,${w})"></div>`}f.innerHTML=x},[l]),u=m.useCallback(h=>{var f;(f=o.current)==null||f.disconnect(),i.current=h,h&&(c(),o.current=new ResizeObserver(()=>c()),o.current.observe(h))},[c]);return m.useEffect(()=>{c()},[c]),m.useEffect(()=>()=>{var h;(h=o.current)==null||h.disconnect()},[]),g.jsxs("div",{ref:u,className:"absolute inset-0 overflow-hidden",children:[g.jsx("div",{ref:s,className:"absolute left-0 right-0 bottom-0",style:{top:16}}),!l&&g.jsx("div",{className:"absolute left-0 right-0 bottom-0 animate-pulse",style:{top:16,background:"linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)"}}),g.jsx("div",{className:"absolute top-0 left-0 right-0 px-1.5 py-0.5 z-10",children:g.jsx("span",{className:"text-[9px] font-semibold truncate block leading-tight",style:{color:r,textShadow:"0 1px 3px rgba(0,0,0,0.9)"},children:n})})]})}),CQ=/\.(jpg|jpeg|png|gif|webp|svg|ico)$/i,AQ=/\.(mp4|webm|mov)$/i,MQ=/\.(mp3|wav|ogg|m4a|aac)$/i,sD=/\.(woff|woff2|ttf|otf|eot)$/i;function Kx(t){return CQ.test(t)||AQ.test(t)||MQ.test(t)||sD.test(t)}function oD({projectId:t,filePath:e}){const n=`/api/projects/${t}/preview/${e}`,r=e.split("/").pop()??e;return CQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950",children:[g.jsx("img",{src:n,alt:r,className:"max-w-full max-h-[70%] object-contain rounded border border-neutral-800"}),g.jsx("span",{className:"mt-3 text-[11px] text-neutral-500 font-mono",children:e})]}):AQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950",children:[g.jsx("video",{src:n,controls:!0,className:"max-w-full max-h-[70%] rounded border border-neutral-800"}),g.jsx("span",{className:"mt-3 text-[11px] text-neutral-500 font-mono",children:e})]}):MQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]}),g.jsx("audio",{src:n,controls:!0,className:"w-full max-w-[280px]"}),g.jsx("span",{className:"text-[11px] text-neutral-500 font-mono",children:e})]}):g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2",children:[g.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"14 2 14 8 20 8",strokeLinecap:"round",strokeLinejoin:"round"})]}),g.jsx("span",{className:"text-sm text-neutral-400 font-medium",children:r}),g.jsx("span",{className:"text-[11px] text-neutral-600 font-mono",children:e}),g.jsx("span",{className:"text-[10px] text-neutral-600",children:"Binary file — preview not available"})]})}function lD({src:t}){const e=m.useRef(null),n=m.useRef(null),[r,i]=m.useState({w:1920,h:1080}),[s,o]=m.useState(1);m.useEffect(()=>{const u=e.current;if(!u)return;const h=()=>{const d=u.clientWidth,p=u.clientHeight,x=Math.min(d/r.w,p/r.h);o(x)};h();const f=new ResizeObserver(h);return f.observe(u),()=>f.disconnect()},[r]);const l=m.useCallback(()=>{const u=n.current;if(!u)return;let h=0;const f=setInterval(()=>{try{const d=u.contentDocument;if(d){const x=d.querySelector("[data-composition-id]");if(x){const S=parseInt(x.getAttribute("data-width")??"0",10),O=parseInt(x.getAttribute("data-height")??"0",10);S>0&&O>0&&i({w:S,h:O})}}const p=u.contentWindow;p!=null&&p.__player&&(p.__player.seek(2),p.__player.play(),clearInterval(f))}catch{}++h>25&&clearInterval(f)},200)},[]),a=e.current?(e.current.clientWidth-r.w*s)/2:0,c=e.current?(e.current.clientHeight-r.h*s)/2:0;return g.jsx("div",{ref:e,className:"w-full h-full relative overflow-hidden bg-black",children:g.jsx("iframe",{ref:n,src:t,sandbox:"allow-scripts allow-same-origin",onLoad:l,className:"absolute border-none",style:{left:Math.max(0,a),top:Math.max(0,c),width:r.w,height:r.h,transformOrigin:"0 0",transform:`scale(${s})`}})})}function aD({project:t,onSelect:e}){const n=`/api/projects/${t.id}/thumbnail/index.html?t=0.5`,r=`/api/projects/${t.id}/preview`,i=g.jsxs("div",{className:"rounded-xl overflow-hidden bg-neutral-900 border border-neutral-800/60 hover:border-[#3CE6AC]/30 hover:shadow-lg hover:shadow-[#3CE6AC]/5 transition-all duration-200 cursor-pointer",children:[g.jsx("div",{className:"aspect-video bg-neutral-950 relative overflow-hidden flex items-center justify-center",children:g.jsx("img",{src:n,alt:t.title??t.id,loading:"lazy",className:"max-w-full max-h-full object-contain",onError:s=>{s.target.style.display="none"}})}),g.jsxs("div",{className:"px-3.5 py-3",children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200 truncate",children:t.title??t.id}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono truncate mt-0.5",children:t.id})]})]});return g.jsx(ig,{expandedContent:s=>g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsx("div",{className:"flex-1 min-h-0",children:g.jsx(lD,{src:r})}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:t.title??t.id}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:t.id})]}),g.jsx("button",{onClick:o=>{o.stopPropagation(),s(),e()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Open"})]})]}),onClick:e,expandScale:.6,delay:400,children:i})}function cD({onSelect:t}){const[e,n]=m.useState([]),[r,i]=m.useState(!0);return Ot(()=>{fetch("/api/projects").then(s=>s.json()).then(s=>{n(s.projects??[]),i(!1)}).catch(()=>i(!1))}),g.jsxs("div",{className:"h-screen w-screen bg-neutral-950 overflow-y-auto",children:[g.jsxs("div",{className:"max-w-4xl mx-auto px-6 pt-16 pb-8",children:[g.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[g.jsxs("svg",{width:"32",height:"32",viewBox:"0 0 512 512",className:"flex-shrink-0",children:[g.jsx("rect",{width:"512",height:"512",rx:"115",fill:"#1A1913"}),g.jsxs("g",{strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("polyline",{points:"156,176 76,256 156,336",fill:"none",stroke:"#7B7568",strokeWidth:"32"}),g.jsx("line",{x1:"206",y1:"346",x2:"286",y2:"166",stroke:"#D8D3C5",strokeWidth:"32"}),g.jsx("polygon",{points:"336,176 436,256 336,336",fill:"#3CE6AC",stroke:"#3CE6AC",strokeWidth:"32"})]})]}),g.jsx("h1",{className:"text-2xl font-bold text-neutral-100 tracking-tight",children:"HyperFrames Studio"})]}),g.jsx("p",{className:"text-sm text-neutral-500 ml-11",children:"Your projects"})]}),g.jsx("div",{className:"max-w-4xl mx-auto px-6 pb-16",children:r?g.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:[1,2,3].map(s=>g.jsx("div",{className:"aspect-video rounded-xl bg-neutral-900 animate-pulse"},s))}):e.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center py-24 gap-4",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 512 512",className:"opacity-20",children:[g.jsx("rect",{width:"512",height:"512",rx:"115",fill:"#1A1913"}),g.jsxs("g",{strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("polyline",{points:"156,176 76,256 156,336",fill:"none",stroke:"#7B7568",strokeWidth:"32"}),g.jsx("line",{x1:"206",y1:"346",x2:"286",y2:"166",stroke:"#D8D3C5",strokeWidth:"32"}),g.jsx("polygon",{points:"336,176 436,256 336,336",fill:"#3CE6AC",stroke:"#3CE6AC",strokeWidth:"32"})]})]}),g.jsxs("div",{className:"text-center",children:[g.jsx("p",{className:"text-sm text-neutral-400 font-medium",children:"No projects yet"}),g.jsxs("p",{className:"text-xs text-neutral-600 mt-1",children:["Run"," ",g.jsx("code",{className:"px-1.5 py-0.5 rounded bg-neutral-800 text-[#3CE6AC] text-[11px]",children:"hyperframes init"})," ","to create one"]})]})]}):g.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:e.map(s=>g.jsx(aD,{project:s,onSelect:()=>t(s.id)},s.id))})})]})}function uD({findings:t,projectId:e,onClose:n}){const r=t.filter(c=>c.severity==="error"),i=t.filter(c=>c.severity==="warning"),s=t.length>0,[o,l]=m.useState(!1),a=async()=>{const c=t.map(h=>{let f=`[${h.severity}] ${h.message}`;return h.file&&(f+=`
+        `),()=>{var P;(P=l.current)==null||P.removeAttribute("data-motion-pop-id"),$.contains(k)&&$.removeChild(k)}},[e]),g.jsx(bX,{isPresent:e,childRef:l,sizeRef:a,pop:s,children:s===!1?t:m.cloneElement(t,{ref:h})})}const QX=({children:t,initial:e,isPresent:n,onExitComplete:r,custom:i,presenceAffectsLayout:s,mode:o,anchorX:l,anchorY:a,root:c})=>{const u=AO($X),h=m.useId();let f=!0,d=m.useMemo(()=>(f=!1,{id:h,initial:e,isPresent:n,custom:i,onExitComplete:p=>{u.set(p,!0);for(const x of u.values())if(!x)return;r&&r()},register:p=>(u.set(p,!1),()=>u.delete(p))}),[n,u,r]);return s&&f&&(d={...d}),m.useMemo(()=>{u.forEach((p,x)=>u.set(x,!1))},[n]),m.useEffect(()=>{!n&&!u.size&&r&&r()},[n]),t=g.jsx(PX,{pop:o==="popLayout",isPresent:n,anchorX:l,anchorY:a,root:c,children:t}),g.jsx(nh.Provider,{value:d,children:t})};function $X(){return new Map}function pQ(t=!0){const e=m.useContext(nh);if(e===null)return[!0,null];const{isPresent:n,onExitComplete:r,register:i}=e,s=m.useId();m.useEffect(()=>{if(t)return i(s)},[t]);const o=m.useCallback(()=>t&&r&&r(s),[s,r,t]);return!n&&r?[!1,o]:[!0]}const Ea=t=>t.key||"";function Vx(t){const e=[];return m.Children.forEach(t,n=>{m.isValidElement(n)&&e.push(n)}),e}const TX=({children:t,custom:e,initial:n=!0,onExitComplete:r,presenceAffectsLayout:i=!0,mode:s="sync",propagate:o=!1,anchorX:l="left",anchorY:a="top",root:c})=>{const[u,h]=pQ(o),f=m.useMemo(()=>Vx(t),[t]),d=o&&!u?[]:f.map(Ea),p=m.useRef(!0),x=m.useRef(f),S=AO(()=>new Map),O=m.useRef(new Set),[y,v]=m.useState(f),[w,k]=m.useState(f);Nb(()=>{p.current=!1,x.current=f;for(let Q=0;Q<w.length;Q++){const M=Ea(w[Q]);d.includes(M)?(S.delete(M),O.current.delete(M)):S.get(M)!==!0&&S.set(M,!1)}},[w,d.length,d.join("-")]);const $=[];if(f!==y){let Q=[...f];for(let M=0;M<w.length;M++){const T=w[M],V=Ea(T);d.includes(V)||(Q.splice(M,0,T),$.push(T))}return s==="wait"&&$.length&&(Q=$),k(Vx(Q)),v(f),null}const{forceRender:P}=m.useContext(CO);return g.jsx(g.Fragment,{children:w.map(Q=>{const M=Ea(Q),T=o&&!u?!1:f===w||d.includes(M),V=()=>{if(O.current.has(M))return;if(S.has(M))O.current.add(M),S.set(M,!0);else return;let C=!0;S.forEach(j=>{j||(C=!1)}),C&&(P==null||P(),k(x.current),o&&(h==null||h()),r&&r())};return g.jsx(QX,{isPresent:T,initial:!p.current||n?void 0:!1,custom:e,presenceAffectsLayout:i,mode:s,root:c,onExitComplete:T?void 0:V,anchorX:l,anchorY:a,children:Q},M)})})},mQ=m.createContext({strict:!1}),Xx={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};let Lx=!1;function CX(){if(Lx)return;const t={};for(const e in Xx)t[e]={isEnabled:n=>Xx[e].some(r=>!!n[r])};IP(t),Lx=!0}function OQ(){return CX(),fV()}function AX(t){const e=OQ();for(const n in t)e[n]={...e[n],...t[n]};IP(e)}const MX=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function Su(t){return t.startsWith("while")||t.startsWith("drag")&&t!=="draggable"||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||MX.has(t)}let gQ=t=>!Su(t);function EX(t){typeof t=="function"&&(gQ=e=>e.startsWith("on")?!Su(e):t(e))}try{EX(require("@emotion/is-prop-valid").default)}catch{}function RX(t,e,n){const r={};for(const i in t)i==="values"&&typeof t.values=="object"||lt(t[i])||(gQ(i)||n===!0&&Su(i)||!e&&!Su(i)||t.draggable&&i.startsWith("onDrag"))&&(r[i]=t[i]);return r}const oh=m.createContext({});function jX(t,e){if(sh(t)){const{initial:n,animate:r}=t;return{initial:n===!1||Pl(n)?n:void 0,animate:Pl(r)?r:void 0}}return t.inherit!==!1?e:{}}function ZX(t){const{initial:e,animate:n}=jX(t,m.useContext(oh));return m.useMemo(()=>({initial:e,animate:n}),[Dx(e),Dx(n)])}function Dx(t){return Array.isArray(t)?t.join(" "):t}const ng=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function yQ(t,e,n){for(const r in e)!lt(e[r])&&!HP(r,n)&&(t[r]=e[r])}function VX({transformTemplate:t},e){return m.useMemo(()=>{const n=ng();return JO(n,e,t),Object.assign({},n.vars,n.style)},[e])}function XX(t,e){const n=t.style||{},r={};return yQ(r,n,t),Object.assign(r,VX(t,e)),r}function LX(t,e){const n={},r=XX(t,e);return t.drag&&t.dragListener!==!1&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=t.drag===!0?"none":`pan-${t.drag==="x"?"y":"x"}`),t.tabIndex===void 0&&(t.onTap||t.onTapStart||t.whileTap)&&(n.tabIndex=0),n.style=r,n}const xQ=()=>({...ng(),attrs:{}});function DX(t,e,n,r){const i=m.useMemo(()=>{const s=xQ();return KP(s,e,eQ(r),t.transformTemplate,t.style),{...s.attrs,style:{...s.style}}},[e]);if(t.style){const s={};yQ(s,t.style,t),i.style={...s,...i.style}}return i}const _X=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function rg(t){return typeof t!="string"||t.includes("-")?!1:!!(_X.indexOf(t)>-1||/[A-Z]/u.test(t))}function NX(t,e,n,{latestValues:r},i,s=!1,o){const a=(o??rg(t)?DX:LX)(e,r,i,t),c=RX(e,typeof t=="string",s),u=t!==m.Fragment?{...c,...a,ref:n}:{},{children:h}=e,f=m.useMemo(()=>lt(h)?h.get():h,[h]);return m.createElement(t,{...u,children:f})}function zX({scrapeMotionValuesFromProps:t,createRenderState:e},n,r,i){return{latestValues:WX(n,r,i,t),renderState:e()}}function WX(t,e,n,r){const i={},s=r(t,{});for(const f in s)i[f]=hc(s[f]);let{initial:o,animate:l}=t;const a=sh(t),c=zP(t);e&&c&&!a&&t.inherit!==!1&&(o===void 0&&(o=e.initial),l===void 0&&(l=e.animate));let u=n?n.initial===!1:!1;u=u||o===!1;const h=u?l:o;if(h&&typeof h!="boolean"&&!ih(h)){const f=Array.isArray(h)?h:[h];for(let d=0;d<f.length;d++){const p=BO(t,f[d]);if(p){const{transitionEnd:x,transition:S,...O}=p;for(const y in O){let v=O[y];if(Array.isArray(v)){const w=u?v.length-1:0;v=v[w]}v!==null&&(i[y]=v)}for(const y in x)i[y]=x[y]}}}return i}const vQ=t=>(e,n)=>{const r=m.useContext(oh),i=m.useContext(nh),s=()=>zX(t,e,r,i);return n?s():AO(s)},IX=vQ({scrapeMotionValuesFromProps:eg,createRenderState:ng}),BX=vQ({scrapeMotionValuesFromProps:tQ,createRenderState:xQ}),YX=Symbol.for("motionComponentSymbol");function FX(t,e,n){const r=m.useRef(n);m.useInsertionEffect(()=>{r.current=n});const i=m.useRef(null);return m.useCallback(s=>{var l;s&&((l=t.onMount)==null||l.call(t,s));const o=r.current;if(typeof o=="function")if(s){const a=o(s);typeof a=="function"&&(i.current=a)}else i.current?(i.current(),i.current=null):o(s);else o&&(o.current=s);e&&(s?e.mount(s):e.unmount())},[e])}const SQ=m.createContext({});function Wi(t){return t&&typeof t=="object"&&Object.prototype.hasOwnProperty.call(t,"current")}function qX(t,e,n,r,i,s){var v,w;const{visualElement:o}=m.useContext(oh),l=m.useContext(mQ),a=m.useContext(nh),c=m.useContext(tg),u=c.reducedMotion,h=c.skipAnimations,f=m.useRef(null),d=m.useRef(!1);r=r||l.renderer,!f.current&&r&&(f.current=r(t,{visualState:e,parent:o,props:n,presenceContext:a,blockInitialAnimation:a?a.initial===!1:!1,reducedMotionConfig:u,skipAnimations:h,isSVG:s}),d.current&&f.current&&(f.current.manuallyAnimateOnMount=!0));const p=f.current,x=m.useContext(SQ);p&&!p.projection&&i&&(p.type==="html"||p.type==="svg")&&UX(f.current,n,i,x);const S=m.useRef(!1);m.useInsertionEffect(()=>{p&&S.current&&p.update(n,a)});const O=n[CP],y=m.useRef(!!O&&typeof window<"u"&&!((v=window.MotionHandoffIsComplete)!=null&&v.call(window,O))&&((w=window.MotionHasOptimisedAnimation)==null?void 0:w.call(window,O)));return Nb(()=>{d.current=!0,p&&(S.current=!0,window.MotionIsMounted=!0,p.updateFeatures(),p.scheduleRenderMicrotask(),y.current&&p.animationState&&p.animationState.animateChanges())}),m.useEffect(()=>{p&&(!y.current&&p.animationState&&p.animationState.animateChanges(),y.current&&(queueMicrotask(()=>{var k;(k=window.MotionHandoffMarkAsComplete)==null||k.call(window,O)}),y.current=!1),p.enteringChildren=void 0)}),p}function UX(t,e,n,r){const{layoutId:i,layout:s,drag:o,dragConstraints:l,layoutScroll:a,layoutRoot:c,layoutAnchor:u,layoutCrossfade:h}=e;t.projection=new n(t.latestValues,e["data-framer-portal-id"]?void 0:wQ(t.parent)),t.projection.setOptions({layoutId:i,layout:s,alwaysMeasureLayout:!!o||l&&Wi(l),visualElement:t,animationType:typeof s=="string"?s:"both",initialPromotionConfig:r,crossfade:h,layoutScroll:a,layoutRoot:c,layoutAnchor:u})}function wQ(t){if(t)return t.options.allowProjection!==!1?t.projection:wQ(t.parent)}function Af(t,{forwardMotionProps:e=!1,type:n}={},r,i){r&&AX(r);const s=n?n==="svg":rg(t),o=s?BX:IX;function l(c,u){let h;const f={...m.useContext(tg),...c,layoutId:GX(c)},{isStatic:d}=f,p=ZX(c),x=o(c,d);if(!d&&typeof window<"u"){HX();const S=KX(f);h=S.MeasureLayout,p.visualElement=qX(t,x,f,i,S.ProjectionNode,s)}return g.jsxs(oh.Provider,{value:p,children:[h&&p.visualElement?g.jsx(h,{visualElement:p.visualElement,...f}):null,NX(t,c,FX(x,p.visualElement,u),x,d,e,s)]})}l.displayName=`motion.${typeof t=="string"?t:`create(${t.displayName??t.name??""})`}`;const a=m.forwardRef(l);return a[YX]=t,a}function GX({layoutId:t}){const e=m.useContext(CO).id;return e&&t!==void 0?e+"-"+t:t}function HX(t,e){m.useContext(mQ).strict}function KX(t){const e=OQ(),{drag:n,layout:r}=e;if(!n&&!r)return{};const i={...n,...r};return{MeasureLayout:n!=null&&n.isEnabled(t)||r!=null&&r.isEnabled(t)?i.MeasureLayout:void 0,ProjectionNode:i.ProjectionNode}}function JX(t,e){if(typeof Proxy>"u")return Af;const n=new Map,r=(s,o)=>Af(s,o,t,e),i=(s,o)=>r(s,o);return new Proxy(i,{get:(s,o)=>o==="create"?r:(n.has(o)||n.set(o,Af(o,void 0,t,e)),n.get(o))})}const eL=(t,e)=>e.isSVG??rg(t)?new CV(e):new kV(e,{allowProjection:t!==m.Fragment});class tL extends ni{constructor(e){super(e),e.animationState||(e.animationState=jV(e))}updateAnimationControlsSubscription(){const{animate:e}=this.node.getProps();ih(e)&&(this.unmountControls=e.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){const{animate:e}=this.node.getProps(),{animate:n}=this.node.prevProps||{};e!==n&&this.updateAnimationControlsSubscription()}unmount(){var e;this.node.animationState.reset(),(e=this.unmountControls)==null||e.call(this)}}let nL=0;class rL extends ni{constructor(){super(...arguments),this.id=nL++,this.isExitComplete=!1}update(){var s;if(!this.node.presenceContext)return;const{isPresent:e,onExitComplete:n}=this.node.presenceContext,{isPresent:r}=this.node.prevPresenceContext||{};if(!this.node.animationState||e===r)return;if(e&&r===!1){if(this.isExitComplete){const{initial:o,custom:l}=this.node.getProps();if(typeof o=="string"){const a=wi(this.node,o,l);if(a){const{transition:c,transitionEnd:u,...h}=a;for(const f in h)(s=this.node.getValue(f))==null||s.jump(h[f])}}this.node.animationState.reset(),this.node.animationState.animateChanges()}else this.node.animationState.setActive("exit",!1);this.isExitComplete=!1;return}const i=this.node.animationState.setActive("exit",!e);n&&!e&&i.then(()=>{this.isExitComplete=!0,n(this.id)})}mount(){const{register:e,onExitComplete:n}=this.node.presenceContext||{};n&&n(this.id),e&&(this.unmount=e(this.id))}unmount(){}}const iL={animation:{Feature:tL},exit:{Feature:rL}};function Wl(t){return{point:{x:t.pageX,y:t.pageY}}}const sL=t=>e=>UO(e)&&t(e,Wl(e));function Bo(t,e,n,r){return Ql(t,e,sL(n),r)}const kQ=({current:t})=>t?t.ownerDocument.defaultView:null,_x=(t,e)=>Math.abs(t-e);function oL(t,e){const n=_x(t.x,e.x),r=_x(t.y,e.y);return Math.sqrt(n**2+r**2)}const Nx=new Set(["auto","scroll"]);class bQ{constructor(e,n,{transformPagePoint:r,contextWindow:i=window,dragSnapToOrigin:s=!1,distanceThreshold:o=3,element:l}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.lastRawMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=d=>{this.handleScroll(d.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;this.lastRawMoveEventInfo&&(this.lastMoveEventInfo=Ra(this.lastRawMoveEventInfo,this.transformPagePoint));const d=Mf(this.lastMoveEventInfo,this.history),p=this.startEvent!==null,x=oL(d.offset,{x:0,y:0})>=this.distanceThreshold;if(!p&&!x)return;const{point:S}=d,{timestamp:O}=it;this.history.push({...S,timestamp:O});const{onStart:y,onMove:v}=this.handlers;p||(y&&y(this.lastMoveEvent,d),this.startEvent=this.lastMoveEvent),v&&v(this.lastMoveEvent,d)},this.handlePointerMove=(d,p)=>{this.lastMoveEvent=d,this.lastRawMoveEventInfo=p,this.lastMoveEventInfo=Ra(p,this.transformPagePoint),ke.update(this.updatePoint,!0)},this.handlePointerUp=(d,p)=>{this.end();const{onEnd:x,onSessionEnd:S,resumeAnimation:O}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&O&&O(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const y=Mf(d.type==="pointercancel"?this.lastMoveEventInfo:Ra(p,this.transformPagePoint),this.history);this.startEvent&&x&&x(d,y),S&&S(d,y)},!UO(e))return;this.dragSnapToOrigin=s,this.handlers=n,this.transformPagePoint=r,this.distanceThreshold=o,this.contextWindow=i||window;const a=Wl(e),c=Ra(a,this.transformPagePoint),{point:u}=c,{timestamp:h}=it;this.history=[{...u,timestamp:h}];const{onSessionStart:f}=n;f&&f(e,Mf(c,this.history)),this.removeListeners=_l(Bo(this.contextWindow,"pointermove",this.handlePointerMove),Bo(this.contextWindow,"pointerup",this.handlePointerUp),Bo(this.contextWindow,"pointercancel",this.handlePointerUp)),l&&this.startScrollTracking(l)}startScrollTracking(e){let n=e.parentElement;for(;n;){const r=getComputedStyle(n);(Nx.has(r.overflowX)||Nx.has(r.overflowY))&&this.scrollPositions.set(n,{x:n.scrollLeft,y:n.scrollTop}),n=n.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0}),window.addEventListener("scroll",this.onWindowScroll),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(e){const n=this.scrollPositions.get(e);if(!n)return;const r=e===window,i=r?{x:window.scrollX,y:window.scrollY}:{x:e.scrollLeft,y:e.scrollTop},s={x:i.x-n.x,y:i.y-n.y};s.x===0&&s.y===0||(r?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=s.x,this.lastMoveEventInfo.point.y+=s.y):this.history.length>0&&(this.history[0].x-=s.x,this.history[0].y-=s.y),this.scrollPositions.set(e,i),ke.update(this.updatePoint,!0))}updateHandlers(e){this.handlers=e}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),Hr(this.updatePoint)}}function Ra(t,e){return e?{point:e(t.point)}:t}function zx(t,e){return{x:t.x-e.x,y:t.y-e.y}}function Mf({point:t},e){return{point:t,delta:zx(t,PQ(e)),offset:zx(t,lL(e)),velocity:aL(e,.1)}}function lL(t){return t[0]}function PQ(t){return t[t.length-1]}function aL(t,e){if(t.length<2)return{x:0,y:0};let n=t.length-1,r=null;const i=PQ(t);for(;n>=0&&(r=t[n],!(i.timestamp-r.timestamp>qt(e)));)n--;if(!r)return{x:0,y:0};r===t[0]&&t.length>2&&i.timestamp-r.timestamp>qt(e)*2&&(r=t[1]);const s=an(i.timestamp-r.timestamp);if(s===0)return{x:0,y:0};const o={x:(i.x-r.x)/s,y:(i.y-r.y)/s};return o.x===1/0&&(o.x=0),o.y===1/0&&(o.y=0),o}function cL(t,{min:e,max:n},r){return e!==void 0&&t<e?t=r?Ce(e,t,r.min):Math.max(t,e):n!==void 0&&t>n&&(t=r?Ce(n,t,r.max):Math.min(t,n)),t}function Wx(t,e,n){return{min:e!==void 0?t.min+e:void 0,max:n!==void 0?t.max+n-(t.max-t.min):void 0}}function uL(t,{top:e,left:n,bottom:r,right:i}){return{x:Wx(t.x,n,i),y:Wx(t.y,e,r)}}function Ix(t,e){let n=e.min-t.min,r=e.max-t.max;return e.max-e.min<t.max-t.min&&([n,r]=[r,n]),{min:n,max:r}}function hL(t,e){return{x:Ix(t.x,e.x),y:Ix(t.y,e.y)}}function fL(t,e){let n=.5;const r=kt(t),i=kt(e);return i>r?n=kl(e.min,e.max-r,t.min):r>i&&(n=kl(t.min,t.max-i,e.min)),Jn(0,1,n)}function dL(t,e){const n={};return e.min!==void 0&&(n.min=e.min-t.min),e.max!==void 0&&(n.max=e.max-t.min),n}const Yp=.35;function pL(t=Yp){return t===!1?t=0:t===!0&&(t=Yp),{x:Bx(t,"left","right"),y:Bx(t,"top","bottom")}}function Bx(t,e,n){return{min:Yx(t,e),max:Yx(t,n)}}function Yx(t,e){return typeof t=="number"?t:t[e]||0}const mL=new WeakMap;class OL{constructor(e){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=qe(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=e}start(e,{snapToCursor:n=!1,distanceThreshold:r}={}){const{presenceContext:i}=this.visualElement;if(i&&i.isPresent===!1)return;const s=h=>{n&&this.snapToCursor(Wl(h).point),this.stopAnimation()},o=(h,f)=>{const{drag:d,dragPropagation:p,onDragStart:x}=this.getProps();if(d&&!p&&(this.openDragLock&&this.openDragLock(),this.openDragLock=zZ(d),!this.openDragLock))return;this.latestPointerEvent=h,this.latestPanInfo=f,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),Xn(O=>{let y=this.getAxisMotionValue(O).get()||0;if(Kn.test(y)){const{projection:v}=this.visualElement;if(v&&v.layout){const w=v.layout.layoutBox[O];w&&(y=kt(w)*(parseFloat(y)/100))}}this.originPoint[O]=y}),x&&ke.update(()=>x(h,f),!1,!0),Xp(this.visualElement,"transform");const{animationState:S}=this.visualElement;S&&S.setActive("whileDrag",!0)},l=(h,f)=>{this.latestPointerEvent=h,this.latestPanInfo=f;const{dragPropagation:d,dragDirectionLock:p,onDirectionLock:x,onDrag:S}=this.getProps();if(!d&&!this.openDragLock)return;const{offset:O}=f;if(p&&this.currentDirection===null){this.currentDirection=yL(O),this.currentDirection!==null&&x&&x(this.currentDirection);return}this.updateAxis("x",f.point,O),this.updateAxis("y",f.point,O),this.visualElement.render(),S&&ke.update(()=>S(h,f),!1,!0)},a=(h,f)=>{this.latestPointerEvent=h,this.latestPanInfo=f,this.stop(h,f),this.latestPointerEvent=null,this.latestPanInfo=null},c=()=>{const{dragSnapToOrigin:h}=this.getProps();(h||this.constraints)&&this.startAnimation({x:0,y:0})},{dragSnapToOrigin:u}=this.getProps();this.panSession=new bQ(e,{onSessionStart:s,onStart:o,onMove:l,onSessionEnd:a,resumeAnimation:c},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:u,distanceThreshold:r,contextWindow:kQ(this.visualElement),element:this.visualElement.current})}stop(e,n){const r=e||this.latestPointerEvent,i=n||this.latestPanInfo,s=this.isDragging;if(this.cancel(),!s||!i||!r)return;const{velocity:o}=i;this.startAnimation(o);const{onDragEnd:l}=this.getProps();l&&ke.postRender(()=>l(r,i))}cancel(){this.isDragging=!1;const{projection:e,animationState:n}=this.visualElement;e&&(e.isAnimationBlocked=!1),this.endPanSession();const{dragPropagation:r}=this.getProps();!r&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),n&&n.setActive("whileDrag",!1)}endPanSession(){this.panSession&&this.panSession.end(),this.panSession=void 0}updateAxis(e,n,r){const{drag:i}=this.getProps();if(!r||!ja(e,i,this.currentDirection))return;const s=this.getAxisMotionValue(e);let o=this.originPoint[e]+r[e];this.constraints&&this.constraints[e]&&(o=cL(o,this.constraints[e],this.elastic[e])),s.set(o)}resolveConstraints(){var s;const{dragConstraints:e,dragElastic:n}=this.getProps(),r=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):(s=this.visualElement.projection)==null?void 0:s.layout,i=this.constraints;e&&Wi(e)?this.constraints||(this.constraints=this.resolveRefConstraints()):e&&r?this.constraints=uL(r.layoutBox,e):this.constraints=!1,this.elastic=pL(n),i!==this.constraints&&!Wi(e)&&r&&this.constraints&&!this.hasMutatedConstraints&&Xn(o=>{this.constraints!==!1&&this.getAxisMotionValue(o)&&(this.constraints[o]=dL(r.layoutBox[o],this.constraints[o]))})}resolveRefConstraints(){const{dragConstraints:e,onMeasureDragConstraints:n}=this.getProps();if(!e||!Wi(e))return!1;const r=e.current,{projection:i}=this.visualElement;if(!i||!i.layout)return!1;const s=gV(r,i.root,this.visualElement.getTransformPagePoint());let o=hL(i.layout.layoutBox,s);if(n){const l=n(pV(o));this.hasMutatedConstraints=!!l,l&&(o=YP(l))}return o}startAnimation(e){const{drag:n,dragMomentum:r,dragElastic:i,dragTransition:s,dragSnapToOrigin:o,onDragTransitionEnd:l}=this.getProps(),a=this.constraints||{},c=Xn(u=>{if(!ja(u,n,this.currentDirection))return;let h=a&&a[u]||{};(o===!0||o===u)&&(h={min:0,max:0});const f=i?200:1e6,d=i?40:1e7,p={type:"inertia",velocity:r?e[u]:0,bounceStiffness:f,bounceDamping:d,timeConstant:750,restDelta:1,restSpeed:10,...s,...h};return this.startAxisValueAnimation(u,p)});return Promise.all(c).then(l)}startAxisValueAnimation(e,n){const r=this.getAxisMotionValue(e);return Xp(this.visualElement,e),r.start(IO(e,r,0,n,this.visualElement,!1))}stopAnimation(){Xn(e=>this.getAxisMotionValue(e).stop())}getAxisMotionValue(e){const n=`_drag${e.toUpperCase()}`,r=this.visualElement.getProps(),i=r[n];return i||this.visualElement.getValue(e,(r.initial?r.initial[e]:void 0)||0)}snapToCursor(e){Xn(n=>{const{drag:r}=this.getProps();if(!ja(n,r,this.currentDirection))return;const{projection:i}=this.visualElement,s=this.getAxisMotionValue(n);if(i&&i.layout){const{min:o,max:l}=i.layout.layoutBox[n],a=s.get()||0;s.set(e[n]-Ce(o,l,.5)+a)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag:e,dragConstraints:n}=this.getProps(),{projection:r}=this.visualElement;if(!Wi(n)||!r||!this.constraints)return;this.stopAnimation();const i={x:0,y:0};Xn(o=>{const l=this.getAxisMotionValue(o);if(l&&this.constraints!==!1){const a=l.get();i[o]=fL({min:a,max:a},this.constraints[o])}});const{transformTemplate:s}=this.visualElement.getProps();this.visualElement.current.style.transform=s?s({},""):"none",r.root&&r.root.updateScroll(),r.updateLayout(),this.constraints=!1,this.resolveConstraints(),Xn(o=>{if(!ja(o,e,null))return;const l=this.getAxisMotionValue(o),{min:a,max:c}=this.constraints[o];l.set(Ce(a,c,i[o]))}),this.visualElement.render()}addListeners(){if(!this.visualElement.current)return;mL.set(this.visualElement,this);const e=this.visualElement.current,n=Bo(e,"pointerdown",c=>{const{drag:u,dragListener:h=!0}=this.getProps(),f=c.target,d=f!==e&&qZ(f);u&&h&&!d&&this.start(c)});let r;const i=()=>{const{dragConstraints:c}=this.getProps();Wi(c)&&c.current&&(this.constraints=this.resolveRefConstraints(),r||(r=gL(e,c.current,()=>this.scalePositionWithinConstraints())))},{projection:s}=this.visualElement,o=s.addEventListener("measure",i);s&&!s.layout&&(s.root&&s.root.updateScroll(),s.updateLayout()),ke.read(i);const l=Ql(window,"resize",()=>this.scalePositionWithinConstraints()),a=s.addEventListener("didUpdate",({delta:c,hasLayoutChanged:u})=>{this.isDragging&&u&&(Xn(h=>{const f=this.getAxisMotionValue(h);f&&(this.originPoint[h]+=c[h].translate,f.set(f.get()+c[h].translate))}),this.visualElement.render())});return()=>{l(),n(),o(),a&&a(),r&&r()}}getProps(){const e=this.visualElement.getProps(),{drag:n=!1,dragDirectionLock:r=!1,dragPropagation:i=!1,dragConstraints:s=!1,dragElastic:o=Yp,dragMomentum:l=!0}=e;return{...e,drag:n,dragDirectionLock:r,dragPropagation:i,dragConstraints:s,dragElastic:o,dragMomentum:l}}}function Fx(t){let e=!0;return()=>{if(e){e=!1;return}t()}}function gL(t,e,n){const r=ex(t,Fx(n)),i=ex(e,Fx(n));return()=>{r(),i()}}function ja(t,e,n){return(e===!0||e===t)&&(n===null||n===t)}function yL(t,e=10){let n=null;return Math.abs(t.y)>e?n="y":Math.abs(t.x)>e&&(n="x"),n}class xL extends ni{constructor(e){super(e),this.removeGroupControls=un,this.removeListeners=un,this.controls=new OL(e)}mount(){const{dragControls:e}=this.node.getProps();e&&(this.removeGroupControls=e.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||un}update(){const{dragControls:e}=this.node.getProps(),{dragControls:n}=this.node.prevProps||{};e!==n&&(this.removeGroupControls(),e&&(this.removeGroupControls=e.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners(),this.controls.isDragging||this.controls.endPanSession()}}const Ef=t=>(e,n)=>{t&&ke.update(()=>t(e,n),!1,!0)};class vL extends ni{constructor(){super(...arguments),this.removePointerDownListener=un}onPointerDown(e){this.session=new bQ(e,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:kQ(this.node)})}createPanHandlers(){const{onPanSessionStart:e,onPanStart:n,onPan:r,onPanEnd:i}=this.node.getProps();return{onSessionStart:Ef(e),onStart:Ef(n),onMove:Ef(r),onEnd:(s,o)=>{delete this.session,i&&ke.postRender(()=>i(s,o))}}}mount(){this.removePointerDownListener=Bo(this.node.current,"pointerdown",e=>this.onPointerDown(e))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}let Rf=!1;class SL extends m.Component{componentDidMount(){const{visualElement:e,layoutGroup:n,switchLayoutGroup:r,layoutId:i}=this.props,{projection:s}=e;s&&(n.group&&n.group.add(s),r&&r.register&&i&&r.register(s),Rf&&s.root.didUpdate(),s.addEventListener("animationComplete",()=>{this.safeToRemove()}),s.setOptions({...s.options,layoutDependency:this.props.layoutDependency,onExitComplete:()=>this.safeToRemove()})),fc.hasEverUpdated=!0}getSnapshotBeforeUpdate(e){const{layoutDependency:n,visualElement:r,drag:i,isPresent:s}=this.props,{projection:o}=r;return o&&(o.isPresent=s,e.layoutDependency!==n&&o.setOptions({...o.options,layoutDependency:n}),Rf=!0,i||e.layoutDependency!==n||n===void 0||e.isPresent!==s?o.willUpdate():this.safeToRemove(),e.isPresent!==s&&(s?o.promote():o.relegate()||ke.postRender(()=>{const l=o.getStack();(!l||!l.members.length)&&this.safeToRemove()}))),null}componentDidUpdate(){const{visualElement:e,layoutAnchor:n}=this.props,{projection:r}=e;r&&(r.options.layoutAnchor=n,r.root.didUpdate(),qO.postRender(()=>{!r.currentAnimation&&r.isLead()&&this.safeToRemove()}))}componentWillUnmount(){const{visualElement:e,layoutGroup:n,switchLayoutGroup:r}=this.props,{projection:i}=e;Rf=!0,i&&(i.scheduleCheckAfterUnmount(),n&&n.group&&n.group.remove(i),r&&r.deregister&&r.deregister(i))}safeToRemove(){const{safeToRemove:e}=this.props;e&&e()}render(){return null}}function QQ(t){const[e,n]=pQ(),r=m.useContext(CO);return g.jsx(SL,{...t,layoutGroup:r,switchLayoutGroup:m.useContext(SQ),isPresent:e,safeToRemove:n})}const wL={pan:{Feature:vL},drag:{Feature:xL,ProjectionNode:dQ,MeasureLayout:QQ}};function qx(t,e,n){const{props:r}=t;t.animationState&&r.whileHover&&t.animationState.setActive("whileHover",n==="Start");const i="onHover"+n,s=r[i];s&&ke.postRender(()=>s(e,Wl(e)))}class kL extends ni{mount(){const{current:e}=this.node;e&&(this.unmount=IZ(e,(n,r)=>(qx(this.node,r,"Start"),i=>qx(this.node,i,"End"))))}unmount(){}}class bL extends ni{constructor(){super(...arguments),this.isActive=!1}onFocus(){let e=!1;try{e=this.node.current.matches(":focus-visible")}catch{e=!0}!e||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){!this.isActive||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=_l(Ql(this.node.current,"focus",()=>this.onFocus()),Ql(this.node.current,"blur",()=>this.onBlur()))}unmount(){}}function Ux(t,e,n){const{props:r}=t;if(t.current instanceof HTMLButtonElement&&t.current.disabled)return;t.animationState&&r.whileTap&&t.animationState.setActive("whileTap",n==="Start");const i="onTap"+(n==="End"?"":n),s=r[i];s&&ke.postRender(()=>s(e,Wl(e)))}class PL extends ni{mount(){const{current:e}=this.node;if(!e)return;const{globalTapTarget:n,propagate:r}=this.node.props;this.unmount=GZ(e,(i,s)=>(Ux(this.node,s,"Start"),(o,{success:l})=>Ux(this.node,o,l?"End":"Cancel")),{useGlobalTarget:n,stopPropagation:(r==null?void 0:r.tap)===!1})}unmount(){}}const Fp=new WeakMap,jf=new WeakMap,QL=t=>{const e=Fp.get(t.target);e&&e(t)},$L=t=>{t.forEach(QL)};function TL({root:t,...e}){const n=t||document;jf.has(n)||jf.set(n,{});const r=jf.get(n),i=JSON.stringify(e);return r[i]||(r[i]=new IntersectionObserver($L,{root:t,...e})),r[i]}function CL(t,e,n){const r=TL(e);return Fp.set(t,n),r.observe(t),()=>{Fp.delete(t),r.unobserve(t)}}const AL={some:0,all:1};class ML extends ni{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){var a;(a=this.stopObserver)==null||a.call(this);const{viewport:e={}}=this.node.getProps(),{root:n,margin:r,amount:i="some",once:s}=e,o={root:n?n.current:void 0,rootMargin:r,threshold:typeof i=="number"?i:AL[i]},l=c=>{const{isIntersecting:u}=c;if(this.isInView===u||(this.isInView=u,s&&!u&&this.hasEnteredView))return;u&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",u);const{onViewportEnter:h,onViewportLeave:f}=this.node.getProps(),d=u?h:f;d&&d(c)};this.stopObserver=CL(this.node.current,o,l)}mount(){this.startObserver()}update(){if(typeof IntersectionObserver>"u")return;const{props:e,prevProps:n}=this.node;["amount","margin","root"].some(EL(e,n))&&this.startObserver()}unmount(){var e;(e=this.stopObserver)==null||e.call(this),this.hasEnteredView=!1,this.isInView=!1}}function EL({viewport:t={}},{viewport:e={}}={}){return n=>t[n]!==e[n]}const RL={inView:{Feature:ML},tap:{Feature:PL},focus:{Feature:bL},hover:{Feature:kL}},jL={layout:{ProjectionNode:dQ,MeasureLayout:QQ}},ZL={...iL,...RL,...wL,...jL},Gx=JX(ZL,eL);function ig({children:t,expandedContent:e,expandScale:n=.75,delay:r=300,className:i="",onClick:s}){const[o,l]=m.useState(!1),[a,c]=m.useState({x:0,y:0,w:0,h:0}),u=m.useRef(null),h=m.useRef(null),f=m.useRef(null),d=m.useRef(null),p=m.useCallback(()=>{f.current&&(clearTimeout(f.current),f.current=null),d.current&&(clearTimeout(d.current),d.current=null),l(!1)},[]),x=m.useCallback(()=>{if(!u.current)return;const Q=u.current.getBoundingClientRect();c({x:Q.left,y:Q.top,w:Q.width,h:Q.height}),l(!0)},[]),S=m.useCallback(()=>{o||(f.current&&clearTimeout(f.current),f.current=setTimeout(x,r))},[r,x,o]),O=m.useCallback(()=>{o||f.current&&(clearTimeout(f.current),f.current=null)},[o]);m.useEffect(()=>{if(!o)return;const Q=600,M=400;let T=!1;const V=setTimeout(()=>{T=!0},M),C=j=>{if(!T)return;const N=h.current;if(!N)return;const _=N.getBoundingClientRect(),I=20;j.clientX>=_.left-I&&j.clientX<=_.right+I&&j.clientY>=_.top-I&&j.clientY<=_.bottom+I?d.current&&(clearTimeout(d.current),d.current=null):d.current||(d.current=setTimeout(()=>{l(!1)},Q))};return window.addEventListener("mousemove",C),()=>{clearTimeout(V),d.current&&(clearTimeout(d.current),d.current=null),window.removeEventListener("mousemove",C)}},[o]);const y=typeof window<"u"?window.innerWidth:1440,v=typeof window<"u"?window.innerHeight:900,w=y*n,k=v*n,$=(y-w)/2,P=(v-k)/2;return g.jsxs(g.Fragment,{children:[g.jsx("div",{ref:u,className:i,onMouseEnter:S,onMouseLeave:O,onClick:s,style:{opacity:o?0:1,transition:"opacity 100ms ease-out"},children:t}),g.jsx(TX,{children:o&&g.jsxs(g.Fragment,{children:[g.jsx(Gx.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.15},className:"fixed inset-0 z-40 bg-black/60 backdrop-blur-sm",onClick:p}),g.jsx(Gx.div,{ref:h,initial:{left:a.x,top:a.y,width:a.w,height:a.h},animate:{left:$,top:P,width:w,height:k},exit:{left:a.x,top:a.y,width:a.w,height:a.h},transition:{type:"spring",stiffness:280,damping:28,mass:.8},className:"fixed z-50 overflow-hidden rounded-[16px] shadow-dialog",onClick:Q=>{Q.stopPropagation(),p(),s==null||s()},children:typeof e=="function"?e(p):e??t})]})})]})}function VL({previewUrl:t,name:e,comp:n,onSelect:r}){const i=m.useRef(null),s=m.useRef(null),[o,l]=m.useState({w:1920,h:1080}),[a,c]=m.useState(1),u=m.useCallback(()=>{const p=i.current;if(!p)return;const x=Math.min(p.clientWidth/o.w,p.clientHeight/o.h);c(x)},[o]);m.useEffect(()=>{u();const p=i.current;if(!p)return;const x=new ResizeObserver(u);return x.observe(p),()=>x.disconnect()},[u]);const h=m.useCallback(()=>{const p=s.current;if(!p)return;try{const O=p.contentDocument;if(O){const y=O.querySelector("[data-composition-id]");if(y){const v=parseInt(y.getAttribute("data-width")??"0",10),w=parseInt(y.getAttribute("data-height")??"0",10);v>0&&w>0&&l({w:v,h:w})}}}catch{}let x=0;const S=setInterval(()=>{try{const O=p.contentWindow;if(O!=null&&O.__player){O.__player.seek(.5),O.__player.play(),clearInterval(S);return}if(O!=null&&O.__timelines){const y=Object.keys(O.__timelines),v=y.length>0?O.__timelines[y[y.length-1]]:null;v&&(v.seek(.5),v.play(),clearInterval(S))}}catch{}++x>15&&clearInterval(S)},200)},[]),f=i.current?(i.current.clientWidth-o.w*a)/2:0,d=i.current?(i.current.clientHeight-o.h*a)/2:0;return g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsx("div",{ref:i,className:"flex-1 min-h-0 relative overflow-hidden bg-black",children:g.jsx("iframe",{ref:s,src:t,sandbox:"allow-scripts allow-same-origin",onLoad:h,className:"absolute border-none",style:{left:Math.max(0,f),top:Math.max(0,d),width:o.w,height:o.h,transformOrigin:"0 0",transform:`scale(${a})`},tabIndex:-1})}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:e}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:n})]}),g.jsx("button",{onClick:p=>{p.stopPropagation(),r()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Open"})]})]})}function XL({projectId:t,comp:e,isActive:n,onSelect:r}){const i=e.replace(/^compositions\//,"").replace(/\.html$/,""),s=`/api/projects/${t}/thumbnail/${e}?t=0.5`,o=`/api/projects/${t}/preview/comp/${e}`,l=g.jsxs("div",{className:`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${n?"bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]":"border-l-2 border-transparent hover:bg-neutral-800/50"}`,children:[g.jsx("div",{className:"w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0",children:g.jsx("img",{src:s,alt:i,loading:"lazy",className:"w-full h-full object-cover",onError:a=>{a.target.style.display="none"}})}),g.jsxs("div",{className:"min-w-0 flex-1",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate block",children:i}),g.jsx("span",{className:"text-[9px] text-neutral-600 truncate block",children:e})]})]});return g.jsx(ig,{expandedContent:a=>g.jsx(VL,{previewUrl:o,name:i,comp:e,onSelect:()=>{a(),r()}}),onClick:r,expandScale:.5,delay:500,children:l})}const LL=m.memo(function({projectId:e,compositions:n,activeComposition:r,onSelect:i}){return n.length===0?g.jsx("div",{className:"flex-1 flex items-center justify-center px-4",children:g.jsx("p",{className:"text-xs text-neutral-600 text-center",children:"No compositions found"})}):g.jsx("div",{className:"flex-1 overflow-y-auto",children:n.map(s=>g.jsx(XL,{projectId:e,comp:s,isActive:r===s,onSelect:()=>i(s)},s))})}),DL=/\.(mp4|webm|mov|mp3|wav|ogg|m4a|jpg|jpeg|png|gif|webp|svg)$/i,_L=/\.(jpg|jpeg|png|gif|webp|svg)$/i,NL=/\.(mp4|webm|mov)$/i,zL=/\.(mp3|wav|ogg|m4a)$/i;function WL({serveUrl:t,name:e,isImage:n,isVideo:r,isAudio:i}){return g.jsxs("div",{className:"w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative",children:[n&&g.jsx("img",{src:t,alt:e,loading:"lazy",className:"w-full h-full object-cover",onError:s=>{s.target.style.display="none"}}),r&&g.jsxs(g.Fragment,{children:[g.jsx("video",{src:t,muted:!0,playsInline:!0,preload:"metadata",className:"w-full h-full object-cover"}),g.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black/30",children:g.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"white",className:"opacity-80",children:g.jsx("polygon",{points:"6,3 20,12 6,21"})})})]}),i&&g.jsx("div",{className:"w-full h-full flex items-center justify-center bg-neutral-900",children:g.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-purple-400",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]})}),!n&&!r&&!i&&g.jsx("div",{className:"w-full h-full flex items-center justify-center bg-neutral-900",children:g.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"14 2 14 8 20 8",strokeLinecap:"round",strokeLinejoin:"round"})]})})]})}function IL({serveUrl:t,name:e,asset:n,isImage:r,isVideo:i,isAudio:s,onCopy:o}){return g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsxs("div",{className:"flex-1 min-h-0 flex items-center justify-center bg-black p-4",children:[r&&g.jsx("img",{src:t,alt:e,className:"max-w-full max-h-full object-contain rounded"}),i&&g.jsx("video",{src:t,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,className:"max-w-full max-h-full object-contain rounded"}),s&&g.jsxs("div",{className:"flex flex-col items-center gap-4",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-purple-400",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]}),g.jsx("audio",{src:t,controls:!0,autoPlay:!0,className:"w-64"})]})]}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:e}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:n})]}),g.jsx("button",{onClick:l=>{l.stopPropagation(),o()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Copy Path"})]})]})}function BL({projectId:t,asset:e,onCopy:n,isCopied:r}){const i=e.split("/").pop()??e,s=`/api/projects/${t}/preview/${e}`,o=_L.test(e),l=NL.test(e),a=zL.test(e),c=o||l||a,u=g.jsxs("div",{className:`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${r?"bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]":"border-l-2 border-transparent hover:bg-neutral-800/50"}`,children:[g.jsx(WL,{serveUrl:s,name:i,isImage:o,isVideo:l,isAudio:a}),g.jsxs("div",{className:"min-w-0 flex-1",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate block",children:i}),r?g.jsx("span",{className:"text-[9px] text-[#3CE6AC]",children:"Copied!"}):g.jsx("span",{className:"text-[9px] text-neutral-600 truncate block",children:e})]})]});return c?g.jsx(ig,{expandedContent:h=>g.jsx(IL,{serveUrl:s,name:i,asset:e,isImage:o,isVideo:l,isAudio:a,onCopy:()=>{h(),n(e)}}),onClick:()=>n(e),expandScale:.45,delay:500,children:u}):g.jsx("button",{type:"button",onClick:()=>n(e),title:"Click to copy path",className:"w-full",children:u})}const YL=m.memo(function({projectId:e,assets:n,onImport:r}){const i=m.useRef(null),[s,o]=m.useState(!1),[l,a]=m.useState(null),c=m.useCallback(f=>{f.preventDefault(),o(!1),f.dataTransfer.files.length&&(r==null||r(f.dataTransfer.files))},[r]),u=m.useCallback(async f=>{try{await navigator.clipboard.writeText(f),a(f),setTimeout(()=>a(null),1500)}catch{}},[]),h=n.filter(f=>DL.test(f));return g.jsxs("div",{className:`flex-1 flex flex-col min-h-0 transition-colors ${s?"bg-blue-950/20":""}`,onDragOver:f=>{f.preventDefault(),o(!0)},onDragLeave:()=>o(!1),onDrop:c,children:[r&&g.jsxs("div",{className:"px-3 py-2 border-b border-neutral-800/40 flex-shrink-0",children:[g.jsxs("button",{onClick:()=>{var f;return(f=i.current)==null?void 0:f.click()},className:"w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-[11px] rounded-lg border border-dashed border-neutral-700/50 text-neutral-500 hover:text-neutral-300 hover:border-neutral-600 transition-colors",children:[g.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:g.jsx("path",{d:"M12 5v14M5 12h14"})}),"Import media"]}),g.jsx("input",{ref:i,type:"file",accept:"video/*,image/*,audio/*",multiple:!0,className:"hidden",onChange:f=>{var d;(d=f.target.files)!=null&&d.length&&(r(f.target.files),f.target.value="")}})]}),g.jsx("div",{className:"flex-1 overflow-y-auto",children:h.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full px-4 gap-2",children:[g.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-700",children:[g.jsx("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"17 8 12 3 7 8",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("line",{x1:"12",y1:"3",x2:"12",y2:"15",strokeLinecap:"round"})]}),g.jsx("p",{className:"text-[10px] text-neutral-600 text-center",children:"Drop media files here"})]}):h.map(f=>g.jsx(BL,{projectId:e,asset:f,onCopy:u,isCopied:l===f},f))})]})}),$Q="hf-studio-sidebar-tab";function FL(){return localStorage.getItem($Q)==="assets"?"assets":"compositions"}const qL=m.memo(function({width:e=240,projectId:n,compositions:r,assets:i,activeComposition:s,onSelectComposition:o,onImportFiles:l}){const[a,c]=m.useState(FL),u=m.useCallback(h=>{c(h),localStorage.setItem($Q,h)},[]);return Ot(()=>{const h=f=>{!f.metaKey&&!f.ctrlKey||(f.key==="1"&&(f.preventDefault(),u("compositions")),f.key==="2"&&(f.preventDefault(),u("assets")))};return window.addEventListener("keydown",h),()=>window.removeEventListener("keydown",h)}),g.jsxs("div",{className:"flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50",style:{width:e},children:[g.jsxs("div",{className:"flex border-b border-neutral-800/50 flex-shrink-0",children:[g.jsx("button",{type:"button",onClick:()=>u("compositions"),className:`flex-1 py-2 text-[11px] font-medium transition-colors ${a==="compositions"?"text-neutral-200 border-b-2 border-blue-500":"text-neutral-500 hover:text-neutral-400"}`,children:"Compositions"}),g.jsx("button",{type:"button",onClick:()=>u("assets"),className:`flex-1 py-2 text-[11px] font-medium transition-colors ${a==="assets"?"text-neutral-200 border-b-2 border-blue-500":"text-neutral-500 hover:text-neutral-400"}`,children:"Assets"})]}),a==="compositions"?g.jsx(LL,{projectId:n,compositions:r,activeComposition:s,onSelect:o}):g.jsx(YL,{projectId:n,assets:i,onImport:l})]})});function UL(t){if(t<1e3)return`${t}ms`;const e=Math.round(t/1e3);return e<60?`${e}s`:`${Math.floor(e/60)}m ${e%60}s`}function GL(t){const e=Date.now()-t;return e<6e4?"just now":e<36e5?`${Math.floor(e/6e4)}m ago`:`${Math.floor(e/36e5)}h ago`}const HL=m.memo(function({job:e,onDelete:n}){const[r,i]=m.useState(!1),s=m.useCallback(()=>{const o=document.createElement("a");o.href=`/api/render/${e.id}/download`,o.download=e.filename,o.click()},[e.id,e.filename]);return g.jsx("div",{onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1),className:"px-3 py-2.5 border-b border-neutral-800/30 last:border-0",children:g.jsxs("div",{className:"flex items-center gap-2",children:[g.jsxs("div",{className:"flex-shrink-0",children:[e.status==="rendering"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-[#3CE6AC] animate-pulse"}),e.status==="complete"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-green-400"}),e.status==="failed"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-red-400"}),e.status==="cancelled"&&g.jsx("div",{className:"w-2 h-2 rounded-full bg-neutral-600"})]}),g.jsxs("div",{className:"flex-1 min-w-0",children:[g.jsxs("div",{className:"flex items-center gap-1.5",children:[g.jsx("span",{className:"text-[11px] font-medium text-neutral-300 truncate",children:e.filename}),e.durationMs&&g.jsx("span",{className:"text-[9px] text-neutral-600 flex-shrink-0",children:UL(e.durationMs)})]}),e.status==="rendering"&&g.jsxs("div",{className:"mt-1",children:[g.jsxs("div",{className:"flex items-center justify-between mb-0.5",children:[g.jsx("span",{className:"text-[9px] text-neutral-500",children:e.stage||"Rendering"}),g.jsxs("span",{className:"text-[9px] font-mono text-[#3CE6AC]",children:[e.progress,"%"]})]}),g.jsx("div",{className:"w-full h-1 bg-neutral-800 rounded-full overflow-hidden",children:g.jsx("div",{className:"h-full bg-[#3CE6AC] rounded-full transition-all duration-300",style:{width:`${e.progress}%`}})})]}),e.status==="failed"&&e.error&&g.jsx("span",{className:"text-[9px] text-red-400 mt-0.5 block",children:e.error}),e.status!=="rendering"&&g.jsx("span",{className:"text-[9px] text-neutral-600",children:GL(e.createdAt)})]}),r&&g.jsxs("div",{className:"flex items-center gap-1 flex-shrink-0",children:[e.status==="complete"&&g.jsx("button",{onClick:s,className:"p-1 rounded text-neutral-500 hover:text-green-400 transition-colors",title:"Download",children:g.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"}),g.jsx("polyline",{points:"7 10 12 15 17 10"}),g.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),g.jsx("button",{onClick:n,className:"p-1 rounded text-neutral-500 hover:text-red-400 transition-colors",title:"Remove",children:g.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:g.jsx("path",{d:"M18 6L6 18M6 6l12 12"})})})]})]})})});function KL({onStartRender:t,isRendering:e}){const[n,r]=m.useState("mp4");return g.jsxs("div",{className:"flex items-center gap-0.5",children:[g.jsxs("select",{value:n,onChange:i=>r(i.target.value),disabled:e,className:"h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50",children:[g.jsx("option",{value:"mp4",children:"MP4"}),g.jsx("option",{value:"webm",children:"WebM"})]}),g.jsx("button",{onClick:()=>t(n),disabled:e,className:"flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-[#3CE6AC] text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50",children:e?"Rendering...":"Export"})]})}const JL=m.memo(function({jobs:e,onDelete:n,onClearCompleted:r,onStartRender:i,isRendering:s}){const o=m.useRef(null),l=m.useRef(e.length);e.length>l.current&&o.current&&queueMicrotask(()=>{var c;(c=o.current)==null||c.scrollTo({top:o.current.scrollHeight,behavior:"smooth"})}),l.current=e.length;const a=e.filter(c=>c.status!=="rendering").length;return g.jsxs("div",{className:"flex flex-col h-full",children:[g.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-neutral-800/50 flex-shrink-0",children:[g.jsxs("span",{className:"text-[11px] font-medium text-neutral-500 uppercase tracking-wider",children:["Renders (",e.length,")"]}),g.jsxs("div",{className:"flex items-center gap-1.5",children:[a>0&&g.jsx("button",{onClick:r,className:"text-[10px] text-neutral-600 hover:text-neutral-400 transition-colors",children:"Clear"}),g.jsx(KL,{onStartRender:i,isRendering:s})]})]}),g.jsx("div",{ref:o,className:"flex-1 overflow-y-auto",children:e.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full px-4 gap-2",children:[g.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-700",children:[g.jsx("rect",{x:"2",y:"2",width:"20",height:"20",rx:"2.18",ry:"2.18",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("path",{d:"M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5",strokeLinecap:"round",strokeLinejoin:"round"})]}),g.jsx("p",{className:"text-[10px] text-neutral-600 text-center",children:"No renders yet"})]}):e.map(c=>g.jsx(HL,{job:c,onDelete:()=>n(c.id)},c.id))})]})});function eD(t){const[e,n]=m.useState([]),r=m.useRef(null),i=m.useRef(null),s=m.useCallback(async()=>{if(t)try{const c=await fetch(`/api/projects/${t}/renders`);if(!c.ok)return;const u=await c.json();Array.isArray(u.renders)&&n(h=>{const f=new Set(h.map(p=>p.id)),d=u.renders.filter(p=>!f.has(p.id)).map(p=>({id:p.id,status:p.status==="failed"?"failed":"complete",progress:100,filename:p.filename,createdAt:p.createdAt,durationMs:p.durationMs}));return[...h,...d]})}catch{}},[t]);m.useEffect(()=>{s()},[s]);const o=m.useCallback(async(c=30,u="standard",h="mp4")=>{if(!t)return;const f=Date.now();let d;try{d=await fetch(`/api/projects/${t}/render`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({fps:c,quality:u,format:h})})}catch{const y={id:crypto.randomUUID(),status:"failed",progress:0,error:"Could not reach render server. Use `hyperframes render` from the CLI instead.",filename:"Export failed",createdAt:f};n(v=>[...v,y]);return}if(!d.ok){const y={id:crypto.randomUUID(),status:"failed",progress:0,error:`Server error (${d.status}). Check the terminal for details.`,filename:"Export failed",createdAt:f};n(v=>[...v,y]);return}const{jobId:p}=await d.json(),S={id:p,status:"rendering",progress:0,filename:`${p}${h==="webm"?".webm":".mp4"}`,createdAt:f};n(y=>[...y,S]),i.current=p;const O=new EventSource(`/api/render/${p}/progress`);return r.current=O,O.addEventListener("progress",y=>{try{const v=JSON.parse(y.data);n(w=>w.map(k=>k.id===p?{...k,progress:v.progress??k.progress,stage:v.stage??v.message??k.stage,status:v.status==="complete"?"complete":v.status==="failed"?"failed":k.status,durationMs:v.status==="complete"?Date.now()-f:void 0}:k)),(v.status==="complete"||v.status==="failed")&&(O.close(),i.current=null)}catch{}}),O.onerror=()=>{O.close(),n(y=>y.map(v=>v.id===p&&v.status==="rendering"?{...v,status:"failed",error:"Connection lost. Is the render server running?"}:v)),i.current=null},p},[t]),l=m.useCallback(async c=>{try{await fetch(`/api/render/${c}`,{method:"DELETE"})}catch{}n(u=>u.filter(h=>h.id!==c))},[]),a=m.useCallback(()=>{n(c=>c.filter(u=>u.status==="rendering"))},[]);return m.useEffect(()=>()=>{var c;(c=r.current)==null||c.close(),r.current=null},[t]),{jobs:e,startRender:o,deleteRender:l,clearCompleted:a,isRendering:e.some(c=>c.status==="rendering")}}const TQ=2,tD=1,Hx=TQ+tD;function nD(t,e){const n=[],r=Math.floor(t.length/e);if(r===0)return Array(e).fill(0);for(let s=0;s<e;s++){let o=0;const l=s*r,a=Math.min(l+r,t.length);for(let c=l;c<a;c++){const u=Math.abs(t[c]??0);u>o&&(o=u)}n.push(o)}const i=Math.max(...n,.001);return n.map(s=>s/i)}function rD(t,e){let n=0;for(let s=0;s<t.length;s++)n=(n<<5)-n+t.charCodeAt(s)|0;n=Math.abs(n)||42;const r=()=>(n=n*16807%2147483647,(n&2147483647)/2147483647),i=[];for(let s=0;s<e;s++){const o=s/e,l=.3+.3*Math.sin(o*Math.PI*3.2)+.2*Math.sin(o*Math.PI*7.1);i.push(Math.max(.05,Math.min(1,l*(.4+.6*r()))))}return i}const Zf=new Map,iD=m.memo(function({audioUrl:e,label:n,labelColor:r}){const i=m.useRef(null),s=m.useRef(null),o=m.useRef(null),[l,a]=m.useState(Zf.get(e)??null);m.useEffect(()=>{if(l||!e)return;const h=new AbortController;return fetch(e,{signal:h.signal}).then(f=>f.arrayBuffer()).then(f=>{const d=new AudioContext;return d.decodeAudioData(f).finally(()=>d.close())}).then(f=>{if(h.signal.aborted)return;const d=f.getChannelData(0),p=nD(d,4e3);Zf.set(e,p),a(p)}).catch(()=>{if(h.signal.aborted)return;const f=rD(e,4e3);Zf.set(e,f),a(f)}),()=>h.abort()},[e,l]);const c=m.useCallback(()=>{const h=i.current,f=s.current;if(!h||!f||!l)return;const d=h.clientWidth||400,p=Math.min(Math.floor(d/Hx),l.length);let x="";for(let S=0;S<p;S++){const O=Math.floor(S/p*l.length),y=l[O]??0,v=Math.max(3,Math.round(y*100)),w=(.45+y*.4).toFixed(2);x+=`<div style="position:absolute;bottom:0;left:${S*Hx}px;width:${TQ}px;height:${v}%;background:rgba(75,163,210,${w})"></div>`}f.innerHTML=x},[l]),u=m.useCallback(h=>{var f;(f=o.current)==null||f.disconnect(),i.current=h,h&&(c(),o.current=new ResizeObserver(()=>c()),o.current.observe(h))},[c]);return m.useEffect(()=>{c()},[c]),m.useEffect(()=>()=>{var h;(h=o.current)==null||h.disconnect()},[]),g.jsxs("div",{ref:u,className:"absolute inset-0 overflow-hidden",children:[g.jsx("div",{ref:s,className:"absolute left-0 right-0 bottom-0",style:{top:16}}),!l&&g.jsx("div",{className:"absolute left-0 right-0 bottom-0 animate-pulse",style:{top:16,background:"linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)"}}),g.jsx("div",{className:"absolute top-0 left-0 right-0 px-1.5 py-0.5 z-10",children:g.jsx("span",{className:"text-[9px] font-semibold truncate block leading-tight",style:{color:r,textShadow:"0 1px 3px rgba(0,0,0,0.9)"},children:n})})]})}),CQ=/\.(jpg|jpeg|png|gif|webp|svg|ico)$/i,AQ=/\.(mp4|webm|mov)$/i,MQ=/\.(mp3|wav|ogg|m4a|aac)$/i,sD=/\.(woff|woff2|ttf|otf|eot)$/i;function Kx(t){return CQ.test(t)||AQ.test(t)||MQ.test(t)||sD.test(t)}function oD({projectId:t,filePath:e}){const n=`/api/projects/${t}/preview/${e}`,r=e.split("/").pop()??e;return CQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950",children:[g.jsx("img",{src:n,alt:r,className:"max-w-full max-h-[70%] object-contain rounded border border-neutral-800"}),g.jsx("span",{className:"mt-3 text-[11px] text-neutral-500 font-mono",children:e})]}):AQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950",children:[g.jsx("video",{src:n,controls:!0,className:"max-w-full max-h-[70%] rounded border border-neutral-800"}),g.jsx("span",{className:"mt-3 text-[11px] text-neutral-500 font-mono",children:e})]}):MQ.test(e)?g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M9 18V5l12-2v13",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("circle",{cx:"6",cy:"18",r:"3"}),g.jsx("circle",{cx:"18",cy:"16",r:"3"})]}),g.jsx("audio",{src:n,controls:!0,className:"w-full max-w-[280px]"}),g.jsx("span",{className:"text-[11px] text-neutral-500 font-mono",children:e})]}):g.jsxs("div",{className:"flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2",children:[g.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"text-neutral-600",children:[g.jsx("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",strokeLinecap:"round",strokeLinejoin:"round"}),g.jsx("polyline",{points:"14 2 14 8 20 8",strokeLinecap:"round",strokeLinejoin:"round"})]}),g.jsx("span",{className:"text-sm text-neutral-400 font-medium",children:r}),g.jsx("span",{className:"text-[11px] text-neutral-600 font-mono",children:e}),g.jsx("span",{className:"text-[10px] text-neutral-600",children:"Binary file — preview not available"})]})}function lD({src:t}){const e=m.useRef(null),n=m.useRef(null),[r,i]=m.useState({w:1920,h:1080}),[s,o]=m.useState(1);m.useEffect(()=>{const u=e.current;if(!u)return;const h=()=>{const d=u.clientWidth,p=u.clientHeight,x=Math.min(d/r.w,p/r.h);o(x)};h();const f=new ResizeObserver(h);return f.observe(u),()=>f.disconnect()},[r]);const l=m.useCallback(()=>{const u=n.current;if(!u)return;let h=0;const f=setInterval(()=>{try{const d=u.contentDocument;if(d){const x=d.querySelector("[data-composition-id]");if(x){const S=parseInt(x.getAttribute("data-width")??"0",10),O=parseInt(x.getAttribute("data-height")??"0",10);S>0&&O>0&&i({w:S,h:O})}}const p=u.contentWindow;p!=null&&p.__player&&(p.__player.seek(2),p.__player.play(),clearInterval(f))}catch{}++h>25&&clearInterval(f)},200)},[]),a=e.current?(e.current.clientWidth-r.w*s)/2:0,c=e.current?(e.current.clientHeight-r.h*s)/2:0;return g.jsx("div",{ref:e,className:"w-full h-full relative overflow-hidden bg-black",children:g.jsx("iframe",{ref:n,src:t,sandbox:"allow-scripts allow-same-origin",onLoad:l,className:"absolute border-none",style:{left:Math.max(0,a),top:Math.max(0,c),width:r.w,height:r.h,transformOrigin:"0 0",transform:`scale(${s})`}})})}function aD({project:t,onSelect:e}){const n=`/api/projects/${t.id}/thumbnail/index.html?t=0.5`,r=`/api/projects/${t.id}/preview`,i=g.jsxs("div",{className:"rounded-xl overflow-hidden bg-neutral-900 border border-neutral-800/60 hover:border-[#3CE6AC]/30 hover:shadow-lg hover:shadow-[#3CE6AC]/5 transition-all duration-200 cursor-pointer",children:[g.jsx("div",{className:"aspect-video bg-neutral-950 relative overflow-hidden flex items-center justify-center",children:g.jsx("img",{src:n,alt:t.title??t.id,loading:"lazy",className:"max-w-full max-h-full object-contain",onError:s=>{s.target.style.display="none"}})}),g.jsxs("div",{className:"px-3.5 py-3",children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200 truncate",children:t.title??t.id}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono truncate mt-0.5",children:t.id})]})]});return g.jsx(ig,{expandedContent:s=>g.jsxs("div",{className:"w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col",children:[g.jsx("div",{className:"flex-1 min-h-0",children:g.jsx(lD,{src:r})}),g.jsxs("div",{className:"px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0",children:[g.jsxs("div",{children:[g.jsx("div",{className:"text-sm font-medium text-neutral-200",children:t.title??t.id}),g.jsx("div",{className:"text-[10px] text-neutral-600 font-mono mt-0.5",children:t.id})]}),g.jsx("button",{onClick:o=>{o.stopPropagation(),s(),e()},className:"px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors",children:"Open"})]})]}),onClick:e,expandScale:.6,delay:400,children:i})}function cD({onSelect:t}){const[e,n]=m.useState([]),[r,i]=m.useState(!0);return Ot(()=>{fetch("/api/projects").then(s=>s.json()).then(s=>{n(s.projects??[]),i(!1)}).catch(()=>i(!1))}),g.jsxs("div",{className:"h-screen w-screen bg-neutral-950 overflow-y-auto",children:[g.jsxs("div",{className:"max-w-4xl mx-auto px-6 pt-16 pb-8",children:[g.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[g.jsxs("svg",{width:"32",height:"32",viewBox:"0 0 512 512",className:"flex-shrink-0",children:[g.jsx("rect",{width:"512",height:"512",rx:"115",fill:"#1A1913"}),g.jsxs("g",{strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("polyline",{points:"156,176 76,256 156,336",fill:"none",stroke:"#7B7568",strokeWidth:"32"}),g.jsx("line",{x1:"206",y1:"346",x2:"286",y2:"166",stroke:"#D8D3C5",strokeWidth:"32"}),g.jsx("polygon",{points:"336,176 436,256 336,336",fill:"#3CE6AC",stroke:"#3CE6AC",strokeWidth:"32"})]})]}),g.jsx("h1",{className:"text-2xl font-bold text-neutral-100 tracking-tight",children:"HyperFrames Studio"})]}),g.jsx("p",{className:"text-sm text-neutral-500 ml-11",children:"Your projects"})]}),g.jsx("div",{className:"max-w-4xl mx-auto px-6 pb-16",children:r?g.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:[1,2,3].map(s=>g.jsx("div",{className:"aspect-video rounded-xl bg-neutral-900 animate-pulse"},s))}):e.length===0?g.jsxs("div",{className:"flex flex-col items-center justify-center py-24 gap-4",children:[g.jsxs("svg",{width:"48",height:"48",viewBox:"0 0 512 512",className:"opacity-20",children:[g.jsx("rect",{width:"512",height:"512",rx:"115",fill:"#1A1913"}),g.jsxs("g",{strokeLinecap:"round",strokeLinejoin:"round",children:[g.jsx("polyline",{points:"156,176 76,256 156,336",fill:"none",stroke:"#7B7568",strokeWidth:"32"}),g.jsx("line",{x1:"206",y1:"346",x2:"286",y2:"166",stroke:"#D8D3C5",strokeWidth:"32"}),g.jsx("polygon",{points:"336,176 436,256 336,336",fill:"#3CE6AC",stroke:"#3CE6AC",strokeWidth:"32"})]})]}),g.jsxs("div",{className:"text-center",children:[g.jsx("p",{className:"text-sm text-neutral-400 font-medium",children:"No projects yet"}),g.jsxs("p",{className:"text-xs text-neutral-600 mt-1",children:["Run"," ",g.jsx("code",{className:"px-1.5 py-0.5 rounded bg-neutral-800 text-[#3CE6AC] text-[11px]",children:"hyperframes init"})," ","to create one"]})]})]}):g.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:e.map(s=>g.jsx(aD,{project:s,onSelect:()=>t(s.id)},s.id))})})]})}function uD({findings:t,projectId:e,onClose:n}){const r=t.filter(c=>c.severity==="error"),i=t.filter(c=>c.severity==="warning"),s=t.length>0,[o,l]=m.useState(!1),a=async()=>{const c=t.map(h=>{let f=`[${h.severity}] ${h.message}`;return h.file&&(f+=`
   File: ${h.file}`),h.fixHint&&(f+=`
   Fix: ${h.fixHint}`),f}),u=`Fix these HyperFrames lint issues for project "${e}":
 

package/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-Bj0pPj_X.js"></script>
+    <script type="module" crossorigin src="/assets/index-BEwJNmPo.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BnvciBdD.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.1.11"
+    "@hyperframes/core": "0.1.12"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/components/renders/RenderQueueItem.tsx

@@ -78,6 +78,10 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </div>
           )}
 
+          {job.status === "failed" && job.error && (
+            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+          )}
+
           {job.status !== "rendering" && (
             <span className="text-[9px] text-neutral-600">{formatTimeAgo(job.createdAt)}</span>
           )}

package/src/components/renders/useRenderQueue.ts

@@ -5,6 +5,7 @@ export interface RenderJob {
   status: "rendering" | "complete" | "failed" | "cancelled";
   progress: number;
   stage?: string;
+  error?: string;
   filename: string;
   createdAt: number;
   durationMs?: number;
@@ -62,12 +63,37 @@ export function useRenderQueue(projectId: string | null) {
       if (!projectId) return;
 
       const startTime = Date.now();
-      const res = await fetch(`/api/projects/${projectId}/render`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ fps, quality, format }),
-      });
-      if (!res.ok) return;
+      let res: Response;
+      try {
+        res = await fetch(`/api/projects/${projectId}/render`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ fps, quality, format }),
+        });
+      } catch {
+        const failedJob: RenderJob = {
+          id: crypto.randomUUID(),
+          status: "failed",
+          progress: 0,
+          error: "Could not reach render server. Use `hyperframes render` from the CLI instead.",
+          filename: "Export failed",
+          createdAt: startTime,
+        };
+        setJobs((prev) => [...prev, failedJob]);
+        return;
+      }
+      if (!res.ok) {
+        const failedJob: RenderJob = {
+          id: crypto.randomUUID(),
+          status: "failed",
+          progress: 0,
+          error: `Server error (${res.status}). Check the terminal for details.`,
+          filename: "Export failed",
+          createdAt: startTime,
+        };
+        setJobs((prev) => [...prev, failedJob]);
+        return;
+      }
       const { jobId } = await res.json();
 
       const ext = format === "webm" ? ".webm" : ".mp4";
@@ -119,7 +145,13 @@ export function useRenderQueue(projectId: string | null) {
         es.close();
         setJobs((prev) =>
           prev.map((j) =>
-            j.id === jobId && j.status === "rendering" ? { ...j, status: "failed" } : j,
+            j.id === jobId && j.status === "rendering"
+              ? {
+                  ...j,
+                  status: "failed" as const,
+                  error: "Connection lost. Is the render server running?",
+                }
+              : j,
           ),
         );
         activeJobRef.current = null;