@sqlrooms/vega 0.29.0-rc.2 → 0.29.0-rc.3

package/dist/VegaChartToolResult.d.ts

@@ -1,4 +1,4 @@
-import type { ToolRendererProps } from '@sqlrooms/ai';
+import type { ToolRendererProps } from '@sqlrooms/ai-core';
 import { ReactNode } from 'react';
 import { EmbedOptions } from 'vega-embed';
 import { EditorMode } from './editor/types';
@@ -16,5 +16,5 @@ export type VegaChartToolResultProps = ToolRendererProps<VegaChartToolOutput, Ve
  * Renders a chart tool call with visualization using Vega-Lite.
  * Shows read-only editors for inspecting spec and SQL.
  */
-export declare function VegaChartToolResult({ className, output, options, editorMode, }: VegaChartToolResultProps): ReactNode;
+export declare function VegaChartToolResult({ className, input, output, options, editorMode, }: VegaChartToolResultProps): ReactNode;
 //# sourceMappingURL=VegaChartToolResult.d.ts.map

package/dist/VegaChartToolResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,YAAY,EAAoB,MAAM,YAAY,CAAC;AAG3D,OAAO,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAC1C,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CACtD,mBAAmB,EACnB,uBAAuB,CACxB,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAmB,GACpB,EAAE,wBAAwB,GAAG,SAAS,CA2BtC"}
+{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,YAAY,EAAoB,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG1C,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CACtD,mBAAmB,EACnB,uBAAuB,CACxB,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAmB,GACpB,EAAE,wBAAwB,GAAG,SAAS,CAgCtC"}

package/dist/VegaChartToolResult.js

@@ -9,12 +9,12 @@ import { VegaLiteArrowChart } from './VegaLiteArrowChart';
  * Renders a chart tool call with visualization using Vega-Lite.
  * Shows read-only editors for inspecting spec and SQL.
  */
-export function VegaChartToolResult({ className, output, options, editorMode = 'both', }) {
+export function VegaChartToolResult({ className, input, output, options, editorMode = 'both', }) {
     const sqlQuery = output?.sqlQuery ?? '';
     const vegaLiteSpec = output?.vegaLiteSpec;
     if (!vegaLiteSpec) {
         return null;
     }
-    return (_jsx("div", { className: cn('flex max-w-full flex-col gap-2', className), children: _jsx(VegaChartContainer, { spec: vegaLiteSpec, sqlQuery: sqlQuery, options: options, editable: false, children: _jsx("div", { className: "relative max-w-full overflow-x-auto", children: _jsx(VegaChartDisplay, { aspectRatio: 16 / 9, className: "pt-2", children: _jsxs(VegaLiteArrowChart.Actions, { className: "right-3", children: [_jsx(VegaExportAction, {}), _jsx(VegaEditAction, { editorMode: editorMode })] }) }) }) }) }));
+    return (_jsxs("div", { className: cn('flex max-w-full flex-col gap-2', className), children: [input?.reasoning && (_jsx("p", { className: "text-tiny text-muted-foreground ml-4", children: input.reasoning })), _jsx(VegaChartContainer, { spec: vegaLiteSpec, sqlQuery: sqlQuery, options: options, editable: false, children: _jsx("div", { className: "relative max-w-full overflow-x-auto", children: _jsx(VegaChartDisplay, { aspectRatio: 16 / 9, className: "pt-2", children: _jsxs(VegaLiteArrowChart.Actions, { className: "right-3", children: [_jsx(VegaExportAction, {}), _jsx(VegaEditAction, { editorMode: editorMode })] }) }) }) })] }));
 }
 //# sourceMappingURL=VegaChartToolResult.js.map

package/dist/VegaChartToolResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAM3D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAexD;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,GAAG,MAAM,GACM;IACzB,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,IAAI,EAAE,CAAC;IACxC,MAAM,YAAY,GAAG,MAAM,EAAE,YAAwC,CAAC;IAEtE,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,YAC7D,KAAC,kBAAkB,IACjB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,YAEf,cAAK,SAAS,EAAC,qCAAqC,YAClD,KAAC,gBAAgB,IAAC,WAAW,EAAE,EAAE,GAAG,CAAC,EAAE,SAAS,EAAC,MAAM,YACrD,MAAC,kBAAkB,CAAC,OAAO,IAAC,SAAS,EAAC,SAAS,aAC7C,KAAC,gBAAgB,KAAG,EACpB,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,GAAI,IACf,GACZ,GACf,GACa,GACjB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type {ToolRendererProps} from '@sqlrooms/ai';\nimport {cn} from '@sqlrooms/ui';\nimport {ReactNode} from 'react';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport {EditorMode} from './editor/types';\nimport type {\n  VegaChartToolOutput,\n  VegaChartToolParameters,\n} from './VegaChartTool';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\n\nexport type VegaChartToolResultProps = ToolRendererProps<\n  VegaChartToolOutput,\n  VegaChartToolParameters\n> & {\n  className?: string;\n  options?: EmbedOptions;\n  /**\n   * Which editors to show when viewing\n   * @default 'both'\n   */\n  editorMode?: EditorMode;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite.\n * Shows read-only editors for inspecting spec and SQL.\n */\nexport function VegaChartToolResult({\n  className,\n  output,\n  options,\n  editorMode = 'both',\n}: VegaChartToolResultProps): ReactNode {\n  const sqlQuery = output?.sqlQuery ?? '';\n  const vegaLiteSpec = output?.vegaLiteSpec as VisualizationSpec | null;\n\n  if (!vegaLiteSpec) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex max-w-full flex-col gap-2', className)}>\n      <VegaChartContainer\n        spec={vegaLiteSpec}\n        sqlQuery={sqlQuery}\n        options={options}\n        editable={false}\n      >\n        <div className=\"relative max-w-full overflow-x-auto\">\n          <VegaChartDisplay aspectRatio={16 / 9} className=\"pt-2\">\n            <VegaLiteArrowChart.Actions className=\"right-3\">\n              <VegaExportAction />\n              <VegaEditAction editorMode={editorMode} />\n            </VegaLiteArrowChart.Actions>\n          </VegaChartDisplay>\n        </div>\n      </VegaChartContainer>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAIhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAK3D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAexD;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,GAAG,MAAM,GACM;IACzB,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,IAAI,EAAE,CAAC;IACxC,MAAM,YAAY,GAAG,MAAM,EAAE,YAAwC,CAAC;IAEtE,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,aAC5D,KAAK,EAAE,SAAS,IAAI,CACnB,YAAG,SAAS,EAAC,sCAAsC,YAChD,KAAK,CAAC,SAAS,GACd,CACL,EACD,KAAC,kBAAkB,IACjB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,YAEf,cAAK,SAAS,EAAC,qCAAqC,YAClD,KAAC,gBAAgB,IAAC,WAAW,EAAE,EAAE,GAAG,CAAC,EAAE,SAAS,EAAC,MAAM,YACrD,MAAC,kBAAkB,CAAC,OAAO,IAAC,SAAS,EAAC,SAAS,aAC7C,KAAC,gBAAgB,KAAG,EACpB,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,GAAI,IACf,GACZ,GACf,GACa,IACjB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type {ToolRendererProps} from '@sqlrooms/ai-core';\nimport {cn} from '@sqlrooms/ui';\nimport {ReactNode} from 'react';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {EditorMode} from './editor/types';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport type {\n  VegaChartToolOutput,\n  VegaChartToolParameters,\n} from './VegaChartTool';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\n\nexport type VegaChartToolResultProps = ToolRendererProps<\n  VegaChartToolOutput,\n  VegaChartToolParameters\n> & {\n  className?: string;\n  options?: EmbedOptions;\n  /**\n   * Which editors to show when viewing\n   * @default 'both'\n   */\n  editorMode?: EditorMode;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite.\n * Shows read-only editors for inspecting spec and SQL.\n */\nexport function VegaChartToolResult({\n  className,\n  input,\n  output,\n  options,\n  editorMode = 'both',\n}: VegaChartToolResultProps): ReactNode {\n  const sqlQuery = output?.sqlQuery ?? '';\n  const vegaLiteSpec = output?.vegaLiteSpec as VisualizationSpec | null;\n\n  if (!vegaLiteSpec) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex max-w-full flex-col gap-2', className)}>\n      {input?.reasoning && (\n        <p className=\"text-tiny text-muted-foreground ml-4\">\n          {input.reasoning}\n        </p>\n      )}\n      <VegaChartContainer\n        spec={vegaLiteSpec}\n        sqlQuery={sqlQuery}\n        options={options}\n        editable={false}\n      >\n        <div className=\"relative max-w-full overflow-x-auto\">\n          <VegaChartDisplay aspectRatio={16 / 9} className=\"pt-2\">\n            <VegaLiteArrowChart.Actions className=\"right-3\">\n              <VegaExportAction />\n              <VegaEditAction editorMode={editorMode} />\n            </VegaLiteArrowChart.Actions>\n          </VegaChartDisplay>\n        </div>\n      </VegaChartContainer>\n    </div>\n  );\n}\n"]}

package/dist/VegaLiteArrowChart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToolErrorMessage } from '@sqlrooms/ai';
+import { ToolErrorMessage } from '@sqlrooms/ai-core';
 import { arrowTableToJson } from '@sqlrooms/duckdb';
 import { AspectRatio, cn, useAspectRatioDimensions, useTheme, } from '@sqlrooms/ui';
 import { safeJsonParse } from '@sqlrooms/utils';

package/dist/VegaLiteArrowChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteArrowChart.js","sourceRoot":"","sources":["../src/VegaLiteArrowChart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai';\nimport {arrowTableToJson} from '@sqlrooms/duckdb';\nimport {\n  AspectRatio,\n  cn,\n  useAspectRatioDimensions,\n  useTheme,\n} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport * as arrow from 'apache-arrow';\nimport {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport {useVegaEmbed} from 'react-vega';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {Config} from 'vega-lite';\nimport {darkTheme} from './themes/darkTheme';\nimport {lightTheme} from './themes/lightTheme';\nimport {VegaChartActions} from './VegaChartActions';\nimport {VegaChartContextProvider} from './VegaChartContext';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\n\nexport type VegaLiteArrowChartProps = {\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  spec: string | VisualizationSpec;\n  options?: EmbedOptions;\n  arrowTable: arrow.Table | undefined;\n  /**\n   * Children for composing actions and other elements.\n   * Use VegaLiteArrowChart.Actions to add action buttons.\n   *\n   * @example\n   * ```tsx\n   * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n   *   <VegaLiteArrowChart.Actions>\n   *     <VegaExportAction />\n   *   </VegaLiteArrowChart.Actions>\n   * </VegaLiteArrowChart>\n   * ```\n   */\n  children?: React.ReactNode;\n};\n\nexport function makeDefaultVegaLiteOptions(\n  options?: EmbedOptions,\n): EmbedOptions {\n  return {\n    mode: 'vega-lite',\n    renderer: 'svg',\n    theme: undefined,\n    tooltip: true,\n    actions: false,\n    padding: {\n      top: 20,\n      right: 10,\n      bottom: 10,\n      left: 10,\n    },\n    ...options,\n  };\n}\n\nconst VegaLiteArrowChartBase: React.FC<VegaLiteArrowChartProps> = ({\n  className,\n  aspectRatio = 16 / 9,\n  spec,\n  arrowTable,\n  options: propsOptions,\n  width = 'auto',\n  height = 'auto',\n  children,\n}) => {\n  const {theme} = useTheme();\n\n  const options = useMemo(\n    () =>\n      makeDefaultVegaLiteOptions({\n        config: {\n          ...(theme === 'dark' ? darkTheme : lightTheme),\n          ...(typeof propsOptions?.config === 'object'\n            ? (propsOptions.config as Config)\n            : {}),\n        },\n\n        ...propsOptions,\n      }),\n    [theme, propsOptions],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [chartError, setChartError] = useState<Error | null>(null);\n\n  const data = useMemo(() => {\n    if (!arrowTable) return null;\n    return {values: arrowTableToJson(arrowTable)};\n  }, [arrowTable]);\n\n  const specWithData = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) {\n      setChartError(new Error('Invalid Vega-Lite specification'));\n      return null;\n    }\n    return {\n      padding: 10,\n      background: 'transparent',\n      ...parsed,\n      data: data,\n      // Override the following props to ensure the chart is responsive\n      width: 'container',\n      height: 'container',\n      autosize: {contains: 'padding'},\n    } as VisualizationSpec;\n  }, [spec, data]);\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    setChartError(null);\n  }, [spec, data]);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const embed = useVegaEmbed({\n    ref,\n    spec: specWithData ?? '',\n    onError: () => setChartError,\n    options,\n  });\n\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n  const changeDimensions = useCallback(\n    (width: number, height: number) => {\n      embed?.view.width(width).height(height).runAsync();\n    },\n    [embed],\n  );\n  useEffect(() => {\n    changeDimensions(dimensions.width, dimensions.height);\n  }, [changeDimensions, dimensions.width, dimensions.height]);\n\n  return (\n    <VegaChartContextProvider value={{embed}}>\n      <div\n        ref={containerRef}\n        className={cn('relative flex h-full w-full flex-col gap-2', className)}\n      >\n        <div className=\"peer relative\">\n          {chartError ? (\n            <ToolErrorMessage\n              error={chartError}\n              triggerLabel=\"Chart rendering failed\"\n              title=\"Chart error\"\n              align=\"start\"\n              details={spec}\n            />\n          ) : (\n            specWithData &&\n            data && (\n              <AspectRatio\n                ratio={aspectRatio}\n                className=\"overflow-visible\"\n                asChild\n              >\n                <div ref={ref} className=\"[&_svg]:overflow-visible\" />\n              </AspectRatio>\n            )\n          )}\n        </div>\n        {children}\n      </div>\n    </VegaChartContextProvider>\n  );\n};\n\n/**\n * Composable Vega-Lite chart component with support for custom actions.\n *\n * @example\n * ```tsx\n * // Basic usage without actions (backwards compatible)\n * <VegaLiteArrowChart spec={spec} arrowTable={data} />\n *\n * // With export action\n * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n *   <VegaLiteArrowChart.Actions>\n *     <VegaExportAction />\n *   </VegaLiteArrowChart.Actions>\n * </VegaLiteArrowChart>\n *\n * // Custom actions with separator\n * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n *   <VegaLiteArrowChart.Actions>\n *     <VegaExportAction pngScale={3} />\n *     <Separator orientation=\"vertical\" className=\"h-4\" />\n *     <Button size=\"xs\" variant=\"ghost\" onClick={handleRefresh}>\n *       <RefreshCw className=\"h-4 w-4\" />\n *     </Button>\n *   </VegaLiteArrowChart.Actions>\n * </VegaLiteArrowChart>\n * ```\n */\nexport const VegaLiteArrowChart = Object.assign(VegaLiteArrowChartBase, {\n  /**\n   * Container for action buttons, positioned as an overlay\n   */\n  Actions: VegaChartActions,\n  /**\n   * Built-in export action with PNG/SVG download\n   */\n  ExportAction: VegaExportAction,\n  /**\n   * Built-in edit action with spec/SQL editor popover\n   */\n  EditAction: VegaEditAction,\n});\n"]}
+{"version":3,"file":"VegaLiteArrowChart.js","sourceRoot":"","sources":["../src/VegaLiteArrowChart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai-core';\nimport {arrowTableToJson} from '@sqlrooms/duckdb';\nimport {\n  AspectRatio,\n  cn,\n  useAspectRatioDimensions,\n  useTheme,\n} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport * as arrow from 'apache-arrow';\nimport {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport {useVegaEmbed} from 'react-vega';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {Config} from 'vega-lite';\nimport {darkTheme} from './themes/darkTheme';\nimport {lightTheme} from './themes/lightTheme';\nimport {VegaChartActions} from './VegaChartActions';\nimport {VegaChartContextProvider} from './VegaChartContext';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\n\nexport type VegaLiteArrowChartProps = {\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  spec: string | VisualizationSpec;\n  options?: EmbedOptions;\n  arrowTable: arrow.Table | undefined;\n  /**\n   * Children for composing actions and other elements.\n   * Use VegaLiteArrowChart.Actions to add action buttons.\n   *\n   * @example\n   * ```tsx\n   * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n   *   <VegaLiteArrowChart.Actions>\n   *     <VegaExportAction />\n   *   </VegaLiteArrowChart.Actions>\n   * </VegaLiteArrowChart>\n   * ```\n   */\n  children?: React.ReactNode;\n};\n\nexport function makeDefaultVegaLiteOptions(\n  options?: EmbedOptions,\n): EmbedOptions {\n  return {\n    mode: 'vega-lite',\n    renderer: 'svg',\n    theme: undefined,\n    tooltip: true,\n    actions: false,\n    padding: {\n      top: 20,\n      right: 10,\n      bottom: 10,\n      left: 10,\n    },\n    ...options,\n  };\n}\n\nconst VegaLiteArrowChartBase: React.FC<VegaLiteArrowChartProps> = ({\n  className,\n  aspectRatio = 16 / 9,\n  spec,\n  arrowTable,\n  options: propsOptions,\n  width = 'auto',\n  height = 'auto',\n  children,\n}) => {\n  const {theme} = useTheme();\n\n  const options = useMemo(\n    () =>\n      makeDefaultVegaLiteOptions({\n        config: {\n          ...(theme === 'dark' ? darkTheme : lightTheme),\n          ...(typeof propsOptions?.config === 'object'\n            ? (propsOptions.config as Config)\n            : {}),\n        },\n\n        ...propsOptions,\n      }),\n    [theme, propsOptions],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [chartError, setChartError] = useState<Error | null>(null);\n\n  const data = useMemo(() => {\n    if (!arrowTable) return null;\n    return {values: arrowTableToJson(arrowTable)};\n  }, [arrowTable]);\n\n  const specWithData = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) {\n      setChartError(new Error('Invalid Vega-Lite specification'));\n      return null;\n    }\n    return {\n      padding: 10,\n      background: 'transparent',\n      ...parsed,\n      data: data,\n      // Override the following props to ensure the chart is responsive\n      width: 'container',\n      height: 'container',\n      autosize: {contains: 'padding'},\n    } as VisualizationSpec;\n  }, [spec, data]);\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    setChartError(null);\n  }, [spec, data]);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const embed = useVegaEmbed({\n    ref,\n    spec: specWithData ?? '',\n    onError: () => setChartError,\n    options,\n  });\n\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n  const changeDimensions = useCallback(\n    (width: number, height: number) => {\n      embed?.view.width(width).height(height).runAsync();\n    },\n    [embed],\n  );\n  useEffect(() => {\n    changeDimensions(dimensions.width, dimensions.height);\n  }, [changeDimensions, dimensions.width, dimensions.height]);\n\n  return (\n    <VegaChartContextProvider value={{embed}}>\n      <div\n        ref={containerRef}\n        className={cn('relative flex h-full w-full flex-col gap-2', className)}\n      >\n        <div className=\"peer relative\">\n          {chartError ? (\n            <ToolErrorMessage\n              error={chartError}\n              triggerLabel=\"Chart rendering failed\"\n              title=\"Chart error\"\n              align=\"start\"\n              details={spec}\n            />\n          ) : (\n            specWithData &&\n            data && (\n              <AspectRatio\n                ratio={aspectRatio}\n                className=\"overflow-visible\"\n                asChild\n              >\n                <div ref={ref} className=\"[&_svg]:overflow-visible\" />\n              </AspectRatio>\n            )\n          )}\n        </div>\n        {children}\n      </div>\n    </VegaChartContextProvider>\n  );\n};\n\n/**\n * Composable Vega-Lite chart component with support for custom actions.\n *\n * @example\n * ```tsx\n * // Basic usage without actions (backwards compatible)\n * <VegaLiteArrowChart spec={spec} arrowTable={data} />\n *\n * // With export action\n * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n *   <VegaLiteArrowChart.Actions>\n *     <VegaExportAction />\n *   </VegaLiteArrowChart.Actions>\n * </VegaLiteArrowChart>\n *\n * // Custom actions with separator\n * <VegaLiteArrowChart spec={spec} arrowTable={data}>\n *   <VegaLiteArrowChart.Actions>\n *     <VegaExportAction pngScale={3} />\n *     <Separator orientation=\"vertical\" className=\"h-4\" />\n *     <Button size=\"xs\" variant=\"ghost\" onClick={handleRefresh}>\n *       <RefreshCw className=\"h-4 w-4\" />\n *     </Button>\n *   </VegaLiteArrowChart.Actions>\n * </VegaLiteArrowChart>\n * ```\n */\nexport const VegaLiteArrowChart = Object.assign(VegaLiteArrowChartBase, {\n  /**\n   * Container for action buttons, positioned as an overlay\n   */\n  Actions: VegaChartActions,\n  /**\n   * Built-in export action with PNG/SVG download\n   */\n  ExportAction: VegaExportAction,\n  /**\n   * Built-in edit action with spec/SQL editor popover\n   */\n  EditAction: VegaEditAction,\n});\n"]}

package/dist/editor/VegaChartDisplay.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToolErrorMessage } from '@sqlrooms/ai';
+import { ToolErrorMessage } from '@sqlrooms/ai-core';
 import { useSql } from '@sqlrooms/duckdb';
 import { cn } from '@sqlrooms/ui';
 import { VegaLiteArrowChart } from '../VegaLiteArrowChart';

