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

rozenite-sqlite 0.0.7 → 0.0.9

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 (27) hide show

package/package.json +1 -1
package/CHANGELOG.md +0 -7
package/dist/assets/panel-3I5ccfMq.js +0 -58
package/dist/panel.html +0 -30
package/dist/react-native.cjs +0 -1
package/dist/react-native.d.ts +0 -28
package/dist/react-native.js +0 -40
package/dist/rozenite.json +0 -1
package/react-native.ts +0 -2
package/rozenite.config.ts +0 -8
package/src/components/DataTable.tsx +0 -504
package/src/components/Dropdown.tsx +0 -139
package/src/components/Pagination.tsx +0 -266
package/src/components/RowDetailPanel.tsx +0 -273
package/src/components/SqlPanel.tsx +0 -220
package/src/components/Toolbar.tsx +0 -168
package/src/constants.ts +0 -13
package/src/hooks/useBridgeSync.ts +0 -146
package/src/hooks/useExplorerState.ts +0 -160
package/src/hooks/useRozeniteSQLite.ts +0 -68
package/src/index.ts +0 -1
package/src/mockData.ts +0 -210
package/src/panel.tsx +0 -70
package/src/theme.ts +0 -17
package/src/types/react-native-web.d.ts +0 -13
package/tsconfig.json +0 -25
package/vite.config.ts +0 -20

package/dist/panel.html DELETED Viewed

@@ -1,30 +0,0 @@
-<!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-3I5ccfMq.js"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/dist/react-native.cjs DELETED Viewed

@@ -1 +0,0 @@

- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),S=require("@rozenite/plugin-bridge"),_="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"};function l(o){const e=S.useRozeniteDevToolsClient({pluginId:_}),n=E.useRef(o);E.useEffect(()=>{n.current=o}),E.useEffect(()=>{if(!e)return;const u=[e.onMessage(s.GET_DB_LIST,()=>{e.send(s.SEND_DB_LIST,n.current.databases)}),e.onMessage(s.SQL_EXECUTE,r=>{const{dbName:c,query:i}=r;n.current.sqlExecutor(c,i).then(t=>{e.send(s.SQL_EXEC_RESULT,t)},t=>{e.send(s.SQL_EXEC_RESULT,{error:t instanceof Error?t.message:String(t)})})})];return()=>{u.forEach(r=>r.remove())}},[e])}exports.useRozeniteSQLite=l;

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

@@ -1,28 +0,0 @@
-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 Rozenite SQLite 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 DELETED Viewed

@@ -1,40 +0,0 @@
-import { useRef as i, useEffect as r } from "react";
-import { useRozeniteDevToolsClient as u } from "@rozenite/plugin-bridge";
-const L = "rozenite-sqlite", t = {
-  GET_DB_LIST: "get-db-list",
-  SEND_DB_LIST: "send-db-list",
-  SQL_EXECUTE: "sql-execute",
-  SQL_EXEC_RESULT: "sql-exec-result"
-};
-function f(o) {
-  const e = u({ pluginId: L }), n = i(o);
-  r(() => {
-    n.current = o;
-  }), r(() => {
-    if (!e) return;
-    const c = [
-      e.onMessage(t.GET_DB_LIST, () => {
-        e.send(t.SEND_DB_LIST, n.current.databases);
-      }),
-      e.onMessage(t.SQL_EXECUTE, (E) => {
-        const { dbName: S, query: _ } = E;
-        n.current.sqlExecutor(S, _).then(
-          (s) => {
-            e.send(t.SQL_EXEC_RESULT, s);
-          },
-          (s) => {
-            e.send(t.SQL_EXEC_RESULT, {
-              error: s instanceof Error ? s.message : String(s)
-            });
-          }
-        );
-      })
-    ];
-    return () => {
-      c.forEach((E) => E.remove());
-    };
-  }, [e]);
-}
-export {
-  f as useRozeniteSQLite
-};

package/dist/rozenite.json DELETED Viewed

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

package/react-native.ts DELETED Viewed

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

package/rozenite.config.ts DELETED Viewed

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

package/src/components/DataTable.tsx DELETED Viewed

@@ -1,504 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  Pressable,
-  TextInput,
-  ActivityIndicator,
-} from 'react-native';
-import { C, type RowData } from '../theme';
-import Pagination from './Pagination';
-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;
-}
-const COL_WIDTH = 160;
-const IDX_WIDTH = 44;
-const HEADER_HEIGHT = 42;
-export function DataTable({ columns, rows, selectedRowIndex, onRowSelect, status, error, onClearTable }: 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 (
-      <View style={s.placeholder}>
-        <Text style={s.placeholderEmoji}>📡</Text>
-        <Text style={s.placeholderTitle}>Waiting for app…</Text>
-        <Text style={s.placeholderSub}>
-          Make sure your app is running and useRozeniteSQLite is initialized
-        </Text>
-      </View>
-    );
-  }
-  if (status === 'error') {
-    return (
-      <View style={s.placeholder}>
-        <Text style={s.placeholderEmoji}>⚠️</Text>
-        <Text style={s.placeholderTitle}>Query failed</Text>
-        <Text style={s.placeholderSub}>{error}</Text>
-      </View>
-    );
-  }
-  if (status === 'loadingTables' || status === 'loadingData') {
-    return (
-      <View style={s.placeholder}>
-        <ActivityIndicator size="large" color={C.accent} />
-        <Text style={s.placeholderText}>Loading…</Text>
-      </View>
-    );
-  }
-  if (columns.length === 0) {
-    return (
-      <View style={s.placeholder}>
-        <Text style={s.placeholderEmoji}>🗄️</Text>
-        <Text style={s.placeholderTitle}>No data to display</Text>
-        <Text style={s.placeholderSub}>Select a database and table above</Text>
-      </View>
-    );
-  }
-  if (rows.length === 0) {
-    return (
-      <View style={s.placeholder}>
-        <Text style={s.placeholderEmoji}>📭</Text>
-        <Text style={s.placeholderTitle}>Table is empty</Text>
-        <Text style={s.placeholderSub}>This table has no rows yet</Text>
-      </View>
-    );
-  }
-  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,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.5,
-    shadowRadius: 16,
-  },
-  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' },
-  placeholder: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 60 },
-  placeholderEmoji: { fontSize: 36, marginBottom: 16 },
-  placeholderTitle: { fontSize: 15, fontWeight: '600', color: C.textSecondary, marginBottom: 6 },
-  placeholderSub: { fontSize: 13, color: C.textMuted },
-  placeholderText: { fontSize: 14, color: C.textSecondary, marginTop: 14 },
-  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,
-  },
-});