npm - rozenite-sqlite - Versions diffs - 0.0.9 → 0.0.12 - Mend

rozenite-sqlite 0.0.9 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CHANGELOG.md +13 -0
package/README.md +1 -1
package/dist/assets/panel-BKWy6irM.js +58 -0
package/dist/panel.html +30 -0
package/dist/react-native.cjs +1 -0
package/dist/react-native.d.ts +28 -0
package/dist/react-native.js +77 -0
package/dist/rozenite.json +1 -0
package/package.json +2 -2
package/react-native.ts +2 -0
package/rozenite.config.ts +8 -0
package/src/components/DataTable.tsx +501 -0
package/src/components/Dropdown.tsx +136 -0
package/src/components/Pagination.tsx +266 -0
package/src/components/Placeholder.tsx +81 -0
package/src/components/RowDetailPanel.tsx +324 -0
package/src/components/SqlPanel.tsx +220 -0
package/src/components/Toolbar.tsx +168 -0
package/src/constants.ts +17 -0
package/src/hooks/useBridgeSync.ts +217 -0
package/src/hooks/useExplorerState.ts +216 -0
package/src/hooks/useRozeniteSQLite.ts +127 -0
package/src/index.ts +1 -0
package/src/mockData.ts +210 -0
package/src/panel.tsx +74 -0
package/src/theme.ts +17 -0
package/src/types/react-native-web.d.ts +13 -0
package/tsconfig.json +25 -0
package/vite.config.ts +20 -0

package/dist/panel.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>panel Panel</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        overflow: hidden;
+      }
+      #root {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+    <script>
+      var __ROZENITE_PANEL__ = true;
+    </script>
+    <script type="module" crossorigin src="./assets/panel-BKWy6irM.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/react-native.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@rozenite/plugin-bridge"),d="rozenite-sqlite",s={GET_DB_LIST:"get-db-list",SEND_DB_LIST:"send-db-list",SQL_EXECUTE:"sql-execute",SQL_EXEC_RESULT:"sql-exec-result",SAVE_ROW:"save-row",DELETE_ROW:"delete-row",CLEAR_TABLE:"clear-table",MUTATION_RESULT:"mutation-result"};function l(n){return n==null?"NULL":typeof n=="number"?String(n):typeof n=="boolean"?n?"1":"0":`'${String(n).replace(/'/g,"''")}'`}function g(n){const e=f.useRozeniteDevToolsClient({pluginId:d}),T=S.useRef(n);S.useEffect(()=>{T.current=n}),S.useEffect(()=>{if(!e)return;const L=[e.onMessage(s.GET_DB_LIST,()=>{e.send(s.SEND_DB_LIST,T.current.databases)}),e.onMessage(s.SQL_EXECUTE,r=>{const{dbName:u,query:o}=r;T.current.sqlExecutor(u,o).then(t=>{e.send(s.SQL_EXEC_RESULT,t)},t=>{e.send(s.SQL_EXEC_RESULT,{error:t instanceof Error?t.message:String(t)})})}),e.onMessage(s.SAVE_ROW,r=>{const{dbName:u,table:o,row:t,primaryKey:E}=r,a=t[E],_=Object.keys(t).filter(c=>c!==E).map(c=>`"${c}" = ${l(t[c])}`).join(", "),R=`UPDATE "${o}" SET ${_} WHERE "${E}" = ${l(a)}`;T.current.sqlExecutor(u,R).then(()=>e.send(s.MUTATION_RESULT,{success:!0}),c=>e.send(s.MUTATION_RESULT,{success:!1,error:c instanceof Error?c.message:String(c)}))}),e.onMessage(s.DELETE_ROW,r=>{const{dbName:u,table:o,primaryKey:t,primaryKeyValue:E}=r,a=`DELETE FROM "${o}" WHERE "${t}" = ${l(E)}`;T.current.sqlExecutor(u,a).then(()=>e.send(s.MUTATION_RESULT,{success:!0}),i=>e.send(s.MUTATION_RESULT,{success:!1,error:i instanceof Error?i.message:String(i)}))}),e.onMessage(s.CLEAR_TABLE,r=>{const{dbName:u,table:o}=r,t=`DELETE FROM "${o}"`;T.current.sqlExecutor(u,t).then(()=>e.send(s.MUTATION_RESULT,{success:!0}),E=>e.send(s.MUTATION_RESULT,{success:!1,error:E instanceof Error?E.message:String(E)}))})];return()=>{L.forEach(r=>r.remove())}},[e])}exports.useRozeniteSQLite=g;

