@kortix/ui 0.14.3 → 0.14.5

package/dist/files/renderers/sqlite-renderer.js

@@ -0,0 +1,727 @@
+// sql.js ships no types: a host that compiles this source reads the package's own.
+// An ambient `declare module` file cannot be imported, so this is a reference.
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../types/vendor.d.ts" />
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * SqliteRenderer — Full-featured SQLite database viewer & editor.
+ *
+ * Architecture:
+ *   1. Load .db/.sqlite/.sqlite3 file as ArrayBuffer via readFileAsBlob
+ *   2. Initialize sql.js (WASM) and open the database in-memory
+ *   3. Extract all tables, views, and indexes from sqlite_master
+ *   4. Features:
+ *      - Table/view sidebar with row counts
+ *      - AG Grid data viewer with sorting, filtering, search
+ *      - Inline cell editing (double-click) → runs UPDATE statements
+ *      - Add row / delete row support
+ *      - Save modified database back to file
+ *      - Schema inspector (CREATE TABLE statements, column info)
+ *      - Raw SQL query connector with results grid
+ *   5. Lazy-loaded — only pulled in when a .db file is opened
+ */
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import Loading from '../../primitives/loading.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { readRuntimeFileWithRetry } from '../../internal/files/runtime-file-read.js';
+import { cn } from '../../lib/utils.js';
+import { CalendarIcon as Calendar, CheckIcon as Check, CodeSimpleIcon as Code2, CopyIcon as Copy, DatabaseIcon as Database, EyeIcon as Eye, FileMagnifyingGlassIcon as FileQuestion, HashIcon as Hash, KeyIcon as Key, ListIcon as List, PlayIcon as Play, PlusIcon as Plus, ArrowClockwiseIcon as RefreshCw, FloppyDiskIcon as Save, MagnifyingGlassIcon as Search, TableIcon as Table2, ToggleLeftIcon as ToggleLeft, TrashIcon as Trash2, TextTIcon as Type, ArrowUUpLeftIcon as Undo2, XIcon as X, } from '@phosphor-icons/react';
+import { AllCommunityModule, colorSchemeDarkBlue, colorSchemeLight, ModuleRegistry, themeQuartz, } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { useIsDark } from '../../hooks/use-is-dark.js';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Download } from '../../internal/icons/download.js';
+// Register AG Grid modules once
+ModuleRegistry.registerModules([AllCommunityModule]);
+// AG Grid theme
+const gridTheme = themeQuartz.withParams({
+    spacing: 6,
+    headerFontSize: 12,
+    fontSize: 12,
+    rowHeight: 36,
+    headerHeight: 38,
+    wrapperBorderRadius: 0,
+    borderRadius: 0,
+    cellHorizontalPaddingScale: 1,
+});
+// Lazy DataGrid only for query results (read-only, no special wiring needed)
+const DataGrid = lazy(() => import('../../primitives/data-grid.js').then((m) => ({ default: m.DataGrid })));
+function GridFallback() {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    return (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "text-muted-foreground animate-pulse text-sm", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line97JsxTextLoadingGrid') }) }));
+}
+async function readDatabaseBytes(filePath, bytes, signal) {
+    if (bytes) {
+        if (!bytes.size)
+            throw new Error('Empty database file');
+        return bytes;
+    }
+    const { readFileAsBlob } = await import('../../internal/files/runtime-files.js');
+    return readRuntimeFileWithRetry(filePath, async () => {
+        const blob = await readFileAsBlob(filePath);
+        if (!blob.size)
+            throw new Error('Empty database file');
+        return blob;
+    }, undefined, signal);
+}
+// ── SQL type → icon mapping ─────────────────────────────────────────────
+function getTypeIcon(sqlType) {
+    const t = sqlType.toUpperCase();
+    if (t.includes('INT') ||
+        t.includes('REAL') ||
+        t.includes('FLOAT') ||
+        t.includes('DOUBLE') ||
+        t.includes('NUMERIC') ||
+        t.includes('DECIMAL'))
+        return _jsx(Hash, { className: "text-kortix-blue h-3 w-3" });
+    if (t.includes('TEXT') ||
+        t.includes('CHAR') ||
+        t.includes('CLOB') ||
+        t.includes('VARCHAR') ||
+        t.includes('STRING'))
+        return _jsx(Type, { className: "text-kortix-green h-3 w-3" });
+    if (t.includes('BOOL'))
+        return _jsx(ToggleLeft, { className: "text-kortix-yellow h-3 w-3" });
+    if (t.includes('DATE') || t.includes('TIME') || t.includes('TIMESTAMP'))
+        return _jsx(Calendar, { className: "text-kortix-purple h-3 w-3" });
+    if (t.includes('BLOB') || t.includes('BINARY'))
+        return _jsx(Database, { className: "text-kortix-orange h-3 w-3" });
+    return _jsx(FileQuestion, { className: "text-muted-foreground/50 h-3 w-3" });
+}
+// ── Helpers ──────────────────────────────────────────────────────────────
+/** Escape a value for a SQL literal. */
+function sqlLiteral(value) {
+    if (value === null || value === undefined)
+        return 'NULL';
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'boolean')
+        return value ? '1' : '0';
+    return `'${String(value).replace(/'/g, "''")}'`;
+}
+function quoteIdent(value) {
+    return `"${String(value).replace(/"/g, '""')}"`;
+}
+function readTableMetadata(db) {
+    const masterQuery = db.exec("SELECT name, type, sql FROM sqlite_master WHERE type IN ('table', 'view') AND name NOT LIKE 'sqlite_%' ORDER BY type, name");
+    const tableInfos = [];
+    if (masterQuery.length > 0) {
+        for (const row of masterQuery[0].values) {
+            const name = String(row[0]);
+            const type = String(row[1]);
+            const sql = String(row[2] || '');
+            let rowCount = 0;
+            try {
+                const countResult = db.exec(`SELECT COUNT(*) FROM ${quoteIdent(name)}`);
+                if (countResult.length > 0)
+                    rowCount = Number(countResult[0].values[0][0]);
+            }
+            catch {
+                /* ignore */
+            }
+            const columns = [];
+            try {
+                const pragmaResult = db.exec(`PRAGMA table_info(${quoteIdent(name)})`);
+                if (pragmaResult.length > 0) {
+                    for (const col of pragmaResult[0].values) {
+                        columns.push({
+                            cid: Number(col[0]),
+                            name: String(col[1]),
+                            type: String(col[2] || 'TEXT'),
+                            notnull: Boolean(col[3]),
+                            dflt_value: col[4] != null ? String(col[4]) : null,
+                            pk: Boolean(col[5]),
+                        });
+                    }
+                }
+            }
+            catch {
+                /* ignore */
+            }
+            tableInfos.push({ name, type, sql, rowCount, columns });
+        }
+    }
+    return tableInfos;
+}
+// ── Component ────────────────────────────────────────────────────────────
+export function SqliteRenderer({ filePath, fileName, className, readOnly = false, bytes, onSave, }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    // State
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [tables, setTables] = useState([]);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const [viewMode, setViewMode] = useState('data');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [tableSearch, setTableSearch] = useState('');
+    const [sqlQuery, setSqlQuery] = useState('');
+    const [queryResult, setQueryResult] = useState(null);
+    const [isQueryRunning, setIsQueryRunning] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [dataVersion, setDataVersion] = useState(0);
+    // Bumped by the error-state Retry button. It re-runs the init effect below,
+    // which is all "retry" ever meant — the button used to reload the document.
+    const [reloadKey, setReloadKey] = useState(0);
+    const [expandedCell, setExpandedCell] = useState(null);
+    const [expandedEditValue, setExpandedEditValue] = useState('');
+    // Refs
+    const dbRef = useRef(null);
+    const gridApiRef = useRef(null);
+    // AG Grid theme
+    const isDark = useIsDark();
+    const agTheme = useMemo(() => {
+        const colorScheme = isDark ? colorSchemeDarkBlue : colorSchemeLight;
+        return gridTheme.withPart(colorScheme);
+    }, [isDark]);
+    // ── Refresh table metadata after mutations ────────────────────────────
+    const refreshTableMeta = useCallback(() => {
+        const db = dbRef.current;
+        if (!db)
+            return;
+        try {
+            setTables(readTableMetadata(db));
+        }
+        catch {
+            /* ignore */
+        }
+    }, []);
+    // ── Initialize database ───────────────────────────────────────────────
+    useEffect(() => {
+        let cancelled = false;
+        const abortController = new AbortController();
+        async function init() {
+            setIsLoading(true);
+            setError(null);
+            try {
+                const blob = await readDatabaseBytes(filePath, bytes, abortController.signal);
+                const arrayBuffer = await blob.arrayBuffer();
+                if (cancelled)
+                    return;
+                if (!arrayBuffer || arrayBuffer.byteLength === 0) {
+                    throw new Error('Empty database file');
+                }
+                const initSqlJs = (await import('sql.js')).default;
+                const SQL = await initSqlJs({
+                    locateFile: () => '/sql-wasm.wasm',
+                });
+                if (cancelled)
+                    return;
+                const db = new SQL.Database(new Uint8Array(arrayBuffer));
+                dbRef.current = db;
+                // Extract tables and views
+                const tableInfos = readTableMetadata(db);
+                if (cancelled)
+                    return;
+                setTables(tableInfos);
+                if (tableInfos.length > 0) {
+                    setSelectedTable(tableInfos[0].name);
+                }
+            }
+            catch (e) {
+                if (abortController.signal.aborted)
+                    return;
+                console.error('[SqliteRenderer] Error:', e);
+                if (!cancelled) {
+                    setError(e?.message || 'Failed to load database');
+                }
+            }
+            finally {
+                if (!cancelled && !abortController.signal.aborted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+        init();
+        return () => {
+            cancelled = true;
+            abortController.abort();
+            if (dbRef.current) {
+                try {
+                    dbRef.current.close();
+                }
+                catch {
+                    /* ignore */
+                }
+                dbRef.current = null;
+            }
+        };
+    }, [filePath, bytes, reloadKey]);
+    // ── Get table data ────────────────────────────────────────────────────
+    const tableData = useMemo(() => {
+        if (!dbRef.current || !selectedTable)
+            return { columns: [], rows: [] };
+        try {
+            const result = dbRef.current.exec(`SELECT * FROM ${quoteIdent(selectedTable)} LIMIT 10000`);
+            if (result.length === 0)
+                return { columns: [], rows: [] };
+            const columns = result[0].columns;
+            const rows = result[0].values.map((row) => {
+                const obj = {};
+                columns.forEach((col, i) => {
+                    const val = row[i];
+                    if (val instanceof Uint8Array) {
+                        obj[col] = `[BLOB ${val.length} bytes]`;
+                    }
+                    else {
+                        obj[col] = val;
+                    }
+                });
+                return obj;
+            });
+            return { columns, rows };
+        }
+        catch {
+            return { columns: [], rows: [] };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTable, tables, dataVersion]);
+    // ── Selected table info ───────────────────────────────────────────────
+    const selectedTableInfo = useMemo(() => tables.find((t) => t.name === selectedTable) ?? null, [tables, selectedTable]);
+    // ── Column defs for AG Grid (editable for tables, not views) ──────────
+    const isEditable = !readOnly && selectedTableInfo?.type === 'table';
+    const columnDefs = useMemo(() => {
+        if (!tableData.columns.length)
+            return [];
+        const pkColumns = new Set();
+        for (const c of selectedTableInfo?.columns ?? []) {
+            if (c.pk)
+                pkColumns.add(c.name);
+        }
+        return tableData.columns.map((col) => ({
+            field: col,
+            headerName: col,
+            minWidth: 100,
+            editable: isEditable,
+            flex: tableData.columns.length <= 8 ? 1 : undefined,
+            width: tableData.columns.length > 8 ? 160 : undefined,
+            headerClass: pkColumns.has(col) ? 'font-semibold' : '',
+            cellStyle: { cursor: isEditable ? 'text' : 'default' },
+        }));
+    }, [tableData.columns, selectedTableInfo, isEditable]);
+    // ── Handle cell edit → run UPDATE ─────────────────────────────────────
+    const handleCellValueChanged = useCallback((event) => {
+        const db = dbRef.current;
+        if (readOnly || !db || !selectedTable || !selectedTableInfo)
+            return;
+        const colName = event.colDef.field;
+        const newValue = event.newValue;
+        const oldValue = event.oldValue;
+        if (!colName || newValue === oldValue)
+            return;
+        // Build WHERE clause from PK columns (or all columns as fallback)
+        const pkCols = selectedTableInfo.columns.filter((c) => c.pk);
+        const whereCols = pkCols.length > 0 ? pkCols : selectedTableInfo.columns;
+        const whereClause = whereCols
+            .map((c) => {
+            const val = event.data[c.name];
+            // For the column being edited, use old value in WHERE
+            if (c.name === colName) {
+                return `${quoteIdent(c.name)} IS ${sqlLiteral(oldValue)}`;
+            }
+            return `${quoteIdent(c.name)} IS ${sqlLiteral(val)}`;
+        })
+            .join(' AND ');
+        const sql = `UPDATE ${quoteIdent(selectedTable)} SET ${quoteIdent(colName)} = ${sqlLiteral(newValue)} WHERE ${whereClause}`;
+        try {
+            db.exec(sql);
+            setHasUnsavedChanges(true);
+            refreshTableMeta();
+        }
+        catch (e) {
+            errorToast(tHardcodedUi('i18nComplete.text7e9c22af3df2', {
+                value0: e?.message || tHardcodedUi.raw('i18nComplete.text27c2ccd962c2'),
+            }));
+            // Revert the cell
+            event.node.setDataValue(colName, oldValue);
+        }
+    }, [readOnly, selectedTable, selectedTableInfo, refreshTableMeta, tHardcodedUi]);
+    // ── Cell double-click → expand long values ────────────────────────────
+    const handleCellDoubleClicked = useCallback((event) => {
+        const value = event.value;
+        const colName = event.colDef.field;
+        if (!colName)
+            return;
+        const strVal = value == null ? '' : String(value);
+        // Only expand if value is long or if it's a non-editable view
+        if (strVal.length > 80 || !isEditable) {
+            // Stop AG Grid's default inline editing for this cell
+            event.api.stopEditing(true);
+            setExpandedCell({
+                column: colName,
+                value: strVal,
+                rowIndex: event.rowIndex ?? 0,
+            });
+            setExpandedEditValue(strVal);
+        }
+        // Short values on editable tables → let AG Grid handle inline editing normally
+    }, [isEditable]);
+    // ── Save expanded cell edit ───────────────────────────────────────────
+    const handleExpandedSave = useCallback(() => {
+        const db = dbRef.current;
+        if (readOnly || !db || !selectedTable || !selectedTableInfo || !expandedCell)
+            return;
+        const newValue = expandedEditValue;
+        const colName = expandedCell.column;
+        // Get the row data from the grid
+        const api = gridApiRef.current?.api;
+        if (!api)
+            return;
+        const rowNode = api.getDisplayedRowAtIndex(expandedCell.rowIndex);
+        if (!rowNode || !rowNode.data)
+            return;
+        const pkCols = selectedTableInfo.columns.filter((c) => c.pk);
+        const whereCols = pkCols.length > 0 ? pkCols : selectedTableInfo.columns;
+        const whereClause = whereCols
+            .map((c) => `${quoteIdent(c.name)} IS ${sqlLiteral(rowNode.data[c.name])}`)
+            .join(' AND ');
+        const sql = `UPDATE ${quoteIdent(selectedTable)} SET ${quoteIdent(colName)} = ${sqlLiteral(newValue)} WHERE ${whereClause}`;
+        try {
+            db.exec(sql);
+            setHasUnsavedChanges(true);
+            setDataVersion((v) => v + 1);
+            refreshTableMeta();
+            setExpandedCell(null);
+            successToast(tHardcodedUi.raw('i18nComplete.text8955719a3a89'));
+        }
+        catch (e) {
+            errorToast(tHardcodedUi('i18nComplete.text7e9c22af3df2', {
+                value0: e?.message || tHardcodedUi.raw('i18nComplete.text27c2ccd962c2'),
+            }));
+        }
+    }, [
+        selectedTable,
+        selectedTableInfo,
+        expandedCell,
+        expandedEditValue,
+        refreshTableMeta,
+        readOnly,
+        tHardcodedUi,
+    ]);
+    // ── Row selection config ──────────────────────────────────────────────
+    const rowSelection = useMemo(() => ({
+        mode: 'multiRow',
+        checkboxes: isEditable,
+        headerCheckbox: isEditable,
+    }), [isEditable]);
+    // ── Add new row ───────────────────────────────────────────────────────
+    const handleAddRow = useCallback(() => {
+        const db = dbRef.current;
+        if (readOnly || !db || !selectedTable || !selectedTableInfo)
+            return;
+        // Build INSERT with default values
+        const cols = selectedTableInfo.columns;
+        const colNames = cols.map((c) => quoteIdent(c.name)).join(', ');
+        const values = cols
+            .map((c) => {
+            if (c.dflt_value != null)
+                return c.dflt_value;
+            if (c.pk)
+                return 'NULL'; // autoincrement
+            if (c.notnull) {
+                const t = c.type.toUpperCase();
+                if (t.includes('INT') ||
+                    t.includes('REAL') ||
+                    t.includes('FLOAT') ||
+                    t.includes('NUMERIC'))
+                    return '0';
+                if (t.includes('BOOL'))
+                    return '0';
+                return "''";
+            }
+            return 'NULL';
+        })
+            .join(', ');
+        const sql = `INSERT INTO ${quoteIdent(selectedTable)} (${colNames}) VALUES (${values})`;
+        try {
+            db.exec(sql);
+            setHasUnsavedChanges(true);
+            setDataVersion((v) => v + 1);
+            refreshTableMeta();
+            successToast(tHardcodedUi.raw('i18nComplete.text1d21d2b18753'));
+        }
+        catch (e) {
+            errorToast(tHardcodedUi('i18nComplete.text62e404cb7e2b', {
+                value0: e?.message || tHardcodedUi.raw('i18nComplete.text27c2ccd962c2'),
+            }));
+        }
+    }, [selectedTable, selectedTableInfo, refreshTableMeta, readOnly, tHardcodedUi]);
+    // ── Delete selected rows ──────────────────────────────────────────────
+    const handleDeleteSelected = useCallback(() => {
+        const db = dbRef.current;
+        const api = gridApiRef.current?.api;
+        if (readOnly || !db || !api || !selectedTable || !selectedTableInfo)
+            return;
+        const selectedRows = api.getSelectedRows();
+        if (selectedRows.length === 0) {
+            errorToast(tHardcodedUi.raw('i18nComplete.text1e7d701f8277'));
+            return;
+        }
+        const pkCols = selectedTableInfo.columns.filter((c) => c.pk);
+        const whereCols = pkCols.length > 0 ? pkCols : selectedTableInfo.columns;
+        let deleted = 0;
+        for (const row of selectedRows) {
+            const whereClause = whereCols
+                .map((c) => `${quoteIdent(c.name)} IS ${sqlLiteral(row[c.name])}`)
+                .join(' AND ');
+            try {
+                db.exec(`DELETE FROM ${quoteIdent(selectedTable)} WHERE ${whereClause} LIMIT 1`);
+                deleted++;
+            }
+            catch {
+                /* skip */
+            }
+        }
+        if (deleted > 0) {
+            setHasUnsavedChanges(true);
+            setDataVersion((v) => v + 1);
+            refreshTableMeta();
+            successToast(tHardcodedUi('i18nComplete.text00e99be56ba9', { count: deleted }));
+        }
+    }, [selectedTable, selectedTableInfo, refreshTableMeta, readOnly, tHardcodedUi]);
+    // ── Save database back to file ────────────────────────────────────────
+    const handleSave = useCallback(async () => {
+        const db = dbRef.current;
+        if (readOnly || !db)
+            return;
+        setIsSaving(true);
+        try {
+            const data = db.export();
+            const blob = new Blob([data], { type: 'application/x-sqlite3' });
+            const file = new File([blob], fileName, { type: 'application/x-sqlite3' });
+            if (onSave) {
+                await onSave(file);
+            }
+            else {
+                const parentPath = filePath.substring(0, filePath.lastIndexOf('/'));
+                const { uploadFile } = await import('../../internal/files/runtime-files.js');
+                await uploadFile(file, parentPath || undefined);
+            }
+            setHasUnsavedChanges(false);
+            successToast(tHardcodedUi.raw('i18nComplete.text68b444f414fa'));
+        }
+        catch (e) {
+            errorToast(tHardcodedUi('i18nComplete.text021b7b95cad3', {
+                value0: e?.message || tHardcodedUi.raw('i18nComplete.text27c2ccd962c2'),
+            }));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }, [filePath, fileName, readOnly, tHardcodedUi, onSave]);
+    // ── Discard changes (reload from disk) ────────────────────────────────
+    const handleDiscard = useCallback(() => {
+        if (dbRef.current) {
+            try {
+                dbRef.current.close();
+            }
+            catch {
+                /* ignore */
+            }
+            dbRef.current = null;
+        }
+        setHasUnsavedChanges(false);
+        setDataVersion(0);
+        setTables([]);
+        setSelectedTable(null);
+        setIsLoading(true);
+        setError(null);
+        // Re-trigger the init effect by forcing a state change
+        // (The effect depends on filePath which hasn't changed,
+        //  so we use a key trick — but since we can't change key from inside,
+        //  we just re-run init inline)
+        (async () => {
+            try {
+                const blob = await readDatabaseBytes(filePath, bytes);
+                const arrayBuffer = await blob.arrayBuffer();
+                if (!arrayBuffer.byteLength)
+                    throw new Error('Empty file');
+                const initSqlJs = (await import('sql.js')).default;
+                const SQL = await initSqlJs({ locateFile: () => '/sql-wasm.wasm' });
+                const db = new SQL.Database(new Uint8Array(arrayBuffer));
+                dbRef.current = db;
+                refreshTableMeta();
+                const firstTable = tables[0]?.name;
+                if (firstTable)
+                    setSelectedTable(firstTable);
+                setDataVersion((v) => v + 1);
+                setIsLoading(false);
+                successToast(tHardcodedUi.raw('i18nComplete.text4daace56d920'));
+            }
+            catch (e) {
+                setError(e?.message || 'Reload failed');
+                setIsLoading(false);
+            }
+        })();
+    }, [filePath, bytes, refreshTableMeta, tables, tHardcodedUi]);
+    // ── Filtered tables ───────────────────────────────────────────────────
+    const filteredTables = useMemo(() => {
+        if (!tableSearch.trim())
+            return tables;
+        const q = tableSearch.toLowerCase();
+        return tables.filter((t) => t.name.toLowerCase().includes(q));
+    }, [tables, tableSearch]);
+    // ── Run SQL query ─────────────────────────────────────────────────────
+    const runQuery = useCallback(() => {
+        if (!dbRef.current || !sqlQuery.trim())
+            return;
+        setIsQueryRunning(true);
+        const start = performance.now();
+        try {
+            // Classify before executing: a read-only database must refuse a mutation
+            // before it mutates the in-memory copy.
+            const trimmed = sqlQuery.trim();
+            const upper = trimmed.toUpperCase();
+            const isMutation = upper.startsWith('INSERT') ||
+                upper.startsWith('UPDATE') ||
+                upper.startsWith('DELETE') ||
+                upper.startsWith('DROP') ||
+                upper.startsWith('ALTER') ||
+                upper.startsWith('CREATE');
+            if (readOnly && isMutation) {
+                throw new Error('Database is open read-only');
+            }
+            const result = dbRef.current.exec(trimmed);
+            const elapsed = performance.now() - start;
+            // Mutation queries → mark dirty + refresh
+            if (isMutation) {
+                setHasUnsavedChanges(true);
+                setDataVersion((v) => v + 1);
+                refreshTableMeta();
+            }
+            if (result.length === 0) {
+                setQueryResult({ columns: [], rows: [], rowCount: 0, time: elapsed });
+            }
+            else {
+                const columns = result[0].columns;
+                const rows = result[0].values.map((row) => {
+                    const obj = {};
+                    columns.forEach((col, i) => {
+                        const val = row[i];
+                        if (val instanceof Uint8Array) {
+                            obj[col] = `[BLOB ${val.length} bytes]`;
+                        }
+                        else {
+                            obj[col] = val;
+                        }
+                    });
+                    return obj;
+                });
+                setQueryResult({ columns, rows, rowCount: rows.length, time: elapsed });
+            }
+        }
+        catch (e) {
+            const elapsed = performance.now() - start;
+            setQueryResult({
+                columns: [],
+                rows: [],
+                rowCount: 0,
+                time: elapsed,
+                error: e?.message || 'Query failed',
+            });
+        }
+        finally {
+            setIsQueryRunning(false);
+        }
+    }, [sqlQuery, refreshTableMeta, readOnly]);
+    // ── Keyboard shortcut: Cmd+Enter to run query ─────────────────────────
+    const handleQueryKeyDown = useCallback((e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            runQuery();
+        }
+    }, [runQuery]);
+    // ── Cmd+S to save ─────────────────────────────────────────────────────
+    useEffect(() => {
+        if (readOnly || !hasUnsavedChanges)
+            return;
+        const onKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+                e.preventDefault();
+                handleSave();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [hasUnsavedChanges, handleSave, readOnly]);
+    // ── Copy SQL ──────────────────────────────────────────────────────────
+    const handleCopySchema = useCallback(() => {
+        if (!selectedTableInfo?.sql)
+            return;
+        navigator.clipboard.writeText(selectedTableInfo.sql);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [selectedTableInfo]);
+    // ── Export table as CSV ───────────────────────────────────────────────
+    const handleExportCsv = useCallback(() => {
+        gridApiRef.current?.api?.exportDataAsCsv({ fileName: `${selectedTable || 'export'}.csv` });
+    }, [selectedTable]);
+    // ── Loading state ─────────────────────────────────────────────────────
+    if (isLoading) {
+        return (_jsx("div", { className: cn('flex h-full w-full items-center justify-center', className), children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx(Loading, { className: "text-muted-foreground/40 h-6 w-6" }), _jsx("span", { className: "text-muted-foreground/60 text-sm", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line733JsxTextLoadingDatabase') })] }) }));
+    }
+    // ── Error state ───────────────────────────────────────────────────────
+    if (error) {
+        return (_jsx("div", { className: cn('flex h-full w-full items-center justify-center', className), children: _jsxs("div", { className: "space-y-3 text-center", children: [_jsx("div", { className: "bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(Database, { className: "text-muted-foreground h-8 w-8" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line748JsxTextFailedToLoadDatabase') }), _jsx("p", { className: "text-muted-foreground mt-1 max-w-sm text-xs", children: error })] }), _jsxs("button", { onClick: () => setReloadKey((key) => key + 1), className: "hover:bg-muted inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border px-3 text-xs transition-colors", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), tHardcodedUi.raw('i18nComplete.text942087cc2d41')] })] }) }));
+    }
+    // ── Empty database ────────────────────────────────────────────────────
+    if (tables.length === 0) {
+        return (_jsx("div", { className: cn('flex h-full w-full items-center justify-center', className), children: _jsxs("div", { className: "space-y-3 text-center", children: [_jsx("div", { className: "bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(Database, { className: "text-muted-foreground h-8 w-8" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line772JsxTextEmptyDatabase') }), _jsx("p", { className: "text-muted-foreground text-sm", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line773JsxTextNoTablesOrViewsFoundInThisDatabase') })] })] }) }));
+    }
+    // ── Main layout ───────────────────────────────────────────────────────
+    return (_jsxs("div", { className: cn('bg-background relative flex h-full w-full flex-col', className), children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "text-muted-foreground/60 text-xs tabular-nums", children: [tables.filter((t) => t.type === 'table').length, ' ', tHardcodedUi.raw('i18nComplete.text0d4fc4a78d37'), tables.filter((t) => t.type === 'table').length !== 1 ? 's' : '', tables.some((t) => t.type === 'view') && (_jsxs(_Fragment, { children: [' ', "\u00B7 ", tables.filter((t) => t.type === 'view').length, ' ', tHardcodedUi.raw('i18nComplete.text2bcb43cbc8f6'), tables.filter((t) => t.type === 'view').length !== 1 ? 's' : ''] })), _jsxs(_Fragment, { children: [' ', "\u00B7 ", tables.reduce((sum, t) => sum + t.rowCount, 0).toLocaleString(), ' ', tHardcodedUi.raw('i18nComplete.textbc51e9e65d79')] })] }), hasUnsavedChanges && (_jsx("span", { className: "bg-kortix-yellow h-1.5 w-1.5 shrink-0 rounded-full", title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line795JsxAttrTitleUnsavedChanges') })), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [hasUnsavedChanges && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "muted", size: "toolbar", onClick: handleDiscard, title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line806JsxAttrTitleDiscardChanges'), children: [_jsx(Undo2, { className: "h-3 w-3" }), tHardcodedUi.raw('i18nComplete.texteb1a70e39274')] }), _jsxs(Button, { variant: "default", size: "toolbar", onClick: handleSave, disabled: isSaving, title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line816JsxAttrTitleSaveToFileS'), children: [isSaving ? _jsx(Loading, { className: "h-3 w-3" }) : _jsx(Save, { className: "h-3 w-3" }), tHardcodedUi.raw('i18nComplete.text1509f561f241')] })] })), _jsx("div", { className: "bg-muted/60 ml-1 flex items-center rounded-md p-0.5", children: ['data', 'schema', 'query'].map((mode) => (_jsxs("button", { className: cn('inline-flex h-6 cursor-pointer items-center gap-1 rounded-sm px-2 text-xs transition-colors', viewMode === mode
+                                        ? 'bg-background text-foreground shadow-sm'
+                                        : 'text-muted-foreground/60 hover:text-foreground'), onClick: () => setViewMode(mode), children: [mode === 'data' && _jsx(List, { className: "h-3 w-3" }), mode === 'schema' && _jsx(Code2, { className: "h-3 w-3" }), mode === 'query' && _jsx(Play, { className: "h-3 w-3" }), mode.charAt(0).toUpperCase() + mode.slice(1)] }, mode))) })] })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("div", { className: "bg-muted/10 flex w-56 shrink-0 flex-col border-r", children: [_jsx("div", { className: "border-b p-2", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground/50 absolute top-1/2 left-2 h-3 w-3 -translate-y-1/2" }), _jsx(Input, { type: "text", placeholder: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line860JsxAttrPlaceholderFilterTables'), autoComplete: "off", value: tableSearch, onChange: (e) => setTableSearch(e.target.value), className: "h-7 pr-7 pl-7 text-xs" }), tableSearch && (_jsx("button", { onClick: () => setTableSearch(''), className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer", children: _jsx(X, { className: "h-3 w-3" }) }))] }) }), _jsx("div", { className: "flex-1 overflow-y-auto py-1", children: filteredTables.map((table) => (_jsxs("button", { onClick: () => {
+                                        setSelectedTable(table.name);
+                                        setSearchTerm('');
+                                        if (viewMode === 'query') {
+                                            setSqlQuery(`SELECT * FROM ${quoteIdent(table.name)} LIMIT 100`);
+                                        }
+                                    }, className: cn('flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors', selectedTable === table.name
+                                        ? 'bg-accent text-accent-foreground'
+                                        : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'), children: [table.type === 'view' ? (_jsx(Eye, { className: "text-kortix-purple h-3.5 w-3.5 shrink-0" })) : (_jsx(Table2, { className: "text-kortix-blue h-3.5 w-3.5 shrink-0" })), _jsx("span", { className: "flex-1 truncate text-xs font-medium", children: table.name }), _jsx("span", { className: "text-muted-foreground/50 shrink-0 text-xs tabular-nums", children: table.rowCount.toLocaleString() })] }, table.name))) }), _jsxs("div", { className: "text-muted-foreground/30 border-t px-3 py-1.5 text-xs tabular-nums", children: [filteredTables.length, "/", tables.length, ' ', tHardcodedUi.raw('i18nComplete.textbaaf53622a51')] })] }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [viewMode === 'data' && selectedTableInfo && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [selectedTableInfo.type === 'view' ? (_jsx(Eye, { className: "text-kortix-purple h-3.5 w-3.5 shrink-0" })) : (_jsx(Table2, { className: "text-kortix-blue h-3.5 w-3.5 shrink-0" })), _jsx("span", { className: "text-foreground truncate text-xs font-medium", children: selectedTableInfo.name }), _jsxs("span", { className: "text-muted-foreground/40 shrink-0 text-xs tabular-nums", children: [selectedTableInfo.rowCount.toLocaleString(), " \u00D7", ' ', selectedTableInfo.columns.length] })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [isEditable && (_jsxs(_Fragment, { children: [_jsx("button", { className: "text-muted-foreground/50 hover:text-foreground hover:bg-muted inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors", onClick: handleAddRow, title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line941JsxAttrTitleInsertRow'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "text-muted-foreground/50 hover:bg-destructive/10 hover:text-destructive inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors", onClick: handleDeleteSelected, title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line948JsxAttrTitleDeleteSelectedRows'), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "bg-border mx-0.5 h-4 w-px" })] })), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground/40 absolute top-1/2 left-2 h-3 w-3 -translate-y-1/2" }), _jsx(Input, { type: "text", placeholder: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line961JsxAttrPlaceholderFilter'), autoComplete: "off", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "h-7 w-40 pr-7 pl-7 text-xs" }), searchTerm && (_jsx("button", { onClick: () => setSearchTerm(''), className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer", children: _jsx(X, { className: "h-3 w-3" }) }))] }), _jsx("button", { className: "text-muted-foreground/50 hover:text-foreground hover:bg-muted inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors", onClick: handleExportCsv, title: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line979JsxAttrTitleExportAsCsv'), children: _jsx(Download, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: tableData.rows.length > 0 ? (_jsx("div", { className: "h-full w-full", children: _jsx(AgGridReact, { ref: gridApiRef, theme: agTheme, rowData: tableData.rows, columnDefs: columnDefs, defaultColDef: {
+                                                    sortable: true,
+                                                    filter: true,
+                                                    resizable: true,
+                                                    editable: isEditable,
+                                                    minWidth: 80,
+                                                    flex: tableData.columns.length <= 8 ? 1 : undefined,
+                                                    width: tableData.columns.length > 8 ? 160 : undefined,
+                                                    cellStyle: { cursor: isEditable ? 'text' : 'default' },
+                                                    valueFormatter: (params) => {
+                                                        const v = params.value;
+                                                        if (v == null)
+                                                            return '';
+                                                        if (typeof v === 'boolean')
+                                                            return v ? 'true' : 'false';
+                                                        return String(v);
+                                                    },
+                                                }, 
+                                                // Editing
+                                                singleClickEdit: false, stopEditingWhenCellsLoseFocus: true, onCellValueChanged: handleCellValueChanged, onCellDoubleClicked: handleCellDoubleClicked, 
+                                                // Selection
+                                                rowSelection: rowSelection, 
+                                                // Quick filter
+                                                quickFilterText: searchTerm, cacheQuickFilter: true, 
+                                                // Clipboard & text selection
+                                                enableCellTextSelection: true, ensureDomOrder: true, 
+                                                // Virtual scrolling
+                                                rowBuffer: 20, animateRows: false, suppressColumnVirtualisation: tableData.columns.length <= 20, tooltipShowDelay: 300, onFirstDataRendered: (event) => {
+                                                    if (tableData.columns.length > 8) {
+                                                        try {
+                                                            event.api.autoSizeAllColumns();
+                                                        }
+                                                        catch {
+                                                            /* ignore */
+                                                        }
+                                                    }
+                                                }, overlayNoRowsTemplate: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1035JsxAttrOverlaynorowstemplateSpanClassTextMutedForegroundTextSmNo') }, `${selectedTable}-${dataVersion}`) })) : (_jsx("div", { className: "text-muted-foreground flex h-full w-full items-center justify-center text-sm", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1040JsxTextNoDataInThisTable') })) })] })), viewMode === 'schema' && selectedTableInfo && (_jsxs("div", { className: "flex-1 space-y-4 overflow-auto p-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-muted-foreground text-xs font-medium", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1054JsxTextCreateStatement') }), _jsxs(Button, { variant: "muted", size: "xs", onClick: handleCopySchema, children: [copied ? (_jsx(Check, { className: "text-kortix-green h-3 w-3" })) : (_jsx(Copy, { className: "h-3 w-3" })), copied ? 'Copied' : 'Copy'] })] }), _jsx("pre", { className: "bg-muted/50 text-muted-foreground overflow-x-auto rounded-md border p-4 font-mono text-xs whitespace-pre-wrap select-text", children: selectedTableInfo.sql || tHardcodedUi.raw('i18nComplete.text86dcb7f9e791') })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "text-muted-foreground text-xs font-medium", children: [tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1077JsxTextColumns'), selectedTableInfo.columns.length, ")"] }), _jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-muted/50 border-b", children: [_jsx("th", { className: "text-muted-foreground w-8 px-3 py-2 text-left font-medium", children: "#" }), _jsx("th", { className: "text-muted-foreground px-3 py-2 text-left font-medium", children: tHardcodedUi.raw('i18nComplete.textdcd1d5223f73') }), _jsx("th", { className: "text-muted-foreground px-3 py-2 text-left font-medium", children: tHardcodedUi.raw('i18nComplete.textbaaddf70fb5d') }), _jsx("th", { className: "text-muted-foreground w-16 px-3 py-2 text-center font-medium", children: "PK" }), _jsx("th", { className: "text-muted-foreground w-20 px-3 py-2 text-center font-medium", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1087JsxTextNotNull') }), _jsx("th", { className: "text-muted-foreground px-3 py-2 text-left font-medium", children: tHardcodedUi.raw('i18nComplete.text21b111cbfe6e') })] }) }), _jsx("tbody", { children: selectedTableInfo.columns.map((col) => (_jsxs("tr", { className: "hover:bg-muted/30 border-b transition-colors last:border-0", children: [_jsx("td", { className: "text-muted-foreground/50 px-3 py-2 tabular-nums", children: col.cid }), _jsx("td", { className: "text-foreground px-3 py-2 font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [col.pk && _jsx(Key, { className: "text-kortix-orange h-3 w-3" }), col.name] }) }), _jsx("td", { className: "px-3 py-2", children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [getTypeIcon(col.type), _jsx("span", { className: "text-muted-foreground font-mono", children: col.type || 'ANY' })] }) }), _jsx("td", { className: "px-3 py-2 text-center", children: col.pk && (_jsx("span", { className: "bg-kortix-orange/10 text-kortix-orange inline-flex h-4 w-4 items-center justify-center rounded-full text-xs font-semibold", children: "\u2713" })) }), _jsx("td", { className: "px-3 py-2 text-center", children: col.notnull && (_jsx("span", { className: "bg-destructive/10 text-destructive inline-flex h-4 w-4 items-center justify-center rounded-full text-xs font-semibold", children: "\u2713" })) }), _jsx("td", { className: "text-muted-foreground/60 px-3 py-2 font-mono", children: col.dflt_value ?? '—' })] }, col.cid))) })] }) })] }), _jsxs("div", { className: "flex items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground/50", children: tHardcodedUi.raw('i18nComplete.text101f2ff3de22') }), _jsx("span", { className: "font-medium tabular-nums", children: selectedTableInfo.rowCount.toLocaleString() })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground/50", children: tHardcodedUi.raw('i18nComplete.text53aade77cd69') }), _jsx("span", { className: "font-medium tabular-nums", children: selectedTableInfo.columns.length })] }), selectedTableInfo.columns.some((c) => c.pk) && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground/50", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1146JsxTextPrimaryKeys') }), _jsx("span", { className: "font-medium tabular-nums", children: selectedTableInfo.columns.filter((c) => c.pk).length })] })), selectedTableInfo.columns.some((c) => c.notnull) && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground/50", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1152JsxTextNotNull') }), _jsx("span", { className: "font-medium tabular-nums", children: selectedTableInfo.columns.filter((c) => c.notnull).length })] }))] })] })), viewMode === 'query' && (_jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs("div", { className: "shrink-0 space-y-2 border-b p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground/50 text-xs", children: "SQL" }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsxs("span", { className: "text-muted-foreground/30 text-xs", children: [typeof navigator !== 'undefined' && navigator.platform?.includes('Mac')
+                                                                        ? '⌘'
+                                                                        : 'Ctrl', tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1169JsxTextEnter')] }), _jsxs("button", { className: cn('inline-flex h-7 cursor-pointer items-center gap-1 rounded-md px-2.5 text-xs transition-colors', sqlQuery.trim()
+                                                                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                                                                    : 'bg-muted text-muted-foreground cursor-not-allowed'), onClick: runQuery, disabled: isQueryRunning || !sqlQuery.trim(), children: [isQueryRunning ? (_jsx(Loading, { className: "h-3 w-3" })) : (_jsx(Play, { className: "h-3 w-3" })), tHardcodedUi.raw('i18nComplete.text00d60e31a4e6')] })] })] }), _jsx("textarea", { value: sqlQuery, onChange: (e) => setSqlQuery(e.target.value), onKeyDown: handleQueryKeyDown, placeholder: `SELECT * FROM "${selectedTable || 'table_name'}" LIMIT 100`, className: cn('bg-muted/30 h-24 w-full cursor-text rounded-md border px-3 py-2 font-mono text-xs', 'focus:ring-ring resize-none focus:ring-1 focus:outline-none', 'placeholder:text-muted-foreground/30'), spellCheck: false })] }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [queryResult?.error && (_jsxs("div", { className: "border-destructive/20 bg-destructive/5 text-destructive shrink-0 border-b px-4 py-2 font-mono text-xs select-text", children: [tHardcodedUi.raw('i18nComplete.text617062906764'), " ", queryResult.error] })), queryResult && !queryResult.error && (_jsxs("div", { className: "text-muted-foreground flex shrink-0 items-center gap-2 border-b px-3 py-1.5 text-xs", children: [_jsxs("span", { children: [queryResult.rowCount.toLocaleString(), ' ', tHardcodedUi.raw('i18nComplete.text634768dae147'), queryResult.rowCount !== 1 ? 's' : ''] }), _jsx("span", { className: "text-muted-foreground/30", children: "\u00B7" }), _jsxs("span", { children: [queryResult.time.toFixed(1), tHardcodedUi.raw('i18nComplete.textf785c3ce1d58')] })] })), queryResult && queryResult.rows.length > 0 && (_jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Suspense, { fallback: _jsx(GridFallback, {}), children: _jsx(DataGrid, { rowData: queryResult.rows, className: "h-full" }, `query-${queryResult.time}`) }) })), !queryResult && (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsxs("div", { className: "space-y-2 text-center", children: [_jsx(Play, { className: "text-muted-foreground/20 mx-auto h-8 w-8" }), _jsx("p", { className: "text-muted-foreground/40 text-sm", children: tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1237JsxTextWriteAQueryAndPressRun') })] }) })), queryResult && queryResult.rows.length === 0 && !queryResult.error && (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsxs("p", { className: "text-muted-foreground/40 text-sm", children: [tHardcodedUi.raw('componentsFileRenderersSqliteRenderer.line1246JsxTextQueryReturnedNoRows'), queryResult.time.toFixed(1), tHardcodedUi.raw('i18nComplete.text9e7d85a50dc3')] }) }))] })] }))] })] }), expandedCell && (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/40 p-6 backdrop-blur-[2px]", onClick: () => setExpandedCell(null), children: _jsxs("div", { className: "bg-background border-border/60 flex max-h-[70vh] w-full max-w-xl flex-col overflow-hidden rounded-md border shadow-xl", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground truncate font-mono text-xs", children: expandedCell.column }), _jsxs("span", { className: "text-muted-foreground/30 shrink-0 text-xs tabular-nums", children: [tHardcodedUi.raw('i18nComplete.text634768dae147'), " ", expandedCell.rowIndex + 1] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isEditable && expandedEditValue !== expandedCell.value && (_jsxs(Button, { variant: "default", size: "toolbar", onClick: handleExpandedSave, children: [_jsx(Check, { className: "h-3 w-3" }), tHardcodedUi.raw('i18nComplete.text31e392d1c037')] })), _jsx(Button, { onClick: () => setExpandedCell(null), variant: "ghost", size: "icon-sm", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-auto", children: isEditable ? (_jsx("textarea", { value: expandedEditValue, onChange: (e) => setExpandedEditValue(e.target.value), className: cn('h-full min-h-[180px] w-full cursor-text bg-transparent p-4 font-mono text-sm', 'resize-none focus:outline-none', 'placeholder:text-muted-foreground/20'), placeholder: "NULL", "aria-label": `${expandedCell.column} value`, spellCheck: false, autoFocus: true })) : (_jsx("pre", { className: "text-muted-foreground min-h-[180px] p-4 font-mono text-sm break-all whitespace-pre-wrap select-text", children: expandedCell.value || (_jsx("span", { className: "text-muted-foreground/30 italic", children: "NULL" })) })) }), _jsxs("div", { className: "text-muted-foreground/30 border-t px-4 py-1.5 text-xs tabular-nums", children: [expandedEditValue.length.toLocaleString(), ' ', tHardcodedUi.raw('i18nComplete.text1ce93dacbcf4')] })] }) }))] }));
+}