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

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/ai-chat';
 export * from './components/interactive-viz-item';
+export * from './components/add-to-dashboard';
 export * from './components/ai-interaction-textarea';
 export * from './components/dataset-icon';
 export * from './components/dataset-selector-list';
@@ -43,12 +44,12 @@ export * from './components/filter-value-picker-datetime';
 export * from './components/filter-value-picker-hierarchy';
 export * from './components/filter-value-picker-numeric';
 export * from './components/item-grid';
+export * from './components/item-grid-item-actions-menu';
 export * from './components/item-slot-drop-panel';
 export * from './components/item-slot-picker-panel';
 export * from './components/item-slot-picker';
 export * from './components/slot-menu';
 export * from './components/slot-menu-list';
-export * from './components/viz-item-menu';
 export * from './item-definitions/item-list';
 export * from './types';
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.9-beta.1",
+  "version": "1.0.9-beta.11",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -11,6 +11,16 @@
       "import": "./components/index.js",
       "require": "./components/index.cjs"
     },
+    "./grid-core": {
+      "types": "./grid-core/index.d.ts",
+      "import": "./components/grid-core.js",
+      "require": "./components/grid-core.cjs"
+    },
+    "./add-to-dashboard": {
+      "types": "./components/add-to-dashboard/index.d.ts",
+      "import": "./components/add-to-dashboard/index.js",
+      "require": "./components/add-to-dashboard/index.cjs"
+    },
     "./ai-chat": {
       "types": "./components/ai-chat/index.d.ts",
       "import": "./components/ai-chat/index.js",
@@ -151,6 +161,11 @@
       "import": "./components/item-grid/index.js",
       "require": "./components/item-grid/index.cjs"
     },
+    "./item-grid-item-actions-menu": {
+      "types": "./components/item-grid-item-actions-menu/index.d.ts",
+      "import": "./components/item-grid-item-actions-menu/index.js",
+      "require": "./components/item-grid-item-actions-menu/index.cjs"
+    },
     "./item-option": {
       "types": "./components/item-option/index.d.ts",
       "import": "./components/item-option/index.js",
@@ -261,11 +276,6 @@
       "import": "./components/slot-menu-list/index.js",
       "require": "./components/slot-menu-list/index.cjs"
     },
-    "./viz-item-menu": {
-      "types": "./components/viz-item-menu/index.d.ts",
-      "import": "./components/viz-item-menu/index.js",
-      "require": "./components/viz-item-menu/index.cjs"
-    },
     "./types": {
       "types": "./types.d.ts",
       "import": "./components/types.js",
@@ -333,8 +343,8 @@
     "@lit/localize": "^0.12.2",
     "@lit/task": "^1.0.1",
     "@luzmo/embed": "^7.5.0",
-    "@luzmo/icons": "^1.0.1-alpha.46",
-    "@luzmo/lucero": "^2.2.1",
+    "@luzmo/icons": "^1.0.1-alpha.47",
+    "@luzmo/lucero": "^2.5.1",
     "colorjs.io": "^0.5.2",
     "lit": "^3.3.2",
     "yjs": "^13.6.29"
@@ -349,10 +359,11 @@
     "@codemirror/commands": "^6.10.3",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.1",
+    "@floating-ui/dom": "^1.7.4",
     "@luzmo/dashboard-contents-types": "1.0.43",
     "@tanstack/query-core": "^5.90.5",
     "dompurify": "^3.4.16",
-    "gridstack": "^12.3.3",
+    "gridstack": "^14.0.0",
     "marked": "^18.0.5",
     "uuid": "^14.0.0"
   }

