@sqlrooms/mosaic 0.29.0-rc.2 → 0.29.0-rc.3

package/dist/chart-builders/ChartBuilderContent.js

@@ -1,59 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn } from '@sqlrooms/ui';
-import { useCallback, useMemo, useState } from 'react';
-import { createDefaultChartBuilders } from './builders';
-import { FieldSelectorInput } from './FieldSelectorInput';
+import { cn } from '@sqlrooms/ui';
+import { ChartBuilderActions } from './ChartBuilderActions';
+import { useChartBuilderContext } from './ChartBuilderContext';
+import { ChartBuilderFields } from './ChartBuilderFields';
+import { ChartBuilderRoot } from './ChartBuilderRoot';
+import { ChartBuilderTypeGrid } from './ChartBuilderTypeGrid';
+function isStandaloneProps(props) {
+    return Boolean(props.tableName && props.columns && props.onCreateChart);
+}
+function ChartBuilderContentBody({ className }) {
+    useChartBuilderContext();
+    return (_jsxs("div", { className: cn('flex flex-col gap-2', className), children: [_jsx(ChartBuilderTypeGrid, {}), _jsx(ChartBuilderFields, {}), _jsx(ChartBuilderActions, {})] }));
+}
 /**
  * Standalone chart builder UI for creating Mosaic charts from templates.
  *
- * Step 1: Select a chart type from the grid
- * Step 2: Fill in field selectors
- * Step 3: Confirm to generate spec
- *
- * Can be used directly without a dialog wrapper.
+ * Can be used directly with props, or inside `<MosaicChartBuilder>` where it
+ * consumes the surrounding builder context.
  */
