@djangocfg/debuger 2.1.233 → 2.1.235

package/src/DebugButton.tsx

@@ -7,7 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
+import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useDebugMode } from '@djangocfg/monitor/client';
 import { useDebugStore } from './store/debugStore';
 import { useDebugShortcut } from './hooks/useDebugShortcut';
@@ -23,87 +23,86 @@ export interface DebugButtonProps {
   className?: string;
   /** Props forwarded to DebugPanel */
   panel?: Omit<DebugPanelProps, never>;
-  /** Start unlocked (e.g. in dev playgrounds). Default: false */
-  defaultUnlocked?: boolean;
-}
-
-// ============================================================================
-// Easter-egg: 5 clicks in 2 seconds → unlock
-// ============================================================================
-
-function useEasterEgg(onTriggered: () => void) {
-  const clicks = useRef<number[]>([]);
-
-  return useCallback(() => {
-    const now = Date.now();
-    clicks.current = [...clicks.current.filter((t) => now - t < 2000), now];
-    if (clicks.current.length >= 5) {
-      clicks.current = [];
-      onTriggered();
-    }
-  }, [onTriggered]);
+  /** Explicitly disable. Default: undefined (auto — visible in dev, hidden in prod, ?debug=1 always works) */
+  enabled?: boolean;
 }
 
 // ============================================================================
 // DebugButton
+//
+// Visibility rules (simple):
+//   1. enabled === false  AND  no ?debug=1  →  hidden completely
+//   2. isDev  OR  ?debug=1 (localStorage)   →  visible (unlocked)
+//   3. prod without ?debug=1               →  invisible click trap (easter egg: 5 clicks)
 // ============================================================================
 
-export function DebugButton({ className, panel = {}, defaultUnlocked = false }: DebugButtonProps) {
+export function DebugButton({ className, panel = {}, enabled }: DebugButtonProps) {
+  // All hooks called unconditionally (React rules of hooks)
   const isOpen = useDebugStore((s) => s.isOpen);
   const isUnlocked = useDebugStore((s) => s.isUnlocked);
   const unlock = useDebugStore((s) => s.unlock);
   const toggle = useDebugStore((s) => s.toggle);
-
   const isDebugMode = useDebugMode();
-
-  // Auto-unlock when defaultUnlocked or debug mode is active
-  useEffect(() => {
-    if (defaultUnlocked || isDebugMode) unlock('1');
-  }, [defaultUnlocked, isDebugMode, unlock]);
   const errorCount = useDebugErrorCount();
-
-  // Keyboard shortcut
   useDebugShortcut();
 
-  // Hide Next.js dev indicator badge while panel is open.
-  // Uses MutationObserver because <nextjs-portal> is mounted asynchronously after hydration.
+  // Should this button be visible (unlocked)?
+  const shouldUnlock = isDev || isDebugMode;
+
+  // eslint-disable-next-line no-console
+  if (typeof window !== 'undefined') console.info('[DebugButton]', { isDev, isDebugMode, shouldUnlock, isUnlocked, enabled });
+
+  // Auto-unlock in dev or when ?debug=1
   useEffect(() => {
-    if (typeof document === 'undefined') return;
+    if (shouldUnlock) unlock('1');
+  }, [shouldUnlock, unlock]);
 
+  // Hide Next.js dev indicator while panel is open
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
     const apply = () => {
       document.querySelectorAll<HTMLElement>('nextjs-portal').forEach((el) => {
         el.style.display = isOpen ? 'none' : '';
       });
     };
-
-    apply(); // handle already-mounted elements
-
+    apply();
     const observer = new MutationObserver(apply);
     observer.observe(document.body, { childList: true });
-
     return () => observer.disconnect();
   }, [isOpen]);
 
