@sqlrooms/mosaic 0.29.0-rc.5 → 0.29.0-rc.6

package/dist/chart/MosaicDashboardVgPlotChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardVgPlotChart.js","sourceRoot":"","sources":["../../src/chart/MosaicDashboardVgPlotChart.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAS3C,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,EAAE,EAAE;IAChC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,OAAO,CACL,cAAK,SAAS,EAAC,kDAAkD,YAC/D,KAAC,0BAA0B,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,GAC7C,CACP,CAAC;IACJ,CAAC;IAED,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AAChF,CAAC,CAAC","sourcesContent":["import {FC} from 'react';\nimport {UseGenerateSpecResult} from './useGenerateSpec';\nimport {MosaicDashboardVgPlotError} from './MosaicDashboardVgPlotError';\nimport {VgPlotChart} from '../VgPlotChart';\nimport {ChartRetainer, BrushSelectionParams} from '../chart-types/base-types';\n\nexport type MosaicDashboardVgPlotChartProps = {\n  spec: UseGenerateSpecResult;\n  retention: ChartRetainer;\n  params: BrushSelectionParams | undefined;\n};\n\nexport const MosaicDashboardVgPlotChart: FC<\n  MosaicDashboardVgPlotChartProps\n> = ({spec, retention, params}) => {\n  if (spec.error) {\n    return (\n      <div className=\"flex h-full flex-col items-center justify-center\">\n        <MosaicDashboardVgPlotError error={spec.error} />\n      </div>\n    );\n  }\n\n  return <VgPlotChart spec={spec.spec} params={params} retention={retention} />;\n};\n"]}
+{"version":3,"file":"MosaicDashboardVgPlotChart.js","sourceRoot":"","sources":["../../src/chart/MosaicDashboardVgPlotChart.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAiB3C,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EACH,IAAI,EACJ,SAAS,EACT,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,oBAAoB,GACrB,EAAE,EAAE;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,OAAO,CACL,cAAK,SAAS,EAAC,kDAAkD,YAC/D,KAAC,0BAA0B,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,GAC7C,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,oBAAoB,EAAE,oBAAoB,GAC1C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC} from 'react';\nimport {UseGenerateSpecResult} from './useGenerateSpec';\nimport {MosaicDashboardVgPlotError} from './MosaicDashboardVgPlotError';\nimport {VgPlotChart} from '../VgPlotChart';\nimport {ChartRetainer, BrushSelectionParams} from '../chart-types/base-types';\nimport type {\n  ChartDataPolicy,\n  ChartRuntimeIssueContext,\n  ChartRuntimeIssueReporter,\n} from '../chart-runtime';\n\nexport type MosaicDashboardVgPlotChartProps = {\n  spec: UseGenerateSpecResult;\n  retention: ChartRetainer;\n  params: BrushSelectionParams | undefined;\n  dataPolicy?: ChartDataPolicy | null;\n  runtimeIssueContext: ChartRuntimeIssueContext;\n  runtimeIssueReporter: ChartRuntimeIssueReporter;\n};\n\nexport const MosaicDashboardVgPlotChart: FC<\n  MosaicDashboardVgPlotChartProps\n> = ({\n  spec,\n  retention,\n  params,\n  dataPolicy,\n  runtimeIssueContext,\n  runtimeIssueReporter,\n}) => {\n  if (spec.error) {\n    return (\n      <div className=\"flex h-full flex-col items-center justify-center\">\n        <MosaicDashboardVgPlotError error={spec.error} />\n      </div>\n    );\n  }\n\n  return (\n    <VgPlotChart\n      spec={spec.spec}\n      params={params}\n      retention={retention}\n      dataPolicy={dataPolicy}\n      runtimeIssueContext={runtimeIssueContext}\n      runtimeIssueReporter={runtimeIssueReporter}\n    />\n  );\n};\n"]}

package/dist/chart/addChartPanelAction.d.ts

@@ -0,0 +1,3 @@
+import { type MosaicDashboardAddPanelAction } from '../dashboard/action-types';
+export declare const addChartPanelAction: MosaicDashboardAddPanelAction;
+//# sourceMappingURL=addChartPanelAction.d.ts.map

package/dist/chart/addChartPanelAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addChartPanelAction.d.ts","sourceRoot":"","sources":["../../src/chart/addChartPanelAction.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,6BAA6B,EAAC,MAAM,2BAA2B,CAAC;AAM7E,eAAO,MAAM,mBAAmB,EAAE,6BAWjC,CAAC"}

package/dist/chart/addChartPanelAction.js

@@ -0,0 +1,14 @@
+import { BarChart3 } from 'lucide-react';
+import { createMosaicDashboardChartPanelConfig, MOSAIC_DASHBOARD_CHART_PANEL_TYPE, } from '../dashboard/MosaicDashboardSlice';
+export const addChartPanelAction = {
+    type: MOSAIC_DASHBOARD_CHART_PANEL_TYPE,
+    label: 'Chart',
+    icon: BarChart3,
+    isEnabled: ({ chartTypes }) => Boolean(chartTypes?.length),
+    createPanel: ({ chartTypes }) => createMosaicDashboardChartPanelConfig('New Chart', {
+        chartType: chartTypes?.[0]?.id ?? 'histogram',
+        settings: {},
+        settingsOpen: true,
+    }),
+};
+//# sourceMappingURL=addChartPanelAction.js.map

package/dist/chart/addChartPanelAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addChartPanelAction.js","sourceRoot":"","sources":["../../src/chart/addChartPanelAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EACL,qCAAqC,EACrC,iCAAiC,GAClC,MAAM,mCAAmC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAkC;IAChE,IAAI,EAAE,iCAAiC;IACvC,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,CAAC,EAAC,UAAU,EAAC,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC;IACxD,WAAW,EAAE,CAAC,EAAC,UAAU,EAAC,EAAE,EAAE,CAC5B,qCAAqC,CAAC,WAAW,EAAE;QACjD,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,WAAW;QAC7C,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,IAAI;KACnB,CAAC;CACL,CAAC","sourcesContent":["import {BarChart3} from 'lucide-react';\nimport {type MosaicDashboardAddPanelAction} from '../dashboard/action-types';\nimport {\n  createMosaicDashboardChartPanelConfig,\n  MOSAIC_DASHBOARD_CHART_PANEL_TYPE,\n} from '../dashboard/MosaicDashboardSlice';\n\nexport const addChartPanelAction: MosaicDashboardAddPanelAction = {\n  type: MOSAIC_DASHBOARD_CHART_PANEL_TYPE,\n  label: 'Chart',\n  icon: BarChart3,\n  isEnabled: ({chartTypes}) => Boolean(chartTypes?.length),\n  createPanel: ({chartTypes}) =>\n    createMosaicDashboardChartPanelConfig('New Chart', {\n      chartType: chartTypes?.[0]?.id ?? 'histogram',\n      settings: {},\n      settingsOpen: true,\n    }),\n};\n"]}

package/dist/chart/chart-settings/ChartSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettings.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAC,KAAK,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAKnE,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAyGD,eAAO,MAAM,aAAa;;;;;;;;;;;kBApFuB,MAAM,IAAI;;;iBAed,MAAM,IAAI;;CA6EtD,CAAC"}
+{"version":3,"file":"ChartSettings.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAC,KAAK,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAOnE,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAiHD,eAAO,MAAM,aAAa;;;;;;;;;;;kBA5FuB,MAAM,IAAI;;;iBAed,MAAM,IAAI;;CAqFtD,CAAC"}

package/dist/chart/chart-settings/ChartSettings.js

@@ -21,6 +21,8 @@ import { ChartSettingsProvider, useChartSettingsContext, } from './ChartSettings
 import { Button } from '@sqlrooms/ui';
 import { CodeIcon, XIcon } from 'lucide-react';
 import { useChartTypeDefinition } from '../../chart-types/useChartTypeDefinition';
+import { Field } from '../../chart-builders/Field';
+import { useColumnsContext } from '../../chart-builders/ColumnsContext';
 const ChartSettingsRoot = ({ tableName, config, columns, onChange, children, }) => {
     return (_jsx(ChartSettingsProvider, { tableName: tableName, config: config, columns: columns, onChange: onChange, children: children }));
 };
@@ -46,16 +48,17 @@ const ChartSettingsTypeSelector = () => {
             settingsOpen: config.settingsOpen,
         });
     };
-    return (_jsx(ChartTypeSelector, { value: config.chartType, onChange: handleChartTypeChange }));
+    return (_jsx(Field, { label: "Chart type", required: true, children: _jsx(ChartTypeSelector, { value: config.chartType, onChange: handleChartTypeChange }) }));
 };
 const ChartSettingsFields = () => {
-    const { config, columns } = useChartSettingsContext();
+    const { config } = useChartSettingsContext();
+    const { columns } = useColumnsContext();
     const chartTypeDef = useChartTypeDefinition(config.chartType);
     if (!chartTypeDef) {
-        return (_jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: ["Unknown chart type: ", config.chartType] }));
+        return (_jsx(Field, { label: "Chart type", required: true, children: _jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: ["Unknown chart type: ", config.chartType] }) }));
     }
     if (columns.length === 0) {
-        return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "No columns available" }));
+        return (_jsx(Field, { label: "Columns", required: true, children: _jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "No columns available" }) }));
     }
     return createElement(chartTypeDef.settingsComponent);
 };

