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

package/dist/chart-builders/ChartBuilderActions.js

@@ -1,28 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn } from '@sqlrooms/ui';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
 import { buildChartTypeTitle, canCreateChartFromType } from './chartTypeUtils';
 export const ChartBuilderActions = ({ className, }) => {
-    const { columns, onCreateChart, tableName, templates } = useChartBuilderContext();
+    const { onCreateChart, templates } = useChartBuilderContext();
     const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
     const fieldValues = useChartBuilderStore((state) => state.fieldValues);
     const reset = useChartBuilderStore((state) => state.reset);
     const selectedTemplate = useMemo(() => templates.find((template) => template.id === selectedTemplateId), [templates, selectedTemplateId]);
-    const canCreate = canCreateChartFromType(selectedTemplate, fieldValues, columns);
-    if (!selectedTemplate)
+    const canCreate = canCreateChartFromType(selectedTemplate, fieldValues);
+    const handleCreateChart = useCallback(() => {
+        if (!selectedTemplate || !canCreate || !selectedTemplateId) {
+            return;
+        }
+        const title = buildChartTypeTitle(selectedTemplate, fieldValues);
+        onCreateChart(title, {
+            chartType: selectedTemplateId,
+            settings: fieldValues,
+        });
+        reset();
+    }, [
+        selectedTemplate,
+        canCreate,
+        selectedTemplateId,
+        fieldValues,
+        onCreateChart,
+        reset,
+    ]);
+    if (!selectedTemplate) {
         return null;
-    return (_jsxs("div", { className: cn('flex items-center justify-end gap-2', className), children: [_jsx(Button, { variant: "outline", size: "sm", onClick: reset, children: "Back" }), _jsx(Button, { size: "sm", onClick: () => {
-                    if (!selectedTemplate || !canCreate || !selectedTemplateId)
-                        return;
-                    const spec = selectedTemplate.createSpec(tableName, fieldValues);
-                    const title = buildChartTypeTitle(selectedTemplate, fieldValues);
-                    onCreateChart(title, {
-                        chartType: selectedTemplateId,
-                        settings: fieldValues,
-                        vgplot: spec,
-                    });
-                    reset();
-                }, disabled: !canCreate, children: "Create" })] }));
+    }
+    return (_jsxs("div", { className: cn('flex items-center justify-end gap-2', className), children: [_jsx(Button, { variant: "outline", size: "sm", onClick: reset, children: "Back" }), _jsx(Button, { size: "sm", onClick: handleCreateChart, disabled: !canCreate, children: "Create" })] }));
 };
 //# sourceMappingURL=ChartBuilderActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderActions.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAM7E,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,GAClD,sBAAsB,EAAE,CAAC;IAC3B,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,KAAK,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,gBAAgB,GAAG,OAAO,CAC9B,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,SAAS,GAAG,sBAAsB,CACtC,gBAAgB,EAChB,WAAW,EACX,OAAO,CACR,CAAC;IAEF,IAAI,CAAC,gBAAgB;QAAE,OAAO,IAAI,CAAC;IAEnC,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,aAClE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,KAAK,qBAEzC,EACT,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,gBAAgB,IAAI,CAAC,SAAS,IAAI,CAAC,kBAAkB;wBAAE,OAAO;oBACnE,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;oBACjE,MAAM,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;oBACjE,aAAa,CAAC,KAAK,EAAE;wBACnB,SAAS,EAAE,kBAAkB;wBAC7B,QAAQ,EAAE,WAAW;wBACrB,MAAM,EAAE,IAAI;qBACb,CAAC,CAAC;oBACH,KAAK,EAAE,CAAC;gBACV,CAAC,EACD,QAAQ,EAAE,CAAC,SAAS,uBAGb,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport React, {useMemo} from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {buildChartTypeTitle, canCreateChartFromType} from './chartTypeUtils';\n\nexport interface ChartBuilderActionsProps {\n  className?: string;\n}\n\nexport const ChartBuilderActions: React.FC<ChartBuilderActionsProps> = ({\n  className,\n}) => {\n  const {columns, onCreateChart, tableName, templates} =\n    useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const reset = useChartBuilderStore((state) => state.reset);\n\n  const selectedTemplate = useMemo(\n    () => templates.find((template) => template.id === selectedTemplateId),\n    [templates, selectedTemplateId],\n  );\n\n  const canCreate = canCreateChartFromType(\n    selectedTemplate,\n    fieldValues,\n    columns,\n  );\n\n  if (!selectedTemplate) return null;\n\n  return (\n    <div className={cn('flex items-center justify-end gap-2', className)}>\n      <Button variant=\"outline\" size=\"sm\" onClick={reset}>\n        Back\n      </Button>\n      <Button\n        size=\"sm\"\n        onClick={() => {\n          if (!selectedTemplate || !canCreate || !selectedTemplateId) return;\n          const spec = selectedTemplate.createSpec(tableName, fieldValues);\n          const title = buildChartTypeTitle(selectedTemplate, fieldValues);\n          onCreateChart(title, {\n            chartType: selectedTemplateId,\n            settings: fieldValues,\n            vgplot: spec,\n          });\n          reset();\n        }}\n        disabled={!canCreate}\n      >\n        Create\n      </Button>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ChartBuilderActions.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAK,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAO7E,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAChE,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,aAAa,EAAE,SAAS,EAAC,GAAG,sBAAsB,EAAE,CAAC;IAC5D,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,KAAK,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,gBAAgB,GAAG,OAAO,CAC9B,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,SAAS,GAAG,sBAAsB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExE,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,gBAAgB,IAAI,CAAC,SAAS,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;QACjE,aAAa,CAAC,KAAK,EAAE;YACnB,SAAS,EAAE,kBAAkB;YAC7B,QAAQ,EAAE,WAAW;SACP,CAAC,CAAC;QAClB,KAAK,EAAE,CAAC;IACV,CAAC,EAAE;QACD,gBAAgB;QAChB,SAAS;QACT,kBAAkB;QAClB,WAAW;QACX,aAAa;QACb,KAAK;KACN,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,aAClE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,KAAK,qBAEzC,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,SAAS,uBAEzD,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {FC, useCallback, useMemo} from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {buildChartTypeTitle, canCreateChartFromType} from './chartTypeUtils';\nimport type {ChartConfig} from '../chart-types';\n\nexport interface ChartBuilderActionsProps {\n  className?: string;\n}\n\nexport const ChartBuilderActions: FC<ChartBuilderActionsProps> = ({\n  className,\n}) => {\n  const {onCreateChart, templates} = useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const reset = useChartBuilderStore((state) => state.reset);\n\n  const selectedTemplate = useMemo(\n    () => templates.find((template) => template.id === selectedTemplateId),\n    [templates, selectedTemplateId],\n  );\n\n  const canCreate = canCreateChartFromType(selectedTemplate, fieldValues);\n\n  const handleCreateChart = useCallback(() => {\n    if (!selectedTemplate || !canCreate || !selectedTemplateId) {\n      return;\n    }\n\n    const title = buildChartTypeTitle(selectedTemplate, fieldValues);\n    onCreateChart(title, {\n      chartType: selectedTemplateId,\n      settings: fieldValues,\n    } as ChartConfig);\n    reset();\n  }, [\n    selectedTemplate,\n    canCreate,\n    selectedTemplateId,\n    fieldValues,\n    onCreateChart,\n    reset,\n  ]);\n\n  if (!selectedTemplate) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex items-center justify-end gap-2', className)}>\n      <Button variant=\"outline\" size=\"sm\" onClick={reset}>\n        Back\n      </Button>\n      <Button size=\"sm\" onClick={handleCreateChart} disabled={!canCreate}>\n        Create\n      </Button>\n    </div>\n  );\n};\n"]}

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

