@sqlrooms/canvas 0.24.17

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,6 @@
+# @sqlrooms/canvas
+
+ReactFlow-based canvas for building and editing DAGs of SQL and Vega nodes, with a Zustand slice for persistence in SQLRooms apps.
+
+- CanvasSlice stores nodes and edges under `config.canvas`
+- Canvas component renders and edits the graph

package/dist/Canvas.d.ts

@@ -0,0 +1,4 @@
+import '@xyflow/react/dist/style.css';
+import React from 'react';
+export declare const Canvas: React.FC;
+//# sourceMappingURL=Canvas.d.ts.map

package/dist/Canvas.d.ts.map

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

package/dist/Canvas.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { useStoreWithCanvas } from './CanvasSlice';
+import { AddNodePopover } from './nodes/AddNodePopover';
+import { SqlNode } from './nodes/SqlNode';
+import { VegaNode } from './nodes/VegaNode';
+const nodeTypes = {
+    sql: SqlNode,
+    vega: VegaNode,
+};
+export const Canvas = () => {
+    const nodes = useStoreWithCanvas((s) => s.config.canvas.nodes);
+    const edges = useStoreWithCanvas((s) => s.config.canvas.edges);
+    const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);
+    const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);
+    const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);
+    const viewport = useStoreWithCanvas((s) => s.config.canvas.viewport);
+    const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);
+    const addNode = useStoreWithCanvas((s) => s.canvas.addNode);
+    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, {})] }));
+};
+//# sourceMappingURL=Canvas.js.map

package/dist/Canvas.js.map

