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

package/dist/dashboard/chart-settings/ChartSettings.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chart settings compound component for configuring chart types and their parameters.
+ *
+ * @example
+ * ```tsx
+ * <ChartSettings.Root
+ *   tableName={tableName}
+ *   config={config}
+ *   columns={columns}
+ *   onChange={handleChange}
+ * >
+ *   <ChartSettings.TypeSelector />
+ *   <ChartSettings.Fields />
+ * </ChartSettings.Root>
+ * ```
+ */
+import { useCallback, useMemo } from 'react';
+import { DynamicChartSettings } from './DynamicChartSettings';
+import { ChartTypeSelector } from './ChartTypeSelector';
+import { ChartSettingsProvider, useChartSettingsContext, } from './ChartSettingsContext';
+import { generateMosaicChartSpec } from '../generateMosaicChartSpec';
+import { getChartTypeDefinition } from '../../chart-types/registry';
+import { Button } from '@sqlrooms/ui';
+import { XIcon } from 'lucide-react';
+const ChartSettingsRoot = ({ tableName, config, columns, onChange, children, }) => {
+    return (_jsx(ChartSettingsProvider, { tableName: tableName, config: config, columns: columns, onChange: onChange, children: children }));
+};
+const ChartSettingsHeader = ({ children, onClose, }) => {
+    return (_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium", children: [children, onClose && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-5 w-5", onClick: onClose, children: _jsx(XIcon, { className: "h-3.5 w-3.5" }) }))] }));
+};
+const ChartSettingsContent = ({ children }) => {
+    return _jsx("div", { className: "flex flex-col gap-2 p-2", children: children });
+};
+const ChartSettingsTypeSelector = () => {
+    const { config, columns, onChange } = useChartSettingsContext();
+    const handleChartTypeChange = (newChartType) => {
+        // When changing chart type, clear settings and don't show chart
+        // until user selects all required fields
+        onChange({
+            chartType: newChartType,
+            settings: {},
+            vgplot: null,
+            settingsOpen: config.settingsOpen,
+        });
+    };
+    return (_jsx(ChartTypeSelector, { value: config.chartType, columns: columns, onChange: handleChartTypeChange }));
+};
+const ChartSettingsFields = () => {
+    const { tableName, config, columns, onChange } = useChartSettingsContext();
+    const chartTypeDef = getChartTypeDefinition(config.chartType);
+    // Memoize columns mapping
+    const mappedColumns = useMemo(() => columns.map((col) => ({ name: col.name, type: col.type })), [columns]);
+    const handleSettingsChange = useCallback((newSettings) => {
+        if (!chartTypeDef)
+            return;
+        // Check if all required fields are filled
+        const allRequiredFieldsFilled = chartTypeDef.fields
+            .filter((field) => field.required !== false)
+            .every((field) => {
+            const value = newSettings[field.key];
+            return value !== undefined && value !== null && value !== '';
+        });
+        // Generate spec
+        const vgplot = allRequiredFieldsFilled
+            ? generateMosaicChartSpec(tableName, config.chartType, newSettings)
+            : null;
+        onChange({
+            ...config,
+            settings: newSettings,
+            vgplot,
+        });
+    }, [chartTypeDef, config, onChange, tableName]);
+    if (!chartTypeDef) {
+        console.error(`[ChartSettings] Unknown chart type: ${config.chartType}`);
+        return (_jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: ["Unknown chart type: ", config.chartType] }));
+    }
+    if (columns.length === 0) {
+        return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "No columns available" }));
+    }
+    return (_jsx(DynamicChartSettings, { chartTypeDefinition: chartTypeDef, columns: mappedColumns, values: config.settings, onChange: handleSettingsChange }));
+};
+export const ChartSettings = {
+    Root: ChartSettingsRoot,
+    Header: ChartSettingsHeader,
+    Content: ChartSettingsContent,
+    TypeSelector: ChartSettingsTypeSelector,
+    Fields: ChartSettingsFields,
+};
+//# sourceMappingURL=ChartSettings.js.map

