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

package/dist/ai/types.d.ts

@@ -0,0 +1,64 @@
+import type { LanguageModel, Tool, ToolLoopAgent } from 'ai';
+import type { DataTable } from '@sqlrooms/db';
+import type { ChartTypeDefinition } from '../charts/chart-types/base-types';
+/**
+ * Common types used by Mosaic AI agents and tool composition.
+ */
+export type AiStore<TState> = {
+    getState: () => TState;
+};
+export type AgentToolCall = {
+    toolName: string;
+};
+export type AgentRunResult = {
+    finalOutput?: string;
+    agentToolCalls?: AgentToolCall[];
+};
+/**
+ * Minimal adapter interface for chart configuration tools.
+ * Chart tools only need access to tables for validation.
+ *
+ * This is a state-less interface - implementations bind state internally.
+ */
+export type ChartAiAdapter = {
+    /** Get all available tables */
+    getTables: () => DataTable[];
+    /** Find table by name, throws if not found */
+    findTableByName: (tableName: string) => DataTable;
+};
+export type ChartToolsOptions = {
+    chartTypes?: ChartTypeDefinition<any>[];
+    chartMaxDataPoints?: number;
+};
+/**
+ * Common options for agent creation
+ */
+export type BaseAgentToolOptions<TState> = {
+    store: AiStore<TState>;
+    getModel: (args: {
+        state: TState;
+    }) => LanguageModel;
+    createDataTools?: (args: {
+        store: AiStore<TState>;
+    }) => {
+        query: Tool;
+        list_tables: Tool;
+        read_table_schema: Tool;
+    };
+    runSubAgent: (args: {
+        agent: ToolLoopAgent<any, any, any>;
+        prompt: string;
+        store: AiStore<TState>;
+        parentToolCallId: string;
+        abortSignal?: AbortSignal;
+    }) => Promise<AgentRunResult>;
+    instructions?: string;
+    /**
+     * Optional host/plugin instructions appended after the built-in agent prompt.
+     * Use this when extending an agent with extra tools that need specialized
+     * usage guidance while preserving the base workflow.
+     */
+    additionalInstructions?: string;
+    chartToolsOptions?: ChartToolsOptions;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/ai/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ai/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,IAAI,EAAE,aAAa,EAAC,MAAM,IAAI,CAAC;AAC3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAE1E;;GAEG;AAEH,MAAM,MAAM,OAAO,CAAC,MAAM,IAAI;IAC5B,QAAQ,EAAE,MAAM,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,+BAA+B;IAC/B,SAAS,EAAE,MAAM,SAAS,EAAE,CAAC;IAE7B,8CAA8C;IAC9C,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAAC,MAAM,IAAI;IACzC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,KAAK,aAAa,CAAC;IACnD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;KAAC,KAAK;QACpD,KAAK,EAAE,IAAI,CAAC;QACZ,WAAW,EAAE,IAAI,CAAC;QAClB,iBAAiB,EAAE,IAAI,CAAC;KACzB,CAAC;IACF,WAAW,EAAE,CAAC,IAAI,EAAE;QAClB,KAAK,EAAE,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACpC,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;QACvB,gBAAgB,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC"}

package/dist/ai/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/ai/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/ai/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {LanguageModel, Tool, ToolLoopAgent} from 'ai';\nimport type {DataTable} from '@sqlrooms/db';\nimport type {ChartTypeDefinition} from '../charts/chart-types/base-types';\n\n/**\n * Common types used by Mosaic AI agents and tool composition.\n */\n\nexport type AiStore<TState> = {\n  getState: () => TState;\n};\n\nexport type AgentToolCall = {\n  toolName: string;\n};\n\nexport type AgentRunResult = {\n  finalOutput?: string;\n  agentToolCalls?: AgentToolCall[];\n};\n\n/**\n * Minimal adapter interface for chart configuration tools.\n * Chart tools only need access to tables for validation.\n *\n * This is a state-less interface - implementations bind state internally.\n */\nexport type ChartAiAdapter = {\n  /** Get all available tables */\n  getTables: () => DataTable[];\n\n  /** Find table by name, throws if not found */\n  findTableByName: (tableName: string) => DataTable;\n};\n\nexport type ChartToolsOptions = {\n  chartTypes?: ChartTypeDefinition<any>[];\n  chartMaxDataPoints?: number;\n};\n\n/**\n * Common options for agent creation\n */\nexport type BaseAgentToolOptions<TState> = {\n  store: AiStore<TState>;\n  getModel: (args: {state: TState}) => LanguageModel;\n  createDataTools?: (args: {store: AiStore<TState>}) => {\n    query: Tool;\n    list_tables: Tool;\n    read_table_schema: Tool;\n  };\n  runSubAgent: (args: {\n    agent: ToolLoopAgent<any, any, any>;\n    prompt: string;\n    store: AiStore<TState>;\n    parentToolCallId: string;\n    abortSignal?: AbortSignal;\n  }) => Promise<AgentRunResult>;\n  instructions?: string;\n  /**\n   * Optional host/plugin instructions appended after the built-in agent prompt.\n   * Use this when extending an agent with extra tools that need specialized\n   * usage guidance while preserving the base workflow.\n   */\n  additionalInstructions?: string;\n  chartToolsOptions?: ChartToolsOptions;\n};\n"]}

package/dist/ai.d.ts

@@ -1,6 +1,20 @@
 /**
- * AI tools and utilities for Mosaic dashboards
+ * AI tools and utilities for Mosaic dashboards and block-document integrations
  * @packageDocumentation
  */
-export * from './ai/ai';
+export type { ChartToolExecutionContext } from './charts/chart-types';
+export * from './ai/types';
+export * from './ai/database-types';
+export * from './ai/dashboard/dashboard-types';
+export * from './ai/constants';
+export * from './ai/block-document/constants';
+export { AiAgentError } from './ai/errors';
+export { calculateAgentResultMetadata } from './ai/tool-helpers';
+export { createChartToolsInstructions } from './charts/chart-types/createChartInstructions';
+export { resolveChartTypes } from './charts/chart-types/resolveChartTypes';
+export { createDashboardAiTools } from './ai/dashboard/createDashboardAiTools';
+export { createDashboardAgentTool } from './ai/dashboard/createDashboardAgentTool';
+export { createAddMosaicDashboardBlockTool, type CreateAddMosaicDashboardBlockToolOptions, } from './ai/block-document/createAddMosaicDashboardBlockTool';
+export { createBlockDocumentChartTools, type CreateBlockDocumentChartToolsParams, } from './ai/block-document/createBlockDocumentChartTools';
+export { createBlockDocumentDataTableExplorerTool, type CreateBlockDocumentDataTableExplorerToolParams, } from './ai/block-document/createBlockDocumentDataTableExplorerTool';
 //# sourceMappingURL=ai.d.ts.map

package/dist/ai.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai.d.ts","sourceRoot":"","sources":["../src/ai.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,SAAS,CAAC"}
+{"version":3,"file":"ai.d.ts","sourceRoot":"","sources":["../src/ai.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,YAAY,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AACpE,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,OAAO,EAAC,4BAA4B,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAC,4BAA4B,EAAC,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAC,iBAAiB,EAAC,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAC,wBAAwB,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EACL,iCAAiC,EACjC,KAAK,wCAAwC,GAC9C,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EACL,6BAA6B,EAC7B,KAAK,mCAAmC,GACzC,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EACL,wCAAwC,EACxC,KAAK,8CAA8C,GACpD,MAAM,8DAA8D,CAAC"}

package/dist/ai.js

@@ -1,6 +1,15 @@
-/**
- * AI tools and utilities for Mosaic dashboards
- * @packageDocumentation
- */
-export * from './ai/ai';
+export * from './ai/types';
+export * from './ai/database-types';
+export * from './ai/dashboard/dashboard-types';
+export * from './ai/constants';
+export * from './ai/block-document/constants';
+export { AiAgentError } from './ai/errors';
+export { calculateAgentResultMetadata } from './ai/tool-helpers';
+export { createChartToolsInstructions } from './charts/chart-types/createChartInstructions';
+export { resolveChartTypes } from './charts/chart-types/resolveChartTypes';
+export { createDashboardAiTools } from './ai/dashboard/createDashboardAiTools';
+export { createDashboardAgentTool } from './ai/dashboard/createDashboardAgentTool';
+export { createAddMosaicDashboardBlockTool, } from './ai/block-document/createAddMosaicDashboardBlockTool';
+export { createBlockDocumentChartTools, } from './ai/block-document/createBlockDocumentChartTools';
+export { createBlockDocumentDataTableExplorerTool, } from './ai/block-document/createBlockDocumentDataTableExplorerTool';
 //# sourceMappingURL=ai.js.map

package/dist/ai.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai.js","sourceRoot":"","sources":["../src/ai.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * AI tools and utilities for Mosaic dashboards\n * @packageDocumentation\n */\nexport * from './ai/ai';\n"]}
+{"version":3,"file":"ai.js","sourceRoot":"","sources":["../src/ai.ts"],"names":[],"mappings":"AAKA,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,OAAO,EAAC,4BAA4B,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAC,4BAA4B,EAAC,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAC,iBAAiB,EAAC,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAC,wBAAwB,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EACL,iCAAiC,GAElC,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EACL,6BAA6B,GAE9B,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EACL,wCAAwC,GAEzC,MAAM,8DAA8D,CAAC","sourcesContent":["/**\n * AI tools and utilities for Mosaic dashboards and block-document integrations\n * @packageDocumentation\n */\nexport type {ChartToolExecutionContext} from './charts/chart-types';\nexport * from './ai/types';\nexport * from './ai/database-types';\nexport * from './ai/dashboard/dashboard-types';\nexport * from './ai/constants';\nexport * from './ai/block-document/constants';\nexport {AiAgentError} from './ai/errors';\nexport {calculateAgentResultMetadata} from './ai/tool-helpers';\nexport {createChartToolsInstructions} from './charts/chart-types/createChartInstructions';\nexport {resolveChartTypes} from './charts/chart-types/resolveChartTypes';\nexport {createDashboardAiTools} from './ai/dashboard/createDashboardAiTools';\nexport {createDashboardAgentTool} from './ai/dashboard/createDashboardAgentTool';\nexport {\n  createAddMosaicDashboardBlockTool,\n  type CreateAddMosaicDashboardBlockToolOptions,\n} from './ai/block-document/createAddMosaicDashboardBlockTool';\nexport {\n  createBlockDocumentChartTools,\n  type CreateBlockDocumentChartToolsParams,\n} from './ai/block-document/createBlockDocumentChartTools';\nexport {\n  createBlockDocumentDataTableExplorerTool,\n  type CreateBlockDocumentDataTableExplorerToolParams,\n} from './ai/block-document/createBlockDocumentDataTableExplorerTool';\n"]}

package/dist/charts/MosaicChart.d.ts

@@ -3,10 +3,12 @@ import type { ChartConfig } from './chart-types/chart-config';
 import { DataTable } from '@sqlrooms/db';
 export type MosaicChartProps = {
     dataTable?: DataTable;
-    selectionName: string;
+    selectionName?: string;
     config: ChartConfig;
     runtimeKey: string;
     onConfigChange?: (config: ChartConfig) => void;
+    dashboardId?: string;
+    panelId?: string;
 };
 export declare const MosaicChart: FC<MosaicChartProps>;
 //# sourceMappingURL=MosaicChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicChart.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgD5C,CAAC"}
+{"version":3,"file":"MosaicChart.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoD5C,CAAC"}

package/dist/charts/MosaicChart.js

@@ -3,11 +3,11 @@ import { useCallback } from 'react';
 import { MosaicDashboardPanelLayout } from '../dashboard/panel/MosaicDashboardPanelLayout';
 import { MosaicChartSettingsPanel } from './MosaicChartSettingsPanel';
 import { MosaicChartView } from './MosaicChartView';
-export const MosaicChart = ({ dataTable, selectionName, config, runtimeKey, onConfigChange, }) => {
+export const MosaicChart = ({ dataTable, selectionName, config, runtimeKey, onConfigChange, dashboardId, panelId, }) => {
     const handleOpenChange = useCallback((isOpen) => onConfigChange?.({ ...config, settingsOpen: isOpen }), [config, onConfigChange]);
     const handleConfigChange = useCallback((newConfig) => onConfigChange?.(newConfig), [onConfigChange]);
     const settingsContent = (_jsx(MosaicChartSettingsPanel, { dataTable: dataTable, config: config, onChange: handleConfigChange, onClose: () => handleOpenChange(false) }));
-    const chartContent = (_jsx("div", { className: "h-full overflow-auto p-2", children: _jsx(MosaicChartView, { dataTable: dataTable, config: config, selectionName: selectionName, retentionKey: runtimeKey, runtimeIssueKey: runtimeKey }) }));
+    const chartContent = (_jsx("div", { className: "h-full min-h-0 min-w-0 overflow-hidden p-2", children: _jsx(MosaicChartView, { dataTable: dataTable, config: config, selectionName: selectionName, retentionKey: runtimeKey, runtimeIssueKey: runtimeKey, dashboardId: dashboardId, panelId: panelId }) }));
     return (_jsx("div", { className: "h-full min-h-0", children: _jsx(MosaicDashboardPanelLayout, { isOpen: config.settingsOpen, onIsOpenChange: handleOpenChange, settings: settingsContent, content: chartContent }) }));
 };
 //# sourceMappingURL=MosaicChart.js.map

package/dist/charts/MosaicChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicChart.js","sourceRoot":"","sources":["../../src/charts/MosaicChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,WAAW,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,0BAA0B,EAAC,MAAM,+CAA+C,CAAC;AACzF,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAWlD,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,SAAS,EACT,aAAa,EACb,MAAM,EACN,UAAU,EACV,cAAc,GACf,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,MAAe,EAAE,EAAE,CAAC,cAAc,EAAE,CAAC,EAAC,GAAG,MAAM,EAAE,YAAY,EAAE,MAAM,EAAC,CAAC,EACxE,CAAC,MAAM,EAAE,cAAc,CAAC,CACzB,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,SAAsB,EAAE,EAAE,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,EACvD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,KAAC,wBAAwB,IACvB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,GACtC,CACH,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,UAAU,EACxB,eAAe,EAAE,UAAU,GAC3B,GACE,CACP,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,0BAA0B,IACzB,MAAM,EAAE,MAAM,CAAC,YAAY,EAC3B,cAAc,EAAE,gBAAgB,EAChC,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,YAAY,GACrB,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useCallback} from 'react';\nimport {MosaicDashboardPanelLayout} from '../dashboard/panel/MosaicDashboardPanelLayout';\nimport {MosaicChartSettingsPanel} from './MosaicChartSettingsPanel';\nimport type {ChartConfig} from './chart-types/chart-config';\nimport {MosaicChartView} from './MosaicChartView';\nimport {DataTable} from '@sqlrooms/db';\n\nexport type MosaicChartProps = {\n  dataTable?: DataTable;\n  selectionName: string;\n  config: ChartConfig;\n  runtimeKey: string;\n  onConfigChange?: (config: ChartConfig) => void;\n};\n\nexport const MosaicChart: FC<MosaicChartProps> = ({\n  dataTable,\n  selectionName,\n  config,\n  runtimeKey,\n  onConfigChange,\n}) => {\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => onConfigChange?.({...config, settingsOpen: isOpen}),\n    [config, onConfigChange],\n  );\n\n  const handleConfigChange = useCallback(\n    (newConfig: ChartConfig) => onConfigChange?.(newConfig),\n    [onConfigChange],\n  );\n\n  const settingsContent = (\n    <MosaicChartSettingsPanel\n      dataTable={dataTable}\n      config={config}\n      onChange={handleConfigChange}\n      onClose={() => handleOpenChange(false)}\n    />\n  );\n\n  const chartContent = (\n    <div className=\"h-full overflow-auto p-2\">\n      <MosaicChartView\n        dataTable={dataTable}\n        config={config}\n        selectionName={selectionName}\n        retentionKey={runtimeKey}\n        runtimeIssueKey={runtimeKey}\n      />\n    </div>\n  );\n\n  return (\n    <div className=\"h-full min-h-0\">\n      <MosaicDashboardPanelLayout\n        isOpen={config.settingsOpen}\n        onIsOpenChange={handleOpenChange}\n        settings={settingsContent}\n        content={chartContent}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MosaicChart.js","sourceRoot":"","sources":["../../src/charts/MosaicChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,WAAW,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,0BAA0B,EAAC,MAAM,+CAA+C,CAAC;AACzF,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAalD,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,SAAS,EACT,aAAa,EACb,MAAM,EACN,UAAU,EACV,cAAc,EACd,WAAW,EACX,OAAO,GACR,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,MAAe,EAAE,EAAE,CAAC,cAAc,EAAE,CAAC,EAAC,GAAG,MAAM,EAAE,YAAY,EAAE,MAAM,EAAC,CAAC,EACxE,CAAC,MAAM,EAAE,cAAc,CAAC,CACzB,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,SAAsB,EAAE,EAAE,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,EACvD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,KAAC,wBAAwB,IACvB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,GACtC,CACH,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,UAAU,EACxB,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,0BAA0B,IACzB,MAAM,EAAE,MAAM,CAAC,YAAY,EAC3B,cAAc,EAAE,gBAAgB,EAChC,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,YAAY,GACrB,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useCallback} from 'react';\nimport {MosaicDashboardPanelLayout} from '../dashboard/panel/MosaicDashboardPanelLayout';\nimport {MosaicChartSettingsPanel} from './MosaicChartSettingsPanel';\nimport type {ChartConfig} from './chart-types/chart-config';\nimport {MosaicChartView} from './MosaicChartView';\nimport {DataTable} from '@sqlrooms/db';\n\nexport type MosaicChartProps = {\n  dataTable?: DataTable;\n  selectionName?: string;\n  config: ChartConfig;\n  runtimeKey: string;\n  onConfigChange?: (config: ChartConfig) => void;\n  dashboardId?: string;\n  panelId?: string;\n};\n\nexport const MosaicChart: FC<MosaicChartProps> = ({\n  dataTable,\n  selectionName,\n  config,\n  runtimeKey,\n  onConfigChange,\n  dashboardId,\n  panelId,\n}) => {\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => onConfigChange?.({...config, settingsOpen: isOpen}),\n    [config, onConfigChange],\n  );\n\n  const handleConfigChange = useCallback(\n    (newConfig: ChartConfig) => onConfigChange?.(newConfig),\n    [onConfigChange],\n  );\n\n  const settingsContent = (\n    <MosaicChartSettingsPanel\n      dataTable={dataTable}\n      config={config}\n      onChange={handleConfigChange}\n      onClose={() => handleOpenChange(false)}\n    />\n  );\n\n  const chartContent = (\n    <div className=\"h-full min-h-0 min-w-0 overflow-hidden p-2\">\n      <MosaicChartView\n        dataTable={dataTable}\n        config={config}\n        selectionName={selectionName}\n        retentionKey={runtimeKey}\n        runtimeIssueKey={runtimeKey}\n        dashboardId={dashboardId}\n        panelId={panelId}\n      />\n    </div>\n  );\n\n  return (\n    <div className=\"h-full min-h-0\">\n      <MosaicDashboardPanelLayout\n        isOpen={config.settingsOpen}\n        onIsOpenChange={handleOpenChange}\n        settings={settingsContent}\n        content={chartContent}\n      />\n    </div>\n  );\n};\n"]}

package/dist/charts/MosaicChartError.d.ts

@@ -1,8 +1,14 @@
 import { type FC } from 'react';
 type MosaicChartErrorProps = {
-    title: string;
-    message: string;
+    error: Error;
 };
+/**
+ * Displays user-friendly error messages for chart configuration and validation errors.
+ * Renders specialized UI for known error types (RequiredFieldsError, MissingColumnsError,
+ * InvalidColumnTypeError) and a generic message for other errors.
+ *
+ * @param error - The error to display, typically from chart validation or creation
+ */
 export declare const MosaicChartError: FC<MosaicChartErrorProps>;
 export {};
 //# sourceMappingURL=MosaicChartError.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicChartError.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChartError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAE9B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAUtD,CAAC"}
+{"version":3,"file":"MosaicChartError.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChartError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAQjD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAwDtD,CAAC"}

package/dist/charts/MosaicChartError.js

@@ -1,5 +1,31 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const MosaicChartError = ({ title, message, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-center font-medium", children: title }), _jsx("div", { className: "text-center text-xs", children: message })] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChartSpecError, InvalidColumnTypeError, MissingColumnsError, RequiredFieldsError, } from './chart-types';
+/**
+ * Displays user-friendly error messages for chart configuration and validation errors.
+ * Renders specialized UI for known error types (RequiredFieldsError, MissingColumnsError,
+ * InvalidColumnTypeError) and a generic message for other errors.
+ *
+ * @param error - The error to display, typically from chart validation or creation
+ */
+export const MosaicChartError = ({ error }) => {
+    if (error instanceof RequiredFieldsError) {
+        return (_jsxs(ErrorPanel, { title: "Configure chart to display visualization", children: [_jsx("span", { children: "Required fields are missing: " }), error.fieldNames.map((fieldName, index) => (_jsxs("span", { children: [_jsx(Pill, { children: fieldName }), ' '] }, index)))] }));
+    }
+    if (error instanceof MissingColumnsError) {
+        return (_jsxs(ErrorPanel, { title: "The visualization can't be displayed", children: [_jsx("span", { children: "Selected columns are missing in the dataset: " }), error.columnNames.map((column, idx) => (_jsxs("span", { children: [_jsx(Pill, { children: column }), ' '] }, idx)))] }));
+    }
+    if (error instanceof InvalidColumnTypeError) {
+        return (_jsxs(ErrorPanel, { title: "The visualization can't be displayed", children: [_jsxs("p", { children: [_jsx("span", { children: "Selected columns have invalid type: " }), error.columnNames.map((column, idx) => (_jsxs("span", { children: [_jsx(Pill, { children: column }), ' '] }, idx)))] }), _jsxs("p", { children: ["Expected type is ", _jsx(Pill, { children: error.expectedType }), "."] })] }));
+    }
+    if (error instanceof ChartSpecError) {
+        return (_jsx(ErrorPanel, { title: "Configure chart to display visualization", children: error.message }));
+    }
+    return (_jsx(ErrorPanel, { title: "Ooops! Something went wrong", children: error.message }));
+};
+const ErrorPanel = ({ title, children }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-center font-medium", children: title }), _jsx("div", { className: "text-center text-xs", children: children })] }));
+};
+const Pill = ({ children }) => {
+    return (_jsx("span", { className: "inline-flex items-center rounded-md border border-gray-600 bg-gray-800 px-1 py-0.5 text-xs font-medium text-gray-300", children: children }));
 };
 //# sourceMappingURL=MosaicChartError.js.map

package/dist/charts/MosaicChartError.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicChartError.js","sourceRoot":"","sources":["../../src/charts/MosaicChartError.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAC1D,KAAK,EACL,OAAO,GACR,EAAE,EAAE;IACH,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAO,EACtD,cAAK,SAAS,EAAC,qBAAqB,YAAE,OAAO,GAAO,IACnD,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC} from 'react';\n\ntype MosaicChartErrorProps = {\n  title: string;\n  message: string;\n};\n\nexport const MosaicChartError: FC<MosaicChartErrorProps> = ({\n  title,\n  message,\n}) => {\n  return (\n    <>\n      <div className=\"text-center font-medium\">{title}</div>\n      <div className=\"text-center text-xs\">{message}</div>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"MosaicChartError.js","sourceRoot":"","sources":["../../src/charts/MosaicChartError.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AAMvB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IACrE,IAAI,KAAK,YAAY,mBAAmB,EAAE,CAAC;QACzC,OAAO,CACL,MAAC,UAAU,IAAC,KAAK,EAAC,0CAA0C,aAC1D,2DAA0C,EACzC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1C,2BACE,KAAC,IAAI,cAAE,SAAS,GAAQ,EAAC,GAAG,KADnB,KAAK,CAET,CACR,CAAC,IACS,CACd,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,YAAY,mBAAmB,EAAE,CAAC;QACzC,OAAO,CACL,MAAC,UAAU,IAAC,KAAK,EAAC,sCAAsC,aACtD,2EAA0D,EACzD,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CACtC,2BACE,KAAC,IAAI,cAAE,MAAM,GAAQ,EAAC,GAAG,KADhB,GAAG,CAEP,CACR,CAAC,IACS,CACd,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,YAAY,sBAAsB,EAAE,CAAC;QAC5C,OAAO,CACL,MAAC,UAAU,IAAC,KAAK,EAAC,sCAAsC,aACtD,wBACE,kEAAiD,EAChD,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CACtC,2BACE,KAAC,IAAI,cAAE,MAAM,GAAQ,EAAC,GAAG,KADhB,GAAG,CAEP,CACR,CAAC,IACA,EACJ,6CACmB,KAAC,IAAI,cAAE,KAAK,CAAC,YAAY,GAAQ,SAChD,IACO,CACd,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,YAAY,cAAc,EAAE,CAAC;QACpC,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAC,0CAA0C,YACzD,KAAK,CAAC,OAAO,GACH,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAC,6BAA6B,YAAE,KAAK,CAAC,OAAO,GAAc,CAC7E,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,UAAU,GAAwB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5D,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAO,EACtD,cAAK,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAO,IACpD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA0B,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE;IACjD,OAAO,CACL,eAAM,SAAS,EAAC,sHAAsH,YACnI,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {PropsWithChildren, type FC} from 'react';\nimport {\n  ChartSpecError,\n  InvalidColumnTypeError,\n  MissingColumnsError,\n  RequiredFieldsError,\n} from './chart-types';\n\ntype MosaicChartErrorProps = {\n  error: Error;\n};\n\n/**\n * Displays user-friendly error messages for chart configuration and validation errors.\n * Renders specialized UI for known error types (RequiredFieldsError, MissingColumnsError,\n * InvalidColumnTypeError) and a generic message for other errors.\n *\n * @param error - The error to display, typically from chart validation or creation\n */\nexport const MosaicChartError: FC<MosaicChartErrorProps> = ({error}) => {\n  if (error instanceof RequiredFieldsError) {\n    return (\n      <ErrorPanel title=\"Configure chart to display visualization\">\n        <span>Required fields are missing: </span>\n        {error.fieldNames.map((fieldName, index) => (\n          <span key={index}>\n            <Pill>{fieldName}</Pill>{' '}\n          </span>\n        ))}\n      </ErrorPanel>\n    );\n  }\n\n  if (error instanceof MissingColumnsError) {\n    return (\n      <ErrorPanel title=\"The visualization can't be displayed\">\n        <span>Selected columns are missing in the dataset: </span>\n        {error.columnNames.map((column, idx) => (\n          <span key={idx}>\n            <Pill>{column}</Pill>{' '}\n          </span>\n        ))}\n      </ErrorPanel>\n    );\n  }\n\n  if (error instanceof InvalidColumnTypeError) {\n    return (\n      <ErrorPanel title=\"The visualization can't be displayed\">\n        <p>\n          <span>Selected columns have invalid type: </span>\n          {error.columnNames.map((column, idx) => (\n            <span key={idx}>\n              <Pill>{column}</Pill>{' '}\n            </span>\n          ))}\n        </p>\n        <p>\n          Expected type is <Pill>{error.expectedType}</Pill>.\n        </p>\n      </ErrorPanel>\n    );\n  }\n\n  if (error instanceof ChartSpecError) {\n    return (\n      <ErrorPanel title=\"Configure chart to display visualization\">\n        {error.message}\n      </ErrorPanel>\n    );\n  }\n\n  return (\n    <ErrorPanel title=\"Ooops! Something went wrong\">{error.message}</ErrorPanel>\n  );\n};\n\ntype ErrorPanelProps = PropsWithChildren<{\n  title: string;\n}>;\n\nconst ErrorPanel: FC<ErrorPanelProps> = ({title, children}) => {\n  return (\n    <>\n      <div className=\"text-center font-medium\">{title}</div>\n      <div className=\"text-center text-xs\">{children}</div>\n    </>\n  );\n};\n\nconst Pill: FC<PropsWithChildren> = ({children}) => {\n  return (\n    <span className=\"inline-flex items-center rounded-md border border-gray-600 bg-gray-800 px-1 py-0.5 text-xs font-medium text-gray-300\">\n      {children}\n    </span>\n  );\n};\n"]}

package/dist/charts/MosaicChartSettingsButton.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+/**
+ * Props for MosaicChartSettingsButton.
+ *
+ * @param className - Optional CSS class name
+ * @param isSettingsOpen - Whether settings panel is currently open
+ * @param onToggleSettings - Callback to toggle settings panel visibility
+ */
+export type MosaicChartSettingsButtonProps = {
+    className?: string;
+    isSettingsOpen?: boolean;
+    onToggleSettings: () => void;
+};
+export declare const MosaicChartSettingsButton: FC<MosaicChartSettingsButtonProps>;
+//# sourceMappingURL=MosaicChartSettingsButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsButton.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChartSettingsButton.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAE9B;;;;;;GAMG;AACH,MAAM,MAAM,8BAA8B,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAuBxE,CAAC"}

package/dist/charts/MosaicChartSettingsButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@sqlrooms/ui';
+import { Settings2Icon } from 'lucide-react';
+export const MosaicChartSettingsButton = ({ className, isSettingsOpen, onToggleSettings, }) => {
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: cn('data-[state=active]:bg-accent h-6 w-6', className), onClick: onToggleSettings, "data-state": isSettingsOpen ? 'active' : 'inactive', children: _jsx(Settings2Icon, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Chart settings" })] }) }));
+};
+//# sourceMappingURL=MosaicChartSettingsButton.js.map

package/dist/charts/MosaicChartSettingsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartSettingsButton.js","sourceRoot":"","sources":["../../src/charts/MosaicChartSettingsButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,EAAE,EACF,OAAO,EACP,cAAc,EACd,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAgB3C,MAAM,CAAC,MAAM,yBAAyB,GAAuC,CAAC,EAC5E,SAAS,EACT,cAAc,EACd,gBAAgB,GACjB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,eAAe,cACd,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,EACjE,OAAO,EAAE,gBAAgB,gBACb,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,YAElD,KAAC,aAAa,IAAC,SAAS,EAAC,aAAa,GAAG,GAClC,GACM,EACjB,KAAC,cAAc,iCAAgC,IACvC,GACM,CACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  Button,\n  cn,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@sqlrooms/ui';\nimport {Settings2Icon} from 'lucide-react';\nimport {type FC} from 'react';\n\n/**\n * Props for MosaicChartSettingsButton.\n *\n * @param className - Optional CSS class name\n * @param isSettingsOpen - Whether settings panel is currently open\n * @param onToggleSettings - Callback to toggle settings panel visibility\n */\nexport type MosaicChartSettingsButtonProps = {\n  className?: string;\n  isSettingsOpen?: boolean;\n  onToggleSettings: () => void;\n};\n\nexport const MosaicChartSettingsButton: FC<MosaicChartSettingsButtonProps> = ({\n  className,\n  isSettingsOpen,\n  onToggleSettings,\n}) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className={cn('data-[state=active]:bg-accent h-6 w-6', className)}\n            onClick={onToggleSettings}\n            data-state={isSettingsOpen ? 'active' : 'inactive'}\n          >\n            <Settings2Icon className=\"h-3.5 w-3.5\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>Chart settings</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"]}

package/dist/charts/MosaicChartView.d.ts

@@ -8,6 +8,8 @@ export type MosaicChartViewProps = {
     retentionKey?: string;
     runtimeIssueKey?: string;
     className?: string;
+    dashboardId?: string;
+    panelId?: string;
 };
 export declare const MosaicChartView: FC<MosaicChartViewProps>;
 //# sourceMappingURL=MosaicChartView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicChartView.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChartView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAE,EAAyB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAS5D,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmGpD,CAAC"}
+{"version":3,"file":"MosaicChartView.d.ts","sourceRoot":"","sources":["../../src/charts/MosaicChartView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAE,EAAoC,MAAM,OAAO,CAAC;AAGjE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAW5D,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsHpD,CAAC"}

package/dist/charts/MosaicChartView.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SpinnerPane, cn } from '@sqlrooms/ui';
-import { createElement, useMemo } from 'react';
+import { createElement, useMemo, useEffect } from 'react';
 import { VgPlotChart } from '../VgPlotChart';
 import { useStoreWithMosaicDashboard } from '../dashboard/MosaicDashboardSlice';
+import { usePanelClientRegistration } from '../dashboard/usePanelClientRegistration';
+import { useChartPanelClients } from './useChartPanelClients';
 import { MosaicChartRuntimeIssuePanel } from './MosaicChartRuntimeIssuePanel';
 import { MosaicChartError } from './MosaicChartError';
 import { useBrushSelectionParams } from './useBrushSelectionParams';
@@ -10,9 +12,11 @@ import { useChartDataPolicy } from './useChartDataPolicy';
 import { useChartRetainerByKey } from './useChartRetainer';
 import { useMosaicChartRenderContext } from './useMosaicChartRenderContext';
 import { useRuntimeIssueReporter } from './useRuntimeIssueReporter';
-export const MosaicChartView = ({ dataTable, config, selectionName, retentionKey, runtimeIssueKey, className, }) => {
+export const MosaicChartView = ({ dataTable, config, selectionName, retentionKey, runtimeIssueKey, className, dashboardId, panelId, }) => {
     const connection = useStoreWithMosaicDashboard((state) => state.mosaic.connection);
     const retention = useChartRetainerByKey(retentionKey);
+    const chartClients = useChartPanelClients(retention);
+    usePanelClientRegistration(dashboardId, panelId, chartClients);
     const params = useBrushSelectionParams(selectionName);
     const dataPolicy = useChartDataPolicy(dataTable, config);
     const runtimeIssueReporter = useRuntimeIssueReporter(runtimeIssueKey);
@@ -23,25 +27,33 @@ export const MosaicChartView = ({ dataTable, config, selectionName, retentionKey
     const issue = useStoreWithMosaicDashboard((state) => runtimeIssueKey
         ? state.mosaicDashboard.getPanelIssueByKey(runtimeIssueKey)
         : undefined);
-    const renderContext = useMosaicChartRenderContext(dataTable, config);
+    const clearPanelIssue = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.clearPanelIssueByKey);
+    // Clear issue when config changes - new config means user is trying different settings
+    useEffect(() => {
+        if (runtimeIssueKey && issue) {
+            clearPanelIssue(runtimeIssueKey);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config, runtimeIssueKey, clearPanelIssue]);
+    const renderContext = useMosaicChartRenderContext(dataTable, config, selectionName);
     if (connection.status === 'loading' || connection.status === 'idle') {
         return _jsx(SpinnerPane, { className: "h-full w-full" });
     }
     if (connection.status === 'error') {
         return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: "Mosaic connection failed" }));
     }
+    if (renderContext.type === 'error') {
+        return (_jsx("div", { className: cn('flex h-full flex-col items-center justify-center', className), children: _jsx(MosaicChartError, { error: renderContext.error }) }));
+    }
     if (issue) {
         return _jsx(MosaicChartRuntimeIssuePanel, { issue: issue });
     }
-    if (renderContext.type === 'error') {
-        return (_jsx("div", { className: cn('flex h-full flex-col items-center justify-center', className), children: _jsx(MosaicChartError, { title: renderContext.title, message: renderContext.message }) }));
-    }
     if (renderContext.type === 'spec') {
         return (_jsx("div", { className: cn('h-full w-full', className), children: _jsx(VgPlotChart, { spec: renderContext.spec, params: params, retention: retention, dataPolicy: dataPolicy, runtimeIssueContext: runtimeIssueContext, runtimeIssueReporter: runtimeIssueReporter }) }));
     }
     if (renderContext.type === 'component') {
         return (_jsx("div", { className: cn('h-full w-full', className), children: createElement(renderContext.renderer, {
-                tableName: renderContext.dataTable.table.table,
+                table: renderContext.dataTable.table,
                 config,
                 coordinator: connection.coordinator,
                 params,

package/dist/charts/MosaicChartView.js.map

@@ -1 +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"]}
+{"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, useEffect} 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 {usePanelClientRegistration} from '../dashboard/usePanelClientRegistration';\nimport {useChartPanelClients} from './useChartPanelClients';\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  dashboardId?: string;\n  panelId?: string;\n};\n\nexport const MosaicChartView: FC<MosaicChartViewProps> = ({\n  dataTable,\n  config,\n  selectionName,\n  retentionKey,\n  runtimeIssueKey,\n  className,\n  dashboardId,\n  panelId,\n}) => {\n  const connection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.connection,\n  );\n\n  const retention = useChartRetainerByKey(retentionKey);\n  const chartClients = useChartPanelClients(retention);\n\n  usePanelClientRegistration(dashboardId, panelId, chartClients);\n\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 clearPanelIssue = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.clearPanelIssueByKey,\n  );\n\n  // Clear issue when config changes - new config means user is trying different settings\n  useEffect(() => {\n    if (runtimeIssueKey && issue) {\n      clearPanelIssue(runtimeIssueKey);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [config, runtimeIssueKey, clearPanelIssue]);\n\n  const renderContext = useMosaicChartRenderContext(\n    dataTable,\n    config,\n    selectionName,\n  );\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 (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 error={renderContext.error} />\n      </div>\n    );\n  }\n\n  if (issue) {\n    return <MosaicChartRuntimeIssuePanel issue={issue} />;\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          table: renderContext.dataTable.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/chart-settings/MosaicChartSettings.d.ts.map

@@ -1 +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"}
+{"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;AAahE,UAAU,4BAA4B;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AA6HD,eAAO,MAAM,mBAAmB;;;;;;;;;;;kBA7GuB,MAAM,IAAI;;;iBAuBd,MAAM,IAAI;;CA8FnD,CAAC"}

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

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { MosaicChartTypeSelector } from './MosaicChartTypeSelector';
 import { MosaicChartSettingsProvider, useMosaicChartSettingsContext, } from './MosaicChartSettingsContext';
-import { Button } from '@sqlrooms/ui';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@sqlrooms/ui';
 import { CodeIcon, XIcon } from 'lucide-react';
 import { useChartTypeDefinition } from '../useChartTypeDefinition';
 import { Field } from '../../components/Field';
@@ -27,10 +27,10 @@ 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" }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-5 w-5", onClick: onClick, "aria-label": "View spec", children: _jsx(CodeIcon, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "View spec" })] }) }));
 };
 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" }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _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" }) }) }), _jsx(TooltipContent, { children: "Close" })] }) }));
 };
 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 }));

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

