@geenius/tools 0.1.0 → 0.3.0

package/packages/devtools/react/src/hooks/useGitHubLabels.ts

@@ -1,47 +0,0 @@
-// @geenius-tools/devtools-react — src/hooks/useGitHubLabels.ts
-
-import { useState, useEffect } from 'react'
-import {
-    getRepositoryLabels,
-    isGitHubConfigured,
-    type GitHubLabel,
-} from '../services/github-service'
-
-/**
- * Hook to fetch GitHub repository labels.
- * Fetches once on mount if GitHub is configured.
- * No external dependencies (no react-query).
- */
-export function useGitHubLabels() {
-    const [data, setData] = useState<GitHubLabel[] | undefined>(undefined)
-    const [isLoading, setIsLoading] = useState(false)
-    const [error, setError] = useState<Error | null>(null)
-    const isConfigured = isGitHubConfigured()
-
-    useEffect(() => {
-        if (!isConfigured) return
-
-        let cancelled = false
-        setIsLoading(true)
-
-        getRepositoryLabels()
-            .then((labels) => {
-                if (!cancelled) {
-                    setData(labels)
-                    setIsLoading(false)
-                }
-            })
-            .catch((err) => {
-                if (!cancelled) {
-                    setError(err)
-                    setIsLoading(false)
-                }
-            })
-
-        return () => {
-            cancelled = true
-        }
-    }, [isConfigured])
-
-    return { data, isLoading, error, isConfigured }
-}

package/packages/devtools/react/src/hooks/useVirtualList.ts

@@ -1,124 +0,0 @@
-import { useRef, useCallback, useMemo, type RefObject } from 'react'
-
-/**
- * TanStack Virtual wrapper — Unified virtual list hook.
- * Provides a simplified API over @tanstack/react-virtual for consistent usage.
- *
- * @example
- * ```tsx
- * const { virtualItems, totalSize, containerRef } = useVirtualList({
- *   count: items.length,
- *   estimateSize: () => 48,
- * })
- *
- * return (
- *   <div ref={containerRef} style={{ height: 400, overflow: 'auto' }}>
- *     <div style={{ height: totalSize }}>
- *       {virtualItems.map(item => (
- *         <div key={item.key} style={{ height: item.size, transform: `translateY(${item.start}px)` }}>
- *           {items[item.index]}
- *         </div>
- *       ))}
- *     </div>
- *   </div>
- * )
- * ```
- */
-
-interface VirtualListOptions {
-  count: number
-  estimateSize: (index: number) => number
-  overscan?: number
-  paddingStart?: number
-  paddingEnd?: number
-  horizontal?: boolean
-}
-
-interface VirtualItem {
-  key: string
-  index: number
-  start: number
-  size: number
-  end: number
-}
-
-interface VirtualListResult {
-  virtualItems: VirtualItem[]
-  totalSize: number
-  containerRef: RefObject<HTMLDivElement | null>
-  scrollToIndex: (index: number) => void
-  scrollToOffset: (offset: number) => void
-}
-
-/**
- * Simplified virtual list hook.
- *
- * On environments where @tanstack/react-virtual is installed,
- * use that directly for full feature set. This provides a
- * fallback implementation for basic virtualization.
- */
-export function useVirtualList(options: VirtualListOptions): VirtualListResult {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  // Calculate sizes
-  const sizes = useMemo(() => {
-    return Array.from({ length: options.count }, (_, i) => options.estimateSize(i))
-  }, [options.count, options.estimateSize])
-
-  const offsets = useMemo(() => {
-    const result: number[] = []
-    let offset = options.paddingStart ?? 0
-    for (const size of sizes) {
-      result.push(offset)
-      offset += size
-    }
-    return result
-  }, [sizes, options.paddingStart])
-
-  const totalSize = useMemo(() => {
-    return (offsets[offsets.length - 1] ?? 0) + (sizes[sizes.length - 1] ?? 0) + (options.paddingEnd ?? 0)
-  }, [offsets, sizes, options.paddingEnd])
-
-  // Simple window calculation (fallback — use TanStack Virtual for scroll-aware virtualization)
-  const virtualItems = useMemo((): VirtualItem[] => {
-    const overscan = options.overscan ?? 5
-    // Without scroll tracking, render all items (or first batch)
-    // In real usage, this would be scroll-aware via @tanstack/react-virtual
-    const startIdx = 0
-    const endIdx = Math.min(options.count, 100) // Render first 100 as fallback
-
-    return Array.from({ length: endIdx - startIdx }, (_, i) => {
-      const index = startIdx + i
-      return {
-        key: `v_${index}`,
-        index,
-        start: offsets[index] ?? 0,
-        size: sizes[index] ?? 0,
-        end: (offsets[index] ?? 0) + (sizes[index] ?? 0),
-      }
-    })
-  }, [options.count, options.overscan, offsets, sizes])
-
-  const scrollToIndex = useCallback((index: number) => {
-    const offset = offsets[index]
-    if (offset !== undefined && containerRef.current) {
-      if (options.horizontal) {
-        containerRef.current.scrollLeft = offset
-      } else {
-        containerRef.current.scrollTop = offset
-      }
-    }
-  }, [offsets, options.horizontal])
-
-  const scrollToOffset = useCallback((offset: number) => {
-    if (containerRef.current) {
-      if (options.horizontal) {
-        containerRef.current.scrollLeft = offset
-      } else {
-        containerRef.current.scrollTop = offset
-      }
-    }
-  }, [options.horizontal])
-
-  return { virtualItems, totalSize, containerRef, scrollToIndex, scrollToOffset }
-}