package/dist/dashboard/chart-settings/ChartSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSettings.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Chart settings compound component for configuring chart types and their parameters.\n *\n * @example\n * ```tsx\n * <ChartSettings.Root\n *   tableName={tableName}\n *   config={config}\n *   columns={columns}\n *   onChange={handleChange}\n * >\n *   <ChartSettings.TypeSelector />\n *   <ChartSettings.Fields />\n * </ChartSettings.Root>\n * ```\n */\nimport {type FC, type PropsWithChildren, useCallback, useMemo} from 'react';\nimport {DynamicChartSettings} from './DynamicChartSettings';\nimport {ChartTypeSelector} from './ChartTypeSelector';\nimport {\n  ChartSettingsProvider,\n  useChartSettingsContext,\n} from './ChartSettingsContext';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport {type VgPlotChartConfig, type VgPlotChartType} from '../../chart-types';\nimport {generateMosaicChartSpec} from '../generateMosaicChartSpec';\nimport {getChartTypeDefinition} from '../../chart-types/registry';\nimport {Button} from '@sqlrooms/ui';\nimport {XIcon} from 'lucide-react';\n\ninterface ChartSettingsRootProps {\n  tableName?: string;\n  config: VgPlotChartConfig;\n  columns: TableColumn[];\n  onChange: (config: VgPlotChartConfig) => void;\n}\n\nconst ChartSettingsRoot: FC<PropsWithChildren<ChartSettingsRootProps>> = ({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}) => {\n  return (\n    <ChartSettingsProvider\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={onChange}\n    >\n      {children}\n    </ChartSettingsProvider>\n  );\n};\n\ntype ChartSettingsHeaderProps = PropsWithChildren<{\n  onClose?: () => void;\n}>;\n\nconst ChartSettingsHeader: FC<ChartSettingsHeaderProps> = ({\n  children,\n  onClose,\n}) => {\n  return (\n    <div className=\"flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium\">\n      {children}\n      {onClose && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-5 w-5\"\n          onClick={onClose}\n        >\n          <XIcon className=\"h-3.5 w-3.5\" />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nconst ChartSettingsContent: FC<PropsWithChildren> = ({children}) => {\n  return <div className=\"flex flex-col gap-2 p-2\">{children}</div>;\n};\n\nconst ChartSettingsTypeSelector: FC = () => {\n  const {config, columns, onChange} = useChartSettingsContext();\n\n  const handleChartTypeChange = (newChartType: VgPlotChartType) => {\n    // When changing chart type, clear settings and don't show chart\n    // until user selects all required fields\n    onChange({\n      chartType: newChartType,\n      settings: {},\n      vgplot: null,\n      settingsOpen: config.settingsOpen,\n    });\n  };\n\n  return (\n    <ChartTypeSelector\n      value={config.chartType}\n      columns={columns}\n      onChange={handleChartTypeChange}\n    />\n  );\n};\n\nconst ChartSettingsFields: FC = () => {\n  const {tableName, config, columns, onChange} = useChartSettingsContext();\n  const chartTypeDef = getChartTypeDefinition(config.chartType);\n\n  // Memoize columns mapping\n  const mappedColumns = useMemo(\n    () => columns.map((col) => ({name: col.name, type: col.type})),\n    [columns],\n  );\n\n  const handleSettingsChange = useCallback(\n    (newSettings: Record<string, unknown>) => {\n      if (!chartTypeDef) return;\n\n      // Check if all required fields are filled\n      const allRequiredFieldsFilled = chartTypeDef.fields\n        .filter((field) => field.required !== false)\n        .every((field) => {\n          const value = newSettings[field.key];\n          return value !== undefined && value !== null && value !== '';\n        });\n\n      // Generate spec\n      const vgplot = allRequiredFieldsFilled\n        ? generateMosaicChartSpec(tableName, config.chartType, newSettings)\n        : null;\n\n      onChange({\n        ...config,\n        settings: newSettings,\n        vgplot,\n      });\n    },\n    [chartTypeDef, config, onChange, tableName],\n  );\n\n  if (!chartTypeDef) {\n    console.error(`[ChartSettings] Unknown chart type: ${config.chartType}`);\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n        Unknown chart type: {config.chartType}\n      </div>\n    );\n  }\n\n  if (columns.length === 0) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n        No columns available\n      </div>\n    );\n  }\n\n  return (\n    <DynamicChartSettings\n      chartTypeDefinition={chartTypeDef}\n      columns={mappedColumns}\n      values={config.settings}\n      onChange={handleSettingsChange}\n    />\n  );\n};\n\nexport const ChartSettings = {\n  Root: ChartSettingsRoot,\n  Header: ChartSettingsHeader,\n  Content: ChartSettingsContent,\n  TypeSelector: ChartSettingsTypeSelector,\n  Fields: ChartSettingsFields,\n};\n"]}

package/dist/dashboard/chart-settings/ChartSettingsContext.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { TableColumn } from '@sqlrooms/duckdb';
+import type { VgPlotChartConfig } from '../../chart-types';
+interface ChartSettingsContextValue {
+    tableName?: string;
+    config: VgPlotChartConfig;
+    columns: TableColumn[];
+    onChange: (config: VgPlotChartConfig) => void;
+}
+export declare function useChartSettingsContext(): ChartSettingsContextValue;
+interface ChartSettingsProviderProps {
+    tableName?: string;
+    config: VgPlotChartConfig;
+    columns: TableColumn[];
+    onChange: (config: VgPlotChartConfig) => void;
+    children: ReactNode;
+}
+export declare function ChartSettingsProvider({ tableName, config, columns, onChange, children, }: ChartSettingsProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartSettingsContext.d.ts.map

package/dist/dashboard/chart-settings/ChartSettingsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSettingsContext.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEzD,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAMD,wBAAgB,uBAAuB,8BAQtC;AAED,UAAU,0BAA0B;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CAQ5B"}

package/dist/dashboard/chart-settings/ChartSettingsContext.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ChartSettingsContext = createContext(null);
+export function useChartSettingsContext() {
+    const context = useContext(ChartSettingsContext);
+    if (!context) {
+        throw new Error('ChartSettings compound components must be used within ChartSettings.Root');
+    }
+    return context;
+}
+export function ChartSettingsProvider({ tableName, config, columns, onChange, children, }) {
+    return (_jsx(ChartSettingsContext.Provider, { value: { tableName, config, columns, onChange }, children: children }));
+}
+//# sourceMappingURL=ChartSettingsContext.js.map

package/dist/dashboard/chart-settings/ChartSettingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSettingsContext.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartSettingsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAkB,UAAU,EAAC,MAAM,OAAO,CAAC;AAWhE,MAAM,oBAAoB,GAAG,aAAa,CACxC,IAAI,CACL,CAAC;AAEF,MAAM,UAAU,uBAAuB;IACrC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,0EAA0E,CAC3E,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAUD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACmB;IAC3B,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAC,YAE5C,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC","sourcesContent":["import {createContext, type ReactNode, useContext} from 'react';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport type {VgPlotChartConfig} from '../../chart-types';\n\ninterface ChartSettingsContextValue {\n  tableName?: string;\n  config: VgPlotChartConfig;\n  columns: TableColumn[];\n  onChange: (config: VgPlotChartConfig) => void;\n}\n\nconst ChartSettingsContext = createContext<ChartSettingsContextValue | null>(\n  null,\n);\n\nexport function useChartSettingsContext() {\n  const context = useContext(ChartSettingsContext);\n  if (!context) {\n    throw new Error(\n      'ChartSettings compound components must be used within ChartSettings.Root',\n    );\n  }\n  return context;\n}\n\ninterface ChartSettingsProviderProps {\n  tableName?: string;\n  config: VgPlotChartConfig;\n  columns: TableColumn[];\n  onChange: (config: VgPlotChartConfig) => void;\n  children: ReactNode;\n}\n\nexport function ChartSettingsProvider({\n  tableName,\n  config,\n  columns,\n  onChange,\n  children,\n}: ChartSettingsProviderProps) {\n  return (\n    <ChartSettingsContext.Provider\n      value={{tableName, config, columns, onChange}}\n    >\n      {children}\n    </ChartSettingsContext.Provider>\n  );\n}\n"]}

package/dist/dashboard/chart-settings/ChartSettingsPanel.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { VgPlotChartConfig } from '../../chart-types';
+interface ChartSettingsPanelProps {
+    tableName?: string;
+    config: VgPlotChartConfig;
+    onChange: (settings: VgPlotChartConfig) => void;
+    onClose?: () => void;
+}
+export declare const ChartSettingsPanel: FC<ChartSettingsPanelProps>;
+export {};
+//# sourceMappingURL=ChartSettingsPanel.d.ts.map

package/dist/dashboard/chart-settings/ChartSettingsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAGpD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAwB1D,CAAC"}

package/dist/dashboard/chart-settings/ChartSettingsPanel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartSettings } from './ChartSettings';
+import { useTableColumns } from './useTableColumns';
+export const ChartSettingsPanel = ({ tableName, config, onChange, onClose, }) => {
+    const columns = useTableColumns(tableName);
+    return (_jsxs(ChartSettings.Root, { tableName: tableName, config: config, columns: columns, onChange: onChange, children: [_jsx(ChartSettings.Header, { onClose: onClose, children: "Chart settings" }), _jsxs(ChartSettings.Content, { children: [_jsx(ChartSettings.TypeSelector, {}), _jsx(ChartSettings.Fields, {})] })] }));
+};
+//# sourceMappingURL=ChartSettingsPanel.js.map

