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

package/dist/dashboard/panel/MosaicDashboardPanelErrorBoundary.js.map

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

package/dist/dashboard/panel/MosaicDashboardPanelHeader.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import type { MosaicDashboardEntry, MosaicDashboardPanelConfig } from '../dashboard-types';
+import { type MosaicDashboardPanelRenderer } from '../MosaicDashboardSlice';
+type MosaicDashboardPanelHeaderProps = {
+    dashboardId: string;
+    dashboard?: MosaicDashboardEntry;
+    panel?: MosaicDashboardPanelConfig;
+    renderer?: MosaicDashboardPanelRenderer;
+    selectionName: string;
+};
+export declare const MosaicDashboardPanelHeader: FC<MosaicDashboardPanelHeaderProps>;
+export {};
+//# sourceMappingURL=MosaicDashboardPanelHeader.d.ts.map

package/dist/dashboard/panel/MosaicDashboardPanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/dashboard/panel/MosaicDashboardPanelHeader.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,KAAK,4BAA4B,EAGlC,MAAM,yBAAyB,CAAC;AAEjC,KAAK,+BAA+B,GAAG;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,KAAK,CAAC,EAAE,0BAA0B,CAAC;IACnC,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACzC,+BAA+B,CA6EhC,CAAC"}

package/dist/dashboard/panel/MosaicDashboardPanelHeader.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LeafLayout, useExpandGridPanel } from '@sqlrooms/layout';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@sqlrooms/ui';
+import { ChevronsRightLeftIcon, GripVerticalIcon, MoveHorizontalIcon, Trash2Icon, } from 'lucide-react';
+import { useCallback } from 'react';
+import { useStoreWithMosaicDashboard, } from '../MosaicDashboardSlice';
+export const MosaicDashboardPanelHeader = ({ dashboardId, dashboard, panel, renderer, selectionName }) => {
+    const panelId = panel?.id;
+    const removePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.removePanel);
+    const { canExpandGridPanel, expandGridPanel, isGridPanelHorizontallyExpanded } = useExpandGridPanel();
+    const handleRemove = useCallback(() => {
+        if (!panelId)
+            return;
+        removePanel(dashboardId, panelId);
+    }, [dashboardId, panelId, removePanel]);
+    const title = panel?.title ?? 'Dashboard panel';
+    const Icon = renderer?.icon;
+    const HeaderActions = renderer?.headerActions;
+    const expandLabel = isGridPanelHorizontallyExpanded
+        ? 'Shrink panel horizontally'
+        : 'Expand panel horizontally';
+    const ExpandIcon = isGridPanelHorizontallyExpanded
+        ? ChevronsRightLeftIcon
+        : MoveHorizontalIcon;
+    const rendererProps = dashboard && panel
+        ? { dashboardId, dashboard, panel, selectionName }
+        : undefined;
+    return (_jsx(LeafLayout.Header, { children: _jsxs("div", { className: "flex items-center justify-between border-b px-2 py-1", children: [_jsxs(LeafLayout.DragHandle, { className: "flex min-w-0 flex-1 items-center gap-1", children: [_jsx(GripVerticalIcon, { className: "mx-1 h-4 w-4 shrink-0" }), Icon ? _jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }) : null, _jsx("span", { className: "truncate text-xs font-medium", children: title })] }), panel && rendererProps ? (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs("div", { className: "flex items-center gap-0.5", children: [HeaderActions ? _jsx(HeaderActions, { ...rendererProps }) : null, canExpandGridPanel ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", "aria-label": expandLabel, onClick: expandGridPanel, children: _jsx(ExpandIcon, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: expandLabel })] })) : null, _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", "aria-label": "Remove dashboard panel", onClick: handleRemove, children: _jsx(Trash2Icon, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove dashboard panel" })] })] }) })) : null] }) }));
+};
+//# sourceMappingURL=MosaicDashboardPanelHeader.js.map

package/dist/dashboard/panel/MosaicDashboardPanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardPanelHeader.js","sourceRoot":"","sources":["../../../src/dashboard/panel/MosaicDashboardPanelHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {LeafLayout, useExpandGridPanel} from '@sqlrooms/layout';\nimport {\n  Button,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@sqlrooms/ui';\nimport {\n  ChevronsRightLeftIcon,\n  GripVerticalIcon,\n  MoveHorizontalIcon,\n  Trash2Icon,\n} from 'lucide-react';\nimport {FC, useCallback} from 'react';\nimport type {\n  MosaicDashboardEntry,\n  MosaicDashboardPanelConfig,\n} from '../dashboard-types';\nimport {\n  type MosaicDashboardPanelRenderer,\n  type MosaicDashboardPanelRendererProps,\n  useStoreWithMosaicDashboard,\n} from '../MosaicDashboardSlice';\n\ntype MosaicDashboardPanelHeaderProps = {\n  dashboardId: string;\n  dashboard?: MosaicDashboardEntry;\n  panel?: MosaicDashboardPanelConfig;\n  renderer?: MosaicDashboardPanelRenderer;\n  selectionName: string;\n};\n\nexport const MosaicDashboardPanelHeader: FC<\n  MosaicDashboardPanelHeaderProps\n> = ({dashboardId, dashboard, panel, renderer, selectionName}) => {\n  const panelId = panel?.id;\n  const removePanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.removePanel,\n  );\n  const {canExpandGridPanel, expandGridPanel, isGridPanelHorizontallyExpanded} =\n    useExpandGridPanel();\n\n  const handleRemove = useCallback(() => {\n    if (!panelId) return;\n    removePanel(dashboardId, panelId);\n  }, [dashboardId, panelId, removePanel]);\n\n  const title = panel?.title ?? 'Dashboard panel';\n  const Icon = renderer?.icon;\n  const HeaderActions = renderer?.headerActions;\n  const expandLabel = isGridPanelHorizontallyExpanded\n    ? 'Shrink panel horizontally'\n    : 'Expand panel horizontally';\n  const ExpandIcon = isGridPanelHorizontallyExpanded\n    ? ChevronsRightLeftIcon\n    : MoveHorizontalIcon;\n  const rendererProps: MosaicDashboardPanelRendererProps | undefined =\n    dashboard && panel\n      ? {dashboardId, dashboard, panel, selectionName}\n      : undefined;\n\n  return (\n    <LeafLayout.Header>\n      <div className=\"flex items-center justify-between border-b px-2 py-1\">\n        <LeafLayout.DragHandle className=\"flex min-w-0 flex-1 items-center gap-1\">\n          <GripVerticalIcon className=\"mx-1 h-4 w-4 shrink-0\" />\n          {Icon ? <Icon className=\"h-3.5 w-3.5 shrink-0\" /> : null}\n          <span className=\"truncate text-xs font-medium\">{title}</span>\n        </LeafLayout.DragHandle>\n\n        {panel && rendererProps ? (\n          <TooltipProvider delayDuration={300}>\n            <div className=\"flex items-center gap-0.5\">\n              {HeaderActions ? <HeaderActions {...rendererProps} /> : null}\n              {canExpandGridPanel ? (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-6 w-6\"\n                      aria-label={expandLabel}\n                      onClick={expandGridPanel}\n                    >\n                      <ExpandIcon className=\"h-3.5 w-3.5\" />\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>{expandLabel}</TooltipContent>\n                </Tooltip>\n              ) : null}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-6 w-6\"\n                    aria-label=\"Remove dashboard panel\"\n                    onClick={handleRemove}\n                  >\n                    <Trash2Icon className=\"h-3.5 w-3.5\" />\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>Remove dashboard panel</TooltipContent>\n              </Tooltip>\n            </div>\n          </TooltipProvider>\n        ) : null}\n      </div>\n    </LeafLayout.Header>\n  );\n};\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardPanelLayout.d.ts","sourceRoot":"","sources":["../../../src/dashboard/panel/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/panel/MosaicDashboardPanelLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardPanelLayout.js","sourceRoot":"","sources":["../../../src/dashboard/panel/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/panel/MosaicDashboardPanels.d.ts.map

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

package/dist/dashboard/panel/MosaicDashboardPanels.js

@@ -0,0 +1,63 @@
+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 { MosaicDashboardPanelDragOverlay } from './MosaicDashboardPanelDragOverlay';
+import { MosaicDashboardPanel } from './MosaicDashboardPanel';
+import { getMosaicDashboardDockId, MOSAIC_DASHBOARD_PANEL, useStoreWithMosaicDashboard, } from '../MosaicDashboardSlice';
+import { DataTableSelectorEmptyState } from '../../components/DataTableSelector';
+import { useTablesWithColumns } from '../../hooks/useTablesWithColumns';
+const EMPTY_DASHBOARD_PANELS = [];
+export const MosaicDashboardPanels = () => {
+    const { dashboardId } = useMosaicDashboardContext();
+    const registerPanel = useStoreWithMosaicDashboard((state) => state.layout.registerPanel);
+    const setLayout = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setLayout);
+    const panels = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.panels ??
+        EMPTY_DASHBOARD_PANELS);
+    const dashboardLayout = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.layout ?? null);
+    const dashboardLayoutType = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.layoutType ??
+        'dock');
+    const tables = useTablesWithColumns();
+    const selectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable);
+    const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
+    const handleTableChange = useCallback((table) => {
+        setSelectedTable(dashboardId, table.table.toString());
+    }, [dashboardId, setSelectedTable]);
+    useEffect(() => {
+        // This renderer is shared by every Mosaic dashboard panel in the room.
+        // Dashboard blocks can be transiently unmounted by the surrounding editor,
+        // so unregistering on instance cleanup can leave still-mounted dashboards
+        // with layout panel shells but no chart renderer.
+        registerPanel(MOSAIC_DASHBOARD_PANEL, () => ({
+            title: 'Dashboard panel',
+            component: MosaicDashboardPanel,
+            dragOverlay: MosaicDashboardPanelDragOverlay,
+        }));
+    }, [registerPanel]);
+    const rootLayout = useMemo(() => {
+        if (!dashboardLayout)
+            return null;
+        if (dashboardLayoutType === 'grid') {
+            return isLayoutGridNode(dashboardLayout) ? dashboardLayout : null;
+        }
+        return {
+            type: 'dock',
+            id: getMosaicDashboardDockId(dashboardId),
+            root: dashboardLayout,
+        };
+    }, [dashboardId, dashboardLayout, dashboardLayoutType]);
+    const handleLayoutChange = useCallback((nextLayout) => {
+        const innerLayout = nextLayout && isLayoutDockNode(nextLayout)
+            ? nextLayout.root
+            : nextLayout;
+        setLayout(dashboardId, innerLayout);
+    }, [dashboardId, setLayout]);
+    if (!selectedTable) {
+        return (_jsx(DataTableSelectorEmptyState, { onChange: handleTableChange, tables: tables }));
+    }
+    if (!panels.length || !rootLayout) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("div", { className: "text-muted-foreground text-sm", children: "Dashboard is empty. Add a panel to get started." }) }));
+    }
+    return (_jsx("div", { className: "h-full min-h-[360px]", children: _jsx(LayoutRenderer, { rootLayout: rootLayout, onLayoutChange: handleLayoutChange }) }));
+};
+//# sourceMappingURL=MosaicDashboardPanels.js.map

