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

package/dist/dashboard/MosaicDashboard.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { MosaicDashboardCharts } from './MosaicDashboardCharts';
+import { MosaicDashboardProfiler } from './MosaicDashboardProfiler';
+import { MosaicDashboardToolbar } from './MosaicDashboardToolbar';
+export type MosaicDashboardRootProps = PropsWithChildren<{
+    dashboardId: string;
+}>;
+export declare function MosaicDashboardRoot({ children, dashboardId, }: MosaicDashboardRootProps): import("react/jsx-runtime").JSX.Element;
+export type MosaicDashboardProps = {
+    dashboardId: string;
+};
+type MosaicDashboardCompoundComponent = ((props: MosaicDashboardProps) => ReactElement) & {
+    Root: typeof MosaicDashboardRoot;
+    Toolbar: typeof MosaicDashboardToolbar;
+    Profiler: typeof MosaicDashboardProfiler;
+    Charts: typeof MosaicDashboardCharts;
+};
+export declare const MosaicDashboard: MosaicDashboardCompoundComponent;
+export {};
+//# sourceMappingURL=MosaicDashboard.d.ts.map

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

@@ -0,0 +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"}

package/dist/dashboard/MosaicDashboard.js

@@ -0,0 +1,68 @@
+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 { MosaicDashboardToolbar } from './MosaicDashboardToolbar';
+export function MosaicDashboardRoot({ children, dashboardId, }) {
+    const ensureDashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.ensureDashboard);
+    const addChart = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addChart);
+    const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
+    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]);
+    const builderColumns = useMemo(() => selectedTableInfo?.columns?.map((column) => ({
+        name: column.name,
+        type: column.type,
+    })) ?? [], [selectedTableInfo]);
+    useEffect(() => {
+        ensureDashboard(dashboardId);
+    }, [dashboardId, ensureDashboard]);
+    useEffect(() => {
+        const firstTable = tablesWithColumns[0];
+        if (!firstTable)
+            return;
+        const tableStillExists = tablesWithColumns.some((table) => table.tableName === dashboard?.selectedTable);
+        if (!dashboard?.selectedTable || !tableStillExists) {
+            setSelectedTable(dashboardId, firstTable.tableName);
+        }
+    }, [
+        dashboard?.selectedTable,
+        dashboardId,
+        setSelectedTable,
+        tablesWithColumns,
+    ]);
+    const handleCreateChart = useCallback((spec, title) => {
+        const newChart = {
+            id: createId(),
+            title,
+            vgplot: JSON.parse(JSON.stringify(spec)),
+        };
+        addChart(dashboardId, newChart);
+        setBuilderOpen(false);
+    }, [addChart, dashboardId]);
+    const contextValue = useMemo(() => ({
+        dashboardId,
+        builderOpen,
+        canCreateChart: Boolean(dashboard?.selectedTable),
+        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] }));
+}
+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, {})] })] }) }));
+}
+export const MosaicDashboard = Object.assign(MosaicDashboardComponent, {
+    Root: MosaicDashboardRoot,
+    Toolbar: MosaicDashboardToolbar,
+    Profiler: MosaicDashboardProfiler,
+    Charts: MosaicDashboardCharts,
+});
+//# sourceMappingURL=MosaicDashboard.js.map

package/dist/dashboard/MosaicDashboard.js.map

@@ -0,0 +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"]}

package/dist/dashboard/MosaicDashboardChartPanel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardChartPanel.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardChartPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAyBzD,eAAO,MAAM,yBAAyB,EAAE,kBAmGvC,CAAC"}