-export const ChartBuilderContent = ({ tableName, columns, onCreateChart, builders, className, }) => {
-    const resolvedBuilders = useMemo(() => builders ?? createDefaultChartBuilders(), [builders]);
-    const [selectedBuilder, setSelectedBuilder] = useState(null);
-    const [fieldValues, setFieldValues] = useState({});
-    const handleReset = useCallback(() => {
-        setSelectedBuilder(null);
-        setFieldValues({});
-    }, []);
-    const handleSelectBuilder = useCallback((builder) => {
-        setSelectedBuilder(builder);
-        setFieldValues({});
-    }, []);
-    const handleFieldChange = useCallback((key, value) => {
-        setFieldValues((prev) => ({ ...prev, [key]: value }));
-    }, []);
-    const canCreate = useMemo(() => {
-        if (!selectedBuilder)
-            return false;
-        return selectedBuilder.fields
-            .filter((f) => f.required ?? true)
-            .every((f) => fieldValues[f.key]);
-    }, [selectedBuilder, fieldValues]);
-    const handleCreate = useCallback(() => {
-        if (!selectedBuilder || !canCreate)
-            return;
-        const spec = selectedBuilder.createSpec(tableName, fieldValues);
-        const title = selectedBuilder.fields.length > 0
-            ? `${selectedBuilder.description.replace(/^Create (a |an )?/, '')} - ${Object.values(fieldValues).join(', ')}`
-            : selectedBuilder.description.replace(/^Create (a |an )?/, '');
-        onCreateChart(spec, title);
-        handleReset();
-    }, [
-        selectedBuilder,
-        canCreate,
-        tableName,
-        fieldValues,
-        onCreateChart,
-        handleReset,
-    ]);
-    return (_jsxs("div", { className: cn('flex flex-col gap-2', className), children: [!selectedBuilder ? (_jsx("div", { className: "grid grid-cols-2 gap-2 py-2", children: resolvedBuilders.map((builder) => {
-                    const Icon = builder.icon;
-                    return (_jsxs("button", { className: cn('flex items-center gap-3 rounded-md border p-3 text-left transition-colors', 'hover:bg-accent hover:text-accent-foreground'), onClick: () => handleSelectBuilder(builder), children: [_jsx(Icon, { className: "h-5 w-5 shrink-0 opacity-70" }), _jsx("span", { className: "text-sm", children: builder.description })] }, builder.id));
-                }) })) : (_jsx("div", { className: "flex flex-col gap-4 py-2", children: selectedBuilder.fields.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "This chart type has no configurable fields. A template spec will be created that you can edit manually." })) : (selectedBuilder.fields.map((field) => (_jsx(FieldSelectorInput, { field: field, columns: columns, value: fieldValues[field.key], onChange: (v) => handleFieldChange(field.key, v) }, field.key)))) })), selectedBuilder && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleReset, children: "Back" }), _jsx(Button, { size: "sm", onClick: handleCreate, disabled: !canCreate, children: "Create" })] }))] }));
+export const ChartBuilderContent = (props) => {
+    if (isStandaloneProps(props)) {
+        const { className, ...rootProps } = props;
+        return (_jsx(ChartBuilderRoot, { ...rootProps, children: _jsx(ChartBuilderContentBody, { className: className }) }));
+    }
+    return _jsx(ChartBuilderContentBody, { className: props.className });
 };
 //# sourceMappingURL=ChartBuilderContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderContent.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport React, {useCallback, useMemo, useState} from 'react';\nimport {createDefaultChartBuilders} from './builders';\nimport {FieldSelectorInput} from './FieldSelectorInput';\nimport {ChartBuilderColumn, ChartBuilderTemplate} from './types';\n\nexport interface ChartBuilderContentProps {\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (spec: Spec, title: string) => void;\n  /** Custom builders (defaults to all built-in builders) */\n  builders?: ChartBuilderTemplate[];\n  /** Custom class name */\n  className?: string;\n}\n\n/**\n * Standalone chart builder UI for creating Mosaic charts from templates.\n *\n * Step 1: Select a chart type from the grid\n * Step 2: Fill in field selectors\n * Step 3: Confirm to generate spec\n *\n * Can be used directly without a dialog wrapper.\n */\nexport const ChartBuilderContent: React.FC<ChartBuilderContentProps> = ({\n  tableName,\n  columns,\n  onCreateChart,\n  builders,\n  className,\n}) => {\n  const resolvedBuilders = useMemo(\n    () => builders ?? createDefaultChartBuilders(),\n    [builders],\n  );\n  const [selectedBuilder, setSelectedBuilder] =\n    useState<ChartBuilderTemplate | null>(null);\n  const [fieldValues, setFieldValues] = useState<Record<string, string>>({});\n\n  const handleReset = useCallback(() => {\n    setSelectedBuilder(null);\n    setFieldValues({});\n  }, []);\n\n  const handleSelectBuilder = useCallback((builder: ChartBuilderTemplate) => {\n    setSelectedBuilder(builder);\n    setFieldValues({});\n  }, []);\n\n  const handleFieldChange = useCallback((key: string, value: string) => {\n    setFieldValues((prev) => ({...prev, [key]: value}));\n  }, []);\n\n  const canCreate = useMemo(() => {\n    if (!selectedBuilder) return false;\n    return selectedBuilder.fields\n      .filter((f) => f.required ?? true)\n      .every((f) => fieldValues[f.key]);\n  }, [selectedBuilder, fieldValues]);\n\n  const handleCreate = useCallback(() => {\n    if (!selectedBuilder || !canCreate) return;\n    const spec = selectedBuilder.createSpec(tableName, fieldValues);\n    const title =\n      selectedBuilder.fields.length > 0\n        ? `${selectedBuilder.description.replace(/^Create (a |an )?/, '')} - ${Object.values(fieldValues).join(', ')}`\n        : selectedBuilder.description.replace(/^Create (a |an )?/, '');\n    onCreateChart(spec, title);\n    handleReset();\n  }, [\n    selectedBuilder,\n    canCreate,\n    tableName,\n    fieldValues,\n    onCreateChart,\n    handleReset,\n  ]);\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {!selectedBuilder ? (\n        <div className=\"grid grid-cols-2 gap-2 py-2\">\n          {resolvedBuilders.map((builder) => {\n            const Icon = builder.icon;\n            return (\n              <button\n                key={builder.id}\n                className={cn(\n                  'flex items-center gap-3 rounded-md border p-3 text-left transition-colors',\n                  'hover:bg-accent hover:text-accent-foreground',\n                )}\n                onClick={() => handleSelectBuilder(builder)}\n              >\n                <Icon className=\"h-5 w-5 shrink-0 opacity-70\" />\n                <span className=\"text-sm\">{builder.description}</span>\n              </button>\n            );\n          })}\n        </div>\n      ) : (\n        <div className=\"flex flex-col gap-4 py-2\">\n          {selectedBuilder.fields.length === 0 ? (\n            <p className=\"text-muted-foreground text-sm\">\n              This chart type has no configurable fields. A template spec will\n              be created that you can edit manually.\n            </p>\n          ) : (\n            selectedBuilder.fields.map((field) => (\n              <FieldSelectorInput\n                key={field.key}\n                field={field}\n                columns={columns}\n                value={fieldValues[field.key]}\n                onChange={(v) => handleFieldChange(field.key, v)}\n              />\n            ))\n          )}\n        </div>\n      )}\n\n      {selectedBuilder && (\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" size=\"sm\" onClick={handleReset}>\n            Back\n          </Button>\n          <Button size=\"sm\" onClick={handleCreate} disabled={!canCreate}>\n            Create\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ChartBuilderContent.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,gBAAgB,EAA6B,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AA2B5D,SAAS,iBAAiB,CACxB,KAA+B;IAE/B,OAAO,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;AAC1E,CAAC;AAED,SAAS,uBAAuB,CAAC,EAAC,SAAS,EAAuB;IAChE,sBAAsB,EAAE,CAAC;IAEzB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAClD,KAAC,oBAAoB,KAAG,EACxB,KAAC,kBAAkB,KAAG,EACtB,KAAC,mBAAmB,KAAG,IACnB,CACP,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7B,MAAM,EAAC,SAAS,EAAE,GAAG,SAAS,EAAC,GAAG,KAAK,CAAC;QACxC,OAAO,CACL,KAAC,gBAAgB,OAAK,SAAS,YAC7B,KAAC,uBAAuB,IAAC,SAAS,EAAE,SAAS,GAAI,GAChC,CACpB,CAAC;IACJ,CAAC;IAED,OAAO,KAAC,uBAAuB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AACjE,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {ChartBuilderActions} from './ChartBuilderActions';\nimport {useChartBuilderContext} from './ChartBuilderContext';\nimport {ChartBuilderFields} from './ChartBuilderFields';\nimport {ChartBuilderRoot, type ChartBuilderRootProps} from './ChartBuilderRoot';\nimport {ChartBuilderTypeGrid} from './ChartBuilderTypeGrid';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\ntype StandaloneChartBuilderContentProps = {\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  /** Preferred shared chart-type customization surface */\n  chartTypes?: ChartTypeDefinition[];\n  /** Backward-compatible UI template customization surface */\n  builders?: ChartBuilderTemplate[];\n  /** Custom class name */\n  className?: string;\n};\n\nexport type ChartBuilderContentProps = Partial<\n  Omit<ChartBuilderRootProps, 'children'>\n> &\n  Pick<StandaloneChartBuilderContentProps, 'className'>;\n\nfunction isStandaloneProps(\n  props: ChartBuilderContentProps,\n): props is StandaloneChartBuilderContentProps {\n  return Boolean(props.tableName && props.columns && props.onCreateChart);\n}\n\nfunction ChartBuilderContentBody({className}: {className?: string}) {\n  useChartBuilderContext();\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <ChartBuilderTypeGrid />\n      <ChartBuilderFields />\n      <ChartBuilderActions />\n    </div>\n  );\n}\n\n/**\n * Standalone chart builder UI for creating Mosaic charts from templates.\n *\n * Can be used directly with props, or inside `<MosaicChartBuilder>` where it\n * consumes the surrounding builder context.\n */\nexport const ChartBuilderContent: React.FC<ChartBuilderContentProps> = (\n  props,\n) => {\n  if (isStandaloneProps(props)) {\n    const {className, ...rootProps} = props;\n    return (\n      <ChartBuilderRoot {...rootProps}>\n        <ChartBuilderContentBody className={className} />\n      </ChartBuilderRoot>\n    );\n  }\n\n  return <ChartBuilderContentBody className={props.className} />;\n};\n"]}

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

