@kodaris/krubble-app-components 1.0.69 → 1.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { KRContextMenu, KRDialog } from '@kodaris/krubble-components';
1
+ import { KRContextMenu, KRDialog, KRFilePreview } from '@kodaris/krubble-components';
2
2
  import { KRHttp } from '@kodaris/krubble-http';
3
3
 
4
4
  /**
@@ -6,39 +6,39 @@ import { KRHttp } from '@kodaris/krubble-http';
6
6
  * Copyright 2019 Google LLC
7
7
  * SPDX-License-Identifier: BSD-3-Clause
8
8
  */
9
- const t$3=globalThis,e$7=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$7&&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$7)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$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
9
+ const t$4=globalThis,e$7=t$4.ShadowRoot&&(void 0===t$4.ShadyCSS||t$4.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)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$7&&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$3),i$5=(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$3)},S$1=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$4.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$3=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
10
10
 
11
11
  /**
12
12
  * @license
13
13
  * Copyright 2017 Google LLC
14
14
  * SPDX-License-Identifier: BSD-3-Clause
15
- */const{is:i$3,defineProperty:e$6,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$1={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$1){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$6(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$1}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,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$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.2");
15
+ */const{is:i$4,defineProperty:e$6,getOwnPropertyDescriptor:h$2,getOwnPropertyNames:r$3,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$1=globalThis,c$2=a$1.trustedTypes,l$1=c$2?c$2.emptyScript:"",p$2=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$3={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$4(t,s),b$1={attribute:true,type:String,converter:u$3,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$1){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$6(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$2(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$1}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$3(s));}else void 0!==s&&i.push(c$3(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$3).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$3;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,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$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$2?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.2");
16
16
 
17
17
  /**
18
18
  * @license
19
19
  * Copyright 2017 Google LLC
20
20
  * SPDX-License-Identifier: BSD-3-Clause
21
21
  */
22
- const t$2=globalThis,i$2=t=>t,s$1=t$2.trustedTypes,e$5=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r$2=`<${n$1}>`,l=document,c=()=>l.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,d=t=>u(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l.createTreeWalker(l,129);function V(t,i){if(!u(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_:void 0!==u[1]?c=m:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p):void 0!==u[3]&&(c=p):c===p?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p:'"'===u[3]?$:g):c===$||c===g?c=p:c===_||c===m?c=v:(c=p,n=void 0);const x=c===p&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r$2:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(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=M(t,h._$AS(t,i.values),h,e)),i}class R{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??l).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l,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 k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,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=M(this,t,i),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(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!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.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=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u(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 k(this.O(c()),this.O(c()),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,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$2(t).nextSibling;i$2(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,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=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||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){M(this,t);}}const B=t$2.litHtmlPolyfillSupport;B?.(S,k),(t$2.litHtmlVersions??=[]).push("3.3.2");const D=(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 k(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
22
+ const t$3=globalThis,i$3=t=>t,s$2=t$3.trustedTypes,e$5=s$2?s$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,h$1="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r$2=`<${n$1}>`,l=document,c$1=()=>l.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$2=Array.isArray,d=t=>u$2(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m$1=/>/g,p$1=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l.createTreeWalker(l,129);function V(t,i){if(!u$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v$1;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v$1?"!--"===u[1]?c=_:void 0!==u[1]?c=m$1:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$1):void 0!==u[3]&&(c=p$1):c===p$1?">"===u[0]?(c=n??v$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$1:'"'===u[3]?$:g):c===$||c===g?c=p$1:c===_||c===m$1?c=v$1:(c=p$1,n=void 0);const x=c===p$1&&t[i+1].startsWith("/>")?" ":"";l+=c===v$1?s+r$2:d>=0?(e.push(a),s.slice(0,d)+h$1+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h$1)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$2?s$2.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c$1()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c$1());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function M$1(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(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=M$1(t,h._$AS(t,i.values),h,e)),i}class R{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??l).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l,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 k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,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=M$1(this,t,i),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(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!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.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=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u$2(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 k(this.O(c$1()),this.O(c$1()),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,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$3(t).nextSibling;i$3(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,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=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$1(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M$1(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$1(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||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){M$1(this,t);}}const j={I:k},B=t$3.litHtmlPolyfillSupport;B?.(S,k),(t$3.litHtmlVersions??=[]).push("3.3.2");const D=(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 k(i.insertBefore(c$1(),t),t,void 0,s??{});}return h._$AI(t),h};
23
23
 
24
24
  /**
25
25
  * @license
26
26
  * Copyright 2017 Google LLC
27
27
  * SPDX-License-Identifier: BSD-3-Clause
28
- */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=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};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.2");
28
+ */const s$1=globalThis;let i$2 = 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=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.2");
29
29
 
30
30
  /**
31
31
  * @license
32
32
  * Copyright 2017 Google LLC
33
33
  * SPDX-License-Identifier: BSD-3-Clause
34
34
  */
35
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer(()=>{customElements.define(t,e);}):customElements.define(t,e);};
35
+ const t$2=t=>(e,o)=>{ void 0!==o?o.addInitializer(()=>{customElements.define(t,e);}):customElements.define(t,e);};
36
36
 
37
37
  /**
38
38
  * @license
39
39
  * Copyright 2017 Google LLC
40
40
  * SPDX-License-Identifier: BSD-3-Clause
41
- */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,true,r);},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,true,r);}}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)}
41
+ */const o$1={attribute:true,type:String,converter:u$3,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,true,r);},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,true,r);}}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)}
42
42
 
43
43
  /**
44
44
  * @license
@@ -64,19 +64,19 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
64
64
  * Copyright 2017 Google LLC
65
65
  * SPDX-License-Identifier: BSD-3-Clause
66
66
  */
67
- 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)}}
67
+ const t$1={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = 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)}};
68
68
 
69
69
  /**
70
70
  * @license
71
71
  * Copyright 2017 Google LLC
72
72
  * SPDX-License-Identifier: BSD-3-Clause
73
- */let e$1 = class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)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$1.directiveName="unsafeHTML",e$1.resultType=1;const o=e$2(e$1);
73
+ */let e$1 = class e extends i$1{constructor(i){if(super(i),this.it=A,i.type!==t$1.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)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$1.directiveName="unsafeHTML",e$1.resultType=1;const o=e$2(e$1);
74
74
 
75
75
  /**
76
76
  * @license
77
77
  * Copyright 2018 Google LLC
78
78
  * SPDX-License-Identifier: BSD-3-Clause
79
- */const e=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 E}});
79
+ */const e=e$2(class extends i$1{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.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 E}});
80
80
 
81
81
  var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
82
82
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -84,7 +84,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
84
84
  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;
85
85
  return c > 3 && r && Object.defineProperty(target, key, r), r;
86
86
  };
