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

package/dist/charts/MosaicChartView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartView.js","sourceRoot":"","sources":["../../src/charts/MosaicChartView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SpinnerPane, cn} from '@sqlrooms/ui';\nimport {type FC, createElement, useMemo} from 'react';\nimport {VgPlotChart} from '../VgPlotChart';\nimport type {ChartRuntimeIssueContext} from '../chart-runtime';\nimport type {ChartConfig} from './chart-types/chart-config';\nimport {useStoreWithMosaicDashboard} from '../dashboard/MosaicDashboardSlice';\nimport {MosaicChartRuntimeIssuePanel} from './MosaicChartRuntimeIssuePanel';\nimport {MosaicChartError} from './MosaicChartError';\nimport {useBrushSelectionParams} from './useBrushSelectionParams';\nimport {useChartDataPolicy} from './useChartDataPolicy';\nimport {useChartRetainerByKey} from './useChartRetainer';\nimport {useMosaicChartRenderContext} from './useMosaicChartRenderContext';\nimport {useRuntimeIssueReporter} from './useRuntimeIssueReporter';\nimport {DataTable} from '@sqlrooms/db';\n\nexport type MosaicChartViewProps = {\n  dataTable?: DataTable;\n  config: ChartConfig;\n  selectionName?: string;\n  retentionKey?: string;\n  runtimeIssueKey?: string;\n  className?: string;\n};\n\nexport const MosaicChartView: FC<MosaicChartViewProps> = ({\n  dataTable,\n  config,\n  selectionName,\n  retentionKey,\n  runtimeIssueKey,\n  className,\n}) => {\n  const connection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.connection,\n  );\n\n  const retention = useChartRetainerByKey(retentionKey);\n  const params = useBrushSelectionParams(selectionName);\n  const dataPolicy = useChartDataPolicy(dataTable, config);\n\n  const runtimeIssueReporter = useRuntimeIssueReporter(runtimeIssueKey);\n\n  const runtimeIssueContext: ChartRuntimeIssueContext = useMemo(\n    () => ({\n      panelId: runtimeIssueKey ?? retentionKey ?? config.chartType,\n      chartType: config.chartType,\n    }),\n    [config.chartType, retentionKey, runtimeIssueKey],\n  );\n\n  const issue = useStoreWithMosaicDashboard((state) =>\n    runtimeIssueKey\n      ? state.mosaicDashboard.getPanelIssueByKey(runtimeIssueKey)\n      : undefined,\n  );\n\n  const renderContext = useMosaicChartRenderContext(dataTable, config);\n\n  if (connection.status === 'loading' || connection.status === 'idle') {\n    return <SpinnerPane className=\"h-full w-full\" />;\n  }\n\n  if (connection.status === 'error') {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center text-sm\">\n        Mosaic connection failed\n      </div>\n    );\n  }\n\n  if (issue) {\n    return <MosaicChartRuntimeIssuePanel issue={issue} />;\n  }\n\n  if (renderContext.type === 'error') {\n    return (\n      <div\n        className={cn(\n          'flex h-full flex-col items-center justify-center',\n          className,\n        )}\n      >\n        <MosaicChartError\n          title={renderContext.title}\n          message={renderContext.message}\n        />\n      </div>\n    );\n  }\n\n  if (renderContext.type === 'spec') {\n    return (\n      <div className={cn('h-full w-full', className)}>\n        <VgPlotChart\n          spec={renderContext.spec}\n          params={params}\n          retention={retention}\n          dataPolicy={dataPolicy}\n          runtimeIssueContext={runtimeIssueContext}\n          runtimeIssueReporter={runtimeIssueReporter}\n        />\n      </div>\n    );\n  }\n\n  if (renderContext.type === 'component') {\n    return (\n      <div className={cn('h-full w-full', className)}>\n        {createElement(renderContext.renderer, {\n          tableName: renderContext.dataTable.table.table,\n          config,\n          coordinator: connection.coordinator,\n          params,\n          retention,\n          dataPolicy,\n          runtimeIssueContext,\n          runtimeIssueReporter,\n        })}\n      </div>\n    );\n  }\n\n  return null;\n};\n"]}

package/dist/charts/addChartPanelAction.d.ts

@@ -0,0 +1,3 @@
+import { type MosaicDashboardAddPanelAction } from '../dashboard/action-types';
+export declare const addChartPanelAction: MosaicDashboardAddPanelAction;
+//# sourceMappingURL=addChartPanelAction.d.ts.map

package/dist/charts/addChartPanelAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addChartPanelAction.d.ts","sourceRoot":"","sources":["../../src/charts/addChartPanelAction.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,6BAA6B,EAAC,MAAM,2BAA2B,CAAC;AAM7E,eAAO,MAAM,mBAAmB,EAAE,6BAWjC,CAAC"}

package/dist/charts/addChartPanelAction.js

@@ -0,0 +1,14 @@
+import { BarChart3 } from 'lucide-react';
+import { createMosaicDashboardChartPanelConfig, MOSAIC_DASHBOARD_CHART_PANEL_TYPE, } from '../dashboard/MosaicDashboardSlice';
+export const addChartPanelAction = {
+    type: MOSAIC_DASHBOARD_CHART_PANEL_TYPE,
+    label: 'Chart',
+    icon: BarChart3,
+    isEnabled: ({ chartTypes }) => Boolean(chartTypes?.length),
+    createPanel: ({ chartTypes }) => createMosaicDashboardChartPanelConfig('New Chart', {
+        chartType: chartTypes?.[0]?.id ?? 'histogram',
+        settings: {},
+        settingsOpen: true,
+    }),
+};
+//# sourceMappingURL=addChartPanelAction.js.map

