@geenius/tools 0.1.0

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

@@ -0,0 +1,234 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,152 @@
+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>
+    </>
+  )
+}