@kodaris/krubble-app-components 1.0.0

package/dist/krubble-app.umd.js

@@ -0,0 +1,3577 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kodaris/krubble-components')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@kodaris/krubble-components'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.krApp = {}, global.kr));
+})(this, (function (exports, krubbleComponents) { 'use strict';
+
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const t$3=globalThis,e$5=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const{is:i$3,defineProperty:e$4,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$3,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$3(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$4(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$3(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.1");
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const t$2=globalThis,i$2=t$2.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h,n$1=`<${o$3}>`,r$2=document,l=()=>r$2.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$2.createTreeWalker(r$2,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$3+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$3)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$3)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$2).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$2.litHtmlPolyfillSupport;j?.(N,R),(t$2.litHtmlVersions??=[]).push("3.3.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const s=globalThis;let i$1 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$2=s.litElementPolyfillSupport;o$2?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.1");
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const o$1={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1},r$1=(t=o$1,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */function r(r){return n({...r,state:true,attribute:false})}
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+  /**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const e$1=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */class e extends i{constructor(i){if(super(i),this.it=E,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===E||null==r)return this._t=void 0,this.it=r;if(r===T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$2(e);
+
+  var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * Global shell component with app bar for app switching.
+   *
+   * The shell provides a horizontal app bar across the top of the viewport containing:
+   * - Logo/home link on the left
+   * - App switcher icons in the middle
+   * - User avatar/menu on the right
+   *
+   * This allows individual apps (using kr-scaffold) to utilize the full width
+   * of the browser window while maintaining consistent global navigation.
+   *
+   * @slot - The main content (typically kr-scaffold with the app)
+   *
+   * @property {string} logo - URL for the logo image
+   * @property {KRApp[]} apps - Available applications for the switcher
+   * @property {string} activeAppId - ID of the currently active app
+   * @property {KRShellUser} user - User profile data
+   * @property {KRShellMenuItem[]} menuItems - Custom menu items for user menu
+   *
+   * @fires app-click - When an app icon is clicked. Detail: { app: KRApp }
+   * @fires menu-item-click - When a menu item is clicked. Detail: { item: KRShellMenuItem }
+   * @fires logout - When logout is clicked
+   */
+  exports.KRShell = class KRShell extends i$1 {
+      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 = false;
+          this.isAppsMenuOpen = false;
+          this.pendingRequests = 0;
+          this.originalFetch = null;
+          this.originalXhrOpen = null;
+          // Default icons
+          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();
+      }
+      /**
+       * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
+       * Updates `pendingRequests` state when requests start/complete.
+       */
+      installFetchInterceptor() {
+          if (this.originalFetch)
+              return;
+          const shell = this;
+          // Intercept fetch
+          this.originalFetch = window.fetch.bind(window);
+          const originalFetch = this.originalFetch;
+          window.fetch = function (...args) {
+              shell.pendingRequests++;
+              return originalFetch(...args).finally(() => {
+                  shell.pendingRequests--;
+              });
+          };
+          // Intercept XMLHttpRequest
+          this.originalXhrOpen = XMLHttpRequest.prototype.open;
+          const originalXhrOpen = this.originalXhrOpen;
+          XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
+              shell.pendingRequests++;
+              this.addEventListener('loadend', () => {
+                  shell.pendingRequests--;
+              }, { once: true });
+              return originalXhrOpen.call(this, method, url, async, username, password);
+          };
+      }
+      /**
+       * Restores the original fetch and XMLHttpRequest functions.
+       */
+      uninstallFetchInterceptor() {
+          if (this.originalFetch) {
+              window.fetch = this.originalFetch;
+              this.originalFetch = null;
+          }
+          if (this.originalXhrOpen) {
+              XMLHttpRequest.prototype.open = this.originalXhrOpen;
+              this.originalXhrOpen = null;
+          }
+      }
+      handleLogoClick() {
+          this.dispatchEvent(new CustomEvent('logo-click', {
+              bubbles: true,
+              composed: true,
+          }));
+      }
+      toggleUserMenu() {
+          this.isUserMenuOpen = !this.isUserMenuOpen;
+          this.isAppsMenuOpen = false;
+      }
+      closeUserMenu() {
+          this.isUserMenuOpen = false;
+      }
+      toggleAppsMenu() {
+          this.isAppsMenuOpen = !this.isAppsMenuOpen;
+          this.isUserMenuOpen = false;
+      }
+      closeAppsMenu() {
+          this.isAppsMenuOpen = false;
+      }
+      handleMenuItemClick(item) {
+          this.closeUserMenu();
+          this.dispatchEvent(new CustomEvent('menu-item-click', {
+              detail: { item },
+              bubbles: true,
+              composed: true,
+          }));
+      }
+      handleLogout() {
+          this.closeUserMenu();
+          this.dispatchEvent(new CustomEvent('logout', {
+              bubbles: true,
+              composed: true,
+          }));
+      }
+      renderAppsMenu() {
+          return x `
+      <div class="appbar-apps">
+        ${this.isAppsMenuOpen ? x `
+          <div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
+        ` : E}
+
+        <button
+          class=${e$1({
+            'appbar-apps-btn': true,
+            'appbar-apps-btn--open': this.isAppsMenuOpen,
+        })}
+          @click=${this.toggleAppsMenu}
+        >
+          <span class="appbar-apps-btn__icon">${o(this.appsGridIcon)}</span>
+        </button>
+
+        <div class=${e$1({
+            'appbar-apps-menu': true,
+            '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}>
+              ${o(this.closeIcon)}
+            </button>
+          </div>
+          <div class="appbar-apps-menu__content">
+            <div class="appbar-apps-menu__list">
+              ${this.apps.map((app) => x `
+                <a
+                  class="appbar-apps-menu__item"
+                  href=${app.url}
+                  @click=${(e) => {
+            this.closeAppsMenu();
+            const event = new CustomEvent('app-click', {
+                detail: { app },
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+            });
+            this.dispatchEvent(event);
+            if (event.defaultPrevented) {
+                e.preventDefault();
+            }
+        }}
+                >
+                  ${app.name}
+                </a>
+              `)}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+      }
+      renderUserMenu() {
+          if (!this.user)
+              return E;
+          const initials = this.user.name
+              .split(' ')
+              .map((part) => part[0])
+              .join('')
+              .toUpperCase()
+              .slice(0, 2);
+          return x `
+      <div class="appbar-user">
+        ${this.isUserMenuOpen ? x `
+          <div class="menu-backdrop" @click=${this.closeUserMenu}></div>
+        ` : E}
+
+        <div
+          class="appbar-user__avatar"
+          @click=${this.toggleUserMenu}
+        >
+          ${this.user.avatar
+            ? x `<img src=${this.user.avatar} alt=${this.user.name} />`
+            : initials}
+        </div>
+
+        <div class=${e$1({
+            'appbar-user__menu': true,
+            'appbar-user__menu--open': this.isUserMenuOpen,
+        })}>
+          <div class="appbar-user__header">
+            <p class="appbar-user__name">${this.user.name}</p>
+            ${this.user.email ? x `
+              <p class="appbar-user__email">${this.user.email}</p>
+            ` : E}
+          </div>
+
+          ${this.menuItems.map((item) => item.divider
+            ? x `<div class="appbar-user__menu-divider"></div>`
+            : x `
+                <button
+                  class="appbar-user__menu-item"
+                  @click=${() => this.handleMenuItemClick(item)}
+                >
+                  ${item.icon ? x `
+                    <span class="appbar-user__menu-item__icon">${o(item.icon)}</span>
+                  ` : E}
+                  ${item.label}
+                </button>
+              `)}
+
+          ${this.menuItems.length > 0 ? x `
+            <div class="appbar-user__menu-divider"></div>
+          ` : E}
+
+          <button
+            class="appbar-user__menu-item appbar-user__menu-item--danger"
+            @click=${this.handleLogout}
+          >
+            <span class="appbar-user__menu-item__icon">${o(this.defaultLogoutIcon)}</span>
+            Sign Out
+          </button>
+        </div>
+      </div>
+    `;
+      }
+      render() {
+          return x `
+      <div class=${e$1({
+            'progress': true,
+            '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 ? x `
+          <div class="appbar-logo" @click=${this.handleLogoClick}>
+            <img src=${this.logo} alt="Home" />
+          </div>
+          <div class="appbar-divider"></div>
+        ` : E}
+
+        <!-- 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>
+    `;
+      }
+  };
+  exports.KRShell.styles = i$4 `
+    :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);
+      }
+    }
+  `;
+  __decorate$5([
+      n({ type: String })
+  ], exports.KRShell.prototype, "logo", void 0);
+  __decorate$5([
+      n({ type: Array })
+  ], exports.KRShell.prototype, "apps", void 0);
+  __decorate$5([
+      n({ type: String, attribute: 'active-app-id' })
+  ], exports.KRShell.prototype, "activeAppId", void 0);
+  __decorate$5([
+      n({ type: Object })
+  ], exports.KRShell.prototype, "user", void 0);
+  __decorate$5([
+      n({ type: Array, attribute: 'menu-items' })
+  ], exports.KRShell.prototype, "menuItems", void 0);
+  __decorate$5([
+      r()
+  ], exports.KRShell.prototype, "isUserMenuOpen", void 0);
+  __decorate$5([
+      r()
+  ], exports.KRShell.prototype, "isAppsMenuOpen", void 0);
+  __decorate$5([
+      r()
+  ], exports.KRShell.prototype, "pendingRequests", void 0);
+  exports.KRShell = __decorate$5([
+      t$1('kr-shell')
+  ], exports.KRShell);
+
+  class KRClient {
+      constructor() {
+          this._url = `https://content.kodaris.com`;
+      }
+      static getInstance() {
+          if (!KRClient._instance) {
+              KRClient._instance = new KRClient();
+          }
+          return KRClient._instance;
+      }
+      fetch(options) {
+          let url = options.url;
+          // Add on the default base url if user
+          // has not provided the full url
+          if (url.indexOf('http') !== 0) {
+              url = this._url + url;
+          }
+          if (options.params) {
+              url += '?';
+              Object.keys(options.params).forEach((key, keyIdx) => {
+                  if (keyIdx > 0) {
+                      url += '&';
+                  }
+                  url += `${key}=${options.params[key]}`;
+              });
+          }
+          // fixme
+          if (!options) {
+              options = {};
+          }
+          if (!options.headers) {
+              options.headers = {};
+          }
+          if (!options.headers['Content-Type']) {
+              options.headers['Content-Type'] = 'application/json';
+          }
+          options.credentials = 'include';
+          // User and Customer apis require CSRF tokens on non-GET reequests
+          let token;
+          if (url.indexOf('/api/user/') > -1 || url.indexOf('/api/customer/') > -1) {
+              token = fetch(`${this._url}/api/user/customer/authToken`, { credentials: 'include' });
+          }
+          else {
+              token = Promise.resolve(null);
+          }
+          let response;
+          return token
+              .then(res => res?.json())
+              .then(res => {
+              if (res?.data) {
+                  options.headers['X-CSRF-TOKEN'] = res.data;
+              }
+              return fetch(url, options);
+          })
+              .then(res => {
+              response = res;
+              return res.json();
+          })
+              .then(json => {
+              if (!response?.ok) {
+                  return Promise.reject(json);
+              }
+              return Promise.resolve(json);
+          });
+      }
+  }
+  KRClient._instance = null;
+
+  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  let KRNavItemEdit = class KRNavItemEdit extends i$1 {
+      constructor() {
+          super(...arguments);
+          this.label = '';
+          this.icon = '';
+          this.url = '';
+          this.active = true;
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.data) {
+              this.label = this.data.label || '';
+              this.icon = this.data.icon || '';
+              this.url = this.data.url || '';
+              this.active = this.data.active !== false;
+          }
+      }
+      handleLabelInput(e) {
+          const textField = e.target;
+          this.label = textField.value;
+      }
+      handleIconInput(e) {
+          const textField = e.target;
+          this.icon = textField.value;
+      }
+      handleUrlInput(e) {
+          const textField = e.target;
+          this.url = textField.value;
+      }
+      handleActiveChange(e) {
+          this.active = e.target.checked;
+      }
+      handleCancel() {
+          this.dialogRef.close(undefined);
+      }
+      handleSave() {
+          this.dialogRef.close({
+              label: this.label,
+              icon: this.icon || undefined,
+              url: this.url || undefined,
+              active: this.active,
+          });
+      }
+      handleKeyDown(e) {
+          if (e.key === 'Enter') {
+              this.handleSave();
+          }
+      }
+      render() {
+          return x `
+      <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>
+    `;
+      }
+  };
+  KRNavItemEdit.styles = i$4 `
+    :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;
+    }
+  `;
+  __decorate$4([
+      r()
+  ], KRNavItemEdit.prototype, "label", void 0);
+  __decorate$4([
+      r()
+  ], KRNavItemEdit.prototype, "icon", void 0);
+  __decorate$4([
+      r()
+  ], KRNavItemEdit.prototype, "url", void 0);
+  __decorate$4([
+      r()
+  ], KRNavItemEdit.prototype, "active", void 0);
+  KRNavItemEdit = __decorate$4([
+      t$1('kr-nav-item-edit')
+  ], KRNavItemEdit);
+
+  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * Application shell component with nav drawer and main content area.
+   *
+   * ## Features
+   * - Collapsible navigation drawer with hierarchical items (groups and items)
+   * - User profile display in footer with customization menu
+   * - Edit mode for customizing navigation (rename, reorder, hide items, add custom items)
+   * - Drag and drop reordering in edit mode
+   * - Persistence of customizations via preference API (global/organization level)
+   *
+   * ## Nav Customization
+   * Users can customize the navigation by clicking their profile and selecting
+   * "Customize Navigation". This enters edit mode where users can:
+   * - Right-click items to edit label, icon, or visibility
+   * - Right-click to add new items above/below existing items
+   * - Drag and drop to reorder items or move them between groups
+   *
+   * Customizations are stored globally and apply to all users.
+   *
+   * ## Preference Storage
+   * Preferences are stored as JSON with the following structure:
+   * ```json
+   * {
+   *   "nav": {
+   *     "itemId": { "label": "Custom Label", "icon": "...", "active": true, "order": 0 },
+   *     "custom-123": { "type": "item", "label": "New Item", "url": "/path", ... }
+   *   }
+   * }
+   * ```
+   *
+   * The `nav` object is a delta - it only contains overrides for existing items
+   * or definitions for custom items (prefixed with "custom-").
+   *
+   * ## API Endpoints Used
+   * - GET `/api/system/preference/json/scaffold?global=true` - load preferences
+   * - POST `/api/system/preference/json/scaffold?global=true` - create new preference
+   * - PUT `/api/system/preference/json/scaffold/{uuid}?global=true` - update existing preference
+   *
+   * @slot - The main content
+   *
+   * @property {string} logo - URL for the logo image
+   * @property {string} title - Title text to display instead of logo
+   * @property {'light'|'dark'} scheme - Color scheme: 'light' (default) or 'dark'
+   * @property {KRNavItem[]} nav - Navigation items as JSON array
+   * @property {KRUser} user - User profile data
+   *
+   *
+   * TODO
+   * - Don't hardcode breadcrumbs
+   * - Look at renderNormalFooter and renderEditFooter and see if that is what we want to do
+   */
+  exports.KRScaffold = class KRScaffold extends i$1 {
+      constructor() {
+          super();
+          /**
+           * HTTP client for API calls
+           */
+          this.http = KRClient.getInstance();
+          /**
+           * Default icon for nav items without an icon (shown at top level)
+           */
+          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 = false;
+          this.isNavOpened = true;
+          this.isEditing = false;
+          this.isUserMenuOpen = false;
+          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 = false;
+          this.navItemDragExpandTimeout = null;
+          this.navInitialized = false;
+          this.logo = '';
+          this.title = '';
+          this.scheme = 'light';
+          this.nav = [];
+          this.navIconsDisplayed = false;
+          this.navExpanded = false;
+          this.user = null;
+          /**
+           * Whether to show the subbar with menu toggle
+           */
+          this.subbar = false;
+          /**
+           * Breadcrumbs to display in the subbar
+           */
+          this.breadcrumbs = [];
+          this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+          this.boundHandleMouseUp = this.handleMouseUp.bind(this);
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.loadPref();
+          this.installFetchInterceptor();
+      }
+      updated(changedProperties) {
+          super.updated(changedProperties);
+          if (changedProperties.has('nav') && this.nav.length > 0) {
+              this.updateActiveNavItem();
+              if (this.navExpanded && !this.navInitialized) {
+                  this.navInitialized = true;
+                  this.getComputedNav()
+                      .filter(item => item.type === 'group')
+                      .forEach(group => this.navItemsExpanded.add(group.id));
+              }
+          }
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.uninstallFetchInterceptor();
+      }
+      /**
+       * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
+       * Updates `pendingRequests` state when requests start/complete.
+       */
+      installFetchInterceptor() {
+          if (this.originalFetch)
+              return;
+          const scaffold = this;
+          // Intercept fetch
+          this.originalFetch = window.fetch.bind(window);
+          const originalFetch = this.originalFetch; // Capture in local scope to avoid null reference after uninstall
+          window.fetch = function (...args) {
+              scaffold.pendingRequests++;
+              return originalFetch(...args).finally(() => {
+                  scaffold.pendingRequests--;
+              });
+          };
+          // Intercept XMLHttpRequest
+          this.originalXhrOpen = XMLHttpRequest.prototype.open;
+          const originalXhrOpen = this.originalXhrOpen; // Capture in local scope to avoid null reference after uninstall
+          XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
+              scaffold.pendingRequests++;
+              this.addEventListener('loadend', () => {
+                  scaffold.pendingRequests--;
+              }, { once: true });
+              return originalXhrOpen.call(this, method, url, async, username, password);
+          };
+      }
+      /**
+       * Restores the original fetch and XMLHttpRequest functions.
+       */
+      uninstallFetchInterceptor() {
+          if (this.originalFetch) {
+              window.fetch = this.originalFetch;
+              this.originalFetch = null;
+          }
+          if (this.originalXhrOpen) {
+              XMLHttpRequest.prototype.open = this.originalXhrOpen;
+              this.originalXhrOpen = null;
+          }
+      }
+      // =========================================================================
+      // Navigation Data
+      // =========================================================================
+      /**
+       * Returns the computed navigation as a flat array with preferences applied.
+       *
+       * Transforms the hierarchical `nav` property into a flat list where each item
+       * has a `parentId` reference instead of nested `children`. Merges user
+       * preference overrides (label, icon, url, active, order, parentId) and
+       * includes any custom items added via the edit dialog.
+       *
+       * @returns Flat array of nav items with preferences applied
+       */
+      getComputedNav() {
+          const result = [];
+          this.nav.forEach((item, index) => {
+              const override = this.pref.nav[item.id];
+              result.push({
+                  ...item,
+                  ...override,
+                  order: override?.order ?? item.order ?? index,
+                  parentId: override?.parentId ?? null,
+              });
+              // Add children if group
+              if (item.type === 'group' && item.children) {
+                  item.children.forEach((child, childIndex) => {
+                      const childOverride = this.pref.nav[child.id];
+                      result.push({
+                          ...child,
+                          ...childOverride,
+                          order: childOverride?.order ?? child.order ?? childIndex,
+                          parentId: childOverride?.parentId !== undefined ? childOverride.parentId : item.id,
+                      });
+                  });
+              }
+          });
+          // Add custom items from pref
+          Object.entries(this.pref.nav).forEach(([id, item]) => {
+              if (id.startsWith('custom') && item.type && item.label) {
+                  result.push({
+                      id,
+                      type: item.type,
+                      label: item.label,
+                      icon: item.icon,
+                      url: item.url,
+                      active: item.active,
+                      order: item.order ?? result.length,
+                      parentId: item.parentId ?? null,
+                  });
+              }
+          });
+          return result;
+      }
+      /**
+       * Returns nav items for a given parent, filtered and sorted for rendering.
+       *
+       * Filters the computed nav to items matching the parentId, sorts by order,
+       * hides inactive items in normal mode, and applies the search query filter.
+       * Groups are shown if their label matches or if they have matching children.
+       *
+       * @param parentId - The parent ID to filter by (null for top-level items)
+       * @returns Filtered and sorted nav items ready for rendering
+       */
+      getNavItemChildren(parentId) {
+          let items = this.getComputedNav()
+              .filter(item => item.parentId === parentId)
+              .sort((a, b) => a.order - b.order);
+          // In normal mode, filter out hidden items
+          if (!this.isEditing) {
+              items = items.filter(item => item.active !== false);
+          }
+          // Apply search filter
+          if (this.navQuery) {
+              const query = this.navQuery.toLowerCase();
+              const allItems = this.getComputedNav();
+              items = items.filter(item => {
+                  if (item.type === 'group') {
+                      // Show group if its label matches OR if it has matching children
+                      return item.label.toLowerCase().includes(query) || allItems.some(child => child.parentId === item.id &&
+                          child.active !== false &&
+                          child.label.toLowerCase().includes(query));
+                  }
+                  // Show item if its label matches
+                  return item.label.toLowerCase().includes(query);
+              });
+          }
+          return items;
+      }
+      // =========================================================================
+      // Navigation Search
+      // =========================================================================
+      /**
+       * Handles search input changes for filtering nav items.
+       *
+       * When a search query is entered, automatically expands any groups that
+       * contain matching children so users can see the results. When the search
+       * is cleared, collapses all groups back to their default state.
+       *
+       * @param e - The input event from the search field
+       */
+      handleNavQueryChange(e) {
+          this.navQuery = e.target.value;
+          // Expand all groups when searching so matching children are visible
+          // (groups without matching children won't be rendered anyway)
+          if (this.navQuery) {
+              this.getComputedNav().forEach(item => {
+                  if (item.type === 'group') {
+                      this.navItemsExpanded.add(item.id);
+                  }
+              });
+          }
+          else {
+              // Collapse all when search is cleared
+              this.navItemsExpanded.clear();
+          }
+      }
+      /**
+       * Clears the search query.
+       */
+      handleNavQueryClear() {
+          this.navQuery = '';
+          this.navItemsExpanded.clear();
+      }
+      // =========================================================================
+      // Navigation Interaction
+      // =========================================================================
+      handleMenuClick() {
+          this.isNavOpened = !this.isNavOpened;
+      }
+      /**
+       * Handles scroll on nav content to show/hide header shadow.
+       */
+      handleNavScroll(e) {
+          this.isNavScrolled = e.target.scrollTop > 0;
+      }
+      /**
+       * Toggles the expanded/collapsed state of a nav group with animation.
+       * Uses the Web Animations API to animate height transitions.
+       * When collapsing, the `nav-group--expanded` class is removed after animation completes.
+       * When expanding, the class is added immediately before animation starts.
+       *
+       * @param itemId - The unique identifier of the nav group to toggle
+       */
+      toggleNavItem(itemId) {
+          const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
+          const groupEl = navItem?.nextElementSibling;
+          if (!groupEl)
+              return;
+          if (this.navItemsExpanded.has(itemId)) {
+              this.navItemsExpanded.delete(itemId);
+              groupEl.animate([
+                  { height: `${groupEl.scrollHeight}px` },
+                  { height: '0px' }
+              ], { duration: 300, easing: 'ease-in-out' }).onfinish = () => {
+                  groupEl.classList.remove('nav-group--expanded');
+              };
+          }
+          else {
+              this.navItemsExpanded.add(itemId);
+              groupEl.classList.add('nav-group--expanded');
+              groupEl.animate([
+                  { height: '0px' },
+                  { height: `${groupEl.scrollHeight}px` }
+              ], { duration: 300, easing: 'ease-in-out' });
+          }
+          this.requestUpdate();
+      }
+      /**
+       * Handles click events on navigation items.
+       *
+       * For groups, toggles the expanded/collapsed state.
+       * For items, dispatches a cancelable `nav-item-click` custom event.
+       *
+       * If a listener calls `preventDefault()` on the custom event, native browser
+       * navigation is prevented. Otherwise, the default `<a href>` navigation
+       * proceeds normally.
+       *
+       * The `@krubble/angular` package provides `KRScaffoldDirective` which
+       * automatically listens for this event and handles navigation using
+       * Angular's router. Import `KrubbleModule` in your Angular app to enable
+       * SPA navigation without page reloads.
+       *
+       * @param e - The original click event
+       * @param item - The nav item that was clicked
+       */
+      handleNavItemClick(e, item) {
+          if (item.type === 'group') {
+              this.toggleNavItem(item.id);
+          }
+          else {
+              const navEvent = new CustomEvent('nav-item-click', {
+                  detail: { item },
+                  bubbles: true,
+                  composed: true,
+                  cancelable: true,
+              });
+              this.dispatchEvent(navEvent);
+              // If a listener called preventDefault(), prevent the native navigation
+              if (navEvent.defaultPrevented) {
+                  e.preventDefault();
+              }
+          }
+      }
+      /**
+       * Updates the active nav item highlight based on the current URL.
+       *
+       * Compares the first path segment of `window.location.pathname` with each
+       * nav item's URL to find a match. When found, highlights that item and
+       * expands its parent group if nested.
+       *
+       * Called automatically by `KRScaffoldDirective` on Angular route changes.
+       */
+      updateActiveNavItem() {
+          const currentPath = window.location.pathname;
+          const allItems = this.getComputedNav().filter(item => item.type === 'item' && item.url);
+          // Find the best match - prefer longer/more specific URL matches
+          let activeItem = null;
+          let longestMatch = 0;
+          for (const item of allItems) {
+              const url = item.url; // We filtered for items with url above
+              if (currentPath.startsWith(url) && url.length > longestMatch) {
+                  activeItem = item;
+                  longestMatch = url.length;
+              }
+          }
+          if (activeItem) {
+              this.activeNavItemId = activeItem.id;
+              if (activeItem.parentId) {
+                  this.navItemsExpanded.add(activeItem.parentId);
+              }
+          }
+          else {
+              this.activeNavItemId = null;
+          }
+      }
+      // =========================================================================
+      // Navigation Customization
+      // =========================================================================
+      startEditing() {
+          this.isEditing = true;
+      }
+      cancelEditing() {
+          this.isEditing = false;
+          // Reload to revert changes
+          this.loadPref();
+      }
+      resetPref() {
+          this.pref.nav = {};
+      }
+      savePref() {
+          const url = this.pref.uuid
+              ? `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`
+              : `/api/system/preference/json/scaffold?global=true`;
+          this.http.fetch({
+              url,
+              method: this.pref.uuid ? 'PUT' : 'POST',
+              body: JSON.stringify({ nav: this.pref.nav }),
+          })
+              .then((response) => {
+              this.pref = response.data;
+              this.isEditing = false;
+          })
+              .catch((error) => {
+              console.error('Failed to save nav customizations:', error);
+          });
+      }
+      loadPref() {
+          this.http.fetch({
+              url: '/api/system/preference/json/scaffold?global=true',
+              method: 'GET',
+          })
+              .then((response) => {
+              const pref = response?.data?.[0];
+              if (pref) {
+                  this.pref = pref;
+              }
+          })
+              .catch(() => {
+              // No preferences saved yet
+          });
+      }
+      handleNavItemContextMenu(e, item) {
+          if (!this.isEditing)
+              return;
+          e.preventDefault();
+          krubbleComponents.KRContextMenu.open({
+              x: e.clientX,
+              y: e.clientY,
+              items: [
+                  { id: 'edit', label: 'Edit Item' },
+                  { id: 'divider-1', label: '', divider: true },
+                  { id: 'add-above', label: 'Add Item Above' },
+                  { id: 'add-below', label: 'Add Item Below' },
+              ],
+          }).then((result) => {
+              if (!result)
+                  return;
+              switch (result.id) {
+                  case 'edit':
+                      this.openNavItemEdit(item);
+                      break;
+                  case 'add-above':
+                      this.addNavItem(item, 'above');
+                      break;
+                  case 'add-below':
+                      this.addNavItem(item, 'below');
+                      break;
+              }
+          });
+      }
+      /**
+       * Opens the nav item edit dialog for customizing an item's properties.
+       *
+       * Opens `KRNavItemEdit` dialog pre-populated with the item's current values.
+       * When the user saves, merges the result into the nav delta to persist
+       * customizations like label, icon, URL, and visibility.
+       *
+       * @param item - The nav item to edit
+       */
+      openNavItemEdit(item) {
+          krubbleComponents.KRDialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
+              const result = res;
+              if (!result)
+                  return;
+              if (!this.pref.nav[item.id]) {
+                  this.pref.nav[item.id] = {};
+              }
+              this.pref.nav[item.id] = {
+                  ...this.pref.nav[item.id],
+                  ...result
+              };
+              this.requestUpdate();
+          });
+      }
+      /**
+       * Adds a new custom nav item relative to an existing item.
+       *
+       * Creates a placeholder item in the nav delta, shifts existing siblings
+       * to make room, then opens the edit dialog so the user can configure
+       * the new item's label, icon, and URL.
+       *
+       * @param targetItem - The existing item to position relative to
+       * @param position - Whether to insert 'above' or 'below' the target item
+       */
+      addNavItem(targetItem, position) {
+          const customId = `custom-${Date.now()}`;
+          const siblings = this.getComputedNav()
+              .filter(i => i.parentId === targetItem.parentId)
+              .sort((a, b) => a.order - b.order);
+          const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
+          const newOrder = position === 'above' ? targetIndex : targetIndex + 1;
+          // Shift existing items to make room for the new item
+          siblings.forEach((sibling, index) => {
+              if (index >= newOrder) {
+                  if (!this.pref.nav[sibling.id]) {
+                      this.pref.nav[sibling.id] = {};
+                  }
+                  this.pref.nav[sibling.id].order = index + 1;
+              }
+          });
+          // Add the new item and open edit dialog
+          const newItem = {
+              id: customId,
+              type: 'item',
+              label: 'New Item',
+              order: newOrder,
+              parentId: targetItem.parentId,
+              active: true,
+          };
+          this.pref.nav[customId] = newItem;
+          this.requestUpdate();
+          this.openNavItemEdit(newItem);
+      }
+      // =========================================================================
+      // Navigation Drag & Drop
+      // =========================================================================
+      /**
+       * Initiates a potential drag operation when mouse is pressed on a nav item.
+       *
+       * Only active in edit mode. Records the starting position and sets up
+       * document-level listeners for mouse move and mouse up events. The actual
+       * drag doesn't start until the mouse moves more than 5 pixels.
+       *
+       * @param e - The mouse event
+       * @param item - The nav item being pressed
+       */
+      handleNavItemMouseDown(e, item) {
+          if (!this.isEditing)
+              return;
+          e.preventDefault();
+          this.draggedNavItemId = item.id;
+          this.navItemDragStartY = e.clientY;
+          this.isNavItemDragging = false;
+          document.addEventListener('mousemove', this.boundHandleMouseMove);
+          document.addEventListener('mouseup', this.boundHandleMouseUp);
+      }
+      /**
+       * Handles mouse movement during a nav item drag operation.
+       *
+       * Initiates dragging after the mouse moves more than 5 pixels (to distinguish
+       * from clicks), creates a floating preview element that follows the cursor,
+       * and updates the drop target indicator based on mouse position.
+       *
+       * @param e - The mouse event
+       */
+      handleMouseMove(e) {
+          if (!this.draggedNavItemId)
+              return;
+          // Start dragging after moving a few pixels (to distinguish from clicks)
+          if (!this.isNavItemDragging && Math.abs(e.clientY - this.navItemDragStartY) > 5) {
+              this.isNavItemDragging = true;
+              this.classList.add('kr-scaffold--dragging');
+              // Create drag preview
+              const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
+              if (draggedItem) {
+                  this.navItemDragPreview = document.createElement('div');
+                  this.navItemDragPreview.className = 'nav-item-drag-preview';
+                  this.navItemDragPreview.textContent = draggedItem.label;
+                  this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
+                  this.navItemDragPreview.style.top = `${e.clientY - 20}px`;
+                  this.shadowRoot?.appendChild(this.navItemDragPreview);
+              }
+          }
+          if (!this.isNavItemDragging)
+              return;
+          // Update preview position
+          if (this.navItemDragPreview) {
+              this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
+              this.navItemDragPreview.style.top = `${e.clientY - 20}px`;
+          }
+          // Find drop target based on mouse position
+          this.updateNavItemDropTarget(e);
+      }
+      /**
+       * Handles the end of a nav item drag operation.
+       *
+       * Removes document-level mouse listeners, executes the drop if there's a valid
+       * target, and cleans up all drag-related state.
+       */
+      handleMouseUp() {
+          document.removeEventListener('mousemove', this.boundHandleMouseMove);
+          document.removeEventListener('mouseup', this.boundHandleMouseUp);
+          if (this.isNavItemDragging && this.navItemDropTargetId) {
+              this.executeNavItemDrop();
+          }
+          // Reset all drag state
+          this.draggedNavItemId = null;
+          this.navItemDropTargetId = null;
+          this.isNavItemDragging = false;
+          this.classList.remove('kr-scaffold--dragging');
+          if (this.navItemDragPreview) {
+              this.navItemDragPreview.remove();
+              this.navItemDragPreview = null;
+          }
+          this.clearNavItemDragExpandTimeout();
+          this.requestUpdate();
+      }
+      /**
+       * Determines where a dragged nav item would be dropped based on mouse position.
+       *
+       * Loops through all nav items and checks if the mouse is hovering over one.
+       * For groups, the item is divided into thirds (above/center/below) where
+       * "center" means drop into the group. For regular items, it's halves (above/below).
+       *
+       * Also handles auto-expanding collapsed groups when hovering over their center,
+       * and validates drops (e.g., prevents dropping a group into another group).
+       *
+       * Updates `navItemDropTargetId` and `navItemDropPosition` state which are used to render
+       * visual drop indicators in the UI.
+       *
+       * @param e - The mouse event from dragging
+       */
+      updateNavItemDropTarget(e) {
+          // Get all nav items in shadow DOM
+          const navItems = this.shadowRoot?.querySelectorAll('.nav-item[data-id]');
+          if (!navItems)
+              return;
+          let foundTarget = false;
+          navItems.forEach((el) => {
+              const rect = el.getBoundingClientRect();
+              const itemId = el.getAttribute('data-id');
+              if (!itemId || itemId === this.draggedNavItemId)
+                  return;
+              // Skip if mouse is outside this element
+              if (e.clientX < rect.left || e.clientX > rect.right ||
+                  e.clientY < rect.top || e.clientY > rect.bottom) {
+                  return;
+              }
+              const item = this.getComputedNav().find(i => i.id === itemId);
+              if (!item) {
+                  return;
+              }
+              const y = e.clientY - rect.top;
+              let position;
+              // Determine drop position based on mouse Y position within the item.
+              // Groups are divided into thirds: top=above, middle=center (drop into), bottom=below.
+              // Regular items are divided in half: top=above, bottom=below.
+              if (item.type === 'group') {
+                  if (y < rect.height / 3) {
+                      // Top third - drop above the group
+                      position = 'above';
+                      this.clearNavItemDragExpandTimeout();
+                  }
+                  else if (y > (rect.height * 2) / 3) {
+                      // Bottom third - drop below the group
+                      position = 'below';
+                      this.clearNavItemDragExpandTimeout();
+                  }
+                  else {
+                      // Middle third - drop into the group (as a child)
+                      position = 'center';
+                      // Auto-expand collapsed groups after a delay
+                      if (!this.navItemsExpanded.has(item.id) && !this.navItemDragExpandTimeout) {
+                          this.expandNavGroupOnDrag(item.id);
+                      }
+                  }
+              }
+              else {
+                  // Regular items only support above/below, not center
+                  position = y < rect.height / 2 ? 'above' : 'below';
+                  this.clearNavItemDragExpandTimeout();
+              }
+              // Determine what the new parent would be
+              const newParentId = position === 'center' ? item.id : item.parentId;
+              const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
+              // Don't show drop indicator if invalid drop:
+              // 1. Can't drop an item into itself (newParentId === draggedNavItemId)
+              // 2. Groups can only exist at the top level, so prevent dropping a group into another group (newParentId !== null means it would be nested)
+              if (newParentId === this.draggedNavItemId || (draggedItem?.type === 'group' && newParentId !== null)) {
+                  this.navItemDropTargetId = null;
+                  this.clearNavItemDragExpandTimeout();
+                  return;
+              }
+              // Valid drop target found - store the target item and position (above/below/center)
+              // so the UI can render the drop indicator in the correct location
+              this.navItemDropTargetId = item.id;
+              this.navItemDropPosition = position;
+              foundTarget = true;
+          });
+          // Mouse is not over any valid nav item - clear the drop indicator
+          // (e.g., user dragged outside the nav area or over empty space)
+          if (!foundTarget) {
+              this.navItemDropTargetId = null;
+              this.clearNavItemDragExpandTimeout();
+          }
+          this.requestUpdate();
+      }
+      /**
+       * Cancels the pending auto-expand timeout for nav groups during drag.
+       * Called when the user moves away from a group's center or stops dragging.
+       */
+      clearNavItemDragExpandTimeout() {
+          if (this.navItemDragExpandTimeout) {
+              clearTimeout(this.navItemDragExpandTimeout);
+              this.navItemDragExpandTimeout = null;
+          }
+      }
+      /**
+       * Auto-expands a collapsed nav group after a delay while dragging over it.
+       *
+       * Uses a 500ms timeout to prevent groups from expanding too eagerly when the
+       * user is just passing over them. Only expands if the user is still hovering
+       * over the group's center when the timeout fires.
+       *
+       * @param itemId - The ID of the group to expand
+       */
+      expandNavGroupOnDrag(itemId) {
+          this.navItemDragExpandTimeout = window.setTimeout(() => {
+              if (this.navItemDropTargetId === itemId && this.navItemDropPosition === 'center') {
+                  this.navItemsExpanded.add(itemId);
+                  this.requestUpdate();
+              }
+              this.navItemDragExpandTimeout = null;
+          }, 500);
+      }
+      /**
+       * Executes the drop operation after a nav item drag completes.
+       *
+       * Calculates the new position and parent for the dragged item based on
+       * the drop target and position (above/below/center). Updates the navDelta
+       * with new order values for the dragged item and shifts siblings as needed.
+       */
+      executeNavItemDrop() {
+          if (!this.draggedNavItemId || !this.navItemDropTargetId)
+              return;
+          const allItems = this.getComputedNav();
+          const draggedItem = allItems.find(i => i.id === this.draggedNavItemId);
+          const targetItem = allItems.find(i => i.id === this.navItemDropTargetId);
+          if (!draggedItem || !targetItem)
+              return;
+          // Determine the new parentId for the dragged item
+          let newParentId;
+          if (this.navItemDropPosition === 'center' && targetItem.type === 'group') {
+              if (targetItem.id === this.draggedNavItemId) {
+                  return;
+              }
+              newParentId = targetItem.id;
+          }
+          else {
+              newParentId = targetItem.parentId;
+          }
+          if (newParentId === this.draggedNavItemId)
+              return;
+          // Get siblings in the destination parent
+          const siblings = allItems
+              .filter(i => i.parentId === newParentId && i.id !== this.draggedNavItemId)
+              .sort((a, b) => a.order - b.order);
+          const navDelta = this.pref.nav;
+          // Calculate the new order
+          let newOrder;
+          if (this.navItemDropPosition === 'center') {
+              // Dropping into a group - place at the end of its children
+              if (siblings.length > 0) {
+                  newOrder = Math.max(...siblings.map(s => s.order)) + 1;
+              }
+              else {
+                  newOrder = 0;
+              }
+          }
+          else {
+              // Find where the target item is in the sorted siblings list
+              const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
+              // Determine insert position based on drop position (above/below target)
+              if (targetIndex === -1) {
+                  newOrder = 0;
+              }
+              else if (this.navItemDropPosition === 'above') {
+                  newOrder = targetIndex;
+              }
+              else {
+                  newOrder = targetIndex + 1;
+              }
+              // Shift existing siblings to make room for the dropped item.
+              // Items at or after the insert position get their order bumped up by 1.
+              siblings.forEach((sibling, index) => {
+                  if (!navDelta[sibling.id]) {
+                      navDelta[sibling.id] = {};
+                  }
+                  if (index >= newOrder) {
+                      navDelta[sibling.id].order = index + 1;
+                  }
+                  else {
+                      navDelta[sibling.id].order = index;
+                  }
+              });
+          }
+          // Update the dragged item's position and parent in the delta
+          if (!navDelta[this.draggedNavItemId]) {
+              navDelta[this.draggedNavItemId] = {};
+          }
+          navDelta[this.draggedNavItemId].order = newOrder;
+          navDelta[this.draggedNavItemId].parentId = newParentId;
+          // Persist changes and trigger re-render
+          this.pref.nav = navDelta;
+          this.requestUpdate();
+      }
+      // =========================================================================
+      // User Menu
+      // =========================================================================
+      toggleUserMenu() {
+          this.isUserMenuOpen = !this.isUserMenuOpen;
+      }
+      closeUserMenu() {
+          this.isUserMenuOpen = false;
+      }
+      handleCustomize() {
+          this.closeUserMenu();
+          this.startEditing();
+      }
+      // =========================================================================
+      // Rendering
+      // =========================================================================
+      renderNormalFooter() {
+          if (!this.user)
+              return E;
+          const initials = this.user.name
+              .split(' ')
+              .map((part) => part[0])
+              .join('')
+              .toUpperCase()
+              .slice(0, 2);
+          // todo - use a reusable menu component
+          return x `
+      <div class="user-menu-container">
+        ${this.isUserMenuOpen ? x `
+          <div class="user-menu">
+            <button class="user-menu__item" @click=${this.handleCustomize}>
+              Customize Navigation
+            </button>
+          </div>
+        ` : E}
+        <div class="user" @click=${this.toggleUserMenu}>
+          <div class="user__avatar">
+            ${this.user.avatar
+            ? x `<img src=${this.user.avatar} alt=${this.user.name} />`
+            : initials}
+          </div>
+          <div class="user__info">
+            <div class="user__name">${this.user.name}</div>
+            ${this.user.email ? x `<div class="user__email">${this.user.email}</div>` : E}
+          </div>
+        </div>
+      </div>
+    `;
+      }
+      // todo - review
+      renderEditFooter() {
+          return x `
+      <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>
+    `;
+      }
+      /**
+       * Renders a navigation item as either a group or a link.
+       *
+       * Groups render as expandable `<button>` elements with a chevron indicator and
+       * nested children. Items render as `<a>` anchor links with href navigation.
+       *
+       * Both types support drag-and-drop reordering in edit mode, context menus for
+       * customization, and visual indicators for active/hidden/drop-target states.
+       *
+       * Icons use SVG strings and fall back to `defaultNavItemIcon` when not provided.
+       * Icons are only rendered for top-level items, not for children nested within groups.
+       *
+       * @param item - The flat nav item data to render
+       * @param isChild - Whether this item is nested within a group (affects icon rendering)
+       * @returns Lit HTML template for the nav item
+       */
+      renderNavItem(item, isChild = false) {
+          if (item.type === 'section') {
+              return x `
+        <div class="nav-section">${item.label}</div>
+      `;
+          }
+          if (item.type === 'group') {
+              const children = this.getNavItemChildren(item.id);
+              return x `
+        <button
+          class=${e$1({
+                'nav-item': true,
+                'nav-item--expanded': this.navItemsExpanded.has(item.id),
+                'nav-item--hidden': this.isEditing && item.active === false,
+                'nav-item--drop-above': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'above',
+                'nav-item--drop-below': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'below',
+                'nav-item--drop-center': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'center',
+            })}
+          data-id="${item.id}"
+          @mousedown=${(e) => this.handleNavItemMouseDown(e, item)}
+          @click=${(e) => this.handleNavItemClick(e, item)}
+          @contextmenu=${(e) => this.handleNavItemContextMenu(e, item)}
+        >
+          ${this.navIconsDisplayed ? x `<span class="nav-item__icon">${o(item.icon || this.defaultNavItemIcon)}</span>` : E}
+          <span class="nav-item__label">${item.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=${e$1({
+                'nav-group': true,
+                'nav-group--expanded': this.navItemsExpanded.has(item.id),
+            })}>
+          ${children.map((child) => this.renderNavItem(child, true))}
+        </div>
+      `;
+          }
+          return x `
+      <a
+        class=${e$1({
+            'nav-item': true,
+            'nav-item--active': this.activeNavItemId === item.id,
+            'nav-item--hidden': this.isEditing && item.active === false,
+            'nav-item--drop-above': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'above',
+            'nav-item--drop-below': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'below',
+        })}
+        data-id="${item.id}"
+        href=${item.url || '#'}
+        @mousedown=${(e) => this.handleNavItemMouseDown(e, item)}
+        @click=${(e) => this.handleNavItemClick(e, item)}
+        @contextmenu=${(e) => this.handleNavItemContextMenu(e, item)}
+      >
+        ${this.navIconsDisplayed && !isChild ? x `<span class="nav-item__icon">${o(item.icon || this.defaultNavItemIcon)}</span>` : E}
+        <span class="nav-item__label">${item.label}</span>
+      </a>
+    `;
+      }
+      // todo - don't hardcode breadcrumbs
+      render() {
+          const topLevelItems = this.getNavItemChildren(null);
+          // Use unfiltered count to determine if search should show (so it doesn't disappear while typing)
+          const totalTopLevelItems = this.getComputedNav().filter(item => item.parentId === null).length;
+          return x `
+      <div class=${e$1({
+            'progress': true,
+            '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 ? x `
+        <kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
+          <slot name="subbar"></slot>
+        </kr-subbar>
+      ` : E}
+
+      <div class="wrapper">
+        <nav class=${e$1({
+            'nav': true,
+            'nav--scrolled': this.isNavScrolled,
+            'nav--opened': !this.subbar || this.isNavOpened,
+        })}>
+          <div class="nav-header">
+            ${this.title
+            ? x `<span class="nav-title">${this.title}</span>`
+            : this.logo
+                ? x `<img class="nav-logo" src=${this.logo} alt="Logo" />`
+                : E}
+          </div>
+          <div class="nav-content" @scroll=${this.handleNavScroll}>
+            ${totalTopLevelItems > 20 ? x `
+              <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 ? x `
+                    <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>
+                  ` : E}
+                </div>
+              </div>
+            ` : E}
+            <div class="nav-items">
+              ${topLevelItems.map((item) => this.renderNavItem(item))}
+            </div>
+          </div>
+          <!-- <div class="nav-footer">
+            ${this.isEditing ? this.renderEditFooter() : this.renderNormalFooter()}
+          </div> -->
+        </nav>
+
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+      
+    `;
+      }
+  };
+  exports.KRScaffold.styles = i$4 `
+    :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);
+      }
+    }
+  `;
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "navItemsExpanded", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "navQuery", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "activeNavItemId", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "isNavScrolled", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "isNavOpened", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "isEditing", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "isUserMenuOpen", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "pref", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "draggedNavItemId", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "navItemDropTargetId", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "navItemDropPosition", void 0);
+  __decorate$3([
+      r()
+  ], exports.KRScaffold.prototype, "pendingRequests", void 0);
+  __decorate$3([
+      n({ type: String })
+  ], exports.KRScaffold.prototype, "logo", void 0);
+  __decorate$3([
+      n({ type: String })
+  ], exports.KRScaffold.prototype, "title", void 0);
+  __decorate$3([
+      n({ type: String, reflect: true })
+  ], exports.KRScaffold.prototype, "scheme", void 0);
+  __decorate$3([
+      n({ type: Array })
+  ], exports.KRScaffold.prototype, "nav", void 0);
+  __decorate$3([
+      n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
+  ], exports.KRScaffold.prototype, "navIconsDisplayed", void 0);
+  __decorate$3([
+      n({ type: Boolean, attribute: 'nav-expanded' })
+  ], exports.KRScaffold.prototype, "navExpanded", void 0);
+  __decorate$3([
+      n({ type: Object })
+  ], exports.KRScaffold.prototype, "user", void 0);
+  __decorate$3([
+      n({ type: Boolean })
+  ], exports.KRScaffold.prototype, "subbar", void 0);
+  __decorate$3([
+      n({ type: Array })
+  ], exports.KRScaffold.prototype, "breadcrumbs", void 0);
+  exports.KRScaffold = __decorate$3([
+      t$1('kr-scaffold')
+  ], exports.KRScaffold);
+
+  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * Secondary navigation component for screens within the scaffold.
+   * Provides a simple nav drawer for sub-navigation within a page/screen.
+   * Typically used when viewing details of a specific entity (e.g., Company, Contact).
+   *
+   * ## Usage
+   * ```html
+   * <kr-screen-nav
+   *   title="Acme Corporation"
+   *   subtitle="Company"
+   *   backUrl="/crm/companies"
+   *   .navItems=${[
+   *     { id: 'overview', label: 'Overview', url: '/companies/123/overview' },
+   *     { id: 'contacts', label: 'Contacts', url: '/companies/123/contacts' },
+   *     { id: 'activity', label: 'Activity', url: '/companies/123/activity' },
+   *   ]}
+   *   activeId="overview"
+   * >
+   *   <div>Screen content here</div>
+   * </kr-screen-nav>
+   * ```
+   *
+   * @slot - The main screen content
+   *
+   * @property {string} title - Main title (e.g., entity name like "Acme Corporation")
+   * @property {string} subtitle - Subtitle/label (e.g., entity type like "Company")
+   * @property {string} backUrl - URL to navigate back to (e.g., the table/list view)
+   * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
+   * @property {string} activeId - Currently active item ID
+   */
+  exports.KRScreenNav = class KRScreenNav extends i$1 {
+      constructor() {
+          super(...arguments);
+          /**
+           * Main title (e.g., entity name like "Acme Corporation")
+           */
+          this.title = '';
+          /**
+           * Subtitle/label (e.g., entity type like "Company")
+           */
+          this.subtitle = '';
+          /**
+           * URL to navigate back to (e.g., the table/list view)
+           */
+          this.backUrl = '';
+          /**
+           * Navigation items
+           */
+          this.navItems = [];
+          /**
+           * Currently active item ID
+           */
+          this.activeId = '';
+      }
+      /**
+       * Handles click events on navigation items.
+       *
+       * Dispatches a cancelable `nav-item-click` custom event.
+       * If a listener calls `preventDefault()` on the custom event, native browser
+       * navigation is prevented. Otherwise, the default `<a href>` navigation
+       * proceeds normally.
+       *
+       * The `@krubble/angular` package provides `KRScreenNavDirective` which
+       * automatically listens for this event and handles navigation using
+       * Angular's router.
+       *
+       * @param e - The original click event
+       * @param item - The nav item that was clicked
+       */
+      handleNavItemClick(e, item) {
+          const navEvent = new CustomEvent('nav-item-click', {
+              detail: { item },
+              bubbles: true,
+              composed: true,
+              cancelable: true,
+          });
+          this.dispatchEvent(navEvent);
+          // If a listener called preventDefault(), prevent the native navigation
+          if (navEvent.defaultPrevented) {
+              e.preventDefault();
+          }
+      }
+      /**
+       * Updates the active nav item based on the current URL.
+       * Called automatically by `KRScreenNavDirective` on Angular route changes.
+       */
+      updateActiveNavItem() {
+          const currentPath = window.location.pathname;
+          const activeItem = this.navItems.find(item => {
+              if (!item.url)
+                  return false;
+              // Handle both absolute and relative URLs
+              if (item.url.startsWith('./')) {
+                  const segment = item.url.replace(/^\.\//, '');
+                  return currentPath.endsWith('/' + segment);
+              }
+              return currentPath === item.url || currentPath.startsWith(item.url + '/');
+          });
+          if (activeItem) {
+              this.activeId = activeItem.id;
+          }
+      }
+      render() {
+          return x `
+      <nav class="nav">
+        ${this.title ? x `
+          <div class="nav-header">
+            <div class="nav-header__text">
+              ${this.subtitle ? x `<div class="nav-header__subtitle">${this.subtitle}</div>` : E}
+              <div class="nav-header__title">${this.title}</div>
+            </div>
+          </div>
+        ` : E}
+        <div class="nav-content">
+          <div class="nav-items">
+            ${this.navItems.map((item) => x `
+                <a
+                  class="nav-item ${item.id === this.activeId ? 'nav-item--active' : ''}"
+                  href=${item.url || '#'}
+                  @click=${(e) => this.handleNavItemClick(e, item)}
+                >
+                  ${item.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>
+    `;
+      }
+  };
+  exports.KRScreenNav.styles = i$4 `
+    :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;
+    }
+  `;
+  __decorate$2([
+      n({ type: String })
+  ], exports.KRScreenNav.prototype, "title", void 0);
+  __decorate$2([
+      n({ type: String })
+  ], exports.KRScreenNav.prototype, "subtitle", void 0);
+  __decorate$2([
+      n({ type: String })
+  ], exports.KRScreenNav.prototype, "backUrl", void 0);
+  __decorate$2([
+      n({ type: Array })
+  ], exports.KRScreenNav.prototype, "navItems", void 0);
+  __decorate$2([
+      n({ type: String })
+  ], exports.KRScreenNav.prototype, "activeId", void 0);
+  exports.KRScreenNav = __decorate$2([
+      t$1('kr-screen-nav')
+  ], exports.KRScreenNav);
+
+  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * Detail screen component for viewing/editing entity details.
+   * Displays a form-like layout with labeled fields centered in a single column.
+   *
+   * ## Usage
+   * ```html
+   * <kr-screen-detail title="Company Details">
+   *   <kr-button slot="actions">Save</kr-button>
+   *   <kr-text-field label="Company Name" value="Acme Corporation"></kr-text-field>
+   *   <kr-text-field label="Industry" value="Technology"></kr-text-field>
+   *   <kr-text-field label="Website" value="https://acme.com"></kr-text-field>
+   * </kr-screen-detail>
+   * ```
+   *
+   * @slot - Form fields and content (centered, max-width 480px)
+   * @slot actions - Action buttons displayed in the header on the right
+   *
+   * @property {string} title - Section title (e.g., "Company Details")
+   */
+  exports.KRScreenDetail = class KRScreenDetail extends i$1 {
+      constructor() {
+          super(...arguments);
+          /**
+           * Section title
+           */
+          this.title = '';
+      }
+      render() {
+          return x `
+      <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>
+    `;
+      }
+  };
+  exports.KRScreenDetail.styles = i$4 `
+    :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;
+    }
+  `;
+  __decorate$1([
+      n({ type: String })
+  ], exports.KRScreenDetail.prototype, "title", void 0);
+  exports.KRScreenDetail = __decorate$1([
+      t$1('kr-screen-detail')
+  ], exports.KRScreenDetail);
+
+  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * Secondary bar component that sits below the main app bar.
+   *
+   * @slot - Content to display in the subbar (right side)
+   */
+  exports.KRSubbar = class KRSubbar extends i$1 {
+      constructor() {
+          super(...arguments);
+          /**
+           * Array of breadcrumb items to display
+           */
+          this.breadcrumbs = [];
+          /**
+           * Whether to show the menu icon
+           */
+          this.menu = false;
+      }
+      _handleMenuClick() {
+          this.dispatchEvent(new CustomEvent('menu-click', { bubbles: true, composed: true }));
+      }
+      render() {
+          return x `
+      ${this.menu ? x `
+        <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>
+      ` : E}
+      <div class="breadcrumbs">
+        ${this.breadcrumbs.map((crumb, index) => x `
+            ${index > 0 ? x `<span class="breadcrumb-separator">/</span>` : ''}
+            <a
+              class=${e$1({ 'breadcrumb': true, 'breadcrumb--current': index === this.breadcrumbs.length - 1 })}
+              href=${crumb.url || ''}
+            >${crumb.label}</a>
+          `)}
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+      
+    `;
+      }
+  };
+  exports.KRSubbar.styles = i$4 `
+    :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;
+    }
+  `;
+  __decorate([
+      n({ type: Array })
+  ], exports.KRSubbar.prototype, "breadcrumbs", void 0);
+  __decorate([
+      n({ type: Boolean })
+  ], exports.KRSubbar.prototype, "menu", void 0);
+  exports.KRSubbar = __decorate([
+      t$1('kr-subbar')
+  ], exports.KRSubbar);
+
+}));
+(function(e){Object.keys(e).forEach(function(k){if(k.startsWith('KR')&&typeof e[k]==='function'){e[k.slice(2)]=e[k];delete e[k];}});})(krApp);
+//# sourceMappingURL=krubble-app.umd.js.map