@@ -1,18 +1,16 @@
 import React from 'react';
-import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartConfig } from '../chart-types';
 import { type ChartBuilderRootProps } from './ChartBuilderRoot';
-import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+import type { ChartBuilderColumn, ChartTypeDefinition } from '../chart-types/base-types';
 type StandaloneChartBuilderContentProps = {
     /** 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, config: VgPlotChartConfig) => void;
-    /** Preferred shared chart-type customization surface */
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    /** Optional chart types to show (defaults to all registered types) */
     chartTypes?: ChartTypeDefinition[];
-    /** Backward-compatible UI template customization surface */
-    builders?: ChartBuilderTemplate[];
     /** Custom class name */
     className?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderContent.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAmB,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAEhF,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,KAAK,kCAAkC,GAAG;IACxC,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;IAClC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,CACxC,GACC,IAAI,CAAC,kCAAkC,EAAE,WAAW,CAAC,CAAC;AAoBxD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAalE,CAAC"}
+{"version":3,"file":"ChartBuilderContent.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAmB,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAEhF,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAEnC,KAAK,kCAAkC,GAAG;IACxC,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,WAAW,KAAK,IAAI,CAAC;IAC5D,sEAAsE;IACtE,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,CACxC,GACC,IAAI,CAAC,kCAAkC,EAAE,WAAW,CAAC,CAAC;AAoBxD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAalE,CAAC"}

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

@@ -1 +1 @@
-{"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"]}
+{"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;AAwB5D,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 {ChartConfig} 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  ChartTypeDefinition,\n} from '../chart-types/base-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: ChartConfig) => void;\n  /** Optional chart types to show (defaults to all registered types) */\n  chartTypes?: ChartTypeDefinition[];\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,13 +1,12 @@
-import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartConfig } from '../chart-types';
 import type { ChartBuilderStore, ChartBuilderStoreState } from './createChartBuilderStore';
