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

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,CAcd;AAsHD;;;;;;;;;;;;;;;;;;;;;;;;;;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":"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;AAsHD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEH,CAAC"}

package/dist/VegaLiteArrowChart.js

@@ -14,6 +14,7 @@ import { VegaExportAction } from './VegaExportAction';
 export function makeDefaultVegaLiteOptions(options) {
     return {
         mode: 'vega-lite',
+        renderer: 'svg',
         theme: undefined,
         tooltip: true,
         actions: false,

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    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":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,EACL,WAAW,EACX,EAAE,EACF,wBAAwB,EACxB,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AAGxC,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,wBAAwB,EAAC,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AA0BpD,MAAM,UAAU,0BAA0B,CACxC,OAAsB;IAEtB,OAAO;QACL,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,KAAK;QACd,OAAO,EAAE;YACP,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,EAAE;SACT;QACD,GAAG,OAAO;KACX,CAAC;AACJ,CAAC;AAED,MAAM,sBAAsB,GAAsC,CAAC,EACjE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,IAAI,EACJ,UAAU,EACV,OAAO,EAAE,YAAY,EACrB,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAE3B,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,0BAA0B,CAAC;QACzB,MAAM,EAAE;YACN,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9C,GAAG,CAAC,OAAO,YAAY,EAAE,MAAM,KAAK,QAAQ;gBAC1C,CAAC,CAAE,YAAY,CAAC,MAAiB;gBACjC,CAAC,CAAC,EAAE,CAAC;SACR;QAED,GAAG,YAAY;KAChB,CAAC,EACJ,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IAEjE,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,EAAC,MAAM,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAC,CAAC;IAChD,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,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,OAAO,EAAE,EAAE;YACX,UAAU,EAAE,aAAa;YACzB,GAAG,MAAM;YACT,IAAI,EAAE,IAAI;YACV,iEAAiE;YACjE,KAAK,EAAE,WAAW;YAClB,MAAM,EAAE,WAAW;YACnB,QAAQ,EAAE,EAAC,QAAQ,EAAE,SAAS,EAAC;SACX,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,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,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,YAAY,CAAC;QACzB,GAAG;QACH,IAAI,EAAE,YAAY,IAAI,EAAE;QACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa;QAC5B,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAa,EAAE,MAAc,EAAE,EAAE;QAChC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC;IACrD,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,wBAAwB,IAAC,KAAK,EAAE,EAAC,KAAK,EAAC,YACtC,eACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,SAAS,CAAC,aAEtE,cAAK,SAAS,EAAC,eAAe,YAC3B,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,YAAY;wBACZ,IAAI,IAAI,CACN,KAAC,WAAW,IACV,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,kBAAkB,EAC5B,OAAO,kBAEP,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0BAA0B,GAAG,GAC1C,CACf,CACF,GACG,EACL,QAAQ,IACL,GACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,sBAAsB,EAAE;IACtE;;OAEG;IACH,OAAO,EAAE,gBAAgB;IACzB;;OAEG;IACH,YAAY,EAAE,gBAAgB;IAC9B;;OAEG;IACH,UAAU,EAAE,cAAc;CAC3B,CAAC,CAAC","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"]}

package/dist/VegaLiteChart.d.ts

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":"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","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"]}

package/dist/VegaLiteSqlChart.js

@@ -55,6 +55,6 @@ import { VegaLiteArrowChart, } from './VegaLiteArrowChart';
 export const VegaLiteSqlChart = ({ className, sqlQuery, ...props }) => {
     const result = useSql({ query: sqlQuery });
     const arrowTable = result.data?.arrowTable;
-    return (_jsxs("div", { className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: [result.error && (_jsx("div", { className: "whitespace-pre-wrap font-mono text-sm text-red-500", children: result.error.message })), result.isLoading ? (_jsxs("div", { className: "text-muted-foreground align-center flex gap-2 px-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"] })) : (arrowTable && _jsx(VegaLiteArrowChart, { ...props, arrowTable: arrowTable }))] }));
+    return (_jsxs("div", { className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: [result.error && (_jsx("div", { className: "font-mono text-sm whitespace-pre-wrap text-red-500", children: result.error.message })), result.isLoading ? (_jsxs("div", { className: "text-muted-foreground align-center flex gap-2 px-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"] })) : (arrowTable && _jsx(VegaLiteArrowChart, { ...props, arrowTable: arrowTable }))] }));
 };
 //# sourceMappingURL=VegaLiteSqlChart.js.map

