@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/components/add-to-dashboard-nYUaDghN.cjs

@@ -0,0 +1,166 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require("./tokens-BWMfo_w4.cjs");const e=require("./base-BmvsQ-s1.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./localized-mixin-Bt25Frg1.cjs"),r=require("./data-broker-Cb-Fq9xy.cjs"),i=require("./localize-D3i4Epy_.cjs"),a=require("./chart-helpers-ufZ6VbXs.cjs");let o=require("@luzmo/icons");require("@luzmo/lucero/button"),require("@luzmo/lucero/icon"),require("@luzmo/lucero/overlay"),require("@luzmo/lucero/popover");let s=require("lit"),c=require("lit/decorators.js"),l=require("@lit/localize");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/tooltip"),require("@luzmo/lucero/progress-circle"),require("@luzmo/lucero/checkbox"),require("@luzmo/lucero/divider"),require("@luzmo/lucero/field-group"),require("@luzmo/lucero/menu"),require("@luzmo/lucero/notice"),require("@luzmo/lucero/search");let u=require("lit/directives/if-defined.js");var d=`:host{align-items:flex-end;gap:var(--luzmo-spacing-2);font-family:var(--luzmo-font-family);flex-direction:column;display:inline-flex}.trigger-spinner{--luzmo-progress-circle-size:var(--luzmo-icon-size-xs)}.trigger-chevron{margin-inline-start:var(--luzmo-spacing-1)}.picker{gap:var(--luzmo-spacing-3);width:var(--luzmo-add-to-dashboard-picker-width,var(--add-to-dashboard-picker-width));max-width:90vw;padding:var(--luzmo-spacing-2);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s);flex-direction:column;display:flex}luzmo-search{width:100%}.list{max-height:var(--luzmo-add-to-dashboard-list-max-height,var(--add-to-dashboard-list-max-height));flex-direction:column;display:flex;overflow-y:auto}.menu{--luzmo-menu-max-height:none;flex:none;width:100%;overflow:visible}.create-row{--luzmo-menu-item-label-icon-color-default:var(--luzmo-primary)}.thumbnail{object-fit:cover;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);width:2.75rem;height:2rem}.drill-in{color:var(--luzmo-font-color-extra-dimmed)}.header{align-items:center;gap:var(--luzmo-spacing-2);display:flex}.header-title{font-weight:var(--luzmo-font-weight-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.empty{align-items:center;gap:var(--luzmo-spacing-3);padding:var(--luzmo-spacing-4);text-align:center;flex-direction:column;display:flex}.loading{padding:var(--luzmo-spacing-3);justify-content:center;display:flex}.screen-modes{gap:var(--luzmo-spacing-2);flex-direction:column;display:flex}.screen-mode{align-items:center;gap:var(--luzmo-spacing-2);display:flex}.screen-mode-size{color:var(--luzmo-font-color-extra-dimmed)}.footer{justify-content:flex-end;display:flex}.status{justify-content:flex-end;width:0;min-width:100%;display:flex}.status:empty{display:none}.alert{flex:none;inline-size:max-content}.alert-body{align-items:center;gap:var(--luzmo-spacing-3);block-size:1lh;min-inline-size:0;display:flex}.alert-text{min-inline-size:0;font-weight:var(--luzmo-font-weight-semibold);white-space:pre;display:flex}.alert-name{min-inline-size:0;font-weight:var(--luzmo-font-weight-bold);text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;overflow:hidden}.alert-open{flex:none}:host{--add-to-dashboard-picker-width:18rem;--add-to-dashboard-list-max-height:16rem}`,f=`0.1.104`,p=`0.1.0`,m=[`id`,`name`,`contents`,`modified_at`,`is_variant`,`original_id`],h=new Set([`designer`,`owner`]),g=`flag_dashboard_variants`,_=[`desktop`,`tablet`,`mobile`];async function v(e,t,n){let r=[],i=t,a=0;for(let t of e){let e=n-r.length,o=await t(i,Math.max(e,1));e>0&&r.push(...o.rows.slice(0,e)),i=Math.max(0,i-o.count),a+=o.count}return{rows:r,total:a}}async function y(e){let t=await e.fetchApi(`/user`,{action:`get`,version:p,find:{where:{id:`me`},attributes:[`id`,`flags`]}});return{id:t.rows?.[0]?.id??``,flags:t.rows?.[0]?.flags??[]}}async function b(e,t){return(await e.fetchApi(`/authorization`,{action:`get`,version:p,find:{where:{id:t}}})).rows?.[0]}async function x(e,t,n){let r={...t,where:{...t.where,type:`dashboard`}},i=await e.fetchApi(`/securable`,{action:`get`,version:p,find:r},{signal:n});return{rows:i.rows??[],count:i.count??i.rows?.length??0}}function S(e){let t={modifyIds:new Set,useOnlyIds:new Set};for(let n of e?.access?.dashboards??[])n.rights?.Modify?t.modifyIds.add(n.id):n.rights?.Use&&t.useOnlyIds.add(n.id);return t}function C(){return{version:f,syncScreenModes:!0,views:_.map(e=>({screenModus:e,options:{theme:{id:`default`}},filterGroups:[],items:[]})),timezone:{type:`fixed`,id:`UTC`}}}function w(e){return e?{search:{match_types:[`name`,`description`],keyphrase:e,securable_types:[`dashboard`]}}:{}}function T(e,t){return{include:[{model:`User`,as:`allUsers`,attributes:[],required:!0,where:{id:e,...Object.fromEntries(Object.entries(t).map(([e,t])=>[`securableAccessRight.${e}`,t]))}}]}}async function E(e){let t=new r.t({apiUrl:e.apiUrl,authKey:e.authKey,authToken:e.authToken,skipNetworkListeners:!0}),[n,a]=await Promise.all([y(t),b(t,e.authKey)]),o=S(a),s=a?.type!==`embed`||h.has(a.role??``),c=!!n.id&&n.flags.includes(g),l=[...o.modifyIds,...c?o.useOnlyIds:[]],u=l.length>0?{id:{notIn:l}}:{},d=(t,n=!1)=>{let r=[...new Set((t.contents?.views??[]).map(e=>e.screenModus))];return{id:t.id,name:i.t(t.name??{},e.language),syncScreenModes:t.contents?.syncScreenModes!==!1,screenModes:r.length>0?r:[`desktop`],...n?{requiresVariant:n}:{}}},f,_=(e,n)=>async(r,i)=>{if(l.length===0)return{count:0,rows:[]};let a=r>0&&f?.search===e?f.rows:void 0;return a||(a=(await x(t,{where:{is_variant:!1,archived_at:null,id:{in:l}},attributes:m,...w(e)},n)).rows.map(e=>d(e,!o.modifyIds.has(e.id))).sort((e,t)=>e.name.localeCompare(t.name)),f={search:e,rows:a}),{count:a.length,rows:a.slice(r,r+i)}},E=(e,r,i,a)=>async(o,s)=>{let c=await x(t,{where:{is_variant:!1,archived_at:null,...u},attributes:m,...T(n.id,i),...w(e),limit:s,offset:o,order:[[`modified_at`,`desc`]]},r);return{count:c.count,rows:c.rows.map(e=>d(e,a))}},D=async(e,n,r,i)=>{await t.fetchApi(`/securable`,{action:`update`,version:p,id:e,properties:{append_item:{item:n,...r?.length?{screenModes:r}:{}}}},{signal:i})},O=async(e,n,r)=>{try{await D(e.id,n,r)}catch(n){throw await t.fetchApi(`/securable`,{action:`delete`,version:p,id:e.id}).catch(()=>void 0),n}},k=async(e,n)=>await t.fetchApi(`/securable`,{action:`create`,version:p,properties:{...e,type:`dashboard`},associations:n});return{async list(e,t){return n.id?await v([_(e.search,t.signal),...c?[E(e.search,t.signal,{flagUse:!0,flagModify:!1},!0)]:[],E(e.search,t.signal,{flagModify:!0},!1)],e.offset,e.limit):{rows:[],total:0}},async add(e,t,n,r){await D(e.id,t,n.screenModes,r.signal)},...s?{async create(t,n){let r=await k({name:n.name?{[e.language]:n.name}:{},contents:C()});return await O(r,t,void 0),d(r)}}:{},...c?{async listVariants(e,r){return(await x(t,{where:{is_variant:!0,original_id:e.id,archived_at:null},attributes:m,...T(n.id,{flagModify:!0}),order:[[`modified_at`,`desc`]]},r.signal)).rows.map(e=>d(e))}}:{},...c&&s?{async addToVariant(n,r,i){let a=(await x(t,{where:{id:n.id},attributes:[`id`,`name`,`contents`]})).rows[0];if(!a?.contents)throw Error(`The dashboard was not found.`);let o=a.name??{},s=await k({name:i.name?{...o,[e.language]:i.name}:o,contents:a.contents},[{role:`original`,id:n.id}]);return await O(s,r,i.screenModes),d({...s,contents:s.contents??a.contents})}}:{}}}function D(e){let{theme:t,...n}=e.options??{};return{...a.o(e),options:n}}function O(e,t){let n=new Set(e),r=e.length+1;for(;n.has(t(r));)r+=1;return r}var k=20,A=300,j=8,M=48,N=`__luzmo-new-dashboard`,P=`__luzmo-new-variant`,F=new Map,I=0,L=class extends n.t(e.n(e.i,{validSizes:Object.values(e.t)})){constructor(...e){super(...e),this.chart=null,this.dashboardActions=null,this.authKey=``,this.authToken=``,this.apiUrl=`https://api.luzmo.com`,this.placement=`bottom-end`,this.disabled=!1,this._open=!1,this._actions=null,this._step=`list`,this._rows=[],this._hasMore=!1,this._loading=!1,this._listFailed=!1,this._original=null,this._variants=[],this._variantsLoading=!1,this._variantsFailed=!1,this._pending=null,this._screenModes=[],this._saving=!1,this._status=null,this._triggerId=`add-to-dashboard-trigger-${++I}`,this._search=``,this._actionsGeneration=0,this._reloadOnUpdate=!1}static get styles(){let e=super.styles??[];return[...Array.isArray(e)?e:[e],(0,s.unsafeCSS)(d)]}get _hasSource(){return!!this.dashboardActions||!!(this.authKey&&this.authToken)}connectedCallback(){super.connectedCallback(),this._status&&this._startFittingAlert()}disconnectedCallback(){super.disconnectedCallback(),this._handleClosed(),this._actionsGeneration+=1,this._saveAbort?.abort(),this._stopFittingAlert()}willUpdate(e){super.willUpdate(e),(e.has(`dashboardActions`)||e.has(`authKey`)||e.has(`authToken`)||e.has(`apiUrl`)||e.has(`language`))&&(this._actions=null,this._actionsGeneration+=1,this._open&&(this._listAbort?.abort(),this._variantsAbort?.abort(),this._step=`list`,this._original=null,this._pending=null,this._rows=[],this._open=this._hasSource,this._reloadOnUpdate=this._hasSource)),e.has(`disabled`)&&this.disabled&&(this._open=!1),e.has(`chart`)&&!this.chart&&this._handleClosed()}updated(e){super.updated(e),this._reloadOnUpdate&&(this._reloadOnUpdate=!1,this._loadList()),e.has(`_step`)&&this._open&&this._focusStep(),e.has(`_status`)&&(this._status?this._startFittingAlert():this._stopFittingAlert())}get _alertContainer(){let e=this.getRootNode();return this.parentElement??(e instanceof ShadowRoot?e.host:null)}_startFittingAlert(){this._fitAlert();let e=this._alertContainer;this._alertResizeObserver||!e||(this._alertResizeObserver=new ResizeObserver(()=>this._fitAlert()),this._alertResizeObserver.observe(this),this._alertResizeObserver.observe(e))}_stopFittingAlert(){this._alertResizeObserver?.disconnect(),this._alertResizeObserver=void 0}_fitAlert(){let e=this._noticeElement,t=this._alertContainer;if(!e||!t)return;let n=this.getBoundingClientRect(),r=t.getBoundingClientRect(),i=Number.parseFloat(getComputedStyle(t).paddingInlineStart)||0,a=(this.isLTR?n.right-r.left:r.right-n.left)-i;e.style.setProperty(`--luzmo-notice-max-inline-size`,`${Math.max(0,a)}px`)}async _resolveActions(){if(this.dashboardActions)return this.dashboardActions;let e={apiUrl:this.apiUrl,authKey:this.authKey,authToken:this.authToken,language:this.language},t=JSON.stringify(e),n=F.get(t);return n||(F.clear(),n=E(e),F.set(t,n),n.catch(()=>F.delete(t))),await n}_dispatch(e,t){let n=new CustomEvent(e,{detail:t,bubbles:!0,composed:!0});this.dispatchEvent(n)}_displayName(e){return e.name.trim()||(0,l.msg)(`Untitled dashboard`,{desc:`Fallback name of a dashboard without a name`})}_variantName(e,t){return(0,l.msg)(l.str`${this._displayName(e)} (variant ${t})`,{desc:`Name of a new dashboard variant`})}_screenModeChoices(){return[{name:`mobile`,label:(0,l.msg)(`Smartphone`,{desc:`Screen mode name`}),size:`< 768px`,icon:o.luzmoMobile},{name:`tablet`,label:(0,l.msg)(`Tablet`,{desc:`Screen mode name`}),size:`≥ 768px`,icon:o.luzmoTablet},{name:`desktop`,label:(0,l.msg)(`Desktop`,{desc:`Screen mode name`}),size:`≥ 1200px`,icon:o.luzmoLaptop},{name:`largeScreen`,label:(0,l.msg)(`Large screen`,{desc:`Screen mode name`}),size:`≥ 1600px`,icon:o.luzmoDesktop},{name:`fixed`,label:(0,l.msg)(`Fixed width`,{desc:`Screen mode name`}),icon:o.luzmoArrowsHorizontal}]}async _handleOpened(e){e.target===e.currentTarget&&(this._open=!0,this._step=`list`,this._search=``,this._original=null,this._pending=null,this._rows=[],await this.updateComplete,this._searchElement?.focus(),await this._loadList())}async _loadList(){let e=this._actionsGeneration;this._loading=!0,this._listFailed=!1;try{let t=this._actions??await this._resolveActions();if(e!==this._actionsGeneration)return;this._actions=t}catch(t){if(!this.isConnected||e!==this._actionsGeneration)return;console.error(`Failed to resolve the add to dashboard actions:`,t),this._loading=!1,this._listFailed=!0;return}!this.isConnected||!this._open||await this._loadPage(!1)}_handleClosed(e){e&&e.target!==e.currentTarget||(this._open=!1,clearTimeout(this._searchTimer),this._listAbort?.abort(),this._variantsAbort?.abort())}async _loadPage(e){let t=this._actions;if(!t)return;this._listAbort?.abort();let n=new AbortController;this._listAbort=n,this._loading=!0,this._listFailed=!1,e||(this._rows=[]);try{let e=await t.list({search:this._search,offset:this._rows.length,limit:k},{signal:n.signal});if(n.signal.aborted)return;this._rows=[...this._rows,...e.rows],this._hasMore=e.total===void 0?e.rows.length===k:this._rows.length<e.total}catch(e){if(n.signal.aborted)return;console.error(`Failed to load dashboards:`,e),this._listFailed=!0}finally{n.signal.aborted||(this._loading=!1)}}_handleSearchInput(e){this._search=String(e.target?.value??``),clearTimeout(this._searchTimer),this._searchTimer=setTimeout(()=>void this._loadPage(!1),A)}_handleListScroll(e){let t=e.target;this._hasMore&&!this._loading&&t.scrollHeight-t.scrollTop-t.clientHeight<=M&&this._loadPage(!0)}_menuValue(e){return e.stopPropagation(),e.target.value??``}_handleListChange(e){let t=this._menuValue(e);if(t===N){this._actions?.create&&this._save({kind:`create`});return}let n=this._rows.find(e=>e.id===t);if(n){if(n.requiresVariant){this._original=n,this._step=`variants`,this._loadVariants();return}this._selectTarget({kind:`add`,dashboard:n,isVariant:!1},n)}}_handleVariantChange(e){let t=this._menuValue(e),n=this._original;if(!n)return;if(t===P){if(!this._actions?.addToVariant)return;let e=this._variants.map(e=>this._displayName(e)),t=this._variantName(n,O(e,e=>this._variantName(n,e)));this._selectTarget({kind:`variant`,original:n,name:t},n);return}let r=this._variants.find(e=>e.id===t);r&&this._selectTarget({kind:`add`,dashboard:r,isVariant:!0},r)}_selectTarget(e,t){if(t.syncScreenModes!==!1||!t.screenModes?.length){this._save(e);return}this._pending=e,this._screenModes=[...t.screenModes??[]],this._step=`screenModes`}async _loadVariants(){let e=this._actions,t=this._original;if(this._variantsAbort?.abort(),this._variants=[],this._variantsLoading=!1,this._variantsFailed=!1,!e?.listVariants||!t)return;let n=new AbortController;this._variantsAbort=n,this._variantsLoading=!0;try{let r=await e.listVariants(t,{signal:n.signal});n.signal.aborted||(this._variants=r)}catch(e){n.signal.aborted||(console.error(`Failed to load dashboard variants:`,e),this._variantsFailed=!0)}finally{n.signal.aborted||(this._variantsLoading=!1)}}_handleBack(){this._step===`screenModes`&&this._original?this._step=`variants`:(this._step=`list`,this._original=null),this._pending=null}_toggleScreenMode(e){this._screenModes=this._screenModes.includes(e)?this._screenModes.filter(t=>t!==e):[...this._screenModes,e]}_handleConfirmScreenModes(){this._pending&&this._screenModes.length>0&&this._save(this._pending,{screenModes:[...this._screenModes]})}async _save(e,t={}){let n=this._actions;if(!n||!this.chart||this._saving)return;this._open=!1,this._saving=!0,this._setStatus(null),this._saveAbort=new AbortController;let r=D(this.chart),i={signal:this._saveAbort.signal};try{let a;if(e.kind===`create`&&n.create)a=await n.create(r,t,i);else if(e.kind===`variant`&&n.addToVariant)a=await n.addToVariant(e.original,r,{...t,name:e.name},i);else if(e.kind===`add`)a=await n.add(e.dashboard,r,t,i)||e.dashboard;else return;if(i.signal.aborted)return;this._setStatus({kind:`success`,dashboard:a,isVariant:e.kind===`variant`||e.kind===`add`&&e.isVariant,openDashboard:n.openDashboard?.bind(n)}),this._dispatch(`luzmo-chart-added`,{dashboard:a})}catch(e){if(i.signal.aborted)return;console.error(`Failed to add the chart to a dashboard:`,e),this._setStatus({kind:`error`}),this._dispatch(`luzmo-chart-add-failed`,{error:e})}finally{this._saving=!1}await this.updateComplete,this.isConnected&&this._isFocusLost()&&this._focusTrigger()}_setStatus(e){this._status=e}_focusTrigger(){this._triggerElement?.focus()}_isFocusLost(){return!document.activeElement||document.activeElement===document.body}async _handleNoticeClose(e){e.stopPropagation();let t=e.currentTarget.matches(`:focus-within`);this._setStatus(null),await this.updateComplete,t&&this._isFocusLost()&&this._focusTrigger()}async _focusStep(){let e=this._step===`list`?this._searchElement:this._backElement;await e?.updateComplete,e?.focus()}_renderRow(e){return s.html`
+      <luzmo-menu-item value=${e.id} no-wrap ?disabled=${this._saving}>
+        ${e.thumbnailUrl?s.html`<img slot="icon" class="thumbnail" alt="" src=${e.thumbnailUrl} />`:s.nothing}
+        ${this._displayName(e)}
+        ${e.requiresVariant?s.html`<luzmo-icon slot="value" class="drill-in" size="xs" block .icon=${this.isLTR?o.luzmoAngleRight:o.luzmoAngleLeft}></luzmo-icon>`:s.nothing}
+      </luzmo-menu-item>
+    `}_renderCreateRow(e,t,n,r=!1){let i=`${this._triggerId}-${e}-reason`;return s.html`
+      <luzmo-menu-item
+        class="create-row"
+        value=${e}
+        label=${t}
+        aria-describedby=${(0,u.ifDefined)(n?i:void 0)}
+        no-wrap
+        ?disabled=${this._saving||r||!!n}
+      >
+        <luzmo-icon slot="icon" size="s" .icon=${o.luzmoPlus}></luzmo-icon>
+        ${t} ${n?s.html`<span slot="description" id=${i}>${n}</span>`:s.nothing}
+      </luzmo-menu-item>
+    `}_renderLoading(){return s.html`<div class="loading"><luzmo-progress-circle size="s" indeterminate .label=${(0,l.msg)(`Loading`,{desc:`Loading spinner label`})}></luzmo-progress-circle></div>`}async _handleRetry(e){let t=e();await this.updateComplete,this._isFocusLost()&&await this._focusStep(),await t}_renderEmpty(e,t){return s.html`
+      <div class="empty">
+        <span>${e}</span>
+        ${t?s.html`<luzmo-button size="s" treatment="outline" @click=${()=>this._handleRetry(t)}>${(0,l.msg)(`Retry`,{desc:`Retry a failed request`})}</luzmo-button>`:s.nothing}
+      </div>
+    `}_renderHeader(e){return s.html`
+      <div class="header">
+        <luzmo-action-button size="s" quiet label=${(0,l.msg)(`Back`,{desc:`Go back to the previous step`})} @click=${this._handleBack}>
+          <luzmo-icon slot="icon" size="xs" .icon=${this.isLTR?o.luzmoArrowLeft:o.luzmoArrowRight}></luzmo-icon>
+        </luzmo-action-button>
+        <span class="header-title" tabindex="-1"
+          >${e}<luzmo-tooltip self-managed show-only-if-truncated placement="top" .size=${this.size}>${e}</luzmo-tooltip></span
+        >
+      </div>
+    `}_renderList(){let e=this._actions&&!this._actions.create?(0,l.msg)(`These credentials cannot create dashboards`,{id:`add-to-dashboard-cannot-create`,desc:`Why a new dashboard cannot be created`}):void 0;return s.html`
+      <luzmo-search
+        size="s"
+        border="none"
+        label=${(0,l.msg)(`Search dashboards`,{desc:`Label of the dashboard search field`})}
+        placeholder=${(0,l.msg)(`Search dashboards`,{desc:`Label of the dashboard search field`})}
+        .value=${this._search}
+        @input=${this._handleSearchInput}
+        @submit=${e=>e.preventDefault()}
+      ></luzmo-search>
+      <luzmo-divider size="s"></luzmo-divider>
+      <div class="list" @scroll=${this._handleListScroll}>
+        <luzmo-menu class="menu" size="s" @change=${this._handleListChange} @close=${e=>e.stopPropagation()}>
+          ${this._renderCreateRow(N,(0,l.msg)(`New dashboard`,{desc:`Create a new dashboard for the chart`}),e,!this._actions)}
+          ${this._rows.map(e=>this._renderRow(e))}
+        </luzmo-menu>
+        <div class="list-state" role="status" aria-live="polite">
+          ${this._listFailed?this._renderEmpty((0,l.msg)(`Failed to load dashboards`,{desc:`Dashboard list failed to load`}),()=>this._loadList()):!this._loading&&this._rows.length===0?this._renderEmpty((0,l.msg)(`No dashboards found`,{desc:`Dashboard list is empty`})):s.nothing}
+          ${this._loading?this._renderLoading():s.nothing}
+        </div>
+      </div>
+    `}_renderVariants(e){let t=this._actions?.addToVariant?void 0:(0,l.msg)(`These credentials cannot create variants`,{id:`add-to-dashboard-cannot-create-variant`,desc:`Why a new dashboard variant cannot be created`}),n=!this._variantsLoading&&!this._variantsFailed;return s.html`
+      ${this._renderHeader(this._displayName(e))}
+      <luzmo-divider size="s"></luzmo-divider>
+      <div class="list">
+        <luzmo-menu class="menu" size="s" @change=${this._handleVariantChange} @close=${e=>e.stopPropagation()}>
+          ${this._renderCreateRow(P,(0,l.msg)(`New variant`,{desc:`Create a new variant of a dashboard`}),t,!n)}
+          ${this._variants.map(e=>this._renderRow(e))}
+        </luzmo-menu>
+        <div class="list-state" role="status" aria-live="polite">
+          ${this._variantsFailed?this._renderEmpty((0,l.msg)(`Failed to load variants`,{desc:`Variant list failed to load`}),()=>this._loadVariants()):!this._variantsLoading&&this._variants.length===0?this._renderEmpty((0,l.msg)(`No variants yet`,{desc:`Variant list is empty`})):s.nothing}
+          ${this._variantsLoading?this._renderLoading():s.nothing}
+        </div>
+      </div>
+    `}_renderScreenModes(e){let t=e.kind===`variant`?e.original:e.dashboard,n=e.kind===`variant`?e.name:this._displayName(t),r=t.screenModes??[];return s.html`
+      ${this._renderHeader(n)}
+      <luzmo-field-group class="screen-modes" vertical label=${(0,l.msg)(`Screen modes`,{desc:`Label of the group of screen-mode checkboxes`})}>
+        ${this._screenModeChoices().filter(e=>r.includes(e.name)).map(e=>s.html`
+              <luzmo-checkbox
+                size="s"
+                ?checked=${this._screenModes.includes(e.name)}
+                @change=${()=>this._toggleScreenMode(e.name)}
+              >
+                <span class="screen-mode">
+                  <luzmo-icon size="xs" block .icon=${e.icon}></luzmo-icon>
+                  ${e.label}
+                  ${e.size?s.html`<span class="screen-mode-size" dir="ltr">${e.size}</span>`:s.nothing}
+                </span>
+              </luzmo-checkbox>
+            `)}
+      </luzmo-field-group>
+      <div class="footer">
+        <luzmo-button size="s" variant="primary" ?disabled=${this._screenModes.length===0||this._saving} @click=${this._handleConfirmScreenModes}>
+          ${(0,l.msg)(`Confirm`,{desc:`Confirm the selected screen modes`})}
+        </luzmo-button>
+      </div>
+    `}_renderPicker(){return this._step===`screenModes`&&this._pending?this._renderScreenModes(this._pending):this._step===`variants`&&this._original?this._renderVariants(this._original):this._renderList()}_noticeLabels(){return{close:(0,l.msg)(`Close`,{id:`add-to-dashboard-close`,desc:`Close the save result notice`})}}_renderStatus(){let e=this._status;if(!e)return s.nothing;if(e.kind===`error`)return s.html`
+        <luzmo-notice
+          class="alert"
+          size="s"
+          variant="negative"
+          .duration=${j}
+          .labels=${this._noticeLabels()}
+          @luzmo-notice-close=${this._handleNoticeClose}
+        >
+          <luzmo-icon slot="icon" .icon=${o.luzmoAlertOutline}></luzmo-icon>
+          <span class="alert-text">${(0,l.msg)(`Failed to copy item`,{desc:`Saving the chart to a dashboard failed`})}</span>
+        </luzmo-notice>
+      `;let t=this._displayName(e.dashboard),n=s.html`<strong class="alert-name" tabindex="-1">${t}<luzmo-tooltip self-managed show-only-if-truncated placement="top" .size=${this.size}>${t}</luzmo-tooltip></strong>`,r=e.openDashboard;return s.html`
+      <luzmo-notice
+        class="alert"
+        size="s"
+        variant="positive"
+        .duration=${j}
+        .labels=${this._noticeLabels()}
+        @luzmo-notice-close=${this._handleNoticeClose}
+      >
+        <luzmo-icon slot="icon" .icon=${o.luzmoCheckCircleOutline}></luzmo-icon>
+        <div class="alert-body">
+          <span class="alert-text" dir="auto">${(0,l.msg)(s.html`Item copied to ${n}`,{desc:`The chart was saved to a dashboard`})}</span>
+          ${r&&!e.isVariant?s.html`
+                  <luzmo-action-button class="alert-open" size="s" quiet @click=${()=>r(e.dashboard)}>
+                    <luzmo-icon slot="icon" size="xs" .icon=${o.luzmoLink}></luzmo-icon>
+                    ${(0,l.msg)(`Open`,{id:`add-to-dashboard-open`,desc:`Open the dashboard the chart was saved to`})}
+                  </luzmo-action-button>
+                `:s.nothing}
+        </div>
+      </luzmo-notice>
+    `}render(){if(!this.chart||!this._hasSource)return s.nothing;let e=this._saving?(0,l.msg)(`Adding to dashboard`,{desc:`The chart is being saved to a dashboard`}):(0,l.msg)(`Add to dashboard`,{desc:`Button that opens the add to dashboard picker`});return s.html`
+      <luzmo-action-button
+        id=${this._triggerId}
+        class="trigger"
+        size=${this.size}
+        aria-haspopup="true"
+        aria-expanded=${this._open?`true`:`false`}
+        ?disabled=${this.disabled||this._saving}
+      >
+        ${this._saving?s.html`<luzmo-progress-circle class="trigger-spinner" slot="icon" indeterminate .label=${e}></luzmo-progress-circle>`:s.html`<luzmo-icon slot="icon" size="xs" .icon=${o.luzmoPlus}></luzmo-icon>`}
+        ${e}
+        <luzmo-icon class="trigger-chevron" size="xs" .icon=${o.luzmoAngleDown}></luzmo-icon>
+      </luzmo-action-button>
+      <luzmo-overlay
+        type="auto"
+        placement=${this.placement}
+        trigger=${`${this._triggerId}@click`}
+        .open=${this._open}
+        @luzmo-opened=${this._handleOpened}
+        @luzmo-closed=${this._handleClosed}
+      >
+        <luzmo-popover>
+          <div class="picker">${this._open?this._renderPicker():s.nothing}</div>
+        </luzmo-popover>
+      </luzmo-overlay>
+      <div class="status">${this._renderStatus()}</div>
+    `}};t.t([(0,c.property)({attribute:!1})],L.prototype,`chart`,void 0),t.t([(0,c.property)({attribute:!1})],L.prototype,`dashboardActions`,void 0),t.t([(0,c.property)({type:String,attribute:`auth-key`})],L.prototype,`authKey`,void 0),t.t([(0,c.property)({type:String,attribute:`auth-token`})],L.prototype,`authToken`,void 0),t.t([(0,c.property)({type:String,attribute:`api-url`})],L.prototype,`apiUrl`,void 0),t.t([(0,c.property)({type:String,reflect:!0})],L.prototype,`placement`,void 0),t.t([(0,c.property)({type:Boolean,reflect:!0})],L.prototype,`disabled`,void 0),t.t([(0,c.state)()],L.prototype,`_open`,void 0),t.t([(0,c.state)()],L.prototype,`_actions`,void 0),t.t([(0,c.state)()],L.prototype,`_step`,void 0),t.t([(0,c.state)()],L.prototype,`_rows`,void 0),t.t([(0,c.state)()],L.prototype,`_hasMore`,void 0),t.t([(0,c.state)()],L.prototype,`_loading`,void 0),t.t([(0,c.state)()],L.prototype,`_listFailed`,void 0),t.t([(0,c.state)()],L.prototype,`_original`,void 0),t.t([(0,c.state)()],L.prototype,`_variants`,void 0),t.t([(0,c.state)()],L.prototype,`_variantsLoading`,void 0),t.t([(0,c.state)()],L.prototype,`_variantsFailed`,void 0),t.t([(0,c.state)()],L.prototype,`_pending`,void 0),t.t([(0,c.state)()],L.prototype,`_screenModes`,void 0),t.t([(0,c.state)()],L.prototype,`_saving`,void 0),t.t([(0,c.state)()],L.prototype,`_status`,void 0),t.t([(0,c.query)(`.trigger`)],L.prototype,`_triggerElement`,void 0),t.t([(0,c.query)(`luzmo-search`)],L.prototype,`_searchElement`,void 0),t.t([(0,c.query)(`.header luzmo-action-button`)],L.prototype,`_backElement`,void 0),t.t([(0,c.query)(`luzmo-notice`)],L.prototype,`_noticeElement`,void 0),L=t.t([(0,l.localized)()],L),typeof customElements<`u`&&!customElements.get(`luzmo-add-to-dashboard`)&&customElements.define(`luzmo-add-to-dashboard`,L),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return L}});

package/components/ai-chat/ai-chat-request.d.ts

@@ -1,7 +1,7 @@
 import type { LuzmoChart } from '../../types';
 import type { AiPromptAgent, AiPromptCreateBody, AiPromptDeleteBody, AiPromptProperties, AiPromptSavedAgentProperties, BuildAiPromptRequestContext } from './ai-prompt-types';
 export type { AiPromptAgent, AiPromptBuiltInAgentProperties, AiPromptImageInput, AiPromptCreateBody, AiPromptDeleteBody, AiPromptInput, AiPromptItemTask, AiPromptProperties, AiPromptPropertiesBase, AiPromptSavedAgentProperties, AiPromptScreenMode, BuildAiPromptRequestContext, DashboardStatePayload, LuzmoDashboardGeneratedEventDetail, LuzmoPromptSubmittedEventDetail, LuzmoRestoreRequestedEventDetail } from './ai-prompt-types';
-export { AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES, AI_PROMPT_MAX_ATTACHMENTS, assertValidAiPromptAttachmentFiles, assertValidAiPromptAttachmentUrls, isAiPromptAcceptedImageFile, isAiPromptAcceptedImageMimeType, isAiPromptAcceptedImageUrl } from '../../utils/ai-prompt';
+export { AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES, AI_PROMPT_MAX_ATTACHMENTS, assertValidAiPromptAttachmentFiles, assertValidAiPromptAttachmentUrls, isAiPromptAcceptedImageFile, isAiPromptAcceptedImageMimeType, isAiPromptAcceptedImageUrl } from '../../utils/ai-prompt/index.js';
 export declare function getAiPromptUrl(apiUrl: string, apiVersion: string): string;
 export declare function chartToItemAsset(chart: LuzmoChart): Record<string, unknown> | null;
 export declare function buildItemAiPromptProperties(ctx: BuildAiPromptRequestContext): AiPromptProperties;

package/components/ai-chat/ai-chat.d.ts

@@ -4,7 +4,7 @@ import '@luzmo/lucero/icon';
 import '@luzmo/lucero/overlay';
 import '@luzmo/lucero/popover';
 import '@luzmo/lucero/progress-steps';
-import { LuzmoElement } from '../../utils/base';
+import { LuzmoElement } from '../../utils/base/index.js';
 import { type PropertyValues, TemplateResult } from 'lit';
 import type { ChatMessage, Dataset, LuzmoChart } from '../../types';
 import '../ai-interaction-textarea';
@@ -13,6 +13,10 @@ import type { AiChatAgentConfig } from './types';
 import './empty-state';
 import type { AiChatEmptyStateSuggestion } from './empty-state';
 import type { AiChatSession } from './session/ai-chat-session';
+declare const LuzmoAiChat_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
 /**
  * @customElement luzmo-ai-chat
  * @summary AI chat UI backed by AiChatSession for transcript, datasets, and streaming.
@@ -28,6 +32,8 @@ import type { AiChatSession } from './session/ai-chat-session';
  * @fires {CustomEvent<AssistantMessageActionEventDetail>} luzmo-assistant-message-action - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
  * @fires {CustomEvent<void>} luzmo-stop - Fired when an in-flight prompt is stopped
  *
+ * @attr size - Size of the chat: `s`, `m` (default), `l` or `xl`. Scales messages, progress steps, questions, the empty state and the prompt input together.
+ *
  * Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the
  * `assistant-message-actions` light-DOM slot on the latest assistant message.
  * @property {string} --luzmo-ai-chat-background - Background of the chat container
@@ -72,10 +78,10 @@ import type { AiChatSession } from './session/ai-chat-session';
  * @property {string} --luzmo-ai-chat-assistant-message-actions-color - Text color for assistant message actions footer content (default: `--luzmo-font-color-extra-dimmed`)
  * @property {string} --luzmo-ai-chat-assistant-message-actions-font-style - Font style for plain text in the assistant message actions footer (default: `italic`)
  * @property {string} --luzmo-ai-chat-assistant-message-font-family - Font family shared by assistant messages and their actions footer
- * @property {string} --luzmo-ai-chat-assistant-message-font-size - Font size shared by assistant messages and their actions footer
+ * @property {string} --luzmo-ai-chat-assistant-message-font-size - Font size shared by assistant messages (including streaming and loading) and their actions footer; defaults to the font size of the chat `size`
  * @property {string} --luzmo-ai-chat-assistant-message-line-height - Line height shared by assistant messages and their actions footer
  */
-export declare class LuzmoAiChat extends LuzmoElement {
+export declare class LuzmoAiChat extends LuzmoAiChat_base {
     static styles: import("lit").CSSResult;
     static tagName: string;
     /** Light-DOM slot for optional custom actions below the latest assistant message. */
@@ -288,6 +294,8 @@ export declare class LuzmoAiChat extends LuzmoElement {
     private _getRenderState;
     private _createDomBridgeCallbacks;
     private get _pickedAgentId();
+    /** Assistant message action buttons sit one step below the chat size, like secondary controls elsewhere in the kit. */
+    private get _oneSizeSmaller();
     private get _resolvedAcceptedFileTypes();
     private _buildSessionConfig;
     private _getAgentConfig;
@@ -317,7 +325,6 @@ export declare class LuzmoAiChat extends LuzmoElement {
      */
     private _renderMarkdown;
     private _renderProgress;
-    private _isLastAiMessageWithProgress;
     private _syncAssistantMessageActionsVisibility;
     private _handleAssistantMessageActionsSlotChange;
     private _setAssistantMessageActionsSlotHasContent;
@@ -345,3 +352,4 @@ export declare class LuzmoAiChat extends LuzmoElement {
     private _renderEmptyState;
     protected render(): TemplateResult;
 }
+export {};

package/components/ai-chat/empty-state/ai-chat-empty-state.d.ts

@@ -1,12 +1,18 @@
 import '@luzmo/lucero/action-button';
-import { LuzmoElement } from '../../../utils/base';
+import { LuzmoElement } from '../../../utils/base/index.js';
 import { type TemplateResult } from 'lit';
 import type { AiChatEmptyStateSuggestion } from './types';
+declare const LuzmoAiChatEmptyState_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../../utils/base/sized-mixin").SizedElementInterface;
+};
 /**
  * @customElement luzmo-ai-chat-empty-state
  * @summary Empty state for AI chat with title, subtitle, and prompt suggestions.
  * @fires {CustomEvent<AiChatEmptyStateSuggestionSelectedDetail>} luzmo-suggestion-selected - Fired when the user selects a suggestion chip
  *
+ * @attr size - Size of the title, subtitle and suggestion chips: `s`, `m` (default), `l` or `xl`
+ *
  * @property {string} --luzmo-ai-chat-empty-state-header-actions-gap - Gap between the title and the actions block
  * @property {string} --luzmo-ai-chat-empty-state-actions-gap - Gap between the actions label and suggestion chips
  * @property {string} --luzmo-ai-chat-empty-state-suggestions-gap - Gap between suggestion chips
@@ -22,7 +28,7 @@ import type { AiChatEmptyStateSuggestion } from './types';
  * @property {string} --luzmo-ai-chat-empty-state-subtitle-line-height - Subtitle line height
  * @property {string} --luzmo-ai-chat-empty-state-subtitle-color - Subtitle text color (`--luzmo-font-color-dimmed`)
  */
-export declare class LuzmoAiChatEmptyState extends LuzmoElement {
+export declare class LuzmoAiChatEmptyState extends LuzmoAiChatEmptyState_base {
     static styles: import("lit").CSSResult;
     static tagName: string;
     /**
@@ -44,3 +50,4 @@ export declare class LuzmoAiChatEmptyState extends LuzmoElement {
     private _handleSuggestionActivate;
     protected render(): TemplateResult;
 }
+export {};

package/components/ai-chat/helpers/elicitation-template.d.ts

@@ -1,5 +1,6 @@
 import '@luzmo/lucero/question-box';
 import type { QuestionBoxResultDetail } from '@luzmo/lucero/question-box';
+import type { ElementSize } from '../../../utils/base/index.js';
 import type { ChatMessage } from '../../../types';
 /**
  * - `open`: the latest question, waiting for an answer.
@@ -10,9 +11,10 @@ export type ElicitationState = 'open' | 'answered' | 'closed';
 export interface ElicitationMarkupArgs {
     message: ChatMessage;
     state: ElicitationState;
+    size: ElementSize;
     onSubmit: (event: CustomEvent<QuestionBoxResultDetail>) => void;
 }
 /** Reads the chosen option from a question box `luzmo-submit` event. */
 export declare function readElicitationAnswer(detail: QuestionBoxResultDetail): string | undefined;
 /** Renders the agent question on an assistant message as a single-choice question box. */
-export declare function elicitationMarkup({ message, state, onSubmit }: ElicitationMarkupArgs): unknown;
+export declare function elicitationMarkup({ message, state, size, onSubmit }: ElicitationMarkupArgs): unknown;

package/components/ai-chat/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ai-interaction-textarea-CmFGJzbb.cjs"),t=require("../ai-chat-1OlRpimu.cjs");exports.AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES=e.c,exports.AI_PROMPT_MAX_ATTACHMENTS=e.l,exports.AiChatSession=t.i,exports.AiChatSessionController=t.r,exports.LuzmoAiChat=t.n,exports.LuzmoAiChatEmptyState=t.D,exports.assertValidAiPromptAttachmentFiles=e.u,exports.assertValidAiPromptAttachmentUrls=e.d,exports.blobToBase64=e.n,exports.buildAiDictationRequest=e.r,exports.buildAiPromptDeleteRequest=t._,exports.buildAiPromptProperties=t.v,exports.buildAiPromptRequest=t.y,exports.buildAnalystAiPromptProperties=t.b,exports.buildCustomItemAiPromptProperties=t.x,exports.buildDashboardAiPromptProperties=t.S,exports.buildItemAiPromptProperties=t.C,exports.buildSavedAgentAiPromptProperties=t.w,exports.chartToItemAsset=t.T,exports.createAiChatSession=t.a,exports.createInitialProgress=t.f,exports.createInitialStreamState=t.o,exports.createStreamHandler=t.s,exports.extractChartFromChunk=t.u,exports.extractDashboardFromChunk=t.d,exports.fetchStreamingResponse=t.m,exports.getAgentStreamDefinition=t.c,exports.getAiDictationUrl=e.i,exports.getAiPromptUrl=t.E,exports.getUploadUrl=e.o,exports.hasProgressChunk=t.p,exports.isAiPromptAcceptedImageFile=e.f,exports.isAiPromptAcceptedImageMimeType=e.p,exports.isAiPromptAcceptedImageUrl=e.m,exports.isRecognizedStep=t.t,exports.parseStreamLine=t.h,exports.processStreamChunk=t.l,exports.readNdjsonStream=t.g,exports.streamAiDictation=e.a,exports.uploadAiPromptImages=e.s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ai-interaction-textarea-CRyyTj_B.cjs"),t=require("../ai-chat-DfuJOWao.cjs");exports.AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES=e.c,exports.AI_PROMPT_MAX_ATTACHMENTS=e.l,exports.AiChatSession=t.i,exports.AiChatSessionController=t.r,exports.LuzmoAiChat=t.n,exports.LuzmoAiChatEmptyState=t.D,exports.assertValidAiPromptAttachmentFiles=e.u,exports.assertValidAiPromptAttachmentUrls=e.d,exports.blobToBase64=e.n,exports.buildAiDictationRequest=e.r,exports.buildAiPromptDeleteRequest=t._,exports.buildAiPromptProperties=t.v,exports.buildAiPromptRequest=t.y,exports.buildAnalystAiPromptProperties=t.b,exports.buildCustomItemAiPromptProperties=t.x,exports.buildDashboardAiPromptProperties=t.S,exports.buildItemAiPromptProperties=t.C,exports.buildSavedAgentAiPromptProperties=t.w,exports.chartToItemAsset=t.T,exports.createAiChatSession=t.a,exports.createInitialProgress=t.f,exports.createInitialStreamState=t.o,exports.createStreamHandler=t.s,exports.extractChartFromChunk=t.u,exports.extractDashboardFromChunk=t.d,exports.fetchStreamingResponse=t.m,exports.getAgentStreamDefinition=t.c,exports.getAiDictationUrl=e.i,exports.getAiPromptUrl=t.E,exports.getUploadUrl=e.o,exports.hasProgressChunk=t.p,exports.isAiPromptAcceptedImageFile=e.f,exports.isAiPromptAcceptedImageMimeType=e.p,exports.isAiPromptAcceptedImageUrl=e.m,exports.isRecognizedStep=t.t,exports.parseStreamLine=t.h,exports.processStreamChunk=t.l,exports.readNdjsonStream=t.g,exports.streamAiDictation=e.a,exports.uploadAiPromptImages=e.s;

package/components/ai-chat/index.d.ts

@@ -17,8 +17,8 @@ export { LuzmoAiChatEmptyState } from './empty-state';
 export type { AiChatEmptyStateSuggestion, AiChatEmptyStateSuggestionSelectedDetail } from './empty-state';
 export * from './ai-prompt-types';
 export * from './ai-chat-request';
-export { getUploadUrl, uploadAiPromptImages, getAiDictationUrl, streamAiDictation, buildAiDictationRequest, blobToBase64 } from '../../utils/ai-prompt';
-export type { UploadAiPromptImagesOptions, AiDictationCreateBody, AiDictationProperties, BuildAiDictationRequestOptions, StreamAiDictationOptions } from '../../utils/ai-prompt';
+export { getUploadUrl, uploadAiPromptImages, getAiDictationUrl, streamAiDictation, buildAiDictationRequest, blobToBase64 } from '../../utils/ai-prompt/index.js';
+export type { UploadAiPromptImagesOptions, AiDictationCreateBody, AiDictationProperties, BuildAiDictationRequestOptions, StreamAiDictationOptions } from '../../utils/ai-prompt/index.js';
 export { createInitialProgress, createInitialStreamState, createStreamHandler, extractChartFromChunk, extractDashboardFromChunk, fetchStreamingResponse, getAgentStreamDefinition, hasProgressChunk, parseStreamLine, processStreamChunk, readNdjsonStream } from './stream';
 export type { StreamingRequestOptions, StreamingResponse } from './stream/transport';
 export type { AgentStreamDefinition, StreamHandlerCallbacks, StreamHandlerContext, StreamHandlerState } from './stream';

package/components/ai-chat/index.js

@@ -17,13 +17,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
-	}
-})();
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, u as f } from "../ai-interaction-textarea-BXKG2elT.js";
-import { C as p, D as m, E as h, S as g, T as _, _ as v, a as y, b, c as x, d as S, f as C, g as w, h as T, i as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F, v as I, w as L, x as R, y as z } from "../ai-chat-PesGGOLP.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, u as f } from "../ai-interaction-textarea-6ECwAdeT.js";
+import { C as p, D as m, E as h, S as g, T as _, _ as v, a as y, b, c as x, d as S, f as C, g as w, h as T, i as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F, v as I, w as L, x as R, y as z } from "../ai-chat-DmDtBF47.js";
 export { t as AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES, a as AI_PROMPT_MAX_ATTACHMENTS, E as AiChatSession, M as AiChatSessionController, k as LuzmoAiChat, m as LuzmoAiChatEmptyState, f as assertValidAiPromptAttachmentFiles, n as assertValidAiPromptAttachmentUrls, s as blobToBase64, u as buildAiDictationRequest, v as buildAiPromptDeleteRequest, I as buildAiPromptProperties, z as buildAiPromptRequest, b as buildAnalystAiPromptProperties, R as buildCustomItemAiPromptProperties, g as buildDashboardAiPromptProperties, p as buildItemAiPromptProperties, L as buildSavedAgentAiPromptProperties, _ as chartToItemAsset, y as createAiChatSession, C as createInitialProgress, A as createInitialStreamState, N as createStreamHandler, F as extractChartFromChunk, S as extractDashboardFromChunk, O as fetchStreamingResponse, x as getAgentStreamDefinition, i as getAiDictationUrl, h as getAiPromptUrl, c as getUploadUrl, j as hasProgressChunk, r as isAiPromptAcceptedImageFile, l as isAiPromptAcceptedImageMimeType, o as isAiPromptAcceptedImageUrl, P as isRecognizedStep, T as parseStreamLine, D as processStreamChunk, w as readNdjsonStream, e as streamAiDictation, d as uploadAiPromptImages };