-import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+import type { ChartBuilderColumn, ChartTypeDefinition } from '../chart-types/base-types';
 export type ChartBuilderContextValue = {
     tableName: string;
     columns: ChartBuilderColumn[];
-    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
-    templates: ChartBuilderTemplate[];
-    availableChartTypes: ChartTypeDefinition[];
-    availableTemplates: ChartBuilderTemplate[];
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    templates: ChartTypeDefinition[];
+    availableTemplates: ChartTypeDefinition[];
     store: ChartBuilderStore;
 };
 export declare const ChartBuilderContext: import("react").Context<ChartBuilderContextValue | null>;

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":"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"}
+{"version":3,"file":"ChartBuilderContext.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAEnC,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,WAAW,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,kBAAkB,EAAE,mBAAmB,EAAE,CAAC;IAC1C,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.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;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"]}
+{"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;AAoBjC,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 {ChartConfig} from '../chart-types';\nimport type {\n  ChartBuilderStore,\n  ChartBuilderStoreState,\n} from './createChartBuilderStore';\nimport type {\n  ChartBuilderColumn,\n  ChartTypeDefinition,\n} from '../chart-types/base-types';\n\nexport type ChartBuilderContextValue = {\n  tableName: string;\n  columns: ChartBuilderColumn[];\n  onCreateChart: (title: string, config: ChartConfig) => void;\n  templates: ChartTypeDefinition[];\n  availableTemplates: ChartTypeDefinition[];\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,17 +1,16 @@
 import { type ButtonProps } from '@sqlrooms/ui';
-import React from 'react';
-import type { VgPlotChartConfig } from '../chart-types';
-import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+import React, { PropsWithChildren } from 'react';
+import type { ChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartTypeDefinition } from '../chart-types/base-types';
 export type ChartBuilderTriggerProps = ButtonProps;
 export declare const ChartBuilderTrigger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export interface ChartBuilderDialogContentProps {
+export type ChartBuilderDialogContentProps = PropsWithChildren<{
     /** 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>`.
@@ -27,11 +26,9 @@ export interface ChartBuilderDialogProps {
     /** Available columns for field selectors */
     columns: ChartBuilderColumn[];
     /** Callback when a chart spec is created */
-    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
-    /** Preferred shared chart-type customization surface */
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    /** Optional chart types to show (defaults to all registered types) */
     chartTypes?: ChartTypeDefinition[];
-    /** Backward-compatible UI template customization surface */
-    builders?: ChartBuilderTemplate[];
 }
 /**
  * Dialog wrapper for the chart builder (legacy API).

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":"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"}
+{"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,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,uFAgB9B,CAAC;AAGH,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH;;;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,WAAW,KAAK,IAAI,CAAC;IAC5D,sEAAsE;IACtE,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACpC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkBhE,CAAC"}

package/dist/chart-builders/ChartBuilderDialog.js

@@ -26,5 +26,5 @@ export const ChartBuilderDialogContent = ({ title = 'Add Chart', description = '
  * </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, {}) }));
+export const ChartBuilderDialog = ({ open, onOpenChange, tableName, columns, onCreateChart, chartTypes, }) => (_jsx(ChartBuilderRoot, { open: open, onOpenChange: onOpenChange, tableName: tableName, columns: columns, onCreateChart: onCreateChart, chartTypes: chartTypes, 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,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"]}
+{"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,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAQpD,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;AAUxD;;;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;AAiBF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,GACX,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,YAEtB,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, {PropsWithChildren} from 'react';\nimport type {ChartConfig} from '../chart-types';\nimport {ChartBuilderContent} from './ChartBuilderContent';\nimport {ChartBuilderRoot} from './ChartBuilderRoot';\nimport type {\n  ChartBuilderColumn,\n  ChartTypeDefinition,\n} from '../chart-types/base-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 type ChartBuilderDialogContentProps = PropsWithChildren<{\n  /** Override dialog title (default \"Add Chart\") */\n  title?: string;\n  /** Override dialog description */\n  description?: string;\n  className?: string;\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: ChartConfig) => void;\n  /** Optional chart types to show (defaults to all registered types) */\n  chartTypes?: ChartTypeDefinition[];\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}) => (\n  <ChartBuilderRoot\n    open={open}\n    onOpenChange={onOpenChange}\n    tableName={tableName}\n    columns={columns}\n    onCreateChart={onCreateChart}\n    chartTypes={chartTypes}\n  >\n    <ChartBuilderDialogContent />\n  </ChartBuilderRoot>\n);\n"]}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"ChartBuilderFields.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAuB,MAAM,OAAO,CAAC;AAQ/C,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyD1D,CAAC"}

