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

package/README.md

@@ -41,6 +41,36 @@ export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
 );
 ```
 
+Mosaic's pre-aggregation optimization creates `preagg_*` cache tables lazily
+when users interact with cross-filtered selections. By default Mosaic writes
+those tables to the persistent `mosaic` schema. If the DuckDB database is a user
+project file, point pre-aggregates at an attached cache database or disable them:
+
+```tsx
+const mosaicCacheDatabase = '__sqlrooms_mosaic_cache';
+
+const connector = createWebSocketDuckDbConnector({
+  initializationQuery: [
+    `ATTACH IF NOT EXISTS ':memory:' AS ${mosaicCacheDatabase}`,
+    `CREATE SCHEMA IF NOT EXISTS ${mosaicCacheDatabase}.mosaic`,
+  ].join('; '),
+});
+
+export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
+  (set, get, store) => ({
+    // ... db slice using connector
+    ...createMosaicSlice({
+      preagg: {
+        schema: `${mosaicCacheDatabase}.mosaic`,
+      },
+    })(set, get, store),
+  }),
+);
+```
+
+Set `preagg.enabled` to `false` when you prefer to avoid pre-aggregate tables
+entirely.
+
 The Mosaic connection is automatically initialized when the DuckDB connector is ready. You can check the connection status:
 
 ```tsx
@@ -68,10 +98,9 @@ The `useMosaicClient` hook creates a Mosaic client that automatically queries da
 
 ```tsx
 import {Query, useMosaicClient} from '@sqlrooms/mosaic';
-import {Table} from 'apache-arrow';
 
 function MapView() {
-  const {data, isLoading, client} = useMosaicClient<Table>({
+  const {data, isLoading, client} = useMosaicClient({
     selectionName: 'brush', // Named selection for cross-filtering
     query: (filter: any) => {
       return Query.from('earthquakes')
@@ -89,6 +118,11 @@ function MapView() {
 }
 ```
 
+`useMosaicClient` returns an Apache Arrow table. Mosaic still uses its native
+table runtime internally, but that detail is hidden at the hook boundary so
+custom SQLRooms views can work with the same Arrow shape used by the DuckDB and
+deck packages.
+
 The hook accepts the following options:
 
 - `id` - Optional unique identifier for this client (auto-generated if not provided)
@@ -98,6 +132,131 @@ The hook accepts the following options:
 - `queryResult` - Optional callback when query results are received
 - `enabled` - Whether to automatically connect when mosaic is ready (default: `true`)
 
+### Mosaic Profiler Primitives
+
+The profiler primitives let you build a Quake-style cross-filtered table with
+per-column summaries on top of `MosaicSlice`.
+
+```tsx
+import {MosaicProfiler} from '@sqlrooms/mosaic';
+import {ScrollArea} from '@sqlrooms/ui';
+import {useMemo} from 'react';
+import {useRoomStore} from './store';
+
+function EarthquakeProfiler() {
+  const mosaic = useRoomStore((state) => state.mosaic);
+  const brush = useMemo(() => mosaic.getSelection('brush'), [mosaic]);
+
+  return (
+    <MosaicProfiler tableName="earthquakes" selection={brush} pageSize={25}>
+      <div className="flex min-h-0 flex-col border">
+        <ScrollArea className="min-h-0 flex-1">
+          <MosaicProfiler.Table>
+            <MosaicProfiler.Header />
+            <MosaicProfiler.Rows />
+          </MosaicProfiler.Table>
+        </ScrollArea>
+        <MosaicProfiler.StatusBar />
+      </div>
+    </MosaicProfiler>
+  );
+}
+```
+
+For the common case, prefer the compound `MosaicProfiler` API. `useMosaicProfiler`
+is still available when you need direct access to the profiler state for custom
+layout, sizing, or advanced composition.
+
+### Mosaic Dashboard Panels
+
+`MosaicDashboard` is a compound dashboard surface backed by generic dashboard
+panels instead of a chart-only list. Configure supported panel renderers and
+runtime add-panel actions when creating the dashboard slice.
+
+```tsx
+import {
+  createDefaultMosaicDashboardPanelRenderers,
+  createMosaicDashboardProfilerPanelConfig,
+  createMosaicDashboardSlice,
+  createMosaicDashboardVgPlotPanelConfig,
+  MosaicDashboard,
+} from '@sqlrooms/mosaic';
+
+const dashboardSlice = createMosaicDashboardSlice({
+  panelRenderers: createDefaultMosaicDashboardPanelRenderers(),
+  // Optional: pass chartTypes/chartBuilders to customize Add Chart.
+  // Optional: pass addPanelActions to add app-specific menu entries.
+});
+
+function Dashboard() {
+  return <MosaicDashboard dashboardId="main" />;
+}
+
+function addProfiler(store: RoomStore) {
+  store.getState().mosaicDashboard.addPanel(
+    'main',
+    createMosaicDashboardProfilerPanelConfig({
+      source: {tableName: 'earthquakes'},
+    }),
+  );
+}
+```
+
+Dashboards have a creation-time `layoutType` of either `dock` or `grid`.
+Existing persisted dashboards default to `dock`; pass `'grid'` to
+`createDashboard(title, 'grid')` or `ensureDashboard(id, title, 'grid')` when
+creating a dashboard that should use the scrollable grid renderer. Re-ensuring
+an existing dashboard does not convert between layout types.
+
+Dashboard panel sources may specify a `tableName` or trusted `sqlQuery`; when a
+panel omits a source it falls back to the dashboard selected table. Panel renderer
+definitions and chart builder definitions are runtime-only and intentionally
+live outside persisted dashboard config.
+
+### Chart Builder Compound Components
+
+The chart builder UI can be used as a compound component API for flexible composition:
+
+```tsx
+import {
+  ChartBuilderRoot,
+  ChartBuilderTrigger,
+  ChartBuilderDialogContent,
+  ChartBuilderContent,
+} from '@sqlrooms/mosaic';
+
+function MyDashboard() {
+  const columns = [...]; // Your table columns
+
+  return (
+    <ChartBuilderRoot
+      tableName="earthquakes"
+      columns={columns}
+      onCreateChart={(spec, title) => {
+        // Handle chart creation
+      }}
+    >
+      <ChartBuilderTrigger />
+      <ChartBuilderDialogContent>
+        <ChartBuilderContent />
+      </ChartBuilderDialogContent>
+    </ChartBuilderRoot>
+  );
+}
+```
+
+Available compound components:
+
+- `ChartBuilderRoot` - Context provider and dialog wrapper
+- `ChartBuilderTrigger` - Button to open the dialog
+- `ChartBuilderDialogContent` - Dialog content wrapper
+- `ChartBuilderContent` - Main chart builder UI (type grid + fields + actions)
+- `ChartBuilderTypeGrid` - Chart type selector grid
+- `ChartBuilderFields` - Field selector inputs
+- `ChartBuilderActions` - Back/Create buttons
+
+For simpler use cases, the legacy `ChartBuilderDialog` component is still available but deprecated.
+
 ### Working with Selections
 
 Selections enable cross-filtering between multiple visualizations. You can get or create a named selection from the store:

