panel-splitjs 0.0.1a0__py3-none-any.whl → 0.1.0__py3-none-any.whl

panel_splitjs/__init__.py

@@ -1,4 +1,4 @@
 from .__version import __version__  # noqa
-from .base import HSplit, Split, VSplit
+from .base import HSplit, MultiSplit, Split, VSplit
 
-__all__ = ["HSplit", "Split", "VSplit"]
+__all__ = ["HSplit", "MultiSplit", "Split", "VSplit"]

panel_splitjs/_version.py

@@ -28,7 +28,7 @@ version_tuple: VERSION_TUPLE
 commit_id: COMMIT_ID
 __commit_id__: COMMIT_ID
 
-__version__ = version = '0.0.1a0'
-__version_tuple__ = version_tuple = (0, 0, 1, 'a0')
+__version__ = version = '0.1.0'
+__version_tuple__ = version_tuple = (0, 1, 0)
 
 __commit_id__ = commit_id = None

panel_splitjs/base.py

@@ -3,7 +3,6 @@ from pathlib import Path
 import param
 from bokeh.embed.bundle import extension_dirs
 from panel.custom import Children, JSComponent
-from panel.layout import Spacer
 from panel.layout.base import ListLike
 
 BASE_PATH = Path(__file__).parent
@@ -12,35 +11,61 @@ DIST_PATH = BASE_PATH / 'dist'
 extension_dirs['panel-splitjs'] = DIST_PATH
 
 
-class SplitChildren(Children):
-    """A Children parameter that only allows at most two items."""
+class Size(param.Parameter):
 
-    def _transform_value(self, val):
-        if val is param.parameterized.Undefined:
-            return [Spacer(), Spacer()]
-        if any(v is None for v in val):
-            val[:] = [Spacer() if v is None else v for v in val]
-        if len(val) == 1:
-            val.append(Spacer())
-        if len(val) == 0:
-            val.extend([Spacer(), Spacer()])
-        val = super()._transform_value(val)
-        return val
+    __slots__ = ['length']
+
+    def __init__(self, default=None, length=None, **params):
+        super().__init__(default=default, **params)
+        self.length = length
 
     def _validate(self, val):
         super()._validate(val)
-        if len(val) <= 2:
+        if val is None:
             return
-        if self.owner is None:
-            objtype = ""
-        elif isinstance(self.owner, param.Parameterized):
-            objtype = self.owner.__class__.__name__
-        else:
-            objtype = self.owner.__name__
-        raise ValueError(f"{objtype} component must have at most two children.")
+        if self.length is not None and isinstance(val, tuple) and len(val) != self.length:
+            raise ValueError(f"Size parameter {self.name!r} must have length {self.length}")
+        if not (isinstance(val, (int, float)) or (isinstance(val, tuple) and all(isinstance(v, (int, float)) for v in val))):
+            raise ValueError(f"Size parameter {self.name!r} only takes int or float values")
+
+
+class SplitBase(JSComponent, ListLike):
+
+    max_size = Size(default=None, doc="""
+        The maximum sizes of the panels (in pixels) either as a single value or a tuple.""")
+
+    min_size = Size(default=None, doc="""
+        The minimum sizes of the panels (in pixels) either as a single value or a tuple.""")
+
+    objects = Children(doc="""
+        The list of child objects that make up the layout.""")
+
+    orientation = param.Selector(default="horizontal", objects=["horizontal", "vertical"], doc="""
+        The orientation of the split panel. Default is horizontal.""")
+
+    sizes = param.NumericTuple(default=None, length=0, doc="""
+        The sizes of the panels (as percentages) on initialization. The value is automatically
+        synced to the sizes of the panels in the frontend.""")
 
+    step_size = param.Integer(default=1, doc="""
+        The step size (in pixels) at which the size of the panels can be changed.""")
 
-class Split(JSComponent, ListLike):
+    snap_size = param.Integer(default=30, doc="""
+        Snap to minimum size at this offset in pixels.""")
+
+    _bundle = DIST_PATH  / "panel-splitjs.bundle.js"
+    _stylesheets = [DIST_PATH / "css" / "splitjs.css"]
+
+    __abstract = True
+
+    def _process_property_change(self, props):
+        props = super()._process_property_change(props)
+        if 'sizes' in props:
+            props['sizes'] = tuple(props['sizes'])
+        return props
+
+
+class Split(SplitBase):
     """
     Split is a component for creating a responsive split panel layout.
 
@@ -57,83 +82,82 @@ class Split(JSComponent, ListLike):
     and a secondary panel that can be toggled (like a chat interface with output display).
     """
 
-    collapsed = param.Boolean(default=False, doc="""
-        Whether the secondary panel is collapsed.
-        When True, only one panel is visible (determined by invert).
-        When False, both panels are visible according to expanded_sizes.""")
+    collapsed = param.Integer(default=None, doc="""
+        Whether the first or second panel is collapsed. 0 for first panel, 1 for second panel, None for not collapsed.""")
 
     expanded_sizes = param.NumericTuple(default=(50, 50), length=2, doc="""
         The sizes of the two panels when expanded (as percentages).
-        Default is (50, 50) which means the left panel takes up 35% of the space
-        and the right panel takes up 65% when expanded.
+        Default is (50, 50) .
         When invert=True, these percentages are automatically swapped.""")
 
-    invert = param.Boolean(default=False, constant=True, doc="""
-        Whether to invert the layout, changing the toggle button side and panel styles.""")
+    max_size = Size(default=None, length=2, doc="""
+        The maximum sizes of the panels (in pixels) either as a single value or a tuple of two values.""")
 
-    min_sizes = param.NumericTuple(default=(0, 0), length=2, doc="""
-        The minimum sizes of the two panels (in pixels).
-        Default is (0, 0) which allows both panels to fully collapse.
-        Set to (300, 0) or similar values if you want to enforce minimum widths during dragging.
-        When invert=True, these values are automatically swapped.""")
+    min_size = Size(default=0, length=2, doc="""
+        The minimum sizes of the panels (in pixels) either as a single value or a tuple of two values.""")
 