package/dist/dashboard/panel/MosaicDashboardPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardPanels.js","sourceRoot":"","sources":["../../../src/dashboard/panel/MosaicDashboardPanels.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  isLayoutDockNode,\n  isLayoutGridNode,\n  LayoutNode,\n  LayoutRenderer,\n} from '@sqlrooms/layout';\nimport {useCallback, useEffect, useMemo} from 'react';\nimport {useMosaicDashboardContext} from '../MosaicDashboardContext';\nimport {MosaicDashboardPanelDragOverlay} from './MosaicDashboardPanelDragOverlay';\nimport {MosaicDashboardPanel} from './MosaicDashboardPanel';\nimport type {MosaicDashboardPanelConfig} from '../dashboard-types';\nimport {\n  getMosaicDashboardDockId,\n  MOSAIC_DASHBOARD_PANEL,\n  useStoreWithMosaicDashboard,\n} from '../MosaicDashboardSlice';\nimport {DataTableSelectorEmptyState} from '../../components/DataTableSelector';\nimport {useTablesWithColumns} from '../../hooks/useTablesWithColumns';\nimport type {DataTable} from '@sqlrooms/db';\n\nconst EMPTY_DASHBOARD_PANELS: MosaicDashboardPanelConfig[] = [];\n\nexport const MosaicDashboardPanels: React.FC = () => {\n  const {dashboardId} = useMosaicDashboardContext();\n  const registerPanel = useStoreWithMosaicDashboard(\n    (state) => state.layout.registerPanel,\n  );\n  const setLayout = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setLayout,\n  );\n  const panels = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.panels ??\n      EMPTY_DASHBOARD_PANELS,\n  );\n  const dashboardLayout = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.layout ?? null,\n  );\n  const dashboardLayoutType = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.layoutType ??\n      'dock',\n  );\n\n  const tables = useTablesWithColumns();\n  const selectedTable = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable,\n  );\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n\n  const handleTableChange = useCallback(\n    (table: DataTable) => {\n      setSelectedTable(dashboardId, table.table.toString());\n    },\n    [dashboardId, setSelectedTable],\n  );\n\n  useEffect(() => {\n    // This renderer is shared by every Mosaic dashboard panel in the room.\n    // Dashboard blocks can be transiently unmounted by the surrounding editor,\n    // so unregistering on instance cleanup can leave still-mounted dashboards\n    // with layout panel shells but no chart renderer.\n    registerPanel(MOSAIC_DASHBOARD_PANEL, () => ({\n      title: 'Dashboard panel',\n      component: MosaicDashboardPanel,\n      dragOverlay: MosaicDashboardPanelDragOverlay,\n    }));\n  }, [registerPanel]);\n\n  const rootLayout: LayoutNode | null = useMemo(() => {\n    if (!dashboardLayout) return null;\n    if (dashboardLayoutType === 'grid') {\n      return isLayoutGridNode(dashboardLayout) ? dashboardLayout : null;\n    }\n    return {\n      type: 'dock',\n      id: getMosaicDashboardDockId(dashboardId),\n      root: dashboardLayout,\n    };\n  }, [dashboardId, dashboardLayout, dashboardLayoutType]);\n\n  const handleLayoutChange = useCallback(\n    (nextLayout: LayoutNode | null) => {\n      const innerLayout =\n        nextLayout && isLayoutDockNode(nextLayout)\n          ? nextLayout.root\n          : nextLayout;\n      setLayout(dashboardId, innerLayout);\n    },\n    [dashboardId, setLayout],\n  );\n\n  if (!selectedTable) {\n    return (\n      <DataTableSelectorEmptyState\n        onChange={handleTableChange}\n        tables={tables}\n      />\n    );\n  }\n\n  if (!panels.length || !rootLayout) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <div className=\"text-muted-foreground text-sm\">\n          Dashboard is empty. Add a panel to get started.\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full min-h-[360px]\">\n      <LayoutRenderer\n        rootLayout={rootLayout}\n        onLayoutChange={handleLayoutChange}\n      />\n    </div>\n  );\n};\n"]}

package/dist/dashboard/toolbar/MosaicDashboardAddPanelDropdown.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+interface MosaicDashboardAddPanelDropdownProps {
+    dashboardId: string;
+}
+export declare const MosaicDashboardAddPanelDropdown: FC<MosaicDashboardAddPanelDropdownProps>;
+export {};
+//# sourceMappingURL=MosaicDashboardAddPanelDropdown.d.ts.map

package/dist/dashboard/toolbar/MosaicDashboardAddPanelDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardAddPanelDropdown.d.ts","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardAddPanelDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAAC,MAAM,OAAO,CAAC;AAW9B,UAAU,oCAAoC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,+BAA+B,EAAE,EAAE,CAC9C,oCAAoC,CA+BrC,CAAC"}

package/dist/dashboard/toolbar/MosaicDashboardAddPanelDropdown.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@sqlrooms/ui';
+import { Plus } from 'lucide-react';
+import { useAddPanelActions } from '../useAddPanelActions';
+export const MosaicDashboardAddPanelDropdown = ({ dashboardId }) => {
+    const { handleAddPanel, canAddPanel, actions, canAddAnyPanel } = useAddPanelActions(dashboardId);
+    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "outline", disabled: !canAddAnyPanel, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add"] }) }), _jsx(DropdownMenuContent, { align: "end", children: actions.map((action) => {
+                    const Icon = action.icon;
+                    return (_jsxs(DropdownMenuItem, { onClick: () => handleAddPanel(action), disabled: !canAddPanel(action), children: [Icon ? _jsx(Icon, { className: "mr-2 h-4 w-4" }) : null, action.label] }, action.type));
+                }) })] }));
+};
+//# sourceMappingURL=MosaicDashboardAddPanelDropdown.js.map