package/dist/charts/addChartPanelAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addChartPanelAction.js","sourceRoot":"","sources":["../../src/charts/addChartPanelAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EACL,qCAAqC,EACrC,iCAAiC,GAClC,MAAM,mCAAmC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAkC;IAChE,IAAI,EAAE,iCAAiC;IACvC,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,CAAC,EAAC,UAAU,EAAC,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC;IACxD,WAAW,EAAE,CAAC,EAAC,UAAU,EAAC,EAAE,EAAE,CAC5B,qCAAqC,CAAC,WAAW,EAAE;QACjD,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,WAAW;QAC7C,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,IAAI;KACnB,CAAC;CACL,CAAC","sourcesContent":["import {BarChart3} from 'lucide-react';\nimport {type MosaicDashboardAddPanelAction} from '../dashboard/action-types';\nimport {\n  createMosaicDashboardChartPanelConfig,\n  MOSAIC_DASHBOARD_CHART_PANEL_TYPE,\n} from '../dashboard/MosaicDashboardSlice';\n\nexport const addChartPanelAction: MosaicDashboardAddPanelAction = {\n  type: MOSAIC_DASHBOARD_CHART_PANEL_TYPE,\n  label: 'Chart',\n  icon: BarChart3,\n  isEnabled: ({chartTypes}) => Boolean(chartTypes?.length),\n  createPanel: ({chartTypes}) =>\n    createMosaicDashboardChartPanelConfig('New Chart', {\n      chartType: chartTypes?.[0]?.id ?? 'histogram',\n      settings: {},\n      settingsOpen: true,\n    }),\n};\n"]}

package/dist/charts/chart-settings/MosaicChartSettings.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Chart settings compound component for configuring chart types and their parameters.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChartSettings.Root
+ *   tableName={tableName}
+ *   config={config}
+ *   columns={columns}
+ *   onChange={handleChange}
+ * >
+ *   <MosaicChartSettings.TypeSelector />
+ *   <MosaicChartSettings.Fields />
+ * </MosaicChartSettings.Root>
+ * ```
+ */
+import { type FC, type PropsWithChildren } from 'react';
+import type { TableColumn } from '@sqlrooms/db';
+import { type ChartConfig } from '../chart-types';
+interface MosaicChartSettingsRootProps {
+    config: ChartConfig;
+    columns: TableColumn[];
+    onChange: (config: ChartConfig) => void;
+}
+export declare const MosaicChartSettings: {
+    readonly Root: FC<PropsWithChildren<MosaicChartSettingsRootProps>>;
+    readonly Header: FC<{
+        children?: import("react").ReactNode | undefined;
+    }>;
+    readonly Content: FC<{
+        children?: import("react").ReactNode | undefined;
+    }>;
+    readonly TypeSelector: FC;
+    readonly Fields: FC;
+    readonly ViewSpecButton: FC<{
+        onClick?: () => void;
+    }>;
+    readonly CloseButton: FC<{
+        onClick: () => void;
+    }>;
+};
+export {};
+//# sourceMappingURL=MosaicChartSettings.d.ts.map

package/dist/charts/chart-settings/MosaicChartSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettings.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,KAAK,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AAOhE,UAAU,4BAA4B;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAgHD,eAAO,MAAM,mBAAmB;;;;;;;;;;;kBAhGuB,MAAM,IAAI;;;iBAiBd,MAAM,IAAI;;CAuFnD,CAAC"}

package/dist/charts/chart-settings/MosaicChartSettings.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chart settings compound component for configuring chart types and their parameters.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChartSettings.Root
+ *   tableName={tableName}
+ *   config={config}
+ *   columns={columns}
+ *   onChange={handleChange}
+ * >
+ *   <MosaicChartSettings.TypeSelector />
+ *   <MosaicChartSettings.Fields />
+ * </MosaicChartSettings.Root>
+ * ```
+ */
+import { createElement } from 'react';
+import { MosaicChartTypeSelector } from './MosaicChartTypeSelector';
+import { MosaicChartSettingsProvider, useMosaicChartSettingsContext, } from './MosaicChartSettingsContext';
+import { Button } from '@sqlrooms/ui';
+import { CodeIcon, XIcon } from 'lucide-react';
+import { useChartTypeDefinition } from '../useChartTypeDefinition';
+import { Field } from '../../components/Field';
+import { useColumnsContext } from '../../components/ColumnsContext';
+const MosaicChartSettingsRoot = ({ config, columns, onChange, children }) => {
+    return (_jsx(MosaicChartSettingsProvider, { config: config, columns: columns, onChange: onChange, children: children }));
+};
+const MosaicChartSettingsViewSpecButton = ({ onClick, }) => {
+    return (_jsx(Button, { variant: "ghost", size: "icon", className: "h-5 w-5", onClick: onClick, title: "View spec", "aria-label": "View spec", children: _jsx(CodeIcon, { className: "h-3.5 w-3.5" }) }));
+};
+const MosaicChartSettingsCloseButton = ({ onClick, }) => {
+    return (_jsx(Button, { variant: "ghost", size: "icon", className: "h-5 w-5", onClick: onClick, "aria-label": "Close", children: _jsx(XIcon, { className: "h-3.5 w-3.5" }) }));
+};
+const MosaicChartSettingsHeader = ({ children }) => {
+    return (_jsx("div", { className: "flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium", children: children }));
+};
+const MosaicChartSettingsContent = ({ children }) => {
+    return _jsx("div", { className: "flex flex-col gap-2 p-2", children: children });
+};
+const MosaicChartSettingsTypeSelector = () => {
+    const { config, onChange } = useMosaicChartSettingsContext();
+    const handleChartTypeChange = (newChartType) => {
+        // When changing chart type, clear settings
+        onChange({
+            chartType: newChartType,
+            settings: {},
+            settingsOpen: config.settingsOpen,
+        });
+    };
+    return (_jsx(Field, { label: "Chart type", required: true, children: _jsx(MosaicChartTypeSelector, { value: config.chartType, onChange: handleChartTypeChange }) }));
+};
+const MosaicChartSettingsFields = () => {
+    const { config } = useMosaicChartSettingsContext();
+    const { columns } = useColumnsContext();
+    const chartTypeDef = useChartTypeDefinition(config.chartType);
+    if (!chartTypeDef) {
+        return (_jsx(Field, { label: "Chart type", required: true, children: _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(Field, { label: "Columns", required: true, children: _jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "No columns available" }) }));
+    }
+    return createElement(chartTypeDef.settingsComponent);
+};
+export const MosaicChartSettings = {
+    Root: MosaicChartSettingsRoot,
+    Header: MosaicChartSettingsHeader,
+    Content: MosaicChartSettingsContent,
+    TypeSelector: MosaicChartSettingsTypeSelector,
+    Fields: MosaicChartSettingsFields,
+    ViewSpecButton: MosaicChartSettingsViewSpecButton,
+    CloseButton: MosaicChartSettingsCloseButton,
+};
+//# sourceMappingURL=MosaicChartSettings.js.map