package/dist/chart-builders/ChartBuilderFields.js

@@ -1,25 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '@sqlrooms/ui';
-import React from 'react';
+import { useCallback, useMemo } from 'react';
 import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
-import { FieldSelectorInput } from './FieldSelectorInput';
-import { useChartFieldForm } from './hooks/useChartFieldForm';
+import { ChartSettingsProvider } from '../chart/chart-settings/ChartSettingsContext';
 export const ChartBuilderFields = ({ className, }) => {
     const { columns, templates } = useChartBuilderContext();
-    const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const chartTypeDefinitionId = 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)
+    const chartTypeDefinition = useMemo(() => templates.find((template) => template.id === chartTypeDefinitionId), [templates, chartTypeDefinitionId]);
+    const handleChange = useCallback((config) => {
+        // Update all changed values from settings
+        Object.entries(config.settings).forEach(([key, value]) => {
+            if (fieldValues[key] !== value) {
+                setFieldValue(key, value);
+            }
+        });
+    }, [fieldValues, setFieldValue]);
+    // Create a config object for the context
+    const config = useMemo(() => {
+        if (!chartTypeDefinition) {
+            return {
+                chartType: 'histogram',
+                settings: {},
+            };
+        }
+        return {
+            chartType: chartTypeDefinition.id,
+            settings: fieldValues,
+        };
+    }, [chartTypeDefinition, fieldValues]);
+    if (!chartTypeDefinition) {
         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))) }));
