@sqlrooms/canvas 0.28.1-rc.0 → 0.29.0-rc.0

package/README.md

@@ -2,101 +2,11 @@ React Flow-based canvas for building SQL + Vega node DAGs in SQLRooms apps.
 
 This package includes:
 
-- `createCanvasSlice()` for canvas state/actions
-- `Canvas` component for graph editing/execution
-- `CanvasSliceConfig` Zod schema for persistence
+Refer to the [Canvas example](https://github.com/sqlrooms/examples/tree/main/canvas).
 
-The slice stores nodes/edges in `canvas.config` and supports topological downstream execution for SQL nodes.
+## Stable vs internal imports
 
-## Installation
+Use root imports from `@sqlrooms/canvas` as the stable API surface.
 
-```bash
-npm install @sqlrooms/canvas @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
-```
-
-## Quick start
-
-```tsx
-import {Canvas, CanvasSliceState, createCanvasSlice} from '@sqlrooms/canvas';
-import {
-  createRoomShellSlice,
-  createRoomStore,
-  LayoutTypes,
-  RoomShellSliceState,
-} from '@sqlrooms/room-shell';
-
-type RoomState = RoomShellSliceState & CanvasSliceState;
-
-export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
-  (set, get, store) => ({
-    ...createRoomShellSlice({
-      config: {
-        dataSources: [
-          {
-            type: 'url',
-            tableName: 'earthquakes',
-            url: 'https://huggingface.co/datasets/sqlrooms/earthquakes/resolve/main/earthquakes.parquet',
-          },
-        ],
-      },
-      layout: {
-        config: {
-          type: LayoutTypes.enum.mosaic,
-          nodes: 'main',
-        },
-        panels: {
-          main: {
-            title: 'Canvas',
-            icon: () => null,
-            component: Canvas,
-            placement: 'main',
-          },
-        },
-      },
-    })(set, get, store),
-    ...createCanvasSlice({
-      ai: {
-        getApiKey: () => '',
-        // Keep this aligned with your app's recommended low-latency model.
-        defaultModel: 'gpt-5.2-mini',
-      },
-    })(set, get, store),
-  }),
-);
-```
-
-## Programmatic canvas actions
-
-```tsx
-import {Button} from '@sqlrooms/ui';
-
-function CanvasActions() {
-  const addNode = useRoomStore((state) => state.canvas.addNode);
-  const executeSqlNodeQuery = useRoomStore(
-    (state) => state.canvas.executeSqlNodeQuery,
-  );
-
-  const addAndRun = async () => {
-    const nodeId = addNode({nodeType: 'sql'});
-    await executeSqlNodeQuery(nodeId);
-  };
-
-  return <Button onClick={() => void addAndRun()}>Add SQL node</Button>;
-}
-```
-
-## Persistence
-
-Use `CanvasSliceConfig` with `persistSliceConfigs`:
-
-```ts
-import {CanvasSliceConfig} from '@sqlrooms/canvas';
-
-sliceConfigSchemas: {
-  canvas: CanvasSliceConfig,
-}
-```
-
-## Example
-
-- Canvas example app: https://github.com/sqlrooms/examples/tree/main/canvas
+- stable: `createCanvasSlice`, `createDefaultCanvasConfig`, `Canvas`, `CanvasSliceConfig`, `CanvasNodeMeta`, `CanvasSheetMeta`
+- internal: direct imports from implementation files under `src/` are not semver-stable and may change without notice

package/dist/Canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"AAUA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAiD1B,CAAC"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"AAWA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiCpE,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAuH1B,CAAC"}

package/dist/Canvas.js

@@ -1,28 +1,86 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Button, useTheme } from '@sqlrooms/ui';
 import { Background, BackgroundVariant, Controls, MiniMap, ReactFlow, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { PlusIcon } from 'lucide-react';
-import { CanvasAssistantDrawer } from './CanvasAssistantDrawer';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useStoreWithCanvas } from './CanvasSlice';
+import { getRenderableEdges } from './edgeUtils';
 import { AddNodePopover } from './nodes/AddNodePopover';