package/dist/MosaicChart.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Compound component for composable Mosaic chart editing.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container spec={mySpec} onSpecChange={save}>
+ *   <MosaicChart.Display />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export declare const MosaicChart: {
+    readonly Container: import("react").FC<import(".").MosaicChartContainerProps>;
+    readonly Display: import("react").FC<import(".").MosaicChartDisplayProps>;
+    readonly SpecEditor: import("react").FC<import(".").MosaicSpecEditorPanelProps>;
+    readonly Actions: import("react").FC<import(".").MosaicChartEditorActionsProps>;
+    readonly CodeMirrorEditor: import("react").FC<import(".").MosaicCodeMirrorEditorProps>;
+};
+//# sourceMappingURL=MosaicChart.d.ts.map

package/dist/MosaicChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChart.d.ts","sourceRoot":"","sources":["../src/MosaicChart.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/MosaicChart.js

@@ -0,0 +1,25 @@
+import { MosaicChartContainer } from './editor/MosaicChartContainer';
+import { MosaicChartDisplay } from './editor/MosaicChartDisplay';
+import { MosaicSpecEditorPanel } from './editor/MosaicSpecEditorPanel';
+import { MosaicChartEditorActions } from './editor/MosaicChartEditorActions';
+import { MosaicCodeMirrorEditor } from './editor/MosaicCodeMirrorEditor';
+/**
+ * Compound component for composable Mosaic chart editing.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container spec={mySpec} onSpecChange={save}>
+ *   <MosaicChart.Display />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export const MosaicChart = {
+    Container: MosaicChartContainer,
+    Display: MosaicChartDisplay,
+    SpecEditor: MosaicSpecEditorPanel,
+    Actions: MosaicChartEditorActions,
+    CodeMirrorEditor: MosaicCodeMirrorEditor,
+};
+//# sourceMappingURL=MosaicChart.js.map

package/dist/MosaicChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChart.js","sourceRoot":"","sources":["../src/MosaicChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,sBAAsB,EAAC,MAAM,iCAAiC,CAAC;AAEvE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS,EAAE,oBAAoB;IAC/B,OAAO,EAAE,kBAAkB;IAC3B,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,wBAAwB;IACjC,gBAAgB,EAAE,sBAAsB;CAChC,CAAC","sourcesContent":["import {MosaicChartContainer} from './editor/MosaicChartContainer';\nimport {MosaicChartDisplay} from './editor/MosaicChartDisplay';\nimport {MosaicSpecEditorPanel} from './editor/MosaicSpecEditorPanel';\nimport {MosaicChartEditorActions} from './editor/MosaicChartEditorActions';\nimport {MosaicCodeMirrorEditor} from './editor/MosaicCodeMirrorEditor';\n\n/**\n * Compound component for composable Mosaic chart editing.\n *\n * @example\n * ```tsx\n * <MosaicChart.Container spec={mySpec} onSpecChange={save}>\n *   <MosaicChart.Display />\n *   <MosaicChart.SpecEditor />\n *   <MosaicChart.Actions />\n * </MosaicChart.Container>\n * ```\n */\nexport const MosaicChart = {\n  Container: MosaicChartContainer,\n  Display: MosaicChartDisplay,\n  SpecEditor: MosaicSpecEditorPanel,\n  Actions: MosaicChartEditorActions,\n  CodeMirrorEditor: MosaicCodeMirrorEditor,\n} as const;\n"]}