package/dist/chart/chart-settings/ChartSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettings.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Chart settings compound component for configuring chart types and their parameters.\n *\n * @example\n * ```tsx\n * <ChartSettings.Root\n *   tableName={tableName}\n *   config={config}\n *   columns={columns}\n *   onChange={handleChange}\n * >\n *   <ChartSettings.TypeSelector />\n *   <ChartSettings.Fields />\n * </ChartSettings.Root>\n * ```\n */\nimport {type FC, type PropsWithChildren, createElement} from 'react';\nimport {ChartTypeSelector} from './ChartTypeSelector';\nimport {\n  ChartSettingsProvider,\n  useChartSettingsContext,\n} from './ChartSettingsContext';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport {type ChartConfig, type ChartType} from '../../chart-types';\nimport {Button} from '@sqlrooms/ui';\nimport {CodeIcon, XIcon} from 'lucide-react';\nimport {useChartTypeDefinition} from '../../chart-types/useChartTypeDefinition';\n\ninterface ChartSettingsRootProps {\n  tableName?: string;\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n}\n\nconst ChartSettingsRoot: FC<PropsWithChildren<ChartSettingsRootProps>> = ({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}) => {\n  return (\n    <ChartSettingsProvider\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={onChange}\n    >\n      {children}\n    </ChartSettingsProvider>\n  );\n};\n\nconst ChartSettingsViewSpecButton: FC<{onClick?: () => void}> = ({onClick}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      title=\"View spec\"\n      aria-label=\"View spec\"\n    >\n      <CodeIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst ChartSettingsCloseButton: FC<{onClick: () => void}> = ({onClick}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      aria-label=\"Close\"\n    >\n      <XIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst ChartSettingsHeader: FC<PropsWithChildren> = ({children}) => {\n  return (\n    <div className=\"flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium\">\n      {children}\n    </div>\n  );\n};\n\nconst ChartSettingsContent: FC<PropsWithChildren> = ({children}) => {\n  return <div className=\"flex flex-col gap-2 p-2\">{children}</div>;\n};\n\nconst ChartSettingsTypeSelector: FC = () => {\n  const {config, onChange} = useChartSettingsContext();\n\n  const handleChartTypeChange = (newChartType: ChartType) => {\n    // When changing chart type, clear settings\n    onChange({\n      chartType: newChartType,\n      settings: {},\n      settingsOpen: config.settingsOpen,\n    });\n  };\n\n  return (\n    <ChartTypeSelector\n      value={config.chartType}\n      onChange={handleChartTypeChange}\n    />\n  );\n};\n\nconst ChartSettingsFields: FC = () => {\n  const {config, columns} = useChartSettingsContext();\n  const chartTypeDef = useChartTypeDefinition(config.chartType);\n\n  if (!chartTypeDef) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n        Unknown chart type: {config.chartType}\n      </div>\n    );\n  }\n\n  if (columns.length === 0) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n        No columns available\n      </div>\n    );\n  }\n\n  return createElement(chartTypeDef.settingsComponent);\n};\n\nexport const ChartSettings = {\n  Root: ChartSettingsRoot,\n  Header: ChartSettingsHeader,\n  Content: ChartSettingsContent,\n  TypeSelector: ChartSettingsTypeSelector,\n  Fields: ChartSettingsFields,\n  ViewSpecButton: ChartSettingsViewSpecButton,\n  CloseButton: ChartSettingsCloseButton,\n};\n"]}
+{"version":3,"file":"ChartSettings.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Chart settings compound component for configuring chart types and their parameters.\n *\n * @example\n * ```tsx\n * <ChartSettings.Root\n *   tableName={tableName}\n *   config={config}\n *   columns={columns}\n *   onChange={handleChange}\n * >\n *   <ChartSettings.TypeSelector />\n *   <ChartSettings.Fields />\n * </ChartSettings.Root>\n * ```\n */\nimport {type FC, type PropsWithChildren, createElement} from 'react';\nimport {ChartTypeSelector} from './ChartTypeSelector';\nimport {\n  ChartSettingsProvider,\n  useChartSettingsContext,\n} from './ChartSettingsContext';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport {type ChartConfig, type ChartType} from '../../chart-types';\nimport {Button} from '@sqlrooms/ui';\nimport {CodeIcon, XIcon} from 'lucide-react';\nimport {useChartTypeDefinition} from '../../chart-types/useChartTypeDefinition';\nimport {Field} from '../../chart-builders/Field';\nimport {useColumnsContext} from '../../chart-builders/ColumnsContext';\n\ninterface ChartSettingsRootProps {\n  tableName?: string;\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n}\n\nconst ChartSettingsRoot: FC<PropsWithChildren<ChartSettingsRootProps>> = ({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}) => {\n  return (\n    <ChartSettingsProvider\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={onChange}\n    >\n      {children}\n    </ChartSettingsProvider>\n  );\n};\n\nconst ChartSettingsViewSpecButton: FC<{onClick?: () => void}> = ({onClick}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      title=\"View spec\"\n      aria-label=\"View spec\"\n    >\n      <CodeIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst ChartSettingsCloseButton: FC<{onClick: () => void}> = ({onClick}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      aria-label=\"Close\"\n    >\n      <XIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst ChartSettingsHeader: FC<PropsWithChildren> = ({children}) => {\n  return (\n    <div className=\"flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium\">\n      {children}\n    </div>\n  );\n};\n\nconst ChartSettingsContent: FC<PropsWithChildren> = ({children}) => {\n  return <div className=\"flex flex-col gap-2 p-2\">{children}</div>;\n};\n\nconst ChartSettingsTypeSelector: FC = () => {\n  const {config, onChange} = useChartSettingsContext();\n\n  const handleChartTypeChange = (newChartType: ChartType) => {\n    // When changing chart type, clear settings\n    onChange({\n      chartType: newChartType,\n      settings: {},\n      settingsOpen: config.settingsOpen,\n    });\n  };\n\n  return (\n    <Field label=\"Chart type\" required>\n      <ChartTypeSelector\n        value={config.chartType}\n        onChange={handleChartTypeChange}\n      />\n    </Field>\n  );\n};\n\nconst ChartSettingsFields: FC = () => {\n  const {config} = useChartSettingsContext();\n  const {columns} = useColumnsContext();\n\n  const chartTypeDef = useChartTypeDefinition(config.chartType);\n\n  if (!chartTypeDef) {\n    return (\n      <Field label=\"Chart type\" required>\n        <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n          Unknown chart type: {config.chartType}\n        </div>\n      </Field>\n    );\n  }\n\n  if (columns.length === 0) {\n    return (\n      <Field label=\"Columns\" required>\n        <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n          No columns available\n        </div>\n      </Field>\n    );\n  }\n\n  return createElement(chartTypeDef.settingsComponent);\n};\n\nexport const ChartSettings = {\n  Root: ChartSettingsRoot,\n  Header: ChartSettingsHeader,\n  Content: ChartSettingsContent,\n  TypeSelector: ChartSettingsTypeSelector,\n  Fields: ChartSettingsFields,\n  ViewSpecButton: ChartSettingsViewSpecButton,\n  CloseButton: ChartSettingsCloseButton,\n};\n"]}

package/dist/chart/chart-settings/ChartSettingsContent.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ChartPanelConfig } from '../../dashboard/MosaicDashboardSlice';
+import type { ChartPanelConfig } from '../../dashboard/dashboard-types';
 import { Spec } from '@uwdata/mosaic-spec';
 interface ChartSettingsContentProps {
     dashboardId: string;

package/dist/chart/chart-settings/ChartSettingsContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsContent.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAGzC,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+B9D,CAAC"}
+{"version":3,"file":"ChartSettingsContent.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAGzC,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+B9D,CAAC"}

package/dist/chart/chart-settings/ChartSettingsContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsContent.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAG5D,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAUxD,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAClE,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,UAAU,CAAC,CAAC;IAE1E,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;QAChC,OAAO,KAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,oBAAoB,GAAI,CAAC;IAC5E,CAAC;IAED,OAAO,CACL,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback, useState} from 'react';\nimport {ChartSpecViewerPanel} from './ChartSpecViewerPanel';\nimport {ChartPanelConfig} from '../../dashboard/MosaicDashboardSlice';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport {ChartSettingsPanel} from './ChartSettingsPanel';\n\ninterface ChartSettingsContentProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n}\n\nexport const ChartSettingsContent: FC<ChartSettingsContentProps> = ({\n  dashboardId,\n  panel,\n  tableName,\n  spec,\n  onClose,\n}) => {\n  const [viewMode, setViewMode] = useState<'settings' | 'spec'>('settings');\n\n  const handleViewSpec = useCallback(() => {\n    setViewMode('spec');\n  }, []);\n\n  const handleBackToSettings = useCallback(() => {\n    setViewMode('settings');\n  }, []);\n\n  if (spec && viewMode === 'spec') {\n    return <ChartSpecViewerPanel spec={spec} onBack={handleBackToSettings} />;\n  }\n\n  return (\n    <ChartSettingsPanel\n      dashboardId={dashboardId}\n      panel={panel}\n      tableName={tableName}\n      spec={spec}\n      onClose={onClose}\n      onViewSpec={handleViewSpec}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ChartSettingsContent.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAG5D,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAUxD,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAClE,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,UAAU,CAAC,CAAC;IAE1E,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;QAChC,OAAO,KAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,oBAAoB,GAAI,CAAC;IAC5E,CAAC;IAED,OAAO,CACL,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback, useState} from 'react';\nimport {ChartSpecViewerPanel} from './ChartSpecViewerPanel';\nimport type {ChartPanelConfig} from '../../dashboard/dashboard-types';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport {ChartSettingsPanel} from './ChartSettingsPanel';\n\ninterface ChartSettingsContentProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n}\n\nexport const ChartSettingsContent: FC<ChartSettingsContentProps> = ({\n  dashboardId,\n  panel,\n  tableName,\n  spec,\n  onClose,\n}) => {\n  const [viewMode, setViewMode] = useState<'settings' | 'spec'>('settings');\n\n  const handleViewSpec = useCallback(() => {\n    setViewMode('spec');\n  }, []);\n\n  const handleBackToSettings = useCallback(() => {\n    setViewMode('settings');\n  }, []);\n\n  if (spec && viewMode === 'spec') {\n    return <ChartSpecViewerPanel spec={spec} onBack={handleBackToSettings} />;\n  }\n\n  return (\n    <ChartSettingsPanel\n      dashboardId={dashboardId}\n      panel={panel}\n      tableName={tableName}\n      spec={spec}\n      onClose={onClose}\n      onViewSpec={handleViewSpec}\n    />\n  );\n};\n"]}

package/dist/chart/chart-settings/ChartSettingsContext.d.ts

@@ -4,9 +4,7 @@ import type { ChartConfig } from '../../chart-types/chart-config';
 import type { ChartType } from '../../chart-types/base-types';
 type ChartSetting<T extends ChartConfig = ChartConfig> = T['settings'];
 interface ChartSettingsContextValue<T extends ChartConfig = ChartConfig> {
-    tableName?: string;
     config: T;
-    columns: TableColumn[];
     onChange: (config: T) => void;
     onChangeConfig: <K extends keyof ChartSetting<T>>(key: K, value: ChartSetting<T>[K]) => void;
 }

package/dist/chart/chart-settings/ChartSettingsContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsContext.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAE5D,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;AAEvE,UAAU,yBAAyB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC,CAAC,CAAC,EAC9C,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACtB,IAAI,CAAC;CACX;AAOD,KAAK,kBAAkB,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CACpD,WAAW,EACX;IAAC,SAAS,EAAE,CAAC,CAAA;CAAC,CACf,CAAC;AAEF,wBAAgB,uBAAuB,IAAI,yBAAyB,CAAC,WAAW,CAAC,CAAC;AAClF,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,SAAS,EACzD,SAAS,EAAE,CAAC,GACX,yBAAyB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AA2BpD,UAAU,0BAA0B;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CA2B5B"}
+{"version":3,"file":"ChartSettingsContext.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAG5D,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;AAEvE,UAAU,yBAAyB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC,CAAC,CAAC,EAC9C,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACtB,IAAI,CAAC;CACX;AAOD,KAAK,kBAAkB,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CACpD,WAAW,EACX;IAAC,SAAS,EAAE,CAAC,CAAA;CAAC,CACf,CAAC;AAEF,wBAAgB,uBAAuB,IAAI,yBAAyB,CAAC,WAAW,CAAC,CAAC;AAClF,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,SAAS,EACzD,SAAS,EAAE,CAAC,GACX,yBAAyB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AA2BpD,UAAU,0BAA0B;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CA2B5B"}

package/dist/chart/chart-settings/ChartSettingsContext.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext } from 'react';
+import { ColumnsProvider } from '../../chart-builders/ColumnsContext';
 const ChartSettingsContext = createContext(null);
 export function useChartSettingsContext(chartType) {
     const context = useContext(ChartSettingsContext);
@@ -24,12 +25,10 @@ export function ChartSettingsProvider({ tableName, config, columns, onChange, ch
             },
         });
     }, [config, onChange]);
-    return (_jsx(ChartSettingsContext.Provider, { value: {
-            tableName,
-            config,
-            columns,
-            onChange,
-            onChangeConfig,
-        }, children: children }));
+    return (_jsx(ColumnsProvider, { columns: columns, tableName: tableName, children: _jsx(ChartSettingsContext.Provider, { value: {
+                config,
+                onChange,
+                onChangeConfig,
+            }, children: children }) }));
 }
 //# sourceMappingURL=ChartSettingsContext.js.map

package/dist/chart/chart-settings/ChartSettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsContext.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAkB7E,MAAM,oBAAoB,GAAG,aAAa,CACxC,IAAI,CACL,CAAC;AAYF,MAAM,UAAU,uBAAuB,CACrC,SAAa;IAIb,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,0EAA0E,CAC3E,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,OAA4D,CAAC;IACtE,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;QAC3C,MAAM,IAAI,KAAK,CACb,GAAG,SAAS,yCAAyC,SAAS,gBAAgB,CAC/E,CAAC;IACJ,CAAC;IAED,OAAO,OAAsE,CAAC;AAChF,CAAC;AAUD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACmB;IAC3B,MAAM,cAAc,GAAG,WAAW,CAChC,UAAwC,GAAM,EAAE,KAAmB;QACjE,QAAQ,CAAC;YACP,GAAG,MAAM;YACT,QAAQ,EAAE;gBACR,GAAG,MAAM,CAAC,QAAQ;gBAClB,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACa,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,EAAE,QAAQ,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACL,SAAS;YACT,MAAM;YACN,OAAO;YACP,QAAQ;YACR,cAAc;SACf,YAEA,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC","sourcesContent":["import {createContext, type ReactNode, useCallback, useContext} from 'react';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport type {ChartConfig} from '../../chart-types/chart-config';\nimport type {ChartType} from '../../chart-types/base-types';\n\ntype ChartSetting<T extends ChartConfig = ChartConfig> = T['settings'];\n\ninterface ChartSettingsContextValue<T extends ChartConfig = ChartConfig> {\n  tableName?: string;\n  config: T;\n  columns: TableColumn[];\n  onChange: (config: T) => void;\n  onChangeConfig: <K extends keyof ChartSetting<T>>(\n    key: K,\n    value: ChartSetting<T>[K],\n  ) => void;\n}\n\nconst ChartSettingsContext = createContext<ChartSettingsContextValue | null>(\n  null,\n);\n\n// Extract specific config type from the discriminated union by chartType\ntype ExtractChartConfig<T extends ChartType> = Extract<\n  ChartConfig,\n  {chartType: T}\n>;\n\nexport function useChartSettingsContext(): ChartSettingsContextValue<ChartConfig>;\nexport function useChartSettingsContext<T extends ChartType>(\n  chartType: T,\n): ChartSettingsContextValue<ExtractChartConfig<T>>;\nexport function useChartSettingsContext<T extends ChartType>(\n  chartType?: T,\n):\n  | ChartSettingsContextValue<ExtractChartConfig<T>>\n  | ChartSettingsContextValue<ChartConfig> {\n  const context = useContext(ChartSettingsContext);\n\n  if (!context) {\n    throw new Error(\n      'ChartSettings compound components must be used within ChartSettings.Root',\n    );\n  }\n\n  if (!chartType) {\n    return context as unknown as ChartSettingsContextValue<ChartConfig>;\n  }\n\n  if (context.config.chartType !== chartType) {\n    throw new Error(\n      `${chartType} chart settings must be used within a ${chartType} chart context`,\n    );\n  }\n\n  return context as unknown as ChartSettingsContextValue<ExtractChartConfig<T>>;\n}\n\ninterface ChartSettingsProviderProps {\n  tableName?: string;\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n  children: ReactNode;\n}\n\nexport function ChartSettingsProvider({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}: ChartSettingsProviderProps) {\n  const onChangeConfig = useCallback(\n    function <K extends keyof ChartSetting>(key: K, value: ChartSetting) {\n      onChange({\n        ...config,\n        settings: {\n          ...config.settings,\n          [key]: value,\n        },\n      } as ChartConfig);\n    },\n    [config, onChange],\n  );\n\n  return (\n    <ChartSettingsContext.Provider\n      value={{\n        tableName,\n        config,\n        columns,\n        onChange,\n        onChangeConfig,\n      }}\n    >\n      {children}\n    </ChartSettingsContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"ChartSettingsContext.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAC,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAapE,MAAM,oBAAoB,GAAG,aAAa,CACxC,IAAI,CACL,CAAC;AAYF,MAAM,UAAU,uBAAuB,CACrC,SAAa;IAIb,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,0EAA0E,CAC3E,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,OAA4D,CAAC;IACtE,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;QAC3C,MAAM,IAAI,KAAK,CACb,GAAG,SAAS,yCAAyC,SAAS,gBAAgB,CAC/E,CAAC;IACJ,CAAC;IAED,OAAO,OAAsE,CAAC;AAChF,CAAC;AAUD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACmB;IAC3B,MAAM,cAAc,GAAG,WAAW,CAChC,UAAwC,GAAM,EAAE,KAAmB;QACjE,QAAQ,CAAC;YACP,GAAG,MAAM;YACT,QAAQ,EAAE;gBACR,GAAG,MAAM,CAAC,QAAQ;gBAClB,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACa,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,EAAE,QAAQ,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,YACrD,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,MAAM;gBACN,QAAQ;gBACR,cAAc;aACf,YAEA,QAAQ,GACqB,GAChB,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import {createContext, type ReactNode, useCallback, useContext} from 'react';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport type {ChartConfig} from '../../chart-types/chart-config';\nimport type {ChartType} from '../../chart-types/base-types';\nimport {ColumnsProvider} from '../../chart-builders/ColumnsContext';\n\ntype ChartSetting<T extends ChartConfig = ChartConfig> = T['settings'];\n\ninterface ChartSettingsContextValue<T extends ChartConfig = ChartConfig> {\n  config: T;\n  onChange: (config: T) => void;\n  onChangeConfig: <K extends keyof ChartSetting<T>>(\n    key: K,\n    value: ChartSetting<T>[K],\n  ) => void;\n}\n\nconst ChartSettingsContext = createContext<ChartSettingsContextValue | null>(\n  null,\n);\n\n// Extract specific config type from the discriminated union by chartType\ntype ExtractChartConfig<T extends ChartType> = Extract<\n  ChartConfig,\n  {chartType: T}\n>;\n\nexport function useChartSettingsContext(): ChartSettingsContextValue<ChartConfig>;\nexport function useChartSettingsContext<T extends ChartType>(\n  chartType: T,\n): ChartSettingsContextValue<ExtractChartConfig<T>>;\nexport function useChartSettingsContext<T extends ChartType>(\n  chartType?: T,\n):\n  | ChartSettingsContextValue<ExtractChartConfig<T>>\n  | ChartSettingsContextValue<ChartConfig> {\n  const context = useContext(ChartSettingsContext);\n\n  if (!context) {\n    throw new Error(\n      'ChartSettings compound components must be used within ChartSettings.Root',\n    );\n  }\n\n  if (!chartType) {\n    return context as unknown as ChartSettingsContextValue<ChartConfig>;\n  }\n\n  if (context.config.chartType !== chartType) {\n    throw new Error(\n      `${chartType} chart settings must be used within a ${chartType} chart context`,\n    );\n  }\n\n  return context as unknown as ChartSettingsContextValue<ExtractChartConfig<T>>;\n}\n\ninterface ChartSettingsProviderProps {\n  tableName?: string;\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n  children: ReactNode;\n}\n\nexport function ChartSettingsProvider({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}: ChartSettingsProviderProps) {\n  const onChangeConfig = useCallback(\n    function <K extends keyof ChartSetting>(key: K, value: ChartSetting) {\n      onChange({\n        ...config,\n        settings: {\n          ...config.settings,\n          [key]: value,\n        },\n      } as ChartConfig);\n    },\n    [config, onChange],\n  );\n\n  return (\n    <ColumnsProvider columns={columns} tableName={tableName}>\n      <ChartSettingsContext.Provider\n        value={{\n          config,\n          onChange,\n          onChangeConfig,\n        }}\n      >\n        {children}\n      </ChartSettingsContext.Provider>\n    </ColumnsProvider>\n  );\n}\n"]}

