panel-splitjs 0.0.1a0__py3-none-any.whl

panel_splitjs/__init__.py

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

panel_splitjs/__version.py

@@ -0,0 +1,46 @@
+"""Define the package version.
+
+Called __version.py as setuptools_scm will create a _version.py
+"""
+
+import pathlib
+
+PACKAGE = "panel_splitjs"
+
+try:
+    # For performance reasons on imports, avoid importing setuptools_scm
+    # if not in a .git folder
+    if (pathlib.Path(__file__).parent.parent.parent / ".git").is_dir():
+        # If setuptools_scm is installed (e.g. in a development environment with
+        # an editable install), then use it to determine the version dynamically.
+        from setuptools_scm import get_version
+
+        # This will fail with LookupError if the package is not installed in
+        # editable mode or if Git is not installed.
+        __version__ = get_version(
+            root="../..", relative_to=__file__, version_scheme="post-release"
+        )
+    else:
+        raise FileNotFoundError
+except (ImportError, LookupError, FileNotFoundError):
+    # As a fallback, use the version that is hard-coded in the file.
+    try:
+        # __version__ was added in _version in setuptools-scm 7.0.0, we rely on
+        # the hopefully stable version variable.
+        from ._version import version as __version__  # type: ignore
+    except (ModuleNotFoundError, ImportError):
+        # Either _version doesn't exist (ModuleNotFoundError) or version isn't
+        # in _version (ImportError). ModuleNotFoundError is a subclass of
+        # ImportError, let's be explicit anyway.
+
+        # Try something else:
+        from importlib.metadata import PackageNotFoundError, version
+
+        try:
+            __version__ = version(PACKAGE)
+        except PackageNotFoundError:
+            # The user is probably trying to run this without having installed
+            # the package.
+            __version__ = "0.0.0+unknown"
+
+__all__ = ("__version__",)

panel_splitjs/_version.py

@@ -0,0 +1,34 @@
+# file generated by setuptools-scm
+# don't change, don't track in version control
+
+__all__ = [
+    "__version__",
+    "__version_tuple__",
+    "version",
+    "version_tuple",
+    "__commit_id__",
+    "commit_id",
+]
+
+TYPE_CHECKING = False
+if TYPE_CHECKING:
+    from typing import Tuple
+    from typing import Union
+
+    VERSION_TUPLE = Tuple[Union[int, str], ...]
+    COMMIT_ID = Union[str, None]
+else:
+    VERSION_TUPLE = object
+    COMMIT_ID = object
+
+version: str
+__version__: str
+__version_tuple__: VERSION_TUPLE
+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')
+
+__commit_id__ = commit_id = None

panel_splitjs/base.py

@@ -0,0 +1,139 @@
+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
+DIST_PATH = BASE_PATH / 'dist'
+
+extension_dirs['panel-splitjs'] = DIST_PATH
+
+
+class SplitChildren(Children):
+    """A Children parameter that only allows at most two items."""
+
+    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
+
+    def _validate(self, val):
+        super()._validate(val)
+        if len(val) <= 2:
+            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.")
+
+
+class Split(JSComponent, ListLike):
+    """
+    Split is a component for creating a responsive split panel layout.
+
+    This component uses split.js to create a draggable split layout with two panels.
+
+    Key features include:
+    - Collapsible panels with toggle button
+    - Minimum size constraints for each panel
+    - Invertible layout to support different UI configurations
+    - Responsive sizing with automatic adjustments
+    - Animation for better user experience
+
+    The component is ideal for creating application layouts with a main content area
+    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.""")
+
+    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.
+        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.""")
+
+    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.""")
+
+    objects = SplitChildren(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="""
+        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="""
+        The initial sizes of the two panels (as percentages).
+        Default is (100, 0) which means the left panel takes up all 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"]
+
+    def __init__(self, *objects, **params):
+        if objects:
+            params["objects"] = list(objects)
+        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):
+
+    orientation = param.Selector(default="horizontal", objects=["horizontal"], readonly=True)
+
+
+class VSplit(Split):
+
+    orientation = param.Selector(default="vertical", objects=["vertical"], readonly=True)
+
+
+__all__ = ["HSplit", "Split", "VSplit"]

