@luzmo/analytics-components-kit 1.0.1-alpha.44 → 1.0.1-alpha.46

package/components/grid/grid.d.ts

@@ -100,7 +100,7 @@ export declare class LuzmoGrid extends LuzmoElement {
     /**
      * Grid options configuration
      */
-    theme: any;
+    theme?: any;
     /**
      * Items to add to the grid
      */
@@ -118,6 +118,7 @@ export declare class LuzmoGrid extends LuzmoElement {
     private _activeItemActionToggle?;
     private _focusedItemElement?;
     private _fullTheme?;
+    private _hasItemAdded;
     private _loadTheme;
     firstUpdated(): void;
     disconnectedCallback(): void;

package/components/grid/index.cjs

@@ -264,11 +264,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           >
         `:f.x``}willUpdate(e){e.has("language")&&this.language!==ge.getLocale()&&([...ge.targetLocales].includes(this.language??"en")||this.language==="en")&&ge.setLocale(this.language)}render(){const e=this.actions.map(t=>this._generateActionGroup(t));return f.x`
       <div class="action-buttons" tabindex="0">${e}</div>
-    `}};ti([f.n({type:String,reflect:!0})],exports.LuzmoGridItemActionsMenu.prototype,"placement",2);ti([f.n({type:Array})],exports.LuzmoGridItemActionsMenu.prototype,"actions",2);ti([f.n({type:String})],exports.LuzmoGridItemActionsMenu.prototype,"language",2);exports.LuzmoGridItemActionsMenu=ti([On.localized()],exports.LuzmoGridItemActionsMenu);const ld=':host{display:block;width:100%;height:100%}.grid-stack{width:100%;height:100%;position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';var dd=Object.defineProperty,B=(s,e,t,i)=>{for(var r=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=o(e,t,r)||r);return r&&dd(e,t,r),r};class N extends kr.It{constructor(){super(...arguments),this.appServer="https://app.luzmo.com/",this.apiHost="https://api.luzmo.com",this.language="en",this.contentLanguage="en",this.columns=48,this.rowHeight=16,this.viewMode=!1,this.placementItemActionsMenu="right-start",this.theme={},this.items=[],this.renderers={},this._initialized=!1,this.defaultRenderer=(e,t)=>f.x`
+    `}};ti([f.n({type:String,reflect:!0})],exports.LuzmoGridItemActionsMenu.prototype,"placement",2);ti([f.n({type:Array})],exports.LuzmoGridItemActionsMenu.prototype,"actions",2);ti([f.n({type:String})],exports.LuzmoGridItemActionsMenu.prototype,"language",2);exports.LuzmoGridItemActionsMenu=ti([On.localized()],exports.LuzmoGridItemActionsMenu);const ld=':host{display:block;width:100%}.grid-stack{width:100%;min-height:var(--luzmo-grid-min-height);position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';var dd=Object.defineProperty,B=(s,e,t,i)=>{for(var r=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=o(e,t,r)||r);return r&&dd(e,t,r),r};class N extends kr.It{constructor(){super(...arguments),this.appServer="https://app.luzmo.com/",this.apiHost="https://api.luzmo.com",this.language="en",this.contentLanguage="en",this.columns=48,this.rowHeight=16,this.viewMode=!1,this.placementItemActionsMenu="right-start",this.items=[],this.renderers={},this._initialized=!1,this.defaultRenderer=(e,t)=>f.x`
       <div class="grid-item-content">
         <div class="grid-item-type">${e.type}</div>
       </div>
-    `,this._handleMouseout=e=>{if(this.viewMode)return;const i=e.target.closest(".grid-stack-item");if(!i)return;const r=e.relatedTarget;r!=null&&r.closest(".grid-item-actions-popover")||i.hasAttribute("active")||this._removeItemActionsMenuPopover(i)},this._handleKeyDown=e=>{if(!this.viewMode){if(e.key==="Delete"&&this._focusedItemElement)this._handleDeleteItem(new Event("delete"));else if(e.key==="Escape"&&this._focusedItemElement)this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement),this._focusedItemElement=void 0,this._gridElement.focus();else if(e.key==="Enter"&&this._focusedItemElement)e.preventDefault(),e.stopPropagation(),this._activeItemElement&&(this._activeItemElement.removeAttribute("active"),this._gridElement.removeAttribute("has-active-item"),this._removeItemActionsMenuPopover(this._activeItemElement),this._activeItemElement=void 0),this._gridElement.querySelectorAll(".grid-stack-item").forEach(t=>{t!==this._focusedItemElement&&this._removeItemActionsMenuPopover(t)}),this._createItemActionsMenuPopover(this._focusedItemElement),requestAnimationFrame(()=>{var i;const t=(i=this._focusedItemElement)==null?void 0:i.querySelector("luzmo-grid-item-actions-menu");t&&t.focus()});else if(this._focusedItemElement&&this._grid&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)){e.preventDefault(),e.stopPropagation();const t=this._focusedItemElement.gridstackNode;if(!t)return;const i=this.columns??48,n={ArrowLeft:{move:{x:t.x-1},resize:{x:t.x-1,w:t.w+1},shrink:{w:t.w-1},canMove:t.x>0,canResize:t.x>0,canShrink:t.w>1},ArrowRight:{move:{x:t.x+1},resize:{w:t.w+1},shrink:{x:t.x+1,w:t.w-1},canMove:t.x<i-t.w,canResize:t.x+t.w<i,canShrink:t.w>1},ArrowUp:{move:{y:t.y-1},resize:{y:t.y-1,h:t.h+1},shrink:{h:t.h-1},canMove:t.y>0,canResize:t.y>0,canShrink:t.h>1},ArrowDown:{move:{y:t.y+1},resize:{h:t.h+1},shrink:{y:t.y+1,h:t.h-1},canMove:!0,canResize:!0,canShrink:t.h>1}}[e.key];let o=null;e.shiftKey&&n.canResize?o=n.resize:(e.ctrlKey||e.metaKey)&&n.canShrink?o=n.shrink:n.canMove&&(o=n.move),o&&this._grid.update(this._focusedItemElement,o)}}},this._handleFocus=e=>{const i=e.target.closest(".grid-stack-item");i&&(this._focusedItemElement&&this._focusedItemElement!==i&&(this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement)),this._focusedItemElement=i,i.setAttribute("focused","true"))},this._handleBlur=e=>{if(!this._focusedItemElement)return;const t=e.relatedTarget;t!=null&&t.closest("luzmo-grid-item-actions-menu")||(this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement),this._focusedItemElement=void 0,this._gridElement.focus())},this._handleDocumentClick=e=>{const t=e.composedPath(),i=this._gridElement.querySelector(".grid-stack-item[active]");if(!i||t.includes(i))return;const r=i.querySelector(".grid-item-actions-popover");r&&t.includes(r)||this._cleanupActiveItem(i)},this._handleAction=e=>{var n,o;const t=e.detail,i=(n=e.target)==null?void 0:n.closest(".grid-stack-item");if(!i)return;const r=i.getAttribute("gs-id");if(t.type==="toggle"&&t.action===this._activeItemActionToggle&&i===this._activeItemElement){this._activeItemElement=void 0,this._activeItemActionToggle=void 0,(o=this._gridElement)==null||o.removeAttribute("has-active-item"),i.removeAttribute("active"),this._cleanupActiveItem(i);return}if(!["delete","clone"].includes(t.action)){this._gridElement.querySelectorAll(".grid-stack-item").forEach(l=>{l!==i&&this._cleanupActiveItem(l)}),t.type==="toggle"&&(this._activeItemElement=i,this._activeItemActionToggle=t.action,this._gridElement.setAttribute("has-active-item","true"),i.setAttribute("active","true"));const a=this.items.find(l=>l.id===r);this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:t.action,items:this.items,element:i,id:r,type:a==null?void 0:a.type,slots:a==null?void 0:a.slots,options:a==null?void 0:a.options,filters:(a==null?void 0:a.filters)??[]},bubbles:!0,composed:!0,cancelable:!0}))}t.action==="delete"?(this._handleDeleteItem(e),this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:t.action,items:this.items,deletedId:r},bubbles:!0,composed:!0,cancelable:!0}))):t.action==="clone"&&this._handleCloneItem(e)},this._handleDeleteItem=e=>{var i;const t=((i=e.target)==null?void 0:i.closest(".grid-stack-item"))||this._focusedItemElement;t&&this.removeGridItemById(t.getAttribute("gs-id")||"")},this._handleCloneItem=e=>{const i=e.target.closest(".grid-stack-item");if(!i||!this._grid)return;const r=i.getAttribute("gs-id");if(!r)return;const n=this.items.find(l=>l.id===r);if(!n)return;const o={...structuredClone(n),id:nt()},a=this.addGridItem(o);this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:"clone",items:this.items,originalElement:i,element:a,id:o.id,type:o.type,slots:o.slots,options:o.options,filters:o.filters},bubbles:!0,composed:!0}))}}static get styles(){return[f.r(Zl),f.r(ld)]}async _loadTheme(e){var t,i,r,n,o,a,l;(e==null?void 0:e.type)==="custom"?this._fullTheme=structuredClone(e):e!=null&&e.id&&si.systemThemeIds.includes(e.id)&&((t=this._fullTheme)==null?void 0:t.id)!==e.id?(this._fullTheme=await si.getTheme(e.id),this._fullTheme.id=e.id):e!=null&&e.id&&((i=this._fullTheme)==null?void 0:i.id)!==e.id||!e&&this._fullTheme||(this._fullTheme=await si.getTheme("default")),this._initialized&&this._updateThemeProperties(),!this._initialized&&this._gridElement&&this._initializeGrid(),this._grid&&((l=this._grid)==null||l.margin([(((n=(r=this.theme)==null?void 0:r.margins)==null?void 0:n[0])??16)/2,(((a=(o=this.theme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2].join(" "))),this.requestUpdate()}firstUpdated(){document.addEventListener("click",this._handleDocumentClick),this.addEventListener("keydown",this._handleKeyDown),this._loadTheme(this.theme)}disconnectedCallback(){super.disconnectedCallback(),this._cleanup(),document.removeEventListener("click",this._handleDocumentClick),this.removeEventListener("keydown",this._handleKeyDown)}willUpdate(e){var i,r,n,o,a,l;super.willUpdate(e),e.has("_initialized")&&(this._updateThemeProperties(),this._initialized&&this._grid&&((i=this._fullTheme)!=null&&i.margins)&&((l=this._grid)==null||l.margin([(((n=(r=this._fullTheme)==null?void 0:r.margins)==null?void 0:n[0])??16)/2,(((a=(o=this._fullTheme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2].join(" "))))}updated(e){var o,a,l;super.updated(e);const t=e.has("contentLanguage"),i=e.has("viewMode"),r=e.has("items"),n=e.has("theme");this.items.forEach(d=>{d.id=d.id??nt()}),this._initialized&&this._grid&&r&&((o=this._grid)==null||o.setAnimation(!1),(a=this._grid)==null||a.batchUpdate(),(l=this._grid)==null||l.removeAll(!1),this.items.forEach(d=>{var h,u,g,m,b,y,w;const c=[...this._gridItemElements].find(_=>_.getAttribute("luzmo-grid-item-id")===d.id);c&&((b=this._grid)==null||b.makeWidget(c,{x:((h=d==null?void 0:d.position)==null?void 0:h.col)??0,y:((u=d==null?void 0:d.position)==null?void 0:u.row)??0,w:((g=d==null?void 0:d.position)==null?void 0:g.sizeX)??1,h:((m=d==null?void 0:d.position)==null?void 0:m.sizeY)??1,id:d.id}),(y=this._grid)==null||y.batchUpdate(!1),(w=this._grid)==null||w.setAnimation(!0))})),t&&this._updateLuzmoVizItemsLanguage(),this._initialized&&this._grid&&i&&this.viewMode!==e.get("viewMode")&&(this.viewMode?(this._grid.disable(),this._activeItemElement&&(this._cleanupActiveItem(this._activeItemElement),this._activeItemElement=void 0,this._gridElement.removeAttribute("has-active-item"))):this._grid.enable()),n&&this._loadTheme(this.theme)}_updateLuzmoVizItemsLanguage(){this._gridItemElements.forEach(e=>{const t=e.querySelector("luzmo-embed-viz-item");t&&(t.options={...t.options,locale:this.contentLanguage})})}_handleMouseover(e){if(this.viewMode)return;const i=e.target.closest(".grid-stack-item");i&&this._createItemActionsMenuPopover(i)}_cleanupActiveItem(e){e.removeAttribute("active"),this._activeItemElement===e&&(this._activeItemElement=void 0,this._gridElement.removeAttribute("has-active-item")),this._removeItemActionsMenuPopover(e)}_cleanup(){for(const e of this._gridItemElements)this._cleanupActiveItem(e);this._grid&&(this._grid.destroy(),this._grid=void 0),this._initialized=!1}_initializeGrid(){var t,i,r,n,o,a,l,d;if(this._initialized||!this._gridElement)return;const e={column:this.columns??48,cellHeight:this.rowHeight??16,marginTop:(((i=(t=this._fullTheme)==null?void 0:t.margins)==null?void 0:i[0])??16)/2,marginLeft:(((n=(r=this._fullTheme)==null?void 0:r.margins)==null?void 0:n[1])??16)/2,marginRight:(((a=(o=this._fullTheme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2,marginBottom:(((d=(l=this._fullTheme)==null?void 0:l.margins)==null?void 0:d[0])??16)/2,animate:!0,auto:!1,float:!1,removable:!1,acceptWidgets:!0,disableDrag:this.viewMode,disableResize:this.viewMode,resizable:{handles:["n","ne","e","se","s","sw","w","nw"].join(", ")},handle:".grid-item-drag-handle"};this._grid=z.init(e,this._gridElement),this._grid.batchUpdate(),this._gridItemElements.forEach(c=>{var m,b,y,w,_;const h=c.getAttribute("luzmo-grid-item-id"),u=this.items.find(x=>x.id===h),g={id:h,x:((m=u==null?void 0:u.position)==null?void 0:m.col)??0,y:((b=u==null?void 0:u.position)==null?void 0:b.row)??0,w:((y=u==null?void 0:u.position)==null?void 0:y.sizeX)??1,h:((w=u==null?void 0:u.position)==null?void 0:w.sizeY)??1};(_=this._grid)==null||_.makeWidget(c,g)}),this._grid.batchUpdate(!1),this._initialized=!0,this._grid.on("resizestart",(c,h)=>{const u=h.getAttribute("gs-w")??"",g=h.getAttribute("gs-h")??"";this._createOrUpdateDimensionsHint(h,u,g)}),this._grid.on("resize",(c,h)=>{const u=h.getAttribute("gs-w")??"",g=h.getAttribute("gs-h")??"";this._createOrUpdateDimensionsHint(h,u,g)}),this._grid.on("resizestop",(c,h)=>{this._removeDimensionsHint(h)}),this._grid.on("change",(c,h)=>{h.forEach(u=>{if(!(u!=null&&u.id))return;const g=this.items.findIndex(m=>m.id===u.id);g!==-1&&(this.items[g]={...this.items[g],position:{sizeX:u.w??1,sizeY:u.h??1,row:u.y??0,col:u.x??0}})}),this.dispatchEvent(new CustomEvent("grid-changed",{detail:{element:this._gridElement,grid:this._grid,items:this.items},bubbles:!0,composed:!0}))}),this.dispatchEvent(new CustomEvent("grid-ready",{detail:{element:this._gridElement,grid:this._grid,items:this.items},bubbles:!0,composed:!0}))}_createOrUpdateDimensionsHint(e,t,i){var l,d;const r=e.querySelector(".dimensions-hint-popover");if(r){r.style.display=t.length>0&&i.length>0?"block":"none",r.textContent=`${t} × ${i}`;return}const n=document.createElement("div");n.className="dimensions-hint-popover",n.setAttribute("popover","hint"),n.style.display=t.length>0&&i.length>0?"block":"none",n.textContent=`${t} × ${i}`,e.append(n);const o=10-(((d=(l=this.theme)==null?void 0:l.margins)==null?void 0:d[0])??10),a=ts(e,n,async()=>{const{x:c,y:h}=await rs(e,n,{placement:"bottom",middleware:[is(o),ss()]});n.style.left=`${c}px`,n.style.top=`${h}px`});n._cleanup=a,n.matches(":popover-open")||n.showPopover()}_removeDimensionsHint(e){const t=e.querySelector(".dimensions-hint-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}get grid(){return this._grid}get gridItems(){return this.items.map(e=>{var r;const t={item:e,element:this._gridElement.querySelector(`[gs-id="${e.id}"]`)},i=(r=t.element)==null?void 0:r.querySelector("luzmo-embed-viz-item");return i&&(t.luzmoElement=i),t})}registerRenderer(e,t){this.renderers={...this.renderers,[e]:t}}_renderOverlayContent(e){let t=wr(e==null?void 0:e.actionsMenu)??wr(this.defaultItemActionsMenu)??An();const i=Hn.itemTypes.find(r=>r.type===(e==null?void 0:e.type));return!(i!=null&&i.containsData)&&!(e!=null&&e.actionsMenu)&&!this.defaultItemActionsMenu&&(t=t.map(r=>{var n;return{...r,actions:(n=r.actions)==null?void 0:n.filter(o=>o.action!=="edit-data")}})),f.x`
+    `,this._hasItemAdded=!1,this._handleMouseout=e=>{if(this.viewMode)return;const i=e.target.closest(".grid-stack-item");if(!i)return;const r=e.relatedTarget;r!=null&&r.closest(".grid-item-actions-popover")||i.hasAttribute("active")||this._removeItemActionsMenuPopover(i)},this._handleKeyDown=e=>{if(!this.viewMode){if(e.key==="Delete"&&this._focusedItemElement)this._handleDeleteItem(new Event("delete"));else if(e.key==="Escape"&&this._focusedItemElement)this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement),this._focusedItemElement=void 0,this._gridElement.focus();else if(e.key==="Enter"&&this._focusedItemElement)e.preventDefault(),e.stopPropagation(),this._activeItemElement&&(this._activeItemElement.removeAttribute("active"),this._gridElement.removeAttribute("has-active-item"),this._removeItemActionsMenuPopover(this._activeItemElement),this._activeItemElement=void 0),this._gridElement.querySelectorAll(".grid-stack-item").forEach(t=>{t!==this._focusedItemElement&&this._removeItemActionsMenuPopover(t)}),this._createItemActionsMenuPopover(this._focusedItemElement),requestAnimationFrame(()=>{var i;const t=(i=this._focusedItemElement)==null?void 0:i.querySelector("luzmo-grid-item-actions-menu");t&&t.focus()});else if(this._focusedItemElement&&this._grid&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)){e.preventDefault(),e.stopPropagation();const t=this._focusedItemElement.gridstackNode;if(!t)return;const i=this.columns??48,n={ArrowLeft:{move:{x:t.x-1},resize:{x:t.x-1,w:t.w+1},shrink:{w:t.w-1},canMove:t.x>0,canResize:t.x>0,canShrink:t.w>1},ArrowRight:{move:{x:t.x+1},resize:{w:t.w+1},shrink:{x:t.x+1,w:t.w-1},canMove:t.x<i-t.w,canResize:t.x+t.w<i,canShrink:t.w>1},ArrowUp:{move:{y:t.y-1},resize:{y:t.y-1,h:t.h+1},shrink:{h:t.h-1},canMove:t.y>0,canResize:t.y>0,canShrink:t.h>1},ArrowDown:{move:{y:t.y+1},resize:{h:t.h+1},shrink:{y:t.y+1,h:t.h-1},canMove:!0,canResize:!0,canShrink:t.h>1}}[e.key];let o=null;e.shiftKey&&n.canResize?o=n.resize:(e.ctrlKey||e.metaKey)&&n.canShrink?o=n.shrink:n.canMove&&(o=n.move),o&&this._grid.update(this._focusedItemElement,o)}}},this._handleFocus=e=>{const i=e.target.closest(".grid-stack-item");i&&(this._focusedItemElement&&this._focusedItemElement!==i&&(this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement)),this._focusedItemElement=i,i.setAttribute("focused","true"))},this._handleBlur=e=>{if(!this._focusedItemElement)return;const t=e.relatedTarget;t!=null&&t.closest("luzmo-grid-item-actions-menu")||(this._focusedItemElement.removeAttribute("focused"),this._removeItemActionsMenuPopover(this._focusedItemElement),this._focusedItemElement=void 0,this._gridElement.focus())},this._handleDocumentClick=e=>{const t=e.composedPath(),i=this._gridElement.querySelector(".grid-stack-item[active]");if(!i||t.includes(i))return;const r=i.querySelector(".grid-item-actions-popover");r&&t.includes(r)||this._cleanupActiveItem(i)},this._handleAction=e=>{var n,o;const t=e.detail,i=(n=e.target)==null?void 0:n.closest(".grid-stack-item");if(!i)return;const r=i.getAttribute("gs-id");if(t.type==="toggle"&&t.action===this._activeItemActionToggle&&i===this._activeItemElement){this._activeItemElement=void 0,this._activeItemActionToggle=void 0,(o=this._gridElement)==null||o.removeAttribute("has-active-item"),i.removeAttribute("active"),this._cleanupActiveItem(i);return}if(!["delete","clone"].includes(t.action)){this._gridElement.querySelectorAll(".grid-stack-item").forEach(l=>{l!==i&&this._cleanupActiveItem(l)}),t.type==="toggle"&&(this._activeItemElement=i,this._activeItemActionToggle=t.action,this._gridElement.setAttribute("has-active-item","true"),i.setAttribute("active","true"));const a=this.items.find(l=>l.id===r);this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:t.action,items:this.items,element:i,id:r,type:a==null?void 0:a.type,slots:a==null?void 0:a.slots,options:a==null?void 0:a.options,filters:(a==null?void 0:a.filters)??[]},bubbles:!0,composed:!0,cancelable:!0}))}t.action==="delete"?(this._handleDeleteItem(e),this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:t.action,items:this.items,deletedId:r},bubbles:!0,composed:!0,cancelable:!0}))):t.action==="clone"&&this._handleCloneItem(e)},this._handleDeleteItem=e=>{var i;const t=((i=e.target)==null?void 0:i.closest(".grid-stack-item"))||this._focusedItemElement;t&&this.removeGridItemById(t.getAttribute("gs-id")||"")},this._handleCloneItem=e=>{const i=e.target.closest(".grid-stack-item");if(!i||!this._grid)return;const r=i.getAttribute("gs-id");if(!r)return;const n=this.items.find(l=>l.id===r);if(!n)return;const o={...structuredClone(n),id:nt()},a=this.addGridItem(o);this.dispatchEvent(new CustomEvent("grid-item-action",{detail:{action:"clone",items:this.items,originalElement:i,element:a,id:o.id,type:o.type,slots:o.slots,options:o.options,filters:o.filters},bubbles:!0,composed:!0}))}}static get styles(){return[f.r(Zl),f.r(ld)]}async _loadTheme(e){var t,i,r,n,o,a,l;(e==null?void 0:e.type)==="custom"?this._fullTheme=structuredClone(e):e!=null&&e.id&&si.systemThemeIds.includes(e.id)&&((t=this._fullTheme)==null?void 0:t.id)!==e.id?(this._fullTheme=await si.getTheme(e.id),this._fullTheme.id=e.id):e!=null&&e.id&&((i=this._fullTheme)==null?void 0:i.id)!==e.id||!e&&this._fullTheme||(this._fullTheme=await si.getTheme("default")),this._initialized&&this._updateThemeProperties(),!this._initialized&&this._gridElement&&await requestAnimationFrame(()=>{this._initializeGrid()}),this._grid&&((l=this._grid)==null||l.margin([(((n=(r=this.theme)==null?void 0:r.margins)==null?void 0:n[0])??16)/2,(((a=(o=this.theme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2].join(" "))),this.requestUpdate()}firstUpdated(){document.addEventListener("click",this._handleDocumentClick),this.addEventListener("keydown",this._handleKeyDown),this._loadTheme(this.theme)}disconnectedCallback(){super.disconnectedCallback(),this._cleanup(),document.removeEventListener("click",this._handleDocumentClick),this.removeEventListener("keydown",this._handleKeyDown)}willUpdate(e){var i,r,n,o,a,l;super.willUpdate(e),e.has("_initialized")&&(this._updateThemeProperties(),this._initialized&&this._grid&&((i=this._fullTheme)!=null&&i.margins)&&((l=this._grid)==null||l.margin([(((n=(r=this._fullTheme)==null?void 0:r.margins)==null?void 0:n[0])??16)/2,(((a=(o=this._fullTheme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2].join(" "))))}updated(e){var o,a,l;super.updated(e);const t=e.has("contentLanguage"),i=e.has("viewMode"),r=e.has("items"),n=e.has("theme");this.items.forEach(d=>{d.id=d.id??nt()}),this._initialized&&this._grid&&(r||this._hasItemAdded)&&(this._hasItemAdded&&this._gridItemElements.forEach(d=>{d.hasAttribute("orphan")&&d.remove()}),this._hasItemAdded=!1,(o=this._grid)==null||o.setAnimation(!1),(a=this._grid)==null||a.batchUpdate(),(l=this._grid)==null||l.removeAll(!1),this.items.forEach(d=>{var h,u,g,m,b,y,w;const c=[...this._gridItemElements].find(_=>_.getAttribute("luzmo-grid-item-id")===d.id);c&&((b=this._grid)==null||b.makeWidget(c,{x:((h=d==null?void 0:d.position)==null?void 0:h.col)??0,y:((u=d==null?void 0:d.position)==null?void 0:u.row)??0,w:((g=d==null?void 0:d.position)==null?void 0:g.sizeX)??1,h:((m=d==null?void 0:d.position)==null?void 0:m.sizeY)??1,id:d.id}),(y=this._grid)==null||y.batchUpdate(!1),(w=this._grid)==null||w.setAnimation(!0))})),t&&this._updateLuzmoVizItemsLanguage(),this._initialized&&this._grid&&i&&this.viewMode!==e.get("viewMode")&&(this.viewMode?(this._grid.disable(),this._activeItemElement&&(this._cleanupActiveItem(this._activeItemElement),this._activeItemElement=void 0,this._gridElement.removeAttribute("has-active-item"))):this._grid.enable()),n&&this._loadTheme(this.theme)}_updateLuzmoVizItemsLanguage(){this._gridItemElements.forEach(e=>{const t=e.querySelector("luzmo-embed-viz-item");t&&(t.options={...t.options,locale:this.contentLanguage})})}_handleMouseover(e){if(this.viewMode)return;const i=e.target.closest(".grid-stack-item");i&&this._createItemActionsMenuPopover(i)}_cleanupActiveItem(e){e.removeAttribute("active"),this._activeItemElement===e&&(this._activeItemElement=void 0,this._gridElement.removeAttribute("has-active-item")),this._removeItemActionsMenuPopover(e)}_cleanup(){for(const e of this._gridItemElements)this._cleanupActiveItem(e);this._grid&&(this._grid.destroy(),this._grid=void 0),this._initialized=!1}_initializeGrid(){var t,i,r,n,o,a,l,d;if(this._initialized||!this._gridElement)return;const e={column:this.columns??48,cellHeight:this.rowHeight??16,marginTop:(((i=(t=this._fullTheme)==null?void 0:t.margins)==null?void 0:i[0])??16)/2,marginLeft:(((n=(r=this._fullTheme)==null?void 0:r.margins)==null?void 0:n[1])??16)/2,marginRight:(((a=(o=this._fullTheme)==null?void 0:o.margins)==null?void 0:a[1])??16)/2,marginBottom:(((d=(l=this._fullTheme)==null?void 0:l.margins)==null?void 0:d[0])??16)/2,animate:!0,auto:!1,float:!1,removable:!1,acceptWidgets:!0,disableDrag:this.viewMode,disableResize:this.viewMode,minRow:1,resizable:{handles:["n","ne","e","se","s","sw","w","nw"].join(", ")},handle:".grid-item-drag-handle"};this._grid=z.init(e,this._gridElement),this._grid.batchUpdate(),this._gridItemElements.forEach(c=>{var m,b,y,w,_;const h=c.getAttribute("luzmo-grid-item-id"),u=this.items.find(x=>x.id===h),g={id:h,x:((m=u==null?void 0:u.position)==null?void 0:m.col)??0,y:((b=u==null?void 0:u.position)==null?void 0:b.row)??0,w:((y=u==null?void 0:u.position)==null?void 0:y.sizeX)??1,h:((w=u==null?void 0:u.position)==null?void 0:w.sizeY)??1};(_=this._grid)==null||_.makeWidget(c,g)}),this._grid.batchUpdate(!1),this._initialized=!0,this._grid.on("resizestart",(c,h)=>{const u=h.getAttribute("gs-w")??"",g=h.getAttribute("gs-h")??"";this._createOrUpdateDimensionsHint(h,u,g)}),this._grid.on("resize",(c,h)=>{const u=h.getAttribute("gs-w")??"",g=h.getAttribute("gs-h")??"";this._createOrUpdateDimensionsHint(h,u,g)}),this._grid.on("resizestop",(c,h)=>{this._removeDimensionsHint(h)}),this._grid.on("change",(c,h)=>{h.forEach(u=>{if(!(u!=null&&u.id))return;const g=this.items.findIndex(m=>m.id===u.id);g!==-1&&(this.items[g]={...this.items[g],position:{sizeX:u.w??1,sizeY:u.h??1,row:u.y??0,col:u.x??0}})}),this.dispatchEvent(new CustomEvent("grid-changed",{detail:{element:this._gridElement,grid:this._grid,items:this.items},bubbles:!0,composed:!0}))}),this.dispatchEvent(new CustomEvent("grid-ready",{detail:{element:this._gridElement,grid:this._grid,items:this.items},bubbles:!0,composed:!0}))}_createOrUpdateDimensionsHint(e,t,i){var l,d;const r=e.querySelector(".dimensions-hint-popover");if(r){r.style.display=t.length>0&&i.length>0?"block":"none",r.textContent=`${t} × ${i}`;return}const n=document.createElement("div");n.className="dimensions-hint-popover",n.setAttribute("popover","hint"),n.style.display=t.length>0&&i.length>0?"block":"none",n.textContent=`${t} × ${i}`,e.append(n);const o=10-(((d=(l=this.theme)==null?void 0:l.margins)==null?void 0:d[0])??10),a=ts(e,n,async()=>{const{x:c,y:h}=await rs(e,n,{placement:"bottom",middleware:[is(o),ss()]});n.style.left=`${c}px`,n.style.top=`${h}px`});n._cleanup=a,n.matches(":popover-open")||n.showPopover()}_removeDimensionsHint(e){const t=e.querySelector(".dimensions-hint-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}get grid(){return this._grid}get gridItems(){return this.items.map(e=>{var r;const t={item:e,element:this._gridElement.querySelector(`[gs-id="${e.id}"]`)},i=(r=t.element)==null?void 0:r.querySelector("luzmo-embed-viz-item");return i&&(t.luzmoElement=i),t})}registerRenderer(e,t){this.renderers={...this.renderers,[e]:t}}_renderOverlayContent(e){let t=wr(e==null?void 0:e.actionsMenu)??wr(this.defaultItemActionsMenu)??An();const i=Hn.itemTypes.find(r=>r.type===(e==null?void 0:e.type));return!(i!=null&&i.containsData)&&!(e!=null&&e.actionsMenu)&&!this.defaultItemActionsMenu&&(t=t.map(r=>{var n;return{...r,actions:(n=r.actions)==null?void 0:n.filter(o=>o.action!=="edit-data")}})),f.x`
       <div class="grid-item-actions-popover" popover="manual">
         <luzmo-grid-item-actions-menu
           .actions=${t}
@@ -278,7 +278,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         >
         </luzmo-grid-item-actions-menu>
       </div>
-    `}_createItemActionsMenuPopover(e){let t=e.querySelector(".grid-item-actions-popover");const i=e.querySelector(".grid-stack-item-content"),r=this.getGridItemById(e.getAttribute("gs-id")??"");if(!t){const o=document.createDocumentFragment();f.B(this._renderOverlayContent(r==null?void 0:r.item),o),t=o.querySelector(".grid-item-actions-popover"),e.append(t)}const n=ts(i,t,async()=>{var l;const{x:o,y:a}=await rs(i,t,{placement:((l=r==null?void 0:r.item)==null?void 0:l.placementActionsMenu)??this.placementItemActionsMenu??"right-start",middleware:[is(0),ss({crossAxis:!1})]});t.style.left=`${o}px`,t.style.top=`${a}px`});t._cleanup=n,t.matches(":popover-open")||t.showPopover()}_removeItemActionsMenuPopover(e){const t=e.querySelector(".grid-item-actions-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}_updateThemeProperties(){var r,n,o,a,l,d,c,h,u,g,m,b,y,w,_,x,R,A,j,W,H;if(!this._fullTheme)return;const e=this._fullTheme.boxShadow;let t="";if(e){const G=new C(e.color),O={r:Math.round(G.srgb.r*255),g:Math.round(G.srgb.g*255),b:Math.round(G.srgb.b*255)},ue=((r=this._fullTheme.margins)==null?void 0:r[0])??16,$=Math.min(ue/10,2),oe=(I,me)=>me>=1?`rgba(${I.r},${I.g},${I.b},1)`:me<=0?`rgba(${I.r},${I.g},${I.b},0)`:`rgba(${I.r},${I.g},${I.b},${me})`;e.size==="none"?t="none":e.size==="S"?t=`0 ${$*2}px ${$*4}px ${oe(O,.16)}, 0 ${$*2}px ${$*4}px ${oe(O,.23)}`:e.size==="M"?t=`0 ${$*8}px ${$*16}px ${oe(O,.19)}, 0 ${$*4}px ${$*4}px ${oe(O,.23)}`:e.size==="L"&&(t=`0 ${$*12}px ${$*24}px ${oe(O,.25)}, 0 ${$*8}px ${$*8}px ${oe(O,.22)}`)}new Map([["--grid-font-family",(o=(n=this._fullTheme)==null?void 0:n.font)==null?void 0:o.fontFamily],["--grid-background",(a=this._fullTheme)==null?void 0:a.background],["--grid-item-box-shadow",t],["--grid-item-background",(l=this._fullTheme)==null?void 0:l.itemsBackground],["--grid-item-border-color",(c=(d=this._fullTheme)==null?void 0:d.borders)==null?void 0:c["border-color"]],["--grid-item-border-style",(u=(h=this._fullTheme)==null?void 0:h.borders)==null?void 0:u["border-style"]],["--grid-item-border-radius",(m=(g=this._fullTheme)==null?void 0:g.borders)==null?void 0:m["border-radius"]],["--grid-item-border-width",`${(y=(b=this._fullTheme)==null?void 0:b.borders)==null?void 0:y["border-top-width"]}`],["--grid-item-border-top-width",(_=(w=this._fullTheme)==null?void 0:w.borders)==null?void 0:_["border-top-width"]],["--grid-item-border-right-width",(R=(x=this._fullTheme)==null?void 0:x.borders)==null?void 0:R["border-right-width"]],["--grid-item-border-bottom-width",(j=(A=this._fullTheme)==null?void 0:A.borders)==null?void 0:j["border-bottom-width"]],["--grid-item-border-left-width",(H=(W=this._fullTheme)==null?void 0:W.borders)==null?void 0:H["border-left-width"]]]).forEach((G,O)=>{G?this.style.setProperty(O,G):this.style.removeProperty(O)})}getGridItemById(e){return this.gridItems.find(t=>t.item.id===e)}addGridItem(e){var a,l,d,c,h;const t={...structuredClone(e),id:nt(),position:structuredClone(e==null?void 0:e.position)??{sizeX:1,sizeY:1,col:0,row:0}};this.items.push(t);const i=this._renderItem(t,this.items.length),r=document.createDocumentFragment();f.B(i,r,{host:this}),this._gridElement.append(r);const n=this._gridElement.querySelector(`[luzmo-grid-item-id="${t.id}"]`),o={x:((a=t.position)==null?void 0:a.col)??0,y:((l=t.position)==null?void 0:l.row)??0,w:((d=t.position)==null?void 0:d.sizeX)??1,h:((c=t.position)==null?void 0:c.sizeY)??1,autoPosition:!0,id:t.id};return(h=this._grid)==null||h.makeWidget(n,o),this._activeItemElement&&this._cleanupActiveItem(this._activeItemElement),requestAnimationFrame(()=>{const u=n.getBoundingClientRect();(u.bottom>window.innerHeight||u.top<0)&&n.scrollIntoView({behavior:"smooth",block:"center"})}),n}removeGridItem(e){this.removeGridItemById((e==null?void 0:e.id)??"")}removeGridItemById(e){var r;if(!e)return;const t=(r=this.getGridItemById(e))==null?void 0:r.element;t&&this._grid&&(this._grid.removeWidget(t),this._focusedItemElement=void 0);const i=this.items.findIndex(n=>n.id===e);i!==-1&&this.items.splice(i,1),this._removeItemActionsMenuPopover(t),t&&this._activeItemElement===t&&this._cleanupActiveItem(t)}_renderItem(e,t){var n;const i={...e.options,locale:this.contentLanguage};i.theme||(i.theme=(n=this._fullTheme)!=null&&n.id?{id:this._fullTheme.id}:structuredClone(this._fullTheme));const r=!this.viewMode;return f.x`
+    `}_createItemActionsMenuPopover(e){let t=e.querySelector(".grid-item-actions-popover");const i=e.querySelector(".grid-stack-item-content"),r=this.getGridItemById(e.getAttribute("gs-id")??"");if(!t){const o=document.createDocumentFragment();f.B(this._renderOverlayContent(r==null?void 0:r.item),o),t=o.querySelector(".grid-item-actions-popover"),e.append(t)}const n=ts(i,t,async()=>{var l;const{x:o,y:a}=await rs(i,t,{placement:((l=r==null?void 0:r.item)==null?void 0:l.placementActionsMenu)??this.placementItemActionsMenu??"right-start",middleware:[is(0),ss({crossAxis:!1})]});t.style.left=`${o}px`,t.style.top=`${a}px`});t._cleanup=n,t.matches(":popover-open")||t.showPopover()}_removeItemActionsMenuPopover(e){const t=e.querySelector(".grid-item-actions-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}_updateThemeProperties(){var r,n,o,a,l,d,c,h,u,g,m,b,y,w,_,x,R,A,j,W,H;if(!this._fullTheme)return;const e=this._fullTheme.boxShadow;let t="";if(e){const G=new C(e.color),O={r:Math.round(G.srgb.r*255),g:Math.round(G.srgb.g*255),b:Math.round(G.srgb.b*255)},ue=((r=this._fullTheme.margins)==null?void 0:r[0])??16,$=Math.min(ue/10,2),oe=(I,me)=>me>=1?`rgba(${I.r},${I.g},${I.b},1)`:me<=0?`rgba(${I.r},${I.g},${I.b},0)`:`rgba(${I.r},${I.g},${I.b},${me})`;e.size==="none"?t="none":e.size==="S"?t=`0 ${$*2}px ${$*4}px ${oe(O,.16)}, 0 ${$*2}px ${$*4}px ${oe(O,.23)}`:e.size==="M"?t=`0 ${$*8}px ${$*16}px ${oe(O,.19)}, 0 ${$*4}px ${$*4}px ${oe(O,.23)}`:e.size==="L"&&(t=`0 ${$*12}px ${$*24}px ${oe(O,.25)}, 0 ${$*8}px ${$*8}px ${oe(O,.22)}`)}new Map([["--grid-font-family",(o=(n=this._fullTheme)==null?void 0:n.font)==null?void 0:o.fontFamily],["--grid-background",(a=this._fullTheme)==null?void 0:a.background],["--grid-item-box-shadow",t],["--grid-item-background",(l=this._fullTheme)==null?void 0:l.itemsBackground],["--grid-item-border-color",(c=(d=this._fullTheme)==null?void 0:d.borders)==null?void 0:c["border-color"]],["--grid-item-border-style",(u=(h=this._fullTheme)==null?void 0:h.borders)==null?void 0:u["border-style"]],["--grid-item-border-radius",(m=(g=this._fullTheme)==null?void 0:g.borders)==null?void 0:m["border-radius"]],["--grid-item-border-width",`${(y=(b=this._fullTheme)==null?void 0:b.borders)==null?void 0:y["border-top-width"]}`],["--grid-item-border-top-width",(_=(w=this._fullTheme)==null?void 0:w.borders)==null?void 0:_["border-top-width"]],["--grid-item-border-right-width",(R=(x=this._fullTheme)==null?void 0:x.borders)==null?void 0:R["border-right-width"]],["--grid-item-border-bottom-width",(j=(A=this._fullTheme)==null?void 0:A.borders)==null?void 0:j["border-bottom-width"]],["--grid-item-border-left-width",(H=(W=this._fullTheme)==null?void 0:W.borders)==null?void 0:H["border-left-width"]]]).forEach((G,O)=>{G?this.style.setProperty(O,G):this.style.removeProperty(O)})}getGridItemById(e){return this.gridItems.find(t=>t.item.id===e)}addGridItem(e){var a,l,d,c,h;!this._initialized&&this._gridElement&&console.warn("Grid is not initialized, wait for grid-ready event");const t={...structuredClone(e),id:nt(),position:structuredClone(e==null?void 0:e.position)??{sizeX:1,sizeY:1,col:0,row:0}};this.items.push(t);const i=this._renderItem(t,this.items.length),r=document.createDocumentFragment();f.B(i,r,{host:this}),this._gridElement.append(r);const n=this._gridElement.querySelector(`[luzmo-grid-item-id="${t.id}"]`);n.setAttribute("orphan","true");const o={x:((a=t.position)==null?void 0:a.col)??0,y:((l=t.position)==null?void 0:l.row)??0,w:((d=t.position)==null?void 0:d.sizeX)??1,h:((c=t.position)==null?void 0:c.sizeY)??1,autoPosition:!0,id:t.id};return(h=this._grid)==null||h.makeWidget(n,o),this._hasItemAdded=!0,this._activeItemElement&&this._cleanupActiveItem(this._activeItemElement),requestAnimationFrame(()=>{const u=n.getBoundingClientRect();(u.bottom>window.innerHeight||u.top<0)&&n.scrollIntoView({behavior:"smooth",block:"center"})}),n}removeGridItem(e){this.removeGridItemById((e==null?void 0:e.id)??"")}removeGridItemById(e){var r;if(!e)return;const t=(r=this.getGridItemById(e))==null?void 0:r.element;t&&this._grid&&(this._grid.removeWidget(t),this._focusedItemElement=void 0);const i=this.items.findIndex(n=>n.id===e);i!==-1&&this.items.splice(i,1),this._removeItemActionsMenuPopover(t),t&&this._activeItemElement===t&&this._cleanupActiveItem(t)}_renderItem(e,t){var n;const i={...e.options,locale:this.contentLanguage};i.theme||(i.theme=(n=this._fullTheme)!=null&&n.id?{id:this._fullTheme.id}:structuredClone(this._fullTheme));const r=!this.viewMode;return f.x`
       <div
         class="luzmo-grid-item has-luzmo-viz-item"
         luzmo-grid-item-id=${e.id??nt()}

package/components/grid/index.js

@@ -237,7 +237,7 @@ const bn = async (i, e, t) => {
       x: _,
       y: z,
       data: R,
-      reset: C
+      reset: A
     } = await w({
       x: c,
       y: h,
@@ -258,11 +258,11 @@ const bn = async (i, e, t) => {
         ...f[b],
         ...R
       }
-    }, C && m <= 50 && (m++, typeof C == "object" && (C.placement && (u = C.placement), C.rects && (d = C.rects === !0 ? await n.getElementRects({
+    }, A && m <= 50 && (m++, typeof A == "object" && (A.placement && (u = A.placement), A.rects && (d = A.rects === !0 ? await n.getElementRects({
       reference: i,
       floating: e,
       strategy: r
-    }) : C.rects), {
+    }) : A.rects), {
       x: c,
       y: h
     } = is(d, u, l)), p = -1);
@@ -307,17 +307,17 @@ async function yn(i, e) {
   } : {
     x: 1,
     y: 1
-  }, C = Ot(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
+  }, A = Ot(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: a,
     rect: _,
     offsetParent: z,
     strategy: l
   }) : _);
   return {
-    top: (w.top - C.top + m.top) / R.y,
-    bottom: (C.bottom - w.bottom + m.bottom) / R.y,
-    left: (w.left - C.left + m.left) / R.x,
-    right: (C.right - w.right + m.right) / R.x
+    top: (w.top - A.top + m.top) / R.y,
+    bottom: (A.bottom - w.bottom + m.bottom) / R.y,
+    left: (w.left - A.left + m.left) / R.x,
+    right: (A.right - w.right + m.right) / R.x
   };
 }
 const vn = function(i) {
@@ -344,9 +344,9 @@ const vn = function(i) {
       } = Oi(i, e);
       if ((t = o.arrow) != null && t.alignmentOffset)
         return {};
-      const w = Je(r), _ = Oe(a), z = Je(a) === a, R = await (l.isRTL == null ? void 0 : l.isRTL(d.floating)), C = u || (z || !p ? [Ht(a)] : un(a)), V = m !== "none";
-      !u && V && C.push(...fn(a, p, m, R));
-      const F = [a, ...C], H = await yn(e, b), U = [];
+      const w = Je(r), _ = Oe(a), z = Je(a) === a, R = await (l.isRTL == null ? void 0 : l.isRTL(d.floating)), A = u || (z || !p ? [Ht(a)] : un(a)), V = m !== "none";
+      !u && V && A.push(...fn(a, p, m, R));
+      const F = [a, ...A], H = await yn(e, b), U = [];
       let O = ((s = o.flip) == null ? void 0 : s.overflows) || [];
       if (c && U.push(H[w]), h) {
         const T = hn(r, n, R);
@@ -678,7 +678,7 @@ function Sn(i) {
     y: a
   };
 }
-function Cn(i, e) {
+function An(i, e) {
   const t = se(i), s = we(i), r = t.visualViewport;
   let o = s.clientWidth, n = s.clientHeight, a = 0, l = 0;
   if (r) {
@@ -693,7 +693,7 @@ function Cn(i, e) {
     y: l
   };
 }
-function An(i, e) {
+function Cn(i, e) {
   const t = $e(i, !0, e === "fixed"), s = t.top + i.clientTop, r = t.left + i.clientLeft, o = ve(i) ? Ve(i) : ye(1), n = i.clientWidth * o.x, a = i.clientHeight * o.y, l = r * o.x, d = s * o.y;
   return {
     width: n,
@@ -705,11 +705,11 @@ function An(i, e) {
 function rs(i, e, t) {
   let s;
   if (e === "viewport")
-    s = Cn(i, t);
+    s = An(i, t);
   else if (e === "document")
     s = Sn(we(i));
   else if (ce(e))
-    s = An(e, t);
+    s = Cn(e, t);
   else {
     const r = Or(i);
     s = {
@@ -871,7 +871,7 @@ function Pn(i, e) {
       threshold: qe(0, zi(1, l)) || 1
     };
     let R = !0;
-    function C(V) {
+    function A(V) {
       const F = V[0].intersectionRatio;
       if (F !== l) {
         if (!R)
@@ -883,13 +883,13 @@ function Pn(i, e) {
       F === 1 && !Wr(d, i.getBoundingClientRect()) && n(), R = !1;
     }
     try {
-      t = new IntersectionObserver(C, {
+      t = new IntersectionObserver(A, {
         ...z,
         // Handle <iframe>s
         root: r.ownerDocument
       });
     } catch {
-      t = new IntersectionObserver(C, z);
+      t = new IntersectionObserver(A, z);
     }
     t.observe(i);
   }
@@ -1081,8 +1081,8 @@ ${i}`, console.warn(t));
   const e = Math.random() * 16 | 0;
   return (i == "x" ? e : e & 3 | 8).toString(16);
 }), us = (i) => {
-  const e = [], { appServer: t, language: s, editorLanguage: r, qeVersion: o, loaderBackground: n, loaderSpinnerColor: a, loaderSpinnerBackground: l, loaderFontColor: d, screenMode: c, key: h, token: u, timezoneId: f, itemEmbedding: m, itemDimensions: p, dashboardId: b, dashboardSlug: w, itemId: _, theme: z, mainColor: R, accentColor: C, editMode: V } = i.params;
-  s && s !== "auto" && e.push(`language=${s}`), r && r !== "auto" && e.push(`editorLanguage=${r}`), o && e.push(`qe_version=${o}`), n && e.push(`ldrbg=${n}`), d && e.push(`ldrftclr=${d}`), a && e.push(`ldrspclr=${a}`), l && e.push(`ldrspbg=${l}`), z && e.push(`theme=${z}`), R && e.push(`mainColor=${R}`), C && e.push(`accentColor=${C}`), c && c !== "auto" && e.push("screenMode=&{screenMode}"), f && e.push("timezoneId=" + f), m && p && p.width && e.push("width=" + p.width), m && p && p.height && e.push("height=" + p.height), V && e.push("editMode=" + V);
+  const e = [], { appServer: t, language: s, editorLanguage: r, qeVersion: o, loaderBackground: n, loaderSpinnerColor: a, loaderSpinnerBackground: l, loaderFontColor: d, screenMode: c, key: h, token: u, timezoneId: f, itemEmbedding: m, itemDimensions: p, dashboardId: b, dashboardSlug: w, itemId: _, theme: z, mainColor: R, accentColor: A, editMode: V } = i.params;
+  s && s !== "auto" && e.push(`language=${s}`), r && r !== "auto" && e.push(`editorLanguage=${r}`), o && e.push(`qe_version=${o}`), n && e.push(`ldrbg=${n}`), d && e.push(`ldrftclr=${d}`), a && e.push(`ldrspclr=${a}`), l && e.push(`ldrspbg=${l}`), z && e.push(`theme=${z}`), R && e.push(`mainColor=${R}`), A && e.push(`accentColor=${A}`), c && c !== "auto" && e.push("screenMode=&{screenMode}"), f && e.push("timezoneId=" + f), m && p && p.width && e.push("width=" + p.width), m && p && p.height && e.push("height=" + p.height), V && e.push("editMode=" + V);
   const F = h && u ? "#" + h + ":" + u : "";
   e.push("version=" + (i.libVersion || Wn));
   const H = m ? `${t}i/${b || w}/${_}?${encodeURIComponent(e.join("&"))}${F}` : `${t}i/${b || w}?${encodeURIComponent(e.join("&"))}${F}`;
@@ -1378,7 +1378,7 @@ const Yn = (i, e) => {
       const [w] = e;
       let _ = hs(w);
       for (const z of b) {
-        const R = e.find((C) => C === z);
+        const R = e.find((A) => A === z);
         R ? _ = hs(R) : i.dimensions[z] = i.dimensions[_];
       }
     }
@@ -2763,13 +2763,13 @@ class ba {
     });
   }
 }
-const Ce = new ba();
-var Sr, Cr, Ar, re = {
+const Ae = new ba();
+var Sr, Ar, Cr, re = {
   gamut_mapping: "css",
   precision: 5,
   deltaE: "76",
   // Default deltaE method
-  verbose: ((Ar = (Cr = (Sr = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : Sr.env) == null ? void 0 : Cr.NODE_ENV) == null ? void 0 : Ar.toLowerCase()) !== "test",
+  verbose: ((Cr = (Ar = (Sr = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : Sr.env) == null ? void 0 : Ar.NODE_ENV) == null ? void 0 : Cr.toLowerCase()) !== "test",
   warn: function(e) {
     var t, s;
     this.verbose && ((s = (t = globalThis == null ? void 0 : globalThis.console) == null ? void 0 : t.warn) == null || s.call(t, e));
@@ -2780,16 +2780,16 @@ const K = {
   D50: [0.3457 / 0.3585, 1, (1 - 0.3457 - 0.3585) / 0.3585],
   D65: [0.3127 / 0.329, 1, (1 - 0.3127 - 0.329) / 0.329]
 };
-function Ci(i) {
+function Ai(i) {
   return Array.isArray(i) ? i : K[i];
 }
 function $t(i, e, t, s = {}) {
-  if (i = Ci(i), e = Ci(e), !i || !e)
+  if (i = Ai(i), e = Ai(e), !i || !e)
     throw new TypeError(`Missing white point to convert ${i ? "" : "from"}${!i && !e ? "/" : ""}${e ? "" : "to"}`);
   if (i === e)
     return t;
   let r = { W1: i, W2: e, XYZ: t, options: s };
-  if (Ce.run("chromatic-adaptation-start", r), r.M || (r.W1 === K.D65 && r.W2 === K.D50 ? r.M = [
+  if (Ae.run("chromatic-adaptation-start", r), r.M || (r.W1 === K.D65 && r.W2 === K.D50 ? r.M = [
     [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
     [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
     [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371]
@@ -2797,7 +2797,7 @@ function $t(i, e, t, s = {}) {
     [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
     [-0.0283697093338637, 1.0099953980813041, 0.021041441191917323],
     [0.012314014864481998, -0.020507649298898964, 1.330365926242124]
-  ])), Ce.run("chromatic-adaptation-end", r), r.M)
+  ])), Ae.run("chromatic-adaptation-end", r), r.M)
     return I(r.M, r.XYZ);
   throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.");
 }
@@ -2818,7 +2818,7 @@ function Es(i, e, t, s) {
 function Zr(i, { meta: e } = {}) {
   var s, r, o, n;
   let t = { str: (s = String(i)) == null ? void 0 : s.trim() };
-  if (Ce.run("parse-start", t), t.color)
+  if (Ae.run("parse-start", t), t.color)
     return t.color;
   if (t.parsed = qr(t.str), t.parsed) {
     let a = t.parsed.name;
@@ -2882,7 +2882,7 @@ const va = 75e-6, J = class J {
       "name" in t[o] || (t[o].name = o);
     this.coords = t;
     let s = e.white ?? this.base.white ?? "D65";
-    this.white = Ci(s), this.formats = e.formats ?? {};
+    this.white = Ai(s), this.formats = e.formats ?? {};
     for (let o in this.formats) {
       let n = this.formats[o];
       n.type || (n.type = "function"), n.name || (n.name = o);
@@ -2895,7 +2895,7 @@ const va = 75e-6, J = class J {
       writable: !1,
       enumerable: !0,
       configurable: !0
-    }), Ce.run("colorspace-init-end", this);
+    }), Ae.run("colorspace-init-end", this);
   }
   inGamut(e, { epsilon: t = va } = {}) {
     if (!this.equals(this.gamutSpace))
@@ -3248,7 +3248,7 @@ var ft = new x({
   }
 });
 const Rs = 25 ** 7, Bt = Math.PI, Ss = 180 / Bt, Fe = Bt / 180;
-function Cs(i) {
+function As(i) {
   const e = i * i;
   return e * e * e * i;
 }
@@ -3256,11 +3256,11 @@ function Qr(i, e, { kL: t = 1, kC: s = 1, kH: r = 1 } = {}) {
   [i, e] = S([i, e]);
   let [o, n, a] = ie.from(i), l = ft.from(ie, [o, n, a])[1], [d, c, h] = ie.from(e), u = ft.from(ie, [d, c, h])[1];
   l < 0 && (l = 0), u < 0 && (u = 0);
-  let f = (l + u) / 2, m = Cs(f), p = 0.5 * (1 - Math.sqrt(m / (m + Rs))), b = (1 + p) * n, w = (1 + p) * c, _ = Math.sqrt(b ** 2 + a ** 2), z = Math.sqrt(w ** 2 + h ** 2), R = b === 0 && a === 0 ? 0 : Math.atan2(a, b), C = w === 0 && h === 0 ? 0 : Math.atan2(h, w);
-  R < 0 && (R += 2 * Bt), C < 0 && (C += 2 * Bt), R *= Ss, C *= Ss;
-  let V = d - o, F = z - _, H = C - R, U = R + C, O = Math.abs(H), me;
+  let f = (l + u) / 2, m = As(f), p = 0.5 * (1 - Math.sqrt(m / (m + Rs))), b = (1 + p) * n, w = (1 + p) * c, _ = Math.sqrt(b ** 2 + a ** 2), z = Math.sqrt(w ** 2 + h ** 2), R = b === 0 && a === 0 ? 0 : Math.atan2(a, b), A = w === 0 && h === 0 ? 0 : Math.atan2(h, w);
+  R < 0 && (R += 2 * Bt), A < 0 && (A += 2 * Bt), R *= Ss, A *= Ss;
+  let V = d - o, F = z - _, H = A - R, U = R + A, O = Math.abs(H), me;
   _ * z === 0 ? me = 0 : O <= 180 ? me = H : H > 180 ? me = H - 360 : H < -180 ? me = H + 360 : re.warn("the unthinkable has happened");
-  let B = 2 * Math.sqrt(z * _) * Math.sin(me * Fe / 2), ae = (o + d) / 2, T = (_ + z) / 2, fe = Cs(T), Y;
+  let B = 2 * Math.sqrt(z * _) * Math.sin(me * Fe / 2), ae = (o + d) / 2, T = (_ + z) / 2, fe = As(T), Y;
   _ * z === 0 ? Y = U : O <= 180 ? Y = U / 2 : U < 360 ? Y = (U + 360) / 2 : Y = (U - 360) / 2;
   let ge = (ae - 50) ** 2, Q = 1 + 0.015 * ge / Math.sqrt(20 + ge), le = 1 + 0.045 * T, Le = 1;
   Le -= 0.17 * Math.cos((Y - 30) * Fe), Le += 0.24 * Math.cos(2 * Y * Fe), Le += 0.32 * Math.cos((3 * Y + 6) * Fe), Le -= 0.2 * Math.cos((4 * Y - 63) * Fe);
@@ -3316,7 +3316,7 @@ var Qe = new x({
     }
   }
 });
-function Ai(i, e) {
+function Ci(i, e) {
   [i, e] = S([i, e]);
   let [t, s, r] = Qe.from(i), [o, n, a] = Qe.from(e), l = t - o, d = s - n, c = r - a;
   return Math.sqrt(l ** 2 + d ** 2 + c ** 2);
@@ -3345,16 +3345,16 @@ function eo(i, e, t = "lab") {
 function Sa(i, e) {
   return eo(i, e, "lab");
 }
-const Ca = Math.PI, As = Ca / 180;
-function Aa(i, e, { l: t = 2, c: s = 1 } = {}) {
+const Aa = Math.PI, Cs = Aa / 180;
+function Ca(i, e, { l: t = 2, c: s = 1 } = {}) {
   [i, e] = S([i, e]);
   let [r, o, n] = ie.from(i), [, a, l] = ft.from(ie, [r, o, n]), [d, c, h] = ie.from(e), u = ft.from(ie, [d, c, h])[1];
   a < 0 && (a = 0), u < 0 && (u = 0);
   let f = r - d, m = a - u, p = o - c, b = n - h, w = p ** 2 + b ** 2 - m ** 2, _ = 0.511;
   r >= 16 && (_ = 0.040975 * r / (1 + 0.01765 * r));
   let z = 0.0638 * a / (1 + 0.0131 * a) + 0.638, R;
-  Number.isNaN(l) && (l = 0), l >= 164 && l <= 345 ? R = 0.56 + Math.abs(0.2 * Math.cos((l + 168) * As)) : R = 0.36 + Math.abs(0.4 * Math.cos((l + 35) * As));
-  let C = Math.pow(a, 4), V = Math.sqrt(C / (C + 1900)), F = z * (V * R + 1 - V), H = (f / (t * _)) ** 2;
+  Number.isNaN(l) && (l = 0), l >= 164 && l <= 345 ? R = 0.56 + Math.abs(0.2 * Math.cos((l + 168) * Cs)) : R = 0.36 + Math.abs(0.4 * Math.cos((l + 35) * Cs));
+  let A = Math.pow(a, 4), V = Math.sqrt(A / (A + 1900)), F = z * (V * R + 1 - V), H = (f / (t * _)) ** 2;
   return H += (m / (s * z)) ** 2, H += w / F ** 2, Math.sqrt(H);
 }
 const Ds = 203;
@@ -3388,7 +3388,7 @@ var Vi = new x({
     return i.map((e) => Math.max(e / Ds, 0));
   }
 });
-const Rt = 1.15, St = 0.66, Ls = 2610 / 2 ** 14, Da = 2 ** 14 / 2610, Is = 3424 / 2 ** 12, Ts = 2413 / 2 ** 7, Ns = 2392 / 2 ** 7, La = 1.7 * 2523 / 2 ** 5, Hs = 2 ** 5 / (1.7 * 2523), Ct = -0.56, hi = 16295499532821565e-27, Ia = [
+const Rt = 1.15, St = 0.66, Ls = 2610 / 2 ** 14, Da = 2 ** 14 / 2610, Is = 3424 / 2 ** 12, Ts = 2413 / 2 ** 7, Ns = 2392 / 2 ** 7, La = 1.7 * 2523 / 2 ** 5, Hs = 2 ** 5 / (1.7 * 2523), At = -0.56, hi = 16295499532821565e-27, Ia = [
   [0.41478972, 0.579999, 0.014648],
   [-0.20151, 1.120649, 0.0531008],
   [-0.0166008, 0.2648, 0.6684799]
@@ -3426,10 +3426,10 @@ var to = new x({
       let f = Is + Ts * (u / 1e4) ** Ls, m = 1 + Ns * (u / 1e4) ** Ls;
       return (f / m) ** La;
     }), [l, d, c] = I(Na, a);
-    return [(1 + Ct) * l / (1 + Ct * l) - hi, d, c];
+    return [(1 + At) * l / (1 + At * l) - hi, d, c];
   },
   toBase(i) {
-    let [e, t, s] = i, r = (e + hi) / (1 + Ct - Ct * (e + hi)), n = I(Ha, [r, t, s]).map(function(u) {
+    let [e, t, s] = i, r = (e + hi) / (1 + At - At * (e + hi)), n = I(Ha, [r, t, s]).map(function(u) {
       let f = Is - u ** Hs, m = Ns * u ** Hs - Ts;
       return 1e4 * (f / m) ** Da;
     }), [a, l, d] = I(Ta, n), c = (a + (Rt - 1) * d) / Rt, h = (l + (St - 1) * c) / St;
@@ -3794,11 +3794,11 @@ function ll(i, e) {
 }
 var tt = {
   deltaE76: Sa,
-  deltaECMC: Aa,
+  deltaECMC: Ca,
   deltaE2000: Qr,
   deltaEJz: Oa,
   deltaEITP: qa,
-  deltaEOK: Ai,
+  deltaEOK: Ci,
   deltaEHCT: ll
 };
 function dl(i) {
@@ -3819,7 +3819,7 @@ const Gs = {
     blackWhiteClamp: { channel: "hct.t", min: 0, max: 100 }
   }
 };
-function Ae(i, {
+function Ce(i, {
   method: e = re.gamut_mapping,
   space: t = void 0,
   deltaEMethod: s = "",
@@ -3842,7 +3842,7 @@ function Ae(i, {
             break;
           }
       }
-      let l = Ae(L(i, t), { method: "clip", space: t });
+      let l = Ce(L(i, t), { method: "clip", space: t });
       if (a(i, l) > r) {
         if (Object.keys(o).length === 3) {
           let _ = x.resolveCoord(o.channel), z = te(L(i, _.space), _.id);
@@ -3858,7 +3858,7 @@ function Ae(i, {
         let m = (d.range || d.refRange)[0], p = dl(r), b = m, w = te(u, h);
         for (; w - b > p; ) {
           let _ = et(u);
-          _ = Ae(_, { space: t, method: "clip" }), a(u, _) - r < p ? b = te(u, h) : w = te(u, h), Ee(u, h, (b + w) / 2);
+          _ = Ce(_, { space: t, method: "clip" }), a(u, _) - r < p ? b = te(u, h) : w = te(u, h), Ee(u, h, (b + w) / 2);
         }
         n = L(u, t);
       } else
@@ -3875,7 +3875,7 @@ function Ae(i, {
   }
   return t !== i.space && (n = L(n, i.space)), i.coords = n.coords, i;
 }
-Ae.returns = "color";
+Ce.returns = "color";
 const js = {
   WHITE: { space: Qe, coords: [1, 0, 0] },
   BLACK: { space: Qe, coords: [0, 0, 0] }
@@ -3907,14 +3907,14 @@ function cl(i, { space: e } = {}) {
       return w;
     }), p;
   }
-  let l = 0, d = o.coords[1], c = !0, h = et(o), u = a(h), f = Ai(u, h);
+  let l = 0, d = o.coords[1], c = !0, h = et(o), u = a(h), f = Ci(u, h);
   if (f < 0.02)
     return u;
   for (; d - l > 1e-4; ) {
     const m = (l + d) / 2;
     if (h.coords[1] = m, c && Pe(h, e, { epsilon: 0 }))
       l = m;
-    else if (u = a(h), f = Ai(u, h), f < 0.02) {
+    else if (u = a(h), f = Ci(u, h), f < 0.02) {
       if (0.02 - f < 1e-4)
         break;
       c = !1, l = m;
@@ -3926,7 +3926,7 @@ function cl(i, { space: e } = {}) {
 function L(i, e, { inGamut: t } = {}) {
   i = S(i), e = x.get(e);
   let s = e.from(i), r = { space: e, coords: s, alpha: i.alpha };
-  return t && (r = Ae(r, t === !0 ? void 0 : t)), r;
+  return t && (r = Ce(r, t === !0 ? void 0 : t)), r;
 }
 L.returns = "color";
 function ht(i, {
@@ -3941,7 +3941,7 @@ function ht(i, {
   let n = t;
   t = i.space.getFormat(t) ?? i.space.getFormat("default") ?? x.DEFAULT_FORMAT;
   let a = i.coords.slice();
-  if (s || (s = t.toGamut), s && !Pe(i) && (a = Ae(et(i), s === !0 ? void 0 : s).coords), t.type === "custom")
+  if (s || (s = t.toGamut), s && !Pe(i) && (a = Ce(et(i), s === !0 ? void 0 : s).coords), t.type === "custom")
     if (r.precision = e, t.serialize)
       o = t.serialize(a, i.alpha, r);
     else
@@ -3978,7 +3978,7 @@ var ei = new Z({
   toXYZ_M: hl,
   fromXYZ_M: ul
 });
-const At = 1.09929682680944, qs = 0.018053968510807;
+const Ct = 1.09929682680944, qs = 0.018053968510807;
 var uo = new Z({
   id: "rec2020",
   name: "REC.2020",
@@ -3986,12 +3986,12 @@ var uo = new Z({
   // Non-linear transfer function from Rec. ITU-R BT.2020-2 table 4
   toBase(i) {
     return i.map(function(e) {
-      return e < qs * 4.5 ? e / 4.5 : Math.pow((e + At - 1) / At, 1 / 0.45);
+      return e < qs * 4.5 ? e / 4.5 : Math.pow((e + Ct - 1) / Ct, 1 / 0.45);
     });
   },
   fromBase(i) {
     return i.map(function(e) {
-      return e >= qs ? At * Math.pow(e, 0.45) - (At - 1) : 4.5 * e;
+      return e >= qs ? Ct * Math.pow(e, 0.45) - (Ct - 1) : 4.5 * e;
     });
   }
 });
@@ -4309,7 +4309,7 @@ function _l(i, e) {
   let t = Math.max(De(i), 0), s = Math.max(De(e), 0);
   return s > t && ([t, s] = [s, t]), (t + 0.05) / (s + 0.05);
 }
-const zl = 0.56, xl = 0.57, El = 0.62, Ml = 0.65, Ks = 0.022, kl = 1.414, Rl = 0.1, Sl = 5e-4, Cl = 1.14, Js = 0.027, Al = 1.14;
+const zl = 0.56, xl = 0.57, El = 0.62, Ml = 0.65, Ks = 0.022, kl = 1.414, Rl = 0.1, Sl = 5e-4, Al = 1.14, Js = 0.027, Cl = 1.14;
 function Zs(i) {
   return i >= Ks ? i : i + (Ks - i) ** kl;
 }
@@ -4324,7 +4324,7 @@ function Dl(i, e) {
   let l = Ue(o) * 0.2126729 + Ue(n) * 0.7151522 + Ue(a) * 0.072175;
   i = L(i, "srgb"), [o, n, a] = i.coords;
   let d = Ue(o) * 0.2126729 + Ue(n) * 0.7151522 + Ue(a) * 0.072175, c = Zs(l), h = Zs(d), u = h > c;
-  return Math.abs(h - c) < Sl ? s = 0 : u ? (t = h ** zl - c ** xl, s = t * Cl) : (t = h ** Ml - c ** El, s = t * Al), Math.abs(s) < Rl ? r = 0 : s > 0 ? r = s - Js : r = s + Js, r * 100;
+  return Math.abs(h - c) < Sl ? s = 0 : u ? (t = h ** zl - c ** xl, s = t * Al) : (t = h ** Ml - c ** El, s = t * Cl), Math.abs(s) < Rl ? r = 0 : s > 0 ? r = s - Js : r = s + Js, r * 100;
 }
 function Ll(i, e) {
   i = S(i), e = S(e);
@@ -4518,7 +4518,7 @@ function zt(i, e, t = {}) {
   let { space: s, outputSpace: r, progression: o, premultiplied: n } = t;
   i = S(i), e = S(e), i = et(i), e = et(e);
   let a = { colors: [i, e], options: t };
-  if (s ? s = x.get(s) : s = x.registry[re.interpolationSpace] || i.space, r = r ? x.get(r) : s, i = L(i, s), e = L(e, s), i = Ae(i), e = Ae(e), s.coords.h && s.coords.h.type === "angle") {
+  if (s ? s = x.get(s) : s = x.registry[re.interpolationSpace] || i.space, r = r ? x.get(r) : s, i = L(i, s), e = L(e, s), i = Ce(i), e = Ce(e), s.coords.h && s.coords.h.type === "angle") {
     let l = t.hue = t.hue || "shorter", d = [s, "h"], [c, h] = [te(i, d), te(e, d)];
     isNaN(c) && !isNaN(h) ? c = h : isNaN(h) && !isNaN(c) && (h = c), [c, h] = za(l, [c, h]), Ee(i, d, c), Ee(e, d, h);
   }
@@ -5078,10 +5078,10 @@ var cd = new Z({
   }
 });
 const ko = {};
-Ce.add("chromatic-adaptation-start", (i) => {
+Ae.add("chromatic-adaptation-start", (i) => {
   i.options.method && (i.M = Ro(i.W1, i.W2, i.options.method));
 });
-Ce.add("chromatic-adaptation-end", (i) => {
+Ae.add("chromatic-adaptation-end", (i) => {
   i.M || (i.M = Ro(i.W1, i.W2, i.options.method));
 });
 function ii({ id: i, toCone_M: e, fromCone_M: t }) {
@@ -5287,7 +5287,7 @@ var md = new Z({
   sRGB: it,
   sRGB_Linear: fo
 });
-class A {
+class C {
   /**
    * Creates an instance of Color.
    * Signatures:
@@ -5320,7 +5320,7 @@ class A {
     return this.space.id;
   }
   clone() {
-    return new A(this.space, this.coords, this.alpha);
+    return new C(this.space, this.coords, this.alpha);
   }
   toJSON() {
     return {
@@ -5331,46 +5331,46 @@ class A {
   }
   display(...e) {
     let t = bl(this, ...e);
-    return t.color = new A(t.color), t;
+    return t.color = new C(t.color), t;
   }
   /**
    * Get a color from the argument passed
    * Basically gets us the same result as new Color(color) but doesn't clone an existing color object
    */
   static get(e, ...t) {
-    return e instanceof A ? e : new A(e, ...t);
+    return e instanceof C ? e : new C(e, ...t);
   }
   static defineFunction(e, t, s = t) {
     let { instance: r = !0, returns: o } = s, n = function(...a) {
       let l = t(...a);
       if (o === "color")
-        l = A.get(l);
+        l = C.get(l);
       else if (o === "function<color>") {
         let d = l;
         l = function(...c) {
           let h = d(...c);
-          return A.get(h);
+          return C.get(h);
         }, Object.assign(l, d);
-      } else o === "array<color>" && (l = l.map((d) => A.get(d)));
+      } else o === "array<color>" && (l = l.map((d) => C.get(d)));
       return l;
     };
-    e in A || (A[e] = n), r && (A.prototype[e] = function(...a) {
+    e in C || (C[e] = n), r && (C.prototype[e] = function(...a) {
       return n(this, ...a);
     });
   }
   static defineFunctions(e) {
     for (let t in e)
-      A.defineFunction(t, e[t], e[t]);
+      C.defineFunction(t, e[t], e[t]);
   }
   static extend(e) {
     if (e.register)
-      e.register(A);
+      e.register(C);
     else
       for (let t in e)
-        A.defineFunction(t, e[t]);
+        C.defineFunction(t, e[t]);
   }
 }
-A.defineFunctions({
+C.defineFunctions({
   get: te,
   getAll: _t,
   set: Ee,
@@ -5378,13 +5378,13 @@ A.defineFunctions({
   to: L,
   equals: yl,
   inGamut: Pe,
-  toGamut: Ae,
+  toGamut: Ce,
   distance: eo,
   toString: ht
 });
-Object.assign(A, {
+Object.assign(C, {
   util: pa,
-  hooks: Ce,
+  hooks: Ae,
   WHITES: K,
   Space: x,
   spaces: x.registry,
@@ -5396,7 +5396,7 @@ for (let i of Object.keys(wr))
   x.register(wr[i]);
 for (let i in x.registry)
   Hi(i, x.registry[i]);
-Ce.add("colorspace-init-end", (i) => {
+Ae.add("colorspace-init-end", (i) => {
   var e;
   Hi(i.id, i), (e = i.aliases) == null || e.forEach((t) => {
     Hi(t, i);
@@ -5404,7 +5404,7 @@ Ce.add("colorspace-init-end", (i) => {
 });
 function Hi(i, e) {
   let t = i.replace(/-/g, "_");
-  Object.defineProperty(A.prototype, t, {
+  Object.defineProperty(C.prototype, t, {
     // Convert coords to coords in another colorspace and return them
     // Source colorspace: this.spaceId
     // Target colorspace: id
@@ -5446,15 +5446,15 @@ function Hi(i, e) {
     enumerable: !0
   });
 }
-A.extend(tt);
-A.extend({ deltaE: lt });
-Object.assign(A, { deltaEMethods: tt });
-A.extend(Ul);
-A.extend({ contrast: Pl });
-A.extend(Bl);
-A.extend(wl);
-A.extend(jl);
-A.extend(Tt);
+C.extend(tt);
+C.extend({ deltaE: lt });
+Object.assign(C, { deltaEMethods: tt });
+C.extend(Ul);
+C.extend({ contrast: Pl });
+C.extend(Bl);
+C.extend(wl);
+C.extend(jl);
+C.extend(Tt);
 function fd(i, e, t, s, r) {
   const o = (...n) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + r + " and has been replaced with `" + s + "`. It will be **removed** in a future release"), e.apply(i, n));
   return o.prototype = e.prototype, o;
@@ -6280,7 +6280,7 @@ class pe {
 function Ft(i, e) {
   i.touches.length > 1 || (i.cancelable && i.preventDefault(), g.simulateMouseEvent(i.changedTouches[0], e));
 }
-function Co(i, e) {
+function Ao(i, e) {
   i.cancelable && i.preventDefault(), g.simulateMouseEvent(i, e);
 }
 function Ut(i) {
@@ -6300,11 +6300,11 @@ function qt(i) {
   i.pointerType !== "mouse" && i.target.releasePointerCapture(i.pointerId);
 }
 function _r(i) {
-  k.dragElement && i.pointerType !== "mouse" && Co(i, "mouseenter");
+  k.dragElement && i.pointerType !== "mouse" && Ao(i, "mouseenter");
 }
 function zr(i) {
   k.dragElement && i.pointerType !== "mouse" && (pe.pointerLeaveTimeout = window.setTimeout(() => {
-    delete pe.pointerLeaveTimeout, Co(i, "mouseleave");
+    delete pe.pointerLeaveTimeout, Ao(i, "mouseleave");
   }, 10));
 }
 class si {
@@ -8017,8 +8017,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const z = this._extraDragRow;
       if (this.engine.collide(r, a)) {
         const R = this.getRow();
-        let C = Math.max(0, a.y + r.h - R);
-        this.opts.maxRow && R + C > this.opts.maxRow && (C = Math.max(0, this.opts.maxRow - R)), this._extraDragRow = C;
+        let A = Math.max(0, a.y + r.h - R);
+        this.opts.maxRow && R + A > this.opts.maxRow && (A = Math.max(0, this.opts.maxRow - R)), this._extraDragRow = A;
       } else
         this._extraDragRow = 0;
       if (this._extraDragRow !== z && this._updateContainerHeight(), r.x === a.x && r.y === a.y)
@@ -8113,7 +8113,7 @@ const xd = {
   tooltip: "Edit",
   action: "edit",
   type: "toggle"
-}, Ao = {
+}, Co = {
   icon: Fo,
   label: "Edit data",
   tooltip: "Data",
@@ -8165,7 +8165,7 @@ const xd = {
             filters: { ...Er },
             clone: { ...Lo },
             edit: { ...Ed },
-            "edit-data": { ...Ao },
+            "edit-data": { ...Co },
             "edit-options": { ...Do },
             "edit-filters": { ...Er },
             lock: { ...xd }
@@ -8178,7 +8178,7 @@ const xd = {
   {
     type: "group",
     actions: [
-      { ...Ao },
+      { ...Co },
       { ...Do },
       { ...Lo }
     ]
@@ -8305,19 +8305,19 @@ ri([
 st = ri([
   rn()
 ], st);
-const Sd = ':host{display:block;width:100%;height:100%}.grid-stack{width:100%;height:100%;position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';
-var Cd = Object.defineProperty, W = (i, e, t, s) => {
+const Sd = ':host{display:block;width:100%}.grid-stack{width:100%;min-height:var(--luzmo-grid-min-height);position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';
+var Ad = Object.defineProperty, W = (i, e, t, s) => {
   for (var r = void 0, o = i.length - 1, n; o >= 0; o--)
     (n = i[o]) && (r = n(e, t, r) || r);
-  return r && Cd(e, t, r), r;
+  return r && Ad(e, t, r), r;
 };
 class $ extends Dr {
   constructor() {
-    super(...arguments), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com", this.language = "en", this.contentLanguage = "en", this.columns = 48, this.rowHeight = 16, this.viewMode = !1, this.placementItemActionsMenu = "right-start", this.theme = {}, this.items = [], this.renderers = {}, this._initialized = !1, this.defaultRenderer = (e, t) => D`
+    super(...arguments), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com", this.language = "en", this.contentLanguage = "en", this.columns = 48, this.rowHeight = 16, this.viewMode = !1, this.placementItemActionsMenu = "right-start", this.items = [], this.renderers = {}, this._initialized = !1, this.defaultRenderer = (e, t) => D`
       <div class="grid-item-content">
         <div class="grid-item-type">${e.type}</div>
       </div>
-    `, this._handleMouseout = (e) => {
+    `, this._hasItemAdded = !1, this._handleMouseout = (e) => {
       if (this.viewMode) return;
       const s = e.target.closest(".grid-stack-item");
       if (!s) return;
@@ -8483,7 +8483,9 @@ class $ extends Dr {
   }
   async _loadTheme(e) {
     var t, s, r, o, n, a, l;
-    (e == null ? void 0 : e.type) === "custom" ? this._fullTheme = structuredClone(e) : e != null && e.id && Qo.includes(e.id) && ((t = this._fullTheme) == null ? void 0 : t.id) !== e.id ? (this._fullTheme = await ts(e.id), this._fullTheme.id = e.id) : e != null && e.id && ((s = this._fullTheme) == null ? void 0 : s.id) !== e.id || !e && this._fullTheme || (this._fullTheme = await ts("default")), this._initialized && this._updateThemeProperties(), !this._initialized && this._gridElement && this._initializeGrid(), this._grid && ((l = this._grid) == null || l.margin(
+    (e == null ? void 0 : e.type) === "custom" ? this._fullTheme = structuredClone(e) : e != null && e.id && Qo.includes(e.id) && ((t = this._fullTheme) == null ? void 0 : t.id) !== e.id ? (this._fullTheme = await ts(e.id), this._fullTheme.id = e.id) : e != null && e.id && ((s = this._fullTheme) == null ? void 0 : s.id) !== e.id || !e && this._fullTheme || (this._fullTheme = await ts("default")), this._initialized && this._updateThemeProperties(), !this._initialized && this._gridElement && await requestAnimationFrame(() => {
+      this._initializeGrid();
+    }), this._grid && ((l = this._grid) == null || l.margin(
       [
         (((o = (r = this.theme) == null ? void 0 : r.margins) == null ? void 0 : o[0]) ?? 16) / 2,
         (((a = (n = this.theme) == null ? void 0 : n.margins) == null ? void 0 : a[1]) ?? 16) / 2
@@ -8511,7 +8513,9 @@ class $ extends Dr {
     const t = e.has("contentLanguage"), s = e.has("viewMode"), r = e.has("items"), o = e.has("theme");
     this.items.forEach((d) => {
       d.id = d.id ?? nt();
-    }), this._initialized && this._grid && r && ((n = this._grid) == null || n.setAnimation(!1), (a = this._grid) == null || a.batchUpdate(), (l = this._grid) == null || l.removeAll(!1), this.items.forEach((d) => {
+    }), this._initialized && this._grid && (r || this._hasItemAdded) && (this._hasItemAdded && this._gridItemElements.forEach((d) => {
+      d.hasAttribute("orphan") && d.remove();
+    }), this._hasItemAdded = !1, (n = this._grid) == null || n.setAnimation(!1), (a = this._grid) == null || a.batchUpdate(), (l = this._grid) == null || l.removeAll(!1), this.items.forEach((d) => {
       var h, u, f, m, p, b, w;
       const c = [...this._gridItemElements].find((_) => _.getAttribute("luzmo-grid-item-id") === d.id);
       c && ((p = this._grid) == null || p.makeWidget(c, {
@@ -8566,6 +8570,7 @@ class $ extends Dr {
       acceptWidgets: !0,
       disableDrag: this.viewMode,
       disableResize: this.viewMode,
+      minRow: 1,
       resizable: {
         handles: ["n", "ne", "e", "se", "s", "sw", "w", "nw"].join(", ")
       },
@@ -8739,12 +8744,12 @@ class $ extends Dr {
     t && (t._cleanup && (t._cleanup(), delete t._cleanup), t.matches(":popover-open") && t.hidePopover(), t.remove());
   }
   _updateThemeProperties() {
-    var r, o, n, a, l, d, c, h, u, f, m, p, b, w, _, z, R, C, V, F, H;
+    var r, o, n, a, l, d, c, h, u, f, m, p, b, w, _, z, R, A, V, F, H;
     if (!this._fullTheme) return;
     const e = this._fullTheme.boxShadow;
     let t = "";
     if (e) {
-      const U = new A(e.color), O = {
+      const U = new C(e.color), O = {
         r: Math.round(U.srgb.r * 255),
         g: Math.round(U.srgb.g * 255),
         b: Math.round(U.srgb.b * 255)
@@ -8776,7 +8781,7 @@ class $ extends Dr {
       ],
       [
         "--grid-item-border-bottom-width",
-        (V = (C = this._fullTheme) == null ? void 0 : C.borders) == null ? void 0 : V["border-bottom-width"]
+        (V = (A = this._fullTheme) == null ? void 0 : A.borders) == null ? void 0 : V["border-bottom-width"]
       ],
       [
         "--grid-item-border-left-width",
@@ -8791,6 +8796,7 @@ class $ extends Dr {
   }
   addGridItem(e) {
     var a, l, d, c, h;
+    !this._initialized && this._gridElement && console.warn("Grid is not initialized, wait for grid-ready event");
     const t = {
       ...structuredClone(e),
       id: nt(),
@@ -8806,7 +8812,9 @@ class $ extends Dr {
     es(s, r, { host: this }), this._gridElement.append(r);
     const o = this._gridElement.querySelector(
       `[luzmo-grid-item-id="${t.id}"]`
-    ), n = {
+    );
+    o.setAttribute("orphan", "true");
+    const n = {
       x: ((a = t.position) == null ? void 0 : a.col) ?? 0,
       y: ((l = t.position) == null ? void 0 : l.row) ?? 0,
       w: ((d = t.position) == null ? void 0 : d.sizeX) ?? 1,
@@ -8815,7 +8823,7 @@ class $ extends Dr {
       autoPosition: !0,
       id: t.id
     };
-    return (h = this._grid) == null || h.makeWidget(o, n), this._activeItemElement && this._cleanupActiveItem(this._activeItemElement), requestAnimationFrame(() => {
+    return (h = this._grid) == null || h.makeWidget(o, n), this._hasItemAdded = !0, this._activeItemElement && this._cleanupActiveItem(this._activeItemElement), requestAnimationFrame(() => {
       const u = o.getBoundingClientRect();
       (u.bottom > window.innerHeight || u.top < 0) && o.scrollIntoView({ behavior: "smooth", block: "center" });
     }), o;
@@ -8881,7 +8889,7 @@ class $ extends Dr {
     var s, r;
     const e = this.items.map((o, n) => (o.id = o.id ?? nt(), this._renderItem(o, n)));
     let t = !1;
-    return this._initialized && ((s = this._fullTheme) != null && s.itemsBackground || (r = this._fullTheme) != null && r.background) && (t = new A(
+    return this._initialized && ((s = this._fullTheme) != null && s.itemsBackground || (r = this._fullTheme) != null && r.background) && (t = new C(
       this._fullTheme.itemsBackground ?? this._fullTheme.background
     ).luminance < 0.5), D`
       <div

package/custom-elements.json

@@ -5769,9 +5769,8 @@
               "kind": "field",
               "name": "theme",
               "type": {
-                "text": "any"
+                "text": "any | undefined"
               },
-              "default": "{}",
               "description": "Grid options configuration",
               "attribute": "theme",
               "reflects": true
@@ -5927,9 +5926,8 @@
             {
               "name": "theme",
               "type": {
-                "text": "any"
+                "text": "any | undefined"
               },
-              "default": "{}",
               "description": "Grid options configuration",
               "fieldName": "theme"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.1-alpha.44",
+  "version": "1.0.1-alpha.46",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",