@sqlrooms/cells 0.29.0-rc.1 → 0.29.0-rc.10

package/dist/components/SqlCellEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellEditor.d.ts","sourceRoot":"","sources":["../../src/components/SqlCellEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC;AAEjE,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsCtD,CAAC"}

package/dist/components/SqlCellEditor.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SqlCodeMirrorEditor } from '@sqlrooms/sql-editor';
+import { useState } from 'react';
+import { CollapsibleSectionButton } from './CollapsibleSectionButton';
+import { SqlQueryPreview } from './SqlQueryPreview';
+/**
+ * SQL query editor with collapse/expand functionality
+ */
+export const SqlCellEditor = ({ sql, connector, tableSchemas, onChange, onRunQuery, }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    return (_jsxs("div", { className: "group relative w-full py-1", children: [_jsx(CollapsibleSectionButton, { isCollapsed: isCollapsed, onToggle: () => setIsCollapsed(!isCollapsed) }), isCollapsed ? (_jsx("div", { className: "text-muted-foreground ml-5 px-2 py-1 text-xs", children: sql && _jsx(SqlQueryPreview, { sql: sql }) })) : (_jsx("div", { className: "w-full px-1", children: _jsx(SqlCodeMirrorEditor, { className: "h-auto min-h-[48px] w-full", connector: connector, tableSchemas: tableSchemas, value: sql, onChange: onChange, onRunQuery: onRunQuery, options: {
+                        lineNumbers: true,
+                        lineWrapping: false,
+                        highlightActiveLine: true,
+                    } }) }))] }));
+};
+//# sourceMappingURL=SqlCellEditor.js.map

package/dist/components/SqlCellEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellEditor.js","sourceRoot":"","sources":["../../src/components/SqlCellEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzD,OAAc,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAUlD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,GAAG,EACH,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,GACX,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,wBAAwB,IACvB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,GAC5C,EACD,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,8CAA8C,YAC1D,GAAG,IAAI,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,GAAI,GACjC,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,mBAAmB,IAClB,SAAS,EAAC,4BAA4B,EACtC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE;wBACP,WAAW,EAAE,IAAI;wBACjB,YAAY,EAAE,KAAK;wBACnB,mBAAmB,EAAE,IAAI;qBAC1B,GACD,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type {DataTable, DuckDbConnector} from '@sqlrooms/duckdb';\nimport {SqlCodeMirrorEditor} from '@sqlrooms/sql-editor';\nimport React, {useState} from 'react';\nimport {CollapsibleSectionButton} from './CollapsibleSectionButton';\nimport {SqlQueryPreview} from './SqlQueryPreview';\n\nexport interface SqlCellEditorProps {\n  sql: string;\n  connector?: DuckDbConnector;\n  tableSchemas?: DataTable[];\n  onChange: (value: string | undefined) => void;\n  onRunQuery: (query: string) => void;\n}\n\n/**\n * SQL query editor with collapse/expand functionality\n */\nexport const SqlCellEditor: React.FC<SqlCellEditorProps> = ({\n  sql,\n  connector,\n  tableSchemas,\n  onChange,\n  onRunQuery,\n}) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  return (\n    <div className=\"group relative w-full py-1\">\n      <CollapsibleSectionButton\n        isCollapsed={isCollapsed}\n        onToggle={() => setIsCollapsed(!isCollapsed)}\n      />\n      {isCollapsed ? (\n        <div className=\"text-muted-foreground ml-5 px-2 py-1 text-xs\">\n          {sql && <SqlQueryPreview sql={sql} />}\n        </div>\n      ) : (\n        <div className=\"w-full px-1\">\n          <SqlCodeMirrorEditor\n            className=\"h-auto min-h-[48px] w-full\"\n            connector={connector}\n            tableSchemas={tableSchemas}\n            value={sql}\n            onChange={onChange}\n            onRunQuery={onRunQuery}\n            options={{\n              lineNumbers: true,\n              lineWrapping: false,\n              highlightActiveLine: true,\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/components/SqlCellResultNameEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SqlCellResultNameEditorProps = {
+    cellId: string;
+    value: string;
+    onChange: (value: string) => void;
+};
+export declare const SqlCellResultNameEditor: React.FC<SqlCellResultNameEditorProps>;
+//# sourceMappingURL=SqlCellResultNameEditor.d.ts.map

package/dist/components/SqlCellResultNameEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellResultNameEditor.d.ts","sourceRoot":"","sources":["../../src/components/SqlCellResultNameEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,4BAA4B,GAAG;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CAiE7B,CAAC"}

package/dist/components/SqlCellResultNameEditor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, EditableText, Tooltip, TooltipContent, TooltipTrigger, } from '@sqlrooms/ui';
+import { useCallback, useState } from 'react';
+import { useValidateResultName } from '../useValidateResultName';
+export const SqlCellResultNameEditor = ({ cellId, value, onChange }) => {
+    const [currentInput, setCurrentInput] = useState('');
+    const [isEditing, setIsEditing] = useState(false);
+    const currentValue = isEditing ? currentInput.trim() : value;
+    // Get validation function from hook
+    const errorMessage = useValidateResultName(cellId, currentValue);
+    const handleInputChange = useCallback((newValue) => {
+        setCurrentInput(newValue);
+    }, []);
+    // Called on Enter or Blur - only commit if valid
+    const handleChange = useCallback((newValue) => {
+        if (!errorMessage && newValue !== value) {
+            // Valid and changed - commit to store
+            onChange(newValue);
+        }
+        // If invalid or unchanged - don't commit, EditableText will reset to value prop
+    }, [errorMessage, value, onChange]);
+    // Called when editing starts/ends (including Escape)
+    const handleEditingChange = useCallback((editing) => {
+        setIsEditing(editing);
+        if (editing) {
+            // Track what user is typing for validation
+            setCurrentInput(value);
+        }
+        else {
+            // Clear tracked input
+            setCurrentInput('');
+        }
+    }, [value]);
+    return (_jsxs(Tooltip, { open: Boolean(errorMessage), children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(EditableText, { className: cn('h-6 w-40 font-mono text-xs text-green-500 shadow-none', {
+                            'border-red-500 ring-1 ring-red-500 focus:border-red-500 focus:ring-red-500': Boolean(errorMessage),
+                        }), value: value, onInputChange: handleInputChange, onChange: handleChange, onEditingChange: handleEditingChange }) }) }), _jsx(TooltipContent, { side: "top", children: errorMessage && _jsx("span", { className: "text-xs", children: errorMessage }) })] }));
+};
+//# sourceMappingURL=SqlCellResultNameEditor.js.map

