@sqlrooms/canvas 0.24.17

package/dist/nodes/AddNodePopover.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const AddNodePopover: FC<PropsWithChildren<{
+    className?: string;
+    parentId?: string;
+}>>;
+//# sourceMappingURL=AddNodePopover.d.ts.map

package/dist/nodes/AddNodePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNodePopover.d.ts","sourceRoot":"","sources":["../../src/nodes/AddNodePopover.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGtD,eAAO,MAAM,cAAc,EAAE,EAAE,CAC7B,iBAAiB,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAiCH,CAAC"}

package/dist/nodes/AddNodePopover.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
+import { useState } from 'react';
+import { useStoreWithCanvas } from '../CanvasSlice';
+export const AddNodePopover = ({ className, parentId, children }) => {
+    const [open, setOpen] = useState(false);
+    const addNode = useStoreWithCanvas((s) => s.canvas.addNode);
+    const onAddSql = () => {
+        addNode({ parentId, nodeType: 'sql' });
+        setOpen(false);
+    };
+    const onAddVega = () => {
+        addNode({ parentId, nodeType: 'vega' });
+        setOpen(false);
+    };
+    return (_jsx("div", { className: cn(className), children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { side: "right", align: "center", className: "max-w-[100px] border-none bg-transparent p-0 shadow-none", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { size: "xs", onClick: onAddSql, children: "Query" }), _jsx(Button, { size: "xs", onClick: onAddVega, children: "Visualize" })] }) })] }) }));
+};
+//# sourceMappingURL=AddNodePopover.js.map

package/dist/nodes/AddNodePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNodePopover.js","sourceRoot":"","sources":["../../src/nodes/AddNodePopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,EAAE,EACF,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAwB,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAKvB,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,EAAE;IACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,CAAC,CAAC;QACrC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;QACtC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IACF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAC3B,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,KAAC,cAAc,IAAC,OAAO,kBAAE,QAAQ,GAAkB,EACnD,KAAC,cAAc,IACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,0DAA0D,YAEpE,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,QAAQ,sBAE1B,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,SAAS,0BAE3B,IACL,GACS,IACT,GACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  Button,\n  cn,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@sqlrooms/ui';\nimport {FC, PropsWithChildren, useState} from 'react';\nimport {useStoreWithCanvas} from '../CanvasSlice';\n\nexport const AddNodePopover: FC<\n  PropsWithChildren<{\n    className?: string;\n    parentId?: string;\n  }>\n> = ({className, parentId, children}) => {\n  const [open, setOpen] = useState(false);\n  const addNode = useStoreWithCanvas((s) => s.canvas.addNode);\n  const onAddSql = () => {\n    addNode({parentId, nodeType: 'sql'});\n    setOpen(false);\n  };\n  const onAddVega = () => {\n    addNode({parentId, nodeType: 'vega'});\n    setOpen(false);\n  };\n  return (\n    <div className={cn(className)}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          side=\"right\"\n          align=\"center\"\n          className=\"max-w-[100px] border-none bg-transparent p-0 shadow-none\"\n        >\n          <div className=\"flex flex-col gap-2\">\n            <Button size=\"xs\" onClick={onAddSql}>\n              Query\n            </Button>\n            <Button size=\"xs\" onClick={onAddVega}>\n              Visualize\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n"]}

package/dist/nodes/CanvasNodeContainer.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+/**
+ * Container applied to every canvas node. Provides resizing, connection handles,
+ * and a standard "add child" affordance that creates downstream nodes.
+ * Also renders an optional shared header with editable title and customizable right-side content.
+ */
+export declare const CanvasNodeContainer: FC<PropsWithChildren<{
+    id: string;
+    className?: string;
+    /** Right-side header content (e.g. buttons, badges). */
+    headerRight?: ReactNode;
+}>>;
+//# sourceMappingURL=CanvasNodeContainer.d.ts.map

package/dist/nodes/CanvasNodeContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasNodeContainer.d.ts","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAUpE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAClC,iBAAiB,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,CAAC,CAkEH,CAAC"}