package/dist/react-native.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+export declare interface RozeniteSQLiteConfig {
+    /** List of database names exposed to the devtools panel, e.g. ["app.db", "cache.db"] */
+    databases: string[];
+    /** Library-agnostic SQL runner — receives the db name and raw query, returns rows */
+    sqlExecutor: SQLExecutor;
+}
+export declare type SQLExecutor = (dbName: string, query: string) => Promise<Record<string, unknown>[]>;
+/**
+ * Connects your React Native app to the SQLighter devtools panel.
+ *
+ * Call this once somewhere near the root of your app (or in the component
+ * that holds the database instances). It handles all devtools communication —
+ * you don't need to touch the plugin-bridge directly.
+ *
+ * @example
+ * useRozeniteSQLite({
+ *   databases: ['app.db', 'cache.db'],
+ *   sqlExecutor: async (dbName, query) => {
+ *     const db = myDatabases[dbName];
+ *     return db.getAllAsync(query);
+ *   },
+ * });
+ */
+export declare function useRozeniteSQLite(config: RozeniteSQLiteConfig): void;
+export { }

package/dist/react-native.js ADDED Viewed

@@ -0,0 +1,77 @@
+import { useRef as f, useEffect as L } from "react";
+import { useRozeniteDevToolsClient as U } from "@rozenite/plugin-bridge";
+const m = "rozenite-sqlite", s = {
+  GET_DB_LIST: "get-db-list",
+  SEND_DB_LIST: "send-db-list",
+  SQL_EXECUTE: "sql-execute",
+  SQL_EXEC_RESULT: "sql-exec-result",
+  SAVE_ROW: "save-row",
+  DELETE_ROW: "delete-row",
+  CLEAR_TABLE: "clear-table",
+  MUTATION_RESULT: "mutation-result"
+};
+function S(n) {
+  return n == null ? "NULL" : typeof n == "number" ? String(n) : typeof n == "boolean" ? n ? "1" : "0" : `'${String(n).replace(/'/g, "''")}'`;
+}
+function N(n) {
+  const e = U({ pluginId: m }), T = f(n);
+  L(() => {
+    T.current = n;
+  }), L(() => {
+    if (!e) return;
+    const _ = [
+      e.onMessage(s.GET_DB_LIST, () => {
+        e.send(s.SEND_DB_LIST, T.current.databases);
+      }),
+      e.onMessage(s.SQL_EXECUTE, (r) => {
+        const { dbName: o, query: u } = r;
+        T.current.sqlExecutor(o, u).then(
+          (t) => {
+            e.send(s.SQL_EXEC_RESULT, t);
+          },
+          (t) => {
+            e.send(s.SQL_EXEC_RESULT, {
+              error: t instanceof Error ? t.message : String(t)
+            });
+          }
+        );
+      }),
+      e.onMessage(s.SAVE_ROW, (r) => {
+        const { dbName: o, table: u, row: t, primaryKey: E } = r, i = t[E], l = Object.keys(t).filter((c) => c !== E).map((c) => `"${c}" = ${S(t[c])}`).join(", "), R = `UPDATE "${u}" SET ${l} WHERE "${E}" = ${S(i)}`;
+        T.current.sqlExecutor(o, R).then(
+          () => e.send(s.MUTATION_RESULT, { success: !0 }),
+          (c) => e.send(s.MUTATION_RESULT, {
+            success: !1,
+            error: c instanceof Error ? c.message : String(c)
+          })
+        );
+      }),
+      e.onMessage(s.DELETE_ROW, (r) => {
+        const { dbName: o, table: u, primaryKey: t, primaryKeyValue: E } = r, i = `DELETE FROM "${u}" WHERE "${t}" = ${S(E)}`;
+        T.current.sqlExecutor(o, i).then(
+          () => e.send(s.MUTATION_RESULT, { success: !0 }),
+          (a) => e.send(s.MUTATION_RESULT, {
+            success: !1,
+            error: a instanceof Error ? a.message : String(a)
+          })
+        );
+      }),
+      e.onMessage(s.CLEAR_TABLE, (r) => {
+        const { dbName: o, table: u } = r, t = `DELETE FROM "${u}"`;
+        T.current.sqlExecutor(o, t).then(
+          () => e.send(s.MUTATION_RESULT, { success: !0 }),
+          (E) => e.send(s.MUTATION_RESULT, {
+            success: !1,
+            error: E instanceof Error ? E.message : String(E)
+          })
+        );
+      })
+    ];
+    return () => {
+      _.forEach((r) => r.remove());
+    };
+  }, [e]);
+}
+export {
+  N as useRozeniteSQLite
+};

