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

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

@@ -0,0 +1,68 @@
+import { z } from 'zod';
+import type { ChartToolDeps } from '../base-types';
+export declare const LineChartToolParameters: z.ZodObject<{
+    artifactId: z.ZodOptional<z.ZodString>;
+    tableName: z.ZodOptional<z.ZodString>;
+    createArtifactIfMissing: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
+    reasoning: z.ZodString;
+    settings: z.ZodObject<{
+        x: z.ZodNonOptional<z.ZodOptional<z.ZodString>>;
+        xInterval: z.ZodNonOptional<z.ZodOptional<z.ZodEnum<{
+            second: "second";
+            minute: "minute";
+            hour: "hour";
+            day: "day";
+            week: "week";
+            month: "month";
+            quarter: "quarter";
+            year: "year";
+        }>>>;
+        yFields: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
+            field: z.ZodString;
+            color: z.ZodOptional<z.ZodString>;
+            aggregate: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
+                sum: "sum";
+                max: "max";
+                min: "min";
+                avg: "avg";
+            }>>>;
+        }, z.core.$strip>>>>;
+    }, z.core.$strip>;
+}, z.core.$strip>;
+export type LineChartToolParams = z.infer<typeof LineChartToolParameters>;
+export declare function createLineChartAiTool(deps: ChartToolDeps): import("ai").Tool<{
+    createArtifactIfMissing: boolean;
+    reasoning: string;
+    settings: {
+        x: string;
+        xInterval: "second" | "minute" | "hour" | "day" | "week" | "month" | "quarter" | "year";
+        yFields: {
+            field: string;
+            aggregate: "sum" | "max" | "min" | "avg";
+            color?: string | undefined;
+        }[];
+    };
+    artifactId?: string | undefined;
+    tableName?: string | undefined;
+}, {
+    llmResult: {
+        success: boolean;
+        details: string;
+        data: {
+            panelId: string;
+            artifactId: string;
+            tableName: string;
+            title: string;
+            config: any;
+        };
+        errorMessage?: undefined;
+    };
+} | {
+    llmResult: {
+        success: boolean;
+        errorMessage: string;
+        details?: undefined;
+        data?: undefined;
+    };
+}>;
+//# sourceMappingURL=tool.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../../src/chart-types/line-chart/tool.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAWjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAElC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE1E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwExD"}

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