package/packages/devtools/react/src/index.ts

@@ -1,77 +0,0 @@
-// @geenius-tools/devtools-react — src/index.ts
-
-// Components
-export { DevToolbar } from './components/DevToolbar'
-export type { DevToolbarProps } from './components/DevToolbar'
-export { DevSidebar } from './components/DevSidebar'
-export { PerformancePanel } from './components/PerformancePanel'
-export { InspectorOverlay } from './components/InspectorOverlay'
-export { GitHubIssueDialog } from './components/GitHubIssueDialog'
-export type { GitHubIssueDialogProps } from './components/GitHubIssueDialog'
-export { DesignPreview } from './components/DesignPreview'
-export type { DesignPreviewProps } from './components/DesignPreview'
-export { DesignSwitcherDropdown } from './components/DesignSwitcherDropdown'
-export type { DesignSwitcherDropdownProps } from './components/DesignSwitcherDropdown'
-export { PageLoadWaterfall, logWaterfall } from './components/PageLoadWaterfall'
-export type { SsrTiming } from './components/PageLoadWaterfall'
-
-// Data
-export { designs } from './data/designs'
-export type { Design } from './data/designs'
-
-// Context
-export {
-    DevModeProvider,
-    useDevMode,
-    useDevModeOptional,
-    useIsDevToolsVisible,
-    useIsDevAllowed,
-} from './context/DevModeContext'
-export type {
-    DevModeProviderProps,
-    DevModeContextValue,
-    ComponentDetails,
-} from './context/DevModeContext'
-
-export {
-    PerformanceProvider,
-    usePerformanceContext,
-    usePerformanceContextOptional,
-} from './context/PerformanceContext'
-
-// Services
-export {
-    configureGitHub,
-    isGitHubConfigured,
-    getGitHubConfig,
-    createGitHubIssue,
-    getRepositoryLabels,
-    getGitHubIssues,
-    generateContextInfo,
-    getIssueType,
-    formatRelativeTime,
-} from './services/github-service'
-export type {
-    GitHubConfig,
-    GitHubIssue,
-    GitHubLabel,
-    GitHubIssueListItem,
-    CreateIssueResponse,
-    IssueFilter,
-} from './services/github-service'
-
-// Hooks
-export { useGitHubLabels } from './hooks/useGitHubLabels'
-export { useVirtualList } from './hooks/useVirtualList'
-
-// Dev Mode Phase 1 Panels
-export { ConvexSpyPanel, useConvexSpy } from './panels/ConvexSpy'
-export { DatabaseSeeder } from './panels/DatabaseSeeder'
-export { FeatureFlagsToggle } from './panels/FeatureFlagsToggle'
-export { QuickRouteJump } from './panels/QuickRouteJump'
-
-// Dev Mode Phase 2 Panels
-export { UserImpersonation, ThemeGenerator } from './panels/DevModePhase2'
-
-// Dev Mode Phase 3 Panels
-export { AccessibilityAuditor, ResponsiveTester } from './panels/DevModePhase3'

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

