✨ New Features:
- Authentic Postman table experience with horizontal arrays & vertical objects
- Click rows to drill down with breadcrumb navigation
- Smart data detection (arrays → tables, objects → key-value, primitives → display)
- Clickable breadcrumb buttons for easy navigation
- Back button for seamless exploration
🎨 Consistent Visual Design:
- Unified type notation across Visual Editor, Mindmap, and Table views
- Color-coded pills with icons for all data types:
🔵 Objects (blue) 🟢 Arrays (green) 🟣 Strings (purple)
🟠 Numbers (orange) 🟡 Booleans (yellow) ⚫ Null (gray)
- Button-style breadcrumb vs circular data pills for clear distinction
- Full dark mode support throughout
🔧 UX Improvements:
- Output formats hidden by default with 'See Data Outputs' toggle
- Left-aligned toggle button matching existing UI
- Preserved PostmanTreeTable as asset for hierarchical view
- Enhanced sample data with realistic array/object structure
- Professional styling matching Postman's interface
🚀 Technical Implementation:
- Dynamic column generation from array data
- Path-based navigation with state management
- Type-aware rendering with consistent icons
- Responsive design for all screen sizes
- Clean component architecture
🎯 Major Features Added:
- Snap to grid functionality (20x20 grid, default enabled)
- Tidy Up button for instant node reorganization
- Copy node values with one-click clipboard integration
- HTML rendering toggle (render/raw modes for HTML content)
- Accordion-style collapsible panels (Controls & Legend)
- Automatic fitView on fullscreen toggle with smooth animations
🎨 UI/UX Improvements:
- Professional accordion layout with exclusive panel opening
- Consistent button alignment and styling across all controls
- Legend moved to top-right with icon+color indicators
- Vertical button stack: Controls → Legend → Tidy Up → Fullscreen
- Smooth transitions and hover effects throughout
- Clean, uncluttered interface with folded panels by default
🔧 Technical Enhancements:
- Fixed ResizeObserver errors with proper error handling
- Optimized React rendering with memo and useCallback
- Debounced DOM updates to prevent infinite loops
- React Flow instance management for programmatic control
- Removed redundant Raw Input button for cleaner interface
🚀 Performance & Stability:
- Error boundary implementation for ResizeObserver issues
- Proper cleanup of event listeners and timeouts
- Memoized components to prevent unnecessary re-renders
- Smooth 300ms animations for all state transitions
- Add new TextLengthTool.js with real-time text statistics
- Features: character/word/line/sentence/paragraph counting, reading time estimation
- Add Text Length Checker to navigation (ToolSidebar, Layout, App routing)
- Add Text Length Checker card to homepage
- Fix button styling with flex alignment for better UX
- Route: /text-length with Type icon from lucide-react
- Fixed PHP serialization byte length calculation for escaped strings
- Added Long Text type with textarea for multiline strings in StructuredEditor
- Auto-detects strings with newlines and displays them as textarea
- Improvements apply to both SerializeTool and JsonTool visual editors
- Resolves parse errors with quoted strings and multiline content
- Fixed StructuredEditor auto-type detection to only trigger on empty fields
- Made array keys readonly with proper index display and full-width value inputs
- Enhanced PHP unserialize to handle empty strings, NULL values, and complex data
- Added JSON to CSV support for single objects as Key-Value format
- Upgraded DiffTool with react-diff-view for professional GitHub-style diffs
- Added theme-synchronized diff colors with proper contrast in light/dark modes
- Implemented red/green text on matching backgrounds for optimal readability
- Removed unused imports (Key, Palette, QrCode) from Layout.js
- Deleted all HTML Preview Tool files from repository
- Removed HtmlPreviewTool import and route from App.js
- Build now completes successfully without ESLint warnings
- Ready for deployment in CI environment
- Added Database, LinkIcon, Code2, and ChevronDown imports from lucide-react
- Build now completes successfully without blocking errors
- Ready for deployment
- Removed HTML Preview Tool from navigation menu in Layout.js
- Cleaned up unused Code import
- Added HTML Preview related files to .gitignore
- Project builds successfully without HTML Preview Tool
- Fixed missing ref={previewFrameRef} on first PreviewFrame component (line 336)
* This was causing 'PreviewFrame API not available' errors during save operations
* Both fullscreen and normal mode PreviewFrame instances now have proper ref connection
- Fixed click handler attachment bug in setupInspectModeStyles function
* Click handler was being skipped when styles were already injected
* Now always attaches click handler when inspect mode is activated
* Added proper cleanup to prevent duplicate event listeners
- Fixed variable scope issues in PreviewFrame.fresh.js
* styleElement and cursorStyleElement now properly scoped for cleanup function
* Added references to existing elements when styles already present
- Removed unused variables and fixed eslint warnings
* Removed unused indentSize variable in BeautifierTool.js
* Removed unused onSave and onDomUpdate props in PreviewFrame.fresh.js
* Fixed unnecessary escape character in script tag
These fixes restore the Enhanced Option A DOM manipulation architecture:
- Inspector sidebar should now appear when clicking elements in inspect mode
- Save functionality should work without 'PreviewFrame ref not available' errors
- Live editing of element properties should work through PreviewFrame API
- Iframe refresh prevention during inspector operations maintained
