rn-backstage 1.0.0

package/lib/typescript/components/LogsTab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LogEntry, BackstageStyleOverrides } from '../types';
+interface LogsTabProps {
+    logs: LogEntry[];
+    onRefresh: () => void;
+    onCopyLogs?: (logs: string) => void;
+    styles?: BackstageStyleOverrides;
+}
+export declare const LogsTab: React.FC<LogsTabProps>;
+export {};
+//# sourceMappingURL=LogsTab.d.ts.map

package/lib/typescript/components/LogsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsTab.d.ts","sourceRoot":"","sources":["../../../src/components/LogsTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAG7D,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAMjE,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC;AAID,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmH1C,CAAA"}

package/lib/typescript/components/TabBar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Tab {
+    key: string;
+    title: string;
+    icon?: string;
+}
+interface TabBarProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (key: string) => void;
+}
+export declare const TabBar: React.FC<TabBarProps>;
+export {};
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/typescript/components/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAc7D,UAAU,GAAG;IACX,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyExC,CAAA"}

package/lib/typescript/constants.d.ts

@@ -0,0 +1,43 @@
+import type { BackstageTheme } from './types';
+export declare const Metrics: {
+    screenWidth: number;
+    screenHeight: number;
+    isIOS: boolean;
+    pillWidth: number;
+    pillHeight: number;
+    panelBorderRadius: number;
+    tabBarHeight: number;
+    headerHeight: number;
+    sectionSpacing: number;
+    contentPadding: number;
+};
+export declare const DarkTheme: BackstageTheme;
+export declare const DEFAULT_MAX_LOGS = 500;
+export declare const MonospaceFont: string;
+export declare const TestIDs: {
+    floatingPill: string;
+    panel: string;
+    header: {
+        container: string;
+        title: string;
+        closeButton: string;
+    };
+    tabBar: string;
+    tabs: {
+        info: string;
+        logs: string;
+    };
+    infoTab: {
+        section: string;
+        deviceInfo: string;
+        stateTree: string;
+        quickActions: string;
+    };
+    logsTab: {
+        section: string;
+        searchInput: string;
+        copyButton: string;
+        list: string;
+    };
+};
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAM7C,eAAO,MAAM,OAAO;;;;;;;;;;;CAWnB,CAAA;AAID,eAAO,MAAM,SAAS,EAAE,cAmBvB,CAAA;AAID,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAInC,eAAO,MAAM,aAAa,QAGxB,CAAA;AAIF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnB,CAAA"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+export { Backstage } from './Backstage';
+export type { BackstageProps, BackstageRef, BackstageTab, BackstageStyleOverrides, BackstageTheme, QuickAction, AppInfoItem, LogEntry, } from './types';
+export { LogLevel } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,YAAY,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,uBAAuB,EACvB,cAAc,EACd,WAAW,EACX,WAAW,EACX,QAAQ,GACT,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA"}

package/lib/typescript/log-interceptor.d.ts

@@ -0,0 +1,16 @@
+import type { LogEntry } from './types';
+type LogCallback = (entry: LogEntry) => void;
+export declare function installInterceptor(callback: LogCallback, filters?: string[]): void;
+export declare function uninstallInterceptor(): void;
+export declare class LogBuffer {
+    private logs;
+    private maxSize;
+    constructor(maxSize?: number);
+    push(entry: LogEntry): void;
+    getAll(): LogEntry[];
+    clear(): void;
+    get hasErrors(): boolean;
+    get size(): number;
+}
+export {};
+//# sourceMappingURL=log-interceptor.d.ts.map