package/dist/MosaicChartBuilder.d.ts

@@ -0,0 +1,67 @@
+import type { ReactElement } from 'react';
+import { mosaicChartBuilders } from './chart-builders/builders';
+import { mosaicChartTypes } from './chart-types';
+import { ChartBuilderActions } from './chart-builders/ChartBuilderActions';
+import { ChartBuilderContent } from './chart-builders/ChartBuilderContent';
+import { ChartBuilderDialog, ChartBuilderDialogContent, ChartBuilderTrigger } from './chart-builders/ChartBuilderDialog';
+import { ChartBuilderRoot, type ChartBuilderRootProps } from './chart-builders/ChartBuilderRoot';
+import { ChartBuilderFields } from './chart-builders/ChartBuilderFields';
+import { ChartBuilderTypeGrid } from './chart-builders/ChartBuilderTypeGrid';
+import { FieldSelectorInput } from './chart-builders/FieldSelectorInput';
+/**
+ * Compound component for building Mosaic charts from templates.
+ *
+ * Use `<MosaicChartBuilder>` as the root; it provides context and wraps a
+ * Radix Dialog.
+ *
+ * @example Compound usage (recommended)
+ * ```tsx
+ * <MosaicChartBuilder
+ *   tableName="my_table"
+ *   columns={columns}
+ *   onCreateChart={handleCreate}
+ * >
+ *   <MosaicChartBuilder.Trigger />
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
+ *
+ * @example Custom trigger button
+ * ```tsx
+ * <MosaicChartBuilder
+ *   tableName="my_table"
+ *   columns={columns}
+ *   onCreateChart={handleCreate}
+ * >
+ *   <MosaicChartBuilder.Trigger variant="ghost" size="icon">
+ *     <PlusIcon />
+ *   </MosaicChartBuilder.Trigger>
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
+ *
+ * @example Inline builder (no dialog)
+ * ```tsx
+ * <MosaicChartBuilder.Content
+ *   tableName="my_table"
+ *   columns={columns}
+ *   onCreateChart={handleCreate}
+ * />
+ * ```
+ */
+type MosaicChartBuilderCompoundComponent = ((props: ChartBuilderRootProps) => ReactElement) & {
+    Root: typeof ChartBuilderRoot;
+    chartTypes: typeof mosaicChartTypes;
+    chartBuilders: typeof mosaicChartBuilders;
+    Trigger: typeof ChartBuilderTrigger;
+    Dialog: typeof ChartBuilderDialogContent;
+    Content: typeof ChartBuilderContent;
+    TypeGrid: typeof ChartBuilderTypeGrid;
+    Fields: typeof ChartBuilderFields;
+    Actions: typeof ChartBuilderActions;
+    FieldSelector: typeof FieldSelectorInput;
+    LegacyDialog: typeof ChartBuilderDialog;
+};
+export declare const MosaicChartBuilder: MosaicChartBuilderCompoundComponent;
+export {};
+//# sourceMappingURL=MosaicChartBuilder.d.ts.map

package/dist/MosaicChartBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartBuilder.d.ts","sourceRoot":"","sources":["../src/MosaicChartBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AACzE,OAAO,EACL,kBAAkB,EAClB,yBAAyB,EACzB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC3B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAC,oBAAoB,EAAC,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAC,kBAAkB,EAAC,MAAM,qCAAqC,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,KAAK,mCAAmC,GAAG,CAAC,CAC1C,KAAK,EAAE,qBAAqB,KACzB,YAAY,CAAC,GAAG;IACnB,IAAI,EAAE,OAAO,gBAAgB,CAAC;IAC9B,UAAU,EAAE,OAAO,gBAAgB,CAAC;IACpC,aAAa,EAAE,OAAO,mBAAmB,CAAC;IAC1C,OAAO,EAAE,OAAO,mBAAmB,CAAC;IACpC,MAAM,EAAE,OAAO,yBAAyB,CAAC;IACzC,OAAO,EAAE,OAAO,mBAAmB,CAAC;IACpC,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC,MAAM,EAAE,OAAO,kBAAkB,CAAC;IAClC,OAAO,EAAE,OAAO,mBAAmB,CAAC;IACpC,aAAa,EAAE,OAAO,kBAAkB,CAAC;IACzC,YAAY,EAAE,OAAO,kBAAkB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,mCA0B9B,CAAC"}

package/dist/MosaicChartBuilder.js