package/dist/nodes/CanvasNodeContainer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryControls } from '@sqlrooms/ai';
+import { Button, EditableText, Popover, PopoverContent, PopoverTrigger, cn, } from '@sqlrooms/ui';
+import { Handle, NodeResizer, Position } from '@xyflow/react';
+import { PlusIcon, SparklesIcon } from 'lucide-react';
+import { useCallback } from 'react';
+import { useStoreWithCanvas } from '../CanvasSlice';
+import { AddNodePopover } from './AddNodePopover';
+const PROMPT_PLACEHOLDER = {
+    sql: 'What would you like to learn about the data?',
+    vega: 'How would you like to visualize the data?',
+    default: 'What would you like to do?',
+};
+/**
+ * Container applied to every canvas node. Provides resizing, connection handles,
+ * and a standard "add child" affordance that creates downstream nodes.
+ * Also renders an optional shared header with editable title and customizable right-side content.
+ */
+export const CanvasNodeContainer = ({ id, className, headerRight, children }) => {
+    const renameNode = useStoreWithCanvas((s) => s.canvas.renameNode);
+    const node = useStoreWithCanvas((s) => s.config.canvas.nodes.find((n) => n.id === id));
+    const title = node?.data.title;
+    const onTitleChange = useCallback(async (v) => {
+        await renameNode(id, v);
+    }, [id, renameNode]);
+    const setAssistantOpen = useStoreWithCanvas((s) => s.canvas.setAssistantOpen);
+    return (_jsxs("div", { className: cn(`bg-background relative flex h-full w-full rounded-md border shadow-sm`, className), children: [_jsx(NodeResizer, { minWidth: 200, minHeight: 200 }), _jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center", children: [(title !== undefined || headerRight) && (_jsxs("div", { className: "flex w-full items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx(EditableText, { className: "text-sm font-medium", value: title ?? '', onChange: (v) => onTitleChange?.(v) }), _jsx("div", { className: "flex items-center gap-2", children: headerRight })] })), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "h-8 w-8 -translate-y-1/2 rounded-full", children: _jsx(SparklesIcon, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { className: "max-h-[50vh] w-[400px] overflow-auto", children: _jsx(QueryControls, { placeholder: `✨ ${PROMPT_PLACEHOLDER[node?.type ?? 'default']}`, onRun: () => {
+                                        setAssistantOpen(true);
+                                    } }) })] }), _jsx("div", { className: "w-full flex-1 overflow-auto", children: children })] }), _jsx(AddNodePopover, { className: "absolute -right-10 top-1/2", parentId: id, children: _jsx(Button, { variant: "default", className: "h-8 w-8 -translate-y-1/2 rounded-full", title: "Add child node", children: _jsx(PlusIcon, { className: "h-4 w-4" }) }) }), _jsx(Handle, { type: "source", position: Position.Right }), _jsx(Handle, { type: "target", position: Position.Left })] }));
+};
+//# sourceMappingURL=CanvasNodeContainer.js.map

package/dist/nodes/CanvasNodeContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasNodeContainer.js","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {QueryControls} from '@sqlrooms/ai';\nimport {\n  Button,\n  EditableText,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  cn,\n} from '@sqlrooms/ui';\nimport {Handle, NodeResizer, Position} from '@xyflow/react';\nimport {PlusIcon, SparklesIcon} from 'lucide-react';\nimport {FC, PropsWithChildren, ReactNode, useCallback} from 'react';\nimport {useStoreWithCanvas} from '../CanvasSlice';\nimport {AddNodePopover} from './AddNodePopover';\n\nconst PROMPT_PLACEHOLDER = {\n  sql: 'What would you like to learn about the data?',\n  vega: 'How would you like to visualize the data?',\n  default: 'What would you like to do?',\n};\n\n/**\n * Container applied to every canvas node. Provides resizing, connection handles,\n * and a standard \"add child\" affordance that creates downstream nodes.\n * Also renders an optional shared header with editable title and customizable right-side content.\n */\nexport const CanvasNodeContainer: FC<\n  PropsWithChildren<{\n    id: string;\n    className?: string;\n    /** Right-side header content (e.g. buttons, badges). */\n    headerRight?: ReactNode;\n  }>\n> = ({id, className, headerRight, children}) => {\n  const renameNode = useStoreWithCanvas((s) => s.canvas.renameNode);\n  const node = useStoreWithCanvas((s) =>\n    s.config.canvas.nodes.find((n) => n.id === id),\n  );\n  const title = node?.data.title;\n  const onTitleChange = useCallback(\n    async (v: string) => {\n      await renameNode(id, v);\n    },\n    [id, renameNode],\n  );\n  const setAssistantOpen = useStoreWithCanvas((s) => s.canvas.setAssistantOpen);\n  return (\n    <div\n      className={cn(\n        `bg-background relative flex h-full w-full rounded-md border shadow-sm`,\n        className,\n      )}\n    >\n      <NodeResizer minWidth={200} minHeight={200} />\n      <div className=\"flex h-full min-h-0 w-full flex-col items-center\">\n        {(title !== undefined || headerRight) && (\n          <div className=\"flex w-full items-center justify-between gap-2 border-b px-3 py-2\">\n            <EditableText\n              className=\"text-sm font-medium\"\n              value={title ?? ''}\n              onChange={(v) => onTitleChange?.(v)}\n            />\n            <div className=\"flex items-center gap-2\">{headerRight}</div>\n          </div>\n        )}\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"default\"\n              className=\"h-8 w-8 -translate-y-1/2 rounded-full\"\n            >\n              <SparklesIcon className=\"h-4 w-4\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"max-h-[50vh] w-[400px] overflow-auto\">\n            <QueryControls\n              placeholder={`✨ ${PROMPT_PLACEHOLDER[node?.type ?? 'default']}`}\n              onRun={() => {\n                setAssistantOpen(true);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n        <div className=\"w-full flex-1 overflow-auto\">{children}</div>\n      </div>\n      <AddNodePopover className=\"absolute -right-10 top-1/2\" parentId={id}>\n        <Button\n          variant=\"default\"\n          className=\"h-8 w-8 -translate-y-1/2 rounded-full\"\n          title=\"Add child node\"\n        >\n          <PlusIcon className=\"h-4 w-4\" />\n        </Button>\n      </AddNodePopover>\n      <Handle type=\"source\" position={Position.Right} />\n      <Handle type=\"target\" position={Position.Left} />\n    </div>\n  );\n};\n"]}

