local-lite 0.0.3 → 0.0.4

package/dist/react/SyncInspector.js

@@ -0,0 +1,655 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncIndicator = void 0;
+exports.SyncInspector = SyncInspector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const status_js_1 = require("./status.js");
+const BenchmarkModal_js_1 = require("./BenchmarkModal.js");
+const theme_js_1 = require("./theme.js");
+let RN;
+try {
+    RN = require('react-native');
+}
+catch {
+    // Web / DOM environment
+}
+let RNSafeArea;
+try {
+    RNSafeArea = require('react-native-safe-area-context');
+}
+catch {
+    // Web / DOM environment or not installed
+}
+const BENCHMARK_DESCRIPTION = 'Runs automated stress tests directly validating local-lite client APIs: atomic batch ingestion, indexing, ACID rollback isolation, outbox queues, and non-blocking WAL concurrency.';
+/**
+ * Universal Developer Inspector Component for local-lite.
+ * Respects device safe areas and active theme (dark/light/custom).
+ * Displays real-time outbox telemetry, connection status, metrics, and triggers manual push, pull, reset, and benchmarks.
+ */
+function SyncInspector({ client, position = 'bottom-right', variant = 'pill', initialOpen = false, enableBenchmark = true, onOpenBenchmark, style, theme = 'auto', alwaysVisible = true, renderTrigger, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(initialOpen);
+    const [isBenchmarkModalOpen, setIsBenchmarkModalOpen] = (0, react_1.useState)(false);
+    const status = (0, status_js_1.useSyncStatus)(client);
+    const [metrics, setMetrics] = (0, react_1.useState)(null);
+    const [actionMessage, setActionMessage] = (0, react_1.useState)(null);
+    const systemColorScheme = RN?.useColorScheme ? RN.useColorScheme() : null;
+    const currentTheme = (0, react_1.useMemo)(() => (0, theme_js_1.resolveSyncTheme)(theme, systemColorScheme), [theme, systemColorScheme]);
+    (0, react_1.useEffect)(() => {
+        if (!client || !isOpen)
+            return;
+        client.getMetrics().then(setMetrics).catch(() => { });
+    }, [client, isOpen, status.isSyncing, status.pendingCount]);
+    const runAction = (0, react_1.useCallback)(async (startMsg, doneMsg, action) => {
+        if (!client)
+            return;
+        setActionMessage(startMsg);
+        try {
+            const res = await action();
+            setActionMessage(doneMsg(res));
+        }
+        catch (err) {
+            setActionMessage(`Failed: ${err.message || err}`);
+        }
+        setTimeout(() => setActionMessage(null), 3000);
+    }, [client]);
+    const handlePush = () => runAction('Pushing mutations...', () => 'Push complete', () => client.syncWorker.pushLocalChanges());
+    const handlePull = () => runAction('Pulling remote changes...', () => 'Pull complete', () => client.syncWorker.pullRemoteChanges());
+    const handleResetCursor = () => runAction('Resetting cursor & refetching...', () => 'Cursor reset & refetched', async () => {
+        await client.resetSyncCursor();
+        await client.syncWorker.pullRemoteChanges();
+    });
+    const handleRetryFailed = () => runAction('Re-queueing failed mutations...', (count) => `Re-queued ${count || 0} mutations`, () => client.retryFailedMutations());
+    const handleBenchmarkPress = () => {
+        if (onOpenBenchmark) {
+            onOpenBenchmark();
+            setIsOpen(false);
+        }
+        else {
+            setIsBenchmarkModalOpen(true);
+        }
+    };
+    const statusColor = !status.isOnline ? '#EF4444' : status.isSyncing ? '#F59E0B' : '#10B981';
+    const statusLabel = !status.isOnline ? 'Offline' : status.isSyncing ? 'Syncing' : 'Online';
+    const isInline = position === 'inline';
+    const isTop = position.startsWith('top') || position === 'top';
+    const isLeft = position.includes('left');
+    const isCenter = position === 'top' || position === 'bottom';
+    // Shared Stat Cards Data (Pending & Failed)
+    const statCards = (0, react_1.useMemo)(() => [
+        {
+            id: 'pending',
+            num: status.pendingCount,
+            label: 'Pending Outbox',
+            sub: 'Awaiting sync push',
+            numColor: currentTheme.text,
+        },
+        {
+            id: 'failed',
+            num: metrics?.outboxFailedCount || 0,
+            label: 'Failed Mutations',
+            sub: metrics?.outboxFailedCount ? 'Needs retry' : 'All clear',
+            numColor: metrics?.outboxFailedCount ? '#EF4444' : '#10B981',
+        },
+    ], [status.pendingCount, metrics?.outboxFailedCount, currentTheme.text]);
+    // Shared Connection & Telemetry Rows
+    const telemetryItems = (0, react_1.useMemo)(() => [
+        {
+            id: 'status',
+            label: 'Connection Status',
+            value: status.isOnline ? 'Online (Connected)' : 'Offline',
+            color: statusColor,
+            hasDot: true,
+        },
+        {
+            id: 'sync-state',
+            label: 'Sync State',
+            value: status.isSyncing ? 'Syncing...' : 'Idle',
+            color: status.isSyncing ? '#F59E0B' : currentTheme.textMuted,
+        },
+        {
+            id: 'last-synced',
+            label: 'Last Synchronized',
+            value: status.lastSyncedAt ? new Date(status.lastSyncedAt).toLocaleTimeString() : 'Never',
+        },
+        {
+            id: 'push-duration',
+            label: 'Last Push Duration',
+            value: `${metrics?.lastPushDurationMs || 0} ms`,
+        },
+        {
+            id: 'pull-duration',
+            label: 'Last Pull Duration',
+            value: `${metrics?.lastPullDurationMs || 0} ms`,
+        },
+    ], [status.isOnline, status.isSyncing, status.lastSyncedAt, statusColor, metrics?.lastPushDurationMs, metrics?.lastPullDurationMs, currentTheme.textMuted]);
+    // Shared Action Buttons
+    const actionButtons = (0, react_1.useMemo)(() => [
+        { id: 'push', label: '🚀 Push Changes', onPress: handlePush, bg: '#3B82F6', color: '#FFFFFF' },
+        { id: 'pull', label: '📥 Pull Changes', onPress: handlePull, bg: '#2563EB', color: '#FFFFFF' },
+        { id: 'retry', label: '🔄 Retry Failed', onPress: handleRetryFailed, bg: currentTheme.actionBg, color: currentTheme.actionText },
+        { id: 'reset', label: '⏪ Reset Cursor', onPress: handleResetCursor, bg: currentTheme.actionBg, color: currentTheme.actionText },
+    ], [handlePush, handlePull, handleRetryFailed, handleResetCursor, currentTheme.actionBg, currentTheme.actionText]);
+    const triggerLabel = variant === 'compact'
+        ? status.pendingCount > 0
+            ? `${status.pendingCount} queued`
+            : statusLabel
+        : 'local-lite';
+    if (!client)
+        return null;
+    // React Native Renderer
+    if (RN && RN.View) {
+        const { View, Text, TouchableOpacity, ScrollView, Modal, Platform, StatusBar } = RN;
+        const SafeComp = RNSafeArea?.SafeAreaView || RN.SafeAreaView || View;
+        const isAndroid = Platform?.OS === 'android';
+        const statusBarHeight = isAndroid ? StatusBar?.currentHeight || 24 : 0;
+        const pillPosStyle = isInline
+            ? { position: 'relative' }
+            : {
+                position: 'absolute',
+                zIndex: 99999,
+                left: isCenter ? 16 : isLeft ? 16 : undefined,
+                right: isCenter ? 16 : !isLeft ? 16 : undefined,
+                ...(isTop ? { top: isAndroid ? statusBarHeight + 12 : 48 } : { bottom: 24 }),
+            };
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOpen && ((0, jsx_runtime_1.jsx)(View, { style: [pillPosStyle, style], pointerEvents: "box-none", children: renderTrigger ? (renderTrigger({
+                        isOpen,
+                        open: () => setIsOpen(true),
+                        status,
+                        metrics,
+                        statusColor,
+                        statusLabel,
+                    })) : !alwaysVisible && status.pendingCount === 0 && status.isOnline && !status.isSyncing ? null : ((0, jsx_runtime_1.jsxs)(TouchableOpacity, { onPress: () => setIsOpen(true), style: [
+                            isInline ? rnStyles.inlinePill : rnStyles.pill,
+                            {
+                                borderColor: statusColor,
+                                backgroundColor: currentTheme.surface,
+                                alignSelf: isInline ? 'auto' : isCenter ? 'center' : isLeft ? 'flex-start' : 'flex-end',
+                            },
+                        ], activeOpacity: 0.8, children: [(0, jsx_runtime_1.jsx)(View, { style: [rnStyles.dot, { backgroundColor: statusColor }] }), variant !== 'icon' && variant !== 'minimal' && ((0, jsx_runtime_1.jsx)(Text, { style: [isInline ? rnStyles.inlinePillText : rnStyles.pillText, { color: currentTheme.text }], children: triggerLabel })), status.pendingCount > 0 && variant !== 'compact' && ((0, jsx_runtime_1.jsx)(View, { style: rnStyles.badge, children: (0, jsx_runtime_1.jsx)(Text, { style: rnStyles.badgeText, children: status.pendingCount }) }))] })) })), (0, jsx_runtime_1.jsx)(Modal, { visible: isOpen, animationType: "slide", presentationStyle: "fullScreen", statusBarTranslucent: true, onRequestClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)(SafeComp, { style: [rnStyles.fullScreenSafe, { backgroundColor: currentTheme.bg }], edges: ['top', 'bottom', 'left', 'right'], children: [(0, jsx_runtime_1.jsxs)(View, { style: [
+                                    rnStyles.topBar,
+                                    {
+                                        backgroundColor: currentTheme.surface,
+                                        borderBottomColor: currentTheme.border,
+                                    },
+                                    !RNSafeArea?.SafeAreaView && isAndroid && { paddingTop: statusBarHeight + 10 },
+                                ], children: [(0, jsx_runtime_1.jsxs)(View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.topBarTitle, { color: currentTheme.text }], children: "\u26A1 Local Lite DevTools" }), (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.topBarSub, { color: currentTheme.textMuted }], children: "Engine Inspector & Sync Telemetry" })] }), (0, jsx_runtime_1.jsx)(View, { style: [rnStyles.statusBadge, { borderColor: statusColor, backgroundColor: `${statusColor}20` }], children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.statusBadgeText, { color: statusColor }], children: statusLabel }) }), (0, jsx_runtime_1.jsx)(TouchableOpacity, { onPress: () => setIsOpen(false), style: [rnStyles.closeCircle, { backgroundColor: currentTheme.actionBg }], activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.closeCircleText, { color: currentTheme.actionText }], children: "\u2715" }) })] }), (0, jsx_runtime_1.jsxs)(ScrollView, { style: [rnStyles.scrollBody, { backgroundColor: currentTheme.bg }], contentContainerStyle: rnStyles.scrollContent, showsVerticalScrollIndicator: true, children: [actionMessage && ((0, jsx_runtime_1.jsx)(View, { style: rnStyles.actionMsgBox, children: (0, jsx_runtime_1.jsx)(Text, { style: rnStyles.actionMsgText, children: actionMessage }) })), (0, jsx_runtime_1.jsx)(View, { style: rnStyles.statGrid, children: statCards.map((card) => ((0, jsx_runtime_1.jsxs)(View, { style: [
+                                                rnStyles.statCard,
+                                                {
+                                                    backgroundColor: currentTheme.card,
+                                                    borderColor: currentTheme.border,
+                                                },
+                                            ], children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.statNum, { color: card.numColor }], children: String(card.num ?? 0) }), (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.statLabel, { color: currentTheme.textSecondary }], children: card.label }), (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.statSub, { color: currentTheme.textMuted }], children: card.sub })] }, card.id))) }), (0, jsx_runtime_1.jsxs)(View, { style: [
+                                            rnStyles.infoCard,
+                                            {
+                                                backgroundColor: currentTheme.card,
+                                                borderColor: currentTheme.border,
+                                            },
+                                        ], children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.infoCardTitle, { color: currentTheme.textMuted }], children: "CONNECTION & TELEMETRY" }), telemetryItems.map((item, idx) => ((0, jsx_runtime_1.jsxs)(View, { style: [
+                                                    rnStyles.infoRow,
+                                                    { borderBottomColor: currentTheme.border },
+                                                    idx === telemetryItems.length - 1 && { borderBottomWidth: 0 },
+                                                ], children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.infoKey, { color: currentTheme.textMuted }], children: item.label }), (0, jsx_runtime_1.jsxs)(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 6 }, children: [item.hasDot && (0, jsx_runtime_1.jsx)(View, { style: [rnStyles.dotSmall, { backgroundColor: item.color }] }), (0, jsx_runtime_1.jsx)(Text, { style: [
+                                                                    rnStyles.infoVal,
+                                                                    item.color ? { color: item.color, fontWeight: '700' } : { color: currentTheme.text },
+                                                                ], children: item.value })] })] }, item.id)))] }), (0, jsx_runtime_1.jsxs)(View, { style: [
+                                            rnStyles.infoCard,
+                                            {
+                                                backgroundColor: currentTheme.card,
+                                                borderColor: currentTheme.border,
+                                            },
+                                        ], children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.infoCardTitle, { color: currentTheme.textMuted }], children: "ENGINE ACTIONS" }), (0, jsx_runtime_1.jsx)(View, { style: rnStyles.btnRow, children: actionButtons.slice(0, 2).map((btn) => ((0, jsx_runtime_1.jsx)(TouchableOpacity, { onPress: btn.onPress, style: [rnStyles.actionBtn, { backgroundColor: btn.bg }], activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.actionBtnText, { color: btn.color }], children: btn.label }) }, btn.id))) }), (0, jsx_runtime_1.jsx)(View, { style: [rnStyles.btnRow, { marginTop: 8 }], children: actionButtons.slice(2, 4).map((btn) => ((0, jsx_runtime_1.jsx)(TouchableOpacity, { onPress: btn.onPress, style: [rnStyles.actionBtn, { backgroundColor: btn.bg }], activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.actionBtnText, { color: btn.color }], children: btn.label }) }, btn.id))) })] }), (metrics?.lastPushError || metrics?.lastPullError) && ((0, jsx_runtime_1.jsxs)(View, { style: [rnStyles.infoCard, { borderColor: '#EF444480', backgroundColor: '#7F1D1D20' }], children: [(0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.infoCardTitle, { color: '#F87171' }], children: "SYNC ENGINE ERRORS" }), metrics?.lastPushError && ((0, jsx_runtime_1.jsxs)(View, { style: { marginBottom: 6 }, children: [(0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 11, color: '#FCA5A5', fontWeight: '700' }, children: "Last Push Error:" }), (0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 12, color: '#FECACA' }, children: String(metrics.lastPushError) })] })), metrics?.lastPullError && ((0, jsx_runtime_1.jsxs)(View, { children: [(0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 11, color: '#FCA5A5', fontWeight: '700' }, children: "Last Pull Error:" }), (0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 12, color: '#FECACA' }, children: String(metrics.lastPullError) })] }))] })), status.pendingRecords && status.pendingRecords.length > 0 && ((0, jsx_runtime_1.jsxs)(View, { style: [
+                                            rnStyles.infoCard,
+                                            {
+                                                backgroundColor: currentTheme.card,
+                                                borderColor: currentTheme.border,
+                                            },
+                                        ], children: [(0, jsx_runtime_1.jsxs)(View, { style: {
+                                                    flexDirection: 'row',
+                                                    justifyContent: 'space-between',
+                                                    alignItems: 'center',
+                                                    marginBottom: 10,
+                                                }, children: [(0, jsx_runtime_1.jsxs)(Text, { style: [rnStyles.infoCardTitle, { color: currentTheme.textMuted }], children: ["QUEUED OUTBOX MUTATIONS (", status.pendingRecords.length, ")"] }), (0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 10, color: currentTheme.textMuted }, children: "Latest queued" })] }), status.pendingRecords.slice(0, 8).map((rec, idx) => ((0, jsx_runtime_1.jsxs)(View, { style: [
+                                                    rnStyles.infoRow,
+                                                    { borderBottomColor: currentTheme.border },
+                                                    idx === Math.min(status.pendingRecords.length, 8) - 1 && { borderBottomWidth: 0 },
+                                                ], children: [(0, jsx_runtime_1.jsxs)(View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsxs)(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.jsx)(View, { style: [
+                                                                            rnStyles.dotSmall,
+                                                                            { backgroundColor: rec.status === 'FAILED' ? '#EF4444' : '#F59E0B' },
+                                                                        ] }), (0, jsx_runtime_1.jsx)(Text, { style: { color: currentTheme.text, fontSize: 13, fontWeight: '600' }, children: rec.tableName || 'record' }), (0, jsx_runtime_1.jsx)(View, { style: {
+                                                                            backgroundColor: currentTheme.actionBg,
+                                                                            paddingHorizontal: 5,
+                                                                            paddingVertical: 1,
+                                                                            borderRadius: 4,
+                                                                        }, children: (0, jsx_runtime_1.jsx)(Text, { style: { color: currentTheme.actionText, fontSize: 10, fontWeight: '700' }, children: rec.operation || 'MUTATE' }) })] }), rec.rowId && ((0, jsx_runtime_1.jsxs)(Text, { style: { color: currentTheme.textMuted, fontSize: 11, marginTop: 2 }, numberOfLines: 1, children: ["ID: ", rec.rowId] })), rec.errorMessage && ((0, jsx_runtime_1.jsx)(Text, { style: { color: '#EF4444', fontSize: 11, marginTop: 2 }, children: rec.errorMessage }))] }), (0, jsx_runtime_1.jsx)(Text, { style: { color: currentTheme.textMuted, fontSize: 11 }, children: rec.status || 'PENDING' })] }, rec.id || idx))), status.pendingRecords.length > 8 && ((0, jsx_runtime_1.jsxs)(Text, { style: { color: currentTheme.textMuted, fontSize: 11, textAlign: 'center', marginTop: 8 }, children: ["+ ", status.pendingRecords.length - 8, " more mutations in outbox"] }))] })), enableBenchmark && ((0, jsx_runtime_1.jsxs)(View, { style: [
+                                            rnStyles.infoCard,
+                                            {
+                                                borderColor: '#8B5CF640',
+                                                backgroundColor: currentTheme.isDark ? '#1E1B4B25' : '#F5F3FF',
+                                            },
+                                        ], children: [(0, jsx_runtime_1.jsxs)(View, { style: {
+                                                    flexDirection: 'row',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between',
+                                                    marginBottom: 8,
+                                                }, children: [(0, jsx_runtime_1.jsx)(Text, { style: [
+                                                            rnStyles.infoCardTitle,
+                                                            { color: currentTheme.isDark ? '#C4B5FD' : '#6D28D9', marginBottom: 0 },
+                                                        ], children: "PERFORMANCE BENCHMARK" }), (0, jsx_runtime_1.jsx)(Text, { style: {
+                                                            fontSize: 10,
+                                                            color: currentTheme.isDark ? '#A78BFA' : '#7C3AED',
+                                                            fontWeight: '700',
+                                                        }, children: "ACID & WAL" })] }), (0, jsx_runtime_1.jsx)(Text, { style: { fontSize: 12, color: currentTheme.textMuted, marginBottom: 12, lineHeight: 18 }, children: BENCHMARK_DESCRIPTION }), (0, jsx_runtime_1.jsx)(TouchableOpacity, { onPress: handleBenchmarkPress, style: [rnStyles.actionBtn, { backgroundColor: '#8B5CF6' }], activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.actionBtnText, { color: '#FFFFFF', fontWeight: '700' }], children: "\u26A1 Open SQLite Benchmark Suite" }) })] }))] }), (0, jsx_runtime_1.jsx)(View, { style: [
+                                    rnStyles.bottomBar,
+                                    {
+                                        backgroundColor: currentTheme.surface,
+                                        borderTopColor: currentTheme.border,
+                                    },
+                                    !RNSafeArea?.SafeAreaView && isAndroid && { paddingBottom: 32 },
+                                ], children: (0, jsx_runtime_1.jsx)(TouchableOpacity, { onPress: () => setIsOpen(false), style: [rnStyles.doneBtn, { backgroundColor: currentTheme.actionBg }], activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(Text, { style: [rnStyles.doneBtnText, { color: currentTheme.actionText }], children: "Close DevTools" }) }) })] }) }), enableBenchmark && !onOpenBenchmark && ((0, jsx_runtime_1.jsx)(BenchmarkModal_js_1.BenchmarkModal, { client: client, visible: isBenchmarkModalOpen, onDismiss: () => setIsBenchmarkModalOpen(false), theme: theme }))] }));
+    }
+    // Web / DOM Renderer Fallback
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOpen ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: currentTheme.bg,
+                    zIndex: 99999,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    fontFamily: 'system-ui, -apple-system, sans-serif',
+                    color: currentTheme.text,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '16px 24px',
+                            backgroundColor: currentTheme.surface,
+                            borderBottom: `1px solid ${currentTheme.border}`,
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                            width: 12,
+                                            height: 12,
+                                            borderRadius: 6,
+                                            backgroundColor: statusColor,
+                                        } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 17, fontWeight: 700, color: currentTheme.text }, children: "\u26A1 Local Lite DevTools" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 11, color: currentTheme.textMuted, marginTop: 2 }, children: "Engine Inspector & Sync Telemetry" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            border: `1px solid ${statusColor}`,
+                                            color: statusColor,
+                                            padding: '3px 10px',
+                                            borderRadius: 12,
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            backgroundColor: `${statusColor}20`,
+                                        }, children: statusLabel }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(false), style: {
+                                            width: 32,
+                                            height: 32,
+                                            borderRadius: 16,
+                                            backgroundColor: currentTheme.actionBg,
+                                            border: 'none',
+                                            color: currentTheme.actionText,
+                                            fontSize: 14,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: "\u2715" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            flex: 1,
+                            overflowY: 'auto',
+                            padding: 24,
+                            maxWidth: 720,
+                            width: '100%',
+                            margin: '0 auto',
+                            boxSizing: 'border-box',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 16,
+                        }, children: [actionMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    backgroundColor: '#1E3A8A',
+                                    border: '1px solid #3B82F6',
+                                    color: '#93C5FD',
+                                    padding: 10,
+                                    borderRadius: 8,
+                                    fontSize: 13,
+                                    fontWeight: 600,
+                                    textAlign: 'center',
+                                }, children: actionMessage })), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
+                                    gap: 12,
+                                }, children: statCards.map((card) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        backgroundColor: currentTheme.card,
+                                        border: `1px solid ${currentTheme.border}`,
+                                        borderRadius: 12,
+                                        padding: 16,
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 24, fontWeight: 800, color: card.numColor }, children: card.num }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: currentTheme.textSecondary, marginTop: 4, fontWeight: 600 }, children: card.label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 11, color: currentTheme.textMuted, marginTop: 2 }, children: card.sub })] }, card.id))) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    backgroundColor: currentTheme.card,
+                                    border: `1px solid ${currentTheme.border}`,
+                                    borderRadius: 12,
+                                    padding: 16,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            color: currentTheme.textMuted,
+                                            letterSpacing: '0.8px',
+                                            marginBottom: 12,
+                                        }, children: "CONNECTION & TELEMETRY" }), telemetryItems.map((item, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            padding: '8px 0',
+                                            borderBottom: idx === telemetryItems.length - 1 ? 'none' : `1px solid ${currentTheme.border}`,
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: currentTheme.textMuted, fontSize: 13 }, children: item.label }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [item.hasDot && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                            width: 8,
+                                                            height: 8,
+                                                            borderRadius: 4,
+                                                            backgroundColor: item.color,
+                                                        } })), (0, jsx_runtime_1.jsx)("span", { style: {
+                                                            color: item.color || currentTheme.text,
+                                                            fontSize: 13,
+                                                            fontWeight: item.color ? 700 : 600,
+                                                        }, children: item.value })] })] }, item.id)))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    backgroundColor: currentTheme.card,
+                                    border: `1px solid ${currentTheme.border}`,
+                                    borderRadius: 12,
+                                    padding: 16,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            color: currentTheme.textMuted,
+                                            letterSpacing: '0.8px',
+                                            marginBottom: 12,
+                                        }, children: "ENGINE ACTIONS" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }, children: actionButtons.map((btn) => ((0, jsx_runtime_1.jsx)("button", { onClick: btn.onPress, style: {
+                                                padding: '10px 14px',
+                                                backgroundColor: btn.bg,
+                                                color: btn.color,
+                                                border: 'none',
+                                                borderRadius: 8,
+                                                fontWeight: 600,
+                                                cursor: 'pointer',
+                                            }, children: btn.label }, btn.id))) })] }), enableBenchmark && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    backgroundColor: currentTheme.isDark ? '#1E1B4B25' : '#F5F3FF',
+                                    border: '1px solid #8B5CF640',
+                                    borderRadius: 12,
+                                    padding: 16,
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            marginBottom: 8,
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                    fontSize: 11,
+                                                    fontWeight: 700,
+                                                    color: currentTheme.isDark ? '#C4B5FD' : '#6D28D9',
+                                                }, children: "PERFORMANCE BENCHMARK" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    fontSize: 10,
+                                                    color: currentTheme.isDark ? '#A78BFA' : '#7C3AED',
+                                                    fontWeight: 700,
+                                                }, children: "ACID & WAL" })] }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: 12, color: currentTheme.textMuted, margin: '0 0 12px 0', lineHeight: '18px' }, children: BENCHMARK_DESCRIPTION }), (0, jsx_runtime_1.jsx)("button", { onClick: handleBenchmarkPress, style: {
+                                            width: '100%',
+                                            padding: '10px 16px',
+                                            backgroundColor: '#8B5CF6',
+                                            color: '#FFF',
+                                            border: 'none',
+                                            borderRadius: 8,
+                                            fontWeight: 700,
+                                            fontSize: 13,
+                                            cursor: 'pointer',
+                                        }, children: "\u26A1 Open SQLite Benchmark Suite" })] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            padding: '14px 20px',
+                            backgroundColor: currentTheme.surface,
+                            borderTop: `1px solid ${currentTheme.border}`,
+                        }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(false), style: {
+                                width: '100%',
+                                padding: '12px',
+                                backgroundColor: currentTheme.actionBg,
+                                color: currentTheme.actionText,
+                                border: 'none',
+                                borderRadius: 8,
+                                fontWeight: 700,
+                                cursor: 'pointer',
+                            }, children: "Close DevTools" }) })] })) : ((0, jsx_runtime_1.jsx)("div", { style: isInline
+                    ? { position: 'relative', display: 'inline-flex', ...style }
+                    : {
+                        position: 'fixed',
+                        zIndex: 99999,
+                        left: isCenter ? '50%' : isLeft ? 16 : undefined,
+                        right: !isCenter && !isLeft ? 16 : undefined,
+                        transform: isCenter ? 'translateX(-50%)' : undefined,
+                        ...(isTop ? { top: 20 } : { bottom: 20 }),
+                        pointerEvents: 'auto',
+                        ...style,
+                    }, children: renderTrigger ? (renderTrigger({
+                    isOpen,
+                    open: () => setIsOpen(true),
+                    status,
+                    metrics,
+                    statusColor,
+                    statusLabel,
+                })) : !alwaysVisible && status.pendingCount === 0 && status.isOnline && !status.isSyncing ? null : ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setIsOpen(true), style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        background: currentTheme.surface,
+                        color: currentTheme.text,
+                        border: `1.5px solid ${statusColor}`,
+                        padding: isInline ? '5px 10px' : '8px 14px',
+                        borderRadius: 20,
+                        cursor: 'pointer',
+                        boxShadow: isInline ? undefined : '0 4px 12px rgba(0,0,0,0.15)',
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: 4,
+                                backgroundColor: statusColor,
+                            } }), variant !== 'icon' && variant !== 'minimal' && ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 600, fontSize: isInline ? 12 : 13 }, children: triggerLabel })), status.pendingCount > 0 && variant !== 'compact' && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                background: '#EF4444',
+                                color: '#fff',
+                                fontSize: 11,
+                                padding: '1px 6px',
+                                borderRadius: 10,
+                                fontWeight: 700,
+                            }, children: status.pendingCount }))] })) })), enableBenchmark && !onOpenBenchmark && ((0, jsx_runtime_1.jsx)(BenchmarkModal_js_1.BenchmarkModal, { client: client, visible: isBenchmarkModalOpen, onDismiss: () => setIsBenchmarkModalOpen(false), theme: theme }))] }));
+}
+const rnStyles = RN && RN.StyleSheet
+    ? RN.StyleSheet.create({
+        fullScreenSafe: {
+            flex: 1,
+            height: '100%',
+        },
+        topBar: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 18,
+            paddingVertical: 14,
+            borderBottomWidth: 1,
+        },
+        topBarTitle: {
+            fontSize: 17,
+            fontWeight: '700',
+        },
+        topBarSub: {
+            fontSize: 11,
+            marginTop: 2,
+        },
+        statusBadge: {
+            paddingHorizontal: 8,
+            paddingVertical: 3,
+            borderRadius: 12,
+            borderWidth: 1,
+            marginRight: 10,
+        },
+        statusBadgeText: {
+            fontSize: 11,
+            fontWeight: '700',
+        },
+        closeCircle: {
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        closeCircleText: {
+            fontSize: 14,
+            fontWeight: '700',
+        },
+        scrollBody: {
+            flex: 1,
+        },
+        scrollContent: {
+            padding: 16,
+            paddingBottom: 24,
+        },
+        actionMsgBox: {
+            backgroundColor: '#1E3A8A',
+            borderWidth: 1,
+            borderColor: '#3B82F6',
+            padding: 10,
+            borderRadius: 8,
+            marginBottom: 14,
+        },
+        actionMsgText: {
+            color: '#93C5FD',
+            fontSize: 13,
+            fontWeight: '600',
+            textAlign: 'center',
+        },
+        statGrid: {
+            flexDirection: 'row',
+            width: '100%',
+            gap: 10,
+            marginBottom: 14,
+        },
+        statCard: {
+            flex: 1,
+            minWidth: '45%',
+            borderWidth: 1,
+            borderRadius: 12,
+            padding: 14,
+        },
+        statNum: {
+            fontSize: 24,
+            fontWeight: '800',
+        },
+        statLabel: {
+            fontSize: 12,
+            fontWeight: '600',
+            marginTop: 4,
+        },
+        statSub: {
+            fontSize: 11,
+            marginTop: 2,
+        },
+        infoCard: {
+            borderWidth: 1,
+            borderRadius: 12,
+            padding: 16,
+            marginBottom: 14,
+        },
+        infoCardTitle: {
+            fontSize: 11,
+            fontWeight: '700',
+            letterSpacing: 0.8,
+            marginBottom: 10,
+        },
+        infoRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingVertical: 9,
+            borderBottomWidth: 1,
+        },
+        infoKey: {
+            fontSize: 13,
+        },
+        infoVal: {
+            fontSize: 13,
+            fontWeight: '600',
+        },
+        btnRow: {
+            flexDirection: 'row',
+            width: '100%',
+            gap: 8,
+        },
+        actionBtn: {
+            flex: 1,
+            paddingVertical: 10,
+            paddingHorizontal: 12,
+            borderRadius: 8,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        actionBtnText: {
+            fontSize: 13,
+            fontWeight: '600',
+        },
+        dotSmall: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+        },
+        bottomBar: {
+            paddingHorizontal: 18,
+            paddingVertical: 12,
+            borderTopWidth: 1,
+        },
+        doneBtn: {
+            paddingVertical: 12,
+            borderRadius: 8,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        doneBtnText: {
+            fontSize: 14,
+            fontWeight: '700',
+        },
+        pill: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 8,
+            paddingHorizontal: 14,
+            borderRadius: 20,
+            borderWidth: 1.5,
+            elevation: 6,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 3 },
+            shadowOpacity: 0.15,
+            shadowRadius: 4,
+        },
+        inlinePill: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 5,
+            paddingHorizontal: 10,
+            borderRadius: 16,
+            borderWidth: 1.5,
+        },
+        pillText: {
+            fontWeight: '600',
+            fontSize: 13,
+            marginLeft: 8,
+        },
+        inlinePillText: {
+            fontWeight: '600',
+            fontSize: 12,
+            marginLeft: 6,
+        },
+        dot: {
+            width: 10,
+            height: 10,
+            borderRadius: 5,
+        },
+        badge: {
+            backgroundColor: '#EF4444',
+            paddingHorizontal: 6,
+            paddingVertical: 1,
+            borderRadius: 10,
+            marginLeft: 8,
+        },
+        badgeText: {
+            color: '#FFF',
+            fontSize: 11,
+            fontWeight: '700',
+        },
+    })
+    : {};
+exports.SyncIndicator = SyncInspector;