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

package/dist/chart-builders/ChartBuilderActions.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from '@sqlrooms/ui';
+import { useCallback, useMemo } from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+import { buildChartTypeTitle, canCreateChartFromType } from './chartTypeUtils';
+export const ChartBuilderActions = ({ className, }) => {
+    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);
+    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: handleCreateChart, disabled: !canCreate, children: "Create" })] }));
+};
+//# sourceMappingURL=ChartBuilderActions.js.map

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

@@ -0,0 +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,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,26 +1,26 @@
-import type { Spec } from '@uwdata/mosaic-spec';
 import React from 'react';
-import { ChartBuilderColumn, ChartBuilderTemplate } from './types';
-export interface ChartBuilderContentProps {
+import type { ChartConfig } from '../chart-types';
+import { type ChartBuilderRootProps } from './ChartBuilderRoot';
+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: (spec: Spec, title: string) => void;
-    /** Custom builders (defaults to all built-in builders) */
-    builders?: ChartBuilderTemplate[];
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    /** Optional chart types to show (defaults to all registered types) */
+    chartTypes?: ChartTypeDefinition[];
     /** Custom class name */
     className?: string;
-}
+};
+export type ChartBuilderContentProps = Partial<Omit<ChartBuilderRootProps, 'children'>> & Pick<StandaloneChartBuilderContentProps, 'className'>;
 /**
  * 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 declare const ChartBuilderContent: React.FC<ChartBuilderContentProps>;
+export {};
 //# sourceMappingURL=ChartBuilderContent.d.ts.map

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,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACvC,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;IAClC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4GlE,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

@@ -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;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,11 +1,15 @@
-import type { Spec } from '@uwdata/mosaic-spec';
-import type { ChartBuilderColumn, ChartBuilderTemplate } from './types';
+import type { ChartConfig } from '../chart-types';
+import type { ChartBuilderStore, ChartBuilderStoreState } from './createChartBuilderStore';
+import type { ChartBuilderColumn, ChartTypeDefinition } from '../chart-types/base-types';
 export type ChartBuilderContextValue = {
     tableName: string;
     columns: ChartBuilderColumn[];
-    onCreateChart: (spec: Spec, title: string) => void;
-    builders?: ChartBuilderTemplate[];
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    templates: ChartTypeDefinition[];
+    availableTemplates: ChartTypeDefinition[];
+    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,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

@@ -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;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,6 +1,21 @@
-import type { Spec } from '@uwdata/mosaic-spec';
-import React from 'react';
-import { ChartBuilderColumn, ChartBuilderTemplate } from './types';
+import { type ButtonProps } from '@sqlrooms/ui';
+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 type ChartBuilderDialogContentProps = PropsWithChildren<{
+    /** Override dialog title (default "Add Chart") */
+    title?: string;
+    /** Override dialog description */
+    description?: string;
+    className?: string;
+}>;
+/**
+ * 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 +26,20 @@ 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) */
-    builders?: ChartBuilderTemplate[];
+    onCreateChart: (title: string, config: ChartConfig) => void;
+    /** Optional chart types to show (defaults to all registered types) */
+    chartTypes?: ChartTypeDefinition[];
 }
 /**
- * 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,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

@@ -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, }) => (_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,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,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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface ChartBuilderFieldsProps {
+    className?: string;
+}
+export declare const ChartBuilderFields: 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,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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import { useCallback, useMemo } from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+import { ChartSettingsProvider } from '../chart/chart-settings/ChartSettingsContext';
+export const ChartBuilderFields = ({ className, }) => {
+    const { columns, templates } = useChartBuilderContext();
+    const chartTypeDefinitionId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const fieldValues = useChartBuilderStore((state) => state.fieldValues);
+    const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);
+    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;
+    }
+    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

@@ -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,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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+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: ChartConfig) => void;
+    /** Optional chart types to show (defaults to an empty array) */
+    chartTypes?: ChartTypeDefinition[];
+    /** 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":"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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from '@sqlrooms/ui';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { ChartBuilderContext } from './ChartBuilderContext';
+import { createChartBuilderStore } from './createChartBuilderStore';
+/**
+ * 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, 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]);
+    // 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 &&
+            !availableChartTypes.some((template) => template.id === selectedTemplateId)) {
+            reset();
+        }
+    }, [availableChartTypes, store]);
+    const handleCreateChart = useCallback((title, config) => {
+        onCreateChart(title, config);
+        resolvedOnOpenChange(false);
+    }, [onCreateChart, resolvedOnOpenChange]);
+    const ctx = useMemo(() => ({
+        tableName,
+        columns,
+        onCreateChart: handleCreateChart,
+        templates: availableChartTypes,
+        availableTemplates: availableChartTypes, // TODO: why we need both templates and availableTemplates? can we remove one of them?
+        store,
+    }), [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

@@ -0,0 +1 @@
+{"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/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