@sqlrooms/mosaic 0.29.0-rc.7 → 0.29.0-rc.8

package/dist/charts/worksheet/ChartBlockRenderer.js

@@ -2,27 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { MosaicChart } from '../MosaicChart';
 import { useParseChartConfig } from '../useParseChartConfig';
-import { useDataTable } from '../../hooks/useDataTable';
+import { useDataTable } from '@sqlrooms/db';
 import { useTablesWithColumns } from '../../hooks/useTablesWithColumns';
 import { ChartBlockHeader } from './ChartBlockHeader';
 import { ChartSelectorEmptyState } from './ChartSelectorEmptyState';
-function getBlockDocumentChartSelectionName({ documentId, blockId, selectionGroupId, }) {
-    return selectionGroupId
-        ? `worksheet:${documentId}:chart-group:${selectionGroupId}:brush`
-        : `worksheet:${documentId}:chart-block:${blockId}:brush`;
-}
 function getBlockDocumentChartRuntimeKey({ documentId, blockId, }) {
     return `worksheet:${documentId}:chart-block:${blockId}`;
 }
-export const ChartBlockRenderer = ({ documentId, blockId, tableName, config, selectionGroupId, caption, readOnly, onTableNameChange, onConfigChange, onCaptionChange, }) => {
+export const ChartBlockRenderer = ({ documentId, blockId, tableName, config, caption, readOnly, onTableNameChange, onConfigChange, onCaptionChange, }) => {
     const tables = useTablesWithColumns();
     const selectedTable = useDataTable(tableName);
     const parseChartConfigResult = useParseChartConfig(config);
-    const selectionName = getBlockDocumentChartSelectionName({
-        documentId,
-        blockId,
-        selectionGroupId,
-    });
     const runtimeKey = getBlockDocumentChartRuntimeKey({ documentId, blockId });
     const handleSettingsOpenChange = useCallback((settingsOpen) => {
         if (parseChartConfigResult.success) {
@@ -42,6 +32,6 @@ export const ChartBlockRenderer = ({ documentId, blockId, tableName, config, sel
         return (_jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: ["Invalid chart configuration: ", parseChartConfigResult.error] }));
     }
     const chartConfig = parseChartConfigResult.config;
-    return (_jsxs("div", { className: "flex h-105 min-h-80 flex-col", children: [_jsx(ChartBlockHeader, { caption: caption, chartConfig: chartConfig, selectedTable: selectedTable, onCaptionChange: onCaptionChange, onSettingsOpenChange: handleSettingsOpenChange, onTableChange: handleTableChange, readOnly: readOnly, tables: tables }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(MosaicChart, { dataTable: selectedTable, selectionName: selectionName, config: chartConfig, runtimeKey: runtimeKey, onConfigChange: handleConfigChange }) })] }));
+    return (_jsxs("div", { className: "flex h-105 min-h-80 flex-col", children: [_jsx(ChartBlockHeader, { caption: caption, chartConfig: chartConfig, selectedTable: selectedTable, onCaptionChange: onCaptionChange, onSettingsOpenChange: handleSettingsOpenChange, onTableChange: handleTableChange, readOnly: readOnly, tables: tables }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(MosaicChart, { dataTable: selectedTable, config: chartConfig, runtimeKey: runtimeKey, onConfigChange: handleConfigChange }) })] }));
 };
 //# sourceMappingURL=ChartBlockRenderer.js.map

package/dist/charts/worksheet/ChartBlockRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartBlockRenderer.js","sourceRoot":"","sources":["../../../src/charts/worksheet/ChartBlockRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {DataTable} from '@sqlrooms/db';\nimport type {BlockDocumentChartRendererProps} from '@sqlrooms/documents';\nimport {FC, useCallback} from 'react';\nimport type {ChartConfig} from '../chart-types/chart-config';\nimport {MosaicChart} from '../MosaicChart';\nimport {useParseChartConfig} from '../useParseChartConfig';\nimport {useDataTable} from '../../hooks/useDataTable';\nimport {useTablesWithColumns} from '../../hooks/useTablesWithColumns';\nimport {ChartBlockHeader} from './ChartBlockHeader';\nimport {ChartSelectorEmptyState} from './ChartSelectorEmptyState';\n\nfunction getBlockDocumentChartSelectionName({\n  documentId,\n  blockId,\n  selectionGroupId,\n}: Pick<\n  BlockDocumentChartRendererProps,\n  'documentId' | 'blockId' | 'selectionGroupId'\n>) {\n  return selectionGroupId\n    ? `worksheet:${documentId}:chart-group:${selectionGroupId}:brush`\n    : `worksheet:${documentId}:chart-block:${blockId}:brush`;\n}\n\nfunction getBlockDocumentChartRuntimeKey({\n  documentId,\n  blockId,\n}: Pick<BlockDocumentChartRendererProps, 'documentId' | 'blockId'>) {\n  return `worksheet:${documentId}:chart-block:${blockId}`;\n}\n\nexport const ChartBlockRenderer: FC<BlockDocumentChartRendererProps> = ({\n  documentId,\n  blockId,\n  tableName,\n  config,\n  selectionGroupId,\n  caption,\n  readOnly,\n  onTableNameChange,\n  onConfigChange,\n  onCaptionChange,\n}) => {\n  const tables = useTablesWithColumns();\n  const selectedTable = useDataTable(tableName);\n\n  const parseChartConfigResult = useParseChartConfig(config);\n\n  const selectionName = getBlockDocumentChartSelectionName({\n    documentId,\n    blockId,\n    selectionGroupId,\n  });\n\n  const runtimeKey = getBlockDocumentChartRuntimeKey({documentId, blockId});\n\n  const handleSettingsOpenChange = useCallback(\n    (settingsOpen: boolean) => {\n      if (parseChartConfigResult.success) {\n        onConfigChange?.({...parseChartConfigResult.config, settingsOpen});\n      }\n    },\n    [parseChartConfigResult, onConfigChange],\n  );\n\n  const handleConfigChange = useCallback(\n    (nextConfig: ChartConfig) => {\n      onConfigChange?.(nextConfig);\n    },\n    [onConfigChange],\n  );\n\n  const handleTableChange = useCallback(\n    (table: DataTable) => {\n      onTableNameChange?.(table.table.toString());\n    },\n    [onTableNameChange],\n  );\n\n  if (!selectedTable) {\n    return (\n      <ChartSelectorEmptyState\n        disabled={readOnly || !onTableNameChange}\n        onChange={handleTableChange}\n        tables={tables}\n      />\n    );\n  }\n\n  if (!parseChartConfigResult.success) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center text-sm\">\n        Invalid chart configuration: {parseChartConfigResult.error}\n      </div>\n    );\n  }\n\n  const chartConfig = parseChartConfigResult.config;\n\n  return (\n    <div className=\"flex h-105 min-h-80 flex-col\">\n      <ChartBlockHeader\n        caption={caption}\n        chartConfig={chartConfig}\n        selectedTable={selectedTable}\n        onCaptionChange={onCaptionChange}\n        onSettingsOpenChange={handleSettingsOpenChange}\n        onTableChange={handleTableChange}\n        readOnly={readOnly}\n        tables={tables}\n      />\n      <div className=\"min-h-0 flex-1\">\n        <MosaicChart\n          dataTable={selectedTable}\n          selectionName={selectionName}\n          config={chartConfig}\n          runtimeKey={runtimeKey}\n          onConfigChange={handleConfigChange}\n        />\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ChartBlockRenderer.js","sourceRoot":"","sources":["../../../src/charts/worksheet/ChartBlockRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {DataTable} from '@sqlrooms/db';\nimport type {BlockDocumentChartRendererProps} from '@sqlrooms/documents';\nimport {FC, useCallback} from 'react';\nimport type {ChartConfig} from '../chart-types/chart-config';\nimport {MosaicChart} from '../MosaicChart';\nimport {useParseChartConfig} from '../useParseChartConfig';\nimport {useDataTable} from '@sqlrooms/db';\nimport {useTablesWithColumns} from '../../hooks/useTablesWithColumns';\nimport {ChartBlockHeader} from './ChartBlockHeader';\nimport {ChartSelectorEmptyState} from './ChartSelectorEmptyState';\n\nfunction getBlockDocumentChartRuntimeKey({\n  documentId,\n  blockId,\n}: Pick<BlockDocumentChartRendererProps, 'documentId' | 'blockId'>) {\n  return `worksheet:${documentId}:chart-block:${blockId}`;\n}\n\nexport const ChartBlockRenderer: FC<BlockDocumentChartRendererProps> = ({\n  documentId,\n  blockId,\n  tableName,\n  config,\n  caption,\n  readOnly,\n  onTableNameChange,\n  onConfigChange,\n  onCaptionChange,\n}) => {\n  const tables = useTablesWithColumns();\n  const selectedTable = useDataTable(tableName);\n\n  const parseChartConfigResult = useParseChartConfig(config);\n\n  const runtimeKey = getBlockDocumentChartRuntimeKey({documentId, blockId});\n\n  const handleSettingsOpenChange = useCallback(\n    (settingsOpen: boolean) => {\n      if (parseChartConfigResult.success) {\n        onConfigChange?.({...parseChartConfigResult.config, settingsOpen});\n      }\n    },\n    [parseChartConfigResult, onConfigChange],\n  );\n\n  const handleConfigChange = useCallback(\n    (nextConfig: ChartConfig) => {\n      onConfigChange?.(nextConfig);\n    },\n    [onConfigChange],\n  );\n\n  const handleTableChange = useCallback(\n    (table: DataTable) => {\n      onTableNameChange?.(table.table.toString());\n    },\n    [onTableNameChange],\n  );\n\n  if (!selectedTable) {\n    return (\n      <ChartSelectorEmptyState\n        disabled={readOnly || !onTableNameChange}\n        onChange={handleTableChange}\n        tables={tables}\n      />\n    );\n  }\n\n  if (!parseChartConfigResult.success) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center text-sm\">\n        Invalid chart configuration: {parseChartConfigResult.error}\n      </div>\n    );\n  }\n\n  const chartConfig = parseChartConfigResult.config;\n\n  return (\n    <div className=\"flex h-105 min-h-80 flex-col\">\n      <ChartBlockHeader\n        caption={caption}\n        chartConfig={chartConfig}\n        selectedTable={selectedTable}\n        onCaptionChange={onCaptionChange}\n        onSettingsOpenChange={handleSettingsOpenChange}\n        onTableChange={handleTableChange}\n        readOnly={readOnly}\n        tables={tables}\n      />\n      <div className=\"min-h-0 flex-1\">\n        <MosaicChart\n          dataTable={selectedTable}\n          config={chartConfig}\n          runtimeKey={runtimeKey}\n          onConfigChange={handleConfigChange}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/column-types-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-types-utils.d.ts","sourceRoot":"","sources":["../src/column-types-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,oBAAoB,UAgBhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAQjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAGrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAsC,CAAC;AAE5E,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE9D;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE7D"}
+{"version":3,"file":"column-types-utils.d.ts","sourceRoot":"","sources":["../src/column-types-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAWH,eAAO,MAAM,oBAAoB,UAgBhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAQjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAGrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAsC,CAAC;AAE5E,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE9D;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE7D"}

package/dist/column-types-utils.js

@@ -1,6 +1,14 @@
 /**
  * Column type constants for chart field type filtering
  */
+/**
+ * Normalizes DuckDB column types by removing parameter lists.
+ * E.g., "DECIMAL(10,2)" → "DECIMAL", "VARCHAR(255)" → "VARCHAR"
+ */
+function normalizeColumnType(columnType) {
+    const parenIndex = columnType.indexOf('(');
+    return parenIndex === -1 ? columnType : columnType.substring(0, parenIndex);
+}
 export const NUMERIC_COLUMN_TYPES = [
     'BIGINT',
     'BIT',
@@ -33,15 +41,15 @@ export const QUANTITATIVE_COLUMN_TYPES = [
 ];
 export const CATEGORICAL_COLUMN_TYPES = ['VARCHAR', 'TEXT', 'BLOB', 'ENUM'];
 export function isTemporalType(columnType) {
-    return TEMPORAL_COLUMN_TYPES.includes(columnType);
+    return TEMPORAL_COLUMN_TYPES.includes(normalizeColumnType(columnType));
 }
 export function isQuantitativeType(columnType) {
-    return QUANTITATIVE_COLUMN_TYPES.includes(columnType);
+    return QUANTITATIVE_COLUMN_TYPES.includes(normalizeColumnType(columnType));
 }
 export function isNumericType(columnType) {
-    return NUMERIC_COLUMN_TYPES.includes(columnType);
+    return NUMERIC_COLUMN_TYPES.includes(normalizeColumnType(columnType));
 }
 export function isCategoricalType(columnType) {
-    return CATEGORICAL_COLUMN_TYPES.includes(columnType);
+    return CATEGORICAL_COLUMN_TYPES.includes(normalizeColumnType(columnType));
 }
 //# sourceMappingURL=column-types-utils.js.map

package/dist/column-types-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-types-utils.js","sourceRoot":"","sources":["../src/column-types-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,QAAQ;IACR,KAAK;IACL,SAAS;IACT,QAAQ;IACR,OAAO;IACP,SAAS;IACT,SAAS;IACT,MAAM;IACN,UAAU;IACV,SAAS;IACT,SAAS;IACT,UAAU;IACV,UAAU;IACV,WAAW;IACX,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM;IACN,MAAM;IACN,WAAW;IACX,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,oBAAoB;IACvB,GAAG,qBAAqB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,UAAU,cAAc,CAAC,UAAkB;IAC/C,OAAO,qBAAqB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAkB;IACnD,OAAO,yBAAyB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,UAAkB;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,UAAkB;IAClD,OAAO,wBAAwB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACvD,CAAC","sourcesContent":["/**\n * Column type constants for chart field type filtering\n */\n\nexport const NUMERIC_COLUMN_TYPES = [\n  'BIGINT',\n  'BIT',\n  'DECIMAL',\n  'DOUBLE',\n  'FLOAT',\n  'HUGEINT',\n  'INTEGER',\n  'REAL',\n  'SMALLINT',\n  'TINYINT',\n  'UBIGINT',\n  'UHUGEINT',\n  'UINTEGER',\n  'USMALLINT',\n  'UTINYINT',\n];\n\nexport const TEMPORAL_COLUMN_TYPES = [\n  'DATE',\n  'TIME',\n  'TIMESTAMP',\n  'TIMESTAMP_MS',\n  'TIMESTAMP_NS',\n  'TIMESTAMP_S',\n  'TIMESTAMPTZ',\n];\n\nexport const QUANTITATIVE_COLUMN_TYPES = [\n  ...NUMERIC_COLUMN_TYPES,\n  ...TEMPORAL_COLUMN_TYPES,\n];\n\nexport const CATEGORICAL_COLUMN_TYPES = ['VARCHAR', 'TEXT', 'BLOB', 'ENUM'];\n\nexport function isTemporalType(columnType: string): boolean {\n  return TEMPORAL_COLUMN_TYPES.includes(columnType);\n}\n\nexport function isQuantitativeType(columnType: string): boolean {\n  return QUANTITATIVE_COLUMN_TYPES.includes(columnType);\n}\n\nexport function isNumericType(columnType: string): boolean {\n  return NUMERIC_COLUMN_TYPES.includes(columnType);\n}\n\nexport function isCategoricalType(columnType: string): boolean {\n  return CATEGORICAL_COLUMN_TYPES.includes(columnType);\n}\n"]}
+{"version":3,"file":"column-types-utils.js","sourceRoot":"","sources":["../src/column-types-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,SAAS,mBAAmB,CAAC,UAAkB;IAC7C,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3C,OAAO,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAC9E,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,QAAQ;IACR,KAAK;IACL,SAAS;IACT,QAAQ;IACR,OAAO;IACP,SAAS;IACT,SAAS;IACT,MAAM;IACN,UAAU;IACV,SAAS;IACT,SAAS;IACT,UAAU;IACV,UAAU;IACV,WAAW;IACX,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM;IACN,MAAM;IACN,WAAW;IACX,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,oBAAoB;IACvB,GAAG,qBAAqB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,UAAU,cAAc,CAAC,UAAkB;IAC/C,OAAO,qBAAqB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAkB;IACnD,OAAO,yBAAyB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;AAC7E,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,UAAkB;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,UAAkB;IAClD,OAAO,wBAAwB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;AAC5E,CAAC","sourcesContent":["/**\n * Column type constants for chart field type filtering\n */\n\n/**\n * Normalizes DuckDB column types by removing parameter lists.\n * E.g., \"DECIMAL(10,2)\" → \"DECIMAL\", \"VARCHAR(255)\" → \"VARCHAR\"\n */\nfunction normalizeColumnType(columnType: string): string {\n  const parenIndex = columnType.indexOf('(');\n  return parenIndex === -1 ? columnType : columnType.substring(0, parenIndex);\n}\n\nexport const NUMERIC_COLUMN_TYPES = [\n  'BIGINT',\n  'BIT',\n  'DECIMAL',\n  'DOUBLE',\n  'FLOAT',\n  'HUGEINT',\n  'INTEGER',\n  'REAL',\n  'SMALLINT',\n  'TINYINT',\n  'UBIGINT',\n  'UHUGEINT',\n  'UINTEGER',\n  'USMALLINT',\n  'UTINYINT',\n];\n\nexport const TEMPORAL_COLUMN_TYPES = [\n  'DATE',\n  'TIME',\n  'TIMESTAMP',\n  'TIMESTAMP_MS',\n  'TIMESTAMP_NS',\n  'TIMESTAMP_S',\n  'TIMESTAMPTZ',\n];\n\nexport const QUANTITATIVE_COLUMN_TYPES = [\n  ...NUMERIC_COLUMN_TYPES,\n  ...TEMPORAL_COLUMN_TYPES,\n];\n\nexport const CATEGORICAL_COLUMN_TYPES = ['VARCHAR', 'TEXT', 'BLOB', 'ENUM'];\n\nexport function isTemporalType(columnType: string): boolean {\n  return TEMPORAL_COLUMN_TYPES.includes(normalizeColumnType(columnType));\n}\n\nexport function isQuantitativeType(columnType: string): boolean {\n  return QUANTITATIVE_COLUMN_TYPES.includes(normalizeColumnType(columnType));\n}\n\nexport function isNumericType(columnType: string): boolean {\n  return NUMERIC_COLUMN_TYPES.includes(normalizeColumnType(columnType));\n}\n\nexport function isCategoricalType(columnType: string): boolean {\n  return CATEGORICAL_COLUMN_TYPES.includes(normalizeColumnType(columnType));\n}\n"]}

package/dist/components/AggregationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AggregationSelector.d.ts","sourceRoot":"","sources":["../../src/components/AggregationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAQ9B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAElD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAyB5D,CAAC"}
+{"version":3,"file":"AggregationSelector.d.ts","sourceRoot":"","sources":["../../src/components/AggregationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAGlD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AASD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoB5D,CAAC"}

package/dist/components/AggregationSelector.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { Combobox } from './Combobox';
+const AGGREGATION_OPTIONS = [
+    { value: 'sum', label: 'SUM' },
+    { value: 'avg', label: 'AVG' },
+    { value: 'min', label: 'MIN' },
+    { value: 'max', label: 'MAX' },
+];
 /**
  * Dropdown for selecting an aggregation function (SUM, AVG, MIN, MAX).
  */
 export const AggregationSelector = ({ value, onChange, }) => {
-    return (_jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "h-8 w-[100px] text-xs shadow-none", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "sum", className: "text-xs", children: "SUM" }), _jsx(SelectItem, { value: "avg", className: "text-xs", children: "AVG" }), _jsx(SelectItem, { value: "min", className: "text-xs", children: "MIN" }), _jsx(SelectItem, { value: "max", className: "text-xs", children: "MAX" })] })] }));
+    const selectedOption = AGGREGATION_OPTIONS.find((opt) => opt.value === value);
+    return (_jsxs(Combobox, { value: value, onChange: onChange, children: [_jsx(Combobox.Trigger, { className: "w-[100px] shadow-none", children: _jsx("span", { children: selectedOption?.label ?? value.toUpperCase() }) }), _jsx(Combobox.Content, { children: AGGREGATION_OPTIONS.map((option) => (_jsx(Combobox.Item, { value: option.value, children: _jsx("span", { className: "text-xs", children: option.label }) }, option.value))) })] }));
 };
 //# sourceMappingURL=AggregationSelector.js.map