panel_splitjs/dist/css/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="6 9 12 15 18 9"></polyline>
+</svg>

panel_splitjs/dist/css/arrow_left.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="15 18 9 12 15 6"></polyline>
+</svg>

panel_splitjs/dist/css/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="9 6 15 12 9 18"></polyline>
+</svg>

panel_splitjs/dist/css/arrow_up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="6 15 12 9 18 15"></polyline>
+</svg>

panel_splitjs/dist/css/handle.svg

@@ -0,0 +1,23 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="10"
+  height="24"
+  viewBox="0 0 10 24"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <rect x="2.5" y="2"  width="2" height="2" rx="0" />
+  <rect x="2.5" y="5"  width="2" height="2" rx="0" />
+  <rect x="2.5" y="8"  width="2" height="2" rx="0" />
+  <rect x="2.5" y="11" width="2" height="2" rx="0" />
+  <rect x="2.5" y="14" width="2" height="2" rx="0" />
+  <rect x="2.5" y="17" width="2" height="2" rx="0" />
+  <rect x="2.5" y="20" width="2" height="2" rx="0" />
+  <rect x="5.5" y="2"  width="2" height="2" rx="0" />
+  <rect x="5.5" y="5"  width="2" height="2" rx="0" />
+  <rect x="5.5" y="8"  width="2" height="2" rx="0" />
+  <rect x="5.5" y="11" width="2" height="2" rx="0" />
+  <rect x="5.5" y="14" width="2" height="2" rx="0" />
+  <rect x="5.5" y="17" width="2" height="2" rx="0" />
+  <rect x="5.5" y="20" width="2" height="2" rx="0" />
+</svg>

panel_splitjs/dist/css/handle_vertical.svg

@@ -0,0 +1,23 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="10"
+  viewBox="0 0 24 10"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <rect x="2"  y="2.5" width="2" height="2" />
+  <rect x="5"  y="2.5" width="2" height="2" />
+  <rect x="8"  y="2.5" width="2" height="2" />
+  <rect x="11" y="2.5" width="2" height="2" />
+  <rect x="14" y="2.5" width="2" height="2" />
+  <rect x="17" y="2.5" width="2" height="2" />
+  <rect x="20" y="2.5" width="2" height="2" />
+  <rect x="2"  y="5.5" width="2" height="2" />
+  <rect x="5"  y="5.5" width="2" height="2" />
+  <rect x="8"  y="5.5" width="2" height="2" />
+  <rect x="11" y="5.5" width="2" height="2" />
+  <rect x="14" y="5.5" width="2" height="2" />
+  <rect x="17" y="5.5" width="2" height="2" />
+  <rect x="20" y="5.5" width="2" height="2" />
+</svg>

panel_splitjs/dist/css/splitjs.css