-import { SqlNode } from './nodes/SqlNode';
-import { VegaNode } from './nodes/VegaNode';
-const nodeTypes = {
-    sql: SqlNode,
-    vega: VegaNode,
+import { CanvasNodeContainer } from './nodes/CanvasNodeContainer';
+const RegistryNodeRenderer = ({ id, renderCell }) => {
+    const cell = useStoreWithCanvas((s) => s.cells.config.data[id]);
+    if (!cell)
+        return null;
+    return renderCell({
+        id,
+        cell,
+        renderContainer: ({ header, content, footer }) => (_jsxs(CanvasNodeContainer, { id: id, headerRight: header, children: [content, footer] })),
+    });
 };
 export const Canvas = () => {
-    const nodes = useStoreWithCanvas((s) => s.canvas.config.nodes);
-    const edges = useStoreWithCanvas((s) => s.canvas.config.edges);
-    const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);
+    const registry = useStoreWithCanvas((s) => s.cells.cellRegistry);
+    const nodeTypes = useMemo(() => {
+        return Object.fromEntries(Object.entries(registry).map(([type, reg]) => [
+            type,
+            ({ id }) => (_jsx(RegistryNodeRenderer, { id: id, renderCell: reg.renderCell })),
+        ]));
+    }, [registry]);
+    const currentSheetId = useStoreWithCanvas((s) => s.cells.config.currentSheetId);
+    const addSheet = useStoreWithCanvas((s) => s.cells.addSheet);
+    const canvasSheet = useStoreWithCanvas((s) => {
+        const sheetId = currentSheetId ?? s.cells.config.sheetOrder[0];
+        return sheetId ? s.canvas.config.sheets[sheetId] : undefined;
+    });
+    const cellsSheet = useStoreWithCanvas((s) => {
+        const sheetId = currentSheetId ?? s.cells.config.sheetOrder[0];
+        return sheetId ? s.cells.config.sheets[sheetId] : undefined;
+    });
+    const cellsData = useStoreWithCanvas((s) => s.cells.config.data);
+    const nodes = useMemo(() => {
+        if (!cellsSheet)
+            return [];
+        // Use all cells from the canonical sheet
+        const list = cellsSheet.cellIds
+            .map((id) => {
+            // Get view-specific metadata if it exists
+            const canvasNode = canvasSheet?.nodes[id];
+            const cell = cellsData[id];
+            if (!cell)
+                return null;
+            return {
+                id,
+                position: canvasNode?.position ?? { x: 100, y: 100 },
+                width: canvasNode?.width ?? 800,
+                height: canvasNode?.height ?? 600,
+                type: cell.type,
+                data: cell.data,
+            };
+        })
+            .filter(Boolean);
+        return list;
+    }, [canvasSheet, cellsSheet, cellsData]);
+    const edges = useMemo(() => getRenderableEdges(cellsSheet), [cellsSheet]);
+    const viewport = canvasSheet?.meta.viewport ?? { x: 0, y: 0, zoom: 1 };
     const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);
-    const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);
-    const viewport = useStoreWithCanvas((s) => s.canvas.config.viewport);
     const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);
-    const addNode = useStoreWithCanvas((s) => s.canvas.addNode);
+    const [internalViewport, setInternalViewport] = useState(viewport);
+    // Debounce viewport updates to prevent rapid state saves from React Flow
+    const viewportTimeoutRef = useRef(null);
+    const debouncedSetViewport = useCallback((viewport) => {
+        setInternalViewport(viewport);
+        if (viewportTimeoutRef.current) {
+            clearTimeout(viewportTimeoutRef.current);
+        }
+        viewportTimeoutRef.current = setTimeout(() => {
+            setViewport(viewport);
+        }, 150);
+    }, [setViewport]);
     const empty = nodes.length === 0;
     const { theme: colorMode } = useTheme();