package/dist/dashboard/toolbar/MosaicDashboardAddPanelDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardAddPanelDropdown.js","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardAddPanelDropdown.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AAMzD,MAAM,CAAC,MAAM,+BAA+B,GAExC,CAAC,EAAC,WAAW,EAAC,EAAE,EAAE;IACpB,MAAM,EAAC,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAC,GAC1D,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAElC,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,KAAK,aACxB,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,MAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,CAAC,cAAc,aAC3D,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,GAAG,WAE1B,GACW,EACtB,KAAC,mBAAmB,IAAC,KAAK,EAAC,KAAK,YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACtB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;oBAEzB,OAAO,CACL,MAAC,gBAAgB,IAEf,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EACrC,QAAQ,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,aAE7B,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,EAC/C,MAAM,CAAC,KAAK,KALR,MAAM,CAAC,IAAI,CAMC,CACpB,CAAC;gBACJ,CAAC,CAAC,GACkB,IACT,CAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC} from 'react';\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@sqlrooms/ui';\nimport {Plus} from 'lucide-react';\nimport {useAddPanelActions} from '../useAddPanelActions';\n\ninterface MosaicDashboardAddPanelDropdownProps {\n  dashboardId: string;\n}\n\nexport const MosaicDashboardAddPanelDropdown: FC<\n  MosaicDashboardAddPanelDropdownProps\n> = ({dashboardId}) => {\n  const {handleAddPanel, canAddPanel, actions, canAddAnyPanel} =\n    useAddPanelActions(dashboardId);\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" disabled={!canAddAnyPanel}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Add\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {actions.map((action) => {\n          const Icon = action.icon;\n\n          return (\n            <DropdownMenuItem\n              key={action.type}\n              onClick={() => handleAddPanel(action)}\n              disabled={!canAddPanel(action)}\n            >\n              {Icon ? <Icon className=\"mr-2 h-4 w-4\" /> : null}\n              {action.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"]}

package/dist/dashboard/toolbar/MosaicDashboardResetFiltersButton.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+interface MosaicDashboardResetFiltersButtonProps {
+    dashboardId: string;
+}
+export declare const MosaicDashboardResetFiltersButton: FC<MosaicDashboardResetFiltersButtonProps>;
+export {};
+//# sourceMappingURL=MosaicDashboardResetFiltersButton.d.ts.map

package/dist/dashboard/toolbar/MosaicDashboardResetFiltersButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardResetFiltersButton.d.ts","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardResetFiltersButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAO5D,UAAU,sCAAsC;IAC9C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAChD,sCAAsC,CAuDvC,CAAC"}

package/dist/dashboard/toolbar/MosaicDashboardResetFiltersButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '@sqlrooms/ui';
+import { getMosaicDashboardSelectionName, useStoreWithMosaicDashboard, } from '../MosaicDashboardSlice';
+export const MosaicDashboardResetFiltersButton = ({ dashboardId }) => {
+    const getSelection = useStoreWithMosaicDashboard((state) => state.mosaic.getSelection);
+    const dashboardSelectionName = getMosaicDashboardSelectionName(dashboardId);
+    const dashboardSelection = useStoreWithMosaicDashboard((state) => state.mosaic.selections[dashboardSelectionName]);
+    const [selectionVersion, setSelectionVersion] = useState(0);
+    useEffect(() => {
+        if (!dashboardSelection) {
+            getSelection(dashboardSelectionName, 'crossfilter');
+        }
+    }, [dashboardSelection, dashboardSelectionName, getSelection]);
+    useEffect(() => {
+        if (!dashboardSelection) {
+            return;
+        }
+        const handleSelectionChange = () => {
+            setSelectionVersion((value) => value + 1);
+        };
+        dashboardSelection.addEventListener('value', handleSelectionChange);
+        return () => {
+            dashboardSelection.removeEventListener('value', handleSelectionChange);
+        };
+    }, [dashboardSelection]);
+    const hasActiveFilters = useMemo(() => Boolean(dashboardSelection?.clauses.length), [dashboardSelection, selectionVersion]);
+    const handleResetFilters = () => {
+        dashboardSelection?.reset();
+    };
+    if (!hasActiveFilters) {
+        return null;
+    }
+    return (_jsx(Button, { variant: "link", size: "sm", className: "h-8 px-0", onClick: handleResetFilters, children: "Reset filters" }));
+};
+//# sourceMappingURL=MosaicDashboardResetFiltersButton.js.map