package/dist/nodes/SqlNode.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { CanvasNodeData } from '../CanvasSlice';
+type SqlData = Extract<CanvasNodeData, {
+    type: 'sql';
+}>;
+export declare const SqlNode: FC<{
+    id: string;
+    data: SqlData;
+}>;
+export {};
+//# sourceMappingURL=SqlNode.d.ts.map

package/dist/nodes/SqlNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlNode.d.ts","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAO,EAAC,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAclE,KAAK,OAAO,GAAG,OAAO,CAAC,cAAc,EAAE;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,CAAC,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CA4DnD,CAAC"}

package/dist/nodes/SqlNode.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { QueryDataTable } from '@sqlrooms/data-table';
+import { SqlMonacoEditor } from '@sqlrooms/sql-editor';
+import { Button, useToast } from '@sqlrooms/ui';
+import { useStoreWithCanvas } from '../CanvasSlice';
+import { CanvasNodeContainer } from './CanvasNodeContainer';
+// import type * as Monaco from 'monaco-editor';
+// type EditorInstance = Monaco.editor.IStandaloneCodeEditor;
+// type MonacoInstance = typeof Monaco;
+const EDITOR_OPTIONS = {
+    minimap: { enabled: false },
+    lineNumbers: 'off',
+    scrollbar: {
+        handleMouseWheel: false,
+    },
+};
+export const SqlNode = ({ id, data }) => {
+    const sql = data.sql || '';
+    const updateNode = useStoreWithCanvas((s) => s.canvas.updateNode);
+    const tables = useStoreWithCanvas((s) => s.db.tables);
+    const execute = useStoreWithCanvas((s) => s.canvas.executeSqlNodeQuery);
+    const result = useStoreWithCanvas((s) => s.canvas.sqlResults[id]);
+    const { toast } = useToast();
+    // const handleEditorMount = useCallback(
+    //   (editor: EditorInstance, monaco: MonacoInstance) => {
+    //     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+    //       if (editor.hasTextFocus()) {
+    //         execute(id);
+    //       }
+    //     });
+    //   },
+    //   [execute],
+    // );
+    return (_jsx(CanvasNodeContainer, { id: id, headerRight: _jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => execute(id), children: "Run" }), _jsx("span", { className: "text-[10px] uppercase text-gray-500", children: "SQL" })] }), children: _jsxs("div", { className: "flex h-full w-full flex-col", children: [_jsx("div", { className: "relative flex-1", children: _jsx(SqlMonacoEditor, { className: "absolute inset-0 p-1", value: sql, options: EDITOR_OPTIONS, onChange: (v) => updateNode(id, (d) => ({ ...d, sql: v || '' })), tableSchemas: tables }) }), result?.status === 'error' && (_jsx("div", { className: "flex-1 overflow-auto whitespace-pre-wrap border-t p-4 font-mono text-xs text-red-600", children: result.error })), result?.status === 'success' && (_jsx("div", { className: "flex-[2] overflow-hidden border-t", children: _jsx(QueryDataTable, { query: `SELECT * FROM ${result.tableName}`, fontSize: "text-xs" }) }))] }) }));
+};
+//# sourceMappingURL=SqlNode.js.map

