@kodaris/krubble-app-components 1.0.0

package/dist/krubble-app.umd.min.js

@@ -0,0 +1,2005 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@kodaris/krubble-components")):"function"==typeof define&&define.amd?define(["exports","@kodaris/krubble-components"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).krApp={},e.kr)}(this,(function(e,t){"use strict";
+/**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const i=globalThis,r=i.ShadowRoot&&(void 0===i.ShadyCSS||i.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),a=new WeakMap;let n=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(r&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=a.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&a.set(t,e))}return e}toString(){return this.cssText}};const o=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[r+1]),e[0]);return new n(i,e,s)},l=r?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new n("string"==typeof e?e:e+"",void 0,s))(t)})(e):e
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,{is:d,defineProperty:c,getOwnPropertyDescriptor:p,getOwnPropertyNames:h,getOwnPropertySymbols:u,getPrototypeOf:v}=Object,f=globalThis,g=f.trustedTypes,m=g?g.emptyScript:"",b=f.reactiveElementPolyfillSupport,x=(e,t)=>e,_={toAttribute(e,t){switch(t){case Boolean:e=e?m:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},y=(e,t)=>!d(e,t),$={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;let k=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=$){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(e,i,t);void 0!==r&&c(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:s}=p(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const a=r?.call(this);s?.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??$}static _$Ei(){if(this.hasOwnProperty(x("elementProperties")))return;const e=v(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(x("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(x("properties"))){const e=this.properties,t=[...h(e),...u(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(l(e))}else void 0!==e&&t.push(l(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(r)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const r of t){const t=document.createElement("style"),s=i.litNonce;void 0!==s&&t.setAttribute("nonce",s),t.textContent=r.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(void 0!==r&&!0===i.reflect){const s=(void 0!==i.converter?.toAttribute?i.converter:_).toAttribute(t,i.type);this._$Em=e,null==s?this.removeAttribute(r):this.setAttribute(r,s),this._$Em=null}}_$AK(e,t){const i=this.constructor,r=i._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=i.getPropertyOptions(r),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:_;this._$Em=r;const a=s.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const r=this.constructor,s=this[e];if(i??=r.getPropertyOptions(e),!((i.hasChanged??y)(s,t)||i.useDefault&&i.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:s},a){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==s||void 0!==a)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,i,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}};k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[x("elementProperties")]=new Map,k[x("finalized")]=new Map,b?.({ReactiveElement:k}),(f.reactiveElementVersions??=[]).push("2.1.1");
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const w=globalThis,I=w.trustedTypes,A=I?I.createPolicy("lit-html",{createHTML:e=>e}):void 0,E="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+S,N=`<${C}>`,R=document,M=()=>R.createComment(""),D=e=>null===e||"object"!=typeof e&&"function"!=typeof e,O=Array.isArray,P="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,U=/-->/g,T=/>/g,j=RegExp(`>|${P}(?:([^\\s"'>=/]+)(${P}*=${P}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),K=/'/g,H=/"/g,X=/^(?:script|style|textarea|title)$/i,L=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),q=Symbol.for("lit-noChange"),F=Symbol.for("lit-nothing"),B=new WeakMap,Y=R.createTreeWalker(R,129);function V(e,t){if(!O(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(t):t}const W=(e,t)=>{const i=e.length-1,r=[];let s,a=2===t?"<svg>":3===t?"<math>":"",n=z;for(let t=0;t<i;t++){const i=e[t];let o,l,d=-1,c=0;for(;c<i.length&&(n.lastIndex=c,l=n.exec(i),null!==l);)c=n.lastIndex,n===z?"!--"===l[1]?n=U:void 0!==l[1]?n=T:void 0!==l[2]?(X.test(l[2])&&(s=RegExp("</"+l[2],"g")),n=j):void 0!==l[3]&&(n=j):n===j?">"===l[0]?(n=s??z,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,o=l[1],n=void 0===l[3]?j:'"'===l[3]?H:K):n===H||n===K?n=j:n===U||n===T?n=z:(n=j,s=void 0);const p=n===j&&e[t+1].startsWith("/>")?" ":"";a+=n===z?i+N:d>=0?(r.push(o),i.slice(0,d)+E+i.slice(d)+S+p):i+S+(-2===d?t:p)}return[V(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class Q{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let s=0,a=0;const n=e.length-1,o=this.parts,[l,d]=W(e,t);if(this.el=Q.createElement(l,i),Y.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=Y.nextNode())&&o.length<n;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(E)){const t=d[a++],i=r.getAttribute(e).split(S),n=/([.?@])?(.*)/.exec(t);o.push({type:1,index:s,name:n[2],strings:i,ctor:"."===n[1]?te:"?"===n[1]?ie:"@"===n[1]?re:ee}),r.removeAttribute(e)}else e.startsWith(S)&&(o.push({type:6,index:s}),r.removeAttribute(e));if(X.test(r.tagName)){const e=r.textContent.split(S),t=e.length-1;if(t>0){r.textContent=I?I.emptyScript:"";for(let i=0;i<t;i++)r.append(e[i],M()),Y.nextNode(),o.push({type:2,index:++s});r.append(e[t],M())}}}else if(8===r.nodeType)if(r.data===C)o.push({type:2,index:s});else{let e=-1;for(;-1!==(e=r.data.indexOf(S,e+1));)o.push({type:7,index:s}),e+=S.length-1}s++}}static createElement(e,t){const i=R.createElement("template");return i.innerHTML=e,i}}function G(e,t,i=e,r){if(t===q)return t;let s=void 0!==r?i._$Co?.[r]:i._$Cl;const a=D(t)?void 0:t._$litDirective$;return s?.constructor!==a&&(s?._$AO?.(!1),void 0===a?s=void 0:(s=new a(e),s._$AT(e,i,r)),void 0!==r?(i._$Co??=[])[r]=s:i._$Cl=s),void 0!==s&&(t=G(e,s._$AS(e,t.values),s,r)),t}class J{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,r=(e?.creationScope??R).importNode(t,!0);Y.currentNode=r;let s=Y.nextNode(),a=0,n=0,o=i[0];for(;void 0!==o;){if(a===o.index){let t;2===o.type?t=new Z(s,s.nextSibling,this,e):1===o.type?t=new o.ctor(s,o.name,o.strings,this,e):6===o.type&&(t=new se(s,this,e)),this._$AV.push(t),o=i[++n]}a!==o?.index&&(s=Y.nextNode(),a++)}return Y.currentNode=R,r}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Z{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,r){this.type=2,this._$AH=F,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=G(this,e,t),D(e)?e===F||null==e||""===e?(this._$AH!==F&&this._$AR(),this._$AH=F):e!==this._$AH&&e!==q&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>O(e)||"function"==typeof e?.[Symbol.iterator])(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!==F&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(R.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Q.createElement(V(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new J(r,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=B.get(e.strings);return void 0===t&&B.set(e.strings,t=new Q(e)),t}k(e){O(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const s of e)r===t.length?t.push(i=new Z(this.O(M()),this.O(M()),this,this.options)):i=t[r],i._$AI(s),r++;r<t.length&&(this._$AR(i&&i._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class ee{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,r,s){this.type=1,this._$AH=F,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=s,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=F}_$AI(e,t=this,i,r){const s=this.strings;let a=!1;if(void 0===s)e=G(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==q,a&&(this._$AH=e);else{const r=e;let n,o;for(e=s[0],n=0;n<s.length-1;n++)o=G(this,r[i+n],t,n),o===q&&(o=this._$AH[n]),a||=!D(o)||o!==this._$AH[n],o===F?e=F:e!==F&&(e+=(o??"")+s[n+1]),this._$AH[n]=o}a&&!r&&this.j(e)}j(e){e===F?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class te extends ee{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===F?void 0:e}}class ie extends ee{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==F)}}class re extends ee{constructor(e,t,i,r,s){super(e,t,i,r,s),this.type=5}_$AI(e,t=this){if((e=G(this,e,t,0)??F)===q)return;const i=this._$AH,r=e===F&&i!==F||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,s=e!==F&&(i===F||r);r&&this.element.removeEventListener(this.name,this,i),s&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class se{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){G(this,e)}}const ae=w.litHtmlPolyfillSupport;ae?.(Q,Z),(w.litHtmlVersions??=[]).push("3.3.1");const ne=globalThis;
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */let oe=class extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const r=i?.renderBefore??t;let s=r._$litPart$;if(void 0===s){const e=i?.renderBefore??null;r._$litPart$=s=new Z(t.insertBefore(M(),e),e,void 0,i??{})}return s._$AI(e),s})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return q}};oe._$litElement$=!0,oe.finalized=!0,ne.litElementHydrateSupport?.({LitElement:oe});const le=ne.litElementPolyfillSupport;le?.({LitElement:oe}),(ne.litElementVersions??=[]).push("4.2.1");
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const de=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)})):customElements.define(e,t)}
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,ce={attribute:!0,type:String,converter:_,reflect:!1,hasChanged:y},pe=(e=ce,t,i)=>{const{kind:r,metadata:s}=i;let a=globalThis.litPropertyMetadata.get(s);if(void 0===a&&globalThis.litPropertyMetadata.set(s,a=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),a.set(i.name,e),"accessor"===r){const{name:r}=i;return{set(i){const s=t.get.call(this);t.set.call(this,i),this.requestUpdate(r,s,e)},init(t){return void 0!==t&&this.C(r,void 0,e,t),t}}}if("setter"===r){const{name:r}=i;return function(i){const s=this[r];t.call(this,i),this.requestUpdate(r,s,e)}}throw Error("Unsupported decorator location: "+r)};function he(e){return(t,i)=>"object"==typeof i?pe(e,t,i):((e,t,i)=>{const r=t.hasOwnProperty(i);return t.constructor.createProperty(i,e),r?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */}function ue(e){return he({...e,state:!0,attribute:!1})}
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const ve=1,fe=2,ge=e=>(...t)=>({_$litDirective$:e,values:t});class me{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
+/**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const be=ge(class extends me{constructor(e){if(super(e),e.type!==ve||"class"!==e.name||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter((t=>e[t])).join(" ")+" "}update(e,[t]){if(void 0===this.st){this.st=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter((e=>""!==e))));for(const e in t)t[e]&&!this.nt?.has(e)&&this.st.add(e);return this.render(t)}const i=e.element.classList;for(const e of this.st)e in t||(i.remove(e),this.st.delete(e));for(const e in t){const r=!!t[e];r===this.st.has(e)||this.nt?.has(e)||(r?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return q}});
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */class xe extends me{constructor(e){if(super(e),this.it=F,e.type!==fe)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===F||null==e)return this._t=void 0,this.it=e;if(e===q)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}xe.directiveName="unsafeHTML",xe.resultType=1;const _e=ge(xe);var ye=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};e.KRShell=class extends oe{constructor(){super(...arguments),this.logo="https://s3.amazonaws.com/kodariscom/kodariscom/content/website/kodaris-logo-icon-light-53.png",this.apps=[],this.activeAppId="",this.user=null,this.menuItems=[],this.isUserMenuOpen=!1,this.isAppsMenuOpen=!1,this.pendingRequests=0,this.originalFetch=null,this.originalXhrOpen=null,this.defaultLogoutIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>',this.appsGridIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>',this.closeIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'}connectedCallback(){super.connectedCallback(),this.installFetchInterceptor()}disconnectedCallback(){super.disconnectedCallback(),this.uninstallFetchInterceptor()}installFetchInterceptor(){if(this.originalFetch)return;const e=this;this.originalFetch=window.fetch.bind(window);const t=this.originalFetch;window.fetch=function(...i){return e.pendingRequests++,t(...i).finally((()=>{e.pendingRequests--}))},this.originalXhrOpen=XMLHttpRequest.prototype.open;const i=this.originalXhrOpen;XMLHttpRequest.prototype.open=function(t,r,s=!0,a,n){return e.pendingRequests++,this.addEventListener("loadend",(()=>{e.pendingRequests--}),{once:!0}),i.call(this,t,r,s,a,n)}}uninstallFetchInterceptor(){this.originalFetch&&(window.fetch=this.originalFetch,this.originalFetch=null),this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen,this.originalXhrOpen=null)}handleLogoClick(){this.dispatchEvent(new CustomEvent("logo-click",{bubbles:!0,composed:!0}))}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen,this.isAppsMenuOpen=!1}closeUserMenu(){this.isUserMenuOpen=!1}toggleAppsMenu(){this.isAppsMenuOpen=!this.isAppsMenuOpen,this.isUserMenuOpen=!1}closeAppsMenu(){this.isAppsMenuOpen=!1}handleMenuItemClick(e){this.closeUserMenu(),this.dispatchEvent(new CustomEvent("menu-item-click",{detail:{item:e},bubbles:!0,composed:!0}))}handleLogout(){this.closeUserMenu(),this.dispatchEvent(new CustomEvent("logout",{bubbles:!0,composed:!0}))}renderAppsMenu(){return L`
+      <div class="appbar-apps">
+        ${this.isAppsMenuOpen?L`
+          <div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
+        `:F}
+
+        <button
+          class=${be({"appbar-apps-btn":!0,"appbar-apps-btn--open":this.isAppsMenuOpen})}
+          @click=${this.toggleAppsMenu}
+        >
+          <span class="appbar-apps-btn__icon">${_e(this.appsGridIcon)}</span>
+        </button>
+
+        <div class=${be({"appbar-apps-menu":!0,"appbar-apps-menu--open":this.isAppsMenuOpen})}>
+          <div class="appbar-apps-menu__header">
+            <h2 class="appbar-apps-menu__title">Applications</h2>
+            <button class="appbar-apps-menu__close" @click=${this.closeAppsMenu}>
+              ${_e(this.closeIcon)}
+            </button>
+          </div>
+          <div class="appbar-apps-menu__content">
+            <div class="appbar-apps-menu__list">
+              ${this.apps.map((e=>L`
+                <a
+                  class="appbar-apps-menu__item"
+                  href=${e.url}
+                  @click=${t=>{this.closeAppsMenu();const i=new CustomEvent("app-click",{detail:{app:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&t.preventDefault()}}
+                >
+                  ${e.name}
+                </a>
+              `))}
+            </div>
+          </div>
+        </div>
+      </div>
+    `}renderUserMenu(){if(!this.user)return F;const e=this.user.name.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2);return L`
+      <div class="appbar-user">
+        ${this.isUserMenuOpen?L`
+          <div class="menu-backdrop" @click=${this.closeUserMenu}></div>
+        `:F}
+
+        <div
+          class="appbar-user__avatar"
+          @click=${this.toggleUserMenu}
+        >
+          ${this.user.avatar?L`<img src=${this.user.avatar} alt=${this.user.name} />`:e}
+        </div>
+
+        <div class=${be({"appbar-user__menu":!0,"appbar-user__menu--open":this.isUserMenuOpen})}>
+          <div class="appbar-user__header">
+            <p class="appbar-user__name">${this.user.name}</p>
+            ${this.user.email?L`
+              <p class="appbar-user__email">${this.user.email}</p>
+            `:F}
+          </div>
+
+          ${this.menuItems.map((e=>e.divider?L`<div class="appbar-user__menu-divider"></div>`:L`
+                <button
+                  class="appbar-user__menu-item"
+                  @click=${()=>this.handleMenuItemClick(e)}
+                >
+                  ${e.icon?L`
+                    <span class="appbar-user__menu-item__icon">${_e(e.icon)}</span>
+                  `:F}
+                  ${e.label}
+                </button>
+              `))}
+
+          ${this.menuItems.length>0?L`
+            <div class="appbar-user__menu-divider"></div>
+          `:F}
+
+          <button
+            class="appbar-user__menu-item appbar-user__menu-item--danger"
+            @click=${this.handleLogout}
+          >
+            <span class="appbar-user__menu-item__icon">${_e(this.defaultLogoutIcon)}</span>
+            Sign Out
+          </button>
+        </div>
+      </div>
+    `}render(){return L`
+      <div class=${be({progress:!0,"progress--loading":this.pendingRequests>0})}>
+        <div class="progress__track"></div>
+        <div class="progress__bar progress__bar--primary">
+          <span class="progress__bar-inner"></span>
+        </div>
+        <div class="progress__bar progress__bar--secondary">
+          <span class="progress__bar-inner"></span>
+        </div>
+      </div>
+
+      <header class="appbar">
+        <!-- Logo -->
+        ${this.logo?L`
+          <div class="appbar-logo" @click=${this.handleLogoClick}>
+            <img src=${this.logo} alt="Home" />
+          </div>
+          <div class="appbar-divider"></div>
+        `:F}
+
+        <!-- App Switcher -->
+        ${this.renderAppsMenu()}
+
+        <div class="appbar-spacer"></div>
+
+        <!-- User -->
+        ${this.renderUserMenu()}
+      </header>
+
+      <div class="subbar">
+        <nav class="breadcrumbs">
+          <a href="#">Home</a>
+          <span class="breadcrumbs__separator">/</span>
+          <a href="#">Companies</a>
+          <span class="breadcrumbs__separator">/</span>
+          <span>Acme Corp</span>
+        </nav>
+      </div>
+
+      <main class="main">
+        <slot></slot>
+      </main>
+    `}},e.KRShell.styles=o`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      width: 100vw;
+      --kr-shell-bar-height: 48px;
+      --kr-shell-bar-bg: #10172a; /* matches scaffold nav-bg */
+      /* --kr-shell-bar-bg: #0a0f1a; */ /* original darker bg */
+      --kr-shell-bar-border: rgba(255, 255, 255, 0.08);
+      --kr-shell-icon-size: 36px;
+      --kr-shell-icon-color: rgba(255, 255, 255, 0.7);
+      --kr-shell-icon-color-hover: rgba(255, 255, 255, 1);
+      --kr-shell-icon-color-active: #beea4e;
+      --kr-shell-icon-bg-hover: rgba(255, 255, 255, 0.08);
+      --kr-shell-icon-bg-active: rgba(190, 234, 78, 0.15);
+      --kr-shell-tooltip-bg: #1a2332;
+      --kr-shell-tooltip-color: #ffffff;
+      --kr-shell-menu-bg: #1a2332;
+      --kr-shell-menu-border: rgba(255, 255, 255, 0.1);
+      --kr-shell-menu-hover: rgba(255, 255, 255, 0.08);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    /* App Bar */
+    .appbar {
+      height: var(--kr-shell-bar-height);
+      background: var(--kr-shell-bar-bg);
+      border-bottom: 1px solid var(--kr-shell-bar-border);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      flex-shrink: 0;
+      z-index: 100;
+    }
+
+    /* Logo */
+    .appbar-logo {
+      cursor: pointer;
+      margin-right: 8px;
+    }
+
+    .appbar-logo img {
+      display: block;
+      max-width: 24px;
+      max-height: 24px;
+      object-fit: contain;
+    }
+
+    /* Divider */
+    .appbar-divider {
+      width: 1px;
+      height: 24px;
+      background: #ffffff4f;
+      margin: 0 10px;
+    }
+
+    /* Apps Button */
+    .appbar-apps {
+      position: relative;
+    }
+
+    .appbar-apps-btn {
+      width: var(--kr-shell-icon-size);
+      height: var(--kr-shell-icon-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--kr-shell-icon-color);
+      background: transparent;
+      border: none;
+      padding: 0;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-btn:hover {
+      color: var(--kr-shell-icon-color-hover);
+      background: var(--kr-shell-icon-bg-hover);
+    }
+
+    .appbar-apps-btn--open {
+      color: var(--kr-shell-icon-color-hover);
+      background: var(--kr-shell-icon-bg-hover);
+    }
+
+    .appbar-apps-btn__icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+    }
+
+    .appbar-apps-btn__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    /* Apps Megamenu */
+    .appbar-apps-menu {
+      position: absolute;
+      left: 0;
+      top: 100%;
+      margin-top: 6px;
+      min-width: 320px;
+      min-height: 90vh;
+      max-height: calc(100vh - var(--kr-shell-bar-height));
+      background: #10172a;
+      border: 1px solid var(--kr-shell-menu-border);
+      border-top: none;
+      border-radius: 0 0 8px 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-10px);
+      transition: all 0.15s ease;
+      overflow-y: auto;
+    }
+
+    .appbar-apps-menu--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .appbar-apps-menu__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 16px 16px 24px;
+      border-bottom: 1px solid var(--kr-shell-menu-border);
+    }
+
+    .appbar-apps-menu__title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #ffffff;
+      margin: 0;
+    }
+
+    .appbar-apps-menu__close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-menu__close:hover {
+      background: var(--kr-shell-menu-hover);
+      color: #ffffff;
+    }
+
+    .appbar-apps-menu__close svg {
+      width: 24px;
+      height: 24px;
+      fill: #ffffff;
+    }
+
+    .appbar-apps-menu__content {
+      padding: 16px 8px;
+    }
+
+    .appbar-apps-menu__list {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      max-width: 320px;
+    }
+
+    .appbar-apps-menu__item {
+      display: block;
+      width: 100%;
+      padding: 12px 16px;
+      background: none;
+      border: none;
+      color: #ffffff;
+      font-size: 14px;
+      font-family: inherit;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-menu__item:hover {
+      background: var(--kr-shell-menu-hover);
+    }
+
+    .appbar-apps-menu__item--active,
+    .appbar-apps-menu__item--active:hover {
+      color: var(--kr-shell-icon-color-active);
+    }
+
+    /* Spacer to push user to the right */
+    .appbar-spacer {
+      flex: 1;
+    }
+
+    /* User Section */
+    .appbar-user {
+      position: relative;
+      margin-left: 8px;
+    }
+
+    .appbar-user__avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: #beea4e;
+      color: #0a0f1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      overflow: hidden;
+      border: 2px solid transparent;
+      transition: border-color 0.15s ease;
+    }
+
+    .appbar-user__avatar:hover {
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .appbar-user__avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* User Menu */
+    .appbar-user__menu {
+      position: absolute;
+      right: 0;
+      top: calc(100% + 8px);
+      min-width: 200px;
+      background: var(--kr-shell-menu-bg);
+      border: 1px solid var(--kr-shell-menu-border);
+      border-radius: 8px;
+      padding: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px);
+      transition: all 0.15s ease;
+    }
+
+    .appbar-user__menu--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .appbar-user__header {
+      padding: 8px 12px 12px;
+      border-bottom: 1px solid var(--kr-shell-menu-border);
+      margin-bottom: 8px;
+    }
+
+    .appbar-user__name {
+      font-size: 14px;
+      font-weight: 600;
+      color: #ffffff;
+      margin: 0 0 2px;
+    }
+
+    .appbar-user__email {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      margin: 0;
+    }
+
+    .appbar-user__menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-user__menu-item:hover {
+      background: var(--kr-shell-menu-hover);
+      color: #ffffff;
+    }
+
+    .appbar-user__menu-item--danger {
+      color: #f87171;
+    }
+
+    .appbar-user__menu-item--danger:hover {
+      background: rgba(248, 113, 113, 0.1);
+      color: #f87171;
+    }
+
+    .appbar-user__menu-item__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .appbar-user__menu-item__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .appbar-user__menu-divider {
+      height: 1px;
+      background: var(--kr-shell-menu-border);
+      margin: 8px 0;
+    }
+
+    /* Secondary App Bar */
+    .subbar {
+      height: 30px;
+      background: #364365;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #ffffff;
+    }
+
+    .breadcrumbs a {
+      color: #ffffff;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #ffffff;
+    }
+
+    /* Main Content */
+    .main {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Click outside overlay */
+    .menu-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 999;
+    }
+
+    /* Progress bar */
+    .progress {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      overflow-x: hidden;
+      z-index: 1000;
+      display: none;
+    }
+
+    .progress--loading {
+      display: block;
+    }
+
+    .progress__track {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgb(190 234 78 / 50%); // rgba(190, 234, 78, 0.3);
+    }
+
+    .progress__bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      transform-origin: left center;
+    }
+
+    .progress__bar-inner {
+      display: inline-block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #beea4e;
+    }
+
+    .progress__bar--primary {
+      left: -145.166611%;
+    }
+
+    .progress--loading .progress__bar--primary {
+      animation: progress-primary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--primary .progress__bar-inner {
+      animation: progress-primary-scale 2s infinite linear;
+    }
+
+    .progress__bar--secondary {
+      left: -54.888891%;
+    }
+
+    .progress--loading .progress__bar--secondary {
+      animation: progress-secondary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--secondary .progress__bar-inner {
+      animation: progress-secondary-scale 2s infinite linear;
+    }
+
+    @keyframes progress-primary-translate {
+      0% {
+        transform: translateX(0);
+      }
+      20% {
+        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        transform: translateX(0);
+      }
+      59.15% {
+        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+        transform: translateX(83.67142%);
+      }
+      100% {
+        transform: translateX(200.611057%);
+      }
+    }
+
+    @keyframes progress-primary-scale {
+      0% {
+        transform: scaleX(0.08);
+      }
+      36.65% {
+        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+        transform: scaleX(0.08);
+      }
+      69.15% {
+        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+        transform: scaleX(0.661479);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+
+    @keyframes progress-secondary-translate {
+      0% {
+        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+        transform: translateX(0);
+      }
+      25% {
+        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+        transform: translateX(37.651913%);
+      }
+      48.35% {
+        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+        transform: translateX(84.386165%);
+      }
+      100% {
+        transform: translateX(160.277782%);
+      }
+    }
+
+    @keyframes progress-secondary-scale {
+      0% {
+        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+        transform: scaleX(0.08);
+      }
+      19.15% {
+        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+        transform: scaleX(0.457104);
+      }
+      44.15% {
+        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+        transform: scaleX(0.72796);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+  `,ye([he({type:String})],e.KRShell.prototype,"logo",void 0),ye([he({type:Array})],e.KRShell.prototype,"apps",void 0),ye([he({type:String,attribute:"active-app-id"})],e.KRShell.prototype,"activeAppId",void 0),ye([he({type:Object})],e.KRShell.prototype,"user",void 0),ye([he({type:Array,attribute:"menu-items"})],e.KRShell.prototype,"menuItems",void 0),ye([ue()],e.KRShell.prototype,"isUserMenuOpen",void 0),ye([ue()],e.KRShell.prototype,"isAppsMenuOpen",void 0),ye([ue()],e.KRShell.prototype,"pendingRequests",void 0),e.KRShell=ye([de("kr-shell")],e.KRShell);class $e{constructor(){this._url="https://content.kodaris.com"}static getInstance(){return $e._instance||($e._instance=new $e),$e._instance}fetch(e){let t,i,r=e.url;return 0!==r.indexOf("http")&&(r=this._url+r),e.params&&(r+="?",Object.keys(e.params).forEach(((t,i)=>{i>0&&(r+="&"),r+=`${t}=${e.params[t]}`}))),e||(e={}),e.headers||(e.headers={}),e.headers["Content-Type"]||(e.headers["Content-Type"]="application/json"),e.credentials="include",t=r.indexOf("/api/user/")>-1||r.indexOf("/api/customer/")>-1?fetch(`${this._url}/api/user/customer/authToken`,{credentials:"include"}):Promise.resolve(null),t.then((e=>e?.json())).then((t=>(t?.data&&(e.headers["X-CSRF-TOKEN"]=t.data),fetch(r,e)))).then((e=>(i=e,e.json()))).then((e=>i?.ok?Promise.resolve(e):Promise.reject(e)))}}$e._instance=null;var ke=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};let we=class extends oe{constructor(){super(...arguments),this.label="",this.icon="",this.url="",this.active=!0}connectedCallback(){super.connectedCallback(),this.data&&(this.label=this.data.label||"",this.icon=this.data.icon||"",this.url=this.data.url||"",this.active=!1!==this.data.active)}handleLabelInput(e){const t=e.target;this.label=t.value}handleIconInput(e){const t=e.target;this.icon=t.value}handleUrlInput(e){const t=e.target;this.url=t.value}handleActiveChange(e){this.active=e.target.checked}handleCancel(){this.dialogRef.close(void 0)}handleSave(){this.dialogRef.close({label:this.label,icon:this.icon||void 0,url:this.url||void 0,active:this.active})}handleKeyDown(e){"Enter"===e.key&&this.handleSave()}render(){return L`
+      <h2>Edit Navigation Item</h2>
+
+      <div class="form-group">
+        <kr-text-field
+          label="Label"
+          name="label"
+          .value=${this.label}
+          @input=${this.handleLabelInput}
+          @keydown=${this.handleKeyDown}
+          placeholder="Enter label"
+        ></kr-text-field>
+      </div>
+
+      <div class="form-group">
+        <kr-text-field
+          label="Icon (emoji or SVG)"
+          name="icon"
+          .value=${this.icon}
+          @input=${this.handleIconInput}
+          @keydown=${this.handleKeyDown}
+          placeholder="e.g. 📊 or <svg>...</svg>"
+        ></kr-text-field>
+      </div>
+
+      <div class="form-group">
+        <kr-text-field
+          label="URL"
+          name="url"
+          .value=${this.url}
+          @input=${this.handleUrlInput}
+          @keydown=${this.handleKeyDown}
+          placeholder="e.g. /ci/my-page or https://..."
+        ></kr-text-field>
+      </div>
+
+      <div class="form-group">
+        <div class="checkbox-group">
+          <input
+            type="checkbox"
+            id="active"
+            .checked=${this.active}
+            @change=${this.handleActiveChange}
+          />
+          <label class="checkbox-label" for="active">Visible in navigation</label>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button class="btn-cancel" @click=${this.handleCancel}>Cancel</button>
+        <button class="btn-save" @click=${this.handleSave}>Save</button>
+      </div>
+    `}};we.styles=o`
+    :host {
+      display: block;
+      width: 360px;
+      padding: 24px;
+      color: rgba(255, 255, 255, 0.9);
+
+      /* Dark theme for kr-text-field */
+      --kr-text-field-label-color: rgba(255, 255, 255, 0.7);
+      --kr-text-field-border-color: rgba(255, 255, 255, 0.1);
+      --kr-text-field-bg: rgba(255, 255, 255, 0.05);
+      --kr-text-field-color: #ffffff;
+      --kr-text-field-focus-border-color: #beea4e;
+      --kr-text-field-focus-ring-color: rgba(190, 234, 78, 0.1);
+      --kr-text-field-placeholder-color: rgba(255, 255, 255, 0.3);
+      --kr-text-field-helper-color: rgba(255, 255, 255, 0.5);
+    }
+
+    h2 {
+      margin: 0 0 24px 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    .checkbox-group {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: #beea4e;
+      cursor: pointer;
+    }
+
+    .checkbox-label {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.9);
+      cursor: pointer;
+    }
+
+    .actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      margin-top: 28px;
+    }
+
+    button {
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .btn-cancel {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .btn-cancel:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #ffffff;
+    }
+
+    .btn-save {
+      background: #beea4e;
+      border: none;
+      color: #10172a;
+    }
+
+    .btn-save:hover {
+      background: #d4f472;
+    }
+  `,ke([ue()],we.prototype,"label",void 0),ke([ue()],we.prototype,"icon",void 0),ke([ue()],we.prototype,"url",void 0),ke([ue()],we.prototype,"active",void 0),we=ke([de("kr-nav-item-edit")],we);var Ie=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};e.KRScaffold=class extends oe{constructor(){super(),this.http=$e.getInstance(),this.defaultNavItemIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>',this.navItemsExpanded=new Set,this.navQuery="",this.activeNavItemId=null,this.isNavScrolled=!1,this.isNavOpened=!0,this.isEditing=!1,this.isUserMenuOpen=!1,this.pref={nav:{}},this.draggedNavItemId=null,this.navItemDropTargetId=null,this.navItemDropPosition="above",this.pendingRequests=0,this.originalFetch=null,this.originalXhrOpen=null,this.navItemDragPreview=null,this.navItemDragStartY=0,this.isNavItemDragging=!1,this.navItemDragExpandTimeout=null,this.navInitialized=!1,this.logo="",this.title="",this.scheme="light",this.nav=[],this.navIconsDisplayed=!1,this.navExpanded=!1,this.user=null,this.subbar=!1,this.breadcrumbs=[],this.boundHandleMouseMove=this.handleMouseMove.bind(this),this.boundHandleMouseUp=this.handleMouseUp.bind(this)}connectedCallback(){super.connectedCallback(),this.loadPref(),this.installFetchInterceptor()}updated(e){super.updated(e),e.has("nav")&&this.nav.length>0&&(this.updateActiveNavItem(),this.navExpanded&&!this.navInitialized&&(this.navInitialized=!0,this.getComputedNav().filter((e=>"group"===e.type)).forEach((e=>this.navItemsExpanded.add(e.id)))))}disconnectedCallback(){super.disconnectedCallback(),this.uninstallFetchInterceptor()}installFetchInterceptor(){if(this.originalFetch)return;const e=this;this.originalFetch=window.fetch.bind(window);const t=this.originalFetch;window.fetch=function(...i){return e.pendingRequests++,t(...i).finally((()=>{e.pendingRequests--}))},this.originalXhrOpen=XMLHttpRequest.prototype.open;const i=this.originalXhrOpen;XMLHttpRequest.prototype.open=function(t,r,s=!0,a,n){return e.pendingRequests++,this.addEventListener("loadend",(()=>{e.pendingRequests--}),{once:!0}),i.call(this,t,r,s,a,n)}}uninstallFetchInterceptor(){this.originalFetch&&(window.fetch=this.originalFetch,this.originalFetch=null),this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen,this.originalXhrOpen=null)}getComputedNav(){const e=[];return this.nav.forEach(((t,i)=>{const r=this.pref.nav[t.id];e.push({...t,...r,order:r?.order??t.order??i,parentId:r?.parentId??null}),"group"===t.type&&t.children&&t.children.forEach(((i,r)=>{const s=this.pref.nav[i.id];e.push({...i,...s,order:s?.order??i.order??r,parentId:void 0!==s?.parentId?s.parentId:t.id})}))})),Object.entries(this.pref.nav).forEach((([t,i])=>{t.startsWith("custom")&&i.type&&i.label&&e.push({id:t,type:i.type,label:i.label,icon:i.icon,url:i.url,active:i.active,order:i.order??e.length,parentId:i.parentId??null})})),e}getNavItemChildren(e){let t=this.getComputedNav().filter((t=>t.parentId===e)).sort(((e,t)=>e.order-t.order));if(this.isEditing||(t=t.filter((e=>!1!==e.active))),this.navQuery){const e=this.navQuery.toLowerCase(),i=this.getComputedNav();t=t.filter((t=>"group"===t.type?t.label.toLowerCase().includes(e)||i.some((i=>i.parentId===t.id&&!1!==i.active&&i.label.toLowerCase().includes(e))):t.label.toLowerCase().includes(e)))}return t}handleNavQueryChange(e){this.navQuery=e.target.value,this.navQuery?this.getComputedNav().forEach((e=>{"group"===e.type&&this.navItemsExpanded.add(e.id)})):this.navItemsExpanded.clear()}handleNavQueryClear(){this.navQuery="",this.navItemsExpanded.clear()}handleMenuClick(){this.isNavOpened=!this.isNavOpened}handleNavScroll(e){this.isNavScrolled=e.target.scrollTop>0}toggleNavItem(e){const t=this.shadowRoot?.querySelector(`.nav-item[data-id="${e}"]`),i=t?.nextElementSibling;i&&(this.navItemsExpanded.has(e)?(this.navItemsExpanded.delete(e),i.animate([{height:`${i.scrollHeight}px`},{height:"0px"}],{duration:300,easing:"ease-in-out"}).onfinish=()=>{i.classList.remove("nav-group--expanded")}):(this.navItemsExpanded.add(e),i.classList.add("nav-group--expanded"),i.animate([{height:"0px"},{height:`${i.scrollHeight}px`}],{duration:300,easing:"ease-in-out"})),this.requestUpdate())}handleNavItemClick(e,t){if("group"===t.type)this.toggleNavItem(t.id);else{const i=new CustomEvent("nav-item-click",{detail:{item:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&e.preventDefault()}}updateActiveNavItem(){const e=window.location.pathname,t=this.getComputedNav().filter((e=>"item"===e.type&&e.url));let i=null,r=0;for(const s of t){const t=s.url;e.startsWith(t)&&t.length>r&&(i=s,r=t.length)}i?(this.activeNavItemId=i.id,i.parentId&&this.navItemsExpanded.add(i.parentId)):this.activeNavItemId=null}startEditing(){this.isEditing=!0}cancelEditing(){this.isEditing=!1,this.loadPref()}resetPref(){this.pref.nav={}}savePref(){const e=this.pref.uuid?`/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`:"/api/system/preference/json/scaffold?global=true";this.http.fetch({url:e,method:this.pref.uuid?"PUT":"POST",body:JSON.stringify({nav:this.pref.nav})}).then((e=>{this.pref=e.data,this.isEditing=!1})).catch((e=>{console.error("Failed to save nav customizations:",e)}))}loadPref(){this.http.fetch({url:"/api/system/preference/json/scaffold?global=true",method:"GET"}).then((e=>{const t=e?.data?.[0];t&&(this.pref=t)})).catch((()=>{}))}handleNavItemContextMenu(e,i){this.isEditing&&(e.preventDefault(),t.KRContextMenu.open({x:e.clientX,y:e.clientY,items:[{id:"edit",label:"Edit Item"},{id:"divider-1",label:"",divider:!0},{id:"add-above",label:"Add Item Above"},{id:"add-below",label:"Add Item Below"}]}).then((e=>{if(e)switch(e.id){case"edit":this.openNavItemEdit(i);break;case"add-above":this.addNavItem(i,"above");break;case"add-below":this.addNavItem(i,"below")}})))}openNavItemEdit(e){t.KRDialog.open(we,{data:e}).afterClosed().then((t=>{const i=t;i&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id]={...this.pref.nav[e.id],...i},this.requestUpdate())}))}addNavItem(e,t){const i=`custom-${Date.now()}`,r=this.getComputedNav().filter((t=>t.parentId===e.parentId)).sort(((e,t)=>e.order-t.order)),s=r.findIndex((t=>t.id===e.id)),a="above"===t?s:s+1;r.forEach(((e,t)=>{t>=a&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id].order=t+1)}));const n={id:i,type:"item",label:"New Item",order:a,parentId:e.parentId,active:!0};this.pref.nav[i]=n,this.requestUpdate(),this.openNavItemEdit(n)}handleNavItemMouseDown(e,t){this.isEditing&&(e.preventDefault(),this.draggedNavItemId=t.id,this.navItemDragStartY=e.clientY,this.isNavItemDragging=!1,document.addEventListener("mousemove",this.boundHandleMouseMove),document.addEventListener("mouseup",this.boundHandleMouseUp))}handleMouseMove(e){if(this.draggedNavItemId){if(!this.isNavItemDragging&&Math.abs(e.clientY-this.navItemDragStartY)>5){this.isNavItemDragging=!0,this.classList.add("kr-scaffold--dragging");const t=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));t&&(this.navItemDragPreview=document.createElement("div"),this.navItemDragPreview.className="nav-item-drag-preview",this.navItemDragPreview.textContent=t.label,this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px",this.shadowRoot?.appendChild(this.navItemDragPreview))}this.isNavItemDragging&&(this.navItemDragPreview&&(this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px"),this.updateNavItemDropTarget(e))}}handleMouseUp(){document.removeEventListener("mousemove",this.boundHandleMouseMove),document.removeEventListener("mouseup",this.boundHandleMouseUp),this.isNavItemDragging&&this.navItemDropTargetId&&this.executeNavItemDrop(),this.draggedNavItemId=null,this.navItemDropTargetId=null,this.isNavItemDragging=!1,this.classList.remove("kr-scaffold--dragging"),this.navItemDragPreview&&(this.navItemDragPreview.remove(),this.navItemDragPreview=null),this.clearNavItemDragExpandTimeout(),this.requestUpdate()}updateNavItemDropTarget(e){const t=this.shadowRoot?.querySelectorAll(".nav-item[data-id]");if(!t)return;let i=!1;t.forEach((t=>{const r=t.getBoundingClientRect(),s=t.getAttribute("data-id");if(!s||s===this.draggedNavItemId)return;if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)return;const a=this.getComputedNav().find((e=>e.id===s));if(!a)return;const n=e.clientY-r.top;let o;"group"===a.type?n<r.height/3?(o="above",this.clearNavItemDragExpandTimeout()):n>2*r.height/3?(o="below",this.clearNavItemDragExpandTimeout()):(o="center",this.navItemsExpanded.has(a.id)||this.navItemDragExpandTimeout||this.expandNavGroupOnDrag(a.id)):(o=n<r.height/2?"above":"below",this.clearNavItemDragExpandTimeout());const l="center"===o?a.id:a.parentId,d=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));if(l===this.draggedNavItemId||"group"===d?.type&&null!==l)return this.navItemDropTargetId=null,void this.clearNavItemDragExpandTimeout();this.navItemDropTargetId=a.id,this.navItemDropPosition=o,i=!0})),i||(this.navItemDropTargetId=null,this.clearNavItemDragExpandTimeout()),this.requestUpdate()}clearNavItemDragExpandTimeout(){this.navItemDragExpandTimeout&&(clearTimeout(this.navItemDragExpandTimeout),this.navItemDragExpandTimeout=null)}expandNavGroupOnDrag(e){this.navItemDragExpandTimeout=window.setTimeout((()=>{this.navItemDropTargetId===e&&"center"===this.navItemDropPosition&&(this.navItemsExpanded.add(e),this.requestUpdate()),this.navItemDragExpandTimeout=null}),500)}executeNavItemDrop(){if(!this.draggedNavItemId||!this.navItemDropTargetId)return;const e=this.getComputedNav(),t=e.find((e=>e.id===this.draggedNavItemId)),i=e.find((e=>e.id===this.navItemDropTargetId));if(!t||!i)return;let r;if("center"===this.navItemDropPosition&&"group"===i.type){if(i.id===this.draggedNavItemId)return;r=i.id}else r=i.parentId;if(r===this.draggedNavItemId)return;const s=e.filter((e=>e.parentId===r&&e.id!==this.draggedNavItemId)).sort(((e,t)=>e.order-t.order)),a=this.pref.nav;let n;if("center"===this.navItemDropPosition)n=s.length>0?Math.max(...s.map((e=>e.order)))+1:0;else{const e=s.findIndex((e=>e.id===i.id));n=-1===e?0:"above"===this.navItemDropPosition?e:e+1,s.forEach(((e,t)=>{a[e.id]||(a[e.id]={}),a[e.id].order=t>=n?t+1:t}))}a[this.draggedNavItemId]||(a[this.draggedNavItemId]={}),a[this.draggedNavItemId].order=n,a[this.draggedNavItemId].parentId=r,this.pref.nav=a,this.requestUpdate()}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen}closeUserMenu(){this.isUserMenuOpen=!1}handleCustomize(){this.closeUserMenu(),this.startEditing()}renderNormalFooter(){if(!this.user)return F;const e=this.user.name.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2);return L`
+      <div class="user-menu-container">
+        ${this.isUserMenuOpen?L`
+          <div class="user-menu">
+            <button class="user-menu__item" @click=${this.handleCustomize}>
+              Customize Navigation
+            </button>
+          </div>
+        `:F}
+        <div class="user" @click=${this.toggleUserMenu}>
+          <div class="user__avatar">
+            ${this.user.avatar?L`<img src=${this.user.avatar} alt=${this.user.name} />`:e}
+          </div>
+          <div class="user__info">
+            <div class="user__name">${this.user.name}</div>
+            ${this.user.email?L`<div class="user__email">${this.user.email}</div>`:F}
+          </div>
+        </div>
+      </div>
+    `}renderEditFooter(){return L`
+      <div class="edit-actions">
+        <button class="edit-actions__btn edit-actions__btn--primary" @click=${this.savePref}>
+          Save
+        </button>
+        <div class="edit-actions__secondary">
+          <button class="edit-actions__btn" @click=${this.resetPref}>
+            Reset
+          </button>
+          <button class="edit-actions__btn" @click=${this.cancelEditing}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    `}renderNavItem(e,t=!1){if("section"===e.type)return L`
+        <div class="nav-section">${e.label}</div>
+      `;if("group"===e.type){const t=this.getNavItemChildren(e.id);return L`
+        <button
+          class=${be({"nav-item":!0,"nav-item--expanded":this.navItemsExpanded.has(e.id),"nav-item--hidden":this.isEditing&&!1===e.active,"nav-item--drop-above":this.navItemDropTargetId===e.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===e.id&&"below"===this.navItemDropPosition,"nav-item--drop-center":this.navItemDropTargetId===e.id&&"center"===this.navItemDropPosition})}
+          data-id="${e.id}"
+          @mousedown=${t=>this.handleNavItemMouseDown(t,e)}
+          @click=${t=>this.handleNavItemClick(t,e)}
+          @contextmenu=${t=>this.handleNavItemContextMenu(t,e)}
+        >
+          ${this.navIconsDisplayed?L`<span class="nav-item__icon">${_e(e.icon||this.defaultNavItemIcon)}</span>`:F}
+          <span class="nav-item__label">${e.label}</span>
+          <svg
+            class="nav-item__chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+        <div class=${be({"nav-group":!0,"nav-group--expanded":this.navItemsExpanded.has(e.id)})}>
+          ${t.map((e=>this.renderNavItem(e,!0)))}
+        </div>
+      `}return L`
+      <a
+        class=${be({"nav-item":!0,"nav-item--active":this.activeNavItemId===e.id,"nav-item--hidden":this.isEditing&&!1===e.active,"nav-item--drop-above":this.navItemDropTargetId===e.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===e.id&&"below"===this.navItemDropPosition})}
+        data-id="${e.id}"
+        href=${e.url||"#"}
+        @mousedown=${t=>this.handleNavItemMouseDown(t,e)}
+        @click=${t=>this.handleNavItemClick(t,e)}
+        @contextmenu=${t=>this.handleNavItemContextMenu(t,e)}
+      >
+        ${this.navIconsDisplayed&&!t?L`<span class="nav-item__icon">${_e(e.icon||this.defaultNavItemIcon)}</span>`:F}
+        <span class="nav-item__label">${e.label}</span>
+      </a>
+    `}render(){const e=this.getNavItemChildren(null),t=this.getComputedNav().filter((e=>null===e.parentId)).length;return L`
+      <div class=${be({progress:!0,"progress--loading":this.pendingRequests>0})}>
+        <div class="progress__track"></div>
+        <div class="progress__bar progress__bar--primary">
+          <span class="progress__bar-inner"></span>
+        </div>
+        <div class="progress__bar progress__bar--secondary">
+          <span class="progress__bar-inner"></span>
+        </div>
+      </div>
+      
+      ${this.subbar?L`
+        <kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
+          <slot name="subbar"></slot>
+        </kr-subbar>
+      `:F}
+
+      <div class="wrapper">
+        <nav class=${be({nav:!0,"nav--scrolled":this.isNavScrolled,"nav--opened":!this.subbar||this.isNavOpened})}>
+          <div class="nav-header">
+            ${this.title?L`<span class="nav-title">${this.title}</span>`:this.logo?L`<img class="nav-logo" src=${this.logo} alt="Logo" />`:F}
+          </div>
+          <div class="nav-content" @scroll=${this.handleNavScroll}>
+            ${t>20?L`
+              <div class="nav-search">
+                <div class="nav-search__wrapper">
+                  <span class="nav-search__icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                    </svg>
+                  </span>
+                  <input
+                    class="nav-search__input"
+                    type="text"
+                    placeholder="Search..."
+                    .value=${this.navQuery}
+                    @input=${this.handleNavQueryChange}
+                  />
+                  ${this.navQuery?L`
+                    <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                      </svg>
+                    </button>
+                  `:F}
+                </div>
+              </div>
+            `:F}
+            <div class="nav-items">
+              ${e.map((e=>this.renderNavItem(e)))}
+            </div>
+          </div>
+          <!-- <div class="nav-footer">
+            ${this.isEditing?this.renderEditFooter():this.renderNormalFooter()}
+          </div> -->
+        </nav>
+
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+      
+    `}},e.KRScaffold.styles=o`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      font-size: 14px;
+      --kr-scaffold-nav-width: 210px;
+
+      /* Default to light scheme */
+      --kr-scaffold-nav-bg: #ffffff;
+      --kr-scaffold-nav-text: #000000;
+      --kr-scaffold-nav-text-active: #000000;
+      --kr-scaffold-nav-hover: #f3f4f6;
+      --kr-scaffold-nav-active-bg: #e5e7eb;
+      --kr-scaffold-nav-border: rgb(229, 229, 228);
+      --kr-scaffold-nav-divider: #e5e7eb;
+      --kr-scaffold-nav-search-bg: #f3f4f6;
+      --kr-scaffold-nav-search-focus-bg: #ffffff;
+      --kr-scaffold-nav-search-focus-border: #d1d5db;
+    }
+
+    /* Dark scheme */
+    :host([scheme="dark"]) {
+      --kr-scaffold-nav-bg: #10172a;
+      --kr-scaffold-nav-text: rgb(255 255 255 / 80%);
+      --kr-scaffold-nav-text-active: #ffffff;
+      --kr-scaffold-nav-hover: rgba(255, 255, 255, 0.05);
+      --kr-scaffold-nav-active-bg: rgb(255 255 255 / 12%);
+      --kr-scaffold-nav-border: transparent;
+      --kr-scaffold-nav-divider: rgba(255, 255, 255, 0.06);
+      --kr-scaffold-nav-search-bg: rgba(255, 255, 255, 0.15);
+      --kr-scaffold-nav-search-focus-bg: rgba(255, 255, 255, 0.2);
+      --kr-scaffold-nav-search-focus-border: rgba(255, 255, 255, 0.3);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    /* Nav */
+    .nav {
+      width: var(--kr-scaffold-nav-width);
+      background: var(--kr-scaffold-nav-bg);
+      color: var(--kr-scaffold-nav-text);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow: hidden;
+      border-right: 1px solid var(--kr-scaffold-nav-border);
+      transition: margin-left 0.3s ease;
+      margin-left: calc(-1 * var(--kr-scaffold-nav-width));
+    }
+
+    .nav--opened {
+      margin-left: 0;
+    }
+
+    .wrapper {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .nav-header {
+      height: 64px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+      transition: box-shadow 0.2s ease;
+    }
+
+    .nav--scrolled .nav-header {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .nav-logo {
+      max-width: 100%;
+      height: 32px;
+    }
+
+    .nav-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--kr-scaffold-nav-text-active);
+      letter-spacing: .2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .nav-search {
+      padding: 4px 0 8px;
+    }
+
+    .nav-search__wrapper {
+      display: flex;
+      align-items: center;
+      background: var(--kr-scaffold-nav-search-bg);
+      border-radius: 8px;
+      padding: 0 12px;
+      height: 40px;
+      gap: 8px;
+      border: 1px solid transparent;
+      transition: all 0.15s ease;
+    }
+
+    .nav-search__wrapper:focus-within {
+      background: var(--kr-scaffold-nav-search-focus-bg);
+      border-color: var(--kr-scaffold-nav-search-focus-border);
+    }
+
+    .nav-search__icon {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      opacity: 0.6;
+    }
+
+    .nav-search__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .nav-search__input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      color: var(--kr-scaffold-nav-text-active);
+      font-size: 13px;
+      font-family: inherit;
+      min-width: 0;
+    }
+
+    .nav-search__input::placeholder {
+      color: var(--kr-scaffold-nav-text);
+      opacity: 0.7;
+    }
+
+    .nav-search__clear {
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      background: none;
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    .nav-search__clear:hover {
+      opacity: 1;
+    }
+
+    .nav-search__clear svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .nav-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 9px 0.75rem 8px;
+    }
+
+    .nav-footer {
+      padding: 12px;
+      border-top: 1px solid var(--kr-scaffold-nav-divider);
+    }
+
+    .user {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    .user:hover {
+      background: var(--kr-scaffold-nav-hover);
+    }
+
+    .user__avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--kr-scaffold-avatar-bg, #beea4e);
+      color: var(--kr-scaffold-avatar-text, #10172a);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .user__avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .user__info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .user__name {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--kr-scaffold-nav-text-active);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user__email {
+      font-size: 12px;
+      color: var(--kr-scaffold-nav-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user-menu-container {
+      position: relative;
+    }
+
+    .user-menu {
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      right: 0;
+      margin-bottom: 8px;
+      background: var(--kr-scaffold-nav-bg);
+      border: 1px solid var(--kr-scaffold-nav-divider);
+      border-radius: 8px;
+      padding: 4px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .user-menu__item {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .user-menu__item:hover {
+      background: var(--kr-scaffold-nav-hover);
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .user-menu__divider {
+      height: 1px;
+      background: var(--kr-scaffold-nav-divider);
+      margin: 4px 0;
+    }
+
+    /* Main */
+    .main {
+      flex: 1;
+      min-width: 0;
+      overflow-y: auto;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .breadcrumbs {
+      height: 32px;
+      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #6b7280;
+      background: #f9fafb;
+      border-bottom: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs a {
+      color: #6b7280;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      color: #111827;
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #d1d5db;
+    }
+
+    .breadcrumbs__current {
+      color: #111827;
+      font-weight: 500;
+    }
+
+    .main__content {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    /* Nav Items */
+    .nav-items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 0 12px;
+      height: 32px;
+      border-radius: 8px;
+      color: var(--kr-scaffold-nav-text);
+      text-decoration: none;
+      cursor: pointer;
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      font-weight: 400;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+
+    .nav-item:hover {
+      background: #F3F7FC;
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .nav-item--active,
+    .nav-item--active:hover {
+      background: #e1e9f6;
+      color: #1a2332;
+      font-weight: 500;
+    }
+
+    .nav-item__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .nav-item__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .nav-item__label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 0.01em;
+    }
+
+    .nav-item__chevron {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.2s ease;
+      transform: rotate(-90deg);
+      stroke: currentColor;
+    }
+
+    .nav-item--expanded .nav-item__chevron {
+      transform: rotate(0deg);
+    }
+
+    .nav-group {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 0;
+    }
+
+    .nav-group--expanded {
+      height: auto;
+    }
+
+    .nav-group .nav-item {
+      padding: 0 12px 0 44px;
+      height: 32px;
+      font-size: 13px;
+      font-weight: 400;
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
+    .nav-group .nav-item:first-child {
+      margin-top: 0;
+    }
+
+    /* Nav items in groups when icons are hidden */
+    :host(:not([nav-icons-displayed])) .nav-group .nav-item {
+      padding-left: 24px;
+    }
+
+    /* Sections */
+    .nav-section {
+      padding: 16px 12px 8px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--kr-scaffold-nav-text);
+      opacity: 0.6;
+    }
+
+    .nav-section:first-child {
+      padding-top: 0;
+    }
+
+    /* Edit mode actions */
+    .edit-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .edit-actions__btn {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      background: var(--kr-scaffold-nav-hover);
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      font-size: 13px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .edit-actions__btn:hover {
+      background: var(--kr-scaffold-nav-active-bg);
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .edit-actions__btn--primary {
+      background: #beea4e;
+      color: #10172a;
+    }
+
+    .edit-actions__btn--primary:hover {
+      background: #d4f472;
+      color: #10172a;
+    }
+
+    .edit-actions__secondary {
+      display: flex;
+      gap: 8px;
+    }
+
+    .edit-actions__secondary .edit-actions__btn {
+      flex: 1;
+    }
+
+    /* Hidden/inactive items in edit mode */
+    .nav-item--hidden {
+      opacity: 0.4;
+      font-style: italic;
+    }
+
+    .nav-item--hidden:hover {
+      opacity: 0.6;
+    }
+
+    /* Dragging state */
+    :host(.kr-scaffold--dragging),
+    :host(.kr-scaffold--dragging) * {
+      cursor: grabbing;
+      user-select: none;
+    }
+
+    .nav-item-drag-preview {
+      position: fixed;
+      pointer-events: none;
+      z-index: 1000;
+      opacity: 0.9;
+      background: var(--kr-scaffold-nav-bg);
+      border: 1px solid var(--kr-scaffold-nav-divider);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+      padding: 0 12px;
+      height: 40px;
+      min-width: 200px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      color: var(--kr-scaffold-nav-text-active);
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    /* Drop indicator */
+    .nav-item--drop-above,
+    .nav-item--drop-below,
+    .nav-item--drop-center {
+      position: relative;
+    }
+
+    .nav-item--drop-above::before,
+    .nav-item--drop-below::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #beea4e;
+    }
+
+    .nav-item--drop-above::before {
+      top: 0;
+    }
+
+    .nav-item--drop-below::after {
+      bottom: 0;
+    }
+
+    .nav-item--drop-center {
+      background: var(--kr-scaffold-nav-active-bg);
+    }
+
+    .breadcrumbs {
+      height: 32px;
+      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #6b7280;
+      //background: #f9fafb;
+      background: #beea4e;
+      border-top: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs a {
+      //color: #6b7280;
+      color: #10172a;
+      font-size: 13px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      color: #111827;
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #d1d5db;
+    }
+
+    .breadcrumbs__current {
+      color: #111827;
+      font-weight: 500;
+    }
+
+    /* Progress bar */
+    .progress {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      overflow-x: hidden;
+      z-index: 1000;
+      display: none;
+    }
+
+    .progress--loading {
+      display: block;
+    }
+
+    .progress__track {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgba(190, 234, 78, 0.3);
+    }
+
+    .progress__bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      transform-origin: left center;
+    }
+
+    .progress__bar-inner {
+      display: inline-block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #beea4e;
+    }
+
+    .progress__bar--primary {
+      left: -145.166611%;
+    }
+
+    .progress--loading .progress__bar--primary {
+      animation: progress-primary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--primary .progress__bar-inner {
+      animation: progress-primary-scale 2s infinite linear;
+    }
+
+    .progress__bar--secondary {
+      left: -54.888891%;
+    }
+
+    .progress--loading .progress__bar--secondary {
+      animation: progress-secondary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--secondary .progress__bar-inner {
+      animation: progress-secondary-scale 2s infinite linear;
+    }
+
+    @keyframes progress-primary-translate {
+      0% {
+        transform: translateX(0);
+      }
+      20% {
+        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        transform: translateX(0);
+      }
+      59.15% {
+        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+        transform: translateX(83.67142%);
+      }
+      100% {
+        transform: translateX(200.611057%);
+      }
+    }
+
+    @keyframes progress-primary-scale {
+      0% {
+        transform: scaleX(0.08);
+      }
+      36.65% {
+        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+        transform: scaleX(0.08);
+      }
+      69.15% {
+        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+        transform: scaleX(0.661479);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+
+    @keyframes progress-secondary-translate {
+      0% {
+        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+        transform: translateX(0);
+      }
+      25% {
+        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+        transform: translateX(37.651913%);
+      }
+      48.35% {
+        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+        transform: translateX(84.386165%);
+      }
+      100% {
+        transform: translateX(160.277782%);
+      }
+    }
+
+    @keyframes progress-secondary-scale {
+      0% {
+        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+        transform: scaleX(0.08);
+      }
+      19.15% {
+        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+        transform: scaleX(0.457104);
+      }
+      44.15% {
+        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+        transform: scaleX(0.72796);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+  `,Ie([ue()],e.KRScaffold.prototype,"navItemsExpanded",void 0),Ie([ue()],e.KRScaffold.prototype,"navQuery",void 0),Ie([ue()],e.KRScaffold.prototype,"activeNavItemId",void 0),Ie([ue()],e.KRScaffold.prototype,"isNavScrolled",void 0),Ie([ue()],e.KRScaffold.prototype,"isNavOpened",void 0),Ie([ue()],e.KRScaffold.prototype,"isEditing",void 0),Ie([ue()],e.KRScaffold.prototype,"isUserMenuOpen",void 0),Ie([ue()],e.KRScaffold.prototype,"pref",void 0),Ie([ue()],e.KRScaffold.prototype,"draggedNavItemId",void 0),Ie([ue()],e.KRScaffold.prototype,"navItemDropTargetId",void 0),Ie([ue()],e.KRScaffold.prototype,"navItemDropPosition",void 0),Ie([ue()],e.KRScaffold.prototype,"pendingRequests",void 0),Ie([he({type:String})],e.KRScaffold.prototype,"logo",void 0),Ie([he({type:String})],e.KRScaffold.prototype,"title",void 0),Ie([he({type:String,reflect:!0})],e.KRScaffold.prototype,"scheme",void 0),Ie([he({type:Array})],e.KRScaffold.prototype,"nav",void 0),Ie([he({type:Boolean,attribute:"nav-icons-displayed",reflect:!0})],e.KRScaffold.prototype,"navIconsDisplayed",void 0),Ie([he({type:Boolean,attribute:"nav-expanded"})],e.KRScaffold.prototype,"navExpanded",void 0),Ie([he({type:Object})],e.KRScaffold.prototype,"user",void 0),Ie([he({type:Boolean})],e.KRScaffold.prototype,"subbar",void 0),Ie([he({type:Array})],e.KRScaffold.prototype,"breadcrumbs",void 0),e.KRScaffold=Ie([de("kr-scaffold")],e.KRScaffold);var Ae=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};e.KRScreenNav=class extends oe{constructor(){super(...arguments),this.title="",this.subtitle="",this.backUrl="",this.navItems=[],this.activeId=""}handleNavItemClick(e,t){const i=new CustomEvent("nav-item-click",{detail:{item:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&e.preventDefault()}updateActiveNavItem(){const e=window.location.pathname,t=this.navItems.find((t=>{if(!t.url)return!1;if(t.url.startsWith("./")){const i=t.url.replace(/^\.\//,"");return e.endsWith("/"+i)}return e===t.url||e.startsWith(t.url+"/")}));t&&(this.activeId=t.id)}render(){return L`
+      <nav class="nav">
+        ${this.title?L`
+          <div class="nav-header">
+            <div class="nav-header__text">
+              ${this.subtitle?L`<div class="nav-header__subtitle">${this.subtitle}</div>`:F}
+              <div class="nav-header__title">${this.title}</div>
+            </div>
+          </div>
+        `:F}
+        <div class="nav-content">
+          <div class="nav-items">
+            ${this.navItems.map((e=>L`
+                <a
+                  class="nav-item ${e.id===this.activeId?"nav-item--active":""}"
+                  href=${e.url||"#"}
+                  @click=${t=>this.handleNavItemClick(t,e)}
+                >
+                  ${e.label}
+                </a>
+              `))}
+          </div>
+        </div>
+      </nav>
+      <main class="content">
+        <div class="content__main">
+          <slot></slot>
+        </div>
+        <!--<div class="breadcrumbs">
+          <a href="/crm">CRM</a>
+          <span class="breadcrumbs__separator">/</span>
+          <a href="/crm/companies">Companies</a>
+          <span class="breadcrumbs__separator">/</span>
+          <span class="breadcrumbs__current">Acme Corporation</span>
+        </div>-->
+      </main>
+    `}},e.KRScreenNav.styles=o`
+    :host {
+      display: flex;
+      height: 100%;
+    }
+
+    .nav {
+      width: 200px;
+      background: #F3F7FC;
+      //border-right: 1px solid #000000;
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+    }
+
+    .nav-header {
+      padding: 20px 16px 16px;
+    }
+
+    .nav-header__text {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .nav-header__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.3;
+    }
+
+    .nav-header__subtitle {
+      font-size: 12px;
+      font-weight: 400;
+      color: rgb(0 0 0 / 70%);
+      line-height: 1;
+    }
+
+    .nav-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 0 0.75rem;
+    }
+
+    .nav-items {
+      display: flex;
+      flex-direction: column;
+      padding: 0 8px;
+    }
+
+    .nav-item {
+      display: block;
+      padding: 0 12px;
+      height: 40px;
+      line-height: 40px;
+      letter-spacing: 0.13px;
+      color: rgb(32, 33, 36);
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 8px;
+      transition: all 0.15s ease;
+    }
+
+    .nav-item:hover {
+      background: rgba(0, 0, 0, 0.04);
+      color: #163052;
+    }
+
+    .nav-item--active {
+      background: rgba(22, 48, 82, 0.08);
+      color: #163052;
+      font-weight: 600;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .breadcrumbs {
+      height: 32px;
+      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #6b7280;
+      //background: #f9fafb;
+      background: #beea4e;
+      border-top: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs a {
+      //color: #6b7280;
+      color: #10172a;
+      font-size: 13px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      color: #111827;
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #d1d5db;
+    }
+
+    .breadcrumbs__current {
+      color: #111827;
+      font-weight: 500;
+    }
+
+    .content__main {
+      flex: 1;
+      overflow-y: auto;
+    }
+  `,Ae([he({type:String})],e.KRScreenNav.prototype,"title",void 0),Ae([he({type:String})],e.KRScreenNav.prototype,"subtitle",void 0),Ae([he({type:String})],e.KRScreenNav.prototype,"backUrl",void 0),Ae([he({type:Array})],e.KRScreenNav.prototype,"navItems",void 0),Ae([he({type:String})],e.KRScreenNav.prototype,"activeId",void 0),e.KRScreenNav=Ae([de("kr-screen-nav")],e.KRScreenNav);var Ee=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};e.KRScreenDetail=class extends oe{constructor(){super(...arguments),this.title=""}render(){return L`
+      <div class="header">
+        <h2 class="header__title">${this.title}</h2>
+        <div class="header__actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+      <div class="content">
+        <div class="content__inner">
+          <slot></slot>
+        </div>
+      </div>
+    `}},e.KRScreenDetail.styles=o`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .header {
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1.5rem;
+      background: #ffffff;
+      border-bottom: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .header__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0;
+    }
+
+    .header__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1.5rem;
+      display: flex;
+      justify-content: center;
+    }
+
+    .content__inner {
+      width: 100%;
+      max-width: 700px;
+    }
+  `,Ee([he({type:String})],e.KRScreenDetail.prototype,"title",void 0),e.KRScreenDetail=Ee([de("kr-screen-detail")],e.KRScreenDetail);var Se=function(e,t,i,r){var s,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};e.KRSubbar=class extends oe{constructor(){super(...arguments),this.breadcrumbs=[],this.menu=!1}_handleMenuClick(){this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}render(){return L`
+      ${this.menu?L`
+        <div class="menu" @click=${this._handleMenuClick}>
+          <svg class="menu__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </div>
+      `:F}
+      <div class="breadcrumbs">
+        ${this.breadcrumbs.map(((e,t)=>L`
+            ${t>0?L`<span class="breadcrumb-separator">/</span>`:""}
+            <a
+              class=${be({breadcrumb:!0,"breadcrumb--current":t===this.breadcrumbs.length-1})}
+              href=${e.url||""}
+            >${e.label}</a>
+          `))}
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+      
+    `}},e.KRSubbar.styles=o`
+    :host {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      height: 40px;
+      background: #ffffff;
+      border-bottom: 1px solid rgb(229, 229, 228);
+      align-items: center;
+      padding: 0 16px;
+      width: 100%;
+    }
+
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      flex: 1;
+    }
+
+    .breadcrumb {
+      color: #000000;
+      text-decoration: none;
+      cursor: pointer;
+      font-size: 13px;
+    }
+
+    .breadcrumb:hover {
+      text-decoration: underline;
+    }
+
+    .breadcrumb--current {
+      cursor: default;
+    }
+
+    .breadcrumb--current:hover {
+      text-decoration: none;
+    }
+
+    .breadcrumb-separator {
+      color: #9ca3af;
+      font-size: 12px;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    .menu {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+
+    .menu__icon {
+      width: 18px;
+      height: 18px;
+    }
+  `,Se([he({type:Array})],e.KRSubbar.prototype,"breadcrumbs",void 0),Se([he({type:Boolean})],e.KRSubbar.prototype,"menu",void 0),e.KRSubbar=Se([de("kr-subbar")],e.KRSubbar)})),function(e){Object.keys(e).forEach((function(t){t.startsWith("KR")&&"function"==typeof e[t]&&(e[t.slice(2)]=e[t],delete e[t])}))}(krApp);
+//# sourceMappingURL=krubble-app.umd.min.js.map