@djangocfg/debuger 2.1.356 → 2.1.357

package/src/DebugPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { memo, useMemo, useState, useEffect } from 'react';
 import { installMonitorBridge } from './bridges';
 import { MONITOR_VERSION } from '@djangocfg/monitor/client';
 import {
@@ -61,7 +61,14 @@ const POSITION_CLASSES: Record<NonNullable<DebugPanelProps['position']>, string>
 // Component
 // ============================================================================
 
-export function DebugPanel({
+/**
+ * DebugPanel — floating debug panel with tabs (logs, audio, custom).
+ *
+ * Memoised: re-renders only when `tabs`, `position`, `defaultHeight`
+ * or `defaultWidth` change. `tabs` array is compared by reference —
+ * consumers should define it outside the component or memoise it.
+ */
+function DebugPanelRaw({
   tabs: customTabs = [],
   position = 'bottom-left',
   defaultHeight = 480,
@@ -171,3 +178,5 @@ export function DebugPanel({
     </div>
   );
 }
+
+export const DebugPanel = memo(DebugPanelRaw);

package/src/panels/AudioDebugPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import {
   Button,
   Badge,
@@ -57,7 +57,13 @@ interface AudioDebugPanelProps {
   isActive: boolean;
 }
 
-export function AudioDebugPanel({ isActive }: AudioDebugPanelProps) {
+/**
+ * AudioDebugPanel — real-time audio event log with metrics.
+ *
+ * Memoised: re-renders only when `isActive` changes. Internal event
+ * log state is managed by the hook and does not break memoisation.
+ */
+function AudioDebugPanelRaw({ isActive }: AudioDebugPanelProps) {
   const { events, clear, seekRate, syncIntervalMs, kindCounts } = useAudioEventLog(isActive);
   const [debugMode, setDebugMode] = useState<DebugAudioMode>(getDebugAudioMode);
 
@@ -155,3 +161,5 @@ export function AudioDebugPanel({ isActive }: AudioDebugPanelProps) {
     </div>
   );
 }
+
+export const AudioDebugPanel = memo(AudioDebugPanelRaw);

package/src/panels/LogsPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { memo, useState, useCallback, useEffect, useRef } from 'react';
 import {
   useDebugLogStore,
   useDebugFilteredLogs,
@@ -53,7 +53,13 @@ interface LogEntryRowProps {
   onToggle: () => void;
 }
 
-function LogEntryRow({ entry, expanded, onToggle }: LogEntryRowProps) {
+/**
+ * LogEntryRow — single virtualised log entry.
+ *
+ * Memoised: re-renders only when `entry` reference, `expanded`, or
+ * `onToggle` reference change. `entry` is treated as immutable.
+ */
+const LogEntryRow = memo(function LogEntryRow({ entry, expanded, onToggle }: LogEntryRowProps) {
   const config = LOG_LEVEL_CONFIG[entry.level];
   const Icon = config.icon;
   const pad = (n: number, len = 2) => String(n).padStart(len, '0');
@@ -96,13 +102,20 @@ function LogEntryRow({ entry, expanded, onToggle }: LogEntryRowProps) {
       )}
     </div>
   );
-}
+});
 
 // ============================================================================
 // LogsPanel
 // ============================================================================
 
-export function LogsPanel({ isActive }: { isActive: boolean }) {
+/**
+ * LogsPanel — virtualised log viewer with filters and search.
+ *
+ * Memoised: re-renders only when `isActive` changes. Internal filter
+ * state and log store subscriptions are isolated and do not propagate
+ * to parent components.
+ */
+function LogsPanelRaw({ isActive }: { isActive: boolean }) {
   const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedLevels, setSelectedLevels] = useState<Set<LogLevel>>(
@@ -265,3 +278,5 @@ export function LogsPanel({ isActive }: { isActive: boolean }) {
     </div>
   );
 }
+
+export const LogsPanel = memo(LogsPanelRaw);

package/src/panels/StorePanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 import { ScrollArea } from '@djangocfg/ui-core/components';
 import { LazyJsonTree } from '@djangocfg/ui-tools';
 import { Database } from 'lucide-react';
@@ -48,8 +48,12 @@ export interface StorePanelProps {
  *   getState={() => useTimelineStore.getState()}
  *   isActive={isActive}
  * />
+ *
+ * Memoised: re-renders only when `label`, `getState`, `intervalMs` or
+ * `isActive` change. `getState` is compared by reference — callers should
+ * stabilise it (e.g. define outside the component or wrap in useCallback).
  */
-export function StorePanel({ label, getState, intervalMs = 200, isActive }: StorePanelProps) {
+function StorePanelRaw({ label, getState, intervalMs = 200, isActive }: StorePanelProps) {
   const snapshot = useStoreSnapshot(getState, intervalMs, isActive);
 
   return (
@@ -69,3 +73,5 @@ export function StorePanel({ label, getState, intervalMs = 200, isActive }: Stor
     </div>
   );
 }
+
+export const StorePanel = memo(StorePanelRaw);