@geenius/tools 0.1.0 → 0.3.0

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

@@ -1,311 +0,0 @@
-// @geenius-tools/devtools-solidjs — src/components/InspectorOverlay.tsx
-
-import { createSignal, createEffect, createMemo, onCleanup, type JSX } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import { createDevModeOptional } from '../context/DevModeContext'
-import { cn } from '@geenius-ui/solid'
-
-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 = createDevModeOptional()
-    const [hoveredRect, setHoveredRect] = createSignal<Rect | null>(null)
-    const [selectedComponents, setSelectedComponents] = createSignal<
-        { rect: Rect; info: ComponentInfo }[]
-    >([])
-    const [hoveredComponent, setHoveredComponent] = createSignal<ComponentInfo | null>(null)
-    const [cursorPos, setCursorPos] = createSignal({ x: 0, y: 0 })
-    let overlayRef: HTMLDivElement | undefined
-
-    const isInspectorMode = devMode?.isInspectorMode ?? false
-    const setInspectorMode = devMode?.setInspectorMode ?? (() => { })
-    const openIssueDialog = devMode?.openIssueDialog ?? (() => { })
-
-    createEffect(() => {
-        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 })
-        }
-    })
-
-    if (!devMode || !isInspectorMode) return null
-
-    return /* Portal: */ (
-        <div
-            ref={overlayRef}
-            class="fixed inset-0 z-[9999] pointer-events-none cursor-crosshair"
-            style={{ background: 'transparent' }}
-            data-dev-tool="true"
-        >
-            {/* Desktop Debug Panel */}
-            <div class="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
-                    class={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 class="flex justify-between items-center opacity-80">
-                        <span class="font-bold opacity-100 group-hover:text-white/90">
-                            INSPECTOR
-                        </span>
-                        <span class="opacity-70 group-hover:text-white/70">
-                            {Math.round(cursorPos.x)}, {Math.round(cursorPos.y)}
-                        </span>
-                    </div>
-                    {hoveredComponent && (
-                        <div class="font-bold drop-shadow-sm truncate text-blue-700 group-hover:text-blue-300">
-                            {hoveredComponent.name}
-                        </div>
-                    )}
-                    {selectedComponents.length > 0 && (
-                        <div class="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
-                    class="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 class="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}
-                    class="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 class="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
-                            class="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)
-                                }}
-                                class="px-2 py-1 text-xs font-medium text-white hover:bg-white/10 rounded transition-colors"
-                            >
-                                Feature
-                            </button>
-                            <div class="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)
-                                }}
-                                class="px-2 py-1 text-xs font-medium text-red-400 hover:bg-red-500/10 rounded transition-colors"
-                            >
-                                Bug
-                            </button>
-                            <div class="w-px h-3 bg-white/20 mx-0.5" />
-                            <button
-                                onClick={() => setSelectedComponents([])}
-                                class="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/solidjs/src/components/PageLoadWaterfall.tsx

@@ -1,144 +0,0 @@
-// @geenius-tools/devtools-solidjs — components/PageLoadWaterfall.tsx
-import { onMount } from 'solid-js'
-
-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(props: { ssrTiming?: SsrTiming | null }) {
-    let hasLogged = false
-
-    onMount(() => {
-        if (hasLogged) return
-        hasLogged = true
-        logWaterfall(props.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: #2c4f7c; 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))
-    }
-}