@rogieking/figui3 6.9.9 → 6.11.0

package/dist/fig-lab.js

@@ -1,40 +1,38 @@
-class P extends HTMLElement{#J=null;#Z=null;#Q=null;#$=!1;#k=null;#U=new Set;#K=0;#G=0;#j=null;#_=null;#E=0;#C=null;#X=!1;#L=0;#B=null;#q=0;#Y=null;#M=null;#z=null;#O=this.#t.bind(this);#A=this.#a.bind(this);#D=this.#l.bind(this);#g=this.#kJ.bind(this);#N=this.#e.bind(this);#R=this.#d.bind(this);#u=new Set(["variant","color","text","full","data-elastic-dragging","style"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#J)this.#f();if(this.#F(),this.#S(),this.#i(),this.#c(),this.removeEventListener("pointerdown",this.#O,{capture:!0}),this.addEventListener("pointerdown",this.#O,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#N),this.addEventListener("contextmenu",this.#N),!this.#k)this.#k=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let _ of J)if(_.type==="attributes"){if(_.attributeName&&this.#u.has(_.attributeName))continue;if(_.attributeName==="label"||_.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#F();if(Z)this.#S(),this.#c()});this.#k.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#k?.disconnect(),this.#K)cancelAnimationFrame(this.#K),this.#K=0;if(this.#G)cancelAnimationFrame(this.#G),this.#G=0;this.#p(),this.#T(),this.#I(),this.#W(),this.#$J(),this.removeEventListener("pointerdown",this.#O,{capture:!0}),this.removeEventListener("contextmenu",this.#N),this.#_?.removeEventListener("change",this.#R)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#J)return;if(J==="label"||J==="direction")this.#F()}#f(){let J=Array.from(this.childNodes).filter((G)=>{return G.nodeType!==Node.TEXT_NODE||Boolean(G.textContent?.trim())}),Q=J.find((G)=>G.nodeType===Node.ELEMENT_NODE&&G.matches("label")),Z=document.createElement("fig-field"),_=Q||document.createElement("label"),$=document.createElement("fig-slider");$.setAttribute("text","true");for(let G of this.#P()){let j=this.getAttribute(G);$.setAttribute(G,j??"")}Z.append(_,$),this.#J=Z,this.#Z=_,this.#Q=$,this.#$=Boolean(Q),this.replaceChildren(Z),this.#H();for(let G of J){if(G===Q)continue;this.#Q.appendChild(G)}}#H(){let J=document.createElement("fig-menu");J.setAttribute("position","bottom left"),J.setAttribute("offset","0 0");let Q=document.createElement("fig-menu-item");Q.setAttribute("value","reset-default"),Q.textContent="Reset to default",J.appendChild(Q),J.addEventListener("change",this.#R),this.#_=J,this.appendChild(J)}#F(){if(!this.#J||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Z.parentElement===this.#J)this.#Z.remove()}else{if(!this.#$)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#J)this.#J.prepend(this.#Z)}this.#J.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#S(){if(!this.#Q)return;let J=this.#P(),Q=new Set(J.filter((_)=>_!=="text"));for(let _ of this.#U)if(!Q.has(_))this.#Q.removeAttribute(_);for(let _ of J){if(_==="text")continue;let $=this.getAttribute(_);this.#Q.setAttribute(_,$??"")}this.#Q.removeAttribute("variant"),this.#Q.removeAttribute("color"),this.#Q.removeAttribute("transform"),this.#Q.removeAttribute("full"),this.#Q.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#Q.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#Q.removeAttribute("default");if(Z==="stepper")this.#Q.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#Q.removeAttribute("step");if(Z==="opacity")this.#Q.style.setProperty("--color","light-dark(#444444, #e6e6e6)");else this.#Q.style.removeProperty("--color");this.#U=Q,this.#V()}#P(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#u.has(Q))}#V(){if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#K=0,this.#KJ(),this.#y()})}#c(){if(this.#G)cancelAnimationFrame(this.#G);this.#G=requestAnimationFrame(()=>{this.#G=0,this.#y()})}#y(){let J=this.#Q?.querySelector('input[type="range"]'),Q=this.#Q?.querySelector("fig-input-number input");if(J!==this.#j)this.#r(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#r(J){if(this.#W(),this.#j=J,!this.#j)return;this.#j.addEventListener("dblclick",this.#g,{capture:!0})}#W(){if(!this.#j)return;this.#j.removeEventListener("dblclick",this.#g,{capture:!0}),this.#j=null}#kJ(J){J.preventDefault(),J.stopImmediatePropagation(),this.#QJ()}#t(J){if(J.button!==0||this.hasAttribute("disabled"))return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#Q?.querySelector('input[type="range"]')??this.#j;if(!Q)return;this.#T(),this.#I(),this.#j=Q,this.#X=!0,this.#Y=J.pointerId,this.#L=this.#w();let Z=Q.getBoundingClientRect(),_=this.getBoundingClientRect();this.#B={left:Z.left,right:Z.right,width:Z.width},this.#q=_.width,window.addEventListener("pointermove",this.#A,{passive:!0}),window.addEventListener("pointerup",this.#D,{once:!0}),window.addEventListener("pointercancel",this.#D,{once:!0}),window.addEventListener("blur",this.#D,{once:!0})}#a(J){if(!this.#X)return;if(J.pointerId!==this.#Y)return;if(J.buttons===0){this.#l(J);return}this.#_J(J.clientX)}#l(J){if(J?.pointerId!==void 0&&this.#Y!==null&&J.pointerId!==this.#Y)return;this.#T(),this.#I()}#T(){window.removeEventListener("pointermove",this.#A),window.removeEventListener("pointerup",this.#D),window.removeEventListener("pointercancel",this.#D),window.removeEventListener("blur",this.#D),this.#X=!1,this.#Y=null}#e(J){if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#p(),this.#qJ(J.clientX,J.clientY)}#qJ(J,Q){let Z=!1,_=0,$=()=>{if(Z)return;Z=!0,window.clearTimeout(_),window.removeEventListener("pointerup",$,!0),window.removeEventListener("pointercancel",$,!0),requestAnimationFrame(()=>{this.#_?.showAt?.(J,Q)})};window.addEventListener("pointerup",$,{once:!0,capture:!0}),window.addEventListener("pointercancel",$,{once:!0,capture:!0}),_=window.setTimeout($,180)}#d(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#QJ()}#p(){if(this.#E)clearTimeout(this.#E),this.#E=0;this.#C=null}#w(){let J=getComputedStyle(this).getPropertyValue("--fig-field-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--fig-field-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#_J(J){let Q=this.#B;if(!Q||!this.#L){this.#I();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#o();return}let _=Math.max(-this.#L,Math.min(this.#L,Z*0.5)),$=Math.abs(_),G=this.#q?(this.#q+$)/this.#q:1;this.dataset.elasticDragging="true",this.style.setProperty("--fig-field-slider-elastic-size",`${$}px`),this.style.setProperty("--fig-field-slider-elastic-scale",`${G}`),this.style.setProperty("--fig-field-slider-elastic-origin",_<0?"right center":"left center")}#I(){this.#o(),this.#L=0,this.#B=null,this.#q=0,this.#Y=null}#o(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--fig-field-slider-elastic-size"),this.style.removeProperty("--fig-field-slider-elastic-scale"),this.style.removeProperty("--fig-field-slider-elastic-origin")}#NJ(J){let Q=this.#j;if(!Q)return this.#Q?.value??"";let Z=Q.getBoundingClientRect(),_=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,$=Number(Q.min||0),G=Number(Q.max||100),j=Q.step==="any"?0:Number(Q.step||1),q=$+(G-$)*_;if(!j)return String(q);let k=Math.round((q-$)/j)*j+$,K=Math.max(0,`${j}`.split(".")[1]?.length||0);return String(Number(k.toFixed(K)))}#JJ(){return this.getAttribute("default")??this.#Q?.getAttribute("default")??this.getAttribute("value")??this.#Q?.getAttribute("value")??this.#j?.min??"0"}#QJ(){this.#p(),this.#ZJ(this.#JJ(),"input"),this.#ZJ(this.#JJ(),"change")}#ZJ(J,Q){if(!this.#Q||J===null||J===void 0)return;this.#Q.value=J,this.dispatchEvent(new CustomEvent(Q,{detail:this.#Q.value,bubbles:!0,cancelable:!0,composed:!0}))}#KJ(){if(!this.#Q)return;let J=this.#Q.querySelector("fig-input-number");if(!J)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){J.removeAttribute("steppers");return}let Z=this.getAttribute("steppers");J.setAttribute("steppers",Z??"")}#i(){if(!this.#Q)return;if(!this.#M)this.#M=this.#b.bind(this,"input");if(!this.#z)this.#z=this.#b.bind(this,"change");this.#Q.addEventListener("input",this.#M),this.#Q.addEventListener("change",this.#z)}#$J(){if(!this.#Q)return;if(this.#M)this.#Q.removeEventListener("input",this.#M);if(this.#z)this.#Q.removeEventListener("change",this.#z)}#b(J,Q){if(Q.stopPropagation(),J==="change")this.#I();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#Q?.value;this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#Q?.querySelector('input[type="range"]')?.focus(J)}resetToDefault(){this.#QJ()}}customElements.define("fig-field-slider",P);class C extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#J=50;#Z=50;#Q=75;#$=75;#k=0;#U=!1;#K=0;#G=null;#j=null;#_=null;#E=null;#C=null;#X=null;#L=null;#B=null;#q=null;#Y=!1;#M=!1;#z=!1;#O=!1;#A=null;#D="";#g="";#N=null;get#R(){return this.getAttribute("type")||"point"}get#u(){return this.#R==="point-radius"||this.#R==="point-radius-angle"}get#f(){return this.#R==="point-radius-angle"}get#H(){return this.#R==="point-point"}get#F(){return this.#R==="point-radius-angle"||this.#R==="point-point"}get#S(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#P(){let J=this.getAttribute("snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#V(J){let Q=this.#P;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#c(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#J)}%, ${Math.round(this.#Z)}%`}get#y(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#Q)}%, ${Math.round(this.#$)}%`}get#r(){return this.getAttribute("drag-surface")||"parent"}get#W(){let J=this.#r;if(J==="parent")return this.parentElement;return this.closest(J)}get#kJ(){let J=this.#r;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#t(J){if(this.#U)return this.#k/100*J;return this.#k}#a(){if(this.#U)return`Radius ${Math.round(this.#k)}%`;return`Radius ${Math.round(this.#k)}`}connectedCallback(){this.#l(),this.#T()}disconnectedCallback(){this.#XJ(),this.#d(),document.body.classList.remove("fig-lab-move-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#Y&&!this.#M&&!this.#z&&!this.#O)if(this.#l(),this.#G)this.#x();else this.#T();if(J==="type")this.#l(),this.#T();if(J==="color"&&this.#G)if(Z)this.#G.setAttribute("color",Z);else this.#G.removeAttribute("color");if(J==="disabled")this.#T();if(J==="tooltips")this.#T();if(J==="snapping"&&this.#G){if(this.#G.setAttribute("drag-snapping",Z||"false"),this.#j)this.#j.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#X)this.#X.setAttribute("text",this.#c);if(this.#L)this.#L.setAttribute("text",this.#y)}}#l(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#J=Q.x;if(typeof Q.y==="number")this.#Z=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#U=!0,this.#k=parseFloat(Z);else this.#U=!1,this.#k=parseFloat(Z);if(!Number.isFinite(this.#k))this.#k=0}if(typeof Q.angle==="number")this.#K=Q.angle;if(typeof Q.x2==="number")this.#Q=Q.x2;if(typeof Q.y2==="number")this.#$=Q.y2}catch{}}get value(){let J={x:this.#J,y:this.#Z};if(this.#R==="color"){let Q=this.getAttribute("color")||this.#G?.getAttribute("color");if(Q)J.color=Q}if(this.#u)J.radius=this.#U?`${this.#k}%`:this.#k;if(this.#f)J.angle=this.#K;if(this.#H)J.x2=this.#Q,J.y2=this.#$;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#T(){this.innerHTML="",this.#G=null,this.#j=null,this.#_=null,this.#E=null,this.#C=null,this.#X=null,this.#L=null,this.#B=null,this.#q=null;let J=this.hasAttribute("disabled"),Q=this.#R,Z=this.#S,_=this.#kJ,$=document.createElement("fig-handle");if($.setAttribute("drag","true"),$.setAttribute("drag-surface",_),$.setAttribute("drag-axes","x,y"),$.setAttribute("drag-snapping",this.#P),$.setAttribute("value",`${this.#J}% ${this.#Z}%`),J)$.setAttribute("disabled","");if(Q==="color"){$.setAttribute("type","color");let G=this.getAttribute("color");if(G)$.setAttribute("color",G)}else $.setAttribute("type","canvas");if(this.#H)$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate");if(this.#G=$,this.#u)this.#NJ();if(this.#F)this.#JJ();if(Z){let G=document.createElement("fig-tooltip");G.setAttribute("action","manual"),G.setAttribute("theme","canvas"),G.setAttribute("pointer","false"),G.setAttribute("text",this.#c),G.appendChild($),this.appendChild(G),this.#X=G}else this.appendChild($);if(this.#f)this.#ZJ(J,Z,_);if(this.#H)this.#KJ(J,Z,_);this.#e(this.#G),this.#e(this.#_),this.#e(this.#j),this.#BJ(),this.#_J(),requestAnimationFrame(()=>this.#x())}#e(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>this.#qJ(Q),{capture:!0})}#qJ(J){if(this.hasAttribute("disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#A===null)this.#D=document.body.style.getPropertyValue("cursor"),this.#g=document.body.style.getPropertyPriority("cursor");if(this.#A=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#N)this.#N=(Q)=>{if(Q?.pointerId!==void 0&&this.#A!==null&&Q.pointerId!==this.#A)return;if(Q?.type==="blur")this.#d();else requestAnimationFrame(()=>this.#d())};window.addEventListener("pointerup",this.#N),window.addEventListener("pointercancel",this.#N),window.addEventListener("blur",this.#N)}#d(){if(this.#A===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#D)document.body.style.setProperty("cursor",this.#D,this.#g);else document.body.style.removeProperty("cursor");if(this.#A=null,this.#D="",this.#g="",this.#N)window.removeEventListener("pointerup",this.#N),window.removeEventListener("pointercancel",this.#N),window.removeEventListener("blur",this.#N)}#p(J,Q,Z,_){if(!J)return;let $=()=>!!_?.(),G=()=>{let k=Q();if(!k)return;k.removeAttribute("show"),k.hidePopup?.()},j=()=>{if($()){G();return}let k=Q();if(!k)return;if(Z)k.setAttribute("text",Z());k.setAttribute("show","true"),k.showPopup?.()},q=()=>{G()};J.addEventListener("pointerenter",j),J.addEventListener("pointerleave",q)}#w(){return this.#Y||this.#M||this.#z||this.#O}#_J(){if(this.#G)this.#p(this.#G,()=>this.#X,()=>this.#c,()=>this.#w()||!!this.#G?.querySelector("fig-color-tip"));if(this.#_)this.#p(this.#_,()=>this.#q,()=>`Angle ${Math.round(this.#K)}°`,()=>this.#w());if(this.#j)this.#p(this.#j,()=>this.#L,()=>this.#y,()=>this.#w());if(this.#E){let J=this.#E.querySelector(".fig-canvas-control-radius-hit");this.#o(J||this.#E)}if(this.#R==="color"&&this.#G&&this.#X)new MutationObserver(()=>{if(this.#G?.querySelector("fig-color-tip"))this.#X?.removeAttribute("show"),this.#X?.hidePopup?.()}).observe(this.#G,{childList:!0,subtree:!0})}#I(J,Q){let Z=this.#B;if(!Z?.popup)return;let _=Q-8;Z.popup.anchor={getBoundingClientRect:()=>({left:J,top:_,right:J,bottom:_,width:0,height:0,x:J,y:_})},Z.popup.queueReposition?.()}#o(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#B;if(!Z)return;Z.setAttribute("text",this.#a()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#z)return;this.#I(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#z)return;let Q=this.#B;if(!Q)return;Q.removeAttribute("show")})}#NJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let _=document.createElementNS("http://www.w3.org/2000/svg","circle");_.classList.add("fig-canvas-control-radius-halo"),Q.appendChild(_);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild($),this.#E=Q,this.#S){let G=document.createElement("fig-tooltip");G.setAttribute("action","manual"),G.setAttribute("theme","canvas"),G.setAttribute("pointer","false"),G.setAttribute("text",this.#a()),G.appendChild(Q),this.appendChild(G),this.#B=G}else this.appendChild(Q);this.#OJ(Z)}#JJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(Q.classList.add("fig-canvas-control-angle-svg"),Q.setAttribute("overflow","visible"),Q.style.position="absolute",Q.style.pointerEvents="none",this.#H){let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line-hit"),$.setAttribute("stroke","transparent"),$.setAttribute("stroke-width","12"),$.setAttribute("stroke-linecap","round"),$.style.pointerEvents="stroke",Q.appendChild($),this.#QJ($)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let _=document.createElementNS("http://www.w3.org/2000/svg","line");_.classList.add("fig-canvas-control-angle-line"),Q.appendChild(_),this.#C=Q,this.appendChild(Q)}#QJ(J){J.addEventListener("pointerdown",(Q)=>{if(this.hasAttribute("disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#W;if(!Z)return;let _=Z.getBoundingClientRect(),$=Q.clientX,G=Q.clientY,j=this.#J,q=this.#Z,k=this.#Q,K=this.#$;this.#Y=!0,this.#M=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let Y=(X)=>{let O=Z.getBoundingClientRect(),z=O.width>0?(X.clientX-$)/O.width*100:0,U=O.height>0?(X.clientY-G)/O.height*100:0,L=-Math.min(j,k),V=100-Math.max(j,k),f=-Math.min(q,K),E=100-Math.max(q,K),M=Math.max(L,Math.min(V,z)),S=Math.max(f,Math.min(E,U));this.#J=j+M,this.#Z=q+S,this.#Q=k+M,this.#$=K+S,this.#x(),this.#v()},B=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#s(),this.#m(),window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",B),requestAnimationFrame(()=>{this.#Y=!1,this.#M=!1})};window.addEventListener("pointermove",Y),window.addEventListener("pointerup",B)})}#ZJ(J,Q,Z){let _=document.createElement("fig-handle");if(_.setAttribute("type","canvas"),_.setAttribute("drag","true"),_.setAttribute("drag-surface",Z),_.setAttribute("drag-axes","x,y"),_.setAttribute("size","small"),_.setAttribute("hit-area","12 circle"),_.setAttribute("hit-area-mode","delegate"),J)_.setAttribute("disabled","");if(this.#_=_,Q){let $=document.createElement("fig-tooltip");$.setAttribute("action","manual"),$.setAttribute("theme","canvas"),$.setAttribute("pointer","false"),$.setAttribute("text",`${Math.round(this.#K)}°`),$.appendChild(_),this.appendChild($),this.#q=$}else this.appendChild(_)}#KJ(J,Q,Z){let _=document.createElement("fig-handle");if(_.setAttribute("type","canvas"),_.setAttribute("drag","true"),_.setAttribute("drag-surface",Z),_.setAttribute("drag-axes","x,y"),_.setAttribute("drag-snapping",this.#P),_.setAttribute("hit-area","12 circle"),_.setAttribute("hit-area-mode","delegate"),_.setAttribute("value",`${this.#Q}% ${this.#$}%`),J)_.setAttribute("disabled","");if(this.#j=_,Q){let $=document.createElement("fig-tooltip");$.setAttribute("action","manual"),$.setAttribute("theme","canvas"),$.setAttribute("pointer","false"),$.setAttribute("text",this.#y),$.appendChild(_),this.appendChild($),this.#L=$}else this.appendChild(_)}#i(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#$J(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#b(){if(!this.#_||!this.#f)return;let J=this.#_.querySelector(".fig-handle-hit-area");if(!J)return;J.style.cursor=this.#$J(this.#K)}#YJ(){return Math.atan2(this.#$-this.#Z,this.#Q-this.#J)*180/Math.PI}#GJ(){if(!this.#H)return;let J=this.#YJ(),Q=(Z,_)=>{if(!Z)return;let $=Z.querySelector(".fig-handle-hit-area");if($)$.style.cursor=this.#$J(_)};Q(this.#G,J+180),Q(this.#j,J)}#jJ(J,Q,Z,_){J.style.setProperty("--fig-handle-position-translate","-50% -50%"),J.style.left=`${Q/100*_.width}px`,J.style.top=`${Z/100*_.height}px`}#x(){let J=this.#W;if(!J||!this.#G)return;let Q=J.getBoundingClientRect();if(this.#jJ(this.#G,this.#J,this.#Z,Q),this.#E){let Z=this.#J/100*Q.width,_=this.#Z/100*Q.height,$=this.#t(Q.width),G=this.#E,j=Math.max($*2,1);G.style.position="absolute",G.style.width=`${j}px`,G.style.height=`${j}px`,G.style.left=`${Z-$}px`,G.style.top=`${_-$}px`,G.setAttribute("viewBox",`0 0 ${j} ${j}`);let q=G.querySelectorAll("circle");for(let k of q)k.setAttribute("cx",String($)),k.setAttribute("cy",String($)),k.setAttribute("r",String(Math.max($-1,0)))}if(this.#C&&this.#F){let Z=this.#J/100*Q.width,_=this.#Z/100*Q.height,$,G;if(this.#H)$=this.#Q/100*Q.width,G=this.#$/100*Q.height;else{let k=this.#t(Q.width),K=this.#K*Math.PI/180;$=Z+k*Math.cos(K),G=_+k*Math.sin(K)}let j=this.#C;j.style.width=`${Q.width}px`,j.style.height=`${Q.height}px`,j.style.left="0",j.style.top="0",j.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let q=j.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let k of q)k.setAttribute("x1",String(Z)),k.setAttribute("y1",String(_)),k.setAttribute("x2",String($)),k.setAttribute("y2",String(G))}if(this.#_&&this.#f){let Z=this.#J/100*Q.width,_=this.#Z/100*Q.height,$=this.#t(Q.width),G=this.#K*Math.PI/180,j=Z+$*Math.cos(G),q=_+$*Math.sin(G),k=Q.width>0?j/Q.width*100:0,K=Q.height>0?q/Q.height*100:0;this.#jJ(this.#_,k,K,Q)}if(this.#j&&this.#H)this.#jJ(this.#j,this.#Q,this.#$,Q);this.#b(),this.#GJ()}#v(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#m(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#s(){this.setAttribute("value",JSON.stringify(this.value))}#BJ(){if(!this.#G)return;if(this.#G.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#v();return}this.#Y=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#Z/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#X)this.#X.removeAttribute("show"),this.#X.hidePopup?.();this.#x(),this.#v()}),this.#G.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#m();return}let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#Z/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#X)this.#X.removeAttribute("show");this.#x(),this.#s(),this.#m(),requestAnimationFrame(()=>{this.#Y=!1})}),this.#_)this.#_.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#W;if(!Q)return;this.#O=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),_=this.#J/100*Z.width,$=this.#Z/100*Z.height,G=J.detail?.x??0,j=J.detail?.y??0,q=this.#_.offsetWidth/2,k=this.#_.offsetHeight/2,K=G+q-_,Y=j+k-$,B=Math.atan2(Y,K)*180/Math.PI;if(this.#V(J.detail?.shiftKey))B=Math.round(B/15)*15;this.#K=B;let X=Math.sqrt(K*K+Y*Y);if(this.#V(J.detail?.shiftKey)){let O=this.#U?5:10;if(this.#U){let z=X/Z.width*100;z=Math.round(z/O)*O,X=z/100*Z.width}else X=Math.round(X/O)*O}if(this.#U)this.#k=Math.max(0,X/Z.width*100);else this.#k=Math.max(0,X);if(this.#q)this.#q.setAttribute("text",`Angle ${Math.round(this.#K)}°`),this.#q.setAttribute("show","true"),this.#q.showPopup?.();this.#x(),this.#v()}),this.#_.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#q)this.#q.removeAttribute("show");this.#x(),this.#s(),this.#m(),requestAnimationFrame(()=>{this.#O=!1})}),this.#_.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#W;if(!Z)return;if(this.#O=!0,this.classList.add("fig-canvas-control-ring-active"),this.#_.setAttribute("selected",""),this.#q)this.#q.setAttribute("show","true"),this.#q.showPopup?.();let _=(G)=>{let j=Z.getBoundingClientRect(),q=this.#J/100*j.width,k=this.#Z/100*j.height,K=G.clientX-j.left-q,Y=G.clientY-j.top-k,B=Math.atan2(Y,K)*180/Math.PI;if(this.#V(G.shiftKey))B=Math.round(B/15)*15;if(this.#K=B,this.#q)this.#q.setAttribute("text",`Angle ${Math.round(B)}°`);this.#x(),this.#v()},$=()=>{if(this.#O=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#_.removeAttribute("selected"),this.#q)this.#q.removeAttribute("show");this.#s(),this.#m(),window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",$)};window.addEventListener("pointermove",_),window.addEventListener("pointerup",$)});if(this.#j)this.#j.addEventListener("input",(J)=>{J.stopPropagation(),this.#M=!0;let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#$/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#$=Math.round(Math.max(0,Math.min(100,Z*100))),this.#L)this.#L.removeAttribute("show"),this.#L.hidePopup?.();this.#x(),this.#v()}),this.#j.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#L)this.#L.removeAttribute("show");this.#x(),this.#s(),this.#m(),requestAnimationFrame(()=>{this.#M=!1})}),this.#n(this.#G,!0),this.#n(this.#j,!1)}#n(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let _=Z.detail?.originalEvent;if(!_)return;_.preventDefault();let $=this.#W;if(!$)return;this.#Y=!0;let G=$.getBoundingClientRect(),j=Q?this.#Q:this.#J,q=Q?this.#$:this.#Z,k=Q?this.#J:this.#Q,K=Q?this.#Z:this.#$,Y=j/100*G.width,B=q/100*G.height,X=k/100*G.width,O=K/100*G.height,z=Math.sqrt((X-Y)**2+(O-B)**2),U=Q?this.#X:this.#L;if(U)U.removeAttribute("show"),U.hidePopup?.();let L=(f)=>{let E=$.getBoundingClientRect(),M=j/100*E.width,S=q/100*E.height,R=f.clientX-E.left-M,W=f.clientY-E.top-S,F=Math.atan2(W,R);if(this.#V(f.shiftKey))F=Math.round(F*180/Math.PI/15)*15*Math.PI/180;let H=M+z*Math.cos(F),T=S+z*Math.sin(F),I=Math.max(0,Math.min(100,H/E.width*100)),D=Math.max(0,Math.min(100,T/E.height*100));if(Q)this.#J=I,this.#Z=D;else this.#Q=I,this.#$=D;this.#x(),this.#v()},V=()=>{if(this.#Y=!1,U)U.removeAttribute("show");this.#s(),this.#m(),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",V)};window.addEventListener("pointermove",L),window.addEventListener("pointerup",V)})}#OJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#z)return;let _=this.#W;if(!_)return;let $=_.getBoundingClientRect(),G=this.#J/100*$.width,j=this.#Z/100*$.height,q=Math.atan2(Z.clientY-$.top-j,Z.clientX-$.left-G)*180/Math.PI;J.style.cursor=this.#i(q)});let Q=(Z)=>{if(this.hasAttribute("disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let _=this.#W;if(!_)return;if(this.#B)this.#B.setAttribute("show","true"),this.#B.showPopup?.(),this.#I(Z.clientX,Z.clientY);if(this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();let $=this.#_?.style.pointerEvents,G=this.#_?.querySelector(".fig-handle-hit-area"),j=G?.style.pointerEvents;if(this.#_)this.#_.style.pointerEvents="none";if(G)G.style.pointerEvents="none";let q=document.body.style.cursor;J.style.pointerEvents="none";let k=_.getBoundingClientRect(),K=this.#J/100*k.width,Y=this.#Z/100*k.height,B=Math.atan2(Z.clientY-k.top-Y,Z.clientX-k.left-K)*180/Math.PI,X=Math.round(B);document.body.style.cursor=this.#i(X);let O=(U)=>{let L=_.getBoundingClientRect(),V=this.#J/100*L.width,f=this.#Z/100*L.height,E=U.clientX-L.left-V,M=U.clientY-L.top-f,S=Math.round(Math.atan2(M,E)*180/Math.PI);if(S!==X)X=S,document.body.style.cursor=this.#i(S);let R=Math.sqrt(E*E+M*M);if(this.#V(U.shiftKey)){let W=this.#U?5:10;if(this.#U){let F=R/L.width*100;F=Math.round(F/W)*W,R=F/100*L.width}else R=Math.round(R/W)*W}if(this.#U)this.#k=Math.max(0,R/L.width*100);else this.#k=Math.max(0,R);if(this.#B)this.#B.setAttribute("text",this.#a()),this.#I(U.clientX,U.clientY);this.#x(),this.#v()},z=()=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#_)this.#_.style.pointerEvents=$??"";if(G)G.style.pointerEvents=j??"";if(document.body.style.cursor=q,this.#B)this.#B.removeAttribute("show");this.#s(),this.#m(),window.removeEventListener("pointermove",O),window.removeEventListener("pointerup",z)};window.addEventListener("pointermove",O),window.addEventListener("pointerup",z)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#XJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",C);class N extends HTMLElement{#J=[N.#O()];#Z=0;#Q=2;#$=240;#k=120;#U=null;#K=null;#G=null;#j=null;#_=0;#E=null;#C=null;#X=null;#L=null;#B=null;#q=[];#Y=[];#M=[];#z=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#O(J="sine"){return{type:J,frequency:1,amplitude:1,phase:0,offset:0}}static get observedAttributes(){return["value","precision","aspect-ratio","edit","disabled"]}connectedCallback(){this.#Q=this.#A("precision",2),this.#u(this.getAttribute("value")),this.#R(),this.#W(),this.#qJ()}disconnectedCallback(){if(this.#U=null,this.#JJ(),this.#z)this.#z.disconnect(),this.#z=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#u(Z),this.isConnected)this.#W();return}if(J==="precision"){if(this.#Q=this.#A("precision",2),this.isConnected)this.#n();return}if(J==="aspect-ratio"){if(this.#R(),this.#K)this.#o();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#W()}}get value(){return JSON.stringify(this.data)}set value(J){this.setAttribute("value",typeof J==="object"&&J!==null?JSON.stringify(J):J)}get data(){return{waves:this.#J.map((J)=>this.#H(J))}}get preset(){let J=this.#F;return N.TYPES.find((Q)=>Q.value===J.type)?.name}#A(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Z:Q}#D(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let _=Z.trim().toLowerCase();if(_===""||_==="true")return!0;if(_==="false")return!1;return!0}#g(){return this.getAttribute("edit")!=="false"}#N(){return this.#D("disabled",!1)}#R(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#u(J){if(!J)return!1;let Q=null;if(typeof J==="string")try{Q=JSON.parse(J)}catch{Q=null}else if(typeof J==="object")Q=J;if(!Q)return!1;let Z=Array.isArray(Q)?Q:Array.isArray(Q.waves)?Q.waves:[Q];if(this.#J=Z.map((_)=>this.#f(_)),!this.#J.length)this.#J=[N.#O()];return this.#Z=Math.min(this.#Z,this.#J.length-1),!0}#f(J={}){return{type:this.#S(J.type),frequency:this.#P(J.frequency,1,0.1,16),amplitude:this.#P(J.amplitude,1,-4,4),phase:this.#P(J.phase,0,-360,360),offset:this.#P(J.offset,0,-4,4)}}#H(J){return{type:J.type,frequency:this.#V(J.frequency),amplitude:this.#V(J.amplitude),phase:this.#V(J.phase),offset:this.#V(J.offset)}}get#F(){if(!this.#J[this.#Z])this.#Z=0;return this.#J[this.#Z]||N.#O()}#S(J){let Q=String(J||"").toLowerCase();return N.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#P(J,Q,Z,_){let $=Number.parseFloat(J);if(!Number.isFinite($))return Q;return Math.min(_,Math.max(Z,$))}#V(J){let Q=10**this.#Q;return Math.round(J*Q)/Q}static#c(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#y(J){return N.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let $=Q-10,G="";for(let j=0;j<=32;j++){let q=j/32,k=N.#r(J,q),K=5+q*$,Y=5+(1-(k+1)/2)*$;G+=`${j===0?"M":"L"}${K.toFixed(1)},${Y.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${G}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#r(J,Q,Z=0){let _=Q+Z/360,$=_-Math.floor(_),G=_*Math.PI*2;switch(J){case"square":return Math.sin(G)>=0?1:-1;case"sawtooth":return $*2-1;case"triangle":return 1-Math.abs($*4-2);default:return Math.sin(G)}}#W(){this.#JJ(),this.innerHTML=this.#kJ(),this.#e(),this.#d(),this.#o(),this.#$J(),this.#NJ()}#kJ(){let J=this.#N()?" disabled":"";return`<div class="fig-input-oscillator-svg-container">
-        <svg viewBox="0 0 ${this.#$} ${this.#k}" class="fig-input-oscillator-svg">
-          <rect class="fig-input-oscillator-bounds" x="0" y="0" width="${this.#$}" height="${this.#k}"></rect>
+class H extends HTMLElement{#Q=null;#Z=null;#J=null;#_=!1;#B=null;#q=new Set;#G=0;#j=0;#X=null;#$=null;#N=0;#E=null;#P=!1;#k=0;#Y=null;#K=0;#L=null;#M=null;#U=null;#O=this.#g.bind(this);#f=this.#n.bind(this);#z=this.#l.bind(this);#x=this.#r.bind(this);#R=this.#e.bind(this);#D=this.#JJ.bind(this);#C=new Set(["variant","color","text","full","elastic","size","name","class","data-wave-index","data-active","data-elastic-dragging","style"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Q)this.#F();if(this.#V(),this.#T(),this.#a(),this.#A(),this.removeEventListener("pointerdown",this.#O,{capture:!0}),this.addEventListener("pointerdown",this.#O,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#R),this.addEventListener("contextmenu",this.#R),!this.#B)this.#B=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName&&this.#C.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#V();if(Z)this.#T(),this.#A()});this.#B.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#B?.disconnect(),this.#G)cancelAnimationFrame(this.#G),this.#G=0;if(this.#j)cancelAnimationFrame(this.#j),this.#j=0;this.#s(),this.#c(),this.#y(),this.#h(),this.#jJ(),this.removeEventListener("pointerdown",this.#O,{capture:!0}),this.removeEventListener("contextmenu",this.#R),this.#$?.removeEventListener("change",this.#D)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Q)return;if(J==="label"||J==="direction")this.#V()}#F(){let J=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),Q=J.find((j)=>j.nodeType===Node.ELEMENT_NODE&&j.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),_=document.createElement("fig-slider");_.setAttribute("text","true");for(let j of this.#W()){let X=this.getAttribute(j);_.setAttribute(j,X??"")}Z.append($,_),this.#Q=Z,this.#Z=$,this.#J=_,this.#_=Boolean(Q),this.replaceChildren(Z),this.#H();for(let j of J){if(j===Q)continue;this.#J.appendChild(j)}}#H(){let J=document.createElement("fig-menu");J.setAttribute("position","bottom left"),J.setAttribute("offset","0 0");let Q=document.createElement("fig-menu-item");Q.setAttribute("value","reset-default"),Q.textContent="Reset to default",J.appendChild(Q),J.addEventListener("change",this.#D),this.#$=J,this.appendChild(J)}#V(){if(!this.#Q||!this.#Z)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Z.parentElement===this.#Q)this.#Z.remove()}else{if(!this.#_)this.#Z.textContent=J?Q??"":"Label";if(this.#Z.parentElement!==this.#Q)this.#Q.prepend(this.#Z)}this.#Q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#T(){if(!this.#J)return;let J=this.#W(),Q=new Set(J.filter(($)=>$!=="text"));for(let $ of this.#q)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text")continue;let _=this.getAttribute($);this.#J.setAttribute($,_??"")}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(Z==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(Z==="opacity")this.#J.style.setProperty("--color","light-dark(#444444, #e6e6e6)");else this.#J.style.removeProperty("--color");this.#q=Q,this.#I()}#W(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#C.has(Q))}#I(){if(this.#G)cancelAnimationFrame(this.#G);this.#G=requestAnimationFrame(()=>{this.#G=0,this.#BJ(),this.#b()})}#A(){if(this.#j)cancelAnimationFrame(this.#j);this.#j=requestAnimationFrame(()=>{this.#j=0,this.#b()})}#b(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#X)this.#t(J);J?.removeAttribute("tabindex"),Q?.setAttribute("tabindex","-1")}#t(J){if(this.#h(),this.#X=J,!this.#X)return;this.#X.addEventListener("dblclick",this.#x,{capture:!0})}#h(){if(!this.#X)return;this.#X.removeEventListener("dblclick",this.#x,{capture:!0}),this.#X=null}#r(J){J.preventDefault(),J.stopImmediatePropagation(),this.#p()}#g(J){if(J.button!==0||this.hasAttribute("disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#J?.querySelector('input[type="range"]')??this.#X;if(!Q)return;this.#c(),this.#y(),this.#X=Q,this.#P=!0,this.#L=J.pointerId,this.#k=this.#QJ();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#Y={left:Z.left,right:Z.right,width:Z.width},this.#K=$.width,window.addEventListener("pointermove",this.#f,{passive:!0}),window.addEventListener("pointerup",this.#z,{once:!0}),window.addEventListener("pointercancel",this.#z,{once:!0}),window.addEventListener("blur",this.#z,{once:!0})}#n(J){if(!this.#P)return;if(J.pointerId!==this.#L)return;if(J.buttons===0){this.#l(J);return}this.#XJ(J.clientX)}#l(J){if(J?.pointerId!==void 0&&this.#L!==null&&J.pointerId!==this.#L)return;this.#c(),this.#y()}#c(){window.removeEventListener("pointermove",this.#f),window.removeEventListener("pointerup",this.#z),window.removeEventListener("pointercancel",this.#z),window.removeEventListener("blur",this.#z),this.#P=!1,this.#L=null}#e(J){if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#s(),this.#i(J.clientX,J.clientY)}#i(J,Q){let Z=!1,$=0,_=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",_,!0),window.removeEventListener("pointercancel",_,!0),requestAnimationFrame(()=>{this.#$?.showAt?.(J,Q)})};window.addEventListener("pointerup",_,{once:!0,capture:!0}),window.addEventListener("pointercancel",_,{once:!0,capture:!0}),$=window.setTimeout(_,180)}#JJ(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#p()}#s(){if(this.#N)clearTimeout(this.#N),this.#N=0;this.#E=null}#QJ(){let J=getComputedStyle(this).getPropertyValue("--fig-field-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--fig-field-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#XJ(J){let Q=this.#Y;if(!Q||!this.#k){this.#y();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#ZJ();return}let $=Math.max(-this.#k,Math.min(this.#k,Z*0.5)),_=Math.abs($),j=this.#K?(this.#K+_)/this.#K:1;this.dataset.elasticDragging="true",this.style.setProperty("--fig-field-slider-elastic-size",`${_}px`),this.style.setProperty("--fig-field-slider-elastic-scale",`${j}`),this.style.setProperty("--fig-field-slider-elastic-origin",$<0?"right center":"left center")}#y(){this.#ZJ(),this.#k=0,this.#Y=null,this.#K=0,this.#L=null}#ZJ(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--fig-field-slider-elastic-size"),this.style.removeProperty("--fig-field-slider-elastic-scale")}#d(J){let Q=this.#X;if(!Q)return this.#J?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,_=Number(Q.min||0),j=Number(Q.max||100),X=Q.step==="any"?0:Number(Q.step||1),G=_+(j-_)*$;if(!X)return String(G);let B=Math.round((G-_)/X)*X+_,K=Math.max(0,`${X}`.split(".")[1]?.length||0);return String(Number(B.toFixed(K)))}#$J(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#X?.min??"0"}#p(){this.#s(),this.#v(this.#$J(),"input"),this.#v(this.#$J(),"change")}#v(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#BJ(){if(!this.#J)return;let J=this.#J.querySelector("fig-input-number");if(!J)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){J.removeAttribute("steppers");return}let Z=this.getAttribute("steppers");J.setAttribute("steppers",Z??"")}#a(){if(!this.#J)return;if(!this.#M)this.#M=this.#_J.bind(this,"input");if(!this.#U)this.#U=this.#_J.bind(this,"change");this.#J.addEventListener("input",this.#M),this.#J.addEventListener("change",this.#U)}#jJ(){if(!this.#J)return;if(this.#M)this.#J.removeEventListener("input",this.#M);if(this.#U)this.#J.removeEventListener("change",this.#U)}#_J(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#y();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector('input[type="range"]')?.focus(J)}resetToDefault(){this.#p()}}customElements.define("fig-field-slider",H);class E extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Q=50;#Z=50;#J=75;#_=75;#B=0;#q=!1;#G=0;#j=null;#X=null;#$=null;#N=null;#E=null;#P=null;#k=null;#Y=null;#K=null;#L=!1;#M=!1;#U=!1;#O=!1;#f=null;#z="";#x="";#R=null;get#D(){return this.getAttribute("type")||"point"}get#C(){return this.#D==="point-radius"||this.#D==="point-radius-angle"}get#F(){return this.#D==="point-radius-angle"}get#H(){return this.#D==="point-point"}get#V(){return this.#D==="point-radius-angle"||this.#D==="point-point"}get#T(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#W(){let J=this.getAttribute("snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#I(J){let Q=this.#W;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#A(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Q)}%, ${Math.round(this.#Z)}%`}get#b(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#_)}%`}get#t(){return this.getAttribute("drag-surface")||"parent"}get#h(){let J=this.#t;if(J==="parent")return this.parentElement;return this.closest(J)}get#r(){let J=this.#t;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#g(J){if(this.#q)return this.#B/100*J;return this.#B}#n(){if(this.#q)return`Radius ${Math.round(this.#B)}%`;return`Radius ${Math.round(this.#B)}`}connectedCallback(){this.#l(),this.#c()}disconnectedCallback(){this.#NJ(),this.#JJ(),document.body.classList.remove("fig-lab-move-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#L&&!this.#M&&!this.#U&&!this.#O)if(this.#l(),this.#j)this.#S();else this.#c();if(J==="type")this.#l(),this.#c();if(J==="color"&&this.#j)if(Z)this.#j.setAttribute("color",Z);else this.#j.removeAttribute("color");if(J==="disabled")this.#c();if(J==="tooltips")this.#c();if(J==="snapping"&&this.#j){if(this.#j.setAttribute("drag-snapping",Z||"false"),this.#X)this.#X.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#P)this.#P.setAttribute("text",this.#A);if(this.#k)this.#k.setAttribute("text",this.#b)}}#l(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Q=Q.x;if(typeof Q.y==="number")this.#Z=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#q=!0,this.#B=parseFloat(Z);else this.#q=!1,this.#B=parseFloat(Z);if(!Number.isFinite(this.#B))this.#B=0}if(typeof Q.angle==="number")this.#G=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#_=Q.y2}catch{}}get value(){let J={x:this.#Q,y:this.#Z};if(this.#D==="color"){let Q=this.getAttribute("color")||this.#j?.getAttribute("color");if(Q)J.color=Q}if(this.#C)J.radius=this.#q?`${this.#B}%`:this.#B;if(this.#F)J.angle=this.#G;if(this.#H)J.x2=this.#J,J.y2=this.#_;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#c(){this.innerHTML="",this.#j=null,this.#X=null,this.#$=null,this.#N=null,this.#E=null,this.#P=null,this.#k=null,this.#Y=null,this.#K=null;let J=this.hasAttribute("disabled"),Q=this.#D,Z=this.#T,$=this.#r,_=document.createElement("fig-handle");if(_.setAttribute("drag","true"),_.setAttribute("drag-surface",$),_.setAttribute("drag-axes","x,y"),_.setAttribute("drag-snapping",this.#W),_.setAttribute("value",`${this.#Q}% ${this.#Z}%`),J)_.setAttribute("disabled","");if(Q==="color"){_.setAttribute("type","color");let j=this.getAttribute("color");if(j)_.setAttribute("color",j)}else _.setAttribute("type","canvas");if(this.#H)_.setAttribute("hit-area","12 circle"),_.setAttribute("hit-area-mode","delegate");if(this.#j=_,this.#C)this.#d();if(this.#V)this.#$J();if(Z){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#A),j.appendChild(_),this.appendChild(j),this.#P=j}else this.appendChild(_);if(this.#F)this.#v(J,Z,$);if(this.#H)this.#BJ(J,Z,$);this.#e(this.#j),this.#e(this.#$),this.#e(this.#X),this.#kJ(),this.#XJ(),requestAnimationFrame(()=>this.#S())}#e(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>this.#i(Q),{capture:!0})}#i(J){if(this.hasAttribute("disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#f===null)this.#z=document.body.style.getPropertyValue("cursor"),this.#x=document.body.style.getPropertyPriority("cursor");if(this.#f=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#R)this.#R=(Q)=>{if(Q?.pointerId!==void 0&&this.#f!==null&&Q.pointerId!==this.#f)return;if(Q?.type==="blur")this.#JJ();else requestAnimationFrame(()=>this.#JJ())};window.addEventListener("pointerup",this.#R),window.addEventListener("pointercancel",this.#R),window.addEventListener("blur",this.#R)}#JJ(){if(this.#f===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#z)document.body.style.setProperty("cursor",this.#z,this.#x);else document.body.style.removeProperty("cursor");if(this.#f=null,this.#z="",this.#x="",this.#R)window.removeEventListener("pointerup",this.#R),window.removeEventListener("pointercancel",this.#R),window.removeEventListener("blur",this.#R)}#s(J,Q,Z,$){if(!J)return;let _=()=>!!$?.(),j=()=>{let B=Q();if(!B)return;B.removeAttribute("show"),B.hidePopup?.()},X=()=>{if(_()){j();return}let B=Q();if(!B)return;if(Z)B.setAttribute("text",Z());B.setAttribute("show","true"),B.showPopup?.()},G=()=>{j()};J.addEventListener("pointerenter",X),J.addEventListener("pointerleave",G)}#QJ(){return this.#L||this.#M||this.#U||this.#O}#XJ(){if(this.#j)this.#s(this.#j,()=>this.#P,()=>this.#A,()=>this.#QJ()||!!this.#j?.querySelector("fig-color-tip"));if(this.#$)this.#s(this.#$,()=>this.#K,()=>`Angle ${Math.round(this.#G)}°`,()=>this.#QJ());if(this.#X)this.#s(this.#X,()=>this.#k,()=>this.#b,()=>this.#QJ());if(this.#N){let J=this.#N.querySelector(".fig-canvas-control-radius-hit");this.#ZJ(J||this.#N)}if(this.#D==="color"&&this.#j&&this.#P)new MutationObserver(()=>{if(this.#j?.querySelector("fig-color-tip"))this.#P?.removeAttribute("show"),this.#P?.hidePopup?.()}).observe(this.#j,{childList:!0,subtree:!0})}#y(J,Q){let Z=this.#Y;if(!Z?.popup)return;let $=Q-8;Z.popup.anchor={getBoundingClientRect:()=>({left:J,top:$,right:J,bottom:$,width:0,height:0,x:J,y:$})},Z.popup.queueReposition?.()}#ZJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#Y;if(!Z)return;Z.setAttribute("text",this.#n()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#y(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#U)return;this.#y(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#U)return;let Q=this.#Y;if(!Q)return;Q.removeAttribute("show")})}#d(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");$.classList.add("fig-canvas-control-radius-halo"),Q.appendChild($);let _=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(_),this.#N=Q,this.#T){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#n()),j.appendChild(Q),this.appendChild(j),this.#Y=j}else this.appendChild(Q);this.#YJ(Z)}#$J(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(Q.classList.add("fig-canvas-control-angle-svg"),Q.setAttribute("overflow","visible"),Q.style.position="absolute",Q.style.pointerEvents="none",this.#H){let _=document.createElementNS("http://www.w3.org/2000/svg","line");_.classList.add("fig-canvas-control-angle-line-hit"),_.setAttribute("stroke","transparent"),_.setAttribute("stroke-width","12"),_.setAttribute("stroke-linecap","round"),_.style.pointerEvents="stroke",Q.appendChild(_),this.#p(_)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line"),Q.appendChild($),this.#E=Q,this.appendChild(Q)}#p(J){J.addEventListener("pointerdown",(Q)=>{if(this.hasAttribute("disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#h;if(!Z)return;let $=Z.getBoundingClientRect(),_=Q.clientX,j=Q.clientY,X=this.#Q,G=this.#Z,B=this.#J,K=this.#_;this.#L=!0,this.#M=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let O=(N)=>{let P=Z.getBoundingClientRect(),S=P.width>0?(N.clientX-_)/P.width*100:0,k=P.height>0?(N.clientY-j)/P.height*100:0,L=-Math.min(X,B),V=100-Math.max(X,B),F=-Math.min(G,K),U=100-Math.max(G,K),M=Math.max(L,Math.min(V,S)),z=Math.max(F,Math.min(U,k));this.#Q=X+M,this.#Z=G+z,this.#J=B+M,this.#_=K+z,this.#S(),this.#m()},Y=()=>{document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#o(),this.#w(),window.removeEventListener("pointermove",O),window.removeEventListener("pointerup",Y),requestAnimationFrame(()=>{this.#L=!1,this.#M=!1})};window.addEventListener("pointermove",O),window.addEventListener("pointerup",Y)})}#v(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("size","small"),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),J)$.setAttribute("disabled","");if(this.#$=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",`${Math.round(this.#G)}°`),_.appendChild($),this.appendChild(_),this.#K=_}else this.appendChild($)}#BJ(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("drag-snapping",this.#W),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#_}%`),J)$.setAttribute("disabled","");if(this.#X=$,Q){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#b),_.appendChild($),this.appendChild(_),this.#k=_}else this.appendChild($)}#a(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#jJ(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#_J(){if(!this.#$||!this.#F)return;let J=this.#$.querySelector(".fig-handle-hit-area");if(!J)return;J.style.cursor=this.#jJ(this.#G)}#PJ(){return Math.atan2(this.#_-this.#Z,this.#J-this.#Q)*180/Math.PI}#qJ(){if(!this.#H)return;let J=this.#PJ(),Q=(Z,$)=>{if(!Z)return;let _=Z.querySelector(".fig-handle-hit-area");if(_)_.style.cursor=this.#jJ($)};Q(this.#j,J+180),Q(this.#X,J)}#GJ(J,Q,Z,$){J.style.setProperty("--fig-handle-position-translate","-50% -50%"),J.style.left=`${Q/100*$.width}px`,J.style.top=`${Z/100*$.height}px`}#S(){let J=this.#h;if(!J||!this.#j)return;let Q=J.getBoundingClientRect();if(this.#GJ(this.#j,this.#Q,this.#Z,Q),this.#N){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#g(Q.width),j=this.#N,X=Math.max(_*2,1);j.style.position="absolute",j.style.width=`${X}px`,j.style.height=`${X}px`,j.style.left=`${Z-_}px`,j.style.top=`${$-_}px`,j.setAttribute("viewBox",`0 0 ${X} ${X}`);let G=j.querySelectorAll("circle");for(let B of G)B.setAttribute("cx",String(_)),B.setAttribute("cy",String(_)),B.setAttribute("r",String(Math.max(_-1,0)))}if(this.#E&&this.#V){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_,j;if(this.#H)_=this.#J/100*Q.width,j=this.#_/100*Q.height;else{let B=this.#g(Q.width),K=this.#G*Math.PI/180;_=Z+B*Math.cos(K),j=$+B*Math.sin(K)}let X=this.#E;X.style.width=`${Q.width}px`,X.style.height=`${Q.height}px`,X.style.left="0",X.style.top="0",X.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let G=X.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let B of G)B.setAttribute("x1",String(Z)),B.setAttribute("y1",String($)),B.setAttribute("x2",String(_)),B.setAttribute("y2",String(j))}if(this.#$&&this.#F){let Z=this.#Q/100*Q.width,$=this.#Z/100*Q.height,_=this.#g(Q.width),j=this.#G*Math.PI/180,X=Z+_*Math.cos(j),G=$+_*Math.sin(j),B=Q.width>0?X/Q.width*100:0,K=Q.height>0?G/Q.height*100:0;this.#GJ(this.#$,B,K,Q)}if(this.#X&&this.#H)this.#GJ(this.#X,this.#J,this.#_,Q);this.#_J(),this.#qJ()}#m(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#o(){this.setAttribute("value",JSON.stringify(this.value))}#kJ(){if(!this.#j)return;if(this.#j.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#m();return}this.#L=!0;let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show"),this.#P.hidePopup?.();this.#S(),this.#m()}),this.#j.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#w();return}let Q=J.detail?.px??this.#Q/100,Z=J.detail?.py??this.#Z/100;if(this.#Q=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Z=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show");this.#S(),this.#o(),this.#w(),requestAnimationFrame(()=>{this.#L=!1})}),this.#$)this.#$.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#h;if(!Q)return;this.#O=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Q/100*Z.width,_=this.#Z/100*Z.height,j=J.detail?.x??0,X=J.detail?.y??0,G=this.#$.offsetWidth/2,B=this.#$.offsetHeight/2,K=j+G-$,O=X+B-_,Y=Math.atan2(O,K)*180/Math.PI;if(this.#I(J.detail?.shiftKey))Y=Math.round(Y/15)*15;this.#G=Y;let N=Math.sqrt(K*K+O*O);if(this.#I(J.detail?.shiftKey)){let P=this.#q?5:10;if(this.#q){let S=N/Z.width*100;S=Math.round(S/P)*P,N=S/100*Z.width}else N=Math.round(N/P)*P}if(this.#q)this.#B=Math.max(0,N/Z.width*100);else this.#B=Math.max(0,N);if(this.#K)this.#K.setAttribute("text",`Angle ${Math.round(this.#G)}°`),this.#K.setAttribute("show","true"),this.#K.showPopup?.();this.#S(),this.#m()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#K)this.#K.removeAttribute("show");this.#S(),this.#o(),this.#w(),requestAnimationFrame(()=>{this.#O=!1})}),this.#$.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#h;if(!Z)return;if(this.#O=!0,this.classList.add("fig-canvas-control-ring-active"),this.#$.setAttribute("selected",""),this.#K)this.#K.setAttribute("show","true"),this.#K.showPopup?.();let $=(j)=>{let X=Z.getBoundingClientRect(),G=this.#Q/100*X.width,B=this.#Z/100*X.height,K=j.clientX-X.left-G,O=j.clientY-X.top-B,Y=Math.atan2(O,K)*180/Math.PI;if(this.#I(j.shiftKey))Y=Math.round(Y/15)*15;if(this.#G=Y,this.#K)this.#K.setAttribute("text",`Angle ${Math.round(Y)}°`);this.#S(),this.#m()},_=()=>{if(this.#O=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#$.removeAttribute("selected"),this.#K)this.#K.removeAttribute("show");this.#o(),this.#w(),window.removeEventListener("pointermove",$),window.removeEventListener("pointerup",_)};window.addEventListener("pointermove",$),window.addEventListener("pointerup",_)});if(this.#X)this.#X.addEventListener("input",(J)=>{J.stopPropagation(),this.#M=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#_/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#_=Math.round(Math.max(0,Math.min(100,Z*100))),this.#k)this.#k.removeAttribute("show"),this.#k.hidePopup?.();this.#S(),this.#m()}),this.#X.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#k)this.#k.removeAttribute("show");this.#S(),this.#o(),this.#w(),requestAnimationFrame(()=>{this.#M=!1})}),this.#OJ(this.#j,!0),this.#OJ(this.#X,!1)}#OJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let _=this.#h;if(!_)return;this.#L=!0;let j=_.getBoundingClientRect(),X=Q?this.#J:this.#Q,G=Q?this.#_:this.#Z,B=Q?this.#Q:this.#J,K=Q?this.#Z:this.#_,O=X/100*j.width,Y=G/100*j.height,N=B/100*j.width,P=K/100*j.height,S=Math.sqrt((N-O)**2+(P-Y)**2),k=Q?this.#P:this.#k;if(k)k.removeAttribute("show"),k.hidePopup?.();let L=(F)=>{let U=_.getBoundingClientRect(),M=X/100*U.width,z=G/100*U.height,R=F.clientX-U.left-M,D=F.clientY-U.top-z,T=Math.atan2(D,R);if(this.#I(F.shiftKey))T=Math.round(T*180/Math.PI/15)*15*Math.PI/180;let A=M+S*Math.cos(T),b=z+S*Math.sin(T),W=Math.max(0,Math.min(100,A/U.width*100)),f=Math.max(0,Math.min(100,b/U.height*100));if(Q)this.#Q=W,this.#Z=f;else this.#J=W,this.#_=f;this.#S(),this.#m()},V=()=>{if(this.#L=!1,k)k.removeAttribute("show");this.#o(),this.#w(),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",V)};window.addEventListener("pointermove",L),window.addEventListener("pointerup",V)})}#YJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#U)return;let $=this.#h;if(!$)return;let _=$.getBoundingClientRect(),j=this.#Q/100*_.width,X=this.#Z/100*_.height,G=Math.atan2(Z.clientY-_.top-X,Z.clientX-_.left-j)*180/Math.PI;J.style.cursor=this.#a(G)});let Q=(Z)=>{if(this.hasAttribute("disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#U=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#h;if(!$)return;if(this.#Y)this.#Y.setAttribute("show","true"),this.#Y.showPopup?.(),this.#y(Z.clientX,Z.clientY);if(this.#K)this.#K.removeAttribute("show"),this.#K.hidePopup?.();let _=this.#$?.style.pointerEvents,j=this.#$?.querySelector(".fig-handle-hit-area"),X=j?.style.pointerEvents;if(this.#$)this.#$.style.pointerEvents="none";if(j)j.style.pointerEvents="none";let G=document.body.style.cursor;J.style.pointerEvents="none";let B=$.getBoundingClientRect(),K=this.#Q/100*B.width,O=this.#Z/100*B.height,Y=Math.atan2(Z.clientY-B.top-O,Z.clientX-B.left-K)*180/Math.PI,N=Math.round(Y);document.body.style.cursor=this.#a(N);let P=(k)=>{let L=$.getBoundingClientRect(),V=this.#Q/100*L.width,F=this.#Z/100*L.height,U=k.clientX-L.left-V,M=k.clientY-L.top-F,z=Math.round(Math.atan2(M,U)*180/Math.PI);if(z!==N)N=z,document.body.style.cursor=this.#a(z);let R=Math.sqrt(U*U+M*M);if(this.#I(k.shiftKey)){let D=this.#q?5:10;if(this.#q){let T=R/L.width*100;T=Math.round(T/D)*D,R=T/100*L.width}else R=Math.round(R/D)*D}if(this.#q)this.#B=Math.max(0,R/L.width*100);else this.#B=Math.max(0,R);if(this.#Y)this.#Y.setAttribute("text",this.#n()),this.#y(k.clientX,k.clientY);this.#S(),this.#m()},S=()=>{if(this.#U=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#$)this.#$.style.pointerEvents=_??"";if(j)j.style.pointerEvents=X??"";if(document.body.style.cursor=G,this.#Y)this.#Y.removeAttribute("show");this.#o(),this.#w(),window.removeEventListener("pointermove",P),window.removeEventListener("pointerup",S)};window.addEventListener("pointermove",P),window.addEventListener("pointerup",S)};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#NJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",E);class q extends HTMLElement{#Q=[q.#z()];#Z=0;#J=2;#_=240;#B=120;#q=null;#G=null;#j=null;#X=null;#$=0;#N=null;#E=null;#P=null;#k=null;#Y=[];#K=[];#L=[];#M=[];#U=new Set;#O=null;#f=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#z(J="sine"){return{type:J,frequency:1,amplitude:1,phase:0,offset:0}}static get observedAttributes(){return["value","precision","aspect-ratio","edit","disabled"]}connectedCallback(){this.#J=this.#x("precision",2),this.#H(this.getAttribute("value")),this.#F(),this.#g(),this.#XJ()}disconnectedCallback(){if(this.#q=null,this.#a(),this.#O)this.#O.disconnect(),this.#O=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#H(Z),this.isConnected)this.#g();return}if(J==="precision"){if(this.#J=this.#x("precision",2),this.isConnected)this.#KJ();return}if(J==="aspect-ratio"){if(this.#F(),this.#G)this.#v();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#g()}}get value(){return JSON.stringify(this.data)}set value(J){this.setAttribute("value",typeof J==="object"&&J!==null?JSON.stringify(J):J)}get data(){return{waves:this.#Q.map((J)=>this.#T(J))}}get preset(){let J=this.#W;return q.TYPES.find((Q)=>Q.value===J.type)?.name}#x(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Z:Q}#R(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#D(){return this.getAttribute("edit")!=="false"}#C(){return this.#R("disabled",!1)}#F(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#H(J){if(!J)return!1;let Q=null;if(typeof J==="string")try{Q=JSON.parse(J)}catch{Q=null}else if(typeof J==="object")Q=J;if(!Q)return!1;let Z=Array.isArray(Q)?Q:Array.isArray(Q.waves)?Q.waves:[Q];if(this.#Q=Z.map(($)=>this.#V($)),!this.#Q.length)this.#Q=[q.#z()];return this.#Z=Math.min(this.#Z,this.#Q.length-1),!0}#V(J={}){return{type:this.#I(J.type),frequency:this.#A(J.frequency,1,0.1,16),amplitude:this.#A(J.amplitude,1,-4,4),phase:this.#A(J.phase,0,-360,360),offset:this.#A(J.offset,0,-4,4)}}#T(J){return{type:J.type,frequency:this.#b(J.frequency),amplitude:this.#b(J.amplitude),phase:this.#b(J.phase),offset:this.#b(J.offset)}}get#W(){if(!this.#Q[this.#Z])this.#Z=0;return this.#Q[this.#Z]||q.#z()}#I(J){let Q=String(J||"").toLowerCase();return q.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#A(J,Q,Z,$){let _=Number.parseFloat(J);if(!Number.isFinite(_))return Q;return Math.min($,Math.max(Z,_))}#b(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#t(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#h(J){return q.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let _=Q-10,j="";for(let X=0;X<=32;X++){let G=X/32,B=q.#r(J,G),K=5+G*_,O=5+(1-(B+1)/2)*_;j+=`${X===0?"M":"L"}${K.toFixed(1)},${O.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${j}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#r(J,Q,Z=0){let $=Q+Z/360,_=$-Math.floor($),j=$*Math.PI*2;switch(J){case"square":return Math.sin(j)>=0?1:-1;case"sawtooth":return _*2-1;case"triangle":return 1-Math.abs(_*4-2);default:return Math.sin(j)}}#g(){this.#a(),this.innerHTML=this.#n(),this.#JJ(),this.#y(),this.#v(),this.#GJ(),this.#BJ()}#n(){let J=this.#C()?" disabled":"";return`<div class="fig-input-oscillator-svg-container">
+        <svg viewBox="0 0 ${this.#_} ${this.#B}" class="fig-input-oscillator-svg">
+          <rect class="fig-input-oscillator-bounds" x="0" y="0" width="${this.#_}" height="${this.#B}"></rect>
           <line class="fig-input-oscillator-baseline"></line>
           <path class="fig-input-oscillator-path"></path>
           <circle class="fig-input-oscillator-playhead"></circle>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle type="canvas" size="small" aria-label="Oscillator amplitude handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle type="canvas" size="small" aria-label="Oscillator frequency handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle size="small" aria-label="Oscillator amplitude handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle size="small" aria-label="Oscillator frequency handle"${J}></fig-handle></fig-tooltip></div></foreignObject>
         </svg>
       </div>
-      ${this.#g()?this.#t(J):""}`}#t(J){return`<div class="fig-input-oscillator-waves">
-      ${this.#J.map((Q,Z)=>this.#a(Q,Z,J)).join("")}
-      <hstack class="fig-input-oscillator-add-wave">
-        <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon aria-label="Choose waveform type"${J}>
-          <fig-icon name="settings"></fig-icon>
-          ${this.#l("fig-input-oscillator-add-type","sine",J)}
-        </fig-button>
-      </hstack>
-    </div>`}#a(J,Q,Z){let _=Z||this.#J.length<=1?" disabled":"",$=Q===this.#Z?" data-active":"",G=N.#y(J.type);return`<details class="fig-input-oscillator-wave" data-wave-index="${Q}" open>
-      <summary class="fig-input-oscillator-wave-summary">
-        <label>${N.waveIcon(J.type,24)}<span>${G}</span></label>
-        <fig-button class="fig-input-oscillator-remove-button" variant="ghost" icon data-wave-index="${Q}" aria-label="Remove waveform"${_}><fig-icon name="minus"></fig-icon></fig-button>
-      </summary>
-      <div class="fig-input-oscillator-fields" data-wave-index="${Q}"${$}>
-        ${this.#T(Q,"frequency","Frequency",0.1,16,0.1,"")}
-        ${this.#T(Q,"amplitude","Amplitude",-4,4,0.1,"")}
-        ${this.#T(Q,"phase","Phase",-360,360,1,"°")}
-        ${this.#T(Q,"offset","Offset",-4,4,0.1,"")}
+      ${this.#D()?this.#l(J):""}`}#l(J){return`<div class="fig-input-oscillator-waves">
+      ${this.#Q.map((Q,Z)=>this.#c(Q,Z,J)).join("")}
+    </div>`}#c(J,Q,Z){let $=Z||this.#Q.length<=1?" disabled":"",_=Q===this.#Z?" data-active":"",j=q.#h(J.type);return`<fig-group class="fig-input-oscillator-wave" collapsible borderless compact="true"${this.#U.has(Q)?' open="true"':' open="false"'} data-wave-index="${Q}">
+      <fig-header borderless>
+        <h3>${j}</h3>
+        <fig-tooltip text="Remove form">
+          <fig-button class="fig-input-oscillator-remove-button" variant="ghost" icon data-wave-index="${Q}" aria-label="Remove form"${$}><fig-icon name="minus"></fig-icon></fig-button>
+        </fig-tooltip>
+        <fig-tooltip text="Add form">
+          <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon data-wave-index="${Q}" aria-label="Add form"${Z}>
+            <fig-icon name="add"></fig-icon>
+            ${this.#e("fig-input-oscillator-add-type","sine",Z,Q)}
+          </fig-button>
+        </fig-tooltip>
+      </fig-header>
+      <div class="fig-input-oscillator-fields" data-wave-index="${Q}"${_}>
+        ${this.#i(Q,"frequency","Frequency",0.1,16,0.1,"")}
+        ${this.#i(Q,"amplitude","Amplitude",-4,4,0.1,"")}
+        ${this.#i(Q,"phase","Phase",-360,360,1,"°")}
+        ${this.#i(Q,"offset","Offset",-4,4,0.1,"")}
       </div>
-    </details>`}#l(J,Q,Z,_=null){let $=N.TYPES.map((q)=>{let k=q.value===Q?" selected":"";return`<option value="${q.value}"${k}>
-        ${N.waveIcon(q.value,24)}
-        <label>${q.name}</label>
-      </option>`}).join(""),G=_===null?"":` data-wave-index="${_}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern"${_===null?' type="dropdown" label="Choose waveform type"':""}${G}${Z}>${$}</fig-dropdown>`}#T(J,Q,Z,_,$,G,j){let q=this.#N()?" disabled":"",k=j?` units="${N.#c(j)}"`:"",K=this.#J[J]||N.#O();return`<fig-field class="fig-input-oscillator-field" direction="horizontal" data-wave-index="${J}">
-      <label>${Z}</label>
-      <fig-slider name="${Q}" data-wave-index="${J}" value="${this.#V(K[Q])}" min="${_}" max="${$}" step="${G}" precision="${this.#Q}" text="true"${k}${q}></fig-slider>
-    </fig-field>
-    `}#e(){this.#K=this.querySelector(".fig-input-oscillator-svg"),this.#G=this.querySelector(".fig-input-oscillator-path"),this.#j=this.querySelector(".fig-input-oscillator-playhead"),this.#E=this.querySelector(".fig-input-oscillator-baseline"),this.#C=this.querySelector(".fig-input-oscillator-bounds"),this.#X=this.querySelector('[data-handle="amplitude"]'),this.#L=this.querySelector('[data-handle="frequency"]'),this.#B=this.querySelector(".fig-input-oscillator-add-type"),this.#Y=Array.from(this.querySelectorAll(".fig-input-oscillator-wave-type")),this.#q=Array.from(this.querySelectorAll("fig-slider[name]")),this.#M=Array.from(this.querySelectorAll("[data-wave-index]")).filter((J)=>J.classList.contains("fig-input-oscillator-field"))}#qJ(){if(this.#z||!window.ResizeObserver)return;this.#z=new ResizeObserver(()=>{if(this.#d())this.#o()}),this.#z.observe(this)}#d(){if(!this.#K)return!1;let J=this.#K.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),_=Q!==this.#$||Z!==this.#k;return this.#$=Q,this.#k=Z,this.#K.setAttribute("viewBox",`0 0 ${Q} ${Z}`),_}#p(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#I(Z/Q)));return{min:-J,max:J}}#w(J){let{min:Q,max:Z}=this.#p();return this.#k-(J-Q)/(Z-Q)*this.#k}#_J(J){let{min:Q,max:Z}=this.#p();return Q+(1-J/this.#k)*(Z-Q)}#I(J){return this.#J.reduce((Q,Z)=>{let _=J*Z.frequency,$=N.#r(Z.type,_,Z.phase);return Q+Z.offset+$*Z.amplitude},0)}#o(){if(!this.#K||!this.#G)return;if(this.#d(),this.#C)this.#C.setAttribute("width",this.#$),this.#C.setAttribute("height",this.#k);let J=Math.max(...this.#J.map((G)=>G.frequency)),Z=this.#J.some((G)=>G.type==="square"||G.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),_="";for(let G=0;G<=Z;G++){let j=G/Z,q=j*this.#$,k=this.#w(this.#I(j));_+=`${G===0?"M":"L"}${q.toFixed(1)},${k.toFixed(1)}`}this.#G.setAttribute("d",_);let $=this.#w(0);this.#E?.setAttribute("x1","0"),this.#E?.setAttribute("y1",$),this.#E?.setAttribute("x2",this.#$),this.#E?.setAttribute("y2",$),this.#ZJ()}#NJ(){if(this.#_||!this.#j)return;let J=(Q)=>{if(!this.isConnected||!this.#j){this.#_=0;return}this.#QJ(Q%1000/1000),this.#_=requestAnimationFrame(J)};this.#_=requestAnimationFrame(J)}#JJ(){if(!this.#_)return;cancelAnimationFrame(this.#_),this.#_=0}#QJ(J){if(!this.#j)return;let Q=J*this.#$,Z=this.#w(this.#I(J));this.#j.setAttribute("cx",Q.toFixed(1)),this.#j.setAttribute("cy",Z.toFixed(1))}#ZJ(){let Q=this.#F,Z=this.#KJ(),_=Math.max(8,Math.min(this.#$-8,this.#$/Q.frequency)),$=this.#w(this.#I(Z/this.#$)),G=this.#w(this.#I(_/this.#$));this.#i(this.#X,Z,$,8),this.#i(this.#L,_,G,8)}#KJ(){let J=this.#F,Q=J.phase/360,Z=Math.max(0.1,J.frequency),_=0.25;if(J.type==="triangle")_=0.5;if(J.type==="sawtooth")_=1;let $=(_-Q)/Z;while($<0)$+=1/Z;while($>1)$-=1/Z;if($<0||$>1||!Number.isFinite($))$=0.25;return Math.max(8,Math.min(this.#$-8,$*this.#$))}#i(J,Q,Z,_){if(!J)return;J.setAttribute("x",Q-_),J.setAttribute("y",Z-_),J.setAttribute("width",_*2),J.setAttribute("height",_*2)}#$J(){for(let Q of this.#Y)Q.addEventListener("change",(Z)=>{if(this.#N())return;let _=this.#b(Q);this.#GJ(_),this.#J[_].type=this.#S(Z.detail??Z.target?.value),this.#n(),this.#h("input"),this.#h("change")});for(let Q of this.#q)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#jJ(this.#b(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#jJ(this.#b(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#M)Q.addEventListener("pointerdown",()=>{this.#GJ(this.#b(Q))}),Q.addEventListener("focusin",()=>{this.#GJ(this.#b(Q))});this.#B?.addEventListener("change",(Q)=>{if(this.#N())return;if(Q.target!==this.#B)return;let Z=this.#S(Q.detail??this.#B?.value);this.#J.push(N.#O(Z)),this.#Z=this.#J.length-1,this.#W(),this.#h("input"),this.#h("change")});for(let Q of this.querySelectorAll(".fig-input-oscillator-remove-button"))Q.addEventListener("click",()=>{if(this.#N()||this.#J.length<=1)return;let Z=this.#b(Q);this.#J.splice(Z,1),this.#Z=Math.min(this.#Z,this.#J.length-1),this.#W(),this.#h("input"),this.#h("change")});for(let Q of[this.#X,this.#L])this.#YJ(Q);this.querySelector(".fig-input-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#N())return;if(Q.target?.closest?.(".fig-input-oscillator-handle, fig-handle"))return;this.#m(Q,"offset")})}#b(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#J.length-1,Math.max(0,Q)):0}#YJ(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",(_)=>{if(this.#N())return;_.preventDefault(),_.stopImmediatePropagation(),this.#m(_,Z)},{capture:!0}),Q.addEventListener("keydown",(_)=>{if(this.#N())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(_.key))return;if(!this.#x(_,Z))return;_.preventDefault(),_.stopImmediatePropagation()},{capture:!0})}#GJ(J){let Q=Math.min(this.#J.length-1,Math.max(0,J));if(Q===this.#Z)return;this.#Z=Q,this.#UJ(),this.#ZJ()}#jJ(J,Q,Z,_){if(this.#N())return;this.#GJ(J);let $=Number.parseFloat(Z);if(!Number.isFinite($)){if(_==="change")this.#XJ();return}this.#J[J]=this.#f({...this.#J[J],[Q]:$}),this.#n(),this.#h(_)}#x(J,Q){let Z=J.shiftKey?0.5:0.1,_=this.#F;switch(Q){case"amplitude":if(J.key==="ArrowUp")_.amplitude+=Z;else if(J.key==="ArrowDown")_.amplitude-=Z;else if(J.key==="Home")_.amplitude=-4;else if(J.key==="End")_.amplitude=4;else return!1;break;case"offset":if(J.key==="ArrowUp")_.offset+=Z;else if(J.key==="ArrowDown")_.offset-=Z;else if(J.key==="Home")_.offset=-4;else if(J.key==="End")_.offset=4;else return!1;break;case"frequency":if(J.key==="ArrowLeft")_.frequency-=Z;else if(J.key==="ArrowRight")_.frequency+=Z;else if(J.key==="Home")_.frequency=0.1;else if(J.key==="End")_.frequency=16;else return!1;break;default:return!1}return this.#J[this.#Z]=this.#f(_),this.#n(),this.#h("input"),this.#h("change"),!0}#v(J){let Q=this.#K?.getScreenCTM();if(!Q)return{x:0,y:0};let Z=Q.inverse();return{x:Z.a*J.clientX+Z.c*J.clientY+Z.e,y:Z.b*J.clientX+Z.d*J.clientY+Z.f}}#m(J,Q){this.#U=Q;let Z=($)=>{if(!this.#U)return;let G=this.#v($),j=this.#F;if(Q==="frequency"){let q=Math.max(1,Math.min(this.#$,G.x));j.frequency=this.#$/q}else if(Q==="offset"){let q=this.#P(G.x/this.#$,0,0,1),k=this.#BJ(j,q);j.offset=this.#_J(G.y)-this.#s(this.#Z,q)-k*j.amplitude}else if(Q==="amplitude"){let q=this.#P(G.x/this.#$,0,0,1),k=this.#BJ(j,q),K=this.#_J(G.y)-this.#s(this.#Z,q)-j.offset;j.amplitude=Math.abs(k)<0.001?j.amplitude:K/k}this.#J[this.#Z]=this.#f(j),this.#n(),this.#h("input")},_=()=>{this.#U=null,document.removeEventListener("pointermove",Z),document.removeEventListener("pointerup",_),this.#h("change")};document.addEventListener("pointermove",Z),document.addEventListener("pointerup",_)}#s(J,Q){return this.#J.reduce((Z,_,$)=>{if($===J)return Z;let G=Q*_.frequency,j=N.#r(_.type,G,_.phase);return Z+_.offset+j*_.amplitude},0)}#BJ(J,Q){return N.#r(J.type,Q*J.frequency,J.phase)}#n(){this.#OJ(),this.#XJ(),this.#UJ(),this.#o()}#OJ(){for(let J of this.#Y){let Q=this.#b(J);J.value=this.#J[Q]?.type||"sine"}}#XJ(){for(let J of this.#q){let Q=this.#b(J),Z=J.getAttribute("name");J.setAttribute("value",this.#V(this.#J[Q]?.[Z]??0))}}#UJ(){for(let J of this.#M)if(this.#b(J)===this.#Z)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#h(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:N.#y(this.#F.type)}}))}}customElements.define("fig-input-oscillator",N);class A extends HTMLElement{#J;#Z;#Q=null;#$;#k;#U;#K;#G;#j;constructor(){super();this.angle=0,this.#J=1,this.#Z=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#$=this.#D.bind(this),this.#k=this.#P.bind(this),this.#U=this.#V.bind(this),this.#K=this.#c.bind(this),this.#G=this.#y.bind(this),this.#j=this.#g.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let J=this.getAttribute("units")||"°";if(J==="deg")J="°";if(this.units=J,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#E("dial",!0),this.showRotations=this.#C(),this.#_(),this.#O(),this.#S(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#A()}#_(){this.innerHTML=this.#X()}#E(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let _=Z.trim().toLowerCase();if(_===""||_==="true")return!0;if(_==="false")return!1;return!0}#C(){if(this.hasAttribute("rotations"))return this.#E("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#E("show-rotations",!1);return!1}#X(){let J=this.#q(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
+    </fig-group>`}#e(J,Q,Z,$=null){let _=q.TYPES.map((X)=>{let G=X.value===Q?" selected":"";return`<option value="${X.value}"${G}>
+        ${q.waveIcon(X.value,24)}
+        <label>${X.name}</label>
+      </option>`}).join(""),j=$===null?"":` data-wave-index="${q.#t(String($))}"`;return`<fig-dropdown class="${J}" value="${Q}" experimental="modern" type="dropdown" label="Add form"${j}${Z}>${_}</fig-dropdown>`}#i(J,Q,Z,$,_,j,X){let G=this.#C()?" disabled":"",B=X?` units="${q.#t(X)}"`:"",K=this.#Q[J]||q.#z();return`<fig-field-slider class="fig-input-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#b(K[Q])}" min="${$}" max="${_}" step="${j}" precision="${this.#J}" elastic="false"${B}${G}></fig-field-slider>`}#JJ(){this.#G=this.querySelector(".fig-input-oscillator-svg"),this.#j=this.querySelector(".fig-input-oscillator-path"),this.#X=this.querySelector(".fig-input-oscillator-playhead"),this.#N=this.querySelector(".fig-input-oscillator-baseline"),this.#E=this.querySelector(".fig-input-oscillator-bounds"),this.#P=this.querySelector('[data-handle="amplitude"]'),this.#k=this.querySelector('[data-handle="frequency"]'),this.#K=Array.from(this.querySelectorAll(".fig-input-oscillator-wave-type")),this.#Y=Array.from(this.querySelectorAll("fig-field-slider[name]")),this.#M=Array.from(this.querySelectorAll("fig-group.fig-input-oscillator-wave")),this.#L=Array.from(this.querySelectorAll(".fig-input-oscillator-fields"))}#s(J){let Q=new Set;for(let Z of this.#U)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#U=Q}#QJ(J){let Q=new Set;for(let Z of this.#U)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#U=Q}#XJ(){if(this.#O||!window.ResizeObserver)return;this.#O=new ResizeObserver(()=>{if(this.#y())this.#v()}),this.#O.observe(this)}#y(){if(!this.#G)return!1;let J=this.#G.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),$=Q!==this.#_||Z!==this.#B;return this.#_=Q,this.#B=Z,this.#G.setAttribute("viewBox",`0 0 ${Q} ${Z}`),$}#ZJ(){let J=1,Q=256;for(let Z=0;Z<=Q;Z++)J=Math.max(J,Math.abs(this.#p(Z/Q)));return{min:-J,max:J}}#d(J){let{min:Q,max:Z}=this.#ZJ();return this.#B-(J-Q)/(Z-Q)*this.#B}#$J(J){let{min:Q,max:Z}=this.#ZJ();return Q+(1-J/this.#B)*(Z-Q)}#p(J){return this.#Q.reduce((Q,Z)=>{let $=J*Z.frequency,_=q.#r(Z.type,$,Z.phase);return Q+Z.offset+_*Z.amplitude},0)}#v(){if(!this.#G||!this.#j)return;if(this.#y(),this.#E)this.#E.setAttribute("width",this.#_),this.#E.setAttribute("height",this.#B);let J=Math.max(...this.#Q.map((j)=>j.frequency)),Z=this.#Q.some((j)=>j.type==="square"||j.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let j=0;j<=Z;j++){let X=j/Z,G=X*this.#_,B=this.#d(this.#p(X));$+=`${j===0?"M":"L"}${G.toFixed(1)},${B.toFixed(1)}`}this.#j.setAttribute("d",$);let _=this.#d(0);this.#N?.setAttribute("x1","0"),this.#N?.setAttribute("y1",_),this.#N?.setAttribute("x2",this.#_),this.#N?.setAttribute("y2",_),this.#_J()}#BJ(){if(this.#$||!this.#X)return;let J=(Q)=>{if(!this.isConnected||!this.#X){this.#$=0;return}this.#jJ(Q%1000/1000),this.#$=requestAnimationFrame(J)};this.#$=requestAnimationFrame(J)}#a(){if(!this.#$)return;cancelAnimationFrame(this.#$),this.#$=0}#jJ(J){if(!this.#X)return;let Q=J*this.#_,Z=this.#d(this.#p(J));this.#X.setAttribute("cx",Q.toFixed(1)),this.#X.setAttribute("cy",Z.toFixed(1))}#_J(){let Q=this.#W,Z=this.#PJ(),$=Math.max(8,Math.min(this.#_-8,this.#_/Q.frequency)),_=this.#d(this.#p(Z/this.#_)),j=this.#d(this.#p($/this.#_));this.#qJ(this.#P,Z,_,8),this.#qJ(this.#k,$,j,8)}#PJ(){let J=this.#W,Q=J.phase/360,Z=Math.max(0.1,J.frequency),$=0.25;if(J.type==="triangle")$=0.5;if(J.type==="sawtooth")$=1;let _=($-Q)/Z;while(_<0)_+=1/Z;while(_>1)_-=1/Z;if(_<0||_>1||!Number.isFinite(_))_=0.25;return Math.max(8,Math.min(this.#_-8,_*this.#_))}#qJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#GJ(){for(let Q of this.#K)Q.addEventListener("change",(Z)=>{if(this.#C())return;let $=this.#S(Q);this.#w($),this.#Q[$].type=this.#I(Z.detail??Z.target?.value),this.#KJ(),this.#u("input"),this.#u("change")});for(let Q of this.#Y)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#f=Q;try{this.#o(this.#S(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#f=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#o(this.#S(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#M)Q.addEventListener("pointerdown",()=>{this.#w(this.#S(Q))}),Q.addEventListener("focusin",()=>{this.#w(this.#S(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#S(Q);if(Z.detail?.open)this.#U.add($);else this.#U.delete($)});for(let Q of this.querySelectorAll(".fig-input-oscillator-add-type")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.addEventListener("change",($)=>{if($.target!==Q)return;if(this.#C())return;let j=this.#S(Q)+1,X=this.#I($.detail??Q.value);this.#Q.splice(j,0,q.#z(X)),this.#QJ(j),this.#Z=j,this.#g(),this.#u("input"),this.#u("change")})}for(let Q of this.querySelectorAll(".fig-input-oscillator-add-type-button")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.closest("fig-tooltip")?.addEventListener("pointerdown",Z),Q.closest("fig-tooltip")?.addEventListener("click",Z)}for(let Q of this.querySelectorAll(".fig-input-oscillator-remove-button"))Q.addEventListener("pointerdown",(Z)=>{Z.stopPropagation()}),Q.addEventListener("click",(Z)=>{if(Z.stopPropagation(),this.#C()||this.#Q.length<=1)return;let $=this.#S(Q);this.#Q.splice($,1),this.#s($),this.#Z=Math.min(this.#Z,this.#Q.length-1),this.#g(),this.#u("input"),this.#u("change")});for(let Q of[this.#P,this.#k])this.#m(Q);this.querySelector(".fig-input-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#C())return;if(Q.target?.closest?.(".fig-input-oscillator-handle, fig-handle"))return;this.#YJ(Q,"offset")})}#S(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#Q.length-1,Math.max(0,Q)):0}#m(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#C())return;$.preventDefault(),$.stopImmediatePropagation(),this.#YJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#C())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#kJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#w(J){let Q=Math.min(this.#Q.length-1,Math.max(0,J));if(Q===this.#Z)return;this.#Z=Q,this.#SJ(),this.#_J()}#o(J,Q,Z,$){if(this.#C())return;this.#w(J);let _=Number.parseFloat(Z);if(!Number.isFinite(_)){if($==="change")this.#UJ();return}this.#Q[J]=this.#V({...this.#Q[J],[Q]:_}),this.#KJ({skipFieldSync:$=="input"}),this.#u($)}#kJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#W;switch(Q){case"amplitude":if(J.key==="ArrowUp")$.amplitude+=Z;else if(J.key==="ArrowDown")$.amplitude-=Z;else if(J.key==="Home")$.amplitude=-4;else if(J.key==="End")$.amplitude=4;else return!1;break;case"offset":if(J.key==="ArrowUp")$.offset+=Z;else if(J.key==="ArrowDown")$.offset-=Z;else if(J.key==="Home")$.offset=-4;else if(J.key==="End")$.offset=4;else return!1;break;case"frequency":if(J.key==="ArrowLeft")$.frequency-=Z;else if(J.key==="ArrowRight")$.frequency+=Z;else if(J.key==="Home")$.frequency=0.1;else if(J.key==="End")$.frequency=16;else return!1;break;default:return!1}return this.#Q[this.#Z]=this.#V($),this.#KJ(),this.#u("input"),this.#u("change"),!0}#OJ(J){let Q=this.#G?.getScreenCTM();if(!Q)return{x:0,y:0};let Z=Q.inverse();return{x:Z.a*J.clientX+Z.c*J.clientY+Z.e,y:Z.b*J.clientX+Z.d*J.clientY+Z.f}}#YJ(J,Q){this.#q=Q,this.#G?.classList.add("dragging");let Z=Q==="frequency"?"ew-resize":Q==="amplitude"?"ns-resize":"",$=document.body.style.cursor;if(Z)document.body.style.cursor=Z;let _=(X)=>{if(!this.#q)return;let G=this.#OJ(X),B=this.#W;if(Q==="frequency"){let K=Math.max(1,Math.min(this.#_,G.x));B.frequency=this.#_/K}else if(Q==="offset"){let K=this.#A(G.x/this.#_,0,0,1),O=this.#LJ(B,K);B.offset=this.#$J(G.y)-this.#NJ(this.#Z,K)-O*B.amplitude}else if(Q==="amplitude"){let K=this.#A(G.x/this.#_,0,0,1),O=this.#LJ(B,K),Y=this.#$J(G.y)-this.#NJ(this.#Z,K)-B.offset;B.amplitude=Math.abs(O)<0.001?B.amplitude:Y/O}this.#Q[this.#Z]=this.#V(B),this.#KJ(),this.#u("input")},j=()=>{if(this.#q=null,this.#G?.classList.remove("dragging"),Z)document.body.style.cursor=$;document.removeEventListener("pointermove",_),document.removeEventListener("pointerup",j),this.#u("change")};document.addEventListener("pointermove",_),document.addEventListener("pointerup",j)}#NJ(J,Q){return this.#Q.reduce((Z,$,_)=>{if(_===J)return Z;let j=Q*$.frequency,X=q.#r($.type,j,$.phase);return Z+$.offset+X*$.amplitude},0)}#LJ(J,Q){return q.#r(J.type,Q*J.frequency,J.phase)}#KJ({skipFieldSync:J=!1}={}){if(this.#MJ(),!J)this.#UJ();this.#SJ(),this.#v()}#MJ(){for(let J of this.#K){let Q=this.#S(J);J.value=this.#Q[Q]?.type||"sine"}}#UJ(){for(let J of this.#Y){if(J===this.#f)continue;let Q=this.#S(J),Z=J.getAttribute("name"),$=this.#b(this.#Q[Q]?.[Z]??0),_=J.querySelector("fig-slider");if(_)_.value=$;else J.setAttribute("value",String($))}}#SJ(){for(let J of this.#L)if(this.#S(J)===this.#Z)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#u(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:q.#h(this.#W.type)}}))}}customElements.define("fig-input-oscillator",q);class I extends HTMLElement{#Q;#Z;#J=null;#_;#B;#q;#G;#j;#X;constructor(){super();this.angle=0,this.#Q=1,this.#Z=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#_=this.#z.bind(this),this.#B=this.#W.bind(this),this.#q=this.#I.bind(this),this.#G=this.#A.bind(this),this.#j=this.#b.bind(this),this.#X=this.#x.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let J=this.getAttribute("units")||"°";if(J==="deg")J="°";if(this.units=J,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#N("dial",!0),this.showRotations=this.#E(),this.#$(),this.#O(),this.#T(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#f()}#$(){this.innerHTML=this.#P()}#N(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#E(){if(this.hasAttribute("rotations"))return this.#N("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#N("show-rotations",!1);return!1}#P(){let J=this.#K(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
         ${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
           <div class="fig-input-angle-handle"></div>
         </div>`:""}
@@ -47,4 +45,4 @@ class P extends HTMLElement{#J=null;#Z=null;#Q=null;#$=!1;#k=null;#U=new Set;#K=
                 units="${this.units}">
                 ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
               </fig-input-number>`:""}
-    `}#L(){let J=Math.abs(this.#Y(this.angle));return Math.floor(J/360)}#B(){if(!this.rotationSpan)return;let J=this.#L();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#q(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#Y(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#M(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#z(J,Q,Z){let _;switch(Q){case"rad":_=J*180/Math.PI;break;case"turn":_=J*360;break;default:_=J}switch(Z){case"rad":return _*Math.PI/180;case"turn":return _/360;default:return _}}#O(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#B(),this.plane?.addEventListener("mousedown",this.#k),this.plane?.addEventListener("touchstart",this.#U),window.addEventListener("keydown",this.#K),window.addEventListener("keyup",this.#G),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#j);this.addEventListener("change",this.#$,!0)}#A(){if(this.plane?.removeEventListener("mousedown",this.#k),this.plane?.removeEventListener("touchstart",this.#U),window.removeEventListener("keydown",this.#K),window.removeEventListener("keyup",this.#G),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#j);this.removeEventListener("change",this.#$,!0)}#D(J){if(!J.target?.matches?.("input"))return;let Z=J.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){let _=parseFloat(Z[1]),$=Z[2].toLowerCase();if($==="deg")$="°";if($!==this.units){let G=this.#z(_,$,this.units);J.target.value=String(G)}}}#g(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#N(),this.#S(),this.#B(),this.#H(),this.#F()}#N(){let Q=this.#Y(this.angle)*Math.PI/180;this.#J=Math.cos(Q),this.#Z=Math.sin(Q)}#R(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#u(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,_=Q.top+Q.height/2,$=J.clientX-Z,G=J.clientY-_;return Math.atan2(G,$)*180/Math.PI}#f(J){let Z=(this.#u(J)%360+360)%360;if(Z=this.#R(Z),this.min!==null||this.max!==null)this.angle=this.#M(Z);else if(this.#Q===null){this.#Q=Z;let G=(this.#Y(this.angle)%360+360)%360,j=Z-G;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#M(j)}else{let $=Z-this.#Q;if($>180)$-=360;if($<-180)$+=360;this.angle+=this.#M($),this.#Q=Z}if(this.#N(),this.#S(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#B(),this.#H()}#H(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#F(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#S(){if(this.handle){let Q=this.#Y(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,_=Math.cos(Q)*Z,$=Math.sin(Q)*Z;this.handle.style.transform=`translate(${_}px, ${$}px)`}}#P(J){this.isDragging=!0,this.#Q=null,this.#f(J);let Q=(_)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#f(_)},Z=()=>{this.isDragging=!1,this.#Q=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#F()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#V(J){J.preventDefault(),this.isDragging=!0,this.#Q=null,this.#f(J.touches[0]);let Q=(_)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#f(_.touches[0])},Z=()=>{this.isDragging=!1,this.#Q=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#F()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#c(J){if(J.key==="Shift")this.isShiftHeld=!0}#y(J){if(J.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","dial","rotations","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#J}get opposite(){return this.#Z}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#N(),this.#S(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#B()}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==Q){if(this.text=Z?.toLowerCase()==="true",this.isConnected)this.#_(),this.#O(),this.#S()}break;case"dial":if(this.dial=this.#E("dial",!0),this.isConnected)this.#_(),this.#O(),this.#S();break;case"units":{let _=Z||"°";if(_==="deg")_="°";if(this.units=_,this.isConnected)this.#_(),this.#O(),this.#S();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#_(),this.#O(),this.#S();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#_(),this.#O(),this.#S();break;case"rotations":case"show-rotations":if(this.showRotations=this.#C(),this.isConnected)this.#_(),this.#O(),this.#S();break}}}customElements.define("fig-input-angle",A);
+    `}#k(){let J=Math.abs(this.#L(this.angle));return Math.floor(J/360)}#Y(){if(!this.rotationSpan)return;let J=this.#k();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#K(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#L(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#M(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#U(J,Q,Z){let $;switch(Q){case"rad":$=J*180/Math.PI;break;case"turn":$=J*360;break;default:$=J}switch(Z){case"rad":return $*Math.PI/180;case"turn":return $/360;default:return $}}#O(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#Y(),this.plane?.addEventListener("mousedown",this.#B),this.plane?.addEventListener("touchstart",this.#q),window.addEventListener("keydown",this.#G),window.addEventListener("keyup",this.#j),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#X);this.addEventListener("change",this.#_,!0)}#f(){if(this.plane?.removeEventListener("mousedown",this.#B),this.plane?.removeEventListener("touchstart",this.#q),window.removeEventListener("keydown",this.#G),window.removeEventListener("keyup",this.#j),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#X);this.removeEventListener("change",this.#_,!0)}#z(J){if(!J.target?.matches?.("input"))return;let Z=J.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){let $=parseFloat(Z[1]),_=Z[2].toLowerCase();if(_==="deg")_="°";if(_!==this.units){let j=this.#U($,_,this.units);J.target.value=String(j)}}}#x(J){J.stopPropagation(),this.angle=Number(J.target.value),this.#R(),this.#T(),this.#Y(),this.#H(),this.#V()}#R(){let Q=this.#L(this.angle)*Math.PI/180;this.#Q=Math.cos(Q),this.#Z=Math.sin(Q)}#D(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#C(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,_=J.clientX-Z,j=J.clientY-$;return Math.atan2(j,_)*180/Math.PI}#F(J){let Z=(this.#C(J)%360+360)%360;if(Z=this.#D(Z),this.min!==null||this.max!==null)this.angle=this.#M(Z);else if(this.#J===null){this.#J=Z;let j=(this.#L(this.angle)%360+360)%360,X=Z-j;if(X>180)X-=360;if(X<-180)X+=360;this.angle+=this.#M(X)}else{let _=Z-this.#J;if(_>180)_-=360;if(_<-180)_+=360;this.angle+=this.#M(_),this.#J=Z}if(this.#R(),this.#T(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#Y(),this.#H()}#H(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#V(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#T(){if(this.handle){let Q=this.#L(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,_=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${_}px)`}}#W(J){this.isDragging=!0,this.#J=null,this.#F(J);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#F($)},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",Z),this.#V()};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",Z)}#I(J){J.preventDefault(),this.isDragging=!0,this.#J=null,this.#F(J.touches[0]);let Q=($)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#F($.touches[0])},Z=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",Z),this.#V()};window.addEventListener("touchmove",Q),window.addEventListener("touchend",Z)}#A(J){if(J.key==="Shift")this.isShiftHeld=!0}#b(J){if(J.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","dial","rotations","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#Q}get opposite(){return this.#Z}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}if(this.angle=J,this.#R(),this.#T(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#Y()}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==Q){if(this.text=Z?.toLowerCase()==="true",this.isConnected)this.#$(),this.#O(),this.#T()}break;case"dial":if(this.dial=this.#N("dial",!0),this.isConnected)this.#$(),this.#O(),this.#T();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#$(),this.#O(),this.#T();break}case"min":if(this.min=Z!==null?Number(Z):null,this.isConnected)this.#$(),this.#O(),this.#T();break;case"max":if(this.max=Z!==null?Number(Z):null,this.isConnected)this.#$(),this.#O(),this.#T();break;case"rotations":case"show-rotations":if(this.showRotations=this.#E(),this.isConnected)this.#$(),this.#O(),this.#T();break}}}customElements.define("fig-input-angle",I);class C extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Q=6;static#Z=["input","button","select","textarea","a[href]","label","summary","fig-button","fig-dropdown","fig-slider","fig-input-number","fig-input-text","fig-field-slider","fig-checkbox","fig-switch","fig-combo-input","fig-segmented-control","fig-input-color","fig-input-fill",'[contenteditable="true"]'];#J=null;#_=new Map;#B=null;#q=null;connectedCallback(){this.style.display="contents",this.#N(),this.#J=new MutationObserver(()=>this.#N()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#W(),this.#I(),this.#F()}attributeChangedCallback(){if(this.isConnected)this.#N()}get#G(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#j(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}#$(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE)}#N(){let J=this.#$(),Q=new Set(J);for(let[Z,$]of this.#_)if(!Q.has(Z))$.target.removeEventListener("pointerdown",$.onPointerDown,!0),this.#_.delete(Z);if(this.#k(J),this.#E(J),this.#G||J.length<2){this.#W();return}for(let Z of J){let $=this.#K(Z),_=this.#_.get(Z);if(_&&_.target===$)continue;if(_)_.target.removeEventListener("pointerdown",_.onPointerDown,!0),this.#_.delete(Z);if(!$)continue;this.#L(Z,$)}this.#Y(J),this.#P(J)}#E(J){for(let Q of J)Q.removeAttribute("data-reorder-item")}#P(J){for(let Q of J)Q.setAttribute("data-reorder-item","")}#k(J){for(let Q of J)Q.querySelectorAll("[data-reorder-handle]").forEach((Z)=>Z.removeAttribute("data-reorder-handle"))}#Y(J){if(!this.#X)return;for(let Q of J){let Z=Q.querySelector(this.#X);if(Z)Z.setAttribute("data-reorder-handle","")}}#K(J){if(this.#X)return J.querySelector(this.#X);return J}#L(J,Q){let Z=($)=>{if(this.#G||this.#$().length<2)return;if($.button!==0)return;if(!this.#X&&this.#M($.target,J))return;this.#f($,J,Q)};Q.addEventListener("pointerdown",Z,!0),this.#_.set(J,{target:Q,onPointerDown:Z})}#M(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of C.#Z)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#U="fig-reorder-dragging";static#O(J){document.body.classList.toggle(C.#U,J)}#f(J,Q,Z){this.#I();let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#$().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(_)=>{if(_.pointerId!==$.pointerId)return;let j=_.clientX-$.startX,X=_.clientY-$.startY;if(!$.active){if(j*j+X*X<C.#Q*C.#Q)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging"),C.#O(!0);try{Z.setPointerCapture($.pointerId)}catch{}}_.preventDefault();let G=this.#j==="horizontal"?_.clientX:_.clientY,B=this.#z(G);this.#H(Q,B),this.#C(B,Q)},$.onKeyDown=(_)=>{if(_.key!=="Escape"||!$.active)return;_.preventDefault(),this.#V($,!0)},$.onUp=(_)=>{if(_.pointerId!==$.pointerId)return;this.#V($,!1)},this.#B=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#z(J){let Q=this.#$(),Z=this.#j==="horizontal";for(let $=0;$<Q.length;$++){let _=Q[$].getBoundingClientRect(),j=Z?_.left+_.width/2:_.top+_.height/2;if(J<j)return $}return Q.length}#x(J,Q){let Z=this.#$(),$=Z.indexOf(J);if($===-1)return!1;if(Math.max(0,Math.min(Q,Z.length))>=Z.length&&$===Z.length-1)return!1;return!0}#R(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,_=-1/0;for(let j of J){let X=j.getBoundingClientRect();Q=Math.min(Q,X.left),Z=Math.max(Z,X.right),$=Math.min($,X.top),_=Math.max(_,X.bottom)}return{left:Q,top:$,width:Z-Q,height:_-$}}#D(){if(this.#q)return this.#q;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#j),document.body.appendChild(J),this.#q=J,J}#C(J,Q){let Z=this.#$();if(!this.#x(Q,J)){this.#F();return}let $=this.#R(Z);if(!$){this.#F();return}let _=this.#D();if(_.setAttribute("data-axis",this.#j),this.#j==="horizontal"){let X;if(J<=0)X=Z[0].getBoundingClientRect().left;else if(J>=Z.length)X=Z[Z.length-1].getBoundingClientRect().right;else X=Z[J].getBoundingClientRect().left;_.style.left=`${X-1}px`,_.style.top=`${$.top}px`,_.style.width="2px",_.style.height=`${$.height}px`;return}let j;if(J<=0)j=Z[0].getBoundingClientRect().top;else if(J>=Z.length)j=Z[Z.length-1].getBoundingClientRect().bottom;else j=Z[J].getBoundingClientRect().top;_.style.left=`${$.left}px`,_.style.top=`${j-1}px`,_.style.width=`${$.width}px`,_.style.height="2px"}#F(){this.#q?.remove(),this.#q=null}#H(J,Q){let Z=this.#$(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let _=Z[$];if(_!==J)this.insertBefore(J,_)}#V(J,Q){let{item:Z,oldIndex:$,active:_,onMove:j,onUp:X,onKeyDown:G}=J;if(window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",X),window.removeEventListener("pointercancel",X),window.removeEventListener("keydown",G),_)if(Q)this.#T(Z,$);else{let B=this.#$().indexOf(Z);if(B!==-1&&B!==$)this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:B,item:Z}}))}if(Z.classList.remove("dragging"),C.#O(!1),this.#F(),this.#B===J)this.#B=null}#T(J,Q){let $=this.#$().filter((_)=>_!==J)[Q]??null;if($){this.insertBefore(J,$);return}this.appendChild(J)}#W(){for(let[,J]of this.#_)J.target.removeEventListener("pointerdown",J.onPointerDown,!0);this.#_.clear()}#I(){if(!this.#B)return;this.#V(this.#B,!0)}}customElements.define("fig-reorder",C);