@@ -1 +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"]}
+{"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 {\n  Button,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} 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    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-5 w-5\"\n            onClick={onClick}\n            aria-label=\"View spec\"\n          >\n            <CodeIcon className=\"h-3.5 w-3.5\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>View spec</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nconst MosaicChartSettingsCloseButton: FC<{onClick: () => void}> = ({\n  onClick,\n}) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\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        </TooltipTrigger>\n        <TooltipContent>Close</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\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/MosaicChartSettingsPanel.js

@@ -2,7 +2,7 @@ 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';
+import { useDataTable } from '@sqlrooms/db';
 export const MosaicChartSettingsPanel = ({ dashboardId, panel, tableName, spec, onClose, onViewSpec, }) => {
     const config = panel.config;
     const updatePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updatePanel);

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

@@ -1 +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"]}
+{"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,cAAc,CAAC;AAW1C,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 '@sqlrooms/db';\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.map

@@ -1 +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"}
+{"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;AAIvC,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,CAiChC,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ScrollArea } from '@sqlrooms/ui';
 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 }) }) })] }));
+    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(ScrollArea, { className: "min-h-0 flex-1", children: _jsx("div", { className: "h-full 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

@@ -1 +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"]}
+{"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,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,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,KAAC,UAAU,IAAC,SAAS,EAAC,gBAAgB,YACpC,cAAK,SAAS,EAAC,YAAY,YACzB,cAAK,SAAS,EAAC,uDAAuD,YACpE,KAAC,sBAAsB,IACrB,KAAK,EAAE,eAAe,EACtB,SAAS,EAAC,QAAQ,EAClB,sBAAsB,QACtB,QAAQ,SACR,GACE,GACF,GACK,IACT,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useMemo} from 'react';\nimport {ScrollArea} from '@sqlrooms/ui';\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      <ScrollArea className=\"min-h-0 flex-1\">\n        <div className=\"h-full 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      </ScrollArea>\n    </div>\n  );\n};\n"]}

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

@@ -1 +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"}
+{"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;AAG7C,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,CAkDpE,CAAC"}