@@ -0,0 +1,66 @@
+import { tool } from 'ai';
+import { LineChartSettings, AggregateFunction, TemporalInterval } from './schema';
+import { BaseChartToolParameters } from '../tool-schemas';
+import { validateColumnExists } from '../tool-validation';
+import { NUMERIC_COLUMN_TYPES, QUANTITATIVE_COLUMN_TYPES, TEMPORAL_COLUMN_TYPES, } from '../../chart-builders/constants';
+const AGGREGATE_FUNCTIONS = AggregateFunction.options;
+const TEMPORAL_INTERVALS = TemporalInterval.options;
+export const LineChartToolParameters = BaseChartToolParameters.extend({
+    settings: LineChartSettings.required(),
+});
+export function createLineChartAiTool(deps) {
+    return tool({
+        description: `Line chart: shows trends and changes over time or ordered continuous variable. Connects data points to show progression.
+
+Use when: user asks about "trend", "over time", "changes in", "time series", "progression of", "track X over Y".
+Example queries: "population growth over time", "temperature trend by month", "show land development over years", "elevation changes along route", "average precipitation by season".
+
+Required:
+- x: quantitative column (${QUANTITATIVE_COLUMN_TYPES.join(', ')})
+- yFields: array of {field: string (numeric: ${NUMERIC_COLUMN_TYPES.join(', ')}), aggregate?: ${AGGREGATE_FUNCTIONS.join('|')}}
+
+Optional: xInterval for temporal grouping (${TEMPORAL_INTERVALS.join(', ')}) when x is temporal (${TEMPORAL_COLUMN_TYPES.join(', ')}).
+Multiple yFields create multi-line chart for comparing metrics.
+
+Do NOT use for: single point distributions (use histogram), categorical counts (use count-plot), two-variable correlations (use bubble-chart).`,
+        inputSchema: LineChartToolParameters,
+        execute: async (params, context) => {
+            try {
+                const { artifactId, tableName, columns } = deps.resolveResources(params, context);
+                // Validate settings
+                validateColumnExists(params.settings.x, QUANTITATIVE_COLUMN_TYPES, columns, 'x');
+                for (const yField of params.settings.yFields) {
+                    validateColumnExists(yField.field, NUMERIC_COLUMN_TYPES, columns, 'yFields');
+                }
+                const title = params.settings.x
+                    ? `Line chart - ${params.settings.yFields?.map((f) => f.field).join(', ') || ''} over ${params.settings.x}`
+                    : 'Line chart';
+                const result = deps.createChart({
+                    artifactId,
+                    tableName,
+                    config: {
+                        chartType: 'line-chart',
+                        settings: params.settings,
+                    },
+                    title,
+                });
+                return {
+                    llmResult: {
+                        success: true,
+                        details: `Created line chart "${result.title}".`,
+                        data: result,
+                    },
+                };
+            }
+            catch (error) {
+                return {
+                    llmResult: {
+                        success: false,
+                        errorMessage: error instanceof Error ? error.message : String(error),
+                    },
+                };
+            }
+        },
+    });
+}
+//# sourceMappingURL=tool.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","sourceRoot":"","sources":["../../../src/chart-types/line-chart/tool.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,IAAI,CAAC;AAExB,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAC,uBAAuB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AAExC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,OAAO,CAAC;AACtD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,uBAAuB,CAAC,MAAM,CAAC;IACpE,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,EAAE;CACvC,CAAC,CAAC;AAIH,MAAM,UAAU,qBAAqB,CAAC,IAAmB;IACvD,OAAO,IAAI,CAAC;QACV,WAAW,EAAE;;;;;;4BAMW,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC;+CACjB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC;;6CAEhF,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC;;;+IAGY;QAC3I,WAAW,EAAE,uBAAuB;QACpC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE;YACjC,IAAI,CAAC;gBACH,MAAM,EAAC,UAAU,EAAE,SAAS,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,gBAAgB,CAC5D,MAAM,EACN,OAAO,CACR,CAAC;gBAEF,oBAAoB;gBACpB,oBAAoB,CAClB,MAAM,CAAC,QAAQ,CAAC,CAAC,EACjB,yBAAyB,EACzB,OAAO,EACP,GAAG,CACJ,CAAC;gBAEF,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;oBAC7C,oBAAoB,CAClB,MAAM,CAAC,KAAK,EACZ,oBAAoB,EACpB,OAAO,EACP,SAAS,CACV,CAAC;gBACJ,CAAC;gBAED,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;oBAC7B,CAAC,CAAC,gBAAgB,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE;oBAC3G,CAAC,CAAC,YAAY,CAAC;gBAEjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;oBAC9B,UAAU;oBACV,SAAS;oBACT,MAAM,EAAE;wBACN,SAAS,EAAE,YAAY;wBACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ;qBAC1B;oBACD,KAAK;iBACN,CAAC,CAAC;gBAEH,OAAO;oBACL,SAAS,EAAE;wBACT,OAAO,EAAE,IAAI;wBACb,OAAO,EAAE,uBAAuB,MAAM,CAAC,KAAK,IAAI;wBAChD,IAAI,EAAE,MAAM;qBACb;iBACF,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO;oBACL,SAAS,EAAE;wBACT,OAAO,EAAE,KAAK;wBACd,YAAY,EACV,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;qBACzD;iBACF,CAAC;YACJ,CAAC;QACH,CAAC;KACF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import {tool} from 'ai';\nimport {z} from 'zod';\nimport {LineChartSettings, AggregateFunction, TemporalInterval} from './schema';\nimport {BaseChartToolParameters} from '../tool-schemas';\nimport type {ChartToolDeps} from '../base-types';\nimport {validateColumnExists} from '../tool-validation';\nimport {\n  NUMERIC_COLUMN_TYPES,\n  QUANTITATIVE_COLUMN_TYPES,\n  TEMPORAL_COLUMN_TYPES,\n} from '../../chart-builders/constants';\n\nconst AGGREGATE_FUNCTIONS = AggregateFunction.options;\nconst TEMPORAL_INTERVALS = TemporalInterval.options;\n\nexport const LineChartToolParameters = BaseChartToolParameters.extend({\n  settings: LineChartSettings.required(),\n});\n\nexport type LineChartToolParams = z.infer<typeof LineChartToolParameters>;\n\nexport function createLineChartAiTool(deps: ChartToolDeps) {\n  return tool({\n    description: `Line chart: shows trends and changes over time or ordered continuous variable. Connects data points to show progression.\n\nUse when: user asks about \"trend\", \"over time\", \"changes in\", \"time series\", \"progression of\", \"track X over Y\".\nExample queries: \"population growth over time\", \"temperature trend by month\", \"show land development over years\", \"elevation changes along route\", \"average precipitation by season\".\n\nRequired:\n- x: quantitative column (${QUANTITATIVE_COLUMN_TYPES.join(', ')})\n- yFields: array of {field: string (numeric: ${NUMERIC_COLUMN_TYPES.join(', ')}), aggregate?: ${AGGREGATE_FUNCTIONS.join('|')}}\n\nOptional: xInterval for temporal grouping (${TEMPORAL_INTERVALS.join(', ')}) when x is temporal (${TEMPORAL_COLUMN_TYPES.join(', ')}).\nMultiple yFields create multi-line chart for comparing metrics.\n\nDo NOT use for: single point distributions (use histogram), categorical counts (use count-plot), two-variable correlations (use bubble-chart).`,\n    inputSchema: LineChartToolParameters,\n    execute: async (params, context) => {\n      try {\n        const {artifactId, tableName, columns} = deps.resolveResources(\n          params,\n          context,\n        );\n\n        // Validate settings\n        validateColumnExists(\n          params.settings.x,\n          QUANTITATIVE_COLUMN_TYPES,\n          columns,\n          'x',\n        );\n\n        for (const yField of params.settings.yFields) {\n          validateColumnExists(\n            yField.field,\n            NUMERIC_COLUMN_TYPES,\n            columns,\n            'yFields',\n          );\n        }\n\n        const title = params.settings.x\n          ? `Line chart - ${params.settings.yFields?.map((f) => f.field).join(', ') || ''} over ${params.settings.x}`\n          : 'Line chart';\n\n        const result = deps.createChart({\n          artifactId,\n          tableName,\n          config: {\n            chartType: 'line-chart',\n            settings: params.settings,\n          },\n          title,\n        });\n\n        return {\n          llmResult: {\n            success: true,\n            details: `Created line chart \"${result.title}\".`,\n            data: result,\n          },\n        };\n      } catch (error) {\n        return {\n          llmResult: {\n            success: false,\n            errorMessage:\n              error instanceof Error ? error.message : String(error),\n          },\n        };\n      }\n    },\n  });\n}\n"]}

package/dist/chart-types/tool-schemas.d.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+export declare const BaseChartToolParameters: z.ZodObject<{
+    artifactId: z.ZodOptional<z.ZodString>;
+    tableName: z.ZodOptional<z.ZodString>;
+    createArtifactIfMissing: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
+    reasoning: z.ZodString;
+}, z.core.$strip>;
+//# sourceMappingURL=tool-schemas.d.ts.map

package/dist/chart-types/tool-schemas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-schemas.d.ts","sourceRoot":"","sources":["../../src/chart-types/tool-schemas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,eAAO,MAAM,uBAAuB;;;;;iBAelC,CAAC"}