package/dist/nodes/SqlNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlNode.js","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAiB,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,gDAAgD;AAChD,6DAA6D;AAC7D,uCAAuC;AAEvC,MAAM,cAAc,GAAqD;IACvE,OAAO,EAAE,EAAC,OAAO,EAAE,KAAK,EAAC;IACzB,WAAW,EAAE,KAAK;IAClB,SAAS,EAAE;QACT,gBAAgB,EAAE,KAAK;KACxB;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAoC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,EAAE,EAAE;IACrE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;IACxE,MAAM,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAE3B,yCAAyC;IACzC,0DAA0D;IAC1D,8EAA8E;IAC9E,qCAAqC;IACrC,uBAAuB;IACvB,UAAU;IACV,UAAU;IACV,OAAO;IACP,eAAe;IACf,KAAK;IAEL,OAAO,CACL,KAAC,mBAAmB,IAClB,EAAE,EAAE,EAAE,EACN,WAAW,EACT,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,oBAEvD,EACT,eAAM,SAAS,EAAC,qCAAqC,oBAAW,IAC/D,YAGL,eAAK,SAAS,EAAC,6BAA6B,aAC1C,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,eAAe,IACd,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAC,GAAI,CAAa,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAC,CAAC,CAAC,EAE5D,YAAY,EAAE,MAAM,GAEpB,GACE,EACL,MAAM,EAAE,MAAM,KAAK,OAAO,IAAI,CAC7B,cAAK,SAAS,EAAC,sFAAsF,YAClG,MAAM,CAAC,KAAK,GACT,CACP,EACA,MAAM,EAAE,MAAM,KAAK,SAAS,IAAI,CAC/B,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,cAAc,IACb,KAAK,EAAE,iBAAiB,MAAM,CAAC,SAAS,EAAE,EAC1C,QAAQ,EAAC,SAAS,GAClB,GACE,CACP,IACG,GACc,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {QueryDataTable} from '@sqlrooms/data-table';\nimport {SqlMonacoEditor} from '@sqlrooms/sql-editor';\nimport {Button, useToast} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {CanvasNodeData, useStoreWithCanvas} from '../CanvasSlice';\nimport {CanvasNodeContainer} from './CanvasNodeContainer';\n// import type * as Monaco from 'monaco-editor';\n// type EditorInstance = Monaco.editor.IStandaloneCodeEditor;\n// type MonacoInstance = typeof Monaco;\n\nconst EDITOR_OPTIONS: Parameters<typeof SqlMonacoEditor>[0]['options'] = {\n  minimap: {enabled: false},\n  lineNumbers: 'off',\n  scrollbar: {\n    handleMouseWheel: false,\n  },\n};\n\ntype SqlData = Extract<CanvasNodeData, {type: 'sql'}>;\n\nexport const SqlNode: FC<{id: string; data: SqlData}> = ({id, data}) => {\n  const sql = data.sql || '';\n  const updateNode = useStoreWithCanvas((s) => s.canvas.updateNode);\n  const tables = useStoreWithCanvas((s) => s.db.tables);\n  const execute = useStoreWithCanvas((s) => s.canvas.executeSqlNodeQuery);\n  const result = useStoreWithCanvas((s) => s.canvas.sqlResults[id]);\n  const {toast} = useToast();\n\n  // const handleEditorMount = useCallback(\n  //   (editor: EditorInstance, monaco: MonacoInstance) => {\n  //     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {\n  //       if (editor.hasTextFocus()) {\n  //         execute(id);\n  //       }\n  //     });\n  //   },\n  //   [execute],\n  // );\n\n  return (\n    <CanvasNodeContainer\n      id={id}\n      headerRight={\n        <>\n          <Button size=\"sm\" variant=\"secondary\" onClick={() => execute(id)}>\n            Run\n          </Button>\n          <span className=\"text-[10px] uppercase text-gray-500\">SQL</span>\n        </>\n      }\n    >\n      <div className=\"flex h-full w-full flex-col\">\n        <div className=\"relative flex-1\">\n          <SqlMonacoEditor\n            className=\"absolute inset-0 p-1\"\n            value={sql}\n            options={EDITOR_OPTIONS}\n            onChange={(v) =>\n              updateNode(id, (d) => ({...(d as SqlData), sql: v || ''}))\n            }\n            tableSchemas={tables}\n            // onMount={handleEditorMount}\n          />\n        </div>\n        {result?.status === 'error' && (\n          <div className=\"flex-1 overflow-auto whitespace-pre-wrap border-t p-4 font-mono text-xs text-red-600\">\n            {result.error}\n          </div>\n        )}\n        {result?.status === 'success' && (\n          <div className=\"flex-[2] overflow-hidden border-t\">\n            <QueryDataTable\n              query={`SELECT * FROM ${result.tableName}`}\n              fontSize=\"text-xs\"\n            />\n          </div>\n        )}\n      </div>\n    </CanvasNodeContainer>\n  );\n};\n"]}