package/dist/dashboard/toolbar/MosaicDashboardResetFiltersButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardResetFiltersButton.js","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardResetFiltersButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EACL,+BAA+B,EAC/B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAMjC,MAAM,CAAC,MAAM,iCAAiC,GAE1C,CAAC,EAAC,WAAW,EAAC,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG,2BAA2B,CAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,+BAA+B,CAAC,WAAW,CAAC,CAAC;IAC5E,MAAM,kBAAkB,GAAG,2BAA2B,CACpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAC3D,CAAC;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,YAAY,CAAC,sBAAsB,EAAE,aAAa,CAAC,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,sBAAsB,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,mBAAmB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEF,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;QACpE,OAAO,GAAG,EAAE;YACV,kBAAkB,CAAC,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;QACzE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,OAAO,CAAC,kBAAkB,EAAE,OAAO,CAAC,MAAM,CAAC,EACjD,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CACvC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,kBAAkB,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,kBAAkB,8BAGpB,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {type FC, useEffect, useMemo, useState} from 'react';\nimport {Button} from '@sqlrooms/ui';\nimport {\n  getMosaicDashboardSelectionName,\n  useStoreWithMosaicDashboard,\n} from '../MosaicDashboardSlice';\n\ninterface MosaicDashboardResetFiltersButtonProps {\n  dashboardId: string;\n}\n\nexport const MosaicDashboardResetFiltersButton: FC<\n  MosaicDashboardResetFiltersButtonProps\n> = ({dashboardId}) => {\n  const getSelection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.getSelection,\n  );\n  const dashboardSelectionName = getMosaicDashboardSelectionName(dashboardId);\n  const dashboardSelection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.selections[dashboardSelectionName],\n  );\n  const [selectionVersion, setSelectionVersion] = useState(0);\n\n  useEffect(() => {\n    if (!dashboardSelection) {\n      getSelection(dashboardSelectionName, 'crossfilter');\n    }\n  }, [dashboardSelection, dashboardSelectionName, getSelection]);\n\n  useEffect(() => {\n    if (!dashboardSelection) {\n      return;\n    }\n\n    const handleSelectionChange = () => {\n      setSelectionVersion((value) => value + 1);\n    };\n\n    dashboardSelection.addEventListener('value', handleSelectionChange);\n    return () => {\n      dashboardSelection.removeEventListener('value', handleSelectionChange);\n    };\n  }, [dashboardSelection]);\n\n  const hasActiveFilters = useMemo(\n    () => Boolean(dashboardSelection?.clauses.length),\n    [dashboardSelection, selectionVersion],\n  );\n\n  const handleResetFilters = () => {\n    dashboardSelection?.reset();\n  };\n\n  if (!hasActiveFilters) {\n    return null;\n  }\n\n  return (\n    <Button\n      variant=\"link\"\n      size=\"sm\"\n      className=\"h-8 px-0\"\n      onClick={handleResetFilters}\n    >\n      Reset filters\n    </Button>\n  );\n};\n"]}

package/dist/dashboard/toolbar/MosaicDashboardToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAUzC,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA0C1C,CAAC"}

package/dist/dashboard/toolbar/MosaicDashboardToolbar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useMosaicDashboardContext } from '../MosaicDashboardContext';
+import { useStoreWithMosaicDashboard } from '../MosaicDashboardSlice';
+import { MosaicDashboardAddPanelDropdown } from './MosaicDashboardAddPanelDropdown';
+import { MosaicDashboardResetFiltersButton } from './MosaicDashboardResetFiltersButton';
+import { DataTableSelector } from '../../components/DataTableSelector';
+import { useTablesWithColumns } from '../../hooks/useTablesWithColumns';
+import { useDataTable } from '../../hooks/useDataTable';
+export const MosaicDashboardToolbar = () => {
+    const { dashboardId } = useMosaicDashboardContext();
+    const tables = useTablesWithColumns();
+    const selectedTableName = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable);
+    const selectedTable = useDataTable(selectedTableName);
+    const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
+    const handleTableChange = useCallback((table) => {
+        setSelectedTable(dashboardId, table.table.toString());
+    }, [dashboardId, setSelectedTable]);
+    if (!selectedTableName) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center justify-between border-b px-5 py-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(MosaicDashboardResetFiltersButton, { dashboardId: dashboardId }) }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedTable && (_jsx(DataTableSelector, { className: "w-48", onChange: handleTableChange, tables: tables, value: selectedTable })), _jsx(MosaicDashboardAddPanelDropdown, { dashboardId: dashboardId })] })] }));
+};
+//# sourceMappingURL=MosaicDashboardToolbar.js.map