-  // Easter-egg: 5 clicks in 2s → unlock directly
-  const handleEasterEggClick = useCallback(() => { unlock('1'); toggle(); }, [unlock, toggle]);
-  const handleEasterEggTrigger = useEasterEgg(handleEasterEggClick);
+  // Easter egg: 5 clicks in 2s → unlock
+  const clicks = useRef<number[]>([]);
+  const handleEasterEgg = useCallback(() => {
+    const now = Date.now();
+    clicks.current = [...clicks.current.filter((t) => now - t < 2000), now];
+    if (clicks.current.length >= 5) {
+      clicks.current = [];
+      unlock('1');
+      toggle();
+    }
+  }, [unlock, toggle]);
+
+  // === Render decision (after all hooks) ===
 
-  // Visibility guard: button only shown when explicitly unlocked (?debug=1 or easter egg)
-  // Always render invisible click trap for easter-egg regardless of env
+  // Explicitly disabled AND no debug override → don't render at all
+  if (enabled === false && !isDebugMode) return null;
+
+  // Not unlocked → invisible click trap for easter egg
   if (!isUnlocked) {
     return (
       <div
-        className="fixed bottom-5 left-5 w-9 h-9 z-[99999] opacity-0"
-        onClick={handleEasterEggTrigger}
+        className="fixed bottom-5 left-5 w-9 h-9 z-[99999] opacity-0 cursor-default"
+        onClick={handleEasterEgg}
       />
     );
   }
 
+  // Unlocked → visible debug button
   return (
     <>
-      {/* Trigger button — hidden when panel is open */}
       {!isOpen && (
-        <div className="fixed bottom-5 left-16 z-[99999]">
+        <div className={cn('fixed bottom-5 z-[99999]', isDev ? 'left-16' : 'left-5')}>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -115,7 +114,7 @@ export function DebugButton({ className, panel = {}, defaultUnlocked = false }:
                   'transition-all duration-150 hover:scale-105',
                   'focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50',
                   errorCount > 0 && 'bg-red-600/90',
-                  className
+                  className,
                 )}
                 onClick={toggle}
               >
@@ -131,7 +130,6 @@ export function DebugButton({ className, panel = {}, defaultUnlocked = false }:
           </Tooltip>
         </div>
       )}
-
       <DebugPanel {...panel} />
     </>
   );

package/src/logger/logger.ts

@@ -12,7 +12,7 @@ import type { Logger, LogLevel } from './types';
 // Helpers
 // ============================================================================
 