package/dist/chart/chart-settings/ChartSettingsPanel.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ChartPanelConfig } from '../../dashboard/MosaicDashboardSlice';
+import type { ChartPanelConfig } from '../../dashboard/dashboard-types';
 import { Spec } from '@uwdata/mosaic-spec';
 interface ChartSettingsPanelProps {
     dashboardId: string;

package/dist/chart/chart-settings/ChartSettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAItC,OAAO,EAEL,gBAAgB,EACjB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAEzC,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC"}
+{"version":3,"file":"ChartSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAEtE,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAEzC,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC"}

package/dist/chart/chart-settings/ChartSettingsPanel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { ChartSettings } from './ChartSettings';
 import { useTableColumns } from './useTableColumns';
-import { useStoreWithMosaicDashboard, } from '../../dashboard/MosaicDashboardSlice';
+import { useStoreWithMosaicDashboard } from '../../dashboard/MosaicDashboardSlice';
 export const ChartSettingsPanel = ({ dashboardId, panel, tableName, spec, onClose, onViewSpec, }) => {
     const config = panel.config;
     const updatePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updatePanel);

package/dist/chart/chart-settings/ChartSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSettingsPanel.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,2BAA2B,GAE5B,MAAM,sCAAsC,CAAC;AAY9C,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC9D,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,UAAU,GACX,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,MAAM,WAAW,GAAG,2BAA2B,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAC7C,CAAC;IAEF,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE3C,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,MAAmB,EAAE,EAAE;QACtB,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE;YACjC,MAAM;SACP,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,oBAAoB,aAE9B,MAAC,aAAa,CAAC,MAAM,eACnB,cAAK,SAAS,EAAC,mBAAmB,+BAAqB,EACvD,eAAK,SAAS,EAAC,yBAAyB,aACrC,IAAI,IAAI,KAAC,aAAa,CAAC,cAAc,IAAC,OAAO,EAAE,UAAU,GAAI,EAC7D,OAAO,IAAI,KAAC,aAAa,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,GAAI,IACvD,IACe,EACvB,MAAC,aAAa,CAAC,OAAO,eACpB,KAAC,aAAa,CAAC,YAAY,KAAG,EAC9B,KAAC,aAAa,CAAC,MAAM,KAAG,IACF,IACL,CACtB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback} from 'react';\nimport {ChartSettings} from './ChartSettings';\nimport {type ChartConfig} from '../../chart-types/chart-config';\nimport {useTableColumns} from './useTableColumns';\nimport {\n  useStoreWithMosaicDashboard,\n  ChartPanelConfig,\n} from '../../dashboard/MosaicDashboardSlice';\nimport {Spec} from '@uwdata/mosaic-spec';\n\ninterface ChartSettingsPanelProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n  onViewSpec?: () => void;\n}\n\nexport const ChartSettingsPanel: FC<ChartSettingsPanelProps> = ({\n  dashboardId,\n  panel,\n  tableName,\n  spec,\n  onClose,\n  onViewSpec,\n}) => {\n  const config = panel.config;\n\n  const updatePanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.updatePanel,\n  );\n\n  const columns = useTableColumns(tableName);\n\n  const handleSettingsChange = useCallback(\n    (config: ChartConfig) => {\n      updatePanel(dashboardId, panel.id, {\n        config,\n      });\n    },\n    [dashboardId, panel.id, updatePanel],\n  );\n\n  return (\n    <ChartSettings.Root\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={handleSettingsChange}\n    >\n      <ChartSettings.Header>\n        <div className=\"flex items-center\">Chart settings</div>\n        <div className=\"flex items-center gap-1\">\n          {spec && <ChartSettings.ViewSpecButton onClick={onViewSpec} />}\n          {onClose && <ChartSettings.CloseButton onClick={onClose} />}\n        </div>\n      </ChartSettings.Header>\n      <ChartSettings.Content>\n        <ChartSettings.TypeSelector />\n        <ChartSettings.Fields />\n      </ChartSettings.Content>\n    </ChartSettings.Root>\n  );\n};\n"]}
+{"version":3,"file":"ChartSettingsPanel.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,2BAA2B,EAAC,MAAM,sCAAsC,CAAC;AAYjF,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC9D,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,UAAU,GACX,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,MAAM,WAAW,GAAG,2BAA2B,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAC7C,CAAC;IAEF,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE3C,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,MAAmB,EAAE,EAAE;QACtB,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE;YACjC,MAAM;SACP,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,oBAAoB,aAE9B,MAAC,aAAa,CAAC,MAAM,eACnB,cAAK,SAAS,EAAC,mBAAmB,+BAAqB,EACvD,eAAK,SAAS,EAAC,yBAAyB,aACrC,IAAI,IAAI,KAAC,aAAa,CAAC,cAAc,IAAC,OAAO,EAAE,UAAU,GAAI,EAC7D,OAAO,IAAI,KAAC,aAAa,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,GAAI,IACvD,IACe,EACvB,MAAC,aAAa,CAAC,OAAO,eACpB,KAAC,aAAa,CAAC,YAAY,KAAG,EAC9B,KAAC,aAAa,CAAC,MAAM,KAAG,IACF,IACL,CACtB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback} from 'react';\nimport {ChartSettings} from './ChartSettings';\nimport {type ChartConfig} from '../../chart-types/chart-config';\nimport {useTableColumns} from './useTableColumns';\nimport type {ChartPanelConfig} from '../../dashboard/dashboard-types';\nimport {useStoreWithMosaicDashboard} from '../../dashboard/MosaicDashboardSlice';\nimport {Spec} from '@uwdata/mosaic-spec';\n\ninterface ChartSettingsPanelProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n  onViewSpec?: () => void;\n}\n\nexport const ChartSettingsPanel: FC<ChartSettingsPanelProps> = ({\n  dashboardId,\n  panel,\n  tableName,\n  spec,\n  onClose,\n  onViewSpec,\n}) => {\n  const config = panel.config;\n\n  const updatePanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.updatePanel,\n  );\n\n  const columns = useTableColumns(tableName);\n\n  const handleSettingsChange = useCallback(\n    (config: ChartConfig) => {\n      updatePanel(dashboardId, panel.id, {\n        config,\n      });\n    },\n    [dashboardId, panel.id, updatePanel],\n  );\n\n  return (\n    <ChartSettings.Root\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={handleSettingsChange}\n    >\n      <ChartSettings.Header>\n        <div className=\"flex items-center\">Chart settings</div>\n        <div className=\"flex items-center gap-1\">\n          {spec && <ChartSettings.ViewSpecButton onClick={onViewSpec} />}\n          {onClose && <ChartSettings.CloseButton onClick={onClose} />}\n        </div>\n      </ChartSettings.Header>\n      <ChartSettings.Content>\n        <ChartSettings.TypeSelector />\n        <ChartSettings.Fields />\n      </ChartSettings.Content>\n    </ChartSettings.Root>\n  );\n};\n"]}

