updated Panel implementation

docs/Panel.md

@@ -737,43 +737,63 @@ codebase.
 
 ```
 Div(id="{id}", cls="mf-panel")
-├── Div(id="{id}_panel_left", cls="mf-panel-left [mf-hidden]")
-│   ├── Div(id="{id}_content_left")
-│   │   ├── Div (hide icon)
+├── Div(id="{id}_pl", cls="mf-panel-left [mf-hidden]")
+│   ├── Div (hide icon)
+│   ├── Div(id="{id}_cl")
 │   │   └── [Left content]
 │   └── Div (resizer-left)
 ├── Div(cls="mf-panel-main")
 │   ├── Div(id="{id}_show_left", cls="hidden|mf-panel-show-icon-left")
-│   ├── [Main content]
+│   ├── Div(id="{id}_m", cls="mf-panel-main")
+│   │   └── [Main content]
 │   └── Div(id="{id}_show_right", cls="hidden|mf-panel-show-icon-right")
-├── Div(id="{id}_panel_right", cls="mf-panel-right [mf-hidden]")
+├── Div(id="{id}_pr", cls="mf-panel-right [mf-hidden]")
 │   ├── Div (resizer-right)
-│   └── Div(id="{id}_content_right")
-│       ├── Div (hide icon)
+│   ├── Div (hide icon)
+│   └── Div(id="{id}_cr")
 │       └── [Right content]
 └── Script  # initResizer('{id}')
 ```
 
 **Note:**
 
-- Left panel: content then resizer (resizer on right edge)
-- Right panel: resizer then content (resizer on left edge)
+- Left panel: hide icon, then content, then resizer (resizer on right edge)
+- Right panel: resizer, then hide icon, then content (resizer on left edge)
+- Hide icons are positioned at panel root level (not inside content div)
+- Main content has an outer wrapper and inner content div with ID
 - `[mf-hidden]` class is conditionally applied when panel is hidden
 
 ### Element IDs
 
-| Name                 | Description                         |
-|----------------------|-------------------------------------|
-| `{id}`               | Root panel container                |
-| `{id}_panel_left`    | Left panel container                |
-| `{id}_panel_right`   | Right panel container               |
-| `{id}_content_left`  | Left panel content wrapper          |
-| `{id}_content_right` | Right panel content wrapper         |
-| `{id}_show_left`     | Show icon for left panel (in main)  |
-| `{id}_show_right`    | Show icon for right panel (in main) |
+| Name             | Description                         |
+|------------------|-------------------------------------|
+| `{id}`           | Root panel container                |
+| `{id}_pl`        | Left panel container                |
+| `{id}_pr`        | Right panel container               |
+| `{id}_cl`        | Left panel content wrapper          |
+| `{id}_cr`        | Right panel content wrapper         |
+| `{id}_m`         | Main content wrapper                |
+| `{id}_show_left` | Show icon for left panel (in main)  |
+| `{id}_show_right`| Show icon for right panel (in main) |
 
 **Note:** `{id}` is the Panel instance ID (auto-generated UUID or custom `_id`).
 
+**ID Management:**
+
+The Panel component uses the `PanelIds` helper class to manage element IDs consistently. Access IDs programmatically:
+
+```python
+panel = Panel(parent=root_instance)
+
+# Access IDs via get_ids()
+panel.get_ids().panel("left")   # Returns "{id}_pl"
+panel.get_ids().panel("right")  # Returns "{id}_pr"
+panel.get_ids().left            # Returns "{id}_cl"
+panel.get_ids().right           # Returns "{id}_cr"
+panel.get_ids().main            # Returns "{id}_m"
+panel.get_ids().content("left") # Returns "{id}_cl"
+```
+
 ### Internal Methods
 
 These methods are used internally for rendering: