@luzmo/analytics-components-kit 1.0.4 → 1.0.5-beta.1

package/index.d.ts

@@ -1,9 +1,23 @@
+export * from './components/ai-chat';
+export * from './components/interactive-viz-item';
+export * from './components/ai-interaction-textarea';
+export * from './components/dataset-icon';
+export * from './components/dataset-selector-list';
+export * from './components/dataset-selector-row';
+export * from './components/display-settings';
+export * from './components/display-settings-binning';
+export * from './components/display-settings-datetime';
+export * from './components/display-settings-grand-totals';
+export * from './components/display-settings-numeric';
+export * from './components/display-settings-period-over-period';
 export * from './components/data-field';
+export * from './components/data-field-level';
 export * from './components/data-field-panel';
 export * from './components/item-slot-drop';
 export * from './components/item-option-panel';
 export * from './components/filters';
 export * from './components/formula';
+export * from './components/formula-field';
 export * from './components/formula-editor';
 export * from './components/item-option';
 export * from './components/item-option-action-button-group';
@@ -19,10 +33,20 @@ export * from './components/item-option-radio-button-group';
 export * from './components/item-option-slider';
 export * from './components/item-option-switch';
 export * from './components/item-option-text-field';
+export * from './components/data-fields-select';
+export * from './components/filter-expression-picker';
+export * from './components/filter-item';
+export * from './components/filter-value-picker';
+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-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.4",
+  "version": "1.0.5-beta.1",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -11,16 +11,116 @@
       "import": "./components/index.js",
       "require": "./components/index.cjs"
     },
+    "./ai-chat": {
+      "types": "./components/ai-chat/index.d.ts",
+      "import": "./components/ai-chat/index.js",
+      "require": "./components/ai-chat/index.cjs"
+    },
+    "./ai-interaction-textarea": {
+      "types": "./components/ai-interaction-textarea/index.d.ts",
+      "import": "./components/ai-interaction-textarea/index.js",
+      "require": "./components/ai-interaction-textarea/index.cjs"
+    },
     "./data-field": {
       "types": "./components/data-field/index.d.ts",
       "import": "./components/data-field/index.js",
       "require": "./components/data-field/index.cjs"
     },
+    "./data-field-level": {
+      "types": "./components/data-field-level/index.d.ts",
+      "import": "./components/data-field-level/index.js",
+      "require": "./components/data-field-level/index.cjs"
+    },
     "./data-field-panel": {
       "types": "./components/data-field-panel/index.d.ts",
       "import": "./components/data-field-panel/index.js",
       "require": "./components/data-field-panel/index.cjs"
     },