package/dist/editor/VegaChartDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartDisplay.js","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAkBzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAE5D,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC;IAElC,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,UAAU;KACnC,CAAC,CAAC;IAEH,wDAAwD;IACxD,MAAM,SAAS,GAAG,UAAU,IAAI,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3D,iFAAiF;IACjF,8EAA8E;IAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,CAAC;IAErD,qBAAqB;IACrB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACnD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,aAED,cAAK,SAAS,EAAC,8EAA8E,GAAG,EAChG,eAAM,SAAS,EAAC,cAAc,gCAAuB,IACjD,CACP,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/C,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,YAAY,EAAC,kBAAkB,EAC/B,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,QAAQ,GACjB,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YACvC,KAAC,kBAAkB,IACjB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,SAAS,EACrB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACU,GACjB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai';\nimport {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {VegaLiteArrowChart} from '../VegaLiteArrowChart';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaChartDisplayProps {\n  /**\n   * Custom class name for the chart container\n   */\n  className?: string;\n  /**\n   * Aspect ratio for the chart\n   * @default 16/9\n   */\n  aspectRatio?: number;\n  /**\n   * Children passed through to VegaLiteArrowChart (e.g., action components)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Chart display subcomponent for VegaLiteChart.Container.\n * Renders the Vega-Lite chart with data from SQL query or arrow table.\n *\n * Uses the parsed spec from the editor state for live preview during editing.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec} sqlQuery={query}>\n *   <VegaLiteChart.Chart />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaChartDisplay: React.FC<VegaChartDisplayProps> = ({\n  className,\n  aspectRatio = 16 / 9,\n  children,\n}) => {\n  const {state, arrowTable, options} = useVegaEditorContext();\n\n  // Use the applied SQL for chart rendering (updates when Apply is clicked)\n  const sqlQuery = state.appliedSql;\n\n  // Fetch data from SQL if no arrowTable provided\n  const sqlResult = useSql({\n    query: sqlQuery || '',\n    enabled: !!sqlQuery && !arrowTable,\n  });\n\n  // Use arrow table if provided, otherwise use SQL result\n  const chartData = arrowTable ?? sqlResult.data?.arrowTable;\n\n  // Use parsed spec for live preview, fall back to last valid spec if parse failed\n  // This ensures the chart keeps rendering during typing even with invalid JSON\n  const spec = state.parsedSpec ?? state.lastValidSpec;\n\n  // Show loading state\n  if (sqlQuery && !arrowTable && sqlResult.isLoading) {\n    return (\n      <div\n        className={cn(\n          'text-muted-foreground flex items-center justify-center',\n          className,\n        )}\n      >\n        <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\" />\n        <span className=\"ml-2 text-sm\">Loading data...</span>\n      </div>\n    );\n  }\n\n  // Show error state\n  if (sqlQuery && !arrowTable && sqlResult.error) {\n    return (\n      <div className={className}>\n        <ToolErrorMessage\n          error={sqlResult.error}\n          triggerLabel=\"SQL query failed\"\n          title=\"Query error\"\n          align=\"start\"\n          details={sqlQuery}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('relative', className)}>\n      <VegaLiteArrowChart\n        className=\"w-full\"\n        spec={spec}\n        arrowTable={chartData}\n        aspectRatio={aspectRatio}\n        options={options}\n      >\n        {children}\n      </VegaLiteArrowChart>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaChartDisplay.js","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAkBzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAE5D,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC;IAElC,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,UAAU;KACnC,CAAC,CAAC;IAEH,wDAAwD;IACxD,MAAM,SAAS,GAAG,UAAU,IAAI,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3D,iFAAiF;IACjF,8EAA8E;IAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,CAAC;IAErD,qBAAqB;IACrB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACnD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,aAED,cAAK,SAAS,EAAC,8EAA8E,GAAG,EAChG,eAAM,SAAS,EAAC,cAAc,gCAAuB,IACjD,CACP,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/C,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,YAAY,EAAC,kBAAkB,EAC/B,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,QAAQ,GACjB,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YACvC,KAAC,kBAAkB,IACjB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,SAAS,EACrB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACU,GACjB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai-core';\nimport {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {VegaLiteArrowChart} from '../VegaLiteArrowChart';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaChartDisplayProps {\n  /**\n   * Custom class name for the chart container\n   */\n  className?: string;\n  /**\n   * Aspect ratio for the chart\n   * @default 16/9\n   */\n  aspectRatio?: number;\n  /**\n   * Children passed through to VegaLiteArrowChart (e.g., action components)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Chart display subcomponent for VegaLiteChart.Container.\n * Renders the Vega-Lite chart with data from SQL query or arrow table.\n *\n * Uses the parsed spec from the editor state for live preview during editing.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec} sqlQuery={query}>\n *   <VegaLiteChart.Chart />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaChartDisplay: React.FC<VegaChartDisplayProps> = ({\n  className,\n  aspectRatio = 16 / 9,\n  children,\n}) => {\n  const {state, arrowTable, options} = useVegaEditorContext();\n\n  // Use the applied SQL for chart rendering (updates when Apply is clicked)\n  const sqlQuery = state.appliedSql;\n\n  // Fetch data from SQL if no arrowTable provided\n  const sqlResult = useSql({\n    query: sqlQuery || '',\n    enabled: !!sqlQuery && !arrowTable,\n  });\n\n  // Use arrow table if provided, otherwise use SQL result\n  const chartData = arrowTable ?? sqlResult.data?.arrowTable;\n\n  // Use parsed spec for live preview, fall back to last valid spec if parse failed\n  // This ensures the chart keeps rendering during typing even with invalid JSON\n  const spec = state.parsedSpec ?? state.lastValidSpec;\n\n  // Show loading state\n  if (sqlQuery && !arrowTable && sqlResult.isLoading) {\n    return (\n      <div\n        className={cn(\n          'text-muted-foreground flex items-center justify-center',\n          className,\n        )}\n      >\n        <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\" />\n        <span className=\"ml-2 text-sm\">Loading data...</span>\n      </div>\n    );\n  }\n\n  // Show error state\n  if (sqlQuery && !arrowTable && sqlResult.error) {\n    return (\n      <div className={className}>\n        <ToolErrorMessage\n          error={sqlResult.error}\n          triggerLabel=\"SQL query failed\"\n          title=\"Query error\"\n          align=\"start\"\n          details={sqlQuery}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('relative', className)}>\n      <VegaLiteArrowChart\n        className=\"w-full\"\n        spec={spec}\n        arrowTable={chartData}\n        aspectRatio={aspectRatio}\n        options={options}\n      >\n        {children}\n      </VegaLiteArrowChart>\n    </div>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/vega",
-  "version": "0.29.0-rc.2",
+  "version": "0.29.0-rc.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,13 +19,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/ai": "0.29.0-rc.2",
-    "@sqlrooms/codemirror": "0.29.0-rc.2",
-    "@sqlrooms/duckdb": "0.29.0-rc.2",
-    "@sqlrooms/monaco-editor": "0.29.0-rc.2",
-    "@sqlrooms/sql-editor": "0.29.0-rc.2",
-    "@sqlrooms/ui": "0.29.0-rc.2",
-    "@sqlrooms/utils": "0.29.0-rc.2",
+    "@sqlrooms/ai-core": "0.29.0-rc.3",
+    "@sqlrooms/codemirror": "0.29.0-rc.3",
+    "@sqlrooms/duckdb": "0.29.0-rc.3",
+    "@sqlrooms/monaco-editor": "0.29.0-rc.3",
+    "@sqlrooms/sql-editor": "0.29.0-rc.3",
+    "@sqlrooms/ui": "0.29.0-rc.3",
+    "@sqlrooms/utils": "0.29.0-rc.3",
     "ai": "^6.0.154",
     "lucide-react": "^0.556.0",
     "react-vega": "^8.0.0",
@@ -49,5 +49,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "5d511631992c1af8852ea79ced488867aad4a555"
+  "gitHead": "4ffaf6c31d41c27f96bd3e4f5e83d431968721c3"
 }

package/dist/VegaLiteChart.d.ts

@@ -1,44 +0,0 @@
-import * as arrow from 'apache-arrow';
-import { VisualizationSpec } from 'react-vega';
-export declare const ArrowChart: React.FC<{
-    className?: string;
-    width?: number | 'auto';
-    height?: number | 'auto';
-    aspectRatio?: number;
-    spec: string | VisualizationSpec;
-    arrowTable: arrow.Table | undefined;
-    dataName?: string;
-}>;
-export declare const VegaLiteChart: import("react").FC<{
-    className?: string;
-    width?: number | "auto";
-    height?: number | "auto";
-    aspectRatio?: number;
-    sqlQuery: string;
-    spec: string | VisualizationSpec;
-    dataName?: string;
-    lastRunTime?: number;
-    isLoading?: boolean;
-}> & {
-    SqlChart: import("react").FC<{
-        className?: string;
-        width?: number | "auto";
-        height?: number | "auto";
-        aspectRatio?: number;
-        sqlQuery: string;
-        spec: string | VisualizationSpec;
-        dataName?: string;
-        lastRunTime?: number;
-        isLoading?: boolean;
-    }>;
-    ArrowChart: import("react").FC<{
-        className?: string;
-        width?: number | "auto";
-        height?: number | "auto";
-        aspectRatio?: number;
-        spec: string | VisualizationSpec;
-        arrowTable: arrow.Table | undefined;
-        dataName?: string;
-    }>;
-};
-//# sourceMappingURL=VegaLiteChart.d.ts.map

package/dist/VegaLiteChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaLiteChart.d.ts","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAW,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAmIvD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACjC,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAwEA,CAAC;AAEF,eAAO,MAAM,aAAa;gBA9JZ,MAAM;YACV,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kBACV,MAAM;cACV,MAAM;UACV,MAAM,GAAG,iBAAiB;eACrB,MAAM;kBACH,MAAM;gBACR,OAAO;;;oBARP,MAAM;gBACV,MAAM,GAAG,MAAM;iBACd,MAAM,GAAG,MAAM;sBACV,MAAM;kBACV,MAAM;cACV,MAAM,GAAG,iBAAiB;mBACrB,MAAM;sBACH,MAAM;oBACR,OAAO;;;oBAqEP,MAAM;gBACV,MAAM,GAAG,MAAM;iBACd,MAAM,GAAG,MAAM;sBACV,MAAM;cACd,MAAM,GAAG,iBAAiB;oBACpB,KAAK,CAAC,KAAK,GAAG,SAAS;mBACxB,MAAM;;CA8EjB,CAAC"}

package/dist/VegaLiteChart.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToolErrorMessage } from '@sqlrooms/ai';
-import { arrowTableToJson, useSql } from '@sqlrooms/duckdb';
-import { AspectRatio, cn, useAspectRatioDimensions } from '@sqlrooms/ui';
-import { safeJsonParse } from '@sqlrooms/utils';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { VegaLite } from 'react-vega';
-const DEFAULT_DATA_NAME = 'queryResult';
-/**
- * A component that renders a Vega-Lite chart with SQL data and responsive sizing.
- *
- * The chart can be sized in multiple ways:
- * - Fixed dimensions: Provide both width and height as numbers
- * - Fixed width, proportional height: Provide width as number, height as 'auto'
- * - Fixed height, proportional width: Provide height as number, width as 'auto'
- * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio
- *
- * @param props - The component props
- * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width
- * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio
- * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated
- * @param {string} props.sqlQuery - The SQL query to fetch data for the chart
- * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.
- *   Can be either a JSON string or a VisualizationSpec object.
- *   The data and size properties will be overridden by the component.
- *
- * @returns The rendered chart component
- *
- * @example
- * // Fixed size chart
- * <VegaLiteChart
- *   width={600}
- *   height={400}
- *   sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
- *   spec={{
- *     mark: 'bar',
- *     encoding: {
- *       x: {field: 'category', type: 'nominal'},
- *       y: {field: 'count', type: 'quantitative'}
- *     }
- *   }}
- * />
- *
- * @example
- * // Responsive chart with 16:9 aspect ratio
- * <VegaLiteChart
- *   className="max-w-[600px]"
- *   aspectRatio={16/9}
- *   sqlQuery="SELECT date, value FROM metrics"
- *   spec={{
- *     mark: 'line',
- *     encoding: {
- *       x: {field: 'date', type: 'temporal'},
- *       y: {field: 'value', type: 'quantitative'}
- *     }
- *   }}
- * />
- */
-const VegaLiteSqlChart = ({ className, width = 'auto', height = 'auto', aspectRatio, sqlQuery, spec, dataName = DEFAULT_DATA_NAME, lastRunTime, isLoading, }) => {
-    const containerRef = useRef(null);
-    const dimensions = useAspectRatioDimensions({
-        containerRef,
-        width,
-        height,
-        aspectRatio,
-    });
-    const { width: adjustedWidth, height: adjustedHeight } = dimensions;
-    const refinedSpec = useMemo(() => {
-        const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;
-        if (!parsed)
-            return null;
-        return {
-            ...parsed,
-            data: { name: dataName },
-            width: adjustedWidth,
-            height: adjustedHeight,
-            autosize: {
-                type: 'fit',
-                contains: 'padding',
-            },
-        };
-    }, [spec, dataName, adjustedWidth, adjustedHeight]);
-    const result = useSql({ query: sqlQuery, version: lastRunTime });
-    const arrowTable = result.data?.arrowTable;
-    const data = useMemo(() => {
-        if (!arrowTable)
-            return null;
-        return { queryResult: arrowTableToJson(arrowTable) };
-    }, [arrowTable]);
-    return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: isLoading || result.isLoading ? (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 p-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }), "Running query for chart data\u2026"] })) : refinedSpec && data ? (_jsx(AspectRatio, { ratio: aspectRatio, children: _jsx(VegaLite, { spec: refinedSpec, data: data }) })) : result.error ? (_jsx("div", { className: "whitespace-pre-wrap p-2 font-mono text-sm text-red-500", children: result.error.message })) : null }));
-};
-export const ArrowChart = ({ className, width = 'auto', height = 'auto', aspectRatio = 3 / 2, spec, arrowTable, dataName = DEFAULT_DATA_NAME, }) => {
-    const containerRef = useRef(null);
-    const [chartError, setChartError] = useState(null);
-    const dimensions = useAspectRatioDimensions({
-        containerRef,
-        width,
-        height,
-        aspectRatio,
-    });
-    const refinedSpec = useMemo(() => {
-        const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;
-        if (!parsed) {
-            setChartError(new Error('Invalid Vega-Lite specification'));
-            return null;
-        }
-        return {
-            ...parsed,
-            data: { name: dataName },
-            width: dimensions.width,
-            height: dimensions.height,
-            autosize: {
-                type: 'fit',
-                contains: 'padding',
-            },
-        };
-    }, [spec, dataName, dimensions]);
-    const data = useMemo(() => {
-        if (!arrowTable)
-            return null;
-        return { queryResult: arrowTableToJson(arrowTable) };
-    }, [arrowTable]);
-    // Reset chart error whenever spec or data changes
-    useEffect(() => {
-        setChartError(null);
-    }, [spec, data]);
-    return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: chartError ? (_jsx(ToolErrorMessage, { error: chartError, triggerLabel: "Chart rendering failed", title: "Chart error", align: "start", details: spec })) : (refinedSpec &&
-            data && (_jsx(AspectRatio, { ratio: aspectRatio, children: _jsx(VegaLite, { spec: refinedSpec, data: data, onError: setChartError }) }))) }));
-};
-export const VegaLiteChart = Object.assign(VegaLiteSqlChart, {
-    SqlChart: VegaLiteSqlChart,
-    ArrowChart: ArrowChart,
-});
-//# sourceMappingURL=VegaLiteChart.js.map