package/dist/components/SqlCellResultNameEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellResultNameEditor.js","sourceRoot":"","sources":["../../src/components/SqlCellResultNameEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,EAAE,EACF,YAAY,EACZ,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAc,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAQ/D,MAAM,CAAC,MAAM,uBAAuB,GAEhC,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE;IAChC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE3D,MAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7D,oCAAoC;IACpC,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEjE,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACzD,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iDAAiD;IACjD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,YAAY,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;YACxC,sCAAsC;YACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;QACD,gFAAgF;IAClF,CAAC,EACD,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAChC,CAAC;IAEF,qDAAqD;IACrD,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAgB,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,IAAI,OAAO,EAAE,CAAC;YACZ,2CAA2C;YAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,sBAAsB;YACtB,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,aAClC,KAAC,cAAc,IAAC,OAAO,kBACrB,wBACE,KAAC,YAAY,IACX,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD;4BACE,4EAA4E,EAC1E,OAAO,CAAC,YAAY,CAAC;yBACxB,CACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,iBAAiB,EAChC,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,mBAAmB,GACpC,GACE,GACS,EACjB,KAAC,cAAc,IAAC,IAAI,EAAC,KAAK,YACvB,YAAY,IAAI,eAAM,SAAS,EAAC,SAAS,YAAE,YAAY,GAAQ,GACjD,IACT,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  cn,\n  EditableText,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@sqlrooms/ui';\nimport React, {useCallback, useState} from 'react';\nimport {useValidateResultName} from '../useValidateResultName';\n\nexport type SqlCellResultNameEditorProps = {\n  cellId: string;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nexport const SqlCellResultNameEditor: React.FC<\n  SqlCellResultNameEditorProps\n> = ({cellId, value, onChange}) => {\n  const [currentInput, setCurrentInput] = useState<string>('');\n  const [isEditing, setIsEditing] = useState<boolean>(false);\n\n  const currentValue = isEditing ? currentInput.trim() : value;\n\n  // Get validation function from hook\n  const errorMessage = useValidateResultName(cellId, currentValue);\n\n  const handleInputChange = useCallback((newValue: string) => {\n    setCurrentInput(newValue);\n  }, []);\n\n  // Called on Enter or Blur - only commit if valid\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (!errorMessage && newValue !== value) {\n        // Valid and changed - commit to store\n        onChange(newValue);\n      }\n      // If invalid or unchanged - don't commit, EditableText will reset to value prop\n    },\n    [errorMessage, value, onChange],\n  );\n\n  // Called when editing starts/ends (including Escape)\n  const handleEditingChange = useCallback(\n    (editing: boolean) => {\n      setIsEditing(editing);\n      if (editing) {\n        // Track what user is typing for validation\n        setCurrentInput(value);\n      } else {\n        // Clear tracked input\n        setCurrentInput('');\n      }\n    },\n    [value],\n  );\n\n  return (\n    <Tooltip open={Boolean(errorMessage)}>\n      <TooltipTrigger asChild>\n        <div>\n          <EditableText\n            className={cn(\n              'h-6 w-40 font-mono text-xs text-green-500 shadow-none',\n              {\n                'border-red-500 ring-1 ring-red-500 focus:border-red-500 focus:ring-red-500':\n                  Boolean(errorMessage),\n              },\n            )}\n            value={value}\n            onInputChange={handleInputChange}\n            onChange={handleChange}\n            onEditingChange={handleEditingChange}\n          />\n        </div>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\">\n        {errorMessage && <span className=\"text-xs\">{errorMessage}</span>}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"]}

package/dist/components/SqlCellResults.d.ts

@@ -0,0 +1,17 @@
+import type { PaginationState, SortingState } from '@tanstack/react-table';
+import React from 'react';
+import { CellResultData } from '../types';
+export interface SqlCellResultsProps {
+    cellId: string;
+    cellResult?: CellResultData | undefined;
+    resultName?: string;
+    isRunning?: boolean;
+    errorMessage?: string;
+    resultVersion: number;
+    fetchCellResultPage: (cellId: string, pagination: PaginationState, sorting: SortingState) => void;
+}
+/**
+ * SQL query results display with collapse/expand functionality
+ */
+export declare const SqlCellResults: React.FC<SqlCellResultsProps>;
+//# sourceMappingURL=SqlCellResults.d.ts.map

package/dist/components/SqlCellResults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellResults.d.ts","sourceRoot":"","sources":["../../src/components/SqlCellResults.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,eAAe,EAAE,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACzE,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAExC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,CACnB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,YAAY,KAClB,IAAI,CAAC;CACX;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyGxD,CAAC"}

package/dist/components/SqlCellResults.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataTablePaginated, QueryDataTableActionsMenu, useArrowDataTable, } from '@sqlrooms/data-table';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@sqlrooms/ui';
+import { CollapsibleSectionButton } from './CollapsibleSectionButton';
+/**
+ * SQL query results display with collapse/expand functionality
+ */
+export const SqlCellResults = ({ cellId, cellResult, resultName, isRunning, errorMessage, resultVersion, fetchCellResultPage, }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const arrowTableData = useArrowDataTable(cellResult?.arrowTable);
+    // Pagination and sorting state for the result table
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    // Fetch new page when pagination or sorting changes (not on initial render
+    // since executeSqlCell already fetches the first page)
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        if (resultName) {
+            fetchCellResultPage(cellId, pagination, sorting);
+        }
+    }, [pagination, sorting, cellId, fetchCellResultPage, resultName]);
+    // Reset pagination when a new result arrives (new run)
+    const prevResultVersion = useRef(resultVersion);
+    useEffect(() => {
+        if (resultVersion !== prevResultVersion.current) {
+            prevResultVersion.current = resultVersion;
+            setPagination((prev) => prev.pageIndex === 0 ? prev : { ...prev, pageIndex: 0 });
+            setSorting((prev) => (prev.length === 0 ? prev : []));
+        }
+    }, [resultVersion]);
+    if (!errorMessage && (!resultName || !arrowTableData)) {
+        return null;
+    }
+    return (_jsxs("div", { className: "group relative w-full", children: [_jsx(CollapsibleSectionButton, { isCollapsed: isCollapsed, onToggle: () => setIsCollapsed(!isCollapsed) }), isCollapsed ? (_jsx("div", { className: "ml-5 px-2 py-1 text-xs", children: errorMessage ? (_jsx("span", { className: "font-normal text-red-600", children: errorMessage })) : cellResult?.totalRows !== undefined ? (_jsxs("span", { className: "text-muted-foreground font-normal", children: [cellResult.totalRows.toLocaleString(), " rows"] })) : null })) : (_jsx(_Fragment, { children: errorMessage ? (_jsx("div", { className: "relative max-h-[400px] overflow-auto p-4", children: _jsx("span", { className: "font-mono text-xs whitespace-pre-wrap text-red-600", children: errorMessage }) })) : resultName && arrowTableData ? (_jsxs("div", { className: "relative min-h-[200px] overflow-hidden", children: [_jsx(DataTablePaginated, { className: "absolute inset-0 h-full w-full", fontSize: "text-xs", data: arrowTableData.data, columns: arrowTableData.columns, numRows: cellResult?.totalRows, pagination: pagination, onPaginationChange: setPagination, sorting: sorting, onSortingChange: setSorting, isFetching: isRunning, footerActions: _jsx(QueryDataTableActionsMenu, { query: `SELECT * FROM ${resultName}` }) }), _jsx("div", { "aria-hidden": !isRunning, className: cn('bg-background/45 pointer-events-none absolute inset-0 z-10 transition-opacity duration-200', isRunning ? 'animate-pulse opacity-100' : 'opacity-0') })] })) : null }))] }));
+};
+//# sourceMappingURL=SqlCellResults.js.map

