react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/{components → features/thirdPartyLibs}/ThirdPartyLibsTab.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Colors } from '../utils/constants';
-import type { DebugFeatureRenderProps, ThirdPartyLib } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import type { DebugFeatureRenderProps, ThirdPartyLib, ThirdPartyLibAction } from '../../types';
 
-export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>> = ({
-  data,
+export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib[]>> = ({
+  snapshot,
 }) => {
+  const data = snapshot;
   if (data.length === 0) {
     return (
       <View style={styles.container}>
@@ -21,7 +22,7 @@ export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>>
           <Text style={styles.libName}>{lib.name}</Text>
           <Text style={styles.libDesc}>{lib.description}</Text>
           <View style={styles.actions}>
-            {lib.actions.map((action) => (
+            {lib.actions.map((action: ThirdPartyLibAction) => (
               <TouchableOpacity
                 key={action.id}
                 style={styles.actionButton}

package/src/features/{ThirdPartyLibsFeature.ts → thirdPartyLibs/index.ts}

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
-import { ThirdPartyLibsTab } from '../components/ThirdPartyLibsTab';
-import { NativeDebugLibs } from '../native/NativeDebugLibs';
-import type { DebugFeature, ThirdPartyLib } from '../types';
+import { ThirdPartyLibsTab } from './ThirdPartyLibsTab';
+import { NativeDebugLibs } from './nativeDebugLibs';
+import type { DebugFeature, ThirdPartyLib } from '../../types';
 
 const availableLibs: ThirdPartyLib[] = [
   {
@@ -32,11 +32,11 @@ function getPlatformLibs(): ThirdPartyLib[] {
   );
 }
 
-export const createThirdPartyLibsFeature = (): DebugFeature<ThirdPartyLib> => ({
+export const createThirdPartyLibsFeature = (): DebugFeature<ThirdPartyLib[]> => ({
   name: 'thirdPartyLibs',
   label: 'Debug Libraries',
   renderContent: ThirdPartyLibsTab,
   setup: () => {},
-  getData: () => getPlatformLibs(),
+  getSnapshot: () => getPlatformLibs(),
   cleanup: () => {},
 });

package/src/features/track/TrackLogTab.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, TrackLogEntry } from '../../types';
+
+export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry[]>> = React.memo(({ snapshot }) => (
+  <LogListScreen
+    data={snapshot}
+    emptyText="No track events"
+    renderRow={(item) => (
+      <View style={s.cardRow}>
+        <View style={s.eventIcon}><Text style={s.eventIconText}>●</Text></View>
+        <View style={s.cardContent}>
+          <View style={s.cardHeader}>
+            <Text style={s.eventName}>{item.eventName}</Text>
+            <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+          </View>
+          <View style={s.previewRow}>
+            {Object.entries(item)
+              .filter(([k]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp')
+              .slice(0, 2)
+              .map(([key, value]) => (
+                <View key={key} style={s.previewChip}>
+                  <Text style={s.previewText} numberOfLines={1}>
+                    <Text style={s.previewKey}>{key}</Text> {String(value ?? '').slice(0, 25)}
+                  </Text>
+                </View>
+              ))}
+          </View>
+        </View>
+      </View>
+    )}
+    renderDetailHeader={(item) => (
+      <View style={s.eventBadge}><Text style={s.eventBadgeText}>{item.eventName}</Text></View>
+    )}
+    renderDetailBody={(item) => {
+      const extraProps = Object.entries(item).filter(
+        ([k, v]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp' && v !== undefined && v !== null,
+      );
+      return (
+        <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+          <CollapsibleSection title="Properties" initiallyExpanded>
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(Object.fromEntries(extraProps), 2)} label="Track Properties" />
+              <View style={s.propsGrid}>
+                {extraProps.map(([key, value]) => (
+                  <View key={key} style={s.propRow}>
+                    <Text style={s.propKey}>{key}</Text>
+                    <Text style={s.propValue} selectable>
+                      {typeof value === 'object' ? safeStringify(value) : String(value ?? '')}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          </CollapsibleSection>
+          <CollapsibleSection title="Full Event Data">
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item, 2)} label="Track Event" />
+              <JsonView data={item} maxHeight={300} />
+            </View>
+          </CollapsibleSection>
+          <View style={s.timingCard}>
+            <Text style={s.timingLabel}>Time</Text>
+            <Text style={s.timingValue}>{new Date(item.timestamp).toLocaleString()}</Text>
+          </View>
+        </ScrollView>
+      );
+    }}
+  />
+));
+
+const s = StyleSheet.create({
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
+  eventIcon: {
+    width: 28, height: 28, borderRadius: 8,
+    backgroundColor: 'rgba(175,82,222,0.1)',
+    alignItems: 'center', justifyContent: 'center',
+    marginRight: 12, marginTop: 1,
+  },
+  eventIconText: { color: Colors.purple, fontSize: 10 },
+  cardContent: { flex: 1 },
+  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
+  eventName: { fontSize: 15, fontWeight: '600', color: Colors.text },
+  time: { fontSize: 12, color: Colors.textSecondary },
+  previewRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 },
+  previewChip: { backgroundColor: Colors.background, borderRadius: 6, paddingHorizontal: 8, paddingVertical: 3 },
+  previewText: { fontSize: 12, color: Colors.textSecondary, lineHeight: 16 },
+  previewKey: { fontWeight: '600', color: Colors.text },
+  eventBadge: { backgroundColor: Colors.purple, paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8 },
+  eventBadgeText: { color: '#FFF', fontSize: 14, fontWeight: '700' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  sectionWithCopy: { gap: 8 },
+  propsGrid: { gap: 12 },
+  propRow: {},
+  propKey: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 3 },
+  propValue: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+  timingCard: {
+    backgroundColor: Colors.surface, borderRadius: 12, padding: 14,
+    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 4,
+  },
+  timingLabel: { fontSize: 13, color: Colors.textSecondary, fontWeight: '500' },
+  timingValue: { fontSize: 13, color: Colors.text },
+});

package/src/features/track/index.ts

@@ -0,0 +1,41 @@
+import { TrackLogTab } from './TrackLogTab';
+import type { DebugFeature, TrackLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
+import { KEYS } from '../../utils/debugPreferences';
+
+export interface TrackEventData {
+  eventName: string;
+  [key: string]: unknown;
+}
+
+type TrackLogPayload = TrackEventData & { timestamp: number };
+
+let trackChannel = createEventChannel<TrackLogPayload>();
+
+export const addTrackLog = (eventData: TrackEventData): void => {
+  trackChannel.emit({ timestamp: Date.now(), ...eventData });
+};
+
+export interface TrackFeatureConfig {
+  /** Maximum number of track events to keep (default: 200) */
+  maxLogs?: number;
+}
+
+export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry[]> =>
+  createChannelFeature(
+    () => trackChannel,
+    (payload, id) => ({ ...payload, id }),
+    {
+      name: 'track',
+      label: 'Track',
+      renderContent: TrackLogTab,
+      maxLogs: config?.maxLogs,
+      persist: { storageKey: KEYS.trackLogs, maxPersist: 50 },
+    },
+  );
+
+/** Reset module-level state for testing */
+export function _resetTrackForTesting(): void {
+  trackChannel = createEventChannel<TrackLogPayload>();
+}

package/src/features/zustand/ZustandLogTab.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, ZustandLogEntry } from '../../types';
+
+const getActionColor = (action: string): string => {
+  if (action.includes('add') || action.includes('create')) return '#34C759';
+  if (action.includes('remove') || action.includes('delete')) return '#FF3B30';
+  if (action.includes('update') || action.includes('set')) return '#007AFF';
+  return '#AF52DE';
+};
+
+const getActionBgColor = (action: string): string => {
+  if (action.includes('add') || action.includes('create')) return 'rgba(52,199,89,0.1)';
+  if (action.includes('remove') || action.includes('delete')) return 'rgba(255,59,48,0.1)';
+  if (action.includes('update') || action.includes('set')) return 'rgba(0,122,255,0.1)';
+  return 'rgba(175,82,222,0.1)';
+};
+
+function findChanges(prev: unknown, next: unknown): string[] {
+  if (typeof prev !== 'object' || typeof next !== 'object' || !prev || !next) return [];
+  const allKeys = new Set([...Object.keys(prev as object), ...Object.keys(next as object)]);
+  const changed: string[] = [];
+  allKeys.forEach((key) => {
+    const pv = (prev as Record<string, unknown>)[key];
+    const nv = (next as Record<string, unknown>)[key];
+    if (safeStringify(pv) !== safeStringify(nv)) changed.push(key);
+  });
+  return changed;
+}
+
+export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry[]>> = React.memo(({
+  snapshot,
+}) => (
+  <LogListScreen
+    data={snapshot}
+    emptyText="No Zustand state changes"
+    renderRow={(item) => (
+      <View style={s.cardRow}>
+        <View style={[s.actionIcon, { backgroundColor: getActionBgColor(item.action) }]}>
+          <View style={[s.actionDot, { backgroundColor: getActionColor(item.action) }]} />
+        </View>
+        <View style={s.cardContent}>
+          <View style={s.cardMeta}>
+            <Text style={s.action}>{item.action}</Text>
+            {item.storeName && (
+              <View style={s.storeBadge}>
+                <Text style={s.storeBadgeText}>{item.storeName}</Text>
+              </View>
+            )}
+          </View>
+          <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+        </View>
+        {item.actionCompleteTime != null && (
+          <View style={s.durationBadge}>
+            <Text style={s.durationText}>{item.actionCompleteTime}ms</Text>
+          </View>
+        )}
+      </View>
+    )}
+    renderDetailHeader={(item) => (
+      <View style={s.detailHeaderCenter}>
+        <Text style={[s.detailAction, { color: getActionColor(item.action) }]}>
+          {item.action}
+        </Text>
+        {item.storeName && (
+          <View style={s.storeBadge}>
+            <Text style={s.storeBadgeText}>{item.storeName}</Text>
+          </View>
+        )}
+      </View>
+    )}
+    renderDetailBody={(item) => {
+      const changes = findChanges(item.prevState, item.nextState);
+      return (
+        <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+          <View style={s.metaCard}>
+            <View style={s.metaItem}>
+              <Text style={s.metaLabel}>Time</Text>
+              <Text style={s.metaValue}>{new Date(item.timestamp).toLocaleString()}</Text>
+            </View>
+            {item.actionCompleteTime != null && <View style={s.metaDivider} />}
+            {item.actionCompleteTime != null && (
+              <View style={s.metaItem}>
+                <Text style={s.metaLabel}>Duration</Text>
+                <Text style={s.metaValue}>{item.actionCompleteTime}ms</Text>
+              </View>
+            )}
+          </View>
+
+          {changes.length > 0 && (
+            <View style={s.changesCard}>
+              <Text style={s.changesTitle}>Changed Keys</Text>
+              <View style={s.changesTags}>
+                {changes.map((key) => (
+                  <View key={key} style={s.changeTag}>
+                    <Text style={s.changeTagText}>{key}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          )}
+
+          <CollapsibleSection title="Previous State">
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item.prevState, 2)} label="Previous State" />
+              <JsonView data={item.prevState} maxHeight={250} />
+            </View>
+          </CollapsibleSection>
+
+          <CollapsibleSection title="Next State" initiallyExpanded>
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item.nextState, 2)} label="Next State" />
+              <JsonView data={item.nextState} maxHeight={250} />
+            </View>
+          </CollapsibleSection>
+        </ScrollView>
+      );
+    }}
+  />
+));
+
+const s = StyleSheet.create({
+  // Row
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'center' },
+  actionIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  actionDot: { width: 8, height: 8, borderRadius: 4 },
+  cardContent: { flex: 1 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 3 },
+  action: { fontSize: 15, fontWeight: '600', color: Colors.text },
+  storeBadge: {
+    backgroundColor: 'rgba(0,122,255,0.08)',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  storeBadgeText: { fontSize: 11, color: Colors.primary, fontWeight: '600' },
+  time: { fontSize: 12, color: Colors.textSecondary },
+  durationBadge: {
+    backgroundColor: Colors.background,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
+
+  // Detail header
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+  },
+  detailAction: { fontSize: 17, fontWeight: '700' },
+
+  // Detail body
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  sectionWithCopy: { gap: 8 },
+
+  // Meta
+  metaCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  metaItem: { flex: 1 },
+  metaDivider: { width: 1, height: 28, backgroundColor: Colors.border, marginHorizontal: 12 },
+  metaLabel: { fontSize: 11, color: Colors.textSecondary, fontWeight: '600', textTransform: 'uppercase', marginBottom: 2 },
+  metaValue: { fontSize: 14, color: Colors.text, fontWeight: '500' },
+
+  // Changes
+  changesCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+  },
+  changesTitle: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 10 },
+  changesTags: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  changeTag: {
+    backgroundColor: 'rgba(0,122,255,0.08)',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  changeTagText: { fontSize: 12, color: Colors.primary, fontWeight: '600' },
+});

package/src/features/{ZustandLogFeature.ts → zustand/index.ts}

@@ -1,12 +1,11 @@
-import { ZustandLogTab } from '../components/ZustandLogTab';
-import type { DebugFeature, ZustandLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
+import { ZustandLogTab } from './ZustandLogTab';
+import type { DebugFeature, ZustandLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
 
 type ZustandLogPayload = Omit<ZustandLogEntry, 'id'>;
 
-const DEFAULT_MAX_LOGS = 200;
-const zustandChannel = createEventChannel<ZustandLogPayload>();
+let zustandChannel = createEventChannel<ZustandLogPayload>();
 
 export const addZustandLog = (
   action: string,
@@ -25,6 +24,8 @@ export const addZustandLog = (
   });
 };
 
+// ─── Zustand middleware (remains here — it's user-facing API) ──────────
+
 type ZustandSetState<T> = (
   partial: T | Partial<T> | ((state: T) => Partial<T> | T),
   replace?: boolean | undefined,
@@ -80,48 +81,21 @@ export const zustandLogMiddleware = <T>(config: ZustandConfig<T>) => (
     api,
   );
 
+// ─── Feature factory ──────────────────────────────────────────────────
+
 export interface ZustandFeatureConfig {
   /** Maximum number of zustand state changes to keep (default: 200) */
   maxLogs?: number;
 }
 
-export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry> => {
-  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<ZustandLogEntry>();
-  let nextId = 0;
-  let unsubscribeLogs: (() => void) | null = null;
-  let initialized = false;
-
-  return {
-    name: 'zustand',
-    label: 'Zustand',
-    renderContent: ZustandLogTab,
-    setup: () => {
-      if (initialized) {
-        return;
-      }
+export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry[]> =>
+  createChannelFeature(
+    () => zustandChannel,
+    (payload, id) => ({ ...payload, id }),
+    { name: 'zustand', label: 'Zustand', renderContent: ZustandLogTab, maxLogs: config?.maxLogs },
+  );
 
-      unsubscribeLogs = zustandChannel.subscribe((entry) => {
-        logStore.push(
-          {
-            ...entry,
-            id: String(nextId++),
-          },
-          maxLogs,
-        );
-      });
-      initialized = true;
-    },
-    getData: () => logStore.getData(),
-    clear: () => {
-      logStore.clear();
-    },
-    cleanup: () => {
-      unsubscribeLogs?.();
-      unsubscribeLogs = null;
-      logStore.clear();
-      initialized = false;
-    },
-    subscribe: (listener) => logStore.subscribe(listener),
-  };
-};
+/** Reset module-level state for testing */
+export function _resetZustandForTesting(): void {
+  zustandChannel = createEventChannel<ZustandLogPayload>();
+}

package/src/index.ts

@@ -1,28 +1,28 @@
 // Core
 export { DebugToolkit } from './core/DebugToolkit';
 export { DebugToolkitProvider, useDebugToolkit } from './core/DebugToolkitProvider';
-export { initializeDebugToolkit, isDebugMode } from './initialize';
-export type { InitializeOptions, FeatureConfigs } from './initialize';
+export { DebugView } from './ui/DebugView';
+export type { DebugViewProps } from './ui/DebugView';
+export { initializeDebugToolkit } from './core/initialize';
+export type { InitializeOptions, FeatureConfigs } from './core/initialize';
 
 // Feature factories
-export { createNetworkFeature } from './features/NetworkFeature';
-export type { NetworkFeatureAPI, NetworkFeatureConfig } from './features/NetworkFeature';
-export { createConsoleLogFeature } from './features/ConsoleLogFeature';
-export type { ConsoleFeatureConfig } from './features/ConsoleLogFeature';
-export { createZustandLogFeature, zustandLogMiddleware, addZustandLog } from './features/ZustandLogFeature';
-export type { ZustandFeatureConfig } from './features/ZustandLogFeature';
-export { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature';
-export type { NavigationFeatureConfig } from './features/NavigationLogFeature';
-export { createTrackFeature, addTrackLog } from './features/TrackFeature';
-export type { TrackFeatureConfig, TrackEventData } from './features/TrackFeature';
-export { createThirdPartyLibsFeature } from './features/ThirdPartyLibsFeature';
-export { createEnvironmentFeature } from './features/EnvironmentFeature';
-export type { EnvironmentFeatureAPI } from './features/EnvironmentFeature';
-export { createClipboardFeature } from './features/ClipboardFeature';
+export { createNetworkFeature } from './features/network';
+export type { NetworkFeatureConfig, AxiosInstanceLike } from './features/network';
+export { createConsoleLogFeature } from './features/console';
+export type { ConsoleFeatureConfig } from './features/console';
+export { createZustandLogFeature, zustandLogMiddleware, addZustandLog } from './features/zustand';
+export type { ZustandFeatureConfig } from './features/zustand';
+export { createNavigationLogFeature, addNavigationLog } from './features/navigation';
+export type { NavigationFeatureConfig } from './features/navigation';
+export { createTrackFeature, addTrackLog } from './features/track';
+export type { TrackFeatureConfig, TrackEventData } from './features/track';
+export { createEnvironmentFeature } from './features/environment';
+export type { EnvironmentFeatureAPI } from './features/environment';
+export { createClipboardFeature } from './features/clipboard';
 
 // Hooks
-export { useNavigationLogger } from './hooks/useNavigationLogger';
-export { useSlideDetailAnimation } from './hooks/useSlideDetailAnimation';
+export { useNavigationLogger } from './features/navigation/useNavigationLogger';
 
 // Utilities
 export { safeStringify } from './utils/safeStringify';
@@ -31,22 +31,18 @@ export type { CopyResult, CopyOptions, CopyMethod } from './utils/copyToComputer
 
 // Types
 export type {
+  AnyDebugFeature,
   BuiltInFeatureName,
   DebugFeature,
-  DebugFeatureFactory,
-  DebugFeatureInput,
   DebugFeatureRenderProps,
-  DebugToolkitConfig,
-  DebugToolkitAPI,
   NetworkLogEntry,
   ConsoleLogEntry,
   ZustandLogEntry,
   NavigationLogEntry,
   TrackLogEntry,
-  ThirdPartyLib,
   EnvironmentConfig,
   EnvironmentState,
 } from './types';
 
 // Default export for convenience
-export { initializeDebugToolkit as default } from './initialize';
+export { initializeDebugToolkit as default } from './core/initialize';

package/src/types/environment.ts

@@ -0,0 +1,11 @@
+export interface EnvironmentConfig {
+  id: string;
+  label: string;
+  host: string;
+  color?: string;
+}
+
+export interface EnvironmentState {
+  environments: EnvironmentConfig[];
+  currentEnvironmentId: string | null;
+}

package/src/types/feature.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'react';
+
+export type DebugFeatureListener = () => void;
+
+export type BuiltInFeatureName =
+  | 'network'
+  | 'console'
+  | 'zustand'
+  | 'navigation'
+  | 'track'
+  | 'environment'
+  | 'clipboard';
+
+export interface DebugFeatureRenderProps<TSnapshot = unknown> {
+  snapshot: TSnapshot;
+  feature: DebugFeature<TSnapshot>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyDebugFeature = DebugFeature<any>;
+
+export interface DebugFeature<TSnapshot = unknown> {
+  name: string;
+  label: string;
+  setup: () => void;
+  getSnapshot: () => TSnapshot;
+  clear?: () => void;
+  cleanup: () => void;
+  subscribe?: (listener: DebugFeatureListener) => () => void;
+  renderContent?: ComponentType<DebugFeatureRenderProps<TSnapshot>>;
+  badge?: () => { label: string; color: string } | null;
+}