+    "./data-fields-select": {
+      "types": "./components/data-fields-select/index.d.ts",
+      "import": "./components/data-fields-select/index.js",
+      "require": "./components/data-fields-select/index.cjs"
+    },
+    "./dataset-icon": {
+      "types": "./components/dataset-icon/index.d.ts",
+      "import": "./components/dataset-icon/index.js",
+      "require": "./components/dataset-icon/index.cjs"
+    },
+    "./dataset-selector-list": {
+      "types": "./components/dataset-selector-list/index.d.ts",
+      "import": "./components/dataset-selector-list/index.js",
+      "require": "./components/dataset-selector-list/index.cjs"
+    },
+    "./dataset-selector-row": {
+      "types": "./components/dataset-selector-row/index.d.ts",
+      "import": "./components/dataset-selector-row/index.js",
+      "require": "./components/dataset-selector-row/index.cjs"
+    },
+    "./display-settings": {
+      "types": "./components/display-settings/index.d.ts",
+      "import": "./components/display-settings/index.js",
+      "require": "./components/display-settings/index.cjs"
+    },
+    "./display-settings-binning": {
+      "types": "./components/display-settings-binning/index.d.ts",
+      "import": "./components/display-settings-binning/index.js",
+      "require": "./components/display-settings-binning/index.cjs"
+    },
+    "./display-settings-datetime": {
+      "types": "./components/display-settings-datetime/index.d.ts",
+      "import": "./components/display-settings-datetime/index.js",
+      "require": "./components/display-settings-datetime/index.cjs"
+    },
+    "./display-settings-grand-totals": {
+      "types": "./components/display-settings-grand-totals/index.d.ts",
+      "import": "./components/display-settings-grand-totals/index.js",
+      "require": "./components/display-settings-grand-totals/index.cjs"
+    },
+    "./display-settings-numeric": {
+      "types": "./components/display-settings-numeric/index.d.ts",
+      "import": "./components/display-settings-numeric/index.js",
+      "require": "./components/display-settings-numeric/index.cjs"
+    },
+    "./display-settings-period-over-period": {
+      "types": "./components/display-settings-period-over-period/index.d.ts",
+      "import": "./components/display-settings-period-over-period/index.js",
+      "require": "./components/display-settings-period-over-period/index.cjs"
+    },
+    "./filter-expression-picker": {
+      "types": "./components/filter-expression-picker/index.d.ts",
+      "import": "./components/filter-expression-picker/index.js",
+      "require": "./components/filter-expression-picker/index.cjs"
+    },
+    "./filter-item": {
+      "types": "./components/filter-item/index.d.ts",
+      "import": "./components/filter-item/index.js",
+      "require": "./components/filter-item/index.cjs"
+    },
+    "./filter-parameter-picker": {
+      "types": "./components/filter-parameter-picker/index.d.ts",
+      "import": "./components/filter-parameter-picker/index.js",
+      "require": "./components/filter-parameter-picker/index.cjs"
+    },
+    "./filter-value-picker": {
+      "types": "./components/filter-value-picker/index.d.ts",
+      "import": "./components/filter-value-picker/index.js",
+      "require": "./components/filter-value-picker/index.cjs"
+    },
+    "./filter-value-picker-datetime": {
+      "types": "./components/filter-value-picker-datetime/index.d.ts",
+      "import": "./components/filter-value-picker-datetime/index.js",
+      "require": "./components/filter-value-picker-datetime/index.cjs"
+    },
+    "./filter-value-picker-hierarchy": {
+      "types": "./components/filter-value-picker-hierarchy/index.d.ts",
+      "import": "./components/filter-value-picker-hierarchy/index.js",
+      "require": "./components/filter-value-picker-hierarchy/index.cjs"
+    },
+    "./filter-value-picker-numeric": {
+      "types": "./components/filter-value-picker-numeric/index.d.ts",
+      "import": "./components/filter-value-picker-numeric/index.js",
+      "require": "./components/filter-value-picker-numeric/index.cjs"
+    },
     "./filters": {
       "types": "./components/filters/index.d.ts",
       "import": "./components/filters/index.js",
@@ -36,6 +136,16 @@
       "import": "./components/formula-editor/index.js",
       "require": "./components/formula-editor/index.cjs"
     },
+    "./formula-field": {
+      "types": "./components/formula-field/index.d.ts",
+      "import": "./components/formula-field/index.js",
+      "require": "./components/formula-field/index.cjs"
+    },
+    "./interactive-viz-item": {
+      "types": "./components/interactive-viz-item/index.d.ts",
+      "import": "./components/interactive-viz-item/index.js",
+      "require": "./components/interactive-viz-item/index.cjs"
+    },
     "./item-grid": {
       "types": "./components/item-grid/index.d.ts",
       "import": "./components/item-grid/index.js",
@@ -136,6 +246,21 @@
       "import": "./components/item-slot-picker-panel/index.js",
       "require": "./components/item-slot-picker-panel/index.cjs"
     },