package/dist/dashboard/toolbar/MosaicDashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardToolbar.js","sourceRoot":"","sources":["../../../src/dashboard/toolbar/MosaicDashboardToolbar.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,EAAC,yBAAyB,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAC,2BAA2B,EAAC,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAC,+BAA+B,EAAC,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAC,iCAAiC,EAAC,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAC,iBAAiB,EAAC,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,sBAAsB,GAAa,GAAG,EAAE;IACnD,MAAM,EAAC,WAAW,EAAC,GAAG,yBAAyB,EAAE,CAAC;IAElD,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IACtC,MAAM,iBAAiB,GAAG,2BAA2B,CACnD,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,aAAa,CAC1E,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACtD,MAAM,gBAAgB,GAAG,2BAA2B,CAClD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,gBAAgB,CAClD,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAgB,EAAE,EAAE;QACnB,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAChC,CAAC;IAEF,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,iCAAiC,IAAC,WAAW,EAAE,WAAW,GAAI,GAC3D,EACN,eAAK,SAAS,EAAC,yBAAyB,aACrC,aAAa,IAAI,CAChB,KAAC,iBAAiB,IAChB,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,GACpB,CACH,EACD,KAAC,+BAA+B,IAAC,WAAW,EAAE,WAAW,GAAI,IACzD,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, {useCallback} from 'react';\nimport {useMosaicDashboardContext} from '../MosaicDashboardContext';\nimport {useStoreWithMosaicDashboard} from '../MosaicDashboardSlice';\nimport {MosaicDashboardAddPanelDropdown} from './MosaicDashboardAddPanelDropdown';\nimport {MosaicDashboardResetFiltersButton} from './MosaicDashboardResetFiltersButton';\nimport {DataTableSelector} from '../../components/DataTableSelector';\nimport {useTablesWithColumns} from '../../hooks/useTablesWithColumns';\nimport {useDataTable} from '../../hooks/useDataTable';\nimport type {DataTable} from '@sqlrooms/db';\n\nexport const MosaicDashboardToolbar: React.FC = () => {\n  const {dashboardId} = useMosaicDashboardContext();\n\n  const tables = useTablesWithColumns();\n  const selectedTableName = useStoreWithMosaicDashboard(\n    (state) =>\n      state.mosaicDashboard.config.dashboardsById[dashboardId]?.selectedTable,\n  );\n  const selectedTable = useDataTable(selectedTableName);\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n\n  const handleTableChange = useCallback(\n    (table: DataTable) => {\n      setSelectedTable(dashboardId, table.table.toString());\n    },\n    [dashboardId, setSelectedTable],\n  );\n\n  if (!selectedTableName) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex items-center justify-between border-b px-5 py-2\">\n      <div className=\"flex items-center gap-2\">\n        <MosaicDashboardResetFiltersButton dashboardId={dashboardId} />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {selectedTable && (\n          <DataTableSelector\n            className=\"w-48\"\n            onChange={handleTableChange}\n            tables={tables}\n            value={selectedTable}\n          />\n        )}\n        <MosaicDashboardAddPanelDropdown dashboardId={dashboardId} />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/dashboard/useAddPanelActions.d.ts

@@ -0,0 +1,10 @@
+import { type MosaicDashboardAddPanelAction } from './action-types';
+interface UseAddPanelActionsResult {
+    actions: MosaicDashboardAddPanelAction[];
+    canAddAnyPanel: boolean;
+    canAddPanel: (action: MosaicDashboardAddPanelAction) => boolean;
+    handleAddPanel: (action: MosaicDashboardAddPanelAction) => void;
+}
+export declare function useAddPanelActions(dashboardId: string): UseAddPanelActionsResult;
+export {};
+//# sourceMappingURL=useAddPanelActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAddPanelActions.d.ts","sourceRoot":"","sources":["../../src/dashboard/useAddPanelActions.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,6BAA6B,EAAC,MAAM,gBAAgB,CAAC;AAIlE,UAAU,wBAAwB;IAChC,OAAO,EAAE,6BAA6B,EAAE,CAAC;IACzC,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,MAAM,EAAE,6BAA6B,KAAK,OAAO,CAAC;IAChE,cAAc,EAAE,CAAC,MAAM,EAAE,6BAA6B,KAAK,IAAI,CAAC;CACjE;AAED,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,MAAM,GAClB,wBAAwB,CAwC1B"}

package/dist/dashboard/useAddPanelActions.js

@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from 'react';
+import { useStoreWithMosaicDashboard } from './MosaicDashboardSlice';
+import { useMosaicDashboardAddPanelActionContext } from './useMosaicDashboardAddPanelActionContext';
+export function useAddPanelActions(dashboardId) {
+    const addPanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanel);
+    const actions = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanelActions);
+    const addPanelActionContext = useMosaicDashboardAddPanelActionContext(dashboardId);
+    const canAddPanel = useCallback((action) => action.isEnabled ? action.isEnabled(addPanelActionContext) : true, [addPanelActionContext]);
+    const canAddAnyPanel = useMemo(() => actions.some((action) => canAddPanel(action)), [actions, canAddPanel]);
+    const handleAddPanel = (action) => {
+        if (!canAddPanel(action)) {
+            return;
+        }
+        const panel = action.createPanel(addPanelActionContext);
+        if (panel) {
+            addPanel(dashboardId, panel);
+        }
+    };
+    return {
+        actions,
+        canAddAnyPanel,
+        canAddPanel,
+        handleAddPanel,
+    };
+}
+//# sourceMappingURL=useAddPanelActions.js.map

package/dist/dashboard/useAddPanelActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAddPanelActions.js","sourceRoot":"","sources":["../../src/dashboard/useAddPanelActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAC,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAC,uCAAuC,EAAC,MAAM,2CAA2C,CAAC;AASlG,MAAM,UAAU,kBAAkB,CAChC,WAAmB;IAEnB,MAAM,QAAQ,GAAG,2BAA2B,CAC1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAC1C,CAAC;IACF,MAAM,OAAO,GAAG,2BAA2B,CACzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,eAAe,CACjD,CAAC;IAEF,MAAM,qBAAqB,GACzB,uCAAuC,CAAC,WAAW,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,MAAqC,EAAE,EAAE,CACxC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,EACnE,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EACnD,CAAC,OAAO,EAAE,WAAW,CAAC,CACvB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,MAAqC,EAAE,EAAE;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;QAExD,IAAI,KAAK,EAAE,CAAC;YACV,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,OAAO;QACP,cAAc;QACd,WAAW;QACX,cAAc;KACf,CAAC;AACJ,CAAC","sourcesContent":["import {useCallback, useMemo} from 'react';\nimport {type MosaicDashboardAddPanelAction} from './action-types';\nimport {useStoreWithMosaicDashboard} from './MosaicDashboardSlice';\nimport {useMosaicDashboardAddPanelActionContext} from './useMosaicDashboardAddPanelActionContext';\n\ninterface UseAddPanelActionsResult {\n  actions: MosaicDashboardAddPanelAction[];\n  canAddAnyPanel: boolean;\n  canAddPanel: (action: MosaicDashboardAddPanelAction) => boolean;\n  handleAddPanel: (action: MosaicDashboardAddPanelAction) => void;\n}\n\nexport function useAddPanelActions(\n  dashboardId: string,\n): UseAddPanelActionsResult {\n  const addPanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanel,\n  );\n  const actions = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanelActions,\n  );\n\n  const addPanelActionContext =\n    useMosaicDashboardAddPanelActionContext(dashboardId);\n\n  const canAddPanel = useCallback(\n    (action: MosaicDashboardAddPanelAction) =>\n      action.isEnabled ? action.isEnabled(addPanelActionContext) : true,\n    [addPanelActionContext],\n  );\n\n  const canAddAnyPanel = useMemo(\n    () => actions.some((action) => canAddPanel(action)),\n    [actions, canAddPanel],\n  );\n\n  const handleAddPanel = (action: MosaicDashboardAddPanelAction) => {\n    if (!canAddPanel(action)) {\n      return;\n    }\n\n    const panel = action.createPanel(addPanelActionContext);\n\n    if (panel) {\n      addPanel(dashboardId, panel);\n    }\n  };\n\n  return {\n    actions,\n    canAddAnyPanel,\n    canAddPanel,\n    handleAddPanel,\n  };\n}\n"]}

package/dist/dashboard/useMosaicDashboardAddPanelActionContext.d.ts

@@ -0,0 +1,3 @@
+import { type MosaicDashboardAddPanelActionContext } from './action-types';
+export declare function useMosaicDashboardAddPanelActionContext(dashboardId: string): MosaicDashboardAddPanelActionContext;
+//# sourceMappingURL=useMosaicDashboardAddPanelActionContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMosaicDashboardAddPanelActionContext.d.ts","sourceRoot":"","sources":["../../src/dashboard/useMosaicDashboardAddPanelActionContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,oCAAoC,EAAC,MAAM,gBAAgB,CAAC;AAKzE,wBAAgB,uCAAuC,CACrD,WAAW,EAAE,MAAM,GAClB,oCAAoC,CAqBtC"}