package/dist/VegaLiteSqlChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteSqlChart.js","sourceRoot":"","sources":["../src/VegaLiteSqlChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAEzB,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3C,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,aAEA,MAAM,CAAC,KAAK,IAAI,CACf,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,CAAC,KAAK,CAAC,OAAO,GACjB,CACP,EACA,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAClB,eAAK,SAAS,EAAC,oDAAoD,aACjE,cAAK,SAAS,EAAC,8EAA8E,GAAO,0CAEhG,CACP,CAAC,CAAC,CAAC,CACF,UAAU,IAAI,KAAC,kBAAkB,OAAK,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CACxE,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {\n  VegaLiteArrowChart,\n  VegaLiteArrowChartProps,\n} from './VegaLiteArrowChart';\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 */\nexport const VegaLiteSqlChart: React.FC<\n  Omit<VegaLiteArrowChartProps, 'arrowTable'> & {sqlQuery: string}\n> = ({className, sqlQuery, ...props}) => {\n  const result = useSql({query: sqlQuery});\n  const arrowTable = result.data?.arrowTable;\n\n  return (\n    <div\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {result.error && (\n        <div className=\"whitespace-pre-wrap font-mono text-sm text-red-500\">\n          {result.error.message}\n        </div>\n      )}\n      {result.isLoading ? (\n        <div className=\"text-muted-foreground align-center flex gap-2 px-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      ) : (\n        arrowTable && <VegaLiteArrowChart {...props} arrowTable={arrowTable} />\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaLiteSqlChart.js","sourceRoot":"","sources":["../src/VegaLiteSqlChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAEzB,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3C,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,aAEA,MAAM,CAAC,KAAK,IAAI,CACf,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,CAAC,KAAK,CAAC,OAAO,GACjB,CACP,EACA,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAClB,eAAK,SAAS,EAAC,oDAAoD,aACjE,cAAK,SAAS,EAAC,8EAA8E,GAAO,0CAEhG,CACP,CAAC,CAAC,CAAC,CACF,UAAU,IAAI,KAAC,kBAAkB,OAAK,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CACxE,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {\n  VegaLiteArrowChart,\n  VegaLiteArrowChartProps,\n} from './VegaLiteArrowChart';\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 */\nexport const VegaLiteSqlChart: React.FC<\n  Omit<VegaLiteArrowChartProps, 'arrowTable'> & {sqlQuery: string}\n> = ({className, sqlQuery, ...props}) => {\n  const result = useSql({query: sqlQuery});\n  const arrowTable = result.data?.arrowTable;\n\n  return (\n    <div\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {result.error && (\n        <div className=\"font-mono text-sm whitespace-pre-wrap text-red-500\">\n          {result.error.message}\n        </div>\n      )}\n      {result.isLoading ? (\n        <div className=\"text-muted-foreground align-center flex gap-2 px-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      ) : (\n        arrowTable && <VegaLiteArrowChart {...props} arrowTable={arrowTable} />\n      )}\n    </div>\n  );\n};\n"]}

package/dist/editor/VegaCodeMirrorEditor.d.ts

@@ -0,0 +1,15 @@
+import { JsonCodeMirrorEditorProps } from '@sqlrooms/codemirror';
+import React from 'react';
+export interface VegaCodeMirrorEditorProps extends Omit<JsonCodeMirrorEditorProps, 'schema'> {
+    /**
+     * Whether to enable Vega-Lite JSON schema validation
+     * @default true
+     */
+    enableSchemaValidation?: boolean;
+}
+/**
+ * A CodeMirror editor specialized for editing Vega-Lite specifications.
+ * Automatically loads and configures the Vega-Lite JSON schema for validation.
+ */
+export declare const VegaCodeMirrorEditor: React.FC<VegaCodeMirrorEditorProps>;
+//# sourceMappingURL=VegaCodeMirrorEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VegaCodeMirrorEditor.d.ts","sourceRoot":"","sources":["../../src/editor/VegaCodeMirrorEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CACrD,yBAAyB,EACzB,QAAQ,CACT;IACC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+BpE,CAAC"}

package/dist/editor/VegaCodeMirrorEditor.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JsonCodeMirrorEditor, } from '@sqlrooms/codemirror';
+import { useEffect, useState } from 'react';
+import { loadVegaLiteSchema } from '../schema/vegaLiteSchema';
+/**
+ * A CodeMirror editor specialized for editing Vega-Lite specifications.
+ * Automatically loads and configures the Vega-Lite JSON schema for validation.
+ */
+export const VegaCodeMirrorEditor = ({ value, onChange, readOnly = false, className, enableSchemaValidation = true, ...props }) => {
+    const [schema, setSchema] = useState(null);
+    // Load Vega-Lite schema on mount
+    useEffect(() => {
+        if (enableSchemaValidation) {
+            loadVegaLiteSchema().then((loadedSchema) => {
+                if (loadedSchema) {
+                    setSchema(loadedSchema);
+                }
+            });
+        }
+    }, [enableSchemaValidation]);
+    return (_jsx(JsonCodeMirrorEditor, { value: value, onChange: onChange, schema: enableSchemaValidation ? (schema ?? undefined) : undefined, readOnly: readOnly, className: className, ...props }));
+};
+//# sourceMappingURL=VegaCodeMirrorEditor.js.map

package/dist/editor/VegaCodeMirrorEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaCodeMirrorEditor.js","sourceRoot":"","sources":["../../src/editor/VegaCodeMirrorEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,oBAAoB,GAErB,MAAM,sBAAsB,CAAC;AAC9B,OAAc,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAa5D;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE1D,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,sBAAsB,EAAE,CAAC;YAC3B,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;gBACzC,IAAI,YAAY,EAAE,CAAC;oBACjB,SAAS,CAAC,YAAY,CAAC,CAAC;gBAC1B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAClE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  JsonCodeMirrorEditor,\n  JsonCodeMirrorEditorProps,\n} from '@sqlrooms/codemirror';\nimport React, {useEffect, useState} from 'react';\nimport {loadVegaLiteSchema} from '../schema/vegaLiteSchema';\n\nexport interface VegaCodeMirrorEditorProps extends Omit<\n  JsonCodeMirrorEditorProps,\n  'schema'\n> {\n  /**\n   * Whether to enable Vega-Lite JSON schema validation\n   * @default true\n   */\n  enableSchemaValidation?: boolean;\n}\n\n/**\n * A CodeMirror editor specialized for editing Vega-Lite specifications.\n * Automatically loads and configures the Vega-Lite JSON schema for validation.\n */\nexport const VegaCodeMirrorEditor: React.FC<VegaCodeMirrorEditorProps> = ({\n  value,\n  onChange,\n  readOnly = false,\n  className,\n  enableSchemaValidation = true,\n  ...props\n}) => {\n  const [schema, setSchema] = useState<object | null>(null);\n\n  // Load Vega-Lite schema on mount\n  useEffect(() => {\n    if (enableSchemaValidation) {\n      loadVegaLiteSchema().then((loadedSchema) => {\n        if (loadedSchema) {\n          setSchema(loadedSchema);\n        }\n      });\n    }\n  }, [enableSchemaValidation]);\n\n  return (\n    <JsonCodeMirrorEditor\n      value={value}\n      onChange={onChange}\n      schema={enableSchemaValidation ? (schema ?? undefined) : undefined}\n      readOnly={readOnly}\n      className={className}\n      {...props}\n    />\n  );\n};\n"]}

package/dist/editor/VegaMonacoEditor.d.ts

@@ -1,5 +1,8 @@
 import { MonacoEditorProps } from '@sqlrooms/monaco-editor';
 import React from 'react';
+/**
+ * @deprecated Use VegaCodeMirrorEditorProps instead. This interface is kept for backward compatibility.
+ */
 export interface VegaMonacoEditorProps extends Omit<MonacoEditorProps, 'language'> {
     /**
      * Whether to enable Vega-Lite JSON schema validation
@@ -10,6 +13,8 @@ export interface VegaMonacoEditorProps extends Omit<MonacoEditorProps, 'language
 /**
  * A Monaco editor specialized for editing Vega-Lite specifications.
  * Automatically loads and configures the Vega-Lite JSON schema for validation.
+ *
+ * @deprecated Use VegaCodeMirrorEditor instead. This component is kept for backward compatibility.
  */
 export declare const VegaMonacoEditor: React.FC<VegaMonacoEditorProps>;
 //# sourceMappingURL=VegaMonacoEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VegaMonacoEditor.d.ts","sourceRoot":"","sources":["../../src/editor/VegaMonacoEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,iBAAiB,EACjB,UAAU,CACX;IACC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuE5D,CAAC"}
+{"version":3,"file":"VegaMonacoEditor.d.ts","sourceRoot":"","sources":["../../src/editor/VegaMonacoEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,iBAAiB,EACjB,UAAU,CACX;IACC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuE5D,CAAC"}

package/dist/editor/VegaMonacoEditor.js

@@ -5,6 +5,8 @@ import { loadVegaLiteSchema } from '../schema/vegaLiteSchema';
 /**
  * A Monaco editor specialized for editing Vega-Lite specifications.
  * Automatically loads and configures the Vega-Lite JSON schema for validation.
+ *
+ * @deprecated Use VegaCodeMirrorEditor instead. This component is kept for backward compatibility.
  */
 export const VegaMonacoEditor = ({ value, onChange, readOnly = false, className, enableSchemaValidation = true, onMount, options, ...props }) => {
     const monacoRef = useRef(null);

package/dist/editor/VegaMonacoEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaMonacoEditor.js","sourceRoot":"","sources":["../../src/editor/VegaMonacoEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,YAAY,EAAoB,MAAM,yBAAyB,CAAC;AACxE,OAAc,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAa5D;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACpC,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1C,4BAA4B;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,IACE,sBAAsB;YACtB,SAAS,CAAC,OAAO;YACjB,CAAC,mBAAmB,CAAC,OAAO,EAC5B,CAAC;YACD,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBACnC,IAAI,SAAS,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;oBAChC,mBAAmB,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;oBAC/C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,oBAAoB,GAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACvD,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,8CAA8C;QAC9C,IAAI,sBAAsB,EAAE,CAAC;YAC3B,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBACnC,IAAI,MAAM,EAAE,CAAC;oBACX,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;oBACpC,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,yBAAyB;QACzB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,CAAC,SAAS,CAAC,8BAA8B,CAAC,EAAE,GAAG,EAAE,CAAC;QAC1D,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,wCAAwC;QACxC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAC,MAAM,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE;YACP,aAAa,EAAE,IAAI;YACnB,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,aAAa;YAC9B,WAAW,EAAE,KAAK;YAClB,oBAAoB,EAAE,KAAK;YAC3B,GAAG,OAAO;SACX,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,mBAAmB,CAAC,MAAW,EAAE,MAAc;IACtD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC;QACvD,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE;YACP;gBACE,GAAG,EAAE,iDAAiD;gBACtD,SAAS,EAAE,CAAC,GAAG,CAAC;gBAChB,MAAM,EAAE,MAAiC;aAC1C;SACF;QACD,mBAAmB,EAAE,KAAK;KAC3B,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type {OnMount} from '@monaco-editor/react';\nimport {MonacoEditor, MonacoEditorProps} from '@sqlrooms/monaco-editor';\nimport React, {useEffect, useRef} from 'react';\nimport {loadVegaLiteSchema} from '../schema/vegaLiteSchema';\n\nexport interface VegaMonacoEditorProps extends Omit<\n  MonacoEditorProps,\n  'language'\n> {\n  /**\n   * Whether to enable Vega-Lite JSON schema validation\n   * @default true\n   */\n  enableSchemaValidation?: boolean;\n}\n\n/**\n * A Monaco editor specialized for editing Vega-Lite specifications.\n * Automatically loads and configures the Vega-Lite JSON schema for validation.\n */\nexport const VegaMonacoEditor: React.FC<VegaMonacoEditorProps> = ({\n  value,\n  onChange,\n  readOnly = false,\n  className,\n  enableSchemaValidation = true,\n  onMount,\n  options,\n  ...props\n}) => {\n  const monacoRef = useRef<any>(null);\n  const schemaConfiguredRef = useRef(false);\n\n  // Load and configure schema\n  useEffect(() => {\n    if (\n      enableSchemaValidation &&\n      monacoRef.current &&\n      !schemaConfiguredRef.current\n    ) {\n      loadVegaLiteSchema().then((schema) => {\n        if (monacoRef.current && schema) {\n          configureJsonSchema(monacoRef.current, schema);\n          schemaConfiguredRef.current = true;\n        }\n      });\n    }\n  }, [enableSchemaValidation]);\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    monacoRef.current = monaco;\n\n    // Configure JSON schema validation if enabled\n    if (enableSchemaValidation) {\n      loadVegaLiteSchema().then((schema) => {\n        if (schema) {\n          configureJsonSchema(monaco, schema);\n          schemaConfiguredRef.current = true;\n        }\n      });\n    }\n\n    // Format on initial load\n    setTimeout(() => {\n      editor.getAction('editor.action.formatDocument')?.run();\n    }, 100);\n\n    // Call the original onMount if provided\n    onMount?.(editor, monaco);\n  };\n\n  return (\n    <MonacoEditor\n      language=\"json\"\n      value={value}\n      onChange={onChange}\n      onMount={handleEditorDidMount}\n      className={className}\n      readOnly={readOnly}\n      options={{\n        formatOnPaste: true,\n        formatOnType: true,\n        folding: true,\n        foldingStrategy: 'indentation',\n        lineNumbers: 'off',\n        fixedOverflowWidgets: false,\n        ...options,\n      }}\n      {...props}\n    />\n  );\n};\n\n/**\n * Configure Monaco JSON schema validation for Vega-Lite\n */\nfunction configureJsonSchema(monaco: any, schema: object) {\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    schemas: [\n      {\n        uri: 'https://vega.github.io/schema/vega-lite/v5.json',\n        fileMatch: ['*'],\n        schema: schema as Record<string, unknown>,\n      },\n    ],\n    enableSchemaRequest: false,\n  });\n}\n"]}
+{"version":3,"file":"VegaMonacoEditor.js","sourceRoot":"","sources":["../../src/editor/VegaMonacoEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,YAAY,EAAoB,MAAM,yBAAyB,CAAC;AACxE,OAAc,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAgB5D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACpC,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1C,4BAA4B;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,IACE,sBAAsB;YACtB,SAAS,CAAC,OAAO;YACjB,CAAC,mBAAmB,CAAC,OAAO,EAC5B,CAAC;YACD,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBACnC,IAAI,SAAS,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;oBAChC,mBAAmB,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;oBAC/C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,oBAAoB,GAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACvD,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,8CAA8C;QAC9C,IAAI,sBAAsB,EAAE,CAAC;YAC3B,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBACnC,IAAI,MAAM,EAAE,CAAC;oBACX,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;oBACpC,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,yBAAyB;QACzB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,CAAC,SAAS,CAAC,8BAA8B,CAAC,EAAE,GAAG,EAAE,CAAC;QAC1D,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,wCAAwC;QACxC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAC,MAAM,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE;YACP,aAAa,EAAE,IAAI;YACnB,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,aAAa;YAC9B,WAAW,EAAE,KAAK;YAClB,oBAAoB,EAAE,KAAK;YAC3B,GAAG,OAAO;SACX,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,mBAAmB,CAAC,MAAW,EAAE,MAAc;IACtD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC;QACvD,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE;YACP;gBACE,GAAG,EAAE,iDAAiD;gBACtD,SAAS,EAAE,CAAC,GAAG,CAAC;gBAChB,MAAM,EAAE,MAAiC;aAC1C;SACF;QACD,mBAAmB,EAAE,KAAK;KAC3B,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type {OnMount} from '@monaco-editor/react';\nimport {MonacoEditor, MonacoEditorProps} from '@sqlrooms/monaco-editor';\nimport React, {useEffect, useRef} from 'react';\nimport {loadVegaLiteSchema} from '../schema/vegaLiteSchema';\n\n/**\n * @deprecated Use VegaCodeMirrorEditorProps instead. This interface is kept for backward compatibility.\n */\nexport interface VegaMonacoEditorProps extends Omit<\n  MonacoEditorProps,\n  'language'\n> {\n  /**\n   * Whether to enable Vega-Lite JSON schema validation\n   * @default true\n   */\n  enableSchemaValidation?: boolean;\n}\n\n/**\n * A Monaco editor specialized for editing Vega-Lite specifications.\n * Automatically loads and configures the Vega-Lite JSON schema for validation.\n *\n * @deprecated Use VegaCodeMirrorEditor instead. This component is kept for backward compatibility.\n */\nexport const VegaMonacoEditor: React.FC<VegaMonacoEditorProps> = ({\n  value,\n  onChange,\n  readOnly = false,\n  className,\n  enableSchemaValidation = true,\n  onMount,\n  options,\n  ...props\n}) => {\n  const monacoRef = useRef<any>(null);\n  const schemaConfiguredRef = useRef(false);\n\n  // Load and configure schema\n  useEffect(() => {\n    if (\n      enableSchemaValidation &&\n      monacoRef.current &&\n      !schemaConfiguredRef.current\n    ) {\n      loadVegaLiteSchema().then((schema) => {\n        if (monacoRef.current && schema) {\n          configureJsonSchema(monacoRef.current, schema);\n          schemaConfiguredRef.current = true;\n        }\n      });\n    }\n  }, [enableSchemaValidation]);\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    monacoRef.current = monaco;\n\n    // Configure JSON schema validation if enabled\n    if (enableSchemaValidation) {\n      loadVegaLiteSchema().then((schema) => {\n        if (schema) {\n          configureJsonSchema(monaco, schema);\n          schemaConfiguredRef.current = true;\n        }\n      });\n    }\n\n    // Format on initial load\n    setTimeout(() => {\n      editor.getAction('editor.action.formatDocument')?.run();\n    }, 100);\n\n    // Call the original onMount if provided\n    onMount?.(editor, monaco);\n  };\n\n  return (\n    <MonacoEditor\n      language=\"json\"\n      value={value}\n      onChange={onChange}\n      onMount={handleEditorDidMount}\n      className={className}\n      readOnly={readOnly}\n      options={{\n        formatOnPaste: true,\n        formatOnType: true,\n        folding: true,\n        foldingStrategy: 'indentation',\n        lineNumbers: 'off',\n        fixedOverflowWidgets: false,\n        ...options,\n      }}\n      {...props}\n    />\n  );\n};\n\n/**\n * Configure Monaco JSON schema validation for Vega-Lite\n */\nfunction configureJsonSchema(monaco: any, schema: object) {\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    schemas: [\n      {\n        uri: 'https://vega.github.io/schema/vega-lite/v5.json',\n        fileMatch: ['*'],\n        schema: schema as Record<string, unknown>,\n      },\n    ],\n    enableSchemaRequest: false,\n  });\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"VegaSpecEditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/VegaSpecEditorPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0ClE,CAAC"}
+{"version":3,"file":"VegaSpecEditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/VegaSpecEditorPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuDlE,CAAC"}

package/dist/editor/VegaSpecEditorPanel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@sqlrooms/ui';
+import { cn, CopyButton } from '@sqlrooms/ui';
 import { AlertCircle } from 'lucide-react';
+import { VegaCodeMirrorEditor } from './VegaCodeMirrorEditor';
 import { useVegaEditorContext } from './VegaEditorContext';
-import { VegaMonacoEditor } from './VegaMonacoEditor';
 /**
  * Spec editor panel subcomponent for VegaLiteChart.Container.
  * Renders a Monaco editor with Vega-Lite JSON schema validation.
@@ -20,10 +20,14 @@ import { VegaMonacoEditor } from './VegaMonacoEditor';
 export const VegaSpecEditorPanel = ({ className, title = 'Vega-Lite Spec', }) => {
     const { state, actions, editable } = useVegaEditorContext();
     const showHeader = title !== '';
-    return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [showHeader && (_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: title }), state.isSpecDirty && (_jsx("span", { className: "text-muted-foreground text-xs", children: "Modified" }))] })), _jsx("div", { className: "relative flex-1", children: _jsx(VegaMonacoEditor, { className: "absolute inset-0 h-full w-full", value: state.editedSpecString, onChange: (value) => {
-                        if (value !== undefined) {
-                            actions.setEditedSpec(value);
-                        }
-                    }, readOnly: !editable }) }), state.specParseError && (_jsxs("div", { className: "bg-destructive/90 text-destructive-foreground flex items-center gap-2 px-3 py-2 backdrop-blur-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate text-xs", children: state.specParseError })] }))] }));
+    return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [showHeader && (_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: title }), state.isSpecDirty && (_jsx("span", { className: "text-muted-foreground text-xs", children: "Modified" }))] })), _jsxs("div", { className: "relative flex-1", children: [_jsx(VegaCodeMirrorEditor, { className: "absolute inset-0 h-full w-full", value: state.editedSpecString, onChange: (value) => {
+                            if (value !== undefined) {
+                                actions.setEditedSpec(value);
+                            }
+                        }, readOnly: !editable, options: {
+                            lineNumbers: true,
+                            lineWrapping: false,
+                            foldGutter: true,
+                        } }), _jsx("div", { className: "bg-background absolute top-2 right-2 rounded-md border", children: _jsx(CopyButton, { text: state.editedSpecString, size: "xs", tooltipLabel: "Copy spec", disabled: !state.editedSpecString.trim() }) })] }), state.specParseError && (_jsxs("div", { className: "bg-destructive/90 text-destructive-foreground flex items-center gap-2 px-3 py-2 backdrop-blur-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate text-xs", children: state.specParseError })] }))] }));
 };
 //# sourceMappingURL=VegaSpecEditorPanel.js.map

package/dist/editor/VegaSpecEditorPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaSpecEditorPanel.js","sourceRoot":"","sources":["../../src/editor/VegaSpecEditorPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAcpD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,EACT,KAAK,GAAG,gBAAgB,GACzB,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAC1D,MAAM,UAAU,GAAG,KAAK,KAAK,EAAE,CAAC;IAEhC,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,aAElD,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,sDAAsD,aACnE,eAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAQ,EACnD,KAAK,CAAC,WAAW,IAAI,CACpB,eAAM,SAAS,EAAC,+BAA+B,yBAAgB,CAChE,IACG,CACP,EAGD,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,gBAAgB,IACf,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;4BACxB,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC/B,CAAC;oBACH,CAAC,EACD,QAAQ,EAAE,CAAC,QAAQ,GACnB,GACE,EAGL,KAAK,CAAC,cAAc,IAAI,CACvB,eAAK,SAAS,EAAC,kGAAkG,aAC/G,KAAC,WAAW,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC5C,eAAM,SAAS,EAAC,kBAAkB,YAAE,KAAK,CAAC,cAAc,GAAQ,IAC5D,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport {AlertCircle} from 'lucide-react';\nimport React from 'react';\nimport {useVegaEditorContext} from './VegaEditorContext';\nimport {VegaMonacoEditor} from './VegaMonacoEditor';\n\nexport interface VegaSpecEditorPanelProps {\n  /**\n   * Custom class name for the panel\n   */\n  className?: string;\n  /**\n   * Title shown in the panel header\n   * @default \"Vega-Lite Spec\"\n   */\n  title?: string;\n}\n\n/**\n * Spec editor panel subcomponent for VegaLiteChart.Container.\n * Renders a Monaco editor with Vega-Lite JSON schema validation.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec}>\n *   <VegaLiteChart.Chart />\n *   <VegaLiteChart.SpecEditor />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaSpecEditorPanel: React.FC<VegaSpecEditorPanelProps> = ({\n  className,\n  title = 'Vega-Lite Spec',\n}) => {\n  const {state, actions, editable} = useVegaEditorContext();\n  const showHeader = title !== '';\n\n  return (\n    <div className={cn('flex h-full flex-col', className)}>\n      {/* Header - only show if title is provided */}\n      {showHeader && (\n        <div className=\"flex items-center justify-between border-b px-3 py-2\">\n          <span className=\"text-sm font-medium\">{title}</span>\n          {state.isSpecDirty && (\n            <span className=\"text-muted-foreground text-xs\">Modified</span>\n          )}\n        </div>\n      )}\n\n      {/* Editor */}\n      <div className=\"relative flex-1\">\n        <VegaMonacoEditor\n          className=\"absolute inset-0 h-full w-full\"\n          value={state.editedSpecString}\n          onChange={(value) => {\n            if (value !== undefined) {\n              actions.setEditedSpec(value);\n            }\n          }}\n          readOnly={!editable}\n        />\n      </div>\n\n      {/* Spec parse error */}\n      {state.specParseError && (\n        <div className=\"bg-destructive/90 text-destructive-foreground flex items-center gap-2 px-3 py-2 backdrop-blur-sm\">\n          <AlertCircle className=\"h-4 w-4 shrink-0\" />\n          <span className=\"truncate text-xs\">{state.specParseError}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaSpecEditorPanel.js","sourceRoot":"","sources":["../../src/editor/VegaSpecEditorPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAczD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,EACT,KAAK,GAAG,gBAAgB,GACzB,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAC1D,MAAM,UAAU,GAAG,KAAK,KAAK,EAAE,CAAC;IAEhC,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,aAElD,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,sDAAsD,aACnE,eAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAQ,EACnD,KAAK,CAAC,WAAW,IAAI,CACpB,eAAM,SAAS,EAAC,+BAA+B,yBAAgB,CAChE,IACG,CACP,EAGD,eAAK,SAAS,EAAC,iBAAiB,aAC9B,KAAC,oBAAoB,IACnB,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gCACxB,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;4BAC/B,CAAC;wBACH,CAAC,EACD,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE;4BACP,WAAW,EAAE,IAAI;4BACjB,YAAY,EAAE,KAAK;4BACnB,UAAU,EAAE,IAAI;yBACjB,GACD,EACF,cAAK,SAAS,EAAC,wDAAwD,YACrE,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,gBAAgB,EAC5B,IAAI,EAAC,IAAI,EACT,YAAY,EAAC,WAAW,EACxB,QAAQ,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,GACxC,GACE,IACF,EAGL,KAAK,CAAC,cAAc,IAAI,CACvB,eAAK,SAAS,EAAC,kGAAkG,aAC/G,KAAC,WAAW,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC5C,eAAM,SAAS,EAAC,kBAAkB,YAAE,KAAK,CAAC,cAAc,GAAQ,IAC5D,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn, CopyButton} from '@sqlrooms/ui';\nimport {AlertCircle} from 'lucide-react';\nimport React from 'react';\nimport {VegaCodeMirrorEditor} from './VegaCodeMirrorEditor';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaSpecEditorPanelProps {\n  /**\n   * Custom class name for the panel\n   */\n  className?: string;\n  /**\n   * Title shown in the panel header\n   * @default \"Vega-Lite Spec\"\n   */\n  title?: string;\n}\n\n/**\n * Spec editor panel subcomponent for VegaLiteChart.Container.\n * Renders a Monaco editor with Vega-Lite JSON schema validation.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec}>\n *   <VegaLiteChart.Chart />\n *   <VegaLiteChart.SpecEditor />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaSpecEditorPanel: React.FC<VegaSpecEditorPanelProps> = ({\n  className,\n  title = 'Vega-Lite Spec',\n}) => {\n  const {state, actions, editable} = useVegaEditorContext();\n  const showHeader = title !== '';\n\n  return (\n    <div className={cn('flex h-full flex-col', className)}>\n      {/* Header - only show if title is provided */}\n      {showHeader && (\n        <div className=\"flex items-center justify-between border-b px-3 py-2\">\n          <span className=\"text-sm font-medium\">{title}</span>\n          {state.isSpecDirty && (\n            <span className=\"text-muted-foreground text-xs\">Modified</span>\n          )}\n        </div>\n      )}\n\n      {/* Editor */}\n      <div className=\"relative flex-1\">\n        <VegaCodeMirrorEditor\n          className=\"absolute inset-0 h-full w-full\"\n          value={state.editedSpecString}\n          onChange={(value) => {\n            if (value !== undefined) {\n              actions.setEditedSpec(value);\n            }\n          }}\n          readOnly={!editable}\n          options={{\n            lineNumbers: true,\n            lineWrapping: false,\n            foldGutter: true,\n          }}\n        />\n        <div className=\"bg-background absolute top-2 right-2 rounded-md border\">\n          <CopyButton\n            text={state.editedSpecString}\n            size=\"xs\"\n            tooltipLabel=\"Copy spec\"\n            disabled={!state.editedSpecString.trim()}\n          />\n        </div>\n      </div>\n\n      {/* Spec parse error */}\n      {state.specParseError && (\n        <div className=\"bg-destructive/90 text-destructive-foreground flex items-center gap-2 px-3 py-2 backdrop-blur-sm\">\n          <AlertCircle className=\"h-4 w-4 shrink-0\" />\n          <span className=\"truncate text-xs\">{state.specParseError}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/editor/VegaSqlEditorPanel.d.ts

@@ -17,7 +17,7 @@ export interface VegaSqlEditorPanelProps {
 }
 /**
  * SQL editor panel subcomponent for VegaLiteChart.Container.
- * Renders a Monaco editor with SQL syntax highlighting and a query preview.
+ * Renders a CodeMirror editor with SQL syntax highlighting and a query preview.
  *
  * Must be used within a VegaLiteChart.Container component.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"VegaSqlEditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/VegaSqlEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsFhE,CAAC"}
+{"version":3,"file":"VegaSqlEditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/VegaSqlEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6FhE,CAAC"}

package/dist/editor/VegaSqlEditorPanel.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SqlMonacoEditor, SqlQueryPreview } from '@sqlrooms/sql-editor';
-import { Button, cn } from '@sqlrooms/ui';
+import { SqlCodeMirrorEditor, SqlQueryPreview } from '@sqlrooms/sql-editor';
+import { Button, cn, CopyButton } from '@sqlrooms/ui';
 import { PlayIcon } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useVegaEditorContext } from './VegaEditorContext';
 /**
  * SQL editor panel subcomponent for VegaLiteChart.Container.
- * Renders a Monaco editor with SQL syntax highlighting and a query preview.
+ * Renders a CodeMirror editor with SQL syntax highlighting and a query preview.
  *
  * Must be used within a VegaLiteChart.Container component.
  *
@@ -29,13 +29,12 @@ export const VegaSqlEditorPanel = ({ className, title = 'SQL Query', maxPreviewR
     const showHeader = title !== '';
     return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [showHeader ? (_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: title }), _jsxs("div", { className: "flex items-center gap-2", children: [state.isSqlDirty && (_jsx("span", { className: "text-muted-foreground text-xs", children: "Modified" })), editable && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: handleRunPreview, disabled: !state.editedSql.trim(), children: [_jsx(PlayIcon, { className: "mr-1 h-3 w-3" }), "Preview"] }))] })] })) : (
             /* Toolbar when no header - just show preview button */
-            editable && (_jsx("div", { className: "flex items-center justify-end border-b px-2 py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: handleRunPreview, disabled: !state.editedSql.trim(), children: [_jsx(PlayIcon, { className: "mr-1 h-3 w-3" }), "Preview"] }) }))), _jsx("div", { className: "relative min-h-[100px] flex-1", children: _jsx(SqlMonacoEditor, { className: "absolute inset-0 h-full w-full", value: state.editedSql, onChange: (value) => {
-                        if (value !== undefined) {
+            editable && (_jsx("div", { className: "flex items-center justify-end border-b px-2 py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: handleRunPreview, disabled: !state.editedSql.trim(), children: [_jsx(PlayIcon, { className: "mr-1 h-3 w-3" }), "Preview"] }) }))), _jsxs("div", { className: "relative min-h-[100px] flex-1", children: [_jsx(SqlCodeMirrorEditor, { className: "absolute inset-0 h-full w-full", value: state.editedSql, onChange: (value) => {
                             actions.setEditedSql(value);
-                        }
-                    }, options: {
-                        lineNumbers: 'off',
-                        fixedOverflowWidgets: false,
-                    }, readOnly: !editable }) }), previewQuery && showPreview && (_jsx("div", { className: "max-h-[200px] overflow-auto border-t", children: _jsx(SqlQueryPreview, { query: previewQuery, defaultLimit: maxPreviewRows, limitOptions: [100, 500, 1000] }) }))] }));
+                        }, options: {
+                            lineNumbers: true,
+                            lineWrapping: true,
+                            foldGutter: true,
+                        }, readOnly: !editable }), _jsx("div", { className: "bg-background absolute top-2 right-2 rounded-md border", children: _jsx(CopyButton, { text: state.editedSql, size: "xs", tooltipLabel: "Copy SQL", disabled: !state.editedSql.trim() }) })] }), previewQuery && showPreview && (_jsx("div", { className: "max-h-[200px] overflow-auto border-t", children: _jsx(SqlQueryPreview, { query: previewQuery, defaultLimit: maxPreviewRows, limitOptions: [100, 500, 1000] }) }))] }));
 };
 //# sourceMappingURL=VegaSqlEditorPanel.js.map

