@databricks/appkit-ui 0.11.1 → 0.12.0

package/CLAUDE.md

@@ -81,6 +81,10 @@ The CLI will display the documentation content directly in the terminal.
 - [PieChart](./docs/docs/api/appkit-ui/data/PieChart.md): Pie Chart component for proportional data visualization.
 - [RadarChart](./docs/docs/api/appkit-ui/data/RadarChart.md): Radar Chart component for multi-dimensional data comparison.
 - [ScatterChart](./docs/docs/api/appkit-ui/data/ScatterChart.md): Scatter Chart component for correlation and distribution visualization.
+- [GenieChat](./docs/docs/api/appkit-ui/genie/GenieChat.md): Full-featured chat interface for a single Databricks AI/BI Genie space. Handles message streaming, conversation history, and auto-reconnection via SSE.
+- [GenieChatInput](./docs/docs/api/appkit-ui/genie/GenieChatInput.md): Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline).
+- [GenieChatMessage](./docs/docs/api/appkit-ui/genie/GenieChatMessage.md): Renders a single Genie message bubble with optional expandable SQL query attachments.
+- [GenieChatMessageList](./docs/docs/api/appkit-ui/genie/GenieChatMessageList.md): Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator.
 - [Styling](./docs/docs/api/appkit-ui/styling.md): This guide covers how to style AppKit UI components using CSS variables and theming.
 - [Accordion](./docs/docs/api/appkit-ui/ui/Accordion.md): Collapsible content sections organized in a vertical stack
 - [Alert](./docs/docs/api/appkit-ui/ui/Alert.md): Displays important information with optional icon and multiple variants

package/NOTICE.md