package/dist/dashboard/chart-settings/ChartSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSettingsPanel.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartSettingsPanel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AASlD,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC9D,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,GACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE3C,OAAO,CACL,MAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAElB,KAAC,aAAa,CAAC,MAAM,IAAC,OAAO,EAAE,OAAO,+BAEf,EACvB,MAAC,aAAa,CAAC,OAAO,eACpB,KAAC,aAAa,CAAC,YAAY,KAAG,EAC9B,KAAC,aAAa,CAAC,MAAM,KAAG,IACF,IACL,CACtB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC} from 'react';\nimport {ChartSettings} from './ChartSettings';\nimport {VgPlotChartConfig} from '../../chart-types';\nimport {useTableColumns} from './useTableColumns';\n\ninterface ChartSettingsPanelProps {\n  tableName?: string;\n  config: VgPlotChartConfig;\n  onChange: (settings: VgPlotChartConfig) => void;\n  onClose?: () => void;\n}\n\nexport const ChartSettingsPanel: FC<ChartSettingsPanelProps> = ({\n  tableName,\n  config,\n  onChange,\n  onClose,\n}) => {\n  const columns = useTableColumns(tableName);\n\n  return (\n    <ChartSettings.Root\n      tableName={tableName}\n      config={config}\n      columns={columns}\n      onChange={onChange}\n    >\n      <ChartSettings.Header onClose={onClose}>\n        Chart settings\n      </ChartSettings.Header>\n      <ChartSettings.Content>\n        <ChartSettings.TypeSelector />\n        <ChartSettings.Fields />\n      </ChartSettings.Content>\n    </ChartSettings.Root>\n  );\n};\n"]}

package/dist/dashboard/chart-settings/ChartTypeSelector.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import type { TableColumn } from '@sqlrooms/duckdb';
+import { VgPlotChartType } from '../../chart-types';
+interface ChartTypeSelectorProps {
+    value: VgPlotChartType;
+    columns: TableColumn[];
+    onChange: (chartType: VgPlotChartType) => void;
+}
+export declare const ChartTypeSelector: FC<ChartTypeSelectorProps>;
+export {};
+//# sourceMappingURL=ChartTypeSelector.d.ts.map

package/dist/dashboard/chart-settings/ChartTypeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAgB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAC,eAAe,EAA0B,MAAM,mBAAmB,CAAC;AAG3E,UAAU,sBAAsB;IAC9B,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAuDxD,CAAC"}

package/dist/dashboard/chart-settings/ChartTypeSelector.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { isChartTypeAvailable } from '../../chart-builders/chartTypeUtils';
+import { createChartBuilderTemplates } from '../../chart-builders/builders';
+import { createDefaultChartTypes } from '../../chart-types';
+import { useStoreWithMosaicDashboard } from '../MosaicDashboardSlice';
+export const ChartTypeSelector = memo(({ value, columns, onChange }) => {
+    const chartTypesFromStore = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
+    const chartTypes = useMemo(() => chartTypesFromStore || createDefaultChartTypes(), [chartTypesFromStore]);
+    const templates = useMemo(() => createChartBuilderTemplates(chartTypes), [chartTypes]);
+    const availableTemplates = useMemo(() => templates.filter((template) => isChartTypeAvailable(template, columns)), [columns, templates]);
+    const selectedTemplate = useMemo(() => availableTemplates.find((template) => template.id === value), [availableTemplates, value]);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs", children: "Chart Type" }), _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: selectedTemplate ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(selectedTemplate.icon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: selectedTemplate.label })] })) : (_jsx(SelectValue, { placeholder: "Select chart type" })) }), _jsx(SelectContent, { className: "text-xs", children: availableTemplates.map((template) => (_jsx(SelectItem, { value: template.id, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(template.icon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: template.label })] }) }, template.id))) })] })] }));
+});
+ChartTypeSelector.displayName = 'ChartTypeSelector';
+//# sourceMappingURL=ChartTypeSelector.js.map