package/react/components/add-to-dashboard.component.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAddToDashboard as LuzmoAddToDashboardClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail } from '@luzmo/analytics-components-kit/add-to-dashboard';
+
+const LuzmoAddToDashboardComponent = createComponent({
+  tagName: 'luzmo-add-to-dashboard',
+  elementClass: LuzmoAddToDashboardClass,
+  react: React,
+  events: {
+    onLuzmoChartAdded: 'luzmo-chart-added' as EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>,
+    onLuzmoChartAddFailed: 'luzmo-chart-add-failed' as EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-add-to-dashboard>
+ *
+ * @event onLuzmoChartAdded - Fired after the chart was saved to a dashboard, a new dashboard or a variant.
+ * @event onLuzmoChartAddFailed - Fired when saving the chart failed.
+ */
+export const LuzmoAddToDashboard = LuzmoAddToDashboardComponent as ReactWebComponent<
+  LuzmoAddToDashboardClass,
+  {
+    onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
+    onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoAddToDashboard */
+export type LuzmoAddToDashboardElement = LuzmoAddToDashboardClass;

package/react/components/ai-chat.component.ts

@@ -24,7 +24,7 @@ const LuzmoAiChatComponent = createComponent({
  * @event onLuzmoDatasetsChanged - Fired when the selected datasets change
  * @event onLuzmoStep - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
  * @event onLuzmoComplete - Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`.
- * @event onLuzmoStop - Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message.
+ * @event onLuzmoStop - Fired when an in-flight prompt is stopped
  * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
  * @event onLuzmoAssistantMessageAction - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
  */

package/react/components/interactive-viz-item.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
 
 const LuzmoInteractiveVizItemComponent = createComponent({
   tagName: 'luzmo-interactive-viz-item',
@@ -9,16 +9,20 @@ const LuzmoInteractiveVizItemComponent = createComponent({
   events: {
     onLuzmoChartOptionsChanged: 'luzmo-chart-options-changed' as EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>,
     onLuzmoChartChanged: 'luzmo-chart-changed' as EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>,
-    onLuzmoFeedbackChanged: 'luzmo-feedback-changed' as EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>
+    onLuzmoFeedbackChanged: 'luzmo-feedback-changed' as EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>,
+    onLuzmoChartAdded: 'luzmo-chart-added' as EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>,
+    onLuzmoChartAddFailed: 'luzmo-chart-add-failed' as EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-interactive-viz-item>
  *
- * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart).
- * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating.
+ * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
+ * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
+ * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.
  */
 export const LuzmoInteractiveVizItem = LuzmoInteractiveVizItemComponent as ReactWebComponent<
   LuzmoInteractiveVizItemClass,
@@ -26,6 +30,8 @@ export const LuzmoInteractiveVizItem = LuzmoInteractiveVizItemComponent as React
     onLuzmoChartOptionsChanged: EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
     onLuzmoChartChanged: EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
     onLuzmoFeedbackChanged: EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
+    onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
+    onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;
   }
 >;
 

package/react/components/item-grid-item-actions-menu.component.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoItemGridItemActionsMenu as LuzmoItemGridItemActionsMenuClass, ItemGridItemActionEventDetail, ItemGridItemActionHoverEventDetail } from '@luzmo/analytics-components-kit/item-grid-item-actions-menu';
+
+const LuzmoItemGridItemActionsMenuComponent = createComponent({
+  tagName: 'luzmo-item-grid-item-actions-menu',
+  elementClass: LuzmoItemGridItemActionsMenuClass,
+  react: React,
+  events: {
+    onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action' as EventName<CustomEvent<ItemGridItemActionEventDetail>>,
+    onLuzmoItemGridItemActionHover: 'luzmo-item-grid-item-action-hover' as EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-item-grid-item-actions-menu>
+ *
+ * @event onLuzmoItemGridItemAction - Fired when the user activates an action.
+ * @event onLuzmoItemGridItemActionHover - Fired when the pointer enters an action, for example to preload what it opens.
+ */
+export const LuzmoItemGridItemActionsMenu = LuzmoItemGridItemActionsMenuComponent as ReactWebComponent<
+  LuzmoItemGridItemActionsMenuClass,
+  {
+    onLuzmoItemGridItemAction: EventName<CustomEvent<ItemGridItemActionEventDetail>>;
+    onLuzmoItemGridItemActionHover: EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoItemGridItemActionsMenu */
+export type LuzmoItemGridItemActionsMenuElement = LuzmoItemGridItemActionsMenuClass;

package/react/components/item-grid.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemGrid as LuzmoItemGridClass, GridItemActionEventDetail, GridItemStatesChangedEventDetail, GridLifecycleEventDetail } from '@luzmo/analytics-components-kit/item-grid';
+import { LuzmoItemGrid as LuzmoItemGridClass, GridItemActionEventDetail, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, ItemGridItemActionHoverEventDetail } from '@luzmo/analytics-components-kit/item-grid';
 
 const LuzmoItemGridComponent = createComponent({
   tagName: 'luzmo-item-grid',
@@ -8,6 +8,7 @@ const LuzmoItemGridComponent = createComponent({
   react: React,
   events: {
     onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action' as EventName<CustomEvent<GridItemActionEventDetail>>,
+    onLuzmoItemGridItemActionHover: 'luzmo-item-grid-item-action-hover' as EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>,
     onLuzmoItemGridLayoutChanged: 'luzmo-item-grid-layout-changed' as EventName<CustomEvent<GridLifecycleEventDetail>>,
     onLuzmoItemGridReady: 'luzmo-item-grid-ready' as EventName<CustomEvent<GridLifecycleEventDetail>>,
     onLuzmoItemGridItemStatesChanged: 'luzmo-item-grid-item-states-changed' as EventName<CustomEvent<GridItemStatesChangedEventDetail>>
@@ -18,6 +19,7 @@ const LuzmoItemGridComponent = createComponent({
  * React wrapper for <luzmo-item-grid>
  *
  * @event onLuzmoItemGridItemAction - Fired when an item action is performed
+ * @event onLuzmoItemGridItemActionHover - Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item.
  * @event onLuzmoItemGridLayoutChanged - Fired when the grid layout is changed
  * @event onLuzmoItemGridReady - Fired when the grid is ready
  * @event onLuzmoItemGridItemStatesChanged - Fired when item states change (controlled and uncontrolled mode)
@@ -26,6 +28,7 @@ export const LuzmoItemGrid = LuzmoItemGridComponent as ReactWebComponent<
   LuzmoItemGridClass,
   {
     onLuzmoItemGridItemAction: EventName<CustomEvent<GridItemActionEventDetail>>;
+    onLuzmoItemGridItemActionHover: EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>;
     onLuzmoItemGridLayoutChanged: EventName<CustomEvent<GridLifecycleEventDetail>>;
     onLuzmoItemGridReady: EventName<CustomEvent<GridLifecycleEventDetail>>;
     onLuzmoItemGridItemStatesChanged: EventName<CustomEvent<GridItemStatesChangedEventDetail>>;

package/react/esm/components/add-to-dashboard.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAddToDashboard as LuzmoAddToDashboardClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail } from '@luzmo/analytics-components-kit/add-to-dashboard';
+/**
+ * React wrapper for <luzmo-add-to-dashboard>
+ *
+ * @event onLuzmoChartAdded - Fired after the chart was saved to a dashboard, a new dashboard or a variant.
+ * @event onLuzmoChartAddFailed - Fired when saving the chart failed.
+ */
+export declare const LuzmoAddToDashboard: ReactWebComponent<LuzmoAddToDashboardClass, {
+    onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
+    onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoAddToDashboard */
+export type LuzmoAddToDashboardElement = LuzmoAddToDashboardClass;

package/react/esm/components/add-to-dashboard.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoAddToDashboard as LuzmoAddToDashboardClass } from '@luzmo/analytics-components-kit/add-to-dashboard';
+const LuzmoAddToDashboardComponent = createComponent({
+    tagName: 'luzmo-add-to-dashboard',
+    elementClass: LuzmoAddToDashboardClass,
+    react: React,
+    events: {
+        onLuzmoChartAdded: 'luzmo-chart-added',
+        onLuzmoChartAddFailed: 'luzmo-chart-add-failed'
+    }
+});
+/**
+ * React wrapper for <luzmo-add-to-dashboard>
+ *
+ * @event onLuzmoChartAdded - Fired after the chart was saved to a dashboard, a new dashboard or a variant.
+ * @event onLuzmoChartAddFailed - Fired when saving the chart failed.
+ */
+export const LuzmoAddToDashboard = LuzmoAddToDashboardComponent;

package/react/esm/components/ai-chat.component.d.ts

@@ -7,7 +7,7 @@ import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversatio
  * @event onLuzmoDatasetsChanged - Fired when the selected datasets change
  * @event onLuzmoStep - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
  * @event onLuzmoComplete - Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`.
- * @event onLuzmoStop - Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message.
+ * @event onLuzmoStop - Fired when an in-flight prompt is stopped
  * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
  * @event onLuzmoAssistantMessageAction - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
  */

package/react/esm/components/ai-chat.component.js

@@ -22,7 +22,7 @@ const LuzmoAiChatComponent = createComponent({
  * @event onLuzmoDatasetsChanged - Fired when the selected datasets change
  * @event onLuzmoStep - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
  * @event onLuzmoComplete - Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`.
- * @event onLuzmoStop - Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message.
+ * @event onLuzmoStop - Fired when an in-flight prompt is stopped
  * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
  * @event onLuzmoAssistantMessageAction - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
  */

package/react/esm/components/interactive-viz-item.component.d.ts

@@ -1,16 +1,20 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
 /**
  * React wrapper for <luzmo-interactive-viz-item>
  *
- * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart).
- * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating.
+ * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
+ * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
+ * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.
  */
 export declare const LuzmoInteractiveVizItem: ReactWebComponent<LuzmoInteractiveVizItemClass, {
     onLuzmoChartOptionsChanged: EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
     onLuzmoChartChanged: EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
     onLuzmoFeedbackChanged: EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
+    onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
+    onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoInteractiveVizItem */
 export type LuzmoInteractiveVizItemElement = LuzmoInteractiveVizItemClass;

package/react/esm/components/interactive-viz-item.component.js

@@ -8,14 +8,18 @@ const LuzmoInteractiveVizItemComponent = createComponent({
     events: {
         onLuzmoChartOptionsChanged: 'luzmo-chart-options-changed',
         onLuzmoChartChanged: 'luzmo-chart-changed',
-        onLuzmoFeedbackChanged: 'luzmo-feedback-changed'
+        onLuzmoFeedbackChanged: 'luzmo-feedback-changed',
+        onLuzmoChartAdded: 'luzmo-chart-added',
+        onLuzmoChartAddFailed: 'luzmo-chart-add-failed'
     }
 });
 /**
  * React wrapper for <luzmo-interactive-viz-item>
  *
- * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart).
- * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating.
+ * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
+ * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
+ * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.
  */
 export const LuzmoInteractiveVizItem = LuzmoInteractiveVizItemComponent;

package/react/esm/components/item-grid-item-actions-menu.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoItemGridItemActionsMenu as LuzmoItemGridItemActionsMenuClass, ItemGridItemActionEventDetail, ItemGridItemActionHoverEventDetail } from '@luzmo/analytics-components-kit/item-grid-item-actions-menu';
+/**
+ * React wrapper for <luzmo-item-grid-item-actions-menu>
+ *
+ * @event onLuzmoItemGridItemAction - Fired when the user activates an action.
+ * @event onLuzmoItemGridItemActionHover - Fired when the pointer enters an action, for example to preload what it opens.
+ */
+export declare const LuzmoItemGridItemActionsMenu: ReactWebComponent<LuzmoItemGridItemActionsMenuClass, {
+    onLuzmoItemGridItemAction: EventName<CustomEvent<ItemGridItemActionEventDetail>>;
+    onLuzmoItemGridItemActionHover: EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoItemGridItemActionsMenu */
+export type LuzmoItemGridItemActionsMenuElement = LuzmoItemGridItemActionsMenuClass;

package/react/esm/components/item-grid-item-actions-menu.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoItemGridItemActionsMenu as LuzmoItemGridItemActionsMenuClass } from '@luzmo/analytics-components-kit/item-grid-item-actions-menu';
+const LuzmoItemGridItemActionsMenuComponent = createComponent({
+    tagName: 'luzmo-item-grid-item-actions-menu',
+    elementClass: LuzmoItemGridItemActionsMenuClass,
+    react: React,
+    events: {
+        onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action',
+        onLuzmoItemGridItemActionHover: 'luzmo-item-grid-item-action-hover'
+    }
+});
+/**
+ * React wrapper for <luzmo-item-grid-item-actions-menu>
+ *
+ * @event onLuzmoItemGridItemAction - Fired when the user activates an action.
+ * @event onLuzmoItemGridItemActionHover - Fired when the pointer enters an action, for example to preload what it opens.
+ */
+export const LuzmoItemGridItemActionsMenu = LuzmoItemGridItemActionsMenuComponent;

package/react/esm/components/item-grid.component.d.ts

@@ -1,15 +1,17 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemGrid as LuzmoItemGridClass, GridItemActionEventDetail, GridItemStatesChangedEventDetail, GridLifecycleEventDetail } from '@luzmo/analytics-components-kit/item-grid';
+import { LuzmoItemGrid as LuzmoItemGridClass, GridItemActionEventDetail, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, ItemGridItemActionHoverEventDetail } from '@luzmo/analytics-components-kit/item-grid';
 /**
  * React wrapper for <luzmo-item-grid>
  *
  * @event onLuzmoItemGridItemAction - Fired when an item action is performed
+ * @event onLuzmoItemGridItemActionHover - Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item.
  * @event onLuzmoItemGridLayoutChanged - Fired when the grid layout is changed
  * @event onLuzmoItemGridReady - Fired when the grid is ready
  * @event onLuzmoItemGridItemStatesChanged - Fired when item states change (controlled and uncontrolled mode)
  */
 export declare const LuzmoItemGrid: ReactWebComponent<LuzmoItemGridClass, {
     onLuzmoItemGridItemAction: EventName<CustomEvent<GridItemActionEventDetail>>;
+    onLuzmoItemGridItemActionHover: EventName<CustomEvent<ItemGridItemActionHoverEventDetail>>;
     onLuzmoItemGridLayoutChanged: EventName<CustomEvent<GridLifecycleEventDetail>>;
     onLuzmoItemGridReady: EventName<CustomEvent<GridLifecycleEventDetail>>;
     onLuzmoItemGridItemStatesChanged: EventName<CustomEvent<GridItemStatesChangedEventDetail>>;

package/react/esm/components/item-grid.component.js

@@ -7,6 +7,7 @@ const LuzmoItemGridComponent = createComponent({
     react: React,
     events: {
         onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action',
+        onLuzmoItemGridItemActionHover: 'luzmo-item-grid-item-action-hover',
         onLuzmoItemGridLayoutChanged: 'luzmo-item-grid-layout-changed',
         onLuzmoItemGridReady: 'luzmo-item-grid-ready',
         onLuzmoItemGridItemStatesChanged: 'luzmo-item-grid-item-states-changed'
@@ -16,6 +17,7 @@ const LuzmoItemGridComponent = createComponent({
  * React wrapper for <luzmo-item-grid>
  *
  * @event onLuzmoItemGridItemAction - Fired when an item action is performed
+ * @event onLuzmoItemGridItemActionHover - Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item.
  * @event onLuzmoItemGridLayoutChanged - Fired when the grid layout is changed
  * @event onLuzmoItemGridReady - Fired when the grid is ready
  * @event onLuzmoItemGridItemStatesChanged - Fired when item states change (controlled and uncontrolled mode)

package/react/esm/index.d.ts

@@ -1,3 +1,4 @@
+export { LuzmoAddToDashboard, type LuzmoAddToDashboardElement } from './components/add-to-dashboard.component';
 export { LuzmoAiChat, type LuzmoAiChatElement } from './components/ai-chat.component';
 export { LuzmoAiInteractionTextarea, type LuzmoAiInteractionTextareaElement } from './components/ai-interaction-textarea.component';
 export { LuzmoDataField, type LuzmoDataFieldElement } from './components/data-field.component';
@@ -26,6 +27,7 @@ export { LuzmoFormulaEditor, type LuzmoFormulaEditorElement } from './components
 export { LuzmoFormulaField, type LuzmoFormulaFieldElement } from './components/formula-field.component';
 export { LuzmoInteractiveVizItem, type LuzmoInteractiveVizItemElement } from './components/interactive-viz-item.component';
 export { LuzmoItemGrid, type LuzmoItemGridElement } from './components/item-grid.component';
+export { LuzmoItemGridItemActionsMenu, type LuzmoItemGridItemActionsMenuElement } from './components/item-grid-item-actions-menu.component';
 export { LuzmoItemOption, type LuzmoItemOptionElement } from './components/item-option.component';
 export { LuzmoItemOptionActionButtonGroup, type LuzmoItemOptionActionButtonGroupElement } from './components/item-option-action-button-group.component';
 export { LuzmoItemOptionColorPalettePicker, type LuzmoItemOptionColorPalettePickerElement } from './components/item-option-color-palette-picker.component';
@@ -48,7 +50,6 @@ export { LuzmoItemSlotPicker, type LuzmoItemSlotPickerElement } from './componen
 export { LuzmoItemSlotPickerPanel, type LuzmoItemSlotPickerPanelElement } from './components/item-slot-picker-panel.component';
 export { LuzmoSlotMenu, type LuzmoSlotMenuElement } from './components/slot-menu.component';
 export { LuzmoSlotMenuList, type LuzmoSlotMenuListElement } from './components/slot-menu-list.component';
-export { LuzmoVizItemMenu, type LuzmoVizItemMenuElement } from './components/viz-item-menu.component';
-export declare const LUZMO_REACT_COMPONENTS: readonly [any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any];
-export declare const LUZMO_REACT_COMPONENT_NAMES: readonly ["LuzmoAiChat", "LuzmoAiInteractionTextarea", "LuzmoDataField", "LuzmoDataFieldLevel", "LuzmoDataFieldPanel", "LuzmoDataFieldsSelect", "LuzmoDatasetIcon", "LuzmoDatasetSelectorList", "LuzmoDatasetSelectorRow", "LuzmoDisplaySettings", "LuzmoDisplaySettingsBinning", "LuzmoDisplaySettingsDatetime", "LuzmoDisplaySettingsGrandTotals", "LuzmoDisplaySettingsNumeric", "LuzmoDisplaySettingsPeriodOverPeriod", "LuzmoFilterExpressionPicker", "LuzmoFilterItem", "LuzmoFilterParameterPicker", "LuzmoFilterValuePicker", "LuzmoFilterValuePickerDatetime", "LuzmoFilterValuePickerHierarchy", "LuzmoFilterValuePickerNumeric", "LuzmoFilters", "LuzmoFormula", "LuzmoFormulaEditor", "LuzmoFormulaField", "LuzmoInteractiveVizItem", "LuzmoItemGrid", "LuzmoItemOption", "LuzmoItemOptionActionButtonGroup", "LuzmoItemOptionColorPalettePicker", "LuzmoItemOptionColorPicker", "LuzmoItemOptionColorRange", "LuzmoItemOptionGuidelines", "LuzmoItemOptionMultiLanguageField", "LuzmoItemOptionNumberField", "LuzmoItemOptionPanel", "LuzmoItemOptionPicker", "LuzmoItemOptionPositionPicker", "LuzmoItemOptionPositionsNumberField", "LuzmoItemOptionRadioButtonGroup", "LuzmoItemOptionSlider", "LuzmoItemOptionSwitch", "LuzmoItemOptionTextField", "LuzmoItemSlotDrop", "LuzmoItemSlotDropPanel", "LuzmoItemSlotPicker", "LuzmoItemSlotPickerPanel", "LuzmoSlotMenu", "LuzmoSlotMenuList", "LuzmoVizItemMenu"];
+export declare const LUZMO_REACT_COMPONENTS: readonly [any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any];
+export declare const LUZMO_REACT_COMPONENT_NAMES: readonly ["LuzmoAddToDashboard", "LuzmoAiChat", "LuzmoAiInteractionTextarea", "LuzmoDataField", "LuzmoDataFieldLevel", "LuzmoDataFieldPanel", "LuzmoDataFieldsSelect", "LuzmoDatasetIcon", "LuzmoDatasetSelectorList", "LuzmoDatasetSelectorRow", "LuzmoDisplaySettings", "LuzmoDisplaySettingsBinning", "LuzmoDisplaySettingsDatetime", "LuzmoDisplaySettingsGrandTotals", "LuzmoDisplaySettingsNumeric", "LuzmoDisplaySettingsPeriodOverPeriod", "LuzmoFilterExpressionPicker", "LuzmoFilterItem", "LuzmoFilterParameterPicker", "LuzmoFilterValuePicker", "LuzmoFilterValuePickerDatetime", "LuzmoFilterValuePickerHierarchy", "LuzmoFilterValuePickerNumeric", "LuzmoFilters", "LuzmoFormula", "LuzmoFormulaEditor", "LuzmoFormulaField", "LuzmoInteractiveVizItem", "LuzmoItemGrid", "LuzmoItemGridItemActionsMenu", "LuzmoItemOption", "LuzmoItemOptionActionButtonGroup", "LuzmoItemOptionColorPalettePicker", "LuzmoItemOptionColorPicker", "LuzmoItemOptionColorRange", "LuzmoItemOptionGuidelines", "LuzmoItemOptionMultiLanguageField", "LuzmoItemOptionNumberField", "LuzmoItemOptionPanel", "LuzmoItemOptionPicker", "LuzmoItemOptionPositionPicker", "LuzmoItemOptionPositionsNumberField", "LuzmoItemOptionRadioButtonGroup", "LuzmoItemOptionSlider", "LuzmoItemOptionSwitch", "LuzmoItemOptionTextField", "LuzmoItemSlotDrop", "LuzmoItemSlotDropPanel", "LuzmoItemSlotPicker", "LuzmoItemSlotPickerPanel", "LuzmoSlotMenu", "LuzmoSlotMenuList"];
 export type LuzmoReactComponentName = typeof LUZMO_REACT_COMPONENT_NAMES[number];

package/react/esm/index.js

@@ -1,5 +1,6 @@
 // Auto-generated React wrappers for Luzmo Analytics Components Kit
 // Generated using @lit/react
+import { LuzmoAddToDashboard } from './components/add-to-dashboard.component';
 import { LuzmoAiChat } from './components/ai-chat.component';
 import { LuzmoAiInteractionTextarea } from './components/ai-interaction-textarea.component';
 import { LuzmoDataField } from './components/data-field.component';
@@ -28,6 +29,7 @@ import { LuzmoFormulaEditor } from './components/formula-editor.component';
 import { LuzmoFormulaField } from './components/formula-field.component';
 import { LuzmoInteractiveVizItem } from './components/interactive-viz-item.component';
 import { LuzmoItemGrid } from './components/item-grid.component';
+import { LuzmoItemGridItemActionsMenu } from './components/item-grid-item-actions-menu.component';
 import { LuzmoItemOption } from './components/item-option.component';
 import { LuzmoItemOptionActionButtonGroup } from './components/item-option-action-button-group.component';
 import { LuzmoItemOptionColorPalettePicker } from './components/item-option-color-palette-picker.component';
@@ -50,7 +52,7 @@ import { LuzmoItemSlotPicker } from './components/item-slot-picker.component';
 import { LuzmoItemSlotPickerPanel } from './components/item-slot-picker-panel.component';
 import { LuzmoSlotMenu } from './components/slot-menu.component';
 import { LuzmoSlotMenuList } from './components/slot-menu-list.component';
-import { LuzmoVizItemMenu } from './components/viz-item-menu.component';
+export { LuzmoAddToDashboard } from './components/add-to-dashboard.component';
 export { LuzmoAiChat } from './components/ai-chat.component';
 export { LuzmoAiInteractionTextarea } from './components/ai-interaction-textarea.component';
 export { LuzmoDataField } from './components/data-field.component';
@@ -79,6 +81,7 @@ export { LuzmoFormulaEditor } from './components/formula-editor.component';
 export { LuzmoFormulaField } from './components/formula-field.component';
 export { LuzmoInteractiveVizItem } from './components/interactive-viz-item.component';
 export { LuzmoItemGrid } from './components/item-grid.component';
+export { LuzmoItemGridItemActionsMenu } from './components/item-grid-item-actions-menu.component';
 export { LuzmoItemOption } from './components/item-option.component';
 export { LuzmoItemOptionActionButtonGroup } from './components/item-option-action-button-group.component';
 export { LuzmoItemOptionColorPalettePicker } from './components/item-option-color-palette-picker.component';
@@ -101,9 +104,9 @@ export { LuzmoItemSlotPicker } from './components/item-slot-picker.component';
 export { LuzmoItemSlotPickerPanel } from './components/item-slot-picker-panel.component';
 export { LuzmoSlotMenu } from './components/slot-menu.component';
 export { LuzmoSlotMenuList } from './components/slot-menu-list.component';
-export { LuzmoVizItemMenu } from './components/viz-item-menu.component';
 // Array of all React component classes for easy imports
 export const LUZMO_REACT_COMPONENTS = [
+    LuzmoAddToDashboard,
     LuzmoAiChat,
     LuzmoAiInteractionTextarea,
     LuzmoDataField,
@@ -132,6 +135,7 @@ export const LUZMO_REACT_COMPONENTS = [
     LuzmoFormulaField,
     LuzmoInteractiveVizItem,
     LuzmoItemGrid,
+    LuzmoItemGridItemActionsMenu,
     LuzmoItemOption,
     LuzmoItemOptionActionButtonGroup,
     LuzmoItemOptionColorPalettePicker,
@@ -153,11 +157,11 @@ export const LUZMO_REACT_COMPONENTS = [
     LuzmoItemSlotPicker,
     LuzmoItemSlotPickerPanel,
     LuzmoSlotMenu,
-    LuzmoSlotMenuList,
-    LuzmoVizItemMenu
+    LuzmoSlotMenuList
 ];
 // List of all available React component names
 export const LUZMO_REACT_COMPONENT_NAMES = [
+    'LuzmoAddToDashboard',
     'LuzmoAiChat',
     'LuzmoAiInteractionTextarea',
     'LuzmoDataField',
@@ -186,6 +190,7 @@ export const LUZMO_REACT_COMPONENT_NAMES = [
     'LuzmoFormulaField',
     'LuzmoInteractiveVizItem',
     'LuzmoItemGrid',
+    'LuzmoItemGridItemActionsMenu',
     'LuzmoItemOption',
     'LuzmoItemOptionActionButtonGroup',
     'LuzmoItemOptionColorPalettePicker',
@@ -207,6 +212,5 @@ export const LUZMO_REACT_COMPONENT_NAMES = [
     'LuzmoItemSlotPicker',
     'LuzmoItemSlotPickerPanel',
     'LuzmoSlotMenu',
-    'LuzmoSlotMenuList',
-    'LuzmoVizItemMenu'
+    'LuzmoSlotMenuList'
 ];

package/react/index.ts

@@ -1,6 +1,7 @@
 // Auto-generated React wrappers for Luzmo Analytics Components Kit
 // Generated using @lit/react
 
+import { LuzmoAddToDashboard } from './components/add-to-dashboard.component';
 import { LuzmoAiChat } from './components/ai-chat.component';
 import { LuzmoAiInteractionTextarea } from './components/ai-interaction-textarea.component';
 import { LuzmoDataField } from './components/data-field.component';
@@ -29,6 +30,7 @@ import { LuzmoFormulaEditor } from './components/formula-editor.component';
 import { LuzmoFormulaField } from './components/formula-field.component';
 import { LuzmoInteractiveVizItem } from './components/interactive-viz-item.component';
 import { LuzmoItemGrid } from './components/item-grid.component';
+import { LuzmoItemGridItemActionsMenu } from './components/item-grid-item-actions-menu.component';
 import { LuzmoItemOption } from './components/item-option.component';
 import { LuzmoItemOptionActionButtonGroup } from './components/item-option-action-button-group.component';
 import { LuzmoItemOptionColorPalettePicker } from './components/item-option-color-palette-picker.component';
@@ -51,8 +53,8 @@ import { LuzmoItemSlotPicker } from './components/item-slot-picker.component';
 import { LuzmoItemSlotPickerPanel } from './components/item-slot-picker-panel.component';
 import { LuzmoSlotMenu } from './components/slot-menu.component';
 import { LuzmoSlotMenuList } from './components/slot-menu-list.component';
-import { LuzmoVizItemMenu } from './components/viz-item-menu.component';
 
+export { LuzmoAddToDashboard, type LuzmoAddToDashboardElement } from './components/add-to-dashboard.component';
 export { LuzmoAiChat, type LuzmoAiChatElement } from './components/ai-chat.component';
 export { LuzmoAiInteractionTextarea, type LuzmoAiInteractionTextareaElement } from './components/ai-interaction-textarea.component';
 export { LuzmoDataField, type LuzmoDataFieldElement } from './components/data-field.component';
@@ -81,6 +83,7 @@ export { LuzmoFormulaEditor, type LuzmoFormulaEditorElement } from './components
 export { LuzmoFormulaField, type LuzmoFormulaFieldElement } from './components/formula-field.component';
 export { LuzmoInteractiveVizItem, type LuzmoInteractiveVizItemElement } from './components/interactive-viz-item.component';
 export { LuzmoItemGrid, type LuzmoItemGridElement } from './components/item-grid.component';
+export { LuzmoItemGridItemActionsMenu, type LuzmoItemGridItemActionsMenuElement } from './components/item-grid-item-actions-menu.component';
 export { LuzmoItemOption, type LuzmoItemOptionElement } from './components/item-option.component';
 export { LuzmoItemOptionActionButtonGroup, type LuzmoItemOptionActionButtonGroupElement } from './components/item-option-action-button-group.component';
 export { LuzmoItemOptionColorPalettePicker, type LuzmoItemOptionColorPalettePickerElement } from './components/item-option-color-palette-picker.component';
@@ -103,10 +106,10 @@ export { LuzmoItemSlotPicker, type LuzmoItemSlotPickerElement } from './componen
 export { LuzmoItemSlotPickerPanel, type LuzmoItemSlotPickerPanelElement } from './components/item-slot-picker-panel.component';
 export { LuzmoSlotMenu, type LuzmoSlotMenuElement } from './components/slot-menu.component';
 export { LuzmoSlotMenuList, type LuzmoSlotMenuListElement } from './components/slot-menu-list.component';
-export { LuzmoVizItemMenu, type LuzmoVizItemMenuElement } from './components/viz-item-menu.component';
 
 // Array of all React component classes for easy imports
 export const LUZMO_REACT_COMPONENTS = [
+  LuzmoAddToDashboard,
   LuzmoAiChat,
   LuzmoAiInteractionTextarea,
   LuzmoDataField,
@@ -135,6 +138,7 @@ export const LUZMO_REACT_COMPONENTS = [
   LuzmoFormulaField,
   LuzmoInteractiveVizItem,
   LuzmoItemGrid,
+  LuzmoItemGridItemActionsMenu,
   LuzmoItemOption,
   LuzmoItemOptionActionButtonGroup,
   LuzmoItemOptionColorPalettePicker,
@@ -156,12 +160,12 @@ export const LUZMO_REACT_COMPONENTS = [
   LuzmoItemSlotPicker,
   LuzmoItemSlotPickerPanel,
   LuzmoSlotMenu,
-  LuzmoSlotMenuList,
-  LuzmoVizItemMenu
+  LuzmoSlotMenuList
 ] as const;
 
 // List of all available React component names
 export const LUZMO_REACT_COMPONENT_NAMES = [
+  'LuzmoAddToDashboard',
   'LuzmoAiChat',
   'LuzmoAiInteractionTextarea',
   'LuzmoDataField',
@@ -190,6 +194,7 @@ export const LUZMO_REACT_COMPONENT_NAMES = [
   'LuzmoFormulaField',
   'LuzmoInteractiveVizItem',
   'LuzmoItemGrid',
+  'LuzmoItemGridItemActionsMenu',
   'LuzmoItemOption',
   'LuzmoItemOptionActionButtonGroup',
   'LuzmoItemOptionColorPalettePicker',
@@ -211,8 +216,7 @@ export const LUZMO_REACT_COMPONENT_NAMES = [
   'LuzmoItemSlotPicker',
   'LuzmoItemSlotPickerPanel',
   'LuzmoSlotMenu',
-  'LuzmoSlotMenuList',
-  'LuzmoVizItemMenu'
+  'LuzmoSlotMenuList'
 ] as const;
 
 export type LuzmoReactComponentName = typeof LUZMO_REACT_COMPONENT_NAMES[number];