-const isDev = process.env.NODE_ENV !== 'production';
+import { isDev } from '@djangocfg/ui-core/lib';
 const isBrowser = typeof window !== 'undefined';
 
 function extractStack(data?: Record<string, unknown>): {

package/dist/chunk-ESIQODSI.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/logger/logStore.ts","../src/logger/logger.ts"],"names":[],"mappings":"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","file":"chunk-ESIQODSI.mjs","sourcesContent":["'use client';\n\nimport { create } from 'zustand';\nimport type { LogStore, LogEntry, LogFilter } from './types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst MAX_LOGS = 1000;\n\nconst DEFAULT_FILTER: LogFilter = {\n  levels: ['debug', 'info', 'warn', 'error', 'success'],\n};\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nlet _counter = 0;\n\nfunction generateId(): string {\n  return `log-${Date.now()}-${++_counter}`;\n}\n\nfunction matchesFilter(entry: LogEntry, filter: LogFilter): boolean {\n  if (!filter.levels.includes(entry.level)) return false;\n\n  if (filter.component) {\n    if (!entry.component.toLowerCase().includes(filter.component.toLowerCase())) return false;\n  }\n\n  if (filter.search) {\n    const s = filter.search.toLowerCase();\n    const inMsg = entry.message.toLowerCase().includes(s);\n    const inData = entry.data ? JSON.stringify(entry.data).toLowerCase().includes(s) : false;\n    if (!inMsg && !inData) return false;\n  }\n\n  return true;\n}\n\n// ============================================================================\n// Store\n// ============================================================================\n\nexport const useDebugLogStore = create<LogStore>((set, get) => ({\n  logs: [],\n  filter: DEFAULT_FILTER,\n\n  addLog: (entry) => {\n    const newEntry: LogEntry = {\n      ...entry,\n      id: generateId(),\n      timestamp: new Date(),\n    };\n    set((state) => {\n      const next = [...state.logs, newEntry];\n      return { logs: next.length > MAX_LOGS ? next.slice(-MAX_LOGS) : next };\n    });\n  },\n\n  clearLogs: () => set({ logs: [] }),\n\n  setFilter: (filter) =>\n    set((state) => ({ filter: { ...state.filter, ...filter } })),\n\n  getFilteredLogs: () => {\n    const { logs, filter } = get();\n    return logs.filter((e) => matchesFilter(e, filter));\n  },\n\n  exportLogs: () => JSON.stringify(get().logs, null, 2),\n}));\n\n// ============================================================================\n// Selector hooks\n// ============================================================================\n\nexport const useDebugFilteredLogs = () => {\n  const logs = useDebugLogStore((s) => s.logs);\n  const filter = useDebugLogStore((s) => s.filter);\n  return logs.filter((e) => matchesFilter(e, filter));\n};\n\nexport const useDebugLogCount = () => useDebugLogStore((s) => s.logs.length);\n\nexport const useDebugErrorCount = () =>\n  useDebugLogStore((s) => s.logs.filter((l) => l.level === 'error').length);\n","/**\n * Debug Logger\n *\n * Standalone logger for @djangocfg/debuger — no ui-core dependency.\n * Writes to useDebugLogStore (shown in LogsPanel) and to console in dev.\n */\n\nimport { useDebugLogStore } from './logStore';\nimport type { Logger, LogLevel } from './types';\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst isDev = process.env.NODE_ENV !== 'production';\nconst isBrowser = typeof window !== 'undefined';\n\nfunction extractStack(data?: Record<string, unknown>): {\n  cleanData: Record<string, unknown> | undefined;\n  stack: string | undefined;\n} {\n  if (!data) return { cleanData: undefined, stack: undefined };\n\n  const cleanData = { ...data };\n  let stack: string | undefined;\n\n  if (data.error instanceof Error) {\n    stack = data.error.stack;\n    cleanData.error = { name: data.error.name, message: data.error.message };\n  } else if (typeof data.error === 'object' && data.error !== null) {\n    const e = data.error as Record<string, unknown>;\n    if (typeof e.stack === 'string') stack = e.stack;\n    if (typeof e.message === 'string') cleanData.error = e.message;\n  }\n\n  return { cleanData, stack };\n}\n\n// ============================================================================\n// createLogger\n// ============================================================================\n\nexport function createDebugLogger(component: string): Logger {\n  const write = (level: LogLevel, message: string, data?: Record<string, unknown>) => {\n    const { cleanData, stack } = extractStack(data);\n\n    if (isBrowser) {\n      useDebugLogStore.getState().addLog({ level, component, message, data: cleanData, stack });\n    }\n\n    if (isDev) {\n      const method = level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log';\n      const prefix = `[${component}]`;\n      if (cleanData) {\n        console[method](prefix, message, cleanData);\n      } else {\n        console[method](prefix, message);\n      }\n    }\n  };\n\n  return {\n    debug:   (msg, data) => write('debug',   msg, data),\n    info:    (msg, data) => write('info',    msg, data),\n    warn:    (msg, data) => write('warn',    msg, data),\n    error:   (msg, data) => write('error',   msg, data),\n    success: (msg, data) => write('success', msg, data),\n  };\n}\n\n// ============================================================================\n// debugLog — one-shot helper (creates logger on each call, for non-hot paths)\n// ============================================================================\n\nexport function debugLog(\n  component: string,\n  level: LogLevel,\n  message: string,\n  data?: Record<string, unknown>,\n): void {\n  const { cleanData, stack } = extractStack(data);\n\n  if (isBrowser) {\n    useDebugLogStore.getState().addLog({ level, component, message, data: cleanData, stack });\n  }\n\n  if (isDev) {\n    const method = level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log';\n    if (cleanData) {\n      console[method](`[${component}]`, message, cleanData);\n    } else {\n      console[method](`[${component}]`, message);\n    }\n  }\n}\n"]}