package/dist/dashboard/useMosaicDashboardAddPanelActionContext.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useStoreWithMosaicDashboard } from './MosaicDashboardSlice';
+import { useSelectedOrFirstTable } from './useSelectedOrFirstTable';
+import { useTablesWithColumns } from '../hooks/useTablesWithColumns';
+export function useMosaicDashboardAddPanelActionContext(dashboardId) {
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const chartTypes = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.chartTypes);
+    const tables = useTablesWithColumns();
+    const selectedTable = useSelectedOrFirstTable(dashboardId);
+    return useMemo(() => ({
+        dashboardId,
+        dashboard,
+        selectedTable,
+        tables,
+        chartTypes,
+    }), [dashboard, dashboardId, selectedTable, tables, chartTypes]);
+}
+//# sourceMappingURL=useMosaicDashboardAddPanelActionContext.js.map

package/dist/dashboard/useMosaicDashboardAddPanelActionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMosaicDashboardAddPanelActionContext.js","sourceRoot":"","sources":["../../src/dashboard/useMosaicDashboardAddPanelActionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAC,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AAEnE,MAAM,UAAU,uCAAuC,CACrD,WAAmB;IAEnB,MAAM,SAAS,GAAG,2BAA2B,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,CACpE,CAAC;IACF,MAAM,UAAU,GAAG,2BAA2B,CAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAC5C,CAAC;IAEF,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IACtC,MAAM,aAAa,GAAG,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAE3D,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,SAAS;QACT,aAAa;QACb,MAAM;QACN,UAAU;KACX,CAAC,EACF,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,CAAC,CAC5D,CAAC;AACJ,CAAC","sourcesContent":["import {useMemo} from 'react';\nimport {type MosaicDashboardAddPanelActionContext} from './action-types';\nimport {useStoreWithMosaicDashboard} from './MosaicDashboardSlice';\nimport {useSelectedOrFirstTable} from './useSelectedOrFirstTable';\nimport {useTablesWithColumns} from '../hooks/useTablesWithColumns';\n\nexport function useMosaicDashboardAddPanelActionContext(\n  dashboardId: string,\n): MosaicDashboardAddPanelActionContext {\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const chartTypes = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.chartTypes,\n  );\n\n  const tables = useTablesWithColumns();\n  const selectedTable = useSelectedOrFirstTable(dashboardId);\n\n  return useMemo<MosaicDashboardAddPanelActionContext>(\n    () => ({\n      dashboardId,\n      dashboard,\n      selectedTable,\n      tables,\n      chartTypes,\n    }),\n    [dashboard, dashboardId, selectedTable, tables, chartTypes],\n  );\n}\n"]}

package/dist/dashboard/useSelectedOrFirstTable.d.ts

@@ -0,0 +1,10 @@
+import { type DataTable } from '@sqlrooms/db';
+/**
+ * Returns the last selected table for a dashboard if it exists,
+ * otherwise falls back to the first table with columns.
+ *
+ * @param dashboardId - The dashboard ID
+ * @returns The selected table, or the first table, or undefined if no tables exist
+ */
+export declare function useSelectedOrFirstTable(dashboardId: string): DataTable | undefined;
+//# sourceMappingURL=useSelectedOrFirstTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedOrFirstTable.d.ts","sourceRoot":"","sources":["../../src/dashboard/useSelectedOrFirstTable.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,MAAM,GAClB,SAAS,GAAG,SAAS,CAoBvB"}

package/dist/dashboard/useSelectedOrFirstTable.js

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { useStoreWithMosaicDashboard } from './MosaicDashboardSlice';
+import { useTablesWithColumns } from '../hooks/useTablesWithColumns';
+/**
+ * Returns the last selected table for a dashboard if it exists,
+ * otherwise falls back to the first table with columns.
+ *
+ * @param dashboardId - The dashboard ID
+ * @returns The selected table, or the first table, or undefined if no tables exist
+ */
+export function useSelectedOrFirstTable(dashboardId) {
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const tables = useTablesWithColumns();
+    return useMemo(() => {
+        const lastSelectedTableName = dashboard?.lastSelectedTable;
+        if (!lastSelectedTableName) {
+            return tables[0];
+        }
+        // Try to find the last selected table first
+        const lastSelectedTable = tables.find((table) => table.table.table === lastSelectedTableName);
+        // Fall back to the first table if the selected one doesn't exist
+        return lastSelectedTable ?? tables[0];
+    }, [dashboard?.lastSelectedTable, tables]);
+}
+//# sourceMappingURL=useSelectedOrFirstTable.js.map

