@djangocfg/debuger 2.1.234 → 2.1.235

package/src/DebugButton.tsx

@@ -7,7 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@djangocfg/ui-core/components';
-import { cn, isDev, isProd } 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,90 +23,86 @@ export interface DebugButtonProps {
   className?: string;
   /** Props forwarded to DebugPanel */
   panel?: Omit<DebugPanelProps, never>;
-  /** Start unlocked. Default: true in development (process.env.NODE_ENV === 'development'), false otherwise */
-  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 = isDev }: 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();
+  useDebugShortcut();
 
-  // Don't render in production unless explicitly unlocked via ?debug=1
-  if (isProd && !defaultUnlocked && !isDebugMode) return null;
+  // Should this button be visible (unlocked)?
+  const shouldUnlock = isDev || isDebugMode;
 
-  // Keyboard shortcut
-  useDebugShortcut();
+  // eslint-disable-next-line no-console
+  if (typeof window !== 'undefined') console.info('[DebugButton]', { isDev, isDebugMode, shouldUnlock, isUnlocked, enabled });
 
-  // Hide Next.js dev indicator badge while panel is open.
-  // Uses MutationObserver because <nextjs-portal> is mounted asynchronously after hydration.
+  // 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
@@ -118,7 +114,7 @@ export function DebugButton({ className, panel = {}, defaultUnlocked = isDev }:
                   '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}
               >
@@ -134,7 +130,6 @@ export function DebugButton({ className, panel = {}, defaultUnlocked = isDev }:
           </Tooltip>
         </div>
       )}
-
       <DebugPanel {...panel} />
     </>
   );