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

package/dist/dashboard/MosaicDashboardSlice.js

@@ -0,0 +1,230 @@
+import { createId } from '@paralleldrive/cuid2';
+import { LayoutMosaicSubNode as LayoutMosaicSubNodeSchema } from '@sqlrooms/layout-config';
+import { createSlice, useBaseRoomStore, } from '@sqlrooms/room-store';
+import { produce } from 'immer';
+import { z } from 'zod';
+export const DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT = JSON.stringify({
+    $schema: 'https://idl.uw.edu/mosaic/schema/latest.json',
+    meta: {
+        title: 'New Chart',
+        description: 'Use the chart builder or edit the spec directly to visualize DuckDB tables.',
+    },
+    data: {
+        sample: {
+            type: 'table',
+            query: `
+          SELECT * FROM (
+            VALUES
+              ('A', 12),
+              ('B', 26),
+              ('C', 18),
+              ('D', 9)
+          ) AS t(category, amount)
+        `,
+        },
+    },
+    plot: [
+        {
+            mark: 'barY',
+            data: { from: 'sample' },
+            x: 'category',
+            y: 'amount',
+            fill: 'category',
+        },
+    ],
+    xLabel: 'Category',
+    yLabel: 'Amount',
+    width: 560,
+    height: 320,
+}, null, 2);
+export const DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC = JSON.parse(DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT);
+export const MosaicDashboardChartConfig = z.object({
+    id: z.string(),
+    title: z.string().default('Chart'),
+    vgplot: z
+        .object({})
+        .passthrough()
+        .default(DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC),
+});
+export const MosaicDashboardEntry = z.object({
+    id: z.string(),
+    title: z.string().default('Dashboard'),
+    selectedTable: z.string().optional(),
+    charts: z.array(MosaicDashboardChartConfig).default([]),
+    layout: LayoutMosaicSubNodeSchema.nullable().default(null),
+    updatedAt: z.number().default(0),
+});
+export const MosaicDashboardSliceConfig = z.object({
+    dashboardsById: z.record(z.string(), MosaicDashboardEntry).default({}),
+});
+function appendPanelToLayout(layout, panelId) {
+    if (!layout) {
+        return panelId;
+    }
+    return {
+        type: 'split',
+        direction: 'row',
+        children: [layout, panelId],
+    };
+}
+function removePanelFromLayout(layout, panelId) {
+    if (!layout)
+        return null;
+    if (typeof layout === 'string') {
+        return layout === panelId ? null : layout;
+    }
+    const nextChildren = layout.children
+        .map((child) => removePanelFromLayout(child, panelId))
+        .filter((child) => child !== null);
+    if (nextChildren.length === 0)
+        return null;
+    if (nextChildren.length === 1) {
+        const onlyChild = nextChildren[0];
+        return onlyChild ?? null;
+    }
+    return {
+        ...layout,
+        children: nextChildren,
+    };
+}
+function collectPanelIds(layout, panelIds = new Set()) {
+    if (!layout)
+        return panelIds;
+    if (typeof layout === 'string') {
+        panelIds.add(layout);
+        return panelIds;
+    }
+    for (const child of layout.children) {
+        collectPanelIds(child, panelIds);
+    }
+    return panelIds;
+}
+function ensureLayoutContainsPanels(layout, panelIds) {
+    let nextLayout = layout;
+    const existing = collectPanelIds(layout);
+    for (const panelId of panelIds) {
+        if (!existing.has(panelId)) {
+            nextLayout = appendPanelToLayout(nextLayout, panelId);
+            existing.add(panelId);
+        }
+    }
+    return nextLayout;
+}
+export function getMosaicDashboardPanelId(dashboardId, chartId) {
+    return `dashboard:${dashboardId}:chart:${chartId}`;
+}
+export function getMosaicDashboardMosaicId(dashboardId) {
+    return `dashboard:${dashboardId}:mosaic`;
+}
+export function getMosaicDashboardSelectionName(dashboardId) {
+    return `dashboard:${dashboardId}:brush`;
+}
+export function parseMosaicDashboardChartId(dashboardId, panelId) {
+    const prefix = `dashboard:${dashboardId}:chart:`;
+    return panelId.startsWith(prefix) ? panelId.slice(prefix.length) : undefined;
+}
+export function createDefaultMosaicDashboardConfig(props) {
+    return MosaicDashboardSliceConfig.parse({
+        dashboardsById: {},
+        ...props,
+    });
+}
+export function createMosaicDashboardSlice(props = {}) {
+    return createSlice((set, get) => ({
+        mosaicDashboard: {
+            config: createDefaultMosaicDashboardConfig(props.config),
+            createDashboard(title) {
+                const dashboardId = createId();
+                get().mosaicDashboard.ensureDashboard(dashboardId, title);
+                return dashboardId;
+            },
+            ensureDashboard(dashboardId, title) {
+                set((state) => produce(state, (draft) => {
+                    const existing = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (existing) {
+                        if (title && existing.title !== title) {
+                            existing.title = title;
+                            existing.updatedAt = Date.now();
+                        }
+                        return;
+                    }
+                    draft.mosaicDashboard.config.dashboardsById[dashboardId] = {
+                        id: dashboardId,
+                        title: title ?? 'Dashboard',
+                        selectedTable: undefined,
+                        charts: [],
+                        layout: null,
+                        updatedAt: Date.now(),
+                    };
+                }));
+            },
+            removeDashboard(dashboardId) {
+                set((state) => produce(state, (draft) => {
+                    delete draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                }));
+            },
+            getDashboard(dashboardId) {
+                return get().mosaicDashboard.config.dashboardsById[dashboardId];
+            },
+            setSelectedTable(dashboardId, tableName) {
+                get().mosaicDashboard.ensureDashboard(dashboardId);
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    dashboard.selectedTable = tableName;
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
+            addChart(dashboardId, chart) {
+                get().mosaicDashboard.ensureDashboard(dashboardId);
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    dashboard.charts.push(chart);
+                    dashboard.layout = appendPanelToLayout(dashboard.layout, getMosaicDashboardPanelId(dashboardId, chart.id));
+                    dashboard.updatedAt = Date.now();
+                }));
+                return chart.id;
+            },
+            updateChart(dashboardId, chartId, patch) {
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    const chart = dashboard.charts.find((item) => item.id === chartId);
+                    if (!chart)
+                        return;
+                    Object.assign(chart, patch);
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
+            removeChart(dashboardId, chartId) {
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    dashboard.charts = dashboard.charts.filter((chart) => chart.id !== chartId);
+                    dashboard.layout = removePanelFromLayout(dashboard.layout, getMosaicDashboardPanelId(dashboardId, chartId));
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
+            setLayout(dashboardId, layout) {
+                get().mosaicDashboard.ensureDashboard(dashboardId);
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    const chartPanelIds = dashboard.charts.map((chart) => getMosaicDashboardPanelId(dashboardId, chart.id));
+                    dashboard.layout = ensureLayoutContainsPanels(layout, chartPanelIds);
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
+        },
+    }));
+}
+export function useStoreWithMosaicDashboard(selector) {
+    return useBaseRoomStore((state) => selector(state));
+}
+//# sourceMappingURL=MosaicDashboardSlice.js.map

package/dist/dashboard/MosaicDashboardSlice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardSlice.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {createId} from '@paralleldrive/cuid2';\nimport {DbSliceState} from '@sqlrooms/db';\nimport {type DuckDbSliceState} from '@sqlrooms/duckdb';\nimport type {LayoutMosaicSubNode} from '@sqlrooms/layout-config';\nimport {LayoutMosaicSubNode as LayoutMosaicSubNodeSchema} from '@sqlrooms/layout-config';\nimport {LayoutSliceState} from '@sqlrooms/layout';\nimport {\n  BaseRoomStoreState,\n  createSlice,\n  SliceFunctions,\n  useBaseRoomStore,\n} from '@sqlrooms/room-store';\nimport {produce} from 'immer';\nimport {z} from 'zod';\nimport {type MosaicSliceState} from '../MosaicSlice';\n\nexport const DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT = JSON.stringify(\n  {\n    $schema: 'https://idl.uw.edu/mosaic/schema/latest.json',\n    meta: {\n      title: 'New Chart',\n      description:\n        'Use the chart builder or edit the spec directly to visualize DuckDB tables.',\n    },\n    data: {\n      sample: {\n        type: 'table',\n        query: `\n          SELECT * FROM (\n            VALUES\n              ('A', 12),\n              ('B', 26),\n              ('C', 18),\n              ('D', 9)\n          ) AS t(category, amount)\n        `,\n      },\n    },\n    plot: [\n      {\n        mark: 'barY',\n        data: {from: 'sample'},\n        x: 'category',\n        y: 'amount',\n        fill: 'category',\n      },\n    ],\n    xLabel: 'Category',\n    yLabel: 'Amount',\n    width: 560,\n    height: 320,\n  },\n  null,\n  2,\n);\n\nexport const DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC = JSON.parse(\n  DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT,\n) as Record<string, unknown>;\n\nexport const MosaicDashboardChartConfig = z.object({\n  id: z.string(),\n  title: z.string().default('Chart'),\n  vgplot: z\n    .object({})\n    .passthrough()\n    .default(DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC),\n});\nexport type MosaicDashboardChartConfig = z.infer<\n  typeof MosaicDashboardChartConfig\n>;\n\nexport const MosaicDashboardEntry = z.object({\n  id: z.string(),\n  title: z.string().default('Dashboard'),\n  selectedTable: z.string().optional(),\n  charts: z.array(MosaicDashboardChartConfig).default([]),\n  layout: LayoutMosaicSubNodeSchema.nullable().default(null),\n  updatedAt: z.number().default(0),\n});\nexport type MosaicDashboardEntry = z.infer<typeof MosaicDashboardEntry>;\n\nexport const MosaicDashboardSliceConfig = z.object({\n  dashboardsById: z.record(z.string(), MosaicDashboardEntry).default({}),\n});\nexport type MosaicDashboardSliceConfig = z.infer<\n  typeof MosaicDashboardSliceConfig\n>;\n\nexport type MosaicDashboardSliceState = {\n  mosaicDashboard: SliceFunctions & {\n    config: MosaicDashboardSliceConfig;\n    createDashboard: (title?: string) => string;\n    ensureDashboard: (dashboardId: string, title?: string) => void;\n    removeDashboard: (dashboardId: string) => void;\n    getDashboard: (dashboardId: string) => MosaicDashboardEntry | undefined;\n    setSelectedTable: (dashboardId: string, tableName: string) => void;\n    addChart: (\n      dashboardId: string,\n      chart: MosaicDashboardChartConfig,\n    ) => MosaicDashboardChartConfig['id'];\n    updateChart: (\n      dashboardId: string,\n      chartId: string,\n      patch: Partial<Pick<MosaicDashboardChartConfig, 'title' | 'vgplot'>>,\n    ) => void;\n    removeChart: (dashboardId: string, chartId: string) => void;\n    setLayout: (\n      dashboardId: string,\n      layout: LayoutMosaicSubNode | null,\n    ) => void;\n  };\n};\n\nexport type MosaicDashboardStoreState = BaseRoomStoreState &\n  DbSliceState &\n  DuckDbSliceState &\n  LayoutSliceState &\n  MosaicSliceState &\n  MosaicDashboardSliceState;\n\nfunction appendPanelToLayout(\n  layout: LayoutMosaicSubNode | null,\n  panelId: string,\n): LayoutMosaicSubNode {\n  if (!layout) {\n    return panelId;\n  }\n  return {\n    type: 'split',\n    direction: 'row',\n    children: [layout, panelId],\n  };\n}\n\nfunction removePanelFromLayout(\n  layout: LayoutMosaicSubNode | null,\n  panelId: string,\n): LayoutMosaicSubNode | null {\n  if (!layout) return null;\n  if (typeof layout === 'string') {\n    return layout === panelId ? null : layout;\n  }\n\n  const nextChildren = layout.children\n    .map((child: LayoutMosaicSubNode) => removePanelFromLayout(child, panelId))\n    .filter((child): child is LayoutMosaicSubNode => child !== null);\n\n  if (nextChildren.length === 0) return null;\n  if (nextChildren.length === 1) {\n    const onlyChild = nextChildren[0];\n    return onlyChild ?? null;\n  }\n\n  return {\n    ...layout,\n    children: nextChildren,\n  };\n}\n\nfunction collectPanelIds(\n  layout: LayoutMosaicSubNode | null,\n  panelIds = new Set<string>(),\n) {\n  if (!layout) return panelIds;\n  if (typeof layout === 'string') {\n    panelIds.add(layout);\n    return panelIds;\n  }\n  for (const child of layout.children) {\n    collectPanelIds(child, panelIds);\n  }\n  return panelIds;\n}\n\nfunction ensureLayoutContainsPanels(\n  layout: LayoutMosaicSubNode | null,\n  panelIds: string[],\n): LayoutMosaicSubNode | null {\n  let nextLayout = layout;\n  const existing = collectPanelIds(layout);\n\n  for (const panelId of panelIds) {\n    if (!existing.has(panelId)) {\n      nextLayout = appendPanelToLayout(nextLayout, panelId);\n      existing.add(panelId);\n    }\n  }\n\n  return nextLayout;\n}\n\nexport function getMosaicDashboardPanelId(\n  dashboardId: string,\n  chartId: string,\n): string {\n  return `dashboard:${dashboardId}:chart:${chartId}`;\n}\n\nexport function getMosaicDashboardMosaicId(dashboardId: string): string {\n  return `dashboard:${dashboardId}:mosaic`;\n}\n\nexport function getMosaicDashboardSelectionName(dashboardId: string): string {\n  return `dashboard:${dashboardId}:brush`;\n}\n\nexport function parseMosaicDashboardChartId(\n  dashboardId: string,\n  panelId: string,\n): string | undefined {\n  const prefix = `dashboard:${dashboardId}:chart:`;\n  return panelId.startsWith(prefix) ? panelId.slice(prefix.length) : undefined;\n}\n\nexport function createDefaultMosaicDashboardConfig(\n  props?: Partial<MosaicDashboardSliceConfig>,\n): MosaicDashboardSliceConfig {\n  return MosaicDashboardSliceConfig.parse({\n    dashboardsById: {},\n    ...props,\n  });\n}\n\nexport function createMosaicDashboardSlice(\n  props: {config?: Partial<MosaicDashboardSliceConfig>} = {},\n) {\n  return createSlice<MosaicDashboardSliceState, MosaicDashboardStoreState>(\n    (set, get) => ({\n      mosaicDashboard: {\n        config: createDefaultMosaicDashboardConfig(props.config),\n\n        createDashboard(title) {\n          const dashboardId = createId();\n          get().mosaicDashboard.ensureDashboard(dashboardId, title);\n          return dashboardId;\n        },\n\n        ensureDashboard(dashboardId, title) {\n          set((state) =>\n            produce(state, (draft) => {\n              const existing =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (existing) {\n                if (title && existing.title !== title) {\n                  existing.title = title;\n                  existing.updatedAt = Date.now();\n                }\n                return;\n              }\n              draft.mosaicDashboard.config.dashboardsById[dashboardId] = {\n                id: dashboardId,\n                title: title ?? 'Dashboard',\n                selectedTable: undefined,\n                charts: [],\n                layout: null,\n                updatedAt: Date.now(),\n              };\n            }),\n          );\n        },\n\n        removeDashboard(dashboardId) {\n          set((state) =>\n            produce(state, (draft) => {\n              delete draft.mosaicDashboard.config.dashboardsById[dashboardId];\n            }),\n          );\n        },\n\n        getDashboard(dashboardId) {\n          return get().mosaicDashboard.config.dashboardsById[dashboardId];\n        },\n\n        setSelectedTable(dashboardId, tableName) {\n          get().mosaicDashboard.ensureDashboard(dashboardId);\n          set((state) =>\n            produce(state, (draft) => {\n              const dashboard =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (!dashboard) return;\n              dashboard.selectedTable = tableName;\n              dashboard.updatedAt = Date.now();\n            }),\n          );\n        },\n\n        addChart(dashboardId, chart) {\n          get().mosaicDashboard.ensureDashboard(dashboardId);\n          set((state) =>\n            produce(state, (draft) => {\n              const dashboard =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (!dashboard) return;\n\n              dashboard.charts.push(chart);\n              dashboard.layout = appendPanelToLayout(\n                dashboard.layout,\n                getMosaicDashboardPanelId(dashboardId, chart.id),\n              );\n              dashboard.updatedAt = Date.now();\n            }),\n          );\n          return chart.id;\n        },\n\n        updateChart(dashboardId, chartId, patch) {\n          set((state) =>\n            produce(state, (draft) => {\n              const dashboard =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (!dashboard) return;\n\n              const chart = dashboard.charts.find(\n                (item) => item.id === chartId,\n              );\n              if (!chart) return;\n\n              Object.assign(chart, patch);\n              dashboard.updatedAt = Date.now();\n            }),\n          );\n        },\n\n        removeChart(dashboardId, chartId) {\n          set((state) =>\n            produce(state, (draft) => {\n              const dashboard =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (!dashboard) return;\n\n              dashboard.charts = dashboard.charts.filter(\n                (chart) => chart.id !== chartId,\n              );\n              dashboard.layout = removePanelFromLayout(\n                dashboard.layout,\n                getMosaicDashboardPanelId(dashboardId, chartId),\n              );\n              dashboard.updatedAt = Date.now();\n            }),\n          );\n        },\n\n        setLayout(dashboardId, layout) {\n          get().mosaicDashboard.ensureDashboard(dashboardId);\n          set((state) =>\n            produce(state, (draft) => {\n              const dashboard =\n                draft.mosaicDashboard.config.dashboardsById[dashboardId];\n              if (!dashboard) return;\n\n              const chartPanelIds = dashboard.charts.map((chart) =>\n                getMosaicDashboardPanelId(dashboardId, chart.id),\n              );\n\n              dashboard.layout = ensureLayoutContainsPanels(\n                layout,\n                chartPanelIds,\n              );\n              dashboard.updatedAt = Date.now();\n            }),\n          );\n        },\n      },\n    }),\n  );\n}\n\nexport function useStoreWithMosaicDashboard<T>(\n  selector: (state: MosaicDashboardStoreState) => T,\n): T {\n  return useBaseRoomStore<BaseRoomStoreState, T>((state) =>\n    selector(state as unknown as MosaicDashboardStoreState),\n  );\n}\n"]}

package/dist/dashboard/MosaicDashboardToolbar.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA2E1C,CAAC"}

package/dist/dashboard/MosaicDashboardToolbar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useMosaicDashboardContext } from './MosaicDashboardContext';
+import { useStoreWithMosaicDashboard } from './MosaicDashboardSlice';
+export const MosaicDashboardToolbar = () => {
+    const { dashboardId, canCreateChart, openBuilder } = useMosaicDashboardContext();
+    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
+    const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
+    const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
+    const tablesWithColumns = useMemo(() => tables.filter((table) => table.columns && table.columns.length > 0), [tables]);
+    const [tablePickerOpen, setTablePickerOpen] = useState(false);
+    return (_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-sm font-medium", children: dashboard?.title || 'Dashboard' }), _jsxs(Popover, { open: tablePickerOpen, onOpenChange: setTablePickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", role: "combobox", "aria-expanded": tablePickerOpen, className: "w-[200px] justify-between", children: [_jsx("span", { className: "truncate", children: dashboard?.selectedTable || 'Select table…' }), _jsx(ChevronsUpDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[220px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search tables\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No tables found." }), _jsx(CommandGroup, { children: tablesWithColumns.map((table) => (_jsxs(CommandItem, { value: table.tableName, onSelect: (value) => {
+                                                            setSelectedTable(dashboardId, value);
+                                                            setTablePickerOpen(false);
+                                                        }, children: [_jsx(Check, { className: `mr-2 h-3.5 w-3.5 ${dashboard?.selectedTable === table.tableName ? 'opacity-100' : 'opacity-0'}` }), table.tableName] }, table.tableName))) })] })] }) })] })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: openBuilder, disabled: !canCreateChart, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Chart"] })] }));
+};
+//# sourceMappingURL=MosaicDashboardToolbar.js.map