+    const SettingsComponent = chartTypeDefinition.settingsComponent;
+    return (_jsx("div", { className: cn('flex flex-col gap-4 py-2', className), children: _jsx(ChartSettingsProvider, { config: config, columns: columns, onChange: handleChange, children: _jsx(SettingsComponent, {}) }) }));
 };
 //# sourceMappingURL=ChartBuilderFields.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"ChartBuilderFields.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAK,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,8CAA8C,CAAC;AAOnF,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC9D,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,SAAS,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,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,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,qBAAqB,CAAC,EACzE,CAAC,SAAS,EAAE,qBAAqB,CAAC,CACnC,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAmB,EAAE,EAAE;QACtB,0CAA0C;QAC1C,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACvD,IAAI,WAAW,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC;gBAC/B,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,aAAa,CAAC,CAC7B,CAAC;IAEF,yCAAyC;IACzC,MAAM,MAAM,GAAgB,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACzB,OAAO;gBACL,SAAS,EAAE,WAAW;gBACtB,QAAQ,EAAE,EAAE;aACb,CAAC;QACJ,CAAC;QACD,OAAO;YACL,SAAS,EAAE,mBAAmB,CAAC,EAAE;YACjC,QAAQ,EAAE,WAAW;SACP,CAAC;IACnB,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC;IAChE,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,YACvD,KAAC,qBAAqB,IACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,YAEtB,KAAC,iBAAiB,KAAG,GACC,GACpB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport {FC, useCallback, useMemo} from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {ChartSettingsProvider} from '../chart/chart-settings/ChartSettingsContext';\nimport type {ChartConfig} from '../chart-types';\n\nexport interface ChartBuilderFieldsProps {\n  className?: string;\n}\n\nexport const ChartBuilderFields: FC<ChartBuilderFieldsProps> = ({\n  className,\n}) => {\n  const {columns, templates} = useChartBuilderContext();\n  const chartTypeDefinitionId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);\n\n  const chartTypeDefinition = useMemo(\n    () => templates.find((template) => template.id === chartTypeDefinitionId),\n    [templates, chartTypeDefinitionId],\n  );\n\n  const handleChange = useCallback(\n    (config: ChartConfig) => {\n      // Update all changed values from settings\n      Object.entries(config.settings).forEach(([key, value]) => {\n        if (fieldValues[key] !== value) {\n          setFieldValue(key, value);\n        }\n      });\n    },\n    [fieldValues, setFieldValue],\n  );\n\n  // Create a config object for the context\n  const config: ChartConfig = useMemo(() => {\n    if (!chartTypeDefinition) {\n      return {\n        chartType: 'histogram',\n        settings: {},\n      };\n    }\n    return {\n      chartType: chartTypeDefinition.id,\n      settings: fieldValues,\n    } as ChartConfig;\n  }, [chartTypeDefinition, fieldValues]);\n\n  if (!chartTypeDefinition) {\n    return null;\n  }\n\n  const SettingsComponent = chartTypeDefinition.settingsComponent;\n  return (\n    <div className={cn('flex flex-col gap-4 py-2', className)}>\n      <ChartSettingsProvider\n        config={config}\n        columns={columns}\n        onChange={handleChange}\n      >\n        <SettingsComponent />\n      </ChartSettingsProvider>\n    </div>\n  );\n};\n"]}

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

@@ -1,17 +1,15 @@
 import React, { PropsWithChildren } from 'react';
-import type { VgPlotChartConfig } from '../chart-types';
-import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+import type { ChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartTypeDefinition } from '../chart-types/base-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 */
+    onCreateChart: (title: string, metadata: ChartConfig) => void;
+    /** Optional chart types to show (defaults to an empty array) */
     chartTypes?: ChartTypeDefinition[];
-    /** Backward-compatible UI template customization surface */
-    builders?: ChartBuilderTemplate[];
     /** Controlled open state */
     open?: boolean;
     /** Callback when open state changes */

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

@@ -1 +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"}
+{"version":3,"file":"ChartBuilderRoot.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAEnC,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,WAAW,KAAK,IAAI,CAAC;IAC9D,gEAAgE;IAChE,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,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,CA+D5D,CAAC"}

package/dist/chart-builders/ChartBuilderRoot.js