@@ -1,11 +1,16 @@
-import type { Spec } from '@uwdata/mosaic-spec';
-import type { ChartBuilderColumn, ChartBuilderTemplate } from './types';
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderStore, ChartBuilderStoreState } from './createChartBuilderStore';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
 export type ChartBuilderContextValue = {
     tableName: string;
     columns: ChartBuilderColumn[];
-    onCreateChart: (spec: Spec, title: string) => void;
-    builders?: ChartBuilderTemplate[];
+    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
+    templates: ChartBuilderTemplate[];
+    availableChartTypes: ChartTypeDefinition[];
+    availableTemplates: ChartBuilderTemplate[];
+    store: ChartBuilderStore;
 };
 export declare const ChartBuilderContext: import("react").Context<ChartBuilderContextValue | null>;
 export declare function useChartBuilderContext(): ChartBuilderContextValue;
+export declare function useChartBuilderStore<T>(selector: (state: ChartBuilderStoreState) => T): T;
 //# sourceMappingURL=ChartBuilderContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderContext.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAEvD,wBAAgB,sBAAsB,IAAI,wBAAwB,CAQjE"}
+{"version":3,"file":"ChartBuilderContext.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;IAC3C,kBAAkB,EAAE,oBAAoB,EAAE,CAAC;IAC3C,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAEvD,wBAAgB,sBAAsB,IAAI,wBAAwB,CAQjE;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,CAAC,GAC7C,CAAC,CAGH"}

package/dist/chart-builders/ChartBuilderContext.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { useStore } from 'zustand';
 export const ChartBuilderContext = createContext(null);
 export function useChartBuilderContext() {
     const ctx = useContext(ChartBuilderContext);
@@ -7,4 +8,8 @@ export function useChartBuilderContext() {
     }
     return ctx;
 }
+export function useChartBuilderStore(selector) {
+    const { store } = useChartBuilderContext();
+    return useStore(store, selector);
+}
 //# sourceMappingURL=ChartBuilderContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderContext.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAWhD,MAAM,CAAC,MAAM,mBAAmB,GAC9B,aAAa,CAAkC,IAAI,CAAC,CAAC;AAEvD,MAAM,UAAU,sBAAsB;IACpC,MAAM,GAAG,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gFAAgF,CACjF,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport type {ChartBuilderColumn, ChartBuilderTemplate} from './types';\n\nexport type ChartBuilderContextValue = {\n  tableName: string;\n  columns: ChartBuilderColumn[];\n  onCreateChart: (spec: Spec, title: string) => void;\n  builders?: ChartBuilderTemplate[];\n};\n\nexport const ChartBuilderContext =\n  createContext<ChartBuilderContextValue | null>(null);\n\nexport function useChartBuilderContext(): ChartBuilderContextValue {\n  const ctx = useContext(ChartBuilderContext);\n  if (!ctx) {\n    throw new Error(\n      'ChartBuilder compound components must be rendered inside <MosaicChartBuilder>.',\n    );\n  }\n  return ctx;\n}\n"]}
+{"version":3,"file":"ChartBuilderContext.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAsBjC,MAAM,CAAC,MAAM,mBAAmB,GAC9B,aAAa,CAAkC,IAAI,CAAC,CAAC;AAEvD,MAAM,UAAU,sBAAsB;IACpC,MAAM,GAAG,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gFAAgF,CACjF,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,QAA8C;IAE9C,MAAM,EAAC,KAAK,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACzC,OAAO,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AACnC,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\nimport {useStore} from 'zustand';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport type {\n  ChartBuilderStore,\n  ChartBuilderStoreState,\n} from './createChartBuilderStore';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\nexport type ChartBuilderContextValue = {\n  tableName: string;\n  columns: ChartBuilderColumn[];\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  templates: ChartBuilderTemplate[];\n  availableChartTypes: ChartTypeDefinition[];\n  availableTemplates: ChartBuilderTemplate[];\n  store: ChartBuilderStore;\n};\n\nexport const ChartBuilderContext =\n  createContext<ChartBuilderContextValue | null>(null);\n\nexport function useChartBuilderContext(): ChartBuilderContextValue {\n  const ctx = useContext(ChartBuilderContext);\n  if (!ctx) {\n    throw new Error(\n      'ChartBuilder compound components must be rendered inside <MosaicChartBuilder>.',\n    );\n  }\n  return ctx;\n}\n\nexport function useChartBuilderStore<T>(\n  selector: (state: ChartBuilderStoreState) => T,\n): T {\n  const {store} = useChartBuilderContext();\n  return useStore(store, selector);\n}\n"]}

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

@@ -1,6 +1,22 @@
-import type { Spec } from '@uwdata/mosaic-spec';
+import { type ButtonProps } from '@sqlrooms/ui';
 import React from 'react';
