Add Floating Theme Editor Component #257
Description
Is your feature request related to a problem? Please describe.
Currently, developers using tweakcn need to visit the website (tweakcn.com) to customize themes, which shows only dummy preview components. This workflow is frustrating because:
- I can't see how theme changes look on my actual application pages (dashboards, forms, tables, etc.)
- Switching between my app and tweakcn.com breaks the development flow
- I can't instantly test theme changes on real UI components in my project
- There's no way to inspect individual elements on my pages to see which theme variables they use
Describe the solution you'd like
A Floating Theme Editor component that works like browser DevTools - a draggable, floating panel that overlays your actual application pages. Key features:
Core Functionality:
🎨 Floating Panel - Draggable theme editor that stays above page content
🔍 Inspector Mode - Click to enable, then hover over any element on the page to see its theme classes and customize them
⚡ Real-time Preview - See changes instantly on actual pages (not dummy components)
User Experience:
⌨️ Keyboard Shortcut: Ctrl+Shift+P (or Cmd+Shift+T on Mac) to toggle editor
🖱️ Smooth Drag & Drop: Using @dnd-kit for performance-optimized dragging
📐 Boundary Constraints: Panel stays within window bounds with 20px margins
🔄 Window Resize Handling: Panel position adjusts automatically
🎮 Intuitive Controls: Collapse/expand, maximize/restore, close buttons
Additional context
This feature transforms tweakcn from a website tool into a development-time component