package/dist/nodes/VegaNode.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { CanvasNodeData } from '../CanvasSlice';
+type VegaData = Extract<CanvasNodeData, {
+    type: 'vega';
+}>;
+export declare const VegaNode: FC<{
+    id: string;
+    data: VegaData;
+}>;
+export {};
+//# sourceMappingURL=VegaNode.d.ts.map

package/dist/nodes/VegaNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaNode.d.ts","sourceRoot":"","sources":["../../src/nodes/VegaNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAG9C,KAAK,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,CA2BrD,CAAC"}

package/dist/nodes/VegaNode.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VegaLiteChart } from '@sqlrooms/vega';
+import { CanvasNodeContainer } from './CanvasNodeContainer';
+export const VegaNode = ({ id, data }) => {
+    const spec = (data.vegaSpec || {
+        mark: 'point',
+        data: { values: [] },
+    });
+    const { vegaSpec, sql } = data;
+    return (_jsx(CanvasNodeContainer, { id: id, headerRight: _jsx("span", { className: "text-[10px] uppercase text-gray-500", children: "Vega" }), children: _jsx("div", { className: "h-full flex-1 overflow-hidden p-2", children: sql && vegaSpec ? (_jsx(VegaLiteChart, { spec: vegaSpec, sqlQuery: sql, aspectRatio: 3 / 2, className: "h-full" })) : null }) }));
+};
+//# sourceMappingURL=VegaNode.js.map

package/dist/nodes/VegaNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaNode.js","sourceRoot":"","sources":["../../src/nodes/VegaNode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAyB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAI1D,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,EAAE,EAAE;IACvE,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI;QAC7B,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAC,MAAM,EAAE,EAAE,EAAC;KACnB,CAAsB,CAAC;IAExB,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;IAE7B,OAAO,CACL,KAAC,mBAAmB,IAClB,EAAE,EAAE,EAAE,EACN,WAAW,EACT,eAAM,SAAS,EAAC,qCAAqC,qBAAY,YAGnE,cAAK,SAAS,EAAC,mCAAmC,YAC/C,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,aAAa,IACZ,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,GAAG,EACb,WAAW,EAAE,CAAC,GAAG,CAAC,EAClB,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC,CAAC,CAAC,IAAI,GACJ,GACc,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {VegaLiteChart, type VisualizationSpec} from '@sqlrooms/vega';\nimport {FC} from 'react';\nimport {CanvasNodeData} from '../CanvasSlice';\nimport {CanvasNodeContainer} from './CanvasNodeContainer';\n\ntype VegaData = Extract<CanvasNodeData, {type: 'vega'}>;\n\nexport const VegaNode: FC<{id: string; data: VegaData}> = ({id, data}) => {\n  const spec = (data.vegaSpec || {\n    mark: 'point',\n    data: {values: []},\n  }) as VisualizationSpec;\n\n  const {vegaSpec, sql} = data;\n\n  return (\n    <CanvasNodeContainer\n      id={id}\n      headerRight={\n        <span className=\"text-[10px] uppercase text-gray-500\">Vega</span>\n      }\n    >\n      <div className=\"h-full flex-1 overflow-hidden p-2\">\n        {sql && vegaSpec ? (\n          <VegaLiteChart\n            spec={vegaSpec}\n            sqlQuery={sql}\n            aspectRatio={3 / 2}\n            className=\"h-full\"\n          />\n        ) : null}\n      </div>\n    </CanvasNodeContainer>\n  );\n};\n"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sqlrooms/canvas",
+  "version": "0.24.17",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "type": "module",
+  "author": "Ilya Boyandin <ilya@boyandin.me>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sqlrooms/sqlrooms.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@paralleldrive/cuid2": "^2.2.2",
+    "@sqlrooms/ai": "0.24.17",
+    "@sqlrooms/data-table": "0.24.17",
+    "@sqlrooms/duckdb": "0.24.17",
+    "@sqlrooms/room-shell": "0.24.17",
+    "@sqlrooms/sql-editor": "0.24.17",
+    "@sqlrooms/ui": "0.24.17",
+    "@sqlrooms/vega": "0.24.17",
+    "@xyflow/react": "^12.0.2",
+    "immer": "^10.1.1",
+    "zod": "^3.25.73"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "typedoc": "typedoc"
+  },
+  "gitHead": "31b706c4687780cefa92bc9e715f2839dbe4ee49"
+}