-import { ChartBuilderColumn, ChartBuilderTemplate } from './types';
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+export type ChartBuilderTriggerProps = ButtonProps;
+export declare const ChartBuilderTrigger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChartBuilderDialogContentProps {
+    /** Override dialog title (default "Add Chart") */
+    title?: string;
+    /** Override dialog description */
+    description?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The dialog content pane that renders the chart-builder steps.
+ * Must be rendered inside `<MosaicChartBuilder>`.
+ */
+export declare const ChartBuilderDialogContent: React.FC<ChartBuilderDialogContentProps>;
 export interface ChartBuilderDialogProps {
     /** Whether the dialog is open */
     open: boolean;
@@ -11,13 +27,22 @@ export interface ChartBuilderDialogProps {
     /** Available columns for field selectors */
     columns: ChartBuilderColumn[];
     /** Callback when a chart spec is created */
-    onCreateChart: (spec: Spec, title: string) => void;
-    /** Custom builders (defaults to all built-in builders) */
+    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
+    /** Preferred shared chart-type customization surface */
+    chartTypes?: ChartTypeDefinition[];
+    /** Backward-compatible UI template customization surface */
     builders?: ChartBuilderTemplate[];
 }
 /**
- * Dialog wrapper for the chart builder.
- * For a non-dialog version, use MosaicChartBuilder.Content directly.
+ * Dialog wrapper for the chart builder (legacy API).
+ *
+ * @deprecated Prefer the compound form:
+ * ```tsx
+ * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>
+ *   <MosaicChartBuilder.Trigger />
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
  */
 export declare const ChartBuilderDialog: React.FC<ChartBuilderDialogProps>;
 //# sourceMappingURL=ChartBuilderDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderDialog.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,8CAA8C;IAC9C,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6BhE,CAAC"}
+{"version":3,"file":"ChartBuilderDialog.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAGtD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,uFAgB9B,CAAC;AAGH,MAAM,WAAW,8BAA8B;IAC7C,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,8BAA8B,CAgB/B,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,8CAA8C;IAC9C,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoBhE,CAAC"}

package/dist/chart-builders/ChartBuilderDialog.js

@@ -1,15 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@sqlrooms/ui';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@sqlrooms/ui';
+import { Plus } from 'lucide-react';
+import React from 'react';
 import { ChartBuilderContent } from './ChartBuilderContent';
+import { ChartBuilderRoot } from './ChartBuilderRoot';
+export const ChartBuilderTrigger = React.forwardRef(({ children, ...props }, ref) => {
+    return (_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "outline", size: "sm", ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Chart"] })) }) }));
+});
+ChartBuilderTrigger.displayName = 'ChartBuilderTrigger';
 /**
- * Dialog wrapper for the chart builder.
- * For a non-dialog version, use MosaicChartBuilder.Content directly.
+ * The dialog content pane that renders the chart-builder steps.
+ * Must be rendered inside `<MosaicChartBuilder>`.
  */
-export const ChartBuilderDialog = ({ open, onOpenChange, tableName, columns, onCreateChart, builders, }) => {
-    const handleCreateChart = (spec, title) => {
-        onCreateChart(spec, title);
-        onOpenChange(false);
-    };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Chart" }), _jsx(DialogDescription, { children: "Select a chart type to create." })] }), _jsx(ChartBuilderContent, { tableName: tableName, columns: columns, onCreateChart: handleCreateChart, builders: builders })] }) }));
+export const ChartBuilderDialogContent = ({ title = 'Add Chart', description = 'Select a chart type to create.', className, children, }) => {
+    return (_jsxs(DialogContent, { className: className ?? 'sm:max-w-lg', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), children ?? _jsx(ChartBuilderContent, {})] }));
 };
+/**
+ * Dialog wrapper for the chart builder (legacy API).
+ *
+ * @deprecated Prefer the compound form:
+ * ```tsx
+ * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>
+ *   <MosaicChartBuilder.Trigger />
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
+ */
+export const ChartBuilderDialog = ({ open, onOpenChange, tableName, columns, onCreateChart, chartTypes, builders, }) => (_jsx(ChartBuilderRoot, { open: open, onOpenChange: onOpenChange, tableName: tableName, columns: columns, onCreateChart: onCreateChart, chartTypes: chartTypes, builders: builders, children: _jsx(ChartBuilderDialogContent, {}) }));
 //# sourceMappingURL=ChartBuilderDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderDialog.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAkB1D;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAE,KAAa,EAAE,EAAE;QACtD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,YAC5C,MAAC,aAAa,IAAC,SAAS,EAAC,aAAa,aACpC,MAAC,YAAY,eACX,KAAC,WAAW,4BAAwB,EACpC,KAAC,iBAAiB,iDAAmD,IACxD,EACf,KAAC,mBAAmB,IAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,iBAAiB,EAChC,QAAQ,EAAE,QAAQ,GAClB,IACY,GACT,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@sqlrooms/ui';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport React from 'react';\nimport {ChartBuilderContent} from './ChartBuilderContent';\nimport {ChartBuilderColumn, ChartBuilderTemplate} from './types';\n\nexport interface ChartBuilderDialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (spec: Spec, title: string) => void;\n  /** Custom builders (defaults to all built-in builders) */\n  builders?: ChartBuilderTemplate[];\n}\n\n/**\n * Dialog wrapper for the chart builder.\n * For a non-dialog version, use MosaicChartBuilder.Content directly.\n */\nexport const ChartBuilderDialog: React.FC<ChartBuilderDialogProps> = ({\n  open,\n  onOpenChange,\n  tableName,\n  columns,\n  onCreateChart,\n  builders,\n}) => {\n  const handleCreateChart = (spec: Spec, title: string) => {\n    onCreateChart(spec, title);\n    onOpenChange(false);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>Add Chart</DialogTitle>\n          <DialogDescription>Select a chart type to create.</DialogDescription>\n        </DialogHeader>\n        <ChartBuilderContent\n          tableName={tableName}\n          columns={columns}\n          onCreateChart={handleCreateChart}\n          builders={builders}\n        />\n      </DialogContent>\n    </Dialog>\n  );\n};\n"]}
+{"version":3,"file":"ChartBuilderDialog.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EAEN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AASpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAGjD,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IAC9B,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,kBACpB,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,KAAK,KAAK,YACpD,QAAQ,IAAI,CACX,8BACE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,GAAG,iBAEhC,CACJ,GACM,GACK,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAWxD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAElC,CAAC,EACH,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,gCAAgC,EAC9C,SAAS,EACT,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,aAAa,IAAC,SAAS,EAAE,SAAS,IAAI,aAAa,aAClD,MAAC,YAAY,eACX,KAAC,WAAW,cAAE,KAAK,GAAe,EAClC,KAAC,iBAAiB,cAAE,WAAW,GAAqB,IACvC,EACd,QAAQ,IAAI,KAAC,mBAAmB,KAAG,IACtB,CACjB,CAAC;AACJ,CAAC,CAAC;AAmBF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,EACV,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,YAElB,KAAC,yBAAyB,KAAG,GACZ,CACpB,CAAC","sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@sqlrooms/ui';\nimport {Plus} from 'lucide-react';\nimport React from 'react';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {ChartBuilderContent} from './ChartBuilderContent';\nimport {ChartBuilderRoot} from './ChartBuilderRoot';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\nexport type ChartBuilderTriggerProps = ButtonProps;\n\nexport const ChartBuilderTrigger = React.forwardRef<\n  HTMLButtonElement,\n  ChartBuilderTriggerProps\n>(({children, ...props}, ref) => {\n  return (\n    <DialogTrigger asChild>\n      <Button ref={ref} variant=\"outline\" size=\"sm\" {...props}>\n        {children ?? (\n          <>\n            <Plus className=\"mr-1 h-4 w-4\" />\n            Add Chart\n          </>\n        )}\n      </Button>\n    </DialogTrigger>\n  );\n});\nChartBuilderTrigger.displayName = 'ChartBuilderTrigger';\n\nexport interface ChartBuilderDialogContentProps {\n  /** Override dialog title (default \"Add Chart\") */\n  title?: string;\n  /** Override dialog description */\n  description?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * The dialog content pane that renders the chart-builder steps.\n * Must be rendered inside `<MosaicChartBuilder>`.\n */\nexport const ChartBuilderDialogContent: React.FC<\n  ChartBuilderDialogContentProps\n> = ({\n  title = 'Add Chart',\n  description = 'Select a chart type to create.',\n  className,\n  children,\n}) => {\n  return (\n    <DialogContent className={className ?? 'sm:max-w-lg'}>\n      <DialogHeader>\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      {children ?? <ChartBuilderContent />}\n    </DialogContent>\n  );\n};\n\nexport interface ChartBuilderDialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  /** Preferred shared chart-type customization surface */\n  chartTypes?: ChartTypeDefinition[];\n  /** Backward-compatible UI template customization surface */\n  builders?: ChartBuilderTemplate[];\n}\n\n/**\n * Dialog wrapper for the chart builder (legacy API).\n *\n * @deprecated Prefer the compound form:\n * ```tsx\n * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>\n *   <MosaicChartBuilder.Trigger />\n *   <MosaicChartBuilder.Dialog />\n * </MosaicChartBuilder>\n * ```\n */\nexport const ChartBuilderDialog: React.FC<ChartBuilderDialogProps> = ({\n  open,\n  onOpenChange,\n  tableName,\n  columns,\n  onCreateChart,\n  chartTypes,\n  builders,\n}) => (\n  <ChartBuilderRoot\n    open={open}\n    onOpenChange={onOpenChange}\n    tableName={tableName}\n    columns={columns}\n    onCreateChart={onCreateChart}\n    chartTypes={chartTypes}\n    builders={builders}\n  >\n    <ChartBuilderDialogContent />\n  </ChartBuilderRoot>\n);\n"]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ChartBuilderFieldsProps {
+    className?: string;
+}
+export declare const ChartBuilderFields: React.FC<ChartBuilderFieldsProps>;
+//# sourceMappingURL=ChartBuilderFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderFields.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8ChE,CAAC"}

package/dist/chart-builders/ChartBuilderFields.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import React from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+import { FieldSelectorInput } from './FieldSelectorInput';
+import { useChartFieldForm } from './hooks/useChartFieldForm';
+export const ChartBuilderFields = ({ className, }) => {
+    const { columns, templates } = useChartBuilderContext();
+    const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const fieldValues = useChartBuilderStore((state) => state.fieldValues);
+    const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);
+    const selectedTemplate = React.useMemo(() => templates.find((template) => template.id === selectedTemplateId), [templates, selectedTemplateId]);
+    const { fields, handleFieldChange } = useChartFieldForm({
+        fields: selectedTemplate?.fields || [],
+        values: fieldValues,
+        onChange: (key, value) => setFieldValue(key, value),
+    });
+    if (!selectedTemplate)
+        return null;
+    if (fields.length === 0) {
+        return (_jsx("p", { className: cn('text-muted-foreground py-2 text-sm', className), children: "This chart type has no configurable fields. A starter spec will be created that you can edit manually." }));
+    }
+    return (_jsx("div", { className: cn('flex flex-col gap-4 py-2', className), children: fields.map((field) => (_jsx(FieldSelectorInput, { field: field, columns: columns, value: fieldValues[field.key], onChange: (value) => handleFieldChange(field.key, value) }, field.key))) }));
+};
+//# sourceMappingURL=ChartBuilderFields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderFields.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAM5D,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,SAAS,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,CAAC;IACF,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,EACtE,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAChC,CAAC;IAEF,MAAM,EAAC,MAAM,EAAE,iBAAiB,EAAC,GAAG,iBAAiB,CAAC;QACpD,MAAM,EAAE,gBAAgB,EAAE,MAAM,IAAI,EAAE;QACtC,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,CAAC,GAAW,EAAE,KAAc,EAAE,EAAE,CACxC,aAAa,CAAC,GAAG,EAAE,KAAe,CAAC;KACtC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB;QAAE,OAAO,IAAI,CAAC;IAEnC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,YAAG,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,uHAG7D,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,YACtD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,kBAAkB,IAEjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAJnD,KAAK,CAAC,GAAG,CAKd,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {FieldSelectorInput} from './FieldSelectorInput';\nimport {useChartFieldForm} from './hooks/useChartFieldForm';\n\nexport interface ChartBuilderFieldsProps {\n  className?: string;\n}\n\nexport const ChartBuilderFields: React.FC<ChartBuilderFieldsProps> = ({\n  className,\n}) => {\n  const {columns, templates} = useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);\n\n  const selectedTemplate = React.useMemo(\n    () => templates.find((template) => template.id === selectedTemplateId),\n    [templates, selectedTemplateId],\n  );\n\n  const {fields, handleFieldChange} = useChartFieldForm({\n    fields: selectedTemplate?.fields || [],\n    values: fieldValues,\n    onChange: (key: string, value: unknown) =>\n      setFieldValue(key, value as string),\n  });\n\n  if (!selectedTemplate) return null;\n\n  if (fields.length === 0) {\n    return (\n      <p className={cn('text-muted-foreground py-2 text-sm', className)}>\n        This chart type has no configurable fields. A starter spec will be\n        created that you can edit manually.\n      </p>\n    );\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-4 py-2', className)}>\n      {fields.map((field) => (\n        <FieldSelectorInput\n          key={field.key}\n          field={field}\n          columns={columns}\n          value={fieldValues[field.key]}\n          onChange={(value) => handleFieldChange(field.key, value)}\n        />\n      ))}\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+export type ChartBuilderRootProps = PropsWithChildren<{
+    /** Table name to use in generated specs */
+    tableName: string;
+    /** Available columns for field selectors */
+    columns: ChartBuilderColumn[];
+    /** Callback when a chart spec is created */
+    onCreateChart: (title: string, metadata: VgPlotChartConfig) => void;
+    /** Preferred shared chart-type customization surface */
+    chartTypes?: ChartTypeDefinition[];
+    /** Backward-compatible UI template customization surface */
+    builders?: ChartBuilderTemplate[];
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}>;
+/**
+ * Compound-component root that provides shared chart-builder state via context
+ * and renders a Radix `Dialog`.
+ *
+ * Supports both controlled (`open`/`onOpenChange`) and uncontrolled usage.
+ */
+export declare const ChartBuilderRoot: React.FC<ChartBuilderRootProps>;
+//# sourceMappingURL=ChartBuilderRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderRoot.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAQtD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpE,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyF5D,CAAC"}

