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

package/dist/chart-types/index.d.ts

@@ -0,0 +1,109 @@
+export * from './base-types';
+export * from './histogram';
+export * from './line-chart';
+export * from './count-plot';
+export * from './ecdf';
+export * from './heatmap';
+export * from './box-plot';
+export * from './bubble-chart';
+export * from './custom-spec';
+export * from './registry';
+import { z } from 'zod';
+export declare const VgPlotChartConfig: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    chartType: z.ZodLiteral<"histogram">;
+    settings: z.ZodObject<{
+        field: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"count-plot">;
+    settings: z.ZodObject<{
+        field: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"ecdf">;
+    settings: z.ZodObject<{
+        field: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"line-chart">;
+    settings: z.ZodObject<{
+        x: z.ZodOptional<z.ZodString>;
+        y: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"bubble-chart">;
+    settings: z.ZodObject<{
+        x: z.ZodOptional<z.ZodString>;
+        y: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"heatmap">;
+    settings: z.ZodObject<{
+        x: z.ZodOptional<z.ZodString>;
+        y: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"box-plot">;
+    settings: z.ZodObject<{
+        x: z.ZodOptional<z.ZodString>;
+        y: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    chartType: z.ZodLiteral<"custom-spec">;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+    settings: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+}, z.core.$strip>], "chartType">;
+export type VgPlotChartConfig = z.infer<typeof VgPlotChartConfig>;
+export type VgPlotChartSettings = VgPlotChartConfig['settings'];
+export declare const mosaicChartTypes: {
+    readonly histogram: import("./base-types").ChartTypeDefinition<{
+        field?: string | undefined;
+    }>;
+    readonly countPlot: import("./base-types").ChartTypeDefinition<{
+        field?: string | undefined;
+    }>;
+    readonly lineChart: import("./base-types").ChartTypeDefinition<{
+        x?: string | undefined;
+        y?: string | undefined;
+    }>;
+    readonly ecdf: import("./base-types").ChartTypeDefinition<{
+        field?: string | undefined;
+    }>;
+    readonly heatmap: import("./base-types").ChartTypeDefinition<{
+        x?: string | undefined;
+        y?: string | undefined;
+    }>;
+    readonly boxPlot: import("./base-types").ChartTypeDefinition<{
+        x?: string | undefined;
+        y?: string | undefined;
+    }>;
+    readonly bubbleChart: import("./base-types").ChartTypeDefinition<{
+        x?: string | undefined;
+        y?: string | undefined;
+    }>;
+    readonly customSpec: import("./base-types").ChartTypeDefinition<Record<string, unknown>>;
+};
+export declare function createDefaultChartTypes(options?: {
+    includeCustomSpec?: boolean;
+}): (import("./base-types").ChartTypeDefinition<{
+    field?: string | undefined;
+}> | import("./base-types").ChartTypeDefinition<{
+    x?: string | undefined;
+    y?: string | undefined;
+}>)[];
+//# sourceMappingURL=index.d.ts.map

package/dist/chart-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart-types/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAqB3B,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAGhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CASnB,CAAC;AAEX,wBAAgB,uBAAuB,CAAC,OAAO,CAAC,EAAE;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;;;;MAiBA"}

package/dist/chart-types/index.js

@@ -0,0 +1,70 @@
+// Re-export base types
+export * from './base-types';
+// Re-export all schemas and types
+export * from './histogram';
+export * from './line-chart';
+export * from './count-plot';
+export * from './ecdf';
+export * from './heatmap';
+export * from './box-plot';
+export * from './bubble-chart';
+export * from './custom-spec';
+export * from './registry';
+// Import chart type definitions for legacy exports
+import { histogramChartType } from './histogram';
+import { lineChartChartType } from './line-chart';
+import { countPlotChartType } from './count-plot';
+import { ecdfChartType } from './ecdf';
+import { heatmapChartType } from './heatmap';
+import { boxPlotChartType } from './box-plot';
+import { bubbleChartChartType } from './bubble-chart';
+import { customSpecChartType } from './custom-spec';
+// Import Zod configs for discriminated union
+import { HistogramChartConfig as HistogramChartConfigSchema } from './histogram';
+import { CountPlotChartConfig as CountPlotChartConfigSchema } from './count-plot';
+import { EcdfChartConfig as EcdfChartConfigSchema } from './ecdf';
+import { LineChartConfig as LineChartConfigSchema } from './line-chart';
+import { BubbleChartConfig as BubbleChartConfigSchema } from './bubble-chart';
+import { HeatmapChartConfig as HeatmapChartConfigSchema } from './heatmap';
+import { BoxPlotChartConfig as BoxPlotChartConfigSchema } from './box-plot';
+import { CustomSpecChartConfig as CustomSpecChartConfigSchema } from './custom-spec';
+import { z } from 'zod';
+// Zod schema for VgPlotChartConfig (discriminated union)
+export const VgPlotChartConfig = z.discriminatedUnion('chartType', [
+    HistogramChartConfigSchema,
+    CountPlotChartConfigSchema,
+    EcdfChartConfigSchema,
+    LineChartConfigSchema,
+    BubbleChartConfigSchema,
+    HeatmapChartConfigSchema,
+    BoxPlotChartConfigSchema,
+    CustomSpecChartConfigSchema,
+]);
+// Legacy compatibility exports
+export const mosaicChartTypes = {
+    histogram: histogramChartType,
+    countPlot: countPlotChartType,
+    lineChart: lineChartChartType,
+    ecdf: ecdfChartType,
+    heatmap: heatmapChartType,
+    boxPlot: boxPlotChartType,
+    bubbleChart: bubbleChartChartType,
+    customSpec: customSpecChartType,
+};
+export function createDefaultChartTypes(options) {
+    const includeCustomSpec = options?.includeCustomSpec ?? true;
+    const chartTypes = [
+        histogramChartType,
+        countPlotChartType,
+        lineChartChartType,
+        ecdfChartType,
+        heatmapChartType,
+        boxPlotChartType,
+        bubbleChartChartType,
+    ];
+    if (includeCustomSpec) {
+        chartTypes.push(customSpecChartType);
+    }
+    return chartTypes;
+}
+//# sourceMappingURL=index.js.map

package/dist/chart-types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/chart-types/index.ts"],"names":[],"mappings":"AAAA,uBAAuB;AACvB,cAAc,cAAc,CAAC;AAE7B,kCAAkC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAE3B,mDAAmD;AACnD,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAChD,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAElD,6CAA6C;AAC7C,OAAO,EAAC,oBAAoB,IAAI,0BAA0B,EAAC,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAC,oBAAoB,IAAI,0BAA0B,EAAC,MAAM,cAAc,CAAC;AAChF,OAAO,EAAC,eAAe,IAAI,qBAAqB,EAAC,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAC,eAAe,IAAI,qBAAqB,EAAC,MAAM,cAAc,CAAC;AACtE,OAAO,EAAC,iBAAiB,IAAI,uBAAuB,EAAC,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAC,kBAAkB,IAAI,wBAAwB,EAAC,MAAM,WAAW,CAAC;AACzE,OAAO,EAAC,kBAAkB,IAAI,wBAAwB,EAAC,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAC,qBAAqB,IAAI,2BAA2B,EAAC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,yDAAyD;AACzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,kBAAkB,CAAC,WAAW,EAAE;IACjE,0BAA0B;IAC1B,0BAA0B;IAC1B,qBAAqB;IACrB,qBAAqB;IACrB,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACxB,2BAA2B;CAC5B,CAAC,CAAC;AAKH,+BAA+B;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,kBAAkB;IAC7B,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,gBAAgB;IACzB,WAAW,EAAE,oBAAoB;IACjC,UAAU,EAAE,mBAAmB;CACvB,CAAC;AAEX,MAAM,UAAU,uBAAuB,CAAC,OAEvC;IACC,MAAM,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,IAAI,CAAC;IAC7D,MAAM,UAAU,GAAG;QACjB,kBAAkB;QAClB,kBAAkB;QAClB,kBAAkB;QAClB,aAAa;QACb,gBAAgB;QAChB,gBAAgB;QAChB,oBAAoB;KACrB,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,UAAU,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Re-export base types\nexport * from './base-types';\n\n// Re-export all schemas and types\nexport * from './histogram';\nexport * from './line-chart';\nexport * from './count-plot';\nexport * from './ecdf';\nexport * from './heatmap';\nexport * from './box-plot';\nexport * from './bubble-chart';\nexport * from './custom-spec';\nexport * from './registry';\n\n// Import chart type definitions for legacy exports\nimport {histogramChartType} from './histogram';\nimport {lineChartChartType} from './line-chart';\nimport {countPlotChartType} from './count-plot';\nimport {ecdfChartType} from './ecdf';\nimport {heatmapChartType} from './heatmap';\nimport {boxPlotChartType} from './box-plot';\nimport {bubbleChartChartType} from './bubble-chart';\nimport {customSpecChartType} from './custom-spec';\n\n// Import Zod configs for discriminated union\nimport {HistogramChartConfig as HistogramChartConfigSchema} from './histogram';\nimport {CountPlotChartConfig as CountPlotChartConfigSchema} from './count-plot';\nimport {EcdfChartConfig as EcdfChartConfigSchema} from './ecdf';\nimport {LineChartConfig as LineChartConfigSchema} from './line-chart';\nimport {BubbleChartConfig as BubbleChartConfigSchema} from './bubble-chart';\nimport {HeatmapChartConfig as HeatmapChartConfigSchema} from './heatmap';\nimport {BoxPlotChartConfig as BoxPlotChartConfigSchema} from './box-plot';\nimport {CustomSpecChartConfig as CustomSpecChartConfigSchema} from './custom-spec';\nimport {z} from 'zod';\n\n// Zod schema for VgPlotChartConfig (discriminated union)\nexport const VgPlotChartConfig = z.discriminatedUnion('chartType', [\n  HistogramChartConfigSchema,\n  CountPlotChartConfigSchema,\n  EcdfChartConfigSchema,\n  LineChartConfigSchema,\n  BubbleChartConfigSchema,\n  HeatmapChartConfigSchema,\n  BoxPlotChartConfigSchema,\n  CustomSpecChartConfigSchema,\n]);\n\nexport type VgPlotChartConfig = z.infer<typeof VgPlotChartConfig>;\nexport type VgPlotChartSettings = VgPlotChartConfig['settings'];\n\n// Legacy compatibility exports\nexport const mosaicChartTypes = {\n  histogram: histogramChartType,\n  countPlot: countPlotChartType,\n  lineChart: lineChartChartType,\n  ecdf: ecdfChartType,\n  heatmap: heatmapChartType,\n  boxPlot: boxPlotChartType,\n  bubbleChart: bubbleChartChartType,\n  customSpec: customSpecChartType,\n} as const;\n\nexport function createDefaultChartTypes(options?: {\n  includeCustomSpec?: boolean;\n}) {\n  const includeCustomSpec = options?.includeCustomSpec ?? true;\n  const chartTypes = [\n    histogramChartType,\n    countPlotChartType,\n    lineChartChartType,\n    ecdfChartType,\n    heatmapChartType,\n    boxPlotChartType,\n    bubbleChartChartType,\n  ];\n\n  if (includeCustomSpec) {\n    chartTypes.push(customSpecChartType);\n  }\n\n  return chartTypes;\n}\n"]}

package/dist/chart-types/line-chart/definition.d.ts

@@ -0,0 +1,4 @@
+import type { ChartTypeDefinition } from '../base-types';
+import type { LineChartSettings } from './schema';
+export declare const lineChartChartType: ChartTypeDefinition<LineChartSettings>;
+//# sourceMappingURL=definition.d.ts.map

package/dist/chart-types/line-chart/definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../../src/chart-types/line-chart/definition.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAUhD,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,CAAC,iBAAiB,CA2CrE,CAAC"}

package/dist/chart-types/line-chart/definition.js

@@ -0,0 +1,46 @@
+import { QUANTITATIVE_COLUMN_TYPES, NUMERIC_COLUMN_TYPES, } from '../../chart-builders/constants';
+import { titleFromDescription } from '../../chart-builders/chartTypeUtils';
+const FG_COLOR = 'var(--color-chart-1)';
+const DESCRIPTION = 'Create a line chart of two fields';
+export const lineChartChartType = {
+    id: 'line-chart',
+    label: 'Line Chart',
+    description: DESCRIPTION,
+    aiDescription: 'Use for trends over an ordered x-axis, typically time on x and a numeric measure on y.',
+    fields: [
+        {
+            key: 'x',
+            label: 'X Field',
+            required: true,
+            types: [...QUANTITATIVE_COLUMN_TYPES],
+            description: 'Ordered x-axis column, usually time or a quantitative value.',
+        },
+        {
+            key: 'y',
+            label: 'Y Field',
+            required: true,
+            types: [...NUMERIC_COLUMN_TYPES],
+            description: 'Numeric measure plotted on the y-axis.',
+        },
+    ],
+    buildTitle: titleFromDescription(DESCRIPTION),
+    createSpec: (tableName, { x, y }) => ({
+        plot: [
+            {
+                mark: 'lineY',
+                data: { from: tableName, filterBy: '$brush' },
+                x,
+                y,
+                stroke: FG_COLOR,
+            },
+            { select: 'intervalX', as: '$brush' },
+        ],
+        xLabel: x,
+        yLabel: y,
+        height: 250,
+        width: 380,
+        margins: { left: 50, right: 20, top: 20, bottom: 50 },
+        params: { brush: { select: 'crossfilter' } },
+    }),
+};
+//# sourceMappingURL=definition.js.map

package/dist/chart-types/line-chart/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","sourceRoot":"","sources":["../../../src/chart-types/line-chart/definition.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AAEzE,MAAM,QAAQ,GAAG,sBAAsB,CAAC;AACxC,MAAM,WAAW,GAAG,mCAAmC,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAA2C;IACxE,EAAE,EAAE,YAAY;IAChB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,WAAW;IACxB,aAAa,EACX,wFAAwF;IAC1F,MAAM,EAAE;QACN;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,CAAC,GAAG,yBAAyB,CAAC;YACrC,WAAW,EACT,8DAA8D;SACjE;QACD;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,CAAC,GAAG,oBAAoB,CAAC;YAChC,WAAW,EAAE,wCAAwC;SACtD;KACF;IACD,UAAU,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC7C,UAAU,EAAE,CAAC,SAAS,EAAE,EAAC,CAAC,EAAE,CAAC,EAAC,EAAQ,EAAE,CACtC,CAAC;QACC,IAAI,EAAE;YACJ;gBACE,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC;gBAC3C,CAAC;gBACD,CAAC;gBACD,MAAM,EAAE,QAAQ;aACjB;YACD,EAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAC;SACpC;QACD,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAC;QACnD,MAAM,EAAE,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,aAAa,EAAC,EAAC;KACzC,CAAS;CACb,CAAC","sourcesContent":["import type {Spec} from '@uwdata/mosaic-spec';\nimport type {ChartTypeDefinition} from '../base-types';\nimport type {LineChartSettings} from './schema';\nimport {\n  QUANTITATIVE_COLUMN_TYPES,\n  NUMERIC_COLUMN_TYPES,\n} from '../../chart-builders/constants';\nimport {titleFromDescription} from '../../chart-builders/chartTypeUtils';\n\nconst FG_COLOR = 'var(--color-chart-1)';\nconst DESCRIPTION = 'Create a line chart of two fields';\n\nexport const lineChartChartType: ChartTypeDefinition<LineChartSettings> = {\n  id: 'line-chart',\n  label: 'Line Chart',\n  description: DESCRIPTION,\n  aiDescription:\n    'Use for trends over an ordered x-axis, typically time on x and a numeric measure on y.',\n  fields: [\n    {\n      key: 'x',\n      label: 'X Field',\n      required: true,\n      types: [...QUANTITATIVE_COLUMN_TYPES],\n      description:\n        'Ordered x-axis column, usually time or a quantitative value.',\n    },\n    {\n      key: 'y',\n      label: 'Y Field',\n      required: true,\n      types: [...NUMERIC_COLUMN_TYPES],\n      description: 'Numeric measure plotted on the y-axis.',\n    },\n  ],\n  buildTitle: titleFromDescription(DESCRIPTION),\n  createSpec: (tableName, {x, y}): Spec =>\n    ({\n      plot: [\n        {\n          mark: 'lineY',\n          data: {from: tableName, filterBy: '$brush'},\n          x,\n          y,\n          stroke: FG_COLOR,\n        },\n        {select: 'intervalX', as: '$brush'},\n      ],\n      xLabel: x,\n      yLabel: y,\n      height: 250,\n      width: 380,\n      margins: {left: 50, right: 20, top: 20, bottom: 50},\n      params: {brush: {select: 'crossfilter'}},\n    }) as Spec,\n};\n"]}

package/dist/chart-types/line-chart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './schema';
+export * from './definition';
+//# sourceMappingURL=index.d.ts.map

package/dist/chart-types/line-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart-types/line-chart/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}

package/dist/chart-types/line-chart/index.js

@@ -0,0 +1,3 @@
+export * from './schema';
+export * from './definition';
+//# sourceMappingURL=index.js.map

package/dist/chart-types/line-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/chart-types/line-chart/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC","sourcesContent":["export * from './schema';\nexport * from './definition';\n"]}

package/dist/chart-types/line-chart/schema.d.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+export declare const LineChartSettings: z.ZodObject<{
+    x: z.ZodOptional<z.ZodString>;
+    y: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type LineChartSettings = z.infer<typeof LineChartSettings>;
+export declare const LineChartConfig: z.ZodObject<{
+    chartType: z.ZodLiteral<"line-chart">;
+    settings: z.ZodObject<{
+        x: z.ZodOptional<z.ZodString>;
+        y: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    vgplot: z.ZodUnknown;
+    settingsOpen: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+export type LineChartConfig = z.infer<typeof LineChartConfig>;
+//# sourceMappingURL=schema.d.ts.map

package/dist/chart-types/line-chart/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/chart-types/line-chart/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,eAAO,MAAM,iBAAiB;;;iBAG5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe;;;;;;;;iBAK1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/chart-types/line-chart/schema.js

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+export const LineChartSettings = z.object({
+    x: z.string().optional(),
+    y: z.string().optional(),
+});
+export const LineChartConfig = z.object({
+    chartType: z.literal('line-chart'),
+    settings: LineChartSettings,
+    vgplot: z.unknown(),
+    settingsOpen: z.boolean().optional(),
+});
+//# sourceMappingURL=schema.js.map

package/dist/chart-types/line-chart/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../src/chart-types/line-chart/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC;IACxC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACxB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CACzB,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC;IACtC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC;IAClC,QAAQ,EAAE,iBAAiB;IAC3B,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE;IACnB,YAAY,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;CACrC,CAAC,CAAC","sourcesContent":["import {z} from 'zod';\n\nexport const LineChartSettings = z.object({\n  x: z.string().optional(),\n  y: z.string().optional(),\n});\n\nexport type LineChartSettings = z.infer<typeof LineChartSettings>;\n\nexport const LineChartConfig = z.object({\n  chartType: z.literal('line-chart'),\n  settings: LineChartSettings,\n  vgplot: z.unknown(),\n  settingsOpen: z.boolean().optional(),\n});\n\nexport type LineChartConfig = z.infer<typeof LineChartConfig>;\n"]}

package/dist/chart-types/registry.d.ts

@@ -0,0 +1,5 @@
+import type { ChartTypeDefinition } from './base-types';
+export declare function registerChartType(definition: ChartTypeDefinition): void;
+export declare function getChartTypeDefinition(id: string): ChartTypeDefinition | undefined;
+export declare function getAllChartTypes(): ChartTypeDefinition[];
+//# sourceMappingURL=registry.d.ts.map

package/dist/chart-types/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/chart-types/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAsBtD,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,mBAAmB,QAEhE;AAED,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,MAAM,GACT,mBAAmB,GAAG,SAAS,CAEjC;AAED,wBAAgB,gBAAgB,IAAI,mBAAmB,EAAE,CAExD"}

package/dist/chart-types/registry.js

@@ -0,0 +1,28 @@
+import { histogramChartType } from './histogram';
+import { lineChartChartType } from './line-chart';
+import { countPlotChartType } from './count-plot';
+import { ecdfChartType } from './ecdf';
+import { heatmapChartType } from './heatmap';
+import { boxPlotChartType } from './box-plot';
+import { bubbleChartChartType } from './bubble-chart';
+import { customSpecChartType } from './custom-spec';
+const chartTypeRegistry = new Map();
+// Register all chart types
+registerChartType(histogramChartType);
+registerChartType(lineChartChartType);
+registerChartType(countPlotChartType);
+registerChartType(ecdfChartType);
+registerChartType(heatmapChartType);
+registerChartType(boxPlotChartType);
+registerChartType(bubbleChartChartType);
+registerChartType(customSpecChartType);
+export function registerChartType(definition) {
+    chartTypeRegistry.set(definition.id, definition);
+}
+export function getChartTypeDefinition(id) {
+    return chartTypeRegistry.get(id);
+}
+export function getAllChartTypes() {
+    return Array.from(chartTypeRegistry.values());
+}
+//# sourceMappingURL=registry.js.map

package/dist/chart-types/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/chart-types/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAChD,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAA+B,CAAC;AAEjE,2BAA2B;AAC3B,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACtC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACtC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACtC,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AACpC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AACpC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AACxC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEvC,MAAM,UAAU,iBAAiB,CAAC,UAA+B;IAC/D,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,sBAAsB,CACpC,EAAU;IAEV,OAAO,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC;AAChD,CAAC","sourcesContent":["import type {ChartTypeDefinition} from './base-types';\nimport {histogramChartType} from './histogram';\nimport {lineChartChartType} from './line-chart';\nimport {countPlotChartType} from './count-plot';\nimport {ecdfChartType} from './ecdf';\nimport {heatmapChartType} from './heatmap';\nimport {boxPlotChartType} from './box-plot';\nimport {bubbleChartChartType} from './bubble-chart';\nimport {customSpecChartType} from './custom-spec';\n\nconst chartTypeRegistry = new Map<string, ChartTypeDefinition>();\n\n// Register all chart types\nregisterChartType(histogramChartType);\nregisterChartType(lineChartChartType);\nregisterChartType(countPlotChartType);\nregisterChartType(ecdfChartType);\nregisterChartType(heatmapChartType);\nregisterChartType(boxPlotChartType);\nregisterChartType(bubbleChartChartType);\nregisterChartType(customSpecChartType);\n\nexport function registerChartType(definition: ChartTypeDefinition) {\n  chartTypeRegistry.set(definition.id, definition);\n}\n\nexport function getChartTypeDefinition(\n  id: string,\n): ChartTypeDefinition | undefined {\n  return chartTypeRegistry.get(id);\n}\n\nexport function getAllChartTypes(): ChartTypeDefinition[] {\n  return Array.from(chartTypeRegistry.values());\n}\n"]}

package/dist/dashboard/DashboardPanelErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    panelType?: string;
+}
+interface State {
+    hasError: boolean;
+    error?: Error;
+}
+export declare class DashboardPanelErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=DashboardPanelErrorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPanelErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/dashboard/DashboardPanelErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhE,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,qBAAa,2BAA4B,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC1D,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAQpD,MAAM;CAWP"}

package/dist/dashboard/DashboardPanelErrorBoundary.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+export class DashboardPanelErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(`[DashboardPanelErrorBoundary] Error rendering panel${this.props.panelType ? ` (${this.props.panelType})` : ''}:`, error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "Failed to load panel" }));
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=DashboardPanelErrorBoundary.js.map

package/dist/dashboard/DashboardPanelErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPanelErrorBoundary.js","sourceRoot":"","sources":["../../src/dashboard/DashboardPanelErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAiC,MAAM,OAAO,CAAC;AAYhE,MAAM,OAAO,2BAA4B,SAAQ,SAAuB;IACtE,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAC,QAAQ,EAAE,KAAK,EAAC,CAAC;IACjC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,CAAC;IACjC,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CACX,sDAAsD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EACjH,KAAK,EACL,SAAS,CACV,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,CACL,cAAK,SAAS,EAAC,2EAA2E,qCAEpF,CACP,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import {Component, type ErrorInfo, type ReactNode} from 'react';\n\ninterface Props {\n  children: ReactNode;\n  panelType?: string;\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n}\n\nexport class DashboardPanelErrorBoundary extends Component<Props, State> {\n  constructor(props: Props) {\n    super(props);\n    this.state = {hasError: false};\n  }\n\n  static getDerivedStateFromError(error: Error): State {\n    return {hasError: true, error};\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    console.error(\n      `[DashboardPanelErrorBoundary] Error rendering panel${this.props.panelType ? ` (${this.props.panelType})` : ''}:`,\n      error,\n      errorInfo,\n    );\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        <div className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-sm\">\n          Failed to load panel\n        </div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"]}

package/dist/dashboard/MosaicDashboard.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { MosaicDashboardCharts } from './MosaicDashboardCharts';
-import { MosaicDashboardProfiler } from './MosaicDashboardProfiler';
+import { MosaicDashboardPanels } from './MosaicDashboardPanels';
 import { MosaicDashboardToolbar } from './MosaicDashboardToolbar';
 export type MosaicDashboardRootProps = PropsWithChildren<{
     dashboardId: string;
@@ -12,8 +11,7 @@ export type MosaicDashboardProps = {
 type MosaicDashboardCompoundComponent = ((props: MosaicDashboardProps) => ReactElement) & {
     Root: typeof MosaicDashboardRoot;
     Toolbar: typeof MosaicDashboardToolbar;
-    Profiler: typeof MosaicDashboardProfiler;
-    Charts: typeof MosaicDashboardCharts;
+    Panels: typeof MosaicDashboardPanels;
 };
 export declare const MosaicDashboard: MosaicDashboardCompoundComponent;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,iBAAiB,EACjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAKlE,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAEhE,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,WAAW,GACZ,EAAE,wBAAwB,2CAmG1B;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAkBF,KAAK,gCAAgC,GAAG,CAAC,CACvC,KAAK,EAAE,oBAAoB,KACxB,YAAY,CAAC,GAAG;IACnB,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,QAAQ,EAAE,OAAO,uBAAuB,CAAC;IACzC,MAAM,EAAE,OAAO,qBAAqB,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,gCAQ7B,CAAC"}
+{"version":3,"file":"MosaicDashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAM9D,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAEhE,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,WAAW,GACZ,EAAE,wBAAwB,2CA8I1B;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAiBF,KAAK,gCAAgC,GAAG,CAAC,CACvC,KAAK,EAAE,oBAAoB,KACxB,YAAY,CAAC,GAAG;IACnB,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,MAAM,EAAE,OAAO,qBAAqB,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,gCAO7B,CAAC"}

package/dist/dashboard/MosaicDashboard.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createId } from '@paralleldrive/cuid2';
 import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { MosaicChartBuilder } from '../MosaicChartBuilder';
 import { MosaicDashboardContext } from './MosaicDashboardContext';
-import { MosaicDashboardCharts } from './MosaicDashboardCharts';
-import { MosaicDashboardProfiler } from './MosaicDashboardProfiler';
-import { useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+import { MosaicDashboardPanels } from './MosaicDashboardPanels';
+import { createMosaicDashboardVgPlotPanelConfig, MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
 import { MosaicDashboardToolbar } from './MosaicDashboardToolbar';
 export function MosaicDashboardRoot({ children, dashboardId, }) {
     const ensureDashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.ensureDashboard);
-    const addChart = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addChart);
+    const addPanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanel);
     const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
     const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
     const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
+    const chartBuilders = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartBuilders);
+    const chartTypes = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
+    const panelRenderers = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.panelRenderers);
     const [builderOpen, setBuilderOpen] = useState(false);
     const tablesWithColumns = useMemo(() => tables.filter((table) => table.columns && table.columns.length > 0), [tables]);
     const selectedTableInfo = useMemo(() => tablesWithColumns.find((table) => table.tableName === dashboard?.selectedTable), [dashboard?.selectedTable, tablesWithColumns]);
@@ -37,32 +38,54 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
         setSelectedTable,
         tablesWithColumns,
     ]);
-    const handleCreateChart = useCallback((spec, title) => {
-        const newChart = {
-            id: createId(),
-            title,
-            vgplot: JSON.parse(JSON.stringify(spec)),
-        };
-        addChart(dashboardId, newChart);
+    const handleCreateChart = useCallback((title, config) => {
+        const panel = createMosaicDashboardVgPlotPanelConfig(title, config, {
+            tableName: dashboard?.selectedTable,
+        });
+        addPanel(dashboardId, panel);
         setBuilderOpen(false);
-    }, [addChart, dashboardId]);
+    }, [addPanel, dashboard?.selectedTable, dashboardId]);
+    const handleAddDefaultChart = useCallback(() => {
+        if (!dashboard?.selectedTable) {
+            return;
+        }
+        // Create empty chart panel - user will select type and fields
+        const panel = createMosaicDashboardVgPlotPanelConfig('New Chart', {
+            chartType: 'histogram', // Default type, but with empty settings
+            settings: {},
+            vgplot: null,
+            settingsOpen: true, // Open settings by default
+        }, { tableName: dashboard.selectedTable });
+        addPanel(dashboardId, panel);
+    }, [addPanel, dashboard, dashboardId]);
     const contextValue = useMemo(() => ({
         dashboardId,
         builderOpen,
-        canCreateChart: Boolean(dashboard?.selectedTable),
+        canCreateChart: Boolean(dashboard?.selectedTable &&
+            panelRenderers[MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE] &&
+            chartBuilders?.length !== 0 &&
+            chartTypes?.length !== 0),
         openBuilder: () => setBuilderOpen(true),
         closeBuilder: () => setBuilderOpen(false),
         setBuilderOpen,
-    }), [builderOpen, dashboard?.selectedTable, dashboardId]);
-    return (_jsxs(MosaicDashboardContext.Provider, { value: contextValue, children: [children, dashboard?.selectedTable ? (_jsx(MosaicChartBuilder, { open: builderOpen, onOpenChange: setBuilderOpen, tableName: dashboard.selectedTable, columns: builderColumns, onCreateChart: handleCreateChart, children: _jsx(MosaicChartBuilder.Dialog, {}) })) : null] }));
+        addDefaultChart: handleAddDefaultChart,
+    }), [
+        builderOpen,
+        chartBuilders?.length,
+        chartTypes?.length,
+        dashboard?.selectedTable,
+        dashboardId,
+        panelRenderers,
+        handleAddDefaultChart,
+    ]);
+    return (_jsxs(MosaicDashboardContext.Provider, { value: contextValue, children: [children, dashboard?.selectedTable ? (_jsx(MosaicChartBuilder, { open: builderOpen, onOpenChange: setBuilderOpen, tableName: dashboard.selectedTable, columns: builderColumns, builders: chartBuilders, chartTypes: chartTypes, onCreateChart: handleCreateChart, children: _jsx(MosaicChartBuilder.Dialog, {}) })) : null] }));
 }
 function MosaicDashboardComponent({ dashboardId, }) {
-    return (_jsx(MosaicDashboardRoot, { dashboardId: dashboardId, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx(MosaicDashboardToolbar, {}), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx(MosaicDashboardProfiler, {}), _jsx(MosaicDashboardCharts, {})] })] }) }));
+    return (_jsx(MosaicDashboardRoot, { dashboardId: dashboardId, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx(MosaicDashboardToolbar, {}), _jsx("div", { className: "h-full overflow-y-auto", children: _jsx(MosaicDashboardPanels, {}) })] }) }));
 }
 export const MosaicDashboard = Object.assign(MosaicDashboardComponent, {
     Root: MosaicDashboardRoot,
     Toolbar: MosaicDashboardToolbar,
-    Profiler: MosaicDashboardProfiler,
-    Charts: MosaicDashboardCharts,
+    Panels: MosaicDashboardPanels,
 });
 //# sourceMappingURL=MosaicDashboard.js.map