package/dist/components/SqlCellResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlCellResults.js","sourceRoot":"","sources":["../../src/components/SqlCellResults.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAc,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAiBpE;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,MAAM,EACN,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,EACZ,aAAa,EACb,mBAAmB,GACpB,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,cAAc,GAAG,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAEjE,oDAAoD;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB;QAC5D,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IAEH,2EAA2E;IAC3E,uDAAuD;IACvD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YAC1B,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,OAAO;QACT,CAAC;QACD,IAAI,UAAU,EAAE,CAAC;YACf,mBAAmB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnE,uDAAuD;IACvD,MAAM,iBAAiB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,KAAK,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAChD,iBAAiB,CAAC,OAAO,GAAG,aAAa,CAAC;YAC1C,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CACrB,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,GAAG,IAAI,EAAE,SAAS,EAAE,CAAC,EAAC,CACtD,CAAC;YACF,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACxD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;QACtD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,wBAAwB,IACvB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,GAC5C,EACD,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,wBAAwB,YACpC,YAAY,CAAC,CAAC,CAAC,CACd,eAAM,SAAS,EAAC,0BAA0B,YAAE,YAAY,GAAQ,CACjE,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxC,gBAAM,SAAS,EAAC,mCAAmC,aAChD,UAAU,CAAC,SAAS,CAAC,cAAc,EAAE,aACjC,CACR,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAC,CAAC,CAAC,CACF,4BACG,YAAY,CAAC,CAAC,CAAC,CACd,cAAK,SAAS,EAAC,0CAA0C,YACvD,eAAM,SAAS,EAAC,oDAAoD,YACjE,YAAY,GACR,GACH,CACP,CAAC,CAAC,CAAC,UAAU,IAAI,cAAc,CAAC,CAAC,CAAC,CACjC,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,kBAAkB,IACjB,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAC,SAAS,EAClB,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAC9B,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,UAAU,EAC3B,UAAU,EAAE,SAAS,EACrB,aAAa,EACX,KAAC,yBAAyB,IACxB,KAAK,EAAE,iBAAiB,UAAU,EAAE,GACpC,GAEJ,EACF,6BACe,CAAC,SAAS,EACvB,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,WAAW,CACtD,GACD,IACE,CACP,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  DataTablePaginated,\n  QueryDataTableActionsMenu,\n  useArrowDataTable,\n} from '@sqlrooms/data-table';\nimport type {PaginationState, SortingState} from '@tanstack/react-table';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {cn} from '@sqlrooms/ui';\nimport {CollapsibleSectionButton} from './CollapsibleSectionButton';\nimport {CellResultData} from '../types';\n\nexport interface SqlCellResultsProps {\n  cellId: string;\n  cellResult?: CellResultData | undefined;\n  resultName?: string;\n  isRunning?: boolean;\n  errorMessage?: string;\n  resultVersion: number;\n  fetchCellResultPage: (\n    cellId: string,\n    pagination: PaginationState,\n    sorting: SortingState,\n  ) => void;\n}\n\n/**\n * SQL query results display with collapse/expand functionality\n */\nexport const SqlCellResults: React.FC<SqlCellResultsProps> = ({\n  cellId,\n  cellResult,\n  resultName,\n  isRunning,\n  errorMessage,\n  resultVersion,\n  fetchCellResultPage,\n}) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const arrowTableData = useArrowDataTable(cellResult?.arrowTable);\n\n  // Pagination and sorting state for the result table\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n\n  // Fetch new page when pagination or sorting changes (not on initial render\n  // since executeSqlCell already fetches the first page)\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n    if (resultName) {\n      fetchCellResultPage(cellId, pagination, sorting);\n    }\n  }, [pagination, sorting, cellId, fetchCellResultPage, resultName]);\n\n  // Reset pagination when a new result arrives (new run)\n  const prevResultVersion = useRef(resultVersion);\n  useEffect(() => {\n    if (resultVersion !== prevResultVersion.current) {\n      prevResultVersion.current = resultVersion;\n      setPagination((prev) =>\n        prev.pageIndex === 0 ? prev : {...prev, pageIndex: 0},\n      );\n      setSorting((prev) => (prev.length === 0 ? prev : []));\n    }\n  }, [resultVersion]);\n\n  if (!errorMessage && (!resultName || !arrowTableData)) {\n    return null;\n  }\n\n  return (\n    <div className=\"group relative w-full\">\n      <CollapsibleSectionButton\n        isCollapsed={isCollapsed}\n        onToggle={() => setIsCollapsed(!isCollapsed)}\n      />\n      {isCollapsed ? (\n        <div className=\"ml-5 px-2 py-1 text-xs\">\n          {errorMessage ? (\n            <span className=\"font-normal text-red-600\">{errorMessage}</span>\n          ) : cellResult?.totalRows !== undefined ? (\n            <span className=\"text-muted-foreground font-normal\">\n              {cellResult.totalRows.toLocaleString()} rows\n            </span>\n          ) : null}\n        </div>\n      ) : (\n        <>\n          {errorMessage ? (\n            <div className=\"relative max-h-[400px] overflow-auto p-4\">\n              <span className=\"font-mono text-xs whitespace-pre-wrap text-red-600\">\n                {errorMessage}\n              </span>\n            </div>\n          ) : resultName && arrowTableData ? (\n            <div className=\"relative min-h-[200px] overflow-hidden\">\n              <DataTablePaginated\n                className=\"absolute inset-0 h-full w-full\"\n                fontSize=\"text-xs\"\n                data={arrowTableData.data}\n                columns={arrowTableData.columns}\n                numRows={cellResult?.totalRows}\n                pagination={pagination}\n                onPaginationChange={setPagination}\n                sorting={sorting}\n                onSortingChange={setSorting}\n                isFetching={isRunning}\n                footerActions={\n                  <QueryDataTableActionsMenu\n                    query={`SELECT * FROM ${resultName}`}\n                  />\n                }\n              />\n              <div\n                aria-hidden={!isRunning}\n                className={cn(\n                  'bg-background/45 pointer-events-none absolute inset-0 z-10 transition-opacity duration-200',\n                  isRunning ? 'animate-pulse opacity-100' : 'opacity-0',\n                )}\n              />\n            </div>\n          ) : null}\n        </>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/components/SqlCellRunButton.d.ts

@@ -1,17 +1,16 @@
+import { type RunButtonProps } from '@sqlrooms/ui';
 import { SqlCellRunStatus } from '../types';
-/**
- * Props for the standalone run/cancel control used by SQL cells.
- */
 type SqlCellRunButtonProps = {
     onRun: () => void;
     onCancel?: () => void;
     status?: SqlCellRunStatus;
     runLabel?: string;
     disabled?: boolean;
-};
+} & Pick<RunButtonProps, 'variant' | 'cancelVariant' | 'className'>;
 /**
- * Renders the run/cancel control for a SQL cell and shows error feedback.
+ * Renders the run/cancel control for a SQL cell.
+ * Thin wrapper that maps {@link SqlCellRunStatus} to {@link RunQueryButton} state.
  */