package/dist/dashboard/MosaicDashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicDashboardToolbar.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@sqlrooms/ui';\nimport {Check, ChevronsUpDown, Plus} from 'lucide-react';\nimport React, {useMemo, useState} from 'react';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {useStoreWithMosaicDashboard} from './MosaicDashboardSlice';\n\nexport const MosaicDashboardToolbar: React.FC = () => {\n  const {dashboardId, canCreateChart, openBuilder} =\n    useMosaicDashboardContext();\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n  const tablesWithColumns = useMemo(\n    () => tables.filter((table) => table.columns && table.columns.length > 0),\n    [tables],\n  );\n  const [tablePickerOpen, setTablePickerOpen] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-between border-b px-3 py-2\">\n      <div className=\"flex items-center gap-2\">\n        <h3 className=\"text-sm font-medium\">\n          {dashboard?.title || 'Dashboard'}\n        </h3>\n        <Popover open={tablePickerOpen} onOpenChange={setTablePickerOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              role=\"combobox\"\n              aria-expanded={tablePickerOpen}\n              className=\"w-[200px] justify-between\"\n            >\n              <span className=\"truncate\">\n                {dashboard?.selectedTable || 'Select table…'}\n              </span>\n              <ChevronsUpDown className=\"ml-1 h-3.5 w-3.5 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-[220px] p-0\" align=\"start\">\n            <Command>\n              <CommandInput placeholder=\"Search tables…\" />\n              <CommandList>\n                <CommandEmpty>No tables found.</CommandEmpty>\n                <CommandGroup>\n                  {tablesWithColumns.map((table) => (\n                    <CommandItem\n                      key={table.tableName}\n                      value={table.tableName}\n                      onSelect={(value) => {\n                        setSelectedTable(dashboardId, value);\n                        setTablePickerOpen(false);\n                      }}\n                    >\n                      <Check\n                        className={`mr-2 h-3.5 w-3.5 ${dashboard?.selectedTable === table.tableName ? 'opacity-100' : 'opacity-0'}`}\n                      />\n                      {table.tableName}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\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"]}

