@sqlrooms/vega 0.29.0-rc.10 → 0.29.0-rc.11

package/README.md

@@ -75,7 +75,11 @@ import {
   createDefaultAiInstructions,
   createDefaultAiTools,
 } from '@sqlrooms/ai';
-import {createVegaChartTool} from '@sqlrooms/vega';
+import {
+  createVegaChartTool,
+  VegaChartToolResult,
+  type VegaChartToolResultProps,
+} from '@sqlrooms/vega';
 
 // inside your createRoomStore composer
 createAiSlice({
@@ -95,6 +99,41 @@ createAiSlice({
 - `editable`: whether users can edit SQL/spec in the chart UI
 - `editorMode`: which editors to render (`'none' | 'sql' | 'vega' | 'both'`)
 
+### AI chart result sizing
+
+`VegaChartToolResult` retains its default 16:9 layout when no sizing props are
+provided. Use `height="auto"` to opt into data-driven sizing for
+category-dense horizontal bar charts:
+
+```tsx
+const CategoryAwareChartResult = (props: VegaChartToolResultProps) => (
+  <VegaChartToolResult {...props} height="auto" />
+);
+
+createAiSlice({
+  toolRenderers: {
+    chart: CategoryAwareChartResult,
+  },
+  tools: {
+    chart: createVegaChartTool(),
+  },
+});
+```
+
+The automatic policy inspects the parsed Vega-Lite encoding and counts distinct
+values in the loaded Arrow data. Horizontal bar charts with at least 12
+categories use `clamp(280, 48 + categoryCount * 22, 800)` pixels; other charts
+continue to use `aspectRatio` (16:9 by default). Transformed and concatenated
+multi-view specs also use the aspect ratio because raw Arrow rows do not reflect
+their rendered data or panel layout. A numeric `height` fixes the outer chart
+viewport while preserving responsive width. Applications can also provide
+`getHeight={({spec, arrowTable}) => ...}` for a custom sizing policy; returning
+`'auto'` delegates to the built-in category-aware policy.
+
+Sizing is based on loaded query data rather than an LLM-provided row count, so
+it stays accurate when SQL results or application filters change. The Vega-Lite
+spec remains responsible for visualization semantics, not React layout.
+
 ### LLM invocation / Zod schema fields
 
 At runtime, the tool call payload is validated by a Zod schema.  

package/dist/VegaChartToolResult.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { EmbedOptions } from 'vega-embed';
 import { EditorMode } from './editor/types';
 import type { VegaChartToolOutput, VegaChartToolParameters } from './VegaChartTool';
+import type { VegaChartHeight, VegaChartHeightResolver } from './chartSizing';
 export type VegaChartToolResultProps = ToolRendererProps<VegaChartToolOutput, VegaChartToolParameters> & {
     className?: string;
     options?: EmbedOptions;
@@ -11,10 +12,25 @@ export type VegaChartToolResultProps = ToolRendererProps<VegaChartToolOutput, Ve
      * @default 'both'
      */
     editorMode?: EditorMode;
+    /**
+     * Width-to-height ratio used when no fixed or automatic height is selected.
+     * @default 16/9
+     */
+    aspectRatio?: number;
+    /**
+     * Fixed outer chart height, or `'auto'` to opt into category-aware sizing.
+     * Automatic sizing falls back to the aspect ratio for ordinary charts.
+     */
+    height?: VegaChartHeight;
+    /**
+     * Optional application-specific height policy. Returning `'auto'` applies
+     * the built-in category-aware sizing policy.
+     */
+    getHeight?: VegaChartHeightResolver;
 };
 /**
  * Renders a chart tool call with visualization using Vega-Lite.
  * Shows read-only editors for inspecting spec and SQL.
  */
-export declare function VegaChartToolResult({ className, input, output, options, editorMode, }: VegaChartToolResultProps): ReactNode;
+export declare function VegaChartToolResult({ className, input, output, options, editorMode, aspectRatio, height, getHeight, }: 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,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,CA8BtC"}
+{"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;AAIzB,OAAO,KAAK,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAE5E,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;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAmB,EACnB,WAAoB,EACpB,MAAM,EACN,SAAS,GACV,EAAE,wBAAwB,GAAG,SAAS,CAmCtC"}

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, input, output, options, editorMode = 'both', }) {
+export function VegaChartToolResult({ className, input, output, options, editorMode = 'both', aspectRatio = 16 / 9, height, getHeight, }) {
     const sqlQuery = output?.sqlQuery ?? '';
     const vegaLiteSpec = output?.vegaLiteSpec;
     if (!vegaLiteSpec) {
         return null;
     }
-    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", 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 })] }) }) }) })] }));
+    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", 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: aspectRatio, height: height, getHeight: getHeight, 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;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,iCAAiC,YAAE,KAAK,CAAC,SAAS,GAAK,CACrE,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\">{input.reasoning}</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"]}
+{"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;AA+BxD;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,GAAG,MAAM,EACnB,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,MAAM,EACN,SAAS,GACgB;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,iCAAiC,YAAE,KAAK,CAAC,SAAS,GAAK,CACrE,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,IACf,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,MAAM,YAEhB,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';\nimport type {VegaChartHeight, VegaChartHeightResolver} from './chartSizing';\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   * Width-to-height ratio used when no fixed or automatic height is selected.\n   * @default 16/9\n   */\n  aspectRatio?: number;\n  /**\n   * Fixed outer chart height, or `'auto'` to opt into category-aware sizing.\n   * Automatic sizing falls back to the aspect ratio for ordinary charts.\n   */\n  height?: VegaChartHeight;\n  /**\n   * Optional application-specific height policy. Returning `'auto'` applies\n   * the built-in category-aware sizing policy.\n   */\n  getHeight?: VegaChartHeightResolver;\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  aspectRatio = 16 / 9,\n  height,\n  getHeight,\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\">{input.reasoning}</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\n            aspectRatio={aspectRatio}\n            height={height}\n            getHeight={getHeight}\n            className=\"pt-2\"\n          >\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteArrowChart.d.ts","sourceRoot":"","sources":["../src/VegaLiteArrowChart.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAS3D,MAAM,MAAM,uBAAuB,GAAG;IACpC,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,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,0BAA0B,CACxC,OAAO,CAAC,EAAE,YAAY,GACrB,YAAY,CAed;AA0HD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEH,CAAC"}
+{"version":3,"file":"VegaLiteArrowChart.d.ts","sourceRoot":"","sources":["../src/VegaLiteArrowChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAS3D,MAAM,MAAM,uBAAuB,GAAG;IACpC,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,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,0BAA0B,CACxC,OAAO,CAAC,EAAE,YAAY,GACrB,YAAY,CAed;AA8ID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEH,CAAC"}

package/dist/VegaLiteArrowChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToolErrorMessage } from '@sqlrooms/ai-core';
 import { arrowTableToJson } from '@sqlrooms/duckdb';
-import { AspectRatio, cn, useAspectRatioDimensions, useTheme, } from '@sqlrooms/ui';
+import { cn, useAspectRatioDimensions, useTheme } from '@sqlrooms/ui';
 import { safeJsonParse } from '@sqlrooms/utils';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useVegaEmbed } from 'react-vega';
@@ -27,7 +27,11 @@ export function makeDefaultVegaLiteOptions(options) {
         ...options,
     };
 }
-const VegaLiteArrowChartBase = ({ className, aspectRatio = 16 / 9, spec, arrowTable, options: propsOptions, width = 'auto', height = 'auto', children, }) => {
+const VegaLiteArrowChartBase = (props) => {
+    const { className, spec, arrowTable, options: propsOptions, width = 'auto', height = 'auto', children, } = props;
+    const aspectRatio = Object.hasOwn(props, 'aspectRatio')
+        ? props.aspectRatio
+        : 16 / 9;
     const { theme } = useTheme();
     const options = useMemo(() => makeDefaultVegaLiteOptions({
         config: {
@@ -81,7 +85,7 @@ const VegaLiteArrowChartBase = ({ className, aspectRatio = 16 / 9, spec, arrowTa
         containerRef,
         width,
         height,
-        aspectRatio,
+        aspectRatio: height === 'auto' || width !== 'auto' ? aspectRatio : undefined,
     });
     const changeDimensions = useCallback((width, height) => {
         embed?.view.width(width).height(height).runAsync();
@@ -89,8 +93,15 @@ const VegaLiteArrowChartBase = ({ className, aspectRatio = 16 / 9, spec, arrowTa
     useEffect(() => {
         changeDimensions(dimensions.width, dimensions.height);
     }, [changeDimensions, dimensions.width, dimensions.height]);
-    return (_jsx(VegaChartContextProvider, { value: { embed }, children: _jsxs("div", { ref: containerRef, className: cn('relative flex h-full w-full flex-col gap-2', className), children: [_jsx("div", { className: "peer relative", children: displayError ? (_jsx(ToolErrorMessage, { error: displayError, triggerLabel: "Chart rendering failed", title: "Chart error", align: "start", details: spec })) : (specWithData &&
-                        data && (_jsx(AspectRatio, { ratio: aspectRatio, className: "overflow-visible", asChild: true, children: _jsx("div", { ref: ref, className: "[&_svg]:overflow-visible" }) }))) }), children] }) }));
+    return (_jsx(VegaChartContextProvider, { value: { embed }, children: _jsxs("div", { className: cn('relative flex w-full flex-col gap-2', className), children: [_jsx("div", { className: cn('peer relative', height === 'auto' && aspectRatio === undefined && 'h-full'), children: displayError ? (_jsx(ToolErrorMessage, { error: displayError, triggerLabel: "Chart rendering failed", title: "Chart error", align: "start", details: spec })) : (specWithData &&
+                        data && (_jsx("div", { ref: containerRef, style: {
+                            ...(height === 'auto' && aspectRatio !== undefined
+                                ? { aspectRatio }
+                                : height !== 'auto'
+                                    ? { height }
+                                    : {}),
+                            ...(width !== 'auto' ? { width } : {}),
+                        }, className: cn('overflow-visible', width === 'auto' && 'w-full', height === 'auto' && aspectRatio === undefined && 'h-full'), children: _jsx("div", { ref: ref, className: "h-full w-full [&_svg]:overflow-visible" }) }))) }), children] }) }));
 };
 /**
  * Composable Vega-Lite chart component with support for custom actions.

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-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      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  const specError = specWithData\n    ? null\n    : new Error('Invalid Vega-Lite specification');\n  const displayError = specError ?? chartError;\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\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          {displayError ? (\n            <ToolErrorMessage\n              error={displayError}\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 {cn, useAspectRatioDimensions, useTheme} 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> = (props) => {\n  const {\n    className,\n    spec,\n    arrowTable,\n    options: propsOptions,\n    width = 'auto',\n    height = 'auto',\n    children,\n  } = props;\n  const aspectRatio = Object.hasOwn(props, 'aspectRatio')\n    ? props.aspectRatio\n    : 16 / 9;\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      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  const specError = specWithData\n    ? null\n    : new Error('Invalid Vega-Lite specification');\n  const displayError = specError ?? chartError;\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\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      height === 'auto' || width !== 'auto' ? aspectRatio : undefined,\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 className={cn('relative flex w-full flex-col gap-2', className)}>\n        <div\n          className={cn(\n            'peer relative',\n            height === 'auto' && aspectRatio === undefined && 'h-full',\n          )}\n        >\n          {displayError ? (\n            <ToolErrorMessage\n              error={displayError}\n              triggerLabel=\"Chart rendering failed\"\n              title=\"Chart error\"\n              align=\"start\"\n              details={spec}\n            />\n          ) : (\n            specWithData &&\n            data && (\n              <div\n                ref={containerRef}\n                style={{\n                  ...(height === 'auto' && aspectRatio !== undefined\n                    ? {aspectRatio}\n                    : height !== 'auto'\n                      ? {height}\n                      : {}),\n                  ...(width !== 'auto' ? {width} : {}),\n                }}\n                className={cn(\n                  'overflow-visible',\n                  width === 'auto' && 'w-full',\n                  height === 'auto' && aspectRatio === undefined && 'h-full',\n                )}\n              >\n                <div\n                  ref={ref}\n                  className=\"h-full w-full [&_svg]:overflow-visible\"\n                />\n              </div>\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/chartSizing.d.ts

@@ -0,0 +1,20 @@
+import type * as arrow from 'apache-arrow';
+import type { VisualizationSpec } from 'vega-embed';
+/** Height behavior for a Vega chart result. */
+export type VegaChartHeight = number | 'auto';
+/** Data available when resolving the height of a rendered Vega chart. */
+export interface VegaChartSizingContext {
+    /** The parsed, responsive Vega-Lite specification. */
+    spec: VisualizationSpec;
+    /** The data loaded for the chart, when available. */
+    arrowTable: arrow.Table | undefined;
+}
+/** Resolves a chart height from its parsed specification and loaded data. */
+export type VegaChartHeightResolver = (context: VegaChartSizingContext) => VegaChartHeight;
+/**
+ * Computes a taller height for category-dense horizontal bar charts.
+ *
+ * Returns `'auto'` for other chart shapes so they retain aspect-ratio sizing.
+ */
+export declare function getCategoryAwareVegaChartHeight({ spec, arrowTable, }: VegaChartSizingContext): VegaChartHeight;
+//# sourceMappingURL=chartSizing.d.ts.map

package/dist/chartSizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartSizing.d.ts","sourceRoot":"","sources":["../src/chartSizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAElD,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,yEAAyE;AACzE,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,IAAI,EAAE,iBAAiB,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;CACrC;AAED,6EAA6E;AAC7E,MAAM,MAAM,uBAAuB,GAAG,CACpC,OAAO,EAAE,sBAAsB,KAC5B,eAAe,CAAC;AA8GrB;;;;GAIG;AACH,wBAAgB,+BAA+B,CAAC,EAC9C,IAAI,EACJ,UAAU,GACX,EAAE,sBAAsB,GAAG,eAAe,CAmB1C"}

package/dist/chartSizing.js

@@ -0,0 +1,103 @@
+const MIN_CATEGORY_COUNT = 12;
+const MIN_AUTO_HEIGHT = 280;
+const MAX_AUTO_HEIGHT = 800;
+const CHART_VERTICAL_PADDING = 48;
+const CATEGORY_ROW_HEIGHT = 22;
+const MAX_MEANINGFUL_CATEGORY_COUNT = Math.ceil((MAX_AUTO_HEIGHT - CHART_VERTICAL_PADDING) / CATEGORY_ROW_HEIGHT);
+/** Returns a JSON object value while excluding arrays and primitives. */
+function asObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : undefined;
+}
+/** Extracts the Vega-Lite mark type from string and object mark definitions. */
+function getMarkType(spec) {
+    if (typeof spec.mark === 'string') {
+        return spec.mark;
+    }
+    return asObject(spec.mark)?.type;
+}
+/** Checks for data/layout semantics that raw-table sizing cannot reproduce. */
+function hasUnsupportedAutoSizingStructure(spec) {
+    if (Array.isArray(spec.transform) && spec.transform.length > 0) {
+        return true;
+    }
+    for (const key of ['concat', 'hconcat', 'vconcat']) {
+        if (Array.isArray(spec[key]))
+            return true;
+    }
+    const layers = spec.layer;
+    if (Array.isArray(layers) &&
+        layers.some((layer) => hasUnsupportedAutoSizingStructure(asObject(layer) ?? {}))) {
+        return true;
+    }
+    const nestedSpec = asObject(spec.spec);
+    return nestedSpec ? hasUnsupportedAutoSizingStructure(nestedSpec) : false;
+}
+/** Finds the discrete y field of a horizontal bar unit in a nested spec. */
+function getHorizontalBarCategoryField(spec, inheritedEncoding = {}) {
+    const encoding = { ...inheritedEncoding, ...asObject(spec.encoding) };
+    const x = asObject(encoding.x);
+    const y = asObject(encoding.y);
+    const isAggregate = typeof x?.aggregate === 'string';
+    const isQuantitativeX = x?.type === 'quantitative' || isAggregate;
+    const isDiscreteY = y?.type === 'nominal' ||
+        y?.type === 'ordinal' ||
+        (isAggregate && y?.type === undefined);
+    if (getMarkType(spec) === 'bar' &&
+        isQuantitativeX &&
+        isDiscreteY &&
+        typeof y?.field === 'string') {
+        return y.field;
+    }
+    for (const key of ['layer', 'concat', 'hconcat', 'vconcat']) {
+        const children = spec[key];
+        if (!Array.isArray(children))
+            continue;
+        for (const child of children) {
+            const field = getHorizontalBarCategoryField(asObject(child) ?? {}, encoding);
+            if (field)
+                return field;
+        }
+    }
+    const nestedSpec = asObject(spec.spec);
+    return nestedSpec
+        ? getHorizontalBarCategoryField(nestedSpec, encoding)
+        : undefined;
+}
+/** Counts distinct non-null field values up to the height saturation point. */
+function countDistinctValues(table, field) {
+    const vector = table.getChild(field);
+    if (!vector)
+        return 0;
+    const values = new Set();
+    for (let index = 0; index < table.numRows; index += 1) {
+        const value = vector.get(index);
+        if (value !== null && value !== undefined) {
+            values.add(`${typeof value}:${String(value)}`);
+            if (values.size >= MAX_MEANINGFUL_CATEGORY_COUNT)
+                break;
+        }
+    }
+    return values.size;
+}
+/**
+ * Computes a taller height for category-dense horizontal bar charts.
+ *
+ * Returns `'auto'` for other chart shapes so they retain aspect-ratio sizing.
+ */
+export function getCategoryAwareVegaChartHeight({ spec, arrowTable, }) {
+    if (!arrowTable)
+        return 'auto';
+    const specObject = asObject(spec) ?? {};
+    if (hasUnsupportedAutoSizingStructure(specObject))
+        return 'auto';
+    const categoryField = getHorizontalBarCategoryField(specObject);
+    if (!categoryField)
+        return 'auto';
+    const categoryCount = countDistinctValues(arrowTable, categoryField);
+    if (categoryCount < MIN_CATEGORY_COUNT)
+        return 'auto';
+    return Math.min(MAX_AUTO_HEIGHT, Math.max(MIN_AUTO_HEIGHT, CHART_VERTICAL_PADDING + categoryCount * CATEGORY_ROW_HEIGHT));
+}
+//# sourceMappingURL=chartSizing.js.map

package/dist/chartSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartSizing.js","sourceRoot":"","sources":["../src/chartSizing.ts"],"names":[],"mappings":"AAmBA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAClC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,MAAM,6BAA6B,GAAG,IAAI,CAAC,IAAI,CAC7C,CAAC,eAAe,GAAG,sBAAsB,CAAC,GAAG,mBAAmB,CACjE,CAAC;AAIF,yEAAyE;AACzE,SAAS,QAAQ,CAAC,KAAc;IAC9B,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACzE,CAAC,CAAE,KAAoB;QACvB,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED,gFAAgF;AAChF,SAAS,WAAW,CAAC,IAAgB;IACnC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IACD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAA0B,CAAC;AACzD,CAAC;AAED,+EAA+E;AAC/E,SAAS,iCAAiC,CAAC,IAAgB;IACzD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC/D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAU,EAAE,CAAC;QAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAAE,OAAO,IAAI,CAAC;IAC5C,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1B,IACE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;QACrB,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CACpB,iCAAiC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CACzD,EACD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,UAAU,CAAC,CAAC,CAAC,iCAAiC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5E,CAAC;AAED,4EAA4E;AAC5E,SAAS,6BAA6B,CACpC,IAAgB,EAChB,oBAAgC,EAAE;IAElC,MAAM,QAAQ,GAAG,EAAC,GAAG,iBAAiB,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAC,CAAC;IACpE,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,WAAW,GAAG,OAAO,CAAC,EAAE,SAAS,KAAK,QAAQ,CAAC;IACrD,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,KAAK,cAAc,IAAI,WAAW,CAAC;IAClE,MAAM,WAAW,GACf,CAAC,EAAE,IAAI,KAAK,SAAS;QACrB,CAAC,EAAE,IAAI,KAAK,SAAS;QACrB,CAAC,WAAW,IAAI,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC;IAEzC,IACE,WAAW,CAAC,IAAI,CAAC,KAAK,KAAK;QAC3B,eAAe;QACf,WAAW;QACX,OAAO,CAAC,EAAE,KAAK,KAAK,QAAQ,EAC5B,CAAC;QACD,OAAO,CAAC,CAAC,KAAK,CAAC;IACjB,CAAC;IAED,KAAK,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAU,EAAE,CAAC;QACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;YAAE,SAAS;QACvC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,6BAA6B,CACzC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,EACrB,QAAQ,CACT,CAAC;YACF,IAAI,KAAK;gBAAE,OAAO,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,UAAU;QACf,CAAC,CAAC,6BAA6B,CAAC,UAAU,EAAE,QAAQ,CAAC;QACrD,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED,+EAA+E;AAC/E,SAAS,mBAAmB,CAAC,KAAkB,EAAE,KAAa;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,CAAC,MAAM;QAAE,OAAO,CAAC,CAAC;IAEtB,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC1C,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC/C,IAAI,MAAM,CAAC,IAAI,IAAI,6BAA6B;gBAAE,MAAM;QAC1D,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC;AACrB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,+BAA+B,CAAC,EAC9C,IAAI,EACJ,UAAU,GACa;IACvB,IAAI,CAAC,UAAU;QAAE,OAAO,MAAM,CAAC;IAE/B,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,IAAI,iCAAiC,CAAC,UAAU,CAAC;QAAE,OAAO,MAAM,CAAC;IAEjE,MAAM,aAAa,GAAG,6BAA6B,CAAC,UAAU,CAAC,CAAC;IAChE,IAAI,CAAC,aAAa;QAAE,OAAO,MAAM,CAAC;IAElC,MAAM,aAAa,GAAG,mBAAmB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IACrE,IAAI,aAAa,GAAG,kBAAkB;QAAE,OAAO,MAAM,CAAC;IAEtD,OAAO,IAAI,CAAC,GAAG,CACb,eAAe,EACf,IAAI,CAAC,GAAG,CACN,eAAe,EACf,sBAAsB,GAAG,aAAa,GAAG,mBAAmB,CAC7D,CACF,CAAC;AACJ,CAAC","sourcesContent":["import type * as arrow from 'apache-arrow';\nimport type {VisualizationSpec} from 'vega-embed';\n\n/** Height behavior for a Vega chart result. */\nexport type VegaChartHeight = number | 'auto';\n\n/** Data available when resolving the height of a rendered Vega chart. */\nexport interface VegaChartSizingContext {\n  /** The parsed, responsive Vega-Lite specification. */\n  spec: VisualizationSpec;\n  /** The data loaded for the chart, when available. */\n  arrowTable: arrow.Table | undefined;\n}\n\n/** Resolves a chart height from its parsed specification and loaded data. */\nexport type VegaChartHeightResolver = (\n  context: VegaChartSizingContext,\n) => VegaChartHeight;\n\nconst MIN_CATEGORY_COUNT = 12;\nconst MIN_AUTO_HEIGHT = 280;\nconst MAX_AUTO_HEIGHT = 800;\nconst CHART_VERTICAL_PADDING = 48;\nconst CATEGORY_ROW_HEIGHT = 22;\nconst MAX_MEANINGFUL_CATEGORY_COUNT = Math.ceil(\n  (MAX_AUTO_HEIGHT - CHART_VERTICAL_PADDING) / CATEGORY_ROW_HEIGHT,\n);\n\ntype JsonObject = Record<string, unknown>;\n\n/** Returns a JSON object value while excluding arrays and primitives. */\nfunction asObject(value: unknown): JsonObject | undefined {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n    ? (value as JsonObject)\n    : undefined;\n}\n\n/** Extracts the Vega-Lite mark type from string and object mark definitions. */\nfunction getMarkType(spec: JsonObject): string | undefined {\n  if (typeof spec.mark === 'string') {\n    return spec.mark;\n  }\n  return asObject(spec.mark)?.type as string | undefined;\n}\n\n/** Checks for data/layout semantics that raw-table sizing cannot reproduce. */\nfunction hasUnsupportedAutoSizingStructure(spec: JsonObject): boolean {\n  if (Array.isArray(spec.transform) && spec.transform.length > 0) {\n    return true;\n  }\n\n  for (const key of ['concat', 'hconcat', 'vconcat'] as const) {\n    if (Array.isArray(spec[key])) return true;\n  }\n\n  const layers = spec.layer;\n  if (\n    Array.isArray(layers) &&\n    layers.some((layer) =>\n      hasUnsupportedAutoSizingStructure(asObject(layer) ?? {}),\n    )\n  ) {\n    return true;\n  }\n\n  const nestedSpec = asObject(spec.spec);\n  return nestedSpec ? hasUnsupportedAutoSizingStructure(nestedSpec) : false;\n}\n\n/** Finds the discrete y field of a horizontal bar unit in a nested spec. */\nfunction getHorizontalBarCategoryField(\n  spec: JsonObject,\n  inheritedEncoding: JsonObject = {},\n): string | undefined {\n  const encoding = {...inheritedEncoding, ...asObject(spec.encoding)};\n  const x = asObject(encoding.x);\n  const y = asObject(encoding.y);\n  const isAggregate = typeof x?.aggregate === 'string';\n  const isQuantitativeX = x?.type === 'quantitative' || isAggregate;\n  const isDiscreteY =\n    y?.type === 'nominal' ||\n    y?.type === 'ordinal' ||\n    (isAggregate && y?.type === undefined);\n\n  if (\n    getMarkType(spec) === 'bar' &&\n    isQuantitativeX &&\n    isDiscreteY &&\n    typeof y?.field === 'string'\n  ) {\n    return y.field;\n  }\n\n  for (const key of ['layer', 'concat', 'hconcat', 'vconcat'] as const) {\n    const children = spec[key];\n    if (!Array.isArray(children)) continue;\n    for (const child of children) {\n      const field = getHorizontalBarCategoryField(\n        asObject(child) ?? {},\n        encoding,\n      );\n      if (field) return field;\n    }\n  }\n\n  const nestedSpec = asObject(spec.spec);\n  return nestedSpec\n    ? getHorizontalBarCategoryField(nestedSpec, encoding)\n    : undefined;\n}\n\n/** Counts distinct non-null field values up to the height saturation point. */\nfunction countDistinctValues(table: arrow.Table, field: string): number {\n  const vector = table.getChild(field);\n  if (!vector) return 0;\n\n  const values = new Set<string>();\n  for (let index = 0; index < table.numRows; index += 1) {\n    const value = vector.get(index);\n    if (value !== null && value !== undefined) {\n      values.add(`${typeof value}:${String(value)}`);\n      if (values.size >= MAX_MEANINGFUL_CATEGORY_COUNT) break;\n    }\n  }\n  return values.size;\n}\n\n/**\n * Computes a taller height for category-dense horizontal bar charts.\n *\n * Returns `'auto'` for other chart shapes so they retain aspect-ratio sizing.\n */\nexport function getCategoryAwareVegaChartHeight({\n  spec,\n  arrowTable,\n}: VegaChartSizingContext): VegaChartHeight {\n  if (!arrowTable) return 'auto';\n\n  const specObject = asObject(spec) ?? {};\n  if (hasUnsupportedAutoSizingStructure(specObject)) return 'auto';\n\n  const categoryField = getHorizontalBarCategoryField(specObject);\n  if (!categoryField) return 'auto';\n\n  const categoryCount = countDistinctValues(arrowTable, categoryField);\n  if (categoryCount < MIN_CATEGORY_COUNT) return 'auto';\n\n  return Math.min(\n    MAX_AUTO_HEIGHT,\n    Math.max(\n      MIN_AUTO_HEIGHT,\n      CHART_VERTICAL_PADDING + categoryCount * CATEGORY_ROW_HEIGHT,\n    ),\n  );\n}\n"]}

package/dist/editor/VegaChartDisplay.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { VegaChartHeight, VegaChartHeightResolver } from '../chartSizing';
 export interface VegaChartDisplayProps {
     /**
      * Custom class name for the chart container
@@ -9,6 +10,14 @@ export interface VegaChartDisplayProps {
      * @default 16/9
      */
     aspectRatio?: number;
+    /**
+     * Fixed outer chart height, or `'auto'` for category-aware sizing.
+     */
+    height?: VegaChartHeight;
+    /**
+     * Optional height policy evaluated with the parsed spec and loaded data.
+     */
+    getHeight?: VegaChartHeightResolver;
     /**
      * Children passed through to VegaLiteArrowChart (e.g., action components)
      */

package/dist/editor/VegaChartDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkE5D,CAAC"}
+{"version":3,"file":"VegaChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,gBAAgB,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6E5D,CAAC"}

package/dist/editor/VegaChartDisplay.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToolErrorMessage } from '@sqlrooms/ai-core';
 import { useSql } from '@sqlrooms/duckdb';
 import { cn } from '@sqlrooms/ui';
+import React from 'react';
 import { VegaLiteArrowChart } from '../VegaLiteArrowChart';
+import { getCategoryAwareVegaChartHeight } from '../chartSizing';
 import { useVegaEditorContext } from './VegaEditorContext';
 /**
  * Chart display subcomponent for VegaLiteChart.Container.
@@ -19,7 +21,7 @@ import { useVegaEditorContext } from './VegaEditorContext';
  * </VegaLiteChart.Container>
  * ```
  */
-export const VegaChartDisplay = ({ className, aspectRatio = 16 / 9, children, }) => {
+export const VegaChartDisplay = ({ className, aspectRatio = 16 / 9, height, getHeight, children, }) => {
     const { state, arrowTable, options } = useVegaEditorContext();
     // Use the applied SQL for chart rendering (updates when Apply is clicked)
     const sqlQuery = state.appliedSql;
@@ -33,6 +35,13 @@ export const VegaChartDisplay = ({ className, aspectRatio = 16 / 9, children, })
     // Use parsed spec for live preview, fall back to last valid spec if parse failed
     // This ensures the chart keeps rendering during typing even with invalid JSON
     const spec = state.parsedSpec ?? state.lastValidSpec;
+    const resolvedHeight = React.useMemo(() => {
+        const context = { spec, arrowTable: chartData };
+        const requestedHeight = getHeight?.(context) ?? height;
+        return requestedHeight === 'auto'
+            ? getCategoryAwareVegaChartHeight(context)
+            : requestedHeight;
+    }, [chartData, getHeight, height, spec]);
     // Show loading state
     if (sqlQuery && !arrowTable && sqlResult.isLoading) {
         return (_jsxs("div", { className: cn('text-muted-foreground flex items-center justify-center', className), children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }), _jsx("span", { className: "ml-2 text-sm", children: "Loading data..." })] }));
@@ -41,6 +50,6 @@ export const VegaChartDisplay = ({ className, aspectRatio = 16 / 9, children, })
     if (sqlQuery && !arrowTable && sqlResult.error) {
         return (_jsx("div", { className: className, children: _jsx(ToolErrorMessage, { error: sqlResult.error, triggerLabel: "SQL query failed", title: "Query error", align: "start", details: sqlQuery }) }));
     }
-    return (_jsx("div", { className: cn('relative', className), children: _jsx(VegaLiteArrowChart, { className: "w-full", spec: spec, arrowTable: chartData, aspectRatio: aspectRatio, options: options, children: children }) }));
+    return (_jsx("div", { className: cn('relative', className), children: _jsx(VegaLiteArrowChart, { className: "w-full", spec: spec, arrowTable: chartData, aspectRatio: aspectRatio, height: resolvedHeight, options: options, children: children }) }));
 };
 //# sourceMappingURL=VegaChartDisplay.js.map

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,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"]}
+{"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;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,+BAA+B,EAAC,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AA0BzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,MAAM,EACN,SAAS,EACT,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,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,OAAO,GAAG,EAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAC,CAAC;QAC9C,MAAM,eAAe,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC;QACvD,OAAO,eAAe,KAAK,MAAM;YAC/B,CAAC,CAAC,+BAA+B,CAAC,OAAO,CAAC;YAC1C,CAAC,CAAC,eAAe,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEzC,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,MAAM,EAAE,cAAc,EACtB,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 {getCategoryAwareVegaChartHeight} from '../chartSizing';\nimport type {VegaChartHeight, VegaChartHeightResolver} from '../chartSizing';\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   * Fixed outer chart height, or `'auto'` for category-aware sizing.\n   */\n  height?: VegaChartHeight;\n  /**\n   * Optional height policy evaluated with the parsed spec and loaded data.\n   */\n  getHeight?: VegaChartHeightResolver;\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  height,\n  getHeight,\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  const resolvedHeight = React.useMemo(() => {\n    const context = {spec, arrowTable: chartData};\n    const requestedHeight = getHeight?.(context) ?? height;\n    return requestedHeight === 'auto'\n      ? getCategoryAwareVegaChartHeight(context)\n      : requestedHeight;\n  }, [chartData, getHeight, height, spec]);\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        height={resolvedHeight}\n        options={options}\n      >\n        {children}\n      </VegaLiteArrowChart>\n    </div>\n  );\n};\n"]}

package/dist/index.d.ts

@@ -3,6 +3,9 @@
  * @packageDocumentation
  */
 export { VegaChartToolResult as VegaChartToolResult } from './VegaChartToolResult';
+export type { VegaChartToolResultProps } from './VegaChartToolResult';
+export { getCategoryAwareVegaChartHeight } from './chartSizing';
+export type { VegaChartHeight, VegaChartHeightResolver, VegaChartSizingContext, } from './chartSizing';
 export type { VisualizationSpec } from 'vega-embed';
 export type { SignalListenerHandler, SignalValue } from 'vega';
 export { createVegaChartTool, createSqlValidator, VegaChartToolParameters, DEFAULT_VEGA_CHART_DESCRIPTION, } from './VegaChartTool';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAClD,YAAY,EAAC,qBAAqB,EAAE,WAAW,EAAC,MAAM,MAAM,CAAC;AAE7D,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAC,oBAAoB,EAAE,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,GACpC,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,+BAA+B,EAC/B,mCAAmC,IAAI,uCAAuC,GAC/E,MAAM,6BAA6B,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAUxB,CAAC;AAGH,mDAAmD;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAGhE,YAAY,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,yBAAyB,EACzB,wBAAwB,EACxB,iBAAiB,EACjB,sBAAsB,EACtB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AACjF,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAC,+BAA+B,EAAC,MAAM,eAAe,CAAC;AAC9D,YAAY,EACV,eAAe,EACf,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AACvB,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAClD,YAAY,EAAC,qBAAqB,EAAE,WAAW,EAAC,MAAM,MAAM,CAAC;AAE7D,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAC,oBAAoB,EAAE,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,GACpC,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,+BAA+B,EAC/B,mCAAmC,IAAI,uCAAuC,GAC/E,MAAM,6BAA6B,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAUxB,CAAC;AAGH,mDAAmD;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAGhE,YAAY,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,yBAAyB,EACzB,wBAAwB,EACxB,iBAAiB,EACjB,sBAAsB,EACtB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@ import { VegaSpecEditorPanel } from './editor/VegaSpecEditorPanel';
 import { VegaSqlEditorPanel } from './editor/VegaSqlEditorPanel';
 import { VegaChartEditorActions } from './editor/VegaChartEditorActions';
 export { VegaChartToolResult as VegaChartToolResult } from './VegaChartToolResult';
+export { getCategoryAwareVegaChartHeight } from './chartSizing';
 export { createVegaChartTool, createSqlValidator, VegaChartToolParameters, DEFAULT_VEGA_CHART_DESCRIPTION, } from './VegaChartTool';
 export { createChartImageForMarkdownTool, ChartImageForMarkdownToolParameters, } from './ChartImageForMarkdownTool';
 /**

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,mBAAmB,EAAC,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,sBAAsB,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAIjF,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,GACpC,MAAM,6BAA6B,CAAC;AAMrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC3D,0BAA0B;IAC1B,QAAQ,EAAE,gBAAgB;IAC1B,UAAU,EAAE,kBAAkB;IAC9B,6BAA6B;IAC7B,SAAS,EAAE,kBAAkB;IAC7B,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,mBAAmB;IAC/B,SAAS,EAAE,kBAAkB;IAC7B,OAAO,EAAE,sBAAsB;CAChC,CAAC,CAAC;AAEH,sDAAsD;AACtD,mDAAmD;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAchE,0BAA0B;AAC1B,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,mDAAmD;AACnD,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AAGvD,2BAA2B;AAC3B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nimport {VegaLiteSqlChart} from './VegaLiteSqlChart';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport {VegaSpecEditorPanel} from './editor/VegaSpecEditorPanel';\nimport {VegaSqlEditorPanel} from './editor/VegaSqlEditorPanel';\nimport {VegaChartEditorActions} from './editor/VegaChartEditorActions';\nexport {VegaChartToolResult as VegaChartToolResult} from './VegaChartToolResult';\nexport type {VisualizationSpec} from 'vega-embed';\nexport type {SignalListenerHandler, SignalValue} from 'vega';\n\nexport {\n  createVegaChartTool,\n  createSqlValidator,\n  VegaChartToolParameters,\n  DEFAULT_VEGA_CHART_DESCRIPTION,\n} from './VegaChartTool';\n\nexport type {VegaChartToolOptions, VegaChartToolOutput} from './VegaChartTool';\nexport {\n  createChartImageForMarkdownTool,\n  ChartImageForMarkdownToolParameters,\n} from './ChartImageForMarkdownTool';\nexport type {\n  ChartImageForMarkdownToolOutput,\n  ChartImageForMarkdownToolParameters as ChartImageForMarkdownToolParametersType,\n} from './ChartImageForMarkdownTool';\n\n/**\n * Composable Vega-Lite chart component with editing capabilities.\n *\n * @example\n * ```tsx\n * // Compound component pattern\n * <VegaLiteChart.Container\n *   spec={mySpec}\n *   sqlQuery={myQuery}\n *   editable={true}\n *   onSpecChange={(spec) => saveSpec(spec)}\n * >\n *   <VegaLiteChart.Chart />\n *   <VegaLiteChart.SpecEditor />\n *   <VegaLiteChart.SqlEditor />\n *   <VegaLiteChart.Actions />\n * </VegaLiteChart.Container>\n *\n * // Simple usage (legacy)\n * <VegaLiteChart spec={mySpec} sqlQuery={myQuery} />\n * ```\n */\nexport const VegaLiteChart = Object.assign(VegaLiteSqlChart, {\n  // Legacy chart components\n  SqlChart: VegaLiteSqlChart,\n  ArrowChart: VegaLiteArrowChart,\n  // Compound editor components\n  Container: VegaChartContainer,\n  Chart: VegaChartDisplay,\n  SpecEditor: VegaSpecEditorPanel,\n  SqlEditor: VegaSqlEditorPanel,\n  Actions: VegaChartEditorActions,\n});\n\n// Export editor components and hooks for advanced use\n/** @deprecated Use VegaCodeMirrorEditor instead */\nexport {VegaMonacoEditor} from './editor/VegaMonacoEditor';\nexport {VegaCodeMirrorEditor} from './editor/VegaCodeMirrorEditor';\nexport {useVegaChartEditor} from './editor/useVegaChartEditor';\nexport {useVegaEditorContext} from './editor/VegaEditorContext';\n\n// Export editor types\nexport type {\n  EditorMode,\n  OnSpecChange,\n  OnSqlChange,\n  UseVegaChartEditorOptions,\n  UseVegaChartEditorReturn,\n  VegaEditorActions,\n  VegaEditorContextValue,\n  VegaEditorState,\n} from './editor/types';\n\n// Export schema utilities\nexport {\n  loadVegaLiteSchema,\n  getCachedVegaLiteSchema,\n  preloadVegaLiteSchema,\n} from './schema/vegaLiteSchema';\n\n// Export chart context and hook for custom actions\nexport {useVegaChartContext} from './VegaChartContext';\nexport type {VegaChartContextValue} from './VegaChartContext';\n\n// Export action components\nexport {VegaExportAction} from './VegaExportAction';\nexport type {VegaExportActionProps} from './VegaExportAction';\nexport {VegaEditAction} from './VegaEditAction';\nexport type {VegaEditActionProps} from './VegaEditAction';\nexport {VegaChartActions} from './VegaChartActions';\nexport type {VegaChartActionsProps} from './VegaChartActions';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,mBAAmB,EAAC,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,sBAAsB,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,mBAAmB,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAEjF,OAAO,EAAC,+BAA+B,EAAC,MAAM,eAAe,CAAC;AAS9D,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,GACpC,MAAM,6BAA6B,CAAC;AAMrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC3D,0BAA0B;IAC1B,QAAQ,EAAE,gBAAgB;IAC1B,UAAU,EAAE,kBAAkB;IAC9B,6BAA6B;IAC7B,SAAS,EAAE,kBAAkB;IAC7B,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,mBAAmB;IAC/B,SAAS,EAAE,kBAAkB;IAC7B,OAAO,EAAE,sBAAsB;CAChC,CAAC,CAAC;AAEH,sDAAsD;AACtD,mDAAmD;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAchE,0BAA0B;AAC1B,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,mDAAmD;AACnD,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AAGvD,2BAA2B;AAC3B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nimport {VegaLiteSqlChart} from './VegaLiteSqlChart';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport {VegaSpecEditorPanel} from './editor/VegaSpecEditorPanel';\nimport {VegaSqlEditorPanel} from './editor/VegaSqlEditorPanel';\nimport {VegaChartEditorActions} from './editor/VegaChartEditorActions';\nexport {VegaChartToolResult as VegaChartToolResult} from './VegaChartToolResult';\nexport type {VegaChartToolResultProps} from './VegaChartToolResult';\nexport {getCategoryAwareVegaChartHeight} from './chartSizing';\nexport type {\n  VegaChartHeight,\n  VegaChartHeightResolver,\n  VegaChartSizingContext,\n} from './chartSizing';\nexport type {VisualizationSpec} from 'vega-embed';\nexport type {SignalListenerHandler, SignalValue} from 'vega';\n\nexport {\n  createVegaChartTool,\n  createSqlValidator,\n  VegaChartToolParameters,\n  DEFAULT_VEGA_CHART_DESCRIPTION,\n} from './VegaChartTool';\n\nexport type {VegaChartToolOptions, VegaChartToolOutput} from './VegaChartTool';\nexport {\n  createChartImageForMarkdownTool,\n  ChartImageForMarkdownToolParameters,\n} from './ChartImageForMarkdownTool';\nexport type {\n  ChartImageForMarkdownToolOutput,\n  ChartImageForMarkdownToolParameters as ChartImageForMarkdownToolParametersType,\n} from './ChartImageForMarkdownTool';\n\n/**\n * Composable Vega-Lite chart component with editing capabilities.\n *\n * @example\n * ```tsx\n * // Compound component pattern\n * <VegaLiteChart.Container\n *   spec={mySpec}\n *   sqlQuery={myQuery}\n *   editable={true}\n *   onSpecChange={(spec) => saveSpec(spec)}\n * >\n *   <VegaLiteChart.Chart />\n *   <VegaLiteChart.SpecEditor />\n *   <VegaLiteChart.SqlEditor />\n *   <VegaLiteChart.Actions />\n * </VegaLiteChart.Container>\n *\n * // Simple usage (legacy)\n * <VegaLiteChart spec={mySpec} sqlQuery={myQuery} />\n * ```\n */\nexport const VegaLiteChart = Object.assign(VegaLiteSqlChart, {\n  // Legacy chart components\n  SqlChart: VegaLiteSqlChart,\n  ArrowChart: VegaLiteArrowChart,\n  // Compound editor components\n  Container: VegaChartContainer,\n  Chart: VegaChartDisplay,\n  SpecEditor: VegaSpecEditorPanel,\n  SqlEditor: VegaSqlEditorPanel,\n  Actions: VegaChartEditorActions,\n});\n\n// Export editor components and hooks for advanced use\n/** @deprecated Use VegaCodeMirrorEditor instead */\nexport {VegaMonacoEditor} from './editor/VegaMonacoEditor';\nexport {VegaCodeMirrorEditor} from './editor/VegaCodeMirrorEditor';\nexport {useVegaChartEditor} from './editor/useVegaChartEditor';\nexport {useVegaEditorContext} from './editor/VegaEditorContext';\n\n// Export editor types\nexport type {\n  EditorMode,\n  OnSpecChange,\n  OnSqlChange,\n  UseVegaChartEditorOptions,\n  UseVegaChartEditorReturn,\n  VegaEditorActions,\n  VegaEditorContextValue,\n  VegaEditorState,\n} from './editor/types';\n\n// Export schema utilities\nexport {\n  loadVegaLiteSchema,\n  getCachedVegaLiteSchema,\n  preloadVegaLiteSchema,\n} from './schema/vegaLiteSchema';\n\n// Export chart context and hook for custom actions\nexport {useVegaChartContext} from './VegaChartContext';\nexport type {VegaChartContextValue} from './VegaChartContext';\n\n// Export action components\nexport {VegaExportAction} from './VegaExportAction';\nexport type {VegaExportActionProps} from './VegaExportAction';\nexport {VegaEditAction} from './VegaEditAction';\nexport type {VegaEditActionProps} from './VegaEditAction';\nexport {VegaChartActions} from './VegaChartActions';\nexport type {VegaChartActionsProps} from './VegaChartActions';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/vega",
-  "version": "0.29.0-rc.10",
+  "version": "0.29.0-rc.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sqlrooms/sqlrooms.git"
@@ -19,18 +19,20 @@
     "build": "tsc",
     "dev": "tsc -w",
     "lint": "eslint .",
+    "test": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest",
+    "test:watch": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest --watch",
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
   "dependencies": {
-    "@sqlrooms/ai-core": "0.29.0-rc.10",
-    "@sqlrooms/codemirror": "0.29.0-rc.10",
-    "@sqlrooms/documents": "0.29.0-rc.10",
-    "@sqlrooms/duckdb": "0.29.0-rc.10",
-    "@sqlrooms/monaco-editor": "0.29.0-rc.10",
-    "@sqlrooms/sql-editor": "0.29.0-rc.10",
-    "@sqlrooms/ui": "0.29.0-rc.10",
-    "@sqlrooms/utils": "0.29.0-rc.10",
+    "@sqlrooms/ai-core": "0.29.0-rc.11",
+    "@sqlrooms/codemirror": "0.29.0-rc.11",
+    "@sqlrooms/documents": "0.29.0-rc.11",
+    "@sqlrooms/duckdb": "0.29.0-rc.11",
+    "@sqlrooms/monaco-editor": "0.29.0-rc.11",
+    "@sqlrooms/sql-editor": "0.29.0-rc.11",
+    "@sqlrooms/ui": "0.29.0-rc.11",
+    "@sqlrooms/utils": "0.29.0-rc.11",
     "ai": "^6.0.177",
     "lucide-react": "^0.556.0",
     "react-vega": "^8.0.0",
@@ -40,7 +42,10 @@
     "zod": "^4.1.8"
   },
   "devDependencies": {
-    "@monaco-editor/react": "^4.7.0"
+    "@monaco-editor/react": "^4.7.0",
+    "@types/jest": "^30.0.0",
+    "jest": "^30.1.3",
+    "ts-jest": "^29.4.4"
   },
   "peerDependencies": {
     "apache-arrow": "17.0.0",
@@ -50,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dbcff5982d39cc07d0c1d0b1189795b19f1e8d87"
+  "gitHead": "e451e434c67f59d16a45493689f092af134b207c"
 }