@@ -1,40 +1,30 @@
 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, }) => {
+export const ChartBuilderRoot = ({ tableName, columns, onCreateChart, chartTypes, 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]);
+    // All resolved chart types are available by default
+    // (Filtering by schema compatibility was removed in favour of runtime validation)
+    const availableChartTypes = useMemo(() => chartTypes ?? [], [chartTypes]);
     useEffect(() => {
         const { selectedTemplateId, reset } = store.getState();
         if (selectedTemplateId &&
-            !availableTemplates.some((template) => template.id === selectedTemplateId)) {
+            !availableChartTypes.some((template) => template.id === selectedTemplateId)) {
             reset();
         }
-    }, [availableTemplates, store]);
+    }, [availableChartTypes, store]);
     const handleCreateChart = useCallback((title, config) => {
         onCreateChart(title, config);
         resolvedOnOpenChange(false);
@@ -43,19 +33,10 @@ export const ChartBuilderRoot = ({ tableName, columns, onCreateChart, chartTypes
         tableName,
         columns,
         onCreateChart: handleCreateChart,
-        templates: resolvedTemplates,
-        availableChartTypes,
-        availableTemplates,
+        templates: availableChartTypes,
+        availableTemplates: availableChartTypes, // TODO: why we need both templates and availableTemplates? can we remove one of them?
         store,
-    }), [
-        availableChartTypes,
-        availableTemplates,
-        columns,
-        handleCreateChart,
-        resolvedTemplates,
-        store,
-        tableName,
-    ]);
+    }), [availableChartTypes, columns, handleCreateChart, 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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilderRoot.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAc,EAEZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAwBxD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,CAAC;IACxC,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE5D,MAAM,oBAAoB,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,EACzE,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,OAAO,2BAA2B,CAAC,UAAU,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,0BAA0B,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,sBAAsB,CAAC,iBAAiB,EAAE,OAAO,CAAC,EACxD,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAC7B,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CACH,iBAAiB,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CACpC,mBAAmB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,CACtE,EACH,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CACzC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAC,kBAAkB,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QACrD,IACE,kBAAkB;YAClB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,EAC1E,CAAC;YACD,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,MAAM,iBAAiB,GACrB,WAAW,CACT,CAAC,KAAa,EAAE,MAAyB,EAAE,EAAE;QAC3C,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC7B,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,aAAa,EAAE,oBAAoB,CAAC,CACtC,CAAC;IAEJ,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS;QACT,OAAO;QACP,aAAa,EAAE,iBAAiB;QAChC,SAAS,EAAE,iBAAiB;QAC5B,mBAAmB;QACnB,kBAAkB;QAClB,KAAK;KACN,CAAC,EACF;QACE,mBAAmB;QACnB,kBAAkB;QAClB,OAAO;QACP,iBAAiB;QACjB,iBAAiB;QACjB,KAAK;QACL,SAAS;KACV,CACF,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACtC,KAAC,MAAM,IAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,oBAAoB,YAC3D,QAAQ,GACF,GACoB,CAChC,CAAC;AACJ,CAAC,CAAC","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"]}
+{"version":3,"file":"ChartBuilderRoot.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAc,EAEZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAqBlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,CAAC;IACxC,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE5D,MAAM,oBAAoB,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,EACzE,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B,CAAC;IAEF,oDAAoD;IACpD,kFAAkF;IAClF,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAC,kBAAkB,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QACrD,IACE,kBAAkB;YAClB,CAAC,mBAAmB,CAAC,IAAI,CACvB,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CACjD,EACD,CAAC;YACD,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjC,MAAM,iBAAiB,GACrB,WAAW,CACT,CAAC,KAAa,EAAE,MAAmB,EAAE,EAAE;QACrC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC7B,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,aAAa,EAAE,oBAAoB,CAAC,CACtC,CAAC;IAEJ,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS;QACT,OAAO;QACP,aAAa,EAAE,iBAAiB;QAChC,SAAS,EAAE,mBAAmB;QAC9B,kBAAkB,EAAE,mBAAmB,EAAE,sFAAsF;QAC/H,KAAK;KACN,CAAC,EACF,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC,CACpE,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACtC,KAAC,MAAM,IAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,oBAAoB,YAC3D,QAAQ,GACF,GACoB,CAChC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Dialog} from '@sqlrooms/ui';\nimport React, {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {ChartConfig} from '../chart-types';\nimport {ChartBuilderContext} from './ChartBuilderContext';\nimport {createChartBuilderStore} from './createChartBuilderStore';\nimport type {\n  ChartBuilderColumn,\n  ChartTypeDefinition,\n} from '../chart-types/base-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: ChartConfig) => void;\n  /** Optional chart types to show (defaults to an empty array) */\n  chartTypes?: ChartTypeDefinition[];\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  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  // All resolved chart types are available by default\n  // (Filtering by schema compatibility was removed in favour of runtime validation)\n  const availableChartTypes = useMemo(() => chartTypes ?? [], [chartTypes]);\n\n  useEffect(() => {\n    const {selectedTemplateId, reset} = store.getState();\n    if (\n      selectedTemplateId &&\n      !availableChartTypes.some(\n        (template) => template.id === selectedTemplateId,\n      )\n    ) {\n      reset();\n    }\n  }, [availableChartTypes, store]);\n\n  const handleCreateChart: (title: string, config: ChartConfig) => void =\n    useCallback(\n      (title: string, config: ChartConfig) => {\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: availableChartTypes,\n      availableTemplates: availableChartTypes, // TODO: why we need both templates and availableTemplates? can we remove one of them?\n      store,\n    }),\n    [availableChartTypes, columns, handleCreateChart, store, tableName],\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/ColumnSelector.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+import { TableColumn } from '@sqlrooms/db';
+export interface ColumnSelectorProps {
+    types?: string[];
+    columns?: TableColumn[];
+    value: string | undefined;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+export declare const ColumnSelector: FC<ColumnSelectorProps> & {
+    Numeric: FC<Omit<ColumnSelectorProps, "types">>;
+    Quantitative: FC<Omit<ColumnSelectorProps, "types">>;
+    Categorical: FC<Omit<ColumnSelectorProps, "types">>;
+};
+//# sourceMappingURL=ColumnSelector.d.ts.map

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

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

package/dist/chart-builders/ColumnSelector.js

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

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

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

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

@@ -0,0 +1,11 @@
+import type { FC, PropsWithChildren } from 'react';
+export type FieldProps = PropsWithChildren<{
+    label: string;
+    required?: boolean;
+}>;
+/**
+ * Layout wrapper that provides a label and grid container for horizontal
+ * arrangement of child selectors (e.g., ColumnSelector, TemporalGranularitySelector).
+ */
+export declare const Field: FC<FieldProps>;
+//# sourceMappingURL=Field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/chart-builders/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAehC,CAAC"}

package/dist/chart-builders/Field.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Layout wrapper that provides a label and grid container for horizontal
+ * arrangement of child selectors (e.g., ColumnSelector, TemporalGranularitySelector).
+ */
+export const Field = ({ label, required, children }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: "text-xs font-medium", children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx("div", { className: "grid items-end gap-2", style: { gridTemplateColumns: 'auto' }, children: children })] }));
+};
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/chart-builders/Field.tsx"],"names":[],"mappings":";AAOA;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,EAAE;IACnE,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,iBAAO,SAAS,EAAC,qBAAqB,aACnC,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,uBAAuB,kBAAS,IACvD,EACR,cACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAC,mBAAmB,EAAE,MAAM,EAAC,YAEnC,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type {FC, PropsWithChildren} from 'react';\n\nexport type FieldProps = PropsWithChildren<{\n  label: string;\n  required?: boolean;\n}>;\n\n/**\n * Layout wrapper that provides a label and grid container for horizontal\n * arrangement of child selectors (e.g., ColumnSelector, TemporalGranularitySelector).\n */\nexport const Field: FC<FieldProps> = ({label, required, children}) => {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <label className=\"text-xs font-medium\">\n        {label}\n        {required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\n      <div\n        className=\"grid items-end gap-2\"\n        style={{gridTemplateColumns: 'auto'}}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"]}