package/dist/chart/chart-settings/ChartTypeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAgB,MAAM,OAAO,CAAC;AAU7C,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6CxD,CAAC"}
+{"version":3,"file":"ChartTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAgB,MAAM,OAAO,CAAC;AAS7C,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0CxD,CAAC"}

package/dist/chart/chart-settings/ChartTypeSelector.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
 import { ChartNoAxesCombined } from 'lucide-react';
 import { useStoreWithMosaicDashboard } from '../../dashboard/MosaicDashboardSlice';
 export const ChartTypeSelector = memo(({ value, onChange }) => {
     const chartTypes = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
     const selectedChartType = useMemo(() => chartTypes?.find((chartType) => chartType.id === value), [chartTypes, value]);
     const SelectedChartTypeIcon = selectedChartType?.icon ?? ChartNoAxesCombined;
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs", children: "Chart Type" }), _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: selectedChartType ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SelectedChartTypeIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: selectedChartType.label })] })) : (_jsx(SelectValue, { placeholder: "Select chart type" })) }), _jsx(SelectContent, { className: "text-xs", children: chartTypes?.map((chartType) => {
-                            const Icon = chartType.icon ?? ChartNoAxesCombined;
-                            return (_jsx(SelectItem, { value: chartType.id, children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: chartType.label })] }) }, chartType.id));
-                        }) })] })] }));
+    return (_jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", "aria-label": "Chart type", children: selectedChartType ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SelectedChartTypeIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: selectedChartType.label })] })) : (_jsx(SelectValue, { placeholder: "Select chart type" })) }), _jsx(SelectContent, { className: "text-xs", children: chartTypes?.map((chartType) => {
+                    const Icon = chartType.icon ?? ChartNoAxesCombined;
+                    return (_jsx(SelectItem, { value: chartType.id, children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: chartType.label })] }) }, chartType.id));
+                }) })] }));
 });
 ChartTypeSelector.displayName = 'ChartTypeSelector';
 //# sourceMappingURL=ChartTypeSelector.js.map

package/dist/chart/chart-settings/ChartTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTypeSelector.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,KAAK,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAC,2BAA2B,EAAC,MAAM,sCAAsC,CAAC;AAOjF,MAAM,CAAC,MAAM,iBAAiB,GAA+B,IAAI,CAC/D,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE;IACpB,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,CAAC,EAC7D,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IAEF,MAAM,qBAAqB,GACzB,iBAAiB,EAAE,IAAI,IAAI,mBAAmB,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACxB,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,2BAAmB,EAC7C,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC3C,KAAC,aAAa,IAAC,SAAS,EAAC,aAAa,YACnC,iBAAiB,CAAC,CAAC,CAAC,CACnB,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,qBAAqB,IAAC,SAAS,EAAC,aAAa,GAAG,EACjD,yBAAO,iBAAiB,CAAC,KAAK,GAAQ,IAClC,CACP,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,WAAW,EAAC,mBAAmB,GAAG,CAChD,GACa,EAChB,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,YAC/B,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;4BAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,IAAI,mBAAmB,CAAC;4BACnD,OAAO,CACL,KAAC,UAAU,IAAoB,KAAK,EAAE,SAAS,CAAC,EAAE,YAChD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,EAChC,yBAAO,SAAS,CAAC,KAAK,GAAQ,IAC1B,IAJS,SAAS,CAAC,EAAE,CAKhB,CACd,CAAC;wBACJ,CAAC,CAAC,GACY,IACT,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import {type FC, memo, useMemo} from 'react';\nimport {\n  Label,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport {ChartNoAxesCombined} from 'lucide-react';\nimport {type ChartType} from '../../chart-types/base-types';\nimport {useStoreWithMosaicDashboard} from '../../dashboard/MosaicDashboardSlice';\n\ninterface ChartTypeSelectorProps {\n  value: ChartType;\n  onChange: (chartType: ChartType) => void;\n}\n\nexport const ChartTypeSelector: FC<ChartTypeSelectorProps> = memo(\n  ({value, onChange}) => {\n    const chartTypes = useStoreWithMosaicDashboard(\n      (state) => state.mosaicDashboard.chartTypes,\n    );\n\n    const selectedChartType = useMemo(\n      () => chartTypes?.find((chartType) => chartType.id === value),\n      [chartTypes, value],\n    );\n\n    const SelectedChartTypeIcon =\n      selectedChartType?.icon ?? ChartNoAxesCombined;\n\n    return (\n      <div className=\"space-y-2\">\n        <Label className=\"text-xs\">Chart Type</Label>\n        <Select value={value} onValueChange={onChange}>\n          <SelectTrigger className=\"h-8 text-xs\">\n            {selectedChartType ? (\n              <div className=\"flex items-center gap-2\">\n                <SelectedChartTypeIcon className=\"h-3.5 w-3.5\" />\n                <span>{selectedChartType.label}</span>\n              </div>\n            ) : (\n              <SelectValue placeholder=\"Select chart type\" />\n            )}\n          </SelectTrigger>\n          <SelectContent className=\"text-xs\">\n            {chartTypes?.map((chartType) => {\n              const Icon = chartType.icon ?? ChartNoAxesCombined;\n              return (\n                <SelectItem key={chartType.id} value={chartType.id}>\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <Icon className=\"h-3.5 w-3.5\" />\n                    <span>{chartType.label}</span>\n                  </div>\n                </SelectItem>\n              );\n            })}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  },\n);\n\nChartTypeSelector.displayName = 'ChartTypeSelector';\n"]}
+{"version":3,"file":"ChartTypeSelector.js","sourceRoot":"","sources":["../../../src/chart/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAC,2BAA2B,EAAC,MAAM,sCAAsC,CAAC;AAOjF,MAAM,CAAC,MAAM,iBAAiB,GAA+B,IAAI,CAC/D,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE;IACpB,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,CAAC,EAC7D,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IAEF,MAAM,qBAAqB,GACzB,iBAAiB,EAAE,IAAI,IAAI,mBAAmB,CAAC;IAEjD,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC3C,KAAC,aAAa,IAAC,SAAS,EAAC,aAAa,gBAAY,YAAY,YAC3D,iBAAiB,CAAC,CAAC,CAAC,CACnB,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,qBAAqB,IAAC,SAAS,EAAC,aAAa,GAAG,EACjD,yBAAO,iBAAiB,CAAC,KAAK,GAAQ,IAClC,CACP,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,WAAW,EAAC,mBAAmB,GAAG,CAChD,GACa,EAChB,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,YAC/B,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;oBAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,IAAI,mBAAmB,CAAC;oBACnD,OAAO,CACL,KAAC,UAAU,IAAoB,KAAK,EAAE,SAAS,CAAC,EAAE,YAChD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,EAChC,yBAAO,SAAS,CAAC,KAAK,GAAQ,IAC1B,IAJS,SAAS,CAAC,EAAE,CAKhB,CACd,CAAC;gBACJ,CAAC,CAAC,GACY,IACT,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import {type FC, memo, useMemo} from 'react';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport {ChartNoAxesCombined} from 'lucide-react';\nimport {type ChartType} from '../../chart-types/base-types';\nimport {useStoreWithMosaicDashboard} from '../../dashboard/MosaicDashboardSlice';\n\ninterface ChartTypeSelectorProps {\n  value: ChartType;\n  onChange: (chartType: ChartType) => void;\n}\n\nexport const ChartTypeSelector: FC<ChartTypeSelectorProps> = memo(\n  ({value, onChange}) => {\n    const chartTypes = useStoreWithMosaicDashboard(\n      (state) => state.mosaicDashboard.chartTypes,\n    );\n\n    const selectedChartType = useMemo(\n      () => chartTypes?.find((chartType) => chartType.id === value),\n      [chartTypes, value],\n    );\n\n    const SelectedChartTypeIcon =\n      selectedChartType?.icon ?? ChartNoAxesCombined;\n\n    return (\n      <Select value={value} onValueChange={onChange}>\n        <SelectTrigger className=\"h-8 text-xs\" aria-label=\"Chart type\">\n          {selectedChartType ? (\n            <div className=\"flex items-center gap-2\">\n              <SelectedChartTypeIcon className=\"h-3.5 w-3.5\" />\n              <span>{selectedChartType.label}</span>\n            </div>\n          ) : (\n            <SelectValue placeholder=\"Select chart type\" />\n          )}\n        </SelectTrigger>\n        <SelectContent className=\"text-xs\">\n          {chartTypes?.map((chartType) => {\n            const Icon = chartType.icon ?? ChartNoAxesCombined;\n            return (\n              <SelectItem key={chartType.id} value={chartType.id}>\n                <div className=\"flex items-center gap-2 text-xs\">\n                  <Icon className=\"h-3.5 w-3.5\" />\n                  <span>{chartType.label}</span>\n                </div>\n              </SelectItem>\n            );\n          })}\n        </SelectContent>\n      </Select>\n    );\n  },\n);\n\nChartTypeSelector.displayName = 'ChartTypeSelector';\n"]}

package/dist/chart-builders/ColumnSelector.d.ts

@@ -1,8 +1,6 @@
 import { type FC } from 'react';
-import { TableColumn } from '@sqlrooms/db';
 export interface ColumnSelectorProps {
     types?: string[];
-    columns?: TableColumn[];
     value: string | undefined;
     onChange: (value: string) => void;
     placeholder?: string;

package/dist/chart-builders/ColumnSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ColumnSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAQ9B,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgDD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}
+{"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ColumnSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAS9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8CD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}

package/dist/chart-builders/ColumnSelector.js

@@ -1,24 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FieldSelectorInput } from './FieldSelectorInput';
 import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, CATEGORICAL_COLUMN_TYPES, } from './constants';
-import { useChartSettingsContext } from '../chart/chart-settings/ChartSettingsContext';
+import { useColumnsContext } from './ColumnsContext';
 /**
  * Simplified wrapper around FieldSelectorInput for selecting a table column.
  * Removes the field prop requirement for easier composition.
  *
  * Can be used as:
- * - `<ColumnSelector types={...} />` - custom types
  * - `<ColumnSelector.Numeric />` - numeric types only
  * - `<ColumnSelector.Quantitative />` - numeric + temporal
  * - `<ColumnSelector.Categorical />` - text/enum types
  */
-const ColumnSelectorRoot = ({ types, value, onChange, columns, placeholder, }) => {
-    const { columns: contextColumns } = useChartSettingsContext();
+const ColumnSelectorRoot = ({ types, value, onChange, placeholder, }) => {
+    const { columns } = useColumnsContext();
     return (_jsx(FieldSelectorInput, { field: {
             key: '',
             label: '',
             types,
-        }, columns: columns ?? contextColumns, value: value, onChange: onChange, placeholder: placeholder }));
+        }, value: value, columns: columns, onChange: onChange, placeholder: placeholder ?? 'Select column…' }));
 };
 const Numeric = (props) => (_jsx(ColumnSelectorRoot, { ...props, types: NUMERIC_COLUMN_TYPES }));
 const Quantitative = (props) => (_jsx(ColumnSelectorRoot, { ...props, types: QUANTITATIVE_COLUMN_TYPES }));

