@adia-ai/web-components 0.7.10 → 0.7.11

package/dist/web-components.min.js

@@ -198,7 +198,7 @@ Correct shape for <chart-ui x="label" y="value">:
 </svg>`}P();var Sr=class extends w{static properties={value:{type:String,default:"",reflect:!0},matrix:{type:String,default:"",reflect:!0},size:{type:Number,default:200,reflect:!0},errorCorrection:{type:String,default:"M",reflect:!0,attribute:"error-correction"},margin:{type:Number,default:4,reflect:!0},color:{type:String,default:"",reflect:!0},background:{type:String,default:"",reflect:!0},label:{type:String,default:"QR code",reflect:!0}};static template=()=>null;#t="";#e(t){if(!t)return null;try{let e=JSON.parse(t);return!Array.isArray(e)||e.length===0||!Array.isArray(e[0])?null:e.map(i=>i.map(n=>n?1:0))}catch(e){return console.warn("[qr-code-ui] invalid [matrix] JSON:",e.message),null}}#i(){let t=this.#e(this.matrix);if(t)return this.removeAttribute("data-error"),t;if(!this.value)return this.removeAttribute("data-error"),null;try{let e=xb(this.value,{errorCorrection:this.errorCorrection||"M"});return this.removeAttribute("data-error"),e.matrix}catch(e){return this.setAttribute("data-error",""),console.warn(`[qr-code-ui] encode failed for value (${this.value?.length||0} chars at ECC=${this.errorCorrection}): ${e.message}. Lower ECC, shorten input, or supply a precomputed [matrix].`),null}}connected(){super.connected(),this.setAttribute("role","img"),this.hasAttribute("aria-label")||this.setAttribute("aria-label",this.label||"QR code")}render(){let t=`${this.value}|${this.matrix}|${this.size}|${this.errorCorrection}|${this.margin}|${this.color}|${this.background}`;if(t===this.#t&&this.querySelector("svg"))return;this.#t=t,this.label&&this.setAttribute("aria-label",this.label);let e=this.#i();if(!e){this.innerHTML="";return}let i=Sb(e,{cellSize:8,margin:Number.isFinite(this.margin)?this.margin:4,color:this.color||"#000000",background:this.background||"#ffffff"});this.innerHTML=i;let n=this.querySelector("svg");n&&Number.isFinite(this.size)&&(n.setAttribute("width",String(this.size)),n.setAttribute("height",String(this.size)))}};x("qr-code-ui",Sr);P();var wr=class extends w{static properties={page:{type:Number,default:1,reflect:!0},total:{type:Number,default:1,reflect:!0},siblings:{type:Number,default:1,reflect:!0},variant:{type:String,default:"default",reflect:!0},size:{type:String,default:"md",reflect:!0}};static requiredIcons=["caret-left","caret-right"];static template=()=>null;#t=null;#e=!1;connected(){this.#t||(this.#t=document.createElement("nav"),this.#t.setAttribute("slot","nav"),this.#t.setAttribute("aria-label","Pagination"),this.appendChild(this.#t)),this.#e||(this.#e=!0,this.#t.addEventListener("press",this.#a))}disconnected(){this.#t?.removeEventListener("press",this.#a),this.#t=null,this.#e=!1}render(){if(!this.#t)return;let t=Math.max(1,Math.min(this.page,this.total)),e=Math.max(1,this.total),i=Math.max(0,this.siblings),n=this.#i(t,e,i);this.reconcile(this.#t,n,r=>r.key,(r,o,a)=>a?(this.#r(a,r,t),a):this.#n(r,t))}#i(t,e,i){let n=[];n.push({key:"prev",type:"prev",value:t-1});let r=2*i+5;if(e<=r)for(let o=1;o<=e;o++)n.push({key:`page-${o}`,type:"page",value:o});else{let o=t<=i+3,a=t>=e-i-2;if(o){let l=r-2;for(let h=1;h<=l;h++)n.push({key:`page-${h}`,type:"page",value:h});n.push({key:"ellipsis-end",type:"ellipsis"}),n.push({key:`page-${e}`,type:"page",value:e})}else if(a){n.push({key:"page-1",type:"page",value:1}),n.push({key:"ellipsis-start",type:"ellipsis"});let l=e-r+3;for(let h=l;h<=e;h++)n.push({key:`page-${h}`,type:"page",value:h})}else{n.push({key:"page-1",type:"page",value:1}),n.push({key:"ellipsis-start",type:"ellipsis"});for(let l=t-i;l<=t+i;l++)n.push({key:`page-${l}`,type:"page",value:l});n.push({key:"ellipsis-end",type:"ellipsis"}),n.push({key:`page-${e}`,type:"page",value:e})}}return n.push({key:"next",type:"next",value:t+1}),n}#s(){return this.variant==="button"?"outline":"ghost"}#n(t,e){if(t.type==="ellipsis"){let n=document.createElement("span");return n.setAttribute("data-ellipsis",""),n.textContent="\u2026",n}let i=document.createElement("button-ui");return i.setAttribute("size",this.size),t.type==="prev"?(i.setAttribute("data-prev",""),i.setAttribute("icon","caret-left"),i.setAttribute("aria-label","Previous page")):t.type==="next"?(i.setAttribute("data-next",""),i.setAttribute("icon","caret-right"),i.setAttribute("aria-label","Next page")):(i.setAttribute("data-page",""),i.dataset.value=String(t.value),i.setAttribute("text",String(t.value)),i.setAttribute("aria-label",`Page ${t.value}`)),this.#r(i,t,e),i}#r(t,e,i){e.type!=="ellipsis"&&(t.setAttribute("size",this.size),e.type==="prev"?(t.setAttribute("variant",this.#s()),i<=1?(t.setAttribute("disabled",""),t.setAttribute("tabindex","-1")):(t.removeAttribute("disabled"),t.setAttribute("tabindex","0"))):e.type==="next"?(t.setAttribute("variant",this.#s()),i>=this.total?(t.setAttribute("disabled",""),t.setAttribute("tabindex","-1")):(t.removeAttribute("disabled"),t.setAttribute("tabindex","0"))):(t.dataset.value=String(e.value),t.setAttribute("text",String(e.value)),t.setAttribute("aria-label",`Page ${e.value}`),e.value===i?(t.setAttribute("variant","primary"),t.setAttribute("data-active",""),t.setAttribute("aria-current","page")):(t.setAttribute("variant",this.#s()),t.removeAttribute("data-active"),t.removeAttribute("aria-current"))))}#a=t=>{let e=t.target.closest("[data-prev], [data-next], [data-page]");if(!e||e.hasAttribute("disabled")||!this.#t.contains(e))return;let i;e.hasAttribute("data-prev")?i=this.page-1:e.hasAttribute("data-next")?i=this.page+1:e.hasAttribute("data-page")&&(i=Number(e.dataset.value)),!(i==null||i<1||i>this.total||i===this.page)&&(this.page=i,this.dispatchEvent(new CustomEvent("page-change",{bubbles:!0,detail:{page:this.page}})))}};x("pagination-ui",wr);P();var bR=new Set(["json","html","javascript","js","css","markdown","md","yaml","yml"]),yR={js:"javascript",md:"markdown",yml:"yaml"};function Kg(s){if(!s)return"";let t=String(s).toLowerCase();return yR[t]??t}var oo=class s extends w{static formAssociated=!0;static properties={language:{type:String,default:"",reflect:!0},inline:{type:Boolean,default:!1,reflect:!0},text:{type:String,default:"",reflect:!0},lineNumbers:{type:Boolean,default:!1,reflect:!0,attribute:"line-numbers"},editable:{type:Boolean,default:!1,reflect:!0},bare:{type:Boolean,default:!1,reflect:!0},placeholder:{type:String,default:"",reflect:!0},name:{type:String,default:"",reflect:!0},required:{type:Boolean,default:!1,reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},readonly:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;#t=null;#e=null;#i=null;#s=0;#n=!1;#r=null;#a="";#o=null;#l=()=>this.#y();connected(){this.#s+=1,!this.inline&&!this.querySelector(":scope > pre")&&this.#c(),this.#t=this.querySelector(':scope > header [slot="copy"]'),this.#t&&this.#t.addEventListener("click",this.#l);let t=Kg(this.language),e=this.hasAttribute("data-line-states")||t==="diff";!this.inline&&!e&&(bR.has(t)||this.editable)&&this.#u()}disconnected(){this.#s+=1,this.#e!=null&&(clearTimeout(this.#e),this.#e=null),this.#t&&(this.#t.removeEventListener("click",this.#l),this.#t=null),this.#i&&(this.#i.destroy(),this.#i=null)}#c(){let t=this.querySelector(":scope > template"),e=this.text?this.text.trim():t?s.#h(t.innerHTML):(this.textContent||"").trim();if(this.textContent="",!this.bare){let l=document.createElement("header"),h=document.createElement("span");h.setAttribute("slot","label"),h.textContent=this.language||"code",l.appendChild(h);let c=document.createElement("div");c.setAttribute("role","button"),c.setAttribute("tabindex","0"),c.setAttribute("slot","copy"),c.textContent="Copy",l.appendChild(c),this.appendChild(l)}let i=document.createElement("pre"),n=document.createElement("code"),r=Kg(this.language),o=this.getAttribute("data-line-states");if(o!=null||r==="diff"){n.setAttribute("data-line-state-mode",""),this.lineNumbers&&n.setAttribute("data-line-numbers","");let l=o?.split(",").map(c=>c.trim())??null;e.split(`
 `).forEach((c,u)=>{let d="unchanged";if(l&&l[u])d=l[u];else if(r==="diff"){let m=c.charAt(0);m==="+"?d="added":m==="-"&&(d="removed")}let f=document.createElement("span");if(f.setAttribute("data-line-state",d),this.lineNumbers){let m=document.createElement("span");m.setAttribute("data-line-num",""),m.textContent=String(u+1),f.appendChild(m)}let p=document.createElement("span");p.setAttribute("data-line-body",""),p.textContent=c,f.appendChild(p),n.appendChild(f)})}else n.textContent=e;i.appendChild(n),this.appendChild(i)}static#h(t){let e=t.replace(/^\n+|\n+$/g,"");if(!e)return"";let i=e.split(`
 `),n=i.filter(o=>o.trim().length>0).map(o=>o.match(/^[ \t]*/)[0].length),r=n.length?Math.min(...n):0;return r>0?i.map(o=>o.slice(r)).join(`