package/dist/dashboard/MosaicDashboardChartPanel.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, SpinnerPane } from '@sqlrooms/ui';
+import { Trash2Icon } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { VgPlotChart } from '../VgPlotChart';
+import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { getMosaicDashboardSelectionName, parseMosaicDashboardChartId, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+import { VgPlotSpecPopoverEditor } from './VgPlotSpecPopoverEditor';
+function toRenderableMosaicSpec(parsedValue) {
+    const mosaicSpec = { ...parsedValue };
+    if ('$schema' in mosaicSpec) {
+        delete mosaicSpec.$schema;
+    }
+    return mosaicSpec;
+}
+export const MosaicDashboardChartPanel = ({ panelInfo }) => {
+    const { dashboardId } = useMosaicDashboardContext();
+    const chartId = parseMosaicDashboardChartId(dashboardId, panelInfo.panelId);
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const connection = useStoreWithMosaicDashboard((state) => state.mosaic.connection);
+    const updateChart = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updateChart);
+    const removeChart = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.removeChart);
+    const getSelection = useStoreWithMosaicDashboard((state) => state.mosaic.getSelection);
+    const chart = useMemo(() => chartId
+        ? dashboard?.charts.find((candidate) => candidate.id === chartId)
+        : undefined, [chartId, dashboard?.charts]);
+    const spec = chart?.vgplot
+        ? toRenderableMosaicSpec(chart.vgplot)
+        : null;
+    const brushSelection = useMemo(() => getSelection(getMosaicDashboardSelectionName(dashboardId), 'crossfilter'), [dashboardId, getSelection]);
+    const params = useMemo(() => new Map([['brush', brushSelection]]), [brushSelection]);
+    const handleSpecApply = useCallback((newVgplot) => {
+        if (!chartId)
+            return;
+        updateChart(dashboardId, chartId, { vgplot: newVgplot });
+    }, [chartId, dashboardId, updateChart]);
+    const handleRemove = useCallback(() => {
+        if (!chartId)
+            return;
+        removeChart(dashboardId, chartId);
+    }, [chartId, dashboardId, removeChart]);
+    if (!chart) {
+        return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: "Chart not found" }));
+    }
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-2 py-1", children: [_jsx("span", { className: "truncate text-xs font-medium", children: chart.title }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(VgPlotSpecPopoverEditor, { value: chart.vgplot, onApply: handleSpecApply }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", title: "Remove chart", onClick: handleRemove, children: _jsx(Trash2Icon, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: connection.status === 'loading' ? (_jsx(SpinnerPane, { className: "h-full w-full" })) : connection.status === 'ready' && spec ? (_jsx("div", { className: "bg-background text-foreground inline-block min-w-full rounded-md p-2", children: _jsx(VgPlotChart, { spec: spec, params: params }) })) : (_jsx("div", { className: "text-muted-foreground text-sm", children: connection.status === 'error'
+                        ? 'Mosaic connection failed'
+                        : 'No valid chart spec' })) })] }));
+};
+//# sourceMappingURL=MosaicDashboardChartPanel.js.map