package/dist/components/AggregationSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"AggregationSelector.js","sourceRoot":"","sources":["../../src/components/AggregationSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AAQtB;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAChE,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC3C,KAAC,aAAa,IAAC,SAAS,EAAC,mCAAmC,YAC1D,KAAC,WAAW,KAAG,GACD,EAChB,MAAC,aAAa,eACZ,KAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,oBAE9B,EACb,KAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,oBAE9B,EACb,KAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,oBAE9B,EACb,KAAC,UAAU,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,oBAE9B,IACC,IACT,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type {FC} from 'react';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport type {AggregateFunction} from '../schemas';\n\nexport interface AggregationSelectorProps {\n  value: AggregateFunction;\n  onChange: (value: AggregateFunction) => void;\n}\n\n/**\n * Dropdown for selecting an aggregation function (SUM, AVG, MIN, MAX).\n */\nexport const AggregationSelector: FC<AggregationSelectorProps> = ({\n  value,\n  onChange,\n}) => {\n  return (\n    <Select value={value} onValueChange={onChange}>\n      <SelectTrigger className=\"h-8 w-[100px] text-xs shadow-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"sum\" className=\"text-xs\">\n          SUM\n        </SelectItem>\n        <SelectItem value=\"avg\" className=\"text-xs\">\n          AVG\n        </SelectItem>\n        <SelectItem value=\"min\" className=\"text-xs\">\n          MIN\n        </SelectItem>\n        <SelectItem value=\"max\" className=\"text-xs\">\n          MAX\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  );\n};\n"]}
+{"version":3,"file":"AggregationSelector.js","sourceRoot":"","sources":["../../src/components/AggregationSelector.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAOpC,MAAM,mBAAmB,GAAG;IAC1B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;CACpB,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAChE,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACxC,KAAC,QAAQ,CAAC,OAAO,IAAC,SAAS,EAAC,uBAAuB,YACjD,yBAAO,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,GAAQ,GAC1C,EACnB,KAAC,QAAQ,CAAC,OAAO,cACd,mBAAmB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACnC,KAAC,QAAQ,CAAC,IAAI,IAAoB,KAAK,EAAE,MAAM,CAAC,KAAK,YACnD,eAAM,SAAS,EAAC,SAAS,YAAE,MAAM,CAAC,KAAK,GAAQ,IAD7B,MAAM,CAAC,KAAK,CAEhB,CACjB,CAAC,GACe,IACV,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type {FC} from 'react';\nimport type {AggregateFunction} from '../schemas';\nimport {Combobox} from './Combobox';\n\nexport interface AggregationSelectorProps {\n  value: AggregateFunction;\n  onChange: (value: AggregateFunction) => void;\n}\n\nconst AGGREGATION_OPTIONS = [\n  {value: 'sum', label: 'SUM'},\n  {value: 'avg', label: 'AVG'},\n  {value: 'min', label: 'MIN'},\n  {value: 'max', label: 'MAX'},\n] as const;\n\n/**\n * Dropdown for selecting an aggregation function (SUM, AVG, MIN, MAX).\n */\nexport const AggregationSelector: FC<AggregationSelectorProps> = ({\n  value,\n  onChange,\n}) => {\n  const selectedOption = AGGREGATION_OPTIONS.find((opt) => opt.value === value);\n\n  return (\n    <Combobox value={value} onChange={onChange}>\n      <Combobox.Trigger className=\"w-[100px] shadow-none\">\n        <span>{selectedOption?.label ?? value.toUpperCase()}</span>\n      </Combobox.Trigger>\n      <Combobox.Content>\n        {AGGREGATION_OPTIONS.map((option) => (\n          <Combobox.Item key={option.value} value={option.value}>\n            <span className=\"text-xs\">{option.label}</span>\n          </Combobox.Item>\n        ))}\n      </Combobox.Content>\n    </Combobox>\n  );\n};\n"]}