package/dist/dashboard/MosaicDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboard.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {createId} from '@paralleldrive/cuid2';\nimport React, {\n  PropsWithChildren,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {ChartBuilderColumn} from '../chart-builders/types';\nimport {MosaicChartBuilder} from '../MosaicChartBuilder';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport {MosaicDashboardContext} from './MosaicDashboardContext';\nimport {MosaicDashboardCharts} from './MosaicDashboardCharts';\nimport {MosaicDashboardProfiler} from './MosaicDashboardProfiler';\nimport {\n  type MosaicDashboardChartConfig,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\nimport {MosaicDashboardToolbar} from './MosaicDashboardToolbar';\n\nexport type MosaicDashboardRootProps = PropsWithChildren<{\n  dashboardId: string;\n}>;\n\nexport function MosaicDashboardRoot({\n  children,\n  dashboardId,\n}: MosaicDashboardRootProps) {\n  const ensureDashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.ensureDashboard,\n  );\n  const addChart = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addChart,\n  );\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n  const [builderOpen, setBuilderOpen] = useState(false);\n\n  const tablesWithColumns = useMemo(\n    () => tables.filter((table) => table.columns && table.columns.length > 0),\n    [tables],\n  );\n\n  const selectedTableInfo = useMemo(\n    () =>\n      tablesWithColumns.find(\n        (table) => table.tableName === dashboard?.selectedTable,\n      ),\n    [dashboard?.selectedTable, tablesWithColumns],\n  );\n\n  const builderColumns: ChartBuilderColumn[] = useMemo(\n    () =>\n      selectedTableInfo?.columns?.map((column) => ({\n        name: column.name,\n        type: column.type,\n      })) ?? [],\n    [selectedTableInfo],\n  );\n\n  useEffect(() => {\n    ensureDashboard(dashboardId);\n  }, [dashboardId, ensureDashboard]);\n\n  useEffect(() => {\n    const firstTable = tablesWithColumns[0];\n    if (!firstTable) return;\n    const tableStillExists = tablesWithColumns.some(\n      (table) => table.tableName === dashboard?.selectedTable,\n    );\n    if (!dashboard?.selectedTable || !tableStillExists) {\n      setSelectedTable(dashboardId, firstTable.tableName);\n    }\n  }, [\n    dashboard?.selectedTable,\n    dashboardId,\n    setSelectedTable,\n    tablesWithColumns,\n  ]);\n\n  const handleCreateChart = useCallback(\n    (spec: Spec, title: string) => {\n      const newChart: MosaicDashboardChartConfig = {\n        id: createId(),\n        title,\n        vgplot: JSON.parse(JSON.stringify(spec)) as Record<string, unknown>,\n      };\n      addChart(dashboardId, newChart);\n      setBuilderOpen(false);\n    },\n    [addChart, dashboardId],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      dashboardId,\n      builderOpen,\n      canCreateChart: Boolean(dashboard?.selectedTable),\n      openBuilder: () => setBuilderOpen(true),\n      closeBuilder: () => setBuilderOpen(false),\n      setBuilderOpen,\n    }),\n    [builderOpen, dashboard?.selectedTable, dashboardId],\n  );\n\n  return (\n    <MosaicDashboardContext.Provider value={contextValue}>\n      {children}\n      {dashboard?.selectedTable ? (\n        <MosaicChartBuilder\n          open={builderOpen}\n          onOpenChange={setBuilderOpen}\n          tableName={dashboard.selectedTable}\n          columns={builderColumns}\n          onCreateChart={handleCreateChart}\n        >\n          <MosaicChartBuilder.Dialog />\n        </MosaicChartBuilder>\n      ) : null}\n    </MosaicDashboardContext.Provider>\n  );\n}\n\nexport type MosaicDashboardProps = {\n  dashboardId: string;\n};\n\nfunction MosaicDashboardComponent({\n  dashboardId,\n}: MosaicDashboardProps): ReactElement {\n  return (\n    <MosaicDashboardRoot dashboardId={dashboardId}>\n      <div className=\"flex h-full flex-col\">\n        <MosaicDashboardToolbar />\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\">\n          <MosaicDashboardProfiler />\n          <MosaicDashboardCharts />\n        </div>\n      </div>\n    </MosaicDashboardRoot>\n  );\n}\n\ntype MosaicDashboardCompoundComponent = ((\n  props: MosaicDashboardProps,\n) => ReactElement) & {\n  Root: typeof MosaicDashboardRoot;\n  Toolbar: typeof MosaicDashboardToolbar;\n  Profiler: typeof MosaicDashboardProfiler;\n  Charts: typeof MosaicDashboardCharts;\n};\n\nexport const MosaicDashboard: MosaicDashboardCompoundComponent = Object.assign(\n  MosaicDashboardComponent,\n  {\n    Root: MosaicDashboardRoot,\n    Toolbar: MosaicDashboardToolbar,\n    Profiler: MosaicDashboardProfiler,\n    Charts: MosaicDashboardCharts,\n  },\n);\n"]}
+{"version":3,"file":"MosaicDashboard.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithChildren,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {ChartBuilderColumn} from '../chart-builders/types';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {MosaicChartBuilder} from '../MosaicChartBuilder';\nimport {MosaicDashboardContext} from './MosaicDashboardContext';\nimport {MosaicDashboardPanels} from './MosaicDashboardPanels';\nimport {\n  createMosaicDashboardVgPlotPanelConfig,\n  MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\nimport {MosaicDashboardToolbar} from './MosaicDashboardToolbar';\n\nexport type MosaicDashboardRootProps = PropsWithChildren<{\n  dashboardId: string;\n}>;\n\nexport function MosaicDashboardRoot({\n  children,\n  dashboardId,\n}: MosaicDashboardRootProps) {\n  const ensureDashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.ensureDashboard,\n  );\n  const addPanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanel,\n  );\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n  const chartBuilders = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.chartBuilders,\n  );\n  const chartTypes = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.chartTypes,\n  );\n  const panelRenderers = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.panelRenderers,\n  );\n  const [builderOpen, setBuilderOpen] = useState(false);\n\n  const tablesWithColumns = useMemo(\n    () => tables.filter((table) => table.columns && table.columns.length > 0),\n    [tables],\n  );\n\n  const selectedTableInfo = useMemo(\n    () =>\n      tablesWithColumns.find(\n        (table) => table.tableName === dashboard?.selectedTable,\n      ),\n    [dashboard?.selectedTable, tablesWithColumns],\n  );\n\n  const builderColumns: ChartBuilderColumn[] = useMemo(\n    () =>\n      selectedTableInfo?.columns?.map((column) => ({\n        name: column.name,\n        type: column.type,\n      })) ?? [],\n    [selectedTableInfo],\n  );\n\n  useEffect(() => {\n    ensureDashboard(dashboardId);\n  }, [dashboardId, ensureDashboard]);\n\n  useEffect(() => {\n    const firstTable = tablesWithColumns[0];\n    if (!firstTable) return;\n    const tableStillExists = tablesWithColumns.some(\n      (table) => table.tableName === dashboard?.selectedTable,\n    );\n    if (!dashboard?.selectedTable || !tableStillExists) {\n      setSelectedTable(dashboardId, firstTable.tableName);\n    }\n  }, [\n    dashboard?.selectedTable,\n    dashboardId,\n    setSelectedTable,\n    tablesWithColumns,\n  ]);\n\n  const handleCreateChart = useCallback(\n    (title: string, config: VgPlotChartConfig) => {\n      const panel = createMosaicDashboardVgPlotPanelConfig(title, config, {\n        tableName: dashboard?.selectedTable,\n      });\n      addPanel(dashboardId, panel);\n      setBuilderOpen(false);\n    },\n    [addPanel, dashboard?.selectedTable, dashboardId],\n  );\n\n  const handleAddDefaultChart = useCallback(() => {\n    if (!dashboard?.selectedTable) {\n      return;\n    }\n\n    // Create empty chart panel - user will select type and fields\n    const panel = createMosaicDashboardVgPlotPanelConfig(\n      'New Chart',\n      {\n        chartType: 'histogram', // Default type, but with empty settings\n        settings: {},\n        vgplot: null,\n        settingsOpen: true, // Open settings by default\n      },\n      {tableName: dashboard.selectedTable},\n    );\n\n    addPanel(dashboardId, panel);\n  }, [addPanel, dashboard, dashboardId]);\n\n  const contextValue = useMemo(\n    () => ({\n      dashboardId,\n      builderOpen,\n      canCreateChart: Boolean(\n        dashboard?.selectedTable &&\n        panelRenderers[MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE] &&\n        chartBuilders?.length !== 0 &&\n        chartTypes?.length !== 0,\n      ),\n      openBuilder: () => setBuilderOpen(true),\n      closeBuilder: () => setBuilderOpen(false),\n      setBuilderOpen,\n      addDefaultChart: handleAddDefaultChart,\n    }),\n    [\n      builderOpen,\n      chartBuilders?.length,\n      chartTypes?.length,\n      dashboard?.selectedTable,\n      dashboardId,\n      panelRenderers,\n      handleAddDefaultChart,\n    ],\n  );\n\n  return (\n    <MosaicDashboardContext.Provider value={contextValue}>\n      {children}\n      {dashboard?.selectedTable ? (\n        <MosaicChartBuilder\n          open={builderOpen}\n          onOpenChange={setBuilderOpen}\n          tableName={dashboard.selectedTable}\n          columns={builderColumns}\n          builders={chartBuilders}\n          chartTypes={chartTypes}\n          onCreateChart={handleCreateChart}\n        >\n          <MosaicChartBuilder.Dialog />\n        </MosaicChartBuilder>\n      ) : null}\n    </MosaicDashboardContext.Provider>\n  );\n}\n\nexport type MosaicDashboardProps = {\n  dashboardId: string;\n};\n\nfunction MosaicDashboardComponent({\n  dashboardId,\n}: MosaicDashboardProps): ReactElement {\n  return (\n    <MosaicDashboardRoot dashboardId={dashboardId}>\n      <div className=\"flex h-full flex-col\">\n        <MosaicDashboardToolbar />\n        <div className=\"h-full overflow-y-auto\">\n          <MosaicDashboardPanels />\n        </div>\n      </div>\n    </MosaicDashboardRoot>\n  );\n}\n\ntype MosaicDashboardCompoundComponent = ((\n  props: MosaicDashboardProps,\n) => ReactElement) & {\n  Root: typeof MosaicDashboardRoot;\n  Toolbar: typeof MosaicDashboardToolbar;\n  Panels: typeof MosaicDashboardPanels;\n};\n\nexport const MosaicDashboard: MosaicDashboardCompoundComponent = Object.assign(\n  MosaicDashboardComponent,\n  {\n    Root: MosaicDashboardRoot,\n    Toolbar: MosaicDashboardToolbar,\n    Panels: MosaicDashboardPanels,\n  },\n);\n"]}