-`):e}async#u(){if(this.#n||this.#i)return;let t=this.#s,e=Kg(this.language);this.#n=!0;try{let i=await Promise.resolve().then(()=>(Hg(),Gg)),n=null;try{n=(await i.importWithTimeout(i.languages[e],`lang-${e}`))?.extension??null}catch(r){this.dispatchEvent(new CustomEvent("language-load-error",{bubbles:!0,detail:{phase:"language",language:e,error:r}}))}if(t!==this.#s||!this.isConnected)return;this.#d(i,n,e)}catch(i){this.dispatchEvent(new CustomEvent("language-load-error",{bubbles:!0,detail:{phase:"core",error:i}})),console.warn("[code-ui] CodeMirror failed to load; staying on static fallback.",i)}finally{this.#n=!1}}#d(t,e,i){let{EditorState:n,EditorView:r,Compartment:o,lineNumbers:a,placeholder:l,syntaxHighlighting:h,history:c,historyKeymap:u,defaultKeymap:d,indentWithTab:f,keymap:p,adiaBaseTheme:m,adiaHighlightStyle:O,lintGutter:g,jsonLinter:y}=t,v=this.querySelector(":scope > pre"),S=v?v.querySelector("code")?.textContent??"":"",k=this.text||S||"";this.#a=k;let $=document.createElement("div");$.setAttribute("data-cm-mount",""),v?v.replaceWith($):this.appendChild($);let A=[m,h(O)];this.editable&&A.push(c(),p.of([{key:"Mod-s",run:E=>(this.#O(E),!0)},...d,...u,f]),r.updateListener.of(E=>{if(!E.docChanged)return;let L=E.state.doc.toString();this.#m(L),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:L}}))}),r.domEventHandlers({focus:(E,L)=>(this.#r=L.state.doc.toString(),!1),blur:(E,L)=>{let Q=L.state.doc.toString();return this.#r!==null&&Q!==this.#r&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Q}})),this.#r=null,!1}})),this.#o=new o,A.push(this.#o.of(this.#f(r,n))),e&&A.push(e),this.lineNumbers&&A.push(a()),this.placeholder&&A.push(l(this.placeholder)),this.editable&&i==="json"&&A.push(y,g()),this.#i=new r({parent:$,state:n.create({doc:k,extensions:A})}),this.editable&&this.#m(k)}#f(t,e){return this.editable&&!this.disabled&&!this.readonly?[]:[t.editable.of(!1),e.readOnly.of(!0)]}async#p(){if(!this.#i||!this.#o)return;let t=await Promise.resolve().then(()=>(Hg(),Gg));this.#i.dispatch({effects:this.#o.reconfigure(this.#f(t.EditorView,t.EditorState))})}get form(){return this.internals.form}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}#m(t){this.editable&&(t=t??this.value??"",this.internals.setFormValue(t),this.#g(t))}#g(t){return t=t??"",this.required&&!t.trim()?(this.internals.setValidity({valueMissing:!0},this.getAttribute("data-msg-required")||"This field is required.",this),this.setAttribute("aria-invalid","true"),!1):(this.internals.setValidity({}),this.removeAttribute("aria-invalid"),!0)}formResetCallback(){this.#i?this.#i.dispatch({changes:{from:0,to:this.#i.state.doc.length,insert:this.#a}}):this.text=this.#a}formDisabledCallback(t){this.disabled=t}formStateRestoreCallback(t,e){typeof t=="string"&&(this.#i?this.#i.dispatch({changes:{from:0,to:this.#i.state.doc.length,insert:t}}):this.text=t)}#O(t){this.dispatchEvent(new CustomEvent("save",{bubbles:!0,cancelable:!0,detail:{value:t.state.doc.toString()}}))}get value(){return this.#i?this.#i.state.doc.toString():this.querySelector(":scope > pre > code")?.textContent??this.text??""}set value(t){this.text=String(t??"")}#y(){let t=this.#i?this.#i.state.doc.toString():this.querySelector(":scope > pre > code")?.textContent??"";t&&navigator.clipboard.writeText(t).then(()=>{let e=this.querySelector(':scope > header [slot="copy"]');if(!e)return;let i=e.textContent;e.textContent="Copied!",this.#e!=null&&clearTimeout(this.#e),this.#e=setTimeout(()=>{this.#e=null,e.textContent=i},1500)})}render(){let t=this.querySelector(':scope > header [slot="label"]');if(t&&this.language&&(t.textContent=this.language),this.#p(),!this.inline&&this.text!=="")if(this.#i){if(this.editable&&this.#i.hasFocus)return;let e=this.#i.state.doc.toString();e!==this.text&&this.#i.dispatch({changes:{from:0,to:e.length,insert:this.text}})}else{let e=this.querySelector(":scope > pre > code");e&&e.textContent!==this.text&&(e.textContent=this.text)}}};x("code-ui",oo);P();function a1(s){let t=s.replace(/=""(?=[\s/>])/g,"").replace(/\t/g,"  ").split(`
+`):e}async#u(){if(this.#n||this.#i)return;let t=this.#s,e=Kg(this.language);this.#n=!0;try{let i=await Promise.resolve().then(()=>(Hg(),Gg)),n=null;try{n=(await i.importWithTimeout(i.languages[e],`lang-${e}`))?.extension??null}catch(r){this.dispatchEvent(new CustomEvent("language-load-error",{bubbles:!0,detail:{phase:"language",language:e,error:r}}))}if(t!==this.#s||!this.isConnected)return;this.#d(i,n,e)}catch(i){this.dispatchEvent(new CustomEvent("language-load-error",{bubbles:!0,detail:{phase:"core",error:i}})),console.warn("[code-ui] CodeMirror failed to load; staying on static fallback.",i)}finally{this.#n=!1}}#d(t,e,i){let{EditorState:n,EditorView:r,Compartment:o,lineNumbers:a,placeholder:l,syntaxHighlighting:h,history:c,historyKeymap:u,defaultKeymap:d,indentWithTab:f,keymap:p,adiaBaseTheme:m,adiaHighlightStyle:O,lintGutter:g,jsonLinter:y}=t,v=this.querySelector(":scope > pre"),S=v?v.querySelector("code")?.textContent??"":"",k=this.text||S||"";this.#a=k;let $=document.createElement("div");$.setAttribute("data-cm-mount",""),v?v.replaceWith($):this.appendChild($);let A=[m,h(O)];this.editable&&A.push(c(),p.of([{key:"Mod-s",run:E=>(this.#O(E),!0)},...d,...u,f]),r.updateListener.of(E=>{if(!E.docChanged)return;let L=E.state.doc.toString();this.#m(L),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:L}}))}),r.domEventHandlers({focus:(E,L)=>(this.#r=L.state.doc.toString(),!1),blur:(E,L)=>{let Q=L.state.doc.toString();return this.#r!==null&&Q!==this.#r&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Q}})),this.#r=null,!1}})),this.#o=new o,A.push(this.#o.of(this.#f(r,n))),e&&A.push(e),this.lineNumbers&&A.push(a()),this.placeholder&&A.push(l(this.placeholder)),this.editable&&i==="json"&&A.push(y,g()),this.#i=new r({parent:$,state:n.create({doc:k,extensions:A})}),this.editable&&this.#m(k)}#f(t,e){return this.editable&&!this.disabled&&!this.readonly?[]:[t.editable.of(!1),e.readOnly.of(!0)]}async#p(){if(!this.#i||!this.#o)return;let t=await Promise.resolve().then(()=>(Hg(),Gg));this.#i.dispatch({effects:this.#o.reconfigure(this.#f(t.EditorView,t.EditorState))})}get form(){return this.internals.form}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}#m(t){this.editable&&(t=t??this.value??"",this.internals.setFormValue(t),this.#g(t))}#g(t){return t=t??"",this.required&&!t.trim()?(this.internals.setValidity({valueMissing:!0},this.getAttribute("data-msg-required")||"This field is required.",this),this.setAttribute("aria-invalid","true"),!1):(this.internals.setValidity({}),this.removeAttribute("aria-invalid"),!0)}formResetCallback(){this.#i?this.#i.dispatch({changes:{from:0,to:this.#i.state.doc.length,insert:this.#a}}):this.text=this.#a}formDisabledCallback(t){this.disabled=t}formStateRestoreCallback(t,e){typeof t=="string"&&(this.#i?this.#i.dispatch({changes:{from:0,to:this.#i.state.doc.length,insert:t}}):this.text=t)}#O(t){this.dispatchEvent(new CustomEvent("save",{bubbles:!0,cancelable:!0,detail:{value:t.state.doc.toString()}}))}get value(){return this.#i?this.#i.state.doc.toString():this.querySelector(":scope > pre > code")?.textContent??this.text??""}set value(t){this.text=String(t??"")}#y(){let t=this.#i?this.#i.state.doc.toString():this.querySelector(":scope > pre > code")?.textContent??"";t&&navigator.clipboard.writeText(t).then(()=>{let e=this.querySelector(':scope > header [slot="copy"]');if(!e)return;let i=e.textContent;e.textContent="Copied!",this.#e!=null&&clearTimeout(this.#e),this.#e=setTimeout(()=>{this.#e=null,e.textContent=i},1500)})}render(){let t=this.querySelector(':scope > header [slot="label"]');if(t&&this.language&&(t.textContent=this.language),this.#p(),!this.inline&&this.text!=="")if(this.#i){if(this.editable&&this.#i.hasFocus)return;let e=this.#i.state.doc.toString();e!==this.text&&this.#i.dispatch({changes:{from:0,to:e.length,insert:this.text}})}else{let e=this.querySelector(":scope > pre > code");e&&e.textContent!==this.text&&(e.textContent=this.text)}}};x("code-ui",oo);P();function a1(s){let t=s.replace(/=""(?=[\s/>])/g,"").replace(/="([^"]*&quot;[^"]*)"/g,(o,a)=>{let l=a.replace(/&quot;/g,'"').replace(/&amp;/g,"&");return l.includes("'")?o:`='${l}'`}).replace(/\t/g,"  ").split(`
 `);for(;t.length&&t[0].trim()==="";)t.shift();for(;t.length&&t[t.length-1].trim()==="";)t.pop();let e=o=>o.match(/^ */)[0].length,i=t.slice(1).filter(o=>o.trim()),n=(i.length?i:t.filter(o=>o.trim())).map(e),r=n.length?Math.min(...n):0;return t.map(o=>o.slice(Math.min(r,e(o)))).join(`
 `)}var ao=class extends w{static properties={layout:{type:String,default:"",reflect:!0},codeFirst:{type:Boolean,default:!1,reflect:!0,attribute:"code-first"},language:{type:String,default:"html",reflect:!0},rows:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;#t=null;#e(t,e,i){let n=document.createElement("div");n.setAttribute("data-preview-render",""),n.innerHTML=t;let r=document.createElement("div");r.setAttribute("data-preview-code","");let o=document.createElement("code-ui");return o.setAttribute("language",e),o.textContent=t.replace(/\s+data-chunk(?:-[a-z]+)?="[^"]*"/g,""),r.appendChild(o),i?[r,n]:[n,r]}connected(){if(this.querySelector(":scope > [data-preview-render], :scope > [data-preview-row]"))return;!this.hasAttribute("rows")&&!this.hasAttribute("layout")&&this.setAttribute("layout","split");let t=this.getAttribute("language")||"html",e=this.hasAttribute("code-first");if(this.hasAttribute("rows")){let n=[...this.children],r=[];for(let o of n){let a=o.getAttribute("data-preview-label");a!=null&&o.removeAttribute("data-preview-label");let l=o.hasAttribute("data-preview-unwrap");l&&o.removeAttribute("data-preview-unwrap");let h=a1(l?o.innerHTML:o.outerHTML),c=document.createElement("div");c.setAttribute("data-preview-row","");let u=this.#e(h,t,e);a&&u.find(f=>f.hasAttribute("data-preview-render"))?.setAttribute("data-preview-label",a),c.append(...u),r.push(c)}if(r.length){this.replaceChildren(...r),this.#n();return}}let i=a1(this.innerHTML);this.replaceChildren(...this.#e(i,t,e)),this.#n()}#i=()=>{if(this.hasAttribute("rows"))for(let t of this.querySelectorAll(":scope > [data-preview-row]")){let e=t.querySelector(":scope > [data-preview-render]");e&&e.scrollWidth>e.clientWidth+4&&t.setAttribute("data-stack","")}else if(this.getAttribute("layout")==="split"){let t=this.querySelector(":scope > [data-preview-render]");t&&t.scrollWidth>t.clientWidth+4&&this.setAttribute("layout","stack")}};#s=()=>requestAnimationFrame(this.#i);#n(){this.#s(),typeof ResizeObserver<"u"&&(this.#t=new ResizeObserver(this.#s),this.#t.observe(this))}disconnected(){this.#t?.disconnect()}};x("preview-ui",ao);P();var lo=class extends w{static properties={divider:{type:Boolean,default:!1,reflect:!0},spacing:{type:String,default:"md",reflect:!0},selectable:{type:Boolean,default:!1,reflect:!0},selectedKey:{type:String,default:"",reflect:!0,attribute:"selected-key"}};static template=()=>null;#t=!1;connected(){this.setAttribute("role","list"),this.#t||(this.#t=!0,this.addEventListener("click",this.#n),this.addEventListener("keydown",this.#r))}disconnected(){this.removeEventListener("click",this.#n),this.removeEventListener("keydown",this.#r),this.#t=!1}render(){if(!this.selectable){for(let n of this.#e())n.removeAttribute("aria-selected"),n.removeAttribute("tabindex");return}let t=this.selectedKey||"",e=this.#e(),i=null;for(let n of e){let r=this.#i(n),o=r&&r===t;n.setAttribute("aria-selected",o?"true":"false"),n.setAttribute("tabindex",o?"0":"-1"),o&&(i=n)}!i&&e.length&&e[0].setAttribute("tabindex","0")}#e(){return[...this.children].filter(t=>t.tagName==="LIST-ITEM-UI"||t.getAttribute?.("role")==="listitem")}#i(t){return t.id||t.getAttribute("data-key")||""}#s(t,{focus:e=!1}={}){if(!this.selectable||!t)return;let i=this.selectedKey||"";t!==i&&(this.selectedKey=t,this.dispatchEvent(new CustomEvent("selection-change",{detail:{key:t,previousKey:i},bubbles:!0})),e&&[...this.#e()].find(r=>this.#i(r)===t)?.focus?.())}#n=t=>{if(!this.selectable)return;let e=t.target.closest?.('[role="listitem"]');if(!e||e.parentElement!==this)return;let i=this.#i(e);i&&this.#s(i)};#r=t=>{if(!this.selectable)return;let e=this.#e();if(!e.length)return;let i=document.activeElement,n=e.indexOf(i);if(n<0)return;let r=n;switch(t.key){case"ArrowDown":r=Math.min(e.length-1,n+1);break;case"ArrowUp":r=Math.max(0,n-1);break;case"Home":r=0;break;case"End":r=e.length-1;break;case"Enter":case" ":{t.preventDefault();let o=this.#i(e[n]);o&&this.#s(o);return}default:return}r!==n&&(t.preventDefault(),e[r]?.focus?.())}},ho=class extends w{static properties={icon:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},description:{type:String,default:"",reflect:!0}};static template=()=>null;connected(){this.setAttribute("role","listitem"),this.#s()}#t(t){for(let e of this.children)if(e.matches(t))return e;return null}#e(t){return t.dataset.listStamped="1",t}#i(t){return t?.dataset?.listStamped==="1"}#s(){if(!this.#t('[slot="content"]')){if(this.icon){let t=this.#t('[slot="icon"]')||this.#t("icon-ui");t||(t=this.#e(document.createElement("icon-ui")),t.setAttribute("slot","icon"),this.prepend(t)),t.setAttribute("name",this.icon)}if(this.text){let t=this.#t('[slot="text"]');t||(t=this.#e(document.createElement("span")),t.setAttribute("slot","text"),this.appendChild(t)),this.#i(t)&&(t.textContent=this.text)}if(this.description){let t=this.#t('[slot="description"]');t||(t=this.#e(document.createElement("span")),t.setAttribute("slot","description"),this.appendChild(t)),this.#i(t)&&(t.textContent=this.description)}}}render(){let t=this.#t('[slot="icon"]');if(this.icon)if(t)this.#i(t)&&t.setAttribute("name",this.icon);else{let n=this.#e(document.createElement("icon-ui"));n.setAttribute("slot","icon"),n.setAttribute("name",this.icon),this.prepend(n)}else this.#i(t)&&t.remove();let e=this.#t('[slot="text"]');if(this.text)if(e)this.#i(e)&&(e.textContent=this.text);else{let n=this.#e(document.createElement("span"));n.setAttribute("slot","text"),n.textContent=this.text,this.appendChild(n)}else this.#i(e)&&e.remove();let i=this.#t('[slot="description"]');if(this.description)if(i)this.#i(i)&&(i.textContent=this.description);else{let n=this.#e(document.createElement("span"));n.setAttribute("slot","description"),n.textContent=this.description,this.appendChild(n)}else this.#i(i)&&i.remove()}};x("list-ui",lo),x("list-item-ui",ho);P();var co=class extends w{static properties={items:{type:Array,default:[],reflect:!1},itemSize:{type:Number,default:0,reflect:!0,attribute:"item-size"},itemSizeRem:{type:Number,default:0,reflect:!0,attribute:"item-size-rem"},estimatedSize:{type:Number,default:48,reflect:!0,attribute:"estimated-size"},overscan:{type:Number,default:3,reflect:!0},direction:{type:String,default:"vertical",reflect:!0},pinBottom:{type:Boolean,default:!1,reflect:!0,attribute:"pin-bottom"},startIndex:{type:Number,default:0,reflect:!1,attribute:"start-index"},loading:{type:Boolean,default:!1,reflect:!0}};static parts={phantom:"<div data-phantom></div>",window:"<div data-window></div>",sentinelTop:'<div data-sentinel="top"></div>',sentinelBottom:'<div data-sentinel="bottom"></div>'};static template=()=>null;#t=null;#e=null;#i=null;#s=null;#n=null;#r=(t,e)=>t&&typeof t=="object"&&"id"in t?t.id:e;#a=new Map;#o=new Map;#l=1e5;#c=-1;#h=-1;#u=0;#d=!0;#f=null;#p=null;#m=()=>{this.#E();let t=this.#A();this.#u=t,this.#d=this.#T()};#g=t=>{let e=t.target.closest?.("[data-row]");if(!e||e.parentElement!==this.#e)return;let i=Number(e.dataset.index);if(!Number.isInteger(i)||i<0)return;let n=this.items?.[i];n!=null&&this.dispatchEvent(new CustomEvent("item-click",{detail:{item:n,index:i},bubbles:!0}))};#O=t=>{if(t.target!==this)return;let e=this.#w()||this.estimatedSize||48,i=this.#k(),n=0;switch(t.key){case"ArrowDown":n=+e;break;case"ArrowUp":n=-e;break;case"PageDown":n=+i;break;case"PageUp":n=-i;break;case" ":n=+i;break;case"Home":t.preventDefault(),this.scrollToTop();return;case"End":t.preventDefault(),this.scrollToBottom();return;default:return}t.preventDefault();let r=this.#A();this.#$(r+n)};#y=t=>{for(let e of t){if(!e.isIntersecting)continue;let i=e.target?.dataset?.sentinel;if(i==="top"){let n=this.#c>=0?this.#c:0;this.dispatchEvent(new CustomEvent("scroll-start",{detail:{index:n},bubbles:!0}))}else if(i==="bottom"){let n=this.items||[],r=this.#h>=0?this.#h:n.length-1;this.dispatchEvent(new CustomEvent("scroll-end",{detail:{index:r},bubbles:!0}))}}};#b=t=>{if(this.itemSize>0)return;let e=!1;for(let i of t){let n=i.target;if(!n||n.parentElement!==this.#e)continue;let r=Number(n.dataset.index);if(!Number.isInteger(r))continue;let o=this.direction==="horizontal"?i.contentRect.width:i.contentRect.height,a=Math.max(1,Math.round(o));this.#o.get(r)!==a&&(this.#o.set(r,a),this.dispatchEvent(new CustomEvent("measure",{detail:{index:r,height:a},bubbles:!0})),e=!0)}e&&(this.#Z(),this.#M(),this.#E())};connected(){this.setAttribute("role",this.getAttribute("role")||"list"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.#t=this.ensure("phantom"),this.#e=this.ensure("window"),this.#i=this.ensure("sentinelTop"),this.#s=this.ensure("sentinelBottom"),typeof IntersectionObserver<"u"&&(this.#p=new IntersectionObserver(this.#y,{root:this,rootMargin:"0px",threshold:0}),this.#p.observe(this.#i),this.#p.observe(this.#s)),typeof ResizeObserver<"u"&&(this.#f=new ResizeObserver(this.#b)),this.addEventListener("scroll",this.#m,{passive:!0}),this.addEventListener("click",this.#g),this.addEventListener("keydown",this.#O),this.startIndex>0&&queueMicrotask(()=>this.scrollToIndex(this.startIndex))}disconnected(){this.removeEventListener("scroll",this.#m),this.removeEventListener("click",this.#g),this.removeEventListener("keydown",this.#O),this.#p?.disconnect(),this.#p=null,this.#f?.disconnect(),this.#f=null,this.#a.clear()}render(){if(!this.#e)return;let t=Array.isArray(this.items)?this.items:[],e=this.pinBottom&&(this.#d||this.#T());t.length===0?this.setAttribute("empty",""):this.removeAttribute("empty"),this.setAttribute("aria-rowcount",String(t.length)),this.loading?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.#M(),this.#E(),e&&this.scrollToBottom(),this.#d=this.#T()}set renderRow(t){this.#n=typeof t=="function"?t:null,this.#a.clear(),this.#E()}get renderRow(){return this.#n}set keyFn(t){this.#r=typeof t=="function"?t:((e,i)=>i),this.#a.clear(),this.#E()}get keyFn(){return this.#r}scrollToIndex(t,{behavior:e="auto",align:i="start"}={}){let n=this.items||[];if(!n.length)return;let r=Math.max(0,Math.min(n.length-1,t|0)),o=this.#x(r),a=this.#k(),l=this.#v(r),h=o;i==="center"?h=o-a/2+l/2:i==="end"&&(h=o-a+l),this.#$(Math.max(0,h),e)}scrollToTop(){this.#$(0)}scrollToBottom(){let t=this.#S();this.#$(Math.max(0,t))}getVisibleRange(){return{startIndex:this.#c,endIndex:this.#h}}invalidateMeasurements(t=0){if(t<=0)this.#o.clear();else for(let e of[...this.#o.keys()])e>=t&&this.#o.delete(e);this.#M(),this.#E()}#w(){if(this.itemSize>0)return this.itemSize;if(this.itemSizeRem>0){let t=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return this.itemSizeRem*t}return 0}#v(t){let e=this.#w();if(e>0)return e;let i=this.#o.get(t);return i??(this.estimatedSize||48)}#x(t){let e=this.#w();if(e>0)return t*e;let i=0;for(let n=0;n<t;n++)i+=this.#v(n);return i}#S(){let e=(Array.isArray(this.items)?this.items:[]).length;if(e===0)return 0;let i=this.#w();if(i>0)return e*i;let n=0,r=this.estimatedSize||48;for(let o=0;o<e;o++)n+=this.#o.get(o)??r;return n}#k(){return this.direction==="horizontal"?this.clientWidth||0:this.clientHeight||0}#A(){return this.direction==="horizontal"?this.scrollLeft:this.scrollTop}#$(t,e="auto"){this.direction==="horizontal"?this.scrollTo({left:t,behavior:e}):this.scrollTo({top:t,behavior:e})}#T(){let t=this.#A(),e=this.#k(),i=this.#S();return t+e>=i-1}#M(){if(!this.#t)return;let t=this.#S();this.direction==="horizontal"?(this.#t.style.width=`${t}px`,this.#t.style.height="1px"):(this.#t.style.height=`${t}px`,this.#t.style.width="1px")}#C(){let e=(Array.isArray(this.items)?this.items:[]).length;if(e===0)return{start:0,end:0};let i=this.#k(),n=this.#A(),r=this.#w(),o,a;if(r>0)o=Math.floor(n/r),a=Math.ceil((n+i)/r);else{let h=this.estimatedSize||48,c=0;o=0;for(let d=0;d<e;d++){let f=this.#o.get(d)??h;if(c+f>n){o=d;break}c+=f}a=o;let u=0;for(let d=o;d<e;d++){let f=this.#o.get(d)??h;if(u+=f,a=d+1,u>=i)break}}let l=Math.max(0,this.overscan|0);return o=Math.max(0,o-l),a=Math.min(e,a+l),{start:o,end:a}}#E(){if(!this.#e)return;let t=Array.isArray(this.items)?this.items:[],e=t.length,{start:i,end:n}=this.#C(),r=this.#x(i);this.direction==="horizontal"?this.#e.style.transform=`translateX(${r}px)`:this.#e.style.transform=`translateY(${r}px)`,this.loading?this.#P(n-i):this.#R(t,i,n),(i!==this.#c||n!==this.#h)&&(this.#c=i,this.#h=n,this.dispatchEvent(new CustomEvent("range-change",{detail:{startIndex:i,endIndex:n,items:t.slice(i,n)},bubbles:!0})))}#R(t,e,i){if(!this.#e)return;let n=new Set,r=this.#n??this.#Q();for(let l=e;l<i;l++){let h=t[l],c=this.#r(h,l);n.add(c);let u=this.#a.get(c);u?(u.dataset.index=String(l),u.setAttribute("aria-rowindex",String(l+1))):(u=this.#L(h,l,r),this.#a.set(c,u))}let o=[];for(let l=e;l<i;l++){let h=t[l],c=this.#r(h,l),u=this.#a.get(c);u&&o.push(u)}for(let[l,h]of this.#a)n.has(l)||(this.#f?.unobserve(h),h.parentElement===this.#e&&h.remove(),this.#a.delete(l));let a=this.#e.firstChild;for(let l of o)l!==a&&this.#e.insertBefore(l,a),a=l.nextSibling;for(;a;){let l=a.nextSibling;a.remove(),a=l}if(this.itemSize<=0&&this.itemSizeRem<=0&&this.#f)for(let l of o)this.#f.observe(l)}#P(t){if(!this.#e)return;this.#e.replaceChildren(),this.#a.clear();let e=Math.max(1,Math.min(20,t|0||5)),i=this.querySelector(':scope > template[slot="loading"]');for(let n=0;n<e;n++){let r=document.createElement("div");if(r.setAttribute("data-row",""),r.setAttribute("data-skeleton-row",""),r.dataset.index=String(n),i?.content)r.appendChild(i.content.cloneNode(!0));else{let o=document.createElement("skeleton-ui");r.appendChild(o)}this.#e.appendChild(r)}}#L(t,e,i){let n=document.createElement("div");n.setAttribute("data-row",""),n.setAttribute("role","listitem"),n.dataset.index=String(e),n.setAttribute("aria-rowindex",String(e+1));let r=null;if(typeof i=="function")try{r=i(t,e)}catch(o){console.warn("[list-window-ui] render() threw:",o)}if(r instanceof Node)n.appendChild(r);else if(r!=null)n.textContent=String(r);else if(t!=null&&typeof t=="object"&&"text"in t){let o=document.createElement("list-item-ui");o.setAttribute("text",String(t.text)),"description"in t&&o.setAttribute("description",String(t.description)),"icon"in t&&o.setAttribute("icon",String(t.icon)),n.appendChild(o)}else t!=null&&(n.textContent=String(t));return n}#Q(){let t=this.querySelector(":scope > template:not([slot])");if(!t)return null;this.#I==null&&(this.#I=t.innerHTML);let e=this.#I;return(i,n)=>{let r=e.replace(/\$\{item\.([a-zA-Z0-9_]+)\}/g,(a,l)=>{let h=i&&typeof i=="object"?i[l]:"";return h==null?"":vR(String(h))}),o=document.createElement("template");return o.innerHTML=r,o.content.cloneNode(!0)}}#I=null;#Z(){if(this.#o.size<=this.#l)return;let t=this.#o.size-this.#l,e=0;for(let i of this.#o.keys())if(this.#o.delete(i),++e>=t)break}};function vR(s){return s.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}x("list-window-ui",co);P();var uo=class extends w{static properties={open:{type:Boolean,default:!1,reflect:!0},placement:{type:String,default:"bottom-start",reflect:!0},gap:{type:Number,default:4,reflect:!0}};static template=()=>null;#t=null;#e=null;#i=!1;#s=null;#n=null;connected(){this.#i||(this.#i=!0,this.addEventListener("click",this.#d),this.addEventListener("keydown",this.#f))}render(){this.open?this.#a():this.#o()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}#r(){if(this.#e)return this.#e;let t=document.createElement("div");return t.setAttribute("data-menu-popover",""),t.setAttribute("popover","manual"),t.setAttribute("role","menu"),t.addEventListener("toggle",this.#y),t.addEventListener("click",this.#p),t.addEventListener("keydown",this.#m),this.appendChild(t),this.#e=t,t}#a(){let t=this.querySelector('[slot="trigger"]');if(!t)return;let e=this.#r(),i=this.querySelectorAll("menu-item-ui, menu-divider-ui");for(let n of i)e.contains(n)||e.appendChild(n);e.matches(":popover-open")||e.showPopover?.(),this.#t?.(),this.#t=lt(t,e,{placement:this.placement,gap:this.gap}),this.#u&&(this.#u=!1,this.#n=requestAnimationFrame(()=>{this.#n=null,this.#c(0)})),this.#s=requestAnimationFrame(()=>{this.#s=null,document.addEventListener("pointerdown",this.#g),document.addEventListener("keydown",this.#O,!0)})}#o(){this.#t?.(),this.#t=null;let t=this.#e;if(t){t.matches(":popover-open")&&t.hidePopover?.();let e=t.querySelectorAll("menu-item-ui, menu-divider-ui");for(let i of e)this.insertBefore(i,t)}this.#s!=null&&(cancelAnimationFrame(this.#s),this.#s=null),this.#n!=null&&(cancelAnimationFrame(this.#n),this.#n=null),document.removeEventListener("pointerdown",this.#g),document.removeEventListener("keydown",this.#O,!0)}#l(){return Array.from(this.#e?.querySelectorAll("menu-item-ui")??[]).filter(t=>!t.disabled)}#c(t){let e=this.#l();if(!e.length)return;let i=(t+e.length)%e.length,n=e[i];n.setAttribute("tabindex","-1"),n.focus({preventScroll:!0})}#h(){return this.#l().indexOf(document.activeElement)}#u=!1;#d=t=>{let e=this.querySelector('[slot="trigger"]');e&&(t.target===e||e.contains(t.target))&&(this.#u=!1,this.open=!this.open)};#f=t=>{let e=this.querySelector('[slot="trigger"]');!e||!(t.target===e||e.contains(t.target))||(t.key==="ArrowDown"||t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.#u=!0,this.open=!0)};#p=t=>{let e=t.target.closest("menu-item-ui");!e||e.disabled||(this.dispatchEvent(new CustomEvent("action",{bubbles:!0,detail:{value:e.value,text:e.text}})),this.open=!1,this.querySelector('[slot="trigger"]')?.focus?.({preventScroll:!0}))};#m=t=>{let e=this.#l();if(!e.length)return;let i=this.#h();switch(t.key){case"ArrowDown":t.preventDefault(),this.#c(i+1);break;case"ArrowUp":t.preventDefault(),this.#c(i-1);break;case"Home":t.preventDefault(),this.#c(0);break;case"End":t.preventDefault(),this.#c(e.length-1);break;case"Enter":case" ":{t.preventDefault(),(e[i]??e[0])?.click();break}}};#g=t=>{this.open&&(this.contains(t.target)||(this.open=!1))};#O=t=>{t.key==="Escape"&&this.open?(t.stopPropagation(),t.preventDefault(),this.open=!1,this.querySelector('[slot="trigger"]')?.focus?.({preventScroll:!0})):t.key==="Tab"&&this.open&&(this.open=!1)};#y=t=>{let e=t.newState==="open";e!==this.open&&(this.open=e)};disconnected(){this.#o(),this.#e&&(this.#e.removeEventListener("toggle",this.#y),this.#e.removeEventListener("click",this.#p),this.#e.removeEventListener("keydown",this.#m)),this.#e=null,this.#i=!1}},fo=class extends w{static properties={icon:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},value:{type:String,default:"",reflect:!0},variant:{type:String,default:"default",reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;connected(){this.closest('[role="menu"], [role="menubar"]')?(this.setAttribute("role","menuitem"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.#s(),this.#n()}#t(t){return t.dataset.menuItemStamped="1",t}#e(t){return t?.dataset?.menuItemStamped==="1"}#i(t){for(let e of this.children)if(e.matches(t))return e;return null}#s(){if(!this.#i('[slot="text"]')){if(this.icon&&!this.#i('[slot="icon"]')){let t=this.#t(document.createElement("icon-ui"));t.setAttribute("slot","icon"),t.setAttribute("name",this.icon),this.appendChild(t)}if(this.text){let t=this.#t(document.createElement("span"));t.setAttribute("slot","text"),t.textContent=this.text,this.appendChild(t)}}}#n(){this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}render(){let t=this.#i('[slot="icon"]');if(this.icon)if(t)this.#e(t)&&t.setAttribute("name",this.icon);else{let i=this.#t(document.createElement("icon-ui"));i.setAttribute("slot","icon"),i.setAttribute("name",this.icon),this.prepend(i)}else this.#e(t)&&t.remove();let e=this.#i('[slot="text"]');this.#e(e)&&(e.textContent=this.text),this.#n()}},po=class extends w{static properties={};static template=()=>null;connected(){this.setAttribute("role","separator")}};x("menu-ui",uo),x("menu-item-ui",fo),x("menu-divider-ui",po);P();var l1=500,mo=class extends w{static properties={for:{type:String,default:"",reflect:!0},open:{type:Boolean,default:!1,reflect:!0},longPressMs:{type:Number,default:l1,reflect:!1,attribute:"long-press-ms"}};static template=()=>null;#t=null;#e=null;#i=null;#s=[];#n=null;#r=null;#a=null;#o=null;connected(){super.connected(),this.#l()}disconnected(){super.disconnected(),this.#c(),this.#w(),this.#t?.remove(),this.#t=null}openAt(t,e,i=null){if(i??=this.#s[0]??null,!!i){if(this.#r=i,t==null||e==null){let n=i.getBoundingClientRect();t=n.left+n.width/2,e=n.top+n.height/2}this.#y(t,e)}}close(t="manual"){this.#b(t)}#l(){this.#s=this.#h();for(let t of this.#s)t.addEventListener("contextmenu",this.#u),t.addEventListener("touchstart",this.#d,{passive:!0}),t.addEventListener("touchend",this.#f),t.addEventListener("touchcancel",this.#f),t.addEventListener("keydown",this.#p)}#c(){for(let t of this.#s)t.removeEventListener("contextmenu",this.#u),t.removeEventListener("touchstart",this.#d),t.removeEventListener("touchend",this.#f),t.removeEventListener("touchcancel",this.#f),t.removeEventListener("keydown",this.#p);this.#s=[]}#h(){if(this.for)try{return[...document.querySelectorAll(this.for)]}catch(t){return console.warn(`[context-menu-ui] invalid [for] selector: ${this.for}`,t),[]}for(let t of this.children){let e=t.tagName.toLowerCase();if(e!=="menu-item-ui"&&e!=="menu-divider-ui")return[t]}return[]}#u=t=>{t.defaultPrevented||this.#m()&&(t.preventDefault(),this.#r=t.currentTarget,this.#y(t.clientX,t.clientY))};#d=t=>{if(!this.#m())return;let e=t.touches[0];e&&(this.#n=setTimeout(()=>{this.#r=t.currentTarget,this.#y(e.clientX,e.clientY)},this.longPressMs??l1))};#f=()=>{this.#n&&clearTimeout(this.#n),this.#n=null};#p=t=>{if(t.shiftKey&&t.key==="F10"||t.key==="ContextMenu"){if(!this.#m())return;t.preventDefault(),this.#r=t.currentTarget,this.openAt(null,null,t.currentTarget)}};#m(){return[...this.children].some(t=>t.tagName.toLowerCase()==="menu-item-ui")}#g(){if(this.#t)return this.#t;let t=document.createElement("div");return t.setAttribute("data-context-menu-surface",""),t.setAttribute("popover","manual"),t.setAttribute("role","menu"),t.setAttribute("aria-label",this.getAttribute("aria-label")||"Context menu"),t.tabIndex=-1,t.style.outline="none",t.addEventListener("click",this.#S),document.body.appendChild(t),this.#t=t,t}#O(t,e){if(!this.#e){let i=document.createElement("div");i.setAttribute("data-context-menu-anchor",""),i.style.cssText="position:fixed;width:1px;height:1px;pointer-events:none;opacity:0;",document.body.appendChild(i),this.#e=i}return this.#e.style.left=`${t}px`,this.#e.style.top=`${e}px`,this.#e}#y(t,e){let i=this.#g();i.replaceChildren();for(let o of[...this.children]){let a=o.tagName.toLowerCase();(a==="menu-item-ui"||a==="menu-divider-ui")&&i.appendChild(o.cloneNode(!0))}try{i.showPopover()}catch{}let n=this.#O(t,e);this.#i?.(),this.#i=lt(n,i,{placement:"bottom-start",gap:0}),this.open=!0,this.#v();let r=i.querySelector("menu-item-ui:not([disabled])");queueMicrotask(()=>r?.focus?.()),this.dispatchEvent(new CustomEvent("context-menu-open",{bubbles:!0,detail:{target:this.#r,x:t,y:e}}))}#b(t="manual"){if(this.open){this.open=!1,this.#w(),this.dispatchEvent(new CustomEvent("context-menu-close",{bubbles:!0,detail:{reason:t}}));try{this.#r?.focus?.()}catch{}}}#w(){this.#x(),this.#i?.(),this.#i=null;try{this.#t?.hidePopover()}catch{}this.#e&&(this.#e.remove(),this.#e=null)}#v(){this.#a=t=>{this.#t?.contains(t.target)||this.#b("outside")},this.#o=t=>{t.key==="Escape"&&(t.stopPropagation(),this.#b("escape"))},requestAnimationFrame(()=>{document.addEventListener("pointerdown",this.#a),document.addEventListener("keydown",this.#o)})}#x(){this.#a&&document.removeEventListener("pointerdown",this.#a),this.#o&&document.removeEventListener("keydown",this.#o),this.#a=null,this.#o=null}#S=t=>{let e=t.target.closest("menu-item-ui");if(!e||e.hasAttribute("disabled"))return;let i=e.getAttribute("value")||"",n=e.getAttribute("text")||e.textContent.trim();this.dispatchEvent(new CustomEvent("context-menu-select",{bubbles:!0,detail:{value:i,text:n}})),this.#b("select")}};x("context-menu-ui",mo);P();var go=class extends w{static properties={};static template=()=>null};x("visually-hidden-ui",go);P();var Oo=class extends w{static properties={target:{type:String,default:"#main",reflect:!0},text:{type:String,default:"Skip to main content",reflect:!0}};static template=({target:t,text:e})=>Dt`<a href="${t}" data-skip-link>${e}</a>`;connected(){super.connected(),this.addEventListener("click",this.#t)}disconnected(){super.disconnected(),this.removeEventListener("click",this.#t)}#t=t=>{if(!t.target.closest("[data-skip-link]"))return;let i=this.target.replace(/^#/,""),n=document.getElementById(i);n&&queueMicrotask(()=>{n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1"),n.focus({preventScroll:!1})})}};x("skip-nav-ui",Oo);P();var bo=class extends w{static properties={variant:{type:String,default:"warning",reflect:!0}};static template=()=>null;connected(){super.connected(),this.hasAttribute("role")||this.setAttribute("role","mark")}};x("mark-ui",bo);var yo=class extends Z{static properties={...Z.properties,placeholder:{type:String,default:"Click to edit",reflect:!0},editing:{type:Boolean,default:!1,reflect:!0},commit:{type:String,default:"blur",reflect:!0}};static template=()=>null;#t="";#e=!1;#i=!1;connected(){super.connected(),this.hasAttribute("role")||this.setAttribute("role","textbox"),!this.hasAttribute("tabindex")&&!this.disabled&&this.setAttribute("tabindex","0"),this.value&&this.textContent.trim()===""?this.textContent=this.value:!this.value&&this.textContent.trim()&&(this.value=this.textContent.trim(),this.syncValue()),this.#e||(this.#e=!0,this.addEventListener("click",this.#s),this.addEventListener("keydown",this.#n),this.addEventListener("focus",this.#r),this.addEventListener("blur",this.#a))}disconnected(){super.disconnected(),this.removeEventListener("click",this.#s),this.removeEventListener("keydown",this.#n),this.removeEventListener("focus",this.#r),this.removeEventListener("blur",this.#a),this.#e=!1}startEdit(){this.editing||this.disabled||this.readonly||(this.#t=this.value||"",this.editing=!0,this.setAttribute("contenteditable","plaintext-only"),this.dispatchEvent(new CustomEvent("edit-start",{bubbles:!0})),queueMicrotask(()=>{this.focus(),this.#o()}))}commitEdit(){if(!this.editing)return;let t=(this.textContent||"").trim(),e=this.#t;this.editing=!1,this.removeAttribute("contenteditable"),this.textContent!==t&&(this.textContent=t),t!==e&&(this.value=t,this.syncValue(t),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:t,oldValue:e}}))),this.dispatchEvent(new CustomEvent("edit-end",{bubbles:!0,detail:{committed:!0}}))}cancelEdit(){this.editing&&(this.editing=!1,this.removeAttribute("contenteditable"),this.textContent=this.#t,this.dispatchEvent(new CustomEvent("cancel",{bubbles:!0})),this.dispatchEvent(new CustomEvent("edit-end",{bubbles:!0,detail:{committed:!1}})))}#s=t=>{this.disabled||this.readonly||this.editing||(t.preventDefault(),this.startEdit())};#n=t=>{if(this.editing)t.key==="Enter"?(t.preventDefault(),this.#i=!0,this.commitEdit(),this.blur()):t.key==="Escape"&&(t.preventDefault(),this.#i=!0,this.cancelEdit(),this.blur());else if(t.key==="Enter"||t.key===" "){if(this.disabled||this.readonly)return;t.preventDefault(),this.startEdit()}};#r=()=>{};#a=()=>{if(this.editing){if(this.#i){this.#i=!1;return}this.commit==="blur"?this.commitEdit():this.commit==="enter"&&this.cancelEdit()}};#o(){let t=document.createRange();t.selectNodeContents(this);let e=window.getSelection();e&&(e.removeAllRanges(),e.addRange(t))}};x("inline-edit-ui",yo);P();var vo=class extends w{static properties={active:{type:Boolean,default:!1,reflect:!0},step:{type:Number,default:0,reflect:!1},autoStart:{type:Boolean,default:!1,reflect:!0,attribute:"auto-start"},storageKey:{type:String,default:"",reflect:!0,attribute:"storage-key"}};static template=()=>null;#t=null;#e=null;#i=null;#s=null;#n=null;#r=null;connected(){super.connected(),this.autoStart&&!this.#o()&&requestAnimationFrame(()=>{this.isConnected&&this.autoStart&&this.start()})}disconnected(){super.disconnected(),this.#h()}start(){if(!this.active){if(!this.#a.length){console.warn("[tour-ui] start() called with no <tour-step> children \u2014 nothing to render.");return}this.step=0,this.active=!0,this.#c(),this.#u(),this.dispatchEvent(new CustomEvent("tour-start",{bubbles:!0,detail:{step:0}}))}}next(){if(!this.active)return;let t=this.#a.length;if(this.step>=t-1){this.finish();return}let e=this.step;this.step=e+1,this.#u(),this.dispatchEvent(new CustomEvent("tour-step-change",{bubbles:!0,detail:{from:e,to:this.step,totalSteps:t}}))}previous(){if(!this.active||this.step<=0)return;let t=this.step;this.step=t-1,this.#u(),this.dispatchEvent(new CustomEvent("tour-step-change",{bubbles:!0,detail:{from:t,to:this.step,totalSteps:this.#a.length}}))}skip(){if(!this.active)return;let t=this.#a.length,e=this.step;this.#l(),this.active=!1,this.#h(),this.dispatchEvent(new CustomEvent("tour-skip",{bubbles:!0,detail:{step:e,totalSteps:t}}))}finish(){if(!this.active)return;let t=this.#a.length;this.#l(),this.active=!1,this.#h(),this.dispatchEvent(new CustomEvent("tour-finish",{bubbles:!0,detail:{totalSteps:t}}))}get#a(){return[...this.querySelectorAll(":scope > tour-step-ui")]}#o(){if(!this.storageKey)return!1;try{return localStorage.getItem(this.storageKey)==="done"}catch{return!1}}#l(){if(this.storageKey)try{localStorage.setItem(this.storageKey,"done")}catch{}}#c(){if(!this.#t){let t=document.createElement("div");t.setAttribute("data-tour-spotlight",""),t.setAttribute("aria-hidden","true"),document.body.appendChild(t),this.#t=t}if(!this.#e){let t=document.createElement("div");t.setAttribute("data-tour-popover",""),t.setAttribute("popover","manual"),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","false"),t.tabIndex=-1,t.style.outline="none",t.addEventListener("click",this.#p),document.body.appendChild(t),this.#e=t}this.#s=()=>this.#f(),this.#n=()=>this.#f(),window.addEventListener("resize",this.#s),window.addEventListener("scroll",this.#n,!0),this.#r=t=>{this.active&&(t.key==="Escape"?(t.preventDefault(),this.skip()):t.key==="ArrowRight"?(t.preventDefault(),this.next()):t.key==="ArrowLeft"&&(t.preventDefault(),this.previous()))},document.addEventListener("keydown",this.#r)}#h(){this.#i?.(),this.#i=null,this.#s&&window.removeEventListener("resize",this.#s),this.#n&&window.removeEventListener("scroll",this.#n,!0),this.#r&&document.removeEventListener("keydown",this.#r),this.#s=this.#n=this.#r=null;try{this.#e?.hidePopover?.()}catch{}this.#e?.removeEventListener("click",this.#p),this.#e?.remove(),this.#e=null,this.#t?.remove(),this.#t=null}#u(){let t=this.#a[this.step];if(!t)return;let e=this.#a.length,i=this.step===e-1,n=this.step===0,r=t.getAttribute("title")||"",o=t.getAttribute("placement")||"bottom",a=t.getAttribute("target")||"",l=a?document.querySelector(a):null;this.#d=l,this.#f();let h=`${this.step+1} of ${e}`,c=t.innerHTML;this.#e.innerHTML=`
       <div data-tour-header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/verse.css