package/dist/chart-builders/ChartBuilderRoot.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from '@sqlrooms/ui';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { createChartBuilderTemplates, createDefaultChartBuilders, } from './builders';
+import { ChartBuilderContext } from './ChartBuilderContext';
+import { createChartBuilderStore } from './createChartBuilderStore';
+import { getAvailableChartTypes } from './chartTypeUtils';
+/**
+ * Compound-component root that provides shared chart-builder state via context
+ * and renders a Radix `Dialog`.
+ *
+ * Supports both controlled (`open`/`onOpenChange`) and uncontrolled usage.
+ */
+export const ChartBuilderRoot = ({ tableName, columns, onCreateChart, chartTypes, builders, open, onOpenChange, children, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const [store] = useState(() => createChartBuilderStore());
+    const isControlled = open !== undefined;
+    const resolvedOpen = isControlled ? open : uncontrolledOpen;
+    const resolvedOnOpenChange = useMemo(() => (isControlled ? (onOpenChange ?? (() => { })) : setUncontrolledOpen), [isControlled, onOpenChange]);
+    const resolvedTemplates = useMemo(() => {
+        if (chartTypes) {
+            return createChartBuilderTemplates(chartTypes);
+        }
+        if (builders) {
+            return builders;
+        }
+        return createDefaultChartBuilders();
+    }, [builders, chartTypes]);
+    const availableChartTypes = useMemo(() => getAvailableChartTypes(resolvedTemplates, columns), [columns, resolvedTemplates]);
+    const availableTemplates = useMemo(() => resolvedTemplates.filter((template) => availableChartTypes.some((chartType) => chartType.id === template.id)), [availableChartTypes, resolvedTemplates]);
+    useEffect(() => {
+        const { selectedTemplateId, reset } = store.getState();
+        if (selectedTemplateId &&
+            !availableTemplates.some((template) => template.id === selectedTemplateId)) {
+            reset();
+        }
+    }, [availableTemplates, store]);
+    const handleCreateChart = useCallback((title, config) => {
+        onCreateChart(title, config);
+        resolvedOnOpenChange(false);
+    }, [onCreateChart, resolvedOnOpenChange]);
+    const ctx = useMemo(() => ({
+        tableName,
+        columns,
+        onCreateChart: handleCreateChart,
+        templates: resolvedTemplates,
+        availableChartTypes,
+        availableTemplates,
+        store,
+    }), [
+        availableChartTypes,
+        availableTemplates,
+        columns,
+        handleCreateChart,
+        resolvedTemplates,
+        store,
+        tableName,
+    ]);
+    return (_jsx(ChartBuilderContext.Provider, { value: ctx, children: _jsx(Dialog, { open: resolvedOpen, onOpenChange: resolvedOnOpenChange, children: children }) }));
+};
+//# sourceMappingURL=ChartBuilderRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderRoot.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Dialog} from '@sqlrooms/ui';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport React, {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {\n  createChartBuilderTemplates,\n  createDefaultChartBuilders,\n} from './builders';\nimport {ChartBuilderContext} from './ChartBuilderContext';\nimport {createChartBuilderStore} from './createChartBuilderStore';\nimport {getAvailableChartTypes} from './chartTypeUtils';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\nexport type ChartBuilderRootProps = PropsWithChildren<{\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (title: string, metadata: VgPlotChartConfig) => void;\n  /** Preferred shared chart-type customization surface */\n  chartTypes?: ChartTypeDefinition[];\n  /** Backward-compatible UI template customization surface */\n  builders?: ChartBuilderTemplate[];\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}>;\n\n/**\n * Compound-component root that provides shared chart-builder state via context\n * and renders a Radix `Dialog`.\n *\n * Supports both controlled (`open`/`onOpenChange`) and uncontrolled usage.\n */\nexport const ChartBuilderRoot: React.FC<ChartBuilderRootProps> = ({\n  tableName,\n  columns,\n  onCreateChart,\n  chartTypes,\n  builders,\n  open,\n  onOpenChange,\n  children,\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const [store] = useState(() => createChartBuilderStore());\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : uncontrolledOpen;\n\n  const resolvedOnOpenChange = useMemo(\n    () => (isControlled ? (onOpenChange ?? (() => {})) : setUncontrolledOpen),\n    [isControlled, onOpenChange],\n  );\n\n  const resolvedTemplates = useMemo(() => {\n    if (chartTypes) {\n      return createChartBuilderTemplates(chartTypes);\n    }\n    if (builders) {\n      return builders;\n    }\n    return createDefaultChartBuilders();\n  }, [builders, chartTypes]);\n\n  const availableChartTypes = useMemo(\n    () => getAvailableChartTypes(resolvedTemplates, columns),\n    [columns, resolvedTemplates],\n  );\n  const availableTemplates = useMemo(\n    () =>\n      resolvedTemplates.filter((template) =>\n        availableChartTypes.some((chartType) => chartType.id === template.id),\n      ),\n    [availableChartTypes, resolvedTemplates],\n  );\n\n  useEffect(() => {\n    const {selectedTemplateId, reset} = store.getState();\n    if (\n      selectedTemplateId &&\n      !availableTemplates.some((template) => template.id === selectedTemplateId)\n    ) {\n      reset();\n    }\n  }, [availableTemplates, store]);\n\n  const handleCreateChart: (title: string, config: VgPlotChartConfig) => void =\n    useCallback(\n      (title: string, config: VgPlotChartConfig) => {\n        onCreateChart(title, config);\n        resolvedOnOpenChange(false);\n      },\n      [onCreateChart, resolvedOnOpenChange],\n    );\n\n  const ctx = useMemo(\n    () => ({\n      tableName,\n      columns,\n      onCreateChart: handleCreateChart,\n      templates: resolvedTemplates,\n      availableChartTypes,\n      availableTemplates,\n      store,\n    }),\n    [\n      availableChartTypes,\n      availableTemplates,\n      columns,\n      handleCreateChart,\n      resolvedTemplates,\n      store,\n      tableName,\n    ],\n  );\n\n  return (\n    <ChartBuilderContext.Provider value={ctx}>\n      <Dialog open={resolvedOpen} onOpenChange={resolvedOnOpenChange}>\n        {children}\n      </Dialog>\n    </ChartBuilderContext.Provider>\n  );\n};\n"]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ChartBuilderTypeGridProps {
+    className?: string;
+    showWhenSelected?: boolean;
+}
+export declare const ChartBuilderTypeGrid: React.FC<ChartBuilderTypeGridProps>;
+//# sourceMappingURL=ChartBuilderTypeGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderTypeGrid.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderTypeGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2DpE,CAAC"}