package/dist/editor/VegaSqlEditorPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaSqlEditorPanel.js","sourceRoot":"","sources":["../../src/editor/VegaSqlEditorPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SqlMonacoEditor, SqlQueryPreview} from '@sqlrooms/sql-editor';\nimport {Button, cn} from '@sqlrooms/ui';\nimport {PlayIcon} from 'lucide-react';\nimport React, {useCallback, useState} from 'react';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaSqlEditorPanelProps {\n  /**\n   * Custom class name for the panel\n   */\n  className?: string;\n  /**\n   * Title shown in the panel header\n   * @default \"SQL Query\"\n   */\n  title?: string;\n  /**\n   * Max rows to fetch for preview\n   * @default 100\n   */\n  maxPreviewRows?: number;\n}\n\n/**\n * SQL editor panel subcomponent for VegaLiteChart.Container.\n * Renders a Monaco editor with SQL syntax highlighting and a query preview.\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.SqlEditor />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaSqlEditorPanel: React.FC<VegaSqlEditorPanelProps> = ({\n  className,\n  title = 'SQL Query',\n  maxPreviewRows = 100,\n}) => {\n  const {state, actions, editable} = useVegaEditorContext();\n  const [previewQuery, setPreviewQuery] = useState<string>('');\n  const [showPreview, setShowPreview] = useState(false);\n\n  const handleRunPreview = useCallback(() => {\n    setPreviewQuery(state.editedSql);\n    setShowPreview(true);\n  }, [state.editedSql]);\n\n  const showHeader = title !== '';\n\n  return (\n    <div className={cn('flex h-full flex-col', className)}>\n      {/* Header - only show if title is provided */}\n      {showHeader ? (\n        <div className=\"flex items-center justify-between border-b px-3 py-2\">\n          <span className=\"text-sm font-medium\">{title}</span>\n          <div className=\"flex items-center gap-2\">\n            {state.isSqlDirty && (\n              <span className=\"text-muted-foreground text-xs\">Modified</span>\n            )}\n            {editable && (\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                onClick={handleRunPreview}\n                disabled={!state.editedSql.trim()}\n              >\n                <PlayIcon className=\"mr-1 h-3 w-3\" />\n                Preview\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        /* Toolbar when no header - just show preview button */\n        editable && (\n          <div className=\"flex items-center justify-end border-b px-2 py-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              onClick={handleRunPreview}\n              disabled={!state.editedSql.trim()}\n            >\n              <PlayIcon className=\"mr-1 h-3 w-3\" />\n              Preview\n            </Button>\n          </div>\n        )\n      )}\n\n      {/* Editor */}\n      <div className=\"relative min-h-[100px] flex-1\">\n        <SqlMonacoEditor\n          className=\"absolute inset-0 h-full w-full\"\n          value={state.editedSql}\n          onChange={(value) => {\n            if (value !== undefined) {\n              actions.setEditedSql(value);\n            }\n          }}\n          options={{\n            lineNumbers: 'off',\n            fixedOverflowWidgets: false,\n          }}\n          readOnly={!editable}\n        />\n      </div>\n\n      {/* Preview Results */}\n      {previewQuery && showPreview && (\n        <div className=\"max-h-[200px] overflow-auto border-t\">\n          <SqlQueryPreview\n            query={previewQuery}\n            defaultLimit={maxPreviewRows}\n            limitOptions={[100, 500, 1000]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaSqlEditorPanel.js","sourceRoot":"","sources":["../../src/editor/VegaSqlEditorPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SqlCodeMirrorEditor, SqlQueryPreview} from '@sqlrooms/sql-editor';\nimport {Button, cn, CopyButton} from '@sqlrooms/ui';\nimport {PlayIcon} from 'lucide-react';\nimport React, {useCallback, useState} from 'react';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaSqlEditorPanelProps {\n  /**\n   * Custom class name for the panel\n   */\n  className?: string;\n  /**\n   * Title shown in the panel header\n   * @default \"SQL Query\"\n   */\n  title?: string;\n  /**\n   * Max rows to fetch for preview\n   * @default 100\n   */\n  maxPreviewRows?: number;\n}\n\n/**\n * SQL editor panel subcomponent for VegaLiteChart.Container.\n * Renders a CodeMirror editor with SQL syntax highlighting and a query preview.\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.SqlEditor />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaSqlEditorPanel: React.FC<VegaSqlEditorPanelProps> = ({\n  className,\n  title = 'SQL Query',\n  maxPreviewRows = 100,\n}) => {\n  const {state, actions, editable} = useVegaEditorContext();\n  const [previewQuery, setPreviewQuery] = useState<string>('');\n  const [showPreview, setShowPreview] = useState(false);\n\n  const handleRunPreview = useCallback(() => {\n    setPreviewQuery(state.editedSql);\n    setShowPreview(true);\n  }, [state.editedSql]);\n\n  const showHeader = title !== '';\n\n  return (\n    <div className={cn('flex h-full flex-col', className)}>\n      {/* Header - only show if title is provided */}\n      {showHeader ? (\n        <div className=\"flex items-center justify-between border-b px-3 py-2\">\n          <span className=\"text-sm font-medium\">{title}</span>\n          <div className=\"flex items-center gap-2\">\n            {state.isSqlDirty && (\n              <span className=\"text-muted-foreground text-xs\">Modified</span>\n            )}\n            {editable && (\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                onClick={handleRunPreview}\n                disabled={!state.editedSql.trim()}\n              >\n                <PlayIcon className=\"mr-1 h-3 w-3\" />\n                Preview\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        /* Toolbar when no header - just show preview button */\n        editable && (\n          <div className=\"flex items-center justify-end border-b px-2 py-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              onClick={handleRunPreview}\n              disabled={!state.editedSql.trim()}\n            >\n              <PlayIcon className=\"mr-1 h-3 w-3\" />\n              Preview\n            </Button>\n          </div>\n        )\n      )}\n\n      {/* Editor */}\n      <div className=\"relative min-h-[100px] flex-1\">\n        <SqlCodeMirrorEditor\n          className=\"absolute inset-0 h-full w-full\"\n          value={state.editedSql}\n          onChange={(value) => {\n            actions.setEditedSql(value);\n          }}\n          options={{\n            lineNumbers: true,\n            lineWrapping: true,\n            foldGutter: true,\n          }}\n          readOnly={!editable}\n        />\n        <div className=\"bg-background absolute top-2 right-2 rounded-md border\">\n          <CopyButton\n            text={state.editedSql}\n            size=\"xs\"\n            tooltipLabel=\"Copy SQL\"\n            disabled={!state.editedSql.trim()}\n          />\n        </div>\n      </div>\n\n      {/* Preview Results */}\n      {previewQuery && showPreview && (\n        <div className=\"max-h-[200px] overflow-auto border-t\">\n          <SqlQueryPreview\n            query={previewQuery}\n            defaultLimit={maxPreviewRows}\n            limitOptions={[100, 500, 1000]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}