@rogieking/figui3 6.24.5 → 6.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fig-lab.js +5 -5
- package/fig-lab.js +55 -51
- package/package.json +1 -1
package/dist/fig-lab.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
function S(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function M(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}var x=0;function n(J="fig-lab"){return x+=1,`${J}-${x}`}class g extends HTMLElement{}S("fig-ai-prompt",g);class m extends HTMLElement{}S("fig-chat-message",m);class u extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=null;#$=null;#j=this.#O.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#j),this.addEventListener("click",this.#j),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){this.#_?.disconnect(),this.#U(),this.removeEventListener("click",this.#j)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#Y()}#G(){let Q=Array.from(this.childNodes).filter((Y)=>Y.nodeType!==Node.TEXT_NODE||Boolean(Y.textContent?.trim())).find((Y)=>Y.nodeType===Node.ELEMENT_NODE&&Y.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),_=document.createElement("fig-segment"),X=document.createElement("fig-segment");j.setAttribute("sizing","equal"),_.setAttribute("value","off"),_.textContent="Off",X.setAttribute("value","on"),X.textContent="On",j.append(_,X),Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#B=Boolean(Q),this.replaceChildren(Z)}#Y(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#M(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#P)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",M(this,"checked")?"on":"off"),this.#P=Q}#N(){if(!this.#J)return;this.#X??=this.#q.bind(this,"input"),this.#$??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#q(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value==="on";this.toggleAttribute("checked",Z);let $={checked:Z,value:this.getAttribute("value")??""};this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":M(this,"checked")}set checked(J){let Q=Boolean(J);if(this.toggleAttribute("checked",Q),this.#J)this.#J.value=Q?"on":"off"}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}S("propskit-switch",u);class c extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=null;#$=null;#j=this.#S.bind(this);#G=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#Y();if(this.#M(),this.#N(),this.#U(),this.#G===null)this.#G=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#j),this.addEventListener("click",this.#j),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#M();if(Z)this.#N()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){this.#_?.disconnect(),this.#q(),this.removeEventListener("click",this.#j)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#M()}#Y(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#B=Boolean(Q),this.replaceChildren(Z)}#M(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Color")}#k(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#N(){if(!this.#J)return;let J=this.#k(),Q=new Set(J);for(let Z of this.#P)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}this.#J.setAttribute("text","true"),this.#P=Q}#U(){if(!this.#J)return;this.#X??=this.#L.bind(this,"input"),this.#$??=this.#L.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#q(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#J?.value==="string"&&this.#J.value)return this.#J.value;return this.#J?.getAttribute("value")??""}#L(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);if(this.setAttribute("value",Z),this.#J&&this.#J.getAttribute("value")!==Z)this.#J.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#S(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.getAttribute("value")??this.#J?.value??this.#J?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}#z(J){if(!this.#J)return;if(this.#J.getAttribute("value")===J)this.#J.removeAttribute("value");this.#J.setAttribute("value",J)}#K(){return this.getAttribute("default")??this.#G??""}resetToDefault(){let J=String(this.#K());this.setAttribute("value",J),this.#z(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}S("propskit-color",c);class v extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=null;#$=null;#j=this.#K.bind(this);#G=this.#z.bind(this);#Y=!1;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Z)this.#M();if(this.#k(),this.#U(),this.#q(),this.removeEventListener("click",this.#j),this.addEventListener("click",this.#j),this.removeEventListener("pointerdown",this.#G,!0),this.addEventListener("pointerdown",this.#G,!0),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#U()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){this.#_?.disconnect(),this.#O(),this.removeEventListener("click",this.#j),this.removeEventListener("pointerdown",this.#G,!0)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#k();return}if(J==="options"||J==="value")this.#U()}#M(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Z=Q,this.#Q=Z,this.#J=$,this.#B=Boolean(J),this.replaceChildren(Q)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Select"),this.#J.setAttribute("full","")}#N(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#J)return;let J=this.#N().sort((Z,$)=>{if(Z==="options")return-1;if($==="options")return 1;if(Z==="value")return 1;if($==="value")return-1;return 0}),Q=new Set(J);for(let Z of this.#P)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#P=Q}#q(){if(!this.#J)return;this.#X??=this.#L.bind(this,"input"),this.#$??=this.#L.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#O(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#L(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#S(){if(!this.#J)return!1;if(this.#J.open)return!0;let J=this.#J.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#z(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-select")){this.#Y=!1;return}this.#Y=this.#S()}#K(J){if(J.target instanceof Element&&J.target.closest("fig-select")){this.#Y=!1;return}if(!this.#J||M(this.#J,"disabled")){this.#Y=!1;return}if(this.#J.focus(),this.#Y||this.#S()){this.#Y=!1,this.#J.open=!1;return}this.#J.open=!0}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}focus(J){this.#J?.focus(J)}}S("propskit-select",v);class s extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=null;#$=null;#j=this.#O.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#j),this.addEventListener("click",this.#j),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){this.#_?.disconnect(),this.#U(),this.removeEventListener("click",this.#j)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#Y()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#B=Boolean(Q),this.replaceChildren(Z)}#Y(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Text")}#M(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#P)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#P=Q}#N(){if(!this.#J)return;this.#X??=this.#q.bind(this,"input"),this.#$??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#q(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-input-text"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}focus(J){this.#J?.focus(J)}}S("propskit-text",s);class o extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=null;#$=null;#j=this.#O.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#j),this.addEventListener("click",this.#j),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){this.#_?.disconnect(),this.#U(),this.removeEventListener("click",this.#j)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#Y()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#B=Boolean(Q),this.replaceChildren(Z);for(let _ of J)if(_!==Q)j.appendChild(_)}#Y(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#M(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#P)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#P=Q}#N(){if(!this.#J)return;this.#X??=this.#q.bind(this,"input"),this.#$??=this.#q.bind(this,"change"),this.#J.addEventListener("input",this.#X),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#X)this.#J.removeEventListener("input",this.#X);if(this.#$)this.#J.removeEventListener("change",this.#$)}#q(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-input-number"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}focus(J){this.#J?.focus(J)}}S("propskit-number",o);class b extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Z=["propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text"].join(",");#Q=null;#J=null;#B=null;#_=null;#P=new WeakMap;#X=null;#$=0;#j=()=>this.#M();connectedCallback(){this.#R(),this.#G(),requestAnimationFrame(()=>{this.#L(),this.#K()})}disconnectedCallback(){if(this.#Y(),this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#J?.removeEventListener("click",this.#N),this.#_?.querySelector("fig-button")?.removeEventListener("click",this.#U)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#J?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#T(),this.#K();return}this.#R()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#J?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#C()}#G(){if(this.removeEventListener("input",this.#j,!0),this.removeEventListener("change",this.#j,!0),this.addEventListener("input",this.#j,!0),this.addEventListener("change",this.#j,!0),!this.#X)this.#X=new MutationObserver(()=>{this.#L(),this.#M()});this.#X.disconnect(),this.#X.observe(this,{childList:!0,subtree:!0})}#Y(){this.removeEventListener("input",this.#j,!0),this.removeEventListener("change",this.#j,!0),this.#X?.disconnect()}#M(){if(this.#$)return;this.#$=requestAnimationFrame(()=>{this.#$=0,this.#L(),this.#K()})}#k(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#N=(J)=>{if(this.#k(J.target))return;J.stopPropagation(),this.open=!this.open};#U=(J)=>{J.preventDefault(),J.stopPropagation(),this.#C()};#q(){return[...this.querySelectorAll(b.#Z)].filter((J)=>J.closest("propskit-group")===this)}#O(J){if(J.localName==="propskit-switch")return{kind:"checked",value:Boolean(J.checked)};if("value"in J)return{kind:"value",value:J.value};return{kind:"value",value:J.getAttribute("value")??""}}#L(){for(let J of this.#q()){if(this.#P.has(J))continue;if(J.hasAttribute("default")){if(J.localName==="propskit-switch"){this.#P.set(J,{kind:"checked",value:M(J,"default")});continue}this.#P.set(J,{kind:"value",value:J.getAttribute("default")??""});continue}this.#P.set(J,this.#O(J))}}#S(J){let Q=this.#P.get(J);if(!Q)return!1;let Z=this.#O(J);if(Q.kind==="checked")return Boolean(Z.value)!==Boolean(Q.value);return String(Z.value??"")!==String(Q.value??"")}#z(){for(let J of this.#q())if(this.#S(J))return!0;return!1}#K(){if(this.#z())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#T()}#H(J){let Q=this.#P.get(J);if(!Q)return;if(Q.kind==="checked"){J.checked=Q.value;let $={checked:Boolean(Q.value),value:J.getAttribute("value")??""};J.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,cancelable:!0,composed:!0}));return}if(typeof J.resetToDefault==="function"){let $=J.getAttribute("default");if(J.setAttribute("default",String(Q.value??"")),J.resetToDefault(),$===null)J.removeAttribute("default");else J.setAttribute("default",$);return}J.value=Q.value;let Z=J.getAttribute?.("value")??("value"in J?J.value:Q.value);J.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#C(){this.#L();for(let J of this.#q())this.#H(J);this.#K(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#T(){if(!this.showReset){this.#_?.setAttribute("hidden","");return}this.#F(),this.#_?.removeAttribute("hidden")}#F(){if(!this.#Q||!this.showReset)return;let J=this.#Q.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#Q.appendChild(J),Q.addEventListener("click",this.#U)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#U),Q?.addEventListener("click",this.#U)}this.#_=J}#R(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#Q=Z;else if(!this.#Q||!this.#Q.dataset.generated||this.#Q.parentElement!==this)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let $=this.#Q.querySelector(":scope > .propskit-group-disclosure");if(!$){$=document.createElement("fig-button"),$.className="propskit-group-disclosure",$.setAttribute("variant","ghost");let _=this.#Q.querySelector(":scope > h3");if(_)$.appendChild(_);this.#Q.prepend($)}this.#J=$;let j=$.querySelector("h3");if(!j)j=document.createElement("h3"),$.appendChild(j);if(!j.id)j.id=n("propskit-group");if(this.#Q.dataset.generated){let _=j.querySelector(".propskit-group-chevron");if(j.textContent=Q,_)j.prepend(_)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",j.id);if(!j.querySelector(".propskit-group-chevron")){let _=document.createElement("fig-icon");_.setAttribute("name","chevron"),_.setAttribute("size","small"),_.className="propskit-group-chevron",j.prepend(_)}if(this.#B=j.querySelector(".propskit-group-chevron"),this.#T(),this.#Q.removeAttribute("role"),this.#Q.removeAttribute("tabindex"),this.#Q.removeAttribute("aria-expanded"),this.#J.setAttribute("aria-labelledby",j.id),this.#J.setAttribute("aria-expanded",String(this.open)),this.#J.removeEventListener("click",this.#N),this.#J.addEventListener("click",this.#N),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#J.setAttribute("aria-expanded","false")}}S("propskit-group",b);class r extends HTMLElement{#Z=null;#Q=null;#J=null;#B=!1;#_=null;#P=new Set;#X=0;#$=0;#j=null;#G=null;#Y=0;#M=null;#k=!1;#N=0;#U=null;#q=0;#O=null;#L=null;#S=null;#z=this.#$J.bind(this);#K=this.#m.bind(this);#H=this.#jJ.bind(this);#C=this.#h.bind(this);#T=this.#i.bind(this);#F=this.#e.bind(this);#R=this.#w.bind(this);#p=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.#Z)this.#D();if(this.#x(),this.#y(),this.#XJ(),this.#V(),this.removeEventListener("pointerdown",this.#z,{capture:!0}),this.addEventListener("pointerdown",this.#z,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#T),this.addEventListener("contextmenu",this.#T),this.removeEventListener("click",this.#R,!0),this.addEventListener("click",this.#R,!0),this.#G?.removeEventListener("change",this.#F),this.#G?.addEventListener("change",this.#F),!this.#_)this.#_=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName==="value"){this.#f();continue}if($.attributeName&&this.#p.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#x();if(Z)this.#y(),this.#V()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#_?.disconnect(),this.#X)cancelAnimationFrame(this.#X),this.#X=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#JJ(),this.#t(),this.#ZJ(),this.#g(),this.#kJ(),this.removeEventListener("pointerdown",this.#z,{capture:!0}),this.removeEventListener("contextmenu",this.#T),this.removeEventListener("click",this.#R,!0),this.#G?.removeEventListener("change",this.#F)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#x()}#D(){let J=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let _ of this.#r()){let X=this.getAttribute(_);j.setAttribute(_,X??"")}Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#B=Boolean(Q),this.replaceChildren(Z),this.#W();for(let _ of J){if(_===Q)continue;this.#J.appendChild(_)}}#W(){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.#F),this.#G=J,this.appendChild(J)}#x(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Q.parentElement===this.#Z)this.#Q.remove()}else{if(!this.#B)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#y(){if(!this.#J)return;let J=this.#r(),Q=new Set(J.filter(($)=>$!=="text"&&$!=="value"));for(let $ of this.#P)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text"||$==="value")continue;let j=this.getAttribute($)??"";if(this.#J.getAttribute($)!==j)this.#J.setAttribute($,j)}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.#P=Q,this.#f(),this.#I()}#f(){if(!this.#J)return;let J=this.getAttribute("value")??"";if(String(this.#J.value)!==J)this.#J.value=J}#r(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#p.has(Q))}#I(){if(this.#X)cancelAnimationFrame(this.#X);this.#X=requestAnimationFrame(()=>{this.#X=0,this.#GJ(),this.#E()})}#V(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#E()})}#E(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#j)this.#v(J);if(J){J.removeAttribute("tabindex"),J.removeAttribute("aria-hidden");let Z=this.getAttribute("aria-label")||this.#Q?.textContent?.trim()||"Slider";if(!J.hasAttribute("aria-label")&&!J.hasAttribute("aria-labelledby"))J.setAttribute("aria-label",Z)}if(Q)Q.setAttribute("tabindex","-1"),Q.setAttribute("aria-hidden","true")}#w(J){if(M(this,"disabled"))return;if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.#A()}#A(){requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(this.isConnected&&!M(this,"disabled"))this.focus()})})}#v(J){if(this.#g(),this.#j=J,!this.#j)return;this.#j.addEventListener("dblclick",this.#C,{capture:!0})}#g(){if(!this.#j)return;this.#j.removeEventListener("dblclick",this.#C,{capture:!0}),this.#j=null}#h(J){J.preventDefault(),J.stopImmediatePropagation(),this.#o()}#$J(J){if(J.button!==0||M(this,"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.#j;if(!Q)return;this.#t(),this.#ZJ(),this.#j=Q,this.#k=!0,this.#O=J.pointerId,this.#N=this.#UJ();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#U={left:Z.left,right:Z.right,width:Z.width},this.#q=$.width,window.addEventListener("pointermove",this.#K,{passive:!0}),window.addEventListener("pointerup",this.#H,{once:!0}),window.addEventListener("pointercancel",this.#H,{once:!0}),window.addEventListener("blur",this.#H,{once:!0})}#m(J){if(!this.#k)return;if(J.pointerId!==this.#O)return;if(J.buttons===0){this.#jJ(J);return}this.#QJ(J.clientX)}#jJ(J){if(J?.pointerId!==void 0&&this.#O!==null&&J.pointerId!==this.#O)return;let Q=J?.type==="pointerup"||J?.type==="pointermove"&&J.buttons===0;if(this.#t(),this.#ZJ(),Q)this.#A()}#t(){window.removeEventListener("pointermove",this.#K),window.removeEventListener("pointerup",this.#H),window.removeEventListener("pointercancel",this.#H),window.removeEventListener("blur",this.#H),this.#k=!1,this.#O=null}#i(J){if(M(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#JJ(),this.#YJ(J.clientX,J.clientY)}#YJ(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#G?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#e(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#o()}#JJ(){if(this.#Y)clearTimeout(this.#Y),this.#Y=0;this.#M=null}#UJ(){let J=getComputedStyle(this).getPropertyValue("--propskit-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(--propskit-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}#QJ(J){let Q=this.#U;if(!Q||!this.#N){this.#ZJ();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#l();return}let $=Math.max(-this.#N,Math.min(this.#N,Z*0.5)),j=Math.abs($),_=this.#q?(this.#q+j)/this.#q:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${_}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#ZJ(){this.#l(),this.#N=0,this.#U=null,this.#q=0,this.#O=null}#l(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#MJ(J){let Q=this.#j;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,j=Number(Q.min||0),_=Number(Q.max||100),X=Q.step==="any"?0:Number(Q.step||1),Y=j+(_-j)*$;if(!X)return String(Y);let B=Math.round((Y-j)/X)*X+j,G=Math.max(0,`${X}`.split(".")[1]?.length||0);return String(Number(B.toFixed(G)))}#s(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#j?.min??"0"}#o(){this.#JJ(),this.#_J(this.#s(),"input"),this.#_J(this.#s(),"change")}#_J(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.setAttribute("value",String(this.#J.value)),this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#GJ(){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??"")}#XJ(){if(!this.#J)return;if(!this.#L)this.#L=this.#PJ.bind(this,"input");if(!this.#S)this.#S=this.#PJ.bind(this,"change");this.#J.addEventListener("input",this.#L),this.#J.addEventListener("change",this.#S)}#kJ(){if(!this.#J)return;if(this.#L)this.#J.removeEventListener("input",this.#L);if(this.#S)this.#J.removeEventListener("change",this.#S)}#PJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#ZJ();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0){let $=String(this.#J.value);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#E();let Q=this.#J?.querySelector('input[type="range"]');Q?.setAttribute("data-propskit-focus-called",""),Q?.focus(J)}get value(){return this.getAttribute("value")??this.#J?.value??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value="";return}let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}resetToDefault(){this.#o()}}S("propskit-slider",r);class l extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Z=50;#Q=50;#J=75;#B=75;#_=0;#P=!1;#X=0;#$=null;#j=null;#G=null;#Y=null;#M=null;#k=null;#N=null;#U=null;#q=null;#O=!1;#L=!1;#S=!1;#z=!1;#K=null;#H="";#C="";#T=null;#F=null;#R=null;#p="";#D="";#W=null;#x=null;#y=null;get#f(){return this.getAttribute("type")||"point"}get#r(){return this.#f==="point-radius"||this.#f==="point-radius-angle"}get#I(){return this.#f==="point-radius-angle"}get#V(){return this.#f==="point-point"}get#E(){return this.#f==="point-radius-angle"||this.#f==="point-point"}get#w(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#A(){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.#A;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#g(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Z)}%, ${Math.round(this.#Q)}%`}get#h(){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.#B)}%`}get#$J(){return this.getAttribute("drag-surface")||"parent"}get#m(){let J=this.#$J;if(J==="parent")return this.parentElement;return this.closest(J)}get#jJ(){let J=this.#$J;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.#P)return this.#_/100*J;return this.#_}#i(){if(this.#P)return`Radius ${Math.round(this.#_)}%`;return`Radius ${Math.round(this.#_)}`}connectedCallback(){this.#YJ(),this.#e()}disconnectedCallback(){this.#LJ(),this.#CJ(),this.#QJ(),this.#s(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#O&&!this.#L&&!this.#S&&!this.#z)if(this.#YJ(),this.#$)this.#b();else this.#e();if(J==="type")this.#LJ(),this.#YJ(),this.#e();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#LJ(),this.#e();if(J==="tooltips")this.#e();if(J==="snapping"&&this.#$){if(this.#$.setAttribute("drag-snapping",Z||"false"),this.#j)this.#j.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#k)this.#k.setAttribute("text",this.#g);if(this.#N)this.#N.setAttribute("text",this.#h)}}#YJ(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Z=Q.x;if(typeof Q.y==="number")this.#Q=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#P=!0,this.#_=parseFloat(Z);else this.#P=!1,this.#_=parseFloat(Z);if(!Number.isFinite(this.#_))this.#_=0}if(typeof Q.angle==="number")this.#X=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#B=Q.y2}catch{}}get value(){let J={x:this.#Z,y:this.#Q};if(this.#f==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#r)J.radius=this.#P?`${this.#_}%`:this.#_;if(this.#I)J.angle=this.#X;if(this.#V)J.x2=this.#J,J.y2=this.#B;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#e(){this.#LJ(),this.innerHTML="",this.#$=null,this.#j=null,this.#G=null,this.#Y=null,this.#M=null,this.#k=null,this.#N=null,this.#U=null,this.#q=null;let J=M(this,"disabled"),Q=this.#f,Z=this.#w,$=this.#jJ,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#A),j.setAttribute("value",`${this.#Z}% ${this.#Q}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let _=this.getAttribute("color");if(_)j.setAttribute("color",_)}else j.setAttribute("type","canvas");if(this.#V)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#$=j,this.#r)this.#PJ();if(this.#E)this.#SJ();if(Z){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#g),_.appendChild(j),this.appendChild(_),this.#k=_}else this.appendChild(j);if(this.#I)this.#u(J,Z,$);if(this.#V)this.#VJ(J,Z,$);this.#JJ(this.#$),this.#JJ(this.#G),this.#JJ(this.#j),this.#c(),this.#GJ(),requestAnimationFrame(()=>this.#b())}#JJ(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#MJ(Q,J);else this.#UJ(Q)},{capture:!0})}#UJ(J){if(M(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#K===null)this.#H=document.body.style.getPropertyValue("cursor"),this.#C=document.body.style.getPropertyPriority("cursor");if(this.#K=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#T)this.#T=(Q)=>{if(Q?.pointerId!==void 0&&this.#K!==null&&Q.pointerId!==this.#K)return;if(Q?.type==="blur")this.#QJ();else requestAnimationFrame(()=>this.#QJ())};window.addEventListener("pointerup",this.#T),window.addEventListener("pointercancel",this.#T),window.addEventListener("blur",this.#T)}#QJ(){if(this.#K===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#H)document.body.style.setProperty("cursor",this.#H,this.#C);else document.body.style.removeProperty("cursor");if(this.#K=null,this.#H="",this.#C="",this.#T)window.removeEventListener("pointerup",this.#T),window.removeEventListener("pointercancel",this.#T),window.removeEventListener("blur",this.#T)}#ZJ(J){if(!J)return 0;if(J===this.#G)return this.#X;if(!this.#V)return 0;let Q=this.#qJ();return J===this.#$?Q+180:Q}#l(){if(this.#F===null)return;let J=this.#OJ(this.#ZJ(this.#R));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#MJ(J,Q){if(M(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#F===null)this.#p=document.body.style.getPropertyValue("cursor"),this.#D=document.body.style.getPropertyPriority("cursor");if(this.#F=J?.pointerId??-1,this.#R=Q,document.body.classList.add("fig-lab-rotate-active"),this.#l(),!this.#W)this.#W=(Z)=>{if(Z?.pointerId!==void 0&&this.#F!==null&&Z.pointerId!==this.#F)return;if(Z?.type==="blur")this.#s();else requestAnimationFrame(()=>this.#s())};window.addEventListener("pointerup",this.#W),window.addEventListener("pointercancel",this.#W),window.addEventListener("blur",this.#W)}#s(){if(this.#F===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#p)document.body.style.setProperty("cursor",this.#p,this.#D);else document.body.style.removeProperty("cursor");if(this.#F=null,this.#R=null,this.#p="",this.#D="",this.#W)window.removeEventListener("pointerup",this.#W),window.removeEventListener("pointercancel",this.#W),window.removeEventListener("blur",this.#W)}#o(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?.()},Y=()=>{_()};J.addEventListener("pointerenter",X),J.addEventListener("pointerleave",Y)}#_J(){return this.#O||this.#L||this.#S||this.#z}#GJ(){if(this.#$)this.#o(this.#$,()=>this.#k,()=>this.#g,()=>this.#_J()||!!this.#$?.querySelector("fig-color-tip"));if(this.#G)this.#o(this.#G,()=>this.#q,()=>`Angle ${Math.round(this.#X)}°`,()=>this.#_J());if(this.#j)this.#o(this.#j,()=>this.#N,()=>this.#h,()=>this.#_J());if(this.#Y){let J=this.#Y.querySelector(".fig-canvas-control-radius-hit");this.#kJ(J||this.#Y)}if(this.#f==="color"&&this.#$&&this.#k)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#k?.removeAttribute("show"),this.#k?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#XJ(J,Q){let Z=this.#U;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?.()}#kJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#U;if(!Z)return;Z.setAttribute("text",this.#i()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#XJ(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#S)return;this.#XJ(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#S)return;let Q=this.#U;if(!Q)return;Q.removeAttribute("show")})}#PJ(){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 j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#Y=Q,this.#w){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#i()),_.appendChild(Q),this.appendChild(_),this.#U=_}else this.appendChild(Q);this.#fJ(Z)}#SJ(){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.#V){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#RJ(j)}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.#M=Q,this.appendChild(Q)}#RJ(J){J.addEventListener("pointerdown",(Q)=>{if(M(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#m;if(!Z)return;let{clientX:$,clientY:j}=Q,_=this.#Z,X=this.#Q,Y=this.#J,B=this.#B;this.#O=!0,this.#L=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let G=(P)=>{let q=Z.getBoundingClientRect(),O=q.width>0?(P.clientX-$)/q.width*100:0,N=q.height>0?(P.clientY-j)/q.height*100:0,K=-Math.min(_,Y),z=100-Math.max(_,Y),T=-Math.min(X,B),F=100-Math.max(X,B),L=Math.max(K,Math.min(z,O)),W=Math.max(T,Math.min(F,N));this.#Z=_+L,this.#Q=X+W,this.#J=Y+L,this.#B=B+W,this.#b(),this.#a()},k=this.#WJ((P)=>{if(document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#O=!1,this.#L=!1,P)this.#n(),this.#d()});window.addEventListener("pointermove",G,{signal:k.signal}),window.addEventListener("pointerup",()=>k.finish(!0),{signal:k.signal}),window.addEventListener("pointercancel",()=>k.finish(!1),{signal:k.signal})})}#u(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.#G=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#X)}°`),j.appendChild($),this.appendChild(j),this.#q=j}else this.appendChild($)}#VJ(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.#A),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#B}%`),J)$.setAttribute("disabled","");if(this.#j=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#h),j.appendChild($),this.appendChild(j),this.#N=j}else this.appendChild($)}#BJ(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`}#OJ(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`}#zJ(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#KJ(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#zJ(Z,this.#OJ(Q)),this.#R===J)this.#l()}#TJ(){if(!this.#G||!this.#I)return;this.#KJ(this.#G,this.#X)}#qJ(){return Math.atan2(this.#B-this.#Q,this.#J-this.#Z)*180/Math.PI}#FJ(){if(!this.#V)return;let J=this.#qJ();this.#$?.style.removeProperty("cursor"),this.#j?.style.removeProperty("cursor"),this.#KJ(this.#$,J+180),this.#KJ(this.#j,J)}#NJ(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`}#b(){let J=this.#m;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#NJ(this.#$,this.#Z,this.#Q,Q),this.#Y){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#t(Q.width),_=this.#Y,X=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${X}px`,_.style.height=`${X}px`,_.style.left=`${Z-j}px`,_.style.top=`${$-j}px`,_.setAttribute("viewBox",`0 0 ${X} ${X}`);let Y=_.querySelectorAll("circle");for(let B of Y)B.setAttribute("cx",String(j)),B.setAttribute("cy",String(j)),B.setAttribute("r",String(Math.max(j-1,0)))}if(this.#M&&this.#E){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j,_;if(this.#V)j=this.#J/100*Q.width,_=this.#B/100*Q.height;else{let B=this.#t(Q.width),G=this.#X*Math.PI/180;j=Z+B*Math.cos(G),_=$+B*Math.sin(G)}let X=this.#M;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 Y=X.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo, .fig-canvas-control-angle-line-hit");for(let B of Y)B.setAttribute("x1",String(Z)),B.setAttribute("y1",String($)),B.setAttribute("x2",String(j)),B.setAttribute("y2",String(_))}if(this.#G&&this.#I){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#t(Q.width),_=this.#X*Math.PI/180,X=Z+j*Math.cos(_),Y=$+j*Math.sin(_),B=Q.width>0?X/Q.width*100:0,G=Q.height>0?Y/Q.height*100:0;this.#NJ(this.#G,B,G,Q)}if(this.#j&&this.#V)this.#NJ(this.#j,this.#J,this.#B,Q);this.#TJ(),this.#FJ()}#a(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#d(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#n(){this.setAttribute("value",JSON.stringify(this.value))}#c(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#a();return}this.#O=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#k)this.#k.removeAttribute("show"),this.#k.hidePopup?.();this.#b(),this.#a()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#d();return}let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#k)this.#k.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#O=!1})}),this.#G)this.#G.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#m;if(!Q)return;this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Z/100*Z.width,j=this.#Q/100*Z.height,_=J.detail?.x??0,X=J.detail?.y??0,Y=this.#G.offsetWidth/2,B=this.#G.offsetHeight/2,G=_+Y-$,k=X+B-j,P=Math.atan2(k,G)*180/Math.PI;if(this.#v(J.detail?.shiftKey))P=Math.round(P/15)*15;this.#X=P;let q=Math.sqrt(G*G+k*k);if(this.#v(J.detail?.shiftKey)){let O=this.#P?5:10;if(this.#P){let N=q/Z.width*100;N=Math.round(N/O)*O,q=N/100*Z.width}else q=Math.round(q/O)*O}if(this.#P)this.#_=Math.max(0,q/Z.width*100);else this.#_=Math.max(0,q);if(this.#q)this.#q.setAttribute("text",`Angle ${Math.round(this.#X)}°`),this.#q.setAttribute("show","true"),this.#q.showPopup?.();this.#b(),this.#a()}),this.#G.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#q)this.#q.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#z=!1})}),this.#G.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#m;if(!Z)return;if(this.#z=!0,this.classList.add("fig-canvas-control-ring-active"),this.#G.setAttribute("selected",""),this.#q)this.#q.setAttribute("show","true"),this.#q.showPopup?.();let $=(_)=>{let X=Z.getBoundingClientRect(),Y=this.#Z/100*X.width,B=this.#Q/100*X.height,G=_.clientX-X.left-Y,k=_.clientY-X.top-B,P=Math.atan2(k,G)*180/Math.PI;if(this.#v(_.shiftKey))P=Math.round(P/15)*15;if(this.#X=P,this.#q)this.#q.setAttribute("text",`Angle ${Math.round(P)}°`);this.#b(),this.#a()},j=this.#WJ((_)=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#G.removeAttribute("selected"),this.#q)this.#q.removeAttribute("show");if(_)this.#n(),this.#d()});window.addEventListener("pointermove",$,{signal:j.signal}),window.addEventListener("pointerup",()=>j.finish(!0),{signal:j.signal}),window.addEventListener("pointercancel",()=>j.finish(!1),{signal:j.signal})});if(this.#j)this.#j.addEventListener("input",(J)=>{J.stopPropagation(),this.#L=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#B/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#B=Math.round(Math.max(0,Math.min(100,Z*100))),this.#N)this.#N.removeAttribute("show"),this.#N.hidePopup?.();this.#b(),this.#a()}),this.#j.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#N)this.#N.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#L=!1})}),this.#HJ(this.#$,!0),this.#HJ(this.#j,!1)}#HJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#m;if(!j)return;this.#O=!0;let _=j.getBoundingClientRect(),X=Q?this.#J:this.#Z,Y=Q?this.#B:this.#Q,B=Q?this.#Z:this.#J,G=Q?this.#Q:this.#B,k=X/100*_.width,P=Y/100*_.height,q=B/100*_.width,O=G/100*_.height,N=Math.sqrt((q-k)**2+(O-P)**2),K=Q?this.#k:this.#N;if(K)K.removeAttribute("show"),K.hidePopup?.();let z=(F)=>{let L=j.getBoundingClientRect(),W=X/100*L.width,f=Y/100*L.height,R=F.clientX-L.left-W,C=F.clientY-L.top-f,V=Math.atan2(C,R);if(this.#v(F.shiftKey))V=Math.round(V*180/Math.PI/15)*15*Math.PI/180;let i=W+N*Math.cos(V),a=f+N*Math.sin(V),y=Math.max(0,Math.min(100,i/L.width*100)),h=Math.max(0,Math.min(100,a/L.height*100));if(Q)this.#Z=y,this.#Q=h;else this.#J=y,this.#B=h;this.#b(),this.#a()},T=this.#WJ((F)=>{if(this.#O=!1,K)K.removeAttribute("show");if(F)this.#n(),this.#d()});window.addEventListener("pointermove",z,{signal:T.signal}),window.addEventListener("pointerup",()=>T.finish(!0),{signal:T.signal}),window.addEventListener("pointercancel",()=>T.finish(!1),{signal:T.signal})})}#fJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#S)return;let $=this.#m;if(!$)return;let j=$.getBoundingClientRect(),_=this.#Z/100*j.width,X=this.#Q/100*j.height,Y=Math.atan2(Z.clientY-j.top-X,Z.clientX-j.left-_)*180/Math.PI;this.#zJ(J,this.#BJ(Y))});let Q=(Z)=>{if(M(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#S=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#m;if(!$)return;if(this.#U)this.#U.setAttribute("show","true"),this.#U.showPopup?.(),this.#XJ(Z.clientX,Z.clientY);if(this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();let j=this.#G?.style.pointerEvents,_=this.#G?.querySelector(".fig-handle-hit-area"),X=_?.style.pointerEvents;if(this.#G)this.#G.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let Y=document.body.style.cursor;J.style.pointerEvents="none";let B=$.getBoundingClientRect(),G=this.#Z/100*B.width,k=this.#Q/100*B.height,P=Math.atan2(Z.clientY-B.top-k,Z.clientX-B.left-G)*180/Math.PI,q=Math.round(P);document.body.style.cursor=this.#BJ(q);let O=(K)=>{let z=$.getBoundingClientRect(),T=this.#Z/100*z.width,F=this.#Q/100*z.height,L=K.clientX-z.left-T,W=K.clientY-z.top-F,f=Math.round(Math.atan2(W,L)*180/Math.PI);if(f!==q)q=f,document.body.style.cursor=this.#BJ(f);let R=Math.sqrt(L*L+W*W);if(this.#v(K.shiftKey)){let C=this.#P?5:10;if(this.#P){let V=R/z.width*100;V=Math.round(V/C)*C,R=V/100*z.width}else R=Math.round(R/C)*C}if(this.#P)this.#_=Math.max(0,R/z.width*100);else this.#_=Math.max(0,R);if(this.#U)this.#U.setAttribute("text",this.#i()),this.#XJ(K.clientX,K.clientY);this.#b(),this.#a()},N=this.#WJ((K)=>{if(this.#S=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#G)this.#G.style.pointerEvents=j??"";if(_)_.style.pointerEvents=X??"";if(document.body.style.cursor=Y,this.#U)this.#U.removeAttribute("show");if(K)this.#n(),this.#d()});window.addEventListener("pointermove",O,{signal:N.signal}),window.addEventListener("pointerup",()=>N.finish(!0),{signal:N.signal}),window.addEventListener("pointercancel",()=>N.finish(!1),{signal:N.signal})};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#CJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}#WJ(J){this.#LJ();let Q=new AbortController,Z=!1,$=(j=!1)=>{if(Z)return;if(Z=!0,Q.abort(),this.#x===Q)this.#x=null,this.#y=null;J(j)};return this.#x=Q,this.#y=$,{signal:Q.signal,finish:$}}#LJ(){this.#y?.(!1),this.#x?.abort(),this.#x=null,this.#y=null}}S("fig-canvas-control",l);class U extends HTMLElement{#Z=[U.#F()];#Q=0;#J=2;#B=240;#_=120;#P={min:-1,max:1};#X=null;#$=null;#j=null;#G=null;#Y=0;#M=null;#k=null;#N=null;#U=null;#q=[];#O=[];#L=[];#S=[];#z=new Set;#K=null;#H=null;#C=null;#T=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#F(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.#R("precision",2),this.#y(this.getAttribute("value")),this.#x(),this.#h(),this.#UJ()}disconnectedCallback(){if(this.#qJ(),this.#GJ(),this.#K)this.#K.disconnect(),this.#K=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#y(Z),this.isConnected)this.#h();return}if(J==="precision"){if(this.#J=this.#R("precision",2),this.isConnected)this.#b();return}if(J==="aspect-ratio"){if(this.#x(),this.#$)this.#o();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#h()}}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.#Z.map((J)=>this.#r(J))}}get preset(){let J=this.#I;return U.TYPES.find((Q)=>Q.value===J.type)?.name}#R(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#p(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"}#W(){return this.#p("disabled",!1)}#x(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#y(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.#Z=Z.map(($)=>this.#f($)),!this.#Z.length)this.#Z=[U.#F()];return this.#Q=Math.min(this.#Q,this.#Z.length-1),!0}#f(J={}){return{type:this.#V(J.type),frequency:this.#E(J.frequency,1,0.1,16),amplitude:this.#E(J.amplitude,1,-4,4),phase:this.#E(J.phase,0,-360,360),offset:this.#E(J.offset,0,-4,4)}}#r(J){return{type:J.type,frequency:this.#w(J.frequency),amplitude:this.#w(J.amplitude),phase:this.#w(J.phase),offset:this.#w(J.offset)}}get#I(){if(!this.#Z[this.#Q])this.#Q=0;return this.#Z[this.#Q]||U.#F()}#V(J){let Q=String(J||"").toLowerCase();return U.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#E(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#w(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#A(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}static#v(J){return U.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,_="";for(let X=0;X<=32;X++){let Y=X/32,B=U.#g(J,Y),G=5+Y*j,k=5+(1-(B+1)/2)*j;_+=`${X===0?"M":"L"}${G.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${_}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#g(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),_=$*Math.PI*2;switch(J){case"square":return Math.sin(_)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(_)}}#h(){this.#qJ(),this.#GJ(),this.innerHTML=this.#$J(),this.#YJ(),this.#QJ(),this.#o(),this.#RJ(),this.#_J()}#$J(){let J=this.#D()&&!this.#W(),Q=J?"":" disabled";return`<div class="propskit-oscillator-svg-container">
|
|
2
|
-
<svg viewBox="0 0 ${this.#
|
|
3
|
-
<rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#
|
|
1
|
+
function S(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function M(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}var x=0;function n(J="fig-lab"){return x+=1,`${J}-${x}`}class g extends HTMLElement{}S("fig-ai-prompt",g);class m extends HTMLElement{}S("fig-chat-message",m);class u extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=null;#$=null;#B=this.#O.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#Y()}#G(){let Q=Array.from(this.childNodes).filter((Y)=>Y.nodeType!==Node.TEXT_NODE||Boolean(Y.textContent?.trim())).find((Y)=>Y.nodeType===Node.ELEMENT_NODE&&Y.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),_=document.createElement("fig-segment"),X=document.createElement("fig-segment");j.setAttribute("sizing","equal"),_.setAttribute("value","off"),_.textContent="Off",X.setAttribute("value","on"),X.textContent="On",j.append(_,X),Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#Y(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#M(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#q)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",M(this,"checked")?"on":"off"),this.#q=Q}#N(){if(!this.#J)return;this.#_??=this.#P.bind(this,"input"),this.#$??=this.#P.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#P(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value==="on";this.toggleAttribute("checked",Z);let $={checked:Z,value:this.getAttribute("value")??""};this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":M(this,"checked")}set checked(J){let Q=Boolean(J);if(this.toggleAttribute("checked",Q),this.#J)this.#J.value=Q?"on":"off"}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}S("propskit-switch",u);class c extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=null;#$=null;#B=this.#S.bind(this);#G=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#Y();if(this.#M(),this.#N(),this.#U(),this.#G===null)this.#G=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#M();if(Z)this.#N()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#P(),this.removeEventListener("click",this.#B)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#M()}#Y(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#M(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Color")}#k(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#N(){if(!this.#J)return;let J=this.#k(),Q=new Set(J);for(let Z of this.#q)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}this.#J.setAttribute("text","true"),this.#q=Q}#U(){if(!this.#J)return;this.#_??=this.#L.bind(this,"input"),this.#$??=this.#L.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#P(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#J?.value==="string"&&this.#J.value)return this.#J.value;return this.#J?.getAttribute("value")??""}#L(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);if(this.setAttribute("value",Z),this.#J&&this.#J.getAttribute("value")!==Z)this.#J.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#S(J){if(J.target instanceof Element&&J.target.closest("fig-input-color"))return;this.focus()}get value(){return this.getAttribute("value")??this.#J?.value??this.#J?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}#z(J){if(!this.#J)return;if(this.#J.getAttribute("value")===J)this.#J.removeAttribute("value");this.#J.setAttribute("value",J)}#K(){return this.getAttribute("default")??this.#G??""}resetToDefault(){let J=String(this.#K());this.setAttribute("value",J),this.#z(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}S("propskit-color",c);class v extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=null;#$=null;#B=this.#K.bind(this);#G=this.#z.bind(this);#Y=!1;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Z)this.#M();if(this.#k(),this.#U(),this.#P(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),this.removeEventListener("pointerdown",this.#G,!0),this.addEventListener("pointerdown",this.#G,!0),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#O(),this.removeEventListener("click",this.#B),this.removeEventListener("pointerdown",this.#G,!0)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#k();return}if(J==="options"||J==="value")this.#U()}#M(){let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Z=Q,this.#Q=Z,this.#J=$,this.#X=Boolean(J),this.replaceChildren(Q)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Select"),this.#J.setAttribute("full","")}#N(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#U(){if(!this.#J)return;let J=this.#N().sort((Z,$)=>{if(Z==="options")return-1;if($==="options")return 1;if(Z==="value")return 1;if($==="value")return-1;return 0}),Q=new Set(J);for(let Z of this.#q)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#q=Q}#P(){if(!this.#J)return;this.#_??=this.#L.bind(this,"input"),this.#$??=this.#L.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#O(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#L(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#S(){if(!this.#J)return!1;if(this.#J.open)return!0;let J=this.#J.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#z(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-select")){this.#Y=!1;return}this.#Y=this.#S()}#K(J){if(J.target instanceof Element&&J.target.closest("fig-select")){this.#Y=!1;return}if(!this.#J||M(this.#J,"disabled")){this.#Y=!1;return}if(this.#J.focus(),this.#Y||this.#S()){this.#Y=!1,this.#J.open=!1;return}this.#J.open=!0}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}focus(J){this.#J?.focus(J)}}S("propskit-select",v);class s extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=null;#$=null;#B=this.#O.bind(this);static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#Y()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#Y(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Text")}#M(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#q)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#q=Q}#N(){if(!this.#J)return;this.#_??=this.#P.bind(this,"input"),this.#$??=this.#P.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#P(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-input-text"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}focus(J){this.#J?.focus(J)}}S("propskit-text",s);class o extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=null;#$=null;#B=this.#O.bind(this);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#Y(),this.#k(),this.#N(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#Y();if(Z)this.#k()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#Y()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z);for(let _ of J)if(_!==Q)j.appendChild(_)}#Y(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#M(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#k(){if(!this.#J)return;let J=this.#M(),Q=new Set(J);for(let Z of this.#q)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#q=Q}#N(){if(!this.#J)return;this.#_??=this.#P.bind(this,"input"),this.#$??=this.#P.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#P(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#O(J){if(J.target instanceof Element&&J.target.closest("fig-input-number"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}focus(J){this.#J?.focus(J)}}S("propskit-number",o);class b extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Z=["propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text"].join(",");#Q=null;#J=null;#X=null;#j=new WeakMap;#q=null;#_=0;#$=()=>this.#Y();connectedCallback(){this.#V(),this.#B(),requestAnimationFrame(()=>{this.#L(),this.#K()})}disconnectedCallback(){if(this.#G(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;this.#Q?.removeEventListener("click",this.#k),this.#Q?.removeEventListener("keydown",this.#N),this.#X?.querySelector("fig-button")?.removeEventListener("click",this.#U)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#T(),this.#K();return}this.#V()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#C()}#B(){if(this.removeEventListener("input",this.#$,!0),this.removeEventListener("change",this.#$,!0),this.addEventListener("input",this.#$,!0),this.addEventListener("change",this.#$,!0),!this.#q)this.#q=new MutationObserver(()=>{this.#L(),this.#Y()});this.#q.disconnect(),this.#q.observe(this,{childList:!0,subtree:!0})}#G(){this.removeEventListener("input",this.#$,!0),this.removeEventListener("change",this.#$,!0),this.#q?.disconnect()}#Y(){if(this.#_)return;this.#_=requestAnimationFrame(()=>{this.#_=0,this.#L(),this.#K()})}#M(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#k=(J)=>{if(this.#M(J.target))return;J.stopPropagation(),this.open=!this.open};#N=(J)=>{if(this.#M(J.target))return;if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#U=(J)=>{J.preventDefault(),J.stopPropagation(),this.#C()};#P(){return[...this.querySelectorAll(b.#Z)].filter((J)=>J.closest("propskit-group")===this)}#O(J){if(J.localName==="propskit-switch")return{kind:"checked",value:Boolean(J.checked)};if("value"in J)return{kind:"value",value:J.value};return{kind:"value",value:J.getAttribute("value")??""}}#L(){for(let J of this.#P()){if(this.#j.has(J))continue;if(J.hasAttribute("default")){if(J.localName==="propskit-switch"){this.#j.set(J,{kind:"checked",value:M(J,"default")});continue}this.#j.set(J,{kind:"value",value:J.getAttribute("default")??""});continue}this.#j.set(J,this.#O(J))}}#S(J){let Q=this.#j.get(J);if(!Q)return!1;let Z=this.#O(J);if(Q.kind==="checked")return Boolean(Z.value)!==Boolean(Q.value);return String(Z.value??"")!==String(Q.value??"")}#z(){for(let J of this.#P())if(this.#S(J))return!0;return!1}#K(){if(this.#z())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#T()}#H(J){let Q=this.#j.get(J);if(!Q)return;if(Q.kind==="checked"){J.checked=Q.value;let $={checked:Boolean(Q.value),value:J.getAttribute("value")??""};J.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,cancelable:!0,composed:!0}));return}if(typeof J.resetToDefault==="function"){let $=J.getAttribute("default");if(J.setAttribute("default",String(Q.value??"")),J.resetToDefault(),$===null)J.removeAttribute("default");else J.setAttribute("default",$);return}J.value=Q.value;let Z=J.getAttribute?.("value")??("value"in J?J.value:Q.value);J.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,cancelable:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#C(){this.#L();for(let J of this.#P())this.#H(J);this.#K(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#T(){if(!this.showReset){this.#X?.setAttribute("hidden","");return}this.#F(),this.#X?.removeAttribute("hidden")}#F(){if(!this.#Q||!this.showReset)return;let J=this.#Q.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#Q.appendChild(J),Q.addEventListener("click",this.#U)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#U),Q?.addEventListener("click",this.#U)}this.#X=J}#V(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#Q=Z;else if(!this.#Q||!this.#Q.dataset.generated||this.#Q.parentElement!==this)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let $=this.#Q.querySelector(":scope > h3"),j=this.#Q.querySelector(":scope > fig-button.propskit-group-disclosure");if(!$&&j){if($=j.querySelector(":scope > h3"),$)this.#Q.insertBefore($,j);j.remove()}if(!$)$=document.createElement("h3"),this.#Q.prepend($);let _=$.querySelector(":scope > button.propskit-group-disclosure");if(_){while(_.firstChild)$.insertBefore(_.firstChild,_);_.remove()}if(!$.id)$.id=n("propskit-group");if(this.#Q.dataset.generated){let X=$.querySelector(".propskit-group-chevron");if($.textContent=Q,X)$.prepend(X)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",$.id);if(!$.querySelector(".propskit-group-chevron")){let X=document.createElement("fig-icon");X.setAttribute("name","chevron"),X.setAttribute("size","small"),X.className="propskit-group-chevron",$.prepend(X)}if(this.#J=$.querySelector(".propskit-group-chevron"),this.#T(),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("click",this.#k),this.#Q.addEventListener("click",this.#k),this.#Q.removeEventListener("keydown",this.#N),this.#Q.addEventListener("keydown",this.#N),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}}S("propskit-group",b);class r extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#q=new Set;#_=0;#$=0;#B=null;#G=null;#Y=0;#M=null;#k=!1;#N=0;#U=null;#P=0;#O=null;#L=null;#S=null;#z=this.#$J.bind(this);#K=this.#m.bind(this);#H=this.#jJ.bind(this);#C=this.#h.bind(this);#T=this.#i.bind(this);#F=this.#e.bind(this);#V=this.#w.bind(this);#p=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.#Z)this.#D();if(this.#x(),this.#y(),this.#XJ(),this.#R(),this.removeEventListener("pointerdown",this.#z,{capture:!0}),this.addEventListener("pointerdown",this.#z,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#T),this.addEventListener("contextmenu",this.#T),this.removeEventListener("click",this.#V,!0),this.addEventListener("click",this.#V,!0),this.#G?.removeEventListener("change",this.#F),this.#G?.addEventListener("change",this.#F),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName==="value"){this.#f();continue}if($.attributeName&&this.#p.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#x();if(Z)this.#y(),this.#R()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#JJ(),this.#t(),this.#ZJ(),this.#g(),this.#kJ(),this.removeEventListener("pointerdown",this.#z,{capture:!0}),this.removeEventListener("contextmenu",this.#T),this.removeEventListener("click",this.#V,!0),this.#G?.removeEventListener("change",this.#F)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#x()}#D(){let J=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let _ of this.#r()){let X=this.getAttribute(_);j.setAttribute(_,X??"")}Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z),this.#W();for(let _ of J){if(_===Q)continue;this.#J.appendChild(_)}}#W(){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.#F),this.#G=J,this.appendChild(J)}#x(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Q.parentElement===this.#Z)this.#Q.remove()}else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#y(){if(!this.#J)return;let J=this.#r(),Q=new Set(J.filter(($)=>$!=="text"&&$!=="value"));for(let $ of this.#q)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text"||$==="value")continue;let j=this.getAttribute($)??"";if(this.#J.getAttribute($)!==j)this.#J.setAttribute($,j)}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.#f(),this.#I()}#f(){if(!this.#J)return;let J=this.getAttribute("value")??"";if(String(this.#J.value)!==J)this.#J.value=J}#r(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#p.has(Q))}#I(){if(this.#_)cancelAnimationFrame(this.#_);this.#_=requestAnimationFrame(()=>{this.#_=0,this.#GJ(),this.#E()})}#R(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#E()})}#E(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#B)this.#v(J);if(J){J.removeAttribute("tabindex"),J.removeAttribute("aria-hidden");let Z=this.getAttribute("aria-label")||this.#Q?.textContent?.trim()||"Slider";if(!J.hasAttribute("aria-label")&&!J.hasAttribute("aria-labelledby"))J.setAttribute("aria-label",Z)}if(Q)Q.setAttribute("tabindex","-1"),Q.setAttribute("aria-hidden","true")}#w(J){if(M(this,"disabled"))return;if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.#A()}#A(){requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(this.isConnected&&!M(this,"disabled"))this.focus()})})}#v(J){if(this.#g(),this.#B=J,!this.#B)return;this.#B.addEventListener("dblclick",this.#C,{capture:!0})}#g(){if(!this.#B)return;this.#B.removeEventListener("dblclick",this.#C,{capture:!0}),this.#B=null}#h(J){J.preventDefault(),J.stopImmediatePropagation(),this.#o()}#$J(J){if(J.button!==0||M(this,"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.#B;if(!Q)return;this.#t(),this.#ZJ(),this.#B=Q,this.#k=!0,this.#O=J.pointerId,this.#N=this.#UJ();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#U={left:Z.left,right:Z.right,width:Z.width},this.#P=$.width,window.addEventListener("pointermove",this.#K,{passive:!0}),window.addEventListener("pointerup",this.#H,{once:!0}),window.addEventListener("pointercancel",this.#H,{once:!0}),window.addEventListener("blur",this.#H,{once:!0})}#m(J){if(!this.#k)return;if(J.pointerId!==this.#O)return;if(J.buttons===0){this.#jJ(J);return}this.#QJ(J.clientX)}#jJ(J){if(J?.pointerId!==void 0&&this.#O!==null&&J.pointerId!==this.#O)return;let Q=J?.type==="pointerup"||J?.type==="pointermove"&&J.buttons===0;if(this.#t(),this.#ZJ(),Q)this.#A()}#t(){window.removeEventListener("pointermove",this.#K),window.removeEventListener("pointerup",this.#H),window.removeEventListener("pointercancel",this.#H),window.removeEventListener("blur",this.#H),this.#k=!1,this.#O=null}#i(J){if(M(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#JJ(),this.#YJ(J.clientX,J.clientY)}#YJ(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#G?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#e(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#o()}#JJ(){if(this.#Y)clearTimeout(this.#Y),this.#Y=0;this.#M=null}#UJ(){let J=getComputedStyle(this).getPropertyValue("--propskit-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(--propskit-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}#QJ(J){let Q=this.#U;if(!Q||!this.#N){this.#ZJ();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#l();return}let $=Math.max(-this.#N,Math.min(this.#N,Z*0.5)),j=Math.abs($),_=this.#P?(this.#P+j)/this.#P:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${_}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#ZJ(){this.#l(),this.#N=0,this.#U=null,this.#P=0,this.#O=null}#l(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#MJ(J){let Q=this.#B;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,j=Number(Q.min||0),_=Number(Q.max||100),X=Q.step==="any"?0:Number(Q.step||1),Y=j+(_-j)*$;if(!X)return String(Y);let B=Math.round((Y-j)/X)*X+j,G=Math.max(0,`${X}`.split(".")[1]?.length||0);return String(Number(B.toFixed(G)))}#s(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.getAttribute("value")??this.#J?.getAttribute("value")??this.#B?.min??"0"}#o(){this.#JJ(),this.#_J(this.#s(),"input"),this.#_J(this.#s(),"change")}#_J(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.setAttribute("value",String(this.#J.value)),this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#GJ(){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??"")}#XJ(){if(!this.#J)return;if(!this.#L)this.#L=this.#PJ.bind(this,"input");if(!this.#S)this.#S=this.#PJ.bind(this,"change");this.#J.addEventListener("input",this.#L),this.#J.addEventListener("change",this.#S)}#kJ(){if(!this.#J)return;if(this.#L)this.#J.removeEventListener("input",this.#L);if(this.#S)this.#J.removeEventListener("change",this.#S)}#PJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#ZJ();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0){let $=String(this.#J.value);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#E();let Q=this.#J?.querySelector('input[type="range"]');Q?.setAttribute("data-propskit-focus-called",""),Q?.focus(J)}get value(){return this.getAttribute("value")??this.#J?.value??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value="";return}let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}resetToDefault(){this.#o()}}S("propskit-slider",r);class l extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Z=50;#Q=50;#J=75;#X=75;#j=0;#q=!1;#_=0;#$=null;#B=null;#G=null;#Y=null;#M=null;#k=null;#N=null;#U=null;#P=null;#O=!1;#L=!1;#S=!1;#z=!1;#K=null;#H="";#C="";#T=null;#F=null;#V=null;#p="";#D="";#W=null;#x=null;#y=null;get#f(){return this.getAttribute("type")||"point"}get#r(){return this.#f==="point-radius"||this.#f==="point-radius-angle"}get#I(){return this.#f==="point-radius-angle"}get#R(){return this.#f==="point-point"}get#E(){return this.#f==="point-radius-angle"||this.#f==="point-point"}get#w(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#A(){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.#A;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#g(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Z)}%, ${Math.round(this.#Q)}%`}get#h(){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.#X)}%`}get#$J(){return this.getAttribute("drag-surface")||"parent"}get#m(){let J=this.#$J;if(J==="parent")return this.parentElement;return this.closest(J)}get#jJ(){let J=this.#$J;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.#q)return this.#j/100*J;return this.#j}#i(){if(this.#q)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#YJ(),this.#e()}disconnectedCallback(){this.#LJ(),this.#CJ(),this.#QJ(),this.#s(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#O&&!this.#L&&!this.#S&&!this.#z)if(this.#YJ(),this.#$)this.#b();else this.#e();if(J==="type")this.#LJ(),this.#YJ(),this.#e();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#LJ(),this.#e();if(J==="tooltips")this.#e();if(J==="snapping"&&this.#$){if(this.#$.setAttribute("drag-snapping",Z||"false"),this.#B)this.#B.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#k)this.#k.setAttribute("text",this.#g);if(this.#N)this.#N.setAttribute("text",this.#h)}}#YJ(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Z=Q.x;if(typeof Q.y==="number")this.#Q=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#q=!0,this.#j=parseFloat(Z);else this.#q=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#_=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#X=Q.y2}catch{}}get value(){let J={x:this.#Z,y:this.#Q};if(this.#f==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#r)J.radius=this.#q?`${this.#j}%`:this.#j;if(this.#I)J.angle=this.#_;if(this.#R)J.x2=this.#J,J.y2=this.#X;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#e(){this.#LJ(),this.innerHTML="",this.#$=null,this.#B=null,this.#G=null,this.#Y=null,this.#M=null,this.#k=null,this.#N=null,this.#U=null,this.#P=null;let J=M(this,"disabled"),Q=this.#f,Z=this.#w,$=this.#jJ,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#A),j.setAttribute("value",`${this.#Z}% ${this.#Q}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let _=this.getAttribute("color");if(_)j.setAttribute("color",_)}else j.setAttribute("type","canvas");if(this.#R)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#$=j,this.#r)this.#PJ();if(this.#E)this.#SJ();if(Z){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#g),_.appendChild(j),this.appendChild(_),this.#k=_}else this.appendChild(j);if(this.#I)this.#u(J,Z,$);if(this.#R)this.#RJ(J,Z,$);this.#JJ(this.#$),this.#JJ(this.#G),this.#JJ(this.#B),this.#c(),this.#GJ(),requestAnimationFrame(()=>this.#b())}#JJ(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#MJ(Q,J);else this.#UJ(Q)},{capture:!0})}#UJ(J){if(M(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#K===null)this.#H=document.body.style.getPropertyValue("cursor"),this.#C=document.body.style.getPropertyPriority("cursor");if(this.#K=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#T)this.#T=(Q)=>{if(Q?.pointerId!==void 0&&this.#K!==null&&Q.pointerId!==this.#K)return;if(Q?.type==="blur")this.#QJ();else requestAnimationFrame(()=>this.#QJ())};window.addEventListener("pointerup",this.#T),window.addEventListener("pointercancel",this.#T),window.addEventListener("blur",this.#T)}#QJ(){if(this.#K===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#H)document.body.style.setProperty("cursor",this.#H,this.#C);else document.body.style.removeProperty("cursor");if(this.#K=null,this.#H="",this.#C="",this.#T)window.removeEventListener("pointerup",this.#T),window.removeEventListener("pointercancel",this.#T),window.removeEventListener("blur",this.#T)}#ZJ(J){if(!J)return 0;if(J===this.#G)return this.#_;if(!this.#R)return 0;let Q=this.#qJ();return J===this.#$?Q+180:Q}#l(){if(this.#F===null)return;let J=this.#OJ(this.#ZJ(this.#V));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#MJ(J,Q){if(M(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#F===null)this.#p=document.body.style.getPropertyValue("cursor"),this.#D=document.body.style.getPropertyPriority("cursor");if(this.#F=J?.pointerId??-1,this.#V=Q,document.body.classList.add("fig-lab-rotate-active"),this.#l(),!this.#W)this.#W=(Z)=>{if(Z?.pointerId!==void 0&&this.#F!==null&&Z.pointerId!==this.#F)return;if(Z?.type==="blur")this.#s();else requestAnimationFrame(()=>this.#s())};window.addEventListener("pointerup",this.#W),window.addEventListener("pointercancel",this.#W),window.addEventListener("blur",this.#W)}#s(){if(this.#F===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#p)document.body.style.setProperty("cursor",this.#p,this.#D);else document.body.style.removeProperty("cursor");if(this.#F=null,this.#V=null,this.#p="",this.#D="",this.#W)window.removeEventListener("pointerup",this.#W),window.removeEventListener("pointercancel",this.#W),window.removeEventListener("blur",this.#W)}#o(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?.()},Y=()=>{_()};J.addEventListener("pointerenter",X),J.addEventListener("pointerleave",Y)}#_J(){return this.#O||this.#L||this.#S||this.#z}#GJ(){if(this.#$)this.#o(this.#$,()=>this.#k,()=>this.#g,()=>this.#_J()||!!this.#$?.querySelector("fig-color-tip"));if(this.#G)this.#o(this.#G,()=>this.#P,()=>`Angle ${Math.round(this.#_)}°`,()=>this.#_J());if(this.#B)this.#o(this.#B,()=>this.#N,()=>this.#h,()=>this.#_J());if(this.#Y){let J=this.#Y.querySelector(".fig-canvas-control-radius-hit");this.#kJ(J||this.#Y)}if(this.#f==="color"&&this.#$&&this.#k)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#k?.removeAttribute("show"),this.#k?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#XJ(J,Q){let Z=this.#U;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?.()}#kJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#U;if(!Z)return;Z.setAttribute("text",this.#i()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#XJ(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#S)return;this.#XJ(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#S)return;let Q=this.#U;if(!Q)return;Q.removeAttribute("show")})}#PJ(){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 j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#Y=Q,this.#w){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#i()),_.appendChild(Q),this.appendChild(_),this.#U=_}else this.appendChild(Q);this.#fJ(Z)}#SJ(){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.#R){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#VJ(j)}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.#M=Q,this.appendChild(Q)}#VJ(J){J.addEventListener("pointerdown",(Q)=>{if(M(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#m;if(!Z)return;let{clientX:$,clientY:j}=Q,_=this.#Z,X=this.#Q,Y=this.#J,B=this.#X;this.#O=!0,this.#L=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let G=(P)=>{let q=Z.getBoundingClientRect(),O=q.width>0?(P.clientX-$)/q.width*100:0,N=q.height>0?(P.clientY-j)/q.height*100:0,K=-Math.min(_,Y),z=100-Math.max(_,Y),T=-Math.min(X,B),F=100-Math.max(X,B),L=Math.max(K,Math.min(z,O)),W=Math.max(T,Math.min(F,N));this.#Z=_+L,this.#Q=X+W,this.#J=Y+L,this.#X=B+W,this.#b(),this.#a()},k=this.#WJ((P)=>{if(document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#O=!1,this.#L=!1,P)this.#n(),this.#d()});window.addEventListener("pointermove",G,{signal:k.signal}),window.addEventListener("pointerup",()=>k.finish(!0),{signal:k.signal}),window.addEventListener("pointercancel",()=>k.finish(!1),{signal:k.signal})})}#u(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.#G=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#_)}°`),j.appendChild($),this.appendChild(j),this.#P=j}else this.appendChild($)}#RJ(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.#A),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#X}%`),J)$.setAttribute("disabled","");if(this.#B=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#h),j.appendChild($),this.appendChild(j),this.#N=j}else this.appendChild($)}#BJ(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`}#OJ(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`}#zJ(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#KJ(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#zJ(Z,this.#OJ(Q)),this.#V===J)this.#l()}#TJ(){if(!this.#G||!this.#I)return;this.#KJ(this.#G,this.#_)}#qJ(){return Math.atan2(this.#X-this.#Q,this.#J-this.#Z)*180/Math.PI}#FJ(){if(!this.#R)return;let J=this.#qJ();this.#$?.style.removeProperty("cursor"),this.#B?.style.removeProperty("cursor"),this.#KJ(this.#$,J+180),this.#KJ(this.#B,J)}#NJ(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`}#b(){let J=this.#m;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#NJ(this.#$,this.#Z,this.#Q,Q),this.#Y){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#t(Q.width),_=this.#Y,X=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${X}px`,_.style.height=`${X}px`,_.style.left=`${Z-j}px`,_.style.top=`${$-j}px`,_.setAttribute("viewBox",`0 0 ${X} ${X}`);let Y=_.querySelectorAll("circle");for(let B of Y)B.setAttribute("cx",String(j)),B.setAttribute("cy",String(j)),B.setAttribute("r",String(Math.max(j-1,0)))}if(this.#M&&this.#E){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j,_;if(this.#R)j=this.#J/100*Q.width,_=this.#X/100*Q.height;else{let B=this.#t(Q.width),G=this.#_*Math.PI/180;j=Z+B*Math.cos(G),_=$+B*Math.sin(G)}let X=this.#M;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 Y=X.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo, .fig-canvas-control-angle-line-hit");for(let B of Y)B.setAttribute("x1",String(Z)),B.setAttribute("y1",String($)),B.setAttribute("x2",String(j)),B.setAttribute("y2",String(_))}if(this.#G&&this.#I){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#t(Q.width),_=this.#_*Math.PI/180,X=Z+j*Math.cos(_),Y=$+j*Math.sin(_),B=Q.width>0?X/Q.width*100:0,G=Q.height>0?Y/Q.height*100:0;this.#NJ(this.#G,B,G,Q)}if(this.#B&&this.#R)this.#NJ(this.#B,this.#J,this.#X,Q);this.#TJ(),this.#FJ()}#a(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#d(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#n(){this.setAttribute("value",JSON.stringify(this.value))}#c(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#a();return}this.#O=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#k)this.#k.removeAttribute("show"),this.#k.hidePopup?.();this.#b(),this.#a()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",J.detail.color),this.#d();return}let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#k)this.#k.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#O=!1})}),this.#G)this.#G.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#m;if(!Q)return;this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Z/100*Z.width,j=this.#Q/100*Z.height,_=J.detail?.x??0,X=J.detail?.y??0,Y=this.#G.offsetWidth/2,B=this.#G.offsetHeight/2,G=_+Y-$,k=X+B-j,P=Math.atan2(k,G)*180/Math.PI;if(this.#v(J.detail?.shiftKey))P=Math.round(P/15)*15;this.#_=P;let q=Math.sqrt(G*G+k*k);if(this.#v(J.detail?.shiftKey)){let O=this.#q?5:10;if(this.#q){let N=q/Z.width*100;N=Math.round(N/O)*O,q=N/100*Z.width}else q=Math.round(q/O)*O}if(this.#q)this.#j=Math.max(0,q/Z.width*100);else this.#j=Math.max(0,q);if(this.#P)this.#P.setAttribute("text",`Angle ${Math.round(this.#_)}°`),this.#P.setAttribute("show","true"),this.#P.showPopup?.();this.#b(),this.#a()}),this.#G.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#P)this.#P.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#z=!1})}),this.#G.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#m;if(!Z)return;if(this.#z=!0,this.classList.add("fig-canvas-control-ring-active"),this.#G.setAttribute("selected",""),this.#P)this.#P.setAttribute("show","true"),this.#P.showPopup?.();let $=(_)=>{let X=Z.getBoundingClientRect(),Y=this.#Z/100*X.width,B=this.#Q/100*X.height,G=_.clientX-X.left-Y,k=_.clientY-X.top-B,P=Math.atan2(k,G)*180/Math.PI;if(this.#v(_.shiftKey))P=Math.round(P/15)*15;if(this.#_=P,this.#P)this.#P.setAttribute("text",`Angle ${Math.round(P)}°`);this.#b(),this.#a()},j=this.#WJ((_)=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#G.removeAttribute("selected"),this.#P)this.#P.removeAttribute("show");if(_)this.#n(),this.#d()});window.addEventListener("pointermove",$,{signal:j.signal}),window.addEventListener("pointerup",()=>j.finish(!0),{signal:j.signal}),window.addEventListener("pointercancel",()=>j.finish(!1),{signal:j.signal})});if(this.#B)this.#B.addEventListener("input",(J)=>{J.stopPropagation(),this.#L=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#X/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#X=Math.round(Math.max(0,Math.min(100,Z*100))),this.#N)this.#N.removeAttribute("show"),this.#N.hidePopup?.();this.#b(),this.#a()}),this.#B.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#N)this.#N.removeAttribute("show");this.#b(),this.#n(),this.#d(),requestAnimationFrame(()=>{this.#L=!1})}),this.#HJ(this.#$,!0),this.#HJ(this.#B,!1)}#HJ(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#m;if(!j)return;this.#O=!0;let _=j.getBoundingClientRect(),X=Q?this.#J:this.#Z,Y=Q?this.#X:this.#Q,B=Q?this.#Z:this.#J,G=Q?this.#Q:this.#X,k=X/100*_.width,P=Y/100*_.height,q=B/100*_.width,O=G/100*_.height,N=Math.sqrt((q-k)**2+(O-P)**2),K=Q?this.#k:this.#N;if(K)K.removeAttribute("show"),K.hidePopup?.();let z=(F)=>{let L=j.getBoundingClientRect(),W=X/100*L.width,f=Y/100*L.height,V=F.clientX-L.left-W,C=F.clientY-L.top-f,R=Math.atan2(C,V);if(this.#v(F.shiftKey))R=Math.round(R*180/Math.PI/15)*15*Math.PI/180;let i=W+N*Math.cos(R),a=f+N*Math.sin(R),y=Math.max(0,Math.min(100,i/L.width*100)),h=Math.max(0,Math.min(100,a/L.height*100));if(Q)this.#Z=y,this.#Q=h;else this.#J=y,this.#X=h;this.#b(),this.#a()},T=this.#WJ((F)=>{if(this.#O=!1,K)K.removeAttribute("show");if(F)this.#n(),this.#d()});window.addEventListener("pointermove",z,{signal:T.signal}),window.addEventListener("pointerup",()=>T.finish(!0),{signal:T.signal}),window.addEventListener("pointercancel",()=>T.finish(!1),{signal:T.signal})})}#fJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#S)return;let $=this.#m;if(!$)return;let j=$.getBoundingClientRect(),_=this.#Z/100*j.width,X=this.#Q/100*j.height,Y=Math.atan2(Z.clientY-j.top-X,Z.clientX-j.left-_)*180/Math.PI;this.#zJ(J,this.#BJ(Y))});let Q=(Z)=>{if(M(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#S=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#m;if(!$)return;if(this.#U)this.#U.setAttribute("show","true"),this.#U.showPopup?.(),this.#XJ(Z.clientX,Z.clientY);if(this.#P)this.#P.removeAttribute("show"),this.#P.hidePopup?.();let j=this.#G?.style.pointerEvents,_=this.#G?.querySelector(".fig-handle-hit-area"),X=_?.style.pointerEvents;if(this.#G)this.#G.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let Y=document.body.style.cursor;J.style.pointerEvents="none";let B=$.getBoundingClientRect(),G=this.#Z/100*B.width,k=this.#Q/100*B.height,P=Math.atan2(Z.clientY-B.top-k,Z.clientX-B.left-G)*180/Math.PI,q=Math.round(P);document.body.style.cursor=this.#BJ(q);let O=(K)=>{let z=$.getBoundingClientRect(),T=this.#Z/100*z.width,F=this.#Q/100*z.height,L=K.clientX-z.left-T,W=K.clientY-z.top-F,f=Math.round(Math.atan2(W,L)*180/Math.PI);if(f!==q)q=f,document.body.style.cursor=this.#BJ(f);let V=Math.sqrt(L*L+W*W);if(this.#v(K.shiftKey)){let C=this.#q?5:10;if(this.#q){let R=V/z.width*100;R=Math.round(R/C)*C,V=R/100*z.width}else V=Math.round(V/C)*C}if(this.#q)this.#j=Math.max(0,V/z.width*100);else this.#j=Math.max(0,V);if(this.#U)this.#U.setAttribute("text",this.#i()),this.#XJ(K.clientX,K.clientY);this.#b(),this.#a()},N=this.#WJ((K)=>{if(this.#S=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#G)this.#G.style.pointerEvents=j??"";if(_)_.style.pointerEvents=X??"";if(document.body.style.cursor=Y,this.#U)this.#U.removeAttribute("show");if(K)this.#n(),this.#d()});window.addEventListener("pointermove",O,{signal:N.signal}),window.addEventListener("pointerup",()=>N.finish(!0),{signal:N.signal}),window.addEventListener("pointercancel",()=>N.finish(!1),{signal:N.signal})};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#CJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}#WJ(J){this.#LJ();let Q=new AbortController,Z=!1,$=(j=!1)=>{if(Z)return;if(Z=!0,Q.abort(),this.#x===Q)this.#x=null,this.#y=null;J(j)};return this.#x=Q,this.#y=$,{signal:Q.signal,finish:$}}#LJ(){this.#y?.(!1),this.#x?.abort(),this.#x=null,this.#y=null}}S("fig-canvas-control",l);class U extends HTMLElement{#Z=[U.#F()];#Q=0;#J=2;#X=240;#j=120;#q={min:-1,max:1};#_=null;#$=null;#B=null;#G=null;#Y=0;#M=null;#k=null;#N=null;#U=null;#P=[];#O=[];#L=[];#S=[];#z=new Set;#K=null;#H=null;#C=null;#T=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#F(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.#V("precision",2),this.#y(this.getAttribute("value")),this.#x(),this.#h(),this.#UJ()}disconnectedCallback(){if(this.#qJ(),this.#GJ(),this.#K)this.#K.disconnect(),this.#K=null}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#y(Z),this.isConnected)this.#h();return}if(J==="precision"){if(this.#J=this.#V("precision",2),this.isConnected)this.#b();return}if(J==="aspect-ratio"){if(this.#x(),this.#$)this.#o();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#h()}}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.#Z.map((J)=>this.#r(J))}}get preset(){let J=this.#I;return U.TYPES.find((Q)=>Q.value===J.type)?.name}#V(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#p(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"}#W(){return this.#p("disabled",!1)}#x(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#y(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.#Z=Z.map(($)=>this.#f($)),!this.#Z.length)this.#Z=[U.#F()];return this.#Q=Math.min(this.#Q,this.#Z.length-1),!0}#f(J={}){return{type:this.#R(J.type),frequency:this.#E(J.frequency,1,0.1,16),amplitude:this.#E(J.amplitude,1,-4,4),phase:this.#E(J.phase,0,-360,360),offset:this.#E(J.offset,0,-4,4)}}#r(J){return{type:J.type,frequency:this.#w(J.frequency),amplitude:this.#w(J.amplitude),phase:this.#w(J.phase),offset:this.#w(J.offset)}}get#I(){if(!this.#Z[this.#Q])this.#Q=0;return this.#Z[this.#Q]||U.#F()}#R(J){let Q=String(J||"").toLowerCase();return U.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#E(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#w(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#A(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}static#v(J){return U.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,_="";for(let X=0;X<=32;X++){let Y=X/32,B=U.#g(J,Y),G=5+Y*j,k=5+(1-(B+1)/2)*j;_+=`${X===0?"M":"L"}${G.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${_}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#g(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),_=$*Math.PI*2;switch(J){case"square":return Math.sin(_)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(_)}}#h(){this.#qJ(),this.#GJ(),this.innerHTML=this.#$J(),this.#YJ(),this.#QJ(),this.#o(),this.#VJ(),this.#_J()}#$J(){let J=this.#D()&&!this.#W(),Q=J?"":" disabled";return`<div class="propskit-oscillator-svg-container">
|
|
2
|
+
<svg viewBox="0 0 ${this.#X} ${this.#j}" class="propskit-oscillator-svg">
|
|
3
|
+
<rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#X}" height="${this.#j}"></rect>
|
|
4
4
|
<line class="propskit-oscillator-baseline"></line>
|
|
5
5
|
<path class="propskit-oscillator-path"></path>
|
|
6
6
|
<circle class="propskit-oscillator-playhead"></circle>
|
|
@@ -29,7 +29,7 @@ function S(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function M(
|
|
|
29
29
|
</fig-group>`}#t(J,Q,Z,$=null){let j=U.TYPES.map((X)=>{let Y=X.value===Q?" selected":"";return`<fig-select-option value="${X.value}" label="${X.name}"${Y}>
|
|
30
30
|
<span slot="prepend">${U.waveIcon(X.value,24)}</span>
|
|
31
31
|
<span>${X.name}</span>
|
|
32
|
-
</fig-select-option>`}).join(""),_=$===null?"":` data-wave-index="${U.#A(String($))}"`;return`<fig-select class="${J}" value="${Q}" label="Add form"${_}${Z}><fig-select-options>${j}</fig-select-options></fig-select>`}#i(J,Q,Z,$,j,_,X){let Y=this.#W()?" disabled":"",B=X?` units="${U.#A(X)}"`:"",G=this.#Z[J]||U.#F();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#w(G[Q])}" min="${$}" max="${j}" step="${_}" precision="${this.#J}" elastic="false"${B}${Y}></propskit-slider>`}#YJ(){this.#$=this.querySelector(".propskit-oscillator-svg"),this.#j=this.querySelector(".propskit-oscillator-path"),this.#G=this.querySelector(".propskit-oscillator-playhead"),this.#M=this.querySelector(".propskit-oscillator-baseline"),this.#k=this.querySelector(".propskit-oscillator-bounds"),this.#N=this.querySelector('[data-handle="amplitude"]'),this.#U=this.querySelector('[data-handle="frequency"]'),this.#O=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#q=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#S=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#L=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#e(J){let Q=new Set;for(let Z of this.#z)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#z=Q}#JJ(J){let Q=new Set;for(let Z of this.#z)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#z=Q}#UJ(){if(this.#K||!window.ResizeObserver)return;this.#K=new ResizeObserver(()=>{if(this.#QJ())this.#o()}),this.#K.observe(this)}#QJ(){if(!this.#$)return!1;let J=this.#$.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),$=Q!==this.#B||Z!==this.#_;return this.#B=Q,this.#_=Z,this.#$.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.#s(Z/Q)));return{min:-J,max:J}}#l(J){let{min:Q,max:Z}=this.#P;return this.#_-(J-Q)/(Z-Q)*this.#_}#MJ(J){let{min:Q,max:Z}=this.#P;return Q+(1-J/this.#_)*(Z-Q)}#s(J){return this.#Z.reduce((Q,Z)=>{let $=J*Z.frequency,j=U.#g(Z.type,$,Z.phase);return Q+Z.offset+j*Z.amplitude},0)}#o(){if(!this.#$||!this.#j)return;if(this.#QJ(),this.#P=this.#ZJ(),this.#k)this.#k.setAttribute("width",this.#B),this.#k.setAttribute("height",this.#_);let J=Math.max(...this.#Z.map((_)=>_.frequency)),Z=this.#Z.some((_)=>_.type==="square"||_.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let _=0;_<=Z;_++){let X=_/Z,Y=X*this.#B,B=this.#l(this.#s(X));$+=`${_===0?"M":"L"}${Y.toFixed(1)},${B.toFixed(1)}`}this.#j.setAttribute("d",$);let j=this.#l(0);this.#M?.setAttribute("x1","0"),this.#M?.setAttribute("y1",j),this.#M?.setAttribute("x2",this.#B),this.#M?.setAttribute("y2",j),this.#kJ()}#_J(){if(this.#Y||!this.#G)return;let J=(Q)=>{if(!this.isConnected||!this.#G){this.#Y=0;return}this.#XJ(Q%1000/1000),this.#Y=requestAnimationFrame(J)};this.#Y=requestAnimationFrame(J)}#GJ(){if(!this.#Y)return;cancelAnimationFrame(this.#Y),this.#Y=0}#XJ(J){if(!this.#G)return;let Q=J*this.#B,Z=this.#l(this.#s(J));this.#G.setAttribute("cx",Q.toFixed(1)),this.#G.setAttribute("cy",Z.toFixed(1))}#kJ(){let Q=this.#I,Z=this.#PJ(),$=Math.max(8,Math.min(this.#B-8,this.#B/Q.frequency)),j=this.#l(this.#s(Z/this.#B)),_=this.#l(this.#s($/this.#B));this.#SJ(this.#N,Z,j,8),this.#SJ(this.#U,$,_,8)}#PJ(){let J=this.#I,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 j=($-Q)/Z;while(j<0)j+=1/Z;while(j>1)j-=1/Z;if(j<0||j>1||!Number.isFinite(j))j=0.25;return Math.max(8,Math.min(this.#B-8,j*this.#B))}#SJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#RJ(){if(!this.#D()||this.#W())return;for(let Q of this.#O)Q.addEventListener("change",(Z)=>{if(this.#W())return;let $=this.#u(Q);this.#BJ($),this.#Z[$].type=this.#V(Z.detail??Z.target?.value),this.#b(),this.#c("input"),this.#c("change")});for(let Q of this.#q)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#H=Q;try{this.#OJ(this.#u(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#H=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#OJ(this.#u(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#S)Q.addEventListener("pointerdown",()=>{this.#BJ(this.#u(Q))}),Q.addEventListener("focusin",()=>{this.#BJ(this.#u(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#u(Q);if(Z.detail?.open)this.#z.add($);else this.#z.delete($)});for(let Q of this.querySelectorAll(".propskit-oscillator-add-type")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.addEventListener("change",($)=>{if($.target!==Q)return;if(this.#W())return;let _=this.#u(Q)+1,X=this.#V($.detail??Q.value);this.#Z.splice(_,0,U.#F(X)),this.#JJ(_),this.#Q=_,this.#h(),this.#c("input"),this.#c("change")})}for(let Q of this.querySelectorAll(".propskit-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(".propskit-oscillator-remove-button"))Q.addEventListener("pointerdown",(Z)=>{Z.stopPropagation()}),Q.addEventListener("click",(Z)=>{if(Z.stopPropagation(),this.#W()||this.#Z.length<=1)return;let $=this.#u(Q);this.#Z.splice($,1),this.#e($),this.#Q=Math.min(this.#Q,this.#Z.length-1),this.#h(),this.#c("input"),this.#c("change")});for(let Q of[this.#N,this.#U])this.#VJ(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#W())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#TJ(Q,"offset")})}#u(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#Z.length-1,Math.max(0,Q)):0}#VJ(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#W())return;$.preventDefault(),$.stopImmediatePropagation(),this.#TJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#W())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#zJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#BJ(J){let Q=Math.min(this.#Z.length-1,Math.max(0,J));if(Q===this.#Q)return;this.#Q=Q,this.#n(),this.#kJ()}#OJ(J,Q,Z,$){if(this.#W())return;this.#BJ(J);let j=Number.parseFloat(Z);if(!Number.isFinite(j)){if($==="change")this.#d();return}this.#Z[J]=this.#f({...this.#Z[J],[Q]:j}),this.#b({skipFieldSync:$=="input"}),this.#c($)}#zJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#I;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.#Z[this.#Q]=this.#f($),this.#b(),this.#c("input"),this.#c("change"),!0}#KJ(J){let Q=this.#$?.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}}#TJ(J,Q){this.#qJ(),this.#X=Q,this.#$?.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 j=(Y)=>{if(!this.#X)return;let B=this.#KJ(Y),G=this.#I;if(Q==="frequency"){let k=Math.max(1,Math.min(this.#B,B.x));G.frequency=this.#B/k}else if(Q==="offset"){let k=this.#E(B.x/this.#B,0,0,1),P=this.#NJ(G,k);G.offset=this.#MJ(B.y)-this.#FJ(this.#Q,k)-P*G.amplitude}else if(Q==="amplitude"){let k=this.#E(B.x/this.#B,0,0,1),P=this.#NJ(G,k),q=this.#MJ(B.y)-this.#FJ(this.#Q,k)-G.offset;G.amplitude=Math.abs(P)<0.001?G.amplitude:q/P}this.#Z[this.#Q]=this.#f(G),this.#b(),this.#c("input")},_=new AbortController,X=(Y=!1)=>{if(this.#X=null,this.#$?.classList.remove("dragging"),Z)document.body.style.cursor=$;if(_.abort(),this.#C===_)this.#C=null,this.#T=null;if(Y)this.#c("change")};this.#C=_,this.#T=X,document.addEventListener("pointermove",j,{signal:_.signal}),document.addEventListener("pointerup",()=>X(!0),{signal:_.signal}),document.addEventListener("pointercancel",()=>X(!1),{signal:_.signal}),window.addEventListener("blur",()=>X(!1),{signal:_.signal})}#qJ(){this.#T?.(!1),this.#C?.abort(),this.#C=null,this.#T=null,this.#X=null,this.#$?.classList.remove("dragging")}#FJ(J,Q){return this.#Z.reduce((Z,$,j)=>{if(j===J)return Z;let _=Q*$.frequency,X=U.#g($.type,_,$.phase);return Z+$.offset+X*$.amplitude},0)}#NJ(J,Q){return U.#g(J.type,Q*J.frequency,J.phase)}#b({skipFieldSync:J=!1}={}){if(this.#a(),!J)this.#d();this.#n(),this.#o()}#a(){for(let J of this.#O){let Q=this.#u(J);J.value=this.#Z[Q]?.type||"sine"}}#d(){for(let J of this.#q){if(J===this.#H)continue;let Q=this.#u(J),Z=J.getAttribute("name"),$=this.#w(this.#Z[Q]?.[Z]??0),j=J.querySelector("fig-slider");if(j)j.value=$;else J.setAttribute("value",String($))}}#n(){for(let J of this.#L)if(this.#u(J)===this.#Q)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#c(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:U.#v(this.#I.type)}}))}}S("propskit-oscillator",U);class D extends HTMLElement{#Z;#Q;#J=null;#B;#_;#P;#X;#$;#j;#G;#Y=null;#M=null;constructor(){super();this.angle=0,this.#Z=1,this.#Q=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.#B=this.#x.bind(this),this.#_=this.#v.bind(this),this.#P=this.#g.bind(this),this.#X=this.#m.bind(this),this.#$=this.#jJ.bind(this),this.#j=this.#y.bind(this),this.#G=this.#$J.bind(this)}connectedCallback(){requestAnimationFrame(()=>{if(!this.isConnected)return;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.#U(),this.#k(),this.#D(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#h(),this.#W()}#k(){this.#h(),this.#W(),this.innerHTML=this.#q()}#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}#U(){if(this.hasAttribute("rotations"))return this.#N("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#N("show-rotations",!1);return!1}#q(){let J=this.#T(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"",$=this.#S(),j=this.getAttribute("aria-label")||this.getAttribute("name")||"Angle",_=this.min??this.#R(0),X=this.max??this.#R(360);return`
|
|
32
|
+
</fig-select-option>`}).join(""),_=$===null?"":` data-wave-index="${U.#A(String($))}"`;return`<fig-select class="${J}" value="${Q}" label="Add form"${_}${Z}><fig-select-options>${j}</fig-select-options></fig-select>`}#i(J,Q,Z,$,j,_,X){let Y=this.#W()?" disabled":"",B=X?` units="${U.#A(X)}"`:"",G=this.#Z[J]||U.#F();return`<propskit-slider class="propskit-oscillator-field" label="${Z}" direction="horizontal" name="${Q}" data-wave-index="${J}" value="${this.#w(G[Q])}" min="${$}" max="${j}" step="${_}" precision="${this.#J}" elastic="false"${B}${Y}></propskit-slider>`}#YJ(){this.#$=this.querySelector(".propskit-oscillator-svg"),this.#B=this.querySelector(".propskit-oscillator-path"),this.#G=this.querySelector(".propskit-oscillator-playhead"),this.#M=this.querySelector(".propskit-oscillator-baseline"),this.#k=this.querySelector(".propskit-oscillator-bounds"),this.#N=this.querySelector('[data-handle="amplitude"]'),this.#U=this.querySelector('[data-handle="frequency"]'),this.#O=Array.from(this.querySelectorAll(".propskit-oscillator-wave-type")),this.#P=Array.from(this.querySelectorAll("propskit-slider[name]")),this.#S=Array.from(this.querySelectorAll("fig-group.propskit-oscillator-wave")),this.#L=Array.from(this.querySelectorAll(".propskit-oscillator-fields"))}#e(J){let Q=new Set;for(let Z of this.#z)if(Z<J)Q.add(Z);else if(Z>J)Q.add(Z-1);this.#z=Q}#JJ(J){let Q=new Set;for(let Z of this.#z)Q.add(Z>=J?Z+1:Z);Q.add(J),this.#z=Q}#UJ(){if(this.#K||!window.ResizeObserver)return;this.#K=new ResizeObserver(()=>{if(this.#QJ())this.#o()}),this.#K.observe(this)}#QJ(){if(!this.#$)return!1;let J=this.#$.getBoundingClientRect(),Q=Math.max(1,Math.round(J.width||240)),Z=Math.max(1,Math.round(J.height||120)),$=Q!==this.#X||Z!==this.#j;return this.#X=Q,this.#j=Z,this.#$.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.#s(Z/Q)));return{min:-J,max:J}}#l(J){let{min:Q,max:Z}=this.#q;return this.#j-(J-Q)/(Z-Q)*this.#j}#MJ(J){let{min:Q,max:Z}=this.#q;return Q+(1-J/this.#j)*(Z-Q)}#s(J){return this.#Z.reduce((Q,Z)=>{let $=J*Z.frequency,j=U.#g(Z.type,$,Z.phase);return Q+Z.offset+j*Z.amplitude},0)}#o(){if(!this.#$||!this.#B)return;if(this.#QJ(),this.#q=this.#ZJ(),this.#k)this.#k.setAttribute("width",this.#X),this.#k.setAttribute("height",this.#j);let J=Math.max(...this.#Z.map((_)=>_.frequency)),Z=this.#Z.some((_)=>_.type==="square"||_.type==="sawtooth")?Math.max(192,Math.ceil(J*64)):Math.max(96,Math.ceil(J*64)),$="";for(let _=0;_<=Z;_++){let X=_/Z,Y=X*this.#X,B=this.#l(this.#s(X));$+=`${_===0?"M":"L"}${Y.toFixed(1)},${B.toFixed(1)}`}this.#B.setAttribute("d",$);let j=this.#l(0);this.#M?.setAttribute("x1","0"),this.#M?.setAttribute("y1",j),this.#M?.setAttribute("x2",this.#X),this.#M?.setAttribute("y2",j),this.#kJ()}#_J(){if(this.#Y||!this.#G)return;let J=(Q)=>{if(!this.isConnected||!this.#G){this.#Y=0;return}this.#XJ(Q%1000/1000),this.#Y=requestAnimationFrame(J)};this.#Y=requestAnimationFrame(J)}#GJ(){if(!this.#Y)return;cancelAnimationFrame(this.#Y),this.#Y=0}#XJ(J){if(!this.#G)return;let Q=J*this.#X,Z=this.#l(this.#s(J));this.#G.setAttribute("cx",Q.toFixed(1)),this.#G.setAttribute("cy",Z.toFixed(1))}#kJ(){let Q=this.#I,Z=this.#PJ(),$=Math.max(8,Math.min(this.#X-8,this.#X/Q.frequency)),j=this.#l(this.#s(Z/this.#X)),_=this.#l(this.#s($/this.#X));this.#SJ(this.#N,Z,j,8),this.#SJ(this.#U,$,_,8)}#PJ(){let J=this.#I,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 j=($-Q)/Z;while(j<0)j+=1/Z;while(j>1)j-=1/Z;if(j<0||j>1||!Number.isFinite(j))j=0.25;return Math.max(8,Math.min(this.#X-8,j*this.#X))}#SJ(J,Q,Z,$){if(!J)return;J.setAttribute("x",Q-$),J.setAttribute("y",Z-$),J.setAttribute("width",$*2),J.setAttribute("height",$*2)}#VJ(){if(!this.#D()||this.#W())return;for(let Q of this.#O)Q.addEventListener("change",(Z)=>{if(this.#W())return;let $=this.#u(Q);this.#BJ($),this.#Z[$].type=this.#R(Z.detail??Z.target?.value),this.#b(),this.#c("input"),this.#c("change")});for(let Q of this.#P)Q.addEventListener("input",(Z)=>{Z.stopPropagation(),this.#H=Q;try{this.#OJ(this.#u(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"input")}finally{this.#H=null}}),Q.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#OJ(this.#u(Q),Q.getAttribute("name"),Z.detail??Z.currentTarget?.value??Z.target?.value,"change")});for(let Q of this.#S)Q.addEventListener("pointerdown",()=>{this.#BJ(this.#u(Q))}),Q.addEventListener("focusin",()=>{this.#BJ(this.#u(Q))}),Q.addEventListener("openchange",(Z)=>{let $=this.#u(Q);if(Z.detail?.open)this.#z.add($);else this.#z.delete($)});for(let Q of this.querySelectorAll(".propskit-oscillator-add-type")){let Z=($)=>{$.stopPropagation()};Q.addEventListener("pointerdown",Z),Q.addEventListener("click",Z),Q.addEventListener("change",($)=>{if($.target!==Q)return;if(this.#W())return;let _=this.#u(Q)+1,X=this.#R($.detail??Q.value);this.#Z.splice(_,0,U.#F(X)),this.#JJ(_),this.#Q=_,this.#h(),this.#c("input"),this.#c("change")})}for(let Q of this.querySelectorAll(".propskit-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(".propskit-oscillator-remove-button"))Q.addEventListener("pointerdown",(Z)=>{Z.stopPropagation()}),Q.addEventListener("click",(Z)=>{if(Z.stopPropagation(),this.#W()||this.#Z.length<=1)return;let $=this.#u(Q);this.#Z.splice($,1),this.#e($),this.#Q=Math.min(this.#Q,this.#Z.length-1),this.#h(),this.#c("input"),this.#c("change")});for(let Q of[this.#N,this.#U])this.#RJ(Q);this.querySelector(".propskit-oscillator-svg-container")?.addEventListener("pointerdown",(Q)=>{if(this.#W())return;if(Q.target?.closest?.(".propskit-oscillator-handle, fig-handle"))return;this.#TJ(Q,"offset")})}#u(J){let Q=Number.parseInt(J?.getAttribute("data-wave-index")||"",10);return Number.isFinite(Q)?Math.min(this.#Z.length-1,Math.max(0,Q)):0}#RJ(J){let Q=J?.querySelector("fig-handle"),Z=J?.getAttribute("data-handle");if(!Q||!Z)return;Q.addEventListener("pointerdown",($)=>{if(this.#W())return;$.preventDefault(),$.stopImmediatePropagation(),this.#TJ($,Z)},{capture:!0}),Q.addEventListener("keydown",($)=>{if(this.#W())return;if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes($.key))return;if(!this.#zJ($,Z))return;$.preventDefault(),$.stopImmediatePropagation()},{capture:!0})}#BJ(J){let Q=Math.min(this.#Z.length-1,Math.max(0,J));if(Q===this.#Q)return;this.#Q=Q,this.#n(),this.#kJ()}#OJ(J,Q,Z,$){if(this.#W())return;this.#BJ(J);let j=Number.parseFloat(Z);if(!Number.isFinite(j)){if($==="change")this.#d();return}this.#Z[J]=this.#f({...this.#Z[J],[Q]:j}),this.#b({skipFieldSync:$=="input"}),this.#c($)}#zJ(J,Q){let Z=J.shiftKey?0.5:0.1,$=this.#I;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.#Z[this.#Q]=this.#f($),this.#b(),this.#c("input"),this.#c("change"),!0}#KJ(J){let Q=this.#$?.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}}#TJ(J,Q){this.#qJ(),this.#_=Q,this.#$?.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 j=(Y)=>{if(!this.#_)return;let B=this.#KJ(Y),G=this.#I;if(Q==="frequency"){let k=Math.max(1,Math.min(this.#X,B.x));G.frequency=this.#X/k}else if(Q==="offset"){let k=this.#E(B.x/this.#X,0,0,1),P=this.#NJ(G,k);G.offset=this.#MJ(B.y)-this.#FJ(this.#Q,k)-P*G.amplitude}else if(Q==="amplitude"){let k=this.#E(B.x/this.#X,0,0,1),P=this.#NJ(G,k),q=this.#MJ(B.y)-this.#FJ(this.#Q,k)-G.offset;G.amplitude=Math.abs(P)<0.001?G.amplitude:q/P}this.#Z[this.#Q]=this.#f(G),this.#b(),this.#c("input")},_=new AbortController,X=(Y=!1)=>{if(this.#_=null,this.#$?.classList.remove("dragging"),Z)document.body.style.cursor=$;if(_.abort(),this.#C===_)this.#C=null,this.#T=null;if(Y)this.#c("change")};this.#C=_,this.#T=X,document.addEventListener("pointermove",j,{signal:_.signal}),document.addEventListener("pointerup",()=>X(!0),{signal:_.signal}),document.addEventListener("pointercancel",()=>X(!1),{signal:_.signal}),window.addEventListener("blur",()=>X(!1),{signal:_.signal})}#qJ(){this.#T?.(!1),this.#C?.abort(),this.#C=null,this.#T=null,this.#_=null,this.#$?.classList.remove("dragging")}#FJ(J,Q){return this.#Z.reduce((Z,$,j)=>{if(j===J)return Z;let _=Q*$.frequency,X=U.#g($.type,_,$.phase);return Z+$.offset+X*$.amplitude},0)}#NJ(J,Q){return U.#g(J.type,Q*J.frequency,J.phase)}#b({skipFieldSync:J=!1}={}){if(this.#a(),!J)this.#d();this.#n(),this.#o()}#a(){for(let J of this.#O){let Q=this.#u(J);J.value=this.#Z[Q]?.type||"sine"}}#d(){for(let J of this.#P){if(J===this.#H)continue;let Q=this.#u(J),Z=J.getAttribute("name"),$=this.#w(this.#Z[Q]?.[Z]??0),j=J.querySelector("fig-slider");if(j)j.value=$;else J.setAttribute("value",String($))}}#n(){for(let J of this.#L)if(this.#u(J)===this.#Q)J.setAttribute("data-active","");else J.removeAttribute("data-active")}#c(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:{value:this.value,data:this.data,preset:U.#v(this.#I.type)}}))}}S("propskit-oscillator",U);class D extends HTMLElement{#Z;#Q;#J=null;#X;#j;#q;#_;#$;#B;#G;#Y=null;#M=null;constructor(){super();this.angle=0,this.#Z=1,this.#Q=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.#X=this.#x.bind(this),this.#j=this.#v.bind(this),this.#q=this.#g.bind(this),this.#_=this.#m.bind(this),this.#$=this.#jJ.bind(this),this.#B=this.#y.bind(this),this.#G=this.#$J.bind(this)}connectedCallback(){requestAnimationFrame(()=>{if(!this.isConnected)return;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.#U(),this.#k(),this.#D(),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#h(),this.#W()}#k(){this.#h(),this.#W(),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}#U(){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.#T(),Q=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"",$=this.#S(),j=this.getAttribute("aria-label")||this.getAttribute("name")||"Angle",_=this.min??this.#V(0),X=this.max??this.#V(360);return`
|
|
33
33
|
${this.dial?`<div class="fig-input-angle-plane"
|
|
34
34
|
role="slider"
|
|
35
35
|
tabindex="${$?-1:0}"
|
|
@@ -52,4 +52,4 @@ function S(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function M(
|
|
|
52
52
|
${$?"disabled":""}>
|
|
53
53
|
${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
|
|
54
54
|
</fig-input-number>`:""}
|
|
55
|
-
`}#O(){let J=Math.abs(this.#F(this.angle));return Math.floor(J/360)}static#L(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}#S(){return M(this,"disabled")}#z(J){let Q=Number(J);if(!Number.isFinite(Q))return this.angle;if(this.min!==null&&Number.isFinite(this.min))Q=Math.max(this.min,Q);if(this.max!==null&&Number.isFinite(this.max))Q=Math.min(this.max,Q);return Q}#K(J,{reflect:Q=!0}={}){let Z=this.#z(J);if(this.angle=Z,this.#f(),Q){let $=String(Z);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}if(this.#A(),this.angleInput)this.angleInput.value=Z.toFixed(this.precision);this.#H(),this.#C()}#H(){if(!this.plane)return;this.plane.setAttribute("aria-valuenow",String(this.angle)),this.plane.setAttribute("aria-valuetext",`${this.angle.toFixed(this.precision)}${this.units}`)}#C(){if(!this.rotationSpan)return;let J=this.#O();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#T(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#F(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#R(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#p(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 $}}#D(){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.#C(),this.plane?.addEventListener("mousedown",this.#_),this.plane?.addEventListener("touchstart",this.#P),this.plane?.addEventListener("keydown",this.#G),window.addEventListener("keydown",this.#X),window.addEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#j),this.angleInput.addEventListener("change",this.#j);this.addEventListener("change",this.#B,!0)}#W(){if(this.plane?.removeEventListener("mousedown",this.#_),this.plane?.removeEventListener("touchstart",this.#P),this.plane?.removeEventListener("keydown",this.#G),window.removeEventListener("keydown",this.#X),window.removeEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#j),this.angleInput.removeEventListener("change",this.#j);this.removeEventListener("change",this.#B,!0)}#x(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]),j=Z[2].toLowerCase();if(j==="deg")j="°";if(j!==this.units){let _=this.#p($,j,this.units);J.target.value=String(_)}}}#y(J){if(J.stopPropagation(),this.#S())return;if(this.#K(Number(J.target.value)),J.type==="change")this.#w();else this.#E()}#f(){let Q=this.#F(this.angle)*Math.PI/180;this.#Z=Math.cos(Q),this.#Q=Math.sin(Q)}#r(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#I(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,j=J.clientX-Z,_=J.clientY-$;return Math.atan2(_,j)*180/Math.PI}#V(J){let Z=(this.#I(J)%360+360)%360;if(Z=this.#r(Z),this.min!==null||this.max!==null)this.angle=this.#z(this.#R(Z));else if(this.#J===null){this.#J=Z;let _=(this.#F(this.angle)%360+360)%360,X=Z-_;if(X>180)X-=360;if(X<-180)X+=360;this.angle=this.#z(this.angle+this.#R(X))}else{let j=Z-this.#J;if(j>180)j-=360;if(j<-180)j+=360;this.angle=this.#z(this.angle+this.#R(j)),this.#J=Z}if(this.#f(),this.setAttribute("value",String(this.angle)),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#C(),this.#H(),this.#E()}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#A(){if(this.handle){let Q=this.#F(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,j=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${j}px)`}}#v(J){if(this.#S()||J.button!==0)return;this.#h(),this.isDragging=!0,this.#J=null,this.#V(J);let Q=(j)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#V(j)},Z=new AbortController,$=(j=!1)=>{if(this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),Z.abort(),this.#Y===Z)this.#Y=null,this.#M=null;if(j)this.#w()};this.#Y=Z,this.#M=$,window.addEventListener("mousemove",Q,{signal:Z.signal}),window.addEventListener("mouseup",()=>$(!0),{signal:Z.signal}),window.addEventListener("blur",()=>$(!1),{signal:Z.signal})}#g(J){if(this.#S())return;J.preventDefault(),this.#h(),this.isDragging=!0,this.#J=null,this.#V(J.touches[0]);let Q=(j)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#V(j.touches[0])},Z=new AbortController,$=(j=!1)=>{if(this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),Z.abort(),this.#Y===Z)this.#Y=null,this.#M=null;if(j)this.#w()};this.#Y=Z,this.#M=$,window.addEventListener("touchmove",Q,{signal:Z.signal}),window.addEventListener("touchend",()=>$(!0),{signal:Z.signal}),window.addEventListener("touchcancel",()=>$(!1),{signal:Z.signal})}#h(){this.#M?.(!1),this.#Y?.abort(),this.#Y=null,this.#M=null,this.isDragging=!1,this.#J=null,this.plane?.classList.remove("dragging")}#$J(J){if(this.#S())return;let Q=this.#T()*(J.shiftKey?10:1),Z=this.angle;if(J.key==="ArrowLeft"||J.key==="ArrowDown")Z-=Q;else if(J.key==="ArrowRight"||J.key==="ArrowUp")Z+=Q;else if(J.key==="Home")Z=this.min??this.#R(0);else if(J.key==="End")Z=this.max??this.#R(360);else return;J.preventDefault(),J.stopPropagation(),this.#K(Z),this.#E(),this.#w()}#m(J){if(J.key==="Shift")this.isShiftHeld=!0}#jJ(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","disabled","aria-label","name"]}get value(){return this.angle}get adjacent(){return this.#Z}get opposite(){return this.#Q}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}this.#K(Number(J))}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(this.isDragging)break;if(Z!==null)this.#K(Number(Z),{reflect:!1});break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==Q){if(this.text=Z?.toLowerCase()==="true",this.isConnected)this.#k(),this.#D(),this.#A()}break;case"dial":if(this.dial=this.#N("dial",!0),this.isConnected)this.#k(),this.#D(),this.#A();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#k(),this.#D(),this.#A();break}case"min":if(this.min=Z!==null?Number(Z):null,this.#K(this.angle),this.isConnected)this.#k(),this.#D(),this.#A();break;case"max":if(this.max=Z!==null?Number(Z):null,this.#K(this.angle),this.isConnected)this.#k(),this.#D(),this.#A();break;case"disabled":if(this.#h(),this.isConnected)this.#k(),this.#D(),this.#A();break;case"aria-label":case"name":if(this.isConnected)this.#k(),this.#D(),this.#A();break;case"rotations":case"show-rotations":if(this.showRotations=this.#U(),this.isConnected)this.#k(),this.#D(),this.#A();break}}}S("fig-input-angle",D);class H extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Z=6;static#Q=["input","button","select","textarea","a[href]","label","summary","fig-button","fig-dropdown","fig-slider","fig-input-number","fig-input-text","propskit-color","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text","fig-checkbox","fig-switch","fig-combo-input","fig-segmented-control","fig-input-color","fig-input-fill",'[contenteditable="true"]'];#J=null;#B=new Map;#_=null;#P=null;#X=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#z(),this.#M(),this.#J=new MutationObserver(()=>this.#M()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#V(),this.#E(),this.#y(),this.#X?.remove(),this.#X=null}attributeChangedCallback(){if(this.isConnected){if(this.#$)this.#E();this.#M()}}get#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#j(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#G(){return(this.getAttribute("handle")||"").trim()}#Y(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#M(){let J=this.#Y(),Q=new Set(J);for(let[Z,$]of this.#B)if(!Q.has(Z))$.target.removeEventListener("pointerdown",$.onPointerDown,!0),$.target.removeEventListener("keydown",$.onKeyDown),this.#S($),this.#B.delete(Z);if(this.#U(J),this.#k(J),this.#$||J.length<2){this.#V();return}for(let Z of J){let $=this.#O(Z),j=this.#B.get(Z);if(j&&j.target===$)continue;if(j)j.target.removeEventListener("pointerdown",j.onPointerDown,!0),this.#B.delete(Z);if(!$)continue;this.#L(Z,$)}this.#q(J),this.#N(J)}#k(J){for(let Q of J)if(Q.removeAttribute("data-reorder-item"),Q.hasAttribute("data-reorder-generated-role"))Q.removeAttribute("role"),Q.removeAttribute("data-reorder-generated-role")}#N(J){for(let Q of J)if(Q.setAttribute("data-reorder-item",""),!Q.hasAttribute("role"))Q.setAttribute("role","listitem"),Q.setAttribute("data-reorder-generated-role","")}#U(J){for(let Q of J)Q.querySelectorAll("[data-reorder-handle]").forEach((Z)=>{Z.removeAttribute("data-reorder-handle"),Z.removeAttribute("aria-roledescription")})}#q(J){if(!this.#G)return;for(let Q of J){let Z=Q.querySelector(this.#G);if(Z)Z.setAttribute("data-reorder-handle",""),Z.setAttribute("aria-roledescription","reorder handle")}}#O(J){if(this.#G)return J.querySelector(this.#G);return J}#L(J,Q){let Z=(B)=>{if(this.#$||this.#Y().length<2)return;if(B.button!==0)return;if(!this.#G&&this.#H(B.target,J))return;this.#F(B,J,Q)},$=Q.getAttribute("tabindex"),j=Q.getAttribute("aria-label"),_=Q.getAttribute("role"),X=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Q.setAttribute("tabindex","0"),Q.setAttribute("aria-label",`Move ${X}`),Q!==J&&!Q.hasAttribute("role"))Q.setAttribute("role","button");let Y=(B)=>{if(this.#$)return;let G=this.#j==="horizontal",k=G?"ArrowLeft":"ArrowUp",P=G?"ArrowRight":"ArrowDown";if(B.key!==k&&B.key!==P&&B.key!=="Home"&&B.key!=="End")return;B.preventDefault(),B.stopPropagation();let q=this.#Y(),O=q.indexOf(J),N=O;if(B.key===k)N=Math.max(0,O-1);else if(B.key===P)N=Math.min(q.length-1,O+1);else if(B.key==="Home")N=0;else if(B.key==="End")N=q.length-1;if(N===O){this.#K(`${X}, position ${O+1} of ${q.length}`);return}this.#r(J,N),this.#M(),this.#O(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:O,newIndex:N,item:J}})),this.#K(`${X}, position ${N+1} of ${q.length}`)};Q.addEventListener("pointerdown",Z,!0),Q.addEventListener("keydown",Y),this.#B.set(J,{target:Q,onPointerDown:Z,onKeyDown:Y,originalTabIndex:$,originalAriaLabel:j,originalRole:_})}#S(J){let{target:Q,originalTabIndex:Z,originalAriaLabel:$,originalRole:j}=J;if(Z===null)Q.removeAttribute("tabindex");else Q.setAttribute("tabindex",Z);if($===null)Q.removeAttribute("aria-label");else Q.setAttribute("aria-label",$);if(j===null)Q.removeAttribute("role");else Q.setAttribute("role",j)}#z(){if(this.#X?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#X=J,document.body.appendChild(J)}#K(J){if(!this.#X)return;this.#X.textContent="",requestAnimationFrame(()=>{if(this.#X)this.#X.textContent=J})}#H(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of H.#Q)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#C="fig-reorder-dragging";static#T(J){document.body.classList.toggle(H.#C,J)}#F(J,Q,Z){this.#E(),H.#T(!0);let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#Y().indexOf(Q),targetIndex:this.#Y().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(j)=>{if(j.pointerId!==$.pointerId)return;let _=j.clientX-$.startX,X=j.clientY-$.startY;if(!$.active){if(_*_+X*X<H.#Z*H.#Z)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging");try{Z.setPointerCapture($.pointerId)}catch{}}j.preventDefault();let Y=this.#j==="horizontal"?j.clientX:j.clientY,B=this.#R(Y);$.targetIndex=B,this.#x(B,Q)},$.onKeyDown=(j)=>{if(j.key!=="Escape"||!$.active)return;j.preventDefault(),this.#I($,!0)},$.onUp=(j)=>{if(j.pointerId!==$.pointerId)return;this.#I($,j.type==="pointercancel")},this.#_=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#R(J){let Q=this.#Y(),Z=this.#j==="horizontal";for(let $=0;$<Q.length;$++){let j=Q[$].getBoundingClientRect(),_=Z?j.left+j.width/2:j.top+j.height/2;if(J<_)return $}return Q.length}#p(J,Q){let Z=this.#Y(),$=Z.indexOf(J);if($===-1)return!1;let j=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(j>=Z.length&&$===Z.length-1)return!1;return!0}#D(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,j=-1/0;for(let _ of J){let X=_.getBoundingClientRect();Q=Math.min(Q,X.left),Z=Math.max(Z,X.right),$=Math.min($,X.top),j=Math.max(j,X.bottom)}return{left:Q,top:$,width:Z-Q,height:j-$}}#W(){if(this.#P)return this.#P;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#j),document.body.appendChild(J),this.#P=J,J}#x(J,Q){let Z=this.#Y();if(!this.#p(Q,J)){this.#y();return}let $=this.#D(Z);if(!$){this.#y();return}let j=this.#W();if(j.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;j.style.left=`${X-1}px`,j.style.top=`${$.top}px`,j.style.width="2px",j.style.height=`${$.height}px`;return}let _;if(J<=0)_=Z[0].getBoundingClientRect().top;else if(J>=Z.length)_=Z[Z.length-1].getBoundingClientRect().bottom;else _=Z[J].getBoundingClientRect().top;j.style.left=`${$.left}px`,j.style.top=`${_-1}px`,j.style.width=`${$.width}px`,j.style.height="2px"}#y(){this.#P?.remove(),this.#P=null}#f(J,Q){let Z=this.#Y(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let j=Z[$];if(j!==J)this.insertBefore(J,j)}#r(J,Q){let $=this.#Y().filter((j)=>j!==J)[Q]??null;if($)this.insertBefore(J,$);else this.appendChild(J)}#I(J,Q){let{item:Z,oldIndex:$,active:j,onMove:_,onUp:X,onKeyDown:Y}=J;if(window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",X),window.removeEventListener("pointercancel",X),window.removeEventListener("keydown",Y),j){if(!Q){this.#f(Z,J.targetIndex);let B=this.#Y().indexOf(Z);if(B!==-1&&B!==$){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:B,item:Z}}));let G=Z.getAttribute("aria-label")||Z.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#K(`${G}, position ${B+1} of ${this.#Y().length}`)}}}if(Z.classList.remove("dragging"),H.#T(!1),this.#y(),this.#_===J)this.#_=null}#V(){for(let[,J]of this.#B)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#S(J);this.#B.clear()}#E(){if(!this.#_)return;this.#I(this.#_,!0)}}S("fig-reorder",H);var w=new WeakSet,E=new WeakSet,p=new WeakSet;function t(J){return Array.from(J.querySelectorAll("fig-select-option"))}function A(J,Q,Z=!0){let $=t(J);if(!$.length)return;let j=Q&&$.includes(Q)?Q:$.find((Y)=>M(Y,"selected"));if(!j||M(j,"disabled"))j=$.find((Y)=>!M(Y,"disabled"))||$[0];if(!j)return;let _=j.value??j.getAttribute("value")??"",X=J.getAttribute("value")??"";J.setAttribute("value",String(_));for(let Y of $){let B=Y===j;Y.toggleAttribute("selected",B),Y.setAttribute("aria-selected",String(B))}if(Z&&X!==String(_))J.dispatchEvent(new CustomEvent("input",{detail:String(_),bubbles:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:String(_),bubbles:!0,composed:!0}))}function I(J){if(w.has(J))return;if(!J.shadowRoot?.querySelector(".fig-select-trigger")){requestAnimationFrame(()=>{if(J.isConnected)I(J)});return}w.add(J),new MutationObserver(($)=>{let j=null,_=!1;for(let X of $){if(X.type!=="attributes"||X.attributeName!=="selected"||X.target.tagName!=="FIG-SELECT-OPTION")continue;if(M(X.target,"selected"))j=X.target;else if(String(X.target.value??"")===(J.getAttribute("value")??""))_=!0}if(j){let X=String(j.value??"");if((J.getAttribute("value")??"")!==X)A(J,j)}else if(_)A(J,null)}).observe(J,{attributes:!0,subtree:!0,attributeFilter:["selected"]})}function e(J){if(p.has(J))return;let Q=J.shadowRoot?.querySelector(".fig-select-trigger");if(!Q)return;p.add(J),Q.addEventListener("click",()=>{if(M(J,"disabled"))return;J.open=!J.open}),J.addEventListener("click",(Z)=>{let $=Z.composedPath().find((j)=>j?.tagName==="FIG-SELECT-OPTION");if(!$||!J.contains($)||M($,"disabled"))return;A(J,$),J.open=!1})}function JJ(J){if(J instanceof Element&&J.matches("fig-select"))E.add(J);J.querySelectorAll?.("fig-select").forEach((Q)=>E.add(Q))}function d(J){if(J instanceof Element&&J.matches("fig-select"))I(J);J.querySelectorAll?.("fig-select").forEach((Q)=>I(Q))}d(document);new MutationObserver((J)=>{for(let Q of J){for(let Z of Q.removedNodes)if(Z instanceof Element)JJ(Z);for(let Z of Q.addedNodes){if(!(Z instanceof Element))continue;d(Z);let $=Z.matches("fig-select")?[Z]:[...Z.querySelectorAll("fig-select")];for(let j of $)if(E.has(j))e(j)}}}).observe(document.documentElement,{childList:!0,subtree:!0});
|
|
55
|
+
`}#O(){let J=Math.abs(this.#F(this.angle));return Math.floor(J/360)}static#L(J){return String(J).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}#S(){return M(this,"disabled")}#z(J){let Q=Number(J);if(!Number.isFinite(Q))return this.angle;if(this.min!==null&&Number.isFinite(this.min))Q=Math.max(this.min,Q);if(this.max!==null&&Number.isFinite(this.max))Q=Math.min(this.max,Q);return Q}#K(J,{reflect:Q=!0}={}){let Z=this.#z(J);if(this.angle=Z,this.#f(),Q){let $=String(Z);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}if(this.#A(),this.angleInput)this.angleInput.value=Z.toFixed(this.precision);this.#H(),this.#C()}#H(){if(!this.plane)return;this.plane.setAttribute("aria-valuenow",String(this.angle)),this.plane.setAttribute("aria-valuetext",`${this.angle.toFixed(this.precision)}${this.units}`)}#C(){if(!this.rotationSpan)return;let J=this.#O();if(J>1)this.rotationSpan.textContent=`×${J}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#T(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#F(J){switch(this.units){case"rad":return J*180/Math.PI;case"turn":return J*360;default:return J}}#V(J){switch(this.units){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#p(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 $}}#D(){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.#C(),this.plane?.addEventListener("mousedown",this.#j),this.plane?.addEventListener("touchstart",this.#q),this.plane?.addEventListener("keydown",this.#G),window.addEventListener("keydown",this.#_),window.addEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#B),this.angleInput.addEventListener("change",this.#B);this.addEventListener("change",this.#X,!0)}#W(){if(this.plane?.removeEventListener("mousedown",this.#j),this.plane?.removeEventListener("touchstart",this.#q),this.plane?.removeEventListener("keydown",this.#G),window.removeEventListener("keydown",this.#_),window.removeEventListener("keyup",this.#$),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#B),this.angleInput.removeEventListener("change",this.#B);this.removeEventListener("change",this.#X,!0)}#x(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]),j=Z[2].toLowerCase();if(j==="deg")j="°";if(j!==this.units){let _=this.#p($,j,this.units);J.target.value=String(_)}}}#y(J){if(J.stopPropagation(),this.#S())return;if(this.#K(Number(J.target.value)),J.type==="change")this.#w();else this.#E()}#f(){let Q=this.#F(this.angle)*Math.PI/180;this.#Z=Math.cos(Q),this.#Q=Math.sin(Q)}#r(J){if(!this.isShiftHeld)return J;let Q=45;return Math.round(J/Q)*Q}#I(J){let Q=this.plane.getBoundingClientRect(),Z=Q.left+Q.width/2,$=Q.top+Q.height/2,j=J.clientX-Z,_=J.clientY-$;return Math.atan2(_,j)*180/Math.PI}#R(J){let Z=(this.#I(J)%360+360)%360;if(Z=this.#r(Z),this.min!==null||this.max!==null)this.angle=this.#z(this.#V(Z));else if(this.#J===null){this.#J=Z;let _=(this.#F(this.angle)%360+360)%360,X=Z-_;if(X>180)X-=360;if(X<-180)X+=360;this.angle=this.#z(this.angle+this.#V(X))}else{let j=Z-this.#J;if(j>180)j-=360;if(j<-180)j+=360;this.angle=this.#z(this.angle+this.#V(j)),this.#J=Z}if(this.#f(),this.setAttribute("value",String(this.angle)),this.#A(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#C(),this.#H(),this.#E()}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#A(){if(this.handle){let Q=this.#F(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,$=Math.cos(Q)*Z,j=Math.sin(Q)*Z;this.handle.style.transform=`translate(${$}px, ${j}px)`}}#v(J){if(this.#S()||J.button!==0)return;this.#h(),this.isDragging=!0,this.#J=null,this.#R(J);let Q=(j)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#R(j)},Z=new AbortController,$=(j=!1)=>{if(this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),Z.abort(),this.#Y===Z)this.#Y=null,this.#M=null;if(j)this.#w()};this.#Y=Z,this.#M=$,window.addEventListener("mousemove",Q,{signal:Z.signal}),window.addEventListener("mouseup",()=>$(!0),{signal:Z.signal}),window.addEventListener("blur",()=>$(!1),{signal:Z.signal})}#g(J){if(this.#S())return;J.preventDefault(),this.#h(),this.isDragging=!0,this.#J=null,this.#R(J.touches[0]);let Q=(j)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#R(j.touches[0])},Z=new AbortController,$=(j=!1)=>{if(this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),Z.abort(),this.#Y===Z)this.#Y=null,this.#M=null;if(j)this.#w()};this.#Y=Z,this.#M=$,window.addEventListener("touchmove",Q,{signal:Z.signal}),window.addEventListener("touchend",()=>$(!0),{signal:Z.signal}),window.addEventListener("touchcancel",()=>$(!1),{signal:Z.signal})}#h(){this.#M?.(!1),this.#Y?.abort(),this.#Y=null,this.#M=null,this.isDragging=!1,this.#J=null,this.plane?.classList.remove("dragging")}#$J(J){if(this.#S())return;let Q=this.#T()*(J.shiftKey?10:1),Z=this.angle;if(J.key==="ArrowLeft"||J.key==="ArrowDown")Z-=Q;else if(J.key==="ArrowRight"||J.key==="ArrowUp")Z+=Q;else if(J.key==="Home")Z=this.min??this.#V(0);else if(J.key==="End")Z=this.max??this.#V(360);else return;J.preventDefault(),J.stopPropagation(),this.#K(Z),this.#E(),this.#w()}#m(J){if(J.key==="Shift")this.isShiftHeld=!0}#jJ(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","disabled","aria-label","name"]}get value(){return this.angle}get adjacent(){return this.#Z}get opposite(){return this.#Q}set value(J){if(isNaN(J)){console.error("Invalid value: must be a number.");return}this.#K(Number(J))}attributeChangedCallback(J,Q,Z){switch(J){case"value":if(this.isDragging)break;if(Z!==null)this.#K(Number(Z),{reflect:!1});break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==Q){if(this.text=Z?.toLowerCase()==="true",this.isConnected)this.#k(),this.#D(),this.#A()}break;case"dial":if(this.dial=this.#N("dial",!0),this.isConnected)this.#k(),this.#D(),this.#A();break;case"units":{let $=Z||"°";if($==="deg")$="°";if(this.units=$,this.isConnected)this.#k(),this.#D(),this.#A();break}case"min":if(this.min=Z!==null?Number(Z):null,this.#K(this.angle),this.isConnected)this.#k(),this.#D(),this.#A();break;case"max":if(this.max=Z!==null?Number(Z):null,this.#K(this.angle),this.isConnected)this.#k(),this.#D(),this.#A();break;case"disabled":if(this.#h(),this.isConnected)this.#k(),this.#D(),this.#A();break;case"aria-label":case"name":if(this.isConnected)this.#k(),this.#D(),this.#A();break;case"rotations":case"show-rotations":if(this.showRotations=this.#U(),this.isConnected)this.#k(),this.#D(),this.#A();break}}}S("fig-input-angle",D);class H extends HTMLElement{static observedAttributes=["axis","handle","disabled"];static#Z=6;static#Q=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-input-angle","fig-input-joystick","fig-canvas-control","propskit-number","propskit-slider","propskit-oscillator"];#J=null;#X=new Map;#j=null;#q=null;#_=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#z(),this.#M(),this.#J=new MutationObserver(()=>this.#M()),this.#J.observe(this,{childList:!0})}disconnectedCallback(){this.#J?.disconnect(),this.#J=null,this.#R(),this.#E(),this.#y(),this.#_?.remove(),this.#_=null}attributeChangedCallback(){if(this.isConnected){if(this.#$)this.#E();this.#M()}}get#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#B(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#G(){return(this.getAttribute("handle")||"").trim()}#Y(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#M(){let J=this.#Y(),Q=new Set(J);for(let[Z,$]of this.#X)if(!Q.has(Z))$.target.removeEventListener("pointerdown",$.onPointerDown,!0),$.target.removeEventListener("keydown",$.onKeyDown),this.#S($),this.#X.delete(Z);if(this.#U(J),this.#k(J),this.#$||J.length<2){this.#R();return}for(let Z of J){let $=this.#O(Z),j=this.#X.get(Z);if(j&&j.target===$)continue;if(j)j.target.removeEventListener("pointerdown",j.onPointerDown,!0),this.#X.delete(Z);if(!$)continue;this.#L(Z,$)}this.#P(J),this.#N(J)}#k(J){for(let Q of J)if(Q.removeAttribute("data-reorder-item"),Q.hasAttribute("data-reorder-generated-role"))Q.removeAttribute("role"),Q.removeAttribute("data-reorder-generated-role")}#N(J){for(let Q of J)if(Q.setAttribute("data-reorder-item",""),!Q.hasAttribute("role"))Q.setAttribute("role","listitem"),Q.setAttribute("data-reorder-generated-role","")}#U(J){for(let Q of J)Q.querySelectorAll("[data-reorder-handle]").forEach((Z)=>{Z.removeAttribute("data-reorder-handle"),Z.removeAttribute("aria-roledescription")})}#P(J){if(!this.#G)return;for(let Q of J){let Z=Q.querySelector(this.#G);if(Z)Z.setAttribute("data-reorder-handle",""),Z.setAttribute("aria-roledescription","reorder handle")}}#O(J){if(this.#G)return J.querySelector(this.#G);return J}#L(J,Q){let Z=(B)=>{if(this.#$||this.#Y().length<2)return;if(B.button!==0)return;if(!this.#G&&this.#H(B.target,J))return;this.#F(B,J,Q)},$=Q.getAttribute("tabindex"),j=Q.getAttribute("aria-label"),_=Q.getAttribute("role"),X=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Q.setAttribute("tabindex","0"),Q.setAttribute("aria-label",`Move ${X}`),Q!==J&&!Q.hasAttribute("role"))Q.setAttribute("role","button");let Y=(B)=>{if(this.#$)return;let G=this.#B==="horizontal",k=G?"ArrowLeft":"ArrowUp",P=G?"ArrowRight":"ArrowDown";if(B.key!==k&&B.key!==P&&B.key!=="Home"&&B.key!=="End")return;B.preventDefault(),B.stopPropagation();let q=this.#Y(),O=q.indexOf(J),N=O;if(B.key===k)N=Math.max(0,O-1);else if(B.key===P)N=Math.min(q.length-1,O+1);else if(B.key==="Home")N=0;else if(B.key==="End")N=q.length-1;if(N===O){this.#K(`${X}, position ${O+1} of ${q.length}`);return}this.#r(J,N),this.#M(),this.#O(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:O,newIndex:N,item:J}})),this.#K(`${X}, position ${N+1} of ${q.length}`)};Q.addEventListener("pointerdown",Z,!0),Q.addEventListener("keydown",Y),this.#X.set(J,{target:Q,onPointerDown:Z,onKeyDown:Y,originalTabIndex:$,originalAriaLabel:j,originalRole:_})}#S(J){let{target:Q,originalTabIndex:Z,originalAriaLabel:$,originalRole:j}=J;if(Z===null)Q.removeAttribute("tabindex");else Q.setAttribute("tabindex",Z);if($===null)Q.removeAttribute("aria-label");else Q.setAttribute("aria-label",$);if(j===null)Q.removeAttribute("role");else Q.setAttribute("role",j)}#z(){if(this.#_?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#_=J,document.body.appendChild(J)}#K(J){if(!this.#_)return;this.#_.textContent="",requestAnimationFrame(()=>{if(this.#_)this.#_.textContent=J})}#H(J,Q){let Z=J;while(Z&&Z!==Q){if(Z instanceof Element){for(let $ of H.#Q)if(Z.matches($))return!0}Z=Z.parentElement}return!1}static#C="fig-reorder-dragging";static#T(J){document.body.classList.toggle(H.#C,J)}#F(J,Q,Z){this.#E();let $={item:Q,target:Z,pointerId:J.pointerId,oldIndex:this.#Y().indexOf(Q),targetIndex:this.#Y().indexOf(Q),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};$.onMove=(j)=>{if(j.pointerId!==$.pointerId)return;let _=j.clientX-$.startX,X=j.clientY-$.startY;if(!$.active){if(_*_+X*X<H.#Z*H.#Z)return;$.active=!0,J.preventDefault(),J.stopPropagation(),Q.classList.add("dragging"),H.#T(!0);try{Z.setPointerCapture($.pointerId)}catch{}}j.preventDefault();let Y=this.#B==="horizontal"?j.clientX:j.clientY,B=this.#V(Y);$.targetIndex=B,this.#x(B,Q)},$.onKeyDown=(j)=>{if(j.key!=="Escape"||!$.active)return;j.preventDefault(),this.#I($,!0)},$.onUp=(j)=>{if(j.pointerId!==$.pointerId)return;this.#I($,j.type==="pointercancel")},this.#j=$,window.addEventListener("pointermove",$.onMove),window.addEventListener("pointerup",$.onUp),window.addEventListener("pointercancel",$.onUp),window.addEventListener("keydown",$.onKeyDown)}#V(J){let Q=this.#Y(),Z=this.#B==="horizontal";for(let $=0;$<Q.length;$++){let j=Q[$].getBoundingClientRect(),_=Z?j.left+j.width/2:j.top+j.height/2;if(J<_)return $}return Q.length}#p(J,Q){let Z=this.#Y(),$=Z.indexOf(J);if($===-1)return!1;let j=Math.max(0,Math.min(Q,Z.length));if(Q===$)return!1;if(j>=Z.length&&$===Z.length-1)return!1;return!0}#D(J){if(!J.length)return null;let Q=1/0,Z=-1/0,$=1/0,j=-1/0;for(let _ of J){let X=_.getBoundingClientRect();Q=Math.min(Q,X.left),Z=Math.max(Z,X.right),$=Math.min($,X.top),j=Math.max(j,X.bottom)}return{left:Q,top:$,width:Z-Q,height:j-$}}#W(){if(this.#q)return this.#q;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#B),document.body.appendChild(J),this.#q=J,J}#x(J,Q){let Z=this.#Y();if(!this.#p(Q,J)){this.#y();return}let $=this.#D(Z);if(!$){this.#y();return}let j=this.#W();if(j.setAttribute("data-axis",this.#B),this.#B==="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;j.style.left=`${X-1}px`,j.style.top=`${$.top}px`,j.style.width="2px",j.style.height=`${$.height}px`;return}let _;if(J<=0)_=Z[0].getBoundingClientRect().top;else if(J>=Z.length)_=Z[Z.length-1].getBoundingClientRect().bottom;else _=Z[J].getBoundingClientRect().top;j.style.left=`${$.left}px`,j.style.top=`${_-1}px`,j.style.width=`${$.width}px`,j.style.height="2px"}#y(){this.#q?.remove(),this.#q=null}#f(J,Q){let Z=this.#Y(),$=Math.max(0,Math.min(Q,Z.length));if($>=Z.length){if(Z[Z.length-1]!==J)this.appendChild(J);return}let j=Z[$];if(j!==J)this.insertBefore(J,j)}#r(J,Q){let $=this.#Y().filter((j)=>j!==J)[Q]??null;if($)this.insertBefore(J,$);else this.appendChild(J)}#I(J,Q){let{item:Z,oldIndex:$,active:j,onMove:_,onUp:X,onKeyDown:Y}=J;if(window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",X),window.removeEventListener("pointercancel",X),window.removeEventListener("keydown",Y),j){if(!Q){this.#f(Z,J.targetIndex);let B=this.#Y().indexOf(Z);if(B!==-1&&B!==$){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:$,newIndex:B,item:Z}}));let G=Z.getAttribute("aria-label")||Z.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#K(`${G}, position ${B+1} of ${this.#Y().length}`)}}}if(Z.classList.remove("dragging"),H.#T(!1),this.#y(),this.#j===J)this.#j=null}#R(){for(let[,J]of this.#X)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#S(J);this.#X.clear()}#E(){if(!this.#j)return;this.#I(this.#j,!0)}}S("fig-reorder",H);var w=new WeakSet,E=new WeakSet,p=new WeakSet;function t(J){return Array.from(J.querySelectorAll("fig-select-option"))}function A(J,Q,Z=!0){let $=t(J);if(!$.length)return;let j=Q&&$.includes(Q)?Q:$.find((Y)=>M(Y,"selected"));if(!j||M(j,"disabled"))j=$.find((Y)=>!M(Y,"disabled"))||$[0];if(!j)return;let _=j.value??j.getAttribute("value")??"",X=J.getAttribute("value")??"";J.setAttribute("value",String(_));for(let Y of $){let B=Y===j;Y.toggleAttribute("selected",B),Y.setAttribute("aria-selected",String(B))}if(Z&&X!==String(_))J.dispatchEvent(new CustomEvent("input",{detail:String(_),bubbles:!0,composed:!0})),J.dispatchEvent(new CustomEvent("change",{detail:String(_),bubbles:!0,composed:!0}))}function I(J){if(w.has(J))return;if(!J.shadowRoot?.querySelector(".fig-select-trigger")){requestAnimationFrame(()=>{if(J.isConnected)I(J)});return}w.add(J),new MutationObserver(($)=>{let j=null,_=!1;for(let X of $){if(X.type!=="attributes"||X.attributeName!=="selected"||X.target.tagName!=="FIG-SELECT-OPTION")continue;if(M(X.target,"selected"))j=X.target;else if(String(X.target.value??"")===(J.getAttribute("value")??""))_=!0}if(j){let X=String(j.value??"");if((J.getAttribute("value")??"")!==X)A(J,j)}else if(_)A(J,null)}).observe(J,{attributes:!0,subtree:!0,attributeFilter:["selected"]})}function e(J){if(p.has(J))return;let Q=J.shadowRoot?.querySelector(".fig-select-trigger");if(!Q)return;p.add(J),Q.addEventListener("click",()=>{if(M(J,"disabled"))return;J.open=!J.open}),J.addEventListener("click",(Z)=>{let $=Z.composedPath().find((j)=>j?.tagName==="FIG-SELECT-OPTION");if(!$||!J.contains($)||M($,"disabled"))return;A(J,$),J.open=!1})}function JJ(J){if(J instanceof Element&&J.matches("fig-select"))E.add(J);J.querySelectorAll?.("fig-select").forEach((Q)=>E.add(Q))}function d(J){if(J instanceof Element&&J.matches("fig-select"))I(J);J.querySelectorAll?.("fig-select").forEach((Q)=>I(Q))}d(document);new MutationObserver((J)=>{for(let Q of J){for(let Z of Q.removedNodes)if(Z instanceof Element)JJ(Z);for(let Z of Q.addedNodes){if(!(Z instanceof Element))continue;d(Z);let $=Z.matches("fig-select")?[Z]:[...Z.querySelectorAll("fig-select")];for(let j of $)if(E.has(j))e(j)}}}).observe(document.documentElement,{childList:!0,subtree:!0});
|
package/fig-lab.js
CHANGED
|
@@ -1226,7 +1226,6 @@ class PropskitGroup extends HTMLElement {
|
|
|
1226
1226
|
].join(",");
|
|
1227
1227
|
|
|
1228
1228
|
#header = null;
|
|
1229
|
-
#disclosure = null;
|
|
1230
1229
|
#chevron = null;
|
|
1231
1230
|
#resetTooltip = null;
|
|
1232
1231
|
#defaults = new WeakMap();
|
|
@@ -1249,7 +1248,8 @@ class PropskitGroup extends HTMLElement {
|
|
|
1249
1248
|
cancelAnimationFrame(this.#dirtyFrame);
|
|
1250
1249
|
this.#dirtyFrame = 0;
|
|
1251
1250
|
}
|
|
1252
|
-
this.#
|
|
1251
|
+
this.#header?.removeEventListener("click", this.#handleToggle);
|
|
1252
|
+
this.#header?.removeEventListener("keydown", this.#handleHeaderKeyDown);
|
|
1253
1253
|
const resetBtn = this.#resetTooltip?.querySelector("fig-button");
|
|
1254
1254
|
resetBtn?.removeEventListener("click", this.#handleReset);
|
|
1255
1255
|
}
|
|
@@ -1257,7 +1257,7 @@ class PropskitGroup extends HTMLElement {
|
|
|
1257
1257
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
1258
1258
|
if (oldValue === newValue) return;
|
|
1259
1259
|
if (name === "open") {
|
|
1260
|
-
this.#
|
|
1260
|
+
this.#header?.setAttribute("aria-expanded", String(this.open));
|
|
1261
1261
|
return;
|
|
1262
1262
|
}
|
|
1263
1263
|
if (name === "show-reset") {
|
|
@@ -1280,7 +1280,7 @@ class PropskitGroup extends HTMLElement {
|
|
|
1280
1280
|
} else {
|
|
1281
1281
|
this.setAttribute("open", "false");
|
|
1282
1282
|
}
|
|
1283
|
-
this.#
|
|
1283
|
+
this.#header?.setAttribute("aria-expanded", String(!!value));
|
|
1284
1284
|
if (was !== !!value) {
|
|
1285
1285
|
this.dispatchEvent(
|
|
1286
1286
|
new CustomEvent("openchange", {
|
|
@@ -1360,6 +1360,14 @@ class PropskitGroup extends HTMLElement {
|
|
|
1360
1360
|
this.open = !this.open;
|
|
1361
1361
|
};
|
|
1362
1362
|
|
|
1363
|
+
#handleHeaderKeyDown = (e) => {
|
|
1364
|
+
if (this.#isResetTarget(e.target)) return;
|
|
1365
|
+
if (e.key !== "Enter" && e.key !== " ") return;
|
|
1366
|
+
e.preventDefault();
|
|
1367
|
+
e.stopPropagation();
|
|
1368
|
+
this.open = !this.open;
|
|
1369
|
+
};
|
|
1370
|
+
|
|
1363
1371
|
#handleReset = (e) => {
|
|
1364
1372
|
e.preventDefault();
|
|
1365
1373
|
e.stopPropagation();
|
|
@@ -1552,24 +1560,30 @@ class PropskitGroup extends HTMLElement {
|
|
|
1552
1560
|
this.prepend(this.#header);
|
|
1553
1561
|
}
|
|
1554
1562
|
|
|
1555
|
-
let
|
|
1556
|
-
|
|
1563
|
+
let h3 = this.#header.querySelector(":scope > h3");
|
|
1564
|
+
const legacyDisclosure = this.#header.querySelector(
|
|
1565
|
+
":scope > fig-button.propskit-group-disclosure",
|
|
1557
1566
|
);
|
|
1558
|
-
if (!
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
const existingHeading = this.#header.querySelector(":scope > h3");
|
|
1563
|
-
if (existingHeading) disclosure.appendChild(existingHeading);
|
|
1564
|
-
this.#header.prepend(disclosure);
|
|
1567
|
+
if (!h3 && legacyDisclosure) {
|
|
1568
|
+
h3 = legacyDisclosure.querySelector(":scope > h3");
|
|
1569
|
+
if (h3) this.#header.insertBefore(h3, legacyDisclosure);
|
|
1570
|
+
legacyDisclosure.remove();
|
|
1565
1571
|
}
|
|
1566
|
-
this.#disclosure = disclosure;
|
|
1567
|
-
|
|
1568
|
-
let h3 = disclosure.querySelector("h3");
|
|
1569
1572
|
if (!h3) {
|
|
1570
1573
|
h3 = document.createElement("h3");
|
|
1571
|
-
|
|
1574
|
+
this.#header.prepend(h3);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
const disclosure = h3.querySelector(
|
|
1578
|
+
":scope > button.propskit-group-disclosure",
|
|
1579
|
+
);
|
|
1580
|
+
if (disclosure) {
|
|
1581
|
+
while (disclosure.firstChild) {
|
|
1582
|
+
h3.insertBefore(disclosure.firstChild, disclosure);
|
|
1583
|
+
}
|
|
1584
|
+
disclosure.remove();
|
|
1572
1585
|
}
|
|
1586
|
+
|
|
1573
1587
|
if (!h3.id) h3.id = figLabUniqueId("propskit-group");
|
|
1574
1588
|
if (this.#header.dataset.generated) {
|
|
1575
1589
|
// Preserve chevron while updating the title text node.
|
|
@@ -1594,17 +1608,17 @@ class PropskitGroup extends HTMLElement {
|
|
|
1594
1608
|
}
|
|
1595
1609
|
this.#chevron = h3.querySelector(".propskit-group-chevron");
|
|
1596
1610
|
this.#syncResetButton();
|
|
1597
|
-
this.#header.
|
|
1598
|
-
this.#header.
|
|
1599
|
-
this.#header.
|
|
1600
|
-
this.#
|
|
1601
|
-
this.#
|
|
1602
|
-
this.#
|
|
1603
|
-
this.#
|
|
1611
|
+
this.#header.setAttribute("role", "button");
|
|
1612
|
+
this.#header.setAttribute("tabindex", "0");
|
|
1613
|
+
this.#header.setAttribute("aria-expanded", String(this.open));
|
|
1614
|
+
this.#header.removeEventListener("click", this.#handleToggle);
|
|
1615
|
+
this.#header.addEventListener("click", this.#handleToggle);
|
|
1616
|
+
this.#header.removeEventListener("keydown", this.#handleHeaderKeyDown);
|
|
1617
|
+
this.#header.addEventListener("keydown", this.#handleHeaderKeyDown);
|
|
1604
1618
|
|
|
1605
1619
|
if (!this.hasAttribute("open")) {
|
|
1606
1620
|
this.setAttribute("open", "false");
|
|
1607
|
-
this.#
|
|
1621
|
+
this.#header.setAttribute("aria-expanded", "false");
|
|
1608
1622
|
}
|
|
1609
1623
|
}
|
|
1610
1624
|
}
|
|
@@ -5272,32 +5286,22 @@ class FigReorder extends HTMLElement {
|
|
|
5272
5286
|
|
|
5273
5287
|
static #DRAG_THRESHOLD = 6;
|
|
5274
5288
|
|
|
5275
|
-
static #
|
|
5276
|
-
"
|
|
5277
|
-
"
|
|
5278
|
-
"
|
|
5279
|
-
"
|
|
5280
|
-
"
|
|
5281
|
-
"label",
|
|
5282
|
-
"summary",
|
|
5283
|
-
"fig-button",
|
|
5284
|
-
"fig-dropdown",
|
|
5289
|
+
static #NESTED_DRAG_SELECTORS = [
|
|
5290
|
+
'[draggable]:not([draggable="false"])',
|
|
5291
|
+
'img:not([draggable="false"])',
|
|
5292
|
+
'a[href]:not([draggable="false"])',
|
|
5293
|
+
'input[type="range"]',
|
|
5294
|
+
"fig-handle",
|
|
5285
5295
|
"fig-slider",
|
|
5286
5296
|
"fig-input-number",
|
|
5287
|
-
"fig-input-
|
|
5288
|
-
"
|
|
5297
|
+
"fig-input-gradient",
|
|
5298
|
+
"fig-easing-curve",
|
|
5299
|
+
"fig-input-angle",
|
|
5300
|
+
"fig-input-joystick",
|
|
5301
|
+
"fig-canvas-control",
|
|
5289
5302
|
"propskit-number",
|
|
5290
|
-
"propskit-select",
|
|
5291
5303
|
"propskit-slider",
|
|
5292
|
-
"propskit-
|
|
5293
|
-
"propskit-text",
|
|
5294
|
-
"fig-checkbox",
|
|
5295
|
-
"fig-switch",
|
|
5296
|
-
"fig-combo-input",
|
|
5297
|
-
"fig-segmented-control",
|
|
5298
|
-
"fig-input-color",
|
|
5299
|
-
"fig-input-fill",
|
|
5300
|
-
'[contenteditable="true"]',
|
|
5304
|
+
"propskit-oscillator",
|
|
5301
5305
|
];
|
|
5302
5306
|
|
|
5303
5307
|
#childObserver = null;
|
|
@@ -5458,7 +5462,7 @@ class FigReorder extends HTMLElement {
|
|
|
5458
5462
|
if (event.button !== 0) return;
|
|
5459
5463
|
if (
|
|
5460
5464
|
!this.#handleSelector &&
|
|
5461
|
-
this.#
|
|
5465
|
+
this.#isNestedDragTarget(event.target, child)
|
|
5462
5466
|
) {
|
|
5463
5467
|
return;
|
|
5464
5468
|
}
|
|
@@ -5567,11 +5571,11 @@ class FigReorder extends HTMLElement {
|
|
|
5567
5571
|
});
|
|
5568
5572
|
}
|
|
5569
5573
|
|
|
5570
|
-
#
|
|
5574
|
+
#isNestedDragTarget(target, child) {
|
|
5571
5575
|
let node = target;
|
|
5572
5576
|
while (node && node !== child) {
|
|
5573
5577
|
if (node instanceof Element) {
|
|
5574
|
-
for (const selector of FigReorder.#
|
|
5578
|
+
for (const selector of FigReorder.#NESTED_DRAG_SELECTORS) {
|
|
5575
5579
|
if (node.matches(selector)) return true;
|
|
5576
5580
|
}
|
|
5577
5581
|
}
|
|
@@ -5588,7 +5592,6 @@ class FigReorder extends HTMLElement {
|
|
|
5588
5592
|
|
|
5589
5593
|
#startPendingDrag(event, item, target) {
|
|
5590
5594
|
this.#cancelDrag();
|
|
5591
|
-
FigReorder.#setDocumentDragging(true);
|
|
5592
5595
|
|
|
5593
5596
|
const state = {
|
|
5594
5597
|
item,
|
|
@@ -5618,6 +5621,7 @@ class FigReorder extends HTMLElement {
|
|
|
5618
5621
|
event.preventDefault();
|
|
5619
5622
|
event.stopPropagation();
|
|
5620
5623
|
item.classList.add("dragging");
|
|
5624
|
+
FigReorder.#setDocumentDragging(true);
|
|
5621
5625
|
try {
|
|
5622
5626
|
target.setPointerCapture(state.pointerId);
|
|
5623
5627
|
} catch {}
|
package/package.json
CHANGED