@@ -0,0 +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.config.canvas.nodes,\n  ) as unknown as Node<CanvasNodeData>[];\n  const edges = useStoreWithCanvas((s) => s.config.canvas.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.config.canvas.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"]}

package/dist/CanvasAssistantDrawer.d.ts

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

package/dist/CanvasAssistantDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasAssistantDrawer.d.ts","sourceRoot":"","sources":["../src/CanvasAssistantDrawer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,eAAO,MAAM,qBAAqB,EAAE,EA+CnC,CAAC"}

package/dist/CanvasAssistantDrawer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnalysisResultsContainer, QueryControls } from '@sqlrooms/ai';
+import { Button, Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from '@sqlrooms/ui';
+import { SparklesIcon, XIcon } from 'lucide-react';
+import { useStoreWithCanvas } from './CanvasSlice';
+export const CanvasAssistantDrawer = () => {
+    const isAssistantOpen = useStoreWithCanvas((state) => state.canvas.isAssistantOpen);
+    const setAssistantOpen = useStoreWithCanvas((state) => state.canvas.setAssistantOpen);
+    return (_jsxs(Drawer, { direction: "right", open: isAssistantOpen, onOpenChange: setAssistantOpen, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "absolute right-4 top-4 z-10 h-8 w-8 rounded-full", children: _jsx(SparklesIcon, { className: "h-4 w-4" }) }) }), _jsx(DrawerContent, { className: "border-none bg-transparent p-4 outline-none", style: {
+                    width: 500,
+                    maxWidth: '50%',
+                }, "data-vaul-drawer-direction": "right", overlayClassName: "bg-transparent", children: _jsxs("div", { className: "border-border bg-background relative mx-auto flex h-full w-full flex-col gap-0 overflow-hidden rounded-md border", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Assistant" }), _jsx(DrawerClose, { asChild: true, className: "absolute right-2 top-2", children: _jsx(Button, { variant: "ghost", size: "xs", children: _jsx(XIcon, { className: "h-4 w-4" }) }) })] }), _jsx(AnalysisResultsContainer, { className: "flex-grow overflow-auto px-4" }), _jsx(DrawerFooter, { children: _jsx(QueryControls, { placeholder: "What would you like to do?" }) })] }) })] }));
+};
+//# sourceMappingURL=CanvasAssistantDrawer.js.map

package/dist/CanvasAssistantDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasAssistantDrawer.js","sourceRoot":"","sources":["../src/CanvasAssistantDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,wBAAwB,EAAE,aAAa,EAAC,MAAM,cAAc,CAAC;AACrE,OAAO,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,YAAY,EAEZ,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,YAAY,EAAE,KAAK,EAAC,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAO,GAAG,EAAE;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CACxC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CACxC,CAAC;IACF,MAAM,gBAAgB,GAAG,kBAAkB,CACzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CACzC,CAAC;IACF,OAAO,CACL,MAAC,MAAM,IACL,SAAS,EAAC,OAAO,EACjB,IAAI,EAAE,eAAe,EACrB,YAAY,EAAE,gBAAgB,aAE9B,KAAC,aAAa,IAAC,OAAO,kBACpB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,kDAAkD,YAE5D,KAAC,YAAY,IAAC,SAAS,EAAC,SAAS,GAAG,GAC7B,GACK,EAChB,KAAC,aAAa,IACZ,SAAS,EAAC,6CAA6C,EACvD,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG;oBACV,QAAQ,EAAE,KAAK;iBAChB,gCAC0B,OAAO,EAClC,gBAAgB,EAAC,gBAAgB,YAEjC,eAAK,SAAS,EAAC,kHAAkH,aAC/H,MAAC,YAAY,eACX,KAAC,WAAW,4BAAwB,EACpC,KAAC,WAAW,IAAC,OAAO,QAAC,SAAS,EAAC,wBAAwB,YACrD,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,YAC/B,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,GAAG,GACtB,GACG,IACD,EACf,KAAC,wBAAwB,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACrE,KAAC,YAAY,cACX,KAAC,aAAa,IAAC,WAAW,EAAC,4BAA4B,GAAG,GAC7C,IACX,GACQ,IACT,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {AnalysisResultsContainer, QueryControls} from '@sqlrooms/ai';\nimport {\n  Button,\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerFooter,\n  DrawerHandle,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@sqlrooms/ui';\nimport {SparklesIcon, XIcon} from 'lucide-react';\nimport {FC} from 'react';\nimport {useStoreWithCanvas} from './CanvasSlice';\n\nexport const CanvasAssistantDrawer: FC = () => {\n  const isAssistantOpen = useStoreWithCanvas(\n    (state) => state.canvas.isAssistantOpen,\n  );\n  const setAssistantOpen = useStoreWithCanvas(\n    (state) => state.canvas.setAssistantOpen,\n  );\n  return (\n    <Drawer\n      direction=\"right\"\n      open={isAssistantOpen}\n      onOpenChange={setAssistantOpen}\n    >\n      <DrawerTrigger asChild>\n        <Button\n          variant=\"default\"\n          className=\"absolute right-4 top-4 z-10 h-8 w-8 rounded-full\"\n        >\n          <SparklesIcon className=\"h-4 w-4\" />\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent\n        className=\"border-none bg-transparent p-4 outline-none\"\n        style={{\n          width: 500,\n          maxWidth: '50%',\n        }}\n        data-vaul-drawer-direction=\"right\"\n        overlayClassName=\"bg-transparent\"\n      >\n        <div className=\"border-border bg-background relative mx-auto flex h-full w-full flex-col gap-0 overflow-hidden rounded-md border\">\n          <DrawerHeader>\n            <DrawerTitle>Assistant</DrawerTitle>\n            <DrawerClose asChild className=\"absolute right-2 top-2\">\n              <Button variant=\"ghost\" size=\"xs\">\n                <XIcon className=\"h-4 w-4\" />\n              </Button>\n            </DrawerClose>\n          </DrawerHeader>\n          <AnalysisResultsContainer className=\"flex-grow overflow-auto px-4\" />\n          <DrawerFooter>\n            <QueryControls placeholder=\"What would you like to do?\" />\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n"]}