@sqlrooms/canvas 0.27.0 → 0.28.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,9 +6,9 @@ import { useStoreWithCanvas } from './CanvasSlice';
6
6
  export const CanvasAssistantDrawer = () => {
7
7
  const isAssistantOpen = useStoreWithCanvas((state) => state.canvas.isAssistantOpen);
8
8
  const setAssistantOpen = useStoreWithCanvas((state) => state.canvas.setAssistantOpen);
9
- return (_jsxs(Drawer, { direction: "right", open: isAssistantOpen, onOpenChange: setAssistantOpen, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "absolute top-4 right-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: {
9
+ return (_jsxs(Drawer, { direction: "right", open: isAssistantOpen, onOpenChange: setAssistantOpen, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "absolute top-4 right-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-hidden", style: {
10
10
  width: 500,
11
11
  maxWidth: '50%',
12
- }, "data-vaul-drawer-direction": "right", overlayClassName: "bg-transparent", children: _jsx("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(Chat, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Assistant" }), _jsx(DrawerClose, { asChild: true, className: "absolute top-2 right-2", children: _jsx(Button, { variant: "ghost", size: "xs", children: _jsx(XIcon, { className: "h-4 w-4" }) }) })] }), _jsx(Chat.Messages, { className: "flex-grow overflow-auto px-4" }), _jsx(DrawerFooter, { children: _jsx(Chat.Composer, { placeholder: "What would you like to do?" }) })] }) }) })] }));
12
+ }, "data-vaul-drawer-direction": "right", overlayClassName: "bg-transparent", children: _jsx("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(Chat, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Assistant" }), _jsx(DrawerClose, { asChild: true, className: "absolute top-2 right-2", children: _jsx(Button, { variant: "ghost", size: "xs", children: _jsx(XIcon, { className: "h-4 w-4" }) }) })] }), _jsx(Chat.Messages, { className: "grow overflow-auto px-4" }), _jsx(DrawerFooter, { children: _jsx(Chat.Composer, { placeholder: "What would you like to do?" }) })] }) }) })] }));
13
13
  };
14
14
  //# sourceMappingURL=CanvasAssistantDrawer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CanvasAssistantDrawer.js","sourceRoot":"","sources":["../src/CanvasAssistantDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,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,cAAK,SAAS,EAAC,kHAAkH,YAC/H,MAAC,IAAI,eACH,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,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,GAAG,EAC1D,KAAC,YAAY,cACX,KAAC,IAAI,CAAC,QAAQ,IAAC,WAAW,EAAC,4BAA4B,GAAG,GAC7C,IACV,GACH,GACQ,IACT,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Chat} 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 top-4 right-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 <Chat>\n <DrawerHeader>\n <DrawerTitle>Assistant</DrawerTitle>\n <DrawerClose asChild className=\"absolute top-2 right-2\">\n <Button variant=\"ghost\" size=\"xs\">\n <XIcon className=\"h-4 w-4\" />\n </Button>\n </DrawerClose>\n </DrawerHeader>\n <Chat.Messages className=\"flex-grow overflow-auto px-4\" />\n <DrawerFooter>\n <Chat.Composer placeholder=\"What would you like to do?\" />\n </DrawerFooter>\n </Chat>\n </div>\n </DrawerContent>\n </Drawer>\n );\n};\n"]}
1
+ {"version":3,"file":"CanvasAssistantDrawer.js","sourceRoot":"","sources":["../src/CanvasAssistantDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,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,+CAA+C,EACzD,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG;oBACV,QAAQ,EAAE,KAAK;iBAChB,gCAC0B,OAAO,EAClC,gBAAgB,EAAC,gBAAgB,YAEjC,cAAK,SAAS,EAAC,kHAAkH,YAC/H,MAAC,IAAI,eACH,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,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,yBAAyB,GAAG,EACrD,KAAC,YAAY,cACX,KAAC,IAAI,CAAC,QAAQ,IAAC,WAAW,EAAC,4BAA4B,GAAG,GAC7C,IACV,GACH,GACQ,IACT,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Chat} 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 top-4 right-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-hidden\"\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 <Chat>\n <DrawerHeader>\n <DrawerTitle>Assistant</DrawerTitle>\n <DrawerClose asChild className=\"absolute top-2 right-2\">\n <Button variant=\"ghost\" size=\"xs\">\n <XIcon className=\"h-4 w-4\" />\n </Button>\n </DrawerClose>\n </DrawerHeader>\n <Chat.Messages className=\"grow overflow-auto px-4\" />\n <DrawerFooter>\n <Chat.Composer placeholder=\"What would you like to do?\" />\n </DrawerFooter>\n </Chat>\n </div>\n </DrawerContent>\n </Drawer>\n );\n};\n"]}
@@ -47,6 +47,6 @@ export const SqlNode = ({ id, data }) => {
47
47
  fixedOverflowWidgets: false,
48
48
  }
49
49
  : EDITOR_OPTIONS, [overflowWidgetsDomNode]);
50
- 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: editorOptions, 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" }) }))] }) }));
50
+ 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] text-gray-500 uppercase", 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: editorOptions, onChange: (v) => updateNode(id, (d) => ({ ...d, sql: v || '' })), tableSchemas: tables }) }), result?.status === 'error' && (_jsx("div", { className: "flex-1 overflow-auto border-t p-4 font-mono text-xs whitespace-pre-wrap 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" }) }))] }) }));
51
51
  };