@@ -50,7 +50,7 @@
     /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
        clamps so they resolve verse's min/max (base clamps compute at :root). ── */
     --a-radius-min: 0.25rem; /* 4px */
-    --a-radius-max: 0.75rem;    /* 16px */
+    --a-radius-max: 0.75rem;    /* 12px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));

package/traits/resizable/resizable.js

@@ -1,7 +1,22 @@
 import { defineTrait } from '../define.js';
 
-const EDGE_SIZE = 8;
-const EDGES = ['top', 'right', 'bottom', 'left'];
+const EDGE = 8;    // edge hit-zone thickness
+const CORNER = 14; // corner hit-zone (square, sits on top of the edges it overlaps)
+
+// Edges resize one axis; corners resize both (x/y at once). `dw`/`dh` are the sign
+// applied to the pointer delta (dx/dy): +1 grows from this side, -1 grows from the
+// opposite (anchored) side, 0 leaves that axis untouched. Corners are listed LAST so
+// they're appended after the edges and win the hit-test where they overlap.
+const HANDLES = [
+  { name: 'top',          dw: 0,  dh: -1, cursor: 'ns-resize',   geo: { top: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'right',        dw: 1,  dh: 0,  cursor: 'ew-resize',   geo: { top: '0', right: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'bottom',       dw: 0,  dh: 1,  cursor: 'ns-resize',   geo: { bottom: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'left',         dw: -1, dh: 0,  cursor: 'ew-resize',   geo: { top: '0', left: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'top-left',     dw: -1, dh: -1, cursor: 'nwse-resize', geo: { top: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'top-right',    dw: 1,  dh: -1, cursor: 'nesw-resize', geo: { top: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-right', dw: 1,  dh: 1,  cursor: 'nwse-resize', geo: { bottom: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-left',  dw: -1, dh: 1,  cursor: 'nesw-resize', geo: { bottom: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+];
 
 export const resizable = defineTrait({
   name: 'resizable',
@@ -12,70 +27,68 @@ export const resizable = defineTrait({
   config: [],
   setup({ host }) {
     let resizing = false;
-    let activeEdge = null;
+    let active = null;
     let startX = 0;
     let startY = 0;
     let startWidth = 0;
     let startHeight = 0;
-    let startLeft = 0;
-    let startTop = 0;
+    let centerX = 0;
+    let centerY = 0;
+    let symmetric = false;
     const handles = [];
 
-    // Ensure host is positioned
-    const pos = getComputedStyle(host).position;
-    if (pos === 'static') {
+    // Ensure host is positioned so the absolute hit-zones anchor to it.
+    if (getComputedStyle(host).position === 'static') {
       host.style.position = 'relative';
     }
 
-    for (const edge of EDGES) {
+    for (const h of HANDLES) {
       const handle = document.createElement('div');
-      handle.dataset.resizableHandle = edge;
-      Object.assign(handle.style, {
-        position: 'absolute',
-        zIndex: '9999',
-        ...(edge === 'top' && { top: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'bottom' && { bottom: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'left' && { top: '0', bottom: '0', left: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-        ...(edge === 'right' && { top: '0', bottom: '0', right: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-      });
+      handle.dataset.resizableHandle = h.name;
+      Object.assign(handle.style, { position: 'absolute', zIndex: '9999', cursor: h.cursor, ...h.geo });
 
       handle.addEventListener('pointerdown', (e) => {
         e.stopPropagation();
         resizing = true;
-        activeEdge = edge;
+        active = h.name;
         startX = e.clientX;
         startY = e.clientY;
         const rect = host.getBoundingClientRect();
         startWidth = rect.width;
         startHeight = rect.height;
-        startLeft = rect.left;
-        startTop = rect.top;
+        centerX = rect.left + rect.width / 2;
+        centerY = rect.top + rect.height / 2;
+        // A transform-positioned host re-centers itself as it resizes (e.g.
+        // translate(-50%,-50%) centering), so resize SYMMETRICALLY from the center
+        // and the dragged edge/corner stays under the cursor. A static/anchored host
+        // instead grows from the opposite (fixed) edge.
+        symmetric = getComputedStyle(host).transform !== 'none';
 
         handle.setPointerCapture(e.pointerId);
         host.setAttribute('data-resizable-resizing', '');
-        host.setAttribute('data-resizable-edge', edge);
+        host.setAttribute('data-resizable-edge', h.name);
       });
 
       handle.addEventListener('pointermove', (e) => {
-        if (!resizing || activeEdge !== edge) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-
-        if (edge === 'right') {
-          host.style.width = `${Math.max(0, startWidth + dx)}px`;
-        } else if (edge === 'left') {
-          host.style.width = `${Math.max(0, startWidth - dx)}px`;
-        } else if (edge === 'bottom') {
-          host.style.height = `${Math.max(0, startHeight + dy)}px`;
-        } else if (edge === 'top') {
-          host.style.height = `${Math.max(0, startHeight - dy)}px`;
+        if (!resizing || active !== h.name) return;
+        if (symmetric) {
+          // Dragged edge/corner tracks the cursor; the host grows from its center
+          // (both sides) so the re-centering transform keeps it in place.
+          if (h.dw) host.style.width = `${Math.max(0, 2 * h.dw * (e.clientX - centerX))}px`;
+          if (h.dh) host.style.height = `${Math.max(0, 2 * h.dh * (e.clientY - centerY))}px`;
+        } else {
+          // Anchored: the opposite edge stays fixed; the dragged edge grows from it.
+          const dx = e.clientX - startX;
+          const dy = e.clientY - startY;
+          if (h.dw) host.style.width = `${Math.max(0, startWidth + h.dw * dx)}px`;
+          if (h.dh) host.style.height = `${Math.max(0, startHeight + h.dh * dy)}px`;
         }
       });
 
       handle.addEventListener('pointerup', () => {
-        if (!resizing || activeEdge !== edge) return;
+        if (!resizing || active !== h.name) return;
         resizing = false;
-        activeEdge = null;
+        active = null;
         host.removeAttribute('data-resizable-resizing');
         host.removeAttribute('data-resizable-edge');
 

package/traits/resizable/resizable.test.js

@@ -17,4 +17,23 @@ describe('resizable', () => {
     expect(host.hasAttribute('data-resizable-resizing')).toBe(false);
     expect(host.hasAttribute('data-resizable-edge')).toBe(false);
   });
+
+  it('creates 8 hit-zones — 4 edges + 4 corners (resize in x, y, and x/y)', () => {
+    const host = mountHost();
+    connectTrait(resizable, host);
+    const names = [...host.querySelectorAll('[data-resizable-handle]')]
+      .map((el) => el.dataset.resizableHandle);
+    expect(names).toHaveLength(8);
+    expect(names).toEqual(expect.arrayContaining([
+      'top', 'right', 'bottom', 'left',
+      'top-left', 'top-right', 'bottom-right', 'bottom-left',
+    ]));
+  });
+
+  it('disconnect removes all hit-zones', () => {
+    const host = mountHost();
+    const inst = connectTrait(resizable, host);
+    inst.disconnect(host);
+    expect(host.querySelectorAll('[data-resizable-handle]')).toHaveLength(0);
+  });
 });