-export declare function SqlCellRunButton({ onRun, onCancel, status, runLabel, disabled, }: SqlCellRunButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlCellRunButton({ onRun, onCancel, status, runLabel, disabled, ...rest }: SqlCellRunButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SqlCellRunButton.d.ts.map

package/dist/components/SqlCellRunButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SqlCellRunButton.d.ts","sourceRoot":"","sources":["../../src/components/SqlCellRunButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C;;GAEG;AACH,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,GACT,EAAE,qBAAqB,2CA6BvB"}
+{"version":3,"file":"SqlCellRunButton.d.ts","sourceRoot":"","sources":["../../src/components/SqlCellRunButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,eAAe,GAAG,WAAW,CAAC,CAAC;AAEpE;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAkBvB"}

package/dist/components/SqlCellRunButton.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Spinner } from '@sqlrooms/ui';
-import { Play } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RunButton } from '@sqlrooms/ui';
 /**
- * Renders the run/cancel control for a SQL cell and shows error feedback.
+ * Renders the run/cancel control for a SQL cell.
+ * Thin wrapper that maps {@link SqlCellRunStatus} to {@link RunQueryButton} state.
  */
-export function SqlCellRunButton({ onRun, onCancel, status, runLabel = 'Run', disabled, }) {
-    const showCancel = status?.state === 'running' && Boolean(onCancel);
-    return (_jsx("div", { className: "flex items-center gap-2", children: showCancel ? (_jsxs(Button, { size: "xs", variant: "destructive", className: "flex h-7 w-20 gap-1", onClick: onCancel, children: [_jsx(Spinner, {}), "Cancel"] })) : (_jsxs(Button, { size: "xs", variant: "secondary", className: "flex h-7 w-20 gap-1", onClick: onRun, disabled: disabled, children: [_jsx(Play, { className: "h-3 w-3" }), runLabel] })) }));
+export function SqlCellRunButton({ onRun, onCancel, status, runLabel, disabled, ...rest }) {
+    const state = status?.state === 'running'
+        ? 'running'
+        : status?.state === 'cancel'
+            ? 'cancelling'
+            : 'idle';
+    return (_jsx(RunButton, { state: state, onRun: onRun, onCancel: onCancel, runLabel: runLabel, disabled: disabled, ...rest }));
 }
 //# sourceMappingURL=SqlCellRunButton.js.map

package/dist/components/SqlCellRunButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SqlCellRunButton.js","sourceRoot":"","sources":["../../src/components/SqlCellRunButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAalC;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACc;IACtB,MAAM,UAAU,GAAG,MAAM,EAAE,KAAK,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpE,OAAO,CACL,cAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,CAAC,CAAC,CAAC,CACZ,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,aAAa,EACrB,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,QAAQ,aAEjB,KAAC,OAAO,KAAG,cAEJ,CACV,CAAC,CAAC,CAAC,CACF,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,QAAQ,aAElB,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC3B,QAAQ,IACF,CACV,GACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {Button, Spinner} from '@sqlrooms/ui';\nimport {Play} from 'lucide-react';\nimport {SqlCellRunStatus} from '../types';\n\n/**\n * Props for the standalone run/cancel control used by SQL cells.\n */\ntype SqlCellRunButtonProps = {\n  onRun: () => void;\n  onCancel?: () => void;\n  status?: SqlCellRunStatus;\n  runLabel?: string;\n  disabled?: boolean;\n};\n/**\n * Renders the run/cancel control for a SQL cell and shows error feedback.\n */\nexport function SqlCellRunButton({\n  onRun,\n  onCancel,\n  status,\n  runLabel = 'Run',\n  disabled,\n}: SqlCellRunButtonProps) {\n  const showCancel = status?.state === 'running' && Boolean(onCancel);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {showCancel ? (\n        <Button\n          size=\"xs\"\n          variant=\"destructive\"\n          className=\"flex h-7 w-20 gap-1\"\n          onClick={onCancel}\n        >\n          <Spinner />\n          Cancel\n        </Button>\n      ) : (\n        <Button\n          size=\"xs\"\n          variant=\"secondary\"\n          className=\"flex h-7 w-20 gap-1\"\n          onClick={onRun}\n          disabled={disabled}\n        >\n          <Play className=\"h-3 w-3\" />\n          {runLabel}\n        </Button>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SqlCellRunButton.js","sourceRoot":"","sources":["../../src/components/SqlCellRunButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAsB,MAAM,cAAc,CAAC;AAW5D;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACe;IACtB,MAAM,KAAK,GACT,MAAM,EAAE,KAAK,KAAK,SAAS;QACzB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,MAAM,CAAC;IAEf,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,IAAI,GACR,CACH,CAAC;AACJ,CAAC","sourcesContent":["import {RunButton, type RunButtonProps} from '@sqlrooms/ui';\nimport {SqlCellRunStatus} from '../types';\n\ntype SqlCellRunButtonProps = {\n  onRun: () => void;\n  onCancel?: () => void;\n  status?: SqlCellRunStatus;\n  runLabel?: string;\n  disabled?: boolean;\n} & Pick<RunButtonProps, 'variant' | 'cancelVariant' | 'className'>;\n\n/**\n * Renders the run/cancel control for a SQL cell.\n * Thin wrapper that maps {@link SqlCellRunStatus} to {@link RunQueryButton} state.\n */\nexport function SqlCellRunButton({\n  onRun,\n  onCancel,\n  status,\n  runLabel,\n  disabled,\n  ...rest\n}: SqlCellRunButtonProps) {\n  const state =\n    status?.state === 'running'\n      ? 'running'\n      : status?.state === 'cancel'\n        ? 'cancelling'\n        : 'idle';\n\n  return (\n    <RunButton\n      state={state}\n      onRun={onRun}\n      onCancel={onCancel}\n      runLabel={runLabel}\n      disabled={disabled}\n      {...rest}\n    />\n  );\n}\n"]}

package/dist/components/SqlQueryPreview.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SqlQueryPreviewProps {
+    sql: string;
+}
+/**
+ * Shows a preview of SQL code - displays first non-empty line with "..." if more lines exist
+ */
+export declare const SqlQueryPreview: React.FC<SqlQueryPreviewProps>;
+//# sourceMappingURL=SqlQueryPreview.d.ts.map

package/dist/components/SqlQueryPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlQueryPreview.d.ts","sourceRoot":"","sources":["../../src/components/SqlQueryPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgB1D,CAAC"}

package/dist/components/SqlQueryPreview.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { getSqlQueryPreview } from '../utils';
+/**
+ * Shows a preview of SQL code - displays first non-empty line with "..." if more lines exist
+ */
+export const SqlQueryPreview = ({ sql }) => {
+    const { firstLine, hasMoreLines } = useMemo(() => getSqlQueryPreview(sql), [sql]);
+    if (!firstLine) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate font-mono", children: firstLine }), hasMoreLines && _jsx("span", { className: "ml-1", children: "..." })] }));
+};
+//# sourceMappingURL=SqlQueryPreview.js.map

package/dist/components/SqlQueryPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlQueryPreview.js","sourceRoot":"","sources":["../../src/components/SqlQueryPreview.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,kBAAkB,EAAC,MAAM,UAAU,CAAC;AAM5C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAC,GAAG,EAAC,EAAE,EAAE;IACvE,MAAM,EAAC,SAAS,EAAE,YAAY,EAAC,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAC7B,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACtD,YAAY,IAAI,eAAM,SAAS,EAAC,MAAM,oBAAW,IACjD,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, {useMemo} from 'react';\nimport {getSqlQueryPreview} from '../utils';\n\nexport interface SqlQueryPreviewProps {\n  sql: string;\n}\n\n/**\n * Shows a preview of SQL code - displays first non-empty line with \"...\" if more lines exist\n */\nexport const SqlQueryPreview: React.FC<SqlQueryPreviewProps> = ({sql}) => {\n  const {firstLine, hasMoreLines} = useMemo(\n    () => getSqlQueryPreview(sql),\n    [sql],\n  );\n\n  if (!firstLine) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"truncate font-mono\">{firstLine}</span>\n      {hasMoreLines && <span className=\"ml-1\">...</span>}\n    </>\n  );\n};\n"]}

package/dist/components/TextCellContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextCellContent.d.ts","sourceRoot":"","sources":["../../src/components/TextCellContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAC,kBAAkB,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAC;AAG3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgE1D,CAAC"}
+{"version":3,"file":"TextCellContent.d.ts","sourceRoot":"","sources":["../../src/components/TextCellContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,KAAK,EAAC,kBAAkB,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAC;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwE1D,CAAC"}

package/dist/components/TextCellContent.js

@@ -1,26 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { produce } from 'immer';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Markdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
-import { Button } from '@sqlrooms/ui';
 import { useCellsStore } from '../hooks';
-import { produce } from 'immer';
 export const TextCellContent = ({ id, cell, renderContainer, }) => {
     const updateCell = useCellsStore((s) => s.cells.updateCell);
     const [isEditing, setIsEditing] = useState(false);
     const [draftText, setDraftText] = useState(cell.data.text);
+    const textareaRef = useRef(null);
     const saveText = useCallback(() => {
-        updateCell(id, (c) => produce(c, (draft) => {
+        updateCell(id, (cell) => produce(cell, (draft) => {
             if (draft.type === 'text') {
                 draft.data.text = draftText;
             }
         }));
         setIsEditing(false);
     }, [id, draftText, updateCell]);
-    const header = (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "xs", variant: "secondary", className: "h-6", onClick: () => (isEditing ? saveText() : setIsEditing(true)), children: isEditing ? 'Save' : 'Edit text' }), _jsx("span", { className: "text-[10px] font-bold uppercase text-gray-400", children: "Text" })] }));
-    const content = (_jsxs("div", { className: "flex min-h-[100px] flex-col divide-y dark:divide-gray-800", onDoubleClick: () => setIsEditing((prev) => !prev), children: [isEditing && (_jsx("textarea", { className: "bg-accent min-h-[100px] w-full p-3 text-xs outline-none", value: draftText, onChange: (e) => setDraftText(e.target.value), placeholder: "Write text... (Markdown supported)", autoFocus: true })), !isEditing && (_jsx("div", { className: "prose dark:prose-invert max-w-none flex-1 p-3 text-sm", children: _jsx(Markdown, { remarkPlugins: [remarkGfm], children: cell.data.text || '_No content yet. Double click to edit._' }) }))] }));
+    const cancelEdit = useCallback(() => {
+        setDraftText(cell.data.text);
+        setIsEditing(false);
+    }, [cell.data.text]);
+    // Auto-resize textarea
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (textarea && isEditing) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+    }, [draftText, isEditing]);
+    const content = (_jsxs("div", { className: "flex flex-col divide-y dark:divide-gray-800", onDoubleClick: () => !isEditing && setIsEditing(true), children: [isEditing && (_jsx("textarea", { ref: textareaRef, className: "bg-accent w-full resize-none overflow-hidden p-3 text-sm leading-relaxed outline-none", value: draftText, onChange: (e) => setDraftText(e.target.value), placeholder: "Write text... (Markdown supported)", autoFocus: true, onBlur: saveText, rows: 1, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        cancelEdit();
+                    }
+                } })), !isEditing && (_jsx("div", { className: "prose dark:prose-invert max-w-none flex-1 p-3 text-sm", children: _jsx(Markdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: cell.data.text || '_No content yet. Double click to edit._' }) }))] }));
     return renderContainer({
-        header,
+        showHeader: false,
         content,
     });
 };