package/dist/components/BlockCaptionEditor.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+type BlockCaptionEditorProps = {
+    className?: string;
+    value?: string;
+    placeholder?: string;
+    isReadOnly?: boolean;
+    onChange: (value: string) => void;
+};
+/**
+ * Editable caption field for blocks (charts, queries, etc.).
+ *
+ * @param value - Current caption text
+ * @param className - Optional CSS class name
+ * @param placeholder - Placeholder text when empty
+ * @param isReadOnly - Whether the caption is editable
+ * @param onChange - Callback when caption changes
+ */
+export declare const BlockCaptionEditor: FC<BlockCaptionEditorProps>;
+export {};
+//# sourceMappingURL=BlockCaptionEditor.d.ts.map

package/dist/components/BlockCaptionEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockCaptionEditor.d.ts","sourceRoot":"","sources":["../../src/components/BlockCaptionEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,KAAK,uBAAuB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAgB1D,CAAC"}

package/dist/components/BlockCaptionEditor.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, EditableText } from '@sqlrooms/ui';
+/**
+ * Editable caption field for blocks (charts, queries, etc.).
+ *
+ * @param value - Current caption text
+ * @param className - Optional CSS class name
+ * @param placeholder - Placeholder text when empty
+ * @param isReadOnly - Whether the caption is editable
+ * @param onChange - Callback when caption changes
+ */
+export const BlockCaptionEditor = ({ value, className, placeholder, isReadOnly, onChange, }) => {
+    return (_jsx(EditableText, { className: cn('h-8 min-w-0 flex-1 text-sm font-medium', className), value: value ?? '', placeholder: placeholder, isReadOnly: isReadOnly, onChange: onChange }));
+};
+//# sourceMappingURL=BlockCaptionEditor.js.map