52
52
  //# sourceMappingURL=SqlNode.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SqlNode.js","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {QueryDataTable} from '@sqlrooms/data-table';\nimport {SqlMonacoEditor} from '@sqlrooms/sql-editor';\nimport {Button, useToast} from '@sqlrooms/ui';\nimport {FC, useMemo, useState} 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 fixedOverflowWidgets: false,\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 // const reactFlowContainerRef = useRef<HTMLDivElement>(null);\n // useEffect(() => {\n // reactFlowContainerRef.current = document.querySelector<HTMLDivElement>(\n // '.react-flow__renderer',\n // );\n // }, []);\n const [overflowWidgetsDomNode, setOverflowWidgetsDomNode] =\n useState<HTMLDivElement | null>(null);\n\n const editorOptions = useMemo(\n (): typeof EDITOR_OPTIONS =>\n overflowWidgetsDomNode\n ? {\n ...EDITOR_OPTIONS,\n overflowWidgetsDomNode: overflowWidgetsDomNode ?? undefined,\n fixedOverflowWidgets: false,\n }\n : EDITOR_OPTIONS,\n [overflowWidgetsDomNode],\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={editorOptions}\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 {/* {reactFlowContainerRef.current &&\n createPortal(\n <div\n ref={(node) => {\n if (node && !overflowWidgetsDomNode) {\n setOverflowWidgetsDomNode(node);\n }\n }}\n // CRITICAL: You must re-apply the monaco class here!\n className=\"monaco-editor\"\n // CRITICAL: Styles to ensure overlays position correctly relative to window\n style={{position: 'absolute', top: 0, left: 0}}\n />,\n reactFlowContainerRef.current,\n )} */}\n </CanvasNodeContainer>\n );\n};\n"]}
1
+ {"version":3,"file":"SqlNode.js","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {QueryDataTable} from '@sqlrooms/data-table';\nimport {SqlMonacoEditor} from '@sqlrooms/sql-editor';\nimport {Button, useToast} from '@sqlrooms/ui';\nimport {FC, useMemo, useState} 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 fixedOverflowWidgets: false,\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 // const reactFlowContainerRef = useRef<HTMLDivElement>(null);\n // useEffect(() => {\n // reactFlowContainerRef.current = document.querySelector<HTMLDivElement>(\n // '.react-flow__renderer',\n // );\n // }, []);\n const [overflowWidgetsDomNode, setOverflowWidgetsDomNode] =\n useState<HTMLDivElement | null>(null);\n\n const editorOptions = useMemo(\n (): typeof EDITOR_OPTIONS =>\n overflowWidgetsDomNode\n ? {\n ...EDITOR_OPTIONS,\n overflowWidgetsDomNode: overflowWidgetsDomNode ?? undefined,\n fixedOverflowWidgets: false,\n }\n : EDITOR_OPTIONS,\n [overflowWidgetsDomNode],\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] text-gray-500 uppercase\">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={editorOptions}\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 border-t p-4 font-mono text-xs whitespace-pre-wrap 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 {/* {reactFlowContainerRef.current &&\n createPortal(\n <div\n ref={(node) => {\n if (node && !overflowWidgetsDomNode) {\n setOverflowWidgetsDomNode(node);\n }\n }}\n // CRITICAL: You must re-apply the monaco class here!\n className=\"monaco-editor\"\n // CRITICAL: Styles to ensure overlays position correctly relative to window\n style={{position: 'absolute', top: 0, left: 0}}\n />,\n reactFlowContainerRef.current,\n )} */}\n </CanvasNodeContainer>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sqlrooms/canvas",
3
- "version": "0.27.0",
3
+ "version": "0.28.0-rc.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/index.js",
@@ -32,14 +32,14 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@paralleldrive/cuid2": "^3.0.0",
35
- "@sqlrooms/ai": "0.27.0",
36
- "@sqlrooms/crdt": "0.27.0",
37
- "@sqlrooms/data-table": "0.27.0",
38
- "@sqlrooms/duckdb": "0.27.0",
39
- "@sqlrooms/room-shell": "0.27.0",
40
- "@sqlrooms/sql-editor": "0.27.0",
41
- "@sqlrooms/ui": "0.27.0",
42
- "@sqlrooms/vega": "0.27.0",
35
+ "@sqlrooms/ai": "0.28.0-rc.0",
36
+ "@sqlrooms/crdt": "0.28.0-rc.0",
37
+ "@sqlrooms/data-table": "0.28.0-rc.0",
38
+ "@sqlrooms/duckdb": "0.28.0-rc.0",
39
+ "@sqlrooms/room-shell": "0.28.0-rc.0",
40
+ "@sqlrooms/sql-editor": "0.28.0-rc.0",
41
+ "@sqlrooms/ui": "0.28.0-rc.0",
42
+ "@sqlrooms/vega": "0.28.0-rc.0",
43
43
  "@xyflow/react": "^12.8.5",
44
44
  "immer": "^11.0.1",
45
45
  "loro-mirror": "^1.1.2",
@@ -57,5 +57,5 @@
57
57
  "typecheck": "tsc --noEmit",
58
58
  "typedoc": "typedoc"
59
59
  },
60
- "gitHead": "f215995ab4adeac4c58171739261a15cbba9e82b"
60
+ "gitHead": "87a478edbff690e04c38cc717db8e11e844565c8"
61
61
  }