-    return (_jsxs("div", { className: "h-full w-full", children: [_jsxs("div", { className: "relative h-full w-full", children: [empty && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: _jsx(AddNodePopover, { children: _jsxs(Button, { size: "xs", children: [_jsx(PlusIcon, { className: "h-4 w-4" }), "Add node"] }) }) })), _jsxs(ReactFlow, { minZoom: 0.1, colorMode: colorMode, nodes: nodes, edges: edges, nodeTypes: nodeTypes, onNodesChange: applyNodeChanges, onEdgesChange: applyEdgeChanges, onViewportChange: setViewport, onConnect: addEdge, viewport: viewport, children: [_jsx(MiniMap, {}), _jsx(Controls, { position: "top-left" }), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })] })] }), _jsx(CanvasAssistantDrawer, {})] }));
+    // if (!cellsSheet || cellsSheet.type !== 'canvas') {
+    //   return null;
+    // }
+    return (_jsx("div", { className: "flex h-full w-full flex-col", children: _jsxs("div", { className: "relative flex-1 overflow-hidden", children: [empty && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: _jsx(AddNodePopover, { children: _jsxs(Button, { size: "xs", children: [_jsx(PlusIcon, { className: "h-4 w-4" }), "Add node"] }) }) })), _jsxs(ReactFlow, { minZoom: 0.1, colorMode: colorMode, nodes: nodes, edges: edges, nodeTypes: nodeTypes, onNodesChange: applyNodeChanges, viewport: internalViewport, onViewportChange: debouncedSetViewport, nodesConnectable: false, edgesReconnectable: false, connectOnClick: false, children: [_jsx(MiniMap, {}), _jsx(Controls, { position: "top-left" }), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })] })] }) }));
 };
 //# sourceMappingURL=Canvas.js.map