@@ -66,6 +66,7 @@ This Software contains code from the following open source projects:
 | [express](https://www.npmjs.com/package/express) | 4.22.0 | MIT | http://expressjs.com/ |
 | [input-otp](https://www.npmjs.com/package/input-otp) | 1.4.2 | MIT | https://input-otp.rodz.dev/ |
 | [lucide-react](https://www.npmjs.com/package/lucide-react) | 0.554.0 | ISC | https://lucide.dev |
+| [marked](https://www.npmjs.com/package/marked) | 16.4.2, 17.0.3 | MIT | https://marked.js.org |
 | [next-themes](https://www.npmjs.com/package/next-themes) | 0.4.6 | MIT | https://github.com/pacocoursey/next-themes#readme |
 | [obug](https://www.npmjs.com/package/obug) | 2.1.1 | MIT | https://github.com/sxzz/obug#readme |
 | [pg](https://www.npmjs.com/package/pg) | 8.18.0 | MIT | https://github.com/brianc/node-postgres |

package/dist/react/charts/area/index.d.ts

@@ -1,6 +1,6 @@
 import { AreaChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime275 from "react/jsx-runtime";
 
 //#region src/react/charts/area/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const AreaChart: {
-  (props: AreaChartProps): react_jsx_runtime0.JSX.Element;
+  (props: AreaChartProps): react_jsx_runtime275.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/bar/index.d.ts

@@ -1,6 +1,6 @@
 import { BarChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime276 from "react/jsx-runtime";
 
 //#region src/react/charts/bar/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime1 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const BarChart: {
-  (props: BarChartProps): react_jsx_runtime1.JSX.Element;
+  (props: BarChartProps): react_jsx_runtime276.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/base.d.ts

@@ -1,5 +1,5 @@
 import { ChartColorPalette, ChartData, ChartType, Orientation } from "./types.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime283 from "react/jsx-runtime";
 
 //#region src/react/charts/base.d.ts
 interface BaseChartProps {
@@ -83,7 +83,7 @@ declare function BaseChart({
   max,
   options: customOptions,
   className
-}: BaseChartProps): react_jsx_runtime8.JSX.Element;
+}: BaseChartProps): react_jsx_runtime283.JSX.Element;
 //#endregion
 export { BaseChart, BaseChartProps };
 //# sourceMappingURL=base.d.ts.map

package/dist/react/charts/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":[],"mappings":";;;;UA0CiB,cAAA;;QAET;EAFS;EAAc,SAAA,EAIlB,SAJkB;;MAIlB,CAAA,EAAA,MAAA;;MAmBI,CAAA,EAAA,MAAA,GAAA,MAAA,EAAA;;EA0BC,WAAA,CAAA,EAvCF,WAuCE;EAaF;EAAS,MAAA,CAAA,EAAA,MAAA;;OAEvB,CAAA,EAAA,MAAA;;YAEA,CAAA,EAAA,OAAA;;;;;;;cAOA,CAAA,EAlDe,iBAkDf;;QAEA,CAAA,EAAA,MAAA,EAAA;;YAEA,CAAA,EAAA,OAAA;;QAEA,CAAA,EAAA,OAAA;;SAEA,CAAA,EAAA,OAAA;;YAEA,CAAA,EAAA,MAAA;;UAEA,CAAA,EAAA,OAAA;;aACe,CAAA,EAAA,MAAA;EAAA;;;;;;;;;;;YArCL;;;;;;;;iBAaI,SAAA;;;;;;;;;;UAUN;;;;;;;;;;;;WAYC;;GAER,iBAAc,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":[],"mappings":";;;;UA0CiB,cAAA;;QAET;EAFS;EAAc,SAAA,EAIlB,SAJkB;;MAIlB,CAAA,EAAA,MAAA;;MAmBI,CAAA,EAAA,MAAA,GAAA,MAAA,EAAA;;EA0BC,WAAA,CAAA,EAvCF,WAuCE;EAaF;EAAS,MAAA,CAAA,EAAA,MAAA;;OAEvB,CAAA,EAAA,MAAA;;YAEA,CAAA,EAAA,OAAA;;;;;;;cAOA,CAAA,EAlDe,iBAkDf;;QAEA,CAAA,EAAA,MAAA,EAAA;;YAEA,CAAA,EAAA,OAAA;;QAEA,CAAA,EAAA,OAAA;;SAEA,CAAA,EAAA,OAAA;;YAEA,CAAA,EAAA,MAAA;;UAEA,CAAA,EAAA,OAAA;;aACe,CAAA,EAAA,MAAA;EAAA;;;;;;;;;;;YArCL;;;;;;;;iBAaI,SAAA;;;;;;;;;;UAUN;;;;;;;;;;;;WAYC;;GAER,iBAAc,oBAAA,CAAA,GAAA,CAAA"}

package/dist/react/charts/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":["import type { ECharts } from \"echarts\";\nimport ReactECharts from \"echarts-for-react\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { normalizeChartData, normalizeHeatmapData } from \"./normalize\";\nimport {\n  buildCartesianOption,\n  buildHeatmapOption,\n  buildHorizontalBarOption,\n  buildPieOption,\n  buildRadarOption,\n  type OptionBuilderContext,\n} from \"./options\";\nimport { useThemeColors } from \"./theme\";\nimport type {\n  ChartColorPalette,\n  ChartData,\n  ChartType,\n  Orientation,\n} from \"./types\";\n\n// ============================================================================\n// Palette Selection\n// ============================================================================\n\n/**\n * Determines the appropriate color palette for a chart type.\n * - Heatmaps use sequential (low → high intensity)\n * - All other charts use categorical (distinct categories)\n */\nfunction getDefaultPalette(chartType: ChartType): ChartColorPalette {\n  switch (chartType) {\n    case \"heatmap\":\n      return \"sequential\";\n    default:\n      return \"categorical\";\n  }\n}\n\n// ============================================================================\n// Component Props\n// ============================================================================\n\nexport interface BaseChartProps {\n  /** Chart data (Arrow Table or JSON array) - format is auto-detected */\n  data: ChartData;\n  /** Chart type */\n  chartType: ChartType;\n  /** X-axis field key (auto-detected from schema if not provided) */\n  xKey?: string;\n  /** Y-axis field key(s) (auto-detected from schema if not provided) */\n  yKey?: string | string[];\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Chart title */\n  title?: string;\n  /** Show legend @default true */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude (heatmap)\n   * - \"diverging\": Two-tone for positive/negative (correlation)\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors (overrides colorPalette) */\n  colors?: string[];\n  /** Show data point symbols (line/area charts) @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves (line/area charts) @default true */\n  smooth?: boolean;\n  /** Stack series @default false */\n  stacked?: boolean;\n  /** Symbol size for scatter charts @default 8 */\n  symbolSize?: number;\n  /** Show area fill for radar charts @default true */\n  showArea?: boolean;\n  /** Inner radius for pie/donut (0-100) @default 0 */\n  innerRadius?: number;\n  /** Show labels on pie/donut slices @default true */\n  showLabels?: boolean;\n  /** Label position for pie/donut @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n  /** Y-axis field key for heatmap (the row dimension) */\n  yAxisKey?: string;\n  /** Min value for heatmap color scale */\n  min?: number;\n  /** Max value for heatmap color scale */\n  max?: number;\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// ============================================================================\n// Base Chart Component\n// ============================================================================\n\n/**\n * Base chart component that handles both Arrow and JSON data.\n * Renders using ECharts for consistent output across both formats.\n */\nexport function BaseChart({\n  data,\n  chartType,\n  xKey,\n  yKey,\n  orientation,\n  height = 300,\n  title,\n  showLegend = true,\n  colorPalette,\n  colors: customColors,\n  showSymbol = false,\n  smooth = true,\n  stacked = false,\n  symbolSize = 8,\n  showArea = true,\n  innerRadius = 0,\n  showLabels = true,\n  labelPosition = \"outside\",\n  yAxisKey,\n  min,\n  max,\n  options: customOptions,\n  className,\n}: BaseChartProps) {\n  // Determine the appropriate color palette based on chart type\n  const resolvedPalette = colorPalette ?? getDefaultPalette(chartType);\n  const themeColors = useThemeColors(resolvedPalette);\n  const colors = customColors ?? themeColors;\n\n  // Store ECharts instance directly to avoid stale ref issues on unmount\n  const echartsInstanceRef = useRef<ECharts | null>(null);\n\n  // Callback ref pattern: captures the ECharts instance when ReactECharts mounts\n  // This ensures we always have a stable reference to the actual instance\n  const chartRefCallback = useCallback((node: ReactECharts | null) => {\n    // Dispose previous instance if component is being replaced\n    if (\n      echartsInstanceRef.current &&\n      !echartsInstanceRef.current.isDisposed()\n    ) {\n      echartsInstanceRef.current.dispose();\n    }\n\n    // Store the new instance\n    if (node) {\n      echartsInstanceRef.current = node.getEchartsInstance();\n    } else {\n      // Component unmounting - dispose the stored instance\n      if (\n        echartsInstanceRef.current &&\n        !echartsInstanceRef.current.isDisposed()\n      ) {\n        echartsInstanceRef.current.dispose();\n      }\n      echartsInstanceRef.current = null;\n    }\n  }, []);\n\n  // Memoize data normalization\n  const normalized = useMemo(\n    () =>\n      chartType === \"heatmap\"\n        ? normalizeHeatmapData(data, xKey, yAxisKey, yKey)\n        : normalizeChartData(data, xKey, yKey, orientation),\n    [data, xKey, yKey, yAxisKey, orientation, chartType],\n  );\n\n  // Memoize option building\n  const option = useMemo(() => {\n    const { xData, yFields, chartType: detectedChartType } = normalized;\n\n    if (xData.length === 0) return null;\n\n    // Determine chart mode first (needed to handle yDataMap)\n    const isHeatmap = chartType === \"heatmap\";\n\n    // Heatmaps use heatmapData instead of yDataMap\n    // For other charts, yDataMap is required\n    const yDataMap = \"yDataMap\" in normalized ? normalized.yDataMap : {};\n\n    const baseCtx: OptionBuilderContext = {\n      xData,\n      yDataMap,\n      yFields,\n      colors,\n      title,\n      showLegend,\n    };\n    const isPie = chartType === \"pie\" || chartType === \"donut\";\n    const isRadar = chartType === \"radar\";\n    const isHorizontal =\n      !isPie &&\n      !isRadar &&\n      !isHeatmap &&\n      (orientation === \"horizontal\" ||\n        (detectedChartType === \"categorical\" &&\n          !orientation &&\n          chartType === \"bar\"));\n    const isTimeSeries =\n      detectedChartType === \"timeseries\" &&\n      !isHorizontal &&\n      !isRadar &&\n      !isHeatmap;\n\n    // Build option based on chart type\n    let opt: Record<string, unknown>;\n\n    if (isHeatmap && \"yAxisData\" in normalized && \"heatmapData\" in normalized) {\n      const heatmapNorm = normalized as {\n        yAxisData: (string | number)[];\n        heatmapData: [number, number, number][];\n        min: number;\n        max: number;\n      } & typeof normalized;\n      opt = buildHeatmapOption({\n        ...baseCtx,\n        yAxisData: heatmapNorm.yAxisData,\n        heatmapData: heatmapNorm.heatmapData,\n        min: min ?? heatmapNorm.min,\n        max: max ?? heatmapNorm.max,\n        showLabels,\n      });\n    } else if (isRadar) {\n      opt = buildRadarOption(baseCtx, showArea);\n    } else if (isPie) {\n      opt = buildPieOption(\n        baseCtx,\n        chartType as \"pie\" | \"donut\",\n        innerRadius,\n        showLabels,\n        labelPosition,\n      );\n    } else if (isHorizontal) {\n      opt = buildHorizontalBarOption(baseCtx, stacked);\n    } else {\n      opt = buildCartesianOption({\n        ...baseCtx,\n        chartType,\n        isTimeSeries,\n        stacked,\n        smooth,\n        showSymbol,\n        symbolSize,\n      });\n    }\n\n    // Merge custom options\n    return customOptions ? { ...opt, ...customOptions } : opt;\n  }, [\n    normalized,\n    colors,\n    title,\n    showLegend,\n    chartType,\n    orientation,\n    innerRadius,\n    showLabels,\n    labelPosition,\n    stacked,\n    smooth,\n    showSymbol,\n    symbolSize,\n    showArea,\n    min,\n    max,\n    customOptions,\n  ]);\n\n  if (!option) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n        No data\n      </div>\n    );\n  }\n\n  return (\n    <ReactECharts\n      ref={chartRefCallback}\n      option={option}\n      style={{ height }}\n      className={className}\n      opts={{ renderer: \"canvas\" }}\n      notMerge={false}\n      lazyUpdate={true}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,kBAAkB,WAAyC;AAClE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;;;;;AAsEb,SAAgB,UAAU,EACxB,MACA,WACA,MACA,MACA,aACA,SAAS,KACT,OACA,aAAa,MACb,cACA,QAAQ,cACR,aAAa,OACb,SAAS,MACT,UAAU,OACV,aAAa,GACb,WAAW,MACX,cAAc,GACd,aAAa,MACb,gBAAgB,WAChB,UACA,KACA,KACA,SAAS,eACT,aACiB;CAGjB,MAAM,cAAc,eADI,gBAAgB,kBAAkB,UAAU,CACjB;CACnD,MAAM,SAAS,gBAAgB;CAG/B,MAAM,qBAAqB,OAAuB,KAAK;CAIvD,MAAM,mBAAmB,aAAa,SAA8B;AAElE,MACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAItC,MAAI,KACF,oBAAmB,UAAU,KAAK,oBAAoB;OACjD;AAEL,OACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAEtC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAGN,MAAM,aAAa,cAEf,cAAc,YACV,qBAAqB,MAAM,MAAM,UAAU,KAAK,GAChD,mBAAmB,MAAM,MAAM,MAAM,YAAY,EACvD;EAAC;EAAM;EAAM;EAAM;EAAU;EAAa;EAAU,CACrD;CAGD,MAAM,SAAS,cAAc;EAC3B,MAAM,EAAE,OAAO,SAAS,WAAW,sBAAsB;AAEzD,MAAI,MAAM,WAAW,EAAG,QAAO;EAG/B,MAAM,YAAY,cAAc;EAMhC,MAAM,UAAgC;GACpC;GACA,UAJe,cAAc,aAAa,WAAW,WAAW,EAAE;GAKlE;GACA;GACA;GACA;GACD;EACD,MAAM,QAAQ,cAAc,SAAS,cAAc;EACnD,MAAM,UAAU,cAAc;EAC9B,MAAM,eACJ,CAAC,SACD,CAAC,WACD,CAAC,cACA,gBAAgB,gBACd,sBAAsB,iBACrB,CAAC,eACD,cAAc;EACpB,MAAM,eACJ,sBAAsB,gBACtB,CAAC,gBACD,CAAC,WACD,CAAC;EAGH,IAAI;AAEJ,MAAI,aAAa,eAAe,cAAc,iBAAiB,YAAY;GACzE,MAAM,cAAc;AAMpB,SAAM,mBAAmB;IACvB,GAAG;IACH,WAAW,YAAY;IACvB,aAAa,YAAY;IACzB,KAAK,OAAO,YAAY;IACxB,KAAK,OAAO,YAAY;IACxB;IACD,CAAC;aACO,QACT,OAAM,iBAAiB,SAAS,SAAS;WAChC,MACT,OAAM,eACJ,SACA,WACA,aACA,YACA,cACD;WACQ,aACT,OAAM,yBAAyB,SAAS,QAAQ;MAEhD,OAAM,qBAAqB;GACzB,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAIJ,SAAO,gBAAgB;GAAE,GAAG;GAAK,GAAG;GAAe,GAAG;IACrD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;YAAgE;GAEzE;AAIV,QACE,oBAAC;EACC,KAAK;EACG;EACR,OAAO,EAAE,QAAQ;EACN;EACX,MAAM,EAAE,UAAU,UAAU;EAC5B,UAAU;EACV,YAAY;GACZ"}
+{"version":3,"file":"base.js","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":["import type { ECharts } from \"echarts\";\nimport ReactECharts from \"echarts-for-react\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { normalizeChartData, normalizeHeatmapData } from \"./normalize\";\nimport {\n  buildCartesianOption,\n  buildHeatmapOption,\n  buildHorizontalBarOption,\n  buildPieOption,\n  buildRadarOption,\n  type OptionBuilderContext,\n} from \"./options\";\nimport { useThemeColors } from \"./theme\";\nimport type {\n  ChartColorPalette,\n  ChartData,\n  ChartType,\n  Orientation,\n} from \"./types\";\n\n// ============================================================================\n// Palette Selection\n// ============================================================================\n\n/**\n * Determines the appropriate color palette for a chart type.\n * - Heatmaps use sequential (low → high intensity)\n * - All other charts use categorical (distinct categories)\n */\nfunction getDefaultPalette(chartType: ChartType): ChartColorPalette {\n  switch (chartType) {\n    case \"heatmap\":\n      return \"sequential\";\n    default:\n      return \"categorical\";\n  }\n}\n\n// ============================================================================\n// Component Props\n// ============================================================================\n\nexport interface BaseChartProps {\n  /** Chart data (Arrow Table or JSON array) - format is auto-detected */\n  data: ChartData;\n  /** Chart type */\n  chartType: ChartType;\n  /** X-axis field key (auto-detected from schema if not provided) */\n  xKey?: string;\n  /** Y-axis field key(s) (auto-detected from schema if not provided) */\n  yKey?: string | string[];\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Chart title */\n  title?: string;\n  /** Show legend @default true */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude (heatmap)\n   * - \"diverging\": Two-tone for positive/negative (correlation)\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors (overrides colorPalette) */\n  colors?: string[];\n  /** Show data point symbols (line/area charts) @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves (line/area charts) @default true */\n  smooth?: boolean;\n  /** Stack series @default false */\n  stacked?: boolean;\n  /** Symbol size for scatter charts @default 8 */\n  symbolSize?: number;\n  /** Show area fill for radar charts @default true */\n  showArea?: boolean;\n  /** Inner radius for pie/donut (0-100) @default 0 */\n  innerRadius?: number;\n  /** Show labels on pie/donut slices @default true */\n  showLabels?: boolean;\n  /** Label position for pie/donut @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n  /** Y-axis field key for heatmap (the row dimension) */\n  yAxisKey?: string;\n  /** Min value for heatmap color scale */\n  min?: number;\n  /** Max value for heatmap color scale */\n  max?: number;\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// ============================================================================\n// Base Chart Component\n// ============================================================================\n\n/**\n * Base chart component that handles both Arrow and JSON data.\n * Renders using ECharts for consistent output across both formats.\n */\nexport function BaseChart({\n  data,\n  chartType,\n  xKey,\n  yKey,\n  orientation,\n  height = 300,\n  title,\n  showLegend = true,\n  colorPalette,\n  colors: customColors,\n  showSymbol = false,\n  smooth = true,\n  stacked = false,\n  symbolSize = 8,\n  showArea = true,\n  innerRadius = 0,\n  showLabels = true,\n  labelPosition = \"outside\",\n  yAxisKey,\n  min,\n  max,\n  options: customOptions,\n  className,\n}: BaseChartProps) {\n  // Determine the appropriate color palette based on chart type\n  const resolvedPalette = colorPalette ?? getDefaultPalette(chartType);\n  const themeColors = useThemeColors(resolvedPalette);\n  const colors = customColors ?? themeColors;\n\n  // Store ECharts instance directly to avoid stale ref issues on unmount\n  const echartsInstanceRef = useRef<ECharts | null>(null);\n\n  // Callback ref pattern: captures the ECharts instance when ReactECharts mounts\n  // This ensures we always have a stable reference to the actual instance\n  const chartRefCallback = useCallback((node: ReactECharts | null) => {\n    // Dispose previous instance if component is being replaced\n    if (\n      echartsInstanceRef.current &&\n      !echartsInstanceRef.current.isDisposed()\n    ) {\n      echartsInstanceRef.current.dispose();\n    }\n\n    // Store the new instance\n    if (node) {\n      echartsInstanceRef.current = node.getEchartsInstance();\n    } else {\n      // Component unmounting - dispose the stored instance\n      if (\n        echartsInstanceRef.current &&\n        !echartsInstanceRef.current.isDisposed()\n      ) {\n        echartsInstanceRef.current.dispose();\n      }\n      echartsInstanceRef.current = null;\n    }\n  }, []);\n\n  // Memoize data normalization\n  const normalized = useMemo(\n    () =>\n      chartType === \"heatmap\"\n        ? normalizeHeatmapData(data, xKey, yAxisKey, yKey)\n        : normalizeChartData(data, xKey, yKey, orientation),\n    [data, xKey, yKey, yAxisKey, orientation, chartType],\n  );\n\n  // Memoize option building\n  const option = useMemo(() => {\n    const { xData, yFields, chartType: detectedChartType } = normalized;\n\n    if (xData.length === 0) return null;\n\n    // Determine chart mode first (needed to handle yDataMap)\n    const isHeatmap = chartType === \"heatmap\";\n\n    // Heatmaps use heatmapData instead of yDataMap\n    // For other charts, yDataMap is required\n    const yDataMap = \"yDataMap\" in normalized ? normalized.yDataMap : {};\n\n    const baseCtx: OptionBuilderContext = {\n      xData,\n      yDataMap,\n      yFields,\n      colors,\n      title,\n      showLegend,\n    };\n    const isPie = chartType === \"pie\" || chartType === \"donut\";\n    const isRadar = chartType === \"radar\";\n    const isHorizontal =\n      !isPie &&\n      !isRadar &&\n      !isHeatmap &&\n      (orientation === \"horizontal\" ||\n        (detectedChartType === \"categorical\" &&\n          !orientation &&\n          chartType === \"bar\"));\n    const isTimeSeries =\n      detectedChartType === \"timeseries\" &&\n      !isHorizontal &&\n      !isRadar &&\n      !isHeatmap;\n\n    // Build option based on chart type\n    let opt: Record<string, unknown>;\n\n    if (isHeatmap && \"yAxisData\" in normalized && \"heatmapData\" in normalized) {\n      const heatmapNorm = normalized as {\n        yAxisData: (string | number)[];\n        heatmapData: [number, number, number][];\n        min: number;\n        max: number;\n      } & typeof normalized;\n      opt = buildHeatmapOption({\n        ...baseCtx,\n        yAxisData: heatmapNorm.yAxisData,\n        heatmapData: heatmapNorm.heatmapData,\n        min: min ?? heatmapNorm.min,\n        max: max ?? heatmapNorm.max,\n        showLabels,\n      });\n    } else if (isRadar) {\n      opt = buildRadarOption(baseCtx, showArea);\n    } else if (isPie) {\n      opt = buildPieOption(\n        baseCtx,\n        chartType as \"pie\" | \"donut\",\n        innerRadius,\n        showLabels,\n        labelPosition,\n      );\n    } else if (isHorizontal) {\n      opt = buildHorizontalBarOption(baseCtx, stacked);\n    } else {\n      opt = buildCartesianOption({\n        ...baseCtx,\n        chartType,\n        isTimeSeries,\n        stacked,\n        smooth,\n        showSymbol,\n        symbolSize,\n      });\n    }\n\n    // Merge custom options\n    return customOptions ? { ...opt, ...customOptions } : opt;\n  }, [\n    normalized,\n    colors,\n    title,\n    showLegend,\n    chartType,\n    orientation,\n    innerRadius,\n    showLabels,\n    labelPosition,\n    stacked,\n    smooth,\n    showSymbol,\n    symbolSize,\n    showArea,\n    min,\n    max,\n    customOptions,\n  ]);\n\n  if (!option) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n        No data\n      </div>\n    );\n  }\n\n  return (\n    <ReactECharts\n      ref={chartRefCallback}\n      option={option}\n      style={{ height }}\n      className={className}\n      opts={{ renderer: \"canvas\" }}\n      notMerge={false}\n      lazyUpdate={true}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,kBAAkB,WAAyC;AAClE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;;;;;AAsEb,SAAgB,UAAU,EACxB,MACA,WACA,MACA,MACA,aACA,SAAS,KACT,OACA,aAAa,MACb,cACA,QAAQ,cACR,aAAa,OACb,SAAS,MACT,UAAU,OACV,aAAa,GACb,WAAW,MACX,cAAc,GACd,aAAa,MACb,gBAAgB,WAChB,UACA,KACA,KACA,SAAS,eACT,aACiB;CAGjB,MAAM,cAAc,eADI,gBAAgB,kBAAkB,UAAU,CACjB;CACnD,MAAM,SAAS,gBAAgB;CAG/B,MAAM,qBAAqB,OAAuB,KAAK;CAIvD,MAAM,mBAAmB,aAAa,SAA8B;AAElE,MACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAItC,MAAI,KACF,oBAAmB,UAAU,KAAK,oBAAoB;OACjD;AAEL,OACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAEtC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAGN,MAAM,aAAa,cAEf,cAAc,YACV,qBAAqB,MAAM,MAAM,UAAU,KAAK,GAChD,mBAAmB,MAAM,MAAM,MAAM,YAAY,EACvD;EAAC;EAAM;EAAM;EAAM;EAAU;EAAa;EAAU,CACrD;CAGD,MAAM,SAAS,cAAc;EAC3B,MAAM,EAAE,OAAO,SAAS,WAAW,sBAAsB;AAEzD,MAAI,MAAM,WAAW,EAAG,QAAO;EAG/B,MAAM,YAAY,cAAc;EAMhC,MAAM,UAAgC;GACpC;GACA,UAJe,cAAc,aAAa,WAAW,WAAW,EAAE;GAKlE;GACA;GACA;GACA;GACD;EACD,MAAM,QAAQ,cAAc,SAAS,cAAc;EACnD,MAAM,UAAU,cAAc;EAC9B,MAAM,eACJ,CAAC,SACD,CAAC,WACD,CAAC,cACA,gBAAgB,gBACd,sBAAsB,iBACrB,CAAC,eACD,cAAc;EACpB,MAAM,eACJ,sBAAsB,gBACtB,CAAC,gBACD,CAAC,WACD,CAAC;EAGH,IAAI;AAEJ,MAAI,aAAa,eAAe,cAAc,iBAAiB,YAAY;GACzE,MAAM,cAAc;AAMpB,SAAM,mBAAmB;IACvB,GAAG;IACH,WAAW,YAAY;IACvB,aAAa,YAAY;IACzB,KAAK,OAAO,YAAY;IACxB,KAAK,OAAO,YAAY;IACxB;IACD,CAAC;aACO,QACT,OAAM,iBAAiB,SAAS,SAAS;WAChC,MACT,OAAM,eACJ,SACA,WACA,aACA,YACA,cACD;WACQ,aACT,OAAM,yBAAyB,SAAS,QAAQ;MAEhD,OAAM,qBAAqB;GACzB,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAIJ,SAAO,gBAAgB;GAAE,GAAG;GAAK,GAAG;GAAe,GAAG;IACrD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QACE,oBAAC,OAAD;EAAK,WAAU;YAAgE;EAEzE;AAIV,QACE,oBAAC,cAAD;EACE,KAAK;EACG;EACR,OAAO,EAAE,QAAQ;EACN;EACX,MAAM,EAAE,UAAU,UAAU;EAC5B,UAAU;EACV,YAAY;EACZ"}

package/dist/react/charts/chart-error-boundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-error-boundary.js","names":[],"sources":["../../../src/react/charts/chart-error-boundary.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nclass ErrorBoundary extends Component<\n  {\n    children: React.ReactNode;\n    fallback: React.ReactNode;\n    onError: (error: Error) => void;\n  },\n  { hasError: boolean }\n> {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.onError(error);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * Error boundary component for charts\n * @param children - The children to render\n * @param fallback - The fallback component to render when an error occurs\n * @returns - The rendered chart component with error boundary\n */\nexport function ChartErrorBoundary({\n  children,\n  fallback,\n}: {\n  children: React.ReactNode;\n  fallback: React.ReactNode;\n}) {\n  return (\n    <ErrorBoundary\n      fallback={fallback}\n      onError={(error) => console.error(\"Chart render error:\", error)}\n    >\n      {children}\n    </ErrorBoundary>\n  );\n}\n"],"mappings":";;;;AAEA,IAAM,gBAAN,cAA4B,UAO1B;CACA,QAAQ,EAAE,UAAU,OAAO;CAE3B,OAAO,2BAA2B;AAChC,SAAO,EAAE,UAAU,MAAM;;CAG3B,kBAAkB,OAAc;AAC9B,OAAK,MAAM,QAAQ,MAAM;;CAG3B,SAAS;AACP,MAAI,KAAK,MAAM,SACb,QAAO,KAAK,MAAM;AAEpB,SAAO,KAAK,MAAM;;;;;;;;;AAUtB,SAAgB,mBAAmB,EACjC,UACA,YAIC;AACD,QACE,oBAAC;EACW;EACV,UAAU,UAAU,QAAQ,MAAM,uBAAuB,MAAM;EAE9D;GACa"}
+{"version":3,"file":"chart-error-boundary.js","names":[],"sources":["../../../src/react/charts/chart-error-boundary.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nclass ErrorBoundary extends Component<\n  {\n    children: React.ReactNode;\n    fallback: React.ReactNode;\n    onError: (error: Error) => void;\n  },\n  { hasError: boolean }\n> {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.onError(error);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * Error boundary component for charts\n * @param children - The children to render\n * @param fallback - The fallback component to render when an error occurs\n * @returns - The rendered chart component with error boundary\n */\nexport function ChartErrorBoundary({\n  children,\n  fallback,\n}: {\n  children: React.ReactNode;\n  fallback: React.ReactNode;\n}) {\n  return (\n    <ErrorBoundary\n      fallback={fallback}\n      onError={(error) => console.error(\"Chart render error:\", error)}\n    >\n      {children}\n    </ErrorBoundary>\n  );\n}\n"],"mappings":";;;;AAEA,IAAM,gBAAN,cAA4B,UAO1B;CACA,QAAQ,EAAE,UAAU,OAAO;CAE3B,OAAO,2BAA2B;AAChC,SAAO,EAAE,UAAU,MAAM;;CAG3B,kBAAkB,OAAc;AAC9B,OAAK,MAAM,QAAQ,MAAM;;CAG3B,SAAS;AACP,MAAI,KAAK,MAAM,SACb,QAAO,KAAK,MAAM;AAEpB,SAAO,KAAK,MAAM;;;;;;;;;AAUtB,SAAgB,mBAAmB,EACjC,UACA,YAIC;AACD,QACE,oBAAC,eAAD;EACY;EACV,UAAU,UAAU,QAAQ,MAAM,uBAAuB,MAAM;EAE9D;EACa"}

package/dist/react/charts/create-chart.d.ts

@@ -1,5 +1,5 @@
 import { ChartType, UnifiedChartProps } from "./types.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime284 from "react/jsx-runtime";
 
 //#region src/react/charts/create-chart.d.ts
 
@@ -18,7 +18,7 @@ import * as react_jsx_runtime9 from "react/jsx-runtime";
  * ```
  */
 declare function createChart<TProps extends UnifiedChartProps>(chartType: ChartType, displayName: string): {
-  (props: TProps): react_jsx_runtime9.JSX.Element;
+  (props: TProps): react_jsx_runtime284.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/create-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-chart.d.ts","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkBA;;;;;;;;;;;iBAAgB,2BAA2B,8BAC9B;UAGe,SAAM,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"create-chart.d.ts","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkBA;;;;;;;;;;;iBAAgB,2BAA2B,8BAC9B;UAGe,SAAM,oBAAA,CAAA,GAAA,CAAA"}

package/dist/react/charts/create-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n  chartType: ChartType,\n  displayName: string,\n) {\n  const Component = (props: TProps) => {\n    const {\n      // Query props\n      queryKey,\n      parameters,\n      format,\n      transformer,\n      // Data props\n      data,\n      // Common props\n      height = 300,\n      className,\n      ariaLabel,\n      testId,\n      // All remaining props pass through to BaseChart\n      ...chartProps\n    } = props as TProps & {\n      queryKey?: string;\n      parameters?: Record<string, unknown>;\n      format?: string;\n      transformer?: unknown;\n      data?: unknown;\n      height?: number;\n      className?: string;\n      ariaLabel?: string;\n      testId?: string;\n    };\n\n    const wrapperProps =\n      data !== undefined\n        ? { data, height, className, ariaLabel, testId }\n        : {\n            queryKey: queryKey as string,\n            parameters,\n            format,\n            transformer,\n            height,\n            className,\n            ariaLabel,\n            testId: testId ?? `${chartType}-chart-${queryKey}`,\n          };\n\n    return (\n      <ChartWrapper {...wrapperProps}>\n        {(chartData) => (\n          <BaseChart\n            data={chartData}\n            chartType={chartType}\n            height={height}\n            className={className}\n            {...chartProps}\n          />\n        )}\n      </ChartWrapper>\n    );\n  };\n\n  Component.displayName = displayName;\n  return Component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YACd,WACA,aACA;CACA,MAAM,aAAa,UAAkB;EACnC,MAAM,EAEJ,UACA,YACA,QACA,aAEA,MAEA,SAAS,KACT,WACA,WACA,QAEA,GAAG,eACD;AA0BJ,SACE,oBAAC;GAAa,GAdd,SAAS,SACL;IAAE;IAAM;IAAQ;IAAW;IAAW;IAAQ,GAC9C;IACY;IACV;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,UAAU,GAAG,UAAU,SAAS;IACzC;cAID,cACA,oBAAC;IACC,MAAM;IACK;IACH;IACG;IACX,GAAI;KACJ;IAES;;AAInB,WAAU,cAAc;AACxB,QAAO"}
+{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n  chartType: ChartType,\n  displayName: string,\n) {\n  const Component = (props: TProps) => {\n    const {\n      // Query props\n      queryKey,\n      parameters,\n      format,\n      transformer,\n      // Data props\n      data,\n      // Common props\n      height = 300,\n      className,\n      ariaLabel,\n      testId,\n      // All remaining props pass through to BaseChart\n      ...chartProps\n    } = props as TProps & {\n      queryKey?: string;\n      parameters?: Record<string, unknown>;\n      format?: string;\n      transformer?: unknown;\n      data?: unknown;\n      height?: number;\n      className?: string;\n      ariaLabel?: string;\n      testId?: string;\n    };\n\n    const wrapperProps =\n      data !== undefined\n        ? { data, height, className, ariaLabel, testId }\n        : {\n            queryKey: queryKey as string,\n            parameters,\n            format,\n            transformer,\n            height,\n            className,\n            ariaLabel,\n            testId: testId ?? `${chartType}-chart-${queryKey}`,\n          };\n\n    return (\n      <ChartWrapper {...wrapperProps}>\n        {(chartData) => (\n          <BaseChart\n            data={chartData}\n            chartType={chartType}\n            height={height}\n            className={className}\n            {...chartProps}\n          />\n        )}\n      </ChartWrapper>\n    );\n  };\n\n  Component.displayName = displayName;\n  return Component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YACd,WACA,aACA;CACA,MAAM,aAAa,UAAkB;EACnC,MAAM,EAEJ,UACA,YACA,QACA,aAEA,MAEA,SAAS,KACT,WACA,WACA,QAEA,GAAG,eACD;AA0BJ,SACE,oBAAC,cAAD;GAAc,GAdd,SAAS,SACL;IAAE;IAAM;IAAQ;IAAW;IAAW;IAAQ,GAC9C;IACY;IACV;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,UAAU,GAAG,UAAU,SAAS;IACzC;cAID,cACA,oBAAC,WAAD;IACE,MAAM;IACK;IACH;IACG;IACX,GAAI;IACJ;GAES;;AAInB,WAAU,cAAc;AACxB,QAAO"}

package/dist/react/charts/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","names":[],"sources":["../../../src/react/charts/empty.tsx"],"sourcesContent":["export function EmptyState() {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-muted-foreground\">No data available</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,aAAa;AAC3B,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAE,WAAU;aAAgC;IAAqB;GAC9D"}
+{"version":3,"file":"empty.js","names":[],"sources":["../../../src/react/charts/empty.tsx"],"sourcesContent":["export function EmptyState() {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-muted-foreground\">No data available</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,aAAa;AAC3B,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,KAAD;GAAG,WAAU;aAAgC;GAAqB;EAC9D"}

package/dist/react/charts/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","names":[],"sources":["../../../src/react/charts/error.tsx"],"sourcesContent":["export function ErrorState({ error }: { error: string }) {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-destructive\">Error loading chart: {error}</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,WAAW,EAAE,SAA4B;AACvD,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAE,WAAU;cAA2B,yBAAsB;IAAU;GACpE"}
+{"version":3,"file":"error.js","names":[],"sources":["../../../src/react/charts/error.tsx"],"sourcesContent":["export function ErrorState({ error }: { error: string }) {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-destructive\">Error loading chart: {error}</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,WAAW,EAAE,SAA4B;AACvD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,KAAD;GAAG,WAAU;aAAb,CAAwC,yBAAsB,MAAU;;EACpE"}

package/dist/react/charts/heatmap/index.d.ts

@@ -1,6 +1,6 @@
 import { HeatmapChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime277 from "react/jsx-runtime";
 
 //#region src/react/charts/heatmap/index.d.ts
 
@@ -19,7 +19,7 @@ import * as react_jsx_runtime2 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const HeatmapChart: {
-  (props: HeatmapChartProps): react_jsx_runtime2.JSX.Element;
+  (props: HeatmapChartProps): react_jsx_runtime277.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/line/index.d.ts

@@ -1,6 +1,6 @@
 import { LineChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime278 from "react/jsx-runtime";
 
 //#region src/react/charts/line/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime3 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const LineChart: {
-  (props: LineChartProps): react_jsx_runtime3.JSX.Element;
+  (props: LineChartProps): react_jsx_runtime278.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","names":[],"sources":["../../../src/react/charts/loading.tsx"],"sourcesContent":["export function LoadingSkeleton({\n  height = 300,\n}: {\n  height?: number | string;\n}) {\n  return (\n    <div className=\"w-full animate-pulse bg-muted rounded\" style={{ height }} />\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,gBAAgB,EAC9B,SAAS,OAGR;AACD,QACE,oBAAC;EAAI,WAAU;EAAwC,OAAO,EAAE,QAAQ;GAAI"}
+{"version":3,"file":"loading.js","names":[],"sources":["../../../src/react/charts/loading.tsx"],"sourcesContent":["export function LoadingSkeleton({\n  height = 300,\n}: {\n  height?: number | string;\n}) {\n  return (\n    <div className=\"w-full animate-pulse bg-muted rounded\" style={{ height }} />\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,gBAAgB,EAC9B,SAAS,OAGR;AACD,QACE,oBAAC,OAAD;EAAK,WAAU;EAAwC,OAAO,EAAE,QAAQ;EAAI"}

package/dist/react/charts/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","names":[],"sources":["../../../src/react/charts/options.ts"],"sourcesContent":[],"mappings":";;;UAOiB,oBAAA;;EAAA,QAAA,EAEL,MAFK,CAAA,MAAoB,EAAA,CAAA,MAAA,GAEzB,MAAM,CAAA,EAAA,CAAA;EAOD,OAAA,EAAA,MAAA,EAAA;EAAiB,MAAA,EAAA,MAAA,EAAA;OACrB,CAAA,EAAA,MAAA;YAD6B,EAAA,OAAA;;AAwB1B,UAxBC,gBAAA,SAAyB,oBAwBV,CAAA;EAAA,SAAA,EAvBnB,SAuBmB;cACzB,EAAA,OAAA;SAEJ,EAAA,OAAA;EAAM,MAAA,EAAA,OAAA;EAmCO,UAAA,EAAA,OAAc;EAAA,UAAA,EAAA,MAAA;;AAM3B,iBA5Ca,gBAAA,CA4Cb,GAAA,EA3CI,oBA2CJ,EAAA,QAAA,CAAA,EAAA,OAAA,CAAA,EAzCA,MAyCA,CAAA,MAAA,EAAA,OAAA,CAAA;AAAM,iBANO,cAAA,CAMP,GAAA,EALF,oBAKE,EAAA,SAAA,EAAA,KAAA,GAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAN,MAAM,CAAA,MAAA,EAAA,OAAA,CAAA;AAyCO,iBAAA,wBAAA,CAAwB,GAAA,EACjC,oBADiC,EAAA,OAAA,EAAA,OAAA,CAAA,EAGrC,MAHqC,CAAA,MAAA,EAAA,OAAA,CAAA;AAAA,UAyCvB,cAAA,SAAuB,oBAzCA,CAAA;;WAGrC,EAAA,CAAA,MAAA,GAAA,MAAA,CAAA,EAAA;EAAM;EAsCQ,WAAA,EAAA,CAAA,MAAe,EAAA,MAAQ,EAAA,MAAA,CAAA,EAAA;EAaxB;EAAkB,GAAA,EAAA,MAAA;;KAE/B,EAAA,MAAA;EAAM;EAsEO,UAAA,EAAA,OAAA;;AACT,iBAzES,kBAAA,CAyET,GAAA,EAxEA,cAwEA,CAAA,EAvEJ,MAuEI,CAAA,MAAA,EAAA,OAAA,CAAA;AACJ,iBAFa,oBAAA,CAEb,GAAA,EADI,gBACJ,CAAA,EAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA"}
+{"version":3,"file":"options.d.ts","names":[],"sources":["../../../src/react/charts/options.ts"],"sourcesContent":[],"mappings":";;;UAOiB,oBAAA;;EAAA,QAAA,EAEL,MAFK,CAAA,MAAoB,EAAA,CAAA,MAAA,GAEzB,MAAA,CAAM,EAAA,CAAA;EAOD,OAAA,EAAA,MAAA,EAAA;EAAiB,MAAA,EAAA,MAAA,EAAA;OACrB,CAAA,EAAA,MAAA;YAD6B,EAAA,OAAA;;AAwB1B,UAxBC,gBAAA,SAAyB,oBAwBV,CAAA;EAAA,SAAA,EAvBnB,SAuBmB;cACzB,EAAA,OAAA;SAEJ,EAAA,OAAA;EAAM,MAAA,EAAA,OAAA;EAmCO,UAAA,EAAA,OAAc;EAAA,UAAA,EAAA,MAAA;;AAM3B,iBA5Ca,gBAAA,CA4Cb,GAAA,EA3CI,oBA2CJ,EAAA,QAAA,CAAA,EAAA,OAAA,CAAA,EAzCA,MAyCA,CAAA,MAAA,EAAA,OAAA,CAAA;AAAM,iBANO,cAAA,CAMP,GAAA,EALF,oBAKE,EAAA,SAAA,EAAA,KAAA,GAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAN,MAAM,CAAA,MAAA,EAAA,OAAA,CAAA;AAyCO,iBAAA,wBAAA,CAAwB,GAAA,EACjC,oBADiC,EAAA,OAAA,EAAA,OAAA,CAAA,EAGrC,MAHqC,CAAA,MAAA,EAAA,OAAA,CAAA;AAAA,UAyCvB,cAAA,SAAuB,oBAzCA,CAAA;;WAGrC,EAAA,CAAA,MAAA,GAAA,MAAA,CAAA,EAAA;EAAM;EAsCQ,WAAA,EAAA,CAAA,MAAe,EAAA,MAAA,EAAQ,MAAA,CAAA,EAAA;EAaxB;EAAkB,GAAA,EAAA,MAAA;;KAE/B,EAAA,MAAA;EAAM;EAsEO,UAAA,EAAA,OAAA;;AACT,iBAzES,kBAAA,CAyET,GAAA,EAxEA,cAwEA,CAAA,EAvEJ,MAuEI,CAAA,MAAA,EAAA,OAAA,CAAA;AACJ,iBAFa,oBAAA,CAEb,GAAA,EADI,gBACJ,CAAA,EAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA"}

package/dist/react/charts/pie/index.d.ts

@@ -1,6 +1,6 @@
 import { DonutChartProps, PieChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime279 from "react/jsx-runtime";
 
 //#region src/react/charts/pie/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime4 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const PieChart: {
-  (props: PieChartProps): react_jsx_runtime4.JSX.Element;
+  (props: PieChartProps): react_jsx_runtime279.JSX.Element;
   displayName: string;
 };
 /**
@@ -27,7 +27,7 @@ declare const PieChart: {
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const DonutChart: {
-  (props: DonutChartProps): react_jsx_runtime4.JSX.Element;
+  (props: DonutChartProps): react_jsx_runtime279.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/radar/index.d.ts

@@ -1,6 +1,6 @@
 import { RadarChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime281 from "react/jsx-runtime";
 
 //#region src/react/charts/radar/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime6 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const RadarChart: {
-  (props: RadarChartProps): react_jsx_runtime6.JSX.Element;
+  (props: RadarChartProps): react_jsx_runtime281.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/scatter/index.d.ts

@@ -1,6 +1,6 @@
 import { ScatterChartProps } from "../types.js";
 import "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime282 from "react/jsx-runtime";
 
 //#region src/react/charts/scatter/index.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime7 from "react/jsx-runtime";
  * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const ScatterChart: {
-  (props: ScatterChartProps): react_jsx_runtime7.JSX.Element;
+  (props: ScatterChartProps): react_jsx_runtime282.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/react/charts/wrapper.d.ts

@@ -1,6 +1,6 @@
 import { ChartData, DataFormat } from "./types.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime285 from "react/jsx-runtime";
 
 //#region src/react/charts/wrapper.d.ts
 interface ChartWrapperQueryProps {
@@ -59,7 +59,7 @@ type ChartWrapperProps = CommonProps & (ChartWrapperQueryProps | ChartWrapperDat
  * </ChartWrapper>
  * ```
  */
-declare function ChartWrapper(props: ChartWrapperProps): react_jsx_runtime10.JSX.Element;
+declare function ChartWrapper(props: ChartWrapperProps): react_jsx_runtime285.JSX.Element;
 //#endregion
 export { ChartWrapper, ChartWrapperProps };
 //# sourceMappingURL=wrapper.d.ts.map

package/dist/react/charts/wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.d.ts","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":[],"mappings":";;;;;UAaU,sBAAA;;;EAAA;EAAsB,UAAA,CAAA,EAIjB,MAJiB,CAAA,MAAA,EAAA,OAAA,CAAA;;QAMrB,CAAA,EAAA,UAAA;;aAEqB,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAN,CAAM,EAAA,GAAA,CAAA;EAAC;EAKvB,IAAA,CAAA,EAAA,KAAA;AAEO;UAFP,qBAAA,CAUW;;MAUY,EAlBzB,SAkByB;EAAS;EAG9B,QAAA,CAAA,EAAA,KAAA;EAAiB,UAAA,CAAA,EAAA,KAAA;QAAG,CAAA,EAAA,KAAA;aAC7B,CAAA,EAAA,KAAA;;UAdO,WAAA,CAcuC;EA0GjC;EAAY,MAAA,CAAA,EAAA,MAAA;;WAAyB,CAAA,EAAA,MAAA;EAAA;;;;;mBA9GlC,cAAc;;KAGrB,iBAAA,GAAoB,eAC7B,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;iBA0GZ,YAAA,QAAoB,oBAAiB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"wrapper.d.ts","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":[],"mappings":";;;;;UAaU,sBAAA;;;EAAA;EAAsB,UAAA,CAAA,EAIjB,MAJiB,CAAA,MAAA,EAAA,OAAA,CAAA;;QAMrB,CAAA,EAAA,UAAA;;aAEqB,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAN,CAAM,EAAA,GAAA,CAAA;EAAC;EAKvB,IAAA,CAAA,EAAA,KAAA;AAEO;UAFP,qBAAA,CAUW;;MAUY,EAlBzB,SAkByB;EAAS;EAG9B,QAAA,CAAA,EAAA,KAAA;EAAiB,UAAA,CAAA,EAAA,KAAA;QAAG,CAAA,EAAA,KAAA;aAC7B,CAAA,EAAA,KAAA;;UAdO,WAAA,CAcuC;EA0GjC;EAAY,MAAA,CAAA,EAAA,MAAA;;WAAyB,CAAA,EAAA,MAAA;EAAA;;;;;mBA9GlC,cAAc;;KAGrB,iBAAA,GAAoB,eAC7B,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;iBA0GZ,YAAA,QAAoB,oBAAiB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/react/charts/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useChartData } from \"../hooks/use-chart-data\";\nimport { ChartErrorBoundary } from \"./chart-error-boundary\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { ChartData, DataFormat } from \"./types\";\nimport { isArrowTable } from \"./types\";\n\n// ============================================================================\n// Props Types\n// ============================================================================\n\ninterface ChartWrapperQueryProps {\n  /** Analytics query key */\n  queryKey: string;\n  /** Query parameters */\n  parameters?: Record<string, unknown>;\n  /** Data format preference */\n  format?: DataFormat;\n  /** Transform data after fetching */\n  transformer?: <T>(data: T) => T;\n  /** Direct data - not used in query mode */\n  data?: never;\n}\n\ninterface ChartWrapperDataProps {\n  /** Direct data (Arrow Table or JSON array) */\n  data: ChartData;\n  /** Not used in data mode */\n  queryKey?: never;\n  parameters?: never;\n  format?: never;\n  transformer?: never;\n}\n\ninterface CommonProps {\n  /** Chart height in pixels */\n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Accessibility label */\n  ariaLabel?: string;\n  /** Test ID for automated testing */\n  testId?: string;\n  /** Render function receiving the chart data */\n  children: (data: ChartData) => ReactNode;\n}\n\nexport type ChartWrapperProps = CommonProps &\n  (ChartWrapperQueryProps | ChartWrapperDataProps);\n\n// ============================================================================\n// Query Mode Content\n// ============================================================================\n\nfunction QueryModeContent({\n  queryKey,\n  parameters,\n  format,\n  transformer,\n  height,\n  className,\n  ariaLabel,\n  testId,\n  children,\n}: CommonProps & ChartWrapperQueryProps) {\n  const { data, loading, error, isEmpty } = useChartData({\n    queryKey,\n    parameters,\n    format,\n    transformer,\n  });\n\n  if (loading) return <LoadingSkeleton height={height ?? 300} />;\n  if (error) return <ErrorState error={error} />;\n  if (isEmpty || !data) return <EmptyState />;\n\n  return (\n    <ChartErrorBoundary\n      fallback={<ErrorState error=\"Failed to render chart\" />}\n    >\n      <div\n        className={className}\n        style={{ height }}\n        aria-label={ariaLabel}\n        data-testid={testId}\n        role=\"img\"\n      >\n        {children(data)}\n      </div>\n    </ChartErrorBoundary>\n  );\n}\n\n// ============================================================================\n// Data Mode Content\n// ============================================================================\n\nfunction DataModeContent({\n  data,\n  height,\n  className,\n  ariaLabel,\n  testId,\n  children,\n}: CommonProps & ChartWrapperDataProps) {\n  const isEmpty = isArrowTable(data)\n    ? data.numRows === 0\n    : !Array.isArray(data) || data.length === 0;\n\n  if (isEmpty) return <EmptyState />;\n\n  return (\n    <ChartErrorBoundary\n      fallback={<ErrorState error=\"Failed to render chart\" />}\n    >\n      <div\n        className={className}\n        style={{ height }}\n        aria-label={ariaLabel}\n        data-testid={testId}\n        role=\"img\"\n      >\n        {children(data)}\n      </div>\n    </ChartErrorBoundary>\n  );\n}\n\n// ============================================================================\n// Main Wrapper Component\n// ============================================================================\n\n/**\n * Wrapper component for charts.\n * Handles data fetching (query mode) or direct data injection (data mode).\n *\n * @example Query mode - fetches data from analytics endpoint\n * ```tsx\n * <ChartWrapper\n *   queryKey=\"spend_data\"\n *   parameters={{ limit: 100 }}\n *   format=\"auto\"\n * >\n *   {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n *\n * @example Data mode - uses provided data directly\n * ```tsx\n * <ChartWrapper data={myArrowTable}>\n *   {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n */\nexport function ChartWrapper(props: ChartWrapperProps) {\n  const { height = 300, className, ariaLabel, testId, children } = props;\n\n  // Data mode: use provided data directly\n  if (\"data\" in props && props.data !== undefined) {\n    return (\n      <DataModeContent\n        data={props.data}\n        height={height}\n        className={className}\n        ariaLabel={ariaLabel}\n        testId={testId}\n      >\n        {children}\n      </DataModeContent>\n    );\n  }\n\n  // Query mode: fetch data from analytics endpoint\n  if (\"queryKey\" in props && props.queryKey !== undefined) {\n    return (\n      <QueryModeContent\n        queryKey={props.queryKey}\n        parameters={props.parameters}\n        format={props.format}\n        transformer={props.transformer}\n        height={height}\n        className={className}\n        ariaLabel={ariaLabel}\n        testId={testId}\n      >\n        {children}\n      </QueryModeContent>\n    );\n  }\n\n  // Should never reach here due to TypeScript, but safety fallback\n  return <ErrorState error=\"Chart requires either 'queryKey' or 'data' prop\" />;\n}\n"],"mappings":";;;;;;;;;AAwDA,SAAS,iBAAiB,EACxB,UACA,YACA,QACA,aACA,QACA,WACA,WACA,QACA,YACuC;CACvC,MAAM,EAAE,MAAM,SAAS,OAAO,YAAY,aAAa;EACrD;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,QAAS,QAAO,oBAAC,mBAAgB,QAAQ,UAAU,MAAO;AAC9D,KAAI,MAAO,QAAO,oBAAC,cAAkB,QAAS;AAC9C,KAAI,WAAW,CAAC,KAAM,QAAO,oBAAC,eAAa;AAE3C,QACE,oBAAC;EACC,UAAU,oBAAC,cAAW,OAAM,2BAA2B;YAEvD,oBAAC;GACY;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;IACX;GACa;;AAQzB,SAAS,gBAAgB,EACvB,MACA,QACA,WACA,WACA,QACA,YACsC;AAKtC,KAJgB,aAAa,KAAK,GAC9B,KAAK,YAAY,IACjB,CAAC,MAAM,QAAQ,KAAK,IAAI,KAAK,WAAW,EAE/B,QAAO,oBAAC,eAAa;AAElC,QACE,oBAAC;EACC,UAAU,oBAAC,cAAW,OAAM,2BAA2B;YAEvD,oBAAC;GACY;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;IACX;GACa;;;;;;;;;;;;;;;;;;;;;;;;AA8BzB,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,SAAS,KAAK,WAAW,WAAW,QAAQ,aAAa;AAGjE,KAAI,UAAU,SAAS,MAAM,SAAS,OACpC,QACE,oBAAC;EACC,MAAM,MAAM;EACJ;EACG;EACA;EACH;EAEP;GACe;AAKtB,KAAI,cAAc,SAAS,MAAM,aAAa,OAC5C,QACE,oBAAC;EACC,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,QAAQ,MAAM;EACd,aAAa,MAAM;EACX;EACG;EACA;EACH;EAEP;GACgB;AAKvB,QAAO,oBAAC,cAAW,OAAM,oDAAoD"}
+{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useChartData } from \"../hooks/use-chart-data\";\nimport { ChartErrorBoundary } from \"./chart-error-boundary\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { ChartData, DataFormat } from \"./types\";\nimport { isArrowTable } from \"./types\";\n\n// ============================================================================\n// Props Types\n// ============================================================================\n\ninterface ChartWrapperQueryProps {\n  /** Analytics query key */\n  queryKey: string;\n  /** Query parameters */\n  parameters?: Record<string, unknown>;\n  /** Data format preference */\n  format?: DataFormat;\n  /** Transform data after fetching */\n  transformer?: <T>(data: T) => T;\n  /** Direct data - not used in query mode */\n  data?: never;\n}\n\ninterface ChartWrapperDataProps {\n  /** Direct data (Arrow Table or JSON array) */\n  data: ChartData;\n  /** Not used in data mode */\n  queryKey?: never;\n  parameters?: never;\n  format?: never;\n  transformer?: never;\n}\n\ninterface CommonProps {\n  /** Chart height in pixels */\n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Accessibility label */\n  ariaLabel?: string;\n  /** Test ID for automated testing */\n  testId?: string;\n  /** Render function receiving the chart data */\n  children: (data: ChartData) => ReactNode;\n}\n\nexport type ChartWrapperProps = CommonProps &\n  (ChartWrapperQueryProps | ChartWrapperDataProps);\n\n// ============================================================================\n// Query Mode Content\n// ============================================================================\n\nfunction QueryModeContent({\n  queryKey,\n  parameters,\n  format,\n  transformer,\n  height,\n  className,\n  ariaLabel,\n  testId,\n  children,\n}: CommonProps & ChartWrapperQueryProps) {\n  const { data, loading, error, isEmpty } = useChartData({\n    queryKey,\n    parameters,\n    format,\n    transformer,\n  });\n\n  if (loading) return <LoadingSkeleton height={height ?? 300} />;\n  if (error) return <ErrorState error={error} />;\n  if (isEmpty || !data) return <EmptyState />;\n\n  return (\n    <ChartErrorBoundary\n      fallback={<ErrorState error=\"Failed to render chart\" />}\n    >\n      <div\n        className={className}\n        style={{ height }}\n        aria-label={ariaLabel}\n        data-testid={testId}\n        role=\"img\"\n      >\n        {children(data)}\n      </div>\n    </ChartErrorBoundary>\n  );\n}\n\n// ============================================================================\n// Data Mode Content\n// ============================================================================\n\nfunction DataModeContent({\n  data,\n  height,\n  className,\n  ariaLabel,\n  testId,\n  children,\n}: CommonProps & ChartWrapperDataProps) {\n  const isEmpty = isArrowTable(data)\n    ? data.numRows === 0\n    : !Array.isArray(data) || data.length === 0;\n\n  if (isEmpty) return <EmptyState />;\n\n  return (\n    <ChartErrorBoundary\n      fallback={<ErrorState error=\"Failed to render chart\" />}\n    >\n      <div\n        className={className}\n        style={{ height }}\n        aria-label={ariaLabel}\n        data-testid={testId}\n        role=\"img\"\n      >\n        {children(data)}\n      </div>\n    </ChartErrorBoundary>\n  );\n}\n\n// ============================================================================\n// Main Wrapper Component\n// ============================================================================\n\n/**\n * Wrapper component for charts.\n * Handles data fetching (query mode) or direct data injection (data mode).\n *\n * @example Query mode - fetches data from analytics endpoint\n * ```tsx\n * <ChartWrapper\n *   queryKey=\"spend_data\"\n *   parameters={{ limit: 100 }}\n *   format=\"auto\"\n * >\n *   {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n *\n * @example Data mode - uses provided data directly\n * ```tsx\n * <ChartWrapper data={myArrowTable}>\n *   {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n */\nexport function ChartWrapper(props: ChartWrapperProps) {\n  const { height = 300, className, ariaLabel, testId, children } = props;\n\n  // Data mode: use provided data directly\n  if (\"data\" in props && props.data !== undefined) {\n    return (\n      <DataModeContent\n        data={props.data}\n        height={height}\n        className={className}\n        ariaLabel={ariaLabel}\n        testId={testId}\n      >\n        {children}\n      </DataModeContent>\n    );\n  }\n\n  // Query mode: fetch data from analytics endpoint\n  if (\"queryKey\" in props && props.queryKey !== undefined) {\n    return (\n      <QueryModeContent\n        queryKey={props.queryKey}\n        parameters={props.parameters}\n        format={props.format}\n        transformer={props.transformer}\n        height={height}\n        className={className}\n        ariaLabel={ariaLabel}\n        testId={testId}\n      >\n        {children}\n      </QueryModeContent>\n    );\n  }\n\n  // Should never reach here due to TypeScript, but safety fallback\n  return <ErrorState error=\"Chart requires either 'queryKey' or 'data' prop\" />;\n}\n"],"mappings":";;;;;;;;;AAwDA,SAAS,iBAAiB,EACxB,UACA,YACA,QACA,aACA,QACA,WACA,WACA,QACA,YACuC;CACvC,MAAM,EAAE,MAAM,SAAS,OAAO,YAAY,aAAa;EACrD;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,QAAS,QAAO,oBAAC,iBAAD,EAAiB,QAAQ,UAAU,KAAO;AAC9D,KAAI,MAAO,QAAO,oBAAC,YAAD,EAAmB,OAAS;AAC9C,KAAI,WAAW,CAAC,KAAM,QAAO,oBAAC,YAAD,EAAc;AAE3C,QACE,oBAAC,oBAAD;EACE,UAAU,oBAAC,YAAD,EAAY,OAAM,0BAA2B;YAEvD,oBAAC,OAAD;GACa;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;GACX;EACa;;AAQzB,SAAS,gBAAgB,EACvB,MACA,QACA,WACA,WACA,QACA,YACsC;AAKtC,KAJgB,aAAa,KAAK,GAC9B,KAAK,YAAY,IACjB,CAAC,MAAM,QAAQ,KAAK,IAAI,KAAK,WAAW,EAE/B,QAAO,oBAAC,YAAD,EAAc;AAElC,QACE,oBAAC,oBAAD;EACE,UAAU,oBAAC,YAAD,EAAY,OAAM,0BAA2B;YAEvD,oBAAC,OAAD;GACa;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;GACX;EACa;;;;;;;;;;;;;;;;;;;;;;;;AA8BzB,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,SAAS,KAAK,WAAW,WAAW,QAAQ,aAAa;AAGjE,KAAI,UAAU,SAAS,MAAM,SAAS,OACpC,QACE,oBAAC,iBAAD;EACE,MAAM,MAAM;EACJ;EACG;EACA;EACH;EAEP;EACe;AAKtB,KAAI,cAAc,SAAS,MAAM,aAAa,OAC5C,QACE,oBAAC,kBAAD;EACE,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,QAAQ,MAAM;EACd,aAAa,MAAM;EACX;EACG;EACA;EACH;EAEP;EACgB;AAKvB,QAAO,oBAAC,YAAD,EAAY,OAAM,mDAAoD"}

package/dist/react/genie/genie-chat-input.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime287 from "react/jsx-runtime";
+
+//#region src/react/genie/genie-chat-input.d.ts
+interface GenieChatInputProps {
+  /** Callback fired when the user submits a message */
+  onSend: (content: string) => void;
+  /** Disable the input and send button */
+  disabled?: boolean;
+  /** Placeholder text shown in the textarea */
+  placeholder?: string;
+  /** Additional CSS class for the container */
+  className?: string;
+}
+/** Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline). */
+declare function GenieChatInput({
+  onSend,
+  disabled,
+  placeholder,
+  className
+}: GenieChatInputProps): react_jsx_runtime287.JSX.Element;
+//#endregion
+export { GenieChatInput };
+//# sourceMappingURL=genie-chat-input.d.ts.map

package/dist/react/genie/genie-chat-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"genie-chat-input.d.ts","names":[],"sources":["../../../src/react/genie/genie-chat-input.tsx"],"sourcesContent":[],"mappings":";;;UAIiB,mBAAA;;;EAAA;EAYD,QAAA,CAAA,EAAA,OAAc;EAAA;aAC5B,CAAA,EAAA,MAAA;;WAEA,CAAA,EAAA,MAAA;;;AAEoB,iBALN,cAAA,CAKM;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAAnB,mBAAmB,CAAA,EAAA,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/genie/genie-chat-input.js

@@ -0,0 +1,58 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/genie/genie-chat-input.tsx
+/** Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline). */
+function GenieChatInput({ onSend, disabled = false, placeholder = "Ask a question...", className }) {
+	const [value, setValue] = useState("");
+	const textareaRef = useRef(null);
+	const handleSubmit = () => {
+		const trimmed = value.trim();
+		if (!trimmed || disabled) return;
+		onSend(trimmed);
+		setValue("");
+		if (textareaRef.current) textareaRef.current.style.height = "auto";
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit();
+		}
+	};
+	const MAX_HEIGHT = 200;
+	const handleInput = () => {
+		const textarea = textareaRef.current;
+		if (textarea) {
+			textarea.style.height = "auto";
+			const clamped = Math.min(textarea.scrollHeight, MAX_HEIGHT);
+			textarea.style.height = `${clamped}px`;
+			textarea.style.overflowY = textarea.scrollHeight > MAX_HEIGHT ? "auto" : "hidden";
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-2 p-4 border-t shrink-0", className),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: textareaRef,
+			value,
+			onChange: (e) => setValue(e.target.value),
+			onKeyDown: handleKeyDown,
+			onInput: handleInput,
+			placeholder,
+			disabled,
+			rows: 1,
+			className: cn("flex-1 resize-none overflow-hidden rounded-md border border-input bg-background px-3 py-2", "text-sm placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50")
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: handleSubmit,
+			disabled: disabled || !value.trim(),
+			size: "default",
+			className: "self-end",
+			children: "Send"
+		})]
+	});
+}
+
+//#endregion
+export { GenieChatInput };
+//# sourceMappingURL=genie-chat-input.js.map

package/dist/react/genie/genie-chat-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"genie-chat-input.js","names":[],"sources":["../../../src/react/genie/genie-chat-input.tsx"],"sourcesContent":["import { type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../ui/button\";\n\nexport interface GenieChatInputProps {\n  /** Callback fired when the user submits a message */\n  onSend: (content: string) => void;\n  /** Disable the input and send button */\n  disabled?: boolean;\n  /** Placeholder text shown in the textarea */\n  placeholder?: string;\n  /** Additional CSS class for the container */\n  className?: string;\n}\n\n/** Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline). */\nexport function GenieChatInput({\n  onSend,\n  disabled = false,\n  placeholder = \"Ask a question...\",\n  className,\n}: GenieChatInputProps) {\n  const [value, setValue] = useState(\"\");\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const handleSubmit = () => {\n    const trimmed = value.trim();\n    if (!trimmed || disabled) return;\n    onSend(trimmed);\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSubmit();\n    }\n  };\n\n  const MAX_HEIGHT = 200;\n\n  const handleInput = () => {\n    const textarea = textareaRef.current;\n    if (textarea) {\n      textarea.style.height = \"auto\";\n      const clamped = Math.min(textarea.scrollHeight, MAX_HEIGHT);\n      textarea.style.height = `${clamped}px`;\n      textarea.style.overflowY =\n        textarea.scrollHeight > MAX_HEIGHT ? \"auto\" : \"hidden\";\n    }\n  };\n\n  return (\n    <div className={cn(\"flex gap-2 p-4 border-t shrink-0\", className)}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onInput={handleInput}\n        placeholder={placeholder}\n        disabled={disabled}\n        rows={1}\n        className={cn(\n          \"flex-1 resize-none overflow-hidden rounded-md border border-input bg-background px-3 py-2\",\n          \"text-sm placeholder:text-muted-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n        )}\n      />\n      <Button\n        onClick={handleSubmit}\n        disabled={disabled || !value.trim()}\n        size=\"default\"\n        className=\"self-end\"\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,eAAe,EAC7B,QACA,WAAW,OACX,cAAc,qBACd,aACsB;CACtB,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,cAAc,OAA4B,KAAK;CAErD,MAAM,qBAAqB;EACzB,MAAM,UAAU,MAAM,MAAM;AAC5B,MAAI,CAAC,WAAW,SAAU;AAC1B,SAAO,QAAQ;AACf,WAAS,GAAG;AACZ,MAAI,YAAY,QACd,aAAY,QAAQ,MAAM,SAAS;;CAIvC,MAAM,iBAAiB,MAA0C;AAC/D,MAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACpC,KAAE,gBAAgB;AAClB,iBAAc;;;CAIlB,MAAM,aAAa;CAEnB,MAAM,oBAAoB;EACxB,MAAM,WAAW,YAAY;AAC7B,MAAI,UAAU;AACZ,YAAS,MAAM,SAAS;GACxB,MAAM,UAAU,KAAK,IAAI,SAAS,cAAc,WAAW;AAC3D,YAAS,MAAM,SAAS,GAAG,QAAQ;AACnC,YAAS,MAAM,YACb,SAAS,eAAe,aAAa,SAAS;;;AAIpD,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,oCAAoC,UAAU;YAAjE,CACE,oBAAC,YAAD;GACE,KAAK;GACE;GACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,WAAW;GACX,SAAS;GACI;GACH;GACV,MAAM;GACN,WAAW,GACT,6FACA,6CACA,2EACA,kDACD;GACD,GACF,oBAAC,QAAD;GACE,SAAS;GACT,UAAU,YAAY,CAAC,MAAM,MAAM;GACnC,MAAK;GACL,WAAU;aACX;GAEQ,EACL"}

package/dist/react/genie/genie-chat-message-list.d.ts

@@ -0,0 +1,21 @@
+import { GenieChatStatus, GenieMessageItem } from "./types.js";
+import * as react_jsx_runtime289 from "react/jsx-runtime";
+
+//#region src/react/genie/genie-chat-message-list.d.ts
+interface GenieChatMessageListProps {
+  /** Array of messages to display */
+  messages: GenieMessageItem[];
+  /** Current chat status (controls loading indicators and skeleton placeholders) */
+  status: GenieChatStatus;
+  /** Additional CSS class for the scroll area */
+  className?: string;
+}
+/** Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator. */
+declare function GenieChatMessageList({
+  messages,
+  status,
+  className
+}: GenieChatMessageListProps): react_jsx_runtime289.JSX.Element;
+//#endregion
+export { GenieChatMessageList };
+//# sourceMappingURL=genie-chat-message-list.d.ts.map

package/dist/react/genie/genie-chat-message-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"genie-chat-message-list.d.ts","names":[],"sources":["../../../src/react/genie/genie-chat-message-list.tsx"],"sourcesContent":[],"mappings":";;;;UAQiB,yBAAA;;YAEL;EAFK;EAAyB,MAAA,EAIhC,eAJgC;;WAIhC,CAAA,EAAA,MAAA;;AA8BV;AAAoC,iBAApB,oBAAA,CAAoB;EAAA,QAAA;EAAA,MAAA;EAAA;AAAA,CAAA,EAIjC,yBAJiC,CAAA,EAIR,oBAAA,CAAA,GAAA,CAAA,OAJQ"}

package/dist/react/genie/genie-chat-message-list.js

@@ -0,0 +1,64 @@
+import { cn } from "../lib/utils.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { Spinner } from "../ui/spinner.js";
+import { GenieChatMessage } from "./genie-chat-message.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/genie/genie-chat-message-list.tsx
+const STATUS_LABELS = {
+	ASKING_AI: "Asking AI...",
+	EXECUTING_QUERY: "Executing query...",
+	FILTERING_RESULTS: "Filtering results...",
+	COMPLETED: "Done"
+};
+function formatStatus(status) {
+	return STATUS_LABELS[status] ?? status.replace(/_/g, " ").toLowerCase();
+}
+function StreamingIndicator({ messages }) {
+	const last = messages[messages.length - 1];
+	if (last?.role === "assistant" && last.id === "") return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 text-sm text-muted-foreground px-11",
+		children: [/* @__PURE__ */ jsx(Spinner, { className: "h-3 w-3" }), /* @__PURE__ */ jsx("span", { children: formatStatus(last.status) })]
+	});
+	return null;
+}
+/** Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator. */
+function GenieChatMessageList({ messages, status, className }) {
+	const scrollRef = useRef(null);
+	useEffect(() => {
+		const viewport = scrollRef.current?.querySelector("[data-slot=\"scroll-area-viewport\"]");
+		if (viewport) viewport.scrollTop = viewport.scrollHeight;
+	}, [messages.length, status]);
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		ref: scrollRef,
+		className: cn("flex-1 min-h-0 p-4", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				status === "loading-history" && messages.length === 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-4",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-3/4" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-4/5 self-start" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-2/3 self-end" })
+					]
+				}),
+				messages.map((msg) => {
+					if (msg.role === "assistant" && msg.id === "" && !msg.content) return null;
+					return /* @__PURE__ */ jsx(GenieChatMessage, { message: msg }, msg.id);
+				}),
+				status === "streaming" && messages.length > 0 && /* @__PURE__ */ jsx(StreamingIndicator, { messages }),
+				messages.length === 0 && status === "idle" && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full text-muted-foreground text-sm py-12",
+					children: "Start a conversation by typing a question below."
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { GenieChatMessageList };
+//# sourceMappingURL=genie-chat-message-list.js.map

