onebox/dist_serve/bundle.js

var wW=Object.create,bW=Object.freeze,No=Object.defineProperty;var MW=Object.getOwnPropertyDescriptor;var Gkt=Object.getOwnPropertyNames;var Ykt=Object.getPrototypeOf,Zkt=Object.prototype.hasOwnProperty;var kW=(t,e)=>(e=Symbol[t])?e:Symbol.for("Symbol."+t),Nl=t=>{throw TypeError(t)};var zW=(t,e,a)=>e in t?No(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a;var vW=(t,e)=>No(t,"name",{value:e,configurable:!0}),H8=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(e,a)=>(typeof require<"u"?require:e)[a]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var v=(t,e)=>()=>(t&&(e=t(t=0)),e);var ut=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Ye=(t,e)=>{for(var a in e)No(t,a,{get:e[a],enumerable:!0})},Xkt=(t,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Gkt(e))!Zkt.call(t,r)&&r!==a&&No(t,r,{get:()=>e[r],enumerable:!(i=MW(e,r))||i.enumerable});return t};var o2=(t,e,a)=>(a=t!=null?wW(Ykt(t)):{},Xkt(e||!t||!t.__esModule?No(a,"default",{value:t,enumerable:!0}):a,t));var E2=t=>[,,,wW(t?.[kW("metadata")]??null)],SW=["class","method","getter","setter","accessor","field","value","get","set"],x3=t=>t!==void 0&&typeof t!="function"?Nl("Function expected"):t,Kkt=(t,e,a,i,r)=>({kind:SW[t],name:e,metadata:i,addInitializer:n=>a._?Nl("Already initialized"):r.push(x3(n||null))}),Qkt=(t,e)=>zW(e,kW("metadata"),t[3]),Qe=(t,e,a,i)=>{for(var r=0,n=t[e>>1],s=n&&n.length;r<s;r++)e&1?n[r].call(a):i=n[r].call(a,i);return i},$t=(t,e,a,i,r,n)=>{var s,o,u,c,d,l=e&7,f=!!(e&8),b=!!(e&16),y=l>3?t.length+1:l?f?1:2:0,g=SW[l+5],h=l>3&&(t[y-1]=[]),x=t[y]||(t[y]=[]),M=l&&(!b&&!f&&(r=r.prototype),l<5&&(l>3||!b)&&MW(l<4?r:{get[a](){return yW(this,n)},set[a](N){return xW(this,n,N)}},a));l?b&&l<4&&vW(n,(l>2?"set ":l>1?"get ":"")+a):vW(r,a);for(var S=i.length-1;S>=0;S--)c=Kkt(l,a,u={},t[3],x),l&&(c.static=f,c.private=b,d=c.access={has:b?N=>Jkt(r,N):N=>a in N},l^3&&(d.get=b?N=>(l^1?yW:ezt)(N,r,l^4?n:M.get):N=>N[a]),l>2&&(d.set=b?(N,_)=>xW(N,r,_,l^4?n:M.set):(N,_)=>N[a]=_)),o=(0,i[S])(l?l<4?b?n:M[g]:l>4?void 0:{get:M.get,set:M.set}:r,c),u._=1,l^4||o===void 0?x3(o)&&(l>4?h.unshift(o):l?b?n=o:M[g]=o:r=o):typeof o!="object"||o===null?Nl("Object expected"):(x3(s=o.get)&&(M.get=s),x3(s=o.set)&&(M.set=s),x3(s=o.init)&&h.unshift(s));return l||Qkt(t,r),M&&No(r,a,M),b?l^4?n:M:r},P2=(t,e,a)=>zW(t,typeof e!="symbol"?e+"":e,a),lM=(t,e,a)=>e.has(t)||Nl("Cannot "+a),Jkt=(t,e)=>Object(e)!==e?Nl('Cannot use the "in" operator on this value'):t.has(e),yW=(t,e,a)=>(lM(t,e,"read from private field"),a?a.call(t):e.get(t)),d1=(t,e,a)=>e.has(t)?Nl("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,a),xW=(t,e,a,i)=>(lM(t,e,"write to private field"),i?i.call(t,a):e.set(t,a),a),ezt=(t,e,a)=>(lM(t,e,"access private method"),a);var Rl=(t,e)=>bW(No(t,"raw",{value:bW(e||t.slice())}));var q8,w3,cM,CW,Fl,Ht,X,V8,M3,dM=v(()=>{q8=globalThis,w3=q8.ShadowRoot&&(q8.ShadyCSS===void 0||q8.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,cM=Symbol(),CW=new WeakMap,Fl=class{constructor(e,a,i){if(this._$cssResult$=!0,i!==cM)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=a}get styleSheet(){let e=this.o,a=this.t;if(w3&&e===void 0){let i=a!==void 0&&a.length===1;i&&(e=CW.get(a)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&CW.set(a,e))}return e}toString(){return this.cssText}},Ht=t=>new Fl(typeof t=="string"?t:t+"",void 0,cM),X=(t,...e)=>{let a=t.length===1?t[0]:e.reduce(((i,r,n)=>i+(s=>{if(s._$cssResult$===!0)return s.cssText;if(typeof s=="number")return s;throw Error("Value passed to 'css' function must be a 'css' function result: "+s+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+t[n+1]),t[0]);return new Fl(a,t,cM)},V8=(t,e)=>{if(w3)t.adoptedStyleSheets=e.map((a=>a instanceof CSSStyleSheet?a:a.styleSheet));else for(let a of e){let i=document.cr
\f\r]`,T3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,DW=/-->/g,AW=/>/g,Fo=RegExp(`>|${mM}(?:([^\\s"'>=/]+)(${mM}*=${mM}*(?:[^ 	
\f\r"'\`<>=]|("|')|))|$)`,"g"),EW=/'/g,PW=/"/g,IW=/^(?:script|style|textarea|title)$/i,gM=t=>(e,...a)=>({_$litType$:t,strings:e,values:a}),w=gM(1),bM=gM(2),vM=gM(3),b1=Symbol.for("lit-noChange"),C1=Symbol.for("lit-nothing"),NW=new WeakMap,Oo=Ro.createTreeWalker(Ro,129);FW=(t,e)=>{let a=t.length-1,i=[],r,n=e===2?"<svg>":e===3?"<math>":"",s=T3;for(let o=0;o<a;o++){let u=t[o],c,d,l=-1,f=0;for(;f<u.length&&(s.lastIndex=f,d=s.exec(u),d!==null);)f=s.lastIndex,s===T3?d[1]==="!--"?s=DW:d[1]!==void 0?s=AW:d[2]!==void 0?(IW.test(d[2])&&(r=RegExp("</"+d[2],"g")),s=Fo):d[3]!==void 0&&(s=Fo):s===Fo?d[0]===">"?(s=r??T3,l=-1):d[1]===void 0?l=-2:(l=s.lastIndex-d[2].length,c=d[1],s=d[3]===void 0?Fo:d[3]==='"'?PW:EW):s===PW||s===EW?s=Fo:s===DW||s===AW?s=T3:(s=Fo,r=void 0);let b=s===Fo&&t[o+1].startsWith("/>")?" ":"";n+=s===T3?u+czt:l>=0?(i.push(c),u.slice(0,l)+uM+u.slice(l)+ss+b):u+ss+(l===-2?o:b)}return[RW(t,n+(t[a]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),i]},L3=class t{constructor({strings:e,_$litType$:a},i){let r;this.parts=[];let n=0,s=0,o=e.length-1,u=this.parts,[c,d]=FW(e,a);if(this.el=t.createElement(c,i),Oo.currentNode=this.el.content,a===2||a===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(r=Oo.nextNode())!==null&&u.length<o;){if(r.nodeType===1){if(r.hasAttributes())for(let l of r.getAttributeNames())if(l.endsWith(uM)){let f=d[s++],b=r.getAttribute(l).split(ss),y=/([.?@])?(.*)/.exec(f);u.push({type:1,index:n,name:y[2],strings:b,ctor:y[1]==="."?G8:y[1]==="?"?Y8:y[1]==="@"?Z8:Ho}),r.removeAttribute(l)}else l.startsWith(ss)&&(u.push({type:6,index:n}),r.removeAttribute(l));if(IW.test(r.tagName)){let l=r.textContent.split(ss),f=l.length-1;if(f>0){r.textContent=U8?U8.emptyScript:"";for(let b=0;b<f;b++)r.append(l[b],C3()),Oo.nextNode(),u.push({type:2,index:++n});r.append(l[f],C3())}}}else if(r.nodeType===8)if(r.data===hM)u.push({type:2,index:n});else{let l=-1;for(;(l=r.data.indexOf(ss,l+1))!==-1;)u.push({type:7,index:n}),l+=ss.length-1}n++}}static createElement(e,a){let i=Ro.createElement("template");return i.innerHTML=e,i}};W8=class{constructor(e,a){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=a}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:a},parts:i}=this._$AD,r=(e?.creationScope??Ro).importNode(a,!0);Oo.currentNode=r;let n=Oo.nextNode(),s=0,o=0,u=i[0];for(;u!==void 0;){if(s===u.index){let c;u.type===2?c=new Bl(n,n.nextSibling,this,e):u.type===1?c=new u.ctor(n,u.name,u.strings,this,e):u.type===6&&(c=new X8(n,this,e)),this._$AV.push(c),u=i[++o]}s!==u?.index&&(n=Oo.nextNode(),s++)}return Oo.currentNode=Ro,r}p(e){let a=0;for(let i of this._$AV)i!==void 0&&(i.strings!==void 0?(i._$AI(e,i,a),a+=i.strings.length-2):i._$AI(e[a])),a++}},Bl=class t{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,a,i,r){this.type=2,this._$AH=C1,this._$AN=void 0,this._$AA=e,this._$AB=a,this._$AM=i,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,a=this._$AM;return a!==void 0&&e?.nodeType===11&&(e=a.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,a=this){e=Bo(this,e,a),_3(e)?e===C1||e==null||e===""?(this._$AH!==C1&&this._$AR(),this._$AH=C1):e!==this._$AH&&e!==b1&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):$W(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==C1&&_3(this._$AH)?this._$AA.nextSibling.data=e:this.T(Ro.createTextNode(e)),this._$AH=e}$(e){let{values:a,_$litType$:i}=e,r=typeof i=="number"?this._$AC(e):(i.el===void 0&&(i.el=L3.createElement(RW(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(a);else{let n=new W8(r,this),s=n.u(this.options);n.p(a),this.T(s),this._$AH=n}}_$AC(e){let a=NW.get(e.strings);return a===void 0&&NW.set(e.strings,a=new L3(e)),a}k(e){fM(this._$AH)||(this._$AH=[],this._$AR());let a=this._$AH,i,r=0;for(let n of e)r===a.length?a.push(i=new t(this.O(C3()),this.O(C3()),this,this.options)):i=a[r],i._$AI(n),r++;r<a.le
`+a.map(function(i,r){return r+1+") "+i.toString()}).join(`
  `):"",this.name="UnsubscriptionError",this.errors=a}})});function Ei(t,e){if(t){var a=t.indexOf(e);0<=a&&t.splice(a,1)}}var Hl=v(()=>{});function i7(t){return t instanceof F1||t&&"closed"in t&&ht(t.remove)&&ht(t.add)&&ht(t.unsubscribe)}function VW(t){ht(t)?t():t.unsubscribe()}var F1,LM,mr=v(()=>{t1();l2();TM();Hl();F1=(function(){function t(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}return t.prototype.unsubscribe=function(){var e,a,i,r,n;if(!this.closed){this.closed=!0;var s=this._parentage;if(s)if(this._parentage=null,Array.isArray(s))try{for(var o=I2(s),u=o.next();!u.done;u=o.next()){var c=u.value;c.remove(this)}}catch(g){e={error:g}}finally{try{u&&!u.done&&(a=o.return)&&a.call(o)}finally{if(e)throw e.error}}else s.remove(this);var d=this.initialTeardown;if(ht(d))try{d()}catch(g){n=g instanceof D3?g.errors:[g]}var l=this._finalizers;if(l){this._finalizers=null;try{for(var f=I2(l),b=f.next();!b.done;b=f.next()){var y=b.value;try{VW(y)}catch(g){n=n??[],g instanceof D3?n=v2(v2([],U1(n)),U1(g.errors)):n.push(g)}}}catch(g){i={error:g}}finally{try{b&&!b.done&&(r=f.return)&&r.call(f)}finally{if(i)throw i.error}}}if(n)throw new D3(n)}},t.prototype.add=function(e){var a;if(e&&e!==this)if(this.closed)VW(e);else{if(e instanceof t){if(e.closed||e._hasParent(this))return;e._addParent(this)}(this._finalizers=(a=this._finalizers)!==null&&a!==void 0?a:[]).push(e)}},t.prototype._hasParent=function(e){var a=this._parentage;return a===e||Array.isArray(a)&&a.includes(e)},t.prototype._addParent=function(e){var a=this._parentage;this._parentage=Array.isArray(a)?(a.push(e),a):a?[a,e]:e},t.prototype._removeParent=function(e){var a=this._parentage;a===e?this._parentage=null:Array.isArray(a)&&Ei(a,e)},t.prototype.remove=function(e){var a=this._finalizers;a&&Ei(a,e),e instanceof t&&e._removeParent(this)},t.EMPTY=(function(){var e=new t;return e.closed=!0,e})(),t})(),LM=F1.EMPTY});var ri,ql=v(()=>{ri={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1}});var Vl,$M=v(()=>{t1();Vl={setTimeout:function(t,e){for(var a=[],i=2;i<arguments.length;i++)a[i-2]=arguments[i];var r=Vl.delegate;return r?.setTimeout?r.setTimeout.apply(r,v2([t,e],U1(a))):setTimeout.apply(void 0,v2([t,e],U1(a)))},clearTimeout:function(t){var e=Vl.delegate;return(e?.clearTimeout||clearTimeout)(t)},delegate:void 0}});function r7(t){Vl.setTimeout(function(){var e=ri.onUnhandledError;if(e)e(t);else throw t})}var DM=v(()=>{ql();$M()});function si(){}var qo=v(()=>{});function UW(t){return AM("E",void 0,t)}function WW(t){return AM("N",t,void 0)}function AM(t,e,a){return{kind:t,value:e,error:a}}var jW,GW=v(()=>{jW=(function(){return AM("C",void 0,void 0)})()});function jl(t){if(ri.useDeprecatedSynchronousErrorHandling){var e=!Vo;if(e&&(Vo={errorThrown:!1,error:null}),t(),e){var a=Vo,i=a.errorThrown,r=a.error;if(Vo=null,i)throw r}}else t()}function YW(t){ri.useDeprecatedSynchronousErrorHandling&&Vo&&(Vo.errorThrown=!0,Vo.error=t)}var Vo,s7=v(()=>{ql();Vo=null});function EM(t,e){return Wzt.call(t,e)}function n7(t){ri.useDeprecatedSynchronousErrorHandling?YW(t):r7(t)}function Yzt(t){throw t}function PM(t,e){var a=ri.onStoppedNotification;a&&Vl.setTimeout(function(){return a(t,e)})}var jo,Wzt,Gzt,A3,Zzt,o7=v(()=>{t1();l2();mr();ql();DM();qo();GW();$M();s7();jo=(function(t){zt(e,t);function e(a){var i=t.call(this)||this;return i.isStopped=!1,a?(i.destination=a,i7(a)&&a.add(i)):i.destination=Zzt,i}return e.create=function(a,i,r){return new A3(a,i,r)},e.prototype.next=function(a){this.isStopped?PM(WW(a),this):this._next(a)},e.prototype.error=function(a){this.isStopped?PM(UW(a),this):(this.isStopped=!0,this._error(a))},e.prototype.complete=function(){this.isStopped?PM(jW,this):(this.isStopped=!0,this._complete())},e.prototype.unsubscribe=function(){this.closed||(this.isStopped=!0,t.prototype.unsubscribe.call(this),this.destination=null)},e.prototype._next=function(a){this.destination.next(a)},e.prototype._error=function(a){try{this.destination.error(a)}finally{this.unsubs
${r}
    `)}}});var Cc,a_=v(()=>{Cc=class{constructor(){this.requestInterceptors=[],this.responseInterceptors=[],this.errorInterceptors=[]}addRequestInterceptor(e){this.requestInterceptors.push(e)}addResponseInterceptor(e){this.responseInterceptors.push(e)}addErrorInterceptor(e){this.errorInterceptors.push(e)}removeRequestInterceptor(e){let a=this.requestInterceptors.indexOf(e);a>-1&&this.requestInterceptors.splice(a,1)}removeResponseInterceptor(e){let a=this.responseInterceptors.indexOf(e);a>-1&&this.responseInterceptors.splice(a,1)}removeErrorInterceptor(e){let a=this.errorInterceptors.indexOf(e);a>-1&&this.errorInterceptors.splice(a,1)}clearAll(){this.requestInterceptors=[],this.responseInterceptors=[],this.errorInterceptors=[]}async processRequest(e){let a=e;for(let i of this.requestInterceptors)try{a=await i(a)}catch(r){throw await this.processError(r instanceof Error?r:new Error(String(r)))}return a}async processResponse(e){let a=e;for(let i of this.responseInterceptors)try{a=await i(a)}catch(r){throw await this.processError(r instanceof Error?r:new Error(String(r)))}return a}async processError(e){let a=e;for(let i of this.errorInterceptors)try{a=await i(a)}catch(r){a=r instanceof Error?r:new Error(String(r))}return a}getInterceptorCounts(){return{request:this.requestInterceptors.length,response:this.responseInterceptors.length,error:this.errorInterceptors.length}}}});var v1e=v(()=>{b2()});var y1e=v(()=>{});var i_,x1e=v(()=>{v1e();y1e();i_=class{constructor(){this.loadedScripts=[]}async getEnvAwareModule(e){if(this.isNode)return await this.getSafeNodeModule(e.nodeModuleName);if(this.isBrowser)return await this.getSafeWebModule(e.webUrlArg,e.getFunction);console.error("platform for loading not supported by smartenv")}async getSafeNodeModule(e,a){if(!this.isNode){console.error(`You tried to load a node module in a wrong context: ${e}. This does not throw.`);return}let i=await new Function(`return import('${e}')`)();return a&&await a(i),i}async getSafeWebModule(e,a){if(!this.isBrowser){console.error("You tried to load a web module in a wrong context");return}if(this.loadedScripts.includes(e))return a();this.loadedScripts.push(e);let i=Ve.defer();if(globalThis.importScripts)globalThis.importScripts(e),i.resolve();else{let r=document.createElement("script");r.onload=()=>{i.resolve()},r.src=e,document.head.appendChild(r)}return await i.promise,a()}get runtimeEnv(){return typeof process<"u"?"node":"browser"}get isBrowser(){return!this.isNode}get userAgent(){return this.isBrowser?navigator.userAgent:"undefined"}get isNode(){return this.runtimeEnv==="node"}get nodeVersion(){return process.version}get isCI(){return this.isNode?!!process.env.CI:!1}async isMacAsync(){return this.isNode?(await this.getSafeNodeModule("os")).platform()==="darwin":!1}async isWindowsAsync(){return this.isNode?(await this.getSafeNodeModule("os")).platform()==="win32":!1}async isLinuxAsync(){return this.isNode?(await this.getSafeNodeModule("os")).platform()==="linux":!1}async printEnv(){this.isNode?(console.log("running on NODE"),console.log("node version is "+this.nodeVersion)):(console.log("running on BROWSER"),console.log("browser is "+this.userAgent))}}});var Ba={};Ye(Ba,{Smartenv:()=>i_});var _c=v(()=>{x1e()});var r_,Tc=v(()=>{r_=o2(Q8(),1)});var rh={};Ye(rh,{createCryptoRandomString:()=>LLt,createRandomString:()=>TLt});var CLt,_Lt,TLt,LLt,w1e=v(()=>{Tc();CLt=(t,e)=>{if(typeof globalThis<"u"&&globalThis.crypto&&globalThis.crypto.getRandomValues){let a=e-t,i=new Uint32Array(1);return globalThis.crypto.getRandomValues(i),t+i[0]%a}else return Math.floor(Math.random()*(e-t))+t},_Lt=(t,e,a)=>{let i={A:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",a:"abcdefghijklmnopqrstuvwxyz",0:"0123456789","!":"!@#$%^&*()_+-=[]{}|;:,.<>?","*":"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?"},r=t;e&&e>t.length?r=t.repeat(Math.ceil(e/t.length)).slice(0,e):e&&(r=t.slice(0,e));let n="";for(let s of r)if(i[s]){let o=i[s],u=CLt(0,o.length);n+=o[u]}else n+=s;return n},TLt=(t,e,a)=>_Lt(t,e,a),LLt=()=>r_.uni()});var sh={};Ye(sh,{makeEnvObject:()=>$Lt});
`);return DLt(e)},n_=t=>{let e="";for(let a of t)e=e+a+`
`;return e},DLt=t=>{let e=/^[\s]*$/;return e.test(t[0])&&t.shift(),e.test(t[t.length-1])&&t.pop(),t},ALt=(t,e)=>{let a=s_(t);for(let r of a)r=" ".repeat(e)+r;return n_(a)},ELt=(t,e)=>{let a,i=s_(t),r=[];for(let n of i)r.push(e+n);return a=n_(r),a},PLt=t=>{let e,a=s_(t),i,r=/^(\s*)/,n=/^(\s*)$/;for(let o of a){let u=r.exec(o)[1];(typeof i>"u"||u.length<i)&&!n.test(o)&&(i=u.length)}let s=[];for(let o of a)s.push(o.substr(i));return e=n_(s),e}});var nh={};Ye(nh,{replaceAll:()=>z1e,standard:()=>NLt});var z1e,ILt,NLt,S1e=v(()=>{z1e=(t,e,a)=>t.replace(new RegExp(e,"g"),a),ILt=t=>{let e=t.split(`
`),a=1/0;for(let i of e)if(i.trim().length>0){let r=i.match(/^(\s*)/);r&&(a=Math.min(a,r[1].length))}return a===1/0||a===0?t:e.map(i=>i.length>=a?i.slice(a):i).join(`
`)},NLt=(t,e)=>{let a=t;return(!e||e.stripIndent)&&(a=ILt(a)),(!e||e.normalizeNewline)&&(a=a.replace(/\r\n/g,`
`)),(!e||e.replaceTabs)&&(a=z1e(a,"	/"," ")),(!e||e.stripLeadingTrailingEmptyLines)&&(a=a.replace(/^\s*[\r\n]/gm,"").replace(/\s*[\r\n]$/gm,"")),(!e||e.stripAllEmptyLines)&&(a=a.replace(/^\s*[\r\n]/gm,"")),a}});var o_,oh,Lc,l_=v(()=>{o_={encode:t=>{if(typeof Buffer<"u")return Buffer.from(t,"utf8").toString("base64");if(typeof btoa<"u"){let e=new TextEncoder().encode(t),a=Array.from(e,i=>String.fromCharCode(i)).join("");return btoa(a)}else{let e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",a=new TextEncoder().encode(t),i="",r=0;for(;r<a.length;){let n=a[r++],s=r<a.length?a[r++]:0,o=r<a.length?a[r++]:0,u=n<<16|s<<8|o;i+=e.charAt(u>>18&63),i+=e.charAt(u>>12&63),i+=r-2<a.length?e.charAt(u>>6&63):"=",i+=r-1<a.length?e.charAt(u&63):"="}return i}},decode:t=>{let e=t.replace(/-/g,"+").replace(/_/g,"/").padEnd(t.length+(4-t.length%4)%4,"=");if(typeof Buffer<"u")return Buffer.from(e,"base64").toString("utf8");if(typeof atob<"u"){let a=atob(e),i=new Uint8Array(a.length);for(let r=0;r<a.length;r++)i[r]=a.charCodeAt(r);return new TextDecoder().decode(i)}else{let a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",i=[],r=0;for(;r<e.length;){let n=a.indexOf(e.charAt(r++)),s=a.indexOf(e.charAt(r++)),o=a.indexOf(e.charAt(r++)),u=a.indexOf(e.charAt(r++)),c=n<<18|s<<12|o<<6|u;i.push(c>>16&255),o!==64&&i.push(c>>8&255),u!==64&&i.push(c&255)}return new TextDecoder().decode(new Uint8Array(i))}}},oh=class{constructor(e,a){switch(a){case"string":this.refString=e;break;case"base64":this.refString=Lc.decode(e);break;case"base64uri":this.refString=Lc.decode(e)}}get simpleString(){return this.refString}get base64String(){return Lc.encode(this.refString)}get base64UriString(){return Lc.encodeUri(this.refString)}},Lc={encode:t=>o_.encode(t),encodeUri:t=>o_.encode(t).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,""),decode:t=>o_.decode(t),isBase64:t=>/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$/.test(t)}});var lh={};Ye(lh,{isBase64:()=>FLt,isUtf8:()=>RLt});var RLt,FLt,C1e=v(()=>{Tc();l_();RLt=t=>{let a=new TextEncoder().encode(t),i=0;for(;i<a.length;){if(a[i]===9||a[i]===10||a[i]===13||32<=a[i]&&a[i]<=126){i+=1;continue}if(194<=a[i]&&a[i]<=223&&128<=a[i+1]&&a[i+1]<=191){i+=2;continue}if(a[i]===224&&160<=a[i+1]&&a[i+1]<=191&&128<=a[i+2]&&a[i+2]<=191||(225<=a[i]&&a[i]<=236||a[i]===238||a[i]===239)&&128<=a[i+1]&&a[i+1]<=191&&128<=a[i+2]&&a[i+2]<=191||a[i]===237&&128<=a[i+1]&&a[i+1]<=159&&128<=a[i+2]&&a[i+2]<=191){i+=3;continue}if(a[i]===240&&144<=a[i+1]&&a[i+1]<=191&&128<=a[i+2]&&a[i+2]<=191&&128<=a[i+3]&&a[i+3]<=191||241<=a[i]&&a[i]<=243&&128<=a[i+1]&&a[i+1]<=191&&128<=a[i+2]&&a[i+2]<=191&&128<=a[i+3]&&a[i+3]<=191||a[i]===244&&128<=a[i+1]&&a[i+1]<=143&&128<=a[i+2]&&a[i+2]<=191&&128<=a[i+3]&&a[i+3]<=191){i+=4;continue}return!1}return!0},FLt=t=>{let e=/[^A-Z0-9+\/=]/i,a=t.length;if(!a||a%4!==0||e.test(t))return!1;let i=t.indexOf("=");return i===-1||i===a-1||i===a-2&&t[a-1]==="="}});var ch,_1e=v(()=>{ch=class{constructor(e){this.protocol=this._protocolRegex(e),this.protocol||(e=`https://${e}`),this.nodeParsedUrl=new URL(e),this.port=this.nodeParsedUrl.port;let a=this._domainRegex(e.replace(this.nodeParsedUrl.pathname,""));this.fullName="";for(let i=1;i<=5;i++)if(a[i-1]){let r=a[i-1];this["level"+i.toString()]=r,this.fullName===""?this.fullName=r:this.fullName=r+"."+this.fullName}else this["level"+i.toString()]=void 0;this.zoneName=this.level2+"."+this.level1,this.topLevel=this.level1,this.domainName=this.level2,this.subDomain=this.level3}_domainRegex(e){let i=/([a-zA-Z0-9\-\_]*)\.{0,1}([a-zA-Z0-9\-\_]*)\.{0,1}([a-zA-Z0-9\-\_]*)\.{0,1}([a-zA-Z0-9\-\_]*)\.{0,1}([a-zA-Z0-9\-\_]*)\.{0,1}$/.exec(e);return i.reverse(),i.pop(),i.filter(function(n){return n!==""})}_protocolRegex(e){let i=/^([a-zA-Z0-9]*):\/\//.exec(e);if(i)return i[1]}_portRegex(e){let i=/^([a-zA-Z0-9]*):\/\//.exec(e);if(i)return i[1]}}});var dh,OLt,T1e,L1e=v(()=>{Tc();dh=class{constructor(e,a){let i=OLt(e);this.host=i[1],this.user=i[2],this.repo=i[3],this.accessToken=a,this.sshUrl=T1e(this.host,this.user,this.repo,this.accessToken,"ssh
`).reduce((i,r)=>{let n=r.trim();return n.length>0&&i.push(Mh(n)),i},[]),yDt=t=>t.map(e=>f0(e)).join(`
`),xDt=(t,e,a={})=>{let i=new WeakSet,r=o=>{if(o===null||typeof o!="object")return o;let u=wh("",o);if(u&&u.type==="EncodedBuffer"&&typeof u.data=="string")return u;if(i.has(o))return"__cycle__";if(i.add(o),Array.isArray(o))return o.map(d=>r(d));let c={};for(let d of Object.keys(o))try{c[d]=r(o[d])}catch{c[d]="__unserializable__"}return c},n=r(t),s={...a,cycles:!0};if(e&&!s.cmp){let o=new Map;e.forEach((u,c)=>o.set(u,c)),s.cmp=(u,c)=>{let d=o.has(u.key)?o.get(u.key):Number.POSITIVE_INFINITY,l=o.has(c.key)?o.get(c.key):Number.POSITIVE_INFINITY;return d!==l?d-l:u.key<c.key?-1:u.key>c.key?1:0}}return xh(n,s)},f0=(t,e,a={})=>{let i=S_(t);t=JSON.parse(i);let r={...a};if(e&&!r.cmp){let s=new Map;e.forEach((o,u)=>s.set(o,u)),r.cmp=(o,u)=>{let c=s.has(o.key)?s.get(o.key):Number.POSITIVE_INFINITY,d=s.has(u.key)?s.get(u.key):Number.POSITIVE_INFINITY;return c!==d?c-d:o.key<u.key?-1:o.key>u.key?1:0}}return xh(t,r)},wDt=t=>{let e=f0(t),a=JSON.parse(e);return JSON.stringify(a,null,2)},MDt=(...t)=>{let e=f0(...t);return pi.base64.encodeUri(e)},kDt=t=>{let e=pi.base64,i=(e.decodeUri||e.decode)(t);return Mh(i)},T_=class t{static enfoldFromObject(e){let a=new this,i=a.saveableProperties||[];for(let r in e)i.indexOf(r)!==-1&&(a[r]=e[r]);return a}static enfoldFromJson(e){let a=Mh(e);return this.enfoldFromObject(a)}foldToObject(){let e=new Set;return e.add(this),this.foldToObjectInternal(e)}foldToObjectInternal(e){let a={},i=n=>{if(n instanceof t){if(e.has(n))throw new Error("cycle detected");return e.add(n),n.foldToObjectInternal(e)}return Array.isArray(n)?n.map(s=>i(s)):yh.default(n)},r=this.saveableProperties||[];for(let n of r){let s=this[n];a[n]=i(s)}return a}foldToJson(){let e=this.foldToObject();return f0(e)}},zDt=()=>(t,e)=>{t.saveableProperties||(t.saveableProperties=[]),t.saveableProperties.push(e)},S2e=(t,e)=>{let a=f0(t),i=f0(e);return a===i},SDt=(t,e)=>{let a=__(t),i=__(e);return S2e(a,i)}});var P6={};Ye(P6,{deleteDB:()=>P2e,openDB:()=>E2e,unwrap:()=>E6,wrap:()=>Tr});function CDt(){return C2e||(C2e=[IDBDatabase,IDBObjectStore,IDBIndex,IDBCursor,IDBTransaction])}function _Dt(){return _2e||(_2e=[IDBCursor.prototype.advance,IDBCursor.prototype.continue,IDBCursor.prototype.continuePrimaryKey])}function TDt(t){let e=new Promise((a,i)=>{let r=()=>{t.removeEventListener("success",n),t.removeEventListener("error",s)},n=()=>{a(Tr(t.result)),r()},s=()=>{i(t.error),r()};t.addEventListener("success",n),t.addEventListener("error",s)});return kh.set(e,t),e}function LDt(t){if($_.has(t))return;let e=new Promise((a,i)=>{let r=()=>{t.removeEventListener("complete",n),t.removeEventListener("error",s),t.removeEventListener("abort",s)},n=()=>{a(),r()},s=()=>{i(t.error||new DOMException("AbortError","AbortError")),r()};t.addEventListener("complete",n),t.addEventListener("error",s),t.addEventListener("abort",s)});$_.set(t,e)}function T2e(t){A_=t(A_)}function $Dt(t){return _Dt().includes(t)?function(...e){return t.apply(E6(this),e),Tr(this.request)}:function(...e){return Tr(t.apply(E6(this),e))}}function DDt(t){return typeof t=="function"?$Dt(t):(t instanceof IDBTransaction&&LDt(t),L_(t,CDt())?new Proxy(t,A_):t)}function Tr(t){if(t instanceof IDBRequest)return TDt(t);if(D_.has(t))return D_.get(t);let e=DDt(t);return e!==t&&(D_.set(t,e),kh.set(e,t)),e}function E2e(t,e,{blocked:a,upgrade:i,blocking:r,terminated:n}={}){let s=indexedDB.open(t,e),o=Tr(s);return i&&s.addEventListener("upgradeneeded",u=>{i(Tr(s.result),u.oldVersion,u.newVersion,Tr(s.transaction),u)}),a&&s.addEventListener("blocked",u=>a(u.oldVersion,u.newVersion,u)),o.then(u=>{n&&u.addEventListener("close",()=>n()),r&&u.addEventListener("versionchange",c=>r(c.oldVersion,c.newVersion,c))}).catch(()=>{}),o}function P2e(t,{blocked:e}={}){let a=indexedDB.deleteDatabase(t);return e&&a.addEventListener("blocked",i=>e(i.oldVersion,i)),Tr(a).then(()=>{})}function L2e(t,e){if(!(t instanceof IDBDatabase&&!(e in t)&&typeof e=="string"))return;if(E_.get(e))return E_.get(e);let a=e.replace(/FromIndex$/,""),i=e!==a,r=EDt.includes(a);if(!(a in(i?IDBIndex:IDBObjectStore).prototype)||!(r||ADt.includes(a)))re
\x85\u2028\u2029`.indexOf(this.buffer.charAt(r-1))===-1;)if(r-=1,this.position-r>a/2-1){i=" ... ",r+=5;break}for(n="",s=this.position;s<this.buffer.length&&`\0\r
\x85\u2028\u2029`.indexOf(this.buffer.charAt(s))===-1;)if(s+=1,s-this.position>a/2-1){n=" ... ",s-=5;break}return o=this.buffer.slice(r,s),Bae.repeat(" ",e)+i+o+n+`
`+Bae.repeat(" ",e+this.position-r+i.length)+"^"},dT.prototype.toString=function(e){var a,i="";return this.name&&(i+='in "'+this.name+'" '),i+="at line "+(this.line+1)+", column "+(this.column+1),e||(a=this.getSnippet(),a&&(i+=`:
`+a)),i},Hae.exports=dT});var e2=ut((CL1,jae)=>{"use strict";var Vae=Oc(),YAt=["kind","resolve","construct","instanceOf","predicate","represent","defaultStyle","styleAliases"],ZAt=["scalar","sequence","mapping"];function XAt(t){var e={};return t!==null&&Object.keys(t).forEach(function(a){t[a].forEach(function(i){e[String(i)]=a})}),e}function KAt(t,e){if(e=e||{},Object.keys(e).forEach(function(a){if(YAt.indexOf(a)===-1)throw new Vae('Unknown option "'+a+'" is met in definition of "'+t+'" YAML type.')}),this.tag=t,this.kind=e.kind||null,this.resolve=e.resolve||function(){return!0},this.construct=e.construct||function(a){return a},this.instanceOf=e.instanceOf||null,this.predicate=e.predicate||null,this.represent=e.represent||null,this.defaultStyle=e.defaultStyle||null,this.styleAliases=XAt(e.styleAliases||null),ZAt.indexOf(this.kind)===-1)throw new Vae('Unknown kind "'+this.kind+'" is specified for "'+t+'" YAML type.')}jae.exports=KAt});var k0=ut((_L1,Wae)=>{"use strict";var Uae=M0(),Rh=Oc(),QAt=e2();function pT(t,e,a){var i=[];return t.include.forEach(function(r){a=pT(r,e,a)}),t[e].forEach(function(r){a.forEach(function(n,s){n.tag===r.tag&&n.kind===r.kind&&i.push(s)}),a.push(r)}),a.filter(function(r,n){return i.indexOf(n)===-1})}function JAt(){var t={scalar:{},sequence:{},mapping:{},fallback:{}},e,a;function i(r){t[r.kind][r.tag]=t.fallback[r.tag]=r}for(e=0,a=arguments.length;e<a;e+=1)arguments[e].forEach(i);return t}function Bc(t){this.include=t.include||[],this.implicit=t.implicit||[],this.explicit=t.explicit||[],this.implicit.forEach(function(e){if(e.loadKind&&e.loadKind!=="scalar")throw new Rh("There is a non-scalar type in the implicit list of a schema. Implicit resolving of such types is not supported.")}),this.compiledImplicit=pT(this,"implicit",[]),this.compiledExplicit=pT(this,"explicit",[]),this.compiledTypeMap=JAt(this.compiledImplicit,this.compiledExplicit)}Bc.DEFAULT=null,Bc.create=function(){var e,a;switch(arguments.length){case 1:e=Bc.DEFAULT,a=arguments[0];break;case 2:e=arguments[0],a=arguments[1];break;default:throw new Rh("Wrong number of arguments for Schema.create function")}if(e=Uae.toArray(e),a=Uae.toArray(a),!e.every(function(i){return i instanceof Bc}))throw new Rh("Specified list of super schemas (or a single Schema object) contains a non-Schema object.");if(!a.every(function(i){return i instanceof QAt}))throw new Rh("Specified list of YAML types (or a single Type object) contains a non-Type object.");return new Bc({include:e,explicit:a})},Wae.exports=Bc});var Yae=ut((TL1,Gae)=>{"use strict";var eEt=e2();Gae.exports=new eEt("tag:yaml.org,2002:str",{kind:"scalar",construct:function(t){return t!==null?t:""}})});var Xae=ut((LL1,Zae)=>{"use strict";var tEt=e2();Zae.exports=new tEt("tag:yaml.org,2002:seq",{kind:"sequence",construct:function(t){return t!==null?t:[]}})});var Qae=ut(($L1,Kae)=>{"use strict";var aEt=e2();Kae.exports=new aEt("tag:yaml.org,2002:map",{kind:"mapping",construct:function(t){return t!==null?t:{}}})});var Fh=ut((DL1,Jae)=>{"use strict";var iEt=k0();Jae.exports=new iEt({explicit:[Yae(),Xae(),Qae()]})});var tie=ut((AL1,eie)=>{"use strict";var rEt=e2();function sEt(t){if(t===null)return!0;var e=t.length;return e===1&&t==="~"||e===4&&(t==="null"||t==="Null"||t==="NULL")}function nEt(){return null}function oEt(t){return t===null}eie.exports=new rEt("tag:yaml.org,2002:null",{kind:"scalar",resolve:sEt,construct:nEt,predicate:oEt,represent:{canonical:function(){return"~"},lowercase:function(){return"null"},uppercase:function(){return"NULL"},camelcase:function(){return"Null"}},defaultStyle:"lowercase"})});var iie=ut((EL1,aie)=>{"use strict";var lEt=e2();function cEt(t){if(t===null)return!1;var e=t.length;return e===4&&(t==="true"||t==="True"||t==="TRUE")||e===5&&(t==="false"||t==="False"||t==="FALSE")}function dEt(t){return t==="true"||t==="True"||t==="TRUE"}function pEt(t){return Object.prototype.toString.call(t)==="[object Boolean]"}aie.exports=new lEt("tag:yaml.org,2002:bool",{kind:"scalar",resolve:cEt,construct:dEt,predicate:pEt,represent:{lowercase:function(t){return t?"true":"false"
\r`;function NEt(t){if(t===null)return!1;var e,a,i=0,r=t.length,n=fT;for(a=0;a<r;a++)if(e=n.indexOf(t.charAt(a)),!(e>64)){if(e<0)return!1;i+=6}return i%8===0}function REt(t){var e,a,i=t.replace(/[\r\n=]/g,""),r=i.length,n=fT,s=0,o=[];for(e=0;e<r;e++)e%4===0&&e&&(o.push(s>>16&255),o.push(s>>8&255),o.push(s&255)),s=s<<6|n.indexOf(i.charAt(e));return a=r%4*6,a===0?(o.push(s>>16&255),o.push(s>>8&255),o.push(s&255)):a===18?(o.push(s>>10&255),o.push(s>>2&255)):a===12&&o.push(s>>4&255),z0?z0.from?z0.from(o):new z0(o):o}function FEt(t){var e="",a=0,i,r,n=t.length,s=fT;for(i=0;i<n;i++)i%3===0&&i&&(e+=s[a>>18&63],e+=s[a>>12&63],e+=s[a>>6&63],e+=s[a&63]),a=(a<<8)+t[i];return r=n%3,r===0?(e+=s[a>>18&63],e+=s[a>>12&63],e+=s[a>>6&63],e+=s[a&63]):r===2?(e+=s[a>>10&63],e+=s[a>>4&63],e+=s[a<<2&63],e+=s[64]):r===1&&(e+=s[a>>2&63],e+=s[a<<4&63],e+=s[64],e+=s[64]),e}function OEt(t){return z0&&z0.isBuffer(t)}vie.exports=new IEt("tag:yaml.org,2002:binary",{kind:"scalar",resolve:NEt,construct:REt,predicate:OEt,represent:FEt});var bie});var wie=ut((qL1,xie)=>{"use strict";var BEt=e2(),HEt=Object.prototype.hasOwnProperty,qEt=Object.prototype.toString;function VEt(t){if(t===null)return!0;var e=[],a,i,r,n,s,o=t;for(a=0,i=o.length;a<i;a+=1){if(r=o[a],s=!1,qEt.call(r)!=="[object Object]")return!1;for(n in r)if(HEt.call(r,n))if(!s)s=!0;else return!1;if(!s)return!1;if(e.indexOf(n)===-1)e.push(n);else return!1}return!0}function jEt(t){return t!==null?t:[]}xie.exports=new BEt("tag:yaml.org,2002:omap",{kind:"sequence",resolve:VEt,construct:jEt})});var kie=ut((VL1,Mie)=>{"use strict";var UEt=e2(),WEt=Object.prototype.toString;function GEt(t){if(t===null)return!0;var e,a,i,r,n,s=t;for(n=new Array(s.length),e=0,a=s.length;e<a;e+=1){if(i=s[e],WEt.call(i)!=="[object Object]"||(r=Object.keys(i),r.length!==1))return!1;n[e]=[r[0],i[r[0]]]}return!0}function YEt(t){if(t===null)return[];var e,a,i,r,n,s=t;for(n=new Array(s.length),e=0,a=s.length;e<a;e+=1)i=s[e],r=Object.keys(i),n[e]=[r[0],i[r[0]]];return n}Mie.exports=new UEt("tag:yaml.org,2002:pairs",{kind:"sequence",resolve:GEt,construct:YEt})});var Sie=ut((jL1,zie)=>{"use strict";var ZEt=e2(),XEt=Object.prototype.hasOwnProperty;function KEt(t){if(t===null)return!0;var e,a=t;for(e in a)if(XEt.call(a,e)&&a[e]!==null)return!1;return!0}function QEt(t){return t!==null?t:{}}zie.exports=new ZEt("tag:yaml.org,2002:set",{kind:"mapping",resolve:KEt,construct:QEt})});var Hc=ut((UL1,Cie)=>{"use strict";var JEt=k0();Cie.exports=new JEt({include:[hT()],implicit:[fie(),gie()],explicit:[yie(),wie(),kie(),Sie()]})});var Tie=ut((WL1,_ie)=>{"use strict";var ePt=e2();function tPt(){return!0}function aPt(){}function iPt(){return""}function rPt(t){return typeof t>"u"}_ie.exports=new ePt("tag:yaml.org,2002:js/undefined",{kind:"scalar",resolve:tPt,construct:aPt,predicate:rPt,represent:iPt})});var $ie=ut((GL1,Lie)=>{"use strict";var sPt=e2();function nPt(t){if(t===null||t.length===0)return!1;var e=t,a=/\/([gim]*)$/.exec(t),i="";return!(e[0]==="/"&&(a&&(i=a[1]),i.length>3||e[e.length-i.length-1]!=="/"))}function oPt(t){var e=t,a=/\/([gim]*)$/.exec(t),i="";return e[0]==="/"&&(a&&(i=a[1]),e=e.slice(1,e.length-i.length-1)),new RegExp(e,i)}function lPt(t){var e="/"+t.source+"/";return t.global&&(e+="g"),t.multiline&&(e+="m"),t.ignoreCase&&(e+="i"),e}function cPt(t){return Object.prototype.toString.call(t)==="[object RegExp]"}Lie.exports=new sPt("tag:yaml.org,2002:js/regexp",{kind:"scalar",resolve:nPt,construct:oPt,predicate:cPt,represent:lPt})});var Eie=ut((YL1,Aie)=>{"use strict";var Oh;try{Die=H8,Oh=Die("esprima")}catch{typeof window<"u"&&(Oh=window.esprima)}var dPt=e2();function pPt(t){if(t===null)return!1;try{var e="("+t+")",a=Oh.parse(e,{range:!0});return!(a.type!=="Program"||a.body.length!==1||a.body[0].type!=="ExpressionStatement"||a.body[0].expression.type!=="ArrowFunctionExpression"&&a.body[0].expression.type!=="FunctionExpression")}catch{return!1}}function uPt(t){var e="("+t+")",a=Oh.parse(e,{range:!0}),i=[],r;if(a.type!=="Program"||a.body.length!==1||a.body[0].type!=="ExpressionStatement"||a.body[0].expression.type!=="ArrowFunctio
`:t===118?"\v":t===102?"\f":t===114?"\r":t===101?"\x1B":t===32?" ":t===34?'"':t===47?"/":t===92?"\\":t===78?"\x85":t===95?"\xA0":t===76?"\u2028":t===80?"\u2029":""}function zPt(t){return t<=65535?String.fromCharCode(t):String.fromCharCode((t-65536>>10)+55296,(t-65536&1023)+56320)}function Uie(t,e,a){e==="__proto__"?Object.defineProperty(t,e,{configurable:!0,enumerable:!0,writable:!0,value:a}):t[e]=a}var Wie=new Array(256),Gie=new Array(256);for(C0=0;C0<256;C0++)Wie[C0]=jie(C0)?1:0,Gie[C0]=jie(C0);function SPt(t,e){this.input=t,this.filename=e.filename||null,this.schema=e.schema||gPt,this.onWarning=e.onWarning||null,this.legacy=e.legacy||!1,this.json=e.json||!1,this.listener=e.listener||null,this.implicitTypes=this.schema.compiledImplicit,this.typeMap=this.schema.compiledTypeMap,this.length=t.length,this.position=0,this.line=0,this.lineStart=0,this.lineIndent=0,this.documents=[]}function Yie(t,e){return new Nie(e,new mPt(t.filename,t.input,t.position,t.line,t.position-t.lineStart))}function nt(t,e){throw Yie(t,e)}function qh(t,e){t.onWarning&&t.onWarning.call(null,Yie(t,e))}var Zie={YAML:function(e,a,i){var r,n,s;e.version!==null&&nt(e,"duplication of %YAML directive"),i.length!==1&&nt(e,"YAML directive accepts exactly one argument"),r=/^([0-9]+)\.([0-9]+)$/.exec(i[0]),r===null&&nt(e,"ill-formed argument of the YAML directive"),n=parseInt(r[1],10),s=parseInt(r[2],10),n!==1&&nt(e,"unacceptable YAML version of the document"),e.version=i[0],e.checkLineBreaks=s<2,s!==1&&s!==2&&qh(e,"unsupported YAML version of the document")},TAG:function(e,a,i){var r,n;i.length!==2&&nt(e,"TAG directive accepts exactly two arguments"),r=i[0],n=i[1],Hie.test(r)||nt(e,"ill-formed tag handle (first argument) of the TAG directive"),Un.call(e.tagMap,r)&&nt(e,'there is a previously declared suffix for "'+r+'" tag handle'),qie.test(n)||nt(e,"ill-formed tag prefix (second argument) of the TAG directive"),e.tagMap[r]=n}};function Wn(t,e,a,i){var r,n,s,o;if(e<a){if(o=t.input.slice(e,a),i)for(r=0,n=o.length;r<n;r+=1)s=o.charCodeAt(r),s===9||32<=s&&s<=1114111||nt(t,"expected valid JSON character");else vPt.test(o)&&nt(t,"the stream contains non-printable characters");t.result+=o}}function Xie(t,e,a,i){var r,n,s,o;for(Ss.isObject(a)||nt(t,"cannot merge mappings; the provided source object is unacceptable"),r=Object.keys(a),s=0,o=r.length;s<o;s+=1)n=r[s],Un.call(e,n)||(Uie(e,n,a[n]),i[n]=!0)}function Vc(t,e,a,i,r,n,s,o){var u,c;if(Array.isArray(r))for(r=Array.prototype.slice.call(r),u=0,c=r.length;u<c;u+=1)Array.isArray(r[u])&&nt(t,"nested arrays are not supported inside keys"),typeof r=="object"&&Vie(r[u])==="[object Object]"&&(r[u]="[object Object]");if(typeof r=="object"&&Vie(r)==="[object Object]"&&(r="[object Object]"),r=String(r),e===null&&(e={}),i==="tag:yaml.org,2002:merge")if(Array.isArray(n))for(u=0,c=n.length;u<c;u+=1)Xie(t,e,n[u],a);else Xie(t,e,n,a);else!t.json&&!Un.call(a,r)&&Un.call(e,r)&&(t.line=s||t.line,t.position=o||t.position,nt(t,"duplicated mapping key")),Uie(e,r,n),delete a[r];return e}function gT(t){var e;e=t.input.charCodeAt(t.position),e===10?t.position++:e===13?(t.position++,t.input.charCodeAt(t.position)===10&&t.position++):nt(t,"a line break is expected"),t.line+=1,t.lineStart=t.position}function G1(t,e,a){for(var i=0,r=t.input.charCodeAt(t.position);r!==0;){for(;S0(r);)r=t.input.charCodeAt(++t.position);if(e&&r===35)do r=t.input.charCodeAt(++t.position);while(r!==10&&r!==13&&r!==0);if(Ar(r))for(gT(t),r=t.input.charCodeAt(t.position),i++,t.lineIndent=0;r===32;)t.lineIndent++,r=t.input.charCodeAt(++t.position);else break}return a!==-1&&i!==0&&t.lineIndent<a&&qh(t,"deficient indentation"),i}function Vh(t){var e=t.position,a;return a=t.input.charCodeAt(e),!!((a===45||a===46)&&a===t.input.charCodeAt(e+1)&&a===t.input.charCodeAt(e+2)&&(e+=3,a=t.input.charCodeAt(e),a===0||$a(a)))}function bT(t,e){e===1?t.result+=" ":e>1&&(t.result+=Ss.repeat(`
`,e-1))}function CPt(t,e,a){var i,r,n,s,o,u,c,d,l=t.kind,f=t.result,b;if(b=t.input.charCodeAt(t.position),$a(b)||qc(b)||b===35||b===38||b===42||b===33||b===124||b===62||b===39||b===34||b===37||b===64||b===96||(b===63||b===45)&&(r=t.input.charCodeAt(t.position+1),$a(r)||a&&qc(r)))return!1;for(t.kind="scalar",t.result="",n=s=t.position,o=!1;b!==0;){if(b===58){if(r=t.input.charCodeAt(t.position+1),$a(r)||a&&qc(r))break}else if(b===35){if(i=t.input.charCodeAt(t.position-1),$a(i))break}else{if(t.position===t.lineStart&&Vh(t)||a&&qc(b))break;if(Ar(b))if(u=t.line,c=t.lineStart,d=t.lineIndent,G1(t,!1,-1),t.lineIndent>=e){o=!0,b=t.input.charCodeAt(t.position);continue}else{t.position=s,t.line=u,t.lineStart=c,t.lineIndent=d;break}}o&&(Wn(t,n,s,!1),bT(t,t.line-u),n=s=t.position,o=!1),S0(b)||(s=t.position+1),b=t.input.charCodeAt(++t.position)}return Wn(t,n,s,!1),t.result?!0:(t.kind=l,t.result=f,!1)}function _Pt(t,e){var a,i,r;if(a=t.input.charCodeAt(t.position),a!==39)return!1;for(t.kind="scalar",t.result="",t.position++,i=r=t.position;(a=t.input.charCodeAt(t.position))!==0;)if(a===39)if(Wn(t,i,t.position,!0),a=t.input.charCodeAt(++t.position),a===39)i=t.position,t.position++,r=t.position;else return!0;else Ar(a)?(Wn(t,i,r,!0),bT(t,G1(t,!1,e)),i=r=t.position):t.position===t.lineStart&&Vh(t)?nt(t,"unexpected end of the document within a single quoted scalar"):(t.position++,r=t.position);nt(t,"unexpected end of the stream within a single quoted scalar")}function TPt(t,e){var a,i,r,n,s,o;if(o=t.input.charCodeAt(t.position),o!==34)return!1;for(t.kind="scalar",t.result="",t.position++,a=i=t.position;(o=t.input.charCodeAt(t.position))!==0;){if(o===34)return Wn(t,a,t.position,!0),t.position++,!0;if(o===92){if(Wn(t,a,t.position,!0),o=t.input.charCodeAt(++t.position),Ar(o))G1(t,!1,e);else if(o<256&&Wie[o])t.result+=Gie[o],t.position++;else if((s=MPt(o))>0){for(r=s,n=0;r>0;r--)o=t.input.charCodeAt(++t.position),(s=wPt(o))>=0?n=(n<<4)+s:nt(t,"expected hexadecimal character");t.result+=zPt(n),t.position++}else nt(t,"unknown escape sequence");a=i=t.position}else Ar(o)?(Wn(t,a,i,!0),bT(t,G1(t,!1,e)),a=i=t.position):t.position===t.lineStart&&Vh(t)?nt(t,"unexpected end of the document within a double quoted scalar"):(t.position++,i=t.position)}nt(t,"unexpected end of the stream within a double quoted scalar")}function LPt(t,e){var a=!0,i,r=t.tag,n,s=t.anchor,o,u,c,d,l,f={},b,y,g,h;if(h=t.input.charCodeAt(t.position),h===91)u=93,l=!1,n=[];else if(h===123)u=125,l=!0,n={};else return!1;for(t.anchor!==null&&(t.anchorMap[t.anchor]=n),h=t.input.charCodeAt(++t.position);h!==0;){if(G1(t,!0,e),h=t.input.charCodeAt(t.position),h===u)return t.position++,t.tag=r,t.anchor=s,t.kind=l?"mapping":"sequence",t.result=n,!0;a||nt(t,"missed comma between flow collection entries"),y=b=g=null,c=d=!1,h===63&&(o=t.input.charCodeAt(t.position+1),$a(o)&&(c=d=!0,t.position++,G1(t,!0,e))),i=t.line,jc(t,e,Bh,!1,!0),y=t.tag,b=t.result,G1(t,!0,e),h=t.input.charCodeAt(t.position),(d||t.line===i)&&h===58&&(c=!0,h=t.input.charCodeAt(++t.position),G1(t,!0,e),jc(t,e,Bh,!1,!0),g=t.result),l?Vc(t,n,f,y,b,g):c?n.push(Vc(t,null,f,y,b,g)):n.push(b),G1(t,!0,e),h=t.input.charCodeAt(t.position),h===44?(a=!0,h=t.input.charCodeAt(++t.position)):a=!1}nt(t,"unexpected end of the stream within a flow collection")}function $Pt(t,e){var a,i,r=mT,n=!1,s=!1,o=e,u=0,c=!1,d,l;if(l=t.input.charCodeAt(t.position),l===124)i=!1;else if(l===62)i=!0;else return!1;for(t.kind="scalar",t.result="";l!==0;)if(l=t.input.charCodeAt(++t.position),l===43||l===45)mT===r?r=l===43?Bie:bPt:nt(t,"repeat of a chomping mode identifier");else if((d=kPt(l))>=0)d===0?nt(t,"bad explicit indentation width of a block scalar; it cannot be less than one"):s?nt(t,"repeat of an indentation width identifier"):(o=e+d-1,s=!0);else break;if(S0(l)){do l=t.input.charCodeAt(++t.position);while(S0(l));if(l===35)do l=t.input.charCodeAt(++t.position);while(!Ar(l)&&l!==0)}for(;l!==0;){for(gT(t),t.lineIndent=0,l=t.input.charCodeAt(t.position);(!s||t.lineIndent<o)&&l===32;)t.lineIndent++,l=t.input.charCodeAt(++t.position);if(!s&&t.lineIndent>o&&(
`,n?1+u:u):r===mT&&n&&(t.result+=`
`);break}for(i?S0(l)?(c=!0,t.result+=Ss.repeat(`
`,n?1+u:u)):c?(c=!1,t.result+=Ss.repeat(`
`,u+1)):u===0?n&&(t.result+=" "):t.result+=Ss.repeat(`
`,u):t.result+=Ss.repeat(`
`,n?1+u:u),n=!0,s=!0,u=0,a=t.position;!Ar(l)&&l!==0;)l=t.input.charCodeAt(++t.position);Wn(t,a,t.position,!1)}return!0}function Kie(t,e){var a,i=t.tag,r=t.anchor,n=[],s,o=!1,u;for(t.anchor!==null&&(t.anchorMap[t.anchor]=n),u=t.input.charCodeAt(t.position);u!==0&&!(u!==45||(s=t.input.charCodeAt(t.position+1),!$a(s)));){if(o=!0,t.position++,G1(t,!0,-1)&&t.lineIndent<=e){n.push(null),u=t.input.charCodeAt(t.position);continue}if(a=t.line,jc(t,e,Oie,!1,!0),n.push(t.result),G1(t,!0,-1),u=t.input.charCodeAt(t.position),(t.line===a||t.lineIndent>e)&&u!==0)nt(t,"bad indentation of a sequence entry");else if(t.lineIndent<e)break}return o?(t.tag=i,t.anchor=r,t.kind="sequence",t.result=n,!0):!1}function DPt(t,e,a){var i,r,n,s,o=t.tag,u=t.anchor,c={},d={},l=null,f=null,b=null,y=!1,g=!1,h;for(t.anchor!==null&&(t.anchorMap[t.anchor]=c),h=t.input.charCodeAt(t.position);h!==0;){if(i=t.input.charCodeAt(t.position+1),n=t.line,s=t.position,(h===63||h===58)&&$a(i))h===63?(y&&(Vc(t,c,d,l,f,null),l=f=b=null),g=!0,y=!0,r=!0):y?(y=!1,r=!0):nt(t,"incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line"),t.position+=1,h=i;else if(jc(t,a,Fie,!1,!0))if(t.line===n){for(h=t.input.charCodeAt(t.position);S0(h);)h=t.input.charCodeAt(++t.position);if(h===58)h=t.input.charCodeAt(++t.position),$a(h)||nt(t,"a whitespace character is expected after the key-value separator within a block mapping"),y&&(Vc(t,c,d,l,f,null),l=f=b=null),g=!0,y=!1,r=!1,l=t.tag,f=t.result;else if(g)nt(t,"can not read an implicit mapping pair; a colon is missed");else return t.tag=o,t.anchor=u,!0}else if(g)nt(t,"can not read a block mapping entry; a multiline key may not be an implicit key");else return t.tag=o,t.anchor=u,!0;else break;if((t.line===n||t.lineIndent>e)&&(jc(t,e,Hh,!0,r)&&(y?f=t.result:b=t.result),y||(Vc(t,c,d,l,f,b,n,s),l=f=b=null),G1(t,!0,-1),h=t.input.charCodeAt(t.position)),t.lineIndent>e&&h!==0)nt(t,"bad indentation of a mapping entry");else if(t.lineIndent<e)break}return y&&Vc(t,c,d,l,f,null),g&&(t.tag=o,t.anchor=u,t.kind="mapping",t.result=c),g}function APt(t){var e,a=!1,i=!1,r,n,s;if(s=t.input.charCodeAt(t.position),s!==33)return!1;if(t.tag!==null&&nt(t,"duplication of a tag property"),s=t.input.charCodeAt(++t.position),s===60?(a=!0,s=t.input.charCodeAt(++t.position)):s===33?(i=!0,r="!!",s=t.input.charCodeAt(++t.position)):r="!",e=t.position,a){do s=t.input.charCodeAt(++t.position);while(s!==0&&s!==62);t.position<t.length?(n=t.input.slice(e,t.position),s=t.input.charCodeAt(++t.position)):nt(t,"unexpected end of the stream within a verbatim tag")}else{for(;s!==0&&!$a(s);)s===33&&(i?nt(t,"tag suffix cannot contain exclamation marks"):(r=t.input.slice(e-1,t.position+1),Hie.test(r)||nt(t,"named tag handle cannot contain such characters"),i=!0,e=t.position+1)),s=t.input.charCodeAt(++t.position);n=t.input.slice(e,t.position),xPt.test(n)&&nt(t,"tag suffix cannot contain flow indicator characters")}return n&&!qie.test(n)&&nt(t,"tag name cannot contain such characters: "+n),a?t.tag=n:Un.call(t.tagMap,r)?t.tag=t.tagMap[r]+n:r==="!"?t.tag="!"+n:r==="!!"?t.tag="tag:yaml.org,2002:"+n:nt(t,'undeclared tag handle "'+r+'"'),!0}function EPt(t){var e,a;if(a=t.input.charCodeAt(t.position),a!==38)return!1;for(t.anchor!==null&&nt(t,"duplication of an anchor property"),a=t.input.charCodeAt(++t.position),e=t.position;a!==0&&!$a(a)&&!qc(a);)a=t.input.charCodeAt(++t.position);return t.position===e&&nt(t,"name of an anchor node must contain at least one character"),t.anchor=t.input.slice(e,t.position),!0}function PPt(t){var e,a,i;if(i=t.input.charCodeAt(t.position),i!==42)return!1;for(i=t.input.charCodeAt(++t.position),e=t.position;i!==0&&!$a(i)&&!qc(i);)i=t.input.charCodeAt(++t.position);return t.position===e&&nt(t,"name of an alias node must contain at least one character"),a=t.input.slice(e,t.position),Un.call(t.anchorMap,a)||nt(t,'unidentified alias "'+a+'"'),t.result=t.anchorMap[a],G1(t,!0,-1),!0}function jc(t,e,a,i,r){var n,s,o,u=1,c=!1,d=!1,l,f,b,y,g;if(t.listener!==null&&t.listener("open",t),t.tag=null,t.anchor=null,t.kind=null,t.result=n
`),t.charCodeAt(0)===65279&&(t=t.slice(1)));var a=new SPt(t,e),i=t.indexOf("\0");for(i!==-1&&(a.position=i,nt(a,"null byte is not allowed in input")),a.input+="\0";a.input.charCodeAt(a.position)===32;)a.lineIndent+=1,a.position+=1;for(;a.position<a.length-1;)IPt(a);return a.documents}function Jie(t,e,a){e!==null&&typeof e=="object"&&typeof a>"u"&&(a=e,e=null);var i=Qie(t,a);if(typeof e!="function")return i;for(var r=0,n=i.length;r<n;r+=1)e(i[r])}function ere(t,e){var a=Qie(t,e);if(a.length!==0){if(a.length===1)return a[0];throw new Nie("expected a single document in the stream, but found more")}}function NPt(t,e,a){return typeof e=="object"&&e!==null&&typeof a>"u"&&(a=e,e=null),Jie(t,e,Ss.extend({schema:Rie},a))}function RPt(t,e){return ere(t,Ss.extend({schema:Rie},e))}X6.exports.loadAll=Jie,X6.exports.load=ere,X6.exports.safeLoadAll=NPt,X6.exports.safeLoad=RPt;var C0});var zre=ut((QL1,wT)=>{"use strict";var K6=M0(),Q6=Oc(),FPt=Z6(),OPt=Hc(),are=Object.prototype.toString,ire=Object.prototype.hasOwnProperty,BPt=9,J6=10,HPt=13,qPt=32,VPt=33,jPt=34,rre=35,UPt=37,WPt=38,GPt=39,YPt=42,sre=44,ZPt=45,nre=58,XPt=61,KPt=62,QPt=63,JPt=64,ore=91,lre=93,eIt=96,cre=123,tIt=124,dre=125,j2={};j2[0]="\\0",j2[7]="\\a",j2[8]="\\b",j2[9]="\\t",j2[10]="\\n",j2[11]="\\v",j2[12]="\\f",j2[13]="\\r",j2[27]="\\e",j2[34]='\\"',j2[92]="\\\\",j2[133]="\\N",j2[160]="\\_",j2[8232]="\\L",j2[8233]="\\P";var aIt=["y","Y","yes","Yes","YES","on","On","ON","n","N","no","No","NO","off","Off","OFF"];function iIt(t,e){var a,i,r,n,s,o,u;if(e===null)return{};for(a={},i=Object.keys(e),r=0,n=i.length;r<n;r+=1)s=i[r],o=String(e[s]),s.slice(0,2)==="!!"&&(s="tag:yaml.org,2002:"+s.slice(2)),u=t.compiledTypeMap.fallback[s],u&&ire.call(u.styleAliases,o)&&(o=u.styleAliases[o]),a[s]=o;return a}function pre(t){var e,a,i;if(e=t.toString(16).toUpperCase(),t<=255)a="x",i=2;else if(t<=65535)a="u",i=4;else if(t<=4294967295)a="U",i=8;else throw new Q6("code point within a string may not be greater than 0xFFFFFFFF");return"\\"+a+K6.repeat("0",i-e.length)+e}function rIt(t){this.schema=t.schema||FPt,this.indent=Math.max(1,t.indent||2),this.noArrayIndent=t.noArrayIndent||!1,this.skipInvalid=t.skipInvalid||!1,this.flowLevel=K6.isNothing(t.flowLevel)?-1:t.flowLevel,this.styleMap=iIt(this.schema,t.styles||null),this.sortKeys=t.sortKeys||!1,this.lineWidth=t.lineWidth||80,this.noRefs=t.noRefs||!1,this.noCompatMode=t.noCompatMode||!1,this.condenseFlow=t.condenseFlow||!1,this.implicitTypes=this.schema.compiledImplicit,this.explicitTypes=this.schema.compiledExplicit,this.tag=null,this.result="",this.duplicates=[],this.usedDuplicates=null}function ure(t,e){for(var a=K6.repeat(" ",e),i=0,r=-1,n="",s,o=t.length;i<o;)r=t.indexOf(`
`,i),r===-1?(s=t.slice(i),i=o):(s=t.slice(i,r+1),i=r+1),s.length&&s!==`
`&&(n+=a),n+=s;return n}function vT(t,e){return`
`+K6.repeat(" ",t.indent*e)}function sIt(t,e){var a,i,r;for(a=0,i=t.implicitTypes.length;a<i;a+=1)if(r=t.implicitTypes[a],r.resolve(e))return!0;return!1}function yT(t){return t===qPt||t===BPt}function Uc(t){return 32<=t&&t<=126||161<=t&&t<=55295&&t!==8232&&t!==8233||57344<=t&&t<=65533&&t!==65279||65536<=t&&t<=1114111}function nIt(t){return Uc(t)&&!yT(t)&&t!==65279&&t!==HPt&&t!==J6}function hre(t,e){return Uc(t)&&t!==65279&&t!==sre&&t!==ore&&t!==lre&&t!==cre&&t!==dre&&t!==nre&&(t!==rre||e&&nIt(e))}function oIt(t){return Uc(t)&&t!==65279&&!yT(t)&&t!==ZPt&&t!==QPt&&t!==nre&&t!==sre&&t!==ore&&t!==lre&&t!==cre&&t!==dre&&t!==rre&&t!==WPt&&t!==YPt&&t!==VPt&&t!==tIt&&t!==XPt&&t!==KPt&&t!==GPt&&t!==jPt&&t!==UPt&&t!==JPt&&t!==eIt}function fre(t){var e=/^\n* /;return e.test(t)}var mre=1,gre=2,bre=3,vre=4,jh=5;function lIt(t,e,a,i,r){var n,s,o,u=!1,c=!1,d=i!==-1,l=-1,f=oIt(t.charCodeAt(0))&&!yT(t.charCodeAt(t.length-1));if(e)for(n=0;n<t.length;n++){if(s=t.charCodeAt(n),!Uc(s))return jh;o=n>0?t.charCodeAt(n-1):null,f=f&&hre(s,o)}else{for(n=0;n<t.length;n++){if(s=t.charCodeAt(n),s===J6)u=!0,d&&(c=c||n-l-1>i&&t[l+1]!==" ",l=n);else if(!Uc(s))return jh;o=n>0?t.charCodeAt(n-1):null,f=f&&hre(s,o)}c=c||d&&n-l-1>i&&t[l+1]!==" "}return!u&&!c?f&&!r(t)?mre:gre:a>9&&fre(t)?jh:c?vre:bre}function cIt(t,e,a,i){t.dump=(function(){if(e.length===0)return"''";if(!t.noCompatMode&&aIt.indexOf(e)!==-1)return"'"+e+"'";var r=t.indent*Math.max(1,a),n=t.lineWidth===-1?-1:Math.max(Math.min(t.lineWidth,40),t.lineWidth-r),s=i||t.flowLevel>-1&&a>=t.flowLevel;function o(u){return sIt(t,u)}switch(lIt(e,s,t.indent,n,o)){case mre:return e;case gre:return"'"+e.replace(/'/g,"''")+"'";case bre:return"|"+yre(e,t.indent)+xre(ure(e,r));case vre:return">"+yre(e,t.indent)+xre(ure(dIt(e,n),r));case jh:return'"'+pIt(e,n)+'"';default:throw new Q6("impossible error: invalid scalar style")}})()}function yre(t,e){var a=fre(t)?String(e):"",i=t[t.length-1]===`
`,r=i&&(t[t.length-2]===`
`||t===`
`),n=r?"+":i?"":"-";return a+n+`
`}function xre(t){return t[t.length-1]===`
`?t.slice(0,-1):t}function dIt(t,e){for(var a=/(\n+)([^\n]*)/g,i=(function(){var c=t.indexOf(`
`);return c=c!==-1?c:t.length,a.lastIndex=c,wre(t.slice(0,c),e)})(),r=t[0]===`
`||t[0]===" ",n,s;s=a.exec(t);){var o=s[1],u=s[2];n=u[0]===" ",i+=o+(!r&&!n&&u!==""?`
`:"")+wre(u,e),r=n}return i}function wre(t,e){if(t===""||t[0]===" ")return t;for(var a=/ [^ ]/g,i,r=0,n,s=0,o=0,u="";i=a.exec(t);)o=i.index,o-r>e&&(n=s>r?s:o,u+=`
`+t.slice(r,n),r=n+1),s=o;return u+=`
`,t.length-r>e&&s>r?u+=t.slice(r,s)+`
`+t.slice(s+1):u+=t.slice(r),u.slice(1)}function pIt(t){for(var e="",a,i,r,n=0;n<t.length;n++){if(a=t.charCodeAt(n),a>=55296&&a<=56319&&(i=t.charCodeAt(n+1),i>=56320&&i<=57343)){e+=pre((a-55296)*1024+i-56320+65536),n++;continue}r=j2[a],e+=!r&&Uc(a)?t[n]:r||pre(a)}return e}function uIt(t,e,a){var i="",r=t.tag,n,s;for(n=0,s=a.length;n<s;n+=1)_0(t,e,a[n],!1,!1)&&(n!==0&&(i+=","+(t.condenseFlow?"":" ")),i+=t.dump);t.tag=r,t.dump="["+i+"]"}function hIt(t,e,a,i){var r="",n=t.tag,s,o;for(s=0,o=a.length;s<o;s+=1)_0(t,e+1,a[s],!0,!0)&&((!i||s!==0)&&(r+=vT(t,e)),t.dump&&J6===t.dump.charCodeAt(0)?r+="-":r+="- ",r+=t.dump);t.tag=n,t.dump=r||"[]"}function fIt(t,e,a){var i="",r=t.tag,n=Object.keys(a),s,o,u,c,d;for(s=0,o=n.length;s<o;s+=1)d="",s!==0&&(d+=", "),t.condenseFlow&&(d+='"'),u=n[s],c=a[u],_0(t,e,u,!1,!1)&&(t.dump.length>1024&&(d+="? "),d+=t.dump+(t.condenseFlow?'"':"")+":"+(t.condenseFlow?"":" "),_0(t,e,c,!1,!1)&&(d+=t.dump,i+=d));t.tag=r,t.dump="{"+i+"}"}function mIt(t,e,a,i){var r="",n=t.tag,s=Object.keys(a),o,u,c,d,l,f;if(t.sortKeys===!0)s.sort();else if(typeof t.sortKeys=="function")s.sort(t.sortKeys);else if(t.sortKeys)throw new Q6("sortKeys must be a boolean or a function");for(o=0,u=s.length;o<u;o+=1)f="",(!i||o!==0)&&(f+=vT(t,e)),c=s[o],d=a[c],_0(t,e+1,c,!0,!0,!0)&&(l=t.tag!==null&&t.tag!=="?"||t.dump&&t.dump.length>1024,l&&(t.dump&&J6===t.dump.charCodeAt(0)?f+="?":f+="? "),f+=t.dump,l&&(f+=vT(t,e)),_0(t,e+1,d,!0,l)&&(t.dump&&J6===t.dump.charCodeAt(0)?f+=":":f+=": ",f+=t.dump,r+=f));t.tag=n,t.dump=r||"{}"}function Mre(t,e,a){var i,r,n,s,o,u;for(r=a?t.explicitTypes:t.implicitTypes,n=0,s=r.length;n<s;n+=1)if(o=r[n],(o.instanceOf||o.predicate)&&(!o.instanceOf||typeof e=="object"&&e instanceof o.instanceOf)&&(!o.predicate||o.predicate(e))){if(t.tag=a?o.tag:"?",o.represent){if(u=t.styleMap[o.tag]||o.defaultStyle,are.call(o.represent)==="[object Function]")i=o.represent(e,u);else if(ire.call(o.represent,u))i=o.represent[u](e,u);else throw new Q6("!<"+o.tag+'> tag resolver accepts not "'+u+'" style');t.dump=i}return!0}return!1}function _0(t,e,a,i,r,n){t.tag=null,t.dump=a,Mre(t,a,!1)||Mre(t,a,!0);var s=are.call(t.dump);i&&(i=t.flowLevel<0||t.flowLevel>e);var o=s==="[object Object]"||s==="[object Array]",u,c;if(o&&(u=t.duplicates.indexOf(a),c=u!==-1),(t.tag!==null&&t.tag!=="?"||c||t.indent!==2&&e>0)&&(r=!1),c&&t.usedDuplicates[u])t.dump="*ref_"+u;else{if(o&&c&&!t.usedDuplicates[u]&&(t.usedDuplicates[u]=!0),s==="[object Object]")i&&Object.keys(t.dump).length!==0?(mIt(t,e,t.dump,r),c&&(t.dump="&ref_"+u+t.dump)):(fIt(t,e,t.dump),c&&(t.dump="&ref_"+u+" "+t.dump));else if(s==="[object Array]"){var d=t.noArrayIndent&&e>0?e-1:e;i&&t.dump.length!==0?(hIt(t,d,t.dump,r),c&&(t.dump="&ref_"+u+t.dump)):(uIt(t,d,t.dump),c&&(t.dump="&ref_"+u+" "+t.dump))}else if(s==="[object String]")t.tag!=="?"&&cIt(t,t.dump,e,n);else{if(t.skipInvalid)return!1;throw new Q6("unacceptable kind of an object to dump "+s)}t.tag!==null&&t.tag!=="?"&&(t.dump="!<"+t.tag+"> "+t.dump)}return!0}function gIt(t,e){var a=[],i=[],r,n;for(xT(t,a,i),r=0,n=i.length;r<n;r+=1)e.duplicates.push(a[i[r]]);e.usedDuplicates=new Array(n)}function xT(t,e,a){var i,r,n;if(t!==null&&typeof t=="object")if(r=e.indexOf(t),r!==-1)a.indexOf(r)===-1&&a.push(r);else if(e.push(t),Array.isArray(t))for(r=0,n=t.length;r<n;r+=1)xT(t[r],e,a);else for(i=Object.keys(t),r=0,n=i.length;r<n;r+=1)xT(t[i[r]],e,a)}function kre(t,e){e=e||{};var a=new rIt(e);return a.noRefs||gIt(t,a),_0(a,0,t,!0,!0)?a.dump+`
`:""}function bIt(t,e){return kre(t,K6.extend({schema:OPt},e))}wT.exports.dump=kre,wT.exports.safeDump=bIt});var Cre=ut((JL1,E1)=>{"use strict";var Uh=tre(),Sre=zre();function Wh(t){return function(){throw new Error("Function "+t+" is deprecated and cannot be used.")}}E1.exports.Type=e2(),E1.exports.Schema=k0(),E1.exports.FAILSAFE_SCHEMA=Fh(),E1.exports.JSON_SCHEMA=uT(),E1.exports.CORE_SCHEMA=hT(),E1.exports.DEFAULT_SAFE_SCHEMA=Hc(),E1.exports.DEFAULT_FULL_SCHEMA=Z6(),E1.exports.load=Uh.load,E1.exports.loadAll=Uh.loadAll,E1.exports.safeLoad=Uh.safeLoad,E1.exports.safeLoadAll=Uh.safeLoadAll,E1.exports.dump=Sre.dump,E1.exports.safeDump=Sre.safeDump,E1.exports.YAMLException=Oc(),E1.exports.MINIMAL_SCHEMA=Fh(),E1.exports.SAFE_SCHEMA=Hc(),E1.exports.DEFAULT_SCHEMA=Z6(),E1.exports.scan=Wh("scan"),E1.exports.parse=Wh("parse"),E1.exports.compose=Wh("compose"),E1.exports.addConstructor=Wh("addConstructor")});var Tre=ut((e$1,_re)=>{"use strict";var vIt=Cre();_re.exports=vIt});var Lre=ut(Er=>{"use strict";var yIt=Er&&Er.__createBinding||(Object.create?(function(t,e,a,i){i===void 0&&(i=a),Object.defineProperty(t,i,{enumerable:!0,get:function(){return e[a]}})}):(function(t,e,a,i){i===void 0&&(i=a),t[i]=e[a]})),xIt=Er&&Er.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),wIt=Er&&Er.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(t!=null)for(var a in t)a!=="default"&&Object.hasOwnProperty.call(t,a)&&yIt(e,t,a);return xIt(e,t),e};Object.defineProperty(Er,"__esModule",{value:!0}),Er.jsYaml=void 0;var MIt=wIt(Tre());Er.jsYaml=MIt});var Dre=ut(ui=>{"use strict";var kIt=ui&&ui.__createBinding||(Object.create?(function(t,e,a,i){i===void 0&&(i=a),Object.defineProperty(t,i,{enumerable:!0,get:function(){return e[a]}})}):(function(t,e,a,i){i===void 0&&(i=a),t[i]=e[a]})),zIt=ui&&ui.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),SIt=ui&&ui.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(t!=null)for(var a in t)a!=="default"&&Object.hasOwnProperty.call(t,a)&&kIt(e,t,a);return zIt(e,t),e};Object.defineProperty(ui,"__esModule",{value:!0}),ui.objectToYamlString=ui.yamlStringToObject=void 0;var $re=SIt(Lre());ui.yamlStringToObject=async(t,e={})=>$re.jsYaml.safeLoad(t),ui.objectToYamlString=async(t,e={})=>$re.jsYaml.safeDump(t)});function MT(t){if(t)throw t}var Are=v(()=>{});var Hre=ut((r$1,Bre)=>{"use strict";var Gh=Object.prototype.hasOwnProperty,Ere=Object.prototype.toString,Pre=Object.defineProperty,Ire=Object.getOwnPropertyDescriptor,Nre=function(e){return typeof Array.isArray=="function"?Array.isArray(e):Ere.call(e)==="[object Array]"},Rre=function(e){if(!e||Ere.call(e)!=="[object Object]")return!1;var a=Gh.call(e,"constructor"),i=e.constructor&&e.constructor.prototype&&Gh.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!a&&!i)return!1;var r;for(r in e);return typeof r>"u"||Gh.call(e,r)},Fre=function(e,a){Pre&&a.name==="__proto__"?Pre(e,a.name,{enumerable:!0,configurable:!0,value:a.newValue,writable:!0}):e[a.name]=a.newValue},Ore=function(e,a){if(a==="__proto__")if(Gh.call(e,a)){if(Ire)return Ire(e,a).value}else return;return e[a]};Bre.exports=function t(){var e,a,i,r,n,s,o=arguments[0],u=1,c=arguments.length,d=!1;for(typeof o=="boolean"&&(d=o,o=arguments[1]||{},u=2),(o==null||typeof o!="object"&&typeof o!="function")&&(o={});u<c;++u)if(e=arguments[u],e!=null)for(a in e)i=Ore(o,a),r=Ore(e,a),o!==r&&(d&&r&&(Rre(r)||(n=Nre(r)))?(n?(n=!1,s=i&&Nre(i)?i:[]):s=i&&Rre(i)?i:{},Fre(o,{name:a,newValue:t(d,s,r)})):typeof r<"u"&&Fre(o,{name:a,newValue:r}));return o}});var Gn=v(()=>{});function e5(t){if(typeof t!="object"||t===null)return!1;let e=Object.getPrototypeOf(t);return(e===null||e===Object.prototype||Object.getPrototypeOf(e)===null)&&!(Symbol.toStringTag in t)&&!(Symbol.iterator in t)}var qre=v(()=>{});function kT(){let t=[],e={run:a,use:i};return e;function a(...r){let n=-1,s=r.pop();if(typeof s!="function")throw new Type
`:" ")+n.indentLines(n.containerFlow(i,o.current()),e?Cse:uNt))),c(),u}}function uNt(t,e,a){return e===0?t:Cse(t,e,a)}function Cse(t,e,a){return(a?"":"    ")+t}var _se=v(()=>{Gn();Xn();Sse.peek=pNt});var Tse=v(()=>{_se()});function VT(){return{canContainEols:["delete"],enter:{strikethrough:fNt},exit:{strikethrough:mNt}}}function jT(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:hNt}],handlers:{delete:Lse}}}function fNt(t){this.enter({type:"delete",children:[]},t)}function mNt(t){this.exit(t)}function Lse(t,e,a,i){let r=a.createTracker(i),n=a.enter("strikethrough"),s=r.move("~~");return s+=a.containerPhrasing(t,{...r.current(),before:s,after:"~"}),s+=r.move("~~"),n(),s}function gNt(){return"~"}var hNt,$se=v(()=>{hNt=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];Lse.peek=gNt});var Dse=v(()=>{$se()});function bNt(t){return t.length}function Ese(t,e){let a=e||{},i=(a.align||[]).concat(),r=a.stringLength||bNt,n=[],s=[],o=[],u=[],c=0,d=-1;for(;++d<t.length;){let g=[],h=[],x=-1;for(t[d].length>c&&(c=t[d].length);++x<t[d].length;){let M=vNt(t[d][x]);if(a.alignDelimiters!==!1){let S=r(M);h[x]=S,(u[x]===void 0||S>u[x])&&(u[x]=S)}g.push(M)}s[d]=g,o[d]=h}let l=-1;if(typeof i=="object"&&"length"in i)for(;++l<c;)n[l]=Ase(i[l]);else{let g=Ase(i);for(;++l<c;)n[l]=g}l=-1;let f=[],b=[];for(;++l<c;){let g=n[l],h="",x="";g===99?(h=":",x=":"):g===108?h=":":g===114&&(x=":");let M=a.alignDelimiters===!1?1:Math.max(1,u[l]-h.length-x.length),S=h+"-".repeat(M)+x;a.alignDelimiters!==!1&&(M=h.length+M+x.length,M>u[l]&&(u[l]=M),b[l]=M),f[l]=S}s.splice(1,0,f),o.splice(1,0,b),d=-1;let y=[];for(;++d<s.length;){let g=s[d],h=o[d];l=-1;let x=[];for(;++l<c;){let M=g[l]||"",S="",N="";if(a.alignDelimiters!==!1){let _=u[l]-(h[l]||0),k=n[l];k===114?S=" ".repeat(_):k===99?_%2?(S=" ".repeat(_/2+.5),N=" ".repeat(_/2-.5)):(S=" ".repeat(_/2),N=S):N=" ".repeat(_)}a.delimiterStart!==!1&&!l&&x.push("|"),a.padding!==!1&&!(a.alignDelimiters===!1&&M==="")&&(a.delimiterStart!==!1||l)&&x.push(" "),a.alignDelimiters!==!1&&x.push(S),x.push(M),a.alignDelimiters!==!1&&x.push(N),a.padding!==!1&&x.push(" "),(a.delimiterEnd!==!1||l!==c-1)&&x.push("|")}y.push(a.delimiterEnd===!1?x.join("").replace(/ +$/,""):x.join(""))}return y.join(`
`)}function vNt(t){return t==null?"":String(t)}function Ase(t){let e=typeof t=="string"?t.codePointAt(0):0;return e===67||e===99?99:e===76||e===108?108:e===82||e===114?114:0}var Pse=v(()=>{});function t9(t,e){let a=e||{};function i(r,...n){let s=i.invalid,o=i.handlers;if(r&&Ise.call(r,t)){let u=String(r[t]);s=Ise.call(o,u)?o[u]:i.unknown}if(s)return s.call(this,r,...n)}return i.handlers=a.handlers||{},i.invalid=a.invalid,i.unknown=a.unknown,i}var Ise,UT=v(()=>{Ise={}.hasOwnProperty});function WT(t,e){let a=-1,i;if(e.extensions)for(;++a<e.extensions.length;)WT(t,e.extensions[a]);for(i in e)if(yNt.call(e,i))switch(i){case"extensions":break;case"unsafe":{Nse(t[i],e[i]);break}case"join":{Nse(t[i],e[i]);break}case"handlers":{xNt(t[i],e[i]);break}default:t.options[i]=e[i]}return t}function Nse(t,e){e&&t.push(...e)}function xNt(t,e){e&&Object.assign(t,e)}var yNt,Rse=v(()=>{yNt={}.hasOwnProperty});function Fse(t,e,a,i){let r=a.enter("blockquote"),n=a.createTracker(i);n.move("> "),n.shift(2);let s=a.indentLines(a.containerFlow(t,n.current()),wNt);return r(),s}function wNt(t,e,a){return">"+(a?"":" ")+t}var Ose=v(()=>{});function a9(t,e){return Bse(t,e.inConstruct,!0)&&!Bse(t,e.notInConstruct,!1)}function Bse(t,e,a){if(typeof e=="string"&&(e=[e]),!e||e.length===0)return a;let i=-1;for(;++i<e.length;)if(t.includes(e[i]))return!0;return!1}var GT=v(()=>{});function YT(t,e,a,i){let r=-1;for(;++r<a.unsafe.length;)if(a.unsafe[r].character===`
`&&a9(a.stack,a.unsafe[r]))return/[ \t]/.test(i.before)?"":" ";return`\\
`}var Hse=v(()=>{GT()});function qse(t,e){let a=String(t),i=a.indexOf(e),r=i,n=0,s=0;if(typeof e!="string")throw new TypeError("Expected substring");for(;i!==-1;)i===r?++n>s&&(s=n):n=1,r=i+e.length,i=a.indexOf(e,r);return s}var Vse=v(()=>{});function n5(t,e){return!!(e.options.fences===!1&&t.value&&!t.lang&&/[^ \r\n]/.test(t.value)&&!/^[\t ]*(?:[\r\n]|$)|(?:^|[\r\n])[\t ]*$/.test(t.value))}var ZT=v(()=>{});function jse(t){let e=t.options.fence||"`";if(e!=="`"&&e!=="~")throw new Error("Cannot serialize code with `"+e+"` for `options.fence`, expected `` ` `` or `~`");return e}var Use=v(()=>{});function Wse(t,e,a,i){let r=jse(a),n=t.value||"",s=r==="`"?"GraveAccent":"Tilde";if(n5(t,a)){let l=a.enter("codeIndented"),f=a.indentLines(n,MNt);return l(),f}let o=a.createTracker(i),u=r.repeat(Math.max(qse(n,r)+1,3)),c=a.enter("codeFenced"),d=o.move(u);if(t.lang){let l=a.enter(`codeFencedLang${s}`);d+=o.move(a.safe(t.lang,{before:d,after:" ",encode:["`"],...o.current()})),l()}if(t.lang&&t.meta){let l=a.enter(`codeFencedMeta${s}`);d+=o.move(" "),d+=o.move(a.safe(t.meta,{before:d,after:`
`,encode:["`"],...o.current()})),l()}return d+=o.move(`
`),n&&(d+=o.move(n+`
`)),d+=o.move(u),c(),d}function MNt(t,e,a){return(a?"":"    ")+t}var Gse=v(()=>{Vse();ZT();Use()});function Zc(t){let e=t.options.quote||'"';if(e!=='"'&&e!=="'")throw new Error("Cannot serialize title with `"+e+"` for `options.quote`, expected `\"`, or `'`");return e}var i9=v(()=>{});function Yse(t,e,a,i){let r=Zc(a),n=r==='"'?"Quote":"Apostrophe",s=a.enter("definition"),o=a.enter("label"),u=a.createTracker(i),c=u.move("[");return c+=u.move(a.safe(a.associationId(t),{before:c,after:"]",...u.current()})),c+=u.move("]: "),o(),!t.url||/[\0- \u007F]/.test(t.url)?(o=a.enter("destinationLiteral"),c+=u.move("<"),c+=u.move(a.safe(t.url,{before:c,after:">",...u.current()})),c+=u.move(">")):(o=a.enter("destinationRaw"),c+=u.move(a.safe(t.url,{before:c,after:t.title?" ":`
`,...u.current()}))),o(),t.title&&(o=a.enter(`title${n}`),c+=u.move(" "+r),c+=u.move(a.safe(t.title,{before:c,after:r,...u.current()})),c+=u.move(r),o()),s(),c}var Zse=v(()=>{i9()});function Xse(t){let e=t.options.emphasis||"*";if(e!=="*"&&e!=="_")throw new Error("Cannot serialize emphasis with `"+e+"` for `options.emphasis`, expected `*`, or `_`");return e}var Kse=v(()=>{});function Va(t){return"&#x"+t.toString(16).toUpperCase()+";"}var Xc=v(()=>{});function _s(t){if(t===null||Ct(t)||Pr(t))return 1;if(L0(t))return 2}var r9=v(()=>{Lt()});function Kc(t,e,a){let i=_s(t),r=_s(e);return i===void 0?r===void 0?a==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:r===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:i===1?r===void 0?{inside:!1,outside:!1}:r===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:r===void 0?{inside:!1,outside:!1}:r===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}var XT=v(()=>{r9()});function KT(t,e,a,i){let r=Xse(a),n=a.enter("emphasis"),s=a.createTracker(i),o=s.move(r),u=s.move(a.containerPhrasing(t,{after:r,before:o,...s.current()})),c=u.charCodeAt(0),d=Kc(i.before.charCodeAt(i.before.length-1),c,r);d.inside&&(u=Va(c)+u.slice(1));let l=u.charCodeAt(u.length-1),f=Kc(i.after.charCodeAt(0),l,r);f.inside&&(u=u.slice(0,-1)+Va(l));let b=s.move(r);return n(),a.attentionEncodeSurroundingInfo={after:f.outside,before:d.outside},o+u+b}function kNt(t,e,a){return a.options.emphasis||"*"}var Qse=v(()=>{Kse();Xc();XT();KT.peek=kNt});function o5(t,e,a,i){let r,n,s;typeof e=="function"&&typeof a!="function"?(n=void 0,s=e,r=a):(n=e,s=a,r=i),s5(t,n,o,r);function o(u,c){let d=c[c.length-1],l=d?d.children.indexOf(u):void 0;return s(u,l,d)}}var Jse=v(()=>{e9();e9()});var QT=v(()=>{Jse()});function D0(t,e){let a=e||zNt,i=typeof a.includeImageAlt=="boolean"?a.includeImageAlt:!0,r=typeof a.includeHtml=="boolean"?a.includeHtml:!0;return ene(t,i,r)}function ene(t,e,a){if(SNt(t)){if("value"in t)return t.type==="html"&&!a?"":t.value;if(e&&"alt"in t&&t.alt)return t.alt;if("children"in t)return tne(t.children,e,a)}return Array.isArray(t)?tne(t,e,a):""}function tne(t,e,a){let i=[],r=-1;for(;++r<t.length;)i[r]=ene(t[r],e,a);return i.join("")}function SNt(t){return!!(t&&typeof t=="object")}var zNt,ane=v(()=>{zNt={}});var s9=v(()=>{ane()});function n9(t,e){let a=!1;return o5(t,function(i){if("value"in i&&/\r?\n|\r/.test(i.value)||i.type==="break")return a=!0,$0}),!!((!t.depth||t.depth<3)&&D0(t)&&(e.options.setext||a))}var JT=v(()=>{QT();s9()});function ine(t,e,a,i){let r=Math.max(Math.min(6,t.depth||1),1),n=a.createTracker(i);if(n9(t,a)){let d=a.enter("headingSetext"),l=a.enter("phrasing"),f=a.containerPhrasing(t,{...n.current(),before:`
`,after:`
`});return l(),d(),f+`
`+(r===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
`))+1))}let s="#".repeat(r),o=a.enter("headingAtx"),u=a.enter("phrasing");n.move(s+" ");let c=a.containerPhrasing(t,{before:"# ",after:`
`,...n.current()});return/^[\t ]/.test(c)&&(c=Va(c.charCodeAt(0))+c.slice(1)),c=c?s+" "+c:s,a.options.closeAtx&&(c+=" "+s),u(),o(),c}var rne=v(()=>{Xc();JT()});function eL(t){return t.value||""}function CNt(){return"<"}var sne=v(()=>{eL.peek=CNt});function tL(t,e,a,i){let r=Zc(a),n=r==='"'?"Quote":"Apostrophe",s=a.enter("image"),o=a.enter("label"),u=a.createTracker(i),c=u.move("![");return c+=u.move(a.safe(t.alt,{before:c,after:"]",...u.current()})),c+=u.move("]("),o(),!t.url&&t.title||/[\0- \u007F]/.test(t.url)?(o=a.enter("destinationLiteral"),c+=u.move("<"),c+=u.move(a.safe(t.url,{before:c,after:">",...u.current()})),c+=u.move(">")):(o=a.enter("destinationRaw"),c+=u.move(a.safe(t.url,{before:c,after:t.title?" ":")",...u.current()}))),o(),t.title&&(o=a.enter(`title${n}`),c+=u.move(" "+r),c+=u.move(a.safe(t.title,{before:c,after:r,...u.current()})),c+=u.move(r),o()),c+=u.move(")"),s(),c}function _Nt(){return"!"}var nne=v(()=>{i9();tL.peek=_Nt});function aL(t,e,a,i){let r=t.referenceType,n=a.enter("imageReference"),s=a.enter("label"),o=a.createTracker(i),u=o.move("!["),c=a.safe(t.alt,{before:u,after:"]",...o.current()});u+=o.move(c+"]["),s();let d=a.stack;a.stack=[],s=a.enter("reference");let l=a.safe(a.associationId(t),{before:u,after:"]",...o.current()});return s(),a.stack=d,n(),r==="full"||!c||c!==l?u+=o.move(l+"]"):r==="shortcut"?u=u.slice(0,-1):u+=o.move("]"),u}function TNt(){return"!"}var one=v(()=>{aL.peek=TNt});function iL(t,e,a){let i=t.value||"",r="`",n=-1;for(;new RegExp("(^|[^`])"+r+"([^`]|$)").test(i);)r+="`";for(/[^ \r\n]/.test(i)&&(/^[ \r\n]/.test(i)&&/[ \r\n]$/.test(i)||/^`|`$/.test(i))&&(i=" "+i+" ");++n<a.unsafe.length;){let s=a.unsafe[n],o=a.compilePattern(s),u;if(s.atBreak)for(;u=o.exec(i);){let c=u.index;i.charCodeAt(c)===10&&i.charCodeAt(c-1)===13&&c--,i=i.slice(0,c)+" "+i.slice(u.index+1)}}return r+i+r}function LNt(){return"`"}var lne=v(()=>{iL.peek=LNt});function rL(t,e){let a=D0(t);return!!(!e.options.resourceLink&&t.url&&!t.title&&t.children&&t.children.length===1&&t.children[0].type==="text"&&(a===t.url||"mailto:"+a===t.url)&&/^[a-z][a-z+.-]+:/i.test(t.url)&&!/[\0- <>\u007F]/.test(t.url))}var cne=v(()=>{s9()});function sL(t,e,a,i){let r=Zc(a),n=r==='"'?"Quote":"Apostrophe",s=a.createTracker(i),o,u;if(rL(t,a)){let d=a.stack;a.stack=[],o=a.enter("autolink");let l=s.move("<");return l+=s.move(a.containerPhrasing(t,{before:l,after:">",...s.current()})),l+=s.move(">"),o(),a.stack=d,l}o=a.enter("link"),u=a.enter("label");let c=s.move("[");return c+=s.move(a.containerPhrasing(t,{before:c,after:"](",...s.current()})),c+=s.move("]("),u(),!t.url&&t.title||/[\0- \u007F]/.test(t.url)?(u=a.enter("destinationLiteral"),c+=s.move("<"),c+=s.move(a.safe(t.url,{before:c,after:">",...s.current()})),c+=s.move(">")):(u=a.enter("destinationRaw"),c+=s.move(a.safe(t.url,{before:c,after:t.title?" ":")",...s.current()}))),u(),t.title&&(u=a.enter(`title${n}`),c+=s.move(" "+r),c+=s.move(a.safe(t.title,{before:c,after:r,...s.current()})),c+=s.move(r),u()),c+=s.move(")"),o(),c}function $Nt(t,e,a){return rL(t,a)?"<":"["}var dne=v(()=>{i9();cne();sL.peek=$Nt});function nL(t,e,a,i){let r=t.referenceType,n=a.enter("linkReference"),s=a.enter("label"),o=a.createTracker(i),u=o.move("["),c=a.containerPhrasing(t,{before:u,after:"]",...o.current()});u+=o.move(c+"]["),s();let d=a.stack;a.stack=[],s=a.enter("reference");let l=a.safe(a.associationId(t),{before:u,after:"]",...o.current()});return s(),a.stack=d,n(),r==="full"||!c||c!==l?u+=o.move(l+"]"):r==="shortcut"?u=u.slice(0,-1):u+=o.move("]"),u}function DNt(){return"["}var pne=v(()=>{nL.peek=DNt});function Qc(t){let e=t.options.bullet||"*";if(e!=="*"&&e!=="+"&&e!=="-")throw new Error("Cannot serialize items with `"+e+"` for `options.bullet`, expected `*`, `+`, or `-`");return e}var o9=v(()=>{});function une(t){let e=Qc(t),a=t.options.bulletOther;if(!a)return e==="*"?"-":"*";if(a!=="*"&&a!=="+"&&a!=="-")throw new Error("Cannot serialize items with `"+a+"` for `options.bulletOther`, expected `*`, `+`, or `-`");if(a===e)throw new Error("Expected `bullet` (`"+e+"`) and `bulletOther` (`"+
`,inConstruct:["codeFencedLangGraveAccent","codeFencedLangTilde","codeFencedMetaGraveAccent","codeFencedMetaTilde","destinationLiteral","headingAtx"]},{character:" ",after:"[\\r\\n]",inConstruct:"phrasing"},{character:" ",before:"[\\r\\n]",inConstruct:"phrasing"},{character:" ",inConstruct:["codeFencedLangGraveAccent","codeFencedLangTilde"]},{character:"!",after:"\\[",inConstruct:"phrasing",notInConstruct:E0},{character:'"',inConstruct:"titleQuote"},{atBreak:!0,character:"#"},{character:"#",inConstruct:"headingAtx",after:`(?:[\r
]|$)`},{character:"&",after:"[#A-Za-z]",inConstruct:"phrasing"},{character:"'",inConstruct:"titleApostrophe"},{character:"(",inConstruct:"destinationRaw"},{before:"\\]",character:"(",inConstruct:"phrasing",notInConstruct:E0},{atBreak:!0,before:"\\d+",character:")"},{character:")",inConstruct:"destinationRaw"},{atBreak:!0,character:"*",after:`(?:[ 	\r
*])`},{character:"*",inConstruct:"phrasing",notInConstruct:E0},{atBreak:!0,character:"+",after:`(?:[ 	\r
])`},{atBreak:!0,character:"-",after:`(?:[ 	\r
-])`},{atBreak:!0,before:"\\d+",character:".",after:`(?:[ 	\r
]|$)`},{atBreak:!0,character:"<",after:"[!/?A-Za-z]"},{character:"<",after:"[!/?A-Za-z]",inConstruct:"phrasing",notInConstruct:E0},{character:"<",inConstruct:"destinationLiteral"},{atBreak:!0,character:"="},{atBreak:!0,character:">"},{character:">",inConstruct:"destinationLiteral"},{atBreak:!0,character:"["},{character:"[",inConstruct:"phrasing",notInConstruct:E0},{character:"[",inConstruct:["label","reference"]},{character:"\\",after:"[\\r\\n]",inConstruct:"phrasing"},{character:"]",inConstruct:["label","reference"]},{atBreak:!0,character:"_"},{character:"_",inConstruct:"phrasing",notInConstruct:E0},{atBreak:!0,character:"`"},{character:"`",inConstruct:["codeFencedLangGraveAccent","codeFencedMetaGraveAccent"]},{character:"`",inConstruct:"phrasing",notInConstruct:E0},{atBreak:!0,character:"~"}]});function Kn(t){let e="&"+t+";";Hne.innerHTML=e;let a=Hne.textContent;return a.charCodeAt(a.length-1)===59&&t!=="semi"||a===e?!1:a}var Hne,l5=v(()=>{Hne=document.createElement("i")});function Jc(t,e){let a=Number.parseInt(t,e);return a<9||a===11||a>13&&a<32||a>126&&a<160||a>55295&&a<57344||a>64975&&a<65008||(a&65535)===65535||(a&65535)===65534||a>1114111?"\uFFFD":String.fromCodePoint(a)}var c9=v(()=>{});function d9(t){return t.replace(PNt,INt)}function INt(t,e,a){if(e)return e;if(a.charCodeAt(0)===35){let r=a.charCodeAt(1),n=r===120||r===88;return Jc(a.slice(n?2:1),n?16:10)}return Kn(a)||t}var PNt,pL=v(()=>{l5();c9();PNt=/\\([!-/:-@[-`{-~])|&(#(?:\d{1,7}|x[\da-f]{1,6})|[\da-z]{1,31});/gi});function qne(t){return t.label||!t.identifier?t.label||"":d9(t.identifier)}var Vne=v(()=>{pL()});function jne(t){if(!t._compiled){let e=(t.atBreak?"[\\r\\n][\\t ]*":"")+(t.before?"(?:"+t.before+")":"");t._compiled=new RegExp((e?"("+e+")":"")+(/[|\\{}()[\]^$+*?.-]/.test(t.character)?"\\":"")+t.character+(t.after?"(?:"+t.after+")":""),"g")}return t._compiled}var Une=v(()=>{});function Wne(t,e,a){let i=e.indexStack,r=t.children||[],n=[],s=-1,o=a.before,u;i.push(-1);let c=e.createTracker(a);for(;++s<r.length;){let d=r[s],l;if(i[i.length-1]=s,s+1<r.length){let y=e.handle.handlers[r[s+1].type];y&&y.peek&&(y=y.peek),l=y?y(r[s+1],t,e,{before:"",after:"",...c.current()}).charAt(0):""}else l=a.after;n.length>0&&(o==="\r"||o===`
`)&&d.type==="html"&&(n[n.length-1]=n[n.length-1].replace(/(\r?\n|\r)$/," "),o=" ",c=e.createTracker(a),c.move(n.join("")));let f=e.handle(d,t,e,{...c.current(),after:l,before:o});u&&u===f.slice(0,1)&&(f=Va(u.charCodeAt(0))+f.slice(1));let b=e.attentionEncodeSurroundingInfo;e.attentionEncodeSurroundingInfo=void 0,u=void 0,b&&(n.length>0&&b.before&&o===n[n.length-1].slice(-1)&&(n[n.length-1]=n[n.length-1].slice(0,-1)+Va(o.charCodeAt(0))),b.after&&(u=l)),c.move(f),n.push(f),o=f.slice(-1)}return i.pop(),n.join("")}var Gne=v(()=>{Xc()});function Yne(t,e,a){let i=e.indexStack,r=t.children||[],n=e.createTracker(a),s=[],o=-1;for(i.push(-1);++o<r.length;){let u=r[o];i[i.length-1]=o,s.push(n.move(e.handle(u,t,e,{before:`
`,after:`
`,...n.current()}))),u.type!=="list"&&(e.bulletLastUsed=void 0),o<r.length-1&&s.push(n.move(NNt(u,r[o+1],t,e)))}return i.pop(),s.join("")}function NNt(t,e,a,i){let r=i.join.length;for(;r--;){let n=i.join[r](t,e,a,i);if(n===!0||n===1)break;if(typeof n=="number")return`
`.repeat(1+n);if(n===!1)return`

<!---->

`}return`

`}var Zne=v(()=>{});function Xne(t,e){let a=[],i=0,r=0,n;for(;n=RNt.exec(t);)s(t.slice(i,n.index)),a.push(n[0]),i=n.index+n[0].length,r++;return s(t.slice(i)),a.join("");function s(o){a.push(e(o,r,!o))}}var RNt,Kne=v(()=>{RNt=/\r?\n|\r/g});function Jne(t,e,a){let i=(a.before||"")+(e||"")+(a.after||""),r=[],n=[],s={},o=-1;for(;++o<t.unsafe.length;){let d=t.unsafe[o];if(!a9(t.stack,d))continue;let l=t.compilePattern(d),f;for(;f=l.exec(i);){let b="before"in d||!!d.atBreak,y="after"in d,g=f.index+(b?f[1].length:0);r.includes(g)?(s[g].before&&!b&&(s[g].before=!1),s[g].after&&!y&&(s[g].after=!1)):(r.push(g),s[g]={before:b,after:y})}}r.sort(FNt);let u=a.before?a.before.length:0,c=i.length-(a.after?a.after.length:0);for(o=-1;++o<r.length;){let d=r[o];d<u||d>=c||d+1<c&&r[o+1]===d+1&&s[d].after&&!s[d+1].before&&!s[d+1].after||r[o-1]===d-1&&s[d].before&&!s[d-1].before&&!s[d-1].after||(u!==d&&n.push(Qne(i.slice(u,d),"\\")),u=d,/[!-/:-@[-`{-~]/.test(i.charAt(d))&&(!a.encode||!a.encode.includes(i.charAt(d)))?n.push("\\"):(n.push(Va(i.charCodeAt(d))),u++))}return n.push(Qne(i.slice(u,c),a.after)),n.join("")}function FNt(t,e){return t-e}function Qne(t,e){let a=/\\(?=[!-/:-@[-`{-~])/g,i=[],r=[],n=t+e,s=-1,o=0,u;for(;u=a.exec(n);)i.push(u.index);for(;++s<i.length;)o!==i[s]&&r.push(t.slice(o,i[s])),r.push("\\"),o=i[s];return r.push(t.slice(o)),r.join("")}var eoe=v(()=>{Xc();GT()});function toe(t){let e=t||{},a=e.now||{},i=e.lineShift||0,r=a.line||1,n=a.column||1;return{move:u,current:s,shift:o};function s(){return{now:{line:r,column:n},lineShift:i}}function o(c){i+=c}function u(c){let d=c||"",l=d.split(/\r?\n|\r/g),f=l[l.length-1];return r+=l.length-1,n=l.length===1?n+f.length:1+f.length+i,d}}var aoe=v(()=>{});function uL(t,e){let a=e||{},i={associationId:qne,containerPhrasing:qNt,containerFlow:VNt,createTracker:toe,compilePattern:jne,enter:n,handlers:{...A0},handle:void 0,indentLines:Xne,indexStack:[],join:[...Rne],options:{},safe:jNt,stack:[],unsafe:[...One]};WT(i,a),i.options.tightDefinitions&&i.join.push(HNt),i.handle=t9("type",{invalid:ONt,unknown:BNt,handlers:i.handlers});let r=i.handle(t,void 0,i,{before:`
`,after:`
`,now:{line:1,column:1},lineShift:0});return r&&r.charCodeAt(r.length-1)!==10&&r.charCodeAt(r.length-1)!==13&&(r+=`
`),r;function n(s){return i.stack.push(s),o;function o(){i.stack.pop()}}}function ONt(t){throw new Error("Cannot handle value `"+t+"`, expected node")}function BNt(t){let e=t;throw new Error("Cannot handle unknown node `"+e.type+"`")}function HNt(t,e){if(t.type==="definition"&&t.type===e.type)return 0}function qNt(t,e){return Wne(t,this,e)}function VNt(t,e){return Yne(t,this,e)}function jNt(t,e){return Jne(this,t,e)}var ioe=v(()=>{UT();Rse();dL();Fne();Bne();Vne();Une();Gne();Zne();Kne();eoe();aoe()});var p9=v(()=>{ioe();dL()});function fL(){return{enter:{table:UNt,tableData:roe,tableHeader:roe,tableRow:GNt},exit:{codeText:YNt,table:WNt,tableData:hL,tableHeader:hL,tableRow:hL}}}function UNt(t){let e=t._align;this.enter({type:"table",align:e.map(function(a){return a==="none"?null:a}),children:[]},t),this.data.inTable=!0}function WNt(t){this.exit(t),this.data.inTable=void 0}function GNt(t){this.enter({type:"tableRow",children:[]},t)}function hL(t){this.exit(t)}function roe(t){this.enter({type:"tableCell",children:[]},t)}function YNt(t){let e=this.resume();this.data.inTable&&(e=e.replace(/\\([\\|])/g,ZNt));let a=this.stack[this.stack.length-1];a.type,a.value=e,this.exit(t)}function ZNt(t,e){return e==="|"?e:t}function mL(t){let e=t||{},a=e.tableCellPadding,i=e.tablePipeAlign,r=e.stringLength,n=a?" ":"|";return{unsafe:[{character:"\r",inConstruct:"tableCell"},{character:`
`,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[	 :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:s,tableCell:u,tableRow:o}};function s(b,y,g,h){return c(d(b,g,h),b.align)}function o(b,y,g,h){let x=l(b,g,h),M=c([x]);return M.slice(0,M.indexOf(`
`))}function u(b,y,g,h){let x=g.enter("tableCell"),M=g.enter("phrasing"),S=g.containerPhrasing(b,{...h,before:n,after:n});return M(),x(),S}function c(b,y){return Ese(b,{align:y,alignDelimiters:i,padding:a,stringLength:r})}function d(b,y,g){let h=b.children,x=-1,M=[],S=y.enter("table");for(;++x<h.length;)M[x]=l(h[x],y,g);return S(),M}function l(b,y,g){let h=b.children,x=-1,M=[],S=y.enter("tableRow");for(;++x<h.length;)M[x]=u(h[x],b,y,g);return S(),M}function f(b,y,g){let h=A0.inlineCode(b,y,g);return g.stack.includes("tableCell")&&(h=h.replace(/\|/g,"\\$&")),h}}var soe=v(()=>{Gn();Pse();p9()});var noe=v(()=>{soe()});function gL(){return{exit:{taskListCheckValueChecked:ooe,taskListCheckValueUnchecked:ooe,paragraph:XNt}}}function bL(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:KNt}}}function ooe(t){let e=this.stack[this.stack.length-2];e.type,e.checked=t.type==="taskListCheckValueChecked"}function XNt(t){let e=this.stack[this.stack.length-2];if(e&&e.type==="listItem"&&typeof e.checked=="boolean"){let a=this.stack[this.stack.length-1];a.type;let i=a.children[0];if(i&&i.type==="text"){let r=e.children,n=-1,s;for(;++n<r.length;){let o=r[n];if(o.type==="paragraph"){s=o;break}}s===a&&(i.value=i.value.slice(1),i.value.length===0?a.children.shift():a.position&&i.position&&typeof i.position.start.offset=="number"&&(i.position.start.column++,i.position.start.offset++,a.position.start=Object.assign({},i.position.start)))}}this.exit(t)}function KNt(t,e,a,i){let r=t.children[0],n=typeof t.checked=="boolean"&&r&&r.type==="paragraph",s="["+(t.checked?"x":" ")+"] ",o=a.createTracker(i);n&&o.move(s);let u=A0.listItem(t,e,a,{...i,...o.current()});return n&&(u=u.replace(/^(?:[*+-]|\d+\.)([\r\n]| {1,3})/,c)),u;function c(d){return d+s}}var loe=v(()=>{Gn();p9()});var coe=v(()=>{loe()});function vL(){return[OT(),HT(),VT(),fL(),gL()]}function yL(t){return{extensions:[BT(),qT(t),jT(),mL(t),bL()]}}var doe=v(()=>{zse();Tse();Dse();noe();coe()});var poe=v(()=>{doe()});function O1(t,e,a,i){let r=t.length,n=0,s;if(e<0?e=-e>r?0:r+e:e=e>r?r:e,a=a>0?a:0,i.length<1e4)s=Array.from(i),s.unshift(e,a),t.splice(...s);else for(a&&t.splice(e,a);n<i.length;)s=i.slice(n,n+1e4),s.unshift(e,0),t.splice(...s),n+=1e4,e+=1e4}function Y1(t,e){return t.length>0?(O1(t,t.length,0,e),t):e}var Ir=v(()=>{});function u9(t){let e={},a=-1;for(;++a<t.length;)QNt(e,t[a]);return e}function QNt(t,e){let a;for(a in e){let r=(xL.call(t,a)?t[a]:void 0)||(t[a]={}),n=e[a],s;if(n)for(s in n){xL.call(r,s)||(r[s]=[]);let o=n[s];JNt(r[s],Array.isArray(o)?o:o?[o]:[])}}}function JNt(t,e){let a=-1,i=[];for(;++a<e.length;)(e[a].add==="after"?t:i).push(e[a]);O1(t,0,0,i)}function h9(t){let e={},a=-1;for(;++a<t.length;)eRt(e,t[a]);return e}function eRt(t,e){let a;for(a in e){let r=(xL.call(t,a)?t[a]:void 0)||(t[a]={}),n=e[a],s;if(n)for(s in n)r[s]=n[s]}}var xL,f9=v(()=>{Ir();xL={}.hasOwnProperty});function kL(){return{text:Nr}}function iRt(t,e,a){let i=this,r,n;return s;function s(l){return!wL(l)||!yoe.call(i,i.previous)||ML(i.events)?a(l):(t.enter("literalAutolink"),t.enter("literalAutolinkEmail"),o(l))}function o(l){return wL(l)?(t.consume(l),o):l===64?(t.consume(l),u):a(l)}function u(l){return l===46?t.check(aRt,d,c)(l):l===45||l===95||P1(l)?(n=!0,t.consume(l),u):d(l)}function c(l){return t.consume(l),r=!0,u}function d(l){return n&&r&&t2(i.previous)?(t.exit("literalAutolinkEmail"),t.exit("literalAutolink"),e(l)):a(l)}}function rRt(t,e,a){let i=this;return r;function r(s){return s!==87&&s!==119||!boe.call(i,i.previous)||ML(i.events)?a(s):(t.enter("literalAutolink"),t.enter("literalAutolinkWww"),t.check(tRt,t.attempt(uoe,t.attempt(hoe,n),a),a)(s))}function n(s){return t.exit("literalAutolinkWww"),t.exit("literalAutolink"),e(s)}}function sRt(t,e,a){let i=this,r="",n=!1;return s;function s(l){return(l===72||l===104)&&voe.call(i,i.previous)&&!ML(i.events)?(t.enter("literalAutolink"),t.enter("literalAutolinkHttp"),r+=String.fromCodePoint(l),t.consume(l),o):a(l)}function o(l){if(t2(l)&&r.length<5)return r+=String.fromCodePoint(l),t.consume(l),o;if(l===58){let f=r.toLow
`)}function _(){let Ie=r[r.length-1],Ge=Ie[Ie.length-1],$1=Ge?Ge.charCodeAt(Ge.length-1):null;$1===10||$1===13||$1===null||N()}function k(Ie){return g("ignoreEncode")?Ie:m9(Ie)}function I(){x()}function L(Ie){s.push(!Ie._loose),_(),M("<ol"),y("expectFirstItem",!0)}function A(Ie){s.push(!Ie._loose),_(),M("<ul"),y("expectFirstItem",!0)}function V(Ie){if(g("expectFirstItem")){let Ge=Number.parseInt(this.sliceSerialize(Ie),10);Ge!==1&&M(' start="'+k(String(Ge))+'"')}}function C(){g("expectFirstItem")?M(">"):T(),_(),M("<li>"),y("expectFirstItem"),y("lastWasTag")}function z(){T(),s.pop(),N(),M("</ol>")}function E(){T(),s.pop(),N(),M("</ul>")}function T(){g("lastWasTag")&&!g("slurpAllLineEndings")&&_(),M("</li>"),y("slurpAllLineEndings")}function $(){s.push(!1),_(),M("<blockquote>")}function H(){s.pop(),_(),M("</blockquote>"),y("slurpAllLineEndings")}function O(){s[s.length-1]||(_(),M("<p>")),y("slurpAllLineEndings")}function G(){s[s.length-1]?y("slurpAllLineEndings",!0):M("</p>")}function ne(){_(),M("<pre><code"),y("fencesCount",0)}function U(){let Ie=x();M(' class="language-'+Ie+'"')}function be(){let Ie=g("fencesCount")||0;Ie||(M(">"),y("slurpOneLineEnding",!0)),y("fencesCount",Ie+1)}function we(){_(),M("<pre><code>")}function j(){let Ie=g("fencesCount");Ie!==void 0&&Ie<2&&c.tightStack.length>0&&!g("lastWasTag")&&N(),g("flowCodeSeenData")&&_(),M("</code></pre>"),Ie!==void 0&&Ie<2&&_(),y("flowCodeSeenData"),y("fencesCount"),y("slurpOneLineEnding")}function fe(){n.push({image:!0}),a=void 0}function Ce(){n.push({})}function Y(Ie){n[n.length-1].labelId=this.sliceSerialize(Ie)}function P(){n[n.length-1].label=x()}function F(Ie){n[n.length-1].referenceId=this.sliceSerialize(Ie)}function W(){h(),n[n.length-1].destination=""}function B(){h(),y("ignoreEncode",!0)}function K(){n[n.length-1].destination=x(),y("ignoreEncode")}function ge(){n[n.length-1].title=x()}function ve(){let Ie=n.length-1,Ge=n[Ie],$1=Ge.referenceId||Ge.labelId,g2=Ge.destination===void 0?i[I1($1)]:Ge;for(a=!0;Ie--;)if(n[Ie].image){a=void 0;break}Ge.image?(M('<img src="'+Rr(g2.destination,e.allowDangerousProtocol?void 0:RFt)+'" alt="'),S(Ge.label),M('"')):M('<a href="'+Rr(g2.destination,e.allowDangerousProtocol?void 0:v0e)+'"'),M(g2.title?' title="'+g2.title+'"':""),Ge.image?M(" />"):(M(">"),S(Ge.label),M("</a>")),n.pop()}function $e(){h(),n.push({})}function q(Ie){x(),n[n.length-1].labelId=this.sliceSerialize(Ie)}function R(){h(),y("ignoreEncode",!0)}function te(){n[n.length-1].destination=x(),y("ignoreEncode")}function me(){n[n.length-1].title=x()}function ue(){let Ie=n[n.length-1],Ge=I1(Ie.labelId);x(),b0e.call(i,Ge)||(i[Ge]=n[n.length-1]),n.pop()}function _e(){y("slurpAllLineEndings",!0)}function he(Ie){g("headingRank")||(y("headingRank",this.sliceSerialize(Ie).length),_(),M("<h"+g("headingRank")+">"))}function ie(){h(),y("slurpAllLineEndings")}function ke(){y("slurpAllLineEndings",!0)}function Re(){M("</h"+g("headingRank")+">"),y("headingRank")}function Ue(Ie){y("headingRank",this.sliceSerialize(Ie).charCodeAt(0)===61?1:2)}function xe(){let Ie=x();_(),M("<h"+g("headingRank")+">"),S(Ie),M("</h"+g("headingRank")+">"),y("slurpAllLineEndings"),y("headingRank")}function ae(Ie){S(k(this.sliceSerialize(Ie)))}function re(Ie){if(!g("slurpAllLineEndings")){if(g("slurpOneLineEnding")){y("slurpOneLineEnding");return}if(g("inCodeText")){S(" ");return}S(k(this.sliceSerialize(Ie)))}}function ye(Ie){S(k(this.sliceSerialize(Ie))),y("flowCodeSeenData",!0)}function Pe(){M("<br />")}function qe(){_(),lt()}function xt(){y("ignoreEncode")}function lt(){e.allowDangerousHtml&&y("ignoreEncode",!0)}function Tt(){M("<em>")}function Yt(){M("<strong>")}function se(){y("inCodeText",!0),M("<code>")}function le(){y("inCodeText"),M("</code>")}function Te(){M("</em>")}function ct(){M("</strong>")}function pt(){_(),M("<hr />")}function g1(Ie){y("characterReferenceType",Ie.type)}function ii(Ie){let Ge=this.sliceSerialize(Ie),$1=g("characterReferenceType")?Jc(Ge,g("characterReferenceType")==="characterReferenceMarkerNumeric"?10:16):Kn(Ge);S(k($1)),y("characterReferenceType")}function is(Ie){let G
`;break}case-3:{s=`\r
`;break}case-2:{s=e?" ":"	";break}case-1:{if(!e&&r)continue;s=" ";break}default:s=String.fromCharCode(n)}r=n===-2,i.push(s)}return i.join("")}var E0e=v(()=>{Lt();Ir();c5()});function m5(t){let i={constructs:u9([r$,...(t||{}).extensions||[]]),content:r(y0e),defined:[],document:r(M0e),flow:r(z0e),lazy:{},string:r(L0e),text:r($0e)};return i;function r(n){return s;function s(o){return A0e(i,n,o)}}}var s$=v(()=>{f9();x0e();k0e();S0e();i$();D0e();E0e()});function g5(t){for(;!w9(t););return t}var n$=v(()=>{$L()});function b5(){let t=1,e="",a=!0,i;return r;function r(n,s,o){let u=[],c,d,l,f,b;for(n=e+(typeof n=="string"?n.toString():new TextDecoder(s||void 0).decode(n)),l=0,e="",a&&(n.charCodeAt(0)===65279&&l++,a=void 0);l<n.length;){if(P0e.lastIndex=l,c=P0e.exec(n),f=c&&c.index!==void 0?c.index:n.length,b=n.charCodeAt(f),!c){e=n.slice(l);break}if(b===10&&l===f&&i)u.push(-3),i=void 0;else switch(i&&(u.push(-5),i=void 0),l<f&&(u.push(n.slice(l,f)),t+=f-l),b){case 0:{u.push(65533),t++;break}case 9:{for(d=Math.ceil(t/4)*4,u.push(-2);t++<d;)u.push(-1);break}case 10:{u.push(-4),t=1;break}default:i=!0,t=1}l=f+1}return o&&(i&&u.push(-5),e&&u.push(e),u.push(null)),u}}var P0e,o$=v(()=>{P0e=/[\0\t\n\r]/g});function $F1(t,e,a){return typeof e!="string"&&(a=e,e=void 0),t$(a)(g5(m5(a).document().write(b5()(t,e,!0))))}var I0e=v(()=>{a$();s$();n$();o$();a$();s$();n$();o$()});function l$(t,e,a){return typeof e!="string"&&(a=e,e=void 0),eOt(a)(g5(m5(a).document().write(b5()(t,e,!0))))}function eOt(t){let e={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:n(ue),autolinkProtocol:A,autolinkEmail:A,atxHeading:n(q),blockQuote:n(B),characterEscape:A,characterReference:A,codeFenced:n(K),codeFencedFenceInfo:s,codeFencedFenceMeta:s,codeIndented:n(K,s),codeText:n(ge,s),codeTextData:A,data:A,codeFlowValue:A,definition:n(ve),definitionDestinationString:s,definitionLabelString:s,definitionTitleString:s,emphasis:n($e),hardBreakEscape:n(R),hardBreakTrailing:n(R),htmlFlow:n(te,s),htmlFlowData:A,htmlText:n(te,s),htmlTextData:A,image:n(me),label:s,link:n(ue),listItem:n(he),listItemValue:f,listOrdered:n(_e,l),listUnordered:n(_e),paragraph:n(ie),reference:j,referenceString:s,resourceDestinationString:s,resourceTitleString:s,setextHeading:n(q),strong:n(ke),thematicBreak:n(Ue)},exit:{atxHeading:u(),atxHeadingSequence:_,autolink:u(),autolinkEmail:W,autolinkProtocol:F,blockQuote:u(),characterEscapeValue:V,characterReferenceMarkerHexadecimal:Ce,characterReferenceMarkerNumeric:Ce,characterReferenceValue:Y,characterReference:P,codeFenced:u(h),codeFencedFence:g,codeFencedFenceInfo:b,codeFencedFenceMeta:y,codeFlowValue:V,codeIndented:u(x),codeText:u($),codeTextData:V,data:V,definition:u(),definitionDestinationString:N,definitionLabelString:M,definitionTitleString:S,emphasis:u(),hardBreakEscape:u(z),hardBreakTrailing:u(z),htmlFlow:u(E),htmlFlowData:V,htmlText:u(T),htmlTextData:V,image:u(O),label:ne,labelText:G,lineEnding:C,link:u(H),listItem:u(),listOrdered:u(),listUnordered:u(),paragraph:u(),referenceString:fe,resourceDestinationString:U,resourceTitleString:be,resource:we,setextHeading:u(L),setextHeadingLineSequence:I,setextHeadingText:k,strong:u(),thematicBreak:u()}};R0e(e,(t||{}).mdastExtensions||[]);let a={};return i;function i(xe){let ae={type:"root",children:[]},re={stack:[ae],tokenStack:[],config:e,enter:o,exit:c,buffer:s,resume:d,data:a},ye=[],Pe=-1;for(;++Pe<xe.length;)if(xe[Pe][1].type==="listOrdered"||xe[Pe][1].type==="listUnordered")if(xe[Pe][0]==="enter")ye.push(Pe);else{let qe=ye.pop();Pe=r(xe,qe,Pe)}for(Pe=-1;++Pe<xe.length;){let qe=e[xe[Pe][0]];N0e.call(qe,xe[Pe][1].type)&&qe[xe[Pe][1].type].call(Object.assign({sliceSerialize:xe[Pe][2].sliceSerialize},re),xe[Pe][1])}if(re.tokenStack.length>0){let qe=re.tokenStack[re.tokenStack.length-1];(qe[1]||F0e).call(re,void 0,qe[0])}for(ae.position={start:Jn(xe.length>0?xe[0][1].start:{line:1,column:1,offset:0}),end:Jn(xe.length>0?xe[xe.length-2][1].end:{line:1,column:1,offset:0})},Pe=-1;++Pe<e.transforms.length;)ae=e.transforms[Pe](ae)||ae;return ae}function r(xe,ae,r
`+r.value:"")+`
`+a}}function f$(t,e){return t.marker?X0e(t.marker,e).repeat(3):X0e(t.fence,e)}function X0e(t,e){return typeof t=="string"?t:t[e]}var K0e=v(()=>{Gn();h$();Z7()});var Q0e=v(()=>{K0e()});function r4(t){let e=this,a=t||lOt,i=e.data(),r=i.micromarkExtensions||(i.micromarkExtensions=[]),n=i.fromMarkdownExtensions||(i.fromMarkdownExtensions=[]),s=i.toMarkdownExtensions||(i.toMarkdownExtensions=[]);r.push(u$(a)),n.push(m$(a)),s.push(g$(a))}var lOt,J0e=v(()=>{Q0e();h$();lOt="yaml"});var ele=v(()=>{J0e()});var b$=v(()=>{});var tle,cOt,I9,ale=v(()=>{b$();tle=typeof self=="object"?self:globalThis,cOt=(t,e)=>{let a=(r,n)=>(t.set(n,r),r),i=r=>{if(t.has(r))return t.get(r);let[n,s]=e[r];switch(n){case 0:case-1:return a(s,r);case 1:{let o=a([],r);for(let u of s)o.push(i(u));return o}case 2:{let o=a({},r);for(let[u,c]of s)o[i(u)]=i(c);return o}case 3:return a(new Date(s),r);case 4:{let{source:o,flags:u}=s;return a(new RegExp(o,u),r)}case 5:{let o=a(new Map,r);for(let[u,c]of s)o.set(i(u),i(c));return o}case 6:{let o=a(new Set,r);for(let u of s)o.add(i(u));return o}case 7:{let{name:o,message:u}=s;return a(new tle[o](u),r)}case 8:return a(BigInt(s),r);case"BigInt":return a(Object(BigInt(s)),r);case"ArrayBuffer":return a(new Uint8Array(s).buffer,s);case"DataView":{let{buffer:o}=new Uint8Array(s);return a(new DataView(o),s)}}return a(new tle[n](s),r)};return i},I9=t=>cOt(new Map,t)(0)});var n4,dOt,pOt,w5,N9,uOt,R9,ile=v(()=>{b$();n4="",{toString:dOt}={},{keys:pOt}=Object,w5=t=>{let e=typeof t;if(e!=="object"||!t)return[0,e];let a=dOt.call(t).slice(8,-1);switch(a){case"Array":return[1,n4];case"Object":return[2,n4];case"Date":return[3,n4];case"RegExp":return[4,n4];case"Map":return[5,n4];case"Set":return[6,n4];case"DataView":return[1,a]}return a.includes("Array")?[1,a]:a.includes("Error")?[7,a]:[2,a]},N9=([t,e])=>t===0&&(e==="function"||e==="symbol"),uOt=(t,e,a,i)=>{let r=(s,o)=>{let u=i.push(s)-1;return a.set(o,u),u},n=s=>{if(a.has(s))return a.get(s);let[o,u]=w5(s);switch(o){case 0:{let d=s;switch(u){case"bigint":o=8,d=s.toString();break;case"function":case"symbol":if(t)throw new TypeError("unable to serialize "+u);d=null;break;case"undefined":return r([-1],s)}return r([o,d],s)}case 1:{if(u){let f=s;return u==="DataView"?f=new Uint8Array(s.buffer):u==="ArrayBuffer"&&(f=new Uint8Array(s)),r([u,[...f]],s)}let d=[],l=r([o,d],s);for(let f of s)d.push(n(f));return l}case 2:{if(u)switch(u){case"BigInt":return r([u,s.toString()],s);case"Boolean":case"Number":case"String":return r([u,s.valueOf()],s)}if(e&&"toJSON"in s)return n(s.toJSON());let d=[],l=r([o,d],s);for(let f of pOt(s))(t||!N9(w5(s[f])))&&d.push([n(f),n(s[f])]);return l}case 3:return r([o,s.toISOString()],s);case 4:{let{source:d,flags:l}=s;return r([o,{source:d,flags:l}],s)}case 5:{let d=[],l=r([o,d],s);for(let[f,b]of s)(t||!(N9(w5(f))||N9(w5(b))))&&d.push([n(f),n(b)]);return l}case 6:{let d=[],l=r([o,d],s);for(let f of s)(t||!N9(w5(f)))&&d.push(n(f));return l}}let{message:c}=s;return r([o,{name:u,message:c}],s)};return n},R9=(t,{json:e,lossy:a}={})=>{let i=[];return uOt(!(e||a),!!e,new Map,i)(t),i}});var eo,F9=v(()=>{ale();ile();eo=typeof structuredClone=="function"?(t,e)=>e&&("json"in e||"lossy"in e)?I9(R9(t,e)):structuredClone(t):(t,e)=>I9(R9(t,e))});function rle(t){return e;function e(a){let i=a&&a.position&&a.position[t]||{};if(typeof i.line=="number"&&i.line>0&&typeof i.column=="number"&&i.column>0)return{line:i.line,column:i.column,offset:typeof i.offset=="number"&&i.offset>-1?i.offset:void 0}}}function M5(t){let e=B9(t),a=O9(t);if(e&&a)return{start:e,end:a}}var O9,B9,sle=v(()=>{O9=rle("end"),B9=rle("start")});var H9=v(()=>{sle()});var O0,q9,w$=v(()=>{O0=["ariaDescribedBy","ariaLabel","ariaLabelledBy"],q9={ancestors:{tbody:["table"],td:["table"],th:["table"],thead:["table"],tfoot:["table"],tr:["table"]},attributes:{a:[...O0,"dataFootnoteBackref","dataFootnoteRef",["className","data-footnote-backref"],"href"],blockquote:["cite"],code:[["className",/^language-./]],del:["cite"],div:["itemScope","itemType"],dl:[...O0],h2:[["className","sr-only"]],img:[...O0,"longDesc","src"],input:[["dis
`}]}var gle=v(()=>{});function ble(t,e){let a=e.value?e.value+`
`:"",i={},r=e.lang?e.lang.split(/\s+/):[];r.length>0&&(i.className=["language-"+r[0]]);let n={type:"element",tagName:"code",properties:i,children:[{type:"text",value:a}]};return e.meta&&(n.data={meta:e.meta}),t.patch(e,n),n=t.applyData(e,n),n={type:"element",tagName:"pre",properties:{},children:[n]},t.patch(e,n),n}var vle=v(()=>{});function yle(t,e){let a={type:"element",tagName:"del",properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var xle=v(()=>{});function wle(t,e){let a={type:"element",tagName:"em",properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var Mle=v(()=>{});function kle(t,e){let a=typeof t.options.clobberPrefix=="string"?t.options.clobberPrefix:"user-content-",i=String(e.identifier).toUpperCase(),r=ja(i.toLowerCase()),n=t.footnoteOrder.indexOf(i),s,o=t.footnoteCounts.get(i);o===void 0?(o=0,t.footnoteOrder.push(i),s=t.footnoteOrder.length):s=n+1,o+=1,t.footnoteCounts.set(i,o);let u={type:"element",tagName:"a",properties:{href:"#"+a+"fn-"+r,id:a+"fnref-"+r+(o>1?"-"+o:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(s)}]};t.patch(e,u);let c={type:"element",tagName:"sup",properties:{},children:[u]};return t.patch(e,c),t.applyData(e,c)}var zle=v(()=>{Fr()});function Sle(t,e){let a={type:"element",tagName:"h"+e.depth,properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var Cle=v(()=>{});function _le(t,e){if(t.options.allowDangerousHtml){let a={type:"raw",value:e.value};return t.patch(e,a),t.applyData(e,a)}}var Tle=v(()=>{});function V9(t,e){let a=e.referenceType,i="]";if(a==="collapsed"?i+="[]":a==="full"&&(i+="["+(e.label||e.identifier)+"]"),e.type==="imageReference")return[{type:"text",value:"!["+e.alt+i}];let r=t.all(e),n=r[0];n&&n.type==="text"?n.value="["+n.value:r.unshift({type:"text",value:"["});let s=r[r.length-1];return s&&s.type==="text"?s.value+=i:r.push({type:"text",value:i}),r}var k$=v(()=>{});function Lle(t,e){let a=String(e.identifier).toUpperCase(),i=t.definitionById.get(a);if(!i)return V9(t,e);let r={src:ja(i.url||""),alt:e.alt};i.title!==null&&i.title!==void 0&&(r.title=i.title);let n={type:"element",tagName:"img",properties:r,children:[]};return t.patch(e,n),t.applyData(e,n)}var $le=v(()=>{Fr();k$()});function Dle(t,e){let a={src:ja(e.url)};e.alt!==null&&e.alt!==void 0&&(a.alt=e.alt),e.title!==null&&e.title!==void 0&&(a.title=e.title);let i={type:"element",tagName:"img",properties:a,children:[]};return t.patch(e,i),t.applyData(e,i)}var Ale=v(()=>{Fr()});function Ele(t,e){let a={type:"text",value:e.value.replace(/\r?\n|\r/g," ")};t.patch(e,a);let i={type:"element",tagName:"code",properties:{},children:[a]};return t.patch(e,i),t.applyData(e,i)}var Ple=v(()=>{});function Ile(t,e){let a=String(e.identifier).toUpperCase(),i=t.definitionById.get(a);if(!i)return V9(t,e);let r={href:ja(i.url||"")};i.title!==null&&i.title!==void 0&&(r.title=i.title);let n={type:"element",tagName:"a",properties:r,children:t.all(e)};return t.patch(e,n),t.applyData(e,n)}var Nle=v(()=>{Fr();k$()});function Rle(t,e){let a={href:ja(e.url)};e.title!==null&&e.title!==void 0&&(a.title=e.title);let i={type:"element",tagName:"a",properties:a,children:t.all(e)};return t.patch(e,i),t.applyData(e,i)}var Fle=v(()=>{Fr()});function Ble(t,e,a){let i=t.all(e),r=a?wOt(a):Ole(e),n={},s=[];if(typeof e.checked=="boolean"){let d=i[0],l;d&&d.type==="element"&&d.tagName==="p"?l=d:(l={type:"element",tagName:"p",properties:{},children:[]},i.unshift(l)),l.children.length>0&&l.children.unshift({type:"text",value:" "}),l.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:e.checked,disabled:!0},children:[]}),n.className=["task-list-item"]}let o=-1;for(;++o<i.length;){let d=i[o];(r||o!==0||d.type!=="element"||d.tagName!=="p")&&s.push({type:"text",value:`
`}),d.type==="element"&&d.tagName==="p"&&!r?s.push(...d.children):s.push(d)}let u=i[i.length-1];u&&(r||u.type!=="element"||u.tagName!=="p")&&s.push({type:"text",value:`
`});let c={type:"element",tagName:"li",properties:n,children:s};return t.patch(e,c),t.applyData(e,c)}function wOt(t){let e=!1;if(t.type==="list"){e=t.spread||!1;let a=t.children,i=-1;for(;!e&&++i<a.length;)e=Ole(a[i])}return e}function Ole(t){let e=t.spread;return e??t.children.length>1}var Hle=v(()=>{});function qle(t,e){let a={},i=t.all(e),r=-1;for(typeof e.start=="number"&&e.start!==1&&(a.start=e.start);++r<i.length;){let s=i[r];if(s.type==="element"&&s.tagName==="li"&&s.properties&&Array.isArray(s.properties.className)&&s.properties.className.includes("task-list-item")){a.className=["contains-task-list"];break}}let n={type:"element",tagName:e.ordered?"ol":"ul",properties:a,children:t.wrap(i,!0)};return t.patch(e,n),t.applyData(e,n)}var Vle=v(()=>{});function jle(t,e){let a={type:"element",tagName:"p",properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var Ule=v(()=>{});function Wle(t,e){let a={type:"root",children:t.wrap(t.all(e))};return t.patch(e,a),t.applyData(e,a)}var Gle=v(()=>{});function Yle(t,e){let a={type:"element",tagName:"strong",properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var Zle=v(()=>{});function Xle(t,e){let a=t.all(e),i=a.shift(),r=[];if(i){let s={type:"element",tagName:"thead",properties:{},children:t.wrap([i],!0)};t.patch(e.children[0],s),r.push(s)}if(a.length>0){let s={type:"element",tagName:"tbody",properties:{},children:t.wrap(a,!0)},o=B9(e.children[1]),u=O9(e.children[e.children.length-1]);o&&u&&(s.position={start:o,end:u}),r.push(s)}let n={type:"element",tagName:"table",properties:{},children:t.wrap(r,!0)};return t.patch(e,n),t.applyData(e,n)}var Kle=v(()=>{H9()});function Qle(t,e,a){let i=a?a.children:void 0,n=(i?i.indexOf(e):1)===0?"th":"td",s=a&&a.type==="table"?a.align:void 0,o=s?s.length:e.children.length,u=-1,c=[];for(;++u<o;){let l=e.children[u],f={},b=s?s[u]:void 0;b&&(f.align=b);let y={type:"element",tagName:n,properties:f,children:[]};l&&(y.children=t.all(l),t.patch(l,y),y=t.applyData(l,y)),c.push(y)}let d={type:"element",tagName:"tr",properties:{},children:t.wrap(c,!0)};return t.patch(e,d),t.applyData(e,d)}var Jle=v(()=>{});function ece(t,e){let a={type:"element",tagName:"td",properties:{},children:t.all(e)};return t.patch(e,a),t.applyData(e,a)}var tce=v(()=>{});function ice(t){let e=String(t),a=/\r?\n|\r/g,i=a.exec(e),r=0,n=[];for(;i;)n.push(ace(e.slice(r,i.index),r>0,!0),i[0]),r=i.index+i[0].length,i=a.exec(e);return n.push(ace(e.slice(r),r>0,!1)),n.join("")}function ace(t,e,a){let i=0,r=t.length;if(e){let n=t.codePointAt(i);for(;n===9||n===32;)i++,n=t.codePointAt(i)}if(a){let n=t.codePointAt(r-1);for(;n===9||n===32;)r--,n=t.codePointAt(r-1)}return r>i?t.slice(i,r):""}var mB1,gB1,rce=v(()=>{mB1=9,gB1=32});function sce(t,e){let a={type:"text",value:ice(String(e.value))};return t.patch(e,a),t.applyData(e,a)}var nce=v(()=>{rce()});function oce(t,e){let a={type:"element",tagName:"hr",properties:{},children:[]};return t.patch(e,a),t.applyData(e,a)}var lce=v(()=>{});function j9(){}var z$,S$=v(()=>{fle();gle();vle();xle();Mle();zle();Cle();Tle();$le();Ale();Ple();Nle();Fle();Hle();Vle();Ule();Gle();Zle();Kle();Jle();tce();nce();lce();z$={blockquote:hle,break:mle,code:ble,delete:yle,emphasis:wle,footnoteReference:kle,heading:Sle,html:_le,imageReference:Lle,image:Dle,inlineCode:Ele,linkReference:Ile,link:Rle,listItem:Ble,list:qle,paragraph:jle,root:Wle,strong:Yle,table:Xle,tableCell:ece,tableRow:Qle,text:sce,thematicBreak:oce,toml:j9,yaml:j9,definition:j9,footnoteDefinition:j9}});function cce(t,e){let a=[{type:"text",value:"\u21A9"}];return e>1&&a.push({type:"element",tagName:"sup",properties:{},children:[{type:"text",value:String(e)}]}),a}function dce(t,e){return"Back to reference "+(t+1)+(e>1?"-"+e:"")}function pce(t){let e=typeof t.options.clobberPrefix=="string"?t.options.clobberPrefix:"user-content-",a=t.options.footnoteBackContent||cce,i=t.options.footnoteBackLabel||dce,r=t.options.footnoteLabel||"Footnotes",n=t.options.footnoteLabelTagName||"h2",s=t.options.footnoteLabelProperties||{className:["sr-only"]},o=[],u=-1;for(;++u<t.footnoteOrde
`},{type:"element",tagName:"ol",properties:{},children:t.wrap(o,!0)},{type:"text",value:`
`}]}}var C$=v(()=>{F9();Fr()});function hce(t,e){let a=e||MOt,i=new Map,r=new Map,n=new Map,s={...z$,...a.handlers},o={all:c,applyData:zOt,definitionById:i,footnoteById:r,footnoteCounts:n,footnoteOrder:[],handlers:s,one:u,options:a,patch:kOt,wrap:COt};return o5(t,function(d){if(d.type==="definition"||d.type==="footnoteDefinition"){let l=d.type==="definition"?i:r,f=String(d.identifier).toUpperCase();l.has(f)||l.set(f,d)}}),o;function u(d,l){let f=d.type,b=o.handlers[f];if(_$.call(o.handlers,f)&&b)return b(o,d,l);if(o.options.passThrough&&o.options.passThrough.includes(f)){if("children"in d){let{children:g,...h}=d,x=eo(h);return x.children=o.all(d),x}return eo(d)}return(o.options.unknownHandler||SOt)(o,d,l)}function c(d){let l=[];if("children"in d){let f=d.children,b=-1;for(;++b<f.length;){let y=o.one(f[b],d);if(y){if(b&&f[b-1].type==="break"&&(!Array.isArray(y)&&y.type==="text"&&(y.value=uce(y.value)),!Array.isArray(y)&&y.type==="element")){let g=y.children[0];g&&g.type==="text"&&(g.value=uce(g.value))}Array.isArray(y)?l.push(...y):l.push(y)}}}return l}}function kOt(t,e){t.position&&(e.position=M5(t))}function zOt(t,e){let a=e;if(t&&t.data){let i=t.data.hName,r=t.data.hChildren,n=t.data.hProperties;if(typeof i=="string")if(a.type==="element")a.tagName=i;else{let s="children"in a?a.children:[a];a={type:"element",tagName:i,properties:{},children:s}}a.type==="element"&&n&&Object.assign(a.properties,eo(n)),"children"in a&&a.children&&r!==null&&r!==void 0&&(a.children=r)}return a}function SOt(t,e){let a=e.data||{},i="value"in e&&!(_$.call(a,"hProperties")||_$.call(a,"hChildren"))?{type:"text",value:e.value}:{type:"element",tagName:"div",properties:{},children:t.all(e)};return t.patch(e,i),t.applyData(e,i)}function COt(t,e){let a=[],i=-1;for(e&&a.push({type:"text",value:`
`});++i<t.length;)i&&a.push({type:"text",value:`
`}),a.push(t[i]);return e&&t.length>0&&a.push({type:"text",value:`
`}),a}function uce(t){let e=0,a=t.charCodeAt(e);for(;a===9||a===32;)e++,a=t.charCodeAt(e);return t.slice(e)}var _$,MOt,fce=v(()=>{F9();QT();H9();S$();_$={}.hasOwnProperty,MOt={}});function T$(t,e){let a=hce(t,e),i=a.one(t,void 0),r=pce(a),n=Array.isArray(i)?{type:"root",children:i}:i||{type:"root",children:[]};return r&&("children"in n,n.children.push({type:"text",value:`
`},r)),n}var mce=v(()=>{Gn();C$();fce()});var gce=v(()=>{S$();mce();C$()});var bce,vce=v(()=>{bce=["area","base","basefont","bgsound","br","col","command","embed","frame","hr","image","img","input","keygen","link","meta","param","source","track","wbr"]});var Ls,L$=v(()=>{Ls=class{constructor(e,a,i){this.normal=a,this.property=e,i&&(this.space=i)}};Ls.prototype.normal={},Ls.prototype.property={},Ls.prototype.space=void 0});function $$(t,e){let a={},i={};for(let r of t)Object.assign(a,r.property),Object.assign(i,r.normal);return new Ls(a,i,e)}var yce=v(()=>{L$()});function o4(t){return t.toLowerCase()}var U9=v(()=>{});var u2,D$=v(()=>{u2=class{constructor(e,a){this.attribute=a,this.property=e}};u2.prototype.attribute="",u2.prototype.booleanish=!1,u2.prototype.boolean=!1,u2.prototype.commaOrSpaceSeparated=!1,u2.prototype.commaSeparated=!1,u2.prototype.defined=!1,u2.prototype.mustUseProperty=!1,u2.prototype.number=!1,u2.prototype.overloadedBoolean=!1,u2.prototype.property="",u2.prototype.spaceSeparated=!1,u2.prototype.space=void 0});var z5={};Ye(z5,{boolean:()=>mt,booleanish:()=>N1,commaOrSpaceSeparated:()=>Da,commaSeparated:()=>ao,number:()=>Ee,overloadedBoolean:()=>W9,spaceSeparated:()=>r1});function B0(){return 2**++_Ot}var _Ot,mt,N1,W9,Ee,r1,ao,Da,S5=v(()=>{_Ot=0,mt=B0(),N1=B0(),W9=B0(),Ee=B0(),r1=B0(),ao=B0(),Da=B0()});function xce(t,e,a){a&&(t[e]=a)}var A$,H0,E$=v(()=>{D$();S5();A$=Object.keys(z5),H0=class extends u2{constructor(e,a,i,r){let n=-1;if(super(e,a),xce(this,"space",r),typeof i=="number")for(;++n<A$.length;){let s=A$[n];xce(this,A$[n],(i&z5[s])===z5[s])}}};H0.prototype.defined=!0});function hi(t){let e={},a={};for(let[i,r]of Object.entries(t.properties)){let n=new H0(i,t.transform(t.attributes||{},i),r,t.space);t.mustUseProperty&&t.mustUseProperty.includes(i)&&(n.mustUseProperty=!0),e[i]=n,a[o4(i)]=i,a[o4(n.attribute)]=i}return new Ls(e,a,t.space)}var q0=v(()=>{U9();E$();L$()});var P$,wce=v(()=>{q0();S5();P$=hi({properties:{ariaActiveDescendant:null,ariaAtomic:N1,ariaAutoComplete:null,ariaBusy:N1,ariaChecked:N1,ariaColCount:Ee,ariaColIndex:Ee,ariaColSpan:Ee,ariaControls:r1,ariaCurrent:null,ariaDescribedBy:r1,ariaDetails:null,ariaDisabled:N1,ariaDropEffect:r1,ariaErrorMessage:null,ariaExpanded:N1,ariaFlowTo:r1,ariaGrabbed:N1,ariaHasPopup:null,ariaHidden:N1,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:r1,ariaLevel:Ee,ariaLive:null,ariaModal:N1,ariaMultiLine:N1,ariaMultiSelectable:N1,ariaOrientation:null,ariaOwns:r1,ariaPlaceholder:null,ariaPosInSet:Ee,ariaPressed:N1,ariaReadOnly:N1,ariaRelevant:null,ariaRequired:N1,ariaRoleDescription:r1,ariaRowCount:Ee,ariaRowIndex:Ee,ariaRowSpan:Ee,ariaSelected:N1,ariaSetSize:Ee,ariaSort:null,ariaValueMax:Ee,ariaValueMin:Ee,ariaValueNow:Ee,ariaValueText:null,role:null},transform(t,e){return e==="role"?e:"aria-"+e.slice(4).toLowerCase()}})});function G9(t,e){return e in t?t[e]:e}var I$=v(()=>{});function Y9(t,e){return G9(t,e.toLowerCase())}var N$=v(()=>{I$()});var Mce,kce=v(()=>{N$();q0();S5();Mce=hi({attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:ao,acceptCharset:r1,accessKey:r1,action:null,allow:null,allowFullScreen:mt,allowPaymentRequest:mt,allowUserMedia:mt,alt:null,as:null,async:mt,autoCapitalize:null,autoComplete:r1,autoFocus:mt,autoPlay:mt,blocking:r1,capture:null,charSet:null,checked:mt,cite:null,className:r1,cols:Ee,colSpan:null,content:null,contentEditable:N1,controls:mt,controlsList:r1,coords:Ee|ao,crossOrigin:null,data:null,dateTime:null,decoding:null,default:mt,defer:mt,dir:null,dirName:null,disabled:mt,download:W9,draggable:N1,encType:null,enterKeyHint:null,fetchPriority:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:mt,formTarget:null,headers:r1,height:Ee,hidden:W9,high:Ee,href:null,hrefLang:null,htmlFor:r1,httpEquiv:r1,id:null,imageSizes:null,imageSrcSet:null,inert:mt,inputMode:null,integrity:null,is:null,isMap:mt,itemId:null,itemProp:r1,itemRef:r1,itemScope:mt,itemT
\f\r &/=>`.split(""),`	
\f\r "&'/=>\``.split("")],[`\0	
\f\r "&'/<=>`.split(""),`\0	
\f\r "&'/<=>\``.split("")]],unquoted:[[`	
\f\r &>`.split(""),`\0	
\f\r "&'<=>\``.split("")],[`\0	
\f\r "&'<=>\``.split(""),`\0	
\f\r "&'<=>\``.split("")]],single:[["&'".split(""),"\"&'`".split("")],["\0&'".split(""),"\0\"&'`".split("")]],double:[['"&'.split(""),"\"&'`".split("")],['\0"&'.split(""),"\0\"&'`".split("")]]}});function af(t,e,a,i){return a&&a.type==="element"&&(a.tagName==="script"||a.tagName==="style")?t.value:$s(t.value,Object.assign({},i.settings.characterReferences,{subset:uBt}))}var uBt,Z$=v(()=>{Q9();uBt=["<","&"]});function m4e(t,e,a,i){return i.settings.allowDangerousHtml?t.value:af(t,e,a,i)}var g4e=v(()=>{Z$()});function b4e(t,e,a,i){return i.all(t)}var v4e=v(()=>{});function hBt(t){throw new Error("Expected node, not `"+t+"`")}function fBt(t){let e=t;throw new Error("Cannot compile unknown node `"+e.type+"`")}var y4e,x4e=v(()=>{UT();Jce();t4e();f4e();g4e();v4e();Z$();y4e=t9("type",{invalid:hBt,unknown:fBt,handlers:{comment:Qce,doctype:e4e,element:h4e,raw:m4e,root:b4e,text:af}})});function X$(t,e){let a=e||mBt,i=a.quote||'"',r=i==='"'?"'":'"';if(i!=='"'&&i!=="'")throw new Error("Invalid quote `"+i+"`, expected `'` or `\"`");return{one:vBt,all:yBt,settings:{omitOptionalTags:a.omitOptionalTags||!1,allowParseErrors:a.allowParseErrors||!1,allowDangerousCharacters:a.allowDangerousCharacters||!1,quoteSmart:a.quoteSmart||!1,preferUnquoted:a.preferUnquoted||!1,tightAttributes:a.tightAttributes||!1,upperDoctype:a.upperDoctype||!1,tightDoctype:a.tightDoctype||!1,bogusComments:a.bogusComments||!1,tightCommaSeparatedLists:a.tightCommaSeparatedLists||!1,tightSelfClosing:a.tightSelfClosing||!1,collapseEmptyAttributes:a.collapseEmptyAttributes||!1,allowDangerousHtml:a.allowDangerousHtml||!1,voids:a.voids||bce,characterReferences:a.characterReferences||gBt,closeSelfClosing:a.closeSelfClosing||!1,closeEmptyElements:a.closeEmptyElements||!1},schema:a.space==="svg"?Z9:Ace,quote:i,alternative:r}.one(Array.isArray(t)?{type:"root",children:t}:t,void 0,void 0)}function vBt(t,e,a){return y4e(t,e,a,this)}function yBt(t){let e=[],a=t&&t.children||bBt,i=-1;for(;++i<a.length;)e[i]=this.one(a[i],i,t);return e.join("")}var mBt,gBt,bBt,w4e=v(()=>{vce();H$();x4e();mBt={},gBt={},bBt=[]});var M4e=v(()=>{w4e()});function l4(t){let e=this,{handlers:a,sanitize:i,...r}=t||xBt,n=!1,s;typeof i=="boolean"?n=!i:i&&(s=i),e.compiler=o;function o(u,c){let d=T$(u,{handlers:a,allowDangerousHtml:n}),l=n?d:M$(d,s),f=X$(l,{...r,allowDangerousHtml:n});return c.extname&&(c.extname=".html"),u&&u.type==="root"&&f&&/[^\r\n]/.test(f.charAt(f.length-1))?f+`
`:f}}var xBt,k4e=v(()=>{ule();gce();M4e();xBt={}});var z4e=v(()=>{k4e()});function c4(t){let e=this;e.compiler=a;function a(i){return uL(i,{...e.data("settings"),...t,extensions:e.data("toMarkdownExtensions")||[]})}}var S4e=v(()=>{p9()});var C4e=v(()=>{S4e()});function wBt(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var i in a)a.hasOwnProperty(i)&&(t[i]=a[i])}return t}function K$(t,e){return Array(e+1).join(t)}function _4e(t){return t.replace(/^\n*/,"")}function T4e(t){for(var e=t.length;e>0&&t[e-1]===`
`;)e--;return t.substring(0,e)}function L4e(t){return T4e(_4e(t))}function Q$(t){return J$(t,MBt)}function D4e(t){return J$(t,$4e)}function kBt(t){return E4e(t,$4e)}function zBt(t){return J$(t,A4e)}function SBt(t){return E4e(t,A4e)}function J$(t,e){return e.indexOf(t.nodeName)>=0}function E4e(t,e){return t.getElementsByTagName&&e.some(function(a){return t.getElementsByTagName(a).length})}function rf(t){return t?t.replace(/(\n+\s*)+/g,`
`):""}function P4e(t){this.options=t,this._keep=[],this._remove=[],this.blankRule={replacement:t.blankReplacement},this.keepReplacement=t.keepReplacement,this.defaultRule={replacement:t.defaultReplacement},this.array=[];for(var e in t.rules)this.array.push(t.rules[e])}function eD(t,e,a){for(var i=0;i<t.length;i++){var r=t[i];if(CBt(r,e,a))return r}}function CBt(t,e,a){var i=t.filter;if(typeof i=="string"){if(i===e.nodeName.toLowerCase())return!0}else if(Array.isArray(i)){if(i.indexOf(e.nodeName.toLowerCase())>-1)return!0}else if(typeof i=="function"){if(i.call(t,e,a))return!0}else throw new TypeError("`filter` needs to be a string, array, or function")}function _Bt(t){var e=t.element,a=t.isBlock,i=t.isVoid,r=t.isPre||function(l){return l.nodeName==="PRE"};if(!(!e.firstChild||r(e))){for(var n=null,s=!1,o=null,u=I4e(o,e,r);u!==e;){if(u.nodeType===3||u.nodeType===4){var c=u.data.replace(/[ \r\n\t]+/g," ");if((!n||/ $/.test(n.data))&&!s&&c[0]===" "&&(c=c.substr(1)),!c){u=tD(u);continue}u.data=c,n=u}else if(u.nodeType===1)a(u)||u.nodeName==="BR"?(n&&(n.data=n.data.replace(/ $/,"")),n=null,s=!1):i(u)||r(u)?(n=null,s=!0):n&&(s=!1);else{u=tD(u);continue}var d=I4e(o,u,r);o=u,u=d}n&&(n.data=n.data.replace(/ $/,""),n.data||tD(n))}}function tD(t){var e=t.nextSibling||t.parentNode;return t.parentNode.removeChild(t),e}function I4e(t,e,a){return t&&t.parentNode===e||a(e)?e.nextSibling||e.parentNode:e.firstChild||e.nextSibling||e.parentNode}function TBt(){var t=aD.DOMParser,e=!1;try{new t().parseFromString("","text/html")&&(e=!0)}catch{}return e}function LBt(){var t=function(){};return $Bt()?t.prototype.parseFromString=function(e){var a=new window.ActiveXObject("htmlfile");return a.designMode="on",a.open(),a.write(e),a.close(),a}:t.prototype.parseFromString=function(e){var a=document.implementation.createHTMLDocument("");return a.open(),a.write(e),a.close(),a},t}function $Bt(){var t=!1;try{document.implementation.createHTMLDocument("").open()}catch{aD.ActiveXObject&&(t=!0)}return t}function ABt(t,e){var a;if(typeof t=="string"){var i=EBt().parseFromString('<x-turndown id="turndown-root">'+t+"</x-turndown>","text/html");a=i.getElementById("turndown-root")}else a=t.cloneNode(!0);return _Bt({element:a,isBlock:Q$,isVoid:D4e,isPre:e.preformattedCode?PBt:null}),a}function EBt(){return iD=iD||new DBt,iD}function PBt(t){return t.nodeName==="PRE"||t.nodeName==="CODE"}function IBt(t,e){return t.isBlock=Q$(t),t.isCode=t.nodeName==="CODE"||t.parentNode.isCode,t.isBlank=NBt(t),t.flankingWhitespace=RBt(t,e),t}function NBt(t){return!D4e(t)&&!zBt(t)&&/^\s*$/i.test(t.textContent)&&!kBt(t)&&!SBt(t)}function RBt(t,e){if(t.isBlock||e.preformattedCode&&t.isCode)return{leading:"",trailing:""};var a=FBt(t.textContent);return a.leadingAscii&&N4e("left",t,e)&&(a.leading=a.leadingNonAscii),a.trailingAscii&&N4e("right",t,e)&&(a.trailing=a.trailingNonAscii),{leading:a.leading,trailing:a.trailing}}function FBt(t){var e=t.match(/^(([ \t\r\n]*)(\s*))(?:(?=\S)[\s\S]*\S)?((\s*?)([ \t\r\n]*))$/);return{leading:e[1],leadingAscii:e[2],leadingNonAscii:e[3],trailing:e[4],trailingNonAscii:e[5],trailingAscii:e[6]}}function N4e(t,e,a){var i,r,n;return t==="left"?(i=e.previousSibling,r=/ $/):(i=e.nextSibling,r=/^ /),i&&(i.nodeType===3?n=r.test(i.nodeValue):a.preformattedCode&&i.nodeName==="CODE"?n=!1:i.nodeType===1&&!Q$(i)&&(n=r.test(i.textContent))),n}function sf(t){if(!(this instanceof sf))return new sf(t);var e={rules:W2,headingStyle:"setext",hr:"* * *",bulletListMarker:"*",codeBlockStyle:"indented",fence:"```",emDelimiter:"_",strongDelimiter:"**",linkStyle:"inlined",linkReferenceStyle:"full",br:"  ",preformattedCode:!1,blankReplacement:function(a,i){return i.isBlock?`

`:""},keepReplacement:function(a,i){return i.isBlock?`

`+i.outerHTML+`

`:i.outerHTML},defaultReplacement:function(a,i){return i.isBlock?`

`+a+`

`:a}};this.options=wBt({},e,t),this.rules=new P4e(this.options)}function R4e(t){var e=this;return OBt.call(t.childNodes,function(a,i){i=new IBt(i,e.options);var r="";return i.nodeType===3?r=i.isCode?i.nodeValue:e.escape(i.nodeValue):i.nodeType===1&&(r=qBt.call(e,i)),F4e(a,r)},"")}function HBt(t){var e=this;return this.rules.forEach(function(a){typeof a.append=="function"&&(t=F4e(t,a.append(e.options)))}),t.replace(/^[\t\r\n]+/,"").replace(/[\t\r\n\s]+$/,"")}function qBt(t){var e=this.rules.forNode(t),a=R4e.call(this,t),i=t.flankingWhitespace;return(i.leading||i.trailing)&&(a=a.trim()),i.leading+e.replacement(a,t,this.options)+i.trailing}function F4e(t,e){var a=T4e(t),i=_4e(e),r=Math.max(t.length-a.length,e.length-i.length),n=`

`.substring(0,r);return a+n+i}function VBt(t){return t!=null&&(typeof t=="string"||t.nodeType&&(t.nodeType===1||t.nodeType===9||t.nodeType===11))}var MBt,$4e,A4e,W2,aD,DBt,iD,OBt,BBt,nf,O4e=v(()=>{MBt=["ADDRESS","ARTICLE","ASIDE","AUDIO","BLOCKQUOTE","BODY","CANVAS","CENTER","DD","DIR","DIV","DL","DT","FIELDSET","FIGCAPTION","FIGURE","FOOTER","FORM","FRAMESET","H1","H2","H3","H4","H5","H6","HEADER","HGROUP","HR","HTML","ISINDEX","LI","MAIN","MENU","NAV","NOFRAMES","NOSCRIPT","OL","OUTPUT","P","PRE","SECTION","TABLE","TBODY","TD","TFOOT","TH","THEAD","TR","UL"];$4e=["AREA","BASE","BR","COL","COMMAND","EMBED","HR","IMG","INPUT","KEYGEN","LINK","META","PARAM","SOURCE","TRACK","WBR"];A4e=["A","TABLE","THEAD","TBODY","TFOOT","TH","TD","IFRAME","SCRIPT","AUDIO","VIDEO"];W2={};W2.paragraph={filter:"p",replacement:function(t){return`

`+t+`

`}},W2.lineBreak={filter:"br",replacement:function(t,e,a){return a.br+`
`}},W2.heading={filter:["h1","h2","h3","h4","h5","h6"],replacement:function(t,e,a){var i=Number(e.nodeName.charAt(1));if(a.headingStyle==="setext"&&i<3){var r=K$(i===1?"=":"-",t.length);return`

`+t+`
`+r+`

`}else return`

`+K$("#",i)+" "+t+`

`}},W2.blockquote={filter:"blockquote",replacement:function(t){return t=L4e(t).replace(/^/gm,"> "),`

`+t+`

`}},W2.list={filter:["ul","ol"],replacement:function(t,e){var a=e.parentNode;return a.nodeName==="LI"&&a.lastElementChild===e?`
`+t:`

`+t+`

`}},W2.listItem={filter:"li",replacement:function(t,e,a){var i=a.bulletListMarker+"   ",r=e.parentNode;if(r.nodeName==="OL"){var n=r.getAttribute("start"),s=Array.prototype.indexOf.call(r.children,e);i=(n?Number(n)+s:s+1)+".  "}var o=/\n$/.test(t);return t=L4e(t)+(o?`
`:""),t=t.replace(/\n/gm,`
`+" ".repeat(i.length)),i+t+(e.nextSibling?`
`:"")}},W2.indentedCodeBlock={filter:function(t,e){return e.codeBlockStyle==="indented"&&t.nodeName==="PRE"&&t.firstChild&&t.firstChild.nodeName==="CODE"},replacement:function(t,e,a){return`

    `+e.firstChild.textContent.replace(/\n/g,`
    `)+`

`}},W2.fencedCodeBlock={filter:function(t,e){return e.codeBlockStyle==="fenced"&&t.nodeName==="PRE"&&t.firstChild&&t.firstChild.nodeName==="CODE"},replacement:function(t,e,a){for(var i=e.firstChild.getAttribute("class")||"",r=(i.match(/language-(\S+)/)||[null,""])[1],n=e.firstChild.textContent,s=a.fence.charAt(0),o=3,u=new RegExp("^"+s+"{3,}","gm"),c;c=u.exec(n);)c[0].length>=o&&(o=c[0].length+1);var d=K$(s,o);return`

`+d+r+`
`+n.replace(/\n$/,"")+`
`+d+`

`}},W2.horizontalRule={filter:"hr",replacement:function(t,e,a){return`

`+a.hr+`

`}},W2.inlineLink={filter:function(t,e){return e.linkStyle==="inlined"&&t.nodeName==="A"&&t.getAttribute("href")},replacement:function(t,e){var a=e.getAttribute("href");a&&(a=a.replace(/([()])/g,"\\$1"));var i=rf(e.getAttribute("title"));return i&&(i=' "'+i.replace(/"/g,'\\"')+'"'),"["+t+"]("+a+i+")"}},W2.referenceLink={filter:function(t,e){return e.linkStyle==="referenced"&&t.nodeName==="A"&&t.getAttribute("href")},replacement:function(t,e,a){var i=e.getAttribute("href"),r=rf(e.getAttribute("title"));r&&(r=' "'+r+'"');var n,s;switch(a.linkReferenceStyle){case"collapsed":n="["+t+"][]",s="["+t+"]: "+i+r;break;case"shortcut":n="["+t+"]",s="["+t+"]: "+i+r;break;default:var o=this.references.length+1;n="["+t+"]["+o+"]",s="["+o+"]: "+i+r}return this.references.push(s),n},references:[],append:function(t){var e="";return this.references.length&&(e=`

`+this.references.join(`
`)+`

`,this.references=[]),e}},W2.emphasis={filter:["em","i"],replacement:function(t,e,a){return t.trim()?a.emDelimiter+t+a.emDelimiter:""}},W2.strong={filter:["strong","b"],replacement:function(t,e,a){return t.trim()?a.strongDelimiter+t+a.strongDelimiter:""}},W2.code={filter:function(t){var e=t.previousSibling||t.nextSibling,a=t.parentNode.nodeName==="PRE"&&!e;return t.nodeName==="CODE"&&!a},replacement:function(t){if(!t)return"";t=t.replace(/\r?\n|\r/g," ");for(var e=/^`|^ .*?[^ ].* $|`$/.test(t)?" ":"",a="`",i=t.match(/`+/gm)||[];i.indexOf(a)!==-1;)a=a+"`";return a+e+t+e+a}},W2.image={filter:"img",replacement:function(t,e){var a=rf(e.getAttribute("alt")),i=e.getAttribute("src")||"",r=rf(e.getAttribute("title")),n=r?' "'+r+'"':"";return i?"!["+a+"]("+i+n+")":""}};P4e.prototype={add:function(t,e){this.array.unshift(e)},keep:function(t){this._keep.unshift({filter:t,replacement:this.keepReplacement})},remove:function(t){this._remove.unshift({filter:t,replacement:function(){return""}})},forNode:function(t){if(t.isBlank)return this.blankRule;var e;return(e=eD(this.array,t,this.options))||(e=eD(this._keep,t,this.options))||(e=eD(this._remove,t,this.options))?e:this.defaultRule},forEach:function(t){for(var e=0;e<this.array.length;e++)t(this.array[e],e)}};aD=typeof window<"u"?window:{};DBt=TBt()?aD.DOMParser:LBt();OBt=Array.prototype.reduce,BBt=[[/\\/g,"\\\\"],[/\*/g,"\\*"],[/^-/g,"\\-"],[/^\+ /g,"\\+ "],[/^(=+)/g,"\\$1"],[/^(#{1,6}) /g,"\\$1 "],[/`/g,"\\`"],[/^~~~/g,"\\~~~"],[/\[/g,"\\["],[/\]/g,"\\]"],[/^>/g,"\\>"],[/_/g,"\\_"],[/^(\d+)\. /g,"$1\\. "]];sf.prototype={turndown:function(t){if(!VBt(t))throw new TypeError(t+" is not a string, or an element/document/fragment node.");if(t==="")return"";var e=R4e.call(this,new ABt(t,this.options));return HBt.call(this,e)},use:function(t){if(Array.isArray(t))for(var e=0;e<t.length;e++)this.use(t[e]);else if(typeof t=="function")t(this);else throw new TypeError("plugin must be a Function or an Array of Functions");return this},addRule:function(t,e){return this.rules.add(t,e),this},keep:function(t){return this.rules.keep(t),this},remove:function(t){return this.rules.remove(t),this},escape:function(t){return BBt.reduce(function(e,a){return e.replace(a[0],a[1])},t)}};nf=sf});var _5={};Ye(_5,{gfm:()=>q4e,highlightedCodeBlock:()=>sD,strikethrough:()=>nD,tables:()=>oD,taskListItems:()=>lD});function sD(t){t.addRule("highlightedCodeBlock",{filter:function(e){var a=e.firstChild;return e.nodeName==="DIV"&&B4e.test(e.className)&&a&&a.nodeName==="PRE"},replacement:function(e,a,i){var r=a.className||"",n=(r.match(B4e)||[null,""])[1];return`

`+i.fence+n+`
`+a.firstChild.textContent+`
`+i.fence+`

`}})}function nD(t){t.addRule("strikethrough",{filter:["del","s","strike"],replacement:function(e){return"~"+e+"~"}})}function rD(t){var e=t.parentNode;return e.nodeName==="THEAD"||e.firstChild===t&&(e.nodeName==="TABLE"||WBt(e))&&UBt.call(t.childNodes,function(a){return a.nodeName==="TH"})}function WBt(t){var e=t.previousSibling;return t.nodeName==="TBODY"&&(!e||e.nodeName==="THEAD"&&/^\s*$/i.test(e.textContent))}function H4e(t,e){var a=jBt.call(e.parentNode.childNodes,e),i=" ";return a===0&&(i="| "),i+t+" |"}function oD(t){t.keep(function(a){return a.nodeName==="TABLE"&&!rD(a.rows[0])});for(var e in d4)t.addRule(e,d4[e])}function lD(t){t.addRule("taskListItems",{filter:function(e){return e.type==="checkbox"&&e.parentNode.nodeName==="LI"},replacement:function(e,a){return(a.checked?"[x]":"[ ]")+" "}})}function q4e(t){t.use([sD,nD,oD,lD])}var B4e,jBt,UBt,d4,V4e=v(()=>{B4e=/highlight-(?:text|source)-([a-z0-9]+)/;jBt=Array.prototype.indexOf,UBt=Array.prototype.every,d4={};d4.tableCell={filter:["th","td"],replacement:function(t,e){return H4e(t,e)}},d4.tableRow={filter:"tr",replacement:function(t,e){var a="",i={left:":--",right:"--:",center:":-:"};if(rD(e))for(var r=0;r<e.childNodes.length;r++){var n="---",s=(e.childNodes[r].getAttribute("align")||"").toLowerCase();s&&(n=i[s]||n),a+=H4e(n,e.childNodes[r])}return`
`+t+(a?`
`+a:"")}},d4.table={filter:function(t){return t.nodeName==="TABLE"&&rD(t.rows[0])},replacement:function(t){return t=t.replace(`

`,`
`),`

`+t+`

`}},d4.tableSection={filter:["thead","tbody","tfoot"],replacement:function(t){return t}}});var cD,dD=v(()=>{cD=o2(Dre(),1);dse();g0e();q0e();ele();z4e();C4e();O4e();V4e()});var of,U4e=v(()=>{dD();of=class t{static async createFromMarkdownString(e){let a=new t;return await a.updateFromMarkdownString(e),a}async updateFromMarkdownString(e){let a,i=await i5().use(a4).use(t4).use(r4,["yaml","toml"]).use(c4).use(l4).use(()=>r=>{console.dir(r);let n=r.children.find(s=>s.type==="yaml");n&&(a=n.value)}).process(e);this.html=i.toString(),a?this.frontmatterData=await cD.yamlStringToObject(a):this.frontmatterData={}}}});var p4={};Ye(p4,{SmartMarkdown:()=>pD});var pD,uD=v(()=>{dD();U4e();pD=class t{static async easyMarkdownToHtml(e){return(await new t().getMdParsedResultFromMarkdown(e)).html}constructor(){}async getMdParsedResultFromMarkdown(e){return await of.createFromMarkdownString(e)}htmlToMarkdown(e){let a=new nf({headingStyle:"atx",codeBlockStyle:"fenced"});return a.use(_5.gfm),a.turndown(e)}}});var K4e=ut(qi=>{"use strict";Object.defineProperty(qi,"__esModule",{value:!0}),qi.PathError=qi.TokenData=void 0,qi.parse=gD,qi.compile=ZBt,qi.match=KBt,qi.pathToRegexp=Y4e,qi.stringify=eHt;var hD="/",fD=t=>t,W4e=/^[$_\p{ID_Start}]$/u,mD=/^[$\u200c\u200d\p{ID_Continue}]$/u,GBt={"{":"{","}":"}","(":"(",")":")","[":"[","]":"]","+":"+","?":"?","!":"!"};function YBt(t){return t.replace(/[{}()\[\]+?!:*\\]/g,"\\$&")}function Br(t){return t.replace(/[.+*?^${}()[\]|/\\]/g,"\\$&")}var lf=class{constructor(e,a){this.tokens=e,this.originalPath=a}};qi.TokenData=lf;var j0=class extends TypeError{constructor(e,a){let i=e;a&&(i+=`: ${a}`),i+="; visit https://git.new/pathToRegexpError for info",super(i),this.originalPath=a}};qi.PathError=j0;function gD(t,e={}){let{encodePath:a=fD}=e,i=[...t],r=[],n=0,s=0;function o(){let c="";if(W4e.test(i[n]))do c+=i[n++];while(mD.test(i[n]));else if(i[n]==='"'){let d=n;for(;n++<i.length;){if(i[n]==='"'){n++,d=0;break}i[n]==="\\"&&n++,c+=i[n]}if(d)throw new j0(`Unterminated quote at index ${d}`,t)}if(!c)throw new j0(`Missing parameter name at index ${n}`,t);return c}for(;n<i.length;){let c=i[n],d=GBt[c];d?r.push({type:d,index:n++,value:c}):c==="\\"?r.push({type:"escape",index:n++,value:i[n++]}):c===":"?r.push({type:"param",index:n++,value:o()}):c==="*"?r.push({type:"wildcard",index:n++,value:o()}):r.push({type:"char",index:n++,value:c})}r.push({type:"end",index:n,value:""});function u(c){let d=[];for(;;){let l=r[s++];if(l.type===c)break;if(l.type==="char"||l.type==="escape"){let f=l.value,b=r[s];for(;b.type==="char"||b.type==="escape";)f+=b.value,b=r[++s];d.push({type:"text",value:a(f)});continue}if(l.type==="param"||l.type==="wildcard"){d.push({type:l.type,name:l.value});continue}if(l.type==="{"){d.push({type:"group",tokens:u("}")});continue}throw new j0(`Unexpected ${l.type} at index ${l.index}, expected ${c}`,t)}return d}return new lf(u("end"),t)}function ZBt(t,e={}){let{encode:a=encodeURIComponent,delimiter:i=hD}=e,r=typeof t=="object"?t:gD(t,e),n=G4e(r.tokens,i,a);return function(o={}){let[u,...c]=n(o);if(c.length)throw new TypeError(`Missing parameters: ${c.join(", ")}`);return u}}function G4e(t,e,a){let i=t.map(r=>XBt(r,e,a));return r=>{let n=[""];for(let s of i){let[o,...u]=s(r);n[0]+=o,n.push(...u)}return n}}function XBt(t,e,a){if(t.type==="text")return()=>[t.value];if(t.type==="group"){let r=G4e(t.tokens,e,a);return n=>{let[s,...o]=r(n);return o.length?[""]:[s]}}let i=a||fD;return t.type==="wildcard"&&a!==!1?r=>{let n=r[t.name];if(n==null)return["",t.name];if(!Array.isArray(n)||n.length===0)throw new TypeError(`Expected "${t.name}" to be a non-empty array`);return[n.map((s,o)=>{if(typeof s!="string")throw new TypeError(`Expected "${t.name}/${o}" to be a string`);return i(s)}).join(e)]}:r=>{let n=r[t.name];if(n==null)return["",t.name];if(typeof n!="string")throw new TypeError(`Expected "${t.name}" to be a string`);return[i(n)]}}function KBt(t,e={}){let{decode:a=decodeURIComponent,delimiter:i=hD}=e,{regexp:r,keys:n}=Y4e(t,e),s=n.map(o=>a===!1?fD:o.type==="param"?a:u=>u.split(i).map(a));return function(u){let c
    @container wccToolsViewport (min-width: ${iA}px) {
      ${t.cssText}
    }
    @media (min-width: ${iA}px) {
      ${t.cssText}
    }
  `),PHt=t=>Ht(`
    @container wccToolsViewport (max-width: ${rA}px) {
      ${t.cssText}
    }
    @media (max-width: ${rA}px) {
      ${t.cssText}
    }
  `),IHt=t=>Ht(`
    @container wccToolsViewport (max-width: ${sA}px) {
      ${t.cssText}
    }
    @media (max-width: ${sA}px) {
      ${t.cssText}
    }
  `),NHt=t=>Ht(`
    @container wccToolsViewport (max-width: ${nA}px) {
      ${t.cssText}
    }
    @media (max-width: ${nA}px) {
      ${t.cssText}
    }
  `),RHt=t=>Ht(`
    @container wccToolsViewport (max-width: ${oA}px) {
      ${t.cssText}
    }
    @media (max-width: ${oA}px) {
      ${t.cssText}
    }
  `)});var Af,y6e=v(()=>{f4();Af=class{domtoolsInstance;scrollCallbacks=[];lenisInstance=null;handleNativeScroll=e=>{this.executeScrollCallbacks()};handleLenisScroll=e=>{this.executeScrollCallbacks()};constructor(e){this.domtoolsInstance=e,this.attachNativeScrollListener()}sweetScroller=new $f.default({});async toElement(e,a){this.sweetScroller.toElement(e,a),await dt.delayFor(a.duration)}async detectNativeSmoothScroll(){let e=Ve.defer(),a=100,i=3,r=.75,n=[];function s(u){n.push(u.deltaY),n.length>=a&&(window.removeEventListener("wheel",s),o())}function o(){let u=n.length-1,c=0;for(let l=0;l<u;l++)Math.abs(n[l+1]-n[l])<=i&&c++;c/u>=r?(console.log("Smooth scrolling detected."),e.resolve(!0)):(console.log("Smooth scrolling NOT detected."),e.resolve(!1))}return window.addEventListener("wheel",s),e.promise}async enableLenisScroll(e){let a=new E5({autoRaf:!0});if(e?.disableOnNativeSmoothScroll&&await this.detectNativeSmoothScroll()){a.destroy();return}this.lenisInstance=a,this.detachNativeScrollListener(),this.attachLenisScrollListener();let i=a.destroy.bind(a);a.destroy=()=>{i(),this.detachLenisScrollListener(),this.attachNativeScrollListener(),this.lenisInstance=null}}onScroll(e){this.scrollCallbacks.push(e)}executeScrollCallbacks(){this.scrollCallbacks.forEach(e=>{try{e()}catch(a){console.error("Error in scroll callback:",a)}})}attachNativeScrollListener(){window.addEventListener("scroll",this.handleNativeScroll)}detachNativeScrollListener(){window.removeEventListener("scroll",this.handleNativeScroll)}attachLenisScrollListener(){this.lenisInstance&&this.lenisInstance.on("scroll",this.handleLenisScroll)}detachLenisScrollListener(){this.lenisInstance&&this.lenisInstance.off("scroll",this.handleLenisScroll)}}});var Ef,x6e=v(()=>{m4();f4();Ef=class{domtoolsRef;goBrightBoolean=!1;preferredColorSchemeMediaMatch=window.matchMedia("(prefers-color-scheme: light)");themeObservable=new Dt.rxjs.ReplaySubject(1);constructor(e){this.domtoolsRef=e,this.goBrightBoolean=this.preferredColorSchemeMediaMatch.matches,this.preferredColorSchemeMediaMatch.addEventListener("change",a=>{this.goBrightBoolean=a.matches,this.updateAllConnectedElements()}),this.updateAllConnectedElements()}async enableAutomaticGlobalThemeChange(){document.body&&document.body.style&&this.themeObservable.subscribe({next:e=>{document.body.style.background=e?"#fff":"#000"}})}async updateAllConnectedElements(){this.themeObservable.next(this.goBrightBoolean)}goBright(){this.goBrightBoolean=!0,this.updateAllConnectedElements()}goDark(){this.goBrightBoolean=!1,this.updateAllConnectedElements()}toggleDarkBright(){this.goBrightBoolean=!this.goBrightBoolean,this.updateAllConnectedElements()}}});var cA,Pf,w6e=v(()=>{f4();(function(t){t[t.Backspace=8]="Backspace",t[t.Tab=9]="Tab",t[t.Enter=13]="Enter",t[t.Shift=16]="Shift",t[t.Ctrl=17]="Ctrl",t[t.Alt=18]="Alt",t[t.PauseBreak=19]="PauseBreak",t[t.CapsLock=20]="CapsLock",t[t.Escape=27]="Escape",t[t.Space=32]="Space",t[t.PageUp=33]="PageUp",t[t.PageDown=34]="PageDown",t[t.End=35]="End",t[t.Home=36]="Home",t[t.LeftArrow=37]="LeftArrow",t[t.UpArrow=38]="UpArrow",t[t.RightArrow=39]="RightArrow",t[t.DownArrow=40]="DownArrow",t[t.Insert=45]="Insert",t[t.Delete=46]="Delete",t[t.Zero=48]="Zero",t[t.ClosedParen=48]="ClosedParen",t[t.One=49]="One",t[t.ExclamationMark=49]="ExclamationMark",t[t.Two=50]="Two",t[t.AtSign=50]="AtSign",t[t.Three=51]="Three",t[t.PoundSign=51]="PoundSign",t[t.Hash=51]="Hash",t[t.Four=52]="Four",t[t.DollarSign=52]="DollarSign",t[t.Five=53]="Five",t[t.PercentSign=53]="PercentSign",t[t.Six=54]="Six",t[t.Caret=54]="Caret",t[t.Hat=54]="Hat",t[t.Seven=55]="Seven",t[t.Ampersand=55]="Ampersand",t[t.Eight=56]="Eight",t[t.Star=56]="Star",t[t.Asterik=56]="Asterik",t[t.Nine=57]="Nine",t[t.OpenParen=57]="OpenParen",t[t.A=65]="A",t[t.B=66]="B",t[t.C=67]="C",t[t.D=68]="D",t[t.E=69]="E",t[t.F=70]="F",t[t.G=71]="G",t[t.H=72]="H",t[t.I=73]="I",t[t.J=74]="J",t[t.K=75]="K",t[t.L=76]="L",t[t.M=77]="M",t[t.N=78]="N",t[t.O=79]="O",t[t.P=80]="P",t[t.Q=81]="Q",t[t.R=82]="R",t[t.S=83]="S",t[t.T=84]="T",t[t.U=85]="U",t[t.V=86]="V",t[t.W=87]="W
    /* width */
    ::-webkit-scrollbar {
      width: 0px;
    }
    body {
      scrollbar-width: none;
    }
  `.cssText})(),M6e=X`
  /*
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
      format('woff2');
  } */

  /* global body styles */
  body {
    margin: 0px;
    font-family: 'Geist Sans', 'Inter', sans-serif;
    box-sizing: border-box;
  }

  /* scroll bar styles */
  ${Ht(If)}
`.cssText});var v1={};Ye(v1,{setup:()=>BHt,staticStyles:()=>FHt,styles:()=>OHt});var FHt,OHt,BHt,z6e=v(()=>{f4();m4();k6e();fr();FHt=X`
  * {
    transition: background 0.1s, color 0.1s;
    box-sizing: border-box;
  }

  :host {
    box-sizing: border-box;
    font-family: 'Geist Sans', 'Inter', sans-serif;
  }

  ${Ht(If)}
`,OHt=w`
  <style>
    * {
      transition: background 0.1s, color 0.1s;
      box-sizing: border-box;
    }

    :host {
      font-family: 'Geist Sans', 'Inter', sans-serif;
    }

    ${If}
  </style>
`,BHt=async(t,e={})=>{let a=await G2.setupDomTools(e);return a.runOnce("elementBasicSetup",async()=>{a.setGlobalStyles(M6e)}),a}});var Nf={};Ye(Nf,{cssGridColumns:()=>HHt});var HHt,S6e=v(()=>{HHt=(t,e)=>{let a="";for(let i=0;i<t;i++)a+=` calc((100%/${t}) - (${e*(t-1)}px/${t}))`;return a}});var Mt={};Ye(Mt,{SweetScroll:()=>dA.default,smartdelay:()=>dt,smartmarkdown:()=>p4,smartpromise:()=>Ve,smartrouter:()=>io,smartrx:()=>Dt,smartstate:()=>ro,smartstring:()=>pi,smarturl:()=>so,typedrequest:()=>na});var dA,C6e=v(()=>{br();uD();b2();dA=o2(aA(),1);zD();xD();Ni();L6();CD();j6()});var rt={};Ye(rt,{DomTools:()=>G2,TypedRequest:()=>V6,breakpoints:()=>Vr,css:()=>Nf,elementBasic:()=>v1,plugins:()=>Mt});var _t=v(()=>{AY();z6e();lA();S6e();m4();j6();Cf();C6e()});var pA,lo,uA=v(()=>{pA=o2(Q8(),1);Ni();fr();DY();_t();lo={css:X,unsafeCSS:Ht,LitElement:ns,property:D}});var Rf,T6e=v(()=>{fr();uA();_t();Rf=class t{static instance=null;static getSingleton(){return t.instance||(t.instance=new t),t.instance}domtoolsPromise=G2.setupDomTools();goBright=!1;bdVarTripletStore=[];constructor(){this.domtoolsPromise.then(async e=>{e.themeManager.themeObservable.subscribe(async a=>{this.goBright=a,await e.domReady.promise;for(let i of this.bdVarTripletStore)document.body.style.setProperty(i.cssVarName,this.goBright?i.brightValue:i.darkValue)})})}get defaultStyles(){return v1.staticStyles}cssForDesktop(e){return Ht(Vr.cssForDesktop(e))}cssForNotebook(e){return Ht(Vr.cssForNotebook(e))}cssForTablet(e){return Ht(Vr.cssForTablet(e))}cssForPhablet(e){return Ht(Vr.cssForPhablet(e))}cssForPhone(e){return Ht(Vr.cssForPhone(e))}bdTheme(e,a){let i,r;G2.getGlobalDomToolsSync()?r=G2.getGlobalDomToolsSync().themeManager.goBrightBoolean?e:a:r=a;let n=this.bdVarTripletStore.find(s=>s.darkValue===a&&s.brightValue===e);if(n)i=n.cssVarName;else{let s={cssVarName:`--${pA.uni()}`,brightValue:e,darkValue:a};this.bdVarTripletStore.push(s),this.domtoolsPromise.then(async o=>{await o.domReady.promise,document.body.style.setProperty(s.cssVarName,r)}),i=s.cssVarName}return lo.unsafeCSS(`var(${i}, ${r})`)}cssGridColumns=(e,a)=>{let i="";for(let r=0;r<e;r++)i+=` calc((100%/${e}) - (${a*(e-1)}px/${e}))`;return lo.unsafeCSS(i)}}});var hA,qHt,fA,VHt,L6e,Ff,As,jHt,UHt,$6e=v(()=>{Ai();hA=Symbol.for(""),qHt=t=>{if(t?.r===hA)return t?._$litStatic$},fA=t=>({_$litStatic$:t,r:hA}),VHt=(t,...e)=>({_$litStatic$:e.reduce(((a,i,r)=>a+(n=>{if(n._$litStatic$!==void 0)return n._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${n}. Use 'unsafeStatic' to pass non-literal values, but
            take care to ensure page security.`)})(i)+t[r+1]),t[0]),r:hA}),L6e=new Map,Ff=t=>(e,...a)=>{let i=a.length,r,n,s=[],o=[],u,c=0,d=!1;for(;c<i;){for(u=e[c];c<i&&(n=a[c],(r=qHt(n))!==void 0);)u+=r+e[++c],d=!0;c!==i&&o.push(n),s.push(u),c++}if(c===i&&s.push(e[i]),d){let l=s.join("$$lit$$");(e=L6e.get(l))===void 0&&(s.raw=s,L6e.set(l,e=s)),a=o}return t(e,...a)},As=Ff(w),jHt=Ff(bM),UHt=Ff(vM)});var D6e=v(()=>{$6e()});var jr,Z1,mi,Es=v(()=>{jr={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Z1=t=>(...e)=>({_$litDirective$:t,values:e}),mi=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,a,i){this._$Ct=e,this._$AM=a,this._$Ci=i}_$AS(e,a){return this.update(e,a)}update(e,a){return this.render(...a)}}});var g4,I5,A6e=v(()=>{Ai();Es();g4=class extends mi{constructor(e){if(super(e),this.it=C1,e.type!==jr.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===C1||e==null)return this._t=void 0,this.it=e;if(e===b1)return e;if(typeof e!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;let a=[e];return a.raw=a,this._t={_$litType$:this.constructor.resultType,strings:a,values:[]}}};g4.directiveName="unsafeHTML",g4.resultType=1;I5=Z1(g4)});var E6e=v(()=>{A6e()});var Q,mA=v(()=>{Q=t=>(e,a)=>{a!==void 0?a.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)}});var P6e=v(()=>{mA()});function J(t){return D({...t,state:!0,attribute:!1})}var I6e=v(()=>{G7();});function WHt(t){return(e,a)=>{let i=typeof e=="function"?e:e[a];Object.assign(i,t)}}var N6e=v(()=>{});var gi,b4=v(()=>{gi=(t,e,a)=>(a.configurable=!0,a.enumerable=!0,Reflect.decorate&&typeof e!="object"&&Object.defineProperty(t,e,a),a)});function gA(t,e){return(a,i,r)=>{let n=s=>s.renderRoot?.querySelector(t)??null;if(e){let{get:s,set:o}=typeof i=="object"?a:r??(()=>{let u=Symbol();return{get(){return this[u]},set(c){this[u]=c}}})();return gi(a,i,{get(){let u=s.call(this);return u===void 0&&(u=n(this),(u!==null||this.hasUpdated)&&o.call(this,u)),u}})}return gi(a,i,{get(){return n(this)}})}}var R6e=v(()=>{b4();});function bA(t){return(e,a)=>gi(e,a,{get(){return(this.renderRoot??(GHt??=document.createDocumentFragment())).querySelectorAll(t)}})}var GHt,F6e=v(()=>{b4();});function vA(t){return(e,a)=>gi(e,a,{async get(){return await this.updateComplete,this.renderRoot?.querySelector(t)??null}})}var O6e=v(()=>{b4();});function YHt(t){return(e,a)=>{let{slot:i,selector:r}=t??{},n="slot"+(i?`[name=${i}]`:":not([name])");return gi(e,a,{get(){let s=this.renderRoot?.querySelector(n),o=s?.assignedElements(t)??[];return r===void 0?o:o.filter((u=>u.matches(r)))}})}}var B6e=v(()=>{b4();});function ZHt(t){return(e,a)=>{let{slot:i}=t??{},r="slot"+(i?`[name=${i}]`:":not([name])");return gi(e,a,{get(){return this.renderRoot?.querySelector(r)?.assignedNodes(t)??[]}})}}var H6e=v(()=>{b4();});var q6e=v(()=>{mA();G7();I6e();N6e();R6e();F6e();O6e();B6e();H6e()});var V6e,Of,de,j6e=v(()=>{uA();V6e=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Of=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},de=(()=>{let t=lo.LitElement,e,a=[],i=[],r,n=
  :host {
    /* ========================================
     * Spacing Scale
     * ======================================== */
    --dees-spacing-xs: 4px;
    --dees-spacing-sm: 8px;
    --dees-spacing-md: 12px;
    --dees-spacing-lg: 16px;
    --dees-spacing-xl: 24px;
    --dees-spacing-2xl: 32px;
    --dees-spacing-3xl: 48px;

    /* ========================================
     * Border Radius Scale
     * ======================================== */
    --dees-radius-xs: 2px;
    --dees-radius-sm: 4px;
    --dees-radius-md: 6px;
    --dees-radius-lg: 8px;
    --dees-radius-xl: 12px;
    --dees-radius-full: 999px;

    /* ========================================
     * Shadow Elevation Scale
     * ======================================== */
    --dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ========================================
     * Transition Duration Scale
     * ======================================== */
    --dees-transition-fast: 0.1s;
    --dees-transition-default: 0.15s;
    --dees-transition-slow: 0.2s;
    --dees-transition-slower: 0.3s;

    /* ========================================
     * Control Height Scale
     * ======================================== */
    --dees-control-height-sm: 32px;
    --dees-control-height-md: 36px;
    --dees-control-height-lg: 40px;
    --dees-control-height-xl: 48px;
  }
`});var p5e=v(()=>{});var AA=v(()=>{ji();ji()});var u5e=v(()=>{});var h5e=v(()=>{});var f5e=v(()=>{});var m5e=v(()=>{});var EA={};var PA=v(()=>{u5e();h5e();f5e();m5e()});var g5e=v(()=>{PA();Uf()});var b5e=v(()=>{ji()});var v5e=v(()=>{});var y5e=v(()=>{ji()});var x5e=v(()=>{ji()});var w5e=v(()=>{});var M5e=v(()=>{});var k5e=v(()=>{});var IA={};var Wf=v(()=>{b5e();v5e();y5e();x5e();w5e();M5e();k5e()});var z5e=v(()=>{Wf();AA()});var S5e=v(()=>{Uf();Wf()});var C5e=v(()=>{});var _5e=v(()=>{});var NA={};var Uf=v(()=>{p5e();AA();g5e();z5e();S5e();C5e();_5e()});var T5e=v(()=>{});var L5e=v(()=>{});var RA={};var $5e=v(()=>{T5e();L5e()});var D5e=v(()=>{});var A5e=v(()=>{});var FA={};var E5e=v(()=>{D5e();A5e()});var OA={};var P5e=v(()=>{});var BA=v(()=>{ji()});var I5e=v(()=>{ji()});var N5e=v(()=>{BA()});var HA={};var R5e=v(()=>{BA();I5e();N5e()});var F5e=v(()=>{});var O5e=v(()=>{});var qA={};var B5e=v(()=>{F5e();O5e()});var VA=v(()=>{});var jA,H5e=v(()=>{VA();jA=class{}});var q5e=v(()=>{});var V5e=v(()=>{});var j5e=v(()=>{});var U5e=v(()=>{});var W5e=v(()=>{});var G5e=v(()=>{});var Y5e=v(()=>{});var Z5e=v(()=>{});var X5e=v(()=>{});var K5e=v(()=>{});var Gf={};Ye(Gf,{ICnameDescriptor:()=>jA});var Q5e=v(()=>{VA();H5e();q5e();V5e();j5e();U5e();W5e();G5e();Y5e();Z5e();X5e();K5e()});var UA=v(()=>{});var J5e=v(()=>{UA()});var WA={};var ede=v(()=>{J5e();UA()});var GA={};var tde=v(()=>{});var ade=v(()=>{});var ide=v(()=>{});var rde=v(()=>{});var YA={};var sde=v(()=>{ade();ide();rde()});var nde=v(()=>{});var ZA={};Ye(ZA,{business:()=>NA,code:()=>RA,container:()=>FA,content:()=>HA,database:()=>EA,descriptors:()=>OA,finance:()=>IA,general:()=>qA,network:()=>Gf,saas:()=>WA,storage:()=>GA,website:()=>YA});var ji=v(()=>{Uf();$5e();E5e();PA();P5e();Wf();R5e();B5e();Q5e();ede();tde();sde();nde()});var i2=v(()=>{b2();ji()});var ode,lde=v(()=>{oe();i2();r2();ode=()=>w`
<style>
  .withMargin {
    display: block;
    margin: 20px;
  }
  .demo-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    min-height: 400px;
  }
  .demo-area {
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    cursor: context-menu;
    transition: background 0.2s;
  }
  .demo-area:hover {
    background: rgba(0, 0, 0, 0.02);
  }
</style>
<div class="demo-container">
  <dees-panel heading="Basic Context Menu with Nested Submenus">
    <div class="demo-area" @contextmenu=${t=>{jt.openContextMenuWithOptions(t,[{name:"File",iconName:"fileText",action:async()=>{},submenu:[{name:"New",iconName:"filePlus",shortcut:"Cmd+N",action:async()=>console.log("New file")},{name:"Open",iconName:"folderOpen",shortcut:"Cmd+O",action:async()=>console.log("Open file")},{name:"Save",iconName:"save",shortcut:"Cmd+S",action:async()=>console.log("Save")},{divider:!0},{name:"Export as PDF",iconName:"download",action:async()=>console.log("Export PDF")},{name:"Export as HTML",iconName:"code",action:async()=>console.log("Export HTML")}]},{name:"Edit",iconName:"edit3",action:async()=>{},submenu:[{name:"Cut",iconName:"scissors",shortcut:"Cmd+X",action:async()=>console.log("Cut")},{name:"Copy",iconName:"copy",shortcut:"Cmd+C",action:async()=>console.log("Copy")},{name:"Paste",iconName:"clipboard",shortcut:"Cmd+V",action:async()=>console.log("Paste")},{divider:!0},{name:"Find",iconName:"search",shortcut:"Cmd+F",action:async()=>console.log("Find")},{name:"Replace",iconName:"repeat",shortcut:"Cmd+H",action:async()=>console.log("Replace")}]},{name:"View",iconName:"eye",action:async()=>{},submenu:[{name:"Zoom In",iconName:"zoomIn",shortcut:"Cmd++",action:async()=>console.log("Zoom in")},{name:"Zoom Out",iconName:"zoomOut",shortcut:"Cmd+-",action:async()=>console.log("Zoom out")},{name:"Reset Zoom",iconName:"maximize2",shortcut:"Cmd+0",action:async()=>console.log("Reset zoom")},{divider:!0},{name:"Full Screen",iconName:"maximize",shortcut:"F11",action:async()=>console.log("Full screen")}]},{divider:!0},{name:"Settings",iconName:"settings",action:async()=>console.log("Settings")},{name:"Help",iconName:"helpCircle",action:async()=>{},submenu:[{name:"Documentation",iconName:"book",action:async()=>console.log("Documentation")},{name:"Keyboard Shortcuts",iconName:"keyboard",action:async()=>console.log("Shortcuts")},{divider:!0},{name:"About",iconName:"info",action:async()=>console.log("About")}]}])}}>
      <h3>Right-click anywhere in this area</h3>
      <p>A context menu with nested submenus will appear</p>
    </div>
  </dees-panel>
  <dees-panel heading="Component-Specific Context Menu">
    <dees-button style="margin: 20px;" @contextmenu=${t=>{jt.openContextMenuWithOptions(t,[{name:"Button Actions",iconName:"mousePointer",action:async()=>{},submenu:[{name:"Click",iconName:"mouse",action:async()=>console.log("Click action")},{name:"Double Click",iconName:"zap",action:async()=>console.log("Double click")},{name:"Long Press",iconName:"clock",action:async()=>console.log("Long press")}]},{name:"Button State",iconName:"toggleLeft",action:async()=>{},submenu:[{name:"Enable",iconName:"checkCircle",action:async()=>console.log("Enable")},{name:"Disable",iconName:"xCircle",action:async()=>console.log("Disable")},{divider:!0},{name:"Show",iconName:"eye",action:async()=>console.log("Show")},{name:"Hide",iconName:"eyeOff",action:async()=>console.log("Hide")}]},{divider:!0},{name:"Disabled Action",iconName:"ban",disabled:!0,action:async()=>console.log("This should not run")},{name:"Properties",iconName:"settings",action:async()=>console.log("Button properties")}])}}>Right-click on this button</dees-button>
  </dees-panel>

  <dees-panel heading="Advanced Context Menu Example">
    <div class="demo-area" @contextmenu=${t=>{jt.openContextMenuWithOptions(t,[{name:"Format",iconName:"type",action:async()=>{},submenu:[{name:"Bold",iconName:"bold",shortcut:"Cmd+B",action:async()=>console.log("Bold")},{name:"Italic",iconName:"italic",shortcut:"Cmd+I",action:async()=>console.log("Italic")},{name:"Underline",iconName:"underline",shortcut:"Cmd+U",action:async()=>console.log("Underline")},{divider:!0},{name:"Font Size",iconName:"type",action:async()=>console.log("Font size menu")},{name:"Font Color",iconName:"palette",action:async()=>console.log("Font color menu")}]},{name:"Transform",iconName:"shuffle",action:async()=>{},submenu:[{name:"To Uppercase",iconName:"arrowUp",action:async()=>console.log("Uppercase")},{name:"To Lowercase",iconName:"arrowDown",action:async()=>console.log("Lowercase")},{name:"Capitalize",iconName:"type",action:async()=>console.log("Capitalize")}]},{divider:!0},{name:"Delete",iconName:"trash2",action:async()=>console.log("Delete")}])}}>
      <h3>Advanced Nested Menu Example</h3>
      <p>This shows deeply nested submenus and various formatting options</p>
    </div>
  </dees-panel>
  
  <dees-panel heading="Static Context Menu (Always Visible)">
    <dees-contextmenu
      class="withMargin"
      .menuItems=${[{name:"Project",iconName:"folder",action:async()=>{},submenu:[{name:"New Project",iconName:"folderPlus",shortcut:"Cmd+Shift+N",action:async()=>console.log("New project")},{name:"Open Project",iconName:"folderOpen",shortcut:"Cmd+Shift+O",action:async()=>console.log("Open project")},{divider:!0},{name:"Recent Projects",iconName:"clock",action:async()=>{},submenu:[{name:"Project Alpha",action:async()=>console.log("Open Alpha")},{name:"Project Beta",action:async()=>console.log("Open Beta")},{name:"Project Gamma",action:async()=>console.log("Open Gamma")}]}]},{name:"Tools",iconName:"tool",action:async()=>{},submenu:[{name:"Terminal",iconName:"terminal",shortcut:"Cmd+T",action:async()=>console.log("Terminal")},{name:"Console",iconName:"monitor",shortcut:"Cmd+K",action:async()=>console.log("Console")},{divider:!0},{name:"Extensions",iconName:"package",action:async()=>console.log("Extensions")}]},{divider:!0},{name:"Preferences",iconName:"sliders",action:async()=>console.log("Preferences")}]}
    ></dees-contextmenu>
  </dees-panel>
</div>
`});var B5,Is,vi,Ns=v(()=>{oe();bi();B5=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Is=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},vi=(()=>{let t=[Q("dees-windowlayer")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],y=[D({type:Boolean})],B5(this,null,n,{kind:"accessor",name:"options",static:!1,private:!1,access:{has:S=>"options"in S,get:S=>S.options,set:(S,N)=>{S.options=N}},metadata:M},s,o),B5(this,null,u,{kind:"accessor",name:"backdropZIndex",static:!1,private:!1,access:{has:S=>"backdropZIndex"in S,get:S=>S.backdropZIndex,set:(S,N)=>{S.backdropZIndex=N}},metadata:M},c,d),B5(this,null,l,{kind:"accessor",name:"contentZIndex",static:!1,private:!1,access:{has:S=>"contentZIndex"in S,get:S=>S.contentZIndex,set:(S,N)=>{S.contentZIndex=N}},metadata:M},f,b),B5(this,null,y,{kind:"accessor",name:"visible",static:!1,private:!1,access:{has:S=>"visible"in S,get:S=>S.visible,set:(S,N)=>{S.visible=N}},metadata:M},g,h),B5(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=()=>w`<dees-windowlayer></dees-windowlayer>`;static demoGroups=["Overlay"];static async createAndShow(M){let S=rt.DomTools.getGlobalDomToolsSync(),N=new x;return N.options={...N.options,...M},document.body.append(N),await S.convenience.smartdelay.delayFor(0),N.show(),N}#e=Is(this,s,{blur:!1});get options(){return this.#e}set options(M){this.#e=M}#t=(Is(this,o),Is(this,c,1e3));get backdropZIndex(){return this.#t}set backdropZIndex(M){this.#t=M}#a=(Is(this,d),Is(this,f,1001));get contentZIndex(){return this.#a}set contentZIndex(M){this.#a=M}#i=(Is(this,b),Is(this,g,!1));get visible(){return this.#i}set visible(M){this.#i=M}constructor(){super(),Is(this,h),rt.elementBasic.setup()}render(){return w`
      ${rt.elementBasic.styles}
      <style>
        .windowOverlay {
          transition: all 0.2s;
          will-change: transform;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.0);
          backdrop-filter: brightness(1) ${this.options.blur?"blur(0px)":""};
          pointer-events: none;
          z-index: ${this.backdropZIndex};
        }
        .slotContent {
          position: fixed;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: ${this.contentZIndex};
          pointer-events: none;
        }
        
        .slotContent > * {
          pointer-events: auto;
        }
        
        .visible {
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: brightness(0.9) ${this.options.blur?"blur(2px)":""};
          pointer-events: all;
        }
      </style>
      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible?"visible":null}">
      </div>
      <div class="slotContent">
        <slot></slot>
      </div>
    `}firstUpdated(){setTimeout(()=>{this.visible=!0},100)}dispatchClicked(){this.dispatchEvent(new CustomEvent("clicked"))}toggleVisibility(){this.visible=!this.visible}getContentZIndex(){return this.contentZIndex}async show(){let M=await this.domtoolsPromise;this.backdropZIndex=u1.getNextZIndex(),this.contentZIndex=u1.getNextZIndex(),u1.register(this,this.backdropZIndex),await M.convenience.smartdelay.delayFor(0),this.visible=!0}async hide(){await(await this.domtoolsPromise).convenience.smartdelay.delayFor(0),this.visible=!1}async destroy(){let M=await this.domtoolsPromise;await this.hide(),await M.convenience.smartdelay.delayFor(300),u1.unregister(this),this.remove()}static{Is(i,a)}};return x=i})()});function XA(t,e){(e==null||e>t.length)&&(e=t.length);for(var a=0,i=Array(e);a<e;a++)i[a]=t[a];return i}function uqt(t){if(Array.isArray(t))return t}function hqt(t){if(Array.isArray(t))return XA(t)}function fqt(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function cde(t,e){for(var a=0;a<e.length;a++){var i=e[a];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,pde(i.key),i)}}function mqt(t,e,a){return e&&cde(t.prototype,e),a&&cde(t,a),Object.defineProperty(t,"prototype",{writable:!1}),t}function Yf(t,e){var a=typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(!a){if(Array.isArray(t)||(a=KA(t))||e&&t&&typeof t.length=="number"){a&&(t=a);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(u){throw u},f:r}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var n,s=!0,o=!1;return{s:function(){a=a.call(t)},n:function(){var u=a.next();return s=u.done,u},e:function(u){o=!0,n=u},f:function(){try{s||a.return==null||a.return()}finally{if(o)throw n}}}}function gt(t,e,a){return(e=pde(e))in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function gqt(t,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Zf(t,e)}function bqt(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function vqt(t,e){var a=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(a!=null){var i,r,n,s,o=[],u=!0,c=!1;try{if(n=(a=a.call(t)).next,e===0){if(Object(a)!==a)return;u=!1}else for(;!(u=(i=n.call(a)).done)&&(o.push(i.value),o.length!==e);u=!0);}catch(d){c=!0,r=d}finally{try{if(!u&&a.return!=null&&(s=a.return(),Object(s)!==s))return}finally{if(c)throw r}}return o}}function yqt(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function xqt(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function dde(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),a.push.apply(a,i)}return a}function Ne(t){for(var e=1;e<arguments.length;e++){var a=arguments[e]!=null?arguments[e]:{};e%2?dde(Object(a),!0).forEach(function(i){gt(t,i,a[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):dde(Object(a)).forEach(function(i){Object.defineProperty(t,i,Object.getOwnPropertyDescriptor(a,i))})}return t}function Zf(t,e){return Zf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(a,i){return a.__proto__=i,a},Zf(t,e)}function Xf(t,e){return uqt(t)||vqt(t,e)||KA(t,e)||yqt()}function Ui(t){return hqt(t)||bqt(t)||KA(t)||xqt()}function wqt(t,e){if(typeof t!="object"||!t)return t;var a=t[Symbol.toPrimitive];if(a!==void 0){var i=a.call(t,e||"default");if(typeof i!="object")return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}function pde(t){var e=wqt(t,"string");return typeof e=="symbol"?e:e+""}function Kf(t){"@babel/helpers - typeof";return Kf=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Kf(t)}function KA(t,e){if(t){if(typeof t=="string")return XA(t,e);var a={}.toString.call(t).slice(8,-1);return a==="Object"&&t.constructor&&(a=t.constructor.name),a==="Map"||a==="Set"?Array.from(t):a==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?XA(t,e):void 0}}function Y2(){Y2=function(r,n){return new a(r,void 0,n)};var t=RegExp.prototype,e=new WeakMap;function a(r,n,s){var o=RegExp(r,n);return e.set(o,s||e.get(r)),Zf(o,a.prototype)}function i(r,n){var s=e.get(n);return Object.keys(s).reduce(function(o,u){var c=s[u];if(typeof c=="number")o[u]=r[c];else{for(var d=0;r[c[d]]===void 0&&d+1<c.length;)d++;o[u]=r[c[d]]}return o},Object.create(null))}return gqt(a,RegExp),a.prototype.exec=function(r){var n=t.exec.call(this,r);if(n){n.groups=i(n,this);var s=n.indices;s&&(s.groups=i(s,this))}return n},a.prototype[Symbol.replace]=function(r,n){if(typeof n=="string"){var s=e.get(this);return t[Symbol.replace].call(this,r,n.replace(/\$<([^>]+)(>|$)/g,function(u,c,d){if(d==="")return u;var l=s[c];return Array.isArray(l)?"$"+l.join("$"):typeof l=="number"?"$"+l:""}))}if(typeof n=="function"){var o=this;return t[Symbol.replace].call(this,r,function(){var u=arguments;return typeof u[u.length-1]!="object"&&(u=[].slice.call(u)).push(i(u,o)),n.apply(this,u)})}return t[Symbol.replace].call(this,r,n)},Y2.apply(this,arguments)}function q5(t){return new Proxy(t,{get:function(a,i){return i in a?a[i]:a[M2]}})}function cjt(t){var e=y1.querySelector("script["+t+"]");if(e)return e.getAttribute(t)}function djt(t){return t===""?!0:t==="false"?!1:t==="true"?!0:t}function pjt(t){return j5.push(t),function(){j5.splice(j5.indexOf(t),1)}}function ujt(t){if(!(!t||!Rs)){var e=y1.createElement("style");e.setAttribute("type","text/css"),e.innerHTML=t;for(var a=y1.head.childNodes,i=null,r=a.length-1;r>-1;r--){var n=a[r],s=(n.tagName||"").toUpperCase();["STYLE","LINK"].indexOf(s)>-1&&(i=n)}return y1.head.insertBefore(e,i),t}}function t8e(){for(var t=12,e="";t-- >0;)e+=hjt[Math.random()*62|0];return e}function w4(t){for(var e=[],a=(t||[]).length>>>0;a--;)e[a]=t[a];return e}function pE(t){return t.classList?w4(t.classList):(t.getAttribute("class")||"").split(" ").filter(function(e){return e})}function a8e(t){return"".concat(t).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function fjt(t){return Object.keys(t||{}).reduce(function(e,a){return e+"".concat(a,'="').concat(a8e(t[a]),'" ')},"").trim()}function em(t){return Object.keys(t||{}).reduce(function(e,a){return e+"".concat(a,": ").concat(t[a].trim(),";")},"")}function uE(t){retur
`),t.removeAttribute(a),i()}).catch(r)}else i()}else i()})}function bUt(t){return Promise.all([F8e(t,"::before"),F8e(t,"::after")])}function vUt(t){return t.parentNode!==document.head&&!~ajt.indexOf(t.tagName.toUpperCase())&&!t.getAttribute(iE)&&(!t.parentNode||t.parentNode.tagName!=="svg")}function O8e(t){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;if(Rs){var a;if(e)a=t;else if(et.searchPseudoElementsFullScan)a=t.querySelectorAll("*");else{var i=new Set,r=Yf(document.styleSheets),n;try{for(r.s();!(n=r.n()).done;){var s=n.value;try{var o=Yf(s.cssRules),u;try{for(o.s();!(u=o.n()).done;){var c=u.value,d=xUt(c.selectorText),l=Yf(d),f;try{for(l.s();!(f=l.n()).done;){var b=f.value;i.add(b)}}catch(g){l.e(g)}finally{l.f()}}}catch(g){o.e(g)}finally{o.f()}}catch(g){et.searchPseudoElementsWarnings&&console.warn("Font Awesome: cannot parse stylesheet: ".concat(s.href," (").concat(g.message,`)
If it declares any Font Awesome CSS pseudo-elements, they will not be rendered as SVG icons. Add crossorigin="anonymous" to the <link>, enable searchPseudoElementsFullScan for slower but more thorough DOM parsing, or suppress this warning by setting searchPseudoElementsWarnings to false.`))}}}catch(g){r.e(g)}finally{r.f()}if(!i.size)return;var y=Array.from(i).join(", ");try{a=t.querySelectorAll(y)}catch{}}return new Promise(function(g,h){var x=w4(a).filter(vUt).map(bUt),M=CE.begin("searchPseudoElements");$8e(),Promise.all(x).then(function(){M(),TE(),g()}).catch(function(){M(),TE(),h()})})}}function q8e(t){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0;return t.attributes&&(t.attributes.fill||e)&&(t.attributes.fill="black"),t}function zUt(t){return t.tag==="g"?t.children:[t]}var ude,QA,hde,fde,mde,Mqt,gde,bde,po,y1,vde,Qf,UX1,Rs,yde,JA,kqt,zqt,xde,Sqt,wde,M2,H5,Mde,kde,zde,Sde,Cde,_de,Tde,Lde,$de,Dde,Ade,Ede,Pde,Ide,Nde,Rde,Fde,Cqt,_qt,Tqt,Lqt,$qt,Dqt,Aqt,Eqt,Pqt,Iqt,Nqt,Rqt,Fqt,Oqt,Bqt,Hqt,qqt,Vqt,jqt,Ode,WX1,Uqt,Wqt,Gqt,Yqt,Bde,Hde,Zqt,Xqt,Kqt,Qqt,Jqt,GX1,eVt,tVt,aVt,qde,eE,Jf,iVt,rVt,sVt,nVt,oVt,lVt,cVt,dVt,pVt,uVt,hVt,fVt,mVt,gVt,bVt,vVt,yVt,xVt,wVt,MVt,kVt,zVt,SVt,CVt,_Vt,TVt,LVt,$Vt,DVt,AVt,EVt,PVt,IVt,NVt,RVt,FVt,OVt,BVt,HVt,YX1,qVt,VVt,jVt,UVt,ZX1,WVt,GVt,tE,YVt,Vde,ZVt,jde,XVt,KVt,QVt,JVt,Fs,aE,Ude,Wde,X0,iE,ejt,rE,sE,Gde,tjt,ajt,Yde,Zde,Xde,ijt,nE,Kde,oE,lE,cE,XX1,rjt,Qde,sjt,njt,KX1,ojt,dE,ljt,V5,e8e,x4,et,j5,uo,Ur,hjt,bjt,r8e,vjt,Os,Wi,s8e,n8e,tm,xjt,fE,gE,Gi,QX1,JX1,W5,wjt,d8e,Mjt,bE,p8e,u8e,h8e,f8e,m8e,g8e,v8e,x8e,$jt,Djt,Ejt,w8e,M4,k4,Pjt,M8e,Njt,Rjt,Fjt,Aa,Ojt,ME,jjt,z8e,SE,G5,Wjt,S8e,CE,sm,nm,_E,om,rUt,lUt,cUt,dUt,pUt,uUt,I8e,N8e,R8e,LE,hUt,yUt,xUt,wUt,B8e,MUt,H8e,kUt,$E,SUt,CUt,_Ut,TUt,LUt,$Ut,DUt,AUt,EUt,PUt,IUt,DE,NUt,RUt,FUt,Jde,V8e=v(()=>{ude=function(){},QA={},hde={},fde=null,mde={mark:ude,measure:ude};try{typeof window<"u"&&(QA=window),typeof document<"u"&&(hde=document),typeof MutationObserver<"u"&&(fde=MutationObserver),typeof performance<"u"&&(mde=performance)}catch{}Mqt=QA.navigator||{},gde=Mqt.userAgent,bde=gde===void 0?"":gde,po=QA,y1=hde,vde=fde,Qf=mde,UX1=!!po.document,Rs=!!y1.documentElement&&!!y1.head&&typeof y1.addEventListener=="function"&&typeof y1.createElement=="function",yde=~bde.indexOf("MSIE")||~bde.indexOf("Trident/"),kqt=/fa(k|kd|s|r|l|t|d|dr|dl|dt|b|slr|slpr|wsb|tl|ns|nds|es|gt|jr|jfr|jdr|usb|ufsb|udsb|cr|ss|sr|sl|st|sds|sdr|sdl|sdt)?[\-\ ]/,zqt=/Font ?Awesome ?([567 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp Duotone|Sharp|Kit|Notdog Duo|Notdog|Chisel|Etch|Graphite|Thumbprint|Jelly Fill|Jelly Duo|Jelly|Utility|Utility Fill|Utility Duo|Slab Press|Slab|Whiteboard)?.*/i,xde={classic:{fa:"solid",fas:"solid","fa-solid":"solid",far:"regular","fa-regular":"regular",fal:"light","fa-light":"light",fat:"thin","fa-thin":"thin",fab:"brands","fa-brands":"brands"},duotone:{fa:"solid",fad:"solid","fa-solid":"solid","fa-duotone":"solid",fadr:"regular","fa-regular":"regular",fadl:"light","fa-light":"light",fadt:"thin","fa-thin":"thin"},sharp:{fa:"solid",fass:"solid","fa-solid":"solid",fasr:"regular","fa-regular":"regular",fasl:"light","fa-light":"light",fast:"thin","fa-thin":"thin"},"sharp-duotone":{fa:"solid",fasds:"solid","fa-solid":"solid",fasdr:"regular","fa-regular":"regular",fasdl:"light","fa-light":"light",fasdt:"thin","fa-thin":"thin"},slab:{"fa-regular":"regular",faslr:"regular"},"slab-press":{"fa-regular":"regular",faslpr:"regular"},thumbprint:{"fa-light":"light",fatl:"light"},whiteboard:{"fa-semibold":"semibold",fawsb:"semibold"},notdog:{"fa-solid":"solid",fans:"solid"},"notdog-duo":{"fa-solid":"solid",fands:"solid"},etch:{"fa-solid":"solid",faes:"solid"},graphite:{"fa-thin":"thin",fagt:"thin"},jelly:{"fa-regular":"regular",fajr:"regular"},"jelly-fill":{"fa-regular":"regular",fajfr:"regular"},"jelly-duo":{"fa-regular":"regular",fajdr:"regular"},chisel:{"fa-regular":"regular",facr:"regular"},utility:{"fa-semibold":"semibold",fausb:"semibold"},"utility-duo":{"fa-semibold":"semibold",faudsb:"semibold"},"utility-fill":{"fa-semibold":"semibold",faufsb:"se
  --fa-font-solid: normal 900 1em/1 'Font Awesome 7 Free';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 7 Free';
  --fa-font-light: normal 300 1em/1 'Font Awesome 7 Pro';
  --fa-font-thin: normal 100 1em/1 'Font Awesome 7 Pro';
  --fa-font-duotone: normal 900 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-regular: normal 400 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-light: normal 300 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-thin: normal 100 1em/1 'Font Awesome 7 Duotone';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 7 Brands';
  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-light: normal 300 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-slab-regular: normal 400 1em/1 'Font Awesome 7 Slab';
  --fa-font-slab-press-regular: normal 400 1em/1 'Font Awesome 7 Slab Press';
  --fa-font-whiteboard-semibold: normal 600 1em/1 'Font Awesome 7 Whiteboard';
  --fa-font-thumbprint-light: normal 300 1em/1 'Font Awesome 7 Thumbprint';
  --fa-font-notdog-solid: normal 900 1em/1 'Font Awesome 7 Notdog';
  --fa-font-notdog-duo-solid: normal 900 1em/1 'Font Awesome 7 Notdog Duo';
  --fa-font-etch-solid: normal 900 1em/1 'Font Awesome 7 Etch';
  --fa-font-graphite-thin: normal 100 1em/1 'Font Awesome 7 Graphite';
  --fa-font-jelly-regular: normal 400 1em/1 'Font Awesome 7 Jelly';
  --fa-font-jelly-fill-regular: normal 400 1em/1 'Font Awesome 7 Jelly Fill';
  --fa-font-jelly-duo-regular: normal 400 1em/1 'Font Awesome 7 Jelly Duo';
  --fa-font-chisel-regular: normal 400 1em/1 'Font Awesome 7 Chisel';
  --fa-font-utility-semibold: normal 600 1em/1 'Font Awesome 7 Utility';
  --fa-font-utility-duo-semibold: normal 600 1em/1 'Font Awesome 7 Utility Duo';
  --fa-font-utility-fill-semibold: normal 600 1em/1 'Font Awesome 7 Utility Fill';
}

.svg-inline--fa {
  box-sizing: content-box;
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.svg-inline--fa.fa-2xs {
  vertical-align: 0.1em;
}
.svg-inline--fa.fa-xs {
  vertical-align: 0em;
}
.svg-inline--fa.fa-sm {
  vertical-align: -0.0714285714em;
}
.svg-inline--fa.fa-lg {
  vertical-align: -0.2em;
}
.svg-inline--fa.fa-xl {
  vertical-align: -0.25em;
}
.svg-inline--fa.fa-2xl {
  vertical-align: -0.3125em;
}
.svg-inline--fa.fa-pull-left,
.svg-inline--fa .fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}
.svg-inline--fa.fa-pull-right,
.svg-inline--fa .fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}
.svg-inline--fa.fa-li {
  width: var(--fa-li-width, 2em);
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */
}

.fa-layers-counter, .fa-layers-text {
  display: inline-block;
  position: absolute;
  text-align: center;
}

.fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.fa-layers .svg-inline--fa {
  inset: 0;
  margin: auto;
  position: absolute;
  transform-origin: center center;
}

.fa-layers-text {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-counter-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom right;
}

.fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom left;
}

.fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top left;
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-2xs {
  font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xs {
  font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-sm {
  font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-lg {
  font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xl {
  font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-2xl {
  font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-width-auto {
  --fa-width: auto;
}

.fa-fw,
.fa-width-fixed {
  --fa-width: 1.25em;
}

.fa-ul {
  list-style-type: none;
  margin-inline-start: var(--fa-li-margin, 2.5em);
  padding-inline-start: 0;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

/* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
/* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.0625em);
  box-sizing: var(--fa-border-box-sizing, content-box);
  padding: var(--fa-border-padding, 0.1875em 0.25em);
}

.fa-pull-left,
.fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.fa-pull-right,
.fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
  fill: black;
}

.svg-inline--fa.fa-inverse {
  fill: var(--fa-inverse, #fff);
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-inverse {
  color: var(--fa-inverse, #fff);
}

.svg-inline--fa.fa-stack-1x {
  --fa-width: 1.25em;
  height: 1em;
  width: var(--fa-width);
}
.svg-inline--fa.fa-stack-2x {
  --fa-width: 2.5em;
  height: 2em;
  width: var(--fa-width);
}

.fa-stack-1x,
.fa-stack-2x {
  inset: 0;
  margin: auto;
  position: absolute;
  z-index: var(--fa-stack-z-index, auto);
}`;r8e=!1;vjt={mixout:function(){return{dom:{css:i8e,insertCss:hE}}},hooks:function(){return{beforeDOMElementCreation:function(){hE()},beforeI2svg:function(){hE()}}}},Os=po||{};Os[Fs]||(Os[Fs]={}),Os[Fs].styles||(Os[Fs].styles={}),Os[Fs].hooks||(Os[Fs].hooks={}),Os[Fs].shims||(Os[Fs].shims=[]);Wi=Os[Fs],s8e=[],n8e=function(){y1.removeEventListener("DOMContentLoaded",n8e),tm=1,s8e.map(function(e){return e()})},tm=!1;Rs&&(tm=(y1.documentElement.doScroll?/^loaded|^c/:/^loaded|^i|^c/).test(y1.readyState),tm||y1.addEventListener("DOMContentLoaded",n8e));xjt=function(e,a){return function(i,r,n,s){return e.call(a,i,r,n,s)}},fE=function(e,a,i,r){var n=Object.keys(e),s=n.length,o=r!==void 0?xjt(a,r):a,u,c,d;for(i===void 0?(u=1,d=e[n[0]]):(u=0,d=i);u<s;u++)c=n[u],d=o(d,e[c],c,e);return d};gE=1,Gi=2,QX1=[[Gi,Y2(/path opacity="([^"]*)".*d="([^"]*)".*path.*d="([^"]*)"/,{d2:2,d1:3})],[Gi,Y2(/path opacity="([^"]*)".*d="([^"]*)"/,{d2:2})],[gE,Y2(/path fill="currentColor".*d="([^"]+)"/,{d1:1})]],JX1=[[Gi,Y2(/path class="([^"]*secondary[^"]*)".*d="([^"]+)".*path class="([^"]*primary[^"]*)".*d="([^"]+)"/,{attr2:1,d2:2,attr1:3,d1:4})],[Gi,Y2(/path class="([^"]*primary[^"]*)".*d="([^"]+)".*path class="([^"]*secondary[^"]*)".*d="([^"]+)"/,{attr1:1,d1:2,attr2:3,d2:4})],[Gi,Y2(/path class="([^"]*primary[^"]*)".*d="([^"]+)"/,{attr1:1,d1:2})],[Gi,Y2(/path class="([^"]*secondary[^"]*)".*d="([^"]+)"/,{attr2:1,d2:2})],[Gi,Y2(/path d="([^"]+)".*class="([^"]*secondary[^"]*)".*path d="([^"]+)".*class="([^"]*primary[^"]*)"/,{d2:1,attr2:2,d1:3,attr1:4})],[Gi,Y2(/path d="([^"]+)".*class="([^"]*primary[^"]*)".*path d="([^"]+)".*class="([^"]*secondary[^"]*)"/,{d1:1,attr1:2,d2:3,attr2:4})],[Gi,Y2(/path d="([^"]+)".*class="([^"]*primary[^"]*)"/,{d1:1,attr1:2})],[Gi,Y2(/path d="([^"]+)".*class="([^"]*secondary[^"]*)"/,{d2:1,attr2:2})],[Gi,Y2(/path d="([^"]+)".*path d="([^"]+)"/,{d1:1,d2:2})],[gE,Y2(/path d="([^"]+)"/,{d1:1})],[gE,Y2(/path style="([^"]+)".*d="([^"]+)"/,{attr1:1,d1:2})]],W5=Wi.styles,wjt=Wi.shims,d8e=Object.keys(lE),Mjt=d8e.reduce(function(t,e){return t[e]=Object.keys(lE[e]),t},{}),bE=null,p8e={},u8e={},h8e={},f8e={},m8e={};g8e=function(){var e=function(n){return fE(W5,function(s,o,u){return s[u]=fE(o,n,{}),s},{})};p8e=e(function(r,n,s){if(n[3]&&(r[n[3]]=s),n[2]){var o=n[2].filter(function(u){return typeof u=="number"});o.forEach(function(u){r[u.toString(16)]=s})}return r}),u8e=e(function(r,n,s){if(r[s]=s,n[2]){var o=n[2].filter(function(u){return typeof u=="string"});o.forEach(function(u){r[u]=s})}return r}),m8e=e(function(r,n,s){var o=n[2];return r[s]=s,o.forEach(function(u){r[u]=s}),r});var a="far"in W5||et.autoFetchSvg,i=fE(wjt,function(r,n){var s=n[0],o=n[1],u=n[2];return o==="far"&&!a&&(o="fas"),typeof s=="string"&&(r.names[s]={prefix:o,iconName:u}),typeof s=="number"&&(r.unicodes[s.toString(16)]={prefix:o,iconName:u}),r},{names:{},unicodes:{}});h8e=i.names,f8e=i.unicodes,bE=am(et.styleDefault,{family:et.familyDefault})};pjt(function(t){bE=am(t.styleDefault,{family:et.familyDefault})}),g8e();v8e=function(){return{prefix:null,iconName:null,rest:[]}};x8e=Vde.concat(Bde);$jt=Ode.filter(function(t){return t!==M2||t!==H5}),Djt=Object.keys(tE).filter(function(t){return t!==M2}).map(function(t){return Object.keys(tE[t])}).flat();Ejt=(function(){function t(){fqt(this,t),this.definitions={}}return mqt(t,[{key:"add",value:function(){for(var a=this,i=arguments.length,r=new Array(i),n=0;n<i;n++)r[n]=arguments[n];var s=r.reduce(this._pullDefinitions,{});Object.keys(s).forEach(function(o){a.definitions[o]=Ne(Ne({},a.definitions[o]||{}),s[o]),mE(o,s[o]);var u=lE[M2][o];u&&mE(u,s[o]),g8e()})}},{key:"reset",value:function(){this.definitions={}}},{key:"_pullDefinitions",value:function(a,i){var r=i.prefix&&i.iconName&&i.icon?{0:i}:i;return Object.keys(r).map(function(n){var s=r[n],o=s.prefix,u=s.iconName,c=s.icon,d=c[2];a[o]||(a[o]={}),d.length>0&&d.forEach(function(l){typeof l=="string"&&(a[o][l]=c)}),a[o][u]=c}),a}}])})(),w8e=[],M4={},k4={},Pjt=Object.keys(k4);M8e=new Ejt,Njt=function(){et.autoReplaceSvg=!1,et.observeMutations=!1,Q0("noAuto")},Rjt={i2svg:
`);a.setAttribute(X0,""),a.innerHTML=s}};_E=!1;om=null;rUt=Wi.styles;lUt=function(e){var a=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=a.transform,r=i===void 0?Ur:i,n=a.symbol,s=n===void 0?!1:n,o=a.mask,u=o===void 0?null:o,c=a.maskId,d=c===void 0?null:c,l=a.classes,f=l===void 0?[]:l,b=a.attributes,y=b===void 0?{}:b,g=a.styles,h=g===void 0?{}:g;if(e){var x=e.prefix,M=e.iconName,S=e.icon;return rm(Ne({type:"icon"},e),function(){return Q0("beforeDOMElementCreation",{iconDefinition:e,params:a}),wE({icons:{main:kE(S),mask:u?kE(u.icon):{found:!1,width:null,height:null,icon:{}}},prefix:x,iconName:M,transform:Ne(Ne({},Ur),r),symbol:s,maskId:d,extra:{attributes:y,styles:h,classes:f}})})}},cUt={mixout:function(){return{icon:oUt(lUt)}},hooks:function(){return{mutationObserverCallbacks:function(a){return a.treeCallback=P8e,a.nodeCallback=nUt,a}}},provides:function(e){e.i2svg=function(a){var i=a.node,r=i===void 0?y1:i,n=a.callback,s=n===void 0?function(){}:n;return P8e(r,s)},e.generateSvgReplacementMutation=function(a,i){var r=i.iconName,n=i.prefix,s=i.transform,o=i.symbol,u=i.mask,c=i.maskId,d=i.extra;return new Promise(function(l,f){Promise.all([zE(r,n),u.iconName?zE(u.iconName,u.prefix):Promise.resolve({found:!1,width:512,height:512,icon:{}})]).then(function(b){var y=Xf(b,2),g=y[0],h=y[1];l([a,wE({icons:{main:g,mask:h},prefix:n,iconName:r,transform:s,symbol:o,maskId:c,extra:d,watchable:!0})])}).catch(f)})},e.generateAbstractIcon=function(a){var i=a.children,r=a.attributes,n=a.main,s=a.transform,o=a.styles,u=em(o);u.length>0&&(r.style=u);var c;return uE(s)&&(c=fo("generateAbstractTransformGrouping",{main:n,transform:s,containerWidth:n.width,iconWidth:n.width})),i.push(c||n.icon),{children:i,attributes:r}}}},dUt={mixout:function(){return{layer:function(a){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=i.classes,n=r===void 0?[]:r;return rm({type:"layer"},function(){Q0("beforeDOMElementCreation",{assembler:a,params:i});var s=[];return a(function(o){Array.isArray(o)?o.map(function(u){s=s.concat(u.abstract)}):s=s.concat(o.abstract)}),[{tag:"span",attributes:{class:["".concat(et.cssPrefix,"-layers")].concat(Ui(n)).join(" ")},children:s}]})}}}},pUt={mixout:function(){return{counter:function(a){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=i.title,n=r===void 0?null:r,s=i.classes,o=s===void 0?[]:s,u=i.attributes,c=u===void 0?{}:u,d=i.styles,l=d===void 0?{}:d;return rm({type:"counter",content:a},function(){return Q0("beforeDOMElementCreation",{content:a,params:i}),Vjt({content:a.toString(),title:n,extra:{attributes:c,styles:l,classes:["".concat(et.cssPrefix,"-layers-counter")].concat(Ui(o))}})})}}}},uUt={mixout:function(){return{text:function(a){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=i.transform,n=r===void 0?Ur:r,s=i.classes,o=s===void 0?[]:s,u=i.attributes,c=u===void 0?{}:u,d=i.styles,l=d===void 0?{}:d;return rm({type:"text",content:a},function(){return Q0("beforeDOMElementCreation",{content:a,params:i}),k8e({content:a,transform:Ne(Ne({},Ur),n),extra:{attributes:c,styles:l,classes:["".concat(et.cssPrefix,"-layers-text")].concat(Ui(o))}})})}}},provides:function(e){e.generateLayersText=function(a,i){var r=i.transform,n=i.extra,s=null,o=null;if(yde){var u=parseInt(getComputedStyle(a).fontSize,10),c=a.getBoundingClientRect();s=c.width/u,o=c.height/u}return Promise.resolve([a,k8e({content:a.innerHTML,width:s,height:o,transform:r,extra:n,watchable:!0})])}}},I8e=new RegExp('"',"ug"),N8e=[1105920,1112319],R8e=Ne(Ne(Ne(Ne({},{FontAwesome:{normal:"fas",400:"fas"}}),Wqt),JVt),tVt),LE=Object.keys(R8e).reduce(function(t,e){return t[e.toLowerCase()]=R8e[e],t},{}),hUt=Object.keys(LE).reduce(function(t,e){var a=LE[e];return t[e]=a[900]||Ui(Object.entries(a))[0][1],t},{});yUt=function(e){return!!e&&Yde.some(function(a){return e.includes(a)})},xUt=function(e){if(!e)return[];var a=new Set,i=e.split(/,(?![^()]*\))/).map(function(u){return u.trim()});i=i.flatMap(function(u){return u.includes("(")?u:u.split(",").map(function(c){return c.trim()})});var r=Yf(i),n;try{for(r.s();!(n=r
If you want to use all the icons you can import it like:
 \`import { createIcons, icons } from 'lucide';
lucide.createIcons({icons});\``);if(typeof i>"u")throw new Error("`createIcons()` only works in a browser environment.");if(Array.from(i.querySelectorAll(`[${e}]`)).forEach(s=>lXe(s,{nameAttr:e,icons:t,attrs:a})),r&&Array.from(i.querySelectorAll("template")).forEach(o=>Wht({icons:t,nameAttr:e,attrs:a,root:o.content,inTemplates:r})),e==="data-lucide"){let s=i.querySelectorAll("[icon-name]");s.length>0&&(console.warn("[Lucide] Some icons were found with the now deprecated icon-name attribute. These will still be replaced for backwards compatibility, but will no longer be supported in v1.0 and you should switch to data-lucide"),Array.from(s).forEach(o=>lXe(o,{nameAttr:"icon-name",icons:t,attrs:a})))}};m.AArrowDown=cXe,m.AArrowUp=dXe,m.ALargeSmall=pXe,m.Accessibility=uXe,m.Activity=fXe,m.ActivitySquare=$y,m.AirVent=hXe,m.Airplay=mXe,m.AlarmCheck=Vg,m.AlarmClock=bXe,m.AlarmClockCheck=Vg,m.AlarmClockMinus=jg,m.AlarmClockOff=gXe,m.AlarmClockPlus=Ug,m.AlarmMinus=jg,m.AlarmPlus=Ug,m.AlarmSmoke=vXe,m.Album=yXe,m.AlertCircle=xb,m.AlertOctagon=ry,m.AlertTriangle=Nx,m.AlignCenter=Tx,m.AlignCenterHorizontal=xXe,m.AlignCenterVertical=wXe,m.AlignEndHorizontal=MXe,m.AlignEndVertical=kXe,m.AlignHorizontalDistributeCenter=zXe,m.AlignHorizontalDistributeEnd=SXe,m.AlignHorizontalDistributeStart=CXe,m.AlignHorizontalJustifyCenter=_Xe,m.AlignHorizontalJustifyEnd=TXe,m.AlignHorizontalJustifyStart=LXe,m.AlignHorizontalSpaceAround=$Xe,m.AlignHorizontalSpaceBetween=DXe,m.AlignJustify=$x,m.AlignLeft=F4,m.AlignRight=Lx,m.AlignStartHorizontal=AXe,m.AlignStartVertical=EXe,m.AlignVerticalDistributeCenter=PXe,m.AlignVerticalDistributeEnd=IXe,m.AlignVerticalDistributeStart=NXe,m.AlignVerticalJustifyCenter=RXe,m.AlignVerticalJustifyEnd=FXe,m.AlignVerticalJustifyStart=OXe,m.AlignVerticalSpaceAround=BXe,m.AlignVerticalSpaceBetween=HXe,m.Ambulance=qXe,m.Ampersand=VXe,m.Ampersands=jXe,m.Amphora=UXe,m.Anchor=WXe,m.Angry=GXe,m.Annoyed=YXe,m.Antenna=ZXe,m.Anvil=XXe,m.Aperture=KXe,m.AppWindow=JXe,m.AppWindowMac=QXe,m.Apple=eKe,m.Archive=iKe,m.ArchiveRestore=tKe,m.ArchiveX=aKe,m.AreaChart=nb,m.Armchair=rKe,m.ArrowBigDown=nKe,m.ArrowBigDownDash=sKe,m.ArrowBigLeft=lKe,m.ArrowBigLeftDash=oKe,m.ArrowBigRight=dKe,m.ArrowBigRightDash=cKe,m.ArrowBigUp=uKe,m.ArrowBigUpDash=pKe,m.ArrowDown=MKe,m.ArrowDown01=hKe,m.ArrowDown10=fKe,m.ArrowDownAZ=Wg,m.ArrowDownAz=Wg,m.ArrowDownCircle=wb,m.ArrowDownFromLine=mKe,m.ArrowDownLeft=gKe,m.ArrowDownLeftFromCircle=kb,m.ArrowDownLeftFromSquare=Py,m.ArrowDownLeftSquare=Ly,m.ArrowDownNarrowWide=bKe,m.ArrowDownRight=vKe,m.ArrowDownRightFromCircle=zb,m.ArrowDownRightFromSquare=Ny,m.ArrowDownRightSquare=Dy,m.ArrowDownSquare=Ay,m.ArrowDownToDot=yKe,m.ArrowDownToLine=xKe,m.ArrowDownUp=wKe,m.ArrowDownWideNarrow=Gg,m.ArrowDownZA=Yg,m.ArrowDownZa=Yg,m.ArrowLeft=CKe,m.ArrowLeftCircle=Mb,m.ArrowLeftFromLine=kKe,m.ArrowLeftRight=zKe,m.ArrowLeftSquare=Ey,m.ArrowLeftToLine=SKe,m.ArrowRight=$Ke,m.ArrowRightCircle=_b,m.ArrowRightFromLine=_Ke,m.ArrowRightLeft=TKe,m.ArrowRightSquare=Fy,m.ArrowRightToLine=LKe,m.ArrowUp=BKe,m.ArrowUp01=DKe,m.ArrowUp10=AKe,m.ArrowUpAZ=Zg,m.ArrowUpAz=Zg,m.ArrowUpCircle=Tb,m.ArrowUpDown=EKe,m.ArrowUpFromDot=PKe,m.ArrowUpFromLine=IKe,m.ArrowUpLeft=NKe,m.ArrowUpLeftFromCircle=Sb,m.ArrowUpLeftFromSquare=Iy,m.ArrowUpLeftSquare=Oy,m.ArrowUpNarrowWide=Xg,m.ArrowUpRight=RKe,m.ArrowUpRightFromCircle=Cb,m.ArrowUpRightFromSquare=Ry,m.ArrowUpRightSquare=By,m.ArrowUpSquare=Hy,m.ArrowUpToLine=FKe,m.ArrowUpWideNarrow=OKe,m.ArrowUpZA=Kg,m.ArrowUpZa=Kg,m.ArrowsUpFromLine=HKe,m.Asterisk=qKe,m.AsteriskSquare=qy,m.AtSign=VKe,m.Atom=jKe,m.AudioLines=UKe,m.AudioWaveform=WKe,m.Award=GKe,m.Axe=YKe,m.Axis3D=Qg,m.Axis3d=Qg,m.Baby=XKe,m.Backpack=ZKe,m.Badge=uQe,m.BadgeAlert=KKe,m.BadgeCent=QKe,m.BadgeCheck=Jg,m.BadgeDollarSign=eQe,m.BadgeEuro=tQe,m.BadgeHelp=eb,m.BadgeIndianRupee=JKe,m.BadgeInfo=aQe,m.BadgeJapaneseYen=iQe,m.BadgeMinus=rQe,m.BadgePercent=sQe,m.BadgePlus=nQe,m.BadgePoundSterling=oQe,m.BadgeQuestionMark=eb,m.BadgeRussianRuble=lQe,m.BadgeSwissFranc=cQe,m.BadgeTurkishLira=dQe,m.BadgeX=pQe,m.BaggageClaim=hQe,m.Balloon=fQe,m.Ban=mQe,m.Banana
`);navigator.clipboard.writeText(u).then(()=>{let d=window.event.currentTarget,l=d.textContent;d.textContent=`\u2713 Copied ${o.length} icon names!`,setTimeout(()=>{d.textContent=l},2e3)})},i=n=>{let s=n.target.value.toLowerCase().trim(),o=n.target.closest(".demoContainer");o.querySelectorAll(".iconContainer").forEach(c=>{let d=c.getAttribute("data-name");s===""||d&&d.includes(s)?c.classList.remove("hidden"):c.classList.add("hidden")}),o.querySelectorAll(".section-container").forEach(c=>{let d=c.querySelectorAll(".iconContainer:not(.hidden)").length,l=c.querySelector(".icon-count");if(l){let f=c.classList.contains("fa-section")?t.length:e.length;l.textContent=d===f?`${f} icons`:`${d} of ${f} icons`}})},r=(n,s)=>{let o=`${s}:${n}`;navigator.clipboard.writeText(o).then(()=>{let d=window.event.currentTarget.querySelector(".copy-tooltip");d&&(d.textContent="Copied!",setTimeout(()=>{d.textContent="Click to copy"},2e3))})};return w`
  <style>
    .demoContainer {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      background: #111111;
      padding: 20px;
      font-size: 30px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .search-container {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }
    
    #iconSearch {
      flex: 1;
      padding: 12px 16px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      background: #222;
      color: #fff;
      border: 1px solid #333;
    }
    
    #iconSearch:focus {
      outline: none;
      border-color: #e4002b;
    }
    
    .copy-all-button {
      padding: 12px 20px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      background: #e4002b;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    
    .copy-all-button:hover {
      background: #c4001b;
      transform: translateY(-1px);
    }
    
    .copy-all-button:active {
      transform: translateY(0);
    }
    
    dees-icon {
      transition: all 0.2s ease;
      color: #ffffff;
    }

    .iconContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 16px 0px 16px;
      border: 1px solid #333333;
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
      transition: background-color 0.2s;
      cursor: pointer;
      position: relative;
    }
    
    .iconContainer:hover {
      background-color: #222;
    }

    .iconName {
      font-size: 12px;
      text-align: center;
      color: #ccc;
      background: #333333;
      padding: 6px 10px;
      margin-left: -16px;
      margin-right: -16px;
      margin-top: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
      border-radius: 0 0 4px 4px;
    }

    .section-title {
      width: 100%;
      color: #ffffff;
      font-size: 24px;
      margin: 20px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .api-note {
      font-size: 14px;
      color: #e4002b;
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #e4002b;
      border-radius: 4px;
      background: rgba(228, 0, 43, 0.1);
    }
    
    .icon-count {
      font-size: 14px;
      color: #888;
      font-weight: normal;
      background: #222;
      padding: 5px 10px;
      border-radius: 20px;
    }
    
    .icons-grid {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
    
    .section-container {
      width: 100%;
      margin-bottom: 30px;
    }
    
    .copy-tooltip {
      position: absolute;
      background: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      top: -30px;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    
    .iconContainer:hover .copy-tooltip {
      opacity: 1;
    }

    .iconContainer:hover dees-icon {
      transform: scale(1.1);
    }
    
    .hidden {
      display: none !important;
    }
  </style>
  
  <div class="demoContainer">
    <div class="search-container">
      <input type="text" id="iconSearch" placeholder="Search icons..." @input=${i}>
      <button class="copy-all-button" @click=${a}>📋 Copy All Icon Names</button>
    </div>
    
    <div class="api-note">
      New API: Use <code>icon="fa:iconName"</code> or <code>icon="lucide:iconName"</code> instead of <code>iconFA</code>. 
      Click any icon to copy its new format to clipboard.
    </div>
    
    <div class="section-container fa-section">
      <div class="section-title">
        FontAwesome Icons
        <span class="icon-count">${t.length} icons</span>
      </div>
      <div class="icons-grid">
        ${t.map(n=>{let s=`fa:${n}`;return w`
              <div class="iconContainer fa-icon" data-name=${n.toLowerCase()} @click=${()=>r(n,"fa")}>
                <dees-icon .icon=${s} iconSize="24"></dees-icon>
                <div class="iconName">fa:${n}</div>
                <span class="copy-tooltip">Click to copy</span>
              </div>
            `})}
      </div>
    </div>

    <div class="section-container lucide-section">
      <div class="section-title">
        Lucide Icons
        <span class="icon-count">${e.length} icons</span>
      </div>
      <div class="icons-grid">
        ${e.map(n=>{let s=`lucide:${n}`;return w`
              <div class="iconContainer lucide-icon" data-name=${n.toLowerCase()} @click=${()=>r(n,"lucide")}>
                <dees-icon .icon=${s} iconSize="24"></dees-icon>
                <div class="iconName">lucide:${n}</div>
                <span class="copy-tooltip">Click to copy</span>
              </div>
            `})}
      </div>
    </div>
  </div>
  `}});function QUt(){H4.size>Zht&&Array.from(H4.keys()).slice(0,Zht/5).forEach(e=>H4.delete(e))}var Qx,jq,B4,Yi,KUt,Kx,H4,Zht,Xht,At=v(()=>{oe();_t();He();V8e();Yve();hMe();iXe();Yht();Qx=o2(Xx(),1),jq=o2(Xx(),1),B4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Yi=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},KUt={arrowRight:Ng,arrowUpRightFromSquare:$d,bell:zg,bug:Og,building:Eg,caretLeft:_g,caretRight:kg,check:Ig,circleInfo:Ad,circleCheck:ed,circleCheckSolid:Cd,circleXmark:z4,circleXmarkSolid:L4,clockRotateLeft:_d,copy:Sm,copySolid:Bg,desktop:Dd,eye:Cg,eyeSlash:Hg,fileInvoice:Rg,fileInvoiceDoller:Fg,gear:zd,grip:$4,magnifyingGlass:wd,message:Q5,messageSolid:yd,moneyCheckDollar:Ld,mugHot:qg,minus:vd,networkWired:Dg,paperclip:Pg,paste:K5,pasteSolid:bd,penToSquare:Md,plus:Td,receipt:Tg,rss:xd,share:kd,sun:zm,sunSolid:$g,terminal:Ag,trash:Ed,trashSolid:Ed,trashCan:J5,trashCanSolid:Sd,users:Lg,wallet:Sg,xmark:mo,facebook:pm,google:cm,instagram:fm,linkedin:dm,medium:Y5,slack:um,tiktok:hm,twitter:mm},Kx={fa:KUt},H4=new Map,Zht=500;Xht=(()=>{let t=[Q("dees-icon")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String,converter:{fromAttribute:k=>k,toAttribute:k=>k}})],u=[D({type:String,converter:{fromAttribute:k=>k,toAttribute:k=>k}})],l=[D({type:Number})],y=[D({type:String})],x=[D({type:Number})],B4(this,null,n,{kind:"accessor",name:"iconFA",static:!1,private:!1,access:{has:k=>"iconFA"in k,get:k=>k.iconFA,set:(k,I)=>{k.iconFA=I}},metadata:_},s,o),B4(this,null,u,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:k=>"icon"in k,get:k=>k.icon,set:(k,I)=>{k.icon=I}},metadata:_},c,d),B4(this,null,l,{kind:"accessor",name:"iconSize",static:!1,private:!1,access:{has:k=>"iconSize"in k,get:k=>k.iconSize,set:(k,I)=>{k.iconSize=I}},metadata:_},f,b),B4(this,null,y,{kind:"accessor",name:"color",static:!1,private:!1,access:{has:k=>"color"in k,get:k=>k.color,set:(k,I)=>{k.color=I}},metadata:_},g,h),B4(this,null,x,{kind:"accessor",name:"strokeWidth",static:!1,private:!1,access:{has:k=>"strokeWidth"in k,get:k=>k.strokeWidth,set:(k,I)=>{k.strokeWidth=I}},metadata:_},M,S),B4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=Ght;static demoGroups=["Utility"];#e=Yi(this,s,void 0);get iconFA(){return this.#e}set iconFA(_){this.#e=_}#t=(Yi(this,o),Yi(this,c,void 0));get icon(){return this.#t}set icon(_){this.#t=_}#a=(Yi(this,d),Yi(this,f,void 0));get iconSize(){return this.#a}set iconSize(_){this.#a=_}#i=(Yi(this,b),Yi(this,g,"currentColor"));get color(){return this.#i}set color(_){this.#i=_}#r=(Yi(this,h),Yi(this,M,2));get strokeWidth(){return this.#r}set strokeWidth(_){this.#r=_}lastIcon=(Yi(this,S),null);lastIconSize=null;lastColor=null;lastStrokeWidth=null;constructor(){super(),v1.setup()}getEffectiveIcon(){return this.icon?this.icon:this.iconFA?this.iconFA.startsWith("lucide:")?this.iconFA:`fa:${this.iconFA}`:null}parseIconString(_){let k=_.toLowe
        <text x="50%" y="50%" font-size="6" text-anchor="middle" dominant-baseline="middle" fill="${this.color}">${_}</text>
      </svg>`}}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        vertical-align: middle;
      }

      /* Improve rendering performance */
      #iconContainer svg {
        display: block;
        height: 100%;
        width: 100%;
        will-change: transform; /* Helps with animations */
        contain: strict; /* Performance optimization */
      }
    `];render(){return w`
      ${v1.styles}
      <style>
        #iconContainer {
          width: ${this.iconSize}px;
          height: ${this.iconSize}px;
        }
      </style>
      <div id="iconContainer"></div>
    `}updated(){this.iconSize||(this.iconSize=parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,"")));let _=this.getEffectiveIcon();if(this.lastIcon===_&&this.lastIconSize===this.iconSize&&this.lastColor===this.color&&this.lastStrokeWidth===this.strokeWidth)return;this.lastIcon=_,this.lastIconSize=this.iconSize,this.lastColor=this.color,this.lastStrokeWidth=this.strokeWidth;let k=this.shadowRoot?.querySelector("#iconContainer");if(!(!k||!_))try{let{type:I,name:L}=this.parseIconString(_);if(I==="lucide"){k.innerHTML="";try{let A=L.charAt(0).toUpperCase()+L.slice(1);if(Qx[A]){let V=(0,jq.createElement)(Qx[A],{color:this.color,size:this.iconSize,strokeWidth:this.strokeWidth});if(V){k.appendChild(V);return}}throw new Error(`Could not create element for ${A}`)}catch(A){console.error("Error rendering Lucide icon:",A);let V=this.renderLucideIcon(L);V&&(k.innerHTML=V)}}else{let A=Kx.fa[L];if(A){let V=DE(A).html[0];k.innerHTML=V}else console.warn(`FontAwesome icon not found: ${L}`)}}catch(I){console.error(`Error updating icon ${_}:`,I)}}async disconnectedCallback(){super.disconnectedCallback(),this.lastIcon=null,this.lastIconSize=null,this.lastColor=null,this.lastStrokeWidth=null}static{Yi(i,a)}};return N=i})()});var Kht,Uq,jt,r2=v(()=>{i2();lde();oe();_t();Ns();bi();At();He();Kht=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Uq=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},jt=(()=>{let t=[Q("dees-contextmenu")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Kht(this,null,n,{kind:"accessor",name:"menuItems",static:!1,private:!1,access:{has:d=>"menuItems"in d,get:d=>d.menuItems,set:(d,l)=>{d.menuItems=l}},metadata:c},s,o),Kht(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=ode;static demoGroups=["Overlay"];static contextMenuDeactivated=!1;static accumulatedMenuItems=[];static initializeGlobalListener(){document.addEventListener("contextmenu",c=>{if(this.contextMenuDeactivated)return;c.preventDefault(),u.accumulatedMenuItems=[];let d=c.composedPath();for(let l of d)if(l.getContextMenuItems){let f=l.getContextMenuItems();f&&f.length>0&&(u.accumulatedMenuItems.length>0&&u.accumulatedMenuItems.push({divider:!0}),u.accumulatedMenuItems.push(...f))}u.openContextMenuWithOptions(c,u.accumulatedMenuItems)})}static async openContextMenuWithOptions(c,d){if(this.contextMenuDeactivated)return;c.preventDefault(),c.stopPropagation();let l=new u;l.style.position="fixed",l.style.zIndex=String(a2.overlay.contextMenu),l.style.opacity="0",l.style.transform="scale(0.95) translateY(-10px)",l.menuItems=d,l.windowLayer=await vi.createAndShow(),l.windowLayer.addEventListener("click",async x=>{x.target.closest("dees-contextmenu")||await l.destroy()}),document.body.append(l),await Mt.smartdelay.delayFor(0);let f=l.getBoundingClientRect(),b=window.innerWidth,y=window.innerHeight,g=c.clientY,h=c.clientX;h+f.width>b&&(h=b-f.width-10),g+f.height>y&&(g=y-f.height-10),h<10&&(h=10),g<10&&(g=10),l.
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        transition: opacity 0.2s, transform 0.2s;
        outline: none;
      }

      .mainbox {
        min-width: 200px;
        max-width: 280px;
        background: ${p.bdTheme("#ffffff","#000000")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
        border-radius: 4px;
        box-shadow: ${p.bdTheme("0 4px 12px rgba(0, 0, 0, 0.15)","0 4px 12px rgba(0, 0, 0, 0.3)")};
        user-select: none;
        padding: 4px 0;
        font-size: 12px;
        color: ${p.bdTheme("#333","#ccc")};
      }

      .menuitem {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        cursor: default;
        transition: background 0.1s;
        line-height: 1;
        position: relative;
      }

      .menuitem:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.08)")};
      }
      
      .menuitem.has-submenu::after {
        content: '›';
        position: absolute;
        right: 8px;
        font-size: 16px;
        opacity: 0.5;
      }

      .menuitem:active:not(.has-submenu) {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.08)","rgba(255, 255, 255, 0.12)")};
      }
      
      .menuitem.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }

      .menuitem dees-icon {
        font-size: 14px;
        opacity: 0.7;
      }

      .menuitem-text {
        flex: 1;
      }

      .menuitem-shortcut {
        font-size: 11px;
        color: ${p.bdTheme("#999","#666")};
        margin-left: auto;
        opacity: 0.7;
      }

      .menu-divider {
        height: 1px;
        background: ${p.bdTheme("#e0e0e0","#202020")};
        margin: 4px 0;
      }
    `];render(){return w`
      <div class="mainbox">
        ${this.menuItems.map(c=>{if("divider"in c&&c.divider)return w`<div class="menu-divider"></div>`;let d=c,l=d.submenu&&d.submenu.length>0;return w`
            <div 
              class="menuitem ${d.disabled?"disabled":""} ${l?"has-submenu":""}" 
              @click=${()=>!d.disabled&&!l&&this.handleClick(d)}
              @mouseenter=${()=>this.handleMenuItemHover(d,l)}
              @mouseleave=${()=>this.handleMenuItemLeave()}
            >
              ${d.iconName?w`
                <dees-icon .icon="${d.iconName}"></dees-icon>
              `:""}
              <span class="menuitem-text">${d.name}</span>
              ${d.shortcut&&!l?w`
                <span class="menuitem-shortcut">${d.shortcut}</span>
              `:""}
            </div>
          `})}
        ${this.menuItems.length===0?w`
            <div class="menuitem" @click=${()=>{u.contextMenuDeactivated=!0,this.destroy()}}>
              <dees-icon .icon="lucide:x"></dees-icon>
              <span class="menuitem-text">Allow native context</span>
            </div>
        `:w``}
      </div>
    `}async firstUpdated(){this.focus(),this.addEventListener("keydown",this.handleKeydown)}handleKeydown=c=>{let d=Array.from(this.shadowRoot.querySelectorAll(".menuitem:not(.disabled)")),l=d.findIndex(f=>f.matches(":hover"));switch(c.key){case"ArrowDown":c.preventDefault();let f=l+1<d.length?l+1:0;d[f].dispatchEvent(new MouseEvent("mouseenter"));break;case"ArrowUp":c.preventDefault();let b=l-1>=0?l-1:d.length-1;d[b].dispatchEvent(new MouseEvent("mouseenter"));break;case"Enter":c.preventDefault(),l>=0&&d[l].click();break;case"Escape":c.preventDefault(),this.destroy();break}};async handleClick(c){c.action(),await this.destroyAll()}async handleMenuItemHover(c,d){this.submenuTimeout&&(clearTimeout(this.submenuTimeout),this.submenuTimeout=null),this.submenu&&await this.hideSubmenu(),d&&c.submenu&&(this.submenuTimeout=setTimeout(()=>{this.showSubmenu(c)},200))}handleMenuItemLeave(){this.submenuTimeout&&clearTimeout(this.submenuTimeout),this.submenuTimeout=setTimeout(()=>{this.submenu&&!this.submenu.matches(":hover")&&this.hideSubmenu()},300)}async showSubmenu(c){if(!c.submenu||c.submenu.length===0)return;let l=Array.from(this.shadowRoot.querySelectorAll(".menuitem")).find(M=>M.querySelector(".menuitem-text")?.textContent===c.name);if(!l)return;this.submenu=new u,this.submenu.menuItems=c.submenu,this.submenu.parentMenu=this,this.submenu.style.position="fixed",this.submenu.style.zIndex=String(parseInt(this.style.zIndex)+1),this.submenu.style.opacity="0",this.submenu.style.transform="scale(0.95)",document.body.append(this.submenu),await Mt.smartdelay.delayFor(0);let f=l.getBoundingClientRect(),b=this.getBoundingClientRect(),y=this.submenu.getBoundingClientRect(),g=window.innerWidth,h=b.right-4,x=f.top;h+y.width>g-10&&(h=b.left-y.width+4),x+y.height>window.innerHeight-10&&(x=window.innerHeight-y.height-10),this.submenu.style.left=`${h}px`,this.submenu.style.top=`${x}px`,await Mt.smartdelay.delayFor(0),this.submenu.style.opacity="1",this.submenu.style.transform="scale(1)",this.submenu.addEventListener("mouseenter",()=>{this.submenuTimeout&&(clearTimeout(this.submenuTimeout),this.submenuTimeout=null)}),this.submenu.addEventListener("mouseleave",()=>{this.handleMenuItemLeave()})}async hideSubmenu(){this.submenu&&(await this.submenu.destroy(),this.submenu=null)}async destroy(){this.isDestroying||(this.isDestroying=!0,this.submenuTimeout&&(clearTimeout(this.submenuTimeout),this.submenuTimeout=null),this.submenu&&(await this.submenu.destroy(),this.submenu=null),this.windowLayer&&!this.parentMenu&&this.windowLayer.destroy(),this.style.opacity="0",this.style.transform="scale(0.95) translateY(-10px)",await Mt.smartdelay.delayFor(100),this.parentElement&&this.parentElement.removeChild(this))}async destroyAll(){let c=this;for(;c.parentMenu;)c=c.parentMenu;await c.destroy()}static{Uq(i,a)}};return u=i})();jt.initializeGlobalListener()});var Qht,Wq,JUt,Jht=v(()=>{oe();Qht=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Wq=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},JUt=(()=>{let t=[Q("dees-demowrapper")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):
      :host {
        display: contents;
      }
    `];render(){return w`
      <slot></slot>
    `}async firstUpdated(){if(await this.updateComplete,await new Promise(c=>setTimeout(c,50)),this.children.length>0&&this.runAfterRender)try{await this.runAfterRender(this)}catch(c){console.error("Error in runAfterRender:",c)}}constructor(){super(...arguments),Wq(this,o)}static{Wq(i,a)}};return u=i})()});var x1=v(()=>{Jht()});var e9t,t9t=v(()=>{oe();x1();e9t=()=>{let t=document.createElement("dees-appui-activitylog");return setTimeout(()=>{t.addMany([{type:"login",user:"John Doe",message:"logged in from Chrome on macOS"},{type:"create",user:"John Doe",message:'created a new project "Frontend App"'},{type:"update",user:"Jane Smith",message:"updated API documentation"},{type:"view",user:"John Doe",message:"viewed dashboard analytics"},{type:"delete",user:"Admin",message:"removed deprecated endpoint"},{type:"custom",user:"System",message:"scheduled backup completed",iconName:"lucide:database"},{type:"logout",user:"Alice Brown",message:"logged out"},{type:"create",user:"Jane Smith",message:"created invoice #1234"}]),t.entries$.subscribe(e=>{console.log("Activity log updated:",e.length,"entries")})},100),w`
    <dees-demowrapper>
      <style>
        .demo-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 600px;
          background: ${p.bdTheme("#f4f4f5","#09090b")};
          padding: 32px;
        }
      </style>
      <div class="demo-container">
        ${t}
      </div>
    </dees-demowrapper>
  `}});var Jx,J0,a9t,Gq=v(()=>{oe();_t();r2();At();t9t();He();Jx=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},J0=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},a9t=(()=>{let t=[Q("dees-appui-activitylog")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],Jx(this,null,n,{kind:"accessor",name:"entries",static:!1,private:!1,access:{has:h=>"entries"in h,get:h=>h.entries,set:(h,x)=>{h.entries=x}},metadata:g},s,o),Jx(this,null,u,{kind:"accessor",name:"searchQuery",static:!1,private:!1,access:{has:h=>"searchQuery"in h,get:h=>h.searchQuery,set:(h,x)=>{h.searchQuery=x}},metadata:g},c,d),Jx(this,null,l,{kind:"accessor",name:"filterCriteria",static:!1,private:!1,access:{has:h=>"filterCriteria"in h,get:h=>h.filterCriteria,set:(h,x)=>{h.filterCriteria=x}},metadata:g},f,b),Jx(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=e9t;static demoGroups=["App UI"];#e=J0(this,s,[]);get entries(){return this.#e}set entries(g){this.#e=g}#t=(J0(this,o),J0(this,c,""));get searchQuery(){return this.#t}set searchQuery(g){this.#t=g}#a=(J0(this,d),J0(this,f,{}));get filterCriteria(){return this.#a}set filterCriteria(g){this.#a=g}entries$=(J0(this,b),new Mt.smartrx.rxjs.Subject);static styles=[Se,p.defaultStyles,X`
      :host {
        /* CSS Variables aligned with secondary menu */
        --activitylog-bg: ${p.bdTheme("#fafafa","#0a0a0a")};
        --activitylog-fg: ${p.bdTheme("#525252","#a3a3a3")};
        --activitylog-fg-muted: ${p.bdTheme("#737373","#737373")};
        --activitylog-fg-active: ${p.bdTheme("#0a0a0a","#fafafa")};
        --activitylog-border: ${p.bdTheme("#e5e5e5","#1a1a1a")};
        --activitylog-hover: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.06)")};
        --activitylog-accent: ${p.bdTheme("#78716c","#b5a99a")};

        color: var(--activitylog-fg);
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        background: var(--activitylog-bg);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        border-left: 1px solid var(--activitylog-border);
        cursor: default;
        overflow: hidden;
      }

      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 280px;
      }

      /* Header with streaming indicator */
      .topbar {
        position: absolute;
        top: 0px;
        height: 48px;
        width: 100%;
        padding: 0px 12px;
        background: var(--activitylog-bg);
        border-bottom: 1px solid var(--activitylog-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
      }

      .topbar .heading {
        font-weight: 600;
        font-size: 14px;
        color: var(--activitylog-fg-active);
      }

      .live-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--activitylog-fg-muted);
      }

      .live-indicator .dot {
        width: 6px;
        height: 6px;
        background: ${p.bdTheme("#22c55e","#22c55e")};
        border-radius: 50%;
        animation: pulse 2s ease-in-out infinite;
      }

      @keyframes pulse {
        0%, 100% { opacity: 0.5; transform: scale(0.9); }
        50% { opacity: 1; transform: scale(1.1); }
      }

      /* Activity container */
      .activityContainer {
        position: absolute;
        top: 48px;
        bottom: 48px;
        width: 100%;
        padding: 8px 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: ${p.bdTheme("#d4d4d4","#333333")} transparent;
      }

      .activityContainer::-webkit-scrollbar {
        width: 6px;
      }

      .activityContainer::-webkit-scrollbar-track {
        background: transparent;
      }

      .activityContainer::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("#d4d4d4","#333333")};
        border-radius: 3px;
      }

      .activityContainer::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("#a3a3a3","#525252")};
      }

      .empty-state {
        font-size: 13px;
        text-align: center;
        padding: 40px 16px;
        color: var(--activitylog-fg-muted);
      }

      /* Date separator - warm taupe styling */
      .date-separator {
        padding: 12px 12px 6px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--activitylog-accent);
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--activitylog-bg);
      }

      /* Activity entry - modern stacked layout */
      .activityentry {
        font-size: 12px;
        padding: 8px 12px;
        margin: 2px 4px;
        border-radius: 6px;
        transition: background 0.15s ease;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.4;
        animation: fadeIn 0.2s ease-out;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-2px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .activityentry:hover {
        background: var(--activitylog-hover);
      }

      .activity-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.06)")};
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 13px;
        color: var(--activitylog-fg-muted);
        margin-top: 1px;
      }

      .activity-icon.login {
        background: ${p.bdTheme("rgba(34, 197, 94, 0.08)","rgba(34, 197, 94, 0.12)")};
        color: ${p.bdTheme("#16a34a","#4ade80")};
      }

      .activity-icon.logout {
        background: ${p.bdTheme("rgba(239, 68, 68, 0.08)","rgba(239, 68, 68, 0.12)")};
        color: ${p.bdTheme("#dc2626","#f87171")};
      }

      .activity-icon.view {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.08)","rgba(59, 130, 246, 0.12)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .activity-icon.create {
        background: ${p.bdTheme("rgba(168, 85, 247, 0.08)","rgba(168, 85, 247, 0.12)")};
        color: ${p.bdTheme("#9333ea","#c084fc")};
      }

      .activity-icon.update {
        background: ${p.bdTheme("rgba(251, 146, 60, 0.08)","rgba(251, 146, 60, 0.12)")};
        color: ${p.bdTheme("#ea580c","#fb923c")};
      }

      .activity-icon.delete {
        background: ${p.bdTheme("rgba(239, 68, 68, 0.08)","rgba(239, 68, 68, 0.12)")};
        color: ${p.bdTheme("#dc2626","#f87171")};
      }

      .activity-icon.custom {
        background: ${p.bdTheme("rgba(100, 116, 139, 0.08)","rgba(100, 116, 139, 0.12)")};
        color: ${p.bdTheme("#475569","#94a3b8")};
      }

      .activity-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .activity-header {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .activity-user {
        font-weight: 600;
        font-size: 12px;
        color: var(--activitylog-fg-active);
      }

      .activity-separator {
        color: var(--activitylog-fg-muted);
        font-size: 10px;
      }

      .timestamp {
        color: var(--activitylog-fg-muted);
        font-weight: 400;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        font-family: 'Geist Mono', monospace;
      }

      .activity-message {
        color: var(--activitylog-fg);
        font-size: 12px;
        line-height: 1.5;
        word-break: break-word;
      }

      /* Search box - refined styling */
      .searchbox {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 48px;
        background: var(--activitylog-bg);
        border-top: 1px solid var(--activitylog-border);
        padding: 8px 12px;
        box-sizing: border-box;
      }

      .search-wrapper {
        position: relative;
        width: 100%;
        height: 32px;
      }

      .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--activitylog-fg-muted);
        font-size: 13px;
        pointer-events: none;
        transition: color 0.15s ease;
      }

      .searchbox input {
        color: var(--activitylog-fg-active);
        background: ${p.bdTheme("rgba(0, 0, 0, 0.03)","rgba(255, 255, 255, 0.04)")};
        width: 100%;
        height: 100%;
        border: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.08)","rgba(255, 255, 255, 0.08)")};
        border-radius: 6px;
        padding: 0 12px 0 34px;
        font-family: 'Geist Sans', sans-serif;
        font-size: 12px;
        transition: all 0.15s ease;
      }

      .searchbox input::placeholder {
        color: var(--activitylog-fg-muted);
      }

      .searchbox input:focus {
        outline: none;
        border-color: ${p.bdTheme("rgba(0, 0, 0, 0.15)","rgba(255, 255, 255, 0.15)")};
        background: ${p.bdTheme("rgba(0, 0, 0, 0.02)","rgba(255, 255, 255, 0.06)")};
      }

      .search-wrapper:has(input:focus) .search-icon {
        color: var(--activitylog-fg);
      }
    `];render(){let g=this.getFilteredEntries(),h=this.groupEntriesByDate(g);return w`
      ${v1.styles}
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Activity Log</div>
          ${g.length>0?w`<div class="live-indicator"><span class="dot"></span>Live</div>`:""}
        </div>
        <div class="activityContainer">
          ${g.length===0?w`<div class="empty-state">No activity entries</div>`:h.map(x=>w`
                  <div class="date-separator">${x.label}</div>
                  ${x.entries.map(M=>this.renderActivityEntry(M))}
                `)}
        </div>
        <div class="searchbox">
          <div class="search-wrapper">
            <dees-icon class="search-icon" .icon=${"lucide:search"}></dees-icon>
            <input
              type="text"
              placeholder="Search activities, users..."
              .value=${this.searchQuery}
              @input=${this.handleSearchInput}
            />
          </div>
        </div>
      </div>
    `}renderActivityEntry(g){let h=g.timestamp||new Date,x=this.formatTime(h),M=g.iconName||this.getIconForType(g.type);return w`
      <div
        class="activityentry"
        @contextmenu=${S=>this.handleContextMenu(S,g)}
      >
        <div class="activity-icon ${g.type}">
          <dees-icon .icon=${M}></dees-icon>
        </div>
        <div class="activity-content">
          <div class="activity-header">
            <span class="activity-user">${g.user}</span>
            <span class="activity-separator">·</span>
            <span class="timestamp">${x}</span>
          </div>
          <div class="activity-message">${g.message}</div>
        </div>
      </div>
    `}add(g){let h={...g,id:g.id||this.generateId(),timestamp:g.timestamp||new Date};this.entries=[h,...this.entries],this.entries$.next(this.entries)}addMany(g){let h=g.map(x=>({...x,id:x.id||this.generateId(),timestamp:x.timestamp||new Date}));this.entries=[...h.reverse(),...this.entries],this.entries$.next(this.entries)}clear(){this.entries=[],this.entries$.next(this.entries)}getEntries(){return[...this.entries]}filter(g){return this.entries.filter(h=>!(g.user&&h.user!==g.user||g.type&&h.type!==g.type))}search(g){let h=g.toLowerCase();return this.entries.filter(x=>x.message.toLowerCase().includes(h)||x.user.toLowerCase().includes(h))}generateId(){return`activity-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}getFilteredEntries(){let g=this.entries;if(this.searchQuery){let h=this.searchQuery.toLowerCase();g=g.filter(x=>x.message.toLowerCase().includes(h)||x.user.toLowerCase().includes(h))}return(this.filterCriteria.user||this.filterCriteria.type)&&(g=g.filter(h=>!(this.filterCriteria.user&&h.user!==this.filterCriteria.user||this.filterCriteria.type&&h.type!==this.filterCriteria.type))),g}groupEntriesByDate(g){let h=new Map,x=new Date,M=new Date(x);M.setDate(M.getDate()-1);for(let S of g){let N=S.timestamp||new Date,_;this.isSameDay(N,x)?_="Today":this.isSameDay(N,M)?_="Yesterday":_=N.toLocaleDateString("en-US",{month:"short",day:"numeric",year:N.getFullYear()!==x.getFullYear()?"numeric":void 0}),h.has(_)||h.set(_,[]),h.get(_).push(S)}return Array.from(h.entries()).map(([S,N])=>({label:S,entries:N}))}isSameDay(g,h){return g.getFullYear()===h.getFullYear()&&g.getMonth()===h.getMonth()&&g.getDate()===h.getDate()}formatTime(g){return g.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit",hour12:!1})}getIconForType(g){let h={login:"lucide:logIn",logout:"lucide:logOut",view:"lucide:eye",create:"lucide:plus",update:"lucide:edit",delete:"lucide:trash2",custom:"lucide:activity"};return h[g]||h.custom}handleSearchInput(g){let h=g.target;this.searchQuery=h.value}handleContextMenu(g,h){g.preventDefault(),jt.openContextMenuWithOptions(g,[{name:"Copy activity",iconName:"lucide:copy",action:async()=>{await navigator.clipboard.writeText(`${h.user} ${h.message}`)}},{name:"Filter by user",iconName:"lucide:user",action:async()=>{this.filterCriteria={user:h.user}}},{name:"Filter by type",iconName:"lucide:filter",action:async()=>{this.filterCriteria={type:h.type}}},{name:"Clear filters",iconName:"lucide:x",action:async()=>{this.filterCriteria={},this.searchQuery=""}}])}static{J0(i,a)}};return y=i})()});var i9t=v(()=>{Gq()});var r9t=v(()=>{});var s9t=v(()=>{i2()});var n9t=v(()=>{});var o9t=v(()=>{});var l9t=v(()=>{});var bo=v(()=>{r9t();s9t();n9t();o9t();l9t()});var c9t,d9t=v(()=>{oe();x1();Yq();c9t=()=>{let t=[{name:"File",action:async()=>{},submenu:[{name:"New File",shortcut:"Cmd+N",iconName:"file-plus",action:async()=>console.log("New file")},{name:"Open...",shortcut:"Cmd+O",iconName:"folder-open",action:async()=>console.log("Open")},{name:"Open Recent",action:async()=>{},submenu:[{name:"project-alpha.ts",action:async()=>console.log("Open recent 1")},{name:"config.json",action:async()=>console.log("Open recent 2")},{name:"readme.md",action:async()=>console.log("Open recent 3")}]},{divider:!0},{name:"Save",shortcut:"Cmd+S",iconName:"save",action:async()=>console.log("Save")},{name:"Save As...",shortcut:"Cmd+Shift+S",action:async()=>console.log("Save as"),disabled:!0},{divider:!0},{name:"Exit",shortcut:"Cmd+Q",action:async()=>console.log("Exit")}]},{name:"Edit",action:async()=>{},submenu:[{name:"Undo",shortcut:"Cmd+Z",iconName:"undo",action:async()=>console.log("Undo")},{name:"Redo",shortcut:"Cmd+Shift+Z",iconName:"redo",action:async()=>console.log("Redo")},{divider:!0},{name:"Cut",shortcut:"Cmd+X",iconName:"scissors",action:async()=>console.log("Cut")},{name:"Copy",shortcut:"Cmd+C",iconName:"copy",action:async()=>console.log("Copy")},{name:"Paste",shortcut:"Cmd+V",iconName:"clipboard",action:async()=>console.log("Paste")},{divider:!0},{name:"Find",shortcut:"Cmd+F",iconName:"search",action:async()=>console.log("Find")},{n
    <dees-demowrapper .runAfterRender=${async e=>{let a=e.querySelector("#appbar"),i=e.querySelectorAll(".status-toggle dees-button");i[0].addEventListener("click",()=>{a.user={...a.user,status:"online"}}),i[1].addEventListener("click",()=>{a.user={...a.user,status:"busy"}}),i[2].addEventListener("click",()=>{a.user={...a.user,status:"away"}}),i[3].addEventListener("click",()=>{a.user={...a.user,status:"offline"}}),e.querySelector(".window-controls-toggle dees-button").addEventListener("click",()=>{a.showWindowControls=!a.showWindowControls});let n=e.querySelectorAll(".breadcrumb-toggle dees-button");n[0].addEventListener("click",()=>{a.breadcrumbs="Home > Documents > Projects > MyApp > src > index.ts"}),n[1].addEventListener("click",()=>{a.breadcrumbs="Dashboard"})}}>
      <style>
        ${X`
        .demo-container {
          height: 600px;
          width: 100%;
          background: #1a1a1a;
          display: flex;
          flex-direction: column;
        }
        
        .content {
          flex: 1;
          padding: 20px;
          color: #ccc;
        }
        
        .controls {
          padding: 20px;
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
        }
        
        .control-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        
        .control-group label {
          font-size: 12px;
          color: #888;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-appui-appbar
        id="appbar"
        .menuItems=${t}
        .breadcrumbs=${"Project > src > components > AppBar.ts"}
        .breadcrumbSeparator=${" > "}
        .showWindowControls=${!0}
        .showSearch=${!0}
        .theme=${"dark"}
        .user=${{name:"John Doe",status:"online"}}
        @menu-select=${e=>console.log("Menu selected:",e.detail.item)}
        @breadcrumb-navigate=${e=>console.log("Breadcrumb clicked:",e.detail)}
        @search-click=${()=>console.log("Search clicked")}
        @user-menu-open=${()=>console.log("User menu clicked")}
      ></dees-appui-appbar>
      
      <div class="content">
        <h2>App Bar Demo</h2>
        <p>This demo shows various features of the app bar component:</p>
        <ul>
          <li>Dynamic menu items with icons, shortcuts, and submenus</li>
          <li>Breadcrumb navigation</li>
          <li>User account section with status indicator</li>
          <li>Search icon</li>
          <li>Window controls (platform-specific)</li>
          <li>Dark/light theme support</li>
          <li>Keyboard navigation (Tab, Enter, Escape)</li>
          <li>Custom events for all interactions</li>
        </ul>
      </div>
      
      <div class="controls">
        <div class="control-group">
          <label>Theme</label>
          <dees-button-group class="theme-toggle">
            <dees-button>Dark</dees-button>
            <dees-button>Light</dees-button>
          </dees-button-group>
        </div>
        
        <div class="control-group">
          <label>User Status</label>
          <dees-button-group class="status-toggle">
            <dees-button>Online</dees-button>
            <dees-button>Busy</dees-button>
            <dees-button>Away</dees-button>
            <dees-button>Offline</dees-button>
          </dees-button-group>
        </div>
        
        <div class="control-group">
          <label>Window Controls</label>
          <dees-button-group class="window-controls-toggle">
            <dees-button>Toggle</dees-button>
          </dees-button-group>
        </div>
        
        <div class="control-group">
          <label>Breadcrumbs</label>
          <dees-button-group class="breadcrumb-toggle">
            <dees-button>Long Path</dees-button>
            <dees-button>Short Path</dees-button>
          </dees-button-group>
        </div>
      </div>
    </div>
    </dees-demowrapper>
  `}});var p9t,u9t=v(()=>{oe();p9t=[p.defaultStyles,X`
      :host {
        /* CSS Variables for theming */
        --appbar-height: 40px;
        --appbar-font-size: 12px;
        
        display: block;
        position: relative;
        width: 100%;
        height: var(--appbar-height);
        border-bottom: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
        background: ${p.bdTheme("#ffffff","#000000")};
        color: ${p.bdTheme("#00000080","#ffffff80")};
        font-size: var(--appbar-font-size);
        display: grid;
        grid-template-columns: auto 1fr auto;
        -webkit-app-region: drag;
        user-select: none;
      }

      .menus {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px;
        cursor: default;
      }

      .menuItem {
        position: relative;
        line-height: 24px;
        padding: 0px 12px;
        margin: 8px 0px;
        border-radius: 4px;
        -webkit-app-region: no-drag;
        transition: all 0.2s ease;
        cursor: default;
        outline: none;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      /* Optional: Style for menu items with icons (not typically used for top-level items) */
      .menuItem dees-icon {
        font-size: 14px;
        opacity: 0.8;
      }

      .menuItem:hover {
        background: ${p.bdTheme("#00000010","#ffffff20")};
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .menuItem.active {
        background: ${p.bdTheme("#00000020","#ffffff30")};
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .menuItem[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }

      .menuItem:focus-visible {
        box-shadow: 0 0 0 2px ${p.bdTheme("#00000080","#ffffff80")};
      }


      /* Dropdown styles */
      .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: ${p.bdTheme("#ffffff","#000000")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
        border-radius: 4px;
        box-shadow: ${p.bdTheme("0 4px 12px rgba(0, 0, 0, 0.15)","0 4px 12px rgba(0, 0, 0, 0.3)")};
        margin-top: 4px;
        z-index: 1000;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.2s, transform 0.2s;
        pointer-events: none;
      }

      .dropdown.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .dropdown-item {
        padding: 8px 16px;
        cursor: default;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.1s;
      }

      .dropdown-item:hover,
      .dropdown-item.focused {
        background: ${p.bdTheme("#00000010","#ffffff20")};
      }

      .dropdown-divider {
        height: 1px;
        background: ${p.bdTheme("#e0e0e0","#202020")};
        margin: 4px 0;
      }

      .dropdown-item[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }

      .dropdown-item .shortcut {
        margin-left: auto;
        opacity: 0.6;
        font-size: 11px;
      }

      /* Breadcrumbs */
      .breadcrumbs {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .breadcrumb-item {
        color: ${p.bdTheme("#00000080","#ffffff80")};
        cursor: default;
        transition: color 0.2s;
      }

      .breadcrumb-item:hover {
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .breadcrumb-separator {
        margin: 0 8px;
        opacity: 0.5;
      }

      /* Account section */
      .account {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        gap: 12px;
      }

      .search-icon {
        cursor: default;
        opacity: 0.7;
        transition: opacity 0.2s;
      }

      .search-icon:hover {
        opacity: 1;
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: default;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.2s;
      }

      .user-info:hover {
        background: ${p.bdTheme("#00000010","#ffffff20")};
      }

      .user-avatar {
        position: relative;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: ${p.bdTheme("#00000020","#ffffff30")};
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
      }

      .user-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }

      .user-status {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid ${p.bdTheme("#ffffff","#000000")};
      }

      .user-status.online {
        background: #4caf50;
      }

      .user-status.offline {
        background: #757575;
      }

      .user-status.busy {
        background: #f44336;
      }

      .user-status.away {
        background: #ff9800;
      }

      /* Activity log toggle button */
      .activity-toggle {
        display: flex;
        align-items: center;
        gap: 2px;
        height: 28px;
        padding: 0 8px;
        border-radius: 6px;
        cursor: default;
        -webkit-app-region: no-drag;
        color: ${p.bdTheme("#00000060","#ffffff60")};
        border: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.1)")};
        transition: all 0.15s ease;
      }

      .activity-toggle:hover {
        background: ${p.bdTheme("#00000010","#ffffff15")};
        color: ${p.bdTheme("#000000","#ffffff")};
        border-color: transparent;
      }

      .activity-toggle.active {
        background: ${p.bdTheme("#00000015","#ffffff20")};
        color: ${p.bdTheme("#000000","#ffffff")};
        border-color: transparent;
      }

      .activity-toggle dees-icon {
        font-size: 14px;
      }

      .activity-badge {
        position: relative;
        margin-left: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: ${p.bdTheme("#525252","#525252")};
        color: #fafafa;
        font-size: 10px;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }
    `]});var h9t,f9t=v(()=>{oe();h9t=t=>w`
        <div class="menus">
          ${t.showWindowControls?w`<dees-windowcontrols></dees-windowcontrols>`:""}
          ${t.renderMenuItems()}
        </div>
        <div class="breadcrumbs">
          ${t.renderBreadcrumbs()}
        </div>
        <div class="account">
          ${t.renderAccountSection()}
        </div>
      `});var Zq,Pd,m9t,Xq=v(()=>{oe();He();Zq=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Pd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},m9t=(()=>{let t=[Q("dees-windowcontrols")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({reflect:!0})],u=[D({reflect:!0})],Zq(this,null,n,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:b=>"type"in b,get:b=>b.type,set:(b,y)=>{b.type=y}},metadata:f},s,o),Zq(this,null,u,{kind:"accessor",name:"position",static:!1,private:!1,access:{has:b=>"position"in b,get:b=>b.position,set:(b,y)=>{b.position=y}},metadata:f},c,d),Zq(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`<dees-windowcontrols></dees-windowcontrols>`;static demoGroups=["Utility"];#e=Pd(this,s,"mac");get type(){return this.#e}set type(f){this.#e=f}#t=(Pd(this,o),Pd(this,c,"left"));get position(){return this.#t}set position(f){this.#t=f}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
      }

      .windowControls {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .windowControls div {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 50%;
        margin: 0px;
        padding: 0px;
        background: #222222;
      }

      .windowControls div.close {
        background: #ff5f57;
        margin-right: 12px;
      }

      .windowControls div.toDock {
        background: #ffbd2e;
        margin-right: 12px;
      }

      .windowControls div.minMax {
        background: #27c93f;
      }

      .windowControls div:hover {
        background: #333333;
      }
    `];render(){return w`
      ${this.type==="mac"&&this.position==="left"||(this.type==="linux"||this.type==="windows")&&this.position==="right"?w`
            <div class="windowControls">
              <div class="close"></div>
              <div class="toDock"></div>
              <div class="minMax"></div>
            </div>
          `:w``}
    `}constructor(){super(...arguments),Pd(this,d)}static{Pd(i,a)}};return l=i})()});var Id,Bs,g9t,Kq=v(()=>{i2();bi();oe();He();Id=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Bs=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},g9t=(()=>{let t=[Q("dees-appui-profiledropdown")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Array})],l=[D({type:Boolean,reflect:!0})],y=[D({type:String})],Id(this,null,n,{kind:"accessor",name:"user",static:!1,private:!1,access:{has:S=>"user"in S,get:S=>S.user,set:(S,N)=>{S.user=N}},metadata:M},s,o),Id(this,null,u,{kind:"accessor",name:"menuItems",static:!1,private:!1,access:{has:S=>"menuItems"in S,get:S=>S.menuItems,set:(S,N)=>{S.menuItems=N}},metadata:M},c,d),Id(this,null,l,{kind:"accessor",name:"isOpen",static:!1,private:!1,access:{has:S=>"isOpen"in S,get:S=>S.isOpen,set:(S,N)=>{S.isOpen=N}},metadata:M},f,b),Id(this,null,y,{kind:"accessor",name:"position",static:!1,private:!1,access:{has:S=>"position"in S,get:S=>S.position,set:(S,N)=>{S.position=N}},metadata:M},g,h),Id(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=()=>w`
    <dees-appui-profiledropdown
      .user=${{name:"John Doe",email:"john.doe@example.com",avatar:"https://randomuser.me/api/portraits/men/1.jpg",status:"online"}}
      .menuItems=${[{name:"Profile Settings",iconName:"user",action:async()=>console.log("Profile")},{name:"Account",iconName:"settings",action:async()=>console.log("Account")},{divider:!0},{name:"Help & Support",iconName:"helpCircle",action:async()=>console.log("Help")},{name:"Keyboard Shortcuts",iconName:"keyboard",shortcut:"Cmd+K",action:async()=>console.log("Shortcuts")},{divider:!0},{name:"Sign Out",iconName:"logOut",action:async()=>console.log("Sign out")}]}
      .isOpen=${!0}
    ></dees-appui-profiledropdown>
  `;static demoGroups=["App UI"];#e=Bs(this,s,void 0);get user(){return this.#e}set user(M){this.#e=M}#t=(Bs(this,o),Bs(this,c,[]));get menuItems(){return this.#t}set menuItems(M){this.#t=M}#a=(Bs(this,d),Bs(this,f,!1));get isOpen(){return this.#a}set isOpen(M){this.#a=M}#i=(Bs(this,b),Bs(this,g,"top-right"));get position(){return this.#i}set position(M){this.#i=M}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        pointer-events: none;
      }

      .dropdown {
        position: absolute;
        min-width: 220px;
        background: ${p.bdTheme("#ffffff","#000000")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
        border-radius: 4px;
        box-shadow: ${p.bdTheme("0 4px 12px rgba(0, 0, 0, 0.15)","0 4px 12px rgba(0, 0, 0, 0.3)")};
        z-index: ${a2.overlay.dropdown};
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
        transition: opacity 0.2s, transform 0.2s;
        pointer-events: none;
        overflow: hidden;
        font-size: 12px;
      }

      :host([isopen]) .dropdown {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
      }
      
      .backdrop {
        display: none;
      }

      /* Position variants */
      .dropdown.top-right {
        top: 100%;
        right: 0;
        margin-top: 4px;
      }

      .dropdown.top-left {
        top: 100%;
        left: 0;
        margin-top: 8px;
      }

      .dropdown.bottom-right {
        bottom: 100%;
        right: 0;
        margin-bottom: 8px;
      }

      .dropdown.bottom-left {
        bottom: 100%;
        left: 0;
        margin-bottom: 8px;
      }

      /* User section */
      .user-section {
        padding: 12px;
        border-bottom: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .user-avatar {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: ${p.bdTheme("#f0f0f0","#1a1a1a")};
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#666","#999")};
        overflow: hidden;
      }

      .user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .user-status {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid ${p.bdTheme("#ffffff","#000000")};
      }

      .user-status.online {
        background: #4caf50;
      }

      .user-status.offline {
        background: #757575;
      }

      .user-status.busy {
        background: #f44336;
      }

      .user-status.away {
        background: #ff9800;
      }

      .user-details {
        flex: 1;
        min-width: 0;
      }

      .user-name {
        font-size: 13px;
        font-weight: 600;
        color: ${p.bdTheme("#000","#fff")};
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .user-email {
        font-size: 11px;
        color: ${p.bdTheme("#666","#999")};
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Menu section */
      .menu-section {
        padding: 4px 0;
      }

      .menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        cursor: default;
        transition: background 0.1s;
        color: ${p.bdTheme("#333","#ccc")};
        font-size: 12px;
        line-height: 1;
        user-select: none;
      }

      .menu-item:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.08)")};
      }

      .menu-item:active {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.08)","rgba(255, 255, 255, 0.12)")};
      }

      .menu-item dees-icon {
        font-size: 14px;
        opacity: 0.7;
      }

      .menu-item-text {
        flex: 1;
      }

      .menu-shortcut {
        font-size: 11px;
        color: ${p.bdTheme("#999","#666")};
        margin-left: auto;
        opacity: 0.7;
      }

      .menu-divider {
        height: 1px;
        background: ${p.bdTheme("#e0e0e0","#202020")};
        margin: 4px 0;
      }

      /* Backdrop for mobile */
      @media (max-width: 768px) {
        .backdrop {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
          z-index: ${a2.backdrop.dropdown};
          opacity: 0;
          transition: opacity 0.2s;
          display: none;
        }

        :host([isopen]) .backdrop {
          display: block;
          opacity: 1;
          pointer-events: auto;
        }

        .dropdown {
          position: fixed;
          top: 50%;
          left: 50%;
          right: auto;
          bottom: auto;
          transform: translate(-50%, -50%) scale(0.95);
          margin: 0;
          max-width: calc(100vw - 32px);
          max-height: calc(100vh - 32px);
          overflow-y: auto;
          overscroll-behavior: contain;
        }

        :host([isopen]) .dropdown {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    `];render(){return w`
      <div class="backdrop" @click=${()=>this.close()}></div>
      <div class="dropdown ${this.position}">
        ${this.user?w`
          <div class="user-section">
            <div class="user-info">
              <div class="user-avatar">
                ${this.user.avatar?w`<img src="${this.user.avatar}" alt="${this.user.name}">`:this.getInitials(this.user.name)}
                ${this.user.status?w`
                  <div class="user-status ${this.user.status}"></div>
                `:""}
              </div>
              <div class="user-details">
                <div class="user-name">${this.user.name}</div>
                ${this.user.email?w`
                  <div class="user-email">${this.user.email}</div>
                `:""}
              </div>
            </div>
          </div>
        `:""}
        
        <div class="menu-section">
          ${this.menuItems.map(M=>this.renderMenuItem(M))}
        </div>
      </div>
    `}renderMenuItem(M){if("divider"in M&&M.divider)return w`<div class="menu-divider"></div>`;let S=M;return w`
      <div class="menu-item" @click=${()=>this.handleMenuClick(S)}>
        ${S.iconName?w`
          <dees-icon .icon="${`lucide:${S.iconName}`}"></dees-icon>
        `:""}
        <span class="menu-item-text">${S.name}</span>
        ${S.shortcut?w`
          <span class="menu-shortcut">${S.shortcut}</span>
        `:""}
      </div>
    `}getInitials(M){return M.split(" ").map(S=>S[0]).join("").toUpperCase().slice(0,2)}async handleMenuClick(M){await M.action(),this.close(),this.dispatchEvent(new CustomEvent("menu-select",{detail:{item:M},bubbles:!0,composed:!0}))}open(){this.isOpen=!0}close(){this.isOpen=!1}toggle(){this.isOpen=!this.isOpen}async connectedCallback(){await super.connectedCallback(),this.handleOutsideClick=this.handleOutsideClick.bind(this),document.addEventListener("click",this.handleOutsideClick)}async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideClick)}handleOutsideClick(M){if(this.isOpen&&!this.contains(M.target)){let S=this.parentElement;if(S&&S.contains(M.target))return;this.close()}}constructor(){super(...arguments),Bs(this,h)}static{Bs(i,a)}};return x=i})()});var Z2,Ut,b9t,Yq=v(()=>{oe();_t();bo();i2();d9t();u9t();f9t();At();Xq();Kq();Z2=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ut=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},b9t=(()=>{let t=[Q("dees-appui-appbar")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[];var $e=class extends r{static{i=this}static{let q=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:String})],l=[D({type:String})],y=[D({type:Boolean})],x=[D({type:Object})],N=[D({type:Array})],I=[D({type:Boolean})],V=[D({type:Boolean})],E=[D({type:Number})],H=[D({type:Boolean})],ne=[J()],we=[J()],Ce=[J()],F=[J()],K=[J()],Z2(this,null,n,{kind:"accessor",name:"menuItems",static:!1,private:!1,access:{has:R=>"menuItems"in R,get:R=>R.menuItems,set:(R,te)=>{R.menuItems=te}},metadata:q},s,o),Z2(this,null,u,{kind:"accessor",name:"breadcrumbs",static:!1,private:!1,access:{has:R=>"breadcrumbs"in R,get:R=>R.breadcrumbs,set:(R,te)=>{R.breadcrumbs=te}},metadata:q},c,d),Z2(this,null,l,{kind:"accessor",name:"breadcrumbSeparator",static:!1,private:!1,access:{has:R=>"breadcrumbSeparator"in R,get:R=>R.breadcrumbSeparator,set:(R,te)=>{R.breadcrumbSeparator=te}},metadata:q},f,b),Z2(this,null,y,{kind:"accessor",name:"showWindowControls",static:!1,private:!1,access:{has:R=>"showWindowControls"in R,get:R=>R.showWindowControls,set:(R,te)=>{R.showWindowControls=te}},metadata:q},g,h),Z2(this,null,x,{kind:"accessor",name:"user",static:!1,private:!1,access:{has:R=>"user"in R,get:R=>R.user,set:(R,te)=>{R.user=te}},metadata:q},M,S),Z2(this,null,N,{kind:"accessor",name:"profileMenuItems",static:!1,private:!1,access:{has:R=>"profileMenuItems"in R,get:R=>R.profileMenuItems,set:(R,te)=>{R.profileMenuItems=te}},metadata:q},_,k),Z2(this,null,I,{kind:"accessor",name:"showSearch",static:!1,private:!1,access:{has:R=>"showSearch"in R,get:R=>R.showSearch,set:(R,te)=>{R.showSearch=te}},metadata:q},L,A),Z2(this,null,V,{kind:"accessor",name:"showActivityLogToggle",static:!1,private:!1,access:{has:R=>"showActivityLogToggle"in R,get:R=>R.showActivityLogToggle,set:(R,te)=>{R.showActivityLogToggle=te}},metadata:q},C,z),Z2(this,null,E,{kind:"accessor",name:"activityLogCount",static:!1,private
      ${this.menuItems.map((q,R)=>this.renderMenuItem(q,`menu-${R}`))}
    `}renderMenuItem(q,R){if("divider"in q&&q.divider)return w`<div class="dropdown-divider"></div>`;let te=q,me=this.activeMenu===R,ue=te.submenu&&te.submenu.length>0;return w`
      <div
        class="menuItem ${me?"active":""}"
        ?disabled=${te.disabled}
        tabindex="${te.disabled?-1:0}"
        data-item-id="${R}"
        @click=${()=>this.handleMenuClick(te,R)}
        @keydown=${_e=>this.handleMenuKeydown(_e,te,R)}
        role="menuitem"
        aria-haspopup="${ue}"
        aria-expanded="${me}"
      >
        ${te.iconName?w`<dees-icon .icon="${`lucide:${te.iconName}`}"></dees-icon>`:""}
        ${te.name}
        ${ue?this.renderDropdown(te.submenu,R,me):""}
      </div>
    `}renderDropdown(q,R,te){return w`
      <div 
        class="dropdown ${te?"open":""}" 
        @click=${me=>me.stopPropagation()}
        @keydown=${me=>this.handleDropdownKeydown(me,q,R)}
        tabindex="${te?0:-1}"
        role="menu"
      >
        ${q.map((me,ue)=>this.renderDropdownItem(me,`${R}-${ue}`))}
      </div>
    `}renderDropdownItem(q,R){if("divider"in q&&q.divider)return w`<div class="dropdown-divider"></div>`;let te=q,me=parseInt(R.split("-").pop()||"0"),ue=this.focusedDropdownItem===me;return w`
      <div
        class="dropdown-item ${ue?"focused":""}"
        ?disabled=${te.disabled}
        @click=${()=>this.handleDropdownItemClick(te)}
        @mouseenter=${()=>this.focusedDropdownItem=me}
        role="menuitem"
        tabindex="${te.disabled?-1:0}"
      >
        ${te.iconName?w`<dees-icon .icon="${`lucide:${te.iconName}`}"></dees-icon>`:""}
        <span>${te.name}</span>
        ${te.shortcut?w`<span class="shortcut">${te.shortcut}</span>`:""}
      </div>
    `}renderBreadcrumbs(){if(!this.breadcrumbs)return w``;let q=this.breadcrumbs.split(this.breadcrumbSeparator);return w`
      ${q.map((R,te)=>w`
        ${te>0?w`<span class="breadcrumb-separator">${this.breadcrumbSeparator}</span>`:""}
        <span 
          class="breadcrumb-item" 
          @click=${()=>this.handleBreadcrumbClick(R,te)}
        >
          ${R}
        </span>
      `)}
    `}renderAccountSection(){return w`
      ${this.showSearch?w`
        <dees-icon
          class="search-icon"
          .icon=${"lucide:search"}
          @click=${this.handleSearchClick}
        ></dees-icon>
      `:""}
      ${this.user?w`
        <div style="position: relative;">
          <div class="user-info" @click=${this.handleUserClick}>
            <div class="user-avatar">
              ${this.user.avatar?w`<img src="${this.user.avatar}" alt="${this.user.name}">`:w`${this.user.name.charAt(0).toUpperCase()}`}
              ${this.user.status?w`
                <div class="user-status ${this.user.status}"></div>
              `:""}
            </div>
            <span>${this.user.name}</span>
          </div>
          <dees-appui-profiledropdown
            .user=${this.user}
            .menuItems=${this.profileMenuItems}
            .isOpen=${this.isProfileDropdownOpen}
            .position=${"top-right"}
            @menu-select=${q=>this.handleProfileMenuSelect(q)}
          ></dees-appui-profiledropdown>
        </div>
      `:""}
      ${this.showActivityLogToggle?w`
        <div
          class="activity-toggle ${this.activityLogActive?"active":""}"
          @click=${this.handleActivityToggle}
          title="Activity Log"
        >
          <dees-icon .icon=${"lucide:activity"}></dees-icon>
          ${this.activityLogCount>0?w`
            <span class="activity-badge">${this.activityLogCount>99?"99+":this.activityLogCount}</span>
          `:""}
        </div>
      `:""}
    `}handleMenuClick(q,R){q.disabled||(q.submenu&&q.submenu.length>0?this.activeMenu===R?this.activeMenu=null:this.activeMenu=R:(this.activeMenu=null,q.action&&q.action(),this.dispatchEvent(new CustomEvent("menu-select",{detail:{item:q},bubbles:!0,composed:!0}))))}handleDropdownItemClick(q){q.disabled||(this.activeMenu=null,q.action&&q.action(),this.dispatchEvent(new CustomEvent("menu-select",{detail:{item:q},bubbles:!0,composed:!0})))}handleMenuKeydown(q,R,te){switch(q.key){case"Enter":case" ":q.preventDefault(),this.handleMenuClick(R,te);break;case"ArrowDown":if(R.submenu&&this.activeMenu===te){q.preventDefault(),this.focusedDropdownItem=0;let me=this.findNextValidItem(R.submenu,-1,1);me!==-1&&(this.focusedDropdownItem=me,setTimeout(()=>{let ue=this.renderRoot.querySelector(".dropdown.open");ue&&ue.focus()},0))}break;case"Escape":this.activeMenu=null,this.focusedDropdownItem=-1;break;case"Tab":this.activeMenu===te&&(this.activeMenu=null,this.focusedDropdownItem=-1);break;case"ArrowRight":q.preventDefault(),this.focusNextMenuItem(te,1);break;case"ArrowLeft":q.preventDefault(),this.focusNextMenuItem(te,-1);break}}handleBreadcrumbClick(q,R){this.dispatchEvent(new CustomEvent("breadcrumb-navigate",{detail:{breadcrumb:q,index:R},bubbles:!0,composed:!0}))}handleSearchClick(){this.dispatchEvent(new CustomEvent("search-click",{bubbles:!0,composed:!0}))}handleActivityToggle(){this.dispatchEvent(new CustomEvent("activity-toggle",{bubbles:!0,composed:!0}))}handleUserClick(){this.isProfileDropdownOpen=!this.isProfileDropdownOpen,this.dispatchEvent(new CustomEvent("user-menu-open",{bubbles:!0,composed:!0}))}handleProfileMenuSelect(q){this.isProfileDropdownOpen=!1,this.dispatchEvent(new CustomEvent("profile-menu-select",{detail:q.detail,bubbles:!0,composed:!0}))}async connectedCallback(){await super.connectedCallback(),this.addEventListener("click",this.handleGlobalClick),document.addEventListener("click",this.handleDocumentClick)}async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}handleGlobalClick=(Ut(this,ve),q=>{q.stopPropagation()});handleDocumentClick=()=>{this.activeMenu=null,this.focusedDropdownItem=-1};handleDropdownKeydown(q,R,te){let me=R.filter(ue=>!("divider"in ue&&ue.divider));switch(q.key){case"ArrowDown":q.preventDefault();let ue=this.findNextValidItem(R,this.focusedDropdownItem,1);ue!==-1&&(this.focusedDropdownItem=ue);break;case"ArrowUp":q.preventDefault();let _e=this.findNextValidItem(R,this.focusedDropdownItem,-1);_e!==-1&&(this.focusedDropdownItem=_e);break;case"Enter":if(q.preventDefault(),this.focusedDropdownItem!==-1){let Re=me[this.focusedDropdownItem];Re&&"action"in Re&&!Re.disabled&&this.handleDropdownItemClick(Re)}break;case"Home":q.preventDefault();let he=this.findNextValidItem(R,-1,1);he!==-1&&(this.focusedDropdownItem=he);break;case"End":q.preventDefault();let ie=this.findNextValidItem(R,R.length,-1);ie!==-1&&(this.focusedDropdownItem=ie);break;case"Escape":q.preventDefault(),this.activeMenu=null,this.focusedDropdownItem=-1;let ke=this.renderRoot.querySelector(".menuItem.active");ke&&ke.focus();break}}findNextValidItem(q,R,te){let me=R+te;for(;me>=0&&me<q.length;){let ue=q[me];if(!("divider"in ue&&ue.divider)&&!("disabled"in ue&&ue.disabled))return me;me+=te}return-1}focusNextMenuItem(q,R){let te=Array.from(this.renderRoot.querySelectorAll(".menuItem")),me=te.findIndex(he=>he.getAttribute("data-item-id")===q);if(me===-1)return;let ue=me+R;ue<0?ue=te.length-1:ue>=te.length&&(ue=0);let _e=0;for(;_e<te.length;){let he=te[ue];if(!he.hasAttribute("disabled")){he.focus(),this.activeMenu&&(this.activeMenu=null,this.focusedDropdownItem=-1);break}ue=(ue+R+te.length)%te.length,_e++}}static{Ut(i,a)}};return $e=i})()});var Qq=v(()=>{Yq()});var v9t,y9t,x9t=v(()=>{oe();x1();y9t=()=>w(v9t||(v9t=Rl([`
    <dees-demowrapper>
      <style>
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          background: #1a1a1a;
        }

        .demo-section {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .demo-label {
          font-size: 12px;
          color: #737373;
          font-family: 'Geist Sans', sans-serif;
        }

        .demo-bottombar-wrapper {
          border: 1px solid hsl(0 0% 20%);
          border-radius: 4px;
          overflow: hidden;
        }
      </style>
      <div class="demo-container">
        <div class="demo-section">
          <div class="demo-label">Bottom bar with status widgets and actions</div>
          <div class="demo-bottombar-wrapper">
            <dees-appui-bottombar
              id="demo-bottombar"
            ></dees-appui-bottombar>
          </div>
        </div>

        <div class="demo-section">
          <div class="demo-label">Controls</div>
          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
            <button onclick="addSuccessWidget()">Add Success Widget</button>
            <button onclick="addWarningWidget()">Add Warning Widget</button>
            <button onclick="addErrorWidget()">Add Error Widget</button>
            <button onclick="addLoadingWidget()">Add Loading Widget</button>
            <button onclick="addRightWidget()">Add Right Widget</button>
            <button onclick="addAction()">Add Action</button>
            <button onclick="clearAll()">Clear All</button>
          </div>
        </div>
      </div>
      <script type="module">
        const bottombar = document.getElementById('demo-bottombar');

        // Wait for component to initialize
        await bottombar.updateComplete;

        // Add initial widgets
        bottombar.addWidget({
          id: 'status',
          iconName: 'lucide:activity',
          label: 'System Online',
          status: 'success',
          tooltip: 'All systems operational',
          onClick: () => console.log('Status clicked'),
          contextMenuItems: [
            { name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
            { divider: true },
            { name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
          ],
        });

        bottombar.addWidget({
          id: 'notifications',
          iconName: 'lucide:bell',
          label: '3 notifications',
          status: 'warning',
          tooltip: 'You have unread notifications',
          onClick: () => console.log('Notifications clicked'),
        });

        bottombar.addWidget({
          id: 'version',
          iconName: 'lucide:gitBranch',
          label: 'v1.2.3',
          tooltip: 'Current version',
          position: 'right',
          onClick: () => console.log('Version clicked'),
        });

        // Add initial actions
        bottombar.addAction({
          id: 'settings',
          iconName: 'lucide:settings',
          tooltip: 'Settings',
          position: 'right',
          onClick: () => alert('Settings clicked'),
        });

        bottombar.addAction({
          id: 'help',
          iconName: 'lucide:helpCircle',
          tooltip: 'Help',
          position: 'right',
          onClick: () => alert('Help clicked'),
        });

        // Demo control functions
        let widgetCounter = 0;
        let actionCounter = 0;

        window.addSuccessWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'success-' + widgetCounter,
            iconName: 'lucide:checkCircle',
            label: 'Success ' + widgetCounter,
            status: 'success',
            tooltip: 'Success widget',
            onClick: () => bottombar.removeWidget('success-' + widgetCounter),
          });
        };

        window.addWarningWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'warning-' + widgetCounter,
            iconName: 'lucide:alertTriangle',
            label: 'Warning ' + widgetCounter,
            status: 'warning',
            tooltip: 'Warning widget',
            onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
          });
        };

        window.addErrorWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'error-' + widgetCounter,
            iconName: 'lucide:xCircle',
            label: 'Error ' + widgetCounter,
            status: 'error',
            tooltip: 'Error widget',
            onClick: () => bottombar.removeWidget('error-' + widgetCounter),
          });
        };

        window.addLoadingWidget = () => {
          widgetCounter++;
          const id = 'loading-' + widgetCounter;
          bottombar.addWidget({
            id: id,
            iconName: 'lucide:loader2',
            label: 'Loading...',
            status: 'active',
            loading: true,
            tooltip: 'Loading in progress',
          });

          // Simulate completion after 3 seconds
          setTimeout(() => {
            bottombar.updateWidget(id, {
              iconName: 'lucide:check',
              label: 'Done!',
              status: 'success',
              loading: false,
            });
          }, 3000);
        };

        window.addRightWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'right-' + widgetCounter,
            iconName: 'lucide:info',
            label: 'Right ' + widgetCounter,
            position: 'right',
            onClick: () => bottombar.removeWidget('right-' + widgetCounter),
          });
        };

        window.addAction = () => {
          actionCounter++;
          bottombar.addAction({
            id: 'action-' + actionCounter,
            iconName: 'lucide:zap',
            tooltip: 'Action ' + actionCounter,
            onClick: () => {
              alert('Action ' + actionCounter + ' clicked');
              bottombar.removeAction('action-' + actionCounter);
            },
          });
        };

        window.clearAll = () => {
          bottombar.clearWidgets();
          bottombar.clearActions();
          widgetCounter = 0;
          actionCounter = 0;
        };
      <\/script>
    </dees-demowrapper>
  `])))});var Jq,Nd,w9t,eV=v(()=>{oe();He();At();r2();x9t();Jq=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Nd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},w9t=(()=>{let t=[Q("dees-appui-bottombar")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],Jq(this,null,n,{kind:"accessor",name:"widgets",static:!1,private:!1,access:{has:b=>"widgets"in b,get:b=>b.widgets,set:(b,y)=>{b.widgets=y}},metadata:f},s,o),Jq(this,null,u,{kind:"accessor",name:"actions",static:!1,private:!1,access:{has:b=>"actions"in b,get:b=>b.actions,set:(b,y)=>{b.actions=y}},metadata:f},c,d),Jq(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=y9t;static demoGroups=["App UI"];#e=Nd(this,s,[]);get widgets(){return this.#e}set widgets(f){this.#e=f}#t=(Nd(this,o),Nd(this,c,[]));get actions(){return this.#t}set actions(f){this.#t=f}static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
        height: 24px;
        flex-shrink: 0;
        user-select: none;
      }

      .bottom-bar {
        height: 24px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        gap: 4px;
        background: ${p.bdTheme("hsl(0 0% 94%)","hsl(0 0% 6%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        font-size: 11px;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .widget {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        white-space: nowrap;
      }

      .widget:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 12%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 80%)")};
      }

      .widget dees-icon {
        flex-shrink: 0;
      }

      .widget-separator {
        width: 1px;
        height: 14px;
        background: ${p.bdTheme("hsl(0 0% 80%)","hsl(0 0% 20%)")};
        margin: 0 4px;
      }

      /* Status colors matching dees-workspace-bottombar */
      .widget.active {
        color: ${p.bdTheme("hsl(210 100% 45%)","hsl(210 100% 60%)")};
      }

      .widget.success {
        color: ${p.bdTheme("hsl(142 70% 35%)","hsl(142 70% 50%)")};
      }

      .widget.warning {
        color: ${p.bdTheme("hsl(38 92% 45%)","hsl(38 92% 55%)")};
      }

      .widget.error {
        color: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 60%)")};
      }

      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .spinning {
        animation: spin 1s linear infinite;
      }

      .spacer {
        flex: 1;
      }

      .action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.15s ease;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .action-button:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 12%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 80%)")};
      }

      .action-button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .action-button.disabled:hover {
        background: transparent;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }
    `];render(){let f=this.widgets.filter(h=>h.position!=="right").sort((h,x)=>(h.order||0)-(x.order||0)),b=this.widgets.filter(h=>h.position==="right").sort((h,x)=>(h.order||0)-(x.order||0)),y=this.actions.filter(h=>h.position==="left"),g=this.actions.filter(h=>h.position!=="left");return w`
      <div class="bottom-bar">
        <!-- Left actions -->
        ${y.map(h=>this.renderAction(h))}

        <!-- Left widgets -->
        ${f.map((h,x)=>w`
          ${x>0||y.length>0?w`<div class="widget-separator"></div>`:""}
          ${this.renderWidget(h)}
        `)}

        <div class="spacer"></div>

        <!-- Right widgets -->
        ${b.map((h,x)=>w`
          ${this.renderWidget(h)}
          ${x<b.length-1||g.length>0?w`<div class="widget-separator"></div>`:""}
        `)}

        <!-- Right actions -->
        ${g.map(h=>this.renderAction(h))}
      </div>
    `}renderWidget(f){let b=f.status&&f.status!=="idle"?f.status:"",y=f.iconName?f.iconName.startsWith("lucide:")?f.iconName:`lucide:${f.iconName}`:"";return w`
      <div
        class="widget ${b}"
        title="${f.tooltip||""}"
        @click=${()=>f.onClick?.()}
        @contextmenu=${g=>this.handleWidgetContextMenu(g,f)}
      >
        ${y?w`
          <dees-icon
            .icon=${y}
            iconSize="12"
            class="${f.loading?"spinning":""}"
          ></dees-icon>
        `:""}
        ${f.label?w`<span>${f.label}</span>`:""}
      </div>
    `}renderAction(f){let b=f.iconName.startsWith("lucide:")?f.iconName:`lucide:${f.iconName}`;return w`
      <div
        class="action-button ${f.disabled?"disabled":""}"
        title="${f.tooltip||""}"
        @click=${()=>!f.disabled&&f.onClick?.()}
      >
        <dees-icon
          .icon=${b}
          iconSize="12"
        ></dees-icon>
      </div>
    `}async handleWidgetContextMenu(f,b){if(!b.contextMenuItems||b.contextMenuItems.length===0)return;f.preventDefault();let y=[];for(let g of b.contextMenuItems)g.divider?y.push({divider:!0}):y.push({name:g.name,iconName:g.iconName,action:async()=>{await g.action()},disabled:g.disabled});await jt.openContextMenuWithOptions(f,y)}addWidget(f){this.widgets=this.widgets.filter(b=>b.id!==f.id),this.widgets=[...this.widgets,f]}updateWidget(f,b){this.widgets=this.widgets.map(y=>y.id===f?{...y,...b}:y)}removeWidget(f){this.widgets=this.widgets.filter(b=>b.id!==f)}getWidget(f){return this.widgets.find(b=>b.id===f)}clearWidgets(){this.widgets=[]}addAction(f){this.actions=this.actions.filter(b=>b.id!==f.id),this.actions=[...this.actions,f]}removeAction(f){this.actions=this.actions.filter(b=>b.id!==f)}clearActions(){this.actions=[]}constructor(){super(...arguments),Nd(this,d)}static{Nd(i,a)}};return l=i})()});var M9t=v(()=>{eV()});var k9t,z9t=v(()=>{oe();k9t=()=>w`
  <style>
    ${X`
      .demo-background {
        padding: 24px;
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 5%)")};
        min-height: 100vh;
      }
      
      .demo-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      
      .section-title {
        font-size: 24px;
        font-weight: 700;
        margin: 32px 0 16px 0;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        letter-spacing: -0.025em;
      }
      
      .section-title:first-child {
        margin-top: 0;
      }
      
      .grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      
      .grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
      }
      
      @media (max-width: 968px) {
        .grid-3col {
          grid-template-columns: 1fr;
        }
      }
      
      @media (max-width: 768px) {
        .grid-layout {
          grid-template-columns: 1fr;
        }
      }
      
      code {
        background: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 13px;
      }
    `}
  </style>
  
  <div class="demo-background">
    <div class="demo-container">
      <h2 class="section-title">Default Panels</h2>
      
      <dees-panel .title=${"Panel Component"} .subtitle=${"The default panel variant with shadcn-inspired styling"}>
        <p>The panel component automatically follows the theme and provides consistent styling for grouped content.</p>
        <p>It's perfect for creating sections in your application with proper spacing and borders.</p>
      </dees-panel>
      
      <div class="grid-layout">
        <dees-panel .title=${"Feature Overview"} .subtitle=${"Key capabilities"}>
          <p>Grid layouts work great with panels for creating dashboards and feature sections.</p>
          <dees-button>Learn More</dees-button>
        </dees-panel>
        
        <dees-panel .title=${"Quick Actions"} .subtitle=${"Common tasks"}>
          <p>Each panel maintains consistent spacing and styling across your application.</p>
          <dees-button>Get Started</dees-button>
        </dees-panel>
      </div>
      
      <h2 class="section-title">Panel Variants</h2>
      
      <dees-panel .title=${"Default Variant"} .variant=${"default"}>
        <p>The default variant has a white background, subtle border, and minimal shadow. It's the standard choice for most content.</p>
        <p>Use <code>variant="default"</code> or omit the variant property.</p>
      </dees-panel>
      
      <dees-panel .title=${"Outline Variant"} .subtitle=${"Transparent background with border"} .variant=${"outline"}>
        <p>The outline variant removes the background color and shadow, keeping only the border.</p>
        <p>Use <code>variant="outline"</code> for a lighter visual weight.</p>
      </dees-panel>
      
      <dees-panel .title=${"Ghost Variant"} .subtitle=${"Minimal styling for subtle sections"} .variant=${"ghost"}>
        <p>The ghost variant has no border or background by default, only showing a subtle background on hover.</p>
        <p>Use <code>variant="ghost"</code> for the most minimal appearance.</p>
      </dees-panel>
      
      <h2 class="section-title">Panel Sizes</h2>
      
      <div class="grid-3col">
        <dees-panel .title=${"Small Panel"} .size=${"sm"}>
          <p>Compact padding for dense layouts.</p>
          <p>Use <code>size="sm"</code></p>
        </dees-panel>
        
        <dees-panel .title=${"Medium Panel"} .size=${"md"}>
          <p>Default size with balanced spacing.</p>
          <p>Use <code>size="md"</code> or omit.</p>
        </dees-panel>
        
        <dees-panel .title=${"Large Panel"} .size=${"lg"}>
          <p>Generous padding for prominent sections.</p>
          <p>Use <code>size="lg"</code></p>
        </dees-panel>
      </div>
      
      <h2 class="section-title">Complex Examples</h2>
      
      <dees-panel .title=${"Form Example"} .subtitle=${"Panels work great for organizing form sections"}>
        <dees-form>
          <dees-input-text .label=${"Project Name"} .required=${!0}></dees-input-text>
          <dees-input-text .label=${"Description"} .inputType=${"textarea"}></dees-input-text>
          <dees-input-dropdown 
            .label=${"Category"} 
            .options=${[{option:"Web Development",key:"web"},{option:"Mobile App",key:"mobile"},{option:"Desktop Software",key:"desktop"}]}
          ></dees-input-dropdown>
          <dees-form-submit>Create Project</dees-form-submit>
        </dees-form>
      </dees-panel>
      
      <dees-panel .title=${"Nested Panels"} .subtitle=${"Panels can be nested for hierarchical organization"}>
        <p>You can nest panels to create more complex layouts:</p>
        
        <dees-panel .title=${"Nested Panel 1"} .variant=${"outline"} .size=${"sm"}>
          <p>This is a nested panel with outline variant and small size.</p>
        </dees-panel>
        
        <dees-panel .title=${"Nested Panel 2"} .variant=${"ghost"} .size=${"sm"}>
          <p>This is another nested panel with ghost variant.</p>
        </dees-panel>
      </dees-panel>
      
      <h2 class="section-title">Untitled Panels</h2>
      
      <dees-panel>
        <p>Panels work great even without a title for simple content grouping.</p>
        <p>They provide visual separation and consistent padding throughout your interface.</p>
      </dees-panel>
      
      <div class="grid-layout">
        <dees-panel .variant=${"outline"}>
          <h4 style="margin-top: 0;">Custom Content</h4>
          <p>You can add your own headings and structure within untitled panels.</p>
        </dees-panel>
        
        <dees-panel .variant=${"ghost"}>
          <h4 style="margin-top: 0;">Minimal Style</h4>
          <p>Ghost panels without titles create very subtle content sections.</p>
        </dees-panel>
      </div>
    </div>
  </div>
`});var eWt,tWt,tV,aWt,Qt,el,iWt,rWt,S9t,sWt,nWt,YQ1,ZQ1,la=v(()=>{oe();eWt="Geist Sans",tWt="Intel One Mono",tV=`'${eWt}', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,aWt=`'${tWt}', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`,Qt=Ht(tV),el=Ht(aWt),iWt="Cal Sans",rWt=`'${iWt}', ${tV}`,S9t=Ht(rWt),sWt="Roboto Slab",nWt=`'${sWt}', Georgia, serif`,YQ1=Ht(nWt),ZQ1=Ht(`
  font-family: ${tV};
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'tnum', 'cv05' 1;
`)});var q4,Zi,C9t,h2=v(()=>{oe();z9t();la();He();q4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Zi=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},C9t=(()=>{let t=[Q("dees-panel")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:String})],y=[D({type:String})],x=[D({attribute:!1})],q4(this,null,n,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:k=>"title"in k,get:k=>k.title,set:(k,I)=>{k.title=I}},metadata:_},s,o),q4(this,null,u,{kind:"accessor",name:"subtitle",static:!1,private:!1,access:{has:k=>"subtitle"in k,get:k=>k.subtitle,set:(k,I)=>{k.subtitle=I}},metadata:_},c,d),q4(this,null,l,{kind:"accessor",name:"variant",static:!1,private:!1,access:{has:k=>"variant"in k,get:k=>k.variant,set:(k,I)=>{k.variant=I}},metadata:_},f,b),q4(this,null,y,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:k=>"size"in k,get:k=>k.size,set:(k,I)=>{k.size=I}},metadata:_},g,h),q4(this,null,x,{kind:"accessor",name:"runAfterRender",static:!1,private:!1,access:{has:k=>"runAfterRender"in k,get:k=>k.runAfterRender,set:(k,I)=>{k.runAfterRender=I}},metadata:_},M,S),q4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=k9t;static demoGroups=["Layout"];#e=Zi(this,s,"");get title(){return this.#e}set title(_){this.#e=_}#t=(Zi(this,o),Zi(this,c,""));get subtitle(){return this.#t}set subtitle(_){this.#t=_}#a=(Zi(this,d),Zi(this,f,"default"));get variant(){return this.#a}set variant(_){this.#a=_}#i=(Zi(this,b),Zi(this,g,"md"));get size(){return this.#i}set size(_){this.#i=_}#r=(Zi(this,h),Zi(this,M,void 0));get runAfterRender(){return this.#r}set runAfterRender(_){this.#r=_}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        font-family: ${Qt};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border-radius: 6px;
        padding: 24px;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Variant: default */
      :host([variant="default"]) {
        box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
      }

      /* Variant: outline */
      :host([variant="outline"]) {
        background: transparent;
        box-shadow: none;
      }

      /* Variant: ghost */
      :host([variant="ghost"]) {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        padding: 16px;
      }

      /* Size variations */
      :host([size="sm"]) {
        padding: 16px;
      }

      :host([size="lg"]) {
        padding: 32px;
      }

      .header {
        margin-bottom: 16px;
      }

      .header:empty {
        display: none;
      }

      .title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        letter-spacing: -0.025em;
        line-height: 1.5;
      }

      /* Title size variations */
      :host([size="sm"]) .title {
        font-size: 16px;
      }

      :host([size="lg"]) .title {
        font-size: 20px;
      }

      .subtitle {
        margin: 4px 0 0 0;
        font-size: 14px;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        letter-spacing: -0.006em;
        line-height: 1.5;
      }

      /* Subtitle size variations */
      :host([size="sm"]) .subtitle {
        font-size: 13px;
      }

      :host([size="lg"]) .subtitle {
        font-size: 15px;
        margin-top: 6px;
      }

      .content {
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 84.9%)")};
        font-size: 14px;
        line-height: 1.6;
      }

      /* Content size variations */
      :host([size="sm"]) .content {
        font-size: 13px;
      }

      :host([size="lg"]) .content {
        font-size: 15px;
      }

      /* Remove margins from first and last children */
      .content ::slotted(*:first-child) {
        margin-top: 0;
      }

      .content ::slotted(*:last-child) {
        margin-bottom: 0;
      }

      /* Interactive states for default variant */
      :host([variant="default"]:hover) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

      /* Interactive states for outline variant */
      :host([variant="outline"]:hover) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        background: ${p.bdTheme("hsl(0 0% 98%)","hsl(0 0% 7.8%)")};
      }

      /* Interactive states for ghost variant */
      :host([variant="ghost"]:hover) {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
      }

      /* Focus states */
      :host(:focus-within) {
        outline: none;
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      /* Nested panels spacing */
      ::slotted(dees-panel) {
        margin-top: 16px;
      }

      ::slotted(dees-panel:first-child) {
        margin-top: 0;
      }
    `];render(){return w`
      <div class="header">
        ${this.title?w`<h3 class="title">${this.title}</h3>`:""}
        ${this.subtitle?w`<p class="subtitle">${this.subtitle}</p>`:""}
      </div>
      <div class="content">
        <slot></slot>
      </div>
    `}async firstUpdated(){this.runAfterRender&&await this.runAfterRender(this)}constructor(){super(...arguments),Zi(this,S)}static{Zi(i,a)}};return N=i})()});var _9t,aV,T9t,L9t=v(()=>{oe();x1();h2();aV=t=>Array.from({length:t},(e,a)=>({id:a,usage:Math.round(Math.random()*100),label:`${a}`})),T9t=()=>w(_9t||(_9t=Rl([`
  <dees-demowrapper>
    <style>
      `,`
    </style>
    
    <div class="demo-container">
      <dees-panel .title=`," .subtitle=",`>
        <dees-statsgrid
          .tiles=`,`
          .gridActions=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
        
        <div id="action-output" style="margin-top: 16px; padding: 12px; background: `,"; border-radius: 6px; font-size: 14px; font-family: monospace; color: ",`;">
          <em>Click on tile actions or grid actions to see the result...</em>
        </div>
      </dees-panel>
      
      <dees-panel .title=`," .subtitle=",`>
        <dees-statsgrid
          .tiles=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
        
        <div class="tile-config">
          <div class="config-section">
            <div class="config-title">Configuration Options</div>
            <div class="config-description">
              Each tile type supports different properties:
              <ul style="margin: 8px 0; padding-left: 20px;">
                <li><strong>Number:</strong> value, unit, color, description</li>
                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>
                <li><strong>Percentage:</strong> value (0-100), color, description</li>
                <li><strong>Trend:</strong> value, unit, trendData array, description</li>
                <li><strong>Text:</strong> value (string), color, description</li>
              </ul>
            </div>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=`," .subtitle=",`>
        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>
        <dees-statsgrid
          .tiles=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
        
        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>
        <dees-statsgrid
          .tiles=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
      </dees-panel>
      
      <dees-panel .title=`," .subtitle=",`>
        <dees-statsgrid
          id="cpu-cores-grid"
          .tiles=`,`
          .gridActions=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-statsgrid
          id="interactive-grid"
          .tiles=`,`
          .gridActions=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>
      </dees-panel>
      
      <dees-panel .title=`," .subtitle=",`>
        <div class="code-block">`,`</div>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-statsgrid
          .tiles=`,`
          .minTileWidth=`,`
          .gap=`,`
        ></dees-statsgrid>

        <div class="tile-config">
          <div class="config-section">
            <div class="config-title">Partition Tile Properties</div>
            <div class="config-description">
              <ul style="margin: 8px 0; padding-left: 20px;">
                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
              </ul>
              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
            </div>
          </div>
          <div class="config-section">
            <div class="config-title">Disk Tile Properties</div>
            <div class="config-description">
              <ul style="margin: 8px 0; padding-left: 20px;">
                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
              </ul>
              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
            </div>
          </div>
        </div>
      </dees-panel>
    </div>

    <script>
      // Cleanup live updates on page unload
      window.addEventListener('beforeunload', () => {
        if ((window as any).liveUpdateInterval) {
          clearInterval((window as any).liveUpdateInterval);
        }
      });
    <\/script>
  </dees-demowrapper>
  `])),X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1400px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .tile-config {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 16px;
          margin-top: 16px;
        }
        
        .config-section {
          padding: 16px;
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border-radius: 6px;
        }
        
        .config-title {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 8px;
          color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        }
        
        .config-description {
          font-size: 13px;
          color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        }
        
        .code-block {
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 11.8%)")};
          border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 16.8%)")};
          border-radius: 6px;
          padding: 16px;
          font-family: monospace;
          font-size: 13px;
          overflow-x: auto;
          white-space: pre;
        }
      `,"1. Comprehensive Dashboard","Full-featured stats grid with various tile types, actions, and Lucide icons",[{id:"revenue",title:"Total Revenue",value:125420,unit:"$",type:"number",icon:"lucide:dollar-sign",description:"+12.5% from last month",actions:[{name:"View Details",iconName:"lucide:trending-up",action:async()=>{let t=document.querySelector("#action-output");t&&(t.textContent="Viewing revenue details: $125,420 (+12.5%)")}},{name:"Export Data",iconName:"lucide:download",action:async()=>{let t=document.querySelector("#action-output");t&&(t.textContent="Exporting revenue data to CSV...")}}]},{id:"users",title:"Active Users",value:3847,type:"number",icon:"lucide:users",description:"324 new this week",actions:[{name:"View User List",iconName:"lucide:list",action:async()=>{let t=document.querySelector("#action-output");t&&(t.textContent="Opening user list...")}}]},{id:"cpu",title:"CPU Usage",value:73,unit:"%",type:"gauge",icon:"lucide:cpu",gaugeOptions:{min:0,max:100,thresholds:[{value:0,color:"hsl(142.1 76.2% 36.3%)"},{value:60,color:"hsl(45.4 93.4% 47.5%)"},{value:80,color:"hsl(0 84.2% 60.2%)"}]}},{id:"storage",title:"Storage Used",value:65,type:"percentage",icon:"lucide:hard-drive",description:"650 GB of 1 TB"},{id:"latency",title:"Response Time",value:142,unit:"ms",type:"trend",icon:"lucide:activity",trendData:[150,145,148,142,138,140,135,145,142],description:"P95"},{id:"uptime",title:"System Uptime",value:"99.95%",type:"text",icon:"lucide:check-circle",color:"hsl(142.1 76.2% 36.3%)",description:"Last 30 days"}],[{name:"Refresh",iconName:"lucide:refresh-cw",action:async()=>{let t=document.querySelector("dees-statsgrid");t&&(t.style.opacity="0.5",setTimeout(()=>{t.style.opacity="1"},300))}},{name:"Export",iconName:"lucide:share",action:async()=>{let t=document.querySelector("#action-output");t&&(t.textContent="Exporting dashboard report...")}},{name:"Settings",iconName:"lucide:settings",action:async()=>{let t=document.querySelector("#action-output");t&&(t.textContent="Opening dashboard settings...")}}],250,16,p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)"),p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)"),"2. Tile Types","Different visualization types available in the stats grid",[{id:"number-example",title:"Number Tile",value:42195,unit:"$",type:"number",icon:"lucide:hash",description:"Simple numeric display"},{id:"gauge-example",title:"Gauge Tile",value:68,unit:"%",type:"gauge",icon:"lucide:gauge",gaugeOptions:{min:0,max:100,thresholds:[{value:0,color:"hsl(142.1 76.2% 36.3%)"},{value:50,color:"hsl(45.4 93.4% 47.5%)"},{value:80,color:"hsl(0 84.2% 60.2%)"}]}},{id:"percentage-example",title:"Percentage Tile",value:78,type:"percentage",icon:"lucide:percent",description:"Progress bar visualization"},{id:"trend-example",title:"Trend Tile",value:892,unit:"ops/s",type:"trend",icon:"lucide:trending-up",trendData:[720,750,780,795,810,835,850,865,880,892],description:"avg"},{id:"text-example",title:"Text Tile",value:"Operational",type:"text",icon:"lucide:info",color:"hsl(142.1 76.2% 36.3%)",description:"Status display"}],280,16,"3. Grid Configurations","Different layout options and responsive behavior",[{id:"1",title:"Orders",value:156,type:"number",icon:"lucide:shopping-cart"},{id:"2",title:"Revenue",value:8420,unit:"$",type:"number",icon:"lucide:dollar-sign"},{id:"3",title:"Users",value:423,type:"number",icon:"lucide:users"},{id:"4",title:"Growth",value:12.5,unit:"%",type:"number",icon:"lucide:trending-up",color:"hsl(142.1 76.2% 36.3%)"}],180,12,[{id:"spacious1",title:"Monthly Revenue",value:184500,unit:"$",type:"number",icon:"lucide:credit-card",description:"Total revenue this month"},{id:"spacious2",title:"Customer Satisfaction",value:94,type:"percentage",icon:"lucide:smile",description:"Based on 1,234 reviews"},{id:"spacious3",title:"Server Response",value:98,unit:"ms",type:"trend",icon:"lucide:server",trendData:[105,102,100,99,98,98,97,98],description:"avg response time"}],320,20,"4. CPU Cores Visualization","Vertical bar visualization for multi-core CPU usage with column spanning",[{id:"cpu-cores-8",ti
  {
    id: 'revenue',
    title: 'Total Revenue',
    value: 125420,
    unit: '$',
    type: 'number',
    icon: 'lucide:dollar-sign',
    description: '+12.5% from last month',
    actions: [
      {
        name: 'View Details',
        iconName: 'lucide:trending-up',
        action: async () => {
          console.log('View revenue details');
        }
      }
    ]
  },
  {
    id: 'cpu',
    title: 'CPU Usage',
    value: 73,
    unit: '%',
    type: 'gauge',
    icon: 'lucide:cpu',
    gaugeOptions: {
      min: 0,
      max: 100,
      thresholds: [
        { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
        { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
        { value: 80, color: 'hsl(0 84.2% 60.2%)' }
      ]
    }
  }
];

// Render the stats grid
html\`
  <dees-statsgrid
    .tiles=\${tiles}
    .minTileWidth=\${250}
    .gap=\${16}
    .gridActions=\${[
      {
        name: 'Refresh',
        iconName: 'lucide:refresh-cw',
        action: async () => console.log('Refresh')
      }
    ]}
  ></dees-statsgrid>
\`;`,"7. Disk & Storage Tiles","Partition and physical disk visualization tiles",[{id:"root-partition",title:"Root Partition",value:0,type:"partition",icon:"lucide:folder-root",partitionData:{used:698341425152,total:1073741824e3,filesystem:"ext4",mountPoint:"/"}},{id:"home-partition",title:"Home Partition",value:0,type:"partition",icon:"lucide:home",partitionData:{used:214748364800,total:536870912e3,filesystem:"ext4",mountPoint:"/home"}},{id:"data-partition",title:"Data Partition",value:0,type:"partition",icon:"lucide:database",partitionData:{used:1932735283200,total:2147483648e3,filesystem:"xfs",mountPoint:"/data"}},{id:"nvme-ssd",title:"Primary NVMe",value:0,type:"disk",icon:"lucide:hard-drive",columnSpan:2,diskData:{capacity:2e12,model:"Samsung 990 Pro",type:"nvme",iops:{read:7450,write:6900},health:98}},{id:"sata-ssd",title:"Secondary SSD",value:0,type:"disk",icon:"lucide:hard-drive",diskData:{capacity:1e12,model:"Crucial MX500",type:"ssd",iops:{read:560,write:510},health:85}},{id:"hdd-storage",title:"Backup HDD",value:0,type:"disk",icon:"lucide:archive",diskData:{capacity:8e12,model:"Seagate IronWolf",type:"hdd",iops:{read:210,write:195},health:42}}],280,16)});var tl,Ea,Ze,_1=v(()=>{oe();_t();tl=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ea=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Ze=(()=>{let t=de,e,a=[],i=[],r,n=[],s=[],o,u=[],c=[],d,l=[],f=[],b,y=[],g=[],h,x=[],M=[],S,N=[],_=[];return class extends t{static{let I=typeof Symbol=="function"&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;e=[D({type:String})],r=[D({type:String})],o=[D({type:String})],d=[D({type:String})],b=[D({type:Boolean})],h=[D({type:Boolean})],S=[D({type:String})],tl(this,null,e,{kind:"accessor",name:"layoutMode",static:!1,private:!1,access:{has:L=>"layoutMode"in L,get:L=>L.layoutMode,set:(L,A)=>{L.layoutMode=A}},metadata:I},a,i),tl(this,null,r,{kind:"accessor",name:"labelPosition",static:!1,private:!1,access:{has:L=>"labelPosition"in L,get:L=>L.labelPosition,set:(L,A)=>{L.labelPosition=A}},metadata:I},n,s),tl(this,null,o,{kind:"accessor",name:"key",static:!1,private:!1,access:{has:L=>"key"in L,get:L=>L.key,set:(L,A)=>{L.key=A}},metadata:I},u,c),tl(this,null,d,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:L=>"label"in L,get:L=>L.label,set:(L,A)=>{L.label=A}},metadata:I},l,f),tl(this,null,b,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:L=>"required"in L,get:L=>L.required,set:(L,A)=>{L.required=A}},metadata:I},y,g),tl(this,null,h,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:L=>"disabled"in L,get:L=>L.disabled,set:(L,A)=>{L.disabled=A}},metadata:I},x,M),tl(this,null,S,{kind:"accessor",name:"description",static:!1,private:!1,access:{has:L=>"description"in L,get:L=>L.description,set:(L,A)=>{L.description=A}},metadata:I},N,_),I&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:I})}#e=Ea(this,a,"auto");get layoutMode(){return this.#e}set layoutMode(I){this.#e=I}#t=(Ea(this,i),Ea(this,n,"top"));get labelPosition(){return this.#t}set labelPosition(I){this.#t=I}#a=(Ea(this,s),Ea(this,u,void 0));get key(){return this.#a}set key(I){this.#a=I}#i=(Ea(this
        /* CSS Variables for consistent spacing */
        :host {
          --dees-input-spacing-unit: 8px;
          --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
        }

        /* Default block display with no margins - spacing is container-driven */
        :host {
          display: block;
          margin: 0;
        }

        /* Horizontal layout mode - activated by attribute */
        :host([layout-mode="horizontal"]) {
          display: inline-block;
        }

        /* Label position variations */
        :host([label-position="left"]) .input-wrapper {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: var(--dees-input-label-gap);
          align-items: center;
        }

        :host([label-position="right"]) .input-wrapper {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: var(--dees-input-label-gap);
          align-items: center;
        }

        :host([label-position="top"]) .input-wrapper {
          display: block;
        }

        :host([label-position="none"]) dees-label {
          display: none;
        }
      `]}changeSubject=(Ea(this,_),new Mt.smartrx.rxjs.Subject);async connectedCallback(){await super.connectedCallback(),this.detectLayoutMode()}detectLayoutMode(){if(this.layoutMode!=="auto"){this.setAttribute("layout-mode",this.layoutMode);return}let I=this.closest("dees-form");I&&I.hasAttribute("horizontal-layout")?this.setAttribute("layout-mode","horizontal"):this.setAttribute("layout-mode","vertical")}updated(I){super.updated(I),I.has("layoutMode")&&this.detectLayoutMode(),I.has("labelPosition")&&this.setAttribute("label-position",this.labelPosition)}async freeze(){this.disabled=!0}async unfreeze(){this.disabled=!1}}})()});var $9t,D9t=v(()=>{oe();x1();h2();vo();$9t=()=>w`
  <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelectorAll("dees-input-checkbox"),a=t.querySelector("#select-all-btn"),i=t.querySelector("#clear-all-btn");a&&i&&(a.addEventListener("click",()=>{e.forEach(r=>{!r.disabled&&r.key?.startsWith("feature")&&(r.value=!0)})}),i.addEventListener("click",()=>{e.forEach(r=>{!r.disabled&&r.key?.startsWith("feature")&&(r.value=!1)})}))}}>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .checkbox-group {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        
        .horizontal-checkboxes {
          display: flex;
          gap: 24px;
          flex-wrap: wrap;
        }
        
        .interactive-section {
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }
        
        .output-text {
          font-family: monospace;
          font-size: 13px;
          color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(210 40% 80%)")};
          padding: 8px;
          background: ${p.bdTheme("hsl(210 40% 98%)","hsl(215 20.2% 11.8%)")};
          border-radius: 4px;
          min-height: 24px;
        }
        
        .form-section {
          background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
          border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          border-radius: 8px;
          padding: 20px;
          margin-top: 16px;
        }
        
        .button-group {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }
        
        .feature-list {
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 11.8%)")};
          border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 16.8%)")};
          border-radius: 6px;
          padding: 16px;
        }
        
        .section-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic Checkboxes"} .subtitle=${"Simple checkbox examples with various labels"}>
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${"I agree to the Terms and Conditions"} 
            .value=${!0}
            .key=${"terms"}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Subscribe to newsletter"} 
            .value=${!1}
            .key=${"newsletter"}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Enable notifications"} 
            .value=${!1}
            .description=${"Receive email updates about your account"}
            .key=${"notifications"}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Checkbox States"} .subtitle=${"Different checkbox states and configurations"}>
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${"Default state"} 
            .value=${!1}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Checked state"} 
            .value=${!0}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Disabled unchecked"} 
            .value=${!1}
            .disabled=${!0}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Disabled checked"} 
            .value=${!0}
            .disabled=${!0}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Required checkbox"} 
            .required=${!0}
            .key=${"required"}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Checkboxes arranged horizontally for compact forms"}>
        <div class="horizontal-checkboxes">
          <dees-input-checkbox 
            .label=${"Option A"} 
            .value=${!1}
            .layoutMode=${"horizontal"}
            .key=${"optionA"}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Option B"} 
            .value=${!0}
            .layoutMode=${"horizontal"}
            .key=${"optionB"}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Option C"} 
            .value=${!1}
            .layoutMode=${"horizontal"}
            .key=${"optionC"}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Option D"} 
            .value=${!0}
            .layoutMode=${"horizontal"}
            .key=${"optionD"}
          ></dees-input-checkbox>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Feature Selection Example"} .subtitle=${"Common use case for feature toggles with batch operations"}>
        <div class="button-group">
          <dees-button id="select-all-btn" type="secondary">Select All</dees-button>
          <dees-button id="clear-all-btn" type="secondary">Clear All</dees-button>
        </div>
        
        <div class="feature-list">
          <div class="checkbox-group">
            <dees-input-checkbox 
              .label=${"Dark Mode Support"} 
              .value=${!0}
              .key=${"feature1"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Email Notifications"} 
              .value=${!0}
              .key=${"feature2"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Two-Factor Authentication"} 
              .value=${!1}
              .key=${"feature3"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"API Access"} 
              .value=${!0}
              .key=${"feature4"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Advanced Analytics"} 
              .value=${!1}
              .key=${"feature5"}
            ></dees-input-checkbox>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Privacy Settings Example"} .subtitle=${"Checkboxes in a typical form context"}>
        <div class="form-section">
          <h4 class="section-title">Privacy Preferences</h4>
          
          <div class="checkbox-group">
            <dees-input-checkbox 
              .label=${"Share analytics data"} 
              .value=${!0}
              .description=${"Help us improve by sharing anonymous usage data"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Personalized recommendations"} 
              .value=${!0}
              .description=${"Get suggestions based on your activity"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Marketing communications"} 
              .value=${!1}
              .description=${"Receive promotional emails and special offers"}
            ></dees-input-checkbox>
            
            <dees-input-checkbox 
              .label=${"Third-party integrations"} 
              .value=${!1}
              .description=${"Allow approved partners to access your data"}
            ></dees-input-checkbox>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Interactive Example"} .subtitle=${"Click checkboxes to see value changes"}>
        <div class="checkbox-group">
          <dees-input-checkbox 
            .label=${"Feature toggle"} 
            .value=${!1}
            @changeSubject=${t=>{let e=document.querySelector("#checkbox-output");if(e&&t.detail){let a=t.detail.getValue();e.textContent=`Feature is ${a?"enabled":"disabled"}`}}}
          ></dees-input-checkbox>
          
          <dees-input-checkbox 
            .label=${"Debug mode"} 
            .value=${!1}
            @changeSubject=${t=>{let e=document.querySelector("#debug-output");if(e&&t.detail){let a=t.detail.getValue();e.textContent=`Debug mode: ${a?"ON":"OFF"}`}}}
          ></dees-input-checkbox>
        </div>
        
        <div class="interactive-section">
          <div id="checkbox-output" class="output-text">Feature is disabled</div>
          <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var iV,Rd,ew,tw=v(()=>{oe();_1();D9t();la();He();iV=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Rd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ew=(()=>{let t=[Q("dees-input-checkbox")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean})],u=[D({type:Boolean})],iV(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:b=>"value"in b,get:b=>b.value,set:(b,y)=>{b.value=y}},metadata:f},s,o),iV(this,null,u,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:b=>"indeterminate"in b,get:b=>b.indeterminate,set:(b,y)=>{b.indeterminate=y}},metadata:f},c,d),iV(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=$9t;static demoGroups=["Input"];#e=Rd(this,s,!1);get value(){return this.#e}set value(f){this.#e=f}#t=(Rd(this,o),Rd(this,c,!1));get indeterminate(){return this.#t}set indeterminate(f){this.#t=f}constructor(){super(),Rd(this,d),this.labelPosition="right"}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
        /* TODO: Migrate hardcoded values to --dees-* CSS variables */
        * {
          box-sizing: border-box;
        }

        :host {
          position: relative;
          cursor: default;
          font-family: ${Qt};
        }

        .maincontainer {
          display: inline-flex;
          align-items: flex-start;
          gap: 8px;
          cursor: pointer;
          user-select: none;
          transition: all 0.15s ease;
        }

        .checkbox {
          position: relative;
          height: 18px;
          width: 18px;
          flex-shrink: 0;
          border-radius: 4px;
          border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
          transition: all 0.15s ease;
          margin-top: 1px;
        }

        .maincontainer:hover .checkbox {
          border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        }

        .checkbox.selected {
          background: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
          border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        }

        .checkbox:focus-visible {
          outline: none;
          box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
        }

        /* Checkmark using Lucide icon style */
        .checkbox .checkmark {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: opacity 0.15s ease;
        }

        .checkbox.selected .checkmark {
          opacity: 1;
        }

        .checkbox .checkmark svg {
          width: 12px;
          height: 12px;
          stroke: white;
          stroke-width: 3;
        }

        /* Disabled state */
        .maincontainer.disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }

        .checkbox.disabled {
          background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
          border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        }

        /* Label */
        .label-container {
          display: flex;
          flex-direction: column;
          gap: 2px;
          flex: 1;
        }

        .checkbox-label {
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
          transition: color 0.15s ease;
          letter-spacing: -0.01em;
        }

        .maincontainer:hover .checkbox-label {
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }

        .maincontainer.disabled:hover .checkbox-label {
          color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
        }

        /* Description */
        .description-text {
          font-size: 12px;
          color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
          line-height: 1.5;
        }
    `];render(){return w`
      <div class="input-wrapper">
        <div class="maincontainer ${this.disabled?"disabled":""}" @click="${this.toggleSelected}">
          <div 
            class="checkbox ${this.value?"selected":""} ${this.disabled?"disabled":""}" 
            tabindex="${this.disabled?"-1":"0"}"
            @keydown="${this.handleKeydown}"
          >
            ${this.value?w`
                  <span class="checkmark">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </span>
                `:this.indeterminate?w`
                    <span class="checkmark">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 12H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </span>
                  `:w``}
          </div>
          <div class="label-container">
            ${this.label?w`<div class="checkbox-label">${this.label}</div>`:""}
            ${this.description?w`<div class="description-text">${this.description}</div>`:""}
          </div>
        </div>
      </div>
    `}async toggleSelected(){this.disabled||(this.value=!this.value,this.dispatchEvent(new CustomEvent("newValue",{detail:this.value,bubbles:!0})),this.changeSubject.next(this))}getValue(){return this.value}setValue(f){this.value=f}focus(){let f=this.shadowRoot.querySelector(".checkbox");f&&f.focus()}handleKeydown(f){(f.key===" "||f.key==="Enter")&&(f.preventDefault(),this.toggleSelected())}static{Rd(i,a)}};return l=i})()});var il={};Ye(il,{bright:()=>al,dark:()=>yi});var yi,al,xi=v(()=>{yi={blue:"#0050b9",blueActive:"#0069f2",blueMuted:"#012452",text:"#ffffff"},al={blue:"#0050b9",blueActive:"#0069f2",blueMuted:"#0069f2",text:"#333333"}});var A9t,E9t=v(()=>{oe();rl();A9t=()=>w`
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .demo-section {
        background: ${p.bdTheme("#f8f9fa","#1a1a1a")};
        border-radius: 8px;
        padding: 24px;
        border: 1px solid ${p.bdTheme("#e0e0e0","#333")};
      }
      
      .demo-section h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: ${p.bdTheme("#333","#fff")};
      }
      
      .demo-section p {
        color: ${p.bdTheme("#666","#999")};
        margin-bottom: 16px;
      }
      
      .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <div class="demo-section">
      <h3>Header Buttons</h3>
      <p>Modals can have optional header buttons for help and closing.</p>
      <div class="button-grid">
        <dees-button @click=${()=>{s1.createAndShow({heading:"With Help Button",showHelpButton:!0,onHelp:async()=>{let t=await s1.createAndShow({heading:"Help",width:"small",showCloseButton:!0,showHelpButton:!1,content:w`
                  <p>This is the help content for the modal.</p>
                  <p>You can provide context-specific help here.</p>
                `,menuOptions:[{name:"Got it",action:async e=>e.destroy()}]})},content:w`
              <p>This modal has a help button in the header. Click it to see help content.</p>
              <p>The close button is also visible by default.</p>
            `,menuOptions:[{name:"OK",action:async t=>t.destroy()}]})}}>With Help Button</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"No Close Button",showCloseButton:!1,content:w`
              <p>This modal has no close button in the header.</p>
              <p>You must use the action buttons or click outside to close it.</p>
            `,menuOptions:[{name:"Close",action:async t=>t.destroy()}]})}}>No Close Button</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Both Buttons",showHelpButton:!0,showCloseButton:!0,onHelp:()=>alert("Help clicked!"),content:w`
              <p>This modal has both help and close buttons.</p>
            `,menuOptions:[{name:"Done",action:async t=>t.destroy()}]})}}>Both Buttons</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Clean Header",showCloseButton:!1,showHelpButton:!1,content:w`
              <p>This modal has a clean header with no buttons.</p>
            `,menuOptions:[{name:"Close",action:async t=>t.destroy()}]})}}>Clean Header</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Modal Width Variations</h3>
      <p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
      <div class="button-grid">
        <dees-button @click=${()=>{s1.createAndShow({heading:"Small Modal",width:"small",content:w`
              <p>This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.</p>
            `,menuOptions:[{name:"Cancel",action:async t=>t.destroy()},{name:"OK",action:async t=>t.destroy()}]})}}>Small Modal</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Medium Modal (Default)",width:"medium",content:w`
              <dees-form>
                <dees-input-text .label=${"Username"}></dees-input-text>
                <dees-input-text .label=${"Email"} .inputType=${"email"}></dees-input-text>
                <dees-input-text .label=${"Password"} .inputType=${"password"}></dees-input-text>
              </dees-form>
            `,menuOptions:[{name:"Cancel",action:async t=>t.destroy()},{name:"Sign Up",action:async t=>t.destroy()}]})}}>Medium Modal</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Large Modal",width:"large",content:w`
              <h4>Wide Content Area</h4>
              <p>This large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.</p>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
                <dees-input-text .label=${"First Name"}></dees-input-text>
                <dees-input-text .label=${"Last Name"}></dees-input-text>
                <dees-input-text .label=${"Company"}></dees-input-text>
                <dees-input-text .label=${"Position"}></dees-input-text>
              </div>
            `,menuOptions:[{name:"Cancel",action:async t=>t.destroy()},{name:"Save",action:async t=>t.destroy()}]})}}>Large Modal</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Fullscreen Editor",width:"fullscreen",showHelpButton:!0,onHelp:async()=>{alert("In a real app, this would show editor documentation")},content:w`
              <h4>Fullscreen Experience with Header Controls</h4>
              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.</p>
              <p>The content area can be as tall as needed and will scroll if necessary.</p>
              <div style="height: 200px; background: ${p.bdTheme("#f0f0f0","#2a2a2a")}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
                <span style="color: ${p.bdTheme("#999","#666")}">Large content area</span>
              </div>
            `,menuOptions:[{name:"Save",action:async t=>t.destroy()},{name:"Cancel",action:async t=>t.destroy()}]})}}>Fullscreen Modal</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Custom Width & Constraints</h3>
      <p>You can also set custom pixel widths and min/max constraints.</p>
      <div class="button-grid">
        <dees-button @click=${()=>{s1.createAndShow({heading:"Custom Width (700px)",width:700,content:w`
              <p>This modal has a custom width of exactly 700 pixels.</p>
            `,menuOptions:[{name:"Close",action:async t=>t.destroy()}]})}}>Custom 700px</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"With Max Width",width:"large",maxWidth:600,content:w`
              <p>This modal is set to 'large' but constrained by a maxWidth of 600px.</p>
            `,menuOptions:[{name:"Got it",action:async t=>t.destroy()}]})}}>Max Width 600px</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"With Min Width",width:300,minWidth:400,content:w`
              <p>This modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.</p>
            `,menuOptions:[{name:"OK",action:async t=>t.destroy()}]})}}>Min Width 400px</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Button Variations</h3>
      <p>Modals can have different button configurations with proper spacing.</p>
      <div class="button-grid">
        <dees-button @click=${()=>{s1.createAndShow({heading:"Multiple Actions",content:w`
              <p>This modal demonstrates multiple buttons with proper spacing between them.</p>
            `,menuOptions:[{name:"Delete",action:async t=>t.destroy()},{name:"Cancel",action:async t=>t.destroy()},{name:"Save Changes",action:async t=>t.destroy()}]})}}>Three Buttons</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Single Action",content:w`
              <p>Sometimes you just need one button.</p>
            `,menuOptions:[{name:"Acknowledge",action:async t=>t.destroy()}]})}}>Single Button</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"No Actions",content:w`
              <p>This modal has no bottom buttons. Use the X button or click outside to close.</p>
              <p style="margin-top: 16px; color: ${p.bdTheme("#666","#999")};">This is useful for informational modals that don't require user action.</p>
            `,menuOptions:[]})}}>No Buttons</dees-button>
        
        <dees-button @click=${()=>{s1.createAndShow({heading:"Long Button Labels",content:w`
              <p>Testing button layout with longer labels.</p>
            `,menuOptions:[{name:"Discard All Changes",action:async t=>t.destroy()},{name:"Save and Continue Editing",action:async t=>t.destroy()}]})}}>Long Labels</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Responsive Behavior</h3>
      <p>All modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.</p>
      <dees-button @click=${()=>{s1.createAndShow({heading:"Responsive Modal",width:"large",showHelpButton:!0,onHelp:()=>console.log("Help requested for responsive modal"),content:w`
            <p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
            <p>The header buttons remain accessible at all viewport sizes.</p>
          `,menuOptions:[{name:"Close",action:async t=>t.destroy()}]})}}>Test Responsive</dees-button>
    </div>
  </div>
`});var Ga,w1,s1,rl=v(()=>{xi();i2();bi();la();E9t();oe();_t();Ns();At();He();Ga=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},w1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},s1=(()=>{let t=[Q("dees-modal")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[];var Ce=class extends r{static{i=this}static{let Y=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[J({})],l=[J({})],y=[D({type:String})],x=[D({type:Number})],N=[D({type:Number})],I=[D({type:Boolean})],V=[D({type:Boolean})],E=[D({attribute:!1})],H=[D({type:Boolean})],ne=[D({type:Number})],we=[J()],Ga(this,null,n,{kind:"accessor",name:"heading",static:!1,private:!1,access:{has:P=>"heading"in P,get:P=>P.heading,set:(P,F)=>{P.heading=F}},metadata:Y},s,o),Ga(this,null,u,{kind:"accessor",name:"content",static:!1,private:!1,access:{has:P=>"content"in P,get:P=>P.content,set:(P,F)=>{P.content=F}},metadata:Y},c,d),Ga(this,null,l,{kind:"accessor",name:"menuOptions",static:!1,private:!1,access:{has:P=>"menuOptions"in P,get:P=>P.menuOptions,set:(P,F)=>{P.menuOptions=F}},metadata:Y},f,b),Ga(this,null,y,{kind:"accessor",name:"width",static:!1,private:!1,access:{has:P=>"width"in P,get:P=>P.width,set:(P,F)=>{P.width=F}},metadata:Y},g,h),Ga(this,null,x,{kind:"accessor",name:"maxWidth",static:!1,private:!1,access:{has:P=>"maxWidth"in P,get:P=>P.maxWidth,set:(P,F)=>{P.maxWidth=F}},metadata:Y},M,S),Ga(this,null,N,{kind:"accessor",name:"minWidth",static:!1,private:!1,access:{has:P=>"minWidth"in P,get:P=>P.minWidth,set:(P,F)=>{P.minWidth=F}},metadata:Y},_,k),Ga(this,null,I,{kind:"accessor",name:"showCloseButton",static:!1,private:!1,access:{has:P=>"showCloseButton"in P,get:P=>P.showCloseButton,set:(P,F)=>{P.showCloseButton=F}},metadata:Y},L,A),Ga(this,null,V,{kind:"accessor",name:"showHelpButton",static:!1,private:!1,access:{has:P=>"showHelpButton"in P,get:P=>P.showHelpButton,set:(P,F)=>{P.showHelpButton=F}},metadata:Y},C,z),Ga(this,null,E,{kind:"accessor",name:"onHelp",static:!1,private:!1,access:{has:P=>"onHelp"in P,get:P=>P.onHelp,set:(P,F)=>{P.onHelp=F}},metadata:Y},T,$),Ga(this,null,H,{kind:"accessor",name:"mobileFullscreen",static:!1,private:!1,access:{has:P=>"mobileFullscreen"in P,get:P=>P.mobileFullscreen,set:(P,F)=>{P.mobileFullscreen=F}},metadata:Y},O,G),Ga(this,null,ne,{kind:"accessor",name:"contentPadding",static:!1,private:!1,access:{has:P=>"contentPadding"in P,get:P=>P.contentPadding,set:(P,F)=>{P.contentPadding=F}},metadata:Y},U,be),Ga(this,null,we,{kind:"accessor",name:"modalZIndex",static:!1,private:!1,access:{has:P=>"modalZIndex"in P,get:P=>P.modalZIndex,set:(P,F)=>{P.modalZIndex=F}},metadata:Y},j,fe),Ga(null,e={value:i},t,{kind:"class",name:i.name,metadata:Y},null,a),Ce=i=e.value,Y&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:Y})}static demo=A9t;static demoGroups=["Overlay"];static async createAndShow(Y){let P=document.body,F=new Ce;return F.heading=Y.heading,F.content=Y.content,F.menuOptions=Y.menuOptions,Y.width&&(F.width=Y.width),Y.maxWidth&&(F.maxWidth=Y.maxWidth),Y.m
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: ${Qt};
        color: ${p.bdTheme("#333","#fff")};
        will-change: transform;
      }
      .modalContainer {
        display: flex;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
      }
      .modal {
        will-change: transform;
        transform: translateY(0px) scale(0.95);
        opacity: 0;
        min-height: 120px;
        max-height: calc(100vh - 40px);
        background: ${p.bdTheme("#ffffff","#09090b")};
        border-radius: 6px;
        border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        transition: all 0.2s ease;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
        margin: 20px;
        display: flex;
        flex-direction: column;
        overscroll-behavior: contain;
      }

      /* Width variations */
      .modal.width-small {
        width: 380px;
      }

      .modal.width-medium {
        width: 560px;
      }

      .modal.width-large {
        width: 800px;
      }

      .modal.width-fullscreen {
        width: calc(100vw - 40px);
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
      }

      @media (max-width: 768px) {
        .modal {
          width: calc(100vw - 40px) !important;
          max-width: none !important;
        }
        
        /* Allow full height on mobile when content needs it */
        .modalContainer {
          padding: 10px;
        }
        
        .modal {
          margin: 10px;
          max-height: calc(100vh - 20px);
        }
        
        /* Full screen mode on mobile */
        .modal.mobile-fullscreen {
          width: 100vw !important;
          height: 100vh !important;
          max-height: 100vh !important;
          margin: 0;
          border-radius: 0;
          border: none;
        }
      }

      .modal.show {
        opacity: 1;
        transform: translateY(0px) scale(1);
      }

      .modal.show.predestroy {
        opacity: 0;
        transform: translateY(10px) scale(1);
      }

      .modal .heading {
        height: 40px;
        min-height: 40px;
        font-family: ${Qt};
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        position: relative;
        flex-shrink: 0;
      }

      .modal .heading .header-buttons {
        display: flex;
        align-items: center;
        gap: 4px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }

      .modal .heading .header-button {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
        background: transparent;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .modal .heading .header-button:hover {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .modal .heading .header-button:active {
        background: ${p.bdTheme("#e5e7eb","#3f3f46")};
      }

      .modal .heading .header-button dees-icon {
        width: 16px;
        height: 16px;
        display: block;
      }

      .modal .heading .heading-text {
        flex: 1;
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        line-height: 40px;
        padding: 0 40px;
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .modal .content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
      }
      .modal .bottomButtons {
        display: flex;
        flex-direction: row;
        border-top: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        justify-content: flex-end;
        gap: 8px;
        padding: 8px;
        flex-shrink: 0;
      }

      .modal .bottomButtons .bottomButton {
        padding: 8px 16px;
        border-radius: 4px;
        line-height: 16px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        background: ${p.bdTheme("#ffffff","#27272a")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#3f3f46")};
        color: ${p.bdTheme("#09090b","#fafafa")};
        white-space: nowrap;
      }

      .modal .bottomButtons .bottomButton:hover {
        background: ${p.bdTheme("#f4f4f5","#3f3f46")};
        border-color: ${p.bdTheme("#d1d5db","#52525b")};
      }
      .modal .bottomButtons .bottomButton:active {
        background: ${p.bdTheme("#e5e7eb","#52525b")};
      }
      .modal .bottomButtons .bottomButton:last-child {
        border-right: none;
      }

      .modal .bottomButtons .bottomButton.primary {
        background: ${p.bdTheme("#3b82f6","#3b82f6")};
        border-color: ${p.bdTheme("#3b82f6","#3b82f6")};
        color: #ffffff;
      }
      .modal .bottomButtons .bottomButton.primary:hover {
        background: ${p.bdTheme("#2563eb","#2563eb")};
        border-color: ${p.bdTheme("#2563eb","#2563eb")};
      }
      .modal .bottomButtons .bottomButton.primary:active {
        background: ${p.bdTheme("#1d4ed8","#1d4ed8")};
        border-color: ${p.bdTheme("#1d4ed8","#1d4ed8")};
      }
    `];render(){let Y=typeof this.width=="string"?`width-${this.width}`:"",P=typeof this.width=="number"?`${this.width}px`:"",F=this.maxWidth?`${this.maxWidth}px`:"",W=this.minWidth?`${this.minWidth}px`:"",B=this.mobileFullscreen?"mobile-fullscreen":"";return w`
      <style>
        ${P?`.modal { width: ${P}; }`:""}
        ${F?`.modal { max-width: ${F}; }`:""}
        ${W?`.modal { min-width: ${W}; }`:""}
      </style>
      <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
        <div class="modal ${Y} ${B}">
          <div class="heading">
            <div class="heading-text">${this.heading}</div>
            <div class="header-buttons">
              ${this.showHelpButton?w`
                <div class="header-button" @click=${this.handleHelp} title="Help">
                  <dees-icon .icon=${"lucide:helpCircle"}></dees-icon>
                </div>
              `:""}
              ${this.showCloseButton?w`
                <div class="header-button" @click=${()=>this.destroy()} title="Close">
                  <dees-icon .icon=${"lucide:x"}></dees-icon>
                </div>
              `:""}
            </div>
          </div>
          <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
          ${this.menuOptions.length>0?w`
            <div class="bottomButtons">
              ${this.menuOptions.map((K,ge)=>w`
                  <div class="bottomButton ${ge===this.menuOptions.length-1?"primary":""} ${K.name==="OK"?"ok":""}" @click=${()=>{K.action(this)}}>${K.name}</div>
                `)}
            </div>
          `:""}
        </div>
      </div>
    `}windowLayer=w1(this,fe);async firstUpdated(Y){super.firstUpdated(Y),await(await this.domtoolsPromise).convenience.smartdelay.delayFor(30),this.shadowRoot.querySelector(".modal").classList.add("show")}async handleOutsideClick(Y){Y.stopPropagation();let P=this.shadowRoot.querySelector(".modalContainer");Y.target===P&&await this.destroy()}async destroy(){let Y=await this.domtoolsPromise;this.shadowRoot.querySelector(".modal").classList.add("predestroy"),await Y.convenience.smartdelay.delayFor(200),document.body.removeChild(this),await this.windowLayer.destroy(),u1.unregister(this)}async handleHelp(){this.onHelp&&await this.onHelp()}static{w1(i,a)}};return Ce=i})()});var P9t,I9t=v(()=>{oe();P9t=()=>w`
    <dees-label .label=${"a label"}></dees-label>
  `});var aw,sl,N9t,V4=v(()=>{i2();xi();oe();I9t();He();aw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},sl=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},N9t=(()=>{let t=[Q("dees-label")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String,reflect:!0})],u=[D({type:String,reflect:!0})],l=[D({type:Boolean,reflect:!0})],aw(this,null,n,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:h=>"label"in h,get:h=>h.label,set:(h,x)=>{h.label=x}},metadata:g},s,o),aw(this,null,u,{kind:"accessor",name:"description",static:!1,private:!1,access:{has:h=>"description"in h,get:h=>h.description,set:(h,x)=>{h.description=x}},metadata:g},c,d),aw(this,null,l,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:h=>"required"in h,get:h=>h.required,set:(h,x)=>{h.required=x}},metadata:g},f,b),aw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=P9t;static demoGroups=["Layout","Input"];#e=sl(this,s,"");get label(){return this.#e}set label(g){this.#e=g}#t=(sl(this,o),sl(this,c,void 0));get description(){return this.#t}set description(g){this.#t=g}#a=(sl(this,d),sl(this,f,!1));get required(){return this.#a}set required(g){this.#a=g}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .label {
        display: inline-block;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 6px;
        cursor: default;
        user-select: none;
        letter-spacing: -0.01em;
      }

      .required {
        color: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 72.2% 50.6%)")};
        margin-left: 2px;
      }

      dees-icon {
        display: inline-block;
        font-size: 12px;
        transform: translateY(1px);
        margin-left: 4px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        cursor: help;
      }
    `];render(){return w`
      ${this.label?w`
            <div class="label">
              ${this.label}
              ${this.required?w`<span class="required">*</span>`:""}
              ${this.description?w`
                    <dees-icon .icon=${"lucide:info"}></dees-icon>
                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
                  `:w``}
            </div>
          `:w``}
    `}constructor(){super(...arguments),sl(this,b)}static{sl(i,a)}};return y=i})()});var iw,rV=v(()=>{iw="0.55.1"});var j4,Xi,R9t,nl=v(()=>{oe();_t();rV();He();j4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Xi=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},R9t=(()=>{let t=[Q("dees-workspace-monaco")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:String})],y=[D({type:Object})],x=[D({type:Boolean})],j4(this,null,n,{kind:"accessor",name:"content",static:!1,private:!1,access:{has:k=>"content"in k,get:k=>k.content,set:(k,I)=>{k.content=I}},metadata:_},s,o),j4(this,null,u,{kind:"accessor",name:"language",static:!1,private:!1,access:{has:k=>"language"in k,get:k=>k.language,set:(k,I)=>{k.language=I}},metadata:_},c,d),j4(this,null,l,{kind:"accessor",name:"filePath",static:!1,private:!1,access:{has:k=>"filePath"in k,get:k=>k.filePath,set:(k,I)=>{k.filePath=I}},metadata:_},f,b),j4(this,null,y,{kind:"accessor",name:"contentSubject",static:!1,private:!1,access:{has:k=>"contentSubject"in k,get:k=>k.contentSubject,set:(k,I)=>{k.contentSubject=I}},metadata:_},g,h),j4(this,null,x,{kind:"accessor",name:"wordWrap",static:!1,private:!1,access:{has:k=>"wordWrap"in k,get:k=>k.wordWrap,set:(k,I)=>{k.wordWrap=I}},metadata:_},M,S),j4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=()=>w`<dees-workspace-monaco></dees-workspace-monaco>`;static demoGroups=["Workspace"];static monacoDeferred;editorDeferred=Mt.smartpromise.defer();#e=Xi(this,s,`function hello() {
	alert('Hello world!');
}`);get content(){return this.#e}set content(_){this.#e=_}#t=(Xi(this,o),Xi(this,c,"typescript"));get language(){return this.#t}set language(_){this.#t=_}#a=(Xi(this,d),Xi(this,f,""));get filePath(){return this.#a}set filePath(_){this.#a=_}#i=(Xi(this,b),Xi(this,g,new Mt.smartrx.rxjs.Subject));get contentSubject(){return this.#i}set contentSubject(_){this.#i=_}#r=(Xi(this,h),Xi(this,M,"off"));get wordWrap(){return this.#r}set wordWrap(_){this.#r=_}monacoThemeSubscription=(Xi(this,S),null);isUpdatingFromExternal=!1;constructor(){super(),G2.setupDomTools()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
      }

      * {
        box-sizing: border-box;
      }

      .mainbox {
        position: relative;
        height: 100%;
        width: 100%;
      }

      #container {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    `];render(){return w`
      <div class="mainbox">
        <div id="container"></div>
      </div>
    `}async firstUpdated(_){super.firstUpdated(_);let k=this.shadowRoot.getElementById("container"),I=`https://cdn.jsdelivr.net/npm/monaco-editor@${iw}`;if(!N.monacoDeferred){N.monacoDeferred=Mt.smartpromise.defer();let C=`${I}/min/vs/loader.js`,z=document.createElement("script");z.src=C,z.onload=()=>{N.monacoDeferred.resolve()},document.head.appendChild(z)}await N.monacoDeferred.promise,window.require.config({paths:{vs:`${I}/min/vs`}}),window.require(["vs/editor/editor.main"],async()=>{let C=await this.domtoolsPromise,E=C.themeManager.goBrightBoolean?"vs":"vs-dark",T=window.monaco,$=null;if(this.filePath){let O=T.Uri.parse(`file://${this.filePath}`);$=T.editor.getModel(O),$?$.setValue(this.content):$=T.editor.createModel(this.content,this.language,O)}let H=T.editor.create(k,{model:$||void 0,value:$?void 0:this.content,language:$?void 0:this.language,theme:E,useShadowDOM:!0,fontSize:16,automaticLayout:!0,wordWrap:this.wordWrap,hover:{enabled:!0,delay:300,sticky:!0,above:!1}});this.monacoThemeSubscription=C.themeManager.themeObservable.subscribe(O=>{let G=O?"vs":"vs-dark";H.updateOptions({theme:G})}),this.editorDeferred.resolve(H)});let L=await(await fetch(`${I}/min/vs/editor/editor.main.css`)).text(),A=document.createElement("style");A.textContent=L,this.shadowRoot.append(A);let V=await this.editorDeferred.promise;V.onDidChangeModelContent(async C=>{if(this.isUpdatingFromExternal)return;let z=V.getValue();this.contentSubject.next(z),this.dispatchEvent(new CustomEvent("content-change",{detail:z,bubbles:!0,composed:!0}))}),this.contentSubject.next(V.getValue())}async updated(_){super.updated(_);let k=window.monaco;if(k){if(_.has("filePath")&&this.filePath){let I=await this.editorDeferred.promise,L=k.Uri.parse(`file://${this.filePath}`),A=k.editor.getModel(L);A?A.getValue()!==this.content&&(this.isUpdatingFromExternal=!0,A.setValue(this.content),this.isUpdatingFromExternal=!1):A=k.editor.createModel(this.content,this.language,L),I.getModel()?.uri.toString()!==L.toString()&&I.setModel(A);return}if(_.has("content")){let I=await this.editorDeferred.promise;I.getValue()!==this.content&&(this.isUpdatingFromExternal=!0,I.setValue(this.content),this.isUpdatingFromExternal=!1)}if(_.has("language")){let L=(await this.editorDeferred.promise).getModel();L&&k.editor.setModelLanguage(L,this.language)}}}async disconnectedCallback(){await super.disconnectedCallback(),this.monacoThemeSubscription&&(this.monacoThemeSubscription.unsubscribe(),this.monacoThemeSubscription=null)}async setContentExternal(_,k=!0){let I=await this.editorDeferred.promise;if(I.getValue()===_)return;let A=k?I.getPosition():null,V=k?I.getSelections():null,C=k?I.getScrollTop():0,z=k?I.getScrollLeft():0;if(this.isUpdatingFromExternal=!0,I.setValue(_),this.isUpdatingFromExternal=!1,k){if(A){let E=I.getModel(),T=E?.getLineCount()||1,$=Math.min(A.lineNumber,T),H=E?.getLineMaxColumn($)||1,O=Math.min(A.column,H);I.setPosition({lineNumber:$,column:O})}if(V&&V.length>0)try{I.setSelections(V)}catch{}I.setScrollPosition({scrollTop:C,scrollLeft:z})}}static{Xi(i,a)}};return N=i})()});var yo,ca,Fd,rw,sV=v(()=>{_1();oe();He();rl();At();V4();nl();nl();yo=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ca=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i
    <dees-input-code
      label="TypeScript Code"
      key="code"
      language="typescript"
      height="300px"
      .value=${`const greeting: string = "Hello World";
console.log(greeting);`}
    ></dees-input-code>
  `;static demoGroups=["Input","Workspace"];#e=ca(this,s,"");get value(){return this.#e}set value(C){this.#e=C}#t=(ca(this,o),ca(this,c,"typescript"));get language(){return this.#t}set language(C){this.#t=C}#a=(ca(this,d),ca(this,f,"200px"));get height(){return this.#a}set height(C){this.#a=C}#i=(ca(this,b),ca(this,g,"off"));get wordWrap(){return this.#i}set wordWrap(C){this.#i=C}#r=(ca(this,h),ca(this,M,!0));get showLineNumbers(){return this.#r}set showLineNumbers(C){this.#r=C}#s=(ca(this,S),ca(this,_,!1));get isLanguageDropdownOpen(){return this.#s}set isLanguageDropdownOpen(C){this.#s=C}#n=(ca(this,k),ca(this,L,!1));get copySuccess(){return this.#n}set copySuccess(C){this.#n=C}editorElement=(ca(this,A),null);static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      * {
        box-sizing: border-box;
      }

      :host {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      .input-wrapper,
      :host([label-position="top"]) .input-wrapper,
      :host([label-position="left"]) .input-wrapper,
      :host([label-position="right"]) .input-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }

      .code-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        overflow: hidden;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
      }

      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        gap: 8px;
      }

      .toolbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .toolbar-right {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .language-selector {
        position: relative;
      }

      .language-button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 12%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 20%)")};
        border-radius: 4px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
        transition: all 0.15s ease;
      }

      .language-button:hover {
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 15%)")};
      }

      .language-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 20%)")};
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100;
        max-height: 250px;
        overflow-y: auto;
        min-width: 140px;
      }

      .language-option {
        padding: 8px 12px;
        font-size: 12px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
        transition: background 0.15s ease;
      }

      .language-option:hover {
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 15%)")};
      }

      .language-option.selected {
        background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 20%)")};
      }

      .toolbar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 45%)","hsl(0 0% 60%)")};
        transition: all 0.15s ease;
      }

      .toolbar-button:hover {
        background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 15%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
      }

      .toolbar-button.active {
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
      }

      .toolbar-button.success {
        color: hsl(142.1 76.2% 36.3%);
      }

      .editor-wrapper {
        position: relative;
        flex: 1;
        min-height: 0;
      }

      dees-workspace-monaco {
        display: block;
        height: 100%;
      }

      .toolbar-divider {
        width: 1px;
        height: 20px;
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        margin: 0 4px;
      }

      :host([disabled]) .code-container {
        opacity: 0.5;
        pointer-events: none;
      }
    `];render(){let C=Fd.find(z=>z.key===this.language)||Fd[0];return w`
      <style>
        :host {
          height: ${this.height};
        }
      </style>
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
        <div class="code-container">
          <div class="toolbar">
            <div class="toolbar-left">
              <div class="language-selector">
                <button
                  class="language-button"
                  @click=${this.toggleLanguageDropdown}
                  @blur=${this.handleLanguageBlur}
                >
                  ${C.label}
                  <dees-icon .icon=${"lucide:ChevronDown"} iconSize="14"></dees-icon>
                </button>
                ${this.isLanguageDropdownOpen?w`
                  <div class="language-dropdown">
                    ${Fd.map(z=>w`
                      <div
                        class="language-option ${z.key===this.language?"selected":""}"
                        @mousedown=${E=>this.selectLanguage(E,z.key)}
                      >
                        ${z.label}
                      </div>
                    `)}
                  </div>
                `:""}
              </div>
            </div>
            <div class="toolbar-right">
              <button
                class="toolbar-button ${this.wordWrap==="on"?"active":""}"
                title="Word Wrap"
                @click=${this.toggleWordWrap}
              >
                <dees-icon .icon=${"lucide:WrapText"} iconSize="16"></dees-icon>
              </button>
              <button
                class="toolbar-button ${this.showLineNumbers?"active":""}"
                title="Line Numbers"
                @click=${this.toggleLineNumbers}
              >
                <dees-icon .icon=${"lucide:Hash"} iconSize="16"></dees-icon>
              </button>
              <div class="toolbar-divider"></div>
              <button
                class="toolbar-button ${this.copySuccess?"success":""}"
                title="Copy Code"
                @click=${this.copyCode}
              >
                <dees-icon .icon=${this.copySuccess?"lucide:Check":"lucide:Copy"} iconSize="16"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                title="Expand"
                @click=${this.openFullscreen}
              >
                <dees-icon .icon=${"lucide:Maximize2"} iconSize="16"></dees-icon>
              </button>
            </div>
          </div>
          <div class="editor-wrapper">
            <dees-workspace-monaco
              .content=${this.value}
              .language=${this.language}
              .wordWrap=${this.wordWrap}
              @content-change=${this.handleContentChange}
            ></dees-workspace-monaco>
          </div>
        </div>
      </div>
    `}async firstUpdated(){this.editorElement=this.shadowRoot?.querySelector("dees-workspace-monaco"),this.editorElement&&this.editorElement.contentSubject.subscribe(C=>{this.value!==C&&(this.value=C,this.changeSubject.next(this))})}toggleLanguageDropdown(){this.isLanguageDropdownOpen=!this.isLanguageDropdownOpen}handleLanguageBlur(){setTimeout(()=>{this.isLanguageDropdownOpen=!1},150)}async selectLanguage(C,z){if(C.preventDefault(),this.language=z,this.isLanguageDropdownOpen=!1,this.editorElement){this.editorElement.language=z;let T=(await this.editorElement.editorDeferred.promise).getModel();T&&window.monaco.editor.setModelLanguage(T,z)}}toggleWordWrap(){this.wordWrap=this.wordWrap==="on"?"off":"on",this.updateEditorOption("wordWrap",this.wordWrap)}toggleLineNumbers(){this.showLineNumbers=!this.showLineNumbers,this.updateEditorOption("lineNumbers",this.showLineNumbers?"on":"off")}async updateEditorOption(C,z){this.editorElement&&(await this.editorElement.editorDeferred.promise).updateOptions({[C]:z})}async copyCode(){try{await navigator.clipboard.writeText(this.value),this.copySuccess=!0,setTimeout(()=>{this.copySuccess=!1},2e3)}catch(C){console.error("Failed to copy code:",C)}}handleContentChange(C){let z=C.detail;this.value!==z&&(this.value=z,this.changeSubject.next(this))}async openFullscreen(){let C=this.value,z=null,E=this.language,T=this.wordWrap,$=this.showLineNumbers,H=!1,O=!1,G=()=>{let we=Fd.find(j=>j.key===E);return we?we.label:"TypeScript"},ne=we=>{let j=we.shadowRoot?.querySelector(".modal-toolbar");if(!j)return;let fe=j.querySelector(".language-button span");fe&&(fe.textContent=G());let Ce=j.querySelector(".wrap-btn");Ce&&Ce.classList.toggle("active",T==="on");let Y=j.querySelector(".lines-btn");Y&&Y.classList.toggle("active",$);let P=j.querySelector(".copy-btn"),F=P?.querySelector("dees-icon");P&&F&&(P.classList.toggle("success",O),F.icon=O?"lucide:Check":"lucide:Copy");let W=j.querySelector(".language-dropdown");W&&(W.style.display=H?"block":"none")},U=await s1.createAndShow({heading:this.label||"Code Editor",width:"fullscreen",contentPadding:0,content:w`
        <style>
          .modal-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
            border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
            gap: 8px;
          }
          .modal-toolbar .toolbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
          }
          .modal-toolbar .toolbar-right {
            display: flex;
            align-items: center;
            gap: 4px;
          }
          .modal-toolbar .language-selector {
            position: relative;
          }
          .modal-toolbar .language-button {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 500;
            background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 12%)")};
            border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 20%)")};
            border-radius: 4px;
            cursor: pointer;
            color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
            transition: all 0.15s ease;
          }
          .modal-toolbar .language-button:hover {
            background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 15%)")};
          }
          .modal-toolbar .language-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 4px;
            background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
            border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 20%)")};
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 100;
            max-height: 250px;
            overflow-y: auto;
            min-width: 140px;
            display: none;
          }
          .modal-toolbar .language-option {
            padding: 8px 12px;
            font-size: 12px;
            cursor: pointer;
            color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
            transition: background 0.15s ease;
          }
          .modal-toolbar .language-option:hover {
            background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 15%)")};
          }
          .modal-toolbar .language-option.selected {
            background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 20%)")};
          }
          .modal-toolbar .toolbar-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: transparent;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: ${p.bdTheme("hsl(0 0% 45%)","hsl(0 0% 60%)")};
            transition: all 0.15s ease;
          }
          .modal-toolbar .toolbar-button:hover {
            background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 15%)")};
            color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
          }
          .modal-toolbar .toolbar-button.active {
            background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
            color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
          }
          .modal-toolbar .toolbar-button.success {
            color: hsl(142.1 76.2% 36.3%);
          }
          .modal-toolbar .toolbar-divider {
            width: 1px;
            height: 20px;
            background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
            margin: 0 4px;
          }
          .modal-editor-wrapper {
            position: relative;
            height: calc(100vh - 175px);
            width: 100%;
          }
        </style>
        <div class="modal-toolbar">
          <div class="toolbar-left">
            <div class="language-selector">
              <button class="language-button">
                <span>${G()}</span>
                <dees-icon .icon=${"lucide:ChevronDown"} iconSize="14"></dees-icon>
              </button>
              <div class="language-dropdown">
                ${Fd.map(we=>w`
                  <div
                    class="language-option ${we.key===E?"selected":""}"
                    data-lang="${we.key}"
                  >
                    ${we.label}
                  </div>
                `)}
              </div>
            </div>
          </div>
          <div class="toolbar-right">
            <button class="toolbar-button wrap-btn ${T==="on"?"active":""}" title="Word Wrap">
              <dees-icon .icon=${"lucide:WrapText"} iconSize="16"></dees-icon>
            </button>
            <button class="toolbar-button lines-btn ${$?"active":""}" title="Line Numbers">
              <dees-icon .icon=${"lucide:Hash"} iconSize="16"></dees-icon>
            </button>
            <div class="toolbar-divider"></div>
            <button class="toolbar-button copy-btn" title="Copy Code">
              <dees-icon .icon=${"lucide:Copy"} iconSize="16"></dees-icon>
            </button>
          </div>
        </div>
        <div class="modal-editor-wrapper">
          <dees-workspace-monaco
            .content=${C}
            .language=${E}
            .wordWrap=${T}
          ></dees-workspace-monaco>
        </div>
      `,menuOptions:[{name:"Cancel",action:async we=>{await we.destroy()}},{name:"Save & Close",action:async we=>{if(z=we.shadowRoot?.querySelector("dees-workspace-monaco"),z){let fe=(await z.editorDeferred.promise).getValue();this.setValue(fe)}await we.destroy()}}]});await new Promise(we=>setTimeout(we,100)),z=U.shadowRoot?.querySelector("dees-workspace-monaco");let be=U.shadowRoot?.querySelector(".modal-toolbar");if(be){let we=be.querySelector(".language-button");we?.addEventListener("click",()=>{H=!H,ne(U)});let j=be.querySelectorAll(".language-option");j.forEach(P=>{P.addEventListener("click",async()=>{let F=P.dataset.lang;if(F&&z){E=F,H=!1;let B=(await z.editorDeferred.promise).getModel();B&&window.monaco.editor.setModelLanguage(B,F),j.forEach(K=>K.classList.remove("selected")),P.classList.add("selected"),ne(U)}})}),be.querySelector(".wrap-btn")?.addEventListener("click",async()=>{T=T==="on"?"off":"on",z&&(await z.editorDeferred.promise).updateOptions({wordWrap:T}),ne(U)}),be.querySelector(".lines-btn")?.addEventListener("click",async()=>{$=!$,z&&(await z.editorDeferred.promise).updateOptions({lineNumbers:$?"on":"off"}),ne(U)}),be.querySelector(".copy-btn")?.addEventListener("click",async()=>{if(z){let F=(await z.editorDeferred.promise).getValue();try{await navigator.clipboard.writeText(F),O=!0,ne(U),setTimeout(()=>{O=!1,ne(U)},2e3)}catch(W){console.error("Failed to copy code:",W)}}}),document.addEventListener("click",P=>{H&&!we?.contains(P.target)&&(H=!1,ne(U))},{once:!0})}}getValue(){return this.value}setValue(C){this.value=C,this.editorElement&&(this.editorElement.content=C,this.editorElement.editorDeferred.promise.then(z=>{z.getValue()!==C&&z.setValue(C)})),this.changeSubject.next(this)}static{ca(i,a)}};return V=i})()});var F9t,O9t=v(()=>{oe();x1();h2();nV();F9t=()=>w`
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .demo-output {
        margin-top: 16px;
        padding: 12px;
        background: rgba(0, 105, 242, 0.1);
        border-radius: 4px;
        font-size: 14px;
        font-family: monospace;
      }
      
      .date-group {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-datepicker");e&&e.addEventListener("change",a=>{console.log("Basic date selected:",a.target.value)})}}>
      <dees-panel .title=${"Basic Date Picker"} .subtitle=${"Simple date selection without time"}>
        <dees-input-datepicker
          label="Select Date"
          description="Choose a date from the calendar"
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector('dees-input-datepicker[label="Event Date & Time"]'),a=t.querySelector('dees-input-datepicker[label="Appointment"]');e&&e.addEventListener("change",i=>{let r=i.target.value;console.log("24h format datetime:",r)}),a&&a.addEventListener("change",i=>{let r=i.target.value;console.log("12h format datetime:",r)})}}>
      <dees-panel .title=${"Date and Time Selection"} .subtitle=${"Date pickers with time selection in different formats"}>
        <dees-input-datepicker
          label="Event Date & Time"
          description="Select both date and time (24-hour format)"
          .enableTime=${!0}
          timeFormat="24h"
        ></dees-input-datepicker>
        
        <dees-input-datepicker
          label="Appointment"
          description="Date and time with AM/PM selector (15-minute increments)"
          .enableTime=${!0}
          timeFormat="12h"
          .minuteIncrement=${15}
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-datepicker").forEach(a=>{a.addEventListener("change",i=>{let r=i.target;console.log(`${r.label} value:`,r.value);let n=r.shadowRoot?.querySelector(".date-input");n&&console.log(`${r.label} formatted:`,n.value)})})}}>
      <dees-panel .title=${"Timezone Support"} .subtitle=${"Date and time selection with timezone awareness"}>
        <dees-input-datepicker
          label="Meeting Time (with Timezone)"
          description="Select a date/time and timezone for the meeting"
          .enableTime=${!0}
          .enableTimezone=${!0}
          timeFormat="24h"
          timezone="America/New_York"
        ></dees-input-datepicker>
        
        <dees-input-datepicker
          label="Global Event Schedule"
          description="Schedule an event across different timezones"
          .enableTime=${!0}
          .enableTimezone=${!0}
          timeFormat="12h"
          timezone="Europe/London"
          .minuteIncrement=${30}
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-datepicker");e&&e.addEventListener("change",a=>{let i=a.target.value;if(i){let r=new Date(i),n=new Date,s=Math.floor((r.getTime()-n.getTime())/(1e3*60*60*24));console.log(`Selected date is ${s} days from today`)}})}}>
      <dees-panel .title=${"Date Range Constraints"} .subtitle=${"Limit selectable dates with min and max values"}>
        <dees-input-datepicker
          label="Future Date Only"
          description="Can only select dates from today to 90 days in the future"
          .minDate=${new Date().toISOString()}
          .maxDate=${new Date(Date.now()+2160*60*60*1e3).toISOString()}
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e={"DD/MM/YYYY":"European","MM/DD/YYYY":"US","YYYY-MM-DD":"ISO"};t.querySelectorAll("dees-input-datepicker").forEach(i=>{i.addEventListener("change",r=>{let n=r.target,s=n.shadowRoot?.querySelector(".date-input");s&&console.log(`${n.label} format:`,s.value)})})}}>
      <dees-panel .title=${"Date Formats"} .subtitle=${"Different date display formats for various regions"}>
        <div class="date-group">
          <dees-input-datepicker
            label="European Format"
            dateFormat="DD/MM/YYYY"
            .value=${new Date().toISOString()}
          ></dees-input-datepicker>
          
          <dees-input-datepicker
            label="US Format"
            dateFormat="MM/DD/YYYY"
            .value=${new Date().toISOString()}
          ></dees-input-datepicker>
          
          <dees-input-datepicker
            label="ISO Format"
            dateFormat="YYYY-MM-DD"
            .value=${new Date().toISOString()}
          ></dees-input-datepicker>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-datepicker[required]");e&&e.addEventListener("blur",()=>{e.getValue()||console.log("Required date field is empty")})}}>
      <dees-panel .title=${"Form States"} .subtitle=${"Required and disabled states"}>
        <dees-input-datepicker
          label="Birth Date"
          description="This field is required"
          .required=${!0}
          placeholder="Select your birth date"
        ></dees-input-datepicker>
        
        <dees-input-datepicker
          label="Disabled Date"
          description="This field cannot be edited"
          .disabled=${!0}
          .value=${new Date().toISOString()}
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector('dees-input-datepicker[label="US Calendar"]'),a=t.querySelector('dees-input-datepicker[label="EU Calendar"]');e&&console.log("US Calendar starts on Sunday (0)"),a&&console.log("EU Calendar starts on Monday (1)")}}>
      <dees-panel .title=${"Calendar Customization"} .subtitle=${"Different week start days for various regions"}>
        <div class="date-group">
          <dees-input-datepicker
            label="US Calendar"
            description="Week starts on Sunday"
            .weekStartsOn=${0}
          ></dees-input-datepicker>
          
          <dees-input-datepicker
            label="EU Calendar"
            description="Week starts on Monday"
            .weekStartsOn=${1}
          ></dees-input-datepicker>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=()=>{let i=[],r=new Date,n=r.getFullYear(),s=r.getMonth(),o=new Date(n,s,1);for(;o.getMonth()===s;)(o.getDay()===0||o.getDay()===6)&&i.push(new Date(o).toISOString()),o.setDate(o.getDate()+1);return i},a=t.querySelector("dees-input-datepicker");a&&(a.disabledDates=e(),console.log("Disabled weekend dates for current month"))}}>
      <dees-panel .title=${"Disabled Dates"} .subtitle=${"Calendar with specific dates disabled (weekends in current month)"}>
        <dees-input-datepicker
          label="Availability Calendar"
          description="Weekends are disabled for the current month"
        ></dees-input-datepicker>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=new Date,a=e.getMonth(),i=e.getFullYear(),r=[{date:`${i}-${(a+1).toString().padStart(2,"0")}-${e.getDate().toString().padStart(2,"0")}`,title:"Team Meeting",type:"info",count:2},{date:`${i}-${(a+1).toString().padStart(2,"0")}-${(e.getDate()+1).toString().padStart(2,"0")}`,title:"Project Deadline",type:"warning"},{date:`${i}-${(a+1).toString().padStart(2,"0")}-${(e.getDate()+2).toString().padStart(2,"0")}`,title:"Release Day",type:"success"},{date:`${i}-${(a+1).toString().padStart(2,"0")}-${(e.getDate()+5).toString().padStart(2,"0")}`,title:"Urgent Fix Required",type:"error"},{date:`${i}-${(a+1).toString().padStart(2,"0")}-${(e.getDate()+7).toString().padStart(2,"0")}`,title:"Multiple Events Today",type:"info",count:5},{date:`${i}-${(a+2).toString().padStart(2,"0")}-15`,title:"Future Planning Session",type:"info"}],n=t.querySelector("dees-input-datepicker");n&&(n.events=r,console.log("Calendar events loaded:",r))}}>
      <dees-panel .title=${"Calendar with Events"} .subtitle=${"Visual feedback for scheduled events"}>
        <dees-input-datepicker
          label="Event Calendar"
          description="Days with colored dots have events. Hover to see details."
        ></dees-input-datepicker>
        
        <div class="demo-output" style="margin-top: 16px;">
          <strong>Event Legend:</strong><br>
          <span style="color: #0969da;">● Info</span> | 
          <span style="color: #d29922;">● Warning</span> | 
          <span style="color: #2ea043;">● Success</span> | 
          <span style="color: #cf222e;">● Error</span><br>
          <em>Days with more than 3 events show a count badge</em>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-datepicker"),a=t.querySelector("#event-output");e&&a&&(e.addEventListener("change",i=>{let r=i.target,n=r.value;if(n){let s=new Date(n),u=r.shadowRoot?.querySelector(".date-input")?.value||"N/A";a.innerHTML=`
              <strong>Event triggered!</strong><br>
              ISO Value: ${n}<br>
              Formatted: ${u}<br>
              Date object: ${s.toLocaleString()}
            `}else a.innerHTML="<em>Date cleared</em>"}),e.addEventListener("blur",()=>{console.log("Datepicker lost focus")}))}}>
      <dees-panel .title=${"Event Handling"} .subtitle=${"Interactive demonstration of change events"}>
        <dees-input-datepicker
          label="Event Demo"
          description="Select a date to see the event details"
        ></dees-input-datepicker>
        
        <div id="event-output" class="demo-output">
          <em>Select a date to see event details...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var B9t,H9t=v(()=>{oe();_1();B9t=[...Ze.baseStyles,p.defaultStyles,X`
      :host {
        display: block;
        position: relative;
      }

      .input-container {
        position: relative;
        width: 100%;
      }

      .date-input {
        width: 100%;
        height: 40px;
        padding: 0 12px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.5;
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
        cursor: pointer;
        transition: all 0.2s ease;
        outline: none;
        font-family: inherit;
      }

      .date-input::placeholder {
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .date-input:hover:not(:disabled) {
        border-color: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
      }

      .date-input:focus,
      .date-input.open {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")},
                    0 0 0 4px ${p.bdTheme("hsl(222.2 47.4% 11.2% / 0.1)","hsl(210 20% 98% / 0.1)")};
      }

      .date-input:disabled {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        cursor: not-allowed;
        opacity: 0.5;
      }

      /* Icon container using flexbox for better positioning */
      .icon-container {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px;
        pointer-events: none;
      }

      .icon-container > * {
        pointer-events: auto;
      }

      .calendar-icon {
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .clear-button {
        width: 20px;
        height: 20px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        transition: opacity 0.2s ease, background-color 0.2s ease;
        padding: 0;
        flex-shrink: 0;
      }

      .clear-button:hover {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
      }

      .clear-button:disabled {
        display: none;
      }

      /* Calendar Popup Styles */
      .calendar-popup {
        will-change: transform, opacity;
        pointer-events: none;
        transition: all 0.2s ease;
        opacity: 0;
        transform: translateY(-4px);
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        box-shadow: ${p.bdTheme("0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1)","0 10px 15px -3px hsl(0 0% 0% / 0.2), 0 4px 6px -4px hsl(0 0% 0% / 0.2)")};
        border-radius: 6px;
        padding: 12px;
        position: absolute;
        user-select: none;
        margin-top: 4px;
        z-index: 50;
        left: 0;
        min-width: 280px;
      }

      .calendar-popup.top {
        bottom: calc(100% + 4px);
        top: auto;
        margin-top: 0;
        margin-bottom: 4px;
        transform: translateY(4px);
      }

      .calendar-popup.bottom {
        top: 100%;
      }

      .calendar-popup.show {
        pointer-events: all;
        transform: translateY(0);
        opacity: 1;
      }

      /* Calendar Header */
      .calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        gap: 8px;
      }

      .month-year-display {
        font-weight: 500;
        font-size: 14px;
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
        flex: 1;
        text-align: center;
      }

      .nav-button {
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        transition: all 0.2s ease;
      }

      .nav-button:hover {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
      }

      .nav-button:active {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      /* Weekday headers */
      .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0;
        margin-bottom: 4px;
      }

      .weekday {
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        padding: 0 0 8px 0;
      }

      /* Days grid */
      .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
      }

      .day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.2s ease;
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
        border: none;
        width: 36px;
        height: 36px;
        background: transparent;
      }

      .day:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
      }

      .day.other-month {
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        opacity: 0.5;
      }

      .day.today {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        font-weight: 500;
      }

      .day.selected {
        background: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
        color: ${p.bdTheme("hsl(210 20% 98%)","hsl(222.2 47.4% 11.2%)")};
        font-weight: 500;
      }

      .day.disabled {
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
        cursor: not-allowed;
        opacity: 0.3;
      }

      /* Event indicators */
      .day.has-event {
        position: relative;
      }

      .event-indicator {
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 2px;
        justify-content: center;
      }

      .event-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .event-dot.info {
        background: ${p.bdTheme("hsl(211 70% 52%)","hsl(211 70% 62%)")};
      }

      .event-dot.warning {
        background: ${p.bdTheme("hsl(45 90% 45%)","hsl(45 90% 55%)")};
      }

      .event-dot.success {
        background: ${p.bdTheme("hsl(142 69% 45%)","hsl(142 69% 55%)")};
      }

      .event-dot.error {
        background: ${p.bdTheme("hsl(0 72% 51%)","hsl(0 72% 61%)")};
      }

      .event-count {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: ${p.bdTheme("hsl(0 72% 51%)","hsl(0 72% 61%)")};
        color: white;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }

      /* Tooltip for event details */
      .event-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 0%)")};
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .event-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
      }

      .day.has-event:hover .event-tooltip {
        opacity: 1;
      }

      /* Time selector */
      .time-selector {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      .time-selector-title {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 8px;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .time-inputs {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .time-input {
        width: 65px;
        height: 36px;
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
        text-align: center;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
        transition: all 0.2s ease;
      }

      .time-input:hover {
        border-color: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
      }

      .time-input:focus {
        outline: none;
        border-color: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(222.2 47.4% 11.2% / 0.1)","hsl(210 20% 98% / 0.1)")};
      }

      .time-separator {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .am-pm-selector {
        display: flex;
        gap: 4px;
        margin-left: 8px;
      }

      .am-pm-button {
        padding: 6px 12px;
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .am-pm-button.selected {
        background: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
        color: ${p.bdTheme("hsl(210 20% 98%)","hsl(222.2 47.4% 11.2%)")};
        border-color: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
      }

      .am-pm-button:hover:not(.selected) {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        border-color: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      /* Action buttons */
      .calendar-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      .action-button {
        flex: 1;
        height: 36px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .today-button {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
      }

      .today-button:hover {
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
        border-color: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      .today-button:active {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      .clear-button {
        background: transparent;
        border: 1px solid transparent;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .clear-button:hover {
        background: ${p.bdTheme("hsl(0 72.2% 50.6% / 0.1)","hsl(0 62.8% 30.6% / 0.1)")};
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
      }

      .clear-button:active {
        background: ${p.bdTheme("hsl(0 72.2% 50.6% / 0.2)","hsl(0 62.8% 30.6% / 0.2)")};
      }

      /* Timezone selector */
      .timezone-selector {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
      }

      .timezone-selector-title {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 8px;
        color: ${p.bdTheme("hsl(220 8.9% 46.1%)","hsl(215 20.2% 65.1%)")};
      }

      .timezone-select {
        width: 100%;
        height: 36px;
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(224 71.4% 4.1%)")};
        color: ${p.bdTheme("hsl(224 71.4% 4.1%)","hsl(210 20% 98%)")};
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .timezone-select:hover {
        border-color: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(217.2 32.6% 17.5%)")};
        background: ${p.bdTheme("hsl(210 20% 98%)","hsl(215 27.9% 16.9%)")};
      }

      .timezone-select:focus {
        outline: none;
        border-color: ${p.bdTheme("hsl(222.2 47.4% 11.2%)","hsl(210 20% 98%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(222.2 47.4% 11.2% / 0.1)","hsl(210 20% 98% / 0.1)")};
      }
    `]});var q9t,V9t=v(()=>{oe();q9t=t=>{let e=["January","February","March","April","May","June","July","August","September","October","November","December"],a=t.weekStartsOn===1?["Mo","Tu","We","Th","Fr","Sa","Su"]:["Su","Mo","Tu","We","Th","Fr","Sa"],i=t.getDaysInMonth(),r=t.selectedHour<12,n=t.getTimezones();return w`
        <div class="input-wrapper">
          <dees-label .label=${t.label} .description=${t.description} .required=${t.required}></dees-label>
          <div class="input-container">
            <input
              type="text"
              class="date-input ${t.isOpened?"open":""}"
              .value=${t.formatDate(t.value)}
              .placeholder=${t.placeholder}
              ?disabled=${t.disabled}
              @click=${t.toggleCalendar}
              @keydown=${t.handleKeydown}
              @input=${t.handleManualInput}
              @blur=${t.handleInputBlur}
              style="padding-right: ${t.value?"64px":"40px"}"
            />
            <div class="icon-container">
              ${t.value&&!t.disabled?w`
                <button class="clear-button" @click=${t.clearValue} title="Clear">
                  <dees-icon icon="lucide:x" iconSize="14"></dees-icon>
                </button>
              `:""}
              <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
            </div>
          
            <!-- Calendar Popup -->
            <div class="calendar-popup ${t.isOpened?"show":""} ${t.opensToTop?"top":"bottom"}">
              <!-- Month/Year Navigation -->
              <div class="calendar-header">
                <button class="nav-button" @click=${t.previousMonth}>
                  <dees-icon icon="lucide:chevronLeft" iconSize="16"></dees-icon>
                </button>
                <div class="month-year-display">
                  ${e[t.viewDate.getMonth()]} ${t.viewDate.getFullYear()}
                </div>
                <button class="nav-button" @click=${t.nextMonth}>
                  <dees-icon icon="lucide:chevronRight" iconSize="16"></dees-icon>
                </button>
              </div>

              <!-- Weekday Headers -->
              <div class="weekdays">
                ${a.map(s=>w`<div class="weekday">${s}</div>`)}
              </div>

              <!-- Days Grid -->
              <div class="days-grid">
                ${i.map(s=>{let o=t.isToday(s),u=t.isSelected(s),c=s.getMonth()!==t.viewDate.getMonth(),d=t.isDisabled(s),l=t.getEventsForDate(s),f=l.length>0,b=l.reduce((y,g)=>y+(g.count||1),0);return w`
                    <div 
                      class="day ${c?"other-month":""} ${o?"today":""} ${u?"selected":""} ${d?"disabled":""} ${f?"has-event":""}"
                      @click=${()=>!d&&t.selectDate(s)}
                    >
                      ${s.getDate()}
                      ${f?w`
                        ${b>3?w`
                          <div class="event-count">${b}</div>
                        `:w`
                          <div class="event-indicator">
                            ${l.slice(0,3).map(y=>w`
                              <div class="event-dot ${y.type||"info"}"></div>
                            `)}
                          </div>
                        `}
                        ${l[0].title?w`
                          <div class="event-tooltip">
                            ${l[0].title}
                            ${b>1?w` (+${b-1} more)`:""}
                          </div>
                        `:""}
                      `:""}
                    </div>
                  `})}
              </div>

              <!-- Time Selector -->
              ${t.enableTime?w`
                <div class="time-selector">
                  <div class="time-selector-title">Time</div>
                  <div class="time-inputs">
                    <input 
                      type="number" 
                      class="time-input" 
                      .value=${t.timeFormat==="12h"?(t.selectedHour===0?12:t.selectedHour>12?t.selectedHour-12:t.selectedHour).toString().padStart(2,"0"):t.selectedHour.toString().padStart(2,"0")}
                      @input=${s=>t.handleHourInput(s)}
                      min="${t.timeFormat==="12h"?1:0}"
                      max="${t.timeFormat==="12h"?12:23}"
                    />
                    <span class="time-separator">:</span>
                    <input 
                      type="number" 
                      class="time-input" 
                      .value=${t.selectedMinute.toString().padStart(2,"0")}
                      @input=${s=>t.handleMinuteInput(s)}
                      min="0"
                      max="59"
                      step="${t.minuteIncrement||1}"
                    />
                    ${t.timeFormat==="12h"?w`
                      <div class="am-pm-selector">
                        <button 
                          class="am-pm-button ${r?"selected":""}"
                          @click=${()=>t.setAMPM("am")}
                        >
                          AM
                        </button>
                        <button 
                          class="am-pm-button ${r?"":"selected"}"
                          @click=${()=>t.setAMPM("pm")}
                        >
                          PM
                        </button>
                      </div>
                    `:""}
                  </div>
                </div>
              `:""}

              <!-- Timezone Selector -->
              ${t.enableTimezone?w`
                <div class="timezone-selector">
                  <div class="timezone-selector-title">Timezone</div>
                  <select 
                    class="timezone-select" 
                    .value=${t.timezone}
                    @change=${s=>t.handleTimezoneChange(s)}
                  >
                    ${n.map(s=>w`
                      <option value="${s.value}" ?selected=${s.value===t.timezone}>
                        ${s.label}
                      </option>
                    `)}
                  </select>
                </div>
              `:""}

              <!-- Action Buttons -->
              <div class="calendar-actions">
                <button class="action-button today-button" @click=${t.selectToday}>
                  Today
                </button>
                <button class="action-button clear-button" @click=${t.clear}>
                  Clear
                </button>
              </div>
            </div>
          </div>
        </div>
      `}});var X1,kt,sw,nV=v(()=>{oe();_1();O9t();H9t();V9t();At();V4();X1=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},kt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},sw=(()=>{let t=[Q("dees-input-datepicker")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[],$e,q=[],R=[],te,me=[],ue=[],_e,he=[],ie=[],ke,Re=[],Ue=[];var xe=class extends r{static{i=this}static{let ae=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:Boolean})],l=[D({type:String})],y=[D({type:Number})],x=[D({type:String})],N=[D({type:String})],I=[D({type:String})],V=[D({type:Array})],E=[D({type:Number})],H=[D({type:String})],ne=[D({type:Boolean})],we=[D({type:String})],Ce=[D({type:Array})],F=[J()],K=[J()],$e=[J()],te=[J()],_e=[J()],ke=[J()],X1(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:re=>"value"in re,get:re=>re.value,set:(re,ye)=>{re.value=ye}},metadata:ae},s,o),X1(this,null,u,{kind:"accessor",name:"enableTime",static:!1,private:!1,access:{has:re=>"enableTime"in re,get:re=>re.enableTime,set:(re,ye)=>{re.enableTime=ye}},metadata:ae},c,d),X1(this,null,l,{kind:"accessor",name:"timeFormat",static:!1,private:!1,access:{has:re=>"timeFormat"in re,get:re=>re.timeFormat,set:(re,ye)=>{re.timeFormat=ye}},metadata:ae},f,b),X1(this,null,y,{kind:"accessor",name:"minuteIncrement",static:!1,private:!1,access:{has:re=>"minuteIncrement"in re,get:re=>re.minuteIncrement,set:(re,ye)=>{re.minuteIncrement=ye}},metadata:ae},g,h),X1(this,null,x,{kind:"accessor",name:"dateFormat",static:!1,private:!1,access:{has:re=>"dateFormat"in re,get:re=>re.dateFormat,set:(re,ye)=>{re.dateFormat=ye}},metadata:ae},M,S),X1(this,null,N,{kind:"accessor",name:"minDate",static:!1,private:!1,access:{has:re=>"minDate"in re,get:re=>re.minDate,set:(re,ye)=>{re.minDate=ye}},metadata:ae},_,k),X1(this,null,I,{kind:"accessor",name:"maxDate",static:!1,private:!1,access:{has:re=>"maxDate"in re,get:re=>re.maxDate,set:(re,ye)=>{re.maxDate=ye}},metadata:ae},L,A),X1(this,null,V,{kind:"accessor",name:"disabledDates",static:!1,private:!1,access:{has:re=>"disabledDates"in re,get:re=>re.disabledDates,set:(re,ye)=>{re.disabledDates=ye}},metadata:ae},C,z),X1(this,null,E,{kind:"accessor",name:"weekStartsOn",static:!1,private:!1,access:{has:re=>"weekStartsOn"in re,get:re=>re.weekStartsOn,set:(re,ye)=>{re.weekStartsOn=ye}},metadata:ae},T,$),X1(this,null,H,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:re=>"placeholder"in re,get:re=>re.placeholder,set:(re,ye)=>{re.placeholder=ye}},metadata:ae},O,G),X1(this,null,ne,{kind:"accessor",name:"enableTimezone",static:!1,private:!1,access:{has:re=>"enableTimezone"in re,get:re=>re.enableTimezone,set:(re,ye)=>{re.enableTimezone=ye}},metadata:ae},U,be),X1(this,null,we,{kind:"accessor",name:"timezone",static:!1,private:!1,access:{has:re=>"timezone"in re,get:re=>re.timezone,set:(re,ye)=>{re.timezone=ye}},metadata:ae},j,fe),X1(this,null,Ce,{kind:"accessor",name:"events",static:!1,private:!1,access:{has:re=>"events"in re,get:re=>r
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .horizontal-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
      .input-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      
      @media (max-width: 768px) {
        .grid-layout {
          grid-template-columns: 1fr;
        }
      }
      
      .interactive-section {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
      }
      
      .output-text {
        font-family: monospace;
        font-size: 13px;
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(210 40% 80%)")};
        padding: 8px;
        background: ${p.bdTheme("hsl(210 40% 98%)","hsl(215 20.2% 11.8%)")};
        border-radius: 4px;
        min-height: 24px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-text").forEach(i=>{i.addEventListener("changeSubject",r=>{console.log(`Input "${i.label}" changed to:`,i.getValue())}),i.addEventListener("blur",()=>{console.log(`Input "${i.label}" lost focus`)})}),t.querySelector('dees-input-text[key="password"]')&&console.log("Password input includes visibility toggle")}}>
      <dees-panel .title=${"Basic Text Inputs"} .subtitle=${"Standard text inputs with labels and descriptions"}>
        <div class="input-group">
          <dees-input-text
            .label=${"Username"}
            .value=${"johndoe"}
            .key=${"username"}
          ></dees-input-text>

          <dees-input-text
            .label=${"Email Address"}
            .value=${"john@example.com"}
            .description=${"We will never share your email with anyone"}
            .key=${"email"}
          ></dees-input-text>

          <dees-input-text
            .label=${"Password"}
            .isPasswordBool=${!0}
            .value=${"secret123"}
            .key=${"password"}
          ></dees-input-text>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-text").forEach(r=>{let n=window.getComputedStyle(r);console.log(`Horizontal input "${r.label}" display:`,n.display)});let a=t.querySelector('dees-input-text[key="firstName"]'),i=t.querySelector('dees-input-text[key="lastName"]');if(a&&i){let r=()=>{let n=a.getValue(),s=i.getValue();console.log(`Full name: ${n} ${s}`)};a.addEventListener("changeSubject",r),i.addEventListener("changeSubject",r)}}}>
      <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Multiple inputs arranged horizontally for compact forms"}>
        <div class="horizontal-group">
          <dees-input-text 
            .label=${"First Name"} 
            .value=${"John"} 
            .layoutMode=${"horizontal"}
            .key=${"firstName"}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${"Last Name"} 
            .value=${"Doe"} 
            .layoutMode=${"horizontal"}
            .key=${"lastName"}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${"Age"} 
            .value=${"28"} 
            .layoutMode=${"horizontal"}
            .key=${"age"}
          ></dees-input-text>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-text").forEach(i=>{let r=i.labelPosition;console.log(`Input "${i.label}" has label position: ${r}`)});let a=t.querySelectorAll('dees-input-text[labelPosition="left"]');a.length>0&&console.log(`${a.length} inputs have left-aligned labels for inline layout`)}}>
      <dees-panel .title=${"Label Positions"} .subtitle=${"Different label positioning options for various layouts"}>
        <div class="input-group">
          <dees-input-text
            .label=${"Label on Top (Default)"}
            .value=${"Standard layout"}
            .labelPosition=${"top"}
          ></dees-input-text>

          <dees-input-text
            .label=${"Label on Left"}
            .value=${"Inline label"}
            .labelPosition=${"left"}
          ></dees-input-text>

          <div class="grid-layout">
          <dees-input-text 
            .label=${"City"} 
            .value=${"New York"} 
            .labelPosition=${"left"}
          ></dees-input-text>
          
          <dees-input-text
            .label=${"ZIP Code"}
            .value=${"10001"}
            .labelPosition=${"left"}
          ></dees-input-text>
        </div>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-text[required]"),a=t.querySelector("dees-input-text[disabled]"),i=t.querySelector('dees-input-text[validationState="invalid"]');e&&e.addEventListener("blur",()=>{e.getValue()||console.log("Required field is empty!")}),a&&console.log("Disabled input cannot be edited"),i&&(console.log("Error input shows validation message:",i.validationText),i.addEventListener("changeSubject",()=>{let r=i.getValue();r.includes("@")&&r.includes(".")&&(i.validationState="valid",i.validationText="",console.log("Email validation passed!"))}))}}>
      <dees-panel .title=${"Validation & States"} .subtitle=${"Different validation states and input configurations"}>
        <div class="input-group">
          <dees-input-text
            .label=${"Required Field"}
            .required=${!0}
            .key=${"requiredField"}
          ></dees-input-text>

          <dees-input-text
            .label=${"Disabled Field"}
            .value=${"Cannot edit this"}
            .disabled=${!0}
          ></dees-input-text>

          <dees-input-text
            .label=${"Field with Error"}
            .value=${"invalid@"}
            .validationText=${"Please enter a valid email address"}
            .validationState=${"invalid"}
          ></dees-input-text>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-text[isPasswordBool]").forEach(a=>{let i=()=>{let r=a.shadowRoot?.querySelector("input");r&&console.log(`Password field "${a.label}" type:`,r.type)};if(a.shadowRoot){let r=new MutationObserver(i),n=a.shadowRoot.querySelector("input");n&&r.observe(n,{attributes:!0,attributeFilter:["type"]})}})}}>
      <dees-panel .title=${"Advanced Features"} .subtitle=${"Password visibility toggle and other advanced features"}>
        <div class="input-group">
          <dees-input-text
            .label=${"Password with Toggle"}
            .isPasswordBool=${!0}
            .value=${"mySecurePassword123"}
            .description=${"Click the eye icon to show/hide password"}
          ></dees-input-text>

          <dees-input-text
            .label=${"API Key"}
            .isPasswordBool=${!0}
            .value=${"sk-1234567890abcdef"}
            .description=${"Keep this key secure and never share it"}
          ></dees-input-text>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-text"),a=t.querySelector("#text-input-output");if(e&&a){e.addEventListener("changeSubject",r=>{let n=r.detail.getValue();a.textContent=`Current value: "${n}"`}),e.addEventListener("focus",()=>{console.log("Input focused")}),e.addEventListener("blur",()=>{console.log("Input blurred")});let i=0;e.addEventListener("keydown",()=>{i++,console.log(`Keypress count: ${i}`)})}}}>
      <dees-panel .title=${"Interactive Example"} .subtitle=${"Try typing in the inputs to see real-time value changes"}>
        <dees-input-text 
          .label=${"Dynamic Input"} 
          .placeholder=${"Type something here..."}
        ></dees-input-text>
        
        <div class="interactive-section">
          <div id="text-input-output" class="output-text">Current value: ""</div>
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var ol,Ya,nw,xo=v(()=>{xi();_1();U9t();la();oe();He();ol=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ya=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},nw=(()=>{let t=[Q("dees-input-text")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[];var I=class extends r{static{i=this}static{let L=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String,reflect:!0})],u=[D({type:Boolean,reflect:!0})],l=[D({type:Boolean,reflect:!0})],y=[D({type:Boolean,reflect:!0})],x=[D({reflect:!0})],N=[D({})],ol(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:A=>"value"in A,get:A=>A.value,set:(A,V)=>{A.value=V}},metadata:L},s,o),ol(this,null,u,{kind:"accessor",name:"isPasswordBool",static:!1,private:!1,access:{has:A=>"isPasswordBool"in A,get:A=>A.isPasswordBool,set:(A,V)=>{A.isPasswordBool=V}},metadata:L},c,d),ol(this,null,l,{kind:"accessor",name:"showPasswordBool",static:!1,private:!1,access:{has:A=>"showPasswordBool"in A,get:A=>A.showPasswordBool,set:(A,V)=>{A.showPasswordBool=V}},metadata:L},f,b),ol(this,null,y,{kind:"accessor",name:"validationState",static:!1,private:!1,access:{has:A=>"validationState"in A,get:A=>A.validationState,set:(A,V)=>{A.validationState=V}},metadata:L},g,h),ol(this,null,x,{kind:"accessor",name:"validationText",static:!1,private:!1,access:{has:A=>"validationText"in A,get:A=>A.validationText,set:(A,V)=>{A.validationText=V}},metadata:L},M,S),ol(this,null,N,{kind:"accessor",name:"validationFunction",static:!1,private:!1,access:{has:A=>"validationFunction"in A,get:A=>A.validationFunction,set:(A,V)=>{A.validationFunction=V}},metadata:L},_,k),ol(null,e={value:i},t,{kind:"class",name:i.name,metadata:L},null,a),I=i=e.value,L&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:L})}static demo=j9t;static demoGroups=["Input"];#e=Ya(this,s,"");get value(){return this.#e}set value(L){this.#e=L}#t=(Ya(this,o),Ya(this,c,!1));get isPasswordBool(){return this.#t}set isPasswordBool(L){this.#t=L}#a=(Ya(this,d),Ya(this,f,!1));get showPasswordBool(){return this.#a}set showPasswordBool(L){this.#a=L}#i=(Ya(this,b),Ya(this,g,void 0));get validationState(){return this.#i}set validationState(L){this.#i=L}#r=(Ya(this,h),Ya(this,M,""));get validationText(){return this.#r}set validationText(L){this.#r=L}#s=(Ya(this,S),Ya(this,_,void 0));get validationFunction(){return this.#s}set validationFunction(L){this.#s=L}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      * {
        box-sizing: border-box;
      }

      :host {
        position: relative;
        z-index: auto;
        font-family: ${Qt};
      }

      .maincontainer {
        position: relative;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      input {
        display: flex;
        height: 40px;
        width: 100%;
        padding: 0 12px;
        font-size: 14px;
        line-height: 40px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
        cursor: text;
        font-family: inherit;
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
      }

      input::placeholder {
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      }

      input:hover:not(:disabled):not(:focus) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      input:focus {
        outline: none;
        border-color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 9% / 0.05)","hsl(0 0% 98% / 0.05)")};
      }

      input:disabled {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        cursor: not-allowed;
        opacity: 0.5;
      }

      /* Password toggle button */
      .showPassword {
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        transition: all 0.15s ease;
        border-radius: 0 5px 5px 0;
      }

      .showPassword:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      /* Validation styles */
      .validationContainer {
        margin-top: 4px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 4px;
        transition: all 0.2s ease;
        overflow: hidden;
      }

      .validationContainer.error {
        background: ${p.bdTheme("hsl(0 84.2% 60.2% / 0.1)","hsl(0 72.2% 50.6% / 0.1)")};
        color: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 72.2% 50.6%)")};
      }

      .validationContainer.warn {
        background: ${p.bdTheme("hsl(25 95% 53% / 0.1)","hsl(25 95% 63% / 0.1)")};
        color: ${p.bdTheme("hsl(25 95% 53%)","hsl(25 95% 63%)")};
      }

      .validationContainer.valid {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3% / 0.1)","hsl(142.1 70.6% 45.3% / 0.1)")};
        color: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
      }

      /* Error state for input */
      :host([validation-state="invalid"]) input {
        border-color: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 72.2% 50.6%)")};
      }

      :host([validation-state="invalid"]) input:focus {
        border-color: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 72.2% 50.6%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 84.2% 60.2% / 0.05)","hsl(0 72.2% 50.6% / 0.05)")};
      }

      /* Warning state for input */
      :host([validation-state="warn"]) input {
        border-color: ${p.bdTheme("hsl(25 95% 53%)","hsl(25 95% 63%)")};
      }

      :host([validation-state="warn"]) input:focus {
        border-color: ${p.bdTheme("hsl(25 95% 53%)","hsl(25 95% 63%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(25 95% 53% / 0.05)","hsl(25 95% 63% / 0.05)")};
      }

      /* Valid state for input */
      :host([validation-state="valid"]) input {
        border-color: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
      }

      :host([validation-state="valid"]) input:focus {
        border-color: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(142.1 76.2% 36.3% / 0.05)","hsl(142.1 70.6% 45.3% / 0.05)")};
      }
    `];render(){return w`
      <style>
        input {
          font-family: ${this.isPasswordBool?el:"inherit"};
          letter-spacing: ${this.isPasswordBool?"0.5px":"normal"};
          padding-right: ${this.isPasswordBool?"48px":"12px"};
        }
        ${this.validationText?X`
              .validationContainer {
                height: auto;
                opacity: 1;
                transform: translateY(0);
              }
            `:X`
              .validationContainer {
                height: 0;
                padding: 0 !important;
                opacity: 0;
                transform: translateY(-4px);
              }
            `}
      </style>
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
        <div class="maincontainer">
          <input
            type="${this.isPasswordBool&&!this.showPasswordBool?"password":"text"}"
            .value=${this.value}
            @input="${this.updateValue}"
            .disabled=${this.disabled}
            placeholder="${this.label?"":"Enter text..."}"
          />
          ${this.isPasswordBool?w`
                <div class="showPassword" @click=${this.togglePasswordView}>
                  <dees-icon .icon=${this.showPasswordBool?"lucide:Eye":"lucide:EyeOff"}></dees-icon>
                </div>
              `:w``}
          ${this.validationText?w`
                <div class="validationContainer ${this.validationState||"error"}">
                  ${this.validationText}
                </div>
              `:w`<div class="validationContainer"></div>`}
        </div>
      </div>
    `}firstUpdated(){}async updateValue(L){let A=L.target;this.value=A.value,this.changeSubject.next(this)}getValue(){return this.value}setValue(L){this.value=L}async togglePasswordView(){this.showPasswordBool=!this.showPasswordBool}async focus(){this.shadowRoot.querySelector("input").focus()}async blur(){this.shadowRoot.querySelector("input").blur()}constructor(){super(...arguments),Ya(this,k)}static{Ya(i,a)}};return I=i})()});var W9t,G9t=v(()=>{oe();x1();h2();W9t=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .product-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 20px;
        }

        .cart-summary {
          margin-top: 24px;
          padding: 20px;
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 21.8%)")};
          border-radius: 8px;
        }

        .cart-summary-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }

        .cart-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          font-size: 14px;
          color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
        }

        .cart-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          margin-top: 16px;
          border-top: 2px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          font-size: 18px;
          font-weight: 600;
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }

        .selected-products {
          padding: 16px;
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border-radius: 6px;
          font-size: 14px;
          color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic Product Cards"} .subtitle=${"Simple product display with various configurations"}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{name:"Wireless Bluetooth Headphones",category:"Audio",description:"Premium sound quality with active noise cancellation",price:149.99,originalPrice:199.99,iconName:"lucide:headphones"}}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"Smart Watch Series 7",category:"Wearables",description:"Track your fitness and stay connected on the go",price:399,iconName:"lucide:watch"}}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"USB-C Hub",category:"Accessories",price:49.99,iconName:"lucide:usb",inStock:!1}}
            .quantity=${0}
          ></dees-shopping-productcard>
        </div>
      </dees-panel>

      <dees-panel .title=${"Interactive Shopping Cart"} .subtitle=${"Product cards with dynamic cart calculation"} .runAfterRender=${async t=>{let e=[{id:"laptop",element:null,data:{name:'MacBook Pro 14"',category:"Computers",description:"M3 Pro chip with 18GB RAM",price:1999,originalPrice:2199,iconName:"lucide:laptop"}},{id:"ipad",element:null,data:{name:"iPad Air",category:"Tablets",description:'10.9" Liquid Retina display',price:599,iconName:"lucide:tablet"}},{id:"keyboard",element:null,data:{name:"Magic Keyboard",category:"Accessories",description:"Wireless keyboard with Touch ID",price:149,iconName:"lucide:keyboard"}}],a=()=>{let i=0,r=[];e.forEach(s=>{let o=t.querySelector(`#${s.id}`);if(o&&o.quantity>0){let u=s.data.price*o.quantity;i+=u,r.push(`
                <div class="cart-item">
                  <span>${s.data.name} (${o.quantity})</span>
                  <span>$${u.toFixed(2)}</span>
                </div>
              `)}});let n=t.querySelector("#interactive-cart-summary");n&&(n.innerHTML=`
              ${r.join("")}
              ${r.length===0?'<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>':""}
              <div class="cart-total">
                <span>Total</span>
                <span>$${i.toFixed(2)}</span>
              </div>
            `)};setTimeout(a,100),t.querySelectorAll("dees-shopping-productcard").forEach(i=>{i.addEventListener("quantityChange",a)})}}>
        <div class="product-grid">
          <dees-shopping-productcard
            id="laptop"
            .productData=${{name:'MacBook Pro 14"',category:"Computers",description:"M3 Pro chip with 18GB RAM",price:1999,originalPrice:2199,iconName:"lucide:laptop"}}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            id="ipad"
            .productData=${{name:"iPad Air",category:"Tablets",description:'10.9" Liquid Retina display',price:599,iconName:"lucide:tablet"}}
            .quantity=${0}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            id="keyboard"
            .productData=${{name:"Magic Keyboard",category:"Accessories",description:"Wireless keyboard with Touch ID",price:149,iconName:"lucide:keyboard"}}
            .quantity=${2}
          ></dees-shopping-productcard>
        </div>

        <div class="cart-summary">
          <h3 class="cart-summary-title">Shopping Cart</h3>
          <div id="interactive-cart-summary">
            <!-- Dynamically updated -->
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${"Selectable Product Cards"} .subtitle=${"Click cards or checkboxes to select products"}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{name:"Sony Alpha 7 IV",category:"Cameras",description:"Full-frame mirrorless camera",price:2498,iconName:"lucide:camera"}}
            .selectable=${!0}
            .showQuantitySelector=${!1}
            @selectionChange=${t=>{let e=document.querySelector("#selection-output");if(e){let a=document.querySelectorAll("dees-shopping-productcard[selectable]"),i=[];a.forEach(r=>{r.selected&&i.push(r.productData.name)}),e.textContent=i.length>0?`Selected: ${i.join(", ")}`:"No products selected"}}}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"DJI Mini 3 Pro",category:"Drones",description:"Lightweight drone with 4K camera",price:759,iconName:"lucide:plane"}}
            .selectable=${!0}
            .showQuantitySelector=${!1}
            @selectionChange=${t=>{let e=document.querySelector("#selection-output");if(e){let a=document.querySelectorAll("dees-shopping-productcard[selectable]"),i=[];a.forEach(r=>{r.selected&&i.push(r.productData.name)}),e.textContent=i.length>0?`Selected: ${i.join(", ")}`:"No products selected"}}}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"GoPro HERO12",category:"Action Cameras",description:"5.3K video with HyperSmooth 6.0",price:399,originalPrice:449,iconName:"lucide:video"}}
            .selectable=${!0}
            .showQuantitySelector=${!1}
            @selectionChange=${t=>{let e=document.querySelector("#selection-output");if(e){let a=document.querySelectorAll("dees-shopping-productcard[selectable]"),i=[];a.forEach(r=>{r.selected&&i.push(r.productData.name)}),e.textContent=i.length>0?`Selected: ${i.join(", ")}`:"No products selected"}}}
          ></dees-shopping-productcard>
        </div>
        
        <div class="selected-products" id="selection-output" style="margin-top: 16px;">
          No products selected
        </div>
      </dees-panel>

      <dees-panel .title=${"Product Variations"} .subtitle=${"Different states and configurations"}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{name:"Limited Edition Sneakers",category:"Footwear",description:"Exclusive colorway - Only 500 pairs",price:299,iconName:"lucide:footprints",inStock:!1,stockText:"Sold Out"}}
            .quantity=${0}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"Minimalist Wallet",price:39.99,iconName:"lucide:wallet"}}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{name:"Premium Coffee Beans",category:"Food & Beverage",description:"Single origin, medium roast",price:18.5,iconName:"lucide:coffee",currency:"\u20AC"}}
            .quantity=${2}
          ></dees-shopping-productcard>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var U4,Ki,Y9t,lV=v(()=>{oe();G9t();He();U4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ki=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Y9t=(()=>{let t=[Q("dees-shopping-productcard")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Number})],l=[D({type:Boolean})],y=[D({type:Boolean})],x=[D({type:Boolean})],U4(this,null,n,{kind:"accessor",name:"productData",static:!1,private:!1,access:{has:k=>"productData"in k,get:k=>k.productData,set:(k,I)=>{k.productData=I}},metadata:_},s,o),U4(this,null,u,{kind:"accessor",name:"quantity",static:!1,private:!1,access:{has:k=>"quantity"in k,get:k=>k.quantity,set:(k,I)=>{k.quantity=I}},metadata:_},c,d),U4(this,null,l,{kind:"accessor",name:"showQuantitySelector",static:!1,private:!1,access:{has:k=>"showQuantitySelector"in k,get:k=>k.showQuantitySelector,set:(k,I)=>{k.showQuantitySelector=I}},metadata:_},f,b),U4(this,null,y,{kind:"accessor",name:"selectable",static:!1,private:!1,access:{has:k=>"selectable"in k,get:k=>k.selectable,set:(k,I)=>{k.selectable=I}},metadata:_},g,h),U4(this,null,x,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:k=>"selected"in k,get:k=>k.selected,set:(k,I)=>{k.selected=I}},metadata:_},M,S),U4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=W9t;static demoGroups=["Simple"];#e=Ki(this,s,{name:"Product Name",price:0});get productData(){return this.#e}set productData(_){this.#e=_}#t=(Ki(this,o),Ki(this,c,0));get quantity(){return this.#t}set quantity(_){this.#t=_}#a=(Ki(this,d),Ki(this,f,!0));get showQuantitySelector(){return this.#a}set showQuantitySelector(_){this.#a=_}#i=(Ki(this,b),Ki(this,g,!1));get selectable(){return this.#i}set selectable(_){this.#i=_}#r=(Ki(this,h),Ki(this,M,!1));get selected(){return this.#r}set selected(_){this.#r=_}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
      }

      .product-card {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20.2% 11.8%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
      }

      .product-card:hover {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

      .product-card.selectable {
        cursor: pointer;
      }

      .product-card.selected {
        border-color: ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(217.2 91.2% 59.8% / 0.1)","hsl(213.1 93.9% 67.8% / 0.1)")};
      }

      .product-image {
        width: 100%;
        height: 180px;
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .product-image dees-icon {
        font-size: 48px;
        color: ${p.bdTheme("hsl(215 20.2% 65.1%)","hsl(215 20.2% 35.1%)")};
      }

      .selection-checkbox {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 20px;
        height: 20px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 30% 6.8%)")};
        border: 2px solid ${p.bdTheme("hsl(215 20.2% 65.1%)","hsl(215 20.2% 35.1%)")};
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        cursor: pointer;
      }

      .selection-checkbox.checked {
        background: ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
        border-color: ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
      }

      .selection-checkbox dees-icon {
        color: white;
        font-size: 12px;
        opacity: 0;
        transform: scale(0);
        transition: all 0.2s ease;
      }

      .selection-checkbox.checked dees-icon {
        opacity: 1;
        transform: scale(1);
      }

      .product-content {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
      }
      
      .product-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .product-category {
        font-size: 12px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.3;
      }
      
      .product-name {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        line-height: 1.4;
      }

      .product-description {
        font-size: 13px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        line-height: 1.5;
        flex: 1;
      }
      
      .product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      .product-price {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .price-current {
        font-size: 20px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .price-original {
        font-size: 14px;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-decoration: line-through;
      }

      .stock-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        margin-top: 8px;
      }

      .stock-status.in-stock {
        color: ${p.bdTheme("hsl(142.1 70.6% 45.3%)","hsl(142.1 76.2% 36.3%)")};
      }

      .stock-status.out-of-stock {
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
      }

      .stock-status dees-icon {
        font-size: 14px;
      }
    `];render(){let{name:_,category:k,description:I,price:L,originalPrice:A,currency:V="$",inStock:C=!0,stockText:z=C?"In Stock":"Out of Stock",imageUrl:E,iconName:T="lucide:package"}=this.productData,$=H=>`${V}${H.toFixed(2)}`;return w`
      <div 
        class="product-card ${this.selectable?"selectable":""} ${this.selected?"selected":""}"
        @click=${this.handleCardClick}
      >
        <div class="product-image">
          ${E?w`
            <img src="${E}" alt="${_}">
          `:w`
            <dees-icon .icon=${T}></dees-icon>
          `}
          ${this.selectable?w`
            <div 
              class="selection-checkbox ${this.selected?"checked":""}"
              @click=${H=>{H.stopPropagation(),this.handleSelectionToggle()}}
            >
              <dees-icon .icon=${"lucide:check"}></dees-icon>
            </div>
          `:""}
        </div>
        <div class="product-content">
          <div class="product-header">
            ${k?w`<div class="product-category">${k}</div>`:""}
            <div class="product-name">${_}</div>
          </div>
          ${I?w`
            <div class="product-description">${I}</div>
          `:""}
          <div class="stock-status ${C?"in-stock":"out-of-stock"}">
            <dees-icon .icon=${C?"lucide:check-circle":"lucide:x-circle"}></dees-icon>
            ${z}
          </div>
          <div class="product-footer">
            <div class="product-price">
              <span class="price-current">${$(L)}</span>
              ${A&&A>L?w`
                <span class="price-original">${$(A)}</span>
              `:""}
            </div>
            ${this.showQuantitySelector?w`
              <dees-input-quantityselector
                .value=${this.quantity}
                @changeSubject=${H=>{this.quantity=H.detail.getValue(),this.dispatchEvent(new CustomEvent("quantityChange",{detail:{quantity:this.quantity,productData:this.productData},bubbles:!0,composed:!0}))}}
              ></dees-input-quantityselector>
            `:""}
          </div>
        </div>
      </div>
    `}handleCardClick(){this.selectable&&(this.selected=!this.selected,this.dispatchEvent(new CustomEvent("selectionChange",{detail:{selected:this.selected,productData:this.productData},bubbles:!0,composed:!0})))}handleSelectionToggle(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("selectionChange",{detail:{selected:this.selected,productData:this.productData},bubbles:!0,composed:!0}))}constructor(){super(...arguments),Ki(this,S)}static{Ki(i,a)}};return N=i})()});var Z9t,X9t=v(()=>{oe();lV();Z9t=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .shopping-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 20px;
        }

        .cart-summary {
          margin-top: 24px;
          padding: 20px;
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 21.8%)")};
          border-radius: 8px;
        }

        .cart-summary-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }

        .cart-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          font-size: 14px;
          color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
        }

        .cart-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          margin-top: 16px;
          border-top: 2px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          font-size: 18px;
          font-weight: 600;
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic Quantity Selector"} .subtitle=${"Simple quantity input with increment/decrement buttons"}>
        <div class="input-group">
          <dees-input-quantityselector
            .label=${"Quantity"}
            .description=${"Select the desired quantity"}
            .value=${1}
          ></dees-input-quantityselector>

          <dees-input-quantityselector
            .label=${"Items in Cart"}
            .description=${"Adjust the quantity of items"}
            .value=${3}
          ></dees-input-quantityselector>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Shopping Cart"} .subtitle=${"Modern e-commerce product cards with interactive quantity selectors"} .runAfterRender=${async t=>{let e=()=>{let a=t.querySelector("#headphones-qty"),i=t.querySelector("#mouse-qty"),r=t.querySelector("#keyboard-qty"),n=a?.quantity||0,s=i?.quantity||0,o=r?.quantity||0,u=349.99*n,c=99.99*s,d=79.99*o,l=u+c+d,f=t.querySelector("#cart-summary-content");f&&(f.innerHTML=`
              ${n>0?`<div class="cart-item">
                <span>Sony WH-1000XM5 (${n})</span>
                <span>$${u.toFixed(2)}</span>
              </div>`:""}
              ${s>0?`<div class="cart-item">
                <span>Logitech MX Master 3S (${s})</span>
                <span>$${c.toFixed(2)}</span>
              </div>`:""}
              ${o>0?`<div class="cart-item">
                <span>Keychron K2 (${o})</span>
                <span>$${d.toFixed(2)}</span>
              </div>`:""}
              ${l===0?'<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>':""}
              <div class="cart-total">
                <span>Total</span>
                <span>$${l.toFixed(2)}</span>
              </div>
            `)};setTimeout(e,100),t.querySelectorAll("dees-shopping-productcard").forEach(a=>{a.addEventListener("quantityChange",e)})}}>
        <div class="shopping-grid">
          <dees-shopping-productcard
            id="headphones-qty"
            .productData=${{name:"Sony WH-1000XM5 Wireless Headphones",category:"Audio",description:"Industry-leading noise canceling with Auto NC Optimizer",price:349.99,originalPrice:399.99,iconName:"lucide:headphones"}}
            .quantity=${1}
          ></dees-shopping-productcard>
          
          <dees-shopping-productcard
            id="mouse-qty"
            .productData=${{name:"Logitech MX Master 3S",category:"Accessories",description:"Performance wireless mouse with ultra-fast scrolling",price:99.99,iconName:"lucide:mouse-pointer"}}
            .quantity=${2}
          ></dees-shopping-productcard>
          
          <dees-shopping-productcard
            id="keyboard-qty"
            .productData=${{name:"Keychron K2 Wireless Mechanical Keyboard",category:"Keyboards",description:"Compact 75% layout with hot-swappable switches",price:79.99,originalPrice:94.99,iconName:"lucide:keyboard"}}
            .quantity=${1}
          ></dees-shopping-productcard>
        </div>

        <div class="cart-summary">
          <h3 class="cart-summary-title">Order Summary</h3>
          <div id="cart-summary-content">
            <!-- Content will be dynamically updated -->
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Required & Disabled States"} .subtitle=${"Different states for validation and restrictions"}>
        <div class="input-group">
          <dees-input-quantityselector
            .label=${"Number of Licenses"}
            .description=${"Select how many licenses you need"}
            .required=${!0}
            .value=${1}
          ></dees-input-quantityselector>

          <dees-input-quantityselector
            .label=${"Fixed Quantity"}
            .description=${"This quantity cannot be changed"}
            .disabled=${!0}
            .value=${5}
          ></dees-input-quantityselector>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Order Form"} .subtitle=${"Complete order form with quantity selection"}>
        <dees-form>
          <dees-input-text .label=${"Customer Name"} .required=${!0}></dees-input-text>
          <dees-input-dropdown
            .label=${"Product"}
            .options=${["Basic Plan","Pro Plan","Enterprise Plan"]}
            .required=${!0}
          ></dees-input-dropdown>
          <dees-input-quantityselector
            .label=${"Quantity"}
            .description=${"Number of licenses"}
            .value=${1}
          ></dees-input-quantityselector>
          <dees-input-text
            .label=${"Special Instructions"}
            .inputType=${"textarea"}
          ></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var K9t,cV,ow,dV=v(()=>{oe();_t();_1();X9t();He();K9t=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},cV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ow=(()=>{let t=[Q("dees-input-quantityselector")],e,a=[],i,r=Ze,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],K9t(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:d=>"value"in d,get:d=>d.value,set:(d,l)=>{d.value=l}},metadata:c},s,o),K9t(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=Z9t;static demoGroups=["Input"];#e=cV(this,s,1);get value(){return this.#e}set value(c){this.#e=c}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
        /* TODO: Migrate hardcoded values to --dees-* CSS variables */
        :host {
          width: auto;
          user-select: none;
        }

        .quantity-container {
          transition: all 0.15s ease;
          font-size: 14px;
          display: inline-flex;
          align-items: center;
          background: transparent;
          height: 40px;
          padding: 0;
          min-width: 120px;
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
          border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          border-radius: 6px;
          overflow: hidden;
        }
        
        .quantity-container.disabled {
          background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
          border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          opacity: 0.5;
          pointer-events: none;
        }

        .quantity-container:hover:not(.disabled) {
          border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        }

        .quantity-container:focus-within {
          border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
          box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
        }

        .selector {
          flex: 0 0 40px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
          position: relative;
        }

        .selector:hover {
          background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
          color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        }

        .selector:active {
          background: ${p.bdTheme("hsl(0 0% 91%)","hsl(0 0% 11%)")};
        }

        .selector.minus {
          border-right: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        }

        .selector.plus {
          border-left: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        }

        .quantity {
          flex: 1;
          text-align: center;
          font-weight: 500;
          font-variant-numeric: tabular-nums;
          letter-spacing: -0.006em;
        }

        /* Keyboard navigation focus styles */
        .selector:focus {
          outline: none;
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          z-index: 1;
        }

        /* Min value state */
        .quantity-container[data-min="true"] .selector.minus {
          opacity: 0.3;
          cursor: not-allowed;
        }

        .quantity-container[data-min="true"] .selector.minus:hover {
          background: transparent;
          color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        }

    `];render(){return w`
      <div class="input-wrapper">
        ${this.label?w`<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>`:""}
        <div 
          class="quantity-container ${this.disabled?"disabled":""}"
          data-min="${this.value<=0}"
        >
          <div 
            class="selector minus" 
            @click="${()=>{this.decrease()}}"
            tabindex="${this.disabled?"-1":"0"}"
            @keydown="${c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),this.decrease())}}"
            role="button"
            aria-label="Decrease quantity"
          >−</div>
          <div class="quantity" aria-live="polite" aria-atomic="true">${this.value}</div>
          <div 
            class="selector plus" 
            @click="${()=>{this.increase()}}"
            tabindex="${this.disabled?"-1":"0"}"
            @keydown="${c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),this.increase())}}"
            role="button"
            aria-label="Increase quantity"
          >+</div>
        </div>
      </div>
    `}increase(){this.disabled||(this.value++,this.changeSubject.next(this))}decrease(){!this.disabled&&this.value>0&&(this.value--,this.changeSubject.next(this))}getValue(){return this.value}setValue(c){this.value=c}constructor(){super(...arguments),cV(this,o)}static{cV(i,a)}};return u=i})()});var Q9t,J9t=v(()=>{oe();x1();h2();Q9t=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .demo-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 24px;
        }
        
        .result-display {
          margin-top: 16px;
          padding: 12px;
          background: rgba(0, 105, 242, 0.1);
          border-radius: 4px;
          font-family: monospace;
          font-size: 14px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"1. Basic Radio Groups"} .subtitle=${"Simple string options for common use cases"}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${"Subscription Plan"}
            .options=${["Basic - $9/month","Pro - $29/month","Enterprise - $99/month"]}
            .selectedOption=${"Pro - $29/month"}
            .description=${"Choose your subscription tier"}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${"Priority Level"}
            .options=${["High","Medium","Low"]}
            .selectedOption=${"Medium"}
            .required=${!0}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"2. Horizontal Layout"} .subtitle=${"Radio groups with horizontal arrangement"}>
        <div class="input-group">
          <dees-input-radiogroup
            .label=${"Do you agree with the terms?"}
            .options=${["Yes","No","Maybe"]}
            .direction=${"horizontal"}
            .selectedOption=${"Yes"}
          ></dees-input-radiogroup>

          <dees-input-radiogroup
            .label=${"Experience Level"}
            .options=${["Beginner","Intermediate","Expert"]}
            .direction=${"horizontal"}
            .selectedOption=${"Intermediate"}
            .description=${"Select your experience level with web development"}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"3. Advanced Options"} .subtitle=${"Using object format with keys and payloads"}>
        <dees-input-radiogroup
          id="advanced-radio"
          .label=${"Select Region"}
          .options=${[{option:"United States (US East)",key:"us-east",payload:{region:"us-east-1",latency:20}},{option:"Europe (Frankfurt)",key:"eu-central",payload:{region:"eu-central-1",latency:50}},{option:"Asia Pacific (Singapore)",key:"ap-southeast",payload:{region:"ap-southeast-1",latency:120}}]}
          .selectedOption=${"eu-central"}
          .description=${"Choose the closest region for optimal performance"}
          @change=${t=>{let e=document.querySelector("#region-result");e&&(e.textContent="Selected: "+JSON.stringify(t.detail.value,null,2))}}
        ></dees-input-radiogroup>
        <div id="region-result" class="result-display">Selected: { "region": "eu-central-1", "latency": 50 }</div>
      </dees-panel>
      
      <dees-panel .title=${"4. Survey Example"} .subtitle=${"Multiple radio groups for surveys and forms"}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${"How satisfied are you?"}
            .options=${["Very Satisfied","Satisfied","Neutral","Dissatisfied","Very Dissatisfied"]}
            .selectedOption=${"Satisfied"}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${"Would you recommend us?"}
            .options=${["Definitely","Probably","Not Sure","Probably Not","Definitely Not"]}
            .selectedOption=${"Probably"}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"5. States & Validation"} .subtitle=${"Different states and validation examples"}>
        <div class="demo-grid">
          <dees-input-radiogroup
            .label=${"Required Selection"}
            .options=${["Option A","Option B","Option C"]}
            .required=${!0}
            .description=${"This field is required"}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${"Disabled State"}
            .options=${["Disabled Option 1","Disabled Option 2","Disabled Option 3"]}
            .selectedOption=${"Disabled Option 2"}
            .disabled=${!0}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"6. Settings Example"} .subtitle=${"Common patterns in application settings"}>
        <div class="input-group">
          <dees-input-radiogroup
            .label=${"Theme Preference"}
            .options=${[{option:"Light Theme",key:"light",payload:"light"},{option:"Dark Theme",key:"dark",payload:"dark"},{option:"System Default",key:"system",payload:"auto"}]}
            .selectedOption=${"dark"}
            .description=${"Choose how the application should appear"}
          ></dees-input-radiogroup>

          <dees-input-radiogroup
            .label=${"Notification Frequency"}
            .options=${["All Notifications","Important Only","None"]}
            .selectedOption=${"Important Only"}
            .description=${"Control how often you receive notifications"}
          ></dees-input-radiogroup>

          <dees-input-radiogroup
            .label=${"Language"}
            .options=${["English","German","French","Spanish","Japanese"]}
            .selectedOption=${"English"}
            .direction=${"horizontal"}
          ></dees-input-radiogroup>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"7. Form Integration"} .subtitle=${"Works seamlessly with dees-form"}>
        <dees-form>
          <dees-input-text
            .label=${"Product Name"}
            .required=${!0}
            .key=${"productName"}
          ></dees-input-text>
          
          <dees-input-radiogroup
            .label=${"Product Category"}
            .options=${["Electronics","Clothing","Books","Home & Garden","Sports"]}
            .required=${!0}
            .key=${"category"}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${"Condition"}
            .options=${["New","Like New","Good","Fair","Poor"]}
            .direction=${"horizontal"}
            .key=${"condition"}
            .selectedOption=${"New"}
          ></dees-input-radiogroup>
          
          <dees-input-radiogroup
            .label=${"Shipping Speed"}
            .options=${[{option:"Standard (5-7 days)",key:"standard",payload:{days:7,price:0}},{option:"Express (2-3 days)",key:"express",payload:{days:3,price:10}},{option:"Overnight",key:"overnight",payload:{days:1,price:25}}]}
            .selectedOption=${"standard"}
            .key=${"shipping"}
          ></dees-input-radiogroup>
          
          <dees-form-submit .text=${"Submit Product"}></dees-form-submit>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var Od,Hs,lw,cw=v(()=>{oe();_1();J9t();He();Od=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Hs=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},lw=(()=>{let t=[Q("dees-input-radiogroup")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D()],l=[D({type:String})],y=[D({type:String,reflect:!0})],Od(this,null,n,{kind:"accessor",name:"options",static:!1,private:!1,access:{has:S=>"options"in S,get:S=>S.options,set:(S,N)=>{S.options=N}},metadata:M},s,o),Od(this,null,u,{kind:"accessor",name:"selectedOption",static:!1,private:!1,access:{has:S=>"selectedOption"in S,get:S=>S.selectedOption,set:(S,N)=>{S.selectedOption=N}},metadata:M},c,d),Od(this,null,l,{kind:"accessor",name:"direction",static:!1,private:!1,access:{has:S=>"direction"in S,get:S=>S.direction,set:(S,N)=>{S.direction=N}},metadata:M},f,b),Od(this,null,y,{kind:"accessor",name:"validationState",static:!1,private:!1,access:{has:S=>"validationState"in S,get:S=>S.validationState,set:(S,N)=>{S.validationState=N}},metadata:M},g,h),Od(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=Q9t;static demoGroups=["Input"];#e=Hs(this,s,[]);get options(){return this.#e}set options(M){this.#e=M}#t=(Hs(this,o),Hs(this,c,""));get selectedOption(){return this.#t}set selectedOption(M){this.#t=M}#a=(Hs(this,d),Hs(this,f,"vertical"));get direction(){return this.#a}set direction(M){this.#a=M}#i=(Hs(this,b),Hs(this,g,null));get validationState(){return this.#i}set validationState(M){this.#i=M}get value(){let M=this.getOptionByKey(this.selectedOption);return typeof M=="object"&&M.payload!==void 0?M.payload:this.selectedOption}set value(M){if(typeof M=="string")this.selectedOption=M;else{let S=this.options.find(N=>typeof N=="object"&&N.payload===M);S&&typeof S=="object"&&(this.selectedOption=S.key)}}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      * {
        box-sizing: border-box;
      }

      :host {
        display: block;
        position: relative;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .maincontainer {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .maincontainer.horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
      }

      .radio-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
        position: relative;
        border-radius: 4px;
      }

      .maincontainer.horizontal .radio-option {
        padding: 6px 20px 6px 0;
      }

      .radio-option:hover .radio-circle {
        border-color: ${p.bdTheme("hsl(215 20.2% 65.1%)","hsl(215 20.2% 35.1%)")};
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 11.8%)")};
      }

      .radio-option:hover .radio-label {
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
      }

      .radio-circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid ${p.bdTheme("hsl(215 20.2% 65.1%)","hsl(215 20.2% 35.1%)")};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 30% 6.8%)")};
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .radio-option.selected .radio-circle {
        border-color: ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
        background: ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
      }

      .radio-option.selected .radio-circle::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 30% 6.8%)")};
        transform: scale(0);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .radio-option.selected .radio-circle::after {
        transform: scale(1);
      }

      .radio-circle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 100%)","hsl(215 30% 3.9%)")},
                    0 0 0 4px ${p.bdTheme("hsl(217.2 91.2% 59.8%)","hsl(213.1 93.9% 67.8%)")};
      }

      .radio-label {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
        transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: -0.006em;
        line-height: 20px;
      }

      .radio-option.selected .radio-label {
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
      }

      :host([disabled]) .radio-option {
        cursor: not-allowed;
        opacity: 0.5;
      }

      :host([disabled]) .radio-option:hover .radio-circle {
        border-color: ${p.bdTheme("hsl(215 20.2% 65.1%)","hsl(215 20.2% 35.1%)")};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 30% 6.8%)")};
      }

      :host([disabled]) .radio-option:hover .radio-label {
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
      }

      .label-text {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        margin-bottom: 10px;
        letter-spacing: -0.006em;
        line-height: 20px;
      }

      .description-text {
        font-size: 13px;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        margin-top: 10px;
        line-height: 1.5;
        letter-spacing: -0.003em;
      }

      /* Validation styles */
      :host([validationState="invalid"]) .radio-circle {
        border-color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
      }

      :host([validationState="invalid"]) .radio-option.selected .radio-circle {
        border-color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
        background: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
      }

      :host([validationState="valid"]) .radio-option.selected .radio-circle {
        border-color: ${p.bdTheme("hsl(142.1 70.6% 45.3%)","hsl(142.1 76.2% 36.3%)")};
        background: ${p.bdTheme("hsl(142.1 70.6% 45.3%)","hsl(142.1 76.2% 36.3%)")};
      }

      :host([validationState="warn"]) .radio-option.selected .radio-circle {
        border-color: ${p.bdTheme("hsl(45.4 93.4% 47.5%)","hsl(45.4 93.4% 47.5%)")};
        background: ${p.bdTheme("hsl(45.4 93.4% 47.5%)","hsl(45.4 93.4% 47.5%)")};
      }

      /* Override base grid layout for radiogroup to prevent large gaps */
      :host([label-position="left"]) .input-wrapper {
        grid-template-columns: auto auto;
      }

      :host([label-position="right"]) .input-wrapper {
        grid-template-columns: auto auto;
      }
    `];render(){return w`
      <div class="input-wrapper">
        ${this.label?w`<div class="label-text">${this.label}</div>`:""}
        <div class="maincontainer ${this.direction}">
          ${this.options.map(M=>{let S=this.getOptionKey(M),N=this.getOptionLabel(M),_=this.selectedOption===S;return w`
              <div 
                class="radio-option ${_?"selected":""}"
                @click="${()=>this.selectOption(S)}"
                @keydown="${k=>this.handleKeydown(k,S)}"
              >
                <div 
                  class="radio-circle" 
                  tabindex="${this.disabled?"-1":"0"}"
                  role="radio"
                  aria-checked="${_}"
                  aria-label="${N}"
                ></div>
                <div class="radio-label">${N}</div>
              </div>
            `})}
        </div>
        ${this.description?w`<div class="description-text">${this.description}</div>`:""}
      </div>
    `}getOptionKey(M){return typeof M=="string"?M:M.key}getOptionLabel(M){return typeof M=="string"?M:M.option}getOptionByKey(M){return this.options.find(S=>this.getOptionKey(S)===M)}selectOption(M){if(this.disabled)return;let S=this.selectedOption;this.selectedOption=M,S!==M&&(this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.changeSubject.next(this))}getValue(){return this.value}setValue(M){this.value=M}async validate(){return this.required&&!this.selectedOption?(this.validationState="invalid",!1):(this.validationState="valid",!0)}async firstUpdated(){if(!this.selectedOption&&this.options.length>0&&!this.required){let M=this.options[0];this.selectedOption=this.getOptionKey(M)}}handleKeydown(M,S){this.disabled||(M.key===" "||M.key==="Enter"?(M.preventDefault(),this.selectOption(S)):M.key==="ArrowDown"||M.key==="ArrowRight"?(M.preventDefault(),this.focusNextOption()):(M.key==="ArrowUp"||M.key==="ArrowLeft")&&(M.preventDefault(),this.focusPreviousOption()))}focusNextOption(){let M=Array.from(this.shadowRoot.querySelectorAll(".radio-circle")),N=(M.findIndex(_=>_===this.shadowRoot.activeElement)+1)%M.length;M[N].focus()}focusPreviousOption(){let M=Array.from(this.shadowRoot.querySelectorAll(".radio-circle")),S=M.findIndex(_=>_===this.shadowRoot.activeElement),N=S<=0?M.length-1:S-1;M[N].focus()}constructor(){super(...arguments),Hs(this,h)}static{Hs(i,a)}};return x=i})()});var eft,tft=v(()=>{oe();eft=()=>w`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 24px;
    }
    .demo-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .demo-section h3 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 500;
      color: #888;
    }
    .demo-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
  </style>
  <div class="demo-container">
    <div class="demo-section">
      <h3>Basic Usage</h3>
      <div class="demo-row">
        <dees-form-submit>Submit Form</dees-form-submit>
        <dees-form-submit text="With Text Property"></dees-form-submit>
      </div>
    </div>

    <div class="demo-section">
      <h3>With Icons (inherited from DeesButton)</h3>
      <div class="demo-row">
        <dees-form-submit icon="lucide:send">Submit</dees-form-submit>
        <dees-form-submit icon="lucide:save" iconPosition="left">Save Form</dees-form-submit>
        <dees-form-submit icon="lucide:arrow-right" iconPosition="right">Continue</dees-form-submit>
      </div>
    </div>

    <div class="demo-section">
      <h3>Button Types</h3>
      <div class="demo-row">
        <dees-form-submit type="highlighted" icon="lucide:send">Highlighted</dees-form-submit>
        <dees-form-submit type="normal" icon="lucide:send">Normal</dees-form-submit>
        <dees-form-submit type="discreet" icon="lucide:send">Discreet</dees-form-submit>
      </div>
    </div>

    <div class="demo-section">
      <h3>Sizes</h3>
      <div class="demo-row">
        <dees-form-submit size="small" icon="lucide:send">Small</dees-form-submit>
        <dees-form-submit size="normal" icon="lucide:send">Normal</dees-form-submit>
        <dees-form-submit size="large" icon="lucide:send">Large</dees-form-submit>
      </div>
    </div>

    <div class="demo-section">
      <h3>States</h3>
      <div class="demo-row">
        <dees-form-submit status="normal" icon="lucide:send">Normal</dees-form-submit>
        <dees-form-submit status="pending" icon="lucide:send">Pending</dees-form-submit>
        <dees-form-submit status="success" icon="lucide:check">Success</dees-form-submit>
        <dees-form-submit status="error" icon="lucide:x">Error</dees-form-submit>
        <dees-form-submit disabled icon="lucide:send">Disabled</dees-form-submit>
      </div>
    </div>

    <div class="demo-section">
      <h3>In a Form Context</h3>
      <dees-form>
        <dees-input-text label="Name" key="name"></dees-input-text>
        <dees-input-text label="Email" key="email"></dees-input-text>
        <dees-form-submit icon="lucide:send" type="highlighted">Submit Form</dees-form-submit>
      </dees-form>
    </div>
  </div>
`});var wo,da,dw,ll=v(()=>{tft();oe();He();wo=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},da=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},dw=(()=>{let t=[Q("dees-form-submit")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[];var V=class extends r{static{i=this}static{let C=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean,reflect:!0})],u=[D({type:String})],l=[D({type:String})],y=[D({type:String,reflect:!0})],x=[D({type:String,reflect:!0})],N=[D({type:String})],I=[D({type:String})],wo(this,null,n,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:z=>"disabled"in z,get:z=>z.disabled,set:(z,E)=>{z.disabled=E}},metadata:C},s,o),wo(this,null,u,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:z=>"text"in z,get:z=>z.text,set:(z,E)=>{z.text=E}},metadata:C},c,d),wo(this,null,l,{kind:"accessor",name:"status",static:!1,private:!1,access:{has:z=>"status"in z,get:z=>z.status,set:(z,E)=>{z.status=E}},metadata:C},f,b),wo(this,null,y,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:z=>"type"in z,get:z=>z.type,set:(z,E)=>{z.type=E}},metadata:C},g,h),wo(this,null,x,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:z=>"size"in z,get:z=>z.size,set:(z,E)=>{z.size=E}},metadata:C},M,S),wo(this,null,N,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:z=>"icon"in z,get:z=>z.icon,set:(z,E)=>{z.icon=E}},metadata:C},_,k),wo(this,null,I,{kind:"accessor",name:"iconPosition",static:!1,private:!1,access:{has:z=>"iconPosition"in z,get:z=>z.iconPosition,set:(z,E)=>{z.iconPosition=E}},metadata:C},L,A),wo(null,e={value:i},t,{kind:"class",name:i.name,metadata:C},null,a),V=i=e.value,C&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:C})}static demo=eft;static demoGroups=["Form","Button"];#e=da(this,s,!1);get disabled(){return this.#e}set disabled(C){this.#e=C}#t=(da(this,o),da(this,c,void 0));get text(){return this.#t}set text(C){this.#t=C}#a=(da(this,d),da(this,f,"normal"));get status(){return this.#a}set status(C){this.#a=C}#i=(da(this,b),da(this,g,"default"));get type(){return this.#i}set type(C){this.#i=C}#r=(da(this,h),da(this,M,"default"));get size(){return this.#r}set size(C){this.#r=C}#s=(da(this,S),da(this,_,void 0));get icon(){return this.#s}set icon(C){this.#s=C}#n=(da(this,k),da(this,L,"left"));get iconPosition(){return this.#n}set iconPosition(C){this.#n=C}constructor(){super(),da(this,A)}static styles=[Se,p.defaultStyles,X`
      :host {
        display: inline-block;
      }
      dees-button {
        width: 100%;
      }
    `];render(){return w`
      <dees-button
        .status=${this.status}
        .type=${this.type}
        .size=${this.size}
        .icon=${this.icon}
        .iconPosition=${this.iconPosition}
        .text=${this.text}
        ?disabled=${this.disabled}
        @clicked=${this.submit}
      >
        <slot></slot>
      </dees-button>
    `}async submit(){if(this.disabled)return;let C=this.closest("dees-form");C&&C.gatherAndDispatch&&C.gatherAndDispatch()}async focus(){let C=await this.domtoolsPromise;this.disabled||(await C.convenience.smartdelay.delayFor(0),this.submit())}static{da(i,a)}};return V=i})()});var aft,ift=v(()=>{oe();x1();h2();W4();ll();aft=()=>w`
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .horizontal-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
      .input-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .spacer {
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 14px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector('dees-input-dropdown[label="Select Country"]'),a=t.querySelector('dees-input-dropdown[label="Select Role"]');e&&e.addEventListener("selectedOption",i=>{console.log("Country selected:",i.detail)}),a&&a.addEventListener("selectedOption",i=>{console.log("Role selected:",i.detail)})}}>
      <dees-panel .title=${"1. Basic Dropdowns"} .subtitle=${"Standard dropdown with search functionality and various options"}>
        <div class="input-group">
          <dees-input-dropdown
            .label=${"Select Country"}
            .options=${[{option:"United States",key:"us"},{option:"Canada",key:"ca"},{option:"Germany",key:"de"},{option:"France",key:"fr"},{option:"United Kingdom",key:"uk"},{option:"Australia",key:"au"},{option:"Japan",key:"jp"},{option:"Brazil",key:"br"}]}
            .selectedOption=${{option:"United States",key:"us"}}
          ></dees-input-dropdown>

          <dees-input-dropdown
            .label=${"Select Role"}
            .options=${[{option:"Administrator",key:"admin"},{option:"Editor",key:"editor"},{option:"Viewer",key:"viewer"},{option:"Guest",key:"guest"}]}
          ></dees-input-dropdown>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-dropdown");e&&e.addEventListener("selectedOption",a=>{console.log(`Priority changed to: ${a.detail.option}`)})}}>
      <dees-panel .title=${"2. Without Search"} .subtitle=${"Dropdown with search functionality disabled for simpler selection"}>
        <dees-input-dropdown
          .label=${"Priority Level"}
          .enableSearch=${!1}
          .options=${[{option:"High",key:"high"},{option:"Medium",key:"medium"},{option:"Low",key:"low"}]}
          .selectedOption=${{option:"Medium",key:"medium"}}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-dropdown").forEach(a=>{a.addEventListener("selectedOption",i=>{let r=a.getAttribute("label");console.log(`${r}: ${i.detail.option}`)})})}}>
      <dees-panel .title=${"3. Horizontal Layout"} .subtitle=${"Multiple dropdowns in a horizontal layout for compact forms"}>
        <div class="horizontal-group">
          <dees-input-dropdown
            .label=${"Department"}
            .layoutMode=${"horizontal"}
            .options=${[{option:"Engineering",key:"eng"},{option:"Design",key:"design"},{option:"Marketing",key:"marketing"},{option:"Sales",key:"sales"}]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${"Team Size"}
            .layoutMode=${"horizontal"}
            .enableSearch=${!1}
            .options=${[{option:"1-5",key:"small"},{option:"6-20",key:"medium"},{option:"21-50",key:"large"},{option:"50+",key:"xlarge"}]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${"Location"}
            .layoutMode=${"horizontal"}
            .options=${[{option:"Remote",key:"remote"},{option:"On-site",key:"onsite"},{option:"Hybrid",key:"hybrid"}]}
          ></dees-input-dropdown>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-dropdown[required]");e&&e.addEventListener("blur",()=>{console.log("Required dropdown lost focus")})}}>
      <dees-panel .title=${"4. States"} .subtitle=${"Different states and configurations"}>
        <div class="input-group">
          <dees-input-dropdown
            .label=${"Required Field"}
            .required=${!0}
            .options=${[{option:"Option A",key:"a"},{option:"Option B",key:"b"},{option:"Option C",key:"c"}]}
          ></dees-input-dropdown>

          <dees-input-dropdown
            .label=${"Disabled Dropdown"}
            .disabled=${!0}
            .options=${[{option:"Cannot Select",key:"disabled"}]}
            .selectedOption=${{option:"Cannot Select",key:"disabled"}}
          ></dees-input-dropdown>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <div class="spacer">
      (Spacer to test dropdown positioning)
    </div>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-dropdown");e&&e.addEventListener("selectedOption",a=>{console.log("Bottom dropdown selected:",a.detail)})}}>
      <dees-panel .title=${"5. Bottom Positioning"} .subtitle=${"Dropdown that opens upward when near bottom of viewport"}>
        <dees-input-dropdown
          .label=${"Opens Upward"}
          .options=${[{option:"First Option",key:"first"},{option:"Second Option",key:"second"},{option:"Third Option",key:"third"},{option:"Fourth Option",key:"fourth"},{option:"Fifth Option",key:"fifth"}]}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-input-dropdown"),a=t.querySelector("#selection-output");e&&a&&(a.innerHTML="<em>Select a product to see details...</em>",e.addEventListener("change",i=>{i.detail.value&&(a.innerHTML=`
              <strong>Selected:</strong> ${i.detail.value.option}<br>
              <strong>Key:</strong> ${i.detail.value.key}<br>
              <strong>Price:</strong> $${i.detail.value.payload?.price||"N/A"}<br>
              <strong>Features:</strong> ${i.detail.value.payload?.features?.join(", ")||"N/A"}
            `)}))}}>
      <dees-panel .title=${"6. Event Handling & Payload"} .subtitle=${"Dropdown with payload data and change event handling"}>
        <dees-input-dropdown
          .label=${"Select Product"}
          .options=${[{option:"Basic Plan",key:"basic",payload:{price:9.99,features:["Feature A"]}},{option:"Pro Plan",key:"pro",payload:{price:19.99,features:["Feature A","Feature B"]}},{option:"Enterprise Plan",key:"enterprise",payload:{price:49.99,features:["Feature A","Feature B","Feature C"]}}]}
        ></dees-input-dropdown>
        
        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;"></div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-form"),a=t.querySelector('dees-input-dropdown[key="projectType"]'),i=t.querySelector('dees-input-dropdown[key="framework"]');e&&e.addEventListener("formData",r=>{console.log("Form submitted with data:",r.detail.data)}),a&&i&&a.addEventListener("selectedOption",r=>{let n=r.detail.key;console.log(`Project type changed to: ${n}`)})}}>
      <dees-panel .title=${"7. Form Integration"} .subtitle=${"Dropdown working within a form with validation"}>
        <dees-form>
          <dees-input-dropdown
            .label=${"Project Type"}
            .key=${"projectType"}
            .required=${!0}
            .options=${[{option:"Web Application",key:"web"},{option:"Mobile Application",key:"mobile"},{option:"Desktop Application",key:"desktop"},{option:"API Service",key:"api"}]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${"Development Framework"}
            .key=${"framework"}
            .required=${!0}
            .options=${[{option:"React",key:"react",payload:{type:"web"}},{option:"Vue.js",key:"vue",payload:{type:"web"}},{option:"Angular",key:"angular",payload:{type:"web"}},{option:"React Native",key:"react-native",payload:{type:"mobile"}},{option:"Flutter",key:"flutter",payload:{type:"mobile"}},{option:"Electron",key:"electron",payload:{type:"desktop"}}]}
          ></dees-input-dropdown>
          
          <dees-form-submit .text=${"Create Project"}></dees-form-submit>
        </dees-form>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var qs,k2,pw,uw=v(()=>{oe();_t();ift();_1();la();He();qs=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},k2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},pw=(()=>{let t=[Q("dees-input-dropdown")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[];var E=class extends r{static{i=this}static{let T=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],l=[D({type:Boolean})],y=[J()],x=[J()],N=[J()],I=[J()],V=[J()],qs(this,null,n,{kind:"accessor",name:"options",static:!1,private:!1,access:{has:$=>"options"in $,get:$=>$.options,set:($,H)=>{$.options=H}},metadata:T},s,o),qs(this,null,u,{kind:"accessor",name:"selectedOption",static:!1,private:!1,access:{has:$=>"selectedOption"in $,get:$=>$.selectedOption,set:($,H)=>{$.selectedOption=H}},metadata:T},c,d),qs(this,null,l,{kind:"accessor",name:"enableSearch",static:!1,private:!1,access:{has:$=>"enableSearch"in $,get:$=>$.enableSearch,set:($,H)=>{$.enableSearch=H}},metadata:T},f,b),qs(this,null,y,{kind:"accessor",name:"opensToTop",static:!1,private:!1,access:{has:$=>"opensToTop"in $,get:$=>$.opensToTop,set:($,H)=>{$.opensToTop=H}},metadata:T},g,h),qs(this,null,x,{kind:"accessor",name:"filteredOptions",static:!1,private:!1,access:{has:$=>"filteredOptions"in $,get:$=>$.filteredOptions,set:($,H)=>{$.filteredOptions=H}},metadata:T},M,S),qs(this,null,N,{kind:"accessor",name:"highlightedIndex",static:!1,private:!1,access:{has:$=>"highlightedIndex"in $,get:$=>$.highlightedIndex,set:($,H)=>{$.highlightedIndex=H}},metadata:T},_,k),qs(this,null,I,{kind:"accessor",name:"isOpened",static:!1,private:!1,access:{has:$=>"isOpened"in $,get:$=>$.isOpened,set:($,H)=>{$.isOpened=H}},metadata:T},L,A),qs(this,null,V,{kind:"accessor",name:"searchValue",static:!1,private:!1,access:{has:$=>"searchValue"in $,get:$=>$.searchValue,set:($,H)=>{$.searchValue=H}},metadata:T},C,z),qs(null,e={value:i},t,{kind:"class",name:i.name,metadata:T},null,a),E=i=e.value,T&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:T})}static demo=aft;static demoGroups=["Input"];#e=k2(this,s,[]);get options(){return this.#e}set options(T){this.#e=T}#t=(k2(this,o),k2(this,c,null));get selectedOption(){return this.#t}set selectedOption(T){this.#t=T}get value(){return this.selectedOption}set value(T){this.selectedOption=T}#a=(k2(this,d),k2(this,f,!0));get enableSearch(){return this.#a}set enableSearch(T){this.#a=T}#i=(k2(this,b),k2(this,g,!1));get opensToTop(){return this.#i}set opensToTop(T){this.#i=T}#r=(k2(this,h),k2(this,M,[]));get filteredOptions(){return this.#r}set filteredOptions(T){this.#r=T}#s=(k2(this,S),k2(this,_,0));get highlightedIndex(){return this.#s}set highlightedIndex(T){this.#s=T}#n=(k2(this,k),k2(this,L,!1));get isOpened(){return this.#n}set isOpened(T){this.#n=T}#o=(k2(this,A),k2(this,C,""));get searchValue(){return this.#o}set searchValue(T){this.#o=T}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      * {
        box-sizing: border-box;
      }

      :host {
        font-family: ${Qt};
        position: relative;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      .maincontainer {
        display: block;
        position: relative;
      }

      .selectedBox {
        user-select: none;
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 38px;
        padding: 0 40px 0 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        transition: all 0.15s ease;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .selectedBox:hover:not(.disabled) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      .selectedBox:focus-visible {
        outline: none;
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      .selectedBox.disabled {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
        cursor: not-allowed;
        opacity: 0.5;
      }

      /* Dropdown arrow */
      .selectedBox::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        transition: transform 0.15s ease;
      }

      .selectedBox.open::after {
        transform: translateY(-50%) rotate(180deg);
      }

      .selectionBox {
        will-change: transform, opacity;
        pointer-events: none;
        transition: all 0.15s ease;
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
        min-height: 40px;
        max-height: 300px;
        overflow: hidden;
        border-radius: 6px;
        position: absolute;
        user-select: none;
        margin-top: 4px;
        z-index: 50;
        left: 0;
        right: 0;
      }
      
      .selectionBox.top {
        bottom: calc(100% + 4px);
        top: auto;
        margin-top: 0;
        margin-bottom: 4px;
        transform: translateY(8px) scale(0.98);
      }
      
      .selectionBox.bottom {
        top: 100%;
      }

      .selectionBox.show {
        pointer-events: all;
        transform: translateY(0) scale(1);
        opacity: 1;
      }

      /* Options container */
      .options-container {
        max-height: 250px;
        overflow-y: auto;
        padding: 4px;
      }

      /* Options */
      .option {
        transition: all 0.15s ease;
        line-height: 32px;
        padding: 0 8px;
        border-radius: 4px;
        margin: 2px 0;
        cursor: pointer;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      .option.highlighted {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
      }

      .option:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      /* No options message */
      .no-options {
        padding: 8px;
        text-align: center;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        font-style: italic;
      }

      /* Search */
      .search {
        padding: 4px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        margin-bottom: 4px;
      }
      
      .search.bottom {
        border-bottom: none;
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        margin-bottom: 0;
        margin-top: 4px;
      }
      
      .search input {
        display: block;
        width: 100%;
        height: 32px;
        padding: 0 8px;
        background: transparent;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        color: inherit;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s ease;
      }

      .search input::placeholder {
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
      }

      .search input:focus {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
      }

      /* Scrollbar styling */
      .options-container::-webkit-scrollbar {
        width: 8px;
      }

      .options-container::-webkit-scrollbar-track {
        background: transparent;
      }

      .options-container::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
      }

      .options-container::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
        <div class="maincontainer">
          <div
            class="selectedBox ${this.isOpened?"open":""} ${this.disabled?"disabled":""}"
            @click="${()=>!this.disabled&&this.toggleSelectionBox()}"
            tabindex="${this.disabled?"-1":"0"}"
            @keydown="${this.handleSelectedBoxKeydown}"
          >
            ${this.selectedOption?.option||"Select an option"}
          </div>
          <div class="selectionBox ${this.isOpened?"show":""} ${this.opensToTop?"top":"bottom"}">
            ${this.enableSearch?w`
                  <div class="search">
                    <input 
                      type="text" 
                      placeholder="Search options..." 
                      .value="${this.searchValue}"
                      @input="${this.handleSearch}"
                      @click="${T=>T.stopPropagation()}"
                      @keydown="${this.handleSearchKeydown}"
                    />
                  </div>
                `:null}
            <div class="options-container">
              ${this.filteredOptions.length===0?w`<div class="no-options">No options found</div>`:this.filteredOptions.map((T,$)=>{let H=this.highlightedIndex===$;return w`
                      <div
                        class="option ${H?"highlighted":""}"
                        @click="${()=>this.updateSelection(T)}"
                        @mouseenter="${()=>this.highlightedIndex=$}"
                      >
                        ${T.option}
                      </div>
                    `})}
            </div>
          </div>
        </div>
      </div>
    `}async connectedCallback(){super.connectedCallback(),this.handleClickOutside=this.handleClickOutside.bind(this)}firstUpdated(){this.selectedOption=this.selectedOption||null,this.filteredOptions=this.options}updated(T){super.updated(T),T.has("options")&&(this.filteredOptions=this.options)}async updateSelection(T){this.selectedOption=T,this.isOpened=!1,this.searchValue="",this.filteredOptions=this.options,this.highlightedIndex=0,this.dispatchEvent(new CustomEvent("selectedOption",{detail:T,bubbles:!0})),this.changeSubject.next(this)}handleClickOutside=(k2(this,z),T=>{T.composedPath().includes(this)||(this.isOpened=!1,this.searchValue="",this.filteredOptions=this.options,document.removeEventListener("click",this.handleClickOutside))});async toggleSelectionBox(){if(this.isOpened=!this.isOpened,this.isOpened){let $=this.shadowRoot.querySelector(".selectedBox").getBoundingClientRect(),H=window.innerHeight-$.bottom,O=$.top;this.opensToTop=H<300&&O>H,await this.updateComplete;let G=this.shadowRoot.querySelector(".search input");G&&G.focus(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside)},0)}else this.searchValue="",this.filteredOptions=this.options,document.removeEventListener("click",this.handleClickOutside)}handleSearch(T){let $=T.target.value;this.searchValue=$;let H=$.toLowerCase();this.filteredOptions=this.options.filter(O=>O.option.toLowerCase().includes(H)),this.highlightedIndex=0}handleKeyDown(T){let $=T.key,H=this.filteredOptions.length-1;$==="ArrowDown"?(T.preventDefault(),this.highlightedIndex=this.highlightedIndex+1>H?0:this.highlightedIndex+1):$==="ArrowUp"?(T.preventDefault(),this.highlightedIndex=this.highlightedIndex-1<0?H:this.highlightedIndex-1):$==="Enter"?(T.preventDefault(),this.filteredOptions[this.highlightedIndex]&&this.updateSelection(this.filteredOptions[this.highlightedIndex])):$==="Escape"&&(T.preventDefault(),this.isOpened=!1)}handleSearchKeydown(T){(T.key==="ArrowDown"||T.key==="ArrowUp"||T.key==="Enter")&&this.handleKeyDown(T)}handleSelectedBoxKeydown(T){this.disabled||(T.key==="Enter"||T.key===" "?(T.preventDefault(),this.toggleSelectionBox()):T.key==="ArrowDown"||T.key==="ArrowUp"?(T.preventDefault(),this.isOpened||this.toggleSelectionBox()):T.key==="Escape"&&(T.preventDefault(),this.isOpened&&(this.isOpened=!1)))}getValue(){return this.selectedOption}setValue(T){this.selectedOption=T}async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside)}static{k2(i,a)}};return E=i})()});var rft,sft=v(()=>{oe();pV();h2();rft=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-shell {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 24px;
          max-width: 1160px;
          margin: 0 auto;
        }

        .demo-grid {
          display: grid;
          gap: 24px;
        }

        @media (min-width: 960px) {
          .demo-grid--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

        .demo-stack {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .demo-note {
          margin-top: 16px;
          padding: 16px;
          border-radius: 12px;
          border: 1px solid ${p.bdTheme("hsl(217 91% 90%)","hsl(215 20% 26%)")};
          background: ${p.bdTheme("hsl(213 100% 97%)","hsl(215 20% 12%)")};
          color: ${p.bdTheme("hsl(215 25% 32%)","hsl(215 20% 82%)")};
          font-size: 13px;
          line-height: 1.55;
        }

        .demo-note strong {
          color: ${p.bdTheme("hsl(217 91% 45%)","hsl(213 93% 68%)")};
          font-weight: 600;
        }
      `}
    </style>

    <div class="demo-shell">
      <dees-panel
        .title=${"Modern file uploader"}
        .subtitle=${"Shadcn-inspired layout with drag & drop, previews and validation"}
      >
        <div class="demo-grid demo-grid--two">
          <div class="demo-stack">
            <dees-input-fileupload
              .label=${"Attachments"}
              .description=${"Upload supporting documents for your request"}
              .accept=${"image/*,.pdf,.zip"}
              .maxSize=${10*1024*1024}
            ></dees-input-fileupload>

            <dees-input-fileupload
              .label=${"Brand assets"}
              .description=${"Upload high-resolution imagery (JPG/PNG)"}
              .accept=${"image/jpeg,image/png"}
              .multiple=${!1}
              .maxSize=${5*1024*1024}
              .buttonText=${"Select cover image"}
            ></dees-input-fileupload>
          </div>

          <div class="demo-stack">
            <dees-input-fileupload
              .label=${"Audio uploads"}
              .description=${"Share podcast drafts (MP3/WAV, max 25MB each)"}
              .accept=${"audio/*"}
              .maxSize=${25*1024*1024}
            ></dees-input-fileupload>

            <dees-input-fileupload
              .label=${"Disabled example"}
              .description=${"Uploader is disabled while moderation is pending"}
              .disabled=${!0}
            ></dees-input-fileupload>
          </div>
        </div>
      </dees-panel>

      <dees-panel
        .title=${"Form integration"}
        .subtitle=${"Combine file uploads with the rest of the DEES form ecosystem"}
      >
        <div class="demo-grid">
          <dees-form>
            <div class="demo-stack">
              <dees-input-text
                .label=${"Project name"}
                .description=${"How should we refer to this project internally?"}
                .required=${!0}
                .key=${"projectName"}
              ></dees-input-text>

              <dees-input-text
                .label=${"Contact email"}
                .inputType=${"email"}
                .required=${!0}
                .key=${"contactEmail"}
              ></dees-input-text>

              <dees-input-fileupload
                .label=${"Statement of work"}
                .description=${"Upload a signed statement of work (PDF, max 15MB)"}
                .required=${!0}
                .accept=${"application/pdf"}
                .maxSize=${15*1024*1024}
                .multiple=${!1}
                .key=${"sow"}
              ></dees-input-fileupload>

              <dees-input-fileupload
                .label=${"Creative references"}
                .description=${"Optional. Upload up to five visual references"}
                .accept=${"image/*"}
                .maxFiles=${5}
                .maxSize=${8*1024*1024}
                .key=${"references"}
              ></dees-input-fileupload>

              <dees-input-text
                .label=${"Notes"}
                .description=${"Add optional context for reviewers"}
                .inputType=${"textarea"}
                .key=${"notes"}
              ></dees-input-text>

              <dees-form-submit .text=${"Submit briefing"}></dees-form-submit>
            </div>
          </dees-form>

          <div class="demo-note">
            <strong>Good to know:</strong>
            <ul>
              <li>Drag & drop highlights the dropzone and supports keyboard activation.</li>
              <li>Accepted file types are summarised automatically from the <code>accept</code> attribute.</li>
              <li>Image uploads show live previews generated via <code>URL.createObjectURL</code>.</li>
              <li>File size and file-count limits surface inline validation messages.</li>
              <li>The component stays compatible with <code>dees-form</code> value accessors.</li>
            </ul>
          </div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var nft,oft=v(()=>{oe();_1();nft=[p.defaultStyles,...Ze.baseStyles,X`
    :host {
      position: relative;
      display: block;
    }


    .input-wrapper {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dropzone {
      position: relative;
      padding: 20px;
      border-radius: 12px;
      border: 1.5px dashed ${p.bdTheme("hsl(215 16% 80%)","hsl(217 20% 25%)")};
      background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20% 12%)")};
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      cursor: pointer;
      outline: none;
    }

    .dropzone:focus-visible {
      box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20% 12%)")},
        0 0 0 4px ${p.bdTheme("hsl(217 91% 60% / 0.5)","hsl(213 93% 68% / 0.4)")};
      border-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
    }

    .dropzone--active {
      border-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      box-shadow: 0 12px 32px ${p.bdTheme("rgba(15, 23, 42, 0.12)","rgba(0, 0, 0, 0.35)")};
      background: ${p.bdTheme("hsl(217 91% 60% / 0.06)","hsl(213 93% 68% / 0.12)")};
    }

    .dropzone--has-files {
      background: ${p.bdTheme("hsl(0 0% 99%)","hsl(215 20% 11%)")};
    }

    .dropzone--disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
    }

    .dropzone__body {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .dropzone__icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      background: ${p.bdTheme("hsl(217 91% 60% / 0.12)","hsl(213 93% 68% / 0.12)")};
      position: relative;
      flex-shrink: 0;
    }

    .dropzone__icon dees-icon {
      font-size: 22px;
    }

    .dropzone__loader {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 2px solid ${p.bdTheme("rgba(15, 23, 42, 0.15)","rgba(255, 255, 255, 0.15)")};
      border-top-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      animation: loader-spin 0.6s linear infinite;
    }

    .dropzone__content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .dropzone__headline {
      font-size: 15px;
      font-weight: 600;
      color: ${p.bdTheme("hsl(222 47% 11%)","hsl(210 20% 96%)")};
    }

    .dropzone__subline {
      font-size: 13px;
      color: ${p.bdTheme("hsl(215 16% 46%)","hsl(215 16% 70%)")};
    }

    .dropzone__browse {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin-left: 4px;
      color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }

    .dropzone__browse:hover {
      text-decoration: underline;
    }

    .dropzone__browse:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .dropzone__meta {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: ${p.bdTheme("hsl(215 16% 50%)","hsl(215 16% 72%)")};
    }

    .dropzone__meta span {
      padding: 4px 10px;
      border-radius: 999px;
      background: ${p.bdTheme("hsl(217 91% 95%)","hsl(213 93% 18%)")};
      border: 1px solid ${p.bdTheme("hsl(217 91% 90%)","hsl(213 93% 24%)")};
    }

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid ${p.bdTheme("hsl(217 91% 90%)","hsl(213 93% 24%)")};
    }

    .file-list__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 68%)")};
    }

    .file-list__clear {
      appearance: none;
      border: none;
      background: none;
      color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      cursor: pointer;
      font-weight: 500;
      font-size: 13px;
      padding: 0;
    }

    .file-list__clear:hover {
      text-decoration: underline;
    }

    .file-list__items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: ${p.bdTheme("hsl(0 0% 100% / 0.5)","hsl(215 20% 16% / 0.5)")};
      border: 1px solid ${p.bdTheme("hsl(213 27% 92%)","hsl(217 25% 26%)")};
      border-radius: 8px;
      transition: background 0.15s ease;
    }

    .file-row:hover {
      background: ${p.bdTheme("hsl(0 0% 100% / 0.8)","hsl(215 20% 16% / 0.8)")};
    }

    .file-thumb {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: ${p.bdTheme("hsl(214 31% 92%)","hsl(217 32% 18%)")};
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

    .file-thumb dees-icon {
      font-size: 18px;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 70%)")};
      display: block;
      width: 18px;
      height: 18px;
      line-height: 1;
      flex-shrink: 0;
    }


    .thumb-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .file-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .file-name {
      font-weight: 600;
      font-size: 14px;
      color: ${p.bdTheme("hsl(222 47% 11%)","hsl(210 20% 96%)")};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-details {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
      color: ${p.bdTheme("hsl(215 16% 46%)","hsl(215 16% 70%)")};
    }

    .file-size {
      font-variant-numeric: tabular-nums;
    }

    .file-type {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid ${p.bdTheme("hsl(214 31% 86%)","hsl(217 32% 28%)")};
      color: ${p.bdTheme("hsl(215 16% 46%)","hsl(215 16% 70%)")};
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1;
    }

    .file-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .remove-button {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
      color: ${p.bdTheme("hsl(215 16% 52%)","hsl(215 16% 68%)")};
    }

    .remove-button:hover {
      background: ${p.bdTheme("hsl(0 72% 50% / 0.08)","hsl(0 62% 32% / 0.15)")};
      color: ${p.bdTheme("hsl(0 72% 46%)","hsl(0 70% 70%)")};
    }

    .remove-button:active {
      transform: scale(0.96);
    }

    .remove-button dees-icon {
      display: block;
      width: 14px;
      height: 14px;
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
    }

    .validation-message {
      font-size: 13px;
      color: ${p.bdTheme("hsl(0 72% 40%)","hsl(0 70% 68%)")};
      line-height: 1.5;
    }

    @keyframes loader-spin {
      to {
        transform: rotate(360deg);
      }
    }
  `]});var Wr,s2,hw,pV=v(()=>{_1();sft();oft();At();V4();oe();Wr=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},s2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},hw=(()=>{let t=[Q("dees-input-fileupload")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[];var H=class extends r{static{i=this}static{let O=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({attribute:!1})],u=[J()],l=[J()],y=[D({type:String})],x=[D({type:String})],N=[D({type:Boolean})],I=[D({type:Number})],V=[D({type:Number})],E=[D({type:String,reflect:!0})],Wr(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:G=>"value"in G,get:G=>G.value,set:(G,ne)=>{G.value=ne}},metadata:O},s,o),Wr(this,null,u,{kind:"accessor",name:"state",static:!1,private:!1,access:{has:G=>"state"in G,get:G=>G.state,set:(G,ne)=>{G.state=ne}},metadata:O},c,d),Wr(this,null,l,{kind:"accessor",name:"isLoading",static:!1,private:!1,access:{has:G=>"isLoading"in G,get:G=>G.isLoading,set:(G,ne)=>{G.isLoading=ne}},metadata:O},f,b),Wr(this,null,y,{kind:"accessor",name:"buttonText",static:!1,private:!1,access:{has:G=>"buttonText"in G,get:G=>G.buttonText,set:(G,ne)=>{G.buttonText=ne}},metadata:O},g,h),Wr(this,null,x,{kind:"accessor",name:"accept",static:!1,private:!1,access:{has:G=>"accept"in G,get:G=>G.accept,set:(G,ne)=>{G.accept=ne}},metadata:O},M,S),Wr(this,null,N,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:G=>"multiple"in G,get:G=>G.multiple,set:(G,ne)=>{G.multiple=ne}},metadata:O},_,k),Wr(this,null,I,{kind:"accessor",name:"maxSize",static:!1,private:!1,access:{has:G=>"maxSize"in G,get:G=>G.maxSize,set:(G,ne)=>{G.maxSize=ne}},metadata:O},L,A),Wr(this,null,V,{kind:"accessor",name:"maxFiles",static:!1,private:!1,access:{has:G=>"maxFiles"in G,get:G=>G.maxFiles,set:(G,ne)=>{G.maxFiles=ne}},metadata:O},C,z),Wr(this,null,E,{kind:"accessor",name:"validationState",static:!1,private:!1,access:{has:G=>"validationState"in G,get:G=>G.validationState,set:(G,ne)=>{G.validationState=ne}},metadata:O},T,$),Wr(null,e={value:i},t,{kind:"class",name:i.name,metadata:O},null,a),H=i=e.value,O&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:O})}static demo=rft;static demoGroups=["Input"];#e=s2(this,s,[]);get value(){return this.#e}set value(O){this.#e=O}#t=(s2(this,o),s2(this,c,"idle"));get state(){return this.#t}set state(O){this.#t=O}#a=(s2(this,d),s2(this,f,!1));get isLoading(){return this.#a}set isLoading(O){this.#a=O}#i=(s2(this,b),s2(this,g,"Select files"));get buttonText(){return this.#i}set buttonText(O){this.#i=O}#r=(s2(this,h),s2(this,M,""));get accept(){return this.#r}set accept(O){this.#r=O}#s=(s2(this,S),s2(this,_,!0));get multiple(){return this.#s}set multiple(O){this.#s=O}#n=(s2(this,k),s2(this,L,0));get maxSize(){return this.#n}set maxSize(O){this.#n=O}#o=(s2(this,A),s2(this,C,0));get maxFiles(){return this.#o}set maxFiles(O){this.#o=O}#l=(s2(this,z),s2(this,T,null));get validationState(){return this.#l}set validationState(O){this.#l=O}#c=(s2(this,$),"");get validationMessage(){return this.#c}set validationMessage(O){thi
      <div class="input-wrapper">
        <dees-label
          .label=${this.label}
          .description=${this.description}
          .required=${this.required}
        ></dees-label>
        <div
          class="dropzone ${this.state==="dragOver"?"dropzone--active":""} ${this.disabled?"dropzone--disabled":""} ${this.value.length>0?"dropzone--has-files":""}"
          role="button"
          tabindex=${this.disabled?-1:0}
          aria-disabled=${this.disabled}
          aria-label=${`Select files${O?` (${O})`:""}`}
          @click=${this.handleDropzoneClick}
          @keydown=${this.handleDropzoneKeydown}
        >
          <input
            class="file-input"
            style="position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; top: 0; left: 0; overflow: hidden;"
            type="file"
            ?multiple=${this.multiple}
            accept=${this.accept||""}
            ?disabled=${this.disabled}
            @change=${this.handleFileInputChange}
            tabindex="-1"
          />
          <div class="dropzone__body">
            <div class="dropzone__icon">
              ${this.isLoading?w`<span class="dropzone__loader" aria-hidden="true"></span>`:w`<dees-icon icon="lucide:FolderOpen"></dees-icon>`}
            </div>
            <div class="dropzone__content">
              <span class="dropzone__headline">${this.buttonText||"Select files"}</span>
              <span class="dropzone__subline">
                Drag and drop files here or
                <button
                  type="button"
                  class="dropzone__browse"
                  @click=${this.handleBrowseClick}
                  ?disabled=${this.disabled}
                >
                  browse
                </button>
              </span>
            </div>
          </div>
          <div class="dropzone__meta">
            ${G.map(ne=>w`<span>${ne}</span>`)}
          </div>
          ${this.renderFileList()}
        </div>
        ${this.validationMessage?w`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`:w``}
      </div>
    `}renderFileList(){return this.value.length===0?w``:w`
      <div class="file-list">
        <div class="file-list__header">
          <span>${this.value.length} file${this.value.length===1?"":"s"} selected</span>
          ${this.value.length>0?w`<button type="button" class="file-list__clear" @click=${this.handleClearAll}>Clear ${this.value.length>1?"all":""}</button>`:w``}
        </div>
        <div class="file-list__items">
          ${this.value.map(O=>this.renderFileRow(O))}
        </div>
      </div>
    `}renderFileRow(O){let G=this.getFileType(O),ne=this.canShowPreview(O)?this.getPreviewUrl(O):null;return w`
      <div class="file-row ${G}-file">
        <div class="file-thumb" aria-hidden="true">
          ${ne?w`<img class="thumb-image" src=${ne} alt=${`Preview of ${O.name}`}>`:w`<dees-icon icon=${this.getFileIcon(O)}></dees-icon>`}
        </div>
        <div class="file-meta">
          <div class="file-name" title=${O.name}>${O.name}</div>
          <div class="file-details">
            <span class="file-size">${this.formatFileSize(O.size)}</span>
            ${G!=="file"?w`<span class="file-type">${G}</span>`:w``}
          </div>
        </div>
        <div class="file-actions">
          <button
            type="button"
            class="remove-button"
            @click=${()=>this.removeFile(O)}
            aria-label=${`Remove ${O.name}`}
          >
            <dees-icon icon="lucide:X"></dees-icon>
          </button>
        </div>
      </div>
    `}handleFileInputChange=async O=>{this.isLoading=!1;let G=O.target,ne=Array.from(G.files??[]);ne.length>0&&await this.addFiles(ne),G.value=""};handleDropzoneClick=O=>{this.disabled||O.target.closest(".dropzone__browse, .file-list")||this.openFileSelector()};handleBrowseClick=O=>{this.disabled||(O.stopPropagation(),this.openFileSelector())};handleDropzoneKeydown=O=>{this.disabled||(O.key==="Enter"||O.key===" ")&&(O.preventDefault(),this.openFileSelector())};handleClearAll=O=>{O.preventDefault(),this.clearAll()};handleDragEvent=async O=>{if(O.preventDefault(),O.stopPropagation(),!this.disabled){if(O.type==="dragenter"||O.type==="dragover"){O.dataTransfer&&(O.dataTransfer.dropEffect="copy"),this.state="dragOver";return}if(O.type==="dragleave"){if(!this.dropArea){this.state="idle";return}let G=this.dropArea.getBoundingClientRect(),{clientX:ne=0,clientY:U=0}=O;(ne<=G.left||ne>=G.right||U<=G.top||U>=G.bottom)&&(this.state="idle");return}if(O.type==="drop"){this.state="idle";let G=Array.from(O.dataTransfer?.files??[]);G.length>0&&await this.addFiles(G)}}};attachDropListeners(){this.dropArea&&["dragenter","dragover","dragleave","drop"].forEach(O=>{this.dropArea.addEventListener(O,this.handleDragEvent)})}detachDropListeners(){this.dropArea&&["dragenter","dragover","dragleave","drop"].forEach(O=>{this.dropArea.removeEventListener(O,this.handleDragEvent)})}rebindInteractiveElements(){let O=this.shadowRoot?.querySelector(".dropzone");O!==this.dropArea&&(this.detachDropListeners(),this.dropArea=O,this.attachDropListeners())}formatFileSize(O){let G=["Bytes","KB","MB","GB"];if(O===0)return"0 Bytes";let ne=Math.min(Math.floor(Math.log(O)/Math.log(1024)),G.length-1),U=O/Math.pow(1024,ne);return`${Math.round(U*100)/100} ${G[ne]}`}getFileType(O){let G=O.type.toLowerCase();return G.startsWith("image/")?"image":G==="application/pdf"?"pdf":G.includes("word")||G.includes("document")?"doc":G.includes("sheet")||G.includes("excel")?"spreadsheet":G.includes("presentation")||G.includes("powerpoint")?"presentation":G.startsWith("video/")?"video":G.startsWith("audio/")?"audio":G.includes("zip")||G.includes("compressed")?"archive":"file"}getFileIcon(O){let G=this.getFileType(O);return{image:"lucide:FileImage",pdf:"lucide:FileText",doc:"lucide:FileText",spreadsheet:"lucide:FileSpreadsheet",presentation:"lucide:FileBarChart",video:"lucide:FileVideo",audio:"lucide:FileAudio",archive:"lucide:FileArchive",file:"lucide:File"}[G]??"lucide:File"}canShowPreview(O){return O.type.startsWith("image/")&&O.size<5*1024*1024}validateFile(O){if(this.maxSize>0&&O.size>this.maxSize)return this.validationMessage=`File "${O.name}" exceeds the maximum size of ${this.formatFileSize(this.maxSize)}`,this.validationState="invalid",!1;if(this.accept){let G=this.accept.split(",").map(ne=>ne.trim()).filter(ne=>ne.length>0);if(G.length>0){let ne=!1;for(let U of G)if(U.startsWith(".")){if(O.name.toLowerCase().endsWith(U.toLowerCase())){ne=!0;break}}else if(U.endsWith("/*")){let be=U.slice(0,-2);if(O.type.startsWith(be)){ne=!0;break}}else if(O.type===U){ne=!0;break}if(!ne)return this.validationMessage=`File type not accepted. Allowed: ${G.join(", ")}`,this.validationState="invalid",!1}}return!0}getPreviewUrl(O){let G=this.previewUrlMap.get(O);return G||(G=URL.createObjectURL(O),this.previewUrlMap.set(O,G)),G}releasePreview(O){let G=this.previewUrlMap.get(O);G&&(URL.revokeObjectURL(G),this.previewUrlMap.delete(O))}getAcceptedSummary(){if(!this.accept)return null;let O=Array.from(new Set(this.accept.split(",").map(G=>G.trim()).filter(G=>G.length>0).map(G=>this.formatAcceptToken(G)))).filter(Boolean);return O.length===0?null:O.length===1?O[0]:O.length===2?`${O[0]}, ${O[1]}`:`${O.slice(0,2).join(", ")}\u2026`}formatAcceptToken(O){if(O==="*/*")return"All files";if(O.endsWith("/*")){let U=O.split("/")[0];return U?`${U.charAt(0).toUpperCase()}${U.slice(1)} files`:"All files"}return O.startsWith(".")?O.slice(1).toUpperCase():O.includes("pdf")?"PDF":O.includes("zip")?"ZIP":O.includes("json")?"JSON":O.includes("msword")?"DOC":O.includes("wordprocessingml")?"DOCX":O.includes("excel")?"XLS
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .payment-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic IBAN Input"} .subtitle=${"International Bank Account Number with automatic formatting"}>
        <div class="input-group">
          <dees-input-iban
            .label=${"Bank Account IBAN"}
            .description=${"Enter your International Bank Account Number"}
          ></dees-input-iban>

          <dees-input-iban
            .label=${"Verified IBAN"}
            .description=${"This IBAN has been verified"}
            .value=${"DE89370400440532013000"}
          ></dees-input-iban>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Payment Information"} .subtitle=${"IBAN input with horizontal layout for payment forms"}>
        <div class="payment-group">
          <dees-input-text 
            .label=${"Account Holder"} 
            .layoutMode=${"horizontal"}
            .value=${"John Doe"}
          ></dees-input-text>
          
          <dees-input-iban 
            .label=${"IBAN"} 
            .layoutMode=${"horizontal"}
            .value=${"GB82WEST12345698765432"}
          ></dees-input-iban>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Validation & States"} .subtitle=${"Required fields and disabled states"}>
        <div class="input-group">
          <dees-input-iban
            .label=${"Payment Account"}
            .description=${"Required for processing payments"}
            .required=${!0}
          ></dees-input-iban>

          <dees-input-iban
            .label=${"Locked IBAN"}
            .description=${"This IBAN cannot be changed"}
            .value=${"FR1420041010050500013M02606"}
            .disabled=${!0}
          ></dees-input-iban>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Bank Transfer Form"} .subtitle=${"Complete form example with IBAN validation"}>
        <dees-form>
          <dees-input-text .label=${"Recipient Name"} .required=${!0}></dees-input-text>
          <dees-input-iban .label=${"Recipient IBAN"} .required=${!0}></dees-input-iban>
          <dees-input-text .label=${"Transfer Reference"} .description=${"Optional reference for the transfer"}></dees-input-text>
          <dees-input-text .label=${"Amount"} .inputType=${"number"} .required=${!0}></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var mw,cl,gw,bV=v(()=>{oe();_t();_1();fft();gft();He();mw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},cl=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},gw=(()=>{let t=[Q("dees-input-iban")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[D({type:String})],mw(this,null,n,{kind:"accessor",name:"enteredString",static:!1,private:!1,access:{has:h=>"enteredString"in h,get:h=>h.enteredString,set:(h,x)=>{h.enteredString=x}},metadata:g},s,o),mw(this,null,u,{kind:"accessor",name:"enteredIbanIsValid",static:!1,private:!1,access:{has:h=>"enteredIbanIsValid"in h,get:h=>h.enteredIbanIsValid,set:(h,x)=>{h.enteredIbanIsValid=x}},metadata:g},c,d),mw(this,null,l,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:h=>"value"in h,get:h=>h.value,set:(h,x)=>{h.value=x}},metadata:g},f,b),mw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=mft;static demoGroups=["Input"];#e=cl(this,s,"");get enteredString(){return this.#e}set enteredString(g){this.#e=g}#t=(cl(this,o),cl(this,c,!1));get enteredIbanIsValid(){return this.#t}set enteredIbanIsValid(g){this.#t=g}#a=(cl(this,d),cl(this,f,""));get value(){return this.#a}set value(g){this.#a=g}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      /* IBAN input specific styles can go here */
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label||"IBAN"} .description=${this.description}></dees-label>
        <dees-input-text
          .value=${this.value}
          .disabled=${this.disabled}
          .required=${this.required}
          .placeholder=${"DE89 3704 0044 0532 0130 00"}
          @input=${g=>{this.validateIban(g)}}
        ></dees-input-text>
      </div>
    `}firstUpdated(g){super.firstUpdated(g);let h=this.shadowRoot.querySelector("dees-input-text");h&&h.changeSubject&&h.changeSubject.subscribe(()=>{this.changeSubject.next(this)})}async validateIban(g){let h=g.target,x=h?.value;x=x||"",this.enteredString!==x&&(this.enteredString=gV(x)||"",h&&(h.value=this.enteredString,this.value=this.enteredString,this.changeSubject.next(this))),this.enteredIbanIsValid=mV(this.enteredString.replace(/ /g,""));let M=this.shadowRoot.querySelector("dees-input-text");M.validationText=`IBAN is valid: ${this.enteredIbanIsValid}`}getValue(){return this.value}setValue(g){this.value=g,this.enteredString=gV(g)||""}constructor(){super(...arguments),cl(this,b)}static{cl(i,a)}};return y=i})()});var bft,vft=v(()=>{oe();bft=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 48px;
          background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
          min-height: 100vh;
        }
        
        .section {
          background: ${p.bdTheme("#ffffff","#18181b")};
          border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
          border-radius: 8px;
          padding: 24px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
          color: ${p.bdTheme("#09090b","#fafafa")};
        }
        
        .section-description {
          font-size: 14px;
          color: ${p.bdTheme("#71717a","#a1a1aa")};
          margin-bottom: 24px;
        }
        
        .settings-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        
        @media (max-width: 768px) {
          .settings-grid {
            grid-template-columns: 1fr;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="section">
        <div class="section-title">Multi-Option Toggle</div>
        <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
        
        <dees-input-multitoggle
          .label=${"Display Mode"}
          .description=${"Choose how content is displayed"}
          .options=${["List View","Grid View","Compact"]}
          .selectedOption=${"Grid View"}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-input-multitoggle
          .label=${"T-Shirt Size"}
          .description=${"Select your preferred size"}
          .options=${["XS","S","M","L","XL","XXL"]}
          .selectedOption=${"M"}
        ></dees-input-multitoggle>
      </div>
      
      <div class="section">
        <div class="section-title">Boolean Toggle</div>
        <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
        
        <dees-input-multitoggle
          .label=${"Notifications"}
          .description=${"Enable or disable push notifications"}
          .type=${"boolean"}
          .selectedOption=${"true"}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-input-multitoggle
          .label=${"Theme Mode"}
          .description=${"Switch between light and dark theme"}
          .type=${"boolean"}
          .booleanTrueName=${"Dark"}
          .booleanFalseName=${"Light"}
          .selectedOption=${"Dark"}
        ></dees-input-multitoggle>
      </div>
      
      <div class="section">
        <div class="section-title">Settings Grid</div>
        <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
        
        <div class="settings-grid">
          <dees-input-multitoggle
            .label=${"Auto-Save"}
            .type=${"boolean"}
            .booleanTrueName=${"Enabled"}
            .booleanFalseName=${"Disabled"}
            .selectedOption=${"Enabled"}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${"Language"}
            .options=${["English","German","French","Spanish"]}
            .selectedOption=${"English"}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${"Quality"}
            .options=${["Low","Medium","High","Ultra"]}
            .selectedOption=${"High"}
          ></dees-input-multitoggle>
          
          <dees-input-multitoggle
            .label=${"Privacy"}
            .type=${"boolean"}
            .booleanTrueName=${"Private"}
            .booleanFalseName=${"Public"}
            .selectedOption=${"Private"}
          ></dees-input-multitoggle>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">States & Form Integration</div>
        <div class="section-description">Examples of disabled states and integration within forms.</div>
        
        <dees-input-multitoggle
          .label=${"Account Type"}
          .description=${"This setting is locked"}
          .options=${["Free","Pro","Enterprise"]}
          .selectedOption=${"Enterprise"}
          .disabled=${!0}
        ></dees-input-multitoggle>
        
        <br><br>
        
        <dees-form>
          <dees-input-text .label=${"Project Name"} .required=${!0}></dees-input-text>
          <dees-input-multitoggle
            .label=${"Visibility"}
            .type=${"boolean"}
            .booleanTrueName=${"Public"}
            .booleanFalseName=${"Private"}
            .selectedOption=${"Private"}
          ></dees-input-multitoggle>
          <dees-input-multitoggle
            .label=${"License"}
            .options=${["MIT","Apache 2.0","GPL v3","Proprietary"]}
            .selectedOption=${"MIT"}
          ></dees-input-multitoggle>
        </dees-form>
      </div>
    </div>
  </dees-demowrapper>
`});var dl,Za,bw,vV=v(()=>{oe();_1();xi();vft();He();dl=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Za=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},bw=(()=>{let t=[Q("dees-input-multitoggle")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[];var I=class extends r{static{i=this}static{let L=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],l=[D()],y=[D({type:Array})],x=[D()],N=[D({type:Boolean})],dl(this,null,n,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:A=>"type"in A,get:A=>A.type,set:(A,V)=>{A.type=V}},metadata:L},s,o),dl(this,null,u,{kind:"accessor",name:"booleanTrueName",static:!1,private:!1,access:{has:A=>"booleanTrueName"in A,get:A=>A.booleanTrueName,set:(A,V)=>{A.booleanTrueName=V}},metadata:L},c,d),dl(this,null,l,{kind:"accessor",name:"booleanFalseName",static:!1,private:!1,access:{has:A=>"booleanFalseName"in A,get:A=>A.booleanFalseName,set:(A,V)=>{A.booleanFalseName=V}},metadata:L},f,b),dl(this,null,y,{kind:"accessor",name:"options",static:!1,private:!1,access:{has:A=>"options"in A,get:A=>A.options,set:(A,V)=>{A.options=V}},metadata:L},g,h),dl(this,null,x,{kind:"accessor",name:"selectedOption",static:!1,private:!1,access:{has:A=>"selectedOption"in A,get:A=>A.selectedOption,set:(A,V)=>{A.selectedOption=V}},metadata:L},M,S),dl(this,null,N,{kind:"accessor",name:"boolValue",static:!1,private:!1,access:{has:A=>"boolValue"in A,get:A=>A.boolValue,set:(A,V)=>{A.boolValue=V}},metadata:L},_,k),dl(null,e={value:i},t,{kind:"class",name:i.name,metadata:L},null,a),I=i=e.value,L&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:L})}static demo=bft;static demoGroups=["Input"];#e=Za(this,s,"multi");get type(){return this.#e}set type(L){this.#e=L}#t=(Za(this,o),Za(this,c,"true"));get booleanTrueName(){return this.#t}set booleanTrueName(L){this.#t=L}#a=(Za(this,d),Za(this,f,"false"));get booleanFalseName(){return this.#a}set booleanFalseName(L){this.#a=L}#i=(Za(this,b),Za(this,g,[]));get options(){return this.#i}set options(L){this.#i=L}#r=(Za(this,h),Za(this,M,""));get selectedOption(){return this.#r}set selectedOption(L){this.#r=L}#s=(Za(this,S),Za(this,_,!1));get boolValue(){return this.#s}set boolValue(L){this.#s=L}get value(){return this.type==="boolean"?this.selectedOption===this.booleanTrueName:this.selectedOption}set value(L){this.type==="boolean"&&typeof L=="boolean"?this.selectedOption=L?this.booleanTrueName:this.booleanFalseName:this.selectedOption=L,this.requestUpdate(),this.hasUpdated&&requestAnimationFrame(()=>{this.setIndicator()})}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme("#09090b","#fafafa")};
        user-select: none;
      }

      .selections {
        position: relative;
        display: inline-flex;
        align-items: center;
        background: ${p.bdTheme("#ffffff","#18181b")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        padding: 4px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      }

      .option {
        position: relative;
        padding: 8px 20px;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.2s ease;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#71717a")};
        line-height: 1;
        z-index: 2;
      }

      .option:hover {
        color: ${p.bdTheme("#18181b","#e4e4e7")};
      }

      .option.selected {
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      .indicator {
        opacity: 0;
        position: absolute;
        height: calc(100% - 8px);
        top: 4px;
        border-radius: 6px;
        background: ${p.bdTheme("rgba(59, 130, 246, 0.15)","rgba(59, 130, 246, 0.15)")};
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
      }
      
      .indicator.no-transition {
        transition: none;
      }
      
      :host([disabled]) .selections {
        opacity: 0.5;
        cursor: not-allowed;
      }

      :host([disabled]) .option {
        cursor: not-allowed;
        pointer-events: none;
      }

      :host([disabled]) .indicator {
        background: ${p.bdTheme("rgba(113, 113, 122, 0.15)","rgba(113, 113, 122, 0.15)")};
      }
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description}></dees-label>
        <div class="mainbox">
          <div class="selections">
          <div class="indicator"></div>
          ${this.options.map(L=>w`<div class="option ${L===this.selectedOption?"selected":""}" @click=${()=>this.handleSelection(L)}>
                ${L}
              </div> `)}
          </div>
        </div>
      </div>
    `}async connectedCallback(){await super.connectedCallback(),this.type==="boolean"&&this.options.length===0&&(this.options=[this.booleanTrueName||"true",this.booleanFalseName||"false"],this.selectedOption||(this.selectedOption=this.booleanFalseName||"false")),!this.selectedOption&&this.options.length>0&&(this.selectedOption=this.options[0])}async firstUpdated(L){super.firstUpdated(L),this.type==="boolean"&&(this.options=[this.booleanTrueName||"true",this.booleanFalseName||"false"]),await this.updateComplete,document.fonts&&await document.fonts.ready,await new Promise(A=>requestAnimationFrame(A)),this.setIndicator()}async handleSelection(L){this.disabled||(this.selectedOption=L,this.requestUpdate(),this.changeSubject.next(this),await this.updateComplete,this.setIndicator())}indicatorInitialized=(Za(this,k),!1);async setIndicator(){let L=this.shadowRoot.querySelector(".indicator"),A=this.options.indexOf(this.selectedOption);if(A===-1||!L){L&&(L.style.opacity="0");return}let V=this.shadowRoot.querySelector(`.option:nth-child(${A+2})`);L&&V&&(this.indicatorInitialized||(L.classList.add("no-transition"),this.indicatorInitialized=!0,setTimeout(()=>{L.classList.remove("no-transition")},50)),L.style.width=`${V.clientWidth}px`,L.style.left=`${V.offsetLeft}px`,L.style.opacity="1")}getValue(){return this.type==="boolean"?this.selectedOption===this.booleanTrueName:this.selectedOption}setValue(L){this.type==="boolean"&&typeof L=="boolean"?this.selectedOption=L?this.booleanTrueName||"true":this.booleanFalseName||"false":this.selectedOption=L,this.requestUpdate(),this.hasUpdated&&requestAnimationFrame(()=>{this.setIndicator()})}static{Za(i,a)}};return I=i})()});var yft,xft=v(()=>{oe();yft=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .horizontal-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic Phone Input"} .subtitle=${"Automatic formatting for phone numbers"}>
        <div class="input-group">
          <dees-input-phone
            .label=${"Phone Number"}
            .description=${"Enter your phone number with country code"}
            .value=${"5551234567"}
          ></dees-input-phone>

          <dees-input-phone
            .label=${"Contact Phone"}
            .description=${"Required for account verification"}
            .required=${!0}
            .placeholder=${"+1 (555) 000-0000"}
          ></dees-input-phone>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Phone inputs arranged horizontally"}>
        <div class="horizontal-group">
          <dees-input-phone 
            .label=${"Mobile"} 
            .layoutMode=${"horizontal"}
            .value=${"4155551234"}
          ></dees-input-phone>
          
          <dees-input-phone 
            .label=${"Office"} 
            .layoutMode=${"horizontal"}
            .placeholder=${"+1 (800) 555-0000"}
          ></dees-input-phone>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"International Numbers"} .subtitle=${"Supports formatting for numbers with country codes"}>
        <div class="input-group">
          <dees-input-phone
            .label=${"International Contact"}
            .description=${"Automatically formats international numbers"}
            .value=${"441234567890"}
          ></dees-input-phone>

          <dees-input-phone
            .label=${"Emergency Contact"}
            .value=${"911"}
            .disabled=${!0}
          ></dees-input-phone>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Form Integration"} .subtitle=${"Phone input as part of a contact form"}>
        <dees-form>
          <dees-input-text .label=${"Full Name"} .required=${!0}></dees-input-text>
          <dees-input-phone .label=${"Phone Number"} .required=${!0}></dees-input-phone>
          <dees-input-text .label=${"Email"} .inputType=${"email"}></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var vw,pl,yw,yV=v(()=>{oe();_t();_1();xft();He();vw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},pl=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},yw=(()=>{let t=[Q("dees-input-phone")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[D({type:String})],l=[D({type:String})],vw(this,null,n,{kind:"accessor",name:"formattedPhone",static:!1,private:!1,access:{has:h=>"formattedPhone"in h,get:h=>h.formattedPhone,set:(h,x)=>{h.formattedPhone=x}},metadata:g},s,o),vw(this,null,u,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:h=>"value"in h,get:h=>h.value,set:(h,x)=>{h.value=x}},metadata:g},c,d),vw(this,null,l,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:h=>"placeholder"in h,get:h=>h.placeholder,set:(h,x)=>{h.placeholder=x}},metadata:g},f,b),vw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=yft;static demoGroups=["Input"];#e=pl(this,s,"");get formattedPhone(){return this.#e}set formattedPhone(g){this.#e=g}#t=(pl(this,o),pl(this,c,""));get value(){return this.#t}set value(g){this.#t=g}#a=(pl(this,d),pl(this,f,"+1 (555) 123-4567"));get placeholder(){return this.#a}set placeholder(g){this.#a=g}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      /* Phone input specific styles can go here */
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description}></dees-label>
        <dees-input-text
          .value=${this.formattedPhone}
          .disabled=${this.disabled}
          .required=${this.required}
          .placeholder=${this.placeholder}
          @input=${g=>this.handlePhoneInput(g)}
        ></dees-input-text>
      </div>
    `}firstUpdated(g){super.firstUpdated(g),this.value&&(this.formattedPhone=this.formatPhoneNumber(this.value));let h=this.shadowRoot.querySelector("dees-input-text");h&&h.changeSubject&&h.changeSubject.subscribe(()=>{this.changeSubject.next(this)})}handlePhoneInput(g){let h=g.target,x=this.cleanPhoneNumber(h.value),M=this.formatPhoneNumber(x);if(h.value!==M){let S=h.selectionStart||0;h.value=M;let N=this.calculateCursorPosition(x,M,S);h.setSelectionRange(N,N)}this.formattedPhone=M,this.value=x,this.changeSubject.next(this)}cleanPhoneNumber(g){return g.replace(/\D/g,"")}formatPhoneNumber(g){let h=this.cleanPhoneNumber(g);return h.length===0?"":h.length<=3?h:h.length<=6?`(${h.slice(0,3)}) ${h.slice(3)}`:h.length<=10?`(${h.slice(0,3)}) ${h.slice(3,6)}-${h.slice(6)}`:`+${h.slice(0,h.length-10)} (${h.slice(-10,-7)}) ${h.slice(-7,-4)}-${h.slice(-4)}`}calculateCursorPosition(g,h,x){let M=0;for(let S=0;S<x&&S<h.length;S++)/\d/.test(h[S])||M++;return Math.min(x+M,h.length)}getValue(){return this.value}setValue(g){this.value=g,this.formattedPhone=this.formatPhoneNumber(g)}constructor(){super(...arguments),pl(this,b)}static{pl(i,a)}};return y=i})()});var wft,Mft=v(()=>{oe();x1();h2();wft=()=>w`
  <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("#toggle-all-on"),a=t.querySelector("#toggle-all-off"),i=t.querySelectorAll(".feature-toggles dees-input-toggle");e&&a&&(e.addEventListener("click",()=>{i.forEach(r=>{!r.disabled&&!r.required&&(r.value=!0)})}),a.addEventListener("click",()=>{i.forEach(r=>{!r.disabled&&!r.required&&(r.value=!1)})}))}}>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }

        dees-panel {
          margin-bottom: 24px;
        }

        dees-panel:last-child {
          margin-bottom: 0;
        }

        .toggle-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .horizontal-toggles {
          display: flex;
          gap: 32px;
          flex-wrap: wrap;
        }

        .interactive-section {
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }

        .output-text {
          font-family: monospace;
          font-size: 13px;
          color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(210 40% 80%)")};
          padding: 8px;
          background: ${p.bdTheme("hsl(210 40% 98%)","hsl(215 20.2% 11.8%)")};
          border-radius: 4px;
          min-height: 24px;
        }

        .settings-section {
          background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
          border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
          border-radius: 8px;
          padding: 20px;
        }

        .button-group {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }

        .feature-toggles {
          background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 11.8%)")};
          border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 16.8%)")};
          border-radius: 6px;
          padding: 16px;
        }

        .section-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        }

        .drag-hint {
          font-size: 12px;
          color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
          margin-top: 8px;
          font-style: italic;
        }
      `}
    </style>

    <div class="demo-container">
      <dees-panel .title=${"Basic Toggle"} .subtitle=${"Simple on/off toggle switch with drag support"}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${"Enable feature"}
            .value=${!1}
            .key=${"basic"}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Active toggle"}
            .value=${!0}
            .key=${"active"}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"With description"}
            .value=${!1}
            .description=${"This toggle has additional helper text explaining its purpose"}
            .key=${"withDesc"}
          ></dees-input-toggle>
        </div>
        <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
      </dees-panel>

      <dees-panel .title=${"Toggle States"} .subtitle=${"Different toggle states and configurations"}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${"Default (off)"}
            .value=${!1}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Enabled (on)"}
            .value=${!0}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Disabled (off)"}
            .value=${!1}
            .disabled=${!0}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Disabled (on)"}
            .value=${!0}
            .disabled=${!0}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Required (always on)"}
            .value=${!0}
            .required=${!0}
            .description=${"This toggle cannot be turned off"}
          ></dees-input-toggle>
        </div>
      </dees-panel>

      <dees-panel .title=${"Horizontal Layout"} .subtitle=${"Toggles arranged horizontally for compact interfaces"}>
        <div class="horizontal-toggles">
          <dees-input-toggle
            .label=${"WiFi"}
            .value=${!0}
            .layoutMode=${"horizontal"}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Bluetooth"}
            .value=${!1}
            .layoutMode=${"horizontal"}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"GPS"}
            .value=${!0}
            .layoutMode=${"horizontal"}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"NFC"}
            .value=${!1}
            .layoutMode=${"horizontal"}
          ></dees-input-toggle>
        </div>
      </dees-panel>

      <dees-panel .title=${"Settings Example"} .subtitle=${"Toggles in a typical settings context"}>
        <div class="settings-section">
          <h4 class="section-title">Notification Settings</h4>

          <div class="toggle-group">
            <dees-input-toggle
              .label=${"Push notifications"}
              .value=${!0}
              .description=${"Receive push notifications on your device"}
              .key=${"push"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Email notifications"}
              .value=${!0}
              .description=${"Get important updates via email"}
              .key=${"email"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Sound"}
              .value=${!1}
              .description=${"Play a sound for notifications"}
              .key=${"sound"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Vibration"}
              .value=${!0}
              .description=${"Vibrate for notifications"}
              .key=${"vibration"}
            ></dees-input-toggle>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${"Feature Toggles"} .subtitle=${"Batch operations on multiple toggles"}>
        <div class="button-group">
          <dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
          <dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
        </div>

        <div class="feature-toggles">
          <div class="toggle-group">
            <dees-input-toggle
              .label=${"Dark Mode"}
              .value=${!0}
              .key=${"darkMode"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Auto-save"}
              .value=${!0}
              .key=${"autoSave"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Spell check"}
              .value=${!1}
              .key=${"spellCheck"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Developer mode"}
              .value=${!1}
              .key=${"devMode"}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${"Beta features"}
              .value=${!1}
              .key=${"beta"}
            ></dees-input-toggle>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${"Interactive Example"} .subtitle=${"Toggle to see value changes in real-time"}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${"Airplane mode"}
            .value=${!1}
            @newValue=${t=>{let e=document.querySelector("#airplane-output");e&&(e.textContent=`Airplane mode: ${t.detail?"ON":"OFF"}`)}}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${"Do not disturb"}
            .value=${!1}
            @newValue=${t=>{let e=document.querySelector("#dnd-output");e&&(e.textContent=`Do not disturb: ${t.detail?"ENABLED":"DISABLED"}`)}}
          ></dees-input-toggle>
        </div>

        <div class="interactive-section">
          <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
          <div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var kft,xV,xw,wV=v(()=>{oe();_t();_1();Mft();la();He();kft=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},xV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},xw=(()=>{let t=[Q("dees-input-toggle")],e,a=[],i,r=Ze,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean,reflect:!0})],kft(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:d=>"value"in d,get:d=>d.value,set:(d,l)=>{d.value=l}},metadata:c},s,o),kft(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=wft;static demoGroups=["Input"];#e=xV(this,s,!1);get value(){return this.#e}set value(c){this.#e=c}currentX=(xV(this,o),0);isDragging=!1;hasDragged=!1;startX=0;trackWidth=36;trackHeight=20;knobSize=14;padding=2;maxTravel=16;constructor(){super(),this.labelPosition="right"}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      * {
        box-sizing: border-box;
      }

      :host {
        position: relative;
        cursor: default;
        font-family: ${Qt};
      }

      .maincontainer {
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
      }

      .toggle-track {
        position: relative;
        flex-shrink: 0;
        height: 20px;
        width: 36px;
        border-radius: 10px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        overflow: hidden;
        transition: all 0.15s ease;
        margin-top: 1px;
      }

      .maincontainer:hover .toggle-track {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      :host([value]) .toggle-track {
        background: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
      }

      .toggle-track:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      .toggle-knob {
        position: absolute;
        top: 2px;
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
        transition: left 0.15s ease, background 0.15s ease;
        touch-action: none;
      }

      .toggle-knob.dragging {
        transition: background 0.15s ease;
      }

      :host([value]) .toggle-knob {
        background: white;
      }

      /* Disabled state */
      .maincontainer.disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      .toggle-track.disabled {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      /* Required state (locked on) */
      :host([required][value]) .toggle-track {
        background: ${p.bdTheme("hsl(222.2 47.4% 61.2%)","hsl(217.2 91.2% 49.8%)")};
        border-color: ${p.bdTheme("hsl(222.2 47.4% 61.2%)","hsl(217.2 91.2% 49.8%)")};
        cursor: not-allowed;
      }

      :host([required][value]) .toggle-knob {
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 70%)")};
      }

      /* Label */
      .label-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
      }

      .toggle-label {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
        transition: color 0.15s ease;
        letter-spacing: -0.01em;
      }

      .maincontainer:hover .toggle-label {
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .maincontainer.disabled:hover .toggle-label {
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      /* Description */
      .description-text {
        font-size: 12px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        line-height: 1.5;
      }
    `];render(){return w`
      <div class="input-wrapper">
        <div class="maincontainer ${this.disabled?"disabled":""}" @click="${this.handleClick}">
          <div
            class="toggle-track ${this.disabled?"disabled":""}"
            tabindex="${this.disabled?"-1":"0"}"
            @keydown="${this.handleKeydown}"
          >
            <div
              class="toggle-knob"
              style="left: ${this.padding+this.currentX}px;"
              @pointerdown="${this.onPointerDown}"
              @pointermove="${this.onPointerMove}"
              @pointerup="${this.onPointerUp}"
              @pointercancel="${this.onPointerUp}"
            ></div>
          </div>
          <div class="label-container">
            ${this.label?w`<div class="toggle-label">${this.label}</div>`:""}
            ${this.description?w`<div class="description-text">${this.description}</div>`:""}
          </div>
        </div>
      </div>
    `}async firstUpdated(c){await super.firstUpdated(c),this.required&&!this.value&&(this.value=!0),this.currentX=this.value?this.maxTravel:0,this.requestUpdate()}async handleClick(c){if(this.isDragging||this.hasDragged){c.stopPropagation(),c.preventDefault();return}if(!this.disabled){if(this.required){this.currentX=this.maxTravel,this.requestUpdate(),await new Promise(d=>setTimeout(d,10)),this.currentX=this.maxTravel-3,this.requestUpdate(),await Mt.smartdelay.delayFor(150),this.currentX=this.maxTravel,this.requestUpdate();return}c.stopPropagation(),c.preventDefault(),this.value=!this.value,this.currentX=this.value?this.maxTravel:0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("newValue",{detail:this.value,bubbles:!0})),this.changeSubject.next(this),Mt.smartdelay.delayFor(0).then(()=>{this.hasDragged=!1})}}onPointerDown(c){this.required||this.disabled||(this.isDragging=!0,this.startX=c.clientX-this.currentX,c.target.setPointerCapture(c.pointerId))}onPointerMove(c){if(!this.isDragging)return;let d=c.clientX-this.startX;this.hasDragged=!0;let l=this.shadowRoot?.querySelector(".toggle-knob");l&&l.classList.add("dragging"),this.currentX=Math.max(0,Math.min(d,this.maxTravel)),this.requestUpdate()}onPointerUp(c){if(!this.isDragging||(c.target.releasePointerCapture(c.pointerId),this.isDragging=!1,!this.hasDragged))return;let d=this.shadowRoot?.querySelector(".toggle-knob");d&&d.classList.remove("dragging");let l=this.maxTravel/2;this.value=this.currentX>l,this.currentX=this.value?this.maxTravel:0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("newValue",{detail:this.value,bubbles:!0})),this.changeSubject.next(this),Mt.smartdelay.delayFor(0).then(()=>{this.hasDragged=!1})}updated(c){super.updated(c),c.has("value")&&!this.isDragging&&!this.hasDragged&&(this.currentX=this.value?this.maxTravel:0,this.requestUpdate())}handleKeydown(c){(c.key===" "||c.key==="Enter")&&(c.preventDefault(),this.handleClick(c))}getValue(){return this.value}setValue(c){this.value=c}focus(){let c=this.shadowRoot?.querySelector(".toggle-track");c&&c.focus()}static{xV(i,a)}};return u=i})()});var zft,Sft=v(()=>{oe();zft=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .horizontal-group {
          display: flex;
          gap: 24px;
          align-items: flex-start;
        }
        
        .info-box {
          margin-top: 16px;
          padding: 12px;
          background: #e3f2fd;
          border-radius: 4px;
          font-size: 14px;
          color: #1976d2;
        }
        
        @media (prefers-color-scheme: dark) {
          .info-box {
            background: #1e3a5f;
            color: #90caf9;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"Basic Type List"} .subtitle=${"Add and remove items from a list"}>
        <div class="input-group">
          <dees-input-typelist
            .label=${"Tags"}
            .description=${"Add tags by typing and pressing Enter"}
            .value=${["javascript","typescript","web-components"]}
          ></dees-input-typelist>

          <dees-input-typelist
            .label=${"Team Members"}
            .description=${"Add email addresses of team members"}
            .value=${["alice@example.com","bob@example.com"]}
          ></dees-input-typelist>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Skills & Keywords"} .subtitle=${"Manage lists of skills and keywords"}>
        <div class="input-group">
          <dees-input-typelist
            .label=${"Your Skills"}
            .description=${"List your professional skills"}
            .value=${["HTML","CSS","JavaScript","Node.js","React"]}
          ></dees-input-typelist>

          <div class="horizontal-group">
          <dees-input-typelist
            .label=${"Categories"}
            .layoutMode=${"horizontal"}
            .value=${["Technology","Design","Business"]}
          ></dees-input-typelist>
          
          <dees-input-typelist
            .label=${"Keywords"}
            .layoutMode=${"horizontal"}
            .value=${["innovation","startup","growth"]}
          ></dees-input-typelist>
        </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Required & Disabled States"} .subtitle=${"Different input states for validation"}>
        <div class="input-group">
          <dees-input-typelist
            .label=${"Project Dependencies"}
            .description=${"List all required npm packages"}
            .required=${!0}
            .value=${["@design.estate/dees-element","@design.estate/dees-domtools"]}
          ></dees-input-typelist>

          <dees-input-typelist
            .label=${"System Tags"}
            .description=${"These tags are managed by the system"}
            .disabled=${!0}
            .value=${["system","protected","readonly"]}
          ></dees-input-typelist>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"Article Publishing Form"} .subtitle=${"Complete form with tag management"}>
        <dees-form>
          <dees-input-text .label=${"Article Title"} .required=${!0}></dees-input-text>
          <dees-input-text 
            .label=${"Summary"} 
            .inputType=${"textarea"}
            .description=${"Brief description of the article"}
          ></dees-input-text>
          <dees-input-typelist
            .label=${"Tags"}
            .description=${"Add relevant tags for better discoverability"}
            .value=${["tutorial","web-development"]}
          ></dees-input-typelist>
          <dees-input-typelist
            .label=${"Co-Authors"}
            .description=${"Add email addresses of co-authors"}
          ></dees-input-typelist>
        </dees-form>
        
        <div class="info-box">
          <strong>Tip:</strong> Type a value and press Enter to add it to the list. Click on any item to remove it.
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var MV,Hd,ww,kV=v(()=>{oe();_t();_1();Sft();He();MV=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Hd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ww=(()=>{let t=[Q("dees-input-typelist")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[J()],MV(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:b=>"value"in b,get:b=>b.value,set:(b,y)=>{b.value=y}},metadata:f},s,o),MV(this,null,u,{kind:"accessor",name:"inputValue",static:!1,private:!1,access:{has:b=>"inputValue"in b,get:b=>b.inputValue,set:(b,y)=>{b.inputValue=y}},metadata:f},c,d),MV(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=zft;static demoGroups=["Input"];#e=Hd(this,s,[]);get value(){return this.#e}set value(f){this.#e=f}#t=(Hd(this,o),Hd(this,c,""));get inputValue(){return this.#t}set inputValue(f){this.#t=f}static styles=[Se,...Ze.baseStyles,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme("#333","#fff")};
      }
      .mainbox {
        border-radius: 3px;
        background: ${p.bdTheme("#fafafa","#222222")};
        overflow: hidden;
        border-top: ${p.bdTheme("1px solid #CCC","1px solid #ffffff10")};
        border-bottom: ${p.bdTheme("1px solid #CCC","1px solid #222")};
        border-right: ${p.bdTheme("1px solid #CCC","1px solid #ffffff10")};
        border-left: ${p.bdTheme("1px solid #CCC","1px solid #ffffff10")};
        box-shadow: ${p.bdTheme("0px 1px 4px rgba(0,0,0,0.3)","none")};
        transition: all 0.2s;
        position: relative;
      }
      
      .mainbox:hover {
        filter: ${p.bdTheme("brightness(0.98)","brightness(1.05)")};
      }
      
      .mainbox:focus-within {
        outline: 2px solid ${p.bdTheme("#0069f2","#0084ff")};
        outline-offset: -2px;
      }

      .tags {
        padding: 16px;
        cursor: default;
      }

      .notags {
        text-align: center;
        color: ${p.bdTheme("#999","#666")};
        font-size: 13px;
        font-style: italic;
      }

      input {
        display: block;
        box-sizing: border-box;
        background: ${p.bdTheme("#f5f5f5","#181818")};
        width: 100%;
        outline: none;
        border: none;
        color: inherit;
        padding: 0px 16px;
        overflow: hidden;
        line-height: 32px;
        height: 0px;
        transition: height 0.2s;
        border-top: 1px solid ${p.bdTheme("#e0e0e0","#333")};
      }

      input:focus {
        height: 32px;
        background: ${p.bdTheme("#fafafa","#1a1a1a")};
      }
      
      input::placeholder {
        color: ${p.bdTheme("#999","#666")};
      }

      .tag {
        display: inline-block;
        background: ${p.bdTheme("#e8f5e9","#2d3a2d")};
        color: ${p.bdTheme("#2e7d32","#81c784")};
        padding: 4px 10px;
        border-radius: 4px;
        margin: 3px;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
        border: 1px solid ${p.bdTheme("#c8e6c9","#1b5e20")};
      }
      
      .tag:hover {
        background: ${p.bdTheme("#c8e6c9","#3d4f3d")};
        transform: translateY(-1px);
      }

      .tag .remove {
        margin-left: 8px;
        cursor: pointer;
        opacity: 0.7;
        font-weight: 700;
        font-size: 16px;
        line-height: 1;
        transition: opacity 0.2s;
      }

      .tag .remove:hover {
        opacity: 1;
        color: ${p.bdTheme("#c62828","#ef5350")};
      }
      
      /* Disabled state */
      :host([disabled]) .mainbox {
        opacity: 0.6;
        cursor: not-allowed;
      }
      
      :host([disabled]) .tags {
        cursor: not-allowed;
      }
      
      :host([disabled]) .tag {
        pointer-events: none;
      }
      
      :host([disabled]) input {
        cursor: not-allowed;
        background: ${p.bdTheme("#f0f0f0","#1a1a1a")};
      }
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description}></dees-label>
        <div class="mainbox">
          <div class="tags" @click=${()=>{this.shadowRoot.querySelector("input").focus()}}>
            ${this.value.length===0?w`<div class="notags">No tags yet</div>`:this.value.map(f=>w`
                    <span class="tag">
                      ${f}
                      <span class="remove" @click=${b=>{b.stopPropagation(),this.removeTag(f)}}>×</span>
                    </span>
                  `)}
          </div>
          <input
            type="text"
            placeholder="Type, press Enter to add it..."
            .value=${this.inputValue}
            @input=${f=>{this.inputValue=f.target.value}}
            @keydown=${f=>{f.key==="Enter"&&this.inputValue.trim()&&(f.preventDefault(),this.addTag(this.inputValue.trim()))}}
            .disabled=${this.disabled}
          />
        </div>
      </div>
    `}addTag(f){this.value.includes(f)||(this.value=[...this.value,f],this.inputValue="",this.changeSubject.next(this))}removeTag(f){this.value=this.value.filter(b=>b!==f),this.changeSubject.next(this)}getValue(){return this.value}setValue(f){this.value=f}constructor(){super(...arguments),Hd(this,d)}static{Hd(i,a)}};return l=i})()});var Cft,_ft=v(()=>{zV();i2();oe();Cft=()=>w`
  <style>
    ${X`
      .demoWrapper {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 32px;
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 5%)")};
        overflow-y: auto;
      }
      .demo-container {
        max-width: 1200px;
        margin: 0 auto;
      }
      .demo-section {
        margin-bottom: 48px;
      }
      .demo-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }
      .demo-description {
        font-size: 14px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        margin-bottom: 24px;
      }
      .theme-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1000;
      }
    `}
  </style>
  <div class="demoWrapper">
    <dees-button class="theme-toggle" @click=${()=>{document.body.classList.toggle("bright"),document.body.classList.toggle("dark")}}>Toggle Theme</dees-button>
    
    <div class="demo-container">
      <div class="demo-section">
        <h2 class="demo-title">Basic Table with Actions</h2>
        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
        <dees-table
          heading1="Current Account Statement"
          heading2="Bunq - Payment Account 2 - April 2021"
          .editableFields="${["description"]}"
          .data=${[{date:"2021-04-01",amount:"2464.65 \u20AC",description:"Printing Paper (Office Supplies) - STAPLES BREMEN"},{date:"2021-04-02",amount:"165.65 \u20AC",description:"Logitech Mouse (Hardware) - logi.com OnlineShop"},{date:"2021-04-03",amount:"2999,00 \u20AC",description:"Macbook Pro 16inch (Hardware) - Apple.de OnlineShop"},{date:"2021-04-01",amount:"2464.65 \u20AC",description:"Office-Supplies - STAPLES BREMEN"},{date:"2021-04-01",amount:"2464.65 \u20AC",description:"Office-Supplies - STAPLES BREMEN"}]}
          dataName="transactions"
          .dataActions="${[{name:"upload",iconName:"bell",useTableBehaviour:"upload",type:["inRow"],actionFunc:async t=>{alert(t.item.amount)}},{name:"visibility",iconName:"copy",type:["inRow"],useTableBehaviour:"preview",actionFunc:async t=>{}},{name:"create new",iconName:"instagram",type:["header"],useTableBehaviour:"preview",actionFunc:async t=>{}},{name:"to gallery",iconName:"message",type:["footer"],useTableBehaviour:"preview",actionFunc:async t=>{}},{name:"copy",iconName:"copySolid",type:["contextmenu","inRow"],action:async()=>null},{name:"edit (from demo)",iconName:"penToSquare",type:["contextmenu"],action:async()=>null},{name:"paste",iconName:"pasteSolid",type:["contextmenu"],action:async()=>null},{name:"preview",type:["doubleClick","contextmenu"],iconName:"eye",actionFunc:async t=>(alert(t.item.amount),null)}]}"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Vertical Lines</h2>
        <p class="demo-description">Enhanced column separation for better data tracking.</p>
        <dees-table
          heading1="Product Inventory"
          heading2="Current stock levels across warehouses"
          .showVerticalLines=${!0}
          .data=${[{product:'MacBook Pro 16"',warehouse_a:"45",warehouse_b:"32",warehouse_c:"28",total:"105",status:"\u2713 In Stock"},{product:"iPhone 15 Pro",warehouse_a:"120",warehouse_b:"89",warehouse_c:"156",total:"365",status:"\u2713 In Stock"},{product:"AirPods Pro",warehouse_a:"0",warehouse_b:"12",warehouse_c:"5",total:"17",status:"\u26A0 Low Stock"},{product:"iPad Air",warehouse_a:"23",warehouse_b:"45",warehouse_c:"67",total:"135",status:"\u2713 In Stock"}]}
          dataName="products"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Full Grid</h2>
        <p class="demo-description">Complete grid lines for maximum readability and structure.</p>
        <dees-table
          heading1="Server Monitoring Dashboard"
          heading2="Real-time metrics across regions"
          .showGrid=${!0}
          .data=${[{server:"API-1",region:"US-East",cpu:"45%",memory:"62%",disk:"78%",latency:"12ms",uptime:"99.9%",status:"\u{1F7E2} Healthy"},{server:"API-2",region:"EU-West",cpu:"38%",memory:"55%",disk:"45%",latency:"25ms",uptime:"99.8%",status:"\u{1F7E2} Healthy"},{server:"DB-Master",region:"US-East",cpu:"72%",memory:"81%",disk:"92%",latency:"8ms",uptime:"100%",status:"\u{1F7E1} Warning"},{server:"DB-Replica",region:"EU-West",cpu:"23%",memory:"34%",disk:"45%",latency:"15ms",uptime:"99.7%",status:"\u{1F7E2} Healthy"},{server:"Cache-1",region:"AP-South",cpu:"89%",memory:"92%",disk:"12%",latency:"120ms",uptime:"98.5%",status:"\u{1F534} Critical"}]}
          dataName="servers"
          .dataActions="${[{name:"SSH Connect",iconName:"lucide:terminal",type:["inRow"],actionFunc:async t=>{console.log("Connecting to:",t.item.server)}},{name:"View Logs",iconName:"lucide:file-text",type:["inRow","contextmenu"],actionFunc:async t=>{console.log("Viewing logs for:",t.item.server)}},{name:"Restart Server",iconName:"lucide:refresh-cw",type:["contextmenu"],actionFunc:async t=>{console.log("Restarting:",t.item.server)}}]}"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Horizontal Lines Only</h2>
        <p class="demo-description">Emphasis on row separation without column dividers.</p>
        <dees-table
          heading1="Sales Performance"
          heading2="Top performers this quarter"
          .showHorizontalLines=${!0}
          .showVerticalLines=${!1}
          .data=${[{salesperson:"Emily Johnson",region:"North America",deals_closed:"42",revenue:"$1.2M",quota_achievement:"128%",rating:"\u2B50\u2B50\u2B50\u2B50\u2B50"},{salesperson:"Michael Chen",region:"Asia Pacific",deals_closed:"38",revenue:"$980K",quota_achievement:"115%",rating:"\u2B50\u2B50\u2B50\u2B50\u2B50"},{salesperson:"Sarah Williams",region:"Europe",deals_closed:"35",revenue:"$875K",quota_achievement:"108%",rating:"\u2B50\u2B50\u2B50\u2B50"},{salesperson:"David Garcia",region:"Latin America",deals_closed:"31",revenue:"$750K",quota_achievement:"95%",rating:"\u2B50\u2B50\u2B50\u2B50"}]}
          dataName="sales reps"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Simple Table (No Grid)</h2>
        <p class="demo-description">Clean, minimal design without grid lines. Set showGrid to false to disable the default grid.</p>
        <dees-table
          heading1="Team Members"
          heading2="Engineering Department"
          .showGrid=${!1}
          .data=${[{name:"Alice Johnson",role:"Lead Engineer",email:"alice@company.com",location:"San Francisco",joined:"2020-03-15"},{name:"Bob Smith",role:"Senior Developer",email:"bob@company.com",location:"New York",joined:"2019-07-22"},{name:"Charlie Davis",role:"DevOps Engineer",email:"charlie@company.com",location:"London",joined:"2021-01-10"},{name:"Diana Martinez",role:"Frontend Developer",email:"diana@company.com",location:"Barcelona",joined:"2022-05-18"}]}
          dataName="team members"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Custom Display Function</h2>
        <p class="demo-description">Transform data for display using custom formatting.</p>
        <dees-table
          heading1="Sales Report"
          heading2="Q4 2023 Performance"
          .data=${[{product:"Enterprise License",units:45,revenue:225e3,growth:.23,forecast:28e4},{product:"Professional License",units:128,revenue:128e3,growth:.15,forecast:147e3},{product:"Starter License",units:342,revenue:68400,growth:.42,forecast:97e3}]}
          .displayFunction=${t=>({Product:t.product,"Units Sold":t.units.toLocaleString(),Revenue:"$"+t.revenue.toLocaleString(),Growth:(t.growth*100).toFixed(1)+"%","Q1 2024 Forecast":"$"+t.forecast.toLocaleString()})}
          dataName="products"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Empty Table State</h2>
        <p class="demo-description">How the table looks when no data is available.</p>
        <dees-table
          heading1="No Data Available"
          heading2="This table is currently empty"
          .data=${[]}
          dataName="items"
        ></dees-table>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Schema-First Columns (New)</h2>
        <p class="demo-description">Defines columns explicitly and renders via schema. No displayFunction needed.</p>
        <dees-table
          heading1="Users (Schema-First)"
          heading2="Columns define rendering and order"
          .columns=${[{key:"name",header:"Name",sortable:!0},{key:"email",header:"Email",renderer:t=>w`<dees-badge>${t}</dees-badge>`},{key:"joinedAt",header:"Joined",renderer:t=>new Date(t).toLocaleDateString()}]}
          .data=${[{name:"Alice",email:"alice@example.com",joinedAt:"2022-08-01"},{name:"Bob",email:"bob@example.com",joinedAt:"2021-12-11"},{name:"Carol",email:"carol@example.com",joinedAt:"2023-03-22"}]}
          dataName="users"
        ></dees-table>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Partial Schema + Augment (New)</h2>
        <p class="demo-description">Provides only the important columns; the rest are merged in from displayFunction.</p>
        <dees-table
          heading1="Users (Partial + Augment)"
          heading2="Missing columns are derived"
          .columns=${[{key:"name",header:"Name",sortable:!0}]}
          .displayFunction=${t=>({name:t.name,email:t.email,role:t.role})}
          .augmentFromDisplayFunction=${!0}
          .data=${[{name:"Erin",email:"erin@example.com",role:"Admin"},{name:"Finn",email:"finn@example.com",role:"User"},{name:"Gina",email:"gina@example.com",role:"User"}]}
          dataName="users"
        ></dees-table>
      </div>

      <div class="demo-section" 
           @selectionChange=${t=>{console.log("Selection changed",t.detail)}}
           @search-changed=${t=>{let e=document.getElementById("tableFilterSelectDemo");e&&e.setFilterText(t.detail.value)}}
           @search-submit=${t=>{let e=document.getElementById("tableFilterSelectDemo");e&&e.setFilterText(t.detail.value)}}
      >
        <h2 class="demo-title">Filtering + Multi-Selection (New)</h2>
        <p class="demo-description">Use the search bar to filter rows; toggle selection via checkboxes. Click headers to sort.</p>
        <dees-searchbar></dees-searchbar>
        <div style="height: 12px"></div>
        <dees-table
          id="tableFilterSelectDemo"
          heading1="Inventory (Filter + Select)"
          heading2="Try typing to filter and selecting multiple rows"
          .selectionMode=${"multi"}
          .rowKey=${"sku"}
          .columns=${[{key:"sku",header:"SKU",sortable:!0},{key:"name",header:"Name",sortable:!0},{key:"stock",header:"Stock",sortable:!0}]}
          .data=${[{sku:"A-100",name:"USB-C Cable",stock:120},{sku:"A-101",name:"Wireless Mouse",stock:55},{sku:"A-102",name:"Laptop Stand",stock:18},{sku:"B-200",name:"Keyboard (ISO)",stock:89},{sku:"B-201",name:"HDMI Adapter",stock:0},{sku:"C-300",name:"Webcam 1080p",stock:42}]}
          dataName="items"
        ></dees-table>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Column Filters + Sticky Header (New)</h2>
        <p class="demo-description">Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.</p>
        <style>
          dees-table[sticky-header] { --table-max-height: 220px; }
        </style>
        <dees-table
          heading1="Employees"
          heading2="Quick filter per column + sticky header"
          .showColumnFilters=${!0}
          .stickyHeader=${!0}
          .columns=${[{key:"name",header:"Name",sortable:!0},{key:"email",header:"Email",sortable:!0},{key:"department",header:"Department",sortable:!0}]}
          .data=${[{name:"Alice Johnson",email:"alice@corp.com",department:"Engineering"},{name:"Bob Smith",email:"bob@corp.com",department:"Sales"},{name:"Charlie Davis",email:"charlie@corp.com",department:"HR"},{name:"Diana Martinez",email:"diana@corp.com",department:"Engineering"},{name:"Ethan Brown",email:"ethan@corp.com",department:"Finance"},{name:"Fiona Clark",email:"fiona@corp.com",department:"Sales"},{name:"Grace Lee",email:"grace@corp.com",department:"Engineering"},{name:"Henry Wilson",email:"henry@corp.com",department:"Marketing"},{name:"Irene Walker",email:"irene@corp.com",department:"Finance"},{name:"Jack Turner",email:"jack@corp.com",department:"Support"}]}
          dataName="employees"
        ></dees-table>
      </div>

      <div class="demo-section"
        @searchRequest=${async t=>{let{query:e}=t.detail||{query:""},a=document.getElementById("serverSearchDemo"),i=[{id:1,name:"Alice",city:"Berlin",title:"Engineer"},{id:2,name:"Bob",city:"Paris",title:"Designer"},{id:3,name:"Charlie",city:"London",title:"Manager"},{id:4,name:"Diana",city:"Madrid",title:"Engineer"},{id:5,name:"Ethan",city:"Rome",title:"Support"}];await new Promise(s=>setTimeout(s,300));let r=String(e||"").toLowerCase(),n=r?i.filter(s=>Object.values(s).some(o=>String(o).toLowerCase().includes(r))):i;a.data=n}}
      >
        <h2 class="demo-title">Server Search (New)</h2>
        <p class="demo-description">Select Server mode, type a query, and watch the table fetch simulated results.</p>
        <dees-table
          id="serverSearchDemo"
          heading1="People (Server Search)"
          heading2="Click Search, choose Server mode, and type"
          .columns=${[{key:"name",header:"Name"},{key:"city",header:"City"},{key:"title",header:"Title"}]}
          .data=${[{id:1,name:"Alice",city:"Berlin",title:"Engineer"},{id:2,name:"Bob",city:"Paris",title:"Designer"},{id:3,name:"Charlie",city:"London",title:"Manager"},{id:4,name:"Diana",city:"Madrid",title:"Engineer"},{id:5,name:"Ethan",city:"Rome",title:"Support"}]}
          dataName="people"
        ></dees-table>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Wide Properties + Many Actions</h2>
        <p class="demo-description">A table with many columns and rich actions to stress test layout and sticky Actions.</p>
        <dees-table
          heading1="People Directory"
          heading2="Many properties and actions"
          .columns=${[{key:"id",header:"ID",sortable:!0},{key:"name",header:"Name",sortable:!0},{key:"role",header:"Role",sortable:!0},{key:"department",header:"Department",sortable:!0},{key:"email",header:"Email"},{key:"phone",header:"Phone"},{key:"location",header:"Location",sortable:!0},{key:"status",header:"Status",sortable:!0},{key:"createdAt",header:"Created",sortable:!0},{key:"updatedAt",header:"Updated",sortable:!0},{key:"lastLogin",header:"Last Login",sortable:!0},{key:"projects",header:"Projects"},{key:"tags",header:"Tags"},{key:"notes",header:"Notes"}]}
          .data=${[{id:1,name:"Alice Johnson",role:"Engineer",department:"R&D",email:"alice@corp.com",phone:"+1 202 555 0111",location:"Berlin",status:"Active",createdAt:"2023-01-12",updatedAt:"2024-05-03",lastLogin:"2024-10-01",projects:5,tags:"typescript, ui",notes:"Mentor"},{id:2,name:"Bob Smith",role:"Designer",department:"Design",email:"bob@corp.com",phone:"+1 202 555 0112",location:"Paris",status:"Active",createdAt:"2022-11-05",updatedAt:"2024-04-10",lastLogin:"2024-09-28",projects:8,tags:"figma, brand",notes:"Part-time"},{id:3,name:"Charlie Davis",role:"Manager",department:"Ops",email:"charlie@corp.com",phone:"+1 202 555 0113",location:"London",status:"On Leave",createdAt:"2021-04-21",updatedAt:"2024-02-15",lastLogin:"2024-08-12",projects:3,tags:"sre, leadership",notes:""},{id:4,name:"Diana Martinez",role:"Engineer",department:"Platform",email:"diana@corp.com",phone:"+1 202 555 0114",location:"Madrid",status:"Active",createdAt:"2020-06-30",updatedAt:"2024-06-25",lastLogin:"2024-10-02",projects:6,tags:"node, api",notes:"On-call"},{id:5,name:"Ethan Brown",role:"Support",department:"CS",email:"ethan@corp.com",phone:"+1 202 555 0115",location:"Rome",status:"Inactive",createdAt:"2019-09-18",updatedAt:"2024-03-09",lastLogin:"2024-06-19",projects:2,tags:"zendesk",notes:"Rehire"},{id:6,name:"Fiona Clark",role:"QA",department:"QA",email:"fiona@corp.com",phone:"+1 202 555 0116",location:"Vienna",status:"Active",createdAt:"2022-03-14",updatedAt:"2024-03-01",lastLogin:"2024-09-07",projects:7,tags:"playwright",notes:""}]}
          .dataActions=${[{name:"View",iconName:"lucide:eye",type:["inRow","contextmenu"],actionFunc:async({item:t})=>{console.log("view",t)}},{name:"Edit",iconName:"lucide:edit",type:["inRow","contextmenu"],actionFunc:async({item:t})=>{console.log("edit",t)}},{name:"Delete",iconName:"lucide:trash",type:["inRow","contextmenu"],actionFunc:async({item:t})=>{console.log("delete",t)}},{name:"Message",iconName:"lucide:message-square",type:["inRow"],actionFunc:async({item:t})=>{console.log("message",t)}},{name:"History",iconName:"lucide:clock",type:["inRow"],actionFunc:async({item:t})=>{console.log("history",t)}},{name:"Add New",iconName:"lucide:plus",type:["header"],actionFunc:async({table:t})=>{console.log("add")}},{name:"Export CSV",iconName:"lucide:download",type:["header"],actionFunc:async({table:t})=>{console.log("export")}},{name:"Bulk Delete",iconName:"lucide:trash-2",type:["footer"],actionFunc:async({table:t})=>{console.log("bulk delete")}}]}
        ></dees-table>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Scrollable Small Height</h2>
        <p class="demo-description">Same as above, but with many items and a small fixed height to force vertical scrolling inside the table. Actions remain visible on the right; horizontal scroll appears if needed.</p>
        <style>
          #scrollSmallHeight { --table-max-height: 240px; }
        </style>
        <dees-table
          id="scrollSmallHeight"
          .stickyHeader=${!0}
          heading1="People Directory (Scrollable)"
          heading2="Forced scrolling with many items"
          .columns=${[{key:"id",header:"ID",sortable:!0},{key:"name",header:"Name",sortable:!0},{key:"role",header:"Role",sortable:!0},{key:"department",header:"Department",sortable:!0},{key:"email",header:"Email"},{key:"phone",header:"Phone"},{key:"location",header:"Location",sortable:!0},{key:"status",header:"Status",sortable:!0},{key:"createdAt",header:"Created",sortable:!0},{key:"updatedAt",header:"Updated",sortable:!0},{key:"lastLogin",header:"Last Login",sortable:!0},{key:"projects",header:"Projects"},{key:"tags",header:"Tags"},{key:"notes",header:"Notes"}]}
          .data=${Array.from({length:100},(t,e)=>({id:e+1,name:`User ${e+1}`,role:["Engineer","Designer","Manager","QA","Support"][e%5],department:["R&D","Design","Ops","QA","CS"][e%5],email:`user${e+1}@corp.com`,phone:`+1 202 555 ${String(1e3+e).slice(-4)}`,location:["Berlin","Paris","London","Madrid","Rome"][e%5],status:["Active","Inactive","On Leave"][e%3],createdAt:`2023-${String(e%12+1).padStart(2,"0")}-${String(e%28+1).padStart(2,"0")}`,updatedAt:`2024-${String((e+3)%12+1).padStart(2,"0")}-${String((e+7)%28+1).padStart(2,"0")}`,lastLogin:`2024-${String((e+6)%12+1).padStart(2,"0")}-${String((e+10)%28+1).padStart(2,"0")}`,projects:e%12,tags:e%2?"typescript":"design",notes:e%3?"":"Note"}))}
          .dataActions=${[{name:"View",iconName:"lucide:eye",type:["inRow"],actionFunc:async({item:t})=>{}},{name:"Edit",iconName:"lucide:edit",type:["inRow"],actionFunc:async({item:t})=>{}},{name:"Delete",iconName:"lucide:trash",type:["inRow"],actionFunc:async({item:t})=>{}}]}
        ></dees-table>
      </div>
    </div>
  </div>
`});var Tft,Lft=v(()=>{oe();la();He();Tft=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        width: 100%;
      }

      .mainbox {
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        font-family: ${Qt};
        font-weight: 400;
        font-size: 14px;
        display: block;
        width: 100%;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 8px;
        overflow: hidden;
        cursor: default;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        min-height: 64px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      .headingContainer {
        flex: 1;
      }

      .heading {
        line-height: 1.5;
      }

      .heading1 {
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        letter-spacing: -0.025em;
      }
      
      .heading2 {
        font-size: 14px;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        margin-top: 2px;
      }

      .headingSeparation {
        display: none;
      }

      .headerActions {
        user-select: none;
        display: flex;
        flex-direction: row;
        gap: 8px;
      }
      
      .headerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        background: transparent;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .headerAction:hover {
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      .headerAction dees-icon {
        width: 14px;
        height: 14px;
      }

      .searchGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr max-content;
        padding: 16px 24px;
        background: ${p.bdTheme("hsl(210 40% 98%)","hsl(0 0% 3.9%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        transition: all 0.2s ease;
      }

      @media (max-width: 900px) {
        .searchGrid {
          grid-template-columns: 1fr;
        }
      }

      /* let search mode size to content (no forced width) */

      .searchGrid.hidden {
        height: 0px;
        opacity: 0;
        overflow: hidden;
        padding: 0px 24px;
        border-bottom-width: 0px;
      }

      .tableScroll {
        /* enable horizontal scroll only when content exceeds width */
        overflow-x: auto;
        /* prevent vertical scroll inside the table container */
        overflow-y: hidden;
        /* avoid reserving extra space for classic scrollbars where possible */
        scrollbar-gutter: stable both-edges;
      }
      /* Hide horizontal scrollbar entirely when not using sticky header */
      :host(:not([sticky-header])) .tableScroll {
        -ms-overflow-style: none; /* IE/Edge */
        scrollbar-width: none;   /* Firefox (hides both axes) */
      }
      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
      }
      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
        height: 0px;
      }
      :host([sticky-header]) .tableScroll {
        max-height: var(--table-max-height, 360px);
        overflow: auto;
      }

      table {
        /* allow table to grow wider than container so actions column can stick */
        width: max-content;
        min-width: 100%;
        caption-side: bottom;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 0;
      }
      
      .noDataSet {
        padding: 48px 24px;
        text-align: center;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
      }
      
      thead {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 9%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }
      :host([sticky-header]) thead th {
        position: sticky;
        top: 0;
        z-index: 2;
      }
      
      tbody tr {
        transition: background-color 0.15s ease;
        position: relative;
      }
      
      /* Default horizontal lines (bottom border only) */
      tbody tr {
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      tbody tr:last-child {
        border-bottom: none;
      }
      
      /* Full horizontal lines when enabled */
      :host([show-horizontal-lines]) tbody tr {
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      :host([show-horizontal-lines]) tbody tr:first-child {
        border-top: none;
      }
      
      :host([show-horizontal-lines]) tbody tr:last-child {
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      tbody tr:hover {
        background: ${p.bdTheme("hsl(210 40% 96.1% / 0.5)","hsl(0 0% 14.9% / 0.5)")};
      }
      
      /* Column hover effect for better traceability */
      td {
        position: relative;
      }
      
      td::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: ${p.bdTheme("hsl(210 40% 96.1% / 0.3)","hsl(0 0% 14.9% / 0.3)")};
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: -1;
      }
      
      td:hover::after {
        opacity: 1;
      }
      
      /* Grid mode - shows both vertical and horizontal lines */
      :host([show-grid]) th {
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) td {
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) th:first-child,
      :host([show-grid]) td:first-child {
        border-left: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      :host([show-grid]) tbody tr:first-child td {
        border-top: none;
      }

      /* Sticky Actions column (right pinned) */
      thead th.actionsCol,
      tbody td.actionsCol {
        position: sticky;
        right: 0;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
      }
      thead th.actionsCol { z-index: 3; }
      tbody td.actionsCol {
        z-index: 1;
        box-shadow: -1px 0 0 0 ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      tbody tr.selected {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 14.9%)")};
      }

      tbody tr.hasAttachment {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3% / 0.1)","hsl(142.1 76.2% 36.3% / 0.1)")};
      }

      th {
        height: 48px;
        padding: 12px 24px;
        text-align: left;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        letter-spacing: -0.01em;
      }
      
      :host([show-vertical-lines]) th {
        border-right: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      td {
        padding: 12px 24px;
        vertical-align: middle;
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
      }
      
      :host([show-vertical-lines]) td {
        border-right: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }
      
      th:first-child,
      td:first-child {
        padding-left: 24px;
      }
      
      th:last-child,
      td:last-child {
        padding-right: 24px;
      }
      
      :host([show-vertical-lines]) th:last-child,
      :host([show-vertical-lines]) td:last-child {
        border-right: none;
      }
      
      .innerCellContainer {
        position: relative;
        min-height: 24px;
        line-height: 24px;
      }
      td input {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 20px;
        right: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 8px);
        padding: 0 12px;
        outline: none;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        transition: all 0.15s ease;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      }
      
      td input:focus {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.2)","hsl(217.2 91.2% 59.8% / 0.2)")};
      }

      /* filter row */
      thead tr.filtersRow th {
        padding: 8px 12px 12px 12px;
      }
      thead tr.filtersRow th input[type='text'] {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        font-size: 13px;
        border-radius: 6px;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
      }
      .actionsContainer {
        display: flex;
        flex-direction: row;
        gap: 4px;
      }
      
      .action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .action:hover {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .action:active {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 11.8%)")};
      }
      
      .action dees-icon {
        width: 16px;
        height: 16px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 24px;
        font-size: 14px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 9%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      .tableStatistics {
        font-weight: 500;
      }

      .footerActions {
        display: flex;
        gap: 8px;
      }

      .footerActions .footerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
      }

      .footerActions .footerAction:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .footerActions .footerAction dees-icon {
        width: 14px;
        height: 14px;
      }
  `]});function SV(t,e){if(!e||e.length===0)return[];let a=t(e[0]);return Object.keys(a).map(r=>({key:r,header:r,value:n=>t(n)[r]}))}function $ft(t,e,a,i){let r=(t||[]).slice();if(!e)return r;let n=SV(a,i),s=new Set(r.map(o=>String(o.key)));for(let o of n)s.has(String(o.key))||r.push(o);return r}function Y4(t,e,a){return e.value?e.value(t):t[e.key]}function Dft(t,e,a,i,r,n,s="table",o){let u=t.slice(),c=(r||"").trim().toLowerCase(),d=n||{},l=Object.keys(d).filter(y=>(d[y]??"").trim().length>0);if((c||l.length>0)&&(u=u.filter(y=>{for(let g of l)if(s==="data"){let h=y[g],x=String(h??"").toLowerCase(),M=String(d[g]).toLowerCase();if(!x.includes(M))return!1}else{let h=e.find(N=>String(N.key)===g);if(!h||h.hidden||h.filterable===!1)continue;let x=Y4(y,h),M=String(x??"").toLowerCase(),S=String(d[g]).toLowerCase();if(!M.includes(S))return!1}if(c){if(o)return!!o(y);let g=!1;if(s==="data"){for(let h of Object.values(y))if(String(h??"").toLowerCase().includes(c)){g=!0;break}}else for(let h of e){if(h.hidden)continue;let x=Y4(y,h);if(String(x??"").toLowerCase().includes(c)){g=!0;break}}if(!g)return!1}return!0})),!a||!i)return u;let f=e.find(y=>String(y.key)===a);if(!f)return u;let b=i==="asc"?1:-1;return u.sort((y,g)=>{let h=Y4(y,f),x=Y4(g,f);if(h==null&&x==null)return 0;if(h==null)return-1*b;if(x==null)return 1*b;if(typeof h=="number"&&typeof x=="number")return(h-x)*b;let M=String(h).toLowerCase(),S=String(x).toLowerCase();return M<S?-1*b:M>S?1*b:0}),u}var Aft=v(()=>{});function Mw(t){return t.startsWith('"')&&t.endsWith('"')||t.startsWith("'")&&t.endsWith("'")?t.slice(1,-1):t}function vWt(t){return t.split(/\s+OR\s+/i).map(e=>e.trim()).filter(Boolean)}function yWt(t){return t.split(/\s+AND\s+/i).map(e=>e.trim()).filter(Boolean)}function xWt(t){if(!t)return null;let e=!1,a=t.match(/^\s*(NOT\s+|-)\s*(.*)$/i);a&&(e=!0,t=a[2]);let i=t.match(/^([^:\s]+)\s*:\s*\[(.*?)\s+TO\s+(.*?)\]$/i);if(i)return{field:i[1],negate:e,range:{lower:Mw(i[2]).toLowerCase(),upper:Mw(i[3]).toLowerCase(),inclusive:!0}};let r=t.match(/^([^:\s]+)\s*:\s*("[^"]*"|'[^']*'|[^"'\s]+)$/);return r?{field:r[1],value:Mw(r[2]).toLowerCase(),negate:e}:t.length>0?{value:Mw(t).toLowerCase(),negate:e}:null}function wWt(t){if(!t)return null;let e=vWt(t).map(a=>({terms:yWt(a).map(xWt).filter(r=>!!r&&!!r.value)})).filter(a=>a.terms.length>0);return e.length===0?null:{clauses:e}}function Eft(t,e,a){let i=wWt(t);if(!i)return null;let r=new Map(a.map(u=>[String(u.key),u])),n=(u,c)=>u<c?-1:u>c?1:0,s=u=>{let c=String(u??"").toLowerCase(),d=Number(c),l=Date.parse(c);return!Number.isNaN(d)&&c.trim()!==""?{t:"n",v:d}:Number.isNaN(l)?{t:"s",v:c}:{t:"d",v:l}},o=(u,c,d)=>{let l=s(u),f=s(c),b=s(d);if(l.t==="s"&&f.t==="s"&&b.t==="s"){let g=l.v;return n(g,f.v)>=0&&n(g,b.v)<=0}if(l.t==="n"&&f.t==="n"&&b.t==="n"){let g=l.v;return g>=f.v&&g<=b.v}if(l.t==="d"&&f.t==="d"&&b.t==="d"){let g=l.v;return g>=f.v&&g<=b.v}let y=String(u??"").toLowerCase();return n(y,c)>=0&&n(y,d)<=0};return u=>{for(let c of i.clauses){let d=!0;for(let l of c.terms){let f=!1;if(l.range&&l.field)if(e==="data")f=o(u[l.field],l.range.lower,l.range.upper);else{let b=r.get(l.field);if(!b||b.hidden)f=!1;else{let y=b.value?b.value(u):u[b.key];f=o(y,l.range.lower,l.range.upper)}}else if(l.field&&l.value!=null)if(e==="data")f=String(u[l.field]??"").toLowerCase().includes(l.value);else{let b=r.get(l.field);if(!b||b.hidden===!0)f=!1;else{let y=b.value?b.value(u):u[b.key];f=String(y??"").toLowerCase().includes(l.value)}}else l.value!=null&&(e==="data"?f=Object.values(u).some(b=>String(b??"").toLowerCase().includes(l.value)):f=a.some(b=>{if(b.hidden)return!1;let y=b.value?b.value(u):u[b.key];return String(y??"").toLowerCase().includes(l.value)}));if(l.negate&&(f=!f),!f){d=!1;break}}if(d)return!0}return!1}}var Pft=v(()=>{});var Jt,Xe,kw,zV=v(()=>{i2();_ft();oe();r2();_t();At();Lft();Aft();Pft();He();Jt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Obje
      <div class="mainbox">
        <!-- the heading part -->
        <div class="header">
          <div class="headingContainer">
            <div class="heading heading1">${this.label||this.heading1}</div>
            <div class="heading heading2">${this.heading2}</div>
          </div>
          <div class="headerActions">
            ${Wa.resolveExec(async()=>{let st=[];for(let c1 of this.dataActions)c1.type?.includes("header")&&st.push(w`<div
                    class="headerAction"
                    @click=${()=>{c1.actionFunc({item:this.selectedDataRow,table:this})}}
                  >
                    ${c1.iconName?w`<dees-icon .iconSize=${14} .icon=${c1.iconName}></dees-icon>
                          ${c1.name}`:c1.name}
                  </div>`);return st})}
          </div>
        </div>
        <div class="headingSeparation"></div>
        <div class="searchGrid hidden">
          <dees-input-text
            .label=${"lucene syntax search"}
            .description=${`
              You can use the lucene syntax to search for data, e.g.:
              
              \`\`\`
              name: "john" AND age: 18
              \`\`\`
              
            `}
          ></dees-input-text>
          <dees-input-multitoggle
            .label=${"search mode"}
            .options=${["table","data","server"]}
            .selectedOption=${"table"}
            .description=${`
              There are three basic modes:
              
              * table: only searches data already in the table
              * data: searches original data, ignoring table transforms
              * server: searches data on the server
              
            `}
          ></dees-input-multitoggle>
        </div>

        <!-- the actual table -->
        <style></style>
        ${this.data.length>0?w`
              <div class="tableScroll">
              <table>
                <thead>
                  <tr>
                    ${this.selectionMode!=="none"?w`
                          <th style="width:42px; text-align:center;">
                            ${this.selectionMode==="multi"?w`
                                  <dees-input-checkbox
                                    .value=${this.areAllVisibleSelected()}
                                    .indeterminate=${this.isVisibleSelectionIndeterminate()}
                                    @newValue=${st=>{st.stopPropagation(),this.setSelectVisible(st.detail===!0)}}
                                  ></dees-input-checkbox>
                                `:w``}
                          </th>
                        `:w``}
                    ${pe.filter(st=>!st.hidden).map(st=>{let c1=!!st.sortable,ta=this.getAriaSort(st);return w`
                          <th
                            role="columnheader"
                            aria-sort=${ta}
                            style="${c1?"cursor: pointer;":""}"
                            @click=${()=>c1?this.toggleSort(st):null}
                          >
                            ${st.header??st.key}
                            ${this.renderSortIndicator(st)}
                          </th>`})}
                    ${(()=>{if(this.dataActions&&this.dataActions.length>0)return w` <th class="actionsCol">Actions</th> `})()}
                  </tr>
                  ${this.showColumnFilters?w`<tr class="filtersRow">
                        ${this.selectionMode!=="none"?w`<th style="width:42px;"></th>`:w``}
                        ${pe.filter(st=>!st.hidden).map(st=>{let c1=String(st.key);return st.filterable===!1?w`<th></th>`:w`<th>
                              <input type="text" placeholder="Filter..." .value=${this.columnFilters[c1]||""}
                                @input=${ta=>this.setColumnFilter(c1,ta.target.value)} />
                            </th>`})}
                        ${(()=>{if(this.dataActions&&this.dataActions.length>0)return w` <th></th> `})()}
                      </tr>`:w``}
                </thead>
                <tbody>
                  ${R1.map((st,c1)=>{let ta=tt=>tt.tagName==="TR"?tt:ta(tt.parentElement);return w`
                      <tr
                        @click=${()=>{if(this.selectedDataRow=st,this.selectionMode==="single"){let tt=this.getRowId(st);this.selectedIds.clear(),this.selectedIds.add(tt),this.emitSelectionChange(),this.requestUpdate()}}}
                        @dragenter=${async tt=>{tt.preventDefault(),tt.stopPropagation();let j1=ta(tt.target);setTimeout(()=>{j1.classList.add("hasAttachment")},0)}}
                        @dragleave=${async tt=>{tt.preventDefault(),tt.stopPropagation(),ta(tt.target).classList.remove("hasAttachment")}}
                        @dragover=${async tt=>{tt.preventDefault()}}
                        @drop=${async tt=>{tt.preventDefault();let j1=[];for(let Di of Array.from(tt.dataTransfer.files))this.files.push(Di),j1.push(Di),this.requestUpdate();let aa=this.fileWeakMap.get(st);aa?aa.push(...j1):this.fileWeakMap.set(st,j1)}}
                        @contextmenu=${async tt=>{jt.openContextMenuWithOptions(tt,this.getActionsForType("contextmenu").map(j1=>({name:j1.name,iconName:j1.iconName,action:async()=>(await j1.actionFunc({item:st,table:this}),null)})))}}
                        class="${st===this.selectedDataRow?"selected":""}"
                      >
                        ${this.selectionMode!=="none"?w`<td style="width:42px; text-align:center;">
                              <dees-input-checkbox
                                .value=${this.isRowSelected(st)}
                                @newValue=${tt=>{tt.stopPropagation(),this.setRowSelected(st,tt.detail===!0)}}
                              ></dees-input-checkbox>
                            </td>`:w``}
                        ${pe.filter(tt=>!tt.hidden).map((tt,j1)=>{let aa=Y4(st,tt,this.displayFunction),Di=tt.renderer?tt.renderer(aa,st,{rowIndex:c1,colIndex:j1,column:tt}):aa,b3=String(tt.key);return w`
                              <td
                                @dblclick=${O8=>{let v3=this.dataActions.find(B8=>B8.type?.includes("doubleClick"));this.editableFields.includes(b3)?this.handleCellEditing(O8,st,b3):v3&&v3.actionFunc({item:st,table:this})}}
                              >
                                <div class="innerCellContainer">${Di}</div>
                              </td>
                            `})}
                        ${(()=>{if(this.dataActions&&this.dataActions.length>0)return w`
                              <td class="actionsCol">
                                <div class="actionsContainer">
                                  ${this.getActionsForType("inRow").map(tt=>w`
                                      <div
                                        class="action"
                                        @click=${()=>tt.actionFunc({item:st,table:this})}
                                      >
                                        ${tt.iconName?w` <dees-icon .icon=${tt.iconName}></dees-icon> `:tt.name}
                                      </div>
                                    `)}
                                </div>
                              </td>
                            `})()}
                      </tr>`})}
                </tbody>
              </table>
              </div>
            `:w` <div class="noDataSet">No data set!</div> `}
        <div class="footer">
          <div class="tableStatistics">
            ${this.data.length} ${this.dataName||"data rows"} (total) |
            ${this.selectedDataRow?`# ${this.data.indexOf(this.selectedDataRow)+1}`:"No"}
            selected
          </div>
          <div class="footerActions">
            ${Wa.resolveExec(async()=>{let st=[];for(let c1 of this.dataActions)c1.type?.includes("footer")&&st.push(w`<div
                    class="footerAction"
                    @click=${()=>{c1.actionFunc({item:this.selectedDataRow,table:this})}}
                  >
                    ${c1.iconName?w`<dees-icon .iconSize=${14} .icon=${c1.iconName}></dees-icon>
                          ${c1.name}`:c1.name}
                  </div>`);return st})}
          </div>
        </div>
      </div>
    `}async firstUpdated(){}async updated(Me){super.updated(Me),this.determineColumnWidths(),this.searchable&&(this.dataActions.find(Ae=>Ae.type?.includes("header")&&Ae.name==="Search")||(this.dataActions.unshift({name:"Search",iconName:"magnifyingGlass",type:["header"],actionFunc:async()=>{console.log("open search"),this.shadowRoot.querySelector(".searchGrid").classList.toggle("hidden")}}),console.log(this.dataActions),this.requestUpdate()),this.wireSearchInputs())}__debounceTimer;debounceRun(Me,pe=200){this.__debounceTimer&&clearTimeout(this.__debounceTimer),this.__debounceTimer=setTimeout(Me,pe)}wireSearchInputs(){let Me=this.shadowRoot?.querySelector(".searchGrid dees-input-text"),pe=this.shadowRoot?.querySelector(".searchGrid dees-input-multitoggle");Me&&!this.__searchTextSub&&(this.__searchTextSub=Me.changeSubject.subscribe(Ae=>{let R1=Ae?.value??"";this.debounceRun(()=>{this.searchMode==="server"?this.dispatchEvent(new CustomEvent("searchRequest",{detail:{query:R1,mode:"server"},bubbles:!0})):this.setFilterText(R1)})})),pe&&!this.__searchModeSub&&(this.__searchModeSub=pe.changeSubject.subscribe(Ae=>{let R1=Ae?.selectedOption||Ae?.value||"table";if(R1==="table"||R1==="data"||R1==="server"){this.searchMode=R1;let st=Me?.value??"";this.debounceRun(()=>{this.searchMode==="server"?this.dispatchEvent(new CustomEvent("searchRequest",{detail:{query:st,mode:"server"},bubbles:!0})):this.setFilterText(st)})}}))}async determineColumnWidths(){await(await this.domtoolsPromise).convenience.smartdelay.delayFor(0);let pe=this.shadowRoot.querySelector("table");if(!pe)return;let Ae=pe.rows[0].cells,R1=async(st,c1=!1)=>{let ta=Ve.defer(),tt=Ae[st],j1=window.getComputedStyle(tt).width;if(tt.textContent.includes("Actions")){let aa=this.dataActions.filter(Di=>Di.type?.includes("inRow")).length*36;tt.style.width=`${Math.max(aa,68)}px`}else tt.style.width=j1;c1&&(requestAnimationFrame(()=>{ta.resolve()}),await ta.promise)};Ae[Ae.length-1].textContent.includes("Actions")&&await R1(Ae.length-1,!0);for(let st=0;st<Ae.length;st++)Ae[st].textContent.includes("Actions")||await R1(st);pe.style.tableLayout="fixed"}toggleSort(Me){let pe=String(Me.key);this.sortKey!==pe?(this.sortKey=pe,this.sortDir="asc"):this.sortDir==="asc"?this.sortDir="desc":this.sortDir==="desc"?(this.sortDir=null,this.sortKey=void 0):this.sortDir="asc",this.dispatchEvent(new CustomEvent("sortChange",{detail:{key:this.sortKey,dir:this.sortDir},bubbles:!0})),this.requestUpdate()}getAriaSort(Me){return String(Me.key)!==this.sortKey||!this.sortDir?"none":this.sortDir==="asc"?"ascending":"descending"}renderSortIndicator(Me){return String(Me.key)!==this.sortKey||!this.sortDir?w``:w`<span style="margin-left:6px; opacity:0.7;">${this.sortDir==="asc"?"\u25B2":"\u25BC"}</span>`}setFilterText(Me){let pe=this.filterText;this.filterText=Me??"",pe!==this.filterText&&(this.dispatchEvent(new CustomEvent("filterChange",{detail:{text:this.filterText,columns:{...this.columnFilters}},bubbles:!0})),this.requestUpdate())}setColumnFilter(Me,pe){this.columnFilters={...this.columnFilters,[Me]:pe},this.dispatchEvent(new CustomEvent("filterChange",{detail:{text:this.filterText,columns:{...this.columnFilters}},bubbles:!0})),this.requestUpdate()}getRowId(Me){if(this.rowKey)return typeof this.rowKey=="function"?this.rowKey(Me):String(Me[this.rowKey]);let pe=Me;return this._rowIdMap.has(pe)||this._rowIdMap.set(pe,String(++this._rowIdCounter)),this._rowIdMap.get(pe)}isRowSelected(Me){return this.selectedIds.has(this.getRowId(Me))}toggleRowSelected(Me){let pe=this.getRowId(Me);this.selectionMode==="single"?(this.selectedIds.clear(),this.selectedIds.add(pe)):this.selectionMode==="multi"&&(this.selectedIds.has(pe)?this.selectedIds.delete(pe):this.selectedIds.add(pe)),this.emitSelectionChange(),this.requestUpdate()}setRowSelected(Me,pe){let Ae=this.getRowId(Me);this.selectionMode==="single"?(this.selectedIds.clear(),pe&&this.selectedIds.add(Ae)):this.selectionMode==="multi"&&(pe?this.selectedIds.add(Ae):this.selectedIds.delete(Ae)),this.emitSelectionChange(),this.requestUpdate()}areAllVisibleSelected(){let Me
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .form-output {
        margin-top: 16px;
        padding: 12px;
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        border-radius: 6px;
        font-size: 14px;
        font-family: monospace;
        white-space: pre-wrap;
      }
      
      .status-message {
        margin-top: 16px;
        padding: 12px;
        border-radius: 6px;
        font-size: 14px;
      }
      
      .status-message.success {
        background: ${p.bdTheme("hsl(142.1 70.6% 45.3% / 0.1)","hsl(142.1 70.6% 45.3% / 0.2)")};
        color: ${p.bdTheme("hsl(142.1 70.6% 35.3%)","hsl(142.1 70.6% 65.3%)")};
      }
      
      .status-message.error {
        background: ${p.bdTheme("hsl(0 72.2% 50.6% / 0.1)","hsl(0 72.2% 50.6% / 0.2)")};
        color: ${p.bdTheme("hsl(0 72.2% 40.6%)","hsl(0 72.2% 60.6%)")};
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-form"),a=t.querySelector(".form-output");e&&a&&(e.addEventListener("formData",async r=>{let n=r.detail.data;console.log("Form submitted with data:",n),e.setStatus("pending","Processing your registration..."),a.innerHTML=`<strong>Submitted Data:</strong>
${JSON.stringify(n,null,2)}`,await rt.plugins.smartdelay.delayFor(2e3),e.setStatus("success","Registration completed successfully!"),await rt.plugins.smartdelay.delayFor(2e3),e.reset(),a.innerHTML="<em>Form has been reset</em>"}),e.querySelectorAll("dees-input-text, dees-input-dropdown, dees-input-checkbox").forEach(r=>{r.addEventListener("changeSubject",()=>{console.log("Field changed:",r.getAttribute("key"))})}))}}>
      <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
        <dees-form>
          <dees-input-text 
            .required=${!0} 
            key="firstName" 
            label="First Name"
            .description=${"Your given name"}
          ></dees-input-text>
          
          <dees-input-text 
            .required=${!0} 
            key="lastName" 
            label="Last Name"
          ></dees-input-text>
          
          <dees-input-text 
            .required=${!0} 
            key="email" 
            label="Email Address"
            .description=${"We will use this to contact you"}
          ></dees-input-text>
          
          <dees-input-dropdown
            .required=${!0}
            key="country"
            .label=${"Country"}
            .options=${[{option:"United States",key:"us"},{option:"Canada",key:"ca"},{option:"Germany",key:"de"},{option:"France",key:"fr"},{option:"United Kingdom",key:"uk"}]}
          ></dees-input-dropdown>
          
          <dees-input-text
            .required=${!0}
            key="password"
            label="Password"
            isPasswordBool
            .description=${"Minimum 8 characters"}
          ></dees-input-text>
          
          <dees-input-checkbox
            .required=${!0}
            key="terms"
            label="I agree to the Terms and Conditions"
          ></dees-input-checkbox>
          
          <dees-input-checkbox
            key="newsletter"
            label="Send me promotional emails"
            .value=${!0}
          ></dees-input-checkbox>
          
          <dees-form-submit>Create Account</dees-form-submit>
        </dees-form>
        
        <div class="form-output">
          <em>Submit the form to see the collected data...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-form");e&&(console.log("Horizontal form layout active"),e.addEventListener("formData",i=>{let r=i.detail.data;console.log("Filter applied:",r);let n=Math.floor(Math.random()*100)+1;console.log(`Found ${n} results with filters:`,r)}),e.querySelectorAll("[key]").forEach(i=>{i.addEventListener("changeSubject",async()=>{let r=await e.collectFormData();console.log("Live filter update:",r)})}))}}>
      <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
        <dees-form horizontal-layout>
          <dees-input-text 
            key="search" 
            label="Search"
            placeholder="Enter keywords..."
          ></dees-input-text>
          
          <dees-input-dropdown
            key="category"
            .label=${"Category"}
            .enableSearch=${!1}
            .options=${[{option:"All",key:"all"},{option:"Products",key:"products"},{option:"Services",key:"services"},{option:"Support",key:"support"}]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            key="sort"
            .label=${"Sort By"}
            .enableSearch=${!1}
            .options=${[{option:"Newest",key:"newest"},{option:"Popular",key:"popular"},{option:"Price: Low to High",key:"price_asc"},{option:"Price: High to Low",key:"price_desc"}]}
          ></dees-input-dropdown>
          
          <dees-input-checkbox
            key="inStock"
            label="In Stock Only"
            .value=${!0}
          ></dees-input-checkbox>
        </dees-form>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-form"),a=t.querySelector("#status-display");if(e){e.addEventListener("formData",async r=>{let n=r.detail.data;console.log("Advanced form data:",n),e.setStatus("pending","Validating your information..."),await rt.plugins.smartdelay.delayFor(1500),n.iban&&n.iban.length>15?(e.setStatus("success","Application submitted successfully!"),a&&(a.className="status-message success",a.textContent="\u2713 Your application has been submitted. We will contact you soon.")):(e.setStatus("error","Please check your IBAN"),a&&(a.className="status-message error",a.textContent="\u2717 Invalid IBAN format. Please check and try again.")),console.log("Form data logged:",n)});let i=e.querySelector("dees-input-fileupload");i&&i.addEventListener("change",r=>{let n=r.detail?.files||[];console.log(`${n.length} file(s) selected for upload`)})}}}>
      <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
        <dees-form>
          <dees-input-iban 
            key="iban"
            label="IBAN"
            .required=${!0}
          ></dees-input-iban>
          
          <dees-input-phone
            key="phone"
            label="Phone Number"
            .required=${!0}
          ></dees-input-phone>
          
          <dees-input-multitoggle
            key="preferences"
            .label=${"Notification Preferences"}
            .options=${["Email","SMS","Push","In-App"]}
            .selectedOption=${"Email"}
          ></dees-input-multitoggle>
          
          <dees-input-multiselect
            key="interests"
            .label=${"Areas of Interest"}
            .options=${[{option:"Technology",key:"tech"},{option:"Design",key:"design"},{option:"Business",key:"business"},{option:"Marketing",key:"marketing"},{option:"Sales",key:"sales"}]}
          ></dees-input-multiselect>
          
          <dees-input-fileupload
            key="documents"
            .label=${"Upload Documents"}
            .description=${"PDF, DOC, or DOCX files up to 10MB"}
          ></dees-input-fileupload>
          
          <dees-form-submit>Submit Application</dees-form-submit>
        </dees-form>
        
        <div id="status-display"></div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var Rft,_V,Fft,Oft,W4=v(()=>{oe();_t();tw();sV();oV();xo();dV();cw();uw();uV();bV();vV();yV();wV();kV();ll();CV();Nft();Rft=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},_V=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Fft=[ew,rw,sw,pw,hw,gw,bw,yw,ow,lw,nw,xw,ww,kw],Oft=(()=>{let t=[Q("dees-form")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean,reflect:!0,attribute:"horizontal-layout"})],Rft(this,null,n,{kind:"accessor",name:"horizontalLayout",static:!1,private:!1,access:{has:d=>"horizontalLayout"in d,get:d=>d.horizontalLayout,set:(d,l)=>{d.horizontalLayout=l}},metadata:c},s,o),Rft(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=Ift;static demoGroups=["Form"];name="myform";changeSubject=new Mt.smartrx.rxjs.Subject;readyDeferred=Mt.smartpromise.defer();#e=_V(this,s,!1);get horizontalLayout(){return this.#e}set horizontalLayout(c){this.#e=c}static styles=[X`
      :host {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      :host([horizontal-layout]) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
      }
    `];render(){return w`
      <slot></slot>
    `}async firstUpdated(){let c=this.getFormElements();this.updateRequiredStatus(),this.updateChildrenLayoutMode();for(let d of c)d.changeSubject.subscribe(async()=>{let l=await this.collectFormData();this.changeSubject.next(l),console.log(l),this.updateRequiredStatus()});await this.addBehaviours(),this.readyDeferred.resolve()}getFormElements(){return Array.from(this.children).filter(c=>Fft.includes(c.constructor))}getSubmitButton(){return Array.from(this.children).find(c=>c instanceof dw)}async updateRequiredStatus(){console.log("checking the required status.");let c=!0;for(let d of this.getFormElements())d.required&&!d.value&&(c=!1);this.getSubmitButton()&&(this.getSubmitButton().disabled=!c)}async collectFormData(){let c=this.getFormElements(),d={};for(let l of c){if(!l.key){console.log(`form element with label "${l.label}" has no key. skipping.`);continue}d[l.key]=l.value}return d}async gatherAndDispatch(){let c=await this.collectFormData(),d=new CustomEvent("formData",{detail:{data:c},bubbles:!0});this.dispatchEvent(d),console.log("dispatched data:"),console.log(c)}setStatus(c,d){let l=this.getFormElements(),f=this.getSubmitButton();switch(c){case"normal":f.disabled=!1,f.status="normal";for(let b of l)b.disabled=!1;break;case"pending":f.disabled=!0,f.status="pending";for(let b of l)b.disabled=!0;break;case"success":f.disabled=!0,f.status="success";for(let b of l)b.disabled=!0;break;case"error":f.disabled=!0,f.status="error";for(let b of l)b.disabled=!0;break}f.text=d}reset(){let c=this.getFormElements(),d=this.getSubmitButton();for(let l of c)l.value=null;this.setStatus("normal","Submit")}async addBehaviours(){this.addEventListener("keydown",c=>{let d=c.target;if(Fft.includes(d.constructor)&&c.key==="Enter"){let l=this.getFormElements(),f=l.indexOf(d);f<l.length-1?l[f+1].focus():(d.blur(),this.getSubmitButton()?.focus())}})}updateChildrenLayoutMode(){let c=this.getFormElements();for(let d of c)"layoutMode"in d&&(d.layoutMode="auto")}updated(c){super.updated(c),c.has("horizontalLayout")&&this.updateChildrenLayoutMode()}constructor(){super(...arguments),_V(this,o)}static{_V(i,a)}};return u=i})()});var Bft,Hft=v(()=>{oe();x1();h2();W4();ll();xo();At();Bft=()=>w`
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .button-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      
      .vertical-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 300px;
      }
      
      .horizontal-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
      .demo-output {
        margin-top: 16px;
        padding: 12px;
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        border-radius: 6px;
        font-size: 14px;
        font-family: monospace;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
      }
      
      .icon-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 0;
      }
      
      .code-snippet {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 11.8%)")};
        padding: 8px 12px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 13px;
        display: inline-block;
        margin: 4px 0;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-button").forEach(a=>{a.addEventListener("clicked",()=>{let i=a.getAttribute("type")||"default";console.log(`Button variant clicked: ${i}`)})})}}>
      <dees-panel .title=${"1. Button Variants"} .subtitle=${"Different visual styles for various use cases"}>
        <div class="button-group">
          <dees-button type="default">Default</dees-button>
          <dees-button type="secondary">Secondary</dees-button>
          <dees-button type="destructive">Destructive</dees-button>
          <dees-button type="outline">Outline</dees-button>
          <dees-button type="ghost">Ghost</dees-button>
          <dees-button type="link">Link Button</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-button").forEach(a=>{a.addEventListener("clicked",()=>{let i=a.getAttribute("size")||"default";console.log(`Button size: ${i}`)})})}}>
      <dees-panel .title=${"2. Button Sizes"} .subtitle=${"Multiple sizes for different contexts and use cases"}>
        <div class="button-group">
          <dees-button size="sm">Small Button</dees-button>
          <dees-button size="default">Default Size</dees-button>
          <dees-button size="lg">Large Button</dees-button>
          <dees-button size="icon" type="outline" .text=${"\u{1F680}"}></dees-button>
        </div>
        
        <div class="button-group" style="margin-top: 16px;">
          <dees-button size="sm" type="secondary">Small Secondary</dees-button>
          <dees-button size="default" type="destructive">Default Destructive</dees-button>
          <dees-button size="lg" type="outline">Large Outline</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-button").forEach(a=>{a.addEventListener("clicked",()=>{let i=a.querySelector("dees-icon");if(i){let r=i.getAttribute("iconFA")||"unknown";console.log(`Icon button clicked: ${r}`)}})})}}>
      <dees-panel .title=${"3. Buttons with Icons"} .subtitle=${"Combining icons with text for enhanced visual communication"}>
        <div class="icon-row">
          <dees-button>
            <dees-icon icon="fa:plus"></dees-icon>
            Add Item
          </dees-button>
          <dees-button type="destructive">
            <dees-icon icon="fa:trash"></dees-icon>
            Delete
          </dees-button>
          <dees-button type="outline">
            <dees-icon icon="lucide:Download"></dees-icon>
            Download
          </dees-button>
        </div>

        <div class="icon-row">
          <dees-button type="secondary" size="sm">
            <dees-icon icon="fa:gear"></dees-icon>
            Settings
          </dees-button>
          <dees-button type="ghost">
            <dees-icon icon="fa:caretLeft"></dees-icon>
            Back
          </dees-button>
          <dees-button type="ghost">
            Next
            <dees-icon icon="fa:caretRight"></dees-icon>
          </dees-button>
        </div>

        <div class="icon-row">
          <dees-button size="icon" type="default">
            <dees-icon icon="fa:plus"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="secondary">
            <dees-icon icon="fa:gear"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="outline">
            <dees-icon icon="lucide:Search"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="ghost">
            <dees-icon icon="lucide:MoreVertical"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="destructive">
            <dees-icon icon="fa:trash"></dees-icon>
          </dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-button").forEach(a=>{a.addEventListener("clicked",()=>{let i=a.getAttribute("icon")||"none",r=a.getAttribute("iconPosition")||"left";console.log(`Icon property button: icon=${i}, position=${r}`)})})}}>
      <dees-panel .title=${"4. Icons via Property"} .subtitle=${"Simplified icon syntax using the icon property"}>
        <div class="icon-row">
          <dees-button icon="fa:plus">Add Item</dees-button>
          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
        </div>

        <div class="icon-row">
          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
        </div>

        <div class="icon-row">
          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
        </div>

        <div style="margin-top: 16px;">
          <div class="code-snippet">
            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
          </div>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector('dees-button[status="pending"]'),a=t.querySelector('dees-button[status="success"]'),i=t.querySelector('dees-button[status="error"]');e&&setTimeout(()=>{console.log("Pending button is showing loading state")},1e3),a&&a.addEventListener("clicked",()=>{console.log("Success state button clicked")}),i&&i.addEventListener("clicked",()=>{console.log("Error state button clicked")})}}>
      <dees-panel .title=${"5. Button States"} .subtitle=${"Different states to indicate button status and loading conditions"}>
        <div class="button-group">
          <dees-button status="normal">Normal</dees-button>
          <dees-button status="pending">Processing...</dees-button>
          <dees-button status="success">Success!</dees-button>
          <dees-button status="error">Error!</dees-button>
          <dees-button disabled>Disabled</dees-button>
        </div>
        
        <div class="button-group" style="margin-top: 16px;">
          <dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
          <dees-button type="outline" status="pending">Default Loading</dees-button>
          <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("#click-output"),a=t.querySelector("dees-button:first-of-type"),i=t.querySelector('dees-button[type="secondary"]'),r=t.querySelector('dees-button[type="destructive"]');a&&e&&a.addEventListener("clicked",()=>{e.textContent=`Clicked: Default button at ${new Date().toLocaleTimeString()}`}),i&&e&&i.addEventListener("clicked",n=>{e.textContent=`Clicked: Secondary button with data: ${n.detail.data}`}),r&&e&&r.addEventListener("clicked",async()=>{e.textContent="Processing...",await rt.plugins.smartdelay.delayFor(2e3),e.textContent="Action completed!"})}}>
      <dees-panel .title=${"6. Event Handling"} .subtitle=${"Interactive examples with click event handling"}>
        <div class="button-group">
          <dees-button>Click Me</dees-button>
          <dees-button type="secondary" .eventDetailData=${"custom-data-123"}>
            Click with Data
          </dees-button>
          <dees-button type="destructive">Async Action</dees-button>
        </div>
        
        <div id="click-output" class="demo-output">
          <em>Click a button to see the result...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("dees-form"),a=t.querySelector("#form-output");e&&a&&e.addEventListener("formData",n=>{a.innerHTML="<strong>Form submitted with data:</strong><br>"+JSON.stringify(n.detail.data,null,2)});let i=t.querySelector('dees-button[type="secondary"]'),r=t.querySelector('dees-button[type="ghost"]');i&&i.addEventListener("clicked",()=>{console.log("Save Draft clicked")}),r&&r.addEventListener("clicked",()=>{console.log("Cancel clicked")})}}>
      <dees-panel .title=${"7. Form Integration"} .subtitle=${"Buttons working within forms with automatic spacing"}>
        <dees-form>
          <dees-input-text label="Name" key="name" required></dees-input-text>
          <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
          <dees-input-text label="Message" key="message" isMultiline></dees-input-text>
          
          <dees-button type="secondary">Save Draft</dees-button>
          <dees-button type="ghost">Cancel</dees-button>
          <dees-form-submit>Submit Form</dees-form-submit>
        </dees-form>
        
        <div id="form-output" class="demo-output" style="white-space: pre-wrap;">
          <em>Submit the form to see the data...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-button").forEach(a=>{let i=a.getAttribute("type");i&&console.log(`Legacy type "${i}" is supported for backward compatibility`)})}}>
      <dees-panel .title=${"8. Backward Compatibility"} .subtitle=${"Old button types are automatically mapped to new variants"}>
        <div class="button-group">
          <dees-button type="normal">Normal → Default</dees-button>
          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
          <dees-button type="discreet">Discreet → Outline</dees-button>
          <dees-button type="big">Big → Large Size</dees-button>
        </div>
        
        <p style="margin-top: 16px; font-size: 14px; color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};">
          These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
        </p>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelectorAll(".vertical-group")[0],a=t.querySelectorAll(".vertical-group")[1];e&&e.querySelectorAll("dees-button").forEach((r,n)=>{r.addEventListener("clicked",()=>{let s=["Save Changes","Discard","Help"][n];console.log(`Action group: ${s} clicked`)})}),a&&a.querySelectorAll("dees-button").forEach((r,n)=>{r.addEventListener("clicked",()=>{let s=["Delete Account","Archive Data","Not Available"][n];n!==2&&console.log(`Danger zone: ${s} clicked`)})})}}>
      <dees-panel .title=${"9. Advanced Examples"} .subtitle=${"Complex button configurations and real-world use cases"}>
        <div class="horizontal-group">
          <div class="vertical-group">
            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
            <dees-button type="default" size="sm">
              <dees-icon icon="lucide:Save"></dees-icon>
              Save Changes
            </dees-button>
            <dees-button type="secondary" size="sm">
              <dees-icon icon="lucide:Undo2"></dees-icon>
              Discard
            </dees-button>
            <dees-button type="ghost" size="sm">
              <dees-icon icon="lucide:HelpCircle"></dees-icon>
              Help
            </dees-button>
          </div>

          <div class="vertical-group">
            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
            <dees-button type="destructive" size="sm">
              <dees-icon icon="fa:trash"></dees-icon>
              Delete Account
            </dees-button>
            <dees-button type="outline" size="sm">
              <dees-icon icon="lucide:Archive"></dees-icon>
              Archive Data
            </dees-button>
            <dees-button type="ghost" size="sm" disabled>
              <dees-icon icon="lucide:Ban"></dees-icon>
              Not Available
            </dees-button>
          </div>
        </div>
        
        <div style="margin-top: 24px;">
          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
          <div class="code-snippet">
            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
            &nbsp;&nbsp;Save Changes<br>
            &lt;/dees-button&gt;
          </div>
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var Ji,q1,qft,vo=v(()=>{oe();_t();Hft();He();Ji=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},q1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},qft=(()=>{let t=[Q("dees-button")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[];var ne=class extends r{static{i=this}static{let U=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({reflect:!0,hasChanged(){return!0}})],u=[D()],l=[D({type:Boolean,reflect:!0})],y=[D({type:Boolean})],x=[D({type:String})],N=[D({type:String})],I=[D({type:String})],V=[D({type:Boolean,reflect:!0})],E=[D({type:String,reflect:!0})],H=[D({type:String,reflect:!0})],Ji(this,null,n,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:be=>"text"in be,get:be=>be.text,set:(be,we)=>{be.text=we}},metadata:U},s,o),Ji(this,null,u,{kind:"accessor",name:"eventDetailData",static:!1,private:!1,access:{has:be=>"eventDetailData"in be,get:be=>be.eventDetailData,set:(be,we)=>{be.eventDetailData=we}},metadata:U},c,d),Ji(this,null,l,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:be=>"disabled"in be,get:be=>be.disabled,set:(be,we)=>{be.disabled=we}},metadata:U},f,b),Ji(this,null,y,{kind:"accessor",name:"isHidden",static:!1,private:!1,access:{has:be=>"isHidden"in be,get:be=>be.isHidden,set:(be,we)=>{be.isHidden=we}},metadata:U},g,h),Ji(this,null,x,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:be=>"type"in be,get:be=>be.type,set:(be,we)=>{be.type=we}},metadata:U},M,S),Ji(this,null,N,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:be=>"size"in be,get:be=>be.size,set:(be,we)=>{be.size=we}},metadata:U},_,k),Ji(this,null,I,{kind:"accessor",name:"status",static:!1,private:!1,access:{has:be=>"status"in be,get:be=>be.status,set:(be,we)=>{be.status=we}},metadata:U},L,A),Ji(this,null,V,{kind:"accessor",name:"insideForm",static:!1,private:!1,access:{has:be=>"insideForm"in be,get:be=>be.insideForm,set:(be,we)=>{be.insideForm=we}},metadata:U},C,z),Ji(this,null,E,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:be=>"icon"in be,get:be=>be.icon,set:(be,we)=>{be.icon=we}},metadata:U},T,$),Ji(this,null,H,{kind:"accessor",name:"iconPosition",static:!1,private:!1,access:{has:be=>"iconPosition"in be,get:be=>be.iconPosition,set:(be,we)=>{be.iconPosition=we}},metadata:U},O,G),Ji(null,e={value:i},t,{kind:"class",name:i.name,metadata:U},null,a),ne=i=e.value,U&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:U})}static demo=Bft;static demoGroups=["Button"];#e=q1(this,s,void 0);get text(){return this.#e}set text(U){this.#e=U}#t=(q1(this,o),q1(this,c,void 0));get eventDetailData(){return this.#t}set eventDetailData(U){this.#t=U}#a=(q1(this,d),q1(this,f,!1));get disabled(){return this.#a}set disabled(U){this.#a=U}#i=(q1(this,b),q1(this,g,!1));get isHidden(){return this.#i}set isHidden(U){this.#i=U}#r=(q1(this,h),q1(this,M,"default"));get type(){return this.#r}set type(U){this.#r=U}#s=(q1(this,S),q1(this,_,"default"));get size(){return this.#s}set size(U){this.#s=U}#n=(q1(this,k),q1(this,L,"normal"));get status(){return this.#n}set 
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: inline-block;
        box-sizing: border-box;
        font-family: inherit;
      }
      :host([hidden]) {
        display: none;
      }

      /* Form spacing styles */
      :host([inside-form]) {
        margin-bottom: 16px;
      }
      
      :host([inside-form]:last-child) {
        margin-bottom: 0;
      }
      
      dees-form[horizontal-layout] :host([inside-form]) {
        display: inline-block;
        margin-right: 16px;
        margin-bottom: 0;
      }
      
      dees-form[horizontal-layout] :host([inside-form]:last-child) {
        margin-right: 0;
      }

      .button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.15s ease;
        cursor: pointer;
        user-select: none;
        outline: none;
        letter-spacing: -0.01em;
        gap: 8px;
      }

      /* Size variants */
      .button.size-default {
        height: 36px;
        padding: 0 16px;
        font-size: 14px;
      }

      .button.size-sm {
        height: 32px;
        padding: 0 12px;
        font-size: 13px;
      }

      .button.size-lg {
        height: 44px;
        padding: 0 24px;
        font-size: 16px;
      }

      .button.size-icon {
        height: 36px;
        width: 36px;
        padding: 0;
      }

      /* Default variant */
      .button.default {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20.2% 11.8%)")};
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 16.8%)")};
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      }

      .button.default:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 10.2%)")};
        border-color: ${p.bdTheme("hsl(214.3 31.8% 85%)","hsl(215 20.2% 20%)")};
      }

      .button.default:active:not(.disabled) {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 9%)")};
      }

      /* Destructive variant */
      .button.destructive {
        background: hsl(0 84.2% 60.2%);
        color: hsl(0 0% 98%);
        border: 1px solid transparent;
      }

      .button.destructive:hover:not(.disabled) {
        background: hsl(0 84.2% 56.2%);
      }

      .button.destructive:active:not(.disabled) {
        background: hsl(0 84.2% 52.2%);
      }

      /* Outline variant */
      .button.outline {
        background: transparent;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        border: 1px solid ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 21.8%)")};
      }

      .button.outline:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        border-color: ${p.bdTheme("hsl(214.3 31.8% 85%)","hsl(215 20.2% 26.8%)")};
      }

      .button.outline:active:not(.disabled) {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 13.8%)")};
      }

      /* Secondary variant */
      .button.secondary {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        border: 1px solid transparent;
      }

      .button.secondary:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 13.8%)")};
      }

      .button.secondary:active:not(.disabled) {
        background: ${p.bdTheme("hsl(214.3 31.8% 85%)","hsl(215 20.2% 11.8%)")};
      }

      /* Ghost variant */
      .button.ghost {
        background: transparent;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        border: 1px solid transparent;
      }

      .button.ghost:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
      }

      .button.ghost:active:not(.disabled) {
        background: ${p.bdTheme("hsl(214.3 31.8% 91.4%)","hsl(215 20.2% 13.8%)")};
      }

      /* Link variant */
      .button.link {
        background: transparent;
        color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(213.1 93.9% 67.8%)")};
        border: none;
        text-decoration: underline;
        text-decoration-color: transparent;
        height: auto;
        padding: 0;
      }

      .button.link:hover:not(.disabled) {
        text-decoration-color: currentColor;
      }

      /* Status states */
      .button.pending,
      .button.success,
      .button.error {
        pointer-events: none;
        padding-left: 36px; /* Space for spinner */
      }
      
      .button.size-sm.pending,
      .button.size-sm.success,
      .button.size-sm.error {
        padding-left: 32px;
      }
      
      .button.size-lg.pending,
      .button.size-lg.success,
      .button.size-lg.error {
        padding-left: 44px;
      }

      .button.pending {
        background: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(213.1 93.9% 67.8% / 0.2)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(213.1 93.9% 67.8%)")};
        border: 1px solid transparent;
      }

      .button.success {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3% / 0.2)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(142.1 70.6% 45.3%)")};
        border: 1px solid transparent;
      }

      .button.error {
        background: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 62.8% 70.6% / 0.2)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 62.8% 70.6%)")};
        border: 1px solid transparent;
      }

      /* Disabled state */
      .button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }

      /* Hidden state */
      .button.hidden {
        display: none;
      }

      /* Focus state */
      .button:focus-visible {
        outline: 2px solid ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(213.1 93.9% 67.8%)")};
        outline-offset: 2px;
      }

      /* Loading spinner */
      dees-spinner {
        position: absolute;
        left: 10px;
        width: 16px;
        height: 16px;
      }
      
      .button.size-sm dees-spinner {
        left: 8px;
        width: 14px;
        height: 14px;
      }
      
      .button.size-lg dees-spinner {
        left: 14px;
        width: 18px;
        height: 18px;
      }
      
      /* Icon sizing within buttons */
      .button dees-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }
      
      .button.size-sm dees-icon {
        width: 14px;
        height: 14px;
      }
      
      .button.size-lg dees-icon {
        width: 18px;
        height: 18px;
      }

      /* Text alignment */
      .textbox {
        display: flex;
        align-items: center;
      }

    `];extractLightDom(){let U=this.querySelector("dees-icon"),be=Array.from(this.childNodes).filter(we=>we.nodeType===Node.TEXT_NODE).map(we=>we.textContent?.trim()).filter(Boolean).join(" ");if(be&&!this.text&&(this.text=be),U){let we=U.icon||U.getAttribute("icon")||(U.iconFA?`fa:${U.iconFA}`:null);if(we){let j=Array.from(this.childNodes),fe=j.indexOf(U),Ce=j.filter(Y=>Y.nodeType===Node.TEXT_NODE&&Y.textContent?.trim());if(Ce.length>0){let Y=j.indexOf(Ce[0]);this.iconPosition=fe<Y?"left":"right"}this.icon=we}U.remove()}this.innerHTML=""}render(){let be={normal:"default",highlighted:"destructive",discreet:"outline",big:"default"}[this.type]||this.type,we=this.type==="big"?"lg":this.size,j=this.iconPosition==="left"&&this.icon?w`<dees-icon .icon=${this.icon}></dees-icon>`:"",fe=this.iconPosition==="right"&&this.icon?w`<dees-icon .icon=${this.icon}></dees-icon>`:"",Ce=we==="icon"&&this.icon;return w`
      <div
        class="button ${this.isHidden?"hidden":""} ${be} size-${we} ${this.status} ${this.disabled?"disabled":""}"
        @click="${this.dispatchClick}"
      >
        ${this.status==="normal"?w``:w`
          <dees-spinner
            .bnw=${!0}
            status="${this.status}"
            size="${we==="sm"?14:we==="lg"?18:16}"
          ></dees-spinner>
        `}
        ${j}
        ${Ce?"":w`<div class="textbox">${this.text||"Button"}</div>`}
        ${fe}
      </div>
    `}async dispatchClick(){this.disabled||this.dispatchEvent(new CustomEvent("clicked",{detail:{data:this.eventDetailData},bubbles:!0}))}async firstUpdated(){this.extractLightDom()}static{q1(i,a)}};return ne=i})()});var Mo,pa,Vft,zw=v(()=>{L9t();i2();la();oe();At();r2();vo();He();Mo=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},pa=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Vft=(()=>{let t=[Q("dees-statsgrid")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[];var V=class extends r{static{i=this}static{let C=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Number})],l=[D({type:Number})],y=[D({type:Array})],x=[J()],N=[J()],I=[J()],Mo(this,null,n,{kind:"accessor",name:"tiles",static:!1,private:!1,access:{has:z=>"tiles"in z,get:z=>z.tiles,set:(z,E)=>{z.tiles=E}},metadata:C},s,o),Mo(this,null,u,{kind:"accessor",name:"minTileWidth",static:!1,private:!1,access:{has:z=>"minTileWidth"in z,get:z=>z.minTileWidth,set:(z,E)=>{z.minTileWidth=E}},metadata:C},c,d),Mo(this,null,l,{kind:"accessor",name:"gap",static:!1,private:!1,access:{has:z=>"gap"in z,get:z=>z.gap,set:(z,E)=>{z.gap=E}},metadata:C},f,b),Mo(this,null,y,{kind:"accessor",name:"gridActions",static:!1,private:!1,access:{has:z=>"gridActions"in z,get:z=>z.gridActions,set:(z,E)=>{z.gridActions=E}},metadata:C},g,h),Mo(this,null,x,{kind:"accessor",name:"contextMenuVisible",static:!1,private:!1,access:{has:z=>"contextMenuVisible"in z,get:z=>z.contextMenuVisible,set:(z,E)=>{z.contextMenuVisible=E}},metadata:C},M,S),Mo(this,null,N,{kind:"accessor",name:"contextMenuPosition",static:!1,private:!1,access:{has:z=>"contextMenuPosition"in z,get:z=>z.contextMenuPosition,set:(z,E)=>{z.contextMenuPosition=E}},metadata:C},_,k),Mo(this,null,I,{kind:"accessor",name:"contextMenuActions",static:!1,private:!1,access:{has:z=>"contextMenuActions"in z,get:z=>z.contextMenuActions,set:(z,E)=>{z.contextMenuActions=E}},metadata:C},L,A),Mo(null,e={value:i},t,{kind:"class",name:i.name,metadata:C},null,a),V=i=e.value,C&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:C})}static demo=T9t;static demoGroups=["Data View"];#e=pa(this,s,[]);get tiles(){return this.#e}set tiles(C){this.#e=C}#t=(pa(this,o),pa(this,c,250));get minTileWidth(){return this.#t}set minTileWidth(C){this.#t=C}#a=(pa(this,d),pa(this,f,16));get gap(){return this.#a}set gap(C){this.#a=C}#i=(pa(this,b),pa(this,g,[]));get gridActions(){return this.#i}set gridActions(C){this.#i=C}#r=(pa(this,h),pa(this,M,!1));get contextMenuVisible(){return this.#r}set contextMenuVisible(C){this.#r=C}#s=(pa(this,S),pa(this,_,{x:0,y:0}));get contextMenuPosition(){return this.#s}set contextMenuPosition(C){this.#s=C}#n=(pa(this,k),pa(this,L,[]));get contextMenuActions(){return this.#n}set contextMenuActions(C){this.#n=C}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        width: 100%;
        font-family: ${Qt};
      }

      /* CSS Variables for consistent spacing and sizing */
      :host {
        --grid-gap: 12px;
        --tile-padding: 16px;
        --header-spacing: 12px;
        --content-min-height: 40px;
        --value-font-size: 26px;
        --unit-font-size: 14px;
        --label-font-size: 12px;
        --title-font-size: 13px;
        --description-spacing: 8px;
        --border-radius: 6px;
        --transition-duration: 0.15s;
      }

      /* Grid Layout */
      .grid-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: calc(var(--grid-gap) * 1.5);
        min-height: 40px;
      }

      .grid-title {
        font-size: 16px;
        font-weight: 500;
        color: ${p.bdTheme("#09090b","#fafafa")};
        letter-spacing: -0.01em;
      }

      .grid-actions {
        display: flex;
        gap: 6px;
      }

      .grid-actions dees-button {
        font-size: var(--label-font-size);
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(${Ht(250)}px, 1fr));
        gap: ${Ht(16)}px;
        width: 100%;
      }

      /* Tile Base Styles */
      .stats-tile {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#202020")};
        border-radius: var(--border-radius);
        padding: var(--tile-padding);
        transition: all var(--transition-duration) ease;
        cursor: default;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .stats-tile:hover {
        background: ${p.bdTheme("#fafafa","#0d0d0d")};
        border-color: ${p.bdTheme("#d0d0d0","#2a2a2a")};
      }

      .stats-tile.clickable {
        cursor: pointer;
      }

      .stats-tile.clickable:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px ${p.bdTheme("rgba(0,0,0,0.03)","rgba(0,0,0,0.15)")};
      }

      /* Tile Header */
      .tile-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--header-spacing);
        flex-shrink: 0;
      }

      .tile-title {
        font-size: var(--title-font-size);
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        margin: 0;
        letter-spacing: -0.01em;
        line-height: 1.2;
      }

      .tile-icon {
        opacity: 0.7;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        font-size: 16px;
        flex-shrink: 0;
      }

      /* Tile Content */
      .tile-content {
        min-height: var(--content-min-height);
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .tile-value {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        display: flex;
        align-items: baseline;
        gap: 4px;
        letter-spacing: -0.025em;
      }

      .tile-unit {
        font-size: var(--unit-font-size);
        font-weight: 400;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        letter-spacing: -0.01em;
      }

      .tile-description {
        font-size: var(--label-font-size);
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        margin-top: var(--description-spacing);
        letter-spacing: -0.01em;
        flex-shrink: 0;
      }

      /* Gauge Styles */
      .gauge-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .gauge-container {
        width: 120px;
        height: 70px;
        position: relative;
        margin-top: -8px;
      }

      .gauge-svg {
        width: 100%;
        height: 100%;
      }

      .gauge-background {
        fill: none;
        stroke: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        stroke-width: 6;
      }

      .gauge-fill {
        fill: none;
        stroke-width: 6;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .gauge-text {
        fill: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        font-family: ${Qt};
        font-size: var(--value-font-size);
        font-weight: 600;
        text-anchor: middle;
        letter-spacing: -0.025em;
      }
      
      .gauge-unit {
        font-size: var(--unit-font-size);
        fill: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        font-weight: 400;
        font-family: ${Qt};
      }

      /* Percentage Styles */
      .percentage-wrapper {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .percentage-value {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
        margin-bottom: 8px;
      }

      .percentage-bar {
        width: 100%;
        height: 6px;
        background: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        border-radius: 3px;
        overflow: hidden;
        margin-top: auto;
      }

      .percentage-fill {
        height: 100%;
        background: ${p.bdTheme("#333333","#e0e0e0")};
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
      }

      /* Multi Percentage Styles */
      .multi-percentage-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .multi-percentage-items {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: auto;
      }

      .multi-percentage-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .multi-percentage-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }

      .multi-percentage-label {
        font-size: 11px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        letter-spacing: -0.01em;
      }

      .multi-percentage-value {
        font-size: 13px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        letter-spacing: -0.01em;
      }

      .multi-percentage-bar {
        width: 100%;
        height: 4px;
        background: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        border-radius: 2px;
        overflow: hidden;
      }

      .multi-percentage-fill {
        height: 100%;
        background: ${p.bdTheme("#333333","#e0e0e0")};
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px;
      }

      /* CPU Cores Styles */
      .cpu-cores-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 80px;
      }

      .cpu-cores-header {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 12px;
      }

      .cpu-cores-value {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
      }

      .cpu-cores-unit {
        font-size: var(--unit-font-size);
        font-weight: 400;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        letter-spacing: -0.01em;
      }

      .cpu-cores-label {
        font-size: var(--label-font-size);
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        letter-spacing: -0.01em;
        margin-left: auto;
      }

      .cpu-cores-bars {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        flex: 1;
        min-height: 60px;
        padding: 4px 0;
      }

      .cpu-cores-bars.centered {
        justify-content: center;
      }

      .cpu-core-bar-container {
        flex: 1;
        min-width: 6px;
        max-width: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }

      .cpu-core-bar-wrapper {
        flex: 1;
        width: 100%;
        background: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        border-radius: 2px;
        position: relative;
        overflow: hidden;
        min-height: 40px;
      }

      .cpu-core-bar-fill {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: ${p.bdTheme("#666666","#888888")};
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
        border-radius: 2px 2px 0 0;
      }

      .cpu-core-bar-fill.low {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
      }

      .cpu-core-bar-fill.medium {
        background: ${p.bdTheme("hsl(45.4 93.4% 47.5%)","hsl(45.4 93.4% 47.5%)")};
      }

      .cpu-core-bar-fill.high {
        background: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 84.2% 60.2%)")};
      }

      .cpu-core-label {
        font-size: 9px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      /* Partition Styles */
      .partition-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 8px;
      }

      .partition-header {
        display: flex;
        align-items: baseline;
        gap: 8px;
      }

      .partition-percentage {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
      }

      .partition-bar {
        width: 100%;
        height: 6px;
        background: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        border-radius: 3px;
        overflow: hidden;
      }

      .partition-bar-fill {
        height: 100%;
        background: ${p.bdTheme("#333333","#e0e0e0")};
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
      }

      .partition-bar-fill.warning {
        background: ${p.bdTheme("hsl(45.4 93.4% 47.5%)","hsl(45.4 93.4% 47.5%)")};
      }

      .partition-bar-fill.critical {
        background: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 84.2% 60.2%)")};
      }

      .partition-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
      }

      .partition-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .partition-stat-label {
        font-size: 10px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-transform: uppercase;
        letter-spacing: 0.02em;
      }

      .partition-stat-value {
        font-size: 13px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        letter-spacing: -0.01em;
      }

      .partition-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
      }

      .partition-filesystem {
        font-size: 11px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        padding: 2px 6px;
        border-radius: 3px;
      }

      .partition-mountpoint {
        font-size: 11px;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
      }

      /* Disk Styles */
      .disk-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 8px;
      }

      .disk-capacity {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
      }

      .disk-model {
        font-size: 12px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .disk-type-badge {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        padding: 2px 6px;
        border-radius: 3px;
      }

      .disk-metrics {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
      }

      .disk-iops {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .disk-iops-item {
        display: flex;
        align-items: baseline;
        gap: 4px;
      }

      .disk-iops-label {
        font-size: 10px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-transform: uppercase;
      }

      .disk-iops-value {
        font-size: 13px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
      }

      .disk-health {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .disk-health-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }

      .disk-health-label {
        font-size: 10px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        text-transform: uppercase;
      }

      .disk-health-value {
        font-size: 12px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
      }

      .disk-health-bar {
        width: 100%;
        height: 4px;
        background: ${p.bdTheme("#e8e8e8","#1a1a1a")};
        border-radius: 2px;
        overflow: hidden;
      }

      .disk-health-fill {
        height: 100%;
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px;
      }

      .disk-health-fill.good {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
      }

      .disk-health-fill.warning {
        background: ${p.bdTheme("hsl(45.4 93.4% 47.5%)","hsl(45.4 93.4% 47.5%)")};
      }

      .disk-health-fill.critical {
        background: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 84.2% 60.2%)")};
      }

      /* Trend Styles */
      .trend-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
      }

      .trend-header {
        display: flex;
        align-items: baseline;
        gap: 8px;
      }

      .trend-value {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
      }

      .trend-unit {
        font-size: var(--unit-font-size);
        font-weight: 400;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        letter-spacing: -0.01em;
      }

      .trend-label {
        font-size: var(--label-font-size);
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        letter-spacing: -0.01em;
        margin-left: auto;
      }

      .trend-graph {
        width: 100%;
        height: 28px;
        position: relative;
        margin-top: auto;
      }

      .trend-svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .trend-line {
        fill: none;
        stroke: ${p.bdTheme("#999999","#666666")};
        stroke-width: 1.5;
        stroke-linejoin: round;
        stroke-linecap: round;
      }

      .trend-area {
        fill: ${p.bdTheme("rgba(150, 150, 150, 0.08)","rgba(100, 100, 100, 0.08)")};
      }

      /* Text Value Styles */
      .text-value {
        font-size: var(--value-font-size);
        font-weight: 600;
        color: ${p.bdTheme("hsl(215.3 25% 8.8%)","hsl(210 40% 98%)")};
        line-height: 1.1;
        letter-spacing: -0.025em;
      }

      /* Context Menu */
      dees-contextmenu {
        position: fixed;
        z-index: 1000;
      }
    `];constructor(){super(),pa(this,A)}render(){return w`
      ${this.gridActions.length>0?w`
        <div class="grid-header">
          <div class="grid-title"></div>
          <div class="grid-actions">
            ${this.gridActions.map(C=>w`
              <dees-button 
                @clicked=${()=>this.handleGridAction(C)}
                type="outline"
                size="sm"
              >
                ${C.iconName?w`<dees-icon .icon=${C.iconName} size="small"></dees-icon>`:""}
                ${C.name}
              </dees-button>
            `)}
          </div>
        </div>
      `:""}
      
      <div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(${this.minTileWidth}px, 1fr)); gap: ${this.gap}px;">
        ${this.tiles.map(C=>this.renderTile(C))}
      </div>

      ${this.contextMenuVisible?w`
        <dees-contextmenu
          .x=${this.contextMenuPosition.x}
          .y=${this.contextMenuPosition.y}
          .menuItems=${this.contextMenuActions}
          @clicked=${()=>this.contextMenuVisible=!1}
        ></dees-contextmenu>
      `:""}
    `}renderTile(C){let z=C.actions&&C.actions.length>0,E=z&&C.actions.length===1,T=C.columnSpan&&C.columnSpan>1?C.columnSpan:void 0;return w`
      <div
        class="stats-tile ${E?"clickable":""}"
        style="${T?`grid-column: span ${T}`:""}"
        @click=${E?()=>this.handleTileAction(C.actions[0],C):void 0}
        @contextmenu=${z?$=>this.showContextMenu($,C):void 0}
      >
        <div class="tile-header">
          <h3 class="tile-title">${C.title}</h3>
          ${C.icon?w`
            <dees-icon class="tile-icon" .icon=${C.icon} size="small"></dees-icon>
          `:""}
        </div>
        
        <div class="tile-content">
          ${this.renderTileContent(C)}
        </div>
        
        ${C.description&&C.type!=="trend"?w`
          <div class="tile-description">${C.description}</div>
        `:""}
      </div>
    `}renderTileContent(C){switch(C.type){case"number":return w`
          <div class="tile-value" style="${C.color?`color: ${C.color}`:""}">
            <span>${C.value}</span>
            ${C.unit?w`<span class="tile-unit">${C.unit}</span>`:""}
          </div>
        `;case"gauge":return this.renderGauge(C);case"percentage":return this.renderPercentage(C);case"trend":return this.renderTrend(C);case"multiPercentage":return this.renderMultiPercentage(C);case"cpuCores":return this.renderCpuCores(C);case"partition":return this.renderPartition(C);case"disk":return this.renderDisk(C);case"text":return w`
          <div class="text-value" style="${C.color?`color: ${C.color}`:""}">
            ${C.value}
          </div>
        `;default:return w`<div class="tile-value">${C.value}</div>`}}renderGauge(C){let z=typeof C.value=="number"?C.value:parseFloat(C.value),E=C.gaugeOptions||{min:0,max:100},T=(z-E.min)/(E.max-E.min)*100,$=120,H=70,G=6/2+2,ne=40,U=$/2,be=H-G,we=U-ne,j=be,fe=U+ne,Y=`M ${we} ${j} A ${ne} ${ne} 0 0 1 ${fe} ${be}`,P=Math.PI*ne,F=P-P*T/100,W=C.color||p.bdTheme("hsl(215.3 25% 28.8%)","hsl(210 40% 78%)");if(E.thresholds){let B=[...E.thresholds].sort((K,ge)=>ge.value-K.value);for(let K of B)if(z>=K.value){W=K.color;break}}return w`
      <div class="gauge-wrapper">
        <div class="gauge-container">
          <svg class="gauge-svg" viewBox="0 0 ${$} ${H}" preserveAspectRatio="xMidYMid meet">
            <!-- Background arc -->
            <path
              class="gauge-background"
              d="${Y}"
            />
            <!-- Filled arc -->
            <path
              class="gauge-fill"
              d="${Y}"
              stroke="${W}"
              stroke-dasharray="${P}"
              stroke-dashoffset="${F}"
            />
            <!-- Value text -->
            <text class="gauge-text" x="${U}" y="${be-8}" dominant-baseline="middle">
              <tspan>${z}</tspan>${C.unit?w`<tspan class="gauge-unit" dx="2" dy="0">${C.unit}</tspan>`:""}
            </text>
          </svg>
        </div>
      </div>
    `}renderPercentage(C){let z=typeof C.value=="number"?C.value:parseFloat(C.value),E=Math.min(100,Math.max(0,z));return w`
      <div class="percentage-wrapper">
        <div class="percentage-value">${E}%</div>
        <div class="percentage-bar">
          <div 
            class="percentage-fill" 
            style="width: ${E}%; ${C.color?`background: ${C.color}`:""}"
          ></div>
        </div>
      </div>
    `}renderTrend(C){if(!C.trendData||C.trendData.length<2)return w`<div class="tile-value">${C.value}</div>`;let z=C.trendData,E=Math.max(...z),T=Math.min(...z),$=E-T||1,H=300,O=32,G=2,ne=z.map((be,we)=>{let j=we/(z.length-1)*H,fe=G+(O-2*G)-(be-T)/$*(O-2*G);return`${j},${fe}`}).join(" "),U=`0,${O} ${ne} ${H},${O}`;return w`
      <div class="trend-container">
        <div class="trend-header">
          <span class="trend-value">${C.value}</span>
          ${C.unit?w`<span class="trend-unit">${C.unit}</span>`:""}
          ${C.description?w`<span class="trend-label">${C.description}</span>`:""}
        </div>
        <div class="trend-graph">
          <svg class="trend-svg" viewBox="0 0 ${H} ${O}" preserveAspectRatio="none">
            <polygon class="trend-area" points="${U}" />
            <polyline class="trend-line" points="${ne}" />
          </svg>
        </div>
      </div>
    `}renderMultiPercentage(C){if(!C.percentages||C.percentages.length===0)return w`<div class="tile-value">${C.value}</div>`;let z=C.percentages.slice(0,3);return w`
      <div class="multi-percentage-wrapper">
        <div class="multi-percentage-items">
          ${z.map(E=>{let T=Math.min(100,Math.max(0,E.value));return w`
              <div class="multi-percentage-item">
                <div class="multi-percentage-header">
                  <span class="multi-percentage-label">${E.label}</span>
                  <span class="multi-percentage-value">${T}%</span>
                </div>
                <div class="multi-percentage-bar">
                  <div
                    class="multi-percentage-fill"
                    style="width: ${T}%; ${E.color?`background: ${E.color}`:""}"
                  ></div>
                </div>
              </div>
            `})}
        </div>
      </div>
    `}renderCpuCores(C){if(!C.coresData||C.coresData.length===0)return w`<div class="tile-value">${C.value}</div>`;let z=C.coresData,E=Math.round(z.reduce((ne,U)=>ne+U.usage,0)/z.length),T=ne=>ne<50?"low":ne<80?"medium":"high",$=z.length*24+(z.length-1)*3,H=C.columnSpan||1,O=this.minTileWidth*H+(H-1)*this.gap-32,G=$<O*.666;return w`
      <div class="cpu-cores-wrapper">
        <div class="cpu-cores-header">
          <span class="cpu-cores-value">${E}</span>
          <span class="cpu-cores-unit">%</span>
          <span class="cpu-cores-label">${z.length} cores</span>
        </div>
        <div class="cpu-cores-bars ${G?"centered":""}">
          ${z.map(ne=>{let U=Math.min(100,Math.max(0,ne.usage)),be=T(U);return w`
              <div class="cpu-core-bar-container" title="Core ${ne.label||ne.id}: ${U}%">
                <div class="cpu-core-bar-wrapper">
                  <div
                    class="cpu-core-bar-fill ${be}"
                    style="height: ${U}%"
                  ></div>
                </div>
                ${z.length<=16?w`
                  <span class="cpu-core-label">${ne.label||ne.id}</span>
                `:""}
              </div>
            `})}
        </div>
      </div>
    `}formatBytes(C){if(C===0)return"0 B";let z=1024,E=["B","KB","MB","GB","TB","PB"],T=Math.floor(Math.log(C)/Math.log(z));return parseFloat((C/Math.pow(z,T)).toFixed(1))+" "+E[T]}renderPartition(C){if(!C.partitionData)return w`<div class="tile-value">${C.value}</div>`;let{used:z,total:E,filesystem:T,mountPoint:$}=C.partitionData,H=Math.min(100,Math.max(0,z/E*100)),O=E-z,G=()=>H>=90?"critical":H>=75?"warning":"";return w`
      <div class="partition-wrapper">
        <div class="partition-header">
          <span class="partition-percentage">${Math.round(H)}%</span>
        </div>
        <div class="partition-bar">
          <div
            class="partition-bar-fill ${G()}"
            style="width: ${H}%"
          ></div>
        </div>
        <div class="partition-stats">
          <div class="partition-stat">
            <span class="partition-stat-label">Used</span>
            <span class="partition-stat-value">${this.formatBytes(z)}</span>
          </div>
          <div class="partition-stat">
            <span class="partition-stat-label">Free</span>
            <span class="partition-stat-value">${this.formatBytes(O)}</span>
          </div>
        </div>
        <div class="partition-meta">
          <span class="partition-filesystem">${T}</span>
          ${$?w`<span class="partition-mountpoint">${$}</span>`:""}
        </div>
      </div>
    `}renderDisk(C){if(!C.diskData)return w`<div class="tile-value">${C.value}</div>`;let{capacity:z,model:E,type:T,iops:$,health:H}=C.diskData,O=G=>G>=70?"good":G>=30?"warning":"critical";return w`
      <div class="disk-wrapper">
        <div class="disk-capacity">${this.formatBytes(z)}</div>
        ${E||T?w`
          <div class="disk-model">
            ${E?w`<span>${E}</span>`:""}
            ${T?w`<span class="disk-type-badge">${T}</span>`:""}
          </div>
        `:""}
        <div class="disk-metrics">
          ${$?w`
            <div class="disk-iops">
              <div class="disk-iops-item">
                <span class="disk-iops-label">Read</span>
                <span class="disk-iops-value">${$.read.toLocaleString()}</span>
              </div>
              <div class="disk-iops-item">
                <span class="disk-iops-label">Write</span>
                <span class="disk-iops-value">${$.write.toLocaleString()}</span>
              </div>
            </div>
          `:""}
          ${H!==void 0?w`
            <div class="disk-health">
              <div class="disk-health-header">
                <span class="disk-health-label">Health</span>
                <span class="disk-health-value">${H}%</span>
              </div>
              <div class="disk-health-bar">
                <div
                  class="disk-health-fill ${O(H)}"
                  style="width: ${H}%"
                ></div>
              </div>
            </div>
          `:""}
        </div>
      </div>
    `}async handleGridAction(C){C.action&&await C.action()}async handleTileAction(C,z){C.action&&await C.action()}showContextMenu(C,z){if(!z.actions||z.actions.length===0)return;C.preventDefault(),this.contextMenuPosition={x:C.clientX,y:C.clientY},this.contextMenuActions=z.actions,this.contextMenuVisible=!0;let E=()=>{this.contextMenuVisible=!1,document.removeEventListener("click",E)};setTimeout(()=>{document.addEventListener("click",E)},100)}static{pa(i,a)}};return V=i})()});var ul,Gr,$a2,Da2,Aa2,Ea2,jft,Uft=v(()=>{oe();x1();zw();ul=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Gr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},$a2=(()=>{let t=[Q("demo-dashboard-view")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],ul(this,null,n,{kind:"accessor",name:"activated",static:!1,private:!1,access:{has:d=>"activated"in d,get:d=>d.activated,set:(d,l)=>{d.activated=l}},metadata:c},s,o),ul(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),Gr(i,a)}#e=Gr(this,s,!1);get activated(){return this.#e}set activated(c){this.#e=c}ctx=Gr(this,o);statsTiles=[{id:"users",title:"Active Users",value:1234,type:"number",icon:"lucide:users",description:"Online now",color:"#22c55e"},{id:"api-calls",title:"API Calls",value:45200,type:"trend",icon:"lucide:activity",description:"+12% from last hour",color:"#3b82f6",trendData:[32e3,35e3,38e3,41e3,39e3,42e3,45200]},{id:"health",title:"System Health",value:99.9,unit:"%",type:"gauge",icon:"lucide:heart-pulse",description:"All systems operational",color:"#10b981",gaugeOptions:{min:0,max:100,thresholds:[{value:80,color:"#ef4444"},{value:95,color:"#f59e0b"},{value:100,color:"#10b981"}]}},{id:"response",title:"Avg Response",value:127,unit:"ms",type:"number",icon:"lucide:timer",description:"-15ms from yesterday",color:"#8b5cf6"},{id:"resources",title:"Resource Usage",value:"",type:"multiPercentage",icon:"lucide:server",percentages:[{label:"CPU",value:67,color:"#3b82f6"},{label:"Memory",value:84,color:"#8b5cf6"},{label:"Disk",value:45,color:"#10b981"}]},{id:"requests",title:"Requests/sec",value:1850,type:"trend",icon:"lucide:zap",description:"Current throughput",color:"#06b6d4",trendData:[1200,1400,1350,1600,1750,1680,1850]}];onActivate(c){this.ctx=c,this.activated=!0,console.log("Dashboard activated with context:",c),c.appui.setSecondaryMenu({heading:"Dashboard",groups:[{name:"Quick Access",iconName:"lucide:zap",items:[{key:"Overview",iconName:"layoutDashboard",action:()=>console.log("Overview")},{key:"Recent",iconName:"clock",badge:5,action:()=>console.log("Recent")},{type:"divider"},{type:"action",key:"Refresh Data",iconName:"lucide:refreshCw",action:()=>alert("Refreshing dashboard data...")}]},{name:"Filters",iconName:"lucide:filter",items:[{type:"header",label:"Time Range"},{type:"filter",key:"Live Updates",iconName:"lucide:radio",active:!0,onToggle:d=>console.log("Live updates:",d)},{type:"filter",key:"Show Archived",iconName:"lucide:archive",active:!1,onToggle:d=>console.log("Sho
      <style>
        :host {
          display: block;
          padding: 40px;
          color: #a3a3a3;
          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
        }
        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
        p { color: #737373; margin-bottom: 32px; }
        dees-statsgrid {
          margin-bottom: 32px;
        }

        .ctx-actions {
          margin-top: 32px;
          padding: 24px;
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 8px;
        }
        .ctx-actions h2 { color: #fafafa; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
        .button-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        .ctx-btn {
          background: rgba(59, 130, 246, 0.1);
          border: 1px solid rgba(59, 130, 246, 0.3);
          color: #60a5fa;
          padding: 8px 16px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 13px;
          transition: all 0.15s ease;
        }
        .ctx-btn:hover {
          background: rgba(59, 130, 246, 0.2);
          border-color: rgba(59, 130, 246, 0.5);
        }
        .ctx-btn.danger {
          background: rgba(239, 68, 68, 0.1);
          border-color: rgba(239, 68, 68, 0.3);
          color: #f87171;
        }
        .ctx-btn.danger:hover {
          background: rgba(239, 68, 68, 0.2);
          border-color: rgba(239, 68, 68, 0.5);
        }
        .ctx-btn.success {
          background: rgba(34, 197, 94, 0.1);
          border-color: rgba(34, 197, 94, 0.3);
          color: #4ade80;
        }
        .ctx-btn.success:hover {
          background: rgba(34, 197, 94, 0.2);
          border-color: rgba(34, 197, 94, 0.5);
        }
      </style>
      <h1>Dashboard</h1>
      <p>Welcome back! Here's an overview of your system.</p>
      <dees-statsgrid
        .tiles=${this.statsTiles}
        @tile-action=${c=>console.log("Tile action:",c.detail)}
      ></dees-statsgrid>

      <div class="ctx-actions">
        <h2>Context Actions (ctx.appui)</h2>
        <div class="button-grid">
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setMainMenuVisible(!1)}>Hide Main Menu</button>
          <button class="ctx-btn success" @click=${()=>this.ctx?.appui.setMainMenuVisible(!0)}>Show Main Menu</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setSecondaryMenuVisible(!1)}>Hide Secondary Menu</button>
          <button class="ctx-btn success" @click=${()=>this.ctx?.appui.setSecondaryMenuVisible(!0)}>Show Secondary Menu</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setContentTabsVisible(!1)}>Hide Content Tabs</button>
          <button class="ctx-btn success" @click=${()=>this.ctx?.appui.setContentTabsVisible(!0)}>Show Content Tabs</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setMainMenuCollapsed(!0)}>Collapse Main Menu</button>
          <button class="ctx-btn success" @click=${()=>this.ctx?.appui.setMainMenuCollapsed(!1)}>Expand Main Menu</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setBreadcrumbs(["Dashboard","Overview","Stats"])}>Set Breadcrumbs</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.navigateToView("projects")}>Go to Projects</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.navigateToView("settings",{section:"security"})}>Go to Settings/Security</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.activityLog.add({type:"custom",user:"Demo User",message:"Button clicked from ctx!",iconName:"lucide:mouse-pointer-click"})}>Add Activity Entry</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setMainMenuBadge("tasks",99)}>Set Tasks Badge to 99</button>
          <button class="ctx-btn danger" @click=${()=>this.ctx?.appui.clearMainMenuBadge("tasks")}>Clear Tasks Badge</button>
          <button class="ctx-btn" @click=${()=>this.ctx?.appui.setContentTabsAutoHide(!0,1)}>Auto-hide Tabs (≤1)</button>
          <button class="ctx-btn danger" @click=${()=>this.ctx?.appui.setContentTabsAutoHide(!1)}>Disable Auto-hide</button>
          <button class="ctx-btn success" @click=${()=>this.addCloseableTab()}>Add Closeable Tab</button>
        </div>
      </div>
    `}tabCounter=0;addCloseableTab(){if(!this.ctx)return;this.tabCounter++;let c=`Tab ${this.tabCounter}`;this.ctx.appui.addContentTab({key:c,iconName:"lucide:file",action:()=>console.log(`Selected ${c}`),closeable:!0,onClose:()=>{this.ctx?.appui.removeContentTab(c)}})}};return u=i})(),Da2=(()=>{let t=[Q("demo-settings-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],ul(this,null,n,{kind:"accessor",name:"section",static:!1,private:!1,access:{has:b=>"section"in b,get:b=>b.section,set:(b,y)=>{b.section=y}},metadata:f},s,o),ul(this,null,u,{kind:"accessor",name:"hasChanges",static:!1,private:!1,access:{has:b=>"hasChanges"in b,get:b=>b.hasChanges,set:(b,y)=>{b.hasChanges=y}},metadata:f},c,d),ul(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f}),Gr(i,a)}#e=Gr(this,s,"general");get section(){return this.#e}set section(f){this.#e=f}#t=(Gr(this,o),Gr(this,c,!1));get hasChanges(){return this.#t}set hasChanges(f){this.#t=f}appui=Gr(this,d);onActivate(f){this.appui=f.appui,console.log("Settings activated with params:",f.params),f.params?.section&&(this.section=f.params.section),f.appui.setSecondaryMenu({heading:"Settings",groups:[{name:"Account",iconName:"lucide:user",items:[{key:"general",iconName:"settings",action:()=>this.showSection("general")},{key:"profile",iconName:"user",action:()=>this.showSection("profile")},{key:"security",iconName:"shield",action:()=>this.showSection("security")}]},{name:"Preferences",iconName:"lucide:sliders",items:[{key:"notifications",iconName:"bell",badge:3,action:()=>this.showSection("notifications")},{key:"appearance",iconName:"palette",action:()=>this.showSection("appearance")}]}]}),f.appui.setSecondaryMenuSelection(this.section),f.appui.setContentTabs([])}onDeactivate(){console.log("Settings deactivated"),this.hasChanges=!1}canDeactivate(){return this.hasChanges?"You have unsaved changes. Leave anyway?":!0}showSection(f){this.section=f,this.appui?.setSecondaryMenuSelection(f)}simulateChange(){this.hasChanges=!0}render(){return w`
      <style>
        :host {
          display: block;
          padding: 40px;
          color: #a3a3a3;
          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
        }
        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
        p { color: #737373; margin-bottom: 24px; }
        .section-name {
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 8px;
          padding: 24px;
          font-size: 18px;
          color: #fafafa;
          margin-bottom: 16px;
        }
        .actions {
          display: flex;
          gap: 12px;
        }
        button {
          background: #3b82f6;
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
        }
        button:hover {
          background: #2563eb;
        }
        .warning {
          color: #fbbf24;
          font-size: 13px;
          margin-top: 16px;
        }
      </style>
      <h1>Settings</h1>
      <p>Manage your account and application preferences.</p>
      <div class="section-name">
        Current section: <strong>${this.section}</strong>
      </div>
      <div class="actions">
        <button @click=${()=>this.simulateChange()}>Make Changes</button>
      </div>
      ${this.hasChanges?w`<p class="warning">You have unsaved changes. Navigation will prompt for confirmation.</p>`:""}
    `}};return l=i})(),Aa2=(()=>{let t=[Q("demo-projects-view")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;ul(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),Gr(i,a)}onActivate(s){s.appui.setSecondaryMenu({heading:"Projects",groups:[{name:"My Projects",iconName:"lucide:folder",items:[{key:"Active",iconName:"folder",badge:3,action:()=>console.log("Active")},{key:"Archived",iconName:"archive",action:()=>console.log("Archived")},{key:"Shared",iconName:"users",badge:2,badgeVariant:"warning",action:()=>console.log("Shared")}]},{name:"Quick Actions",iconName:"lucide:zap",items:[{type:"action",key:"New Project",iconName:"lucide:folderPlus",action:()=>alert("Create new project")},{type:"action",key:"Import",iconName:"lucide:download",action:()=>alert("Import project")},{type:"divider"},{type:"link",key:"Templates",iconName:"lucide:layoutTemplate",href:"https://templates.example.com"}]}]}),s.appui.setContentTabs([{key:"Grid",iconName:"lucide:grid",action:()=>console.log("Grid view")},{key:"List",iconName:"lucide:list",action:()=>console.log("List view")},{key:"Board",iconName:"lucide:kanban",action:()=>console.log("Board view")}])}render(){return w`
      <style>
        :host {
          display: block;
          padding: 40px;
          color: #a3a3a3;
          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
        }
        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
        .projects {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .project {
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 8px;
          padding: 20px;
          cursor: pointer;
          transition: border-color 0.2s;
        }
        .project:hover {
          border-color: rgba(255,255,255,0.2);
        }
        .project h3 { color: #fafafa; margin: 0 0 8px 0; font-size: 16px; }
        .project p { color: #737373; margin: 0; font-size: 13px; }
        .badge {
          display: inline-block;
          background: #14532d;
          color: #4ade80;
          padding: 2px 8px;
          border-radius: 9px;
          font-size: 11px;
          margin-left: 8px;
        }
      </style>
      <h1>Projects</h1>
      <div class="projects">
        <div class="project">
          <h3>Frontend App <span class="badge">Active</span></h3>
          <p>React-based dashboard application</p>
        </div>
        <div class="project">
          <h3>API Server <span class="badge">Active</span></h3>
          <p>Node.js REST API backend</p>
        </div>
        <div class="project">
          <h3>Mobile App <span class="badge">Active</span></h3>
          <p>React Native iOS/Android app</p>
        </div>
        <div class="project">
          <h3>Documentation</h3>
          <p>Technical documentation site</p>
        </div>
      </div>
    `}};return n=i})(),Ea2=(()=>{let t=[Q("demo-tasks-view")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;ul(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),Gr(i,a)}onActivate(s){s.appui.setSecondaryMenu({heading:"Tasks",groups:[{name:"Views",iconName:"lucide:eye",items:[{key:"All Tasks",iconName:"list",badge:12,action:()=>console.log("All")},{key:"Today",iconName:"calendar",badge:3,action:()=>console.log("Today")},{key:"Upcoming",iconName:"clock",action:()=>console.log("Upcoming")},{key:"Completed",iconName:"checkCircle",action:()=>console.log("Completed")}]},{name:"Filters",iconName:"lucide:filter",items:[{type:"header",label:"Priority"},{type:"multiFilter",key:"Priority",iconName:"lucide:flag",options:[{key:"high",label:"High",checked:!0,iconName:"lucide:alertCircle"},{key:"medium",label:"Medium",checked:!0,iconName:"lucide:minusCircle"},{key:"low",label:"Low",checked:!1,iconName:"lucide:circle"}],onChange:o=>console.log("Priority filter:",o)},{type:"divider"},{type:"header",label:"Options"},{type:"filter",key:"Show Subtasks",iconName:"lucide:listTree",active:!0,onToggle:o=>console.log("Show subtasks:",o)},{type:"filter",key:"Show Completed",iconName:"lucide:checkSquare",active:!1,onToggle:o=>console.log("Show completed:",o)}]},{name:"Actions",iconName:"lucide:zap",items:[{type:"action",key:"Add Task",iconName:"lucide:plus",action:()=>alert("Add new task")},{type:"action",key:"Import Tasks",iconName:"lucide:upload",action:()=>alert("Import tasks")},{type:"divider"},{type:"action",key:"Clear Completed",iconName:"lucide:trash2",variant:"danger",confirmMessage:"Delete all completed tasks?",action:()=>alert("Cleared completed tasks")}]}]}),s.appui.setContentTabs([{key:"List",iconName:"lucide:list",action:()=>console.log("List")},{key:"Calendar",iconName:"lucide:calendar",action:()=>console.log("Calendar")}])}render(){return w`
      <style>
        :host {
          display: block;
          padding: 40px;
          color: #a3a3a3;
          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
        }
        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
        .task-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .task {
          display: flex;
          align-items: center;
          gap: 12px;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 8px;
          padding: 12px 16px;
        }
        .checkbox {
          width: 18px;
          height: 18px;
          border: 2px solid #525252;
          border-radius: 4px;
          cursor: pointer;
        }
        .task-text { color: #fafafa; flex: 1; }
        .due-date { color: #737373; font-size: 12px; }
        .priority {
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 11px;
        }
        .priority.high { background: #450a0a; color: #f87171; }
        .priority.medium { background: #451a03; color: #fbbf24; }
      </style>
      <h1>Tasks</h1>
      <div class="task-list">
        <div class="task">
          <div class="checkbox"></div>
          <span class="task-text">Review pull request #42</span>
          <span class="due-date">Today</span>
          <span class="priority high">High</span>
        </div>
        <div class="task">
          <div class="checkbox"></div>
          <span class="task-text">Update documentation</span>
          <span class="due-date">Tomorrow</span>
          <span class="priority medium">Medium</span>
        </div>
        <div class="task">
          <div class="checkbox"></div>
          <span class="task-text">Write unit tests</span>
          <span class="due-date">Dec 20</span>
        </div>
      </div>
    `}};return n=i})(),jft=()=>{let t={branding:{logoIcon:"lucide:box",logoText:"Acme App"},appBar:{menuItems:[{name:"File",action:async()=>{},submenu:[{name:"New Project",shortcut:"Cmd+N",iconName:"filePlus",action:async()=>console.log("New")},{name:"Open...",shortcut:"Cmd+O",iconName:"folderOpen",action:async()=>console.log("Open")},{name:"Recent Projects",action:async()=>{},submenu:[{name:"my-app",action:async()=>console.log("Open my-app")},{name:"component-lib",action:async()=>console.log("Open component-lib")}]},{divider:!0},{name:"Save All",shortcut:"Cmd+S",iconName:"save",action:async()=>console.log("Save")}]},{name:"Edit",action:async()=>{},submenu:[{name:"Undo",shortcut:"Cmd+Z",iconName:"undo",action:async()=>console.log("Undo")},{name:"Redo",shortcut:"Cmd+Shift+Z",iconName:"redo",action:async()=>console.log("Redo")},{divider:!0},{name:"Cut",shortcut:"Cmd+X",iconName:"scissors",action:async()=>console.log("Cut")},{name:"Copy",shortcut:"Cmd+C",iconName:"copy",action:async()=>console.log("Copy")},{name:"Paste",shortcut:"Cmd+V",iconName:"clipboard",action:async()=>console.log("Paste")}]},{name:"View",action:async()=>{},submenu:[{name:"Toggle Sidebar",shortcut:"Cmd+B",action:async()=>console.log("Toggle sidebar")},{name:"Toggle Activity Log",shortcut:"Cmd+Shift+A",action:async()=>console.log("Toggle activity")}]},{name:"Help",action:async()=>{},submenu:[{name:"Documentation",iconName:"book",action:async()=>console.log("Docs")},{name:"Keyboard Shortcuts",iconName:"keyboard",shortcut:"Cmd+/",action:async()=>console.log("Shortcuts")},{divider:!0},{name:"About",iconName:"info",action:async()=>console.log("About")}]}],breadcrumbs:"Dashboard",showWindowControls:!0,showSearch:!0,user:{name:"Jane Smith",email:"jane.smith@example.com",status:"online"},profileMenuItems:[{name:"Profile",iconName:"user",action:async()=>console.log("Profile")},{name:"Account Settings",iconName:"settings",action:async()=>console.log("Settings")},{divider:!0},{name:"Help & Support",iconName:"helpCircle",action:async()=>console.log("Help")},{divider:!0},{name:"Sign Out",iconName:"logOut",action:async()=>console.log("Sign out")}]},views:[{id:"dashboard",name:"Dashboard",iconName:"lucide:home",content:"demo-dashboard-view",route:"dashboard"},{id:"projects",name:"Projects",iconName:"lucide:folder",content:"demo-projects-view",route:"projects",badge:3},{id:"tasks",name:"Tasks",iconName:"lucide:checkSquare",content:"demo-tasks-view",route:"tasks",badge:12},{id:"settings",name:"Settings",iconName:"lucide:settings",content:"demo-settings-view",route:"settings/:section?"}],mainMenu:{sections:[{name:"Main",views:["dashboard"]},{name:"Workspace",views:["projects","tasks"]}],bottomItems:["settings"]},defaultView:"dashboard",bottomBar:{visible:!0,widgets:[{id:"status",iconName:"lucide:activity",label:"System Online",status:"success",tooltip:"All systems operational",onClick:()=>console.log("Status clicked")},{id:"notifications",iconName:"lucide:bell",label:"3 notifications",status:"warning",tooltip:"You have unread notifications",onClick:()=>console.log("Notifications clicked")},{id:"version",iconName:"lucide:gitBranch",label:"v1.2.3",position:"right",tooltip:"Current version"}],actions:[{id:"terminal",iconName:"lucide:terminal",tooltip:"Open Terminal",position:"right",onClick:()=>console.log("Terminal clicked")}]},onViewChange:(i,r)=>{console.log(`View changed to: ${i} (${r.name})`)},onSearch:i=>{console.log("Search query:",i)}},e=document.createElement("div");e.className="demo-container",e.style.cssText="position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;";let a=document.createElement("dees-appui");return e.appendChild(a),setTimeout(async()=>{await a.updateComplete,a.configure(t),setTimeout(()=>{a.activityLog.addMany([{type:"login",user:"Jane Smith",message:"logged in from Chrome on macOS"},{type:"create",user:"Jane Smith",message:'created project "Frontend App"'},{type:"update",user:"John Doe",message:"updated API documentation"},{type:"view",user:"Jane Smith",message:"viewed dashboard analytics"},{type:"delete",user:"Admin",m
    <dees-demowrapper>
      ${e}
    </dees-demowrapper>
  `}});var qd,TV=v(()=>{oe();qd=class{views=new Map;instances=new Map;currentViewId=null;appui=null;setAppuiRef(e){this.appui=e}register(e){this.views.has(e.id)&&console.warn(`View with id "${e.id}" already registered. Overwriting.`),this.views.set(e.id,e)}registerAll(e){e.forEach(a=>this.register(a))}get(e){return this.views.get(e)}getViewIds(){return Array.from(this.views.keys())}getAll(){return Array.from(this.views.values())}getRoute(e){let a=this.views.get(e);return a?.route||a?.id||""}findByRoute(e){for(let a of this.views.values()){let i=a.route||a.id,r=this.matchRoute(i,e);if(r!==null)return{view:a,params:r}}}matchRoute(e,a){let i=e.split("/"),r=a.split("/");if(i.length>0&&i[i.length-1].endsWith("?")){if(r.length<i.length-1||r.length>i.length)return null}else if(i.length!==r.length)return null;let s={};for(let o=0;o<i.length;o++){let u=i[o],c=u.endsWith("?");if(c&&(u=u.slice(0,-1)),u.startsWith(":")){let d=u.slice(1);if(r[o]!==void 0)s[d]=r[o];else if(!c)return null}else if(r[o]!==u)return null}return s}async canLeaveCurrentView(){if(!this.currentViewId)return!0;let e=this.instances.get(this.currentViewId);if(!e)return!0;let a=e;return typeof a.canDeactivate=="function"?await a.canDeactivate():!0}async activateView(e,a,i){let r=this.views.get(e);if(!r)return console.error(`View "${e}" not found in registry`),null;let n=r.cache!==!1;this.currentViewId&&this.currentViewId!==e&&await this.deactivateView(this.currentViewId);let s=n?this.instances.get(e):void 0;if(s)s.style.display="";else{if(s=await this.createViewElement(r),!s)return console.error(`Failed to create element for view "${e}"`),null;a.appendChild(s),n&&this.instances.set(e,s)}return this.currentViewId=e,await this.callOnActivate(s,e,i),s}async deactivateView(e){let a=this.instances.get(e);if(!a)return;let i=a;typeof i.onDeactivate=="function"&&await i.onDeactivate(),a.style.display="none"}async createViewElement(e){let a=e.content;if(typeof a=="function"&&!(a.prototype instanceof HTMLElement)&&a.constructor.name==="AsyncFunction")try{a=await a()}catch(r){return console.error(`Failed to load async content for view "${e.id}":`,r),null}let i;if(typeof a=="string")i=document.createElement(a);else if(typeof a=="function")if(a.prototype instanceof HTMLElement)i=new a;else{let r=document.createElement("div");r.className="view-content-wrapper",r.style.cssText="display: contents;";let n=a();gn(n,r),i=r}else return console.error(`Invalid content type for view "${e.id}"`),null;return i.dataset.viewId=e.id,i}async callOnActivate(e,a,i){let r=e;if(typeof r.onActivate=="function"){let n={appui:this.appui,viewId:a,params:i};await r.onActivate(n)}}renderView(e,a){let i=this.views.get(e);if(!i)return console.error(`View "${e}" not found in registry`),null;a.innerHTML="";let r,n=i.content;if(typeof n=="string")r=document.createElement(n);else if(typeof n=="function")if(n.prototype instanceof HTMLElement)r=new n;else{let s=document.createElement("div");s.className="view-content-wrapper",s.style.cssText="display: contents;";let o=n();gn(o,s),r=s}else return console.error(`Invalid content type for view "${e}"`),null;return a.appendChild(r),this.instances.set(e,r),this.currentViewId=e,r}getCurrentViewId(){return this.currentViewId}getInstance(e){return this.instances.get(e)}clearInstance(e){let a=this.instances.get(e);a&&a.parentNode&&a.parentNode.removeChild(a),this.instances.delete(e),this.currentViewId===e&&(this.currentViewId=null)}clearInstances(){for(let[e,a]of this.instances)a.parentNode&&a.parentNode.removeChild(a);this.instances.clear(),this.currentViewId=null}unregister(e){return this.clearInstance(e),this.views.delete(e)}clear(){this.views.clear(),this.clearInstances()}has(e){return this.views.has(e)}get size(){return this.views.size}}});var Wft,Gft=v(()=>{oe();Wft=()=>w`
  <style>
    .demo-mainmenu-container {
      display: flex;
      height: 100%;
      background: #1a1a1a;
      border-radius: 8px;
    }
    .demo-mainmenu-container .spacer {
      flex: 1;
      background: #0f0f0f;
    }
  </style>
  <div class="demo-mainmenu-container">
    <dees-appui-mainmenu
      .logoIcon=${"lucide:box"}
      .logoText=${"Acme App"}
      .menuGroups=${[{tabs:[{key:"Dashboard",iconName:"lucide:home",action:()=>console.log("Dashboard")},{key:"Inbox",iconName:"lucide:inbox",action:()=>console.log("Inbox")}]},{name:"Workspace",tabs:[{key:"Projects",iconName:"lucide:folder",action:()=>console.log("Projects")},{key:"Tasks",iconName:"lucide:checkSquare",action:()=>console.log("Tasks")},{key:"Documents",iconName:"lucide:fileText",action:()=>console.log("Documents")}]},{name:"Analytics",tabs:[{key:"Reports",iconName:"lucide:barChart3",action:()=>console.log("Reports")},{key:"Insights",iconName:"lucide:lightbulb",action:()=>console.log("Insights")}]}]}
      .bottomTabs=${[{key:"Settings",iconName:"lucide:settings",action:()=>console.log("Settings")},{key:"Help",iconName:"lucide:helpCircle",action:()=>console.log("Help")}]}
    ></dees-appui-mainmenu>
    <div class="spacer"></div>
  </div>
`});var ko,ua,Yft,LV=v(()=>{i2();bo();bi();oe();r2();Gft();He();ko=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ua=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Yft=(()=>{let t=[Q("dees-appui-mainmenu")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[];var V=class extends r{static{i=this}static{let C=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:Array})],y=[D({type:Array})],x=[D({type:Array})],N=[D()],I=[D({type:Boolean,reflect:!0})],ko(this,null,n,{kind:"accessor",name:"logoIcon",static:!1,private:!1,access:{has:z=>"logoIcon"in z,get:z=>z.logoIcon,set:(z,E)=>{z.logoIcon=E}},metadata:C},s,o),ko(this,null,u,{kind:"accessor",name:"logoText",static:!1,private:!1,access:{has:z=>"logoText"in z,get:z=>z.logoText,set:(z,E)=>{z.logoText=E}},metadata:C},c,d),ko(this,null,l,{kind:"accessor",name:"menuGroups",static:!1,private:!1,access:{has:z=>"menuGroups"in z,get:z=>z.menuGroups,set:(z,E)=>{z.menuGroups=E}},metadata:C},f,b),ko(this,null,y,{kind:"accessor",name:"bottomTabs",static:!1,private:!1,access:{has:z=>"bottomTabs"in z,get:z=>z.bottomTabs,set:(z,E)=>{z.bottomTabs=E}},metadata:C},g,h),ko(this,null,x,{kind:"accessor",name:"tabs",static:!1,private:!1,access:{has:z=>"tabs"in z,get:z=>z.tabs,set:(z,E)=>{z.tabs=E}},metadata:C},M,S),ko(this,null,N,{kind:"accessor",name:"selectedTab",static:!1,private:!1,access:{has:z=>"selectedTab"in z,get:z=>z.selectedTab,set:(z,E)=>{z.selectedTab=E}},metadata:C},_,k),ko(this,null,I,{kind:"accessor",name:"collapsed",static:!1,private:!1,access:{has:z=>"collapsed"in z,get:z=>z.collapsed,set:(z,E)=>{z.collapsed=E}},metadata:C},L,A),ko(null,e={value:i},t,{kind:"class",name:i.name,metadata:C},null,a),V=i=e.value,C&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:C})}static demo=Wft;static demoGroups=["App UI"];#e=ua(this,s,"");get logoIcon(){return this.#e}set logoIcon(C){this.#e=C}#t=(ua(this,o),ua(this,c,""));get logoText(){return this.#t}set logoText(C){this.#t=C}#a=(ua(this,d),ua(this,f,[]));get menuGroups(){return this.#a}set menuGroups(C){this.#a=C}#i=(ua(this,b),ua(this,g,[]));get bottomTabs(){return this.#i}set bottomTabs(C){this.#i=C}#r=(ua(this,h),ua(this,M,[]));get tabs(){return this.#r}set tabs(C){this.#r=C}#s=(ua(this,S),ua(this,_,void 0));get selectedTab(){return this.#s}set selectedTab(C){this.#s=C}#n=(ua(this,k),ua(this,L,!1));get collapsed(){return this.#n}set collapsed(C){this.#n=C}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        --menu-width-expanded: 200px;
        --menu-width-collapsed: 56px;
        --tooltip-bg: ${p.bdTheme("#18181b","#fafafa")};
        --tooltip-fg: ${p.bdTheme("#fafafa","#18181b")};
        position: relative;
        display: block;
        height: 100%;
      }

      .mainContainer {
        color: ${p.bdTheme("#666","#ccc")};
        z-index: ${a2.fixed.appBar};
        display: flex;
        flex-direction: column;
        position: relative;
        width: var(--menu-width-expanded);
        height: 100%;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
        user-select: none;
        border-right: 1px solid ${p.bdTheme("#e5e5e5","#1a1a1a")};
        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        transition: width 0.25s ease;
      }

      :host([collapsed]) .mainContainer {
        width: var(--menu-width-collapsed);
      }

      /* Floating collapse toggle button */
      .collapse-toggle {
        position: absolute;
        right: -12px;
        top: 24px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: ${p.bdTheme("#ffffff","#27272a")};
        border: 1px solid ${p.bdTheme("#e5e5e5","#3f3f46")};
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#737373","#a1a1aa")};
        opacity: 0;
        transition: opacity 0.2s ease, background 0.15s ease;
        padding: 0;
      }

      .collapse-toggle:hover {
        background: ${p.bdTheme("#f4f4f5","#3f3f46")};
        color: ${p.bdTheme("#0a0a0a","#fafafa")};
      }

      :host(:hover) .collapse-toggle {
        opacity: 1;
      }

      .collapse-toggle dees-icon {
        font-size: 14px;
      }

      /* Logo Section */
      .logoSection {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 48px;
        padding: 0 14px;
        border-bottom: 1px solid ${p.bdTheme("#e5e5e5","#1a1a1a")};
        flex-shrink: 0;
        box-sizing: border-box;
      }

      .logoSection .logoIcon {
        font-size: 22px;
        color: ${p.bdTheme("#0a0a0a","#fafafa")};
        flex-shrink: 0;
      }

      .logoSection .logoText {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        color: ${p.bdTheme("#0a0a0a","#fafafa")};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.2s ease, width 0.25s ease;
      }

      :host([collapsed]) .logoSection {
        justify-content: center;
        padding: 0;
        gap: 0;
      }

      :host([collapsed]) .logoSection .logoText {
        display: none;
      }

      /* Middle Section (scrollable) */
      .menuSection {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 8px 0;
      }

      .menuSection::-webkit-scrollbar {
        width: 6px;
      }

      .menuSection::-webkit-scrollbar-track {
        background: transparent;
      }

      .menuSection::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.15)","rgba(255, 255, 255, 0.15)")};
        border-radius: 3px;
      }

      .menuSection::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.25)","rgba(255, 255, 255, 0.25)")};
      }

      /* Menu Group */
      .menuGroup {
        padding: 0 8px;
        margin-bottom: 8px;
      }

      .menuGroup:last-child {
        margin-bottom: 0;
      }

      .groupHeader {
        padding: 8px 12px 6px;
        font-size: 11px;
        font-weight: 600;
        color: ${p.bdTheme("#737373","#737373")};
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        transition: opacity 0.2s ease, max-height 0.25s ease;
        max-height: 30px;
      }

      :host([collapsed]) .groupHeader {
        opacity: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
      }

      .groupTabs {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      :host([collapsed]) .menuGroup {
        padding: 0 4px;
      }

      /* Tab Item */
      .tab {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        color: ${p.bdTheme("#525252","#a3a3a3")};
      }

      .tab:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.06)")};
        color: ${p.bdTheme("#262626","#e5e5e5")};
      }

      .tab:active {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.08)")};
      }

      .tab.selectedTab {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.08)")};
        color: ${p.bdTheme("#0a0a0a","#fafafa")};
      }

      .tab.selectedTab::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: ${p.bdTheme("#0a0a0a","#fafafa")};
        border-radius: 0 2px 2px 0;
      }

      .tab dees-icon {
        font-size: 18px;
        opacity: 0.85;
        flex-shrink: 0;
      }

      .tab.selectedTab dees-icon {
        opacity: 1;
      }

      .tab .tabLabel {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.2s ease, width 0.25s ease;
      }

      /* Collapsed tab styles */
      :host([collapsed]) .tab {
        justify-content: center;
        padding: 10px;
        gap: 0;
      }

      :host([collapsed]) .tab .tabLabel {
        opacity: 0;
        width: 0;
        position: absolute;
      }

      :host([collapsed]) .tab.selectedTab::before {
        left: -4px;
      }

      /* Tooltip for collapsed state */
      .tab-tooltip {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 12px;
        padding: 6px 12px;
        background: var(--tooltip-bg);
        color: var(--tooltip-fg);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      .tab-tooltip::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        border: 4px solid transparent;
        border-right-color: var(--tooltip-bg);
      }

      :host([collapsed]) .tab:hover .tab-tooltip {
        opacity: 1;
        transition-delay: 1s;
      }

      /* Badge styles */
      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 9px;
        margin-left: auto;
      }

      .badge.default {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#3f3f46","#a1a1aa")};
      }

      .badge.success {
        background: ${p.bdTheme("#dcfce7","#14532d")};
        color: ${p.bdTheme("#166534","#4ade80")};
      }

      .badge.warning {
        background: ${p.bdTheme("#fef3c7","#451a03")};
        color: ${p.bdTheme("#92400e","#fbbf24")};
      }

      .badge.error {
        background: ${p.bdTheme("#fee2e2","#450a0a")};
        color: ${p.bdTheme("#991b1b","#f87171")};
      }

      :host([collapsed]) .badge {
        display: none;
      }

      /* Bottom Section */
      .bottomSection {
        flex-shrink: 0;
        padding: 8px;
        border-top: 1px solid ${p.bdTheme("#e5e5e5","#1a1a1a")};
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      :host([collapsed]) .bottomSection {
        padding: 8px 4px;
      }
    `];render(){let C=this.getAllTabs();return w`
      <div class="mainContainer" @contextmenu=${z=>{jt.openContextMenuWithOptions(z,[{name:"app settings",action:async()=>{},iconName:"gear"}])}}>
        ${this.logoIcon||this.logoText?w`
          <div class="logoSection">
            ${this.logoIcon?w`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>`:""}
            ${this.logoText?w`<span class="logoText">${this.logoText}</span>`:""}
          </div>
        `:""}

        <div class="menuSection">
          ${this.menuGroups.length>0?this.renderMenuGroups():this.renderLegacyTabs()}
        </div>

        ${this.bottomTabs.length>0?w`
          <div class="bottomSection">
            ${this.bottomTabs.map(z=>this.renderTab(z))}
          </div>
        `:""}
      </div>
      <button class="collapse-toggle" @click="${()=>this.toggleCollapse()}">
        <dees-icon .icon="${this.collapsed?"lucide:chevronRight":"lucide:chevronLeft"}"></dees-icon>
      </button>
    `}renderMenuGroups(){return w`
      ${this.menuGroups.map(C=>w`
        <div class="menuGroup">
          ${C.name?w`<div class="groupHeader">${C.name}</div>`:""}
          <div class="groupTabs">
            ${C.items.map(z=>this.renderTab(z))}
          </div>
        </div>
      `)}
    `}renderLegacyTabs(){return w`
      <div class="menuGroup">
        <div class="groupTabs">
          ${this.tabs.map(C=>this.renderTab(C))}
        </div>
      </div>
    `}renderTab(C){return w`
      <div
        class="tab ${C===this.selectedTab?"selectedTab":""}"
        @click="${()=>{this.updateTab(C)}}"
      >
        <dees-icon .icon="${C.iconName||""}"></dees-icon>
        <span class="tabLabel">${C.key}</span>
        ${C.badge!==void 0?w`
          <span class="badge ${C.badgeVariant||"default"}">${C.badge}</span>
        `:""}
        <span class="tab-tooltip">${C.key}</span>
      </div>
    `}getAllTabs(){return this.menuGroups.length>0?[...this.menuGroups.flatMap(z=>z.items),...this.bottomTabs]:[...this.tabs,...this.bottomTabs]}updateTab(C){this.selectedTab=C,this.selectedTab.action(),this.dispatchEvent(new CustomEvent("tab-select",{detail:{tab:C},bubbles:!0,composed:!0}))}firstUpdated(){let C=this.getAllTabs();C.length>0&&this.updateTab(C[0])}toggleCollapse(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0}))}constructor(){super(...arguments),ua(this,A)}static{ua(i,a)}};return V=i})()});var Zft,Xft=v(()=>{oe();Zft=()=>w`
  <style>
    .demo-secondarymenu-container {
      display: flex;
      height: 100%;
      background: #1a1a1a;
      border-radius: 8px;
    }
    .demo-secondarymenu-container .spacer {
      flex: 1;
      background: #0f0f0f;
      padding: 20px;
      color: #a3a3a3;
      font-family: 'Geist Sans', sans-serif;
    }
    .demo-secondarymenu-container .spacer h3 {
      color: #fafafa;
      margin-top: 0;
    }
    .demo-secondarymenu-container .spacer code {
      background: #27272a;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
    .demo-secondarymenu-container .spacer ul {
      line-height: 1.8;
    }
  </style>
  <div class="demo-secondarymenu-container">
    <dees-appui-secondarymenu
      .heading=${"Projects"}
      .groups=${[{name:"Navigation",iconName:"lucide:compass",items:[{key:"Dashboard",iconName:"lucide:layoutDashboard",action:()=>console.log("Dashboard clicked"),badge:3,badgeVariant:"warning"},{key:"Projects",iconName:"lucide:folder",action:()=>console.log("Projects clicked"),badge:"new",badgeVariant:"success"},{key:"Analytics",iconName:"lucide:barChart2",action:()=>console.log("Analytics clicked")}]},{name:"Actions",iconName:"lucide:zap",items:[{type:"action",key:"Create New",iconName:"lucide:plus",action:()=>alert("Create New clicked!")},{type:"action",key:"Import Data",iconName:"lucide:upload",action:()=>alert("Import Data clicked!")},{type:"divider"},{type:"action",key:"Delete All",iconName:"lucide:trash2",variant:"danger",confirmMessage:"Are you sure you want to delete all items?",action:()=>alert("Deleted!")}]},{name:"Filters",iconName:"lucide:filter",items:[{type:"header",label:"Status"},{type:"filter",key:"Show Active",iconName:"lucide:checkCircle",active:!0,onToggle:t=>console.log("Show Active:",t)},{type:"filter",key:"Show Archived",iconName:"lucide:archive",active:!1,onToggle:t=>console.log("Show Archived:",t)},{type:"divider"},{type:"multiFilter",key:"Categories",iconName:"lucide:tag",collapsed:!1,options:[{key:"frontend",label:"Frontend",checked:!0,iconName:"lucide:monitor"},{key:"backend",label:"Backend",checked:!0,iconName:"lucide:server"},{key:"devops",label:"DevOps",checked:!1,iconName:"lucide:cloud"},{key:"design",label:"Design",checked:!1,iconName:"lucide:palette"}],onChange:t=>console.log("Selected categories:",t)}]},{name:"Resources",iconName:"lucide:bookOpen",collapsed:!0,items:[{type:"header",label:"Documentation"},{type:"link",key:"API Reference",iconName:"lucide:fileText",href:"https://api.example.com/docs"},{type:"link",key:"User Guide",iconName:"lucide:book",href:"https://docs.example.com/guide"},{type:"divider"},{type:"header",label:"Support"},{type:"link",key:"Help Center",iconName:"lucide:helpCircle",href:"/help",external:!1},{type:"link",key:"GitHub Issues",iconName:"lucide:github",href:"https://github.com/example/issues"}]}]}
      @item-select=${t=>console.log("Tab selected:",t.detail)}
      @action-click=${t=>console.log("Action clicked:",t.detail)}
      @filter-toggle=${t=>console.log("Filter toggled:",t.detail)}
      @multifilter-change=${t=>console.log("Multi-filter changed:",t.detail)}
      @link-click=${t=>console.log("Link clicked:",t.detail)}
    ></dees-appui-secondarymenu>
    <div class="spacer">
      <h3>Secondary Menu Demo</h3>
      <p>This demo showcases all 8 item types:</p>
      <ul>
        <li><code>tab</code> - Selectable items (Navigation group)</li>
        <li><code>action</code> - Blue actions (Actions group)</li>
        <li><code>action</code> with <code>variant: 'danger'</code> - Red danger action</li>
        <li><code>filter</code> - Checkbox toggles (Filters group)</li>
        <li><code>multiFilter</code> - Collapsible multi-select (Categories)</li>
        <li><code>divider</code> - Visual separators</li>
        <li><code>header</code> - Section labels</li>
        <li><code>link</code> - External/internal links (Resources group)</li>
      </ul>
      <p>Try the collapse toggle on the left edge!</p>
    </div>
  </div>
`});var Vs,z2,Kft,$V=v(()=>{i2();bo();r2();At();oe();Xft();He();Vs=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},z2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Kft=(()=>{let t=[Q("dees-appui-secondarymenu")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[];var E=class extends r{static{i=this}static{let T=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:Array})],l=[D({type:Array})],y=[D({type:Object})],x=[J()],N=[J()],I=[J()],V=[D({type:Boolean,reflect:!0})],Vs(this,null,n,{kind:"accessor",name:"heading",static:!1,private:!1,access:{has:$=>"heading"in $,get:$=>$.heading,set:($,H)=>{$.heading=H}},metadata:T},s,o),Vs(this,null,u,{kind:"accessor",name:"groups",static:!1,private:!1,access:{has:$=>"groups"in $,get:$=>$.groups,set:($,H)=>{$.groups=H}},metadata:T},c,d),Vs(this,null,l,{kind:"accessor",name:"selectionOptions",static:!1,private:!1,access:{has:$=>"selectionOptions"in $,get:$=>$.selectionOptions,set:($,H)=>{$.selectionOptions=H}},metadata:T},f,b),Vs(this,null,y,{kind:"accessor",name:"selectedItem",static:!1,private:!1,access:{has:$=>"selectedItem"in $,get:$=>$.selectedItem,set:($,H)=>{$.selectedItem=H}},metadata:T},g,h),Vs(this,null,x,{kind:"accessor",name:"collapsedGroups",static:!1,private:!1,access:{has:$=>"collapsedGroups"in $,get:$=>$.collapsedGroups,set:($,H)=>{$.collapsedGroups=H}},metadata:T},M,S),Vs(this,null,N,{kind:"accessor",name:"collapsedMultiFilters",static:!1,private:!1,access:{has:$=>"collapsedMultiFilters"in $,get:$=>$.collapsedMultiFilters,set:($,H)=>{$.collapsedMultiFilters=H}},metadata:T},_,k),Vs(this,null,I,{kind:"accessor",name:"renderCounter",static:!1,private:!1,access:{has:$=>"renderCounter"in $,get:$=>$.renderCounter,set:($,H)=>{$.renderCounter=H}},metadata:T},L,A),Vs(this,null,V,{kind:"accessor",name:"collapsed",static:!1,private:!1,access:{has:$=>"collapsed"in $,get:$=>$.collapsed,set:($,H)=>{$.collapsed=H}},metadata:T},C,z),Vs(null,e={value:i},t,{kind:"class",name:i.name,metadata:T},null,a),E=i=e.value,T&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:T})}static demo=Zft;static demoGroups=["App UI"];#e=z2(this,s,"Menu");get heading(){return this.#e}set heading(T){this.#e=T}#t=(z2(this,o),z2(this,c,[]));get groups(){return this.#t}set groups(T){this.#t=T}#a=(z2(this,d),z2(this,f,[]));get selectionOptions(){return this.#a}set selectionOptions(T){this.#a=T}#i=(z2(this,b),z2(this,g,null));get selectedItem(){return this.#i}set selectedItem(T){this.#i=T}#r=(z2(this,h),z2(this,M,new Set));get collapsedGroups(){return this.#r}set collapsedGroups(T){this.#r=T}#s=(z2(this,S),z2(this,_,new Set));get collapsedMultiFilters(){return this.#s}set collapsedMultiFilters(T){this.#s=T}#n=(z2(this,k),z2(this,L,0));get renderCounter(){return this.#n}set renderCounter(T){this.#n=T}#o=(z2(this,A),z2(this,C,!1));get collapsed(){return this.#o}set collapsed(T){this.#o=T}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        --sidebar-width-expanded: 240px;
        --sidebar-width-collapsed: 56px;
        --sidebar-bg: ${p.bdTheme("#fafafa","#0a0a0a")};
        --sidebar-fg: ${p.bdTheme("#525252","#a3a3a3")};
        --sidebar-fg-muted: ${p.bdTheme("#737373","#737373")};
        --sidebar-fg-active: ${p.bdTheme("#0a0a0a","#fafafa")};
        --sidebar-border: ${p.bdTheme("#e5e5e5","#1a1a1a")};
        --sidebar-hover: ${p.bdTheme("rgba(0, 0, 0, 0.04)","rgba(255, 255, 255, 0.06)")};
        --sidebar-active: ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.08)")};
        --sidebar-accent: ${p.bdTheme("#0a0a0a","#fafafa")};
        --tooltip-bg: ${p.bdTheme("#18181b","#fafafa")};
        --tooltip-fg: ${p.bdTheme("#fafafa","#18181b")};

        /* Badge colors */
        --badge-default-bg: ${p.bdTheme("#f4f4f5","#27272a")};
        --badge-default-fg: ${p.bdTheme("#3f3f46","#a1a1aa")};
        --badge-success-bg: ${p.bdTheme("#dcfce7","#14532d")};
        --badge-success-fg: ${p.bdTheme("#166534","#4ade80")};
        --badge-warning-bg: ${p.bdTheme("#fef3c7","#451a03")};
        --badge-warning-fg: ${p.bdTheme("#92400e","#fbbf24")};
        --badge-error-bg: ${p.bdTheme("#fee2e2","#450a0a")};
        --badge-error-fg: ${p.bdTheme("#991b1b","#f87171")};

        /* Action colors */
        --action-primary: ${p.bdTheme("#2563eb","#3b82f6")};
        --action-primary-hover: ${p.bdTheme("#1d4ed8","#60a5fa")};
        --action-danger: ${p.bdTheme("#dc2626","#ef4444")};
        --action-danger-hover: ${p.bdTheme("#b91c1c","#f87171")};

        position: relative;
        display: block;
        height: 100%;
        width: var(--sidebar-width-expanded);
        background: var(--sidebar-bg);
        border-right: 1px solid var(--sidebar-border);
        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        user-select: none;
        transition: width 0.25s ease;
      }

      :host([collapsed]) {
        width: var(--sidebar-width-collapsed);
      }

      .maincontainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
      }

      /* Floating collapse toggle button */
      .collapse-toggle {
        position: absolute;
        right: -12px;
        top: 24px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: ${p.bdTheme("#ffffff","#27272a")};
        border: 1px solid ${p.bdTheme("#e5e5e5","#3f3f46")};
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#737373","#a1a1aa")};
        opacity: 0;
        transition: opacity 0.2s ease, background 0.15s ease;
        padding: 0;
      }

      .collapse-toggle:hover {
        background: ${p.bdTheme("#f4f4f5","#3f3f46")};
        color: ${p.bdTheme("#0a0a0a","#fafafa")};
      }

      :host(:hover) .collapse-toggle {
        opacity: 1;
      }

      .collapse-toggle dees-icon {
        font-size: 14px;
      }

      /* Header Section */
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        padding: 0 16px;
        border-bottom: 1px solid var(--sidebar-border);
        flex-shrink: 0;
        box-sizing: border-box;
      }

      .header .heading {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--sidebar-fg-active);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.2s ease, width 0.25s ease;
      }

      :host([collapsed]) .header {
        justify-content: center;
        padding: 0 8px;
      }

      :host([collapsed]) .header .heading {
        opacity: 0;
        width: 0;
        overflow: hidden;
      }

      /* Scrollable Menu Section */
      .menuSection {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 8px 0;
      }

      .menuSection::-webkit-scrollbar {
        width: 6px;
      }

      .menuSection::-webkit-scrollbar-track {
        background: transparent;
      }

      .menuSection::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.15)","rgba(255, 255, 255, 0.15)")};
        border-radius: 3px;
      }

      .menuSection::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.25)","rgba(255, 255, 255, 0.25)")};
      }

      /* Menu Group */
      .menuGroup {
        padding: 0 8px;
        margin-bottom: 4px;
      }

      :host([collapsed]) .menuGroup {
        padding: 0 4px;
      }

      .groupHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
        max-height: 40px;
      }

      .groupHeader:hover {
        border: 1px solid ${p.bdTheme("rgba(140, 120, 100, 0.06)","rgba(180, 160, 140, 0.08)")};
        padding: 7px 11px;
      }

      .groupHeader:not(.collapsed) {
        background: ${p.bdTheme("rgba(140, 120, 100, 0.06)","rgba(180, 160, 140, 0.08)")};
        border: none;
        padding: 8px 12px;
      }

      .groupHeader .groupTitle {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        color: ${p.bdTheme("#78716c","#b5a99a")};
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
      }

      .groupHeader .groupTitle dees-icon {
        font-size: 16px;
        color: ${p.bdTheme("#78716c","#b5a99a")};
      }

      .groupHeader .chevron {
        font-size: 12px;
        transition: transform 0.2s ease;
        color: ${p.bdTheme("#78716c","#b5a99a")};
      }

      .groupHeader.collapsed .chevron {
        transform: rotate(-90deg);
      }

      /* Hide group headers when horizontally collapsed */
      :host([collapsed]) .groupHeader {
        opacity: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
        pointer-events: none;
      }

      /* Group Items Container */
      .groupItems {
        overflow: hidden;
        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
        max-height: 1000px;
        opacity: 1;
        margin-bottom: 12px;
      }

      .groupItems.collapsed {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
      }

      /* Always show items when horizontally collapsed (regardless of group collapse state) */
      :host([collapsed]) .groupItems {
        max-height: none;
        opacity: 1;
      }

      /* Menu Item Base */
      .menuItem {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        margin: 2px 0;
        font-size: 13px;
        font-weight: 450;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        color: var(--sidebar-fg);
      }

      .menuItem:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-fg-active);
      }

      .menuItem:active {
        background: var(--sidebar-active);
      }

      .menuItem.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }

      .menuItem.selected {
        background: var(--sidebar-active);
        color: var(--sidebar-fg-active);
        font-weight: 500;
      }

      .menuItem.selected::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: var(--sidebar-accent);
        border-radius: 0 2px 2px 0;
      }

      .menuItem dees-icon {
        font-size: 16px;
        opacity: 0.7;
        flex-shrink: 0;
      }

      .menuItem.selected dees-icon {
        opacity: 1;
      }

      .menuItem .itemLabel {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.2s ease, width 0.25s ease;
      }

      /* Action Item Styles */
      .menuItem.action-primary {
        color: var(--action-primary);
      }

      .menuItem.action-primary:hover {
        color: var(--action-primary-hover);
        background: ${p.bdTheme("rgba(37, 99, 235, 0.08)","rgba(59, 130, 246, 0.12)")};
      }

      .menuItem.action-primary dees-icon {
        opacity: 1;
      }

      .menuItem.action-danger {
        color: var(--action-danger);
      }

      .menuItem.action-danger:hover {
        color: var(--action-danger-hover);
        background: ${p.bdTheme("rgba(220, 38, 38, 0.08)","rgba(239, 68, 68, 0.12)")};
      }

      .menuItem.action-danger dees-icon {
        opacity: 1;
      }

      /* Filter Item Styles */
      .menuItem.filter {
        justify-content: space-between;
      }

      .menuItem.filter .filter-checkbox {
        width: 16px;
        height: 16px;
        border: 2px solid ${p.bdTheme("#d4d4d4","#525252")};
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        flex-shrink: 0;
      }

      .menuItem.filter .filter-checkbox.checked {
        background: var(--sidebar-accent);
        border-color: var(--sidebar-accent);
      }

      .menuItem.filter .filter-checkbox dees-icon {
        font-size: 12px;
        color: ${p.bdTheme("#fafafa","#0a0a0a")};
        opacity: 1;
      }

      .menuItem.filter.active {
        color: var(--sidebar-fg-active);
      }

      /* Multi-Filter Container */
      .multiFilter {
        margin: 4px 0;
        border: 1px solid var(--sidebar-border);
        border-radius: 8px;
        overflow: hidden;
        background: ${p.bdTheme("rgba(0, 0, 0, 0.02)","rgba(255, 255, 255, 0.02)")};
      }

      .multiFilter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .multiFilter-header:hover {
        background: var(--sidebar-hover);
      }

      .multiFilter-header .multiFilter-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--sidebar-fg-active);
      }

      .multiFilter-header .multiFilter-title dees-icon {
        font-size: 16px;
        opacity: 0.7;
      }

      .multiFilter-header .multiFilter-count {
        font-size: 11px;
        color: var(--sidebar-fg-muted);
        background: var(--badge-default-bg);
        padding: 2px 6px;
        border-radius: 4px;
      }

      .multiFilter-header .chevron {
        font-size: 12px;
        transition: transform 0.2s ease;
        color: var(--sidebar-fg-muted);
      }

      .multiFilter-header.collapsed .chevron {
        transform: rotate(-90deg);
      }

      .multiFilter-options {
        border-top: 1px solid var(--sidebar-border);
        overflow: hidden;
        transition: max-height 0.25s ease, opacity 0.2s ease;
        max-height: 500px;
        opacity: 1;
      }

      .multiFilter-options.collapsed {
        max-height: 0;
        opacity: 0;
        border-top: none;
      }

      .multiFilter-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        cursor: pointer;
        transition: background 0.15s ease;
        font-size: 13px;
        color: var(--sidebar-fg);
      }

      .multiFilter-option:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-fg-active);
      }

      .multiFilter-option .option-checkbox {
        width: 16px;
        height: 16px;
        border: 2px solid ${p.bdTheme("#d4d4d4","#525252")};
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        flex-shrink: 0;
      }

      .multiFilter-option .option-checkbox.checked {
        background: var(--sidebar-accent);
        border-color: var(--sidebar-accent);
      }

      .multiFilter-option .option-checkbox dees-icon {
        font-size: 12px;
        color: ${p.bdTheme("#fafafa","#0a0a0a")};
      }

      .multiFilter-option dees-icon.option-icon {
        font-size: 14px;
        opacity: 0.7;
      }

      /* Divider */
      .menuDivider {
        height: 1px;
        background: var(--sidebar-border);
        margin: 8px 12px;
      }

      :host([collapsed]) .menuDivider {
        margin: 8px 4px;
      }

      /* Header/Label */
      .menuHeader {
        padding: 12px 12px 4px 12px;
        font-size: 10px;
        font-weight: 600;
        color: var(--sidebar-fg-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      :host([collapsed]) .menuHeader {
        display: none;
      }

      /* Link Item */
      .menuItem.link .external-icon {
        font-size: 12px;
        opacity: 0.5;
        margin-left: auto;
      }

      /* Collapsed menu item styles */
      :host([collapsed]) .menuItem {
        justify-content: center;
        padding: 8px;
        gap: 0;
      }

      :host([collapsed]) .menuItem .itemLabel {
        opacity: 0;
        width: 0;
        position: absolute;
      }

      :host([collapsed]) .menuItem.selected::before {
        left: -4px;
      }

      :host([collapsed]) .menuItem .filter-checkbox,
      :host([collapsed]) .menuItem .external-icon {
        display: none;
      }

      :host([collapsed]) .multiFilter {
        display: none;
      }

      /* Tooltip for collapsed state */
      .item-tooltip {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 12px;
        padding: 6px 12px;
        background: var(--tooltip-bg);
        color: var(--tooltip-fg);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      .item-tooltip::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        border: 4px solid transparent;
        border-right-color: var(--tooltip-bg);
      }

      :host([collapsed]) .menuItem:hover .item-tooltip {
        opacity: 1;
        transition-delay: 1s;
      }

      /* Badge Styles */
      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 9px;
        flex-shrink: 0;
      }

      .badge.default {
        background: var(--badge-default-bg);
        color: var(--badge-default-fg);
      }

      .badge.success {
        background: var(--badge-success-bg);
        color: var(--badge-success-fg);
      }

      .badge.warning {
        background: var(--badge-warning-bg);
        color: var(--badge-warning-fg);
      }

      .badge.error {
        background: var(--badge-error-bg);
        color: var(--badge-error-fg);
      }

      :host([collapsed]) .badge {
        display: none;
      }

      /* Legacy options container */
      .legacyOptions {
        padding: 0 8px;
      }

      /* Divider (legacy) */
      .divider {
        height: 1px;
        background: var(--sidebar-border);
        margin: 8px 12px;
      }
    `];render(){return w`
      <div class="maincontainer">
        <div class="header">
          <span class="heading">${this.heading}</span>
        </div>
        <div class="menuSection">
          ${this.groups.length>0?this.renderGroups():this.renderLegacyOptions()}
        </div>
      </div>
      <button class="collapse-toggle" @click="${()=>this.toggleCollapse()}">
        <dees-icon .icon="${this.collapsed?"lucide:chevronRight":"lucide:chevronLeft"}"></dees-icon>
      </button>
    `}renderGroups(){return w`
      ${this.groups.map(T=>w`
        <div class="menuGroup">
          <div
            class="groupHeader ${this.collapsedGroups.has(T.name)?"collapsed":""}"
            @click="${()=>this.toggleGroup(T.name)}"
          >
            <span class="groupTitle">
              ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
              ${T.name}
            </span>
            <dees-icon class="chevron" .icon="${"lucide:chevronDown"}"></dees-icon>
          </div>
          <div class="groupItems ${this.collapsedGroups.has(T.name)?"collapsed":""}">
            ${T.items.map($=>this.renderItem($,T))}
          </div>
        </div>
      `)}
    `}renderItem(T,$){if("hidden"in T&&T.hidden)return w``;switch("type"in T?T.type:"tab"){case"action":return this.renderActionItem(T);case"filter":return this.renderFilterItem(T);case"multiFilter":return this.renderMultiFilterItem(T);case"divider":return this.renderDivider();case"header":return this.renderHeader(T);case"link":return this.renderLinkItem(T);default:return this.renderTabItem(T,$)}}renderTabItem(T,$){let H=this.selectedItem?.key===T.key,O=T.disabled===!0;return w`
      <div
        class="menuItem ${H?"selected":""} ${O?"disabled":""}"
        @click="${()=>!O&&this.selectTabItem(T,$)}"
        @contextmenu="${G=>this.handleContextMenu(G,T)}"
      >
        ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
        <span class="itemLabel">${T.key}</span>
        ${T.badge!==void 0?w`
          <span class="badge ${T.badgeVariant||"default"}">${T.badge}</span>
        `:""}
        <span class="item-tooltip">${T.key}</span>
      </div>
    `}renderActionItem(T){let $=T.variant||"primary",H=T.disabled===!0;return w`
      <div
        class="menuItem action-${$} ${H?"disabled":""}"
        @click="${()=>!H&&this.handleActionClick(T)}"
      >
        ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
        <span class="itemLabel">${T.key}</span>
        <span class="item-tooltip">${T.key}</span>
      </div>
    `}renderFilterItem(T){let $=T.disabled===!0;return w`
      <div
        class="menuItem filter ${T.active?"active":""} ${$?"disabled":""}"
        @click="${()=>!$&&this.handleFilterToggle(T)}"
      >
        ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
        <span class="itemLabel">${T.key}</span>
        <div class="filter-checkbox ${T.active?"checked":""}">
          ${T.active?w`<dees-icon .icon="${"lucide:check"}"></dees-icon>`:""}
        </div>
        <span class="item-tooltip">${T.key}</span>
      </div>
    `}renderMultiFilterItem(T){let $=this.collapsedMultiFilters.has(T.key),H=T.options.filter(O=>O.checked).length;return w`
      <div class="multiFilter">
        <div
          class="multiFilter-header ${$?"collapsed":""}"
          @click="${()=>this.toggleMultiFilter(T.key)}"
        >
          <span class="multiFilter-title">
            ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
            ${T.key}
          </span>
          ${H>0?w`<span class="multiFilter-count">${H}</span>`:""}
          <dees-icon class="chevron" .icon="${"lucide:chevronDown"}"></dees-icon>
        </div>
        <div class="multiFilter-options ${$?"collapsed":""}">
          ${T.options.map(O=>w`
            <div
              class="multiFilter-option"
              @click="${()=>this.handleMultiFilterOptionToggle(T,O.key)}"
            >
              <div class="option-checkbox ${O.checked?"checked":""}">
                ${O.checked?w`<dees-icon .icon="${"lucide:check"}"></dees-icon>`:""}
              </div>
              ${O.iconName?w`<dees-icon class="option-icon" .icon="${this.normalizeIcon(O.iconName)}"></dees-icon>`:""}
              <span>${O.label}</span>
            </div>
          `)}
        </div>
      </div>
    `}renderDivider(){return w`<div class="menuDivider"></div>`}renderHeader(T){return w`<div class="menuHeader">${T.label}</div>`}renderLinkItem(T){let $=T.external??T.href.startsWith("http"),H=T.disabled===!0;return w`
      <div
        class="menuItem link ${H?"disabled":""}"
        @click="${()=>!H&&this.handleLinkClick(T)}"
      >
        ${T.iconName?w`<dees-icon .icon="${this.normalizeIcon(T.iconName)}"></dees-icon>`:""}
        <span class="itemLabel">${T.key}</span>
        ${$?w`<dees-icon class="external-icon" .icon="${"lucide:externalLink"}"></dees-icon>`:""}
        <span class="item-tooltip">${T.key}</span>
      </div>
    `}renderLegacyOptions(){return w`
      <div class="legacyOptions">
        ${this.selectionOptions.map(T=>{if("divider"in T&&T.divider)return w`<div class="divider"></div>`;let $=T,H={key:$.key,iconName:$.iconName,action:$.action,badge:$.badge,badgeVariant:$.badgeVariant};return this.renderTabItem(H)})}
      </div>
    `}normalizeIcon(T){return T.startsWith("lucide:")?T:`lucide:${T}`}toggleGroup(T){let $=new Set(this.collapsedGroups);$.has(T)?$.delete(T):$.add(T),this.collapsedGroups=$}toggleMultiFilter(T){let $=new Set(this.collapsedMultiFilters);$.has(T)?$.delete(T):$.add(T),this.collapsedMultiFilters=$}toggleCollapse(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0}))}selectTabItem(T,$){this.selectedItem=T,T.action(),this.dispatchEvent(new CustomEvent("item-select",{detail:{item:T,group:$},bubbles:!0,composed:!0}))}async handleActionClick(T){T.confirmMessage&&!window.confirm(T.confirmMessage)||(await T.action(),this.dispatchEvent(new CustomEvent("action-click",{detail:{item:T},bubbles:!0,composed:!0})))}handleFilterToggle(T){let $=!T.active;T.active=$,T.onToggle($),this.renderCounter++,this.dispatchEvent(new CustomEvent("filter-toggle",{detail:{item:T,active:$},bubbles:!0,composed:!0}))}handleMultiFilterOptionToggle(T,$){let H=T.options.find(G=>G.key===$);H&&(H.checked=!H.checked);let O=T.options.filter(G=>G.checked).map(G=>G.key);T.onChange(O),this.renderCounter++,this.dispatchEvent(new CustomEvent("multifilter-change",{detail:{item:T,selectedKeys:O},bubbles:!0,composed:!0}))}handleLinkClick(T){T.external??T.href.startsWith("http")?window.open(T.href,"_blank","noopener,noreferrer"):window.location.href=T.href,this.dispatchEvent(new CustomEvent("link-click",{detail:{item:T},bubbles:!0,composed:!0}))}handleContextMenu(T,$){jt.openContextMenuWithOptions(T,[{name:"View details",action:async()=>{},iconName:"lucide:eye"},{name:"Edit",action:async()=>{},iconName:"lucide:pencil"}])}async firstUpdated(T){if(await super.firstUpdated(T),this.groups.length>0){let $=new Set,H=new Set;if(this.groups.forEach(O=>{O.collapsed&&$.add(O.name),O.items.forEach(G=>{if("type"in G&&G.type==="multiFilter"){let ne=G;ne.collapsed&&H.add(ne.key)}})}),this.collapsedGroups=$,this.collapsedMultiFilters=H,!this.selectedItem)for(let O of this.groups)for(let G of O.items){let ne="type"in G?G.type:"tab";if(ne==="tab"||ne===void 0){let U=G;if(!U.disabled){this.selectTabItem(U,O);return}}}}else if(this.selectionOptions.length>0){let $=this.selectionOptions.find(H=>!("divider"in H));if($&&!this.selectedItem){let H={key:$.key,iconName:$.iconName,action:$.action};this.selectTabItem(H)}}}constructor(){super(...arguments),z2(this,z)}static{z2(i,a)}};return E=i})()});var hl,Mi,ui2,hi2,Qft,Jft=v(()=>{oe();bo();hl=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Mi=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ui2=(()=>{let t=[Q("demo-closeable-tabs")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],hl(this,null,n,{kind:"accessor",name:"tabs",static:!1,private:!1,access:{has:b=>"tabs"in b,get:b=>b.tabs,set:(b,y)=>{b.tabs=y}},metadata:f},s,o),hl(this,null,u,{kind:"accessor",name:"tabCounter",static:!1,private:!1,access:{has:b=>"tabCounter"in b,get:b=>b.tabCounter,set:(b,y)=>{b.tabCounter=y}},metadata:f},c,d),hl(null,e={value:i},t,{kind:"class",name:i.name,met
      :host {
        display: block;
      }
      .controls {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }
      button {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(59, 130, 246, 0.1)")};
        border: 1px solid ${p.bdTheme("rgba(59, 130, 246, 0.3)","rgba(59, 130, 246, 0.3)")};
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.15s ease;
      }
      button:hover {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.2)","rgba(59, 130, 246, 0.2)")};
      }
      .info {
        margin-top: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("rgba(0,0,0,0.02)","rgba(255,255,255,0.02)")};
        border-radius: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];addTab(){this.tabCounter++;let f=`Document ${this.tabCounter}`;this.tabs=[...this.tabs,{key:f,iconName:"lucide:file",action:()=>console.log(`${f} clicked`),closeable:!0,onClose:()=>this.removeTab(f)}]}removeTab(f){this.tabs=this.tabs.filter(b=>b.key!==f)}render(){return w`
      <dees-appui-tabs
        .tabs=${this.tabs}
        @tab-close=${f=>this.removeTab(f.detail.tab.key)}
      ></dees-appui-tabs>
      <div class="controls">
        <button @click=${()=>this.addTab()}>+ Add New Tab</button>
      </div>
      <div class="info">
        Click the X button on tabs to close them. The "Main" tab is not closeable.
        <br>Current tabs: ${this.tabs.length}
      </div>
    `}constructor(){super(...arguments),Mi(this,d)}static{Mi(i,a)}};return l=i})(),hi2=(()=>{let t=[Q("demo-autohide-tabs")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],hl(this,null,n,{kind:"accessor",name:"tabs",static:!1,private:!1,access:{has:h=>"tabs"in h,get:h=>h.tabs,set:(h,x)=>{h.tabs=x}},metadata:g},s,o),hl(this,null,u,{kind:"accessor",name:"autoHide",static:!1,private:!1,access:{has:h=>"autoHide"in h,get:h=>h.autoHide,set:(h,x)=>{h.autoHide=x}},metadata:g},c,d),hl(this,null,l,{kind:"accessor",name:"threshold",static:!1,private:!1,access:{has:h=>"threshold"in h,get:h=>h.threshold,set:(h,x)=>{h.threshold=x}},metadata:g},f,b),hl(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}#e=Mi(this,s,[{key:"Tab 1",iconName:"lucide:file",action:()=>console.log("Tab 1")},{key:"Tab 2",iconName:"lucide:file",action:()=>console.log("Tab 2")}]);get tabs(){return this.#e}set tabs(g){this.#e=g}#t=(Mi(this,o),Mi(this,c,!0));get autoHide(){return this.#t}set autoHide(g){this.#t=g}#a=(Mi(this,d),Mi(this,f,1));get threshold(){return this.#a}set threshold(g){this.#a=g}static styles=[X`
      :host {
        display: block;
      }
      .tabs-container {
        min-height: 60px;
        border: 1px dashed ${p.bdTheme("#e5e7eb","#27272a")};
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tabs-container dees-appui-tabs {
        width: 100%;
      }
      .placeholder {
        color: ${p.bdTheme("#a1a1aa","#71717a")};
        font-size: 13px;
        font-style: italic;
      }
      .controls {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
      }
      button {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(59, 130, 246, 0.1)")};
        border: 1px solid ${p.bdTheme("rgba(59, 130, 246, 0.3)","rgba(59, 130, 246, 0.3)")};
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.15s ease;
      }
      button:hover {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.2)","rgba(59, 130, 246, 0.2)")};
      }
      button.danger {
        background: ${p.bdTheme("rgba(239, 68, 68, 0.1)","rgba(239, 68, 68, 0.1)")};
        border-color: ${p.bdTheme("rgba(239, 68, 68, 0.3)","rgba(239, 68, 68, 0.3)")};
        color: ${p.bdTheme("#ef4444","#f87171")};
      }
      button.danger:hover {
        background: ${p.bdTheme("rgba(239, 68, 68, 0.2)","rgba(239, 68, 68, 0.2)")};
      }
      .info {
        margin-top: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("rgba(0,0,0,0.02)","rgba(255,255,255,0.02)")};
        border-radius: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];tabCounter=(Mi(this,b),2);addTab(){this.tabCounter++,this.tabs=[...this.tabs,{key:`Tab ${this.tabCounter}`,iconName:"lucide:file",action:()=>console.log(`Tab ${this.tabCounter}`)}]}removeLastTab(){this.tabs.length>0&&(this.tabs=this.tabs.slice(0,-1))}clearTabs(){this.tabs=[]}render(){let g=this.autoHide&&this.tabs.length<=this.threshold;return w`
      <div class="tabs-container">
        ${g?w`<span class="placeholder">Tabs hidden (${this.tabs.length} tabs ≤ threshold ${this.threshold})</span>`:w`<dees-appui-tabs
              .tabs=${this.tabs}
              .autoHide=${this.autoHide}
              .autoHideThreshold=${this.threshold}
            ></dees-appui-tabs>`}
      </div>
      <div class="controls">
        <button @click=${()=>this.addTab()}>+ Add Tab</button>
        <button class="danger" @click=${()=>this.removeLastTab()}>- Remove Tab</button>
        <button class="danger" @click=${()=>this.clearTabs()}>Clear All</button>
        <button @click=${()=>{this.threshold=0}}>Threshold: 0</button>
        <button @click=${()=>{this.threshold=1}}>Threshold: 1</button>
        <button @click=${()=>{this.threshold=2}}>Threshold: 2</button>
      </div>
      <div class="info">
        Auto-hide: ${this.autoHide?"ON":"OFF"} | Threshold: ${this.threshold} | Tabs: ${this.tabs.length}
        <br>Tabs will hide when count ≤ threshold.
      </div>
    `}static{Mi(i,a)}};return y=i})(),Qft=()=>{let t=[{key:"Home",iconName:"lucide:home",action:()=>console.log("Home clicked")},{key:"Analytics Dashboard",iconName:"lucide:lineChart",action:()=>console.log("Analytics clicked")},{key:"Reports",iconName:"lucide:fileText",action:()=>console.log("Reports clicked")},{key:"User Settings",iconName:"lucide:settings",action:()=>console.log("Settings clicked")},{key:"Help",iconName:"lucide:helpCircle",action:()=>console.log("Help clicked")}],e=[{key:"Profile",iconName:"lucide:user",action:()=>console.log("Profile clicked")},{key:"Security",iconName:"lucide:shield",action:()=>console.log("Security clicked")},{key:"Notifications",iconName:"lucide:bell",action:()=>console.log("Notifications clicked")},{key:"Integrations",iconName:"lucide:link",action:()=>console.log("Integrations clicked")},{key:"Advanced",iconName:"lucide:code",action:()=>console.log("Advanced clicked")}],a=[{key:"All",action:()=>console.log("All clicked")},{key:"Active",action:()=>console.log("Active clicked")},{key:"Completed",action:()=>console.log("Completed clicked")},{key:"Archived",action:()=>console.log("Archived clicked")}],i=r=>w`
    <div style="padding: 24px; color: ${p.bdTheme("#71717a","#a1a1aa")};">
      ${r}
    </div>
  `;return w`
    <style>
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 48px;
        background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
        min-height: 100vh;
      }

      .section {
        background: ${p.bdTheme("#ffffff","#18181b")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .two-column {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 24px;
        align-items: start;
      }
    </style>
    <div class="demo-container">
      <div class="section">
        <div class="section-title">Horizontal Tabs with Animated Indicator</div>
        <dees-appui-tabs .tabs=${t}></dees-appui-tabs>
        ${i("Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.")}
      </div>

      <div class="section">
        <div class="section-title">Closeable Tabs (Browser-style)</div>
        <demo-closeable-tabs></demo-closeable-tabs>
      </div>

      <div class="section">
        <div class="section-title">Auto-hide Tabs</div>
        <demo-autohide-tabs></demo-autohide-tabs>
      </div>

      <div class="section">
        <div class="section-title">Vertical Tabs Layout</div>
        <div class="two-column">
          <dees-appui-tabs .tabStyle=${"vertical"} .tabs=${e}></dees-appui-tabs>
          ${i("Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.")}
        </div>
      </div>

      <div class="section">
        <div class="section-title">Without Indicator</div>
        <dees-appui-tabs .showTabIndicator=${!1} .tabs=${a}></dees-appui-tabs>
        ${i("Tabs can also be used without the animated indicator by setting showTabIndicator to false.")}
      </div>
    </div>
  `}});var js,S2,emt,DV=v(()=>{bo();oe();_t();Jft();He();js=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},S2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},emt=(()=>{let t=[Q("dees-appui-tabs")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[];var E=class extends r{static{i=this}static{let T=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Object})],l=[D({type:Boolean})],y=[D({type:String})],x=[D({type:Boolean})],N=[D({type:Number})],I=[J()],V=[J()],js(this,null,n,{kind:"accessor",name:"tabs",static:!1,private:!1,access:{has:$=>"tabs"in $,get:$=>$.tabs,set:($,H)=>{$.tabs=H}},metadata:T},s,o),js(this,null,u,{kind:"accessor",name:"selectedTab",static:!1,private:!1,access:{has:$=>"selectedTab"in $,get:$=>$.selectedTab,set:($,H)=>{$.selectedTab=H}},metadata:T},c,d),js(this,null,l,{kind:"accessor",name:"showTabIndicator",static:!1,private:!1,access:{has:$=>"showTabIndicator"in $,get:$=>$.showTabIndicator,set:($,H)=>{$.showTabIndicator=H}},metadata:T},f,b),js(this,null,y,{kind:"accessor",name:"tabStyle",static:!1,private:!1,access:{has:$=>"tabStyle"in $,get:$=>$.tabStyle,set:($,H)=>{$.tabStyle=H}},metadata:T},g,h),js(this,null,x,{kind:"accessor",name:"autoHide",static:!1,private:!1,access:{has:$=>"autoHide"in $,get:$=>$.autoHide,set:($,H)=>{$.autoHide=H}},metadata:T},M,S),js(this,null,N,{kind:"accessor",name:"autoHideThreshold",static:!1,private:!1,access:{has:$=>"autoHideThreshold"in $,get:$=>$.autoHideThreshold,set:($,H)=>{$.autoHideThreshold=H}},metadata:T},_,k),js(this,null,I,{kind:"accessor",name:"canScrollLeft",static:!1,private:!1,access:{has:$=>"canScrollLeft"in $,get:$=>$.canScrollLeft,set:($,H)=>{$.canScrollLeft=H}},metadata:T},L,A),js(this,null,V,{kind:"accessor",name:"canScrollRight",static:!1,private:!1,access:{has:$=>"canScrollRight"in $,get:$=>$.canScrollRight,set:($,H)=>{$.canScrollRight=H}},metadata:T},C,z),js(null,e={value:i},t,{kind:"class",name:i.name,metadata:T},null,a),E=i=e.value,T&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:T})}static demo=Qft;static demoGroups=["App UI"];#e=S2(this,s,[]);get tabs(){return this.#e}set tabs(T){this.#e=T}#t=(S2(this,o),S2(this,c,null));get selectedTab(){return this.#t}set selectedTab(T){this.#t=T}#a=(S2(this,d),S2(this,f,!0));get showTabIndicator(){return this.#a}set showTabIndicator(T){this.#a=T}#i=(S2(this,b),S2(this,g,"horizontal"));get tabStyle(){return this.#i}set tabStyle(T){this.#i=T}#r=(S2(this,h),S2(this,M,!1));get autoHide(){return this.#r}set autoHide(T){this.#r=T}#s=(S2(this,S),S2(this,_,0));get autoHideThreshold(){return this.#s}set autoHideThreshold(T){this.#s=T}#n=(S2(this,k),S2(this,L,!1));get canScrollLeft(){return this.#n}set canScrollLeft(T){this.#n=T}#o=(S2(this,A),S2(this,C,!1));get canScrollRight(){return this.#o}set canScrollRight(T){this.#o=T}resizeObserver=(S2(this,z),null);static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        position: relative;
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      .tabs-wrapper {
        position: relative;
        min-width: 0;
      }

      .tabs-wrapper.horizontal-wrapper {
        height: 48px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        box-sizing: border-box;
        overflow: hidden;
      }

      /* Scroll fade indicators */
      .scroll-fade {
        position: absolute;
        top: 0;
        bottom: 1px;
        width: 48px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 10;
      }

      .scroll-fade-left {
        left: 0;
        background: linear-gradient(to right,
          ${p.bdTheme("#ffffff","#161616")} 0%,
          ${p.bdTheme("rgba(255,255,255,0)","rgba(22,22,22,0)")} 100%);
      }

      .scroll-fade-right {
        right: 0;
        background: linear-gradient(to left,
          ${p.bdTheme("#ffffff","#161616")} 0%,
          ${p.bdTheme("rgba(255,255,255,0)","rgba(22,22,22,0)")} 100%);
      }

      .scroll-fade.visible {
        opacity: 1;
      }

      .tabsContainer {
        position: relative;
        user-select: none;
        min-width: 0;
      }

      .tabsContainer.horizontal {
        display: flex;
        align-items: center;
        font-size: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        height: 100%;
        padding: 0 16px;
        gap: 4px;
      }

      /* Show scrollbar on hover */
      .tabs-wrapper:hover .tabsContainer.horizontal {
        scrollbar-color: ${p.bdTheme("rgba(0,0,0,0.2)","rgba(255,255,255,0.2)")} transparent;
      }

      .tabsContainer.horizontal::-webkit-scrollbar {
        height: 4px;
      }

      .tabsContainer.horizontal::-webkit-scrollbar-track {
        background: transparent;
      }

      .tabsContainer.horizontal::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 2px;
        transition: background 0.2s ease;
      }

      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("rgba(0,0,0,0.2)","rgba(255,255,255,0.2)")};
      }

      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("rgba(0,0,0,0.35)","rgba(255,255,255,0.35)")};
      }

      .tabsContainer.vertical {
        display: flex;
        flex-direction: column;
        padding: 8px;
        font-size: 14px;
        gap: 2px;
        position: relative;
        background: ${p.bdTheme("#f9fafb","#18181b")};
        border-radius: 8px;
      }

      .tab {
        color: ${p.bdTheme("#71717a","#71717a")};
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.15s ease;
        font-weight: 500;
        position: relative;
        z-index: 2;
      }

      .horizontal .tab {
        padding: 0 16px;
        height: 100%;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: relative;
        border-radius: 6px 6px 0 0;
        transition: background-color 0.15s ease;
      }
      
      .horizontal .tab:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 1px;
        background: ${p.bdTheme("#e5e7eb","#27272a")};
        opacity: 0.5;
      }
      
      .horizontal .tab .tab-content {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .vertical .tab {
        padding: 10px 16px;
        border-radius: 6px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.15s ease;
      }

      .tab:hover {
        color: ${p.bdTheme("#09090b","#fafafa")};
      }
      
      .horizontal .tab:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.03)","rgba(255, 255, 255, 0.03)")};
      }
      
      .horizontal .tab:hover::after,
      .horizontal .tab:hover + .tab::after {
        opacity: 0;
      }

      .vertical .tab:hover {
        background: ${p.bdTheme("rgba(244, 244, 245, 0.5)","rgba(39, 39, 42, 0.5)")};
      }

      .horizontal .tab.selectedTab {
        color: ${p.bdTheme("#09090b","#fafafa")};
      }
      
      .horizontal .tab.selectedTab::after,
      .horizontal .tab.selectedTab + .tab::after {
        opacity: 0;
      }

      .vertical .tab.selectedTab {
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .tab dees-icon {
        font-size: 16px;
      }

      .tabIndicator {
        position: absolute;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
      }
      
      .tabIndicator.no-transition {
        transition: none;
      }

      .tabs-wrapper .tabIndicator {
        height: 3px;
        bottom: 0;
        background: ${p.bdTheme("#3b82f6","#3b82f6")};
        border-radius: 3px 3px 0 0;
        z-index: 3;
      }

      .vertical-wrapper {
        position: relative;
      }

      .vertical-wrapper .tabIndicator {
        left: 8px;
        right: 8px;
        border-radius: 6px;
        background: ${p.bdTheme("#ffffff","#27272a")};
        z-index: 1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      /* Close button */
      .tab-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        margin-left: 8px;
        opacity: 0.4;
        transition: opacity 0.15s, background 0.15s;
        color: ${p.bdTheme("#71717a","#71717a")};
      }

      .tab:hover .tab-close {
        opacity: 0.7;
      }

      .tab-close:hover {
        opacity: 1;
        background: ${p.bdTheme("rgba(0,0,0,0.1)","rgba(255,255,255,0.1)")};
        color: ${p.bdTheme("#ef4444","#f87171")};
      }

      .tab.selectedTab .tab-close {
        opacity: 0.5;
      }

      .tab.selectedTab:hover .tab-close {
        opacity: 0.8;
      }

      .tab.selectedTab .tab-close:hover {
        opacity: 1;
      }
    `];render(){return this.autoHide&&this.tabs.length<=this.autoHideThreshold?w``:w`
      ${this.renderTabsWrapper()}
    `}renderTabsWrapper(){let T=this.tabStyle==="horizontal",$=T?"tabs-wrapper horizontal-wrapper":"vertical-wrapper",H=`tabsContainer ${this.tabStyle}`;return T?w`
        <div class="${$}">
          <div class="scroll-fade scroll-fade-left ${this.canScrollLeft?"visible":""}"></div>
          <div class="${H}" @scroll=${this.handleScroll}>
            ${this.tabs.map(O=>this.renderTab(O,T))}
          </div>
          <div class="scroll-fade scroll-fade-right ${this.canScrollRight?"visible":""}"></div>
          ${this.showTabIndicator?w`<div class="tabIndicator"></div>`:""}
        </div>
      `:w`
      <div class="${$}">
        <div class="${H}">
          ${this.tabs.map(O=>this.renderTab(O,T))}
        </div>
        ${this.showTabIndicator?w`<div class="tabIndicator"></div>`:""}
      </div>
    `}renderTab(T,$){let O=`tab ${T===this.selectedTab?"selectedTab":""}`,G=T.closeable?w`
      <span class="tab-close" @click="${U=>this.closeTab(U,T)}">
        <dees-icon .icon=${"lucide:x"} style="font-size: 12px;"></dees-icon>
      </span>
    `:"",ne=$?w`
      <span class="tab-content">
        ${this.renderTabIcon(T)}
        ${T.key}
      </span>
      ${G}
    `:w`
      ${this.renderTabIcon(T)}
      ${T.key}
      ${G}
    `;return w`
      <div
        class="${O}"
        @click="${()=>this.selectTab(T)}"
      >
        ${ne}
      </div>
    `}renderTabIcon(T){return T.iconName?w`<dees-icon .icon=${T.iconName}></dees-icon>`:""}selectTab(T){this.selectedTab=T,T.action(),requestAnimationFrame(()=>{this.scrollTabIntoView(T)}),this.dispatchEvent(new CustomEvent("tab-select",{detail:{tab:T},bubbles:!0,composed:!0}))}closeTab(T,$){T.stopPropagation(),$.onClose&&$.onClose(),this.dispatchEvent(new CustomEvent("tab-close",{detail:{tab:$},bubbles:!0,composed:!0}))}firstUpdated(){this.tabs&&this.tabs.length>0&&this.selectTab(this.tabs[0]),this.setupResizeObserver(),requestAnimationFrame(()=>{this.updateScrollState()})}async disconnectedCallback(){await super.disconnectedCallback(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}setupResizeObserver(){if(this.tabStyle!=="horizontal")return;this.resizeObserver=new ResizeObserver(()=>{this.updateScrollState()});let T=this.shadowRoot?.querySelector(".tabsContainer.horizontal");T&&this.resizeObserver.observe(T)}handleScroll=()=>{this.updateScrollState()};updateScrollState(){let T=this.shadowRoot?.querySelector(".tabsContainer.horizontal");if(!T)return;let $=T.scrollLeft,H=T.scrollWidth,O=T.clientWidth,G=2;this.canScrollLeft=$>G,this.canScrollRight=$<H-O-G}scrollTabIntoView(T){if(this.tabStyle!=="horizontal")return;let $=this.tabs.indexOf(T);if($===-1)return;let H=this.shadowRoot?.querySelector(".tabsContainer.horizontal"),O=H?.querySelector(`.tab:nth-child(${$+1})`);if(O&&H){let G=H.getBoundingClientRect(),ne=O.getBoundingClientRect();ne.left>=G.left&&ne.right<=G.right||O.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}async updated(T){super.updated(T),T.has("tabs")&&this.tabs&&this.tabs.length>0&&!this.selectedTab&&this.selectTab(this.tabs[0]),(T.has("selectedTab")||T.has("tabs"))&&(await this.updateComplete,!this.indicatorInitialized&&document.fonts&&await document.fonts.ready,requestAnimationFrame(()=>{this.updateTabIndicator(),this.updateScrollState()}))}indicatorInitialized=!1;updateTabIndicator(){if(!this.shouldShowIndicator())return;let T=this.getSelectedTabElement();if(!T)return;let $=this.getIndicatorElement();$&&(this.handleInitialTransition($),this.tabStyle==="horizontal"?this.updateHorizontalIndicator($,T):this.updateVerticalIndicator($,T),$.style.opacity="1")}shouldShowIndicator(){return this.selectedTab&&this.showTabIndicator&&this.tabs.includes(this.selectedTab)}getSelectedTabElement(){let T=this.tabs.indexOf(this.selectedTab),H=this.tabStyle==="horizontal"?`.tabs-wrapper .tabsContainer .tab:nth-child(${T+1})`:`.vertical-wrapper .tabsContainer .tab:nth-child(${T+1})`;return this.shadowRoot.querySelector(H)}getIndicatorElement(){return this.shadowRoot.querySelector(".tabIndicator")}handleInitialTransition(T){this.indicatorInitialized||(T.classList.add("no-transition"),this.indicatorInitialized=!0,setTimeout(()=>{T.classList.remove("no-transition")},50))}updateHorizontalIndicator(T,$){let H=$.querySelector(".tab-content");if(!H)return;let O=T.parentElement.getBoundingClientRect(),G=H.getBoundingClientRect(),ne=G.left-O.left,U=G.width+8,be=ne-4;T.style.width=`${U}px`,T.style.left=`${be}px`}updateVerticalIndicator(T,$){let H=this.shadowRoot.querySelector(".vertical-wrapper .tabsContainer");H&&(T.style.top=`${$.offsetTop+H.offsetTop}px`,T.style.height=`${$.clientHeight}px`)}static{S2(i,a)}};return E=i})()});var Z4,er,tmt,AV=v(()=>{bo();oe();_t();DV();He();Z4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=
    <dees-appui-maincontent
      .tabs=${[{key:"Overview",iconName:"lucide:home",action:()=>console.log("Overview")},{key:"Details",iconName:"lucide:file",action:()=>console.log("Details")},{key:"Settings",iconName:"lucide:settings",action:()=>console.log("Settings")}]}
    >
      <div slot="content" style="padding: 40px; color: #ccc;">
        <h1>Main Content Area</h1>
        <p>This is where your application content goes.</p>
      </div>
    </dees-appui-maincontent>
  `;static demoGroups=["App UI"];#e=er(this,s,[{key:"\u26A0\uFE0F Please set tabs",action:()=>console.warn("No tabs configured for maincontent")}]);get tabs(){return this.#e}set tabs(_){this.#e=_}#t=(er(this,o),er(this,c,null));get selectedTab(){return this.#t}set selectedTab(_){this.#t=_}#a=(er(this,d),er(this,f,!0));get showTabs(){return this.#a}set showTabs(_){this.#a=_}#i=(er(this,b),er(this,g,!1));get tabsAutoHide(){return this.#i}set tabsAutoHide(_){this.#i=_}#r=(er(this,h),er(this,M,0));get tabsAutoHideThreshold(){return this.#r}set tabsAutoHideThreshold(_){this.#r=_}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme("#333","#fff")};
        display: grid;
        grid-template-rows: auto 1fr;
        width: 100%;
        height: 100%;
        background: ${p.bdTheme("#ffffff","#161616")};
      }

      .maincontainer {
        display: contents;
      }

      .topbar {
        display: grid;
        grid-template-rows: 1fr;
        overflow: hidden;
        user-select: none;
        transition: grid-template-rows 0.3s ease;
      }

      .topbar > * {
        min-height: 0;
      }

      .content-area {
        overflow: auto;
        min-height: 0;
        overscroll-behavior: contain;
      }

      :host([notabs]) .topbar {
        grid-template-rows: 0fr;
      }
    `];render(){return w`
      <div class="maincontainer">
        <div class="topbar">
          <dees-appui-tabs
            .tabs=${this.tabs}
            .selectedTab=${this.selectedTab}
            .showTabIndicator=${!0}
            .tabStyle=${"horizontal"}
            .autoHide=${this.tabsAutoHide}
            .autoHideThreshold=${this.tabsAutoHideThreshold}
            @tab-select=${_=>this.handleTabSelect(_)}
            @tab-close=${_=>this.handleTabClose(_)}
          ></dees-appui-tabs>
        </div>
        <div class="content-area">
          <slot></slot>
          <slot name="content"></slot>
        </div>
      </div>
    `}handleTabSelect(_){this.selectedTab=_.detail.tab,this.dispatchEvent(new CustomEvent("tab-select",{detail:_.detail,bubbles:!0,composed:!0}))}handleTabClose(_){this.dispatchEvent(new CustomEvent("tab-close",{detail:_.detail,bubbles:!0,composed:!0}))}updated(_){super.updated(_),_.has("showTabs")&&(this.showTabs?this.removeAttribute("notabs"):this.setAttribute("notabs",""))}async firstUpdated(_){await super.firstUpdated(_),this.showTabs||this.setAttribute("notabs","");let k=this.shadowRoot.querySelector("dees-appui-tabs");k&&await k.updateComplete}constructor(){super(...arguments),er(this,S)}static{er(i,a)}};return N=i})()});var Et,Be,amt,imt=v(()=>{oe();_t();bo();Uft();He();TV();Qq();eV();LV();$V();AV();Gq();Et=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Be=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},amt=(()=>{let t=[Q("dees-appui")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[],$e,q=[],R=[],te,me=[],ue=[],_e,he=[],ie=[],ke,Re=[],Ue=[],xe,ae=[],re=[],ye,Pe=[],qe=[],xt,lt=[],Tt=[],Yt,se=[],le=[],Te,ct=[],pt=[],g1,ii=[],is=[],rs,Ie=[],Ge=[],$1,g2=[],D2=[],ea,A2=[],hn=[],fn,mn=[],m3=[],g3,Me=[],pe=[],Ae,R1=[],st=[],c1,ta=[],tt=[],j1,aa=[],Di=[],b3,O8=[],v3=[],B8,fW=[],mW=[];var gW=class extends r{static{i=this}static{let Z=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:String})],l=[D({type:String})],y=[D({type:Boolean})],x=[D({type:Object})],N=[D({type:Array})],I=[D({type:Boolean})],V=[D({type:String})],E=[D({type:String})],H=[D({type:Array})],ne=[D({type:Array})],we=[D({type:Array})],Ce=[D({type:Object})],F=[D({type:String})],K=[D({type:Array})],$e=[D({type:Object})],te=[D({type:Boolean})],_e=[D({type:Boolean})],ke=[D({type:Boolean})],xe=[D({type:Boolean})],ye=[D({type:Boolean})],xt=[D({type:Boolean})],Yt=[D({type:Number})],Te=[J()],g1=[J()],rs=[D({type:Array})],$1=[D({type:Object})],ea=[J()],fn=[J()],g3=[J()],Ae=[J()],c1=[J()],j1=[J()],b3=[J()],B8=[J()],Et(this,null,n,{kind:"accessor",name:"appbarMenuItems",static:!1,private:!1,access:{has:ee=>"appbarMenuItems"in ee,get:ee=>ee.appbarMenuItems,set:(ee,ze)=>{ee.appbarMenuItems=ze}},metadata:Z},s,o),Et(this,null,u,{kind:"accessor",name:"appbarBreadcrumbs",static:!1,private:!1,access:{has:ee=>"appbarBreadcrumbs"in ee,get:ee=>ee.appbarBreadcrumbs,set:(ee,ze)=>{ee.appbarBreadcrumbs=ze}},metadata:Z},c,d),Et(this,null,l,{kind:"accessor",name:"appbarBreadcrumbSeparator",static:!1,private:!1,access:{has:ee=>"appbarBreadcrumbSeparator"in ee,get:ee=>ee.appbarBreadcrumbSeparator,set:(ee,ze)=>{ee.appbarBreadcrumbSeparator=ze}},metadata:Z},f,b),Et(this,null,y,{kind:"accessor",name:"appbarShowWindowControls",static:!1,private:!1,access:{has:ee=>"appbarShowWindowControls"in ee,get:ee=>ee.appbarShowWindowControls,set:(ee,ze)=>{ee.appbarShowWindowControls=ze}},metadata:Z},g,h),Et(this,null,x,{kind:"accessor",name:"appbarUser",static:!1,private:!1,access:{has:ee=>"appbarUser"in ee,get:ee=>ee.appbarUser,set:(ee,ze)=>{ee.appbarUser=ze}},metadata:Z},M,S),Et(this,null,N,{kind:"acces
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: absolute;
        height: 100%;
        width: 100%;
        background: ${p.bdTheme("#f0f0f0","#1a1a1a")};
      }
      .maingrid {
        position: absolute;
        top: 40px;
        height: calc(100% - 40px - 24px);
        width: 100%;
        display: grid;
        /* grid-template-columns set dynamically in template */
        grid-template-rows: 1fr;
        transition: grid-template-columns 0.3s ease, height 0.3s ease;
        overflow: hidden;
      }

      :host([bottombar-hidden]) .maingrid {
        height: calc(100% - 40px);
      }

      dees-appui-bottombar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
      }

      /* Z-index layering for proper stacking */
      .maingrid > dees-appui-mainmenu {
        position: relative;
        z-index: 3;
      }

      .maingrid > dees-appui-secondarymenu {
        position: relative;
        z-index: 2;
      }

      .maingrid > dees-appui-maincontent {
        position: relative;
        z-index: 1;
        min-height: 0;
      }

      .maingrid > dees-appui-activitylog {
        position: relative;
        z-index: 1;
        overflow: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      .maingrid > dees-appui-activitylog.hidden {
        opacity: 0;
        transform: translateX(20px);
        pointer-events: none;
      }

      .maingrid > dees-appui-activitylog.visible {
        opacity: 1;
        transform: translateX(0);
      }

      /* View container for dynamically loaded views */
      .view-container {
        display: contents;
      }

      .view-container:empty {
        display: none;
      }
    `];render(){return w`
      <dees-appui-appbar
        .menuItems=${this.appbarMenuItems}
        .breadcrumbs=${this.appbarBreadcrumbs}
        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
        .showWindowControls=${this.appbarShowWindowControls}
        .user=${this.appbarUser}
        .profileMenuItems=${this.appbarProfileMenuItems}
        .showSearch=${this.appbarShowSearch}
        .showActivityLogToggle=${!0}
        .activityLogCount=${this.activityLogCount}
        .activityLogActive=${this.activityLogVisible}
        @menu-select=${Z=>this.handleAppbarMenuSelect(Z)}
        @breadcrumb-navigate=${Z=>this.handleAppbarBreadcrumbNavigate(Z)}
        @search-click=${()=>this.handleAppbarSearchClick()}
        @search-query=${Z=>this.handleAppbarSearchQuery(Z)}
        @user-menu-open=${()=>this.handleAppbarUserMenuOpen()}
        @profile-menu-select=${Z=>this.handleAppbarProfileMenuSelect(Z)}
        @activity-toggle=${()=>this.toggleActivityLog()}
      ></dees-appui-appbar>
      <div class="maingrid" style="grid-template-columns: auto auto 1fr ${this.activityLogVisible?"280px":"0px"};">
        ${this.mainmenuVisible?w`
          <dees-appui-mainmenu
            .logoIcon=${this.mainmenuLogoIcon}
            .logoText=${this.mainmenuLogoText}
            .menuGroups=${this.mainmenuGroups}
            .bottomTabs=${this.mainmenuBottomTabs}
            .tabs=${this.mainmenuTabs}
            .selectedTab=${this.mainmenuSelectedTab}
            .collapsed=${this.mainmenuCollapsed}
            @tab-select=${Z=>this.handleMainmenuTabSelect(Z)}
            @collapse-change=${Z=>this.handleMainmenuCollapseChange(Z)}
          ></dees-appui-mainmenu>
        `:""}
        ${this.secondarymenuVisible?w`
          <dees-appui-secondarymenu
            .heading=${this.secondarymenuHeading}
            .groups=${this.secondarymenuGroups}
            .selectedItem=${this.secondarymenuSelectedItem}
            .collapsed=${this.secondarymenuCollapsed}
            @item-select=${Z=>this.handleSecondarymenuItemSelect(Z)}
            @collapse-change=${Z=>this.handleSecondarymenuCollapseChange(Z)}
          ></dees-appui-secondarymenu>
        `:""}
        <dees-appui-maincontent
          .tabs=${this.maincontentTabs}
          .selectedTab=${this.maincontentSelectedTab}
          .showTabs=${this.maincontentTabsVisible}
          .tabsAutoHide=${this.contentTabsAutoHide}
          .tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
          @tab-select=${Z=>this.handleContentTabSelect(Z)}
          @tab-close=${Z=>this.handleContentTabClose(Z)}
        >
          <div class="view-container"></div>
          <slot name="maincontent"></slot>
        </dees-appui-maincontent>
        <dees-appui-activitylog
          class="${this.activityLogVisible?"visible":"hidden"}"
        ></dees-appui-activitylog>
      </div>
      ${this.bottombarVisible?w`
        <dees-appui-bottombar></dees-appui-bottombar>
      `:""}
    `}async firstUpdated(){this.appbar=this.shadowRoot.querySelector("dees-appui-appbar"),this.mainmenu=this.shadowRoot.querySelector("dees-appui-mainmenu"),this.secondarymenu=this.shadowRoot.querySelector("dees-appui-secondarymenu"),this.maincontent=this.shadowRoot.querySelector("dees-appui-maincontent"),this.activitylogElement=this.shadowRoot.querySelector("dees-appui-activitylog"),this.bottombarElement=this.shadowRoot.querySelector("dees-appui-bottombar"),this.activitylogElement&&this.activitylogElement.entries$.subscribe(Z=>{this.activityLogCount=Z.length}),this.viewRegistry.setAppuiRef(this)}async disconnectedCallback(){await super.disconnectedCallback(),this.routerCleanup&&(this.routerCleanup(),this.routerCleanup=null),this.viewLifecycle$.complete(),this.viewChanged$.complete()}setAppBarMenus(Z){this.appbarMenuItems=[...Z]}updateAppBarMenu(Z,ee){this.appbarMenuItems=this.appbarMenuItems.map(ze=>"name"in ze&&ze.name===Z?{...ze,...ee}:ze)}setBreadcrumbs(Z){Array.isArray(Z)?this.appbarBreadcrumbs=Z.join(this.appbarBreadcrumbSeparator):this.appbarBreadcrumbs=Z}setUser(Z){this.appbarUser=Z}setProfileMenuItems(Z){this.appbarProfileMenuItems=[...Z]}setSearchVisible(Z){this.appbarShowSearch=Z}setWindowControlsVisible(Z){this.appbarShowWindowControls=Z}onSearch(Z){this.searchCallback=Z}setMainMenu(Z){Z.logoIcon!==void 0&&(this.mainmenuLogoIcon=Z.logoIcon),Z.logoText!==void 0&&(this.mainmenuLogoText=Z.logoText),Z.groups!==void 0&&(this.mainmenuGroups=[...Z.groups]),Z.bottomTabs!==void 0&&(this.mainmenuBottomTabs=[...Z.bottomTabs])}updateMainMenuGroup(Z,ee){this.mainmenuGroups=this.mainmenuGroups.map(ze=>ze.name===Z?{...ze,...ee}:ze)}addMainMenuItem(Z,ee){this.mainmenuGroups=this.mainmenuGroups.map(ze=>ze.name===Z?{...ze,items:[...ze.items||[],ee]}:ze)}removeMainMenuItem(Z,ee){this.mainmenuGroups=this.mainmenuGroups.map(ze=>ze.name===Z?{...ze,items:(ze.items||[]).filter(Ft=>Ft.key!==ee)}:ze)}setMainMenuSelection(Z){for(let ze of this.mainmenuGroups){let Ft=ze.items?.find(za=>za.key===Z);if(Ft){this.mainmenuSelectedTab=Ft;return}}let ee=this.mainmenuBottomTabs.find(ze=>ze.key===Z);ee&&(this.mainmenuSelectedTab=ee)}setMainMenuCollapsed(Z){this.mainmenuCollapsed=Z}setMainMenuVisible(Z){this.mainmenuVisible=Z}setSecondaryMenuCollapsed(Z){this.secondarymenuCollapsed=Z}setSecondaryMenuVisible(Z){this.secondarymenuVisible=Z}setContentTabsVisible(Z){this.maincontentTabsVisible=Z}setContentTabsAutoHide(Z,ee=0){this.contentTabsAutoHide=Z,this.contentTabsAutoHideThreshold=ee}setMainMenuBadge(Z,ee){this.mainmenuGroups=this.mainmenuGroups.map(ze=>({...ze,items:(ze.items||[]).map(Ft=>Ft.key===Z?{...Ft,badge:ee}:Ft)})),this.mainmenuBottomTabs=this.mainmenuBottomTabs.map(ze=>ze.key===Z?{...ze,badge:ee}:ze)}clearMainMenuBadge(Z){this.mainmenuGroups=this.mainmenuGroups.map(ee=>({...ee,items:(ee.items||[]).map(ze=>{if(ze.key===Z){let{badge:Ft,...za}=ze;return za}return ze})})),this.mainmenuBottomTabs=this.mainmenuBottomTabs.map(ee=>{if(ee.key===Z){let{badge:ze,...Ft}=ee;return Ft}return ee})}setSecondaryMenu(Z){Z.heading!==void 0&&(this.secondarymenuHeading=Z.heading),this.secondarymenuGroups=[...Z.groups]}updateSecondaryMenuGroup(Z,ee){this.secondarymenuGroups=this.secondarymenuGroups.map(ze=>ze.name===Z?{...ze,...ee}:ze)}addSecondaryMenuItem(Z,ee){this.secondarymenuGroups=this.secondarymenuGroups.map(ze=>ze.name===Z?{...ze,items:[...ze.items,ee]}:ze)}setSecondaryMenuSelection(Z){for(let ee of this.secondarymenuGroups){let ze=ee.items.find(Ft=>"key"in Ft&&Ft.key===Z);if(ze&&(!("type"in ze)||ze.type==="tab"||ze.type===void 0)){this.secondarymenuSelectedItem=ze;return}}}clearSecondaryMenu(){this.secondarymenuHeading="",this.secondarymenuGroups=[],this.secondarymenuSelectedItem=void 0}setContentTabs(Z){this.maincontentTabs=[...Z],Z.length>0&&!this.maincontentSelectedTab&&(this.maincontentSelectedTab=Z[0])}addContentTab(Z){this.maincontentTabs=[...this.maincontentTabs,Z]}removeContentTab(Z){this.maincontentTabs=this.maincontentTabs.filter(ee=>ee.key!==Z),this.maincontentSelectedTab?.key===Z&&(this.maincontentSelectedTab=this.maincontentTabs[0])}s
    <dees-button @click=${()=>{y.createAndShow([{name:"Dashboard",iconName:"lucide:layout-dashboard",action:async g=>(console.log("Navigate to dashboard"),null)},{name:"Profile",iconName:"lucide:user",action:async g=>(console.log("Navigate to profile"),null)},{name:"Settings",iconName:"lucide:settings",action:async g=>(console.log("Navigate to settings"),null)},{divider:!0},{name:"Help",iconName:"lucide:help-circle",action:async g=>(console.log("Show help"),null)},{name:"Sign Out",iconName:"lucide:log-out",action:async g=>(console.log("Sign out"),null)}])}}>Open Mobile Navigation</dees-button>
  `;static singletonRef;static async createAndShow(g){return this.singletonRef||(this.singletonRef=new y,document.body.append(this.singletonRef),await this.singletonRef.init()),this.singletonRef.menuItems=g,await this.singletonRef.readyDeferred.promise,this.singletonRef.show(),this.singletonRef}#e=fl(this,s,"Menu");get heading(){return this.#e}set heading(g){this.#e=g}#t=(fl(this,o),fl(this,c,[]));get menuItems(){return this.#t}set menuItems(g){this.#t=g}#a=(fl(this,d),fl(this,f,1e3));get mobileNavZIndex(){return this.#a}set mobileNavZIndex(g){this.#a=g}readyDeferred=(fl(this,b),rt.plugins.smartpromise.defer());constructor(){super()}async init(){await this.updateComplete,this.readyDeferred.resolve()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: ${Qt};
      }

      .main {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 320px;
        transform: translateX(100%);
        color: ${p.bdTheme("#09090b","#fafafa")};
        z-index: var(--z-index);
        opacity: 0;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border-left: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        pointer-events: none;
        box-shadow: ${p.bdTheme("-20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)","-20px 0 25px -5px rgba(0, 0, 0, 0.3), -10px 0 10px -5px rgba(0, 0, 0, 0.2)")};
        display: flex;
        flex-direction: column;
      }

      .main.show {
        pointer-events: all;
        transform: translateX(0px);
        opacity: 1;
      }

      .header {
        padding: 24px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
      }

      .heading {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: ${p.bdTheme("#09090b","#fafafa")};
        margin: 0;
      }

      .menu-container {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
      }

      .menuItem {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        margin-bottom: 2px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        position: relative;
        user-select: none;
      }

      .menuItem:hover {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .menuItem:active {
        background: ${p.bdTheme("#e5e7eb","#3f3f46")};
        transform: scale(0.98);
      }

      .menuItem dees-icon {
        flex-shrink: 0;
        color: ${p.bdTheme("#71717a","#71717a")};
        transition: color 0.15s ease;
      }

      .menuItem:hover dees-icon {
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .menuItem-text {
        flex: 1;
        letter-spacing: -0.01em;
      }

      .menuItem-divider {
        height: 1px;
        background: ${p.bdTheme("#e5e7eb","#27272a")};
        margin: 8px 16px;
      }

      /* Mobile responsiveness */
      @media (max-width: 400px) {
        .main {
          max-width: 100vw;
          width: 85vw;
        }
      }

      /* Animation for menu items */
      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .main.show .menuItem {
        animation: slideInRight 0.3s ease-out forwards;
        animation-delay: calc(var(--item-index, 0) * 0.05s);
        opacity: 0;
      }

      /* Scrollbar styling */
      .menu-container::-webkit-scrollbar {
        width: 6px;
      }

      .menu-container::-webkit-scrollbar-track {
        background: transparent;
      }

      .menu-container::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("#e5e7eb","#3f3f46")};
        border-radius: 3px;
      }

      .menu-container::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("#d1d5db","#52525b")};
      }
    `];render(){return w`
      <style>
        .main {
          --z-index: ${this.mobileNavZIndex};
        }
      </style>
      <div class="main">
        <div class="header">
          <h2 class="heading">${this.heading}</h2>
        </div>
        <div class="menu-container">
          ${this.menuItems.map((g,h)=>"divider"in g&&g.divider?w`<div class="menuItem-divider"></div>`:w`
              <div
                class="menuItem"
                style="--item-index: ${h}"
                @click="${()=>{this.hide(),g.action(this)}}"
              >
                ${g.iconName?w`
                  <dees-icon .icon=${g.iconName} size="20"></dees-icon>
                `:""}
                <span class="menuItem-text">${g.name}</span>
              </div>
            `)}
        </div>
      </div>
    `}windowLayer;async show(){let g=await this.domtoolsPromise,h=this.shadowRoot.querySelector(".main");this.windowLayer?(document.body.append(this.windowLayer),await this.windowLayer.show()):(this.windowLayer=await vi.createAndShow({blur:!0}),this.windowLayer.addEventListener("click",()=>{this.hide()})),this.mobileNavZIndex=u1.getNextZIndex(),u1.register(this,this.mobileNavZIndex),await g.convenience.smartdelay.delayFor(10),h.classList.add("show")}async hide(){let g=await this.domtoolsPromise;this.shadowRoot.querySelector(".main").classList.remove("show"),u1.unregister(this),this.windowLayer&&await this.windowLayer.destroy()}async disconnectedCallback(){super.disconnectedCallback(),u1.unregister(this),this.windowLayer&&await this.windowLayer.destroy()}static{fl(i,a)}};return y=i})()});var umt=v(()=>{pmt()});var hmt=v(()=>{i9t();Qq();M9t();rmt();smt();nmt();omt();lmt();cmt();umt()});var fmt=v(()=>{vo()});var mmt,EV,gmt,bmt=v(()=>{oe();mmt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},EV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},gmt=(()=>{let t=[Q("dees-button-exit")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],mmt(this,null,n,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:d=>"size"in d,get:d=>d.size,set:(d,l)=>{d.size=l}},metadata:c},s,o),mmt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <dees-button-exit></dees-button-exit>
  `;static demoGroups=["Button"];#e=EV(this,s,24);get size(){return this.#e}set size(c){this.#e=c}styles=(EV(this,o),[p.defaultStyles,X`

    `]);render(){return w`
      <style>
        .maincontainer {
          position: relative;
          width: ${this.size}px;
          height: ${this.size}px;
        }
      </style>
      <div class="maincontainer">
        <div class="firstLine"></div>
        <div class="secondLine"></div>
      </div>
    `}static{EV(i,a)}};return u=i})()});var vmt=v(()=>{bmt()});var ymt,xmt=v(()=>{oe();ymt=()=>w`
    <style>
      ${X`
        .demoBox {
          background: #000000;
          padding: 40px;
          min-height: 100vh;
          box-sizing: border-box;
        }

        .demo-section {
          margin-bottom: 32px;
        }

        .demo-title {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 16px;
          font-family: 'Geist Sans', sans-serif;
        }

        .demo-description {
          color: #999;
          font-size: 14px;
          margin-bottom: 24px;
          font-family: 'Geist Sans', sans-serif;
        }
      `}
    </style>
    <div class="demoBox">
      <div class="demo-section">
        <h2 class="demo-title">Basic Button Groups</h2>
        <p class="demo-description">Button groups without labels for simple grouping</p>
        
        <dees-button-group>
          <dees-button>Option 1</dees-button>
          <dees-button>Option 2</dees-button>
          <dees-button>Option 3</dees-button>
        </dees-button-group>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Labeled Button Groups</h2>
        <p class="demo-description">Button groups with descriptive labels</p>
        
        <dees-button-group label="View Mode:">
          <dees-button type="highlighted">Grid</dees-button>
          <dees-button>List</dees-button>
          <dees-button>Cards</dees-button>
        </dees-button-group>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Multiple Groups</h2>
        <p class="demo-description">Multiple button groups used together</p>
        
        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
          <dees-button-group label="Dataset:">
            <dees-button type="highlighted">System</dees-button>
            <dees-button>Network</dees-button>
            <dees-button>Sales</dees-button>
          </dees-button-group>
          
          <dees-button-group label="Time Range:">
            <dees-button>1H</dees-button>
            <dees-button type="highlighted">24H</dees-button>
            <dees-button>7D</dees-button>
            <dees-button>30D</dees-button>
          </dees-button-group>
          
          <dees-button-group label="Actions:">
            <dees-button>Refresh</dees-button>
            <dees-button>Export</dees-button>
          </dees-button-group>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Vertical Button Groups</h2>
        <p class="demo-description">Button groups with vertical layout</p>
        
        <div style="display: flex; gap: 24px;">
          <dees-button-group direction="vertical" label="Navigation:">
            <dees-button>Dashboard</dees-button>
            <dees-button type="highlighted">Analytics</dees-button>
            <dees-button>Reports</dees-button>
            <dees-button>Settings</dees-button>
          </dees-button-group>
          
          <dees-button-group direction="vertical">
            <dees-button>Add Item</dees-button>
            <dees-button>Edit Item</dees-button>
            <dees-button>Delete Item</dees-button>
          </dees-button-group>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Mixed Button Types</h2>
        <p class="demo-description">Different button types within groups</p>
        
        <dees-button-group label="Status:">
          <dees-button type="success">Active</dees-button>
          <dees-button>Pending</dees-button>
          <dees-button type="danger">Inactive</dees-button>
        </dees-button-group>
      </div>
    </div>
  `});var PV,Vd,wmt,Mmt=v(()=>{oe();_t();xmt();He();PV=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Vd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},wmt=(()=>{let t=[Q("dees-button-group")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],PV(this,null,n,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:b=>"label"in b,get:b=>b.label,set:(b,y)=>{b.label=y}},metadata:f},s,o),PV(this,null,u,{kind:"accessor",name:"direction",static:!1,private:!1,access:{has:b=>"direction"in b,get:b=>b.direction,set:(b,y)=>{b.direction=y}},metadata:f},c,d),PV(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=ymt;static demoGroups=["Button"];#e=Vd(this,s,"");get label(){return this.#e}set label(f){this.#e=f}#t=(Vd(this,o),Vd(this,c,"horizontal"));get direction(){return this.#t}set direction(f){this.#t=f}constructor(){super(),Vd(this,d),v1.setup()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: inline-block;
      }

      .button-group {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 8px;
        background: ${p.bdTheme("rgba(0, 0, 0, 0.05)","rgba(255, 255, 255, 0.05)")};
        border-radius: 6px;
      }

      .button-group.vertical {
        flex-direction: column;
        align-items: stretch;
      }

      .label {
        color: ${p.bdTheme("#666","#999")};
        font-size: 12px;
        font-family: 'Geist Sans', sans-serif;
        margin-right: 8px;
        white-space: nowrap;
      }

      .button-group.vertical .label {
        margin-right: 0;
        margin-bottom: 8px;
      }

      ::slotted(*) {
        margin: 0 !important;
      }
    `];render(){return w`
      <div class="button-group ${this.direction}">
        ${this.label?w`<span class="label">${this.label}</span>`:""}
        <slot></slot>
      </div>
    `}static{Vd(i,a)}};return l=i})()});var kmt=v(()=>{Mmt()});var zmt=v(()=>{fmt();vmt();kmt()});var Smt,Cmt=v(()=>{oe();x1();IV();Smt=()=>{let t={system:{label:"System Usage (%)",series:[{name:"CPU",data:[{x:new Date(Date.now()-3e5).toISOString(),y:25},{x:new Date(Date.now()-24e4).toISOString(),y:30},{x:new Date(Date.now()-18e4).toISOString(),y:28},{x:new Date(Date.now()-12e4).toISOString(),y:35},{x:new Date(Date.now()-6e4).toISOString(),y:32},{x:new Date().toISOString(),y:38}]},{name:"Memory",data:[{x:new Date(Date.now()-3e5).toISOString(),y:45},{x:new Date(Date.now()-24e4).toISOString(),y:48},{x:new Date(Date.now()-18e4).toISOString(),y:46},{x:new Date(Date.now()-12e4).toISOString(),y:52},{x:new Date(Date.now()-6e4).toISOString(),y:50},{x:new Date().toISOString(),y:55}]}]}},e={system:a=>`${a}%`};return w`
    <dees-demowrapper .runAfterRender=${async a=>{let i=a.querySelector("#main-chart"),r=a.querySelector("#connections-chart"),n,s,o="system",u={system:z=>`${z}%`,network:z=>`${z} Mbps`,sales:z=>`$${z.toLocaleString()}`},c=120*1e3,d=1e3,l=5e3,f={cpu:30,memory:50,download:150,upload:30,connections:150},b=(z,E,T=l)=>{let $=[],H=Date.now(),O=Math.floor(c/T);for(let G=O;G>=0;G--){let ne=new Date(H-G*T).toISOString(),U=z+(Math.random()-.5)*E;$.push({x:ne,y:Math.round(U)})}return $},y={system:{label:"System Usage (%)",series:[{name:"CPU",data:b(f.cpu,10)},{name:"Memory",data:b(f.memory,8)}]},network:{label:"Network Traffic (Mbps)",series:[{name:"Download",data:b(f.download,30)},{name:"Upload",data:b(f.upload,10)}]},sales:{label:"Sales Analytics",series:[{name:"Revenue",data:[{x:"2025-01-01",y:45e3},{x:"2025-01-02",y:52e3},{x:"2025-01-03",y:48e3},{x:"2025-01-04",y:61e3},{x:"2025-01-05",y:58e3},{x:"2025-01-06",y:65e3}]},{name:"Profit",data:[{x:"2025-01-01",y:12e3},{x:"2025-01-02",y:14e3},{x:"2025-01-03",y:11e3},{x:"2025-01-04",y:18e3},{x:"2025-01-05",y:16e3},{x:"2025-01-06",y:2e4}]}]}},g=(z,E,T,$=5)=>{let H=(Math.random()-.5)*$*2,O=z+H,ne=((E+T)/2-O)*.1;return O+=ne,O=Math.max(E,Math.min(T,O)),Math.round(O)},h=Date.now(),x=Date.now(),M=()=>{if(!i)return;let z=Date.now();if(z-h>=l){h=z;let T=new Date(z).toISOString();if(o==="system"){f.cpu=g(f.cpu,20,50,3),f.memory=g(f.memory,40,70,2);let $=i.chartSeries.map((H,O)=>({name:H.name,data:[...H.data,O===0?{x:T,y:f.cpu}:{x:T,y:f.memory}]}));i.updateSeries($,!1)}else if(o==="network"){f.download=g(f.download,100,200,10),f.upload=g(f.upload,20,50,5);let $=i.chartSeries.map((H,O)=>({name:H.name,data:[...H.data,O===0?{x:T,y:f.download}:{x:T,y:f.upload}]}));i.updateSeries($,!1)}}},S=()=>{if(!r)return;let z=Date.now(),E=new Date(z).toISOString(),T=Math.floor(Math.random()*21)-10;f.connections=Math.max(50,Math.min(300,f.connections+T));let $=r.chartSeries,H=[{name:$[0]?.name||"Connections",data:[...$[0]?.data||[],{x:E,y:f.connections}]}];r.updateSeries(H,!1)},N=z=>{o=z;let E=y[z];i.label=E.label,i.series=E.series,i.yAxisFormatter=u[z],z==="system"?(i.yAxisScaling="percentage",i.yAxisMax=100):i.yAxisScaling="dynamic",h=Date.now()-l},_=()=>{!n&&(o==="system"||o==="network")&&(i.realtimeMode=!0,n=window.setInterval(()=>M(),l)),s||(r.realtimeMode=!0,s=window.setInterval(()=>S(),d))},k=()=>{n&&(window.clearInterval(n),n=null,i.realtimeMode=!1),s&&(window.clearInterval(s),s=null,r.realtimeMode=!1)},I=()=>{o==="system"?(f.cpu=Math.random()>.5?85:25,f.memory=Math.random()>.5?80:45):o==="network"&&(f.download=Math.random()>.5?250:100,f.upload=Math.random()>.5?80:20),f.connections=Math.random()>.5?280:80,h=0,x=0},L=a.querySelectorAll("dees-button");L.forEach(z=>{let E=z.textContent?.trim();E==="System Usage"?z.addEventListener("click",()=>N("system")):E==="Network Traffic"?z.addEventListener("click",()=>N("network")):E==="Sales Data"?z.addEventListener("click",()=>N("sales")):E==="Start Live"?z.addEventListener("click",()=>_()):E==="Stop Live"?z.addEventListener("click",()=>k()):E==="Spike Values"&&z.addEventListener("click",()=>I())});let A=()=>{a.querySelectorAll("dees-button").forEach(E=>{let T=E.textContent?.trim();T==="System Usage"?E.type=o==="system"?"highlighted":"normal":T==="Network Traffic"?E.type=o==="network"?"highlighted":"normal":T==="Sales Data"&&(E.type=o==="sales"?"highlighted":"normal")})};i.rollingWindow=c,i.realtimeMode=!1,i.yAxisScaling="percentage",i.yAxisMax=100,i.autoScrollInterval=1e3,setTimeout(()=>{i.updateTimeWindow()},100);let V=N,C=z=>{V(z),A()};if(L.forEach(z=>{let E=z.textContent?.trim();E==="System Usage"?(z.removeEventListener("click",()=>N("system")),z.addEventListener("click",()=>C("system"))):E==="Network Traffic"?(z.removeEventListener("click",()=>N("network")),z.addEventListener("click",()=>C("network"))):E==="Sales Data"&&(z.removeEventListener("click",()=>N("sales")),z.addEventListener("click",()=>C("sales")))}),r){let z=b(f.connections,30,d);r.series=[{name:"Connections",data:z}],r.rollingWindow=c,r.realtimeMode=!1,r.yAxisScaling="fixed",r.yAxisMax=350,r.auto
      <style>
        ${X`
        .demoBox {
          position: relative;
          background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 9%)")};
          height: 100%;
          width: 100%;
          padding: 40px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          gap: 24px;
        }
        
        .controls {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 8px;
        }
        
        .chart-container {
          flex: 1;
          min-height: 400px;
        }
        
        .info {
          color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
          font-size: 12px;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
          text-align: center;
          margin-top: 8px;
        }
      `}
    </style>
    <div class="demoBox">
      <div class="controls">
        <dees-button-group label="Dataset:">
          <dees-button type="highlighted">System Usage</dees-button>
          <dees-button>Network Traffic</dees-button>
          <dees-button>Sales Data</dees-button>
        </dees-button-group>
        
        <dees-button-group label="Real-time:">
          <dees-button>Start Live</dees-button>
          <dees-button>Stop Live</dees-button>
        </dees-button-group>
        
        <dees-button-group label="Actions:">
          <dees-button>Spike Values</dees-button>
        </dees-button-group>
      </div>
      
      <div class="chart-container">
        <dees-chart-area
          id="main-chart"
          .label=${t.system.label}
          .series=${t.system.series}
          .yAxisFormatter=${e.system}
        ></dees-chart-area>
      </div>
      
      <div class="chart-container" style="margin-top: 20px;">
        <dees-chart-area
          id="connections-chart"
          .label=${"Active Connections"}
          .series=${[{name:"Connections",data:[]}]}
          .yAxisFormatter=${a=>`${a}`}
        ></dees-chart-area>
      </div>
      
      <div class="info">
        Real-time monitoring with 2-minute rolling window • 
        Updates every second with smooth value transitions • 
        Click 'Spike Values' to simulate load spikes
      </div>
    </div>
    </dees-demowrapper>
  `}});var _mt,Tmt=v(()=>{oe();_mt=[p.defaultStyles,X`
      :host {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        font-weight: 400;
        font-size: 14px;
      }
      .mainbox {
        position: relative;
        width: 100%;
        height: 400px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 8px;
        overflow: hidden;
      }

      .chartTitle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: left;
        padding: 16px 24px;
        z-index: 10;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 63.9%)")};
      }
      .chartContainer {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        padding: 44px 16px 16px 0px;
        overflow: hidden;
        background: transparent; /* Ensure container doesn't override chart background */
      }
      
      /* ApexCharts theme overrides */
      .apexcharts-canvas {
        background: transparent !important;
      }
      
      .apexcharts-inner {
        background: transparent !important;
      }
      
      .apexcharts-graphical {
        background: transparent !important;
      }
    `]});var Lmt,$mt=v(()=>{oe();Lmt=t=>w`
        <div class="mainbox">
          <div class="chartTitle">${t.label}</div>
          <div class="chartContainer"></div>
        </div>
      `});var tr,X2,NV=v(()=>{tr={xterm:"5.3.0",xtermAddonFit:"0.8.0",xtermAddonSearch:"0.13.0",highlightJs:"11.11.1",apexcharts:"5.3.6",tiptap:"2.23.0",fontawesome:"7.1.0"},X2="https://cdn.jsdelivr.net/npm"});var C2,Dmt=v(()=>{NV();C2=class t{static instance;xtermLib=null;xtermFitAddonLib=null;xtermSearchAddonLib=null;highlightJsLib=null;apexChartsLib=null;tiptapLib=null;xtermLoadingPromise=null;xtermFitAddonLoadingPromise=null;xtermSearchAddonLoadingPromise=null;highlightJsLoadingPromise=null;apexChartsLoadingPromise=null;tiptapLoadingPromise=null;constructor(){}static getInstance(){return t.instance||(t.instance=new t),t.instance}async loadXterm(){return this.xtermLib?this.xtermLib:this.xtermLoadingPromise?this.xtermLoadingPromise:(this.xtermLoadingPromise=(async()=>{let a=await import(`${X2}/xterm@${tr.xterm}/+esm`);return await this.injectXtermStyles(),this.xtermLib={Terminal:a.Terminal},this.xtermLib})(),this.xtermLoadingPromise)}async loadXtermFitAddon(){return this.xtermFitAddonLib?this.xtermFitAddonLib:this.xtermFitAddonLoadingPromise?this.xtermFitAddonLoadingPromise:(this.xtermFitAddonLoadingPromise=(async()=>{let a=await import(`${X2}/xterm-addon-fit@${tr.xtermAddonFit}/+esm`);return this.xtermFitAddonLib={FitAddon:a.FitAddon},this.xtermFitAddonLib})(),this.xtermFitAddonLoadingPromise)}async loadXtermSearchAddon(){return this.xtermSearchAddonLib?this.xtermSearchAddonLib:this.xtermSearchAddonLoadingPromise?this.xtermSearchAddonLoadingPromise:(this.xtermSearchAddonLoadingPromise=(async()=>{let a=await import(`${X2}/xterm-addon-search@${tr.xtermAddonSearch}/+esm`);return this.xtermSearchAddonLib={SearchAddon:a.SearchAddon},this.xtermSearchAddonLib})(),this.xtermSearchAddonLoadingPromise)}async injectXtermStyles(){let e="xterm-cdn-styles";if(document.getElementById(e))return;let a=`${X2}/xterm@${tr.xterm}/css/xterm.css`,r=await(await fetch(a)).text(),n=`
/* Fix xterm.js WidthCache measurement container causing horizontal scrollbar */
/* xterm creates this on document.body - move it off-screen horizontally too */
body > div[style*="top: -50000px"][style*="width: 50000px"] {
  left: -50000px !important;
}
`,s=document.createElement("style");s.id=e,s.textContent=r+n,document.head.appendChild(s)}async loadHighlightJs(){return this.highlightJsLib?this.highlightJsLib:this.highlightJsLoadingPromise?this.highlightJsLoadingPromise:(this.highlightJsLoadingPromise=(async()=>{let a=await import(`${X2}/highlight.js@${tr.highlightJs}/+esm`);return this.highlightJsLib=a.default,this.highlightJsLib})(),this.highlightJsLoadingPromise)}async loadApexCharts(){return this.apexChartsLib?this.apexChartsLib:this.apexChartsLoadingPromise?this.apexChartsLoadingPromise:(this.apexChartsLoadingPromise=(async()=>{let a=await import(`${X2}/apexcharts@${tr.apexcharts}/+esm`);return this.apexChartsLib=a.default,this.apexChartsLib})(),this.apexChartsLoadingPromise)}async loadTiptap(){return this.tiptapLib?this.tiptapLib:this.tiptapLoadingPromise?this.tiptapLoadingPromise:(this.tiptapLoadingPromise=(async()=>{let e=tr.tiptap,[a,i,r,n,s,o]=await Promise.all([import(`${X2}/@tiptap/core@${e}/+esm`),import(`${X2}/@tiptap/starter-kit@${e}/+esm`),import(`${X2}/@tiptap/extension-underline@${e}/+esm`),import(`${X2}/@tiptap/extension-text-align@${e}/+esm`),import(`${X2}/@tiptap/extension-link@${e}/+esm`),import(`${X2}/@tiptap/extension-typography@${e}/+esm`)]);return this.tiptapLib={Editor:a.Editor,StarterKit:i.default||i.StarterKit,Underline:r.default||r.Underline,TextAlign:n.default||n.TextAlign,Link:s.default||s.Link,Typography:o.default||o.Typography},this.tiptapLib})(),this.tiptapLoadingPromise)}async preloadAll(){await Promise.all([this.loadXterm(),this.loadXtermFitAddon(),this.loadXtermSearchAddon(),this.loadHighlightJs(),this.loadApexCharts(),this.loadTiptap()])}isLoaded(e){switch(e){case"xterm":return this.xtermLib!==null;case"xtermFitAddon":return this.xtermFitAddonLib!==null;case"xtermSearchAddon":return this.xtermSearchAddonLib!==null;case"highlightJs":return this.highlightJsLib!==null;case"apexCharts":return this.apexChartsLib!==null;case"tiptap":return this.tiptapLib!==null;default:return!1}}}});var zo=v(()=>{Dmt();NV()});var Yr,n2,Amt,IV=v(()=>{oe();_t();Cmt();Tmt();$mt();zo();Yr=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},n2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Amt=(()=>{let t=[Q("dees-chart-area")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[];var H=class extends r{static{i=this}static{let O=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[D()],l=[D({type:Array})],y=[D({attribute:!1})],x=[D({type:Number})],N=[D({type:Boolean})],I=[D({type:String})],V=[D({type:Number})],E=[D({type:Number})],Yr(this,null,n,{kind:"accessor",name:"chart",static:!1,private:!1,access:{has:G=>"chart"in G,get:G=>G.chart,set:(G,ne)=>{G.chart=ne}},metadata:O},s,o),Yr(this,null,u,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:G=>"label"in G,get:G=>G.label,set:(G,ne)=>{G.label=ne}},metadata:O},c,d),Yr(this,null,l,{kind:"accessor",name:"series",static:!1,private:!1,access:{has:G=>"series"in G,get:G=>G.series,set:(G,ne)=>{G.series=ne}},metadata:O},f,b),Yr(this,null,y,{kind:"accessor",name:"yAxisFormatter",static:!1,private:!1,access:{has:G=>"
              <span style="display: inline-block; width: 10px; height: 10px; background: ${Ue}; border-radius: 2px;"></span>
              <span style="font-weight: 500;">${ke}:</span>
              <span style="margin-left: auto; font-weight: 600;">${xe}</span>
            </div>`}),_e+="</div>",_e}},grid:{xaxis:{lines:{show:!1}},yaxis:{lines:{show:!0}},borderColor:F?"hsl(0 0% 14.9%)":"hsl(0 0% 94%)",strokeDashArray:0,padding:{top:10,right:20,bottom:10,left:20}},fill:{type:"gradient",gradient:{shade:F?"dark":"light",type:"vertical",shadeIntensity:.1,opacityFrom:F?.2:.3,opacityTo:0,stops:[0,100]}},colors:F?this.CHART_COLORS.dark:this.CHART_COLORS.light,theme:{mode:W}};try{this.chart=new O(this.shadowRoot.querySelector(".chartContainer"),B),await this.chart.render(),await new Promise(ge=>setTimeout(ge,100)),await this.resizeChart();let K=this.shadowRoot.querySelector(".mainbox");K&&this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver.observe(K),this.DEBUG_RESIZE&&console.log("DeesChartArea - ResizeObserver attached to mainbox"))}catch(K){console.error("Failed to initialize chart:",K)}}async updated(O){super.updated(O),O.has("goBright")&&this.chart&&await this.updateChartTheme(),O.has("series")&&this.chart&&this.series.length>0&&await this.updateSeries(this.series),O.has("yAxisFormatter")&&this.chart&&await this.chart.updateOptions({yaxis:{labels:{formatter:this.yAxisFormatter}}}),O.has("realtimeMode")&&this.chart&&(await this.chart.updateOptions({chart:{animations:{enabled:!this.realtimeMode,speed:400,animateGradually:{enabled:!1,delay:0},dynamicAnimation:{enabled:!this.realtimeMode,speed:350}}}}),this.realtimeMode&&this.rollingWindow>0&&this.autoScrollInterval>0?this.startAutoScroll():this.stopAutoScroll()),O.has("autoScrollInterval")&&this.chart&&(this.stopAutoScroll(),this.realtimeMode&&this.rollingWindow>0&&this.autoScrollInterval>0&&this.startAutoScroll()),(O.has("yAxisScaling")||O.has("yAxisMax"))&&this.chart&&await this.chart.updateOptions({yaxis:{min:0,max:this.yAxisScaling==="dynamic"?void 0:this.yAxisMax}})}async updateSeries(O,G=!0){if(this.chart)try{if(this.internalChartData=O,this.rollingWindow>0&&this.realtimeMode){let U=Date.now()-this.rollingWindow,be=O.map(we=>({name:we.name,data:we.data.filter(j=>typeof j=="object"&&j!==null&&"x"in j?new Date(j.x).getTime()>U:!1)}));if(be.some(we=>we.data.length>0)){if(this.yAxisScaling==="dynamic"){let we=be.flatMap(j=>j.data.map(fe=>fe.y));if(we.length>0){let j=Math.max(...we),fe=Math.ceil(j*1.1);await this.chart.updateOptions({yaxis:{min:0,max:fe}},!1,!1)}}await this.chart.updateSeries(be,!1)}}else await this.chart.updateSeries(O,G)}catch(ne){console.error("Failed to update chart series:",ne)}}async updateTimeWindow(){if(!this.chart||this.rollingWindow<=0)return;let O=Date.now(),G=O-this.rollingWindow;await this.chart.updateOptions({xaxis:{min:G,max:O,labels:{format:"HH:mm:ss",datetimeUTC:!1,style:{colors:[this.goBright?"hsl(0 0% 20%)":"hsl(0 0% 63.9%)"],fontSize:"12px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',fontWeight:"400"}},tickAmount:6}},!1,!1)}async appendData(O){this.chart&&this.chart.appendData(O)}async updateOptions(O,G,ne){if(this.chart)return this.chart.updateOptions(O,G,ne)}async resizeChart(){if(this.chart){this.DEBUG_RESIZE&&console.log("DeesChartArea - resizeChart called");try{let O=this.shadowRoot.querySelector(".mainbox"),G=this.shadowRoot.querySelector(".chartContainer");if(!O||!G)return;O.offsetHeight;let ne=window.getComputedStyle(G),U=parseInt(ne.paddingTop,10),be=parseInt(ne.paddingBottom,10),we=parseInt(ne.paddingLeft,10),j=parseInt(ne.paddingRight,10),fe=O.clientWidth-we-j,Ce=O.offsetHeight-U-be;fe>0&&Ce>0&&(this.DEBUG_RESIZE&&console.log("DeesChartArea - Updating chart dimensions:",{width:fe,height:Ce}),await this.chart.updateOptions({chart:{width:fe,height:Ce}},!0,!1))}catch(O){console.error("Failed to resize chart:",O)}}}async forceResize(){await this.resizeChart()}startAutoScroll(){this.autoScrollTimer||(this.autoScrollTimer=window.setInterval(()=>{this.updateTimeWindow()},this.autoScrollInterval))}stopAutoScroll(){this.autoScrollTimer&&(window.clearInterval(this.autoScrollTimer),this.autoScrollTimer=null)}async updateChartTheme(){if(!this.chart)return;let O=!this.goBright,G=O?"dark":"light";await this.chart.updateOptions({theme:{mode:G},colors:
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("#structured-log"),a=t.querySelector("#raw-log"),i,r,n=["Server","Database","API","Auth","Cache","Queue","WebSocket","Scheduler"],s={debug:["Loading module: {{module}}","Cache hit for key: {{key}}","SQL query executed in {{time}}ms","Request headers: {{headers}}","Environment variable loaded: {{var}}"],info:["Request received: {{method}} {{path}}","User {{userId}} authenticated successfully","Processing job {{jobId}} from queue",'Scheduled task "{{task}}" started',"WebSocket connection established from {{ip}}"],warn:["Slow query detected: {{query}} ({{time}}ms)","Memory usage at {{percent}}%","Rate limit approaching for IP {{ip}}","Deprecated API endpoint called: {{endpoint}}","Certificate expires in {{days}} days"],error:["Database connection lost: {{error}}","Failed to process request: {{error}}","Authentication failed for user {{user}}","File not found: {{path}}","Service unavailable: {{service}}"],success:["Server started successfully on port {{port}}","Database migration completed","Backup completed: {{size}} MB","SSL certificate renewed","Health check passed: all systems operational"]},o=["\x1B[90m2024-01-15T10:23:45.123Z\x1B[0m \x1B[36mINFO\x1B[0m  [nginx] GET /api/health 200 - 2ms","\x1B[90m2024-01-15T10:23:45.456Z\x1B[0m \x1B[33mWARN\x1B[0m  [redis] Connection pool running low: 3/10","\x1B[90m2024-01-15T10:23:45.789Z\x1B[0m \x1B[31mERROR\x1B[0m [mongodb] Query timeout after 30000ms","\x1B[90m2024-01-15T10:23:46.012Z\x1B[0m \x1B[36mINFO\x1B[0m  [app] Processing batch job #{{jobId}}","\x1B[90m2024-01-15T10:23:46.345Z\x1B[0m \x1B[32mOK\x1B[0m    [health] All services healthy","\x1B[90m2024-01-15T10:23:46.678Z\x1B[0m \x1B[36mINFO\x1B[0m  [kafka] Message consumed from topic: events","\x1B[90m2024-01-15T10:23:47.001Z\x1B[0m \x1B[35mDEBUG\x1B[0m [grpc] Request received: GetUser(id={{userId}})","\x1B[90m2024-01-15T10:23:47.234Z\x1B[0m \x1B[31mERROR\x1B[0m [auth] Token validation failed: expired","\x1B[90m2024-01-15T10:23:47.567Z\x1B[0m \x1B[33mWARN\x1B[0m  [rate-limit] IP {{ip}} approaching rate limit","\x1B[90m2024-01-15T10:23:47.890Z\x1B[0m \x1B[36mINFO\x1B[0m  [websocket] Client connected: session={{session}}",`\x1B[31mError: Connection refused\x1B[0m
    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)
    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)
    at async DatabaseService.query (/app/src/db/service.ts:89:12)`],u=()=>{let g=["debug","info","warn","error","success"],h=[.2,.5,.15,.1,.05],x=Math.random(),M=0,S="info";for(let L=0;L<h.length;L++)if(M+=h[L],x<M){S=g[L];break}let N=n[Math.floor(Math.random()*n.length)],_=s[S],I=_[Math.floor(Math.random()*_.length)].replace("{{module}}",["express","mongoose","redis","socket.io"][Math.floor(Math.random()*4)]).replace("{{key}}","user:"+Math.floor(Math.random()*1e3)).replace("{{time}}",String(Math.floor(Math.random()*500)+50)).replace("{{headers}}","Content-Type: application/json, Authorization: Bearer ...").replace("{{var}}",["NODE_ENV","DATABASE_URL","API_KEY","PORT"][Math.floor(Math.random()*4)]).replace("{{method}}",["GET","POST","PUT","DELETE"][Math.floor(Math.random()*4)]).replace("{{path}}",["/api/users","/api/auth/login","/api/products","/health"][Math.floor(Math.random()*4)]).replace("{{userId}}",String(Math.floor(Math.random()*1e4))).replace("{{jobId}}","job_"+Math.random().toString(36).substring(2,11)).replace("{{task}}",["cleanup","backup","report-generation","cache-refresh"][Math.floor(Math.random()*4)]).replace("{{ip}}",`192.168.1.${Math.floor(Math.random()*255)}`).replace("{{query}}","SELECT * FROM users WHERE ...").replace("{{percent}}",String(Math.floor(Math.random()*30)+70)).replace("{{endpoint}}","/api/v1/legacy").replace("{{days}}",String(Math.floor(Math.random()*30)+1)).replace("{{error}}",["ECONNREFUSED","ETIMEDOUT","ENOTFOUND"][Math.floor(Math.random()*3)]).replace("{{user}}","user_"+Math.floor(Math.random()*1e3)).replace("{{service}}",["Redis","MongoDB","ElasticSearch"][Math.floor(Math.random()*3)]).replace("{{port}}",String(3e3+Math.floor(Math.random()*10))).replace("{{size}}",String(Math.floor(Math.random()*500)+100));e.addLog(S,I,N)},c=()=>{let g=o[Math.floor(Math.random()*o.length)],h=new Date().toISOString(),x=g.replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g,h).replace("{{jobId}}",String(Math.floor(Math.random()*1e4))).replace("{{userId}}",String(Math.floor(Math.random()*1e4))).replace("{{ip}}",`192.168.1.${Math.floor(Math.random()*255)}`).replace("{{session}}",Math.random().toString(36).substring(2,11));a.writelnRaw(x)},d=()=>{if(!i){let g=()=>{u();let h=Math.random()*2e3+500;i=window.setTimeout(()=>{i&&g()},h)};g()}},l=()=>{i&&(window.clearTimeout(i),i=null)},f=()=>{if(!r){let g=()=>{c();let h=Math.random()*1e3+200;r=window.setTimeout(()=>{r&&g()},h)};g()}},b=()=>{r&&(window.clearTimeout(r),r=null)};t.querySelectorAll("dees-button").forEach(g=>{switch(g.textContent?.trim()){case"Add Structured Log":g.addEventListener("click",()=>u());break;case"Start Structured":g.addEventListener("click",()=>d());break;case"Stop Structured":g.addEventListener("click",()=>l());break;case"Add Docker Log":g.addEventListener("click",()=>c());break;case"Start Docker":g.addEventListener("click",()=>f());break;case"Stop Docker":g.addEventListener("click",()=>b());break}})}}>
      <style>
        ${X`
          .demoBox {
            position: relative;
            background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 5%)")};
            height: 100%;
            width: 100%;
            padding: 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }
          .section {
            display: flex;
            flex-direction: column;
            gap: 12px;
          }
          .section-title {
            color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
            font-size: 14px;
            font-weight: 600;
            font-family: 'Geist Sans', sans-serif;
          }
          .section-description {
            color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
            font-size: 12px;
            font-family: 'Geist Sans', sans-serif;
          }
          .controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
          }
        `}
      </style>
    <div class="demoBox">
      <!-- Structured Logs Section -->
      <div class="section">
        <div class="section-title">Structured Logs (ILogEntry)</div>
        <div class="section-description">
          Structured log entries with level, message, and source. Supports search and keyword highlighting.
        </div>
        <div class="controls">
          <dees-button>Add Structured Log</dees-button>
          <dees-button>Start Structured</dees-button>
          <dees-button>Stop Structured</dees-button>
        </div>
        <dees-chart-log
          id="structured-log"
          .label=${"Production Server Logs"}
          .highlightKeywords=${["error","failed","timeout"]}
          .showMetrics=${!0}
        ></dees-chart-log>
      </div>

      <!-- Raw Logs Section -->
      <div class="section">
        <div class="section-title">Raw Logs (Docker/Container Style)</div>
        <div class="section-description">
          Raw log output with ANSI escape sequences for real Docker/container logs.
        </div>
        <div class="controls">
          <dees-button>Add Docker Log</dees-button>
          <dees-button>Start Docker</dees-button>
          <dees-button>Stop Docker</dees-button>
        </div>
        <dees-chart-log
          id="raw-log"
          .label=${"Docker Container Logs"}
          .mode=${"raw"}
          .showMetrics=${!1}
        ></dees-chart-log>
      </div>
    </div>
    </dees-demowrapper>
  `});var ki,T1,Nmt,Rmt=v(()=>{oe();_t();Imt();He();zo();ki=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},T1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Nmt=(()=>{let t=[Q("dees-chart-log")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[];var we=class extends r{static{i=this}static{let j=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D({type:String})],l=[D({type:Array})],y=[D({type:Boolean})],x=[D({type:Number})],N=[D({type:Array})],I=[D({type:Boolean})],V=[J()],E=[J()],H=[J()],ne=[J()],ki(this,null,n,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:fe=>"label"in fe,get:fe=>fe.label,set:(fe,Ce)=>{fe.label=Ce}},metadata:j},s,o),ki(this,null,u,{kind:"accessor",name:"mode",static:!1,private:!1,access:{has:fe=>"mode"in fe,get:fe=>fe.mode,set:(fe,Ce)=>{fe.mode=Ce}},metadata:j},c,d),ki(this,null,l,{kind:"accessor",name:"logEntries",static:!1,private:!1,access:{has:fe=>"logEntries"in fe,get:fe=>fe.logEntries,set:(fe,Ce)=>{fe.logEntries=Ce}},metadata:j},f,b),ki(this,null,y,{kind:"accessor",name:"autoScroll",static:!1,private:!1,access:{has:fe=>"autoScroll"in fe,get:fe=>fe.autoScroll,set:(fe,Ce)=>{fe.autoScroll=Ce}},metadata:j},g,h),ki(this,null,x,{kind:"accessor",name:"maxEntries",static:!1,private:!1,access:{has:fe=>"maxEntries"in fe,get:fe=>fe.maxEntries,set:(fe,Ce)=>{fe.maxEntries=Ce}},metadata:j},M,S),ki(this,null,N,{kind:"accessor",name:"highlightKeywords",static:!1,private:!1,access:{has:fe=>"highlightKeywords"in fe,get:fe=>fe.highlightKeywords,set:(fe,Ce)=>{fe.highlightKeywords=Ce}},metadata:j},_,k),ki(this,null,I,{kind:"accessor",name:"showMetrics",static:!1,private:!1,access:{has:fe=>"showMetrics"in fe,get:fe=>fe.showMetrics,set:(fe,Ce)=>{fe.showMetrics=Ce}},metadata:j},L,A),ki(this,null,V,{kind:"accessor",name:"searchQuery",static:!1,private:!1,access:{has:fe=>"searchQuery"in fe,get:fe=>fe.searchQuery,set:(fe,Ce)=>{fe.searchQuery=Ce}},metadata:j},C,z),ki(this,null,E,{kind:"accessor",name:"filterMode",static:!1,private:!1,access:{has:fe=>"filterMode"in fe,get:fe=>fe.filterMode,set:(fe,Ce)=>{fe.filterMode=Ce}},metadata:j},T,$),ki(this,null,H,{kind:"accessor",name:"metrics",static:!1,private:!1,access:{has:fe=>"metrics"in fe,get:fe=>fe.metrics,set:(fe,Ce)=>{fe.metrics=Ce}},metadata:j},O,G),ki(this,null,ne,{kind:"accessor",name:"terminalReady",static:!1,private:!1,access:{has:fe=>"terminalReady"in fe,get:fe=>fe.terminalReady,set:(fe,Ce)=>{fe.terminalReady=Ce}},metadata:j},U,be),ki(null,e={value:i},t,{kind:"class",name:i.name,metadata:j},null,a),we=i=e.value,j&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:j})}static demo=Pmt;static demoGroups=["Chart","Workspace"];#e=T1(this,s,"Server Logs");get label(){return this.#e}set label(j){this.#e=j}#t=(T1(this,o),T1(this,c,"structured"));get mode(){return this.#t}set mode(j){this.#t=j}#a=(T1(this,d),T1(this,f,[]));get logEntries(){return this.#a}set logEntries(j){this.#a=j}#i=(T1(this,b),T1(this,g,!0));get autoScroll(){return this.#i}set autoScroll(j){this.#i=j}#r=(T1(this,h),T1(this,M,1e4)
      :host {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
      }

      .mainbox {
        position: relative;
        width: 100%;
        height: 400px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .header {
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
        padding: 8px 12px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        flex-wrap: wrap;
      }

      .title {
        font-weight: 500;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        white-space: nowrap;
      }

      .search-box {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        min-width: 150px;
        max-width: 300px;
      }

      .search-box input {
        flex: 1;
        padding: 4px 8px;
        font-size: 12px;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        outline: none;
      }

      .search-box input:focus {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
      }

      .search-box input::placeholder {
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
      }

      .search-nav {
        display: flex;
        gap: 2px;
      }

      .search-nav button {
        padding: 4px 6px;
        font-size: 11px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 14.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 3px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        cursor: pointer;
        line-height: 1;
      }

      .search-nav button:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 20%)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .filter-toggle {
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 500;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 14.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }

      .filter-toggle:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 20%)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .filter-toggle.active {
        background: ${p.bdTheme("hsl(45 93% 47%)","hsl(45 93% 47%)")};
        border-color: ${p.bdTheme("hsl(45 93% 47%)","hsl(45 93% 47%)")};
        color: hsl(0 0% 9%);
      }

      .controls {
        display: flex;
        gap: 6px;
        margin-left: auto;
      }

      .control-button {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 14.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        padding: 4px 10px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.15s;
      }

      .control-button:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 20%)")};
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 25%)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .control-button.active {
        background: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        color: white;
      }

      .terminal-container {
        flex: 1;
        overflow: hidden;
        padding: 8px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
      }

      .terminal-container .xterm {
        height: 100%;
      }

      .loading-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        font-style: italic;
        font-size: 13px;
      }

      .metrics-bar {
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        padding: 6px 12px;
        display: flex;
        gap: 16px;
        font-size: 11px;
        font-weight: 500;
        flex-shrink: 0;
      }

      .metric {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .metric::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .metric.error::before {
        background: hsl(0 84.2% 60.2%);
      }

      .metric.warn::before {
        background: hsl(25 95% 53%);
      }

      .metric.info::before {
        background: hsl(222.2 47.4% 51.2%);
      }

      .metric.success::before {
        background: hsl(142.1 76.2% 36.3%);
      }

      .metric.debug::before {
        background: hsl(0 0% 63.9%);
      }

      .metric.rate {
        margin-left: auto;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      }

      .metric.rate::before {
        display: none;
      }
    `];constructor(){super(),v1.setup()}render(){return w`
      <div class="mainbox">
        <div class="header">
          <div class="title">${this.label}</div>
          <div class="search-box">
            <input
              type="text"
              placeholder="Search logs..."
              .value=${this.searchQuery}
              @input=${j=>this.handleSearchInput(j)}
              @keydown=${j=>this.handleSearchKeydown(j)}
            />
            <div class="search-nav">
              <button @click=${()=>this.searchPrevious()} title="Previous match">↑</button>
              <button @click=${()=>this.searchNext()} title="Next match">↓</button>
            </div>
            <button
              class="filter-toggle ${this.filterMode?"active":""}"
              @click=${()=>this.toggleFilterMode()}
              title="${this.filterMode?"Switch to highlight mode":"Switch to filter mode"}"
            >
              ${this.filterMode?"Filter":"Highlight"}
            </button>
          </div>
          <div class="controls">
            <button
              class="control-button ${this.autoScroll?"active":""}"
              @click=${()=>this.toggleAutoScroll()}
            >
              Auto Scroll
            </button>
            <button class="control-button" @click=${()=>this.clearLogs()}>
              Clear
            </button>
          </div>
        </div>

        <div class="terminal-container">
          ${this.terminalReady?"":w`<div class="loading-state">Loading terminal...</div>`}
        </div>

        ${this.showMetrics?w`
              <div class="metrics-bar">
                <span class="metric error">errors: ${this.metrics.error}</span>
                <span class="metric warn">warns: ${this.metrics.warn}</span>
                <span class="metric info">info: ${this.metrics.info}</span>
                <span class="metric success">success: ${this.metrics.success}</span>
                <span class="metric debug">debug: ${this.metrics.debug}</span>
                <span class="metric rate">${this.metrics.rate.toFixed(1)} logs/sec</span>
              </div>
            `:""}
      </div>
    `}async firstUpdated(){if(this.domtoolsInstance=await this.domtoolsPromise,await this.initializeTerminal(),this.logEntries.length>0)for(let j of this.logEntries)this.writeLogEntry(j)}async initializeTerminal(){let j=C2.getInstance(),[fe,Ce,Y]=await Promise.all([j.loadXterm(),j.loadXtermFitAddon(),j.loadXtermSearchAddon()]);await this.injectXtermStylesIntoShadow(),this.terminal=new fe.Terminal({cursorBlink:!1,disableStdin:!0,fontSize:12,fontFamily:"'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",theme:this.getTerminalTheme(),scrollback:this.maxEntries,convertEol:!0}),this.fitAddon=new Ce.FitAddon,this.searchAddon=new Y.SearchAddon,this.terminal.loadAddon(this.fitAddon),this.terminal.loadAddon(this.searchAddon);let P=this.shadowRoot.querySelector(".terminal-container");this.terminal.open(P),await new Promise(F=>requestAnimationFrame(F)),this.fitAddon.fit(),this.resizeObserver=new ResizeObserver(()=>{this.fitAddon?.fit()}),this.resizeObserver.observe(P),this.terminalThemeSubscription=this.domtoolsInstance.themeManager.themeObservable.subscribe(()=>{this.terminal&&(this.terminal.options.theme=this.getTerminalTheme())}),this.rateInterval=setInterval(()=>this.calculateRate(),1e3),this.terminalReady=!0}getTerminalTheme(){return this.domtoolsInstance?.themeManager?.isDarkMode??!0?{background:"#0a0a0a",foreground:"#e0e0e0",cursor:"#e0e0e0",selectionBackground:"#404040",black:"#000000",red:"#ff5555",green:"#50fa7b",yellow:"#f1fa8c",blue:"#6272a4",magenta:"#ff79c6",cyan:"#8be9fd",white:"#f8f8f2",brightBlack:"#6272a4",brightRed:"#ff6e6e",brightGreen:"#69ff94",brightYellow:"#ffffa5",brightBlue:"#d6acff",brightMagenta:"#ff92df",brightCyan:"#a4ffff",brightWhite:"#ffffff"}:{background:"#ffffff",foreground:"#333333",cursor:"#333333",selectionBackground:"#add6ff",black:"#000000",red:"#cd3131",green:"#00bc00",yellow:"#949800",blue:"#0451a5",magenta:"#bc05bc",cyan:"#0598bc",white:"#555555",brightBlack:"#666666",brightRed:"#cd3131",brightGreen:"#14ce14",brightYellow:"#b5ba00",brightBlue:"#0451a5",brightMagenta:"#bc05bc",brightCyan:"#0598bc",brightWhite:"#a5a5a5"}}async injectXtermStylesIntoShadow(){let j="xterm-shadow-styles";if(this.shadowRoot.getElementById(j))return;let fe=`${X2}/xterm@${tr.xterm}/css/xterm.css`,Y=await(await fetch(fe)).text(),P=document.createElement("style");P.id=j,P.textContent=Y,this.shadowRoot.appendChild(P)}addLog(j,fe,Ce){let Y={timestamp:new Date().toISOString(),level:j,message:fe,source:Ce};this.logBuffer.push(Y),this.logBuffer.length>this.maxEntries&&this.logBuffer.shift(),!this.filterMode||!this.searchQuery?this.writeLogEntry(Y):this.entryMatchesFilter(Y)?(this.trailingHiddenCount=0,this.writeLogEntry(Y)):this.updateTrailingPlaceholder(),this.updateMetrics(Y.level)}updateLog(j){if(j)for(let fe of j)this.logBuffer.push(fe),this.logBuffer.length>this.maxEntries&&this.logBuffer.shift(),!this.filterMode||!this.searchQuery?this.writeLogEntry(fe):this.entryMatchesFilter(fe)?(this.trailingHiddenCount=0,this.writeLogEntry(fe)):this.updateTrailingPlaceholder(),this.updateMetrics(fe.level)}updateTrailingPlaceholder(){this.terminal&&(this.trailingHiddenCount>0&&this.terminal.write("\x1B[1A\x1B[2K\r"),this.trailingHiddenCount++,this.writeHiddenPlaceholder(this.trailingHiddenCount),this.autoScroll&&this.terminal.scrollToBottom())}entryMatchesFilter(j){if(!this.searchQuery)return!0;let fe=this.searchQuery.toLowerCase();return j.message.toLowerCase().includes(fe)||j.level.toLowerCase().includes(fe)||(j.source?.toLowerCase().includes(fe)??!1)}writeLogEntry(j){if(!this.terminal)return;let fe=this.formatLogEntry(j);this.terminal.writeln(fe),this.autoScroll&&this.terminal.scrollToBottom()}formatLogEntry(j){let fe=this.formatTimestamp(j.timestamp),Ce={debug:"\x1B[90m",info:"\x1B[36m",warn:"\x1B[33m",error:"\x1B[31m",success:"\x1B[32m"},Y="\x1B[0m",P="\x1B[2m",F=`${Ce[j.level]}[${j.level.toUpperCase().padEnd(7)}]${Y}`,W=j.source?`${P}[${j.source}]${Y} `:"",B=this.applyHighlights(j.message);return`${P}${fe}${Y} ${F} ${W}${B}`}formatTimestamp(j){return new Date(j).toLocaleTimeString("en-US",{hour12:
  <style>
    .demoWrapper {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      min-height: 100vh;
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    
    .section {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }
    
    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }
  </style>
  <div class="demoWrapper">
    <div class="section">
      <div class="section-title">TypeScript Code Example</div>
      <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
      <dees-dataview-codebox proglang="typescript">
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

class UserService {
  private users: User[] = [];
  
  constructor(private apiUrl: string) {
    console.log('UserService initialized');
  }
  
  async getUsers(): Promise<User[]> {
    try {
      const response = await fetch(this.apiUrl);
      const data = await response.json();
      return data.users;
    } catch (error) {
      console.error('Failed to fetch users:', error);
      return [];
    }
  }
  
  addUser(user: User): void {
    this.users.push(user);
  }
}

// Usage example
const service = new UserService('https://api.example.com/users');
const users = await service.getUsers();
console.log('Found users:', users.length);
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">JavaScript Example</div>
      <div class="section-description">Modern JavaScript with ES6+ features.</div>
      <dees-dataview-codebox proglang="javascript">
// Array manipulation examples
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const filtered = numbers.filter(n => n > 3);

// Object destructuring
const user = { name: 'John', age: 30, city: 'New York' };
const { name, age } = user;

// Promise handling
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};

// Modern syntax
const greet = (name = 'World') => \`Hello, \${name}!\`;
console.log(greet('ShadCN'));
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">Python Example</div>
      <div class="section-description">Python code with classes and type hints.</div>
      <dees-dataview-codebox proglang="python">
from typing import List, Optional
import asyncio

class DataProcessor:
    """A simple data processor class"""
    
    def __init__(self, name: str):
        self.name = name
        self.data: List[dict] = []
    
    async def process_data(self, items: List[dict]) -> List[dict]:
        """Process data items asynchronously"""
        results = []
        for item in items:
            # Simulate async processing
            await asyncio.sleep(0.1)
            results.append({
                'id': item.get('id'),
                'processed': True,
                'processor': self.name
            })
        return results
    
    def get_summary(self) -> dict:
        return {
            'processor': self.name,
            'items_processed': len(self.data)
        }

# Usage
processor = DataProcessor("Main")
data = await processor.process_data([{'id': 1}, {'id': 2}])
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">CSS Example</div>
      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
      <dees-dataview-codebox proglang="css">
/* Modern CSS with custom properties */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --background: #ffffff;
  --text-color: #09090b;
  --border-radius: 6px;
}

.card {
  background: var(--background);
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">JSON Example</div>
      <div class="section-description">JSON configuration with proper formatting.</div>
      <dees-dataview-codebox proglang="json">
{
  "name": "@design.estate/dees-catalog",
  "version": "1.10.7",
  "description": "A comprehensive catalog of web components",
  "main": "dist_ts_web/index.js",
  "type": "module",
  "scripts": {
    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
    "watch": "tswatch element",
    "test": "tstest test/ --web --verbose"
  },
  "dependencies": {
    "@design.estate/dees-element": "^2.0.45",
    "highlight.js": "^11.9.0"
  }
}
      </dees-dataview-codebox>
    </div>
  </div>
`});var RV,jd,qmt,FV=v(()=>{Hmt();oe();la();L6();_t();r2();zo();RV=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},jd=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},qmt=(()=>{let t=[Q("dees-dataview-codebox")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D({type:String,reflect:!0})],RV(this,null,n,{kind:"accessor",name:"progLang",static:!1,private:!1,access:{has:b=>"progLang"in b,get:b=>b.progLang,set:(b,y)=>{b.progLang=y}},metadata:f},s,o),RV(this,null,u,{kind:"accessor",name:"codeToDisplay",static:!1,private:!1,access:{has:b=>"codeToDisplay"in b,get:b=>b.codeToDisplay,set:(b,y)=>{b.codeToDisplay=y}},metadata:f},c,d),RV(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=Bmt;static demoGroups=["Data View","Workspace"];#e=jd(this,s,"typescript");get progLang(){return this.#e}set progLang(f){this.#e=f}#t=(jd(this,o),jd(this,c,""));get codeToDisplay(){return this.#t}set codeToDisplay(f){this.#t=f}constructor(){super()}render(){return w`
      ${v1.styles}
      <style>
        :host {
          position: relative;
          display: block;
          text-align: left;
          font-size: 16px;
          font-family: ${Qt};
          height: 100%;
          box-sizing: border-box;
        }
        .mainbox {
          position: relative;
          color: ${p.bdTheme("#09090b","#fafafa")};
          border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
          background: ${p.bdTheme("#ffffff","#09090b")};
          border-radius: 6px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          height: 100%;
          box-sizing: border-box;
        }

        .appbar {
          position: relative;
          color: ${p.bdTheme("#71717a","#a1a1aa")};
          background: ${p.bdTheme("#f9fafb","#18181b")};
          border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
          height: 32px;
          display: flex;
          font-size: 13px;
          line-height: 32px;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
        }

        .appbar .fileName {
          line-height: inherit;
          position: relative;
          flex: 1;
          text-align: center;
        }

        .bottomBar {
          position: relative;
          color: ${p.bdTheme("#71717a","#a1a1aa")};
          background: ${p.bdTheme("#f9fafb","#18181b")};
          border-top: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
          height: 28px;
          font-size: 12px;
          line-height: 28px;
          display: flex;
          justify-content: flex-end;
          align-items: stretch;
          overflow: hidden;
          flex-shrink: 0;
        }

        .spacesLabel {
          padding: 0 16px;
          display: flex;
          align-items: center;
        }

        .languageLabel {
          color: ${p.bdTheme("#3b82f6","#3b82f6")};
          font-size: 12px;
          line-height: 28px;
          background: ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(59, 130, 246, 0.1)")};
          padding: 0px 16px;
          font-weight: 500;
          display: flex;
          align-items: center;
        }

        .hljs-keyword {
          color: ${p.bdTheme("#dc2626","#f87171")};
        }

        .codegrid {
          display: grid;
          grid-template-columns: 50px auto;
          overflow: auto;
          flex: 1;
          min-height: 0;
        }

        .lineNumbers {
          color: ${p.bdTheme("#71717a","#52525b")};
          padding: 24px 16px 0px 0px;
          text-align: right;
          border-right: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        }

        .lineCounter:last-child {
          opacity: 50%;
        }

        pre {
          overflow-x: auto;
          margin: 0px;
          padding: 24px 24px;
        }

        code {
          font-weight: 400;
          padding: 0px;
          margin: 0px;
        }

        code,
        code *,
        .lineNumbers {
          line-height: 1.4em;
          font-weight: 200;
          font-family: ${el};
        }

        .hljs-string {
          color: ${p.bdTheme("#059669","#10b981")};
        }

        .hljs-built_in {
          color: ${p.bdTheme("#8b5cf6","#a78bfa")};
        }

        .hljs-function {
          color: ${p.bdTheme("#3b82f6","#60a5fa")};
        }

        .hljs-params {
          color: ${p.bdTheme("#0891b2","#06b6d4")};
        }

        .hljs-comment {
          color: ${p.bdTheme("#71717a","#71717a")};
        }

        .hljs-number {
          color: ${p.bdTheme("#ea580c","#fb923c")};
        }

        .hljs-literal {
          color: ${p.bdTheme("#dc2626","#f87171")};
        }

        .hljs-attr {
          color: ${p.bdTheme("#8b5cf6","#a78bfa")};
        }

        .hljs-variable {
          color: ${p.bdTheme("#09090b","#fafafa")};
        }
      </style>
      <div
        class="mainbox"
        @contextmenu="${f=>{jt.openContextMenuWithOptions(f,[{name:"About",iconName:"circleInfo",action:async()=>null}])}}"
      >
        <div class="appbar">
          <div class="fileName">index.ts</div>
        </div>
        <div class="codegrid">
          <div class="lineNumbers">
            ${(()=>{let f=0;return this.codeToDisplay.split(`
`).map(b=>(f++,w`<div class="lineCounter">${f}</div>`))})()}
          </div>
          <pre><code></code></pre>
        </div>
        <div class="bottomBar">
          <div class="spacesLabel">Spaces: 2</div>
          <div class="languageLabel">${this.progLang}</div>
        </div>
      </div>
    `}codeToDisplayStore=(jd(this,d),"");highlightJs=null;async updated(f){super.updated(f),console.log("highlighting now"),console.log(this.childNodes);let b=[];this.childNodes.forEach(h=>{h.nodeName==="#text"&&b.push(h)}),this.codeToDisplay&&this.codeToDisplay!==this.codeToDisplayStore&&(this.codeToDisplayStore=d0.normalize(this.codeToDisplay).trimStart()),b[0]&&b[0].wholeText&&!this.codeToDisplay&&(this.codeToDisplayStore=d0.normalize(b[0].wholeText).trimStart(),this.codeToDisplay=this.codeToDisplayStore),await Mt.smartdelay.delayFor(0),this.highlightJs||(this.highlightJs=await C2.getInstance().loadHighlightJs());let y=this.shadowRoot.querySelector("code"),g=this.highlightJs.highlight(this.codeToDisplayStore,{language:this.progLang,ignoreIllegals:!0});y.innerHTML=g.value}static{jd(i,a)}};return l=i})()});var Vmt=v(()=>{FV()});var jmt,Umt=v(()=>{oe();ji();jmt=()=>w` <style>
    .demo {
      background: ${p.bdTheme("#f5f5f5","#0a0a0a")};
      display: block;
      content: '';
      padding: 40px;
    }
    
    .demo-grid {
      display: grid;
      gap: 24px;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .demo-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      margin-bottom: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    
    .demo-note {
      font-size: 12px;
      color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      margin-bottom: 24px;
      text-align: center;
      font-style: italic;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
  </style>
  <div class="demo">
    <div class="demo-note">
      Right-click on any detail row to copy the value, key, or key:value combination
    </div>
    <div class="demo-grid">
      <div class="demo-section">
        <div class="demo-title">Service Health Status</div>
        <dees-dataview-statusobject
          .statusObject=${{id:"1",name:"API Gateway Service",combinedStatus:"ok",combinedStatusText:"All systems operational",details:[{name:"Response Time",value:"45ms (avg)",status:"ok",statusText:"Within normal range"},{name:"Uptime",value:"99.99% (30 days)",status:"ok",statusText:"Excellent uptime"},{name:"Active Connections",value:"1,234 / 10,000",status:"ok",statusText:"Normal load"},{name:"SSL Certificate",value:"Valid until 2024-12-31",status:"ok",statusText:"Certificate valid"}]}}
        >
        </dees-dataview-statusobject>
      </div>
      
      <div class="demo-section">
        <div class="demo-title">Database Cluster Status</div>
        <dees-dataview-statusobject
          .statusObject=${{id:"2",name:"PostgreSQL Cluster",combinedStatus:"partly_ok",combinedStatusText:"Minor issues detected",details:[{name:"Primary Node",value:"db-primary-01 (healthy)",status:"ok",statusText:"Operating normally"},{name:"Replica Lag",value:"2.5 seconds",status:"partly_ok",statusText:"Slightly elevated"},{name:"Disk Usage",value:"78% (312GB / 400GB)",status:"partly_ok",statusText:"Approaching threshold"},{name:"Connection Pool",value:"89 / 100 connections",status:"ok",statusText:"Within limits"}]}}
        >
        </dees-dataview-statusobject>
      </div>
      
      <div class="demo-section">
        <div class="demo-title">Build Pipeline Status</div>
        <dees-dataview-statusobject
          .statusObject=${{id:"3",name:"CI/CD Pipeline",combinedStatus:"not_ok",combinedStatusText:"Build failure",details:[{name:"Last Build",value:"Build #1234 - Failed",status:"not_ok",statusText:"Test failures"},{name:"Failed Tests",value:"3 tests failed: auth.spec.ts, user.spec.ts, api.spec.ts",status:"not_ok",statusText:"Unit test failures"},{name:"Code Coverage",value:"82.5% (target: 85%)",status:"partly_ok",statusText:"Below target"},{name:"Build Duration",value:"12m 34s",status:"ok",statusText:"Normal duration"}]}}
        >
        </dees-dataview-statusobject>
      </div>
    </div>
  </div>`});var Wmt,OV,Gmt,Ymt=v(()=>{xi();i2();Umt();oe();ji();r2();He();Wmt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},OV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Gmt=(()=>{let t=[Q("dees-dataview-statusobject")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],Wmt(this,null,n,{kind:"accessor",name:"statusObject",static:!1,private:!1,access:{has:d=>"statusObject"in d,get:d=>d.statusObject,set:(d,l)=>{d.statusObject=l}},metadata:c},s,o),Wmt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=jmt;static demoGroups=["Data View"];#e=OV(this,s,void 0);get statusObject(){return this.#e}set statusObject(c){this.#e=c}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .mainbox {
        border-radius: 8px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
        min-height: 48px;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        cursor: default;
        overflow: hidden;
      }

      .heading {
        display: grid;
        align-items: center;
        grid-template-columns: 48px auto 100px;
        height: 56px;
        padding: 0 16px;
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      h1 {
        display: block;
        margin: 0px;
        padding: 0px 12px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .statusdot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
        margin: auto;
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(0 0% 63.9% / 0.2)","hsl(0 0% 45.1% / 0.2)")};
        transition: all 0.2s ease;
      }

      .copyMain {
        font-size: 12px;
        font-weight: 500;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 14.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        text-align: center;
        padding: 6px 12px;
        border-radius: 6px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        user-select: none;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .copyMain:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .copyMain:active {
        background: ${p.bdTheme("hsl(0 0% 91%)","hsl(0 0% 14.9%)")};
        transform: scale(0.98);
      }

      .statusdot.ok {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(142.1 76.2% 36.3% / 0.2)","hsl(142.1 70.6% 45.3% / 0.2)")};
      }

      .statusdot.not_ok {
        background: ${p.bdTheme("hsl(0 84.2% 60.2%)","hsl(0 72.2% 50.6%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(0 84.2% 60.2% / 0.2)","hsl(0 72.2% 50.6% / 0.2)")};
      }

      .statusdot.partly_ok {
        background: ${p.bdTheme("hsl(25 95% 53%)","hsl(25 95% 63%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(25 95% 53% / 0.2)","hsl(25 95% 63% / 0.2)")};
      }

      .detail {
        min-height: 60px;
        align-items: center;
        display: grid;
        grid-template-columns: 48px auto;
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 94%)","hsl(0 0% 14.9%)")};
        transition: background-color 0.15s ease;
        padding-right: 16px;
        cursor: context-menu;
      }

      .detail:hover {
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 7%)")};
      }

      .detail:active {
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 9%)")};
      }

      .detail .detailsText {
        padding: 12px;
        word-break: break-all;
      }

      .detail .detailsText .label {
        font-size: 12px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")}
        margin-bottom: 2px;
        letter-spacing: -0.01em;
      }

      .detail .detailsText .value {
        font-size: 14px;
        font-family: 'Intel One Mono', 'Geist Mono', monospace;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
        line-height: 1.5;
      }
    `];render(){return w`
      <div class="mainbox">
        <div class="heading">
          <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
          <h1>${this.statusObject?.name||"No status object assigned"}</h1>
          <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
        </div>
        ${this.statusObject?.details?.map(c=>w`
            <div 
              class="detail"
              @contextmenu=${d=>{d.preventDefault(),jt.openContextMenuWithOptions(d,[{name:"Copy Value",iconName:"lucide:copy",action:async()=>{await this.copyToClipboard(c.value,"Value")}},{name:"Copy Key",iconName:"lucide:key",action:async()=>{await this.copyToClipboard(c.name,"Key")}},{name:"Copy Key:Value",iconName:"lucide:copy-plus",action:async()=>{await this.copyToClipboard(`${c.name}: ${c.value}`,"Key:Value")}}])}}
            >
              <div class="statusdot ${c.status}"></div>
              <div class="detailsText">
                <div class="label">${c.name}</div>
                <div class="value">${c.value}</div>
              </div>
            </div>
          `)}
      </div>
    `}async firstUpdated(){}async copyToClipboard(c,d="Text"){try{await navigator.clipboard.writeText(c),console.log(`${d} copied to clipboard`)}catch(l){console.error(`Failed to copy ${d}:`,l)}}async handleCopyAsJson(){if(this.statusObject)try{await navigator.clipboard.writeText(JSON.stringify(this.statusObject,null,2));let c=this.shadowRoot.querySelector(".copyMain"),d=c.textContent;c.textContent="Copied!";let l=!this.goBright;c.style.background=l?"hsl(142.1 70.6% 45.3% / 0.1)":"hsl(142.1 76.2% 36.3% / 0.1)",c.style.borderColor=l?"hsl(142.1 70.6% 45.3%)":"hsl(142.1 76.2% 36.3%)",c.style.color=l?"hsl(142.1 70.6% 45.3%)":"hsl(142.1 76.2% 36.3%)",setTimeout(()=>{c.textContent=d,c.style.background="",c.style.borderColor="",c.style.color=""},1500)}catch(c){console.error("Failed to copy:",c)}}constructor(){super(...arguments),OV(this,o)}static{OV(i,a)}};return u=i})()});var Zmt=v(()=>{Ymt()});var Xmt=v(()=>{zw()});var Kmt=v(()=>{Vmt();Zmt();CV();Xmt()});var Ud,Us,Qmt,Cw=v(()=>{oe();He();At();Ud=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Us=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Qmt=(()=>{let t=[Q("dees-actionbar")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],y=[J()],Ud(this,null,n,{kind:"accessor",name:"currentBar",static:!1,private:!1,access:{has:S=>"currentBar"in S,get:S=>S.currentBar,set:(S,N)=>{S.currentBar=N}},metadata:M},s,o),Ud(this,null,u,{kind:"accessor",name:"timeRemaining",static:!1,private:!1,access:{has:S=>"timeRemaining"in S,get:S=>S.timeRemaining,set:(S,N)=>{S.timeRemaining=N}},metadata:M},c,d),Ud(this,null,l,{kind:"accessor",name:"progressPercent",static:!1,private:!1,access:{has:S=>"progressPercent"in S,get:S=>S.progressPercent,set:(S,N)=>{S.progressPercent=N}},metadata:M},f,b),Ud(this,null,y,{kind:"accessor",name:"isVisible",static:!1,private:!1,access:{has:S=>"isVisible"in S,get:S=>S.isVisible,set:(S,N)=>{S.isVisible=N}},metadata:M},g,h),Ud(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demoGroups=["Feedback","Overlay"];static demo=()=>{let M=k=>k.currentTarget.closest(".demo-container")?.querySelector("dees-actionbar");return w`
      <style>
        .demo-container {
          display: flex;
          flex-direction: column;
          height: 300px;
          border: 1px solid #333;
          border-radius: 8px;
          overflow: hidden;
        }
        .demo-content {
          flex: 1;
          padding: 16px;
          display: flex;
          gap: 8px;
          align-items: flex-start;
        }
      </style>
      <div class="demo-container">
        <div class="demo-content">
          <dees-button @click=${async k=>{let I=M(k);if(!I)return;let L=await I.show({message:"File changed externally. Reload?",type:"warning",icon:"lucide:alertTriangle",actions:[{id:"reload",label:"Reload",primary:!0},{id:"ignore",label:"Ignore"}],timeout:{duration:5e3,defaultActionId:"reload"},dismissible:!0});console.log("Action bar result:",L)}}>Warning</dees-button>
          <dees-button @click=${async k=>{let I=M(k);if(!I)return;let L=await I.show({message:"Process failed with exit code 1",type:"error",icon:"lucide:xCircle",actions:[{id:"retry",label:"Retry",primary:!0},{id:"dismiss",label:"Dismiss"}],timeout:{duration:1e4,defaultActionId:"dismiss"}});console.log("Error bar result:",L)}}>Error</dees-button>
          <dees-button @click=${async k=>{let I=M(k);if(!I)return;let L=await I.show({message:"Save changes before closing?",type:"question",icon:"lucide:helpCircle",actions:[{id:"save",label:"Save",primary:!0},{id:"discard",label:"Discard"},{id:"cancel",label:"Cancel"}]});console.log("Question bar result:",L)}}>Question</dees-button>
        </div>
        <dees-actionbar></dees-actionbar>
      </div>
    `};queue=[];#e=Us(this,s,null);get currentBar(){return this.#e}set currentBar(M){this.#e=M}#t=(Us(this,o),Us(this,c,0));get timeRemaining(){return this.#t}set timeRemaining(M){this.#t=M}#a=(Us(this,d),Us(this,f,100));get progressPercent(){return this.#a}set progressPercent(M){this.#a=M}#i=(Us(this,b),Us(this,g,!1));get isVisible(){return this.#i}set isVisible(M){this.#i=M}timeoutInterval=(Us(this,h),null);currentResolve=null;static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
      }

      .actionbar-item {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.2s ease-out;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 12%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 20%)")};
      }

      :host(.visible) .actionbar-item {
        grid-template-rows: 1fr;
      }

      .actionbar-content {
        overflow: hidden;
        min-height: 0;
        opacity: 0;
        transition: opacity 0.2s ease-out;
      }

      :host(.visible) .actionbar-content {
        opacity: 1;
      }

      .progress-bar {
        height: 3px;
        background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 18%)")};
        overflow: hidden;
      }

      .progress-bar-fill {
        height: 100%;
        background: ${p.bdTheme("hsl(210 100% 50%)","hsl(210 100% 60%)")};
        transition: width 0.1s linear;
      }

      .progress-bar-fill.warning {
        background: ${p.bdTheme("hsl(38 92% 50%)","hsl(38 92% 55%)")};
      }

      .progress-bar-fill.error {
        background: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 55%)")};
      }

      .progress-bar-fill.question {
        background: ${p.bdTheme("hsl(270 70% 50%)","hsl(270 70% 60%)")};
      }

      .content {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        gap: 12px;
        min-height: 32px;
      }

      .message-section {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
      }

      .message-icon {
        flex-shrink: 0;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .message-icon.info {
        color: ${p.bdTheme("hsl(210 100% 45%)","hsl(210 100% 60%)")};
      }

      .message-icon.warning {
        color: ${p.bdTheme("hsl(38 92% 45%)","hsl(38 92% 55%)")};
      }

      .message-icon.error {
        color: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 55%)")};
      }

      .message-icon.question {
        color: ${p.bdTheme("hsl(270 70% 50%)","hsl(270 70% 60%)")};
      }

      .message-text {
        font-size: 13px;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 85%)")};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .actions-section {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .action-button {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.15s ease;
        white-space: nowrap;
      }

      .action-button.secondary {
        background: transparent;
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 70%)")};
        border-color: ${p.bdTheme("hsl(0 0% 80%)","hsl(0 0% 30%)")};
      }

      .action-button.secondary:hover {
        background: ${p.bdTheme("hsl(0 0% 92%)","hsl(0 0% 18%)")};
      }

      .action-button.primary {
        background: ${p.bdTheme("hsl(210 100% 50%)","hsl(210 100% 55%)")};
        color: white;
      }

      .action-button.primary:hover {
        background: ${p.bdTheme("hsl(210 100% 45%)","hsl(210 100% 50%)")};
      }

      .action-button.primary.warning {
        background: ${p.bdTheme("hsl(38 92% 45%)","hsl(38 92% 50%)")};
      }

      .action-button.primary.warning:hover {
        background: ${p.bdTheme("hsl(38 92% 40%)","hsl(38 92% 45%)")};
      }

      .action-button.primary.error {
        background: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 55%)")};
      }

      .action-button.primary.error:hover {
        background: ${p.bdTheme("hsl(0 70% 45%)","hsl(0 70% 50%)")};
      }

      .action-button.primary.question {
        background: ${p.bdTheme("hsl(270 70% 50%)","hsl(270 70% 55%)")};
      }

      .action-button.primary.question:hover {
        background: ${p.bdTheme("hsl(270 70% 45%)","hsl(270 70% 50%)")};
      }

      .countdown {
        font-size: 11px;
        opacity: 0.8;
        margin-left: 2px;
      }

      .dismiss-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 50%)")};
        transition: all 0.15s ease;
      }

      .dismiss-button:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 22%)")};
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 70%)")};
      }
    `];render(){let M=this.currentBar,S=M?.type||"info",N=M?.timeout&&this.timeRemaining>0;return w`
      <div class="actionbar-item">
        <div class="actionbar-content">
          ${M?w`
            ${N?w`
              <div class="progress-bar">
                <div
                  class="progress-bar-fill ${S}"
                  style="width: ${this.progressPercent}%"
                ></div>
              </div>
            `:""}
            <div class="content">
              <div class="message-section">
                ${M.icon?w`
                  <dees-icon
                    class="message-icon ${S}"
                    .icon=${M.icon}
                    iconSize="16"
                  ></dees-icon>
                `:""}
                <span class="message-text">${M.message}</span>
              </div>
              <div class="actions-section">
                ${M.actions.map(_=>this.renderActionButton(_,M,N))}
                ${M.dismissible?w`
                  <div
                    class="dismiss-button"
                    @click=${()=>this.handleDismiss()}
                    title="Dismiss"
                  >
                    <dees-icon .icon=${"lucide:x"} iconSize="14"></dees-icon>
                  </div>
                `:""}
              </div>
            </div>
          `:""}
        </div>
      </div>
    `}renderActionButton(M,S,N){let _=M.primary,k=S.type||"info",I=S.timeout?.defaultActionId===M.id,L=N&&I,A=Math.ceil(this.timeRemaining/1e3);return w`
      <button
        class="action-button ${_?`primary ${k}`:"secondary"}"
        @click=${()=>this.handleAction(M.id,!1)}
      >
        ${M.icon?w`
          <dees-icon .icon=${M.icon} iconSize="12"></dees-icon>
        `:""}
        <span>${M.label}</span>
        ${L?w`
          <span class="countdown">(${A}s)</span>
        `:""}
      </button>
    `}async show(M){return new Promise(S=>{this.queue.push({options:M,resolve:S}),this.currentBar||this.processQueue()})}dismiss(){this.handleDismiss()}clearQueue(){for(let M of this.queue)M.resolve({actionId:"dismissed",timedOut:!1});this.queue=[]}async hideCurrentBar(){this.classList.remove("visible"),this.isVisible=!1,await new Promise(M=>setTimeout(M,220)),this.currentBar=null,this.currentResolve=null}async processQueue(){if(this.queue.length===0){this.hideCurrentBar();return}let M=this.queue.shift();this.currentBar=M.options,this.currentResolve=M.resolve,this.isVisible=!0,await this.updateComplete,requestAnimationFrame(()=>{this.classList.add("visible")}),M.options.timeout&&this.startTimeout(M.options.timeout.duration,M.options.timeout.defaultActionId)}startTimeout(M,S){this.timeRemaining=M,this.progressPercent=100;let N=Date.now(),_=50;this.timeoutInterval=setInterval(()=>{let k=Date.now()-N;this.timeRemaining=Math.max(0,M-k),this.progressPercent=this.timeRemaining/M*100,this.timeRemaining<=0&&(this.clearTimeoutInterval(),this.handleAction(S,!0))},_)}clearTimeoutInterval(){this.timeoutInterval&&(clearInterval(this.timeoutInterval),this.timeoutInterval=null)}handleAction(M,S){this.clearTimeoutInterval(),this.currentResolve&&this.currentResolve({actionId:M,timedOut:S}),this.processQueue()}handleDismiss(){this.handleAction("dismissed",!1)}async disconnectedCallback(){await super.disconnectedCallback(),this.clearTimeoutInterval()}static{Us(i,a)}};return x=i})()});var Jmt=v(()=>{});var egt=v(()=>{Cw();Jmt()});var tgt,agt=v(()=>{oe();tgt=()=>w`
  <div style="display: flex; gap: 8px; align-items: center;">
    <dees-badge .text=${"Default"}></dees-badge>
    <dees-badge .type=${"primary"} .text=${"Primary"}></dees-badge>
    <dees-badge .type=${"success"} .text=${"Success"}></dees-badge>
    <dees-badge .type=${"warning"} .text=${"Warning"}></dees-badge>
    <dees-badge .type=${"error"} .text=${"Error"}></dees-badge>
    <dees-badge .type=${"primary"} .rounded=${!0} .text=${"Rounded"}></dees-badge>
  </div>
`});var _w,ml,igt,rgt=v(()=>{oe();_t();agt();He();_w=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ml=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},igt=(()=>{let t=[Q("dees-badge")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:Boolean})],_w(this,null,n,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:h=>"type"in h,get:h=>h.type,set:(h,x)=>{h.type=x}},metadata:g},s,o),_w(this,null,u,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:h=>"text"in h,get:h=>h.text,set:(h,x)=>{h.text=x}},metadata:g},c,d),_w(this,null,l,{kind:"accessor",name:"rounded",static:!1,private:!1,access:{has:h=>"rounded"in h,get:h=>h.rounded,set:(h,x)=>{h.rounded=x}},metadata:g},f,b),_w(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=tgt;static demoGroups=["Feedback"];#e=ml(this,s,"default");get type(){return this.#e}set type(g){this.#e=g}#t=(ml(this,o),ml(this,c,""));get text(){return this.#t}set text(g){this.#t=g}#a=(ml(this,d),ml(this,f,!1));get rounded(){return this.#a}set rounded(g){this.#a=g}constructor(){super(),ml(this,b),v1.setup()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: inline-block;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        border-radius: 4px;
        white-space: nowrap;
      }

      .badge.rounded {
        border-radius: 12px;
      }

      .badge.default {
        background: ${p.bdTheme("#f5f5f5","#333")};
        color: ${p.bdTheme("#666","#ccc")};
      }

      .badge.primary {
        background: #0050b9;
        color: #ffffff;
      }

      .badge.success {
        background: #2e7d32;
        color: #ffffff;
      }

      .badge.warning {
        background: #ed6c02;
        color: #ffffff;
      }

      .badge.error {
        background: #e4002b;
        color: #ffffff;
      }
    `];render(){return w`
      <div class="badge ${this.type} ${this.rounded?"rounded":""}">
        ${this.text}
      </div>
    `}static{ml(i,a)}};return y=i})()});var sgt=v(()=>{rgt()});var ngt,ogt=v(()=>{oe();ngt=()=>w`
  <dees-hint></dees-hint>
`});var lgt,BV,cgt,dgt=v(()=>{oe();_t();ogt();He();lgt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},BV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},cgt=(()=>{let t=[Q("dees-hint")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],lgt(this,null,n,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:d=>"type"in d,get:d=>d.type,set:(d,l)=>{d.type=l}},metadata:c},s,o),lgt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=ngt;static demoGroups=["Feedback"];#e=BV(this,s,"info");get type(){return this.#e}set type(c){this.#e=c}constructor(){super(),BV(this,o),v1.setup()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
    `];render(){return w` <div class="mainbox"></div> `}static{BV(i,a)}};return u=i})()});var pgt=v(()=>{dgt()});var ugt,hgt=v(()=>{oe();HV();ugt=()=>w`
    <dees-progressbar
      .percentage=${50}
    ></dees-progressbar>
  `});var fgt,qV,mgt,HV=v(()=>{i2();xi();hgt();oe();_t();He();fgt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},qV=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},mgt=(()=>{let t=[Q("dees-progressbar")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],fgt(this,null,n,{kind:"accessor",name:"percentage",static:!1,private:!1,access:{has:d=>"percentage"in d,get:d=>d.percentage,set:(d,l)=>{d.percentage=l}},metadata:c},s,o),fgt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=ugt;static demoGroups=["Feedback"];#e=qV(this,s,0);get percentage(){return this.#e}set percentage(c){this.#e=c}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme(al.text,yi.text)};
      }
      .progressBarContainer {
        padding: 8px;
        min-width: 200px;
      }

      .progressBar {
        background: ${p.bdTheme("#eeeeeb","#444")};
        height: 8px;
        width: 100%;
        border-radius: 4px;
        border-top: 0.5px solid ${p.bdTheme("none","#555")};
      }

      .progressBarFill {
        background: ${p.bdTheme(yi.blueActive,al.blueActive)};
        height: 8px;
        margin-top: -0.5px;
        transition: 0.2s width;
        border-radius: 4px;
        width: 0px;
        border-top: 0.5 solid ${p.bdTheme("none","#398fff")};
      }

      .progressText {
        padding: 8px;
        text-align: center;
      }
    `];render(){return w`
      <div class="progressBarContainer">
        <div class="progressBar">
          <div class="progressBarFill"></div>
          <div class="progressText">
            ${this.percentage}%
          <div>
        </div>
      </div>
    `}firstUpdated(c){super.firstUpdated(c),this.updateComplete.then(()=>{this.updatePercentage()})}async updatePercentage(){let c=this.shadowRoot.querySelector(".progressBarFill");c.style.width=`${this.percentage}%`}updated(){this.updatePercentage()}constructor(){super(...arguments),qV(this,o)}static{qV(i,a)}};return u=i})()});var ggt=v(()=>{HV()});var Tw,gl,bgt,vgt=v(()=>{oe();_t();He();Tw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},gl=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},bgt=(()=>{let t=[Q("dees-spinner")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],u=[D({type:String})],l=[D()],Tw(this,null,n,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:h=>"size"in h,get:h=>h.size,set:(h,x)=>{h.size=x}},metadata:g},s,o),Tw(this,null,u,{kind:"accessor",name:"bnw",static:!1,private:!1,access:{has:h=>"bnw"in h,get:h=>h.bnw,set:(h,x)=>{h.bnw=x}},metadata:g},c,d),Tw(this,null,l,{kind:"accessor",name:"status",static:!1,private:!1,access:{has:h=>"status"in h,get:h=>h.status,set:(h,x)=>{h.status=x}},metadata:g},f,b),Tw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demoGroups=["Feedback"];static demo=()=>w`
    <dees-spinner></dees-spinner>
    <dees-spinner status="success"></dees-spinner>
    <dees-spinner status="error"></dees-spinner>
    <dees-spinner size=${64} status="success"></dees-spinner>
    <dees-spinner .size=${64} status="error"></dees-spinner>
  `;#e=gl(this,s,20);get size(){return this.#e}set size(g){this.#e=g}#t=(gl(this,o),gl(this,c,!1));get bnw(){return this.#t}set bnw(g){this.#t=g}#a=(gl(this,d),gl(this,f,"normal"));get status(){return this.#a}set status(g){this.#a=g}constructor(){super(),gl(this,b)}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
      }

      #loading {
        position: relative;
        transition: none;
        display: flex;
        justify-content: center;
        align-content: center;
        background: #8bc34a00;
        border: 3px solid ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.3)")};
        border-radius: 50%;
        border-top-color: ${p.bdTheme("#333","#fff")};
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
      }

      #loading.success {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      #loading.error {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }

      dees-icon {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    `];render(){return w`
      <style>
        #loading {
          width: ${this.size}px;
          height: ${this.size}px;
        }
        #loading.success {
          color: ${p.bdTheme(this.bnw?"#333":"#8bc34a",this.bnw?"#fff":"#8bc34a")};
          
        }
        #loading.error {
          color: ${p.bdTheme(this.bnw?"#333":"#e64a19",this.bnw?"#fff":"#e64a19")};
        }
        dees-icon {
          font-size: ${this.size}px;
        }
      </style>
      <div class="${this.status}" id="loading">
        ${(()=>{if(this.status==="success")return w`<dees-icon style="transform: translateX(1%) translateY(3%);" .icon=${"fa:circle-check"}></dees-icon>`;if(this.status==="error")return w`<dees-icon .icon=${"fa:circle-xmark"}></dees-icon>`})()}
      </div>
    `}static{gl(i,a)}};return y=i})()});var ygt=v(()=>{vgt()});var xgt,wgt=v(()=>{oe();VV();vo();xgt=()=>w`
    <style>
      .demo-container {
        padding: 32px;
        min-height: 100vh;
        background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      }

      .demo-section {
        margin-bottom: 48px;
      }

      .demo-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${p.bdTheme("#333","#fff")};
      }

      .demo-description {
        font-size: 14px;
        color: ${p.bdTheme("#666","#aaa")};
        margin-bottom: 24px;
      }

      .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
      }

      .theme-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 100;
      }
    </style>

    <div class="demo-container">
      <dees-button class="theme-toggle" @clicked=${()=>{document.body.classList.toggle("bright")}}>Toggle Theme</dees-button>

      <div class="demo-section">
        <h2 class="demo-title">Toast Types</h2>
        <p class="demo-description">
          Different toast types for various notification scenarios. Click any button to show a toast.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${()=>{Ot.info("This is an informational message")}}>Info Toast</dees-button>
          
          <dees-button type="highlighted" @clicked=${()=>{Ot.success("Operation completed successfully!")}}>Success Toast</dees-button>
          
          <dees-button @clicked=${()=>{Ot.warning("Please review before proceeding")}}>Warning Toast</dees-button>
          
          <dees-button @clicked=${()=>{Ot.error("An error occurred while processing")}}>Error Toast</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Toast Positions</h2>
        <p class="demo-description">
          Toasts can appear in different positions on the screen.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${()=>{Ot.show({message:"Top Right Position",type:"info",position:"top-right"})}}>Top Right</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Top Left Position",type:"info",position:"top-left"})}}>Top Left</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Bottom Right Position",type:"info",position:"bottom-right"})}}>Bottom Right</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Bottom Left Position",type:"info",position:"bottom-left"})}}>Bottom Left</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Top Center Position",type:"info",position:"top-center"})}}>Top Center</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Bottom Center Position",type:"info",position:"bottom-center"})}}>Bottom Center</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Duration Options</h2>
        <p class="demo-description">
          Control how long toasts stay visible. Duration in milliseconds.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${()=>{Ot.show({message:"Quick toast (1 second)",type:"info",duration:1e3})}}>1 Second</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Standard toast (3 seconds)",type:"info",duration:3e3})}}>3 Seconds (Default)</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Long toast (5 seconds)",type:"info",duration:5e3})}}>5 Seconds</dees-button>
          
          <dees-button @clicked=${()=>{Ot.show({message:"Manual dismiss only (click to close)",type:"warning",duration:0})}}>No Auto-Dismiss</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Multiple Toasts</h2>
        <p class="demo-description">
          Multiple toasts stack automatically. They maintain their order and animate smoothly.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${()=>{Ot.info("First notification"),setTimeout(()=>Ot.success("Second notification"),200),setTimeout(()=>Ot.warning("Third notification"),400),setTimeout(()=>Ot.error("Fourth notification"),600)}}>Show Multiple</dees-button>
          
          <dees-button @clicked=${()=>{for(let t=1;t<=5;t++)setTimeout(()=>{Ot.show({message:`Notification #${t}`,type:t%2===0?"success":"info",duration:2e3+t*500})},t*100)}}>Rapid Fire</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Real-World Examples</h2>
        <p class="demo-description">
          Common use cases for toast notifications in applications.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${async()=>{let t=await Ot.show({message:"Saving changes...",type:"info",duration:0});setTimeout(()=>{t.dismiss(),Ot.success("Changes saved successfully!")},2e3)}}>Save Operation</dees-button>
          
          <dees-button @clicked=${()=>{Ot.error("Failed to connect to server. Please check your internet connection.")}}>Network Error</dees-button>
          
          <dees-button @clicked=${()=>{Ot.warning("Your session will expire in 5 minutes")}}>Session Warning</dees-button>
          
          <dees-button @clicked=${()=>{Ot.success("File uploaded successfully!")}}>Upload Complete</dees-button>
        </div>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Programmatic Control</h2>
        <p class="demo-description">
          Advanced control over toast behavior.
        </p>
        <div class="button-grid">
          <dees-button @clicked=${async()=>{let t=await Ot.show({message:"This toast can be dismissed programmatically",type:"info",duration:0});setTimeout(()=>{t.dismiss(),Ot.success("Toast dismissed after 2 seconds")},2e3)}}>Programmatic Dismiss</dees-button>
          
          <dees-button @clicked=${()=>{Ot.info("Info message",2e3),setTimeout(()=>Ot.success("Success message",2e3),500),setTimeout(()=>Ot.warning("Warning message",2e3),1e3),setTimeout(()=>Ot.error("Error message",2e3),1500)}}>Convenience Methods</dees-button>
        </div>
      </div>
    </div>
  `});var Wd,Ws,Ot,VV=v(()=>{oe();_t();bi();wgt();la();He();Wd=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ws=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Ot=(()=>{let t=[Q("dees-toast")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:Number})],y=[D({type:Boolean,reflect:!0})],Wd(this,null,n,{kind:"accessor",name:"message",static:!1,private:!1,access:{has:S=>"message"in S,get:S=>S.message,set:(S,N)=>{S.message=N}},metadata:M},s,o),Wd(this,null,u,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:S=>"type"in S,get:S=>S.type,set:(S,N)=>{S.type=N}},metadata:M},c,d),Wd(this,null,l,{kind:"accessor",name:"duration",static:!1,private:!1,access:{has:S=>"duration"in S,get:S=>S.duration,set:(S,N)=>{S.duration=N}},metadata:M},f,b),Wd(this,null,y,{kind:"accessor",name:"isVisible",static:!1,private:!1,access:{has:S=>"isVisible"in S,get:S=>S.isVisible,set:(S,N)=>{S.isVisible=N}},metadata:M},g,h),Wd(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=xgt;static demoGroups=["Feedback","Overlay"];static toastContainers=new Map;static getOrCreateContainer(M){if(!this.toastContainers.has(M)){let S=document.createElement("div");switch(S.className=`toast-container toast-container-${M}`,S.style.cssText=`
        position: fixed;
        z-index: ${a2.overlay.toast};
        pointer-events: none;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      `,M){case"top-right":S.style.top="0",S.style.right="0";break;case"top-left":S.style.top="0",S.style.left="0";break;case"bottom-right":S.style.bottom="0",S.style.right="0";break;case"bottom-left":S.style.bottom="0",S.style.left="0";break;case"top-center":S.style.top="0",S.style.left="50%",S.style.transform="translateX(-50%)";break;case"bottom-center":S.style.bottom="0",S.style.left="50%",S.style.transform="translateX(-50%)";break}document.body.appendChild(S),this.toastContainers.set(M,S)}return this.toastContainers.get(M)}static async show(M){let S=typeof M=="string"?{message:M}:M,N=new x;return N.message=S.message,N.type=S.type||"info",N.duration=S.duration||3e3,this.getOrCreateContainer(S.position||"top-right").appendChild(N),await N.updateComplete,requestAnimationFrame(()=>{N.isVisible=!0}),N.duration>0&&setTimeout(()=>{N.dismiss()},N.duration),N}static async createAndShow(M){return this.show(M)}static info(M,S){return this.show({message:M,type:"info",duration:S})}static success(M,S){return this.show({message:M,type:"success",duration:S})}static warning(M,S){return this.show({message:M,type:"warning",duration:S})}static error(M,S){return this.show({message:M,type:"error",duration:S})}#e=Ws(this,s,"");get message(){return this.#e}set message(M){this.#e=M}#t=(Ws(this,o),Ws(this,c,"info"));get type(){return this.#t}set type(M){this.#t=M}#a=(Ws(this,d),Ws(this,f,3e3));get duration(){return this.#a}set duration(M){this.#a=M}#i=(Ws(this,b),Ws(this,g,!1));get isVisible(){return this.#i}set isVisible(M){this.#i=M}constructor(){super(),Ws(this,h),v1.setup()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        pointer-events: auto;
        font-family: ${Qt};
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      :host([isvisible]) {
        opacity: 1;
        transform: translateY(0);
      }

      .toast {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 8px;
        background: ${p.bdTheme("#fff","#222")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#333")};
        box-shadow: 0 4px 12px ${p.bdTheme("rgba(0,0,0,0.1)","rgba(0,0,0,0.3)")};
        min-width: 300px;
        max-width: 500px;
        cursor: pointer;
      }

      .toast:hover {
        transform: scale(1.02);
      }

      .icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon svg {
        width: 100%;
        height: 100%;
      }

      .message {
        flex: 1;
        font-size: 14px;
        line-height: 1.5;
        color: ${p.bdTheme("#333","#fff")};
      }

      .close {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        opacity: 0.5;
        cursor: pointer;
        transition: opacity 0.2s;
      }

      .close:hover {
        opacity: 1;
      }

      .close svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
      }

      /* Type-specific styles */
      :host([type="info"]) .icon {
        color: #0084ff;
      }

      :host([type="success"]) .icon {
        color: #22c55e;
      }

      :host([type="warning"]) .icon {
        color: #f59e0b;
      }

      :host([type="error"]) .icon {
        color: #ef4444;
      }

      /* Progress bar */
      .progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: currentColor;
        opacity: 0.2;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
      }

      .progress-bar {
        height: 100%;
        background: currentColor;
        opacity: 0.8;
        transform-origin: left;
        animation: progress linear forwards;
      }

      @keyframes progress {
        from {
          transform: scaleX(1);
        }
        to {
          transform: scaleX(0);
        }
      }
    `];render(){let M={info:w`<svg viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"/>
      </svg>`,success:w`<svg viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
      </svg>`,warning:w`<svg viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
      </svg>`,error:w`<svg viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
      </svg>`};return w`
      <div class="toast" @click=${this.dismiss}>
        <div class="icon">
          ${M[this.type]}
        </div>
        <div class="message">${this.message}</div>
        <div class="close">
          <svg viewBox="0 0 16 16" fill="currentColor">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
        </div>
        ${this.duration>0?w`
          <div class="progress">
            <div class="progress-bar" style="animation-duration: ${this.duration}ms"></div>
          </div>
        `:""}
      </div>
    `}async dismiss(){this.isVisible=!1,await new Promise(S=>setTimeout(S,300)),this.remove();let M=this.parentElement;if(M&&M.children.length===0){M.remove();for(let[S,N]of x.toastContainers.entries())if(N===M){x.toastContainers.delete(S);break}}}firstUpdated(){this.setAttribute("type",this.type)}static{Ws(i,a)}};return x=i})()});var Mgt=v(()=>{VV()});var kgt=v(()=>{egt();sgt();pgt();ggt();ygt();Mgt()});var zgt=v(()=>{W4()});var Sgt=v(()=>{ll()});var Cgt=v(()=>{zgt();Sgt()});var _gt=v(()=>{_1()});var Tgt=v(()=>{tw()});var Lgt=v(()=>{sV()});var $gt=v(()=>{uw()});var Dgt=v(()=>{bV()});var Agt,Egt=v(()=>{oe();x1();h2();W4();xo();ll();Agt=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
        
        .feature-note {
          margin-top: 12px;
          padding: 12px;
          background: #eff6ff;
          border-left: 3px solid #3b82f6;
          border-radius: 4px;
          font-size: 13px;
          color: #1e40af;
        }
        
        @media (prefers-color-scheme: dark) {
          .feature-note {
            background: #1e3a5f;
            color: #93c5fd;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"1. Basic List Input"} .subtitle=${"Simple list management with add, edit, and delete"}>
        <dees-input-list
          .label=${"Shopping List"}
          .placeholder=${"Add item to your list..."}
          .value=${["Milk","Bread","Eggs","Cheese"]}
          .description=${"Double-click to edit items, or use the edit button"}
        ></dees-input-list>
        <div class="feature-note">
          💡 Double-click any item to quickly edit it inline
        </div>
      </dees-panel>

      <dees-panel .title=${"2. Sortable List"} .subtitle=${"Drag and drop to reorder items"}>
        <dees-input-list
          .label=${"Task Priority"}
          .placeholder=${"Add a task..."}
          .sortable=${!0}
          .value=${["Review pull requests","Fix critical bug","Update documentation","Deploy to production","Team standup meeting"]}
          .description=${"Drag items using the handle to reorder them"}
        ></dees-input-list>
        <div class="feature-note">
          🔄 Drag the grip handle to reorder tasks by priority
        </div>
      </dees-panel>

      <dees-panel .title=${"3. Validation & Constraints"} .subtitle=${"Lists with minimum/maximum items and duplicate prevention"}>
        <div class="grid-layout">
          <dees-input-list
            .label=${"Team Members (Min 2, Max 5)"}
            .placeholder=${"Add team member..."}
            .minItems=${2}
            .maxItems=${5}
            .value=${["Alice","Bob"]}
            .required=${!0}
            .description=${"Add 2-5 team members"}
          ></dees-input-list>
          
          <dees-input-list
            .label=${"Unique Tags (No Duplicates)"}
            .placeholder=${"Add unique tag..."}
            .allowDuplicates=${!1}
            .value=${["frontend","backend","database"]}
            .description=${"Duplicate items are not allowed"}
          ></dees-input-list>
        </div>
      </dees-panel>

      <dees-panel .title=${"4. Delete Confirmation"} .subtitle=${"Require confirmation before deleting items"}>
        <dees-input-list
          .label=${"Important Documents"}
          .placeholder=${"Add document name..."}
          .confirmDelete=${!0}
          .value=${["Contract_2024.pdf","Financial_Report_Q3.xlsx","Project_Proposal.docx","Meeting_Notes.txt"]}
          .description=${"Deletion requires confirmation for safety"}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${"5. Disabled State"} .subtitle=${"Read-only list display"}>
        <dees-input-list
          .label=${"System Defaults"}
          .value=${["Default Setting 1","Default Setting 2","Default Setting 3"]}
          .disabled=${!0}
          .description=${"These items cannot be modified"}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${"6. Form Integration"} .subtitle=${"List input working within a form context"}>
        <dees-form>
          <dees-input-text
            .label=${"Recipe Name"}
            .placeholder=${"My Amazing Recipe"}
            .required=${!0}
            .key=${"name"}
          ></dees-input-text>
          
          <div class="grid-layout">
            <dees-input-list
              .label=${"Ingredients"}
              .placeholder=${"Add ingredient..."}
              .required=${!0}
              .minItems=${3}
              .key=${"ingredients"}
              .sortable=${!0}
              .value=${["2 cups flour","1 cup sugar","3 eggs"]}
              .description=${"Add at least 3 ingredients"}
            ></dees-input-list>
            
            <dees-input-list
              .label=${"Instructions"}
              .placeholder=${"Add instruction step..."}
              .required=${!0}
              .minItems=${2}
              .key=${"instructions"}
              .sortable=${!0}
              .value=${["Preheat oven to 350\xB0F","Mix dry ingredients"]}
              .description=${"Add cooking instructions in order"}
            ></dees-input-list>
          </div>
          
          <dees-input-text
            .label=${"Notes"}
            .inputType=${"textarea"}
            .placeholder=${"Any special notes or tips..."}
            .key=${"notes"}
          ></dees-input-text>
          
          <dees-form-submit .text=${"Save Recipe"}></dees-form-submit>
        </dees-form>
      </dees-panel>

      <dees-panel .title=${"7. Interactive Demo"} .subtitle=${"Build your own feature list and see the data"}>
        <dees-input-list
          id="interactive-list"
          .label=${"Product Features"}
          .placeholder=${"Add a feature..."}
          .sortable=${!0}
          .confirmDelete=${!1}
          .allowDuplicates=${!1}
          .maxItems=${10}
          @change=${t=>{let e=document.querySelector("#list-json");if(e){let a={items:t.detail.value,count:t.detail.value.length,timestamp:new Date().toISOString()};e.textContent=JSON.stringify(a,null,2)}}}
        ></dees-input-list>
        
        <div class="output-preview" id="list-json">
          {
            "items": [],
            "count": 0,
            "timestamp": "${new Date().toISOString()}"
          }
        </div>
        
        <div class="feature-note">
          ✨ Add, edit, remove, and reorder items to see the JSON output update in real-time
        </div>
      </dees-panel>

      <dees-panel .title=${"8. Advanced Configuration"} .subtitle=${"Combine all features for complex use cases"}>
        <dees-input-list
          .label=${"Project Milestones"}
          .placeholder=${"Add milestone..."}
          .value=${["Project Kickoff - Week 1","Requirements Gathering - Week 2-3","Design Phase - Week 4-6","Development Sprint 1 - Week 7-9","Testing & QA - Week 10-11","Deployment - Week 12"]}
          .sortable=${!0}
          .confirmDelete=${!0}
          .allowDuplicates=${!1}
          .minItems=${3}
          .maxItems=${12}
          .required=${!0}
          .description=${"Manage project milestones (3-12 items, sortable, no duplicates)"}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${"9. Empty State"} .subtitle=${"How the component looks with no items"}>
        <dees-input-list
          .label=${"Your Ideas"}
          .placeholder=${"Share your ideas..."}
          .value=${[]}
          .description=${"Start adding items to build your list"}
        ></dees-input-list>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var f2,It,Pgt,Igt=v(()=>{oe();_1();At();vo();Egt();He();f2=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},It=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Pgt=(()=>{let t=[Q("dees-input-list")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[],$e,q=[],R=[],te,me=[],ue=[];var _e=class extends r{static{i=this}static{let he=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:String})],l=[D({type:Number})],y=[D({type:Number})],x=[D({type:Boolean})],N=[D({type:Boolean})],I=[D({type:Boolean})],V=[D({type:String})],E=[J()],H=[J()],ne=[J()],we=[J()],Ce=[J()],F=[J()],K=[J()],$e=[J()],te=[J()],f2(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:ie=>"value"in ie,get:ie=>ie.value,set:(ie,ke)=>{ie.value=ke}},metadata:he},s,o),f2(this,null,u,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:ie=>"placeholder"in ie,get:ie=>ie.placeholder,set:(ie,ke)=>{ie.placeholder=ke}},metadata:he},c,d),f2(this,null,l,{kind:"accessor",name:"maxItems",static:!1,private:!1,access:{has:ie=>"maxItems"in ie,get:ie=>ie.maxItems,set:(ie,ke)=>{ie.maxItems=ke}},metadata:he},f,b),f2(this,null,y,{kind:"accessor",name:"minItems",static:!1,private:!1,access:{has:ie=>"minItems"in ie,get:ie=>ie.minItems,set:(ie,ke)=>{ie.minItems=ke}},metadata:he},g,h),f2(this,null,x,{kind:"accessor",name:"allowDuplicates",static:!1,private:!1,access:{has:ie=>"allowDuplicates"in ie,get:ie=>ie.allowDuplicates,set:(ie,ke)=>{ie.allowDuplicates=ke}},metadata:he},M,S),f2(this,null,N,{kind:"accessor",name:"sortable",static:!1,private:!1,access:{has:ie=>"sortable"in ie,get:ie=>ie.sortable,set:(ie,ke)=>{ie.sortable=ke}},metadata:he},_,k),f2(this,null,I,{kind:"accessor",name:"confirmDelete",static:!1,private:!1,access:{has:ie=>"confirmDelete"in ie,get:ie=>ie.confirmDelete,set:(ie,ke)=>{ie.confirmDelete=ke}},metadata:he},L,A),f2(this,null,V,{kind:"accessor",name:"validationText",static:!1,private:!1,access:{has:ie=>"validationText"in ie,get:ie=>ie.validationText,set:(ie,ke)=>{ie.validationText=ke}},metadata:he},C,z),f2(this,null,E,{kind:"accessor",name:"inputValue",static:!1,private:!1,access:{has:ie=>"inputValue"in ie,get:ie=>ie.inputValue,set:(ie,ke)=>{ie.inputValue=ke}},metadata:he},T,$),f2(this,null,H,{kind:"accessor",name:"editingIndex",static:!1,private:!1,access:{has:ie=>"editingIndex"in ie,get:ie=>ie.editingIndex,set:(ie,ke)=>{ie.editingIndex=ke}},metadata:he},O,G),f2(this,null,ne,{kind:"accessor",name:"editingValue",static:!1,private:!1,access:{has:ie=>"editingValue"in ie,get:ie=>ie.editingValue,set:(ie,ke)=>{ie.editingValue=ke}},metadata:he},U,be),f2(this,null,we,{kind:"accessor",name:"draggedIndex",static:!1,private:!1,access:{has:ie=>"draggedIndex"in ie,get:ie=>ie.draggedIndex,set:(ie,ke)=>{ie.draggedIndex=ke}},metadata:he},j,fe),f2(this,null,Ce,{kind:"accessor",name:"dragOverIndex",static:!1,private:!1,access:{has:ie=>"dragOverIndex"in ie,get:ie=>ie.dragOverIndex,set:(ie,ke)=>{ie.dragOverIndex=ke}},metadata:he},Y,P),f2(this,null,F,{kind
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .input-wrapper {
        width: 100%;
      }

      .list-container {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
      }

      .list-container:hover:not(.disabled) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      .list-container:focus-within {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      .list-container.disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .list-items {
        max-height: 400px;
        overflow-y: auto;
      }

      .list-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden; /* Prevent animation from affecting scroll bounds */
      }

      .list-item:last-of-type {
        border-bottom: none;
      }

      .list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
        background: ${p.bdTheme("hsl(0 0% 97.5%)","hsl(0 0% 6.9%)")};
      }

      /* Dragging item - follows cursor */
      .list-item.dragging {
        position: relative;
        z-index: 100;
        background: ${p.bdTheme("hsl(210 40% 98%)","hsl(215 20.2% 12%)")};
        box-shadow: 0 4px 12px ${p.bdTheme("rgba(0, 0, 0, 0.15)","rgba(0, 0, 0, 0.4)")};
        border-radius: 6px;
        transition: box-shadow 0.15s ease, background 0.15s ease;
      }

      /* Items that need to move up to make space */
      .list-item.move-up {
        transform: translateY(calc(-1 * var(--item-height, 48px)));
      }

      /* Items that need to move down to make space */
      .list-item.move-down {
        transform: translateY(var(--item-height, 48px));
      }


      .drag-handle {
        display: flex;
        align-items: center;
        cursor: move;
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
        transition: color 0.15s ease;
      }

      .drag-handle:hover {
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      }

      .drag-handle dees-icon {
        width: 16px;
        height: 16px;
      }

      .item-content {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
      }

      .item-text {
        flex: 1;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        font-size: 14px;
        line-height: 20px;
        word-break: break-word;
      }

      .item-edit-input {
        flex: 1;
        padding: 4px 8px;
        font-size: 14px;
        font-family: inherit;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        border-radius: 4px;
        outline: none;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .item-actions {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.15s ease;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      }

      .action-button:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .action-button.save {
        color: ${p.bdTheme("hsl(142.1 76.2% 36.3%)","hsl(142.1 70.6% 45.3%)")};
      }

      .action-button.save:hover {
        background: ${p.bdTheme("hsl(142.1 76.2% 36.3% / 0.1)","hsl(142.1 70.6% 45.3% / 0.1)")};
      }

      .action-button.cancel {
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 50.6%)")};
      }

      .action-button.cancel:hover {
        background: ${p.bdTheme("hsl(0 72.2% 50.6% / 0.1)","hsl(0 62.8% 50.6% / 0.1)")};
      }

      .action-button.delete {
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 50.6%)")};
      }

      .action-button.delete:hover {
        background: ${p.bdTheme("hsl(0 72.2% 50.6% / 0.1)","hsl(0 62.8% 50.6% / 0.1)")};
      }

      .action-button dees-icon {
        width: 14px;
        height: 14px;
      }

      .add-item-container {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        background: ${p.bdTheme("hsl(0 0% 97.5%)","hsl(0 0% 6.9%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
      }

      .add-input {
        flex: 1;
        padding: 8px 12px;
        font-size: 14px;
        font-family: inherit;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        outline: none;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        transition: all 0.15s ease;
      }

      .add-input:focus {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      .add-input::placeholder {
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
      }

      .add-input:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      .add-button {
        padding: 8px 16px;
      }

      .empty-state {
        padding: 32px 16px;
        text-align: center;
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
        font-size: 14px;
        font-style: italic;
      }

      .validation-message {
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.5;
      }

      .description {
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.5;
      }

      /* Scrollbar styling */
      .list-items::-webkit-scrollbar {
        width: 8px;
      }

      .list-items::-webkit-scrollbar-track {
        background: transparent;
      }

      .list-items::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 24.9%)")};
        border-radius: 4px;
      }

      .list-items::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 34.9%)")};
      }

      /* Disable transitions during drop to prevent flash */
      .list-items.dropping .list-item {
        transition: none !important;
      }
    `];render(){return w`
      <div class="input-wrapper">
        ${this.label?w`<dees-label .label=${this.label} .required=${this.required}></dees-label>`:""}
        
        <div class="list-container ${this.disabled?"disabled":""}">
          <div class="list-items">
            ${this.value.length>0?this.value.map((he,ie)=>w`
              <div
                class="list-item ${this.draggedIndex===ie?"dragging":""}"
                draggable="${this.sortable&&!this.disabled}"
                @dragstart=${ke=>this.handleDragStart(ke,ie)}
                @dragend=${this.handleDragEnd}
                @dragover=${ke=>this.handleDragOver(ke,ie)}
                @drop=${ke=>this.handleDrop(ke,ie)}
              >
                ${this.sortable&&!this.disabled?w`
                  <div class="drag-handle">
                    <dees-icon .icon=${"lucide:gripVertical"}></dees-icon>
                  </div>
                `:""}
                
                <div class="item-content">
                  ${this.editingIndex===ie?w`
                    <input
                      type="text"
                      class="item-edit-input"
                      .value=${this.editingValue}
                      @input=${ke=>this.editingValue=ke.target.value}
                      @keydown=${ke=>this.handleEditKeyDown(ke,ie)}
                      @blur=${()=>this.saveEdit(ie)}
                    />
                  `:w`
                    <div class="item-text" @dblclick=${()=>!this.disabled&&this.startEdit(ie)}>
                      ${he}
                    </div>
                  `}
                </div>
                
                <div class="item-actions">
                  ${this.editingIndex===ie?w`
                    <button class="action-button save" @click=${()=>this.saveEdit(ie)}>
                      <dees-icon .icon=${"lucide:check"}></dees-icon>
                    </button>
                    <button class="action-button cancel" @click=${()=>this.cancelEdit()}>
                      <dees-icon .icon=${"lucide:x"}></dees-icon>
                    </button>
                  `:w`
                    ${this.disabled?"":w`
                      <button class="action-button" @click=${()=>this.startEdit(ie)}>
                        <dees-icon .icon=${"lucide:pencil"}></dees-icon>
                      </button>
                      <button class="action-button delete" @click=${()=>this.removeItem(ie)}>
                        <dees-icon .icon=${"lucide:trash2"}></dees-icon>
                      </button>
                    `}
                  `}
                </div>
              </div>
            `):w`
              <div class="empty-state">
                No items added yet
              </div>
            `}
          </div>
          
          ${!this.disabled&&(!this.maxItems||this.value.length<this.maxItems)?w`
            <div class="add-item-container">
              <input
                type="text"
                class="add-input"
                .placeholder=${this.placeholder}
                .value=${this.inputValue}
                @input=${this.handleInput}
                @keydown=${this.handleAddKeyDown}
                ?disabled=${this.disabled}
              />
              <dees-button
                class="add-button"
                @click=${this.addItem}
                ?disabled=${!this.inputValue.trim()}
              >
                <dees-icon .icon=${"lucide:plus"}></dees-icon> Add
              </dees-button>
            </div>
          `:""}
        </div>

        ${this.validationText?w`
          <div class="validation-message">${this.validationText}</div>
        `:""}
        
        ${this.description?w`
          <div class="description">${this.description}</div>
        `:""}
      </div>
    `}handleInput(he){this.inputValue=he.target.value}handleAddKeyDown(he){he.key==="Enter"&&this.inputValue.trim()&&(he.preventDefault(),this.addItem())}handleEditKeyDown(he,ie){he.key==="Enter"?(he.preventDefault(),this.saveEdit(ie)):he.key==="Escape"&&(he.preventDefault(),this.cancelEdit())}addItem(){let he=this.inputValue.trim();if(!he)return;if(!this.allowDuplicates&&this.value.includes(he)){this.validationText="This item already exists in the list",setTimeout(()=>this.validationText="",3e3);return}if(this.maxItems&&this.value.length>=this.maxItems){this.validationText=`Maximum ${this.maxItems} items allowed`,setTimeout(()=>this.validationText="",3e3);return}this.value=[...this.value,he],this.inputValue="",this.validationText="";let ie=this.shadowRoot?.querySelector(".add-input");ie&&(ie.value="",ie.focus()),this.emitChange()}startEdit(he){this.editingIndex=he,this.editingValue=this.value[he],this.updateComplete.then(()=>{let ie=this.shadowRoot?.querySelector(".item-edit-input");ie&&(ie.focus(),ie.select())})}saveEdit(he){let ie=this.editingValue.trim();if(!ie){this.cancelEdit();return}if(!this.allowDuplicates&&ie!==this.value[he]&&this.value.includes(ie)){this.validationText="This item already exists in the list",setTimeout(()=>this.validationText="",3e3);return}let ke=[...this.value];ke[he]=ie,this.value=ke,this.editingIndex=-1,this.editingValue="",this.validationText="",this.emitChange()}cancelEdit(){this.editingIndex=-1,this.editingValue=""}async removeItem(he){this.confirmDelete&&!await this.showConfirmDialog(`Delete "${this.value[he]}"?`)||(this.value=this.value.filter((ie,ke)=>ke!==he),this.emitChange())}async showConfirmDialog(he){return confirm(he)}handleDragStart(he,ie){if(!this.sortable||this.disabled)return;this.draggedIndex=ie,this.targetIndex=ie,he.dataTransfer.effectAllowed="move",he.dataTransfer.setData("text/plain",ie.toString());let ke=new Image;ke.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",he.dataTransfer.setDragImage(ke,0,0),this.dragStartY=he.clientY,this.dragCurrentY=he.clientY;let Re=this.shadowRoot?.querySelector(".list-items"),Ue=Array.from(Re?.querySelectorAll(".list-item")||[]);Ue[ie]&&(this.itemHeight=Ue[ie].offsetHeight),this.originalItemRects=Ue.map(xe=>xe.getBoundingClientRect()),Re?.classList.add("is-dragging"),this.boundHandleGlobalDragOver=this.handleGlobalDragOver.bind(this),this.boundHandleGlobalDragEnd=this.handleGlobalDragEnd.bind(this),document.addEventListener("dragover",this.boundHandleGlobalDragOver),document.addEventListener("dragend",this.boundHandleGlobalDragEnd)}handleGlobalDragOver(he){if(he.preventDefault(),this.draggedIndex===-1)return;this.dragCurrentY=he.clientY;let ie=this.shadowRoot?.querySelector(".list-items");if(!ie)return;let ke=Array.from(ie.querySelectorAll(".list-item")),Re=ke[this.draggedIndex];if(!Re)return;let Ue=this.dragCurrentY-this.dragStartY;Re.style.transform=`translateY(${Ue}px)`;let xe=this.originalItemRects[this.draggedIndex];if(!xe)return;let ae=xe.top+xe.height/2+Ue,re=this.draggedIndex;for(let ye=0;ye<ke.length;ye++){if(ye===this.draggedIndex)continue;let Pe=this.originalItemRects[ye];if(!Pe)continue;let qe=Pe.top+Pe.height/2;if(ke[ye].classList.contains("move-up")?qe-=this.itemHeight:ke[ye].classList.contains("move-down")&&(qe+=this.itemHeight),ae<qe&&ye<this.draggedIndex){re=ye;break}else ae>qe&&ye>this.draggedIndex&&(re=ye)}re!==this.targetIndex&&(this.targetIndex=re,this.updateItemPositions(ke))}updateItemPositions(he){let ie=this.draggedIndex,ke=this.targetIndex,Re=this.shadowRoot?.querySelector(".list-items");Re&&Re.style.setProperty("--item-height",`${this.itemHeight}px`),he.forEach((Ue,xe)=>{xe!==ie&&(Ue.classList.remove("move-up","move-down"),Ue.style.setProperty("--item-height",`${this.itemHeight}px`),ie<ke?xe>ie&&xe<=ke&&Ue.classList.add("move-up"):ie>ke&&xe>=ke&&xe<ie&&Ue.classList.add("move-down"))})}handleGlobalDragEnd(){this.boundHandleGlobalDragOver&&(document.removeEventListener("dragover",this.boundHandleGlobalDragOver),this.boundHandleGlobalDragOver=null),this.boundHandleGlobalDragEnd&&(do
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${"1. Basic Rich Text Editor"} .subtitle=${"A full-featured rich text editor with formatting toolbar"}>
        <dees-input-richtext 
          .label=${"Article Content"} 
          .value=${'<h1>Welcome to the Rich Text Editor!</h1><p>This is a feature-rich editor built with TipTap. You can:</p><ul><li><strong>Format text</strong> with <em>various</em> <u>styles</u></li><li>Create different heading levels</li><li>Add <a href="https://example.com">links</a> to external resources</li><li>Write <code>inline code</code> or code blocks</li></ul><blockquote><p>Use the toolbar above to explore all the formatting options available!</p></blockquote><p>Start typing to see the magic happen...</p>'}
          .description=${"Use the toolbar to format your content with headings, lists, links, and more"}
          .showWordCount=${!0}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${"2. With Placeholder"} .subtitle=${"Empty editor with placeholder text"}>
        <dees-input-richtext 
          .label=${"Blog Post"} 
          .placeholder=${"Start writing your blog post here..."}
          .showWordCount=${!0}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${"3. Different Heights"} .subtitle=${"Editors with different minimum heights for various use cases"}>
        <div class="grid-layout">
          <dees-input-richtext 
            .label=${"Short Note"} 
            .minHeight=${150}
            .placeholder=${"Quick note..."}
            .showWordCount=${!1}
          ></dees-input-richtext>
          
          <dees-input-richtext 
            .label=${"Extended Content"} 
            .minHeight=${300}
            .placeholder=${"Write your extended content here..."}
            .showWordCount=${!0}
          ></dees-input-richtext>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"4. Code Examples"} .subtitle=${"Editor pre-filled with code examples"}>
        <dees-input-richtext 
          .label=${"Technical Documentation"} 
          .value=${'<h2>Installation Guide</h2><p>To install the package, run the following command:</p><pre><code>npm install @design.estate/dees-catalog</code></pre><p>Then import the component in your TypeScript file:</p><pre><code>import { DeesInputRichtext } from "@design.estate/dees-catalog";</code></pre><p>You can now use the <code>&lt;dees-input-richtext&gt;</code> element in your templates.</p>'}
          .minHeight=${250}
          .showWordCount=${!0}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${"5. Disabled State"} .subtitle=${"Read-only rich text content"}>
        <dees-input-richtext 
          .label=${"Published Article (Read Only)"} 
          .value=${'<h2>The Future of Web Components</h2><p>Web Components have revolutionized how we build modern web applications...</p><blockquote><p>"The future of web development lies in reusable, encapsulated components."</p></blockquote>'}
          .disabled=${!0}
          .showWordCount=${!0}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${"6. Interactive Demo"} .subtitle=${"Type in the editor below and see the HTML output"}>
        <dees-input-richtext 
          id="interactive-editor"
          .label=${"Try it yourself"} 
          .placeholder=${"Type something here..."}
          .showWordCount=${!0}
          @change=${t=>{let e=document.querySelector("#output-preview");e&&(e.textContent=t.detail.value)}}
        ></dees-input-richtext>
        
        <div class="output-preview" id="output-preview">
          <em>HTML output will appear here...</em>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var Vgt,jgt=v(()=>{oe();_1();Vgt=[...Ze.baseStyles,p.defaultStyles,X`
      :host {
        display: block;
        position: relative;
        font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .input-wrapper {
        position: relative;
      }

      .label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .editor-container {
        display: flex;
        flex-direction: column;
        min-height: ${p.bdTheme("200px","200px")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        overflow: hidden;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .editor-container:hover {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      .editor-container.focused {
        border-color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 9% / 0.05)","hsl(0 0% 98% / 0.05)")};
      }

      .editor-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 12px;
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 14.9%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        align-items: center;
        position: relative;
      }

      .toolbar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        transition: all 0.15s ease;
        user-select: none;
      }

      .toolbar-button dees-icon {
        width: 16px;
        height: 16px;
      }

      .toolbar-button:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .toolbar-button.active {
        background: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
      }

      .toolbar-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .toolbar-divider {
        width: 1px;
        height: 24px;
        background: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        margin: 0 4px;
      }

      .editor-content {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        min-height: var(--min-height, 200px);
      }

      .editor-content .ProseMirror {
        outline: none;
        line-height: 1.6;
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        min-height: 100%;
      }

      .editor-content .ProseMirror p {
        margin: 0.5em 0;
      }

      .editor-content .ProseMirror p:first-child {
        margin-top: 0;
      }

      .editor-content .ProseMirror p:last-child {
        margin-bottom: 0;
      }

      .editor-content .ProseMirror h1 {
        font-size: 2em;
        font-weight: bold;
        margin: 1em 0 0.5em 0;
        line-height: 1.2;
      }

      .editor-content .ProseMirror h2 {
        font-size: 1.5em;
        font-weight: bold;
        margin: 1em 0 0.5em 0;
        line-height: 1.3;
      }

      .editor-content .ProseMirror h3 {
        font-size: 1.25em;
        font-weight: bold;
        margin: 1em 0 0.5em 0;
        line-height: 1.4;
      }

      .editor-content .ProseMirror ul,
      .editor-content .ProseMirror ol {
        padding-left: 1.5em;
        margin: 0.5em 0;
      }

      .editor-content .ProseMirror li {
        margin: 0.25em 0;
      }

      .editor-content .ProseMirror blockquote {
        border-left: 4px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        margin: 1em 0;
        padding-left: 1em;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        font-style: italic;
      }

      .editor-content .ProseMirror code {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-radius: 3px;
        padding: 0.2em 0.4em;
        font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        font-size: 0.9em;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .editor-content .ProseMirror pre {
        background: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        color: ${p.bdTheme("hsl(0 0% 98%)","hsl(0 0% 3.9%)")};
        border-radius: 6px;
        padding: 1em;
        margin: 1em 0;
        overflow-x: auto;
      }

      .editor-content .ProseMirror pre code {
        background: none;
        color: inherit;
        padding: 0;
        border-radius: 0;
      }

      .editor-content .ProseMirror a {
        color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        text-decoration: underline;
        cursor: pointer;
      }

      .editor-content .ProseMirror a:hover {
        color: ${p.bdTheme("hsl(222.2 47.4% 41.2%)","hsl(217.2 91.2% 69.8%)")};
      }

      .editor-footer {
        padding: 8px 12px;
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(0 0% 14.9%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        font-size: 12px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .word-count {
        font-weight: 500;
      }

      .link-input {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        padding: 12px;
        z-index: 1000;
      }

      .link-input.show {
        display: block;
      }

      .link-input input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        outline: none;
        font-size: 14px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .link-input input:focus {
        border-color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        box-shadow: 0 0 0 2px ${p.bdTheme("hsl(0 0% 9% / 0.05)","hsl(0 0% 98% / 0.05)")};
      }

      .link-input-buttons {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }

      .link-input-buttons button {
        padding: 6px 12px;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        cursor: pointer;
        font-size: 12px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
        transition: all 0.15s ease;
        font-weight: 500;
      }

      .link-input-buttons button:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      .link-input-buttons button.primary {
        background: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        color: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
      }

      .link-input-buttons button.primary:hover {
        background: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 93.9%)")};
      }

      .description {
        margin-top: 8px;
        font-size: 12px;
        color: ${p.bdTheme("hsl(215.4 16.3% 46.9%)","hsl(215 20.2% 65.1%)")};
        line-height: 1.4;
      }

      :host([disabled]) .editor-container {
        opacity: 0.6;
        cursor: not-allowed;
      }

      :host([disabled]) .toolbar-button,
      :host([disabled]) .editor-content {
        pointer-events: none;
      }
    `]});var Ugt,Wgt=v(()=>{oe();Ugt=t=>w`
        <div class="input-wrapper">
          ${t.label?w`<label class="label">${t.label}</label>`:""}
          <div class="editor-container ${t.editor?.isFocused?"focused":""}" style="--min-height: ${t.minHeight}px">
            <div class="editor-toolbar">
              ${t.renderToolbar()}
              <div class="link-input ${t.showLinkInput?"show":""}">
                <input type="url" placeholder="Enter URL..." @keydown=${t.handleLinkInputKeydown} />
                <div class="link-input-buttons">
                  <button class="primary" @click=${t.saveLink}>Save</button>
                  <button @click=${t.removeLink}>Remove</button>
                  <button @click=${t.hideLinkInput}>Cancel</button>
                </div>
              </div>
            </div>
            <div class="editor-content"></div>
            ${t.showWordCount?w`
                  <div class="editor-footer">
                    <span class="word-count">${t.wordCount} word${t.wordCount!==1?"s":""}</span>
                  </div>
                `:""}
          </div>
          ${t.description?w`<div class="description">${t.description}</div>`:""}
        </div>
      `});var bl,Xa,Ggt,jV=v(()=>{_1();qgt();jgt();Wgt();At();oe();zo();bl=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Xa=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Ggt=(()=>{let t=[Q("dees-input-richtext")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[];var I=class extends r{static{i=this}static{let L=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String,reflect:!0})],u=[D({type:String})],l=[D({type:Boolean})],y=[D({type:Number})],x=[J()],N=[J()],bl(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:A=>"value"in A,get:A=>A.value,set:(A,V)=>{A.value=V}},metadata:L},s,o),bl(this,null,u,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:A=>"placeholder"in A,get:A=>A.placeholder,set:(A,V)=>{A.placeholder=V}},metadata:L},c,d),bl(this,null,l,{kind:"accessor",name:"showWordCount",static:!1,private:!1,access:{has:A=>"showWordCount"in A,get:A=>A.showWordCount,set:(A,V)=>{A.showWordCount=V}},metadata:L},f,b),bl(this,null,y,{kind:"accessor",name:"minHeight",static:!1,private:!1,access:{has:A=>"minHeight"in A,get:A=>A.minHeight,set:(A,V)=>{A.minHeight=V}},metadata:L},g,h),bl(this,null,x,{kind:"accessor",name:"showLinkInput",static:!1,private:!1,access:{has:A=>"showLinkInput"in A,get:A=>A.showLinkInput,set:(A,V)=>{A.showLinkInput=V}},metadata:L},M,S),bl(this,null,N,{kind:"accessor",name:"wordCount",static:!1,private:!1,access:{has:A=>"wordCount"in A,get:A=>A.wordCount,set:(A,V)=>{A.wordCount=V}},metadata:L},_,k),bl(null,e={value:i},t,{kind:"class",name:i.name,metadata:L},null,a),I=i=e.value,L&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:L})}static demo=Hgt;static demoGroups=["Input"];#e=Xa(this,s,"");get value(){return this.#e}set value(L){this.#e=L}#t=(Xa(this,o),Xa(this,c,""));get placeholder(){return this.#t}set placeholder(L){this.#t=L}#a=(Xa(this,d),Xa(this,f,!0));get showWordCount(){return this.#a}set showWordCount(L){this.#a=L}#i=(Xa(this,b),Xa(this,g,200));get minHeight(){return this.#i}set minHeight(L){this.#i=L}#r=(Xa(this,h),Xa(this,M,!1));get showLinkInput(){return this.#r}set showLinkInput(L){this.#r=L}#s=(Xa(this,S),Xa(this,_,0));get wordCount(){return this.#s}set wordCount(L){this.#s=L}editorElement=Xa(this,k);linkInputElement;tiptapBundle=null;editor;static styles=Vgt;render(){return Ugt(this)}renderToolbar(){let L=this.getToolbarButtons();return w`
      ${L.map(A=>A.isDivider?w`<div class="toolbar-divider"></div>`:w`
          <button
            class="toolbar-button ${A.isActive?.()?"active":""}"
            @click=${A.action}
            title=${A.title}
            ?disabled=${this.disabled||!this.editor}
          >
            <dees-icon .icon=${A.icon}></dees-icon>
          </button>
        `)}
    `}getToolbarButtons(){return this.editor?[{name:"bold",icon:"lucide:bold",title:"Bold (Ctrl+B)",action:()=>this.editor.chain().focus().toggleBold().run(),isActive:()=>this.editor.isActive("bold")},{name:"italic",icon:"lucide:italic",title:"Italic (Ctrl+I)",action:()=>this.editor.chain().focus().toggleItalic().run(),isActive:()=>this.editor.isActive("italic")},{name:"underline",icon:"lucide:underline",title:"Underline (Ctrl+U)",action:()=>this.editor.chain().focus().toggleUnderline().run(),isActive:()=>this.editor.isActive("underline")},{name:"strike",icon:"lucide:strikethrough",title:"Strikethrough",action:()=>this.editor.chain().focus().toggleStrike().run(),isActive:()=>this.editor.isActive("strike")},{name:"divider1",title:"",isDivider:!0},{name:"h1",icon:"lucide:heading1",title:"Heading 1",action:()=>this.editor.chain().focus().toggleHeading({level:1}).run(),isActive:()=>this.editor.isActive("heading",{level:1})},{name:"h2",icon:"lucide:heading2",title:"Heading 2",action:()=>this.editor.chain().focus().toggleHeading({level:2}).run(),isActive:()=>this.editor.isActive("heading",{level:2})},{name:"h3",icon:"lucide:heading3",title:"Heading 3",action:()=>this.editor.chain().focus().toggleHeading({level:3}).run(),isActive:()=>this.editor.isActive("heading",{level:3})},{name:"divider2",title:"",isDivider:!0},{name:"bulletList",icon:"lucide:list",title:"Bullet List",action:()=>this.editor.chain().focus().toggleBulletList().run(),isActive:()=>this.editor.isActive("bulletList")},{name:"orderedList",icon:"lucide:listOrdered",title:"Numbered List",action:()=>this.editor.chain().focus().toggleOrderedList().run(),isActive:()=>this.editor.isActive("orderedList")},{name:"blockquote",icon:"lucide:quote",title:"Quote",action:()=>this.editor.chain().focus().toggleBlockquote().run(),isActive:()=>this.editor.isActive("blockquote")},{name:"code",icon:"lucide:code",title:"Code",action:()=>this.editor.chain().focus().toggleCode().run(),isActive:()=>this.editor.isActive("code")},{name:"codeBlock",icon:"lucide:fileCode",title:"Code Block",action:()=>this.editor.chain().focus().toggleCodeBlock().run(),isActive:()=>this.editor.isActive("codeBlock")},{name:"divider3",title:"",isDivider:!0},{name:"link",icon:"lucide:link",title:"Add Link",action:()=>this.toggleLink(),isActive:()=>this.editor.isActive("link")},{name:"alignLeft",icon:"lucide:alignLeft",title:"Align Left",action:()=>this.editor.chain().focus().setTextAlign("left").run(),isActive:()=>this.editor.isActive({textAlign:"left"})},{name:"alignCenter",icon:"lucide:alignCenter",title:"Align Center",action:()=>this.editor.chain().focus().setTextAlign("center").run(),isActive:()=>this.editor.isActive({textAlign:"center"})},{name:"alignRight",icon:"lucide:alignRight",title:"Align Right",action:()=>this.editor.chain().focus().setTextAlign("right").run(),isActive:()=>this.editor.isActive({textAlign:"right"})},{name:"divider4",title:"",isDivider:!0},{name:"undo",icon:"lucide:undo",title:"Undo (Ctrl+Z)",action:()=>this.editor.chain().focus().undo().run()},{name:"redo",icon:"lucide:redo",title:"Redo (Ctrl+Y)",action:()=>this.editor.chain().focus().redo().run()}]:[]}async firstUpdated(){await this.updateComplete,this.tiptapBundle=await C2.getInstance().loadTiptap(),this.editorElement=this.shadowRoot.querySelector(".editor-content"),this.linkInputElement=this.shadowRoot.querySelector(".link-input input"),this.initializeEditor()}initializeEditor(){if(this.disabled||!this.tiptapBundle)return;let{Editor:L,StarterKit:A,Underline:V,TextAlign:C,Link:z,Typography:E}=this.tiptapBundle;this.editor=new L({element:this.editorElement,extensions:[A.configure({heading:{levels:[1,2,3]}}),V.configure({}),C.configure({types:["heading","paragraph"]}),z.configure({openOnClick:!1,HTMLAttributes:{class:"editor-link"}}),E.configure({})],content:this.value||(this.placeholder?`<p>${this.placeholder}</p>`:""),onUpdate:({editor:T})=>{this.value=T.getHTML(),this.updateWordCount(),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detai
  <dees-demowrapper>
    <style>
      `,`
    </style>
    
    <div class="demo-container">
      <dees-panel .title=`," .subtitle=",`>
        <dees-input-tags
          .label=`,`
          .placeholder=`,`
          .value=`,`
          .description=`,`
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-input-tags
          .label=`,`
          .placeholder=`,`
          .suggestions=`,`
          .value=`,`
          .description=`,`
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <div class="grid-layout">
          <dees-input-tags
            .label=`,`
            .placeholder=`,`
            .maxTags=`,`
            .value=`,`
            .description=`,`
          ></dees-input-tags>
          
          <dees-input-tags
            .label=`,`
            .placeholder=`,`
            .maxTags=`,`
            .suggestions=`,`
            .value=`,`
            .description=`,`
          ></dees-input-tags>
        </div>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-input-tags
          .label=`,`
          .placeholder=`,`
          .required=`,`
          .description=`,`
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-input-tags
          .label=`,`
          .value=`,`
          .disabled=`,`
          .description=`,`
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-form>
          <dees-input-text
            .label=`,`
            .placeholder=`,`
            .required=`,`
            .key=`,`
          ></dees-input-text>
          
          <div class="grid-layout">
            <dees-input-tags
              .label=`,`
              .placeholder=`,`
              .required=`,`
              .key=`,`
              .suggestions=`,`
            ></dees-input-tags>
            
            <dees-input-tags
              .label=`,`
              .placeholder=`,`
              .key=`,`
              .maxTags=`,`
              .suggestions=`,`
            ></dees-input-tags>
          </div>
          
          <dees-input-text
            .label=`,`
            .inputType=`,`
            .placeholder=`,`
            .key=`,`
          ></dees-input-text>
          
          <dees-form-submit .text=`,`></dees-form-submit>
        </dees-form>
      </dees-panel>

      <dees-panel .title=`," .subtitle=",`>
        <dees-input-tags
          id="interactive-tags"
          .label=`,`
          .placeholder=`,`
          .suggestions=`,`
          @change=`,`
        ></dees-input-tags>
        
        <div class="tag-preview" id="tags-preview">
          <em style="color: #999;">No tags added yet...</em>
        </div>
        
        <div class="output-preview" id="tags-json">
          <em>JSON output will appear here...</em>
        </div>
        
        <script>
          // Update JSON preview
          const tagsInput = document.querySelector('#interactive-tags');
          tagsInput?.addEventListener('change', (e) => {
            const jsonPreview = document.querySelector('#tags-json');
            if (jsonPreview) {
              jsonPreview.textContent = JSON.stringify(e.detail.value, null, 2);
            }
          });
        <\/script>
      </dees-panel>
    </div>
  </dees-demowrapper>
`])),X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
        
        .tag-preview {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          padding: 12px;
          background: #f9fafb;
          border-radius: 4px;
          min-height: 40px;
          align-items: center;
        }
        
        @media (prefers-color-scheme: dark) {
          .tag-preview {
            background: #1f2937;
          }
        }
        
        .tag-preview-item {
          display: inline-block;
          padding: 4px 12px;
          background: #e0e7ff;
          color: #4338ca;
          border-radius: 12px;
          font-size: 14px;
        }
        
        @media (prefers-color-scheme: dark) {
          .tag-preview-item {
            background: #312e81;
            color: #c7d2fe;
          }
        }
      `,"1. Basic Tags Input","Simple tag input with common programming languages","Programming Languages","Add a language...",["JavaScript","TypeScript","Python","Go"],"Press Enter or comma to add tags","2. Tags with Suggestions","Auto-complete suggestions for faster input","Tech Stack","Type to see suggestions...",["React","Vue","Angular","Svelte","Lit","Next.js","Nuxt","SvelteKit","Node.js","Deno","Bun","Express","Fastify","Nest.js","Koa","MongoDB","PostgreSQL","Redis","MySQL","SQLite","Cassandra","Docker","Kubernetes","AWS","Azure","GCP","Vercel","Netlify"],["React","Node.js","PostgreSQL","Docker"],"Start typing to see suggestions from popular technologies","3. Limited Tags","Restrict the number of tags users can add","Top 3 Skills","Add up to 3 skills...",3,["Design","Development"],"Maximum 3 tags allowed","Categories (Max 5)","Select categories...",5,["Blog","Tutorial","News","Review","Guide","Case Study","Interview"],["Tutorial","Guide"],"Choose up to 5 categories","4. Required & Validation","Tags input with validation requirements","Project Tags","Add at least one tag...",!0,"This field is required - add at least one tag","5. Disabled State","Read-only tags display","System Tags",["System","Protected","Read-Only","Archive"],!0,"These tags cannot be modified","6. Form Integration","Tags input working within a form context","Project Name","My Awesome Project",!0,"name","Technologies Used","Add technologies...",!0,"technologies",["TypeScript","JavaScript","Python","Go","Rust","React","Vue","Angular","Svelte","Node.js","Deno","Express","FastAPI"],"Project Tags","Add descriptive tags...","tags",10,["frontend","backend","fullstack","mobile","desktop","web","api","database","devops","ui/ux","opensource","saas","enterprise","startup"],"Description","textarea","Describe your project...","description","Create Project","7. Interactive Demo","Add tags and see them collected in real-time","Your Interests","Type your interests...",["Music","Movies","Books","Travel","Photography","Cooking","Gaming","Sports","Art","Technology","Fashion","Fitness","Nature","Science","History"],t=>{let e=document.querySelector("#tags-preview"),a=t.detail.value;e&&(a.length===0?e.innerHTML='<em style="color: #999;">No tags added yet...</em>':e.innerHTML=a.map(i=>`<span class="tag-preview-item">${i}</span>`).join(""))})});var Gs,_2,ebt,tbt=v(()=>{oe();_1();At();Jgt();He();Gs=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},_2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ebt=(()=>{let t=[Q("dees-input-tags")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[];var E=class extends r{static{i=this}static{let T=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:String})],l=[D({type:Number})],y=[D({type:Array})],x=[J()],N=[J()],I=[J()],V=[D({type:String})],Gs(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:$=>"value"in $,get:$=>$.value,set:($,H)=>{$.value=H}},metadata:T},s,o),Gs(this,null,u,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:$=>"placeholder"in $,get:$=>$.placeholder,set:($,H)=>{$.placehold
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .input-wrapper {
        width: 100%;
      }

      .tags-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        min-height: 40px;
        background: transparent;
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        transition: all 0.15s ease;
        cursor: text;
      }

      .tags-container:hover:not(.disabled) {
        border-color: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }

      .tags-container:focus-within {
        border-color: ${p.bdTheme("hsl(222.2 47.4% 51.2%)","hsl(217.2 91.2% 59.8%)")};
        box-shadow: 0 0 0 3px ${p.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)","hsl(217.2 91.2% 59.8% / 0.1)")};
      }

      .tags-container.disabled {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
        border-color: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        cursor: not-allowed;
        opacity: 0.5;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        background: ${p.bdTheme("hsl(215 20.2% 65.1% / 0.2)","hsl(215 20.2% 35.1% / 0.2)")};
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
        border: 1px solid ${p.bdTheme("hsl(215 20.2% 65.1% / 0.3)","hsl(215 20.2% 35.1% / 0.3)")};
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        user-select: none;
        animation: tagAppear 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }

      @keyframes tagAppear {
        from {
          transform: scale(0.95);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .tag-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        margin-left: 2px;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.15s ease;
        color: ${p.bdTheme("hsl(215.3 25% 46.7%)","hsl(217.9 10.6% 54.9%)")};
      }

      .tag-remove:hover {
        background: ${p.bdTheme("hsl(0 0% 0% / 0.08)","hsl(0 0% 100% / 0.08)")};
        color: ${p.bdTheme("hsl(215.3 25% 26.7%)","hsl(217.9 10.6% 74.9%)")};
      }

      .tag-remove dees-icon {
        width: 10px;
        height: 10px;
      }

      .tag-input {
        flex: 1;
        min-width: 120px;
        border: none;
        background: transparent;
        outline: none;
        font-size: 14px;
        font-family: inherit;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
        padding: 2px 4px;
        line-height: 20px;
      }

      .tag-input::placeholder {
        color: ${p.bdTheme("hsl(0 0% 63.9%)","hsl(0 0% 45.1%)")};
      }

      .tag-input:disabled {
        cursor: not-allowed;
      }

      /* Suggestions dropdown */
      .suggestions-container {
        position: relative;
      }

      .suggestions-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
      }

      .suggestion {
        padding: 6px 10px;
        cursor: pointer;
        transition: all 0.15s ease;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      .suggestion:hover {
        background: ${p.bdTheme("hsl(0 0% 95.1%)","hsl(0 0% 14.9%)")};
      }

      .suggestion.highlighted {
        background: ${p.bdTheme("hsl(210 40% 96.1%)","hsl(215 20.2% 16.8%)")};
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 95%)")};
      }

      /* Validation styles */
      .validation-message {
        color: ${p.bdTheme("hsl(0 72.2% 50.6%)","hsl(0 62.8% 30.6%)")};
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.5;
      }

      /* Description styles */
      .description {
        color: ${p.bdTheme("hsl(215.4 16.3% 56.9%)","hsl(215 20.2% 55.1%)")};
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.5;
      }

      /* Scrollbar styling */
      .suggestions-dropdown::-webkit-scrollbar {
        width: 8px;
      }

      .suggestions-dropdown::-webkit-scrollbar-track {
        background: transparent;
      }

      .suggestions-dropdown::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 4px;
      }

      .suggestions-dropdown::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("hsl(0 0% 79.8%)","hsl(0 0% 20.9%)")};
      }
    `];render(){let T=this.suggestions.filter($=>!this.value.includes($)&&$.toLowerCase().includes(this.inputValue.toLowerCase()));return w`
      <div class="input-wrapper">
        ${this.label?w`<dees-label .label=${this.label} .required=${this.required}></dees-label>`:""}
        
        <div class="suggestions-container">
          <div
            class="tags-container ${this.disabled?"disabled":""}"
            @click=${this.handleContainerClick}
          >
            ${this.value.map($=>w`
              <div class="tag">
                <span>${$}</span>
                ${this.disabled?"":w`
                  <div class="tag-remove" @click=${H=>this.removeTag(H,$)}>
                    <dees-icon .icon=${"lucide:x"}></dees-icon>
                  </div>
                `}
              </div>
            `)}
            
            ${!this.disabled&&(!this.maxTags||this.value.length<this.maxTags)?w`
              <input
                type="text"
                class="tag-input"
                .placeholder=${this.placeholder}
                .value=${this.inputValue}
                @input=${this.handleInput}
                @keydown=${this.handleKeyDown}
                @focus=${this.handleFocus}
                @blur=${this.handleBlur}
                ?disabled=${this.disabled}
              />
            `:""}
          </div>

          ${this.showSuggestions&&T.length>0?w`
            <div class="suggestions-dropdown">
              ${T.map(($,H)=>w`
                <div
                  class="suggestion ${H===this.highlightedSuggestionIndex?"highlighted":""}"
                  @mousedown=${O=>{O.preventDefault(),this.addTag($)}}
                  @mouseenter=${()=>this.highlightedSuggestionIndex=H}
                >
                  ${$}
                </div>
              `)}
            </div>
          `:""}
        </div>

        ${this.validationText?w`
          <div class="validation-message">${this.validationText}</div>
        `:""}
        
        ${this.description?w`
          <div class="description">${this.description}</div>
        `:""}
      </div>
    `}handleContainerClick(T){if(this.disabled)return;let $=this.shadowRoot?.querySelector(".tag-input");$&&T.target!==$&&$.focus()}handleInput(T){let $=T.target;if(this.inputValue=$.value,this.inputValue.includes(",")||this.inputValue.includes(";")){let H=this.inputValue.replace(/[,;]/g,"").trim();H&&this.addTag(H)}}handleKeyDown(T){let $=T.target;if(T.key==="Enter")if(T.preventDefault(),this.highlightedSuggestionIndex>=0&&this.showSuggestions){let H=this.suggestions.filter(O=>!this.value.includes(O)&&O.toLowerCase().includes(this.inputValue.toLowerCase()));H[this.highlightedSuggestionIndex]&&this.addTag(H[this.highlightedSuggestionIndex])}else this.inputValue.trim()&&this.addTag(this.inputValue.trim());else if(T.key==="Backspace"&&!this.inputValue&&this.value.length>0)this.removeTag(T,this.value[this.value.length-1]);else if(T.key==="ArrowDown"&&this.showSuggestions){T.preventDefault();let H=this.suggestions.filter(O=>!this.value.includes(O)&&O.toLowerCase().includes(this.inputValue.toLowerCase())).length;this.highlightedSuggestionIndex=Math.min(this.highlightedSuggestionIndex+1,H-1)}else T.key==="ArrowUp"&&this.showSuggestions?(T.preventDefault(),this.highlightedSuggestionIndex=Math.max(this.highlightedSuggestionIndex-1,0)):T.key==="Escape"&&(this.showSuggestions=!1,this.highlightedSuggestionIndex=-1)}handleFocus(){this.suggestions.length>0&&(this.showSuggestions=!0)}handleBlur(){setTimeout(()=>{this.showSuggestions=!1,this.highlightedSuggestionIndex=-1},200)}addTag(T){if(!T||this.value.includes(T)||this.maxTags&&this.value.length>=this.maxTags)return;this.value=[...this.value,T],this.inputValue="",this.showSuggestions=!1,this.highlightedSuggestionIndex=-1;let $=this.shadowRoot?.querySelector(".tag-input");$&&($.value=""),this.emitChange()}removeTag(T,$){T.stopPropagation(),this.value=this.value.filter(H=>H!==$),this.emitChange()}emitChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.changeSubject.next(this)}getValue(){return this.value}setValue(T){this.value=T||[]}async validate(){return this.required&&(!this.value||this.value.length===0)?(this.validationText="At least one tag is required",!1):(this.validationText="",!0)}constructor(){super(...arguments),_2(this,z)}static{_2(i,a)}};return E=i})()});var abt=v(()=>{tbt()});var ibt=v(()=>{xo()});var rbt=v(()=>{wV()});var sbt=v(()=>{kV()});var MWt,kWt,zWt,SWt,CWt,_Wt,TWt,nbt,obt=v(()=>{oe();x1();h2();MWt=()=>{let t=Date.now();return[{id:`title-${t}`,type:"heading-1",content:"System Performance Report"},{id:`date-${t+1}`,type:"paragraph",content:`Generated on: ${new Date().toLocaleString()}`},{id:`summary-heading-${t+2}`,type:"heading-2",content:"Executive Summary"},{id:`summary-${t+3}`,type:"paragraph",content:"This report provides an analysis of system performance metrics over the last 30 days."},{id:`metrics-heading-${t+4}`,type:"heading-2",content:"Key Metrics"},{id:`metrics-list-${t+5}`,type:"list",content:`Average response time: 124ms
Uptime: 99.97%
CPU utilization: 45%
Memory usage: 2.3GB / 8GB`,metadata:{listType:"bullet"}},{id:`analysis-heading-${t+6}`,type:"heading-2",content:"Performance Analysis"},{id:`analysis-quote-${t+7}`,type:"quote",content:"System performance remains within acceptable parameters with room for optimization in memory management."},{id:`code-heading-${t+8}`,type:"heading-3",content:"Sample Query Performance"},{id:`code-block-${t+9}`,type:"code",content:`SELECT AVG(response_time) as avg_time,
       COUNT(*) as total_requests,
       DATE(created_at) as date
FROM performance_logs
WHERE created_at >= NOW() - INTERVAL 30 DAY
GROUP BY DATE(created_at)
ORDER BY date DESC;`,metadata:{language:"sql"}},{id:`divider-${t+10}`,type:"divider",content:""},{id:`footer-${t+11}`,type:"paragraph",content:"Report generated automatically by System Monitor v2.5.0"}]},kWt=()=>{let t=Date.now();return[{id:`recipe-title-${t}`,type:"heading-1",content:"Classic Margherita Pizza"},{id:`recipe-intro-${t+1}`,type:"paragraph",content:"A traditional Italian pizza with fresh basil, mozzarella, and tomato sauce."},{id:`ingredients-heading-${t+2}`,type:"heading-2",content:"\u{1F355} Ingredients"},{id:`dough-heading-${t+3}`,type:"heading-3",content:"For the Dough:"},{id:`dough-list-${t+4}`,type:"list",content:`500g tipo "00" flour
325ml warm water
10g salt
7g active dry yeast
2 tbsp olive oil`,metadata:{listType:"bullet"}},{id:`toppings-heading-${t+5}`,type:"heading-3",content:"For the Toppings:"},{id:`toppings-list-${t+6}`,type:"list",content:`400g canned San Marzano tomatoes
250g fresh mozzarella
Fresh basil leaves
Extra virgin olive oil
Salt and pepper to taste`,metadata:{listType:"bullet"}},{id:`instructions-heading-${t+7}`,type:"heading-2",content:"\u{1F468}\u200D\u{1F373} Instructions"},{id:`steps-list-${t+8}`,type:"list",content:`Dissolve yeast in warm water and let stand for 5 minutes
Mix flour and salt, create a well in center
Add yeast mixture and olive oil
Knead for 10 minutes until smooth
Let rise for 1-2 hours until doubled
Punch down and divide into portions
Roll out each portion to 12-inch circles
Top with crushed tomatoes, mozzarella, and basil
Bake at 475\xB0F (245\xB0C) for 10-12 minutes`,metadata:{listType:"ordered"}},{id:`tip-${t+9}`,type:"quote",content:"Pro tip: For an authentic taste, use a pizza stone and preheat it in the oven for at least 30 minutes before baking."},{id:`divider-${t+10}`,type:"divider",content:""},{id:`servings-${t+11}`,type:"paragraph",content:"Servings: 4 pizzas | Prep time: 2 hours | Cook time: 12 minutes"}]},zWt=t=>{let e={};return e.basic=t.querySelector("#editor-basic"),e.article=t.querySelector("#editor-article"),e.dragDrop=t.querySelector("#editor-dragdrop"),e.tutorial=t.querySelector("#editor-tutorial"),e.meeting=t.querySelector("#editor-meeting"),e.recipe=t.querySelector("#editor-recipe"),e.technical=t.querySelector("#editor-technical"),e.formIntegration=t.querySelector("#editor-form-integration"),e.programmatic=t.querySelector("#editor-programmatic"),e.exportDemo=t.querySelector("#editor-export"),e},SWt=(t,e)=>{let a=t.querySelector("#btn-generate-report"),i=t.querySelector("#btn-generate-recipe"),r=t.querySelector("#btn-clear-editor");a&&a.addEventListener("click",()=>{e.importBlocks(MWt())}),i&&i.addEventListener("click",()=>{e.importBlocks(kWt())}),r&&r.addEventListener("click",()=>{e.importBlocks([])})},CWt=(t,e)=>{let a=t.querySelector("#btn-export-blocks"),i=t.querySelector("#btn-export-html"),r=t.querySelector("#btn-export-markdown"),n=t.querySelector("#btn-save-state"),s=t.querySelector("#btn-restore-state"),o=null;a&&a.addEventListener("click",()=>{let u=e.exportBlocks();console.log("Exported blocks:",u),alert(`Exported ${u.length} blocks to console. Check developer tools.`)}),i&&i.addEventListener("click",()=>{let u=e.exportAsHtml();console.log("HTML Export:",u),alert("HTML exported to console. Check developer tools.")}),r&&r.addEventListener("click",()=>{let u=e.exportAsMarkdown();console.log("Markdown Export:",u),alert("Markdown exported to console. Check developer tools.")}),n&&n.addEventListener("click",()=>{o=e.exportState(),console.log("Saved state:",o),alert("Editor state saved!")}),s&&s.addEventListener("click",()=>{o?(e.importState(o),alert("Editor state restored!")):alert("No saved state found. Save state first!")})},_Wt=(t,e,a)=>{let i=t.querySelector("#btn-show-html-output"),r=t.querySelector("#output-preview-html");i&&r&&e&&i.addEventListener("click",()=>{r.textContent=e.getValue(),r.classList.add("visible")});let n=t.querySelector("#btn-show-markdown-output"),s=t.querySelector("#output-preview-markdown");n&&s&&a&&n.addEventListener("click",()=>{s.textContent=a.getValue(),s.classList.add("visible")})},TWt=t=>{t.article&&setTimeout(()=>{let e=[{id:"intro-heading-"+Date.now(),type:"heading-2",content:"Introduction to Modern Web Development"},{id:"intro-para-"+Date.now(),type:"paragraph",content:"Modern web development has evolved significantly over the past decade. In this article, we'll explore the key technologies and best practices that define web development in 2024."},{id:"tech-heading-"+Date.now(),type:"heading-3",content:"Key Technologies"},{id:"tech-list-"+Date.now(),type:"list",content:`TypeScript - Type-safe JavaScript development
Web Components - Native component model
ES Modules - Modern module system
WebAssembly - High-performance computing`,metadata:{listType:"ordered"}},{id:"quote-"+Date.now(),type:"quote",content:"The best way to predict the future is to invent it. - Alan Kay"},{id:"example-heading-"+Date.now(),type:"heading-3",content:"Code Example"},{id:"code-example-"+Date.now(),type:"code",content:`class ModernWebApp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
  }
}`,metadata:{language:"javascript"}}];t.article.importBlocks(e)},500),t.dragDrop&&setTimeout(()=>{let e=[{id:"drag-title-"+Date.now(),type:"heading-1",content:"Drag & Drop Demo"},{id:"drag-intro-"+Date.now(),type:"paragraph",content:"This editor demonstrates drag and drop functionality. Try dragging these blocks around!"},{id:"drag-heading-"+Date.now(),type:"heading-2",content:"How It Works"},{id:"drag-list-"+Date.now(),type:"list",content:`Hover over any block to see the drag handle
Click and hold the handle to start dragging
Drag to reorder blocks
Release to drop in the new position`,metadata:{listType:"ordered"}},{id:"drag-quote-"+Date.now(),type:"quote",content:"The drag and drop feature makes it easy to reorganize your content without cutting and pasting."},{id:"drag-divider-"+Date.now(),type:"divider",content:""},{id:"drag-footer-"+Date.now(),type:"paragraph",content:"Note: Divider blocks cannot be dragged, but other blocks can be moved around them."}];t.dragDrop.importBlocks(e)},600)},nbt=()=>w`
  <dees-demowrapper .runAfterRender=${async t=>{await new Promise(a=>setTimeout(a,500));let e=zWt(t);e.programmatic&&SWt(t,e.programmatic),e.exportDemo&&CWt(t,e.exportDemo),_Wt(t,e.meeting,e.recipe),TWt(e),console.log("WYSIWYG Demo initialized with editors:",Object.keys(e))}}>
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 32px;
      }
      
      .panel-description {
        margin-top: 0;
        margin-bottom: 24px;
        color: #666;
        font-size: 15px;
        line-height: 1.6;
      }
      
      @media (prefers-color-scheme: dark) {
        .panel-description {
          color: #999;
        }
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #555;
        font-size: 14px;
      }

      .feature-icon {
        color: #0066cc;
        font-weight: 600;
      }

      @media (prefers-color-scheme: dark) {
        .feature-item {
          color: #aaa;
        }
        .feature-icon {
          color: #4d94ff;
        }
      }

      .shortcuts-box {
        background: rgba(0, 102, 204, 0.05);
        border: 1px solid rgba(0, 102, 204, 0.2);
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
      }

      @media (prefers-color-scheme: dark) {
        .shortcuts-box {
          background: rgba(77, 148, 255, 0.1);
          border-color: rgba(77, 148, 255, 0.3);
        }
      }

      .shortcuts-title {
        margin: 0 0 12px 0;
        font-size: 14px;
        font-weight: 600;
        color: #0066cc;
      }

      @media (prefers-color-scheme: dark) {
        .shortcuts-title {
          color: #4d94ff;
        }
      }

      .shortcuts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 8px;
      }

      .shortcut-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #555;
      }

      .shortcut-key {
        background: #f0f0f0;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
        color: #333;
        white-space: nowrap;
      }

      @media (prefers-color-scheme: dark) {
        .shortcut-item {
          color: #bbb;
        }
        .shortcut-key {
          background: #333;
          color: #ddd;
        }
      }

      .output-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
        margin-top: 24px;
      }

      .output-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .output-actions {
        display: flex;
        justify-content: flex-end;
      }

      .output-preview {
        display: none;
        background: rgba(15, 23, 42, 0.04);
        color: var(--dees-color-text, #0f172a);
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 8px;
        padding: 16px;
        white-space: pre-wrap;
        font-family: 'Geist Mono', 'Fira Code', monospace;
        font-size: 13px;
        max-height: 280px;
        overflow: auto;
      }

      :host([theme='dark']) .output-preview {
        background: rgba(250, 250, 250, 0.06);
        border-color: rgba(250, 250, 250, 0.15);
        color: var(--dees-color-text, #f4f4f5);
      }

      .output-preview.visible {
        display: block;
      }

      @media (max-width: 768px) {
        .output-grid {
          grid-template-columns: 1fr;
        }
      }
      
      .tips-box {
        margin-top: 16px;
        padding: 12px;
        background: #f0f8ff;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.6;
      }
      
      @media (prefers-color-scheme: dark) {
        .tips-box {
          background: rgba(77, 148, 255, 0.1);
        }
      }
      
      .tips-box strong {
        color: #0066cc;
      }
      
      @media (prefers-color-scheme: dark) {
        .tips-box strong {
          color: #4d94ff;
        }
      }
      
      .tips-list {
        margin: 8px 0 0 0;
        padding-left: 24px;
      }
      
      .tips-list li {
        margin: 4px 0;
      }
      
      .button-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 16px;
      }
      
      .demo-button {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f8f8f8;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        transition: all 0.2s ease;
      }
      
      .demo-button:hover {
        background: #e8e8e8;
        border-color: #ccc;
      }
      
      .demo-button:active {
        transform: translateY(1px);
      }
      
      @media (prefers-color-scheme: dark) {
        .demo-button {
          background: #333;
          border-color: #555;
          color: #ddd;
        }
        
        .demo-button:hover {
          background: #444;
          border-color: #666;
        }
      }
      
      .export-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }
      
      .export-info-card {
        padding: 16px;
        border-radius: 8px;
      }
      
      .export-info-card.blocks {
        background: rgba(0, 102, 204, 0.1);
      }
      
      .export-info-card.html {
        background: rgba(76, 175, 80, 0.1);
      }
      
      .export-info-card.markdown {
        background: rgba(255, 152, 0, 0.1);
      }
      
      .export-info-card.state {
        background: rgba(156, 39, 176, 0.1);
      }
      
      .export-info-card strong {
        display: block;
        margin-bottom: 8px;
      }
      
      .export-info-card.blocks strong {
        color: #0066cc;
      }
      
      .export-info-card.html strong {
        color: #4CAF50;
      }
      
      .export-info-card.markdown strong {
        color: #FF9800;
      }
      
      .export-info-card.state strong {
        color: #9C27B0;
      }
      
      .export-info-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
      }
    `}
  </style>
  
    <div class="demo-container">
      <dees-panel .title=${"1. \u{1F680} Modern WYSIWYG Editor"}>
        <p class="panel-description">
          A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. 
          Perfect for content creation, blog posts, documentation, and more.
        </p>
        
        <div class="feature-grid">
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Slash commands (/)</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Keyboard shortcuts</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Block-based editing</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Drag & drop reordering</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>HTML & Markdown output</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Dark mode support</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Mobile responsive</span>
          </div>
        </div>
        
        <dees-input-wysiwyg 
          id="editor-basic"
          label="Rich Text Editor" 
          description="Start typing or use '/' to insert different block types"
          outputFormat="html"
        ></dees-input-wysiwyg>

        <div class="shortcuts-box">
          <h4 class="shortcuts-title">⌨️ Keyboard Shortcuts</h4>
          <div class="shortcuts-grid">
            <div class="shortcut-item">
              <span class="shortcut-key">/</span> Slash commands
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">#</span> Heading 1
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">##</span> Heading 2
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">###</span> Heading 3
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">></span> Quote
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">\`\`\`</span> Code block
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">*</span> or <span class="shortcut-key">-</span> Bullet list
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">1.</span> Numbered list
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">---</span> Divider
            </div>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${"2. \u{1F4DD} Blog Post Example"}>
        <p class="panel-description">
          Perfect for creating rich content with multiple block types. 
          The editor preserves formatting and provides a clean editing experience.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-article"
          label="Blog Post Content" 
          description="Write your article using various formatting options"
          outputFormat="html"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .title=${"3. \u{1F500} Drag & Drop Reordering"}>
        <p class="panel-description">
          Easily rearrange your content blocks by dragging them. 
          Hover over any block to reveal the drag handle on the left side.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-dragdrop"
          label="Drag & Drop Demo" 
          description="Try dragging blocks to reorder them - hover to see drag handles"
        ></dees-input-wysiwyg>
        
        <div class="tips-box">
          <strong>💡 Tips:</strong>
          <ul class="tips-list">
            <li>Hover over any block to see the drag handle (⋮⋮) on the left</li>
            <li>Click and hold the drag handle to start dragging</li>
            <li>Blue indicators show where the block will be dropped</li>
            <li>Divider blocks cannot be dragged</li>
            <li>The editor maintains focus on the moved block after dropping</li>
          </ul>
        </div>
      </dees-panel>

      <dees-panel .title=${"4. \u{1F4DA} Tutorial & Documentation"}>
        <p class="panel-description">
          Create comprehensive tutorials and documentation with code examples, lists, and structured content.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-tutorial"
          label="Git Tutorial" 
          description="Step-by-step guide with commands and explanations"
          outputFormat="markdown"
          value="# Git Tutorial for Beginners

Git is a distributed version control system that helps you track changes in your code over time. This tutorial will guide you through the basics.

## Prerequisites

Before starting, ensure you have:

- Git installed on your system
- A text editor or IDE
- Basic command line knowledge

## Getting Started

### 1. Configure Git

First, set up your identity:

\`\`\`bash
git config --global user.name &quot;Your Name&quot;
git config --global user.email &quot;your.email@example.com&quot;
\`\`\`

### 2. Initialize a Repository

Create a new Git repository:

\`\`\`bash
mkdir my-project
cd my-project
git init
\`\`\`

### 3. Basic Git Workflow

#### Adding Files

Create a file and add it to staging:

\`\`\`bash
echo &quot;# My Project&quot; > README.md
git add README.md
\`\`\`

#### Committing Changes

\`\`\`bash
git commit -m &quot;Initial commit&quot;
\`\`\`

> **Best Practice:** Write clear, descriptive commit messages that explain what changes were made and why.

### 4. Working with Branches

Branches allow you to work on features independently:

\`\`\`bash
# Create and switch to a new branch
git checkout -b feature-branch

# Make changes and commit
git add .
git commit -m &quot;Add new feature&quot;

# Switch back to main
git checkout main

# Merge the feature
git merge feature-branch
\`\`\`

---

## Common Commands Reference

| Command | Description |
|---------|-------------|
| \`git status\` | Check repository status |
| \`git log\` | View commit history |
| \`git diff\` | Show changes |
| \`git pull\` | Fetch and merge changes |
| \`git push\` | Upload changes to remote |

## Next Steps

1. Learn about remote repositories
2. Explore advanced Git features
3. Practice with real projects
4. Contribute to open source

**Happy coding!** 🚀"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .title=${"5. \u{1F504} Output Formats"}>
        <p class="panel-description">
          Choose between HTML and Markdown output formats depending on your needs. 
          Perfect for static site generators, documentation systems, or any content management workflow.
        </p>
        
        <div class="output-grid">
          <div class="output-card">
            <dees-input-wysiwyg 
              id="editor-meeting"
              label="Meeting Notes" 
              description="Structured meeting documentation"
              outputFormat="html"
              value="<h2>Q4 Planning Meeting</h2><p><strong>Date:</strong> December 15, 2024<br><strong>Attendees:</strong> Product Team, Engineering, Design</p><h3>Agenda Items</h3><ol><li>Review Q3 achievements</li><li>Set Q4 objectives</li><li>Resource allocation</li><li>Timeline discussion</li></ol><h3>Key Decisions</h3><ul><li>Launch new dashboard feature by end of January</li><li>Increase engineering team by 2 developers</li><li>Implement weekly design reviews</li></ul><blockquote>&quot;Focus on user experience improvements based on Q3 feedback&quot; - Product Manager</blockquote><h3>Action Items</h3><ul><li>Sarah: Create detailed project timeline</li><li>Mike: Draft technical requirements</li><li>Lisa: Schedule user research sessions</li></ul><hr><p>Next meeting: January 5, 2025</p>"
            ></dees-input-wysiwyg>
            <div class="output-actions">
              <button id="btn-show-html-output" class="demo-button">Show HTML Output</button>
            </div>
            <pre id="output-preview-html" class="output-preview" aria-live="polite"></pre>
          </div>
          
          <div class="output-card">
            <dees-input-wysiwyg 
              id="editor-recipe"
              label="Recipe Blog Post" 
              description="Food blog with mixed content"
              outputFormat="markdown"
              value="# Ultimate Chocolate Chip Cookies

There's nothing quite like the smell of freshly baked chocolate chip cookies. This recipe has been perfected over years of testing!

## Ingredients

- 2¼ cups all-purpose flour
- 1 tsp baking soda
- 1 tsp salt
- 1 cup butter, softened
- ¾ cup granulated sugar
- ¾ cup packed brown sugar
- 2 large eggs
- 2 tsp vanilla extract
- 2 cups chocolate chips

## Instructions

### Step 1: Preparation

Preheat your oven to **375°F (190°C)**. This temperature is crucial for achieving the perfect texture.

### Step 2: Mix Dry Ingredients

In a medium bowl, whisk together:

1. Flour
2. Baking soda
3. Salt

### Step 3: Cream Butter and Sugars

\`\`\`
Cream butter and sugars for 3-4 minutes
until light and fluffy
\`\`\`

> **Pro tip:** Room temperature ingredients mix better and create a more uniform dough.

### Step 4: Add Wet Ingredients

Beat in eggs one at a time, then add vanilla extract.

### Step 5: Combine and Bake

Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tablespoons onto ungreased cookie sheets.

---

**Baking time:** 9-11 minutes or until golden brown

**Yield:** About 5 dozen cookies"
            ></dees-input-wysiwyg>
            <div class="output-actions">
              <button id="btn-show-markdown-output" class="demo-button">Show Markdown Output</button>
            </div>
            <pre id="output-preview-markdown" class="output-preview" aria-live="polite"></pre>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${"6. \u{1F3A8} Advanced Editing"}>
        <p class="panel-description">
          Create complex documents with mixed content types. The editor handles all formatting seamlessly.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-technical"
          label="Technical Documentation" 
          description="Create technical docs with code examples and structured content"
          value="<h1>API Documentation</h1><p>Welcome to our API documentation. Below you'll find examples of how to use our endpoints.</p><h2>Authentication</h2><p>All API requests require authentication using an API key:</p><pre><code>Authorization: Bearer YOUR_API_KEY</code></pre><h2>Endpoints</h2><h3>GET /users</h3><p>Retrieve a list of users from the system.</p><pre><code>curl -X GET https://api.example.com/users \\
  -H &quot;Authorization: Bearer YOUR_API_KEY&quot;</code></pre><blockquote>Note: Rate limiting applies to all endpoints. You can make up to 100 requests per minute.</blockquote><h3>POST /users</h3><p>Create a new user in the system.</p><pre><code>{
  &quot;name&quot;: &quot;John Doe&quot;,
  &quot;email&quot;: &quot;john@example.com&quot;,
  &quot;role&quot;: &quot;user&quot;
}</code></pre><hr><p>For more information, please refer to our complete documentation.</p>"
          outputFormat="html"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .title=${"7. \u2699\uFE0F Form Integration"}>
        <p class="panel-description">
          Seamlessly integrates with dees-form for complete form solutions. 
          All standard form features like validation, required fields, and data binding work out of the box.
        </p>
        
        <dees-form>
          <dees-input-text 
            label="Article Title" 
            required="true"
            value="How to Build Modern Web Applications"
          ></dees-input-text>
          
          <dees-input-wysiwyg 
            id="editor-form-integration"
            label="Article Content" 
            description="Write your article content here"
            required="true"
            outputFormat="markdown"
          ></dees-input-wysiwyg>
          
          <dees-input-tags
            label="Tags"
            description="Add relevant tags for your article"
          ></dees-input-tags>
        </dees-form>
      </dees-panel>

      <dees-panel .title=${"8. \u{1F9E9} Programmatic Block Creation"}>
        <p class="panel-description">
          Create content programmatically using the block API for dynamic document generation.
        </p>
        
        <dees-input-wysiwyg
          id="editor-programmatic"
          label="Programmatically Generated Content"
          description="This content was created using the importBlocks API"
        ></dees-input-wysiwyg>
        
        <div class="button-group">
          <button id="btn-generate-report" class="demo-button">
            Generate Report
          </button>
          
          <button id="btn-generate-recipe" class="demo-button">
            Generate Recipe
          </button>
          
          <button id="btn-clear-editor" class="demo-button">
            Clear Editor
          </button>
        </div>
      </dees-panel>

      <dees-panel .title=${"9. \u{1F4E4} Export/Import Features"}>
        <p class="panel-description">
          The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.
        </p>
        
        <div class="export-info-grid">
          <div class="export-info-card blocks">
            <strong>Lossless Blocks</strong>
            <p>Export and import raw block structure for perfect round-trip editing</p>
          </div>
          <div class="export-info-card html">
            <strong>HTML Export</strong>
            <p>Get clean, semantic HTML regardless of output format setting</p>
          </div>
          <div class="export-info-card markdown">
            <strong>Markdown Export</strong>
            <p>Export as Markdown for docs, READMEs, and static sites</p>
          </div>
          <div class="export-info-card state">
            <strong>State Management</strong>
            <p>Save and restore complete editor state including settings</p>
          </div>
        </div>
        
        <dees-input-wysiwyg
          id="editor-export"
          label="Export Demo Editor"
          description="Try the export buttons below to see different output formats"
          value="<h1>Software Release Notes</h1><p><strong>Version 2.5.0</strong> - Released December 15, 2024</p><h2>🎉 New Features</h2><ul><li>Added dark mode support across all components</li><li>Implemented real-time collaboration features</li><li>New dashboard analytics widgets</li><li>Export functionality for all report types</li></ul><h2>🐛 Bug Fixes</h2><ul><li>Fixed memory leak in data processing module</li><li>Resolved authentication timeout issues</li><li>Corrected timezone handling in scheduled tasks</li></ul><h2>⚡ Performance Improvements</h2><blockquote>Page load times reduced by 40% through lazy loading and code splitting</blockquote><h2>🔧 Technical Details</h2><pre><code>// New API endpoint for batch operations
POST /api/v2/batch
{
  &quot;operations&quot;: [
    { &quot;method&quot;: &quot;GET&quot;, &quot;path&quot;: &quot;/users/123&quot; },
    { &quot;method&quot;: &quot;PUT&quot;, &quot;path&quot;: &quot;/settings&quot;, &quot;body&quot;: {...} }
  ]
}</code></pre><h2>💡 Migration Guide</h2><ol><li>Update your dependencies to the latest versions</li><li>Run database migrations: <code>npm run migrate</code></li><li>Clear cache: <code>npm run cache:clear</code></li><li>Restart all services</li></ol><hr><p>For questions or issues, please contact the development team or file a ticket in our issue tracker.</p>"
        ></dees-input-wysiwyg>
        
        <div class="button-group">
          <button id="btn-export-blocks" class="demo-button">
            Export Blocks
          </button>
          
          <button id="btn-export-html" class="demo-button">
            Export as HTML
          </button>
          
          <button id="btn-export-markdown" class="demo-button">
            Export as Markdown
          </button>
          
          <button id="btn-save-state" class="demo-button">
            Save State
          </button>
          
          <button id="btn-restore-state" class="demo-button">
            Restore State
          </button>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var Pa=v(()=>{});var V1,vl=v(()=>{Pa();V1=class{static HEADING_PATTERNS=[{pattern:/^#[\s\u00A0]$/,type:"heading-1"},{pattern:/^##[\s\u00A0]$/,type:"heading-2"},{pattern:/^###[\s\u00A0]$/,type:"heading-3"}];static LIST_PATTERNS=[{pattern:/^[*-][\s\u00A0]$/,type:"bullet"},{pattern:/^(\d+)\.[\s\u00A0]$/,type:"ordered"},{pattern:/^(\d+)\)[\s\u00A0]$/,type:"ordered"}];static QUOTE_PATTERN=/^>[\s\u00A0]$/;static CODE_PATTERN=/^```$/;static DIVIDER_PATTERNS=["---","***","___"];static checkHeadingShortcut(e){for(let{pattern:a,type:i}of this.HEADING_PATTERNS)if(a.test(e))return{type:i};return null}static checkListShortcut(e){for(let{pattern:a,type:i}of this.LIST_PATTERNS)if(a.test(e))return{type:"list",listType:i};return null}static checkQuoteShortcut(e){return this.QUOTE_PATTERN.test(e)}static checkCodeShortcut(e){return this.CODE_PATTERN.test(e)}static checkDividerShortcut(e){return this.DIVIDER_PATTERNS.includes(e)}static getSlashMenuItems(){return[{type:"paragraph",label:"Paragraph",icon:"lucide:pilcrow"},{type:"heading-1",label:"Heading 1",icon:"lucide:heading1"},{type:"heading-2",label:"Heading 2",icon:"lucide:heading2"},{type:"heading-3",label:"Heading 3",icon:"lucide:heading3"},{type:"quote",label:"Quote",icon:"lucide:quote"},{type:"code",label:"Code Block",icon:"lucide:fileCode"},{type:"list",label:"Bullet List",icon:"lucide:list"},{type:"image",label:"Image",icon:"lucide:image"},{type:"divider",label:"Divider",icon:"lucide:minus"},{type:"youtube",label:"YouTube",icon:"lucide:youtube"},{type:"markdown",label:"Markdown",icon:"lucide:fileText"},{type:"html",label:"HTML",icon:"lucide:code"},{type:"attachment",label:"File Attachment",icon:"lucide:paperclip"}]}static generateBlockId(){return`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`}}});var X4,ar,Lw,UV=v(()=>{oe();bi();At();Pa();vl();He();X4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ar=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Lw=(()=>{let t=[Q("dees-slash-menu")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],y=[J()],x=[J()],X4(this,null,n,{kind:"accessor",name:"visible",static:!1,private:!1,access:{has:k=>"visible"in k,get:k=>k.visible,set:(k,I)=>{k.visible=I}},metadata:_},s,o),X4(this,null,u,{kind:"accessor",name:"position",static:!1,private:!1,access:{has:k=>"position"in k,get:k=>k.position,set:(k,I)=>{k.position=I}},metadata:_},c,d),X4(this,null,l,{kind:"accessor",name:"filter",static:!1,private:!1,access:{has:k=>"filter"in k,get:k=>k.filter,set:(k,I)=>{k.filter=I}},metadata:_},f,b),X4(this,null,y,{kind:"accessor",name:"selectedIndex",static:!1,private:!1,access:{has:k=>"selectedIndex"in k,get:k=>k.selectedIndex,set:(k,I)=>{k.selectedIndex=I}},metadata:_},g,h),X4(this,null,x,{kind:"accessor",name:"menuZIndex",static:!1,private:!1,access:{has:k=>"menuZIndex"in k,get:k=>k.menuZIndex,set:(k,I)=>{k.menuZIndex=I}},metadata:_},M,S),X4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,config
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: fixed;
        pointer-events: none;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
      }

      .slash-menu {
        position: fixed;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
        padding: 4px;
        min-width: 220px;
        max-height: 300px;
        overflow-y: auto;
        pointer-events: auto;
        user-select: none;
        animation: fadeInScale 0.15s ease-out;
      }

      @keyframes fadeInScale {
        from {
          opacity: 0;
          transform: scale(0.98) translateY(-2px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .slash-menu-item {
        padding: 8px 10px;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 3px;
        color: ${p.bdTheme("#09090b","#fafafa")};
        font-size: 14px;
      }

      .slash-menu-item:hover,
      .slash-menu-item.selected {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .slash-menu-item .icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .slash-menu-item:hover .icon,
      .slash-menu-item.selected .icon {
        color: ${p.bdTheme("#3b82f6","#3b82f6")};
      }
    `];render(){if(!this.visible)return w``;this.style.zIndex=this.menuZIndex.toString();let _=this.getFilteredMenuItems();return w`
      <div 
        class="slash-menu" 
        style="left: ${this.position.x}px; top: ${this.position.y}px;"
        tabindex="-1"
        data-menu-type="slash"
      >
        ${_.map((k,I)=>w`
          <div 
            class="slash-menu-item ${I===this.selectedIndex?"selected":""}"
            data-item-type="${k.type}"
            data-item-index="${I}"
          >
            <dees-icon class="icon" .icon="${k.icon}" iconSize="16"></dees-icon>
            <span>${k.label}</span>
          </div>
        `)}
      </div>
    `}getFilteredMenuItems(){return V1.getSlashMenuItems().filter(k=>this.filter===""||k.label.toLowerCase().includes(this.filter.toLowerCase()))}selectItem(_){this.callback&&this.callback(_),this.hide()}show(_,k){this.position=_,this.callback=k,this.filter="",this.selectedIndex=0,this.menuZIndex=u1.getNextZIndex(),u1.register(this,this.menuZIndex),this.style.zIndex=this.menuZIndex.toString(),this.visible=!0}hide(){this.visible=!1,this.callback=null,this.filter="",this.selectedIndex=0,u1.unregister(this)}updateFilter(_){this.filter=_,this.selectedIndex=0}navigate(_){let k=this.getFilteredMenuItems();_==="down"?this.selectedIndex=(this.selectedIndex+1)%k.length:this.selectedIndex=this.selectedIndex===0?k.length-1:this.selectedIndex-1}selectCurrent(){let _=this.getFilteredMenuItems();_[this.selectedIndex]&&this.selectItem(_[this.selectedIndex].type)}firstUpdated(){this.shadowRoot?.addEventListener("mousedown",_=>{let k=this.shadowRoot?.querySelector(".slash-menu");k&&k.contains(_.target)&&(_.preventDefault(),_.stopPropagation())}),this.shadowRoot?.addEventListener("click",_=>{let I=_.target.closest(".slash-menu-item");if(I){_.preventDefault(),_.stopPropagation();let L=I.getAttribute("data-item-type");L&&this.selectItem(L)}}),this.shadowRoot?.addEventListener("mouseenter",_=>{let I=_.target.closest(".slash-menu-item");if(I){let L=parseInt(I.getAttribute("data-item-index")||"0",10);this.selectedIndex=L}},!0),this.shadowRoot?.addEventListener("focus",_=>{let k=this.shadowRoot?.querySelector(".slash-menu");k&&k.contains(_.target)&&(_.preventDefault(),_.stopPropagation())},!0)}static{ar(i,a)}};return N=i})()});var Oe,Zr=v(()=>{Oe=class{static getSelectionInfo(...e){let a=window.getSelection();if(console.log("WysiwygSelection.getSelectionInfo - selection:",a,"rangeCount:",a?.rangeCount),!a)return null;if("getComposedRanges"in a&&typeof a.getComposedRanges=="function"){console.log("Using getComposedRanges with",e.length,"shadow roots");try{let i=a.getComposedRanges({shadowRoots:e});if(console.log("getComposedRanges returned",i.length,"ranges"),i.length>0){let r=i[0];return{startContainer:r.startContainer,startOffset:r.startOffset,endContainer:r.endContainer,endOffset:r.endOffset,collapsed:r.collapsed}}}catch(i){console.warn("getComposedRanges failed, falling back to getRangeAt:",i)}}else console.log("getComposedRanges not available, using fallback");if(a.rangeCount>0){let i=a.getRangeAt(0);return{startContainer:i.startContainer,startOffset:i.startOffset,endContainer:i.endContainer,endOffset:i.endOffset,collapsed:i.collapsed}}return null}static isSelectionInElement(e,a){let i=a?this.getSelectionInfo(a):this.getSelectionInfo();return i?e.contains(i.startContainer)||e.contains(i.endContainer):!1}static getSelectedText(){let e=window.getSelection();return e?e.toString():""}static createRangeFromInfo(e){let a=document.createRange();return a.setStart(e.startContainer,e.startOffset),a.setEnd(e.endContainer,e.endOffset),a}static setSelectionFromRange(e){let a=window.getSelection();a&&(a.removeAllRanges(),a.addRange(e))}static getCursorPositionInElement(e,...a){let i=a.length>0?this.getSelectionInfo(...a):this.getSelectionInfo();if(!i||!i.collapsed)return null;try{let r=document.createRange();if(r.selectNodeContents(e),this.containsAcrossShadowDOM(e,i.startContainer))return r.setEnd(i.startContainer,i.startOffset),r.toString().length;{let s=e.textContent||"",o=i.startContainer.textContent||"";return i.startOffset===0?0:i.startOffset===o.length?s.length:(console.warn("Selection container not within element, using text matching fallback"),i.startOffset)}}catch(r){return console.warn("Failed to get cursor position:",r),null}}static getCursorPositionFromPoint(e,a,i,...r){if("caretPositionFromPoint"in document&&document.caretPositionFromPoint){let n=null;try{n=document.caretPositionFromPoint(e,a,...r)}catch{n=document.caretPositionFromPoint(e,a)}if(n&&i.contains(n.offsetNode))return this.getOffsetInElement(n.offsetNode,n.offset,i)}if("caretRangeFromPoint"in document){let n=document.caretRangeFromPoint(e,a);if(n&&i.contains(n.startContainer))r
      <div 
        class="formatting-menu" 
        style="top: ${e.y}px; left: ${e.x}px;"
        @mousedown="${i=>{i.preventDefault(),i.stopPropagation()}}"
        @click="${i=>i.stopPropagation()}"
      >
        ${this.formatButtons.map(i=>w`
          <button 
            class="format-button ${i.command}"
            @click="${()=>a(i.command)}"
            title="${i.label}${i.shortcut?` (${i.shortcut})`:""}"
          >
            <span class="${i.command==="code"?"code-icon":""}">${i.icon}</span>
          </button>
        `)}
      </div>
    `}static applyFormat(e,a,i,r){let n;if(i)n=i;else{let s=window.getSelection();if(!s||s.rangeCount===0)return!1;n=s.getRangeAt(0)}switch(e){case"bold":this.wrapSelection(n,"strong");break;case"italic":this.wrapSelection(n,"em");break;case"underline":this.wrapSelection(n,"u");break;case"strikeThrough":this.wrapSelection(n,"s");break;case"code":this.wrapSelection(n,"code");break;case"link":if(!a)return!1;this.wrapSelectionWithLink(n,a);break}if(r&&r.length>0)Oe.setSelectionFromRange(n);else{let s=window.getSelection();s&&(s.removeAllRanges(),s.addRange(n))}return!0}static wrapSelection(e,a){let i=window.getSelection();if(!i)return;if(this.selectionContainsTag(e,a))this.removeTagFromSelection(e,a);else{let n=document.createElement(a);try{let s=e.extractContents();n.appendChild(s),e.insertNode(n),e.selectNodeContents(n),i.removeAllRanges(),i.addRange(e)}catch(s){console.error("Failed to wrap selection:",s)}}}static selectionContainsTag(e,a){let i=e.startContainer;for(;i&&i!==e.commonAncestorContainer.ownerDocument;){if(i.nodeType===Node.ELEMENT_NODE&&i.tagName.toLowerCase()===a)return!0;i=i.parentNode}for(i=e.endContainer;i&&i!==e.commonAncestorContainer.ownerDocument;){if(i.nodeType===Node.ELEMENT_NODE&&i.tagName.toLowerCase()===a)return!0;i=i.parentNode}let r=document.createElement("div"),n=e.cloneContents();return r.appendChild(n),r.getElementsByTagName(a).length>0}static removeTagFromSelection(e,a){let i=window.getSelection();if(!i)return;let r=e.cloneRange(),n=e.startContainer,s=null;for(;n&&n!==e.commonAncestorContainer.ownerDocument;){if(n.nodeType===Node.ELEMENT_NODE&&n.tagName.toLowerCase()===a){s=n;break}n=n.parentNode}let o=e.endContainer,u=null;for(;o&&o!==e.commonAncestorContainer.ownerDocument;){if(o.nodeType===Node.ELEMENT_NODE&&o.tagName.toLowerCase()===a){u=o;break}o=o.parentNode}s&&r.setStartBefore(s),u&&r.setEndAfter(u);let c=r.extractContents(),d=this.removeTagsFromFragment(c,a);r.insertNode(d);let l=[],f=document.createTreeWalker(d,NodeFilter.SHOW_TEXT,null),b;for(;b=f.nextNode();)l.push(b);if(l.length>0){let y=document.createRange();y.setStart(l[0],0),y.setEnd(l[l.length-1],l[l.length-1].textContent?.length||0),i.removeAllRanges(),i.addRange(y)}}static removeTagsFromFragment(e,a){let i=document.createElement("div");i.appendChild(e);let r=i.getElementsByTagName(a);Array.from(r).forEach(o=>{let u=o.parentNode;if(u){for(;o.firstChild;)u.insertBefore(o.firstChild,o);u.removeChild(o)}});let s=document.createDocumentFragment();for(;i.firstChild;)s.appendChild(i.firstChild);return s}static wrapSelectionWithLink(e,a){let i=window.getSelection();if(!i)return;this.selectionContainsTag(e,"a")&&(this.removeTagFromSelection(e,"a"),i.rangeCount>0&&(e=i.getRangeAt(0)));let r=document.createElement("a");r.href=a,r.target="_blank",r.rel="noopener noreferrer";try{let n=e.extractContents();r.appendChild(n),e.insertNode(r),e.selectNodeContents(r),i.removeAllRanges(),i.addRange(e)}catch(n){console.error("Failed to create link:",n)}}static getSelectionCoordinates(...e){let a=Oe.getSelectionInfo(...e);if(console.log("getSelectionCoordinates - selectionInfo:",a),!a)return console.log("No selection info available"),null;let r=Oe.createRangeFromInfo(a).getBoundingClientRect();if(console.log("Range rect:",r),r.width===0&&r.height===0){if(console.log("Rect width and height are 0, trying different approach"),"caretPositionFromPoint"in document){let s=window.getSelection();if(s&&s.rangeCount>0){let o=s.getRangeAt(0),u=document.createElement("span");u.textContent="\u200B",o.insertNode(u);let c=u.getBoundingClientRect();if(u.remove(),c.width>0||c.height>0){let d={x:c.left,y:Math.max(45,c.top-45)};return console.log("Used span trick for coords:",d),d}}}return null}let n={x:r.left+r.width/2,y:Math.max(45,r.top-45)};return console.log("Returning coords:",n),n}}});var $w,yl,Dw,GV=v(()=>{oe();bi();WV();He();$w=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: fixed;
        pointer-events: none;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
      }

      .formatting-menu {
        position: fixed;
        background: ${p.bdTheme("#ffffff","#262626")};
        border: 1px solid ${p.bdTheme("#e0e0e0","#404040")};
        border-radius: 6px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
        padding: 4px;
        display: flex;
        gap: 2px;
        pointer-events: auto;
        user-select: none;
        animation: fadeInScale 0.15s ease-out;
      }

      @keyframes fadeInScale {
        from {
          opacity: 0;
          transform: scale(0.95) translateY(5px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .format-button {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#000000","#e0e0e0")};
        font-weight: 600;
        font-size: 14px;
        position: relative;
      }

      .format-button:hover {
        background: ${p.bdTheme("#f0f0f0","#333333")};
        color: ${p.bdTheme("#0066cc","#4d94ff")};
      }

      .format-button:active {
        transform: scale(0.95);
      }

      .format-button.bold {
        font-weight: 700;
      }

      .format-button.italic {
        font-style: italic;
      }

      .format-button.underline {
        text-decoration: underline;
      }

      .format-button .code-icon {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
        font-size: 12px;
      }
    `];render(){return this.visible?(this.style.zIndex=this.menuZIndex.toString(),w`
      <div 
        class="formatting-menu" 
        style="left: ${this.position.x}px; top: ${this.position.y}px;"
        tabindex="-1"
        data-menu-type="formatting"
      >
        ${Ys.formatButtons.map(g=>w`
          <button 
            class="format-button ${g.command}"
            data-command="${g.command}"
            title="${g.label}${g.shortcut?` (${g.shortcut})`:""}"
          >
            <span class="${g.command==="code"?"code-icon":""}">${g.icon}</span>
          </button>
        `)}
      </div>
    `):w``}applyFormat(g){this.callback&&this.callback(g),g==="link"&&this.hide()}show(g,h){console.log("FormattingMenu.show called:",{position:g,visible:this.visible}),this.position=g,this.callback=h,this.menuZIndex=u1.getNextZIndex(),u1.register(this,this.menuZIndex),this.style.zIndex=this.menuZIndex.toString(),this.visible=!0}hide(){this.visible=!1,this.callback=null,u1.unregister(this)}updatePosition(g){this.position=g}firstUpdated(){this.shadowRoot?.addEventListener("mousedown",g=>{let h=this.shadowRoot?.querySelector(".formatting-menu");h&&h.contains(g.target)&&(g.preventDefault(),g.stopPropagation())}),this.shadowRoot?.addEventListener("click",g=>{let x=g.target.closest(".format-button");if(x){g.preventDefault(),g.stopPropagation();let M=x.getAttribute("data-command");M&&this.applyFormat(M)}}),this.shadowRoot?.addEventListener("focus",g=>{let h=this.shadowRoot?.querySelector(".formatting-menu");h&&h.contains(g.target)&&(g.preventDefault(),g.stopPropagation())},!0)}static{yl(i,a)}};return y=i})()});var K4=v(()=>{oe();Pa();UV();GV()});var Gd,Aw=v(()=>{Gd=["JavaScript","TypeScript","Python","Java","C++","C#","Go","Rust","HTML","CSS","SQL","Shell","JSON","YAML","Markdown","Plain Text"]});var YV,lbt=v(()=>{oe();YV=X`
  :host {
    display: block;
    position: relative;
  }

  .wysiwyg-container {
    background: ${p.bdTheme("#ffffff","#09090b")};
    border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    border-radius: 6px;
    min-height: 200px;
    padding: 24px;
    position: relative;
    transition: all 0.2s ease;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .wysiwyg-container:hover {
    border-color: ${p.bdTheme("#d1d5db","#3f3f46")};
  }

  .wysiwyg-container:focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px ${p.bdTheme("#f4f4f5","#18181b")}, 0 0 0 4px ${p.bdTheme("rgba(59, 130, 246, 0.5)","rgba(59, 130, 246, 0.5)")};
    border-color: ${p.bdTheme("#3b82f6","#3b82f6")};
  }

  /* Visual hint for text selection */
  .editor-content:hover {
    cursor: text;
  }

  .editor-content {
    outline: none;
    min-height: 160px;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .block {
    margin: 0;
    padding: 4px 0;
    position: relative;
    transition: all 0.15s ease;
    min-height: 1.6em;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  /* First and last blocks don't need extra spacing */
  .block-wrapper:first-child .block {
    margin-top: 0 !important;
  }

  .block-wrapper:last-child .block {
    margin-bottom: 0;
  }

  .block.selected {
    background: ${p.bdTheme("rgba(59, 130, 246, 0.05)","rgba(59, 130, 246, 0.05)")};
    outline: 2px solid ${p.bdTheme("rgba(59, 130, 246, 0.2)","rgba(59, 130, 246, 0.2)")};
    outline-offset: -2px;
    border-radius: 4px;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .block[contenteditable] {
    outline: none;
  }

  .block.paragraph {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
  }

  .block.paragraph:empty::before {
    content: "Type '/' for commands...";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
  }

  .block.heading-1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .block.heading-1:empty::before {
    content: "Heading 1";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
  }

  .block.heading-2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .block.heading-2:empty::before {
    content: "Heading 2";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
  }

  .block.heading-3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .block.heading-3:empty::before {
    content: "Heading 3";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
  }

  .block.quote {
    border-left: 2px solid ${p.bdTheme("#e5e7eb","#27272a")};
    padding-left: 20px;
    font-style: italic;
    color: ${p.bdTheme("#71717a","#a1a1aa")};
    margin-left: 0;
    margin-right: 0;
    line-height: 1.6;
  }

  .block.quote:empty::before {
    content: "Quote";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    font-style: italic;
  }

  .code-block-container {
    position: relative;
    margin: 20px 0;
  }

  .code-language {
    position: absolute;
    top: 0;
    right: 0;
    background: ${p.bdTheme("#f4f4f5","#27272a")};
    color: ${p.bdTheme("#71717a","#a1a1aa")};
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 0 4px 0 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: lowercase;
    z-index: 1;
  }

  .block.code {
    background: ${p.bdTheme("#f4f4f5","#18181b")};
    border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    border-radius: 4px;
    padding: 16px;
    padding-top: 32px; /* Make room for language indicator */
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: ${p.bdTheme("#09090b","#fafafa")};
    overflow-x: auto;
  }

  .block.code:empty::before {
    content: "// Code block";
    color: ${p.bdTheme("#71717a","#71717a")};
    pointer-events: none;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
  }

  .block.list {
    padding-left: 0;
  }

  .block.list ul,
  .block.list ol {
    margin: 0;
    padding: 0 0 0 24px;
    list-style-position: outside;
  }

  .block.list ul {
    list-style: disc;
  }

  .block.list ol {
    list-style: decimal;
  }

  .block.list li {
    margin-bottom: 8px;
    line-height: 1.6;
  }

  .block.list li:last-child {
    margin-bottom: 0;
  }

  .block.divider {
    text-align: center;
    padding: 20px 0;
    cursor: default;
    pointer-events: none;
  }

  .block.divider hr {
    border: none;
    border-top: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    margin: 0;
  }

  .slash-menu {
    position: absolute;
    background: ${p.bdTheme("#ffffff","#09090b")};
    border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 4px;
    z-index: 1000;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    pointer-events: auto;
    user-select: none;
  }

  .slash-menu-item {
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 3px;
    color: ${p.bdTheme("#09090b","#fafafa")};
    font-size: 14px;
  }

  .slash-menu-item:hover,
  .slash-menu-item.selected {
    background: ${p.bdTheme("#f4f4f5","#27272a")};
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .slash-menu-item .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: ${p.bdTheme("#71717a","#a1a1aa")};
    font-weight: 600;
  }

  .slash-menu-item:hover .icon,
  .slash-menu-item.selected .icon {
    color: ${p.bdTheme("#3b82f6","#3b82f6")};
  }

  .toolbar {
    position: absolute;
    top: -40px;
    left: 0;
    background: ${p.bdTheme("#ffffff","#09090b")};
    border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 4px;
    display: none;
    gap: 4px;
    z-index: 1000;
  }

  .toolbar.visible {
    display: flex;
  }

  .toolbar-button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .toolbar-button:hover {
    background: ${p.bdTheme("#f4f4f5","#27272a")};
    color: ${p.bdTheme("#3b82f6","#3b82f6")};
  }

  /* Drag and Drop Styles */
  .block-wrapper {
    position: relative;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  /* Ensure proper spacing context for blocks */
  .block-wrapper + .block-wrapper .block {
    margin-top: 16px;
  }

  /* Override for headings following other blocks */
  .block-wrapper + .block-wrapper .block.heading-1,
  .block-wrapper + .block-wrapper .block.heading-2,
  .block-wrapper + .block-wrapper .block.heading-3 {
    margin-top: 24px;
  }

  /* Code and quote blocks need consistent spacing */
  .block-wrapper + .block-wrapper .block.code,
  .block-wrapper + .block-wrapper .block.quote {
    margin-top: 20px;
  }

  .drag-handle {
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${p.bdTheme("#71717a","#71717a")};
    border-radius: 4px;
  }

  .drag-handle::before {
    content: "⋮⋮";
    font-size: 12px;
    letter-spacing: -2px;
  }

  .block-wrapper:hover .drag-handle {
    opacity: 1;
  }

  .drag-handle:hover {
    color: ${p.bdTheme("#71717a","#a1a1aa")};
    background: ${p.bdTheme("#f4f4f5","#27272a")};
  }

  .drag-handle:active {
    cursor: grabbing;
    background: ${p.bdTheme("#e5e7eb","#3f3f46")};
  }

  .block-wrapper.dragging {
    opacity: 0.8;
    pointer-events: none;
    position: relative;
    z-index: 2001;
    transition: none !important;
  }


  /* Blocks that should move out of the way */
  .block-wrapper.move-down {
    transform: translateY(var(--drag-offset, 0px));
  }

  .block-wrapper.move-up {
    transform: translateY(calc(-1 * var(--drag-offset, 0px)));
  }

  /* Drop indicator */
  .drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    background: ${p.bdTheme("rgba(59, 130, 246, 0.05)","rgba(59, 130, 246, 0.05)")};
    border: 2px dashed ${p.bdTheme("#3b82f6","#3b82f6")};
    border-radius: 4px;
    transition: top 0.2s ease, height 0.2s ease;
    pointer-events: none;
    z-index: 1999;
    box-sizing: border-box;
  }

  /* Remove old drag-over styles */
  .block-wrapper.drag-over-before,
  .block-wrapper.drag-over-after {
    /* No longer needed, using drop indicator instead */
  }

  .editor-content.dragging * {
    user-select: none;
  }

  /* Block Settings Button - Removed in favor of context menu */

  /* Text Selection Styles */
  .block ::selection {
    background: ${p.bdTheme("rgba(59, 130, 246, 0.2)","rgba(59, 130, 246, 0.2)")};
    color: inherit;
  }

  /* Formatting Menu */
  .formatting-menu {
    position: absolute;
    background: ${p.bdTheme("#ffffff","#09090b")};
    border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 4px;
    display: flex;
    gap: 2px;
    z-index: 1001;
    animation: fadeInScale 0.15s ease-out;
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.98) translateY(2px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .format-button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${p.bdTheme("#09090b","#fafafa")};
    font-weight: 600;
    font-size: 14px;
    position: relative;
  }

  .format-button:hover {
    background: ${p.bdTheme("#f4f4f5","#27272a")};
    color: ${p.bdTheme("#3b82f6","#3b82f6")};
  }

  .format-button:active {
    transform: scale(0.95);
  }

  .format-button.bold {
    font-weight: 700;
  }

  .format-button.italic {
    font-style: italic;
  }

  .format-button.underline {
    text-decoration: underline;
  }

  .format-button .code-icon {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 12px;
  }

  /* Applied format styles in content */
  .block strong,
  .block b {
    font-weight: 600;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .block em,
  .block i {
    font-style: italic;
  }

  .block u {
    text-decoration: underline;
  }

  .block strike,
  .block s {
    text-decoration: line-through;
    opacity: 0.7;
  }

  .block code {
    background: ${p.bdTheme("#f4f4f5","#27272a")};
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.9em;
    color: ${p.bdTheme("#09090b","#fafafa")};
  }

  .block a {
    color: ${p.bdTheme("#3b82f6","#3b82f6")};
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
  }

  .block a:hover {
    border-bottom-color: ${p.bdTheme("#3b82f6","#3b82f6")};
  }
`});var zi,ZV=v(()=>{Pa();zi=class{static escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}static formatFileSize(e){if(e===0)return"0 Bytes";let a=1024,i=["Bytes","KB","MB","GB"],r=Math.floor(Math.log(e)/Math.log(a));return parseFloat((e/Math.pow(a,r)).toFixed(2))+" "+i[r]}static getHtmlOutput(e){return e.map(a=>{let i=a.content.includes("<")&&a.content.includes(">")?a.content:this.escapeHtml(a.content);switch(a.type){case"paragraph":return a.content?`<p>${i}</p>`:"";case"heading-1":return`<h1>${i}</h1>`;case"heading-2":return`<h2>${i}</h2>`;case"heading-3":return`<h3>${i}</h3>`;case"quote":return`<blockquote>${i}</blockquote>`;case"code":return`<pre><code>${this.escapeHtml(a.content)}</code></pre>`;case"list":let r=a.content.split(`
`).filter(u=>u.trim());if(r.length>0){let u=a.metadata?.listType==="ordered"?"ol":"ul";return`<${u}>${r.map(c=>`<li>${c}</li>`).join("")}</${u}>`}return"";case"divider":return"<hr>";case"image":let n=a.metadata?.url;if(n){let u=this.escapeHtml(a.content||"Image");return`<img src="${n}" alt="${u}" />`}return"";case"youtube":let s=a.metadata?.videoId;return s?`<iframe width="560" height="315" src="https://www.youtube.com/embed/${s}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:"";case"markdown":return`<div class="markdown-content">${this.escapeHtml(a.content)}</div>`;case"html":return a.content;case"attachment":let o=a.metadata?.files||[];return o.length>0?`<div class="attachments">${o.map(u=>`<div class="attachment-item" data-file-id="${u.id}">
                <a href="${u.data}" download="${u.name}">${this.escapeHtml(u.name)}</a>
                <span class="file-size">(${this.formatFileSize(u.size)})</span>
              </div>`).join("")}</div>`:"";default:return`<p>${i}</p>`}}).filter(a=>a!=="").join(`
`)}static getMarkdownOutput(e){return e.map(a=>{switch(a.type){case"paragraph":return a.content;case"heading-1":return`# ${a.content}`;case"heading-2":return`## ${a.content}`;case"heading-3":return`### ${a.content}`;case"quote":return`> ${a.content}`;case"code":return`\`\`\`
${a.content}
\`\`\``;case"list":let i=a.content.split(`
`).filter(c=>c.trim());return a.metadata?.listType==="ordered"?i.map((c,d)=>`${d+1}. ${c}`).join(`
`):i.map(c=>`- ${c}`).join(`
`);case"divider":return"---";case"image":let r=a.metadata?.url,n=a.content||"Image";return r?`![${n}](${r})`:"";case"youtube":let s=a.metadata?.videoId,o=a.metadata?.url||(s?`https://youtube.com/watch?v=${s}`:"");return o?`[YouTube Video](${o})`:"";case"markdown":return a.content;case"html":return`<!-- HTML Block
${a.content}
-->`;case"attachment":let u=a.metadata?.files||[];return u.length>0?u.map(c=>`- [${c.name}](${c.data})`).join(`
`):"";default:return a.content}}).filter(a=>a!=="").join(`

`)}static parseHtmlToBlocks(e){let i=new DOMParser().parseFromString(e,"text/html"),r=[],n=s=>{if(s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"paragraph",content:s.textContent.trim()});else if(s.nodeType===Node.ELEMENT_NODE){let o=s,u=o.tagName.toLowerCase();switch(u){case"p":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"paragraph",content:o.innerHTML||""});break;case"h1":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-1",content:o.innerHTML||""});break;case"h2":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-2",content:o.innerHTML||""});break;case"h3":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-3",content:o.innerHTML||""});break;case"blockquote":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"quote",content:o.innerHTML||""});break;case"pre":case"code":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"code",content:o.textContent||""});break;case"ul":case"ol":let d=Array.from(o.querySelectorAll("li")).map(f=>f.innerHTML||"").join(`
`);r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"list",content:d,metadata:{listType:u==="ol"?"ordered":"bullet"}});break;case"hr":r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"divider",content:" "});break;case"img":let l=o;r.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"image",content:l.alt||"",metadata:{url:l.src}});break;default:o.childNodes.forEach(f=>n(f))}}};return i.body.childNodes.forEach(s=>n(s)),r}static parseMarkdownToBlocks(e){let a=e.split(`
`),i=[],r=[];for(let n=0;n<a.length;n++){let s=a[n];if(s.startsWith("# "))i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-1",content:s.substring(2)});else if(s.startsWith("## "))i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-2",content:s.substring(3)});else if(s.startsWith("### "))i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"heading-3",content:s.substring(4)});else if(s.startsWith("> "))i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"quote",content:s.substring(2)});else if(s.startsWith("```")){let o=[];for(n++;n<a.length&&!a[n].startsWith("```");)o.push(a[n]),n++;i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"code",content:o.join(`
`)})}else if(s.match(/^(\*|-) /))r.push(s.substring(2)),(n===a.length-1||!a[n+1].match(/^(\*|-) /))&&(i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"list",content:r.join(`
`),metadata:{listType:"bullet"}}),r=[]);else if(s.match(/^\d+\. /))r.push(s.replace(/^\d+\. /,"")),(n===a.length-1||!a[n+1].match(/^\d+\. /))&&(i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"list",content:r.join(`
`),metadata:{listType:"ordered"}}),r=[]);else if(s==="---"||s==="***"||s==="___")i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"divider",content:" "});else if(s.match(/^!\[([^\]]*)\]\(([^\)]+)\)$/)){let o=s.match(/^!\[([^\]]*)\]\(([^\)]+)\)$/);o&&i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"image",content:o[1]||"",metadata:{url:o[2]}})}else s.trim()&&i.push({id:`block-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,type:"paragraph",content:s})}return i}}});var T2,Zs=v(()=>{oe();Pa();ZV();T2=class{static renderListContent(e,a){let i=e.split(`
`).filter(n=>n.trim());if(i.length===0)return"";let r=a?.listType==="ordered"?"ol":"ul";return`<${r}>${i.map(n=>`<li>${n}</li>`).join("")}</${r}>`}static renderBlock(e,a,i){if(e.type==="divider")return w`
        <div
          class="block divider"
          data-block-id="${e.id}"
        >
          <hr>
        </div>
      `;if(e.type==="list")return w`
        <div
          class="block list ${a?"selected":""}"
          data-block-id="${e.id}"
          contenteditable="true"
          @input="${i.onInput}"
          @keydown="${i.onKeyDown}"
          @focus="${i.onFocus}"
          @blur="${i.onBlur}"
          @compositionstart="${i.onCompositionStart}"
          @compositionend="${i.onCompositionEnd}"
          @mouseup="${n=>{console.log("Block mouseup event fired"),i.onMouseUp&&i.onMouseUp(n)}}"
          .innerHTML="${this.renderListContent(e.content,e.metadata)}"
        ></div>
      `;if(e.type==="code"){let n=e.metadata?.language||"plain text";return w`
        <div class="code-block-container">
          <div class="code-language">${n}</div>
          <div
            class="block ${e.type} ${a?"selected":""}"
            contenteditable="true"
            @input="${i.onInput}"
            @keydown="${i.onKeyDown}"
            @focus="${i.onFocus}"
            @blur="${i.onBlur}"
            @compositionstart="${i.onCompositionStart}"
            @compositionend="${i.onCompositionEnd}"
            @mouseup="${s=>{console.log("Block mouseup event fired"),i.onMouseUp&&i.onMouseUp(s)}}"
            .textContent="${e.content||""}"
          ></div>
        </div>
      `}return w`
      <div
        class="block ${e.type} ${a?"selected":""}"
        contenteditable="true"
        @input="${i.onInput}"
        @keydown="${i.onKeyDown}"
        @focus="${i.onFocus}"
        @blur="${i.onBlur}"
        @compositionstart="${i.onCompositionStart}"
        @compositionend="${i.onCompositionEnd}"
        @mouseup="${n=>{console.log("Block mouseup event fired"),i.onMouseUp&&i.onMouseUp(n)}}"
        .innerHTML="${e.content||""}"
      ></div>
    `}static setCursorToEnd(e){let a=window.getSelection();if(!a)return;let i=document.createRange();if(e.childNodes.length===0){let r=document.createTextNode("\u200B");e.appendChild(r),i.setStart(r,1),i.collapse(!0)}else{let r=this.getLastNode(e);r.nodeType===Node.TEXT_NODE?i.setStart(r,r.textContent?.length||0):i.setStartAfter(r),i.collapse(!0)}a.removeAllRanges(),a.addRange(i),e.textContent==="\u200B"&&(e.textContent="")}static setCursorToStart(e){let a=window.getSelection();if(!a)return;let i=document.createRange();if(e.childNodes.length===0)i.setStart(e,0),i.collapse(!0);else{let r=this.getFirstNode(e);r.nodeType===Node.TEXT_NODE?i.setStart(r,0):i.setStartBefore(r),i.collapse(!0)}a.removeAllRanges(),a.addRange(i)}static getLastNode(e){if(e.childNodes.length===0)return e;let a=e.childNodes[e.childNodes.length-1];return a.nodeType===Node.TEXT_NODE||a.childNodes.length===0?a:this.getLastNode(a)}static getFirstNode(e){if(e.childNodes.length===0)return e;let a=e.childNodes[0];return a.nodeType===Node.TEXT_NODE||a.childNodes.length===0?a:this.getFirstNode(a)}static focusListItem(e){let a=e.querySelector("li");if(a){a.focus();let i=document.createRange(),r=window.getSelection();i.selectNodeContents(a),i.collapse(!0),r.removeAllRanges(),r.addRange(i)}}}});var Yd,XV=v(()=>{Pa();K4();vl();Zs();Yd=class{component;constructor(e){this.component=e}createBlock(e="paragraph",a="",i){return{id:V1.generateBlockId(),type:e,content:a,...i&&{metadata:i}}}async insertBlockAfter(e,a,i=!0){let r=this.component.blocks,n=r.findIndex(s=>s.id===e.id);if(this.component.blocks=[...r.slice(0,n+1),a,...r.slice(n+1)],this.component.editorContentRef){let s=this.component.editorContentRef.querySelector(`[data-block-id="${e.id}"]`);if(s){let o=this.component.createBlockElement(a);s.insertAdjacentElement("afterend",o)}}this.component.updateValue(),i&&a.type!=="divider"&&(await new Promise(s=>setTimeout(s,0)),await this.focusBlock(a.id,"start"))}removeBlock(e){if(this.component.saveToHistory(!1),this.component.blocks=this.component.blocks.filter(a=>a.id!==e),this.component.editorContentRef){let a=this.component.editorContentRef.querySelector(`[data-block-id="${e}"]`);a&&a.remove()}this.component.updateValue()}findBlock(e){return this.component.blocks.find(a=>a.id===e)}getBlockIndex(e){return this.component.blocks.findIndex(a=>a.id===e)}async focusBlock(e,a="start"){let i=this.component.shadowRoot.querySelector(`[data-block-id="${e}"]`);if(i){let r=i.querySelector("dees-wysiwyg-block");r&&(await new Promise(n=>requestAnimationFrame(n)),r.focusWithCursor(a))}}updateBlockContent(e,a){let i=this.findBlock(e);i&&(i.content=a,this.component.updateValue())}transformBlock(e,a,i){let r=this.findBlock(e);r&&(this.component.saveToHistory(!1),r.type=a,r.content="",i&&(r.metadata=i),this.component.editorContentRef&&this.component.updateBlockElement(e),this.component.updateValue())}moveBlock(e,a){let i=[...this.component.blocks],r=this.getBlockIndex(e);if(r===-1||a<0||a>=i.length)return;let[n]=i.splice(r,1);i.splice(a,0,n),this.component.blocks=i,this.component.updateValue()}getPreviousBlock(e){let a=this.getBlockIndex(e);return a>0?this.component.blocks[a-1]:null}getNextBlock(e){let a=this.getBlockIndex(e);return a<this.component.blocks.length-1?this.component.blocks[a+1]:null}}});var M1,Ka=v(()=>{M1=class{setup(e,a,i){}getStyles(){return""}}});var e1,cbt=v(()=>{e1=class{static handlers=new Map;static register(e,a){this.handlers.set(e,a)}static getHandler(e){return this.handlers.get(e)}static getAllTypes(){return Array.from(this.handlers.keys())}}});var dbt=v(()=>{});var Zd,pbt=v(()=>{Ka();oe();Zs();Zr();Zd=class extends M1{type="paragraph";lastKnownCursorPosition=0;lastSelectedText="";selectionHandler=null;render(e,a){let i=a?" selected":"",r=this.getPlaceholder();return`
      <div
        class="block paragraph${i}"
        contenteditable="true"
        data-placeholder="${r}"
        data-block-id="${e.id}"
        data-block-type="${e.type}"
      ></div>
    `}setup(e,a,i){let r=e.querySelector(".block.paragraph");if(!r){console.error("ParagraphBlockHandler.setup: No paragraph block element found");return}a.content&&!r.innerHTML&&(r.innerHTML=a.content),r.addEventListener("input",n=>{i.onInput(n);let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),r.addEventListener("keydown",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onKeyDown(n)}),r.addEventListener("focus",()=>{i.onFocus()}),r.addEventListener("blur",()=>{i.onBlur()}),r.addEventListener("compositionstart",()=>{i.onCompositionStart()}),r.addEventListener("compositionend",()=>{i.onCompositionEnd()}),r.addEventListener("mouseup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onMouseUp?.(n)}),r.addEventListener("click",n=>{setTimeout(()=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)},0)}),r.addEventListener("keyup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),this.setupSelectionHandler(e,r,a)}setupSelectionHandler(e,a,i){let r=()=>{let s=window.getSelection();if(!s||s.rangeCount===0)return;let o=s.toString();if(o.length===0){this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}));return}let u=a.getRootNode().host,d=u?.closest("dees-input-wysiwyg")?.shadowRoot,l=u?.shadowRoot,f=[];d&&f.push(d),l&&f.push(l);let b=Oe.getSelectionInfo(...f);if(!b)return;let y=Oe.containsAcrossShadowDOM(a,b.startContainer),g=Oe.containsAcrossShadowDOM(a,b.endContainer);if(y||g){if(o!==this.lastSelectedText){this.lastSelectedText=o;let h=Oe.createRangeFromInfo(b),x=h.getBoundingClientRect();this.dispatchSelectionEvent(e,{text:o.trim(),blockId:i.id,range:h,rect:x,hasSelection:!0})}}else this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}))};document.addEventListener("selectionchange",r),this.selectionHandler=r;let n=e.closest("dees-wysiwyg-block");if(n){let s=n.disconnectedCallback;n.disconnectedCallback=async function(){this.selectionHandler&&(document.removeEventListener("selectionchange",this.selectionHandler),this.selectionHandler=null),s&&await s.call(n)}.bind(this)}}dispatchSelectionEvent(e,a){let i=new CustomEvent("block-text-selected",{detail:a,bubbles:!0,composed:!0});e.dispatchEvent(i)}getStyles(){return`
      /* Paragraph specific styles */
      .block.paragraph {
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
      }
    `}getPlaceholder(){return"Type '/' for commands..."}getLastTextNode(e){if(e.nodeType===Node.TEXT_NODE)return e;for(let a=e.childNodes.length-1;a>=0;a--){let i=this.getLastTextNode(e.childNodes[a]);if(i)return i}return null}getCursorPosition(e,a){let i=e.querySelector(".block.paragraph");if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c||!Oe.containsAcrossShadowDOM(i,c.startContainer))return null;let d=document.createRange();return d.selectNodeContents(i),d.setEnd(c.startContainer,c.startOffset),d.toString().length}getContent(e,a){let i=e.querySelector(".block.paragraph");return i&&i.innerHTML||""}setContent(e,a,i){let r=e.querySelector(".block.paragraph");if(!r)return;let n=document.activeElement===r||e.shadowRoot?.activeElement===r;r.innerHTML=a,n&&r.focus()}setCursorToStart(e,a){let i=e.querySelector(".block.paragraph");i&&T2.setCursorToStart(i)}setCursorToEnd(e,a){let i=e.querySelector(".block.paragraph");i&&T2.setCursorToEnd(i)}focus(e,a){let i=e.querySelector(".block.paragraph");i&&(i.hasAttribute("contenteditable")||i.setAttribute("contenteditable","true"),i.focus(),document.activeElement!==i&&e.shadowRoot?.activeElement!==i&&Promise.resolve().then(()=>{i.focus()}))}focusWithCursor(e,a="end",i){let r=e.querySelector(".block.paragraph");if(!r)return;if(r.hasAttribute("contenteditable")||r.setAttribute("contenteditable","true"),a==="end"&&r.textContent&&r.textContent.length>0){let s=window.getSelection();if(s){let o=document.createRange(),u=this.getLastTextNode(r)||r;u.nodeType===Node.TEXT_NODE?(o.setStart(u,u.textContent?.length||0),o.setEnd(u,u.textContent?.length||0)):(o.selectNodeContents(u),o.collapse(!1)),s.removeAllRanges(),s.addRange(o)}}r.focus();let n=()=>{a==="start"?this.setCursorToStart(e,i):a==="end"&&(!r.textContent||r.textContent.length===0)?this.setCursorToEnd(e,i):typeof a=="number"&&Oe.setCursorPosition(r,a)};document.activeElement===r||e.shadowRoot?.activeElement===r?n():Promise.resolve().then(()=>{document.activeElement===r||e.shadowRoot?.activeElement===r?n():setTimeout(()=>{(document.activeElement===r||e.shadowRoot?.activeElement===r)&&n()},10)})}getSplitContent(e,a){let i=e.querySelector(".block.paragraph");if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}if(!Oe.containsAcrossShadowDOM(i,c.startContainer)){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}let d=this.getCursorPosition(e,a);if(d===null||d===0)return{before:"",after:i.innerHTML};let l=document.createRange(),f=document.createRange();l.setStart(i,0),l.setEnd(c.startContainer,c.startOffset),f.setStart(c.startContainer,c.startOffset),f.setEnd(i,i.childNodes.length);let b=l.cloneContents(),y=f.cloneContents(),g=document.createElement("div");g.appendChild(b);let h=g.innerHTML;g.innerHTML="",g.appendChild(y);let x=g.innerHTML;return{before:h,after:x}}}});var xl,ubt=v(()=>{Ka();oe();Zs();Zr();xl=class extends M1{type;level;lastKnownCursorPosition=0;lastSelectedText="";selectionHandler=null;constructor(e){super(),this.type=e,this.level=parseInt(e.split("-")[1])}render(e,a){let i=a?" selected":"",r=this.getPlaceholder();return`
      <div
        class="block heading-${this.level}${i}"
        contenteditable="true"
        data-placeholder="${r}"
        data-block-id="${e.id}"
        data-block-type="${e.type}"
      ></div>
    `}setup(e,a,i){let r=e.querySelector(`.block.heading-${this.level}`);if(!r){console.error("HeadingBlockHandler.setup: No heading block element found");return}a.content&&!r.innerHTML&&(r.innerHTML=a.content),r.addEventListener("input",n=>{i.onInput(n);let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),r.addEventListener("keydown",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onKeyDown(n)}),r.addEventListener("focus",()=>{i.onFocus()}),r.addEventListener("blur",()=>{i.onBlur()}),r.addEventListener("compositionstart",()=>{i.onCompositionStart()}),r.addEventListener("compositionend",()=>{i.onCompositionEnd()}),r.addEventListener("mouseup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onMouseUp?.(n)}),r.addEventListener("click",n=>{setTimeout(()=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)},0)}),r.addEventListener("keyup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),this.setupSelectionHandler(e,r,a)}setupSelectionHandler(e,a,i){let r=()=>{let s=window.getSelection();if(!s||s.rangeCount===0)return;let o=s.toString();if(o.length===0){this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}));return}let u=a.getRootNode().host,d=u?.closest("dees-input-wysiwyg")?.shadowRoot,l=u?.shadowRoot,f=[];d&&f.push(d),l&&f.push(l);let b=Oe.getSelectionInfo(...f);if(!b)return;let y=Oe.containsAcrossShadowDOM(a,b.startContainer),g=Oe.containsAcrossShadowDOM(a,b.endContainer);if(y||g){if(o!==this.lastSelectedText){this.lastSelectedText=o;let h=Oe.createRangeFromInfo(b),x=h.getBoundingClientRect();this.dispatchSelectionEvent(e,{text:o.trim(),blockId:i.id,range:h,rect:x,hasSelection:!0})}}else this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}))};document.addEventListener("selectionchange",r),this.selectionHandler=r;let n=a.getRootNode().host;if(n){let s=n.disconnectedCallback;n.disconnectedCallback=async function(){this.selectionHandler&&(document.removeEventListener("selectionchange",this.selectionHandler),this.selectionHandler=null),s&&await s.call(n)}.bind(this)}}dispatchSelectionEvent(e,a){let i=new CustomEvent("block-text-selected",{detail:a,bubbles:!0,composed:!0});e.dispatchEvent(i)}getStyles(){return`
      .block.heading-1 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        margin: 24px 0 8px 0;
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .block.heading-2 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        margin: 20px 0 6px 0;
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .block.heading-3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
        margin: 16px 0 4px 0;
        color: ${p.bdTheme("#000000","#ffffff")};
      }
    `}getPlaceholder(){switch(this.level){case 1:return"Heading 1";case 2:return"Heading 2";case 3:return"Heading 3";default:return"Heading"}}getLastTextNode(e){if(e.nodeType===Node.TEXT_NODE)return e;for(let a=e.childNodes.length-1;a>=0;a--){let i=this.getLastTextNode(e.childNodes[a]);if(i)return i}return null}getCursorPosition(e,a){let i=e.querySelector(`.block.heading-${this.level}`);if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c||!Oe.containsAcrossShadowDOM(i,c.startContainer))return null;let d=document.createRange();return d.selectNodeContents(i),d.setEnd(c.startContainer,c.startOffset),d.toString().length}getContent(e,a){let i=e.querySelector(`.block.heading-${this.level}`);return i&&i.innerHTML||""}setContent(e,a,i){let r=e.querySelector(`.block.heading-${this.level}`);if(!r)return;let n=document.activeElement===r||e.shadowRoot?.activeElement===r;r.innerHTML=a,n&&r.focus()}setCursorToStart(e,a){let i=e.querySelector(`.block.heading-${this.level}`);i&&T2.setCursorToStart(i)}setCursorToEnd(e,a){let i=e.querySelector(`.block.heading-${this.level}`);i&&T2.setCursorToEnd(i)}focus(e,a){let i=e.querySelector(`.block.heading-${this.level}`);i&&(i.hasAttribute("contenteditable")||i.setAttribute("contenteditable","true"),i.focus(),document.activeElement!==i&&e.shadowRoot?.activeElement!==i&&Promise.resolve().then(()=>{i.focus()}))}focusWithCursor(e,a="end",i){let r=e.querySelector(`.block.heading-${this.level}`);if(!r)return;if(r.hasAttribute("contenteditable")||r.setAttribute("contenteditable","true"),a==="end"&&r.textContent&&r.textContent.length>0){let s=window.getSelection();if(s){let o=document.createRange(),u=this.getLastTextNode(r)||r;u.nodeType===Node.TEXT_NODE?(o.setStart(u,u.textContent?.length||0),o.setEnd(u,u.textContent?.length||0)):(o.selectNodeContents(u),o.collapse(!1)),s.removeAllRanges(),s.addRange(o)}}r.focus();let n=()=>{a==="start"?this.setCursorToStart(e,i):a==="end"&&(!r.textContent||r.textContent.length===0)?this.setCursorToEnd(e,i):typeof a=="number"&&Oe.setCursorPosition(r,a)};document.activeElement===r||e.shadowRoot?.activeElement===r?n():Promise.resolve().then(()=>{document.activeElement===r||e.shadowRoot?.activeElement===r?n():setTimeout(()=>{(document.activeElement===r||e.shadowRoot?.activeElement===r)&&n()},10)})}getSplitContent(e,a){let i=e.querySelector(`.block.heading-${this.level}`);if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}if(!Oe.containsAcrossShadowDOM(i,c.startContainer)){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}let d=this.getCursorPosition(e,a);if(d===null||d===0)return{before:"",after:i.innerHTML};let l=document.createRange(),f=document.createRange();l.setStart(i,0),l.setEnd(c.startContainer,c.startOffset),f.setStart(c.startContainer,c.startOffset),f.setEnd(i,i.childNodes.length);let b=l.cloneContents(),y=f.cloneContents(),g=document.createElement("div");g.appendChild(b);let h=g.innerHTML;g.innerHTML="",g.appendChild(y);let x=g.innerHTML;return{before:h,after:x}}}});var Xd,hbt=v(()=>{Ka();oe();Zs();Zr();Xd=class extends M1{type="quote";lastKnownCursorPosition=0;lastSelectedText="";selectionHandler=null;render(e,a){let i=a?" selected":"",r=this.getPlaceholder();return`
      <div
        class="block quote${i}"
        contenteditable="true"
        data-placeholder="${r}"
        data-block-id="${e.id}"
        data-block-type="${e.type}"
      ></div>
    `}setup(e,a,i){let r=e.querySelector(".block.quote");if(!r){console.error("QuoteBlockHandler.setup: No quote block element found");return}a.content&&!r.innerHTML&&(r.innerHTML=a.content),r.addEventListener("input",n=>{i.onInput(n);let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),r.addEventListener("keydown",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onKeyDown(n)}),r.addEventListener("focus",()=>{i.onFocus()}),r.addEventListener("blur",()=>{i.onBlur()}),r.addEventListener("compositionstart",()=>{i.onCompositionStart()}),r.addEventListener("compositionend",()=>{i.onCompositionEnd()}),r.addEventListener("mouseup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onMouseUp?.(n)}),r.addEventListener("click",n=>{setTimeout(()=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)},0)}),r.addEventListener("keyup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),this.setupSelectionHandler(e,r,a)}setupSelectionHandler(e,a,i){let r=()=>{let s=window.getSelection();if(!s||s.rangeCount===0)return;let o=s.toString();if(o.length===0){this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}));return}let u=a.getRootNode().host,d=u?.closest("dees-input-wysiwyg")?.shadowRoot,l=u?.shadowRoot,f=[];d&&f.push(d),l&&f.push(l);let b=Oe.getSelectionInfo(...f);if(!b)return;let y=Oe.containsAcrossShadowDOM(a,b.startContainer),g=Oe.containsAcrossShadowDOM(a,b.endContainer);if(y||g){if(o!==this.lastSelectedText){this.lastSelectedText=o;let h=Oe.createRangeFromInfo(b),x=h.getBoundingClientRect();this.dispatchSelectionEvent(e,{text:o.trim(),blockId:i.id,range:h,rect:x,hasSelection:!0})}}else this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}))};document.addEventListener("selectionchange",r),this.selectionHandler=r;let n=a.getRootNode().host;if(n){let s=n.disconnectedCallback;n.disconnectedCallback=async function(){this.selectionHandler&&(document.removeEventListener("selectionchange",this.selectionHandler),this.selectionHandler=null),s&&await s.call(n)}.bind(this)}}dispatchSelectionEvent(e,a){let i=new CustomEvent("block-text-selected",{detail:a,bubbles:!0,composed:!0});e.dispatchEvent(i)}getStyles(){return`
      /* Quote specific styles */
      .block.quote {
        border-left: 3px solid ${p.bdTheme("#0066cc","#4d94ff")};
        padding-left: 20px;
        color: ${p.bdTheme("#555","#b0b0b0")};
        font-style: italic;
        line-height: 1.6;
        margin: 16px 0;
      }
    `}getPlaceholder(){return"Add a quote..."}getCursorPosition(e,a){let i=e.querySelector(".block.quote");if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c||!Oe.containsAcrossShadowDOM(i,c.startContainer))return null;let d=document.createRange();return d.selectNodeContents(i),d.setEnd(c.startContainer,c.startOffset),d.toString().length}getContent(e,a){let i=e.querySelector(".block.quote");return i&&i.innerHTML||""}setContent(e,a,i){let r=e.querySelector(".block.quote");if(!r)return;let n=document.activeElement===r||e.shadowRoot?.activeElement===r;r.innerHTML=a,n&&r.focus()}setCursorToStart(e,a){let i=e.querySelector(".block.quote");i&&T2.setCursorToStart(i)}setCursorToEnd(e,a){let i=e.querySelector(".block.quote");i&&T2.setCursorToEnd(i)}focus(e,a){let i=e.querySelector(".block.quote");i&&(i.hasAttribute("contenteditable")||i.setAttribute("contenteditable","true"),i.focus(),document.activeElement!==i&&e.shadowRoot?.activeElement!==i&&Promise.resolve().then(()=>{i.focus()}))}focusWithCursor(e,a="end",i){let r=e.querySelector(".block.quote");if(!r)return;r.hasAttribute("contenteditable")||r.setAttribute("contenteditable","true"),r.focus();let n=()=>{a==="start"?this.setCursorToStart(e,i):a==="end"?this.setCursorToEnd(e,i):typeof a=="number"&&Oe.setCursorPosition(r,a)};document.activeElement===r||e.shadowRoot?.activeElement===r?n():Promise.resolve().then(()=>{(document.activeElement===r||e.shadowRoot?.activeElement===r)&&n()})}getSplitContent(e,a){let i=e.querySelector(".block.quote");if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}if(!Oe.containsAcrossShadowDOM(i,c.startContainer)){if(this.lastKnownCursorPosition!==null){let M=i.textContent||"",S=Math.min(this.lastKnownCursorPosition,M.length);return{before:M.substring(0,S),after:M.substring(S)}}return null}let d=this.getCursorPosition(e,a);if(d===null||d===0)return{before:"",after:i.innerHTML};let l=document.createRange(),f=document.createRange();l.setStart(i,0),l.setEnd(c.startContainer,c.startOffset),f.setStart(c.startContainer,c.startOffset),f.setEnd(i,i.childNodes.length);let b=l.cloneContents(),y=f.cloneContents(),g=document.createElement("div");g.appendChild(b);let h=g.innerHTML;g.innerHTML="",g.appendChild(y);let x=g.innerHTML;return{before:h,after:x}}}});var Kd,fbt=v(()=>{Ka();oe();Zr();la();Aw();zo();Kd=class extends M1{type="code";highlightTimer=null;highlightJs=null;render(e,a){let i=e.metadata?.language||"typescript",r=e.content||"",n=r.split(`
`).length,s="";for(let u=1;u<=n;u++)s+=`<div class="line-number">${u}</div>`;let o=Gd.map(u=>{let c=u.toLowerCase();return`<option value="${c}" ${c===i?"selected":""}>${u}</option>`}).join("");return`
      <div class="code-block-container${a?" selected":""}" data-language="${i}">
        <div class="code-header">
          <select class="language-selector" data-block-id="${e.id}">
            ${o}
          </select>
          <button class="copy-button" title="Copy code">
            <svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
              <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
            </svg>
            <span class="copy-text">Copy</span>
          </button>
        </div>
        <div class="code-body">
          <div class="line-numbers">${s}</div>
          <div class="code-content">
            <pre class="code-pre"><code class="code-editor" 
                 contenteditable="true"
                 data-block-id="${e.id}"
                 data-block-type="${e.type}"
                 spellcheck="false">${this.escapeHtml(r)}</code></pre>
          </div>
        </div>
      </div>
    `}setup(e,a,i){let r=e.querySelector(".code-editor"),n=e.querySelector(".code-block-container"),s=e.querySelector(".copy-button"),o=e.querySelector(".language-selector");if(!r||!n)return;o&&o.addEventListener("change",c=>{let d=c.target.value;a.metadata={...a.metadata,language:d},n.setAttribute("data-language",d),a.content&&document.activeElement!==r&&this.applyHighlighting(e,a),i.onInput&&i.onInput(new InputEvent("input"))}),s&&s.addEventListener("click",async()=>{let c=r.textContent||"";try{await navigator.clipboard.writeText(c);let d=s.querySelector(".copy-text"),l=d.textContent;d.textContent="Copied!",s.classList.add("copied"),setTimeout(()=>{d.textContent=l,s.classList.remove("copied")},2e3)}catch(d){console.error("Failed to copy:",d);let l=document.createElement("textarea");l.value=c,l.style.position="fixed",l.style.opacity="0",document.body.appendChild(l),l.select();try{document.execCommand("copy");let f=s.querySelector(".copy-text"),b=f.textContent;f.textContent="Copied!",s.classList.add("copied"),setTimeout(()=>{f.textContent=b,s.classList.remove("copied")},2e3)}catch(f){console.error("Fallback copy failed:",f)}document.body.removeChild(l)}});let u=!1;r.addEventListener("focus",()=>{u=!0,n.classList.add("editing");let c=r.textContent||"";r.textContent=c,requestAnimationFrame(()=>{let d=document.createRange(),l=window.getSelection();r.firstChild&&(d.setStart(r.firstChild,0),d.collapse(!0),l?.removeAllRanges(),l?.addRange(d))}),i.onFocus()}),r.addEventListener("blur",()=>{u=!1,n.classList.remove("editing"),this.applyHighlighting(e,a),i.onBlur()}),r.addEventListener("input",c=>{i.onInput(c),this.updateLineNumbers(e),clearTimeout(this.highlightTimer)}),r.addEventListener("keydown",c=>{if(c.key==="Tab"){c.preventDefault();let d=window.getSelection();if(d&&d.rangeCount>0){let l=d.getRangeAt(0),f=document.createTextNode("  ");l.insertNode(f),l.setStartAfter(f),l.setEndAfter(f),d.removeAllRanges(),d.addRange(l),i.onInput(new InputEvent("input")),this.updateLineNumbers(e)}return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(c.key)){let d=this.getCursorPosition(e),l=r.textContent?.length||0;if(c.key==="ArrowLeft"&&d===0||c.key==="ArrowRight"&&d===l){i.onKeyDown(c);return}if(c.key==="ArrowUp"||c.key==="ArrowDown"){let f=(r.textContent||"").split(`
`),b=this.getCurrentLineIndex(r);if(c.key==="ArrowUp"&&b===0||c.key==="ArrowDown"&&b===f.length-1){i.onKeyDown(c);return}}}i.onKeyDown(c)}),r.addEventListener("paste",c=>{c.preventDefault();let d=c.clipboardData?.getData("text/plain");if(d){let l=window.getSelection();if(l&&l.rangeCount>0){let f=l.getRangeAt(0);f.deleteContents();let b=document.createTextNode(d);f.insertNode(b),f.setStartAfter(b),f.setEndAfter(b),l.removeAllRanges(),l.addRange(f),i.onInput(new InputEvent("input")),this.updateLineNumbers(e)}}}),r.addEventListener("compositionstart",()=>i.onCompositionStart()),r.addEventListener("compositionend",()=>i.onCompositionEnd()),a.content&&document.activeElement!==r&&requestAnimationFrame(()=>{this.applyHighlighting(e,a)})}updateLineNumbers(e){let a=e.querySelector(".code-editor"),i=e.querySelector(".line-numbers");if(!a||!i)return;let s=(a.textContent||"").split(`
`).length||1,o="";for(let u=1;u<=s;u++)o+=`<div class="line-number">${u}</div>`;i.innerHTML=o}getCurrentLineIndex(e){let a=window.getSelection();if(!a||a.rangeCount===0)return 0;let i=a.getRangeAt(0),r=i.cloneRange();return r.selectNodeContents(e),r.setEnd(i.startContainer,i.startOffset),r.toString().split(`
`).length-1}async applyHighlighting(e,a){let i=e.querySelector(".code-editor");if(!i)return;this.highlightJs||(this.highlightJs=await C2.getInstance().loadHighlightJs());let r=this.getCursorPosition(e),n=i.textContent||"",s=a.metadata?.language||"typescript";try{let o=this.highlightJs.highlight(n,{language:s,ignoreIllegals:!0});o.value&&(i.innerHTML=o.value,document.activeElement===i&&r!==null&&requestAnimationFrame(()=>{Oe.setCursorPosition(i,r)}))}catch(o){console.warn("Syntax highlighting failed:",o)}}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){return e.querySelector(".code-editor")?.textContent||""}setContent(e,a){let i=e.querySelector(".code-editor");if(i&&(i.textContent=a,this.updateLineNumbers(e),document.activeElement!==i)){let r={id:i.dataset.blockId||"",type:"code",content:a,metadata:{language:e.querySelector(".code-block-container")?.getAttribute("data-language")||"typescript"}};this.applyHighlighting(e,r)}}getCursorPosition(e){let a=e.querySelector(".code-editor");if(!a)return null;let i=window.getSelection();if(!i||i.rangeCount===0)return null;let r=i.getRangeAt(0);if(!a.contains(r.startContainer))return null;let n=document.createRange();return n.selectNodeContents(a),n.setEnd(r.startContainer,r.startOffset),n.toString().length}setCursorToStart(e){let a=e.querySelector(".code-editor");a&&Oe.setCursorPosition(a,0)}setCursorToEnd(e){let a=e.querySelector(".code-editor");if(a){let i=a.textContent?.length||0;Oe.setCursorPosition(a,i)}}focus(e){e.querySelector(".code-editor")?.focus()}focusWithCursor(e,a="end"){let i=e.querySelector(".code-editor");i&&(i.focus(),requestAnimationFrame(()=>{a==="start"?this.setCursorToStart(e):a==="end"?this.setCursorToEnd(e):typeof a=="number"&&Oe.setCursorPosition(i,a)}))}getSplitContent(e){let a=this.getCursorPosition(e);if(a===null)return null;let i=this.getContent(e);return{before:i.substring(0,a),after:i.substring(a)}}getStyles(){return`
      /* Code Block Container - Minimalist shadcn style */
      .code-block-container {
        position: relative;
        margin: 12px 0;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
      }
      
      .code-block-container.selected {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      .code-block-container.editing {
        border-color: ${p.bdTheme("#6b7280","#9ca3af")};
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
      }
      
      /* Header - Simplified */
      .code-header {
        background: transparent;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .language-selector {
        font-size: 12px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: ${Qt};
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 4px 8px;
        cursor: pointer;
        transition: all 0.15s ease;
        outline: none;
      }
      
      .language-selector:hover {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        border-color: ${p.bdTheme("#e5e7eb","#374151")};
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .language-selector:focus {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Copy Button - Minimal */
      .copy-button {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
        font-size: 12px;
        font-family: ${Qt};
        cursor: pointer;
        transition: all 0.15s ease;
        outline: none;
      }
      
      .copy-button:hover {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        border-color: ${p.bdTheme("#e5e7eb","#374151")};
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .copy-button:active {
        transform: scale(0.98);
      }
      
      .copy-button.copied {
        color: ${p.bdTheme("#059669","#10b981")};
      }
      
      .copy-icon {
        flex-shrink: 0;
        opacity: 0.7;
      }
      
      .copy-button:hover .copy-icon {
        opacity: 1;
      }
      
      .copy-text {
        min-width: 40px;
        text-align: center;
      }
      
      /* Code Body */
      .code-body {
        display: flex;
        position: relative;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
      }
      
      /* Line Numbers - Subtle */
      .line-numbers {
        flex-shrink: 0;
        padding: 12px 0;
        background: transparent;
        text-align: right;
        user-select: none;
        min-width: 40px;
        border-right: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
      }
      
      .line-number {
        padding: 0 12px 0 8px;
        color: ${p.bdTheme("#9ca3af","#4b5563")};
        font-family: ${el};
        font-size: 13px;
        line-height: 20px;
        height: 20px;
      }
      
      /* Code Content */
      .code-content {
        flex: 1;
        overflow-x: auto;
        position: relative;
      }
      
      .code-pre {
        margin: 0;
        padding: 0;
        background: transparent;
      }
      
      .code-editor {
        display: block;
        padding: 12px 16px;
        margin: 0;
        font-family: ${el};
        font-size: 13px;
        line-height: 20px;
        color: ${p.bdTheme("#111827","#f9fafb")};
        background: transparent;
        border: none;
        outline: none;
        white-space: pre-wrap;
        word-wrap: break-word;
        min-height: 60px;
        overflow: visible;
      }
      
      /* Placeholder */
      .code-editor:empty::before {
        content: "// Type or paste code here...";
        color: ${p.bdTheme("#9ca3af","#4b5563")};
        pointer-events: none;
      }
      
      /* When editing (focused), show grey text without highlighting */
      .code-block-container.editing .code-editor {
        color: ${p.bdTheme("#6b7280","#9ca3af")} !important;
      }
      
      .code-block-container.editing .code-editor * {
        color: inherit !important;
      }
      
      /* Syntax Highlighting - Muted colors */
      .code-editor .hljs-keyword {
        color: ${p.bdTheme("#dc2626","#f87171")};
        font-weight: 500;
      }
      
      .code-editor .hljs-string {
        color: ${p.bdTheme("#059669","#10b981")};
      }
      
      .code-editor .hljs-number {
        color: ${p.bdTheme("#7c3aed","#a78bfa")};
      }
      
      .code-editor .hljs-function {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }
      
      .code-editor .hljs-comment {
        color: ${p.bdTheme("#6b7280","#6b7280")};
        font-style: italic;
      }
      
      .code-editor .hljs-variable,
      .code-editor .hljs-attr {
        color: ${p.bdTheme("#ea580c","#fb923c")};
      }
      
      .code-editor .hljs-class,
      .code-editor .hljs-title {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        font-weight: 500;
      }
      
      .code-editor .hljs-params {
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .code-editor .hljs-built_in {
        color: ${p.bdTheme("#7c3aed","#a78bfa")};
      }
      
      .code-editor .hljs-literal {
        color: ${p.bdTheme("#7c3aed","#a78bfa")};
      }
      
      .code-editor .hljs-meta {
        color: ${p.bdTheme("#6b7280","#9ca3af")};
      }
      
      .code-editor .hljs-punctuation {
        color: ${p.bdTheme("#374151","#d1d5db")};
      }
      
      .code-editor .hljs-tag {
        color: ${p.bdTheme("#dc2626","#f87171")};
      }
      
      .code-editor .hljs-attribute {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }
      
      .code-editor .hljs-selector-tag {
        color: ${p.bdTheme("#dc2626","#f87171")};
      }
      
      .code-editor .hljs-selector-class {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }
      
      .code-editor .hljs-selector-id {
        color: ${p.bdTheme("#7c3aed","#a78bfa")};
      }
      
      /* Selection */
      .code-editor::selection,
      .code-editor *::selection {
        background: ${p.bdTheme("rgba(99, 102, 241, 0.2)","rgba(99, 102, 241, 0.3)")};
      }
      
      /* Scrollbar styling - Minimal */
      .code-content::-webkit-scrollbar {
        height: 6px;
      }
      
      .code-content::-webkit-scrollbar-track {
        background: transparent;
      }
      
      .code-content::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("#d1d5db","#4b5563")};
        border-radius: 3px;
      }
      
      .code-content::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("#9ca3af","#6b7280")};
      }
    `}}});var Qd,mbt=v(()=>{Ka();oe();Zs();Zr();Qd=class extends M1{type="list";lastKnownCursorPosition=0;lastSelectedText="";selectionHandler=null;render(e,a){let i=a?" selected":"",n=(e.metadata?.listType||"unordered")==="ordered"?"ol":"ul",s=this.renderListContent(e.content,e.metadata);return`
      <div
        class="block list${i}"
        contenteditable="true"
        data-block-id="${e.id}"
        data-block-type="${e.type}"
      >${s}</div>
    `}renderListContent(e,a){if(!e)return"<ul><li></li></ul>";let r=(a?.listType||"unordered")==="ordered"?"ol":"ul",n=e.split(`
`).filter(o=>o.trim());if(n.length===0)return`<${r}><li></li></${r}>`;let s=n.map(o=>`<li>${o}</li>`).join("");return`<${r}>${s}</${r}>`}setup(e,a,i){let r=e.querySelector(".block.list");if(!r){console.error("ListBlockHandler.setup: No list block element found");return}a.content&&!r.innerHTML&&(r.innerHTML=this.renderListContent(a.content,a.metadata)),r.addEventListener("input",n=>{i.onInput(n);let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),r.addEventListener("keydown",n=>{let s=this.getCursorPosition(e);if(s!==null&&(this.lastKnownCursorPosition=s),n.key==="Enter"&&!n.shiftKey){let o=window.getSelection();if(o&&o.rangeCount>0){let c=o.getRangeAt(0).startContainer.parentElement?.closest("li");if(c&&c.textContent===""){n.preventDefault(),i.onKeyDown(n);return}}}i.onKeyDown(n)}),r.addEventListener("focus",()=>{i.onFocus()}),r.addEventListener("blur",()=>{i.onBlur()}),r.addEventListener("compositionstart",()=>{i.onCompositionStart()}),r.addEventListener("compositionend",()=>{i.onCompositionEnd()}),r.addEventListener("mouseup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s),i.onMouseUp?.(n)}),r.addEventListener("click",n=>{setTimeout(()=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)},0)}),r.addEventListener("keyup",n=>{let s=this.getCursorPosition(e);s!==null&&(this.lastKnownCursorPosition=s)}),this.setupSelectionHandler(e,r,a)}setupSelectionHandler(e,a,i){let r=()=>{let s=window.getSelection();if(!s||s.rangeCount===0)return;let o=s.toString();if(o.length===0){this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}));return}let u=a.getRootNode().host,d=u?.closest("dees-input-wysiwyg")?.shadowRoot,l=u?.shadowRoot,f=[];d&&f.push(d),l&&f.push(l);let b=Oe.getSelectionInfo(...f);if(!b)return;let y=Oe.containsAcrossShadowDOM(a,b.startContainer),g=Oe.containsAcrossShadowDOM(a,b.endContainer);if(y||g){if(o!==this.lastSelectedText){this.lastSelectedText=o;let h=Oe.createRangeFromInfo(b),x=h.getBoundingClientRect();this.dispatchSelectionEvent(e,{text:o.trim(),blockId:i.id,range:h,rect:x,hasSelection:!0})}}else this.lastSelectedText&&(this.lastSelectedText="",this.dispatchSelectionEvent(e,{text:"",blockId:i.id,hasSelection:!1}))};document.addEventListener("selectionchange",r),this.selectionHandler=r;let n=a.getRootNode().host;if(n){let s=n.disconnectedCallback;n.disconnectedCallback=async function(){this.selectionHandler&&(document.removeEventListener("selectionchange",this.selectionHandler),this.selectionHandler=null),s&&await s.call(n)}.bind(this)}}dispatchSelectionEvent(e,a){let i=new CustomEvent("block-text-selected",{detail:a,bubbles:!0,composed:!0});e.dispatchEvent(i)}getStyles(){return`
      /* List specific styles */
      .block.list {
        padding: 0;
      }
      
      .block.list ul,
      .block.list ol {
        margin: 0;
        padding-left: 24px;
      }
      
      .block.list li {
        margin: 4px 0;
        line-height: 1.6;
      }
      
      .block.list li:last-child {
        margin-bottom: 0;
      }
    `}getPlaceholder(){return""}getCursorPosition(e,a){let i=e.querySelector(".block.list");if(!i)return null;let s=a?.component?.closest("dees-input-wysiwyg")?.shadowRoot,o=a?.shadowRoot,u=[];s&&u.push(s),o&&u.push(o);let c=Oe.getSelectionInfo(...u);if(!c||!Oe.containsAcrossShadowDOM(i,c.startContainer))return null;let d=document.createRange();return d.selectNodeContents(i),d.setEnd(c.startContainer,c.startOffset),d.toString().length}getContent(e,a){let i=e.querySelector(".block.list");if(!i)return"";let r=i.querySelectorAll("li");return Array.from(r).map(s=>s.textContent||"").join(`
`)}setContent(e,a,i){let r=e.querySelector(".block.list");if(!r)return;let n=document.activeElement===r||e.shadowRoot?.activeElement===r,o=r.querySelector("ul, ol")?.tagName==="OL";r.innerHTML=this.renderListContent(a,{listType:o?"ordered":"unordered"}),n&&r.focus()}setCursorToStart(e,a){let i=e.querySelector(".block.list");if(!i)return;let r=i.querySelector("li");if(r){let n=this.getFirstTextNode(r);if(n){let s=document.createRange(),o=window.getSelection();s.setStart(n,0),s.setEnd(n,0),o?.removeAllRanges(),o?.addRange(s)}}}setCursorToEnd(e,a){let i=e.querySelector(".block.list");if(!i)return;let r=i.querySelector("li:last-child");if(r){let n=this.getLastTextNode(r);if(n){let s=document.createRange(),o=window.getSelection(),u=n.textContent?.length||0;s.setStart(n,u),s.setEnd(n,u),o?.removeAllRanges(),o?.addRange(s)}}}getFirstTextNode(e){if(e.nodeType===Node.TEXT_NODE)return e;for(let a=0;a<e.childNodes.length;a++){let i=this.getFirstTextNode(e.childNodes[a]);if(i)return i}return null}getLastTextNode(e){if(e.nodeType===Node.TEXT_NODE)return e;for(let a=e.childNodes.length-1;a>=0;a--){let i=this.getLastTextNode(e.childNodes[a]);if(i)return i}return null}focus(e,a){let i=e.querySelector(".block.list");i&&(i.hasAttribute("contenteditable")||i.setAttribute("contenteditable","true"),i.focus(),document.activeElement!==i&&e.shadowRoot?.activeElement!==i&&Promise.resolve().then(()=>{i.focus()}))}focusWithCursor(e,a="end",i){let r=e.querySelector(".block.list");if(!r)return;r.hasAttribute("contenteditable")||r.setAttribute("contenteditable","true"),r.focus();let n=()=>{a==="start"?this.setCursorToStart(e,i):a==="end"?this.setCursorToEnd(e,i):typeof a=="number"&&this.setCursorToEnd(e,i)};document.activeElement===r||e.shadowRoot?.activeElement===r?n():Promise.resolve().then(()=>{(document.activeElement===r||e.shadowRoot?.activeElement===r)&&n()})}getSplitContent(e,a){return e.querySelector(".block.list"),null}}});var Jd,gbt=v(()=>{Ka();oe();Jd=class extends M1{type="image";render(e,a){let i=e.metadata?.url,r=e.content||"Image",n=e.metadata?.loading;return`
      <div class="image-block-container${a?" selected":""}" 
           data-block-id="${e.id}"
           data-has-image="${!!i}"
           tabindex="0">
        ${n?this.renderLoading():i?this.renderImage(i,r):this.renderPlaceholder()}
        <input type="file" 
               class="image-file-input" 
               accept="image/*" 
               style="display: none;" />
      </div>
    `}renderPlaceholder(){return`
      <div class="image-upload-placeholder" style="cursor: pointer;">
        <div class="upload-icon" style="pointer-events: none;">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
            <circle cx="8.5" cy="8.5" r="1.5"/>
            <polyline points="21 15 16 10 5 21"/>
          </svg>
        </div>
        <div class="upload-text" style="pointer-events: none;">Click to upload an image</div>
        <div class="upload-hint" style="pointer-events: none;">or drag and drop</div>
      </div>
    `}renderImage(e,a){return`
      <div class="image-container">
        <img src="${e}" alt="${this.escapeHtml(a)}" />
      </div>
    `}renderLoading(){return`
      <div class="image-loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">Uploading image...</div>
      </div>
    `}setup(e,a,i){let r=e.querySelector(".image-block-container"),n=e.querySelector(".image-file-input");if(!r){console.error("ImageBlockHandler: Could not find container");return}if(!n){console.error("ImageBlockHandler: Could not find file input");return}let s=r.querySelector(".image-upload-placeholder");s&&s.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),console.log("ImageBlockHandler: Placeholder clicked, opening file selector"),n.click()}),r.addEventListener("click",()=>{i.onFocus()}),n.addEventListener("change",async o=>{let c=o.target.files?.[0];c&&(console.log("ImageBlockHandler: File selected:",c.name),await this.handleFileUpload(c,a,i))}),r.addEventListener("dragover",o=>{o.preventDefault(),o.stopPropagation(),a.metadata?.url||r.classList.add("drag-over")}),r.addEventListener("dragleave",o=>{o.preventDefault(),o.stopPropagation(),r.classList.remove("drag-over")}),r.addEventListener("drop",async o=>{o.preventDefault(),o.stopPropagation(),r.classList.remove("drag-over");let u=o.dataTransfer?.files[0];u&&u.type.startsWith("image/")&&!a.metadata?.url&&await this.handleFileUpload(u,a,i)}),r.addEventListener("focus",()=>i.onFocus()),r.addEventListener("blur",()=>i.onBlur()),r.addEventListener("keydown",o=>{if((o.key==="Delete"||o.key==="Backspace")&&a.metadata?.url){a.metadata.url=void 0,a.metadata.loading=!1,a.content="",i.onInput(new InputEvent("input"));return}i.onKeyDown(o)})}async handleFileUpload(e,a,i){if(console.log("ImageBlockHandler: Starting file upload",{fileName:e.name,fileSize:e.size,blockId:a.id}),!e.type.startsWith("image/")){console.error("Invalid file type:",e.type);return}let r=10*1024*1024;if(e.size>r){console.error("File too large. Maximum size is 10MB");return}a.metadata||(a.metadata={}),a.metadata.loading=!0,a.metadata.fileName=e.name,a.metadata.fileSize=e.size,a.metadata.mimeType=e.type,console.log("ImageBlockHandler: Set loading state, requesting update"),i.onRequestUpdate?.();try{let n=await this.fileToDataUrl(e);a.metadata.url=n,a.metadata.loading=!1;let s=e.name.replace(/\.[^/.]+$/,"");a.content=s,console.log("ImageBlockHandler: Upload complete, requesting update",{hasUrl:!!a.metadata.url,urlLength:n.length,altText:a.content}),i.onRequestUpdate?.()}catch(n){console.error("Failed to upload image:",n),a.metadata.loading=!1,i.onRequestUpdate?.()}}fileToDataUrl(e){return new Promise((a,i)=>{let r=new FileReader;r.onload=n=>{let s=n.target?.result;typeof s=="string"?a(s):i(new Error("Failed to read file"))},r.onerror=i,r.readAsDataURL(e)})}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){return this.getBlockFromElement(e)?.content||""}setContent(e,a){let i=this.getBlockFromElement(e);i&&(i.content=a)}getBlockFromElement(e){let i=e.querySelector(".image-block-container")?.getAttribute("data-block-id");return i?{id:i,type:"image",content:"",metadata:{}}:null}getCursorPosition(e){return null}setCursorToStart(e){this.focus(e)}setCursorToEnd(e){this.focus(e)}focus(e){e.querySelector(".image-block-container")?.focus()}focusWithCursor(e,a="end"){this.focus(e)}getSplitContent(e){return null}getStyles(){return`
      /* Image Block Container */
      .image-block-container {
        position: relative;
        margin: 12px 0;
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
        outline: none;
        cursor: pointer;
      }
      
      .image-block-container.selected {
        box-shadow: 0 0 0 2px ${p.bdTheme("#6366f1","#818cf8")};
      }
      
      /* Upload Placeholder */
      .image-upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        border: 2px dashed ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
        transition: all 0.15s ease;
      }
      
      .image-block-container:hover .image-upload-placeholder {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
        background: ${p.bdTheme("#f9fafb","#111827")};
      }
      
      .image-block-container.drag-over .image-upload-placeholder {
        border-color: ${p.bdTheme("#6366f1","#818cf8")};
        background: ${p.bdTheme("#eff6ff","#1e1b4b")};
      }
      
      .upload-icon {
        margin-bottom: 12px;
        color: ${p.bdTheme("#9ca3af","#4b5563")};
      }
      
      .upload-text {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#374151","#e5e7eb")};
        margin-bottom: 4px;
      }
      
      .upload-hint {
        font-size: 12px;
        color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Image Container */
      .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
        background: ${p.bdTheme("#f9fafb","#111827")};
      }
      
      .image-container img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
      }
      
      /* Loading State */
      .image-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
      }
      
      .loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-top-color: ${p.bdTheme("#6366f1","#818cf8")};
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 12px;
      }
      
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      .loading-text {
        font-size: 14px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
      }
      
      /* File input hidden */
      .image-file-input {
        display: none !important;
      }
    `}}});var e8,bbt=v(()=>{Ka();oe();e8=class extends M1{type="youtube";render(e,a){let i=e.metadata?.videoId,r=e.metadata?.url||"";return`
      <div class="youtube-block-container${a?" selected":""}" 
           data-block-id="${e.id}"
           data-has-video="${!!i}">
        ${i?this.renderVideo(i):this.renderPlaceholder(r)}
      </div>
    `}renderPlaceholder(e){return`
      <div class="youtube-placeholder">
        <div class="placeholder-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
          </svg>
        </div>
        <div class="placeholder-text">Enter YouTube URL</div>
        <input type="url" 
               class="youtube-url-input" 
               placeholder="https://youtube.com/watch?v=..." 
               value="${this.escapeHtml(e)}" />
        <button class="youtube-embed-btn">Embed Video</button>
      </div>
    `}renderVideo(e){return`
      <div class="youtube-container">
        <iframe 
          src="https://www.youtube.com/embed/${e}"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>
    `}setup(e,a,i){let r=e.querySelector(".youtube-block-container");if(!r)return;if(a.metadata?.videoId){r.setAttribute("tabindex","0"),r.addEventListener("focus",()=>i.onFocus()),r.addEventListener("blur",()=>i.onBlur()),r.addEventListener("keydown",o=>{(o.key==="Delete"||o.key==="Backspace")&&o.preventDefault(),i.onKeyDown(o)});return}let n=e.querySelector(".youtube-url-input"),s=e.querySelector(".youtube-embed-btn");!n||!s||(n.addEventListener("focus",()=>i.onFocus()),n.addEventListener("blur",()=>i.onBlur()),s.addEventListener("click",()=>{this.embedVideo(n.value,a,i)}),n.addEventListener("keydown",o=>{o.key==="Enter"?(o.preventDefault(),this.embedVideo(n.value,a,i)):o.key==="Escape"&&(o.preventDefault(),n.blur())}),n.addEventListener("paste",o=>{setTimeout(()=>{let u=n.value;this.extractYouTubeVideoId(u)&&this.embedVideo(u,a,i)},0)}),n.addEventListener("input",()=>{a.metadata||(a.metadata={}),a.metadata.url=n.value}))}embedVideo(e,a,i){let r=this.extractYouTubeVideoId(e);if(!r){console.error("Invalid YouTube URL");return}a.metadata||(a.metadata={}),a.metadata.videoId=r,a.metadata.url=e,a.content=`YouTube Video: ${r}`,i.onRequestUpdate?.()}extractYouTubeVideoId(e){let a=[/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/,/youtube\.com\/embed\/([^"&?\/ ]{11})/,/youtube\.com\/watch\?v=([^"&?\/ ]{11})/,/youtu\.be\/([^"&?\/ ]{11})/];for(let i of a){let r=e.match(i);if(r)return r[1]}return null}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){return this.getBlockFromElement(e)?.content||""}setContent(e,a){let i=this.getBlockFromElement(e);i&&(i.content=a)}getBlockFromElement(e){let i=e.querySelector(".youtube-block-container")?.getAttribute("data-block-id");return i?{id:i,type:"youtube",content:"",metadata:{}}:null}getCursorPosition(e){return null}setCursorToStart(e){this.focus(e)}setCursorToEnd(e){this.focus(e)}focus(e){let a=e.querySelector(".youtube-block-container"),i=e.querySelector(".youtube-url-input");i?i.focus():a&&a.focus()}focusWithCursor(e,a="end"){this.focus(e)}getSplitContent(e){return null}getStyles(){return`
      /* YouTube Block Container */
      .youtube-block-container {
        position: relative;
        margin: 12px 0;
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
        outline: none;
      }
      
      .youtube-block-container.selected {
        box-shadow: 0 0 0 2px ${p.bdTheme("#6366f1","#818cf8")};
      }
      
      /* YouTube Placeholder */
      .youtube-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
        gap: 12px;
      }
      
      .placeholder-icon {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        opacity: 0.8;
      }
      
      .placeholder-text {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .youtube-url-input {
        width: 100%;
        max-width: 400px;
        padding: 8px 12px;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 4px;
        background: ${p.bdTheme("#ffffff","#111827")};
        color: ${p.bdTheme("#111827","#f9fafb")};
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        transition: all 0.15s ease;
        outline: none;
      }
      
      .youtube-url-input:focus {
        border-color: ${p.bdTheme("#6b7280","#9ca3af")};
        background: ${p.bdTheme("#ffffff","#1f2937")};
      }
      
      .youtube-url-input::placeholder {
        color: ${p.bdTheme("#9ca3af","#4b5563")};
      }
      
      .youtube-embed-btn {
        padding: 6px 16px;
        background: ${p.bdTheme("#111827","#f9fafb")};
        color: ${p.bdTheme("#f9fafb","#111827")};
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        cursor: pointer;
        transition: all 0.15s ease;
        outline: none;
      }
      
      .youtube-embed-btn:hover {
        background: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .youtube-embed-btn:active {
        transform: scale(0.98);
      }
      
      /* YouTube Container */
      .youtube-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        background: ${p.bdTheme("#000000","#000000")};
      }
      
      .youtube-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 6px;
      }
    `}}});var t8,vbt=v(()=>{Ka();oe();t8=class extends M1{type="attachment";render(e,a){let i=e.metadata?.files||[];return`
      <div class="attachment-block-container${a?" selected":""}" 
           data-block-id="${e.id}"
           tabindex="0">
        <div class="attachment-header">
          <div class="attachment-icon">\u{1F4CE}</div>
          <div class="attachment-title">File Attachments</div>
        </div>
        <div class="attachment-list">
          ${i.length>0?this.renderFiles(i):this.renderPlaceholder()}
        </div>
        <input type="file" 
               class="attachment-file-input" 
               multiple 
               style="display: none;" />
        ${i.length>0?'<button class="add-more-files">Add More Files</button>':""}
      </div>
    `}renderPlaceholder(){return`
      <div class="attachment-placeholder">
        <div class="placeholder-text">Click to add files</div>
        <div class="placeholder-hint">or drag and drop</div>
      </div>
    `}renderFiles(e){return e.map(a=>`
      <div class="attachment-item" data-file-id="${a.id}">
        <div class="file-icon">${this.getFileIcon(a.type)}</div>
        <div class="file-info">
          <div class="file-name">${this.escapeHtml(a.name)}</div>
          <div class="file-size">${this.formatFileSize(a.size)}</div>
        </div>
        <button class="remove-file" data-file-id="${a.id}">\xD7</button>
      </div>
    `).join("")}setup(e,a,i){let r=e.querySelector(".attachment-block-container"),n=e.querySelector(".attachment-file-input");if(!r||!n){console.error("AttachmentBlockHandler: Could not find required elements");return}a.metadata||(a.metadata={}),a.metadata.files||(a.metadata.files=[]);let s=r.querySelector(".attachment-placeholder");s&&s.addEventListener("click",u=>{u.preventDefault(),u.stopPropagation(),n.click()});let o=r.querySelector(".add-more-files");o&&o.addEventListener("click",u=>{u.preventDefault(),u.stopPropagation(),n.click()}),n.addEventListener("change",async u=>{let c=u.target,d=c.files;d&&d.length>0&&(await this.handleFileAttachments(d,a,i),c.value="")}),r.addEventListener("click",u=>{let c=u.target;if(c.classList.contains("remove-file")){u.preventDefault(),u.stopPropagation();let d=c.getAttribute("data-file-id");d&&this.removeFile(d,a,i)}}),r.addEventListener("dragover",u=>{u.preventDefault(),u.stopPropagation(),r.classList.add("drag-over")}),r.addEventListener("dragleave",u=>{u.preventDefault(),u.stopPropagation(),r.classList.remove("drag-over")}),r.addEventListener("drop",async u=>{u.preventDefault(),u.stopPropagation(),r.classList.remove("drag-over");let c=u.dataTransfer?.files;c&&c.length>0&&await this.handleFileAttachments(c,a,i)}),r.addEventListener("focus",()=>i.onFocus()),r.addEventListener("blur",()=>i.onBlur()),r.addEventListener("keydown",u=>{if((u.key==="Delete"||u.key==="Backspace")&&document.activeElement===r&&a.metadata?.files?.length>0){u.preventDefault(),a.metadata.files=[],i.onRequestUpdate?.();return}i.onKeyDown(u)})}async handleFileAttachments(e,a,i){a.metadata||(a.metadata={}),a.metadata.files||(a.metadata.files=[]);for(let r of Array.from(e))try{let n=await this.fileToDataUrl(r),s={id:this.generateId(),name:r.name,size:r.size,type:r.type,data:n};a.metadata.files.push(s)}catch(n){console.error("Failed to attach file:",r.name,n)}a.content=`${a.metadata.files.length} file${a.metadata.files.length!==1?"s":""} attached`,i.onRequestUpdate?.()}removeFile(e,a,i){a.metadata?.files&&(a.metadata.files=a.metadata.files.filter(r=>r.id!==e),a.content=a.metadata.files.length>0?`${a.metadata.files.length} file${a.metadata.files.length!==1?"s":""} attached`:"",i.onRequestUpdate?.())}fileToDataUrl(e){return new Promise((a,i)=>{let r=new FileReader;r.onload=n=>{let s=n.target?.result;typeof s=="string"?a(s):i(new Error("Failed to read file"))},r.onerror=i,r.readAsDataURL(e)})}getFileIcon(e){return e.startsWith("image/")?"\u{1F5BC}\uFE0F":e.startsWith("video/")?"\u{1F3A5}":e.startsWith("audio/")?"\u{1F3B5}":e.includes("pdf")?"\u{1F4C4}":e.includes("zip")||e.includes("rar")||e.includes("tar")?"\u{1F5C4}\uFE0F":e.includes("sheet")?"\u{1F4CA}":e.includes("document")||e.includes("msword")?"\u{1F4DD}":e.includes("presentation")?"\u{1F4CB}":e.includes("text")?"\u{1F4C3}":"\u{1F4C1}"}formatFileSize(e){if(e===0)return"0 Bytes";let a=1024,i=["Bytes","KB","MB","GB"],r=Math.floor(Math.log(e)/Math.log(a));return parseFloat((e/Math.pow(a,r)).toFixed(2))+" "+i[r]}generateId(){return`file-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){return this.getBlockFromElement(e)?.content||""}setContent(e,a){let i=this.getBlockFromElement(e);i&&(i.content=a)}getBlockFromElement(e){let i=e.querySelector(".attachment-block-container")?.getAttribute("data-block-id");return i?{id:i,type:"attachment",content:"",metadata:{}}:null}getCursorPosition(e){return null}setCursorToStart(e){this.focus(e)}setCursorToEnd(e){this.focus(e)}focus(e){e.querySelector(".attachment-block-container")?.focus()}focusWithCursor(e,a="end"){this.focus(e)}getSplitContent(e){return null}getStyles(){return`
      /* Attachment Block Container */
      .attachment-block-container {
        position: relative;
        margin: 12px 0;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
        outline: none;
        background: ${p.bdTheme("#ffffff","#111827")};
      }
      
      .attachment-block-container.selected {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      .attachment-block-container.drag-over {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        border-color: ${p.bdTheme("#6366f1","#818cf8")};
      }
      
      /* Header */
      .attachment-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        background: ${p.bdTheme("#f9fafb","#0a0a0a")};
      }
      
      .attachment-icon {
        font-size: 18px;
        opacity: 0.8;
      }
      
      .attachment-title {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      /* File List */
      .attachment-list {
        padding: 8px;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      
      /* Placeholder */
      .attachment-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      
      .attachment-placeholder:hover {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
      }
      
      .placeholder-text {
        font-size: 14px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
        margin-bottom: 4px;
      }
      
      .placeholder-hint {
        font-size: 12px;
        color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* File Items */
      .attachment-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 4px;
        transition: all 0.15s ease;
      }
      
      .attachment-item:hover {
        background: ${p.bdTheme("#f3f4f6","#374151")};
      }
      
      .file-icon {
        font-size: 20px;
        flex-shrink: 0;
      }
      
      .file-info {
        flex: 1;
        min-width: 0;
      }
      
      .file-name {
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#111827","#f9fafb")};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .file-size {
        font-size: 11px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
        margin-top: 2px;
      }
      
      .remove-file {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: all 0.15s ease;
        padding: 0;
      }
      
      .remove-file:hover {
        background: ${p.bdTheme("#fee2e2","#991b1b")};
        border-color: ${p.bdTheme("#fca5a5","#dc2626")};
        color: ${p.bdTheme("#dc2626","#fca5a5")};
      }
      
      /* Add More Files Button */
      .add-more-files {
        margin: 8px;
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 4px;
        font-size: 13px;
        color: ${p.bdTheme("#374151","#e5e7eb")};
        cursor: pointer;
        transition: all 0.15s ease;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }
      
      .add-more-files:hover {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        border-color: ${p.bdTheme("#d1d5db","#4b5563")};
      }
      
      /* Hidden file input */
      .attachment-file-input {
        display: none !important;
      }
    `}}});var a8,ybt=v(()=>{Ka();oe();a8=class extends M1{type="divider";render(e,a){return`
      <div class="block divider${a?" selected":""}" data-block-id="${e.id}" data-block-type="${e.type}" tabindex="0">
        <hr>
      </div>
    `}setup(e,a,i){let r=e.querySelector(".block.divider");r&&(r.addEventListener("click",n=>{n.stopPropagation(),r.focus(),i.onFocus?.()}),r.addEventListener("focus",()=>{i.onFocus?.()}),r.addEventListener("blur",()=>{i.onBlur?.()}),r.addEventListener("keydown",n=>{(n.key==="Backspace"||n.key==="Delete")&&n.preventDefault(),i.onKeyDown?.(n)}))}getStyles(){return`
      .block.divider {
        padding: 8px 0;
        margin: 16px 0;
        cursor: pointer;
        position: relative;
        border-radius: 4px;
        transition: all 0.15s ease;
      }

      .block.divider:focus {
        outline: none;
      }

      .block.divider.selected {
        background: ${p.bdTheme("rgba(0, 102, 204, 0.05)","rgba(77, 148, 255, 0.08)")};
        box-shadow: inset 0 0 0 2px ${p.bdTheme("rgba(0, 102, 204, 0.2)","rgba(77, 148, 255, 0.2)")};
      }

      .block.divider hr {
        border: none;
        border-top: 1px solid ${p.bdTheme("#e0e0e0","#333")};
        margin: 0;
        pointer-events: none;
      }
    `}}});var i8,xbt=v(()=>{Ka();oe();i8=class extends M1{type="markdown";render(e,a){let i=e.metadata?.isEditMode??!0,r=e.content||"";return`
      <div class="markdown-block-container${a?" selected":""}" 
           data-block-id="${e.id}"
           data-edit-mode="${i}">
        <div class="markdown-header">
          <div class="markdown-icon">M\u2193</div>
          <div class="markdown-title">Markdown</div>
          <button class="markdown-toggle-mode" title="${i?"Preview":"Edit"}">
            ${i?"\u{1F441}\uFE0F":"\u270F\uFE0F"}
          </button>
        </div>
        <div class="markdown-content">
          ${i?this.renderEditor(r):this.renderPreview(r)}
        </div>
      </div>
    `}renderEditor(e){return`
      <textarea class="markdown-editor" 
                placeholder="Enter markdown content..."
                spellcheck="false">${this.escapeHtml(e)}</textarea>
    `}renderPreview(e){return`
      <div class="markdown-preview">
        ${this.parseMarkdown(e)||'<div class="preview-empty">No content to preview</div>'}
      </div>
    `}setup(e,a,i){let r=e.querySelector(".markdown-block-container"),n=e.querySelector(".markdown-toggle-mode");if(!r||!n){console.error("MarkdownBlockHandler: Could not find required elements");return}a.metadata||(a.metadata={}),a.metadata.isEditMode===void 0&&(a.metadata.isEditMode=!0),n.addEventListener("click",s=>{if(s.preventDefault(),s.stopPropagation(),a.metadata.isEditMode){let o=r.querySelector(".markdown-editor");o&&(a.content=o.value)}a.metadata.isEditMode=!a.metadata.isEditMode,i.onRequestUpdate?.()}),a.metadata.isEditMode?this.setupEditor(e,a,i):this.setupPreview(e,a,i)}setupEditor(e,a,i){let r=e.querySelector(".markdown-editor");r&&(r.addEventListener("focus",()=>i.onFocus()),r.addEventListener("blur",()=>i.onBlur()),r.addEventListener("input",()=>{a.content=r.value}),r.addEventListener("keydown",n=>{if(n.key==="Tab"){n.preventDefault();let s=r.selectionStart,o=r.selectionEnd,u=r.value;if(n.shiftKey){let l=u.substring(0,s).lastIndexOf(`
`)+1,f=u.substring(l,s);f.startsWith("  ")&&(r.value=u.substring(0,l)+f.substring(2)+u.substring(s),r.selectionStart=r.selectionEnd=s-2)}else r.value=u.substring(0,s)+"  "+u.substring(o),r.selectionStart=r.selectionEnd=s+2;a.content=r.value;return}if((n.ctrlKey||n.metaKey)&&n.key==="b"){n.preventDefault(),this.wrapSelection(r,"**","**"),a.content=r.value;return}if((n.ctrlKey||n.metaKey)&&n.key==="i"){n.preventDefault(),this.wrapSelection(r,"_","_"),a.content=r.value;return}if((n.ctrlKey||n.metaKey)&&n.key==="k"){n.preventDefault(),this.insertLink(r),a.content=r.value;return}i.onKeyDown(n)}),this.autoResize(r),r.addEventListener("input",()=>this.autoResize(r)))}setupPreview(e,a,i){let r=e.querySelector(".markdown-block-container"),n=e.querySelector(".markdown-preview");!r||!n||(n.setAttribute("tabindex","0"),n.addEventListener("focus",()=>i.onFocus()),n.addEventListener("blur",()=>i.onBlur()),n.addEventListener("keydown",s=>{if(s.key==="Enter"&&!s.shiftKey){s.preventDefault(),a.metadata.isEditMode=!0,i.onRequestUpdate?.();return}i.onKeyDown(s)}))}wrapSelection(e,a,i){let r=e.selectionStart,n=e.selectionEnd,s=e.value.substring(r,n),o=a+(s||"text")+i;e.value=e.value.substring(0,r)+o+e.value.substring(n),s?(e.selectionStart=r,e.selectionEnd=r+o.length):(e.selectionStart=r+a.length,e.selectionEnd=r+a.length+4),e.focus()}insertLink(e){let a=e.selectionStart,i=e.selectionEnd,n=e.value.substring(a,i)||"link text",s=`[${n}](url)`;e.value=e.value.substring(0,a)+s+e.value.substring(i),e.selectionStart=a+n.length+3,e.selectionEnd=a+n.length+6,e.focus()}autoResize(e){e.style.height="auto",e.style.height=e.scrollHeight+"px"}parseMarkdown(e){let a=this.escapeHtml(e);return a=a.replace(/^### (.+)$/gm,"<h3>$1</h3>"),a=a.replace(/^## (.+)$/gm,"<h2>$1</h2>"),a=a.replace(/^# (.+)$/gm,"<h1>$1</h1>"),a=a.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),a=a.replace(/__(.+?)__/g,"<strong>$1</strong>"),a=a.replace(/\*(.+?)\*/g,"<em>$1</em>"),a=a.replace(/_(.+?)_/g,"<em>$1</em>"),a=a.replace(/```([\s\S]*?)```/g,"<pre><code>$1</code></pre>"),a=a.replace(/`(.+?)`/g,"<code>$1</code>"),a=a.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2">$1</a>'),a=a.replace(/^\* (.+)$/gm,"<li>$1</li>"),a=a.replace(/^- (.+)$/gm,"<li>$1</li>"),a=a.replace(/^\d+\. (.+)$/gm,"<li>$1</li>"),a=a.replace(/(<li>.*<\/li>\n?)+/g,i=>"<ul>"+i+"</ul>"),a=a.replace(/\n\n/g,"</p><p>"),a="<p>"+a+"</p>",a=a.replace(/<p><\/p>/g,""),a=a.replace(/<p>(<h[1-3]>)/g,"$1"),a=a.replace(/(<\/h[1-3]>)<\/p>/g,"$1"),a=a.replace(/<p>(<ul>)/g,"$1"),a=a.replace(/(<\/ul>)<\/p>/g,"$1"),a=a.replace(/<p>(<pre>)/g,"$1"),a=a.replace(/(<\/pre>)<\/p>/g,"$1"),a}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){let a=e.querySelector(".markdown-editor");if(a)return a.value;let r=e.querySelector(".markdown-block-container")?.getAttribute("data-block-id");return""}setContent(e,a){let i=e.querySelector(".markdown-editor");i&&(i.value=a,this.autoResize(i))}getCursorPosition(e){let a=e.querySelector(".markdown-editor");return a?a.selectionStart:null}setCursorToStart(e){let a=e.querySelector(".markdown-editor");a?(a.selectionStart=a.selectionEnd=0,a.focus()):this.focus(e)}setCursorToEnd(e){let a=e.querySelector(".markdown-editor");if(a){let i=a.value.length;a.selectionStart=a.selectionEnd=i,a.focus()}else this.focus(e)}focus(e){let a=e.querySelector(".markdown-editor");a?a.focus():e.querySelector(".markdown-preview")?.focus()}focusWithCursor(e,a="end"){let i=e.querySelector(".markdown-editor");i?a==="start"?this.setCursorToStart(e):a==="end"?this.setCursorToEnd(e):typeof a=="number"&&(i.selectionStart=i.selectionEnd=a,i.focus()):this.focus(e)}getSplitContent(e){let a=e.querySelector(".markdown-editor");if(!a)return null;let i=a.selectionStart;return{before:a.value.substring(0,i),after:a.value.substring(i)}}getStyles(){return`
      /* Markdown Block Container */
      .markdown-block-container {
        position: relative;
        margin: 12px 0;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
        background: ${p.bdTheme("#ffffff","#111827")};
      }
      
      .markdown-block-container.selected {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Header */
      .markdown-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        background: ${p.bdTheme("#f9fafb","#0a0a0a")};
      }
      
      .markdown-icon {
        font-size: 14px;
        font-weight: 600;
        opacity: 0.8;
      }
      
      .markdown-title {
        flex: 1;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .markdown-toggle-mode {
        padding: 4px 8px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      
      .markdown-toggle-mode:hover {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        border-color: ${p.bdTheme("#d1d5db","#4b5563")};
      }
      
      /* Content */
      .markdown-content {
        position: relative;
        min-height: 120px;
      }
      
      /* Editor */
      .markdown-editor {
        width: 100%;
        min-height: 120px;
        padding: 12px;
        background: transparent;
        border: none;
        outline: none;
        resize: none;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.6;
        color: ${p.bdTheme("#1f2937","#f3f4f6")};
        overflow: hidden;
      }
      
      .markdown-editor::placeholder {
        color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Preview */
      .markdown-preview {
        padding: 12px;
        min-height: 96px;
        outline: none;
        font-size: 14px;
        line-height: 1.6;
        color: ${p.bdTheme("#1f2937","#f3f4f6")};
      }
      
      .preview-empty {
        color: ${p.bdTheme("#9ca3af","#6b7280")};
        font-style: italic;
      }
      
      /* Markdown preview styles */
      .markdown-preview h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 16px 0 8px 0;
        color: ${p.bdTheme("#111827","#f9fafb")};
      }
      
      .markdown-preview h2 {
        font-size: 20px;
        font-weight: 600;
        margin: 14px 0 6px 0;
        color: ${p.bdTheme("#111827","#f9fafb")};
      }
      
      .markdown-preview h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 12px 0 4px 0;
        color: ${p.bdTheme("#111827","#f9fafb")};
      }
      
      .markdown-preview p {
        margin: 8px 0;
      }
      
      .markdown-preview ul,
      .markdown-preview ol {
        margin: 8px 0;
        padding-left: 24px;
      }
      
      .markdown-preview li {
        margin: 4px 0;
      }
      
      .markdown-preview code {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        padding: 2px 4px;
        border-radius: 3px;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        font-size: 0.9em;
      }
      
      .markdown-preview pre {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        padding: 12px;
        border-radius: 4px;
        overflow-x: auto;
        margin: 8px 0;
      }
      
      .markdown-preview pre code {
        background: transparent;
        padding: 0;
      }
      
      .markdown-preview strong {
        font-weight: 600;
        color: ${p.bdTheme("#111827","#f9fafb")};
      }
      
      .markdown-preview em {
        font-style: italic;
      }
      
      .markdown-preview a {
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        text-decoration: none;
      }
      
      .markdown-preview a:hover {
        text-decoration: underline;
      }
      
      .markdown-preview blockquote {
        border-left: 3px solid ${p.bdTheme("#e5e7eb","#374151")};
        padding-left: 12px;
        margin: 8px 0;
        color: ${p.bdTheme("#6b7280","#9ca3af")};
      }
    `}}});var r8,wbt=v(()=>{Ka();oe();r8=class extends M1{type="html";render(e,a){let i=e.metadata?.isEditMode??!0,r=e.content||"";return`
      <div class="html-block-container${a?" selected":""}" 
           data-block-id="${e.id}"
           data-edit-mode="${i}">
        <div class="html-header">
          <div class="html-icon">&lt;/&gt;</div>
          <div class="html-title">HTML</div>
          <button class="html-toggle-mode" title="${i?"Preview":"Edit"}">
            ${i?"\u{1F441}\uFE0F":"\u270F\uFE0F"}
          </button>
        </div>
        <div class="html-content">
          ${i?this.renderEditor(r):this.renderPreview(r)}
        </div>
      </div>
    `}renderEditor(e){return`
      <textarea class="html-editor" 
                placeholder="Enter HTML content..."
                spellcheck="false">${this.escapeHtml(e)}</textarea>
    `}renderPreview(e){return`
      <div class="html-preview">
        ${e||'<div class="preview-empty">No content to preview</div>'}
      </div>
    `}setup(e,a,i){let r=e.querySelector(".html-block-container"),n=e.querySelector(".html-toggle-mode");if(!r||!n){console.error("HtmlBlockHandler: Could not find required elements");return}a.metadata||(a.metadata={}),a.metadata.isEditMode===void 0&&(a.metadata.isEditMode=!0),n.addEventListener("click",s=>{if(s.preventDefault(),s.stopPropagation(),a.metadata.isEditMode){let o=r.querySelector(".html-editor");o&&(a.content=o.value)}a.metadata.isEditMode=!a.metadata.isEditMode,i.onRequestUpdate?.()}),a.metadata.isEditMode?this.setupEditor(e,a,i):this.setupPreview(e,a,i)}setupEditor(e,a,i){let r=e.querySelector(".html-editor");r&&(r.addEventListener("focus",()=>i.onFocus()),r.addEventListener("blur",()=>i.onBlur()),r.addEventListener("input",()=>{a.content=r.value,this.validateHtml(r.value)}),r.addEventListener("keydown",n=>{if(n.key==="Tab"){n.preventDefault();let s=r.selectionStart,o=r.selectionEnd,u=r.value;if(n.shiftKey){let l=u.substring(0,s).lastIndexOf(`
`)+1,f=u.substring(l,s);f.startsWith("  ")&&(r.value=u.substring(0,l)+f.substring(2)+u.substring(s),r.selectionStart=r.selectionEnd=s-2)}else r.value=u.substring(0,s)+"  "+u.substring(o),r.selectionStart=r.selectionEnd=s+2;a.content=r.value;return}if((n.ctrlKey||n.metaKey)&&n.key==="/"){n.preventDefault(),this.autoCloseTag(r),a.content=r.value;return}i.onKeyDown(n)}),this.autoResize(r),r.addEventListener("input",()=>this.autoResize(r)))}setupPreview(e,a,i){let r=e.querySelector(".html-block-container"),n=e.querySelector(".html-preview");!r||!n||(n.setAttribute("tabindex","0"),n.addEventListener("focus",()=>i.onFocus()),n.addEventListener("blur",()=>i.onBlur()),n.addEventListener("keydown",s=>{if(s.key==="Enter"&&!s.shiftKey){s.preventDefault(),a.metadata.isEditMode=!0,i.onRequestUpdate?.();return}i.onKeyDown(s)}),this.sandboxContent(n))}autoCloseTag(e){let a=e.selectionStart,i=e.value,r=a;for(;r>0&&i[r-1]!=="<";)r--;if(r>0){let s=i.substring(r,a).match(/^(\w+)/);if(s){let u=`</${s[1]}>`;e.value=i.substring(0,a)+">"+u+i.substring(a),e.selectionStart=e.selectionEnd=a+1}}}autoResize(e){e.style.height="auto",e.style.height=e.scrollHeight+"px"}validateHtml(e){let a=[],i=/<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g,r;for(;(r=i.exec(e))!==null;){let n=r[0].startsWith("</"),s=r[1].toLowerCase();if(n){if(a.length===0||a[a.length-1]!==s)return console.warn(`Mismatched closing tag: ${s}`),!1;a.pop()}else r[0].endsWith("/>")||a.push(s)}return a.length>0?(console.warn(`Unclosed tags: ${a.join(", ")}`),!1):!0}sandboxContent(e){e.querySelectorAll("script").forEach(n=>n.remove()),e.querySelectorAll("*").forEach(n=>{Array.from(n.attributes).forEach(s=>{s.name.startsWith("on")&&n.removeAttribute(s.name)})}),e.querySelectorAll("form").forEach(n=>{n.addEventListener("submit",s=>{s.preventDefault(),s.stopPropagation()})})}escapeHtml(e){let a=document.createElement("div");return a.textContent=e,a.innerHTML}getContent(e){let a=e.querySelector(".html-editor");if(a)return a.value;let r=e.querySelector(".html-block-container")?.getAttribute("data-block-id");return""}setContent(e,a){let i=e.querySelector(".html-editor");i&&(i.value=a,this.autoResize(i))}getCursorPosition(e){let a=e.querySelector(".html-editor");return a?a.selectionStart:null}setCursorToStart(e){let a=e.querySelector(".html-editor");a?(a.selectionStart=a.selectionEnd=0,a.focus()):this.focus(e)}setCursorToEnd(e){let a=e.querySelector(".html-editor");if(a){let i=a.value.length;a.selectionStart=a.selectionEnd=i,a.focus()}else this.focus(e)}focus(e){let a=e.querySelector(".html-editor");a?a.focus():e.querySelector(".html-preview")?.focus()}focusWithCursor(e,a="end"){let i=e.querySelector(".html-editor");i?a==="start"?this.setCursorToStart(e):a==="end"?this.setCursorToEnd(e):typeof a=="number"&&(i.selectionStart=i.selectionEnd=a,i.focus()):this.focus(e)}getSplitContent(e){let a=e.querySelector(".html-editor");if(!a)return null;let i=a.selectionStart;return{before:a.value.substring(0,i),after:a.value.substring(i)}}getStyles(){return`
      /* HTML Block Container */
      .html-block-container {
        position: relative;
        margin: 12px 0;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.15s ease;
        background: ${p.bdTheme("#ffffff","#111827")};
      }
      
      .html-block-container.selected {
        border-color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Header */
      .html-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        background: ${p.bdTheme("#f9fafb","#0a0a0a")};
      }
      
      .html-icon {
        font-size: 14px;
        font-weight: 600;
        opacity: 0.8;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
      }
      
      .html-title {
        flex: 1;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#374151","#e5e7eb")};
      }
      
      .html-toggle-mode {
        padding: 4px 8px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      
      .html-toggle-mode:hover {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        border-color: ${p.bdTheme("#d1d5db","#4b5563")};
      }
      
      /* Content */
      .html-content {
        position: relative;
        min-height: 120px;
      }
      
      /* Editor */
      .html-editor {
        width: 100%;
        min-height: 120px;
        padding: 12px;
        background: transparent;
        border: none;
        outline: none;
        resize: none;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.6;
        color: ${p.bdTheme("#1f2937","#f3f4f6")};
        overflow: hidden;
      }
      
      .html-editor::placeholder {
        color: ${p.bdTheme("#9ca3af","#6b7280")};
      }
      
      /* Preview */
      .html-preview {
        padding: 12px;
        min-height: 96px;
        outline: none;
        font-size: 14px;
        line-height: 1.6;
        color: ${p.bdTheme("#1f2937","#f3f4f6")};
      }
      
      .preview-empty {
        color: ${p.bdTheme("#9ca3af","#6b7280")};
        font-style: italic;
      }
      
      /* Sandboxed HTML preview styles */
      .html-preview * {
        max-width: 100%;
      }
      
      .html-preview img {
        height: auto;
      }
      
      .html-preview a {
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        text-decoration: none;
      }
      
      .html-preview a:hover {
        text-decoration: underline;
      }
      
      .html-preview table {
        border-collapse: collapse;
        width: 100%;
        margin: 8px 0;
      }
      
      .html-preview th,
      .html-preview td {
        border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
        padding: 8px;
        text-align: left;
      }
      
      .html-preview th {
        background: ${p.bdTheme("#f9fafb","#1f2937")};
        font-weight: 600;
      }
      
      .html-preview pre {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        padding: 12px;
        border-radius: 4px;
        overflow-x: auto;
        margin: 8px 0;
      }
      
      .html-preview code {
        background: ${p.bdTheme("#f3f4f6","#1f2937")};
        padding: 2px 4px;
        border-radius: 3px;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        font-size: 0.9em;
      }
      
      .html-preview pre code {
        background: transparent;
        padding: 0;
      }
    `}}});var KV=v(()=>{Ka();cbt();dbt();pbt();ubt();hbt();fbt();mbt();gbt();bbt();vbt();ybt();xbt();wbt()});function Mbt(){e1.register("divider",new a8),e1.register("paragraph",new Zd),e1.register("heading-1",new xl("heading-1")),e1.register("heading-2",new xl("heading-2")),e1.register("heading-3",new xl("heading-3")),e1.register("quote",new Xd),e1.register("code",new Kd),e1.register("list",new Qd),e1.register("image",new Jd),e1.register("youtube",new e8),e1.register("attachment",new t8),e1.register("markdown",new i8),e1.register("html",new r8)}var QV=v(()=>{KV();Mbt()});var s8,JV=v(()=>{oe();rl();Pa();vl();Aw();s8=class{static async showLanguageSelectionModal(){return new Promise(e=>{let a=null;s1.createAndShow({heading:"Select Programming Language",content:w`
          <style>
            .language-container {
              padding: 16px;
              max-height: 400px;
              overflow-y: auto;
            }
            .language-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
              gap: 8px;
            }
            .language-button {
              padding: 12px 8px;
              background: transparent;
              border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
              border-radius: 6px;
              cursor: pointer;
              text-align: center;
              font-size: 13px;
              font-weight: 500;
              transition: all 0.15s ease;
              color: ${p.bdTheme("#374151","#e5e7eb")};
            }
            .language-button:hover {
              background: ${p.bdTheme("#f9fafb","#1f2937")};
              border-color: ${p.bdTheme("#d1d5db","#4b5563")};
            }
            .language-button.selected {
              background: ${p.bdTheme("#f3f4f6","#374151")};
              border-color: ${p.bdTheme("#9ca3af","#6b7280")};
              color: ${p.bdTheme("#111827","#f9fafb")};
            }
          </style>
          <div class="language-container">
            <div class="language-grid">
              ${this.getLanguages().map(i=>w`
                <div 
                  class="language-button ${a===i.toLowerCase()?"selected":""}" 
                  @click="${()=>{a=i.toLowerCase();let r=document.querySelector("dees-modal");r&&typeof r.destroy=="function"&&r.destroy(),e(a)}}">
                  ${i}
                </div>
              `)}
            </div>
          </div>
        `,menuOptions:[{name:"Cancel",action:async i=>{i.destroy(),e(null)}}]})})}static async showBlockSettingsModal(e,a){let i=w`
      <style>
        .settings-container {
          padding: 16px;
        }
        .settings-section {
          margin-bottom: 24px;
        }
        .settings-section:last-child {
          margin-bottom: 0;
        }
        .settings-label {
          font-weight: 500;
          margin-bottom: 8px;
          color: ${p.bdTheme("#6b7280","#9ca3af")};
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        .block-type-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 8px;
        }
        .block-type-button {
          padding: 12px;
          background: transparent;
          border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
          border-radius: 6px;
          cursor: pointer;
          text-align: left;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          color: ${p.bdTheme("#374151","#e5e7eb")};
        }
        .block-type-button:hover {
          background: ${p.bdTheme("#f9fafb","#1f2937")};
          border-color: ${p.bdTheme("#d1d5db","#4b5563")};
        }
        .block-type-button.selected {
          background: ${p.bdTheme("#f3f4f6","#374151")};
          border-color: ${p.bdTheme("#9ca3af","#6b7280")};
          color: ${p.bdTheme("#111827","#f9fafb")};
        }
        .block-type-icon {
          font-weight: 500;
          font-size: 16px;
          width: 20px;
          text-align: center;
          flex-shrink: 0;
          opacity: 0.7;
        }
      </style>
      <div class="settings-container">
        ${this.getBlockTypeSelector(e,a)}
        ${e.type==="code"?this.getCodeBlockSettings(e,a):""}
      </div>
    `;s1.createAndShow({heading:"Block Settings",content:i,menuOptions:[{name:"Done",action:async r=>{r.destroy()}}]})}static getCodeBlockSettings(e,a){let i=e.metadata?.language||"javascript";return w`
      <style>
        .language-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          gap: 6px;
        }
        .language-button {
          padding: 8px 4px;
          background: transparent;
          border: 1px solid ${p.bdTheme("#e5e7eb","#374151")};
          border-radius: 4px;
          cursor: pointer;
          text-align: center;
          transition: all 0.15s ease;
          font-size: 12px;
          color: ${p.bdTheme("#374151","#e5e7eb")};
        }
        .language-button:hover {
          background: ${p.bdTheme("#f9fafb","#1f2937")};
          border-color: ${p.bdTheme("#d1d5db","#4b5563")};
        }
        .language-button.selected {
          background: ${p.bdTheme("#f3f4f6","#374151")};
          border-color: ${p.bdTheme("#9ca3af","#6b7280")};
          color: ${p.bdTheme("#111827","#f9fafb")};
        }
      </style>
      <div class="settings-section">
        <div class="settings-label">Programming Language</div>
        <div class="language-grid">
          ${this.getLanguages().map(r=>w`
            <div 
              class="language-button ${i===r.toLowerCase()?"selected":""}" 
              @click="${()=>{e.metadata||(e.metadata={}),e.metadata.language=r.toLowerCase(),a(e);let n=document.querySelector("dees-modal");n&&typeof n.destroy=="function"&&n.destroy()}}"
              data-lang="${r}"
            >${r}</div>
          `)}
        </div>
      </div>
    `}static getLanguages(){return[...Gd]}static getBlockTypeSelector(e,a){let i=V1.getSlashMenuItems().filter(r=>r.type!=="divider");return w`
      <div class="settings-section">
        <div class="settings-label">Block Type</div>
        <div class="block-type-grid">
          ${i.map(r=>w`
            <div 
              class="block-type-button ${e.type===r.type?"selected":""}"
              @click="${async n=>{let s=n.currentTarget,o=e.type;if(e.type=r.type,o==="code"&&e.type!=="code")delete e.metadata?.language;else if(o==="list"&&e.type!=="list")delete e.metadata?.listType;else if(e.type==="list"&&!e.metadata?.listType)e.metadata={listType:"bullet"};else if(e.type==="code"&&!e.metadata?.language){let c=await this.showLanguageSelectionModal();if(c)e.metadata={language:c};else{e.type=o;return}}a(e);let u=document.querySelector("dees-modal");u&&typeof u.destroy=="function"&&u.destroy()}}"
            >
              <span class="block-type-icon">${r.icon}</span>
              <span>${r.label}</span>
            </div>
          `)}
        </div>
      </div>
    `}}});var n8,kbt=v(()=>{Pa();K4();vl();Zs();XV();JV();n8=class{component;saveTimeout=null;constructor(e){this.component=e}handleBlockInput(e,a){if(this.component.isComposing)return;let i=e.target,r=i.textContent||"",n=this.detectBlockTypeIntent(r);if(n&&n.type!==a.type){e.preventDefault(),this.handleBlockTransformation(a,n,i);return}this.handleSlashCommand(r,i),this.scheduleAutoSave()}updateBlockContent(e,a){let r=a.closest(".block-wrapper")?.querySelector("dees-wysiwyg-block");if(r){let n=r.getContent();if(e.content!==n&&(e.content=n),e.type==="list"){let s=a.querySelector("ol, ul");s&&(e.metadata={listType:s.tagName.toLowerCase()==="ol"?"ordered":"bullet"})}}else if(e.type==="list"){let n=a.querySelectorAll("li");e.content=Array.from(n).map(o=>o.innerHTML||"").join(`
`);let s=a.querySelector("ol, ul");s&&(e.metadata={listType:s.tagName.toLowerCase()==="ol"?"ordered":"bullet"})}else e.type==="code"?e.content=a.textContent||"":e.content=a.innerHTML||""}detectBlockTypeIntent(e){let a=V1.checkHeadingShortcut(e);if(a)return a;let i=V1.checkListShortcut(e);return i||(V1.checkQuoteShortcut(e)?{type:"quote"}:V1.checkCodeShortcut(e)?{type:"code"}:V1.checkDividerShortcut(e)?{type:"divider"}:null)}async handleBlockTransformation(e,a,i){let r=this.component.blockOperations;if(a.type==="list"){e.type="list",e.content="",e.metadata={listType:a.listType};let n=a.listType==="ordered"?"ol":"ul";i.innerHTML=`<${n}><li></li></${n}>`,this.component.updateValue(),this.component.editorContentRef&&this.component.updateBlockElement(e.id),setTimeout(()=>{T2.focusListItem(i)},0)}else if(a.type==="divider"){e.type="divider",e.content=" ",this.component.editorContentRef&&this.component.updateBlockElement(e.id);let n=r.createBlock();r.insertBlockAfter(e,n),this.component.updateValue()}else if(a.type==="code"){let n=await s8.showLanguageSelectionModal();n&&(e.type="code",e.content="",e.metadata={language:n},i.textContent="",this.component.updateValue(),this.component.editorContentRef&&this.component.updateBlockElement(e.id),setTimeout(async()=>{await r.focusBlock(e.id,"start")},50))}else e.type=a.type,e.content="",i.textContent="",this.component.updateValue(),this.component.editorContentRef&&this.component.updateBlockElement(e.id),setTimeout(async()=>{await r.focusBlock(e.id,"start")},50)}handleSlashCommand(e,a){let i=this.component.slashMenu,r=i&&i.visible;if(e==="/"||e.startsWith("/")&&r){if(!r&&e==="/"){let n=this.getCaretCoordinates(a);i.show({x:n.left,y:n.bottom+4},s=>{this.component.insertBlock(s)}),requestAnimationFrame(()=>{document.activeElement!==a&&a.focus()})}i&&i.updateFilter(e.slice(1))}else e.startsWith("/")||this.component.closeSlashMenu()}getCaretCoordinates(e){let a=window.getSelection();if(a&&a.rangeCount>0){let r=a.getRangeAt(0).getBoundingClientRect();if(r.width>0||r.height>0)return r}return e.getBoundingClientRect()}scheduleAutoSave(){this.saveTimeout&&clearTimeout(this.saveTimeout),!(this.component.slashMenu&&this.component.slashMenu.visible)&&(this.saveTimeout=setTimeout(()=>{this.syncAllBlockContent(),this.component.updateValue()},2e3))}syncAllBlockContent(){this.component.blocks.forEach(e=>{let i=this.component.shadowRoot?.querySelector(`[data-block-id="${e.id}"]`)?.querySelector("dees-wysiwyg-block");if(i&&i.getContent){let r=i.getContent();e.content!==r&&(e.content=r)}})}destroy(){this.saveTimeout&&clearTimeout(this.saveTimeout)}}});var o8,zbt=v(()=>{Pa();K4();Zr();o8=class{component;constructor(e){this.component=e}async handleBlockKeyDown(e,a){if(this.component.slashMenu.visible&&this.isSlashMenuKey(e.key)){this.component.handleSlashMenuKeyboard(e);return}if(!this.handleFormattingShortcuts(e))switch(e.key){case"Tab":this.handleTab(e,a);break;case"Enter":await this.handleEnter(e,a);break;case"Backspace":await this.handleBackspace(e,a);break;case"Delete":await this.handleDelete(e,a);break;case"ArrowUp":await this.handleArrowUp(e,a);break;case"ArrowDown":await this.handleArrowDown(e,a);break;case"ArrowLeft":await this.handleArrowLeft(e,a);break;case"ArrowRight":await this.handleArrowRight(e,a);break}}isSlashMenuKey(e){return["ArrowDown","ArrowUp","Enter","Escape"].includes(e)}handleFormattingShortcuts(e){if(!(e.metaKey||e.ctrlKey))return!1;switch(e.key.toLowerCase()){case"b":return e.preventDefault(),Promise.resolve().then(()=>this.component.applyFormat("bold")),!0;case"i":return e.preventDefault(),Promise.resolve().then(()=>this.component.applyFormat("italic")),!0;case"u":return e.preventDefault(),Promise.resolve().then(()=>this.component.applyFormat("underline")),!0;case"k":return e.preventDefault(),Promise.resolve().then(()=>this.component.applyFormat("link")),!0}return!1}handleTab(e,a){a.type!=="code"&&a.type==="list"&&e.preventDefault()}async handleEnter(e,a){let i=this.component.blockOperations;if(["divider","image","youtube","attachment"].includes(a.type)){e.preventDefault();let 
`:"")+x:M=h+(h&&x?" ":"")+x;let S=h.length;i.updateBlockContent(f.id,M),g&&g.setContent(M),i.removeBlock(a.id),await i.focusBlock(f.id,S)}}else if(this.component.blocks.length>1){let f=s.getContent?s.getContent():a.content;if(f===""||f.trim()===""){e.preventDefault();let b=i.getPreviousBlock(a.id);b&&(i.removeBlock(a.id),b.type!=="divider"&&await i.focusBlock(b.id,"end"))}}}async handleDelete(e,a){let i=this.component.blockOperations;if(["divider","image","youtube","attachment"].includes(a.type)){if(e.preventDefault(),this.component.blocks.length===1){this.component.saveToHistory(!1),i.removeBlock(a.id);let g=i.createBlock("paragraph","");this.component.blocks=[g],this.component.renderBlocksProgrammatically(),await i.focusBlock(g.id,"start"),this.component.updateValue();return}this.component.saveToHistory(!1);let f=i.getPreviousBlock(a.id),b=i.getNextBlock(a.id);i.removeBlock(a.id);let y=["divider","image","youtube","attachment"];b&&!y.includes(b.type)?await i.focusBlock(b.id,"start"):f&&!y.includes(f.type)?await i.focusBlock(f.id,"end"):b?await i.focusBlock(b.id):f&&await i.focusBlock(f.id);return}let s=this.component.shadowRoot?.querySelector(`[data-block-id="${a.id}"]`)?.querySelector("dees-wysiwyg-block");if(!s||!s.shadowRoot)return;let o=a.type==="code"?s.shadowRoot.querySelector(".code-editor"):s.shadowRoot.querySelector(".block");if(!o)return;let u=s.closest("dees-input-wysiwyg"),c=[];u?.shadowRoot&&c.push(u.shadowRoot),c.push(s.shadowRoot);let d=Oe.getCursorPositionInElement(o,...c),l=o.textContent?.length||0;if(d===l){let f=i.getNextBlock(a.id);if(f&&["divider","image","youtube","attachment"].includes(f.type)){e.preventDefault(),await i.focusBlock(f.id);return}}}async handleArrowUp(e,a){let i=["divider","image","youtube","attachment"];if(i.includes(a.type)){e.preventDefault();let d=this.component.blockOperations,l=d.getPreviousBlock(a.id);l&&await d.focusBlock(l.id,i.includes(l.type)?void 0:"end");return}let n=this.component.shadowRoot?.querySelector(`[data-block-id="${a.id}"]`)?.querySelector("dees-wysiwyg-block");if(!n||!n.shadowRoot)return;let s=a.type==="code"?n.shadowRoot.querySelector(".code-editor"):n.shadowRoot.querySelector(".block");if(!s)return;let o=n.closest("dees-input-wysiwyg"),u=[];o?.shadowRoot&&u.push(o.shadowRoot),u.push(n.shadowRoot);let c=Oe.getSelectionInfo(...u);if(!(!c||!c.collapsed)&&this.isOnFirstLine(c,s,...u)){e.preventDefault();let d=this.component.blockOperations,l=d.getPreviousBlock(a.id);if(l){let f=["divider","image","youtube","attachment"];await d.focusBlock(l.id,f.includes(l.type)?void 0:"end")}}}async handleArrowDown(e,a){if(["divider","image","youtube","attachment"].includes(a.type)){e.preventDefault();let d=this.component.blockOperations,l=d.getNextBlock(a.id);if(l){let f=["divider","image","youtube","attachment"];await d.focusBlock(l.id,f.includes(l.type)?void 0:"start")}return}let n=this.component.shadowRoot?.querySelector(`[data-block-id="${a.id}"]`)?.querySelector("dees-wysiwyg-block");if(!n||!n.shadowRoot)return;let s=a.type==="code"?n.shadowRoot.querySelector(".code-editor"):n.shadowRoot.querySelector(".block");if(!s)return;let o=n.closest("dees-input-wysiwyg"),u=[];o?.shadowRoot&&u.push(o.shadowRoot),u.push(n.shadowRoot);let c=Oe.getSelectionInfo(...u);if(!(!c||!c.collapsed)&&this.isOnLastLine(c,s,...u)){e.preventDefault();let d=this.component.blockOperations,l=d.getNextBlock(a.id);if(l){let f=["divider","image","youtube","attachment"];await d.focusBlock(l.id,f.includes(l.type)?void 0:"start")}}}getLastTextNode(e){if(e.nodeType===Node.TEXT_NODE)return e;for(let a=e.childNodes.length-1;a>=0;a--){let i=this.getLastTextNode(e.childNodes[a]);if(i)return i}return null}async handleArrowLeft(e,a){if(["divider","image","youtube","attachment"].includes(a.type)){e.preventDefault();let l=this.component.blockOperations,f=l.getPreviousBlock(a.id);if(f){let b=["divider","image","youtube","attachment"];await l.focusBlock(f.id,b.includes(f.type)?void 0:"end")}return}let n=this.component.shadowRoot?.querySelector(`[data-block-id="${a.id}"]`)?.querySelector("dees-wysiwyg-block");if(!n
`)?Oe.getCursorPositionInElement(s,...i)===0:u}catch(r){return console.warn("Error checking first line:",r),e.startOffset===0}}isOnLastLine(e,a,...i){try{let r=Oe.createRangeFromInfo(e),n=r.getBoundingClientRect(),s=r.commonAncestorContainer;s.nodeType===Node.TEXT_NODE&&(s=s.parentElement);let u=s.getBoundingClientRect().bottom-n.bottom<5;if(s.textContent&&!s.textContent.includes(`
`)){let c=a.textContent?.length||0;return Oe.getCursorPositionInElement(a,...i)===c}return u}catch(r){console.warn("Error checking last line:",r);let n=a.textContent?.length||0;return Oe.getCursorPositionInElement(a,...i)===n}}}});var l8,Sbt=v(()=>{Pa();K4();l8=class{component;draggedBlockId=null;dragOverBlockId=null;dragOverPosition=null;dropIndicator=null;initialMouseY=0;initialBlockY=0;draggedBlockElement=null;draggedBlockHeight=0;draggedBlockContentHeight=0;draggedBlockMarginTop=0;lastUpdateTime=0;updateThrottle=80;constructor(e){this.component=e}get dragState(){return{draggedBlockId:this.draggedBlockId,dragOverBlockId:this.dragOverBlockId,dragOverPosition:this.dragOverPosition}}handleDragStart(e,a){if(!e.dataTransfer)return;this.draggedBlockId=a.id,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",a.id);let i=new Image;if(i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",e.dataTransfer.setDragImage(i,0,0),this.initialMouseY=e.clientY,this.draggedBlockElement=this.component.editorContentRef.querySelector(`[data-block-id="${a.id}"]`),this.draggedBlockElement){let r=this.draggedBlockElement.getBoundingClientRect();this.initialBlockY=r.top;let n=this.draggedBlockElement.querySelector(".block");if(n){let s=n.getBoundingClientRect(),o=window.getComputedStyle(n);this.draggedBlockMarginTop=parseInt(o.marginTop)||0,this.draggedBlockContentHeight=s.height}this.draggedBlockHeight=r.height,console.log("Drag measurements:",{wrapperHeight:r.height,marginTop:this.draggedBlockMarginTop,dropIndicatorHeight:this.draggedBlockHeight,contentHeight:this.draggedBlockContentHeight,blockId:a.id}),this.createDropIndicator(),document.addEventListener("dragover",this.handleGlobalDragOver),document.addEventListener("dragend",this.handleGlobalDragEnd)}this.component.draggedBlockId=this.draggedBlockId,setTimeout(()=>{this.draggedBlockElement&&this.draggedBlockElement.classList.add("dragging"),this.component.editorContentRef&&this.component.editorContentRef.classList.add("dragging")},10)}handleDragEnd(){this.component.editorContentRef.querySelectorAll(".block-wrapper").forEach(a=>{a.classList.remove("dragging","move-up","move-down"),a.style.removeProperty("--drag-offset"),a.style.removeProperty("transform")}),this.component.editorContentRef&&this.component.editorContentRef.classList.remove("dragging"),this.draggedBlockId=null,this.dragOverBlockId=null,this.dragOverPosition=null,this.draggedBlockElement=null,this.draggedBlockHeight=0,this.draggedBlockContentHeight=0,this.draggedBlockMarginTop=0,this.initialBlockY=0,this.component.draggedBlockId=null,this.component.dragOverBlockId=null,this.component.dragOverPosition=null}handleDragOver(e,a){if(e.preventDefault(),!e.dataTransfer||!this.draggedBlockId||this.draggedBlockId===a.id)return;e.dataTransfer.dropEffect="move";let i=e.currentTarget.getBoundingClientRect(),r=i.top+i.height/2;this.dragOverBlockId=a.id,this.dragOverPosition=e.clientY<r?"before":"after",this.component.dragOverBlockId=this.dragOverBlockId,this.component.dragOverPosition=this.dragOverPosition}handleDragLeave(e){this.dragOverBlockId===e.id&&(this.dragOverBlockId=null,this.dragOverPosition=null,this.component.dragOverBlockId=null,this.component.dragOverPosition=null)}handleDrop(e,a){e.preventDefault(),!(!this.draggedBlockId||this.draggedBlockId===a.id)&&this.component.handleDrop(e,a)}isDragging(e){return this.draggedBlockId===e}isDragOver(e){return this.dragOverBlockId===e}getDragOverClasses(e){return this.isDragOver(e)?this.dragOverPosition==="before"?"drag-over-before":"drag-over-after":""}createDropIndicator(){this.dropIndicator=document.createElement("div"),this.dropIndicator.className="drop-indicator",this.dropIndicator.style.display="none",this.component.editorContentRef.appendChild(this.dropIndicator)}handleGlobalDragOver=e=>{if(e.preventDefault(),!this.draggedBlockElement)return;let a=e.clientY-this.initialMouseY;this.draggedBlockElement.style.transform=`translateY(${a}px)`;let i=Date.now();i-this.lastUpdateTime<this.updateThrottle||(this.lastUpdateTime=i,this.updateBlockPos
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
      }

      .block {
        padding: 4px 0;
        min-height: 1.6em;
        outline: none;
        width: 100%;
        word-wrap: break-word;
        position: relative;
        transition: all 0.15s ease;
        color: ${p.bdTheme("#000000","#e0e0e0")};
      }

      .block:empty:not(:focus)::before {
        content: attr(data-placeholder);
        color: ${p.bdTheme("#999","#666")};
        position: absolute;
        pointer-events: none;
      }

      /* Block-specific styles moved to handlers */


      /* Formatting styles */
      .block :is(b, strong) {
        font-weight: 600;
        color: ${p.bdTheme("#000000","#ffffff")};
      }

      .block :is(i, em) {
        font-style: italic;
      }

      .block u {
        text-decoration: underline;
      }

      .block s {
        text-decoration: line-through;
      }

      .block code {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
        font-size: 0.9em;
        background: ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.1)")};
        padding: 2px 6px;
        border-radius: 3px;
        color: ${p.bdTheme("#d14","#ff6b6b")};
      }

      .block a {
        color: ${p.bdTheme("#0066cc","#4d94ff")};
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.15s ease;
        cursor: pointer;
      }

      .block a:hover {
        border-bottom-color: ${p.bdTheme("#0066cc","#4d94ff")};
      }

      /* Code block container and language styles moved to handler */

      /* Selection styles */
      .block ::selection {
        background: ${p.bdTheme("rgba(0, 102, 204, 0.3)","rgba(77, 148, 255, 0.3)")};
        color: inherit;
      }


      /* Strike through */
      .block :is(s, strike) {
        text-decoration: line-through;
        opacity: 0.7;
      }


      /* Block margin adjustments based on type */
      :host-context(.block-wrapper:first-child) .block {
        margin-top: 0 !important;
      }

      :host-context(.block-wrapper:last-child) .block {
        margin-bottom: 0;
      }

      /* Selected state */
      .block.selected {
        background: ${p.bdTheme("rgba(0, 102, 204, 0.05)","rgba(77, 148, 255, 0.08)")};
        box-shadow: inset 0 0 0 2px ${p.bdTheme("rgba(0, 102, 204, 0.2)","rgba(77, 148, 255, 0.2)")};
        border-radius: 4px;
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
      }




    `];shouldUpdate(M){if(M.has("isSelected")&&this.block){let S=null,_=`.block.${this.block.type}`;return S=this.shadowRoot?.querySelector(_),S&&(this.isSelected?S.classList.add("selected"):S.classList.remove("selected")),!1}if(M.has("block")&&this.block){let S=M.get("block");if(S&&S.id&&S.type&&S.id===this.block.id&&S.type===this.block.type)return!1}return!this.blockElement||this.block?.type!==this.blockElement.dataset.blockType}firstUpdated(){this.contentInitialized=!0,this.injectHandlerStyles();let M=this.shadowRoot?.querySelector(".wysiwyg-block-container");if(M&&this.block&&(M.innerHTML=this.renderBlockContent()),this.block){let N=e1.getHandler(this.block.type);if(N){let _=this.shadowRoot?.querySelector(".wysiwyg-block-container");_&&N.setup(_,this.block,this.handlers);return}}let S=this.shadowRoot?.querySelector(".block");if(S){S.setAttribute("data-block-id",this.block.id),S.setAttribute("data-block-type",this.block.type),S.addEventListener("input",_=>{this.handlers?.onInput?.(_);let k=this.getCursorPosition(S);k!==null&&(this.lastKnownCursorPosition=k)}),S.addEventListener("keydown",_=>{let k=this.getCursorPosition(S);k!==null&&(this.lastKnownCursorPosition=k),this.handlers?.onKeyDown?.(_)}),S.addEventListener("focus",()=>{this.handlers?.onFocus?.()}),S.addEventListener("blur",()=>{this.handlers?.onBlur?.()}),S.addEventListener("compositionstart",()=>{this.handlers?.onCompositionStart?.()}),S.addEventListener("compositionend",()=>{this.handlers?.onCompositionEnd?.()}),S.addEventListener("mouseup",_=>{let k=this.getCursorPosition(S);k!==null&&(this.lastKnownCursorPosition=k),this.handlers?.onMouseUp?.(_)}),S.addEventListener("click",()=>{setTimeout(()=>{let _=this.getCursorPosition(S);_!==null&&(this.lastKnownCursorPosition=_)},0)});let N=()=>{let _=window.getSelection();if(!_||_.rangeCount===0)return;let k=_.toString();if(k.length===0){this.lastSelectedText&&(this.lastSelectedText="",this.dispatchEvent(new CustomEvent("block-text-selected",{detail:{text:"",blockId:this.block.id,hasSelection:!1},bubbles:!0,composed:!0})));return}let I=this.shadowRoot?.querySelector(".block");if(!I)return;let A=this.closest("dees-input-wysiwyg")?.shadowRoot,V=[];A&&V.push(A),this.shadowRoot&&V.push(this.shadowRoot);let C=Oe.getSelectionInfo(...V);if(!C)return;let z=Oe.containsAcrossShadowDOM(I,C.startContainer),E=Oe.containsAcrossShadowDOM(I,C.endContainer);if(z||E){if(k!==this.lastSelectedText){this.lastSelectedText=k;let T=Oe.createRangeFromInfo(C),$=T.getBoundingClientRect();this.dispatchEvent(new CustomEvent("block-text-selected",{detail:{text:k.trim(),blockId:this.block.id,range:T,rect:$,hasSelection:!0},bubbles:!0,composed:!0}))}}else this.lastSelectedText&&(this.lastSelectedText="",this.dispatchEvent(new CustomEvent("block-text-selected",{detail:{text:"",blockId:this.block.id,hasSelection:!1},bubbles:!0,composed:!0})))};document.addEventListener("selectionchange",N),this._selectionHandler=N,S.addEventListener("keyup",()=>{let _=this.getCursorPosition(S);_!==null&&(this.lastKnownCursorPosition=_)}),this.block.content&&(S.innerHTML=this.block.content)}this.blockElement=S}render(){return this.block?As`<div class="wysiwyg-block-container"></div>`:As``}renderBlockContent(){if(!this.block)return"";let M=e1.getHandler(this.block.type);if(M)return M.render(this.block,this.isSelected);let S=this.isSelected?" selected":"";return`
      <div
        class="block ${this.block.type}${S}"
        contenteditable="true"
      ></div>
    `}focus(){let M=e1.getHandler(this.block.type);if(M&&M.focus){let N=this.shadowRoot?.querySelector(".wysiwyg-block-container"),_={shadowRoot:this.shadowRoot,component:this};return M.focus(N,_)}if(this.block&&x.NON_EDITABLE_TYPES.includes(this.block.type)){let N=this.shadowRoot?.querySelector(`.block.${this.block.type}`);N&&N.focus();return}let S=this.shadowRoot?.querySelector(".block");S&&(S.hasAttribute("contenteditable")||S.setAttribute("contenteditable","true"),S.focus(),document.activeElement!==S&&this.shadowRoot?.activeElement!==S&&Promise.resolve().then(()=>{S.focus()}))}focusWithCursor(M="end"){let S=e1.getHandler(this.block.type);if(S&&S.focusWithCursor){let k=this.shadowRoot?.querySelector(".wysiwyg-block-container"),I={shadowRoot:this.shadowRoot,component:this};return S.focusWithCursor(k,M,I)}if(this.block&&x.NON_EDITABLE_TYPES.includes(this.block.type)){this.focus();return}let N=this.shadowRoot?.querySelector(".block");if(!N)return;N.hasAttribute("contenteditable")||N.setAttribute("contenteditable","true"),N.focus();let _=()=>{M==="start"?this.setCursorToStart():M==="end"?this.setCursorToEnd():typeof M=="number"&&Oe.setCursorPosition(N,M)};document.activeElement===N||this.shadowRoot?.activeElement===N?_():Promise.resolve().then(()=>{(document.activeElement===N||this.shadowRoot?.activeElement===N)&&_()})}getCursorPosition(M){let S=e1.getHandler(this.block.type);if(S&&S.getCursorPosition){let V={shadowRoot:this.shadowRoot,component:this};return S.getCursorPosition(M,V)}let _=this.closest("dees-input-wysiwyg")?.shadowRoot,k=[];_&&k.push(_),this.shadowRoot&&k.push(this.shadowRoot);let I=Oe.getSelectionInfo(...k);if(console.log("getCursorPosition: Selection info from shadow DOMs:",{selectionInfo:I,shadowRootsCount:k.length}),!I)return console.log("getCursorPosition: No selection found"),null;if(console.log("getCursorPosition: Range info:",{startContainer:I.startContainer,startOffset:I.startOffset,collapsed:I.collapsed,startContainerText:I.startContainer.textContent}),!M.contains(I.startContainer))return console.log("getCursorPosition: Range not in element"),null;let L=document.createRange();L.selectNodeContents(M),L.setEnd(I.startContainer,I.startOffset);let A=L.toString().length;return console.log("getCursorPosition: Calculated position:",{position:A,preCaretText:L.toString(),elementText:M.textContent,elementTextLength:M.textContent?.length}),A}getContent(){let M=e1.getHandler(this.block.type);if(M&&M.getContent){let _=this.shadowRoot?.querySelector(".wysiwyg-block-container"),k={shadowRoot:this.shadowRoot,component:this};return M.getContent(_,k)}let S=this.shadowRoot?.querySelector(".block");if(!S)return"";let N=S.innerHTML||"";return console.log("Getting content from block:",N),N}setContent(M){let S=e1.getHandler(this.block.type);if(S&&S.setContent){let k=this.shadowRoot?.querySelector(".wysiwyg-block-container"),I={shadowRoot:this.shadowRoot,component:this};return S.setContent(k,M,I)}let N=this.shadowRoot?.querySelector(".block");if(!N)return;let _=document.activeElement===N||this.shadowRoot?.activeElement===N;N.innerHTML=M,_&&N.focus()}setCursorToStart(){let M=e1.getHandler(this.block.type);if(M&&M.setCursorToStart){let N=this.shadowRoot?.querySelector(".wysiwyg-block-container"),_={shadowRoot:this.shadowRoot,component:this};return M.setCursorToStart(N,_)}let S=this.shadowRoot?.querySelector(".block");S&&T2.setCursorToStart(S)}setCursorToEnd(){let M=e1.getHandler(this.block.type);if(M&&M.setCursorToEnd){let N=this.shadowRoot?.querySelector(".wysiwyg-block-container"),_={shadowRoot:this.shadowRoot,component:this};return M.setCursorToEnd(N,_)}let S=this.shadowRoot?.querySelector(".block");S&&T2.setCursorToEnd(S)}getContextMenuItems(){if(!this.block||this.block.type==="divider")return[];let M=V1.getSlashMenuItems(),S=this.block.type,N=this.wysiwygComponent,_=this.block.id,I=[{name:"Change Type",iconName:"type",submenu:M.filter(L=>L.type!==S&&L.type!=="divider").map(L=>({name:L.label,iconName:L.icon.replace("lucide:",""),action:async()=>{if(N&&N.blockOperations){let A=N.blocks.find(V=>V.id===_);A&&(A.type=L.t
      <dees-label
        .label="${this.label}"
        .description="${this.description}"
        .required="${this.required}"
      ></dees-label>
      <div class="wysiwyg-container">
        <div 
          class="editor-content ${this.draggedBlockId?"dragging":""}"
          id="editor-content"
        >
          <!-- Blocks will be rendered programmatically -->
        </div>
      </div>
    `}handleSlashMenuKeyboard(C){switch(C.key){case"ArrowDown":C.preventDefault(),this.slashMenu.navigate("down");break;case"ArrowUp":C.preventDefault(),this.slashMenu.navigate("up");break;case"Enter":C.preventDefault(),this.slashMenu.selectCurrent();break;case"Escape":C.preventDefault(),this.closeSlashMenu(!0);break}}closeSlashMenu(C=!1){if(C&&this.selectedBlockId){let z=this.blocks.find(E=>E.id===this.selectedBlockId);if(z){let T=this.shadowRoot.querySelector(`[data-block-id="${z.id}"]`)?.querySelector("dees-wysiwyg-block");if(T){let $=T.getContent();if($.startsWith("/")){let H=$.replace(/^\/[^\s]*\s*/,"").trim();T.setContent(H),z.content=H,requestAnimationFrame(()=>{T.focusWithCursor(0)})}}}}this.slashMenu.hide()}handleBlockFocus(C){this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null);let z=this.selectedBlockId;if(this.selectedBlockId=C.id,z!==C.id){if(z){let H=this.shadowRoot?.querySelector(`[data-block-id="${z}"]`)?.querySelector("dees-wysiwyg-block");H&&(H.isSelected=!1)}let T=this.shadowRoot?.querySelector(`[data-block-id="${C.id}"]`)?.querySelector("dees-wysiwyg-block");T&&(T.isSelected=!0)}}blurTimeout=null;handleBlockBlur(C){if(this.blurTimeout&&clearTimeout(this.blurTimeout),this.slashMenu.visible)return;let E=this.shadowRoot?.querySelector(`[data-block-id="${C.id}"]`)?.querySelector("dees-wysiwyg-block");if(E&&E.getContent){let T=E.getContent();C.content!==T&&(C.content=T)}this.blurTimeout=setTimeout(()=>{this.shadowRoot?.activeElement?.classList.contains("block")||this.updateValue()},100)}handleEditorClick(C){let z=C.target;if(this.slashMenu.visible&&this.closeSlashMenu(!0),z.classList.contains("editor-content")){let E=this.blocks[this.blocks.length-1];this.blockOperations.focusBlock(E.id,E.type==="divider"||E.type==="image"?void 0:"end")}}createNewBlock(C="paragraph",z="",E){return{id:V1.generateBlockId(),type:C,content:z,...E&&{metadata:E}}}async insertBlockAfter(C,z,E=!0){let T=this.blocks.findIndex(H=>H.id===C.id);this.blocks=[...this.blocks.slice(0,T+1),z,...this.blocks.slice(T+1)];let $=this.editorContentRef.querySelector(`[data-block-id="${C.id}"]`);if($){let H=this.createBlockElement(z);$.insertAdjacentElement("afterend",H)}this.updateValue(),E&&z.type!=="divider"&&(await new Promise(H=>setTimeout(H,0)),await this.blockOperations.focusBlock(z.id,"start"))}async insertBlock(C){let z=this.blocks.find($=>$.id===this.selectedBlockId);if(!z){this.closeSlashMenu();return}let T=this.shadowRoot.querySelector(`[data-block-id="${z.id}"]`)?.querySelector("dees-wysiwyg-block");if(T){let $=T.getContent();if($.startsWith("/")){let H=$.replace(/^\/[^\s]*\s*/,"").trim();T.setContent(H),z.content=H}}if(this.closeSlashMenu(!1),C==="code"&&(z.metadata={language:"typescript"}),z.type=C,z.content=z.content||"",C==="divider"){z.content=" ";let $=this.createNewBlock();this.insertBlockAfter(z,$)}else C==="list"?(z.metadata={listType:"bullet"},z.content=""):C==="image"?(z.content="",z.metadata={url:"",loading:!1}):C==="youtube"?(z.content="",z.metadata={videoId:"",url:""}):C==="markdown"?z.metadata={showPreview:!1}:C==="html"?z.metadata={showPreview:!1}:C==="attachment"?(z.content="",z.metadata={files:[]}):z.content=z.content||"";this.updateBlockElement(z.id),this.updateValue(),await new Promise($=>setTimeout($,0)),C==="list"?(this.blockOperations.focusBlock(z.id,"start"),requestAnimationFrame(()=>{let H=this.shadowRoot?.querySelector(`[data-block-id="${z.id}"]`)?.querySelector("dees-wysiwyg-block");H&&H.focusListItem()})):C!=="divider"&&C!=="image"&&C!=="youtube"&&C!=="markdown"&&C!=="html"&&C!=="attachment"?this.blockOperations.focusBlock(z.id,"start"):(C==="image"||C==="youtube"||C==="markdown"||C==="html"||C==="attachment")&&this.blockOperations.focusBlock(z.id)}updateValue(){this.outputFormat==="html"?this.value=zi.getHtmlOutput(this.blocks):this.value=zi.getMarkdownOutput(this.blocks),this.changeSubject.next(this.value),this.saveToHistory(!0)}getValue(){return this.value}setValue(C){this.value=C,this.outputFormat==="html"?this.blocks=zi.parseHtmlToBlocks(C):this.blocks=zi.parseMarkdownToBlocks(C),t
          <style>
            .link-input {
              width: 100%;
              padding: 12px;
              font-size: 16px;
              border: 1px solid var(--dees-color-line-bright);
              border-radius: 4px;
              background: var(--dees-color-input);
              color: var(--dees-color-text);
              margin: 16px 0;
            }
            .link-input:focus {
              outline: none;
              border-color: var(--dees-color-primary);
            }
          </style>
          <input 
            class="link-input" 
            type="url" 
            placeholder="https://example.com" 
            @keydown="${E=>{if(E.key==="Enter"){let T=E.target;z=T.value;let $=T.closest("dees-modal");if($){let H=$.shadowRoot?.querySelector(".bottomButton:last-child");H&&H.click()}}}}"
            @input="${E=>{z=E.target.value}}"
          />
        `,menuOptions:[{name:"Cancel",action:async E=>{E.destroy(),C(null)}},{name:"Add Link",action:async E=>{E.destroy(),C(z)}}]}),setTimeout(()=>{let E=document.querySelector("dees-modal .link-input");E&&E.focus()},100)})}undo(){let C=this.history.undo();C&&this.restoreState(C)}redo(){let C=this.history.redo();C&&this.restoreState(C)}restoreState(C){this.blocks=C.blocks,this.selectedBlockId=C.selectedBlockId,this.renderBlocksProgrammatically(),C.cursorPosition?setTimeout(()=>{let E=this.shadowRoot?.querySelector(`[data-block-id="${C.cursorPosition.blockId}"]`)?.querySelector("dees-wysiwyg-block");E&&E.focusWithCursor(C.cursorPosition.offset)},50):C.selectedBlockId&&setTimeout(()=>{this.blockOperations.focusBlock(C.selectedBlockId)},50),this.updateValue()}saveToHistory(C=!0){let z;if(this.selectedBlockId){let T=this.shadowRoot?.querySelector(`[data-block-id="${this.selectedBlockId}"]`)?.querySelector("dees-wysiwyg-block");if(T&&typeof T.getCursorPosition=="function"){let $=T.shadowRoot?.querySelector(".block");if($){let H=T.getCursorPosition($);H!==null&&(z={blockId:this.selectedBlockId,offset:H})}}}C?this.history.saveState(this.blocks,this.selectedBlockId,z):this.history.saveCheckpoint(this.blocks,this.selectedBlockId,z)}static{ha(i,a)}};return V=i})()});var Lbt=v(()=>{tj();ej()});var Ew,$bt=v(()=>{Ew=class{options;canvas;ctx;img;overlayCanvas;overlayCtx;cropX=0;cropY=0;cropSize=200;minCropSize=50;isDragging=!1;isResizing=!1;dragStartX=0;dragStartY=0;resizeHandle="";imageScale=1;imageOffsetX=0;imageOffsetY=0;constructor(e){this.options={minSize:50,outputSize:800,outputQuality:.95,...e},this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.overlayCanvas=document.createElement("canvas"),this.overlayCtx=this.overlayCanvas.getContext("2d"),this.img=new Image}async initialize(){await this.loadImage(),this.setupCanvases(),this.setupEventListeners(),this.render()}async loadImage(){return new Promise((e,a)=>{this.img.onload=()=>e(),this.img.onerror=a,this.img.src=this.options.image})}setupCanvases(){let e=this.options.container,a=Math.min(e.clientWidth,e.clientHeight);this.canvas.width=a,this.canvas.height=a,this.canvas.style.width="100%",this.canvas.style.height="100%",this.canvas.style.position="absolute",this.canvas.style.top="0",this.canvas.style.left="0",this.overlayCanvas.width=a,this.overlayCanvas.height=a,this.overlayCanvas.style.width="100%",this.overlayCanvas.style.height="100%",this.overlayCanvas.style.position="absolute",this.overlayCanvas.style.top="0",this.overlayCanvas.style.left="0",this.overlayCanvas.style.cursor="move",e.appendChild(this.canvas),e.appendChild(this.overlayCanvas);let i=Math.min(a/this.img.width,a/this.img.height);this.imageScale=i,this.imageOffsetX=(a-this.img.width*i)/2,this.imageOffsetY=(a-this.img.height*i)/2;let r=this.img.width*i,n=this.img.height*i,s=Math.min(r,n,a*.8);this.cropSize=s*.8,this.cropX=(a-this.cropSize)/2,this.cropY=(a-this.cropSize)/2}setupEventListeners(){this.overlayCanvas.addEventListener("mousedown",this.handleMouseDown.bind(this)),this.overlayCanvas.addEventListener("mousemove",this.handleMouseMove.bind(this)),this.overlayCanvas.addEventListener("mouseup",this.handleMouseUp.bind(this)),this.overlayCanvas.addEventListener("mouseleave",this.handleMouseUp.bind(this)),this.overlayCanvas.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.overlayCanvas.addEventListener("touchmove",this.handleTouchMove.bind(this)),this.overlayCanvas.addEventListener("touchend",this.handleTouchEnd.bind(this))}handleMouseDown(e){let a=this.overlayCanvas.getBoundingClientRect(),i=(e.clientX-a.left)*(this.overlayCanvas.width/a.width),r=(e.clientY-a.top)*(this.overlayCanvas.height/a.height),n=this.getResizeHandle(i,r);n?(this.isResizing=!0,this.resizeHandle=n):this.isInsideCropArea(i,r)&&(this.isDragging=!0),this.dragStartX=i,this.dragStartY=r}handleMouseMove(e){let a=this.overlayCanvas.getBoundingClientRect(),i=(e.clientX-a.left)*(this.overlayCanvas.width/a.width),r=(e.clientY-a.top)*(this.overlayCanvas.height/a.height),n=this.getResizeHandle(
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        font-family: ${Qt};
        color: ${p.bdTheme("#333","#fff")};
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-index);
      }

      .modal-container {
        background: ${p.bdTheme("#ffffff","#0a0a0a")};
        border-radius: 12px;
        border: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.08)","rgba(255, 255, 255, 0.08)")};
        box-shadow: ${p.bdTheme("0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)")};
        width: 480px;
        max-width: calc(100vw - 32px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(10px) scale(0.98);
        opacity: 0;
        animation: modalShow 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      @keyframes modalShow {
        to {
          opacity: 1;
          transform: translateY(0px) scale(1);
        }
      }

      .modal-header {
        height: 52px;
        padding: 0 20px;
        border-bottom: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.06)")};
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
      }

      .modal-title {
        font-size: 15px;
        font-weight: 600;
        color: ${p.bdTheme("#09090b","#fafafa")};
        letter-spacing: -0.01em;
      }

      .close-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#71717a","#71717a")};
        transition: all 0.15s ease;
      }

      .close-button:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.05)","rgba(255, 255, 255, 0.05)")};
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .close-button:active {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.08)","rgba(255, 255, 255, 0.08)")};
      }

      .modal-body {
        flex: 1;
        padding: 24px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .cropper-container {
        width: 100%;
        max-width: 360px;
        aspect-ratio: 1;
        position: relative;
        background: ${p.bdTheme("#000000","#000000")};
        border-radius: 12px;
        overflow: hidden;
        box-shadow: ${p.bdTheme("inset 0 2px 4px rgba(0, 0, 0, 0.06)","inset 0 2px 4px rgba(0, 0, 0, 0.2)")};
      }

      .preview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .preview-image {
        width: 180px;
        height: 180px;
        object-fit: cover;
        border: 4px solid ${p.bdTheme("#ffffff","#18181b")};
        box-shadow: ${p.bdTheme("0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)","0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)")};
      }

      .preview-image.round {
        border-radius: 50%;
      }

      .preview-image.square {
        border-radius: 16px;
      }

      .success-message {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        background: ${p.bdTheme("#10b981","#10b981")};
        color: white;
        border-radius: 100px;
        font-weight: 500;
        font-size: 14px;
        animation: successPulse 0.4s ease-out;
      }

      @keyframes successPulse {
        0% { transform: scale(0.9); opacity: 0; }
        50% { transform: scale(1.02); }
        100% { transform: scale(1); opacity: 1; }
      }

      .modal-footer {
        padding: 20px 24px;
        border-top: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.06)")};
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }

      .instructions {
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        font-size: 13px;
        line-height: 1.5;
        max-width: 320px;
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.1)")};
        border-top-color: ${p.bdTheme("#3b82f6","#60a5fa")};
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @media (max-width: 768px) {
        .modal-container {
          width: calc(100vw - 32px);
          margin: 16px;
        }
        
        .modal-body {
          padding: 24px;
        }
      }
    `];async connectedCallback(){super.connectedCallback(),this.windowLayer=await vi.createAndShow({blur:!0}),this.windowLayer.addEventListener("click",()=>this.close()),this.zIndex=u1.getNextZIndex(),this.style.setProperty("--z-index",this.zIndex.toString()),u1.register(this,this.zIndex)}async disconnectedCallback(){super.disconnectedCallback(),this.cropper&&this.cropper.destroy(),this.windowLayer&&await this.windowLayer.destroy(),u1.unregister(this)}render(){return w`
      <div class="modal-container" @click=${C=>C.stopPropagation()}>
        <div class="modal-header">
          <h3 class="modal-title">
            ${this.currentStep==="crop"?"Adjust Image":"Success"}
          </h3>
          <button class="close-button" @click=${this.close} title="Close">
            <dees-icon icon="lucide:x" iconSize="16"></dees-icon>
          </button>
        </div>
        
        <div class="modal-body">
          ${this.currentStep==="crop"?w`
            <div class="instructions">
              Position and resize the square to select your profile area
            </div>
            <div class="cropper-container" id="cropperContainer"></div>
          `:w`
            <div class="preview-container">
              ${this.isProcessing?w`
                <div class="loading-spinner"></div>
                <div class="instructions">Saving...</div>
              `:w`
                <img 
                  class="preview-image ${this.shape}" 
                  src="${this.croppedImage}" 
                  alt="Cropped preview"
                />
                <div class="success-message">
                  <dees-icon icon="lucide:check" iconSize="16"></dees-icon>
                  <span>Looking good!</span>
                </div>
              `}
            </div>
          `}
        </div>
        
        <div class="modal-footer">
          ${this.currentStep==="crop"?w`
            <dees-button type="destructive" size="sm" @click=${this.close}>
              Cancel
            </dees-button>
            <dees-button type="default" size="sm" @click=${this.handleCrop}>
              Save
            </dees-button>
          `:""}
        </div>
      </div>
    `}async firstUpdated(){this.currentStep==="crop"&&await this.initializeCropper()}async initializeCropper(){await this.updateComplete;let C=this.shadowRoot.getElementById("cropperContainer");C&&(this.cropper=new Ew({container:C,image:this.initialImage,shape:this.shape,aspectRatio:1,outputSize:this.outputSize,outputQuality:this.outputQuality}),await this.cropper.initialize())}async handleCrop(){if(this.cropper)try{this.isProcessing=!0,this.currentStep="preview",await this.updateComplete;let C=await this.cropper.getCroppedImage();this.croppedImage=C,await new Promise(z=>setTimeout(z,800)),this.isProcessing=!1,this.dispatchEvent(new CustomEvent("save",{detail:{croppedImage:this.croppedImage},bubbles:!0,composed:!0})),setTimeout(()=>{this.close()},1500)}catch(C){console.error("Error cropping image:",C),this.isProcessing=!1}}close(){this.remove()}static{fa(i,a)}};return V=i})()});var Abt,Ebt=v(()=>{oe();x1();h2();rj();Abt=()=>w`
  <style>
    ${X`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      .demo-row {
        display: flex;
        gap: 48px;
        align-items: center;
        flex-wrap: wrap;
      }
      
      .demo-output {
        margin-top: 16px;
        padding: 12px;
        background: rgba(0, 105, 242, 0.1);
        border-radius: 4px;
        font-size: 14px;
        font-family: monospace;
        word-break: break-all;
        max-height: 100px;
        overflow-y: auto;
      }
      
      .feature-list {
        margin-top: 16px;
        padding-left: 20px;
      }
      
      .feature-list li {
        margin-bottom: 8px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector('dees-input-profilepicture[shape="round"]');e&&e.addEventListener("change",a=>{let i=a.target;console.log("Round profile picture changed:",i.value?.substring(0,50)+"...")})}}>
      <dees-panel .title=${"Profile Picture Input"} .subtitle=${"Basic usage with round and square shapes"}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Profile Picture (Round)"
            description="Click to upload or drag & drop an image"
            shape="round"
            size="120"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Profile Picture (Square)"
            description="Supports JPEG, PNG, and WebP formats"
            shape="square"
            size="120"
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{t.querySelectorAll("dees-input-profilepicture").forEach(a=>{a.addEventListener("change",i=>{let r=i.target;console.log(`Profile (size ${r.size}) changed`)})})}}>
      <dees-panel .title=${"Size Variations"} .subtitle=${"Profile pictures in different sizes"}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Small (80px)"
            shape="round"
            size="80"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Medium (120px)"
            shape="round"
            size="120"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Large (160px)"
            shape="round"
            size="160"
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjY3ZWVhIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NjRiYTIiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI4MCIgZmlsbD0id2hpdGUiPkpEPC90ZXh0Pgo8L3N2Zz4=",a=t.querySelector("#prefilled-profile");a&&(a.value=e,a.addEventListener("change",i=>{let r=i.target,n=t.querySelector("#prefilled-output");n&&(n.textContent=r.value?`Image data: ${r.value.substring(0,80)}...`:"No image selected")}))}}>
      <dees-panel .title=${"Pre-filled and Value Binding"} .subtitle=${"Profile picture with initial value and change tracking"}>
        <dees-input-profilepicture
          id="prefilled-profile"
          label="Edit Existing Profile"
          description="Click the edit button to change or delete to remove"
          shape="round"
          size="150"
        ></dees-input-profilepicture>
        
        <div id="prefilled-output" class="demo-output">
          Image data will appear here when changed
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("#disabled-profile");e&&(e.value="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2NjY2NjYyIgLz4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjYwIiBmaWxsPSJ3aGl0ZSI+TkE8L3RleHQ+Cjwvc3ZnPg==")}}>
      <dees-panel .title=${"Form States"} .subtitle=${"Different states and configurations"}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Required Field"
            description="This field is required"
            shape="round"
            .required=${!0}
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            id="disabled-profile"
            label="Disabled State"
            description="Cannot be edited"
            shape="square"
            .disabled=${!0}
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Upload Only"
            description="Delete not allowed"
            shape="round"
            .allowDelete=${!1}
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper>
      <dees-panel .title=${"Features"} .subtitle=${"Complete feature set of the profile picture input"}>
        <ul class="feature-list">
          <li><strong>Image Upload:</strong> Click to upload or drag & drop images</li>
          <li><strong>Image Cropping:</strong> Interactive crop tool with resize handles</li>
          <li><strong>Shape Support:</strong> Round or square profile pictures</li>
          <li><strong>Size Customization:</strong> Adjustable dimensions</li>
          <li><strong>Preview & Edit:</strong> Hover overlay with edit and delete options</li>
          <li><strong>File Validation:</strong> Format and size restrictions</li>
          <li><strong>Responsive Design:</strong> Works on desktop and mobile devices</li>
          <li><strong>Form Integration:</strong> Standard form value binding and validation</li>
          <li><strong>Accessibility:</strong> Keyboard navigation and screen reader support</li>
          <li><strong>Z-Index Management:</strong> Proper modal stacking with registry</li>
        </ul>
        
        <div style="margin-top: 24px;">
          <strong>Supported Formats:</strong> JPEG, PNG, WebP<br>
          <strong>Max File Size:</strong> 5MB (configurable)<br>
          <strong>Output Format:</strong> Base64 encoded JPEG
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`});var Ia,h1,Pbt,rj=v(()=>{oe();_1();At();V4();Dbt();Ebt();He();Ia=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},h1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Pbt=(()=>{let t=[Q("dees-input-profilepicture")],e,a=[],i,r=Ze,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[];var F=class extends r{static{i=this}static{let W=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:Number})],y=[D({type:String})],x=[D({type:Boolean})],N=[D({type:Boolean})],I=[D({type:Number})],V=[D({type:Array})],E=[D({type:Number})],H=[D({type:Number})],ne=[J()],we=[J()],Ce=[J()],Ia(this,null,n,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:B=>"value"in B,get:B=>B.value,set:(B,K)=>{B.value=K}},metadata:W},s,o),Ia(this,null,u,{kind:"accessor",name:"shape",static:!1,private:!1,access:{has:B=>"shape"in B,get:B=>B.shape,set:(B,K)=>{B.shape=K}},metadata:W},c,d),Ia(this,null,l,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:B=>"size"in B,get:B=>B.size,set:(B,K)=>{B.size=K}},metadata:W},f,b),Ia(this,null,y,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:B=>"placeholder"in B,get:B=>B.placeholder,set:(B,K)=>{B.placeholder=K}},metadata:W},g,h),Ia(this,null,x,{kind:"accessor",name:"allowUpload",static:!1,private:!1,access:{has:B=>"allowUpload"in B,get:B=>B.allowUpload,set:(B,K)=>{B.allowUpload=K}},metadata:W},M,S),Ia(this,null,N,{kind:"accessor",name:"allowDelete",static:!1,private:!1,access:{has:B=>"allowDelete"in B,get:B=>B.allowDelete,set:(B,K)=>{B.allowDelete=K}},metadata:W},_,k),Ia(this,null,I,{kind:"accessor",name:"maxFileSize",static:!1,private:!1,access:{has:B=>"maxFileSize"in B,get:B=>B.maxFileSize,set:(B,K)=>{B.maxFileSize=K}},metadata:W},L,A),Ia(this,null,V,{kind:"accessor",name:"acceptedFormats",static:!1,private:!1,access:{has:B=>"acceptedFormats"in B,get:B=>B.acceptedFormats,set:(B,K)=>{B.acceptedFormats=K}},metadata:W},C,z),Ia(this,null,E,{kind:"accessor",name:"outputSize",static:!1,private:!1,access:{has:B=>"outputSize"in B,get:B=>B.outputSize,set:(B,K)=>{B.outputSize=K}},metadata:W},T,$),Ia(this,null,H,{kind:"accessor",name:"outputQuality",static:!1,private:!1,access:{has:B=>"outputQuality"in B,get:B=>B.outputQuality,set:(B,K)=>{B.outputQuality=K}},metadata:W},O,G),Ia(this,null,ne,{kind:"accessor",name:"isHovered",static:!1,private:!1,access:{has:B=>"isHovered"in B,get:B=>B.isHovered,set:(B,K)=>{B.isHovered=K}},metadata:W},U,be),Ia(this,null,we,{kind:"accessor",name:"isDragging",static:!1,private:!1,access:{has:B=>"isDragging"in B,get:B=>B.isDragging,set:(B,K)=>{B.isDragging=K}},metadata:W},j,fe),Ia(this,null,Ce,{kind:"accessor",name:"isLoading",static:!1,private:!1,access:{has:B=>"isLoading"in B,get:B=>B.isLoading,set:(B,K)=>{B.isLoading=K}},metadata:W},Y,P),Ia(null,e={value:i},t,{kind:"class",name:i.name,metadata:W},null,a),F=i=e.value,W&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:W})}static demo=Abt;static demoGroups=["Input"];#e=h1(this,s,"");get value(){return
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        position: relative;
      }

      .input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .profile-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .profile-container:hover {
        transform: scale(1.02);
      }

      .profile-picture {
        width: var(--size, 120px);
        height: var(--size, 120px);
        background: ${p.bdTheme("#f5f5f5","#18181b")};
        border: 3px solid ${p.bdTheme("#e5e7eb","#27272a")};
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease;
      }

      .profile-picture.round {
        border-radius: 50%;
      }

      .profile-picture.square {
        border-radius: 12px;
      }

      .profile-picture.dragging {
        border-color: ${p.bdTheme("#3b82f6","#60a5fa")};
        box-shadow: 0 0 0 4px ${p.bdTheme("rgba(59, 130, 246, 0.15)","rgba(96, 165, 250, 0.15)")};
      }

      .profile-picture:hover {
        border-color: ${p.bdTheme("#d4d4d8","#3f3f46")};
      }

      .profile-picture:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      .profile-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .placeholder-icon {
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      .profile-container:hover .overlay {
        opacity: 1;
      }

      .overlay-content {
        display: flex;
        gap: 12px;
      }

      .overlay-button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: ${p.bdTheme("rgba(255, 255, 255, 0.95)","rgba(39, 39, 42, 0.95)")};
        border: 1px solid ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.1)")};
        color: ${p.bdTheme("#09090b","#fafafa")};
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        pointer-events: auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .overlay-button:hover {
        background: ${p.bdTheme("#ffffff","#3f3f46")};
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .overlay-button.delete {
        background: ${p.bdTheme("rgba(239, 68, 68, 0.9)","rgba(220, 38, 38, 0.9)")};
        color: white;
        border-color: transparent;
      }

      .overlay-button.delete:hover {
        background: ${p.bdTheme("#ef4444","#dc2626")};
      }

      .drop-zone-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        font-weight: 500;
        pointer-events: none;
      }

      .hidden-input {
        display: none;
      }

      /* Loading animation */
      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: ${p.bdTheme("rgba(255, 255, 255, 0.8)","rgba(0, 0, 0, 0.8)")};
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }

      .loading-overlay.show {
        opacity: 1;
        pointer-events: auto;
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.1)")};
        border-top-color: ${p.bdTheme("#3b82f6","#60a5fa")};
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.05);
          opacity: 0.8;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .profile-picture.clicking {
        animation: pulse 0.3s ease-out;
      }
    `];render(){return w`
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
        
        <div 
          class="profile-container"
          @click=${this.handleClick}
          @dragover=${this.handleDragOver}
          @dragleave=${this.handleDragLeave}
          @drop=${this.handleDrop}
          style="--size: ${this.size}px"
        >
          <div class="profile-picture ${this.shape} ${this.isDragging?"dragging":""} ${this.isLoading&&!this.value?"clicking":""}">
            ${this.value?w`
              <img class="profile-image" src="${this.value}" alt="Profile picture" />
            `:w`
              <dees-icon class="placeholder-icon" icon="lucide:user" iconSize="${this.size*.5}"></dees-icon>
            `}
            
            ${this.isDragging?w`
              <div class="overlay" style="opacity: 1">
                <div class="drop-zone-text">
                  Drop image here
                </div>
              </div>
            `:""}
            
            ${this.value&&!this.disabled?w`
              <div class="overlay">
                <div class="overlay-content">
                  ${this.allowUpload?w`
                    <button class="overlay-button" @click=${W=>{W.stopPropagation(),this.openModal()}} title="Change picture">
                      <dees-icon icon="lucide:pencil" iconSize="20"></dees-icon>
                    </button>
                  `:""}
                  ${this.allowDelete?w`
                    <button class="overlay-button delete" @click=${W=>{W.stopPropagation(),this.deletePicture()}} title="Delete picture">
                      <dees-icon icon="lucide:trash2" iconSize="20"></dees-icon>
                    </button>
                  `:""}
                </div>
              </div>
            `:""}
            
            ${this.isLoading&&!this.value?w`
              <div class="loading-overlay show">
                <div class="loading-spinner"></div>
              </div>
            `:""}
          </div>
        </div>
        
        <input
          type="file"
          class="hidden-input"
          accept="${this.acceptedFormats.join(",")}"
          @change=${this.handleFileSelect}
        />
      </div>
    `}handleClick(){if(!(this.disabled||!this.allowUpload)&&!this.value){this.isLoading=!0;let W=this.shadowRoot.querySelector(".hidden-input"),B=()=>{setTimeout(()=>{(!W.files||W.files.length===0)&&(this.isLoading=!1),window.removeEventListener("focus",B)},300)};window.addEventListener("focus",B),W.click()}}handleFileSelect(W){let B=W.target,K=B.files?.[0];this.isLoading=!1,K&&this.processFile(K),B.value=""}handleDragOver(W){W.preventDefault(),!this.disabled&&this.allowUpload&&(this.isDragging=!0)}handleDragLeave(){this.isDragging=!1}handleDrop(W){if(W.preventDefault(),this.isDragging=!1,this.disabled||!this.allowUpload)return;let B=W.dataTransfer?.files[0];B&&this.processFile(B)}async processFile(W){if(!this.acceptedFormats.includes(W.type)){console.error("Invalid file type:",W.type);return}if(W.size>this.maxFileSize){console.error("File too large:",W.size);return}let B=new FileReader;B.onload=async K=>{let ge=K.target?.result;await this.openModal(ge)},B.readAsDataURL(W)}async openModal(W){let B=W||this.value;if(!B){this.shadowRoot.querySelector(".hidden-input").click();return}this.modalInstance=new ij,this.modalInstance.shape=this.shape,this.modalInstance.initialImage=B,this.modalInstance.outputSize=this.outputSize,this.modalInstance.outputQuality=this.outputQuality,this.modalInstance.addEventListener("save",K=>{this.value=K.detail.croppedImage,this.changeSubject.next(this)}),document.body.appendChild(this.modalInstance)}deletePicture(){this.value="",this.changeSubject.next(this)}getValue(){return this.value}setValue(W){this.value=W}static{h1(i,a)}};return F=i})()});var Ibt=v(()=>{_gt();Tgt();Lgt();oV();$gt();uV();Dgt();Ngt();Rgt();Fgt();Ogt();Bgt();Ygt();Xgt();abt();ibt();rbt();sbt();Lbt();rj()});var Nbt,Rbt=v(()=>{oe();Nbt=()=>w`
  <style>
    .demoContainer {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      min-height: 100vh;
    }
    
    .section {
      background: ${p.bdTheme("#ffffff","#18181b")};
      border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }
    
    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }
  </style>
  <div class="demoContainer">
    <div class="section">
      <div class="section-title">Non-Selectable Chips</div>
      <div class="section-description">Basic chips without selection capability. Use for display-only tags.</div>
      <dees-chips
        selectionMode="none"
        .selectableChips=${[{key:"status",value:"Active"},{key:"tier",value:"Premium"},{key:"region",value:"EU-West"},{key:"type",value:"Enterprise"}]}
      ></dees-chips>
    </div>
    
    <div class="section">
      <div class="section-title">Single Selection Chips</div>
      <div class="section-description">Click to select one chip at a time. Useful for filters and options.</div>
      <dees-chips
        selectionMode="single"
        .selectableChips=${[{key:"all",value:"All Projects"},{key:"active",value:"Active"},{key:"archived",value:"Archived"},{key:"drafts",value:"Drafts"}]}
      ></dees-chips>
    </div>
    
    <div class="section">
      <div class="section-title">Multiple Selection Chips</div>
      <div class="section-description">Select multiple chips simultaneously. Great for tag selection.</div>
      <dees-chips
        selectionMode="multiple"
        .selectableChips=${[{key:"js",value:"JavaScript"},{key:"ts",value:"TypeScript"},{key:"react",value:"React"},{key:"vue",value:"Vue"},{key:"angular",value:"Angular"},{key:"node",value:"Node.js"}]}
      ></dees-chips>
    </div>
    
    <div class="section">
      <div class="section-title">Removable Chips with Keys</div>
      <div class="section-description">Chips with remove buttons and key-value pairs. Perfect for dynamic lists.</div>
      <dees-chips
        selectionMode="single"
        chipsAreRemovable
        .selectableChips=${[{key:"env",value:"Production"},{key:"version",value:"2.4.1"},{key:"branch",value:"main"},{key:"author",value:"John Doe"}]}
      ></dees-chips>
    </div>
    
    <div class="section">
      <div class="section-title">Mixed Content Example</div>
      <div class="section-description">Combining different chip types for complex UIs.</div>
      <dees-chips
        selectionMode="multiple"
        chipsAreRemovable
        .selectableChips=${[{key:"priority",value:"High"},{key:"status",value:"In Progress"},{key:"bug",value:"Bug"},{key:"feature",value:"Feature"},{key:"sprint",value:"Sprint 23"},{key:"assignee",value:"Alice"}]}
      ></dees-chips>
    </div>
  </div>
`});var Q4,ir,Fbt,Obt=v(()=>{oe();_t();Rbt();He();Q4=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ir=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Fbt=(()=>{let t=[Q("dees-chips")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D({type:Boolean})],l=[D({type:Array})],y=[D()],x=[D({type:Array})],Q4(this,null,n,{kind:"accessor",name:"selectionMode",static:!1,private:!1,access:{has:k=>"selectionMode"in k,get:k=>k.selectionMode,set:(k,I)=>{k.selectionMode=I}},metadata:_},s,o),Q4(this,null,u,{kind:"accessor",name:"chipsAreRemovable",static:!1,private:!1,access:{has:k=>"chipsAreRemovable"in k,get:k=>k.chipsAreRemovable,set:(k,I)=>{k.chipsAreRemovable=I}},metadata:_},c,d),Q4(this,null,l,{kind:"accessor",name:"selectableChips",static:!1,private:!1,access:{has:k=>"selectableChips"in k,get:k=>k.selectableChips,set:(k,I)=>{k.selectableChips=I}},metadata:_},f,b),Q4(this,null,y,{kind:"accessor",name:"selectedChip",static:!1,private:!1,access:{has:k=>"selectedChip"in k,get:k=>k.selectedChip,set:(k,I)=>{k.selectedChip=I}},metadata:_},g,h),Q4(this,null,x,{kind:"accessor",name:"selectedChips",static:!1,private:!1,access:{has:k=>"selectedChips"in k,get:k=>k.selectedChips,set:(k,I)=>{k.selectedChips=I}},metadata:_},M,S),Q4(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=Nbt;static demoGroups=["Layout"];#e=ir(this,s,"single");get selectionMode(){return this.#e}set selectionMode(_){this.#e=_}#t=(ir(this,o),ir(this,c,!1));get chipsAreRemovable(){return this.#t}set chipsAreRemovable(_){this.#t=_}#a=(ir(this,d),ir(this,f,[]));get selectableChips(){return this.#a}set selectableChips(_){this.#a=_}#i=(ir(this,b),ir(this,g,null));get selectedChip(){return this.#i}set selectedChip(_){this.#i=_}#r=(ir(this,h),ir(this,M,[]));get selectedChips(){return this.#r}set selectedChips(_){this.#r=_}constructor(){super(),ir(this,S)}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        box-sizing: border-box;
      }

      .mainbox {
        user-select: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .chip {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#3f3f46")};
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0px 12px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#09090b","#fafafa")};
        border-radius: 6px;
        position: relative;
        cursor: pointer;
        transition: all 0.15s ease;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      }

      .chip:hover {
        background: ${p.bdTheme("#e5e7eb","#3f3f46")};
        border-color: ${p.bdTheme("#d1d5db","#52525b")};
      }

      .chip:active {
        transform: scale(0.98);
      }

      .chip.selected {
        background: ${p.bdTheme("#3b82f6","#3b82f6")};
        border-color: ${p.bdTheme("#3b82f6","#3b82f6")};
        color: #ffffff;
      }

      .chip.selected:hover {
        background: ${p.bdTheme("#2563eb","#2563eb")};
        border-color: ${p.bdTheme("#2563eb","#2563eb")};
      }

      .chipKey {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.06)","rgba(255, 255, 255, 0.1)")};
        height: 20px;
        line-height: 20px;
        display: inline-flex;
        align-items: center;
        margin-left: -8px;
        padding: 0px 8px;
        margin-right: 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .chip.selected .chipKey {
        background: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
      }

      dees-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        margin-right: -6px;
        border-radius: 3px;
        transition: all 0.15s ease;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .chip.selected dees-icon {
        color: rgba(255, 255, 255, 0.8);
      }

      dees-icon:hover {
        background: ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0.1)")};
        color: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .chip.selected dees-icon:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
      }
    `];render(){return w`
      <div class="mainbox">
        ${this.selectableChips.map(_=>w`
            <div
              @click=${()=>this.selectChip(_)}
              class="chip ${this.isSelected(_)?"selected":""}"
            >
              ${_.key?w`<div class="chipKey">${_.key}</div>`:w``} ${_.value}
              ${this.chipsAreRemovable?w`
                    <dees-icon
                      @click=${k=>{k.stopPropagation(),this.removeChip(_)}}
                      .icon=${"fa:xmark"}
                    ></dees-icon>
                  `:w``}
            </div>
          `)}
      </div>
    `}async firstUpdated(){}isSelected(_){return this.selectionMode==="single"?this.selectedChip?this.isSameChip(this.selectedChip,_):!1:this.selectedChips.some(k=>this.isSameChip(k,_))}isSameChip(_,k){return(_.key&&k.key||_.value===k.value)&&_.key===k.key}async selectChip(_){this.selectionMode!=="none"&&(this.selectionMode==="single"?this.isSelected(_)?(this.selectedChip=null,this.selectedChips=[]):(this.selectedChip=_,this.selectedChips=[_]):this.selectionMode==="multiple"&&(this.isSelected(_)?this.selectedChips=this.selectedChips.filter(k=>!this.isSameChip(k,_)):this.selectedChips=[...this.selectedChips,_],this.requestUpdate()),console.log(this.selectedChips))}removeChip(_){this.selectableChips=this.selectableChips.filter(k=>!this.isSameChip(k,_)),this.selectedChips=this.selectedChips.filter(k=>!this.isSameChip(k,_)),this.selectedChip&&this.isSameChip(this.selectedChip,_)&&(this.selectedChip=null),this.requestUpdate()}static{ir(i,a)}};return N=i})()});var Bbt=v(()=>{Obt()});var Hbt,qbt=v(()=>{oe();x1();Hbt=()=>w`
    <dees-demowrapper .runAfterRender=${async t=>{let e=t.querySelector("#dashboardGrid"),a=[{id:"metrics1",x:0,y:0,w:3,h:2,title:"Revenue",icon:"lucide:dollarSign",content:w`
            <div style="padding: 20px;">
              <div style="font-size: 32px; font-weight: 700; color: ${p.bdTheme("#09090b","#fafafa")};">$124,563</div>
              <div style="color: #22c55e; font-size: 14px; margin-top: 8px;">↑ 12.5% from last month</div>
            </div>
          `},{id:"metrics2",x:3,y:0,w:3,h:2,title:"Users",icon:"lucide:users",content:w`
            <div style="padding: 20px;">
              <div style="font-size: 32px; font-weight: 700; color: ${p.bdTheme("#09090b","#fafafa")};">8,234</div>
              <div style="color: #3b82f6; font-size: 14px; margin-top: 8px;">↑ 5.2% from last week</div>
            </div>
          `},{id:"chart1",x:6,y:0,w:6,h:4,title:"Analytics",icon:"lucide:lineChart",content:w`
            <div style="padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center;">
              <div style="text-align: center; color: #71717a;">
                <dees-icon .icon=${"lucide:lineChart"} style="font-size: 48px; margin-bottom: 16px;"></dees-icon>
                <div>Chart visualization area</div>
              </div>
            </div>
          `}];e.widgets=a.map(x=>({...x})),e.cellHeight=80,e.margin={top:10,right:10,bottom:10,left:10},e.enableAnimation=!0,e.showGridLines=!1;let i=e.getLayout().map(x=>({...x})),r=e.widgets.map((x,M)=>({id:x.id,x:0,y:M===0?0:e.widgets.slice(0,M).reduce((S,N)=>S+N.h,0),w:e.columns,h:x.h}));e.layouts={base:i,mobile:r};let n=t.querySelector("#dashboardLayoutStatus"),s=()=>{let x=e.getLayout();n.textContent=`Active breakpoint: ${e.activeBreakpoint} \u2022 Tiles: ${x.length}`},o=window.matchMedia("(max-width: 768px)"),u=()=>{let x=o.matches?"mobile":"base";e.applyBreakpointLayout(x),s()};typeof o.addEventListener=="function"?o.addEventListener("change",u):o.addListener?.(u),u();let c=4;t.querySelectorAll("dees-button").forEach(x=>{switch(x.textContent?.trim()){case"Toggle Animation":x.addEventListener("click",()=>{e.enableAnimation=!e.enableAnimation});break;case"Toggle Grid Lines":x.addEventListener("click",()=>{e.showGridLines=!e.showGridLines});break;case"Add Widget":x.addEventListener("click",()=>{let S={id:`widget${c++}`,x:0,y:0,w:3,h:2,autoPosition:!0,title:`Widget ${c-1}`,icon:"lucide:package",content:w`
                  <div style="padding: 20px; text-align: center;">
                    <div style="color: #71717a;">New widget content</div>
                    <div style="margin-top: 8px; font-size: 24px; font-weight: 600; color: ${p.bdTheme("#09090b","#fafafa")};">${Math.floor(Math.random()*1e3)}</div>
                  </div>
                `};e.addWidget(S,!0)});break;case"Compact Grid":x.addEventListener("click",()=>{e.compact()});break;case"Toggle Edit Mode":x.addEventListener("click",()=>{e.editable=!e.editable,x.textContent=e.editable?"Lock Grid":"Unlock Grid"});break;case"Reset Layout":x.addEventListener("click",()=>{e.applyBreakpointLayout(e.activeBreakpoint)});break;default:break}});let l=null,f=0,b=(x,M)=>{let S=e.getLayout();console.group(`\u{1F504} ${x} [Event #${++f}]`),console.log("Timestamp:",new Date().toISOString()),console.log("Grid Configuration:",{columns:e.columns,cellHeight:e.cellHeight,margin:e.margin,editable:e.editable,activeBreakpoint:e.activeBreakpoint}),console.log("Current Layout:",S),console.log("Widget Count:",S.length),console.log("Grid Bounds:",{totalWidgets:e.widgets.length,maxY:Math.max(...S.map(N=>N.y+N.h)),occupied:S.map(N=>`${N.id}: (${N.x},${N.y}) ${N.w}x${N.h}`).join(", ")}),M&&console.log("Event Details:",M),console.groupEnd()},y=new MutationObserver(()=>{let x=e.shadowRoot?.querySelector(".placeholder");if(x){let M={left:x.style.left,top:x.style.top,width:x.style.width,height:x.style.height};if(JSON.stringify(M)!==JSON.stringify(l)){console.group("\u{1F4CD} Placeholder Position Changed"),console.log("Previous:",l),console.log("Current:",M);let S=e.shadowRoot?.querySelector(".grid-container");S&&console.log("Grid Container Dimensions:",{width:S.clientWidth,height:S.clientHeight}),console.groupEnd(),l=M}}});e.shadowRoot&&y.observe(e.shadowRoot,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),b("Initial Grid State"),e.addEventListener("widget-move",x=>{b("Widget Move",{widget:x.detail.widget,displaced:x.detail.displaced,swappedWith:x.detail.swappedWith})}),e.addEventListener("widget-resize",x=>{b("Widget Resize",{widget:x.detail.widget,displaced:x.detail.displaced,swappedWith:x.detail.swappedWith})}),e.addEventListener("widget-remove",x=>{b("Widget Remove",{removedWidget:x.detail.widget}),s()}),e.addEventListener("layout-change",()=>{b("Layout Change"),s()}),e.addEventListener("pointerdown",x=>{let M=x.target.closest(".widget-header"),S=x.target.closest(".resize-handle");if(M||S){console.group(`\u{1F3AF} Interaction Started: ${M?"Drag":"Resize"}`),console.log("Target Widget:",x.target.closest(".widget")?.getAttribute("data-widget-id")),console.log("Pointer Position:",{x:x.clientX,y:x.clientY}),console.groupEnd();let N=k=>{let I=x.target.closest(".widget");I&&console.log("\u2194\uFE0F Pointer Move:",{widgetId:I.getAttribute("data-widget-id"),position:{x:k.clientX,y:k.clientY},delta:{x:k.clientX-x.clientX,y:k.clientY-x.clientY}})},_=()=>{console.group("\u{1F3C1} Interaction Ended"),b("Final State After Interaction"),console.groupEnd(),document.removeEventListener("pointermove",N),document.removeEventListener("pointerup",_)};document.addEventListener("pointermove",N),document.addEventListener("pointerup",_)}});let g=e.addWidget.bind(e);e.addWidget=(x,M)=>{console.group("\u2795 Adding Widget"),console.log("New Widget:",x),console.log("Auto Position:",M);let S=g(x,M);return b("After Widget Added"),console.groupEnd(),S};let h=e.compact.bind(e);e.compact=x=>{console.group("\u{1F5DC}\uFE0F Compacting Grid"),console.log("Direction:",x||"vertical"),b("Before Compact");let M=h(x);return b("After Compact"),console.groupEnd(),M},s()}}>
      <style>
        ${X`
          .demoBox {
            position: relative;
            background: ${p.bdTheme("#f4f4f5","#09090b")};
            height: 100%;
            width: 100%;
            padding: 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }

          .demo-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }

          .demo-controls dees-button {
            flex-shrink: 0;
          }

          .grid-container-wrapper {
            flex: 1;
            min-height: 600px;
            position: relative;
          }

          .info {
            color: ${p.bdTheme("#71717a","#71717a")};
            font-size: 12px;
            font-family: 'Geist Sans', sans-serif;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
          }

          #dashboardLayoutStatus {
            font-weight: 600;
            color: ${p.bdTheme("#3b82f6","#60a5fa")};
          }
        `}
      </style>
      <div class="demoBox">
        <div class="demo-controls">
          <dees-button-group label="Animation:">
            <dees-button>Toggle Animation</dees-button>
          </dees-button-group>

          <dees-button-group label="Display:">
            <dees-button>Toggle Grid Lines</dees-button>
          </dees-button-group>

          <dees-button-group label="Actions:">
            <dees-button>Add Widget</dees-button>
            <dees-button>Compact Grid</dees-button>
            <dees-button>Reset Layout</dees-button>
          </dees-button-group>

          <dees-button-group label="Mode:">
            <dees-button>Toggle Edit Mode</dees-button>
          </dees-button-group>
        </div>

        <div class="grid-container-wrapper">
          <dees-dashboardgrid id="dashboardGrid"></dees-dashboardgrid>
        </div>

        <div class="info">
          <div>Drag to reposition, resize from handles, or right-click a header to delete a tile.</div>
          <div id="dashboardLayoutStatus"></div>
        </div>
      </div>
    </dees-demowrapper>
  `});var Vbt,jbt=v(()=>{oe();Vbt=[p.defaultStyles,X`
      :host {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
      }

      .grid-container {
        position: relative;
        width: 100%;
        min-height: 400px;
        box-sizing: border-box;
      }

      .grid-widget {
        position: absolute;
        will-change: auto;
      }
      
      :host([enableanimation]) .grid-widget {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .grid-widget.dragging {
        z-index: 1000;
        transition: none !important;
        opacity: 0.8;
        cursor: grabbing;
        pointer-events: none;
        will-change: transform;
      }
      
      .grid-widget.placeholder {
        pointer-events: none;
        z-index: 1;
      }
      
      .grid-widget.placeholder .widget-content {
        background: ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(59, 130, 246, 0.1)")};
        border: 2px dashed ${p.bdTheme("#3b82f6","#3b82f6")};
        box-shadow: none;
      }

      .grid-widget.resizing {
        transition: none !important;
      }

      .widget-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        border-radius: 8px;
        box-shadow: ${p.bdTheme("0 1px 3px rgba(0, 0, 0, 0.1)","0 1px 3px rgba(0, 0, 0, 0.3)")};
        transition: box-shadow 0.2s ease;
      }

      .grid-widget:hover .widget-content {
        box-shadow: ${p.bdTheme("0 4px 12px rgba(0, 0, 0, 0.15)","0 4px 12px rgba(0, 0, 0, 0.4)")};
      }

      .grid-widget.dragging .widget-content {
        box-shadow: ${p.bdTheme("0 16px 48px rgba(0, 0, 0, 0.25)","0 16px 48px rgba(0, 0, 0, 0.6)")};
        transform: scale(1.05);
      }

      .widget-header {
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#09090b","#fafafa")};
        background: ${p.bdTheme("#f9fafb","#0a0a0a")};
        cursor: grab;
        user-select: none;
      }
      
      .widget-header:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }
      
      .widget-header:active {
        cursor: grabbing;
      }

      .widget-header.locked {
        cursor: default;
      }
      
      .widget-header.locked:hover {
        background: ${p.bdTheme("#f9fafb","#0a0a0a")};
      }

      .widget-header dees-icon {
        font-size: 16px;
        color: ${p.bdTheme("#71717a","#71717a")};
      }

      .widget-body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        color: ${p.bdTheme("#09090b","#fafafa")};
      }

      .widget-body.has-header {
        top: 45px;
      }

      .resize-handle {
        position: absolute;
        background: transparent;
        z-index: 10;
      }

      .resize-handle:hover {
        background: ${p.bdTheme("#3b82f6","#3b82f6")};
        opacity: 0.3;
      }

      .resize-handle-e {
        cursor: ew-resize;
        width: 12px;
        right: -6px;
        top: 10%;
        height: 80%;
      }

      .resize-handle-s {
        cursor: ns-resize;
        height: 12px;
        width: 80%;
        bottom: -6px;
        left: 10%;
      }

      .resize-handle-se {
        cursor: se-resize;
        width: 20px;
        height: 20px;
        right: -2px;
        bottom: -2px;
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      
      .resize-handle-se::after {
        content: '';
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 6px;
        height: 6px;
        border-right: 2px solid ${p.bdTheme("#71717a","#71717a")};
        border-bottom: 2px solid ${p.bdTheme("#71717a","#71717a")};
      }

      .grid-widget:hover .resize-handle-se {
        opacity: 0.7;
      }

      .resize-handle-se:hover {
        opacity: 1 !important;
      }
      
      .resize-handle-se:hover::after {
        border-color: ${p.bdTheme("#3b82f6","#3b82f6")};
      }

      .grid-placeholder {
        position: absolute;
        background: ${p.bdTheme("#3b82f6","#3b82f6")};
        opacity: 0.1;
        border-radius: 8px;
        border: 2px dashed ${p.bdTheme("#3b82f6","#3b82f6")};
        transition: all 0.2s ease;
        pointer-events: none;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 400px;
        color: ${p.bdTheme("#71717a","#71717a")};
        text-align: center;
        padding: 32px;
      }

      .empty-state dees-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }
      
      .grid-lines {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: -1;
      }
      
      .grid-line-vertical {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: ${p.bdTheme("#e5e7eb","#27272a")};
        opacity: 0.3;
      }
      
      .grid-line-horizontal {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: ${p.bdTheme("#e5e7eb","#27272a")};
        opacity: 0.3;
      }
  `]});var I62,sj,Gbt,Ybt,Ubt,p8,Wbt,LWt,$Wt,nj,_o,Zbt,Xbt,Kbt=v(()=>{I62=10,sj=t=>{if(typeof t=="number")return{horizontal:t,vertical:t,top:t,right:t,bottom:t,left:t};let e={top:t.top??10,right:t.right??10,bottom:t.bottom??10,left:t.left??10};return{...e,horizontal:(e.left+e.right)/2,vertical:(e.top+e.bottom)/2}},Gbt=(t,e,a,i,r)=>{let n=a.horizontal*(e+1),s=Math.max(t-n,0),o=e>0?s/e:0,u=r==="auto"?o:i;return{containerWidth:t,cellWidthPx:o,marginHorizontalPx:a.horizontal,cellHeightPx:u,marginVerticalPx:a.vertical}},Ybt=(t,e,a)=>{if(t.length===0)return 0;let i=Math.max(...t.map(r=>r.y+r.h),0);return i*a+(i+1)*e.vertical},Ubt=(t,e,a,i,r)=>e<t.x+t.w&&e+i>t.x&&a<t.y+t.h&&a+r>t.y,p8=(t,e,a,i,r=e.w,n=e.h)=>t.filter(s=>s.id===e.id?!1:Ubt(s,a,i,r,n)),Wbt=(t,e,a,i)=>p8(t,e,a,i).length>0,LWt=t=>({...t}),$Wt=t=>t.map(LWt),nj=(t,e,a,i)=>{for(let n=0;n<200;n++)for(let s=0;s<=i-e;s++)if(!t.some(u=>Ubt(u,s,n,e,a)))return{x:s,y:n};return{x:0,y:t.reduce((n,s)=>Math.max(n,s.y+s.h),0)}},_o=(t,e,a,i,r)=>{let n=$Wt(t),s=n.find(f=>f.id===e),o=t.find(f=>f.id===e);if(!s||!o)return null;let u={x:a.x,y:a.y,w:a.w??s.w,h:a.h??s.h};s.x=u.x,s.y=u.y,s.w=u.w,s.h=u.h;let c=p8(n,s,u.x,u.y,u.w,u.h);if(c.length===0)return{widgets:n,movedWidgets:[s.id]};if(c.length===1){let f=c[0];if(!f.locked&&!f.noMove&&f.w===s.w&&f.h===s.h){let b=n.find(y=>y.id===f.id);if(b){let y=o,g={x:b.x,y:b.y};if(b.x=y.x,b.y=y.y,p8(n,s,s.x,s.y,s.w,s.h).length===0&&p8(n,b,b.x,b.y,b.w,b.h).length===0)return{widgets:n,movedWidgets:[s.id,b.id],swappedWith:b.id};b.x=g.x,b.y=g.y}}}let d=new Set([s.id]);for(let f of c){if(f.locked||f.noMove)return null;let b=n.find(h=>h.id===f.id);if(!b)continue;let y=n.filter(h=>h.id!==f.id),g=nj(y,b.w,b.h,i);b.x=g.x,b.y=g.y,d.add(b.id)}return p8(n,s,s.x,s.y,s.w,s.h).length>0?null:{widgets:n,movedWidgets:Array.from(d)}},Zbt=(t,e="vertical")=>{let a=[...t].sort((i,r)=>e==="vertical"?i.y!==r.y?i.y-r.y:i.x-r.x:i.x!==r.x?i.x-r.x:i.y-r.y);for(let i of a)if(!(i.locked||i.noMove))if(e==="vertical")for(;i.y>0&&!Wbt(t,i,i.x,i.y-1);)i.y-=1;else for(;i.x>0&&!Wbt(t,i,i.x-1,i.y);)i.x-=1},Xbt=(t,e)=>t.map(a=>{let i=e.find(r=>r.id===a.id);return i?{...a,...i}:a})});var Qbt,Jbt,evt=v(()=>{Qbt=({pointer:t,containerRect:e,metrics:a,columns:i,widget:r,rtl:n,dragOffsetX:s=0,dragOffsetY:o=0})=>{let u=t.clientX-e.left-s,c=t.clientY-e.top-o,d=a.marginHorizontalPx,l=a.marginVerticalPx,f=a.cellWidthPx,b=a.cellHeightPx,y=(_,k,I)=>Math.max(k,Math.min(I,_)),g=y(u-d,0,e.width-d),h=y(c-l,0,Number.POSITIVE_INFINITY),x=f+d,M=b+l,S=Math.round(g/x);n&&(S=i-r.w-S),S=y(S,0,i-r.w);let N=y(Math.round(h/M),0,Number.MAX_SAFE_INTEGER);return{x:S,y:N}},Jbt=({pointer:t,containerRect:e,metrics:a,startWidth:i,startHeight:r,startPointer:n,handler:s,widget:o,columns:u})=>{let c=t.clientX-n.clientX,d=t.clientY-n.clientY,l=i,f=r,b=a.cellWidthPx+a.marginHorizontalPx,y=a.cellHeightPx+a.marginVerticalPx;if(s.includes("e")){let x=Math.round(c/b);l=i+x}if(s.includes("s")){let x=Math.round(d/y);f=r+x}let g=Math.max(o.minW||1,Math.min(l,o.maxW||u-o.x)),h=Math.max(o.minH||1,Math.min(f,o.maxH||Number.MAX_SAFE_INTEGER));return{width:g,height:h}}});var tvt,avt=v(()=>{r2();i2();tvt=({widget:t,host:e,event:a})=>{let i=[{name:"Delete tile",iconName:"lucide:trash2",action:async()=>(e.removeWidget(t.id),null)}];jt.openContextMenuWithOptions(a,i)}});var K2,Wt,ivt,rvt=v(()=>{oe();At();r2();qbt();jbt();Kbt();evt();avt();K2=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=
        <div class="empty-state">
          <dees-icon .icon=${"lucide:layoutGrid"}></dees-icon>
          <div>No widgets configured</div>
          <div style="font-size: 14px; margin-top: 8px;">Add widgets to populate the dashboard</div>
        </div>
      `;let R=this.ensureMetrics(),te=this.resolvedMargins??sj(this.margin),me=R.cellHeightPx,ue=this.previewWidgets??this.widgets,_e=Ybt(ue,te,me),he=this.previewWidgets?new Map(this.previewWidgets.map(ie=>[ie.id,ie])):null;return w`
      <div class="grid-container" style="height: ${_e}px;">
        ${this.showGridLines?this.renderGridLines(R,_e):null}
        ${q.map(ie=>this.renderWidget(ie,R,te,he))}
        ${this.placeholderPosition?this.renderPlaceholder(R,te):null}
      </div>
    `}renderGridLines(q,R){let te=[],me=[],ue=q.cellWidthPx+q.marginHorizontalPx,_e=q.cellHeightPx+q.marginVerticalPx;for(let ie=0;ie<=this.columns;ie++){let ke=ie*ue+q.marginHorizontalPx,Re=this.pxToPercent(ke,q.containerWidth);te.push(w`<div class="grid-line-vertical" style="left: ${Re}%;"></div>`)}let he=Math.ceil(R/_e);for(let ie=0;ie<=he;ie++){let ke=ie*_e;me.push(w`<div class="grid-line-horizontal" style="top: ${ke}px;"></div>`)}return w`
      <div class="grid-lines">
        ${te}
        ${me}
      </div>
    `}renderWidget(q,R,te,me){let ue=this.dragState?.widgetId===q.id,_e=this.resizeState?.widgetId===q.id,he=q.locked||!this.editable,ie=me?.get(q.id)??null,ke=ue?q:ie??q,Re=this.computeWidgetRect(ke,R,te),Ue=this.rtl?"right":"left",xe=this.pxToPercent(Re.left,R.containerWidth),ae=this.pxToPercent(Re.width,R.containerWidth),re="";if(ue&&this.dragState?.currentPointer){let ye=this.dragState.currentPointer,Pe=this.containerBounds??this.getBoundingClientRect(),qe=ye.clientX-Pe.left-this.dragState.offsetX-Re.left,xt=ye.clientY-Pe.top-this.dragState.offsetY-Re.top;re=`transform: translate(${qe}px, ${xt}px);`}return w`
      <div
        class="grid-widget ${ue?"dragging":""} ${_e?"resizing":""}"
        style="
          ${Ue}: ${xe}%;
          top: ${Re.top}px;
          width: ${ae}%;
          height: ${Re.height}px;
          ${re}
        "
        data-widget-id=${q.id}
      >
        <div class="widget-content">
          ${q.title?w`
                <div
                  class="widget-header ${he?"locked":""}"
                  @pointerdown=${!he&&!q.noMove?ye=>this.startDrag(ye,q):null}
                  @contextmenu=${ye=>this.handleWidgetContextMenu(ye,q)}
                  tabindex=${!he&&!q.noMove?0:-1}
                  @keydown=${ye=>this.handleHeaderKeydown(ye,q)}
                >
                  ${q.icon?w`<dees-icon .icon=${q.icon}></dees-icon>`:null}
                  ${q.title}
                </div>
              `:null}
          <div class="widget-body ${q.title?"has-header":""}">
            ${q.content}
          </div>
          ${!he&&!q.noResize?w`
                <div
                  class="resize-handle resize-handle-e"
                  @pointerdown=${ye=>this.startResize(ye,q,"e")}
                ></div>
                <div
                  class="resize-handle resize-handle-s"
                  @pointerdown=${ye=>this.startResize(ye,q,"s")}
                ></div>
                <div
                  class="resize-handle resize-handle-se"
                  @pointerdown=${ye=>this.startResize(ye,q,"se")}
                ></div>
              `:null}
        </div>
      </div>
    `}renderPlaceholder(q,R){if(!this.placeholderPosition)return w``;let te=this.computeWidgetRect(this.placeholderPosition,q,R),me=this.rtl?"right":"left",ue=this.pxToPercent(te.left,q.containerWidth),_e=this.pxToPercent(te.width,q.containerWidth);return w`
      <div
        class="grid-widget placeholder"
        style="
          ${me}: ${ue}%;
          top: ${te.top}px;
          width: ${_e}%;
          height: ${te.height}px;
        "
      >
        <div class="widget-content"></div>
      </div>
    `}startDrag(q,R){if(!this.editable||R.noMove||R.locked)return;q.preventDefault(),q.stopPropagation();let te=q.currentTarget.closest(".grid-widget");if(!te)return;let me=te.getBoundingClientRect();this.containerBounds=this.getBoundingClientRect(),this.ensureMetrics(),this.dragState={widgetId:R.id,pointerId:q.pointerId,offsetX:q.clientX-me.left,offsetY:q.clientY-me.top,start:{id:R.id,x:R.x,y:R.y,w:R.w,h:R.h},previousPosition:{id:R.id,x:R.x,y:R.y,w:R.w,h:R.h},currentPointer:{clientX:q.clientX,clientY:q.clientY},lastPlacement:null},this.interactionActive=!0,q.currentTarget.setPointerCapture(q.pointerId),document.addEventListener("pointermove",this.handleDragMove),document.addEventListener("pointerup",this.handleDragEnd),this.placeholderPosition={id:R.id,x:R.x,y:R.y,w:R.w,h:R.h}}handleDragMove=q=>{if(!this.dragState)return;let R=this.ensureMetrics(),te=this.widgets,me=te.find(ie=>ie.id===this.dragState.widgetId);if(!me)return;q.preventDefault();let ue=this.dragState.previousPosition,_e=Qbt({pointer:{clientX:q.clientX,clientY:q.clientY},containerRect:this.containerBounds??this.getBoundingClientRect(),metrics:R,columns:this.columns,widget:me,rtl:this.rtl,dragOffsetX:this.dragState.offsetX,dragOffsetY:this.dragState.offsetY}),he=_o(te,me.id,{x:_e.x,y:_e.y},this.columns,ue);if(he){let ie=he.widgets.find(Re=>Re.id===me.id);this.dragState={...this.dragState,currentPointer:{clientX:q.clientX,clientY:q.clientY},lastPlacement:he,previousPosition:ie?{id:ie.id,x:ie.x,y:ie.y,w:ie.w,h:ie.h}:{id:me.id,x:_e.x,y:_e.y,w:me.w,h:me.h}},this.previewWidgets=he.widgets;let ke=he.widgets.find(Re=>Re.id===me.id);ke?this.placeholderPosition={id:ke.id,x:ke.x,y:ke.y,w:ke.w,h:ke.h}:this.placeholderPosition={id:me.id,x:_e.x,y:_e.y,w:me.w,h:me.h}}else this.previewWidgets=null,this.placeholderPosition=null;this.requestUpdate()};handleDragEnd=q=>{let R=this.dragState;if(!R||q.pointerId!==R.pointerId)return;let te=this.widgets;this.previewWidgets=null;let me=this.placeholderPosition??R.start,ue=_o(te,R.widgetId,{x:me.x,y:me.y},this.columns,R.previousPosition);if(ue){let _e=ue.widgets.find(he=>he.id===R.widgetId);_e&&(ue.widgets.some(ie=>ie.id===R.widgetId?!1:_e.x<ie.x+ie.w&&_e.x+_e.w>ie.x&&_e.y<ie.y+ie.h&&_e.y+_e.h>ie.y)?this.widgets=this.widgets.map(ie=>ie.id===R.widgetId?{...ie,x:R.start.x,y:R.start.y}:ie):this.commitPlacement(ue,R.widgetId,"widget-move"))}else this.widgets=this.widgets.map(_e=>_e.id===R.widgetId?{..._e,x:R.start.x,y:R.start.y}:_e);this.placeholderPosition=null,this.dragState=null,this.interactionActive=!1,this.releasePointerEvents()};startResize(q,R,te){!this.editable||R.noResize||R.locked||(q.preventDefault(),q.stopPropagation(),this.ensureMetrics(),this.resizeState={widgetId:R.id,pointerId:q.pointerId,handler:te,startPointer:{clientX:q.clientX,clientY:q.clientY},start:{id:R.id,x:R.x,y:R.y,w:R.w,h:R.h},startWidth:R.w,startHeight:R.h,lastPlacement:null},this.interactionActive=!0,q.currentTarget.setPointerCapture(q.pointerId),document.addEventListener("pointermove",this.handleResizeMove),document.addEventListener("pointerup",this.handleResizeEnd),this.placeholderPosition={id:R.id,x:R.x,y:R.y,w:R.w,h:R.h})}handleResizeMove=q=>{if(!this.resizeState)return;let R=this.ensureMetrics(),te=this.widgets,me=te.find(he=>he.id===this.resizeState.widgetId);if(!me)return;q.preventDefault();let ue=Jbt({pointer:{clientX:q.clientX,clientY:q.clientY},containerRect:this.containerBounds??this.getBoundingClientRect(),metrics:R,startWidth:this.resizeState.startWidth,startHeight:this.resizeState.startHeight,startPointer:this.resizeState.startPointer,handler:this.resizeState.handler,widget:me,columns:this.columns}),_e=_o(te,me.id,{x:me.x,y:me.y,w:ue.width,h:ue.height},this.columns,this.resizeState.start);if(_e){this.resizeState={...this.resizeState,lastPlacement:_e},this.previewWidgets=_e.widgets;let he=_e.widgets.find(ie=>ie.id===me.id);he?this.placeholderPosition={id:he.id,x:he.x,y:he.y,w:he.w,h:he.h}:this.placeholderPosition={id:me.id,x:me.x,y:me.y,w:ue.width,h:ue.height}}else this.previewWidgets=null,this.placeholderPosition=null;this.requestUpdate()};h
    <dees-heading level="1">This is a H1 heading</dees-heading>
    <dees-heading level="2">This is a H2 heading</dees-heading>
    <dees-heading level="3">This is a H3 heading</dees-heading>
    <dees-heading level="4">This is a H4 heading</dees-heading>
    <dees-heading level="5">This is a H5 heading</dees-heading>
    <dees-heading level="6">This is a H6 heading</dees-heading>
    <dees-heading level="hr">This is an hr heading</dees-heading>
    <dees-heading level="hr-small">This is an hr small heading</dees-heading>
  `}var ovt=v(()=>{oe()});var lvt,oj,cvt,dvt=v(()=>{oe();ovt();la();He();lvt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},oj=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},cvt=(()=>{let t=[Q("dees-heading")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String,reflect:!0})],lvt(this,null,n,{kind:"accessor",name:"level",static:!1,private:!1,access:{has:d=>"level"in d,get:d=>d.level,set:(d,l)=>{d.level=l}},metadata:c},s,o),lvt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=nvt;static demoGroups=["Layout"];#e=oj(this,s,"1");get level(){return this.#e}set level(c){this.#e=c}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      /* Heading styles */
      h1, h2, h3, h4, h5, h6 {
        margin: 16px 0 8px;
        font-weight: 600;
        color: ${p.bdTheme("#000","#fff")};
      }
      h1 { font-size: 32px; font-family: ${S9t}; letter-spacing: 0.025em;}
      h2 { font-size: 28px; }
      h3 { font-size: 24px; }
      h4 { font-size: 20px; }
      h5 { font-size: 16px; }
      h6 { font-size: 14px; }
      /* Horizontal rule style heading */
      .heading-hr {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 16px 0;
        color: ${p.bdTheme("#000","#fff")};
      }
      /* Fade lines toward and away from text for hr style */
      .heading-hr::before {
        content: '';
        flex: 1;
        height: 1px;
        /* fade in toward center */
        background: ${p.bdTheme("linear-gradient(to right, transparent, #ccc)","linear-gradient(to right, transparent, #333)")};
        margin: 0 8px;
      }
      .heading-hr::after {
        content: '';
        flex: 1;
        height: 1px;
        /* fade out away from center */
        background: ${p.bdTheme("linear-gradient(to right, #ccc, transparent)","linear-gradient(to right, #333, transparent)")};
        margin: 0 8px;
      }
      /* Small hr variant with reduced margins */
      .heading-hr.heading-hr-small {
        margin: 8px 0;
        font-size: 12px;
      }
      .heading-hr.heading-hr-small::before,
      .heading-hr.heading-hr-small::after {
        margin: 0 8px;
      }
    `];render(){switch(this.level){case"1":return w`<h1><slot></slot></h1>`;case"2":return w`<h2><slot></slot></h2>`;case"3":return w`<h3><slot></slot></h3>`;case"4":return w`<h4><slot></slot></h4>`;case"5":return w`<h5><slot></slot></h5>`;case"6":return w`<h6><slot></slot></h6>`;case"hr":return w`<div class="heading-hr"><slot></slot></div>`;case"hr-small":return w`<div class="heading-hr heading-hr-small"><slot></slot></div>`;default:return w`<h1><slot></slot></h1>`}}constructor(){super(...arguments),oj(this,o)}static{oj(i,a)}};return u=i})()});var pvt=v(()=>{dvt()});var uvt=v(()=>{V4()});var hvt,fvt=v(()=>{oe();hvt=()=>w`
  <div style="display: flex; align-items: center; gap: 16px;">
    <!-- Small set of pages -->
    <div style="display: flex; flex-direction: column; gap: 4px;">
      <span>5 pages, starting at 1:</span>
      <dees-pagination
        .total=${5}
        .page=${1}
        @page-change=${t=>console.log("Page changed to",t.detail.page)}
      ></dees-pagination>
    </div>

    <!-- Larger set of pages -->
    <div style="display: flex; flex-direction: column; gap: 4px;">
      <span>15 pages, starting at 8:</span>
      <dees-pagination
        .total=${15}
        .page=${8}
        @page-change=${t=>console.log("Page changed to",t.detail.page)}
      ></dees-pagination>
    </div>
  </div>
`});var lj,u8,mvt,gvt=v(()=>{oe();fvt();He();lj=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},u8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},mvt=(()=>{let t=[Q("dees-pagination")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number,reflect:!0})],u=[D({type:Number,reflect:!0})],lj(this,null,n,{kind:"accessor",name:"page",static:!1,private:!1,access:{has:b=>"page"in b,get:b=>b.page,set:(b,y)=>{b.page=y}},metadata:f},s,o),lj(this,null,u,{kind:"accessor",name:"total",static:!1,private:!1,access:{has:b=>"total"in b,get:b=>b.total,set:(b,y)=>{b.total=y}},metadata:f},c,d),lj(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=hvt;static demoGroups=["Layout"];#e=u8(this,s,1);get page(){return this.#e}set page(f){this.#e=f}#t=(u8(this,o),u8(this,c,1));get total(){return this.#t}set total(f){this.#t=f}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: inline-flex;
        align-items: center;
      }
      button {
        background: none;
        border: none;
        margin: 0 2px;
        padding: 6px 10px;
        font-size: 14px;
        cursor: pointer;
        color: ${p.bdTheme("#333","#ccc")};
        border-radius: 3px;
        transition: background 0.2s;
      }
      button:hover:not(:disabled) {
        background: ${p.bdTheme("#eee","#444")};
      }
      button:disabled {
        cursor: default;
        color: ${p.bdTheme("#aaa","#666")};
      }
      button.current {
        background: #0050b9;
        color: #fff;
        cursor: default;
      }
      span.ellipsis {
        margin: 0 4px;
        color: ${p.bdTheme("#333","#ccc")};
      }
    `];get pages(){let f=[],b=this.total,y=this.page;if(b<=7)for(let g=1;g<=b;g++)f.push(g);else{f.push(1),y>4&&f.push("...");let g=Math.max(2,y-2),h=Math.min(b-1,y+2);for(let x=g;x<=h;x++)f.push(x);y<b-3&&f.push("..."),f.push(b)}return f}render(){return w`
      <button
        @click=${()=>this.changePage(this.page-1)}
        ?disabled=${this.page<=1}
        aria-label="Previous page"
      >
        ‹
      </button>
      ${this.pages.map(f=>f==="..."?w`<span class="ellipsis">…</span>`:w`
              <button
                class="${f===this.page?"current":""}"
                @click=${()=>this.changePage(f)}
                ?disabled=${f===this.page}
                aria-label="Page ${f}"
              >
                ${f}
              </button>
            `)}
      <button
        @click=${()=>this.changePage(this.page+1)}
        ?disabled=${this.page>=this.total}
        aria-label="Next page"
      >
        ›
      </button>
    `}changePage(f){f<1||f>this.total||f===this.page||(this.page=f,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page},bubbles:!0})))}constructor(){super(...arguments),u8(this,d)}static{u8(i,a)}};return l=i})()});var bvt=v(()=>{gvt()});var vvt=v(()=>{h2()});var yvt,xvt=v(()=>{oe();yvt=()=>w`
  <dees-stepper
    .steps=${[{title:"Account Setup",content:w`
          <dees-form>
            <dees-input-text key="email" label="Work Email" required></dees-input-text>
            <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Profile Details",content:w`
          <dees-form>
            <dees-input-text key="firstName" label="First Name" required></dees-input-text>
            <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Contact Information",content:w`
          <dees-form>
            <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
            <dees-input-text key="company" label="Company"></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Team Size",content:w`
          <dees-form>
            <dees-input-dropdown
              key="teamSize"
              label="How big is your team?"
              .options=${[{label:"1-5",value:"1-5"},{label:"6-20",value:"6-20"},{label:"21-50",value:"21-50"},{label:"51+",value:"51+"}]}
              required
            ></dees-input-dropdown>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Goals",content:w`
          <dees-form>
            <dees-input-multitoggle
              key="goal"
              label="Main objective"
              .options=${[{label:"Onboarding",value:"onboarding"},{label:"Analytics",value:"analytics"},{label:"Automation",value:"automation"}]}
              required
            ></dees-input-multitoggle>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Brand Preferences",content:w`
          <dees-form>
            <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
            <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Integrations",content:w`
          <dees-form>
            <dees-input-list
              key="integrations"
              label="Integrations in use"
              placeholder="Add integration"
            ></dees-input-list>
            <dees-form-submit>Continue</dees-form-submit>
          </dees-form>
        `,validationFunc:async(t,e)=>{e.querySelector("dees-form").addEventListener("formData",()=>t.goNext(),{once:!0})}},{title:"Review & Launch",content:w`
          <dees-panel>
            <p>Almost there! Review your selections and launch whenever you're ready.</p>
          </dees-panel>
        `}]}
  ></dees-stepper>
`});var cj,h8,wvt,Mvt=v(()=>{i2();xi();oe();_t();xvt();He();cj=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},h8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},wvt=(()=>{let t=[Q("dees-stepper")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Object})],cj(this,null,n,{kind:"accessor",name:"steps",static:!1,private:!1,access:{has:b=>"steps"in b,get:b=>b.steps,set:(b,y)=>{b.steps=y}},metadata:f},s,o),cj(this,null,u,{kind:"accessor",name:"selectedStep",static:!1,private:!1,access:{has:b=>"selectedStep"in b,get:b=>b.selectedStep,set:(b,y)=>{b.selectedStep=y}},metadata:f},c,d),cj(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=yvt;static demoGroups=["Layout","Form"];#e=h8(this,s,[]);get steps(){return this.#e}set steps(f){this.#e=f}#t=(h8(this,o),h8(this,c,void 0));get selectedStep(){return this.#t}set selectedStep(f){this.#t=f}constructor(){super()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .stepperContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .step {
        position: relative;
        pointer-events: none;
        overflow: hidden;
        transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), box-shadow 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1), border 0.7s cubic-bezier(0.87, 0, 0.13, 1);
        max-width: 500px;
        min-height: 300px;
        border-radius: 12px;
        background: ${p.bdTheme("#ffffff","#0f0f11")};
        border: 1px solid ${p.bdTheme("#e2e8f0","#272729")};
        color: ${p.bdTheme("#0f172a","#f5f5f5")};
        margin: auto;
        margin-bottom: 20px;
        filter: opacity(0.55) saturate(0.85);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        user-select: none;
      }

      .step.selected {
        pointer-events: all;
        filter: opacity(1) saturate(1);
        user-select: auto;
      }

      .step.hiddenStep {
        filter: opacity(0);
      }

      .step.entrance {
        transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
      }

      .step.entrance.hiddenStep {
        transform: translateY(16px);
      }

      .step:last-child {
        margin-bottom: 100vh;
      }

      .step .stepCounter {
        color: ${p.bdTheme("#64748b","#a1a1aa")};
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 6px 14px;
        font-size: 12px;
        border-radius: 999px;
        background: ${p.bdTheme("rgba(226, 232, 240, 0.5)","rgba(63, 63, 70, 0.45)")};
        border: 1px solid ${p.bdTheme("rgba(226, 232, 240, 0.7)","rgba(63, 63, 70, 0.6)")};
      }

      .step .goBack {
        position: absolute;
        top: 12px;
        left: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 999px;
        border: 1px solid ${p.bdTheme("rgba(226, 232, 240, 0.9)","rgba(63, 63, 70, 0.85)")};
        background: ${p.bdTheme("rgba(255, 255, 255, 0.9)","rgba(39, 39, 42, 0.85)")};
        color: ${p.bdTheme("#475569","#d4d4d8")};
        cursor: pointer;
        transition: border 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
      }

      .step .goBack:hover {
        color: ${p.bdTheme("#0f172a","#fafafa")};
        border-color: ${p.bdTheme(yi.blue,yi.blue)};
        background: ${p.bdTheme("rgba(226, 232, 240, 0.95)","rgba(63, 63, 70, 0.7)")};
        transform: translateX(-2px);
      }

      .step .goBack:active {
        color: ${p.bdTheme("#0f172a","#fafafa")};
        border-color: ${p.bdTheme(yi.blueActive,yi.blueActive)};
        background: ${p.bdTheme("rgba(226, 232, 240, 0.85)","rgba(63, 63, 70, 0.6)")};
      }

      .step .goBack span {
        transition: transform 0.2s ease;
        display: inline-block;
      }

      .step .goBack:hover span {
        transform: translateX(-2px);
      }

      .step .title {
        text-align: center;
        padding-top: 64px;
        font-family: 'Geist Sans', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: inherit;
      }

      .step .content {
        padding: 32px;
      }
    `];render(){return w`
      <div class="stepperContainer">
        ${this.steps.map(f=>w`<div
              class="step ${f===this.selectedStep?"selected":null} ${this.getIndexOfStep(f)>this.getIndexOfStep(this.selectedStep)?"hiddenStep":""} ${this.getIndexOfStep(f)===0?"entrance":""}"
            >
              ${this.getIndexOfStep(f)>0?w`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`:""}
              <div class="stepCounter">
                Step ${this.steps.findIndex(b=>b===f)+1} of
                ${this.steps.length}
              </div>
              <div class="title">${f.title}</div>
              <div class="content">${f.content}</div>
            </div> `)}
      </div>
    `}getIndexOfStep=(h8(this,d),f=>this.steps.findIndex(b=>f===b));async firstUpdated(){await this.domtoolsPromise,await this.domtools.convenience.smartdelay.delayFor(0),this.selectedStep=this.steps[0],this.setScrollStatus(),await this.domtools.convenience.smartdelay.delayFor(350),this.shadowRoot.querySelector(".step.entrance")?.classList.remove("entrance")}async updated(){this.setScrollStatus()}scroller;async setScrollStatus(){let f=this.shadowRoot.querySelector(".stepperContainer"),b=this.shadowRoot.querySelector(".step"),y=this.shadowRoot.querySelector(".selected");if(!y)return;f.style.paddingTop||(f.style.paddingTop=`${f.offsetHeight/2-y.offsetHeight/2}px`),console.log("Setting scroll status"),console.log(y);let g=y.offsetTop-f.offsetHeight/2+y.offsetHeight/2;console.log(g);let h=await G2.setupDomTools();this.scroller||(this.scroller=new Mt.SweetScroll({vertical:!0,horizontal:!1,easing:"easeInOutExpo",duration:700},f)),!this.selectedStep.validationFuncCalled&&this.selectedStep.validationFunc&&(this.selectedStep.abortController=new AbortController,this.selectedStep.validationFuncCalled=!0,await this.selectedStep.validationFunc(this,y,this.selectedStep.abortController.signal)),this.scroller.to(g)}async goBack(){let f=this.steps.findIndex(g=>g===this.selectedStep);if(f<=0)return;this.selectedStep.abortController&&this.selectedStep.abortController.abort();let b=this.steps[f];b.validationFuncCalled=!1;let y=this.steps[f-1];y.validationFuncCalled=!1,this.selectedStep=y,await this.domtoolsPromise,await this.domtools.convenience.smartdelay.delayFor(100),this.selectedStep.onReturnToStepFunc?.(this,this.shadowRoot.querySelector(".selected"))}goNext(){let f=this.steps.findIndex(g=>g===this.selectedStep);if(f<0||f>=this.steps.length-1)return;this.selectedStep.abortController&&this.selectedStep.abortController.abort();let b=this.steps[f];b.validationFuncCalled=!1;let y=this.steps[f+1];y.validationFuncCalled=!1,this.selectedStep=y}static{h8(i,a)}};return l=i})()});var kvt=v(()=>{Mvt()});var zvt=v(()=>{Bbt();svt();pvt();uvt();bvt();vvt();kvt()});var Svt,Cvt=v(()=>{oe();Svt=()=>w`
  <style>
    .demo-container {
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .section {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }

    dees-image-viewer {
      height: 400px;
      border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
      border-radius: 8px;
      overflow: hidden;
    }

    .compact {
      height: 250px;
    }
  </style>

  <div class="demo-container">
    <div class="section">
      <div class="section-title">JPEG Image with Toolbar</div>
      <div class="section-description">A landscape photo with zoom, pan, fit, and download controls.</div>
      <dees-image-viewer
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200"
        alt="Mountain landscape"
      ></dees-image-viewer>
    </div>

    <div class="section">
      <div class="section-title">PNG with Transparency</div>
      <div class="section-description">Transparent PNG displayed on a checkerboard background.</div>
      <dees-image-viewer
        src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
        alt="PNG transparency demo"
      ></dees-image-viewer>
    </div>

    <div class="section">
      <div class="section-title">SVG Image</div>
      <div class="section-description">Scalable vector graphic.</div>
      <dees-image-viewer
        src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"
        alt="SVG logo"
        fit="contain"
      ></dees-image-viewer>
    </div>

    <div class="section">
      <div class="section-title">No Toolbar Variant</div>
      <div class="section-description">Image viewer with the toolbar hidden.</div>
      <dees-image-viewer
        class="compact"
        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800"
        alt="Nature scene"
        .showToolbar=${!1}
      ></dees-image-viewer>
    </div>
  </div>
`});var Qa,k1,_vt,dj=v(()=>{oe();At();Cvt();Qa=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},k1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},_vt=(()=>{let t=[Q("dees-image-viewer")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[];var Ce=class extends r{static{i=this}static{let Y=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],l=[D()],y=[D({type:Boolean})],x=[J()],N=[J()],I=[J()],V=[J()],E=[J()],H=[J()],ne=[J()],we=[J()],Qa(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:P=>"src"in P,get:P=>P.src,set:(P,F)=>{P.src=F}},metadata:Y},s,o),Qa(this,null,u,{kind:"accessor",name:"alt",static:!1,private:!1,access:{has:P=>"alt"in P,get:P=>P.alt,set:(P,F)=>{P.alt=F}},metadata:Y},c,d),Qa(this,null,l,{kind:"accessor",name:"fit",static:!1,private:!1,access:{has:P=>"fit"in P,get:P=>P.fit,set:(P,F)=>{P.fit=F}},metadata:Y},f,b),Qa(this,null,y,{kind:"accessor",name:"showToolbar",static:!1,private:!1,access:{has:P=>"showToolbar"in P,get:P=>P.showToolbar,set:(P,F)=>{P.showToolbar=F}},metadata:Y},g,h),Qa(this,null,x,{kind:"accessor",name:"zoom",static:!1,private:!1,access:{has:P=>"zoom"in P,get:P=>P.zoom,set:(P,F)=>{P.zoom=F}},metadata:Y},M,S),Qa(this,null,N,{kind:"accessor",name:"panX",static:!1,private:!1,access:{has:P=>"panX"in P,get:P=>P.panX,set:(P,F)=>{P.panX=F}},metadata:Y},_,k),Qa(this,null,I,{kind:"accessor",name:"panY",static:!1,private:!1,access:{has:P=>"panY"in P,get:P=>P.panY,set:(P,F)=>{P.panY=F}},metadata:Y},L,A),Qa(this,null,V,{kind:"accessor",name:"isDragging",static:!1,private:!1,access:{has:P=>"isDragging"in P,get:P=>P.isDragging,set:(P,F)=>{P.isDragging=F}},metadata:Y},C,z),Qa(this,null,E,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:P=>"loading"in P,get:P=>P.loading,set:(P,F)=>{P.loading=F}},metadata:Y},T,$),Qa(this,null,H,{kind:"accessor",name:"error",static:!1,private:!1,access:{has:P=>"error"in P,get:P=>P.error,set:(P,F)=>{P.error=F}},metadata:Y},O,G),Qa(this,null,ne,{kind:"accessor",name:"imageNaturalWidth",static:!1,private:!1,access:{has:P=>"imageNaturalWidth"in P,get:P=>P.imageNaturalWidth,set:(P,F)=>{P.imageNaturalWidth=F}},metadata:Y},U,be),Qa(this,null,we,{kind:"accessor",name:"imageNaturalHeight",static:!1,private:!1,access:{has:P=>"imageNaturalHeight"in P,get:P=>P.imageNaturalHeight,set:(P,F)=>{P.imageNaturalHeight=F}},metadata:Y},j,fe),Qa(null,e={value:i},t,{kind:"class",name:i.name,metadata:Y},null,a),Ce=i=e.value,Y&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:Y})}static demo=Svt;static demoGroups=["Media"];#e=k1(this,s,"");get src(){return this.#e}set src(Y){this.#e=Y}#t=(k1(this,o),k1(this,c,""));get alt(){return this.#t}set alt(Y){this.#t=Y}#a=(k1(this,d),k1(this,f,"contain"));get fit(){return this.#a}set fit(Y){this.#a=Y}#i=(k1(this,b),k1(this,g,!0));get showToolbar(){return this.#i}set showToolbar(Y){this.#i=Y}#r=(k1(this,h),k1(this,M,1));get zoom(){return this.#r}set zoom(Y){this.#r=Y}#s=(k1(this,S),k1(this,_,0));get panX(){return this.#s}set panX(Y){this.#s=Y}#n=
      <style>
        :host {
          display: block;
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .viewer-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          background: ${p.bdTheme("hsl(0 0% 97%)","hsl(215 20% 10%)")};
        }

        .toolbar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          padding: 0 16px;
          height: 48px;
          background: ${p.bdTheme("#ffffff","hsl(215 20% 15%)")};
          border-bottom: 1px solid ${p.bdTheme("#e5e7eb","hsl(217 25% 22%)")};
          flex-shrink: 0;
        }

        .toolbar-group {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .toolbar-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border: none;
          background: transparent;
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.15s ease;
        }

        .toolbar-button dees-icon {
          font-size: 16px;
        }

        .toolbar-button:hover {
          background: ${p.bdTheme("hsl(214 31% 92%)","hsl(217 25% 22%)")};
          color: ${p.bdTheme("#09090b","#fafafa")};
        }

        .toolbar-button:active {
          background: ${p.bdTheme("#e5e7eb","#3f3f46")};
        }

        .zoom-level {
          font-size: 13px;
          font-weight: 500;
          min-width: 48px;
          text-align: center;
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          cursor: pointer;
        }

        .image-area {
          flex: 1;
          position: relative;
          overflow: hidden;
          cursor: ${this.zoom>1?this.isDragging?"grabbing":"grab":"default"};
        }

        .checkerboard {
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(45deg, ${p.bdTheme("#f0f0f0","#1a1a1a")} 25%, transparent 25%),
            linear-gradient(-45deg, ${p.bdTheme("#f0f0f0","#1a1a1a")} 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, ${p.bdTheme("#f0f0f0","#1a1a1a")} 75%),
            linear-gradient(-45deg, transparent 75%, ${p.bdTheme("#f0f0f0","#1a1a1a")} 75%);
          background-size: 16px 16px;
          background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
          opacity: 0.3;
        }

        .image-wrapper {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translate(${this.panX}px, ${this.panY}px) scale(${this.zoom});
          transition: ${this.isDragging?"none":"transform 0.2s ease"};
          will-change: transform;
        }

        .image-wrapper img {
          max-width: 100%;
          max-height: 100%;
          object-fit: ${this.fit};
          user-select: none;
          -webkit-user-drag: none;
        }

        .image-wrapper img.actual {
          max-width: none;
          max-height: none;
          object-fit: none;
        }

        .loading-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: ${p.bdTheme("rgba(255,255,255,0.8)","rgba(0,0,0,0.6)")};
        }

        .loading-spinner {
          width: 32px;
          height: 32px;
          border: 3px solid ${p.bdTheme("#e5e7eb","#3f3f46")};
          border-top-color: ${p.bdTheme("#3b82f6","#60a5fa")};
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        .error-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: ${p.bdTheme("#71717a","#a1a1aa")};
        }

        .error-overlay .error-icon {
          color: ${p.bdTheme("#dc2626","#f87171")};
          font-size: 32px;
        }

        .error-text {
          font-size: 13px;
        }

        .image-info {
          font-size: 11px;
          color: ${p.bdTheme("#a1a1aa","#71717a")};
          padding: 0 4px;
        }
      </style>

      <div class="viewer-container">
        ${this.showToolbar?w`
          <div class="toolbar">
            <div class="toolbar-group">
              <button class="toolbar-button" @click=${this.zoomOut} title="Zoom out">
                <dees-icon icon="lucide:ZoomOut"></dees-icon>
              </button>
              <button class="toolbar-button" @click=${this.resetZoom}>
                <span class="zoom-level">${Math.round(this.zoom*100)}%</span>
              </button>
              <button class="toolbar-button" @click=${this.zoomIn} title="Zoom in">
                <dees-icon icon="lucide:ZoomIn"></dees-icon>
              </button>
            </div>
            <div class="toolbar-group">
              <button class="toolbar-button" @click=${this.fitToScreen} title="Fit to screen">
                <dees-icon icon="lucide:Maximize"></dees-icon>
              </button>
              <button class="toolbar-button" @click=${this.actualSize} title="Actual size (100%)">
                <dees-icon icon="lucide:Scan"></dees-icon>
              </button>
            </div>
            <div class="toolbar-group">
              <button class="toolbar-button" @click=${this.download} title="Download">
                <dees-icon icon="lucide:Download"></dees-icon>
              </button>
            </div>
            ${this.imageNaturalWidth>0?w`
              <div class="toolbar-group">
                <span class="image-info">${this.imageNaturalWidth} x ${this.imageNaturalHeight}</span>
              </div>
            `:""}
          </div>
        `:""}

        <div
          class="image-area"
          @wheel=${this.handleWheel}
          @mousedown=${this.handleMouseDown}
          @mousemove=${this.handleMouseMove}
          @mouseup=${this.handleMouseUp}
          @mouseleave=${this.handleMouseUp}
          @dblclick=${this.handleDoubleClick}
        >
          <div class="checkerboard"></div>
          <div class="image-wrapper">
            ${this.src?w`
              <img
                class="${this.fit==="actual"?"actual":""}"
                src="${this.src}"
                alt="${this.alt}"
                @load=${this.handleImageLoad}
                @error=${this.handleImageError}
                draggable="false"
              />
            `:""}
          </div>
          ${this.loading&&this.src?w`
            <div class="loading-overlay">
              <div class="loading-spinner"></div>
            </div>
          `:""}
          ${this.error?w`
            <div class="error-overlay">
              <dees-icon class="error-icon" icon="lucide:ImageOff"></dees-icon>
              <span class="error-text">${this.error}</span>
            </div>
          `:""}
        </div>
      </div>
    `}zoomIn(){this.zoom=Math.min(10,this.zoom*1.25)}zoomOut(){this.zoom=Math.max(.1,this.zoom/1.25),this.zoom<=1&&(this.panX=0,this.panY=0)}resetZoom(){this.zoom=1,this.panX=0,this.panY=0}fitToScreen(){this.zoom=1,this.panX=0,this.panY=0,this.fit="contain"}actualSize(){this.zoom=1,this.panX=0,this.panY=0,this.fit="actual"}download(){if(!this.src)return;let Y=document.createElement("a");Y.href=this.src,Y.download=this.src.split("/").pop()||"image",Y.click()}handleImageLoad(Y){let P=Y.target;this.loading=!1,this.error="",this.imageNaturalWidth=P.naturalWidth,this.imageNaturalHeight=P.naturalHeight}handleImageError(){this.loading=!1,this.error="Failed to load image"}handleWheel(Y){Y.preventDefault();let P=Y.deltaY>0?.9:1.1,F=Math.min(10,Math.max(.1,this.zoom*P));this.zoom=F,this.zoom<=1&&(this.panX=0,this.panY=0)}handleMouseDown(Y){this.zoom<=1||(this.isDragging=!0,this.dragStartX=Y.clientX,this.dragStartY=Y.clientY,this.dragStartPanX=this.panX,this.dragStartPanY=this.panY)}handleMouseMove(Y){this.isDragging&&(this.panX=this.dragStartPanX+(Y.clientX-this.dragStartX),this.panY=this.dragStartPanY+(Y.clientY-this.dragStartY))}handleMouseUp(){this.isDragging=!1}handleDoubleClick(){this.zoom===1?this.zoom=2:(this.zoom=1,this.panX=0,this.panY=0)}updated(Y){super.updated(Y),Y.has("src")&&(this.loading=!0,this.error="",this.zoom=1,this.panX=0,this.panY=0,this.imageNaturalWidth=0,this.imageNaturalHeight=0)}static{k1(i,a)}};return Ce=i})()});var Tvt=v(()=>{dj()});var Lvt,$vt=v(()=>{oe();Lvt=()=>w`
  <style>
    .demo-container {
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .section {
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }

    dees-audio-viewer {
      height: 200px;
      border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
      border-radius: 8px;
      overflow: hidden;
    }
  </style>

  <div class="demo-container">
    <div class="section">
      <div class="section-title">Audio with Waveform</div>
      <div class="section-description">Audio player with waveform visualization and full transport controls.</div>
      <dees-audio-viewer
        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
        title="SoundHelix Song 1"
        artist="T. Schuerger"
      ></dees-audio-viewer>
    </div>

    <div class="section">
      <div class="section-title">Audio without Waveform</div>
      <div class="section-description">Simple audio player with a seekbar instead of a waveform.</div>
      <dees-audio-viewer
        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
        title="SoundHelix Song 2"
        .showWaveform=${!1}
      ></dees-audio-viewer>
    </div>

    <div class="section">
      <div class="section-title">Minimal Audio Player</div>
      <div class="section-description">No title or artist metadata — just the player.</div>
      <dees-audio-viewer
        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
      ></dees-audio-viewer>
    </div>
  </div>
`});var Q2,Gt,Dvt,pj=v(()=>{oe();At();$vt();Q2=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Gt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Dvt=(()=>{let t=[Q("dees-audio-viewer")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[];var $e=class extends r{static{i=this}static{let q=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],l=[D()],y=[D({type:Boolean})],x=[D({type:Boolean})],N=[D({type:Boolean})],I=[J()],V=[J()],E=[J()],H=[J()],ne=[J()],we=[J()],Ce=[J()],F=[J()],K=[J()],Q2(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:R=>"src"in R,get:R=>R.src,set:(R,te)=>{R.src=te}},metadata:q},s,o),Q2(this,null,u,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:R=>"title"in R,get:R=>R.title,set:(R,te)=>{R.title=te}},metadata:q},c,d),Q2(this,null,l,{kind:"accessor",name:"artist",static:!1,private:!1,access:{has:R=>"artist"in R,get:R=>R.artist,set:(R,te)=>{R.artist=te}},metadata:q},f,b),Q2(this,null,y,{kind:"accessor",name:"showWaveform",static:!1,private:!1,access:{has:R=>"showWaveform"in R,get:R=>R.showWaveform,set:(R,te)=>{R.showWaveform=te}},metadata:q},g,h),Q2(this,null,x,{kind:"accessor",name:"autoplay",static:!1,private:!1,access:{has:R=>"autoplay"in R,get:R=>R.autoplay,set:(R,te)=>{R.autoplay=te}},metadata:q},M,S),Q2(this,null,N,{kind:"accessor",name:"loop",static:!1,private:!1,access:{has:R=>"loop"in R,get:R=>R.loop,set:(R,te)=>{R.loop=te}},metadata:q},_,k),Q2(this,null,I,{kind:"accessor",name:"isPlaying",static:!1,private:!1,access:{has:R=>"isPlaying"in R,get:R=>R.isPlaying,set:(R,te)=>{R.isPlaying=te}},metadata:q},L,A),Q2(this,null,V,{kind:"accessor",name:"currentTime",static:!1,private:!1,access:{has:R=>"currentTime"in R,get:R=>R.currentTime,set:(R,te)=>{R.currentTime=te}},metadata:q},C,z),Q2(this,null,E,{kind:"accessor",name:"duration",static:!1,private:!1,access:{has:R=>"duration"in R,get:R=>R.duration,set:(R,te)=>{R.duration=te}},metadata:q},T,$),Q2(this,null,H,{kind:"accessor",name:"volume",static:!1,private:!1,access:{has:R=>"volume"in R,get:R=>R.volume,set:(R,te)=>{R.volume=te}},metadata:q},O,G),Q2(this,null,ne,{kind:"accessor",name:"isMuted",static:!1,private:!1,access:{has:R=>"isMuted"in R,get:R=>R.isMuted,set:(R,te)=>{R.isMuted=te}},metadata:q},U,be),Q2(this,null,we,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:R=>"loading"in R,get:R=>R.loading,set:(R,te)=>{R.loading=te}},metadata:q},j,fe),Q2(this,null,Ce,{kind:"accessor",name:"error",static:!1,private:!1,access:{has:R=>"error"in R,get:R=>R.error,set:(R,te)=>{R.error=te}},metadata:q},Y,P),Q2(this,null,F,{kind:"accessor",name:"waveformData",static:!1,private:!1,access:{has:R=>"waveformData"in R,get:R=>R.waveformData,set:(R,te)=>{R.waveformData=te}},metadata:q},W,B),Q2(this,null,K,{kind:"accessor",name:"waveformReady",static:!1,private:!1,access:{has:R=>"waveformReady"in R,get:R=>R.waveformReady,set:(R,te)=>{R.waveformReady=te}},metadata:q},ge,ve),Q2(null,e={value:i},t,{kind:"class",name:i.name,metadata:q},null,a),$e=i
      <style>
        :host {
          display: block;
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .viewer-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          background: ${p.bdTheme("hsl(0 0% 97%)","hsl(215 20% 10%)")};
        }

        .toolbar {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 0 16px;
          height: 48px;
          background: ${p.bdTheme("#ffffff","hsl(215 20% 15%)")};
          border-bottom: 1px solid ${p.bdTheme("#e5e7eb","hsl(217 25% 22%)")};
          flex-shrink: 0;
        }

        .toolbar-group {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .toolbar-group--end {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-left: auto;
        }

        .toolbar-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border: none;
          background: transparent;
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.15s ease;
          flex-shrink: 0;
        }

        .toolbar-button dees-icon {
          font-size: 16px;
        }

        .toolbar-button:hover {
          background: ${p.bdTheme("hsl(214 31% 92%)","hsl(217 25% 22%)")};
          color: ${p.bdTheme("#09090b","#fafafa")};
        }

        .toolbar-button:active {
          background: ${p.bdTheme("#e5e7eb","#3f3f46")};
        }

        .toolbar-button.active {
          color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
        }

        .toolbar-title {
          font-size: 13px;
          font-weight: 500;
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          min-width: 0;
        }

        .time-display {
          font-size: 13px;
          font-weight: 500;
          font-variant-numeric: tabular-nums;
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          min-width: 90px;
          flex-shrink: 0;
        }

        .volume-group {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .volume-slider {
          width: 70px;
          height: 4px;
          -webkit-appearance: none;
          appearance: none;
          background: ${p.bdTheme("hsl(214 31% 91%)","hsl(217 25% 22%)")};
          border-radius: 2px;
          outline: none;
          cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
          cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
          border: none;
          cursor: pointer;
        }

        .content-area {
          flex: 1;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .waveform-container {
          position: absolute;
          inset: 0;
          cursor: pointer;
          overflow: hidden;
        }

        .waveform-container canvas {
          width: 100%;
          height: 100%;
          display: block;
        }

        .seekbar-container {
          width: 80%;
          max-width: 600px;
          height: 6px;
          cursor: pointer;
          border-radius: 3px;
          background: ${p.bdTheme("hsl(214 31% 91%)","hsl(217 25% 22%)")};
          overflow: hidden;
        }

        .seekbar-fill {
          height: 100%;
          background: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
          border-radius: 3px;
          transition: width 0.1s linear;
        }

        .error-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: ${p.bdTheme("#71717a","#a1a1aa")};
        }

        .error-overlay .error-icon {
          color: ${p.bdTheme("#dc2626","#f87171")};
          font-size: 32px;
        }

        .error-text {
          font-size: 13px;
        }

        .loading-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .loading-spinner {
          width: 32px;
          height: 32px;
          border: 3px solid ${p.bdTheme("hsl(214 31% 86%)","hsl(217 25% 28%)")};
          border-top-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      </style>

      <div class="viewer-container">
        <div class="toolbar">
          <div class="toolbar-group">
            <button class="toolbar-button" @click=${this.togglePlay}>
              <dees-icon icon="lucide:${this.isPlaying?"Pause":"Play"}"></dees-icon>
            </button>
            <span class="time-display">
              ${this.formatTime(this.currentTime)} / ${this.formatTime(this.duration)}
            </span>
          </div>

          ${q?w`
            <span class="toolbar-title">${q}</span>
          `:""}

          <div class="toolbar-group--end">
            <button
              class="toolbar-button ${this.loop?"active":""}"
              @click=${this.toggleLoop}
              title="Loop"
            >
              <dees-icon icon="lucide:Repeat"></dees-icon>
            </button>

            <div class="volume-group">
              <button class="toolbar-button" @click=${this.toggleMute} title="${this.isMuted?"Unmute":"Mute"}">
                <dees-icon icon="lucide:${this.isMuted||this.volume===0?"VolumeX":this.volume<.5?"Volume1":"Volume2"}"></dees-icon>
              </button>
              <input
                class="volume-slider"
                type="range"
                min="0"
                max="1"
                step="0.01"
                .value=${String(this.isMuted?0:this.volume)}
                @input=${this.handleVolumeChange}
              />
            </div>
          </div>
        </div>

        <div class="content-area">
          ${this.error?w`
            <div class="error-overlay">
              <dees-icon class="error-icon" icon="lucide:MusicOff"></dees-icon>
              <span class="error-text">${this.error}</span>
            </div>
          `:this.loading?w`
            <div class="loading-overlay">
              <div class="loading-spinner"></div>
            </div>
          `:this.showWaveform?w`
            <div class="waveform-container" @click=${this.handleWaveformClick}>
              <canvas></canvas>
            </div>
          `:w`
            <div class="seekbar-container" @click=${this.handleSeekbarClick}>
              <div class="seekbar-fill" style="width: ${this.duration?this.currentTime/this.duration*100:0}%"></div>
            </div>
          `}
        </div>
      </div>
    `}async connectedCallback(){await super.connectedCallback(),this.src&&this.initAudio()}async disconnectedCallback(){await super.disconnectedCallback(),this.cleanup()}async updated(q){super.updated(q),q.has("src")&&this.src&&(this.cleanup(),this.initAudio()),(q.has("waveformData")||q.has("currentTime"))&&this.drawWaveform()}play(){this.audioElement?.play()}pause(){this.audioElement?.pause()}togglePlay(){this.isPlaying?this.pause():this.play()}seek(q){this.audioElement&&(this.audioElement.currentTime=q)}setVolume(q){this.volume=Math.max(0,Math.min(1,q)),this.audioElement&&(this.audioElement.volume=this.volume),this.volume>0&&(this.isMuted=!1)}toggleMute(){this.isMuted?(this.isMuted=!1,this.volume=this.volumeBeforeMute||.5,this.audioElement&&(this.audioElement.volume=this.volume)):(this.volumeBeforeMute=this.volume,this.isMuted=!0,this.audioElement&&(this.audioElement.volume=0))}toggleLoop(){this.loop=!this.loop,this.audioElement&&(this.audioElement.loop=this.loop)}initAudio(){this.audioElement=new Audio,this.audioElement.crossOrigin="anonymous",this.audioElement.src=this.src,this.audioElement.volume=this.isMuted?0:this.volume,this.audioElement.loop=this.loop,this.audioElement.addEventListener("loadedmetadata",()=>{this.duration=this.audioElement.duration,this.loading=!1}),this.audioElement.addEventListener("play",()=>{this.isPlaying=!0,this.startTimeUpdate()}),this.audioElement.addEventListener("pause",()=>{this.isPlaying=!1,this.stopTimeUpdate()}),this.audioElement.addEventListener("ended",()=>{this.isPlaying=!1,this.stopTimeUpdate()}),this.audioElement.addEventListener("error",()=>{this.error="Failed to load audio",this.loading=!1}),this.audioElement.addEventListener("timeupdate",()=>{this.currentTime=this.audioElement.currentTime}),this.autoplay&&this.audioElement.play().catch(()=>{}),this.showWaveform&&this.loadWaveform()}async loadWaveform(){try{this.loading=!0;let R=await(await fetch(this.src)).arrayBuffer(),te=new AudioContext,ue=(await te.decodeAudioData(R)).getChannelData(0),_e=200,he=Math.floor(ue.length/_e),ie=[];for(let Re=0;Re<_e;Re++){let Ue=0;for(let xe=0;xe<he;xe++)Ue+=Math.abs(ue[Re*he+xe]);ie.push(Ue/he)}let ke=Math.max(...ie);this.waveformData=ie.map(Re=>ke>0?Re/ke:0),this.waveformReady=!0,this.loading=!1,await te.close()}catch{this.waveformReady=!1,this.loading=!1}}drawWaveform(){if(!this.showWaveform||!this.waveformReady)return;let q=this.shadowRoot?.querySelector("canvas");if(!q)return;this.canvasElement=q;let R=q.parentElement,te=window.devicePixelRatio||1,me=R.clientWidth,ue=R.clientHeight;q.width=me*te,q.height=ue*te;let _e=q.getContext("2d");if(!_e)return;_e.scale(te,te),_e.clearRect(0,0,me,ue);let he=this.waveformData.length;if(he===0)return;let ie=me/he,ke=this.duration>0?this.currentTime/this.duration:0,Re=Math.floor(ke*he),Ue=document.body.classList.contains("theme-dark")||window.matchMedia("(prefers-color-scheme: dark)").matches,xe=Ue?"hsl(213 93% 68%)":"hsl(217 91% 60%)",ae=Ue?"hsl(217 25% 22%)":"hsl(214 31% 86%)";for(let re=0;re<he;re++){let ye=this.waveformData[re],Pe=Math.max(2,ye*(ue-4)),qe=re*ie,xt=(ue-Pe)/2;_e.fillStyle=re<Re?xe:ae,_e.fillRect(qe+.5,xt,ie-1,Pe)}}handleWaveformClick(q){let R=q.currentTarget.getBoundingClientRect(),te=(q.clientX-R.left)/R.width;this.seek(te*this.duration)}handleSeekbarClick(q){let R=q.currentTarget.getBoundingClientRect(),te=(q.clientX-R.left)/R.width;this.seek(te*this.duration)}handleVolumeChange(q){let R=parseFloat(q.target.value);this.setVolume(R)}startTimeUpdate(){this.stopTimeUpdate();let q=()=>{this.audioElement&&this.isPlaying&&(this.currentTime=this.audioElement.currentTime,this.animFrameId=requestAnimationFrame(q))};this.animFrameId=requestAnimationFrame(q)}stopTimeUpdate(){this.animFrameId&&(cancelAnimationFrame(this.animFrameId),this.animFrameId=0)}formatTime(q){if(!isFinite(q)||q<0)return"0:00";let R=Math.floor(q/60),te=Math.floor(q%60);return`${R}:${te.toString().padStart(2,"0")}`}cleanup(){this.stopTimeUpdate(),this.audioElement&&(this.audioElement.pause(),this.audioElement.src="",this.audioElement=null),this.isPlaying=!1,this.currentT
  <style>
    .demo-container {
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .section {
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }
  </style>

  <div class="demo-container">
    <div class="section">
      <div class="section-title">Video with Custom Controls</div>
      <div class="section-description">A video player with overlay controls, seeking, and volume adjustment.</div>
      <dees-video-viewer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
      ></dees-video-viewer>
    </div>

    <div class="section">
      <div class="section-title">Autoplay Muted</div>
      <div class="section-description">Video that autoplays muted, commonly used for previews.</div>
      <dees-video-viewer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
        .autoplay=${!0}
        .muted=${!0}
      ></dees-video-viewer>
    </div>

    <div class="section">
      <div class="section-title">Native Controls</div>
      <div class="section-description">Video using browser-native controls instead of custom overlay.</div>
      <dees-video-viewer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
        .showControls=${!1}
      ></dees-video-viewer>
    </div>
  </div>
`});var ma,n1,Ivt,uj=v(()=>{oe();At();Pvt();ma=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},n1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Ivt=(()=>{let t=[Q("dees-video-viewer")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[];var K=class extends r{static{i=this}static{let ge=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D()],l=[D({type:Boolean})],y=[D({type:Boolean})],x=[D({type:Boolean})],N=[D({type:Boolean})],I=[J()],V=[J()],E=[J()],H=[J()],ne=[J()],we=[J()],Ce=[J()],F=[J()],ma(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:ve=>"src"in ve,get:ve=>ve.src,set:(ve,$e)=>{ve.src=$e}},metadata:ge},s,o),ma(this,null,u,{kind:"accessor",name:"poster",static:!1,private:!1,access:{has:ve=>"poster"in ve,get:ve=>ve.poster,set:(ve,$e)=>{ve.poster=$e}},metadata:ge},c,d),ma(this,null,l,{kind:"accessor",name:"showControls",static:!1,private:!1,access:{has:ve=>"showControls"in ve,get:ve=>ve.showControls,set:(ve,$e)=>{ve.showControls=$e}},metadata:ge},f,b),ma(this,null,y,{kind:"accessor",name:"autoplay",static:!1,private:!1,access:{has:ve=>"autoplay"in ve,get:ve=>ve.autoplay,set:(ve,$e)=>{ve.autoplay=$e}},metadata:ge},g,h),ma(this,null,x,{kind:"accessor",name:"loop",static:!1,private:!1,access:{has:ve=>"loop"in ve,get:ve=>ve.loop,set:(ve,$e)=>{ve.loop=$e}},metadata:ge},M,S),ma(this,null,N,{kind:"accessor",name:"muted",static:!1,private:!1,access:{has:ve=>"muted"in ve,get:ve=>ve.muted,set:(ve,$e)=>{ve.muted=$e}},metadata:ge},_,k),ma(this,null,I,{kind:"accessor",name:"isPlaying",static:!1,private:!1,access:{has:ve=>"isPlaying"in ve,get:ve=>ve.isPlaying,set:(ve,$e)=>{ve.isPlaying=$e}},metadata:ge},L,A),ma(this,null,V,{kind:"accessor",name:"currentTime",static:!1,private:!1,access:{has:ve=>"currentTime"in ve,get:ve=>ve.currentTime,set:(ve,$e)=>{ve.currentTime=$e}},metadata:ge},C,z),ma(this,null,E,{kind:"accessor",name:"duration",static:!1,private:!1,access:{has:ve=>"duration"in ve,get:ve=>ve.duration,set:(ve,$e)=>{ve.duration=$e}},metadata:ge},T,$),ma(this,null,H,{kind:"accessor",name:"volume",static:!1,private:!1,access:{has:ve=>"volume"in ve,get:ve=>ve.volume,set:(ve,$e)=>{ve.volume=$e}},metadata:ge},O,G),ma(this,null,ne,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:ve=>"loading"in ve,get:ve=>ve.loading,set:(ve,$e)=>{ve.loading=$e}},metadata:ge},U,be),ma(this,null,we,{kind:"accessor",name:"error",static:!1,private:!1,access:{has:ve=>"error"in ve,get:ve=>ve.error,set:(ve,$e)=>{ve.error=$e}},metadata:ge},j,fe),ma(this,null,Ce,{kind:"accessor",name:"isFullscreen",static:!1,private:!1,access:{has:ve=>"isFullscreen"in ve,get:ve=>ve.isFullscreen,set:(ve,$e)=>{ve.isFullscreen=$e}},metadata:ge},Y,P),ma(this,null,F,{kind:"accessor",name:"controlsVisible",static:!1,private:!1,access:{has:ve=>"controlsVisible"in ve,get:ve=>ve.controlsVisible,set:(ve,$e)=>{ve.controlsVisible=$e}},metadata:ge},W,B),ma(null,e={value:i},t,{kind:"class",name:i.name,metadata:ge},null,a),K=i=e.value,ge&&Object.defineProperty(i,Symbol.metadata,{enumerabl
      <style>
        :host {
          display: block;
          position: relative;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .video-container {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 9;
          background: #000000;
          border-radius: 8px;
          overflow: hidden;
        }

        video {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }

        .overlay {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          cursor: pointer;
        }

        .center-play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.6);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.2s ease, transform 0.2s ease;
          opacity: ${this.isPlaying?0:1};
          pointer-events: ${this.isPlaying?"none":"auto"};
        }

        .center-play dees-icon {
          font-size: 28px;
        }

        .center-play:hover {
          background: rgba(0, 0, 0, 0.8);
          transform: translate(-50%, -50%) scale(1.1);
        }

        .controls-bar {
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          padding: 24px 12px 12px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          opacity: ${this.controlsVisible||!this.isPlaying?1:0};
          transition: opacity 0.3s ease;
        }

        .seekbar-row {
          width: 100%;
          height: 4px;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 2px;
          cursor: pointer;
          position: relative;
        }

        .seekbar-row:hover {
          height: 6px;
        }

        .seekbar-progress {
          height: 100%;
          background: ${p.bdTheme("#3b82f6","#60a5fa")};
          border-radius: 2px;
          pointer-events: none;
        }

        .controls-row {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .ctrl-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border: none;
          background: transparent;
          color: #ffffff;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.15s ease;
          flex-shrink: 0;
        }

        .ctrl-button dees-icon {
          font-size: 16px;
        }

        .ctrl-button:hover {
          background: rgba(255, 255, 255, 0.15);
        }

        .time-display {
          font-size: 12px;
          font-variant-numeric: tabular-nums;
          color: rgba(255, 255, 255, 0.8);
          user-select: none;
          flex-shrink: 0;
        }

        .spacer {
          flex: 1;
        }

        .volume-group {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .volume-slider {
          width: 60px;
          height: 4px;
          -webkit-appearance: none;
          appearance: none;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 2px;
          outline: none;
          cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #ffffff;
          cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #ffffff;
          border: none;
          cursor: pointer;
        }

        .loading-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0.3);
          pointer-events: none;
        }

        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 3px solid rgba(255, 255, 255, 0.3);
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        .error-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: rgba(255, 255, 255, 0.7);
          background: rgba(0, 0, 0, 0.6);
        }

        .error-overlay dees-icon {
          color: #f87171;
          font-size: 32px;
        }

        .error-text {
          font-size: 13px;
        }
      </style>

      <div
        class="video-container"
        @mousemove=${this.handleMouseMove}
        @mouseleave=${this.handleMouseLeave}
      >
        <video
          .src=${this.src}
          .poster=${this.poster}
          .muted=${this.muted}
          .loop=${this.loop}
          ?autoplay=${this.autoplay}
          ?controls=${!this.showControls}
          playsinline
          @loadedmetadata=${this.handleLoadedMetadata}
          @play=${this.handlePlay}
          @pause=${this.handlePause}
          @ended=${this.handleEnded}
          @timeupdate=${this.handleTimeUpdate}
          @error=${this.handleError}
          @waiting=${()=>{this.loading=!0}}
          @canplay=${()=>{this.loading=!1}}
        ></video>

        ${this.showControls?w`
          <div class="overlay" @click=${this.handleOverlayClick}>
            <div class="center-play">
              <dees-icon icon="lucide:Play"></dees-icon>
            </div>

            <div class="controls-bar" @click=${ge=>ge.stopPropagation()}>
              <div class="seekbar-row" @click=${this.handleSeek}>
                <div class="seekbar-progress" style="width: ${this.duration?this.currentTime/this.duration*100:0}%"></div>
              </div>

              <div class="controls-row">
                <button class="ctrl-button" @click=${this.togglePlay}>
                  <dees-icon icon="lucide:${this.isPlaying?"Pause":"Play"}"></dees-icon>
                </button>

                <span class="time-display">
                  ${this.formatTime(this.currentTime)} / ${this.formatTime(this.duration)}
                </span>

                <span class="spacer"></span>

                <div class="volume-group">
                  <button class="ctrl-button" @click=${this.toggleMute}>
                    <dees-icon icon="lucide:${this.muted||this.volume===0?"VolumeX":this.volume<.5?"Volume1":"Volume2"}"></dees-icon>
                  </button>
                  <input
                    class="volume-slider"
                    type="range"
                    min="0"
                    max="1"
                    step="0.01"
                    .value=${String(this.muted?0:this.volume)}
                    @input=${this.handleVolumeChange}
                  />
                </div>

                <button class="ctrl-button" @click=${this.toggleFullscreen} title="Fullscreen">
                  <dees-icon icon="lucide:${this.isFullscreen?"Minimize":"Maximize"}"></dees-icon>
                </button>
              </div>
            </div>
          </div>
        `:""}

        ${this.loading&&!this.error?w`
          <div class="loading-overlay">
            <div class="loading-spinner"></div>
          </div>
        `:""}

        ${this.error?w`
          <div class="error-overlay">
            <dees-icon icon="lucide:VideoOff"></dees-icon>
            <span class="error-text">${this.error}</span>
          </div>
        `:""}
      </div>
    `}async firstUpdated(){this.videoElement=this.shadowRoot?.querySelector("video")||null,document.addEventListener("fullscreenchange",this.handleFullscreenChange)}async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("fullscreenchange",this.handleFullscreenChange),this.hideControlsTimer&&clearTimeout(this.hideControlsTimer)}play(){this.videoElement?.play()}pause(){this.videoElement?.pause()}togglePlay(){this.isPlaying?this.pause():this.play()}seek(ge){this.videoElement&&(this.videoElement.currentTime=ge)}setVolume(ge){this.volume=Math.max(0,Math.min(1,ge)),this.videoElement&&(this.videoElement.volume=this.volume)}toggleFullscreen(){let ge=this.shadowRoot?.querySelector(".video-container");ge&&(this.isFullscreen?document.exitFullscreen?.():ge.requestFullscreen?.())}handleLoadedMetadata(){this.videoElement&&(this.duration=this.videoElement.duration,this.loading=!1)}handlePlay(){this.isPlaying=!0,this.scheduleHideControls()}handlePause(){this.isPlaying=!1,this.controlsVisible=!0}handleEnded(){this.isPlaying=!1,this.controlsVisible=!0}handleTimeUpdate(){this.videoElement&&(this.currentTime=this.videoElement.currentTime)}handleError(){this.error="Failed to load video",this.loading=!1}handleOverlayClick(){this.togglePlay()}handleSeek(ge){let ve=ge.currentTarget.getBoundingClientRect(),$e=(ge.clientX-ve.left)/ve.width;this.seek($e*this.duration)}handleVolumeChange(ge){let ve=parseFloat(ge.target.value);this.setVolume(ve),this.muted=ve===0}toggleMute(){this.muted=!this.muted,this.videoElement&&(this.videoElement.muted=this.muted)}handleMouseMove(){this.controlsVisible=!0,this.scheduleHideControls()}handleMouseLeave(){this.isPlaying&&(this.controlsVisible=!1)}scheduleHideControls(){this.hideControlsTimer&&clearTimeout(this.hideControlsTimer),this.isPlaying&&(this.hideControlsTimer=setTimeout(()=>{this.controlsVisible=!1},3e3))}handleFullscreenChange=()=>{this.isFullscreen=!!document.fullscreenElement};formatTime(ge){if(!isFinite(ge)||ge<0)return"0:00";let ve=Math.floor(ge/60),$e=Math.floor(ge%60);return`${ve}:${$e.toString().padStart(2,"0")}`}static{n1(i,a)}};return K=i})()});var Nvt=v(()=>{uj()});var Xr,Pw=v(()=>{oe();Xr=class{static pdfjsLib;static initialized=!1;static async initialize(){this.initialized||(this.pdfjsLib=await import("https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm"),this.pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs",this.initialized=!0)}static async loadDocument(e){return await this.initialize(),await this.pdfjsLib.getDocument(e).promise}static releaseDocument(e){}}});var Rvt,Fvt=v(()=>{oe();Rvt=[p.defaultStyles,X`
    :host {
      display: block;
      width: 100%;
      height: 600px;
      position: relative;
      font-family: 'Geist Sans', sans-serif;
      contain: layout style;
    }

    .pdf-viewer {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: ${p.bdTheme("hsl(0 0% 97%)","hsl(215 20% 10%)")};
      position: relative;
      overflow: hidden;
    }

    .toolbar {
      height: 48px;
      background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20% 15%)")};
      border-bottom: 1px solid ${p.bdTheme("hsl(214 31% 91%)","hsl(217 25% 22%)")};
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 16px;
      flex-shrink: 0;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .toolbar-group--end {
      margin-left: auto;
    }

    .toolbar-button {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
    }

    .toolbar-button:hover:not(:disabled) {
      background: ${p.bdTheme("hsl(214 31% 92%)","hsl(217 25% 22%)")};
    }

    .toolbar-button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .toolbar-button dees-icon {
      font-size: 16px;
    }

    .page-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      font-size: 14px;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
    }

    .page-input {
      width: 48px;
      height: 28px;
      border-radius: 4px;
      border: 1px solid ${p.bdTheme("hsl(214 31% 86%)","hsl(217 25% 28%)")};
      background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20% 12%)")};
      color: ${p.bdTheme("hsl(222 47% 11%)","hsl(210 20% 96%)")};
      text-align: center;
      font-size: 14px;
      font-family: inherit;
      outline: none;
    }

    .page-input:focus {
      border-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
    }

    .page-separator {
      color: ${p.bdTheme("hsl(215 16% 60%)","hsl(215 16% 50%)")};
    }

    .zoom-level {
      font-size: 13px;
      font-weight: 500;
      min-width: 48px;
      text-align: center;
    }

    .viewer-container {
      flex: 1;
      display: flex;
      overflow: hidden;
      position: relative;
      min-height: 0;
    }

    .sidebar {
      width: 200px;
      background: ${p.bdTheme("hsl(0 0% 100%)","hsl(215 20% 15%)")};
      border-right: 1px solid ${p.bdTheme("hsl(214 31% 91%)","hsl(217 25% 22%)")};
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }

    .sidebar-header {
      height: 40px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid ${p.bdTheme("hsl(214 31% 91%)","hsl(217 25% 22%)")};
      font-size: 13px;
      font-weight: 600;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
    }

    .sidebar-close {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
      transition: background 0.15s ease;
    }

    .sidebar-close:hover {
      background: ${p.bdTheme("hsl(214 31% 92%)","hsl(217 25% 22%)")};
    }

    .sidebar-close dees-icon {
      font-size: 14px;
    }

    .sidebar-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 12px;
      display: block;
      overscroll-behavior: contain;
      min-height: 0;
    }

    .thumbnail {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.15s ease;
      background: ${p.bdTheme("hsl(0 0% 95%)","hsl(215 20% 18%)")};
      display: block;
      width: 100%;
      margin-bottom: 12px;
      /* Default A4 aspect ratio (297mm / 210mm ≈ 1.414) */
      min-height: calc(176px * 1.414);
    }

    .thumbnail:last-child {
      margin-bottom: 0;
    }

    .thumbnail:hover {
      border-color: ${p.bdTheme("hsl(214 31% 86%)","hsl(217 25% 35%)")};
    }

    .thumbnail.active {
      border-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
    }

    .thumbnail-canvas {
      display: block;
      width: 100%;
      height: auto;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    .thumbnail-number {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: ${p.bdTheme("rgba(0, 0, 0, 0.7)","rgba(0, 0, 0, 0.8)")};
      color: white;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .viewer-main {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px;
      scroll-behavior: smooth;
      overscroll-behavior: contain;
      min-height: 0;
      position: relative;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 16px;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
    }

    .loading-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px solid ${p.bdTheme("hsl(214 31% 86%)","hsl(217 25% 28%)")};
      border-top-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-text {
      font-size: 14px;
      font-weight: 500;
    }

    .pages-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .page-wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .canvas-container {
      background: white;
      box-shadow: 0 2px 12px ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(0, 0, 0, 0.3)")};
      border-radius: 4px;
      overflow: hidden;
      display: inline-block;
      position: relative;
    }

    .page-canvas {
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    /* Text layer for selection */
    .text-layer {
      position: absolute;
      inset: 0;
      overflow: visible;
      line-height: 1;
      text-size-adjust: none;
      forced-color-adjust: none;
      transform-origin: 0 0;
      z-index: 1;
      user-select: text;
      -webkit-user-select: text;
    }

    .text-layer span,
    .text-layer br {
      color: transparent;
      position: absolute;
      white-space: pre;
      cursor: text;
      transform-origin: 0% 0%;
      user-select: text;
      -webkit-user-select: text;
    }

    .text-layer ::selection {
      background: rgba(0, 100, 200, 0.3);
    }

    .text-layer br::selection {
      background: transparent;
    }

    .text-layer .endOfContent {
      display: block;
      position: absolute;
      inset: 100% 0 0;
      z-index: 0;
      cursor: default;
      user-select: none;
    }

    .text-layer.selecting .endOfContent {
      top: 0;
    }

    .pdf-viewer.with-sidebar .viewer-main {
      margin-left: 0;
    }
  `]});var Ovt,Bvt=v(()=>{oe();Ovt=()=>w`
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }

    .demo-section {
      margin-bottom: 40px;
    }

    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }

    dees-pdf-viewer {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }

    .viewer-tall {
      height: 800px;
    }

    .viewer-compact {
      height: 500px;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Full Featured PDF Viewer with Toolbar</h3>
      <dees-pdf-viewer
        class="viewer-tall"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        showToolbar="true"
        showSidebar="false"
        initialZoom="page-fit"
      ></dees-pdf-viewer>
    </div>

    <div class="demo-section">
      <h3>PDF Viewer with Sidebar Navigation</h3>
      <dees-pdf-viewer
        class="viewer-tall"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        showToolbar="true"
        showSidebar="true"
        initialZoom="page-width"
      ></dees-pdf-viewer>
    </div>

    <div class="demo-section">
      <h3>Compact Viewer without Controls</h3>
      <dees-pdf-viewer
        class="viewer-compact"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
        showToolbar="false"
        showSidebar="false"
        initialZoom="auto"
      ></dees-pdf-viewer>
    </div>
  </div>
`});var Ja,z1,Hvt,hj=v(()=>{oe();Pw();Fvt();Bvt();At();Ja=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},z1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Hvt=(()=>{let t=[Q("dees-pdf-viewer")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[];var Ce=class extends r{static{i=this}static{let Y=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:Number})],l=[D({type:String})],y=[D({type:Boolean})],x=[D({type:Boolean})],N=[D({type:Number})],I=[D({type:Number})],V=[D({type:Number})],E=[D({type:Boolean})],H=[D({type:String})],ne=[D({type:Array})],we=[D({type:Array})],Ja(this,null,n,{kind:"accessor",name:"pdfUrl",static:!1,private:!1,access:{has:P=>"pdfUrl"in P,get:P=>P.pdfUrl,set:(P,F)=>{P.pdfUrl=F}},metadata:Y},s,o),Ja(this,null,u,{kind:"accessor",name:"initialPage",static:!1,private:!1,access:{has:P=>"initialPage"in P,get:P=>P.initialPage,set:(P,F)=>{P.initialPage=F}},metadata:Y},c,d),Ja(this,null,l,{kind:"accessor",name:"initialZoom",static:!1,private:!1,access:{has:P=>"initialZoom"in P,get:P=>P.initialZoom,set:(P,F)=>{P.initialZoom=F}},metadata:Y},f,b),Ja(this,null,y,{kind:"accessor",name:"showToolbar",static:!1,private:!1,access:{has:P=>"showToolbar"in P,get:P=>P.showToolbar,set:(P,F)=>{P.showToolbar=F}},metadata:Y},g,h),Ja(this,null,x,{kind:"accessor",name:"showSidebar",static:!1,private:!1,access:{has:P=>"showSidebar"in P,get:P=>P.showSidebar,set:(P,F)=>{P.showSidebar=F}},metadata:Y},M,S),Ja(this,null,N,{kind:"accessor",name:"currentPage",static:!1,private:!1,access:{has:P=>"currentPage"in P,get:P=>P.currentPage,set:(P,F)=>{P.currentPage=F}},metadata:Y},_,k),Ja(this,null,I,{kind:"accessor",name:"totalPages",static:!1,private:!1,access:{has:P=>"totalPages"in P,get:P=>P.totalPages,set:(P,F)=>{P.totalPages=F}},metadata:Y},L,A),Ja(this,null,V,{kind:"accessor",name:"currentZoom",static:!1,private:!1,access:{has:P=>"currentZoom"in P,get:P=>P.currentZoom,set:(P,F)=>{P.currentZoom=F}},metadata:Y},C,z),Ja(this,null,E,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:P=>"loading"in P,get:P=>P.loading,set:(P,F)=>{P.loading=F}},metadata:Y},T,$),Ja(this,null,H,{kind:"accessor",name:"documentId",static:!1,private:!1,access:{has:P=>"documentId"in P,get:P=>P.documentId,set:(P,F)=>{P.documentId=F}},metadata:Y},O,G),Ja(this,null,ne,{kind:"accessor",name:"thumbnailData",static:!1,private:!1,access:{has:P=>"thumbnailData"in P,get:P=>P.thumbnailData,set:(P,F)=>{P.thumbnailData=F}},metadata:Y},U,be),Ja(this,null,we,{kind:"accessor",name:"pageData",static:!1,private:!1,access:{has:P=>"pageData"in P,get:P=>P.pageData,set:(P,F)=>{P.pageData=F}},metadata:Y},j,fe),Ja(null,e={value:i},t,{kind:"class",name:i.name,metadata:Y},null,a),Ce=i=e.value,Y&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:Y})}static demo=Ovt;static demoGroups=["Media","PDF"];static styles=Rvt;#e=z1(this,s,"");get pdfUrl(){return this.#e}set pdfUrl(Y){this.#e=Y}#t=(z1(this,o),z1(this,c,1));get initialPage(){return this.#t}set initialPage(Y){this.#t=Y}#a=(z1(this
      <div class="pdf-viewer ${this.showSidebar?"with-sidebar":""}">
        ${this.showToolbar?w`
          <div class="toolbar">
            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.previousPage}
                ?disabled=${this.currentPage<=1}
              >
                <dees-icon icon="lucide:ChevronLeft"></dees-icon>
              </button>
              <div class="page-info">
                <input
                  type="number"
                  min="1"
                  max="${this.totalPages}"
                  .value=${String(this.currentPage)}
                  @change=${this.handlePageInput}
                  class="page-input"
                />
                <span class="page-separator">/</span>
                <span class="page-total">${this.totalPages}</span>
              </div>
              <button
                class="toolbar-button"
                @click=${this.nextPage}
                ?disabled=${this.currentPage>=this.totalPages}
              >
                <dees-icon icon="lucide:ChevronRight"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.zoomOut}
                ?disabled=${!this.canZoomOut}
              >
                <dees-icon icon="lucide:ZoomOut"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.resetZoom}
              >
                <span class="zoom-level">${Math.round(this.currentZoom*100)}%</span>
              </button>
              <button
                class="toolbar-button"
                @click=${this.zoomIn}
                ?disabled=${!this.canZoomIn}
              >
                <dees-icon icon="lucide:ZoomIn"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.fitToPage}
                title="Fit to page"
              >
                <dees-icon icon="lucide:Maximize"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.fitToWidth}
                title="Fit to width"
              >
                <dees-icon icon="lucide:ArrowLeftRight"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group toolbar-group--end">
              <button
                class="toolbar-button"
                @click=${()=>this.showSidebar=!this.showSidebar}
                title="${this.showSidebar?"Hide thumbnails":"Show thumbnails"}"
              >
                <dees-icon icon="${this.showSidebar?"lucide:SidebarClose":"lucide:Sidebar"}"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.downloadPdf}
                title="Download"
              >
                <dees-icon icon="lucide:Download"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.printPdf}
                title="Print"
              >
                <dees-icon icon="lucide:Printer"></dees-icon>
              </button>
            </div>
          </div>
        `:""}

        <div class="viewer-container">
          ${this.showSidebar?w`
            <div class="sidebar">
              <div class="sidebar-header">
                <span>Pages</span>
                <button
                  class="sidebar-close"
                  @click=${()=>this.showSidebar=!1}
                >
                  <dees-icon icon="lucide:X"></dees-icon>
                </button>
              </div>
              <div class="sidebar-content">
                ${Wa.keyed(this.documentId,w`
                  ${Wa.repeat(this.thumbnailData,Y=>Y.page,Y=>w`
                      <div
                        class="thumbnail ${this.currentPage===Y.page?"active":""}"
                        data-page="${Y.page}"
                        @click=${this.handleThumbnailClick}
                      >
                        <canvas class="thumbnail-canvas" data-page="${Y.page}"></canvas>
                        <span class="thumbnail-number">${Y.page}</span>
                      </div>
                    `)}
                `)}
              </div>
            </div>
          `:""}

          <div class="viewer-main" @scroll=${this.handleScroll}>
            ${this.loading?w`
              <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="loading-text">Loading PDF...</div>
              </div>
            `:w`
              <div class="pages-container">
                ${Wa.repeat(this.pageData,Y=>Y.page,Y=>w`
                    <div class="page-wrapper" data-page="${Y.page}">
                      <div class="canvas-container">
                        <canvas class="page-canvas" data-page="${Y.page}"></canvas>
                        <div class="text-layer" data-page="${Y.page}"></div>
                      </div>
                    </div>
                  `)}
              </div>
            `}
          </div>
        </div>
      </div>
    `}async connectedCallback(){await super.connectedCallback(),await this.updateComplete,this.ensureViewerRefs(),this.pdfUrl&&(this.documentId=`${this.pdfUrl}-${Date.now()}-${Math.random()}`,await this.loadPdf())}async disconnectedCallback(){await super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.scrollThrottleTimeout&&(clearTimeout(this.scrollThrottleTimeout),this.scrollThrottleTimeout=void 0),this.renderState="disposed",await this.cleanupDocument(),this.canvas=void 0,this.ctx=void 0}async updated(Y){if(super.updated(Y),Y.has("pdfUrl")&&this.pdfUrl){let P=Y.get("pdfUrl");P&&Xr.releaseDocument(P),this.documentId=`${this.pdfUrl}-${Date.now()}-${Math.random()}`,await this.loadPdf()}Y.has("showSidebar")&&this.showSidebar&&this.pdfDocument&&(await new Promise(P=>requestAnimationFrame(P)),this.thumbnailData.forEach(P=>P.rendered=!1),await this.renderThumbnails(),this.setupIntersectionObserver(),this.scrollThumbnailIntoView(this.currentPage))}async loadPdf(){this.loading=!0,this.renderState="loading";try{await this.cleanupDocument(),this.renderAbortController=new AbortController;let Y=this.renderAbortController.signal;if(this.pdfDocument=await Xr.loadDocument(this.pdfUrl),Y.aborted||(this.totalPages=this.pdfDocument.numPages,this.currentPage=this.initialPage,this.resolveInitialViewportMode(),this.thumbnailData=Array.from({length:this.totalPages},(P,F)=>({page:F+1,rendered:!1})),this.pageData=Array.from({length:this.totalPages},(P,F)=>({page:F+1,rendered:!1,rendering:!1,textLayerRendered:!1})),this.loading=!1,await this.updateComplete,this.ensureViewerRefs(),this.setupIntersectionObserver(),await new Promise(P=>requestAnimationFrame(P)),Y.aborted)||(this.renderState="rendering-main",await this.renderVisiblePages(),Y.aborted)||(this.initialPage>1&&await this.scrollToPage(this.initialPage,!1),this.showSidebar&&(await this.updateComplete,await new Promise(P=>requestAnimationFrame(P)),Y.aborted||(await this.renderThumbnails(),Y.aborted))))return;this.renderState="rendered"}catch(Y){console.error("Error loading PDF:",Y),this.loading=!1,this.renderState="error"}}setupIntersectionObserver(){this.intersectionObserver&&this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(P=>{for(let F of P){let W=F.target,B=parseInt(W.dataset.page||"1");F.isIntersecting&&this.renderPageIfNeeded(B)}},{root:this.viewerMain,rootMargin:`${this.RENDER_BUFFER*100}px 0px`,threshold:.01});let Y=this.shadowRoot?.querySelectorAll(".page-wrapper");Y&&Y.forEach(P=>{this.intersectionObserver?.observe(P)})}async renderVisiblePages(){if(!this.viewerMain)return;let Y=this.viewerMain.clientHeight;for(let P of this.pageData){let F=this.shadowRoot?.querySelector(`.page-wrapper[data-page="${P.page}"]`);if(!F)continue;let W=F.getBoundingClientRect(),B=this.viewerMain.getBoundingClientRect(),K=W.top-B.top,ge=K+W.height,ve=this.RENDER_BUFFER*Y;ge>=-ve&&K<=Y+ve&&await this.renderPageIfNeeded(P.page)}}async renderPageIfNeeded(Y){let P=this.pageData.find(F=>F.page===Y);if(!(!P||P.rendered||P.rendering)){P.rendering=!0;try{let F=this.shadowRoot?.querySelector(`.page-canvas[data-page="${Y}"]`);if(!F){P.rendering=!1;return}let W=await this.pdfDocument.getPage(Y),B=this.computeViewport(W),K=window.devicePixelRatio||1;F.width=Math.floor(B.width*K),F.height=Math.floor(B.height*K),F.style.width=`${B.width}px`,F.style.height=`${B.height}px`;let ge=F.getContext("2d");if(!ge){W.cleanup?.(),P.rendering=!1;return}ge.scale(K,K);let ve={canvasContext:ge,viewport:B},$e=W.render(ve);this.pageRenderTasks.set(Y,$e),await $e.promise,W.cleanup?.(),P.rendered=!0,P.rendering=!1,this.pageRenderTasks.delete(Y),await this.renderTextLayer(Y),this.requestUpdate("pageData")}catch(F){F?.name!=="RenderingCancelledException"&&console.error(`Error rendering page ${Y}:`,F),P.rendering=!1,this.pageRenderTasks.delete(Y)}}}async renderTextLayer(Y){let P=this.pageData.find(F=>F.page===Y);if(!(!P||P.textLayerRendered))try{let F=this.shadowRoot?.querySelector(`.t
        <!DOCTYPE html>
        <html>
        <head>
          <title>Print PDF</title>
          <style>
            * { margin: 0; padding: 0; }
            html, body { width: 100%; height: 100%; overflow: hidden; }
            iframe { width: 100%; height: 100%; border: none; }
            @media print {
              html, body, iframe { width: 100%; height: 100%; }
            }
          </style>
        </head>
        <body>
          <iframe src="${F}" type="application/pdf"></iframe>
          <script>
            window.onload = function() {
              setTimeout(function() {
                window.focus();
                window.print();
              }, 500);
            };
            window.onafterprint = function() {
              window.close();
            };
            // Safety close after 2 minutes
            setTimeout(function() { window.close(); }, 120000);
          <\/script>
        </body>
        </html>
      `,B=new Blob([W],{type:"text/html"}),K=URL.createObjectURL(B),ge=window.open(K,"_blank","width=800,height=600");if(ge){let ve=setInterval(()=>{ge.closed&&(clearInterval(ve),URL.revokeObjectURL(F),URL.revokeObjectURL(K))},500);setTimeout(()=>{clearInterval(ve),URL.revokeObjectURL(F),URL.revokeObjectURL(K)},12e4)}else window.open(F,"_blank"),setTimeout(()=>URL.revokeObjectURL(F),6e4),URL.revokeObjectURL(K)}catch(Y){console.error("Error printing PDF:",Y)}}getContextMenuItems(){let Y=[],F=window.getSelection()?.toString()||"";return F&&(Y.push({name:"Copy",iconName:"lucide:Copy",action:async()=>{await navigator.clipboard.writeText(F)}}),Y.push({divider:!0})),Y.push({name:"Download PDF",iconName:"lucide:Download",action:async()=>{await this.downloadPdf()}},{name:"Print PDF",iconName:"lucide:Printer",action:async()=>{await this.printPdf()}}),Y}get canZoomIn(){return this.viewportMode!=="custom"||this.currentZoom<this.MANUAL_MAX_ZOOM}get canZoomOut(){return this.viewportMode!=="custom"||this.currentZoom>this.MANUAL_MIN_ZOOM}ensureViewerRefs(){this.viewerMain||(this.viewerMain=this.shadowRoot?.querySelector(".viewer-main")),this.viewerMain&&!this.resizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.measureViewportDimensions(),this.pdfDocument&&this.reRenderAllPages()}),this.resizeObserver.observe(this.viewerMain),this.measureViewportDimensions(),this.viewerMain.addEventListener("wheel",Y=>{let P=Y.currentTarget,F=P.scrollTop,W=P.scrollHeight,B=P.clientHeight,K=Y.deltaY,ge=F===0,ve=Math.abs(F+B-W)<1;K<0&&!ge||K>0&&!ve?Y.stopPropagation():(K<0&&ge||K>0&&ve)&&(Y.preventDefault(),Y.stopPropagation())},{passive:!1}))}measureViewportDimensions(){if(!this.viewerMain){this.viewportDimensions={width:0,height:0};return}let Y=getComputedStyle(this.viewerMain),P=parseFloat(Y.paddingLeft||"0")+parseFloat(Y.paddingRight||"0"),F=parseFloat(Y.paddingTop||"0")+parseFloat(Y.paddingBottom||"0"),W=Math.max(this.viewerMain.clientWidth-P,0),B=Math.max(this.viewerMain.clientHeight-F,0);this.viewportDimensions={width:W,height:B}}resolveInitialViewportMode(){typeof this.initialZoom=="number"?(this.viewportMode="custom",this.currentZoom=this.normalizeZoom(this.initialZoom,!0)):this.initialZoom==="page-width"?this.viewportMode="page-width":this.initialZoom==="page-fit"||this.initialZoom==="auto"?this.viewportMode="page-fit":this.viewportMode="auto",this.viewportMode!=="custom"&&(this.currentZoom=1)}computeViewport(Y){this.measureViewportDimensions();let P=Y.getViewport({scale:1}),F;switch(this.viewportMode){case"page-width":{F=(this.viewportDimensions.width||P.width)/P.width;break}case"page-fit":case"auto":{let B=this.viewportDimensions.width||P.width,K=this.viewportDimensions.height||P.height,ge=B/P.width,ve=K/P.height;F=Math.min(ge,ve);break}default:{F=this.normalizeZoom(this.currentZoom||1,!1);break}}(!Number.isFinite(F)||F<=0)&&(F=1);let W=this.viewportMode==="custom"?this.normalizeZoom(F,!0):this.normalizeZoom(F,!1);return this.viewportMode!=="custom"&&(this.currentZoom=W),Y.getViewport({scale:W})}normalizeZoom(Y,P){let F=P?this.MANUAL_MIN_ZOOM:this.ABSOLUTE_MIN_ZOOM,W=P?this.MANUAL_MAX_ZOOM:this.ABSOLUTE_MAX_ZOOM;return Math.min(Math.max(Y,F),W)}async cleanupDocument(){if(this.renderAbortController&&(this.renderAbortController.abort(),this.renderAbortController=null),this.currentRenderPromise){try{await this.currentRenderPromise}catch{}this.currentRenderPromise=null}this.currentRenderTask=null,this.pageRenderTasks.forEach(Y=>{try{Y.cancel()}catch{}}),this.pageRenderTasks.clear(),this.textLayerRenderTasks.forEach(Y=>{try{Y.cancel?.()}catch{}}),this.textLayerRenderTasks.clear();for(let Y of this.thumbnailRenderTasks||[])try{Y.cancel()}catch{}if(this.thumbnailRenderTasks=[],this.renderState="idle",this.pageRendering=!1,this.pageNumPending=null,this.thumbnailData=[],this.pageData=[],this.documentId="",this.canvas&&this.ctx&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.pdfDocument)try{this.pdfDocument.destroy()}catch(Y){console.error("Error destroying PDF document:",Y)}this.pdfDocument=null,this.requestUpdate()}st
  <style>
    .demo-container {
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .section {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 16px;
    }

    .preview-image {
      height: 400px;
    }

    .preview-pdf {
      height: 600px;
    }
  </style>

  <div class="demo-container">
    <div class="section">
      <div class="section-title">Image Preview (URL)</div>
      <div class="section-description">Auto-detects image from URL extension and renders with the image viewer.</div>
      <dees-preview
        class="preview-image"
        url="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200"
        filename="landscape.jpg"
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">PDF Preview (URL)</div>
      <div class="section-description">Auto-detects PDF and displays with the PDF viewer including toolbar.</div>
      <dees-preview
        class="preview-pdf"
        url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        filename="research-paper.pdf"
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">Code Preview (Text Content)</div>
      <div class="section-description">TypeScript code displayed with syntax highlighting via the codebox.</div>
      <dees-preview
        filename="example.ts"
        language="typescript"
        .textContent=${`import { html, css } from 'lit';

export class MyComponent extends LitElement {
  static styles = css\`
    :host {
      display: block;
      padding: 16px;
    }
  \`;

  render() {
    return html\`<h1>Hello World</h1>\`;
  }
}`}
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">Audio Preview (URL)</div>
      <div class="section-description">Audio file detected by extension, shown with waveform player.</div>
      <dees-preview
        url="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
        filename="song.mp3"
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">Video Preview (URL)</div>
      <div class="section-description">Video file detected from URL, rendered with custom video controls.</div>
      <dees-preview
        url="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        filename="big-buck-bunny.mp4"
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">Explicit Type Override</div>
      <div class="section-description">Force content type to 'text' even though the URL has no extension.</div>
      <dees-preview
        contentType="text"
        .textContent=${`This is plain text content.
It preserves whitespace and line breaks.

Useful for log files, READMEs, etc.`}
        filename="notes.txt"
      ></dees-preview>
    </div>

    <div class="section">
      <div class="section-title">Unknown Type</div>
      <div class="section-description">When content type cannot be detected, shows a placeholder.</div>
      <dees-preview
        filename="data.bin"
        contentType="unknown"
      ></dees-preview>
    </div>
  </div>
`});var L2,Bt,jvt,DWt,AWt,EWt,Uvt,Wvt=v(()=>{oe();dj();pj();uj();FV();hj();At();Vvt();L2=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Bt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},jvt={jpg:"image",jpeg:"image",png:"image",gif:"image",webp:"image",svg:"image",bmp:"image",avif:"image",ico:"image",pdf:"pdf",mp3:"audio",wav:"audio",ogg:"audio",flac:"audio",aac:"audio",m4a:"audio",opus:"audio",weba:"audio",mp4:"video",webm:"video",mov:"video",avi:"video",mkv:"video",ogv:"video",ts:"code",js:"code",jsx:"code",tsx:"code",json:"code",html:"code",css:"code",scss:"code",less:"code",py:"code",java:"code",go:"code",rs:"code",yaml:"code",yml:"code",xml:"code",sql:"code",sh:"code",bash:"code",zsh:"code",md:"code",c:"code",cpp:"code",h:"code",hpp:"code",rb:"code",php:"code",swift:"code",kt:"code",txt:"text",log:"text",csv:"text",env:"text"},DWt={"image/":"image","audio/":"audio","video/":"video","application/pdf":"pdf"},AWt={ts:"typescript",tsx:"typescript",js:"javascript",jsx:"javascript",json:"json",html:"xml",xml:"xml",css:"css",scss:"scss",less:"less",py:"python",java:"java",go:"go",rs:"rust",yaml:"yaml",yml:"yaml",sql:"sql",sh:"bash",bash:"bash",zsh:"bash",c:"c",cpp:"cpp",h:"c",hpp:"cpp",rb:"ruby",php:"php",swift:"swift",kt:"kotlin",md:"markdown"},EWt={image:"lucide:Image",pdf:"lucide:FileText",audio:"lucide:Music",video:"lucide:Video",code:"lucide:Code",text:"lucide:FileText",unknown:"lucide:File"},Uvt=(()=>{let t=[Q("dees-preview")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[],$e,q=[],R=[];var te=class extends r{static{i=this}static{let me=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D({attribute:!1})],l=[D()],y=[D()],x=[D()],N=[D()],I=[D()],V=[D()],E=[D({type:Boolean})],H=[D({type:Boolean})],ne=[J()],we=[J()],Ce=[J()],F=[J()],K=[J()],$e=[J()],L2(this,null,n,{kind:"accessor",name:"url",static:!1,private:!1,access:{has:ue=>"url"in ue,get:ue=>ue.url,set:(ue,_e)=>{ue.url=_e}},metadata:me},s,o),L2(this,null,u,{kind:"accessor",name:"file",static:!1,private:!1,access:{has:ue=>"file"in ue,get:ue=>ue.file,set:(ue,_e)=>{ue.file=_e}},metadata:me},c,d),L2(this,null,l,{kind:"accessor",name:"base64",static:!1,private:!1,access:{has:ue=>"base64"in ue,get:ue=>ue.base64,set:(ue,_e)=>{ue.base64=_e}},metadata:me},f,b),L2(this,null,y,{kind:"accessor",name:"textContent",static:!1,private:!1,access:{has:ue=>"textContent"in ue,get:ue=>ue.textContent,set:(ue,_e)=>{ue.textContent=_e}},metadata:me},g,h),L2(this,null,x,{kind:"accessor",name:"contentType",static:!1,private:!1,access:{has:ue=>"contentType"in ue,get:ue=>ue.contentType,set:(ue,_e)=>{ue.contentType=_e}},metadata:me},M,S),L2(this,null,N,{kind:"accessor",name:"language",static:!1,private:!1,access:{has:ue=>"language"in ue,get:ue=>ue.language,set:(ue,_e)=>{ue.language=_e}},metadata:me},_,k),L2(this,null,I,{kind:"accessor",name:"mimeType",static:!1,private:!1,access:{has:ue=>"mimeType"in ue,get:ue=>ue.mimeType,set:(ue,_e)=>{ue.mimeType=_e}},metadata:me},L,A),L2(this,null,V,{kind:"accessor",name:"filenam
      <style>
        :host {
          display: block;
          position: relative;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .preview-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
          border-radius: 8px;
          overflow: hidden;
          background: ${p.bdTheme("#ffffff","#09090b")};
        }

        .header-bar {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 0 16px;
          height: 40px;
          background: ${p.bdTheme("#f9fafb","hsl(215 20% 15%)")};
          border-bottom: 1px solid ${p.bdTheme("#e5e7eb","hsl(217 25% 22%)")};
          flex-shrink: 0;
        }

        .header-icon {
          color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
          flex-shrink: 0;
          font-size: 16px;
        }

        .header-filename {
          font-size: 13px;
          font-weight: 500;
          color: ${p.bdTheme("#09090b","#fafafa")};
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
        }

        .header-badge {
          font-size: 11px;
          font-weight: 500;
          padding: 2px 8px;
          border-radius: 4px;
          background: ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(59, 130, 246, 0.15)")};
          color: ${p.bdTheme("#3b82f6","#60a5fa")};
          text-transform: uppercase;
          flex-shrink: 0;
        }

        .content-area {
          flex: 1;
          overflow: hidden;
          position: relative;
          min-height: 200px;
        }

        .content-area > * {
          width: 100%;
          height: 100%;
        }

        dees-image-viewer {
          display: block;
          height: 100%;
        }

        dees-pdf-viewer {
          display: block;
          height: 100%;
        }

        dees-video-viewer {
          display: block;
        }

        dees-audio-viewer {
          display: block;
          height: 100%;
        }

        dees-dataview-codebox {
          display: block;
        }

        .text-viewer {
          margin: 0;
          padding: 16px;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          font-size: 13px;
          line-height: 1.5;
          color: ${p.bdTheme("#09090b","#fafafa")};
          white-space: pre-wrap;
          word-wrap: break-word;
          overflow: auto;
          height: 100%;
          box-sizing: border-box;
        }

        .placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;
          height: 100%;
          min-height: 200px;
          color: ${p.bdTheme("#a1a1aa","#71717a")};
        }

        .placeholder dees-icon {
          opacity: 0.5;
          font-size: 32px;
        }

        .placeholder-text {
          font-size: 14px;
        }

        .loading-container {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          min-height: 200px;
        }

        .loading-spinner {
          width: 32px;
          height: 32px;
          border: 3px solid ${p.bdTheme("#e5e7eb","#3f3f46")};
          border-top-color: ${p.bdTheme("#3b82f6","#60a5fa")};
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        .error-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          height: 100%;
          min-height: 200px;
          color: ${p.bdTheme("#dc2626","#f87171")};
        }

        .error-container dees-icon {
          font-size: 32px;
        }

        .error-text {
          font-size: 13px;
        }
      </style>

      <div class="preview-container">
        ${this.showFilename&&me?w`
          <div class="header-bar">
            <dees-icon class="header-icon" icon="${EWt[this.resolvedType]}"></dees-icon>
            <span class="header-filename">${me}</span>
            <span class="header-badge">${this.resolvedType}</span>
          </div>
        `:""}

        <div class="content-area">
          ${this.error?w`
            <div class="error-container">
              <dees-icon icon="lucide:AlertTriangle"></dees-icon>
              <span class="error-text">${this.error}</span>
            </div>
          `:this.loading?w`
            <div class="loading-container">
              <div class="loading-spinner"></div>
            </div>
          `:this.renderContent()}
        </div>
      </div>
    `}renderContent(){switch(this.resolvedType){case"image":return w`
          <dees-image-viewer
            .src=${this.resolvedSrc}
            .showToolbar=${this.showToolbar}
            alt="${this.filename||""}"
          ></dees-image-viewer>
        `;case"pdf":return w`
          <dees-pdf-viewer
            .pdfUrl=${this.resolvedSrc}
            .showToolbar=${this.showToolbar}
            initialZoom="page-fit"
          ></dees-pdf-viewer>
        `;case"audio":return w`
          <dees-audio-viewer
            .src=${this.resolvedSrc}
            .title=${this.filename||this.file?.name||""}
          ></dees-audio-viewer>
        `;case"video":return w`
          <dees-video-viewer
            .src=${this.resolvedSrc}
          ></dees-video-viewer>
        `;case"code":return w`
          <dees-dataview-codebox
            .progLang=${this.resolvedLang}
            .codeToDisplay=${this.resolvedText}
          ></dees-dataview-codebox>
        `;case"text":return w`<pre class="text-viewer">${this.resolvedText}</pre>`;default:return w`
          <div class="placeholder">
            <dees-icon icon="lucide:FileQuestion"></dees-icon>
            <span class="placeholder-text">Preview not available</span>
          </div>
        `}}async updated(me){super.updated(me),["url","file","base64","textContent","contentType","language","mimeType","filename"].some(he=>me.has(he))&&await this.resolveContent()}async disconnectedCallback(){await super.disconnectedCallback(),this.revokeObjectUrl()}async resolveContent(){this.error="",this.revokeObjectUrl(),this.resolvedType=this.detectType();try{if(this.url){if(this.resolvedSrc=this.url,this.resolvedType==="code"||this.resolvedType==="text")if(this.textContent)this.resolvedText=this.textContent;else{this.loading=!0;let me=await fetch(this.url);this.resolvedText=await me.text(),this.loading=!1}}else if(this.file)this.objectUrl=URL.createObjectURL(this.file),this.resolvedSrc=this.objectUrl,(this.resolvedType==="code"||this.resolvedType==="text")&&(this.loading=!0,this.resolvedText=await this.file.text(),this.loading=!1);else if(this.base64){let me=this.mimeType||"application/octet-stream";this.resolvedSrc=`data:${me};base64,${this.base64}`}else this.textContent&&(this.resolvedText=this.textContent)}catch{this.error="Failed to load content",this.loading=!1}this.resolvedLang=this.resolveLanguage()}detectType(){if(this.contentType)return this.contentType;let me=this.mimeType||this.file?.type||"";if(me){if(me==="application/pdf")return"pdf";for(let[_e,he]of Object.entries(DWt))if(me.startsWith(_e))return he;if(me.startsWith("text/"))return"text"}let ue=this.getExtension();return ue&&jvt[ue]?jvt[ue]:this.textContent?this.language?"code":"text":"unknown"}getExtension(){let me=this.filename||this.file?.name||"";if(me){let ue=me.split(".");if(ue.length>1)return ue.pop().toLowerCase()}if(this.url)try{let _e=new URL(this.url,"https://placeholder.com").pathname.split(".");if(_e.length>1)return _e.pop().toLowerCase()}catch{}return""}getFilenameFromUrl(){if(!this.url)return"";try{return new URL(this.url,"https://placeholder.com").pathname.split("/").pop()||""}catch{return""}}resolveLanguage(){if(this.language)return this.language;let me=this.getExtension();return AWt[me]||"text"}revokeObjectUrl(){this.objectUrl&&(URL.revokeObjectURL(this.objectUrl),this.objectUrl="")}static{Bt(i,a)}};return te=i})()});var Gvt=v(()=>{Wvt()});var Yvt,fj,Zvt,Xvt=v(()=>{oe();b2();r2();At();Yvt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},fj=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Zvt=(()=>{let t=[Q("dees-pdf")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],Yvt(this,null,n,{kind:"accessor",name:"pdfUrl",static:!1,private:!1,access:{has:d=>"pdfUrl"in d,get:d=>d.pdfUrl,set:(d,l)=>{d.pdfUrl=l}},metadata:c},s,o),Yvt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w` <dees-pdf></dees-pdf> `;static demoGroups=["Media","PDF"];#e=fj(this,s,"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");get pdfUrl(){return this.#e}set pdfUrl(c){this.#e=c}constructor(){super(),fj(this,o)}render(){return w`
      <style>
        :host {
          font-family: 'Geist Sans', sans-serif;
          display: block;
          box-sizing: border-box;
          max-width: 800px;
        }
        :host([hidden]) {
          display: none;
        }

        #pdfcanvas {
          box-shadow: 0px 0px 5px #ccc;
          width: 100%;
          cursor: pointer;
        }
      </style>
      <canvas
        id="pdfcanvas"
        .height=${0}
        .width=${0}

      ></canvas>
    `}static pdfJsReady;static pdfjsLib;async connectedCallback(){if(super.connectedCallback(),!u.pdfJsReady){let c=rt.plugins.smartpromise.defer();u.pdfJsReady=c.promise,u.pdfjsLib=await import("https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm"),u.pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs",c.resolve()}await u.pdfJsReady,this.displayContent()}async displayContent(){await u.pdfJsReady,u.pdfjsLib.getDocument(this.pdfUrl).promise.then(d=>{console.log("PDF loaded"),d.getPage(1).then(f=>{console.log("Page loaded");let y=f.getViewport({scale:10}),g=this.shadowRoot.querySelector("#pdfcanvas"),h=g.getContext("2d");g.height=y.height,g.width=y.width;let x={canvasContext:h,viewport:y};f.render(x).promise.then(function(){console.log("Page rendered")})})},d=>{console.error(d)})}getContextMenuItems(){return[{name:"Open PDF in New Tab",iconName:"lucide:ExternalLink",action:async()=>{window.open(this.pdfUrl,"_blank")}},{divider:!0},{name:"Copy PDF URL",iconName:"lucide:Copy",action:async()=>{await navigator.clipboard.writeText(this.pdfUrl)}},{name:"Download PDF",iconName:"lucide:Download",action:async()=>{let c=document.createElement("a");c.href=this.pdfUrl,c.download=this.pdfUrl.split("/").pop()||"document.pdf",c.click()}}]}static{fj(i,a)}};return u=i})()});var Kvt=v(()=>{Xvt()});var J2,Ks=v(()=>{oe();J2=[p.defaultStyles,X`
    :host {
      display: inline-block;
      position: relative;
    }

    .tile-container {
      position: relative;
      width: 200px;
      height: 260px;
      background: ${p.bdTheme("hsl(0 0% 98%)","hsl(215 20% 14%)")};
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 1px 3px ${p.bdTheme("rgba(0, 0, 0, 0.12)","rgba(0, 0, 0, 0.24)")};
    }

    .tile-container.clickable {
      cursor: pointer;
    }

    .tile-container.clickable:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px ${p.bdTheme("rgba(0, 0, 0, 0.12)","rgba(0, 0, 0, 0.3)")};
    }

    .tile-container.clickable:hover .tile-overlay {
      opacity: 1;
    }

    .tile-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: hidden;
    }

    .tile-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: ${p.bdTheme("rgba(0, 0, 0, 0.7)","rgba(0, 0, 0, 0.8)")};
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 20;
    }

    .tile-overlay dees-icon {
      font-size: 24px;
      color: white;
    }

    .tile-overlay span {
      font-size: 14px;
      font-weight: 500;
      color: white;
    }

    .tile-info {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      padding: 6px 10px;
      background: ${p.bdTheme("hsl(0 0% 100% / 0.92)","hsl(215 20% 12% / 0.92)")};
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
      backdrop-filter: blur(12px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 10;
    }

    .tile-info dees-icon {
      font-size: 13px;
      color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
    }

    .tile-info-text {
      font-weight: 500;
      font-size: 11px;
    }

    .tile-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      padding: 5px 8px;
      background: ${p.bdTheme("hsl(0 0% 0% / 0.7)","hsl(0 0% 100% / 0.9)")};
      color: ${p.bdTheme("white","hsl(215 20% 12%)")};
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      backdrop-filter: blur(12px);
      z-index: 15;
      pointer-events: none;
      animation: fadeIn 0.2s ease;
    }

    .tile-badge-corner {
      position: absolute;
      bottom: 8px;
      right: 8px;
      padding: 3px 8px;
      background: ${p.bdTheme("hsl(0 0% 0% / 0.6)","hsl(0 0% 100% / 0.85)")};
      color: ${p.bdTheme("white","hsl(215 20% 12%)")};
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      backdrop-filter: blur(8px);
      z-index: 10;
      pointer-events: none;
    }

    .tile-badge-topright {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 3px 8px;
      background: ${p.bdTheme("hsl(0 0% 0% / 0.6)","hsl(0 0% 100% / 0.85)")};
      color: ${p.bdTheme("white","hsl(215 20% 12%)")};
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      backdrop-filter: blur(8px);
      z-index: 15;
      pointer-events: none;
    }

    /* Shift bottom badges up when label is present */
    .tile-container:has(.tile-label) .tile-badge-corner {
      bottom: 33px;
    }

    .tile-container:has(.tile-label) .tile-info {
      bottom: 33px;
    }

    .tile-loading,
    .tile-error {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: ${p.bdTheme("hsl(215 16% 45%)","hsl(215 16% 75%)")};
    }

    .tile-loading {
      background: ${p.bdTheme("hsl(0 0% 99%)","hsl(215 20% 14%)")};
    }

    .tile-error {
      background: ${p.bdTheme("hsl(0 72% 98%)","hsl(0 62% 20%)")};
      color: ${p.bdTheme("hsl(0 72% 40%)","hsl(0 70% 68%)")};
    }

    .tile-error dees-icon {
      font-size: 32px;
    }

    .tile-spinner {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid ${p.bdTheme("hsl(214 31% 86%)","hsl(217 25% 28%)")};
      border-top-color: ${p.bdTheme("hsl(217 91% 60%)","hsl(213 93% 68%)")};
      animation: spin 0.8s linear infinite;
    }

    .tile-loading-text,
    .tile-error-text {
      font-size: 13px;
      font-weight: 500;
    }

    .tile-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 10px;
      background: ${p.bdTheme("hsl(0 0% 100% / 0.95)","hsl(215 20% 12% / 0.95)")};
      font-size: 11px;
      font-weight: 500;
      color: ${p.bdTheme("hsl(215 16% 35%)","hsl(215 16% 75%)")};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 10;
      backdrop-filter: blur(12px);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Size variants */
    :host([size="small"]) .tile-container {
      width: 150px;
      height: 195px;
    }

    :host([size="large"]) .tile-container {
      width: 250px;
      height: 325px;
    }

    /* Grid optimizations */
    :host([grid-mode]) .tile-container {
      will-change: auto;
    }
  `]});var f8,Kr,ga,To=v(()=>{oe();Ks();At();f8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Kr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ga=(()=>{let t=de,e,a=[],i=[],r,n=[],s=[],o,u=[],c=[],d,l=[],f=[],b,y=[],g=[];return class extends t{static{let x=typeof Symbol=="function"&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;e=[D({type:Boolean})],r=[D({type:Boolean})],o=[D({type:Boolean})],d=[D({type:String,reflect:!0})],b=[D({type:String})],f8(this,null,e,{kind:"accessor",name:"clickable",static:!1,private:!1,access:{has:M=>"clickable"in M,get:M=>M.clickable,set:(M,S)=>{M.clickable=S}},metadata:x},a,i),f8(this,null,r,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:M=>"loading"in M,get:M=>M.loading,set:(M,S)=>{M.loading=S}},metadata:x},n,s),f8(this,null,o,{kind:"accessor",name:"error",static:!1,private:!1,access:{has:M=>"error"in M,get:M=>M.error,set:(M,S)=>{M.error=S}},metadata:x},u,c),f8(this,null,d,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:M=>"size"in M,get:M=>M.size,set:(M,S)=>{M.size=S}},metadata:x},l,f),f8(this,null,b,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:M=>"label"in M,get:M=>M.label,set:(M,S)=>{M.label=S}},metadata:x},y,g),x&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:x})}static styles=J2;#e=Kr(this,a,!0);get clickable(){return this.#e}set clickable(x){this.#e=x}#t=(Kr(this,i),Kr(this,n,!1));get loading(){return this.#t}set loading(x){this.#t=x}#a=(Kr(this,s),Kr(this,u,!1));get error(){return this.#a}set error(x){this.#a=x}#i=(Kr(this,c),Kr(this,l,"default"));get size(){return this.#i}set size(x){this.#i=x}#r=(Kr(this,f),Kr(this,y,""));get label(){return this.#r}set label(x){this.#r=x}observer=Kr(this,g);_visible=!1;get isVisible(){return this._visible}render(){return w`
      <div
        class="tile-container ${this.clickable?"clickable":""} ${this.loading?"loading":""} ${this.error?"error":""}"
        @click=${this.handleTileClick}
        @mouseenter=${this.onTileMouseEnter}
        @mouseleave=${this.onTileMouseLeave}
        @mousemove=${this.onTileMouseMove}
      >
        ${this.loading?w`
          <div class="tile-loading">
            <div class="tile-spinner"></div>
            <div class="tile-loading-text">Loading...</div>
          </div>
        `:""}

        ${this.error?w`
          <div class="tile-error">
            <dees-icon icon="lucide:AlertTriangle"></dees-icon>
            <div class="tile-error-text">Failed to load</div>
          </div>
        `:""}

        ${!this.loading&&!this.error?this.renderTileContent():""}

        ${this.label?w`
          <div class="tile-label">${this.label}</div>
        `:""}
      </div>
    `}async connectedCallback(){await super.connectedCallback(),this.setupIntersectionObserver()}async disconnectedCallback(){await super.disconnectedCallback(),this.observer&&(this.observer.disconnect(),this.observer=void 0)}setupIntersectionObserver(){this.observer=new IntersectionObserver(x=>{for(let M of x){let S=this._visible;this._visible=M.isIntersecting,this._visible&&!S&&this.onBecameVisible()}},{root:null,rootMargin:"200px",threshold:.01}),this.observer.observe(this)}onBecameVisible(){}onTileMouseEnter(){}onTileMouseLeave(){}onTileMouseMove(x){}handleTileClick(){this.clickable&&this.dispatchEvent(new CustomEvent("tile-click",{detail:this.getTileClickDetail(),bubbles:!0,composed:!0}))}getTileClickDetail(){return{}}}})()});var J4,mj=v(()=>{J4=class{static pool=[];static maxPoolSize=20;static MIN_CANVAS_SIZE=256;static MAX_CANVAS_SIZE=4096;static acquire(e,a){let i=this.pool.find(o=>!o.inUse&&o.canvas.width>=e&&o.canvas.height>=a&&o.canvas.width<=e*1.5&&o.canvas.height<=a*1.5);if(i)return i.inUse=!0,i.lastUsed=Date.now(),i.canvas.width=e,i.canvas.height=a,i.ctx.clearRect(0,0,e,a),i;if(this.pool.length<this.maxPoolSize){let o=document.createElement("canvas"),u=o.getContext("2d",{alpha:!0,desynchronized:!0});o.width=Math.min(Math.max(e,this.MIN_CANVAS_SIZE),this.MAX_CANVAS_SIZE),o.height=Math.min(Math.max(a,this.MIN_CANVAS_SIZE),this.MAX_CANVAS_SIZE);let c={canvas:o,ctx:u,inUse:!0,lastUsed:Date.now()};return this.pool.push(c),c}let r=this.pool.filter(o=>!o.inUse).sort((o,u)=>o.lastUsed-u.lastUsed)[0];if(r)return r.canvas.width=e,r.canvas.height=a,r.ctx.clearRect(0,0,e,a),r.inUse=!0,r.lastUsed=Date.now(),r;let n=document.createElement("canvas"),s=n.getContext("2d");return n.width=e,n.height=a,{canvas:n,ctx:s,inUse:!0,lastUsed:Date.now()}}static release(e){this.pool.includes(e)&&(e.inUse=!1,e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height))}static releaseAll(){for(let e of this.pool)e.inUse=!1,e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height)}static destroy(){for(let e of this.pool)e.canvas.width=0,e.canvas.height=0;this.pool=[]}static getStats(){return{poolSize:this.pool.length,maxPoolSize:this.maxPoolSize,inUse:this.pool.filter(e=>e.inUse).length,available:this.pool.filter(e=>!e.inUse).length}}static adjustPoolSize(e){if(e<this.pool.length){let a=this.pool.length-e,i=this.pool.filter(r=>!r.inUse).slice(0,a);for(let r of i){let n=this.pool.indexOf(r);n>-1&&this.pool.splice(n,1)}}this.maxPoolSize=e}}});function PWt(t,e){let a;return function(...r){let n=()=>{clearTimeout(a),t(...r)};clearTimeout(a),a=window.setTimeout(n,e)}}function IWt(t,e){let a;return function(...r){a||(t.apply(this,r),a=!0,setTimeout(()=>a=!1,e))}}function NWt(t){if(t===0)return"0 Bytes";let e=1024,a=["Bytes","KB","MB","GB"],i=Math.floor(Math.log(t)/Math.log(e));return Math.round(t/Math.pow(e,i)*100)/100+" "+a[i]}function RWt(t,e=0){let a=t.getBoundingClientRect();return a.top>=-e&&a.left>=-e&&a.bottom<=(window.innerHeight||document.documentElement.clientHeight)+e&&a.right<=(window.innerWidth||document.documentElement.clientWidth)+e}var e3,gj=v(()=>{e3=class{static marks=new Map;static measures=[];static mark(e){this.marks.set(e,performance.now())}static measure(e,a){let i=this.marks.get(a);if(i){let r=performance.now()-i;return this.measures.push({name:e,duration:r}),this.marks.delete(a),r}return 0}static getReport(){let e={measures:[...this.measures],averages:{}},a=new Map;for(let i of this.measures)a.has(i.name)||a.set(i.name,[]),a.get(i.name).push(i.duration);for(let[i,r]of a)e.averages[i]=r.reduce((n,s)=>n+s,0)/r.length;return e}static clear(){this.marks.clear(),this.measures=[]}}});var Qvt,Jvt=v(()=>{oe();Qvt=X`
  .preview-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  .preview-stack.non-a4 {
    padding: 12px;
  }

  .preview-canvas {
    position: relative;
    background: white;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    box-shadow: 0 1px 3px ${p.bdTheme("rgba(0, 0, 0, 0.1)","rgba(0, 0, 0, 0.3)")};
  }

  .non-a4 .preview-canvas {
    border: 1px solid ${p.bdTheme("hsl(214 31% 92%)","hsl(217 25% 24%)")};
    border-radius: 4px;
  }

  /* Grid optimizations */
  :host([grid-mode]) .preview-canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
`});var eyt,tyt=v(()=>{oe();eyt=()=>{let t=["https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf","https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"];return w`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }

      .demo-section {
        margin-bottom: 60px;
      }

      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }

      .preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 24px;
      }

      .preview-row {
        display: flex;
        gap: 24px;
        align-items: center;
        margin-bottom: 20px;
      }

      .preview-label {
        font-size: 14px;
        font-weight: 500;
        min-width: 100px;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Single PDF Tile</h3>
        <dees-tile-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          clickable="true"
        ></dees-tile-pdf>
      </div>

      <div class="demo-section">
        <h3>Different Sizes</h3>
        <div class="preview-row">
          <div class="preview-label">Small:</div>
          <dees-tile-pdf
            size="small"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
          ></dees-tile-pdf>
        </div>

        <div class="preview-row">
          <div class="preview-label">Default:</div>
          <dees-tile-pdf
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
          ></dees-tile-pdf>
        </div>

        <div class="preview-row">
          <div class="preview-label">Large:</div>
          <dees-tile-pdf
            size="large"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            clickable="true"
          ></dees-tile-pdf>
        </div>
      </div>

      <div class="demo-section">
        <h3>With Label</h3>
        <dees-tile-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          clickable="true"
          label="Research Paper.pdf"
        ></dees-tile-pdf>
      </div>

      <div class="demo-section">
        <h3>Non-Clickable</h3>
        <dees-tile-pdf
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
          clickable="false"
        ></dees-tile-pdf>
      </div>

      <div class="demo-section">
        <h3>Grid - 20 PDFs with Lazy Loading</h3>
        <div class="preview-grid">
          ${(a=>{let i=[];for(let r=0;r<a;r++){let n=t[r%t.length];i.push(w`
        <dees-tile-pdf
          pdfUrl="${n}"
          clickable="true"
          grid-mode
          @tile-click=${s=>{console.log("PDF Tile clicked:",s.detail),alert(`PDF clicked: ${s.detail.pageCount} pages`)}}
        ></dees-tile-pdf>
      `)}return i})(20)}
        </div>
      </div>
    </div>
  `}});var wl,ei,Iw,bj=v(()=>{oe();To();Ks();Pw();mj();gj();Jvt();tyt();wl=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ei=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Iw=(()=>{let t=[Q("dees-tile-pdf")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[];var I=class extends r{static{i=this}static{let L=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:Number})],l=[D({type:Number})],y=[D({type:Boolean})],x=[D({type:Boolean})],N=[D({type:Boolean})],wl(this,null,n,{kind:"accessor",name:"pdfUrl",static:!1,private:!1,access:{has:A=>"pdfUrl"in A,get:A=>A.pdfUrl,set:(A,V)=>{A.pdfUrl=V}},metadata:L},s,o),wl(this,null,u,{kind:"accessor",name:"currentPreviewPage",static:!1,private:!1,access:{has:A=>"currentPreviewPage"in A,get:A=>A.currentPreviewPage,set:(A,V)=>{A.currentPreviewPage=V}},metadata:L},c,d),wl(this,null,l,{kind:"accessor",name:"pageCount",static:!1,private:!1,access:{has:A=>"pageCount"in A,get:A=>A.pageCount,set:(A,V)=>{A.pageCount=V}},metadata:L},f,b),wl(this,null,y,{kind:"accessor",name:"rendered",static:!1,private:!1,access:{has:A=>"rendered"in A,get:A=>A.rendered,set:(A,V)=>{A.rendered=V}},metadata:L},g,h),wl(this,null,x,{kind:"accessor",name:"isHovering",static:!1,private:!1,access:{has:A=>"isHovering"in A,get:A=>A.isHovering,set:(A,V)=>{A.isHovering=V}},metadata:L},M,S),wl(this,null,N,{kind:"accessor",name:"isA4Format",static:!1,private:!1,access:{has:A=>"isA4Format"in A,get:A=>A.isA4Format,set:(A,V)=>{A.isA4Format=V}},metadata:L},_,k),wl(null,e={value:i},t,{kind:"class",name:i.name,metadata:L},null,a),I=i=e.value,L&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:L})}static demo=eyt;static demoGroups=["Media","PDF"];static styles=[...J2,Qvt];#e=ei(this,s,"");get pdfUrl(){return this.#e}set pdfUrl(L){this.#e=L}#t=(ei(this,o),ei(this,c,1));get currentPreviewPage(){return this.#t}set currentPreviewPage(L){this.#t=L}#a=(ei(this,d),ei(this,f,0));get pageCount(){return this.#a}set pageCount(L){this.#a=L}#i=(ei(this,b),ei(this,g,!1));get rendered(){return this.#i}set rendered(L){this.#i=L}#r=(ei(this,h),ei(this,M,!1));get isHovering(){return this.#r}set isHovering(L){this.#r=L}#s=(ei(this,S),ei(this,_,!0));get isA4Format(){return this.#s}set isA4Format(L){this.#s=L}renderPagesTask=(ei(this,k),null);renderPagesQueued=!1;pdfDocument;canvases=[];resizeObserver;stackElement=null;loadedPdfUrl=null;renderTileContent(){return w`
      <div class="preview-stack ${this.isA4Format?"":"non-a4"}">
        <canvas
          class="preview-canvas"
          data-page="${this.currentPreviewPage}"
        ></canvas>
      </div>

      ${this.pageCount>1&&this.isHovering?w`
        <div class="tile-badge">
          Page ${this.currentPreviewPage} of ${this.pageCount}
        </div>
      `:""}

      ${this.pageCount>0&&!this.isHovering?w`
        <div class="tile-badge-corner">
          ${this.pageCount} page${this.pageCount>1?"s":""}
        </div>
      `:""}

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:Eye"></dees-icon>
          <span>View PDF</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{pdfUrl:this.pdfUrl,pageCount:this.pageCount}}onBecameVisible(){!this.rendered&&this.pdfUrl&&this.loadAndRenderPreview()}onTileMouseEnter(){this.isHovering=!0}onTileMouseLeave(){this.isHovering=!1,this.currentPreviewPage!==1&&(this.currentPreviewPage=1,this.scheduleRenderPages())}onTileMouseMove(L){if(!this.isHovering||this.pageCount<=1)return;let A=this.getBoundingClientRect(),V=L.clientX-A.left,C=A.width,z=Math.max(0,Math.min(1,V/C)),E=Math.ceil(z*this.pageCount)||1;E!==this.currentPreviewPage&&(this.currentPreviewPage=E,this.scheduleRenderPages())}async connectedCallback(){await super.connectedCallback(),await this.updateComplete,this.cacheElements(),this.setupResizeObserver()}async disconnectedCallback(){await super.disconnectedCallback(),this.cleanup(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0}async loadAndRenderPreview(){if(!(this.rendered||this.loading)){this.loading=!0,this.error=!1,e3.mark(`preview-load-${this.pdfUrl}`);try{this.pdfDocument=await Xr.loadDocument(this.pdfUrl),this.pageCount=this.pdfDocument.numPages,this.currentPreviewPage=1,this.loadedPdfUrl=this.pdfUrl,this.loading=!1,await this.updateComplete,this.cacheElements(),await this.scheduleRenderPages(),this.rendered=!0;let L=e3.measure(`preview-render-${this.pdfUrl}`,`preview-load-${this.pdfUrl}`);console.log(`PDF tile rendered in ${L}ms`)}catch(L){console.error("Failed to load PDF tile:",L),this.error=!0,this.loading=!1}}}scheduleRenderPages(){return this.pdfDocument?this.renderPagesTask?(this.renderPagesQueued=!0,this.renderPagesTask):(this.renderPagesTask=(async()=>{try{await this.performRenderPages()}catch(L){console.error("Failed to render PDF tile pages:",L)}})().finally(()=>{this.renderPagesTask=null,this.renderPagesQueued&&(this.renderPagesQueued=!1,this.scheduleRenderPages())}),this.renderPagesTask):Promise.resolve()}async performRenderPages(){if(!this.pdfDocument)return;await new Promise(C=>requestAnimationFrame(C));let L=this.shadowRoot?.querySelector(".preview-canvas");if(!L)return;this.clearCanvases(),this.cacheElements();let{availableWidth:A,availableHeight:V}=this.getAvailableSize();try{let C=this.currentPreviewPage,z=await this.pdfDocument.getPage(C),E=z.getViewport({scale:1}),T=E.height/E.width,$=1.414,H=.707,O=1.294,G=.773,ne=.05,U=Math.abs(T-$)<$*ne,be=Math.abs(T-H)<H*ne,we=Math.abs(T-O)<O*ne,j=Math.abs(T-G)<G*ne;this.isA4Format=U||be||we||j;let fe=this.isA4Format?A:A-24,Ce=this.isA4Format?V:V-24,Y=fe>0?fe/E.width:0,P=Ce>0?Ce/E.height:0,F=Math.min(Y||.5,P||Y||.5),W=Math.min(F*2,3);if(!Number.isFinite(W)||W<=0){z.cleanup?.();return}let B=z.getViewport({scale:W}),K=J4.acquire(B.width,B.height);this.canvases.push(K);let ge={canvasContext:K.ctx,viewport:B};await z.render(ge).promise,L.width=B.width,L.height=B.height;let ve=fe,$e=B.height/B.width*fe;if($e>Ce){let R=Ce,te=B.width/B.height*Ce;L.style.width=`${te}px`,L.style.height=`${R}px`}else L.style.width=`${ve}px`,L.style.height=`${$e}px`;let q=L.getContext("2d");q&&(q.imageSmoothingEnabled=!0,q.imageSmoothingQuality="high",q.drawImage(K.canvas,0,0)),z.cleanup()}catch(C){console.error(`Failed to render page ${this.currentPreviewPage}:`,C)}}clearCanvases(){for(let L of this.canvases)J4.release(L);this.canvases=[]}cleanup(){this.clearCanvases(),this.pdfDocument&&(Xr.releaseDocument(this.loadedPdfUrl??this.pdfUrl),this.pdfDocument=null),this.renderPagesQueued=!1,this.pageCount=0,this.currentPreviewPage=1,this.isHovering=!1,this.isA4Format=!0,this.stackElement=null,this.loadedPdfUrl=null,this.rendered=!1,this.loading=!1,this.error=!1}async updated(L){if(super.updated(L),L.has("pdfUrl")&&this.pdfUrl){let A=L.get("pdfUrl");A&&Xr.releaseDocument(A),this.cleanup(),this.rendered=!1,this.currentPreviewPage=1;let V=this.getBoundingClientRect();V.top<window.innerHeight&&V.bottom>0&&this.loadAndRenderPreview()}L.has("currentPreviewPage")&&this.rendered&&await this.scheduleRenderPages()}getContextMenuItems(){let L=[];return this.clickable&&(L.push({name:"View PDF",iconName:"lucide:Eye",action:async()=>{this.dispatchEvent(new CustomEvent("tile-cli
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }
    .demo-section {
      margin-bottom: 60px;
    }
    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }
    .tile-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Image Tiles</h3>
      <div class="tile-row">
        <dees-tile-image
          src="https://picsum.photos/800/600"
          alt="Landscape photo"
          label="landscape.jpg"
          @tile-click=${t=>console.log("Image clicked:",t.detail)}
        ></dees-tile-image>

        <dees-tile-image
          src="https://picsum.photos/400/400"
          alt="Square photo"
          label="square.png"
        ></dees-tile-image>

        <dees-tile-image
          src="https://picsum.photos/300/900"
          alt="Portrait photo"
          label="portrait.webp"
        ></dees-tile-image>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
        <dees-tile-image
          size="small"
          src="https://picsum.photos/200/200"
          alt="Small"
          label="small.jpg"
        ></dees-tile-image>

        <dees-tile-image
          src="https://picsum.photos/600/400"
          alt="Default"
          label="default.jpg"
        ></dees-tile-image>

        <dees-tile-image
          size="large"
          src="https://picsum.photos/1200/800"
          alt="Large"
          label="large.jpg"
        ></dees-tile-image>
      </div>
    </div>

    <div class="demo-section">
      <h3>Error State (broken URL)</h3>
      <dees-tile-image
        src="https://invalid-url-that-does-not-exist.example/image.png"
        alt="Broken"
        label="broken.png"
      ></dees-tile-image>
    </div>
  </div>
`});var t3,rr,pyt,uyt=v(()=>{oe();To();Ks();dyt();t3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},rr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},pyt=(()=>{let t=[Q("dees-tile-image")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[J()],y=[J()],x=[J()],t3(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:k=>"src"in k,get:k=>k.src,set:(k,I)=>{k.src=I}},metadata:_},s,o),t3(this,null,u,{kind:"accessor",name:"alt",static:!1,private:!1,access:{has:k=>"alt"in k,get:k=>k.alt,set:(k,I)=>{k.alt=I}},metadata:_},c,d),t3(this,null,l,{kind:"accessor",name:"imageLoaded",static:!1,private:!1,access:{has:k=>"imageLoaded"in k,get:k=>k.imageLoaded,set:(k,I)=>{k.imageLoaded=I}},metadata:_},f,b),t3(this,null,y,{kind:"accessor",name:"imageWidth",static:!1,private:!1,access:{has:k=>"imageWidth"in k,get:k=>k.imageWidth,set:(k,I)=>{k.imageWidth=I}},metadata:_},g,h),t3(this,null,x,{kind:"accessor",name:"imageHeight",static:!1,private:!1,access:{has:k=>"imageHeight"in k,get:k=>k.imageHeight,set:(k,I)=>{k.imageHeight=I}},metadata:_},M,S),t3(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=cyt;static demoGroups=["Media"];static styles=[...J2,X`
      .image-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: ${p.bdTheme("repeating-conic-gradient(#e8e8e8 0% 25%, white 0% 50%) 50% / 16px 16px","repeating-conic-gradient(hsl(215 20% 18%) 0% 25%, hsl(215 20% 14%) 0% 50%) 50% / 16px 16px")};
      }

      .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.3s ease;
      }

      .image-wrapper img.loaded {
        opacity: 1;
      }

      .image-wrapper img.loading {
        opacity: 0;
      }

      .tile-badge-topright.dimension-badge {
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      .tile-container.clickable:hover .tile-badge-topright.dimension-badge {
        opacity: 1;
      }
    `];#e=rr(this,s,"");get src(){return this.#e}set src(_){this.#e=_}#t=(rr(this,o),rr(this,c,""));get alt(){return this.#t}set alt(_){this.#t=_}#a=(rr(this,d),rr(this,f,!1));get imageLoaded(){return this.#a}set imageLoaded(_){this.#a=_}#i=(rr(this,b),rr(this,g,0));get imageWidth(){return this.#i}set imageWidth(_){this.#i=_}#r=(rr(this,h),rr(this,M,0));get imageHeight(){return this.#r}set imageHeight(_){this.#r=_}hasStartedLoading=(rr(this,S),!1);renderTileContent(){return w`
      <div class="image-wrapper">
        ${this.hasStartedLoading?w`
          <img
            class="${this.imageLoaded?"loaded":"loading"}"
            src="${this.src}"
            alt="${this.alt}"
            @load=${this.handleImageLoad}
            @error=${this.handleImageError}
          />
        `:""}
      </div>

      ${this.imageWidth>0&&this.imageHeight>0?w`
        <div class="tile-badge-topright dimension-badge">
          ${this.imageWidth} × ${this.imageHeight}
        </div>
      `:""}

      ${this.imageLoaded?w`
        <div class="tile-info">
          <dees-icon icon="lucide:Image"></dees-icon>
          <span class="tile-info-text">${this.imageWidth} × ${this.imageHeight}</span>
        </div>
      `:""}

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:Eye"></dees-icon>
          <span>View Image</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{src:this.src,alt:this.alt,width:this.imageWidth,height:this.imageHeight}}onBecameVisible(){!this.hasStartedLoading&&this.src&&(this.hasStartedLoading=!0,this.loading=!0,this.requestUpdate())}handleImageLoad(_){let k=_.target;this.imageWidth=k.naturalWidth,this.imageHeight=k.naturalHeight,this.imageLoaded=!0,this.loading=!1}handleImageError(){this.error=!0,this.loading=!1}async updated(_){super.updated(_),_.has("src")&&this.src&&this.isVisible&&(this.hasStartedLoading=!0,this.imageLoaded=!1,this.loading=!0)}static{rr(i,a)}};return N=i})()});var hyt=v(()=>{uyt()});var fyt,myt=v(()=>{oe();fyt=()=>w`
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }
    .demo-section {
      margin-bottom: 60px;
    }
    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }
    .tile-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Audio Tiles</h3>
      <div class="tile-row">
        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="SoundHelix Song 1"
          artist="T. Schuerger"
          label="soundhelix-1.mp3"
          @tile-click=${t=>console.log("Audio clicked:",t.detail)}
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
          title="SoundHelix Song 2"
          artist="T. Schuerger"
          label="soundhelix-2.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
          title="SoundHelix Song 3"
          label="soundhelix-3.mp3"
        ></dees-tile-audio>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
        <dees-tile-audio
          size="small"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Small"
          label="small.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Default"
          label="default.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          size="large"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Large"
          label="large.mp3"
        ></dees-tile-audio>
      </div>
    </div>
  </div>
`});var Lo,ba,gyt,byt=v(()=>{oe();To();Ks();myt();Lo=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ba=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},gyt=(()=>{let t=[Q("dees-tile-audio")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[];var V=class extends r{static{i=this}static{let C=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:String})],y=[J()],x=[J()],N=[J()],I=[J()],Lo(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:z=>"src"in z,get:z=>z.src,set:(z,E)=>{z.src=E}},metadata:C},s,o),Lo(this,null,u,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:z=>"title"in z,get:z=>z.title,set:(z,E)=>{z.title=E}},metadata:C},c,d),Lo(this,null,l,{kind:"accessor",name:"artist",static:!1,private:!1,access:{has:z=>"artist"in z,get:z=>z.artist,set:(z,E)=>{z.artist=E}},metadata:C},f,b),Lo(this,null,y,{kind:"accessor",name:"duration",static:!1,private:!1,access:{has:z=>"duration"in z,get:z=>z.duration,set:(z,E)=>{z.duration=E}},metadata:C},g,h),Lo(this,null,x,{kind:"accessor",name:"waveformData",static:!1,private:!1,access:{has:z=>"waveformData"in z,get:z=>z.waveformData,set:(z,E)=>{z.waveformData=E}},metadata:C},M,S),Lo(this,null,N,{kind:"accessor",name:"waveformReady",static:!1,private:!1,access:{has:z=>"waveformReady"in z,get:z=>z.waveformReady,set:(z,E)=>{z.waveformReady=E}},metadata:C},_,k),Lo(this,null,I,{kind:"accessor",name:"isPreviewPlaying",static:!1,private:!1,access:{has:z=>"isPreviewPlaying"in z,get:z=>z.isPreviewPlaying,set:(z,E)=>{z.isPreviewPlaying=E}},metadata:C},L,A),Lo(null,e={value:i},t,{kind:"class",name:i.name,metadata:C},null,a),V=i=e.value,C&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:C})}static demo=fyt;static demoGroups=["Media"];static styles=[...J2,X`
      .audio-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        background: ${p.bdTheme("linear-gradient(135deg, hsl(250 40% 96%), hsl(280 30% 94%))","linear-gradient(135deg, hsl(250 30% 16%), hsl(280 25% 14%))")};
      }

      .music-icon {
        font-size: 48px;
        color: ${p.bdTheme("hsl(250 60% 65%)","hsl(250 60% 70%)")};
        opacity: 0.8;
      }

      .audio-title {
        font-size: 12px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(250 20% 35%)","hsl(250 20% 80%)")};
        text-align: center;
        padding: 0 16px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .audio-artist {
        font-size: 11px;
        font-weight: 400;
        color: ${p.bdTheme("hsl(250 15% 50%)","hsl(250 15% 65%)")};
        text-align: center;
        padding: 0 16px;
        margin-top: -12px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .waveform-container {
        width: calc(100% - 32px);
        height: 40px;
        position: relative;
        overflow: hidden;
      }

      .waveform-container canvas {
        width: 100%;
        height: 100%;
        display: block;
      }


      .play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 18;
        pointer-events: none;
      }

      .tile-container.clickable:hover .play-overlay {
        opacity: 1;
      }

      .play-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
      }

      .play-circle dees-icon {
        font-size: 20px;
        color: white;
      }
    `];#e=ba(this,s,"");get src(){return this.#e}set src(C){this.#e=C}#t=(ba(this,o),ba(this,c,""));get title(){return this.#t}set title(C){this.#t=C}#a=(ba(this,d),ba(this,f,""));get artist(){return this.#a}set artist(C){this.#a=C}#i=(ba(this,b),ba(this,g,0));get duration(){return this.#i}set duration(C){this.#i=C}#r=(ba(this,h),ba(this,M,[]));get waveformData(){return this.#r}set waveformData(C){this.#r=C}#s=(ba(this,S),ba(this,_,!1));get waveformReady(){return this.#s}set waveformReady(C){this.#s=C}#n=(ba(this,k),ba(this,L,!1));get isPreviewPlaying(){return this.#n}set isPreviewPlaying(C){this.#n=C}audioElement=(ba(this,A),null);previewTimeout=null;hasLoadedWaveform=!1;renderTileContent(){return w`
      <div class="audio-content">
        <dees-icon class="music-icon" icon="lucide:Music"></dees-icon>

        ${this.title?w`<div class="audio-title">${this.title}</div>`:""}
        ${this.artist?w`<div class="audio-artist">${this.artist}</div>`:""}

        ${this.waveformReady?w`
          <div class="waveform-container">
            <canvas></canvas>
          </div>
        `:""}
      </div>

      ${this.duration>0?w`
        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
      `:""}

      <div class="play-overlay">
        <div class="play-circle">
          <dees-icon icon="lucide:Play"></dees-icon>
        </div>
      </div>

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:Headphones"></dees-icon>
          <span>Play Audio</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{src:this.src,title:this.title,artist:this.artist,duration:this.duration}}onBecameVisible(){!this.hasLoadedWaveform&&this.src&&(this.hasLoadedWaveform=!0,this.loadAudioMeta())}async loadAudioMeta(){this.loading=!0;try{let C=new Audio;C.crossOrigin="anonymous",C.preload="metadata",await new Promise((z,E)=>{C.addEventListener("loadedmetadata",()=>{this.duration=C.duration,z()},{once:!0}),C.addEventListener("error",()=>E(new Error("Failed to load audio")),{once:!0}),C.src=this.src}),await this.loadWaveform(),this.loading=!1}catch{this.loading=!1}}async loadWaveform(){try{let z=await(await fetch(this.src)).arrayBuffer(),E=new AudioContext,$=(await E.decodeAudioData(z)).getChannelData(0),H=80,O=Math.floor($.length/H),G=[];for(let U=0;U<H;U++){let be=0;for(let we=0;we<O;we++)be+=Math.abs($[U*O+we]);G.push(be/O)}let ne=Math.max(...G);this.waveformData=G.map(U=>ne>0?U/ne:0),this.waveformReady=!0,await E.close(),await this.updateComplete,this.drawWaveform()}catch{this.waveformReady=!1}}drawWaveform(){if(!this.waveformReady)return;let C=this.shadowRoot?.querySelector(".waveform-container canvas");if(!C)return;let z=C.parentElement,E=window.devicePixelRatio||1,T=z.clientWidth,$=z.clientHeight;C.width=T*E,C.height=$*E;let H=C.getContext("2d");if(!H)return;H.scale(E,E),H.clearRect(0,0,T,$);let O=this.waveformData.length;if(O===0)return;let G=T/O,U=document.body.classList.contains("theme-dark")||window.matchMedia("(prefers-color-scheme: dark)").matches?"hsl(250 50% 60%)":"hsl(250 50% 70%)";H.fillStyle=U;for(let be=0;be<O;be++){let we=this.waveformData[be],j=Math.max(2,we*($-4)),fe=be*G,Ce=($-j)/2;H.fillRect(fe+.5,Ce,G-1,j)}}async updated(C){super.updated(C),C.has("src")&&this.src&&this.isVisible&&(this.hasLoadedWaveform=!0,this.waveformReady=!1,this.duration=0,this.loadAudioMeta()),C.has("waveformReady")&&this.waveformReady&&(await this.updateComplete,this.drawWaveform())}async disconnectedCallback(){await super.disconnectedCallback(),this.previewTimeout&&clearTimeout(this.previewTimeout),this.audioElement&&(this.audioElement.pause(),this.audioElement.src="",this.audioElement=null)}formatTime(C){if(!isFinite(C)||C<0)return"0:00";let z=Math.floor(C/60),E=Math.floor(C%60);return`${z}:${E.toString().padStart(2,"0")}`}static{ba(i,a)}};return V=i})()});var vyt=v(()=>{byt()});var yyt,xyt=v(()=>{oe();yyt=()=>w`
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }
    .demo-section {
      margin-bottom: 60px;
    }
    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }
    .tile-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Video Tiles</h3>
      <div class="tile-row">
        <dees-tile-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="bunny.mp4"
          @tile-click=${t=>console.log("Video clicked:",t.detail)}
        ></dees-tile-video>

        <dees-tile-video
          src="https://www.w3schools.com/html/movie.mp4"
          poster="https://picsum.photos/400/300"
          label="movie.mp4"
        ></dees-tile-video>

        <dees-tile-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="another-video.mp4"
        ></dees-tile-video>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
        <dees-tile-video
          size="small"
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="small.mp4"
        ></dees-tile-video>

        <dees-tile-video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="default.mp4"
        ></dees-tile-video>

        <dees-tile-video
          size="large"
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          label="large.mp4"
        ></dees-tile-video>
      </div>
    </div>

    <div class="demo-section">
      <h3>With Poster Image</h3>
      <dees-tile-video
        src="https://www.w3schools.com/html/movie.mp4"
        poster="https://picsum.photos/600/400"
        label="poster-video.mp4"
      ></dees-tile-video>
    </div>
  </div>
`});var a3,sr,wyt,Myt=v(()=>{oe();To();Ks();xyt();a3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},sr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},wyt=(()=>{let t=[Q("dees-tile-video")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[J()],y=[J()],x=[J()],a3(this,null,n,{kind:"accessor",name:"src",static:!1,private:!1,access:{has:k=>"src"in k,get:k=>k.src,set:(k,I)=>{k.src=I}},metadata:_},s,o),a3(this,null,u,{kind:"accessor",name:"poster",static:!1,private:!1,access:{has:k=>"poster"in k,get:k=>k.poster,set:(k,I)=>{k.poster=I}},metadata:_},c,d),a3(this,null,l,{kind:"accessor",name:"duration",static:!1,private:!1,access:{has:k=>"duration"in k,get:k=>k.duration,set:(k,I)=>{k.duration=I}},metadata:_},f,b),a3(this,null,y,{kind:"accessor",name:"thumbnailCaptured",static:!1,private:!1,access:{has:k=>"thumbnailCaptured"in k,get:k=>k.thumbnailCaptured,set:(k,I)=>{k.thumbnailCaptured=I}},metadata:_},g,h),a3(this,null,x,{kind:"accessor",name:"isHovering",static:!1,private:!1,access:{has:k=>"isHovering"in k,get:k=>k.isHovering,set:(k,I)=>{k.isHovering=I}},metadata:_},M,S),a3(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=yyt;static demoGroups=["Media"];static styles=[...J2,X`
      .video-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
      }

      .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .video-wrapper canvas {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .poster-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }


      .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 15;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }

      .play-overlay dees-icon {
        font-size: 20px;
        color: white;
      }

      .tile-container.clickable:hover .play-overlay {
        opacity: 0;
      }

      .video-hover-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .video-hover-preview.active {
        opacity: 1;
      }
    `];#e=sr(this,s,"");get src(){return this.#e}set src(_){this.#e=_}#t=(sr(this,o),sr(this,c,""));get poster(){return this.#t}set poster(_){this.#t=_}#a=(sr(this,d),sr(this,f,0));get duration(){return this.#a}set duration(_){this.#a=_}#i=(sr(this,b),sr(this,g,!1));get thumbnailCaptured(){return this.#i}set thumbnailCaptured(_){this.#i=_}#r=(sr(this,h),sr(this,M,!1));get isHovering(){return this.#r}set isHovering(_){this.#r=_}thumbnailCanvas=(sr(this,S),null);hoverVideo=null;hasStartedLoading=!1;renderTileContent(){return w`
      <div class="video-wrapper">
        ${this.poster?w`
          <img class="poster-image" src="${this.poster}" alt="" />
        `:this.thumbnailCaptured?w`
          <canvas></canvas>
        `:w`
          <div style="width: 100%; height: 100%; background: #000;"></div>
        `}

        ${this.isHovering&&this.src?w`
          <video
            class="video-hover-preview ${this.isHovering?"active":""}"
            .src=${this.src}
            muted
            playsinline
            @loadeddata=${this.handleHoverVideoLoaded}
          ></video>
        `:""}
      </div>

      ${this.duration>0?w`
        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
      `:""}

      ${this.isHovering?"":w`
        <div class="play-overlay">
          <dees-icon icon="lucide:Play"></dees-icon>
        </div>
      `}

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:Play"></dees-icon>
          <span>Play Video</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{src:this.src,poster:this.poster,duration:this.duration}}onBecameVisible(){!this.hasStartedLoading&&this.src&&(this.hasStartedLoading=!0,this.captureFirstFrame())}async captureFirstFrame(){if(this.poster){this.loadDuration();return}this.loading=!0;try{let _=document.createElement("video");_.crossOrigin="anonymous",_.muted=!0,_.preload="metadata",await new Promise((k,I)=>{_.addEventListener("loadeddata",()=>{this.duration=_.duration,_.currentTime=.1,_.addEventListener("seeked",()=>{let L=document.createElement("canvas");L.width=_.videoWidth,L.height=_.videoHeight;let A=L.getContext("2d");A&&(A.drawImage(_,0,0),this.thumbnailCanvas=L,this.thumbnailCaptured=!0),_.src="",_.load(),k()},{once:!0})},{once:!0}),_.addEventListener("error",()=>I(new Error("Failed to load video")),{once:!0}),_.src=this.src}),this.loading=!1,await this.updateComplete,this.copyThumbnailToCanvas()}catch{this.loading=!1,this.loadDuration()}}loadDuration(){let _=document.createElement("video");_.preload="metadata",_.addEventListener("loadedmetadata",()=>{this.duration=_.duration,_.src="",_.load()}),_.src=this.src}copyThumbnailToCanvas(){if(!this.thumbnailCanvas)return;let _=this.shadowRoot?.querySelector(".video-wrapper canvas");if(!_)return;_.width=this.thumbnailCanvas.width,_.height=this.thumbnailCanvas.height;let k=_.getContext("2d");k&&k.drawImage(this.thumbnailCanvas,0,0)}onTileMouseEnter(){this.isHovering=!0}onTileMouseLeave(){this.isHovering=!1,this.hoverVideo=null}handleHoverVideoLoaded(_){this.hoverVideo=_.target,this.hoverVideo.play().catch(()=>{})}async updated(_){super.updated(_),_.has("src")&&this.src&&this.isVisible&&(this.hasStartedLoading=!0,this.thumbnailCaptured=!1,this.duration=0,this.captureFirstFrame()),_.has("thumbnailCaptured")&&this.thumbnailCaptured&&(await this.updateComplete,this.copyThumbnailToCanvas())}async disconnectedCallback(){await super.disconnectedCallback(),this.hoverVideo&&(this.hoverVideo.pause(),this.hoverVideo.src="",this.hoverVideo=null),this.thumbnailCanvas=null}formatTime(_){if(!isFinite(_)||_<0)return"0:00";let k=Math.floor(_/60),I=Math.floor(_%60);return`${k}:${I.toString().padStart(2,"0")}`}static{sr(i,a)}};return N=i})()});var kyt=v(()=>{Myt()});var zyt,Syt=v(()=>{oe();zyt=()=>{let t=`import { html } from 'lit';

export class MyComponent {
  private items: string[] = [];

  render() {
    return html\`
      <div class="container">
        \${this.items.map(item => html\`
          <span>\${item}</span>
        \`)}
      </div>
    \`;
  }
}`,e=`Meeting Notes - Q4 Planning
Date: January 15, 2026
Attendees: Alice, Bob, Charlie

Key Decisions:
1. Launch new feature by March
2. Hire 2 more engineers
3. Migrate to new CI/CD pipeline
4. Update design system to v3

Action Items:
- Alice: Draft PRD by next week
- Bob: Set up interview pipeline
- Charlie: Evaluate Jenkins vs GitHub Actions`;return w`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }
      .demo-section {
        margin-bottom: 60px;
      }
      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }
      .tile-row {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Note Tiles</h3>
        <div class="tile-row">
          <dees-tile-note
            title="component.ts"
            .content=${t}
            language="typescript"
            label="component.ts"
            @tile-click=${i=>console.log("Note clicked:",i.detail)}
          ></dees-tile-note>

          <dees-tile-note
            title="Meeting Notes"
            .content=${e}
            label="meeting-notes.txt"
          ></dees-tile-note>

          <dees-tile-note
            title="package.json"
            .content=${`{
  "name": "@design.estate/dees-catalog",
  "version": "3.38.0",
  "description": "Design component catalog",
  "dependencies": {
    "@design.estate/dees-element": "^2.0.0",
    "lit": "^3.1.0"
  },
  "scripts": {
    "build": "tsbuild",
    "test": "tstest"
  }
}`}
            language="json"
            label="package.json"
          ></dees-tile-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
          <dees-tile-note
            size="small"
            title="small.ts"
            .content=${t}
            language="ts"
            label="small.ts"
          ></dees-tile-note>

          <dees-tile-note
            title="default.ts"
            .content=${t}
            language="ts"
            label="default.ts"
          ></dees-tile-note>

          <dees-tile-note
            size="large"
            title="large.ts"
            .content=${t}
            language="ts"
            label="large.ts"
          ></dees-tile-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Without Title</h3>
        <dees-tile-note
          .content=${e}
          label="untitled.txt"
        ></dees-tile-note>
      </div>
    </div>
  `}});var m8,Qs,Cyt,_yt=v(()=>{oe();To();Ks();Syt();m8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Qs=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Cyt=(()=>{let t=[Q("dees-tile-note")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:String})],y=[J()],m8(this,null,n,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:S=>"title"in S,get:S=>S.title,set:(S,N)=>{S.title=N}},metadata:M},s,o),m8(this,null,u,{kind:"accessor",name:"content",static:!1,private:!1,access:{has:S=>"content"in S,get:S=>S.content,set:(S,N)=>{S.content=N}},metadata:M},c,d),m8(this,null,l,{kind:"accessor",name:"language",static:!1,private:!1,access:{has:S=>"language"in S,get:S=>S.language,set:(S,N)=>{S.language=N}},metadata:M},f,b),m8(this,null,y,{kind:"accessor",name:"isHovering",static:!1,private:!1,access:{has:S=>"isHovering"in S,get:S=>S.isHovering,set:(S,N)=>{S.isHovering=N}},metadata:M},g,h),m8(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=zyt;static demoGroups=["Media"];static styles=[...J2,X`
      .note-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: ${p.bdTheme("#ffffff","hsl(60 5% 96%)")};
        overflow: hidden;
      }

      .note-header {
        padding: 12px 14px 8px;
        flex-shrink: 0;
      }

      .note-title {
        font-size: 12px;
        font-weight: 700;
        color: ${p.bdTheme("hsl(215 20% 20%)","hsl(215 20% 20%)")};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
      }

      .note-body {
        flex: 1;
        padding: 0 14px 14px;
        position: relative;
        overflow: hidden;
      }

      .note-text {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 10px;
        line-height: 1.5;
        color: ${p.bdTheme("hsl(215 10% 40%)","hsl(215 10% 35%)")};
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
        margin: 0;
      }

      .note-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(
          transparent,
          ${p.bdTheme("#ffffff","hsl(60 5% 96%)")}
        );
        pointer-events: none;
      }

      .tile-badge-topright.note-language {
        background: ${p.bdTheme("hsl(215 20% 92%)","hsl(215 20% 88%)")};
        color: ${p.bdTheme("hsl(215 16% 50%)","hsl(215 16% 40%)")};
        font-size: 9px;
        text-transform: uppercase;
        z-index: 5;
      }

      .note-lines {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 34px;
        border-right: 1px solid ${p.bdTheme("hsl(0 70% 85%)","hsl(0 50% 80%)")};
        display: flex;
        flex-direction: column;
        padding-top: 12px;
      }

      .line-number {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 9px;
        line-height: 15px; /* matches 10px * 1.5 line-height */
        color: ${p.bdTheme("hsl(215 10% 75%)","hsl(215 10% 70%)")};
        text-align: right;
        padding-right: 6px;
      }

    `];#e=Qs(this,s,"");get title(){return this.#e}set title(M){this.#e=M}#t=(Qs(this,o),Qs(this,c,""));get content(){return this.#t}set content(M){this.#t=M}#a=(Qs(this,d),Qs(this,f,""));get language(){return this.#a}set language(M){this.#a=M}#i=(Qs(this,b),Qs(this,g,!1));get isHovering(){return this.#i}set isHovering(M){this.#i=M}noteBodyElement=(Qs(this,h),null);renderTileContent(){let M=this.content.split(`
`);return w`
      <div class="note-content">
        ${this.language?w`
          <div class="tile-badge-topright note-language">${this.language}</div>
        `:""}

        ${this.title?w`
          <div class="note-header">
            <div class="note-title">${this.title}</div>
          </div>
        `:""}

        <div class="note-body">
          <pre class="note-text">${M.join(`
`)}</pre>
          ${this.isHovering?"":w`<div class="note-fade"></div>`}
        </div>

        ${this.isHovering&&M.length>12?w`
          <div class="tile-badge-corner">
            Line ${this.getVisibleLineRange(M.length)}
          </div>
        `:""}
      </div>

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:FileText"></dees-icon>
          <span>Open Note</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{title:this.title,content:this.content,language:this.language}}onTileMouseEnter(){this.isHovering=!0,this.noteBodyElement||(this.noteBodyElement=this.shadowRoot?.querySelector(".note-body"))}onTileMouseLeave(){this.isHovering=!1,this.noteBodyElement&&(this.noteBodyElement.scrollTop=0)}onTileMouseMove(M){if(!this.isHovering||!this.noteBodyElement||this.content.split(`
`).length<=12)return;let N=this.getBoundingClientRect(),_=M.clientX-N.left,k=Math.max(0,Math.min(1,_/N.width)),I=this.noteBodyElement.scrollHeight-this.noteBodyElement.clientHeight;this.noteBodyElement.scrollTop=k*I}getVisibleLineRange(M){if(!this.noteBodyElement)return`1\u201312 of ${M}`;let S=15,N=Math.floor(this.noteBodyElement.scrollTop/S)+1,_=Math.floor(this.noteBodyElement.clientHeight/S),k=Math.min(N+_-1,M);return`${N}\u2013${k} of ${M}`}static{Qs(i,a)}};return x=i})()});var Tyt=v(()=>{_yt()});var Lyt,$yt=v(()=>{oe();Lyt=()=>{let t=[{type:"image",name:"sunset.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=1"},{type:"image",name:"mountain.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=2"},{type:"image",name:"ocean.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=3"},{type:"image",name:"forest.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=4"},{type:"image",name:"city.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=5"},{type:"image",name:"desert.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=6"}];return w`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }
      .demo-section {
        margin-bottom: 60px;
      }
      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }
      .tile-row {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Folder Tiles</h3>
        <div class="tile-row">
          <dees-tile-folder
            name="Photos"
            .items=${t}
            label="6 photos"
            @tile-click=${n=>console.log("Folder clicked:",n.detail)}
          ></dees-tile-folder>

          <dees-tile-folder
            name="my-project"
            .items=${[{type:"note",name:"README.md"},{type:"note",name:"package.json"},{type:"folder",name:"src"},{type:"folder",name:"test"},{type:"note",name:"tsconfig.json"},{type:"pdf",name:"docs.pdf"},{type:"image",name:"logo.png",thumbnailSrc:"https://picsum.photos/100/100?random=10"}]}
            label="Project files"
          ></dees-tile-folder>

          <dees-tile-folder
            name="Media Assets"
            .items=${[{type:"video",name:"intro.mp4"},{type:"audio",name:"background.mp3"},{type:"image",name:"thumbnail.jpg",thumbnailSrc:"https://picsum.photos/200/200?random=20"},{type:"pdf",name:"storyboard.pdf"}]}
            label="Mixed media"
          ></dees-tile-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Edge Cases</h3>
        <div class="tile-row">
          <dees-tile-folder
            name="Empty Folder"
            .items=${[]}
          ></dees-tile-folder>

          <dees-tile-folder
            name="Single Item"
            .items=${[{type:"pdf",name:"report.pdf"}]}
          ></dees-tile-folder>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
          <dees-tile-folder
            size="small"
            name="Small"
            .items=${t}
          ></dees-tile-folder>

          <dees-tile-folder
            name="Default"
            .items=${t}
          ></dees-tile-folder>

          <dees-tile-folder
            size="large"
            name="Large"
            .items=${t}
          ></dees-tile-folder>
        </div>
      </div>
    </div>
  `}});var vj,g8,Dyt,Ayt,Eyt=v(()=>{oe();To();Ks();$yt();vj=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},g8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Dyt={pdf:"lucide:FileText",image:"lucide:Image",audio:"lucide:Music",video:"lucide:Video",note:"lucide:FileCode",folder:"lucide:Folder",unknown:"lucide:File"},Ayt=(()=>{let t=[Q("dees-tile-folder")],e,a=[],i,r=ga,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({attribute:!1})],vj(this,null,n,{kind:"accessor",name:"name",static:!1,private:!1,access:{has:b=>"name"in b,get:b=>b.name,set:(b,y)=>{b.name=y}},metadata:f},s,o),vj(this,null,u,{kind:"accessor",name:"items",static:!1,private:!1,access:{has:b=>"items"in b,get:b=>b.items,set:(b,y)=>{b.items=y}},metadata:f},c,d),vj(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=Lyt;static demoGroups=["Media"];static styles=[...J2,X`
      .folder-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: ${p.bdTheme("hsl(40 30% 97%)","hsl(215 20% 14%)")};
        overflow: hidden;
      }

      .folder-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px 8px;
        flex-shrink: 0;
      }

      .folder-icon {
        font-size: 18px;
        color: ${p.bdTheme("hsl(40 80% 50%)","hsl(40 70% 60%)")};
      }

      .folder-name {
        font-size: 12px;
        font-weight: 700;
        color: ${p.bdTheme("hsl(215 20% 20%)","hsl(215 16% 80%)")};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
      }

      .preview-grid {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        padding: 0 14px 14px;
        min-height: 0;
      }

      .grid-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        overflow: hidden;
        background: ${p.bdTheme("hsl(215 20% 94%)","hsl(215 20% 18%)")};
        position: relative;
      }

      .grid-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .grid-cell dees-icon {
        font-size: 20px;
        color: ${p.bdTheme("hsl(215 16% 60%)","hsl(215 16% 55%)")};
      }

      .grid-cell-empty {
        background: ${p.bdTheme("hsl(215 15% 96%)","hsl(215 20% 16%)")};
      }

    `];#e=g8(this,s,"");get name(){return this.#e}set name(f){this.#e=f}#t=(g8(this,o),g8(this,c,[]));get items(){return this.#t}set items(f){this.#t=f}renderTileContent(){let f=this.items.slice(0,4),b=4-f.length;return w`
      <div class="folder-content">
        <div class="folder-header">
          <dees-icon class="folder-icon" icon="lucide:Folder"></dees-icon>
          <div class="folder-name">${this.name||"Untitled Folder"}</div>
        </div>

        <div class="preview-grid">
          ${f.map(y=>w`
            <div class="grid-cell">
              ${y.thumbnailSrc?w`
                <img src="${y.thumbnailSrc}" alt="${y.name}" />
              `:w`
                <dees-icon icon="${Dyt[y.type]||Dyt.unknown}"></dees-icon>
              `}
            </div>
          `)}
          ${Array.from({length:b}).map(()=>w`
            <div class="grid-cell grid-cell-empty"></div>
          `)}
        </div>
      </div>

      <div class="tile-badge-corner">
        ${this.items.length} item${this.items.length!==1?"s":""}
      </div>

      ${this.clickable?w`
        <div class="tile-overlay">
          <dees-icon icon="lucide:FolderOpen"></dees-icon>
          <span>Open Folder</span>
        </div>
      `:""}
    `}getTileClickDetail(){return{name:this.name,itemCount:this.items.length,items:this.items}}constructor(){super(...arguments),g8(this,d)}static{g8(i,a)}};return l=i})()});var Pyt=v(()=>{Eyt()});var Iyt=v(()=>{Tvt();Avt();Nvt();Gvt();Kvt();ryt();syt();nyt();oyt();lyt();hyt();vyt();kyt();Tyt();Pyt()});var Nyt=v(()=>{r2()});var Ryt=v(()=>{rl()});var Fyt,Oyt=v(()=>{oe();Fyt=()=>w`
    <style>
      .ref1 {
        margin: 20px;
        width: 10px;
        height: 10px;
        background-color: red;
      }
    </style>
    <div class="ref1"></div>
    <dees-speechbubble .text=${`
      **This is a longer markdown text that  can be used the write**  
      a longer description about whats going on the app  
  
      **This is a subheader**
      and another text
    
    `}></dees-speechbubble>
  `});var i3,nr,Byt,Hyt=v(()=>{xi();i2();Oyt();oe();Ns();He();i3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},nr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Byt=(()=>{let t=[Q("dees-speechbubble")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:String,reflect:!0})],l=[D({type:Boolean})],y=[D({type:Boolean})],x=[D({type:String})],i3(this,null,n,{kind:"accessor",name:"reffedElement",static:!1,private:!1,access:{has:k=>"reffedElement"in k,get:k=>k.reffedElement,set:(k,I)=>{k.reffedElement=I}},metadata:_},s,o),i3(this,null,u,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:k=>"text"in k,get:k=>k.text,set:(k,I)=>{k.text=I}},metadata:_},c,d),i3(this,null,l,{kind:"accessor",name:"wave",static:!1,private:!1,access:{has:k=>"wave"in k,get:k=>k.wave,set:(k,I)=>{k.wave=I}},metadata:_},f,b),i3(this,null,y,{kind:"accessor",name:"manifested",static:!1,private:!1,access:{has:k=>"manifested"in k,get:k=>k.manifested,set:(k,I)=>{k.manifested=I}},metadata:_},g,h),i3(this,null,x,{kind:"accessor",name:"status",static:!1,private:!1,access:{has:k=>"status"in k,get:k=>k.status,set:(k,I)=>{k.status=I}},metadata:_},M,S),i3(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=Fyt;static demoGroups=["Overlay"];static async createAndShow(_,k){let I=await vi.createAndShow({blur:!1}),L=document.createElement("dees-speechbubble");return L.windowLayer=I,L.reffedElement=_,L.text=k,L.manifested=!0,I.appendChild(L),I.style.pointerEvents="none",I.shadowRoot.querySelector(".windowOverlay").style.pointerEvents="none",L}#e=nr(this,s,void 0);get reffedElement(){return this.#e}set reffedElement(_){this.#e=_}#t=(nr(this,o),nr(this,c,void 0));get text(){return this.#t}set text(_){this.#t=_}#a=(nr(this,d),nr(this,f,!1));get wave(){return this.#a}set wave(_){this.#a=_}#i=(nr(this,b),nr(this,g,!1));get manifested(){return this.#i}set manifested(_){this.#i=_}#r=(nr(this,h),nr(this,M,"normal"));get status(){return this.#r}set status(_){this.#r=_}windowLayer=nr(this,S);constructor(){super()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        box-sizing: border-box;
        color: ${p.bdTheme("#333","#fff")};
        user-select: none;
      }

      .maincontainer {
        position: relative;
        will-change: transform;
        transition: transform 0.2s;
        transform: translateX(0px);
        transition: all 0.2s;
        margin-left: 0px;
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
        pointer-events: none;
        opacity: 0;
        transition: all 0.2s;
      }

      .arrow {
        position: absolute;
        transform: rotate(45deg);
        background: ${p.bdTheme("#fff","#333")};
        height: 15px;
        width: 15px;
        left: 2px;
        top: 12px;
        border-radius: 3px;
      }

      .speechbubble {
        background: ${p.bdTheme("#fff","#333")};
        padding: 0px 16px;
        border-radius: 3px;
        position: absolute;
        min-width: 240px;
        font-size: 12px;
        top: 0px;
        left: 8px;
      }

      .wave {
        animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
        animation-duration: 2.5s; /* Change to speed up or slow down */
        animation-iteration-count: infinite; /* Never stop waving :) */
        transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
        display: inline-block;
      }

      @keyframes wave-animation {
        0% {
          transform: rotate(0deg);
        }
        10% {
          transform: rotate(14deg);
        } /* The following five values can be played with to make the waving more or less extreme */
        20% {
          transform: rotate(-8deg);
        }
        30% {
          transform: rotate(14deg);
        }
        40% {
          transform: rotate(-4deg);
        }
        50% {
          transform: rotate(10deg);
        }
        60% {
          transform: rotate(0deg);
        } /* Reset for the last half to pause */
        100% {
          transform: rotate(0deg);
        }
      }
    `];render(){return w`
      ${this.manifested?w`
            <div class="maincontainer" @click=${this.handleClick}>
              <div class="arrow"></div>
              <div class="speechbubble">
                ${this.wave?w`<span class="wave">👋</span>`:w``}
                ${Wa.resolve(this.getHtml())}
              </div>
            </div>
          `:w``}
    `}async handleClick(){console.log("speechbubble got clicked.")}async firstUpdated(){if(this.reffedElement||(this.reffedElement=this.previousElementSibling),this.manifested)await this.updatePosition(),this.shadowRoot.querySelector(".maincontainer").style.opacity="1";else{let _;this.reffedElement.addEventListener("mouseenter",async()=>{_=await N.createAndShow(this.reffedElement,this.text)}),this.reffedElement.addEventListener("mouseleave",()=>{_.destroy()})}}async updatePosition(){let _=this.reffedElement,k=_.getBoundingClientRect();this.style.position="fixed",this.style.top=`${k.top-13}px`,this.style.left=`${k.left+_.clientWidth+4}px`,k.right>250&&(this.style.width="250px")}async getHtml(){if(!this.text)return"";let _=rt.plugins.smartstring.normalize.standard(this.text),k=await rt.plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(_);return I5(k)}async show(){}async destroy(){this.shadowRoot.querySelector(".maincontainer").style.opacity="0",this.windowLayer.destroy()}static{nr(i,a)}};return N=i})()});var qyt=v(()=>{Hyt()});var Vyt=v(()=>{Ns()});var jyt=v(()=>{Nyt();Ryt();qyt();Vyt()});var Uyt=v(()=>{});var Wyt=v(()=>{Uyt()});var Gyt,Nw,Rw,yj,Yyt,Fw,Ow,Bw,Hw=v(()=>{Gyt="https://stackblitz.com",Nw="code",Rw="error",yj="error_description",Yyt="__wc_api_bc__",Fw="__wc_api_tokens__",Ow="__wc_api_verifier__",Bw="__wc_api_popup__"});var Ml,xj=v(()=>{Ml=class{_bus=new EventTarget;listen(e){function a(i){e(i.data)}return this._bus.addEventListener("message",a),()=>this._bus.removeEventListener("message",a)}fireEvent(e){this._bus.dispatchEvent(new MessageEvent("message",{data:e}))}}});function qw(){localStorage.removeItem(Fw)}function Jyt(t){return Xyt.listen(t)}function BWt(){let t=localStorage.getItem(Fw);if(!t)return null;try{return JSON.parse(t)}catch{return null}}function HWt(t){localStorage.setItem(Fw,JSON.stringify(t))}function Kyt({created_at:t,expires_in:e}){return(t+e)*1e3}function Qyt(t){if(typeof t!="object"||!t)throw new Error("Invalid Token Response");if(typeof t.access_token!="string"||typeof t.refresh_token!="string"||typeof t.created_at!="number"||typeof t.expires_in!="number")throw new Error("Invalid Token Response")}function qWt(t){return new Promise(e=>setTimeout(e,t))}function VWt(t){Xyt.fireEvent(t)}var Zyt,Xyt,r3,wj=v(()=>{Hw();xj();Zyt=new Error;Zyt.stack="";Xyt=new Ml,r3=class t{origin;refresh;access;expires;_revoked=new AbortController;constructor(e,a,i,r){this.origin=e,this.refresh=a,this.access=i,this.expires=r}async activate(e){if(this._revoked.signal.aborted)throw new Error("Token revoked");return this.expires<Date.now()&&!await this._fetchNewAccessToken()?!1:(this._sync(),this._startRefreshTokensLoop(e),!0)}async revoke(e,a){this._revoked.abort();try{if(!(await fetch(`${this.origin}/oauth/revoke`,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({token:this.refresh,token_type_hint:"refresh_token",client_id:e}),mode:"cors"})).ok)throw new Error("Failed to logout")}catch(i){if(!a)throw i}qw()}static fromStorage(){let e=BWt();return e?new t(e.origin,e.refresh,e.access,e.expires):null}static async fromAuthCode({editorOrigin:e,clientId:a,codeVerifier:i,authCode:r,redirectUri:n}){let s=await fetch(`${e}/oauth/token`,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({client_id:a,code:r,code_verifier:i,grant_type:"authorization_code",redirect_uri:n}),mode:"cors"});if(!s.ok)throw new Error(`Failed to fetch token: ${s.status}`);let o=await s.json();Qyt(o);let{access_token:u,refresh_token:c}=o,d=Kyt(o);return new t(e,c,u,d)}async _fetchNewAccessToken(){try{let e=await fetch(`${this.origin}/oauth/token`,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({grant_type:"refresh_token",refresh_token:this.refresh}),mode:"cors",signal:this._revoked.signal});if(!e.ok)throw Zyt;let a=await e.json();Qyt(a);let{access_token:i,refresh_token:r}=a,n=Kyt(a);return this.access=i,this.expires=n,this.refresh=r,!0}catch{return qw(),!1}}_sync(){HWt(this),VWt(this.access)}asy
Set the 'coep' option to 'require-corp'.`),a?.includes("/")||a===".."||a===".")throw new Error("workdirName should be a valid folder name");for(vt.bootCalled=!0;Ww;)await Ww;if(t._instance)throw new Error("Only a single WebContainer instance can be booted");let i=nGt(e);Ww=i.catch(()=>{});try{let r=await i;return t._instance=r,r}finally{Ww=null}}};rGt=1,sGt=2,Fj=class{name;_type;constructor(e,a){this.name=e,this._type=a}isFile(){return this._type===rGt}isDirectory(){return this._type===sGt}},Oj=class{_apiClient;_path;_options;_listener;_wrappedListener;_watcher;_closed=!1;constructor(e,a,i,r){this._apiClient=e,this._path=a,this._options=i,this._listener=r,this._apiClient._watchers.add(this),this._wrappedListener=(n,s)=>{this._listener&&!this._closed&&this._listener(n,s)},this._apiClient._fs.watch(this._path,this._options,Yw(this._wrappedListener)).then(n=>{if(this._watcher=n,this._closed)return this._teardown()}).catch(console.error)}async close(){this._closed||(this._closed=!0,this._apiClient._watchers.delete(this),await this._teardown())}async _teardown(){await this._watcher?.close().finally(()=>{this._watcher?.[Si.releaseProxy]()})}},Bj=class{output;input;exit;_process;stdout;stderr;constructor(e,a,i,r){this.output=a,this._process=e,this.input=new WritableStream({write:n=>{this._getProcess()?.write(n).catch(()=>{})}}),this.exit=this._onExit(),this.stdout=i,this.stderr=r}kill(){this._process?.kill()}resize(e){this._getProcess()?.resize(e)}async _onExit(){try{return await this._process.onExit}finally{this._process?.[Si.releaseProxy](),this._process=null}}_getProcess(){return this._process==null&&console.warn("This process already exited"),this._process}},Hj=class{_fs;_watchers=new Set([]);constructor(e){this._fs=e}rm(...e){return this._fs.rm(...e)}async readFile(e,a){return await this._fs.readFile(e,a)}async rename(e,a){return await this._fs.rename(e,a)}async writeFile(e,a,i){if(a instanceof Uint8Array){let r=a.buffer.slice(a.byteOffset,a.byteOffset+a.byteLength);a=Si.transfer(new Uint8Array(r),[r])}await this._fs.writeFile(e,a,i)}async readdir(e,a){let i=await this._fs.readdir(e,a);return lGt(i)||cGt(i)?i:i.map(n=>new Fj(n.name,n["Symbol(type)"]))}async mkdir(e,a){return await this._fs.mkdir(e,a)}watch(e,a,i){return typeof a=="function"&&(i=a,a=null),new Oj(this,e,a,i)}async _teardown(){this._fs[Si.releaseProxy](),await Promise.all([...this._watchers].map(e=>e.close()))}}});var Cl,Sxt=v(()=>{zxt();Cl=class t{static sharedContainer=null;static bootPromise=null;_ready=!1;type="webcontainer";get ready(){return this._ready}get container(){return t.sharedContainer}async init(){if(!(this._ready&&t.sharedContainer)){if(t.bootPromise){await t.bootPromise,this._ready=!0;return}if(t.sharedContainer){this._ready=!0;return}if(typeof SharedArrayBuffer>"u")throw new Error(`WebContainer requires SharedArrayBuffer which is not available. Ensure your server sends these headers:
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp`);t.bootPromise=v8.boot();try{t.sharedContainer=await t.bootPromise,this._ready=!0}catch(e){throw t.bootPromise=null,e}}}async destroy(){t.sharedContainer&&(t.sharedContainer.teardown(),t.sharedContainer=null,t.bootPromise=null,this._ready=!1)}async readFile(e){return this.ensureReady(),await this.container.fs.readFile(e,"utf-8")}async writeFile(e,a){this.ensureReady(),await this.container.fs.writeFile(e,a,"utf-8")}async readDir(e){return this.ensureReady(),(await this.container.fs.readdir(e,{withFileTypes:!0})).map(i=>({type:i.isDirectory()?"directory":"file",name:i.name,path:e==="/"?`/${i.name}`:`${e}/${i.name}`}))}async mkdir(e){this.ensureReady(),await this.container.fs.mkdir(e,{recursive:!0})}async rm(e,a){this.ensureReady(),await this.container.fs.rm(e,{recursive:a?.recursive??!1})}async exists(e){this.ensureReady();try{return await this.container.fs.readFile(e),!0}catch{try{return await this.container.fs.readdir(e),!0}catch{return!1}}}watch(e,a,i){this.ensureReady();let r=this.container.fs.watch(e,{recursive:i?.recursive??!1},a);return{stop:()=>r.close()}}async spawn(e,a=[]){this.ensureReady();let i=await this.container.spawn(e,a);return{output:i.output,input:i.input,exit:i.exit,kill:()=>i.kill()}}async mount(e){this.ensureReady(),await this.container.mount(e)}getContainer(){return this.ensureReady(),this.container}ensureReady(){if(!this._ready||!this.container)throw new Error("WebContainerEnvironment not initialized. Call init() first.")}}});var Cxt=v(()=>{Sxt()});var Zw=v(()=>{Wyt();Cxt()});var _xt=v(()=>{lV()});var y8,Vj=v(()=>{y8=class{tabs=new Map;tabCounter=0;xtermBundle=null;xtermFitAddonBundle=null;setXtermModules(e,a){this.xtermBundle=e,this.xtermFitAddonBundle=a}generateTabId(){return this.tabCounter++,`terminal-${this.tabCounter}-${Date.now()}`}getDefaultLabel(e,a){switch(e){case"shell":return"bash";case"script":return a?.scriptName||"script";case"package-update":return a?.packageName?`update ${a.packageName}`:"update";case"custom":return a?.command||"process";default:return"terminal"}}getDefaultIcon(e){switch(e){case"shell":return"lucide:terminal";case"script":return"lucide:play";case"package-update":return"lucide:packageCheck";case"custom":return"lucide:code";default:return"lucide:terminal"}}getTerminalTheme(e){return e?{background:"#ffffff",foreground:"#333333",cursor:"#333333",cursorAccent:"#ffffff",selection:"rgba(0, 0, 0, 0.2)",black:"#000000",red:"#cd3131",green:"#00bc00",yellow:"#949800",blue:"#0451a5",magenta:"#bc05bc",cyan:"#0598bc",white:"#555555",brightBlack:"#666666",brightRed:"#cd3131",brightGreen:"#14ce14",brightYellow:"#b5ba00",brightBlue:"#0451a5",brightMagenta:"#bc05bc",brightCyan:"#0598bc",brightWhite:"#a5a5a5"}:{background:"#000000",foreground:"#ffffff",cursor:"#ffffff",cursorAccent:"#000000",selection:"rgba(255, 255, 255, 0.2)"}}createTab(e,a){if(!this.xtermBundle||!this.xtermFitAddonBundle)throw new Error("TerminalTabManager: xterm modules not initialized. Call setXtermModules() first.");let i=this.generateTabId(),r=e.type,n=new this.xtermBundle.Terminal({convertEol:!0,cursorBlink:!0,theme:this.getTerminalTheme(a),fontFamily:'Menlo, Monaco, "Courier New", monospace',fontSize:13,lineHeight:1.2}),s=new this.xtermFitAddonBundle.FitAddon;n.loadAddon(s);let o={id:i,label:e.label||this.getDefaultLabel(r,e.metadata),iconName:e.iconName||this.getDefaultIcon(r),type:r,closeable:e.closeable??r!=="shell",terminal:n,fitAddon:s,process:null,inputWriter:null,exited:!1,exitCode:null,createdAt:Date.now(),metadata:e.metadata};return this.tabs.set(i,o),o}getTab(e){return this.tabs.get(e)}getAllTabs(){return Array.from(this.tabs.values()).sort((e,a)=>e.createdAt-a.createdAt)}getTabCount(){return this.tabs.size}hasTab(e){return this.tabs.has(e)}closeTab(e){let a=this.tabs.get(e);if(!a)return!1;if(a.process&&!a.exited)try{a.process.kill()}catch(i){console.warn("Failed to kill process:",i)}try{a.terminal.dispose()}catch(i){console.warn("Failed to dispose terminal:",i)}return this.tabs.delete(e),!0}renameTab(e,a){let i=this.tabs.get(e);return i?(i.label=a,!0)
      :host {
        background: ${p.bdTheme("#ffffff","#000000")};
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
      }

      * {
        box-sizing: border-box;
      }

      .terminal-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
      }

      .terminal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: ${p.bdTheme("#ffffff","#000000")};
      }

      #active-terminal-container {
        flex: 1;
        position: relative;
        min-height: 0;
        margin: 20px;
      }

      .terminal-content dees-actionbar {
        flex-shrink: 0;
      }

      /* Tab bar on the right side */
      .tab-bar {
        display: flex;
        flex-direction: column;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 7%)")};
        border-left: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        flex-shrink: 0;
        overflow: hidden;
      }

      .tab-bar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 12%)")};
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: ${p.bdTheme("hsl(0 0% 45%)","hsl(0 0% 55%)")};
      }

      .tab-bar-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tab-bar-actions {
        display: flex;
        gap: 2px;
      }

      .tab-action {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        transition: all 0.15s ease;
      }

      .tab-action:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 15%)")};
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 80%)")};
      }

      .tab-list {
        flex: 1;
        overflow-y: auto;
        padding: 4px;
      }

      .terminal-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        margin-bottom: 2px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        color: ${p.bdTheme("hsl(0 0% 45%)","hsl(0 0% 60%)")};
        transition: all 0.15s ease;
      }

      .terminal-tab:hover {
        background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 12%)")};
        color: ${p.bdTheme("hsl(0 0% 25%)","hsl(0 0% 80%)")};
      }

      .terminal-tab.active {
        background: ${p.bdTheme("hsl(210 100% 95%)","hsl(210 30% 15%)")};
        color: ${p.bdTheme("hsl(210 100% 40%)","hsl(210 100% 70%)")};
      }

      .terminal-tab.exited {
        opacity: 0.7;
      }

      .tab-icon {
        flex-shrink: 0;
      }

      .tab-icon.running {
        color: ${p.bdTheme("hsl(142 70% 40%)","hsl(142 70% 55%)")};
      }

      .tab-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .exit-badge {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 8px;
        font-weight: 600;
        flex-shrink: 0;
      }

      .exit-badge.success {
        background: ${p.bdTheme("hsl(142 70% 90%)","hsl(142 30% 20%)")};
        color: ${p.bdTheme("hsl(142 70% 35%)","hsl(142 70% 60%)")};
      }

      .exit-badge.error {
        background: ${p.bdTheme("hsl(0 70% 93%)","hsl(0 30% 20%)")};
        color: ${p.bdTheme("hsl(0 70% 45%)","hsl(0 70% 60%)")};
      }

      .tab-close {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        opacity: 0;
        transition: all 0.15s ease;
        flex-shrink: 0;
      }

      .terminal-tab:hover .tab-close {
        opacity: 0.6;
      }

      .tab-close:hover {
        opacity: 1 !important;
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 25%)")};
        color: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 60%)")};
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 50%)")};
        font-size: 13px;
        gap: 8px;
      }

      /* xterm.js styles */
      .xterm {
        font-feature-settings: 'liga' 0;
        position: relative;
        user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
      }

      .xterm.focus,
      .xterm:focus {
        outline: none;
      }

      .xterm .xterm-helpers {
        position: absolute;
        top: 0;
        z-index: 5;
      }

      .xterm .xterm-helper-textarea {
        padding: 0;
        border: 0;
        margin: 0;
        position: absolute;
        opacity: 0;
        left: -9999em;
        top: 0;
        width: 0;
        height: 0;
        z-index: -5;
        white-space: nowrap;
        overflow: hidden;
        resize: none;
      }

      .xterm .composition-view {
        background: ${p.bdTheme("#ffffff","#000000")};
        color: ${p.bdTheme("#333333","#ffffff")};
        display: none;
        position: absolute;
        white-space: nowrap;
        z-index: 1;
      }

      .xterm .composition-view.active {
        display: block;
      }

      .xterm .xterm-viewport {
        background-color: ${p.bdTheme("#ffffff","#000000")};
        overflow-y: scroll;
        cursor: default;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
      }

      .xterm .xterm-screen {
        position: relative;
      }

      .xterm .xterm-screen canvas {
        position: absolute;
        left: 0;
        top: 0;
      }

      .xterm .xterm-scroll-area {
        visibility: hidden;
      }

      .xterm-char-measure-element {
        display: inline-block;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: -9999em;
        line-height: normal;
      }

      .xterm {
        cursor: text;
      }

      .xterm.enable-mouse-events {
        cursor: default;
      }

      .xterm.xterm-cursor-pointer {
        cursor: pointer;
      }

      .xterm.column-select.focus {
        cursor: crosshair;
      }

      .xterm .xterm-accessibility,
      .xterm .xterm-message {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
        color: transparent;
      }

      .xterm .live-region {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .xterm-dim {
        opacity: 0.5;
      }

      .xterm-underline {
        text-decoration: underline;
      }
    `];render(){let C=this.activeTabId?this.tabManager.getTab(this.activeTabId):null;return w`
      <div class="terminal-container">
        <!-- Main terminal area -->
        <div class="terminal-content">
          ${C?w`
            <div id="active-terminal-container"></div>
          `:w`
            <div class="empty-state">
              <dees-icon .icon=${"lucide:terminal"} iconSize="32"></dees-icon>
              <span>No terminal open</span>
            </div>
          `}
          <dees-actionbar></dees-actionbar>
        </div>

        <!-- Vertical tab bar on the right -->
        ${this.showTabBar?w`
          <div class="tab-bar" style="width: ${this.tabBarWidth}px">
            <div class="tab-bar-header">
              <span class="tab-bar-title">Terminals</span>
              <div class="tab-bar-actions">
                <div class="tab-action" @click=${this.handleAddTab} title="New Terminal">
                  <dees-icon .icon=${"lucide:plus"} iconSize="14"></dees-icon>
                </div>
              </div>
            </div>

            <div class="tab-list">
              ${this.tabs.map(z=>w`
                <div
                  class="terminal-tab ${z.id===this.activeTabId?"active":""} ${z.exited?"exited":""}"
                  @click=${()=>this.switchToTab(z.id)}
                >
                  <dees-icon
                    .icon=${z.iconName}
                    iconSize="14"
                    class="tab-icon ${z.process&&!z.exited?"running":""}"
                  ></dees-icon>
                  <span class="tab-label">${z.label}</span>
                  ${z.exited?w`
                    <span class="exit-badge ${z.exitCode===0?"success":"error"}">
                      ${z.exitCode}
                    </span>
                  `:""}
                  ${z.closeable?w`
                    <span class="tab-close" @click=${E=>this.handleTabClose(E,z.id)}>
                      <dees-icon .icon=${"lucide:x"} iconSize="12"></dees-icon>
                    </span>
                  `:""}
                </div>
              `)}
            </div>
          </div>
        `:""}
      </div>
    `}async firstUpdated(){let C=await this.domtoolsPromise;this.isBright=C.themeManager.goBrightBoolean,this.terminalThemeSubscription=C.themeManager.themeObservable.subscribe($=>{this.isBright=$,this.tabManager.updateAllThemes($)});let z=C2.getInstance(),[E,T]=await Promise.all([z.loadXterm(),z.loadXtermFitAddon()]);this.tabManager.setXtermModules(E,T),await this.createShellTab()}async connectedCallback(){await super.connectedCallback()}async disconnectedCallback(){let C=this.shadowRoot?.getElementById("active-terminal-container");C&&this.resizeObserver.unobserve(C),this.terminalThemeSubscription&&(this.terminalThemeSubscription.unsubscribe(),this.terminalThemeSubscription=null),this.tabManager.disposeAll(),await super.disconnectedCallback()}async handleAddTab(){await this.createShellTab()}handleTabClose(C,z){C.stopPropagation(),this.closeTab(z)}switchToTab(C){if(C===this.activeTabId)return;let z=this.tabManager.getTab(C);if(!z)return;let E=this.activeTabId;this.activeTabId&&this.detachActiveTerminal(),this.activeTabId=C,this.tabs=this.tabManager.getAllTabs(),this.updateComplete.then(()=>{this.attachTerminalToContainer(z),this.dispatchEvent(new CustomEvent("tab-switched",{bubbles:!0,composed:!0,detail:{tabId:C,previousTabId:E}}))})}detachActiveTerminal(){let C=this.shadowRoot?.getElementById("active-terminal-container");C&&(C.innerHTML="")}attachTerminalToContainer(C){let z=this.shadowRoot?.getElementById("active-terminal-container");z&&(this.resizeObserver.observe(z),z.innerHTML="",C.terminal.open(z),C.fitAddon.fit(),C.terminal.focus())}handleResize(){if(this.activeTabId){let C=this.tabManager.getTab(this.activeTabId);C&&C.fitAddon.fit()}}async spawnProcessForTab(C,z,E=[]){if(!this.executionEnvironment){C.terminal.write("\x1B[31m"),C.terminal.write(`\u274C No execution environment available.\r
`),C.terminal.write("\x1B[0m");return}try{this.executionEnvironment.ready||(C.terminal.write(`Initializing environment...\r
`),await this.executionEnvironment.init());let T=await this.executionEnvironment.spawn(z,E);T.output.pipeTo(new WritableStream({write:H=>{C.terminal.write(H)}}));let $=T.input.getWriter();C.terminal.onData(H=>{$.write(H)}),this.tabManager.setTabProcess(C.id,T,$),this.tabs=this.tabManager.getAllTabs(),T.exit.then(H=>{this.handleProcessExit(C.id,H)})}catch(T){C.terminal.write("\x1B[31m"),C.terminal.write(`\u274C Failed to spawn process: ${T}\r
`),C.terminal.write("\x1B[0m"),console.error("Failed to spawn process:",T)}}handleProcessExit(C,z){let E=this.tabManager.getTab(C);if(!E)return;this.tabManager.markTabExited(C,z);let T=z===0?`\r
\x1B[32m[Process completed successfully]\x1B[0m\r
`:`\r
\x1B[31m[Process exited with code ${z}]\x1B[0m\r
`;E.terminal.write(T),this.tabs=this.tabManager.getAllTabs(),this.dispatchEvent(new CustomEvent("process-complete",{bubbles:!0,composed:!0,detail:{tabId:C,exitCode:z}})),E.closeable&&this.showExitedTabActionbar(C,E.label,z)}async showExitedTabActionbar(C,z,E){let T=E===0;(await this.showActionbar({message:T?`"${z}" completed. Close tab?`:`"${z}" exited (code ${E}). Close tab?`,type:T?"info":"warning",icon:T?"lucide:checkCircle":"lucide:alertTriangle",actions:[{id:"close",label:"Close Tab",primary:!0},{id:"keep",label:"Keep Open"}],timeout:{duration:1e4,defaultActionId:"close"},dismissible:!0})).actionId==="close"&&this.closeTab(C)}async createShellTab(C){let z=this.tabManager.createTab({type:"shell",label:C||`bash ${this.tabManager.getTabCount()+1}`,closeable:this.tabManager.getTabCount()>0},this.isBright);return this.tabs=this.tabManager.getAllTabs(),this.switchToTab(z.id),await this.updateComplete,await this.spawnProcessForTab(z,"jsh"),this.tabManager.getTabCount()===1&&this.setupCommand&&(await this.waitForPrompt(z.terminal,"~/"),z.inputWriter&&z.inputWriter.write(this.setupCommand)),this.dispatchEvent(new CustomEvent("tab-created",{bubbles:!0,composed:!0,detail:{tabId:z.id}})),z.id}async createProcessTab(C){let z=this.tabManager.createTab(C,this.isBright);return this.tabs=this.tabManager.getAllTabs(),C.switchToTab!==!1&&this.switchToTab(z.id),await this.updateComplete,C.command&&await this.spawnProcessForTab(z,C.command,C.args),this.dispatchEvent(new CustomEvent("tab-created",{bubbles:!0,composed:!0,detail:{tabId:z.id}})),z.id}getActiveTab(){return this.activeTabId&&this.tabManager.getTab(this.activeTabId)||null}getTabs(){return this.tabManager.getAllTabs()}selectTab(C){return this.tabManager.hasTab(C)?(this.switchToTab(C),!0):!1}closeTab(C){let z=this.tabManager.getTab(C);if(!z||!z.closeable)return!1;if(C===this.activeTabId){let E=this.tabManager.getAllTabs(),T=E.findIndex(H=>H.id===C),$=E[T+1]||E[T-1];$?this.switchToTab($.id):(this.activeTabId=null,this.detachActiveTerminal())}return this.tabManager.closeTab(C),this.tabs=this.tabManager.getAllTabs(),this.dispatchEvent(new CustomEvent("tab-closed",{bubbles:!0,composed:!0,detail:{tabId:C}})),!0}writeToTab(C,z){let E=this.tabManager.getTab(C);return E?(E.terminal.write(z),!0):!1}sendInputToTab(C,z){let E=this.tabManager.getTab(C);return!E||!E.inputWriter?!1:(E.inputWriter.write(z),!0)}async showActionbar(C){return this.terminalActionbar||(this.terminalActionbar=this.shadowRoot?.querySelector("dees-actionbar")),this.terminalActionbar?.show(C)}async waitForPrompt(C,z){return new Promise(E=>{let T=()=>{let $=C.buffer.active;for(let H=0;H<$.length;H++){let O=$.getLine(H);if(O&&O.translateToString().includes(z)){setTimeout(()=>{E()},100);return}}setTimeout(T,100)};T()})}async setEnvironmentVariables(C){if(!this.executionEnvironment)throw new Error("No execution environment available");let z="";for(let E in C)z+=`export ${E}="${C[E]}"
`;await this.executionEnvironment.writeFile("/source.env",z)}getExecutionEnvironment(){return this.executionEnvironment}static{va(i,a)}};return V=i})()});var Uj,Wj,hGt,fGt,mGt,Lxt,$xt=v(()=>{oe();W4();xo();tw();uw();cw();ll();zw();Uj=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Wj=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},hGt=(()=>{let t=[Q("demo-view-dashboard")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;Uj(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${p.bdTheme("#000","#fff")};
      }
      dees-statsgrid {
        margin-top: 20px;
      }
    `];statsTiles=[{id:"users",title:"Active Users",value:1234,type:"number",icon:"faUsers",description:"+15% from last week",color:"#22c55e"},{id:"pageviews",title:"Page Views",value:56700,type:"number",icon:"faEye",description:"56.7k total views",color:"#3b82f6"},{id:"uptime",title:"System Uptime",value:89,unit:"%",type:"gauge",icon:"faServer",description:"Last 30 days",color:"#10b981",gaugeOptions:{min:0,max:100,thresholds:[{value:80,color:"#ef4444"},{value:90,color:"#f59e0b"},{value:100,color:"#10b981"}]}},{id:"response",title:"Avg Response Time",value:3.2,unit:"s",type:"number",icon:"faClock",description:"-0.5s improvement",color:"#f59e0b"},{id:"revenue",title:"Monthly Revenue",value:48520,unit:"$",type:"trend",icon:"faDollarSign",description:"+8.2% growth",color:"#22c55e",trendData:[35e3,38e3,37500,41e3,39800,42e3,44100,43200,45600,47100,46800,48520]},{id:"traffic",title:"Traffic Trend",value:1680,type:"trend",icon:"faChartLine",description:"Last 7 days",color:"#3b82f6",trendData:[1200,1350,1100,1450,1600,1550,1680]}];render(){return w`
      <h1>Dashboard</h1>
      <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
      <dees-statsgrid
        .tiles=${this.statsTiles}
        @tile-action=${s=>{console.log("Tile action:",s.detail)}}
      ></dees-statsgrid>
    `}static{Wj(i,a)}};return n=i})(),fGt=(()=>{let t=[Q("demo-view-analytics")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;Uj(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${p.bdTheme("#000","#fff")};
      }
    `];render(){return w`
      <h1>Analytics</h1>
      <p>This is the analytics view. You can add charts and metrics here.</p>
    `}static{Wj(i,a)}};return n=i})(),mGt=(()=>{let t=[Q("demo-view-settings")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;Uj(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${p.bdTheme("#000","#fff")};
      }
      .settings-section {
        margin-top: 30px;
      }
      .settings-section h2 {
        font-size: 18px;
        margin: 0 0 15px 0;
        color: ${p.bdTheme("#333","#ccc")};
      }
      .horizontal-form-section {
        background: ${p.bdTheme("#f5f5f5","#1a1a1a")};
        padding: 20px;
        border-radius: 8px;
        margin: 15px 0;
      }
    `];render(){return w`
      <h1>Settings</h1>
      <p>Configure your application settings below:</p>
      
      <div class="settings-section">
        <h2>General Settings</h2>
        <dees-form>
          <dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
          <dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
          <dees-input-dropdown
            key="environment"
            label="Environment"
            .options=${[{option:"Development",key:"dev"},{option:"Staging",key:"staging"},{option:"Production",key:"prod"}]}
            .selectedOption=${{option:"Production",key:"prod"}}
          ></dees-input-dropdown>
          <dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
          <dees-input-checkbox key="enableAnalytics" label="Enable Analytics" value="false"></dees-input-checkbox>
          <dees-form-submit>Save General Settings</dees-form-submit>
        </dees-form>
      </div>
      
      <div class="settings-section">
        <h2>Display Preferences</h2>
        <div class="horizontal-form-section">
          <p style="margin-top: 0; margin-bottom: 16px;">Quick display settings using horizontal layout:</p>
          <dees-form horizontal-layout>
            <dees-input-dropdown
              key="theme"
              label="Theme"
              .enableSearch=${!1}
              .options=${[{option:"Light",key:"light"},{option:"Dark",key:"dark"},{option:"Auto",key:"auto"}]}
              .selectedOption=${{option:"Dark",key:"dark"}}
            ></dees-input-dropdown>
            <dees-input-dropdown
              key="language"
              label="Language"
              .enableSearch=${!1}
              .options=${[{option:"English",key:"en"},{option:"German",key:"de"},{option:"Spanish",key:"es"},{option:"French",key:"fr"}]}
              .selectedOption=${{option:"English",key:"en"}}
            ></dees-input-dropdown>
            <dees-input-checkbox key="compactMode" label="Compact Mode"></dees-input-checkbox>
          </dees-form>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>Notification Settings</h2>
        <dees-form>
          <dees-input-radiogroup
            .label=${"Email Frequency"}
            .options=${["Real-time","Daily Digest","Weekly Summary","Never"]}
            .selectedOption=${"Real-time"}
            .key=${"emailFrequency"}
          ></dees-input-radiogroup>
          <dees-input-checkbox key="pushNotifications" label="Enable Push Notifications" value="true"></dees-input-checkbox>
          <dees-input-checkbox key="soundAlerts" label="Play Sound for Alerts" value="true"></dees-input-checkbox>
          <dees-form-submit>Update Notifications</dees-form-submit>
        </dees-form>
      </div>
    `}static{Wj(i,a)}};return n=i})(),Lxt=()=>w`
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .demo-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <div class="demo-container">
    <dees-simple-appdash
      name="My Application"
      terminalSetupCommand="echo 'Welcome to the terminal!'"
      .viewTabs=${[{name:"Dashboard",iconName:"lucide:home",element:hGt},{name:"Analytics",iconName:"lucide:lineChart",element:fGt},{name:"Settings",iconName:"lucide:settings",element:mGt}]}
      @logout=${()=>{console.log("Logout event triggered"),alert("Logout clicked!")}}
      @view-select=${t=>{console.log("View selected:",t.detail.view.name)}}
    ></dees-simple-appdash>
  </div>
`});var w8,tn,Dxt,Axt=v(()=>{$xt();oe();At();He();w8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},tn=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Dxt=(()=>{let t=[Q("dees-simple-appdash")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],u=[D({type:Array})],l=[D({type:String})],y=[J()],w8(this,null,n,{kind:"accessor",name:"name",static:!1,private:!1,access:{has:S=>"name"in S,get:S=>S.name,set:(S,N)=>{S.name=N}},metadata:M},s,o),w8(this,null,u,{kind:"accessor",name:"viewTabs",static:!1,private:!1,access:{has:S=>"viewTabs"in S,get:S=>S.viewTabs,set:(S,N)=>{S.viewTabs=N}},metadata:M},c,d),w8(this,null,l,{kind:"accessor",name:"terminalSetupCommand",static:!1,private:!1,access:{has:S=>"terminalSetupCommand"in S,get:S=>S.terminalSetupCommand,set:(S,N)=>{S.terminalSetupCommand=N}},metadata:M},f,b),w8(this,null,y,{kind:"accessor",name:"selectedView",static:!1,private:!1,access:{has:S=>"selectedView"in S,get:S=>S.selectedView,set:(S,N)=>{S.selectedView=N}},metadata:M},g,h),w8(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=Lxt;static demoGroups=["Simple"];#e=tn(this,s,"Application Dashboard");get name(){return this.#e}set name(M){this.#e=M}#t=(tn(this,o),tn(this,c,[]));get viewTabs(){return this.#t}set viewTabs(M){this.#t=M}#a=(tn(this,d),tn(this,f,'echo "Terminal ready"'));get terminalSetupCommand(){return this.#a}set terminalSetupCommand(M){this.#a=M}#i=(tn(this,b),tn(this,g,void 0));get selectedView(){return this.#i}set selectedView(M){this.#i=M}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
        user-select: none;
        display: block;
        overflow: hidden;
        position: relative;
        height: 100%;
        width: 100%;
      }

      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: hidden;
      }

      .appbar {
        position: absolute;
        top: 0px;
        left: 0px;
        height: calc(100% - 24px);
        width: 240px;
        background: ${p.bdTheme("hsl(0 0% 99%)","hsl(0 0% 7%)")};
        border-right: 1px solid ${p.bdTheme("hsl(0 0% 91%)","hsl(0 0% 13%)")};
        font-size: 13px;
        font-family: 'Geist Sans', sans-serif;
        z-index: 2;
        display: grid;
        grid-template-rows: auto 1fr min-content;
        overflow: hidden;
      }

      .sidebar-header {
        padding: 20px 16px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 91%)","hsl(0 0% 13%)")};
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .header-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: ${p.bdTheme("linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)","linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)")};
        box-shadow: ${p.bdTheme("0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)","0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)")};
      }

      .header-icon-wrapper dees-icon {
        font-size: 18px;
        color: ${p.bdTheme("hsl(215 20% 40%)","hsl(215 20% 70%)")};
      }

      .appName {
        font-size: 15px;
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -0.02em;
      }

      .viewTabs-container {
        overflow-y: auto;
        padding: 12px 8px;
        scrollbar-width: thin;
        scrollbar-color: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")} transparent;
      }

      .viewTabs-container::-webkit-scrollbar {
        width: 6px;
      }

      .viewTabs-container::-webkit-scrollbar-track {
        background: transparent;
      }

      .viewTabs-container::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        border-radius: 3px;
      }

      .viewTabs-container::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("hsl(0 0% 75%)","hsl(0 0% 30%)")};
      }

      .section-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 50%)")};
        padding: 8px 12px 8px;
        margin-bottom: 4px;
      }

      .viewTabs {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .viewTab {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        cursor: default;
        transition: all 0.15s ease;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 65%)")};
        user-select: none;
        position: relative;
        border-radius: 8px;
      }

      .viewTab:hover {
        background: ${p.bdTheme("hsl(0 0% 0% / 0.04)","hsl(0 0% 100% / 0.05)")};
        color: ${p.bdTheme("hsl(0 0% 15%)","hsl(0 0% 90%)")};
      }

      .viewTab:active {
        background: ${p.bdTheme("hsl(0 0% 0% / 0.06)","hsl(0 0% 100% / 0.07)")};
        transform: scale(0.99);
      }

      .viewTab.selected {
        background: ${p.bdTheme("hsl(215 25% 95%)","hsl(215 20% 15%)")};
        color: ${p.bdTheme("hsl(215 25% 30%)","hsl(215 25% 85%)")};
        font-weight: 500;
      }

      .viewTab.selected::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: ${p.bdTheme("hsl(215 70% 50%)","hsl(215 70% 60%)")};
      }

      .viewTab dees-icon {
        font-size: 16px;
        opacity: 0.55;
        transition: all 0.15s ease;
      }

      .viewTab:hover dees-icon {
        opacity: 0.75;
      }

      .viewTab.selected dees-icon {
        opacity: 0.9;
        color: ${p.bdTheme("hsl(215 70% 45%)","hsl(215 70% 65%)")};
      }

      .viewTab span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .appActions {
        padding: 12px 8px;
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 91%)","hsl(0 0% 13%)")};
      }

      .action {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: default;
        transition: all 0.15s ease;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 65%)")};
      }

      .action:hover {
        background: ${p.bdTheme("hsl(0 84% 60% / 0.08)","hsl(0 84% 60% / 0.12)")};
        color: ${p.bdTheme("hsl(0 84% 45%)","hsl(0 84% 65%)")};
      }

      .action dees-icon {
        font-size: 16px;
        opacity: 0.6;
        transition: all 0.15s ease;
      }

      .action:hover dees-icon {
        opacity: 0.9;
        color: ${p.bdTheme("hsl(0 84% 45%)","hsl(0 84% 65%)")};
      }

      .appcontent {
        z-index: 1;
        position: absolute;
        top: 0px;
        right: 0px;
        height: calc(100% - 24px);
        bottom: 24px;
        width: calc(100% - 240px);
        overflow: auto;
        background: ${p.bdTheme("hsl(0 0% 97%)","hsl(0 0% 5%)")};
        overscroll-behavior: contain;
      }

      .controlbar {
        color: #fff;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 24px;
        background: ${p.bdTheme("hsl(220 13% 18%)","hsl(220 13% 12%)")};
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.01em;
      }

      .control {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        height: 100%;
        white-space: nowrap;
        cursor: default;
        color: hsl(0 0% 70%);
        transition: all 0.15s ease;
        border-left: 1px solid hsl(0 0% 100% / 0.08);
      }

      .control:first-child {
        border-left: none;
      }

      .control:hover {
        background: hsl(0 0% 100% / 0.06);
        color: hsl(0 0% 95%);
      }

      .control dees-icon {
        font-size: 13px;
      }

      .control.status-connected dees-icon {
        color: hsl(142 70% 50%);
      }

      .control.status-terminal dees-icon {
        color: hsl(45 90% 55%);
      }
    `];render(){return w`
      <div class="maincontainer">
        <div class="appbar">
          <div class="sidebar-header">
            <div class="header-icon-wrapper">
              <dees-icon .icon="${"lucide:layoutGrid"}"></dees-icon>
            </div>
            <div class="appName">${this.name}</div>
          </div>
          <div class="viewTabs-container">
            <div class="section-label">Navigation</div>
            <div class="viewTabs">
              ${this.viewTabs.map(M=>w`
                  <div
                    class="viewTab ${this.selectedView===M?"selected":""}"
                    @click=${()=>this.loadView(M)}
                  >
                    ${M.iconName?w`
                      <dees-icon .icon="${M.iconName.includes(":")?M.iconName:`lucide:${M.iconName}`}"></dees-icon>
                    `:w`
                      <dees-icon .icon="${"lucide:file"}"></dees-icon>
                    `}
                    <span>${M.name}</span>
                  </div>
                `)}
            </div>
          </div>
          <div class="appActions">
            <div class="action" @click=${()=>{this.dispatchEvent(new CustomEvent("logout",{bubbles:!0,composed:!0}))}}>
              <dees-icon .icon="${"lucide:logOut"}"></dees-icon>
              <span>Sign out</span>
            </div>
          </div>
        </div>
        <div class="appcontent">
          <!-- Content goes here -->
        </div>
        <div class="controlbar">
          <div class="control status-connected">
            <dees-icon .icon="${"lucide:wifi"}"></dees-icon>
            <span>Connected</span>
          </div>
          <div class="control status-terminal" @click=${this.launchTerminal}>
            <dees-icon .icon="${"lucide:terminal"}"></dees-icon>
            <span>Terminal</span>
          </div>
        </div>
      </div>
    `}async firstUpdated(M){let S=await this.domtoolsPromise;if(super.firstUpdated(M),this.viewTabs&&this.viewTabs.length>0){let N=this.selectedView||this.viewTabs[0];await this.loadView(N)}}currentTerminal=tn(this,h);async launchTerminal(){let M=await this.domtoolsPromise;if(this.currentTerminal){await this.closeTerminal();return}let S=this.shadowRoot.querySelector(".maincontainer"),{DeesWorkspaceTerminal:N}=await Promise.resolve().then(()=>(x8(),Txt)),_=new N;return _.setupCommand=this.terminalSetupCommand,this.currentTerminal=_,S.appendChild(_),_.style.position="absolute",_.style.zIndex="10",_.style.top="0px",_.style.left="240px",_.style.right="0px",_.style.bottom="24px",_.style.opacity="0",_.style.transform="translateY(8px) scale(0.99)",_.style.transition="all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",_.style.boxShadow="0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)",_.style.maxWidth=`calc(${S.clientWidth}px -240px)`,_.style.maxHeight=`calc(${S.clientHeight}px - 24px)`,_.addEventListener("close",()=>this.closeTerminal()),await M.convenience.smartdelay.delayFor(0),_.style.opacity="1",_.style.transform="translateY(0) scale(1)",_}async closeTerminal(){let M=await this.domtoolsPromise;this.currentTerminal&&(this.currentTerminal.style.opacity="0",this.currentTerminal.style.transform="translateY(8px) scale(0.99)",await M.convenience.smartdelay.delayFor(250),this.currentTerminal.remove(),this.currentTerminal=null)}currentView;async loadView(M){let S=this.shadowRoot.querySelector(".appcontent"),N=new M.element;this.currentView&&this.currentView.remove(),S.appendChild(N),this.currentView=N,this.selectedView=M,this.dispatchEvent(new CustomEvent("view-select",{detail:{view:M},bubbles:!0,composed:!0}))}static{tn(i,a)}};return x=i})()});var Ext=v(()=>{Axt()});var Pxt,Ixt=v(()=>{oe();Pxt=()=>w`
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .demo-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <div class="demo-container">
    <dees-simple-login 
      name="My Application"
      @login=${t=>{console.log("Login event received:",t.detail);let e=t.detail?.data||t.detail;e?.username&&e?.password?alert(`Login attempted with:
Username: ${e.username}
Password: ${e.password}`):console.error("Invalid login data structure:",t.detail)}}
    >
      <div style="padding: 40px; text-align: center;">
        <h1>Welcome!</h1>
        <p>This is the slotted content that appears after login.</p>
      </div>
    </dees-simple-login>
  </div>
`});var Nxt,Gj,Rxt,Fxt=v(()=>{Ixt();oe();He();Nxt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Gj=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Rxt=(()=>{let t=[Q("dees-simple-login")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],Nxt(this,null,n,{kind:"accessor",name:"name",static:!1,private:!1,access:{has:d=>"name"in d,get:d=>d.name,set:(d,l)=>{d.name=l}},metadata:c},s,o),Nxt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=Pxt;static demoGroups=["Simple"];#e=Gj(this,s,"Application");get name(){return this.#e}set name(c){this.#e=c}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        color: ${p.bdTheme("hsl(0 0% 3.9%)","hsl(0 0% 98%)")};
        user-select: none;
        display: block;
        width: 100%;
        height: 100%;
        font-family: 'Geist Sans', sans-serif;
      }

      .loginContainer {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 3.9%)")};
      }

      .slotContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
      }

      .login {
        width: 100%;
        max-width: 360px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .login-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }

      .header {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: ${p.bdTheme("hsl(0 0% 9%)","hsl(0 0% 98%)")};
      }

      .subheader {
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 45.1%)","hsl(0 0% 63.9%)")};
      }

      .login-card {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 89.8%)","hsl(0 0% 14.9%)")};
        border-radius: 8px;
        padding: 24px;
      }

      .login-card dees-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .login-card dees-input-text {
        width: 100%;
      }

      .login-card dees-form-submit {
        margin-top: 8px;
        width: 100%;
      }
    `];render(){return w`
      <div class="loginContainer">
        <div class="login">
          <div class="login-header">
            <div class="header">Sign in</div>
            <div class="subheader">Enter your credentials to access ${this.name}</div>
          </div>
          <div class="login-card">
            <dees-form>
              <dees-input-text key="username" label="Username" required></dees-input-text>
              <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
              <dees-form-submit>Sign in</dees-form-submit>
            </dees-form>
          </div>
        </div>
      </div>
      <div class="slotContainer">
        <slot></slot>
      </div>
    `}async firstUpdated(c){super.firstUpdated(c);let d=this.shadowRoot.querySelector("dees-form");d&&d.addEventListener("formData",l=>{this.dispatchEvent(new CustomEvent("login",{detail:l.detail,bubbles:!0,composed:!0}))})}async switchToSlottedContent(){let c=await this.domtoolsPromise,d=this.shadowRoot.querySelector(".login"),l=this.shadowRoot.querySelector(".loginContainer"),f=this.shadowRoot.querySelector(".slotContainer");d.style.opacity="0",d.style.transform="translateY(20px)",l.style.pointerEvents="none",f.style.transform="translateY(20px)",await c.convenience.smartdelay.delayFor(300),f.style.opacity="1",f.style.transform="translateY(0px)",await c.convenience.smartdelay.delayFor(300),f.style.pointerEvents="all"}constructor(){super(...arguments),Gj(this,o)}static{Gj(i,a)}};return u=i})()});var Oxt=v(()=>{Fxt()});var Bxt=v(()=>{_xt();Ext();Oxt()});var Hxt=v(()=>{At()});var qxt,Vxt=v(()=>{oe();qxt=()=>w`
    <style>
      .demoWrapper {
        display: block;
        flex-direction: column;
        align-items: center;
        
        background: #888888;
      }
      .logs {
        padding: 16px;
        width: 600px;
        color: #fff;
        font-family: monospace;
      }
      .logs div {
        margin: 4px 0;
      }
    </style>
    <div class="demoWrapper">
      <dees-searchbar
        @search-changed=${a=>{let r=a.target.closest(".demoWrapper")?.querySelector("#changed");r&&(r.textContent=`search-changed: ${a.detail.value}`)}}
        @search-submit=${a=>{let r=a.target.closest(".demoWrapper")?.querySelector("#submitted");r&&(r.textContent=`search-submit: ${a.detail.value}`)}}
      ></dees-searchbar>
      <div class="logs">
        <div id="changed">search-changed:</div>
        <div id="submitted">search-submit:</div>
      </div>
    </div>
  `});var jxt,Yj,Uxt,Wxt=v(()=>{oe();xi();Vxt();He();jxt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Yj=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Uxt=(()=>{let t=[Q("dees-searchbar")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D()],jxt(this,null,n,{kind:"accessor",name:"filters",static:!1,private:!1,access:{has:d=>"filters"in d,get:d=>d.filters,set:(d,l)=>{d.filters=l}},metadata:c},s,o),jxt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=qxt;static demoGroups=["Utility"];static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        padding: 40px;
        font-family: Dees Sans;
        display: block;
        background: ${p.bdTheme("#eeeeeb","#000000")};
      }

      .searchboxContainer {
        position: relative;
        margin: auto;
        max-width: 800px;
        background: ${p.bdTheme("#00000015","#ffffff15")};
        --boxHeight: 60px;
        height: var(--boxHeight);
        border-radius: var(--boxHeight);
        display: grid;
        grid-template-columns: 1fr 140px;
        justify-content: center;
        align-items: center;
        border-top: 1px solid ${p.bdTheme("#00000015","#ffffff20")};
      }

      input {
        height: 100%;
        width: 100%;
        border: none;
        background: none;
        color: ${p.bdTheme("#000000","#eeeeeb")};
        padding-left: 25px;
        margin-right: -8px;
        outline: none;
        font-size: 16px;
      }

      .searchButton {
        --buttonPadding: 8px;
        background: ${p.bdTheme("#eeeeeb","#000000")};
        color: ${p.bdTheme("#000000","#eeeeeb")};
        line-height: calc(var(--boxHeight) - (var(--buttonPadding) * 2));
        border-radius: var(--boxHeight);
        transform: scale(1) ;
        transform-origin: 50% 50%;
        text-align: center;
        
        transition: transform 0.1s, background 0.1s;
        margin-right: var(--buttonPadding);
        user-select: none;
      }

      .searchButton:hover {
        color: #fff;
        background: ${p.bdTheme(al.blue,yi.blue)};
      }

      .searchButton:active {
        color: #fff;
        background: ${p.bdTheme(al.blueActive,yi.blueActive)};
        transform: scale(0.98);
      }

      .filters {
        margin: auto;
        max-width: 800px;
      }
    `];#e=Yj(this,s,[]);get filters(){return this.#e}set filters(c){this.#e=c}searchInput=Yj(this,o);searchButton;constructor(){super()}render(){return w`
      <div class="searchboxContainer">
        <input type="text" placeholder="Your Skills (e.g. TypeScript, Rust, Projectmanagement)" />
        <div class="searchButton">Search -></div>
      </div>
      ${this.filters.length>0?w`
        <div class="filters">
        <dees-heading level="hr-small">Filters</dees-heading>
        <dees-input-dropdown .label=${"location"}></dees-input-dropdown>
      </div>  
      `:w``}
    `}firstUpdated(){this.searchInput.addEventListener("input",()=>{this.dispatchEvent(new CustomEvent("search-changed",{bubbles:!0,composed:!0,detail:{value:this.searchInput.value}}))}),this.searchInput.addEventListener("keydown",c=>{c.key==="Enter"&&this._dispatchSubmit()}),this.searchButton.addEventListener("click",()=>this._dispatchSubmit())}_dispatchSubmit(){this.dispatchEvent(new CustomEvent("search-submit",{bubbles:!0,composed:!0,detail:{value:this.searchInput.value}}))}static{Yj(i,a)}};return u=i})()});var Gxt=v(()=>{Wxt()});var Yxt,Zxt=v(()=>{oe();Yxt=()=>w`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 48px;
      background: ${p.bdTheme("#f8f9fa","#0a0a0a")};
      min-height: 100vh;
    }

    .section {
      background: ${p.bdTheme("#ffffff","#18181b")};
      border: 1px solid ${p.bdTheme("#e5e7eb","#27272a")};
      border-radius: 8px;
      padding: 24px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .section-description {
      font-size: 14px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 24px;
    }

    .token-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    .token-item {
      background: ${p.bdTheme("#f4f4f5","#27272a")};
      border-radius: 6px;
      padding: 16px;
    }

    .token-name {
      font-family: 'Intel One Mono', monospace;
      font-size: 12px;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
      margin-bottom: 8px;
    }

    .token-value {
      font-size: 14px;
      font-weight: 500;
      color: ${p.bdTheme("#09090b","#fafafa")};
    }

    .spacing-demo {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .spacing-box {
      background: ${p.bdTheme("#3b82f6","#3b82f6")};
      border-radius: 4px;
    }

    .radius-demo {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .radius-box {
      width: 60px;
      height: 60px;
      background: ${p.bdTheme("#3b82f6","#3b82f6")};
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 11px;
      font-weight: 500;
    }

    .shadow-demo {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .shadow-box {
      width: 100px;
      height: 100px;
      background: ${p.bdTheme("#ffffff","#27272a")};
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 500;
      color: ${p.bdTheme("#71717a","#a1a1aa")};
    }

    .height-demo {
      display: flex;
      gap: 16px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .height-box {
      background: ${p.bdTheme("#3b82f6","#3b82f6")};
      width: 120px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: 500;
    }
  </style>
  <div class="demo-container">
    <dees-theme>
      <div class="section">
        <div class="section-title">Spacing Scale</div>
        <div class="section-description">
          CSS variables: --dees-spacing-xs through --dees-spacing-3xl
        </div>
        <div class="spacing-demo">
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-xs); height: var(--dees-spacing-xs);"></div>
            <div class="token-name">xs (4px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-sm); height: var(--dees-spacing-sm);"></div>
            <div class="token-name">sm (8px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-md); height: var(--dees-spacing-md);"></div>
            <div class="token-name">md (12px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-lg); height: var(--dees-spacing-lg);"></div>
            <div class="token-name">lg (16px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-xl); height: var(--dees-spacing-xl);"></div>
            <div class="token-name">xl (24px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-2xl); height: var(--dees-spacing-2xl);"></div>
            <div class="token-name">2xl (32px)</div>
          </div>
          <div>
            <div class="spacing-box" style="width: var(--dees-spacing-3xl); height: var(--dees-spacing-3xl);"></div>
            <div class="token-name">3xl (48px)</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Border Radius Scale</div>
        <div class="section-description">
          CSS variables: --dees-radius-xs through --dees-radius-full
        </div>
        <div class="radius-demo">
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-xs);">xs</div>
            <div class="token-name">2px</div>
          </div>
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-sm);">sm</div>
            <div class="token-name">4px</div>
          </div>
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-md);">md</div>
            <div class="token-name">6px</div>
          </div>
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-lg);">lg</div>
            <div class="token-name">8px</div>
          </div>
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-xl);">xl</div>
            <div class="token-name">12px</div>
          </div>
          <div>
            <div class="radius-box" style="border-radius: var(--dees-radius-full);">full</div>
            <div class="token-name">999px</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Shadow Elevation Scale</div>
        <div class="section-description">
          CSS variables: --dees-shadow-xs through --dees-shadow-lg
        </div>
        <div class="shadow-demo">
          <div>
            <div class="shadow-box" style="box-shadow: var(--dees-shadow-xs);">xs</div>
            <div class="token-name">minimal</div>
          </div>
          <div>
            <div class="shadow-box" style="box-shadow: var(--dees-shadow-sm);">sm</div>
            <div class="token-name">subtle</div>
          </div>
          <div>
            <div class="shadow-box" style="box-shadow: var(--dees-shadow-md);">md</div>
            <div class="token-name">medium</div>
          </div>
          <div>
            <div class="shadow-box" style="box-shadow: var(--dees-shadow-lg);">lg</div>
            <div class="token-name">prominent</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Control Height Scale</div>
        <div class="section-description">
          CSS variables: --dees-control-height-sm through --dees-control-height-xl
        </div>
        <div class="height-demo">
          <div>
            <div class="height-box" style="height: var(--dees-control-height-sm);">sm</div>
            <div class="token-name">32px</div>
          </div>
          <div>
            <div class="height-box" style="height: var(--dees-control-height-md);">md</div>
            <div class="token-name">36px</div>
          </div>
          <div>
            <div class="height-box" style="height: var(--dees-control-height-lg);">lg</div>
            <div class="token-name">40px</div>
          </div>
          <div>
            <div class="height-box" style="height: var(--dees-control-height-xl);">xl</div>
            <div class="token-name">48px</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Transition Durations</div>
        <div class="section-description">
          CSS variables: --dees-transition-fast through --dees-transition-slower
        </div>
        <div class="token-grid">
          <div class="token-item">
            <div class="token-name">--dees-transition-fast</div>
            <div class="token-value">0.1s</div>
          </div>
          <div class="token-item">
            <div class="token-name">--dees-transition-default</div>
            <div class="token-value">0.15s</div>
          </div>
          <div class="token-item">
            <div class="token-name">--dees-transition-slow</div>
            <div class="token-value">0.2s</div>
          </div>
          <div class="token-item">
            <div class="token-name">--dees-transition-slower</div>
            <div class="token-value">0.3s</div>
          </div>
        </div>
      </div>
    </dees-theme>
  </div>
`});var n3,or,Xxt,Kxt=v(()=>{oe();He();Zxt();n3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},or=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Xxt=(()=>{let t=[Q("dees-theme")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Object})],l=[D({type:Object})],y=[D({type:Object})],x=[D({type:Object})],n3(this,null,n,{kind:"accessor",name:"customSpacing",static:!1,private:!1,access:{has:k=>"customSpacing"in k,get:k=>k.customSpacing,set:(k,I)=>{k.customSpacing=I}},metadata:_},s,o),n3(this,null,u,{kind:"accessor",name:"customRadius",static:!1,private:!1,access:{has:k=>"customRadius"in k,get:k=>k.customRadius,set:(k,I)=>{k.customRadius=I}},metadata:_},c,d),n3(this,null,l,{kind:"accessor",name:"customShadows",static:!1,private:!1,access:{has:k=>"customShadows"in k,get:k=>k.customShadows,set:(k,I)=>{k.customShadows=I}},metadata:_},f,b),n3(this,null,y,{kind:"accessor",name:"customTransitions",static:!1,private:!1,access:{has:k=>"customTransitions"in k,get:k=>k.customTransitions,set:(k,I)=>{k.customTransitions=I}},metadata:_},g,h),n3(this,null,x,{kind:"accessor",name:"customControlHeights",static:!1,private:!1,access:{has:k=>"customControlHeights"in k,get:k=>k.customControlHeights,set:(k,I)=>{k.customControlHeights=I}},metadata:_},M,S),n3(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=Yxt;static demoGroups=["Utility"];#e=or(this,s,null);get customSpacing(){return this.#e}set customSpacing(_){this.#e=_}#t=(or(this,o),or(this,c,null));get customRadius(){return this.#t}set customRadius(_){this.#t=_}#a=(or(this,d),or(this,f,null));get customShadows(){return this.#a}set customShadows(_){this.#a=_}#i=(or(this,b),or(this,g,null));get customTransitions(){return this.#i}set customTransitions(_){this.#i=_}#r=(or(this,h),or(this,M,null));get customControlHeights(){return this.#r}set customControlHeights(_){this.#r=_}static styles=[Se,p.defaultStyles,X`
      :host {
        display: contents;
      }
    `];render(){return w`
      <style>
        ${this.generateCustomStyles()}
      </style>
      <slot></slot>
    `}generateCustomStyles(){let _=[":host {"];if(this.customSpacing)for(let[k,I]of Object.entries(this.customSpacing))I&&_.push(`  --dees-spacing-${k}: ${I};`);if(this.customRadius)for(let[k,I]of Object.entries(this.customRadius))I&&_.push(`  --dees-radius-${k}: ${I};`);if(this.customShadows)for(let[k,I]of Object.entries(this.customShadows))I&&_.push(`  --dees-shadow-${k}: ${I};`);if(this.customTransitions){for(let[k,I]of Object.entries(this.customTransitions))if(I){let L=k==="default"?"default":k;_.push(`  --dees-transition-${L}: ${I};`)}}if(this.customControlHeights)for(let[k,I]of Object.entries(this.customControlHeights))I&&_.push(`  --dees-control-height-${k}: ${I};`);return _.push("}"),_.join(`
`)}setSpacing(_,k){this.customSpacing={...this.customSpacing,[_]:k}}setRadius(_,k){this.customRadius={...this.customRadius,[_]:k}}setShadow(_,k){this.customShadows={...this.customShadows,[_]:k}}setTransition(_,k){this.customTransitions={...this.customTransitions,[_]:k}}setControlHeight(_,k){this.customControlHeights={...this.customControlHeights,[_]:k}}getTheme(){return{colors:co.colors,spacing:{...co.spacing,...this.customSpacing},radius:{...co.radius,...this.customRadius},shadows:{...co.shadows,...this.customShadows},transitions:{...co.transitions,...this.customTransitions},controlHeights:{...co.controlHeights,...this.customControlHeights}}}resetToDefaults(){this.customSpacing=null,this.customRadius=null,this.customShadows=null,this.customTransitions=null,this.customControlHeights=null}applyTheme(_){_.spacing&&(this.customSpacing=_.spacing),_.radius&&(this.customRadius=_.radius),_.shadows&&(this.customShadows=_.shadows),_.transitions&&(this.customTransitions=_.transitions),_.controlHeights&&(this.customControlHeights=_.controlHeights)}constructor(){super(...arguments),or(this,S)}static{or(i,a)}};return N=i})()});var Qxt=v(()=>{Kxt()});var Jxt,ewt=v(()=>{oe();Zj();Jxt=async()=>{let t=await Xw.createAndShow();setTimeout(async()=>{await t.destroy()},1e4)}});var Xj,M8,Xw,Zj=v(()=>{oe();ewt();Ns();oe();He();Xj=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},M8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},Xw=(()=>{let t=[Q("dees-updater")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],Xj(this,null,n,{kind:"accessor",name:"currentVersion",static:!1,private:!1,access:{has:b=>"currentVersion"in b,get:b=>b.currentVersion,set:(b,y)=>{b.currentVersion=y}},metadata:f},s,o),Xj(this,null,u,{kind:"accessor",name:"updatedVersion",static:!1,private:!1,access:{has:b=>"updatedVersion"in b,get:b=>b.updatedVersion,set:(b,y)=>{b.updatedVersion=y}},metadata:f},c,d),Xj(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=Jxt;static demoGroups=["Utility"];static async createAndShow(){let f=new l;return document.body.appendChild(f),f}#e=M8(this,s,void 0);get currentVersion(){return this.#e}set currentVersion(f){this.#e=f}#t=(M8(this,o),M8(this,c,void 0));get updatedVersion(){return this.#t}set updatedVersion(f){this.#t=f}constructor(){super(),M8(this,d),rt.elementBasic.setup()}static styles=[Se,p.defaultStyles,X`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      .modalContainer {
        will-change: transform;
        position: relative;
        background: ${p.bdTheme("#eeeeeb","#222")};
        max-width: 800px;
        border-radius: 8px;
        border-top: 1px solid ${p.bdTheme("#eeeeeb","#333")};
      }

      .headingContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 40px;
      }

      h1 {
        margin: none;
        font-size: 20px;
        color: ${p.bdTheme("#333","#fff")};
        margin-left: 20px;
        font-weight: normal;
      }

      .buttonContainer {
        display: grid;
        grid-template-columns: 50% 50%;
      }
    `];render(){return w`
      <dees-windowlayer
        @clicked="${this.windowLayerClicked}"
        .options=${{blur:!0}}
      >
        <div class="modalContainer">
          <div class="headingContainer">
            <dees-spinner .size=${60}></dees-spinner>
            <h1>Updating the application...</h1>
          </div>
          <div class="progress">
            <dees-progressbar .progress=${.5}></dees-progressbar>
          </div>
          <div class="buttonContainer">
            <dees-button>More info</dees-button>
            <dees-button>Changelog</dees-button>
          </div>
        </div> </dees-windowlayer
      >>
    `}async destroy(){this.parentElement.removeChild(this)}windowLayerClicked(){}static{M8(i,a)}};return l=i})()});var twt=v(()=>{Zj()});var awt=v(()=>{Xq()});var iwt=v(()=>{Hxt();Gxt();Qxt();twt();awt()});var _l,ti,rwt,Kw=v(()=>{oe();_t();He();At();r2();r2();rl();xo();xo();_l=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ti=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},rwt=(()=>{let t=[Q("dees-workspace-filetree")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[];var I=class extends r{static{i=this}static{let L=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:String})],l=[D({type:String})],y=[J()],x=[J()],N=[J()],_l(this,null,n,{kind:"accessor",name:"executionEnvironment",static:!1,private:!1,access:{has:A=>"executionEnvironment"in A,get:A=>A.executionEnvironment,set:(A,V)=>{A.executionEnvironment=V}},metadata:L},s,o),_l(this,null,u,{kind:"accessor",name:"rootPath",static:!1,private:!1,access:{has:A=>"rootPath"in A,get:A=>A.rootPath,set:(A,V)=>{A.rootPath=V}},metadata:L},c,d),_l(this,null,l,{kind:"accessor",name:"selectedPath",static:!1,private:!1,access:{has:A=>"selectedPath"in A,get:A=>A.selectedPath,set:(A,V)=>{A.selectedPath=V}},metadata:L},f,b),_l(this,null,y,{kind:"accessor",name:"treeData",static:!1,private:!1,access:{has:A=>"treeData"in A,get:A=>A.treeData,set:(A,V)=>{A.treeData=V}},metadata:L},g,h),_l(this,null,x,{kind:"accessor",name:"isLoading",static:!1,private:!1,access:{has:A=>"isLoading"in A,get:A=>A.isLoading,set:(A,V)=>{A.isLoading=V}},metadata:L},M,S),_l(this,null,N,{kind:"accessor",name:"errorMessage",static:!1,private:!1,access:{has:A=>"errorMessage"in A,get:A=>A.errorMessage,set:(A,V)=>{A.errorMessage=V}},metadata:L},_,k),_l(null,e={value:i},t,{kind:"class",name:i.name,metadata:L},null,a),I=i=e.value,L&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:L})}static demo=()=>w`
    <div style="width: 300px; height: 400px; position: relative;">
      <dees-workspace-filetree></dees-workspace-filetree>
    </div>
  `;static demoGroups=["Workspace"];#e=ti(this,s,null);get executionEnvironment(){return this.#e}set executionEnvironment(L){this.#e=L}#t=(ti(this,o),ti(this,c,"/"));get rootPath(){return this.#t}set rootPath(L){this.#t=L}#a=(ti(this,d),ti(this,f,""));get selectedPath(){return this.#a}set selectedPath(L){this.#a=L}#i=(ti(this,b),ti(this,g,[]));get treeData(){return this.#i}set treeData(L){this.#i=L}#r=(ti(this,h),ti(this,M,!1));get isLoading(){return this.#r}set isLoading(L){this.#r=L}#s=(ti(this,S),ti(this,_,""));get errorMessage(){return this.#s}set errorMessage(L){this.#s=L}expandedPaths=(ti(this,k),new Set);loadTreeStarted=!1;clipboardPath=null;clipboardOperation=null;fileWatcher=null;refreshDebounceTimeout=null;lastExecutionEnvironment=null;static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        background: ${p.bdTheme("hsl(0 0% 98%)","hsl(0 0% 9%)")};
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 13px;
      }

      .tree-container {
        padding: 8px 0;
      }

      .tree-item {
        display: flex;
        align-items: center;
        padding: 4px 8px;
        cursor: pointer;
        user-select: none;
        border-radius: 4px;
        margin: 1px 4px;
        transition: background 0.1s ease;
      }

      .tree-item:hover {
        background: ${p.bdTheme("hsl(0 0% 93%)","hsl(0 0% 14%)")};
      }

      .tree-item.selected {
        background: ${p.bdTheme("hsl(210 100% 95%)","hsl(210 50% 20%)")};
        color: ${p.bdTheme("hsl(210 100% 40%)","hsl(210 100% 70%)")};
      }

      .tree-item.selected:hover {
        background: ${p.bdTheme("hsl(210 100% 92%)","hsl(210 50% 25%)")};
      }

      .indent {
        display: inline-block;
        width: 16px;
        flex-shrink: 0;
      }

      .expand-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        transition: transform 0.15s ease;
      }

      .expand-icon.expanded {
        transform: rotate(90deg);
      }

      .expand-icon.hidden {
        visibility: hidden;
      }

      .file-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .file-icon dees-icon {
        width: 16px;
        height: 16px;
      }

      .file-icon.folder {
        color: ${p.bdTheme("hsl(45 80% 45%)","hsl(45 70% 55%)")};
      }

      .file-icon.file {
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
      }

      .file-icon.typescript {
        color: hsl(211 60% 48%);
      }

      .file-icon.javascript {
        color: hsl(53 93% 54%);
      }

      .file-icon.json {
        color: hsl(45 80% 50%);
      }

      .file-icon.html {
        color: hsl(14 77% 52%);
      }

      .file-icon.css {
        color: hsl(228 77% 59%);
      }

      .file-icon.markdown {
        color: hsl(0 0% 50%);
      }

      .file-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 85%)")};
      }

      .loading {
        padding: 16px;
        text-align: center;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
      }

      .error {
        padding: 16px;
        text-align: center;
        color: hsl(0 70% 50%);
      }

      .empty {
        padding: 16px;
        text-align: center;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        font-style: italic;
      }

      .filetree-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 36px;
        padding: 0 12px;
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 8%)")};
        position: sticky;
        top: 0;
        z-index: 1;
      }

      .toolbar-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .toolbar-actions {
        display: flex;
        gap: 4px;
      }

      .toolbar-button {
        padding: 4px;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.15s, background 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 70%)")};
      }

      .toolbar-button:hover {
        opacity: 1;
        background: ${p.bdTheme("hsl(0 0% 0% / 0.08)","hsl(0 0% 100% / 0.1)")};
      }
    `];render(){return this.executionEnvironment?this.isLoading?w`
        <div class="loading">
          Loading files...
        </div>
      `:this.errorMessage?w`
        <div class="error">
          ${this.errorMessage}
        </div>
      `:w`
      <div class="filetree-toolbar">
        <span class="toolbar-title">Explorer</span>
        <div class="toolbar-actions">
          <div class="toolbar-button" @click=${()=>this.createNewFile("/")} title="New File">
            <dees-icon .icon=${"lucide:filePlus"} iconSize="16"></dees-icon>
          </div>
          <div class="toolbar-button" @click=${()=>this.createNewFolder("/")} title="New Folder">
            <dees-icon .icon=${"lucide:folderPlus"} iconSize="16"></dees-icon>
          </div>
        </div>
      </div>
      ${this.treeData.length===0?w`<div class="empty">No files found.</div>`:w`
            <div class="tree-container" @contextmenu=${this.handleEmptySpaceContextMenu}>
              ${this.renderTree(this.treeData)}
            </div>
          `}
    `:w`
        <div class="empty">
          No execution environment provided.
        </div>
      `}renderTree(L){return L.map(A=>this.renderNode(A))}renderNode(L){let A=L.type==="directory",V=this.expandedPaths.has(L.path),C=L.path===this.selectedPath,z=this.getFileIconClass(L);return w`
      <div
        class="tree-item ${C?"selected":""}"
        style="padding-left: ${8+L.level*16}px"
        @click=${E=>this.handleItemClick(E,L)}
        @contextmenu=${E=>this.handleContextMenu(E,L)}
      >
        <span class="expand-icon ${V?"expanded":""} ${A?"":"hidden"}">
          <dees-icon .icon=${"lucide:chevronRight"} iconSize="12"></dees-icon>
        </span>
        <span class="file-icon ${z}">
          <dees-icon .icon=${this.getFileIcon(L)} iconSize="16"></dees-icon>
        </span>
        <span class="file-name">${L.name}</span>
      </div>
      ${A&&V&&L.children?this.renderTree(L.children):""}
    `}getFileIcon(L){if(L.type==="directory")return this.expandedPaths.has(L.path)?"lucide:folderOpen":"lucide:folder";switch(L.name.split(".").pop()?.toLowerCase()){case"ts":case"tsx":return"lucide:fileCode";case"js":case"jsx":return"lucide:fileCode";case"json":return"lucide:fileJson";case"html":return"lucide:fileCode";case"css":case"scss":case"less":return"lucide:fileCode";case"md":return"lucide:fileText";case"png":case"jpg":case"jpeg":case"gif":case"svg":return"lucide:image";default:return"lucide:file"}}getFileIconClass(L){if(L.type==="directory")return"folder";switch(L.name.split(".").pop()?.toLowerCase()){case"ts":case"tsx":return"typescript";case"js":case"jsx":return"javascript";case"json":return"json";case"html":return"html";case"css":case"scss":case"less":return"css";case"md":return"markdown";default:return"file"}}async handleItemClick(L,A){L.stopPropagation(),A.type==="directory"?await this.toggleDirectory(A):(this.selectedPath=A.path,this.dispatchEvent(new CustomEvent("file-select",{detail:{path:A.path,name:A.name},bubbles:!0,composed:!0})))}async toggleDirectory(L){this.expandedPaths.has(L.path)?this.expandedPaths.delete(L.path):(this.expandedPaths.add(L.path),(!L.children||L.children.length===0)&&await this.loadDirectoryContents(L)),this.requestUpdate()}async loadDirectoryContents(L){if(this.executionEnvironment)try{let A=await this.executionEnvironment.readDir(L.path);L.children=this.sortEntries(A).map(V=>({...V,level:L.level+1,expanded:!1,children:V.type==="directory"?[]:void 0}))}catch(A){console.error(`Failed to load directory ${L.path}:`,A)}}async handleContextMenu(L,A){L.preventDefault(),L.stopPropagation();let V=[];A.type==="directory"&&V.push({name:"New File",iconName:"filePlus",action:async()=>this.createNewFile(A.path)},{name:"New Folder",iconName:"folderPlus",action:async()=>this.createNewFolder(A.path)},{divider:!0}),V.push({name:"Rename",iconName:"pencil",action:async()=>this.renameItem(A)},{name:"Duplicate",iconName:"files",action:async()=>this.duplicateItem(A)},{name:"Copy",iconName:"copy",action:async()=>this.copyItem(A)}),A.type==="directory"&&this.clipboardPath&&V.push({name:"Paste",iconName:"clipboard",action:async()=>this.pasteItem(A.path)}),V.push({divider:!0},{name:"Delete",iconName:"trash2",action:async()=>this.deleteItem(A)}),await jt.openContextMenuWithOptions(L,V)}async handleEmptySpaceContextMenu(L){if(L.target.closest(".tree-item"))return;L.preventDefault(),L.stopPropagation();let V=[{name:"New File",iconName:"filePlus",action:async()=>this.createNewFile("/")},{name:"New Folder",iconName:"folderPlus",action:async()=>this.createNewFolder("/")}];this.clipboardPath&&V.push({divider:!0},{name:"Paste",iconName:"clipboard",action:async()=>this.pasteItem("/")}),await jt.openContextMenuWithOptions(L,V)}async showInputModal(L){return new Promise(async A=>{let V=await s1.createAndShow({heading:L.heading,width:"small",content:w`
          <dees-input-text
            .label=${L.label}
            .value=${L.value||""}
          ></dees-input-text>
        `,menuOptions:[{name:"Cancel",action:async z=>{await z.destroy(),A(null)}},{name:L.buttonName||"Create",action:async z=>{let $=z.shadowRoot?.querySelector(".modal .content")?.querySelector("dees-input-text")?.value?.trim()||"";await z.destroy(),A($||null)}}]});await V.updateComplete;let C=V.shadowRoot?.querySelector(".modal .content");if(C){let z=C.querySelector("dees-input-text");z&&(await z.updateComplete,z.focus())}})}async createNewFile(L){let A=await this.showInputModal({heading:"New File",label:"File name"});if(!A||!this.executionEnvironment)return;let V=L==="/"?`/${A}`:`${L}/${A}`;try{await this.executionEnvironment.writeFile(V,""),await this.refresh(),this.dispatchEvent(new CustomEvent("file-created",{detail:{path:V},bubbles:!0,composed:!0}))}catch(C){console.error("Failed to create file:",C)}}async createNewFolder(L){let A=await this.showInputModal({heading:"New Folder",label:"Folder name"});if(!A||!this.executionEnvironment)return;let V=L==="/"?`/${A}`:`${L}/${A}`;try{await this.executionEnvironment.mkdir(V),await this.refresh(),this.dispatchEvent(new CustomEvent("folder-created",{detail:{path:V},bubbles:!0,composed:!0}))}catch(C){console.error("Failed to create folder:",C)}}async deleteItem(L){if(!(!this.executionEnvironment||!confirm(`Delete ${L.name}?`)))try{await this.executionEnvironment.rm(L.path,{recursive:L.type==="directory"}),await this.refresh(),this.dispatchEvent(new CustomEvent("item-deleted",{detail:{path:L.path,type:L.type},bubbles:!0,composed:!0}))}catch(V){console.error("Failed to delete item:",V)}}async renameItem(L){if(!this.executionEnvironment)return;let A=await this.showInputModal({heading:"Rename",label:"New name",value:L.name,buttonName:"Rename"});if(!A||A===L.name)return;let V=L.path.substring(0,L.path.lastIndexOf("/"))||"/",C=V==="/"?`/${A}`:`${V}/${A}`;try{if(L.type==="file"){let z=await this.executionEnvironment.readFile(L.path);await this.executionEnvironment.writeFile(C,z),await this.executionEnvironment.rm(L.path)}else await this.copyDirectoryContents(L.path,C),await this.executionEnvironment.rm(L.path,{recursive:!0});await this.refresh(),this.dispatchEvent(new CustomEvent("item-renamed",{detail:{oldPath:L.path,newPath:C,type:L.type},bubbles:!0,composed:!0}))}catch(z){console.error("Failed to rename item:",z)}}async duplicateItem(L){if(!this.executionEnvironment)return;let A=L.path.substring(0,L.path.lastIndexOf("/"))||"/",V;if(L.type==="file"){let z=L.name.lastIndexOf(".");if(z>0){let E=L.name.substring(0,z),T=L.name.substring(z);V=`${E}_copy${T}`}else V=`${L.name}_copy`}else V=`${L.name}_copy`;let C=A==="/"?`/${V}`:`${A}/${V}`;try{if(L.type==="file"){let z=await this.executionEnvironment.readFile(L.path);await this.executionEnvironment.writeFile(C,z)}else await this.copyDirectoryContents(L.path,C);await this.refresh(),this.dispatchEvent(new CustomEvent("item-duplicated",{detail:{sourcePath:L.path,newPath:C,type:L.type},bubbles:!0,composed:!0}))}catch(z){console.error("Failed to duplicate item:",z)}}async copyItem(L){this.clipboardPath=L.path,this.clipboardOperation="copy"}async pasteItem(L){if(!this.executionEnvironment||!this.clipboardPath)return;let A=this.clipboardPath.split("/").pop()||"pasted",V=L==="/"?`/${A}`:`${L}/${A}`;try{if(!await this.executionEnvironment.exists(this.clipboardPath)){console.error("Source file no longer exists"),this.clipboardPath=null,this.clipboardOperation=null;return}try{let C=await this.executionEnvironment.readFile(this.clipboardPath);await this.executionEnvironment.writeFile(V,C)}catch{await this.copyDirectoryContents(this.clipboardPath,V)}await this.refresh(),this.dispatchEvent(new CustomEvent("item-pasted",{detail:{sourcePath:this.clipboardPath,targetPath:V},bubbles:!0,composed:!0})),this.clipboardPath=null,this.clipboardOperation=null}catch(C){console.error("Failed to paste item:",C)}}async copyDirectoryContents(L,A){if(!this.executionEnvironment)return;await this.executionEnvironment.mkdir(A);let V=await this.executionEnvironment.readDir(L);for(let C of V){let z=L==="/"?`/${C.name}`:`${L}/${C.name}`,E=A==="/"?`/${C.name}`:`${A}/${C
    <dees-workspace-terminal-preview
      .command=${"pnpm install"}
      .lines=${["Packages: +42","Progress: resolved 142, reused 140, downloaded 2, added 42, done","","dependencies:","+ @push.rocks/smartpromise 4.2.3","+ typescript 5.3.3","","Done in 2.3s"]}
    ></dees-workspace-terminal-preview>
  `;static demoGroups=["Workspace"];#e=k8(this,s,"");get command(){return this.#e}set command(f){this.#e=f}#t=(k8(this,o),k8(this,c,[]));get lines(){return this.#t}set lines(f){this.#t=f}terminal=(k8(this,d),null);fitAddon=null;lastLineCount=0;resizeObserver=null;terminalThemeSubscription=null;static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
        height: 200px;
      }

      .terminal-preview {
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        background: ${p.bdTheme("#ffffff","#000000")};
        border: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        display: flex;
        flex-direction: column;
      }

      .terminal-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 10%)")};
        font-size: 12px;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        flex-shrink: 0;
      }

      .terminal-header-icon {
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 50%)")};
      }

      .terminal-header-command {
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 80%)")};
        font-weight: 500;
      }

      .terminal-container {
        flex: 1;
        position: relative;
        padding: 8px;
      }

      #xterm-container {
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
      }

      /* xterm.js styles */
      .xterm {
        font-feature-settings: 'liga' 0;
        position: relative;
        user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
      }

      .xterm.focus,
      .xterm:focus {
        outline: none;
      }

      .xterm .xterm-helpers {
        position: absolute;
        top: 0;
        z-index: 5;
      }

      .xterm .xterm-helper-textarea {
        padding: 0;
        border: 0;
        margin: 0;
        position: absolute;
        opacity: 0;
        left: -9999em;
        top: 0;
        width: 0;
        height: 0;
        z-index: -5;
        white-space: nowrap;
        overflow: hidden;
        resize: none;
      }

      .xterm .composition-view {
        background: ${p.bdTheme("#ffffff","#000000")};
        color: ${p.bdTheme("#333333","#ffffff")};
        display: none;
        position: absolute;
        white-space: nowrap;
        z-index: 1;
      }

      .xterm .composition-view.active {
        display: block;
      }

      .xterm .xterm-viewport {
        background-color: ${p.bdTheme("#ffffff","#000000")};
        overflow-y: scroll;
        cursor: default;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
      }

      .xterm .xterm-screen {
        position: relative;
      }

      .xterm .xterm-screen canvas {
        position: absolute;
        left: 0;
        top: 0;
      }

      .xterm .xterm-scroll-area {
        visibility: hidden;
      }

      .xterm-char-measure-element {
        display: inline-block;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: -9999em;
        line-height: normal;
      }

      .xterm {
        cursor: text;
      }

      .xterm.enable-mouse-events {
        cursor: default;
      }

      .xterm.xterm-cursor-pointer {
        cursor: pointer;
      }

      .xterm.column-select.focus {
        cursor: crosshair;
      }

      .xterm .xterm-accessibility,
      .xterm .xterm-message {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
        color: transparent;
      }

      .xterm .live-region {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .xterm-dim {
        opacity: 0.5;
      }

      .xterm-underline {
        text-decoration: underline;
      }

      /* Custom scrollbar for xterm viewport */
      .xterm .xterm-viewport::-webkit-scrollbar {
        width: 8px;
      }

      .xterm .xterm-viewport::-webkit-scrollbar-track {
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 8%)")};
      }

      .xterm .xterm-viewport::-webkit-scrollbar-thumb {
        background: ${p.bdTheme("hsl(0 0% 80%)","hsl(0 0% 25%)")};
        border-radius: 4px;
      }

      .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
        background: ${p.bdTheme("hsl(0 0% 70%)","hsl(0 0% 35%)")};
      }
    `];render(){return w`
      <div class="terminal-preview">
        <div class="terminal-header">
          <span class="terminal-header-icon">$</span>
          <span class="terminal-header-command">${this.command||"Waiting..."}</span>
        </div>
        <div class="terminal-container">
          <div id="xterm-container"></div>
        </div>
      </div>
    `}getTerminalTheme(f){return f?{background:"#ffffff",foreground:"#333333",cursor:"#333333",cursorAccent:"#ffffff",selectionBackground:"rgba(0, 0, 0, 0.2)"}:{background:"#000000",foreground:"#cccccc",cursor:"#cccccc",cursorAccent:"#000000",selectionBackground:"rgba(255, 255, 255, 0.2)"}}async firstUpdated(f){super.firstUpdated(f);let b=this.shadowRoot?.getElementById("xterm-container");if(!b)return;let y=await this.domtoolsPromise,g=y.themeManager.goBrightBoolean,h=C2.getInstance(),[x,M]=await Promise.all([h.loadXterm(),h.loadXtermFitAddon()]);this.terminal=new x.Terminal({convertEol:!0,cursorBlink:!1,disableStdin:!0,fontSize:12,fontFamily:"'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace",theme:this.getTerminalTheme(g),scrollback:1e3}),this.terminalThemeSubscription=y.themeManager.themeObservable.subscribe(S=>{this.terminal&&(this.terminal.options.theme=this.getTerminalTheme(S))}),this.fitAddon=new M.FitAddon,this.terminal.loadAddon(this.fitAddon),this.terminal.open(b),this.fitAddon.fit(),this.resizeObserver=new ResizeObserver(()=>{this.fitAddon&&this.fitAddon.fit()}),this.resizeObserver.observe(b),this.writeNewLines()}async updated(f){super.updated(f),f.has("lines")&&this.writeNewLines()}writeNewLines(){if(!this.terminal)return;let f=this.lines.slice(this.lastLineCount);for(let b of f)this.terminal.writeln(b);this.lastLineCount=this.lines.length}async disconnectedCallback(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.terminalThemeSubscription&&(this.terminalThemeSubscription.unsubscribe(),this.terminalThemeSubscription=null),this.terminal&&(this.terminal.dispose(),this.terminal=null),await super.disconnectedCallback()}addLine(f){this.lines=[...this.lines,f]}clear(){this.lines=[],this.lastLineCount=0,this.terminal&&this.terminal.clear()}static{k8(i,a)}};return l=i})()});var o3,lr,nwt,Jj=v(()=>{oe();He();At();r2();o3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},lr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},nwt=(()=>{let t=[Q("dees-workspace-bottombar")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[J()],l=[J()],y=[J()],x=[J()],o3(this,null,n,{kind:"accessor",name:"executionEnvironment",static:!1,private:!1,access:{has:k=>"executionEnvironment"in k,get:k=>k.executionEnvironment,set:(k,I)=>{k.executionEnvironment=I}},metadata:_},s,o),o3(this,null,u,{kind:"accessor",name:"scripts",static:!1,private:!1,access:{has:k=>"scripts"in k,get:k=>k.scripts,set:(k,I)=>{k.scripts=I}},metadata:_},c,d),o3(this,null,l,{kind:"accessor",name:"packageStatus",static:!1,private:!1,access:{has:k=>"packageStatus"in k,get:k=>k.packageStatus,set:(k,I)=>{k.packageStatus=I}},metadata:_},f,b),o3(this,null,y,{kind:"accessor",name:"outdatedPackages",static:!1,private:!1,access:{has:k=>"outdatedPackages"in k,get:k=>k.outdatedPackages,set:(k,I)=>{k.outdatedPackages=I}},metadata:_},g,h),o3(this,null,x,{kind:"accessor",name:"isCheckingPackages",static:!1,private:!1,access:{has:k=>"isCheckingPackages"in k,get:k=>k.isCheckingPackag
      :host {
        display: block;
        height: 24px;
        flex-shrink: 0;
      }

      .bottom-bar {
        height: 24px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        gap: 4px;
        background: ${p.bdTheme("hsl(0 0% 94%)","hsl(0 0% 6%)")};
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        font-size: 11px;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .widget {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        white-space: nowrap;
      }

      .widget:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 12%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 80%)")};
      }

      .widget dees-icon {
        flex-shrink: 0;
      }

      .widget-separator {
        width: 1px;
        height: 14px;
        background: ${p.bdTheme("hsl(0 0% 80%)","hsl(0 0% 20%)")};
        margin: 0 4px;
      }

      .widget.running {
        color: ${p.bdTheme("hsl(210 100% 45%)","hsl(210 100% 60%)")};
      }

      .widget.up-to-date {
        color: ${p.bdTheme("hsl(142 70% 35%)","hsl(142 70% 50%)")};
      }

      .widget.updates-available {
        color: ${p.bdTheme("hsl(38 92% 45%)","hsl(38 92% 55%)")};
      }

      .widget.error {
        color: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 60%)")};
      }

      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .spinning {
        animation: spin 1s linear infinite;
      }

      .spacer {
        flex: 1;
      }
    `];render(){return w`
      <div class="bottom-bar">
        <!-- Script Runner Widget -->
        <div
          class="widget"
          @click=${this.handleScriptClick}
          title="Run script"
        >
          <dees-icon
            .icon=${"lucide:play"}
            iconSize="12"
          ></dees-icon>
          <span>Scripts</span>
        </div>

        <div class="widget-separator"></div>

        <!-- Package Checker Widget -->
        <div
          class="widget ${this.getPackageStatusClass()}"
          @click=${this.handlePackageClick}
          title="${this.getPackageTooltip()}"
        >
          <dees-icon
            .icon=${this.getPackageIcon()}
            iconSize="12"
            class="${this.isCheckingPackages?"spinning":""}"
          ></dees-icon>
          <span>${this.getPackageStatusText()}</span>
        </div>

        <div class="spacer"></div>

        <!-- Future widgets can be added here -->
      </div>
    `}async connectedCallback(){await super.connectedCallback(),window.addEventListener("process-complete",this.handleProcessComplete)}async disconnectedCallback(){await super.disconnectedCallback(),window.removeEventListener("process-complete",this.handleProcessComplete)}async firstUpdated(){await this.loadScripts(),await this.checkPackages()}async updated(_){_.has("executionEnvironment")&&this.executionEnvironment&&(await this.loadScripts(),await this.checkPackages())}async loadScripts(){if(this.executionEnvironment)try{if(!await this.executionEnvironment.exists("/package.json")){this.scripts={};return}let k=await this.executionEnvironment.readFile("/package.json"),I=JSON.parse(k);this.scripts=I.scripts||{}}catch(_){console.warn("Failed to load scripts from package.json:",_),this.scripts={}}}async handleScriptClick(_){_.stopPropagation();let k=Object.keys(this.scripts);if(k.length===0)return;let I=k.map(L=>({name:L,iconName:"lucide:terminal",action:async()=>{await this.runScript(L)}}));await jt.openContextMenuWithOptions(_,I)}async runScript(_){if(!this.executionEnvironment)return;let k={type:"script",label:_,command:"pnpm",args:["run",_],metadata:{scriptName:_}};this.dispatchEvent(new CustomEvent("run-process",{bubbles:!0,composed:!0,detail:k}))}async checkPackages(){if(!this.executionEnvironment){this.packageStatus="idle";return}try{if(!await this.executionEnvironment.exists("/package.json")){this.packageStatus="idle";return}this.packageStatus="checking",this.isCheckingPackages=!0;let k=await this.executionEnvironment.spawn("pnpm",["outdated","--json"]),I="",L=k.output.getReader();(async()=>{try{for(;;){let{done:C,value:z}=await L.read();if(C)break;I+=z}}catch{}})();let V=await Promise.race([k.exit,new Promise(C=>setTimeout(()=>C(-1),1e4))]);try{await L.cancel()}catch{}if(V===-1){console.warn("Package check timed out"),this.packageStatus="error";return}if(V===0)this.packageStatus="up-to-date",this.outdatedPackages=[];else try{let C=JSON.parse(I);this.outdatedPackages=this.parseOutdatedPackages(C),this.packageStatus=this.outdatedPackages.length>0?"updates-available":"up-to-date"}catch{this.packageStatus="updates-available",this.outdatedPackages=[]}}catch(_){console.warn("Failed to check for package updates:",_),this.packageStatus="error"}finally{this.isCheckingPackages=!1}}parseOutdatedPackages(_){let k=[];if(typeof _=="object"&&_!==null)for(let[I,L]of Object.entries(_)){let A=L;k.push({name:I,current:A.current||"unknown",wanted:A.wanted||A.current||"unknown",latest:A.latest||A.wanted||"unknown",type:A.dependencyType==="devDependencies"?"devDependencies":"dependencies"})}return k}async handlePackageClick(_){_.stopPropagation();let k=[];if(k.push({name:this.isCheckingPackages?"Checking...":"Check for updates",iconName:"lucide:refreshCw",action:async()=>{if(this.isCheckingPackages)return;let I={type:"package-update",label:"check packages",command:"pnpm",args:["outdated"]};this.dispatchEvent(new CustomEvent("run-process",{bubbles:!0,composed:!0,detail:I})),setTimeout(()=>this.checkPackages(),3e3)}}),this.outdatedPackages.length>0){k.push({divider:!0});let I=this.outdatedPackages.slice(0,10);for(let L of I)k.push({name:`${L.name}: ${L.current} \u2192 ${L.latest}`,iconName:"lucide:package",action:async()=>{await this.updatePackage(L.name)}});this.outdatedPackages.length>10&&k.push({name:`... and ${this.outdatedPackages.length-10} more`,iconName:"lucide:moreHorizontal",action:async()=>{}}),k.push({divider:!0}),k.push({name:"Update all packages",iconName:"lucide:arrowUpCircle",action:async()=>{await this.updateAllPackages()}})}await jt.openContextMenuWithOptions(_,k)}async updatePackage(_){if(!this.executionEnvironment)return;this.pendingPackageUpdate=!0;let k={type:"package-update",label:`update ${_}`,command:"pnpm",args:["update","--latest",_],metadata:{packageName:_}};this.dispatchEvent(new CustomEvent("run-process",{bubbles:!0,composed:!0,detail:k}))}async updateAllPackages(){if(!this.executionEnvironment)return;this.pendingPackageUpdate=!0;let _={type:"package-update",label:"update all",command:"pnpm",args:["update","-
    <dees-workspace-diff-editor
      .originalContent=${`function hello() {
  console.log("Hello");
}`}
      .modifiedContent=${`function hello() {
  console.log("Hello World!");
  return true;
}`}
      .language=${"typescript"}
      .filePath=${"/demo/example.ts"}
    ></dees-workspace-diff-editor>
  `;static demoGroups=["Workspace"];diffEditorDeferred=Mt.smartpromise.defer();#e=ai(this,s,"");get originalContent(){return this.#e}set originalContent(L){this.#e=L}#t=(ai(this,o),ai(this,c,""));get modifiedContent(){return this.#t}set modifiedContent(L){this.#t=L}#a=(ai(this,d),ai(this,f,"Disk Version"));get originalLabel(){return this.#a}set originalLabel(L){this.#a=L}#i=(ai(this,b),ai(this,g,"Local Version"));get modifiedLabel(){return this.#i}set modifiedLabel(L){this.#i=L}#r=(ai(this,h),ai(this,M,"typescript"));get language(){return this.#r}set language(L){this.#r=L}#s=(ai(this,S),ai(this,_,""));get filePath(){return this.#s}set filePath(L){this.#s=L}diffEditor=(ai(this,k),null);monacoThemeSubscription=null;originalModel=null;modifiedModel=null;constructor(){super(),G2.setupDomTools()}static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      * {
        box-sizing: border-box;
      }

      .diff-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
      }

      .diff-toolbar {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 12%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 20%)")};
        flex-shrink: 0;
      }

      .diff-info {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 80%)")};
      }

      .diff-filename {
        font-weight: 600;
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
      }

      .diff-labels {
        font-size: 12px;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
      }

      .diff-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .diff-container {
        flex: 1;
        min-height: 0;
        width: 100%;
      }

      .nav-buttons {
        display: flex;
        gap: 4px;
      }

      .action-buttons {
        display: flex;
        gap: 8px;
        margin-left: 16px;
      }
    `];render(){let L=this.filePath.split("/").pop()||"file";return w`
      <div class="diff-wrapper">
        <div class="diff-toolbar">
          <div class="diff-info">
            <span class="diff-filename">${L}</span>
            <span class="diff-labels">${this.originalLabel} ↔ ${this.modifiedLabel}</span>
          </div>
          <div class="diff-actions">
            <div class="nav-buttons">
              <dees-button
                type="outline"
                @click=${this.goToPreviousDiff}
              >Previous</dees-button>
              <dees-button
                type="outline"
                @click=${this.goToNextDiff}
              >Next</dees-button>
            </div>
            <div class="action-buttons">
              <dees-button
                type="highlighted"
                @click=${this.acceptLocal}
              >Use Local</dees-button>
              <dees-button
                type="outline"
                @click=${this.acceptDisk}
              >Use Disk</dees-button>
              <dees-button
                type="outline"
                @click=${this.close}
              >Close</dees-button>
            </div>
          </div>
        </div>
        <div class="diff-container"></div>
      </div>
    `}async firstUpdated(){await super.firstUpdated(new Map),await this.initDiffEditor()}async initDiffEditor(){let L=this.shadowRoot?.querySelector(".diff-container");if(!L)return;let A=`https://cdn.jsdelivr.net/npm/monaco-editor@${iw}`,V=window.monaco;V||(await new Promise(G=>{let ne=setInterval(()=>{window.monaco&&(clearInterval(ne),G())},100)}),V=window.monaco);let C=await this.domtoolsPromise,E=C.themeManager.goBrightBoolean?"vs":"vs-dark",T=Date.now(),$=V.Uri.parse(`diff://original/${T}${this.filePath}`),H=V.Uri.parse(`diff://modified/${T}${this.filePath}`);this.originalModel=V.editor.createModel(this.originalContent,this.language,$),this.modifiedModel=V.editor.createModel(this.modifiedContent,this.language,H),this.diffEditor=V.editor.createDiffEditor(L,{automaticLayout:!0,readOnly:!1,originalEditable:!1,renderSideBySide:!0,ignoreTrimWhitespace:!1,fontSize:14,minimap:{enabled:!1}}),V.editor.setTheme(E),this.diffEditor.setModel({original:this.originalModel,modified:this.modifiedModel}),this.monacoThemeSubscription=C.themeManager.themeObservable.subscribe(G=>{let ne=G?"vs":"vs-dark";V.editor.setTheme(ne)});let O="monaco-diff-editor-css";if(!this.shadowRoot?.getElementById(O)){let ne=await(await fetch(`${A}/min/vs/editor/editor.main.css`)).text(),U=document.createElement("style");U.id=O,U.textContent=ne,this.shadowRoot?.append(U)}setTimeout(()=>{try{this.diffEditor?.revealFirstDiff()}catch{}},100),this.diffEditorDeferred.resolve(this.diffEditor)}goToNextDiff(){try{this.diffEditor?.goToDiff("next")}catch{}}goToPreviousDiff(){try{this.diffEditor?.goToDiff("previous")}catch{}}acceptLocal(){let L=this.diffEditor?.getModifiedEditor().getValue()||this.modifiedContent;this.dispatchEvent(new CustomEvent("diff-resolved",{detail:{action:"use-local",content:L},bubbles:!0,composed:!0}))}acceptDisk(){this.dispatchEvent(new CustomEvent("diff-resolved",{detail:{action:"use-disk",content:this.originalContent},bubbles:!0,composed:!0}))}close(){this.dispatchEvent(new CustomEvent("diff-closed",{bubbles:!0,composed:!0}))}async disconnectedCallback(){await super.disconnectedCallback(),this.monacoThemeSubscription&&(this.monacoThemeSubscription.unsubscribe(),this.monacoThemeSubscription=null),this.originalModel&&(this.originalModel.dispose(),this.originalModel=null),this.modifiedModel&&(this.modifiedModel.dispose(),this.modifiedModel=null),this.diffEditor&&(this.diffEditor.dispose(),this.diffEditor=null)}static{ai(i,a)}};return I=i})()});var L1,ft,lwt,cwt=v(()=>{oe();_t();He();Zw();nl();Kw();Kw();x8();x8();Qj();Jj();At();nl();eU();r2();x1();Cw();tU();L1=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ft=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},lwt=(()=>{let t=[Q("dees-workspace")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[],F,W=[],B=[],K,ge=[],ve=[],$e,q=[],R=[],te,me=[],ue=[],_e,he=[],ie=[],ke,Re=[],Ue=[],xe,ae=[],re=[],ye,Pe=[],qe=[],xt,lt=[],Tt=[];var Yt=class extends r{static{i=this}static{let se=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({attribute:!
import { greet, formatName } from './utils.js';

const name = formatName('World');
console.log(greet(name));

// Example async function
async function main() {
  const result = await Promise.resolve('Hello from async!');
  console.log(result);
}

main();
`}},"utils.ts":{file:{contents:`// Utility functions

export interface IUser {
  firstName: string;
  lastName: string;
}

export function greet(name: string): string {
  return \`Hello, \${name}!\`;
}

export function formatName(name: string): string {
  return name.trim().toUpperCase();
}

export function createUser(firstName: string, lastName: string): IUser {
  return { firstName, lastName };
}
`}},"importtest.ts":{file:{contents:`// Test npm package imports
import * as smartpromise from '@push.rocks/smartpromise';

// This should have IntelliSense showing defer() method
const deferred = smartpromise.defer<string>();

// Test using the deferred promise
async function testSmartPromise() {
  setTimeout(() => {
    deferred.resolve('Hello from smartpromise!');
  }, 100);

  const result = await deferred.promise;
  console.log(result);
}

testSmartPromise();
`}}}}};await se.mount(pt)})(),Te=document.createElement("div");Te.style.cssText="position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;";let ct=document.createElement("dees-workspace");return ct.executionEnvironment=se,ct.initializationPromise=le,Te.appendChild(ct),w`
      <dees-demowrapper>
        ${Te}
      </dees-demowrapper>
    `};static demoGroups=["Workspace"];#e=ft(this,s,null);get executionEnvironment(){return this.#e}set executionEnvironment(se){this.#e=se}#t=(ft(this,o),ft(this,c,null));get initializationPromise(){return this.#t}set initializationPromise(se){this.#t=se}#a=(ft(this,d),ft(this,f,!0));get showFileTree(){return this.#a}set showFileTree(se){this.#a=se}#i=(ft(this,b),ft(this,g,!0));get showTerminal(){return this.#i}set showTerminal(se){this.#i=se}#r=(ft(this,h),ft(this,M,250));get fileTreeWidth(){return this.#r}set fileTreeWidth(se){this.#r=se}#s=(ft(this,S),ft(this,_,200));get terminalHeight(){return this.#s}set terminalHeight(se){this.#s=se}#n=(ft(this,k),ft(this,L,[]));get openFiles(){return this.#n}set openFiles(se){this.#n=se}#o=(ft(this,A),ft(this,C,""));get activeFilePath(){return this.#o}set activeFilePath(se){this.#o=se}#l=(ft(this,z),ft(this,T,!1));get isTerminalCollapsed(){return this.#l}set isTerminalCollapsed(se){this.#l=se}#c=(ft(this,$),ft(this,O,!1));get isFileTreeCollapsed(){return this.#c}set isFileTreeCollapsed(se){this.#c=se}#d=(ft(this,G),ft(this,U,!0));get isInitializing(){return this.#d}set isInitializing(se){this.#d=se}#p=(ft(this,be),ft(this,j,"terminal"));get activeBottomPanel(){return this.#p}set activeBottomPanel(se){this.#p=se}#u=(ft(this,fe),ft(this,Y,[]));get diagnosticMarkers(){return this.#u}set diagnosticMarkers(se){this.#u=se}editorElement=(ft(this,P),null);initializationStarted=!1;intelliSenseManager=null;intelliSenseInitialized=!1;nodeModulesWatcher=null;nodeModulesDebounceTimeout=null;intelliSenseDebounceTimeout=null;openFileWatchers=new Map;fileChangeDebounce=new Map;actionbarElement=null;#h=ft(this,W,!1);get autoSave(){return this.#h}set autoSave(se){this.#h=se}autoSaveInterval=(ft(this,B),null);#f=ft(this,ge,"");get initCommand(){return this.#f}set initCommand(se){this.#f=se}#m=(ft(this,ve),ft(this,q,[]));get initOutput(){return this.#m}set initOutput(se){this.#m=se}#g=(ft(this,R),ft(this,me,250));get currentFileTreeWidth(){return this.#g}set currentFileTreeWidth(se){this.#g=se}#b=(ft(this,ue),ft(this,he,200));get currentTerminalHeight(){return this.#b}set currentTerminalHeight(se){this.#b=se}#v=(ft(this,ie),ft(this,Re,!1));get isDraggingFileTree(){return this.#v}set isDraggingFileTree(se){this.#v=se}#y=(ft(this,Ue),ft(this,ae,!1));get isDraggingTerminal(){return this.#y}set isDraggingTerminal(se){this.#y=se}#x=(ft(this,re),ft(this,Pe,!1));get showDiffView(){return this.#x}set showDiffView(se){this.#x=se}#w=(ft(this,qe),ft(this,lt,null));get diffViewConfig(){return this.#w}set diffViewConfig(se){this.#w=se}keydownHandler=(ft(this,Tt),se=>{(se.metaKey||se.ctrlKey)&&se.key==="s"&&!se.shiftKey&&(se.preventDefault(),this.saveActiveFile()),(se.metaKey||se.ctrlKey)&&se.shiftKey&&se.key.toLowerCase()==="s"&&(se.preventDefault(),this.saveAllFiles())});handleFileTreeMouseDown=se=>{se.preventDefault(),this.isDraggingFileTree=!0,document.addEventListener("mousemove",this.handleFileTreeMouseMove),document.addEventListener("mouseup",this.handleFileTreeMouseUp)};handleFileTreeMouseMove=se=>{if(!this.isDraggingFileTree)return;let le=this.getBoundingClientRect(),Te=se.clientX-le.left,ct=150,pt=le.width*.5,g1=Math.max(ct,Math.min(pt,Te));this.currentFileTreeWidth=g1};handleFileTreeMouseUp=()=>{this.isDraggingFileTree=!1,document.removeEventListener("mousemove",this.handleFileTreeMouseMove),document.removeEventListener("mouseup",this.handleFileTreeMouseUp),window.dispatchEvent(new Event("resize"))};handleTerminalMouseDown=se=>{se.preventDefault(),this.isDraggingTerminal=!0,document.addEventListener("mousemove",this.handleTerminalMouseMove),document.addEventListener("mouseup",this.handleTerminalMouseUp)};handleTerminalMouseMove=se=>{if(!this.isDraggingTerminal)return;let le=this.getBoundingClientRect(),Te=se.clientY-le.top,ct=le.height-Te,pt=100,g1=le.height*.7,ii=Math.max(pt,Math.min(g1,ct));this.currentTerminalHeight=ii};handleTerminalMouseUp=()=>{this.isDraggingTerminal=!1,document.removeEventListener("mousemove",this.handleTerminalMouseMove),document.removeEventListener("mouseup",this.handleTermin
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 7%)")};
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .workspace-outer {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
      }

      .workspace-container {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-height: 0;
        width: 100%;
      }

      .editor-area {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }

      .filetree-panel {
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }

      .filetree-panel.collapsed {
        width: 0 !important;
      }

      .editor-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        flex: 1;
        min-width: 200px;
      }

      .terminal-panel {
        position: relative;
        border-top: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        overflow: hidden;
        flex-shrink: 0;
      }

      .terminal-panel.collapsed {
        height: 32px !important;
      }

      .panel-header {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 8%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        font-size: 12px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(0 0% 40%)","hsl(0 0% 60%)")};
      }

      .panel-header-title {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .panel-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .panel-action {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        transition: all 0.15s ease;
      }

      .panel-action:hover {
        background: ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 18%)")};
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 80%)")};
      }

      .tabs-bar {
        display: flex;
        align-items: stretch;
        height: 36px;
        background: ${p.bdTheme("hsl(0 0% 96%)","hsl(0 0% 8%)")};
        border-bottom: 1px solid ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 15%)")};
        overflow-x: auto;
      }

      .tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        min-width: 120px;
        max-width: 200px;
        border-right: 1px solid ${p.bdTheme("hsl(0 0% 88%)","hsl(0 0% 12%)")};
        cursor: pointer;
        font-size: 12px;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        background: ${p.bdTheme("hsl(0 0% 94%)","hsl(0 0% 10%)")};
        transition: all 0.15s ease;
      }

      .tab:hover {
        background: ${p.bdTheme("hsl(0 0% 92%)","hsl(0 0% 12%)")};
      }

      .tab.active {
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
        border-bottom: 2px solid ${p.bdTheme("hsl(210 100% 50%)","hsl(210 100% 60%)")};
      }

      .tab-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tab-close {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        opacity: 0;
        transition: all 0.15s ease;
      }

      .tab:hover .tab-close {
        opacity: 1;
      }

      .tab-close:hover {
        background: ${p.bdTheme("hsl(0 0% 85%)","hsl(0 0% 25%)")};
      }

      .tab-modified {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
      }

      .tabs-container {
        display: flex;
        flex: 1;
        overflow-x: auto;
      }

      .editor-menu-button {
        padding: 6px 8px;
        margin-right: 4px;
        margin-left: auto;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.15s, background 0.15s;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .editor-menu-button:hover {
        opacity: 1;
        background: ${p.bdTheme("hsl(0 0% 0% / 0.08)","hsl(0 0% 100% / 0.1)")};
      }

      .editor-content {
        flex: 1;
        position: relative;
      }

      .terminal-content {
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .problems-content {
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background: ${p.bdTheme("hsl(0 0% 100%)","hsl(0 0% 9%)")};
      }

      .panel-tabs {
        display: flex;
        align-items: center;
        gap: 0;
      }

      .panel-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        height: 32px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 55%)")};
        border-bottom: 2px solid transparent;
        transition: all 0.15s ease;
      }

      .panel-tab:hover {
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 75%)")};
        background: ${p.bdTheme("hsl(0 0% 90%)","hsl(0 0% 12%)")};
      }

      .panel-tab.active {
        color: ${p.bdTheme("hsl(0 0% 20%)","hsl(0 0% 90%)")};
        border-bottom-color: ${p.bdTheme("hsl(210 100% 50%)","hsl(210 100% 60%)")};
      }

      .panel-tab-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 600;
        background: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 45%)")};
        color: white;
      }

      .panel-tab-badge.warning {
        background: ${p.bdTheme("hsl(40 70% 50%)","hsl(40 70% 45%)")};
      }

      .panel-tab-badge.none {
        display: none;
      }

      .problems-list {
        padding: 4px 0;
      }

      .problem-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 12px;
        line-height: 1.4;
        color: ${p.bdTheme("hsl(0 0% 30%)","hsl(0 0% 80%)")};
        transition: background 0.1s ease;
      }

      .problem-item:hover {
        background: ${p.bdTheme("hsl(0 0% 95%)","hsl(0 0% 15%)")};
      }

      .problem-icon {
        flex-shrink: 0;
        margin-top: 2px;
      }

      .problem-icon.error {
        color: ${p.bdTheme("hsl(0 70% 50%)","hsl(0 70% 60%)")};
      }

      .problem-icon.warning {
        color: ${p.bdTheme("hsl(40 70% 50%)","hsl(40 70% 60%)")};
      }

      .problem-details {
        flex: 1;
        min-width: 0;
      }

      .problem-message {
        word-break: break-word;
      }

      .problem-location {
        margin-top: 2px;
        font-size: 11px;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 55%)")};
      }

      .problems-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: ${p.bdTheme("hsl(0 0% 55%)","hsl(0 0% 50%)")};
        font-size: 13px;
        gap: 8px;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 50%)")};
        font-size: 14px;
        gap: 8px;
      }

      .empty-state dees-icon {
        width: 48px;
        height: 48px;
        opacity: 0.5;
      }

      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .initializing {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: ${p.bdTheme("hsl(0 0% 50%)","hsl(0 0% 60%)")};
        font-size: 14px;
        gap: 12px;
      }

      .initializing dees-icon {
        animation: spin 1s linear infinite;
      }

      .initializing dees-workspace-terminal-preview {
        margin-top: 24px;
        width: 80%;
        max-width: 600px;
        height: 200px;
      }

      dees-workspace-filetree {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      dees-workspace-monaco {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      dees-workspace-terminal {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      /* Resize handles */
      .resize-handle-vertical {
        width: 6px;
        cursor: col-resize;
        background: transparent;
        transition: background 0.15s ease;
        position: relative;
        flex-shrink: 0;
        z-index: 10;
      }

      .resize-handle-vertical:hover,
      .resize-handle-vertical.dragging {
        background: ${p.bdTheme("#3b82f6","#58a6ff")};
      }

      .resize-handle-vertical::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 32px;
        background: ${p.bdTheme("#9ca3af","#6e7681")};
        border-radius: 1px;
        opacity: 0;
        transition: opacity 0.15s ease;
      }

      .resize-handle-vertical:hover::after,
      .resize-handle-vertical.dragging::after {
        opacity: 1;
        background: ${p.bdTheme("#ffffff","#ffffff")};
      }

      .resize-handle-horizontal {
        height: 6px;
        cursor: row-resize;
        background: transparent;
        transition: background 0.15s ease;
        position: relative;
        flex-shrink: 0;
        z-index: 10;
      }

      .resize-handle-horizontal:hover,
      .resize-handle-horizontal.dragging {
        background: ${p.bdTheme("#3b82f6","#58a6ff")};
      }

      .resize-handle-horizontal::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 2px;
        background: ${p.bdTheme("#9ca3af","#6e7681")};
        border-radius: 1px;
        opacity: 0;
        transition: opacity 0.15s ease;
      }

      .resize-handle-horizontal:hover::after,
      .resize-handle-horizontal.dragging::after {
        opacity: 1;
        background: ${p.bdTheme("#ffffff","#ffffff")};
      }

      /* Prevent text selection while dragging */
      .workspace-container.dragging {
        user-select: none;
      }

      .workspace-container.dragging .filetree-panel,
      .workspace-container.dragging .editor-panel,
      .workspace-container.dragging .terminal-panel {
        pointer-events: none;
      }

    `];render(){let se=["workspace-container",this.isDraggingFileTree||this.isDraggingTerminal?"dragging":""].filter(Boolean).join(" ");return this.isInitializing?w`
        <div class="initializing">
          <dees-icon .icon=${"lucide:loader2"} iconSize="32"></dees-icon>
          <span>Initializing workspace...</span>
          <dees-workspace-terminal-preview
            .command=${this.initCommand||""}
            .lines=${this.initOutput}
          ></dees-workspace-terminal-preview>
        </div>
      `:w`
      <div class="workspace-outer">
        <div class="${se}">
          <!-- Filetree panel (full height) -->
          ${this.showFileTree?w`
            <div
              class="filetree-panel ${this.isFileTreeCollapsed?"collapsed":""}"
              style="width: ${this.isFileTreeCollapsed?0:this.currentFileTreeWidth}px"
            >
              <dees-workspace-filetree
                .executionEnvironment=${this.executionEnvironment}
                .selectedPath=${this.activeFilePath}
                @file-select=${this.handleFileSelect}
              ></dees-workspace-filetree>
            </div>
            ${this.isFileTreeCollapsed?"":w`
              <div
                class="resize-handle-vertical ${this.isDraggingFileTree?"dragging":""}"
                @mousedown=${this.handleFileTreeMouseDown}
              ></div>
            `}
          `:""}

          <!-- Editor + Terminal area -->
          <div class="editor-area">
            <div class="editor-panel">
              <div class="tabs-bar">
                <div class="tabs-container">
                  ${this.openFiles.map(le=>w`
                    <div
                      class="tab ${le.path===this.activeFilePath?"active":""}"
                      @click=${()=>this.activateFile(le.path)}
                    >
                      ${le.modified?w`<span class="tab-modified"></span>`:""}
                      <span class="tab-name">${le.name}</span>
                      <span class="tab-close" @click=${Te=>this.closeFile(Te,le.path)}>
                        <dees-icon .icon=${"lucide:x"} iconSize="12"></dees-icon>
                      </span>
                    </div>
                  `)}
                </div>
                <div class="editor-menu-button" @click=${this.showEditorMenu} title="Editor options">
                  <dees-icon .icon=${"lucide:moreVertical"} iconSize="16"></dees-icon>
                </div>
              </div>
              <div class="editor-content">
                ${this.showDiffView&&this.diffViewConfig?w`
                  <dees-workspace-diff-editor
                    .filePath=${this.diffViewConfig.filePath}
                    .originalContent=${this.diffViewConfig.originalContent}
                    .modifiedContent=${this.diffViewConfig.modifiedContent}
                    .language=${this.diffViewConfig.language}
                    @diff-resolved=${this.handleDiffResolved}
                    @diff-closed=${()=>{this.showDiffView=!1,this.diffViewConfig=null}}
                  ></dees-workspace-diff-editor>
                `:this.openFiles.length===0?w`
                  <div class="empty-state">
                    <dees-icon .icon=${"lucide:fileCode"} iconSize="48"></dees-icon>
                    <span>Select a file to edit</span>
                  </div>
                `:w`
                  <dees-workspace-monaco
                    .filePath=${this.activeFilePath}
                    .content=${this.getActiveFileContent()}
                    .language=${this.getLanguageFromPath(this.activeFilePath)}
                    @content-change=${this.handleContentChange}
                  ></dees-workspace-monaco>
                `}
              </div>
              <dees-actionbar></dees-actionbar>
            </div>

            <!-- Horizontal resize handle for terminal -->
            ${this.showTerminal&&!this.isTerminalCollapsed?w`
              <div
                class="resize-handle-horizontal ${this.isDraggingTerminal?"dragging":""}"
                @mousedown=${this.handleTerminalMouseDown}
              ></div>
            `:""}

            <!-- Terminal panel -->
            ${this.showTerminal?w`
              <div
                class="terminal-panel ${this.isTerminalCollapsed?"collapsed":""}"
                style="height: ${this.isTerminalCollapsed?32:this.currentTerminalHeight}px"
              >
                <div class="panel-header">
                  <div class="panel-tabs">
                    <div
                      class="panel-tab ${this.activeBottomPanel==="terminal"?"active":""}"
                      @click=${()=>this.activeBottomPanel="terminal"}
                    >
                      <dees-icon .icon=${"lucide:terminal"} iconSize="14"></dees-icon>
                      Terminal
                    </div>
                    <div
                      class="panel-tab ${this.activeBottomPanel==="problems"?"active":""}"
                      @click=${()=>this.activeBottomPanel="problems"}
                    >
                      <dees-icon .icon=${"lucide:circleAlert"} iconSize="14"></dees-icon>
                      Problems
                      ${this.diagnosticMarkers.length>0?w`
                        <span class="panel-tab-badge ${this.getErrorCount()===0?"warning":""}">${this.diagnosticMarkers.length}</span>
                      `:""}
                    </div>
                  </div>
                  <div class="panel-header-actions">
                    <div class="panel-action" @click=${this.toggleTerminal}>
                      <dees-icon
                        .icon=${this.isTerminalCollapsed?"lucide:chevronUp":"lucide:chevronDown"}
                        iconSize="14"
                      ></dees-icon>
                    </div>
                  </div>
                </div>
                <div class="terminal-content" style="display: ${this.activeBottomPanel==="terminal"?"block":"none"}">
                  <dees-workspace-terminal
                    .executionEnvironment=${this.executionEnvironment}
                    .setupCommand=${""}
                  ></dees-workspace-terminal>
                </div>
                <div class="problems-content" style="display: ${this.activeBottomPanel==="problems"?"block":"none"}">
                  ${this.renderProblemsPanel()}
                </div>
              </div>
            `:""}
          </div>
        </div>

        <!-- Bottom Bar (full width) -->
        <dees-workspace-bottombar
          .executionEnvironment=${this.executionEnvironment}
          @run-process=${this.handleRunProcess}
        ></dees-workspace-bottombar>
      </div>
    `}async connectedCallback(){await super.connectedCallback(),document.addEventListener("keydown",this.keydownHandler)}async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("keydown",this.keydownHandler),document.removeEventListener("mousemove",this.handleFileTreeMouseMove),document.removeEventListener("mouseup",this.handleFileTreeMouseUp),document.removeEventListener("mousemove",this.handleTerminalMouseMove),document.removeEventListener("mouseup",this.handleTerminalMouseUp),this.autoSaveInterval&&(clearInterval(this.autoSaveInterval),this.autoSaveInterval=null),this.stopNodeModulesWatcher(),this.stopAllFileWatchers()}async firstUpdated(){this.currentFileTreeWidth=this.fileTreeWidth,this.currentTerminalHeight=this.terminalHeight,this.executionEnvironment&&await this.initializeWorkspace()}async updated(se){se.has("executionEnvironment")&&this.executionEnvironment&&await this.initializeWorkspace(),this.actionbarElement||(this.actionbarElement=this.shadowRoot?.querySelector(".editor-panel dees-actionbar"))}async initializeWorkspace(){if(this.executionEnvironment&&!this.initializationStarted){this.initializationStarted=!0,this.isInitializing=!0;try{this.initializationPromise?await this.initializationPromise:this.executionEnvironment.ready||await this.executionEnvironment.init(),await this.executeOnInitCommand()}catch(se){console.error("Failed to initialize workspace:",se),this.initializationStarted=!1}finally{this.isInitializing=!1}}}async executeOnInitCommand(){if(this.executionEnvironment)try{if(await this.executionEnvironment.exists("/npmextra.json")){let se=await this.executionEnvironment.readFile("/npmextra.json"),Te=JSON.parse(se)?.deesEditorWorkspace?.onInit;if(Te&&typeof Te=="string"){console.log("Executing onInit command:",Te),this.initCommand=Te,this.initOutput=[];let[ct,...pt]=Te.split(" "),g1=await this.executionEnvironment.spawn(ct,pt);g1.output.pipeTo(new WritableStream({write:is=>{let rs=is.split(`
`);for(let Ie of rs)Ie&&(this.initOutput=[...this.initOutput,Ie])}}));let ii=await g1.exit;console.log("onInit command completed with exit code:",ii),this.initOutput=[...this.initOutput,"",`Command completed with exit code: ${ii}`]}}}catch(se){console.warn("Failed to execute onInit command:",se)}}async initializeIntelliSense(){if(!this.executionEnvironment||this.intelliSenseInitialized)return;let se=window.monaco;if(se||(await new Promise(le=>setTimeout(le,100)),se=window.monaco),!se){console.warn("Monaco not yet loaded, IntelliSense will be initialized later");return}this.intelliSenseInitialized=!0,this.intelliSenseManager=new z8,await this.intelliSenseManager.init(se,this.executionEnvironment),this.setupMarkerListener(),this.startNodeModulesWatcher(),await this.intelliSenseManager.scanAndLoadNewPackageTypes()}startNodeModulesWatcher(){if(!(!this.executionEnvironment||this.nodeModulesWatcher))try{this.nodeModulesWatcher=this.executionEnvironment.watch("/node_modules",(se,le)=>{this.nodeModulesDebounceTimeout&&clearTimeout(this.nodeModulesDebounceTimeout),this.nodeModulesDebounceTimeout=setTimeout(async()=>{this.intelliSenseManager&&await this.intelliSenseManager.scanAndLoadNewPackageTypes()},2e3)},{recursive:!0})}catch(se){console.warn("Could not watch node_modules:",se)}}stopNodeModulesWatcher(){this.nodeModulesWatcher&&(this.nodeModulesWatcher.stop(),this.nodeModulesWatcher=null),this.nodeModulesDebounceTimeout&&(clearTimeout(this.nodeModulesDebounceTimeout),this.nodeModulesDebounceTimeout=null)}startWatchingFile(se){if(!(!this.executionEnvironment||this.openFileWatchers.has(se)))try{let le=this.executionEnvironment.watch(se,(Te,ct)=>{let pt=this.fileChangeDebounce.get(se);pt&&clearTimeout(pt);let g1=setTimeout(()=>{this.handleExternalFileChange(se),this.fileChangeDebounce.delete(se)},300);this.fileChangeDebounce.set(se,g1)});this.openFileWatchers.set(se,le)}catch(le){console.warn(`Could not watch file ${se}:`,le)}}stopWatchingFile(se){let le=this.openFileWatchers.get(se);le&&(le.stop(),this.openFileWatchers.delete(se));let Te=this.fileChangeDebounce.get(se);Te&&(clearTimeout(Te),this.fileChangeDebounce.delete(se))}stopAllFileWatchers(){for(let se of this.openFileWatchers.values())se.stop();this.openFileWatchers.clear();for(let se of this.fileChangeDebounce.values())clearTimeout(se);this.fileChangeDebounce.clear()}async handleExternalFileChange(se){let le=this.openFiles.find(Te=>Te.path===se);if(!(!le||!this.executionEnvironment))try{let Te=await this.executionEnvironment.readFile(se);if(Te===le.content)return;if(le.modified){let ct=await this.actionbarElement?.show({message:`"${le.name}" changed on disk. What do you want to do?`,type:"question",icon:"lucide:gitMerge",actions:[{id:"load-disk",label:"Load from Disk",primary:!0},{id:"save-local",label:"Save Local to Disk"},{id:"compare",label:"Compare"}],timeout:{duration:15e3,defaultActionId:"load-disk"},dismissible:!0});ct?.actionId==="load-disk"?await this.updateFileContent(se,Te,!1):ct?.actionId==="save-local"?(await this.executionEnvironment.writeFile(se,le.content),this.openFiles=this.openFiles.map(pt=>pt.path===se?{...pt,modified:!1}:pt)):ct?.actionId==="compare"&&this.openDiffView(se,le.content,Te)}else await this.updateFileContent(se,Te,!0)}catch(Te){console.warn(`Failed to handle external change for ${se}:`,Te)}}async updateFileContent(se,le,Te){if(this.openFiles=this.openFiles.map(ct=>ct.path===se?{...ct,content:le,modified:!1}:ct),se===this.activeFilePath){let ct=this.shadowRoot?.querySelector("dees-workspace-monaco");ct&&await ct.setContentExternal(le,Te)}}openDiffView(se,le,Te){this.diffViewConfig={filePath:se,originalContent:Te,modifiedContent:le,language:this.getLanguageFromPath(se)},this.showDiffView=!0}async handleDiffResolved(se){let{action:le,content:Te}=se.detail,ct=this.diffViewConfig?.filePath;if(!ct||!this.executionEnvironment){this.showDiffView=!1,this.diffViewConfig=null;return}if(le==="use-local"){if(await this.executionEnvironment.writeFile(ct,Te),this.openFiles=this.openFiles.map(pt=>pt.path===ct?{...pt,content:Te,modified:!1}:pt),ct===this
        <div class="problems-empty">
          <dees-icon .icon=${"lucide:checkCircle"} iconSize="24"></dees-icon>
          <span>No problems detected</span>
        </div>
      `:w`
      <div class="problems-list">
        ${this.diagnosticMarkers.map(se=>w`
          <div class="problem-item" @click=${()=>this.navigateToProblem(se)}>
            <dees-icon
              class="problem-icon ${se.severity===8?"error":"warning"}"
              .icon=${se.severity===8?"lucide:circleX":"lucide:triangleAlert"}
              iconSize="14"
            ></dees-icon>
            <div class="problem-details">
              <div class="problem-message">${se.message}</div>
              <div class="problem-location">
                ${se.resource.path.split("/").pop()} (${se.startLineNumber}, ${se.startColumn})
                ${se.source?`[${se.source}]`:""}
              </div>
            </div>
          </div>
        `)}
      </div>
    `}async navigateToProblem(se){let le=se.resource.path,Te=le.split("/").pop()||"";this.openFiles.find(g1=>g1.path===le)?this.activeFilePath=le:await this.openFile(le,Te),await this.updateComplete;let pt=this.shadowRoot?.querySelector("dees-workspace-monaco");if(pt){let g1=await pt.editorDeferred.promise;g1.revealLineInCenter(se.startLineNumber),g1.setPosition({lineNumber:se.startLineNumber,column:se.startColumn}),g1.focus()}}setupMarkerListener(){let se=window.monaco;se&&(se.editor.onDidChangeMarkers(le=>{this.updateDiagnosticMarkers()}),this.updateDiagnosticMarkers())}updateDiagnosticMarkers(){let se=window.monaco;if(!se)return;let le=se.editor.getModelMarkers({});this.diagnosticMarkers=le.map(Te=>({message:Te.message,severity:Te.severity,startLineNumber:Te.startLineNumber,startColumn:Te.startColumn,endLineNumber:Te.endLineNumber,endColumn:Te.endColumn,source:Te.source,resource:{path:Te.resource.path}}))}async handleRunProcess(se){let le=se.detail,Te=this.shadowRoot?.querySelector("dees-workspace-terminal");if(!Te){console.warn("Terminal component not found");return}this.isTerminalCollapsed&&(this.isTerminalCollapsed=!1),this.activeBottomPanel="terminal",await this.updateComplete,await Te.createProcessTab({type:le.type,label:le.label,command:le.command,args:le.args,metadata:le.metadata,switchToTab:!0})}setFileTreeWidth(se){let Te=this.getBoundingClientRect().width*.5;this.currentFileTreeWidth=Math.max(150,Math.min(Te,se)),window.dispatchEvent(new Event("resize"))}setTerminalHeight(se){let Te=this.getBoundingClientRect().height*.7;this.currentTerminalHeight=Math.max(100,Math.min(Te,se)),window.dispatchEvent(new Event("resize"))}resetLayout(){this.currentFileTreeWidth=this.fileTreeWidth,this.currentTerminalHeight=this.terminalHeight,window.dispatchEvent(new Event("resize"))}static{ft(i,a)}};return Yt=i})()});var dwt=v(()=>{cwt();eU()});var pwt=v(()=>{nl()});var uwt=v(()=>{Kw()});var hwt=v(()=>{});var fwt=v(()=>{x8();hwt();Vj()});var mwt=v(()=>{Qj()});var S8,an,mf2,gwt,bwt=v(()=>{oe();He();nl();S8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},an=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},mf2=rt.plugins.smartpromise.defer(),gwt=(()=>{let t=[Q("dees-workspace-markdown")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],u=[D({type:Number})],l=[J()],y=[J()],S8(this,null,n,{kind:"accessor",name:"splitRatio",static:!1,private:!1,access:{has:S=>"splitRatio"in S,get:S=>S.splitRatio,set:(S,N)=>{S.splitRatio=N}},metadata:M},s,o),S8(this,null,u,{kind:"accessor",name:"minPanelSize",static:!1,private:!1,access:{has:S=>"minPanelSize"in S,get:S=>S.minPanelSize,set:(S,N)=>{S.minPanelSize=N}},metadata:M},c,d),S8(this,null,l,{kind:"accessor",name:"currentSplitRatio",static:!1,private:!1,access:{has:S=>"currentSplitRatio"in S,get:S=>S.currentSplitRatio,set:(S,N)=>{S.currentSplitRatio=N}},metadata:M},f,b),S8(this,null,y,{kind:"accessor",name:"isDragging",static:!1,private:!1,access:{has:S=>"isDragging"in S,get:S=>S.isDragging,set:(S,N)=>{S.isDragging=N}},metadata:M},g,h),S8(null,e={val
      :host {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
      }

      .splitContainer {
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
      }

      .editorContainer {
        position: relative;
        height: 100%;
        min-width: 100px;
        overflow: hidden;
      }

      .resizeHandle {
        width: 6px;
        height: 100%;
        background: ${p.bdTheme("#e5e7eb","#30363d")};
        cursor: col-resize;
        flex-shrink: 0;
        transition: background 0.15s ease;
        position: relative;
      }

      .resizeHandle:hover,
      .resizeHandle.dragging {
        background: ${p.bdTheme("#3b82f6","#58a6ff")};
      }

      .resizeHandle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 32px;
        background: ${p.bdTheme("#9ca3af","#6e7681")};
        border-radius: 1px;
        opacity: 0.6;
      }

      .resizeHandle:hover::after,
      .resizeHandle.dragging::after {
        background: ${p.bdTheme("#ffffff","#ffffff")};
        opacity: 1;
      }

      .outletContainer {
        position: relative;
        height: 100%;
        min-width: 100px;
        background: ${p.bdTheme("#ffffff","#0d1117")};
        color: ${p.bdTheme("#24292f","#e6edf3")};
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
        padding: 20px;
        overflow-y: auto;
        box-sizing: border-box;
      }

      /* Prevent text selection while dragging */
      .splitContainer.dragging {
        user-select: none;
      }

      .splitContainer.dragging .editorContainer,
      .splitContainer.dragging .outletContainer {
        pointer-events: none;
      }
    `];#e=an(this,s,50);get splitRatio(){return this.#e}set splitRatio(M){this.#e=M}#t=(an(this,o),an(this,c,10));get minPanelSize(){return this.#t}set minPanelSize(M){this.#t=M}#a=(an(this,d),an(this,f,50));get currentSplitRatio(){return this.#a}set currentSplitRatio(M){this.#a=M}#i=(an(this,b),an(this,g,!1));get isDragging(){return this.#i}set isDragging(M){this.#i=M}resizeHandleElement=an(this,h);containerElement;render(){return w`
      <div class="splitContainer ${this.isDragging?"dragging":""}">
        <div class="editorContainer" style="width: ${this.currentSplitRatio}%">
          <dees-workspace-monaco
            .language=${"markdown"}
            .content=${`# a test content

This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.

Test | Hello
--- | ---
Yeah | So good

This is real asset I think. Why would we want to leave that on the table? Can you tell my that?

Why are we here?

Do you know?

> note:
There is something going on.

\`\`\`typescript
const hello = 'yes'
\`\`\`
`}
            wordWrap="bounded"
          ></dees-workspace-monaco>
        </div>
        <div
          class="resizeHandle ${this.isDragging?"dragging":""}"
          @mousedown=${this.handleMouseDown}
        ></div>
        <div class="outletContainer" style="width: ${100-this.currentSplitRatio}%">
          <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
        </div>
      </div>
    `}async firstUpdated(M){await super.firstUpdated(M),this.currentSplitRatio=this.splitRatio,this.containerElement=this.shadowRoot.querySelector(".splitContainer"),this.resizeHandleElement=this.shadowRoot.querySelector(".resizeHandle");let S=this.shadowRoot.querySelector("dees-workspace-monaco"),N=this.shadowRoot.querySelector("dees-workspace-markdownoutlet"),k=await new rt.plugins.smartmarkdown.SmartMarkdown().getMdParsedResultFromMarkdown("loading...");S.contentSubject.subscribe(async I=>{await k.updateFromMarkdownString(I);let L=k.html;N.updateHtmlText(L)})}handleMouseDown=M=>{M.preventDefault(),this.isDragging=!0,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)};handleMouseMove=M=>{if(!this.isDragging||!this.containerElement)return;let S=this.containerElement.getBoundingClientRect(),N=S.width,k=(M.clientX-S.left)/N*100;k=Math.max(this.minPanelSize,Math.min(100-this.minPanelSize,k)),this.currentSplitRatio=k};handleMouseUp=()=>{this.isDragging=!1,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.shadowRoot.querySelector("dees-workspace-monaco")&&window.dispatchEvent(new Event("resize"))};async disconnectedCallback(){await super.disconnectedCallback(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}setSplitRatio(M){this.currentSplitRatio=Math.max(this.minPanelSize,Math.min(100-this.minPanelSize,M))}resetSplitRatio(){this.currentSplitRatio=this.splitRatio}static{an(i,a)}};return x=i})()});var vwt=v(()=>{bwt()});var ywt,xwt=v(()=>{oe();x1();h2();ywt=()=>w`
  <dees-demowrapper>
    <style>
      ${X`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 900px;
          margin: 0 auto;
        }
      `}
    </style>

    <div class="demo-container">
      <!-- Demo 1: Headings -->
      <dees-panel
        .title=${"Headings"}
        .subtitle=${"All heading levels from H1 to H6"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <h1>Heading Level 1</h1>
            <h2>Heading Level 2</h2>
            <h3>Heading Level 3</h3>
            <h4>Heading Level 4</h4>
            <h5>Heading Level 5</h5>
            <h6>Heading Level 6</h6>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 2: Text Formatting -->
      <dees-panel
        .title=${"Text Formatting"}
        .subtitle=${"Bold, italic, links, code, and keyboard input"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
            <p>You can also use <strong><em>bold italic</em></strong> for emphasis.</p>
            <p>Here's a <a href="#">link example</a> and some <code>inline code</code>.</p>
            <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
            <hr>
            <p>Above is a horizontal rule separator.</p>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 3: Lists -->
      <dees-panel
        .title=${"Lists"}
        .subtitle=${"Ordered, unordered, and task lists"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <h3>Unordered List</h3>
            <ul>
              <li>First item</li>
              <li>Second item
                <ul>
                  <li>Nested item 1</li>
                  <li>Nested item 2</li>
                </ul>
              </li>
              <li>Third item</li>
            </ul>

            <h3>Ordered List</h3>
            <ol>
              <li>Step one</li>
              <li>Step two</li>
              <li>Step three</li>
            </ol>

            <h3>Task List</h3>
            <ul>
              <li class="task-list-item"><input type="checkbox" checked disabled> Completed task</li>
              <li class="task-list-item"><input type="checkbox" disabled> Pending task</li>
              <li class="task-list-item"><input type="checkbox" disabled> Another task</li>
            </ul>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 4: Code Blocks -->
      <dees-panel
        .title=${"Code Blocks"}
        .subtitle=${"Syntax highlighted code examples"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <p>Inline code: <code>const greeting = "Hello, World!";</code></p>

            <h3>TypeScript Example</h3>
            <pre><code><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-element'</span>;

<span class="hljs-keyword">interface</span> <span class="hljs-title">IUser</span> {
  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;
  <span class="hljs-attr">email</span>: <span class="hljs-built_in">string</span>;
  <span class="hljs-attr">age</span>?: <span class="hljs-built_in">number</span>;
}

<span class="hljs-keyword">const</span> <span class="hljs-title">getUser</span> = <span class="hljs-keyword">async</span> (<span class="hljs-attr">id</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">Promise</span>&lt;IUser&gt; =&gt; {
  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(\`/api/users/\${id}\`);
  <span class="hljs-keyword">return</span> response.json();
};</code></pre>

            <h3>JSON Example</h3>
            <pre><code>{
  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"dees-catalog"</span>,
  <span class="hljs-attr">"version"</span>: <span class="hljs-string">"3.0.0"</span>,
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"@design.estate/dees-element"</span>: <span class="hljs-string">"^2.0.0"</span>
  }
}</code></pre>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 5: Tables -->
      <dees-panel
        .title=${"Tables"}
        .subtitle=${"Styled tables with alternating rows"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <table>
              <thead>
                <tr>
                  <th>Feature</th>
                  <th>Status</th>
                  <th>Priority</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Dark mode support</td>
                  <td>Completed</td>
                  <td>High</td>
                </tr>
                <tr>
                  <td>Responsive design</td>
                  <td>In Progress</td>
                  <td>Medium</td>
                </tr>
                <tr>
                  <td>Accessibility</td>
                  <td>Planned</td>
                  <td>High</td>
                </tr>
                <tr>
                  <td>Documentation</td>
                  <td>In Progress</td>
                  <td>Low</td>
                </tr>
              </tbody>
            </table>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 6: Blockquotes & Alerts -->
      <dees-panel
        .title=${"Blockquotes & Alerts"}
        .subtitle=${"Quotes and GitHub-style alerts"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <blockquote>
              <p>This is a standard blockquote. It's great for highlighting important information or quotes from other sources.</p>
            </blockquote>

            <div class="markdown-alert markdown-alert-note">
              <p><strong>Note:</strong> This is an informational note to draw attention to important details.</p>
            </div>

            <div class="markdown-alert markdown-alert-tip">
              <p><strong>Tip:</strong> Here's a helpful tip to improve your workflow.</p>
            </div>

            <div class="markdown-alert markdown-alert-important">
              <p><strong>Important:</strong> This information is crucial for understanding the topic.</p>
            </div>

            <div class="markdown-alert markdown-alert-warning">
              <p><strong>Warning:</strong> Be careful when performing this action.</p>
            </div>

            <div class="markdown-alert markdown-alert-caution">
              <p><strong>Caution:</strong> This action may have unintended consequences.</p>
            </div>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 7: Full Document -->
      <dees-panel
        .title=${"Full Document"}
        .subtitle=${"A complete markdown document example"}
        .runAfterRender=${async t=>{await t.querySelector("dees-workspace-markdownoutlet")?.updateHtmlText(`
            <h1>Getting Started Guide</h1>
            <p>Welcome to the <strong>dees-catalog</strong> component library. This guide will help you get up and running quickly.</p>

            <h2>Installation</h2>
            <p>Install the package using your preferred package manager:</p>
            <pre><code><span class="hljs-comment"># Using pnpm (recommended)</span>
pnpm add @design.estate/dees-catalog

<span class="hljs-comment"># Using npm</span>
npm install @design.estate/dees-catalog</code></pre>

            <h2>Basic Usage</h2>
            <p>Import and use components in your TypeScript files:</p>
            <pre><code><span class="hljs-keyword">import</span> { DeesButton } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-catalog'</span>;

<span class="hljs-comment">// Use in your templates</span>
html\`&lt;dees-button&gt;Click me&lt;/dees-button&gt;\`</code></pre>

            <div class="markdown-alert markdown-alert-tip">
              <p><strong>Tip:</strong> Check the demo showcase for live examples of all components.</p>
            </div>

            <h2>Available Components</h2>
            <table>
              <thead>
                <tr>
                  <th>Component</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><code>dees-button</code></td>
                  <td>Primary button component</td>
                </tr>
                <tr>
                  <td><code>dees-input-text</code></td>
                  <td>Text input field</td>
                </tr>
                <tr>
                  <td><code>dees-table</code></td>
                  <td>Data table with sorting</td>
                </tr>
                <tr>
                  <td><code>dees-modal</code></td>
                  <td>Modal dialog</td>
                </tr>
              </tbody>
            </table>

            <h2>Next Steps</h2>
            <ul>
              <li>Explore the <a href="#">component documentation</a></li>
              <li>Check out the <a href="#">theming guide</a></li>
              <li>Join our <a href="#">community Discord</a></li>
            </ul>

            <blockquote>
              <p>"The best component library is one that gets out of your way." \u2014 Design Systems Team</p>
            </blockquote>
          `)}}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>
    </div>
  </dees-demowrapper>
`});var gGt,bGt,wwt,Mwt=v(()=>{oe();He();xwt();gGt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},bGt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},wwt=(()=>{let t=[Q("dees-workspace-markdownoutlet")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;gGt(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}static demo=ywt;static demoGroups=["Workspace"];static styles=[Se,p.defaultStyles,X`
      :host {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: ${p.bdTheme("#24292f","#e6edf3")};
      }

      .outlet {
        word-wrap: break-word;
      }

      /* Headings */
      h1, h2, h3, h4, h5, h6 {
        margin-top: 24px;
        margin-bottom: 16px;
        font-weight: 600;
        line-height: 1.25;
        color: ${p.bdTheme("#1f2328","#f0f6fc")};
      }

      h1 {
        font-size: 2em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
      }

      h2 {
        font-size: 1.5em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
      }

      h3 {
        font-size: 1.25em;
      }

      h4 {
        font-size: 1em;
      }

      h5 {
        font-size: 0.875em;
      }

      h6 {
        font-size: 0.85em;
        color: ${p.bdTheme("#656d76","#8b949e")};
      }

      /* Paragraphs and text */
      p {
        margin-top: 0;
        margin-bottom: 16px;
      }

      /* Links */
      a {
        color: ${p.bdTheme("#0969da","#58a6ff")};
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      /* Strong and emphasis */
      strong {
        font-weight: 600;
        color: ${p.bdTheme("#1f2328","#f0f6fc")};
      }

      em {
        font-style: italic;
      }

      /* Lists */
      ul, ol {
        margin-top: 0;
        margin-bottom: 16px;
        padding-left: 2em;
      }

      li {
        margin-top: 4px;
      }

      li + li {
        margin-top: 4px;
      }

      ul ul, ul ol, ol ul, ol ol {
        margin-top: 0;
        margin-bottom: 0;
      }

      /* Blockquotes */
      blockquote {
        margin: 0 0 16px 0;
        padding: 0 1em;
        color: ${p.bdTheme("#656d76","#8b949e")};
        border-left: 4px solid ${p.bdTheme("#d1d9e0","#30363d")};
      }

      blockquote > :first-child {
        margin-top: 0;
      }

      blockquote > :last-child {
        margin-bottom: 0;
      }

      /* Inline code */
      code {
        padding: 0.2em 0.4em;
        margin: 0;
        font-size: 85%;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        background-color: ${p.bdTheme("rgba(175, 184, 193, 0.2)","rgba(110, 118, 129, 0.4)")};
        border-radius: 6px;
        white-space: break-spaces;
      }

      /* Code blocks */
      pre {
        margin-top: 0;
        margin-bottom: 16px;
        padding: 16px;
        overflow: auto;
        font-size: 85%;
        line-height: 1.45;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        background-color: ${p.bdTheme("#f6f8fa","#161b22")};
        border-radius: 6px;
        word-wrap: normal;
      }

      pre code {
        display: block;
        padding: 0;
        margin: 0;
        overflow: visible;
        line-height: inherit;
        word-wrap: normal;
        background-color: transparent;
        border: 0;
        font-size: 100%;
        white-space: pre;
      }

      /* Tables */
      table {
        width: max-content;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 16px;
        border-spacing: 0;
        border-collapse: collapse;
        overflow: auto;
        display: block;
      }

      table th {
        font-weight: 600;
        padding: 6px 13px;
        border: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
        background-color: ${p.bdTheme("#f6f8fa","#161b22")};
        color: ${p.bdTheme("#1f2328","#e6edf3")};
      }

      table td {
        padding: 6px 13px;
        border: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
        color: ${p.bdTheme("#1f2328","#e6edf3")};
      }

      table tr {
        background-color: ${p.bdTheme("#ffffff","#0d1117")};
        border-top: 1px solid ${p.bdTheme("#d1d9e0","#21262d")};
      }

      table tr:nth-child(2n) {
        background-color: ${p.bdTheme("#f6f8fa","#161b22")};
      }

      /* Horizontal rules */
      hr {
        height: 4px;
        padding: 0;
        margin: 24px 0;
        background-color: ${p.bdTheme("#d1d9e0","#30363d")};
        border: 0;
        border-radius: 2px;
      }

      /* Images */
      img {
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 6px;
      }

      /* Task lists */
      .task-list-item {
        list-style-type: none;
      }

      .task-list-item input {
        margin: 0 0.2em 0.25em -1.4em;
        vertical-align: middle;
      }

      /* Definition lists */
      dl {
        padding: 0;
      }

      dl dt {
        padding: 0;
        margin-top: 16px;
        font-size: 1em;
        font-style: italic;
        font-weight: 600;
      }

      dl dd {
        padding: 0 16px;
        margin-bottom: 16px;
      }

      /* Keyboard input */
      kbd {
        display: inline-block;
        padding: 3px 5px;
        font-size: 11px;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        line-height: 10px;
        color: ${p.bdTheme("#1f2328","#e6edf3")};
        vertical-align: middle;
        background-color: ${p.bdTheme("#f6f8fa","#161b22")};
        border: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
        border-radius: 6px;
        box-shadow: inset 0 -1px 0 ${p.bdTheme("#d1d9e0","#30363d")};
      }

      /* Footnotes */
      .footnotes {
        font-size: 12px;
        color: ${p.bdTheme("#656d76","#8b949e")};
        border-top: 1px solid ${p.bdTheme("#d1d9e0","#30363d")};
        padding-top: 16px;
        margin-top: 32px;
      }

      /* Alerts/Admonitions */
      .markdown-alert {
        padding: 8px 16px;
        margin-bottom: 16px;
        border-left: 4px solid;
        border-radius: 6px;
      }

      .markdown-alert-note {
        border-color: ${p.bdTheme("#0969da","#58a6ff")};
        background-color: ${p.bdTheme("rgba(9, 105, 218, 0.1)","rgba(56, 139, 253, 0.1)")};
      }

      .markdown-alert-warning {
        border-color: ${p.bdTheme("#bf8700","#d29922")};
        background-color: ${p.bdTheme("rgba(191, 135, 0, 0.1)","rgba(187, 128, 9, 0.1)")};
      }

      .markdown-alert-important {
        border-color: ${p.bdTheme("#8250df","#a371f7")};
        background-color: ${p.bdTheme("rgba(130, 80, 223, 0.1)","rgba(163, 113, 247, 0.1)")};
      }

      .markdown-alert-caution {
        border-color: ${p.bdTheme("#cf222e","#f85149")};
        background-color: ${p.bdTheme("rgba(207, 34, 46, 0.1)","rgba(248, 81, 73, 0.1)")};
      }

      .markdown-alert-tip {
        border-color: ${p.bdTheme("#1a7f37","#3fb950")};
        background-color: ${p.bdTheme("rgba(26, 127, 55, 0.1)","rgba(46, 160, 67, 0.1)")};
      }

      /* Syntax highlighting for code blocks */
      .hljs-comment,
      .hljs-quote {
        color: ${p.bdTheme("#6a737d","#8b949e")};
      }

      .hljs-keyword,
      .hljs-selector-tag,
      .hljs-addition {
        color: ${p.bdTheme("#d73a49","#ff7b72")};
      }

      .hljs-number,
      .hljs-string,
      .hljs-meta .hljs-meta-string,
      .hljs-literal,
      .hljs-doctag,
      .hljs-regexp {
        color: ${p.bdTheme("#032f62","#a5d6ff")};
      }

      .hljs-title,
      .hljs-section,
      .hljs-name,
      .hljs-selector-id,
      .hljs-selector-class {
        color: ${p.bdTheme("#6f42c1","#d2a8ff")};
      }

      .hljs-attribute,
      .hljs-attr,
      .hljs-variable,
      .hljs-template-variable,
      .hljs-class .hljs-title,
      .hljs-type {
        color: ${p.bdTheme("#005cc5","#79c0ff")};
      }

      .hljs-symbol,
      .hljs-bullet,
      .hljs-subst,
      .hljs-meta,
      .hljs-meta .hljs-keyword,
      .hljs-selector-attr,
      .hljs-selector-pseudo,
      .hljs-link {
        color: ${p.bdTheme("#e36209","#ffa657")};
      }

      .hljs-built_in,
      .hljs-deletion {
        color: ${p.bdTheme("#b31d28","#ffa198")};
      }

      .hljs-formula {
        background-color: ${p.bdTheme("#f6f8fa","#161b22")};
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: bold;
      }
    `];outlet;render(){return w`
      <div class="outlet">
        <h1>Markdown Preview</h1>
        <p>Content will appear here when markdown is parsed.</p>
      </div>
    `}async firstUpdated(s){await super.firstUpdated(s),this.outlet=this.shadowRoot.querySelector(".outlet")}async updateHtmlText(s){await this.updateComplete,this.outlet||(this.outlet=this.shadowRoot.querySelector(".outlet")),this.outlet.innerHTML=s}static{bGt(i,a)}};return n=i})()});var kwt=v(()=>{Mwt()});var zwt=v(()=>{Jj()});var Swt=v(()=>{tU()});var Cwt=v(()=>{dwt();pwt();uwt();fwt();mwt();vwt();kwt();zwt();Swt()});var _wt=v(()=>{});var Twt=v(()=>{_wt()});var Lwt=v(()=>{oe()});var $wt=v(()=>{Lwt()});var Dwt=v(()=>{bi();He();hmt();zmt();Omt();Kmt();kgt();Cgt();Ibt();zvt();Iyt();jyt();Zw();Bxt();iwt();Cwt();Twt();$wt()});var Awt,Ewt=v(()=>{Awt={name:"@design.estate/dees-catalog",version:"3.43.0",description:"A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."}});var aU={};Ye(aU,{CanvasPool:()=>J4,DeesActionbar:()=>Qmt,DeesAppui:()=>amt,DeesAppuiActivitylog:()=>a9t,DeesAppuiBar:()=>b9t,DeesAppuiBottombar:()=>w9t,DeesAppuiMaincontent:()=>tmt,DeesAppuiMainmenu:()=>Yft,DeesAppuiProfileDropdown:()=>g9t,DeesAppuiSecondarymenu:()=>Kft,DeesAppuiTabs:()=>emt,DeesAudioViewer:()=>Dvt,DeesBadge:()=>igt,DeesButton:()=>qft,DeesButtonExit:()=>gmt,DeesButtonGroup:()=>wmt,DeesChartArea:()=>Amt,DeesChartLog:()=>Nmt,DeesChips:()=>Fbt,DeesContextmenu:()=>jt,DeesDashboardgrid:()=>ivt,DeesDataviewCodebox:()=>qmt,DeesDataviewStatusobject:()=>Gmt,DeesForm:()=>Oft,DeesFormSubmit:()=>dw,DeesFormattingMenu:()=>Dw,DeesHeading:()=>cvt,DeesHint:()=>cgt,DeesIcon:()=>Xht,DeesImageViewer:()=>_vt,DeesInputBase:()=>Ze,DeesInputCheckbox:()=>ew,DeesInputCode:()=>rw,DeesInputDatepicker:()=>sw,DeesInputDropdown:()=>pw,DeesInputFileupload:()=>hw,DeesInputIban:()=>gw,DeesInputList:()=>Pgt,DeesInputMultitoggle:()=>bw,DeesInputPhone:()=>yw,DeesInputProfilePicture:()=>Pbt,DeesInputQuantitySelector:()=>ow,DeesInputRadiogroup:()=>lw,DeesInputRichtext:()=>Ggt,DeesInputTags:()=>ebt,DeesInputText:()=>nw,DeesInputToggle:()=>xw,DeesInputTypelist:()=>ww,DeesInputWysiwyg:()=>aj,DeesLabel:()=>N9t,DeesMobilenavigation:()=>dmt,DeesModal:()=>s1,DeesPagination:()=>mvt,DeesPanel:()=>C9t,DeesPdf:()=>Zvt,DeesPdfPreview:()=>ayt,DeesPdfViewer:()=>Hvt,DeesPreview:()=>Uvt,DeesProgressbar:()=>mgt,DeesSearchbar:()=>Uxt,DeesShoppingProductcard:()=>Y9t,DeesSimpleAppDash:()=>Dxt,DeesSimpleLogin:()=>Rxt,DeesSlashMenu:()=>Lw,DeesSpeechbubble:()=>Byt,DeesSpinner:()=>bgt,DeesStatsGrid:()=>Vft,DeesStepper:()=>wvt,DeesTable:()=>kw,DeesTheme:()=>Xxt,DeesTileAudio:()=>gyt,DeesTileBase:()=>ga,DeesTileFolder:()=>Ayt,DeesTileImage:()=>pyt,DeesTileNote:()=>Cyt,DeesTilePdf:()=>Iw,DeesTileVideo:()=>wyt,DeesToast:()=>Ot,DeesUpdater:()=>Xw,DeesVideoViewer:()=>Ivt,DeesWindowControls:()=>m9t,DeesWindowLayer:()=>vi,DeesWorkspace:()=>lwt,DeesWorkspaceBottombar:()=>nwt,DeesWorkspaceDiffEditor:()=>owt,DeesWorkspaceFiletree:()=>rwt,DeesWorkspaceMarkdown:()=>gwt,DeesWorkspaceMarkdownoutlet:()=>wwt,DeesWorkspaceMonaco:()=>R9t,DeesWorkspaceTerminal:()=>jj,DeesWorkspaceTerminalPreview:()=>swt,DeesWysiwygBlock:()=>_bt,PROGRAMMING_LANGUAGES:()=>Gd,PdfManager:()=>Xr,PerformanceMonitor:()=>e3,TerminalTabManager:()=>y8,TypeScriptIntelliSenseManager:()=>z8,ViewRegistry:()=>qd,WebContainerEnvironment:()=>Cl,WysiwygBlockOperations:()=>Yd,WysiwygBlocks:()=>T2,WysiwygConverters:()=>zi,WysiwygDragDropHandler:()=>l8,WysiwygFormatting:()=>Ys,WysiwygHistory:()=>c8,WysiwygInputHandler:()=>n8,WysiwygKeyboardHandler:()=>o8,WysiwygModalManager:()=>s8,WysiwygSelection:()=>Oe,WysiwygShortcuts:()=>V1,ZIndexRegistry:()=>jf,colors:()=>il,commitinfo:()=>Awt,componentZIndex:()=>dqt,debounce:()=>PWt,formatFileSize:()=>NWt,getZIndex:()=>cqt,icons:()=>Kx,isInViewport:()=>RWt,registerAllBlockHandlers:()=>Mbt,themeDefaultStyles:()=>Se,themeDefaults:()=>co,throttle:()=>IWt,tileBaseStyles:()=>J2,wysiwygStyles:()=>YV,zIndexLayers:()=>a2,zIndexRegistry:()=>u1});var iU=v(()=>{Dwt();xi();Ewt()});var l3,cr,vGt,c3=v(()=>{oe();l3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(
    <style>
      .demo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 24px;
        max-width: 800px;
      }
    </style>
    <div class="demo-grid">
      <sz-stat-card
        label="Total Services"
        value="7"
        icon="server"
      ></sz-stat-card>
      <sz-stat-card
        label="Running"
        value="7"
        icon="check"
        variant="success"
      ></sz-stat-card>
      <sz-stat-card
        label="Stopped"
        value="0"
        icon="stop"
      ></sz-stat-card>
      <sz-stat-card
        label="Docker"
        value="Running"
        icon="container"
        variant="success"
        valueBadge
      ></sz-stat-card>
    </div>
  `;static demoGroups=["Dashboard"];#e=cr(this,s,"");get label(){return this.#e}set label(_){this.#e=_}#t=(cr(this,o),cr(this,c,""));get value(){return this.#t}set value(_){this.#t=_}#a=(cr(this,d),cr(this,f,""));get icon(){return this.#a}set icon(_){this.#a=_}#i=(cr(this,b),cr(this,g,"default"));get variant(){return this.#i}set variant(_){this.#i=_}#r=(cr(this,h),cr(this,M,!1));get valueBadge(){return this.#r}set valueBadge(_){this.#r=_}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        transition: all 200ms ease;
        height: 100%;
        box-sizing: border-box;
      }

      .card:hover {
        border-color: ${p.bdTheme("#d4d4d8","#3f3f46")};
        box-shadow: 0 4px 12px ${p.bdTheme("rgba(0,0,0,0.05)","rgba(0,0,0,0.2)")};
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }

      .label {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .icon {
        width: 20px;
        height: 20px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .value {
        font-size: 28px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        line-height: 1.2;
      }

      .value.success {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .value.warning {
        color: ${p.bdTheme("#ca8a04","#facc15")};
      }

      .value.error {
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 14px;
        font-weight: 500;
      }

      .badge.success {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .badge.warning {
        background: ${p.bdTheme("#fef9c3","rgba(250, 204, 21, 0.2)")};
        color: ${p.bdTheme("#ca8a04","#facc15")};
      }

      .badge.error {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .badge.default {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){let _=this.valueBadge?`badge ${this.variant}`:`value ${this.variant}`;return w`
      <div class="card">
        <div class="header">
          <span class="label">${this.label}</span>
          ${this.renderIcon()}
        </div>
        <div class="${_}">${this.value}</div>
      </div>
    `}renderIcon(){return{server:w`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,check:w`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,stop:w`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>`,container:w`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>`}[this.icon]||w``}constructor(){super(...arguments),cr(this,S)}static{cr(i,a)}};return N=i})()});var rU,C8,yGt,sU=v(()=>{oe();rU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},C8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},yGt=(()=>{let t=[Q("sz-resource-usage-card")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:String})],rU(this,null,n,{kind:"accessor",name:"data",static:!1,private:!1,access:{has:b=>"data"in b,get:b=>b.data,set:(b,y)=>{b.data=y}},metadata:f},s,o),rU(this,null,u,{kind:"accessor",name:"serviceCount",static:!1,private:!1,access:{has:b=>"serviceCount"in b,get:b=>b.serviceCount,set:(b,y)=>{b.serviceCount=y}},metadata:f},c,d),rU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 800px;">
      <sz-resource-usage-card
        .data=${{cpu:.5,memoryUsed:"191 MB",memoryTotal:"429.2 GB",networkIn:"38.9 KB/s",networkOut:"1.7 KB/s",topConsumers:[{name:"test-nginx",memory:"32.1 MB"},{name:"test-v2",memory:"31.7 MB"}]}}
        serviceCount="7"
      ></sz-resource-usage-card>
    </div>
  `;static demoGroups=["Dashboard"];#e=C8(this,s,{cpu:0,memoryUsed:"0 MB",memoryTotal:"0 GB",networkIn:"0 KB/s",networkOut:"0 KB/s",topConsumers:[]});get data(){return this.#e}set data(f){this.#e=f}#t=(C8(this,o),C8(this,c,"0"));get serviceCount(){return this.#t}set serviceCount(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .view-all {
        font-size: 13px;
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        text-decoration: none;
        cursor: pointer;
      }

      .view-all:hover {
        text-decoration: underline;
      }

      .metrics {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .metric-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .metric-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .metric-label {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .metric-value {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .progress-bar {
        height: 6px;
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        border-radius: 3px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        background: ${p.bdTheme("#3b82f6","#60a5fa")};
        border-radius: 3px;
        transition: width 300ms ease;
      }

      .network-row {
        display: flex;
        gap: 16px;
        align-items: center;
      }

      .network-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .network-icon {
        width: 14px;
        height: 14px;
      }

      .network-icon.down {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .network-icon.up {
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      .top-consumers {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .consumers-label {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 6px;
      }

      .consumers-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .consumer-item {
        font-size: 13px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .consumer-name {
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div>
            <div class="title">Resource Usage</div>
            <div class="subtitle">Aggregated across ${this.serviceCount} services</div>
          </div>
          <a class="view-all">View All</a>
        </div>

        <div class="metrics">
          <div class="metric-row">
            <div class="metric-header">
              <span class="metric-label">CPU</span>
              <span class="metric-value">${this.data.cpu.toFixed(1)}%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: ${Math.min(this.data.cpu,100)}%"></div>
            </div>
          </div>

          <div class="metric-row">
            <div class="metric-header">
              <span class="metric-label">Memory</span>
              <span class="metric-value">${this.data.memoryUsed} / ${this.data.memoryTotal}</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: ${this.calculateMemoryPercent()}%"></div>
            </div>
          </div>

          <div class="metric-row">
            <div class="metric-header">
              <span class="metric-label">Network</span>
              <div class="network-row">
                <span class="network-item">
                  <svg class="network-icon down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 5v14M19 12l-7 7-7-7"/>
                  </svg>
                  ${this.data.networkIn}
                </span>
                <span class="network-item">
                  <svg class="network-icon up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 19V5M5 12l7-7 7 7"/>
                  </svg>
                  ${this.data.networkOut}
                </span>
              </div>
            </div>
          </div>
        </div>

        ${this.data.topConsumers.length>0?w`
          <div class="top-consumers">
            <div class="consumers-label">Top consumers</div>
            <div class="consumers-list">
              ${this.data.topConsumers.map(f=>w`
                  <span class="consumer-item">
                    <span class="consumer-name">${f.name}:</span> ${f.memory}
                  </span>
                `)}
            </div>
          </div>
        `:""}
      </div>
    `}calculateMemoryPercent(){let f=parseFloat(this.data.memoryUsed),b=parseFloat(this.data.memoryTotal);return b===0?0:Math.min(f/b*100,100)}constructor(){super(...arguments),C8(this,d)}static{C8(i,a)}};return l=i})()});var Pwt,nU,xGt,oU=v(()=>{oe();Pwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},nU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},xGt=(()=>{let t=[Q("sz-traffic-card")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],Pwt(this,null,n,{kind:"accessor",name:"data",static:!1,private:!1,access:{has:d=>"data"in d,get:d=>d.data,set:(d,l)=>{d.data=l}},metadata:c},s,o),Pwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 500px;">
      <sz-traffic-card
        .data=${{requests:1250,errors:15,errorPercent:1.2,avgResponse:145,reqPerMin:21,status2xx:85,status3xx:5,status4xx:8,status5xx:2}}
      ></sz-traffic-card>
    </div>
  `;static demoGroups=["Dashboard"];#e=nU(this,s,{requests:0,errors:0,errorPercent:0,avgResponse:0,reqPerMin:0,status2xx:0,status3xx:0,status4xx:0,status5xx:0});get data(){return this.#e}set data(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 16px;
      }

      .metric {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .metric-label {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .metric-value {
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .status-bar-container {
        padding-top: 12px;
        border-top: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .status-bar {
        display: flex;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        margin-bottom: 8px;
      }

      .status-segment {
        height: 100%;
        transition: width 300ms ease;
      }

      .status-2xx {
        background: ${p.bdTheme("#22c55e","#22c55e")};
      }

      .status-3xx {
        background: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      .status-4xx {
        background: ${p.bdTheme("#facc15","#facc15")};
      }

      .status-5xx {
        background: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .status-legend {
        display: flex;
        justify-content: space-between;
      }

      .legend-item {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){let c=this.data.status2xx+this.data.status3xx+this.data.status4xx+this.data.status5xx,d=c>0?this.data.status2xx/c*100:0,l=c>0?this.data.status3xx/c*100:0,f=c>0?this.data.status4xx/c*100:0,b=c>0?this.data.status5xx/c*100:0;return w`
      <div class="card">
        <div class="header">
          <div class="title">Traffic (Last Hour)</div>
          <div class="subtitle">Request metrics from access logs</div>
        </div>

        <div class="metrics">
          <div class="metric">
            <span class="metric-label">Requests</span>
            <span class="metric-value">${this.formatNumber(this.data.requests)}</span>
          </div>
          <div class="metric">
            <span class="metric-label">Errors</span>
            <span class="metric-value">${this.data.errors} (${this.data.errorPercent}%)</span>
          </div>
          <div class="metric">
            <span class="metric-label">Avg Response</span>
            <span class="metric-value">${this.data.avgResponse}ms</span>
          </div>
          <div class="metric">
            <span class="metric-label">Req/min</span>
            <span class="metric-value">${this.data.reqPerMin}</span>
          </div>
        </div>

        <div class="status-bar-container">
          <div class="status-bar">
            <div class="status-segment status-2xx" style="width: ${d}%"></div>
            <div class="status-segment status-3xx" style="width: ${l}%"></div>
            <div class="status-segment status-4xx" style="width: ${f}%"></div>
            <div class="status-segment status-5xx" style="width: ${b}%"></div>
          </div>
          <div class="status-legend">
            <span class="legend-item">2xx</span>
            <span class="legend-item">3xx</span>
            <span class="legend-item">4xx</span>
            <span class="legend-item">5xx</span>
          </div>
        </div>
      </div>
    `}formatNumber(c){return c>=1e6?(c/1e6).toFixed(1)+"M":c>=1e3?(c/1e3).toFixed(1)+"K":c.toString()}constructor(){super(...arguments),nU(this,o)}static{nU(i,a)}};return u=i})()});var Iwt,lU,wGt,cU=v(()=>{oe();Iwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},lU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},wGt=(()=>{let t=[Q("sz-platform-services-card")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Iwt(this,null,n,{kind:"accessor",name:"services",static:!1,private:!1,access:{has:d=>"services"in d,get:d=>d.services,set:(d,l)=>{d.services=l}},metadata:c},s,o),Iwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 500px;">
      <sz-platform-services-card
        .services=${[{name:"MongoDB",status:"1 DB",running:!0},{name:"S3 Storage (MinIO)",status:"1 bucket",running:!0},{name:"Caddy Reverse Proxy",status:"Running",running:!0},{name:"ClickHouse",status:"1 DB",running:!0}]}
      ></sz-platform-services-card>
    </div>
  `;static demoGroups=["Platform"];#e=lU(this,s,[]);get services(){return this.#e}set services(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .services-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .service-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        cursor: pointer;
        transition: opacity 200ms ease;
      }

      .service-item:hover {
        opacity: 0.8;
      }

      .service-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .status-dot.running {
        background: ${p.bdTheme("#22c55e","#22c55e")};
        box-shadow: 0 0 6px ${p.bdTheme("rgba(34, 197, 94, 0.4)","rgba(34, 197, 94, 0.4)")};
      }

      .status-dot.stopped {
        background: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .service-name {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .service-status {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div class="title">Platform Services</div>
          <div class="subtitle">Infrastructure status</div>
        </div>

        <div class="services-list">
          ${this.services.map(c=>w`
              <div class="service-item" @click=${()=>this.handleServiceClick(c)}>
                <div class="service-left">
                  <div class="status-dot ${c.running?"running":"stopped"}"></div>
                  <span class="service-name">${c.name}</span>
                </div>
                <span class="service-status">${c.status}</span>
              </div>
            `)}
        </div>
      </div>
    `}handleServiceClick(c){this.dispatchEvent(new CustomEvent("service-click",{detail:c,bubbles:!0,composed:!0}))}constructor(){super(...arguments),lU(this,o)}static{lU(i,a)}};return u=i})()});var Qw,Ll,MGt,dU=v(()=>{oe();Qw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Ll=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},MGt=(()=>{let t=[Q("sz-certificates-card")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Number})],u=[D({type:Number})],l=[D({type:Number})],Qw(this,null,n,{kind:"accessor",name:"validCount",static:!1,private:!1,access:{has:h=>"validCount"in h,get:h=>h.validCount,set:(h,x)=>{h.validCount=x}},metadata:g},s,o),Qw(this,null,u,{kind:"accessor",name:"expiringCount",static:!1,private:!1,access:{has:h=>"expiringCount"in h,get:h=>h.expiringCount,set:(h,x)=>{h.expiringCount=x}},metadata:g},c,d),Qw(this,null,l,{kind:"accessor",name:"expiredCount",static:!1,private:!1,access:{has:h=>"expiredCount"in h,get:h=>h.expiredCount,set:(h,x)=>{h.expiredCount=x}},metadata:g},f,b),Qw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=()=>w`
    <div style="padding: 24px; display: flex; gap: 16px; flex-wrap: wrap;">
      <sz-certificates-card validCount="2"></sz-certificates-card>
      <sz-certificates-card validCount="5" expiringCount="2"></sz-certificates-card>
      <sz-certificates-card validCount="0" expiredCount="1"></sz-certificates-card>
    </div>
  `;static demoGroups=["Network"];#e=Ll(this,s,0);get validCount(){return this.#e}set validCount(g){this.#e=g}#t=(Ll(this,o),Ll(this,c,0));get expiringCount(){return this.#t}set expiringCount(g){this.#t=g}#a=(Ll(this,d),Ll(this,f,0));get expiredCount(){return this.#a}set expiredCount(g){this.#a=g}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        min-width: 200px;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .status {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .status-icon {
        width: 20px;
        height: 20px;
      }

      .status-icon.valid {
        color: ${p.bdTheme("#22c55e","#22c55e")};
      }

      .status-icon.warning {
        color: ${p.bdTheme("#facc15","#facc15")};
      }

      .status-icon.error {
        color: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .status-text {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .status-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div class="title">Certificates</div>
          <div class="subtitle">SSL/TLS certificate status</div>
        </div>

        <div class="status-list">
          ${this.validCount>0?w`
            <div class="status">
              <svg class="status-icon valid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
              <span class="status-text">${this.validCount} valid</span>
            </div>
          `:""}

          ${this.expiringCount>0?w`
            <div class="status">
              <svg class="status-icon warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                <line x1="12" y1="9" x2="12" y2="13"></line>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
              <span class="status-text">${this.expiringCount} expiring soon</span>
            </div>
          `:""}

          ${this.expiredCount>0?w`
            <div class="status">
              <svg class="status-icon error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
              </svg>
              <span class="status-text">${this.expiredCount} expired</span>
            </div>
          `:""}

          ${this.validCount===0&&this.expiringCount===0&&this.expiredCount===0?w`
            <div class="status">
              <span class="status-text">No certificates</span>
            </div>
          `:""}
        </div>
      </div>
    `}constructor(){super(...arguments),Ll(this,b)}static{Ll(i,a)}};return y=i})()});var d3,dr,kGt,pU=v(()=>{oe();d3=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},dr=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},kGt=(()=>{let t=[Q("sz-reverse-proxy-card")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[];var N=class extends r{static{i=this}static{let _=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:Boolean})],y=[D({type:Boolean})],x=[D({type:String})],d3(this,null,n,{kind:"accessor",name:"httpPort",static:!1,private:!1,access:{has:k=>"httpPort"in k,get:k=>k.httpPort,set:(k,I)=>{k.httpPort=I}},metadata:_},s,o),d3(this,null,u,{kind:"accessor",name:"httpsPort",static:!1,private:!1,access:{has:k=>"httpsPort"in k,get:k=>k.httpsPort,set:(k,I)=>{k.httpsPort=I}},metadata:_},c,d),d3(this,null,l,{kind:"accessor",name:"httpActive",static:!1,private:!1,access:{has:k=>"httpActive"in k,get:k=>k.httpActive,set:(k,I)=>{k.httpActive=I}},metadata:_},f,b),d3(this,null,y,{kind:"accessor",name:"httpsActive",static:!1,private:!1,access:{has:k=>"httpsActive"in k,get:k=>k.httpsActive,set:(k,I)=>{k.httpsActive=I}},metadata:_},g,h),d3(this,null,x,{kind:"accessor",name:"routeCount",static:!1,private:!1,access:{has:k=>"routeCount"in k,get:k=>k.routeCount,set:(k,I)=>{k.routeCount=I}},metadata:_},M,S),d3(null,e={value:i},t,{kind:"class",name:i.name,metadata:_},null,a),N=i=e.value,_&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:_})}static demo=()=>w`
    <div style="padding: 24px; max-width: 400px;">
      <sz-reverse-proxy-card
        httpPort="8080"
        httpsPort="8443"
        httpActive
        httpsActive
        routeCount="3"
      ></sz-reverse-proxy-card>
    </div>
  `;static demoGroups=["Network"];#e=dr(this,s,"80");get httpPort(){return this.#e}set httpPort(_){this.#e=_}#t=(dr(this,o),dr(this,c,"443"));get httpsPort(){return this.#t}set httpsPort(_){this.#t=_}#a=(dr(this,d),dr(this,f,!1));get httpActive(){return this.#a}set httpActive(_){this.#a=_}#i=(dr(this,b),dr(this,g,!1));get httpsActive(){return this.#i}set httpsActive(_){this.#i=_}#r=(dr(this,h),dr(this,M,"0"));get routeCount(){return this.#r}set routeCount(_){this.#r=_}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .items {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .item-label {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .item-value {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .badge.active {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .badge.inactive {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div class="title">Reverse Proxy</div>
          <div class="subtitle">HTTP/HTTPS proxy status</div>
        </div>

        <div class="items">
          <div class="item">
            <span class="item-label">HTTP (${this.httpPort})</span>
            <span class="badge ${this.httpActive?"active":"inactive"}">
              ${this.httpActive?"Active":"Inactive"}
            </span>
          </div>
          <div class="item">
            <span class="item-label">HTTPS (${this.httpsPort})</span>
            <span class="badge ${this.httpsActive?"active":"inactive"}">
              ${this.httpsActive?"Active":"Inactive"}
            </span>
          </div>
          <div class="item">
            <span class="item-label">Routes</span>
            <span class="item-value">${this.routeCount}</span>
          </div>
        </div>
      </div>
    `}constructor(){super(...arguments),dr(this,S)}static{dr(i,a)}};return N=i})()});var uU,_8,zGt,hU=v(()=>{oe();uU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},_8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},zGt=(()=>{let t=[Q("sz-dns-ssl-card")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean})],u=[D({type:Boolean})],uU(this,null,n,{kind:"accessor",name:"dnsConfigured",static:!1,private:!1,access:{has:b=>"dnsConfigured"in b,get:b=>b.dnsConfigured,set:(b,y)=>{b.dnsConfigured=y}},metadata:f},s,o),uU(this,null,u,{kind:"accessor",name:"acmeConfigured",static:!1,private:!1,access:{has:b=>"acmeConfigured"in b,get:b=>b.acmeConfigured,set:(b,y)=>{b.acmeConfigured=y}},metadata:f},c,d),uU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 400px;">
      <sz-dns-ssl-card
        dnsConfigured
        acmeConfigured
      ></sz-dns-ssl-card>
    </div>
  `;static demoGroups=["Network"];#e=_8(this,s,!1);get dnsConfigured(){return this.#e}set dnsConfigured(f){this.#e=f}#t=(_8(this,o),_8(this,c,!1));get acmeConfigured(){return this.#t}set acmeConfigured(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .items {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .item-label {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .badge.configured {
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .badge.not-configured {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div class="title">DNS & SSL</div>
          <div class="subtitle">Configuration status</div>
        </div>

        <div class="items">
          <div class="item">
            <span class="item-label">Cloudflare DNS</span>
            <span class="badge ${this.dnsConfigured?"configured":"not-configured"}">
              ${this.dnsConfigured?"Configured":"Not configured"}
            </span>
          </div>
          <div class="item">
            <span class="item-label">ACME (Let's Encrypt)</span>
            <span class="badge ${this.acmeConfigured?"configured":"not-configured"}">
              ${this.acmeConfigured?"Configured":"Not configured"}
            </span>
          </div>
        </div>
      </div>
    `}constructor(){super(...arguments),_8(this,d)}static{_8(i,a)}};return l=i})()});var Nwt,fU,SGt,mU=v(()=>{oe();Nwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},fU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},SGt=(()=>{let t=[Q("sz-quick-actions-card")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Nwt(this,null,n,{kind:"accessor",name:"actions",static:!1,private:!1,access:{has:d=>"actions"in d,get:d=>d.actions,set:(d,l)=>{d.actions=l}},metadata:c},s,o),Nwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 800px;">
      <sz-quick-actions-card
        .actions=${[{label:"Deploy Service",icon:"plus",primary:!0},{label:"View All Services"},{label:"Platform Services"},{label:"Manage Domains"}]}
      ></sz-quick-actions-card>
    </div>
  `;static demoGroups=["Dashboard"];#e=fU(this,s,[]);get actions(){return this.#e}set actions(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        box-sizing: border-box;
      }

      .header {
        margin-bottom: 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
        border: none;
        outline: none;
      }

      .action-button.primary {
        background: ${p.bdTheme("#2563eb","#3b82f6")};
        color: white;
      }

      .action-button.primary:hover {
        background: ${p.bdTheme("#1d4ed8","#2563eb")};
      }

      .action-button.secondary {
        background: ${p.bdTheme("#ffffff","#09090b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .action-button.secondary:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-color: ${p.bdTheme("#d4d4d8","#3f3f46")};
      }

      .action-icon {
        width: 16px;
        height: 16px;
      }
    `];render(){return w`
      <div class="card">
        <div class="header">
          <div class="title">Quick Actions</div>
          <div class="subtitle">Common tasks and shortcuts</div>
        </div>

        <div class="actions">
          ${this.actions.map(c=>w`
              <button
                class="action-button ${c.primary?"primary":"secondary"}"
                @click=${()=>this.handleActionClick(c)}
              >
                ${c.icon==="plus"?w`
                  <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                  </svg>
                `:""}
                ${c.label}
              </button>
            `)}
        </div>
      </div>
    `}handleActionClick(c){this.dispatchEvent(new CustomEvent("action-click",{detail:c,bubbles:!0,composed:!0}))}constructor(){super(...arguments),fU(this,o)}static{fU(i,a)}};return u=i})()});var Rwt,gU,CGt,bU=v(()=>{oe();c3();Rwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},gU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},CGt=(()=>{let t=[Q("sz-status-grid-cluster")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],Rwt(this,null,n,{kind:"accessor",name:"stats",static:!1,private:!1,access:{has:d=>"stats"in d,get:d=>d.stats,set:(d,l)=>{d.stats=l}},metadata:c},s,o),Rwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 900px;">
      <sz-status-grid-cluster
        .stats=${{totalServices:7,running:7,stopped:0,dockerStatus:"running"}}
      ></sz-status-grid-cluster>
    </div>
  `;static demoGroups=["Dashboard Grids"];#e=gU(this,s,{totalServices:0,running:0,stopped:0,dockerStatus:"stopped"});get stats(){return this.#e}set stats(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
    `];render(){return w`
      <div class="grid">
        <sz-stat-card
          label="Total Services"
          value="${this.stats.totalServices}"
          icon="server"
        ></sz-stat-card>
        <sz-stat-card
          label="Running"
          value="${this.stats.running}"
          icon="check"
          variant="success"
        ></sz-stat-card>
        <sz-stat-card
          label="Stopped"
          value="${this.stats.stopped}"
          icon="stop"
          variant="${this.stats.stopped>0?"warning":"default"}"
        ></sz-stat-card>
        <sz-stat-card
          label="Docker"
          value="${this.stats.dockerStatus==="running"?"Running":"Stopped"}"
          icon="container"
          variant="${this.stats.dockerStatus==="running"?"success":"error"}"
          valueBadge
        ></sz-stat-card>
      </div>
    `}constructor(){super(...arguments),gU(this,o)}static{gU(i,a)}};return u=i})()});var vU,T8,_Gt,yU=v(()=>{oe();sU();cU();vU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},T8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},_Gt=(()=>{let t=[Q("sz-status-grid-services")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Array})],vU(this,null,n,{kind:"accessor",name:"resourceUsage",static:!1,private:!1,access:{has:b=>"resourceUsage"in b,get:b=>b.resourceUsage,set:(b,y)=>{b.resourceUsage=y}},metadata:f},s,o),vU(this,null,u,{kind:"accessor",name:"platformServices",static:!1,private:!1,access:{has:b=>"platformServices"in b,get:b=>b.platformServices,set:(b,y)=>{b.platformServices=y}},metadata:f},c,d),vU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-status-grid-services
        .resourceUsage=${{cpu:45,memoryUsed:"4.96 GB",memoryTotal:"8 GB",networkIn:"1.2 MB/s",networkOut:"0.8 MB/s",topConsumers:[{name:"api-service",memory:"512 MB"},{name:"web-frontend",memory:"256 MB"},{name:"worker",memory:"128 MB"}]}}
        .platformServices=${[{name:"MongoDB",status:"1 DB",running:!0},{name:"S3 Storage",status:"1 bucket",running:!0},{name:"ClickHouse",status:"Stopped",running:!1},{name:"Redis Cache",status:"Running",running:!0}]}
      ></sz-status-grid-services>
    </div>
  `;static demoGroups=["Dashboard Grids"];#e=T8(this,s,{cpu:0,memoryUsed:"0 GB",memoryTotal:"0 GB",networkIn:"0 MB/s",networkOut:"0 MB/s",topConsumers:[]});get resourceUsage(){return this.#e}set resourceUsage(f){this.#e=f}#t=(T8(this,o),T8(this,c,[]));get platformServices(){return this.#t}set platformServices(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    `];render(){return w`
      <div class="grid">
        <sz-resource-usage-card
          .usage=${this.resourceUsage}
        ></sz-resource-usage-card>
        <sz-platform-services-card
          .services=${this.platformServices}
        ></sz-platform-services-card>
      </div>
    `}constructor(){super(...arguments),T8(this,d)}static{T8(i,a)}};return l=i})()});var Jw,$l,TGt,xU=v(()=>{oe();oU();pU();dU();Jw=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},$l=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},TGt=(()=>{let t=[Q("sz-status-grid-network")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Object})],l=[D({type:Object})],Jw(this,null,n,{kind:"accessor",name:"traffic",static:!1,private:!1,access:{has:h=>"traffic"in h,get:h=>h.traffic,set:(h,x)=>{h.traffic=x}},metadata:g},s,o),Jw(this,null,u,{kind:"accessor",name:"proxy",static:!1,private:!1,access:{has:h=>"proxy"in h,get:h=>h.proxy,set:(h,x)=>{h.proxy=x}},metadata:g},c,d),Jw(this,null,l,{kind:"accessor",name:"certificates",static:!1,private:!1,access:{has:h=>"certificates"in h,get:h=>h.certificates,set:(h,x)=>{h.certificates=x}},metadata:g},f,b),Jw(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1400px;">
      <sz-status-grid-network
        .traffic=${{requests:125420,errors:150,errorPercent:.12,avgResponse:45,reqPerMin:847,status2xx:95.2,status3xx:2.1,status4xx:2.3,status5xx:.4}}
        .proxy=${{httpPort:"80",httpsPort:"443",httpActive:!0,httpsActive:!0,routeCount:"12"}}
        .certificates=${{valid:8,expiring:2,expired:0}}
      ></sz-status-grid-network>
    </div>
  `;static demoGroups=["Dashboard Grids"];#e=$l(this,s,{requests:0,errors:0,errorPercent:0,avgResponse:0,reqPerMin:0,status2xx:0,status3xx:0,status4xx:0,status5xx:0});get traffic(){return this.#e}set traffic(g){this.#e=g}#t=($l(this,o),$l(this,c,{httpPort:"80",httpsPort:"443",httpActive:!1,httpsActive:!1,routeCount:"0"}));get proxy(){return this.#t}set proxy(g){this.#t=g}#a=($l(this,d),$l(this,f,{valid:0,expiring:0,expired:0}));get certificates(){return this.#a}set certificates(g){this.#a=g}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media (min-width: 1024px) {
        .grid {
          grid-template-columns: 2fr 1fr 1fr;
        }
      }
    `];render(){return w`
      <div class="grid">
        <sz-traffic-card
          .data=${this.traffic}
        ></sz-traffic-card>
        <sz-reverse-proxy-card
          httpPort="${this.proxy.httpPort}"
          httpsPort="${this.proxy.httpsPort}"
          ?httpActive=${this.proxy.httpActive}
          ?httpsActive=${this.proxy.httpsActive}
          routeCount="${this.proxy.routeCount}"
        ></sz-reverse-proxy-card>
        <sz-certificates-card
          valid="${this.certificates.valid}"
          expiring="${this.certificates.expiring}"
          expired="${this.certificates.expired}"
        ></sz-certificates-card>
      </div>
    `}constructor(){super(...arguments),$l(this,b)}static{$l(i,a)}};return y=i})()});var eM,Dl,LGt,wU=v(()=>{oe();hU();mU();eM=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Dl=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},LGt=(()=>{let t=[Q("sz-status-grid-infra")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean})],u=[D({type:Boolean})],l=[D({type:Array})],eM(this,null,n,{kind:"accessor",name:"dnsConfigured",static:!1,private:!1,access:{has:h=>"dnsConfigured"in h,get:h=>h.dnsConfigured,set:(h,x)=>{h.dnsConfigured=x}},metadata:g},s,o),eM(this,null,u,{kind:"accessor",name:"acmeConfigured",static:!1,private:!1,access:{has:h=>"acmeConfigured"in h,get:h=>h.acmeConfigured,set:(h,x)=>{h.acmeConfigured=x}},metadata:g},c,d),eM(this,null,l,{kind:"accessor",name:"actions",static:!1,private:!1,access:{has:h=>"actions"in h,get:h=>h.actions,set:(h,x)=>{h.actions=x}},metadata:g},f,b),eM(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-status-grid-infra
        dnsConfigured
        acmeConfigured
        .actions=${[{label:"Deploy Service",icon:"plus",primary:!0},{label:"View All Services"},{label:"Platform Services"},{label:"Manage Domains"}]}
      ></sz-status-grid-infra>
    </div>
  `;static demoGroups=["Dashboard Grids"];#e=Dl(this,s,!1);get dnsConfigured(){return this.#e}set dnsConfigured(g){this.#e=g}#t=(Dl(this,o),Dl(this,c,!1));get acmeConfigured(){return this.#t}set acmeConfigured(g){this.#t=g}#a=(Dl(this,d),Dl(this,f,[]));get actions(){return this.#a}set actions(g){this.#a=g}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: 1fr 2fr;
        }
      }
    `];render(){return w`
      <div class="grid">
        <sz-dns-ssl-card
          ?dnsConfigured=${this.dnsConfigured}
          ?acmeConfigured=${this.acmeConfigured}
        ></sz-dns-ssl-card>
        <sz-quick-actions-card
          .actions=${this.actions}
          @action-click=${g=>this.dispatchEvent(new CustomEvent("action-click",{detail:g.detail,bubbles:!0,composed:!0}))}
        ></sz-quick-actions-card>
      </div>
    `}constructor(){super(...arguments),Dl(this,b)}static{Dl(i,a)}};return y=i})()});var Fwt,MU,$Gt,Owt=v(()=>{oe();bU();yU();xU();wU();Fwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},MU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},$Gt=(()=>{let t=[Q("sz-dashboard-view")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],Fwt(this,null,n,{kind:"accessor",name:"data",static:!1,private:!1,access:{has:d=>"data"in d,get:d=>d.data,set:(d,l)=>{d.data=l}},metadata:c},s,o),Fwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1400px;">
      <sz-dashboard-view
        .data=${{cluster:{totalServices:7,running:7,stopped:0,dockerStatus:"running"},resourceUsage:{cpu:.5,memoryUsed:"191 MB",memoryTotal:"429.2 GB",networkIn:"38.9 KB/s",networkOut:"1.7 KB/s",topConsumers:[{name:"test-nginx",memory:"32.1 MB"},{name:"test-v2",memory:"31.7 MB"}]},platformServices:[{name:"MongoDB",status:"1 DB",running:!0},{name:"S3 Storage (MinIO)",status:"1 bucket",running:!0},{name:"Caddy Reverse Proxy",status:"Running",running:!0},{name:"ClickHouse",status:"1 DB",running:!0}],traffic:{requests:1250,errors:15,errorPercent:1.2,avgResponse:145,reqPerMin:21,status2xx:85,status3xx:5,status4xx:8,status5xx:2},proxy:{httpPort:"80",httpsPort:"443",httpActive:!0,httpsActive:!0,routeCount:"12"},certificates:{valid:8,expiring:2,expired:0},dnsConfigured:!0,acmeConfigured:!0,quickActions:[{label:"Deploy Service",icon:"plus",primary:!0},{label:"View All Services"},{label:"Platform Services"},{label:"Manage Domains"}]}}
      ></sz-dashboard-view>
    </div>
  `;static demoGroups=["Dashboard"];#e=MU(this,s,{cluster:{totalServices:0,running:0,stopped:0,dockerStatus:"stopped"},resourceUsage:{cpu:0,memoryUsed:"0 MB",memoryTotal:"0 GB",networkIn:"0 KB/s",networkOut:"0 KB/s",topConsumers:[]},platformServices:[],traffic:{requests:0,errors:0,errorPercent:0,avgResponse:0,reqPerMin:0,status2xx:0,status3xx:0,status4xx:0,status5xx:0},proxy:{httpPort:"80",httpsPort:"443",httpActive:!1,httpsActive:!1,routeCount:"0"},certificates:{valid:0,expiring:0,expired:0},dnsConfigured:!1,acmeConfigured:!1,quickActions:[]});get data(){return this.#e}set data(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .dashboard {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 12px;
      }

      .section {
        display: flex;
        flex-direction: column;
      }
    `];render(){return w`
      <div class="dashboard">
        <section class="section">
          <h2 class="section-title">Cluster Overview</h2>
          <sz-status-grid-cluster
            .stats=${this.data.cluster}
          ></sz-status-grid-cluster>
        </section>

        <section class="section">
          <h2 class="section-title">Services & Resources</h2>
          <sz-status-grid-services
            .resourceUsage=${this.data.resourceUsage}
            .platformServices=${this.data.platformServices}
          ></sz-status-grid-services>
        </section>

        <section class="section">
          <h2 class="section-title">Network & Traffic</h2>
          <sz-status-grid-network
            .traffic=${this.data.traffic}
            .proxy=${this.data.proxy}
            .certificates=${this.data.certificates}
          ></sz-status-grid-network>
        </section>

        <section class="section">
          <h2 class="section-title">Infrastructure</h2>
          <sz-status-grid-infra
            ?dnsConfigured=${this.data.dnsConfigured}
            ?acmeConfigured=${this.data.acmeConfigured}
            .actions=${this.data.quickActions}
            @action-click=${c=>this.dispatchEvent(new CustomEvent("action-click",{detail:c.detail,bubbles:!0,composed:!0}))}
          ></sz-status-grid-infra>
        </section>
      </div>
    `}constructor(){super(...arguments),MU(this,o)}static{MU(i,a)}};return u=i})()});var Do,ya,DGt,Bwt=v(()=>{oe();c3();Do=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},ya=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},DGt=(()=>{let t=[Q("sz-network-proxy-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[];var V=class extends r{static{i=this}static{let C=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],l=[D({type:String})],y=[D({type:String})],x=[D({type:Array})],N=[D({type:Array})],I=[D({type:Boolean})],Do(this,null,n,{kind:"accessor",name:"proxyStatus",static:!1,private:!1,access:{has:z=>"proxyStatus"in z,get:z=>z.proxyStatus,set:(z,E)=>{z.proxyStatus=E}},metadata:C},s,o),Do(this,null,u,{kind:"accessor",name:"routeCount",static:!1,private:!1,access:{has:z=>"routeCount"in z,get:z=>z.routeCount,set:(z,E)=>{z.routeCount=E}},metadata:C},c,d),Do(this,null,l,{kind:"accessor",name:"certificateCount",static:!1,private:!1,access:{has:z=>"certificateCount"in z,get:z=>z.certificateCount,set:(z,E)=>{z.certificateCount=E}},metadata:C},f,b),Do(this,null,y,{kind:"accessor",name:"targetCount",static:!1,private:!1,access:{has:z=>"targetCount"in z,get:z=>z.targetCount,set:(z,E)=>{z.targetCount=E}},metadata:C},g,h),Do(this,null,x,{kind:"accessor",name:"targets",static:!1,private:!1,access:{has:z=>"targets"in z,get:z=>z.targets,set:(z,E)=>{z.targets=E}},metadata:C},M,S),Do(this,null,N,{kind:"accessor",name:"logs",static:!1,private:!1,access:{has:z=>"logs"in z,get:z=>z.logs,set:(z,E)=>{z.logs=E}},metadata:C},_,k),Do(this,null,I,{kind:"accessor",name:"streaming",static:!1,private:!1,access:{has:z=>"streaming"in z,get:z=>z.streaming,set:(z,E)=>{z.streaming=E}},metadata:C},L,A),Do(null,e={value:i},t,{kind:"class",name:i.name,metadata:C},null,a),V=i=e.value,C&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:C})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1400px;">
      <sz-network-proxy-view
        proxyStatus="running"
        routeCount="3"
        certificateCount="2"
        targetCount="11"
        .targets=${[{type:"service",name:"test-nginx",domain:"app.bleu.de",target:"localhost:8080",status:"running"},{type:"service",name:"hello-world",domain:"hello.task.vc",target:"localhost:8081",status:"running"},{type:"registry",name:"onebox-registry",domain:null,target:"localhost:4000",status:"running"},{type:"platform",name:"MongoDB",domain:null,target:"localhost:27017",status:"running"},{type:"platform",name:"ClickHouse",domain:null,target:"localhost:8123",status:"running"}]}
        .logs=${[{timestamp:"2024-01-02 10:15:32",method:"GET",path:"/api/services",status:200,duration:45,ip:"192.168.1.100"},{timestamp:"2024-01-02 10:15:30",method:"POST",path:"/api/auth/login",status:200,duration:120,ip:"192.168.1.101"},{timestamp:"2024-01-02 10:15:28",method:"GET",path:"/static/bundle.js",status:304,duration:5,ip:"192.168.1.100"}]}
      ></sz-network-proxy-view>
    </div>
  `;static demoGroups=["Network"];#e=ya(this,s,"stopped");get proxyStatus(){return this.#e}set proxyStatus(C){this.#e=C}#t=(ya(this,o),ya(this,c,"0"));get routeCount(){return this.#t}set routeCount(C){this.#t=C}#a=(ya(this,d),ya(this,f,"0"));get certificateCount(){return this.#a}set certificateCount(C){this.#a=C}#i=(ya(this,b),ya(this,g,"0"));get targetCount(){return this.#i}set targetCount(C){this.#i=C}#r=(ya(this,h),ya(this,M,[]));get targets(){return this.#r}set targets(C){this.#r=C}#s=(ya(this,S),ya(this,_,[]));get logs(){return this.#s}set logs(C){this.#s=C}#n=(ya(this,k),ya(this,L,!1));get streaming(){return this.#n}set streaming(C){this.#n=C}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
      }

      .refresh-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .refresh-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 24px;
      }

      @media (min-width: 768px) {
        .stats-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        margin-bottom: 24px;
        overflow: hidden;
      }

      .section-header {
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .section-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .table-header {
        display: grid;
        grid-template-columns: 80px 1.5fr 1.5fr 1.5fr 80px;
        gap: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .table-row {
        display: grid;
        grid-template-columns: 80px 1.5fr 1.5fr 1.5fr 80px;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: background 200ms ease;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .type-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
      }

      .type-badge.service {
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .type-badge.registry {
        background: ${p.bdTheme("#f3e8ff","rgba(168, 85, 247, 0.2)")};
        color: ${p.bdTheme("#9333ea","#a855f7")};
      }

      .type-badge.platform {
        background: ${p.bdTheme("#fef3c7","rgba(245, 158, 11, 0.2)")};
        color: ${p.bdTheme("#d97706","#f59e0b")};
      }

      .target-value {
        font-family: monospace;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.stopped {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .logs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .logs-actions {
        display: flex;
        gap: 8px;
      }

      .stream-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: ${p.bdTheme("#2563eb","#3b82f6")};
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
        color: white;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .stream-button:hover {
        background: ${p.bdTheme("#1d4ed8","#2563eb")};
      }

      .stream-button.streaming {
        background: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .stream-button.streaming:hover {
        background: ${p.bdTheme("#b91c1c","#dc2626")};
      }

      .clear-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .clear-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .logs-container {
        padding: 16px;
        font-family: monospace;
        font-size: 13px;
        max-height: 300px;
        overflow-y: auto;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
      }

      .log-entry {
        padding: 4px 0;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .log-timestamp {
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .log-method {
        font-weight: 600;
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .log-status-2xx {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .log-status-3xx {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .log-status-4xx {
        color: ${p.bdTheme("#ca8a04","#facc15")};
      }

      .log-status-5xx {
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .empty-logs {
        padding: 24px;
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="actions">
        <button class="refresh-button" @click=${()=>this.handleRefresh()}>Refresh</button>
      </div>

      <div class="stats-grid">
        <sz-stat-card
          label="Proxy Status"
          value="${this.proxyStatus==="running"?"Running":"Stopped"}"
          icon="server"
          variant="${this.proxyStatus==="running"?"success":"error"}"
          valueBadge
        ></sz-stat-card>
        <sz-stat-card
          label="Routes"
          value="${this.routeCount}"
          icon="server"
        ></sz-stat-card>
        <sz-stat-card
          label="Certificates"
          value="${this.certificateCount}"
          icon="check"
        ></sz-stat-card>
        <sz-stat-card
          label="Targets"
          value="${this.targetCount}"
          icon="server"
        ></sz-stat-card>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Traffic Targets</div>
          <div class="section-subtitle">Services, registry, and platform services with their routing info</div>
        </div>
        <div class="table-header">
          <span>Type</span>
          <span>Name</span>
          <span>Domain</span>
          <span>Target</span>
          <span>Status</span>
        </div>
        ${this.targets.map(C=>w`
          <div class="table-row" @click=${()=>this.handleTargetClick(C)}>
            <span><span class="type-badge ${C.type}">${C.type}</span></span>
            <span>${C.name}</span>
            <span>${C.domain||"-"}</span>
            <span class="target-value">${C.target}</span>
            <span><span class="status-badge ${C.status}">${C.status}</span></span>
          </div>
        `)}
      </div>

      <div class="section">
        <div class="logs-header">
          <div>
            <div class="section-title">Access Logs</div>
            <div class="section-subtitle">Real-time Caddy access logs</div>
          </div>
          <div class="logs-actions">
            <button class="stream-button ${this.streaming?"streaming":""}" @click=${()=>this.toggleStreaming()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                ${this.streaming?w`<rect x="6" y="6" width="12" height="12" rx="1"/>`:w`<polygon points="5,3 19,12 5,21"/>`}
              </svg>
              ${this.streaming?"Stop":"Stream"}
            </button>
            <button class="clear-button" @click=${()=>this.handleClearLogs()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
              </svg>
              Clear logs
            </button>
          </div>
        </div>
        <div class="logs-container">
          ${this.logs.length>0?this.logs.map(C=>w`
            <div class="log-entry">
              <span class="log-timestamp">${C.timestamp}</span>
              <span class="log-method">${C.method}</span>
              ${C.path}
              <span class="${this.getStatusClass(C.status)}">${C.status}</span>
              ${C.duration}ms
              ${C.ip}
            </div>
          `):w`
            <div class="empty-logs">Click "Stream" to start live access log streaming</div>
          `}
        </div>
      </div>
    `}getStatusClass(C){return C>=500?"log-status-5xx":C>=400?"log-status-4xx":C>=300?"log-status-3xx":"log-status-2xx"}handleRefresh(){this.dispatchEvent(new CustomEvent("refresh",{bubbles:!0,composed:!0}))}handleTargetClick(C){this.dispatchEvent(new CustomEvent("target-click",{detail:C,bubbles:!0,composed:!0}))}toggleStreaming(){this.streaming=!this.streaming,this.dispatchEvent(new CustomEvent("stream-toggle",{detail:{streaming:this.streaming},bubbles:!0,composed:!0}))}handleClearLogs(){this.dispatchEvent(new CustomEvent("clear-logs",{bubbles:!0,composed:!0}))}constructor(){super(...arguments),ya(this,A)}static{ya(i,a)}};return V=i})()});var Hwt,kU,AGt,qwt=v(()=>{oe();Hwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},kU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},AGt=(()=>{let t=[Q("sz-network-dns-view")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Hwt(this,null,n,{kind:"accessor",name:"records",static:!1,private:!1,access:{has:d=>"records"in d,get:d=>d.records,set:(d,l)=>{d.records=l}},metadata:c},s,o),Hwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1000px;">
      <sz-network-dns-view
        .records=${[{domain:"pr.task.vc",type:"A",value:"195.201.98.232"},{domain:"outline.task.vc",type:"A",value:"195.201.98.232"},{domain:"ns1.task.vc",type:"A",value:"212.95.99.130"},{domain:"bleu.de",type:"A",value:"212.95.99.130"},{domain:"mail.bleu.de",type:"MX",value:"10 mail.bleu.de"}]}
      ></sz-network-dns-view>
    </div>
  `;static demoGroups=["Network"];#e=kU(this,s,[]);get records(){return this.#e}set records(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .description {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .sync-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .sync-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-color: ${p.bdTheme("#d4d4d8","#3f3f46")};
      }

      .table-container {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .table-header {
        display: grid;
        grid-template-columns: 2fr 80px 2fr 100px;
        gap: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .table-row {
        display: grid;
        grid-template-columns: 2fr 80px 2fr 100px;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        transition: background 200ms ease;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .domain {
        font-weight: 500;
      }

      .type-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
      }

      .value {
        font-family: monospace;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .delete-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
        border-radius: 4px;
        font-size: 13px;
        color: ${p.bdTheme("#dc2626","#ef4444")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .delete-button:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .empty-state {
        padding: 48px 24px;
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="header">
        <span class="description">Manage DNS records synced with Cloudflare</span>
        <button class="sync-button" @click=${()=>this.handleSync()}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/>
          </svg>
          Sync Cloudflare
        </button>
      </div>

      <div class="table-container">
        <div class="table-header">
          <span>Domain</span>
          <span>Type</span>
          <span>Value</span>
          <span>Actions</span>
        </div>
        ${this.records.length>0?this.records.map(c=>w`
          <div class="table-row">
            <span class="domain">${c.domain}</span>
            <span><span class="type-badge">${c.type}</span></span>
            <span class="value">${c.value}</span>
            <span>
              <button class="delete-button" @click=${()=>this.handleDelete(c)}>Delete</button>
            </span>
          </div>
        `):w`
          <div class="empty-state">No DNS records found</div>
        `}
      </div>
    `}handleSync(){this.dispatchEvent(new CustomEvent("sync",{bubbles:!0,composed:!0}))}handleDelete(c){this.dispatchEvent(new CustomEvent("delete",{detail:c,bubbles:!0,composed:!0}))}constructor(){super(...arguments),kU(this,o)}static{kU(i,a)}};return u=i})()});var zU,L8,EGt,Vwt=v(()=>{oe();c3();zU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},L8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},EGt=(()=>{let t=[Q("sz-network-domains-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Object})],zU(this,null,n,{kind:"accessor",name:"domains",static:!1,private:!1,access:{has:b=>"domains"in b,get:b=>b.domains,set:(b,y)=>{b.domains=y}},metadata:f},s,o),zU(this,null,u,{kind:"accessor",name:"stats",static:!1,private:!1,access:{has:b=>"stats"in b,get:b=>b.stats,set:(b,y)=>{b.stats=y}},metadata:f},c,d),zU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-network-domains-view
        .domains=${[{domain:"bleu.de",provider:"cloudflare",serviceCount:2,certificateStatus:"valid",expiresIn:"52 days"},{domain:"task.vc",provider:"cloudflare",serviceCount:1,certificateStatus:"valid",expiresIn:"52 days"},{domain:"example.com",provider:"cloudflare",serviceCount:0,certificateStatus:"expiring",expiresIn:"7 days"}]}
        .stats=${{total:3,valid:2,expiring:1,expired:0}}
      ></sz-network-domains-view>
    </div>
  `;static demoGroups=["Network"];#e=L8(this,s,[]);get domains(){return this.#e}set domains(f){this.#e=f}#t=(L8(this,o),L8(this,c,{total:0,valid:0,expiring:0,expired:0}));get stats(){return this.#t}set stats(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .description {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .sync-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .sync-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-color: ${p.bdTheme("#d4d4d8","#3f3f46")};
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 24px;
      }

      @media (min-width: 768px) {
        .stats-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .table-container {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .table-header {
        display: grid;
        grid-template-columns: 2fr 1fr 80px 100px 100px 80px;
        gap: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .table-row {
        display: grid;
        grid-template-columns: 2fr 1fr 80px 100px 100px 80px;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        align-items: center;
        transition: background 200ms ease;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .domain-name {
        font-weight: 500;
      }

      .provider {
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.valid {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.expiring {
        background: ${p.bdTheme("#fef9c3","rgba(250, 204, 21, 0.2)")};
        color: ${p.bdTheme("#ca8a04","#facc15")};
      }

      .status-badge.expired,
      .status-badge.pending {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .expires {
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .view-button {
        padding: 6px 12px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 13px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .view-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .empty-state {
        padding: 48px 24px;
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="header">
        <span class="description">Manage domains and SSL certificates</span>
        <button class="sync-button" @click=${()=>this.handleSync()}>Sync Cloudflare</button>
      </div>

      <div class="stats-grid">
        <sz-stat-card
          label="Total Domains"
          value="${this.stats.total}"
          icon="server"
        ></sz-stat-card>
        <sz-stat-card
          label="Valid Certificates"
          value="${this.stats.valid}"
          icon="check"
          variant="success"
        ></sz-stat-card>
        <sz-stat-card
          label="Expiring Soon"
          value="${this.stats.expiring}"
          icon="stop"
          variant="${this.stats.expiring>0?"warning":"default"}"
        ></sz-stat-card>
        <sz-stat-card
          label="Expired/Pending"
          value="${this.stats.expired}"
          icon="stop"
          variant="${this.stats.expired>0?"error":"default"}"
        ></sz-stat-card>
      </div>

      <div class="table-container">
        <div class="table-header">
          <span>Domain</span>
          <span>Provider</span>
          <span>Services</span>
          <span>Certificate</span>
          <span>Expires</span>
          <span>Actions</span>
        </div>
        ${this.domains.length>0?this.domains.map(f=>w`
          <div class="table-row">
            <span class="domain-name">${f.domain}</span>
            <span class="provider">${f.provider}</span>
            <span>${f.serviceCount}</span>
            <span><span class="status-badge ${f.certificateStatus}">${f.certificateStatus}</span></span>
            <span class="expires">${f.expiresIn||"-"}</span>
            <span>
              <button class="view-button" @click=${()=>this.handleView(f)}>View</button>
            </span>
          </div>
        `):w`
          <div class="empty-state">No domains configured</div>
        `}
      </div>
    `}handleSync(){this.dispatchEvent(new CustomEvent("sync",{bubbles:!0,composed:!0}))}handleView(f){this.dispatchEvent(new CustomEvent("view",{detail:f,bubbles:!0,composed:!0}))}constructor(){super(...arguments),L8(this,d)}static{L8(i,a)}};return l=i})()});var SU,$8,PGt,jwt=v(()=>{oe();SU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},$8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},PGt=(()=>{let t=[Q("sz-registry-advertisement")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:String})],u=[D({type:String})],SU(this,null,n,{kind:"accessor",name:"status",static:!1,private:!1,access:{has:b=>"status"in b,get:b=>b.status,set:(b,y)=>{b.status=y}},metadata:f},s,o),SU(this,null,u,{kind:"accessor",name:"registryUrl",static:!1,private:!1,access:{has:b=>"registryUrl"in b,get:b=>b.registryUrl,set:(b,y)=>{b.registryUrl=y}},metadata:f},c,d),SU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 800px;">
      <sz-registry-advertisement
        status="running"
        registryUrl="localhost:3000/v2"
      ></sz-registry-advertisement>
    </div>
  `;static demoGroups=["Auth & Settings"];#e=$8(this,s,"stopped");get status(){return this.#e}set status(f){this.#e=f}#t=($8(this,o),$8(this,c,""));get registryUrl(){return this.#t}set registryUrl(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .registry-icon {
        width: 40px;
        height: 40px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#2563eb","#60a5fa")};
      }

      .header-info {
        flex: 1;
      }

      .header-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .default-badge {
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
      }

      .header-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .card-content {
        padding: 16px;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }

      .info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .info-label {
        font-size: 12px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .info-value {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.stopped {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .manage-link {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        text-decoration: none;
        cursor: pointer;
      }

      .manage-link:hover {
        text-decoration: underline;
      }

      .quick-start {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 6px;
        padding: 16px;
      }

      .quick-start-title {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 8px;
      }

      .quick-start-desc {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 12px;
      }

      .code-block {
        background: ${p.bdTheme("#18181b","#0a0a0a")};
        border-radius: 6px;
        padding: 12px;
        font-family: monospace;
        font-size: 13px;
        overflow-x: auto;
      }

      .code-line {
        color: ${p.bdTheme("#a1a1aa","#71717a")};
        margin-bottom: 4px;
      }

      .code-line:last-child {
        margin-bottom: 0;
      }

      .code-comment {
        color: ${p.bdTheme("#6b7280","#52525b")};
      }

      .code-command {
        color: ${p.bdTheme("#fafafa","#e4e4e7")};
      }
    `];render(){return w`
      <div class="card">
        <div class="card-header">
          <div class="registry-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            </svg>
          </div>
          <div class="header-info">
            <div class="header-title">
              Registry Advertisement
              <span class="default-badge">Default</span>
            </div>
            <div class="header-subtitle">Container registry for your services</div>
          </div>
        </div>

        <div class="card-content">
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">Status</span>
              <span class="info-value">
                <span class="status-badge ${this.status}">${this.status==="running"?"Running":"Stopped"}</span>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">Registry URL</span>
              <span class="info-value">${this.registryUrl}</span>
            </div>
            <div class="info-item">
              <span class="info-label">Authentication</span>
              <span class="info-value">
                <a class="manage-link" @click=${()=>this.handleManageTokens()}>Manage Tokens</a>
              </span>
            </div>
          </div>

          <div class="quick-start">
            <div class="quick-start-title">Quick Start</div>
            <div class="quick-start-desc">To push images to the registry, use a CI or Global token:</div>
            <div class="code-block">
              <div class="code-line code-comment"># Login to the registry</div>
              <div class="code-line code-command">docker login ${this.registryUrl.split("/")[0]} -u registry -p YOUR_TOKEN</div>
              <div class="code-line code-comment"># Tag and push your image</div>
              <div class="code-line code-command">docker tag myapp ${this.registryUrl.split("/")[0]}/myservice:latest</div>
              <div class="code-line code-command">docker push ${this.registryUrl.split("/")[0]}/myservice:latest</div>
            </div>
          </div>
        </div>
      </div>
    `}handleManageTokens(){this.dispatchEvent(new CustomEvent("manage-tokens",{bubbles:!0,composed:!0}))}constructor(){super(...arguments),$8(this,d)}static{$8(i,a)}};return l=i})()});var Uwt,CU,IGt,Wwt=v(()=>{oe();Uwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},CU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},IGt=(()=>{let t=[Q("sz-registry-external-view")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Uwt(this,null,n,{kind:"accessor",name:"registries",static:!1,private:!1,access:{has:d=>"registries"in d,get:d=>d.registries,set:(d,l)=>{d.registries=l}},metadata:c},s,o),Uwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 800px;">
      <sz-registry-external-view
        .registries=${[{id:"1",name:"Docker Hub",url:"docker.io",username:"myuser",type:"dockerhub"},{id:"2",name:"GitHub Container Registry",url:"ghcr.io",username:"myorg",type:"ghcr"}]}
      ></sz-registry-external-view>
    </div>
  `;static demoGroups=["Auth & Settings"];#e=CU(this,s,[]);get registries(){return this.#e}set registries(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
      }

      .header-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .header-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .add-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#fafafa","#18181b")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .add-button:hover {
        opacity: 0.9;
      }

      .registry-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .registry-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
      }

      .registry-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .registry-icon {
        width: 40px;
        height: 40px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .registry-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .registry-name {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .registry-url {
        font-size: 13px;
        font-family: monospace;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .registry-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .action-button.delete {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .action-button.delete:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .empty-state {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 48px 24px;
        text-align: center;
      }

      .empty-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .empty-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 8px;
      }

      .empty-description {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 16px;
      }

      .empty-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .empty-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }
    `];render(){return w`
      <div class="header">
        <div class="header-info">
          <div class="header-title">External Registries</div>
          <div class="header-subtitle">Add credentials for private Docker registries</div>
        </div>
        <button class="add-button" @click=${()=>this.handleAdd()}>Add Registry</button>
      </div>

      ${this.registries.length>0?w`
        <div class="registry-list">
          ${this.registries.map(c=>w`
            <div class="registry-item">
              <div class="registry-info">
                <div class="registry-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                  </svg>
                </div>
                <div class="registry-details">
                  <div class="registry-name">${c.name}</div>
                  <div class="registry-url">${c.url} (${c.username})</div>
                </div>
              </div>
              <div class="registry-actions">
                <button class="action-button" @click=${()=>this.handleEdit(c)}>Edit</button>
                <button class="action-button delete" @click=${()=>this.handleDelete(c)}>Delete</button>
              </div>
            </div>
          `)}
        </div>
      `:w`
        <div class="empty-state">
          <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
            <line x1="12" y1="22.08" x2="12" y2="12"></line>
          </svg>
          <div class="empty-title">No external registries</div>
          <div class="empty-description">Add credentials for Docker Hub, GitHub Container Registry, or other private registries.</div>
          <button class="empty-button" @click=${()=>this.handleAdd()}>Add External Registry</button>
        </div>
      `}
    `}handleAdd(){this.dispatchEvent(new CustomEvent("add",{bubbles:!0,composed:!0}))}handleEdit(c){this.dispatchEvent(new CustomEvent("edit",{detail:c,bubbles:!0,composed:!0}))}handleDelete(c){this.dispatchEvent(new CustomEvent("delete",{detail:c,bubbles:!0,composed:!0}))}constructor(){super(...arguments),CU(this,o)}static{CU(i,a)}};return u=i})()});var Gwt,_U,NGt,Ywt=v(()=>{oe();Gwt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},_U=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},NGt=(()=>{let t=[Q("sz-services-list-view")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],Gwt(this,null,n,{kind:"accessor",name:"services",static:!1,private:!1,access:{has:d=>"services"in d,get:d=>d.services,set:(d,l)=>{d.services=l}},metadata:c},s,o),Gwt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-services-list-view
        .services=${[{name:"test-nginx",image:"nginx:alpine",domain:"app.bleu.de",status:"running"},{name:"hello-world",image:"localhost:3000/hello-world:latest",domain:"hello.task.vc",status:"running"},{name:"test-v2",image:"localhost:3000/test-registry:v1",domain:null,status:"running"},{name:"api-service",image:"node:18-alpine",domain:"api.example.com",status:"stopped"}]}
      ></sz-services-list-view>
    </div>
  `;static demoGroups=["Services"];#e=_U(this,s,[]);get services(){return this.#e}set services(c){this.#e=c}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .table-container {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .table-header {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1.5fr 100px 200px;
        gap: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .table-row {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1.5fr 100px 200px;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        align-items: center;
        transition: background 200ms ease;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .service-name {
        font-weight: 500;
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        cursor: pointer;
      }

      .service-name:hover {
        text-decoration: underline;
      }

      .image {
        font-family: monospace;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .domain-link {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        text-decoration: none;
      }

      .domain-link:hover {
        text-decoration: underline;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.stopped {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .status-badge.starting {
        background: ${p.bdTheme("#fef9c3","rgba(250, 204, 21, 0.2)")};
        color: ${p.bdTheme("#ca8a04","#facc15")};
      }

      .status-badge.error {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        padding: 4px 10px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .action-button.stop {
        color: ${p.bdTheme("#ca8a04","#facc15")};
        border-color: ${p.bdTheme("#fef9c3","rgba(250, 204, 21, 0.3)")};
      }

      .action-button.start {
        color: ${p.bdTheme("#16a34a","#22c55e")};
        border-color: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.3)")};
      }

      .action-button.restart {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-color: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.3)")};
      }

      .action-button.delete {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .empty-state {
        padding: 48px 24px;
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return w`
      <div class="table-container">
        <div class="table-header">
          <span>Name</span>
          <span>Image</span>
          <span>Domain</span>
          <span>Status</span>
          <span>Actions</span>
        </div>
        ${this.services.length>0?this.services.map(c=>w`
          <div class="table-row">
            <span class="service-name" @click=${()=>this.handleServiceClick(c)}>${c.name}</span>
            <span class="image" title="${c.image}">${c.image}</span>
            <span>
              ${c.domain?w`<a class="domain-link" href="https://${c.domain}" target="_blank">${c.domain}</a>`:"-"}
            </span>
            <span><span class="status-badge ${c.status}">${c.status}</span></span>
            <span class="actions">
              ${c.status==="running"?w`<button class="action-button stop" @click=${()=>this.handleAction(c,"stop")}>Stop</button>`:w`<button class="action-button start" @click=${()=>this.handleAction(c,"start")}>Start</button>`}
              <button class="action-button restart" @click=${()=>this.handleAction(c,"restart")}>Restart</button>
              <button class="action-button delete" @click=${()=>this.handleAction(c,"delete")}>Delete</button>
            </span>
          </div>
        `):w`
          <div class="empty-state">No services deployed</div>
        `}
      </div>
    `}handleServiceClick(c){this.dispatchEvent(new CustomEvent("service-click",{detail:c,bubbles:!0,composed:!0}))}handleAction(c,d){this.dispatchEvent(new CustomEvent("service-action",{detail:{service:c,action:d},bubbles:!0,composed:!0}))}constructor(){super(...arguments),_U(this,o)}static{_U(i,a)}};return u=i})()});var TU,D8,RGt,Zwt=v(()=>{oe();TU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},D8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},RGt=(()=>{let t=[Q("sz-services-backups-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Array})],TU(this,null,n,{kind:"accessor",name:"schedules",static:!1,private:!1,access:{has:b=>"schedules"in b,get:b=>b.schedules,set:(b,y)=>{b.schedules=y}},metadata:f},s,o),TU(this,null,u,{kind:"accessor",name:"backups",static:!1,private:!1,access:{has:b=>"backups"in b,get:b=>b.backups,set:(b,y)=>{b.backups=y}},metadata:f},c,d),TU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-services-backups-view
        .schedules=${[{id:"1",scope:"All Services",retention:"D:7, W:4, M:12",schedule:"0 2 * * *",lastRun:"1/2/2026, 2:00:03 AM",nextRun:"1/3/2026, 2:00:00 AM",status:"active"}]}
        .backups=${[{id:"1",service:"test-nginx",createdAt:"1/2/2026, 2:00:03 AM",size:"22.0 MB",includes:["Image"]},{id:"2",service:"hello-world",createdAt:"1/2/2026, 2:00:02 AM",size:"21.5 MB",includes:["Image"]},{id:"3",service:"test-ch-final",createdAt:"1/2/2026, 2:00:00 AM",size:"22.0 MB",includes:["Image","clickhouse"]}]}
      ></sz-services-backups-view>
    </div>
  `;static demoGroups=["Services"];#e=D8(this,s,[]);get schedules(){return this.#e}set schedules(f){this.#e=f}#t=(D8(this,o),D8(this,c,[]));get backups(){return this.#t}set backups(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        margin-bottom: 24px;
        overflow: hidden;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .section-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .section-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .action-button.primary {
        background: ${p.bdTheme("#18181b","#fafafa")};
        color: ${p.bdTheme("#fafafa","#18181b")};
        border: none;
      }

      .action-button.primary:hover {
        opacity: 0.9;
      }

      .table-header {
        display: grid;
        gap: 16px;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .schedules-header {
        grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr 80px 120px;
      }

      .backups-header {
        grid-template-columns: 1.5fr 1.5fr 100px 1fr 120px;
      }

      .table-row {
        display: grid;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        align-items: center;
      }

      .schedules-row {
        grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr 80px 120px;
      }

      .backups-row {
        grid-template-columns: 1.5fr 1.5fr 100px 1fr 120px;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.active {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.failed {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .status-badge.disabled {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .meta-text {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .includes-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      .include-badge {
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
      }

      .row-actions {
        display: flex;
        gap: 4px;
      }

      .icon-button {
        padding: 6px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .icon-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .icon-button.danger:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }
    `];render(){return w`
      <div class="section">
        <div class="section-header">
          <div class="section-info">
            <div class="section-title">Backup Schedules</div>
            <div class="section-subtitle">Configure automated backup schedules for your services</div>
          </div>
          <div class="header-actions">
            <button class="action-button" @click=${()=>this.handleImport()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17 8 12 3 7 8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
              </svg>
              Import Backup
            </button>
            <button class="action-button primary" @click=${()=>this.handleCreateSchedule()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
              Create Schedule
            </button>
          </div>
        </div>
        <div class="table-header schedules-header">
          <span>Scope</span>
          <span>Retention</span>
          <span>Schedule</span>
          <span>Last Run</span>
          <span>Next Run</span>
          <span>Status</span>
          <span>Actions</span>
        </div>
        ${this.schedules.map(f=>w`
          <div class="table-row schedules-row">
            <span>${f.scope}</span>
            <span class="meta-text" title="Keep: ${f.retention}">${f.retention}</span>
            <span class="meta-text">${f.schedule}</span>
            <span class="meta-text">${f.lastRun||"-"}</span>
            <span class="meta-text">${f.nextRun||"-"}</span>
            <span>
              <span class="status-badge ${f.status}" title="${f.error||""}">
                ${f.status==="active"?"Active":f.status==="failed"?"Failed":"Disabled"}
              </span>
            </span>
            <span class="row-actions">
              <button class="icon-button" title="Run backup now" @click=${()=>this.handleRunNow(f)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
              </button>
              <button class="icon-button" title="${f.status==="disabled"?"Enable":"Disable"}" @click=${()=>this.handleToggle(f)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  ${f.status==="disabled"?w`<polyline points="20 6 9 17 4 12"></polyline>`:w`<rect x="6" y="6" width="12" height="12" rx="1"/>`}
                </svg>
              </button>
              <button class="icon-button danger" title="Delete" @click=${()=>this.handleDeleteSchedule(f)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
                </svg>
              </button>
            </span>
          </div>
        `)}
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-info">
            <div class="section-title">All Backups</div>
            <div class="section-subtitle">Browse and manage all backups across services</div>
          </div>
        </div>
        <div class="table-header backups-header">
          <span>Service</span>
          <span>Created</span>
          <span>Size</span>
          <span>Includes</span>
          <span>Actions</span>
        </div>
        ${this.backups.map(f=>w`
          <div class="table-row backups-row">
            <span>${f.service}</span>
            <span class="meta-text">${f.createdAt}</span>
            <span class="meta-text">${f.size}</span>
            <span class="includes-list">
              ${f.includes.map(b=>w`<span class="include-badge">${b}</span>`)}
            </span>
            <span class="row-actions">
              <button class="icon-button" title="Download backup" @click=${()=>this.handleDownload(f)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7 10 12 15 17 10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
              </button>
              <button class="icon-button danger" title="Delete" @click=${()=>this.handleDeleteBackup(f)}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
                </svg>
              </button>
            </span>
          </div>
        `)}
      </div>
    `}handleImport(){this.dispatchEvent(new CustomEvent("import",{bubbles:!0,composed:!0}))}handleCreateSchedule(){this.dispatchEvent(new CustomEvent("create-schedule",{bubbles:!0,composed:!0}))}handleRunNow(f){this.dispatchEvent(new CustomEvent("run-now",{detail:f,bubbles:!0,composed:!0}))}handleToggle(f){this.dispatchEvent(new CustomEvent("toggle-schedule",{detail:f,bubbles:!0,composed:!0}))}handleDeleteSchedule(f){this.dispatchEvent(new CustomEvent("delete-schedule",{detail:f,bubbles:!0,composed:!0}))}handleDownload(f){this.dispatchEvent(new CustomEvent("download",{detail:f,bubbles:!0,composed:!0}))}handleDeleteBackup(f){this.dispatchEvent(new CustomEvent("delete-backup",{detail:f,bubbles:!0,composed:!0}))}constructor(){super(...arguments),D8(this,d)}static{D8(i,a)}};return l=i})()});var rn,$2,FGt,Xwt=v(()=>{oe();c3();rn=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},$2=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},FGt=(()=>{let t=[Q("sz-service-detail-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[];var E=class extends r{static{i=this}static{let T=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Object})],l=[D({type:Array})],y=[D({type:Array})],x=[D({type:Boolean})],N=[D({type:Object})],I=[D({type:String})],V=[J()],rn(this,null,n,{kind:"accessor",name:"service",static:!1,private:!1,access:{has:$=>"service"in $,get:$=>$.service,set:($,H)=>{$.service=H}},metadata:T},s,o),rn(this,null,u,{kind:"accessor",name:"stats",static:!1,private:!1,access:{has:$=>"stats"in $,get:$=>$.stats,set:($,H)=>{$.stats=H}},metadata:T},c,d),rn(this,null,l,{kind:"accessor",name:"backups",static:!1,private:!1,access:{has:$=>"backups"in $,get:$=>$.backups,set:($,H)=>{$.backups=H}},metadata:T},f,b),rn(this,null,y,{kind:"accessor",name:"logs",static:!1,private:!1,access:{has:$=>"logs"in $,get:$=>$.logs,set:($,H)=>{$.logs=H}},metadata:T},g,h),rn(this,null,x,{kind:"accessor",name:"streaming",static:!1,private:!1,access:{has:$=>"streaming"in $,get:$=>$.streaming,set:($,H)=>{$.streaming=H}},metadata:T},M,S),rn(this,null,N,{kind:"accessor",name:"workspaceEnvironment",static:!1,private:!1,access:{has:$=>"workspaceEnvironment"in $,get:$=>$.workspaceEnvironment,set:($,H)=>{$.workspaceEnvironment=H}},metadata:T},_,k),rn(this,null,I,{kind:"accessor",name:"workspacePath",static:!1,private:!1,access:{has:$=>"workspacePath"in $,get:$=>$.workspacePath,set:($,H)=>{$.workspacePath=H}},metadata:T},L,A),rn(this,null,V,{kind:"accessor",name:"currentView",static:!1,private:!1,access:{has:$=>"currentView"in $,get:$=>$.currentView,set:($,H)=>{$.currentView=H}},metadata:T},C,z),rn(null,e={value:i},t,{kind:"class",name:i.name,metadata:T},null,a),E=i=e.value,T&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:T})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-service-detail-view
        .service=${{name:"test-nginx",status:"running",image:"nginx:alpine",port:80,domain:"app.bleu.de",containerId:"pchbbr9fjr4g",created:"11/18/2025, 2:06:55 PM",updated:"11/26/2025, 4:05:46 PM",registry:"Docker Hub",repository:"nginx",tag:"alpine"}}
        .stats=${{cpu:.5,memory:"32.1 MB",memoryLimit:"61.3 GB",networkIn:"6.4 KB",networkOut:"252 B"}}
        .backups=${[{id:"1",createdAt:"1/2/2026, 2:00:03 AM",size:"21.96 MB",type:"Docker Image"},{id:"2",createdAt:"11/27/2025, 1:42:26 PM",size:"51.76 MB",type:"Docker Image"}]}
        .logs=${[{timestamp:"2024-01-02 10:15:32",message:'192.168.1.100 - - [02/Jan/2024:10:15:32 +0000] "GET / HTTP/1.1" 200 612'},{timestamp:"2024-01-02 10:15:30",message:'192.168.1.100 - - [02/Jan/2024:10:15:30 +0000] "GET /favicon.ico HTTP/1.1" 404 153'}]}
      ></sz-service-detail-view>
    </div>
  `;static demoGroups=["Services"];#e=$2(this,s,{name:"",status:"stopped",image:"",port:0,domain:null,containerId:"",created:"",updated:"",registry:"",repository:"",tag:""});get service(){return this.#e}set service(T){this.#e=T}#t=($2(this,o),$2(this,c,{cpu:0,memory:"0 MB",memoryLimit:"0 GB",networkIn:"0 B",networkOut:"0 B"}));get stats(){return this.#t}set stats(T){this.#t=T}#a=($2(this,d),$2(this,f,[]));get backups(){return this.#a}set backups(T){this.#a=T}#i=($2(this,b),$2(this,g,[]));get logs(){return this.#i}set logs(T){this.#i=T}#r=($2(this,h),$2(this,M,!1));get streaming(){return this.#r}set streaming(T){this.#r=T}#s=($2(this,S),$2(this,_,null));get workspaceEnvironment(){return this.#s}set workspaceEnvironment(T){this.#s=T}#n=($2(this,k),$2(this,L,"/"));get workspacePath(){return this.#n}set workspacePath(T){this.#n=T}#o=($2(this,A),$2(this,C,"details"));get currentView(){return this.#o}set currentView(T){this.#o=T}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
      }

      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: color 200ms ease;
      }

      .back-link:hover {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .service-header {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .service-name {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.stopped {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      @media (min-width: 1024px) {
        .content {
          grid-template-columns: 2fr 1fr;
        }
      }

      .main-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .card {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .card-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .card-content {
        padding: 16px;
      }

      .detail-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .detail-label {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .detail-value {
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        text-align: right;
      }

      .detail-value a {
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        text-decoration: none;
      }

      .detail-value a:hover {
        text-decoration: underline;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .stat-item {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 6px;
        padding: 12px;
      }

      .stat-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 18px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .stat-subvalue {
        font-size: 12px;
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .actions-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .action-button {
        width: 100%;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        background: ${p.bdTheme("#ffffff","#09090b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .action-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .action-button.danger {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .action-button.danger:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .backup-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .backup-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 6px;
      }

      .backup-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .backup-date {
        font-size: 13px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .backup-meta {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .backup-actions {
        display: flex;
        gap: 4px;
      }

      .icon-button {
        padding: 6px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .icon-button:hover {
        background: ${p.bdTheme("#ffffff","#09090b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .logs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logs-actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .stream-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: ${p.bdTheme("#2563eb","#3b82f6")};
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
        color: white;
        cursor: pointer;
      }

      .stream-button.streaming {
        background: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .clear-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
      }

      .logs-container {
        padding: 16px;
        font-family: monospace;
        font-size: 12px;
        max-height: 300px;
        overflow-y: auto;
        background: ${p.bdTheme("#fafafa","#0a0a0a")};
      }

      .log-entry {
        padding: 2px 0;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        white-space: pre-wrap;
        word-break: break-all;
      }

      .empty-logs {
        padding: 24px;
        text-align: center;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .tag-badge {
        display: inline-flex;
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
      }

      :host(.workspace-mode) {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .workspace-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .workspace-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        background: ${p.bdTheme("#ffffff","#09090b")};
        flex-shrink: 0;
      }

      .workspace-back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        cursor: pointer;
        transition: color 200ms ease;
      }

      .workspace-back-link:hover {
        color: ${p.bdTheme("#1d4ed8","#93c5fd")};
      }

      .workspace-service-name {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .workspace-status-badge {
        display: inline-flex;
        align-items: center;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .workspace-status-badge.running {
        background: ${p.bdTheme("#22c55e","#22c55e")};
      }

      .workspace-status-badge.stopped {
        background: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .workspace-container {
        position: relative;
        flex: 1;
        min-height: 0;
      }
    `];render(){return this.currentView==="workspace"?this.renderWorkspaceView():this.renderDetailsView()}renderWorkspaceView(){return w`
      <div class="workspace-wrapper">
        <div class="workspace-header">
          <div class="workspace-back-link" @click=${()=>this.handleCloseWorkspace()}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
            Back to Details
          </div>
          <span class="workspace-service-name">${this.service.name}</span>
          <span class="workspace-status-badge ${this.service.status}"></span>
        </div>
        <div class="workspace-container">
          <dees-workspace .executionEnvironment=${this.workspaceEnvironment}></dees-workspace>
        </div>
      </div>
    `}renderDetailsView(){return w`
      <div class="header">
        <div class="back-link" @click=${()=>this.handleBack()}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
          Back to Services
        </div>
      </div>

      <div class="service-header" style="margin-bottom: 24px;">
        <h1 class="service-name">${this.service.name}</h1>
        <span class="status-badge ${this.service.status}">${this.service.status}</span>
      </div>

      <div class="content">
        <div class="main-content">
          <div class="card">
            <div class="card-header">
              <div>
                <div class="card-title">Service Details</div>
              </div>
              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${()=>this.handleEdit()}>Edit</button>
            </div>
            <div class="card-content">
              <div class="detail-list">
                <div class="detail-item">
                  <span class="detail-label">Image</span>
                  <span class="detail-value">${this.service.image}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Port</span>
                  <span class="detail-value">${this.service.port}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Domain</span>
                  <span class="detail-value">
                    ${this.service.domain?w`<a href="https://${this.service.domain}" target="_blank">${this.service.domain}</a>`:"-"}
                  </span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Container ID</span>
                  <span class="detail-value">${this.service.containerId}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Created</span>
                  <span class="detail-value">${this.service.created}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Updated</span>
                  <span class="detail-value">${this.service.updated}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <div class="logs-header" style="width: 100%;">
                <div>
                  <div class="card-title">Logs</div>
                  <div class="card-subtitle">Container logs</div>
                </div>
                <div class="logs-actions">
                  <button class="stream-button ${this.streaming?"streaming":""}" @click=${()=>this.toggleStreaming()}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                      ${this.streaming?w`<rect x="6" y="6" width="12" height="12" rx="1"/>`:w`<polygon points="5,3 19,12 5,21"/>`}
                    </svg>
                    ${this.streaming?"Stop":"Stream"}
                  </button>
                  <button class="clear-button" @click=${()=>this.handleClearLogs()}>Clear logs</button>
                </div>
              </div>
            </div>
            <div class="logs-container">
              ${this.logs.length>0?this.logs.map(T=>w`
                <div class="log-entry">${T.timestamp} ${T.message}</div>
              `):w`
                <div class="empty-logs">Click "Stream" to start live log streaming</div>
              `}
            </div>
          </div>
        </div>

        <div class="sidebar">
          <div class="card">
            <div class="card-header">
              <div class="card-title">Live stats</div>
            </div>
            <div class="card-content">
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-label">CPU</div>
                  <div class="stat-value">${this.stats.cpu.toFixed(1)}%</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">Memory</div>
                  <div class="stat-value">${this.stats.memory}</div>
                  <div class="stat-subvalue">of ${this.stats.memoryLimit}</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">Network In</div>
                  <div class="stat-value">${this.stats.networkIn}</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">Network Out</div>
                  <div class="stat-value">${this.stats.networkOut}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <div>
                <div class="card-title">Actions</div>
                <div class="card-subtitle">Manage service state</div>
              </div>
            </div>
            <div class="card-content">
              <div class="actions-grid">
                ${this.service.status==="running"?w`<button class="action-button" @click=${()=>this.handleAction("stop")}>Stop Service</button>`:w`<button class="action-button" @click=${()=>this.handleAction("start")}>Start Service</button>`}
                <button class="action-button" @click=${()=>this.handleAction("restart")}>Restart Service</button>
                <button class="action-button" @click=${()=>this.handleOpenWorkspace()}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; vertical-align: middle; margin-right: 4px;">
                    <polyline points="4 17 10 11 4 5"></polyline>
                    <line x1="12" y1="19" x2="20" y2="19"></line>
                  </svg>
                  Open Workspace
                </button>
                <button class="action-button danger" @click=${()=>this.handleAction("delete")}>Delete Service</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <div>
                <div class="card-title">Image Source</div>
                <div class="card-subtitle">${this.service.registry==="Docker Hub"?"External container registry":"Onebox registry"}</div>
              </div>
            </div>
            <div class="card-content">
              <div class="detail-list">
                <div class="detail-item">
                  <span class="detail-label">Registry</span>
                  <span class="detail-value">${this.service.registry}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Repository</span>
                  <span class="detail-value">${this.service.repository}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Tag</span>
                  <span class="detail-value"><span class="tag-badge">${this.service.tag}</span></span>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <div>
                <div class="card-title">Backups</div>
                <div class="card-subtitle">Create and manage service backups</div>
              </div>
              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${()=>this.handleCreateBackup()}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                Create Backup
              </button>
            </div>
            <div class="card-content">
              <div class="backup-list">
                ${this.backups.map(T=>w`
                  <div class="backup-item">
                    <div class="backup-info">
                      <div class="backup-date">${T.createdAt}</div>
                      <div class="backup-meta">${T.size} · ${T.type}</div>
                    </div>
                    <div class="backup-actions">
                      <button class="icon-button" title="Download" @click=${()=>this.handleDownloadBackup(T)}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                          <polyline points="7 10 12 15 17 10"/>
                          <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                      </button>
                      <button class="icon-button" title="Restore" @click=${()=>this.handleRestoreBackup(T)}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <polyline points="1 4 1 10 7 10"/>
                          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                        </svg>
                      </button>
                      <button class="icon-button" title="Delete" @click=${()=>this.handleDeleteBackup(T)}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <polyline points="3,6 5,6 21,6"/>
                          <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
                        </svg>
                      </button>
                    </div>
                  </div>
                `)}
              </div>
            </div>
          </div>
        </div>
      </div>
    `}handleBack(){this.dispatchEvent(new CustomEvent("back",{bubbles:!0,composed:!0}))}handleEdit(){this.dispatchEvent(new CustomEvent("edit",{detail:this.service,bubbles:!0,composed:!0}))}handleAction(T){this.dispatchEvent(new CustomEvent("service-action",{detail:{service:this.service,action:T},bubbles:!0,composed:!0}))}toggleStreaming(){this.streaming=!this.streaming,this.dispatchEvent(new CustomEvent("stream-toggle",{detail:{streaming:this.streaming},bubbles:!0,composed:!0}))}handleClearLogs(){this.dispatchEvent(new CustomEvent("clear-logs",{bubbles:!0,composed:!0}))}handleCreateBackup(){this.dispatchEvent(new CustomEvent("create-backup",{bubbles:!0,composed:!0}))}handleDownloadBackup(T){this.dispatchEvent(new CustomEvent("download-backup",{detail:T,bubbles:!0,composed:!0}))}handleRestoreBackup(T){this.dispatchEvent(new CustomEvent("restore-backup",{detail:T,bubbles:!0,composed:!0}))}handleDeleteBackup(T){this.dispatchEvent(new CustomEvent("delete-backup",{detail:T,bubbles:!0,composed:!0}))}handleOpenWorkspace(){this.workspaceEnvironment?(this.currentView="workspace",this.classList.add("workspace-mode")):this.dispatchEvent(new CustomEvent("request-workspace",{detail:{service:this.service},bubbles:!0,composed:!0}))}handleCloseWorkspace(){this.currentView="details",this.classList.remove("workspace-mode")}updated(T){super.updated(T),T.has("workspaceEnvironment")&&this.workspaceEnvironment&&this.currentView==="details"&&(this.currentView="workspace",this.classList.add("workspace-mode"))}constructor(){super(...arguments),$2(this,z)}static{$2(i,a)}};return E=i})()});var LU,A8,OGt,Kwt=v(()=>{oe();LU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},A8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},OGt=(()=>{let t=[Q("sz-tokens-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Array})],LU(this,null,n,{kind:"accessor",name:"globalTokens",static:!1,private:!1,access:{has:b=>"globalTokens"in b,get:b=>b.globalTokens,set:(b,y)=>{b.globalTokens=y}},metadata:f},s,o),LU(this,null,u,{kind:"accessor",name:"ciTokens",static:!1,private:!1,access:{has:b=>"ciTokens"in b,get:b=>b.ciTokens,set:(b,y)=>{b.ciTokens=y}},metadata:f},c,d),LU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1000px;">
      <sz-tokens-view
        .globalTokens=${[{id:"1",name:"CI/CD Pipeline",type:"global",createdAt:"2024-01-15",lastUsed:"2024-01-20"},{id:"2",name:"Development",type:"global",createdAt:"2024-01-10"}]}
        .ciTokens=${[{id:"3",name:"hello-world-ci",type:"ci",service:"hello-world",createdAt:"2024-01-18"},{id:"4",name:"api-service-ci",type:"ci",service:"api-service",createdAt:"2024-01-12",lastUsed:"2024-01-19"}]}
      ></sz-tokens-view>
    </div>
  `;static demoGroups=["Auth & Settings"];#e=A8(this,s,[]);get globalTokens(){return this.#e}set globalTokens(f){this.#e=f}#t=(A8(this,o),A8(this,c,[]));get ciTokens(){return this.#t}set ciTokens(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        margin-bottom: 24px;
        overflow: hidden;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .section-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .section-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .create-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#fafafa","#18181b")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .create-button:hover {
        opacity: 0.9;
      }

      .token-list {
        padding: 16px;
      }

      .token-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 6px;
        margin-bottom: 8px;
      }

      .token-item:last-child {
        margin-bottom: 0;
      }

      .token-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .token-name {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .token-meta {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .token-service {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        margin-right: 8px;
      }

      .token-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover {
        background: ${p.bdTheme("#ffffff","#09090b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .action-button.delete {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .action-button.delete:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .empty-state {
        padding: 32px 16px;
        text-align: center;
      }

      .empty-text {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 16px;
      }

      .empty-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .empty-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }
    `];render(){return w`
      <div class="section">
        <div class="section-header">
          <div class="section-info">
            <div class="section-title">Global Tokens</div>
            <div class="section-subtitle">Tokens that can push images to multiple services</div>
          </div>
          <button class="create-button" @click=${()=>this.handleCreate("global")}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Create Token
          </button>
        </div>
        ${this.globalTokens.length>0?w`
          <div class="token-list">
            ${this.globalTokens.map(f=>this.renderToken(f))}
          </div>
        `:w`
          <div class="empty-state">
            <div class="empty-text">No global tokens created</div>
            <button class="empty-button" @click=${()=>this.handleCreate("global")}>Create Global Token</button>
          </div>
        `}
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-info">
            <div class="section-title">CI Tokens (Service-specific)</div>
            <div class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</div>
          </div>
          <button class="create-button" @click=${()=>this.handleCreate("ci")}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Create Token
          </button>
        </div>
        ${this.ciTokens.length>0?w`
          <div class="token-list">
            ${this.ciTokens.map(f=>this.renderToken(f))}
          </div>
        `:w`
          <div class="empty-state">
            <div class="empty-text">No CI tokens created</div>
            <button class="empty-button" @click=${()=>this.handleCreate("ci")}>Create CI Token</button>
          </div>
        `}
      </div>
    `}renderToken(f){return w`
      <div class="token-item">
        <div class="token-info">
          <div class="token-name">${f.name}</div>
          <div class="token-meta">
            ${f.service?w`<span class="token-service">${f.service}</span>`:""}
            Created ${f.createdAt}
            ${f.lastUsed?w` · Last used ${f.lastUsed}`:""}
          </div>
        </div>
        <div class="token-actions">
          <button class="action-button" @click=${()=>this.handleCopy(f)}>Copy</button>
          <button class="action-button" @click=${()=>this.handleRegenerate(f)}>Regenerate</button>
          <button class="action-button delete" @click=${()=>this.handleDelete(f)}>Delete</button>
        </div>
      </div>
    `}handleCreate(f){this.dispatchEvent(new CustomEvent("create",{detail:{type:f},bubbles:!0,composed:!0}))}handleCopy(f){this.dispatchEvent(new CustomEvent("copy",{detail:f,bubbles:!0,composed:!0}))}handleRegenerate(f){this.dispatchEvent(new CustomEvent("regenerate",{detail:f,bubbles:!0,composed:!0}))}handleDelete(f){this.dispatchEvent(new CustomEvent("delete",{detail:f,bubbles:!0,composed:!0}))}constructor(){super(...arguments),A8(this,d)}static{A8(i,a)}};return l=i})()});var $U,E8,BGt,Qwt=v(()=>{oe();$U=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},E8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},BGt=(()=>{let t=[Q("sz-settings-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:String})],$U(this,null,n,{kind:"accessor",name:"settings",static:!1,private:!1,access:{has:b=>"settings"in b,get:b=>b.settings,set:(b,y)=>{b.settings=y}},metadata:f},s,o),$U(this,null,u,{kind:"accessor",name:"currentUser",static:!1,private:!1,access:{has:b=>"currentUser"in b,get:b=>b.currentUser,set:(b,y)=>{b.currentUser=y}},metadata:f},c,d),$U(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}static demo=()=>w`
    <div style="padding: 24px; max-width: 800px;">
      <sz-settings-view
        .settings=${{darkMode:!0,cloudflareToken:"",cloudflareZoneId:"",autoRenewCerts:!0,renewalThreshold:30,acmeEmail:"certs@example.com",httpPort:80,httpsPort:443,forceHttps:!0}}
        currentUser="admin"
      ></sz-settings-view>
    </div>
  `;static demoGroups=["Auth & Settings"];#e=E8(this,s,{darkMode:!1,cloudflareToken:"",cloudflareZoneId:"",autoRenewCerts:!0,renewalThreshold:30,acmeEmail:"",httpPort:80,httpsPort:443,forceHttps:!0});get settings(){return this.#e}set settings(f){this.#e=f}#t=(E8(this,o),E8(this,c,""));get currentUser(){return this.#t}set currentUser(f){this.#t=f}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
      }

      .section-header {
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .section-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .form-group {
        margin-bottom: 16px;
      }

      .form-group:last-child {
        margin-bottom: 0;
      }

      .form-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .form-row:last-child {
        border-bottom: none;
      }

      .form-label-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .form-label {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .form-hint {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .input-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      input[type="text"],
      input[type="password"],
      input[type="email"],
      input[type="number"] {
        width: 100%;
        padding: 8px 12px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        outline: none;
        transition: border-color 200ms ease;
        box-sizing: border-box;
      }

      input:focus {
        border-color: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      input::placeholder {
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 9999px;
        cursor: pointer;
        transition: background 200ms ease;
      }

      .toggle-switch.active {
        background: ${p.bdTheme("#2563eb","#3b82f6")};
      }

      .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 200ms ease;
      }

      .toggle-switch.active::after {
        transform: translateX(20px);
      }

      .password-section {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .password-title {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 12px;
      }

      .password-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .field-label {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-bottom: 4px;
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        margin-top: 24px;
      }

      .button {
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .button.secondary {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .button.secondary:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .button.primary {
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        color: ${p.bdTheme("#fafafa","#18181b")};
      }

      .button.primary:hover {
        opacity: 0.9;
      }
    `];render(){return w`
      <div class="section">
        <div class="section-header">
          <div class="section-title">Appearance</div>
          <div class="section-subtitle">Customize the look and feel</div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Dark Mode</span>
            <span class="form-hint">Toggle dark mode on or off</span>
          </div>
          <div class="toggle-switch ${this.settings.darkMode?"active":""}" @click=${()=>this.toggleDarkMode()}></div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Cloudflare Integration</div>
          <div class="section-subtitle">Configure Cloudflare API for DNS management</div>
        </div>
        <div class="input-group">
          <div class="form-group">
            <div class="field-label">API Token</div>
            <input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${f=>this.updateSetting("cloudflareToken",f.target.value)}>
          </div>
          <div class="form-group">
            <div class="field-label">Zone ID (Optional)</div>
            <input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${f=>this.updateSetting("cloudflareZoneId",f.target.value)}>
          </div>
          <div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">SSL/TLS Settings</div>
          <div class="section-subtitle">Configure certificate management</div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Auto-Renew Certificates</span>
            <span class="form-hint">Automatically renew certificates before expiry</span>
          </div>
          <div class="toggle-switch ${this.settings.autoRenewCerts?"active":""}" @click=${()=>this.toggleSetting("autoRenewCerts")}></div>
        </div>
        <div class="form-group" style="margin-top: 16px;">
          <div class="field-label">Renewal Threshold (days)</div>
          <input type="number" .value=${String(this.settings.renewalThreshold)} @input=${f=>this.updateSetting("renewalThreshold",parseInt(f.target.value))}>
          <div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
        </div>
        <div class="form-group">
          <div class="field-label">ACME Email</div>
          <input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${f=>this.updateSetting("acmeEmail",f.target.value)}>
          <div class="form-hint">Email address for Let's Encrypt notifications.</div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Network Settings</div>
          <div class="section-subtitle">Configure network and proxy settings</div>
        </div>
        <div class="input-row">
          <div class="form-group">
            <div class="field-label">HTTP Port</div>
            <input type="number" .value=${String(this.settings.httpPort)} @input=${f=>this.updateSetting("httpPort",parseInt(f.target.value))}>
          </div>
          <div class="form-group">
            <div class="field-label">HTTPS Port</div>
            <input type="number" .value=${String(this.settings.httpsPort)} @input=${f=>this.updateSetting("httpsPort",parseInt(f.target.value))}>
          </div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Force HTTPS</span>
            <span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
          </div>
          <div class="toggle-switch ${this.settings.forceHttps?"active":""}" @click=${()=>this.toggleSetting("forceHttps")}></div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Account</div>
          <div class="section-subtitle">Manage your account settings</div>
        </div>
        <div class="form-group">
          <div class="field-label">Current User</div>
          <div style="font-size: 14px; color: ${p.bdTheme("#18181b","#fafafa")};">${this.currentUser||"Unknown"}</div>
        </div>
        <div class="password-section">
          <div class="password-title">Change Password</div>
          <div class="password-fields">
            <div>
              <div class="field-label">Current Password</div>
              <input type="password" id="currentPassword">
            </div>
            <div>
              <div class="field-label">New Password</div>
              <input type="password" id="newPassword">
            </div>
            <div>
              <div class="field-label">Confirm Password</div>
              <input type="password" id="confirmPassword">
            </div>
            <button class="button secondary" style="width: fit-content;" @click=${()=>this.handleChangePassword()}>Update Password</button>
          </div>
        </div>
      </div>

      <div class="actions">
        <button class="button secondary" @click=${()=>this.handleReset()}>Reset</button>
        <button class="button primary" @click=${()=>this.handleSave()}>Save Settings</button>
      </div>
    `}toggleDarkMode(){this.settings={...this.settings,darkMode:!this.settings.darkMode},this.dispatchEvent(new CustomEvent("setting-change",{detail:{key:"darkMode",value:this.settings.darkMode},bubbles:!0,composed:!0}))}toggleSetting(f){this.settings[f]=!this.settings[f],this.settings={...this.settings}}updateSetting(f,b){this.settings[f]=b,this.settings={...this.settings}}handleChangePassword(){let f=this.shadowRoot?.getElementById("currentPassword")?.value,b=this.shadowRoot?.getElementById("newPassword")?.value,y=this.shadowRoot?.getElementById("confirmPassword")?.value;this.dispatchEvent(new CustomEvent("change-password",{detail:{currentPassword:f,newPassword:b,confirmPassword:y},bubbles:!0,composed:!0}))}handleReset(){this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}handleSave(){this.dispatchEvent(new CustomEvent("save",{detail:this.settings,bubbles:!0,composed:!0}))}constructor(){super(...arguments),E8(this,d)}static{E8(i,a)}};return l=i})()});var P8,sn,HGt,Jwt=v(()=>{oe();P8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},sn=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},HGt=(()=>{let t=[Q("sz-login-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Boolean})],u=[D({type:String})],l=[D({type:String})],y=[D({type:String})],P8(this,null,n,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:S=>"loading"in S,get:S=>S.loading,set:(S,N)=>{S.loading=N}},metadata:M},s,o),P8(this,null,u,{kind:"accessor",name:"error",static:!1,private:!1,access:{has:S=>"error"in S,get:S=>S.error,set:(S,N)=>{S.error=N}},metadata:M},c,d),P8(this,null,l,{kind:"accessor",name:"title",static:!1,private:!1,access:{has:S=>"title"in S,get:S=>S.title,set:(S,N)=>{S.title=N}},metadata:M},f,b),P8(this,null,y,{kind:"accessor",name:"subtitle",static:!1,private:!1,access:{has:S=>"subtitle"in S,get:S=>S.subtitle,set:(S,N)=>{S.subtitle=N}},metadata:M},g,h),P8(null,e={value:i},t,{kind:"class",name:i.name,metadata:M},null,a),x=i=e.value,M&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:M})}static demo=()=>w`
    <div style="height: 600px; display: flex; align-items: center; justify-content: center; background: #09090b;">
      <sz-login-view></sz-login-view>
    </div>
  `;static demoGroups=["Auth & Settings"];#e=sn(this,s,!1);get loading(){return this.#e}set loading(M){this.#e=M}#t=(sn(this,o),sn(this,c,""));get error(){return this.#t}set error(M){this.#t=M}#a=(sn(this,d),sn(this,f,"serve.zone"));get title(){return this.#a}set title(M){this.#a=M}#i=(sn(this,b),sn(this,g,"Sign in to your onebox"));get subtitle(){return this.#i}set subtitle(M){this.#i=M}static styles=[p.defaultStyles,X`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        background: ${p.bdTheme("#f4f4f5","#09090b")};
      }

      .login-container {
        width: 100%;
        max-width: 400px;
        padding: 24px;
      }

      .login-card {
        background: ${p.bdTheme("#ffffff","#18181b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      .logo-section {
        text-align: center;
        margin-bottom: 32px;
      }

      .logo {
        width: 64px;
        height: 64px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
      }

      .logo svg {
        width: 36px;
        height: 36px;
        color: ${p.bdTheme("#fafafa","#18181b")};
      }

      .title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 4px;
      }

      .subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .form {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .form-label {
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .form-input {
        width: 100%;
        padding: 12px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        outline: none;
        transition: border-color 200ms ease, box-shadow 200ms ease;
        box-sizing: border-box;
      }

      .form-input:focus {
        border-color: ${p.bdTheme("#3b82f6","#60a5fa")};
        box-shadow: 0 0 0 3px ${p.bdTheme("rgba(59, 130, 246, 0.1)","rgba(96, 165, 250, 0.1)")};
      }

      .form-input::placeholder {
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .form-input.error {
        border-color: ${p.bdTheme("#ef4444","#f87171")};
      }

      .error-message {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        background: ${p.bdTheme("#fef2f2","rgba(239, 68, 68, 0.1)")};
        border: 1px solid ${p.bdTheme("#fecaca","rgba(239, 68, 68, 0.2)")};
        border-radius: 8px;
        font-size: 14px;
        color: ${p.bdTheme("#dc2626","#f87171")};
      }

      .error-message svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      .submit-button {
        width: 100%;
        padding: 12px 20px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#fafafa","#18181b")};
        cursor: pointer;
        transition: opacity 200ms ease, transform 200ms ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .submit-button:hover:not(:disabled) {
        opacity: 0.9;
      }

      .submit-button:active:not(:disabled) {
        transform: scale(0.98);
      }

      .submit-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .spinner {
        width: 18px;
        height: 18px;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .footer {
        margin-top: 24px;
        text-align: center;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .footer a {
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        text-decoration: none;
      }

      .footer a:hover {
        text-decoration: underline;
      }
    `];render(){return w`
      <div class="login-container">
        <div class="login-card">
          <div class="logo-section">
            <div class="logo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                <line x1="12" y1="22.08" x2="12" y2="12"></line>
              </svg>
            </div>
            <div class="title">${this.title}</div>
            <div class="subtitle">${this.subtitle}</div>
          </div>

          <form class="form" @submit=${this.handleSubmit}>
            ${this.error?w`
              <div class="error-message">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
                ${this.error}
              </div>
            `:""}

            <div class="form-group">
              <label class="form-label" for="username">Username</label>
              <input
                type="text"
                id="username"
                class="form-input ${this.error?"error":""}"
                placeholder="Enter your username"
                autocomplete="username"
                ?disabled=${this.loading}
                required
              >
            </div>

            <div class="form-group">
              <label class="form-label" for="password">Password</label>
              <input
                type="password"
                id="password"
                class="form-input ${this.error?"error":""}"
                placeholder="Enter your password"
                autocomplete="current-password"
                ?disabled=${this.loading}
                required
              >
            </div>

            <button type="submit" class="submit-button" ?disabled=${this.loading}>
              ${this.loading?w`
                <div class="spinner"></div>
                Signing in...
              `:"Sign in"}
            </button>
          </form>

          <div class="footer">
            Powered by <a href="https://serve.zone" target="_blank">serve.zone</a>
          </div>
        </div>
      </div>
    `}handleSubmit(M){M.preventDefault();let S=this.shadowRoot?.getElementById("username"),N=this.shadowRoot?.getElementById("password");if(!S||!N)return;let _=S.value.trim(),k=N.value;if(!_||!k){this.error="Please enter both username and password";return}this.error="",this.dispatchEvent(new CustomEvent("login",{detail:{username:_,password:k},bubbles:!0,composed:!0}))}clearForm(){let M=this.shadowRoot?.getElementById("username"),S=this.shadowRoot?.getElementById("password");M&&(M.value=""),S&&(S.value=""),this.error=""}focusUsername(){let M=this.shadowRoot?.getElementById("username");M&&M.focus()}constructor(){super(...arguments),sn(this,h)}static{sn(i,a)}};return x=i})()});var Na,f1,qGt,eMt=v(()=>{oe();Na=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},f1=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},qGt=(()=>{let t=[Q("sz-service-create-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[],x,M=[],S=[],N,_=[],k=[],I,L=[],A=[],V,C=[],z=[],E,T=[],$=[],H,O=[],G=[],ne,U=[],be=[],we,j=[],fe=[],Ce,Y=[],P=[];var F=class extends r{static{i=this}static{let W=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Array})],u=[D({type:Boolean})],l=[J()],y=[J()],x=[J()],N=[J()],I=[J()],V=[J()],E=[J()],H=[J()],ne=[J()],we=[J()],Ce=[J()],Na(this,null,n,{kind:"accessor",name:"registries",static:!1,private:!1,access:{has:B=>"registries"in B,get:B=>B.registries,set:(B,K)=>{B.registries=K}},metadata:W},s,o),Na(this,null,u,{kind:"accessor",name:"loading",static:!1,private:!1,access:{has:B=>"loading"in B,get:B=>B.loading,set:(B,K)=>{B.loading=K}},metadata:W},c,d),Na(this,null,l,{kind:"accessor",name:"serviceName",static:!1,private:!1,access:{has:B=>"serviceName"in B,get:B=>B.serviceName,set:(B,K)=>{B.serviceName=K}},metadata:W},f,b),Na(this,null,y,{kind:"accessor",name:"imageUrl",static:!1,private:!1,access:{has:B=>"imageUrl"in B,get:B=>B.imageUrl,set:(B,K)=>{B.imageUrl=K}},metadata:W},g,h),Na(this,null,x,{kind:"accessor",name:"selectedRegistry",static:!1,private:!1,access:{has:B=>"selectedRegistry"in B,get:B=>B.selectedRegistry,set:(B,K)=>{B.selectedRegistry=K}},metadata:W},M,S),Na(this,null,N,{kind:"accessor",name:"ports",static:!1,private:!1,access:{has:B=>"ports"in B,get:B=>B.ports,set:(B,K)=>{B.ports=K}},metadata:W},_,k),Na(this,null,I,{kind:"accessor",name:"envVars",static:!1,private:!1,access:{has:B=>"envVars"in B,get:B=>B.envVars,set:(B,K)=>{B.envVars=K}},metadata:W},L,A),Na(this,null,V,{kind:"accessor",name:"volumes",static:!1,private:!1,access:{has:B=>"volumes"in B,get:B=>B.volumes,set:(B,K)=>{B.volumes=K}},metadata:W},C,z),Na(this,null,E,{kind:"accessor",name:"cpuLimit",static:!1,private:!1,access:{has:B=>"cpuLimit"in B,get:B=>B.cpuLimit,set:(B,K)=>{B.cpuLimit=K}},metadata:W},T,$),Na(this,null,H,{kind:"accessor",name:"memoryLimit",static:!1,private:!1,access:{has:B=>"memoryLimit"in B,get:B=>B.memoryLimit,set:(B,K)=>{B.memoryLimit=K}},metadata:W},O,G),Na(this,null,ne,{kind:"accessor",name:"restartPolicy",static:!1,private:!1,access:{has:B=>"restartPolicy"in B,get:B=>B.restartPolicy,set:(B,K)=>{B.restartPolicy=K}},metadata:W},U,be),Na(this,null,we,{kind:"accessor",name:"networkMode",static:!
    <div style="padding: 24px; max-width: 800px;">
      <sz-service-create-view
        .registries=${[{id:"1",name:"Onebox Registry",url:"registry.onebox.local"},{id:"2",name:"Docker Hub",url:"docker.io"}]}
      ></sz-service-create-view>
    </div>
  `;static demoGroups=["Services"];#e=f1(this,s,[]);get registries(){return this.#e}set registries(W){this.#e=W}#t=(f1(this,o),f1(this,c,!1));get loading(){return this.#t}set loading(W){this.#t=W}#a=(f1(this,d),f1(this,f,""));get serviceName(){return this.#a}set serviceName(W){this.#a=W}#i=(f1(this,b),f1(this,g,""));get imageUrl(){return this.#i}set imageUrl(W){this.#i=W}#r=(f1(this,h),f1(this,M,""));get selectedRegistry(){return this.#r}set selectedRegistry(W){this.#r=W}#s=(f1(this,S),f1(this,_,[{hostPort:"",containerPort:"",protocol:"tcp"}]));get ports(){return this.#s}set ports(W){this.#s=W}#n=(f1(this,k),f1(this,L,[{key:"",value:""}]));get envVars(){return this.#n}set envVars(W){this.#n=W}#o=(f1(this,A),f1(this,C,[]));get volumes(){return this.#o}set volumes(W){this.#o=W}#l=(f1(this,z),f1(this,T,""));get cpuLimit(){return this.#l}set cpuLimit(W){this.#l=W}#c=(f1(this,$),f1(this,O,""));get memoryLimit(){return this.#c}set memoryLimit(W){this.#c=W}#d=(f1(this,G),f1(this,U,"always"));get restartPolicy(){return this.#d}set restartPolicy(W){this.#d=W}#p=(f1(this,be),f1(this,j,"bridge"));get networkMode(){return this.#p}set networkMode(W){this.#p=W}#u=(f1(this,fe),f1(this,Y,!1));get showAdvanced(){return this.#u}set showAdvanced(W){this.#u=W}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }

      .header-title {
        font-size: 20px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .header-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 4px;
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 15px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title svg {
        width: 18px;
        height: 18px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      .form-row.single {
        grid-template-columns: 1fr;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .form-label {
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .form-label .required {
        color: ${p.bdTheme("#ef4444","#f87171")};
      }

      .form-hint {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .form-input,
      .form-select {
        width: 100%;
        padding: 10px 12px;
        background: ${p.bdTheme("#ffffff","#18181b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 14px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        outline: none;
        transition: border-color 200ms ease;
        box-sizing: border-box;
      }

      .form-input:focus,
      .form-select:focus {
        border-color: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      .form-input::placeholder {
        color: ${p.bdTheme("#a1a1aa","#52525b")};
      }

      .form-select {
        cursor: pointer;
      }

      .dynamic-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .dynamic-row {
        display: flex;
        gap: 8px;
        align-items: flex-start;
      }

      .dynamic-row .form-input {
        flex: 1;
      }

      .dynamic-row .form-select {
        width: 80px;
        flex-shrink: 0;
      }

      .remove-button {
        padding: 10px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
        flex-shrink: 0;
      }

      .remove-button:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        border-color: ${p.bdTheme("#fecaca","rgba(239, 68, 68, 0.3)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .add-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: transparent;
        border: 1px dashed ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
        margin-top: 8px;
      }

      .add-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-color: ${p.bdTheme("#a1a1aa","#52525b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .add-button svg {
        width: 14px;
        height: 14px;
      }

      .toggle-advanced {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#3b82f6","#60a5fa")};
        cursor: pointer;
        background: none;
        border: none;
      }

      .toggle-advanced svg {
        width: 16px;
        height: 16px;
        transition: transform 200ms ease;
      }

      .toggle-advanced.open svg {
        transform: rotate(180deg);
      }

      .checkbox-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .checkbox {
        width: 18px;
        height: 18px;
        accent-color: ${p.bdTheme("#3b82f6","#60a5fa")};
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        margin-top: 8px;
      }

      .button {
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .button.secondary {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .button.secondary:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .button.primary {
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        color: ${p.bdTheme("#fafafa","#18181b")};
      }

      .button.primary:hover:not(:disabled) {
        opacity: 0.9;
      }

      .button.primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    `];render(){return w`
      <div class="header">
        <div>
          <div class="header-title">Deploy New Service</div>
          <div class="header-subtitle">Configure and deploy a new Docker container</div>
        </div>
      </div>

      <!-- Basic Info Section -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="9" y1="9" x2="15" y2="9"></line>
            <line x1="9" y1="15" x2="15" y2="15"></line>
          </svg>
          Basic Information
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Service Name <span class="required">*</span></label>
            <input
              type="text"
              class="form-input"
              placeholder="my-service"
              .value=${this.serviceName}
              @input=${W=>this.serviceName=W.target.value}
            >
            <div class="form-hint">Unique name for the service (alphanumeric and hyphens)</div>
          </div>
          <div class="form-group">
            <label class="form-label">Registry</label>
            <select
              class="form-select"
              .value=${this.selectedRegistry}
              @change=${W=>this.selectedRegistry=W.target.value}
            >
              <option value="">Custom Image URL</option>
              ${this.registries.map(W=>w`
                <option value=${W.id}>${W.name}</option>
              `)}
            </select>
          </div>
        </div>
        <div class="form-row single">
          <div class="form-group">
            <label class="form-label">Image <span class="required">*</span></label>
            <input
              type="text"
              class="form-input"
              placeholder="nginx:latest or registry.example.com/image:tag"
              .value=${this.imageUrl}
              @input=${W=>this.imageUrl=W.target.value}
            >
            <div class="form-hint">Docker image to deploy (include tag)</div>
          </div>
        </div>
      </div>

      <!-- Port Configuration -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="2" y1="12" x2="22" y2="12"></line>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
          </svg>
          Port Configuration
        </div>
        <div class="dynamic-list">
          ${this.ports.map((W,B)=>w`
            <div class="dynamic-row">
              <input
                type="text"
                class="form-input"
                placeholder="Host Port"
                .value=${W.hostPort}
                @input=${K=>this.updatePort(B,"hostPort",K.target.value)}
              >
              <input
                type="text"
                class="form-input"
                placeholder="Container Port"
                .value=${W.containerPort}
                @input=${K=>this.updatePort(B,"containerPort",K.target.value)}
              >
              <select
                class="form-select"
                .value=${W.protocol}
                @change=${K=>this.updatePort(B,"protocol",K.target.value)}
              >
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
              </select>
              ${this.ports.length>1?w`
                <button class="remove-button" @click=${()=>this.removePort(B)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              `:""}
            </div>
          `)}
        </div>
        <button class="add-button" @click=${()=>this.addPort()}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          Add Port Mapping
        </button>
      </div>

      <!-- Environment Variables -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="4 17 10 11 4 5"></polyline>
            <line x1="12" y1="19" x2="20" y2="19"></line>
          </svg>
          Environment Variables
        </div>
        <div class="dynamic-list">
          ${this.envVars.map((W,B)=>w`
            <div class="dynamic-row">
              <input
                type="text"
                class="form-input"
                placeholder="KEY"
                .value=${W.key}
                @input=${K=>this.updateEnvVar(B,"key",K.target.value)}
              >
              <input
                type="text"
                class="form-input"
                placeholder="value"
                .value=${W.value}
                @input=${K=>this.updateEnvVar(B,"value",K.target.value)}
              >
              ${this.envVars.length>1?w`
                <button class="remove-button" @click=${()=>this.removeEnvVar(B)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              `:""}
            </div>
          `)}
        </div>
        <button class="add-button" @click=${()=>this.addEnvVar()}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          Add Environment Variable
        </button>
      </div>

      <!-- Advanced Options Toggle -->
      <button
        class="toggle-advanced ${this.showAdvanced?"open":""}"
        @click=${()=>this.showAdvanced=!this.showAdvanced}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
        Advanced Options
      </button>

      ${this.showAdvanced?w`
        <!-- Volumes -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
            </svg>
            Volume Mounts
          </div>
          <div class="dynamic-list">
            ${this.volumes.length===0?w`
              <div class="form-hint">No volumes configured</div>
            `:this.volumes.map((W,B)=>w`
              <div class="dynamic-row">
                <input
                  type="text"
                  class="form-input"
                  placeholder="/host/path"
                  .value=${W.hostPath}
                  @input=${K=>this.updateVolume(B,"hostPath",K.target.value)}
                >
                <input
                  type="text"
                  class="form-input"
                  placeholder="/container/path"
                  .value=${W.containerPath}
                  @input=${K=>this.updateVolume(B,"containerPath",K.target.value)}
                >
                <div class="checkbox-row">
                  <input
                    type="checkbox"
                    class="checkbox"
                    ?checked=${W.readOnly}
                    @change=${K=>this.updateVolume(B,"readOnly",K.target.checked)}
                  >
                  <span class="form-hint">RO</span>
                </div>
                <button class="remove-button" @click=${()=>this.removeVolume(B)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            `)}
          </div>
          <button class="add-button" @click=${()=>this.addVolume()}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Volume Mount
          </button>
        </div>

        <!-- Resource Limits -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
              <line x1="1" y1="10" x2="23" y2="10"></line>
            </svg>
            Resource Limits
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">CPU Limit</label>
              <input
                type="text"
                class="form-input"
                placeholder="e.g., 1.0 or 0.5"
                .value=${this.cpuLimit}
                @input=${W=>this.cpuLimit=W.target.value}
              >
              <div class="form-hint">Number of CPUs (leave empty for unlimited)</div>
            </div>
            <div class="form-group">
              <label class="form-label">Memory Limit</label>
              <input
                type="text"
                class="form-input"
                placeholder="e.g., 512m or 1g"
                .value=${this.memoryLimit}
                @input=${W=>this.memoryLimit=W.target.value}
              >
              <div class="form-hint">Memory limit (leave empty for unlimited)</div>
            </div>
          </div>
        </div>

        <!-- Restart Policy & Network -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
            Container Settings
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Restart Policy</label>
              <select
                class="form-select"
                .value=${this.restartPolicy}
                @change=${W=>this.restartPolicy=W.target.value}
              >
                <option value="always">Always</option>
                <option value="on-failure">On Failure</option>
                <option value="never">Never</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Network Mode</label>
              <select
                class="form-select"
                .value=${this.networkMode}
                @change=${W=>this.networkMode=W.target.value}
              >
                <option value="bridge">Bridge</option>
                <option value="host">Host</option>
                <option value="none">None</option>
              </select>
            </div>
          </div>
        </div>
      `:""}

      <div class="actions">
        <button class="button secondary" @click=${()=>this.handleCancel()}>Cancel</button>
        <button
          class="button primary"
          ?disabled=${this.loading||!this.isValid()}
          @click=${()=>this.handleCreate()}
        >
          ${this.loading?w`<div class="spinner"></div>`:""}
          ${this.loading?"Deploying...":"Deploy Service"}
        </button>
      </div>
    `}isValid(){return this.serviceName.trim()!==""&&this.imageUrl.trim()!==""}addPort(){this.ports=[...this.ports,{hostPort:"",containerPort:"",protocol:"tcp"}]}removePort(W){this.ports=this.ports.filter((B,K)=>K!==W)}updatePort(W,B,K){let ge=[...this.ports];ge[W][B]=K,this.ports=ge}addEnvVar(){this.envVars=[...this.envVars,{key:"",value:""}]}removeEnvVar(W){this.envVars=this.envVars.filter((B,K)=>K!==W)}updateEnvVar(W,B,K){let ge=[...this.envVars];ge[W][B]=K,this.envVars=ge}addVolume(){this.volumes=[...this.volumes,{hostPath:"",containerPath:"",readOnly:!1}]}removeVolume(W){this.volumes=this.volumes.filter((B,K)=>K!==W)}updateVolume(W,B,K){let ge=[...this.volumes];ge[W][B]=K,this.volumes=ge}handleCancel(){this.dispatchEvent(new CustomEvent("cancel",{bubbles:!0,composed:!0}))}handleCreate(){let W={name:this.serviceName.trim(),image:this.imageUrl.trim(),ports:this.ports.filter(B=>B.hostPort&&B.containerPort),envVars:this.envVars.filter(B=>B.key),volumes:this.volumes.filter(B=>B.hostPath&&B.containerPath),cpuLimit:this.cpuLimit,memoryLimit:this.memoryLimit,restartPolicy:this.restartPolicy,networkMode:this.networkMode};this.dispatchEvent(new CustomEvent("create-service",{detail:W,bubbles:!0,composed:!0}))}reset(){this.serviceName="",this.imageUrl="",this.selectedRegistry="",this.ports=[{hostPort:"",containerPort:"",protocol:"tcp"}],this.envVars=[{key:"",value:""}],this.volumes=[],this.cpuLimit="",this.memoryLimit="",this.restartPolicy="always",this.networkMode="bridge",this.showAdvanced=!1}constructor(){super(...arguments),f1(this,P)}static{f1(i,a)}};return F=i})()});var tM,Al,VGt,tMt=v(()=>{oe();tM=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},Al=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},VGt=(()=>{let t=[Q("sz-platform-service-detail-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Array})],l=[D({type:Boolean})],tM(this,null,n,{kind:"accessor",name:"service",static:!1,private:!1,access:{has:h=>"service"in h,get:h=>h.service,set:(h,x)=>{h.service=x}},metadata:g},s,o),tM(this,null,u,{kind:"accessor",name:"logs",static:!1,private:!1,access:{has:h=>"logs"in h,get:h=>h.logs,set:(h,x)=>{h.logs=x}},metadata:g},c,d),tM(this,null,l,{kind:"accessor",name:"actionLoading",static:!1,private:!1,access:{has:h=>"actionLoading"in h,get:h=>h.actionLoading,set:(h,x)=>{h.actionLoading=x}},metadata:g},f,b),tM(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}static demo=()=>w`
    <div style="padding: 24px; max-width: 1000px;">
      <sz-platform-service-detail-view
        .service=${{id:"1",name:"MongoDB",type:"mongodb",status:"running",version:"7.0.4",host:"localhost",port:27017,credentials:{username:"admin",password:"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"},config:{replicaSet:"rs0",authEnabled:!0},metrics:{cpu:12,memory:45,storage:23,connections:8}}}
        .logs=${[{timestamp:"2024-01-20 14:30:22",level:"info",message:"Connection accepted from 127.0.0.1:54321"},{timestamp:"2024-01-20 14:30:20",level:"info",message:"Index build completed on collection users"},{timestamp:"2024-01-20 14:30:15",level:"warn",message:"Slow query detected: 1.2s on collection orders"},{timestamp:"2024-01-20 14:30:10",level:"info",message:"Checkpoint complete"}]}
      ></sz-platform-service-detail-view>
    </div>
  `;static demoGroups=["Platform"];#e=Al(this,s,null);get service(){return this.#e}set service(g){this.#e=g}#t=(Al(this,o),Al(this,c,[]));get logs(){return this.#t}set logs(g){this.#t=g}#a=(Al(this,d),Al(this,f,!1));get actionLoading(){return this.#a}set actionLoading(g){this.#a=g}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
      }

      .header-info {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .service-icon {
        width: 56px;
        height: 56px;
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .service-icon svg {
        width: 28px;
        height: 28px;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .service-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .service-name {
        font-size: 22px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .service-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
      }

      .status-badge.running {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.stopped {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .status-badge.error {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover:not(:disabled) {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .action-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .action-button svg {
        width: 14px;
        height: 14px;
      }

      .action-button.danger {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .action-button.danger:hover:not(:disabled) {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      @media (max-width: 768px) {
        .grid {
          grid-template-columns: 1fr;
        }
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .section.full-width {
        grid-column: 1 / -1;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .section-title {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title svg {
        width: 16px;
        height: 16px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .section-content {
        padding: 16px;
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .info-row:last-child {
        border-bottom: none;
      }

      .info-label {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .info-value {
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        font-family: monospace;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .copy-button {
        padding: 4px;
        background: transparent;
        border: none;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        border-radius: 4px;
        transition: all 200ms ease;
      }

      .copy-button:hover {
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      @media (max-width: 600px) {
        .metrics-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .metric-card {
        text-align: center;
        padding: 12px;
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        border-radius: 6px;
      }

      .metric-value {
        font-size: 20px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .metric-label {
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .progress-bar {
        height: 4px;
        background: ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 2px;
        margin-top: 8px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 300ms ease;
      }

      .progress-fill.low {
        background: ${p.bdTheme("#22c55e","#22c55e")};
      }

      .progress-fill.medium {
        background: ${p.bdTheme("#eab308","#eab308")};
      }

      .progress-fill.high {
        background: ${p.bdTheme("#ef4444","#ef4444")};
      }

      .log-container {
        background: ${p.bdTheme("#18181b","#09090b")};
        border-radius: 6px;
        padding: 12px;
        max-height: 300px;
        overflow-y: auto;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        font-size: 12px;
        line-height: 1.6;
      }

      .log-entry {
        display: flex;
        gap: 12px;
        padding: 4px 0;
      }

      .log-timestamp {
        color: #71717a;
        flex-shrink: 0;
      }

      .log-level {
        flex-shrink: 0;
        width: 50px;
        text-transform: uppercase;
        font-weight: 500;
      }

      .log-level.info {
        color: #60a5fa;
      }

      .log-level.warn {
        color: #fbbf24;
      }

      .log-level.error {
        color: #f87171;
      }

      .log-level.debug {
        color: #a1a1aa;
      }

      .log-message {
        color: #fafafa;
        word-break: break-word;
      }

      .config-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .config-item:last-child {
        border-bottom: none;
      }

      .config-key {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .config-value {
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .config-value.true {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .config-value.false {
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }
    `];render(){return this.service?w`
      <div class="header">
        <div class="header-info">
          <div class="service-icon">
            ${this.renderServiceIcon()}
          </div>
          <div class="service-details">
            <div class="service-name">${this.service.name}</div>
            <div class="service-meta">
              <span class="status-badge ${this.service.status}">
                <span class="status-dot"></span>
                ${this.service.status.charAt(0).toUpperCase()+this.service.status.slice(1)}
              </span>
              <span>Version ${this.service.version}</span>
            </div>
          </div>
        </div>
        <div class="header-actions">
          ${this.service.status==="running"?w`
            <button class="action-button" ?disabled=${this.actionLoading} @click=${()=>this.handleRestart()}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <polyline points="1 20 1 14 7 14"></polyline>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
              </svg>
              Restart
            </button>
            <button class="action-button danger" ?disabled=${this.actionLoading} @click=${()=>this.handleStop()}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="6" y="6" width="12" height="12" rx="1"></rect>
              </svg>
              Stop
            </button>
          `:w`
            <button class="action-button" ?disabled=${this.actionLoading} @click=${()=>this.handleStart()}>
              <svg viewBox="0 0 24 24" fill="currentColor">
                <polygon points="5,3 19,12 5,21"></polygon>
              </svg>
              Start
            </button>
          `}
        </div>
      </div>

      <div class="grid">
        <!-- Connection Info -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
              </svg>
              Connection
            </div>
          </div>
          <div class="section-content">
            <div class="info-row">
              <span class="info-label">Host</span>
              <span class="info-value">
                ${this.service.host}
                <button class="copy-button" @click=${()=>this.copyToClipboard(this.service.host)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                  </svg>
                </button>
              </span>
            </div>
            <div class="info-row">
              <span class="info-label">Port</span>
              <span class="info-value">${this.service.port}</span>
            </div>
            ${this.service.credentials?.username?w`
              <div class="info-row">
                <span class="info-label">Username</span>
                <span class="info-value">
                  ${this.service.credentials.username}
                  <button class="copy-button" @click=${()=>this.copyToClipboard(this.service.credentials.username)}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </span>
              </div>
              <div class="info-row">
                <span class="info-label">Password</span>
                <span class="info-value">••••••••</span>
              </div>
            `:""}
            ${this.service.credentials?.accessKey?w`
              <div class="info-row">
                <span class="info-label">Access Key</span>
                <span class="info-value">
                  ${this.service.credentials.accessKey}
                  <button class="copy-button" @click=${()=>this.copyToClipboard(this.service.credentials.accessKey)}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                </span>
              </div>
              <div class="info-row">
                <span class="info-label">Secret Key</span>
                <span class="info-value">••••••••</span>
              </div>
            `:""}
          </div>
        </div>

        <!-- Configuration -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
              Configuration
            </div>
          </div>
          <div class="section-content">
            ${Object.entries(this.service.config).map(([g,h])=>w`
              <div class="config-item">
                <span class="config-key">${this.formatConfigKey(g)}</span>
                <span class="config-value ${typeof h=="boolean"?h?"true":"false":""}">${this.formatConfigValue(h)}</span>
              </div>
            `)}
          </div>
        </div>

        <!-- Metrics -->
        ${this.service.metrics?w`
          <div class="section full-width">
            <div class="section-header">
              <div class="section-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="20" x2="18" y2="10"></line>
                  <line x1="12" y1="20" x2="12" y2="4"></line>
                  <line x1="6" y1="20" x2="6" y2="14"></line>
                </svg>
                Resource Usage
              </div>
            </div>
            <div class="section-content">
              <div class="metrics-grid">
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.cpu}%</div>
                  <div class="metric-label">CPU</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.cpu)}" style="width: ${this.service.metrics.cpu}%"></div>
                  </div>
                </div>
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.memory}%</div>
                  <div class="metric-label">Memory</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.memory)}" style="width: ${this.service.metrics.memory}%"></div>
                  </div>
                </div>
                <div class="metric-card">
                  <div class="metric-value">${this.service.metrics.storage}%</div>
                  <div class="metric-label">Storage</div>
                  <div class="progress-bar">
                    <div class="progress-fill ${this.getProgressClass(this.service.metrics.storage)}" style="width: ${this.service.metrics.storage}%"></div>
                  </div>
                </div>
                ${this.service.metrics.connections!==void 0?w`
                  <div class="metric-card">
                    <div class="metric-value">${this.service.metrics.connections}</div>
                    <div class="metric-label">Connections</div>
                  </div>
                `:""}
              </div>
            </div>
          </div>
        `:""}

        <!-- Logs -->
        <div class="section full-width">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="4 17 10 11 4 5"></polyline>
                <line x1="12" y1="19" x2="20" y2="19"></line>
              </svg>
              Logs
            </div>
          </div>
          <div class="section-content">
            <div class="log-container">
              ${this.logs.length>0?this.logs.map(g=>w`
                <div class="log-entry">
                  <span class="log-timestamp">${g.timestamp}</span>
                  <span class="log-level ${g.level}">${g.level}</span>
                  <span class="log-message">${g.message}</span>
                </div>
              `):w`
                <div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
              `}
            </div>
          </div>
        </div>
      </div>
    `:w`<div class="empty-state">No service selected</div>`}renderServiceIcon(){switch(this.service?.type){case"mongodb":return w`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>`;case"minio":return w`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>`;case"clickhouse":return w`<svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>`;case"redis":return w`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`;default:return w`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`}}getProgressClass(g){return g<50?"low":g<80?"medium":"high"}formatConfigKey(g){return g.replace(/([A-Z])/g," $1").replace(/^./,h=>h.toUpperCase())}formatConfigValue(g){return typeof g=="boolean"?g?"Enabled":"Disabled":String(g)}copyToClipboard(g){navigator.clipboard.writeText(g),this.dispatchEvent(new CustomEvent("copy",{detail:g,bubbles:!0,composed:!0}))}handleStart(){this.dispatchEvent(new CustomEvent("start",{detail:this.service,bubbles:!0,composed:!0}))}handleStop(){this.dispatchEvent(new CustomEvent("stop",{detail:this.service,bubbles:!0,composed:!0}))}handleRestart(){this.dispatchEvent(new CustomEvent("restart",{detail:this.service,bubbles:!0,composed:!0}))}constructor(){super(...arguments),Al(this,b)}static{Al(i,a)}};return y=i})()});var I8,nn,jGt,aMt=v(()=>{oe();I8=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},nn=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},jGt=(()=>{let t=[Q("sz-domain-detail-view")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[],y,g=[],h=[];var x=class extends r{static{i=this}static{let M=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[D({type:Object})],u=[D({type:Object})],l=[D({type:Array})],y=[D({type:Boolean})],I8(this,null,n,{kind:"accessor",name:"domain",static:!1,private:!1,access:{has:S=>"domain"in S,get:S=>S.domain,set:(S,N)=>{S.domain=N}},metadata:M},s,o),I8(this,null,u,{kind:"accessor",name:"certificate",static:!1,private:!1,access:{has:S=>"certificate"in S,get:S=>S.certificate,set:(S,N)=>{S.certificate=N}},metadata:M},c,d),I8(this,null,l,{kind:"accessor",name:"dnsRecords",static:!1,private:!1,access:{has:S=>"dnsRecords"in S,get:S=>S.dnsRecords,set:(S,N)=>{S.dnsRecords=N}},metadata:M},f,b),I8(this,null,y,{kind:"accessor",name:
    <div style="padding: 24px; max-width: 1000px;">
      <sz-domain-detail-view
        .domain=${{id:"1",name:"example.com",status:"active",verified:!0,createdAt:"2024-01-10",proxyRoutes:["/api/*","/app/*"]}}
        .certificate=${{id:"1",domain:"example.com",issuer:"Let's Encrypt",validFrom:"2024-01-10",validUntil:"2024-04-10",daysRemaining:45,status:"valid",autoRenew:!0,chain:["R3","ISRG Root X1"]}}
        .dnsRecords=${[{id:"1",type:"A",name:"@",value:"192.168.1.100",ttl:3600},{id:"2",type:"CNAME",name:"www",value:"example.com",ttl:3600},{id:"3",type:"MX",name:"@",value:"mail.example.com",ttl:3600,priority:10},{id:"4",type:"TXT",name:"@",value:"v=spf1 include:_spf.example.com ~all",ttl:3600}]}
      ></sz-domain-detail-view>
    </div>
  `;static demoGroups=["Network"];#e=nn(this,s,null);get domain(){return this.#e}set domain(M){this.#e=M}#t=(nn(this,o),nn(this,c,null));get certificate(){return this.#t}set certificate(M){this.#t=M}#a=(nn(this,d),nn(this,f,[]));get dnsRecords(){return this.#a}set dnsRecords(M){this.#a=M}#i=(nn(this,b),nn(this,g,!1));get actionLoading(){return this.#i}set actionLoading(M){this.#i=M}static styles=[p.defaultStyles,X`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
      }

      .header-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .domain-name {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.active {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .status-badge.pending {
        background: ${p.bdTheme("#fef3c7","rgba(245, 158, 11, 0.2)")};
        color: ${p.bdTheme("#d97706","#f59e0b")};
      }

      .status-badge.error {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
      }

      .domain-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .verified-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .verified-badge svg {
        width: 16px;
        height: 16px;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover:not(:disabled) {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .action-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .action-button svg {
        width: 14px;
        height: 14px;
      }

      .action-button.danger {
        color: ${p.bdTheme("#dc2626","#ef4444")};
        border-color: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.3)")};
      }

      .action-button.danger:hover:not(:disabled) {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      @media (max-width: 768px) {
        .grid {
          grid-template-columns: 1fr;
        }
      }

      .section {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 8px;
        overflow: hidden;
      }

      .section.full-width {
        grid-column: 1 / -1;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .section-title {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title svg {
        width: 16px;
        height: 16px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .section-action {
        padding: 6px 10px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 4px;
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .section-action:hover {
        background: ${p.bdTheme("#ffffff","#09090b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .section-content {
        padding: 16px;
      }

      .cert-status {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: ${p.bdTheme("#f0fdf4","rgba(34, 197, 94, 0.1)")};
        border-radius: 8px;
        margin-bottom: 16px;
      }

      .cert-status.expiring {
        background: ${p.bdTheme("#fffbeb","rgba(245, 158, 11, 0.1)")};
      }

      .cert-status.expired {
        background: ${p.bdTheme("#fef2f2","rgba(239, 68, 68, 0.1)")};
      }

      .cert-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .cert-icon.valid {
        background: ${p.bdTheme("#dcfce7","rgba(34, 197, 94, 0.2)")};
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .cert-icon.expiring {
        background: ${p.bdTheme("#fef3c7","rgba(245, 158, 11, 0.2)")};
        color: ${p.bdTheme("#d97706","#f59e0b")};
      }

      .cert-icon.expired {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .cert-icon svg {
        width: 20px;
        height: 20px;
      }

      .cert-info {
        flex: 1;
      }

      .cert-title {
        font-size: 14px;
        font-weight: 600;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .cert-subtitle {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin-top: 2px;
      }

      .cert-days {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
      }

      .cert-days.valid {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .cert-days.expiring {
        color: ${p.bdTheme("#d97706","#f59e0b")};
      }

      .cert-days.expired {
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .cert-days-label {
        font-size: 11px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        text-align: center;
        margin-top: 2px;
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
      }

      .info-row:last-child {
        border-bottom: none;
      }

      .info-label {
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .info-value {
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .info-value.enabled {
        color: ${p.bdTheme("#16a34a","#22c55e")};
      }

      .chain-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .chain-badge {
        padding: 4px 8px;
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        border-radius: 4px;
        font-size: 12px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .dns-table {
        width: 100%;
      }

      .dns-header {
        display: grid;
        grid-template-columns: 80px 1fr 2fr 80px 60px;
        gap: 12px;
        padding: 10px 0;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .dns-row {
        display: grid;
        grid-template-columns: 80px 1fr 2fr 80px 60px;
        gap: 12px;
        padding: 12px 0;
        font-size: 13px;
        color: ${p.bdTheme("#18181b","#fafafa")};
        border-bottom: 1px solid ${p.bdTheme("#f4f4f5","#27272a")};
        align-items: center;
      }

      .dns-row:last-child {
        border-bottom: none;
      }

      .dns-row:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
      }

      .dns-type {
        padding: 2px 8px;
        background: ${p.bdTheme("#dbeafe","rgba(59, 130, 246, 0.2)")};
        color: ${p.bdTheme("#2563eb","#60a5fa")};
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
      }

      .dns-name {
        font-family: monospace;
      }

      .dns-value {
        font-family: monospace;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .dns-ttl {
        color: ${p.bdTheme("#71717a","#a1a1aa")};
      }

      .dns-actions {
        display: flex;
        gap: 4px;
      }

      .icon-button {
        padding: 4px;
        background: transparent;
        border: none;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        border-radius: 4px;
        transition: all 200ms ease;
      }

      .icon-button:hover {
        background: ${p.bdTheme("#e4e4e7","#27272a")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .icon-button.danger:hover {
        background: ${p.bdTheme("#fee2e2","rgba(239, 68, 68, 0.2)")};
        color: ${p.bdTheme("#dc2626","#ef4444")};
      }

      .icon-button svg {
        width: 14px;
        height: 14px;
      }

      .routes-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .route-badge {
        padding: 6px 10px;
        background: ${p.bdTheme("#f4f4f5","#27272a")};
        border-radius: 4px;
        font-size: 13px;
        font-family: monospace;
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .empty-state {
        text-align: center;
        padding: 24px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        font-size: 14px;
      }
    `];render(){return this.domain?w`
      <div class="header">
        <div class="header-info">
          <div class="domain-name">
            ${this.domain.name}
            <span class="status-badge ${this.domain.status}">
              <span class="status-dot"></span>
              ${this.domain.status.charAt(0).toUpperCase()+this.domain.status.slice(1)}
            </span>
          </div>
          <div class="domain-meta">
            ${this.domain.verified?w`
              <span class="verified-badge">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                  <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
                Verified
              </span>
            `:w`<span>Not verified</span>`}
            <span>Added ${this.domain.createdAt}</span>
          </div>
        </div>
        <div class="header-actions">
          ${this.domain.verified?"":w`
            <button class="action-button" ?disabled=${this.actionLoading} @click=${()=>this.handleVerify()}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
              Verify Domain
            </button>
          `}
          <button class="action-button danger" ?disabled=${this.actionLoading} @click=${()=>this.handleDelete()}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="3 6 5 6 21 6"></polyline>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            </svg>
            Delete
          </button>
        </div>
      </div>

      <div class="grid">
        <!-- Certificate Section -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              SSL Certificate
            </div>
            ${this.certificate?w`
              <button class="section-action" @click=${()=>this.handleRenewCertificate()}>Renew</button>
            `:""}
          </div>
          <div class="section-content">
            ${this.certificate?w`
              <div class="cert-status ${this.certificate.status}">
                <div class="cert-icon ${this.certificate.status}">
                  ${this.certificate.status==="valid"?w`
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                      <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                  `:this.certificate.status==="expiring"?w`
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"></circle>
                      <line x1="12" y1="8" x2="12" y2="12"></line>
                      <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                  `:w`
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"></circle>
                      <line x1="15" y1="9" x2="9" y2="15"></line>
                      <line x1="9" y1="9" x2="15" y2="15"></line>
                    </svg>
                  `}
                </div>
                <div class="cert-info">
                  <div class="cert-title">${this.certificate.status==="valid"?"Certificate Valid":this.certificate.status==="expiring"?"Certificate Expiring Soon":"Certificate Expired"}</div>
                  <div class="cert-subtitle">Issued by ${this.certificate.issuer}</div>
                </div>
                <div>
                  <div class="cert-days ${this.certificate.status}">${Math.abs(this.certificate.daysRemaining)}</div>
                  <div class="cert-days-label">${this.certificate.daysRemaining>=0?"days left":"days ago"}</div>
                </div>
              </div>

              <div class="info-row">
                <span class="info-label">Valid From</span>
                <span class="info-value">${this.certificate.validFrom}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Valid Until</span>
                <span class="info-value">${this.certificate.validUntil}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Auto-Renew</span>
                <span class="info-value ${this.certificate.autoRenew?"enabled":""}">${this.certificate.autoRenew?"Enabled":"Disabled"}</span>
              </div>
              ${this.certificate.chain&&this.certificate.chain.length>0?w`
                <div class="info-row">
                  <span class="info-label">Certificate Chain</span>
                  <div class="chain-list">
                    ${this.certificate.chain.map(M=>w`<span class="chain-badge">${M}</span>`)}
                  </div>
                </div>
              `:""}
            `:w`
              <div class="empty-state">No certificate configured</div>
            `}
          </div>
        </div>

        <!-- Proxy Routes Section -->
        <div class="section">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="16 3 21 3 21 8"></polyline>
                <line x1="4" y1="20" x2="21" y2="3"></line>
                <polyline points="21 16 21 21 16 21"></polyline>
                <line x1="15" y1="15" x2="21" y2="21"></line>
                <line x1="4" y1="4" x2="9" y2="9"></line>
              </svg>
              Proxy Routes
            </div>
          </div>
          <div class="section-content">
            ${this.domain.proxyRoutes&&this.domain.proxyRoutes.length>0?w`
              <div class="routes-list">
                ${this.domain.proxyRoutes.map(M=>w`
                  <span class="route-badge">${M}</span>
                `)}
              </div>
            `:w`
              <div class="empty-state">No proxy routes configured</div>
            `}
          </div>
        </div>

        <!-- DNS Records Section -->
        <div class="section full-width">
          <div class="section-header">
            <div class="section-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="2" y1="12" x2="22" y2="12"></line>
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
              </svg>
              DNS Records
            </div>
            <button class="section-action" @click=${()=>this.handleAddDnsRecord()}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
              Add Record
            </button>
          </div>
          <div class="section-content">
            ${this.dnsRecords.length>0?w`
              <div class="dns-table">
                <div class="dns-header">
                  <span>Type</span>
                  <span>Name</span>
                  <span>Value</span>
                  <span>TTL</span>
                  <span></span>
                </div>
                ${this.dnsRecords.map(M=>w`
                  <div class="dns-row">
                    <span class="dns-type">${M.type}</span>
                    <span class="dns-name">${M.name}</span>
                    <span class="dns-value" title="${M.value}">${M.priority?`${M.priority} `:""}${M.value}</span>
                    <span class="dns-ttl">${M.ttl}s</span>
                    <span class="dns-actions">
                      <button class="icon-button" title="Edit" @click=${()=>this.handleEditDnsRecord(M)}>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                      </button>
                      <button class="icon-button danger" title="Delete" @click=${()=>this.handleDeleteDnsRecord(M)}>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <polyline points="3 6 5 6 21 6"></polyline>
                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        </svg>
                      </button>
                    </span>
                  </div>
                `)}
              </div>
            `:w`
              <div class="empty-state">No DNS records configured</div>
            `}
          </div>
        </div>
      </div>
    `:w`<div class="empty-state">No domain selected</div>`}handleVerify(){this.dispatchEvent(new CustomEvent("verify-domain",{detail:this.domain,bubbles:!0,composed:!0}))}handleDelete(){this.dispatchEvent(new CustomEvent("delete-domain",{detail:this.domain,bubbles:!0,composed:!0}))}handleRenewCertificate(){this.dispatchEvent(new CustomEvent("renew-certificate",{detail:this.certificate,bubbles:!0,composed:!0}))}handleAddDnsRecord(){this.dispatchEvent(new CustomEvent("add-dns-record",{detail:this.domain,bubbles:!0,composed:!0}))}handleEditDnsRecord(M){this.dispatchEvent(new CustomEvent("edit-dns-record",{detail:M,bubbles:!0,composed:!0}))}handleDeleteDnsRecord(M){this.dispatchEvent(new CustomEvent("delete-dns-record",{detail:M,bubbles:!0,composed:!0}))}constructor(){super(...arguments),nn(this,h)}static{nn(i,a)}};return x=i})()});var UGt,WGt,GGt,iMt=v(()=>{oe();Qr();UGt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},WGt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},GGt=(()=>{let t=[Q("sz-demo-view-dashboard")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;UGt(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}appui=null;async onActivate(s){this.appui=s.appui,this.appui.setSecondaryMenu({heading:"Dashboard",groups:[{name:"Quick Actions",items:[{type:"action",key:"Deploy Service",iconName:"lucide:Rocket",action:()=>{console.log("Deploy service")}},{type:"action",key:"Add Domain",iconName:"lucide:Globe",action:()=>{console.log("Add domain")}},{type:"action",key:"Create Token",iconName:"lucide:Key",action:()=>{console.log("Create token")}}]},{name:"System",items:[{type:"action",key:"Refresh Stats",iconName:"lucide:RefreshCw",action:()=>{console.log("Refresh")}},{type:"action",key:"View Logs",iconName:"lucide:Terminal",action:()=>{console.log("View logs")}}]}]})}onDeactivate(){}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }
    `];render(){return w`
      <div class="page-header">
        <h1 class="page-title">Dashboard</h1>
        <p class="page-subtitle">Overview of your onebox infrastructure</p>
      </div>

      <sz-dashboard-view
        .clusterStats=${{totalServices:12,running:9,stopped:3,dockerStatus:"running"}}
        .resourceUsage=${{cpu:45,memoryUsed:"6.2 GB",memoryTotal:"16 GB",networkIn:"2.5 MB/s",networkOut:"1.2 MB/s",topConsumers:[{name:"mongodb",memory:"1.2 GB"},{name:"clickhouse",memory:"980 MB"},{name:"nginx-proxy",memory:"256 MB"}]}}
        .platformServices=${[{name:"MongoDB",status:"running",icon:"database"},{name:"S3 Storage",status:"running",icon:"storage"},{name:"ClickHouse",status:"stopped",icon:"analytics"},{name:"Redis Cache",status:"running",icon:"cache"}]}
        .traffic=${{requests:15420,errors:23,errorPercent:.15,avgResponse:145,reqPerMin:856,status2xx:14850,status3xx:320,status4xx:227,status5xx:23}}
        .proxy=${{httpPort:"80",httpsPort:"443",httpActive:!0,httpsActive:!0,routeCount:"24"}}
        .certificates=${{valid:18,expiring:2,expired:0}}
        .dns=${{records:45,zones:8,pendingChanges:0}}
        .ssl=${{activeCerts:20,autoRenew:!0,provider:"Let's Encrypt"}}
        @quick-action=${s=>console.log("Quick action:",s.detail)}
      ></sz-dashboard-view>
    `}static{WGt(i,a)}};return n=i})()});var aM,El,YGt,rMt=v(()=>{oe();Qr();aM=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},El=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},YGt=(()=>{let t=[Q("sz-demo-view-services")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[],l,f=[],b=[];var y=class extends r{static{i=this}static{let g=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],l=[J()],aM(this,null,n,{kind:"accessor",name:"currentView",static:!1,private:!1,access:{has:h=>"currentView"in h,get:h=>h.currentView,set:(h,x)=>{h.currentView=x}},metadata:g},s,o),aM(this,null,u,{kind:"accessor",name:"selectedService",static:!1,private:!1,access:{has:h=>"selectedService"in h,get:h=>h.selectedService,set:(h,x)=>{h.selectedService=x}},metadata:g},c,d),aM(this,null,l,{kind:"accessor",name:"selectedPlatformService",static:!1,private:!1,access:{has:h=>"selectedPlatformService"in h,get:h=>h.selectedPlatformService,set:(h,x)=>{h.selectedPlatformService=x}},metadata:g},f,b),aM(null,e={value:i},t,{kind:"class",name:i.name,metadata:g},null,a),y=i=e.value,g&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:g})}appui=null;#e=El(this,s,"list");get currentView(){return this.#e}set currentView(g){this.#e=g}#t=(El(this,o),El(this,c,null));get selectedService(){return this.#t}set selectedService(g){this.#t=g}#a=(El(this,d),El(this,f,null));get selectedPlatformService(){return this.#a}set selectedPlatformService(g){this.#a=g}demoServices=(El(this,b),[{id:"1",name:"nginx-proxy",image:"nginx:latest",status:"running",cpu:"2.5%",memory:"256 MB",ports:"80, 443",uptime:"5d 12h"},{id:"2",name:"api-gateway",image:"api-gateway:v2.1.0",status:"running",cpu:"8.2%",memory:"512 MB",ports:"3000",uptime:"3d 8h"},{id:"3",name:"worker-service",image:"worker:latest",status:"stopped",cpu:"0%",memory:"0 MB",ports:"-",uptime:"-"},{id:"4",name:"redis-cache",image:"redis:7-alpine",status:"running",cpu:"1.2%",memory:"128 MB",ports:"6379",uptime:"10d 4h"}]);demoPlatformService={id:"1",name:"MongoDB",type:"mongodb",status:"running",version:"7.0.4",host:"localhost",port:27017,credentials:{username:"admin",password:"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"},config:{replicaSet:"rs0",authEnabled:!0,journaling:!0},metrics:{cpu:12,memory:45,storage:23,connections:8}};demoPlatformLogs=[{timestamp:"2024-01-20 14:30:22",level:"info",message:"Connection accepted from 127.0.0.1:54321"},{timestamp:"2024-01-20 14:30:20",level:"info",message:"Index build completed on collection users"},{timestamp:"2024-01-20 14:30:15",level:"warn",message:"Slow query detected: 1.2s on collection orders"},{timestamp:"2024-01-20 14:30:10",level:"info",message:"Checkpoint complete"}];demoBackupSchedules=[{id:"1",scope:"All Services",retention:"D:7, W:4, M:12",schedule:"0 2 * * *",lastRun:"1/2/2026, 2:00:03 AM",nextRun:"1/3/2026, 2:00:00 AM",status:"active"}];demoBackups=[{id:"1",service:"nginx-proxy",createdAt:"1/2/2026, 2:00:03 AM",size:"22.0 MB",includes:["Image"]},{id:"2",service:"api-gateway",createdAt:"1/2/2026, 2:00:02 AM",size:"156.5 MB",includes:["Image","Volumes"]},{id:"3",service:"redis-cache",createdAt:"1/2/2026, 2:00:00 AM
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
      }

      .header-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

      .action-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: ${p.bdTheme("#fafafa","#18181b")};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .action-button:hover {
        opacity: 0.9;
      }

      .action-button.secondary {
        background: ${p.bdTheme("#ffffff","#09090b")};
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .action-button.secondary:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
      }

      .tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        padding-bottom: 0;
      }

      .tab {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color 200ms ease;
      }

      .tab:hover {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border-radius: 1px 1px 0 0;
      }

      .back-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        margin-bottom: 16px;
        transition: all 200ms ease;
      }

      .back-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }
    `];render(){return w`
      ${this.currentView==="list"?this.renderListView():""}
      ${this.currentView==="create"?this.renderCreateView():""}
      ${this.currentView==="detail"?this.renderDetailView():""}
      ${this.currentView==="backups"?this.renderBackupsView():""}
      ${this.currentView==="platform-detail"?this.renderPlatformDetailView():""}
    `}renderListView(){return w`
      <div class="page-header">
        <div class="header-info">
          <h1 class="page-title">Services</h1>
          <p class="page-subtitle">Manage your Docker containers and platform services</p>
        </div>
        <div class="header-actions">
          <button class="action-button secondary" @click=${()=>this.currentView="backups"}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            Backups
          </button>
          <button class="action-button" @click=${()=>this.currentView="create"}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"/>
              <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Deploy Service
          </button>
        </div>
      </div>

      <div class="tabs">
        <button class="tab active">Docker Services</button>
        <button class="tab" @click=${()=>{this.selectedPlatformService=this.demoPlatformService,this.currentView="platform-detail"}}>Platform Services</button>
      </div>

      <sz-services-list-view
        .services=${this.demoServices}
        @view-service=${g=>{this.selectedService=g.detail,this.currentView="detail"}}
        @start-service=${g=>console.log("Start service:",g.detail)}
        @stop-service=${g=>console.log("Stop service:",g.detail)}
        @restart-service=${g=>console.log("Restart service:",g.detail)}
        @delete-service=${g=>console.log("Delete service:",g.detail)}
      ></sz-services-list-view>
    `}renderCreateView(){return w`
      <button class="back-button" @click=${()=>this.currentView="list"}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to Services
      </button>

      <sz-service-create-view
        .registries=${[{id:"1",name:"Onebox Registry",url:"registry.onebox.local"},{id:"2",name:"Docker Hub",url:"docker.io"}]}
        @create-service=${g=>{console.log("Create service:",g.detail),this.currentView="list"}}
        @cancel=${()=>this.currentView="list"}
      ></sz-service-create-view>
    `}renderDetailView(){return w`
      <button class="back-button" @click=${()=>this.currentView="list"}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to Services
      </button>

      <sz-service-detail-view
        .service=${{id:this.selectedService?.id||"1",name:this.selectedService?.name||"nginx-proxy",image:this.selectedService?.image||"nginx:latest",status:this.selectedService?.status||"running",ports:[{host:"80",container:"80"},{host:"443",container:"443"}],envVars:[{key:"NGINX_HOST",value:"localhost"},{key:"NGINX_PORT",value:"80"}],volumes:[{host:"/data/nginx/conf",container:"/etc/nginx/conf.d"}],createdAt:"2024-01-15 10:30:00",restartPolicy:"always"}}
        .logs=${[{timestamp:"2024-01-20 14:30:22",level:"info",message:'127.0.0.1 - - [20/Jan/2024:14:30:22 +0000] "GET / HTTP/1.1" 200 612'},{timestamp:"2024-01-20 14:30:21",level:"info",message:'127.0.0.1 - - [20/Jan/2024:14:30:21 +0000] "GET /api/health HTTP/1.1" 200 15'},{timestamp:"2024-01-20 14:30:20",level:"warn",message:"upstream timed out (110: Connection timed out)"},{timestamp:"2024-01-20 14:30:19",level:"info",message:'127.0.0.1 - - [20/Jan/2024:14:30:19 +0000] "POST /api/data HTTP/1.1" 201 89'}]}
        @start=${()=>console.log("Start")}
        @stop=${()=>console.log("Stop")}
        @restart=${()=>console.log("Restart")}
        @request-workspace=${g=>console.log("Workspace requested for:",g.detail.service.name)}
      ></sz-service-detail-view>
    `}renderBackupsView(){return w`
      <button class="back-button" @click=${()=>this.currentView="list"}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to Services
      </button>

      <div class="page-header">
        <div class="header-info">
          <h1 class="page-title">Backups</h1>
          <p class="page-subtitle">Manage backup schedules and restore points</p>
        </div>
      </div>

      <sz-services-backups-view
        .schedules=${this.demoBackupSchedules}
        .backups=${this.demoBackups}
        @create-schedule=${()=>console.log("Create schedule")}
        @run-now=${g=>console.log("Run now:",g.detail)}
        @download=${g=>console.log("Download:",g.detail)}
      ></sz-services-backups-view>
    `}renderPlatformDetailView(){return w`
      <button class="back-button" @click=${()=>this.currentView="list"}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to Services
      </button>

      <sz-platform-service-detail-view
        .service=${this.demoPlatformService}
        .logs=${this.demoPlatformLogs}
        @start=${()=>console.log("Start")}
        @stop=${()=>console.log("Stop")}
        @restart=${()=>console.log("Restart")}
      ></sz-platform-service-detail-view>
    `}async onActivate(g){this.appui=g.appui,this.appui.setContentTabs([{key:"Docker Services",action:()=>{this.currentView="list",this.updateSecondaryMenu()}},{key:"Platform Services",action:()=>{this.currentView="platform-detail",this.updateSecondaryMenu()}},{key:"Backups",action:()=>{this.currentView="backups",this.updateSecondaryMenu()}}]),this.updateSecondaryMenu()}updateSecondaryMenu(){this.appui&&this.appui.setSecondaryMenu({heading:"Services",groups:[{name:"Actions",items:[{type:"action",key:"Deploy Service",iconName:"lucide:Plus",action:()=>{this.currentView="create"}},{type:"action",key:"Refresh",iconName:"lucide:RefreshCw",action:()=>{console.log("Refresh")}}]},{name:"Quick Filters",items:[{key:"Running",iconName:"lucide:Play",badge:"3",badgeVariant:"success",action:()=>{console.log("Filter running")}},{key:"Stopped",iconName:"lucide:Square",badge:"1",action:()=>{console.log("Filter stopped")}}]}]})}onDeactivate(){}static{El(i,a)}};return y=i})()});var DU,N8,ZGt,sMt=v(()=>{oe();Qr();DU=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},N8=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},ZGt=(()=>{let t=[Q("sz-demo-view-network")],e,a=[],i,r=de,n,s=[],o=[],u,c=[],d=[];var l=class extends r{static{i=this}static{let f=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],u=[J()],DU(this,null,n,{kind:"accessor",name:"currentTab",static:!1,private:!1,access:{has:b=>"currentTab"in b,get:b=>b.currentTab,set:(b,y)=>{b.currentTab=y}},metadata:f},s,o),DU(this,null,u,{kind:"accessor",name:"selectedDomain",static:!1,private:!1,access:{has:b=>"selectedDomain"in b,get:b=>b.selectedDomain,set:(b,y)=>{b.selectedDomain=y}},metadata:f},c,d),DU(null,e={value:i},t,{kind:"class",name:i.name,metadata:f},null,a),l=i=e.value,f&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:f})}appui=null;#e=N8(this,s,"proxy");get currentTab(){return this.#e}set currentTab(f){this.#e=f}async onActivate(f){this.appui=f.appui,this.appui.setContentTabs([{key:"Reverse Proxy",action:()=>{this.currentTab="proxy",this.updateSecondaryMenu()}},{key:"DNS Records",action:()=>{this.currentTab="dns",this.updateSecondaryMenu()}},{key:"Domains",action:()=>{this.currentTab="domains",this.updateSecondaryMenu()}}]),this.updateSecondaryMenu()}updateSecondaryMenu(){this.appui&&(this.currentTab==="proxy"?this.appui.setSecondaryMenu({heading:"Reverse Proxy",groups:[{name:"Actions",items:[{type:"action",key:"Add Route",iconName:"lucide:Plus",action:()=>{console.log("Add route")}},{type:"action",key:"Refresh",iconName:"lucide:RefreshCw",action:()=>{console.log("Refresh")}}]},{name:"Statistics",items:[{type:"header",label:"42 Active Connections"},{type:"header",label:"15,420 Requests Today"}]}]}):this.currentTab==="dns"?this.appui.setSecondaryMenu({heading:"DNS Records",groups:[{name:"Actions",items:[{type:"action",key:"Add Record",iconName:"lucide:Plus",action:()=>{console.log("Add record")}},{type:"action",key:"Import Zone",iconName:"lucide:Upload",action:()=>{console.log("Import zone")}}]},{name:"Zones",items:[{key:"example.com",iconName:"lucide:Globe",action:()=>{console.log("Select example.com")}},{key:"example.
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }

      .tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .tab {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color 200ms ease;
      }

      .tab:hover {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border-radius: 1px 1px 0 0;
      }

      .back-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
        border-radius: 6px;
        font-size: 13px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        cursor: pointer;
        margin-bottom: 16px;
        transition: all 200ms ease;
      }

      .back-button:hover {
        background: ${p.bdTheme("#f4f4f5","#18181b")};
        color: ${p.bdTheme("#18181b","#fafafa")};
      }
    `];render(){return this.currentTab==="domain-detail"?this.renderDomainDetail():w`
      ${this.currentTab==="proxy"?this.renderProxyView():""}
      ${this.currentTab==="dns"?this.renderDnsView():""}
      ${this.currentTab==="domains"?this.renderDomainsView():""}
    `}renderProxyView(){return w`
      <sz-network-proxy-view
        .routes=${this.demoProxyRoutes}
        .accessLogs=${this.demoAccessLogs}
        .stats=${{activeConnections:42,requestsToday:15420,bytesTransferred:"2.4 GB"}}
        @add-route=${()=>console.log("Add route")}
        @edit-route=${f=>console.log("Edit route:",f.detail)}
        @delete-route=${f=>console.log("Delete route:",f.detail)}
      ></sz-network-proxy-view>
    `}renderDnsView(){return w`
      <sz-network-dns-view
        .records=${this.demoDnsRecords}
        .zones=${["example.com","example.net","myapp.io"]}
        .selectedZone=${"example.com"}
        @add-record=${()=>console.log("Add record")}
        @edit-record=${f=>console.log("Edit record:",f.detail)}
        @delete-record=${f=>console.log("Delete record:",f.detail)}
        @change-zone=${f=>console.log("Change zone:",f.detail)}
      ></sz-network-dns-view>
    `}renderDomainsView(){return w`
      <sz-network-domains-view
        .domains=${this.demoDomains}
        @add-domain=${()=>console.log("Add domain")}
        @view-domain=${f=>{this.selectedDomain=f.detail,this.currentTab="domain-detail"}}
        @renew-ssl=${f=>console.log("Renew SSL:",f.detail)}
        @delete-domain=${f=>console.log("Delete domain:",f.detail)}
      ></sz-network-domains-view>
    `}renderDomainDetail(){return w`
      <button class="back-button" @click=${()=>this.currentTab="domains"}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to Domains
      </button>

      <sz-domain-detail-view
        .domain=${this.demoDomainDetail}
        .certificate=${this.demoCertificate}
        .dnsRecords=${this.demoDomainDnsRecords}
        @verify-domain=${()=>console.log("Verify domain")}
        @delete-domain=${()=>{console.log("Delete domain"),this.currentTab="domains"}}
        @renew-certificate=${()=>console.log("Renew certificate")}
        @add-dns-record=${()=>console.log("Add DNS record")}
        @edit-dns-record=${f=>console.log("Edit DNS record:",f.detail)}
        @delete-dns-record=${f=>console.log("Delete DNS record:",f.detail)}
      ></sz-domain-detail-view>
    `}static{N8(i,a)}};return l=i})()});var nMt,AU,XGt,oMt=v(()=>{oe();Qr();nMt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},AU=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},XGt=(()=>{let t=[Q("sz-demo-view-registries")],e,a=[],i,r=de,n,s=[],o=[];var u=class extends r{static{i=this}static{let c=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[J()],nMt(this,null,n,{kind:"accessor",name:"currentTab",static:!1,private:!1,access:{has:d=>"currentTab"in d,get:d=>d.currentTab,set:(d,l)=>{d.currentTab=l}},metadata:c},s,o),nMt(null,e={value:i},t,{kind:"class",name:i.name,metadata:c},null,a),u=i=e.value,c&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c})}appui=null;#e=AU(this,s,"onebox");get currentTab(){return this.#e}set currentTab(c){this.#e=c}async onActivate(c){this.appui=c.appui,this.appui.setContentTabs([{key:"Registry Advertisement",action:()=>{this.currentTab="onebox",this.updateSecondaryMenu()}},{key:"External Registries",action:()=>{this.currentTab="external",this.updateSecondaryMenu()}}]),this.updateSecondaryMenu()}updateSecondaryMenu(){this.appui&&(this.currentTab==="onebox"?this.appui.setSecondaryMenu({heading:"Registry Advertisement",groups:[{name:"Actions",items:[{type:"action",key:"Push Image",iconName:"lucide:Upload",action:()=>{console.log("Push image")}},{type:"action",variant:"danger",key:"Garbage Collect",iconName:"lucide:Trash2",action:()=>{console.log("GC")}}]},{name:"Statistics",items:[{type:"header",label:"4 Images"},{type:"header",label:"640 MB Total"}]}]}):this.appui.setSecondaryMenu({heading:"External Registries",groups:[{name:"Actions",items:[{type:"action",key:"Add Registry",iconName:"lucide:Plus",action:()=>{console.log("Add registry")}},{type:"action",key:"Test All",iconName:"lucide:CheckCircle",action:()=>{console.log("Test all")}}]},{name:"Connected",items:[{key:"Docker Hub",iconName:"lucide:Box",action:()=>{console.log("Docker Hub")}},{key:"GHCR",iconName:"lucide:Github",action:()=>{console.log("GHCR")}}]}]}))}onDeactivate(){}demoOneboxImages=(AU(this,o),[{id:"1",name:"api-gateway",tags:["latest","v2.1.0","v2.0.0"],size:"256 MB",updated:"2024-01-20",pulls:142},{id:"2",name:"frontend",tags:["latest","v1.5.0"],size:"128 MB",updated:"2024-01-19",pulls:89},{id:"3",name:"worker-service",tags:["latest"],size:"64 MB",updated:"2024-01-18",pulls:56},{id:"4",name:"admin-panel",tags:["latest","v3.0.0","v2.9.0"],size:"192 MB",updated:"2024-01-17",pulls:34}]);demoExternalRegistries=[{id:"1",name:"Docker Hub",url:"docker.io",status:"connected",images:12},{id:"2",name:"GitHub Container Registry",url:"ghcr.io",status:"connected",images:8},{id:"3",name:"AWS ECR",url:"123456789.dkr.ecr.us-east-1.amazonaws.com",status:"error",images:0}];static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }

      .tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        border-bottom: 1px solid ${p.bdTheme("#e4e4e7","#27272a")};
      }

      .tab {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color 200ms ease;
      }

      .tab:hover {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active {
        color: ${p.bdTheme("#18181b","#fafafa")};
      }

      .tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: ${p.bdTheme("#18181b","#fafafa")};
        border-radius: 1px 1px 0 0;
      }
    `];render(){return w`
      ${this.currentTab==="onebox"?w`
        <sz-registry-advertisement
          .images=${this.demoOneboxImages}
          .stats=${{totalImages:4,totalSize:"640 MB",totalPulls:321}}
          @view-image=${c=>console.log("View image:",c.detail)}
          @delete-image=${c=>console.log("Delete image:",c.detail)}
          @delete-tag=${c=>console.log("Delete tag:",c.detail)}
        ></sz-registry-advertisement>
      `:w`
        <sz-registry-external-view
          .registries=${this.demoExternalRegistries}
          @add-registry=${()=>console.log("Add registry")}
          @edit-registry=${c=>console.log("Edit registry:",c.detail)}
          @delete-registry=${c=>console.log("Delete registry:",c.detail)}
          @test-connection=${c=>console.log("Test connection:",c.detail)}
        ></sz-registry-external-view>
      `}
    `}static{AU(i,a)}};return u=i})()});var KGt,QGt,JGt,lMt=v(()=>{oe();Qr();KGt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},QGt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},JGt=(()=>{let t=[Q("sz-demo-view-tokens")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;KGt(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}appui=null;async onActivate(s){this.appui=s.appui,this.appui.setSecondaryMenu({heading:"Tokens",groups:[{name:"Actions",items:[{type:"action",key:"Create Global Token",iconName:"lucide:Plus",action:()=>{console.log("Create global token")}},{type:"action",key:"Create CI Token",iconName:"lucide:GitBranch",action:()=>{console.log("Create CI token")}}]},{name:"Token Types",items:[{key:"Global Tokens",iconName:"lucide:Key",badge:"3",action:()=>{console.log("Filter global")}},{key:"CI Tokens",iconName:"lucide:Cpu",badge:"3",action:()=>{console.log("Filter CI")}}]}]})}onDeactivate(){}demoGlobalTokens=[{id:"1",name:"CI/CD Pipeline",type:"global",createdAt:"2024-01-15",lastUsed:"2024-01-20"},{id:"2",name:"Development",type:"global",createdAt:"2024-01-10"},{id:"3",name:"Production Deploy",type:"global",createdAt:"2024-01-05",lastUsed:"2024-01-19"}];demoCiTokens=[{id:"4",name:"api-gateway-ci",type:"ci",service:"api-gateway",createdAt:"2024-01-18",lastUsed:"2024-01-20"},{id:"5",name:"frontend-ci",type:"ci",service:"frontend",createdAt:"2024-01-12",lastUsed:"2024-01-19"},{id:"6",name:"worker-service-ci",type:"ci",service:"worker-service",createdAt:"2024-01-08"}];static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }
    `];render(){return w`
      <div class="page-header">
        <h1 class="page-title">Tokens</h1>
        <p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
      </div>

      <sz-tokens-view
        .globalTokens=${this.demoGlobalTokens}
        .ciTokens=${this.demoCiTokens}
        @create=${s=>console.log("Create token:",s.detail)}
        @copy=${s=>console.log("Copy token:",s.detail)}
        @regenerate=${s=>console.log("Regenerate token:",s.detail)}
        @delete=${s=>console.log("Delete token:",s.detail)}
      ></sz-tokens-view>
    `}static{QGt(i,a)}};return n=i})()});var eYt,tYt,aYt,cMt=v(()=>{oe();Qr();eYt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},tYt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},aYt=(()=>{let t=[Q("sz-demo-view-settings")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;eYt(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}appui=null;async onActivate(s){this.appui=s.appui,this.appui.setSecondaryMenu({heading:"Settings",groups:[{name:"Categories",items:[{key:"General",iconName:"lucide:Settings",action:()=>{console.log("General settings")}},{key:"Network",iconName:"lucide:Network",action:()=>{console.log("Network settings")}},{key:"Security",iconName:"lucide:Shield",action:()=>{console.log("Security settings")}},{key:"Certificates",iconName:"lucide:FileBadge",action:()=>{console.log("Certificate settings")}}]},{name:"Actions",items:[{type:"action",key:"Export Config",iconName:"lucide:Download",action:()=>{console.log("Export config")}},{type:"action",key:"Import Config",iconName:"lucide:Upload",action:()=>{console.log("Import config")}},{type:"action",variant:"danger",key:"Reset to Default",iconName:"lucide:RotateCcw",confirmMessage:"Are you sure you want to reset all settings to default?",action:()=>{console.log("Reset settings")}}]}]})}onDeactivate(){}demoSettings={darkMode:!0,cloudflareToken:"",cloudflareZoneId:"",autoRenewCerts:!0,renewalThreshold:30,acmeEmail:"admin@serve.zone",httpPort:80,httpsPort:443,forceHttps:!0};static styles=[p.defaultStyles,X`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${p.bdTheme("#18181b","#fafafa")};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${p.bdTheme("#71717a","#a1a1aa")};
        margin: 0;
      }

      .settings-container {
        max-width: 800px;
      }
    `];render(){return w`
      <div class="page-header">
        <h1 class="page-title">Settings</h1>
        <p class="page-subtitle">Configure your onebox instance</p>
      </div>

      <div class="settings-container">
        <sz-settings-view
          .settings=${this.demoSettings}
          currentUser="admin"
          @setting-change=${s=>console.log("Setting change:",s.detail)}
          @change-password=${s=>console.log("Change password:",s.detail)}
          @reset=${()=>console.log("Reset settings")}
          @save=${s=>console.log("Save settings:",s.detail)}
        ></sz-settings-view>
      </div>
    `}static{tYt(i,a)}};return n=i})()});var Qr=v(()=>{c3();sU();oU();cU();dU();pU();hU();mU();bU();yU();xU();wU();Owt();Bwt();qwt();Vwt();jwt();Wwt();Ywt();Zwt();Xwt();Kwt();Qwt();Jwt();eMt();tMt();aMt();iMt();rMt();sMt();oMt();lMt();cMt()});var dv2,dMt=v(()=>{oe();dv2=()=>w`
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f5f5f5;
    }
    .demo-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .demo-section {
      background: white;
      border-radius: 12px;
      padding: 48px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      width: 100%;
    }
    h1 {
      margin: 0 0 32px 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 28px;
      color: #1a1a1a;
    }
    .component-demo {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  </style>
  <div class="demo-container">
    <div class="demo-section">
      <h1>Serve.Zone Catalog</h1>
      <div class="component-demo">
        <sz-hello></sz-hello>
        <sz-hello text="Welcome to Serve.Zone!"></sz-hello>
      </div>
    </div>
  </div>
`});var fv2,pMt=v(()=>{oe();Qr();fv2=()=>w`
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    sz-demo-app-shell {
      display: block;
      height: 100vh;
      width: 100vw;
    }
  </style>
  <sz-demo-app-shell></sz-demo-app-shell>
`});var iYt,rYt,sYt,uMt=v(()=>{oe();iU();Qr();iYt=function(t,e,a,i,r,n){function s(x){if(x!==void 0&&typeof x!="function")throw new TypeError("Function expected");return x}for(var o=i.kind,u=o==="getter"?"get":o==="setter"?"set":"value",c=!e&&t?i.static?t:t.prototype:null,d=e||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),l,f=!1,b=a.length-1;b>=0;b--){var y={};for(var g in i)y[g]=g==="access"?{}:i[g];for(var g in i.access)y.access[g]=i.access[g];y.addInitializer=function(x){if(f)throw new TypeError("Cannot add initializers after decoration has completed");n.push(s(x||null))};var h=(0,a[b])(o==="accessor"?{get:d.get,set:d.set}:d[u],y);if(o==="accessor"){if(h===void 0)continue;if(h===null||typeof h!="object")throw new TypeError("Object expected");(l=s(h.get))&&(d.get=l),(l=s(h.set))&&(d.set=l),(l=s(h.init))&&r.unshift(l)}else(l=s(h))&&(o==="field"?r.unshift(l):d[u]=l)}c&&Object.defineProperty(c,i.name,d),f=!0},rYt=function(t,e,a){for(var i=arguments.length>2,r=0;r<e.length;r++)a=i?e[r].call(t,a):e[r].call(t);return i?a:void 0},sYt=(()=>{let t=[Q("sz-demo-app-shell")],e,a=[],i,r=de;var n=class extends r{static{i=this}static{let s=typeof Symbol=="function"&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;iYt(null,e={value:i},t,{kind:"class",name:i.name,metadata:s},null,a),n=i=e.value,s&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s})}static styles=[p.defaultStyles,X`
      :host {
        display: block;
        height: 100%;
        width: 100%;
      }

      dees-appui {
        height: 100%;
        width: 100%;
      }
    `];render(){return w`
      <dees-appui></dees-appui>
    `}async firstUpdated(){let s=this.shadowRoot?.querySelector("dees-appui");s&&(s.configure({branding:{logoIcon:"lucide:Box",logoText:"serve.zone"},appBar:{showSearch:!0,breadcrumbs:"serve.zone",menuItems:[{name:"File",action:async()=>{},submenu:[{name:"New Service",shortcut:"Cmd+N",action:async()=>{console.log("New Service")}},{name:"Import Configuration",action:async()=>{console.log("Import")}},{name:"Export Configuration",action:async()=>{console.log("Export")}},{divider:!0},{name:"Preferences",shortcut:"Cmd+,",action:async()=>{s.navigateToView("settings")}}]},{name:"View",action:async()=>{},submenu:[{name:"Dashboard",shortcut:"Cmd+1",action:async()=>{s.navigateToView("dashboard")}},{name:"Services",shortcut:"Cmd+2",action:async()=>{s.navigateToView("services")}},{name:"Network",shortcut:"Cmd+3",action:async()=>{s.navigateToView("network")}},{divider:!0},{name:"Activity Log",shortcut:"Cmd+Shift+A",action:async()=>{s.toggleActivityLog()}},{name:"Toggle Sidebar",shortcut:"Cmd+B",action:async()=>{s.setMainMenuCollapsed(!s.mainmenuCollapsed)}}]},{name:"Services",action:async()=>{},submenu:[{name:"Deploy New Service",action:async()=>{console.log("Deploy")}},{name:"Start All",action:async()=>{console.log("Start all")}},{name:"Stop All",action:async()=>{console.log("Stop all")}},{divider:!0},{name:"Garbage Collect",action:async()=>{console.log("GC")}}]},{name:"Help",action:async()=>{},submenu:[{name:"Documentation",action:async()=>{window.open("https://docs.serve.zone","_blank")}},{name:"Release Notes",action:async()=>{console.log("Release notes")}},{divider:!0},{name:"About serve.zone",action:async()=>{console.log("About")}}]}]},views:[{id:"dashboard",name:"Dashboard",iconName:"lucide:LayoutDashboard",content:"sz-demo-view-dashboard"},{id:"services",name:"Services",iconName:"lucide:Server",content:"sz-demo-view-services"},{id:"network",name:"Network",iconName:"lucide:Network",content:"sz-demo-view-network"},{id:"registries",name:"Registries",iconName:"lucide:Archive",content:"sz-demo-view-registries"},{id:"tokens",name:"Tokens",iconName:"lucide:Key",content:"sz-demo-view-tokens"},{id:"settings",name:"Settings",iconName:"lucide:Settings",content:"sz-demo-view-settings"}],mainMenu:{sections:[{name:"Overview",views:["dashboard"]},{name:"Infrastructure",views:["services","network","registries"]},{name:"Administration",views:["tokens","settings"]}]},defaultView:"dashboard",onViewChange:(o,u)=>{console.log("View changed to:",o,u)}}),s.setUser({name:"Admin User",email:"admin@serve.zone",status:"online"}),s.setProfileMenuItems([{name:"Profile",iconName:"lucide:User",action:async()=>{console.log("Profile")}},{name:"Preferences",iconName:"lucide:SlidersHorizontal",action:async()=>{console.log("Preferences")}},{divider:!0},{name:"Sign Out",iconName:"lucide:LogOut",action:async()=>{console.log("Sign Out")}}]))}static{rYt(i,a)}};return n=i})()});var hMt=v(()=>{dMt();pMt();uMt()});var fMt=v(()=>{Qr();hMt()});var ot,Jr=v(()=>{oe();iU();fMt();ot=rt});var Ci,mMt=v(()=>{oe();Ci=X`
  :host {
    display: block;
    margin: auto;
    max-width: 1280px;
    padding: 16px 16px;
  }
`});var gMt,PU,nYt,R8,bMt=v(()=>{oe();gMt=[Q("ob-sectionheading")];R8=class extends(nYt=de){static styles=[p.defaultStyles,X`
      :host {
        display: block;
        margin-bottom: 24px;
      }
      .heading {
        font-family: 'Cal Sans', 'Inter', sans-serif;
        font-size: 28px;
        font-weight: 600;
        color: ${p.bdTheme("#111","#fff")};
        margin: 0;
        padding: 0;
      }
    `];render(){return w`
      <h1 class="heading">
        <slot></slot>
      </h1>
    `}};PU=E2(nYt),R8=$t(PU,0,"ObSectionHeading",gMt,R8),Qe(PU,1,R8)});var Ao=v(()=>{mMt();bMt()});var xa=v(()=>{W3()});var vMt=v(()=>{});var yMt=v(()=>{});var xMt=v(()=>{});var wMt=v(()=>{});var MMt=v(()=>{});var kMt=v(()=>{});var oYt,zMt=v(()=>{oYt={standard:{hourly:0,daily:7,weekly:4,monthly:12},frequent:{hourly:24,daily:7,weekly:4,monthly:12},minimal:{hourly:0,daily:3,weekly:2,monthly:6},longterm:{hourly:0,daily:14,weekly:8,monthly:24}}});var SMt=v(()=>{});var CMt=v(()=>{});var IU={};Ye(IU,{RETENTION_PRESETS:()=>oYt});var wa=v(()=>{vMt();yMt();xMt();wMt();MMt();kMt();zMt();SMt();CMt()});var _Mt=v(()=>{xa();wa()});var TMt=v(()=>{xa();wa()});var LMt=v(()=>{xa();wa()});var $Mt=v(()=>{xa();wa()});var DMt=v(()=>{xa();wa()});var AMt=v(()=>{xa();wa()});var EMt=v(()=>{xa();wa()});var PMt=v(()=>{xa();wa()});var IMt=v(()=>{xa();wa()});var NMt=v(()=>{xa();wa()});var RMt=v(()=>{xa();wa()});var FMt=v(()=>{xa();wa()});var OMt=v(()=>{xa();wa()});var BMt={};var HMt=v(()=>{_Mt();TMt();LMt();$Mt();DMt();AMt();EMt();PMt();IMt();NMt();RMt();FMt();OMt()});var NU=v(()=>{xa();wa();HMt()});var Eo,Ma,ln,o1,S1,ur,pr,on,_i,Rt,qMt,iM,h3,rM,VMt,jMt,UMt,WMt,GMt,YMt,ZMt,Iy2,sM,XMt,KMt,FU,F8,QMt,JMt,ekt,OU,nM,tkt,oM,akt,ikt,Ny2,rkt,Ry2,skt,Fy2,nkt,BU,HU,Oy2,Pl,By2,u3,lYt,RU,Po=v(async()=>{Jr();NU();Eo=new ot.plugins.smartstate.Smartstate,Ma=await Eo.getStatePart("login",{identity:null,isLoggedIn:!1},"persistent"),ln=await Eo.getStatePart("system",{status:null},"soft"),o1=await Eo.getStatePart("services",{services:[],currentService:null,currentServiceLogs:[],currentServiceStats:null,platformServices:[],currentPlatformService:null},"soft"),S1=await Eo.getStatePart("network",{targets:[],stats:null,trafficStats:null,dnsRecords:[],domains:[],certificates:[]},"soft"),ur=await Eo.getStatePart("registries",{tokens:[],registryStatus:null},"soft"),pr=await Eo.getStatePart("backups",{backups:[],schedules:[]},"soft"),on=await Eo.getStatePart("settings",{settings:null,backupPasswordConfigured:!1},"soft"),_i=await Eo.getStatePart("ui",{activeView:"dashboard",autoRefresh:!0,refreshInterval:3e4}),Rt=()=>({identity:Ma.getState().identity}),qMt=Ma.createAction(async(t,e)=>{try{return{identity:(await new ot.plugins.typedrequest.TypedRequest("/typedrequest","adminLoginWithUsernameAndPassword").fire({username:e.username,password:e.password})).identity,isLoggedIn:!0}}catch(a){return console.error("Login failed:",a),{identity:null,isLoggedIn:!1}}}),iM=Ma.createAction(async t=>{let e=Rt();try{e.identity&&await new ot.plugins.typedrequest.TypedRequest("/typedrequest","adminLogout").fire({identity:e.identity})}catch(a){console.error("Logout error:",a)}return{identity:null,isLoggedIn:!1}}),h3=ln.createAction(async t=>{let e=Rt();try{return{status:(await new ot.plugins.typedrequest.TypedRequest("/typedrequest","getSystemStatus").fire({identity:e.identity})).status}}catch(a){return console.error("Failed to fetch system status:",a),t.getState()}}),rM=o1.createAction(async t=>{let e=Rt();try{let i=await new ot.plugins.typedrequest.TypedRequest("/typedrequest","getServices").fire({identity:e.identity});return{...t.getState(),services:i.services}}catch(a){return console.error("Failed to fetch services:",a),t.getState()}}),VMt=o1.createAction(async(t,e)=>{let a=Rt();try{let r=await new ot.plugins.typedrequest.TypedRequest("/typedrequest","getService").fire({identity:a.identity,serviceName:e.name});return{...t.getState(),currentService:r.service}}catch(i){return console.error("Failed to fetch service:",i),t.getState()}}),jMt=o1.createAction(async(t,e)=>{let a=Rt();try{await new ot.plugins.typedrequest.TypedRequest("/typedrequest","createService").fire({identity:a.identity,serviceConfig:e.config});let n=await new ot.plugins.typedrequest.TypedRequest("/typedrequest","getServices").fire({identity:a.identity});return{...t.getState(),services:n.services}}catch(i){return console.error("Failed to create service:",i),t.getState()}}),UMt=o1.createAction(async(t,e)=>{let a=Rt();try{await new ot.plugins.typedrequest.TypedRequest("/typedrequest","deleteService").fire({identity:a.identity,servi
      <ob-sectionheading>Dashboard</ob-sectionheading>
      <sz-dashboard-view
        .data=${{cluster:{totalServices:i.length,running:o,stopped:u,dockerStatus:a?.docker?.running?"running":"stopped"},resourceUsage:{cpu:a?.docker?.cpuUsage||0,memoryUsed:a?.docker?.memoryUsage||0,memoryTotal:a?.docker?.memoryTotal||0,networkIn:0,networkOut:0,topConsumers:[]},platformServices:r.map(f=>({name:f.displayName,status:f.status==="running"?"running":"stopped",running:f.status==="running"})),traffic:{requests:0,errors:0,errorPercent:0,avgResponse:0,reqPerMin:0,status2xx:0,status3xx:0,status4xx:0,status5xx:0},proxy:{httpPort:n?.proxy?.httpPort||80,httpsPort:n?.proxy?.httpsPort||443,httpActive:n?.proxy?.running||!1,httpsActive:n?.proxy?.running||!1,routeCount:n?.proxy?.routes||0},certificates:{valid:c,expiring:d,expired:l},dnsConfigured:!0,acmeConfigured:!0,quickActions:[{label:"Deploy Service",icon:"lucide:Plus",primary:!0},{label:"Add Domain",icon:"lucide:Globe"},{label:"View Logs",icon:"lucide:FileText"}]}}
        @action-click=${f=>this.handleQuickAction(f)}
      ></sz-dashboard-view>
    `}handleQuickAction(a){let i=a.detail?.action||a.detail?.label;i==="Deploy Service"?_i.dispatchAction(Pl,{view:"services"}):i==="Add Domain"&&_i.dispatchAction(Pl,{view:"network"})}};Ti=E2(dkt),qU=new WeakMap,VU=new WeakMap,jU=new WeakMap,$t(Ti,4,"systemState",ckt,es,qU),$t(Ti,4,"servicesState",lkt,es,VU),$t(Ti,4,"networkState",okt,es,jU),es=$t(Ti,0,"ObViewDashboard",pkt,es),P2(es,"styles",[p.defaultStyles,Ci,X``]),Qe(Ti,1,es)});var xkt={};Ye(xkt,{ObViewServices:()=>Li});var hkt,fkt,mkt,gkt,bkt,vkt,ykt,m2,WU,GU,YU,ZU,XU,Li,KU=v(async()=>{Jr();Ao();await Po();oe();ykt=[Q("ob-view-services")];Li=class extends(vkt=de,bkt=[J()],gkt=[J()],mkt=[J()],fkt=[J()],hkt=[J()],vkt){constructor(){super();d1(this,WU,Qe(m2,8,this,{services:[],currentService:null,currentServiceLogs:[],currentServiceStats:null,platformServices:[],currentPlatformService:null})),Qe(m2,11,this);d1(this,GU,Qe(m2,12,this,{backups:[],schedules:[]})),Qe(m2,15,this);d1(this,YU,Qe(m2,16,this,"list")),Qe(m2,19,this);d1(this,ZU,Qe(m2,20,this,"")),Qe(m2,23,this);d1(this,XU,Qe(m2,24,this,"")),Qe(m2,27,this);let a=o1.select(r=>r).subscribe(r=>{this.servicesState=r});this.rxSubscriptions.push(a);let i=pr.select(r=>r).subscribe(r=>{this.backupsState=r});this.rxSubscriptions.push(i)}async connectedCallback(){super.connectedCallback(),await Promise.all([o1.dispatchAction(rM,null),o1.dispatchAction(sM,null)])}render(){switch(this.currentView){case"create":return this.renderCreateView();case"detail":return this.renderDetailView();case"backups":return this.renderBackupsView();case"platform-detail":return this.renderPlatformDetailView();default:return this.renderListView()}}renderListView(){return w`
      <ob-sectionheading>Services</ob-sectionheading>
      <sz-services-list-view
        .services=${this.servicesState.services}
        @service-click=${a=>{this.selectedServiceName=a.detail.name||a.detail.service?.name,o1.dispatchAction(VMt,{name:this.selectedServiceName}),o1.dispatchAction(ZMt,{name:this.selectedServiceName}),this.currentView="detail"}}
        @service-action=${a=>this.handleServiceAction(a)}
      ></sz-services-list-view>
    `}renderCreateView(){return w`
      <ob-sectionheading>Create Service</ob-sectionheading>
      <sz-service-create-view
        .registries=${[]}
        @create-service=${async a=>{await o1.dispatchAction(jMt,{config:a.detail}),this.currentView="list"}}
        @cancel=${()=>{this.currentView="list"}}
      ></sz-service-create-view>
    `}renderDetailView(){return w`
      <ob-sectionheading>Service Details</ob-sectionheading>
      <sz-service-detail-view
        .service=${this.servicesState.currentService}
        .logs=${this.servicesState.currentServiceLogs}
        .stats=${this.servicesState.currentServiceStats}
        @back=${()=>{this.currentView="list"}}
        @service-action=${a=>this.handleServiceAction(a)}
      ></sz-service-detail-view>
    `}renderBackupsView(){return w`
      <ob-sectionheading>Backups</ob-sectionheading>
      <sz-services-backups-view
        .schedules=${this.backupsState.schedules}
        .backups=${this.backupsState.backups}
        @create-schedule=${a=>{pr.dispatchAction(skt,{config:a.detail})}}
        @run-now=${a=>{pr.dispatchAction(nkt,{scheduleId:a.detail.scheduleId})}}
        @delete-backup=${a=>{pr.dispatchAction(rkt,{backupId:a.detail.backupId})}}
      ></sz-services-backups-view>
    `}renderPlatformDetailView(){let a=this.servicesState.platformServices.find(i=>i.type===this.selectedPlatformType);return w`
      <ob-sectionheading>Platform Service</ob-sectionheading>
      <sz-platform-service-detail-view
        .service=${a?{id:a.type,name:a.displayName,type:a.type,status:a.status,version:"",host:"localhost",port:0,config:{}}:null}
        .logs=${[]}
        @start=${()=>{o1.dispatchAction(XMt,{serviceType:this.selectedPlatformType})}}
        @stop=${()=>{o1.dispatchAction(KMt,{serviceType:this.selectedPlatformType})}}
      ></sz-platform-service-detail-view>
    `}async handleServiceAction(a){let i=a.detail.action,r=a.detail.service?.name||a.detail.name||this.selectedServiceName;switch(i){case"start":await o1.dispatchAction(WMt,{name:r});break;case"stop":await o1.dispatchAction(GMt,{name:r});break;case"restart":await o1.dispatchAction(YMt,{name:r});break;case"delete":await o1.dispatchAction(UMt,{name:r}),this.currentView="list";break}}};m2=E2(vkt),WU=new WeakMap,GU=new WeakMap,YU=new WeakMap,ZU=new WeakMap,XU=new WeakMap,$t(m2,4,"servicesState",bkt,Li,WU),$t(m2,4,"backupsState",gkt,Li,GU),$t(m2,4,"currentView",mkt,Li,YU),$t(m2,4,"selectedServiceName",fkt,Li,ZU),$t(m2,4,"selectedPlatformType",hkt,Li,XU),Li=$t(m2,0,"ObViewServices",ykt,Li),P2(Li,"styles",[p.defaultStyles,Ci,X``]),Qe(m2,1,Li)});var Ckt={};Ye(Ckt,{ObViewNetwork:()=>ts});var wkt,Mkt,kkt,zkt,Skt,$i,QU,JU,eW,ts,tW=v(async()=>{Jr();Ao();await Po();oe();Skt=[Q("ob-view-network")];ts=class extends(zkt=de,kkt=[J()],Mkt=[J()],wkt=[J()],zkt){constructor(){super();d1(this,QU,Qe($i,8,this,{targets:[],stats:null,trafficStats:null,dnsRecords:[],domains:[],certificates:[]})),Qe($i,11,this);d1(this,JU,Qe($i,12,this,"proxy")),Qe($i,15,this);d1(this,eW,Qe($i,16,this,"")),Qe($i,19,this);let a=S1.select(i=>i).subscribe(i=>{this.networkState=i});this.rxSubscriptions.push(a)}async connectedCallback(){super.connectedCallback(),await Promise.all([S1.dispatchAction(FU,null),S1.dispatchAction(F8,null),S1.dispatchAction(QMt,null),S1.dispatchAction(JMt,null),S1.dispatchAction(OU,null),S1.dispatchAction(nM,null)])}render(){switch(this.currentTab){case"dns":return this.renderDnsView();case"domains":return this.renderDomainsView();case"domain-detail":return this.renderDomainDetailView();default:return this.renderProxyView()}}renderProxyView(){let a=this.networkState.stats;return w`
      <ob-sectionheading>Network</ob-sectionheading>
      <sz-network-proxy-view
        .proxyStatus=${a?.proxy?.running?"running":"stopped"}
        .routeCount=${String(a?.proxy?.routes||0)}
        .certificateCount=${String(a?.proxy?.certificates||0)}
        .targetCount=${String(this.networkState.targets.length)}
        .targets=${this.networkState.targets.map(i=>({type:i.type,name:i.name,domain:i.domain,target:`${i.targetHost}:${i.targetPort}`,status:i.status}))}
        .logs=${[]}
        @refresh=${()=>{S1.dispatchAction(FU,null),S1.dispatchAction(F8,null)}}
      ></sz-network-proxy-view>
    `}renderDnsView(){return w`
      <ob-sectionheading>DNS Records</ob-sectionheading>
      <sz-network-dns-view
        .records=${this.networkState.dnsRecords}
        @sync=${()=>{S1.dispatchAction(ekt,null)}}
        @delete=${a=>{console.log("Delete DNS record:",a.detail)}}
      ></sz-network-dns-view>
    `}renderDomainsView(){let a=this.networkState.certificates;return w`
      <ob-sectionheading>Domains</ob-sectionheading>
      <sz-network-domains-view
        .domains=${this.networkState.domains.map(i=>{let r=a.find(s=>s.certDomain===i.domain),n="pending";return r&&(r.isValid?r.expiresAt&&r.expiresAt-Date.now()<720*60*60*1e3?n="expiring":n="valid":n="expired"),{domain:i.domain,provider:"cloudflare",serviceCount:i.services?.length||0,certificateStatus:n}})}
        @sync=${()=>{S1.dispatchAction(OU,null)}}
        @view=${i=>{this.selectedDomain=i.detail.domain||i.detail,this.currentTab="domain-detail"}}
      ></sz-network-domains-view>
    `}renderDomainDetailView(){let a=this.networkState.domains.find(r=>r.domain===this.selectedDomain),i=this.networkState.certificates.find(r=>r.certDomain===this.selectedDomain);return w`
      <ob-sectionheading>Domain Details</ob-sectionheading>
      <sz-domain-detail-view
        .domain=${a?{id:this.selectedDomain,name:this.selectedDomain,status:"active",verified:!0,createdAt:""}:null}
        .certificate=${i?{id:i.domainId,domain:i.certDomain,issuer:"Let's Encrypt",validFrom:i.issuedAt?new Date(i.issuedAt).toISOString():"",validUntil:i.expiresAt?new Date(i.expiresAt).toISOString():"",daysRemaining:i.expiresAt?Math.floor((i.expiresAt-Date.now())/(1440*60*1e3)):0,status:i.isValid?"valid":"expired",autoRenew:!0}:null}
        .dnsRecords=${this.networkState.dnsRecords.filter(r=>r.domain?.includes(this.selectedDomain)).map(r=>({id:r.id||"",type:r.type,name:r.domain,value:r.value,ttl:3600}))}
        @renew-certificate=${()=>{S1.dispatchAction(tkt,{domain:this.selectedDomain})}}
      ></sz-domain-detail-view>
    `}};$i=E2(zkt),QU=new WeakMap,JU=new WeakMap,eW=new WeakMap,$t($i,4,"networkState",kkt,ts,QU),$t($i,4,"currentTab",Mkt,ts,JU),$t($i,4,"selectedDomain",wkt,ts,eW),ts=$t($i,0,"ObViewNetwork",Skt,ts),P2(ts,"styles",[p.defaultStyles,Ci,X``]),Qe($i,1,ts)});var Dkt={};Ye(Dkt,{ObViewRegistries:()=>dn});var _kt,Tkt,Lkt,$kt,cn,aW,iW,dn,rW=v(async()=>{Jr();Ao();await Po();oe();$kt=[Q("ob-view-registries")];dn=class extends(Lkt=de,Tkt=[J()],_kt=[J()],Lkt){constructor(){super();d1(this,aW,Qe(cn,8,this,{tokens:[],registryStatus:null})),Qe(cn,11,this);d1(this,iW,Qe(cn,12,this,"onebox")),Qe(cn,15,this);let a=ur.select(i=>i).subscribe(i=>{this.registriesState=i});this.rxSubscriptions.push(a)}async connectedCallback(){super.connectedCallback(),await ur.dispatchAction(oM,null)}render(){return this.currentTab==="external"?this.renderExternalView():this.renderOneboxView()}renderOneboxView(){return w`
      <ob-sectionheading>Registries</ob-sectionheading>
      <sz-registry-advertisement
        .status=${"running"}
        .registryUrl=${"localhost:5000"}
        @manage-tokens=${()=>{_i.dispatchAction(Pl,{view:"tokens"})}}
      ></sz-registry-advertisement>
    `}renderExternalView(){return w`
      <ob-sectionheading>External Registries</ob-sectionheading>
      <sz-registry-external-view
        .registries=${[]}
        @add=${a=>{console.log("Add external registry:",a.detail)}}
      ></sz-registry-external-view>
    `}};cn=E2(Lkt),aW=new WeakMap,iW=new WeakMap,$t(cn,4,"registriesState",Tkt,dn,aW),$t(cn,4,"currentTab",_kt,dn,iW),dn=$t(cn,0,"ObViewRegistries",$kt,dn),P2(dn,"styles",[p.defaultStyles,Ci,X``]),Qe(cn,1,dn)});var Ikt={};Ye(Ikt,{ObViewTokens:()=>Io});var Akt,Ekt,Pkt,f3,sW,Io,nW=v(async()=>{Jr();Ao();await Po();oe();Pkt=[Q("ob-view-tokens")];Io=class extends(Ekt=de,Akt=[J()],Ekt){constructor(){super();d1(this,sW,Qe(f3,8,this,{tokens:[],registryStatus:null})),Qe(f3,11,this);let a=ur.select(i=>i).subscribe(i=>{this.registriesState=i});this.rxSubscriptions.push(a)}async connectedCallback(){super.connectedCallback(),await ur.dispatchAction(oM,null)}render(){let a=this.registriesState.tokens.filter(r=>r.type==="global"),i=this.registriesState.tokens.filter(r=>r.type==="ci");return w`
      <ob-sectionheading>Tokens</ob-sectionheading>
      <sz-tokens-view
        .globalTokens=${a.map(r=>({id:r.id,name:r.name,type:"global",createdAt:r.createdAt,lastUsed:r.lastUsed}))}
        .ciTokens=${i.map(r=>({id:r.id,name:r.name,type:"ci",service:r.service,createdAt:r.createdAt,lastUsed:r.lastUsed}))}
        @create=${r=>{ur.dispatchAction(akt,{token:{name:`new-${r.detail.type}-token`,type:r.detail.type,permissions:["pull"]}})}}
        @delete=${r=>{ur.dispatchAction(ikt,{tokenId:r.detail.id||r.detail.tokenId})}}
      ></sz-tokens-view>
    `}};f3=E2(Ekt),sW=new WeakMap,$t(f3,4,"registriesState",Akt,Io,sW),Io=$t(f3,0,"ObViewTokens",Pkt,Io),P2(Io,"styles",[p.defaultStyles,Ci,X``]),Qe(f3,1,Io)});var Bkt={};Ye(Bkt,{ObViewSettings:()=>un});var Nkt,Rkt,Fkt,Okt,pn,oW,lW,un,cW=v(async()=>{Jr();Ao();await Po();oe();Okt=[Q("ob-view-settings")];un=class extends(Fkt=de,Rkt=[J()],Nkt=[J()],Fkt){constructor(){super();d1(this,oW,Qe(pn,8,this,{settings:null,backupPasswordConfigured:!1})),Qe(pn,11,this);d1(this,lW,Qe(pn,12,this,{identity:null,isLoggedIn:!1})),Qe(pn,15,this);let a=on.select(r=>r).subscribe(r=>{this.settingsState=r});this.rxSubscriptions.push(a);let i=Ma.select(r=>r).subscribe(r=>{this.loginState=r});this.rxSubscriptions.push(i)}async connectedCallback(){super.connectedCallback(),await on.dispatchAction(BU,null)}render(){return w`
      <ob-sectionheading>Settings</ob-sectionheading>
      <sz-settings-view
        .settings=${this.settingsState.settings||{darkMode:!0,cloudflareToken:"",cloudflareZoneId:"",autoRenewCerts:!1,renewalThreshold:30,acmeEmail:"",httpPort:80,httpsPort:443,forceHttps:!1}}
        .currentUser=${this.loginState.identity?.username||"admin"}
        @setting-change=${a=>{let{key:i,value:r}=a.detail;on.dispatchAction(HU,{settings:{[i]:r}})}}
        @save=${a=>{on.dispatchAction(HU,{settings:a.detail})}}
        @change-password=${a=>{console.log("Change password requested:",a.detail)}}
        @reset=${()=>{on.dispatchAction(BU,null)}}
      ></sz-settings-view>
    `}};pn=E2(Fkt),oW=new WeakMap,lW=new WeakMap,$t(pn,4,"settingsState",Rkt,un,oW),$t(pn,4,"loginState",Nkt,un,lW),un=$t(pn,0,"ObViewSettings",Okt,un),P2(un,"styles",[p.defaultStyles,Ci,X``]),Qe(pn,1,un)});Jr();await Po();NU();oe();var Hkt,qkt,Vkt,jkt,Ukt,Wkt,ka,dW,pW,uW,hW;Wkt=[Q("ob-app-shell")];var as=class extends(Ukt=de,jkt=[J()],Vkt=[J()],qkt=[J()],Hkt=[J()],Ukt){constructor(){super();d1(this,dW,Qe(ka,8,this,{identity:null,isLoggedIn:!1})),Qe(ka,11,this);d1(this,pW,Qe(ka,12,this,{activeView:"dashboard",autoRefresh:!0,refreshInterval:3e4})),Qe(ka,15,this);d1(this,uW,Qe(ka,16,this,!1)),Qe(ka,19,this);d1(this,hW,Qe(ka,20,this,"")),Qe(ka,23,this);P2(this,"viewTabs",[{name:"Dashboard",element:(async()=>(await UU().then(()=>ukt)).ObViewDashboard)()},{name:"Services",element:(async()=>(await KU().then(()=>xkt)).ObViewServices)()},{name:"Network",element:(async()=>(await tW().then(()=>Ckt)).ObViewNetwork)()},{name:"Registries",element:(async()=>(await rW().then(()=>Dkt)).ObViewRegistries)()},{name:"Tokens",element:(async()=>(await nW().then(()=>Ikt)).ObViewTokens)()},{name:"Settings",element:(async()=>(await cW().then(()=>Bkt)).ObViewSettings)()}]);P2(this,"resolvedViewTabs",[]);document.title="Onebox";let a=Ma.select(r=>r).subscribe(r=>{this.loginState=r,r.isLoggedIn&&ln.dispatchAction(h3,null)});this.rxSubscriptions.push(a);let i=_i.select(r=>r).subscribe(r=>{this.uiState=r,this.syncAppdashView(r.activeView)});this.rxSubscriptions.push(i)}render(){return w`
      <div class="maincontainer">
        <dees-simple-login name="Onebox">
          <dees-simple-appdash
            name="Onebox"
            .viewTabs=${this.resolvedViewTabs}
          >
          </dees-simple-appdash>
        </dees-simple-login>
      </div>
    `}async firstUpdated(){this.resolvedViewTabs=await Promise.all(this.viewTabs.map(async n=>({name:n.name,element:await n.element}))),this.requestUpdate(),await this.updateComplete;let a=this.shadowRoot.querySelector("dees-simple-login");a&&a.addEventListener("login",n=>{this.login(n.detail.data.username,n.detail.data.password)});let i=this.shadowRoot.querySelector("dees-simple-appdash");if(i&&(i.addEventListener("view-select",n=>{let s=n.detail.view.name.toLowerCase();_i.dispatchAction(Pl,{view:s})}),i.addEventListener("logout",async()=>{await Ma.dispatchAction(iM,null)})),i&&this.resolvedViewTabs.length>0){let n=this.resolvedViewTabs.find(s=>s.name.toLowerCase()===this.uiState.activeView)||this.resolvedViewTabs[0];await i.loadView(n)}let r=Ma.getState();if(r.identity?.jwt)if(r.identity.expiresAt>Date.now())try{let s=await new ot.plugins.typedrequest.TypedRequest("/typedrequest","getSystemStatus").fire({identity:r.identity});ln.setState({status:s.status}),this.loginState=r,a&&await a.switchToSlottedContent()}catch(n){console.warn("Stored session invalid, returning to login:",n),await Ma.dispatchAction(iM,null)}else await Ma.dispatchAction(iM,null)}async login(a,i){let r=await this.domtoolsPromise,n=this.shadowRoot.querySelector("dees-simple-login"),s=n?.shadowRoot?.querySelector("dees-form");s&&s.setStatus("pending","Logging in..."),(await Ma.dispatchAction(qMt,{username:a,password:i})).identity?(s&&s.setStatus("success","Logged in!"),n&&await n.switchToSlottedContent(),await ln.dispatchAction(h3,null)):s&&(s.setStatus("error","Login failed!"),await r.convenience.smartdelay.delayFor(2e3),s.reset())}syncAppdashView(a){let i=this.shadowRoot?.querySelector("dees-simple-appdash");if(!i||this.resolvedViewTabs.length===0)return;let r=this.resolvedViewTabs.find(n=>n.name.toLowerCase()===a);r&&i.loadView(r)}};ka=E2(Ukt),dW=new WeakMap,pW=new WeakMap,uW=new WeakMap,hW=new WeakMap,$t(ka,4,"loginState",jkt,as,dW),$t(ka,4,"uiState",Vkt,as,pW),$t(ka,4,"loginLoading",qkt,as,uW),$t(ka,4,"loginError",Hkt,as,hW),as=$t(ka,0,"ObAppShell",Wkt,as),P2(as,"styles",[p.defaultStyles,X`
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }
      .maincontainer {
        width: 100%;
        height: 100vh;
      }
    `]),Qe(ka,1,as);Ao();UU();KU();tW();rW();nW();cW();Jr();oe();O5.render(w`
  <ob-app-shell></ob-app-shell>
`,document.body);
/*! Bundled license information:

@lit/reactive-element/css-tag.js:
  (**
   * @license
   * Copyright 2019 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)

@lit/reactive-element/reactive-element.js:
lit-html/lit-html.js:
lit-element/lit-element.js:
@lit/reactive-element/decorators/property.js:
lit-html/directive.js:
lit-html/directives/unsafe-html.js:
@lit/reactive-element/decorators/custom-element.js:
@lit/reactive-element/decorators/state.js:
@lit/reactive-element/decorators/event-options.js:
@lit/reactive-element/decorators/base.js:
@lit/reactive-element/decorators/query.js:
@lit/reactive-element/decorators/query-all.js:
@lit/reactive-element/decorators/query-async.js:
@lit/reactive-element/decorators/query-assigned-nodes.js:
lit-html/async-directive.js:
lit-html/directives/until.js:
lit-html/directives/async-replace.js:
lit-html/directives/async-append.js:
lit-html/directives/repeat.js:
  (**
   * @license
   * Copyright 2017 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)

lit-html/is-server.js:
  (**
   * @license
   * Copyright 2022 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)

sweet-scroll/sweet-scroll.js:
  (*! @preserve sweet-scroll v4.0.0 - tsuyoshiwada | MIT License *)
  (*! *****************************************************************************
      Copyright (c) Microsoft Corporation. All rights reserved.
      Licensed under the Apache License, Version 2.0 (the "License"); you may not use
      this file except in compliance with the License. You may obtain a copy of the
      License at http://www.apache.org/licenses/LICENSE-2.0
  
      THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
      WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
      MERCHANTABLITY OR NON-INFRINGEMENT.
  
      See the Apache Version 2.0 License for specific language governing permissions
      and limitations under the License.
      ***************************************************************************** *)

lit-html/static.js:
lit-html/directive-helpers.js:
  (**
   * @license
   * Copyright 2020 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)

@lit/reactive-element/decorators/query-assigned-elements.js:
lit-html/directives/private-async-helpers.js:
lit-html/directives/keyed.js:
  (**
   * @license
   * Copyright 2021 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)

@fortawesome/fontawesome-svg-core/index.mjs:
@fortawesome/free-brands-svg-icons/index.mjs:
@fortawesome/free-regular-svg-icons/index.mjs:
@fortawesome/free-solid-svg-icons/index.mjs:
  (*!
   * Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com
   * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   * Copyright 2026 Fonticons, Inc.
   *)

lucide/dist/cjs/lucide.js:
  (**
   * @license lucide v0.564.0 - ISC
   *
   * This source code is licensed under the ISC license.
   * See the LICENSE file in the root directory of this source tree.
   *)

ibantools/jsnext/ibantools.js:
  (*!
   * @license
   * Copyright Saša Jovanić
   * Licensed under the Mozilla Public License, Version 2.0 or the MIT license,
   * at your option. This file may not be copied, modified, or distributed
   * except according to those terms.
   * SPDX-FileCopyrightText: Saša Jovanić
   * SPDX-License-Identifier: MIT or MPL/2.0
   *)
  (**
   * Validation, extraction and creation of IBAN, BBAN, BIC/SWIFT numbers plus some other helpful stuff
   * @package Documentation
   * @author Saša Jovanić
   * @module ibantools
   * @version 4.5.1
   * @license MIT or MPL-2.0
   * @preferred
   *)
*/
//# sourceMappingURL=bundle-1771612892269.js.map