package/dist/dashboard/MosaicDashboardChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardChartPanel.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardChartPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {RoomPanelComponent} from '@sqlrooms/layout';\nimport {Button, SpinnerPane} from '@sqlrooms/ui';\nimport type {Selection} from '@uwdata/mosaic-core';\nimport type {Spec} from '@uwdata/mosaic-spec';\nimport {Trash2Icon} from 'lucide-react';\nimport {useCallback, useMemo} from 'react';\nimport {VgPlotChart} from '../VgPlotChart';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {\n  getMosaicDashboardSelectionName,\n  parseMosaicDashboardChartId,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\nimport {VgPlotSpecPopoverEditor} from './VgPlotSpecPopoverEditor';\n\nfunction toRenderableMosaicSpec(\n  parsedValue: Record<string, unknown>,\n): Record<string, unknown> {\n  const mosaicSpec = {...parsedValue};\n  if ('$schema' in mosaicSpec) {\n    delete mosaicSpec.$schema;\n  }\n  return mosaicSpec;\n}\n\nexport const MosaicDashboardChartPanel: RoomPanelComponent = ({panelInfo}) => {\n  const {dashboardId} = useMosaicDashboardContext();\n  const chartId = parseMosaicDashboardChartId(dashboardId, panelInfo.panelId);\n\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const connection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.connection,\n  );\n  const updateChart = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.updateChart,\n  );\n  const removeChart = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.removeChart,\n  );\n  const getSelection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.getSelection,\n  );\n\n  const chart = useMemo(\n    () =>\n      chartId\n        ? dashboard?.charts.find((candidate) => candidate.id === chartId)\n        : undefined,\n    [chartId, dashboard?.charts],\n  );\n\n  const spec = chart?.vgplot\n    ? (toRenderableMosaicSpec(chart.vgplot) as unknown as Spec)\n    : null;\n  const brushSelection = useMemo(\n    () =>\n      getSelection(getMosaicDashboardSelectionName(dashboardId), 'crossfilter'),\n    [dashboardId, getSelection],\n  );\n  const params = useMemo(\n    () => new Map<string, Selection>([['brush', brushSelection]]),\n    [brushSelection],\n  );\n\n  const handleSpecApply = useCallback(\n    (newVgplot: Record<string, unknown>) => {\n      if (!chartId) return;\n      updateChart(dashboardId, chartId, {vgplot: newVgplot});\n    },\n    [chartId, dashboardId, updateChart],\n  );\n\n  const handleRemove = useCallback(() => {\n    if (!chartId) return;\n    removeChart(dashboardId, chartId);\n  }, [chartId, dashboardId, removeChart]);\n\n  if (!chart) {\n    return (\n      <div className=\"text-muted-foreground flex h-full items-center justify-center text-sm\">\n        Chart not found\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between border-b px-2 py-1\">\n        <span className=\"truncate text-xs font-medium\">{chart.title}</span>\n        <div className=\"flex items-center gap-0.5\">\n          <VgPlotSpecPopoverEditor\n            value={chart.vgplot}\n            onApply={handleSpecApply}\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Remove chart\"\n            onClick={handleRemove}\n          >\n            <Trash2Icon className=\"h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        {connection.status === 'loading' ? (\n          <SpinnerPane className=\"h-full w-full\" />\n        ) : connection.status === 'ready' && spec ? (\n          <div className=\"bg-background text-foreground inline-block min-w-full rounded-md p-2\">\n            <VgPlotChart spec={spec} params={params} />\n          </div>\n        ) : (\n          <div className=\"text-muted-foreground text-sm\">\n            {connection.status === 'error'\n              ? 'Mosaic connection failed'\n              : 'No valid chart spec'}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/dashboard/MosaicDashboardCharts.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const MosaicDashboardCharts: React.FC;
+//# sourceMappingURL=MosaicDashboardCharts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardCharts.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardCharts.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAU7D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAiFzC,CAAC"}

package/dist/dashboard/MosaicDashboardCharts.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isLayoutMosaicNode, LayoutRenderer, } from '@sqlrooms/layout';
+import { Button } from '@sqlrooms/ui';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Plus } from 'lucide-react';
+import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { getMosaicDashboardMosaicId, getMosaicDashboardPanelId, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+import { MosaicDashboardChartPanel } from './MosaicDashboardChartPanel';
+export const MosaicDashboardCharts = () => {
+    const { dashboardId, canCreateChart, openBuilder } = useMosaicDashboardContext();
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const registerPanel = useStoreWithMosaicDashboard((state) => state.layout.registerPanel);
+    const unregisterPanel = useStoreWithMosaicDashboard((state) => state.layout.unregisterPanel);
+    const setLayout = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setLayout);
+    const charts = useMemo(() => dashboard?.charts ?? [], [dashboard?.charts]);
+    useEffect(() => {
+        const registeredIds = [];
+        for (const chart of charts) {
+            const panelId = getMosaicDashboardPanelId(dashboardId, chart.id);
+            registerPanel(panelId, {
+                title: chart.title,
+                component: MosaicDashboardChartPanel,
+            });
+            registeredIds.push(panelId);
+        }
+        return () => {
+            for (const id of registeredIds) {
+                unregisterPanel(id);
+            }
+        };
+    }, [charts, dashboardId, registerPanel, unregisterPanel]);
+    const mosaicNode = useMemo(() => ({
+        type: 'mosaic',
+        id: getMosaicDashboardMosaicId(dashboardId),
+        layout: dashboard?.layout ?? null,
+    }), [dashboard?.layout, dashboardId]);
+    const handleLayoutChange = useCallback((nextLayout) => {
+        setLayout(dashboardId, nextLayout && isLayoutMosaicNode(nextLayout) ? nextLayout.layout : null);
+    }, [dashboardId, setLayout]);
+    if (charts.length === 0) {
+        return (_jsxs("div", { className: "text-muted-foreground flex h-64 flex-col items-center justify-center gap-2 text-sm", children: [_jsx("p", { children: "No charts yet. Add one to get started." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: openBuilder, disabled: !canCreateChart, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Chart"] })] }));
+    }
+    return (_jsx("div", { className: "min-h-0 flex-1", children: _jsx(LayoutRenderer, { rootLayout: mosaicNode, onLayoutChange: handleLayoutChange }) }));
+};
+//# sourceMappingURL=MosaicDashboardCharts.js.map

package/dist/dashboard/MosaicDashboardCharts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardCharts.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardCharts.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,kBAAkB,EAGlB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAc,EAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,yBAAyB,EAAC,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,GAC5B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AAEtE,MAAM,CAAC,MAAM,qBAAqB,GAAa,GAAG,EAAE;IAClD,MAAM,EAAC,WAAW,EAAE,cAAc,EAAE,WAAW,EAAC,GAC9C,yBAAyB,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,2BAA2B,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,CACpE,CAAC;IACF,MAAM,aAAa,GAAG,2BAA2B,CAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CACtC,CAAC;IACF,MAAM,eAAe,GAAG,2BAA2B,CACjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CACxC,CAAC;IACF,MAAM,SAAS,GAAG,2BAA2B,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,CAC3C,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAa,EAAE,CAAC;QAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,OAAO,GAAG,yBAAyB,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;YACjE,aAAa,CAAC,OAAO,EAAE;gBACrB,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,SAAS,EAAE,yBAAyB;aACrC,CAAC,CAAC;YACH,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,EAAE,IAAI,aAAa,EAAE,CAAC;gBAC/B,eAAe,CAAC,EAAE,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAqB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,0BAA0B,CAAC,WAAW,CAAC;QAC3C,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI,IAAI;KAClC,CAAC,EACF,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,UAA6B,EAAE,EAAE;QAChC,SAAS,CACP,WAAW,EACX,UAAU,IAAI,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CACxE,CAAC;IACJ,CAAC,EACD,CAAC,WAAW,EAAE,SAAS,CAAC,CACzB,CAAC;IAEF,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,eAAK,SAAS,EAAC,oFAAoF,aACjG,iEAA6C,EAC7C,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,cAAc,aAEzB,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,GAAG,iBAE1B,IACL,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,kBAAkB,GAClC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  isLayoutMosaicNode,\n  LayoutMosaicNode,\n  LayoutNode,\n  LayoutRenderer,\n} from '@sqlrooms/layout';\nimport {Button} from '@sqlrooms/ui';\nimport React, {useCallback, useEffect, useMemo} from 'react';\nimport {Plus} from 'lucide-react';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {\n  getMosaicDashboardMosaicId,\n  getMosaicDashboardPanelId,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\nimport {MosaicDashboardChartPanel} from './MosaicDashboardChartPanel';\n\nexport const MosaicDashboardCharts: React.FC = () => {\n  const {dashboardId, canCreateChart, openBuilder} =\n    useMosaicDashboardContext();\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const registerPanel = useStoreWithMosaicDashboard(\n    (state) => state.layout.registerPanel,\n  );\n  const unregisterPanel = useStoreWithMosaicDashboard(\n    (state) => state.layout.unregisterPanel,\n  );\n  const setLayout = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setLayout,\n  );\n\n  const charts = useMemo(() => dashboard?.charts ?? [], [dashboard?.charts]);\n\n  useEffect(() => {\n    const registeredIds: string[] = [];\n\n    for (const chart of charts) {\n      const panelId = getMosaicDashboardPanelId(dashboardId, chart.id);\n      registerPanel(panelId, {\n        title: chart.title,\n        component: MosaicDashboardChartPanel,\n      });\n      registeredIds.push(panelId);\n    }\n\n    return () => {\n      for (const id of registeredIds) {\n        unregisterPanel(id);\n      }\n    };\n  }, [charts, dashboardId, registerPanel, unregisterPanel]);\n\n  const mosaicNode: LayoutMosaicNode = useMemo(\n    () => ({\n      type: 'mosaic',\n      id: getMosaicDashboardMosaicId(dashboardId),\n      layout: dashboard?.layout ?? null,\n    }),\n    [dashboard?.layout, dashboardId],\n  );\n\n  const handleLayoutChange = useCallback(\n    (nextLayout: LayoutNode | null) => {\n      setLayout(\n        dashboardId,\n        nextLayout && isLayoutMosaicNode(nextLayout) ? nextLayout.layout : null,\n      );\n    },\n    [dashboardId, setLayout],\n  );\n\n  if (charts.length === 0) {\n    return (\n      <div className=\"text-muted-foreground flex h-64 flex-col items-center justify-center gap-2 text-sm\">\n        <p>No charts yet. Add one to get started.</p>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onClick={openBuilder}\n          disabled={!canCreateChart}\n        >\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Add Chart\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-0 flex-1\">\n      <LayoutRenderer\n        rootLayout={mosaicNode}\n        onLayoutChange={handleLayoutChange}\n      />\n    </div>\n  );\n};\n"]}

package/dist/dashboard/MosaicDashboardContext.d.ts

@@ -0,0 +1,11 @@
+export type MosaicDashboardContextValue = {
+    dashboardId: string;
+    builderOpen: boolean;
+    canCreateChart: boolean;
+    openBuilder: () => void;
+    closeBuilder: () => void;
+    setBuilderOpen: (open: boolean) => void;
+};
+export declare const MosaicDashboardContext: import("react").Context<MosaicDashboardContextValue | null>;
+export declare function useMosaicDashboardContext(): MosaicDashboardContextValue;
+//# sourceMappingURL=MosaicDashboardContext.d.ts.map

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

@@ -0,0 +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"}

package/dist/dashboard/MosaicDashboardContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const MosaicDashboardContext = createContext(null);
+export function useMosaicDashboardContext() {
+    const ctx = useContext(MosaicDashboardContext);
+    if (!ctx) {
+        throw new Error('MosaicDashboard compound components must be rendered inside <MosaicDashboard> or <MosaicDashboard.Root>.');
+    }
+    return ctx;
+}
+//# sourceMappingURL=MosaicDashboardContext.js.map

package/dist/dashboard/MosaicDashboardContext.js.map

@@ -0,0 +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"]}

package/dist/dashboard/MosaicDashboardProfiler.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const MosaicDashboardProfiler: React.FC;
+//# sourceMappingURL=MosaicDashboardProfiler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardProfiler.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardProfiler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAuC3C,CAAC"}

package/dist/dashboard/MosaicDashboardProfiler.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SpinnerPane } from '@sqlrooms/ui';
+import { MosaicProfiler } from '../profiler/MosaicProfiler';
+import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { getMosaicDashboardSelectionName, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
+export const MosaicDashboardProfiler = () => {
+    const { dashboardId } = useMosaicDashboardContext();
+    const selectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable);
+    const connection = useStoreWithMosaicDashboard((state) => state.mosaic.connection);
+    if (!selectedTable) {
+        return null;
+    }
+    if (connection.status === 'loading') {
+        return _jsx(SpinnerPane, { className: "h-48 w-full" });
+    }
+    if (connection.status !== 'ready') {
+        return null;
+    }
+    return (_jsx(MosaicProfiler, { tableName: selectedTable, pageSize: 10, selectionName: getMosaicDashboardSelectionName(dashboardId), children: _jsxs("div", { className: "border-b", children: [_jsx("div", { className: "min-h-0 overflow-auto", children: _jsxs(MosaicProfiler.Table, { children: [_jsx(MosaicProfiler.Header, {}), _jsx(MosaicProfiler.Rows, {})] }) }), _jsx(MosaicProfiler.StatusBar, {})] }) }));
+};
+//# sourceMappingURL=MosaicDashboardProfiler.js.map

package/dist/dashboard/MosaicDashboardProfiler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardProfiler.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardProfiler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAC,yBAAyB,EAAC,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,+BAA+B,EAC/B,2BAA2B,GAC5B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,CAAC,MAAM,uBAAuB,GAAa,GAAG,EAAE;IACpD,MAAM,EAAC,WAAW,EAAC,GAAG,yBAAyB,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,2BAA2B,CAC/C,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,aAAa,CAC1E,CAAC;IACF,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CACnC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QACpC,OAAO,KAAC,WAAW,IAAC,SAAS,EAAC,aAAa,GAAG,CAAC;IACjD,CAAC;IAED,IAAI,UAAU,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,EAAE,EACZ,aAAa,EAAE,+BAA+B,CAAC,WAAW,CAAC,YAE3D,eAAK,SAAS,EAAC,UAAU,aACvB,cAAK,SAAS,EAAC,uBAAuB,YACpC,MAAC,cAAc,CAAC,KAAK,eACnB,KAAC,cAAc,CAAC,MAAM,KAAG,EACzB,KAAC,cAAc,CAAC,IAAI,KAAG,IACF,GACnB,EACN,KAAC,cAAc,CAAC,SAAS,KAAG,IACxB,GACS,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {SpinnerPane} from '@sqlrooms/ui';\nimport React from 'react';\nimport {MosaicProfiler} from '../profiler/MosaicProfiler';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {\n  getMosaicDashboardSelectionName,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\n\nexport const MosaicDashboardProfiler: React.FC = () => {\n  const {dashboardId} = useMosaicDashboardContext();\n  const selectedTable = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable,\n  );\n  const connection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.connection,\n  );\n\n  if (!selectedTable) {\n    return null;\n  }\n\n  if (connection.status === 'loading') {\n    return <SpinnerPane className=\"h-48 w-full\" />;\n  }\n\n  if (connection.status !== 'ready') {\n    return null;\n  }\n\n  return (\n    <MosaicProfiler\n      tableName={selectedTable}\n      pageSize={10}\n      selectionName={getMosaicDashboardSelectionName(dashboardId)}\n    >\n      <div className=\"border-b\">\n        <div className=\"min-h-0 overflow-auto\">\n          <MosaicProfiler.Table>\n            <MosaicProfiler.Header />\n            <MosaicProfiler.Rows />\n          </MosaicProfiler.Table>\n        </div>\n        <MosaicProfiler.StatusBar />\n      </div>\n    </MosaicProfiler>\n  );\n};\n"]}

package/dist/dashboard/MosaicDashboardSlice.d.ts

@@ -0,0 +1,68 @@
+import { DbSliceState } from '@sqlrooms/db';
+import { type DuckDbSliceState } from '@sqlrooms/duckdb';
+import type { LayoutMosaicSubNode } from '@sqlrooms/layout-config';
+import { LayoutSliceState } from '@sqlrooms/layout';
+import { BaseRoomStoreState, SliceFunctions } from '@sqlrooms/room-store';
+import { z } from 'zod';
+import { type MosaicSliceState } from '../MosaicSlice';
+export declare const DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT: string;
+export declare const DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC: Record<string, unknown>;
+export declare const MosaicDashboardChartConfig: z.ZodObject<{
+    id: z.ZodString;
+    title: z.ZodDefault<z.ZodString>;
+    vgplot: z.ZodDefault<z.ZodObject<{}, z.core.$loose>>;
+}, z.core.$strip>;
+export type MosaicDashboardChartConfig = z.infer<typeof MosaicDashboardChartConfig>;
+export declare const MosaicDashboardEntry: z.ZodObject<{
+    id: z.ZodString;
+    title: z.ZodDefault<z.ZodString>;
+    selectedTable: z.ZodOptional<z.ZodString>;
+    charts: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        title: z.ZodDefault<z.ZodString>;
+        vgplot: z.ZodDefault<z.ZodObject<{}, z.core.$loose>>;
+    }, z.core.$strip>>>;
+    layout: z.ZodDefault<z.ZodNullable<z.ZodType<LayoutMosaicSubNode, unknown, z.core.$ZodTypeInternals<LayoutMosaicSubNode, unknown>>>>;
+    updatedAt: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>;
+export type MosaicDashboardEntry = z.infer<typeof MosaicDashboardEntry>;
+export declare const MosaicDashboardSliceConfig: z.ZodObject<{
+    dashboardsById: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+        id: z.ZodString;
+        title: z.ZodDefault<z.ZodString>;
+        selectedTable: z.ZodOptional<z.ZodString>;
+        charts: z.ZodDefault<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            title: z.ZodDefault<z.ZodString>;
+            vgplot: z.ZodDefault<z.ZodObject<{}, z.core.$loose>>;
+        }, z.core.$strip>>>;
+        layout: z.ZodDefault<z.ZodNullable<z.ZodType<LayoutMosaicSubNode, unknown, z.core.$ZodTypeInternals<LayoutMosaicSubNode, unknown>>>>;
+        updatedAt: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>;
+export type MosaicDashboardSliceConfig = z.infer<typeof MosaicDashboardSliceConfig>;
+export type MosaicDashboardSliceState = {
+    mosaicDashboard: SliceFunctions & {
+        config: MosaicDashboardSliceConfig;
+        createDashboard: (title?: string) => string;
+        ensureDashboard: (dashboardId: string, title?: string) => void;
+        removeDashboard: (dashboardId: string) => void;
+        getDashboard: (dashboardId: string) => MosaicDashboardEntry | undefined;
+        setSelectedTable: (dashboardId: string, tableName: string) => void;
+        addChart: (dashboardId: string, chart: MosaicDashboardChartConfig) => MosaicDashboardChartConfig['id'];
+        updateChart: (dashboardId: string, chartId: string, patch: Partial<Pick<MosaicDashboardChartConfig, 'title' | 'vgplot'>>) => void;
+        removeChart: (dashboardId: string, chartId: string) => void;
+        setLayout: (dashboardId: string, layout: LayoutMosaicSubNode | null) => void;
+    };
+};
+export type MosaicDashboardStoreState = BaseRoomStoreState & DbSliceState & DuckDbSliceState & LayoutSliceState & MosaicSliceState & MosaicDashboardSliceState;
+export declare function getMosaicDashboardPanelId(dashboardId: string, chartId: string): string;
+export declare function getMosaicDashboardMosaicId(dashboardId: string): string;
+export declare function getMosaicDashboardSelectionName(dashboardId: string): string;
+export declare function parseMosaicDashboardChartId(dashboardId: string, panelId: string): string | undefined;
+export declare function createDefaultMosaicDashboardConfig(props?: Partial<MosaicDashboardSliceConfig>): MosaicDashboardSliceConfig;
+export declare function createMosaicDashboardSlice(props?: {
+    config?: Partial<MosaicDashboardSliceConfig>;
+}): import("zustand").StateCreator<MosaicDashboardSliceState>;
+export declare function useStoreWithMosaicDashboard<T>(selector: (state: MosaicDashboardStoreState) => T): T;
+//# sourceMappingURL=MosaicDashboardSlice.d.ts.map

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

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