87
- let KRNavItemEdit = class KRNavItemEdit extends i$1 {
87
+ let KRNavItemEdit = class KRNavItemEdit extends i$2 {
88
88
  constructor() {
89
89
  super(...arguments);
90
90
  this.label = '';
@@ -188,7 +188,7 @@ let KRNavItemEdit = class KRNavItemEdit extends i$1 {
188
188
  `;
189
189
  }
190
190
  };
191
- KRNavItemEdit.styles = i$4 `
191
+ KRNavItemEdit.styles = i$5 `
192
192
  :host {
193
193
  display: block;
194
194
  width: 360px;
@@ -287,7 +287,7 @@ __decorate$6([
287
287
  r()
288
288
  ], KRNavItemEdit.prototype, "active", void 0);
289
289
  KRNavItemEdit = __decorate$6([
290
- t$1('kr-nav-item-edit')
290
+ t$2('kr-nav-item-edit')
291
291
  ], KRNavItemEdit);
292
292
 
293
293
  var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -349,7 +349,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
349
349
  * - Don't hardcode breadcrumbs
350
350
  * - Look at renderNormalFooter and renderEditFooter and see if that is what we want to do
351
351
  */
352
- let KRScaffold = class KRScaffold extends i$1 {
352
+ let KRScaffold = class KRScaffold extends i$2 {
353
353
  constructor() {
354
354
  super();
355
355
  /**
@@ -1513,7 +1513,7 @@ let KRScaffold = class KRScaffold extends i$1 {
1513
1513
  `;
1514
1514
  }
1515
1515
  };
1516
- KRScaffold.styles = i$4 `
1516
+ KRScaffold.styles = i$5 `
1517
1517
  :host {
1518
1518
  display: flex;
1519
1519
  flex-direction: column;
@@ -2331,7 +2331,7 @@ __decorate$5([
2331
2331
  r()
2332
2332
  ], KRScaffold.prototype, "pendingRequests", void 0);
2333
2333
  KRScaffold = __decorate$5([
2334
- t$1('kr-scaffold')
2334
+ t$2('kr-scaffold')
2335
2335
  ], KRScaffold);
2336
2336
 
2337
2337
  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2368,7 +2368,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
2368
2368
  * @property {KRScreenNavItem[]} items - Navigation items as JSON array
2369
2369
  * @property {string} activeId - Currently active item ID
2370
2370
  */
2371
- let KRScreenNav = class KRScreenNav extends i$1 {
2371
+ let KRScreenNav = class KRScreenNav extends i$2 {
2372
2372
  constructor() {
2373
2373
  super(...arguments);
2374
2374
  /**
@@ -2484,7 +2484,7 @@ let KRScreenNav = class KRScreenNav extends i$1 {
2484
2484
  `;
2485
2485
  }
2486
2486
  };
2487
- KRScreenNav.styles = i$4 `
2487
+ KRScreenNav.styles = i$5 `
2488
2488
  :host {
2489
2489
  display: flex;
2490
2490
  height: 100%;
@@ -2589,7 +2589,7 @@ __decorate$4([
2589
2589
  n({ type: String })
2590
2590
  ], KRScreenNav.prototype, "activeId", void 0);
2591
2591
  KRScreenNav = __decorate$4([
2592
- t$1('kr-screen-nav')
2592
+ t$2('kr-screen-nav')
2593
2593
  ], KRScreenNav);
2594
2594
 
2595
2595
  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2617,7 +2617,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
2617
2617
  *
2618
2618
  * @property {string} title - Section title (e.g., "Company Details")
2619
2619
  */
2620
- let KRScreenDetail = class KRScreenDetail extends i$1 {
2620
+ let KRScreenDetail = class KRScreenDetail extends i$2 {
2621
2621
  constructor() {
2622
2622
  super(...arguments);
2623
2623
  /**
@@ -2641,7 +2641,7 @@ let KRScreenDetail = class KRScreenDetail extends i$1 {
2641
2641
  `;
2642
2642
  }
2643
2643
  };
2644
- KRScreenDetail.styles = i$4 `
2644
+ KRScreenDetail.styles = i$5 `
2645
2645
  :host {
2646
2646
  display: flex;
2647
2647
  flex-direction: column;
@@ -2690,7 +2690,7 @@ __decorate$3([
2690
2690
  n({ type: String })
2691
2691
  ], KRScreenDetail.prototype, "title", void 0);
2692
2692
  KRScreenDetail = __decorate$3([
2693
- t$1('kr-screen-detail')
2693
+ t$2('kr-screen-detail')
2694
2694
  ], KRScreenDetail);
2695
2695
 
2696
2696
  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2704,7 +2704,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
2704
2704
  *
2705
2705
  * @slot - Content to display in the subbar (right side)
2706
2706
  */
2707
- let KRSubbar = class KRSubbar extends i$1 {
2707
+ let KRSubbar = class KRSubbar extends i$2 {
2708
2708
  constructor() {
2709
2709
  super(...arguments);
2710
2710
  /**
@@ -2832,7 +2832,7 @@ let KRSubbar = class KRSubbar extends i$1 {
2832
2832
  `;
2833
2833
  }
2834
2834
  };
2835
- KRSubbar.styles = i$4 `
2835
+ KRSubbar.styles = i$5 `
2836
2836
  :host {
2837
2837
  display: flex;
2838
2838
  flex-direction: row;
@@ -2906,7 +2906,7 @@ __decorate$2([
2906
2906
  n({ type: Boolean })
2907
2907
  ], KRSubbar.prototype, "menu", void 0);
2908
2908
  KRSubbar = __decorate$2([
2909
- t$1('kr-subbar')
2909
+ t$2('kr-subbar')
2910
2910
  ], KRSubbar);
2911
2911
 
2912
2912
  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3045,7 +3045,7 @@ class KRRouter {
3045
3045
  KRRouter.base = '';
3046
3046
  KRRouter.routes = [];
3047
3047
  KRRouter.elementCache = new Map();
3048
- let KRRouterOutlet = class KRRouterOutlet extends i$1 {
3048
+ let KRRouterOutlet = class KRRouterOutlet extends i$2 {
3049
3049
  constructor() {
3050
3050
  super(...arguments);
3051
3051
  this.level = -1;
@@ -3090,16 +3090,29 @@ let KRRouterOutlet = class KRRouterOutlet extends i$1 {
3090
3090
  return b `${el}`;
3091
3091
  }
3092
3092
  };
3093
- KRRouterOutlet.styles = i$4 `
3093
+ KRRouterOutlet.styles = i$5 `
3094
3094
  :host {
3095
3095
  display: block;
3096
3096
  height: 100%;
3097
3097
  }
3098
3098
  `;
3099
3099
  KRRouterOutlet = __decorate$1([
3100
- t$1('kr-router-outlet')
3100
+ t$2('kr-router-outlet')
3101
3101
  ], KRRouterOutlet);
3102
3102
 
3103
+ /**
3104
+ * @license
3105
+ * Copyright 2020 Google LLC
3106
+ * SPDX-License-Identifier: BSD-3-Clause
3107
+ */const {I:t}=j,i=o=>o,s=()=>document.createComment(""),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options);}else {const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t);}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t;}}}return e},u$1=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove();};
3108
+
3109
+ /**
3110
+ * @license
3111
+ * Copyright 2017 Google LLC
3112
+ * SPDX-License-Identifier: BSD-3-Clause
3113
+ */
3114
+ const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e$2(class extends i$1{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=M(s),{values:p$1,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p$1;const h$1=this.ut??=[],v$1=[];let m,y,x=0,j=d.length-1,k=0,w=p$1.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h$1[x]===a[k])v$1[k]=u$1(d[x],p$1[k]),x++,k++;else if(h$1[j]===a[w])v$1[w]=u$1(d[j],p$1[w]),j--,w--;else if(h$1[x]===a[w])v$1[w]=u$1(d[x],p$1[w]),v(s,v$1[w+1],d[x]),x++,w--;else if(h$1[j]===a[k])v$1[k]=u$1(d[j],p$1[k]),v(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h$1,x,j)),m.has(h$1[x]))if(m.has(h$1[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=v(s,d[x]);u$1(e,p$1[k]),v$1[k]=e;}else v$1[k]=u$1(t,p$1[k]),v(s,d[x],t),d[e]=null;k++;}else h(d[j]),j--;else h(d[x]),x++;for(;k<=w;){const e=v(s,v$1[w+1]);u$1(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&h(e);}return this.ut=a,p(s,v$1),E}});
3115
+
3103
3116
  /**
3104
3117
  * marked v12.0.2 - a markdown parser
3105
3118
  * Copyright (c) 2011-2024, Christopher Jeffrey. (MIT Licensed)
@@ -5532,6 +5545,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
5532
5545
  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;
5533
5546
  return c > 3 && r && Object.defineProperty(target, key, r), r;
5534
5547
  };
5548
+ /** Image MIME types the chatbot accepts (matches what Bedrock can ingest). */
5549
+ const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
5535
5550
  /**
5536
5551
  * AI chatbot component with SSE streaming.
5537
5552
  *
@@ -5552,7 +5567,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
5552
5567
  * ## Usage
5553
5568
  * ```html
5554
5569
  * <kr-chatbot
5555
- * title="AI Assistant"
5570
+ * label="AI Assistant"
5556
5571
  * .send=${(params) => {
5557
5572
  * return fetch('/api/ai/chat/stream', {
5558
5573
  * method: 'POST',
@@ -5569,7 +5584,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
5569
5584
  * @fires message-submit - When the user sends a message. Cancelable. Detail: `{ message: string }`
5570
5585
  * @fires stream-event - Dispatched for every SSE message received. Detail contains the parsed event data.
5571
5586
  */
5572
- let KRChatbot = class KRChatbot extends i$1 {
5587
+ let KRChatbot = class KRChatbot extends i$2 {
5573
5588
  constructor() {
5574
5589
  super(...arguments);
5575
5590
  // --- Private properties ---
@@ -5587,20 +5602,33 @@ let KRChatbot = class KRChatbot extends i$1 {
5587
5602
  this._dragStartTop = 0;
5588
5603
  this._resizeStartW = 0;
5589
5604
  this._resizeStartH = 0;
5605
+ /** Counter for depth-aware dragenter/dragleave tracking. */
5606
+ this._dragDepth = 0;
5607
+ /** Monotonic id source for pending attachments. */
5608
+ this._pendingSeq = 0;
5590
5609
  // --- @property (public API) ---
5591
5610
  /**
5592
5611
  * Callback function for sending messages. Receives the user's message and
5593
5612
  * current conversation history. Must return a Response with a streaming SSE body.
5613
+ *
5614
+ * Optional — when not set, the chatbot uses its built-in default that streams
5615
+ * from the Kodaris Bedrock conversation endpoints. Set this to override.
5594
5616
  */
5595
5617
  this.send = null;
5596
5618
  /**
5597
5619
  * Callback function called when the user clears the conversation.
5598
5620
  * Must return a Promise — messages are only cleared if it resolves.
5621
+ *
5622
+ * Optional — when not set, the chatbot uses its built-in default that clears
5623
+ * the Kodaris Bedrock conversation state. Set this to override.
5599
5624
  */
5600
5625
  this.clear = null;
5601
5626
  /**
5602
5627
  * Callback function called on init to load existing conversation messages.
5603
5628
  * Must return a Promise that resolves with an array of KRChatbotMessage.
5629
+ *
5630
+ * Optional — when not set, the chatbot uses its built-in default that loads
5631
+ * existing messages from the Kodaris Bedrock conversation. Set this to override.
5604
5632
  */
5605
5633
  this.load = null;
5606
5634
  /**
@@ -5609,13 +5637,9 @@ let KRChatbot = class KRChatbot extends i$1 {
5609
5637
  */
5610
5638
  this.messages = [];
5611
5639
  /**
5612
- * Header title text.
5613
- */
5614
- this.title = 'Kat';
5615
- /**
5616
- * Header subtitle text (shown below title with a green status dot).
5640
+ * Header label text.
5617
5641
  */
5618
- this.subtitle = '';
5642
+ this.label = 'Kat';
5619
5643
  /**
5620
5644
  * Input placeholder text.
5621
5645
  */
@@ -5624,11 +5648,31 @@ let KRChatbot = class KRChatbot extends i$1 {
5624
5648
  * Whether the chat panel is open. Only relevant in floating mode.
5625
5649
  */
5626
5650
  this.opened = false;
5651
+ /**
5652
+ * Hide the built-in floating toggle button. Use this when an external
5653
+ * control (e.g. the site-editor bar) owns opening the chat — the panel is
5654
+ * then driven via the `open()` / `close()` / `toggle()` methods.
5655
+ */
5656
+ this.hideToggle = false;
5657
+ /**
5658
+ * Layout mode.
5659
+ * - `'floating'` (default): the chatbot is a fixed bottom-right widget with a
5660
+ * toggle button, and the panel can be dragged and resized. This is the
5661
+ * traditional chat-widget appearance.
5662
+ * - `'inline'`: the chatbot drops its fixed positioning and fills its parent
5663
+ * container (100% width/height, no border radius/shadow, no toggle, no
5664
+ * drag/resize). The panel is always open. Use this to embed the chat as a
5665
+ * full page or panel region.
5666
+ */
5667
+ this.variant = 'floating';
5627
5668
  // --- @state (internal) ---
5628
5669
  this._inputValue = '';
5629
5670
  this._isStreaming = false;
5630
- this._statusText = '';
5631
5671
  this._error = '';
5672
+ /** Images staged in the composer, before the message is sent. */
5673
+ this._pendingInternalFiles = [];
5674
+ /** True while a file is being dragged over the panel (shows the drop overlay). */
5675
+ this._isDraggingFile = false;
5632
5676
  this._handleMouseMove = (e) => {
5633
5677
  if (this._isDragging) {
5634
5678
  let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
@@ -5690,12 +5734,27 @@ let KRChatbot = class KRChatbot extends i$1 {
5690
5734
  // --- Lifecycle ---
5691
5735
  connectedCallback() {
5692
5736
  super.connectedCallback();
5693
- if (this.load) {
5694
- this.load().then((messages) => {
5695
- if (messages && messages.length) {
5696
- this.messages = messages;
5697
- }
5698
- }).catch(() => { });
5737
+ // Default to loading existing messages from the Kodaris Bedrock conversation
5738
+ // when the consumer hasn't provided their own `load`. The endpoint returns
5739
+ // messages already in KRChatbotMessage shape ({ type, content, images }), so
5740
+ // they pass straight through.
5741
+ if (!this.load) {
5742
+ this.load = () => KRHttp.fetch({
5743
+ url: '/api/system/integration/aws/bedrock/getConversationMessages',
5744
+ })
5745
+ .then((r) => r.json())
5746
+ .then((res) => res.data || []);
5747
+ }
5748
+ this.load().then((messages) => {
5749
+ if (messages && messages.length) {
5750
+ this.messages = messages;
5751
+ }
5752
+ }).catch(() => { });
5753
+ // Inline mode fills its container and is always open — the floating widget's
5754
+ // toggle/drag/resize state (including any persisted layout) doesn't apply.
5755
+ if (this.variant === 'inline') {
5756
+ this.opened = true;
5757
+ return;
5699
5758
  }
5700
5759
  this._restoreState();
5701
5760
  }
@@ -5707,9 +5766,11 @@ let KRChatbot = class KRChatbot extends i$1 {
5707
5766
  }
5708
5767
  document.removeEventListener('mousemove', this._handleMouseMove);
5709
5768
  document.removeEventListener('mouseup', this._handleMouseUp);
5769
+ // Release any object URLs still held by staged attachments.
5770
+ this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
5710
5771
  }
5711
5772
  updated(changed) {
5712
- if (changed.has('messages') || changed.has('_statusText')) {
5773
+ if (changed.has('messages')) {
5713
5774
  if (!this._userHasScrolledUp && !this._isStreaming && this._messagesEl) {
5714
5775
  requestAnimationFrame(() => {
5715
5776
  if (this._messagesEl) {
@@ -5733,6 +5794,22 @@ let KRChatbot = class KRChatbot extends i$1 {
5733
5794
  stop() {
5734
5795
  this._handleStop();
5735
5796
  }
5797
+ /** Open the chat panel. */
5798
+ open() {
5799
+ if (!this.opened) {
5800
+ this._handleToggle();
5801
+ }
5802
+ }
5803
+ /** Close the chat panel. */
5804
+ close() {
5805
+ if (this.opened) {
5806
+ this._handleToggle();
5807
+ }
5808
+ }
5809
+ /** Toggle the chat panel open/closed. */
5810
+ toggle() {
5811
+ this._handleToggle();
5812
+ }
5736
5813
  // --- Private methods ---
5737
5814
  /**
5738
5815
  * Shows a full-viewport transparent overlay during drag/resize operations.
@@ -5767,6 +5844,10 @@ let KRChatbot = class KRChatbot extends i$1 {
5767
5844
  }
5768
5845
  }
5769
5846
  _handleHeaderMouseDown(e) {
5847
+ // Inline mode fills its parent — dragging the panel doesn't apply.
5848
+ if (this.variant === 'inline') {
5849
+ return;
5850
+ }
5770
5851
  // Ignore clicks on buttons inside the header
5771
5852
  if (e.target.closest('button')) {
5772
5853
  return;
@@ -5792,6 +5873,10 @@ let KRChatbot = class KRChatbot extends i$1 {
5792
5873
  document.addEventListener('mouseup', this._handleMouseUp);
5793
5874
  }
5794
5875
  _handleResizeMouseDown(e) {
5876
+ // Inline mode fills its parent — resizing the panel doesn't apply.
5877
+ if (this.variant === 'inline') {
5878
+ return;
5879
+ }
5795
5880
  if (!this._panelEl) {
5796
5881
  return;
5797
5882
  }
@@ -5901,14 +5986,132 @@ let KRChatbot = class KRChatbot extends i$1 {
5901
5986
  this._handleSubmit();
5902
5987
  }
5903
5988
  }
5989
+ // --- Attachments ---
5990
+ _openFilePicker() {
5991
+ this._fileInputEl?.click();
5992
+ }
5993
+ _handleFileInputChange(e) {
5994
+ const input = e.target;
5995
+ if (input.files) {
5996
+ this._addFiles(input.files);
5997
+ }
5998
+ // Reset so picking the same file again re-fires change.
5999
+ input.value = '';
6000
+ }
6001
+ _handlePaste(e) {
6002
+ const items = e.clipboardData?.items;
6003
+ if (!items) {
6004
+ return;
6005
+ }
6006
+ const files = [];
6007
+ for (let i = 0; i < items.length; i++) {
6008
+ if (items[i].kind === 'file') {
6009
+ const file = items[i].getAsFile();
6010
+ if (file) {
6011
+ files.push(file);
6012
+ }
6013
+ }
6014
+ }
6015
+ if (files.length) {
6016
+ e.preventDefault();
6017
+ this._addFiles(files);
6018
+ }
6019
+ }
6020
+ _handleDragEnter(e) {
6021
+ if (!this._hasFiles(e)) {
6022
+ return;
6023
+ }
6024
+ e.preventDefault();
6025
+ this._dragDepth++;
6026
+ this._isDraggingFile = true;
6027
+ }
6028
+ _handleDragOver(e) {
6029
+ if (!this._hasFiles(e)) {
6030
+ return;
6031
+ }
6032
+ // Required so the drop event fires.
6033
+ e.preventDefault();
6034
+ }
6035
+ _handleDragLeave(e) {
6036
+ if (!this._hasFiles(e)) {
6037
+ return;
6038
+ }
6039
+ this._dragDepth--;
6040
+ if (this._dragDepth <= 0) {
6041
+ this._dragDepth = 0;
6042
+ this._isDraggingFile = false;
6043
+ }
6044
+ }
6045
+ _handleDrop(e) {
6046
+ if (!this._hasFiles(e)) {
6047
+ return;
6048
+ }
6049
+ e.preventDefault();
6050
+ this._dragDepth = 0;
6051
+ this._isDraggingFile = false;
6052
+ if (e.dataTransfer?.files) {
6053
+ this._addFiles(e.dataTransfer.files);
6054
+ }
6055
+ }
6056
+ _hasFiles(e) {
6057
+ return Array.from(e.dataTransfer?.types || []).includes('Files');
6058
+ }
6059
+ /** Stage a set of image files in the composer (held locally until send). */
6060
+ _addFiles(fileList) {
6061
+ const files = Array.from(fileList).filter((f) => ACCEPTED_IMAGE_TYPES.includes(f.type));
6062
+ if (!files.length) {
6063
+ return;
6064
+ }
6065
+ files.forEach((file) => {
6066
+ const pending = {
6067
+ localId: 'att-' + this._pendingSeq++,
6068
+ file,
6069
+ name: file.name,
6070
+ previewUrl: URL.createObjectURL(file),
6071
+ };
6072
+ this._pendingInternalFiles = [...this._pendingInternalFiles, pending];
6073
+ });
6074
+ }
6075
+ _removePending(localId) {
6076
+ const target = this._pendingInternalFiles.find((p) => p.localId === localId);
6077
+ if (target) {
6078
+ URL.revokeObjectURL(target.previewUrl);
6079
+ }
6080
+ this._pendingInternalFiles = this._pendingInternalFiles.filter((p) => p.localId !== localId);
6081
+ }
6082
+ _clearPending() {
6083
+ this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
6084
+ this._pendingInternalFiles = [];
6085
+ }
6086
+ /** Open the shared full-screen previewer for a message image. */
6087
+ _openImage(img) {
6088
+ KRFilePreview.open({
6089
+ src: `/api/system/integration/aws/bedrock/conversationImage/${img.internalFileID}/view`,
6090
+ name: img.niceName || 'image',
6091
+ });
6092
+ }
6093
+ /** Whether the send button is active: needs text or at least one image. */
6094
+ _canSend() {
6095
+ return Boolean(this._inputValue.trim()) || this._pendingInternalFiles.length > 0;
6096
+ }
5904
6097
  _handleSubmit() {
5905
- if (!this._inputValue.trim() || !this.send || this._isStreaming) {
6098
+ if (this._isStreaming) {
5906
6099
  return;
5907
6100
  }
5908
6101
  const messageText = this._inputValue.trim();
6102
+ const pending = this._pendingInternalFiles;
6103
+ // Allow sending an image with no text, but require at least one of them.
6104
+ if (!messageText && !pending.length) {
6105
+ return;
6106
+ }
6107
+ // The raw files sent to the backend. Sent images are shown once the
6108
+ // conversation reloads and they come back as stored internal files; the
6109
+ // just-sent message itself carries text only.
6110
+ const internalFiles = pending.map((p) => p.file);
5909
6111
  const submitEvent = new CustomEvent('message-submit', {
5910
6112
  detail: {
5911
6113
  message: messageText,
6114
+ internalFiles,
5912
6115
  },
5913
6116
  bubbles: true,
5914
6117
  composed: true,
@@ -5918,24 +6121,27 @@ let KRChatbot = class KRChatbot extends i$1 {
5918
6121
  if (submitEvent.defaultPrevented) {
5919
6122
  return;
5920
6123
  }
5921
- this.messages = [...this.messages, {
5922
- role: 'user',
5923
- content: messageText,
5924
- }];
6124
+ const userMessage = {
6125
+ type: 'user',
6126
+ content: messageText,
6127
+ };
6128
+ this.messages = [...this.messages, userMessage];
5925
6129
  this._inputValue = '';
5926
6130
  this._error = '';
5927
6131
  this._userHasScrolledUp = false;
6132
+ // Clear the composer and release its preview object URLs.
6133
+ this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
6134
+ this._pendingInternalFiles = [];
5928
6135
  // Reset textarea height
5929
6136
  if (this._inputEl) {
5930
6137
  this._inputEl.style.height = 'auto';
5931
6138
  }
5932
6139
  // Add empty assistant message to stream into
5933
6140
  this.messages = [...this.messages, {
5934
- role: 'assistant',
6141
+ type: 'assistant',
5935
6142
  content: '',
5936
6143
  }];
5937
6144
  this._isStreaming = true;
5938
- this._statusText = '';
5939
6145
  // Scroll user's message to the top (Gemini-style).
5940
6146
  // Set min-height on the assistant message = container height so there's enough
5941
6147
  // scroll room below the user message to push it to the top.
@@ -5957,9 +6163,34 @@ let KRChatbot = class KRChatbot extends i$1 {
5957
6163
  this._messagesEl.scrollTop = userMsgEl.offsetTop - this._messagesEl.offsetTop - 24;
5958
6164
  }
5959
6165
  });
6166
+ // Default to streaming from the Kodaris Bedrock conversation endpoints when
6167
+ // the consumer hasn't provided their own `send`.
6168
+ if (!this.send) {
6169
+ this.send = (params) => {
6170
+ // With images, post text + files as multipart; without, post plain JSON.
6171
+ if (params.internalFiles.length) {
6172
+ const form = new FormData();
6173
+ form.append('userText', params.message);
6174
+ params.internalFiles.forEach((file) => form.append('images', file));
6175
+ return KRHttp.fetch({
6176
+ url: '/api/system/integration/aws/bedrock/stream/invokeModelForConversationWithImages',
6177
+ method: 'POST',
6178
+ headers: { Accept: 'text/event-stream' },
6179
+ body: form,
6180
+ });
6181
+ }
6182
+ return KRHttp.fetch({
6183
+ url: '/api/system/integration/aws/bedrock/stream/invokeModelForConversationWithState',
6184
+ method: 'POST',
6185
+ headers: { Accept: 'text/event-stream' },
6186
+ body: { userText: params.message },
6187
+ });
6188
+ };
6189
+ }
5960
6190
  this.send({
5961
6191
  message: messageText,
5962
6192
  messages: this.messages.slice(0, -1),
6193
+ internalFiles,
5963
6194
  }).then((response) => {
5964
6195
  if (!response.ok) {
5965
6196
  this._handleStreamError('Request failed: ' + response.status);
@@ -5985,11 +6216,15 @@ let KRChatbot = class KRChatbot extends i$1 {
5985
6216
  this._reader = null;
5986
6217
  }
5987
6218
  this._isStreaming = false;
5988
- this._statusText = '';
5989
6219
  }
5990
6220
  _handleClear() {
6221
+ // Default to clearing the Kodaris Bedrock conversation state when the consumer
6222
+ // hasn't provided their own `clear`.
5991
6223
  if (!this.clear) {
5992
- return;
6224
+ this.clear = () => KRHttp.fetch({
6225
+ url: '/api/system/integration/aws/bedrock/clearConversationWithState',
6226
+ method: 'POST',
6227
+ });
5993
6228
  }
5994
6229
  this.clear().then(() => {
5995
6230
  if (this._reader) {
@@ -5998,7 +6233,6 @@ let KRChatbot = class KRChatbot extends i$1 {
5998
6233
  }
5999
6234
  this.messages = [];
6000
6235
  this._isStreaming = false;
6001
- this._statusText = '';
6002
6236
  this._error = '';
6003
6237
  this._inputValue = '';
6004
6238
  this._userHasScrolledUp = false;
@@ -6024,7 +6258,6 @@ let KRChatbot = class KRChatbot extends i$1 {
6024
6258
  this._reader.read().then((result) => {
6025
6259
  if (result.done) {
6026
6260
  this._isStreaming = false;
6027
- this._statusText = '';
6028
6261
  this._reader = null;
6029
6262
  return;
6030
6263
  }
@@ -6057,15 +6290,10 @@ let KRChatbot = class KRChatbot extends i$1 {
6057
6290
  bubbles: true,
6058
6291
  composed: true,
6059
6292
  }));
6060
- if (data.type === 'STATUS') {
6061
- if (data.message) {
6062
- this._statusText = String(data.message);
6063
- }
6064
- }
6065
- else if (data.type === 'REASONING_PART') {
6293
+ if (data.type === 'REASONING_PART') {
6066
6294
  if (data.message) {
6067
6295
  const lastIndex = this.messages.length - 1;
6068
- if (lastIndex >= 0 && this.messages[lastIndex].role === 'assistant') {
6296
+ if (lastIndex >= 0 && this.messages[lastIndex].type === 'assistant') {
6069
6297
  if (!this.messages[lastIndex].reasoning) {
6070
6298
  this.messages[lastIndex].reasoning = '';
6071
6299
  }
@@ -6076,9 +6304,8 @@ let KRChatbot = class KRChatbot extends i$1 {
6076
6304
  }
6077
6305
  else if (data.type === 'RESPONSE_PART') {
6078
6306
  if (data.message) {
6079
- this._statusText = '';
6080
6307
  const lastIndex = this.messages.length - 1;
6081
- if (lastIndex >= 0 && this.messages[lastIndex].role === 'assistant') {
6308
+ if (lastIndex >= 0 && this.messages[lastIndex].type === 'assistant') {
6082
6309
  this.messages[lastIndex].content += String(data.message);
6083
6310
  this.requestUpdate();
6084
6311
  }
@@ -6089,7 +6316,6 @@ let KRChatbot = class KRChatbot extends i$1 {
6089
6316
  }
6090
6317
  if (data.finished) {
6091
6318
  this._isStreaming = false;
6092
- this._statusText = '';
6093
6319
  this._reader = null;
6094
6320
  }
6095
6321
  }
@@ -6103,7 +6329,6 @@ let KRChatbot = class KRChatbot extends i$1 {
6103
6329
  }
6104
6330
  _handleStreamError(message) {
6105
6331
  this._isStreaming = false;
6106
- this._statusText = '';
6107
6332
  this._error = message;
6108
6333
  if (this._reader) {
6109
6334
  this._reader.cancel();
@@ -6112,7 +6337,7 @@ let KRChatbot = class KRChatbot extends i$1 {
6112
6337
  // Remove the empty assistant message if it has no content
6113
6338
  if (this.messages.length > 0) {
6114
6339
  const lastMessage = this.messages[this.messages.length - 1];
6115
- if (lastMessage.role === 'assistant' && !lastMessage.content) {
6340
+ if (lastMessage.type === 'assistant' && !lastMessage.content) {
6116
6341
  this.messages = this.messages.slice(0, -1);
6117
6342
  }
6118
6343
  }
@@ -6120,78 +6345,103 @@ let KRChatbot = class KRChatbot extends i$1 {
6120
6345
  // --- Render ---
6121
6346
  render() {
6122
6347
  return b `
6123
- <button
6124
- class=${e({
6348
+ ${(this.hideToggle || this.variant === 'inline') ? A : b `
6349
+ <button
6350
+ class=${e({
6125
6351
  'toggle': true,
6126
6352
  'toggle--hidden': this.opened,
6127
6353
  })}
6128
- @click=${this._handleToggle}
6129
- title="Open chat"
6130
- >
6131
- <svg
6132
- viewBox="0 0 24 24"
6133
- fill="none"
6134
- stroke="currentColor"
6135
- stroke-width="2"
6136
- stroke-linecap="round"
6137
- class="toggle-icon"
6354
+ @click=${this._handleToggle}
6355
+ title="Open chat"
6138
6356
  >
6139
- <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
6140
- <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
6141
- </svg>
6142
- </button>
6357
+ <svg
6358
+ viewBox="0 0 24 24"
6359
+ fill="none"
6360
+ stroke="currentColor"
6361
+ stroke-width="2"
6362
+ stroke-linecap="round"
6363
+ class="toggle-icon"
6364
+ >
6365
+ <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
6366
+ <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
6367
+ </svg>
6368
+ </button>
6369
+ `}
6143
6370
 
6144
- <div class=${e({
6371
+ <div
6372
+ class=${e({
6145
6373
  'panel': true,
6146
6374
  'panel--opened': this.opened,
6147
- })}>
6148
- <div
6149
- class="resize resize--n"
6150
- data-dir="n"
6151
- @mousedown=${this._handleResizeMouseDown}
6152
- ></div>
6153
- <div
6154
- class="resize resize--s"
6155
- data-dir="s"
6156
- @mousedown=${this._handleResizeMouseDown}
6157
- ></div>
6158
- <div
6159
- class="resize resize--w"
6160
- data-dir="w"
6161
- @mousedown=${this._handleResizeMouseDown}
6162
- ></div>
6163
- <div
6164
- class="resize resize--e"
6165
- data-dir="e"
6166
- @mousedown=${this._handleResizeMouseDown}
6167
- ></div>
6168
- <div
6169
- class="resize resize--nw"
6170
- data-dir="nw"
6171
- @mousedown=${this._handleResizeMouseDown}
6172
- ></div>
6173
- <div
6174
- class="resize resize--ne"
6175
- data-dir="ne"
6176
- @mousedown=${this._handleResizeMouseDown}
6177
- ></div>
6178
- <div
6179
- class="resize resize--sw"
6180
- data-dir="sw"
6181
- @mousedown=${this._handleResizeMouseDown}
6182
- ></div>
6183
- <div
6184
- class="resize resize--se"
6185
- data-dir="se"
6186
- @mousedown=${this._handleResizeMouseDown}
6187
- ></div>
6375
+ })}
6376
+ @dragenter=${this._handleDragEnter}
6377
+ @dragover=${this._handleDragOver}
6378
+ @dragleave=${this._handleDragLeave}
6379
+ @drop=${this._handleDrop}
6380
+ >
6381
+ ${this._isDraggingFile ? b `
6382
+ <div class="drop-overlay">
6383
+ <svg
6384
+ xmlns="http://www.w3.org/2000/svg"
6385
+ fill="none"
6386
+ viewBox="0 0 24 24"
6387
+ stroke-width="1.5"
6388
+ stroke="currentColor"
6389
+ >
6390
+ <path
6391
+ stroke-linecap="round"
6392
+ stroke-linejoin="round"
6393
+ d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
6394
+ />
6395
+ </svg>
6396
+ <span>Drop images to attach</span>
6397
+ </div>
6398
+ ` : A}
6399
+ ${this.variant === 'inline' ? A : b `
6400
+ <div
6401
+ class="resize resize--n"
6402
+ data-dir="n"
6403
+ @mousedown=${this._handleResizeMouseDown}
6404
+ ></div>
6405
+ <div
6406
+ class="resize resize--s"
6407
+ data-dir="s"
6408
+ @mousedown=${this._handleResizeMouseDown}
6409
+ ></div>
6410
+ <div
6411
+ class="resize resize--w"
6412
+ data-dir="w"
6413
+ @mousedown=${this._handleResizeMouseDown}
6414
+ ></div>
6415
+ <div
6416
+ class="resize resize--e"
6417
+ data-dir="e"
6418
+ @mousedown=${this._handleResizeMouseDown}
6419
+ ></div>
6420
+ <div
6421
+ class="resize resize--nw"
6422
+ data-dir="nw"
6423
+ @mousedown=${this._handleResizeMouseDown}
6424
+ ></div>
6425
+ <div
6426
+ class="resize resize--ne"
6427
+ data-dir="ne"
6428
+ @mousedown=${this._handleResizeMouseDown}
6429
+ ></div>
6430
+ <div
6431
+ class="resize resize--sw"
6432
+ data-dir="sw"
6433
+ @mousedown=${this._handleResizeMouseDown}
6434
+ ></div>
6435
+ <div
6436
+ class="resize resize--se"
6437
+ data-dir="se"
6438
+ @mousedown=${this._handleResizeMouseDown}
6439
+ ></div>
6440
+ `}
6188
6441
  <div class="header" @mousedown=${this._handleHeaderMouseDown}>
6189
6442
  <div class="header-left">
6190
6443
  <div class="header-info">
6191
- <span class="header-title">${this.title}</span>
6192
- ${this.subtitle ? b `
6193
- <span class="header-subtitle">${this.subtitle}</span>
6194
- ` : A}
6444
+ <span class="header-title">${this.label}</span>
6195
6445
  </div>
6196
6446
  </div>
6197
6447
  <div class="header-actions">
@@ -6217,63 +6467,84 @@ let KRChatbot = class KRChatbot extends i$1 {
6217
6467
  </svg>
6218
6468
  </button>
6219
6469
  ` : A}
6220
- <button
6221
- class="header-action"
6222
- @click=${this._handleToggle}
6223
- title="Close"
6224
- >
6225
- <svg
6226
- xmlns="http://www.w3.org/2000/svg"
6227
- fill="none"
6228
- viewBox="0 0 24 24"
6229
- stroke-width="2"
6230
- stroke="currentColor"
6231
- class="header-action-icon"
6470
+ ${this.variant === 'inline' ? A : b `
6471
+ <button
6472
+ class="header-action"
6473
+ @click=${this._handleToggle}
6474
+ title="Close"
6232
6475
  >
6233
- <path
6234
- stroke-linecap="round"
6235
- stroke-linejoin="round"
6236
- d="M6 18 18 6M6 6l12 12"
6237
- />
6238
- </svg>
6239
- </button>
6476
+ <svg
6477
+ xmlns="http://www.w3.org/2000/svg"
6478
+ fill="none"
6479
+ viewBox="0 0 24 24"
6480
+ stroke-width="2"
6481
+ stroke="currentColor"
6482
+ class="header-action-icon"
6483
+ >
6484
+ <path
6485
+ stroke-linecap="round"
6486
+ stroke-linejoin="round"
6487
+ d="M6 18 18 6M6 6l12 12"
6488
+ />
6489
+ </svg>
6490
+ </button>
6491
+ `}
6240
6492
  </div>
6241
6493
  </div>
6242
6494
 
6243
6495
  <div class="messages" @scroll=${this._handleMessagesScroll}>
6244
- ${this.messages.length === 0 ? b `
6245
- <div class="empty">
6246
- <span class="empty-text">What can I help you with?</span>
6247
- </div>
6248
- ` : A}
6249
- ${this.messages.map((msg) => b `
6250
- <div class=${e({
6496
+ <div class="messages-inner">
6497
+ ${this.messages.length === 0 ? b `
6498
+ <div class="empty">
6499
+ <span class="empty-text">What can I help you with?</span>
6500
+ </div>
6501
+ ` : A}
6502
+ ${this.messages.map((msg) => b `
6503
+ <div class=${e({
6251
6504
  'message': true,
6252
- 'message--user': msg.role === 'user',
6253
- 'message--assistant': msg.role === 'assistant',
6505
+ 'message--user': msg.type === 'user',
6506
+ 'message--assistant': msg.type === 'assistant',
6254
6507
  })}>
6255
- ${msg.reasoning ? b `
6256
- <details class="reasoning">
6257
- <summary>Thinking</summary>
6258
- <div class="reasoning-content">${msg.reasoning}</div>
6259
- </details>
6260
- ` : A}
6261
- ${msg.content ? b `
6262
- <div class="message-content">
6263
- ${msg.role === 'user'
6508
+ ${msg.reasoning ? b `
6509
+ <details class="reasoning">
6510
+ <summary>Thinking</summary>
6511
+ <div class="reasoning-content">${msg.reasoning}</div>
6512
+ </details>
6513
+ ` : A}
6514
+ ${msg.internalFiles && msg.internalFiles.length ? b `
6515
+ <div class="attachments">
6516
+ ${msg.internalFiles.map((img) => b `
6517
+ <button
6518
+ class="attachment"
6519
+ type="button"
6520
+ title=${img.niceName || 'View image'}
6521
+ @click=${() => this._openImage(img)}
6522
+ >
6523
+ <img
6524
+ src="/api/system/integration/aws/bedrock/conversationImage/${img.internalFileID}/view"
6525
+ alt=${img.niceName || ''}
6526
+ />
6527
+ </button>
6528
+ `)}
6529
+ </div>
6530
+ ` : A}
6531
+ ${msg.content ? b `
6532
+ <div class="message-content">
6533
+ ${msg.type === 'user'
6264
6534
  ? msg.content
6265
6535
  : o(marked.parse(msg.content, { breaks: true }))}
6266
- </div>
6267
- ` : A}
6268
- ${msg.role === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? b `
6269
- <div class="typing">
6270
- <span></span>
6271
- <span></span>
6272
- <span></span>
6273
- </div>
6274
- ` : A}
6275
- </div>
6276
- `)}
6536
+ </div>
6537
+ ` : A}
6538
+ ${msg.type === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? b `
6539
+ <div class="typing">
6540
+ <span></span>
6541
+ <span></span>
6542
+ <span></span>
6543
+ </div>
6544
+ ` : A}
6545
+ </div>
6546
+ `)}
6547
+ </div>
6277
6548
  </div>
6278
6549
 
6279
6550
  ${this._error ? b `
@@ -6299,8 +6570,48 @@ let KRChatbot = class KRChatbot extends i$1 {
6299
6570
  ` : A}
6300
6571
 
6301
6572
  <div class="footer">
6573
+ ${this._pendingInternalFiles.length ? b `
6574
+ <div class="composer-attachments">
6575
+ ${c(this._pendingInternalFiles, (p) => p.localId, (p) => b `
6576
+ <div class="chip">
6577
+ <img src=${p.previewUrl} alt=${p.name} />
6578
+ <button
6579
+ class="chip-remove"
6580
+ title="Remove"
6581
+ @click=${() => this._removePending(p.localId)}
6582
+ >
6583
+ <svg
6584
+ xmlns="http://www.w3.org/2000/svg"
6585
+ fill="none"
6586
+ viewBox="0 0 24 24"
6587
+ stroke-width="3"
6588
+ stroke="currentColor"
6589
+ >
6590
+ <path
6591
+ stroke-linecap="round"
6592
+ stroke-linejoin="round"
6593
+ d="M6 18 18 6M6 6l12 12"
6594
+ />
6595
+ </svg>
6596
+ </button>
6597
+ </div>
6598
+ `)}
6599
+ </div>
6600
+ ` : A}
6601
+ <input
6602
+ class="file-input"
6603
+ type="file"
6604
+ accept="image/png,image/jpeg,image/gif,image/webp"
6605
+ multiple
6606
+ hidden
6607
+ @change=${this._handleFileInputChange}
6608
+ />
6302
6609
  <div class="input-wrapper">
6303
- <button class="input-plus" title="Attach">+</button>
6610
+ <button
6611
+ class="input-plus"
6612
+ title="Attach image"
6613
+ @click=${this._openFilePicker}
6614
+ >+</button>
6304
6615
  <textarea
6305
6616
  class="input"
6306
6617
  .value=${this._inputValue}
@@ -6308,6 +6619,7 @@ let KRChatbot = class KRChatbot extends i$1 {
6308
6619
  rows="1"
6309
6620
  @input=${this._handleInputChange}
6310
6621
  @keydown=${this._handleKeyDown}
6622
+ @paste=${this._handlePaste}
6311
6623
  ></textarea>
6312
6624
  ${this._isStreaming ? b `
6313
6625
  <button
@@ -6334,7 +6646,7 @@ let KRChatbot = class KRChatbot extends i$1 {
6334
6646
  <button
6335
6647
  class=${e({
6336
6648
  'send': true,
6337
- 'send--disabled': !this._inputValue.trim(),
6649
+ 'send--disabled': !this._canSend(),
6338
6650
  })}
6339
6651
  @click=${this._handleSubmit}
6340
6652
  title="Send message"
@@ -6359,7 +6671,7 @@ let KRChatbot = class KRChatbot extends i$1 {
6359
6671
  `;
6360
6672
  }
6361
6673
  };
6362
- KRChatbot.styles = i$4 `
6674
+ KRChatbot.styles = i$5 `
6363
6675
  *,
6364
6676
  *::before,
6365
6677
  *::after {
@@ -6449,6 +6761,28 @@ KRChatbot.styles = i$4 `
6449
6761
  display: flex;
6450
6762
  }
6451
6763
 
6764
+ /* Inline mode: fill the parent container instead of floating bottom-right. */
6765
+ :host([variant='inline']) {
6766
+ position: static;
6767
+ bottom: auto;
6768
+ right: auto;
6769
+ z-index: auto;
6770
+ height: 100%;
6771
+ }
6772
+
6773
+ :host([variant='inline']) .panel {
6774
+ position: relative;
6775
+ bottom: auto;
6776
+ right: auto;
6777
+ width: 100%;
6778
+ height: 100%;
6779
+ max-height: none;
6780
+ border-radius: 0;
6781
+ box-shadow: none;
6782
+ border: none;
6783
+ animation: none;
6784
+ }
6785
+
6452
6786
  @keyframes chatbot-panel-in {
6453
6787
  from {
6454
6788
  opacity: 0;
@@ -6479,7 +6813,7 @@ KRChatbot.styles = i$4 `
6479
6813
  gap: 10px;
6480
6814
  }
6481
6815
 
6482
- .header-info {
6816
+ .header-info {
6483
6817
  display: flex;
6484
6818
  flex-direction: column;
6485
6819
  }
@@ -6489,22 +6823,6 @@ KRChatbot.styles = i$4 `
6489
6823
  font-weight: 600;
6490
6824
  }
6491
6825
 
6492
- .header-subtitle {
6493
- color: rgba(255, 255, 255, 0.5);
6494
- font-size: 11px;
6495
- display: flex;
6496
- align-items: center;
6497
- gap: 4px;
6498
- }
6499
-
6500
- .header-subtitle::before {
6501
- content: '';
6502
- width: 5px;
6503
- height: 5px;
6504
- background: var(--kr-chatbot-success);
6505
- border-radius: 50%;
6506
- }
6507
-
6508
6826
  .header-actions {
6509
6827
  display: flex;
6510
6828
  align-items: center;
@@ -6536,17 +6854,29 @@ KRChatbot.styles = i$4 `
6536
6854
  }
6537
6855
 
6538
6856
  /* Messages */
6857
+ /* Full-width scroll container — keeps the scrollbar at the panel edge. */
6539
6858
  .messages {
6540
6859
  flex: 1;
6541
6860
  overflow-y: auto;
6542
- padding: 32px;
6543
6861
  display: flex;
6544
6862
  flex-direction: column;
6545
- gap: 24px;
6546
6863
  scroll-behavior: smooth;
6547
6864
  background: white;
6548
6865
  }
6549
6866
 
6867
+ /* Centered, width-capped column that actually holds the messages. */
6868
+ .messages-inner {
6869
+ flex: 1;
6870
+ display: flex;
6871
+ flex-direction: column;
6872
+ gap: 24px;
6873
+ padding: 32px;
6874
+ width: 100%;
6875
+ max-width: 768px;
6876
+ margin-left: auto;
6877
+ margin-right: auto;
6878
+ }
6879
+
6550
6880
  .messages::-webkit-scrollbar {
6551
6881
  width: 4px;
6552
6882
  }
@@ -6570,7 +6900,7 @@ KRChatbot.styles = i$4 `
6570
6900
  gap: 8px;
6571
6901
  }
6572
6902
 
6573
- .empty-text {
6903
+ .empty-text {
6574
6904
  font-size: 14px;
6575
6905
  color: rgb(0 0 0 / 80%);
6576
6906
  }
@@ -6682,7 +7012,7 @@ KRChatbot.styles = i$4 `
6682
7012
  word-wrap: break-word;
6683
7013
  }
6684
7014
 
6685
- .typing {
7015
+ .typing {
6686
7016
  display: flex;
6687
7017
  gap: 4px;
6688
7018
  padding: 4px 0;
@@ -6750,6 +7080,15 @@ KRChatbot.styles = i$4 `
6750
7080
  padding: 16px 16px 16px;
6751
7081
  flex-shrink: 0;
6752
7082
  background: white;
7083
+ width: 100%;
7084
+ max-width: 768px;
7085
+ margin-left: auto;
7086
+ margin-right: auto;
7087
+ }
7088
+
7089
+ /* Inline mode: keep the composer clear of the bottom edge. */
7090
+ :host([variant='inline']) .footer {
7091
+ padding-bottom: 40px;
6753
7092
  }
6754
7093
 
6755
7094
  .input-wrapper {
@@ -6768,6 +7107,15 @@ KRChatbot.styles = i$4 `
6768
7107
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
6769
7108
  }
6770
7109
 
7110
+ /* Inline mode: keep the border and add a soft floating shadow (ChatGPT/Gemini style). */
7111
+ :host([variant='inline']) .input-wrapper {
7112
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
7113
+ }
7114
+
7115
+ :host([variant='inline']) .input-wrapper:focus-within {
7116
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14);
7117
+ }
7118
+
6771
7119
  .input-plus {
6772
7120
  width: 34px;
6773
7121
  height: 34px;
@@ -6875,6 +7223,12 @@ KRChatbot.styles = i$4 `
6875
7223
  cursor: grabbing;
6876
7224
  }
6877
7225
 
7226
+ /* Inline mode isn't draggable — don't show the grab/hand cursor. */
7227
+ :host([variant='inline']) .header,
7228
+ :host([variant='inline']) .header:active {
7229
+ cursor: default;
7230
+ }
7231
+
6878
7232
  /* Drag / Resize states */
6879
7233
  .panel--dragging,
6880
7234
  .panel--resizing {
@@ -6901,6 +7255,116 @@ KRChatbot.styles = i$4 `
6901
7255
  .resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
6902
7256
  .resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
6903
7257
 
7258
+ /* Attachment thumbnails inside a sent message bubble */
7259
+ .attachments {
7260
+ display: flex;
7261
+ flex-wrap: wrap;
7262
+ gap: 8px;
7263
+ }
7264
+
7265
+ .message--user .attachments {
7266
+ justify-content: flex-end;
7267
+ }
7268
+
7269
+ .attachment {
7270
+ width: 120px;
7271
+ height: 120px;
7272
+ border-radius: 12px;
7273
+ overflow: hidden;
7274
+ background: #f2f2f4;
7275
+ border: 1px solid rgba(0, 0, 0, 0.08);
7276
+ cursor: zoom-in;
7277
+ flex-shrink: 0;
7278
+ padding: 0;
7279
+ }
7280
+
7281
+ .attachment img {
7282
+ width: 100%;
7283
+ height: 100%;
7284
+ object-fit: cover;
7285
+ display: block;
7286
+ }
7287
+
7288
+ /* Composer attachment chips (pre-send) */
7289
+ .composer-attachments {
7290
+ display: flex;
7291
+ flex-wrap: wrap;
7292
+ gap: 8px;
7293
+ padding: 0 6px 10px;
7294
+ }
7295
+
7296
+ .chip {
7297
+ position: relative;
7298
+ width: 56px;
7299
+ height: 56px;
7300
+ border-radius: 10px;
7301
+ overflow: hidden;
7302
+ background: #f2f2f4;
7303
+ border: 1px solid var(--kr-chatbot-border);
7304
+ flex-shrink: 0;
7305
+ }
7306
+
7307
+ .chip img {
7308
+ width: 100%;
7309
+ height: 100%;
7310
+ object-fit: cover;
7311
+ display: block;
7312
+ }
7313
+
7314
+ .chip-remove {
7315
+ position: absolute;
7316
+ top: 2px;
7317
+ right: 2px;
7318
+ width: 18px;
7319
+ height: 18px;
7320
+ border-radius: 50%;
7321
+ border: none;
7322
+ background: rgba(0, 0, 0, 0.6);
7323
+ color: #fff;
7324
+ cursor: pointer;
7325
+ display: flex;
7326
+ align-items: center;
7327
+ justify-content: center;
7328
+ padding: 0;
7329
+ line-height: 1;
7330
+ }
7331
+
7332
+ .chip-remove:hover {
7333
+ background: rgba(0, 0, 0, 0.8);
7334
+ }
7335
+
7336
+ .chip-remove svg {
7337
+ width: 10px;
7338
+ height: 10px;
7339
+ }
7340
+
7341
+ /* Drag-and-drop overlay */
7342
+ .drop-overlay {
7343
+ position: absolute;
7344
+ inset: 0;
7345
+ z-index: 20;
7346
+ display: flex;
7347
+ align-items: center;
7348
+ justify-content: center;
7349
+ flex-direction: column;
7350
+ gap: 10px;
7351
+ /* Frosted, mostly-opaque surface so the chat content behind is masked
7352
+ and doesn't clash with the overlay label. */
7353
+ background: rgba(255, 255, 255, 0.92);
7354
+ backdrop-filter: blur(3px);
7355
+ border: 2px dashed var(--kr-chatbot-primary);
7356
+ border-radius: 16px;
7357
+ color: var(--kr-chatbot-primary);
7358
+ font-weight: 600;
7359
+ font-size: 15px;
7360
+ pointer-events: none;
7361
+ }
7362
+
7363
+ .drop-overlay svg {
7364
+ width: 32px;
7365
+ height: 32px;
7366
+ }
7367
+
6904
7368
  `;
6905
7369
  __decorate([
6906
7370
  n({ attribute: false })
@@ -6916,10 +7380,7 @@ __decorate([
6916
7380
  ], KRChatbot.prototype, "messages", void 0);
6917
7381
  __decorate([
6918
7382
  n({ type: String })
6919
- ], KRChatbot.prototype, "title", void 0);
6920
- __decorate([
6921
- n({ type: String })
6922
- ], KRChatbot.prototype, "subtitle", void 0);
7383
+ ], KRChatbot.prototype, "label", void 0);
6923
7384
  __decorate([
6924
7385
  n({ type: String })
6925
7386
  ], KRChatbot.prototype, "placeholder", void 0);
@@ -6929,6 +7390,19 @@ __decorate([
6929
7390
  reflect: true
6930
7391
  })
6931
7392
  ], KRChatbot.prototype, "opened", void 0);
7393
+ __decorate([
7394
+ n({
7395
+ type: Boolean,
7396
+ attribute: 'hide-toggle',
7397
+ reflect: true
7398
+ })
7399
+ ], KRChatbot.prototype, "hideToggle", void 0);
7400
+ __decorate([
7401
+ n({
7402
+ type: String,
7403
+ reflect: true
7404
+ })
7405
+ ], KRChatbot.prototype, "variant", void 0);
6932
7406
  __decorate([
6933
7407
  r()
6934
7408
  ], KRChatbot.prototype, "_inputValue", void 0);
@@ -6937,10 +7411,13 @@ __decorate([
6937
7411
  ], KRChatbot.prototype, "_isStreaming", void 0);
6938
7412
  __decorate([
6939
7413
  r()
6940
- ], KRChatbot.prototype, "_statusText", void 0);
7414
+ ], KRChatbot.prototype, "_error", void 0);
7415
+ __decorate([
7416
+ r()
7417
+ ], KRChatbot.prototype, "_pendingInternalFiles", void 0);
6941
7418
  __decorate([
6942
7419
  r()
6943
- ], KRChatbot.prototype, "_error", void 0);
7420
+ ], KRChatbot.prototype, "_isDraggingFile", void 0);
6944
7421
  __decorate([
6945
7422
  e$3('.panel')
6946
7423
  ], KRChatbot.prototype, "_panelEl", void 0);
@@ -6950,8 +7427,11 @@ __decorate([
6950
7427
  __decorate([
6951
7428
  e$3('.input')
6952
7429
  ], KRChatbot.prototype, "_inputEl", void 0);
7430
+ __decorate([
7431
+ e$3('.file-input')
7432
+ ], KRChatbot.prototype, "_fileInputEl", void 0);
6953
7433
  KRChatbot = __decorate([
6954
- t$1('kr-chatbot')
7434
+ t$2('kr-chatbot')
6955
7435
  ], KRChatbot);
6956
7436
 
6957
7437
  export { KRChatbot, KRRouter, KRRouterOutlet, KRScaffold, KRScreenDetail, KRScreenNav, KRSubbar };