rozenite-sqlite 0.0.6 → 0.0.8

package/src/components/Dropdown.tsx

@@ -1,139 +0,0 @@
-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

@@ -1,266 +0,0 @@
-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

@@ -1,273 +0,0 @@
-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 },
-});