package/dist/chart-builders/ColumnSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../src/chart-builders/ColumnSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,uBAAuB,EAAC,MAAM,8CAA8C,CAAC;AAWrF;;;;;;;;;GASG;AACH,MAAM,kBAAkB,GAA4B,CAAC,EACnD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,cAAc,EAAC,GAAG,uBAAuB,EAAE,CAAC;IAE5D,OAAO,CACL,KAAC,kBAAkB,IACjB,KAAK,EAAE;YACL,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,EAAE;YACT,KAAK;SACN,EACD,OAAO,EAAE,OAAO,IAAI,cAAc,EAClC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACjE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,oBAAoB,GAAI,CAC/D,CAAC;AAEF,MAAM,YAAY,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACtE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,yBAAyB,GAAI,CACpE,CAAC;AAEF,MAAM,WAAW,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACrE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,wBAAwB,GAAI,CACnE,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IAC9D,OAAO;IACP,YAAY;IACZ,WAAW;CACZ,CAAC,CAAC","sourcesContent":["import {type FC} from 'react';\nimport {FieldSelectorInput} from './FieldSelectorInput';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from './constants';\nimport {useChartSettingsContext} from '../chart/chart-settings/ChartSettingsContext';\nimport {TableColumn} from '@sqlrooms/db';\n\nexport interface ColumnSelectorProps {\n  types?: string[];\n  columns?: TableColumn[];\n  value: string | undefined;\n  onChange: (value: string) => void;\n  placeholder?: string;\n}\n\n/**\n * Simplified wrapper around FieldSelectorInput for selecting a table column.\n * Removes the field prop requirement for easier composition.\n *\n * Can be used as:\n * - `<ColumnSelector types={...} />` - custom types\n * - `<ColumnSelector.Numeric />` - numeric types only\n * - `<ColumnSelector.Quantitative />` - numeric + temporal\n * - `<ColumnSelector.Categorical />` - text/enum types\n */\nconst ColumnSelectorRoot: FC<ColumnSelectorProps> = ({\n  types,\n  value,\n  onChange,\n  columns,\n  placeholder,\n}) => {\n  const {columns: contextColumns} = useChartSettingsContext();\n\n  return (\n    <FieldSelectorInput\n      field={{\n        key: '',\n        label: '',\n        types,\n      }}\n      columns={columns ?? contextColumns}\n      value={value}\n      onChange={onChange}\n      placeholder={placeholder}\n    />\n  );\n};\n\nconst Numeric: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={NUMERIC_COLUMN_TYPES} />\n);\n\nconst Quantitative: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={QUANTITATIVE_COLUMN_TYPES} />\n);\n\nconst Categorical: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={CATEGORICAL_COLUMN_TYPES} />\n);\n\nexport const ColumnSelector = Object.assign(ColumnSelectorRoot, {\n  Numeric,\n  Quantitative,\n  Categorical,\n});\n"]}
+{"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../src/chart-builders/ColumnSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AASnD;;;;;;;;GAQG;AACH,MAAM,kBAAkB,GAA4B,CAAC,EACnD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAC,GAAG,iBAAiB,EAAE,CAAC;IAEtC,OAAO,CACL,KAAC,kBAAkB,IACjB,KAAK,EAAE;YACL,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,EAAE;YACT,KAAK;SACN,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IAAI,gBAAgB,GAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACjE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,oBAAoB,GAAI,CAC/D,CAAC;AAEF,MAAM,YAAY,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACtE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,yBAAyB,GAAI,CACpE,CAAC;AAEF,MAAM,WAAW,GAA2C,CAAC,KAAK,EAAE,EAAE,CAAC,CACrE,KAAC,kBAAkB,OAAK,KAAK,EAAE,KAAK,EAAE,wBAAwB,GAAI,CACnE,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IAC9D,OAAO;IACP,YAAY;IACZ,WAAW;CACZ,CAAC,CAAC","sourcesContent":["import {type FC} from 'react';\nimport {FieldSelectorInput} from './FieldSelectorInput';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from './constants';\nimport {useColumnsContext} from './ColumnsContext';\n\nexport interface ColumnSelectorProps {\n  types?: string[];\n  value: string | undefined;\n  onChange: (value: string) => void;\n  placeholder?: string;\n}\n\n/**\n * Simplified wrapper around FieldSelectorInput for selecting a table column.\n * Removes the field prop requirement for easier composition.\n *\n * Can be used as:\n * - `<ColumnSelector.Numeric />` - numeric types only\n * - `<ColumnSelector.Quantitative />` - numeric + temporal\n * - `<ColumnSelector.Categorical />` - text/enum types\n */\nconst ColumnSelectorRoot: FC<ColumnSelectorProps> = ({\n  types,\n  value,\n  onChange,\n  placeholder,\n}) => {\n  const {columns} = useColumnsContext();\n\n  return (\n    <FieldSelectorInput\n      field={{\n        key: '',\n        label: '',\n        types,\n      }}\n      value={value}\n      columns={columns}\n      onChange={onChange}\n      placeholder={placeholder ?? 'Select column…'}\n    />\n  );\n};\n\nconst Numeric: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={NUMERIC_COLUMN_TYPES} />\n);\n\nconst Quantitative: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={QUANTITATIVE_COLUMN_TYPES} />\n);\n\nconst Categorical: FC<Omit<ColumnSelectorProps, 'types'>> = (props) => (\n  <ColumnSelectorRoot {...props} types={CATEGORICAL_COLUMN_TYPES} />\n);\n\nexport const ColumnSelector = Object.assign(ColumnSelectorRoot, {\n  Numeric,\n  Quantitative,\n  Categorical,\n});\n"]}

package/dist/chart-builders/ColumnsContext.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type PropsWithChildren } from 'react';
+import type { TableColumn } from '@sqlrooms/duckdb';
+export interface ColumnsContextValue {
+    columns: TableColumn[];
+    tableName?: string;
+}
+export declare function useColumnsContext(): ColumnsContextValue;
+export interface ColumnsProviderProps extends PropsWithChildren {
+    columns: TableColumn[];
+    tableName?: string;
+}
+export declare const ColumnsProvider: FC<ColumnsProviderProps>;
+//# sourceMappingURL=ColumnsContext.d.ts.map

package/dist/chart-builders/ColumnsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsContext.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ColumnsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,iBAAiB,IAAI,mBAAmB,CAOvD;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAUpD,CAAC"}

package/dist/chart-builders/ColumnsContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from 'react';
+const ColumnsContext = createContext(null);
+export function useColumnsContext() {
+    const context = useContext(ColumnsContext);
+    if (!context) {
+        throw new Error('useColumnsContext must be used within a ColumnsProvider');
+    }
+    return context;
+}
+export const ColumnsProvider = ({ columns, tableName, children, }) => {
+    const value = useMemo(() => ({ columns, tableName }), [columns, tableName]);
+    return (_jsx(ColumnsContext.Provider, { value: value, children: children }));
+};
+//# sourceMappingURL=ColumnsContext.js.map