package/dist/chart-builders/ChartBuilderTypeGrid.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import { useMemo } from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+export const ChartBuilderTypeGrid = ({ className, showWhenSelected = false, }) => {
+    const { availableTemplates } = useChartBuilderContext();
+    const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const selectTemplate = useChartBuilderStore((state) => state.selectTemplate);
+    const shouldRender = showWhenSelected || !selectedTemplateId;
+    const availableCount = availableTemplates.length;
+    const selectedTemplate = useMemo(() => availableTemplates.find((template) => template.id === selectedTemplateId), [availableTemplates, selectedTemplateId]);
+    if (!shouldRender)
+        return null;
+    if (availableCount === 0) {
+        return (_jsx("p", { className: cn('text-muted-foreground py-4 text-sm', className), children: "No built-in chart types are available for the current table schema." }));
+    }
+    return (_jsx("div", { className: cn('grid grid-cols-2 gap-2 py-2', className), children: availableTemplates.map((template) => {
+            const Icon = template.icon;
+            const isSelected = selectedTemplate?.id === template.id;
+            return (_jsxs("button", { type: "button", className: cn('flex items-start gap-3 rounded-md border p-3 text-left transition-colors', 'hover:bg-accent hover:text-accent-foreground', isSelected && 'border-primary bg-accent text-accent-foreground'), onClick: () => selectTemplate(template.id), children: [_jsx(Icon, { className: "mt-0.5 h-5 w-5 shrink-0 opacity-70" }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-medium", children: template.label ?? template.description }), _jsx("span", { className: "text-muted-foreground block text-xs", children: template.description })] })] }, template.id));
+        }) }));
+};
+//# sourceMappingURL=ChartBuilderTypeGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderTypeGrid.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderTypeGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,SAAS,EACT,gBAAgB,GAAG,KAAK,GACzB,EAAE,EAAE;IACH,MAAM,EAAC,kBAAkB,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,CAAC;IACF,MAAM,cAAc,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC;IAC7D,MAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,CAAC;IACjD,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACH,kBAAkB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,EAC3E,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CACzC,CAAC;IAEF,IAAI,CAAC,YAAY;QAAE,OAAO,IAAI,CAAC;IAE/B,IAAI,cAAc,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,YAAG,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,oFAE7D,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,YACzD,kBAAkB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC3B,MAAM,UAAU,GAAG,gBAAgB,EAAE,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC;YAExD,OAAO,CACL,kBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,8CAA8C,EAC9C,UAAU,IAAI,iDAAiD,CAChE,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,aAE1C,KAAC,IAAI,IAAC,SAAS,EAAC,oCAAoC,GAAG,EACvD,gBAAM,SAAS,EAAC,SAAS,aACvB,eAAM,SAAS,EAAC,2BAA2B,YACxC,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,WAAW,GAClC,EACP,eAAM,SAAS,EAAC,qCAAqC,YAClD,QAAQ,CAAC,WAAW,GAChB,IACF,KAjBF,QAAQ,CAAC,EAAE,CAkBT,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React, {useMemo} from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\n\nexport interface ChartBuilderTypeGridProps {\n  className?: string;\n  showWhenSelected?: boolean;\n}\n\nexport const ChartBuilderTypeGrid: React.FC<ChartBuilderTypeGridProps> = ({\n  className,\n  showWhenSelected = false,\n}) => {\n  const {availableTemplates} = useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const selectTemplate = useChartBuilderStore((state) => state.selectTemplate);\n\n  const shouldRender = showWhenSelected || !selectedTemplateId;\n  const availableCount = availableTemplates.length;\n  const selectedTemplate = useMemo(\n    () =>\n      availableTemplates.find((template) => template.id === selectedTemplateId),\n    [availableTemplates, selectedTemplateId],\n  );\n\n  if (!shouldRender) return null;\n\n  if (availableCount === 0) {\n    return (\n      <p className={cn('text-muted-foreground py-4 text-sm', className)}>\n        No built-in chart types are available for the current table schema.\n      </p>\n    );\n  }\n\n  return (\n    <div className={cn('grid grid-cols-2 gap-2 py-2', className)}>\n      {availableTemplates.map((template) => {\n        const Icon = template.icon;\n        const isSelected = selectedTemplate?.id === template.id;\n\n        return (\n          <button\n            key={template.id}\n            type=\"button\"\n            className={cn(\n              'flex items-start gap-3 rounded-md border p-3 text-left transition-colors',\n              'hover:bg-accent hover:text-accent-foreground',\n              isSelected && 'border-primary bg-accent text-accent-foreground',\n            )}\n            onClick={() => selectTemplate(template.id)}\n          >\n            <Icon className=\"mt-0.5 h-5 w-5 shrink-0 opacity-70\" />\n            <span className=\"min-w-0\">\n              <span className=\"block text-sm font-medium\">\n                {template.label ?? template.description}\n              </span>\n              <span className=\"text-muted-foreground block text-xs\">\n                {template.description}\n              </span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldSelectorInput.d.ts","sourceRoot":"","sources":["../../src/chart-builders/FieldSelectorInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE9D,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;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+EhE,CAAC"}
+{"version":3,"file":"FieldSelectorInput.d.ts","sourceRoot":"","sources":["../../src/chart-builders/FieldSelectorInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE9D,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;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkFhE,CAAC"}

package/dist/chart-builders/FieldSelectorInput.js

@@ -11,9 +11,9 @@ export const FieldSelectorInput = ({ field, columns, value, onChange, }) => {
         ? columns.filter((col) => field.types.some((t) => col.type.toUpperCase() === t.toUpperCase()))
         : columns;
     const selectedColumn = filteredColumns.find((col) => col.name === value);
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: "text-sm font-medium", children: [field.label, field.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "w-full justify-between font-normal", children: [selectedColumn ? (_jsxs("span", { className: "flex items-center gap-2 truncate", children: [_jsx("span", { className: "truncate", children: selectedColumn.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: selectedColumn.type })] })) : (_jsxs("span", { className: "text-muted-foreground", children: ["Select ", field.label.toLowerCase(), "..."] })), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: `Search columns...` }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matching column." }), _jsx(CommandGroup, { children: filteredColumns.map((col) => (_jsxs(CommandItem, { value: col.name, onSelect: (currentValue) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: "text-xs font-medium", children: [field.label, field.required && _jsx("span", { className: "text-destructive ml-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 items-center gap-2 truncate", children: [_jsx("span", { className: "truncate", children: selectedColumn.name }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: selectedColumn.type })] })) : (_jsxs("span", { className: "text-muted-foreground", children: ["Select ", field.label.toLowerCase(), "..."] })), _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-4 w-4 shrink-0', value === col.name ? 'opacity-100' : 'opacity-0') }), _jsx("span", { className: "truncate", children: col.name }), _jsx("span", { className: "text-muted-foreground ml-auto text-xs", children: col.type })] }, col.name))) })] })] }) })] })] }));
+                                                }, 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", children: col.name }), _jsx("span", { className: "text-muted-foreground ml-auto text-[10px]", children: col.type })] }, col.name))) })] })] }) })] })] }));
 };
 //# sourceMappingURL=FieldSelectorInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldSelectorInput.js","sourceRoot":"","sources":["../../src/chart-builders/FieldSelectorInput.tsx"],"names":[],"mappings":"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","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 {ChartBuilderColumn, ChartBuilderField} from './types';\n\nexport interface FieldSelectorInputProps {\n  field: ChartBuilderField;\n  columns: ChartBuilderColumn[];\n  value: string | undefined;\n  onChange: (value: string) => void;\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}) => {\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=\"flex flex-col gap-1\">\n      <label className=\"text-sm font-medium\">\n        {field.label}\n        {field.required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between font-normal\"\n          >\n            {selectedColumn ? (\n              <span className=\"flex items-center gap-2 truncate\">\n                <span className=\"truncate\">{selectedColumn.name}</span>\n                <span className=\"text-muted-foreground text-xs\">\n                  {selectedColumn.type}\n                </span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">\n                Select {field.label.toLowerCase()}...\n              </span>\n            )}\n            <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0\">\n          <Command>\n            <CommandInput placeholder={`Search columns...`} />\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-4 w-4 shrink-0',\n                        value === col.name ? 'opacity-100' : 'opacity-0',\n                      )}\n                    />\n                    <span className=\"truncate\">{col.name}</span>\n                    <span className=\"text-muted-foreground ml-auto text-xs\">\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/chart-builders/FieldSelectorInput.tsx"],"names":[],"mappings":"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","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 {ChartBuilderColumn, ChartBuilderField} from './types';\n\nexport interface FieldSelectorInputProps {\n  field: ChartBuilderField;\n  columns: ChartBuilderColumn[];\n  value: string | undefined;\n  onChange: (value: string) => void;\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}) => {\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=\"flex flex-col gap-1\">\n      <label className=\"text-xs font-medium\">\n        {field.label}\n        {field.required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\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 items-center gap-2 truncate\">\n                <span className=\"truncate\">{selectedColumn.name}</span>\n                <span className=\"text-muted-foreground text-[10px]\">\n                  {selectedColumn.type}\n                </span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">\n                Select {field.label.toLowerCase()}...\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\">{col.name}</span>\n                    <span className=\"text-muted-foreground ml-auto text-[10px]\">\n                      {col.type}\n                    </span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n"]}