@@ -0,0 +1,239 @@
+.split {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: clip; /* Clip overflow to prevent scrollbars; inner content will have their own */
+}
+
+.split.horizontal {
+  flex-direction: row;
+}
+
+.split.vertical {
+  flex-direction: column;
+}
+
+/* Style for initial load to prevent FOUC */
+.split.loading {
+  visibility: hidden;
+}
+
+/* Max width for comfortable reading */
+.left-panel-content {
+  max-width: clamp(450px, 95vw, 1200px);
+  margin: 0px auto;
+}
+
+/* Split panel styles */
+.split > div {
+  position: relative;
+}
+
+.split > div:nth-child(2) {
+  overflow: visible;
+  position: relative;
+  width: 100%;
+}
+
+/* Content wrapper styles */
+.content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: contents;
+  box-sizing: border-box;
+  padding-inline: 0.5rem;
+}
+
+/* Toggle button basic styles */
+.toggle-button-left, .toggle-button-right, .toggle-button-up, .toggle-button-down {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100; /* High z-index to ensure always on top */
+  opacity: 0.5;
+  transition: opacity 0.2s;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+/* Left button (<) - positioned on left side of divider */
+.toggle-button-left {
+  left: -34px; /* 24px width + 10px spacing from divider */
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Right button (>) - positioned on right side of divider */
+.toggle-button-right {
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Up button (^) - positioned above divider */
+.toggle-button-up {
+  top: -34px; /* 24px height + 10px spacing from divider */
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Down button (v) - positioned below divider */
+.toggle-button-down {
+  top: 2px;
+  left: 50%;
+  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;
+}
+
+/* Gutter styles */
+.gutter {
+  background-color: var(--panel-background-color);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transition: background-color 0.2s;
+}
+
+.gutter:hover {
+  background-color: var(--panel-surface-color);
+}
+
+.gutter.gutter-horizontal {
+  cursor: col-resize;
+  position: relative;
+  width: 10px;
+  z-index: 1;
+}
+
+.gutter.gutter-horizontal {
+  cursor: row-resize;
+}
+
+.gutter::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-mask-image: url("handle.svg");
+  mask-image: url("handle.svg");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  background-color: var(--panel-border-color);
+}
+
+.gutter.gutter-horizontal::after {
+  width: 10px;
+  height: 24px;
+}
+
+.gutter.gutter-vertical::after {
+  width: 24px;
+  height: 10px;
+  -webkit-mask-image: url("handle_vertical.svg");
+  mask-image: url("handle_vertical.svg");
+}
+
+.split > div:nth-child(2) > div:not(.toggle-button-left):not(.toggle-button-right):not(.toggle-button-up):not(.toggle-button-down) {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding-top: 36px; /* Space for the toggle buttons */
+}
+
+/* Toggle button base styles */
+.toggle-button-left,
+.toggle-button-right,
+.toggle-button-up,
+.toggle-button-down {
+  width: 24px;
+  height: 24px;
+  background-color: var(--panel-on-background-color);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 16px;
+  mask-size: 16px;
+  opacity: 0.5;
+}
+
+.toggle-button-left:hover, .toggle-button-right:hover, .toggle-button-up:hover, .toggle-button-down:hover {
+  opacity: 1;
+}
+
+/* Left arrow button */
+.toggle-button-left {
+  -webkit-mask-image: url("arrow_left.svg");
+  mask-image: url("arrow_left.svg");
+}
+
+/* Right arrow button */
+.toggle-button-right {
+  -webkit-mask-image: url("arrow_right.svg");
+  mask-image: url("arrow_right.svg");
+}
+
+/* Up arrow button */
+.toggle-button-up {
+  -webkit-mask-image: url("arrow_up.svg");
+  mask-image: url("arrow_up.svg");
+}
+
+/* Down arrow button */
+.toggle-button-down {
+  -webkit-mask-image: url("arrow_down.svg");
+  mask-image: url("arrow_down.svg");
+}
+
+/* Animation for toggle icon */
+@keyframes jumpLeftRight {
+  0%, 100% { transform: translateY(-50%); }
+  25% { transform: translate(-4px, -50%); }
+  50% { transform: translateY(-50%); }
+  75% { transform: translate(4px, -50%); }
+}
+
+@keyframes jumpUpDown {
+  0%, 100% { transform: translateX(-50%); }
+  25% { transform: translate(-50%, -4px); }
+  50% { transform: translateX(-50%); }
+  75% { transform: translate(-50%, 4px); }
+}
+
+.toggle-button-left.animated, .toggle-button-right.animated {
+  animation-name: jumpLeftRight;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  animation-iteration-count: 3;
+}
+
+.toggle-button-up.animated, .toggle-button-down.animated {
+  animation-name: jumpUpDown;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  animation-iteration-count: 3;
+}
+
+/* List navigation styles */
+ul.nav.flex-column {
+  padding-inline-start: 0;
+  margin: 0;
+}

panel_splitjs/dist/panel-splitjs.bundle.js

@@ -0,0 +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};

panel_splitjs/models/splitjs.js

@@ -0,0 +1,215 @@
+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/METADATA

@@ -0,0 +1,325 @@
+Metadata-Version: 2.4
+Name: panel-splitjs
+Version: 0.0.1a0
+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
+Author-email: Philipp Rudiger <philipp.jfr@gmail.com>
+Maintainer-email: Philipp Rudiger <philipp.jfr@gmail.com>
+License: BSD
+Classifier: Development Status :: 5 - Production/Stable
+Classifier: Intended Audience :: Developers
+Classifier: Intended Audience :: Science/Research
+Classifier: License :: OSI Approved :: BSD License
+Classifier: Natural Language :: English
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Topic :: Scientific/Engineering
+Classifier: Topic :: Software Development :: Libraries
+Requires-Python: >=3.10
+Requires-Dist: packaging
+Requires-Dist: panel>=1.8.0
+Provides-Extra: dev
+Requires-Dist: mkdocs-material; extra == 'dev'
+Requires-Dist: mkdocstrings[python]; extra == 'dev'
+Requires-Dist: pytest; extra == 'dev'
+Requires-Dist: pytest-asyncio; extra == 'dev'
+Requires-Dist: pytest-rerunfailures; extra == 'dev'
+Requires-Dist: pytest-xdist; extra == 'dev'
+Requires-Dist: watchfiles; extra == 'dev'
+Provides-Extra: mypy
+Requires-Dist: mypy; extra == 'mypy'
+Requires-Dist: types-requests; extra == 'mypy'
+Requires-Dist: typing-extensions; extra == 'mypy'
+Description-Content-Type: text/markdown
+
+# panel-splitjs
+
+[![CI](https://img.shields.io/github/actions/workflow/status/panel-extensions/panel-splitjs/ci.yml?style=flat-square&branch=main)](https://github.com/panel-extensions/panel-splitjs/actions/workflows/ci.yml)
+[![conda-forge](https://img.shields.io/conda/vn/conda-forge/panel-splitjs?logoColor=white&logo=conda-forge&style=flat-square)](https://prefix.dev/channels/conda-forge/packages/panel-splitjs)
+[![pypi-version](https://img.shields.io/pypi/v/panel-splitjs.svg?logo=pypi&logoColor=white&style=flat-square)](https://pypi.org/project/panel-splitjs)
+[![python-version](https://img.shields.io/pypi/pyversions/panel-splitjs?logoColor=white&logo=python&style=flat-square)](https://pypi.org/project/panel-splitjs)
+
+A responsive, draggable split panel component for [Panel](https://panel.holoviz.org) applications, powered by [split.js](https://split.js.org/).
+
+## Features
+
+- **Draggable divider** - Resize panels by dragging the divider between them
+- **Collapsible panels** - Toggle panels open/closed with optional 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
+- **Customizable sizes** - Control initial and expanded panel sizes
+- **Invertible layout** - Swap panel positions and button locations
+
+## Installation
+
+Install via pip:
+
+```bash
+pip install panel-splitjs
+```
+
+Or via conda:
+
+```bash
+conda install -c conda-forge panel-splitjs
+```
+
+## Quick Start
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+pn.extension()
+
+# Create a simple split layout
+split = Split(
+    pn.pane.Markdown("## Left Panel\nContent here"),
+    pn.pane.Markdown("## Right Panel\nMore content"),
+    sizes=(50, 50),  # Equal sizing
+    show_buttons=True
+)
+
+split.servable()
+```
+
+## Usage Examples
+
+### Basic Horizontal Split
+
+```python
+import panel as pn
+from panel_splitjs import HSplit
+
+pn.extension()
+
+left_panel = pn.Column(
+    "# Main Content",
+    pn.widgets.TextInput(name="Input"),
+    pn.pane.Markdown("This is the main content area.")
+)
+
+right_panel = pn.Column(
+    "# Sidebar",
+    pn.widgets.Select(name="Options", options=["A", "B", "C"]),
+)
+
+split = HSplit(
+    left_panel,
+    right_panel,
+    sizes=(70, 30),  # 70% left, 30% right
+    show_buttons=True
+)
+
+split.servable()
+```
+
+### Vertical Split
+
+```python
+import panel as pn
+from panel_splitjs import VSplit
+
+pn.extension()
+
+top_panel = pn.pane.Markdown("## Top Section\nHeader content")
+bottom_panel = pn.pane.Markdown("## Bottom Section\nFooter content")
+
+split = VSplit(
+    top_panel,
+    bottom_panel,
+    sizes=(60, 40),
+    orientation="vertical"
+)
+
+split.servable()
+```
+
+### Collapsible Sidebar
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+pn.extension()
+
+# Start with sidebar collapsed
+split = Split(
+    pn.pane.Markdown("## Main Content"),
+    pn.pane.Markdown("## Collapsible Sidebar"),
+    collapsed=True,
+    expanded_sizes=(65, 35),  # When expanded, 65% main, 35% sidebar
+    show_buttons=True,
+    min_sizes=(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))
+
+pn.Column(button, split).servable()
+```
+
+### Inverted Layout
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+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
+)
+
+split.servable()
+```
+
+## API Reference
+
+### Split
+
+The main split panel component with full customization options.
+
+**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)
+
+### HSplit
+
+Horizontal split panel (convenience class).
+
+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".
+
+## Common Use Cases
+
+### Chat Interface with Output
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+pn.extension()
+
+chat = pn.chat.ChatInterface()
+output = pn.Column("# Output Area")
+
+split = Split(
+    chat,
+    output,
+    collapsed=False,
+    expanded_sizes=(50, 50),
+    show_buttons=True,
+    min_sizes=(300, 300)
+)
+
+split.servable()
+```
+
+### Dashboard with Collapsible Controls
+
+```python
+import panel as pn
+from panel_splitjs import Split
+
+pn.extension()
+
+controls = pn.Column(
+    pn.widgets.Select(name="Dataset", options=["A", "B", "C"]),
+    pn.widgets.IntSlider(name="Threshold", start=0, end=100),
+    pn.widgets.Button(name="Update")
+)
+
+visualization = pn.pane.Markdown("## Main Visualization Area")
+
+split = Split(
+    controls,
+    visualization,
+    collapsed=True,
+    expanded_sizes=(25, 75),
+    show_buttons=True,
+    min_sizes=(250, 400)
+)
+
+split.servable()
+```
+
+### Responsive Layout
+
+```python
+import panel as pn
+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
+    show_buttons=True
+)
+
+split.servable()
+```
+
+## Development
+
+This project is managed by [pixi](https://pixi.sh).
+
+### Setup
+
+```bash
+git clone https://github.com/panel-extensions/panel-splitjs
+cd panel-splitjs
+
+pixi run pre-commit-install
+pixi run postinstall
+pixi run test
+```
+
+### Building
+
+```bash
+pixi run build
+```
+
+### Testing
+
+```bash
+pixi run test
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+See LICENSE file for details.

panel_splitjs-0.0.1a0.dist-info/RECORD

@@ -0,0 +1,16 @@
+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,,

panel_splitjs-0.0.1a0.dist-info/WHEEL

@@ -0,0 +1,4 @@
+Wheel-Version: 1.0
+Generator: hatchling 1.27.0
+Root-Is-Purelib: true
+Tag: py3-none-any