package/dist/components/BlockCaptionEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockCaptionEditor.js","sourceRoot":"","sources":["../../src/components/BlockCaptionEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAU9C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC9D,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,YAAY,IACX,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC} from 'react';\nimport {cn, EditableText} from '@sqlrooms/ui';\n\ntype BlockCaptionEditorProps = {\n  className?: string;\n  value?: string;\n  placeholder?: string;\n  isReadOnly?: boolean;\n  onChange: (value: string) => void;\n};\n\n/**\n * Editable caption field for blocks (charts, queries, etc.).\n *\n * @param value - Current caption text\n * @param className - Optional CSS class name\n * @param placeholder - Placeholder text when empty\n * @param isReadOnly - Whether the caption is editable\n * @param onChange - Callback when caption changes\n */\nexport const BlockCaptionEditor: FC<BlockCaptionEditorProps> = ({\n  value,\n  className,\n  placeholder,\n  isReadOnly,\n  onChange,\n}) => {\n  return (\n    <EditableText\n      className={cn('h-8 min-w-0 flex-1 text-sm font-medium', className)}\n      value={value ?? ''}\n      placeholder={placeholder}\n      isReadOnly={isReadOnly}\n      onChange={onChange}\n    />\n  );\n};\n"]}

package/dist/components/ColorSelector.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+export type ColorSelectorProps = {
+    value: string;
+    items: readonly string[];
+    onChange: (color: string) => void;
+};
+/**
+ * Dropdown for selecting a color from the chart color palette.
+ * Displays colors as circular indicators.
+ */
+export declare const ColorSelector: FC<ColorSelectorProps>;
+//# sourceMappingURL=ColorSelector.d.ts.map

package/dist/components/ColorSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.d.ts","sourceRoot":"","sources":["../../src/components/ColorSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAqB9B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsBhD,CAAC"}

package/dist/components/ColorSelector.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from './Combobox';
+import { cn } from '@sqlrooms/ui';
+const ColorSelectorItem = ({ color, className }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('h-4 w-4 rounded-full border border-gray-300', className), style: { backgroundColor: color } }), _jsx("span", { className: "sr-only", children: color })] }));
+};
+/**
+ * Dropdown for selecting a color from the chart color palette.
+ * Displays colors as circular indicators.
+ */
+export const ColorSelector = ({ value, items, onChange, }) => {
+    return (_jsxs(Combobox, { value: value, onChange: onChange, children: [_jsx(Combobox.Trigger, { className: "w-auto gap-1.5 px-2 shadow-none [&>svg]:ml-0", ariaLabel: "Select color", children: _jsx(ColorSelectorItem, { color: value, className: "h-3.5 w-3.5 shrink-0" }) }), _jsx(Combobox.Content, { children: items.map((color) => (_jsx(Combobox.Item, { value: color, children: _jsx(ColorSelectorItem, { color: color }) }, color))) })] }));
+};
+//# sourceMappingURL=ColorSelector.js.map