package/dist/VegaLiteChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAE,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAoB,MAAM,YAAY,CAAC;AAEvD,MAAM,iBAAiB,GAAG,aAAa,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,gBAAgB,GAUjB,CAAC,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,QAAQ,GAAG,iBAAiB,EAC5B,WAAW,EACX,SAAS,GACV,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,EAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAC,GAAG,UAAU,CAAC;IAClE,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;YACtB,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,cAAc;YACtB,QAAQ,EAAE;gBACR,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,SAAS;aACpB;SACmB,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpD,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAC,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC;IAC3C,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,EAAC,WAAW,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAC,CAAC;IACrD,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,YAEA,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAC/B,eAAK,SAAS,EAAC,kEAAkE,aAC/E,cAAK,SAAS,EAAC,8EAA8E,GAAO,0CAEhG,CACP,CAAC,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACxB,KAAC,WAAW,IAAC,KAAK,EAAE,WAAW,YAC7B,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GAC/B,CACf,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAC,wDAAwD,YACpE,MAAM,CAAC,KAAK,CAAC,OAAO,GACjB,CACP,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAQlB,CAAC,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,CAAC,GAAG,CAAC,EACnB,IAAI,EACJ,UAAU,EACV,QAAQ,GAAG,iBAAiB,GAC7B,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,aAAa,CAAC,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;YACtB,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,QAAQ,EAAE;gBACR,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,SAAS;aACpB;SACmB,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,EAAC,WAAW,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAC,CAAC;IACrD,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,kDAAkD;IAClD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,YAEA,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,gBAAgB,IACf,KAAK,EAAE,UAAU,EACjB,YAAY,EAAC,wBAAwB,EACrC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,GACb,CACH,CAAC,CAAC,CAAC,CACF,WAAW;YACX,IAAI,IAAI,CACN,KAAC,WAAW,IAAC,KAAK,EAAE,WAAW,YAC7B,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,GAAI,GACvD,CACf,CACF,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC3D,QAAQ,EAAE,gBAAgB;IAC1B,UAAU,EAAE,UAAU;CACvB,CAAC,CAAC","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai';\nimport {arrowTableToJson, useSql} from '@sqlrooms/duckdb';\nimport {AspectRatio, cn, useAspectRatioDimensions} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport * as arrow from 'apache-arrow';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {VegaLite, VisualizationSpec} from 'react-vega';\n\nconst DEFAULT_DATA_NAME = 'queryResult';\n\n/**\n * A component that renders a Vega-Lite chart with SQL data and responsive sizing.\n *\n * The chart can be sized in multiple ways:\n * - Fixed dimensions: Provide both width and height as numbers\n * - Fixed width, proportional height: Provide width as number, height as 'auto'\n * - Fixed height, proportional width: Provide height as number, width as 'auto'\n * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio\n *\n * @param props - The component props\n * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width\n * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio\n * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated\n * @param {string} props.sqlQuery - The SQL query to fetch data for the chart\n * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.\n *   Can be either a JSON string or a VisualizationSpec object.\n *   The data and size properties will be overridden by the component.\n *\n * @returns The rendered chart component\n *\n * @example\n * // Fixed size chart\n * <VegaLiteChart\n *   width={600}\n *   height={400}\n *   sqlQuery=\"SELECT category, count(*) as count FROM sales GROUP BY category\"\n *   spec={{\n *     mark: 'bar',\n *     encoding: {\n *       x: {field: 'category', type: 'nominal'},\n *       y: {field: 'count', type: 'quantitative'}\n *     }\n *   }}\n * />\n *\n * @example\n * // Responsive chart with 16:9 aspect ratio\n * <VegaLiteChart\n *   className=\"max-w-[600px]\"\n *   aspectRatio={16/9}\n *   sqlQuery=\"SELECT date, value FROM metrics\"\n *   spec={{\n *     mark: 'line',\n *     encoding: {\n *       x: {field: 'date', type: 'temporal'},\n *       y: {field: 'value', type: 'quantitative'}\n *     }\n *   }}\n * />\n */\nconst VegaLiteSqlChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  sqlQuery: string;\n  spec: string | VisualizationSpec;\n  dataName?: string;\n  lastRunTime?: number;\n  isLoading?: boolean;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio,\n  sqlQuery,\n  spec,\n  dataName = DEFAULT_DATA_NAME,\n  lastRunTime,\n  isLoading,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n  const {width: adjustedWidth, height: adjustedHeight} = dimensions;\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) return null;\n    return {\n      ...parsed,\n      data: {name: dataName},\n      width: adjustedWidth,\n      height: adjustedHeight,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dataName, adjustedWidth, adjustedHeight]);\n\n  const result = useSql({query: sqlQuery, version: lastRunTime});\n  const arrowTable = result.data?.arrowTable;\n  const data = useMemo(() => {\n    if (!arrowTable) return null;\n    return {queryResult: arrowTableToJson(arrowTable)};\n  }, [arrowTable]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {isLoading || result.isLoading ? (\n        <div className=\"text-muted-foreground flex items-center justify-center gap-2 p-2\">\n          <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n          Running query for chart data…\n        </div>\n      ) : refinedSpec && data ? (\n        <AspectRatio ratio={aspectRatio}>\n          <VegaLite spec={refinedSpec} data={data} />\n        </AspectRatio>\n      ) : result.error ? (\n        <div className=\"whitespace-pre-wrap p-2 font-mono text-sm text-red-500\">\n          {result.error.message}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport const ArrowChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  spec: string | VisualizationSpec;\n  arrowTable: arrow.Table | undefined;\n  dataName?: string;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  spec,\n  arrowTable,\n  dataName = DEFAULT_DATA_NAME,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [chartError, setChartError] = useState<Error | null>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) {\n      setChartError(new Error('Invalid Vega-Lite specification'));\n      return null;\n    }\n    return {\n      ...parsed,\n      data: {name: dataName},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dataName, dimensions]);\n\n  const data = useMemo(() => {\n    if (!arrowTable) return null;\n    return {queryResult: arrowTableToJson(arrowTable)};\n  }, [arrowTable]);\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    setChartError(null);\n  }, [spec, data]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {chartError ? (\n        <ToolErrorMessage\n          error={chartError}\n          triggerLabel=\"Chart rendering failed\"\n          title=\"Chart error\"\n          align=\"start\"\n          details={spec}\n        />\n      ) : (\n        refinedSpec &&\n        data && (\n          <AspectRatio ratio={aspectRatio}>\n            <VegaLite spec={refinedSpec} data={data} onError={setChartError} />\n          </AspectRatio>\n        )\n      )}\n    </div>\n  );\n};\n\nexport const VegaLiteChart = Object.assign(VegaLiteSqlChart, {\n  SqlChart: VegaLiteSqlChart,\n  ArrowChart: ArrowChart,\n});\n"]}