package/dist/charts/chart-settings/MosaicChartSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettings.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettings.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 * <MosaicChartSettings.Root\n *   tableName={tableName}\n *   config={config}\n *   columns={columns}\n *   onChange={handleChange}\n * >\n *   <MosaicChartSettings.TypeSelector />\n *   <MosaicChartSettings.Fields />\n * </MosaicChartSettings.Root>\n * ```\n */\nimport {type FC, type PropsWithChildren, createElement} from 'react';\nimport {MosaicChartTypeSelector} from './MosaicChartTypeSelector';\nimport {\n  MosaicChartSettingsProvider,\n  useMosaicChartSettingsContext,\n} from './MosaicChartSettingsContext';\nimport type {TableColumn} from '@sqlrooms/db';\nimport {type ChartConfig, type ChartType} from '../chart-types';\nimport {Button} from '@sqlrooms/ui';\nimport {CodeIcon, XIcon} from 'lucide-react';\nimport {useChartTypeDefinition} from '../useChartTypeDefinition';\nimport {Field} from '../../components/Field';\nimport {useColumnsContext} from '../../components/ColumnsContext';\n\ninterface MosaicChartSettingsRootProps {\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n}\n\nconst MosaicChartSettingsRoot: FC<\n  PropsWithChildren<MosaicChartSettingsRootProps>\n> = ({config, columns, onChange, children}) => {\n  return (\n    <MosaicChartSettingsProvider\n      config={config}\n      columns={columns}\n      onChange={onChange}\n    >\n      {children}\n    </MosaicChartSettingsProvider>\n  );\n};\n\nconst MosaicChartSettingsViewSpecButton: FC<{onClick?: () => void}> = ({\n  onClick,\n}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      title=\"View spec\"\n      aria-label=\"View spec\"\n    >\n      <CodeIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst MosaicChartSettingsCloseButton: FC<{onClick: () => void}> = ({\n  onClick,\n}) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"h-5 w-5\"\n      onClick={onClick}\n      aria-label=\"Close\"\n    >\n      <XIcon className=\"h-3.5 w-3.5\" />\n    </Button>\n  );\n};\n\nconst MosaicChartSettingsHeader: FC<PropsWithChildren> = ({children}) => {\n  return (\n    <div className=\"flex items-center justify-between border-b px-3 py-1.5 text-xs font-medium\">\n      {children}\n    </div>\n  );\n};\n\nconst MosaicChartSettingsContent: FC<PropsWithChildren> = ({children}) => {\n  return <div className=\"flex flex-col gap-2 p-2\">{children}</div>;\n};\n\nconst MosaicChartSettingsTypeSelector: FC = () => {\n  const {config, onChange} = useMosaicChartSettingsContext();\n\n  const handleChartTypeChange = (newChartType: ChartType) => {\n    // When changing chart type, clear settings\n    onChange({\n      chartType: newChartType,\n      settings: {},\n      settingsOpen: config.settingsOpen,\n    });\n  };\n\n  return (\n    <Field label=\"Chart type\" required>\n      <MosaicChartTypeSelector\n        value={config.chartType}\n        onChange={handleChartTypeChange}\n      />\n    </Field>\n  );\n};\n\nconst MosaicChartSettingsFields: FC = () => {\n  const {config} = useMosaicChartSettingsContext();\n  const {columns} = useColumnsContext();\n\n  const chartTypeDef = useChartTypeDefinition(config.chartType);\n\n  if (!chartTypeDef) {\n    return (\n      <Field label=\"Chart type\" required>\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      </Field>\n    );\n  }\n\n  if (columns.length === 0) {\n    return (\n      <Field label=\"Columns\" required>\n        <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n          No columns available\n        </div>\n      </Field>\n    );\n  }\n\n  return createElement(chartTypeDef.settingsComponent);\n};\n\nexport const MosaicChartSettings = {\n  Root: MosaicChartSettingsRoot,\n  Header: MosaicChartSettingsHeader,\n  Content: MosaicChartSettingsContent,\n  TypeSelector: MosaicChartSettingsTypeSelector,\n  Fields: MosaicChartSettingsFields,\n  ViewSpecButton: MosaicChartSettingsViewSpecButton,\n  CloseButton: MosaicChartSettingsCloseButton,\n} as const;\n"]}

package/dist/charts/chart-settings/MosaicChartSettingsContent.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import type { ChartPanelConfig } from '../../dashboard/dashboard-types';
+import { Spec } from '@uwdata/mosaic-spec';
+interface MosaicChartSettingsContentProps {
+    dashboardId: string;
+    tableName: string;
+    spec?: Spec;
+    panel: ChartPanelConfig;
+    onClose?: () => void;
+}
+export declare const MosaicChartSettingsContent: FC<MosaicChartSettingsContentProps>;
+export {};
+//# sourceMappingURL=MosaicChartSettingsContent.d.ts.map

package/dist/charts/chart-settings/MosaicChartSettingsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsContent.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAGzC,UAAU,+BAA+B;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACzC,+BAA+B,CA4BhC,CAAC"}

package/dist/charts/chart-settings/MosaicChartSettingsContent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { MosaicChartSpecViewerPanel } from './MosaicChartSpecViewerPanel';
+import { MosaicChartSettingsPanel } from './MosaicChartSettingsPanel';
+export const MosaicChartSettingsContent = ({ dashboardId, panel, tableName, spec, onClose }) => {
+    const [viewMode, setViewMode] = useState('settings');
+    const handleViewSpec = useCallback(() => {
+        setViewMode('spec');
+    }, []);
+    const handleBackToSettings = useCallback(() => {
+        setViewMode('settings');
+    }, []);
+    if (spec && viewMode === 'spec') {
+        return (_jsx(MosaicChartSpecViewerPanel, { spec: spec, onBack: handleBackToSettings }));
+    }
+    return (_jsx(MosaicChartSettingsPanel, { dashboardId: dashboardId, panel: panel, tableName: tableName, spec: spec, onClose: onClose, onViewSpec: handleViewSpec }));
+};
+//# sourceMappingURL=MosaicChartSettingsContent.js.map

package/dist/charts/chart-settings/MosaicChartSettingsContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsContent.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAC;AAGxE,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAUpE,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAC,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAC,EAAE,EAAE;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,UAAU,CAAC,CAAC;IAE1E,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;QAChC,OAAO,CACL,KAAC,0BAA0B,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,oBAAoB,GAAI,CACzE,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,wBAAwB,IACvB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback, useState} from 'react';\nimport {MosaicChartSpecViewerPanel} from './MosaicChartSpecViewerPanel';\nimport type {ChartPanelConfig} from '../../dashboard/dashboard-types';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport {MosaicChartSettingsPanel} from './MosaicChartSettingsPanel';\n\ninterface MosaicChartSettingsContentProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n}\n\nexport const MosaicChartSettingsContent: FC<\n  MosaicChartSettingsContentProps\n> = ({dashboardId, panel, tableName, spec, onClose}) => {\n  const [viewMode, setViewMode] = useState<'settings' | 'spec'>('settings');\n\n  const handleViewSpec = useCallback(() => {\n    setViewMode('spec');\n  }, []);\n\n  const handleBackToSettings = useCallback(() => {\n    setViewMode('settings');\n  }, []);\n\n  if (spec && viewMode === 'spec') {\n    return (\n      <MosaicChartSpecViewerPanel spec={spec} onBack={handleBackToSettings} />\n    );\n  }\n\n  return (\n    <MosaicChartSettingsPanel\n      dashboardId={dashboardId}\n      panel={panel}\n      tableName={tableName}\n      spec={spec}\n      onClose={onClose}\n      onViewSpec={handleViewSpec}\n    />\n  );\n};\n"]}

package/dist/charts/chart-settings/MosaicChartSettingsContext.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import type { TableColumn } from '@sqlrooms/db';
+import type { ChartConfig } from '../chart-types/chart-config';
+import type { ChartType } from '../chart-types/base-types';
+type ChartSetting<T extends ChartConfig = ChartConfig> = T['settings'];
+interface MosaicChartSettingsContextValue<T extends ChartConfig = ChartConfig> {
+    config: T;
+    onChange: (config: T) => void;
+    onChangeConfig: <K extends keyof ChartSetting<T>>(key: K, value: ChartSetting<T>[K]) => void;
+}
+type ExtractChartConfig<T extends ChartType> = Extract<ChartConfig, {
+    chartType: T;
+}>;
+export declare function useMosaicChartSettingsContext(): MosaicChartSettingsContextValue<ChartConfig>;
+export declare function useMosaicChartSettingsContext<T extends ChartType>(chartType: T): MosaicChartSettingsContextValue<ExtractChartConfig<T>>;
+interface MosaicChartSettingsProviderProps {
+    config: ChartConfig;
+    columns: TableColumn[];
+    onChange: (config: ChartConfig) => void;
+    children: ReactNode;
+}
+export declare function MosaicChartSettingsProvider({ config, columns, onChange, children, }: MosaicChartSettingsProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MosaicChartSettingsContext.d.ts.map

package/dist/charts/chart-settings/MosaicChartSettingsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsContext.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAGzD,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;AAEvE,UAAU,+BAA+B,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IAC3E,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC,CAAC,CAAC,EAC9C,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACtB,IAAI,CAAC;CACX;AAMD,KAAK,kBAAkB,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CACpD,WAAW,EACX;IAAC,SAAS,EAAE,CAAC,CAAA;CAAC,CACf,CAAC;AAEF,wBAAgB,6BAA6B,IAAI,+BAA+B,CAAC,WAAW,CAAC,CAAC;AAC9F,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,SAAS,EAC/D,SAAS,EAAE,CAAC,GACX,+BAA+B,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AA6B1D,UAAU,gCAAgC;IACxC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,gCAAgC,2CA2BlC"}

package/dist/charts/chart-settings/MosaicChartSettingsContext.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext } from 'react';
+import { ColumnsProvider } from '../../components/ColumnsContext';
+const MosaicChartSettingsContext = createContext(null);
+export function useMosaicChartSettingsContext(chartType) {
+    const context = useContext(MosaicChartSettingsContext);
+    if (!context) {
+        throw new Error('MosaicChartSettings compound components must be used within MosaicChartSettings.Root');
+    }
+    if (!chartType) {
+        return context;
+    }
+    if (context.config.chartType !== chartType) {
+        throw new Error(`${chartType} chart settings must be used within a ${chartType} chart context`);
+    }
+    return context;
+}
+export function MosaicChartSettingsProvider({ config, columns, onChange, children, }) {
+    const onChangeConfig = useCallback(function (key, value) {
+        onChange({
+            ...config,
+            settings: {
+                ...config.settings,
+                [key]: value,
+            },
+        });
+    }, [config, onChange]);
+    return (_jsx(ColumnsProvider, { columns: columns, children: _jsx(MosaicChartSettingsContext.Provider, { value: {
+                config,
+                onChange,
+                onChangeConfig,
+            }, children: children }) }));
+}
+//# sourceMappingURL=MosaicChartSettingsContext.js.map

package/dist/charts/chart-settings/MosaicChartSettingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsContext.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAahE,MAAM,0BAA0B,GAC9B,aAAa,CAAyC,IAAI,CAAC,CAAC;AAY9D,MAAM,UAAU,6BAA6B,CAC3C,SAAa;IAIb,MAAM,OAAO,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAEvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,sFAAsF,CACvF,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,OAAkE,CAAC;IAC5E,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;QAC3C,MAAM,IAAI,KAAK,CACb,GAAG,SAAS,yCAAyC,SAAS,gBAAgB,CAC/E,CAAC;IACJ,CAAC;IAED,OAAO,OAEN,CAAC;AACJ,CAAC;AASD,MAAM,UAAU,2BAA2B,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACyB;IACjC,MAAM,cAAc,GAAG,WAAW,CAChC,UAAwC,GAAM,EAAE,KAAmB;QACjE,QAAQ,CAAC;YACP,GAAG,MAAM;YACT,QAAQ,EAAE;gBACR,GAAG,MAAM,CAAC,QAAQ;gBAClB,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACa,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,EAAE,QAAQ,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,YAC/B,KAAC,0BAA0B,CAAC,QAAQ,IAClC,KAAK,EAAE;gBACL,MAAM;gBACN,QAAQ;gBACR,cAAc;aACf,YAEA,QAAQ,GAC2B,GACtB,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import {createContext, type ReactNode, useCallback, useContext} from 'react';\nimport type {TableColumn} from '@sqlrooms/db';\nimport type {ChartConfig} from '../chart-types/chart-config';\nimport type {ChartType} from '../chart-types/base-types';\nimport {ColumnsProvider} from '../../components/ColumnsContext';\n\ntype ChartSetting<T extends ChartConfig = ChartConfig> = T['settings'];\n\ninterface MosaicChartSettingsContextValue<T extends ChartConfig = ChartConfig> {\n  config: T;\n  onChange: (config: T) => void;\n  onChangeConfig: <K extends keyof ChartSetting<T>>(\n    key: K,\n    value: ChartSetting<T>[K],\n  ) => void;\n}\n\nconst MosaicChartSettingsContext =\n  createContext<MosaicChartSettingsContextValue | null>(null);\n\n// Extract specific config type from the discriminated union by chartType\ntype ExtractChartConfig<T extends ChartType> = Extract<\n  ChartConfig,\n  {chartType: T}\n>;\n\nexport function useMosaicChartSettingsContext(): MosaicChartSettingsContextValue<ChartConfig>;\nexport function useMosaicChartSettingsContext<T extends ChartType>(\n  chartType: T,\n): MosaicChartSettingsContextValue<ExtractChartConfig<T>>;\nexport function useMosaicChartSettingsContext<T extends ChartType>(\n  chartType?: T,\n):\n  | MosaicChartSettingsContextValue<ExtractChartConfig<T>>\n  | MosaicChartSettingsContextValue<ChartConfig> {\n  const context = useContext(MosaicChartSettingsContext);\n\n  if (!context) {\n    throw new Error(\n      'MosaicChartSettings compound components must be used within MosaicChartSettings.Root',\n    );\n  }\n\n  if (!chartType) {\n    return context as unknown as MosaicChartSettingsContextValue<ChartConfig>;\n  }\n\n  if (context.config.chartType !== chartType) {\n    throw new Error(\n      `${chartType} chart settings must be used within a ${chartType} chart context`,\n    );\n  }\n\n  return context as unknown as MosaicChartSettingsContextValue<\n    ExtractChartConfig<T>\n  >;\n}\n\ninterface MosaicChartSettingsProviderProps {\n  config: ChartConfig;\n  columns: TableColumn[];\n  onChange: (config: ChartConfig) => void;\n  children: ReactNode;\n}\n\nexport function MosaicChartSettingsProvider({\n  config,\n  columns,\n  onChange,\n  children,\n}: MosaicChartSettingsProviderProps) {\n  const onChangeConfig = useCallback(\n    function <K extends keyof ChartSetting>(key: K, value: ChartSetting) {\n      onChange({\n        ...config,\n        settings: {\n          ...config.settings,\n          [key]: value,\n        },\n      } as ChartConfig);\n    },\n    [config, onChange],\n  );\n\n  return (\n    <ColumnsProvider columns={columns}>\n      <MosaicChartSettingsContext.Provider\n        value={{\n          config,\n          onChange,\n          onChangeConfig,\n        }}\n      >\n        {children}\n      </MosaicChartSettingsContext.Provider>\n    </ColumnsProvider>\n  );\n}\n"]}

package/dist/charts/chart-settings/MosaicChartSettingsPanel.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import type { ChartPanelConfig } from '../../dashboard/dashboard-types';
+import { Spec } from '@uwdata/mosaic-spec';
+interface MosaicChartSettingsPanelProps {
+    dashboardId: string;
+    tableName: string;
+    spec?: Spec;
+    panel: ChartPanelConfig;
+    onClose?: () => void;
+    onViewSpec?: () => void;
+}
+export declare const MosaicChartSettingsPanel: FC<MosaicChartSettingsPanelProps>;
+export {};
+//# sourceMappingURL=MosaicChartSettingsPanel.d.ts.map

package/dist/charts/chart-settings/MosaicChartSettingsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAEtE,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAGzC,UAAU,6BAA6B;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA4CtE,CAAC"}

package/dist/charts/chart-settings/MosaicChartSettingsPanel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { MosaicChartSettings } from './MosaicChartSettings';
+import { useStoreWithMosaicDashboard } from '../../dashboard/MosaicDashboardSlice';
+import { useDataTable } from '../../hooks/useDataTable';
+export const MosaicChartSettingsPanel = ({ dashboardId, panel, tableName, spec, onClose, onViewSpec, }) => {
+    const config = panel.config;
+    const updatePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updatePanel);
+    const dataTable = useDataTable(tableName);
+    const handleSettingsChange = useCallback((config) => {
+        updatePanel(dashboardId, panel.id, {
+            config,
+        });
+    }, [dashboardId, panel.id, updatePanel]);
+    return (_jsxs(MosaicChartSettings.Root, { config: config, columns: dataTable?.columns || [], onChange: handleSettingsChange, children: [_jsxs(MosaicChartSettings.Header, { children: [_jsx("div", { className: "flex items-center", children: "Chart settings" }), _jsxs("div", { className: "flex items-center gap-1", children: [spec && _jsx(MosaicChartSettings.ViewSpecButton, { onClick: onViewSpec }), onClose && _jsx(MosaicChartSettings.CloseButton, { onClick: onClose })] })] }), _jsxs(MosaicChartSettings.Content, { children: [_jsx(MosaicChartSettings.TypeSelector, {}), _jsx(MosaicChartSettings.Fields, {})] })] }));
+};
+//# sourceMappingURL=MosaicChartSettingsPanel.js.map

package/dist/charts/chart-settings/MosaicChartSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsPanel.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSettingsPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAG1D,OAAO,EAAC,2BAA2B,EAAC,MAAM,sCAAsC,CAAC;AAEjF,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAWtD,MAAM,CAAC,MAAM,wBAAwB,GAAsC,CAAC,EAC1E,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,UAAU,GACX,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,MAAM,WAAW,GAAG,2BAA2B,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAC7C,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,MAAmB,EAAE,EAAE;QACtB,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE;YACjC,MAAM;SACP,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,MAAC,mBAAmB,CAAC,IAAI,IACvB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,EAAE,OAAO,IAAI,EAAE,EACjC,QAAQ,EAAE,oBAAoB,aAE9B,MAAC,mBAAmB,CAAC,MAAM,eACzB,cAAK,SAAS,EAAC,mBAAmB,+BAAqB,EACvD,eAAK,SAAS,EAAC,yBAAyB,aACrC,IAAI,IAAI,KAAC,mBAAmB,CAAC,cAAc,IAAC,OAAO,EAAE,UAAU,GAAI,EACnE,OAAO,IAAI,KAAC,mBAAmB,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,GAAI,IAC7D,IACqB,EAC7B,MAAC,mBAAmB,CAAC,OAAO,eAC1B,KAAC,mBAAmB,CAAC,YAAY,KAAG,EACpC,KAAC,mBAAmB,CAAC,MAAM,KAAG,IACF,IACL,CAC5B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useCallback} from 'react';\nimport {MosaicChartSettings} from './MosaicChartSettings';\nimport {type ChartConfig} from '../chart-types/chart-config';\nimport type {ChartPanelConfig} from '../../dashboard/dashboard-types';\nimport {useStoreWithMosaicDashboard} from '../../dashboard/MosaicDashboardSlice';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport {useDataTable} from '../../hooks/useDataTable';\n\ninterface MosaicChartSettingsPanelProps {\n  dashboardId: string;\n  tableName: string;\n  spec?: Spec;\n  panel: ChartPanelConfig;\n  onClose?: () => void;\n  onViewSpec?: () => void;\n}\n\nexport const MosaicChartSettingsPanel: FC<MosaicChartSettingsPanelProps> = ({\n  dashboardId,\n  panel,\n  tableName,\n  spec,\n  onClose,\n  onViewSpec,\n}) => {\n  const config = panel.config;\n\n  const updatePanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.updatePanel,\n  );\n\n  const dataTable = useDataTable(tableName);\n\n  const handleSettingsChange = useCallback(\n    (config: ChartConfig) => {\n      updatePanel(dashboardId, panel.id, {\n        config,\n      });\n    },\n    [dashboardId, panel.id, updatePanel],\n  );\n\n  return (\n    <MosaicChartSettings.Root\n      config={config}\n      columns={dataTable?.columns || []}\n      onChange={handleSettingsChange}\n    >\n      <MosaicChartSettings.Header>\n        <div className=\"flex items-center\">Chart settings</div>\n        <div className=\"flex items-center gap-1\">\n          {spec && <MosaicChartSettings.ViewSpecButton onClick={onViewSpec} />}\n          {onClose && <MosaicChartSettings.CloseButton onClick={onClose} />}\n        </div>\n      </MosaicChartSettings.Header>\n      <MosaicChartSettings.Content>\n        <MosaicChartSettings.TypeSelector />\n        <MosaicChartSettings.Fields />\n      </MosaicChartSettings.Content>\n    </MosaicChartSettings.Root>\n  );\n};\n"]}

package/dist/charts/chart-settings/MosaicChartSpecViewerPanel.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { Spec } from '@uwdata/mosaic-spec';
+interface MosaicChartSpecViewerPanelProps {
+    spec: Spec;
+    onBack: () => void;
+}
+export declare const MosaicChartSpecViewerPanel: FC<MosaicChartSpecViewerPanelProps>;
+export {};
+//# sourceMappingURL=MosaicChartSpecViewerPanel.d.ts.map

package/dist/charts/chart-settings/MosaicChartSpecViewerPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSpecViewerPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSpecViewerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAU,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AAGzC,UAAU,+BAA+B;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACzC,+BAA+B,CA+BhC,CAAC"}

package/dist/charts/chart-settings/MosaicChartSpecViewerPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MosaicCodeMirrorEditor } from '../../editor/MosaicCodeMirrorEditor';
+import { MosaicChartSettings } from './MosaicChartSettings';
+import { toRenderableMosaicSpec } from '../../dashboard/utils';
+export const MosaicChartSpecViewerPanel = ({ spec, onBack }) => {
+    const renderableSpec = toRenderableMosaicSpec(spec);
+    const serializedValue = useMemo(() => (renderableSpec ? JSON.stringify(renderableSpec, null, 2) : ''), [renderableSpec]);
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs(MosaicChartSettings.Header, { children: [_jsx("div", { className: "flex items-center", children: _jsx("span", { children: "Spec viewer" }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(MosaicChartSettings.CloseButton, { onClick: onBack }) })] }), _jsx("div", { className: "flex-1 overflow-auto p-2", children: _jsx("div", { className: "border-input h-full overflow-hidden rounded-md border", children: _jsx(MosaicCodeMirrorEditor, { value: serializedValue, className: "h-full", enableSchemaValidation: true, readOnly: true }) }) })] }));
+};
+//# sourceMappingURL=MosaicChartSpecViewerPanel.js.map

package/dist/charts/chart-settings/MosaicChartSpecViewerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSpecViewerPanel.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartSpecViewerPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,OAAO,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,EAAC,sBAAsB,EAAC,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAO7D,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,EAAE,EAAE;IACrB,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACrE,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,MAAC,mBAAmB,CAAC,MAAM,eACzB,cAAK,SAAS,EAAC,mBAAmB,YAChC,yCAAwB,GACpB,EACN,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,mBAAmB,CAAC,WAAW,IAAC,OAAO,EAAE,MAAM,GAAI,GAChD,IACqB,EAC7B,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,uDAAuD,YACpE,KAAC,sBAAsB,IACrB,KAAK,EAAE,eAAe,EACtB,SAAS,EAAC,QAAQ,EAClB,sBAAsB,QACtB,QAAQ,SACR,GACE,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useMemo} from 'react';\nimport {MosaicCodeMirrorEditor} from '../../editor/MosaicCodeMirrorEditor';\nimport {MosaicChartSettings} from './MosaicChartSettings';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport {toRenderableMosaicSpec} from '../../dashboard/utils';\n\ninterface MosaicChartSpecViewerPanelProps {\n  spec: Spec;\n  onBack: () => void;\n}\n\nexport const MosaicChartSpecViewerPanel: FC<\n  MosaicChartSpecViewerPanelProps\n> = ({spec, onBack}) => {\n  const renderableSpec = toRenderableMosaicSpec(spec);\n\n  const serializedValue = useMemo(\n    () => (renderableSpec ? JSON.stringify(renderableSpec, null, 2) : ''),\n    [renderableSpec],\n  );\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <MosaicChartSettings.Header>\n        <div className=\"flex items-center\">\n          <span>Spec viewer</span>\n        </div>\n        <div className=\"flex items-center gap-1\">\n          <MosaicChartSettings.CloseButton onClick={onBack} />\n        </div>\n      </MosaicChartSettings.Header>\n      <div className=\"flex-1 overflow-auto p-2\">\n        <div className=\"border-input h-full overflow-hidden rounded-md border\">\n          <MosaicCodeMirrorEditor\n            value={serializedValue}\n            className=\"h-full\"\n            enableSchemaValidation\n            readOnly\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/charts/chart-settings/MosaicChartTypeSelector.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { type ChartType } from '../chart-types/base-types';
+interface MosaicChartTypeSelectorProps {
+    value: ChartType;
+    onChange: (chartType: ChartType) => void;
+}
+export declare const MosaicChartTypeSelector: FC<MosaicChartTypeSelectorProps>;
+export {};
+//# sourceMappingURL=MosaicChartTypeSelector.d.ts.map

package/dist/charts/chart-settings/MosaicChartTypeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartTypeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAgB,MAAM,OAAO,CAAC;AAS7C,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAGzD,UAAU,4BAA4B;IACpC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA0CpE,CAAC"}

package/dist/charts/chart-settings/MosaicChartTypeSelector.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { ChartNoAxesCombined } from 'lucide-react';
+import { useStoreWithMosaicDashboard } from '../../dashboard/MosaicDashboardSlice';
+export const MosaicChartTypeSelector = memo(({ value, onChange }) => {
+    const chartTypes = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
+    const selectedChartType = useMemo(() => chartTypes?.find((chartType) => chartType.id === value), [chartTypes, value]);
+    const SelectedChartTypeIcon = selectedChartType?.icon ?? ChartNoAxesCombined;
+    return (_jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", "aria-label": "Chart type", children: selectedChartType ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SelectedChartTypeIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: selectedChartType.label })] })) : (_jsx(SelectValue, { placeholder: "Select chart type" })) }), _jsx(SelectContent, { className: "text-xs", children: chartTypes?.map((chartType) => {
+                    const Icon = chartType.icon ?? ChartNoAxesCombined;
+                    return (_jsx(SelectItem, { value: chartType.id, children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), _jsx("span", { children: chartType.label })] }) }, chartType.id));
+                }) })] }));
+});
+MosaicChartTypeSelector.displayName = 'MosaicChartTypeSelector';
+//# sourceMappingURL=MosaicChartTypeSelector.js.map

package/dist/charts/chart-settings/MosaicChartTypeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartTypeSelector.js","sourceRoot":"","sources":["../../../src/charts/chart-settings/MosaicChartTypeSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAC,2BAA2B,EAAC,MAAM,sCAAsC,CAAC;AAOjF,MAAM,CAAC,MAAM,uBAAuB,GAAqC,IAAI,CAC3E,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE;IACpB,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,CAAC,EAC7D,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IAEF,MAAM,qBAAqB,GACzB,iBAAiB,EAAE,IAAI,IAAI,mBAAmB,CAAC;IAEjD,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC3C,KAAC,aAAa,IAAC,SAAS,EAAC,aAAa,gBAAY,YAAY,YAC3D,iBAAiB,CAAC,CAAC,CAAC,CACnB,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,qBAAqB,IAAC,SAAS,EAAC,aAAa,GAAG,EACjD,yBAAO,iBAAiB,CAAC,KAAK,GAAQ,IAClC,CACP,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,WAAW,EAAC,mBAAmB,GAAG,CAChD,GACa,EAChB,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,YAC/B,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;oBAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,IAAI,mBAAmB,CAAC;oBACnD,OAAO,CACL,KAAC,UAAU,IAAoB,KAAK,EAAE,SAAS,CAAC,EAAE,YAChD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,EAChC,yBAAO,SAAS,CAAC,KAAK,GAAQ,IAC1B,IAJS,SAAS,CAAC,EAAE,CAKhB,CACd,CAAC;gBACJ,CAAC,CAAC,GACY,IACT,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,yBAAyB,CAAC","sourcesContent":["import {type FC, memo, useMemo} from 'react';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport {ChartNoAxesCombined} from 'lucide-react';\nimport {type ChartType} from '../chart-types/base-types';\nimport {useStoreWithMosaicDashboard} from '../../dashboard/MosaicDashboardSlice';\n\ninterface MosaicChartTypeSelectorProps {\n  value: ChartType;\n  onChange: (chartType: ChartType) => void;\n}\n\nexport const MosaicChartTypeSelector: FC<MosaicChartTypeSelectorProps> = memo(\n  ({value, onChange}) => {\n    const chartTypes = useStoreWithMosaicDashboard(\n      (state) => state.mosaicDashboard.chartTypes,\n    );\n\n    const selectedChartType = useMemo(\n      () => chartTypes?.find((chartType) => chartType.id === value),\n      [chartTypes, value],\n    );\n\n    const SelectedChartTypeIcon =\n      selectedChartType?.icon ?? ChartNoAxesCombined;\n\n    return (\n      <Select value={value} onValueChange={onChange}>\n        <SelectTrigger className=\"h-8 text-xs\" aria-label=\"Chart type\">\n          {selectedChartType ? (\n            <div className=\"flex items-center gap-2\">\n              <SelectedChartTypeIcon className=\"h-3.5 w-3.5\" />\n              <span>{selectedChartType.label}</span>\n            </div>\n          ) : (\n            <SelectValue placeholder=\"Select chart type\" />\n          )}\n        </SelectTrigger>\n        <SelectContent className=\"text-xs\">\n          {chartTypes?.map((chartType) => {\n            const Icon = chartType.icon ?? ChartNoAxesCombined;\n            return (\n              <SelectItem key={chartType.id} value={chartType.id}>\n                <div className=\"flex items-center gap-2 text-xs\">\n                  <Icon className=\"h-3.5 w-3.5\" />\n                  <span>{chartType.label}</span>\n                </div>\n              </SelectItem>\n            );\n          })}\n        </SelectContent>\n      </Select>\n    );\n  },\n);\n\nMosaicChartTypeSelector.displayName = 'MosaicChartTypeSelector';\n"]}

package/dist/charts/chart-types/base-types.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Base types for chart configurations.
+ * Separated to avoid circular dependencies.
+ */
+import type { Spec } from '@uwdata/mosaic-spec';
+import { type Tool } from 'ai';
+import type { Coordinator } from '@uwdata/mosaic-core';
+import type { ComponentType } from 'react';
+import type * as z from 'zod';
+import { ChartConfig, ChartType } from './chart-config';
+import { RetainedVgPlotChart } from '../../VgPlotChart';
+import type { Selection } from '@uwdata/mosaic-core';
+import type { DataTableExplorerPanelConfig } from '../../dashboard/core-types';
+import type { MosaicDashboardEntry } from '../../dashboard/dashboard-types';
+import type { ChartDataPolicy, ChartDataPolicyContext, ChartRuntimeIssue, ChartRuntimeIssueContext, ChartRuntimeIssueReporter } from '../../chart-runtime';
+export type { ChartType };
+/**
+ * Column info passed to chart builder UI
+ */
+export interface ChartBuilderColumn {
+    name: string;
+    type: string;
+}
+/**
+ * Describes a field selector in a chart builder UI
+ */
+export interface ChartBuilderField {
+    /** Unique key for this field */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Filter columns by DuckDB type (e.g. 'INTEGER', 'VARCHAR', 'DOUBLE') */
+    types?: string[];
+    /** Optional helper text for AI or custom UIs */
+    description?: string;
+    /** Whether this field accepts multiple values (array) */
+    multiple?: boolean;
+}
+/**
+ * Result of table resolution, includes table name and column metadata.
+ */
+export interface ResolvedTable {
+    tableName: string;
+    columns: ChartBuilderColumn[];
+}
+/**
+ * Partial update to apply to a dashboard panel.
+ * Config can be any of the panel config types (chart, dataTableExplorer).
+ */
+export interface PanelPatch {
+    title?: string;
+    source?: ChartBuilderPanelSource;
+    config?: ChartConfig | DataTableExplorerPanelConfig;
+}
+/**
+ * Dependencies injected into dashboard tool creation functions.
+ * Provides the resources and operations needed to create dashboard panels.
+ */
+export interface DashboardToolDeps {
+    /**
+     * Resolves the dashboard artifact ID.
+     * Use this when you only need the artifact and not table information.
+     */
+    resolveArtifact: (artifactId?: string, createIfMissing?: boolean, context?: ChartToolExecutionContext) => string;
+    /**
+     * Resolves table name and columns for a given dashboard artifact.
+     * Use this when you need table-specific information.
+     */
+    resolveTable: (artifactId: string, tableName?: string) => ResolvedTable;
+    addPanel: (dashboardId: string, panel: any) => string;
+    updatePanel: (dashboardId: string, panelId: string, patch: Partial<PanelPatch>) => void;
+    getDashboard: (dashboardId: string) => MosaicDashboardEntry | undefined;
+    getPanelIssue?: (dashboardId: string, panelId: string) => ChartRuntimeIssue | undefined;
+    removePanel: (dashboardId: string, panelId: string) => void;
+    setCurrentArtifact: (artifactId: string) => void;
+    maxDataPoints: number;
+}
+export type ChartToolExecutionContext = object & {
+    sessionId?: string;
+    aiRunContext?: unknown;
+};
+export type ChartBuilderPanelSource = {
+    tableName?: string;
+    sqlQuery?: string;
+};
+export type ChartBuilderVgPlotOutput = {
+    kind: 'vgplot';
+    spec: Spec;
+};
+export type ChartBuilderDashboardPanelOutput = {
+    kind: 'dashboard-panel';
+    type: string;
+    source?: ChartBuilderPanelSource;
+    config?: Record<string, unknown>;
+};
+export type ChartBuilderOutput = ChartBuilderVgPlotOutput | ChartBuilderDashboardPanelOutput;
+export type ChartRetainer = {
+    chart: RetainedVgPlotChart | undefined;
+    setChart: (chart: RetainedVgPlotChart) => void;
+};
+export type BrushSelectionParams = Map<string, Selection>;
+/**
+ * Props passed to chart renderer components.
+ */
+export interface ChartRendererProps<TConfig extends ChartConfig = ChartConfig> {
+    tableName: string;
+    config: TConfig;
+    coordinator: Coordinator;
+    dataPolicy?: ChartDataPolicy | null;
+    runtimeIssueContext?: ChartRuntimeIssueContext;
+    runtimeIssueReporter?: ChartRuntimeIssueReporter;
+    /**
+     * Pre-defined params/selections to inject when rendering vgplot specs.
+     * Keys are param names (without $), values are Param or Selection instances.
+     */
+    params?: BrushSelectionParams;
+    /**
+     * Optional retention adapter for preserving the underlying vgplot
+     * instance across temporary unmount/remount cycles.
+     */
+    retention?: ChartRetainer;
+}
+type BaseChartTypeDefinition<TConfig extends ChartConfig = ChartConfig> = {
+    /** Unique identifier */
+    id: ChartType;
+    /** Short human-friendly name used in chart-type grids and prompts */
+    label?: string;
+    /** Short description of what this builder creates */
+    description: string;
+    /** Zod schema for runtime validation of settings */
+    schema: z.ZodType<TConfig['settings']>;
+    /** Generate a chart title from selected field values */
+    buildTitle?: (fieldValues: Record<string, unknown>) => string;
+    /** Optional availability override for a given table schema */
+    isAvailable?: (columns: ChartBuilderColumn[]) => boolean;
+    /** Explicit settings component for this chart type */
+    settingsComponent: ComponentType;
+    /** Optional icon component for chart-type grids */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Optional function to create an AI tool for this chart type */
+    createTool?: (deps: DashboardToolDeps) => Tool;
+    /** Optional runtime data policy for renderer-specific query validation. */
+    getDataPolicy?: (context: ChartDataPolicyContext<TConfig>) => ChartDataPolicy | null | undefined;
+};
+export type SpecChartTypeDefinition<TConfig extends ChartConfig = ChartConfig> = BaseChartTypeDefinition<TConfig> & {
+    createSpec: (tableName: string, config: TConfig['settings']) => Spec;
+    canViewSpec?: boolean;
+};
+export type ComponentChartTypeDefinition<TConfig extends ChartConfig = ChartConfig> = BaseChartTypeDefinition<TConfig> & {
+    renderer: ComponentType<ChartRendererProps<TConfig>>;
+};
+/**
+ * Shared chart-type definition used by both the chart-builder UI and
+ * assistant-driven chart creation.
+ */
+export type ChartTypeDefinition<TConfig extends ChartConfig = ChartConfig> = SpecChartTypeDefinition<TConfig> | ComponentChartTypeDefinition<TConfig>;
+export declare function isSpecChartType<TConfig extends ChartConfig>(chartType: ChartTypeDefinition<TConfig>): chartType is SpecChartTypeDefinition<TConfig>;
+export declare function isComponentChartType<TConfig extends ChartConfig>(chartType: ChartTypeDefinition<TConfig>): chartType is ComponentChartTypeDefinition<TConfig>;
+/**
+ * Backward-compatible alias for earlier chart-builder helper APIs.
+ * @deprecated Use {@link ChartTypeDefinition} instead.
+ */
+export type ChartSpec = ChartTypeDefinition;
+//# sourceMappingURL=base-types.d.ts.map