package/dist/components/ColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.js","sourceRoot":"","sources":["../../src/components/ColorSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAOhC,MAAM,iBAAiB,GAA+B,CAAC,EAAC,KAAK,EAAE,SAAS,EAAC,EAAE,EAAE;IAC3E,OAAO,CACL,8BACE,cACE,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EACvE,KAAK,EAAE,EAAC,eAAe,EAAE,KAAK,EAAC,GAC/B,EACF,eAAM,SAAS,EAAC,SAAS,YAAE,KAAK,GAAQ,IACvC,CACJ,CAAC;AACJ,CAAC,CAAC;AAQF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACxC,KAAC,QAAQ,CAAC,OAAO,IACf,SAAS,EAAC,8CAA8C,EACxD,SAAS,EAAC,cAAc,YAExB,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB,GAAG,GACnD,EACnB,KAAC,QAAQ,CAAC,OAAO,cACd,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,KAAC,QAAQ,CAAC,IAAI,IAAa,KAAK,EAAE,KAAK,YACrC,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,GAAI,IADjB,KAAK,CAET,CACjB,CAAC,GACe,IACV,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type {FC} from 'react';\nimport {Combobox} from './Combobox';\nimport {cn} from '@sqlrooms/ui';\n\ntype ColorSelectorItemProps = {\n  color: string;\n  className?: string;\n};\n\nconst ColorSelectorItem: FC<ColorSelectorItemProps> = ({color, className}) => {\n  return (\n    <>\n      <div\n        className={cn('h-4 w-4 rounded-full border border-gray-300', className)}\n        style={{backgroundColor: color}}\n      />\n      <span className=\"sr-only\">{color}</span>\n    </>\n  );\n};\n\nexport type ColorSelectorProps = {\n  value: string;\n  items: readonly string[];\n  onChange: (color: string) => void;\n};\n\n/**\n * Dropdown for selecting a color from the chart color palette.\n * Displays colors as circular indicators.\n */\nexport const ColorSelector: FC<ColorSelectorProps> = ({\n  value,\n  items,\n  onChange,\n}) => {\n  return (\n    <Combobox value={value} onChange={onChange}>\n      <Combobox.Trigger\n        className=\"w-auto gap-1.5 px-2 shadow-none [&>svg]:ml-0\"\n        ariaLabel=\"Select color\"\n      >\n        <ColorSelectorItem color={value} className=\"h-3.5 w-3.5 shrink-0\" />\n      </Combobox.Trigger>\n      <Combobox.Content>\n        {items.map((color) => (\n          <Combobox.Item key={color} value={color}>\n            <ColorSelectorItem color={color} />\n          </Combobox.Item>\n        ))}\n      </Combobox.Content>\n    </Combobox>\n  );\n};\n"]}

package/dist/components/ColumnSelector.d.ts

@@ -4,6 +4,7 @@ export interface ColumnSelectorProps {
     value: string | undefined;
     onChange: (value: string) => void;
     placeholder?: string;
+    className?: string;
 }
 export declare const ColumnSelector: FC<ColumnSelectorProps> & {
     Numeric: FC<Omit<ColumnSelectorProps, "types">>;

package/dist/components/ColumnSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../src/components/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"}
+{"version":3,"file":"ColumnSelector.d.ts","sourceRoot":"","sources":["../../src/components/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;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}

package/dist/components/ColumnSelector.js

@@ -11,13 +11,13 @@ import { useColumnsContext } from './ColumnsContext';
  * - `<ColumnSelector.Quantitative />` - numeric + temporal
  * - `<ColumnSelector.Categorical />` - text/enum types
  */
-const ColumnSelectorRoot = ({ types, value, onChange, placeholder, }) => {
+const ColumnSelectorRoot = ({ types, value, onChange, placeholder, className, }) => {
     const { columns } = useColumnsContext();
     return (_jsx(FieldSelectorInput, { field: {
             key: '',
             label: '',
             types,
-        }, value: value, columns: columns, onChange: onChange, placeholder: placeholder ?? 'Select column…' }));
+        }, value: value, columns: columns, onChange: onChange, placeholder: placeholder ?? 'Select column…', className: className }));
 };
 const Numeric = (props) => (_jsx(ColumnSelectorRoot, { ...props, types: NUMERIC_COLUMN_TYPES }));
 const Quantitative = (props) => (_jsx(ColumnSelectorRoot, { ...props, types: QUANTITATIVE_COLUMN_TYPES }));

