@geenius/tools 0.1.0

package/packages/devtools/react/src/components/InspectorOverlay.tsx

@@ -0,0 +1,312 @@
+// @geenius-tools/devtools-react — src/components/InspectorOverlay.tsx
+
+import React, { useEffect, useState, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useDevModeOptional } from '../context/DevModeContext'
+import { cn } from '@geenius-ui/react'
+
+interface Rect {
+    top: number
+    left: number
+    width: number
+    height: number
+}
+
+interface ComponentInfo {
+    name: string
+    file?: string
+    key?: string
+    props?: Record<string, unknown>
+}
+
+function getComponentInfo(element: HTMLElement): ComponentInfo | null {
+    let fiberNode: any = null
+    const key = Object.keys(element).find((k) => k.startsWith('__reactFiber$'))
+    if (key) {
+        fiberNode = (element as any)[key]
+    }
+    if (!fiberNode) return null
+
+    const elementKey = fiberNode.key !== null ? String(fiberNode.key) : undefined
+
+    let node = fiberNode
+    while (node) {
+        if (node.tag === 0 || node.tag === 1) {
+            if (node.type && (node.type.displayName || node.type.name)) {
+                return {
+                    name: node.type.displayName || node.type.name,
+                    file: node._debugSource?.fileName,
+                    key:
+                        elementKey !== undefined
+                            ? elementKey
+                            : node.key !== null
+                                ? String(node.key)
+                                : undefined,
+                }
+            }
+        }
+        node = node.return
+    }
+
+    return { name: element.tagName.toLowerCase() }
+}
+
+export function InspectorOverlay() {
+    const devMode = useDevModeOptional()
+    const [hoveredRect, setHoveredRect] = useState<Rect | null>(null)
+    const [selectedComponents, setSelectedComponents] = useState<
+        { rect: Rect; info: ComponentInfo }[]
+    >([])
+    const [hoveredComponent, setHoveredComponent] =
+        useState<ComponentInfo | null>(null)
+    const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 })
+    const overlayRef = useRef<HTMLDivElement>(null)
+
+    const isInspectorMode = devMode?.isInspectorMode ?? false
+    const setInspectorMode = devMode?.setInspectorMode ?? (() => { })
+    const openIssueDialog = devMode?.openIssueDialog ?? (() => { })
+
+    useEffect(() => {
+        if (!isInspectorMode) {
+            setHoveredRect(null)
+            setSelectedComponents([])
+            return
+        }
+
+        const isDevTool = (element: Element | null) => {
+            if (!element) return false
+            return !!element.closest('[data-dev-tool="true"]')
+        }
+
+        const handleMouseMove = (e: MouseEvent) => {
+            setCursorPos({ x: e.clientX, y: e.clientY })
+            const elements = document.elementsFromPoint(e.clientX, e.clientY)
+
+            if (elements.length > 0 && isDevTool(elements[0])) {
+                setHoveredRect(null)
+                setHoveredComponent(null)
+                return
+            }
+
+            let target: HTMLElement | null = null
+            for (const el of elements) {
+                if (!isDevTool(el)) {
+                    target = el as HTMLElement
+                    break
+                }
+            }
+
+            if (
+                target &&
+                target !== document.body &&
+                target !== document.documentElement
+            ) {
+                const rect = target.getBoundingClientRect()
+                setHoveredRect({
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height,
+                })
+                setHoveredComponent(getComponentInfo(target))
+            } else {
+                setHoveredRect(null)
+                setHoveredComponent(null)
+            }
+        }
+
+        const handleClick = (e: MouseEvent) => {
+            const elements = document.elementsFromPoint(e.clientX, e.clientY)
+            if (elements.length > 0 && isDevTool(elements[0])) return
+
+            let target: HTMLElement | null = null
+            for (const el of elements) {
+                if (!isDevTool(el)) {
+                    target = el as HTMLElement
+                    break
+                }
+            }
+
+            if (target) {
+                e.preventDefault()
+                e.stopPropagation()
+
+                const info = getComponentInfo(target)
+                const rect = target.getBoundingClientRect()
+
+                if (info) {
+                    setSelectedComponents((prev) => {
+                        const existsIndex = prev.findIndex(
+                            (p) =>
+                                p.info.name === info.name &&
+                                p.info.key === info.key &&
+                                p.info.file === info.file,
+                        )
+
+                        if (existsIndex >= 0) {
+                            const newSelection = [...prev]
+                            newSelection.splice(existsIndex, 1)
+                            return newSelection
+                        } else {
+                            return [
+                                ...prev,
+                                {
+                                    rect: {
+                                        top: rect.top,
+                                        left: rect.left,
+                                        width: rect.width,
+                                        height: rect.height,
+                                    },
+                                    info,
+                                },
+                            ]
+                        }
+                    })
+                }
+            }
+        }
+
+        window.addEventListener('mousemove', handleMouseMove, { capture: true })
+        window.addEventListener('click', handleClick, { capture: true })
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove, { capture: true })
+            window.removeEventListener('click', handleClick, { capture: true })
+        }
+    }, [isInspectorMode, hoveredRect, hoveredComponent, openIssueDialog, setInspectorMode])
+
+    if (!devMode || !isInspectorMode) return null
+
+    return createPortal(
+        <div
+            ref={overlayRef}
+            className="fixed inset-0 z-[9999] pointer-events-none cursor-crosshair"
+            style={{ background: 'transparent' }}
+            data-dev-tool="true"
+        >
+            {/* Desktop Debug Panel */}
+            <div className="hidden md:block fixed top-0 left-0 z-[10000] p-2 text-xs font-mono text-white pointer-events-auto transition-all duration-300">
+                <div
+                    className={cn(
+                        'group flex flex-col gap-1 min-w-[150px] p-2 rounded-lg backdrop-blur-sm transition-all duration-300',
+                        'bg-blue-500/10 hover:bg-blue-950/90',
+                        'border border-blue-500/30',
+                        'text-black hover:text-white',
+                    )}
+                >
+                    <div className="flex justify-between items-center opacity-80">
+                        <span className="font-bold opacity-100 group-hover:text-white/90">
+                            INSPECTOR
+                        </span>
+                        <span className="opacity-70 group-hover:text-white/70">
+                            {Math.round(cursorPos.x)}, {Math.round(cursorPos.y)}
+                        </span>
+                    </div>
+                    {hoveredComponent && (
+                        <div className="font-bold drop-shadow-sm truncate text-blue-700 group-hover:text-blue-300">
+                            {hoveredComponent.name}
+                        </div>
+                    )}
+                    {selectedComponents.length > 0 && (
+                        <div className="truncate text-[10px] opacity-80 text-green-700 group-hover:text-green-300 border-t border-white/10 pt-1 mt-1">
+                            {selectedComponents.length} Selected
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Hover Highlight */}
+            {hoveredRect && (
+                <div
+                    className="absolute border-2 border-blue-500 bg-blue-500/10 pointer-events-none transition-all duration-75 ease-out"
+                    style={{
+                        top: hoveredRect.top,
+                        left: hoveredRect.left,
+                        width: hoveredRect.width,
+                        height: hoveredRect.height,
+                    }}
+                >
+                    <div className="absolute -top-6 left-0 bg-blue-500 text-white text-[10px] px-1.5 py-0.5 rounded-sm whitespace-nowrap">
+                        {hoveredComponent?.name} ({Math.round(hoveredRect.width)} x{' '}
+                        {Math.round(hoveredRect.height)})
+                    </div>
+                </div>
+            )}
+
+            {/* Selection Highlights */}
+            {selectedComponents.map((comp, i) => (
+                <div
+                    key={i}
+                    className="absolute border-2 border-green-500 bg-green-500/20 pointer-events-none transition-all duration-75 ease-out"
+                    style={{
+                        top: comp.rect.top,
+                        left: comp.rect.left,
+                        width: comp.rect.width,
+                        height: comp.rect.height,
+                    }}
+                >
+                    <div className="absolute -top-6 left-0 bg-green-600 text-white text-[10px] px-1.5 py-0.5 rounded-sm whitespace-nowrap z-[10001]">
+                        {comp.info.name}
+                    </div>
+                </div>
+            ))}
+
+            {/* Floating Toolbar */}
+            {selectedComponents.length > 0 &&
+                (() => {
+                    const lastSelected = selectedComponents[selectedComponents.length - 1]
+                    return (
+                        <div
+                            className="fixed z-[10002] flex items-center gap-1 p-1 bg-slate-900 border border-slate-700 rounded-md shadow-xl animate-in fade-in zoom-in-95 pointer-events-auto"
+                            style={{
+                                top: Math.max(10, lastSelected.rect.top - 45),
+                                left: Math.max(10, lastSelected.rect.left),
+                            }}
+                        >
+                            <button
+                                onClick={() => {
+                                    const allDetails = selectedComponents.map((c) => ({
+                                        name: c.info.name,
+                                        file: c.info.file,
+                                        key: c.info.key,
+                                        props: c.info.props,
+                                        selector: 'Multi-select',
+                                    }))
+                                    openIssueDialog('feature', '', allDetails as any)
+                                    setInspectorMode(false)
+                                }}
+                                className="px-2 py-1 text-xs font-medium text-white hover:bg-white/10 rounded transition-colors"
+                            >
+                                Feature
+                            </button>
+                            <div className="w-px h-3 bg-white/20 mx-0.5" />
+                            <button
+                                onClick={() => {
+                                    const allDetails = selectedComponents.map((c) => ({
+                                        name: c.info.name,
+                                        file: c.info.file,
+                                        key: c.info.key,
+                                        props: c.info.props,
+                                        selector: 'Multi-select',
+                                    }))
+                                    openIssueDialog('bug', '', allDetails as any)
+                                    setInspectorMode(false)
+                                }}
+                                className="px-2 py-1 text-xs font-medium text-red-400 hover:bg-red-500/10 rounded transition-colors"
+                            >
+                                Bug
+                            </button>
+                            <div className="w-px h-3 bg-white/20 mx-0.5" />
+                            <button
+                                onClick={() => setSelectedComponents([])}
+                                className="px-2 py-1 text-xs text-slate-400 hover:text-white hover:bg-white/10 rounded transition-colors"
+                            >
+                                Deselect all
+                            </button>
+                        </div>
+                    )
+                })()}
+        </div>,
+        document.body,
+    )
+}