package/dist/dashboard/useSelectedOrFirstTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedOrFirstTable.js","sourceRoot":"","sources":["../../src/dashboard/useSelectedOrFirstTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAC,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AAEnE;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB,CACrC,WAAmB;IAEnB,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,oBAAoB,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,qBAAqB,GAAG,SAAS,EAAE,iBAAiB,CAAC;QAE3D,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC3B,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;QAED,4CAA4C;QAC5C,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,qBAAqB,CACvD,CAAC;QACF,iEAAiE;QACjE,OAAO,iBAAiB,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import {useMemo} from 'react';\nimport {type DataTable} from '@sqlrooms/db';\nimport {useStoreWithMosaicDashboard} from './MosaicDashboardSlice';\nimport {useTablesWithColumns} from '../hooks/useTablesWithColumns';\n\n/**\n * Returns the last selected table for a dashboard if it exists,\n * otherwise falls back to the first table with columns.\n *\n * @param dashboardId - The dashboard ID\n * @returns The selected table, or the first table, or undefined if no tables exist\n */\nexport function useSelectedOrFirstTable(\n  dashboardId: string,\n): DataTable | undefined {\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const tables = useTablesWithColumns();\n\n  return useMemo(() => {\n    const lastSelectedTableName = dashboard?.lastSelectedTable;\n\n    if (!lastSelectedTableName) {\n      return tables[0];\n    }\n\n    // Try to find the last selected table first\n    const lastSelectedTable = tables.find(\n      (table) => table.table.table === lastSelectedTableName,\n    );\n    // Fall back to the first table if the selected one doesn't exist\n    return lastSelectedTable ?? tables[0];\n  }, [dashboard?.lastSelectedTable, tables]);\n}\n"]}

package/dist/data-table-explorer/DataTableExplorer.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentProps, type PropsWithChildren, type ReactElement } from 'react';
+import { Button, Table } from '@sqlrooms/ui';
+import { type DataTableExplorerHeaderProps } from './DataTableExplorerHeader';
+import { type DataTableExplorerRowsProps } from './DataTableExplorerRows';
+import { type DataTableExplorerStatusBarProps } from './DataTableExplorerStatusBar';
+import type { DataTableExplorerOptions, UseDataTableExplorerReturn } from './types';
+export type DataTableExplorerRootProps = PropsWithChildren<{
+    explorer: UseDataTableExplorerReturn;
+}>;
+/**
+ * Provides an existing explorer instance to compound explorer subcomponents.
+ */
+export declare function DataTableExplorerRoot({ children, explorer, }: DataTableExplorerRootProps): import("react/jsx-runtime").JSX.Element;
+export type DataTableExplorerProps = PropsWithChildren<DataTableExplorerOptions>;
+export type DataTableExplorerCompoundHeaderProps = Omit<DataTableExplorerHeaderProps, 'explorer'>;
+declare function DataTableExplorerCompoundHeader(props: DataTableExplorerCompoundHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type DataTableExplorerCompoundRowsProps = Omit<DataTableExplorerRowsProps, 'explorer'>;
+declare function DataTableExplorerCompoundRows(props: DataTableExplorerCompoundRowsProps): import("react/jsx-runtime").JSX.Element;
+export type DataTableExplorerCompoundStatusBarProps = Omit<DataTableExplorerStatusBarProps, 'explorer'>;
+declare function DataTableExplorerCompoundStatusBar(props: DataTableExplorerCompoundStatusBarProps): import("react/jsx-runtime").JSX.Element;
+export type DataTableExplorerCompoundTableProps = ComponentProps<typeof Table>;
+declare function DataTableExplorerCompoundTable({ className, disableWrapper, style, ...props }: DataTableExplorerCompoundTableProps): import("react/jsx-runtime").JSX.Element;
+export type DataTableExplorerCompoundResetButtonProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+    onClick?: () => void;
+};
+declare function DataTableExplorerCompoundResetButton({ className, disabled: disabledProp, onClick, ...props }: DataTableExplorerCompoundResetButtonProps): import("react/jsx-runtime").JSX.Element;
+type DataTableExplorerCompoundComponent = ((props: DataTableExplorerProps) => ReactElement) & {
+    Header: typeof DataTableExplorerCompoundHeader;
+    ResetButton: typeof DataTableExplorerCompoundResetButton;
+    Root: typeof DataTableExplorerRoot;
+    Rows: typeof DataTableExplorerCompoundRows;
+    StatusBar: typeof DataTableExplorerCompoundStatusBar;
+    Table: typeof DataTableExplorerCompoundTable;
+};
+export declare const DataTableExplorer: DataTableExplorerCompoundComponent;
+export {};
+//# sourceMappingURL=DataTableExplorer.d.ts.map

package/dist/data-table-explorer/DataTableExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableExplorer.d.ts","sourceRoot":"","sources":["../../src/data-table-explorer/DataTableExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAC,MAAM,EAAM,KAAK,EAAC,MAAM,cAAc,CAAC;AAG/C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAiBjB,MAAM,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;IACzD,QAAQ,EAAE,0BAA0B,CAAC;CACtC,CAAC,CAAC;AAEH;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CAM5B;AAED,MAAM,MAAM,sBAAsB,GAChC,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;AAkB9C,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,4BAA4B,EAC5B,UAAU,CACX,CAAC;AAEF,iBAAS,+BAA+B,CACtC,KAAK,EAAE,oCAAoC,2CAI5C;AAED,MAAM,MAAM,kCAAkC,GAAG,IAAI,CACnD,0BAA0B,EAC1B,UAAU,CACX,CAAC;AAEF,iBAAS,6BAA6B,CACpC,KAAK,EAAE,kCAAkC,2CAI1C;AAED,MAAM,MAAM,uCAAuC,GAAG,IAAI,CACxD,+BAA+B,EAC/B,UAAU,CACX,CAAC;AAEF,iBAAS,kCAAkC,CACzC,KAAK,EAAE,uCAAuC,2CAI/C;AAED,MAAM,MAAM,mCAAmC,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/E,iBAAS,8BAA8B,CAAC,EACtC,SAAS,EACT,cAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mCAAmC,2CAcrC;AAED,MAAM,MAAM,yCAAyC,GAAG,IAAI,CAC1D,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,SAAS,CACV,GAAG;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,iBAAS,oCAAoC,CAAC,EAC5C,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,yCAAyC,2CAsB3C;AAED,KAAK,kCAAkC,GAAG,CAAC,CACzC,KAAK,EAAE,sBAAsB,KAC1B,YAAY,CAAC,GAAG;IACnB,MAAM,EAAE,OAAO,+BAA+B,CAAC;IAC/C,WAAW,EAAE,OAAO,oCAAoC,CAAC;IACzD,IAAI,EAAE,OAAO,qBAAqB,CAAC;IACnC,IAAI,EAAE,OAAO,6BAA6B,CAAC;IAC3C,SAAS,EAAE,OAAO,kCAAkC,CAAC;IACrD,KAAK,EAAE,OAAO,8BAA8B,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,kCAQ5B,CAAC"}

package/dist/data-table-explorer/DataTableExplorer.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, } from 'react';
+import { Button, cn, Table } from '@sqlrooms/ui';
+import { FilterX } from 'lucide-react';
+import { getDataTableExplorerTableWidth } from './layout';
+import { DataTableExplorerHeader, } from './DataTableExplorerHeader';
+import { DataTableExplorerRows, } from './DataTableExplorerRows';
+import { DataTableExplorerStatusBar, } from './DataTableExplorerStatusBar';
+import { useDataTableExplorer } from './useDataTableExplorer';
+const explorerContext = createContext(null);
+function useDataTableExplorerCompoundContext() {
+    const explorer = useContext(explorerContext);
+    if (!explorer) {
+        throw new Error('DataTableExplorer compound components must be rendered inside <DataTableExplorer> or <DataTableExplorer.Root>.');
+    }
+    return explorer;
+}
+/**
+ * Provides an existing explorer instance to compound explorer subcomponents.
+ */
+export function DataTableExplorerRoot({ children, explorer, }) {
+    return (_jsx(explorerContext.Provider, { value: explorer, children: children }));
+}
+/**
+ * Creates an explorer instance and exposes it to compound explorer
+ * subcomponents through context.
+ */
+function DataTableExplorerComponent({ children, ...options }) {
+    const explorer = useDataTableExplorer(options);
+    return (_jsx(DataTableExplorerRoot, { explorer: explorer, children: children }));
+}
+function DataTableExplorerCompoundHeader(props) {
+    const explorer = useDataTableExplorerCompoundContext();
+    return _jsx(DataTableExplorerHeader, { ...props, explorer: explorer });
+}
+function DataTableExplorerCompoundRows(props) {
+    const explorer = useDataTableExplorerCompoundContext();
+    return _jsx(DataTableExplorerRows, { ...props, explorer: explorer });
+}
+function DataTableExplorerCompoundStatusBar(props) {
+    const explorer = useDataTableExplorerCompoundContext();
+    return _jsx(DataTableExplorerStatusBar, { ...props, explorer: explorer });
+}
+function DataTableExplorerCompoundTable({ className, disableWrapper = true, style, ...props }) {
+    const explorer = useDataTableExplorerCompoundContext();
+    const tableWidth = getDataTableExplorerTableWidth(explorer.columns);
+    return (_jsx(Table, { disableWrapper: disableWrapper, className: ['min-w-full table-fixed', className]
+            .filter(Boolean)
+            .join(' '), style: { width: `${tableWidth}px`, ...style }, ...props }));
+}
+function DataTableExplorerCompoundResetButton({ className, disabled: disabledProp, onClick, ...props }) {
+    const explorer = useDataTableExplorerCompoundContext();
+    const disabled = disabledProp ?? !explorer.hasFilters;
+    return (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: cn('h-7 w-7', className), "aria-label": "Reset filters", title: "Reset filters", disabled: disabled, onClick: () => {
+            explorer.reset();
+            onClick?.();
+        }, ...props, children: _jsx(FilterX, { className: "h-4 w-4" }) }));
+}
+export const DataTableExplorer = Object.assign(DataTableExplorerComponent, {
+    Header: DataTableExplorerCompoundHeader,
+    ResetButton: DataTableExplorerCompoundResetButton,
+    Root: DataTableExplorerRoot,
+    Rows: DataTableExplorerCompoundRows,
+    StatusBar: DataTableExplorerCompoundStatusBar,
+    Table: DataTableExplorerCompoundTable,
+});
+//# sourceMappingURL=DataTableExplorer.js.map