package/dist/components/TextCellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCellContent.js","sourceRoot":"","sources":["../../src/components/TextCellContent.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,MAAM,EAAK,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAQ9B,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,EAAE,EACF,IAAI,EACJ,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CACnB,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CACH,CAAC;QACF,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,CACb,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,YAE3D,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,GAC1B,EACT,eAAM,SAAS,EAAC,+CAA+C,qBAExD,IACH,CACP,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,eACE,SAAS,EAAC,2DAA2D,EACrE,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAEjD,SAAS,IAAI,CACZ,mBACE,SAAS,EAAC,yDAAyD,EACnE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,WAAW,EAAC,oCAAoC,EAChD,SAAS,SACT,CACH,EACA,CAAC,SAAS,IAAI,CACb,cAAK,SAAS,EAAC,uDAAuD,YACpE,KAAC,QAAQ,IAAC,aAAa,EAAE,CAAC,SAAS,CAAC,YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,yCAAyC,GACnD,GACP,CACP,IACG,CACP,CAAC;IAEF,OAAO,eAAe,CAAC;QACrB,MAAM;QACN,OAAO;KACR,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import React, {useState, useCallback} from 'react';\nimport Markdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport {Button, cn} from '@sqlrooms/ui';\nimport {useCellsStore} from '../hooks';\nimport type {CellContainerProps, TextCell} from '../types';\nimport {produce} from 'immer';\n\nexport type TextCellContentProps = {\n  id: string;\n  cell: TextCell;\n  renderContainer: (props: CellContainerProps) => React.ReactElement;\n};\n\nexport const TextCellContent: React.FC<TextCellContentProps> = ({\n  id,\n  cell,\n  renderContainer,\n}) => {\n  const updateCell = useCellsStore((s) => s.cells.updateCell);\n  const [isEditing, setIsEditing] = useState(false);\n  const [draftText, setDraftText] = useState(cell.data.text);\n\n  const saveText = useCallback(() => {\n    updateCell(id, (c) =>\n      produce(c, (draft) => {\n        if (draft.type === 'text') {\n          draft.data.text = draftText;\n        }\n      }),\n    );\n    setIsEditing(false);\n  }, [id, draftText, updateCell]);\n\n  const header = (\n    <div className=\"flex items-center gap-2\">\n      <Button\n        size=\"xs\"\n        variant=\"secondary\"\n        className=\"h-6\"\n        onClick={() => (isEditing ? saveText() : setIsEditing(true))}\n      >\n        {isEditing ? 'Save' : 'Edit text'}\n      </Button>\n      <span className=\"text-[10px] font-bold uppercase text-gray-400\">\n        Text\n      </span>\n    </div>\n  );\n\n  const content = (\n    <div\n      className=\"flex min-h-[100px] flex-col divide-y dark:divide-gray-800\"\n      onDoubleClick={() => setIsEditing((prev) => !prev)}\n    >\n      {isEditing && (\n        <textarea\n          className=\"bg-accent min-h-[100px] w-full p-3 text-xs outline-none\"\n          value={draftText}\n          onChange={(e) => setDraftText(e.target.value)}\n          placeholder=\"Write text... (Markdown supported)\"\n          autoFocus\n        />\n      )}\n      {!isEditing && (\n        <div className=\"prose dark:prose-invert max-w-none flex-1 p-3 text-sm\">\n          <Markdown remarkPlugins={[remarkGfm]}>\n            {cell.data.text || '_No content yet. Double click to edit._'}\n          </Markdown>\n        </div>\n      )}\n    </div>\n  );\n\n  return renderContainer({\n    header,\n    content,\n  });\n};\n"]}
+{"version":3,"file":"TextCellContent.js","sourceRoot":"","sources":["../../src/components/TextCellContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import {produce} from 'immer';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport Markdown from 'react-markdown';\nimport remarkBreaks from 'remark-breaks';\nimport remarkGfm from 'remark-gfm';\nimport {useCellsStore} from '../hooks';\nimport type {CellContainerProps, TextCell} from '../types';\n\nexport type TextCellContentProps = {\n  id: string;\n  cell: TextCell;\n  renderContainer: (props: CellContainerProps) => React.ReactElement;\n};\n\nexport const TextCellContent: React.FC<TextCellContentProps> = ({\n  id,\n  cell,\n  renderContainer,\n}) => {\n  const updateCell = useCellsStore((s) => s.cells.updateCell);\n  const [isEditing, setIsEditing] = useState(false);\n  const [draftText, setDraftText] = useState(cell.data.text);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const saveText = useCallback(() => {\n    updateCell(id, (cell) =>\n      produce(cell, (draft) => {\n        if (draft.type === 'text') {\n          draft.data.text = draftText;\n        }\n      }),\n    );\n    setIsEditing(false);\n  }, [id, draftText, updateCell]);\n\n  const cancelEdit = useCallback(() => {\n    setDraftText(cell.data.text);\n    setIsEditing(false);\n  }, [cell.data.text]);\n\n  // Auto-resize textarea\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    if (textarea && isEditing) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n    }\n  }, [draftText, isEditing]);\n\n  const content = (\n    <div\n      className=\"flex flex-col divide-y dark:divide-gray-800\"\n      onDoubleClick={() => !isEditing && setIsEditing(true)}\n    >\n      {isEditing && (\n        <textarea\n          ref={textareaRef}\n          className=\"bg-accent w-full resize-none overflow-hidden p-3 text-sm leading-relaxed outline-none\"\n          value={draftText}\n          onChange={(e) => setDraftText(e.target.value)}\n          placeholder=\"Write text... (Markdown supported)\"\n          autoFocus\n          onBlur={saveText}\n          rows={1}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') {\n              e.preventDefault();\n              cancelEdit();\n            }\n          }}\n        />\n      )}\n      {!isEditing && (\n        <div className=\"prose dark:prose-invert max-w-none flex-1 p-3 text-sm\">\n          <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>\n            {cell.data.text || '_No content yet. Double click to edit._'}\n          </Markdown>\n        </div>\n      )}\n    </div>\n  );\n\n  return renderContainer({\n    showHeader: false,\n    content,\n  });\n};\n"]}