package/packages/devtools/react/src/components/PageLoadWaterfall.tsx

@@ -0,0 +1,144 @@
+// @geenius-tools/devtools-react — components/PageLoadWaterfall.tsx
+import * as React from 'react'
+
+export type SsrTiming = {
+    ssrStart: number
+    getAuthStart: number
+    getAuthEnd: number
+    translationsStart: number
+    translationsEnd: number
+    userPrefsStart: number
+    userPrefsEnd: number
+    ssrEnd: number
+    isCachedAuth: boolean
+}
+
+/**
+ * PageLoadWaterfall — invisible component that logs detailed performance
+ * waterfall data to the browser console on first mount.
+ *
+ * Includes: network timing, SSR breakdown, FCP, resource loading, top-5 slowest JS bundles.
+ * Returns `null` — no UI.
+ */
+export function PageLoadWaterfall({ ssrTiming }: { ssrTiming?: SsrTiming | null }) {
+    const hasLogged = React.useRef(false)
+
+    React.useEffect(() => {
+        if (hasLogged.current) return
+        hasLogged.current = true
+        logWaterfall(ssrTiming)
+    }, [ssrTiming])
+
+    return null
+}
+
+/** @internal Shared waterfall logging logic — framework-agnostic */
+export function logWaterfall(ssrTiming?: SsrTiming | null) {
+    const clientStart = performance.now()
+
+    const run = () => {
+        const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined
+        const fcp = performance.getEntriesByType('paint').find((e) => e.name === 'first-contentful-paint')
+
+        console.log('\n')
+        console.log('%c╔══════════════════════════════════════════════════════╗', 'color: #4CAF50; font-weight: bold')
+        console.log('%c║        PAGE LOAD PERFORMANCE WATERFALL               ║', 'color: #4CAF50; font-weight: bold')
+        console.log('%c╚══════════════════════════════════════════════════════╝', 'color: #4CAF50; font-weight: bold')
+
+        if (navEntry) {
+            const dns = navEntry.domainLookupEnd - navEntry.domainLookupStart
+            const tcp = navEntry.connectEnd - navEntry.connectStart
+            const ttfb = navEntry.responseStart - navEntry.requestStart
+            const download = navEntry.responseEnd - navEntry.responseStart
+            const domParsing = navEntry.domInteractive - navEntry.responseEnd
+            const domComplete = navEntry.domComplete - navEntry.domInteractive
+            const totalLoad = navEntry.loadEventEnd - navEntry.startTime
+
+            console.log('%c\n── Network & Browser Timing ──', 'color: #FF9800; font-weight: bold')
+            console.table({
+                'DNS Lookup': { ms: Math.round(dns), bar: '█'.repeat(Math.max(1, Math.round(dns / 20))) },
+                'TCP Connect': { ms: Math.round(tcp), bar: '█'.repeat(Math.max(1, Math.round(tcp / 20))) },
+                'TTFB (Time to First Byte)': { ms: Math.round(ttfb), bar: '█'.repeat(Math.max(1, Math.round(ttfb / 20))) },
+                'Response Download': { ms: Math.round(download), bar: '█'.repeat(Math.max(1, Math.round(download / 20))) },
+                'DOM Parsing': { ms: Math.round(domParsing), bar: '█'.repeat(Math.max(1, Math.round(domParsing / 20))) },
+                'DOM Complete': { ms: Math.round(domComplete), bar: '█'.repeat(Math.max(1, Math.round(domComplete / 20))) },
+                'Total Page Load': { ms: Math.round(totalLoad), bar: '█'.repeat(Math.max(1, Math.round(totalLoad / 20))) },
+            })
+
+            console.log(
+                `%c\n⚡ TTFB: ${Math.round(ttfb)}ms — This includes all SSR processing time`,
+                ttfb > 500 ? 'color: #F44336; font-weight: bold; font-size: 14px' : 'color: #4CAF50; font-weight: bold; font-size: 14px',
+            )
+        }
+
+        if (ssrTiming) {
+            console.log('%c\n── SSR beforeLoad Breakdown ──', 'color: #2196F3; font-weight: bold')
+            const total = ssrTiming.ssrEnd - ssrTiming.ssrStart
+            const auth = ssrTiming.getAuthEnd ? ssrTiming.getAuthEnd - ssrTiming.getAuthStart : 0
+            const prefs = ssrTiming.userPrefsEnd ? ssrTiming.userPrefsEnd - ssrTiming.userPrefsStart : 0
+            const trans = ssrTiming.translationsEnd ? ssrTiming.translationsEnd - ssrTiming.translationsStart : 0
+
+            console.table({
+                'getAuth()': { ms: auth, bar: '█'.repeat(Math.max(1, Math.round(auth / 20))), note: ssrTiming.isCachedAuth ? '(cached)' : '(server call)' },
+                'User Prefs': { ms: prefs, bar: '█'.repeat(Math.max(1, Math.round(prefs / 20))) },
+                'loadTranslations()': { ms: trans, bar: '█'.repeat(Math.max(1, Math.round(trans / 20))) },
+                'Total SSR beforeLoad': { ms: total, bar: '█'.repeat(Math.max(1, Math.round(total / 20))) },
+            })
+        } else {
+            console.log('%c\n── SSR Timing: Not available (client-side navigation) ──', 'color: #9E9E9E')
+        }
+
+        if (fcp) {
+            console.log(
+                `%c\n🎨 First Contentful Paint: ${Math.round(fcp.startTime)}ms`,
+                fcp.startTime > 1500 ? 'color: #F44336; font-weight: bold; font-size: 14px' : 'color: #4CAF50; font-weight: bold; font-size: 14px',
+            )
+        }
+
+        console.log(
+            `%c\n⚛️  Component mounted at: ${Math.round(clientStart)}ms from page start`,
+            'color: #61DAFB; font-weight: bold',
+        )
+
+        const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[]
+        const jsResources = resources.filter((r) => r.name.endsWith('.js') || r.name.endsWith('.mjs') || r.name.includes('.js?'))
+        const cssResources = resources.filter((r) => r.name.endsWith('.css') || r.name.includes('.css?'))
+        const fontResources = resources.filter((r) => r.name.includes('fonts.googleapis') || r.name.includes('fonts.gstatic'))
+        const imgResources = resources.filter((r) => r.initiatorType === 'img')
+
+        const totalJsSize = jsResources.reduce((sum, r) => sum + (r.transferSize || 0), 0)
+        const slowestJs = [...jsResources].sort((a, b) => b.duration - a.duration).slice(0, 5)
+
+        console.log('%c\n── Resource Loading ──', 'color: #9C27B0; font-weight: bold')
+        console.table({
+            'JS bundles': { count: jsResources.length, totalKB: Math.round(totalJsSize / 1024), slowest_ms: Math.round(slowestJs[0]?.duration ?? 0) },
+            'CSS files': { count: cssResources.length, totalKB: Math.round(cssResources.reduce((s, r) => s + (r.transferSize || 0), 0) / 1024) },
+            'Font resources': { count: fontResources.length, slowest_ms: Math.round([...fontResources].sort((a, b) => b.duration - a.duration)[0]?.duration ?? 0) },
+            'Images': { count: imgResources.length, totalKB: Math.round(imgResources.reduce((s, r) => s + (r.transferSize || 0), 0) / 1024) },
+        })
+
+        if (slowestJs.length > 0) {
+            console.log('%c\n── Top 5 Slowest JS Bundles ──', 'color: #E91E63; font-weight: bold')
+            console.table(
+                Object.fromEntries(
+                    slowestJs.map((r, i) => [
+                        `#${i + 1}`,
+                        {
+                            file: r.name.split('/').pop()?.split('?')[0] ?? r.name,
+                            duration_ms: Math.round(r.duration),
+                            size_KB: Math.round((r.transferSize || 0) / 1024),
+                        },
+                    ]),
+                ),
+            )
+        }
+
+        console.log('%c\n══════════════════════════════════════════════════════', 'color: #4CAF50; font-weight: bold')
+    }
+
+    if (document.readyState === 'complete') {
+        setTimeout(run, 500)
+    } else {
+        window.addEventListener('load', () => setTimeout(run, 500))
+    }
+}