const MicroWeb={$:t=>document.querySelector(t),$$:t=>document.querySelectorAll(t),show:t=>t.style.display="block",hide:t=>t.style.display="none",toggle:t=>t.style.display="none"===t.style.display?"block":"none",text(t,e){if(void 0===e)return t.textContent;t.textContent=e},html(t,e){if(void 0===e)return t.innerHTML;t.innerHTML=e},val(t,e){if(void 0===e)return t.value;t.value=e},attr(t,e,r){if(void 0===r)return t.getAttribute(e);t.setAttribute(e,r)},addClass:(t,e)=>t.classList.add(e),removeClass:(t,e)=>t.classList.remove(e),hasClass:(t,e)=>t.classList.contains(e),replaceClass(t,e,r){t.classList.remove(e),t.classList.add(r)},on(t,e,r,i){"function"==typeof r?(i=r,t.addEventListener(e,i)):t.addEventListener(e,t=>{t.target.matches(r)&&i.call(t.target,t)})},ajax:{async get(t,e={}){try{let r=e.headers||{},i=await fetch(t,{headers:r});return await i.text()}catch(o){return console.error("GET failed:",o),null}},async post(t,e,r={}){try{let i=Object.assign({"Content-Type":"application/json"},r.headers||{}),o=await fetch(t,{method:"POST",headers:i,body:JSON.stringify(e)});return await o.text()}catch(a){return console.error("POST failed:",a),null}},async postForm(t,e){let r=new FormData(e);try{let i=await fetch(t,{method:"POST",body:r});return await i.text()}catch(o){return console.error("Form POST failed:",o),null}}},bind(t,e=""){Object.keys(t).forEach(r=>{let i=document.querySelectorAll(`[data-bind="${e}${r}"]`);i.forEach(e=>{e.textContent=t[r]})})},render:(t,e)=>t.replace(/\{\{(\w+)\}\}/g,(t,r)=>void 0!==e[r]?e[r]:""),chart:{createProgress(t,e,r=100,i={}){let o=i.width||"100%",a=i.height||"20px",l=i.color||"#007bff",n=i.bgColor||"#f0f0f0",s=e/r*100,d=`
                <div style="
                    width: ${o};
                    height: ${a};
                    background: ${n};
                    border-radius: 10px;
                    overflow: hidden;
                    margin: 5px 0;">
                    <div style="
                        width: ${s}%;
                        height: 100%;
                        background: ${l};
                        transition: width 0.3s;
                        border-radius: 10px;">
                    </div>
                </div>
                <small>${e} / ${r} (${s.toFixed(1)}%)</small>
            `;t.innerHTML=d},createBarChart(t,e,r={}){let i=Math.max(...e.values);r.width;let o=r.height||200,a=r.colors||["#007bff","#28a745","#ffc107","#dc3545",],l=`<div style="display: flex; align-items: flex-end; height: ${o}px; gap: 10px;">`;e.values.forEach((t,r)=>{let n=e.labels?e.labels[r]:`Item ${r+1}`,s=a[r%a.length];l+=`
                    <div style="text-align: center;">
                        <div style="
                            width: 40px;
                            height: ${t/i*(o-40)}px;
                            background: ${s};
                            border-radius: 5px 5px 0 0;
                            margin: 0 auto;">
                        </div>
                        <div style="font-size: 12px; margin-top: 5px;">
                            ${n}<br>
                            <strong>${t}</strong>
                        </div>
                    </div>
                `}),l+="</div>",t.innerHTML=l},createGauge(t,e,r=100,i={}){let o=i.size||150,a=i.color||"#007bff",l=`
                <div style="position: relative; width: ${o}px; height: ${o}px;
                    overflow: hidden; margin: 0 auto;">
                    <div style="
                        position: absolute;
                        width: ${o}px;
                        height: ${o}px;
                        border: ${o/10}px solid #f0f0f0;
                        border-radius: 50%;
                        border-bottom-color: transparent;
                        border-left-color: transparent;">
                    </div>
                    <div style="
                        position: absolute;
                        width: ${o}px;
                        height: ${o}px;
                        border: ${o/10}px solid ${a};
                        border-radius: 50%;
                        border-bottom-color: transparent;
                        border-left-color: transparent;
                        transform: rotate(${45+1.8*Math.min(e/r*100,100)}deg);
                        transition: transform 0.5s;">
                    </div>
                    <div style="
                        position: absolute;
                        width: 100%;
                        text-align: center;
                        top: ${o/2.5}px;
                        font-size: ${o/7}px;
                        font-weight: bold;">
                        ${e}${i.percent?"%":""}
                        <div style="font-size: ${o/10}px; color: #666;">
                            ${i.label||""}
                        </div>
                    </div>
                </div>
            `;t.innerHTML=l}},utils:{debounce(t,e){let r;return function i(...o){let a=()=>{clearTimeout(r),t(...o)};clearTimeout(r),r=setTimeout(a,e)}},formatBytes(t,e=2){if(0===t)return"0 Bytes";let r=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,r)).toFixed(e))+" "+["Bytes","KB","MB","GB"][r]},uuid:()=>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){let e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})}};window.mw=MicroWeb;