package/dist/react/genie/genie-chat-message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"genie-chat-message-list.js","names":[],"sources":["../../../src/react/genie/genie-chat-message-list.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport { Skeleton } from \"../ui/skeleton\";\nimport { Spinner } from \"../ui/spinner\";\nimport { GenieChatMessage } from \"./genie-chat-message\";\nimport type { GenieChatStatus, GenieMessageItem } from \"./types\";\n\nexport interface GenieChatMessageListProps {\n  /** Array of messages to display */\n  messages: GenieMessageItem[];\n  /** Current chat status (controls loading indicators and skeleton placeholders) */\n  status: GenieChatStatus;\n  /** Additional CSS class for the scroll area */\n  className?: string;\n}\n\nconst STATUS_LABELS: Record<string, string> = {\n  ASKING_AI: \"Asking AI...\",\n  EXECUTING_QUERY: \"Executing query...\",\n  FILTERING_RESULTS: \"Filtering results...\",\n  COMPLETED: \"Done\",\n};\n\nfunction formatStatus(status: string): string {\n  return STATUS_LABELS[status] ?? status.replace(/_/g, \" \").toLowerCase();\n}\n\nfunction StreamingIndicator({ messages }: { messages: GenieMessageItem[] }) {\n  const last = messages[messages.length - 1];\n  if (last?.role === \"assistant\" && last.id === \"\") {\n    return (\n      <div className=\"flex items-center gap-2 text-sm text-muted-foreground px-11\">\n        <Spinner className=\"h-3 w-3\" />\n        <span>{formatStatus(last.status)}</span>\n      </div>\n    );\n  }\n  return null;\n}\n\n/** Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator. */\nexport function GenieChatMessageList({\n  messages,\n  status,\n  className,\n}: GenieChatMessageListProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Scroll only the ScrollArea viewport, not the page\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional triggers for auto-scroll\n  useEffect(() => {\n    const viewport = scrollRef.current?.querySelector<HTMLElement>(\n      '[data-slot=\"scroll-area-viewport\"]',\n    );\n    if (viewport) {\n      viewport.scrollTop = viewport.scrollHeight;\n    }\n  }, [messages.length, status]);\n\n  return (\n    <ScrollArea ref={scrollRef} className={cn(\"flex-1 min-h-0 p-4\", className)}>\n      <div className=\"flex flex-col gap-4\">\n        {status === \"loading-history\" && messages.length === 0 && (\n          <div className=\"flex flex-col gap-4\">\n            <Skeleton className=\"h-12 w-3/4\" />\n            <Skeleton className=\"h-20 w-4/5 self-start\" />\n            <Skeleton className=\"h-12 w-2/3 self-end\" />\n          </div>\n        )}\n\n        {messages.map((msg) => {\n          if (msg.role === \"assistant\" && msg.id === \"\" && !msg.content) {\n            return null;\n          }\n          return <GenieChatMessage key={msg.id} message={msg} />;\n        })}\n\n        {status === \"streaming\" && messages.length > 0 && (\n          <StreamingIndicator messages={messages} />\n        )}\n\n        {messages.length === 0 && status === \"idle\" && (\n          <div className=\"flex items-center justify-center h-full text-muted-foreground text-sm py-12\">\n            Start a conversation by typing a question below.\n          </div>\n        )}\n      </div>\n    </ScrollArea>\n  );\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAM,gBAAwC;CAC5C,WAAW;CACX,iBAAiB;CACjB,mBAAmB;CACnB,WAAW;CACZ;AAED,SAAS,aAAa,QAAwB;AAC5C,QAAO,cAAc,WAAW,OAAO,QAAQ,MAAM,IAAI,CAAC,aAAa;;AAGzE,SAAS,mBAAmB,EAAE,YAA8C;CAC1E,MAAM,OAAO,SAAS,SAAS,SAAS;AACxC,KAAI,MAAM,SAAS,eAAe,KAAK,OAAO,GAC5C,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,WAAU,WAAY,GAC/B,oBAAC,QAAD,YAAO,aAAa,KAAK,OAAO,EAAQ,EACpC;;AAGV,QAAO;;;AAIT,SAAgB,qBAAqB,EACnC,UACA,QACA,aAC4B;CAC5B,MAAM,YAAY,OAAuB,KAAK;AAI9C,iBAAgB;EACd,MAAM,WAAW,UAAU,SAAS,cAClC,uCACD;AACD,MAAI,SACF,UAAS,YAAY,SAAS;IAE/B,CAAC,SAAS,QAAQ,OAAO,CAAC;AAE7B,QACE,oBAAC,YAAD;EAAY,KAAK;EAAW,WAAW,GAAG,sBAAsB,UAAU;YACxE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,WAAW,qBAAqB,SAAS,WAAW,KACnD,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,UAAD,EAAU,WAAU,cAAe;MACnC,oBAAC,UAAD,EAAU,WAAU,yBAA0B;MAC9C,oBAAC,UAAD,EAAU,WAAU,uBAAwB;MACxC;;IAGP,SAAS,KAAK,QAAQ;AACrB,SAAI,IAAI,SAAS,eAAe,IAAI,OAAO,MAAM,CAAC,IAAI,QACpD,QAAO;AAET,YAAO,oBAAC,kBAAD,EAA+B,SAAS,KAAO,EAAxB,IAAI,GAAoB;MACtD;IAED,WAAW,eAAe,SAAS,SAAS,KAC3C,oBAAC,oBAAD,EAA8B,UAAY;IAG3C,SAAS,WAAW,KAAK,WAAW,UACnC,oBAAC,OAAD;KAAK,WAAU;eAA8E;KAEvF;IAEJ;;EACK"}