package/dist/rozenite.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name":"rozenite-sqlite","version":"0.0.12","description":"SQLighter - SQLite explorer for React Native devtools","panels":[{"name":"SQLighter","source":"/panel.html"}]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "rozenite-sqlite",
-  "version": "0.0.9",
-  "description": "SQLite explorer for RN devtools",
+  "version": "0.0.12",
+  "description": "SQLighter - SQLite explorer for React Native devtools",
   "type": "module",
   "main": "./dist/react-native.js",
   "module": "./dist/react-native.js",

package/react-native.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useRozeniteSQLite } from './src/hooks/useRozeniteSQLite';
2	+ export type { RozeniteSQLiteConfig, SQLExecutor } from './src/hooks/useRozeniteSQLite';

package/rozenite.config.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'SQLighter',
+      source: './src/panel.tsx',
+    },
+  ],
+};

package/src/components/DataTable.tsx ADDED Viewed

@@ -0,0 +1,501 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Pressable,
+  TextInput,
+} from 'react-native';
+import { C, type RowData } from '../theme';
+import Pagination from './Pagination';
+import { Placeholder } from './Placeholder';
+import type { ExplorerStatus } from '../hooks/useExplorerState';
+export interface DataTableProps {
+  columns: string[];
+  rows: RowData[];
+  selectedRowIndex: number | null;
+  onRowSelect: (originalIndex: number) => void;
+  status: ExplorerStatus;
+  error: string | null;
+  onClearTable?: () => void;
+  onReconnect?: () => void;
+}
+const COL_WIDTH = 160;
+const IDX_WIDTH = 44;
+const HEADER_HEIGHT = 42;
+export function DataTable({ columns, rows, selectedRowIndex, onRowSelect, status, error, onClearTable, onReconnect }: DataTableProps) {
+  const [sortCol, setSortCol] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [search, setSearch] = useState<Record<string, string>>({});
+  const [filterOpenCol, setFilterOpenCol] = useState<string | null>(null);
+  const [scrollX, setScrollX] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [colWidths, setColWidths] = useState<Record<string, number>>({});
+  const resizeRef = useRef<{ col: string; startX: number; startW: number } | null>(null);
+  const colWidthsRef = useRef<Record<string, number>>({});
+  useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);
+  const getColWidth = useCallback((col: string) => colWidths[col] ?? COL_WIDTH, [colWidths]);
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const id = 'rozenite-scrollbar-styles';
+    if (document.getElementById(id)) return;
+    const el = document.createElement('style');
+    el.id = id;
+    el.textContent = [
+      '::-webkit-scrollbar { width: 7px; height: 7px; }',
+      '::-webkit-scrollbar-track { background: transparent; }',
+      '::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }',
+      '::-webkit-scrollbar-thumb:hover { background: #484f58; border: 2px solid transparent; background-clip: content-box; }',
+      '::-webkit-scrollbar-corner { background: transparent; }',
+    ].join('\n');
+    document.head.appendChild(el);
+  }, []);
+  useEffect(() => {
+    setSortCol(null);
+    setSortDir('asc');
+    setSearch({});
+    setFilterOpenCol(null);
+    setScrollX(0);
+    setPage(1);
+    setColWidths({});
+  }, [columns]);
+  useEffect(() => {
+    setPage(1);
+  }, [search, sortCol, sortDir]);
+  const handleSortPress = useCallback((col: string) => {
+    setSortCol((prev) => {
+      if (prev === col) {
+        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        return prev;
+      }
+      setSortDir('asc');
+      return col;
+    });
+  }, []);
+  const handleFilterIconPress = useCallback((col: string) => {
+    setFilterOpenCol((prev) => (prev === col ? null : col));
+  }, []);
+  const handleSearchChange = useCallback((col: string, value: string) => {
+    setSearch((prev) => ({ ...prev, [col]: value }));
+  }, []);
+  const handleResizeStart = useCallback((col: string, e: { clientX: number; preventDefault: () => void; stopPropagation: () => void }) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startW = colWidthsRef.current[col] ?? COL_WIDTH;
+    resizeRef.current = { col, startX: e.clientX, startW };
+    if (typeof document === 'undefined') return;
+    document.body.style.userSelect = 'none';
+    const onMove = (ev: MouseEvent) => {
+      if (!resizeRef.current) return;
+      const delta = ev.clientX - resizeRef.current.startX;
+      const newW = Math.max(60, resizeRef.current.startW + delta);
+      setColWidths((prev) => ({ ...prev, [resizeRef.current!.col]: newW }));
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, []);
+  const processedRows = useMemo(() => {
+    let result = rows.map((row, originalIndex) => ({ row, originalIndex }));
+    for (const [col, query] of Object.entries(search)) {
+      if (!query.trim()) continue;
+      const q = query.toLowerCase();
+      result = result.filter(({ row }) => {
+        const val = row[col];
+        return val !== null && val !== undefined && String(val).toLowerCase().includes(q);
+      });
+    }
+    if (sortCol) {
+      result.sort((a, b) => {
+        const av = a.row[sortCol];
+        const bv = b.row[sortCol];
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        const cmp = String(av).localeCompare(String(bv), undefined, { numeric: true });
+        return sortDir === 'asc' ? cmp : -cmp;
+      });
+    }
+    return result;
+  }, [rows, search, sortCol, sortDir]);
+  const hasActiveSearch = Object.values(search).some((v) => v.trim().length > 0);
+  const pagedRows = useMemo(
+    () => processedRows.slice((page - 1) * pageSize, page * pageSize),
+    [processedRows, page, pageSize],
+  );
+  const filterColIdx = filterOpenCol !== null ? columns.indexOf(filterOpenCol) : -1;
+  const popoverLeft = filterColIdx >= 0
+    ? Math.max(0, columns.slice(0, filterColIdx).reduce((acc, c) => acc + (colWidths[c] ?? COL_WIDTH), IDX_WIDTH) - scrollX)
+    : 0;
+  if (status === 'connecting') {
+    return (
+      <Placeholder
+        emoji="📡"
+        title="Waiting for app…"
+        subtitle="Make sure your app is running and useSQLighter is initialized"
+        buttonText={onReconnect ? "↻ Reconnect" : undefined}
+        onButtonPress={onReconnect}
+      />
+    );
+  }
+  if (status === 'error') {
+    return (
+      <Placeholder
+        emoji="⚠️"
+        title="Query failed"
+        subtitle={error ?? undefined}
+        buttonText={onReconnect ? "↻ Try again" : undefined}
+        onButtonPress={onReconnect}
+      />
+    );
+  }
+  if (status === 'loadingTables' || status === 'loadingData') {
+    return (
+      <Placeholder
+        loading
+        title="Loading…"
+        buttonText={onReconnect ? "↻ Refresh" : undefined}
+        onButtonPress={onReconnect}
+      />
+    );
+  }
+  if (columns.length === 0) {
+    return (
+      <Placeholder
+        emoji="🗄️"
+        title="No data to display"
+        subtitle="Select a database and table above"
+      />
+    );
+  }
+  if (rows.length === 0) {
+    return (
+      <Placeholder
+        emoji="📭"
+        title="Table is empty"
+        subtitle="This table has no rows yet"
+      />
+    );
+  }
+  return (
+    <View style={s.outer}>
+      <View style={s.headerClip}>
+        <View style={[s.headerRow, { transform: [{ translateX: -scrollX }] }]}>
+          <View style={[s.cell, { width: IDX_WIDTH }]}>
+            <Text style={s.headerText}>#</Text>
+          </View>
+          {columns.map((col) => {
+            const isSortActive = sortCol === col;
+            const hasFilter = (search[col] ?? '').trim().length > 0;
+            const isFilterOpen = filterOpenCol === col;
+            return (
+              <View key={col} style={[s.headerCellWrapper, { width: getColWidth(col) }]}>
+                <Pressable
+                  style={[s.sortBtn, isSortActive && s.sortBtnActive]}
+                  onPress={() => handleSortPress(col)}
+                >
+                  <Text
+                    style={[s.headerText, isSortActive && s.headerTextActive]}
+                    numberOfLines={1}
+                  >
+                    {col}
+                  </Text>
+                  <Text style={[s.sortArrow, isSortActive && s.sortArrowActive]}>
+                    {isSortActive ? (sortDir === 'asc' ? ' ▴' : ' ▾') : ' ⇅'}
+                  </Text>
+                </Pressable>
+                <Pressable
+                  style={[s.filterBtn, (hasFilter || isFilterOpen) && s.filterBtnActive]}
+                  onPress={() => handleFilterIconPress(col)}
+                >
+                  <Text style={[s.filterBtnText, (hasFilter || isFilterOpen) && s.filterBtnTextActive]}>
+                    ⌕
+                  </Text>
+                </Pressable>
+                <View
+                  style={s.resizeHandle}
+                  onMouseDown={(e: any) => handleResizeStart(col, e)}
+                />
+              </View>
+            );
+          })}
+        </View>
+      </View>
+      <ScrollView
+        style={s.vScroll}
+        showsVerticalScrollIndicator={true}
+        indicatorStyle="white"
+      >
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={true}
+          indicatorStyle="white"
+          onScroll={(e) => setScrollX(e.nativeEvent.contentOffset.x)}
+          scrollEventThrottle={16}
+          onScrollBeginDrag={() => setFilterOpenCol(null)}
+        >
+          <View>
+            {processedRows.length === 0 && hasActiveSearch && (
+              <View style={s.noResults}>
+                <Text style={s.noResultsText}>No rows match the current filters</Text>
+              </View>
+            )}
+            {pagedRows.map(({ row, originalIndex }, visIdx) => (
+              <Pressable
+                key={originalIndex}
+                style={({ pressed }) => [
+                  s.row,
+                  visIdx % 2 === 0 ? s.rowEven : s.rowOdd,
+                  selectedRowIndex === originalIndex && s.rowSelected,
+                  pressed && s.rowPressed,
+                ]}
+                onPress={() => onRowSelect(originalIndex)}
+              >
+                <View style={[s.cell, { width: IDX_WIDTH }]}>
+                  <Text style={s.idxText}>{originalIndex + 1}</Text>
+                </View>
+                {columns.map((col) => {
+                  const val = row[col];
+                  const isNull = val == null;
+                  const query = (search[col] ?? '').toLowerCase().trim();
+                  const display = isNull ? 'NULL' : String(val);
+                  const isJsonVal = !isNull && isJsonString(display);
+                  return (
+                    <View key={col} style={[s.cell, { width: getColWidth(col) }]}>
+                      {isJsonVal ? (
+                        <View style={s.jsonCell}>
+                          <Text style={s.jsonBadge}>{display.trimStart()[0] === '[' ? '[]' : '{}'}</Text>
+                          <Text style={s.cellText} numberOfLines={1}>{display}</Text>
+                        </View>
+                      ) : query && !isNull ? (
+                        <HighlightText text={display} query={query} />
+                      ) : (
+                        <Text style={[s.cellText, isNull && s.cellNull]} numberOfLines={1}>
+                          {display}
+                        </Text>
+                      )}
+                    </View>
+                  );
+                })}
+              </Pressable>
+            ))}
+          </View>
+        </ScrollView>
+      </ScrollView>
+      <Pagination
+        page={page}
+        pageSize={pageSize}
+        totalFiltered={processedRows.length}
+        totalRows={rows.length}
+        columnCount={columns.length}
+        onPageChange={setPage}
+        onPageSizeChange={(sz) => { setPageSize(sz); setPage(1); }}
+        onClearTable={onClearTable}
+      />
+      {filterOpenCol !== null && filterColIdx >= 0 && (
+        <View style={[s.filterPopover, { left: popoverLeft, width: getColWidth(filterOpenCol) }]}>
+          <TextInput
+            autoFocus
+            style={s.filterInput}
+            value={search[filterOpenCol] ?? ''}
+            onChangeText={(v) => handleSearchChange(filterOpenCol, v)}
+            placeholder={`Filter ${filterOpenCol}…`}
+            placeholderTextColor={C.textMuted}
+          />
+          {(search[filterOpenCol] ?? '').length > 0 && (
+            <Pressable
+              onPress={() => handleSearchChange(filterOpenCol, '')}
+              style={s.filterClearBtn}
+            >
+              <Text style={s.filterClearText}>✕</Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+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; }
+}
+function HighlightText({ text, query }: { text: string; query: string }) {
+  const lower = text.toLowerCase();
+  const idx = lower.indexOf(query);
+  if (idx === -1) {
+    return <Text style={s.cellText} numberOfLines={1}>{text}</Text>;
+  }
+  return (
+    <Text style={s.cellText} numberOfLines={1}>
+      {text.slice(0, idx)}
+      <Text style={s.cellHighlight}>{text.slice(idx, idx + query.length)}</Text>
+      {text.slice(idx + query.length)}
+    </Text>
+  );
+}
+const s = StyleSheet.create({
+  outer: { flex: 1, position: 'relative', flexDirection: 'column' },
+  headerClip: {
+    overflow: 'hidden',
+    height: HEADER_HEIGHT,
+    backgroundColor: C.surface2,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: C.surface2,
+    height: HEADER_HEIGHT,
+  },
+  vScroll: { flex: 1, scrollbarWidth: 'thin', scrollbarColor: '#30363d transparent' },
+  headerCellWrapper: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: HEADER_HEIGHT,
+    borderRightWidth: 1,
+    borderRightColor: C.borderSubtle,
+  },
+  sortBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 12,
+    paddingRight: 4,
+    height: HEADER_HEIGHT,
+    cursor: 'pointer',
+  },
+  sortBtnActive: {},
+  headerText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: C.textSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+    flex: 1,
+  },
+  headerTextActive: { color: C.accent },
+  sortArrow: { fontSize: 14, color: C.textMuted },
+  sortArrowActive: { color: C.accent },
+  cell: { paddingHorizontal: 12, justifyContent: 'center' },
+  filterBtn: {
+    width: 26,
+    height: 26,
+    borderRadius: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 6,
+    cursor: 'pointer',
+  },
+  filterBtnActive: { backgroundColor: C.accentSubtle },
+  filterBtnText: { fontSize: 24, color: C.textMuted },
+  filterBtnTextActive: { color: C.accent },
+  filterPopover: {
+    position: 'absolute',
+    top: HEADER_HEIGHT + 1,
+    width: COL_WIDTH,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: C.surface2,
+    borderWidth: 1,
+    borderColor: C.accent,
+    borderRadius: 7,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    zIndex: 100,
+    boxShadow: '0 6px 16px rgba(0,0,0,0.5)',
+  },
+  filterInput: {
+    flex: 1,
+    fontSize: 13,
+    color: C.text,
+    paddingVertical: 0,
+    outlineStyle: 'none' as any,
+  },
+  filterClearBtn: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: C.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 6,
+  },
+  filterClearText: { fontSize: 9, color: C.textSecondary, lineHeight: 9 },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 11,
+    borderBottomWidth: 1,
+    borderBottomColor: C.borderSubtle,
+    cursor: 'pointer',
+  },
+  rowEven: { backgroundColor: C.bg },
+  rowOdd: { backgroundColor: C.surface },
+  rowSelected: { backgroundColor: C.rowSelected },
+  rowPressed: { opacity: 0.7 },
+  cellText: { fontSize: 13, color: C.text },
+  cellNull: { color: C.textMuted, fontStyle: 'italic' },
+  cellHighlight: { backgroundColor: '#3d3000', color: '#f5c542', fontWeight: '600' },
+  idxText: { fontSize: 11, color: C.textMuted, fontWeight: '600', textAlign: 'center' },
+  noResults: { paddingVertical: 32, alignItems: 'center' },
+  noResultsText: { fontSize: 13, color: C.textMuted, fontStyle: 'italic' },
+  resizeHandle: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: 6,
+    height: HEADER_HEIGHT,
+    cursor: 'col-resize' as any,
+    zIndex: 10,
+  },
+  jsonCell: { flexDirection: 'row', alignItems: 'center', gap: 5, overflow: 'hidden' },
+  jsonBadge: {
+    fontSize: 9,
+    fontWeight: '700',
+    color: '#a78bfa',
+    backgroundColor: 'rgba(167,139,250,0.12)',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 3,
+    flexShrink: 0,
+  },
+});