package/dist/dashboard/MosaicDashboardContext.d.ts

@@ -5,6 +5,7 @@ export type MosaicDashboardContextValue = {
     openBuilder: () => void;
     closeBuilder: () => void;
     setBuilderOpen: (open: boolean) => void;
+    addDefaultChart: () => void;
 };
 export declare const MosaicDashboardContext: import("react").Context<MosaicDashboardContextValue | null>;
 export declare function useMosaicDashboardContext(): MosaicDashboardContextValue;

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardContext.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,sBAAsB,6DACsB,CAAC;AAE1D,wBAAgB,yBAAyB,IAAI,2BAA2B,CAQvE"}
+{"version":3,"file":"MosaicDashboardContext.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,6DACsB,CAAC;AAE1D,wBAAgB,yBAAyB,IAAI,2BAA2B,CAQvE"}

package/dist/dashboard/MosaicDashboardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardContext.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAWhD,MAAM,CAAC,MAAM,sBAAsB,GACjC,aAAa,CAAqC,IAAI,CAAC,CAAC;AAE1D,MAAM,UAAU,yBAAyB;IACvC,MAAM,GAAG,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\n\nexport type MosaicDashboardContextValue = {\n  dashboardId: string;\n  builderOpen: boolean;\n  canCreateChart: boolean;\n  openBuilder: () => void;\n  closeBuilder: () => void;\n  setBuilderOpen: (open: boolean) => void;\n};\n\nexport const MosaicDashboardContext =\n  createContext<MosaicDashboardContextValue | null>(null);\n\nexport function useMosaicDashboardContext(): MosaicDashboardContextValue {\n  const ctx = useContext(MosaicDashboardContext);\n  if (!ctx) {\n    throw new Error(\n      'MosaicDashboard compound components must be rendered inside <MosaicDashboard> or <MosaicDashboard.Root>.',\n    );\n  }\n  return ctx;\n}\n"]}
+{"version":3,"file":"MosaicDashboardContext.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAYhD,MAAM,CAAC,MAAM,sBAAsB,GACjC,aAAa,CAAqC,IAAI,CAAC,CAAC;AAE1D,MAAM,UAAU,yBAAyB;IACvC,MAAM,GAAG,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\n\nexport type MosaicDashboardContextValue = {\n  dashboardId: string;\n  builderOpen: boolean;\n  canCreateChart: boolean;\n  openBuilder: () => void;\n  closeBuilder: () => void;\n  setBuilderOpen: (open: boolean) => void;\n  addDefaultChart: () => void;\n};\n\nexport const MosaicDashboardContext =\n  createContext<MosaicDashboardContextValue | null>(null);\n\nexport function useMosaicDashboardContext(): MosaicDashboardContextValue {\n  const ctx = useContext(MosaicDashboardContext);\n  if (!ctx) {\n    throw new Error(\n      'MosaicDashboard compound components must be rendered inside <MosaicDashboard> or <MosaicDashboard.Root>.',\n    );\n  }\n  return ctx;\n}\n"]}

package/dist/dashboard/MosaicDashboardPanel.d.ts

@@ -0,0 +1,3 @@
+import type { RoomPanelComponent } from '@sqlrooms/layout';
+export declare const MosaicDashboardPanel: RoomPanelComponent;
+//# sourceMappingURL=MosaicDashboardPanel.d.ts.map