package/lib/typescript/log-interceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-interceptor.d.ts","sourceRoot":"","sources":["../../src/log-interceptor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAcvC,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;AAyC5C,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAE,MAAM,EAAO,GAAG,IAAI,CAiCtF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAID,qBAAa,SAAS;IACpB,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,OAAO,CAAQ;gBAEX,OAAO,SAAmB;IAItC,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAO3B,MAAM,IAAI,QAAQ,EAAE;IAIpB,KAAK,IAAI,IAAI;IAIb,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;CACF"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export declare enum LogLevel {
+    log = "log",
+    debug = "debug",
+    info = "info",
+    warn = "warn",
+    error = "error"
+}
+export interface LogEntry {
+    id: string;
+    level: LogLevel;
+    message: string;
+    data?: unknown;
+    timestamp: number;
+}
+export interface AppInfoItem {
+    label: string;
+    value: string;
+}
+export interface QuickAction {
+    title: string;
+    onPress: () => void;
+    closeOnPress?: boolean;
+    icon?: string;
+    destructive?: boolean;
+    testID?: string;
+}
+export interface BackstageTab {
+    key: string;
+    title: string;
+    icon?: string;
+    render: () => ReactNode;
+}
+export interface BackstageTheme {
+    background: string;
+    surface: string;
+    surfaceElevated: string;
+    border: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    accent: string;
+    accentDim: string;
+    error: string;
+    errorDim: string;
+    warning: string;
+    warningDim: string;
+    success: string;
+    info: string;
+    infoDim: string;
+    debugColor: string;
+    debugDim: string;
+}
+export interface BackstageProps {
+    /** Whether the floating pill trigger is visible. Default: true */
+    visible?: boolean;
+    /** App version string (e.g., "1.2.3") */
+    appVersion?: string;
+    /** Build number (e.g., "42") */
+    buildNumber?: string;
+    /** Bundle identifier (e.g., "com.example.app") */
+    bundleId?: string;
+    /** Additional device/app information rows */
+    deviceInfo?: AppInfoItem[];
+    /** State object to display in the tree viewer (Redux store, Zustand, etc.) */
+    state?: Record<string, unknown>;
+    /** Custom action buttons in the Info tab */
+    quickActions?: QuickAction[];
+    /** Maximum number of logs to retain in memory. Default: 500 */
+    maxLogs?: number;
+    /** Log messages containing these strings will be excluded */
+    logFilters?: string[];
+    /** Callback triggered when user copies logs */
+    onCopyLogs?: (logs: string) => void;
+    /** Additional custom tabs beyond Info and Logs */
+    extraTabs?: BackstageTab[];
+    /** Extra content rendered at the bottom of the Info tab */
+    children?: ReactNode;
+    /** Custom styles overrides */
+    styles?: BackstageStyleOverrides;
+    /** Initial X position for the floating pill */
+    initialX?: number;
+    /** Initial Y position for the floating pill */
+    initialY?: number;
+    /** Text displayed on the floating pill. Defaults to appVersion or "DEV" */
+    pillText?: string;
+}
+export interface BackstageStyleOverrides {
+    pillStyle?: StyleProp<ViewStyle>;
+    pillTextStyle?: StyleProp<TextStyle>;
+    panelStyle?: StyleProp<ViewStyle>;
+    headerTitleStyle?: StyleProp<TextStyle>;
+    sectionTitleStyle?: StyleProp<TextStyle>;
+    infoLabelStyle?: StyleProp<TextStyle>;
+    infoValueStyle?: StyleProp<TextStyle>;
+    actionButtonStyle?: StyleProp<ViewStyle>;
+    actionButtonTitleStyle?: StyleProp<TextStyle>;
+    logTimestampStyle?: StyleProp<TextStyle>;
+    logMessageStyle?: StyleProp<TextStyle>;
+}
+export interface BackstageRef {
+    /** Open the backstage panel */
+    open: () => void;
+    /** Close the backstage panel */
+    close: () => void;
+    /** Clear all captured logs */
+    clearLogs: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAInE,oBAAY,QAAQ;IAClB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB;AAID,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAID,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAID,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,SAAS,CAAA;CACxB;AAID,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAID,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,WAAW,EAAE,CAAA;IAE1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAE/B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAE5B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IAErB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC,kDAAkD;IAClD,SAAS,CAAC,EAAE,YAAY,EAAE,CAAA;IAE1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,uBAAuB,CAAA;IAEhC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACvC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACxC,sBAAsB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC7C,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACxC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACvC;AAID,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,8BAA8B;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB"}

package/lib/typescript/utils/formatTimestamp.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Formats a timestamp (Date.now()) into a human-readable local time string.
+ * Format: "h:mm:ss.SSS AM/PM"
+ * No external dependencies — uses native Date API.
+ */
+export declare function formatTimestamp(timestamp: number): string;
+//# sourceMappingURL=formatTimestamp.d.ts.map

package/lib/typescript/utils/formatTimestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTimestamp.d.ts","sourceRoot":"","sources":["../../../src/utils/formatTimestamp.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAgBzD"}

package/lib/typescript/utils/stringify.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Safely stringifies a value, handling circular references and Error objects.
+ */
+export declare function safeStringify(value: unknown, indent?: number): string;
+/**
+ * Formats a console message and its optional params into a single string.
+ */
+export declare function formatLogMessage(message: unknown, optionalParams?: unknown[]): string;
+//# sourceMappingURL=stringify.d.ts.map

package/lib/typescript/utils/stringify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringify.d.ts","sourceRoot":"","sources":["../../../src/utils/stringify.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,SAAI,GAAG,MAAM,CA4ChE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,MAAM,CA4BrF"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "rn-backstage",
+  "version": "1.0.0",
+  "description": "A zero-dependency developer/QA debug panel for React Native apps",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "prettier --write \"**/*.{js,ts,tsx}\" && eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "clean": "del-cli lib"
+  },
+  "keywords": [
+    "react-native",
+    "backstage",
+    "debug",
+    "developer-tools",
+    "qa-menu",
+    "dev-tools",
+    "console-logs",
+    "state-inspector"
+  ],
+  "repository": "https://github.com/junocs/react-native-backstage",
+  "author": "Juno Sheridan <juno.sheridan@gmail.com> (https://github.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/junocs/react-native-backstage/issues"
+  },
+  "homepage": "https://github.com/junocs/react-native-backstage#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "~18.3.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.0.0",
+    "prettier": "^3.0.0",
+    "react": "18.3.1",
+    "react-native": "^0.78.0",
+    "react-native-builder-bob": "^0.35.0",
+    "release-it": "^18.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.57.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "useTabs": false,
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "semi": false,
+    "trailingComma": "all",
+    "arrowParens": "avoid",
+    "printWidth": 100
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/Backstage.tsx