@@ -1,130 +0,0 @@
-import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
-
-// ─── Types ────────────────────────────────────────────────────
-
-interface ConvexEvent {
-  id: string
-  type: 'query' | 'mutation' | 'action'
-  name: string
-  args: unknown
-  result?: unknown
-  error?: string
-  duration: number
-  timestamp: number
-  status: 'pending' | 'success' | 'error'
-}
-
-interface ConvexSpyContextValue {
-  events: ConvexEvent[]
-  isRecording: boolean
-  toggleRecording: () => void
-  clear: () => void
-  filter: string
-  setFilter: (f: string) => void
-}
-
-// ─── Hook ─────────────────────────────────────────────────────
-
-/**
- * Hook to spy on Convex queries and mutations in real-time.
- * Intercepts the Convex client's internal transport for debugging.
- */
-export function useConvexSpy(maxEvents = 200): ConvexSpyContextValue {
-  const [events, setEvents] = useState<ConvexEvent[]>([])
-  const [isRecording, setIsRecording] = useState(true)
-  const [filter, setFilter] = useState('')
-  const nextId = useRef(0)
-
-  const addEvent = useCallback((event: Omit<ConvexEvent, 'id'>) => {
-    if (!isRecording) return
-    setEvents(prev => {
-      const next = [{ ...event, id: `ev_${nextId.current++}` }, ...prev]
-      return next.slice(0, maxEvents)
-    })
-  }, [isRecording, maxEvents])
-
-  // Monkey-patch console to capture Convex debug logs
-  useEffect(() => {
-    if (!isRecording) return
-    const origDebug = console.debug
-    console.debug = (...args: unknown[]) => {
-      origDebug.apply(console, args)
-      const msg = String(args[0] ?? '')
-      if (msg.includes('[Convex]') || msg.includes('convex:')) {
-        const isQuery = msg.includes('query') || msg.includes('Query')
-        const isMutation = msg.includes('mutation') || msg.includes('Mutation')
-        const type = isMutation ? 'mutation' : isQuery ? 'query' : 'action'
-        addEvent({
-          type,
-          name: extractFunctionName(msg),
-          args: args.length > 1 ? args[1] : undefined,
-          duration: 0,
-          timestamp: Date.now(),
-          status: msg.includes('error') || msg.includes('Error') ? 'error' : 'success',
-        })
-      }
-    }
-    return () => { console.debug = origDebug }
-  }, [isRecording, addEvent])
-
-  return {
-    events: filter ? events.filter(e => e.name.toLowerCase().includes(filter.toLowerCase())) : events,
-    isRecording,
-    toggleRecording: () => setIsRecording(p => !p),
-    clear: () => setEvents([]),
-    filter,
-    setFilter,
-  }
-}
-
-function extractFunctionName(msg: string): string {
-  const match = msg.match(/(?:query|mutation|action)\s*:\s*(\S+)/i) ?? msg.match(/\[(\w+(?:\.\w+)+)\]/)
-  return match?.[1] ?? msg.slice(0, 50)
-}
-
-// ─── Component ────────────────────────────────────────────────
-
-/**
- * ConvexSpy Panel — Real-time monitoring of Convex queries/mutations.
- */
-export function ConvexSpyPanel() {
-  const spy = useConvexSpy()
-
-  return (
-    <div style={{ fontFamily: 'monospace', fontSize: 12, 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 }}>🔍 Convex Spy</span>
-        <div style={{ display: 'flex', gap: 6 }}>
-          <input
-            placeholder="Filter..."
-            value={spy.filter}
-            onChange={e => spy.setFilter(e.target.value)}
-            style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11, width: 120 }}
-          />
-          <button onClick={spy.toggleRecording} style={btnStyle}>{spy.isRecording ? '⏸' : '▶'}</button>
-          <button onClick={spy.clear} style={btnStyle}>🗑</button>
-        </div>
-      </div>
-      <div style={{ maxHeight: 300, overflow: 'auto', padding: 4 }}>
-        {spy.events.length === 0 ? (
-          <div style={{ padding: 16, textAlign: 'center', color: '#64748b' }}>
-            {spy.isRecording ? 'Waiting for Convex events...' : 'Recording paused'}
-          </div>
-        ) : spy.events.map(e => (
-          <div key={e.id} style={{ display: 'flex', gap: 8, padding: '4px 8px', borderBottom: '1px solid #1e293b', alignItems: 'center' }}>
-            <span style={{ color: typeColor(e.type), fontWeight: 700, width: 60, textTransform: 'uppercase', fontSize: 10 }}>{e.type}</span>
-            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.name}</span>
-            <span style={{ color: e.status === 'error' ? '#ef4444' : '#22c55e', fontSize: 10 }}>{e.status}</span>
-            <span style={{ color: '#64748b', fontSize: 10, width: 60, textAlign: 'right' }}>{new Date(e.timestamp).toLocaleTimeString()}</span>
-          </div>
-        ))}
-      </div>
-      <div style={{ padding: '6px 12px', borderTop: '1px solid #334155', color: '#64748b', fontSize: 10 }}>
-        {spy.events.length} events
-      </div>
-    </div>
-  )
-}
-
-const btnStyle: React.CSSProperties = { padding: '4px 8px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', cursor: 'pointer', fontSize: 11 }
-const typeColor = (t: string) => t === 'mutation' ? '#f59e0b' : t === 'query' ? '#06b6d4' : '#a78bfa'

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