package/dist/react/genie/genie-chat-message.d.ts

@@ -0,0 +1,18 @@
+import { GenieMessageItem } from "./types.js";
+import * as react_jsx_runtime288 from "react/jsx-runtime";
+
+//#region src/react/genie/genie-chat-message.d.ts
+interface GenieChatMessageProps {
+  /** The message object to render */
+  message: GenieMessageItem;
+  /** Additional CSS class */
+  className?: string;
+}
+/** Renders a single Genie message bubble with optional expandable SQL query attachments. */
+declare function GenieChatMessage({
+  message,
+  className
+}: GenieChatMessageProps): react_jsx_runtime288.JSX.Element;
+//#endregion
+export { GenieChatMessage };
+//# sourceMappingURL=genie-chat-message.d.ts.map

package/dist/react/genie/genie-chat-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"genie-chat-message.d.ts","names":[],"sources":["../../../src/react/genie/genie-chat-message.tsx"],"sourcesContent":[],"mappings":";;;;UAyBiB,qBAAA;;WAEN;EAFM;EAYD,SAAA,CAAA,EAAA,MAAA;;;AAEd,iBAFc,gBAAA,CAEd;EAAA,OAAA;EAAA;AAAA,CAAA,EACC,qBADD,CAAA,EACsB,oBAAA,CAAA,GAAA,CAAA,OADtB"}