update

readme.hints.md

@@ -65,26 +65,42 @@ Implemented an advanced editor for complex properties (Arrays and Objects) that
 
 ### Features
 1. **Dynamic Layout**: Frame shrinks by 300px from bottom when editor opens
-2. **JSON Editor**: 
+2. **Multiple Editors**: Can edit multiple properties simultaneously side by side
+3. **JSON Editor**: 
    - Monospace font for code editing
    - Tab key support for indentation
    - Syntax validation with error messages
    - Live preview of changes
-3. **Smooth Transitions**: Animated opening/closing with 0.3s ease
-4. **Error Handling**: Invalid JSON shows clear error messages that disappear on typing
+4. **Smooth Transitions**: Animated opening/closing with 0.3s ease
+5. **Error Handling**: Invalid JSON shows clear error messages that disappear on typing
+6. **Close All Button**: Single button to close all open editors at once
 
-### Technical Implementation
-- **State Management**: Added showAdvancedEditor, editingProperty, editorValue, editorError states
+### Technical Implementation (Updated)
+- **State Management**: Changed from single editor to array of editors with unique IDs
+- **Editor Structure**: Each editor instance contains:
+  - `id`: Unique identifier (`propertyName-timestamp`)
+  - `name`: Property name
+  - `value`: Original value
+  - `element`: Reference to the element
+  - `editorValue`: Current JSON string
+  - `editorError`: Validation error message
 - **Event System**: Uses custom 'editorStateChanged' event to communicate with parent dashboard
-- **Dynamic Styling**: wcc-frame's bottom position changes from 100px to 400px when editor is open
+- **Dynamic Styling**: wcc-frame's bottom position changes from 100px to 400px when any editor is open
 - **Property Types**: Object and Array properties show "Edit Object/Array" button instead of inline controls
 
 ### User Flow
 1. Click "Edit Object/Array" button on complex property
 2. Editor slides up between properties panel and frame
-3. Edit JSON with live validation
-4. Save applies changes and refreshes properties, Cancel discards changes
-5. Frame automatically resizes back when editor closes
+3. Click additional "Edit" buttons to open more properties side by side
+4. Each editor can be saved/cancelled independently
+5. "Close All" button dismisses all editors at once
+6. Frame automatically resizes back when all editors are closed
+
+### Layout Details
+- **Container**: Flexbox with horizontal scrolling when multiple editors overflow
+- **Editor Width**: Min 300px, max 500px, flexible between
+- **Scrollbar**: Custom styled thin scrollbar for horizontal overflow
+- **Header Bar**: Fixed top bar with "Property Editors" title and "Close All" button
 
 ## Properties Panel Element Detection Issue (Fixed)