npm - @hyperframes/studio - Versions diffs - 0.6.0-alpha.1 → 0.6.0-alpha.2 - Mend

@hyperframes/studio 0.6.0-alpha.1 → 0.6.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/assets/{index-D04_ZoMm.js → index-cPJbxeAk.js} RENAMED Viewed

@@ -88,7 +88,7 @@ ${h.join(`
 `)}function pS(n){return n.textFields.length>0&&!n.isCompositionHost}const So=".hyperframes/studio-manual-edits.json",zs="--hf-studio-offset-x",Hs="--hf-studio-offset-y",ja="--hf-studio-width",Za="--hf-studio-height",Bs="--hf-studio-rotation",Pa="data-hf-studio-path-offset",Yl="data-hf-studio-manual-edit-gesture",Aa="data-hf-studio-box-size",$a="data-hf-studio-rotation",No="data-hf-studio-original-translate",Ca="data-hf-studio-original-inline-translate",af="data-hf-studio-original-width",lf="data-hf-studio-original-height",_u="data-hf-studio-original-min-width",cf="data-hf-studio-original-min-height",uf="data-hf-studio-original-max-width",df="data-hf-studio-original-max-height",Iu="data-hf-studio-original-flex-basis",ff="data-hf-studio-original-flex-grow",hf="data-hf-studio-original-flex-shrink",pf="data-hf-studio-original-box-sizing",Lo="data-hf-studio-original-scale",Du="data-hf-studio-original-transform-origin",mf="data-hf-studio-original-display",Vo="data-hf-studio-original-rotate",Ea="data-hf-studio-original-inline-rotate",Ta="data-hf-studio-original-rotation-transform-origin",Ra="data-hf-studio-rotation-draft",tL="__hfStudioManualEditsApply",M2="__hfStudioManualEditsWrapped",b1="__hfStudioManualEditsPlaybackFrame",nL="center center";let y5=0;function Cl(){return{version:1,edits:[]}}function Ds(n){return typeof n=="number"&&Number.isFinite(n)?n:null}function rL(n){if(!n||typeof n!="object")return null;const e=n;if(e.kind!=="path-offset")return null;const t=e.target;if(!t||typeof t!="object")return null;const r=t,i=typeof r.sourceFile=="string"?r.sourceFile:"";if(!i)return null;const s=typeof r.selector=="string"?r.selector:void 0,a=typeof r.id=="string"?r.id:void 0;if(!s&&!a)return null;const c=Ds(e.x),u=Ds(e.y);return c==null||u==null?null:{kind:"path-offset",target:{sourceFile:i,selector:s,selectorIndex:Ds(r.selectorIndex)??void 0,id:a},x:c,y:u,updatedAt:typeof e.updatedAt=="string"?e.updatedAt:void 0}}function iL(n){if(!n||typeof n!="object")return null;const e=n;if(e.kind!=="box-size")return null;const t=e.target;if(!t||typeof t!="object")return null;const r=t,i=typeof r.sourceFile=="string"?r.sourceFile:"";if(!i)return null;const s=typeof r.selector=="string"?r.selector:void 0,a=typeof r.id=="string"?r.id:void 0;if(!s&&!a)return null;const c=Ds(e.width),u=Ds(e.height);return c==null||u==null||c<=0||u<=0?null:{kind:"box-size",target:{sourceFile:i,selector:s,selectorIndex:Ds(r.selectorIndex)??void 0,id:a},width:c,height:u,updatedAt:typeof e.updatedAt=="string"?e.updatedAt:void 0}}function sL(n){if(!n||typeof n!="object")return null;const e=n;if(e.kind!=="rotation")return null;const t=e.target;if(!t||typeof t!="object")return null;const r=t,i=typeof r.sourceFile=="string"?r.sourceFile:"";if(!i)return null;const s=typeof r.selector=="string"?r.selector:void 0,a=typeof r.id=="string"?r.id:void 0;if(!s&&!a)return null;const c=Ds(e.angle);return c==null?null:{kind:"rotation",target:{sourceFile:i,selector:s,selectorIndex:Ds(r.selectorIndex)??void 0,id:a},angle:c,updatedAt:typeof e.updatedAt=="string"?e.updatedAt:void 0}}function oL(n){return rL(n)??iL(n)??sL(n)}function v5(n){if(!n.trim())return Cl();try{const e=JSON.parse(n);if(!e||typeof e!="object")return Cl();const t=e.edits;return Array.isArray(t)?{version:1,edits:t.map(oL).filter(r=>r!==null)}:Cl()}catch{return Cl()}}function Kp(n){return`${JSON.stringify(n,null,2)}
 `}function Yc(n){return n.trim().replace(/\\/g,"/").replace(/^\.?\//,"")}function Q2(n){if(typeof n=="string"){const t=n.trim();if(!t)return null;if(t.startsWith("{"))try{return Q2(JSON.parse(t))}catch{return Yc(t)}return Yc(t)}if(!n||typeof n!="object")return null;const e=n;return typeof e.path=="string"?Yc(e.path):typeof e.filePath=="string"?Yc(e.filePath):"data"in e?Q2(e.data):null}function aL(n){return Q2(n)}function lL(n){if(!n)return!1;const e=Yc(n);return e===So||e.endsWith(`/${So}`)}function gf(n){return{sourceFile:n.sourceFile||"index.html",selector:n.selector,selectorIndex:n.selectorIndex,id:n.id??void 0}}function _o(n){return[n.sourceFile,n.id??"",n.selector??"",n.selectorIndex??""].join("|")}function Xg(n){return Math.round(n*10)/10}function b5(n,e,t){const r=gf(e),i=_o(r),s={kind:"path-offset",target:r,x:Math.round(t.x),y:Math.round(t.y),updatedAt:new Date().toISOString()},a=n.edits.filter(c=>c.kind!=="path-offset"||_o(c.target)!==i);return a.push(s),{version:1,edits:a}}function cL(n,e,t){const r=gf(e),i=_o(r),s={kind:"box-size",target:r,width:Math.round(Math.max(1,t.width)),height:Math.round(Math.max(1,t.height)),updatedAt:new Date().toISOString()},a=n.edits.filter(c=>c.kind!=="box-size"||_o(c.target)!==i);return a.push(s),{version:1,edits:a}}function uL(n,e,t){const r=gf(e),i=_o(r),s={kind:"rotation",target:r,angle:Xg(t.angle),updatedAt:new Date().toISOString()},a=n.edits.filter(c=>c.kind!=="rotation"||_o(c.target)!==i);return a.push(s),{version:1,edits:a}}function dL(n,e){const t=_o(gf(e)),r=n.edits.filter(i=>_o(i.target)!==t);return r.length===n.edits.length?n:{version:1,edits:r}}function jd(n,e){const t=Number.parseFloat(n.style.getPropertyValue(e));return Number.isFinite(t)?t:0}function fL(n,e){const t=Number.parseFloat(n.style.getPropertyValue(e));return Number.isFinite(t)?t:0}function j2(n){return{x:jd(n,zs),y:jd(n,Hs)}}function Zd(n){return{width:jd(n,ja),height:jd(n,Za)}}function hL(n){return{angle:fL(n,Bs)}}function mS(n){y5+=1;const e=`gesture-${y5}`;return n.setAttribute(Yl,e),e}function Ni(n,e){e&&n.getAttribute(Yl)!==e||n.removeAttribute(Yl)}function Rd(n){return n.hasAttribute(Yl)}function w1(n,e){return n.getAttribute(Yl)===e}function pL(n){const e=[];let t=0,r="";for(const i of n.trim())i==="("&&(t+=1),i===")"&&(t=Math.max(0,t-1)),/\s/.test(i)&&t===0?(r&&e.push(r),r=""):r+=i;return r&&e.push(r),e}function gS(n,e,t){var s;const r=(s=n.getAttribute(No))==null?void 0:s.trim();if(!r||r==="none")return`${e} ${t}`;const i=pL(r);return i.length===1?`calc(${i[0]} + ${e}) ${t}`:i.length===2?`calc(${i[0]} + ${e}) calc(${i[1]} + ${t})`:i.length===3?`calc(${i[0]} + ${e}) calc(${i[1]} + ${t}) ${i[2]}`:`${e} ${t}`}function OS(n,e){const t=Z2(n,e).trim();return t==="none"?"":t}function mL(n,e){const t=n.style.getPropertyValue("translate"),r=OS(n,"translate"),i=n.hasAttribute(Pa),s=!R2(r);i?e&&s&&!Rd(n)&&n.setAttribute(No,r):(n.setAttribute(Ca,R2(t)?"":t),n.setAttribute(No,s?r:""))}function xS(n,e,t={}){mL(n,t.updateBase??!0),n.setAttribute(Pa,"true"),n.style.setProperty(zs,`${Math.round(e.x)}px`),n.style.setProperty(Hs,`${Math.round(e.y)}px`)}function gL(n,e){n.hasAttribute(Aa)||(n.setAttribute(af,n.style.getPropertyValue("width")),n.setAttribute(lf,n.style.getPropertyValue("height")),n.setAttribute(_u,n.style.getPropertyValue("min-width")),n.setAttribute(cf,n.style.getPropertyValue("min-height")),n.setAttribute(uf,n.style.getPropertyValue("max-width")),n.setAttribute(df,n.style.getPropertyValue("max-height")),n.setAttribute(Iu,n.style.getPropertyValue("flex-basis")),n.setAttribute(ff,n.style.getPropertyValue("flex-grow")),n.setAttribute(hf,n.style.getPropertyValue("flex-shrink")),n.setAttribute(pf,n.style.getPropertyValue("box-sizing")),n.setAttribute(Lo,n.style.getPropertyValue("scale")),n.setAttribute(Du,n.style.getPropertyValue("transform-origin")),n.setAttribute(mf,n.style.getPropertyValue("display"))),n.setAttribute(Aa,"true"),n.style.setProperty(ja,`${Math.round(Math.max(1,e.width))}px`),n.style.setProperty(Za,`${Math.round(Math.max(1,e.height))}px`)}function OL(n,e){const t=n.style.getPropertyValue("rotate"),r=OS(n,"rotate"),i=n.hasAttribute($a),s=!N2(r)&&!bL(n,r);i?e&&s&&!Rd(n)&&n.setAttribute(Vo,r):(n.setAttribute(Ea,N2(t)?"":t),n.setAttribute(Vo,s?r:"")),n.hasAttribute(Ta)||n.setAttribute(Ta,n.style.getPropertyValue("transform-origin"))}function yS(n,e,t={}){OL(n,t.updateBase??!0),n.setAttribute($a,"true"),n.style.setProperty(Bs,`${Xg(e.angle)}deg`),n.style.setProperty("transform-origin",nL)}function xL(n){return/^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(n.trim())}function Fg(n,e){var r;const t=(r=n.getAttribute(Vo))==null?void 0:r.trim();return!t||t==="none"||!xL(t)?e:`calc(${t} + ${e})`}function vS(n,e){var t;try{return((t=n.ownerDocument.defaultView)==null?void 0:t.getComputedStyle(n).getPropertyValue(e))??""}catch{return""}}function Z2(n,e){return n.style.getPropertyValue(e)||vS(n,e)}function yL(n,e){const t=n.parentElement;if(!t)return null;const r=Z2(t,"display").trim();if(r!=="flex"&&r!=="inline-flex")return null;const i=Z2(t,"flex-direction").trim();return Math.round(Math.max(1,i.startsWith("column")?e.height:e.width))}function vL(n){n.hasAttribute(Lo)&&(yr(n,"scale",Lo),yr(n,"transform-origin",Du))}function bS(n,e){gL(n,e),vL(n);const t=Math.round(Math.max(1,e.width)),r=Math.round(Math.max(1,e.height));n.style.setProperty("box-sizing","border-box"),n.style.setProperty("width",`${t}px`),n.style.setProperty("height",`${r}px`),n.style.setProperty("min-width","0px"),n.style.setProperty("min-height","0px"),n.style.setProperty("max-width","none"),n.style.setProperty("max-height","none");const i=yL(n,e);i!=null&&(n.style.setProperty("flex-basis",`${i}px`),n.style.setProperty("flex-grow","0"),n.style.setProperty("flex-shrink","0")),vS(n,"display")==="inline"&&n.style.setProperty("display","inline-block")}function R2(n){return n.includes(zs)||n.includes(Hs)}function w5(n){return n.includes(ja)||n.includes(Za)}function N2(n){return n.includes(Bs)}function S5(n){return n.replace(/\s+/g,"").toLowerCase()}function bL(n,e){if(!n.hasAttribute(Ra))return!1;const t=n.style.getPropertyValue(Bs).trim();return!t||!e.trim()?!1:S5(e)===S5(Fg(n,t))}function wS(n,e){xS(n,e),n.style.setProperty("translate",gS(n,`var(${zs}, 0px)`,`var(${Hs}, 0px)`))}function G1(n,e){xS(n,e,{updateBase:!1}),n.style.setProperty("translate",gS(n,`${Math.round(e.x)}px`,`${Math.round(e.y)}px`))}function SS(n,e){bS(n,e)}function wL(n,e){bS(n,e)}function kS(n,e){yS(n,e),n.removeAttribute(Ra),n.style.setProperty("rotate",Fg(n,`var(${Bs}, 0deg)`))}function SL(n,e){yS(n,e,{updateBase:!1}),n.setAttribute(Ra,"true"),n.style.setProperty("rotate",Fg(n,`${Xg(e.angle)}deg`))}function kL(n){(n.hasAttribute(Pa)||R2(n.style.getPropertyValue("translate")))&&$L(n),n.style.removeProperty(zs),n.style.removeProperty(Hs),n.removeAttribute(Pa),n.removeAttribute(No),n.removeAttribute(Ca)}function PL(n){(n.hasAttribute($a)||N2(n.style.getPropertyValue("rotate")))&&AL(n),n.style.removeProperty(Bs),n.removeAttribute($a),n.removeAttribute(Ra),n.removeAttribute(Vo),n.removeAttribute(Ea),n.removeAttribute(Ta)}function yr(n,e,t){const r=n.getAttribute(t);r==null||r===""?n.style.removeProperty(e):n.style.setProperty(e,r),n.removeAttribute(t)}function AL(n){const e=n.getAttribute(Ea);e==null||e===""?n.style.removeProperty("rotate"):n.style.setProperty("rotate",e),n.removeAttribute(Ea),n.removeAttribute(Vo);const t=n.getAttribute(Ta);t!=null&&(t===""?n.style.removeProperty("transform-origin"):n.style.setProperty("transform-origin",t)),n.removeAttribute(Ta)}function $L(n){const e=n.getAttribute(Ca);e==null||e===""?n.style.removeProperty("translate"):n.style.setProperty("translate",e),n.removeAttribute(Ca),n.removeAttribute(No)}function CL(n){(n.hasAttribute(Aa)||w5(n.style.getPropertyValue("width"))||w5(n.style.getPropertyValue("height"))||n.hasAttribute(Lo))&&(yr(n,"width",af),yr(n,"height",lf),yr(n,"min-width",_u),yr(n,"min-height",cf),yr(n,"max-width",uf),yr(n,"max-height",df),yr(n,"flex-basis",Iu),yr(n,"flex-grow",ff),yr(n,"flex-shrink",hf),yr(n,"box-sizing",pf),yr(n,"scale",Lo),yr(n,"transform-origin",Du),yr(n,"display",mf)),n.style.removeProperty(ja),n.style.removeProperty(Za),n.removeAttribute(Aa)}function EL(n){return{width:n.style.getPropertyValue("width"),height:n.style.getPropertyValue("height"),minWidth:n.style.getPropertyValue("min-width"),minHeight:n.style.getPropertyValue("min-height"),maxWidth:n.style.getPropertyValue("max-width"),maxHeight:n.style.getPropertyValue("max-height"),flexBasis:n.style.getPropertyValue("flex-basis"),flexGrow:n.style.getPropertyValue("flex-grow"),flexShrink:n.style.getPropertyValue("flex-shrink"),boxSizing:n.style.getPropertyValue("box-sizing"),scale:n.style.getPropertyValue("scale"),transformOrigin:n.style.getPropertyValue("transform-origin"),display:n.style.getPropertyValue("display"),studioWidth:n.style.getPropertyValue(ja),studioHeight:n.style.getPropertyValue(Za),marker:n.getAttribute(Aa),originalWidth:n.getAttribute(af),originalHeight:n.getAttribute(lf),originalMinWidth:n.getAttribute(_u),originalMinHeight:n.getAttribute(cf),originalMaxWidth:n.getAttribute(uf),originalMaxHeight:n.getAttribute(df),originalFlexBasis:n.getAttribute(Iu),originalFlexGrow:n.getAttribute(ff),originalFlexShrink:n.getAttribute(hf),originalBoxSizing:n.getAttribute(pf),originalScale:n.getAttribute(Lo),originalTransformOrigin:n.getAttribute(Du),originalDisplay:n.getAttribute(mf)}}function TL(n){return{rotate:n.style.getPropertyValue("rotate"),transformOrigin:n.style.getPropertyValue("transform-origin"),studioRotation:n.style.getPropertyValue(Bs),marker:n.getAttribute($a),draftMarker:n.getAttribute(Ra),originalRotate:n.getAttribute(Vo),originalInlineRotate:n.getAttribute(Ea),originalTransformOrigin:n.getAttribute(Ta)}}function zg(n){return{translate:n.style.getPropertyValue("translate"),x:n.style.getPropertyValue(zs),y:n.style.getPropertyValue(Hs),marker:n.getAttribute(Pa),originalTranslate:n.getAttribute(No),originalInlineTranslate:n.getAttribute(Ca)}}function vn(n,e,t){t==null?n.removeAttribute(e):n.setAttribute(e,t)}function zn(n,e,t){t?n.style.setProperty(e,t):n.style.removeProperty(e)}function Jp(n,e){zn(n,"width",e.width),zn(n,"height",e.height),zn(n,"min-width",e.minWidth),zn(n,"min-height",e.minHeight),zn(n,"max-width",e.maxWidth),zn(n,"max-height",e.maxHeight),zn(n,"flex-basis",e.flexBasis),zn(n,"flex-grow",e.flexGrow),zn(n,"flex-shrink",e.flexShrink),zn(n,"box-sizing",e.boxSizing),zn(n,"scale",e.scale),zn(n,"transform-origin",e.transformOrigin),zn(n,"display",e.display),zn(n,ja,e.studioWidth),zn(n,Za,e.studioHeight),vn(n,Aa,e.marker),vn(n,af,e.originalWidth),vn(n,lf,e.originalHeight),vn(n,_u,e.originalMinWidth),vn(n,cf,e.originalMinHeight),vn(n,uf,e.originalMaxWidth),vn(n,df,e.originalMaxHeight),vn(n,Iu,e.originalFlexBasis),vn(n,ff,e.originalFlexGrow),vn(n,hf,e.originalFlexShrink),vn(n,pf,e.originalBoxSizing),vn(n,Lo,e.originalScale),vn(n,Du,e.originalTransformOrigin),vn(n,mf,e.originalDisplay)}function em(n,e){zn(n,"rotate",e.rotate),zn(n,"transform-origin",e.transformOrigin),zn(n,Bs,e.studioRotation),vn(n,$a,e.marker),vn(n,Ra,e.draftMarker),vn(n,Vo,e.originalRotate),vn(n,Ea,e.originalInlineRotate),vn(n,Ta,e.originalTransformOrigin)}function ma(n,e){e.translate?n.style.setProperty("translate",e.translate):n.style.removeProperty("translate"),e.x?n.style.setProperty(zs,e.x):n.style.removeProperty(zs),e.y?n.style.setProperty(Hs,e.y):n.style.removeProperty(Hs),vn(n,Pa,e.marker),vn(n,No,e.originalTranslate),vn(n,Ca,e.originalInlineTranslate)}function Hg(n){try{Object.defineProperty(n,M2,{configurable:!1,enumerable:!1,value:!0})}catch{try{n[M2]=!0}catch{}}}function Wg(n){return!!n[M2]}function Dc(n,e,t){const r=e==null?void 0:e[t];if(!e||typeof r!="function")return!1;const i=r;if(Wg(i))return!0;const s=function(...a){var u;const c=i.apply(this,a);return(u=n.__hfStudioManualEditsApply)==null||u.call(n),c};return Hg(s),e[t]=s,!0}function Xc(n,e){const t=n[e];if(typeof t!="function")return null;try{return Ds(t.call(n))}catch{return null}}function ML(n){const e=Xc(n,"duration")??Xc(n,"getDuration");if(e==null)return!0;if(e<=0)return!1;const t=Xc(n,"time")??Xc(n,"totalTime")??Xc(n,"getTime");return t==null?!0:t<e}function tm(n){if(!n)return!1;const e=n.isPlaying;if(typeof e=="function")try{return!!e.call(n)}catch{return!1}const t=n.paused;if(typeof t=="function"){try{if(t.call(n))return!1}catch{return!1}const i=n.isActive;if(typeof i=="function")try{if(i.call(n))return!0}catch{return!1}return ML(n)}const r=n.isActive;if(typeof r=="function")try{return!!r.call(n)}catch{return!1}return!1}function PS(n){return tm(n.__player)||tm(n.__timeline)?!0:Object.values(n.__timelines??{}).some(tm)}function AS(n){var t;if((t=n.__hfStudioManualEditsApply)==null||t.call(n),n[b1]!=null)return;const e=()=>{var r;if((r=n.__hfStudioManualEditsApply)==null||r.call(n),!PS(n)){n[b1]=null;return}n[b1]=n.requestAnimationFrame(e)};n[b1]=n.requestAnimationFrame(e)}function nm(n,e,t){const r=e==null?void 0:e[t];if(!e||typeof r!="function")return!1;const i=r;if(Wg(i))return!0;const s=function(...a){const c=i.apply(this,a);return AS(n),c};return Hg(s),e[t]=s,!0}function rm(n,e,t){const r=e==null?void 0:e[t];if(!e||typeof r!="function")return!1;const i=r;if(Wg(i))return!0;const s=function(...a){var u;const c=i.apply(this,a);return(u=n.__hfStudioManualEditsApply)==null||u.call(n),c};return Hg(s),e[t]=s,!0}function QL(n,e){const t=n;t[tL]=e;const r=Dc(t,t.__hf,"seek"),i=Dc(t,t.__player,"seek"),s=Dc(t,t.__player,"renderSeek"),a=Dc(t,t.__timeline,"seek"),c=nm(t,t.__player,"play"),u=nm(t,t.__timeline,"play"),h=rm(t,t.__player,"pause"),p=rm(t,t.__timeline,"pause");let O=!1,x=!1,v=!1;for(const w of Object.values(t.__timelines??{}))O=Dc(t,w,"seek")||O,x=nm(t,w,"play")||x,v=rm(t,w,"pause")||v;return PS(t)&&AS(t),r||i||s||a||c||u||h||p||O||x||v}function jL(n,e){let t=n;for(;t;){const r=t.getAttribute("data-composition-file")??t.getAttribute("data-composition-src");if(r)return r;t=t.parentElement}return e??"index.html"}function im(n,e,t){return jL(n,t)===e}function ZL(n,e,t){var s;const r=a=>a instanceof t,i=(s=e.match(/^\.([A-Za-z0-9_-]+)$/))==null?void 0:s[1];return i?Array.from(n.getElementsByTagName("*")).filter(a=>r(a)&&a.classList.contains(i)):/^[A-Za-z][A-Za-z0-9-]*$/.test(e)?Array.from(n.getElementsByTagName(e)).filter(r):Array.from(n.querySelectorAll(e)).filter(r)}function RL(n,e,t){var i;const r=(i=n.defaultView)==null?void 0:i.HTMLElement;if(!r)return null;if(e.target.id){const s=n.getElementById(e.target.id);if(s instanceof r&&im(s,e.target.sourceFile,t))return s;const a=[n.documentElement,...Array.from(n.getElementsByTagName("*"))].filter(c=>c instanceof r&&c.id===e.target.id&&im(c,e.target.sourceFile,t));if(a[0])return a[0]}if(!e.target.selector)return null;try{return ZL(n,e.target.selector,r).filter(a=>im(a,e.target.sourceFile,t))[e.target.selectorIndex??0]??null}catch{return null}}function NL(n){var r;const e=(r=n.defaultView)==null?void 0:r.HTMLElement;return e?[n.documentElement,...Array.from(n.getElementsByTagName("*"))].filter(i=>i instanceof e).filter(i=>i.hasAttribute(Pa)||i.hasAttribute(Yl)||i.hasAttribute(Aa)||i.hasAttribute($a)||i.hasAttribute(Ra)||i.hasAttribute(No)||i.hasAttribute(Ca)||i.hasAttribute(_u)||i.hasAttribute(Iu)||i.hasAttribute(Lo)||i.hasAttribute(Vo)||i.hasAttribute(Ea)||!!i.style.getPropertyValue(zs)||!!i.style.getPropertyValue(Hs)||!!i.style.getPropertyValue(ja)||!!i.style.getPropertyValue(Za)||!!i.style.getPropertyValue(Bs)):[]}function LL(n,e,t){const r=[],i=new Set,s=new Set,a=new Set;for(const u of e.edits){const h=RL(n,u,t);h&&(Rd(h)||(r.push({edit:u,element:h}),u.kind==="path-offset"&&i.add(h),u.kind==="box-size"&&s.add(h),u.kind==="rotation"&&a.add(h)))}for(const u of NL(n))Rd(u)||(i.has(u)||kL(u),s.has(u)||CL(u),a.has(u)||PL(u));let c=0;for(const{edit:u,element:h}of r)u.kind==="path-offset"?wS(h,{x:u.x,y:u.y}):u.kind==="box-size"?SS(h,{width:u.width,height:u.height}):kS(h,{angle:u.angle}),c+=1;return c}const k5=["ABeeZee","Abel","Abril Fatface","Alegreya","Alegreya Sans","Anton","Archivo","Archivo Black","Arimo","Assistant","Barlow","Barlow Condensed","Bebas Neue","Bitter","Bricolage Grotesque","Cabin","Cardo","Catamaran","Caveat","Chivo","Cormorant Garamond","Crimson Text","Dancing Script","DM Sans","DM Serif Display","Domine","EB Garamond","Exo 2","Figtree","Fira Code","Fira Sans","Fraunces","Fredoka","IBM Plex Mono","IBM Plex Sans","IBM Plex Serif","Inconsolata","Instrument Sans","Instrument Serif","Inter","JetBrains Mono","Josefin Sans","Jost","Kanit","Karla","Lato","League Gothic","Lexend","Libre Baskerville","Libre Franklin","Lora","Manrope","Merriweather","Montserrat","Mukta","Mulish","Newsreader","Noto Sans","Noto Sans JP","Noto Serif","Nunito","Nunito Sans","Open Sans","Oswald","Outfit","Overpass","Pacifico","Pathway Extreme","Permanent Marker","Playfair Display","Plus Jakarta Sans","Poppins","Prata","PT Sans","PT Serif","Public Sans","Quicksand","Raleway","Red Hat Display","Roboto","Roboto Condensed","Roboto Mono","Roboto Serif","Rubik","Schibsted Grotesk","Signika","Source Code Pro","Source Sans 3","Source Serif 4","Space Grotesk","Space Mono","Spectral","Sora","Syne","Teko","Titillium Web","Ubuntu","Ubuntu Mono","Unbounded","Urbanist","Varela Round","Work Sans","Young Serif","Zilla Slab"],L2=["TT Norms Pro","SF Pro Display","SF Pro Text","Avenir","Avenir Next","Helvetica Neue","Arial","Georgia","Times New Roman","Menlo","Monaco","Courier New"];function $S(n){return`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n.trim()).replace(/%20/g,"+")}:wght@300;400;500;600;700;800;900&display=swap`}const VL=/\.(eot|otf|ttc|ttf|woff2?)$/i,P5=/\s+(thin|extralight|extra light|light|regular|roman|medium|semibold|semi bold|bold|extrabold|extra bold|black|italic|oblique|variable)$/i;function A5(n){return JSON.stringify(n)}function El(n){const e=decodeURIComponent(n.split(/[\\/]/).pop()??n).replace(VL,"");let t=e.replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/\s+/g," ").trim();for(;P5.test(t);)t=t.replace(P5,"").trim();return t||e}function Bg(n,e=n.url){return`@font-face { font-family: ${A5(n.family)}; src: url(${A5(e)}); font-display: swap; }`}function sm(n,e,t){return Math.max(e,Math.min(t,n))}function _L(n,e,t,r){const a=Math.max(12,e.width-t.width-12),c=n.left+n.width/2-t.width/2,u=sm(c,12,a),h=n.bottom+8,p=n.top-t.height-8,O=h+t.height<=e.height-12,x=p>=12;return O||!x?{left:u,top:sm(h,12,Math.max(12,e.height-t.height-12)),placement:"bottom"}:{left:u,top:sm(p,12,Math.max(12,e.height-t.height-12)),placement:"top"}}const Fi="min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600",Jn="text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500",Li="grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3",IL={},CS=new Set(["inherit","initial","revert","revert-layer","serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-sans-serif","ui-serif","ui-monospace","ui-rounded","emoji","math","fangsong"]),DL=[...L2,"Inter","system-ui","sans-serif","serif","monospace"],$5={width:292,height:386},V2="none",ES={none:"none",soft:"0 12px 36px rgba(0, 0, 0, 0.28)",lift:"0 18px 54px rgba(0, 0, 0, 0.38)",glow:"0 0 0 1px rgba(60, 230, 172, 0.34), 0 18px 56px rgba(60, 230, 172, 0.2)"};function om(n){return Lu(n)??{red:0,green:0,blue:0,alpha:1}}function C5(n){return n.replace(/[^\w .-]+/g," ").replace(/\s+/g," ").trim()}function S1(n){var r,i;const e=((r=n.style)==null?void 0:r.toLowerCase())??"",t=((i=n.fullName)==null?void 0:i.toLowerCase())??"";return e==="regular"||t.endsWith(" regular")?0:e==="normal"||t.endsWith(" normal")?1:e==="medium"||t.endsWith(" medium")?2:3}function E5(n){if(!n)return null;const e=Number.parseFloat(n);return Number.isFinite(e)?e:null}function Cn(n){const e=Math.round(n*100)/100;return Number.isInteger(e)?`${e}`:e.toFixed(2).replace(/0+$/,"").replace(/\.$/,"")}function Na(n){if(!n)return null;const e=n.trim().match(/^(-?\d+(?:\.\d+)?)([a-z%]*)$/i);if(!e)return null;const t=Number.parseFloat(e[1]);return Number.isFinite(t)?{value:t,unit:e[2]??""}:null}function xo(n){const e=Na(n);return!e||e.unit&&e.unit.toLowerCase()!=="px"?null:e.value}function TS(n,e,t,r){return Number.isFinite(n)?Math.max(e,Math.min(t,n)):r}function XL(n,e={}){const t=Na(n.trim());if(!t||t.unit&&t.unit.toLowerCase()!=="px")return null;const r=TS(t.value,e.min??Number.NEGATIVE_INFINITY,e.max??Number.POSITIVE_INFINITY,e.fallback??0);return`${Cn(r)}px`}function fl(n){return`${Cn(n)}px`}function T5(n,e){const t=e.trim();if(!t||t==="normal")return t||"normal";const r=Na(t);return r?n==="letter-spacing"?r.unit?t:`${Cn(r.value)}px`:r.unit?t:r.value>4?`${Cn(r.value)}px`:Cn(r.value):t}function FL(n){const e=[];let t="",r=0;for(const i of n.trim()){if(i==="("&&(r+=1),i===")"&&(r=Math.max(0,r-1)),/\s/.test(i)&&r===0){t.trim()&&e.push(t.trim()),t="";continue}t+=i}return t.trim()&&e.push(t.trim()),e}function M5(n,e){const t=n==null?void 0:n.trim();if(!t||t===V2)return 0;const r=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),i=new RegExp(`(?:^|\\s)${r}\\((-?\\d+(?:\\.\\d+)?)px\\)`,"i").exec(t);if(!i)return 0;const s=Number.parseFloat(i[1]);return Number.isFinite(s)?Math.max(0,s):0}function Q5(n,e,t){const r=TS(t,0,200,0),i=FL(n&&n.trim()!==V2?n:""),s=e.toLowerCase(),a=i.filter(c=>!c.toLowerCase().startsWith(`${s}(`));return r>0&&a.push(`${e}(${Cn(r)}px)`),a.length>0?a.join(" "):V2}function zL(n){const e=(n==null?void 0:n.trim())||"none";for(const[t,r]of Object.entries(ES))if(e===r)return t;return e==="none"?"none":"custom"}function HL(n,e){return n==="custom"?(e==null?void 0:e.trim())||"none":ES[n]}function WL(n){const e=n==null?void 0:n.trim();return!e||e==="none"?"none":/^inset\(/i.test(e)?"inset":/^circle\(/i.test(e)?"circle":"custom"}function BL(n){const e=/^inset\(\s*(-?\d+(?:\.\d+)?)px\b/i.exec((n==null?void 0:n.trim())??"");if(!e)return 0;const t=Number.parseFloat(e[1]);return Number.isFinite(t)?Math.max(0,t):0}function YL(n,e){const t=[["border-width",n]],r=Na(n),i=(e==null?void 0:e.trim().toLowerCase())||"none";return r&&r.value>0&&(i==="none"||i==="hidden")&&t.push(["border-style","solid"]),t}function qL(n,e){const t=[["border-style",n]],r=n.trim().toLowerCase();if(!r||r==="none"||r==="hidden")return t;const i=Na((e==null?void 0:e.trim())||"0");return(!i||i.value<=0)&&t.push(["border-width","1px"]),t}function UL(n,e,t){return n==="custom"?(t==null?void 0:t.trim())||"none":n==="circle"?"circle(50% at 50% 50%)":n==="inset"?`inset(0 round ${Cn(Math.max(0,e))}px)`:"none"}function GL(n,e){return`inset(${Cn(Math.max(0,n))}px round ${Cn(Math.max(0,e))}px)`}function j5(n,e,t){const r=Na(n);if(!r)return null;const i=t!=null&&t.altKey?.1:t!=null&&t.shiftKey?10:1,s=r.value+i*e;return`${Cn(s)}${r.unit}`}function KL(n){const e=Lu(n);return e?`${A2(n).replace(/^#/,"").toUpperCase()} / ${Math.round(e.alpha*100)}%`:n}function JL(n){if(!n)return"";const t=n.toLowerCase().indexOf("url(");if(t<0)return"";let r=t+4;for(;r<n.length&&(n[r]===" "||n[r]===`
 `||n[r]==="\r"||n[r]==="	"||n[r]==="\f");)r+=1;const i=n[r]==='"'||n[r]==="'"?n[r]:null;if(i){r+=1;const a=n.indexOf(i,r);return a>=r?n.slice(r,a):""}const s=n.indexOf(")",r);return s<r?"":n.slice(r,s).trim()}function ku(n){const e=n.trim(),t=/^[a-z]+:\/\//i.test(e)?new URL(e).pathname:e;return decodeURIComponent(t).replace(/\\/g,"/").replace(/^\.?\//,"")}function eV(n,e){const t=ku(n).split("/").filter(Boolean),r=ku(e).split("/").filter(Boolean);for(t.pop();t.length>0&&r.length>0&&t[0]===r[0];)t.shift(),r.shift();return[...t.map(()=>".."),...r].join("/")||e}function Z5(n){return ku(n)}function tV(n,e,t){const r=ku(n);if(!r)return null;for(const i of t){const s=ku(i),a=eV(e,i);if(r===s||r===a||r.endsWith(`/${s}`)||r.endsWith(`/${a}`))return i}return null}function nV(n){const e=[{source:"Fill",value:n["background-color"]},{source:"Text",value:n.color}],t=new Map;for(const r of e){if(!r.value)continue;const i=Lu(r.value);if(!i||i.alpha<=0)continue;const s=`${A2(r.value)}-${Math.round(i.alpha*100)}`,a=t.get(s);if(a){a.sources.push(r.source);continue}t.set(s,{swatch:A2(r.value),token:KL(r.value),sources:[r.source]})}return Array.from(t.values())}function MS({value:n,disabled:e,liveCommit:t,onCommit:r}){const[i,s]=d.useState(n),a=d.useRef(null),c=d.useRef(n);c.current=n,d.useEffect(()=>{s(n)},[n]),d.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]);const u=p=>{a.current&&clearTimeout(a.current),p!==c.current&&r(p)},h=p=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{p!==c.current&&r(p)},120)};return m.jsx("input",{type:"text",value:i,disabled:e,onChange:p=>{s(p.target.value),t&&h(p.target.value)},onBlur:()=>u(i),onWheel:p=>{if(e)return;const O=p.deltaY===0?p.deltaX:p.deltaY;if(O===0)return;const x=j5(i,O<0?1:-1,p);x&&(p.preventDefault(),s(x),h(x))},onKeyDown:p=>{if(p.key==="Enter"){p.target.blur();return}if(p.key!=="ArrowUp"&&p.key!=="ArrowDown")return;const O=j5(i,p.key==="ArrowUp"?1:-1,p);O&&(p.preventDefault(),s(O),h(O))},title:Na(n)?"Scroll or use Arrow keys to adjust":void 0,className:"min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"})}function Zs({label:n,value:e,disabled:t,liveCommit:r,onCommit:i}){return m.jsx("div",{className:Fi,children:m.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[m.jsx("span",{className:"flex-shrink-0 text-[11px] font-medium text-neutral-500",children:n}),m.jsx(MS,{value:e,disabled:t,liveCommit:r,onCommit:i})]})})}function Yg({label:n,value:e,disabled:t,onCommit:r}){return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:n}),m.jsx("div",{className:Fi,children:m.jsx(MS,{value:e,disabled:t,onCommit:r})})]})}function R5({label:n,value:e,disabled:t,autoFocus:r,onCommit:i}){const[s,a]=d.useState(e),c=d.useRef(null),u=d.useRef(null),h=d.useRef(!1),p=d.useRef(e);p.current=e,d.useEffect(()=>{h.current||a(e)},[e]),d.useEffect(()=>()=>{u.current&&clearTimeout(u.current)},[]),d.useEffect(()=>{var v;r&&((v=c.current)==null||v.focus())},[r]);const O=v=>{u.current&&clearTimeout(u.current),v!==p.current&&i(v)},x=v=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>{v!==p.current&&i(v)},120)};return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:n}),m.jsx("div",{className:Fi,children:m.jsx("textarea",{ref:c,value:s,disabled:t,rows:4,onFocus:()=>{h.current=!0},onChange:v=>{a(v.target.value),x(v.target.value)},onBlur:()=>{h.current=!1,O(s)},className:"w-full resize-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"})})]})}function am(n){const e=n.trim().replace(/\s+/g," ");return e.length<=56?e:`${e.slice(0,55)}…`}function lm(n,e){return n.computedStyles.color||e.color||"rgb(0, 0, 0)"}function rV(n){const e=[];let t="",r=null;for(const i of n){if((i==='"'||i==="'")&&!r){r=i;continue}if(i===r){r=null;continue}if(i===","&&!r){t.trim()&&e.push(t.trim()),t="";continue}t+=i}return t.trim()&&e.push(t.trim()),e.map(i=>i.replace(/^["']|["']$/g,"").trim()).filter(Boolean)}function iV(n){return rV(n)[0]??"inherit"}function sV(n){const e=n.trim();return CS.has(e.toLowerCase())?e:`"${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}"`}function k1(n){const e=n.trim();return e?CS.has(e.toLowerCase())?e:`${sV(e)}, ui-sans-serif, system-ui, sans-serif`:"inherit"}function oV(){if(typeof document>"u")return[];const n=document.fonts;return n?Array.from(n,e=>e.family.replace(/^["']|["']$/g,"").trim()).filter(Boolean).sort((e,t)=>e.localeCompare(t)):[]}function cm(n){const e=new Set,t=[];for(const r of n){const i=r.trim();if(!i)continue;const s=i.toLowerCase();e.has(s)||(e.add(s),t.push(i))}return t}function N5(n){const e=new Set,t=[];for(const r of n){const i=r.family.trim();if(!i)continue;const s=i.toLowerCase();e.has(s)||(e.add(s),t.push({family:i,source:r.source}))}return t}function L5(n){return n==="Current"?0:n==="Document"?1:n==="Imported"?2:n==="Local"?3:n==="Google"?4:5}function aV(n){return[...n].sort((e,t)=>{const r=L5(e.source)-L5(t.source);if(r!==0)return r;const i=L2.findIndex(c=>c.toLowerCase()===e.family.toLowerCase()),s=L2.findIndex(c=>c.toLowerCase()===t.family.toLowerCase()),a=(i===-1?Number.MAX_SAFE_INTEGER:i)-(s===-1?Number.MAX_SAFE_INTEGER:s);return a===0?e.family.localeCompare(t.family):a})}function V5(n){return n.toLowerCase().replace(/[^a-z0-9]+/g,"")}function lV(n,e){const t=e.trim().toLowerCase();return!t||n.toLowerCase().includes(t)?!0:V5(n).includes(V5(t))}function _5(n){if(typeof document>"u")return;const e=n.trim();if(!e)return;const t=`studio-google-font-${e.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(document.getElementById(t))return;if(!document.querySelector('link[data-studio-google-font-preconnect="true"]')){const s=document.createElement("link");s.setAttribute("data-studio-google-font-preconnect","true"),s.rel="preconnect",s.href="https://fonts.gstatic.com",s.crossOrigin="anonymous",document.head.appendChild(s)}const i=document.createElement("link");i.id=t,i.rel="stylesheet",i.href=$S(e),document.head.appendChild(i)}function P1(n){if(typeof document>"u")return;const e=`studio-imported-font-${n.family.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=Bg(n),document.head.appendChild(t)}function I5({value:n,disabled:e,onCommit:t}){const r=["300","400","500","600","700","800"];return m.jsx("div",{className:Fi,children:m.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[m.jsx("span",{className:"flex-shrink-0 text-[11px] font-medium text-neutral-500",children:"Weight"}),m.jsx("select",{value:n,disabled:e,onChange:i=>t(i.target.value),className:"min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600",children:r.map(i=>m.jsx("option",{value:i,children:i},i))})]})})}function D5({value:n,disabled:e,importedFonts:t,onImportFonts:r,onCommit:i}){const s=iV(n),a=d.useRef(null),c=d.useRef(null),u=d.useRef(null),[h,p]=d.useState(!1),[O,x]=d.useState(""),[v,w]=d.useState([]),[k,A]=d.useState([]),[Q,T]=d.useState(()=>[...k5]),[C,j]=d.useState(!1),[M,Z]=d.useState(!1),[L,W]=d.useState(!1),[te,se]=d.useState(null),ce=typeof window<"u"&&typeof window.queryLocalFonts=="function";d.useEffect(()=>{if(!h)return;const z=K=>{var F;const E=K.target;E instanceof Node&&((F=a.current)!=null&&F.contains(E)||p(!1))};return document.addEventListener("pointerdown",z),()=>{document.removeEventListener("pointerdown",z)}},[h]),d.useEffect(()=>{h&&requestAnimationFrame(()=>{var z;return(z=c.current)==null?void 0:z.focus()})},[h]),d.useEffect(()=>{let z=!1;return fetch("/api/fonts").then(K=>K.ok?K.json():null).then(K=>{const E=K==null?void 0:K.fonts;z||!Array.isArray(E)||w(F=>cm([...F,...E]))}).catch(()=>{}),()=>{z=!0}},[]),d.useEffect(()=>{let z=!1;return Z(!0),fetch("/api/fonts/google").then(K=>K.ok?K.json():null).then(K=>{const E=K==null?void 0:K.fonts;z||!Array.isArray(E)||T(cm([...E,...k5]))}).catch(()=>{}).finally(()=>{z||Z(!1)}),()=>{z=!0}},[]),d.useEffect(()=>{Q.some(K=>K.toLowerCase()===s.toLowerCase())&&_5(s);const z=t.find(K=>K.family.toLowerCase()===s.toLowerCase());z&&P1(z)},[s,Q,t]);const N=async()=>{if(!ce||!window.queryLocalFonts){se("This browser does not expose installed fonts. Import a font file instead.");return}j(!0),se(null);try{const z=await window.queryLocalFonts(),K=[...z].sort((F,re)=>S1(F)-S1(re)),E=K.map(F=>F.family).filter(F=>!!F).map(F=>El(`${F}.ttf`));A(K),w(F=>cm([...F,...E])),se(z.length===0?"No browser-local fonts were returned.":null)}catch(z){const K=z instanceof Error?z.name:"";se(K==="NotAllowedError"?"Local font access was denied. Import a font file instead.":"Local font access is unavailable. Import a font file instead.")}finally{j(!1)}},le=async z=>{if(!(!(z!=null&&z.length)||!r)){W(!0),se(null);try{const K=await r(z);for(const F of K)P1(F);const E=K[0];E?(i(k1(E.family)),x(""),p(!1)):se("No supported font files were imported.")}finally{W(!1)}}},Oe=d.useMemo(()=>N5(t.map(z=>({family:z.family,source:"Imported"}))),[t]),Ce=d.useMemo(()=>{const z=oV();return aV(N5([{family:s,source:"Current"},...z.map(K=>({family:K,source:"Document"})),...Oe,...v.map(K=>({family:K,source:"Local"})),...Q.map(K=>({family:K,source:"Google"})),...DL.map(K=>({family:K,source:"System"}))]))},[s,Q,v,Oe]),B=d.useMemo(()=>Ce.filter(K=>lV(K.family,O)).slice(0,O.trim()?120:160),[Ce,O]),ke=async z=>{if(!r)return null;const E=k.filter(Qe=>El(`${Qe.family}.ttf`)===z).sort((Qe,ne)=>S1(Qe)-S1(ne)).find(Qe=>typeof Qe.blob=="function");if(!(E!=null&&E.blob))return null;const F=await E.blob(),re=C5(E.style??"Regular")||"Regular",ge=C5(`${z} ${re}`)||z,Me=new File([F],`${ge}.ttf`,{type:F.type||"font/ttf"}),De=await r([Me]);return De.find(Qe=>Qe.family.toLowerCase()===z.toLowerCase())??De[0]??null},U=async z=>{if(z.source==="Local"){W(!0),se(null);try{const E=await ke(z.family);if(E){P1(E),i(k1(E.family)),x(""),p(!1);return}i(k1(z.family)),x(""),p(!1)}finally{W(!1)}return}z.source==="Google"&&_5(z.family);const K=t.find(E=>E.family.toLowerCase()===z.family.toLowerCase());K&&P1(K),i(k1(z.family)),x(""),p(!1)};return m.jsxs("div",{ref:a,className:"relative grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Font family"}),m.jsxs("button",{type:"button",disabled:e,onClick:()=>p(z=>!z),className:`${Fi} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`,children:[m.jsx("span",{className:"min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100",style:{fontFamily:n},children:s}),m.jsx("span",{className:"flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600",children:"Font"})]}),h&&m.jsxs("div",{className:"absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl",children:[m.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2",children:[m.jsx("input",{ref:c,type:"text",value:O,disabled:e,placeholder:M?"Loading Google Fonts...":"Search fonts",onChange:z=>x(z.target.value),onKeyDown:z=>{z.key==="Escape"&&(z.preventDefault(),p(!1)),z.key==="Enter"&&B[0]&&(z.preventDefault(),U(B[0]))},className:"min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"}),ce&&m.jsx("button",{type:"button",disabled:e||C,onClick:N,className:"rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",children:C?"...":"Local"}),m.jsx("button",{type:"button",disabled:e||L||!r,onClick:()=>{var z;return(z=u.current)==null?void 0:z.click()},className:"rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",children:L?"...":"Import"}),m.jsx("input",{ref:u,type:"file",accept:".ttf,.otf,.ttc,.woff,.woff2,.eot,font/*",multiple:!0,"aria-label":"Import local font files",disabled:e||L||!r,className:"hidden",onChange:async z=>{await le(z.target.files),z.target.value=""}})]}),te&&m.jsx("div",{className:"border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500",children:te}),m.jsx("div",{className:"max-h-64 overflow-y-auto p-1",children:B.length===0?m.jsx("div",{className:"px-2 py-3 text-[11px] text-neutral-500",children:"No fonts found."}):B.map(z=>m.jsxs("button",{type:"button",onClick:()=>U(z),className:`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${z.family===s?"bg-studio-accent/15 text-neutral-50":"text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"}`,children:[m.jsx("span",{className:"min-w-0 truncate font-medium",children:z.family}),m.jsx("span",{className:"flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600",children:z.source})]},`${z.source}-${z.family}`))})]})]})}function Fc(n,e,t,r){return n.computedStyles[t]||e[t]||r}function X5({field:n,inheritedStyles:e,disabled:t,onCommit:r}){return m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:Li,children:[m.jsx(Zs,{label:"Line",value:Fc(n,e,"line-height","normal"),disabled:t,liveCommit:!0,onCommit:i=>r("line-height",T5("line-height",i))}),m.jsx(Zs,{label:"Track",value:Fc(n,e,"letter-spacing","0px"),disabled:t,liveCommit:!0,onCommit:i=>r("letter-spacing",T5("letter-spacing",i))})]}),m.jsxs("div",{className:Li,children:[m.jsx(Oi,{label:"Align",value:Fc(n,e,"text-align","start"),disabled:t,onChange:i=>r("text-align",i),options:["start","left","center","right","justify","end"]}),m.jsx(Oi,{label:"Case",value:Fc(n,e,"text-transform","none"),disabled:t,onChange:i=>r("text-transform",i),options:["none","uppercase","lowercase","capitalize"]})]}),m.jsx(Oi,{label:"Style",value:Fc(n,e,"font-style","normal"),disabled:t,onChange:i=>r("font-style",i),options:["normal","italic","oblique"]})]})}function yl({label:n,value:e,disabled:t,onCommit:r}){const i=d.useRef(null),s=d.useRef(null),[a,c]=d.useState(!1),[u,h]=d.useState(null),[p,O]=d.useState(()=>om(e)),[x,v]=d.useState(()=>U1(om(e)).toUpperCase()),w=wN(p),k=x1({...u5({hue:w.hue,saturation:1,value:1}),alpha:1}),A=x1({...p,alpha:1}),Q=x1(p),T=Math.round(w.saturation*100),C=Math.round(w.value*100),j=Math.round(p.alpha*100);d.useEffect(()=>{const N=om(e);O(N),v(U1(N).toUpperCase())},[e]);const M=d.useCallback(()=>{var Oe,Ce;const N=(Oe=i.current)==null?void 0:Oe.getBoundingClientRect();if(!N)return;const le=(Ce=s.current)==null?void 0:Ce.getBoundingClientRect();h(_L(N,{width:window.innerWidth,height:window.innerHeight},{width:(le==null?void 0:le.width)||$5.width,height:(le==null?void 0:le.height)||$5.height}))},[]);d.useLayoutEffect(()=>{if(!a)return;M();const N=()=>M();return window.addEventListener("resize",N),window.addEventListener("scroll",N,!0),()=>{window.removeEventListener("resize",N),window.removeEventListener("scroll",N,!0)}},[a,M]),d.useEffect(()=>{if(!a)return;const N=Oe=>{var B,ke;const Ce=Oe.target;Ce&&((B=s.current)!=null&&B.contains(Ce)||(ke=i.current)!=null&&ke.contains(Ce)||c(!1))},le=Oe=>{Oe.key==="Escape"&&c(!1)};return document.addEventListener("pointerdown",N),document.addEventListener("keydown",le),()=>{document.removeEventListener("pointerdown",N),document.removeEventListener("keydown",le)}},[a]);const Z=N=>{O(N),v(U1(N).toUpperCase()),r(x1(N))},L=N=>{const le=u5({hue:N.hue??w.hue,saturation:N.saturation??w.saturation,value:N.value??w.value});Z({...le,alpha:p.alpha})},W=(N,le,Oe)=>{const Ce=Oe.getBoundingClientRect(),B=Math.max(0,Math.min(1,(N-Ce.left)/Ce.width)),ke=Math.max(0,Math.min(1,1-(le-Ce.top)/Ce.height));L({saturation:B,value:ke})},te=N=>{v(N);const le=N.trim().startsWith("#")?N.trim():`#${N.trim()}`,Oe=Lu(le);Oe&&Z({...Oe,alpha:p.alpha})},se=a?vN.createPortal(m.jsxs("div",{ref:s,className:"fixed z-[9999] w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50",style:{left:(u==null?void 0:u.left)??-9999,top:(u==null?void 0:u.top)??-9999},children:[m.jsxs("div",{className:"flex items-center justify-between border-b border-neutral-800 px-3 py-2",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:"truncate text-[11px] font-medium text-neutral-100",children:n}),m.jsx("div",{className:"text-[9px] uppercase tracking-[0.16em] text-neutral-600",children:"Color"})]}),m.jsx("button",{type:"button",onClick:()=>c(!1),className:"flex h-7 w-7 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200","aria-label":"Close color picker",children:m.jsx(rf,{size:13})})]}),m.jsxs("div",{className:"space-y-3 p-3",children:[m.jsxs("div",{className:"relative h-36 cursor-crosshair overflow-hidden rounded-xl border border-neutral-700 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]",style:{backgroundColor:k},onPointerDown:N=>{N.currentTarget.setPointerCapture(N.pointerId),W(N.clientX,N.clientY,N.currentTarget)},onPointerMove:N=>{N.buttons===1&&W(N.clientX,N.clientY,N.currentTarget)},children:[m.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-white to-transparent"}),m.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-black to-transparent"}),m.jsx("div",{className:"pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 bg-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.45)] mix-blend-difference",style:{left:`${w.saturation*100}%`}}),m.jsx("div",{className:"pointer-events-none absolute left-0 h-px w-full -translate-y-1/2 bg-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.45)] mix-blend-difference",style:{top:`${(1-w.value)*100}%`}}),m.jsx("div",{className:"pointer-events-none absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.85),0_8px_18px_rgba(0,0,0,0.45)]",style:{left:`${w.saturation*100}%`,top:`${(1-w.value)*100}%`,backgroundColor:A}})]}),m.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[m.jsx("div",{className:"h-9 w-9 flex-shrink-0 rounded-xl border border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",style:{backgroundColor:Q}}),m.jsxs("div",{className:"min-w-0 flex-1",children:[m.jsx("div",{className:"truncate text-[11px] font-medium text-neutral-100",children:Q}),m.jsxs("div",{className:"mt-0.5 text-[9px] uppercase tracking-[0.12em] text-neutral-600",children:["S ",T,"% · B ",C,"% · A ",j,"%"]})]})]}),m.jsx(F5,{label:"Hue",value:w.hue,min:0,max:360,step:1,displayValue:`${Math.round(w.hue)}°`,background:"linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",thumbColor:k,disabled:t,onCommit:N=>L({hue:N})}),m.jsx(F5,{label:"Alpha",value:p.alpha,min:0,max:1,step:.01,displayValue:`${j}%`,background:`linear-gradient(90deg, transparent, ${A})`,thumbColor:Q,disabled:t,onCommit:N=>Z({...p,alpha:N})}),m.jsxs("label",{className:"grid gap-1.5",children:[m.jsx("span",{className:Jn,children:"Hex"}),m.jsx("input",{value:x,onChange:N=>te(N.target.value),className:`${Fi} h-10 w-full text-[11px] font-medium outline-none`,spellCheck:!1})]})]})]}),document.body):null,ce=()=>{t||(c(N=>!N),a||requestAnimationFrame(M))};return m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:n}),m.jsxs("button",{type:"button",disabled:t,"aria-label":`Pick ${n.toLowerCase()} color`,ref:i,onClick:ce,className:`${Fi} flex items-center gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed ${a?"border-neutral-600":""}`,children:[m.jsx("div",{className:"relative h-7 w-7 flex-shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",style:{backgroundColor:e||"transparent"}}),m.jsx("span",{className:"min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100",children:e})]}),se]})}function F5({label:n,value:e,min:t,max:r,step:i,displayValue:s,background:a,thumbColor:c,disabled:u,onCommit:h}){const p=d.useRef(null),O=(e-t)/(r-t)*100,x=w=>{var T;const k=(T=p.current)==null?void 0:T.getBoundingClientRect();if(!k||k.width<=0)return;const A=t+(w-k.left)/k.width*(r-t),Q=Math.round(A/i)*i;h(Math.max(t,Math.min(r,Q)))},v=w=>{h(Math.max(t,Math.min(r,w)))};return m.jsxs("div",{className:"grid gap-1.5",children:[m.jsxs("div",{className:"flex items-center justify-between",children:[m.jsx("span",{className:Jn,children:n}),m.jsx("span",{className:"text-[10px] font-medium text-neutral-400",children:s})]}),m.jsx("div",{ref:p,role:"slider",tabIndex:u?-1:0,"aria-label":n,"aria-valuemin":t,"aria-valuemax":r,"aria-valuenow":e,"aria-disabled":u,className:`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-[#f5a400] focus:ring-2 focus:ring-[#f5a400]/40 ${u?"cursor-not-allowed opacity-50":"cursor-ew-resize"}`,style:{background:a},onPointerDown:w=>{u||(w.currentTarget.setPointerCapture(w.pointerId),x(w.clientX))},onPointerMove:w=>{u||w.buttons!==1||x(w.clientX)},onKeyDown:w=>{u||(w.key==="ArrowRight"||w.key==="ArrowUp"?(w.preventDefault(),v(e+i)):w.key==="ArrowLeft"||w.key==="ArrowDown"?(w.preventDefault(),v(e-i)):w.key==="Home"?(w.preventDefault(),v(t)):w.key==="End"&&(w.preventDefault(),v(r)))},children:m.jsx("div",{className:"pointer-events-none absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.85),0_6px_14px_rgba(0,0,0,0.5)]",style:{left:`${Math.max(0,Math.min(100,O))}%`,backgroundColor:c}})})]})}function cV({projectId:n,sourceFile:e,value:t,assets:r,disabled:i,onCommit:s,onImportAssets:a}){const c=d.useRef(null),[u,h]=d.useState(!1),p=d.useMemo(()=>r.filter(w=>au.test(w)),[r]),O=d.useMemo(()=>tV(t,e,p),[p,e,t]),x=O?"":t,v=async w=>{if(!(!(w!=null&&w.length)||!a)){h(!0);try{const A=(await a(w)).find(Q=>au.test(Q));A&&s(`url("${Z5(A)}")`)}finally{h(!1)}}};return m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsxs("div",{className:"flex min-w-0 flex-wrap items-center justify-between gap-2",children:[m.jsx("span",{className:Jn,children:"Project asset"}),m.jsxs("button",{type:"button",disabled:i||u,onClick:()=>{var w;return(w=c.current)==null?void 0:w.click()},className:`inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${i||u?"cursor-not-allowed text-neutral-600":"cursor-pointer hover:border-neutral-600 hover:text-white"}`,children:[m.jsx(Zg,{size:12,className:"flex-shrink-0"}),m.jsx("span",{className:"truncate",children:u?"Uploading…":"Upload image"})]}),m.jsx("input",{ref:c,type:"file",accept:"image/*","aria-label":"Upload image asset",disabled:i||u,className:"hidden",onChange:async w=>{await v(w.target.files),w.target.value=""}})]}),p.length>0?m.jsxs("div",{className:"space-y-3",children:[O&&m.jsx("div",{className:"overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80",children:m.jsx("img",{src:`/api/projects/${n}/preview/${O}`,alt:O.split("/").pop()??O,className:"h-28 w-full object-contain bg-neutral-950/80"})}),m.jsx("div",{className:Fi,children:m.jsxs("select",{value:O??"",disabled:i,onChange:w=>{const k=w.target.value;if(!k){s("none");return}s(`url("${Z5(k)}")`)},className:"min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600",children:[m.jsx("option",{value:"",children:"None"}),p.map(w=>m.jsx("option",{value:w,children:w},w))]})})]}):m.jsx("div",{className:"rounded-xl border border-dashed border-neutral-800 bg-neutral-900/50 px-3 py-3 text-[11px] leading-5 text-neutral-500",children:"No image assets yet. Upload one here and Studio will also add it to the Assets tab."})]}),m.jsx(Yg,{label:"External URL",value:x,disabled:i,onCommit:w=>s(w.trim()?`url("${w.trim()}")`:"none")})]})}function uV({value:n,fallbackColor:e,disabled:t,onCommit:r}){const i=d.useRef(null),s=MN(n)??C2(e),a=x=>r(Qd(x)),c=x=>a({...s,...x}),u=(x,v)=>{const w=s.stops.map((k,A)=>A===x?{...k,...v}:k);a({...s,stops:w})},h=x=>{var w,k;const v=x!=null?d5(s,x):d5(s,((w=s.stops.at(-1))==null?void 0:w.position)!=null?Math.min(100,(((k=s.stops.at(-1))==null?void 0:k.position)??90)+10):100);a(v)},p=x=>{s.stops.length<=2||a({...s,stops:s.stops.filter((v,w)=>w!==x)})},O={backgroundImage:Qd(s)};return m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:`${Fi} space-y-3 p-3`,children:[m.jsx("div",{ref:i,className:"relative h-11 overflow-hidden rounded-lg border border-neutral-700",style:O,onClick:x=>{var k;if(t)return;const v=(k=i.current)==null?void 0:k.getBoundingClientRect();if(!v||v.width<=0)return;const w=(x.clientX-v.left)/v.width*100;h(w)},children:s.stops.map((x,v)=>m.jsx("div",{className:"absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.35)]",style:{left:`calc(${x.position}% - 8px)`,backgroundColor:x.color}},`stop-preview-${v}`))}),m.jsxs("div",{className:"flex min-w-0 flex-wrap items-center gap-2",children:[m.jsx(_2,{disabled:t,value:s.kind,onChange:x=>c({kind:x}),options:[{label:"Linear",value:"linear"},{label:"Radial",value:"radial"},{label:"Conic",value:"conic"}]}),m.jsxs("label",{className:"flex items-center gap-2 text-[11px] font-medium text-neutral-400",children:[m.jsx("input",{type:"checkbox",checked:s.repeating,disabled:t,onChange:x=>c({repeating:x.target.checked}),className:"h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-[#3ce6ac] focus:ring-[#3ce6ac]"}),"Repeat"]}),m.jsxs("button",{type:"button",disabled:t,onClick:()=>a({...s,stops:[...s.stops].reverse().map(x=>({...x,position:100-x.position}))}),className:"inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600",children:[m.jsx(sf,{size:12}),"Reverse"]})]})]}),(s.kind==="linear"||s.kind==="conic")&&m.jsxs("div",{className:"grid gap-1.5",children:[m.jsx("span",{className:Jn,children:s.kind==="linear"?"Angle":"Start angle"}),m.jsx(Ao,{value:s.angle,min:0,max:360,step:1,disabled:t,displayValue:`${Math.round(s.angle)}°`,formatDisplayValue:x=>`${Math.round(x)}°`,onCommit:x=>c({angle:x})})]}),s.kind==="radial"&&m.jsxs("div",{className:Li,children:[m.jsx(Oi,{label:"Shape",value:s.shape,disabled:t,onChange:x=>c({shape:x}),options:["ellipse","circle"]}),m.jsx(Oi,{label:"Size",value:s.radialSize,disabled:t,onChange:x=>c({radialSize:x}),options:["closest-side","closest-corner","farthest-side","farthest-corner"]})]}),(s.kind==="radial"||s.kind==="conic")&&m.jsxs("div",{className:Li,children:[m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Center X"}),m.jsx(Ao,{value:s.centerX,min:0,max:100,step:1,disabled:t,displayValue:`${Math.round(s.centerX)}%`,formatDisplayValue:x=>`${Math.round(x)}%`,onCommit:x=>c({centerX:x})})]}),m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Center Y"}),m.jsx(Ao,{value:s.centerY,min:0,max:100,step:1,disabled:t,displayValue:`${Math.round(s.centerY)}%`,formatDisplayValue:x=>`${Math.round(x)}%`,onCommit:x=>c({centerY:x})})]})]}),m.jsxs("div",{className:"space-y-3",children:[m.jsxs("div",{className:"flex items-center justify-between",children:[m.jsx("span",{className:Jn,children:"Stops"}),m.jsxs("button",{type:"button",disabled:t||s.stops.length>=6,onClick:()=>h(),className:"inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600",children:[m.jsx(Zg,{size:12}),"Add stop"]})]}),m.jsx("div",{className:"space-y-3",children:s.stops.map((x,v)=>m.jsxs("div",{className:"grid min-w-0 grid-cols-[minmax(0,1fr)_68px_28px] gap-2",children:[m.jsx(yl,{label:`Stop ${v+1}`,value:x.color,disabled:t,onCommit:w=>u(v,{color:w})}),m.jsx(Yg,{label:"Pos",value:`${Math.round(x.position)}%`,disabled:t,onCommit:w=>u(v,{position:Number.parseFloat(w.replace("%",""))||0})}),m.jsx("button",{type:"button",disabled:t||s.stops.length<=2,onClick:()=>p(v),className:"mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-700","aria-label":`Remove stop ${v+1}`,children:m.jsx(rf,{size:12})})]},`stop-editor-${v}`))})]})]})}function Ao({value:n,min:e,max:t,step:r,displayValue:i,formatDisplayValue:s,disabled:a,onCommit:c}){const[u,h]=d.useState(n),p=d.useRef(null),O=d.useRef(n);O.current=n,d.useEffect(()=>{h(n)},[n]),d.useEffect(()=>()=>{p.current&&clearTimeout(p.current)},[]);const x=k=>{p.current&&clearTimeout(p.current),k!==O.current&&c(k)},v=k=>{p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{k!==O.current&&c(k)},40)},w=(s==null?void 0:s(u))??i;return m.jsxs("div",{className:"grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",children:[m.jsx("input",{type:"range",min:e,max:t,step:r,value:u,disabled:a,onChange:k=>{const A=Number(k.target.value);h(A),v(A)},onMouseUp:()=>x(u),onTouchEnd:()=>x(u),onBlur:()=>x(u),className:"h-2 min-w-0 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-[#3ce6ac] disabled:cursor-not-allowed"}),m.jsx("div",{className:"min-w-[52px] rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2 text-right text-[11px] font-medium text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]",children:w})]})}function _2({options:n,value:e,disabled:t,onChange:r}){return m.jsx("div",{className:"grid min-w-0 gap-1 rounded-xl bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]",style:{gridTemplateColumns:`repeat(${n.length}, minmax(0, 1fr))`},children:n.map(i=>{const s=i.value===e;return m.jsx("button",{type:"button",disabled:t,onClick:()=>r(i.value),className:`min-w-0 truncate rounded-lg px-2 py-1.5 text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${s?"bg-neutral-800 text-white shadow-[0_1px_3px_rgba(0,0,0,0.28)]":"text-neutral-500 hover:text-neutral-200"}`,children:i.label},i.value)})})}function Oi({label:n,value:e,disabled:t,options:r,onChange:i}){const s=e&&!r.includes(e)?[e,...r]:r;return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:n}),m.jsx("div",{className:Fi,children:m.jsx("select",{value:e,disabled:t,onChange:a=>i(a.target.value),className:"min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600",children:s.map(a=>m.jsx("option",{value:a,children:a},a))})})]})}function rs({title:n,icon:e,children:t,accessory:r}){return m.jsxs("section",{className:"min-w-0 border-t border-neutral-800/80 px-4 py-4",children:[m.jsxs("div",{className:"mb-3 flex min-w-0 flex-wrap items-center justify-between gap-2",children:[m.jsxs("div",{className:"flex min-w-0 items-center gap-2.5",children:[m.jsx("span",{className:"flex-shrink-0 text-neutral-500",children:e}),m.jsx("h3",{className:"text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300",children:n})]}),r]}),t]})}function dV({swatch:n,token:e,sources:t}){return m.jsxs("div",{className:`${Fi} flex min-w-0 items-center gap-3`,children:[m.jsx("div",{className:"h-7 w-7 flex-shrink-0 rounded-lg border border-neutral-700",style:{backgroundColor:n}}),m.jsxs("div",{className:"min-w-0 flex-1",children:[m.jsx("div",{className:"truncate text-[11px] font-medium text-neutral-100",children:e}),m.jsx("div",{className:"truncate text-[11px] uppercase tracking-[0.18em] text-neutral-500",children:t.join(" · ")})]})]})}const fV=d.memo(function({projectId:e,assets:t,element:r,copiedAgentPrompt:i,onClearSelection:s,onSetStyle:a,onSetManualOffset:c,onSetManualSize:u,onSetText:h,onSetTextFieldStyle:p,onAddTextField:O,onRemoveTextField:x,onResetManualEdits:v,onAskAgent:w,onImportAssets:k,fontAssets:A=[],onImportFonts:Q}){var rt;const T=(r==null?void 0:r.computedStyles)??IL,C=d.useMemo(()=>nV(T),[T]),j=T["background-image"]??"none",M=j&&j!=="none"?j.includes("gradient")?"Gradient":"Image":"Solid",[Z,L]=d.useState(M),W=JL(j),[te,se]=d.useState(((rt=r==null?void 0:r.textFields[0])==null?void 0:rt.key)??null),ce=r!=null&&pS(r);if(d.useEffect(()=>{L(M)},[M,r==null?void 0:r.id,r==null?void 0:r.selector,j]),d.useEffect(()=>{const de=(r==null?void 0:r.textFields)??[];se(Te=>{var Ee;return Te&&de.some(ae=>ae.key===Te)?Te:((Ee=de[0])==null?void 0:Ee.key)??null})},[r==null?void 0:r.id,r==null?void 0:r.selector,r==null?void 0:r.textFields]),!r)return m.jsxs("div",{className:"flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center",children:[m.jsx(Bx,{size:18,className:"mb-3 text-neutral-600"}),m.jsx("p",{className:"text-sm font-medium text-neutral-200",children:"Select an element in the preview."}),m.jsx("p",{className:"mt-2 max-w-[260px] text-xs leading-5 text-neutral-500",children:"The inspector is tuned for element edits with safer geometry controls, color picking, and cleaner grouped layer controls."})]});const N=!r.capabilities.canEditStyles,le=!r.capabilities.canApplyManualOffset,Oe=!r.capabilities.canApplyManualSize,Ce=T.display==="flex"||T.display==="inline-flex",B=E5(T["border-radius"])??0,ke=Math.round((E5(T.opacity)??1)*100),U=xo(T["border-width"]??"")??xo(T["border-top-width"]??"")??0,z=T["border-style"]||T["border-top-style"]||"none",K=T["border-color"]||T["border-top-color"]||"rgba(255, 255, 255, 0.18)",E=zL(T["box-shadow"]),F=M5(T.filter,"blur"),re=M5(T["backdrop-filter"],"blur"),ge=T["clip-path"]||"none",Me=WL(ge),De=BL(ge),Qe=r.id?`#${r.id}`:r.selector,ne=r.capabilities.canEditStyles,ue=j2(r.element),xe=Zd(r.element),Ze=xe.width>0?xe.width:xo(T.width??"")??r.boundingBox.width,Xe=xe.height>0?xe.height:xo(T.height??"")??r.boundingBox.height,ze=(de,Te)=>{const Ee=xo(Te);if(Ee==null)return;const ae=j2(r.element);c(r,{x:de==="x"?Ee:ae.x,y:de==="y"?Ee:ae.y})},Fe=(de,Te)=>{const Ee=xo(Te);if(Ee==null||Ee<=0)return;const ae=Zd(r.element),Je=ae.width>0?ae.width:xo(T.width??"")??r.boundingBox.width,ot=ae.height>0?ae.height:xo(T.height??"")??r.boundingBox.height;u(r,{width:de==="width"?Ee:Je,height:de==="height"?Ee:ot})},tt=de=>{if(L(de),de==="Solid"){a("background-image","none");return}de==="Gradient"&&!j.includes("gradient")&&a("background-image",Qd(C2(T["background-color"])))};return m.jsxs("div",{className:"flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100",children:[m.jsxs("div",{className:"border-b border-neutral-800 px-4 py-5",children:[m.jsxs("div",{className:"flex items-start justify-between gap-4",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:Jn,children:"Document"}),m.jsx("div",{className:"mt-3 truncate text-[12px] font-semibold text-neutral-100",children:r.label}),m.jsx("div",{className:"mt-1 truncate text-[11px] text-neutral-500",children:Qe})]}),m.jsx("button",{type:"button","aria-label":"Clear selection",onClick:s,className:"flex h-9 w-9 items-center justify-center rounded-full border border-neutral-700 bg-neutral-950 text-neutral-500 shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-colors hover:border-neutral-600 hover:text-neutral-200",children:m.jsx(rf,{size:13})})]}),m.jsxs("div",{className:"mt-4 flex min-w-0 flex-wrap items-center gap-2",children:[m.jsxs("button",{type:"button",onClick:w,className:"inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-studio-accent/40 hover:text-studio-accent",children:[m.jsx(rR,{size:15}),m.jsx("span",{children:i?"Prompt copied":"Ask agent"})]}),m.jsxs("button",{type:"button",onClick:()=>v(r),title:"Reset move, size, and rotation edits",className:"inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-neutral-500 hover:text-white",children:[m.jsx(sf,{size:14}),m.jsx("span",{children:"Reset edits"})]})]})]}),m.jsxs("div",{className:"flex-1 overflow-y-auto",children:[m.jsx(rs,{title:"Layout",icon:m.jsx(iR,{size:15}),children:m.jsxs("div",{className:Li,children:[m.jsx(Zs,{label:"X",value:fl(ue.x),disabled:le,onCommit:de=>ze("x",de)}),m.jsx(Zs,{label:"Y",value:fl(ue.y),disabled:le,onCommit:de=>ze("y",de)}),m.jsx(Zs,{label:"W",value:fl(Ze),disabled:Oe,onCommit:de=>Fe("width",de)}),m.jsx(Zs,{label:"H",value:fl(Xe),disabled:Oe,onCommit:de=>Fe("height",de)})]})}),ne&&Ce&&m.jsx(rs,{title:"Flex",icon:m.jsx(Yx,{size:15}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(_2,{disabled:N,value:T["flex-direction"]||"row",onChange:de=>a("flex-direction",de),options:[{label:"→ Row",value:"row"},{label:"↓ Column",value:"column"}]}),m.jsxs("div",{className:Li,children:[m.jsx(Oi,{label:"Justify",value:T["justify-content"]||"flex-start",disabled:N,onChange:de=>a("justify-content",de),options:["flex-start","center","space-between","space-around","space-evenly","flex-end"]}),m.jsx(Oi,{label:"Align",value:T["align-items"]||"stretch",disabled:N,onChange:de=>a("align-items",de),options:["stretch","flex-start","center","flex-end","baseline"]})]}),m.jsx(Yg,{label:"Gap",value:T.gap??"0px",disabled:N,onCommit:de=>a("gap",de.endsWith("px")?de:`${de}px`)})]})}),ne&&m.jsxs(m.Fragment,{children:[m.jsx(rs,{title:"Radius",icon:m.jsx(dR,{size:15}),children:m.jsx(Ao,{value:B,min:0,max:Math.max(240,Math.ceil(B)),step:1,disabled:N,displayValue:`${Cn(B)}px`,formatDisplayValue:de=>`${Cn(de)}px`,onCommit:de=>a("border-radius",`${Cn(de)}px`)})}),m.jsx(rs,{title:"Stroke",icon:m.jsx(sR,{size:15}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:Li,children:[m.jsx(Zs,{label:"Width",value:fl(U),disabled:N,liveCommit:!0,onCommit:async de=>{const Te=XL(de,{min:0,max:200,fallback:U});if(Te)for(const[Ee,ae]of YL(Te,z))await a(Ee,ae)}}),m.jsx(Oi,{label:"Style",value:z,disabled:N,onChange:async de=>{for(const[Te,Ee]of qL(de,fl(U)))await a(Te,Ee)},options:["none","solid","dashed","dotted","double","hidden","groove","ridge","inset","outset"]})]}),m.jsx(yl,{label:"Stroke color",value:K,disabled:N,onCommit:de=>a("border-color",de)})]})}),m.jsx(rs,{title:"Effects",icon:m.jsx(Rg,{size:15}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(Oi,{label:"Shadow",value:E,disabled:N,onChange:de=>{de!=="custom"&&a("box-shadow",HL(de,T["box-shadow"]))},options:["custom","none","soft","lift","glow"]}),m.jsxs("div",{className:Li,children:[m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Layer blur"}),m.jsx(Ao,{value:F,min:0,max:Math.max(40,Math.ceil(F)),step:1,disabled:N,displayValue:`${Cn(F)}px`,formatDisplayValue:de=>`${Cn(de)}px`,onCommit:de=>a("filter",Q5(T.filter,"blur",de))})]}),m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Backdrop"}),m.jsx(Ao,{value:re,min:0,max:Math.max(60,Math.ceil(re)),step:1,disabled:N,displayValue:`${Cn(re)}px`,formatDisplayValue:de=>`${Cn(de)}px`,onCommit:de=>a("backdrop-filter",Q5(T["backdrop-filter"],"blur",de))})]})]})]})}),m.jsx(rs,{title:"Clip",icon:m.jsx(Yx,{size:15}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:Li,children:[m.jsx(Oi,{label:"Overflow",value:T.overflow||"visible",disabled:N,onChange:de=>a("overflow",de),options:["visible","hidden","clip","auto","scroll"]}),m.jsx(Oi,{label:"Mask",value:Me,disabled:N,onChange:de=>{de!=="custom"&&a("clip-path",UL(de,B,ge))},options:["custom","none","inset","circle"]})]}),m.jsxs("div",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Jn,children:"Mask inset"}),m.jsx(Ao,{value:De,min:0,max:Math.max(120,Math.ceil(De)),step:1,disabled:N,displayValue:`${Cn(De)}px`,formatDisplayValue:de=>`${Cn(de)}px`,onCommit:de=>a("clip-path",GL(de,B))})]})]})}),m.jsx(rs,{title:"Blending",icon:m.jsx(Bx,{size:15}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(Ao,{value:ke,min:0,max:100,step:1,disabled:N,displayValue:`${ke}%`,formatDisplayValue:de=>`${Math.round(de)}%`,onCommit:de=>a("opacity",Cn(de/100))}),m.jsx(Oi,{label:"Mode",value:T["mix-blend-mode"]||"normal",disabled:N,onChange:de=>a("mix-blend-mode",de),options:["normal","multiply","screen","overlay","darken","lighten"]})]})}),m.jsx(rs,{title:"Fill",icon:m.jsx(qx,{size:15}),accessory:m.jsx("div",{className:"rounded-full border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-400",children:Z}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(_2,{disabled:N,value:Z,onChange:tt,options:[{label:"Solid",value:"Solid"},{label:"Gradient",value:"Gradient"},{label:"Image",value:"Image"}]}),Z==="Solid"?m.jsx(yl,{label:"Fill color",value:T["background-color"]??"transparent",disabled:N,onCommit:de=>a("background-color",de)}):Z==="Gradient"?m.jsx(uV,{value:j!=="none"?j:Qd(C2(T["background-color"])),fallbackColor:T["background-color"],disabled:N,onCommit:de=>a("background-image",de)}):m.jsx(cV,{projectId:e,sourceFile:r.sourceFile,value:W,assets:t,disabled:N,onCommit:de=>a("background-image",de),onImportAssets:k}),!ce&&m.jsx(yl,{label:"Text color",value:T.color??"rgb(0, 0, 0)",disabled:N,onCommit:de=>a("color",de)})]})}),ce&&m.jsx(rs,{title:"Text",icon:m.jsx(oR,{size:15}),children:(()=>{const de=r.textFields,Te=de.find(Ee=>Ee.key===te)??de[0];return Te?de.length===1?m.jsxs("div",{className:"space-y-4 rounded-xl border border-neutral-800 bg-neutral-900/60 p-3",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:"truncate text-[11px] font-medium text-neutral-100",children:am(Te.value)||"Text"}),m.jsx("div",{className:"text-[10px] uppercase tracking-[0.12em] text-neutral-500",children:Te.tagName})]}),m.jsx(R5,{label:"Content",value:Te.value,disabled:!1,onCommit:Ee=>h(Ee,Te.key)},Te.key),m.jsx(yl,{label:"Text color",value:lm(Te,T),disabled:!1,onCommit:Ee=>p(Te.key,"color",Ee)}),m.jsxs("div",{className:Li,children:[m.jsx(Zs,{label:"Size",value:Te.computedStyles["font-size"]||T["font-size"]||"16px",disabled:!1,liveCommit:!0,onCommit:Ee=>p(Te.key,"font-size",Ee)}),m.jsx(I5,{value:Te.computedStyles["font-weight"]||T["font-weight"]||"400",disabled:!1,onCommit:Ee=>p(Te.key,"font-weight",Ee)})]}),m.jsx(D5,{value:Te.computedStyles["font-family"]||T["font-family"]||"inherit",disabled:!1,importedFonts:A,onImportFonts:Q,onCommit:Ee=>p(Te.key,"font-family",Ee)}),m.jsx(X5,{field:Te,inheritedStyles:T,disabled:!1,onCommit:(Ee,ae)=>p(Te.key,Ee,ae)})]}):m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{className:"grid gap-1.5",children:[m.jsxs("div",{className:"flex min-w-0 flex-wrap items-center justify-between gap-2",children:[m.jsx("span",{className:Jn,children:"Text layers"}),m.jsxs("button",{type:"button",onClick:()=>{Promise.resolve(O(Te.key)).then(Ee=>{Ee&&se(Ee)})},className:"inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",children:[m.jsx(Zg,{size:12,className:"flex-shrink-0"}),m.jsx("span",{className:"truncate",children:"Add text"})]})]}),m.jsx("div",{className:"grid gap-2",children:de.map((Ee,ae)=>{const Je=Ee.key===Te.key;return m.jsx("button",{type:"button",onClick:()=>se(Ee.key),className:`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${Je?"border-studio-accent/50 bg-studio-accent/10":"border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"}`,children:m.jsxs("div",{className:"flex min-w-0 items-center justify-between gap-2",children:[m.jsxs("div",{className:"flex min-w-0 items-center gap-2",children:[m.jsx("span",{className:"h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950",style:{backgroundColor:lm(Ee,T)}}),m.jsx("span",{className:"min-w-0 truncate text-[11px] font-medium text-neutral-100",children:am(Ee.value)||`Text ${ae+1}`})]}),m.jsx("span",{className:"flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-neutral-500",children:Ee.tagName})]})},Ee.key)})})]}),m.jsxs("div",{className:"space-y-4 rounded-xl border border-neutral-800 bg-neutral-900/60 p-3",children:[m.jsxs("div",{className:"flex min-w-0 items-center justify-between gap-2",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:"truncate text-[11px] font-medium text-neutral-100",children:am(Te.value)||"Text"}),m.jsx("div",{className:"text-[10px] uppercase tracking-[0.12em] text-neutral-500",children:Te.tagName})]}),m.jsx("button",{type:"button",onClick:()=>x(Te.key),className:"inline-flex h-7 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",children:"Remove"})]}),m.jsx(R5,{label:"Content",value:Te.value,disabled:!1,autoFocus:!0,onCommit:Ee=>h(Ee,Te.key)},Te.key),m.jsx(yl,{label:"Text color",value:lm(Te,T),disabled:!1,onCommit:Ee=>p(Te.key,"color",Ee)}),m.jsxs("div",{className:Li,children:[m.jsx(Zs,{label:"Size",value:Te.computedStyles["font-size"]||"16px",disabled:!1,liveCommit:!0,onCommit:Ee=>p(Te.key,"font-size",Ee)}),m.jsx(I5,{value:Te.computedStyles["font-weight"]||"400",disabled:!1,onCommit:Ee=>p(Te.key,"font-weight",Ee)})]}),m.jsx(D5,{value:Te.computedStyles["font-family"]||T["font-family"]||"inherit",disabled:!1,importedFonts:A,onImportFonts:Q,onCommit:Ee=>p(Te.key,"font-family",Ee)}),m.jsx(X5,{field:Te,inheritedStyles:T,disabled:!1,onCommit:(Ee,ae)=>p(Te.key,Ee,ae)})]})]}):null})()}),C.length>0&&m.jsx(rs,{title:"Selection colors",icon:m.jsx(qx,{size:15}),children:m.jsx("div",{className:"space-y-3",children:C.map(de=>m.jsx(dV,{swatch:de.swatch,token:de.token,sources:de.sources},`${de.swatch}-${de.token}`))})})]})]})]})}),ko=".hyperframes/studio-motion.json",um="studio-motion",Pu="data-hf-studio-motion",I2="data-hf-studio-motion-original-transform",D2="data-hf-studio-motion-original-opacity",X2="data-hf-studio-motion-original-visibility",A1=["none","power1.in","power1.out","power1.inOut","power2.in","power2.out","power2.inOut","power3.in","power3.out","power3.inOut","power4.in","power4.out","power4.inOut","sine.in","sine.out","sine.inOut","expo.in","expo.out","expo.inOut","circ.in","circ.out","circ.inOut","back.in(1.7)","back.out(1.7)","back.inOut(1.7)","elastic.out(1, 0.45)","bounce.out"],qc={x1:.215,y1:.61,x2:.355,y2:1},hV={none:{x1:0,y1:0,x2:1,y2:1},"power1.in":{x1:.55,y1:.085,x2:.68,y2:.53},"power1.out":{x1:.25,y1:.46,x2:.45,y2:.94},"power1.inOut":{x1:.455,y1:.03,x2:.515,y2:.955},"power2.in":{x1:.55,y1:.055,x2:.675,y2:.19},"power2.out":{x1:.215,y1:.61,x2:.355,y2:1},"power2.inOut":{x1:.645,y1:.045,x2:.355,y2:1},"power3.in":{x1:.895,y1:.03,x2:.685,y2:.22},"power3.out":{x1:.165,y1:.84,x2:.44,y2:1},"power3.inOut":{x1:.77,y1:0,x2:.175,y2:1},"power4.in":{x1:.755,y1:.05,x2:.855,y2:.06},"power4.out":{x1:.23,y1:1,x2:.32,y2:1},"power4.inOut":{x1:.86,y1:0,x2:.07,y2:1},"sine.in":{x1:.47,y1:0,x2:.745,y2:.715},"sine.out":{x1:.39,y1:.575,x2:.565,y2:1},"sine.inOut":{x1:.445,y1:.05,x2:.55,y2:.95},"expo.in":{x1:.95,y1:.05,x2:.795,y2:.035},"expo.out":{x1:.19,y1:1,x2:.22,y2:1},"expo.inOut":{x1:1,y1:0,x2:0,y2:1},"circ.in":{x1:.6,y1:.04,x2:.98,y2:.335},"circ.out":{x1:.075,y1:.82,x2:.165,y2:1},"circ.inOut":{x1:.785,y1:.135,x2:.15,y2:.86},"back.in(1.7)":{x1:.6,y1:-.28,x2:.735,y2:.045},"back.out(1.7)":{x1:.175,y1:.885,x2:.32,y2:1.275},"back.inOut(1.7)":{x1:.68,y1:-.55,x2:.265,y2:1.55},"elastic.out(1, 0.45)":{x1:.16,y1:1.32,x2:.28,y2:.86},"bounce.out":{x1:.34,y1:1.56,x2:.64,y2:.74}},pV=/^M\s*0\s*,\s*0\s*C\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s+1\s*,\s*1\s*$/i;function Tl(){return{version:1,motions:[]}}function z5(n,e){return Number.isFinite(n)&&n>0?n:e}function mV(n,e){return Number.isFinite(n)&&n>=0?n:e}function gV(n){return n.trim()||"none"}function Uc(n){return Math.round(n*1e3)/1e3}function $1(n,e,t,r){return Number.isFinite(n)?Math.min(t,Math.max(e,n)):r}function qg(n){return{x1:Uc($1(n.x1??qc.x1,0,1,.215)),y1:Uc($1(n.y1??qc.y1,-.6,1.6,.61)),x2:Uc($1(n.x2??qc.x2,0,1,.355)),y2:Uc($1(n.y2??qc.y2,-.6,1.6,1))}}function H5(n){if(!n)return null;const e=n.trim().match(pV);if(!e)return null;const t={x1:Number.parseFloat(e[1]??""),y1:Number.parseFloat(e[2]??""),x2:Number.parseFloat(e[3]??""),y2:Number.parseFloat(e[4]??"")};return Object.values(t).every(Number.isFinite)?qg(t):null}function C1(n){const e=Uc(n);return Object.is(e,-0)?"0":`${e}`}function QS(n){const e=qg(n);return`M0,0 C${C1(e.x1)},${C1(e.y1)} ${C1(e.x2)},${C1(e.y2)} 1,1`}function jS(n){return hV[n]??qc}function OV(n,e){const t=mV(e.start,0),r=z5(e.duration,.6),i=z5(e.distance,32),s=gV(e.ease),a=e.direction??"up",c={start:t,duration:r,ease:s,customEase:e.customEase};if(n==="pop")return{...c,from:{scale:.88,autoAlpha:0},to:{scale:1,autoAlpha:1}};if(n==="slide"){const u=a==="right"?-i:a==="left"?i:0,h=a==="down"?-i:a==="up"?i:0;return{...c,from:{x:u,y:h,autoAlpha:0},to:{x:0,y:0,autoAlpha:1}}}return{...c,from:{y:a==="down"?-i:i,autoAlpha:0},to:{y:0,autoAlpha:1}}}function Nd(n){return typeof n=="number"&&Number.isFinite(n)?n:null}function W5(n){if(!n||typeof n!="object")return null;const e=n,t={};for(const r of["x","y","scale","rotation","opacity","autoAlpha"]){const i=Nd(e[r]);i!=null&&(t[r]=i)}return Object.keys(t).length>0?t:null}function xV(n){if(!n||typeof n!="object")return null;const e=n,t=typeof e.sourceFile=="string"?e.sourceFile:"";if(!t)return null;const r=typeof e.selector=="string"?e.selector:void 0,i=typeof e.id=="string"?e.id:void 0;return!r&&!i?null:{sourceFile:t,selector:r,selectorIndex:Nd(e.selectorIndex)??void 0,id:i}}function yV(n){if(!n||typeof n!="object")return;const e=n,t=typeof e.id=="string"?e.id.trim():"",r=typeof e.data=="string"?e.data.trim():"";if(!(!t||!r))return{id:t,data:r}}function vV(n){if(!n||typeof n!="object")return null;const e=n;if(e.kind!=="gsap-motion")return null;const t=xV(e.target);if(!t)return null;const r=Nd(e.start),i=Nd(e.duration);if(r==null||i==null||r<0||i<=0)return null;const s=typeof e.ease=="string"&&e.ease.trim()?e.ease.trim():"none",a=W5(e.from),c=W5(e.to);return!a||!c?null:{kind:"gsap-motion",target:t,start:r,duration:i,ease:s,customEase:yV(e.customEase),from:a,to:c,updatedAt:typeof e.updatedAt=="string"?e.updatedAt:void 0}}function B5(n){if(!n.trim())return Tl();try{const e=JSON.parse(n);if(!e||typeof e!="object")return Tl();const t=e.motions;return Array.isArray(t)?{version:1,motions:t.map(vV).filter(r=>r!==null)}:Tl()}catch{return Tl()}}function dm(n){return`${JSON.stringify(n,null,2)}
-`}function bV(n){return n.trim().replace(/\\/g,"/").replace(/^\.?\//,"")}function wV(n){if(!n)return!1;const e=bV(n);return e===ko||e.endsWith(`/${ko}`)}function ZS(n){return{sourceFile:n.sourceFile||"index.html",selector:n.selector,selectorIndex:n.selectorIndex,id:n.id??void 0}}function Ld(n){return[n.sourceFile,n.id?`id:${n.id}`:"",n.selector?`selector:${n.selector}`:"",n.selectorIndex!=null?`index:${n.selectorIndex}`:""].join("|")}function RS(n,e){const t=ZS(e);return n.target.sourceFile!==t.sourceFile?!1:n.target.id&&t.id&&n.target.id===t.id?!0:Ld(n.target)===Ld(t)}function SV(n,e,t){const r=ZS(e),i={kind:"gsap-motion",target:r,...t,updatedAt:new Date().toISOString()};return{version:1,motions:[...n.motions.filter(s=>Ld(s.target)!==Ld(r)),i]}}function kV(n,e){return{version:1,motions:n.motions.filter(t=>!RS(t,e))}}function PV(n,e){return n.motions.find(t=>RS(t,e))??null}function AV(n,e){let t=n;for(;t;){const r=t.getAttribute("data-composition-file")??t.getAttribute("data-composition-src");if(r)return r;t=t.parentElement}return e??"index.html"}function Y5(n,e,t){return AV(n,t)===e}function $V(n,e){var i;const t=s=>{var c;const a=(c=s.ownerDocument.defaultView)==null?void 0:c.HTMLElement;return!!(a&&s instanceof a)},r=(i=e.match(/^\.([A-Za-z0-9_-]+)$/))==null?void 0:i[1];return r?Array.from(n.getElementsByTagName("*")).filter(s=>t(s)&&s.classList.contains(r)):/^[A-Za-z][A-Za-z0-9-]*$/.test(e)?Array.from(n.getElementsByTagName(e)).filter(t):Array.from(n.querySelectorAll(e)).filter(t)}function CV(n,e,t){var i;const r=(i=n.defaultView)==null?void 0:i.HTMLElement;if(e.id){const s=n.getElementById(e.id);if(r&&s instanceof r&&Y5(s,e.sourceFile,t))return s}if(!e.selector)return null;try{return $V(n,e.selector).filter(a=>Y5(a,e.sourceFile,t))[Math.max(0,Math.floor(e.selectorIndex??0))]??null}catch{return null}}function EV(n){n.hasAttribute(Pu)||(n.setAttribute(I2,n.style.transform),n.setAttribute(D2,n.style.opacity),n.setAttribute(X2,n.style.visibility))}function TV(n,e){var t;n.hasAttribute(Pu)&&((t=e==null?void 0:e.set)==null||t.call(e,n,{clearProps:"transform,opacity,visibility"}),n.style.transform=n.getAttribute(I2)??"",n.style.opacity=n.getAttribute(D2)??"",n.style.visibility=n.getAttribute(X2)??"",n.removeAttribute(Pu),n.removeAttribute(I2),n.removeAttribute(D2),n.removeAttribute(X2))}function MV(n,e){var r;const t=(r=n.defaultView)==null?void 0:r.HTMLElement;if(t)for(const i of Array.from(n.querySelectorAll(`[${Pu}]`)))i instanceof t&&TV(i,e)}function QV(n,e){var i,s;const t=e.customEase;if(!t)return e.ease;const r=n.CustomEase;if(typeof(r==null?void 0:r.create)!="function")return e.ease;try{return(s=(i=n.gsap)==null?void 0:i.registerPlugin)==null||s.call(i,r),r.create(t.id,t.data),t.id}catch{return e.ease}}function jV(n,e){var t,r,i,s;try{const a=(r=(t=n.__player)==null?void 0:t.getTime)==null?void 0:r.call(t);if(typeof a=="number"&&Number.isFinite(a))return Math.max(0,a)}catch{}try{const a=(s=(i=n.__timeline)==null?void 0:i.time)==null?void 0:s.call(i);if(typeof a=="number"&&Number.isFinite(a))return Math.max(0,a)}catch{}return 0}function ZV(n,e,t=null,r){var h,p,O,x,v;const i=n.defaultView;if(!i)return 0;const s=i.gsap;if(i.__timelines=i.__timelines??{},(p=(h=i.__timelines[um])==null?void 0:h.kill)==null||p.call(h),delete i.__timelines[um],MV(n,s),!(s!=null&&s.timeline)||e.motions.length===0)return 0;const a=s.timeline({paused:!0,defaults:{overwrite:"auto"}});let c=0;for(const w of e.motions){const k=CV(n,w.target,t);if(!k||!a.fromTo)continue;EV(k),k.setAttribute(Pu,"true");const A={...w.from},Q={...w.to,duration:w.duration,ease:QV(i,w),overwrite:"auto",immediateRender:!1};a.fromTo(k,A,Q,w.start),c+=1}if(c===0)return(O=a.kill)==null||O.call(a),0;i.__timelines[um]=a,(x=a.pause)==null||x.call(a);const u=jV(i);return a.totalTime?a.totalTime(u,!1):(v=a.time)==null||v.call(a,u),c}function RV(n,e){const t=n;if(t.__hfStudioMotionApply=()=>(e(),0),t.__hfStudioMotionWrapped)return!1;const r=t.__player;if(!r)return!1;const i=s=>{const a=r[s];typeof a=="function"&&(r[s]=c=>{var u;a.call(r,c),(u=t.__hfStudioMotionApply)==null||u.call(t)})};return i("renderSeek"),i("seek"),t.__hfStudioMotionWrapped=!0,!0}const NS="min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600",Of="text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500",q5="grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3",NV=[{label:"Fade Up",value:"fade-up"},{label:"Slide",value:"slide"},{label:"Pop",value:"pop"}],LV=["up","down","left","right"];function ga(n){const e=Math.round(n*100)/100;return Number.isInteger(e)?`${e}`:e.toFixed(2).replace(/0+$/,"").replace(/\.$/,"")}function fm(n,e,t,r){return n==null||!Number.isFinite(n)?r:Math.min(t,Math.max(e,n))}function hm(n){const e=Number.parseFloat(n.trim());return Number.isFinite(e)?e:null}function VV(n){return n?Math.max(Math.abs(n.from.x??0),Math.abs(n.from.y??0),1):32}function _V(n){return n?n.from.scale!=null||n.to.scale!=null?"pop":n.from.x!=null||n.to.x!=null?"slide":"fade-up":"fade-up"}function IV(n){if(!n)return"up";const e=n.from.x??0,t=n.from.y??0;return Math.abs(e)>Math.abs(t)?e<0?"right":"left":t<0?"down":"up"}function U5(n){return`studio-${(n.id||n.selector||n.label||"layer").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")||"layer"}-ease`}function DV({value:n,disabled:e,onCommit:t}){const[r,i]=d.useState(n),s=d.useRef(!1);d.useEffect(()=>{s.current||i(n)},[n]);const a=()=>{s.current=!1;const c=r.trim();c!==n&&t(c)};return m.jsx("input",{type:"text",value:r,disabled:e,onFocus:()=>{s.current=!0},onChange:c=>i(c.target.value),onBlur:a,onKeyDown:c=>{c.key==="Enter"&&c.target.blur()},className:"w-full min-w-0 bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"})}function E1({label:n,value:e,disabled:t,onCommit:r}){return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Of,children:n}),m.jsx("div",{className:NS,children:m.jsx(DV,{value:e,disabled:t,onCommit:r})})]})}function XV({value:n,options:e,onChange:t}){return m.jsx("div",{className:"grid grid-cols-3 gap-1 rounded-2xl border border-neutral-800 bg-neutral-950 p-1",children:e.map(r=>m.jsx("button",{type:"button",onClick:()=>t(r.value),className:`h-9 rounded-xl text-[11px] font-semibold transition-colors ${r.value===n?"bg-neutral-800 text-white shadow-sm":"text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200"}`,children:r.label},r.value))})}function G5({label:n,value:e,options:t,onChange:r}){return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Of,children:n}),m.jsx("div",{className:NS,children:m.jsx("select",{value:e,onChange:i=>r(i.target.value),className:"w-full min-w-0 appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none",children:t.map(i=>m.jsx("option",{value:i,children:i},i))})})]})}function K5({title:n,children:e,accessory:t}){return m.jsxs("section",{className:"border-b border-neutral-800 px-4 py-5",children:[m.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3",children:[m.jsxs("div",{className:"flex items-center gap-3",children:[m.jsx(Rg,{size:15,className:"text-neutral-500"}),m.jsx("h3",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-neutral-300",children:n})]}),t]}),e]})}function FV(n,e){const t=1-n,r=t*t,i=n*n;return{x:3*r*n*e.x1+3*t*i*e.x2+i*n,y:3*r*n*e.y1+3*t*i*e.y2+i*n}}function zV(n,e){const t=[];for(let r=0;r<=48;r+=1){const i=e(FV(r/48,n));t.push(`${r===0?"M":"L"}${i.x.toFixed(2)},${i.y.toFixed(2)}`)}return t.join(" ")}function HV({points:n,onCommit:e}){const t=d.useRef(null),[r,i]=d.useState(n),s=d.useRef(null);d.useEffect(()=>{i(n)},[n]);const a=324,c=214,u={left:46,top:24,width:242,height:146},h=-.4,p=1.4,O=M=>({x:u.left+M.x*u.width,y:u.top+(p-M.y)/(p-h)*u.height}),x=M=>{var te;const Z=(te=t.current)==null?void 0:te.getBoundingClientRect();if(!Z)return null;const L=(M.clientX-Z.left)/Z.width*a,W=(M.clientY-Z.top)/Z.height*c;return qg({x1:s.current==="p1"?(L-u.left)/u.width:r.x1,y1:s.current==="p1"?p-(W-u.top)/u.height*(p-h):r.y1,x2:s.current==="p2"?(L-u.left)/u.width:r.x2,y2:s.current==="p2"?p-(W-u.top)/u.height*(p-h):r.y2})},v=O({x:0,y:0}),w=O({x:1,y:1}),k=O({x:r.x1,y:r.y1}),A=O({x:r.x2,y:r.y2}),Q=zV(r,O),T=M=>{if(!s.current)return;M.preventDefault();const Z=x(M);Z&&i(Z)},C=()=>{s.current&&(s.current=null,e(r))},j=(M,Z)=>{Z.preventDefault(),Z.stopPropagation(),s.current=M,Z.currentTarget.setPointerCapture(Z.pointerId)};return m.jsxs("div",{className:"overflow-hidden rounded-2xl border border-neutral-800 bg-black/40",children:[m.jsxs("div",{className:"flex items-center justify-between gap-3 border-b border-neutral-800 px-3 py-2",children:[m.jsxs("div",{children:[m.jsx("div",{className:Of,children:"CustomEase"}),m.jsx("div",{className:"mt-1 font-mono text-[10px] text-neutral-500",children:QS(r)})]}),m.jsxs("button",{type:"button",onClick:()=>{const M=jS("power3.out");i(M),e(M)},className:"inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-800 bg-neutral-950 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-100",children:[m.jsx(sf,{size:13}),"Reset"]})]}),m.jsxs("svg",{ref:t,viewBox:`0 0 ${a} ${c}`,className:"block w-full select-none touch-none",onPointerMove:T,onPointerUp:C,onPointerCancel:C,children:[m.jsx("rect",{x:"0",y:"0",width:a,height:c,fill:"transparent"}),[0,.5,1].map(M=>{const Z=O({x:0,y:M});return m.jsxs("g",{children:[m.jsx("line",{x1:u.left,x2:u.left+u.width,y1:Z.y,y2:Z.y,stroke:"rgba(255,255,255,0.12)",strokeDasharray:"5 8"}),m.jsx("text",{x:u.left-12,y:Z.y+4,textAnchor:"end",className:"fill-neutral-500 text-[10px] font-semibold",children:M})]},M)}),m.jsx("line",{x1:u.left,x2:u.left+u.width,y1:u.top+u.height,y2:u.top+u.height,stroke:"rgba(255,255,255,0.18)"}),m.jsx("line",{x1:u.left,x2:u.left,y1:u.top,y2:u.top+u.height,stroke:"rgba(255,255,255,0.18)"}),m.jsx("line",{x1:v.x,y1:v.y,x2:k.x,y2:k.y,stroke:"rgba(255,221,87,0.34)"}),m.jsx("line",{x1:w.x,y1:w.y,x2:A.x,y2:A.y,stroke:"rgba(255,221,87,0.34)"}),m.jsx("path",{d:Q,fill:"none",stroke:"#ffdd57",strokeWidth:"4",strokeLinecap:"round"}),m.jsx("circle",{cx:v.x,cy:v.y,r:"5",fill:"#ffdd57"}),m.jsx("circle",{cx:w.x,cy:w.y,r:"5",fill:"#ffdd57"}),m.jsx("circle",{cx:k.x,cy:k.y,r:"9",fill:"#141414",stroke:"#ffdd57",strokeWidth:"4",className:"cursor-grab active:cursor-grabbing",onPointerDown:M=>j("p1",M)}),m.jsx("circle",{cx:A.x,cy:A.y,r:"9",fill:"#141414",stroke:"#ffdd57",strokeWidth:"4",className:"cursor-grab active:cursor-grabbing",onPointerDown:M=>j("p2",M)}),m.jsx("text",{x:k.x+12,y:k.y-10,className:"fill-neutral-400 text-[10px] font-semibold",children:"P1"}),m.jsx("text",{x:A.x+12,y:A.y-10,className:"fill-neutral-400 text-[10px] font-semibold",children:"P2"})]}),m.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-800 p-3",children:[m.jsxs("div",{className:"rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400",children:["P1 ",ga(r.x1),", ",ga(r.y1)]}),m.jsxs("div",{className:"rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400",children:["P2 ",ga(r.x2),", ",ga(r.y2)]})]})]})}const WV=d.memo(function({element:e,motion:t,onClearSelection:r,onSetMotion:i,onClearMotion:s}){var j;const a=_V(t),c=IV(t),u=(t==null?void 0:t.start)??0,h=(t==null?void 0:t.duration)??.6,p=VV(t),O=(t==null?void 0:t.ease)??"power3.out",x=((j=t==null?void 0:t.customEase)==null?void 0:j.data)??"",v=x.trim().length>0,w=d.useMemo(()=>H5(x)??jS(A1.includes(O)?O:"power3.out"),[O,x]);if(!e)return m.jsxs("div",{className:"flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center",children:[m.jsx(Rg,{size:18,className:"mb-3 text-neutral-600"}),m.jsx("p",{className:"text-sm font-medium text-neutral-200",children:"Select an element for motion."}),m.jsx("p",{className:"mt-2 max-w-[260px] text-xs leading-5 text-neutral-500",children:"Timeline layers and inspector selections can receive Studio-authored GSAP motion."})]});const k=e.id?`#${e.id}`:e.selector,A=v?"CustomEase":A1.includes(O)?O:"power3.out",Q=v?["CustomEase",...A1]:A1,T=M=>{var te;const Z=M.customEaseData??x,L=Z.trim()?{id:((te=t==null?void 0:t.customEase)==null?void 0:te.id)??U5(e),data:Z.trim()}:void 0,W=L?L.id:(M.ease??O).trim()||"none";i(e,OV(M.preset??a,{start:fm(M.start??u,0,3600,0),duration:fm(M.duration??h,.01,3600,.6),distance:fm(M.distance??p,1,2e3,32),direction:M.direction??c,ease:W,customEase:L}))},C=M=>{T({ease:U5(e),customEaseData:QS(M)})};return m.jsxs("div",{className:"flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100",children:[m.jsx("div",{className:"border-b border-neutral-800 px-4 py-5",children:m.jsxs("div",{className:"flex items-start justify-between gap-4",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:Of,children:"Motion Target"}),m.jsx("div",{className:"mt-3 truncate text-[12px] font-semibold text-neutral-100",children:e.label}),m.jsx("div",{className:"mt-1 truncate text-[11px] text-neutral-500",children:k})]}),m.jsx("button",{type:"button","aria-label":"Clear selection",onClick:r,className:"flex h-9 w-9 items-center justify-center rounded-full border border-neutral-700 bg-neutral-950 text-neutral-500 shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-colors hover:border-neutral-600 hover:text-neutral-200",children:m.jsx(rf,{size:13})})]})}),m.jsxs("div",{className:"flex-1 overflow-y-auto",children:[m.jsx(K5,{title:"GSAP Motion",accessory:m.jsx("div",{className:"rounded-full border border-studio-accent/40 bg-studio-accent/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-studio-accent",children:"GSAP"}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(XV,{value:a,onChange:M=>T({preset:M}),options:NV}),m.jsxs("div",{className:q5,children:[m.jsx(G5,{label:"Direction",value:c,onChange:M=>T({direction:M}),options:LV}),m.jsx(G5,{label:"Ease",value:A,onChange:M=>{M!=="CustomEase"&&T({ease:M,customEaseData:""})},options:Q})]}),m.jsxs("div",{className:q5,children:[m.jsx(E1,{label:"Start",value:ga(u),onCommit:M=>T({start:hm(M)??0})}),m.jsx(E1,{label:"Duration",value:ga(h),onCommit:M=>T({duration:hm(M)??.6})}),m.jsx(E1,{label:"Distance",value:ga(p),onCommit:M=>T({distance:hm(M)??32})})]})]})}),m.jsx(K5,{title:"Ease Curve",accessory:m.jsx("div",{className:"rounded-full border border-yellow-400/30 bg-yellow-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-yellow-300",children:"CustomEase"}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(HV,{points:w,onCommit:C}),m.jsx(E1,{label:"CustomEase path",value:x,onCommit:M=>{const Z=H5(M);Z&&C(Z)}}),m.jsx("div",{className:"flex justify-end",children:m.jsx("button",{type:"button",onClick:()=>s(e),disabled:!t,className:"inline-flex h-8 items-center rounded-xl border border-neutral-700 bg-neutral-950 px-3 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:border-neutral-800 disabled:text-neutral-600",children:"Clear motion"})})]})})]})]})}),BV=100,J5=.01,YV=1e-6;function ey(n){return Number.isFinite(n.x)&&Number.isFinite(n.y)}function ty(n){return Math.hypot(n.x,n.y)}function ny(n){return Number.isFinite(n.left)&&Number.isFinite(n.top)&&Number.isFinite(n.width)&&Number.isFinite(n.height)}function qV(n){const e=n.document.documentElement,t=n.innerWidth||e.clientWidth||1,r=n.innerHeight||e.clientHeight||1;return{width:t>0?t:1,height:r>0?r:1}}function UV(n){try{const e=n.frameElement;if(!e)return null;const t=e.ownerDocument.defaultView,r=t==null?void 0:t.HTMLElement;return r&&e instanceof r?e:null}catch{return null}}function pm(n){const e=n.getBoundingClientRect();if(!ny(e)||e.width<=0&&e.height<=0)return null;let t={x:e.left+e.width/2,y:e.top+e.height/2},r=n.ownerDocument.defaultView;for(;r;){const i=UV(r);if(!i)break;const s=i.getBoundingClientRect();if(!ny(s)||s.width<=0||s.height<=0)return null;const a=qV(r);t={x:s.left+t.x*(s.width/a.width),y:s.top+t.y*(s.height/a.height)},r=i.ownerDocument.defaultView}return t}function GV(n){const e=n.a*n.d-n.b*n.c;return!Number.isFinite(e)||Math.abs(e)<YV?null:{a:n.d/e,b:-n.b/e,c:-n.c/e,d:n.a/e}}function KV(n,e){return{x:n.a*e.x+n.c*e.y,y:n.b*e.x+n.d*e.y}}function JV(n,e,t={}){const r=t.probeSize??BV;if(!Number.isFinite(r)||r<=0)return{ok:!1,reason:"Invalid movement probe size."};const i=zg(n);try{G1(n,e);const s=pm(n);if(!s)return{ok:!1,reason:"Element has no measurable box."};G1(n,{x:e.x+r,y:e.y});const a=pm(n);if(!a)return{ok:!1,reason:"Element X movement could not be measured."};G1(n,{x:e.x,y:e.y+r});const c=pm(n);if(!c)return{ok:!1,reason:"Element Y movement could not be measured."};const u={x:(a.x-s.x)/r,y:(a.y-s.y)/r},h={x:(c.x-s.x)/r,y:(c.y-s.y)/r};if(!ey(u)||!ey(h)||ty(u)<J5||ty(h)<J5)return{ok:!1,reason:"Element movement response is too small to measure."};const p={a:u.x,b:u.y,c:h.x,d:h.y},O=GV(p);return O?{ok:!0,matrix:O}:{ok:!1,reason:"Element movement response is not invertible."}}finally{ma(n,i)}}function e_(n){const e=KV(n.screenToOffset,{x:n.dx,y:n.dy});return{x:n.initialOffset.x+e.x,y:n.initialOffset.y+e.y}}function ry(n){const e=j2(n.element),t=zg(n.element),r=mS(n.element),i=JV(n.element,e);return i.ok?{ok:!0,member:{key:n.key,selection:n.selection,element:n.element,initialOffset:e,initialPathOffset:t,gestureToken:r,screenToOffset:i.matrix,originRect:n.rect}}:(ma(n.element,t),Ni(n.element,r),{ok:!1,reason:i.reason,selection:n.selection})}function LS(n,e,t){return e_({initialOffset:n.initialOffset,screenToOffset:n.screenToOffset,dx:e,dy:t})}function iy(n,e,t){const r=LS(n,e,t);return G1(n.element,r),r}function sy(n,e,t){const r=LS(n,e,t);return wS(n.element,r),r}function t_(n){ma(n.element,n.initialPathOffset),Ni(n.element,n.gestureToken)}function oy(n){for(const e of n)t_(e)}function ay(n){for(const e of n)Ni(e.element,e.gestureToken)}function T1(n,e,t){const r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),s=e.contentDocument,a=(s==null?void 0:s.querySelector("[data-composition-id]"))??(s==null?void 0:s.documentElement)??null,c=a==null?void 0:a.getBoundingClientRect(),u=c==null?void 0:c.width,h=c==null?void 0:c.height;if(!u||!h)return null;const p=t.getBoundingClientRect(),O=r.width/u,x=r.height/h,v=n_(t),w=v==null?void 0:v.getBoundingClientRect(),k=r_({rootScaleX:O,rootScaleY:x,sourceRectWidth:w==null?void 0:w.width,sourceRectHeight:w==null?void 0:w.height,sourceWidth:ly((v==null?void 0:v.getAttribute("data-width"))??null),sourceHeight:ly((v==null?void 0:v.getAttribute("data-height"))??null)});return{left:r.left-i.left+(p.left-c.left)*O,top:r.top-i.top+(p.top-c.top)*x,width:p.width*O,height:p.height*x,editScaleX:k.scaleX,editScaleY:k.scaleY}}function ly(n){if(!n)return null;const e=Number.parseFloat(n);return Number.isFinite(e)&&e>0?e:null}function n_(n){let e=n;for(;e;){if(e.hasAttribute("data-composition-file")||e.hasAttribute("data-composition-src"))return e;e=e.parentElement}return null}function r_(n){const e=n.rootScaleX>0?n.rootScaleX:1,t=n.rootScaleY>0?n.rootScaleY:1,r=n.sourceRectWidth&&n.sourceRectWidth>0&&n.sourceWidth&&n.sourceWidth>0?n.sourceRectWidth*e/n.sourceWidth:e,i=n.sourceRectHeight&&n.sourceRectHeight>0&&n.sourceHeight&&n.sourceHeight>0?n.sourceRectHeight*t/n.sourceHeight:t;return{scaleX:r>0?r:e,scaleY:i>0?i:t}}const M1=4,Q1=20,j1=.5,i_=.05,cy=15;function K1(n,e){return n===e?!0:!n||!e?!1:Math.abs(n.left-e.left)<j1&&Math.abs(n.top-e.top)<j1&&Math.abs(n.width-e.width)<j1&&Math.abs(n.height-e.height)<j1&&Math.abs(n.editScaleX-e.editScaleX)<.001&&Math.abs(n.editScaleY-e.editScaleY)<.001}function uy(n,e){return n===e?!0:n.length!==e.length?!1:n.every((t,r)=>{const i=e[r];return!!(i&&t.key===i.key&&t.element===i.element&&t.selection===i.selection&&K1(t.rect,i.rect))})}function s_(n){const e=n[0];if(!e)return null;let t=e.left,r=e.top,i=e.left+e.width,s=e.top+e.height;for(const a of n.slice(1))t=Math.min(t,a.left),r=Math.min(r,a.top),i=Math.max(i,a.left+a.width),s=Math.max(s,a.top+a.height);return{left:t,top:r,width:i-t,height:s-r,editScaleX:1,editScaleY:1}}function o_(n){return n.filter(e=>!n.some(t=>t!==e&&t.element.contains(e.element)))}function yo(n){return[n.sourceFile??"",n.id??"",n.selector??"",n.selectorIndex??""].join("|")}function a_(n){n==null||n.focus({preventScroll:!0})}function l_(n){const e=n.scaleX>0?n.scaleX:1,t=n.scaleY>0?n.scaleY:1;if(n.uniform){const r=n.dx/e,i=n.dy/t,s=Math.abs(r)>=Math.abs(i)?r:i,a=Math.max(1,Math.max(n.actualWidth,n.actualHeight)+s);return{overlayWidth:Math.max(Q1,a*e),overlayHeight:Math.max(Q1,a*t),width:a,height:a}}return{overlayWidth:Math.max(Q1,n.originWidth+n.dx),overlayHeight:Math.max(Q1,n.originHeight+n.dy),width:Math.max(1,n.actualWidth+n.dx/e),height:Math.max(1,n.actualHeight+n.dy/t)}}function dy(n,e,t,r){return Math.atan2(r-e,t-n)*180/Math.PI}function c_(n){return((n+180)%360+360)%360-180}function u_(n){return Math.round(n*10)/10}function fy(n){const e=dy(n.centerX,n.centerY,n.startX,n.startY),t=dy(n.centerX,n.centerY,n.currentX,n.currentY),r=c_(t-e),i=n.actualAngle+r;return{angle:n.snap?Math.round(i/cy)*cy:u_(i)}}function d_(n,e){return Math.abs(e-n)>=i_}const f_=d.memo(function({iframeRef:e,activeCompositionPath:t,selection:r,groupSelections:i=[],hoverSelection:s,allowCanvasMovement:a=!0,onCanvasMouseDown:c,onCanvasPointerMove:u,onCanvasPointerLeave:h,onSelectionChange:p,onBlockedMove:O,onManualDragStart:x,onPathOffsetCommit:v,onGroupPathOffsetCommit:w,onBoxSizeCommit:k,onRotationCommit:A}){const Q=d.useRef(null),T=d.useRef(null),[C,j]=d.useState(null),[M,Z]=d.useState(null),[L,W]=d.useState([]),te=d.useRef(null),se=d.useRef(null),ce=d.useRef(null),N=d.useRef(!1),le=d.useRef(!1),Oe=d.useRef(!1),Ce=d.useRef(!1),B=d.useRef(null),ke=d.useRef(null),U=d.useRef(new Map),z=d.useRef(r);z.current=r;const K=d.useRef(t);K.current=t;const E=d.useRef(i);E.current=i;const F=d.useRef(s);F.current=s;const re=d.useRef(C);re.current=C;const ge=d.useRef(M);ge.current=M;const Me=d.useRef(L);Me.current=L;const De=d.useRef(v);De.current=v;const Qe=d.useRef(w);Qe.current=w;const ne=d.useRef(k);ne.current=k;const ue=d.useRef(A);ue.current=A;const xe=d.useRef(O);xe.current=O;const Ze=d.useRef(x);Ze.current=x;const Xe=d.useRef(u);Xe.current=u;const ze=d.useRef(h);ze.current=h;const Fe=d.useRef(p);Fe.current=p,cn(()=>{let ie=0;const J=()=>{re.current&&(re.current=null,j(null))},nt=Ve=>{K1(re.current,Ve)||(re.current=Ve,j(Ve))},Le=()=>{ge.current&&(ge.current=null,Z(null))},je=Ve=>{K1(ge.current,Ve)||(ge.current=Ve,Z(Ve))},Et=()=>{Me.current.length!==0&&(Me.current=[],W([]))},lt=Ve=>{uy(Me.current,Ve)||(Me.current=Ve,W(Ve))},wt=(Ve,Ht,It)=>{const Bt=yo(Ht),$t=It.current;if(($t==null?void 0:$t.key)===Bt&&$t.element.isConnected&&$t.element.ownerDocument===Ve)return $t.element;const yt=Ri(Ve,Ht,K.current);return It.current=yt?{key:Bt,element:yt}:null,yt},Be=(Ve,Ht)=>{const It=yo(Ht),Bt=U.current.get(It);if(Bt!=null&&Bt.isConnected&&Bt.ownerDocument===Ve)return Bt;const $t=Ri(Ve,Ht,K.current);return $t?U.current.set(It,$t):U.current.delete(It),$t},Mt=()=>{if(ie=requestAnimationFrame(Mt),Ce.current)return;const Ve=z.current,Ht=e.current,It=Q.current;if(!Ht||!It){B.current=null,ke.current=null,U.current.clear(),J(),Le(),Et();return}const Bt=Ht.contentDocument;if(!Bt){B.current=null,ke.current=null,U.current.clear(),J(),Le(),Et();return}if(Ve){const Kt=wt(Bt,Ve,B);Kt?nt(T1(It,Ht,Kt)):J()}else B.current=null,J();const $t=E.current;if($t.length>0){const Kt=[],Tn=new Set;for(const pr of $t){const Nn=yo(pr);Tn.add(Nn);const Pr=Be(Bt,pr),Fr=Pr?T1(It,Ht,Pr):null;Pr&&Fr&&Kt.push({key:Nn,selection:pr,element:Pr,rect:Fr})}for(const pr of U.current.keys())Tn.has(pr)||U.current.delete(pr);lt(Kt)}else U.current.clear(),Et();const yt=F.current,hr=!!(Ve&&yt&&yo(Ve)===yo(yt)),gn=!!(yt&&$t.some(Kt=>yo(Kt)===yo(yt)));if(!yt||hr||gn){ke.current=null,Le();return}const en=wt(Bt,yt,ke);if(!en){Le();return}je(T1(It,Ht,en))};return ie=requestAnimationFrame(Mt),()=>cancelAnimationFrame(ie)});const tt=d.useMemo(()=>r?`${r.sourceFile}:${r.id??r.selector??r.label}:${r.selectorIndex??0}`:"none",[r]),rt=d.useMemo(()=>s_(L.map(ie=>ie.rect)),[L]),de=i.length>1,Te=de&&L.length>1&&L.every(ie=>ie.selection.capabilities.canApplyManualOffset),Ee=ie=>{K1(re.current,ie)||(re.current=ie,j(ie))},ae=ie=>{Ee({left:ie.originLeft,top:ie.originTop,width:ie.originWidth,height:ie.originHeight,editScaleX:ie.editScaleX,editScaleY:ie.editScaleY})},Je=ie=>{uy(Me.current,ie)||(Me.current=ie,W(ie))},ot=ie=>{Je(ie.originItems)},xt=ie=>{var Et,lt;const J=Me.current;if(J.length<=1)return!1;const nt=(Et=J.find(wt=>!wt.selection.capabilities.canApplyManualOffset))==null?void 0:Et.selection;if(nt)return ie.preventDefault(),ie.stopPropagation(),xe.current(nt),!1;(lt=Ze.current)==null||lt.call(Ze);const Le=o_(J),je=[];for(const wt of Le){const Be=ry({key:wt.key,selection:wt.selection,element:wt.element,rect:wt.rect});if(!Be.ok)return oy(je),ie.preventDefault(),ie.stopPropagation(),xe.current(Be.selection),!1;je.push(Be.member)}return ie.preventDefault(),ie.stopPropagation(),ie.currentTarget.setPointerCapture(ie.pointerId),Ce.current=!0,se.current={startX:ie.clientX,startY:ie.clientY,originItems:J,members:je},!0},at=ie=>{oy(ie.members),ot(ie)},Ot=(ie,J,nt)=>{var en;const Le=(nt==null?void 0:nt.selection)??z.current,je=(nt==null?void 0:nt.rect)??re.current,Et=T.current,lt=Q.current;if(!Le||!je||ie!=="drag"&&!Et)return!1;const wt=ie==="rotate"?"rotation":ie==="drag"?"path-offset":"box-size";if(ie==="drag"&&!Le.capabilities.canApplyManualOffset||ie==="resize"&&!Le.capabilities.canApplyManualSize||ie==="rotate"&&!Le.capabilities.canApplyManualRotation||ie==="resize"&&(!Number.isFinite(je.width)||!Number.isFinite(je.height)))return!1;const Be=Zd(Le.element),Mt=hL(Le.element),Ve=Be.width>0?Be.width:je.width/je.editScaleX,Ht=Be.height>0?Be.height:je.height/je.editScaleY;let It=zg(Le.element),Bt,$t;if(ie==="drag"){(en=Ze.current)==null||en.call(Ze);const Kt=ry({key:yo(Le),selection:Le,element:Le.element,rect:je});if(!Kt.ok)return xe.current(Kt.selection),!1;$t=Kt.member,It=Kt.member.initialPathOffset,Bt=Kt.member.gestureToken}else Bt=mS(Le.element);const yt=lt==null?void 0:lt.getBoundingClientRect(),hr=((yt==null?void 0:yt.left)??0)+je.left+je.width/2,gn=((yt==null?void 0:yt.top)??0)+je.top+je.height/2;return J.preventDefault(),J.stopPropagation(),J.currentTarget.setPointerCapture(J.pointerId),Ce.current=!0,te.current={kind:ie,mode:wt,selection:Le,startX:J.clientX,startY:J.clientY,centerX:hr,centerY:gn,initialPathOffset:It,initialRotation:TL(Le.element),initialBoxSize:EL(Le.element),pathOffsetMember:$t,originLeft:je.left,originTop:je.top,originWidth:je.width,originHeight:je.height,actualWidth:Ve,actualHeight:Ht,actualRotation:Mt.angle,editScaleX:je.editScaleX,editScaleY:je.editScaleY,manualEditDragToken:Bt},!0},Ft=ie=>{const J=te.current,nt=se.current,Le=(J==null?void 0:J.selection)??z.current,je=T.current,Et=ce.current;if(!Et&&!J&&!nt&&Xe.current(ie,{preferClipAncestor:!1}),Et&&Le){const Be=ie.clientX-Et.startX,Mt=ie.clientY-Et.startY;!Et.notified&&Math.hypot(Be,Mt)>=M1&&(Et.notified=!0,N.current=!0,xe.current(Le));return}if(nt){const Be=ie.clientX-nt.startX,Mt=ie.clientY-nt.startY;Je(nt.originItems.map(Ve=>({...Ve,rect:{...Ve.rect,left:Ve.rect.left+Be,top:Ve.rect.top+Mt}})));for(const Ve of nt.members)iy(Ve,Be,Mt);return}if(!J||!Le)return;const lt=ie.clientX-J.startX,wt=ie.clientY-J.startY;if(J.kind==="rotate"){const Be=fy({centerX:J.centerX,centerY:J.centerY,startX:J.startX,startY:J.startY,currentX:ie.clientX,currentY:ie.clientY,actualAngle:J.actualRotation,snap:ie.shiftKey});SL(Le.element,Be);return}if(J.kind==="drag"){const Be=J.originLeft+lt,Mt=J.originTop+wt;Ee({left:Be,top:Mt,width:J.originWidth,height:J.originHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je&&(je.style.left=`${Be}px`,je.style.top=`${Mt}px`),J.pathOffsetMember&&iy(J.pathOffsetMember,lt,wt)}else{if(!je)return;const Be=l_({originWidth:J.originWidth,originHeight:J.originHeight,actualWidth:J.actualWidth,actualHeight:J.actualHeight,scaleX:J.editScaleX,scaleY:J.editScaleY,dx:lt,dy:wt,uniform:ie.shiftKey});Ee({left:J.originLeft,top:J.originTop,width:Be.overlayWidth,height:Be.overlayHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je.style.width=`${Be.overlayWidth}px`,je.style.height=`${Be.overlayHeight}px`,wL(Le.element,Be)}},_t=ie=>{const J=te.current,nt=se.current,Le=(J==null?void 0:J.selection)??z.current,je=T.current;if(ce.current=null,nt){se.current=null,Ce.current=!1;const lt=ie.clientX-nt.startX,wt=ie.clientY-nt.startY;if(Math.hypot(ie.clientX-nt.startX,ie.clientY-nt.startY)<M1){at(nt),N.current=!0;return}Je(nt.originItems.map(Ve=>({...Ve,rect:{...Ve.rect,left:Ve.rect.left+lt,top:Ve.rect.top+wt}})));const Mt=nt.members.map(Ve=>{const Ht=sy(Ve,lt,wt);return{selection:Ve.selection,next:Ht}});Promise.resolve(Qe.current(Mt)).catch(()=>{for(const Ve of nt.members)Ve.gestureToken&&w1(Ve.element,Ve.gestureToken)&&ma(Ve.element,Ve.initialPathOffset)}).finally(()=>{ay(nt.members)});return}if(!J||!Le){te.current=null,Ce.current=!1;return}te.current=null,Ce.current=!1;const Et=Math.hypot(ie.clientX-J.startX,ie.clientY-J.startY);if(J.kind==="drag"&&Et<M1){ma(Le.element,J.initialPathOffset),Ni(Le.element,J.manualEditDragToken),je&&(je.style.left=`${J.originLeft}px`,je.style.top=`${J.originTop}px`),ae(J),N.current=!0,c(ie,{preferClipAncestor:!1});return}if(J.kind==="resize"&&Et<M1){Jp(Le.element,J.initialBoxSize),Ni(Le.element,J.manualEditDragToken),je&&(je.style.width=`${J.originWidth}px`,je.style.height=`${J.originHeight}px`),ae(J);return}if(J.kind==="rotate"){const lt=fy({centerX:J.centerX,centerY:J.centerY,startX:J.startX,startY:J.startY,currentX:ie.clientX,currentY:ie.clientY,actualAngle:J.actualRotation,snap:ie.shiftKey});if(!d_(J.actualRotation,lt.angle)){em(Le.element,J.initialRotation),Ni(Le.element,J.manualEditDragToken);return}kS(Le.element,lt),Promise.resolve(ue.current(Le,lt)).catch(()=>{J.manualEditDragToken&&w1(Le.element,J.manualEditDragToken)&&em(Le.element,J.initialRotation)}).finally(()=>{Ni(Le.element,J.manualEditDragToken)})}else if(J.kind==="drag"){const lt=ie.clientX-J.startX,wt=ie.clientY-J.startY;if(!J.pathOffsetMember)return;const Be=sy(J.pathOffsetMember,lt,wt),Mt=J.originLeft+lt,Ve=J.originTop+wt;Ee({left:Mt,top:Ve,width:J.originWidth,height:J.originHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je&&(je.style.left=`${Mt}px`,je.style.top=`${Ve}px`),Promise.resolve(De.current(Le,Be)).catch(()=>{var Ht;(Ht=J.pathOffsetMember)!=null&&Ht.gestureToken&&w1(Le.element,J.pathOffsetMember.gestureToken)&&ma(Le.element,J.initialPathOffset)}).finally(()=>{J.pathOffsetMember&&ay([J.pathOffsetMember])})}else{const lt=Zd(Le.element);SS(Le.element,lt),Promise.resolve(ne.current(Le,lt)).catch(()=>{J.manualEditDragToken&&w1(Le.element,J.manualEditDragToken)&&Jp(Le.element,J.initialBoxSize)}).finally(()=>{Ni(Le.element,J.manualEditDragToken)})}},fn=ie=>{if(Oe.current){Oe.current=!1,le.current=!1,N.current=!1,ie.preventDefault(),ie.stopPropagation();return}const J=ie.target;J!=null&&J.closest('[data-dom-edit-selection-box="true"]')||(c(ie,{preferClipAncestor:!1}),ie.shiftKey&&(le.current=!0,N.current=!0))},kr=ie=>{if(!a||ie.button!==0)return;if(ie.shiftKey){const Be=Xe.current(ie,{preferClipAncestor:!1})??F.current;if(!Be)return;ie.preventDefault(),ie.stopPropagation(),Oe.current=!0,le.current=!0,N.current=!0,Fe.current(Be,{additive:!0});return}const J=ie.target;if(J!=null&&J.closest('[data-dom-edit-selection-box="true"]'))return;const Le=Xe.current(ie,{preferClipAncestor:!1})??F.current;if(!(Le!=null&&Le.capabilities.canApplyManualOffset))return;const je=Q.current,Et=e.current,lt=je&&Et?T1(je,Et,Le.element):null;if(!lt)return;if(Oe.current=!0,z.current=Le,re.current=lt,ge.current=null,j(lt),Z(null),!Ot("drag",ie,{selection:Le,rect:lt})){Oe.current=!1;return}Fe.current(Le)},zt=ie=>{if(!(te.current||se.current)){if(N.current){N.current=!1,ie.stopPropagation();return}c(ie,{preferClipAncestor:!1})}},mn=()=>{const ie=se.current;ie&&at(ie);const J=te.current,nt=(J==null?void 0:J.selection)??z.current;(J==null?void 0:J.mode)==="path-offset"&&nt&&(ma(nt.element,J.initialPathOffset),Ni(nt.element,J.manualEditDragToken),ae(J)),(J==null?void 0:J.mode)==="box-size"&&nt&&(Jp(nt.element,J.initialBoxSize),Ni(nt.element,J.manualEditDragToken),ae(J)),(J==null?void 0:J.mode)==="rotation"&&nt&&(em(nt.element,J.initialRotation),Ni(nt.element,J.manualEditDragToken)),ce.current=null,se.current=null,te.current=null,Ce.current=!1};return m.jsxs("div",{ref:Q,className:"absolute inset-0 z-10 pointer-events-auto outline-none",tabIndex:-1,"aria-label":"Composition canvas",onPointerDownCapture:ie=>a_(ie.currentTarget),onPointerDown:kr,onMouseDown:fn,onPointerMove:Ft,onPointerLeave:()=>ze.current(),onPointerUp:_t,onPointerCancel:mn,children:[s&&M&&m.jsx("div",{"aria-hidden":"true","data-dom-edit-hover-box":"true",className:"pointer-events-none absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]",style:{left:M.left,top:M.top,width:M.width,height:M.height}}),de&&L.length>1&&rt&&m.jsxs(m.Fragment,{children:[L.map(ie=>m.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute rounded-xl border border-studio-accent/70 bg-studio-accent/[0.03]",style:{left:ie.rect.left,top:ie.rect.top,width:ie.rect.width,height:ie.rect.height}},ie.key)),m.jsx("div",{"data-dom-edit-selection-box":"true",className:"pointer-events-auto absolute rounded-xl border border-studio-accent bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.3)]",style:{left:rt.left,top:rt.top,width:rt.width,height:rt.height,cursor:a&&Te?"move":"default"},onPointerDown:ie=>{a&&(ie.shiftKey||xt(ie))},onMouseDown:ie=>{le.current&&(le.current=!1,ie.preventDefault(),ie.stopPropagation())},onClick:zt})]}),!de&&r&&C&&m.jsxs(m.Fragment,{children:[a&&r.capabilities.canApplyManualRotation&&m.jsxs("div",{className:"pointer-events-none absolute",style:{left:C.left+C.width/2,top:C.top-34,width:28,height:34,transform:"translateX(-50%)"},children:[m.jsx("div",{className:"absolute left-1/2 top-3 bottom-0 w-px -translate-x-1/2 bg-studio-accent/60"}),m.jsx("button",{type:"button",className:"pointer-events-auto absolute left-1/2 top-0 h-3 w-3 -translate-x-1/2 rounded-full border border-studio-accent bg-studio-accent p-0 shadow-[0_0_0_2px_rgba(60,230,172,0.18)]",style:{cursor:"grab",touchAction:"none"},title:"Rotate","aria-label":"Rotate selection",onPointerDown:ie=>{ie.stopPropagation(),Ot("rotate",ie)}})]}),m.jsx("div",{ref:T,"data-dom-edit-selection-box":"true",className:"pointer-events-auto absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]",style:{left:C.left,top:C.top,width:C.width,height:C.height,cursor:a&&r.capabilities.canApplyManualOffset?"move":"default"},onPointerDown:ie=>{if(a&&!ie.shiftKey){if(r.capabilities.canApplyManualOffset){Ot("drag",ie);return}ie.preventDefault(),ie.stopPropagation(),ie.currentTarget.setPointerCapture(ie.pointerId),ce.current={pointerId:ie.pointerId,startX:ie.clientX,startY:ie.clientY,notified:!1}}},onMouseDown:ie=>{le.current&&(le.current=!1,ie.preventDefault(),ie.stopPropagation())},onClick:zt,children:a&&r.capabilities.canApplyManualSize&&m.jsx("div",{className:"absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60",style:{cursor:"se-resize",touchAction:"none"},onPointerDown:ie=>{ie.stopPropagation(),Ot("resize",ie)}})},tt)]})]})}),h_=new Set(["audio","canvas","img","picture","svg","video"]);function p_(n){const e=Math.max(0,n.length-1);if(e>0)return`${e} nested selectable layer${e===1?"":"s"}`;const t=n[0];return t?h_.has(t.tagName.trim().toLowerCase())?"Single selectable media layer":"Single selectable layer":"No selectable layers"}const m_=d.memo(function({clipLabel:e,layers:t,selectedLayerKey:r,onSelectLayer:i,onClose:s}){return m.jsxs("div",{className:"flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950",children:[m.jsxs("div",{className:"flex items-start justify-between gap-3 border-b border-white/10 px-3 py-3",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:"text-[9px] font-semibold uppercase tracking-[0.18em] text-neutral-500",children:"Clip layers"}),m.jsx("div",{className:"mt-1 truncate text-sm font-semibold text-neutral-100",children:e})]}),m.jsx("button",{type:"button",onPointerDown:a=>{a.stopPropagation()},onClick:s,className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 text-neutral-500 transition-colors hover:border-white/20 hover:text-neutral-200","aria-label":"Close clip layers",children:m.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round","aria-hidden":"true",children:[m.jsx("path",{d:"M18 6 6 18"}),m.jsx("path",{d:"m6 6 12 12"})]})})]}),m.jsx("div",{className:"border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500",children:p_(t)}),m.jsx("div",{className:"min-h-0 flex-1 overflow-y-auto py-1",children:t.map(a=>{const c=a.key===r;return m.jsxs("button",{type:"button","data-timeline-layer-row":a.key,onPointerDown:u=>{u.stopPropagation(),i(a)},onClick:u=>{u.stopPropagation(),i(a)},className:`group flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors ${c?"bg-studio-accent/14 text-studio-accent":"text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"}`,style:{paddingLeft:10+a.depth*14},children:[m.jsx("span",{className:`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md border text-[9px] font-bold uppercase ${c?"border-studio-accent/50 bg-studio-accent/18":"border-white/10 bg-black/20 text-neutral-500 group-hover:text-neutral-300"}`,children:a.tagName.slice(0,2)}),m.jsx("span",{className:"min-w-0 flex-1 truncate text-xs font-medium",children:a.label}),a.childCount>0&&m.jsx("span",{className:"rounded-full border border-white/10 bg-black/25 px-1.5 py-0.5 text-[9px] font-semibold tabular-nums text-neutral-500",children:a.childCount})]},a.key)})})]})}),g_={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1},O_="VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING",x_="VITE_STUDIO_ENABLE_INSPECTOR_PANELS",y_="VITE_STUDIO_ENABLE_MOTION_PANEL",v_="VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR",b_=new Set(["1","true","yes","on","enabled"]),w_=new Set(["0","false","no","off","disabled"]);function xf(n,e,t){for(const r of e){const i=n[r];if(typeof i=="boolean")return i;if(typeof i!="string")continue;const s=i.trim().toLowerCase();if(s){if(b_.has(s))return!0;if(w_.has(s))return!1}}return t}const yf=g_,Z1=xf(yf,[O_,"VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],!1),Fn=xf(yf,[x_,"VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],!1),hy=xf(yf,[y_,"VITE_STUDIO_MOTION_PANEL_ENABLED"],!1),R1=Fn&&xf(yf,[v_,"VITE_STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED"],!1),py="Manual editing is temporarily disabled";async function vo({label:n,kind:e,coalesceKey:t,files:r,readFile:i,writeFile:s,recordEdit:a}){const c={};for(const[p,O]of Object.entries(r)){const x=await i(p);x!==O&&(c[p]={before:x,after:O})}const u=Object.keys(c);if(u.length===0)return[];const h=[];try{for(const p of u)await s(p,c[p].after),h.push(p);await a({label:n,kind:e,coalesceKey:t,files:c})}catch(p){try{for(const O of h.reverse())await s(O,c[O].before)}catch(O){throw new AggregateError([p,O],"Failed to save project files and rollback did not complete")}throw p}return u}function hl(n){return n.label||n.id||n.tag}const S_=new Set(["inherit","initial","revert","revert-layer","serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-sans-serif","ui-serif","ui-monospace","ui-rounded","emoji","math","fangsong"]);function k_(n){return(n.split(",")[0]??"").trim().replace(/^["']|["']$/g,"")}function my(n,e){const t=k_(e);if(!t||S_.has(t.toLowerCase()))return;const r=`studio-preview-google-font-${t.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(n.getElementById(r))return;const i=n.createElement("link");i.id=r,i.rel="stylesheet",i.href=$S(t),n.head.appendChild(i)}function P_(n){var e;return((e=n.split(",")[0])==null?void 0:e.trim().replace(/^["']|["']$/g,"").trim())??""}function gy(n,e){const t=`studio-imported-font-${e.family.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(n.getElementById(t))return;const r=n.createElement("style");r.id=t,r.textContent=Bg(e),n.head.appendChild(r)}function Oy(n){const e=n.trim(),t=/^[a-z]+:\/\//i.test(e)?new URL(e).pathname:e;return decodeURIComponent(t).replace(/\\/g,"/").replace(/^\.?\//,"")}function A_(n,e){const t=Oy(n).split("/").filter(Boolean),r=Oy(e).split("/").filter(Boolean);for(t.pop();t.length>0&&r.length>0&&t[0]===r[0];)t.shift(),r.shift();return[...t.map(()=>".."),...r].join("/")||e}function $_(n){return/^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(n)}function C_(n,e){const t=e.trim();if(!t)return;const r=t.replace(/\\/g,"/");if($_(r))return r;const i=n==null?void 0:n.trim().replace(/\\/g,"/").replace(/\/+$/,"");if(i)return`${i}/${r.replace(/^\.?\//,"")}`}function xy(n,e,t){const r=Bg(e,A_(t,e.path));if(n.includes(r))return n;const s=/<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i.exec(n);if(s){const c=`${s[2].trim()}
+`}function bV(n){return n.trim().replace(/\\/g,"/").replace(/^\.?\//,"")}function wV(n){if(!n)return!1;const e=bV(n);return e===ko||e.endsWith(`/${ko}`)}function ZS(n){return{sourceFile:n.sourceFile||"index.html",selector:n.selector,selectorIndex:n.selectorIndex,id:n.id??void 0}}function Ld(n){return[n.sourceFile,n.id?`id:${n.id}`:"",n.selector?`selector:${n.selector}`:"",n.selectorIndex!=null?`index:${n.selectorIndex}`:""].join("|")}function RS(n,e){const t=ZS(e);return n.target.sourceFile!==t.sourceFile?!1:n.target.id&&t.id&&n.target.id===t.id?!0:Ld(n.target)===Ld(t)}function SV(n,e,t){const r=ZS(e),i={kind:"gsap-motion",target:r,...t,updatedAt:new Date().toISOString()};return{version:1,motions:[...n.motions.filter(s=>Ld(s.target)!==Ld(r)),i]}}function kV(n,e){return{version:1,motions:n.motions.filter(t=>!RS(t,e))}}function PV(n,e){return n.motions.find(t=>RS(t,e))??null}function AV(n,e){let t=n;for(;t;){const r=t.getAttribute("data-composition-file")??t.getAttribute("data-composition-src");if(r)return r;t=t.parentElement}return e??"index.html"}function Y5(n,e,t){return AV(n,t)===e}function $V(n,e){var i;const t=s=>{var c;const a=(c=s.ownerDocument.defaultView)==null?void 0:c.HTMLElement;return!!(a&&s instanceof a)},r=(i=e.match(/^\.([A-Za-z0-9_-]+)$/))==null?void 0:i[1];return r?Array.from(n.getElementsByTagName("*")).filter(s=>t(s)&&s.classList.contains(r)):/^[A-Za-z][A-Za-z0-9-]*$/.test(e)?Array.from(n.getElementsByTagName(e)).filter(t):Array.from(n.querySelectorAll(e)).filter(t)}function CV(n,e,t){var i;const r=(i=n.defaultView)==null?void 0:i.HTMLElement;if(e.id){const s=n.getElementById(e.id);if(r&&s instanceof r&&Y5(s,e.sourceFile,t))return s}if(!e.selector)return null;try{return $V(n,e.selector).filter(a=>Y5(a,e.sourceFile,t))[Math.max(0,Math.floor(e.selectorIndex??0))]??null}catch{return null}}function EV(n){n.hasAttribute(Pu)||(n.setAttribute(I2,n.style.transform),n.setAttribute(D2,n.style.opacity),n.setAttribute(X2,n.style.visibility))}function TV(n,e){var t;n.hasAttribute(Pu)&&((t=e==null?void 0:e.set)==null||t.call(e,n,{clearProps:"transform,opacity,visibility"}),n.style.transform=n.getAttribute(I2)??"",n.style.opacity=n.getAttribute(D2)??"",n.style.visibility=n.getAttribute(X2)??"",n.removeAttribute(Pu),n.removeAttribute(I2),n.removeAttribute(D2),n.removeAttribute(X2))}function MV(n,e){var r;const t=(r=n.defaultView)==null?void 0:r.HTMLElement;if(t)for(const i of Array.from(n.querySelectorAll(`[${Pu}]`)))i instanceof t&&TV(i,e)}function QV(n,e){var i,s;const t=e.customEase;if(!t)return e.ease;const r=n.CustomEase;if(typeof(r==null?void 0:r.create)!="function")return e.ease;try{return(s=(i=n.gsap)==null?void 0:i.registerPlugin)==null||s.call(i,r),r.create(t.id,t.data),t.id}catch{return e.ease}}function jV(n,e){var t,r,i,s;try{const a=(r=(t=n.__player)==null?void 0:t.getTime)==null?void 0:r.call(t);if(typeof a=="number"&&Number.isFinite(a))return Math.max(0,a)}catch{}try{const a=(s=(i=n.__timeline)==null?void 0:i.time)==null?void 0:s.call(i);if(typeof a=="number"&&Number.isFinite(a))return Math.max(0,a)}catch{}return 0}function ZV(n,e,t=null,r){var h,p,O,x,v;const i=n.defaultView;if(!i)return 0;const s=i.gsap;if(i.__timelines=i.__timelines??{},(p=(h=i.__timelines[um])==null?void 0:h.kill)==null||p.call(h),delete i.__timelines[um],MV(n,s),!(s!=null&&s.timeline)||e.motions.length===0)return 0;const a=s.timeline({paused:!0,defaults:{overwrite:"auto"}});let c=0;for(const w of e.motions){const k=CV(n,w.target,t);if(!k||!a.fromTo)continue;EV(k),k.setAttribute(Pu,"true");const A={...w.from},Q={...w.to,duration:w.duration,ease:QV(i,w),overwrite:"auto",immediateRender:!1};a.fromTo(k,A,Q,w.start),c+=1}if(c===0)return(O=a.kill)==null||O.call(a),0;i.__timelines[um]=a,(x=a.pause)==null||x.call(a);const u=jV(i);return a.totalTime?a.totalTime(u,!1):(v=a.time)==null||v.call(a,u),c}function RV(n,e){const t=n;if(t.__hfStudioMotionApply=()=>(e(),0),t.__hfStudioMotionWrapped)return!1;const r=t.__player;if(!r)return!1;const i=s=>{const a=r[s];typeof a=="function"&&(r[s]=c=>{var u;a.call(r,c),(u=t.__hfStudioMotionApply)==null||u.call(t)})};return i("renderSeek"),i("seek"),t.__hfStudioMotionWrapped=!0,!0}const NS="min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600",Of="text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500",q5="grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3",NV=[{label:"Fade Up",value:"fade-up"},{label:"Slide",value:"slide"},{label:"Pop",value:"pop"}],LV=["up","down","left","right"];function ga(n){const e=Math.round(n*100)/100;return Number.isInteger(e)?`${e}`:e.toFixed(2).replace(/0+$/,"").replace(/\.$/,"")}function fm(n,e,t,r){return n==null||!Number.isFinite(n)?r:Math.min(t,Math.max(e,n))}function hm(n){const e=Number.parseFloat(n.trim());return Number.isFinite(e)?e:null}function VV(n){return n?Math.max(Math.abs(n.from.x??0),Math.abs(n.from.y??0),1):32}function _V(n){return n?n.from.scale!=null||n.to.scale!=null?"pop":n.from.x!=null||n.to.x!=null?"slide":"fade-up":"fade-up"}function IV(n){if(!n)return"up";const e=n.from.x??0,t=n.from.y??0;return Math.abs(e)>Math.abs(t)?e<0?"right":"left":t<0?"down":"up"}function U5(n){return`studio-${(n.id||n.selector||n.label||"layer").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")||"layer"}-ease`}function DV({value:n,disabled:e,onCommit:t}){const[r,i]=d.useState(n),s=d.useRef(!1);d.useEffect(()=>{s.current||i(n)},[n]);const a=()=>{s.current=!1;const c=r.trim();c!==n&&t(c)};return m.jsx("input",{type:"text",value:r,disabled:e,onFocus:()=>{s.current=!0},onChange:c=>i(c.target.value),onBlur:a,onKeyDown:c=>{c.key==="Enter"&&c.target.blur()},className:"w-full min-w-0 bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"})}function E1({label:n,value:e,disabled:t,onCommit:r}){return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Of,children:n}),m.jsx("div",{className:NS,children:m.jsx(DV,{value:e,disabled:t,onCommit:r})})]})}function XV({value:n,options:e,onChange:t}){return m.jsx("div",{className:"grid grid-cols-3 gap-1 rounded-2xl border border-neutral-800 bg-neutral-950 p-1",children:e.map(r=>m.jsx("button",{type:"button",onClick:()=>t(r.value),className:`h-9 rounded-xl text-[11px] font-semibold transition-colors ${r.value===n?"bg-neutral-800 text-white shadow-sm":"text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200"}`,children:r.label},r.value))})}function G5({label:n,value:e,options:t,onChange:r}){return m.jsxs("label",{className:"grid min-w-0 gap-1.5",children:[m.jsx("span",{className:Of,children:n}),m.jsx("div",{className:NS,children:m.jsx("select",{value:e,onChange:i=>r(i.target.value),className:"w-full min-w-0 appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none",children:t.map(i=>m.jsx("option",{value:i,children:i},i))})})]})}function K5({title:n,children:e,accessory:t}){return m.jsxs("section",{className:"border-b border-neutral-800 px-4 py-5",children:[m.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3",children:[m.jsxs("div",{className:"flex items-center gap-3",children:[m.jsx(Rg,{size:15,className:"text-neutral-500"}),m.jsx("h3",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-neutral-300",children:n})]}),t]}),e]})}function FV(n,e){const t=1-n,r=t*t,i=n*n;return{x:3*r*n*e.x1+3*t*i*e.x2+i*n,y:3*r*n*e.y1+3*t*i*e.y2+i*n}}function zV(n,e){const t=[];for(let r=0;r<=48;r+=1){const i=e(FV(r/48,n));t.push(`${r===0?"M":"L"}${i.x.toFixed(2)},${i.y.toFixed(2)}`)}return t.join(" ")}function HV({points:n,onCommit:e}){const t=d.useRef(null),[r,i]=d.useState(n),s=d.useRef(null);d.useEffect(()=>{i(n)},[n]);const a=324,c=214,u={left:46,top:24,width:242,height:146},h=-.4,p=1.4,O=M=>({x:u.left+M.x*u.width,y:u.top+(p-M.y)/(p-h)*u.height}),x=M=>{var te;const Z=(te=t.current)==null?void 0:te.getBoundingClientRect();if(!Z)return null;const L=(M.clientX-Z.left)/Z.width*a,W=(M.clientY-Z.top)/Z.height*c;return qg({x1:s.current==="p1"?(L-u.left)/u.width:r.x1,y1:s.current==="p1"?p-(W-u.top)/u.height*(p-h):r.y1,x2:s.current==="p2"?(L-u.left)/u.width:r.x2,y2:s.current==="p2"?p-(W-u.top)/u.height*(p-h):r.y2})},v=O({x:0,y:0}),w=O({x:1,y:1}),k=O({x:r.x1,y:r.y1}),A=O({x:r.x2,y:r.y2}),Q=zV(r,O),T=M=>{if(!s.current)return;M.preventDefault();const Z=x(M);Z&&i(Z)},C=()=>{s.current&&(s.current=null,e(r))},j=(M,Z)=>{Z.preventDefault(),Z.stopPropagation(),s.current=M,Z.currentTarget.setPointerCapture(Z.pointerId)};return m.jsxs("div",{className:"overflow-hidden rounded-2xl border border-neutral-800 bg-black/40",children:[m.jsxs("div",{className:"flex items-center justify-between gap-3 border-b border-neutral-800 px-3 py-2",children:[m.jsxs("div",{children:[m.jsx("div",{className:Of,children:"CustomEase"}),m.jsx("div",{className:"mt-1 font-mono text-[10px] text-neutral-500",children:QS(r)})]}),m.jsxs("button",{type:"button",onClick:()=>{const M=jS("power3.out");i(M),e(M)},className:"inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-800 bg-neutral-950 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-100",children:[m.jsx(sf,{size:13}),"Reset"]})]}),m.jsxs("svg",{ref:t,viewBox:`0 0 ${a} ${c}`,className:"block w-full select-none touch-none",onPointerMove:T,onPointerUp:C,onPointerCancel:C,children:[m.jsx("rect",{x:"0",y:"0",width:a,height:c,fill:"transparent"}),[0,.5,1].map(M=>{const Z=O({x:0,y:M});return m.jsxs("g",{children:[m.jsx("line",{x1:u.left,x2:u.left+u.width,y1:Z.y,y2:Z.y,stroke:"rgba(255,255,255,0.12)",strokeDasharray:"5 8"}),m.jsx("text",{x:u.left-12,y:Z.y+4,textAnchor:"end",className:"fill-neutral-500 text-[10px] font-semibold",children:M})]},M)}),m.jsx("line",{x1:u.left,x2:u.left+u.width,y1:u.top+u.height,y2:u.top+u.height,stroke:"rgba(255,255,255,0.18)"}),m.jsx("line",{x1:u.left,x2:u.left,y1:u.top,y2:u.top+u.height,stroke:"rgba(255,255,255,0.18)"}),m.jsx("line",{x1:v.x,y1:v.y,x2:k.x,y2:k.y,stroke:"rgba(255,221,87,0.34)"}),m.jsx("line",{x1:w.x,y1:w.y,x2:A.x,y2:A.y,stroke:"rgba(255,221,87,0.34)"}),m.jsx("path",{d:Q,fill:"none",stroke:"#ffdd57",strokeWidth:"4",strokeLinecap:"round"}),m.jsx("circle",{cx:v.x,cy:v.y,r:"5",fill:"#ffdd57"}),m.jsx("circle",{cx:w.x,cy:w.y,r:"5",fill:"#ffdd57"}),m.jsx("circle",{cx:k.x,cy:k.y,r:"9",fill:"#141414",stroke:"#ffdd57",strokeWidth:"4",className:"cursor-grab active:cursor-grabbing",onPointerDown:M=>j("p1",M)}),m.jsx("circle",{cx:A.x,cy:A.y,r:"9",fill:"#141414",stroke:"#ffdd57",strokeWidth:"4",className:"cursor-grab active:cursor-grabbing",onPointerDown:M=>j("p2",M)}),m.jsx("text",{x:k.x+12,y:k.y-10,className:"fill-neutral-400 text-[10px] font-semibold",children:"P1"}),m.jsx("text",{x:A.x+12,y:A.y-10,className:"fill-neutral-400 text-[10px] font-semibold",children:"P2"})]}),m.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-800 p-3",children:[m.jsxs("div",{className:"rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400",children:["P1 ",ga(r.x1),", ",ga(r.y1)]}),m.jsxs("div",{className:"rounded-xl border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-[10px] text-neutral-400",children:["P2 ",ga(r.x2),", ",ga(r.y2)]})]})]})}const WV=d.memo(function({element:e,motion:t,onClearSelection:r,onSetMotion:i,onClearMotion:s}){var j;const a=_V(t),c=IV(t),u=(t==null?void 0:t.start)??0,h=(t==null?void 0:t.duration)??.6,p=VV(t),O=(t==null?void 0:t.ease)??"power3.out",x=((j=t==null?void 0:t.customEase)==null?void 0:j.data)??"",v=x.trim().length>0,w=d.useMemo(()=>H5(x)??jS(A1.includes(O)?O:"power3.out"),[O,x]);if(!e)return m.jsxs("div",{className:"flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center",children:[m.jsx(Rg,{size:18,className:"mb-3 text-neutral-600"}),m.jsx("p",{className:"text-sm font-medium text-neutral-200",children:"Select an element for motion."}),m.jsx("p",{className:"mt-2 max-w-[260px] text-xs leading-5 text-neutral-500",children:"Timeline layers and inspector selections can receive Studio-authored GSAP motion."})]});const k=e.id?`#${e.id}`:e.selector,A=v?"CustomEase":A1.includes(O)?O:"power3.out",Q=v?["CustomEase",...A1]:A1,T=M=>{var te;const Z=M.customEaseData??x,L=Z.trim()?{id:((te=t==null?void 0:t.customEase)==null?void 0:te.id)??U5(e),data:Z.trim()}:void 0,W=L?L.id:(M.ease??O).trim()||"none";i(e,OV(M.preset??a,{start:fm(M.start??u,0,3600,0),duration:fm(M.duration??h,.01,3600,.6),distance:fm(M.distance??p,1,2e3,32),direction:M.direction??c,ease:W,customEase:L}))},C=M=>{T({ease:U5(e),customEaseData:QS(M)})};return m.jsxs("div",{className:"flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100",children:[m.jsx("div",{className:"border-b border-neutral-800 px-4 py-5",children:m.jsxs("div",{className:"flex items-start justify-between gap-4",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:Of,children:"Motion Target"}),m.jsx("div",{className:"mt-3 truncate text-[12px] font-semibold text-neutral-100",children:e.label}),m.jsx("div",{className:"mt-1 truncate text-[11px] text-neutral-500",children:k})]}),m.jsx("button",{type:"button","aria-label":"Clear selection",onClick:r,className:"flex h-9 w-9 items-center justify-center rounded-full border border-neutral-700 bg-neutral-950 text-neutral-500 shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-colors hover:border-neutral-600 hover:text-neutral-200",children:m.jsx(rf,{size:13})})]})}),m.jsxs("div",{className:"flex-1 overflow-y-auto",children:[m.jsx(K5,{title:"GSAP Motion",accessory:m.jsx("div",{className:"rounded-full border border-studio-accent/40 bg-studio-accent/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-studio-accent",children:"GSAP"}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(XV,{value:a,onChange:M=>T({preset:M}),options:NV}),m.jsxs("div",{className:q5,children:[m.jsx(G5,{label:"Direction",value:c,onChange:M=>T({direction:M}),options:LV}),m.jsx(G5,{label:"Ease",value:A,onChange:M=>{M!=="CustomEase"&&T({ease:M,customEaseData:""})},options:Q})]}),m.jsxs("div",{className:q5,children:[m.jsx(E1,{label:"Start",value:ga(u),onCommit:M=>T({start:hm(M)??0})}),m.jsx(E1,{label:"Duration",value:ga(h),onCommit:M=>T({duration:hm(M)??.6})}),m.jsx(E1,{label:"Distance",value:ga(p),onCommit:M=>T({distance:hm(M)??32})})]})]})}),m.jsx(K5,{title:"Ease Curve",accessory:m.jsx("div",{className:"rounded-full border border-yellow-400/30 bg-yellow-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-yellow-300",children:"CustomEase"}),children:m.jsxs("div",{className:"space-y-4",children:[m.jsx(HV,{points:w,onCommit:C}),m.jsx(E1,{label:"CustomEase path",value:x,onCommit:M=>{const Z=H5(M);Z&&C(Z)}}),m.jsx("div",{className:"flex justify-end",children:m.jsx("button",{type:"button",onClick:()=>s(e),disabled:!t,className:"inline-flex h-8 items-center rounded-xl border border-neutral-700 bg-neutral-950 px-3 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:border-neutral-800 disabled:text-neutral-600",children:"Clear motion"})})]})})]})]})}),BV=100,J5=.01,YV=1e-6;function ey(n){return Number.isFinite(n.x)&&Number.isFinite(n.y)}function ty(n){return Math.hypot(n.x,n.y)}function ny(n){return Number.isFinite(n.left)&&Number.isFinite(n.top)&&Number.isFinite(n.width)&&Number.isFinite(n.height)}function qV(n){const e=n.document.documentElement,t=n.innerWidth||e.clientWidth||1,r=n.innerHeight||e.clientHeight||1;return{width:t>0?t:1,height:r>0?r:1}}function UV(n){try{const e=n.frameElement;if(!e)return null;const t=e.ownerDocument.defaultView,r=t==null?void 0:t.HTMLElement;return r&&e instanceof r?e:null}catch{return null}}function pm(n){const e=n.getBoundingClientRect();if(!ny(e)||e.width<=0&&e.height<=0)return null;let t={x:e.left+e.width/2,y:e.top+e.height/2},r=n.ownerDocument.defaultView;for(;r;){const i=UV(r);if(!i)break;const s=i.getBoundingClientRect();if(!ny(s)||s.width<=0||s.height<=0)return null;const a=qV(r);t={x:s.left+t.x*(s.width/a.width),y:s.top+t.y*(s.height/a.height)},r=i.ownerDocument.defaultView}return t}function GV(n){const e=n.a*n.d-n.b*n.c;return!Number.isFinite(e)||Math.abs(e)<YV?null:{a:n.d/e,b:-n.b/e,c:-n.c/e,d:n.a/e}}function KV(n,e){return{x:n.a*e.x+n.c*e.y,y:n.b*e.x+n.d*e.y}}function JV(n,e,t={}){const r=t.probeSize??BV;if(!Number.isFinite(r)||r<=0)return{ok:!1,reason:"Invalid movement probe size."};const i=zg(n);try{G1(n,e);const s=pm(n);if(!s)return{ok:!1,reason:"Element has no measurable box."};G1(n,{x:e.x+r,y:e.y});const a=pm(n);if(!a)return{ok:!1,reason:"Element X movement could not be measured."};G1(n,{x:e.x,y:e.y+r});const c=pm(n);if(!c)return{ok:!1,reason:"Element Y movement could not be measured."};const u={x:(a.x-s.x)/r,y:(a.y-s.y)/r},h={x:(c.x-s.x)/r,y:(c.y-s.y)/r};if(!ey(u)||!ey(h)||ty(u)<J5||ty(h)<J5)return{ok:!1,reason:"Element movement response is too small to measure."};const p={a:u.x,b:u.y,c:h.x,d:h.y},O=GV(p);return O?{ok:!0,matrix:O}:{ok:!1,reason:"Element movement response is not invertible."}}finally{ma(n,i)}}function e_(n){const e=KV(n.screenToOffset,{x:n.dx,y:n.dy});return{x:n.initialOffset.x+e.x,y:n.initialOffset.y+e.y}}function ry(n){const e=j2(n.element),t=zg(n.element),r=mS(n.element),i=JV(n.element,e);return i.ok?{ok:!0,member:{key:n.key,selection:n.selection,element:n.element,initialOffset:e,initialPathOffset:t,gestureToken:r,screenToOffset:i.matrix,originRect:n.rect}}:(ma(n.element,t),Ni(n.element,r),{ok:!1,reason:i.reason,selection:n.selection})}function LS(n,e,t){return e_({initialOffset:n.initialOffset,screenToOffset:n.screenToOffset,dx:e,dy:t})}function iy(n,e,t){const r=LS(n,e,t);return G1(n.element,r),r}function sy(n,e,t){const r=LS(n,e,t);return wS(n.element,r),r}function t_(n){ma(n.element,n.initialPathOffset),Ni(n.element,n.gestureToken)}function oy(n){for(const e of n)t_(e)}function ay(n){for(const e of n)Ni(e.element,e.gestureToken)}function T1(n,e,t){const r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),s=e.contentDocument,a=(s==null?void 0:s.querySelector("[data-composition-id]"))??(s==null?void 0:s.documentElement)??null,c=a==null?void 0:a.getBoundingClientRect(),u=c==null?void 0:c.width,h=c==null?void 0:c.height;if(!u||!h)return null;const p=t.getBoundingClientRect(),O=r.width/u,x=r.height/h,v=n_(t),w=v==null?void 0:v.getBoundingClientRect(),k=r_({rootScaleX:O,rootScaleY:x,sourceRectWidth:w==null?void 0:w.width,sourceRectHeight:w==null?void 0:w.height,sourceWidth:ly((v==null?void 0:v.getAttribute("data-width"))??null),sourceHeight:ly((v==null?void 0:v.getAttribute("data-height"))??null)});return{left:r.left-i.left+(p.left-c.left)*O,top:r.top-i.top+(p.top-c.top)*x,width:p.width*O,height:p.height*x,editScaleX:k.scaleX,editScaleY:k.scaleY}}function ly(n){if(!n)return null;const e=Number.parseFloat(n);return Number.isFinite(e)&&e>0?e:null}function n_(n){let e=n;for(;e;){if(e.hasAttribute("data-composition-file")||e.hasAttribute("data-composition-src"))return e;e=e.parentElement}return null}function r_(n){const e=n.rootScaleX>0?n.rootScaleX:1,t=n.rootScaleY>0?n.rootScaleY:1,r=n.sourceRectWidth&&n.sourceRectWidth>0&&n.sourceWidth&&n.sourceWidth>0?n.sourceRectWidth*e/n.sourceWidth:e,i=n.sourceRectHeight&&n.sourceRectHeight>0&&n.sourceHeight&&n.sourceHeight>0?n.sourceRectHeight*t/n.sourceHeight:t;return{scaleX:r>0?r:e,scaleY:i>0?i:t}}const M1=4,Q1=20,j1=.5,i_=.05,cy=15;function K1(n,e){return n===e?!0:!n||!e?!1:Math.abs(n.left-e.left)<j1&&Math.abs(n.top-e.top)<j1&&Math.abs(n.width-e.width)<j1&&Math.abs(n.height-e.height)<j1&&Math.abs(n.editScaleX-e.editScaleX)<.001&&Math.abs(n.editScaleY-e.editScaleY)<.001}function uy(n,e){return n===e?!0:n.length!==e.length?!1:n.every((t,r)=>{const i=e[r];return!!(i&&t.key===i.key&&t.element===i.element&&t.selection===i.selection&&K1(t.rect,i.rect))})}function s_(n){const e=n[0];if(!e)return null;let t=e.left,r=e.top,i=e.left+e.width,s=e.top+e.height;for(const a of n.slice(1))t=Math.min(t,a.left),r=Math.min(r,a.top),i=Math.max(i,a.left+a.width),s=Math.max(s,a.top+a.height);return{left:t,top:r,width:i-t,height:s-r,editScaleX:1,editScaleY:1}}function o_(n){return n.filter(e=>!n.some(t=>t!==e&&t.element.contains(e.element)))}function yo(n){return[n.sourceFile??"",n.id??"",n.selector??"",n.selectorIndex??""].join("|")}function a_(n){n==null||n.focus({preventScroll:!0})}function l_(n){const e=n.scaleX>0?n.scaleX:1,t=n.scaleY>0?n.scaleY:1;if(n.uniform){const r=n.dx/e,i=n.dy/t,s=Math.abs(r)>=Math.abs(i)?r:i,a=Math.max(1,Math.max(n.actualWidth,n.actualHeight)+s);return{overlayWidth:Math.max(Q1,a*e),overlayHeight:Math.max(Q1,a*t),width:a,height:a}}return{overlayWidth:Math.max(Q1,n.originWidth+n.dx),overlayHeight:Math.max(Q1,n.originHeight+n.dy),width:Math.max(1,n.actualWidth+n.dx/e),height:Math.max(1,n.actualHeight+n.dy/t)}}function dy(n,e,t,r){return Math.atan2(r-e,t-n)*180/Math.PI}function c_(n){return((n+180)%360+360)%360-180}function u_(n){return Math.round(n*10)/10}function fy(n){const e=dy(n.centerX,n.centerY,n.startX,n.startY),t=dy(n.centerX,n.centerY,n.currentX,n.currentY),r=c_(t-e),i=n.actualAngle+r;return{angle:n.snap?Math.round(i/cy)*cy:u_(i)}}function d_(n,e){return Math.abs(e-n)>=i_}const f_=d.memo(function({iframeRef:e,activeCompositionPath:t,selection:r,groupSelections:i=[],hoverSelection:s,allowCanvasMovement:a=!0,onCanvasMouseDown:c,onCanvasPointerMove:u,onCanvasPointerLeave:h,onSelectionChange:p,onBlockedMove:O,onManualDragStart:x,onPathOffsetCommit:v,onGroupPathOffsetCommit:w,onBoxSizeCommit:k,onRotationCommit:A}){const Q=d.useRef(null),T=d.useRef(null),[C,j]=d.useState(null),[M,Z]=d.useState(null),[L,W]=d.useState([]),te=d.useRef(null),se=d.useRef(null),ce=d.useRef(null),N=d.useRef(!1),le=d.useRef(!1),Oe=d.useRef(!1),Ce=d.useRef(!1),B=d.useRef(null),ke=d.useRef(null),U=d.useRef(new Map),z=d.useRef(r);z.current=r;const K=d.useRef(t);K.current=t;const E=d.useRef(i);E.current=i;const F=d.useRef(s);F.current=s;const re=d.useRef(C);re.current=C;const ge=d.useRef(M);ge.current=M;const Me=d.useRef(L);Me.current=L;const De=d.useRef(v);De.current=v;const Qe=d.useRef(w);Qe.current=w;const ne=d.useRef(k);ne.current=k;const ue=d.useRef(A);ue.current=A;const xe=d.useRef(O);xe.current=O;const Ze=d.useRef(x);Ze.current=x;const Xe=d.useRef(u);Xe.current=u;const ze=d.useRef(h);ze.current=h;const Fe=d.useRef(p);Fe.current=p,cn(()=>{let ie=0;const J=()=>{re.current&&(re.current=null,j(null))},nt=Ve=>{K1(re.current,Ve)||(re.current=Ve,j(Ve))},Le=()=>{ge.current&&(ge.current=null,Z(null))},je=Ve=>{K1(ge.current,Ve)||(ge.current=Ve,Z(Ve))},Et=()=>{Me.current.length!==0&&(Me.current=[],W([]))},lt=Ve=>{uy(Me.current,Ve)||(Me.current=Ve,W(Ve))},wt=(Ve,Ht,It)=>{const Bt=yo(Ht),$t=It.current;if(($t==null?void 0:$t.key)===Bt&&$t.element.isConnected&&$t.element.ownerDocument===Ve)return $t.element;const yt=Ri(Ve,Ht,K.current);return It.current=yt?{key:Bt,element:yt}:null,yt},Be=(Ve,Ht)=>{const It=yo(Ht),Bt=U.current.get(It);if(Bt!=null&&Bt.isConnected&&Bt.ownerDocument===Ve)return Bt;const $t=Ri(Ve,Ht,K.current);return $t?U.current.set(It,$t):U.current.delete(It),$t},Mt=()=>{if(ie=requestAnimationFrame(Mt),Ce.current)return;const Ve=z.current,Ht=e.current,It=Q.current;if(!Ht||!It){B.current=null,ke.current=null,U.current.clear(),J(),Le(),Et();return}const Bt=Ht.contentDocument;if(!Bt){B.current=null,ke.current=null,U.current.clear(),J(),Le(),Et();return}if(Ve){const Kt=wt(Bt,Ve,B);Kt?nt(T1(It,Ht,Kt)):J()}else B.current=null,J();const $t=E.current;if($t.length>0){const Kt=[],Tn=new Set;for(const pr of $t){const Nn=yo(pr);Tn.add(Nn);const Pr=Be(Bt,pr),Fr=Pr?T1(It,Ht,Pr):null;Pr&&Fr&&Kt.push({key:Nn,selection:pr,element:Pr,rect:Fr})}for(const pr of U.current.keys())Tn.has(pr)||U.current.delete(pr);lt(Kt)}else U.current.clear(),Et();const yt=F.current,hr=!!(Ve&&yt&&yo(Ve)===yo(yt)),gn=!!(yt&&$t.some(Kt=>yo(Kt)===yo(yt)));if(!yt||hr||gn){ke.current=null,Le();return}const en=wt(Bt,yt,ke);if(!en){Le();return}je(T1(It,Ht,en))};return ie=requestAnimationFrame(Mt),()=>cancelAnimationFrame(ie)});const tt=d.useMemo(()=>r?`${r.sourceFile}:${r.id??r.selector??r.label}:${r.selectorIndex??0}`:"none",[r]),rt=d.useMemo(()=>s_(L.map(ie=>ie.rect)),[L]),de=i.length>1,Te=de&&L.length>1&&L.every(ie=>ie.selection.capabilities.canApplyManualOffset),Ee=ie=>{K1(re.current,ie)||(re.current=ie,j(ie))},ae=ie=>{Ee({left:ie.originLeft,top:ie.originTop,width:ie.originWidth,height:ie.originHeight,editScaleX:ie.editScaleX,editScaleY:ie.editScaleY})},Je=ie=>{uy(Me.current,ie)||(Me.current=ie,W(ie))},ot=ie=>{Je(ie.originItems)},xt=ie=>{var Et,lt;const J=Me.current;if(J.length<=1)return!1;const nt=(Et=J.find(wt=>!wt.selection.capabilities.canApplyManualOffset))==null?void 0:Et.selection;if(nt)return ie.preventDefault(),ie.stopPropagation(),xe.current(nt),!1;(lt=Ze.current)==null||lt.call(Ze);const Le=o_(J),je=[];for(const wt of Le){const Be=ry({key:wt.key,selection:wt.selection,element:wt.element,rect:wt.rect});if(!Be.ok)return oy(je),ie.preventDefault(),ie.stopPropagation(),xe.current(Be.selection),!1;je.push(Be.member)}return ie.preventDefault(),ie.stopPropagation(),ie.currentTarget.setPointerCapture(ie.pointerId),Ce.current=!0,se.current={startX:ie.clientX,startY:ie.clientY,originItems:J,members:je},!0},at=ie=>{oy(ie.members),ot(ie)},Ot=(ie,J,nt)=>{var en;const Le=(nt==null?void 0:nt.selection)??z.current,je=(nt==null?void 0:nt.rect)??re.current,Et=T.current,lt=Q.current;if(!Le||!je||ie!=="drag"&&!Et)return!1;const wt=ie==="rotate"?"rotation":ie==="drag"?"path-offset":"box-size";if(ie==="drag"&&!Le.capabilities.canApplyManualOffset||ie==="resize"&&!Le.capabilities.canApplyManualSize||ie==="rotate"&&!Le.capabilities.canApplyManualRotation||ie==="resize"&&(!Number.isFinite(je.width)||!Number.isFinite(je.height)))return!1;const Be=Zd(Le.element),Mt=hL(Le.element),Ve=Be.width>0?Be.width:je.width/je.editScaleX,Ht=Be.height>0?Be.height:je.height/je.editScaleY;let It=zg(Le.element),Bt,$t;if(ie==="drag"){(en=Ze.current)==null||en.call(Ze);const Kt=ry({key:yo(Le),selection:Le,element:Le.element,rect:je});if(!Kt.ok)return xe.current(Kt.selection),!1;$t=Kt.member,It=Kt.member.initialPathOffset,Bt=Kt.member.gestureToken}else Bt=mS(Le.element);const yt=lt==null?void 0:lt.getBoundingClientRect(),hr=((yt==null?void 0:yt.left)??0)+je.left+je.width/2,gn=((yt==null?void 0:yt.top)??0)+je.top+je.height/2;return J.preventDefault(),J.stopPropagation(),J.currentTarget.setPointerCapture(J.pointerId),Ce.current=!0,te.current={kind:ie,mode:wt,selection:Le,startX:J.clientX,startY:J.clientY,centerX:hr,centerY:gn,initialPathOffset:It,initialRotation:TL(Le.element),initialBoxSize:EL(Le.element),pathOffsetMember:$t,originLeft:je.left,originTop:je.top,originWidth:je.width,originHeight:je.height,actualWidth:Ve,actualHeight:Ht,actualRotation:Mt.angle,editScaleX:je.editScaleX,editScaleY:je.editScaleY,manualEditDragToken:Bt},!0},Ft=ie=>{const J=te.current,nt=se.current,Le=(J==null?void 0:J.selection)??z.current,je=T.current,Et=ce.current;if(!Et&&!J&&!nt&&Xe.current(ie,{preferClipAncestor:!1}),Et&&Le){const Be=ie.clientX-Et.startX,Mt=ie.clientY-Et.startY;!Et.notified&&Math.hypot(Be,Mt)>=M1&&(Et.notified=!0,N.current=!0,xe.current(Le));return}if(nt){const Be=ie.clientX-nt.startX,Mt=ie.clientY-nt.startY;Je(nt.originItems.map(Ve=>({...Ve,rect:{...Ve.rect,left:Ve.rect.left+Be,top:Ve.rect.top+Mt}})));for(const Ve of nt.members)iy(Ve,Be,Mt);return}if(!J||!Le)return;const lt=ie.clientX-J.startX,wt=ie.clientY-J.startY;if(J.kind==="rotate"){const Be=fy({centerX:J.centerX,centerY:J.centerY,startX:J.startX,startY:J.startY,currentX:ie.clientX,currentY:ie.clientY,actualAngle:J.actualRotation,snap:ie.shiftKey});SL(Le.element,Be);return}if(J.kind==="drag"){const Be=J.originLeft+lt,Mt=J.originTop+wt;Ee({left:Be,top:Mt,width:J.originWidth,height:J.originHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je&&(je.style.left=`${Be}px`,je.style.top=`${Mt}px`),J.pathOffsetMember&&iy(J.pathOffsetMember,lt,wt)}else{if(!je)return;const Be=l_({originWidth:J.originWidth,originHeight:J.originHeight,actualWidth:J.actualWidth,actualHeight:J.actualHeight,scaleX:J.editScaleX,scaleY:J.editScaleY,dx:lt,dy:wt,uniform:ie.shiftKey});Ee({left:J.originLeft,top:J.originTop,width:Be.overlayWidth,height:Be.overlayHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je.style.width=`${Be.overlayWidth}px`,je.style.height=`${Be.overlayHeight}px`,wL(Le.element,Be)}},_t=ie=>{const J=te.current,nt=se.current,Le=(J==null?void 0:J.selection)??z.current,je=T.current;if(ce.current=null,nt){se.current=null,Ce.current=!1;const lt=ie.clientX-nt.startX,wt=ie.clientY-nt.startY;if(Math.hypot(ie.clientX-nt.startX,ie.clientY-nt.startY)<M1){at(nt),N.current=!0;return}Je(nt.originItems.map(Ve=>({...Ve,rect:{...Ve.rect,left:Ve.rect.left+lt,top:Ve.rect.top+wt}})));const Mt=nt.members.map(Ve=>{const Ht=sy(Ve,lt,wt);return{selection:Ve.selection,next:Ht}});Promise.resolve(Qe.current(Mt)).catch(()=>{for(const Ve of nt.members)Ve.gestureToken&&w1(Ve.element,Ve.gestureToken)&&ma(Ve.element,Ve.initialPathOffset)}).finally(()=>{ay(nt.members)});return}if(!J||!Le){te.current=null,Ce.current=!1;return}te.current=null,Ce.current=!1;const Et=Math.hypot(ie.clientX-J.startX,ie.clientY-J.startY);if(J.kind==="drag"&&Et<M1){ma(Le.element,J.initialPathOffset),Ni(Le.element,J.manualEditDragToken),je&&(je.style.left=`${J.originLeft}px`,je.style.top=`${J.originTop}px`),ae(J),N.current=!0,c(ie,{preferClipAncestor:!1});return}if(J.kind==="resize"&&Et<M1){Jp(Le.element,J.initialBoxSize),Ni(Le.element,J.manualEditDragToken),je&&(je.style.width=`${J.originWidth}px`,je.style.height=`${J.originHeight}px`),ae(J);return}if(J.kind==="rotate"){const lt=fy({centerX:J.centerX,centerY:J.centerY,startX:J.startX,startY:J.startY,currentX:ie.clientX,currentY:ie.clientY,actualAngle:J.actualRotation,snap:ie.shiftKey});if(!d_(J.actualRotation,lt.angle)){em(Le.element,J.initialRotation),Ni(Le.element,J.manualEditDragToken);return}kS(Le.element,lt),Promise.resolve(ue.current(Le,lt)).catch(()=>{J.manualEditDragToken&&w1(Le.element,J.manualEditDragToken)&&em(Le.element,J.initialRotation)}).finally(()=>{Ni(Le.element,J.manualEditDragToken)})}else if(J.kind==="drag"){const lt=ie.clientX-J.startX,wt=ie.clientY-J.startY;if(!J.pathOffsetMember)return;const Be=sy(J.pathOffsetMember,lt,wt),Mt=J.originLeft+lt,Ve=J.originTop+wt;Ee({left:Mt,top:Ve,width:J.originWidth,height:J.originHeight,editScaleX:J.editScaleX,editScaleY:J.editScaleY}),je&&(je.style.left=`${Mt}px`,je.style.top=`${Ve}px`),Promise.resolve(De.current(Le,Be)).catch(()=>{var Ht;(Ht=J.pathOffsetMember)!=null&&Ht.gestureToken&&w1(Le.element,J.pathOffsetMember.gestureToken)&&ma(Le.element,J.initialPathOffset)}).finally(()=>{J.pathOffsetMember&&ay([J.pathOffsetMember])})}else{const lt=Zd(Le.element);SS(Le.element,lt),Promise.resolve(ne.current(Le,lt)).catch(()=>{J.manualEditDragToken&&w1(Le.element,J.manualEditDragToken)&&Jp(Le.element,J.initialBoxSize)}).finally(()=>{Ni(Le.element,J.manualEditDragToken)})}},fn=ie=>{if(Oe.current){Oe.current=!1,le.current=!1,N.current=!1,ie.preventDefault(),ie.stopPropagation();return}const J=ie.target;J!=null&&J.closest('[data-dom-edit-selection-box="true"]')||(c(ie,{preferClipAncestor:!1}),ie.shiftKey&&(le.current=!0,N.current=!0))},kr=ie=>{if(!a||ie.button!==0)return;if(ie.shiftKey){const Be=Xe.current(ie,{preferClipAncestor:!1})??F.current;if(!Be)return;ie.preventDefault(),ie.stopPropagation(),Oe.current=!0,le.current=!0,N.current=!0,Fe.current(Be,{additive:!0});return}const J=ie.target;if(J!=null&&J.closest('[data-dom-edit-selection-box="true"]'))return;const Le=Xe.current(ie,{preferClipAncestor:!1})??F.current;if(!(Le!=null&&Le.capabilities.canApplyManualOffset))return;const je=Q.current,Et=e.current,lt=je&&Et?T1(je,Et,Le.element):null;if(!lt)return;if(Oe.current=!0,z.current=Le,re.current=lt,ge.current=null,j(lt),Z(null),!Ot("drag",ie,{selection:Le,rect:lt})){Oe.current=!1;return}Fe.current(Le)},zt=ie=>{if(!(te.current||se.current)){if(N.current){N.current=!1,ie.stopPropagation();return}c(ie,{preferClipAncestor:!1})}},mn=()=>{const ie=se.current;ie&&at(ie);const J=te.current,nt=(J==null?void 0:J.selection)??z.current;(J==null?void 0:J.mode)==="path-offset"&&nt&&(ma(nt.element,J.initialPathOffset),Ni(nt.element,J.manualEditDragToken),ae(J)),(J==null?void 0:J.mode)==="box-size"&&nt&&(Jp(nt.element,J.initialBoxSize),Ni(nt.element,J.manualEditDragToken),ae(J)),(J==null?void 0:J.mode)==="rotation"&&nt&&(em(nt.element,J.initialRotation),Ni(nt.element,J.manualEditDragToken)),ce.current=null,se.current=null,te.current=null,Ce.current=!1};return m.jsxs("div",{ref:Q,className:"absolute inset-0 z-10 pointer-events-auto outline-none",tabIndex:-1,"aria-label":"Composition canvas",onPointerDownCapture:ie=>a_(ie.currentTarget),onPointerDown:kr,onMouseDown:fn,onPointerMove:Ft,onPointerLeave:()=>ze.current(),onPointerUp:_t,onPointerCancel:mn,children:[s&&M&&m.jsx("div",{"aria-hidden":"true","data-dom-edit-hover-box":"true",className:"pointer-events-none absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]",style:{left:M.left,top:M.top,width:M.width,height:M.height}}),de&&L.length>1&&rt&&m.jsxs(m.Fragment,{children:[L.map(ie=>m.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute rounded-xl border border-studio-accent/70 bg-studio-accent/[0.03]",style:{left:ie.rect.left,top:ie.rect.top,width:ie.rect.width,height:ie.rect.height}},ie.key)),m.jsx("div",{"data-dom-edit-selection-box":"true",className:"pointer-events-auto absolute rounded-xl border border-studio-accent bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.3)]",style:{left:rt.left,top:rt.top,width:rt.width,height:rt.height,cursor:a&&Te?"move":"default"},onPointerDown:ie=>{a&&(ie.shiftKey||xt(ie))},onMouseDown:ie=>{le.current&&(le.current=!1,ie.preventDefault(),ie.stopPropagation())},onClick:zt})]}),!de&&r&&C&&m.jsxs(m.Fragment,{children:[a&&r.capabilities.canApplyManualRotation&&m.jsxs("div",{className:"pointer-events-none absolute",style:{left:C.left+C.width/2,top:C.top-34,width:28,height:34,transform:"translateX(-50%)"},children:[m.jsx("div",{className:"absolute left-1/2 top-3 bottom-0 w-px -translate-x-1/2 bg-studio-accent/60"}),m.jsx("button",{type:"button",className:"pointer-events-auto absolute left-1/2 top-0 h-3 w-3 -translate-x-1/2 rounded-full border border-studio-accent bg-studio-accent p-0 shadow-[0_0_0_2px_rgba(60,230,172,0.18)]",style:{cursor:"grab",touchAction:"none"},title:"Rotate","aria-label":"Rotate selection",onPointerDown:ie=>{ie.stopPropagation(),Ot("rotate",ie)}})]}),m.jsx("div",{ref:T,"data-dom-edit-selection-box":"true",className:"pointer-events-auto absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]",style:{left:C.left,top:C.top,width:C.width,height:C.height,cursor:a&&r.capabilities.canApplyManualOffset?"move":"default"},onPointerDown:ie=>{if(a&&!ie.shiftKey){if(r.capabilities.canApplyManualOffset){Ot("drag",ie);return}ie.preventDefault(),ie.stopPropagation(),ie.currentTarget.setPointerCapture(ie.pointerId),ce.current={pointerId:ie.pointerId,startX:ie.clientX,startY:ie.clientY,notified:!1}}},onMouseDown:ie=>{le.current&&(le.current=!1,ie.preventDefault(),ie.stopPropagation())},onClick:zt,children:a&&r.capabilities.canApplyManualSize&&m.jsx("div",{className:"absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60",style:{cursor:"se-resize",touchAction:"none"},onPointerDown:ie=>{ie.stopPropagation(),Ot("resize",ie)}})},tt)]})]})}),h_=new Set(["audio","canvas","img","picture","svg","video"]);function p_(n){const e=Math.max(0,n.length-1);if(e>0)return`${e} nested selectable layer${e===1?"":"s"}`;const t=n[0];return t?h_.has(t.tagName.trim().toLowerCase())?"Single selectable media layer":"Single selectable layer":"No selectable layers"}const m_=d.memo(function({clipLabel:e,layers:t,selectedLayerKey:r,onSelectLayer:i,onClose:s}){return m.jsxs("div",{className:"flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950",children:[m.jsxs("div",{className:"flex items-start justify-between gap-3 border-b border-white/10 px-3 py-3",children:[m.jsxs("div",{className:"min-w-0",children:[m.jsx("div",{className:"text-[9px] font-semibold uppercase tracking-[0.18em] text-neutral-500",children:"Clip layers"}),m.jsx("div",{className:"mt-1 truncate text-sm font-semibold text-neutral-100",children:e})]}),m.jsx("button",{type:"button",onPointerDown:a=>{a.stopPropagation()},onClick:s,className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 text-neutral-500 transition-colors hover:border-white/20 hover:text-neutral-200","aria-label":"Close clip layers",children:m.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round","aria-hidden":"true",children:[m.jsx("path",{d:"M18 6 6 18"}),m.jsx("path",{d:"m6 6 12 12"})]})})]}),m.jsx("div",{className:"border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500",children:p_(t)}),m.jsx("div",{className:"min-h-0 flex-1 overflow-y-auto py-1",children:t.map(a=>{const c=a.key===r;return m.jsxs("button",{type:"button","data-timeline-layer-row":a.key,onPointerDown:u=>{u.stopPropagation(),i(a)},onClick:u=>{u.stopPropagation(),i(a)},className:`group flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors ${c?"bg-studio-accent/14 text-studio-accent":"text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"}`,style:{paddingLeft:10+a.depth*14},children:[m.jsx("span",{className:`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md border text-[9px] font-bold uppercase ${c?"border-studio-accent/50 bg-studio-accent/18":"border-white/10 bg-black/20 text-neutral-500 group-hover:text-neutral-300"}`,children:a.tagName.slice(0,2)}),m.jsx("span",{className:"min-w-0 flex-1 truncate text-xs font-medium",children:a.label}),a.childCount>0&&m.jsx("span",{className:"rounded-full border border-white/10 bg-black/25 px-1.5 py-0.5 text-[9px] font-semibold tabular-nums text-neutral-500",children:a.childCount})]},a.key)})})]})}),g_={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1},O_="VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING",x_="VITE_STUDIO_ENABLE_INSPECTOR_PANELS",y_="VITE_STUDIO_ENABLE_MOTION_PANEL",v_="VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR",b_=new Set(["1","true","yes","on","enabled"]),w_=new Set(["0","false","no","off","disabled"]);function xf(n,e,t){for(const r of e){const i=n[r];if(typeof i=="boolean")return i;if(typeof i!="string")continue;const s=i.trim().toLowerCase();if(s){if(b_.has(s))return!0;if(w_.has(s))return!1}}return t}const yf=g_,Z1=xf(yf,[O_,"VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],!1),Fn=xf(yf,[x_,"VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],!0),hy=xf(yf,[y_,"VITE_STUDIO_MOTION_PANEL_ENABLED"],!1),R1=Fn&&xf(yf,[v_,"VITE_STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED"],!0),py="Manual editing is temporarily disabled";async function vo({label:n,kind:e,coalesceKey:t,files:r,readFile:i,writeFile:s,recordEdit:a}){const c={};for(const[p,O]of Object.entries(r)){const x=await i(p);x!==O&&(c[p]={before:x,after:O})}const u=Object.keys(c);if(u.length===0)return[];const h=[];try{for(const p of u)await s(p,c[p].after),h.push(p);await a({label:n,kind:e,coalesceKey:t,files:c})}catch(p){try{for(const O of h.reverse())await s(O,c[O].before)}catch(O){throw new AggregateError([p,O],"Failed to save project files and rollback did not complete")}throw p}return u}function hl(n){return n.label||n.id||n.tag}const S_=new Set(["inherit","initial","revert","revert-layer","serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-sans-serif","ui-serif","ui-monospace","ui-rounded","emoji","math","fangsong"]);function k_(n){return(n.split(",")[0]??"").trim().replace(/^["']|["']$/g,"")}function my(n,e){const t=k_(e);if(!t||S_.has(t.toLowerCase()))return;const r=`studio-preview-google-font-${t.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(n.getElementById(r))return;const i=n.createElement("link");i.id=r,i.rel="stylesheet",i.href=$S(t),n.head.appendChild(i)}function P_(n){var e;return((e=n.split(",")[0])==null?void 0:e.trim().replace(/^["']|["']$/g,"").trim())??""}function gy(n,e){const t=`studio-imported-font-${e.family.toLowerCase().replace(/[^a-z0-9]+/g,"-")}`;if(n.getElementById(t))return;const r=n.createElement("style");r.id=t,r.textContent=Bg(e),n.head.appendChild(r)}function Oy(n){const e=n.trim(),t=/^[a-z]+:\/\//i.test(e)?new URL(e).pathname:e;return decodeURIComponent(t).replace(/\\/g,"/").replace(/^\.?\//,"")}function A_(n,e){const t=Oy(n).split("/").filter(Boolean),r=Oy(e).split("/").filter(Boolean);for(t.pop();t.length>0&&r.length>0&&t[0]===r[0];)t.shift(),r.shift();return[...t.map(()=>".."),...r].join("/")||e}function $_(n){return/^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(n)}function C_(n,e){const t=e.trim();if(!t)return;const r=t.replace(/\\/g,"/");if($_(r))return r;const i=n==null?void 0:n.trim().replace(/\\/g,"/").replace(/\/+$/,"");if(i)return`${i}/${r.replace(/^\.?\//,"")}`}function xy(n,e,t){const r=Bg(e,A_(t,e.path));if(n.includes(r))return n;const s=/<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i.exec(n);if(s){const c=`${s[2].trim()}
 ${r}`.trim();return n.replace(s[0],`<style data-hf-studio-fonts="true">
 ${c}
 </style>`)}const a=`<style data-hf-studio-fonts="true">

package/dist/index.html CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/player": "0.6.0-alpha.1",
-    "@hyperframes/core": "0.6.0-alpha.1"
+    "@hyperframes/player": "0.6.0-alpha.2",
+    "@hyperframes/core": "0.6.0-alpha.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -47,7 +47,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.0-alpha.1"
+    "@hyperframes/producer": "0.6.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/editor/manualEditingAvailability.test.ts CHANGED Viewed

@@ -16,16 +16,16 @@ describe("manual editing availability", () => {
     vi.resetModules();
   });
-  it("keeps alpha inspector and manual editing surfaces disabled by default", async () => {
+  it("enables inspector layers by default while motion and manual editing stay opt-in", async () => {
     const availability = await loadAvailabilityWithEnv({});
     expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(false);
-    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(false);
+    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
-    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(false);
+    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(true);
   });
-  it("enables inspector layers only through explicit opt-in flags", async () => {
+  it("keeps explicit truthy inspector env flags enabled", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "1",
       VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR: "true",
@@ -35,6 +35,15 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(true);
   });
+  it("allows explicit env flags to disable default-on inspector layers", async () => {
+    const availability = await loadAvailabilityWithEnv({
+      VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR: "off",
+    });
+    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
+    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(false);
+  });
   it("keeps timeline layer inspection off when the parent inspector flag is off", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",

package/src/components/editor/manualEditingAvailability.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag
 export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   [STUDIO_INSPECTOR_PANELS_ENV, "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
-  false,
+  true,
 );
 export const STUDIO_MOTION_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
@@ -52,7 +52,7 @@ export const STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED =
   resolveStudioBooleanEnvFlag(
     env,
     [STUDIO_TIMELINE_LAYER_INSPECTOR_ENV, "VITE_STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED"],
-    false,
+    true,
   );
 export const STUDIO_MANUAL_EDITING_ENABLED = STUDIO_PREVIEW_MANUAL_EDITING_ENABLED;