# Editor Tool Consistency Checklist

Quick reference for ensuring your new editor tool follows all consistency patterns.

## ✅ Input Section

### Tab Structure
- [ ] 4 tabs: Create New, URL, Paste, Open
- [ ] Icons: Plus, Globe, FileText, Upload
- [ ] Active tab styling: `bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500`

### Create New Tab
- [ ] Grid layout with 2 buttons (Start Empty, Load Sample)
- [ ] Dashed border buttons with icons
- [ ] Blue tip box at bottom

### URL Tab ⚠️ CRITICAL
- [ ] `<div className="flex gap-2">` wrapper
- [ ] Input in `<div className="relative flex-1">`
- [ ] Button INLINE on the right (not below!)
- [ ] Button text: "Fetch Data" or "Fetching..."
- [ ] Enter key triggers fetch
- [ ] Helper text below

### Paste Tab
- [ ] CodeMirrorEditor component
- [ ] Collapse after successful parse
- [ ] Collapsed state shows summary with "Edit Input ▼" button
- [ ] Error display in red box
- [ ] Parse button on bottom-right
- [ ] Button disabled when invalid

### Open Tab ⚠️ CRITICAL
- [ ] `<input className="tool-input" />` (not custom styling!)
- [ ] Auto-load on file selection (no button needed!)
- [ ] Green privacy notice below

---

## ✅ Main Editor Section

- [ ] Conditional render: `{(activeTab !== 'create' || createNewCompleted) && ...}`
- [ ] White card with border
- [ ] Header with icon and title
- [ ] Content area with padding

### Fullscreen (Optional)
- [ ] `z-[99999]` when fullscreen
- [ ] `!m-0` and `marginTop: "0 !important"` to override spacing

---

## ✅ Export Section

- [ ] Collapsible by default (`exportExpanded` state)
- [ ] Clickable header with hover effect
- [ ] ChevronUp/ChevronDown icons
- [ ] Summary info in header
- [ ] Content only renders when expanded

---

## ✅ Usage Tips

- [ ] Collapsible by default (`usageTipsExpanded` state)
- [ ] Header: "💡 Usage Tips"
- [ ] Clickable header with hover effect
- [ ] ChevronUp/ChevronDown icons
- [ ] Organized by categories:
  - [ ] 📝 Input Methods
  - [ ] ✏️ Editing Features (editor-specific)
  - [ ] 📤 Export Options
  - [ ] 💾 Data Privacy

---

## ✅ Data Loss Prevention (CRITICAL!)

### Confirmation Modal
- [ ] Shows when user has data and tries to switch tabs
- [ ] Shows when user clicks Start Empty/Load Sample with existing data
- [ ] Amber header with AlertTriangle icon
- [ ] Lists specific data user will lose (not generic)
- [ ] Blue tip box suggesting to save first
- [ ] "Cancel" button (gray)
- [ ] "Switch & Clear Data" button (amber with icon)
- [ ] z-50 to appear above everything

### Logic
- [ ] `hasUserData()` function implemented
- [ ] `hasModifiedData()` function implemented
- [ ] `handleTabChange()` checks for data before switching
- [ ] `showInputChangeModal` state variable
- [ ] `pendingTabChange` state variable
- [ ] Modal component created as separate component
- [ ] `onConfirm` clears data and switches tab
- [ ] `onCancel` closes modal without action

---

## ✅ State Variables

```jsx
// Required states
const [activeTab, setActiveTab] = useState('create');
const [createNewCompleted, setCreateNewCompleted] = useState(false);
const [inputText, setInputText] = useState('');
const [url, setUrl] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const [pasteCollapsed, setPasteCollapsed] = useState(false);
const [pasteDataSummary, setPasteDataSummary] = useState(null);
const [exportExpanded, setExportExpanded] = useState(false);
const [usageTipsExpanded, setUsageTipsExpanded] = useState(false);
const [showInputChangeModal, setShowInputChangeModal] = useState(false);
const [pendingTabChange, setPendingTabChange] = useState(null);
const fileInputRef = useRef(null);
```

---

## ✅ Error Handling

- [ ] Parse errors keep input expanded
- [ ] Parse errors show in red box with AlertTriangle icon
- [ ] Valid data collapses input and shows editor
- [ ] Error state: `setPasteCollapsed(false)`
- [ ] Success state: `setPasteCollapsed(true)`

---

## ✅ Imports

```jsx
import {
  Plus, Globe, FileText, Upload,      // Input tabs
  Download, Edit3,                     // Editor/Export
  AlertTriangle,                       // Errors
  ChevronUp, ChevronDown,             // Collapse indicators
} from 'lucide-react';

import ToolLayout from '../components/ToolLayout';
import CodeMirrorEditor from '../components/CodeMirrorEditor';
```

---

## ✅ Visual Consistency

### Colors
- [ ] Primary action: `bg-blue-600 hover:bg-blue-700`
- [ ] Disabled: `disabled:bg-gray-400`
- [ ] Success: `bg-green-50 dark:bg-green-900/20`
- [ ] Error: `bg-red-50 dark:bg-red-900/20`
- [ ] Info: `bg-blue-50 dark:bg-blue-900/20`

### Spacing
- [ ] Section spacing: `mt-6`
- [ ] Internal spacing: `space-y-3`
- [ ] Padding: `p-4` or `px-4 py-3`

### Typography
- [ ] Headers: `text-lg font-semibold`
- [ ] Body: `text-sm`
- [ ] Helper text: `text-xs`

---

## ✅ Behavior

- [ ] Tab change confirmation when data exists
- [ ] File input auto-loads (no button)
- [ ] Paste requires button click
- [ ] URL supports Enter key
- [ ] Collapsible sections start collapsed
- [ ] Error messages are specific and helpful

---

## ⚠️ Common Mistakes to Avoid

1. ❌ URL button below input → ✅ Button inline on right
2. ❌ Custom file input styling → ✅ Use `tool-input` class
3. ❌ File input with parse button → ✅ Auto-load on selection
4. ❌ Always-visible usage tips → ✅ Collapsible by default
5. ❌ Always-visible export → ✅ Collapsible by default
6. ❌ Parse button on left → ✅ Parse button on right
7. ❌ No error handling → ✅ Show errors, keep input expanded

---

## 🧪 Testing Checklist

- [ ] Create New: Both buttons work
- [ ] URL: Inline button, Enter key works
- [ ] Paste: Valid data collapses, invalid shows error
- [ ] Open: Auto-loads file
- [ ] Export: Collapses/expands correctly
- [ ] Usage Tips: Collapses/expands correctly
- [ ] Tab switching: Confirmation modal works
- [ ] Dark mode: All colors work
- [ ] Mobile: Responsive layout
- [ ] Errors: Specific messages, input stays expanded

---

## 📚 Reference Examples

- **Object Editor**: `/src/pages/ObjectEditor.js`
- **Table Editor**: `/src/pages/TableEditor.js`
- **Invoice Editor**: `/src/pages/InvoiceEditor.js`

---

## 🚀 Quick Start

1. Copy structure from existing editor
2. Replace editor-specific logic
3. Update Usage Tips content
4. Test all input methods
5. Test collapse/expand behavior
6. Test error handling
7. Test dark mode
8. Test mobile view

**Follow this checklist and your editor will be perfectly consistent!** ✅