@@ -0,0 +1,33 @@
+import { mosaicChartBuilders } from './chart-builders/builders';
+import { mosaicChartTypes } from './chart-types';
+import { ChartBuilderActions } from './chart-builders/ChartBuilderActions';
+import { ChartBuilderContent } from './chart-builders/ChartBuilderContent';
+import { ChartBuilderDialog, ChartBuilderDialogContent, ChartBuilderTrigger, } from './chart-builders/ChartBuilderDialog';
+import { ChartBuilderRoot, } from './chart-builders/ChartBuilderRoot';
+import { ChartBuilderFields } from './chart-builders/ChartBuilderFields';
+import { ChartBuilderTypeGrid } from './chart-builders/ChartBuilderTypeGrid';
+import { FieldSelectorInput } from './chart-builders/FieldSelectorInput';
+export const MosaicChartBuilder = Object.assign(ChartBuilderRoot, {
+    Root: ChartBuilderRoot,
+    /** Named built-in chart-type definitions. */
+    chartTypes: mosaicChartTypes,
+    /** Named built-in chart templates (same objects as default set). */
+    chartBuilders: mosaicChartBuilders,
+    /** Default trigger button; customize via ButtonProps or children. */
+    Trigger: ChartBuilderTrigger,
+    /** Dialog content pane with chart-builder steps. */
+    Dialog: ChartBuilderDialogContent,
+    /** Standalone builder UI (no dialog wrapper). */
+    Content: ChartBuilderContent,
+    /** Built-in chart-type picker grid. */
+    TypeGrid: ChartBuilderTypeGrid,
+    /** Field selectors for the currently selected chart type. */
+    Fields: ChartBuilderFields,
+    /** Back/Create actions for the current chart type selection. */
+    Actions: ChartBuilderActions,
+    /** Field selector primitive. */
+    FieldSelector: FieldSelectorInput,
+    /** Legacy one-shot dialog (backward-compatible). */
+    LegacyDialog: ChartBuilderDialog,
+});
+//# sourceMappingURL=MosaicChartBuilder.js.map

package/dist/MosaicChartBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartBuilder.js","sourceRoot":"","sources":["../src/MosaicChartBuilder.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AACzE,OAAO,EACL,kBAAkB,EAClB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,gBAAgB,GAEjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAC,oBAAoB,EAAC,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAC,kBAAkB,EAAC,MAAM,qCAAqC,CAAC;AA4DvE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,MAAM,CAAC,MAAM,CACX,gBAAkE,EAClE;IACE,IAAI,EAAE,gBAAgB;IACtB,6CAA6C;IAC7C,UAAU,EAAE,gBAAgB;IAC5B,oEAAoE;IACpE,aAAa,EAAE,mBAAmB;IAClC,qEAAqE;IACrE,OAAO,EAAE,mBAAmB;IAC5B,oDAAoD;IACpD,MAAM,EAAE,yBAAyB;IACjC,iDAAiD;IACjD,OAAO,EAAE,mBAAmB;IAC5B,uCAAuC;IACvC,QAAQ,EAAE,oBAAoB;IAC9B,6DAA6D;IAC7D,MAAM,EAAE,kBAAkB;IAC1B,gEAAgE;IAChE,OAAO,EAAE,mBAAmB;IAC5B,gCAAgC;IAChC,aAAa,EAAE,kBAAkB;IACjC,oDAAoD;IACpD,YAAY,EAAE,kBAAkB;CACjC,CACF,CAAC","sourcesContent":["import type {ReactElement} from 'react';\nimport {mosaicChartBuilders} from './chart-builders/builders';\nimport {mosaicChartTypes} from './chart-types';\nimport {ChartBuilderActions} from './chart-builders/ChartBuilderActions';\nimport {ChartBuilderContent} from './chart-builders/ChartBuilderContent';\nimport {\n  ChartBuilderDialog,\n  ChartBuilderDialogContent,\n  ChartBuilderTrigger,\n} from './chart-builders/ChartBuilderDialog';\nimport {\n  ChartBuilderRoot,\n  type ChartBuilderRootProps,\n} from './chart-builders/ChartBuilderRoot';\nimport {ChartBuilderFields} from './chart-builders/ChartBuilderFields';\nimport {ChartBuilderTypeGrid} from './chart-builders/ChartBuilderTypeGrid';\nimport {FieldSelectorInput} from './chart-builders/FieldSelectorInput';\n\n/**\n * Compound component for building Mosaic charts from templates.\n *\n * Use `<MosaicChartBuilder>` as the root; it provides context and wraps a\n * Radix Dialog.\n *\n * @example Compound usage (recommended)\n * ```tsx\n * <MosaicChartBuilder\n *   tableName=\"my_table\"\n *   columns={columns}\n *   onCreateChart={handleCreate}\n * >\n *   <MosaicChartBuilder.Trigger />\n *   <MosaicChartBuilder.Dialog />\n * </MosaicChartBuilder>\n * ```\n *\n * @example Custom trigger button\n * ```tsx\n * <MosaicChartBuilder\n *   tableName=\"my_table\"\n *   columns={columns}\n *   onCreateChart={handleCreate}\n * >\n *   <MosaicChartBuilder.Trigger variant=\"ghost\" size=\"icon\">\n *     <PlusIcon />\n *   </MosaicChartBuilder.Trigger>\n *   <MosaicChartBuilder.Dialog />\n * </MosaicChartBuilder>\n * ```\n *\n * @example Inline builder (no dialog)\n * ```tsx\n * <MosaicChartBuilder.Content\n *   tableName=\"my_table\"\n *   columns={columns}\n *   onCreateChart={handleCreate}\n * />\n * ```\n */\n\ntype MosaicChartBuilderCompoundComponent = ((\n  props: ChartBuilderRootProps,\n) => ReactElement) & {\n  Root: typeof ChartBuilderRoot;\n  chartTypes: typeof mosaicChartTypes;\n  chartBuilders: typeof mosaicChartBuilders;\n  Trigger: typeof ChartBuilderTrigger;\n  Dialog: typeof ChartBuilderDialogContent;\n  Content: typeof ChartBuilderContent;\n  TypeGrid: typeof ChartBuilderTypeGrid;\n  Fields: typeof ChartBuilderFields;\n  Actions: typeof ChartBuilderActions;\n  FieldSelector: typeof FieldSelectorInput;\n  LegacyDialog: typeof ChartBuilderDialog;\n};\n\nexport const MosaicChartBuilder: MosaicChartBuilderCompoundComponent =\n  Object.assign(\n    ChartBuilderRoot as (props: ChartBuilderRootProps) => ReactElement,\n    {\n      Root: ChartBuilderRoot,\n      /** Named built-in chart-type definitions. */\n      chartTypes: mosaicChartTypes,\n      /** Named built-in chart templates (same objects as default set). */\n      chartBuilders: mosaicChartBuilders,\n      /** Default trigger button; customize via ButtonProps or children. */\n      Trigger: ChartBuilderTrigger,\n      /** Dialog content pane with chart-builder steps. */\n      Dialog: ChartBuilderDialogContent,\n      /** Standalone builder UI (no dialog wrapper). */\n      Content: ChartBuilderContent,\n      /** Built-in chart-type picker grid. */\n      TypeGrid: ChartBuilderTypeGrid,\n      /** Field selectors for the currently selected chart type. */\n      Fields: ChartBuilderFields,\n      /** Back/Create actions for the current chart type selection. */\n      Actions: ChartBuilderActions,\n      /** Field selector primitive. */\n      FieldSelector: FieldSelectorInput,\n      /** Legacy one-shot dialog (backward-compatible). */\n      LegacyDialog: ChartBuilderDialog,\n    },\n  );\n"]}

