rozenite-sqlite 0.0.9 → 0.0.12

package/src/components/RowDetailPanel.tsx

@@ -0,0 +1,324 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, Pressable, TextInput, ActivityIndicator } from 'react-native';
+import { C, type RowData } from '../theme';
+import type { MutationResult } from '../hooks/useBridgeSync';
+
+function isJsonString(val: string): boolean {
+  const t = val.trim();
+  if (t.length < 2 || (t[0] !== '{' && t[0] !== '[')) return false;
+  try { JSON.parse(t); return true; } catch { return false; }
+}
+
+export interface RowDetailPanelProps {
+  row: RowData | null;
+  rowIndex: number | null;
+  onClose: () => void;
+  onSave: (updated: RowData) => Promise<MutationResult>;
+  onDelete: () => Promise<MutationResult>;
+  mutating?: boolean;
+  mutationError?: string | null;
+  onClearError?: () => void;
+}
+
+export function RowDetailPanel({ row, rowIndex, onClose, onSave, onDelete, mutating, mutationError, onClearError }: RowDetailPanelProps) {
+  const [draft, setDraft] = useState<RowData>({});
+  const [dirty, setDirty] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  useEffect(() => {
+    if (row) {
+      const formatted = Object.fromEntries(
+        Object.entries(row).map(([k, v]) => {
+          const s = v == null ? v : String(v);
+          if (s != null && isJsonString(s)) {
+            try { return [k, JSON.stringify(JSON.parse(s), null, 2)]; } catch {}
+          }
+          return [k, v];
+        })
+      );
+      setDraft(formatted);
+      setDirty(false);
+      setConfirmDelete(false);
+    }
+  }, [row]);
+
+  if (!row) return null;
+
+  const handleChange = (key: string, value: string) => {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+    setDirty(true);
+  };
+
+  const handleSave = async () => {
+    onClearError?.();
+    const result = await onSave(draft);
+    if (result.success) {
+      setDirty(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    onClearError?.();
+    const result = await onDelete();
+    if (result.success) {
+      setConfirmDelete(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setDraft({ ...row });
+    setDirty(false);
+    setConfirmDelete(false);
+    onClose();
+  };
+
+  return (
+    <View style={s.panel}>
+      <View style={s.header}>
+        <View>
+          <Text style={s.eyebrow}>ROW DETAIL</Text>
+          <View style={s.titleRow}>
+            <Text style={s.title}>Row #{(rowIndex ?? 0) + 1}</Text>
+            {dirty && <View style={s.dirtyDot} />}
+          </View>
+        </View>
+        <Pressable
+          onPress={onClose}
+          style={({ pressed }) => [s.closeBtn, pressed && { opacity: 0.6 }]}
+        >
+          <Text style={s.closeBtnText}>✕</Text>
+        </Pressable>
+      </View>
+
+      <ScrollView style={s.scroll} showsVerticalScrollIndicator={false}>
+        {Object.entries(draft).map(([key, value]) => {
+          const strVal = value === null || value === undefined ? '' : String(value);
+          const isJson = isJsonString(strVal);
+          return (
+            <View key={key} style={s.field}>
+              <View style={s.fieldKeyRow}>
+                <Text style={s.fieldKey}>{key}</Text>
+                {isJson && <Text style={s.fieldJsonBadge}>JSON</Text>}
+              </View>
+              <TextInput
+                style={[s.fieldInput, isJson && s.fieldInputJson]}
+                value={strVal}
+                onChangeText={(text) => handleChange(key, text)}
+                placeholder="NULL"
+                placeholderTextColor={C.textMuted}
+                multiline={isJson || strVal.length > 50}
+              />
+            </View>
+          );
+        })}
+        <View style={{ height: 20 }} />
+      </ScrollView>
+
+      <View style={s.primaryActions}>
+        {mutationError && (
+          <View style={s.errorBox}>
+            <Text style={s.errorText}>{mutationError}</Text>
+            <Pressable onPress={onClearError} style={s.errorClose}>
+              <Text style={s.errorCloseText}>✕</Text>
+            </Pressable>
+          </View>
+        )}
+        <View style={s.primaryActionsRow}>
+          <Pressable
+            style={({ pressed }) => [s.btn, s.btnSave, (!dirty || mutating) && s.btnSaveDisabled, pressed && !dirty ? {} : pressed && s.btnPressed]}
+            onPress={dirty && !mutating ? handleSave : undefined}
+            disabled={!dirty || mutating}
+          >
+            {mutating ? (
+              <ActivityIndicator size="small" color={C.bg} />
+            ) : (
+              <Text style={[s.btnSaveText, !dirty && s.btnSaveTextDisabled]}>Save</Text>
+            )}
+          </Pressable>
+          <Pressable
+            style={({ pressed }) => [s.btn, s.btnCancel, pressed && s.btnPressed]}
+            onPress={handleCancel}
+          >
+            <Text style={s.btnCancelText}>Cancel</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <View style={s.deleteZone}>
+        {!confirmDelete ? (
+          <Pressable
+            style={({ pressed }) => [s.btnDeleteSmall, mutating && s.btnSaveDisabled, pressed && s.btnPressed]}
+            onPress={() => !mutating && setConfirmDelete(true)}
+            disabled={mutating}
+          >
+            <Text style={s.btnDeleteSmallText}>⊘  Delete this row</Text>
+          </Pressable>
+        ) : (
+          <View style={s.confirmBox}>
+            <Text style={s.confirmLabel}>This action cannot be undone.</Text>
+            <View style={s.confirmRow}>
+              <Pressable
+                style={({ pressed }) => [s.btn, s.btnConfirm, { flex: 1 }, mutating && s.btnSaveDisabled, pressed && s.btnPressed]}
+                onPress={!mutating ? handleDelete : undefined}
+                disabled={mutating}
+              >
+                {mutating ? (
+                  <ActivityIndicator size="small" color="#fff" />
+                ) : (
+                  <Text style={s.btnConfirmText}>Yes, delete</Text>
+                )}
+              </Pressable>
+              <Pressable
+                style={({ pressed }) => [s.btn, s.btnCancelSmall, { flex: 1 }, pressed && s.btnPressed]}
+                onPress={() => setConfirmDelete(false)}
+              >
+                <Text style={s.btnCancelText}>Cancel</Text>
+              </Pressable>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  panel: {
+    width: 300,
+    backgroundColor: C.surface,
+    borderLeftWidth: 1,
+    borderLeftColor: C.border,
+    flexDirection: 'column',
+    boxShadow: '-8px 0 24px rgba(0,0,0,0.45)',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+  },
+  eyebrow: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: C.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+  },
+  titleRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 2 },
+  title: { fontSize: 16, fontWeight: '700', color: C.text },
+  dirtyDot: { width: 7, height: 7, borderRadius: 4, backgroundColor: C.accent },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: C.surface2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeBtnText: { fontSize: 12, color: C.textSecondary },
+  scroll: { flex: 1, paddingHorizontal: 16, paddingTop: 16 },
+  field: { marginBottom: 16 },
+  fieldKeyRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 5 },
+  fieldKey: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: C.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.7,
+  },
+  fieldJsonBadge: {
+    fontSize: 9,
+    fontWeight: '700',
+    color: '#a78bfa',
+    backgroundColor: 'rgba(167,139,250,0.12)',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 3,
+  },
+  fieldInput: {
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    fontSize: 13,
+    color: C.text,
+    outlineStyle: 'none' as any,
+  },
+  fieldInputJson: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 18,
+    borderColor: 'rgba(167,139,250,0.3)',
+    minHeight: 180,
+    textAlignVertical: 'top',
+    paddingTop: 10,
+  },
+  primaryActions: {
+    flexDirection: 'column',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10,
+    borderTopWidth: 1,
+    borderTopColor: C.border,
+  },
+  primaryActionsRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  deleteZone: {
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+    paddingTop: 2,
+  },
+  btn: {
+    flex: 1,
+    borderRadius: 6,
+    paddingVertical: 9,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnPressed: { opacity: 0.72 },
+  btnSave: { backgroundColor: C.accent },
+  btnSaveDisabled: { backgroundColor: C.surface2 },
+  btnSaveText: { fontSize: 13, fontWeight: '600', color: '#fff' },
+  btnSaveTextDisabled: { color: C.textMuted },
+  btnCancel: { backgroundColor: C.surface2, borderWidth: 1, borderColor: C.border },
+  btnCancelText: { fontSize: 13, fontWeight: '500', color: C.textSecondary },
+  btnDeleteSmall: {
+    paddingVertical: 7,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  btnDeleteSmallText: { fontSize: 12, color: C.danger, fontWeight: '500' },
+  confirmBox: { gap: 8 },
+  confirmLabel: { fontSize: 11, color: C.textMuted, textAlign: 'center' },
+  confirmRow: { flexDirection: 'row', gap: 8 },
+  btnConfirm: { backgroundColor: C.danger },
+  btnConfirmText: { fontSize: 12, fontWeight: '600', color: '#fff' },
+  btnCancelSmall: { backgroundColor: C.surface2, borderWidth: 1, borderColor: C.border },
+  errorBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(239,68,68,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(239,68,68,0.3)',
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    marginBottom: 8,
+    width: '100%',
+  },
+  errorText: { flex: 1, fontSize: 12, color: C.danger, fontWeight: '500' },
+  errorClose: { marginLeft: 8, padding: 4 },
+  errorCloseText: { fontSize: 12, color: C.danger },
+});

package/src/components/SqlPanel.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  TextInput,
+  ActivityIndicator,
+  ScrollView,
+} from 'react-native';
+import { C } from '../theme';
+import type { RowData } from '../theme';
+
+interface SqlPanelProps {
+  selectedDB: string | null;
+  runCustomQuery: (sql: string) => Promise<{ rows: RowData[]; columns: string[]; error?: string }>;
+}
+
+export function SqlPanel({ selectedDB, runCustomQuery }: SqlPanelProps) {
+  const [sql, setSql] = useState('');
+  const [queryRunning, setQueryRunning] = useState(false);
+  const [queryResult, setQueryResult] = useState<{ rows: RowData[]; columns: string[] } | null>(null);
+  const [queryError, setQueryError] = useState<string | null>(null);
+
+  const handleRun = () => {
+    if (!sql.trim() || queryRunning || !selectedDB) return;
+    setQueryRunning(true);
+    setQueryResult(null);
+    setQueryError(null);
+    runCustomQuery(sql.trim()).then(
+      (result) => {
+        setQueryRunning(false);
+        if (result.error) {
+          setQueryError(result.error);
+        } else {
+          setQueryResult({ rows: result.rows, columns: result.columns });
+        }
+      },
+      (err: unknown) => {
+        setQueryRunning(false);
+        setQueryError(err instanceof Error ? err.message : String(err));
+      },
+    );
+  };
+
+  return (
+    <View style={s.panel}>
+      <View style={s.inputRow}>
+        <TextInput
+          style={s.sqlInput}
+          value={sql}
+          onChangeText={setSql}
+          placeholder={'SELECT * FROM "table_name"'}
+          placeholderTextColor={C.textMuted}
+          multiline
+          blurOnSubmit={false}
+        />
+        <View style={s.actions}>
+          <Pressable
+            style={[s.runBtn, (queryRunning || !sql.trim() || !selectedDB) && s.runBtnDisabled]}
+            onPress={handleRun}
+            disabled={queryRunning || !sql.trim() || !selectedDB}
+          >
+            {queryRunning
+              ? <ActivityIndicator size="small" color="#0d1117" />
+              : <Text style={s.runBtnText}>▶ Run</Text>
+            }
+          </Pressable>
+          {(queryResult !== null || queryError !== null) && (
+            <Pressable
+              style={s.clearBtn}
+              onPress={() => { setQueryResult(null); setQueryError(null); }}
+            >
+              <Text style={s.clearBtnText}>Clear</Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      {queryError !== null && (
+        <View style={s.errorRow}>
+          <Text style={s.errorIcon}>⚠</Text>
+          <Text style={s.errorText}>{queryError}</Text>
+        </View>
+      )}
+
+      {queryResult !== null && (
+        <View style={s.resultArea}>
+          <Text style={s.resultMeta}>
+            {queryResult.rows.length === 0
+              ? 'Query executed · 0 rows'
+              : `${queryResult.rows.length} row${queryResult.rows.length !== 1 ? 's' : ''} · ${queryResult.columns.length} col${queryResult.columns.length !== 1 ? 's' : ''}`}
+          </Text>
+          {queryResult.rows.length > 0 && (
+            <ScrollView horizontal showsHorizontalScrollIndicator style={s.resultScroll}>
+              <View>
+                <View style={s.miniHeaderRow}>
+                  {queryResult.columns.map((col) => (
+                    <Text key={col} style={s.miniHeaderCell} numberOfLines={1}>{col}</Text>
+                  ))}
+                </View>
+                {queryResult.rows.slice(0, 200).map((row, i) => (
+                  <View key={i} style={[s.miniRow, i % 2 === 0 ? s.miniRowEven : s.miniRowOdd]}>
+                    {queryResult.columns.map((col) => {
+                      const val = row[col];
+                      return (
+                        <Text key={col} style={[s.miniCell, val == null && s.miniCellNull]} numberOfLines={1}>
+                          {val == null ? 'NULL' : String(val)}
+                        </Text>
+                      );
+                    })}
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  panel: {
+    backgroundColor: C.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 14,
+    gap: 10,
+  },
+  inputRow: { flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
+  sqlInput: {
+    flex: 1,
+    backgroundColor: C.bg,
+    borderWidth: 1,
+    borderColor: C.border,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 13,
+    color: C.text,
+    fontFamily: 'monospace',
+    outlineStyle: 'none' as any,
+    minHeight: 64,
+    textAlignVertical: 'top',
+    lineHeight: 20,
+  },
+  actions: { gap: 6 },
+  runBtn: {
+    height: 34,
+    paddingHorizontal: 14,
+    borderRadius: 7,
+    backgroundColor: C.accent,
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    minWidth: 72,
+  },
+  runBtnDisabled: { opacity: 0.4 },
+  runBtnText: { fontSize: 12, fontWeight: '700', color: '#0d1117' },
+  clearBtn: {
+    height: 28,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+  },
+  clearBtnText: { fontSize: 11, color: C.textSecondary },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    backgroundColor: 'rgba(248,81,73,0.08)',
+    borderWidth: 1,
+    borderColor: 'rgba(248,81,73,0.25)',
+    borderRadius: 7,
+    padding: 10,
+  },
+  errorIcon: { fontSize: 13, color: C.danger, marginTop: 1 },
+  errorText: { flex: 1, fontSize: 12, color: C.danger, lineHeight: 18, fontFamily: 'monospace' },
+  resultArea: { gap: 6 },
+  resultMeta: { fontSize: 11, color: C.textMuted },
+  resultScroll: { maxHeight: 240, borderRadius: 7, borderWidth: 1, borderColor: C.border },
+  miniHeaderRow: {
+    flexDirection: 'row',
+    backgroundColor: C.surface2,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+  },
+  miniHeaderCell: {
+    width: 130,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    fontSize: 10,
+    fontWeight: '700',
+    color: C.textSecondary,
+    textTransform: 'uppercase',
+    borderRightWidth: 1,
+    borderRightColor: C.borderSubtle,
+  },
+  miniRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: C.borderSubtle },
+  miniRowEven: { backgroundColor: C.bg },
+  miniRowOdd: { backgroundColor: C.surface },
+  miniCell: {
+    width: 130,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    fontSize: 12,
+    color: C.text,
+    borderRightWidth: 1,
+    borderRightColor: C.borderSubtle,
+  },
+  miniCellNull: { color: C.textMuted, fontStyle: 'italic' },
+});

package/src/components/Toolbar.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { C } from '../theme';
+import { Dropdown } from './Dropdown';
+
+interface ToolbarProps {
+  databases: string[];
+  selectedDB: string | null;
+  tables: string[];
+  selectedTable: string | null;
+  loadingTables: boolean;
+  loadingData: boolean;
+  rowCount: number;
+  columnCount: number;
+  onSelectDB: (db: string) => void;
+  onSelectTable: (table: string) => void;
+  onRefresh: () => void;
+  sqlOpen: boolean;
+  onToggleSql: () => void;
+}
+
+export function Toolbar({
+  databases,
+  selectedDB,
+  tables,
+  selectedTable,
+  loadingTables,
+  loadingData,
+  rowCount,
+  columnCount,
+  onSelectDB,
+  onSelectTable,
+  onRefresh,
+  sqlOpen,
+  onToggleSql,
+}: ToolbarProps) {
+  return (
+    <View style={s.toolbar}>
+      <View style={s.topRow}>
+        <View style={s.selectors}>
+          <Dropdown
+            label="Database"
+            value={selectedDB}
+            options={databases}
+            onSelect={onSelectDB}
+            loading={loadingTables && !selectedTable}
+            zIndex={20}
+          />
+          <View style={s.divider} />
+          <Dropdown
+            label="Table"
+            value={selectedTable}
+            options={tables}
+            onSelect={onSelectTable}
+            loading={loadingTables}
+            disabled={!selectedDB}
+            zIndex={10}
+          />
+          <View style={s.divider} />
+          <Pressable
+            style={({ pressed }) => [s.refreshBtn, pressed && s.refreshBtnPressed]}
+            onPress={onRefresh}
+            disabled={!selectedDB}
+          >
+            <Text style={[s.refreshIcon, !selectedDB && s.refreshIconDisabled]}>↻</Text>
+          </Pressable>
+          <View style={s.divider} />
+          <Pressable
+            style={({ pressed }) => [s.sqlBtn, sqlOpen && s.sqlBtnActive, !selectedDB && s.sqlBtnDisabled, pressed && { opacity: 0.8 }]}
+            onPress={onToggleSql}
+            disabled={!selectedDB}
+          >
+            <Text style={[s.sqlBtnText, sqlOpen && s.sqlBtnTextActive]}>›_ SQL</Text>
+          </Pressable>
+        </View>
+
+        <View style={s.badges}>
+          {selectedTable && !loadingData && (
+            <View style={s.badge}>
+              <Text style={s.badgeText}>{rowCount} rows</Text>
+            </View>
+          )}
+          {columnCount > 0 && !loadingData && (
+            <View style={[s.badge, s.badgeMuted]}>
+              <Text style={s.badgeText}>{columnCount} cols</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  toolbar: {
+    flexDirection: 'column',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    backgroundColor: C.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+    zIndex: 50,
+    overflow: 'visible',
+  },
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingBottom: 14,
+    gap: 20,
+  },
+  brand: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingBottom: 2,
+    marginRight: 4,
+  },
+  brandMark: { fontSize: 18, color: C.accent },
+  brandName: { fontSize: 14, fontWeight: '700', color: C.text, letterSpacing: 0.2 },
+  selectors: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    flex: 1,
+    overflow: 'visible',
+  },
+  divider: { width: 12 },
+  refreshBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 7,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 1,
+    cursor: 'pointer',
+  },
+  refreshBtnPressed: { backgroundColor: C.accentSubtle, borderColor: C.accent },
+  refreshIcon: { fontSize: 16, color: C.textSecondary, lineHeight: 18 },
+  refreshIconDisabled: { color: C.textMuted, opacity: 0.4 },
+  badges: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingBottom: 3 },
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    backgroundColor: C.accentSubtle,
+    borderRadius: 20,
+  },
+  badgeMuted: { backgroundColor: C.surface2 },
+  badgeText: { fontSize: 11, fontWeight: '600', color: C.textSecondary },
+  sqlBtn: {
+    height: 32,
+    paddingHorizontal: 10,
+    borderRadius: 7,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 1,
+    cursor: 'pointer',
+    marginLeft: 40
+  },
+  sqlBtnActive: { backgroundColor: C.accentSubtle, borderColor: C.accent },
+  sqlBtnDisabled: { opacity: 0.4 },
+  sqlBtnText: { fontSize: 12, fontWeight: '700', color: C.textSecondary, fontFamily: 'monospace' },
+  sqlBtnTextActive: { color: C.accent },
+});