package/dist/dashboard/VgPlotSpecPopoverEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface VgPlotSpecPopoverEditorProps {
+    value: Record<string, unknown>;
+    onApply: (value: Record<string, unknown>) => void;
+}
+export declare const VgPlotSpecPopoverEditor: React.FC<VgPlotSpecPopoverEditorProps>;
+export {};
+//# sourceMappingURL=VgPlotSpecPopoverEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VgPlotSpecPopoverEditor.d.ts","sourceRoot":"","sources":["../../src/dashboard/VgPlotSpecPopoverEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CAkF7B,CAAC"}

package/dist/dashboard/VgPlotSpecPopoverEditor.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@sqlrooms/ui';
+import { PencilIcon } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { MosaicCodeMirrorEditor } from '../editor/MosaicCodeMirrorEditor';
+export const VgPlotSpecPopoverEditor = ({ value, onApply }) => {
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(() => JSON.stringify(value, null, 2));
+    const handleOpenChange = useCallback((nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+            setDraft(JSON.stringify(value, null, 2));
+        }
+    }, [value]);
+    const handleApply = useCallback(() => {
+        try {
+            const parsed = JSON.parse(draft);
+            onApply(parsed);
+            setOpen(false);
+        }
+        catch {
+            // Invalid JSON — keep the editor open.
+        }
+    }, [draft, onApply]);
+    const serializedValue = JSON.stringify(value, null, 2);
+    const isDirty = draft !== serializedValue;
+    let isValidJson = false;
+    try {
+        JSON.parse(draft);
+        isValidJson = true;
+    }
+    catch {
+        // ignore
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", title: "Edit spec", children: _jsx(PencilIcon, { className: "h-3.5 w-3.5" }) }) }), _jsx(PopoverContent, { side: "bottom", align: "end", className: "w-[500px] p-0", onInteractOutside: (event) => {
+                    if (isDirty)
+                        event.preventDefault();
+                }, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "h-72 overflow-hidden", children: _jsx(MosaicCodeMirrorEditor, { value: draft, onChange: (nextValue) => setDraft(nextValue ?? ''), className: "h-full", enableSchemaValidation: true }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t p-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: !isDirty || !isValidJson, onClick: handleApply, children: "Apply" })] })] }) })] }));
+};
+//# sourceMappingURL=VgPlotSpecPopoverEditor.js.map