package/dist/data-table-explorer/DataTableExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableExplorer.js","sourceRoot":"","sources":["../../src/data-table-explorer/DataTableExplorer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type PropsWithChildren,\n  type ReactElement,\n} from 'react';\nimport {Button, cn, Table} from '@sqlrooms/ui';\nimport {FilterX} from 'lucide-react';\nimport {getDataTableExplorerTableWidth} from './layout';\nimport {\n  DataTableExplorerHeader,\n  type DataTableExplorerHeaderProps,\n} from './DataTableExplorerHeader';\nimport {\n  DataTableExplorerRows,\n  type DataTableExplorerRowsProps,\n} from './DataTableExplorerRows';\nimport {\n  DataTableExplorerStatusBar,\n  type DataTableExplorerStatusBarProps,\n} from './DataTableExplorerStatusBar';\nimport type {\n  DataTableExplorerOptions,\n  UseDataTableExplorerReturn,\n} from './types';\nimport {useDataTableExplorer} from './useDataTableExplorer';\n\nconst explorerContext = createContext<UseDataTableExplorerReturn | null>(null);\n\nfunction useDataTableExplorerCompoundContext() {\n  const explorer = useContext(explorerContext);\n\n  if (!explorer) {\n    throw new Error(\n      'DataTableExplorer compound components must be rendered inside <DataTableExplorer> or <DataTableExplorer.Root>.',\n    );\n  }\n\n  return explorer;\n}\n\nexport type DataTableExplorerRootProps = PropsWithChildren<{\n  explorer: UseDataTableExplorerReturn;\n}>;\n\n/**\n * Provides an existing explorer instance to compound explorer subcomponents.\n */\nexport function DataTableExplorerRoot({\n  children,\n  explorer,\n}: DataTableExplorerRootProps) {\n  return (\n    <explorerContext.Provider value={explorer}>\n      {children}\n    </explorerContext.Provider>\n  );\n}\n\nexport type DataTableExplorerProps =\n  PropsWithChildren<DataTableExplorerOptions>;\n\n/**\n * Creates an explorer instance and exposes it to compound explorer\n * subcomponents through context.\n */\nfunction DataTableExplorerComponent({\n  children,\n  ...options\n}: DataTableExplorerProps): ReactElement {\n  const explorer = useDataTableExplorer(options);\n  return (\n    <DataTableExplorerRoot explorer={explorer}>\n      {children}\n    </DataTableExplorerRoot>\n  );\n}\n\nexport type DataTableExplorerCompoundHeaderProps = Omit<\n  DataTableExplorerHeaderProps,\n  'explorer'\n>;\n\nfunction DataTableExplorerCompoundHeader(\n  props: DataTableExplorerCompoundHeaderProps,\n) {\n  const explorer = useDataTableExplorerCompoundContext();\n  return <DataTableExplorerHeader {...props} explorer={explorer} />;\n}\n\nexport type DataTableExplorerCompoundRowsProps = Omit<\n  DataTableExplorerRowsProps,\n  'explorer'\n>;\n\nfunction DataTableExplorerCompoundRows(\n  props: DataTableExplorerCompoundRowsProps,\n) {\n  const explorer = useDataTableExplorerCompoundContext();\n  return <DataTableExplorerRows {...props} explorer={explorer} />;\n}\n\nexport type DataTableExplorerCompoundStatusBarProps = Omit<\n  DataTableExplorerStatusBarProps,\n  'explorer'\n>;\n\nfunction DataTableExplorerCompoundStatusBar(\n  props: DataTableExplorerCompoundStatusBarProps,\n) {\n  const explorer = useDataTableExplorerCompoundContext();\n  return <DataTableExplorerStatusBar {...props} explorer={explorer} />;\n}\n\nexport type DataTableExplorerCompoundTableProps = ComponentProps<typeof Table>;\n\nfunction DataTableExplorerCompoundTable({\n  className,\n  disableWrapper = true,\n  style,\n  ...props\n}: DataTableExplorerCompoundTableProps) {\n  const explorer = useDataTableExplorerCompoundContext();\n  const tableWidth = getDataTableExplorerTableWidth(explorer.columns);\n\n  return (\n    <Table\n      disableWrapper={disableWrapper}\n      className={['min-w-full table-fixed', className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{width: `${tableWidth}px`, ...style}}\n      {...props}\n    />\n  );\n}\n\nexport type DataTableExplorerCompoundResetButtonProps = Omit<\n  ComponentProps<typeof Button>,\n  'onClick'\n> & {\n  onClick?: () => void;\n};\n\nfunction DataTableExplorerCompoundResetButton({\n  className,\n  disabled: disabledProp,\n  onClick,\n  ...props\n}: DataTableExplorerCompoundResetButtonProps) {\n  const explorer = useDataTableExplorerCompoundContext();\n  const disabled = disabledProp ?? !explorer.hasFilters;\n\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      className={cn('h-7 w-7', className)}\n      aria-label=\"Reset filters\"\n      title=\"Reset filters\"\n      disabled={disabled}\n      onClick={() => {\n        explorer.reset();\n        onClick?.();\n      }}\n      {...props}\n    >\n      <FilterX className=\"h-4 w-4\" />\n    </Button>\n  );\n}\n\ntype DataTableExplorerCompoundComponent = ((\n  props: DataTableExplorerProps,\n) => ReactElement) & {\n  Header: typeof DataTableExplorerCompoundHeader;\n  ResetButton: typeof DataTableExplorerCompoundResetButton;\n  Root: typeof DataTableExplorerRoot;\n  Rows: typeof DataTableExplorerCompoundRows;\n  StatusBar: typeof DataTableExplorerCompoundStatusBar;\n  Table: typeof DataTableExplorerCompoundTable;\n};\n\nexport const DataTableExplorer: DataTableExplorerCompoundComponent =\n  Object.assign(DataTableExplorerComponent, {\n    Header: DataTableExplorerCompoundHeader,\n    ResetButton: DataTableExplorerCompoundResetButton,\n    Root: DataTableExplorerRoot,\n    Rows: DataTableExplorerCompoundRows,\n    StatusBar: DataTableExplorerCompoundStatusBar,\n    Table: DataTableExplorerCompoundTable,\n  });\n"]}