+    "./slot-menu": {
+      "types": "./components/slot-menu/index.d.ts",
+      "import": "./components/slot-menu/index.js",
+      "require": "./components/slot-menu/index.cjs"
+    },
+    "./slot-menu-list": {
+      "types": "./components/slot-menu-list/index.d.ts",
+      "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",

package/react/README.md

@@ -15,11 +15,11 @@ npm install @luzmo/analytics-components-kit
 ## Usage
 
 ```tsx
-import { LuzmoDataField } from '@luzmo/analytics-components-kit/react';
+import { LuzmoAiChat } from '@luzmo/analytics-components-kit/react';
 
 function App() {
   return (
-    <LuzmoDataField
+    <LuzmoAiChat
       data={{ /* your data */ }}
       onDataItemDropped={(e) => console.log('Dropped:', e.detail)}
     />
@@ -29,11 +29,33 @@ function App() {
 
 ## Available Components
 
+- `LuzmoAiChat` → `<luzmo-ai-chat>`
+- `LuzmoAiInteractionTextarea` → `<luzmo-ai-interaction-textarea>`
 - `LuzmoDataField` → `<luzmo-data-field>`
+- `LuzmoDataFieldLevel` → `<luzmo-data-field-level>`
 - `LuzmoDataFieldPanel` → `<luzmo-data-field-panel>`
+- `LuzmoDataFieldsSelect` → `<luzmo-data-fields-select>`
+- `LuzmoDatasetIcon` → `<luzmo-dataset-icon>`
+- `LuzmoDatasetSelectorList` → `<luzmo-dataset-selector-list>`
+- `LuzmoDatasetSelectorRow` → `<luzmo-dataset-selector-row>`
+- `LuzmoDisplaySettings` → `<luzmo-display-settings>`
+- `LuzmoDisplaySettingsBinning` → `<luzmo-display-settings-binning>`
+- `LuzmoDisplaySettingsDatetime` → `<luzmo-display-settings-datetime>`
+- `LuzmoDisplaySettingsGrandTotals` → `<luzmo-display-settings-grand-totals>`
+- `LuzmoDisplaySettingsNumeric` → `<luzmo-display-settings-numeric>`
+- `LuzmoDisplaySettingsPeriodOverPeriod` → `<luzmo-display-settings-period-over-period>`
+- `LuzmoFilterExpressionPicker` → `<luzmo-filter-expression-picker>`
+- `LuzmoFilterItem` → `<luzmo-filter-item>`
+- `LuzmoFilterParameterPicker` → `<luzmo-filter-parameter-picker>`
+- `LuzmoFilterValuePicker` → `<luzmo-filter-value-picker>`
+- `LuzmoFilterValuePickerDatetime` → `<luzmo-filter-value-picker-datetime>`
+- `LuzmoFilterValuePickerHierarchy` → `<luzmo-filter-value-picker-hierarchy>`
+- `LuzmoFilterValuePickerNumeric` → `<luzmo-filter-value-picker-numeric>`
 - `LuzmoFilters` → `<luzmo-filters>`
 - `LuzmoFormula` → `<luzmo-formula>`
 - `LuzmoFormulaEditor` → `<luzmo-formula-editor>`
+- `LuzmoFormulaField` → `<luzmo-formula-field>`
+- `LuzmoInteractiveVizItem` → `<luzmo-interactive-viz-item>`
 - `LuzmoItemGrid` → `<luzmo-item-grid>`
 - `LuzmoItemOption` → `<luzmo-item-option>`
 - `LuzmoItemOptionActionButtonGroup` → `<luzmo-item-option-action-button-group>`
@@ -54,6 +76,9 @@ function App() {
 - `LuzmoItemSlotDropPanel` → `<luzmo-item-slot-drop-panel>`
 - `LuzmoItemSlotPicker` → `<luzmo-item-slot-picker>`
 - `LuzmoItemSlotPickerPanel` → `<luzmo-item-slot-picker-panel>`
+- `LuzmoSlotMenu` → `<luzmo-slot-menu>`
+- `LuzmoSlotMenuList` → `<luzmo-slot-menu-list>`
+- `LuzmoVizItemMenu` → `<luzmo-viz-item-menu>`
 
 ## Event Handling
 
@@ -68,14 +93,14 @@ All component types are available:
 
 ```tsx
 import { 
-  LuzmoDataField, 
-  type LuzmoDataFieldElement 
+  LuzmoAiChat, 
+  type LuzmoAiChatElement 
 } from '@luzmo/analytics-components-kit/react';
 import { useRef } from 'react';
 
 function App() {
-  const ref = useRef<LuzmoDataFieldElement>(null);
+  const ref = useRef<LuzmoAiChatElement>(null);
   
-  return <LuzmoDataField ref={ref} />;
+  return <LuzmoAiChat ref={ref} />;
 }
 ```

package/react/components/ai-chat/empty-state/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/ai-chat/empty-state/types.ts

@@ -0,0 +1,16 @@
+import type { Dataset } from '../../../types';
+
+export type AiChatEmptyStateSuggestion = {
+  /** Visible label on the suggestion chip. */
+  label: string;
+  /** Prompt text inserted or submitted when selected; defaults to `label`. */
+  prompt?: string;
+  /** Datasets applied to the chat input when this suggestion is selected. */
+  selectedDatasets?: Dataset[];
+};
+
+export type AiChatEmptyStateSuggestionSelectedDetail = {
+  label: string;
+  prompt: string;
+  selectedDatasets?: Dataset[];
+};

package/react/components/ai-chat/stream/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/ai-chat/stream/types.ts

@@ -0,0 +1,60 @@
+import type { ProgressTreeNode } from '@luzmo/lucero/progress-steps';
+import type { ChatMessage } from '../../../types';
+import type { AiChatCompleteEvent, AiChatStepEvent } from '../ai-chat-events';
+import type { AiPromptAgent, DashboardStatePayload } from '../ai-prompt-types';
+
+export interface StreamHandlerCallbacks {
+  onConversationIdChange: (conversationId: string) => void;
+  onProgress: (progress: ProgressTreeNode) => void;
+  onProgressCollapsed: (collapsed: boolean) => void;
+  onMessageUpdate: (message: ChatMessage) => void;
+  getConversationId: () => string | null;
+  /** Fired for every incremental, assembled stream event. */
+  onStep: (event: AiChatStepEvent) => void;
+  /** Fired exactly once with the authoritative final result (or error). */
+  onComplete: (event: AiChatCompleteEvent) => void;
+}
+
+/** Per-asset accumulation buffer for the ASSET_START/DELTA/END channel. */
+export interface StreamAssetBuffer {
+  assetType: string;
+  snapshot: Record<string, unknown>;
+}
+
+export interface StreamHandlerState {
+  progressCollapsed: boolean;
+  /** Accumulated assistant text streamed so far. */
+  accumulatedText: string;
+  /** Latest classifier decision routed from the progress root node. */
+  decision: 'create' | 'edit' | 'question' | null;
+  /** In-flight asset buffers keyed by asset id (or asset type as fallback). */
+  assets: Record<string, StreamAssetBuffer>;
+  /** Authoritative dashboard snapshot (dashboard agent). */
+  dashboardSnapshot: DashboardStatePayload | null;
+  /** Dashboard name keyed by locale (dashboard agent). */
+  dashboardName: Record<string, string> | undefined;
+  /** Authoritative chart snapshot (item agent). */
+  chartSnapshot: Record<string, unknown> | null;
+  /** Pending clarification question, when the agent interrupted. */
+  interruptQuestion: string | null;
+  /** Guards against firing {@link StreamHandlerCallbacks.onComplete} more than once. */
+  completed: boolean;
+}
+
+export interface StreamHandlerContext {
+  aiMessage: ChatMessage;
+  callbacks: StreamHandlerCallbacks;
+  state: StreamHandlerState;
+}
+
+/**
+ * Per-agent stream definition. The shared processor owns the envelope/emit logic;
+ * the agent only declares which final `asset_type`s map to its authoritative result.
+ */
+export interface AgentStreamDefinition {
+  agent: AiPromptAgent;
+  /** Final asset type whose payload becomes {@link AiChatCompleteEvent.chart}. */
+  chartAssetType?: string;
+  /** Final asset type whose payload becomes {@link AiChatCompleteEvent.dashboard}. */
+  dashboardAssetType?: string;
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent, AssistantMessageActionEventDetail } from '@luzmo/analytics-components-kit/ai-chat';
+
+const LuzmoAiChatComponent = createComponent({
+  tagName: 'luzmo-ai-chat',
+  elementClass: LuzmoAiChatClass,
+  react: React,
+  events: {
+    onLuzmoMessageSent: 'luzmo-message-sent' as EventName<CustomEvent<AiChatMessageSentEventDetail>>,
+    onLuzmoDatasetsChanged: 'luzmo-datasets-changed' as EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>,
+    onLuzmoStep: 'luzmo-step' as EventName<CustomEvent<AiChatStepEvent>>,
+    onLuzmoComplete: 'luzmo-complete' as EventName<CustomEvent<AiChatCompleteEvent>>,
+    onLuzmoStop: 'luzmo-stop' as EventName<CustomEvent<void>>,
+    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>,
+    onLuzmoAssistantMessageAction: 'luzmo-assistant-message-action' as EventName<CustomEvent<AssistantMessageActionEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-ai-chat>
+ *
+ * @event onLuzmoMessageSent - Fired when a user sends a message
+ * @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, 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) 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 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)
+ */
+export const LuzmoAiChat = LuzmoAiChatComponent as ReactWebComponent<
+  LuzmoAiChatClass,
+  {
+    onLuzmoMessageSent: EventName<CustomEvent<AiChatMessageSentEventDetail>>;
+    onLuzmoDatasetsChanged: EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>;
+    onLuzmoStep: EventName<CustomEvent<AiChatStepEvent>>;
+    onLuzmoComplete: EventName<CustomEvent<AiChatCompleteEvent>>;
+    onLuzmoStop: EventName<CustomEvent<void>>;
+    onLuzmoConversationIdChanged: EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>;
+    onLuzmoAssistantMessageAction: EventName<CustomEvent<AssistantMessageActionEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoAiChat */
+export type LuzmoAiChatElement = LuzmoAiChatClass;

package/react/components/ai-interaction-textarea/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/ai-interaction-textarea/types.ts

@@ -0,0 +1,6 @@
+import type { Dataset } from '../../types/dataset.types';
+
+export interface PromptSubmittedEventDetail {
+  prompt: string;
+  selectedDatasets: Dataset[];
+}

package/react/components/ai-interaction-textarea.component.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+
+const LuzmoAiInteractionTextareaComponent = createComponent({
+  tagName: 'luzmo-ai-interaction-textarea',
+  elementClass: LuzmoAiInteractionTextareaClass,
+  react: React,
+  events: {
+    onPromptSubmitted: 'prompt-submitted' as EventName<CustomEvent<PromptSubmittedEventDetail>>,
+    onPromptStopped: 'prompt-stopped' as EventName<CustomEvent<void>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-ai-interaction-textarea>
+ *
+ * @event onPromptSubmitted - Fired when a prompt is submitted with selected datasets
+ * @event onPromptStopped - Fired when a running prompt is stopped
+ */
+export const LuzmoAiInteractionTextarea = LuzmoAiInteractionTextareaComponent as ReactWebComponent<
+  LuzmoAiInteractionTextareaClass,
+  {
+    onPromptSubmitted: EventName<CustomEvent<PromptSubmittedEventDetail>>;
+    onPromptStopped: EventName<CustomEvent<void>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoAiInteractionTextarea */
+export type LuzmoAiInteractionTextareaElement = LuzmoAiInteractionTextareaClass;

package/react/components/data-field-level.component.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
+
+const LuzmoDataFieldLevelComponent = createComponent({
+  tagName: 'luzmo-data-field-level',
+  elementClass: LuzmoDataFieldLevelClass,
+  react: React,
+  events: {
+    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<DataFieldDroppedEventDetail>>,
+    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<DataFieldDragStartedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-data-field-level>
+ *
+ * @event onLuzmoDataFieldDropped - Announces that the data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
+ */
+export const LuzmoDataFieldLevel = LuzmoDataFieldLevelComponent as ReactWebComponent<
+  LuzmoDataFieldLevelClass,
+  {
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDataFieldLevel */
+export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelClass;

package/react/components/data-fields-select/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/data-fields-select/types.ts

@@ -0,0 +1,5 @@
+import type { DatasetDataField } from '../../types/dataset-data-field.types';
+
+export interface DataFieldsSelectedEventDetail {
+  dataFields: DatasetDataField[];
+}

package/react/components/data-fields-select.component.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
+
+const LuzmoDataFieldsSelectComponent = createComponent({
+  tagName: 'luzmo-data-fields-select',
+  elementClass: LuzmoDataFieldsSelectClass,
+  react: React,
+  events: {
+    onLuzmoDataFieldsSelected: 'luzmo-data-fields-selected' as EventName<CustomEvent<DataFieldsSelectedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-data-fields-select>
+ *
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
+ */
+export const LuzmoDataFieldsSelect = LuzmoDataFieldsSelectComponent as ReactWebComponent<
+  LuzmoDataFieldsSelectClass,
+  {
+    onLuzmoDataFieldsSelected: EventName<CustomEvent<DataFieldsSelectedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDataFieldsSelect */
+export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectClass;

package/react/components/dataset-icon/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/dataset-icon/types.ts

@@ -0,0 +1,8 @@
+export interface DatasetIcon {
+  subtype: string;
+  account?: {
+    plugin?: {
+      thumbnails?: { url: string; size: string }[];
+    };
+  };
+}

package/react/components/dataset-icon.component.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createComponent, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetIcon as LuzmoDatasetIconClass } from '@luzmo/analytics-components-kit/dataset-icon';
+
+const LuzmoDatasetIconComponent = createComponent({
+  tagName: 'luzmo-dataset-icon',
+  elementClass: LuzmoDatasetIconClass,
+  react: React,
+  events: {
+
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-icon>
+ */
+export const LuzmoDatasetIcon = LuzmoDatasetIconComponent as ReactWebComponent<
+  LuzmoDatasetIconClass
+>;
+
+/** The underlying custom element type for LuzmoDatasetIcon */
+export type LuzmoDatasetIconElement = LuzmoDatasetIconClass;

package/react/components/dataset-selector-list.component.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
+
+const LuzmoDatasetSelectorListComponent = createComponent({
+  tagName: 'luzmo-dataset-selector-list',
+  elementClass: LuzmoDatasetSelectorListClass,
+  react: React,
+  events: {
+    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent<Dataset>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-selector-list>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ */
+export const LuzmoDatasetSelectorList = LuzmoDatasetSelectorListComponent as ReactWebComponent<
+  LuzmoDatasetSelectorListClass,
+  {
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDatasetSelectorList */
+export type LuzmoDatasetSelectorListElement = LuzmoDatasetSelectorListClass;

package/react/components/dataset-selector-row.component.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
+
+const LuzmoDatasetSelectorRowComponent = createComponent({
+  tagName: 'luzmo-dataset-selector-row',
+  elementClass: LuzmoDatasetSelectorRowClass,
+  react: React,
+  events: {
+    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent<Dataset>>,
+    onDatasetRemoved: 'dataset-removed' as EventName<CustomEvent<Dataset>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-selector-row>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ * @event onDatasetRemoved - Fired when a dataset is removed
+ */
+export const LuzmoDatasetSelectorRow = LuzmoDatasetSelectorRowComponent as ReactWebComponent<
+  LuzmoDatasetSelectorRowClass,
+  {
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+    onDatasetRemoved: EventName<CustomEvent<Dataset>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDatasetSelectorRow */
+export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowClass;

package/react/components/display-settings/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/display-settings/types.ts

@@ -0,0 +1,12 @@
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+export interface DisplaySettingsSlotContentChangedEventDetail {
+  slotContent: GenericSlotContent;
+}
+
+export type DisplaySettingsRemoveSlotContentEventDetail = DisplaySettingsSlotContentChangedEventDetail;
+
+export interface InfoVisibilityChangedEventDetail {
+  isVisible: boolean;
+  slotContent: GenericSlotContent;
+}