panel-splitjs 0.0.1a0__tar.gz → 0.2.0__tar.gz

{panel_splitjs-0.0.1a0 → panel_splitjs-0.2.0}/.github/workflows/build.yml

@@ -14,7 +14,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v5.0.0
         with:
           fetch-depth: 0
       - name: Set up pixi

{panel_splitjs-0.0.1a0 → panel_splitjs-0.2.0}/.github/workflows/test.yml

@@ -42,7 +42,7 @@ jobs:
     needs: [setup]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v5.0.0
       - name: Set up pixi
         uses: prefix-dev/setup-pixi@v0.9.1
       - uses: holoviz-dev/holoviz_tasks/pre-commit@v0
@@ -50,7 +50,7 @@ jobs:
         if: needs.setup.outputs.img_change == 'true'
         with:
           extra_args: -a --hook-stage manual oxipng || true --
-      - uses: stefanzweifel/git-auto-commit-action@v6
+      - uses: stefanzweifel/git-auto-commit-action@v7
         if: needs.setup.outputs.img_change == 'true'
         with:
           commit_message: "Optimize PNG images (lossless)"
@@ -64,7 +64,7 @@ jobs:
       code_change: ${{ steps.filter.outputs.code }}
       matrix: ${{ env.MATRIX }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v5.0.0
         if: github.event_name != 'pull_request'
       - name: Check for code changes
         uses: dorny/paths-filter@v3
@@ -142,3 +142,41 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: panel-extensions/panel-splitjs
+  ui_test:
+    name: ui:${{ matrix.environment }}:${{ matrix.os }}
+    needs: [pre_commit, setup, pixi_lock]
+    runs-on: ${{ matrix.os }}
+    if: needs.setup.outputs.code_change == 'true'
+    strategy:
+      fail-fast: false
+      matrix:
+        os: ["ubuntu-latest", "macos-latest", "windows-latest"]
+        environment: ["test-ui"]
+    timeout-minutes: 60
+    env:
+      PANEL_LOG_LEVEL: info
+    steps:
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
+        with:
+          environments: ${{ matrix.environment }}
+          install: false
+        id: install
+      - name: Test UI
+        run: |
+          # Create a .uicoveragerc file to set the concurrency library to greenlet
+          # https://github.com/microsoft/playwright-python/issues/313
+          echo "[run]\nconcurrency = greenlet" > .uicoveragerc
+          FAIL="--screenshot only-on-failure --full-page-screenshot --output ui_screenshots --tracing retain-on-failure"
+          pixi run -e ${{ matrix.environment }} test-ui $COV --cov-config=.uicoveragerc $FAIL
+      - name: Upload UI Screenshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: ui_screenshots_${{ runner.os }}
+          path: ./ui_screenshots
+          if-no-files-found: ignore
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: panel-extensions/panel-splitjs

{panel_splitjs-0.0.1a0 → panel_splitjs-0.2.0}/.github/workflows/update-lockfiles.yml

@@ -12,16 +12,16 @@ jobs:
   pixi-update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v4.2.2
       - name: Set up pixi
-        uses: prefix-dev/setup-pixi@ba3bb36eb2066252b2363392b7739741bb777659 # v0.8.1
+        uses: prefix-dev/setup-pixi@194d461b21b6c5717c722ffc597fa91ed2ff29fa # v0.9.1
         with:
           run-install: false
       - name: Update lockfiles
         run: |
           pixi update --json --no-install | pixi exec pixi-diff-to-markdown >> diff.md
       - name: Create pull request
-        uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7.0.5
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: Update pixi lockfile

{panel_splitjs-0.0.1a0 → panel_splitjs-0.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: panel-splitjs
-Version: 0.0.1a0
+Version: 0.2.0
 Summary: Provides split.js components for Panel.
 Project-URL: Homepage, https://github.com/panel-extensions/panel-splitjs
 Project-URL: Source, https://github.com/panel-extensions/panel-splitjs
@@ -22,7 +22,7 @@ Classifier: Topic :: Scientific/Engineering
 Classifier: Topic :: Software Development :: Libraries
 Requires-Python: >=3.10
 Requires-Dist: packaging
-Requires-Dist: panel>=1.8.0
+Requires-Dist: panel>=1.8.3
 Provides-Extra: dev
 Requires-Dist: mkdocs-material; extra == 'dev'
 Requires-Dist: mkdocstrings[python]; extra == 'dev'
@@ -48,13 +48,13 @@ A responsive, draggable split panel component for [Panel](https://panel.holoviz.
 
 ## Features
 
-- **Draggable divider** - Resize panels by dragging the divider between them
-- **Collapsible panels** - Toggle panels open/closed with optional buttons
+- **Draggable dividers** - Resize panels by dragging the divider between them
+- **Collapsible panels** - Collapse individual panels with toggle buttons
 - **Flexible orientation** - Support for both horizontal and vertical splits
-- **Minimum size constraints** - Enforce minimum panel sizes to prevent over-collapse
-- **Smooth animations** - Beautiful transitions when toggling panels
+- **Size constraints** - Enforce minimum and maximum panel sizes
+- **Snap behavior** - Smart snapping to minimum sizes for better UX
 - **Customizable sizes** - Control initial and expanded panel sizes
-- **Invertible layout** - Swap panel positions and button locations
+- **Multi-panel support** - Create layouts with 2+ panels using `MultiSplit`
 
 ## Installation
 
@@ -82,7 +82,8 @@ pn.extension()
 split = Split(
     pn.pane.Markdown("## Left Panel\nContent here"),
     pn.pane.Markdown("## Right Panel\nMore content"),
-    sizes=(50, 50),  # Equal sizing
+    sizes=(50, 50),  # Equal sizing initially
+    min_size=100,     # Minimum 100px for each panel
     show_buttons=True
 )
 
@@ -114,6 +115,7 @@ split = HSplit(
     left_panel,
     right_panel,
     sizes=(70, 30),  # 70% left, 30% right
+    min_size=200,    # Minimum 200px for each panel
     show_buttons=True
 )
 
@@ -135,7 +137,7 @@ split = VSplit(
     top_panel,
     bottom_panel,
     sizes=(60, 40),
-    orientation="vertical"
+    min_size=150
 )
 
 split.servable()
@@ -149,72 +151,90 @@ from panel_splitjs import Split
 
 pn.extension()
 
-# Start with sidebar collapsed
+# Start with right panel collapsed
 split = Split(
     pn.pane.Markdown("## Main Content"),
     pn.pane.Markdown("## Collapsible Sidebar"),
-    collapsed=True,
+    collapsed=1,  # 0 for first panel, 1 for second panel, None for not collapsed
     expanded_sizes=(65, 35),  # When expanded, 65% main, 35% sidebar
     show_buttons=True,
-    min_sizes=(200, 200)  # Minimum 200px for each panel
+    min_size=(200, 200)  # Minimum 200px for each panel
 )
 
 # Toggle collapse programmatically
 button = pn.widgets.Button(name="Toggle Sidebar")
-button.on_click(lambda e: setattr(split, 'collapsed', not split.collapsed))
+def toggle(event):
+    split.collapsed = None if split.collapsed == 1 else 1
+button.on_click(toggle)
 
 pn.Column(button, split).servable()
 ```
 
-### Inverted Layout
+### Multi-Panel Split
 
 ```python
 import panel as pn
-from panel_splitjs import Split
+from panel_splitjs import MultiSplit
 
 pn.extension()
 
-# Inverted: right panel collapses, button on right side
-split = Split(
-    pn.pane.Markdown("## Secondary Panel"),
-    pn.pane.Markdown("## Main Content"),
-    invert=True,  # Swap layout and button position
-    collapsed=True,
-    expanded_sizes=(35, 65),
-    show_buttons=True
+# Create a layout with three panels
+multi = MultiSplit(
+    pn.pane.Markdown("## Panel 1"),
+    pn.pane.Markdown("## Panel 2"),
+    pn.pane.Markdown("## Panel 3"),
+    sizes=(30, 40, 30),  # Three panels with custom sizing
+    min_size=100,        # Minimum 100px for each panel
+    orientation="horizontal"
 )
 
-split.servable()
+multi.servable()
 ```
 
 ## API Reference
 
 ### Split
 
-The main split panel component with full customization options.
+The main split panel component for creating two-panel layouts with collapsible functionality.
 
 **Parameters:**
 
 - `objects` (list): Two Panel components to display in the split panels
-- `collapsed` (bool, default=False): Whether the secondary panel is collapsed
-- `expanded_sizes` (tuple, default=(50, 50)): Percentage sizes when expanded (must sum to 100)
-- `invert` (bool, default=False): Swap panel positions and button locations (constant after init)
-- `min_sizes` (tuple, default=(0, 0)): Minimum sizes in pixels for each panel
-- `orientation` (str, default="horizontal"): Either "horizontal" or "vertical"
-- `show_buttons` (bool, default=False): Show collapse/expand toggle buttons
-- `sizes` (tuple, default=(100, 0)): Initial percentage sizes (must sum to 100)
+- `collapsed` (int | None, default=None): Which panel is collapsed - `0` for first panel, `1` for second panel, `None` for not collapsed
+- `expanded_sizes` (tuple, default=(50, 50)): Percentage sizes when both panels are expanded
+- `max_size` (int | tuple, default=None): Maximum sizes in pixels - single value applies to both panels, tuple for individual sizes
+- `min_size` (int | tuple, default=0): Minimum sizes in pixels - single value applies to both panels, tuple for individual sizes
+- `orientation` (str, default="horizontal"): Either `"horizontal"` or `"vertical"`
+- `show_buttons` (bool, default=True): Show collapse/expand toggle buttons on the divider
+- `sizes` (tuple, default=(50, 50)): Initial percentage sizes of the panels
+- `snap_size` (int, default=30): Snap to minimum size at this offset in pixels
+- `step_size` (int, default=1): Step size in pixels at which panel sizes can be changed
 
 ### HSplit
 
 Horizontal split panel (convenience class).
 
-Same parameters as `Split` but `orientation` is locked to "horizontal".
+Same parameters as `Split` but `orientation` is locked to `"horizontal"`.
 
 ### VSplit
 
 Vertical split panel (convenience class).
 
-Same parameters as `Split` but `orientation` is locked to "vertical".
+Same parameters as `Split` but `orientation` is locked to `"vertical"`.
+
+### MultiSplit
+
+Multi-panel split component for creating layouts with three or more panels.
+
+**Parameters:**
+
+- `objects` (list): List of Panel components to display (3 or more)
+- `max_size` (int | tuple, default=None): Maximum sizes in pixels - single value applies to all panels, tuple for individual sizes
+- `min_size` (int | tuple, default=100): Minimum sizes in pixels - single value applies to all panels, tuple for individual sizes
+- `orientation` (str, default="horizontal"): Either `"horizontal"` or `"vertical"`
+- `sizes` (tuple, default=None): Initial percentage sizes of the panels (length must match number of objects)
+- `snap_size` (int, default=30): Snap to minimum size at this offset in pixels
+- `step_size` (int, default=1): Step size in pixels at which panel sizes can be changed
 
 ## Common Use Cases
 
@@ -232,10 +252,10 @@ output = pn.Column("# Output Area")
 split = Split(
     chat,
     output,
-    collapsed=False,
+    collapsed=None,  # Both panels visible
     expanded_sizes=(50, 50),
     show_buttons=True,
-    min_sizes=(300, 300)
+    min_size=(300, 300)  # Minimum 300px for each panel
 )
 
 split.servable()
@@ -260,16 +280,16 @@ visualization = pn.pane.Markdown("## Main Visualization Area")
 split = Split(
     controls,
     visualization,
-    collapsed=True,
+    collapsed=0,  # Start with controls collapsed
     expanded_sizes=(25, 75),
     show_buttons=True,
-    min_sizes=(250, 400)
+    min_size=(250, 400)  # Minimum sizes for each panel
 )
 
 split.servable()
 ```
 
-### Responsive Layout
+### Responsive Layout with Size Constraints
 
 ```python
 import panel as pn
@@ -277,18 +297,73 @@ from panel_splitjs import Split
 
 pn.extension()
 
-# Automatically adjust to available space
 split = Split(
     pn.pane.Markdown("## Panel 1\nResponsive content"),
     pn.pane.Markdown("## Panel 2\nMore responsive content"),
     sizes=(50, 50),
-    min_sizes=(200, 200),  # Prevent panels from getting too small
+    min_size=200,        # Minimum 200px per panel
+    max_size=800,        # Maximum 800px per panel
+    snap_size=50,        # Snap to min size when within 50px
     show_buttons=True
 )
 
 split.servable()
 ```
 
+### Complex Multi-Panel Layout
+
+```python
+import panel as pn
+from panel_splitjs import MultiSplit
+
+pn.extension()
+
+# Create a four-panel layout
+sidebar = pn.Column("## Sidebar", pn.widgets.Select(options=["A", "B", "C"]))
+main = pn.pane.Markdown("## Main Content Area")
+detail = pn.pane.Markdown("## Detail Panel")
+console = pn.pane.Markdown("## Console Output")
+
+multi = MultiSplit(
+    sidebar,
+    main,
+    detail,
+    console,
+    sizes=(15, 40, 25, 20),  # Custom sizing for each panel
+    min_size=(150, 300, 200, 150),  # Individual minimums
+    orientation="horizontal"
+)
+
+multi.servable()
+```
+
+### Nested Splits
+
+```python
+import panel as pn
+from panel_splitjs import HSplit, VSplit
+
+pn.extension()
+
+# Create a nested layout: horizontal split with vertical split on right
+left = pn.pane.Markdown("## Left Panel")
+
+# Right side has a vertical split
+top_right = pn.pane.Markdown("## Top Right")
+bottom_right = pn.pane.Markdown("## Bottom Right")
+right = VSplit(top_right, bottom_right, sizes=(60, 40))
+
+# Main horizontal split
+layout = HSplit(
+    left,
+    right,
+    sizes=(30, 70),
+    min_size=200
+)
+
+layout.servable()
+```
+
 ## Development
 
 This project is managed by [pixi](https://pixi.sh).

{panel_splitjs-0.0.1a0 → panel_splitjs-0.2.0}/README.md

@@ -9,13 +9,13 @@ A responsive, draggable split panel component for [Panel](https://panel.holoviz.
 
 ## Features
 
-- **Draggable divider** - Resize panels by dragging the divider between them
-- **Collapsible panels** - Toggle panels open/closed with optional buttons
+- **Draggable dividers** - Resize panels by dragging the divider between them
+- **Collapsible panels** - Collapse individual panels with toggle buttons
 - **Flexible orientation** - Support for both horizontal and vertical splits
-- **Minimum size constraints** - Enforce minimum panel sizes to prevent over-collapse
-- **Smooth animations** - Beautiful transitions when toggling panels
+- **Size constraints** - Enforce minimum and maximum panel sizes
+- **Snap behavior** - Smart snapping to minimum sizes for better UX
 - **Customizable sizes** - Control initial and expanded panel sizes
-- **Invertible layout** - Swap panel positions and button locations
+- **Multi-panel support** - Create layouts with 2+ panels using `MultiSplit`
 
 ## Installation
 
@@ -43,7 +43,8 @@ pn.extension()
 split = Split(
     pn.pane.Markdown("## Left Panel\nContent here"),
     pn.pane.Markdown("## Right Panel\nMore content"),
-    sizes=(50, 50),  # Equal sizing
+    sizes=(50, 50),  # Equal sizing initially
+    min_size=100,     # Minimum 100px for each panel
     show_buttons=True
 )
 
@@ -75,6 +76,7 @@ split = HSplit(
     left_panel,
     right_panel,
     sizes=(70, 30),  # 70% left, 30% right
+    min_size=200,    # Minimum 200px for each panel
     show_buttons=True
 )
 
@@ -96,7 +98,7 @@ split = VSplit(
     top_panel,
     bottom_panel,
     sizes=(60, 40),
-    orientation="vertical"
+    min_size=150
 )
 
 split.servable()
@@ -110,72 +112,90 @@ from panel_splitjs import Split
 
 pn.extension()
 
-# Start with sidebar collapsed
+# Start with right panel collapsed
 split = Split(
     pn.pane.Markdown("## Main Content"),
     pn.pane.Markdown("## Collapsible Sidebar"),
-    collapsed=True,
+    collapsed=1,  # 0 for first panel, 1 for second panel, None for not collapsed
     expanded_sizes=(65, 35),  # When expanded, 65% main, 35% sidebar
     show_buttons=True,
-    min_sizes=(200, 200)  # Minimum 200px for each panel
+    min_size=(200, 200)  # Minimum 200px for each panel
 )
 
 # Toggle collapse programmatically
 button = pn.widgets.Button(name="Toggle Sidebar")
-button.on_click(lambda e: setattr(split, 'collapsed', not split.collapsed))
+def toggle(event):
+    split.collapsed = None if split.collapsed == 1 else 1
+button.on_click(toggle)
 
 pn.Column(button, split).servable()
 ```
 
-### Inverted Layout
+### Multi-Panel Split
 
 ```python
 import panel as pn
-from panel_splitjs import Split
+from panel_splitjs import MultiSplit
 
 pn.extension()
 
-# Inverted: right panel collapses, button on right side
-split = Split(
-    pn.pane.Markdown("## Secondary Panel"),
-    pn.pane.Markdown("## Main Content"),
-    invert=True,  # Swap layout and button position
-    collapsed=True,
-    expanded_sizes=(35, 65),
-    show_buttons=True
+# Create a layout with three panels
+multi = MultiSplit(
+    pn.pane.Markdown("## Panel 1"),
+    pn.pane.Markdown("## Panel 2"),
+    pn.pane.Markdown("## Panel 3"),
+    sizes=(30, 40, 30),  # Three panels with custom sizing
+    min_size=100,        # Minimum 100px for each panel
+    orientation="horizontal"
 )
 
-split.servable()
+multi.servable()
 ```
 
 ## API Reference
 
 ### Split
 
-The main split panel component with full customization options.
+The main split panel component for creating two-panel layouts with collapsible functionality.
 
 **Parameters:**
 
 - `objects` (list): Two Panel components to display in the split panels
-- `collapsed` (bool, default=False): Whether the secondary panel is collapsed
-- `expanded_sizes` (tuple, default=(50, 50)): Percentage sizes when expanded (must sum to 100)
-- `invert` (bool, default=False): Swap panel positions and button locations (constant after init)
-- `min_sizes` (tuple, default=(0, 0)): Minimum sizes in pixels for each panel
-- `orientation` (str, default="horizontal"): Either "horizontal" or "vertical"
-- `show_buttons` (bool, default=False): Show collapse/expand toggle buttons
-- `sizes` (tuple, default=(100, 0)): Initial percentage sizes (must sum to 100)
+- `collapsed` (int | None, default=None): Which panel is collapsed - `0` for first panel, `1` for second panel, `None` for not collapsed
+- `expanded_sizes` (tuple, default=(50, 50)): Percentage sizes when both panels are expanded
+- `max_size` (int | tuple, default=None): Maximum sizes in pixels - single value applies to both panels, tuple for individual sizes
+- `min_size` (int | tuple, default=0): Minimum sizes in pixels - single value applies to both panels, tuple for individual sizes
+- `orientation` (str, default="horizontal"): Either `"horizontal"` or `"vertical"`
+- `show_buttons` (bool, default=True): Show collapse/expand toggle buttons on the divider
+- `sizes` (tuple, default=(50, 50)): Initial percentage sizes of the panels
+- `snap_size` (int, default=30): Snap to minimum size at this offset in pixels
+- `step_size` (int, default=1): Step size in pixels at which panel sizes can be changed
 
 ### HSplit
 
 Horizontal split panel (convenience class).
 
-Same parameters as `Split` but `orientation` is locked to "horizontal".
+Same parameters as `Split` but `orientation` is locked to `"horizontal"`.
 
 ### VSplit
 
 Vertical split panel (convenience class).
 
-Same parameters as `Split` but `orientation` is locked to "vertical".
+Same parameters as `Split` but `orientation` is locked to `"vertical"`.
+
+### MultiSplit
+
+Multi-panel split component for creating layouts with three or more panels.
+
+**Parameters:**
+
+- `objects` (list): List of Panel components to display (3 or more)
+- `max_size` (int | tuple, default=None): Maximum sizes in pixels - single value applies to all panels, tuple for individual sizes
+- `min_size` (int | tuple, default=100): Minimum sizes in pixels - single value applies to all panels, tuple for individual sizes
+- `orientation` (str, default="horizontal"): Either `"horizontal"` or `"vertical"`
+- `sizes` (tuple, default=None): Initial percentage sizes of the panels (length must match number of objects)
+- `snap_size` (int, default=30): Snap to minimum size at this offset in pixels
+- `step_size` (int, default=1): Step size in pixels at which panel sizes can be changed
 
 ## Common Use Cases
 
@@ -193,10 +213,10 @@ output = pn.Column("# Output Area")
 split = Split(
     chat,
     output,
-    collapsed=False,
+    collapsed=None,  # Both panels visible
     expanded_sizes=(50, 50),
     show_buttons=True,
-    min_sizes=(300, 300)
+    min_size=(300, 300)  # Minimum 300px for each panel
 )
 
 split.servable()
@@ -221,16 +241,16 @@ visualization = pn.pane.Markdown("## Main Visualization Area")
 split = Split(
     controls,
     visualization,
-    collapsed=True,
+    collapsed=0,  # Start with controls collapsed
     expanded_sizes=(25, 75),
     show_buttons=True,
-    min_sizes=(250, 400)
+    min_size=(250, 400)  # Minimum sizes for each panel
 )
 
 split.servable()
 ```
 
-### Responsive Layout
+### Responsive Layout with Size Constraints
 
 ```python
 import panel as pn
@@ -238,18 +258,73 @@ from panel_splitjs import Split
 
 pn.extension()
 
-# Automatically adjust to available space
 split = Split(
     pn.pane.Markdown("## Panel 1\nResponsive content"),
     pn.pane.Markdown("## Panel 2\nMore responsive content"),
     sizes=(50, 50),
-    min_sizes=(200, 200),  # Prevent panels from getting too small
+    min_size=200,        # Minimum 200px per panel
+    max_size=800,        # Maximum 800px per panel
+    snap_size=50,        # Snap to min size when within 50px
     show_buttons=True
 )
 
 split.servable()
 ```
 
+### Complex Multi-Panel Layout
+
+```python
+import panel as pn
+from panel_splitjs import MultiSplit
+
+pn.extension()
+
+# Create a four-panel layout
+sidebar = pn.Column("## Sidebar", pn.widgets.Select(options=["A", "B", "C"]))
+main = pn.pane.Markdown("## Main Content Area")
+detail = pn.pane.Markdown("## Detail Panel")
+console = pn.pane.Markdown("## Console Output")
+
+multi = MultiSplit(
+    sidebar,
+    main,
+    detail,
+    console,
+    sizes=(15, 40, 25, 20),  # Custom sizing for each panel
+    min_size=(150, 300, 200, 150),  # Individual minimums
+    orientation="horizontal"
+)
+
+multi.servable()
+```
+
+### Nested Splits
+
+```python
+import panel as pn
+from panel_splitjs import HSplit, VSplit
+
+pn.extension()
+
+# Create a nested layout: horizontal split with vertical split on right
+left = pn.pane.Markdown("## Left Panel")
+
+# Right side has a vertical split
+top_right = pn.pane.Markdown("## Top Right")
+bottom_right = pn.pane.Markdown("## Bottom Right")
+right = VSplit(top_right, bottom_right, sizes=(60, 40))
+
+# Main horizontal split
+layout = HSplit(
+    left,
+    right,
+    sizes=(30, 70),
+    min_size=200
+)
+
+layout.servable()
+```
+
 ## Development
 
 This project is managed by [pixi](https://pixi.sh).

panel_splitjs-0.2.0/examples/apps/multi.py

@@ -0,0 +1,21 @@
+from panel_splitjs import MultiSplit
+from panel_material_ui import Button, Column, Paper, Row
+
+paper_opts = dict(elevation=3, margin=10, sizing_mode="stretch_both")
+
+add = Button(label="Add item", on_click=lambda _: ms.append(Paper("Added", **paper_opts)))
+insert = Button(label="Insert item", on_click=lambda _: ms.insert(2, Paper("Inserted", **paper_opts)))
+
+ms = MultiSplit(
+    Paper("Foo", **paper_opts),
+    Paper("Bar", **paper_opts),
+    Paper("Baz", **paper_opts),
+    Paper("Qux", **paper_opts),
+    Paper("Quux", **paper_opts),
+    sizes=(20, 30, 20, 10, 20),
+    min_size=100,
+    sizing_mode="stretch_width",
+    height=400
+)
+
+Column(Row(add, insert), ms).servable()