package/dist/dashboard/VgPlotSpecPopoverEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VgPlotSpecPopoverEditor.js","sourceRoot":"","sources":["../../src/dashboard/VgPlotSpecPopoverEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, Popover, PopoverContent, PopoverTrigger} from '@sqlrooms/ui';\nimport {PencilIcon} from 'lucide-react';\nimport React, {useCallback, useState} from 'react';\nimport {MosaicCodeMirrorEditor} from '../editor/MosaicCodeMirrorEditor';\n\ninterface VgPlotSpecPopoverEditorProps {\n  value: Record<string, unknown>;\n  onApply: (value: Record<string, unknown>) => void;\n}\n\nexport const VgPlotSpecPopoverEditor: React.FC<\n  VgPlotSpecPopoverEditorProps\n> = ({value, onApply}) => {\n  const [open, setOpen] = useState(false);\n  const [draft, setDraft] = useState(() => JSON.stringify(value, null, 2));\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen);\n      if (nextOpen) {\n        setDraft(JSON.stringify(value, null, 2));\n      }\n    },\n    [value],\n  );\n\n  const handleApply = useCallback(() => {\n    try {\n      const parsed = JSON.parse(draft);\n      onApply(parsed as Record<string, unknown>);\n      setOpen(false);\n    } catch {\n      // Invalid JSON — keep the editor open.\n    }\n  }, [draft, onApply]);\n\n  const serializedValue = JSON.stringify(value, null, 2);\n  const isDirty = draft !== serializedValue;\n  let isValidJson = false;\n  try {\n    JSON.parse(draft);\n    isValidJson = true;\n  } catch {\n    // ignore\n  }\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-6 w-6\"\n          title=\"Edit spec\"\n        >\n          <PencilIcon className=\"h-3.5 w-3.5\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"bottom\"\n        align=\"end\"\n        className=\"w-[500px] p-0\"\n        onInteractOutside={(event) => {\n          if (isDirty) event.preventDefault();\n        }}\n      >\n        <div className=\"flex flex-col\">\n          <div className=\"h-72 overflow-hidden\">\n            <MosaicCodeMirrorEditor\n              value={draft}\n              onChange={(nextValue: string | undefined) =>\n                setDraft(nextValue ?? '')\n              }\n              className=\"h-full\"\n              enableSchemaValidation\n            />\n          </div>\n          <div className=\"flex items-center justify-end gap-2 border-t p-2\">\n            <Button variant=\"outline\" size=\"sm\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              disabled={!isDirty || !isValidJson}\n              onClick={handleApply}\n            >\n              Apply\n            </Button>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"]}

package/dist/editor/MosaicChartContainer.d.ts

@@ -0,0 +1,51 @@
+import { Param } from '@uwdata/mosaic-core';
+import { Spec } from '@uwdata/mosaic-spec';
+import React from 'react';
+import { OnMosaicSpecChange } from './types';
+export interface MosaicChartContainerProps {
+    /**
+     * Initial Mosaic specification
+     */
+    spec: Spec | string;
+    /**
+     * Pre-defined params/selections for shared cross-filtering
+     */
+    params?: Map<string, Param<any>>;
+    /**
+     * Whether editing is enabled
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Callback when spec changes are applied
+     */
+    onSpecChange?: OnMosaicSpecChange;
+    /**
+     * Child components (Chart, SpecEditor, Actions)
+     */
+    children: React.ReactNode;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+}
+/**
+ * Container component for composable Mosaic chart editing.
+ * Provides context for child subcomponents.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container
+ *   spec={mySpec}
+ *   params={paramsMap}
+ *   editable={true}
+ *   onSpecChange={(spec) => saveSpec(spec)}
+ * >
+ *   <MosaicChart.Chart />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export declare const MosaicChartContainer: React.FC<MosaicChartContainerProps>;
+//# sourceMappingURL=MosaicChartContainer.d.ts.map

package/dist/editor/MosaicChartContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartContainer.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicChartContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC;AACzC,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAA2B,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAGrE,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8BpE,CAAC"}

package/dist/editor/MosaicChartContainer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import { useMemo } from 'react';
+import { MosaicEditorContext } from './MosaicEditorContext';
+import { useMosaicChartEditor } from './useMosaicChartEditor';
+/**
+ * Container component for composable Mosaic chart editing.
+ * Provides context for child subcomponents.
+ *
+ * @example
+ * ```tsx
+ * <MosaicChart.Container
+ *   spec={mySpec}
+ *   params={paramsMap}
+ *   editable={true}
+ *   onSpecChange={(spec) => saveSpec(spec)}
+ * >
+ *   <MosaicChart.Chart />
+ *   <MosaicChart.SpecEditor />
+ *   <MosaicChart.Actions />
+ * </MosaicChart.Container>
+ * ```
+ */
+export const MosaicChartContainer = ({ spec, params, editable = true, onSpecChange, children, className, }) => {
+    const { state, actions, canApply, hasChanges } = useMosaicChartEditor({
+        initialSpec: spec,
+        onSpecChange,
+    });
+    const contextValue = useMemo(() => ({
+        state,
+        actions,
+        editable,
+        params,
+        canApply,
+        hasChanges,
+    }), [state, actions, editable, params, canApply, hasChanges]);
+    return (_jsx(MosaicEditorContext.Provider, { value: contextValue, children: _jsx("div", { className: cn('flex flex-col gap-2', className), children: children }) }));
+};
+//# sourceMappingURL=MosaicChartContainer.js.map

package/dist/editor/MosaicChartContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartContainer.js","sourceRoot":"","sources":["../../src/editor/MosaicChartContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AA8B5D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAC,GAAG,oBAAoB,CAAC;QAClE,WAAW,EAAE,IAAI;QACjB,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,YAAY,GAA6B,OAAO,CACpD,GAAG,EAAE,CAAC,CAAC;QACL,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,UAAU;KACX,CAAC,EACF,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,CACzD,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC/C,cAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GACzC,CAChC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport {Param} from '@uwdata/mosaic-core';\nimport {Spec} from '@uwdata/mosaic-spec';\nimport React, {useMemo} from 'react';\nimport {MosaicEditorContext} from './MosaicEditorContext';\nimport {MosaicEditorContextValue, OnMosaicSpecChange} from './types';\nimport {useMosaicChartEditor} from './useMosaicChartEditor';\n\nexport interface MosaicChartContainerProps {\n  /**\n   * Initial Mosaic specification\n   */\n  spec: Spec | string;\n  /**\n   * Pre-defined params/selections for shared cross-filtering\n   */\n  params?: Map<string, Param<any>>;\n  /**\n   * Whether editing is enabled\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * Callback when spec changes are applied\n   */\n  onSpecChange?: OnMosaicSpecChange;\n  /**\n   * Child components (Chart, SpecEditor, Actions)\n   */\n  children: React.ReactNode;\n  /**\n   * Custom class name for the container\n   */\n  className?: string;\n}\n\n/**\n * Container component for composable Mosaic chart editing.\n * Provides context for child subcomponents.\n *\n * @example\n * ```tsx\n * <MosaicChart.Container\n *   spec={mySpec}\n *   params={paramsMap}\n *   editable={true}\n *   onSpecChange={(spec) => saveSpec(spec)}\n * >\n *   <MosaicChart.Chart />\n *   <MosaicChart.SpecEditor />\n *   <MosaicChart.Actions />\n * </MosaicChart.Container>\n * ```\n */\nexport const MosaicChartContainer: React.FC<MosaicChartContainerProps> = ({\n  spec,\n  params,\n  editable = true,\n  onSpecChange,\n  children,\n  className,\n}) => {\n  const {state, actions, canApply, hasChanges} = useMosaicChartEditor({\n    initialSpec: spec,\n    onSpecChange,\n  });\n\n  const contextValue: MosaicEditorContextValue = useMemo(\n    () => ({\n      state,\n      actions,\n      editable,\n      params,\n      canApply,\n      hasChanges,\n    }),\n    [state, actions, editable, params, canApply, hasChanges],\n  );\n\n  return (\n    <MosaicEditorContext.Provider value={contextValue}>\n      <div className={cn('flex flex-col gap-2', className)}>{children}</div>\n    </MosaicEditorContext.Provider>\n  );\n};\n"]}

package/dist/editor/MosaicChartDisplay.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface MosaicChartDisplayProps {
+    /**
+     * Custom class name for the chart container
+     */
+    className?: string;
+}
+/**
+ * Chart display subcomponent for MosaicChart.Container.
+ * Renders the VgPlotChart with the current spec from editor context.
+ *
+ * Uses the last valid spec for rendering, so the chart keeps
+ * displaying even during typing with invalid JSON.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export declare const MosaicChartDisplay: React.FC<MosaicChartDisplayProps>;
+//# sourceMappingURL=MosaicChartDisplay.d.ts.map

package/dist/editor/MosaicChartDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicChartDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAehE,CAAC"}

package/dist/editor/MosaicChartDisplay.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import React, { useMemo } from 'react';
+import { VgPlotChart } from '../VgPlotChart';
+import { useMosaicEditorContext } from './MosaicEditorContext';
+/**
+ * Chart display subcomponent for MosaicChart.Container.
+ * Renders the VgPlotChart with the current spec from editor context.
+ *
+ * Uses the last valid spec for rendering, so the chart keeps
+ * displaying even during typing with invalid JSON.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export const MosaicChartDisplay = React.memo(({ className }) => {
+    const { state, params } = useMosaicEditorContext();
+    const spec = useMemo(() => state.parsedSpec ?? state.lastValidSpec, [state.parsedSpec, state.lastValidSpec]);
+    return (_jsx("div", { className: cn('relative', className), children: _jsx(VgPlotChart, { spec: spec, params: params }) }));
+});
+MosaicChartDisplay.displayName = 'MosaicChartDisplay';
+//# sourceMappingURL=MosaicChartDisplay.js.map

package/dist/editor/MosaicChartDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartDisplay.js","sourceRoot":"","sources":["../../src/editor/MosaicChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAS7D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,KAAK,CAAC,IAAI,CAC7E,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE;IACd,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,sBAAsB,EAAE,CAAC;IAEjD,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,EAC7C,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CACxC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YACvC,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GACvC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React, {useMemo} from 'react';\nimport {VgPlotChart} from '../VgPlotChart';\nimport {useMosaicEditorContext} from './MosaicEditorContext';\n\nexport interface MosaicChartDisplayProps {\n  /**\n   * Custom class name for the chart container\n   */\n  className?: string;\n}\n\n/**\n * Chart display subcomponent for MosaicChart.Container.\n * Renders the VgPlotChart with the current spec from editor context.\n *\n * Uses the last valid spec for rendering, so the chart keeps\n * displaying even during typing with invalid JSON.\n *\n * Must be used within a MosaicChart.Container component.\n */\nexport const MosaicChartDisplay: React.FC<MosaicChartDisplayProps> = React.memo(\n  ({className}) => {\n    const {state, params} = useMosaicEditorContext();\n\n    const spec = useMemo(\n      () => state.parsedSpec ?? state.lastValidSpec,\n      [state.parsedSpec, state.lastValidSpec],\n    );\n\n    return (\n      <div className={cn('relative', className)}>\n        <VgPlotChart spec={spec} params={params} />\n      </div>\n    );\n  },\n);\n\nMosaicChartDisplay.displayName = 'MosaicChartDisplay';\n"]}

package/dist/editor/MosaicChartEditorActions.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface MosaicChartEditorActionsProps {
+    /**
+     * Custom class name for the actions container
+     */
+    className?: string;
+    /**
+     * Whether to show the Reset button
+     * @default true
+     */
+    showReset?: boolean;
+}
+/**
+ * Actions subcomponent for MosaicChart.Container.
+ * Renders Apply, Cancel, and Reset buttons.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export declare const MosaicChartEditorActions: React.FC<MosaicChartEditorActionsProps>;
+//# sourceMappingURL=MosaicChartEditorActions.d.ts.map

package/dist/editor/MosaicChartEditorActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartEditorActions.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicChartEditorActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAC7C,6BAA6B,CA8C9B,CAAC"}

package/dist/editor/MosaicChartEditorActions.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from '@sqlrooms/ui';
+import { Check, RotateCcw, X } from 'lucide-react';
+import { useMosaicEditorContext } from './MosaicEditorContext';
+/**
+ * Actions subcomponent for MosaicChart.Container.
+ * Renders Apply, Cancel, and Reset buttons.
+ *
+ * Must be used within a MosaicChart.Container component.
+ */
+export const MosaicChartEditorActions = ({ className, showReset = true }) => {
+    const { actions, canApply, hasChanges, editable } = useMosaicEditorContext();
+    if (!editable) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('flex items-center justify-end gap-2 border-t px-3 py-2', className), children: [showReset && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: actions.resetToOriginal, title: "Reset to original", children: [_jsx(RotateCcw, { className: "mr-1 h-4 w-4" }), "Reset"] })), _jsxs(Button, { variant: "outline", size: "sm", onClick: actions.cancelChanges, disabled: !hasChanges, children: [_jsx(X, { className: "mr-1 h-4 w-4" }), "Cancel"] }), _jsxs(Button, { variant: "default", size: "sm", onClick: actions.applyChanges, disabled: !canApply, children: [_jsx(Check, { className: "mr-1 h-4 w-4" }), "Apply"] })] }));
+};
+//# sourceMappingURL=MosaicChartEditorActions.js.map