package/dist/chart-types/tool-schemas.js

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+export const BaseChartToolParameters = z.object({
+    artifactId: z
+        .string()
+        .optional()
+        .describe('Optional dashboard artifact ID. Defaults to current dashboard.'),
+    tableName: z
+        .string()
+        .optional()
+        .describe('Optional table name. Use when no table is selected yet.'),
+    createArtifactIfMissing: z
+        .boolean()
+        .optional()
+        .default(true)
+        .describe('If true, create dashboard artifact if missing.'),
+    reasoning: z.string().describe('Brief rationale for the chart choice.'),
+});
+//# sourceMappingURL=tool-schemas.js.map

package/dist/chart-types/tool-schemas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-schemas.js","sourceRoot":"","sources":["../../src/chart-types/tool-schemas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC9C,UAAU,EAAE,CAAC;SACV,MAAM,EAAE;SACR,QAAQ,EAAE;SACV,QAAQ,CAAC,gEAAgE,CAAC;IAC7E,SAAS,EAAE,CAAC;SACT,MAAM,EAAE;SACR,QAAQ,EAAE;SACV,QAAQ,CAAC,yDAAyD,CAAC;IACtE,uBAAuB,EAAE,CAAC;SACvB,OAAO,EAAE;SACT,QAAQ,EAAE;SACV,OAAO,CAAC,IAAI,CAAC;SACb,QAAQ,CAAC,gDAAgD,CAAC;IAC7D,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,uCAAuC,CAAC;CACxE,CAAC,CAAC","sourcesContent":["import {z} from 'zod';\n\nexport const BaseChartToolParameters = z.object({\n  artifactId: z\n    .string()\n    .optional()\n    .describe('Optional dashboard artifact ID. Defaults to current dashboard.'),\n  tableName: z\n    .string()\n    .optional()\n    .describe('Optional table name. Use when no table is selected yet.'),\n  createArtifactIfMissing: z\n    .boolean()\n    .optional()\n    .default(true)\n    .describe('If true, create dashboard artifact if missing.'),\n  reasoning: z.string().describe('Brief rationale for the chart choice.'),\n});\n"]}

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

@@ -0,0 +1,26 @@
+import { ChartConfig } from './chart-config';
+import type { ChartBuilderColumn } from './base-types';
+export interface ResolvedChartResourcesParams {
+    artifactId?: string;
+    tableName?: string;
+    createArtifactIfMissing?: boolean;
+}
+export interface ResolvedChartResources {
+    artifactId: string;
+    tableName: string;
+    columns: ChartBuilderColumn[];
+}
+export interface CreateChartParams {
+    artifactId: string;
+    tableName: string;
+    title: string;
+    config: ChartConfig;
+}
+export interface CreateChartResult {
+    panelId: string;
+    artifactId: string;
+    tableName: string;
+    title: string;
+    config: ChartConfig;
+}
+//# sourceMappingURL=tool-types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-types.d.ts","sourceRoot":"","sources":["../../src/chart-types/tool-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAErD,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB"}

package/dist/chart-types/tool-types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-types.js","sourceRoot":"","sources":["../../src/chart-types/tool-types.ts"],"names":[],"mappings":"","sourcesContent":["import {ChartConfig} from './chart-config';\nimport type {ChartBuilderColumn} from './base-types';\n\nexport interface ResolvedChartResourcesParams {\n  artifactId?: string;\n  tableName?: string;\n  createArtifactIfMissing?: boolean;\n}\n\nexport interface ResolvedChartResources {\n  artifactId: string;\n  tableName: string;\n  columns: ChartBuilderColumn[];\n}\n\nexport interface CreateChartParams {\n  artifactId: string;\n  tableName: string;\n  title: string;\n  config: ChartConfig;\n}\n\nexport interface CreateChartResult {\n  panelId: string;\n  artifactId: string;\n  tableName: string;\n  title: string;\n  config: ChartConfig;\n}\n"]}

package/dist/chart-types/tool-validation.d.ts

@@ -0,0 +1,3 @@
+import type { ChartBuilderColumn } from './base-types';
+export declare function validateColumnExists(columnName: string, expectedTypes: string[] | undefined, columns: ChartBuilderColumn[], fieldKey: string): void;
+//# sourceMappingURL=tool-validation.d.ts.map

package/dist/chart-types/tool-validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-validation.d.ts","sourceRoot":"","sources":["../../src/chart-types/tool-validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAErD,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EAAE,GAAG,SAAS,EACnC,OAAO,EAAE,kBAAkB,EAAE,EAC7B,QAAQ,EAAE,MAAM,GACf,IAAI,CAkBN"}

package/dist/chart-types/tool-validation.js

@@ -0,0 +1,11 @@
+export function validateColumnExists(columnName, expectedTypes, columns, fieldKey) {
+    const column = columns.find((candidate) => candidate.name === columnName);
+    if (!column) {
+        throw new Error(`Unknown column "${columnName}" for field "${fieldKey}". Available columns: ${columns.map((c) => c.name).join(', ') || '(none)'}.`);
+    }
+    if (expectedTypes?.length &&
+        !expectedTypes.some((type) => type.toUpperCase() === column.type.toUpperCase())) {
+        throw new Error(`Column "${columnName}" has type ${column.type} but field "${fieldKey}" expects ${expectedTypes.join(', ')}.`);
+    }
+}
+//# sourceMappingURL=tool-validation.js.map