package/dist/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.js","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, useTheme} from '@sqlrooms/ui';\nimport {\n  Background,\n  BackgroundVariant,\n  Controls,\n  Edge,\n  MiniMap,\n  Node,\n  ReactFlow,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport {PlusIcon} from 'lucide-react';\nimport React from 'react';\nimport {CanvasAssistantDrawer} from './CanvasAssistantDrawer';\nimport type {CanvasNodeData} from './CanvasSlice';\nimport {useStoreWithCanvas} from './CanvasSlice';\nimport {AddNodePopover} from './nodes/AddNodePopover';\nimport {SqlNode} from './nodes/SqlNode';\nimport {VegaNode} from './nodes/VegaNode';\n\nconst nodeTypes = {\n  sql: SqlNode,\n  vega: VegaNode,\n};\n\nexport const Canvas: React.FC = () => {\n  const nodes = useStoreWithCanvas(\n    (s) => s.canvas.config.nodes,\n  ) as unknown as Node<CanvasNodeData>[];\n  const edges = useStoreWithCanvas((s) => s.canvas.config.edges) as Edge[];\n  const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);\n  const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);\n  const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);\n  const viewport = useStoreWithCanvas((s) => s.canvas.config.viewport);\n  const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);\n  const addNode = useStoreWithCanvas((s) => s.canvas.addNode);\n\n  const empty = nodes.length === 0;\n  const {theme: colorMode} = useTheme();\n\n  return (\n    <div className=\"h-full w-full\">\n      <div className=\"relative h-full w-full\">\n        {empty && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n            <AddNodePopover>\n              <Button size=\"xs\">\n                <PlusIcon className=\"h-4 w-4\" />\n                Add node\n              </Button>\n            </AddNodePopover>\n          </div>\n        )}\n        <ReactFlow\n          minZoom={0.1}\n          colorMode={colorMode}\n          nodes={nodes as any}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={applyNodeChanges}\n          onEdgesChange={applyEdgeChanges}\n          onViewportChange={setViewport}\n          onConnect={addEdge}\n          viewport={viewport}\n          // fitView\n        >\n          <MiniMap />\n          <Controls position=\"top-left\" />\n          <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n        </ReactFlow>\n      </div>\n      <CanvasAssistantDrawer />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Canvas.js","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, useTheme} from '@sqlrooms/ui';\nimport {\n  Background,\n  BackgroundVariant,\n  Controls,\n  Edge,\n  MiniMap,\n  Node,\n  ReactFlow,\n  Viewport,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport {PlusIcon} from 'lucide-react';\nimport React, {useCallback, useMemo, useRef, useState} from 'react';\nimport {useStoreWithCanvas} from './CanvasSlice';\nimport {getRenderableEdges} from './edgeUtils';\nimport {AddNodePopover} from './nodes/AddNodePopover';\nimport {CanvasNodeContainer} from './nodes/CanvasNodeContainer';\n\nconst RegistryNodeRenderer: React.FC<{\n  id: string;\n  renderCell: (args: {\n    id: string;\n    cell: import('@sqlrooms/cells').Cell;\n    renderContainer: (props: {\n      header?: React.ReactNode;\n      content: React.ReactNode;\n      footer?: React.ReactNode;\n    }) => React.ReactElement;\n  }) => React.ReactElement;\n}> = ({id, renderCell}) => {\n  const cell = useStoreWithCanvas((s) => s.cells.config.data[id]);\n  if (!cell) return null;\n\n  return renderCell({\n    id,\n    cell,\n    renderContainer: ({header, content, footer}) => (\n      <CanvasNodeContainer id={id} headerRight={header}>\n        {content}\n        {footer}\n      </CanvasNodeContainer>\n    ),\n  });\n};\n\nexport const Canvas: React.FC = () => {\n  const registry = useStoreWithCanvas((s) => s.cells.cellRegistry);\n  const nodeTypes = useMemo(() => {\n    return Object.fromEntries(\n      Object.entries(registry).map(([type, reg]) => [\n        type,\n        ({id}: {id: string}) => (\n          <RegistryNodeRenderer id={id} renderCell={reg.renderCell} />\n        ),\n      ]),\n    );\n  }, [registry]);\n\n  const currentSheetId = useStoreWithCanvas(\n    (s) => s.cells.config.currentSheetId,\n  );\n  const addSheet = useStoreWithCanvas((s) => s.cells.addSheet);\n\n  const canvasSheet = useStoreWithCanvas((s) => {\n    const sheetId = currentSheetId ?? s.cells.config.sheetOrder[0];\n    return sheetId ? s.canvas.config.sheets[sheetId] : undefined;\n  });\n\n  const cellsSheet = useStoreWithCanvas((s) => {\n    const sheetId = currentSheetId ?? s.cells.config.sheetOrder[0];\n    return sheetId ? s.cells.config.sheets[sheetId] : undefined;\n  });\n\n  const cellsData = useStoreWithCanvas((s) => s.cells.config.data);\n\n  const nodes = useMemo(() => {\n    if (!cellsSheet) return [] as Node[];\n\n    // Use all cells from the canonical sheet\n    const list = cellsSheet.cellIds\n      .map((id: string) => {\n        // Get view-specific metadata if it exists\n        const canvasNode = canvasSheet?.nodes[id];\n        const cell = cellsData[id];\n        if (!cell) return null;\n\n        return {\n          id,\n          position: canvasNode?.position ?? {x: 100, y: 100},\n          width: canvasNode?.width ?? 800,\n          height: canvasNode?.height ?? 600,\n          type: cell.type,\n          data: cell.data,\n        };\n      })\n      .filter(Boolean);\n    return list as unknown as Node[];\n  }, [canvasSheet, cellsSheet, cellsData]);\n\n  const edges = useMemo(\n    () => getRenderableEdges(cellsSheet) as Edge[],\n    [cellsSheet],\n  );\n  const viewport = canvasSheet?.meta.viewport ?? {x: 0, y: 0, zoom: 1};\n  const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);\n  const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);\n  const [internalViewport, setInternalViewport] = useState<Viewport>(viewport);\n\n  // Debounce viewport updates to prevent rapid state saves from React Flow\n  const viewportTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const debouncedSetViewport = useCallback(\n    (viewport: Viewport) => {\n      setInternalViewport(viewport);\n      if (viewportTimeoutRef.current) {\n        clearTimeout(viewportTimeoutRef.current);\n      }\n      viewportTimeoutRef.current = setTimeout(() => {\n        setViewport(viewport);\n      }, 150);\n    },\n    [setViewport],\n  );\n\n  const empty = nodes.length === 0;\n  const {theme: colorMode} = useTheme();\n\n  // if (!cellsSheet || cellsSheet.type !== 'canvas') {\n  //   return null;\n  // }\n\n  return (\n    <div className=\"flex h-full w-full flex-col\">\n      <div className=\"relative flex-1 overflow-hidden\">\n        {empty && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n            <AddNodePopover>\n              <Button size=\"xs\">\n                <PlusIcon className=\"h-4 w-4\" />\n                Add node\n              </Button>\n            </AddNodePopover>\n          </div>\n        )}\n        <ReactFlow\n          minZoom={0.1}\n          colorMode={colorMode}\n          nodes={nodes as any}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={applyNodeChanges}\n          viewport={internalViewport}\n          onViewportChange={debouncedSetViewport}\n          nodesConnectable={false}\n          edgesReconnectable={false}\n          connectOnClick={false}\n          // fitView\n        >\n          <MiniMap />\n          <Controls position=\"top-left\" />\n          <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n        </ReactFlow>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/CanvasSlice.d.ts

@@ -1,122 +1,72 @@
-import { AiSliceState, createAiSlice } from '@sqlrooms/ai';
+import { type Cell, type CellsRootState } from '@sqlrooms/cells';
 import { DuckDbSliceState } from '@sqlrooms/duckdb';
 import type { Viewport, XYPosition } from '@xyflow/react';
 import { Connection, type EdgeChange, type NodeChange } from '@xyflow/react';
 import { z } from 'zod';
-export declare const CanvasNodeTypes: z.ZodEnum<{
-    sql: "sql";
-    vega: "vega";
-}>;
-export type CanvasNodeTypes = z.infer<typeof CanvasNodeTypes>;
-export declare const CanvasNodeData: z.ZodDiscriminatedUnion<[z.ZodObject<{
-    title: z.ZodDefault<z.ZodString>;
-    type: z.ZodLiteral<"sql">;
-    sql: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>, z.ZodObject<{
-    title: z.ZodDefault<z.ZodString>;
-    type: z.ZodLiteral<"vega">;
-    sql: z.ZodOptional<z.ZodString>;
-    vegaSpec: z.ZodOptional<z.ZodAny>;
-}, z.core.$strip>], "type">;
-export type CanvasNodeData = z.infer<typeof CanvasNodeData>;
-export declare const CanvasNodeSchema: z.ZodObject<{
+/** View metadata for a single node on the canvas */
+export declare const CanvasNodeMeta: z.ZodObject<{
     id: z.ZodString;
     position: z.ZodObject<{
         x: z.ZodNumber;
         y: z.ZodNumber;
     }, z.core.$strip>;
-    type: z.ZodEnum<{
-        sql: "sql";
-        vega: "vega";
-    }>;
-    data: z.ZodDiscriminatedUnion<[z.ZodObject<{
-        title: z.ZodDefault<z.ZodString>;
-        type: z.ZodLiteral<"sql">;
-        sql: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>, z.ZodObject<{
-        title: z.ZodDefault<z.ZodString>;
-        type: z.ZodLiteral<"vega">;
-        sql: z.ZodOptional<z.ZodString>;
-        vegaSpec: z.ZodOptional<z.ZodAny>;
-    }, z.core.$strip>], "type">;
-    width: z.ZodNumber;
-    height: z.ZodNumber;
+    width: z.ZodDefault<z.ZodNumber>;
+    height: z.ZodDefault<z.ZodNumber>;
+    data: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodAny>>;
 }, z.core.$strip>;
-export type CanvasNodeSchema = z.infer<typeof CanvasNodeSchema>;
-export declare const CanvasEdgeSchema: z.ZodObject<{
-    id: z.ZodString;
-    source: z.ZodString;
-    target: z.ZodString;
-}, z.core.$strip>;
-export type CanvasEdgeSchema = z.infer<typeof CanvasEdgeSchema>;
-export type SqlNodeQueryResult = {
-    status: 'idle';
-} | {
-    status: 'loading';
-} | {
-    status: 'error';
-    error: string;
-} | {
-    status: 'success';
-    tableName: string;
-    lastQueryStatement: string;
-};
-export declare const CanvasSliceConfig: z.ZodObject<{
+export type CanvasNodeMeta = z.infer<typeof CanvasNodeMeta>;
+/** View metadata for a sheet (canvas view) */
+export declare const CanvasSheetMeta: z.ZodObject<{
     viewport: z.ZodObject<{
         x: z.ZodNumber;
         y: z.ZodNumber;
         zoom: z.ZodNumber;
     }, z.core.$strip>;
-    nodes: z.ZodDefault<z.ZodArray<z.ZodObject<{
+    nodeOrder: z.ZodDefault<z.ZodArray<z.ZodString>>;
+}, z.core.$strip>;
+export type CanvasSheetMeta = z.infer<typeof CanvasSheetMeta>;
+export declare const CanvasSliceConfig: z.ZodObject<{
+    sheets: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
         id: z.ZodString;
-        position: z.ZodObject<{
-            x: z.ZodNumber;
-            y: z.ZodNumber;
+        nodes: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+            id: z.ZodString;
+            position: z.ZodObject<{
+                x: z.ZodNumber;
+                y: z.ZodNumber;
+            }, z.core.$strip>;
+            width: z.ZodDefault<z.ZodNumber>;
+            height: z.ZodDefault<z.ZodNumber>;
+            data: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        }, z.core.$strip>>>;
+        meta: z.ZodObject<{
+            viewport: z.ZodObject<{
+                x: z.ZodNumber;
+                y: z.ZodNumber;
+                zoom: z.ZodNumber;
+            }, z.core.$strip>;
+            nodeOrder: z.ZodDefault<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>;
-        type: z.ZodEnum<{
-            sql: "sql";
-            vega: "vega";
-        }>;
-        data: z.ZodDiscriminatedUnion<[z.ZodObject<{
-            title: z.ZodDefault<z.ZodString>;
-            type: z.ZodLiteral<"sql">;
-            sql: z.ZodOptional<z.ZodString>;
-        }, z.core.$strip>, z.ZodObject<{
-            title: z.ZodDefault<z.ZodString>;
-            type: z.ZodLiteral<"vega">;
-            sql: z.ZodOptional<z.ZodString>;
-            vegaSpec: z.ZodOptional<z.ZodAny>;
-        }, z.core.$strip>], "type">;
-        width: z.ZodNumber;
-        height: z.ZodNumber;
-    }, z.core.$strip>>>;
-    edges: z.ZodDefault<z.ZodArray<z.ZodObject<{
-        id: z.ZodString;
-        source: z.ZodString;
-        target: z.ZodString;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 export type CanvasSliceConfig = z.infer<typeof CanvasSliceConfig>;
-export type CanvasSliceState = AiSliceState & {
+export type CanvasSliceState = {
     canvas: {
         config: CanvasSliceConfig;
-        isAssistantOpen: boolean;
-        sqlResults: Record<string, SqlNodeQueryResult>;
         initialize: () => Promise<void>;
         setConfig: (config: CanvasSliceConfig) => void;
         setViewport: (viewport: Viewport) => void;
-        setAssistantOpen: (isAssistantOpen: boolean) => void;
+        getCanvasSheets: () => Record<string, import('@sqlrooms/cells').Sheet>;
         addNode: (params: {
-            parentId?: string;
-            nodeType?: CanvasNodeTypes;
+            sheetId: string;
+            nodeType?: string;
             initialPosition?: XYPosition;
-        }) => string;
-        executeDownstreamFrom: (nodeId: string) => Promise<void>;
+            parentId?: string;
+        }) => Promise<string>;
         renameNode: (nodeId: string, newTitle: string) => Promise<void>;
-        updateNode: (nodeId: string, updater: (data: CanvasNodeData) => CanvasNodeData) => void;
+        updateNode: (nodeId: string, updater: (cell: Cell) => Cell) => Promise<void>;
         deleteNode: (nodeId: string) => void;
-        applyNodeChanges: (changes: NodeChange<CanvasNodeSchema>[]) => void;
-        applyEdgeChanges: (changes: EdgeChange<CanvasEdgeSchema>[]) => void;
+        applyNodeChanges: (changes: NodeChange<CanvasNodeMeta>[]) => void;
+        applyEdgeChanges: (changes: EdgeChange<any>[]) => void;
         addEdge: (edge: Connection) => void;
         executeSqlNodeQuery: (nodeId: string, opts?: {
             cascade?: boolean;
@@ -124,10 +74,9 @@ export type CanvasSliceState = AiSliceState & {
     };
 };
 export declare function createDefaultCanvasConfig(props?: Partial<CanvasSliceConfig>): CanvasSliceConfig;
-export declare function createCanvasSlice(props: {
+export declare function createCanvasSlice(props?: {
     config?: Partial<CanvasSliceConfig>;
-    ai?: Partial<Parameters<typeof createAiSlice>[0]>;
 }): import("zustand").StateCreator<CanvasSliceState>;
-export type DuckDbSliceStateWithCanvas = DuckDbSliceState & CanvasSliceState;
+export type DuckDbSliceStateWithCanvas = DuckDbSliceState & CanvasSliceState & CellsRootState;
 export declare function useStoreWithCanvas<T>(selector: (state: DuckDbSliceStateWithCanvas) => T): T;
 //# sourceMappingURL=CanvasSlice.d.ts.map

package/dist/CanvasSlice.d.ts.map

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