@@ -1,116 +0,0 @@
-import { useState, useCallback } from 'react'
-
-// ─── Types ────────────────────────────────────────────────────
-
-interface SeedConfig {
-  name: string
-  description: string
-  tables: { name: string; count: number }[]
-  generate: () => Promise<void>
-}
-
-interface DatabaseSeederProps {
-  seeds: SeedConfig[]
-  onReset?: () => Promise<void>
-}
-
-// ─── Component ────────────────────────────────────────────────
-
-/**
- * Database Seeder Panel — One-click data population and reset.
- * Provide seed configurations and the panel handles execution.
- *
- * @example
- * ```tsx
- * <DatabaseSeeder seeds={[
- *   { name: 'Demo Data', description: '20 tasks, 5 users', tables: [...], generate: async () => { ... } }
- * ]} />
- * ```
- */
-export function DatabaseSeeder({ seeds, onReset }: DatabaseSeederProps) {
-  const [isSeeding, setIsSeeding] = useState(false)
-  const [activeSeed, setActiveSeed] = useState<string | null>(null)
-  const [log, setLog] = useState<string[]>([])
-
-  const runSeed = useCallback(async (seed: SeedConfig) => {
-    setIsSeeding(true)
-    setActiveSeed(seed.name)
-    setLog(prev => [...prev, `🌱 Seeding: ${seed.name}...`])
-    try {
-      await seed.generate()
-      setLog(prev => [...prev, `✅ ${seed.name} complete — ${seed.tables.map(t => `${t.count} ${t.name}`).join(', ')}`])
-    } catch (err) {
-      setLog(prev => [...prev, `❌ Failed: ${err instanceof Error ? err.message : String(err)}`])
-    } finally {
-      setIsSeeding(false)
-      setActiveSeed(null)
-    }
-  }, [])
-
-  const handleReset = useCallback(async () => {
-    if (!onReset || !confirm('This will delete all data. Are you sure?')) return
-    setIsSeeding(true)
-    setLog(prev => [...prev, '🗑 Resetting database...'])
-    try {
-      await onReset()
-      setLog(prev => [...prev, '✅ Database reset complete'])
-    } catch (err) {
-      setLog(prev => [...prev, `❌ Reset failed: ${err instanceof Error ? err.message : String(err)}`])
-    } finally {
-      setIsSeeding(false)
-    }
-  }, [onReset])
-
-  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 }}>
-        🌱 Database Seeder
-      </div>
-      <div style={{ padding: 12 }}>
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
-          {seeds.map(seed => (
-            <button
-              key={seed.name}
-              disabled={isSeeding}
-              onClick={() => runSeed(seed)}
-              style={{
-                padding: '8px 16px', borderRadius: 6, border: '1px solid #334155',
-                background: activeSeed === seed.name ? '#059669' : '#1e293b',
-                color: '#e2e8f0', cursor: isSeeding ? 'wait' : 'pointer', fontWeight: 600, fontSize: 12,
-              }}
-            >
-              {activeSeed === seed.name ? '⏳ Seeding...' : seed.name}
-            </button>
-          ))}
-          {onReset && (
-            <button
-              disabled={isSeeding}
-              onClick={handleReset}
-              style={{
-                padding: '8px 16px', borderRadius: 6, border: '1px solid #ef4444',
-                background: 'transparent', color: '#ef4444', cursor: isSeeding ? 'wait' : 'pointer',
-                fontWeight: 600, fontSize: 12,
-              }}
-            >
-              Reset All
-            </button>
-          )}
-        </div>
-        {seeds.map(seed => (
-          <div key={seed.name} style={{ fontSize: 11, color: '#94a3b8', marginBottom: 4 }}>
-            <strong>{seed.name}</strong>: {seed.description}
-          </div>
-        ))}
-      </div>
-      {log.length > 0 && (
-        <div style={{ borderTop: '1px solid #334155', padding: 8, maxHeight: 150, overflow: 'auto', fontFamily: 'monospace', fontSize: 11 }}>
-          {log.map((entry, i) => (
-            <div key={i} style={{ padding: '2px 4px', color: entry.includes('❌') ? '#ef4444' : entry.includes('✅') ? '#22c55e' : '#94a3b8' }}>
-              {entry}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,191 +0,0 @@
-import { useState, useCallback, useMemo } from 'react'
-
-// ─── User Impersonation Panel ────────────────────────────────
-
-interface UserProfile {
-  id: string
-  name: string
-  email: string
-  role: string
-  avatar?: string
-  metadata?: Record<string, unknown>
-}
-
-interface UserImpersonationProps {
-  users: UserProfile[]
-  currentUserId: string
-  onImpersonate: (userId: string) => void | Promise<void>
-  onStopImpersonation: () => void | Promise<void>
-}
-
-/**
- * User Impersonation Panel — Quick role switching for testing.
- * Shows a list of available users with role badges and one-click switching.
- */
-export function UserImpersonation({ users, currentUserId, onImpersonate, onStopImpersonation }: UserImpersonationProps) {
-  const [isImpersonating, setIsImpersonating] = useState(false)
-  const [originalUserId] = useState(currentUserId)
-  const [filter, setFilter] = useState('')
-
-  const filtered = filter
-    ? users.filter(u => u.name.toLowerCase().includes(filter.toLowerCase()) || u.role.toLowerCase().includes(filter.toLowerCase()))
-    : users
-
-  const handleImpersonate = useCallback(async (userId: string) => {
-    await onImpersonate(userId)
-    setIsImpersonating(true)
-  }, [onImpersonate])
-
-  const handleStop = useCallback(async () => {
-    await onStopImpersonation()
-    setIsImpersonating(false)
-  }, [onStopImpersonation])
-
-  const roleColors: Record<string, string> = {
-    admin: '#ef4444', owner: '#f59e0b', member: '#3b82f6', viewer: '#22c55e', guest: '#94a3b8',
-  }
-
-  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 }}>👤 User Impersonation</span>
-        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-          {isImpersonating && (
-            <button onClick={handleStop} style={{ padding: '4px 10px', borderRadius: 4, border: '1px solid #ef4444', background: 'transparent', color: '#ef4444', cursor: 'pointer', fontSize: 11, fontWeight: 600 }}>
-              Stop
-            </button>
-          )}
-          <input
-            placeholder="Filter users..."
-            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: 120 }}
-          />
-        </div>
-      </div>
-      {isImpersonating && (
-        <div style={{ padding: '6px 12px', background: '#7c2d12', fontSize: 11, fontWeight: 600 }}>
-          ⚠️ Currently impersonating — actions will execute as this user
-        </div>
-      )}
-      <div style={{ maxHeight: 280, overflow: 'auto', padding: 4 }}>
-        {filtered.map(user => (
-          <div
-            key={user.id}
-            onClick={() => handleImpersonate(user.id)}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 6, cursor: 'pointer',
-              background: user.id === currentUserId ? '#1e293b' : 'transparent',
-              borderLeft: user.id === currentUserId ? '3px solid #6366f1' : '3px solid transparent',
-            }}
-          >
-            <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#334155', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700 }}>
-              {user.avatar ? <img src={user.avatar} alt="" style={{ width: 32, height: 32, borderRadius: '50%' }} /> : user.name[0]}
-            </div>
-            <div style={{ flex: 1 }}>
-              <div style={{ fontWeight: 600, fontSize: 13 }}>
-                {user.name} {user.id === originalUserId && <span style={{ fontSize: 10, color: '#64748b' }}>(you)</span>}
-              </div>
-              <div style={{ fontSize: 11, color: '#64748b' }}>{user.email}</div>
-            </div>
-            <span style={{ padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 700, background: roleColors[user.role] ?? '#64748b', color: 'white', textTransform: 'uppercase' }}>
-              {user.role}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// ─── Theme Generator Panel ───────────────────────────────────
-
-interface ThemeVariable {
-  key: string
-  label: string
-  type: 'color' | 'size' | 'font' | 'number'
-  value: string
-  category: string
-}
-
-interface ThemeGeneratorProps {
-  variables: ThemeVariable[]
-  onUpdate: (key: string, value: string) => void
-  onExport: (variables: ThemeVariable[]) => void
-  onReset: () => void
-}
-
-/**
- * White-Label Theme Generator — Interactive theming playground.
- * Live-edit CSS variables with instant preview.
- */
-export function ThemeGenerator({ variables, onUpdate, onExport, onReset }: ThemeGeneratorProps) {
-  const [search, setSearch] = useState('')
-
-  const categories = useMemo(() => {
-    const cats = new Map<string, ThemeVariable[]>()
-    const filtered = search
-      ? variables.filter(v => v.label.toLowerCase().includes(search.toLowerCase()) || v.key.toLowerCase().includes(search.toLowerCase()))
-      : variables
-    for (const v of filtered) {
-      if (!cats.has(v.category)) cats.set(v.category, [])
-      cats.get(v.category)!.push(v)
-    }
-    return cats
-  }, [variables, search])
-
-  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 }}>🎨 Theme Generator</span>
-        <div style={{ display: 'flex', gap: 6 }}>
-          <input
-            placeholder="Search..."
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11, width: 100 }}
-          />
-          <button onClick={() => onExport(variables)} style={btn}>Export</button>
-          <button onClick={onReset} style={btn}>Reset</button>
-        </div>
-      </div>
-      <div style={{ maxHeight: 400, overflow: 'auto', padding: 8 }}>
-        {[...categories.entries()].map(([cat, vars]) => (
-          <div key={cat}>
-            <div style={{ padding: '8px 6px 4px', color: '#64748b', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>{cat}</div>
-            {vars.map(v => (
-              <div key={v.key} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 6px' }}>
-                <span style={{ flex: 1, fontSize: 12 }}>{v.label}</span>
-                {v.type === 'color' ? (
-                  <input
-                    type="color"
-                    value={v.value}
-                    onChange={e => onUpdate(v.key, e.target.value)}
-                    style={{ width: 32, height: 24, border: 'none', borderRadius: 4, cursor: 'pointer' }}
-                  />
-                ) : v.type === 'number' ? (
-                  <input
-                    type="number"
-                    value={v.value}
-                    onChange={e => onUpdate(v.key, e.target.value)}
-                    style={{ width: 60, padding: '2px 6px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11 }}
-                  />
-                ) : (
-                  <input
-                    type="text"
-                    value={v.value}
-                    onChange={e => onUpdate(v.key, e.target.value)}
-                    style={{ width: 120, padding: '2px 6px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: 11 }}
-                  />
-                )}
-                <code style={{ fontSize: 9, color: '#64748b', maxWidth: 80, overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.key}</code>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-const btn: React.CSSProperties = { padding: '4px 10px', borderRadius: 4, border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', cursor: 'pointer', fontSize: 11, fontWeight: 600 }