package/dist/components/ColumnSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../src/components/ColumnSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,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 '../column-types-utils';\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"]}
+{"version":3,"file":"ColumnSelector.js","sourceRoot":"","sources":["../../src/components/ColumnSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAUnD;;;;;;;;GAQG;AACH,MAAM,kBAAkB,GAA4B,CAAC,EACnD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,GACV,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,EAC5C,SAAS,EAAE,SAAS,GACpB,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 '../column-types-utils';\nimport {useColumnsContext} from './ColumnsContext';\n\nexport interface ColumnSelectorProps {\n  types?: string[];\n  value: string | undefined;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: 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  className,\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      className={className}\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/components/Combobox.d.ts

@@ -0,0 +1,45 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { type UseComboboxOptions } from './useCombobox';
+type ComboboxRootProps<T extends string = string> = PropsWithChildren<UseComboboxOptions<T> & {
+    currentValue?: string;
+}>;
+declare function ComboboxRoot<T extends string = string>({ value, onChange, currentValue, children, }: ComboboxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+type ComboboxTriggerProps = {
+    className?: string;
+    ariaLabel?: string;
+};
+type ComboboxContentProps = {
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+};
+type ComboboxItemProps = {
+    value: string;
+    isSelected?: boolean;
+};
+/**
+ * Compound component for Popover-based combobox selectors.
+ *
+ * Example usage:
+ * ```tsx
+ * <Combobox value={value} onChange={onChange}>
+ *   <Combobox.Trigger>
+ *     <span>{selectedLabel}</span>
+ *   </Combobox.Trigger>
+ *   <Combobox.Content searchable searchPlaceholder="Search...">
+ *     {options.map(opt => (
+ *       <Combobox.Item key={opt.value} value={opt.value}>
+ *         <span>{opt.label}</span>
+ *       </Combobox.Item>
+ *     ))}
+ *   </Combobox.Content>
+ * </Combobox>
+ * ```
+ */
+export declare const Combobox: typeof ComboboxRoot & {
+    Trigger: FC<PropsWithChildren<ComboboxTriggerProps>>;
+    Content: FC<PropsWithChildren<ComboboxContentProps>>;
+    Item: FC<PropsWithChildren<ComboboxItemProps>>;
+};
+export {};
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/components/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAef,OAAO,EAAc,KAAK,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAoBnE,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CACnE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC/C,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CActB;AAED,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyBF,KAAK,oBAAoB,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAuBF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuBF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ;;;;CAInB,CAAC"}

package/dist/components/Combobox.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, } from 'react';
+import { Button, cn, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useCombobox } from './useCombobox';
+const ComboboxContext = createContext(null);
+function useComboboxContext() {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('Combobox compound components must be used within Combobox');
+    }
+    return context;
+}
+function ComboboxRoot({ value, onChange, currentValue, children, }) {
+    const { popoverProps, handleSelect, open } = useCombobox({ value, onChange });
+    return (_jsx(ComboboxContext.Provider, { value: {
+            open,
+            currentValue: currentValue ?? String(value),
+            handleSelect,
+        }, children: _jsx(Popover, { ...popoverProps, children: children }) }));
+}
+const ComboboxTrigger = ({ children, className, ariaLabel, }) => {
+    const { open } = useComboboxContext();
+    return (_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, "aria-label": ariaLabel, className: cn('h-8 justify-between text-xs font-normal', className), children: [children, _jsx(ChevronsUpDown, { className: "ml-2 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }));
+};
+const ComboboxContent = ({ children, searchable = false, searchPlaceholder = 'Search...', emptyMessage = 'No matching option.', }) => {
+    return (_jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0 text-xs", children: _jsxs(Command, { children: [searchable && (_jsx(CommandInput, { placeholder: searchPlaceholder, className: "text-xs" })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: children })] })] }) }));
+};
+const ComboboxItem = ({ value, children, isSelected, }) => {
+    const { currentValue, handleSelect } = useComboboxContext();
+    const selected = isSelected ?? currentValue === value;
+    return (_jsxs(CommandItem, { value: value, onSelect: handleSelect, children: [_jsx(Check, { className: cn('h-3.5 w-3.5 shrink-0', selected ? 'opacity-100' : 'opacity-0') }), children] }));
+};
+/**
+ * Compound component for Popover-based combobox selectors.
+ *
+ * Example usage:
+ * ```tsx
+ * <Combobox value={value} onChange={onChange}>
+ *   <Combobox.Trigger>
+ *     <span>{selectedLabel}</span>
+ *   </Combobox.Trigger>
+ *   <Combobox.Content searchable searchPlaceholder="Search...">
+ *     {options.map(opt => (
+ *       <Combobox.Item key={opt.value} value={opt.value}>
+ *         <span>{opt.label}</span>
+ *       </Combobox.Item>
+ *     ))}
+ *   </Combobox.Content>
+ * </Combobox>
+ * ```
+ */
+export const Combobox = Object.assign(ComboboxRoot, {
+    Trigger: ComboboxTrigger,
+    Content: ComboboxContent,
+    Item: ComboboxItem,
+});
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n} from 'react';\nimport {\n  Button,\n  cn,\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 {useCombobox, type UseComboboxOptions} from './useCombobox';\n\ninterface ComboboxContextValue {\n  open: boolean;\n  currentValue: string;\n  handleSelect: (value: string) => void;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useComboboxContext() {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'Combobox compound components must be used within Combobox',\n    );\n  }\n  return context;\n}\n\ntype ComboboxRootProps<T extends string = string> = PropsWithChildren<\n  UseComboboxOptions<T> & {\n    currentValue?: string;\n  }\n>;\n\nfunction ComboboxRoot<T extends string = string>({\n  value,\n  onChange,\n  currentValue,\n  children,\n}: ComboboxRootProps<T>) {\n  const {popoverProps, handleSelect, open} = useCombobox({value, onChange});\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        open,\n        currentValue: currentValue ?? String(value),\n        handleSelect,\n      }}\n    >\n      <Popover {...popoverProps}>{children}</Popover>\n    </ComboboxContext.Provider>\n  );\n}\n\ntype ComboboxTriggerProps = {\n  className?: string;\n  ariaLabel?: string;\n};\n\nconst ComboboxTrigger: FC<PropsWithChildren<ComboboxTriggerProps>> = ({\n  children,\n  className,\n  ariaLabel,\n}) => {\n  const {open} = useComboboxContext();\n\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-label={ariaLabel}\n        className={cn('h-8 justify-between text-xs font-normal', className)}\n      >\n        {children}\n        <ChevronsUpDown className=\"ml-2 h-3.5 w-3.5 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n  );\n};\n\ntype ComboboxContentProps = {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n};\n\nconst ComboboxContent: FC<PropsWithChildren<ComboboxContentProps>> = ({\n  children,\n  searchable = false,\n  searchPlaceholder = 'Search...',\n  emptyMessage = 'No matching option.',\n}) => {\n  return (\n    <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0 text-xs\">\n      <Command>\n        {searchable && (\n          <CommandInput placeholder={searchPlaceholder} className=\"text-xs\" />\n        )}\n        <CommandList>\n          <CommandEmpty>{emptyMessage}</CommandEmpty>\n          <CommandGroup>{children}</CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  );\n};\n\ntype ComboboxItemProps = {\n  value: string;\n  isSelected?: boolean;\n};\n\nconst ComboboxItem: FC<PropsWithChildren<ComboboxItemProps>> = ({\n  value,\n  children,\n  isSelected,\n}) => {\n  const {currentValue, handleSelect} = useComboboxContext();\n  const selected = isSelected ?? currentValue === value;\n\n  return (\n    <CommandItem value={value} onSelect={handleSelect}>\n      <Check\n        className={cn(\n          'h-3.5 w-3.5 shrink-0',\n          selected ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n      {children}\n    </CommandItem>\n  );\n};\n\n/**\n * Compound component for Popover-based combobox selectors.\n *\n * Example usage:\n * ```tsx\n * <Combobox value={value} onChange={onChange}>\n *   <Combobox.Trigger>\n *     <span>{selectedLabel}</span>\n *   </Combobox.Trigger>\n *   <Combobox.Content searchable searchPlaceholder=\"Search...\">\n *     {options.map(opt => (\n *       <Combobox.Item key={opt.value} value={opt.value}>\n *         <span>{opt.label}</span>\n *       </Combobox.Item>\n *     ))}\n *   </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport const Combobox = Object.assign(ComboboxRoot, {\n  Trigger: ComboboxTrigger,\n  Content: ComboboxContent,\n  Item: ComboboxItem,\n});\n"]}

package/dist/components/FieldSelectorInput.d.ts

@@ -6,6 +6,7 @@ export interface FieldSelectorInputProps {
     value: string | undefined;
     onChange: (value: string) => void;
     placeholder?: string;
+    className?: string;
 }
 /**
  * A searchable dropdown selector for choosing a table column for a chart builder field.

package/dist/components/FieldSelectorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelectorInput.d.ts","sourceRoot":"","sources":["../../src/components/FieldSelectorInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+EhE,CAAC"}
+{"version":3,"file":"FieldSelectorInput.d.ts","sourceRoot":"","sources":["../../src/components/FieldSelectorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsDhE,CAAC"}

package/dist/components/FieldSelectorInput.js

@@ -1,19 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { useState } from 'react';
+import { Combobox } from './Combobox';
+import { cn } from '@sqlrooms/ui';
 /**
  * A searchable dropdown selector for choosing a table column for a chart builder field.
  */
-export const FieldSelectorInput = ({ field, columns, value, onChange, placeholder = 'Select...', }) => {
-    const [open, setOpen] = useState(false);
+export const FieldSelectorInput = ({ field, columns, value, onChange, className, placeholder = 'Select...', }) => {
     const filteredColumns = field.types
         ? columns.filter((col) => field.types.some((t) => col.type.toUpperCase() === t.toUpperCase()))
         : columns;
     const selectedColumn = filteredColumns.find((col) => col.name === value);
-    return (_jsx("div", { className: "@container flex flex-col gap-1", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "h-8 w-full justify-between text-xs font-normal", children: [selectedColumn ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1", children: [_jsx("span", { className: "truncate text-xs", children: selectedColumn.name }), _jsx("span", { className: "text-muted-foreground hidden overflow-hidden text-[8px] whitespace-nowrap @[180px]:inline", children: selectedColumn.type })] })) : (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: placeholder })), _jsx(ChevronsUpDown, { className: "ml-2 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0 text-xs", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: `Search columns...`, className: "text-xs" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matching column." }), _jsx(CommandGroup, { children: filteredColumns.map((col) => (_jsxs(CommandItem, { value: col.name, onSelect: (currentValue) => {
-                                                onChange(currentValue);
-                                                setOpen(false);
-                                            }, children: [_jsx(Check, { className: cn('mr-2 h-3.5 w-3.5 shrink-0', value === col.name ? 'opacity-100' : 'opacity-0') }), _jsx("span", { className: "truncate text-xs", children: col.name }), _jsx("span", { className: "text-muted-foreground ml-auto text-[8px]", children: col.type })] }, col.name))) })] })] }) })] }) }));
+    return (_jsx("div", { className: cn('@container flex flex-col gap-1', className), children: _jsxs(Combobox, { value: value ?? '', onChange: onChange, children: [_jsx(Combobox.Trigger, { className: "w-full", children: selectedColumn ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1", children: [_jsx("span", { className: "truncate text-xs", children: selectedColumn.name }), _jsx("span", { className: "text-muted-foreground hidden overflow-hidden text-[8px] whitespace-nowrap @[180px]:inline", children: selectedColumn.type })] })) : value ? (_jsx("span", { className: "flex min-w-0 items-baseline gap-1", children: _jsx("span", { className: "truncate text-xs", children: value }) })) : (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: placeholder })) }), _jsx(Combobox.Content, { searchable: true, searchPlaceholder: "Search columns...", emptyMessage: "No matching column.", children: filteredColumns.map((col) => (_jsxs(Combobox.Item, { value: col.name, children: [_jsx("span", { className: "truncate text-xs", children: col.name }), _jsx("span", { className: "text-muted-foreground ml-auto text-[8px]", children: col.type })] }, col.name))) })] }) }));
 };
 //# sourceMappingURL=FieldSelectorInput.js.map

package/dist/components/FieldSelectorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelectorInput.js","sourceRoot":"","sources":["../../src/components/FieldSelectorInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,EAAE,EACF,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,OAAc,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AActC;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,WAAW,GAC1B,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK;QACjC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CACrB,KAAK,CAAC,KAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CACrE;QACH,CAAC,CAAC,OAAO,CAAC;IAEZ,MAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;IAEzE,OAAO,CACL,cAAK,SAAS,EAAC,gCAAgC,YAC7C,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,UAAU,mBACA,IAAI,EACnB,SAAS,EAAC,gDAAgD,aAEzD,cAAc,CAAC,CAAC,CAAC,CAChB,gBAAM,SAAS,EAAC,mCAAmC,aACjD,eAAM,SAAS,EAAC,kBAAkB,YAAE,cAAc,CAAC,IAAI,GAAQ,EAC/D,eAAM,SAAS,EAAC,2FAA2F,YACxG,cAAc,CAAC,IAAI,GACf,IACF,CACR,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,wCAAwC,YACrD,WAAW,GACP,CACR,EACD,KAAC,cAAc,IAAC,SAAS,EAAC,sCAAsC,GAAG,IAC5D,GACM,EACjB,KAAC,cAAc,IAAC,SAAS,EAAC,+CAA+C,YACvE,MAAC,OAAO,eACN,KAAC,YAAY,IACX,WAAW,EAAE,mBAAmB,EAChC,SAAS,EAAC,SAAS,GACnB,EACF,MAAC,WAAW,eACV,KAAC,YAAY,sCAAmC,EAChD,KAAC,YAAY,cACV,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5B,MAAC,WAAW,IAEV,KAAK,EAAE,GAAG,CAAC,IAAI,EACf,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE;gDACzB,QAAQ,CAAC,YAAY,CAAC,CAAC;gDACvB,OAAO,CAAC,KAAK,CAAC,CAAC;4CACjB,CAAC,aAED,KAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,KAAK,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CACjD,GACD,EACF,eAAM,SAAS,EAAC,kBAAkB,YAAE,GAAG,CAAC,IAAI,GAAQ,EACpD,eAAM,SAAS,EAAC,0CAA0C,YACvD,GAAG,CAAC,IAAI,GACJ,KAhBF,GAAG,CAAC,IAAI,CAiBD,CACf,CAAC,GACW,IACH,IACN,GACK,IACT,GACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  Button,\n  cn,\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 React, {useState} from 'react';\nimport {\n  ChartBuilderColumn,\n  ChartBuilderField,\n} from '../charts/chart-types/base-types';\n\nexport interface FieldSelectorInputProps {\n  field: ChartBuilderField;\n  columns: ChartBuilderColumn[];\n  value: string | undefined;\n  onChange: (value: string) => void;\n  placeholder?: string;\n}\n\n/**\n * A searchable dropdown selector for choosing a table column for a chart builder field.\n */\nexport const FieldSelectorInput: React.FC<FieldSelectorInputProps> = ({\n  field,\n  columns,\n  value,\n  onChange,\n  placeholder = 'Select...',\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const filteredColumns = field.types\n    ? columns.filter((col) =>\n        field.types!.some((t) => col.type.toUpperCase() === t.toUpperCase()),\n      )\n    : columns;\n\n  const selectedColumn = filteredColumns.find((col) => col.name === value);\n\n  return (\n    <div className=\"@container flex flex-col gap-1\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"h-8 w-full justify-between text-xs font-normal\"\n          >\n            {selectedColumn ? (\n              <span className=\"flex min-w-0 items-baseline gap-1\">\n                <span className=\"truncate text-xs\">{selectedColumn.name}</span>\n                <span className=\"text-muted-foreground hidden overflow-hidden text-[8px] whitespace-nowrap @[180px]:inline\">\n                  {selectedColumn.type}\n                </span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground truncate text-xs\">\n                {placeholder}\n              </span>\n            )}\n            <ChevronsUpDown className=\"ml-2 h-3.5 w-3.5 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0 text-xs\">\n          <Command>\n            <CommandInput\n              placeholder={`Search columns...`}\n              className=\"text-xs\"\n            />\n            <CommandList>\n              <CommandEmpty>No matching column.</CommandEmpty>\n              <CommandGroup>\n                {filteredColumns.map((col) => (\n                  <CommandItem\n                    key={col.name}\n                    value={col.name}\n                    onSelect={(currentValue) => {\n                      onChange(currentValue);\n                      setOpen(false);\n                    }}\n                  >\n                    <Check\n                      className={cn(\n                        'mr-2 h-3.5 w-3.5 shrink-0',\n                        value === col.name ? 'opacity-100' : 'opacity-0',\n                      )}\n                    />\n                    <span className=\"truncate text-xs\">{col.name}</span>\n                    <span className=\"text-muted-foreground ml-auto text-[8px]\">\n                      {col.type}\n                    </span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"FieldSelectorInput.js","sourceRoot":"","sources":["../../src/components/FieldSelectorInput.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAWhC;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,WAAW,GAC1B,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK;QACjC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CACrB,KAAK,CAAC,KAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CACrE;QACH,CAAC,CAAC,OAAO,CAAC;IAEZ,MAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;IAEzE,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,YAC7D,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,aAC9C,KAAC,QAAQ,CAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,YACjC,cAAc,CAAC,CAAC,CAAC,CAChB,gBAAM,SAAS,EAAC,mCAAmC,aACjD,eAAM,SAAS,EAAC,kBAAkB,YAAE,cAAc,CAAC,IAAI,GAAQ,EAC/D,eAAM,SAAS,EAAC,2FAA2F,YACxG,cAAc,CAAC,IAAI,GACf,IACF,CACR,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CACV,eAAM,SAAS,EAAC,mCAAmC,YACjD,eAAM,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAQ,GAC5C,CACR,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,wCAAwC,YACrD,WAAW,GACP,CACR,GACgB,EACnB,KAAC,QAAQ,CAAC,OAAO,IACf,UAAU,QACV,iBAAiB,EAAC,mBAAmB,EACrC,YAAY,EAAC,qBAAqB,YAEjC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5B,MAAC,QAAQ,CAAC,IAAI,IAAgB,KAAK,EAAE,GAAG,CAAC,IAAI,aAC3C,eAAM,SAAS,EAAC,kBAAkB,YAAE,GAAG,CAAC,IAAI,GAAQ,EACpD,eAAM,SAAS,EAAC,0CAA0C,YACvD,GAAG,CAAC,IAAI,GACJ,KAJW,GAAG,CAAC,IAAI,CAKZ,CACjB,CAAC,GACe,IACV,GACP,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport {\n  ChartBuilderColumn,\n  ChartBuilderField,\n} from '../charts/chart-types/base-types';\nimport {Combobox} from './Combobox';\nimport {cn} from '@sqlrooms/ui';\n\nexport interface FieldSelectorInputProps {\n  field: ChartBuilderField;\n  columns: ChartBuilderColumn[];\n  value: string | undefined;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n}\n\n/**\n * A searchable dropdown selector for choosing a table column for a chart builder field.\n */\nexport const FieldSelectorInput: React.FC<FieldSelectorInputProps> = ({\n  field,\n  columns,\n  value,\n  onChange,\n  className,\n  placeholder = 'Select...',\n}) => {\n  const filteredColumns = field.types\n    ? columns.filter((col) =>\n        field.types!.some((t) => col.type.toUpperCase() === t.toUpperCase()),\n      )\n    : columns;\n\n  const selectedColumn = filteredColumns.find((col) => col.name === value);\n\n  return (\n    <div className={cn('@container flex flex-col gap-1', className)}>\n      <Combobox value={value ?? ''} onChange={onChange}>\n        <Combobox.Trigger className=\"w-full\">\n          {selectedColumn ? (\n            <span className=\"flex min-w-0 items-baseline gap-1\">\n              <span className=\"truncate text-xs\">{selectedColumn.name}</span>\n              <span className=\"text-muted-foreground hidden overflow-hidden text-[8px] whitespace-nowrap @[180px]:inline\">\n                {selectedColumn.type}\n              </span>\n            </span>\n          ) : value ? (\n            <span className=\"flex min-w-0 items-baseline gap-1\">\n              <span className=\"truncate text-xs\">{value}</span>\n            </span>\n          ) : (\n            <span className=\"text-muted-foreground truncate text-xs\">\n              {placeholder}\n            </span>\n          )}\n        </Combobox.Trigger>\n        <Combobox.Content\n          searchable\n          searchPlaceholder=\"Search columns...\"\n          emptyMessage=\"No matching column.\"\n        >\n          {filteredColumns.map((col) => (\n            <Combobox.Item key={col.name} value={col.name}>\n              <span className=\"truncate text-xs\">{col.name}</span>\n              <span className=\"text-muted-foreground ml-auto text-[8px]\">\n                {col.type}\n              </span>\n            </Combobox.Item>\n          ))}\n        </Combobox.Content>\n      </Combobox>\n    </div>\n  );\n};\n"]}

package/dist/components/MultiFieldSelector.d.ts

@@ -1,14 +1,17 @@
 import { type FC } from 'react';
 import type { YFieldConfig } from '../charts/chart-types/line-chart/schema';
+type RenderItemFunction = (fieldConfig: YFieldConfig, index: number, handleUpdate: (index: number, updates: Partial<YFieldConfig>) => void) => React.ReactNode;
 export interface MultiFieldSelectorProps {
     types?: string[];
     value: YFieldConfig[];
     onChange: (value: YFieldConfig[]) => void;
-    showAggregation?: boolean;
+    onAdd: (fieldName: string) => void;
+    renderItem?: RenderItemFunction;
 }
 export declare const MultiFieldSelector: FC<MultiFieldSelectorProps> & {
     Numeric: FC<Omit<MultiFieldSelectorProps, "types">>;
     Quantitative: FC<Omit<MultiFieldSelectorProps, "types">>;
     Categorical: FC<Omit<MultiFieldSelectorProps, "types">>;
 };
+export {};
 //# sourceMappingURL=MultiFieldSelector.d.ts.map

package/dist/components/MultiFieldSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFieldSelector.d.ts","sourceRoot":"","sources":["../../src/components/MultiFieldSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,yCAAyC,CAAC;AAE1E,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAsHD,eAAO,MAAM,kBAAkB;;;;CAI7B,CAAC"}
+{"version":3,"file":"MultiFieldSelector.d.ts","sourceRoot":"","sources":["../../src/components/MultiFieldSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,yCAAyC,CAAC;AAE1E,KAAK,kBAAkB,GAAG,CACxB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,KAClE,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAmGD,eAAO,MAAM,kBAAkB;;;;CAI7B,CAAC"}

package/dist/components/MultiFieldSelector.js

@@ -3,7 +3,6 @@ import { Button } from '@sqlrooms/ui';
 import { Trash2 } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import { ColumnSelector } from './ColumnSelector';
-import { AggregationSelector } from './AggregationSelector';
 import { ColumnsProvider, useColumnsContext } from './ColumnsContext';
 import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, CATEGORICAL_COLUMN_TYPES, } from '../column-types-utils';
 /**
@@ -16,7 +15,7 @@ import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, CATEGORICAL_COLUMN_TYP
  * - `<MultiFieldSelector.Quantitative />` - numeric + temporal
  * - `<MultiFieldSelector.Categorical />` - text/enum types
  */
-const MultiFieldSelectorRoot = ({ types, value, onChange, showAggregation = false, }) => {
+const MultiFieldSelectorRoot = ({ types, value, onChange, onAdd, renderItem, }) => {
     const { columns } = useColumnsContext();
     const selectedFieldNames = useMemo(() => value.map((v) => v.field), [value]);
     const availableColumns = useMemo(() => columns.filter((col) => !selectedFieldNames.includes(col.name)), [columns, selectedFieldNames]);
@@ -28,19 +27,11 @@ const MultiFieldSelectorRoot = ({ types, value, onChange, showAggregation = fals
     const handleRemove = useCallback((index) => {
         onChange(value.filter((_, i) => i !== index));
     }, [value, onChange]);
-    const handleAdd = useCallback((fieldName) => {
-        if (fieldName) {
-            onChange([...value, { field: fieldName, aggregate: 'sum' }]);
-        }
-    }, [value, onChange]);
     return (_jsxs("div", { className: "space-y-1", children: [value.map((fieldConfig, index) => {
-                const aggregate = fieldConfig.aggregate || 'sum';
                 return (_jsxs("div", { className: "grid items-end gap-2", style: {
-                        gridTemplateColumns: showAggregation
-                            ? 'minmax(120px, 1fr) 100px 32px'
-                            : 'minmax(120px, 1fr) 32px',
-                    }, 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, children: _jsx(ColumnSelector, { types: types, value: undefined, onChange: handleAdd, placeholder: "Select field..." }) })] }));
+                        gridTemplateColumns: 'minmax(120px, 1fr) auto 32px',
+                    }, children: [_jsx(ColumnSelector, { types: types, value: fieldConfig.field, onChange: (newField) => handleUpdate(index, { field: newField }) }), renderItem && renderItem(fieldConfig, index, handleUpdate), _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, children: _jsx(ColumnSelector, { types: types, value: undefined, onChange: onAdd, placeholder: "Select field..." }) })] }));
 };
 const Numeric = (props) => (_jsx(MultiFieldSelectorRoot, { ...props, types: NUMERIC_COLUMN_TYPES }));
 const Quantitative = (props) => (_jsx(MultiFieldSelectorRoot, { ...props, types: QUANTITATIVE_COLUMN_TYPES }));