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

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;AAoB9B,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,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox, 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,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AAO1C,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, 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/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;AAG1C,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,CA+DhE,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, 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))) })] })] }) })] }) }));
+    const isMissing = Boolean(value && !selectedColumn);
+    return (_jsx("div", { className: cn('@container flex flex-col gap-1', className), children: _jsxs(Combobox, { value: value ?? '', onChange: onChange, children: [_jsx(Combobox.Trigger, { className: cn('w-full', isMissing && 'border-destructive/60 bg-destructive/5'), 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 ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1", children: [_jsx("span", { className: "text-destructive truncate text-xs", children: value }), _jsx("span", { className: "text-destructive/60 hidden text-[8px] @[180px]:inline", children: "missing" })] })) : (_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,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AAW1C;;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;IACzE,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC;IAEpD,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,IACf,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,SAAS,IAAI,wCAAwC,CACtD,YAEA,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,gBAAM,SAAS,EAAC,mCAAmC,aACjD,eAAM,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAQ,EAClE,eAAM,SAAS,EAAC,uDAAuD,wBAEhE,IACF,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, 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  const isMissing = Boolean(value && !selectedColumn);\n\n  return (\n    <div className={cn('@container flex flex-col gap-1', className)}>\n      <Combobox value={value ?? ''} onChange={onChange}>\n        <Combobox.Trigger\n          className={cn(\n            'w-full',\n            isMissing && 'border-destructive/60 bg-destructive/5',\n          )}\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          ) : value ? (\n            <span className=\"flex min-w-0 items-baseline gap-1\">\n              <span className=\"text-destructive truncate text-xs\">{value}</span>\n              <span className=\"text-destructive/60 hidden text-[8px] @[180px]:inline\">\n                missing\n              </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 }));

package/dist/components/MultiFieldSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFieldSelector.js","sourceRoot":"","sources":["../../src/components/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 '../schemas';\nimport {ColumnsProvider, useColumnsContext} from './ColumnsContext';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from '../column-types-utils';\nimport type {YFieldConfig} from '../charts/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} = 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}>\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"]}
+{"version":3,"file":"MultiFieldSelector.js","sourceRoot":"","sources":["../../src/components/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 {ColumnsProvider, useColumnsContext} from './ColumnsContext';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  CATEGORICAL_COLUMN_TYPES,\n} from '../column-types-utils';\nimport type {YFieldConfig} from '../charts/chart-types/line-chart/schema';\n\ntype RenderItemFunction = (\n  fieldConfig: YFieldConfig,\n  index: number,\n  handleUpdate: (index: number, updates: Partial<YFieldConfig>) => void,\n) => React.ReactNode;\n\nexport interface MultiFieldSelectorProps {\n  types?: string[];\n  value: YFieldConfig[];\n  onChange: (value: YFieldConfig[]) => void;\n  onAdd: (fieldName: string) => void;\n  renderItem?: RenderItemFunction;\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  onAdd,\n  renderItem,\n}) => {\n  const {columns} = 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  return (\n    <div className=\"space-y-1\">\n      {value.map((fieldConfig, index) => {\n        return (\n          <div\n            key={fieldConfig.field}\n            className=\"grid items-end gap-2\"\n            style={{\n              gridTemplateColumns: 'minmax(120px, 1fr) auto 32px',\n            }}\n          >\n            <ColumnSelector\n              types={types}\n              value={fieldConfig.field}\n              onChange={(newField) => handleUpdate(index, {field: newField})}\n            />\n\n            {renderItem && renderItem(fieldConfig, index, handleUpdate)}\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}>\n        <ColumnSelector\n          types={types}\n          value={undefined}\n          onChange={onAdd}\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/components/TemporalGranularitySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemporalGranularitySelector.d.ts","sourceRoot":"","sources":["../../src/components/TemporalGranularitySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAO,MAAM,OAAO,CAAC;AASpC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAEjD,UAAU,gCAAgC;IACxC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsBD,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,gCAAgC,CAoCzE,CAAC"}
+{"version":3,"file":"TemporalGranularitySelector.d.ts","sourceRoot":"","sources":["../../src/components/TemporalGranularitySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAoB,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAEjD,UAAU,gCAAgC;IACxC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsBD,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,gCAAgC,CAkDzE,CAAC"}

package/dist/components/TemporalGranularitySelector.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { memo, useCallback } from 'react';
+import { Combobox } from '@sqlrooms/ui';
 import { TEMPORAL_COLUMN_TYPES } from '../column-types-utils';
 const TEMPORAL_INTERVALS = [
     { value: 'year', label: 'Year' },
@@ -19,19 +19,23 @@ function isTemporalField(fieldType) {
     return TEMPORAL_COLUMN_TYPES.some((type) => fieldType.toUpperCase() === type.toUpperCase());
 }
 export const TemporalGranularitySelector = memo(({ value, onChange, xFieldType }) => {
-    // Only render if X field is temporal
-    if (!isTemporalField(xFieldType)) {
-        return null;
-    }
-    const handleValueChange = (newValue) => {
+    // Custom onChange wrapper to handle undefined values
+    const handleChange = useCallback((newValue) => {
         if (newValue === NONE) {
             onChange(undefined);
         }
         else {
             onChange(newValue);
         }
-    };
-    return (_jsxs(Select, { value: value || NONE, onValueChange: handleValueChange, children: [_jsx(SelectTrigger, { className: "h-8 text-xs shadow-none", children: _jsx(SelectValue, { placeholder: "None" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE, className: "text-xs", children: "None" }), TEMPORAL_INTERVALS.map((interval) => (_jsx(SelectItem, { value: interval.value, className: "text-xs", children: interval.label }, interval.value)))] })] }));
+    }, [onChange]);
+    // Only render if X field is temporal
+    if (!isTemporalField(xFieldType)) {
+        return null;
+    }
+    const selectedInterval = TEMPORAL_INTERVALS.find((interval) => interval.value === value);
+    const displayValue = selectedInterval?.label ?? 'None';
+    const currentValue = value || NONE;
+    return (_jsxs(Combobox, { value: currentValue, onChange: handleChange, currentValue: currentValue, children: [_jsx(Combobox.Trigger, { className: "shadow-none", children: _jsx("span", { children: displayValue }) }), _jsxs(Combobox.Content, { children: [_jsx(Combobox.Item, { value: NONE, children: _jsx("span", { className: "text-xs", children: "None" }) }), TEMPORAL_INTERVALS.map((interval) => (_jsx(Combobox.Item, { value: interval.value, isSelected: value === interval.value, children: _jsx("span", { className: "text-xs", children: interval.label }) }, interval.value)))] })] }));
 });
 TemporalGranularitySelector.displayName = 'TemporalGranularitySelector';
 //# sourceMappingURL=TemporalGranularitySelector.js.map

package/dist/components/TemporalGranularitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemporalGranularitySelector.js","sourceRoot":"","sources":["../../src/components/TemporalGranularitySelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AAS5D,MAAM,kBAAkB,GAAG;IACzB,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC;IAC9B,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC;IACpC,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;IAChC,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC;IAC9B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC;IAC9B,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;IAClC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;CAC1B,CAAC;AAEX,MAAM,IAAI,GAAG,MAAM,CAAC;AAEpB,SAAS,eAAe,CAAC,SAAkB;IACzC,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAC;IAC7B,OAAO,qBAAqB,CAAC,IAAI,CAC/B,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,CACzD,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,2BAA2B,GACtC,IAAI,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC,EAAE,EAAE;IACrC,qCAAqC;IACrC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,iBAAiB,GAAG,CAAC,QAAwC,EAAE,EAAE;QACrE,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,aAAa,EAAE,iBAAiB,aAC5D,KAAC,aAAa,IAAC,SAAS,EAAC,yBAAyB,YAChD,KAAC,WAAW,IAAC,WAAW,EAAC,MAAM,GAAG,GACpB,EAChB,MAAC,aAAa,eACZ,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAC,SAAS,qBAE/B,EACZ,kBAAkB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAET,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,SAAS,EAAC,SAAS,YAElB,QAAQ,CAAC,KAAK,IAJV,QAAQ,CAAC,KAAK,CAKR,CACd,CAAC,IACY,IACT,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,2BAA2B,CAAC,WAAW,GAAG,6BAA6B,CAAC","sourcesContent":["import {type FC, memo} from 'react';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport {TEMPORAL_COLUMN_TYPES} from '../column-types-utils';\nimport type {TemporalInterval} from '../schemas';\n\ninterface TemporalGranularitySelectorProps {\n  value?: TemporalInterval;\n  onChange: (value?: TemporalInterval) => void;\n  xFieldType?: string;\n}\n\nconst TEMPORAL_INTERVALS = [\n  {value: 'year', label: 'Year'},\n  {value: 'quarter', label: 'Quarter'},\n  {value: 'month', label: 'Month'},\n  {value: 'week', label: 'Week'},\n  {value: 'day', label: 'Day'},\n  {value: 'hour', label: 'Hour'},\n  {value: 'minute', label: 'Minute'},\n  {value: 'second', label: 'Second'},\n] as const;\n\nconst NONE = 'none';\n\nfunction isTemporalField(fieldType?: string): boolean {\n  if (!fieldType) return false;\n  return TEMPORAL_COLUMN_TYPES.some(\n    (type) => fieldType.toUpperCase() === type.toUpperCase(),\n  );\n}\n\nexport const TemporalGranularitySelector: FC<TemporalGranularitySelectorProps> =\n  memo(({value, onChange, xFieldType}) => {\n    // Only render if X field is temporal\n    if (!isTemporalField(xFieldType)) {\n      return null;\n    }\n\n    const handleValueChange = (newValue: TemporalInterval | typeof NONE) => {\n      if (newValue === NONE) {\n        onChange(undefined);\n      } else {\n        onChange(newValue);\n      }\n    };\n\n    return (\n      <Select value={value || NONE} onValueChange={handleValueChange}>\n        <SelectTrigger className=\"h-8 text-xs shadow-none\">\n          <SelectValue placeholder=\"None\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value={NONE} className=\"text-xs\">\n            None\n          </SelectItem>\n          {TEMPORAL_INTERVALS.map((interval) => (\n            <SelectItem\n              key={interval.value}\n              value={interval.value}\n              className=\"text-xs\"\n            >\n              {interval.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    );\n  });\n\nTemporalGranularitySelector.displayName = 'TemporalGranularitySelector';\n"]}
+{"version":3,"file":"TemporalGranularitySelector.js","sourceRoot":"","sources":["../../src/components/TemporalGranularitySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {type FC, memo, useCallback} from 'react';\nimport {Combobox} from '@sqlrooms/ui';\nimport {TEMPORAL_COLUMN_TYPES} from '../column-types-utils';\nimport type {TemporalInterval} from '../schemas';\n\ninterface TemporalGranularitySelectorProps {\n  value?: TemporalInterval;\n  onChange: (value?: TemporalInterval) => void;\n  xFieldType?: string;\n}\n\nconst TEMPORAL_INTERVALS = [\n  {value: 'year', label: 'Year'},\n  {value: 'quarter', label: 'Quarter'},\n  {value: 'month', label: 'Month'},\n  {value: 'week', label: 'Week'},\n  {value: 'day', label: 'Day'},\n  {value: 'hour', label: 'Hour'},\n  {value: 'minute', label: 'Minute'},\n  {value: 'second', label: 'Second'},\n] as const;\n\nconst NONE = 'none';\n\nfunction isTemporalField(fieldType?: string): boolean {\n  if (!fieldType) return false;\n  return TEMPORAL_COLUMN_TYPES.some(\n    (type) => fieldType.toUpperCase() === type.toUpperCase(),\n  );\n}\n\nexport const TemporalGranularitySelector: FC<TemporalGranularitySelectorProps> =\n  memo(({value, onChange, xFieldType}) => {\n    // Custom onChange wrapper to handle undefined values\n    const handleChange = useCallback(\n      (newValue: string) => {\n        if (newValue === NONE) {\n          onChange(undefined);\n        } else {\n          onChange(newValue as TemporalInterval);\n        }\n      },\n      [onChange],\n    );\n\n    // Only render if X field is temporal\n    if (!isTemporalField(xFieldType)) {\n      return null;\n    }\n\n    const selectedInterval = TEMPORAL_INTERVALS.find(\n      (interval) => interval.value === value,\n    );\n    const displayValue = selectedInterval?.label ?? 'None';\n    const currentValue = value || NONE;\n\n    return (\n      <Combobox\n        value={currentValue}\n        onChange={handleChange}\n        currentValue={currentValue}\n      >\n        <Combobox.Trigger className=\"shadow-none\">\n          <span>{displayValue}</span>\n        </Combobox.Trigger>\n        <Combobox.Content>\n          <Combobox.Item value={NONE}>\n            <span className=\"text-xs\">None</span>\n          </Combobox.Item>\n          {TEMPORAL_INTERVALS.map((interval) => (\n            <Combobox.Item\n              key={interval.value}\n              value={interval.value}\n              isSelected={value === interval.value}\n            >\n              <span className=\"text-xs\">{interval.label}</span>\n            </Combobox.Item>\n          ))}\n        </Combobox.Content>\n      </Combobox>\n    );\n  });\n\nTemporalGranularitySelector.displayName = 'TemporalGranularitySelector';\n"]}

package/dist/constants/chart-colors.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_CHART_COLORS: readonly string[];
+export declare const DEFAULT_CHART_FALLBACK_COLOR: string;
+//# sourceMappingURL=chart-colors.d.ts.map

package/dist/constants/chart-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-colors.d.ts","sourceRoot":"","sources":["../../src/constants/chart-colors.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,mBAAuC,CAAC;AACzE,eAAO,MAAM,4BAA4B,QAA2B,CAAC"}

package/dist/constants/chart-colors.js

@@ -0,0 +1,5 @@
+import { categoricalSchemeColors } from '@sqlrooms/color-scales';
+// Chart color palette (default palette colors)
+export const DEFAULT_CHART_COLORS = categoricalSchemeColors.Observable10;
+export const DEFAULT_CHART_FALLBACK_COLOR = DEFAULT_CHART_COLORS[0];
+//# sourceMappingURL=chart-colors.js.map

package/dist/constants/chart-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-colors.js","sourceRoot":"","sources":["../../src/constants/chart-colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,uBAAuB,EAAC,MAAM,wBAAwB,CAAC;AAE/D,+CAA+C;AAC/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,YAAY,CAAC;AACzE,MAAM,CAAC,MAAM,4BAA4B,GAAG,oBAAoB,CAAC,CAAC,CAAE,CAAC","sourcesContent":["import {categoricalSchemeColors} from '@sqlrooms/color-scales';\n\n// Chart color palette (default palette colors)\nexport const DEFAULT_CHART_COLORS = categoricalSchemeColors.Observable10;\nexport const DEFAULT_CHART_FALLBACK_COLOR = DEFAULT_CHART_COLORS[0]!;\n"]}

package/dist/dashboard/DefaultMosaicDashboardBlock.d.ts

@@ -1,4 +1,5 @@
 import type { StatefulBlockRenderProps } from '@sqlrooms/blocks';
 import type { MosaicDashboardSliceState } from './MosaicDashboardSlice';
-export declare const DefaultMosaicDashboardBlock: ({ blockId, }: StatefulBlockRenderProps<MosaicDashboardSliceState>) => import("react/jsx-runtime").JSX.Element;
+import { FC } from 'react';
+export declare const DefaultMosaicDashboardBlock: FC<StatefulBlockRenderProps<MosaicDashboardSliceState>>;
 //# sourceMappingURL=DefaultMosaicDashboardBlock.d.ts.map

package/dist/dashboard/DefaultMosaicDashboardBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMosaicDashboardBlock.d.ts","sourceRoot":"","sources":["../../src/dashboard/DefaultMosaicDashboardBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAEtE,eAAO,MAAM,2BAA2B,GAAI,cAEzC,wBAAwB,CAAC,yBAAyB,CAAC,4CAErD,CAAC"}
+{"version":3,"file":"DefaultMosaicDashboardBlock.d.ts","sourceRoot":"","sources":["../../src/dashboard/DefaultMosaicDashboardBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAC1C,wBAAwB,CAAC,yBAAyB,CAAC,CAGpD,CAAC"}

package/dist/dashboard/DefaultMosaicDashboardBlock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MosaicDashboard } from './MosaicDashboard';
-export const DefaultMosaicDashboardBlock = ({ blockId, }) => {
+export const DefaultMosaicDashboardBlock = ({ blockId }) => {
     return _jsx(MosaicDashboard, { dashboardId: blockId });
 };
 //# sourceMappingURL=DefaultMosaicDashboardBlock.js.map

package/dist/dashboard/DefaultMosaicDashboardBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMosaicDashboardBlock.js","sourceRoot":"","sources":["../../src/dashboard/DefaultMosaicDashboardBlock.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAGlD,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,OAAO,GAC6C,EAAE,EAAE;IACxD,OAAO,KAAC,eAAe,IAAC,WAAW,EAAE,OAAO,GAAI,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import type {StatefulBlockRenderProps} from '@sqlrooms/blocks';\nimport {MosaicDashboard} from './MosaicDashboard';\nimport type {MosaicDashboardSliceState} from './MosaicDashboardSlice';\n\nexport const DefaultMosaicDashboardBlock = ({\n  blockId,\n}: StatefulBlockRenderProps<MosaicDashboardSliceState>) => {\n  return <MosaicDashboard dashboardId={blockId} />;\n};\n"]}
+{"version":3,"file":"DefaultMosaicDashboardBlock.js","sourceRoot":"","sources":["../../src/dashboard/DefaultMosaicDashboardBlock.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAIlD,MAAM,CAAC,MAAM,2BAA2B,GAEpC,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE;IAChB,OAAO,KAAC,eAAe,IAAC,WAAW,EAAE,OAAO,GAAI,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import type {StatefulBlockRenderProps} from '@sqlrooms/blocks';\nimport {MosaicDashboard} from './MosaicDashboard';\nimport type {MosaicDashboardSliceState} from './MosaicDashboardSlice';\nimport {FC} from 'react';\n\nexport const DefaultMosaicDashboardBlock: FC<\n  StatefulBlockRenderProps<MosaicDashboardSliceState>\n> = ({blockId}) => {\n  return <MosaicDashboard dashboardId={blockId} />;\n};\n"]}

package/dist/dashboard/MosaicDashboardCommands.d.ts

@@ -0,0 +1,19 @@
+import type { BaseRoomStoreState, RoomCommand } from '@sqlrooms/room-store';
+import type { MosaicDashboardSliceState } from './MosaicDashboardSlice';
+export declare const MOSAIC_DASHBOARD_COMMAND_IDS: {
+    readonly setSelectedTable: "dashboard.set-selected-table";
+    readonly addPanel: "dashboard.add-panel";
+    readonly updatePanel: "dashboard.update-panel";
+    readonly removePanel: "dashboard.remove-panel";
+};
+type DashboardCommandState = BaseRoomStoreState & MosaicDashboardSliceState;
+/**
+ * Create reusable Mosaic dashboard commands for selected table and panel
+ * mutations.
+ *
+ * These commands delegate to the dashboard slice so UI code, agents, and
+ * future automation share the same persistence behavior.
+ */
+export declare function createMosaicDashboardCommands<TRoomState extends DashboardCommandState = DashboardCommandState>(): RoomCommand<TRoomState>[];
+export {};
+//# sourceMappingURL=MosaicDashboardCommands.d.ts.map

package/dist/dashboard/MosaicDashboardCommands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardCommands.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,sBAAsB,CAAC;AAc1E,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAEtE,eAAO,MAAM,4BAA4B;;;;;CAK/B,CAAC;AA8BX,KAAK,qBAAqB,GAAG,kBAAkB,GAAG,yBAAyB,CAAC;AAyC5E;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,SAAS,qBAAqB,GAAG,qBAAqB,KAC7D,WAAW,CAAC,UAAU,CAAC,EAAE,CAyK7B"}