@geenius/tools 0.1.0 → 0.3.0

package/packages/devtools/react/src/panels/DevModePhase3.tsx

@@ -1,234 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
-
-// ─── Accessibility Auditor ───────────────────────────────────
-
-interface A11yIssue {
-  id: string
-  impact: 'critical' | 'serious' | 'moderate' | 'minor'
-  description: string
-  element: string
-  help: string
-  helpUrl?: string
-}
-
-/**
- * Accessibility Auditor Panel — Runtime a11y checking.
- * Uses DOM inspection to detect common accessibility issues.
- */
-export function AccessibilityAuditor() {
-  const [issues, setIssues] = useState<A11yIssue[]>([])
-  const [isScanning, setIsScanning] = useState(false)
-  const [filter, setFilter] = useState<string>('all')
-
-  const runAudit = useCallback(() => {
-    setIsScanning(true)
-    const found: A11yIssue[] = []
-    let id = 0
-
-    // Check images without alt
-    document.querySelectorAll('img:not([alt])').forEach(el => {
-      found.push({
-        id: `a11y_${id++}`, impact: 'critical',
-        description: 'Image missing alt attribute',
-        element: `<img src="${el.getAttribute('src')?.slice(0, 40)}">`,
-        help: 'Add descriptive alt text to all images',
-      })
-    })
-
-    // Check buttons without accessible names
-    document.querySelectorAll('button').forEach(el => {
-      if (!el.textContent?.trim() && !el.getAttribute('aria-label') && !el.getAttribute('title')) {
-        found.push({
-          id: `a11y_${id++}`, impact: 'critical',
-          description: 'Button without accessible name',
-          element: el.outerHTML.slice(0, 80),
-          help: 'Add text content, aria-label, or title to buttons',
-        })
-      }
-    })
-
-    // Check form inputs without labels
-    document.querySelectorAll('input, select, textarea').forEach(el => {
-      const input = el as HTMLInputElement
-      const hasLabel = input.id && document.querySelector(`label[for="${input.id}"]`)
-      const hasAria = input.getAttribute('aria-label') || input.getAttribute('aria-labelledby')
-      if (!hasLabel && !hasAria && input.type !== 'hidden') {
-        found.push({
-          id: `a11y_${id++}`, impact: 'serious',
-          description: 'Form input without label',
-          element: `<${el.tagName.toLowerCase()} type="${input.type}">`,
-          help: 'Associate a <label> element or add aria-label',
-        })
-      }
-    })
-
-    // Check color contrast (simplified — check for very light text)
-    document.querySelectorAll('*').forEach(el => {
-      const style = getComputedStyle(el)
-      const color = style.color
-      const bg = style.backgroundColor
-      if (color === 'rgb(255, 255, 255)' && bg === 'rgb(255, 255, 255)') {
-        found.push({
-          id: `a11y_${id++}`, impact: 'serious',
-          description: 'Possible invisible text (white on white)',
-          element: el.tagName.toLowerCase(),
-          help: 'Ensure sufficient color contrast ratio (4.5:1 for normal text)',
-        })
-      }
-    })
-
-    // Check heading hierarchy
-    const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'))
-    let prevLevel = 0
-    for (const h of headings) {
-      const level = parseInt(h.tagName[1])
-      if (level > prevLevel + 1 && prevLevel > 0) {
-        found.push({
-          id: `a11y_${id++}`, impact: 'moderate',
-          description: `Heading level skipped (h${prevLevel} → h${level})`,
-          element: `<${h.tagName.toLowerCase()}>${h.textContent?.slice(0, 30)}</${h.tagName.toLowerCase()}>`,
-          help: 'Maintain proper heading hierarchy without skipping levels',
-        })
-      }
-      prevLevel = level
-    }
-
-    // Check for multiple h1
-    const h1s = document.querySelectorAll('h1')
-    if (h1s.length > 1) {
-      found.push({
-        id: `a11y_${id++}`, impact: 'moderate',
-        description: `Multiple h1 elements found (${h1s.length})`,
-        element: '<h1> × ' + h1s.length,
-        help: 'Use only one h1 per page',
-      })
-    }
-
-    // Check links without href
-    document.querySelectorAll('a:not([href])').forEach(el => {
-      found.push({
-        id: `a11y_${id++}`, impact: 'minor',
-        description: 'Link without href attribute',
-        element: el.outerHTML.slice(0, 60),
-        help: 'Add href or use a <button> instead',
-      })
-    })
-
-    setIssues(found)
-    setIsScanning(false)
-  }, [])
-
-  const filtered = useMemo(() =>
-    filter === 'all' ? issues : issues.filter(i => i.impact === filter)
-  , [issues, filter])
-
-  const impactColors: Record<string, string> = {
-    critical: '#ef4444', serious: '#f59e0b', moderate: '#3b82f6', minor: '#64748b',
-  }
-
-  return (
-    <div style={{ fontFamily: 'system-ui', fontSize: 13, color: '#e2e8f0', background: '#0f172a', borderRadius: 8, overflow: 'hidden' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: '#1e293b', borderBottom: '1px solid #334155' }}>
-        <span style={{ fontWeight: 700, fontSize: 13 }}>♿ Accessibility Auditor</span>
-        <div style={{ display: 'flex', gap: 6 }}>
-          <select value={filter} onChange={e => setFilter(e.target.value)} style={{ padding: '4px 6px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11 }}>
-            <option value="all">All</option>
-            <option value="critical">Critical</option>
-            <option value="serious">Serious</option>
-            <option value="moderate">Moderate</option>
-            <option value="minor">Minor</option>
-          </select>
-          <button onClick={runAudit} disabled={isScanning} style={{ padding: '4px 10px', borderRadius: 4, border: '1px solid #334155', background: isScanning ? '#334155' : '#0f172a', color: '#e2e8f0', cursor: 'pointer', fontSize: 11, fontWeight: 600 }}>
-            {isScanning ? 'Scanning...' : '🔍 Scan'}
-          </button>
-        </div>
-      </div>
-      <div style={{ maxHeight: 350, overflow: 'auto', padding: 4 }}>
-        {issues.length === 0 ? (
-          <div style={{ padding: 20, textAlign: 'center', color: '#64748b' }}>
-            {isScanning ? 'Scanning DOM...' : 'Click Scan to run accessibility audit'}
-          </div>
-        ) : filtered.map(issue => (
-          <div key={issue.id} style={{ padding: '6px 10px', borderBottom: '1px solid #1e293b' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{ padding: '1px 6px', borderRadius: 4, fontSize: 9, fontWeight: 700, background: impactColors[issue.impact], color: 'white', textTransform: 'uppercase' }}>{issue.impact}</span>
-              <span style={{ fontWeight: 600 }}>{issue.description}</span>
-            </div>
-            <div style={{ fontSize: 11, color: '#64748b', marginTop: 2 }}>
-              <code style={{ color: '#94a3b8' }}>{issue.element}</code>
-            </div>
-            <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 2 }}>💡 {issue.help}</div>
-          </div>
-        ))}
-      </div>
-      <div style={{ padding: '6px 12px', borderTop: '1px solid #334155', color: '#64748b', fontSize: 10 }}>
-        {issues.length} issues: {issues.filter(i => i.impact === 'critical').length} critical, {issues.filter(i => i.impact === 'serious').length} serious
-      </div>
-    </div>
-  )
-}
-
-// ─── Responsive Layout Tester ────────────────────────────────
-
-interface Viewport { name: string; width: number; height: number; icon: string }
-
-const VIEWPORTS: Viewport[] = [
-  { name: 'Mobile S', width: 320, height: 568, icon: '📱' },
-  { name: 'Mobile M', width: 375, height: 812, icon: '📱' },
-  { name: 'Mobile L', width: 425, height: 896, icon: '📱' },
-  { name: 'Tablet', width: 768, height: 1024, icon: '📋' },
-  { name: 'Laptop', width: 1024, height: 768, icon: '💻' },
-  { name: 'Desktop', width: 1440, height: 900, icon: '🖥' },
-  { name: '4K', width: 2560, height: 1440, icon: '🖥' },
-]
-
-/**
- * Responsive Layout Tester — Multi-viewport preview.
- */
-export function ResponsiveTester() {
-  const [selectedViewport, setSelectedViewport] = useState<Viewport | null>(null)
-  const [originalSize, setOriginalSize] = useState<{ width: number; height: number } | null>(null)
-
-  const applyViewport = useCallback((vp: Viewport | null) => {
-    if (vp) {
-      if (!originalSize) {
-        setOriginalSize({ width: window.innerWidth, height: window.innerHeight })
-      }
-      // Can't resize window from JS, but we can add visual indicators
-      document.documentElement.style.setProperty('--viewport-width', `${vp.width}px`)
-      setSelectedViewport(vp)
-    } else {
-      document.documentElement.style.removeProperty('--viewport-width')
-      setSelectedViewport(null)
-    }
-  }, [originalSize])
-
-  return (
-    <div style={{ fontFamily: 'system-ui', fontSize: 13, color: '#e2e8f0', background: '#0f172a', borderRadius: 8, overflow: 'hidden' }}>
-      <div style={{ padding: '8px 12px', background: '#1e293b', borderBottom: '1px solid #334155', fontWeight: 700, fontSize: 13 }}>
-        📐 Responsive Tester
-      </div>
-      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', padding: 10 }}>
-        {VIEWPORTS.map(vp => (
-          <button
-            key={vp.name}
-            onClick={() => applyViewport(selectedViewport?.name === vp.name ? null : vp)}
-            style={{
-              padding: '6px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer', fontWeight: 600,
-              border: selectedViewport?.name === vp.name ? '2px solid #6366f1' : '1px solid #334155',
-              background: selectedViewport?.name === vp.name ? '#1e1b4b' : '#1e293b',
-              color: '#e2e8f0',
-            }}
-          >
-            {vp.icon} {vp.name} <span style={{ fontSize: 9, color: '#64748b' }}>{vp.width}×{vp.height}</span>
-          </button>
-        ))}
-      </div>
-      {selectedViewport && (
-        <div style={{ padding: '6px 12px', borderTop: '1px solid #334155', color: '#64748b', fontSize: 10 }}>
-          Active: {selectedViewport.name} ({selectedViewport.width}×{selectedViewport.height})
-        </div>
-      )}
-    </div>
-  )
-}

package/packages/devtools/react/src/panels/FeatureFlagsToggle.tsx

@@ -1,104 +0,0 @@
-import { useState, useCallback} from 'react'
-
-// ─── Types ────────────────────────────────────────────────────
-
-interface FeatureFlag {
-  key: string
-  label: string
-  description?: string
-  enabled: boolean
-  category?: string
-}
-
-interface FeatureFlagsToggleProps {
-  flags: FeatureFlag[]
-  onToggle: (key: string, enabled: boolean) => void | Promise<void>
-}
-
-// ─── Component ────────────────────────────────────────────────
-
-/**
- * Feature Flags Toggle Panel — Instant flag switching for dev mode.
- * Shows all flags with category grouping and instant toggle.
- */
-export function FeatureFlagsToggle({ flags, onToggle }: FeatureFlagsToggleProps) {
-  const [filter, setFilter] = useState('')
-  const [togglingKey, setTogglingKey] = useState<string | null>(null)
-
-  const handleToggle = useCallback(async (flag: FeatureFlag) => {
-    setTogglingKey(flag.key)
-    try {
-      await onToggle(flag.key, !flag.enabled)
-    } finally {
-      setTogglingKey(null)
-    }
-  }, [onToggle])
-
-  const filtered = filter
-    ? flags.filter(f => f.key.toLowerCase().includes(filter.toLowerCase()) || f.label.toLowerCase().includes(filter.toLowerCase()))
-    : flags
-
-  // Group by category
-  const groups = new Map<string, FeatureFlag[]>()
-  for (const f of filtered) {
-    const cat = f.category ?? 'General'
-    if (!groups.has(cat)) groups.set(cat, [])
-    groups.get(cat)!.push(f)
-  }
-
-  return (
-    <div style={{ fontFamily: 'system-ui', fontSize: 13, color: '#e2e8f0', background: '#0f172a', borderRadius: 8, overflow: 'hidden' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: '#1e293b', borderBottom: '1px solid #334155' }}>
-        <span style={{ fontWeight: 700, fontSize: 13 }}>🚩 Feature Flags</span>
-        <input
-          placeholder="Filter flags..."
-          value={filter}
-          onChange={e => setFilter(e.target.value)}
-          style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11, width: 140 }}
-        />
-      </div>
-      <div style={{ maxHeight: 350, overflow: 'auto', padding: 8 }}>
-        {[...groups.entries()].map(([category, categoryFlags]) => (
-          <div key={category}>
-            <div style={{ padding: '6px 8px', color: '#64748b', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>
-              {category}
-            </div>
-            {categoryFlags.map(flag => (
-              <div
-                key={flag.key}
-                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 8px', borderBottom: '1px solid #1e293b' }}
-              >
-                <div>
-                  <div style={{ fontWeight: 600 }}>{flag.label}</div>
-                  <div style={{ fontSize: 11, color: '#64748b' }}>
-                    <code style={{ color: '#94a3b8' }}>{flag.key}</code>
-                    {flag.description && ` — ${flag.description}`}
-                  </div>
-                </div>
-                <button
-                  onClick={() => handleToggle(flag)}
-                  disabled={togglingKey === flag.key}
-                  style={{
-                    width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
-                    background: flag.enabled ? '#22c55e' : '#334155',
-                    position: 'relative', transition: 'background 0.2s',
-                  }}
-                >
-                  <div style={{
-                    width: 18, height: 18, borderRadius: '50%', background: 'white',
-                    position: 'absolute', top: 3,
-                    left: flag.enabled ? 23 : 3,
-                    transition: 'left 0.2s',
-                  }} />
-                </button>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-      <div style={{ padding: '6px 12px', borderTop: '1px solid #334155', color: '#64748b', fontSize: 10 }}>
-        {flags.filter(f => f.enabled).length}/{flags.length} enabled
-      </div>
-    </div>
-  )
-}

package/packages/devtools/react/src/panels/QuickRouteJump.tsx

@@ -1,152 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-// ─── Types ────────────────────────────────────────────────────
-
-interface Route {
-  path: string
-  label: string
-  icon?: string
-  group?: string
-}
-
-interface QuickRouteJumpProps {
-  routes: Route[]
-  onNavigate: (path: string) => void
-  hotkey?: string // Default: 'Mod+K'
-}
-
-// ─── Component ────────────────────────────────────────────────
-
-/**
- * Quick Route Jump — Command palette for instant navigation.
- * Opens with Cmd/Ctrl+K, search routes, arrow key navigation.
- */
-export function QuickRouteJump({ routes, onNavigate, hotkey = 'Mod+K' }: QuickRouteJumpProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Keyboard shortcut to open
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const isMod = e.metaKey || e.ctrlKey
-      if (isMod && e.key.toLowerCase() === 'k') {
-        e.preventDefault()
-        setIsOpen(prev => !prev)
-        setQuery('')
-        setSelectedIndex(0)
-      }
-      if (e.key === 'Escape') setIsOpen(false)
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  // Focus input when opened
-  useEffect(() => {
-    if (isOpen) setTimeout(() => inputRef.current?.focus(), 50)
-  }, [isOpen])
-
-  const filtered = query
-    ? routes.filter(r =>
-        r.path.toLowerCase().includes(query.toLowerCase()) ||
-        r.label.toLowerCase().includes(query.toLowerCase())
-      )
-    : routes
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setSelectedIndex(i => Math.min(i + 1, filtered.length - 1))
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setSelectedIndex(i => Math.max(i - 1, 0))
-    } else if (e.key === 'Enter' && filtered[selectedIndex]) {
-      e.preventDefault()
-      onNavigate(filtered[selectedIndex].path)
-      setIsOpen(false)
-    }
-  }, [filtered, selectedIndex, onNavigate])
-
-  if (!isOpen) return null
-
-  // Group routes
-  const groups = new Map<string, Route[]>()
-  for (const r of filtered) {
-    const g = r.group ?? 'Routes'
-    if (!groups.has(g)) groups.set(g, [])
-    groups.get(g)!.push(r)
-  }
-
-  let globalIdx = -1
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div onClick={() => setIsOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 9998 }} />
-      {/* Panel */}
-      <div style={{
-        position: 'fixed', top: '20%', left: '50%', transform: 'translateX(-50%)',
-        width: '100%', maxWidth: 520, background: '#0f172a', border: '1px solid #334155',
-        borderRadius: 12, overflow: 'hidden', zIndex: 9999,
-        boxShadow: '0 25px 50px rgba(0,0,0,0.4)',
-      }}>
-        <div style={{ padding: 12, borderBottom: '1px solid #334155' }}>
-          <input
-            ref={inputRef}
-            value={query}
-            onChange={e => { setQuery(e.target.value); setSelectedIndex(0) }}
-            onKeyDown={handleKeyDown}
-            placeholder="Jump to route..."
-            style={{
-              width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid #334155',
-              background: '#1e293b', color: '#e2e8f0', fontSize: 14, outline: 'none',
-            }}
-          />
-        </div>
-        <div style={{ maxHeight: 350, overflow: 'auto', padding: 4 }}>
-          {filtered.length === 0 ? (
-            <div style={{ padding: 24, textAlign: 'center', color: '#64748b' }}>No routes match "{query}"</div>
-          ) : [...groups.entries()].map(([group, groupRoutes]) => (
-            <div key={group}>
-              <div style={{ padding: '8px 12px', color: '#64748b', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>
-                {group}
-              </div>
-              {groupRoutes.map(route => {
-                globalIdx++
-                const idx = globalIdx
-                return (
-                  <div
-                    key={route.path}
-                    onClick={() => { onNavigate(route.path); setIsOpen(false) }}
-                    style={{
-                      display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
-                      borderRadius: 6, cursor: 'pointer',
-                      background: idx === selectedIndex ? '#1e293b' : 'transparent',
-                    }}
-                    onMouseEnter={() => setSelectedIndex(idx)}
-                  >
-                    <span style={{ fontSize: 16 }}>{route.icon ?? '📄'}</span>
-                    <div style={{ flex: 1 }}>
-                      <div style={{ fontWeight: 600, color: '#e2e8f0', fontSize: 13 }}>{route.label}</div>
-                      <div style={{ fontSize: 11, color: '#64748b' }}>{route.path}</div>
-                    </div>
-                    {idx === selectedIndex && (
-                      <span style={{ fontSize: 10, color: '#64748b', border: '1px solid #334155', padding: '2px 6px', borderRadius: 4 }}>↵</span>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          ))}
-        </div>
-        <div style={{ padding: '8px 12px', borderTop: '1px solid #334155', display: 'flex', gap: 12, color: '#64748b', fontSize: 10 }}>
-          <span>↑↓ Navigate</span>
-          <span>↵ Open</span>
-          <span>Esc Close</span>
-        </div>
-      </div>
-    </>
-  )
-}