package/dist/chart-builders/ColumnsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsContext.js","sourceRoot":"","sources":["../../src/chart-builders/ColumnsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,OAAO,GAGR,MAAM,OAAO,CAAC;AAQf,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEvE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAOD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACxD,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA2B,CAC5E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  useMemo,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport type {TableColumn} from '@sqlrooms/duckdb';\n\nexport interface ColumnsContextValue {\n  columns: TableColumn[];\n  tableName?: string;\n}\n\nconst ColumnsContext = createContext<ColumnsContextValue | null>(null);\n\nexport function useColumnsContext(): ColumnsContextValue {\n  const context = useContext(ColumnsContext);\n  if (!context) {\n    throw new Error('useColumnsContext must be used within a ColumnsProvider');\n  }\n\n  return context;\n}\n\nexport interface ColumnsProviderProps extends PropsWithChildren {\n  columns: TableColumn[];\n  tableName?: string;\n}\n\nexport const ColumnsProvider: FC<ColumnsProviderProps> = ({\n  columns,\n  tableName,\n  children,\n}) => {\n  const value = useMemo(() => ({columns, tableName}), [columns, tableName]);\n\n  return (\n    <ColumnsContext.Provider value={value}>{children}</ColumnsContext.Provider>\n  );\n};\n"]}

package/dist/chart-builders/MultiFieldSelector.js

@@ -4,7 +4,7 @@ import { Trash2 } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import { ColumnSelector } from './ColumnSelector';
 import { AggregationSelector } from './AggregationSelector';
-import { useChartSettingsContext } from '../chart/chart-settings/ChartSettingsContext';
+import { ColumnsProvider, useColumnsContext } from './ColumnsContext';
 import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, CATEGORICAL_COLUMN_TYPES, } from './constants';
 /**
  * Manages an array of field configurations with add/update/remove logic.
@@ -17,7 +17,7 @@ import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, CATEGORICAL_COLUMN_TYP
  * - `<MultiFieldSelector.Categorical />` - text/enum types
  */
 const MultiFieldSelectorRoot = ({ types, value, onChange, showAggregation = false, }) => {
-    const { columns } = useChartSettingsContext();
+    const { columns, tableName } = useColumnsContext();
     const selectedFieldNames = useMemo(() => value.map((v) => v.field), [value]);
     const availableColumns = useMemo(() => columns.filter((col) => !selectedFieldNames.includes(col.name)), [columns, selectedFieldNames]);
     const handleUpdate = useCallback((index, updates) => {
@@ -39,8 +39,8 @@ const MultiFieldSelectorRoot = ({ types, value, onChange, showAggregation = fals
                         gridTemplateColumns: showAggregation
                             ? 'minmax(120px, 1fr) 100px 32px'
                             : 'minmax(120px, 1fr) 32px',
-                    }, children: [_jsx(ColumnSelector, { columns: columns, types: types, value: fieldConfig.field, onChange: (newField) => handleUpdate(index, { field: newField }) }), showAggregation && (_jsx(AggregationSelector, { value: aggregate, onChange: (agg) => handleUpdate(index, { aggregate: agg }) })), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleRemove(index), className: "h-8 w-8 shrink-0", children: _jsx(Trash2, { className: "text-destructive h-4 w-4" }) })] }, fieldConfig.field));
-            }), _jsx(ColumnSelector, { columns: availableColumns, types: types, value: undefined, onChange: handleAdd, placeholder: "Select field..." })] }));
+                    }, children: [_jsx(ColumnSelector, { types: types, value: fieldConfig.field, onChange: (newField) => handleUpdate(index, { field: newField }) }), showAggregation && (_jsx(AggregationSelector, { value: aggregate, onChange: (agg) => handleUpdate(index, { aggregate: agg }) })), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleRemove(index), className: "h-8 w-8 shrink-0", children: _jsx(Trash2, { className: "text-destructive h-4 w-4" }) })] }, fieldConfig.field));
+            }), _jsx(ColumnsProvider, { columns: availableColumns, tableName: tableName, children: _jsx(ColumnSelector, { types: types, value: undefined, onChange: handleAdd, placeholder: "Select field..." }) })] }));
 };
 const Numeric = (props) => (_jsx(MultiFieldSelectorRoot, { ...props, types: NUMERIC_COLUMN_TYPES }));
 const Quantitative = (props) => (_jsx(MultiFieldSelectorRoot, { ...props, types: QUANTITATIVE_COLUMN_TYPES }));

package/dist/chart-builders/MultiFieldSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFieldSelector.js","sourceRoot":"","sources":["../../src/chart-builders/MultiFieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button} from '@sqlrooms/ui';\nimport {Trash2} from 'lucide-react';\nimport {useCallback, useMemo, type FC} from 'react';\nimport {ColumnSelector} from './ColumnSelector';\nimport {AggregationSelector} from './AggregationSelector';\nimport type {AggregateFunction} from '../chart-types/line-chart/schema';\nimport {useChartSettingsContext} from '../chart/chart-settings/ChartSettingsContext';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from './constants';\nimport type {YFieldConfig} from '../chart-types/line-chart/schema';\n\nexport interface MultiFieldSelectorProps {\n  types?: string[];\n  value: YFieldConfig[];\n  onChange: (value: YFieldConfig[]) => void;\n  showAggregation?: boolean;\n}\n\n/**\n * Manages an array of field configurations with add/update/remove logic.\n * Emits the full updated array on every change.\n *\n * Can be used as:\n * - `<MultiFieldSelector types={...} />` - custom types\n * - `<MultiFieldSelector.Numeric />` - numeric types only\n * - `<MultiFieldSelector.Quantitative />` - numeric + temporal\n * - `<MultiFieldSelector.Categorical />` - text/enum types\n */\nconst MultiFieldSelectorRoot: FC<MultiFieldSelectorProps> = ({\n  types,\n  value,\n  onChange,\n  showAggregation = false,\n}) => {\n  const {columns} = useChartSettingsContext();\n\n  const selectedFieldNames = useMemo(() => value.map((v) => v.field), [value]);\n\n  const availableColumns = useMemo(\n    () => columns.filter((col) => !selectedFieldNames.includes(col.name)),\n    [columns, selectedFieldNames],\n  );\n\n  const handleUpdate = useCallback(\n    (index: number, updates: Partial<(typeof value)[0]>) => {\n      const updated = [...value];\n      updated[index] = {...updated[index]!, ...updates};\n      onChange(updated);\n    },\n    [value, onChange],\n  );\n\n  const handleRemove = useCallback(\n    (index: number) => {\n      onChange(value.filter((_, i) => i !== index));\n    },\n    [value, onChange],\n  );\n\n  const handleAdd = useCallback(\n    (fieldName: string) => {\n      if (fieldName) {\n        onChange([...value, {field: fieldName, aggregate: 'sum'}]);\n      }\n    },\n    [value, onChange],\n  );\n\n  return (\n    <div className=\"space-y-1\">\n      {value.map((fieldConfig, index) => {\n        const aggregate = fieldConfig.aggregate || 'sum';\n\n        return (\n          <div\n            key={fieldConfig.field}\n            className=\"grid items-end gap-2\"\n            style={{\n              gridTemplateColumns: showAggregation\n                ? 'minmax(120px, 1fr) 100px 32px'\n                : 'minmax(120px, 1fr) 32px',\n            }}\n          >\n            <ColumnSelector\n              columns={columns}\n              types={types}\n              value={fieldConfig.field}\n              onChange={(newField) => handleUpdate(index, {field: newField})}\n            />\n\n            {showAggregation && (\n              <AggregationSelector\n                value={aggregate}\n                onChange={(agg: AggregateFunction) =>\n                  handleUpdate(index, {aggregate: agg})\n                }\n              />\n            )}\n\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => handleRemove(index)}\n              className=\"h-8 w-8 shrink-0\"\n            >\n              <Trash2 className=\"text-destructive h-4 w-4\" />\n            </Button>\n          </div>\n        );\n      })}\n\n      <ColumnSelector\n        columns={availableColumns}\n        types={types}\n        value={undefined}\n        onChange={handleAdd}\n        placeholder=\"Select field...\"\n      />\n    </div>\n  );\n};\n\nconst Numeric: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={NUMERIC_COLUMN_TYPES} />\n);\n\nconst Quantitative: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={QUANTITATIVE_COLUMN_TYPES} />\n);\n\nconst Categorical: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={CATEGORICAL_COLUMN_TYPES} />\n);\n\nexport const MultiFieldSelector = Object.assign(MultiFieldSelectorRoot, {\n  Numeric,\n  Quantitative,\n  Categorical,\n});\n"]}
+{"version":3,"file":"MultiFieldSelector.js","sourceRoot":"","sources":["../../src/chart-builders/MultiFieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button} from '@sqlrooms/ui';\nimport {Trash2} from 'lucide-react';\nimport {useCallback, useMemo, type FC} from 'react';\nimport {ColumnSelector} from './ColumnSelector';\nimport {AggregationSelector} from './AggregationSelector';\nimport type {AggregateFunction} from '../chart-types/line-chart/schema';\nimport {ColumnsProvider, useColumnsContext} from './ColumnsContext';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from './constants';\nimport type {YFieldConfig} from '../chart-types/line-chart/schema';\n\nexport interface MultiFieldSelectorProps {\n  types?: string[];\n  value: YFieldConfig[];\n  onChange: (value: YFieldConfig[]) => void;\n  showAggregation?: boolean;\n}\n\n/**\n * Manages an array of field configurations with add/update/remove logic.\n * Emits the full updated array on every change.\n *\n * Can be used as:\n * - `<MultiFieldSelector types={...} />` - custom types\n * - `<MultiFieldSelector.Numeric />` - numeric types only\n * - `<MultiFieldSelector.Quantitative />` - numeric + temporal\n * - `<MultiFieldSelector.Categorical />` - text/enum types\n */\nconst MultiFieldSelectorRoot: FC<MultiFieldSelectorProps> = ({\n  types,\n  value,\n  onChange,\n  showAggregation = false,\n}) => {\n  const {columns, tableName} = useColumnsContext();\n\n  const selectedFieldNames = useMemo(() => value.map((v) => v.field), [value]);\n\n  const availableColumns = useMemo(\n    () => columns.filter((col) => !selectedFieldNames.includes(col.name)),\n    [columns, selectedFieldNames],\n  );\n\n  const handleUpdate = useCallback(\n    (index: number, updates: Partial<(typeof value)[0]>) => {\n      const updated = [...value];\n      updated[index] = {...updated[index]!, ...updates};\n      onChange(updated);\n    },\n    [value, onChange],\n  );\n\n  const handleRemove = useCallback(\n    (index: number) => {\n      onChange(value.filter((_, i) => i !== index));\n    },\n    [value, onChange],\n  );\n\n  const handleAdd = useCallback(\n    (fieldName: string) => {\n      if (fieldName) {\n        onChange([...value, {field: fieldName, aggregate: 'sum'}]);\n      }\n    },\n    [value, onChange],\n  );\n\n  return (\n    <div className=\"space-y-1\">\n      {value.map((fieldConfig, index) => {\n        const aggregate = fieldConfig.aggregate || 'sum';\n\n        return (\n          <div\n            key={fieldConfig.field}\n            className=\"grid items-end gap-2\"\n            style={{\n              gridTemplateColumns: showAggregation\n                ? 'minmax(120px, 1fr) 100px 32px'\n                : 'minmax(120px, 1fr) 32px',\n            }}\n          >\n            <ColumnSelector\n              types={types}\n              value={fieldConfig.field}\n              onChange={(newField) => handleUpdate(index, {field: newField})}\n            />\n\n            {showAggregation && (\n              <AggregationSelector\n                value={aggregate}\n                onChange={(agg: AggregateFunction) =>\n                  handleUpdate(index, {aggregate: agg})\n                }\n              />\n            )}\n\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => handleRemove(index)}\n              className=\"h-8 w-8 shrink-0\"\n            >\n              <Trash2 className=\"text-destructive h-4 w-4\" />\n            </Button>\n          </div>\n        );\n      })}\n\n      <ColumnsProvider columns={availableColumns} tableName={tableName}>\n        <ColumnSelector\n          types={types}\n          value={undefined}\n          onChange={handleAdd}\n          placeholder=\"Select field...\"\n        />\n      </ColumnsProvider>\n    </div>\n  );\n};\n\nconst Numeric: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={NUMERIC_COLUMN_TYPES} />\n);\n\nconst Quantitative: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={QUANTITATIVE_COLUMN_TYPES} />\n);\n\nconst Categorical: FC<Omit<MultiFieldSelectorProps, 'types'>> = (props) => (\n  <MultiFieldSelectorRoot {...props} types={CATEGORICAL_COLUMN_TYPES} />\n);\n\nexport const MultiFieldSelector = Object.assign(MultiFieldSelectorRoot, {\n  Numeric,\n  Quantitative,\n  Categorical,\n});\n"]}