package/dist/dashboard/chart-settings/ChartTypeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTypeSelector.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/ChartTypeSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,KAAK,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAkB,uBAAuB,EAAC,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAC,2BAA2B,EAAC,MAAM,yBAAyB,CAAC;AAQpE,MAAM,CAAC,MAAM,iBAAiB,GAA+B,IAAI,CAC/D,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC7B,MAAM,mBAAmB,GAAG,2BAA2B,CACrD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,mBAAmB,IAAI,uBAAuB,EAAE,EACtD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,2BAA2B,CAAC,UAAU,CAAC,EAC7C,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CACH,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,EACzE,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,EAClE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAC5B,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACxB,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,2BAAmB,EAC7C,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC3C,KAAC,aAAa,IAAC,SAAS,EAAC,aAAa,YACnC,gBAAgB,CAAC,CAAC,CAAC,CAClB,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,gBAAgB,CAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,EACjD,yBAAO,gBAAgB,CAAC,KAAK,GAAQ,IACjC,CACP,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,WAAW,EAAC,mBAAmB,GAAG,CAChD,GACa,EAChB,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,YAC/B,kBAAkB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAmB,KAAK,EAAE,QAAQ,CAAC,EAAE,YAC9C,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,QAAQ,CAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,EACzC,yBAAO,QAAQ,CAAC,KAAK,GAAQ,IACzB,IAJS,QAAQ,CAAC,EAAE,CAKf,CACd,CAAC,GACY,IACT,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import {type FC, memo, useMemo} from 'react';\nimport {\n  Label,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport type {TableColumn} from '@sqlrooms/duckdb';\nimport {isChartTypeAvailable} from '../../chart-builders/chartTypeUtils';\nimport {createChartBuilderTemplates} from '../../chart-builders/builders';\nimport {VgPlotChartType, createDefaultChartTypes} from '../../chart-types';\nimport {useStoreWithMosaicDashboard} from '../MosaicDashboardSlice';\n\ninterface ChartTypeSelectorProps {\n  value: VgPlotChartType;\n  columns: TableColumn[];\n  onChange: (chartType: VgPlotChartType) => void;\n}\n\nexport const ChartTypeSelector: FC<ChartTypeSelectorProps> = memo(\n  ({value, columns, onChange}) => {\n    const chartTypesFromStore = useStoreWithMosaicDashboard(\n      (state) => state.mosaicDashboard.chartTypes,\n    );\n\n    const chartTypes = useMemo(\n      () => chartTypesFromStore || createDefaultChartTypes(),\n      [chartTypesFromStore],\n    );\n\n    const templates = useMemo(\n      () => createChartBuilderTemplates(chartTypes),\n      [chartTypes],\n    );\n\n    const availableTemplates = useMemo(\n      () =>\n        templates.filter((template) => isChartTypeAvailable(template, columns)),\n      [columns, templates],\n    );\n\n    const selectedTemplate = useMemo(\n      () => availableTemplates.find((template) => template.id === value),\n      [availableTemplates, value],\n    );\n\n    return (\n      <div className=\"space-y-2\">\n        <Label className=\"text-xs\">Chart Type</Label>\n        <Select value={value} onValueChange={onChange}>\n          <SelectTrigger className=\"h-8 text-xs\">\n            {selectedTemplate ? (\n              <div className=\"flex items-center gap-2\">\n                <selectedTemplate.icon className=\"h-3.5 w-3.5\" />\n                <span>{selectedTemplate.label}</span>\n              </div>\n            ) : (\n              <SelectValue placeholder=\"Select chart type\" />\n            )}\n          </SelectTrigger>\n          <SelectContent className=\"text-xs\">\n            {availableTemplates.map((template) => (\n              <SelectItem key={template.id} value={template.id}>\n                <div className=\"flex items-center gap-2\">\n                  <template.icon className=\"h-3.5 w-3.5\" />\n                  <span>{template.label}</span>\n                </div>\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  },\n);\n\nChartTypeSelector.displayName = 'ChartTypeSelector';\n"]}

package/dist/dashboard/chart-settings/DynamicChartSettings.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import type { ChartTypeDefinition, ChartBuilderColumn } from '../../chart-builders/types';
+interface DynamicChartSettingsProps {
+    chartTypeDefinition: ChartTypeDefinition;
+    columns: ChartBuilderColumn[];
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+}
+export declare const DynamicChartSettings: FC<DynamicChartSettingsProps>;
+export {};
+//# sourceMappingURL=DynamicChartSettings.d.ts.map

package/dist/dashboard/chart-settings/DynamicChartSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicChartSettings.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/DynamicChartSettings.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAO,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAEpC,UAAU,yBAAyB;IACjC,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAgC9D,CAAC"}

package/dist/dashboard/chart-settings/DynamicChartSettings.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useChartFieldForm } from '../../chart-builders/hooks/useChartFieldForm';
+import { FieldSelectorInput } from '../../chart-builders/FieldSelectorInput';
+export const DynamicChartSettings = memo(({ chartTypeDefinition, columns, values, onChange }) => {
+    const { fields, handleFieldChange } = useChartFieldForm({
+        fields: chartTypeDefinition.fields,
+        values,
+        onChange: (key, value) => {
+            onChange({ ...values, [key]: value });
+        },
+    });
+    if (fields.length === 0) {
+        return (_jsx("div", { className: "text-muted-foreground text-sm", children: "No settings available for this chart type" }));
+    }
+    return (_jsx("div", { className: "space-y-4", children: fields.map((field) => (_jsx(FieldSelectorInput, { field: field, columns: columns, value: values[field.key], onChange: (value) => handleFieldChange(field.key, value) }, field.key))) }));
+});
+DynamicChartSettings.displayName = 'DynamicChartSettings';
+//# sourceMappingURL=DynamicChartSettings.js.map

package/dist/dashboard/chart-settings/DynamicChartSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicChartSettings.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/DynamicChartSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAC;AAa3E,MAAM,CAAC,MAAM,oBAAoB,GAAkC,IAAI,CACrE,CAAC,EAAC,mBAAmB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,EAAE;IACnD,MAAM,EAAC,MAAM,EAAE,iBAAiB,EAAC,GAAG,iBAAiB,CAAC;QACpD,MAAM,EAAE,mBAAmB,CAAC,MAAM;QAClC,MAAM;QACN,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACvB,QAAQ,CAAC,EAAC,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAC,CAAC,CAAC;QACtC,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,cAAK,SAAS,EAAC,+BAA+B,0DAExC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACvB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,kBAAkB,IAEjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAW,EAClC,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,CACF,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC","sourcesContent":["import {type FC, memo} from 'react';\nimport {useChartFieldForm} from '../../chart-builders/hooks/useChartFieldForm';\nimport {FieldSelectorInput} from '../../chart-builders/FieldSelectorInput';\nimport type {\n  ChartTypeDefinition,\n  ChartBuilderColumn,\n} from '../../chart-builders/types';\n\ninterface DynamicChartSettingsProps {\n  chartTypeDefinition: ChartTypeDefinition;\n  columns: ChartBuilderColumn[];\n  values: Record<string, unknown>;\n  onChange: (values: Record<string, unknown>) => void;\n}\n\nexport const DynamicChartSettings: FC<DynamicChartSettingsProps> = memo(\n  ({chartTypeDefinition, columns, values, onChange}) => {\n    const {fields, handleFieldChange} = useChartFieldForm({\n      fields: chartTypeDefinition.fields,\n      values,\n      onChange: (key, value) => {\n        onChange({...values, [key]: value});\n      },\n    });\n\n    if (fields.length === 0) {\n      return (\n        <div className=\"text-muted-foreground text-sm\">\n          No settings available for this chart type\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"space-y-4\">\n        {fields.map((field) => (\n          <FieldSelectorInput\n            key={field.key}\n            field={field}\n            columns={columns}\n            value={values[field.key] as string}\n            onChange={(value) => handleFieldChange(field.key, value)}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nDynamicChartSettings.displayName = 'DynamicChartSettings';\n"]}

package/dist/dashboard/chart-settings/index.d.ts

@@ -0,0 +1,6 @@
+export { ChartSettingsPanel } from './ChartSettingsPanel';
+export { ChartSettings } from './ChartSettings';
+export { ChartTypeSelector } from './ChartTypeSelector';
+export { DynamicChartSettings } from './DynamicChartSettings';
+export { useChartSettingsContext } from './ChartSettingsContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/dashboard/chart-settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,uBAAuB,EAAC,MAAM,wBAAwB,CAAC"}

package/dist/dashboard/chart-settings/index.js

@@ -0,0 +1,6 @@
+export { ChartSettingsPanel } from './ChartSettingsPanel';
+export { ChartSettings } from './ChartSettings';
+export { ChartTypeSelector } from './ChartTypeSelector';
+export { DynamicChartSettings } from './DynamicChartSettings';
+export { useChartSettingsContext } from './ChartSettingsContext';
+//# sourceMappingURL=index.js.map

package/dist/dashboard/chart-settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,uBAAuB,EAAC,MAAM,wBAAwB,CAAC","sourcesContent":["export {ChartSettingsPanel} from './ChartSettingsPanel';\nexport {ChartSettings} from './ChartSettings';\nexport {ChartTypeSelector} from './ChartTypeSelector';\nexport {DynamicChartSettings} from './DynamicChartSettings';\nexport {useChartSettingsContext} from './ChartSettingsContext';\n"]}

package/dist/dashboard/chart-settings/useTableColumns.d.ts

@@ -0,0 +1,3 @@
+import { TableColumn } from '@sqlrooms/db';
+export declare function useTableColumns(tableName?: string): TableColumn[];
+//# sourceMappingURL=useTableColumns.d.ts.map

package/dist/dashboard/chart-settings/useTableColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumns.d.ts","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/useTableColumns.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,wBAAgB,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,EAAE,CAQjE"}

package/dist/dashboard/chart-settings/useTableColumns.js

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { useStoreWithMosaicDashboard } from '../MosaicDashboardSlice';
+export function useTableColumns(tableName) {
+    const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
+    return useMemo(() => {
+        if (!tableName)
+            return [];
+        const resolvedTable = tables.find((t) => t.table.table === tableName);
+        return resolvedTable?.columns || [];
+    }, [tableName, tables]);
+}
+//# sourceMappingURL=useTableColumns.js.map

package/dist/dashboard/chart-settings/useTableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumns.js","sourceRoot":"","sources":["../../../src/dashboard/chart-settings/useTableColumns.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,2BAA2B,EAAC,MAAM,yBAAyB,CAAC;AAGpE,MAAM,UAAU,eAAe,CAAC,SAAkB;IAChD,MAAM,MAAM,GAAG,2BAA2B,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEvE,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QACtE,OAAO,aAAa,EAAE,OAAO,IAAI,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAC1B,CAAC","sourcesContent":["import {useMemo} from 'react';\nimport {useStoreWithMosaicDashboard} from '../MosaicDashboardSlice';\nimport {TableColumn} from '@sqlrooms/db';\n\nexport function useTableColumns(tableName?: string): TableColumn[] {\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n\n  return useMemo(() => {\n    if (!tableName) return [];\n    const resolvedTable = tables.find((t) => t.table.table === tableName);\n    return resolvedTable?.columns || [];\n  }, [tableName, tables]);\n}\n"]}

package/dist/dashboard/defaultPanelRenderers.d.ts

@@ -0,0 +1,3 @@
+import { type PanelRenderersRecord } from './MosaicDashboardSlice';
+export declare function createDefaultMosaicDashboardPanelRenderers(extraRenderers?: PanelRenderersRecord): PanelRenderersRecord;
+//# sourceMappingURL=defaultPanelRenderers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPanelRenderers.d.ts","sourceRoot":"","sources":["../../src/dashboard/defaultPanelRenderers.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAIhC,wBAAgB,0CAA0C,CACxD,cAAc,GAAE,oBAAyB,GACxC,oBAAoB,CAQtB"}

package/dist/dashboard/defaultPanelRenderers.js

@@ -0,0 +1,11 @@
+import { MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE, MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE, } from './MosaicDashboardSlice';
+import { mosaicDashboardProfilerPanelRenderer } from './MosaicDashboardProfilerPanelRenderer';
+import { mosaicDashboardVgPlotPanelRenderer } from './MosaicDashboardVgPlotPanelRenderer';
+export function createDefaultMosaicDashboardPanelRenderers(extraRenderers = {}) {
+    return {
+        [MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE]: mosaicDashboardVgPlotPanelRenderer,
+        [MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE]: mosaicDashboardProfilerPanelRenderer,
+        ...extraRenderers,
+    };
+}
+//# sourceMappingURL=defaultPanelRenderers.js.map

package/dist/dashboard/defaultPanelRenderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPanelRenderers.js","sourceRoot":"","sources":["../../src/dashboard/defaultPanelRenderers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oCAAoC,EACpC,kCAAkC,GAGnC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,oCAAoC,EAAC,MAAM,wCAAwC,CAAC;AAC5F,OAAO,EAAC,kCAAkC,EAAC,MAAM,sCAAsC,CAAC;AAExF,MAAM,UAAU,0CAA0C,CACxD,iBAAuC,EAAE;IAEzC,OAAO;QACL,CAAC,kCAAkC,CAAC,EAClC,kCAAsD;QACxD,CAAC,oCAAoC,CAAC,EACpC,oCAAwD;QAC1D,GAAG,cAAc;KAClB,CAAC;AACJ,CAAC","sourcesContent":["import {\n  MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,\n  MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE,\n  type AnyPanelRenderer,\n  type PanelRenderersRecord,\n} from './MosaicDashboardSlice';\nimport {mosaicDashboardProfilerPanelRenderer} from './MosaicDashboardProfilerPanelRenderer';\nimport {mosaicDashboardVgPlotPanelRenderer} from './MosaicDashboardVgPlotPanelRenderer';\n\nexport function createDefaultMosaicDashboardPanelRenderers(\n  extraRenderers: PanelRenderersRecord = {},\n): PanelRenderersRecord {\n  return {\n    [MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE]:\n      mosaicDashboardVgPlotPanelRenderer as AnyPanelRenderer,\n    [MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE]:\n      mosaicDashboardProfilerPanelRenderer as AnyPanelRenderer,\n    ...extraRenderers,\n  };\n}\n"]}

package/dist/dashboard/generateMosaicChartSpec.d.ts

@@ -0,0 +1,15 @@
+import type { Spec } from '@uwdata/mosaic-spec';
+import { type VgPlotChartSettings, type VgPlotChartType } from '../chart-types';
+/**
+ * Generates a Mosaic chart specification from chart settings.
+ *
+ * @param tableName - The source table name. Returns null if undefined.
+ * @param chartType - The type of chart to generate (histogram, line, etc.)
+ * @param settings - Chart-specific settings matching the chart type
+ * @returns A Mosaic Spec object or null if generation fails
+ *
+ * @example
+ * const spec = generateMosaicChartSpec('sales', 'histogram', { field: 'amount' });
+ */
+export declare function generateMosaicChartSpec(tableName: string | undefined, chartType: VgPlotChartType, settings: VgPlotChartSettings | Record<string, unknown>): Spec | null;
+//# sourceMappingURL=generateMosaicChartSpec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateMosaicChartSpec.d.ts","sourceRoot":"","sources":["../../src/dashboard/generateMosaicChartSpec.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACtD,IAAI,GAAG,IAAI,CAuBb"}

package/dist/dashboard/generateMosaicChartSpec.js

@@ -0,0 +1,30 @@
+import { mosaicChartTypes, } from '../chart-types';
+/**
+ * Generates a Mosaic chart specification from chart settings.
+ *
+ * @param tableName - The source table name. Returns null if undefined.
+ * @param chartType - The type of chart to generate (histogram, line, etc.)
+ * @param settings - Chart-specific settings matching the chart type
+ * @returns A Mosaic Spec object or null if generation fails
+ *
+ * @example
+ * const spec = generateMosaicChartSpec('sales', 'histogram', { field: 'amount' });
+ */
+export function generateMosaicChartSpec(tableName, chartType, settings) {
+    if (!tableName) {
+        return null;
+    }
+    const chartTypeDef = Object.values(mosaicChartTypes).find(({ id }) => id === chartType);
+    if (!chartTypeDef) {
+        console.error(`[generateMosaicChartSpec] Unknown chart type: ${chartType}`);
+        return null;
+    }
+    try {
+        return chartTypeDef.createSpec(tableName, settings);
+    }
+    catch (error) {
+        console.error(`[generateMosaicChartSpec] Failed to generate spec for chart type "${chartType}":`, error);
+        return null;
+    }
+}
+//# sourceMappingURL=generateMosaicChartSpec.js.map

package/dist/dashboard/generateMosaicChartSpec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateMosaicChartSpec.js","sourceRoot":"","sources":["../../src/dashboard/generateMosaicChartSpec.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,GAGjB,MAAM,gBAAgB,CAAC;AAExB;;;;;;;;;;GAUG;AACH,MAAM,UAAU,uBAAuB,CACrC,SAA6B,EAC7B,SAA0B,EAC1B,QAAuD;IAEvD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CACvD,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAC3B,CAAC;IAEF,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,CAAC,KAAK,CAAC,iDAAiD,SAAS,EAAE,CAAC,CAAC;QAC5E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CACX,qEAAqE,SAAS,IAAI,EAClF,KAAK,CACN,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC","sourcesContent":["import type {Spec} from '@uwdata/mosaic-spec';\nimport {\n  mosaicChartTypes,\n  type VgPlotChartSettings,\n  type VgPlotChartType,\n} from '../chart-types';\n\n/**\n * Generates a Mosaic chart specification from chart settings.\n *\n * @param tableName - The source table name. Returns null if undefined.\n * @param chartType - The type of chart to generate (histogram, line, etc.)\n * @param settings - Chart-specific settings matching the chart type\n * @returns A Mosaic Spec object or null if generation fails\n *\n * @example\n * const spec = generateMosaicChartSpec('sales', 'histogram', { field: 'amount' });\n */\nexport function generateMosaicChartSpec(\n  tableName: string | undefined,\n  chartType: VgPlotChartType,\n  settings: VgPlotChartSettings | Record<string, unknown>,\n): Spec | null {\n  if (!tableName) {\n    return null;\n  }\n\n  const chartTypeDef = Object.values(mosaicChartTypes).find(\n    ({id}) => id === chartType,\n  );\n\n  if (!chartTypeDef) {\n    console.error(`[generateMosaicChartSpec] Unknown chart type: ${chartType}`);\n    return null;\n  }\n\n  try {\n    return chartTypeDef.createSpec(tableName, settings);\n  } catch (error) {\n    console.error(\n      `[generateMosaicChartSpec] Failed to generate spec for chart type \"${chartType}\":`,\n      error,\n    );\n    return null;\n  }\n}\n"]}

package/dist/editor/MosaicChartContainer.d.ts

@@ -0,0 +1,51 @@
+import { Param } from '@uwdata/mosaic-core';
+import { Spec } from '@uwdata/mosaic-spec';
+import React from 'react';
+import { OnMosaicSpecChange } from './types';
+export interface MosaicChartContainerProps {
+    /**
+     * Initial Mosaic specification
+     */
+    spec: Spec | string;
+    /**
+     * Pre-defined params/selections for shared cross-filtering
+     */
+    params?: Map<string, Param<any>>;
+    /**
+     * Whether editing is enabled
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Callback when spec changes are applied
+     */
+    onSpecChange?: OnMosaicSpecChange;
+    /**
+     * Child components (Chart, SpecEditor, Actions)
+     */
+    children: React.ReactNode;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+}
+/**
+ * Container component for composable Mosaic chart editing.
+ * Provides context for child subcomponents.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container
+ *   spec={mySpec}
+ *   params={paramsMap}
+ *   editable={true}
+ *   onSpecChange={(spec) => saveSpec(spec)}
+ * >
+ *   <MosaicChart.Chart />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export declare const MosaicChartContainer: React.FC<MosaicChartContainerProps>;
+//# sourceMappingURL=MosaicChartContainer.d.ts.map

package/dist/editor/MosaicChartContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartContainer.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicChartContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AACzC,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAA2B,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAGrE,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8BpE,CAAC"}

package/dist/editor/MosaicChartContainer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import { useMemo } from 'react';
+import { MosaicEditorContext } from './MosaicEditorContext';
+import { useMosaicChartEditor } from './useMosaicChartEditor';
+/**
+ * Container component for composable Mosaic chart editing.
+ * Provides context for child subcomponents.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container
+ *   spec={mySpec}
+ *   params={paramsMap}
+ *   editable={true}
+ *   onSpecChange={(spec) => saveSpec(spec)}
+ * >
+ *   <MosaicChart.Chart />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export const MosaicChartContainer = ({ spec, params, editable = true, onSpecChange, children, className, }) => {
+    const { state, actions, canApply, hasChanges } = useMosaicChartEditor({
+        initialSpec: spec,
+        onSpecChange,
+    });
+    const contextValue = useMemo(() => ({
+        state,
+        actions,
+        editable,
+        params,
+        canApply,
+        hasChanges,
+    }), [state, actions, editable, params, canApply, hasChanges]);
+    return (_jsx(MosaicEditorContext.Provider, { value: contextValue, children: _jsx("div", { className: cn('flex flex-col gap-2', className), children: children }) }));
+};
+//# sourceMappingURL=MosaicChartContainer.js.map

package/dist/editor/MosaicChartContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartContainer.js","sourceRoot":"","sources":["../../src/editor/MosaicChartContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AA8B5D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAC,GAAG,oBAAoB,CAAC;QAClE,WAAW,EAAE,IAAI;QACjB,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,YAAY,GAA6B,OAAO,CACpD,GAAG,EAAE,CAAC,CAAC;QACL,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,UAAU;KACX,CAAC,EACF,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,CACzD,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC/C,cAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GACzC,CAChC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport {Param} from '@uwdata/mosaic-core';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport React, {useMemo} from 'react';\nimport {MosaicEditorContext} from './MosaicEditorContext';\nimport {MosaicEditorContextValue, OnMosaicSpecChange} from './types';\nimport {useMosaicChartEditor} from './useMosaicChartEditor';\n\nexport interface MosaicChartContainerProps {\n  /**\n   * Initial Mosaic specification\n   */\n  spec: Spec | string;\n  /**\n   * Pre-defined params/selections for shared cross-filtering\n   */\n  params?: Map<string, Param<any>>;\n  /**\n   * Whether editing is enabled\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * Callback when spec changes are applied\n   */\n  onSpecChange?: OnMosaicSpecChange;\n  /**\n   * Child components (Chart, SpecEditor, Actions)\n   */\n  children: React.ReactNode;\n  /**\n   * Custom class name for the container\n   */\n  className?: string;\n}\n\n/**\n * Container component for composable Mosaic chart editing.\n * Provides context for child subcomponents.\n *\n * @example\n * ```tsx\n * <MosaicChart.Container\n *   spec={mySpec}\n *   params={paramsMap}\n *   editable={true}\n *   onSpecChange={(spec) => saveSpec(spec)}\n * >\n *   <MosaicChart.Chart />\n *   <MosaicChart.SpecEditor />\n *   <MosaicChart.Actions />\n * </MosaicChart.Container>\n * ```\n */\nexport const MosaicChartContainer: React.FC<MosaicChartContainerProps> = ({\n  spec,\n  params,\n  editable = true,\n  onSpecChange,\n  children,\n  className,\n}) => {\n  const {state, actions, canApply, hasChanges} = useMosaicChartEditor({\n    initialSpec: spec,\n    onSpecChange,\n  });\n\n  const contextValue: MosaicEditorContextValue = useMemo(\n    () => ({\n      state,\n      actions,\n      editable,\n      params,\n      canApply,\n      hasChanges,\n    }),\n    [state, actions, editable, params, canApply, hasChanges],\n  );\n\n  return (\n    <MosaicEditorContext.Provider value={contextValue}>\n      <div className={cn('flex flex-col gap-2', className)}>{children}</div>\n    </MosaicEditorContext.Provider>\n  );\n};\n"]}

package/dist/editor/MosaicChartDisplay.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface MosaicChartDisplayProps {
+    /**
+     * Custom class name for the chart container
+     */
+    className?: string;
+}
+/**
+ * Chart display subcomponent for MosaicChart.Container.
+ * Renders the VgPlotChart with the current spec from editor context.
+ *
+ * Uses the last valid spec for rendering, so the chart keeps
+ * displaying even during typing with invalid JSON.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export declare const MosaicChartDisplay: React.FC<MosaicChartDisplayProps>;
+//# sourceMappingURL=MosaicChartDisplay.d.ts.map

package/dist/editor/MosaicChartDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicChartDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoBhE,CAAC"}

package/dist/editor/MosaicChartDisplay.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import React, { useMemo } from 'react';
+import { VgPlotChart } from '../VgPlotChart';
+import { useMosaicEditorContext } from './MosaicEditorContext';
+const DEFAULT_CHART_HEIGHT = 200;
+/**
+ * Chart display subcomponent for MosaicChart.Container.
+ * Renders the VgPlotChart with the current spec from editor context.
+ *
+ * Uses the last valid spec for rendering, so the chart keeps
+ * displaying even during typing with invalid JSON.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export const MosaicChartDisplay = React.memo(({ className }) => {
+    const { state, params } = useMosaicEditorContext();
+    const spec = useMemo(() => state.parsedSpec ?? state.lastValidSpec, [state.parsedSpec, state.lastValidSpec]);
+    const height = useMemo(() => {
+        const h = spec && typeof spec === 'object' ? spec.height : null;
+        return typeof h === 'number' && h > 0 ? h : DEFAULT_CHART_HEIGHT;
+    }, [spec]);
+    return (_jsx("div", { className: cn('relative', className), style: { height }, children: _jsx(VgPlotChart, { spec: spec, params: params }) }));
+});
+MosaicChartDisplay.displayName = 'MosaicChartDisplay';
+//# sourceMappingURL=MosaicChartDisplay.js.map

package/dist/editor/MosaicChartDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartDisplay.js","sourceRoot":"","sources":["../../src/editor/MosaicChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAS7D,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAEjC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,KAAK,CAAC,IAAI,CAC7E,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE;IACd,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,sBAAsB,EAAE,CAAC;IAEjD,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,EAC7C,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CACxC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,MAAM,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAE,IAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QACzE,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC;IACnE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,MAAM,EAAC,YACxD,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GACvC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React, {useMemo} from 'react';\nimport {VgPlotChart} from '../VgPlotChart';\nimport {useMosaicEditorContext} from './MosaicEditorContext';\n\nexport interface MosaicChartDisplayProps {\n  /**\n   * Custom class name for the chart container\n   */\n  className?: string;\n}\n\nconst DEFAULT_CHART_HEIGHT = 200;\n\n/**\n * Chart display subcomponent for MosaicChart.Container.\n * Renders the VgPlotChart with the current spec from editor context.\n *\n * Uses the last valid spec for rendering, so the chart keeps\n * displaying even during typing with invalid JSON.\n *\n * Must be used within a MosaicChart.Container component.\n */\nexport const MosaicChartDisplay: React.FC<MosaicChartDisplayProps> = React.memo(\n  ({className}) => {\n    const {state, params} = useMosaicEditorContext();\n\n    const spec = useMemo(\n      () => state.parsedSpec ?? state.lastValidSpec,\n      [state.parsedSpec, state.lastValidSpec],\n    );\n\n    const height = useMemo(() => {\n      const h = spec && typeof spec === 'object' ? (spec as any).height : null;\n      return typeof h === 'number' && h > 0 ? h : DEFAULT_CHART_HEIGHT;\n    }, [spec]);\n\n    return (\n      <div className={cn('relative', className)} style={{height}}>\n        <VgPlotChart spec={spec} params={params} />\n      </div>\n    );\n  },\n);\n\nMosaicChartDisplay.displayName = 'MosaicChartDisplay';\n"]}