rozenite-sqlite 0.0.2

package/src/components/Dropdown.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Pressable,
+  ActivityIndicator,
+} from 'react-native';
+import { C } from '../theme';
+
+export interface DropdownProps {
+  label: string;
+  value: string | null;
+  options: string[];
+  onSelect: (value: string) => void;
+  formatLabel?: (v: string) => string;
+  loading?: boolean;
+  disabled?: boolean;
+  zIndex?: number;
+}
+
+export function Dropdown({
+  label,
+  value,
+  options,
+  onSelect,
+  formatLabel,
+  loading,
+  disabled,
+  zIndex = 10,
+}: DropdownProps) {
+  const [open, setOpen] = useState(false);
+  const fmt = formatLabel ?? ((v: string) => v);
+
+  return (
+    <View style={[s.root, { zIndex }]}>
+      <Text style={s.label}>{label}</Text>
+      <Pressable
+        style={[s.trigger, open && s.triggerOpen, disabled && s.triggerDisabled]}
+        onPress={() => !disabled && setOpen((o) => !o)}
+      >
+        {loading ? <ActivityIndicator size="small" color={C.textSecondary} style={s.spinner} /> : null}
+        <Text style={[s.triggerText, !value && s.triggerPlaceholder]} numberOfLines={1}>
+          {value ? fmt(value) : '— select —'}
+        </Text>
+        <Text style={s.chevron}>{open ? '▴' : '▾'}</Text>
+      </Pressable>
+
+      {open && (
+        <View style={[s.menu, { zIndex: zIndex + 10 }]}>
+          <ScrollView style={s.menuScroll} nestedScrollEnabled>
+            {options.length === 0 ? (
+              <Text style={s.menuEmpty}>No options</Text>
+            ) : (
+              options.map((opt) => (
+                <Pressable
+                  key={opt}
+                  style={({ pressed }) => [
+                    s.menuItem,
+                    value === opt && s.menuItemSelected,
+                    pressed && s.menuItemPressed,
+                  ]}
+                  onPress={() => {
+                    onSelect(opt);
+                    setOpen(false);
+                  }}
+                >
+                  <Text style={[s.menuItemText, value === opt && s.menuItemTextSelected]}>
+                    {fmt(opt)}
+                  </Text>
+                  {value === opt && <Text style={s.checkmark}>✓</Text>}
+                </Pressable>
+              ))
+            )}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  root: { position: 'relative', minWidth: 180 },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: C.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+    marginBottom: 5,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 7,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    minWidth: 180,
+  },
+  triggerOpen: { borderColor: C.accent },
+  triggerDisabled: { opacity: 0.35 },
+  spinner: { marginRight: 6 },
+  triggerText: { fontSize: 13, color: C.text, fontWeight: '500', flex: 1 },
+  triggerPlaceholder: { color: C.textMuted },
+  chevron: { fontSize: 11, color: C.textSecondary, marginLeft: 8 },
+  menu: {
+    position: 'absolute',
+    top: 62,
+    left: 0,
+    right: 0,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    borderRadius: 8,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.5,
+    shadowRadius: 20,
+  },
+  menuScroll: { maxHeight: 200 },
+  menuEmpty: { padding: 14, fontSize: 12, color: C.textMuted, textAlign: 'center' },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  menuItemSelected: { backgroundColor: C.accentSubtle },
+  menuItemPressed: { backgroundColor: C.surface },
+  menuItemText: { fontSize: 13, color: C.text },
+  menuItemTextSelected: { color: C.accent, fontWeight: '600' },
+  checkmark: { fontSize: 12, color: C.accent },
+});

package/src/components/Pagination.tsx

@@ -0,0 +1,266 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { C } from '../theme';
+
+interface PaginationProps {
+  page: number;
+  pageSize: number;
+  totalFiltered: number;
+  totalRows: number;
+  columnCount: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  onClearTable?: () => void;
+}
+
+const PAGE_SIZES = [10, 25, 50, 100];
+const MAX_PAGE_BUTTONS = 5;
+
+export default function Pagination({
+  page,
+  pageSize,
+  totalFiltered,
+  totalRows,
+  columnCount,
+  onPageChange,
+  onPageSizeChange,
+  onClearTable,
+}: PaginationProps) {
+  const [confirmClear, setConfirmClear] = useState(false);
+  const totalPages = Math.max(1, Math.ceil(totalFiltered / pageSize));
+  const from = totalFiltered === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, totalFiltered);
+
+  const half = Math.floor(MAX_PAGE_BUTTONS / 2);
+  let startPage = Math.max(1, page - half);
+  let endPage = startPage + MAX_PAGE_BUTTONS - 1;
+  if (endPage > totalPages) {
+    endPage = totalPages;
+    startPage = Math.max(1, endPage - MAX_PAGE_BUTTONS + 1);
+  }
+  const pageButtons: number[] = [];
+  for (let i = startPage; i <= endPage; i++) pageButtons.push(i);
+
+  const filterActive = totalFiltered !== totalRows;
+
+  return (
+    <View style={s.bar}>
+      <View style={s.left}>
+        {onClearTable && !confirmClear && (
+          <Pressable style={s.clearBtn} onPress={() => setConfirmClear(true)}>
+            <Text style={s.clearBtnText}>⊘ Clear table</Text>
+          </Pressable>
+        )}
+        {onClearTable && confirmClear && (
+          <View style={s.confirmRow}>
+            <Text style={s.confirmLabel}>Delete all rows?</Text>
+            <Pressable
+              style={s.confirmYes}
+              onPress={() => { setConfirmClear(false); onClearTable(); }}
+            >
+              <Text style={s.confirmYesText}>Yes, clear</Text>
+            </Pressable>
+            <Pressable style={s.confirmNo} onPress={() => setConfirmClear(false)}>
+              <Text style={s.confirmNoText}>Cancel</Text>
+            </Pressable>
+          </View>
+        )}
+        <Text style={s.info}>
+          {totalFiltered === 0
+            ? 'No rows'
+            : `${from}–${to} of ${totalFiltered}${filterActive ? ` (filtered from ${totalRows})` : ''} rows · ${columnCount} col${columnCount !== 1 ? 's' : ''}`}
+        </Text>
+      </View>
+
+      <View style={s.controls}>
+        <NavBtn label="«" disabled={page <= 1} onPress={() => onPageChange(1)} />
+        <NavBtn label="‹" disabled={page <= 1} onPress={() => onPageChange(page - 1)} />
+
+        {startPage > 1 && (
+          <>
+            <PageBtn num={1} active={false} onPress={() => onPageChange(1)} />
+            {startPage > 2 && <Text style={s.ellipsis}>…</Text>}
+          </>
+        )}
+
+        {pageButtons.map((n) => (
+          <PageBtn key={n} num={n} active={n === page} onPress={() => onPageChange(n)} />
+        ))}
+
+        {endPage < totalPages && (
+          <>
+            {endPage < totalPages - 1 && <Text style={s.ellipsis}>…</Text>}
+            <PageBtn num={totalPages} active={false} onPress={() => onPageChange(totalPages)} />
+          </>
+        )}
+
+        <NavBtn label="›" disabled={page >= totalPages} onPress={() => onPageChange(page + 1)} />
+        <NavBtn label="»" disabled={page >= totalPages} onPress={() => onPageChange(totalPages)} />
+      </View>
+
+      <View style={s.sizeRow}>
+        {PAGE_SIZES.map((sz) => (
+          <Pressable
+            key={sz}
+            onPress={() => onPageSizeChange(sz)}
+            style={[s.sizeBtn, sz === pageSize && s.sizeBtnActive]}
+          >
+            <Text style={[s.sizeBtnText, sz === pageSize && s.sizeBtnTextActive]}>{sz}</Text>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+function PageBtn({ num, active, onPress }: { num: number; active: boolean; onPress: () => void }) {
+  return (
+    <Pressable onPress={onPress} style={[s.pageBtn, active && s.pageBtnActive]}>
+      <Text style={[s.pageBtnText, active && s.pageBtnTextActive]}>{num}</Text>
+    </Pressable>
+  );
+}
+
+function NavBtn({ label, disabled, onPress }: { label: string; disabled: boolean; onPress: () => void }) {
+  return (
+    <Pressable onPress={disabled ? undefined : onPress} style={[s.navBtn, disabled && s.navBtnDisabled]}>
+      <Text style={[s.navBtnText, disabled && s.navBtnTextDisabled]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const s = StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: C.surface,
+    borderTopWidth: 1,
+    borderTopColor: C.border,
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  left: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 180,
+    flexShrink: 1,
+  },
+  info: {
+    color: C.textMuted,
+    fontSize: 12,
+  },
+  clearBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    cursor: 'pointer',
+  },
+  clearBtnText: { fontSize: 12, color: C.danger, fontWeight: '500' },
+  confirmRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  confirmLabel: { fontSize: 11, color: C.textMuted },
+  confirmYes: {
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 5,
+    backgroundColor: C.danger,
+    cursor: 'pointer',
+  },
+  confirmYesText: { fontSize: 11, fontWeight: '600', color: '#fff' },
+  confirmNo: {
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 5,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+    cursor: 'pointer',
+  },
+  confirmNoText: { fontSize: 11, color: C.textSecondary },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  ellipsis: {
+    color: C.textMuted,
+    fontSize: 13,
+    paddingHorizontal: 4,
+    lineHeight: 28,
+  },
+  pageBtn: {
+    minWidth: 28,
+    height: 28,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 6,
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  pageBtnActive: {
+    backgroundColor: C.accent,
+    borderColor: C.accent,
+  },
+  pageBtnText: {
+    color: C.text,
+    fontSize: 12,
+  },
+  pageBtnTextActive: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  navBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  navBtnDisabled: {
+    opacity: 0.3,
+  },
+  navBtnText: {
+    color: C.text,
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  navBtnTextDisabled: {
+    color: C.textMuted,
+  },
+  sizeRow: {
+    flexDirection: 'row',
+    gap: 2,
+    alignItems: 'center',
+  },
+  sizeBtn: {
+    height: 26,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  sizeBtnActive: {
+    backgroundColor: C.surface2,
+    borderColor: C.accent,
+  },
+  sizeBtnText: {
+    color: C.textMuted,
+    fontSize: 11,
+  },
+  sizeBtnTextActive: {
+    color: C.accent,
+    fontWeight: '600',
+  },
+});

package/src/components/RowDetailPanel.tsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, Pressable, TextInput } from 'react-native';
+import { C, type RowData } from '../theme';
+
+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) => void;
+  onDelete: () => void;
+}
+
+export function RowDetailPanel({ row, rowIndex, onClose, onSave, onDelete }: 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 = () => {
+    onSave(draft);
+    setDirty(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}>
+        <Pressable
+          style={({ pressed }) => [s.btn, s.btnSave, !dirty && s.btnSaveDisabled, pressed && !dirty ? {} : pressed && s.btnPressed]}
+          onPress={dirty ? handleSave : undefined}
+        >
+          <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 style={s.deleteZone}>
+        {!confirmDelete ? (
+          <Pressable
+            style={({ pressed }) => [s.btnDeleteSmall, pressed && s.btnPressed]}
+            onPress={() => setConfirmDelete(true)}
+          >
+            <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 }, pressed && s.btnPressed]}
+                onPress={onDelete}
+              >
+                <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',
+    shadowColor: '#000',
+    shadowOffset: { width: -8, height: 0 },
+    shadowOpacity: 0.45,
+    shadowRadius: 20,
+    elevation: 10,
+    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: 'row',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10,
+    borderTopWidth: 1,
+    borderTopColor: C.border,
+  },
+  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 },
+});