Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 14x 14x 14x 14x 14x 14x 8x 8x 8x 8x 8x 8x 2x 2x 2x 2x 2x 6x 6x 6x 8x 1x 1x 14x 14x 14x 14x 8x 8x 8x 1x 1x 14x 14x 14x 14x 11x 11x 14x 14x 14x 2x 14x 14x 14x 14x 8x 8x 8x 8x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 1x 1x 17x 17x 4x 4x 13x 13x 1x 1x 1x 1x 1x 1x 4x 4x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x | 'use client'
import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from 'react'
const STORAGE_KEY = 'visual-debug-enabled'
const PRODUCTION_DEBUG_KEY = 'allow-production-debug'
interface VisualDebugContextType {
/** Whether visual debug elements are enabled */
isVisualDebugEnabled: boolean
/** Toggle visual debug mode on/off */
toggleVisualDebug: () => void
/** Whether we're in development mode */
isDevelopment: boolean
/** Whether debug mode is allowed (dev mode OR production debug unlocked) */
isDebugAllowed: boolean
}
const VisualDebugContext = createContext<VisualDebugContextType | null>(null)
export function VisualDebugProvider({ children }: { children: ReactNode }) {
const [isEnabled, setIsEnabled] = useState(false)
const [productionDebugAllowed, setProductionDebugAllowed] = useState(false)
const isDevelopment = process.env.NODE_ENV === 'development'
// Check for production debug unlock via URL param or localStorage
useEffect(() => {
if (typeof window === 'undefined') return
// Check URL param: ?debug=1 or ?debug=true
const urlParams = new URLSearchParams(window.location.search)
const debugParam = urlParams.get('debug')
if (debugParam === '1' || debugParam === 'true') {
// Unlock production debug permanently
localStorage.setItem(PRODUCTION_DEBUG_KEY, 'true')
setProductionDebugAllowed(true)
return
}
// Check localStorage for previously unlocked
const stored = localStorage.getItem(PRODUCTION_DEBUG_KEY)
if (stored === 'true') {
setProductionDebugAllowed(true)
}
}, [])
// Load debug enabled state from localStorage on mount
useEffect(() => {
if (typeof window === 'undefined') return
const stored = localStorage.getItem(STORAGE_KEY)
if (stored === 'true') {
setIsEnabled(true)
}
}, [])
// Persist to localStorage
useEffect(() => {
if (typeof window === 'undefined') return
localStorage.setItem(STORAGE_KEY, String(isEnabled))
}, [isEnabled])
const toggleVisualDebug = useCallback(() => {
setIsEnabled((prev) => !prev)
}, [])
// Global keyboard shortcut: Ctrl+Shift+D toggles visual debug
useEffect(() => {
if (typeof window === 'undefined') return
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
e.preventDefault()
setIsEnabled((prev) => !prev)
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [])
// Debug is allowed in development OR if production debug is unlocked
const isDebugAllowed = isDevelopment || productionDebugAllowed
// Enable visual debug if allowed AND user has toggled it on
const isVisualDebugEnabled = isDebugAllowed && isEnabled
return (
<VisualDebugContext.Provider
value={{
isVisualDebugEnabled,
toggleVisualDebug,
isDevelopment,
isDebugAllowed,
}}
>
{children}
</VisualDebugContext.Provider>
)
}
export function useVisualDebug(): VisualDebugContextType {
const context = useContext(VisualDebugContext)
if (!context) {
throw new Error('useVisualDebug must be used within a VisualDebugProvider')
}
return context
}
/**
* Hook for components that may be rendered outside the provider.
* Returns safe defaults (debug disabled) if no provider is found.
*/
export function useVisualDebugSafe(): VisualDebugContextType {
const context = useContext(VisualDebugContext)
if (!context) {
const isDev = process.env.NODE_ENV === 'development'
return {
isVisualDebugEnabled: false,
toggleVisualDebug: () => {},
isDevelopment: isDev,
isDebugAllowed: isDev,
}
}
return context
}
|