@@ -0,0 +1,145 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { StyleSheet, View } from 'react-native'
+import { DEFAULT_MAX_LOGS } from './constants'
+import { installInterceptor, LogBuffer, uninstallInterceptor } from './log-interceptor'
+import { FloatingPill } from './components/FloatingPill'
+import { BackstagePanel } from './components/BackstagePanel'
+import type { BackstageProps, BackstageRef, LogEntry } from './types'
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const Backstage = forwardRef<BackstageRef, BackstageProps>(
+  (
+    {
+      visible = true,
+      appVersion,
+      buildNumber,
+      bundleId,
+      deviceInfo,
+      state,
+      quickActions,
+      maxLogs = DEFAULT_MAX_LOGS,
+      logFilters,
+      onCopyLogs,
+      extraTabs,
+      children,
+      styles: propStyles,
+      initialX,
+      initialY,
+      pillText,
+    },
+    ref,
+  ) => {
+    const [panelVisible, setPanelVisible] = useState(false)
+    const [hasError, setHasError] = useState(false)
+    const [logs, setLogs] = useState<LogEntry[]>([])
+
+    const logBuffer = useRef(new LogBuffer(maxLogs))
+
+    // ── Panel controls ────────────────────────────────────────
+
+    const openPanel = useCallback(() => {
+      setPanelVisible(true)
+      // Sync logs when opening panel
+      setLogs(logBuffer.current.getAll())
+    }, [])
+
+    const closePanel = useCallback(() => {
+      setPanelVisible(false)
+    }, [])
+
+    const clearLogs = useCallback(() => {
+      logBuffer.current.clear()
+      setLogs([])
+      setHasError(false)
+    }, [])
+
+    // ── Refresh logs ──────────────────────────────────────────
+
+    const refreshLogs = useCallback(() => {
+      setLogs(logBuffer.current.getAll())
+    }, [])
+
+    // ── Install console interceptor ───────────────────────────
+
+    useEffect(() => {
+      const handleLogEntry = (entry: LogEntry) => {
+        logBuffer.current.push(entry)
+
+        // Track error state for the floating pill
+        if (entry.level === 'error') {
+          setHasError(true)
+        }
+      }
+
+      installInterceptor(handleLogEntry, logFilters)
+
+      return () => {
+        uninstallInterceptor()
+      }
+    }, [logFilters])
+
+    // ── Expose ref methods ────────────────────────────────────
+
+    useImperativeHandle(ref, () => ({
+      open: openPanel,
+      close: closePanel,
+      clearLogs,
+    }))
+
+    // ── Render ────────────────────────────────────────────────
+
+    if (!visible) return null
+
+    const displayText = pillText || (appVersion ? `v${appVersion}` : 'DEV')
+
+    return (
+      <View style={styles.container} pointerEvents="box-none">
+        <FloatingPill
+          text={displayText}
+          hasError={hasError}
+          onPress={openPanel}
+          initialX={initialX}
+          initialY={initialY}
+          styles={propStyles}
+        />
+        <BackstagePanel
+          visible={panelVisible}
+          onClose={closePanel}
+          appVersion={appVersion}
+          buildNumber={buildNumber}
+          bundleId={bundleId}
+          deviceInfo={deviceInfo}
+          state={state}
+          quickActions={quickActions}
+          logs={logs}
+          onRefreshLogs={refreshLogs}
+          onCopyLogs={onCopyLogs}
+          extraTabs={extraTabs}
+          styles={propStyles}
+        >
+          {children}
+        </BackstagePanel>
+      </View>
+    )
+  },
+)
+
+Backstage.displayName = 'Backstage'
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 99999,
+    elevation: 99999,
+  },
+})