package/dist/chart-builders/TableSelector.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+export interface TableSelectorProps {
+    value: string | undefined;
+    onChange?: (tableName: string) => void;
+    placeholder?: string;
+}
+/**
+ * Table selector component for choosing a table from available tables.
+ * Uses a searchable dropdown with command palette pattern.
+ *
+ * Filters to only show tables that have columns defined.
+ */
+export declare const TableSelector: FC<TableSelectorProps>;
+//# sourceMappingURL=TableSelector.d.ts.map

package/dist/chart-builders/TableSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelector.d.ts","sourceRoot":"","sources":["../../src/chart-builders/TableSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAgBxC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqDhD,CAAC"}

package/dist/chart-builders/TableSelector.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useTablesWithColumns } from '../dashboard/useTablesWithColumns';
+/**
+ * Table selector component for choosing a table from available tables.
+ * Uses a searchable dropdown with command palette pattern.
+ *
+ * Filters to only show tables that have columns defined.
+ */
+export const TableSelector = ({ value, onChange, placeholder = 'Select table…', }) => {
+    const [open, setOpen] = useState(false);
+    const tables = useTablesWithColumns();
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", role: "combobox", "aria-expanded": open, className: "w-full justify-between text-xs", children: [_jsx("span", { className: "truncate", children: value || placeholder }), _jsx(ChevronsUpDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[300px] p-0 text-xs", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search tables\u2026", className: "text-xs" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { className: "text-xs", children: "No tables found." }), _jsx(CommandGroup, { children: tables.map((table) => {
+                                        const tableName = table.table.table;
+                                        return (_jsxs(CommandItem, { value: tableName, onSelect: (selectedValue) => {
+                                                onChange?.(selectedValue);
+                                                setOpen(false);
+                                            }, className: "text-xs", children: [_jsx(Check, { className: `mr-2 h-3.5 w-3.5 ${value === tableName ? 'opacity-100' : 'opacity-0'}` }), tableName] }, tableName));
+                                    }) })] })] }) })] }));
+};
+//# sourceMappingURL=TableSelector.js.map

package/dist/chart-builders/TableSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelector.js","sourceRoot":"","sources":["../../src/chart-builders/TableSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,QAAQ,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AACnD,OAAO,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAQvE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,eAAe,GAC9B,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,KAAC,cAAc,IAAC,OAAO,kBACrB,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,UAAU,mBACA,IAAI,EACnB,SAAS,EAAC,gCAAgC,aAE1C,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,IAAI,WAAW,GAAQ,EACxD,KAAC,cAAc,IAAC,SAAS,EAAC,sCAAsC,GAAG,IAC5D,GACM,EACjB,KAAC,cAAc,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAC,OAAO,YAC7D,MAAC,OAAO,eACN,KAAC,YAAY,IAAC,WAAW,EAAC,qBAAgB,EAAC,SAAS,EAAC,SAAS,GAAG,EACjE,MAAC,WAAW,eACV,KAAC,YAAY,IAAC,SAAS,EAAC,SAAS,iCAAgC,EACjE,KAAC,YAAY,cACV,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;wCACpB,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;wCACpC,OAAO,CACL,MAAC,WAAW,IAEV,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,aAAa,EAAE,EAAE;gDAC1B,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC;gDAC1B,OAAO,CAAC,KAAK,CAAC,CAAC;4CACjB,CAAC,EACD,SAAS,EAAC,SAAS,aAEnB,KAAC,KAAK,IACJ,SAAS,EAAE,oBAAoB,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EAAE,GAClF,EACD,SAAS,KAXL,SAAS,CAYF,CACf,CAAC;oCACJ,CAAC,CAAC,GACW,IACH,IACN,GACK,IACT,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useState} from 'react';\nimport {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@sqlrooms/ui';\nimport {Check, ChevronsUpDown} from 'lucide-react';\nimport {useTablesWithColumns} from '../dashboard/useTablesWithColumns';\n\nexport interface TableSelectorProps {\n  value: string | undefined;\n  onChange?: (tableName: string) => void;\n  placeholder?: string;\n}\n\n/**\n * Table selector component for choosing a table from available tables.\n * Uses a searchable dropdown with command palette pattern.\n *\n * Filters to only show tables that have columns defined.\n */\nexport const TableSelector: FC<TableSelectorProps> = ({\n  value,\n  onChange,\n  placeholder = 'Select table…',\n}) => {\n  const [open, setOpen] = useState(false);\n  const tables = useTablesWithColumns();\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-full justify-between text-xs\"\n        >\n          <span className=\"truncate\">{value || placeholder}</span>\n          <ChevronsUpDown className=\"ml-1 h-3.5 w-3.5 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[300px] p-0 text-xs\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Search tables…\" className=\"text-xs\" />\n          <CommandList>\n            <CommandEmpty className=\"text-xs\">No tables found.</CommandEmpty>\n            <CommandGroup>\n              {tables.map((table) => {\n                const tableName = table.table.table;\n                return (\n                  <CommandItem\n                    key={tableName}\n                    value={tableName}\n                    onSelect={(selectedValue) => {\n                      onChange?.(selectedValue);\n                      setOpen(false);\n                    }}\n                    className=\"text-xs\"\n                  >\n                    <Check\n                      className={`mr-2 h-3.5 w-3.5 ${value === tableName ? 'opacity-100' : 'opacity-0'}`}\n                    />\n                    {tableName}\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"]}