package/dist/chart-types/tool-validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-validation.js","sourceRoot":"","sources":["../../src/chart-types/tool-validation.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAClC,UAAkB,EAClB,aAAmC,EACnC,OAA6B,EAC7B,QAAgB;IAEhB,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;IAC1E,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,mBAAmB,UAAU,gBAAgB,QAAQ,yBAAyB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,QAAQ,GAAG,CACnI,CAAC;IACJ,CAAC;IAED,IACE,aAAa,EAAE,MAAM;QACrB,CAAC,aAAa,CAAC,IAAI,CACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAC3D,EACD,CAAC;QACD,MAAM,IAAI,KAAK,CACb,WAAW,UAAU,cAAc,MAAM,CAAC,IAAI,eAAe,QAAQ,aAAa,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAC9G,CAAC;IACJ,CAAC;AACH,CAAC","sourcesContent":["import type {ChartBuilderColumn} from './base-types';\n\nexport function validateColumnExists(\n  columnName: string,\n  expectedTypes: string[] | undefined,\n  columns: ChartBuilderColumn[],\n  fieldKey: string,\n): void {\n  const column = columns.find((candidate) => candidate.name === columnName);\n  if (!column) {\n    throw new Error(\n      `Unknown column \"${columnName}\" for field \"${fieldKey}\". Available columns: ${columns.map((c) => c.name).join(', ') || '(none)'}.`,\n    );\n  }\n\n  if (\n    expectedTypes?.length &&\n    !expectedTypes.some(\n      (type) => type.toUpperCase() === column.type.toUpperCase(),\n    )\n  ) {\n    throw new Error(\n      `Column \"${columnName}\" has type ${column.type} but field \"${fieldKey}\" expects ${expectedTypes.join(', ')}.`,\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import { ChartTypeDefinition } from './base-types';
+export declare function useChartTypeDefinition(chartType: string | undefined): ChartTypeDefinition | undefined;
+//# sourceMappingURL=useChartTypeDefinition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartTypeDefinition.d.ts","sourceRoot":"","sources":["../../src/chart-types/useChartTypeDefinition.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAEjD,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,GAAG,SAAS,GAC5B,mBAAmB,GAAG,SAAS,CAUjC"}

package/dist/chart-types/useChartTypeDefinition.js

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { useStoreWithMosaicDashboard } from '../dashboard/MosaicDashboardSlice';
+export function useChartTypeDefinition(chartType) {
+    const chartTypes = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
+    // Find the chart type definition
+    return useMemo(() => chartTypes?.find((type) => type.id === chartType), [chartTypes, chartType]);
+}
+//# sourceMappingURL=useChartTypeDefinition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartTypeDefinition.js","sourceRoot":"","sources":["../../src/chart-types/useChartTypeDefinition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,2BAA2B,EAAC,MAAM,mCAAmC,CAAC;AAG9E,MAAM,UAAU,sBAAsB,CACpC,SAA6B;IAE7B,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,iCAAiC;IACjC,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,EACvD,CAAC,UAAU,EAAE,SAAS,CAAC,CACxB,CAAC;AACJ,CAAC","sourcesContent":["import {useMemo} from 'react';\nimport {useStoreWithMosaicDashboard} from '../dashboard/MosaicDashboardSlice';\nimport {ChartTypeDefinition} from './base-types';\n\nexport function useChartTypeDefinition(\n  chartType: string | undefined,\n): ChartTypeDefinition | undefined {\n  const chartTypes = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.chartTypes,\n  );\n\n  // Find the chart type definition\n  return useMemo(\n    () => chartTypes?.find((type) => type.id === chartType),\n    [chartTypes, chartType],\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"MosaicDashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAM9D,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAIhE,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,2CAuI1B;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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { MosaicChartBuilder } from '../MosaicChartBuilder';
 import { MosaicDashboardContext } from './MosaicDashboardContext';
 import { MosaicDashboardPanels } from './MosaicDashboardPanels';
-import { createMosaicDashboardVgPlotPanelConfig, MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+import { createMosaicDashboardChartPanelConfig, MOSAIC_DASHBOARD_CHART_PANEL_TYPE, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
 import { MosaicDashboardToolbar } from './MosaicDashboardToolbar';
 export function MosaicDashboardRoot({ children, dashboardId, }) {
     const ensureDashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.ensureDashboard);
@@ -11,7 +11,6 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
     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);
@@ -39,7 +38,7 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
         tablesWithColumns,
     ]);
     const handleCreateChart = useCallback((title, config) => {
-        const panel = createMosaicDashboardVgPlotPanelConfig(title, config, {
+        const panel = createMosaicDashboardChartPanelConfig(title, config, {
             tableName: dashboard?.selectedTable,
         });
         addPanel(dashboardId, panel);
@@ -49,11 +48,10 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
         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
+        // Create chart panel with default field or empty if no numeric columns
+        const panel = createMosaicDashboardChartPanelConfig('New Chart', {
+            chartType: 'histogram',
             settings: {},
-            vgplot: null,
             settingsOpen: true, // Open settings by default
         }, { tableName: dashboard.selectedTable });
         addPanel(dashboardId, panel);
@@ -62,8 +60,7 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
         dashboardId,
         builderOpen,
         canCreateChart: Boolean(dashboard?.selectedTable &&
-            panelRenderers[MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE] &&
-            chartBuilders?.length !== 0 &&
+            panelRenderers[MOSAIC_DASHBOARD_CHART_PANEL_TYPE] &&
             chartTypes?.length !== 0),
         openBuilder: () => setBuilderOpen(true),
         closeBuilder: () => setBuilderOpen(false),
@@ -71,14 +68,13 @@ export function MosaicDashboardRoot({ children, dashboardId, }) {
         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] }));
+    return (_jsxs(MosaicDashboardContext.Provider, { value: contextValue, children: [children, dashboard?.selectedTable ? (_jsx(MosaicChartBuilder, { open: builderOpen, onOpenChange: setBuilderOpen, tableName: dashboard.selectedTable, columns: builderColumns, 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, {}), _jsx("div", { className: "h-full overflow-y-auto", children: _jsx(MosaicDashboardPanels, {}) })] }) }));

package/dist/dashboard/MosaicDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboard.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,sCAAsC,EACtC,kCAAkC,EAClC,2BAA2B,GAC5B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAMhE,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,WAAW,GACc;IACzB,MAAM,eAAe,GAAG,2BAA2B,CACjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,eAAe,CACjD,CAAC;IACF,MAAM,QAAQ,GAAG,2BAA2B,CAC1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAC1C,CAAC;IACF,MAAM,gBAAgB,GAAG,2BAA2B,CAClD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,gBAAgB,CAClD,CAAC;IACF,MAAM,SAAS,GAAG,2BAA2B,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,CACpE,CAAC;IACF,MAAM,MAAM,GAAG,2BAA2B,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,2BAA2B,CAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,aAAa,CAC/C,CAAC;IACF,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IACF,MAAM,cAAc,GAAG,2BAA2B,CAChD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,cAAc,CAChD,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EACzE,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,iBAAiB,CAAC,IAAI,CACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,aAAa,CACxD,EACH,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAC9C,CAAC;IAEF,MAAM,cAAc,GAAyB,OAAO,CAClD,GAAG,EAAE,CACH,iBAAiB,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC3C,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,IAAI,EAAE,MAAM,CAAC,IAAI;KAClB,CAAC,CAAC,IAAI,EAAE,EACX,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,IAAI,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,aAAa,CACxD,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,aAAa,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACnD,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;IACH,CAAC,EAAE;QACD,SAAS,EAAE,aAAa;QACxB,WAAW;QACX,gBAAgB;QAChB,iBAAiB;KAClB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAa,EAAE,MAAyB,EAAE,EAAE;QAC3C,MAAM,KAAK,GAAG,sCAAsC,CAAC,KAAK,EAAE,MAAM,EAAE;YAClE,SAAS,EAAE,SAAS,EAAE,aAAa;SACpC,CAAC,CAAC;QACH,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC7B,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,CAAC,CAClD,CAAC;IAEF,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,8DAA8D;QAC9D,MAAM,KAAK,GAAG,sCAAsC,CAClD,WAAW,EACX;YACE,SAAS,EAAE,WAAW,EAAE,wCAAwC;YAChE,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI,EAAE,2BAA2B;SAChD,EACD,EAAC,SAAS,EAAE,SAAS,CAAC,aAAa,EAAC,CACrC,CAAC;QAEF,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,WAAW;QACX,cAAc,EAAE,OAAO,CACrB,SAAS,EAAE,aAAa;YACxB,cAAc,CAAC,kCAAkC,CAAC;YAClD,aAAa,EAAE,MAAM,KAAK,CAAC;YAC3B,UAAU,EAAE,MAAM,KAAK,CAAC,CACzB;QACD,WAAW,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC;QACvC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QACzC,cAAc;QACd,eAAe,EAAE,qBAAqB;KACvC,CAAC,EACF;QACE,WAAW;QACX,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,aAAa;QACxB,WAAW;QACX,cAAc;QACd,qBAAqB;KACtB,CACF,CAAC;IAEF,OAAO,CACL,MAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,aACjD,QAAQ,EACR,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAC1B,KAAC,kBAAkB,IACjB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,cAAc,EAC5B,SAAS,EAAE,SAAS,CAAC,aAAa,EAClC,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,iBAAiB,YAEhC,KAAC,kBAAkB,CAAC,MAAM,KAAG,GACV,CACtB,CAAC,CAAC,CAAC,IAAI,IACwB,CACnC,CAAC;AACJ,CAAC;AAMD,SAAS,wBAAwB,CAAC,EAChC,WAAW,GACU;IACrB,OAAO,CACL,KAAC,mBAAmB,IAAC,WAAW,EAAE,WAAW,YAC3C,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,sBAAsB,KAAG,EAC1B,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,qBAAqB,KAAG,GACrB,IACF,GACc,CACvB,CAAC;AACJ,CAAC;AAUD,MAAM,CAAC,MAAM,eAAe,GAAqC,MAAM,CAAC,MAAM,CAC5E,wBAAwB,EACxB;IACE,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,qBAAqB;CAC9B,CACF,CAAC","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"]}
+{"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 {MosaicChartBuilder} from '../MosaicChartBuilder';\nimport {MosaicDashboardContext} from './MosaicDashboardContext';\nimport {MosaicDashboardPanels} from './MosaicDashboardPanels';\nimport {\n  createMosaicDashboardChartPanelConfig,\n  MOSAIC_DASHBOARD_CHART_PANEL_TYPE,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\nimport {MosaicDashboardToolbar} from './MosaicDashboardToolbar';\nimport {ChartBuilderColumn} from '../chart-types/base-types';\nimport {ChartConfig} from '../chart-types/chart-config';\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 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: ChartConfig) => {\n      const panel = createMosaicDashboardChartPanelConfig(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 chart panel with default field or empty if no numeric columns\n    const panel = createMosaicDashboardChartPanelConfig(\n      'New Chart',\n      {\n        chartType: 'histogram',\n        settings: {},\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_CHART_PANEL_TYPE] &&\n        chartTypes?.length !== 0,\n      ),\n      openBuilder: () => setBuilderOpen(true),\n      closeBuilder: () => setBuilderOpen(false),\n      setBuilderOpen,\n      addDefaultChart: handleAddDefaultChart,\n    }),\n    [\n      builderOpen,\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          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/MosaicDashboardEmptyState.d.ts

@@ -0,0 +1,2 @@
+export declare const MosaicDashboardEmptyState: React.FC;
+//# sourceMappingURL=MosaicDashboardEmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardEmptyState.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardEmptyState.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EA0H7C,CAAC"}

package/dist/dashboard/MosaicDashboardEmptyState.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@sqlrooms/ui';
+import { BarChart3, Map, TableProperties, Text } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { createMosaicDashboardProfilerPanelConfig, createMosaicDashboardTextPanelConfig, MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE, MOSAIC_DASHBOARD_TEXT_PANEL_TYPE, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+export const MosaicDashboardEmptyState = () => {
+    const { dashboardId, addDefaultChart, canCreateChart } = useMosaicDashboardContext();
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const addPanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanel);
+    const panelRenderers = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.panelRenderers);
+    const addPanelActions = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanelActions);
+    const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
+    const tablesWithColumns = useMemo(() => tables.filter((table) => table.columns && table.columns.length > 0), [tables]);
+    const selectedTable = useMemo(() => tablesWithColumns.find((table) => table.tableName === dashboard?.selectedTable), [dashboard?.selectedTable, tablesWithColumns]);
+    const canAddProfiler = Boolean(dashboard?.selectedTable &&
+        panelRenderers[MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE]);
+    const canAddText = Boolean(panelRenderers[MOSAIC_DASHBOARD_TEXT_PANEL_TYPE]);
+    const addPanelActionContext = useMemo(() => ({
+        dashboardId,
+        dashboard,
+        selectedTable,
+        tables: tablesWithColumns,
+    }), [dashboard, dashboardId, selectedTable, tablesWithColumns]);
+    const mapAction = useMemo(() => addPanelActions.find((action) => action.label === 'Map'), [addPanelActions]);
+    const canAddMap = Boolean(mapAction &&
+        (mapAction.isEnabled ? mapAction.isEnabled(addPanelActionContext) : true));
+    const handleAddProfiler = useCallback(() => {
+        const panel = dashboard?.selectedTable
+            ? createMosaicDashboardProfilerPanelConfig({
+                source: { tableName: dashboard.selectedTable },
+            })
+            : createMosaicDashboardProfilerPanelConfig();
+        addPanel(dashboardId, panel);
+    }, [addPanel, dashboard, dashboardId]);
+    const handleAddMap = useCallback(() => {
+        if (!mapAction)
+            return;
+        const panel = mapAction.createPanel(addPanelActionContext);
+        if (panel) {
+            addPanel(dashboardId, panel);
+        }
+    }, [addPanel, addPanelActionContext, dashboardId, mapAction]);
+    const handleAddText = useCallback(() => {
+        const panel = createMosaicDashboardTextPanelConfig();
+        addPanel(dashboardId, panel);
+    }, [addPanel, dashboardId]);
+    return (_jsx("div", { className: "m-4 flex min-h-[240px] items-center justify-center rounded-md border border-dashed p-8", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Add a chart, profiler, map, or text to start building this dashboard" }), _jsxs("div", { className: "flex gap-3", children: [_jsxs(Button, { variant: "outline", disabled: !canCreateChart, onClick: addDefaultChart, children: [_jsx(BarChart3, { className: "mr-2 h-4 w-4" }), "Chart"] }), _jsxs(Button, { variant: "outline", disabled: !canAddProfiler, onClick: handleAddProfiler, children: [_jsx(TableProperties, { className: "mr-2 h-4 w-4" }), "Profiler"] }), _jsxs(Button, { variant: "outline", disabled: !canAddMap, onClick: handleAddMap, children: [_jsx(Map, { className: "mr-2 h-4 w-4" }), "Map"] }), _jsxs(Button, { variant: "outline", disabled: !canAddText, onClick: handleAddText, children: [_jsx(Text, { className: "mr-2 h-4 w-4" }), "Text"] })] })] }) }));
+};
+//# sourceMappingURL=MosaicDashboardEmptyState.js.map

package/dist/dashboard/MosaicDashboardEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardEmptyState.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardEmptyState.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button} from '@sqlrooms/ui';\nimport {BarChart3, Map, TableProperties, Text} from 'lucide-react';\nimport {useCallback, useMemo} from 'react';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {\n  createMosaicDashboardProfilerPanelConfig,\n  createMosaicDashboardTextPanelConfig,\n  type MosaicDashboardAddPanelActionContext,\n  MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,\n  MOSAIC_DASHBOARD_TEXT_PANEL_TYPE,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\n\nexport const MosaicDashboardEmptyState: React.FC = () => {\n  const {dashboardId, addDefaultChart, canCreateChart} =\n    useMosaicDashboardContext();\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const addPanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanel,\n  );\n  const panelRenderers = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.panelRenderers,\n  );\n  const addPanelActions = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanelActions,\n  );\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n\n  const tablesWithColumns = useMemo(\n    () => tables.filter((table) => table.columns && table.columns.length > 0),\n    [tables],\n  );\n\n  const selectedTable = useMemo(\n    () =>\n      tablesWithColumns.find(\n        (table) => table.tableName === dashboard?.selectedTable,\n      ),\n    [dashboard?.selectedTable, tablesWithColumns],\n  );\n\n  const canAddProfiler = Boolean(\n    dashboard?.selectedTable &&\n    panelRenderers[MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE],\n  );\n\n  const canAddText = Boolean(panelRenderers[MOSAIC_DASHBOARD_TEXT_PANEL_TYPE]);\n\n  const addPanelActionContext = useMemo<MosaicDashboardAddPanelActionContext>(\n    () => ({\n      dashboardId,\n      dashboard,\n      selectedTable,\n      tables: tablesWithColumns,\n    }),\n    [dashboard, dashboardId, selectedTable, tablesWithColumns],\n  );\n\n  const mapAction = useMemo(\n    () => addPanelActions.find((action) => action.label === 'Map'),\n    [addPanelActions],\n  );\n\n  const canAddMap = Boolean(\n    mapAction &&\n    (mapAction.isEnabled ? mapAction.isEnabled(addPanelActionContext) : true),\n  );\n\n  const handleAddProfiler = useCallback(() => {\n    const panel = dashboard?.selectedTable\n      ? createMosaicDashboardProfilerPanelConfig({\n          source: {tableName: dashboard.selectedTable},\n        })\n      : createMosaicDashboardProfilerPanelConfig();\n    addPanel(dashboardId, panel);\n  }, [addPanel, dashboard, dashboardId]);\n\n  const handleAddMap = useCallback(() => {\n    if (!mapAction) return;\n    const panel = mapAction.createPanel(addPanelActionContext);\n    if (panel) {\n      addPanel(dashboardId, panel);\n    }\n  }, [addPanel, addPanelActionContext, dashboardId, mapAction]);\n\n  const handleAddText = useCallback(() => {\n    const panel = createMosaicDashboardTextPanelConfig();\n    addPanel(dashboardId, panel);\n  }, [addPanel, dashboardId]);\n\n  return (\n    <div className=\"m-4 flex min-h-[240px] items-center justify-center rounded-md border border-dashed p-8\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <p className=\"text-muted-foreground text-sm\">\n          Add a chart, profiler, map, or text to start building this dashboard\n        </p>\n        <div className=\"flex gap-3\">\n          <Button\n            variant=\"outline\"\n            disabled={!canCreateChart}\n            onClick={addDefaultChart}\n          >\n            <BarChart3 className=\"mr-2 h-4 w-4\" />\n            Chart\n          </Button>\n          <Button\n            variant=\"outline\"\n            disabled={!canAddProfiler}\n            onClick={handleAddProfiler}\n          >\n            <TableProperties className=\"mr-2 h-4 w-4\" />\n            Profiler\n          </Button>\n          <Button\n            variant=\"outline\"\n            disabled={!canAddMap}\n            onClick={handleAddMap}\n          >\n            <Map className=\"mr-2 h-4 w-4\" />\n            Map\n          </Button>\n          <Button\n            variant=\"outline\"\n            disabled={!canAddText}\n            onClick={handleAddText}\n          >\n            <Text className=\"mr-2 h-4 w-4\" />\n            Text\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardPanelLayout.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanelLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAEnD,KAAK,+BAA+B,GAAG;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACzC,+BAA+B,CA0ChC,CAAC"}
+{"version":3,"file":"MosaicDashboardPanelLayout.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanelLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAC,EAAE,EAA8B,MAAM,OAAO,CAAC;AAE7D,KAAK,+BAA+B,GAAG;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACzC,+BAA+B,CA0EhC,CAAC"}

package/dist/dashboard/MosaicDashboardPanelLayout.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from '@sqlrooms/ui';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+const MIN_WIDTH_FOR_SPLIT_VIEW = 200; // pixels
 export const MosaicDashboardPanelLayout = ({ isOpen, onIsOpenChange, settings, content }) => {
     const panelRef = useRef(null);
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(window.innerWidth);
     useEffect(() => {
         if (isOpen) {
             panelRef.current?.expand();
@@ -11,6 +14,20 @@ export const MosaicDashboardPanelLayout = ({ isOpen, onIsOpenChange, settings, c
             panelRef.current?.collapse();
         }
     }, [isOpen]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
     const onResize = () => {
         const isCollapsed = panelRef.current?.isCollapsed();
         if (isCollapsed && isOpen) {
@@ -20,6 +37,10 @@ export const MosaicDashboardPanelLayout = ({ isOpen, onIsOpenChange, settings, c
             onIsOpenChange?.(true);
         }
     };
-    return (_jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "h-full", children: [_jsx(ResizablePanel, { ref: panelRef, defaultSize: "35%", minSize: "30%", maxSize: "70%", collapsible: true, collapsedSize: 0, className: "overflow-auto", onResize: onResize, children: settings }), _jsx(ResizableHandle, { className: "w-px" }), _jsx(ResizablePanel, { children: content })] }));
+    // If container is too small and settings are open, show only settings
+    if (containerWidth < MIN_WIDTH_FOR_SPLIT_VIEW && isOpen) {
+        return (_jsx("div", { ref: containerRef, className: "h-full overflow-auto", children: settings }));
+    }
+    return (_jsx("div", { ref: containerRef, className: "h-full", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "h-full", children: [_jsx(ResizablePanel, { ref: panelRef, defaultSize: "35%", minSize: "30%", maxSize: "70%", collapsible: true, collapsedSize: 0, className: "overflow-auto", onResize: onResize, children: settings }), _jsx(ResizableHandle, { className: "w-px" }), _jsx(ResizablePanel, { children: content })] }) }));
 };
 //# sourceMappingURL=MosaicDashboardPanelLayout.js.map

package/dist/dashboard/MosaicDashboardPanelLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardPanelLayout.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanelLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,cAAc,EACd,mBAAmB,GAEpB,MAAM,cAAc,CAAC;AACtB,OAAc,EAAK,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AASnD,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;QAEpD,IAAI,WAAW,IAAI,MAAM,EAAE,CAAC;YAC1B,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QAED,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,mBAAmB,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,aAC9D,KAAC,cAAc,IACb,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,KAAK,EACb,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,CAAC,EAChB,SAAS,EAAC,eAAe,EACzB,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACM,EACjB,KAAC,eAAe,IAAC,SAAS,EAAC,MAAM,GAAG,EACpC,KAAC,cAAc,cAAE,OAAO,GAAkB,IACtB,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n  type ResizablePanelHandle,\n} from '@sqlrooms/ui';\nimport React, {FC, useEffect, useRef} from 'react';\n\ntype MosaicDashboardPanelLayoutProps = {\n  isOpen?: boolean;\n  onIsOpenChange?: (isOpen: boolean) => void;\n  settings?: React.ReactNode;\n  content?: React.ReactNode;\n};\n\nexport const MosaicDashboardPanelLayout: FC<\n  MosaicDashboardPanelLayoutProps\n> = ({isOpen, onIsOpenChange, settings, content}) => {\n  const panelRef = useRef<ResizablePanelHandle>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      panelRef.current?.expand();\n    } else {\n      panelRef.current?.collapse();\n    }\n  }, [isOpen]);\n\n  const onResize = () => {\n    const isCollapsed = panelRef.current?.isCollapsed();\n\n    if (isCollapsed && isOpen) {\n      onIsOpenChange?.(false);\n    }\n\n    if (!isCollapsed && !isOpen) {\n      onIsOpenChange?.(true);\n    }\n  };\n\n  return (\n    <ResizablePanelGroup orientation=\"horizontal\" className=\"h-full\">\n      <ResizablePanel\n        ref={panelRef}\n        defaultSize=\"35%\"\n        minSize=\"30%\"\n        maxSize=\"70%\"\n        collapsible={true}\n        collapsedSize={0}\n        className=\"overflow-auto\"\n        onResize={onResize}\n      >\n        {settings}\n      </ResizablePanel>\n      <ResizableHandle className=\"w-px\" />\n      <ResizablePanel>{content}</ResizablePanel>\n    </ResizablePanelGroup>\n  );\n};\n"]}
+{"version":3,"file":"MosaicDashboardPanelLayout.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanelLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,cAAc,EACd,mBAAmB,GAEpB,MAAM,cAAc,CAAC;AACtB,OAAc,EAAK,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAS7D,MAAM,wBAAwB,GAAG,GAAG,CAAC,CAAC,SAAS;AAE/C,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,MAAM,CAAC,UAAU,CAClB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAElC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;QAEpD,IAAI,WAAW,IAAI,MAAM,EAAE,CAAC;YAC1B,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QAED,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,sEAAsE;IACtE,IAAI,cAAc,GAAG,wBAAwB,IAAI,MAAM,EAAE,CAAC;QACxD,OAAO,CACL,cAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,sBAAsB,YACrD,QAAQ,GACL,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,QAAQ,YACxC,MAAC,mBAAmB,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,aAC9D,KAAC,cAAc,IACb,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,KAAK,EACb,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,CAAC,EAChB,SAAS,EAAC,eAAe,EACzB,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACM,EACjB,KAAC,eAAe,IAAC,SAAS,EAAC,MAAM,GAAG,EACpC,KAAC,cAAc,cAAE,OAAO,GAAkB,IACtB,GAClB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n  type ResizablePanelHandle,\n} from '@sqlrooms/ui';\nimport React, {FC, useEffect, useRef, useState} from 'react';\n\ntype MosaicDashboardPanelLayoutProps = {\n  isOpen?: boolean;\n  onIsOpenChange?: (isOpen: boolean) => void;\n  settings?: React.ReactNode;\n  content?: React.ReactNode;\n};\n\nconst MIN_WIDTH_FOR_SPLIT_VIEW = 200; // pixels\n\nexport const MosaicDashboardPanelLayout: FC<\n  MosaicDashboardPanelLayoutProps\n> = ({isOpen, onIsOpenChange, settings, content}) => {\n  const panelRef = useRef<ResizablePanelHandle>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState<number>(\n    window.innerWidth,\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      panelRef.current?.expand();\n    } else {\n      panelRef.current?.collapse();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(container);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  const onResize = () => {\n    const isCollapsed = panelRef.current?.isCollapsed();\n\n    if (isCollapsed && isOpen) {\n      onIsOpenChange?.(false);\n    }\n\n    if (!isCollapsed && !isOpen) {\n      onIsOpenChange?.(true);\n    }\n  };\n\n  // If container is too small and settings are open, show only settings\n  if (containerWidth < MIN_WIDTH_FOR_SPLIT_VIEW && isOpen) {\n    return (\n      <div ref={containerRef} className=\"h-full overflow-auto\">\n        {settings}\n      </div>\n    );\n  }\n\n  return (\n    <div ref={containerRef} className=\"h-full\">\n      <ResizablePanelGroup orientation=\"horizontal\" className=\"h-full\">\n        <ResizablePanel\n          ref={panelRef}\n          defaultSize=\"35%\"\n          minSize=\"30%\"\n          maxSize=\"70%\"\n          collapsible={true}\n          collapsedSize={0}\n          className=\"overflow-auto\"\n          onResize={onResize}\n        >\n          {settings}\n        </ResizablePanel>\n        <ResizableHandle className=\"w-px\" />\n        <ResizablePanel>{content}</ResizablePanel>\n      </ResizablePanelGroup>\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MosaicDashboardPanels.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanels.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA4EzC,CAAC"}
+{"version":3,"file":"MosaicDashboardPanels.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardPanels.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAwEzC,CAAC"}

package/dist/dashboard/MosaicDashboardPanels.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isLayoutDockNode, isLayoutGridNode, LayoutRenderer, } from '@sqlrooms/layout';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { MosaicDashboardEmptyState } from './MosaicDashboardEmptyState';
 import { MosaicDashboardPanelDragOverlay } from './MosaicDashboardPanelDragOverlay';
 import { MosaicDashboardPanel } from './MosaicDashboardPanel';
 import { getMosaicDashboardDockId, MOSAIC_DASHBOARD_PANEL, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
@@ -45,7 +46,7 @@ export const MosaicDashboardPanels = () => {
         setLayout(dashboardId, innerLayout);
     }, [dashboardId, setLayout]);
     if (!panels.length || !rootLayout) {
-        return (_jsx("div", { className: "text-muted-foreground flex min-h-[240px] items-center justify-center rounded-md border border-dashed p-6 text-sm", children: "Add a chart, profiler, or map to start building this dashboard." }));
+        return _jsx(MosaicDashboardEmptyState, {});
     }
     return (_jsx("div", { className: "h-full min-h-[360px]", children: _jsx(LayoutRenderer, { rootLayout: rootLayout, onLayoutChange: handleLayoutChange }) }));
 };