-    objects = SplitChildren(doc="""
+    objects = Children(doc="""
         The component to place in the left panel.
         When invert=True, this will appear on the right side.""")
 
-    orientation = param.Selector(default="horizontal", objects=["horizontal", "vertical"], doc="""
-        The orientation of the split panel. Default is horizontal.""")
-
-    show_buttons = param.Boolean(default=False, doc="""
+    show_buttons = param.Boolean(default=True, doc="""
         Whether to show the toggle buttons on the divider.
         When False, the buttons are hidden and panels can only be resized by dragging.""")
 
-    sizes = param.NumericTuple(default=(100, 0), length=2, doc="""
+    sizes = param.NumericTuple(default=(50, 50), length=2, doc="""
         The initial sizes of the two panels (as percentages).
-        Default is (100, 0) which means the left panel takes up all the space
+        Default is (50, 50) which means the left panel takes up 50% of the space
         and the right panel is not visible.""")
 
-    _bundle = DIST_PATH  / "panel-splitjs.bundle.js"
-    _esm = Path(__file__).parent / "models" / "splitjs.js"
-
-    _stylesheets = [DIST_PATH / "css" / "splitjs.css"]
+    _esm = Path(__file__).parent / "models" / "split.js"
 
     def __init__(self, *objects, **params):
         if objects:
             params["objects"] = list(objects)
+        if "objects" in params:
+            objects = params["objects"]
+            if len(objects) > 2:
+                raise ValueError("Split component must have at most two children.")
         super().__init__(**params)
-        if self.invert:
-            # Swap min_sizes when inverted
-            left_min, right_min = self.min_sizes
-            self.min_sizes = (right_min, left_min)
-
-            # Swap expanded_sizes when inverted
-            left_exp, right_exp = self.expanded_sizes
-            self.expanded_sizes = (right_exp, left_exp)
-
-    @param.depends("collapsed", watch=True)
-    def _send_collapsed_update(self):
-        """Send message to JS when collapsed state changes in Python"""
-        self._send_msg({"type": "update_collapsed", "collapsed": self.collapsed})
-
-    def _handle_msg(self, msg):
-        """Handle messages from JS"""
-        if 'collapsed' in msg:
-            collapsed = msg['collapsed']
-            with param.discard_events(self):
-                # Important to discard so when user drags the panel, it doesn't
-                # expand to the expanded sizes
-                self.collapsed = collapsed
 
 
 class HSplit(Split):
+    """
+    HSplit is a component for creating a responsive horizontal split panel layout.
+    """
 
     orientation = param.Selector(default="horizontal", objects=["horizontal"], readonly=True)
 
 
 class VSplit(Split):
+    """
+    VSplit is a component for creating a responsive vertical split panel layout.
+    """
 
     orientation = param.Selector(default="vertical", objects=["vertical"], readonly=True)
 
 
-__all__ = ["HSplit", "Split", "VSplit"]
+class MultiSplit(SplitBase):
+    """
+    MultiSplit is a component for creating a responsive multi-split panel layout.
+    """
+
+    min_size = Size(default=100, length=None, doc="""
+        The minimum sizes of the panels (in pixels) either as a single value or a tuple.""")
+
+    _esm = Path(__file__).parent / "models" / "multi_split.js"
+
+    def __init__(self, *objects, **params):
+        if objects:
+            params["objects"] = list(objects)
+        if "objects" in params:
+            objects = params["objects"]
+            self.param.sizes.length = len(objects)
+        super().__init__(**params)
+
+    @param.depends("objects", watch=True)
+    def _update_sizes(self):
+        self.param.sizes.length = len(self.objects)
+
+
+__all__ = ["HSplit", "MultiSplit", "Split", "VSplit"]

panel_splitjs/dist/css/splitjs.css

@@ -2,7 +2,7 @@
   display: flex;
   height: 100%;
   width: 100%;
-  overflow: clip; /* Clip overflow to prevent scrollbars; inner content will have their own */
+  overflow: clip;
 }
 
 .split.horizontal {
@@ -29,12 +29,26 @@
   position: relative;
 }
 
-.split > div:nth-child(2) {
+.split.single-split > div:nth-child(1) {
+  overflow: clip;
+}
+
+.split.single-split > div:nth-child(2) {
   overflow: visible;
   position: relative;
   width: 100%;
 }
 
+/* Ensure buttons stay visible even when panels are collapsed */
+.split.single-split > div:first-child {
+  min-width: 0 !important; /* Override any minimum width */
+}
+
+.split.single-split > div:nth-child(2) {
+  overflow: visible !important; /* Ensure buttons remain visible */
+  position: relative !important;
+}
+
 /* Content wrapper styles */
 .content-wrapper {
   width: 100%;
@@ -88,16 +102,6 @@
   transform: translateX(-50%);
 }
 
-/* Ensure buttons stay visible even when panels are collapsed */
-.split > div:first-child {
-  min-width: 0 !important; /* Override any minimum width */
-}
-
-.split > div:nth-child(2) {
-  overflow: visible !important; /* Ensure buttons remain visible */
-  position: relative !important;
-}
-
 /* Collapsed state */
 .collapsed-content {
   display: none;

panel_splitjs/dist/panel-splitjs.bundle.js

@@ -1 +1 @@
-var he=Object.defineProperty;var Se=(a,i)=>{for(var s in i)he(a,s,{get:i[s],enumerable:!0})};var M={};Se(M,{render:()=>xe});var h=typeof window<"u"?window:null,J=h===null,G=J?void 0:h.document,S="addEventListener",z="removeEventListener",$="getBoundingClientRect",j="_a",y="_b",_="_c",q="horizontal",w=function(){return!1},ze=J?"calc":["","-webkit-","-moz-","-o-"].filter(function(a){var i=G.createElement("div");return i.style.cssText="width:"+a+"calc(9px)",!!i.style.length}).shift()+"calc",ie=function(a){return typeof a=="string"||a instanceof String},ae=function(a){if(ie(a)){var i=G.querySelector(a);if(!i)throw new Error("Selector "+a+" did not match a DOM element");return i}return a},p=function(a,i,s){var l=a[i];return l!==void 0?l:s},T=function(a,i,s,l){if(i){if(l==="end")return 0;if(l==="center")return a/2}else if(s){if(l==="start")return 0;if(l==="center")return a/2}return a},ye=function(a,i){var s=G.createElement("div");return s.className="gutter gutter-"+i,s},we=function(a,i,s){var l={};return ie(i)?l[a]=i:l[a]=ze+"("+i+"% - "+s+"px)",l},be=function(a,i){var s;return s={},s[a]=i+"px",s},Ee=function(a,i){if(i===void 0&&(i={}),J)return{};var s=a,l,b,E,B,C,o;Array.from&&(s=Array.from(s));var V=ae(s[0]),x=V.parentNode,L=getComputedStyle?getComputedStyle(x):null,O=L?L.flexDirection:null,D=p(i,"sizes")||s.map(function(){return 100/s.length}),F=p(i,"minSize",100),d=Array.isArray(F)?F:s.map(function(){return F}),u=p(i,"maxSize",1/0),v=Array.isArray(u)?u:s.map(function(){return u}),m=p(i,"expandToMin",!1),U=p(i,"gutterSize",10),H=p(i,"gutterAlign","center"),X=p(i,"snapOffset",30),le=Array.isArray(X)?X:s.map(function(){return X}),Y=p(i,"dragInterval",1),k=p(i,"direction",q),Z=p(i,"cursor",k===q?"col-resize":"row-resize"),oe=p(i,"gutter",ye),K=p(i,"elementStyle",we),ce=p(i,"gutterStyle",be);k===q?(l="width",b="clientX",E="left",B="right",C="clientWidth"):k==="vertical"&&(l="height",b="clientY",E="top",B="bottom",C="clientHeight");function P(n,e,t,r){var f=K(l,e,t,r);Object.keys(f).forEach(function(c){n.style[c]=f[c]})}function ue(n,e,t){var r=ce(l,e,t);Object.keys(r).forEach(function(f){n.style[f]=r[f]})}function I(){return o.map(function(n){return n.size})}function Q(n){return"touches"in n?n.touches[0][b]:n[b]}function ee(n){var e=o[this.a],t=o[this.b],r=e.size+t.size;e.size=n/this.size*r,t.size=r-n/this.size*r,P(e.element,e.size,this[y],e.i),P(t.element,t.size,this[_],t.i)}function fe(n){var e,t=o[this.a],r=o[this.b];this.dragging&&(e=Q(n)-this.start+(this[y]-this.dragOffset),Y>1&&(e=Math.round(e/Y)*Y),e<=t.minSize+t.snapOffset+this[y]?e=t.minSize+this[y]:e>=this.size-(r.minSize+r.snapOffset+this[_])&&(e=this.size-(r.minSize+this[_])),e>=t.maxSize-t.snapOffset+this[y]?e=t.maxSize+this[y]:e<=this.size-(r.maxSize-r.snapOffset+this[_])&&(e=this.size-(r.maxSize+this[_])),ee.call(this,e),p(i,"onDrag",w)(I()))}function te(){var n=o[this.a].element,e=o[this.b].element,t=n[$](),r=e[$]();this.size=t[l]+r[l]+this[y]+this[_],this.start=t[E],this.end=t[B]}function de(n){if(!getComputedStyle)return null;var e=getComputedStyle(n);if(!e)return null;var t=n[C];return t===0?null:(k===q?t-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight):t-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),t)}function ne(n){var e=de(x);if(e===null||d.reduce(function(c,g){return c+g},0)>e)return n;var t=0,r=[],f=n.map(function(c,g){var N=e*c/100,R=T(U,g===0,g===n.length-1,H),W=d[g]+R;return N<W?(t+=W-N,r.push(0),W):(r.push(N-W),N)});return t===0?n:f.map(function(c,g){var N=c;if(t>0&&r[g]-t>0){var R=Math.min(t,r[g]-t);t-=R,N=c-R}return N/e*100})}function ve(){var n=this,e=o[n.a].element,t=o[n.b].element;n.dragging&&p(i,"onDragEnd",w)(I()),n.dragging=!1,h[z]("mouseup",n.stop),h[z]("touchend",n.stop),h[z]("touchcancel",n.stop),h[z]("mousemove",n.move),h[z]("touchmove",n.move),n.stop=null,n.move=null,e[z]("selectstart",w),e[z]("dragstart",w),t[z]("selectstart",w),t[z]("dragstart",w),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",n.gutter.style.cursor="",n.parent.style.cursor="",G.body.style.cursor=""}function pe(n){if(!("button"in n&&n.button!==0)){var e=this,t=o[e.a].element,r=o[e.b].element;e.dragging||p(i,"onDragStart",w)(I()),n.preventDefault(),e.dragging=!0,e.move=fe.bind(e),e.stop=ve.bind(e),h[S]("mouseup",e.stop),h[S]("touchend",e.stop),h[S]("touchcancel",e.stop),h[S]("mousemove",e.move),h[S]("touchmove",e.move),t[S]("selectstart",w),t[S]("dragstart",w),r[S]("selectstart",w),r[S]("dragstart",w),t.style.userSelect="none",t.style.webkitUserSelect="none",t.style.MozUserSelect="none",t.style.pointerEvents="none",r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",e.gutter.style.cursor=Z,e.parent.style.cursor=Z,G.body.style.cursor=Z,te.call(e),e.dragOffset=Q(n)-e.end}}D=ne(D);var A=[];o=s.map(function(n,e){var t={element:ae(n),size:D[e],minSize:d[e],maxSize:v[e],snapOffset:le[e],i:e},r;if(e>0&&(r={a:e-1,b:e,dragging:!1,direction:k,parent:x},r[y]=T(U,e-1===0,!1,H),r[_]=T(U,!1,e===s.length-1,H),O==="row-reverse"||O==="column-reverse")){var f=r.a;r.a=r.b,r.b=f}if(e>0){var c=oe(e,k,t.element);ue(c,U,e),r[j]=pe.bind(r),c[S]("mousedown",r[j]),c[S]("touchstart",r[j]),x.insertBefore(c,t.element),r.gutter=c}return P(t.element,t.size,T(U,e===0,e===s.length-1,H),e),e>0&&A.push(r),t});function re(n){var e=n.i===A.length,t=e?A[n.i-1]:A[n.i];te.call(t);var r=e?t.size-n.minSize-t[_]:n.minSize+t[y];ee.call(t,r)}o.forEach(function(n){var e=n.element[$]()[l];e<n.minSize&&(m?re(n):n.minSize=e)});function me(n){var e=ne(n);e.forEach(function(t,r){if(r>0){var f=A[r-1],c=o[f.a],g=o[f.b];c.size=e[r-1],g.size=t,P(c.element,c.size,f[y],c.i),P(g.element,g.size,f[_],g.i)}})}function ge(n,e){A.forEach(function(t){if(e!==!0?t.parent.removeChild(t.gutter):(t.gutter[z]("mousedown",t[j]),t.gutter[z]("touchstart",t[j])),n!==!0){var r=K(l,t.a.size,t[y]);Object.keys(r).forEach(function(f){o[t.a].element.style[f]="",o[t.b].element.style[f]=""})}})}return{setSizes:me,getSizes:I,collapse:function(e){re(o[e])},destroy:ge,parent:x,pairs:A}},se=Ee;function xe({model:a,view:i}){let s=document.createElement("div");s.className=`split ${a.orientation}`,s.classList.add("loading");let l=document.createElement("div"),b=document.createElement("div");s.append(l,b);let E=document.createElement("div");if(E.classList.add("content-wrapper"),a.show_buttons){let d=document.createElement("div"),u=document.createElement("div");a.orientation==="horizontal"?(d.className="toggle-button-left",u.className="toggle-button-right"):(d.className="toggle-button-up",u.className="toggle-button-down"),b.appendChild(d),b.appendChild(u),d.addEventListener("click",()=>{C++,o=0;let v;C===1?v=[50,50]:(v=[0,100],C=0),x.setSizes(v);let m=v[1]<=5;a.send_msg({collapsed:m}),a.collapsed=m,L(m,v),i.invalidate_layout()}),u.addEventListener("click",()=>{o++,C=0;let v;o===1?v=[50,50]:(v=[100,0],o=0),x.setSizes(v);let m=v[1]<=5;a.send_msg({collapsed:m}),a.collapsed=m,L(m,v),i.invalidate_layout()})}let B=a.collapsed?[100,0]:a.expanded_sizes,C=0,o=0;function V(){C=0,o=0}let x=se([l,b],{sizes:B,minSize:[0,0],gutterSize:8,direction:a.orientation,onDragEnd:d=>{i.invalidate_layout();let u=d[1]<=5,v=d[0]<=5,m=u;a.collapsed!==m&&(a.send_msg({collapsed:m}),a.collapsed=m),L(m,d),V()}});function L(d,u=null){let v=u?u[0]<=5:!1;(u?u[1]<=5:!1)?E.className="collapsed-content":E.className="content-wrapper",v?O.className="collapsed-content":O.className="content-wrapper"}a.on("msg:custom",d=>{if(d.type==="update_collapsed"){let u=d.collapsed;a.collapsed=u,u?x.setSizes([100,0]):x.setSizes(a.expanded_sizes),L(u),i.invalidate_layout()}}),a.on("after_layout",()=>{setTimeout(()=>{s.classList.remove("loading"),a.show_buttons&&!window._toggleAnimationShown&&(leftArrowButton.classList.add("animated"),rightArrowButton.classList.add("animated"),setTimeout(()=>{leftArrowButton.classList.remove("animated"),rightArrowButton.classList.remove("animated"),window._toggleAnimationShown=!0},1500)),window.dispatchEvent(new Event("resize"))},100)});let O=document.createElement("div");O.classList.add("left-content-wrapper"),a.collapsed&&(E.className="collapsed-content"),O.classList.add("left-panel-content");let[D,F]=a.get_child("objects");return O.append(D),l.append(O),E.append(F),b.append(E),s}var Le={HSplit:M,Split:M,VSplit:M};export{Le as default};
+var ye=Object.defineProperty;var ce=(t,i)=>{for(var a in i)ye(t,a,{get:i[a],enumerable:!0})};var I={};ce(I,{render:()=>Oe});var _=typeof window<"u"?window:null,ee=_===null,Z=ee?void 0:_.document,w="addEventListener",E="removeEventListener",T="getBoundingClientRect",H="_a",x="_b",D="_c",Y="horizontal",O=function(){return!1},_e=ee?"calc":["","-webkit-","-moz-","-o-"].filter(function(t){var i=Z.createElement("div");return i.style.cssText="width:"+t+"calc(9px)",!!i.style.length}).shift()+"calc",ue=function(t){return typeof t=="string"||t instanceof String},oe=function(t){if(ue(t)){var i=Z.querySelector(t);if(!i)throw new Error("Selector "+t+" did not match a DOM element");return i}return t},d=function(t,i,a){var c=t[i];return c!==void 0?c:a},J=function(t,i,a,c){if(i){if(c==="end")return 0;if(c==="center")return t/2}else if(a){if(c==="start")return 0;if(c==="center")return t/2}return t},be=function(t,i){var a=Z.createElement("div");return a.className="gutter gutter-"+i,a},we=function(t,i,a){var c={};return ue(i)?c[t]=i:c[t]=_e+"("+i+"% - "+a+"px)",c},Ee=function(t,i){var a;return a={},a[t]=i+"px",a},xe=function(t,i){if(i===void 0&&(i={}),ee)return{};var a=t,c,z,p,S,g,l;Array.from&&(a=Array.from(a));var y=oe(a[0]),b=y.parentNode,$=getComputedStyle?getComputedStyle(b):null,f=$?$.flexDirection:null,M=d(i,"sizes")||a.map(function(){return 100/a.length}),B=d(i,"minSize",100),C=Array.isArray(B)?B:a.map(function(){return B}),N=d(i,"maxSize",1/0),q=Array.isArray(N)?N:a.map(function(){return N}),o=d(i,"expandToMin",!1),m=d(i,"gutterSize",10),F=d(i,"gutterAlign","center"),P=d(i,"snapOffset",30),j=Array.isArray(P)?P:a.map(function(){return P}),L=d(i,"dragInterval",1),U=d(i,"direction",Y),Q=d(i,"cursor",U===Y?"col-resize":"row-resize"),fe=d(i,"gutter",be),ne=d(i,"elementStyle",we),ve=d(i,"gutterStyle",Ee);U===Y?(c="width",z="clientX",p="left",S="right",g="clientWidth"):U==="vertical"&&(c="height",z="clientY",p="top",S="bottom",g="clientHeight");function R(r,e,n,s){var v=ne(c,e,n,s);Object.keys(v).forEach(function(u){r.style[u]=v[u]})}function pe(r,e,n){var s=ve(c,e,n);Object.keys(s).forEach(function(v){r.style[v]=s[v]})}function V(){return l.map(function(r){return r.size})}function re(r){return"touches"in r?r.touches[0][z]:r[z]}function se(r){var e=l[this.a],n=l[this.b],s=e.size+n.size;e.size=r/this.size*s,n.size=s-r/this.size*s,R(e.element,e.size,this[x],e.i),R(n.element,n.size,this[D],n.i)}function de(r){var e,n=l[this.a],s=l[this.b];this.dragging&&(e=re(r)-this.start+(this[x]-this.dragOffset),L>1&&(e=Math.round(e/L)*L),e<=n.minSize+n.snapOffset+this[x]?e=n.minSize+this[x]:e>=this.size-(s.minSize+s.snapOffset+this[D])&&(e=this.size-(s.minSize+this[D])),e>=n.maxSize-n.snapOffset+this[x]?e=n.maxSize+this[x]:e<=this.size-(s.maxSize-s.snapOffset+this[D])&&(e=this.size-(s.maxSize+this[D])),se.call(this,e),d(i,"onDrag",O)(V()))}function ie(){var r=l[this.a].element,e=l[this.b].element,n=r[T](),s=e[T]();this.size=n[c]+s[c]+this[x]+this[D],this.start=n[p],this.end=n[S]}function ge(r){if(!getComputedStyle)return null;var e=getComputedStyle(r);if(!e)return null;var n=r[g];return n===0?null:(U===Y?n-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight):n-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),n)}function ae(r){var e=ge(b);if(e===null||C.reduce(function(u,h){return u+h},0)>e)return r;var n=0,s=[],v=r.map(function(u,h){var A=e*u/100,W=J(m,h===0,h===r.length-1,F),X=C[h]+W;return A<X?(n+=X-A,s.push(0),X):(s.push(A-X),A)});return n===0?r:v.map(function(u,h){var A=u;if(n>0&&s[h]-n>0){var W=Math.min(n,s[h]-n);n-=W,A=u-W}return A/e*100})}function ze(){var r=this,e=l[r.a].element,n=l[r.b].element;r.dragging&&d(i,"onDragEnd",O)(V()),r.dragging=!1,_[E]("mouseup",r.stop),_[E]("touchend",r.stop),_[E]("touchcancel",r.stop),_[E]("mousemove",r.move),_[E]("touchmove",r.move),r.stop=null,r.move=null,e[E]("selectstart",O),e[E]("dragstart",O),n[E]("selectstart",O),n[E]("dragstart",O),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",r.gutter.style.cursor="",r.parent.style.cursor="",Z.body.style.cursor=""}function me(r){if(!("button"in r&&r.button!==0)){var e=this,n=l[e.a].element,s=l[e.b].element;e.dragging||d(i,"onDragStart",O)(V()),r.preventDefault(),e.dragging=!0,e.move=de.bind(e),e.stop=ze.bind(e),_[w]("mouseup",e.stop),_[w]("touchend",e.stop),_[w]("touchcancel",e.stop),_[w]("mousemove",e.move),_[w]("touchmove",e.move),n[w]("selectstart",O),n[w]("dragstart",O),s[w]("selectstart",O),s[w]("dragstart",O),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",s.style.userSelect="none",s.style.webkitUserSelect="none",s.style.MozUserSelect="none",s.style.pointerEvents="none",e.gutter.style.cursor=Q,e.parent.style.cursor=Q,Z.body.style.cursor=Q,ie.call(e),e.dragOffset=re(r)-e.end}}M=ae(M);var k=[];l=a.map(function(r,e){var n={element:oe(r),size:M[e],minSize:C[e],maxSize:q[e],snapOffset:j[e],i:e},s;if(e>0&&(s={a:e-1,b:e,dragging:!1,direction:U,parent:b},s[x]=J(m,e-1===0,!1,F),s[D]=J(m,!1,e===a.length-1,F),f==="row-reverse"||f==="column-reverse")){var v=s.a;s.a=s.b,s.b=v}if(e>0){var u=fe(e,U,n.element);pe(u,m,e),s[H]=me.bind(s),u[w]("mousedown",s[H]),u[w]("touchstart",s[H]),b.insertBefore(u,n.element),s.gutter=u}return R(n.element,n.size,J(m,e===0,e===a.length-1,F),e),e>0&&k.push(s),n});function le(r){var e=r.i===k.length,n=e?k[r.i-1]:k[r.i];ie.call(n);var s=e?n.size-r.minSize-n[D]:r.minSize+n[x];se.call(n,s)}l.forEach(function(r){var e=r.element[T]()[c];e<r.minSize&&(o?le(r):r.minSize=e)});function he(r){var e=ae(r);e.forEach(function(n,s){if(s>0){var v=k[s-1],u=l[v.a],h=l[v.b];u.size=e[s-1],h.size=n,R(u.element,u.size,v[x],u.i),R(h.element,h.size,v[D],h.i)}})}function Se(r,e){k.forEach(function(n){if(e!==!0?n.parent.removeChild(n.gutter):(n.gutter[E]("mousedown",n[H]),n.gutter[E]("touchstart",n[H])),r!==!0){var s=ne(c,n.a.size,n[x]);Object.keys(s).forEach(function(v){l[n.a].element.style[v]="",l[n.b].element.style[v]=""})}})}return{setSizes:he,getSizes:V,collapse:function(e){le(l[e])},destroy:Se,parent:b,pairs:k}},K=xe;var G=5;function Oe({model:t,el:i}){let a=document.createElement("div");a.className=`split single-split ${t.orientation}`,a.classList.add("loading");let c=document.createElement("div");c.className="split-panel";let z=document.createElement("div");z.className="split-panel",a.append(c,z);let p=document.createElement("div"),S=document.createElement("div");if(p.className=t.collapsed===0?"collapsed-content":"content-wrapper",S.className=t.collapsed===1?"collapsed-content":"content-wrapper",t.objects!=null&&t.objects.length==2){let[o,m]=t.get_child("objects");p.append(o),S.append(m)}c.append(p),z.append(S);let g,l,y=0,b=0;function $(){y=b=0}t.show_buttons&&(g=document.createElement("div"),l=document.createElement("div"),t.orientation==="horizontal"?(g.className="toggle-button-left",l.className="toggle-button-right"):(g.className="toggle-button-up",l.className="toggle-button-down"),z.append(g,l),g.addEventListener("click",()=>{y++,b=0;let o;y===1&&t.sizes[1]<t.expanded_sizes[1]?(o=t.expanded_sizes,f=null):(f=0,o=[0,100],y=0),t.collapsed=f,N(o,!0)}),l.addEventListener("click",()=>{b++,y=0;let o;b===1&&t.sizes[0]<t.expanded_sizes[0]?(o=t.expanded_sizes,f=null):(f=1,o=[100,0],b=0),t.collapsed=f,N(o,!0)})),i.append(a);let f=t.collapsed,M=t.sizes,B=f?[100,0]:t.sizes,C=K([c,z],{sizes:B,minSize:t.min_size,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size,snapOffset:t.snap_size,gutterSize:8,direction:t.orientation,onDrag:o=>{let m=o[0]<=G?0:o[1]<=G?1:null;f!==m&&(f=m,N(o))},onDragEnd:o=>{f=o[0]<=G?0:o[1]<=G?1:null,t.collapsed=f,N(o,!0),$()}});function N(o=null,m=!1){let F=o?o[0]<=G:!1,P=o?o[1]<=G:!1,[j,L]=o;P?(S.className="collapsed-content",[j,L]=[100,0]):S.className="content-wrapper",F?(p.className="collapsed-content",[j,L]=[0,100]):p.className="content-wrapper",m&&(C.setSizes([j,L]),o=[j,L],t.sizes=[j,L],window.dispatchEvent(new Event("resize")))}t.on("sizes",()=>{M!==t.sizes&&(M=t.sizes,N(M,!0))}),t.on("collapsed",()=>{if(f===t.collapsed)return;f=t.collapsed;let o=f===0?[0,100]:f===1?[100,0]:t.expanded_sizes;N(o,!0)});let q=!1;t.on("after_layout",()=>{q||(q=!0,t.show_buttons&&(g.classList.add("animated"),l.classList.add("animated"),setTimeout(()=>{g.classList.remove("animated"),l.classList.remove("animated")},1500)),window.dispatchEvent(new Event("resize")),a.classList.remove("loading"))}),t.on("remove",()=>C.destroy())}var te={};ce(te,{render:()=>Ne});function Ne({model:t,el:i}){let a=document.createElement("div");a.className=`split multi-split ${t.orientation}`,a.classList.add("loading");let c=t.objects?t.get_child("objects"):[],z=[];for(let l=0;l<c.length;l++){let y=document.createElement("div");y.className="split-panel",a.append(y),z.push(y),y.append(c[l])}i.append(a);let p=t.sizes,S=K(z,{sizes:p,minSize:t.min_size||0,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size||1,snapOffset:t.snap_size||30,gutterSize:8,direction:t.orientation,onDragEnd:l=>{p=l,this.model.sizes=p}});t.on("sizes",()=>{p!==t.sizes&&(p=t.sizes,S.setSizes(p))});let g=!1;t.on("after_layout",()=>{g||(g=!0,a.classList.remove("loading"))}),t.on("remove",()=>S.destroy())}var ke={HSplit:I,MultiSplit:te,Split:I,VSplit:I};export{ke as default};

panel_splitjs/models/multi_split.js

@@ -0,0 +1,52 @@
+import Split from "https://esm.sh/split.js@1.6.5"
+
+export function render({ model, el }) {
+  const split_div = document.createElement("div")
+  split_div.className = `split multi-split ${model.orientation}`
+  split_div.classList.add("loading")
+
+  const objects = model.objects ? model.get_child("objects") : []
+  const split_items = []
+  for (let i = 0; i < objects.length; i++) {
+    const split_item = document.createElement("div")
+    split_item.className = "split-panel"
+    split_div.append(split_item)
+    split_items.push(split_item)
+    split_item.append(objects[i])
+  }
+
+  el.append(split_div)
+
+  let sizes = model.sizes
+  const split = Split(split_items, {
+    sizes: sizes,
+    minSize: model.min_size || 0,
+    maxSize: model.max_size || Number("Infinity"),
+    dragInterval: model.step_size || 1,
+    snapOffset: model.snap_size || 30,
+    gutterSize: 8,
+    direction: model.orientation,
+    onDragEnd: (new_sizes) => {
+      sizes = new_sizes
+      this.model.sizes = sizes
+    }
+  })
+
+  model.on("sizes", () => {
+    if (sizes === model.sizes) {
+      return
+    }
+    sizes = model.sizes
+    split.setSizes(sizes)
+  })
+
+  let initialized = false
+  model.on("after_layout", () => {
+    if (!initialized) {
+      initialized = true
+      split_div.classList.remove("loading")
+    }
+  })
+
+  model.on("remove", () => split.destroy())
+}

panel_splitjs/models/split.js

@@ -0,0 +1,176 @@
+import Split from "https://esm.sh/split.js@1.6.5"
+
+const COLLAPSED_SIZE = 5
+
+export function render({ model, el }) {
+  const split_div = document.createElement("div")
+  split_div.className = `split single-split ${model.orientation}`
+  split_div.classList.add("loading")
+
+  const split0 = document.createElement("div")
+  split0.className = "split-panel"
+  const split1 = document.createElement("div")
+  split1.className = "split-panel"
+  split_div.append(split0, split1)
+
+  const left_content_wrapper = document.createElement("div")
+  const right_content_wrapper = document.createElement("div")
+  left_content_wrapper.className = model.collapsed === 0 ? "collapsed-content" : "content-wrapper"
+  right_content_wrapper.className = model.collapsed === 1 ? "collapsed-content" : "content-wrapper"
+
+  if (model.objects != null && model.objects.length == 2) {
+    const [left, right] = model.get_child("objects")
+    left_content_wrapper.append(left)
+    right_content_wrapper.append(right)
+  }
+  split0.append(left_content_wrapper)
+  split1.append(right_content_wrapper)
+
+  let left_arrow_button, right_arrow_button
+  let left_click_count = 0
+  let right_click_count = 0
+  function reset_click_counts() {
+    left_click_count = right_click_count = 0
+  }
+  if (model.show_buttons) {
+    left_arrow_button = document.createElement("div")
+    right_arrow_button = document.createElement("div")
+    if (model.orientation === "horizontal") {
+      left_arrow_button.className = "toggle-button-left"
+      right_arrow_button.className = "toggle-button-right"
+    } else {
+      left_arrow_button.className = "toggle-button-up"
+      right_arrow_button.className = "toggle-button-down"
+    }
+    split1.append(left_arrow_button, right_arrow_button)
+
+    left_arrow_button.addEventListener("click", () => {
+      left_click_count++
+      right_click_count = 0
+
+      let new_sizes
+      if (left_click_count === 1 && model.sizes[1] < model.expanded_sizes[1]) {
+        new_sizes = model.expanded_sizes
+        is_collapsed = null
+      } else {
+        is_collapsed = 0
+        new_sizes = [0, 100]
+        left_click_count = 0
+      }
+      model.collapsed = is_collapsed
+      sync_ui(new_sizes, true)
+    })
+
+    right_arrow_button.addEventListener("click", () => {
+      right_click_count++
+      left_click_count = 0
+
+      let new_sizes
+      if (right_click_count === 1 && model.sizes[0] < model.expanded_sizes[0]) {
+        new_sizes = model.expanded_sizes
+        is_collapsed = null
+      } else {
+        is_collapsed = 1
+        new_sizes = [100, 0]
+        right_click_count = 0
+      }
+      model.collapsed = is_collapsed
+      sync_ui(new_sizes, true)
+    })
+  }
+
+  el.append(split_div)
+
+  let is_collapsed = model.collapsed
+  let sizes = model.sizes
+  const init_sizes = is_collapsed ? [100, 0] : model.sizes
+  const split_instance = Split([split0, split1], {
+    sizes: init_sizes,
+    minSize: model.min_size,
+    maxSize: model.max_size || Number("Infinity"),
+    dragInterval: model.step_size,
+    snapOffset: model.snap_size,
+    gutterSize: 8,
+    direction: model.orientation,
+    onDrag: (sizes) => {
+      const new_collapsed_state = sizes[0] <= COLLAPSED_SIZE ? 0 : (sizes[1] <= COLLAPSED_SIZE ? 1 : null)
+      if (is_collapsed !== new_collapsed_state) {
+        is_collapsed = new_collapsed_state
+        sync_ui(sizes)
+      }
+    },
+    onDragEnd: (sizes) => {
+      const new_collapsed_state = sizes[0] <= COLLAPSED_SIZE ? 0 : (sizes[1] <= COLLAPSED_SIZE ? 1 : null)
+      is_collapsed = new_collapsed_state
+      model.collapsed = is_collapsed
+      sync_ui(sizes, true)
+      reset_click_counts()
+    },
+  })
+
+  function sync_ui(sizes = null, resize = false) {
+    const left_panel_hidden = sizes ? sizes[0] <= COLLAPSED_SIZE : false
+    const right_panel_hidden = sizes ? sizes[1] <= COLLAPSED_SIZE : false
+
+    let [ls, rs] = sizes
+    if (right_panel_hidden) {
+      right_content_wrapper.className = "collapsed-content";
+      [ls, rs] = [100, 0]
+    } else {
+      right_content_wrapper.className = "content-wrapper"
+    }
+
+    if (left_panel_hidden) {
+      left_content_wrapper.className = "collapsed-content";
+      [ls, rs] = [0, 100]
+    } else {
+      left_content_wrapper.className = "content-wrapper"
+    }
+    if (resize) {
+      split_instance.setSizes([ls, rs])
+      sizes = [ls, rs]
+      model.sizes = [ls, rs]
+      window.dispatchEvent(new Event('resize'))
+    }
+  }
+
+  model.on("sizes", () => {
+    if (sizes === model.sizes) {
+      return
+    }
+    sizes = model.sizes
+    sync_ui(sizes, true)
+  })
+
+  model.on("collapsed", () => {
+    if (is_collapsed === model.collapsed) {
+      return
+    }
+    is_collapsed = model.collapsed
+    const new_sizes = is_collapsed === 0 ? [0, 100] : (is_collapsed === 1 ? [100, 0] : model.expanded_sizes)
+    sync_ui(new_sizes, true)
+  })
+
+  let initialized = false
+  model.on("after_layout", () => {
+    if (initialized) {
+      return
+    }
+    initialized = true
+    if (model.show_buttons) {
+      // Add animation on first load only
+      left_arrow_button.classList.add("animated")
+      right_arrow_button.classList.add("animated")
+
+      // Remove animation after it completes
+      setTimeout(() => {
+        left_arrow_button.classList.remove("animated")
+        right_arrow_button.classList.remove("animated")
+      }, 1500)
+    }
+    window.dispatchEvent(new Event('resize'))
+    split_div.classList.remove("loading")
+  })
+
+  model.on("remove", () => split_instance.destroy())
+}

{panel_splitjs-0.0.1a0.dist-info → panel_splitjs-0.1.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: panel-splitjs
-Version: 0.0.1a0
+Version: 0.1.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
@@ -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.1.0.dist-info/RECORD

@@ -0,0 +1,17 @@
+panel_splitjs/__init__.py,sha256=BKEeHeKAv90kV3GybL6FH8RCwFZM4B6gffr7T8242Qk,150
+panel_splitjs/__version.py,sha256=rpIYpR7RLjD5NBNasrT3f60C0qTL-nnHBifOofA_qyo,1778
+panel_splitjs/_version.py,sha256=5jwwVncvCiTnhOedfkzzxmxsggwmTBORdFL_4wq0ZeY,704
+panel_splitjs/base.py,sha256=x3ynR2CaKUQxhQOGvKyje7zaR8UDppvOygQG89stzTA,5994
+panel_splitjs/dist/panel-splitjs.bundle.js,sha256=rsJvlKUnpPwOQ6q0Axqve8eLesHk1Y8GjMxbIkwjkag,9380
+panel_splitjs/dist/css/arrow_down.svg,sha256=pPSAQIH-UkJf1HbWJhAapaT-rROqn6JVPQldOT3Al0I,214
+panel_splitjs/dist/css/arrow_left.svg,sha256=XZ1Qf7CzKTij-Fa4Up51Gbu_WnBcScK7Qx-tOprvEzE,215
+panel_splitjs/dist/css/arrow_right.svg,sha256=_-3m5dLhPwH9caIEk8XLp3Z8-xQHHvTBny6AcyFVRb4,214
+panel_splitjs/dist/css/arrow_up.svg,sha256=FoVQYz0kh1SAf7EJAs2ZI-ZuuQjcPzR3uM4uViZ87Qs,215
+panel_splitjs/dist/css/handle.svg,sha256=tEQAE3lNBVzPigcp9Z0SQZCW0bSzfECYIvpl19NOd0E,899
+panel_splitjs/dist/css/handle_vertical.svg,sha256=2QZdZzNiLaJp93Ot4tJBhfGjF07EiMfN-Hq3Uf5Z_BI,801
+panel_splitjs/dist/css/splitjs.css,sha256=L80iIafpH9Ii5qy0duO-KNroG6VaP7AzQImZR3d7zgI,5281
+panel_splitjs/models/multi_split.js,sha256=U9TQcCK5Ho0GElYaMCOzwEosnBv40vN7XOLzsGzlISk,1348
+panel_splitjs/models/split.js,sha256=zJefB8ivxMi-j7oKgTc9wF5K3CIxSKommQPfYL0tpR8,5470
+panel_splitjs-0.1.0.dist-info/METADATA,sha256=FMJQQJtzyj-5RTFnmLQlivB1weEzww7P3QcmSJ_ZnAg,10877
+panel_splitjs-0.1.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+panel_splitjs-0.1.0.dist-info/RECORD,,

panel_splitjs/models/splitjs.js

@@ -1,215 +0,0 @@
-import Split from "https://esm.sh/split.js@1.6.5"
-
-export function render({ model, view }) {
-  const splitDiv = document.createElement("div")
-  splitDiv.className = `split ${model.orientation}`
-  splitDiv.classList.add("loading")
-
-  const split0 = document.createElement("div")
-  const split1 = document.createElement("div")
-  splitDiv.append(split0, split1)
-
-  // Create content wrapper for right panel
-  const contentWrapper = document.createElement("div")
-  contentWrapper.classList.add("content-wrapper")
-
-  if (model.show_buttons) {
-    // Create toggle icons for both sides of the divider
-    const leftArrowButton = document.createElement("div")  // < button
-    const rightArrowButton = document.createElement("div") // > button
-
-    // Set button icons based on orientation
-    if (model.orientation === "horizontal") {
-      leftArrowButton.className = "toggle-button-left"
-      rightArrowButton.className = "toggle-button-right"
-    } else {
-      leftArrowButton.className = "toggle-button-up"
-      rightArrowButton.className = "toggle-button-down"
-    }
-
-    // Add both buttons to the right panel (split1) so they're positioned relative to the divider
-    split1.appendChild(leftArrowButton)
-    split1.appendChild(rightArrowButton)
-
-    // Left/Up arrow button event listener - two-step toggle
-    leftArrowButton.addEventListener("click", () => {
-      leftClickCount++
-      rightClickCount = 0 // Reset other button's count
-
-      let newSizes
-
-      if (leftClickCount === 1) {
-        // First tap: make sizes 50, 50
-        newSizes = [50, 50]
-      } else {
-        // Second tap (or more): make sizes 0, 100
-        newSizes = [0, 100]
-        leftClickCount = 0 // Reset after second tap
-      }
-
-      splitInstance.setSizes(newSizes)
-
-      // Update collapsed state based on new sizes
-      const newCollapsedState = newSizes[1] <= 5
-      model.send_msg({ collapsed: newCollapsedState })
-      model.collapsed = newCollapsedState
-
-      updateUIForCollapsedState(newCollapsedState, newSizes)
-      view.invalidate_layout()
-    })
-
-    // Right/Down arrow button event listener - two-step toggle
-    rightArrowButton.addEventListener("click", () => {
-      rightClickCount++
-      leftClickCount = 0 // Reset other button's count
-
-      let newSizes
-
-      if (rightClickCount === 1) {
-        // First tap: make sizes 50, 50
-        newSizes = [50, 50]
-      } else {
-        // Second tap (or more): make sizes 100, 0
-        newSizes = [100, 0]
-        rightClickCount = 0 // Reset after second tap
-      }
-
-      splitInstance.setSizes(newSizes)
-
-      // Update collapsed state based on new sizes
-      const newCollapsedState = newSizes[1] <= 5
-      model.send_msg({ collapsed: newCollapsedState })
-      model.collapsed = newCollapsedState
-
-      updateUIForCollapsedState(newCollapsedState, newSizes)
-      view.invalidate_layout()
-    })
-  }
-
-  // Determine initial state - collapsed means right panel is hidden
-  const initSizes = model.collapsed ? [100, 0] : model.expanded_sizes
-
-  // Track click counts for toggle behavior
-  let leftClickCount = 0  // For < button
-  let rightClickCount = 0 // For > button
-
-  // Function to reset click counts when sizes change via dragging
-  function resetClickCounts() {
-    leftClickCount = 0
-    rightClickCount = 0
-  }
-
-  // Use minSize of 0 to allow full collapse via buttons
-  const splitInstance = Split([split0, split1], {
-    sizes: initSizes,
-    minSize: [0, 0], // Allow full collapse for both panels
-    gutterSize: 8, // Match the 8px width in CSS
-    direction: model.orientation,
-    onDragEnd: (sizes) => {
-      view.invalidate_layout()
-
-      // Determine the new collapsed state based on panel sizes
-      const rightPanelCollapsed = sizes[1] <= 5
-      const leftPanelCollapsed = sizes[0] <= 5
-
-      // The model's collapsed state represents whether the right panel is collapsed
-      const newCollapsedState = rightPanelCollapsed
-
-      if (model.collapsed !== newCollapsedState) {
-        // Send message to Python about collapsed state change
-        model.send_msg({ collapsed: newCollapsedState })
-        model.collapsed = newCollapsedState
-      }
-
-      // Update UI based on current sizes
-      updateUIForCollapsedState(newCollapsedState, sizes)
-
-      // Reset click counts when user drags the splitter
-      resetClickCounts()
-    },
-  })
-
-  // Function to update UI elements based on collapsed state
-  function updateUIForCollapsedState(isCollapsed, sizes = null) {
-    // Determine current panel state
-    const leftPanelHidden = sizes ? sizes[0] <= 5 : false
-    const rightPanelHidden = sizes ? sizes[1] <= 5 : false
-
-    // Update content visibility
-    if (rightPanelHidden) {
-      contentWrapper.className = "collapsed-content"
-    } else {
-      contentWrapper.className = "content-wrapper"
-    }
-
-    if (leftPanelHidden) {
-      leftContentWrapper.className = "collapsed-content"
-    } else {
-      leftContentWrapper.className = "content-wrapper"
-    }
-  }
-
-  // Listen for collapsed state changes from Python
-  model.on("msg:custom", (event) => {
-    if (event.type === "update_collapsed") {
-      const newCollapsedState = event.collapsed
-
-      model.collapsed = newCollapsedState
-
-      // Update split sizes based on new collapsed state
-      if (newCollapsedState) {
-        // Collapse right panel (show only left)
-        splitInstance.setSizes([100, 0])
-      } else {
-        // Expand to show both panels
-        splitInstance.setSizes(model.expanded_sizes)
-      }
-
-      updateUIForCollapsedState(newCollapsedState)
-      view.invalidate_layout()
-    }
-  })
-
-  model.on("after_layout", () => {
-    setTimeout(() => {
-      splitDiv.classList.remove("loading")
-
-      // Only add animation on initial load
-      if (model.show_buttons && !window._toggleAnimationShown) {
-        // Add animation on first load only
-        leftArrowButton.classList.add("animated")
-        rightArrowButton.classList.add("animated")
-
-        // Remove animation after it completes and set flag
-        setTimeout(() => {
-          leftArrowButton.classList.remove("animated")
-          rightArrowButton.classList.remove("animated")
-          window._toggleAnimationShown = true
-        }, 1500)
-      }
-
-      window.dispatchEvent(new Event("resize"))
-    }, 100)
-  })
-
-  // Create a centered content wrapper for the left panel
-  const leftContentWrapper = document.createElement("div")
-  leftContentWrapper.classList.add("left-content-wrapper")
-
-  // Set initial display based on collapsed state
-  if (model.collapsed) {
-    contentWrapper.className = "collapsed-content"
-  }
-
-  // Apply left-panel-content class to the left panel
-  leftContentWrapper.classList.add("left-panel-content")
-
-  // Append children to the appropriate containers
-  const [left, right] = model.get_child("objects")
-  leftContentWrapper.append(left)
-  split0.append(leftContentWrapper)
-  contentWrapper.append(right)
-  split1.append(contentWrapper)
-
-  return splitDiv
-}

panel_splitjs-0.0.1a0.dist-info/RECORD

@@ -1,16 +0,0 @@
-panel_splitjs/__init__.py,sha256=3o1ZsgXufccivyXhnMunBBNQZliCwQY4GW9XKQ9gRDM,124
-panel_splitjs/__version.py,sha256=rpIYpR7RLjD5NBNasrT3f60C0qTL-nnHBifOofA_qyo,1778
-panel_splitjs/_version.py,sha256=N6jqqryygxntTpQZELt2H0LAGZ4wKgVPTWGAhPzx98U,712
-panel_splitjs/base.py,sha256=OcdprAQyY--hTgiMCUVOFw2RsuknlS46o3DUv89lO9E,5337
-panel_splitjs/dist/panel-splitjs.bundle.js,sha256=tcWSuP8-WKzPVq1qsV_FnnFBq_eGB32AqnKu3cwIXpc,8466
-panel_splitjs/dist/css/arrow_down.svg,sha256=pPSAQIH-UkJf1HbWJhAapaT-rROqn6JVPQldOT3Al0I,214
-panel_splitjs/dist/css/arrow_left.svg,sha256=XZ1Qf7CzKTij-Fa4Up51Gbu_WnBcScK7Qx-tOprvEzE,215
-panel_splitjs/dist/css/arrow_right.svg,sha256=_-3m5dLhPwH9caIEk8XLp3Z8-xQHHvTBny6AcyFVRb4,214
-panel_splitjs/dist/css/arrow_up.svg,sha256=FoVQYz0kh1SAf7EJAs2ZI-ZuuQjcPzR3uM4uViZ87Qs,215
-panel_splitjs/dist/css/handle.svg,sha256=tEQAE3lNBVzPigcp9Z0SQZCW0bSzfECYIvpl19NOd0E,899
-panel_splitjs/dist/css/handle_vertical.svg,sha256=2QZdZzNiLaJp93Ot4tJBhfGjF07EiMfN-Hq3Uf5Z_BI,801
-panel_splitjs/dist/css/splitjs.css,sha256=CIo6tHTT0_NpYjoJFxtCB60uKBUBEFYtvyphDsQpviM,5257
-panel_splitjs/models/splitjs.js,sha256=kDkD-CTnPhRmsE1y6MCIMr31y90LS2r2J3EkFbDUZu0,6965
-panel_splitjs-0.0.1a0.dist-info/METADATA,sha256=9TkauebpnY0rouEEtKJq0sb1-Bt9VtJfLrYGPaEBkr0,8178
-panel_splitjs-0.0.1a0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-panel_splitjs-0.0.1a0.dist-info/RECORD,,