package/dist/editor/MosaicChartEditorActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicChartEditorActions.js","sourceRoot":"","sources":["../../src/editor/MosaicChartEditorActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,KAAK,EAAE,SAAS,EAAE,CAAC,EAAC,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAc7D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC,CAAC,EAAC,SAAS,EAAE,SAAS,GAAG,IAAI,EAAC,EAAE,EAAE;IACpC,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAC,GAAG,sBAAsB,EAAE,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,aAEA,SAAS,IAAI,CACZ,MAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,CAAC,eAAe,EAChC,KAAK,EAAC,mBAAmB,aAEzB,KAAC,SAAS,IAAC,SAAS,EAAC,cAAc,GAAG,aAE/B,CACV,EACD,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,CAAC,aAAa,EAC9B,QAAQ,EAAE,CAAC,UAAU,aAErB,KAAC,CAAC,IAAC,SAAS,EAAC,cAAc,GAAG,cAEvB,EACT,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,CAAC,YAAY,EAC7B,QAAQ,EAAE,CAAC,QAAQ,aAEnB,KAAC,KAAK,IAAC,SAAS,EAAC,cAAc,GAAG,aAE3B,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {Check, RotateCcw, X} from 'lucide-react';\nimport React from 'react';\nimport {useMosaicEditorContext} from './MosaicEditorContext';\n\nexport interface MosaicChartEditorActionsProps {\n  /**\n   * Custom class name for the actions container\n   */\n  className?: string;\n  /**\n   * Whether to show the Reset button\n   * @default true\n   */\n  showReset?: boolean;\n}\n\n/**\n * Actions subcomponent for MosaicChart.Container.\n * Renders Apply, Cancel, and Reset buttons.\n *\n * Must be used within a MosaicChart.Container component.\n */\nexport const MosaicChartEditorActions: React.FC<\n  MosaicChartEditorActionsProps\n> = ({className, showReset = true}) => {\n  const {actions, canApply, hasChanges, editable} = useMosaicEditorContext();\n\n  if (!editable) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-end gap-2 border-t px-3 py-2',\n        className,\n      )}\n    >\n      {showReset && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={actions.resetToOriginal}\n          title=\"Reset to original\"\n        >\n          <RotateCcw className=\"mr-1 h-4 w-4\" />\n          Reset\n        </Button>\n      )}\n      <Button\n        variant=\"outline\"\n        size=\"sm\"\n        onClick={actions.cancelChanges}\n        disabled={!hasChanges}\n      >\n        <X className=\"mr-1 h-4 w-4\" />\n        Cancel\n      </Button>\n      <Button\n        variant=\"default\"\n        size=\"sm\"\n        onClick={actions.applyChanges}\n        disabled={!canApply}\n      >\n        <Check className=\"mr-1 h-4 w-4\" />\n        Apply\n      </Button>\n    </div>\n  );\n};\n"]}

package/dist/editor/MosaicCodeMirrorEditor.d.ts

@@ -0,0 +1,15 @@
+import { JsonCodeMirrorEditorProps } from '@sqlrooms/codemirror';
+import React from 'react';
+export interface MosaicCodeMirrorEditorProps extends Omit<JsonCodeMirrorEditorProps, 'schema'> {
+    /**
+     * Whether to enable Mosaic JSON schema validation
+     * @default false
+     */
+    enableSchemaValidation?: boolean;
+}
+/**
+ * A CodeMirror editor specialized for editing Mosaic vgplot specifications.
+ * Automatically loads and configures the Mosaic JSON schema for validation.
+ */
+export declare const MosaicCodeMirrorEditor: React.FC<MosaicCodeMirrorEditorProps>;
+//# sourceMappingURL=MosaicCodeMirrorEditor.d.ts.map

package/dist/editor/MosaicCodeMirrorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MosaicCodeMirrorEditor.d.ts","sourceRoot":"","sources":["../../src/editor/MosaicCodeMirrorEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,yBAAyB,EACzB,QAAQ,CACT;IACC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkCxE,CAAC"}