package/dist/components/VegaCellContent.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { CellContainerProps, VegaCell } from '../types';
 export type VegaCellContentProps = {
     id: string;

package/dist/components/VegaCellContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaCellContent.d.ts","sourceRoot":"","sources":["../../src/components/VegaCellContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAO,kBAAkB,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAC;AAGjE,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyI1D,CAAC"}
+{"version":3,"file":"VegaCellContent.d.ts","sourceRoot":"","sources":["../../src/components/VegaCellContent.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,kBAAkB,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAC;AAY3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyF1D,CAAC"}

package/dist/components/VegaCellContent.js

@@ -1,63 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@sqlrooms/ui';
+import { useDebouncedValue } from '@sqlrooms/ui';
 import { VegaLiteChart } from '@sqlrooms/vega';
 import { produce } from 'immer';
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useCellsStore } from '../hooks';
+import { useVegaCellQuery } from '../hooks/useVegaCellQuery';
+import { useVegaCellDataSource } from '../hooks/useVegaCellDataSource';
 import { VegaConfigPanel } from './VegaConfigPanel';
+import { VegaCellHeader } from './VegaCellHeader';
+import { toDataSourceCell, toDataSourceTable } from '../helpers';
+const DEFAULT_ASPECT_RATIO = 3 / 2;
+const DEFAULT_SPEC = {
+    data: { name: 'queryResult' },
+    mark: 'bar',
+    padding: 20,
+};
 export const VegaCellContent = ({ id, cell, renderContainer, }) => {
     const updateCell = useCellsStore((s) => s.cells.updateCell);
-    const cellsData = useCellsStore((s) => s.cells.config.data);
-    const cellsStatus = useCellsStore((s) => s.cells.status);
-    // Find available SQL cells in the same sheet
-    const currentSheetId = useCellsStore((s) => s.cells.config.currentSheetId);
-    const sheetCellIds = useCellsStore((s) => currentSheetId ? s.cells.config.sheets[currentSheetId]?.cellIds : undefined);
-    const availableSqlCells = useMemo(() => {
-        if (!sheetCellIds)
-            return [];
-        return sheetCellIds
-            .map((cid) => cellsData[cid])
-            .filter((c) => c?.type === 'sql');
-    }, [sheetCellIds, cellsData]);
-    const selectedSqlId = cell.data.sqlId;
-    const selectedSqlStatus = selectedSqlId
-        ? cellsStatus[selectedSqlId]
-        : undefined;
-    const [draftSpec, setDraftSpec] = useState(cell.data.vegaSpec ?? {
-        data: { name: 'queryResult' },
-        mark: 'bar',
-        padding: 20,
-    });
     const [isEditing, setIsEditing] = useState(false);
-    const selectedSqlQuery = selectedSqlStatus?.type === 'sql' && selectedSqlStatus.resultView
-        ? `SELECT * FROM ${selectedSqlStatus.resultView}`
-        : selectedSqlId && cellsData[selectedSqlId]?.type === 'sql'
-            ? cellsData[selectedSqlId].data.sql
-            : '';
-    const lastRunTime = selectedSqlStatus?.type === 'sql'
-        ? selectedSqlStatus.lastRunTime
-        : undefined;
-    const handleSqlIdChange = (value) => {
-        updateCell(id, (c) => produce(c, (draft) => {
-            if (draft.type === 'vega')
-                draft.data.sqlId = value;
-        }));
-    };
-    const saveSpec = useCallback(() => {
+    // Local state with debounced persistence
+    const [localSpec, handleSpecChange] = useDebouncedValue(cell.data.vegaSpec ?? DEFAULT_SPEC, (spec) => {
         updateCell(id, (c) => produce(c, (draft) => {
             if (draft.type === 'vega')
-                draft.data.vegaSpec = draftSpec;
+                draft.data.vegaSpec = spec;
         }));
-        setIsEditing(false);
-    }, [id, draftSpec, updateCell]);
-    const header = (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: selectedSqlId, onValueChange: handleSqlIdChange, children: [_jsx(SelectTrigger, { className: "h-6 w-[150px] text-xs shadow-none", children: _jsx(SelectValue, { placeholder: "Select data source" }) }), _jsx(SelectContent, { onCloseAutoFocus: (e) => e.preventDefault(), children: availableSqlCells.map((sql) => (_jsx(SelectItem, { className: "text-xs", value: sql.id, children: sql.data.title }, sql.id))) })] }), _jsx(Button, { size: "xs", variant: "secondary", className: "h-6", onClick: () => (isEditing ? saveSpec() : setIsEditing(true)), disabled: !selectedSqlId, children: isEditing ? 'Save' : 'Edit chart' }), _jsx("span", { className: "text-[10px] font-bold uppercase text-gray-400", children: "Vega" })] }));
-    const content = (_jsxs("div", { className: "flex h-[400px]", children: [isEditing && (_jsx(VegaConfigPanel, { sqlQuery: selectedSqlQuery, lastRunTime: lastRunTime, spec: draftSpec, onSpecChange: setDraftSpec })), _jsx("div", { onDoubleClick: () => selectedSqlId && setIsEditing((prev) => !prev), className: "flex h-full w-full p-2", children: !selectedSqlId ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-400", children: "Please select a SQL data source first." })) : !selectedSqlStatus ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-400", children: "No chart data available, please run the SQL cell first." })) : (_jsx(VegaLiteChart, { sqlQuery: selectedSqlQuery, 
-                    // isLoading={
-                    //   selectedSqlStatus?.type === 'sql' &&
-                    //   selectedSqlStatus.status === 'running'
-                    // }
-                    // lastRunTime={lastRunTime}
-                    spec: draftSpec, className: "h-full w-full", aspectRatio: isEditing ? undefined : 3 / 2 })) })] }));
+    }, 300);
+    const { selectedSqlId, selectedTableRef, selectedSqlStatus, baseSqlQuery, lastRunTime, hasDataSource, } = useVegaCellDataSource(cell);
+    const { selectedSqlQuery } = useVegaCellQuery({
+        baseSqlQuery,
+    });
+    // Encode selection value: "cell:<id>" or "table:<schema.table>"
+    const selectValue = selectedSqlId
+        ? toDataSourceCell(selectedSqlId)
+        : selectedTableRef
+            ? toDataSourceTable(selectedTableRef)
+            : undefined;
+    const header = (_jsx(VegaCellHeader, { cellId: id, selectValue: selectValue, onEditToggle: () => setIsEditing((prev) => !prev), hasDataSource: hasDataSource }));
+    const content = (_jsxs("div", { className: "flex h-[400px]", children: [isEditing && (_jsx(VegaConfigPanel, { sqlQuery: baseSqlQuery, lastRunTime: lastRunTime, spec: localSpec, onSpecChange: handleSpecChange })), _jsx("div", { onDoubleClick: () => hasDataSource && setIsEditing((prev) => !prev), className: "flex h-full w-full p-2", children: !hasDataSource ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-400", children: "Please select a data source first." })) : !selectedSqlStatus && !selectedTableRef ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-400", children: "No chart data available, please run the SQL cell first." })) : (_jsx(VegaLiteChart, { sqlQuery: selectedSqlQuery, spec: localSpec, className: "h-full w-full", aspectRatio: isEditing ? undefined : DEFAULT_ASPECT_RATIO })) })] }));
     return renderContainer({
         header,
         content,

package/dist/components/VegaCellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaCellContent.js","sourceRoot":"","sources":["../../src/components/VegaCellContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAc,EAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAQlD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,EAAE,EACF,IAAI,EACJ,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzD,6CAA6C;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAC3E,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CACvC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAC5E,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,YAAY;YAAE,OAAO,EAAE,CAAC;QAC7B,OAAO,YAAY;aAChB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;aAC5B,MAAM,CAAC,CAAC,CAAC,EAA6B,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACtC,MAAM,iBAAiB,GAAG,aAAa;QACrC,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC;QAC5B,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI;QACpB,IAAI,EAAE,EAAC,IAAI,EAAE,aAAa,EAAC;QAC3B,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,EAAE;KACZ,CACF,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,gBAAgB,GACpB,iBAAiB,EAAE,IAAI,KAAK,KAAK,IAAI,iBAAiB,CAAC,UAAU;QAC/D,CAAC,CAAC,iBAAiB,iBAAiB,CAAC,UAAU,EAAE;QACjD,CAAC,CAAC,aAAa,IAAI,SAAS,CAAC,aAAa,CAAC,EAAE,IAAI,KAAK,KAAK;YACzD,CAAC,CAAE,SAAS,CAAC,aAAa,CAAS,CAAC,IAAI,CAAC,GAAG;YAC5C,CAAC,CAAC,EAAE,CAAC;IAEX,MAAM,WAAW,GACf,iBAAiB,EAAE,IAAI,KAAK,KAAK;QAC/B,CAAC,CAAC,iBAAiB,CAAC,WAAW;QAC/B,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CACnB,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACtD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CACnB,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM;gBAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC7D,CAAC,CAAC,CACH,CAAC;QACF,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,CACb,eAAK,SAAS,EAAC,yBAAyB,aACtC,MAAC,MAAM,IAAC,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,iBAAiB,aAC5D,KAAC,aAAa,IAAC,SAAS,EAAC,mCAAmC,YAC1D,KAAC,WAAW,IAAC,WAAW,EAAC,oBAAoB,GAAG,GAClC,EAChB,KAAC,aAAa,IAAC,gBAAgB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,YACvD,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC9B,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,EAAc,KAAK,EAAE,GAAG,CAAC,EAAE,YACvD,GAAG,CAAC,IAAI,CAAC,KAAK,IADoB,GAAG,CAAC,EAAE,CAE9B,CACd,CAAC,GACY,IACT,EACT,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAC5D,QAAQ,EAAE,CAAC,aAAa,YAEvB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,GAC3B,EACT,eAAM,SAAS,EAAC,+CAA+C,qBAExD,IACH,CACP,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,eAAK,SAAS,EAAC,gBAAgB,aAC5B,SAAS,IAAI,CACZ,KAAC,eAAe,IACd,QAAQ,EAAE,gBAAgB,EAC1B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,YAAY,GAC1B,CACH,EACD,cACE,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,IAAI,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EACnE,SAAS,EAAC,wBAAwB,YAEjC,CAAC,aAAa,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAC,8DAA8D,uDAEvE,CACP,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACvB,cAAK,SAAS,EAAC,8DAA8D,wEAEvE,CACP,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IACZ,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc;oBACd,yCAAyC;oBACzC,2CAA2C;oBAC3C,IAAI;oBACJ,4BAA4B;oBAC5B,IAAI,EAAE,SAAS,EACf,SAAS,EAAC,eAAe,EACzB,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAC1C,CACH,GACG,IACF,CACP,CAAC;IAEF,OAAO,eAAe,CAAC;QACrB,MAAM;QACN,OAAO;KACR,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import {\n  Button,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@sqlrooms/ui';\nimport {VegaLiteChart} from '@sqlrooms/vega';\nimport {produce} from 'immer';\nimport React, {useCallback, useMemo, useState} from 'react';\nimport {useCellsStore} from '../hooks';\nimport type {Cell, CellContainerProps, VegaCell} from '../types';\nimport {VegaConfigPanel} from './VegaConfigPanel';\n\nexport type VegaCellContentProps = {\n  id: string;\n  cell: VegaCell;\n  renderContainer: (props: CellContainerProps) => React.ReactElement;\n};\n\nexport const VegaCellContent: React.FC<VegaCellContentProps> = ({\n  id,\n  cell,\n  renderContainer,\n}) => {\n  const updateCell = useCellsStore((s) => s.cells.updateCell);\n  const cellsData = useCellsStore((s) => s.cells.config.data);\n  const cellsStatus = useCellsStore((s) => s.cells.status);\n\n  // Find available SQL cells in the same sheet\n  const currentSheetId = useCellsStore((s) => s.cells.config.currentSheetId);\n  const sheetCellIds = useCellsStore((s) =>\n    currentSheetId ? s.cells.config.sheets[currentSheetId]?.cellIds : undefined,\n  );\n\n  const availableSqlCells = useMemo(() => {\n    if (!sheetCellIds) return [];\n    return sheetCellIds\n      .map((cid) => cellsData[cid])\n      .filter((c): c is Cell & {type: 'sql'} => c?.type === 'sql');\n  }, [sheetCellIds, cellsData]);\n\n  const selectedSqlId = cell.data.sqlId;\n  const selectedSqlStatus = selectedSqlId\n    ? cellsStatus[selectedSqlId]\n    : undefined;\n\n  const [draftSpec, setDraftSpec] = useState(\n    cell.data.vegaSpec ?? {\n      data: {name: 'queryResult'},\n      mark: 'bar',\n      padding: 20,\n    },\n  );\n  const [isEditing, setIsEditing] = useState(false);\n\n  const selectedSqlQuery =\n    selectedSqlStatus?.type === 'sql' && selectedSqlStatus.resultView\n      ? `SELECT * FROM ${selectedSqlStatus.resultView}`\n      : selectedSqlId && cellsData[selectedSqlId]?.type === 'sql'\n        ? (cellsData[selectedSqlId] as any).data.sql\n        : '';\n\n  const lastRunTime =\n    selectedSqlStatus?.type === 'sql'\n      ? selectedSqlStatus.lastRunTime\n      : undefined;\n\n  const handleSqlIdChange = (value: string) => {\n    updateCell(id, (c) =>\n      produce(c, (draft) => {\n        if (draft.type === 'vega') draft.data.sqlId = value;\n      }),\n    );\n  };\n\n  const saveSpec = useCallback(() => {\n    updateCell(id, (c) =>\n      produce(c, (draft) => {\n        if (draft.type === 'vega') draft.data.vegaSpec = draftSpec;\n      }),\n    );\n    setIsEditing(false);\n  }, [id, draftSpec, updateCell]);\n\n  const header = (\n    <div className=\"flex items-center gap-2\">\n      <Select value={selectedSqlId} onValueChange={handleSqlIdChange}>\n        <SelectTrigger className=\"h-6 w-[150px] text-xs shadow-none\">\n          <SelectValue placeholder=\"Select data source\" />\n        </SelectTrigger>\n        <SelectContent onCloseAutoFocus={(e) => e.preventDefault()}>\n          {availableSqlCells.map((sql) => (\n            <SelectItem className=\"text-xs\" key={sql.id} value={sql.id}>\n              {sql.data.title}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <Button\n        size=\"xs\"\n        variant=\"secondary\"\n        className=\"h-6\"\n        onClick={() => (isEditing ? saveSpec() : setIsEditing(true))}\n        disabled={!selectedSqlId}\n      >\n        {isEditing ? 'Save' : 'Edit chart'}\n      </Button>\n      <span className=\"text-[10px] font-bold uppercase text-gray-400\">\n        Vega\n      </span>\n    </div>\n  );\n\n  const content = (\n    <div className=\"flex h-[400px]\">\n      {isEditing && (\n        <VegaConfigPanel\n          sqlQuery={selectedSqlQuery}\n          lastRunTime={lastRunTime}\n          spec={draftSpec}\n          onSpecChange={setDraftSpec}\n        />\n      )}\n      <div\n        onDoubleClick={() => selectedSqlId && setIsEditing((prev) => !prev)}\n        className=\"flex h-full w-full p-2\"\n      >\n        {!selectedSqlId ? (\n          <div className=\"flex h-full w-full items-center justify-center text-gray-400\">\n            Please select a SQL data source first.\n          </div>\n        ) : !selectedSqlStatus ? (\n          <div className=\"flex h-full w-full items-center justify-center text-gray-400\">\n            No chart data available, please run the SQL cell first.\n          </div>\n        ) : (\n          <VegaLiteChart\n            sqlQuery={selectedSqlQuery}\n            // isLoading={\n            //   selectedSqlStatus?.type === 'sql' &&\n            //   selectedSqlStatus.status === 'running'\n            // }\n            // lastRunTime={lastRunTime}\n            spec={draftSpec}\n            className=\"h-full w-full\"\n            aspectRatio={isEditing ? undefined : 3 / 2}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  return renderContainer({\n    header,\n    content,\n  });\n};\n"]}
+{"version":3,"file":"VegaCellContent.js","sourceRoot":"","sources":["../../src/components/VegaCellContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useDebouncedValue} from '@sqlrooms/ui';\nimport {VegaLiteChart} from '@sqlrooms/vega';\nimport {produce} from 'immer';\nimport {useState} from 'react';\nimport {useCellsStore} from '../hooks';\nimport {useVegaCellQuery} from '../hooks/useVegaCellQuery';\nimport {useVegaCellDataSource} from '../hooks/useVegaCellDataSource';\nimport type {CellContainerProps, VegaCell} from '../types';\nimport {VegaConfigPanel} from './VegaConfigPanel';\nimport {VegaCellHeader} from './VegaCellHeader';\nimport {toDataSourceCell, toDataSourceTable} from '../helpers';\n\nconst DEFAULT_ASPECT_RATIO = 3 / 2;\nconst DEFAULT_SPEC = {\n  data: {name: 'queryResult'},\n  mark: 'bar',\n  padding: 20,\n} as const;\n\nexport type VegaCellContentProps = {\n  id: string;\n  cell: VegaCell;\n  renderContainer: (props: CellContainerProps) => React.ReactElement;\n};\n\nexport const VegaCellContent: React.FC<VegaCellContentProps> = ({\n  id,\n  cell,\n  renderContainer,\n}) => {\n  const updateCell = useCellsStore((s) => s.cells.updateCell);\n\n  const [isEditing, setIsEditing] = useState(false);\n\n  // Local state with debounced persistence\n  const [localSpec, handleSpecChange] = useDebouncedValue(\n    cell.data.vegaSpec ?? DEFAULT_SPEC,\n    (spec) => {\n      updateCell(id, (c) =>\n        produce(c, (draft) => {\n          if (draft.type === 'vega') draft.data.vegaSpec = spec;\n        }),\n      );\n    },\n    300,\n  );\n\n  const {\n    selectedSqlId,\n    selectedTableRef,\n    selectedSqlStatus,\n    baseSqlQuery,\n    lastRunTime,\n    hasDataSource,\n  } = useVegaCellDataSource(cell);\n\n  const {selectedSqlQuery} = useVegaCellQuery({\n    baseSqlQuery,\n  });\n\n  // Encode selection value: \"cell:<id>\" or \"table:<schema.table>\"\n  const selectValue = selectedSqlId\n    ? toDataSourceCell(selectedSqlId)\n    : selectedTableRef\n      ? toDataSourceTable(selectedTableRef)\n      : undefined;\n\n  const header = (\n    <VegaCellHeader\n      cellId={id}\n      selectValue={selectValue}\n      onEditToggle={() => setIsEditing((prev) => !prev)}\n      hasDataSource={hasDataSource}\n    />\n  );\n\n  const content = (\n    <div className=\"flex h-[400px]\">\n      {isEditing && (\n        <VegaConfigPanel\n          sqlQuery={baseSqlQuery}\n          lastRunTime={lastRunTime}\n          spec={localSpec}\n          onSpecChange={handleSpecChange}\n        />\n      )}\n      <div\n        onDoubleClick={() => hasDataSource && setIsEditing((prev) => !prev)}\n        className=\"flex h-full w-full p-2\"\n      >\n        {!hasDataSource ? (\n          <div className=\"flex h-full w-full items-center justify-center text-gray-400\">\n            Please select a data source first.\n          </div>\n        ) : !selectedSqlStatus && !selectedTableRef ? (\n          <div className=\"flex h-full w-full items-center justify-center text-gray-400\">\n            No chart data available, please run the SQL cell first.\n          </div>\n        ) : (\n          <VegaLiteChart\n            sqlQuery={selectedSqlQuery}\n            spec={localSpec}\n            className=\"h-full w-full\"\n            aspectRatio={isEditing ? undefined : DEFAULT_ASPECT_RATIO}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  return renderContainer({\n    header,\n    content,\n  });\n};\n"]}

package/dist/components/VegaCellHeader.d.ts

@@ -0,0 +1,8 @@
+export type VegaCellHeaderProps = {
+    cellId: string;
+    selectValue: string | undefined;
+    onEditToggle: () => void;
+    hasDataSource: boolean;
+};
+export declare const VegaCellHeader: React.FC<VegaCellHeaderProps>;
+//# sourceMappingURL=VegaCellHeader.d.ts.map

package/dist/components/VegaCellHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaCellHeader.d.ts","sourceRoot":"","sources":["../../src/components/VegaCellHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgDxD,CAAC"}

package/dist/components/VegaCellHeader.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@sqlrooms/ui';
+import { produce } from 'immer';
+import { Settings } from 'lucide-react';
+import { fromDataSourceCell, fromDataSourceTable } from '../helpers';
+import { CellSourceSelector } from './CellSourceSelector';
+import { useCellsStore } from '../hooks';
+export const VegaCellHeader = ({ cellId, selectValue, onEditToggle, hasDataSource, }) => {
+    const updateCell = useCellsStore((s) => s.cells.updateCell);
+    const artifactId = useCellsStore((s) => s.cells.getArtifactIdForCell(cellId));
+    const handleDataSourceChange = (value) => {
+        updateCell(cellId, (c) => produce(c, (draft) => {
+            if (draft.type !== 'vega') {
+                return;
+            }
+            const cellIdFromValue = fromDataSourceCell(value);
+            const tableRef = fromDataSourceTable(value);
+            if (cellIdFromValue) {
+                draft.data.sqlId = cellIdFromValue;
+                delete draft.data.tableRef;
+            }
+            else if (tableRef) {
+                draft.data.tableRef = tableRef;
+                delete draft.data.sqlId;
+            }
+        }));
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CellSourceSelector, { artifactId: artifactId ?? '', value: selectValue, onValueChange: handleDataSourceChange }), _jsx(Button, { size: "xs", variant: "secondary", className: "h-6", onClick: onEditToggle, disabled: !hasDataSource, children: _jsx(Settings, { className: "h-4 w-4" }) })] }));
+};
+//# sourceMappingURL=VegaCellHeader.js.map