package/dist/MosaicColorLegend.d.ts

@@ -0,0 +1,18 @@
+import type { ColorScaleConfig } from '@sqlrooms/color-scales';
+import { Selection } from '@uwdata/mosaic-core';
+type LegendDomainValue = string | number | Date;
+type CreateMosaicColorLegendPlotOptions = {
+    colorScale: ColorScaleConfig;
+    selection?: Selection;
+    domain?: ReadonlyArray<LegendDomainValue>;
+    title?: string;
+    width?: number;
+    tickFormat?: string;
+};
+export type MosaicColorLegendProps = CreateMosaicColorLegendPlotOptions & {
+    className?: string;
+};
+export declare function createMosaicColorLegendPlot({ colorScale, selection, domain, title, width, tickFormat, }: CreateMosaicColorLegendPlotOptions): any;
+export declare function MosaicColorLegend({ colorScale, selection, domain, title, width, tickFormat, className, }: MosaicColorLegendProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=MosaicColorLegend.d.ts.map

package/dist/MosaicColorLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicColorLegend.d.ts","sourceRoot":"","sources":["../src/MosaicColorLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAG7D,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAK9C,KAAK,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AAEhD,KAAK,kCAAkC,GAAG;IACxC,UAAU,EAAE,gBAAgB,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,kCAAkC,GAAG;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuDF,wBAAgB,2BAA2B,CAAC,EAC1C,UAAU,EACV,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAW,EACX,UAAkB,GACnB,EAAE,kCAAkC,OAiDpC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,kDAgDxB"}

package/dist/MosaicColorLegend.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveColorLegendTitle } from '@sqlrooms/color-scales';
+import { cn, getResolvedTheme, useTheme } from '@sqlrooms/ui';
+import * as vg from '@uwdata/vgplot';
+import { useMemo } from 'react';
+import { VgPlotChart } from './VgPlotChart';
+function isExplicitNumericDomain(domain) {
+    return domain !== 'auto';
+}
+function resolveLegendDomain(colorScale, domain) {
+    if ((colorScale.type === 'sequential' ||
+        colorScale.type === 'diverging' ||
+        colorScale.type === 'quantize') &&
+        isExplicitNumericDomain(colorScale.domain)) {
+        return colorScale.domain;
+    }
+    return domain;
+}
+function getVgColorScaleType(colorScale) {
+    switch (colorScale.type) {
+        case 'sequential':
+            return 'linear';
+        case 'diverging':
+            return 'diverging';
+        case 'quantize':
+            return 'quantize';
+        case 'quantile':
+            return 'quantile';
+        case 'threshold':
+            return 'threshold';
+        case 'categorical':
+            return 'categorical';
+        default: {
+            const _exhaustive = colorScale;
+            throw new Error(`Unknown color scale type: ${_exhaustive.type}`);
+        }
+    }
+}
+function supportsInteractiveLegend(colorScale) {
+    return (colorScale.type === 'sequential' ||
+        colorScale.type === 'diverging' ||
+        colorScale.type === 'categorical');
+}
+export function createMosaicColorLegendPlot({ colorScale, selection, domain, title, width = 220, tickFormat = '.1f', }) {
+    const resolvedDomain = resolveLegendDomain(colorScale, domain);
+    const legendTitle = resolveColorLegendTitle(colorScale, title);
+    const plotAttributes = [
+        vg.colorScale(getVgColorScaleType(colorScale)),
+        vg.colorScheme(colorScale.scheme),
+        vg.colorLabel(legendTitle),
+        vg.marginTop(0),
+        vg.marginRight(0),
+        vg.marginBottom(0),
+        vg.marginLeft(0),
+    ];
+    if ('clamp' in colorScale && colorScale.clamp !== undefined) {
+        plotAttributes.push(vg.colorClamp(colorScale.clamp));
+    }
+    if ('reverse' in colorScale && colorScale.reverse !== undefined) {
+        plotAttributes.push(vg.colorReverse(colorScale.reverse));
+    }
+    if (colorScale.type === 'diverging') {
+        if (Array.isArray(resolvedDomain) && resolvedDomain.length === 3) {
+            plotAttributes.push(vg.colorDomain([resolvedDomain[0], resolvedDomain[2]]), vg.colorPivot(resolvedDomain[1]));
+        }
+        else if (Array.isArray(resolvedDomain) && resolvedDomain.length === 2) {
+            plotAttributes.push(vg.colorDomain(resolvedDomain));
+        }
+    }
+    else if (colorScale.type === 'threshold') {
+        plotAttributes.push(vg.colorDomain(colorScale.thresholds));
+    }
+    else if (resolvedDomain) {
+        plotAttributes.push(vg.colorDomain(resolvedDomain));
+    }
+    if (colorScale.type === 'quantize' || colorScale.type === 'quantile') {
+        plotAttributes.push(vg.colorN(colorScale.bins ?? 5));
+    }
+    const backingPlot = vg.plot(...plotAttributes);
+    return vg.colorLegend({
+        for: backingPlot,
+        as: supportsInteractiveLegend(colorScale) ? selection : undefined,
+        field: colorScale.field,
+        width,
+        tickFormat,
+        label: legendTitle,
+    });
+}
+export function MosaicColorLegend({ colorScale, selection, domain, title, width, tickFormat, className, }) {
+    const { theme } = useTheme();
+    const resolvedTheme = getResolvedTheme(theme);
+    const legendSpecKey = JSON.stringify({
+        colorScale,
+        domain,
+        title,
+        width,
+        tickFormat,
+    });
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+    const plot = useMemo(() => createMosaicColorLegendPlot({
+        colorScale,
+        selection,
+        domain,
+        title,
+        width,
+        tickFormat,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- deep-equal via serialized key instead of object refs
+    [legendSpecKey, selection]);
+    if (!plot) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('pointer-events-auto rounded-md border px-3 py-2 shadow-lg backdrop-blur-sm', 'border-slate-200 bg-white/95 text-slate-900', 'dark:border-slate-700 dark:bg-[#1f1d1b]/90 dark:text-slate-100', '[&_svg]:block [&_svg]:overflow-visible', '[&_svg_line]:stroke-current [&_svg_path]:stroke-current [&_svg_text]:fill-current', resolvedTheme === 'dark' &&
+            '[&_svg_.domain]:stroke-slate-500 [&_svg_line]:stroke-slate-500', resolvedTheme === 'light' &&
+            '[&_svg_.domain]:stroke-slate-400 [&_svg_line]:stroke-slate-400', className), children: _jsx(VgPlotChart, { plot: plot }) }));
+}
+//# sourceMappingURL=MosaicColorLegend.js.map

package/dist/MosaicColorLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicColorLegend.js","sourceRoot":"","sources":["../src/MosaicColorLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {ColorScaleConfig} from '@sqlrooms/color-scales';\nimport {resolveColorLegendTitle} from '@sqlrooms/color-scales';\nimport {cn, getResolvedTheme, useTheme} from '@sqlrooms/ui';\nimport {Selection} from '@uwdata/mosaic-core';\nimport * as vg from '@uwdata/vgplot';\nimport {useMemo} from 'react';\nimport {VgPlotChart} from './VgPlotChart';\n\ntype LegendDomainValue = string | number | Date;\n\ntype CreateMosaicColorLegendPlotOptions = {\n  colorScale: ColorScaleConfig;\n  selection?: Selection;\n  domain?: ReadonlyArray<LegendDomainValue>;\n  title?: string;\n  width?: number;\n  tickFormat?: string;\n};\n\nexport type MosaicColorLegendProps = CreateMosaicColorLegendPlotOptions & {\n  className?: string;\n};\n\nfunction isExplicitNumericDomain(\n  domain: 'auto' | [number, number] | [number, number, number],\n): domain is [number, number] | [number, number, number] {\n  return domain !== 'auto';\n}\n\nfunction resolveLegendDomain(\n  colorScale: ColorScaleConfig,\n  domain?: ReadonlyArray<LegendDomainValue>,\n) {\n  if (\n    (colorScale.type === 'sequential' ||\n      colorScale.type === 'diverging' ||\n      colorScale.type === 'quantize') &&\n    isExplicitNumericDomain(colorScale.domain)\n  ) {\n    return colorScale.domain;\n  }\n\n  return domain;\n}\n\nfunction getVgColorScaleType(colorScale: ColorScaleConfig) {\n  switch (colorScale.type) {\n    case 'sequential':\n      return 'linear';\n    case 'diverging':\n      return 'diverging';\n    case 'quantize':\n      return 'quantize';\n    case 'quantile':\n      return 'quantile';\n    case 'threshold':\n      return 'threshold';\n    case 'categorical':\n      return 'categorical';\n    default: {\n      const _exhaustive: never = colorScale;\n      throw new Error(\n        `Unknown color scale type: ${(_exhaustive as ColorScaleConfig).type}`,\n      );\n    }\n  }\n}\n\nfunction supportsInteractiveLegend(colorScale: ColorScaleConfig) {\n  return (\n    colorScale.type === 'sequential' ||\n    colorScale.type === 'diverging' ||\n    colorScale.type === 'categorical'\n  );\n}\n\nexport function createMosaicColorLegendPlot({\n  colorScale,\n  selection,\n  domain,\n  title,\n  width = 220,\n  tickFormat = '.1f',\n}: CreateMosaicColorLegendPlotOptions) {\n  const resolvedDomain = resolveLegendDomain(colorScale, domain);\n  const legendTitle = resolveColorLegendTitle(colorScale, title);\n  const plotAttributes: Array<(plot: any) => void> = [\n    vg.colorScale(getVgColorScaleType(colorScale)),\n    vg.colorScheme(colorScale.scheme),\n    vg.colorLabel(legendTitle),\n    vg.marginTop(0),\n    vg.marginRight(0),\n    vg.marginBottom(0),\n    vg.marginLeft(0),\n  ];\n\n  if ('clamp' in colorScale && colorScale.clamp !== undefined) {\n    plotAttributes.push(vg.colorClamp(colorScale.clamp));\n  }\n\n  if ('reverse' in colorScale && colorScale.reverse !== undefined) {\n    plotAttributes.push(vg.colorReverse(colorScale.reverse));\n  }\n\n  if (colorScale.type === 'diverging') {\n    if (Array.isArray(resolvedDomain) && resolvedDomain.length === 3) {\n      plotAttributes.push(\n        vg.colorDomain([resolvedDomain[0], resolvedDomain[2]]),\n        vg.colorPivot(resolvedDomain[1]),\n      );\n    } else if (Array.isArray(resolvedDomain) && resolvedDomain.length === 2) {\n      plotAttributes.push(vg.colorDomain(resolvedDomain));\n    }\n  } else if (colorScale.type === 'threshold') {\n    plotAttributes.push(vg.colorDomain(colorScale.thresholds));\n  } else if (resolvedDomain) {\n    plotAttributes.push(vg.colorDomain(resolvedDomain));\n  }\n\n  if (colorScale.type === 'quantize' || colorScale.type === 'quantile') {\n    plotAttributes.push(vg.colorN(colorScale.bins ?? 5));\n  }\n\n  const backingPlot = vg.plot(...plotAttributes);\n  return vg.colorLegend({\n    for: backingPlot,\n    as: supportsInteractiveLegend(colorScale) ? selection : undefined,\n    field: colorScale.field,\n    width,\n    tickFormat,\n    label: legendTitle,\n  });\n}\n\nexport function MosaicColorLegend({\n  colorScale,\n  selection,\n  domain,\n  title,\n  width,\n  tickFormat,\n  className,\n}: MosaicColorLegendProps) {\n  const {theme} = useTheme();\n  const resolvedTheme = getResolvedTheme(theme);\n  const legendSpecKey = JSON.stringify({\n    colorScale,\n    domain,\n    title,\n    width,\n    tickFormat,\n  });\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const plot = useMemo(\n    () =>\n      createMosaicColorLegendPlot({\n        colorScale,\n        selection,\n        domain,\n        title,\n        width,\n        tickFormat,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- deep-equal via serialized key instead of object refs\n    [legendSpecKey, selection],\n  );\n\n  if (!plot) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-auto rounded-md border px-3 py-2 shadow-lg backdrop-blur-sm',\n        'border-slate-200 bg-white/95 text-slate-900',\n        'dark:border-slate-700 dark:bg-[#1f1d1b]/90 dark:text-slate-100',\n        '[&_svg]:block [&_svg]:overflow-visible',\n        '[&_svg_line]:stroke-current [&_svg_path]:stroke-current [&_svg_text]:fill-current',\n        resolvedTheme === 'dark' &&\n          '[&_svg_.domain]:stroke-slate-500 [&_svg_line]:stroke-slate-500',\n        resolvedTheme === 'light' &&\n          '[&_svg_.domain]:stroke-slate-400 [&_svg_line]:stroke-slate-400',\n        className,\n      )}\n    >\n      <VgPlotChart plot={plot} />\n    </div>\n  );\n}\n"]}

package/dist/MosaicSlice.d.ts

@@ -1,11 +1,18 @@
-import { DuckDbSliceState } from '@sqlrooms/duckdb';
+import { type DuckDbSliceState } from '@sqlrooms/duckdb';
 import { type SliceFunctions } from '@sqlrooms/room-store';
 import { Connector, Coordinator, makeClient, Selection } from '@uwdata/mosaic-core';
 import { Query } from '@uwdata/mosaic-sql';
+import type { Table as ArrowTable } from 'apache-arrow';
 import { z } from 'zod';
 export declare const MosaicSliceConfig: z.ZodObject<{}, z.core.$strip>;
 export type MosaicSliceConfig = z.infer<typeof MosaicSliceConfig>;
-export type MosaicClientOptions<T = unknown> = {
+export type MosaicPreAggregateOptions = {
+    /** Database schema/namespace for Mosaic pre-aggregate tables. */
+    schema?: string;
+    /** Enable or disable Mosaic's pre-aggregation optimization. */
+    enabled?: boolean;
+};
+export type MosaicClientOptions = {
     /** Unique identifier for this client */
     id?: string;
     /** Selection name for cross-filtering (will create if doesn't exist) */
@@ -15,16 +22,19 @@ export type MosaicClientOptions<T = unknown> = {
     /** Query builder function that receives the current filter */
     query: (filter: unknown) => ReturnType<typeof Query.from>;
     /** Callback when query results are received */
-    queryResult?: (result: T) => void;
+    queryResult?: (result: ArrowTable) => void;
+    /** Callback when query execution fails */
+    queryError?: (error: Error) => void;
 };
-export type TrackedClient<T = unknown> = {
+export type TrackedClient = {
     id: string;
     client: ReturnType<typeof makeClient>;
     createdAt: number;
     isLoading: boolean;
-    data: T | null;
+    data: unknown | null;
+    error?: Error;
     selection?: Selection;
-    queryResultCallback?: (result: T) => void;
+    queryResultCallback?: (result: ArrowTable) => void;
 };
 export type MosaicSliceState = {
     mosaic: SliceFunctions & {
@@ -32,7 +42,7 @@ export type MosaicSliceState = {
             status: 'idle' | 'loading';
         } | {
             status: 'ready';
-            connector: Connector;
+            connector?: Connector;
             coordinator: Coordinator;
         } | {
             status: 'error';
@@ -40,18 +50,19 @@ export type MosaicSliceState = {
         };
         config: MosaicSliceConfig;
         /** Record of registered clients by id */
-        clients: Record<string, TrackedClient<unknown>>;
+        clients: Record<string, TrackedClient>;
         /** Named selections for cross-filtering (e.g., 'brush', 'hover') */
         selections: Record<string, Selection>;
         initialize: () => Promise<void>;
         /** Get or create a named selection for cross-filtering */
         getSelection: (name: string, type?: 'crossfilter' | 'single' | 'union') => Selection;
         /** Create a mosaic client and register it */
-        createClient: <T>(options: MosaicClientOptions<T>) => string;
+        createClient: (options: MosaicClientOptions) => string;
         /** Ensure a client exists with given options (idempotent - creates or updates as needed) */
-        ensureClient: <T>(options: MosaicClientOptions<T> & {
+        ensureClient: (options: MosaicClientOptions & {
             id: string;
-            onQueryResult?: (result: T) => void;
+            onQueryResult?: (result: ArrowTable) => void;
+            onQueryError?: (error: Error) => void;
         }) => void;
         /** Disconnect and remove a client by id */
         destroyClient: (id: string) => void;
@@ -60,9 +71,12 @@ export type MosaicSliceState = {
     };
 };
 export declare function createDefaultMosaicConfig(props?: Partial<MosaicSliceConfig>): MosaicSliceConfig;
-export declare function createMosaicSlice(props?: {
+export type CreateMosaicSliceProps = {
     config?: Partial<MosaicSliceConfig>;
-}): import("zustand").StateCreator<MosaicSliceState>;
+    coordinator?: Coordinator;
+    preagg?: MosaicPreAggregateOptions;
+};
+export declare function createMosaicSlice(props?: CreateMosaicSliceProps): import("zustand").StateCreator<MosaicSliceState>;
 export type DuckDbSliceStateWithMosaic = DuckDbSliceState & MosaicSliceState;
 export declare function useStoreWithMosaic<T>(selector: (state: DuckDbSliceStateWithMosaic) => T): T;
 //# sourceMappingURL=MosaicSlice.d.ts.map

package/dist/MosaicSlice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicSlice.d.ts","sourceRoot":"","sources":["../src/MosaicSlice.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MosaicSlice.d.ts","sourceRoot":"","sources":["../src/MosaicSlice.ts"],"names":[],"mappings":"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"}