lilact 0.13.0 → 0.13.1

package/src/accessories.jsx

@@ -28,10 +28,15 @@
 
 */
 
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useImperativeHandle } from "./hooks.jsx";
+import { Children, forwardRef } from "./misc.jsx";
+
+
 import {isThenable} from "./misc.jsx"
 import {setTimeout, clearTimeout} from "./timers.jsx"
 import {Component} from "./components.jsx"
-import {useRef, useState, useCallback} from './hooks.jsx'
+import {useCallback} from './hooks.jsx'
 import {emotion} from "./lilact.jsx"
 const {css,cx} = emotion;
 
@@ -402,3 +407,271 @@ export function DragHandle({
 	);
 }
 
+
+
+const clamp = (n, min, max) => {
+  if (!Number.isFinite(n)) return n;
+  return Math.min(max, Math.max(min, n));
+};
+
+/**
+ * A split-pane container with a draggable splitter, supporting both horizontal and vertical layouts.
+ *
+ * The pane can be either:
+ * - **Controlled** via the `position` prop (number between `min` and `max`), or
+ * - **Uncontrolled** via `defaultPosition` (used as the initial position).
+ *
+ * Layout behavior:
+ * - `mode="horizontal"`: the `position` controls the width of the **left** pane.
+ * - `mode="vertical"`: the `position` controls the height of the **top** pane.
+ *
+ * Ref API:
+ * - Exposes imperative methods on `ref.current`:
+ *   - `getMode()` to get the current mode
+ *   - `setMode(mode)` to switch between `"horizontal"` and `"vertical"`
+ *   - `getPosition()` to get the current splitter position
+ *   - `setPosition(position)` to update the splitter position
+ *
+ * Events:
+ * - Calls `onSizeChange(position)` whenever the pane size/position changes (e.g., via dragging).
+ *
+ * Rendering:
+ * - Renders `children` into two separate containers (no portals).
+ *
+ * @param mode - Split direction: `"horizontal"` or `"vertical"`. Defaults to `"horizontal"`.
+ * @param position - Controlled splitter position. Normalized value within `[min, max]`.
+ * If provided, the component uses this value instead of internal state.
+ * @param defaultPosition - Initial splitter position for uncontrolled usage. Defaults to `0.5`.
+ * @param min - Minimum allowed position. Defaults to `0.1`.
+ * @param max - Maximum allowed position. Defaults to `0.9`.
+ * @param splitterSize - Thickness of the draggable splitter in pixels. Defaults to `8`.
+ * @param onSizeChange - Callback invoked when the position changes. Receives the new normalized position.
+ * @param style - Optional root container styles.
+ * @param className - Optional root container CSS class.
+ * @param leftPaneStyle - Optional styles applied to the left pane (or top pane in vertical mode).
+ * @param rightPaneStyle - Optional styles applied to the right pane (or bottom pane in vertical mode).
+ * @param splitterStyle - Optional styles applied to the splitter element.
+ * @param children - React children to be rendered into the two pane containers.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<SplitPaneHandle>(null);
+ *
+ * <SplitPane
+ *   ref={ref}
+ *   mode="horizontal"
+ *   defaultPosition={0.5}
+ *   min={0.1}
+ *   max={0.9}
+ *   onSizeChange={(pos) => console.log(pos)}
+ * >
+ *   <div /> <div />
+ * </SplitPane>
+ * ```
+ */
+export const SplitPane = forwardRef(function SplitPane(
+  {
+    mode = "horizontal",
+    position, // controlled: number | undefined/null
+    defaultPosition = 0.5,
+    min = 0.1,
+    max = 0.9,
+    splitterSize = 8,
+    onSizeChange,
+    style,
+    className,
+    leftPaneStyle,
+    rightPaneStyle,
+    splitterStyle,
+    children,
+  },
+  ref
+) {
+  const containerRef = useRef(null);
+  const panes = Children.toArray(children);
+  const leftChild = panes[0] ?? null;
+  const rightChild = panes[1] ?? null;
+
+  const isControlled = position != null;
+
+  const [internalMode, setInternalMode] = useState(mode);
+
+  const [posUncontrolled, setPosUncontrolled] = useState(() =>
+    clamp(
+      position ?? defaultPosition,
+      min,
+      max
+    )
+  );
+
+  useEffect(() => {
+    if (mode != null) setInternalMode(mode);
+  }, [mode]);
+
+  // keep internal position clamped if min/max change (uncontrolled only)
+  useLayoutEffect(() => {
+    if (isControlled) return;
+    setPosUncontrolled((p) => clamp(p, min, max));
+  }, [min, max, isControlled]);
+
+  const posResolved = isControlled ? clamp(position, min, max) : posUncontrolled;
+
+  const setPosition = (next) => {
+    const clamped = clamp(next, min, max);
+    if (!isControlled) setPosUncontrolled(clamped);
+    onSizeChange?.(clamped);
+  };
+
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
+
+  const updateFromClient = (clientX, clientY) => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+
+    if (internalMode === "horizontal") {
+      const usable = rect.width;
+      if (!Number.isFinite(usable) || usable <= 0) return; // no jump on init
+      const raw = (clientX - rect.left) / usable;
+      if (!Number.isFinite(raw)) return;
+      setPosition(raw);
+    } else {
+      const usable = rect.height;
+      if (!Number.isFinite(usable) || usable <= 0) return; // no jump on init
+      const raw = (clientY - rect.top) / usable;
+      if (!Number.isFinite(raw)) return;
+      setPosition(raw);
+    }
+  };
+
+  // stable global listeners: only act while draggingRef.current === true
+  useEffect(() => {
+    const onMove = (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
+      updateFromClient(e.clientX, e.clientY);
+    };
+
+    const stop = (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
+      draggingRef.current = false;
+      pointerIdRef.current = null;
+    };
+
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerup", stop, { passive: true });
+    window.addEventListener("pointercancel", stop, { passive: true });
+
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", stop);
+      window.removeEventListener("pointercancel", stop);
+    };
+  }, [internalMode]); // updateFromClient uses internalMode
+
+  const onPointerDown = (e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
+
+    draggingRef.current = true;
+    pointerIdRef.current = e.pointerId;
+
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {}
+
+    updateFromClient(e.clientX, e.clientY); // first update only if rect is sane
+  };
+
+  const onKeyDown = (e) => {
+    const step = 0.02;
+    let delta = 0;
+
+    if (internalMode === "horizontal") {
+      if (e.key === "ArrowLeft") delta = -step;
+      if (e.key === "ArrowRight") delta = step;
+    } else {
+      if (e.key === "ArrowUp") delta = -step;
+      if (e.key === "ArrowDown") delta = step;
+    }
+
+    if (delta !== 0) {
+      e.preventDefault();
+      setPosition(posResolved + delta);
+    }
+  };
+
+  const sizes = useMemo(() => {
+    const leftPct = `${posResolved * 100}%`;
+    const rightCalc = `calc(${100 - posResolved * 100}% - ${splitterSize}px)`;
+    return { leftPct, rightCalc };
+  }, [posResolved, splitterSize]);
+
+  const rootStyle = {
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    touchAction: "none",
+    ...(style || {}),
+    flexDirection: internalMode === "horizontal" ? "row" : "column",
+  };
+
+  const leftPaneComputed =
+    internalMode === "horizontal"
+      ? { width: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...(leftPaneStyle || {}) }
+      : { height: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...(leftPaneStyle || {}) };
+
+  const rightPaneComputed =
+    internalMode === "horizontal"
+      ? { width: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...(rightPaneStyle || {}) }
+      : { height: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...(rightPaneStyle || {}) };
+
+  const splitterComputed =
+    internalMode === "horizontal"
+      ? { width: `${splitterSize}px`, transform: "translateX(-50%)", height: '100%', flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "col-resize", ...(splitterStyle || {}) }
+      : { height: `${splitterSize}px`, transform: "translateY(-50%)", width: '100%', flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "row-resize", ...(splitterStyle || {}) };
+
+  const dividerVisualStyle =
+    internalMode === "horizontal"
+      ? { height: "100%", width: "100%" }
+      : { width: "100%", height: "100%" };
+
+  useImperativeHandle(ref, () => ({
+    setPosition,
+    setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
+    getPosition: () => posResolved,
+    getMode: () => internalMode,
+  }));
+
+  return (
+    <div ref={containerRef} className={className} style={rootStyle}>
+      <div style={leftPaneComputed}>{leftChild}</div>
+
+      <div
+        role="separator"
+        aria-orientation={internalMode === "horizontal" ? "vertical" : "horizontal"}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={posResolved}
+        tabIndex={0}
+        onPointerDown={onPointerDown}
+        onPointerCancel={() => {
+          draggingRef.current = false;
+          pointerIdRef.current = null;
+        }}
+        onKeyDown={onKeyDown}
+        style={splitterComputed}
+      >
+        <div style={dividerVisualStyle} />
+      </div>
+
+      <div style={rightPaneComputed}>{rightChild}</div>
+    </div>
+  );
+});
+
+

package/src/lilact.jsx

@@ -63,7 +63,6 @@ import * as misc from './misc.jsx';
 import * as errors from './errors.jsx';
 import * as router from './router.jsx';
 import * as accessories from './accessories.jsx';
-import {SplitPane} from './pane.jsx';
 import {transpileJSX, transpilerConfig} from "./jsx";
 
 
@@ -80,7 +79,6 @@ export * from './misc.jsx';
 export * from './errors.jsx';
 export * from './router.jsx';
 export * from './accessories.jsx';
-export {SplitPane} from './pane.jsx';
 export {transpileJSX, transpilerConfig} from "./jsx";
 
 
@@ -117,8 +115,6 @@ export const Lilact =
 	...router,
 	...accessories,
 
-	SplitPane,
-
 	transpileJSX,
 	transpilerConfig,
 

package/typedoc.json

@@ -11,7 +11,6 @@
     ".tmp/accessories.js",
     ".tmp/components.js",
     ".tmp/errors.js",
-    ".tmp/pane.js",
     // ".tmp/events.js",
     ".tmp/hooks.js",
     ".tmp/misc.js",

package/docs/modules/pane.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>pane | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">pane</a></li></ul><h1>Module pane</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Variables</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="splitpane"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="../variables/pane.SplitPane.html">SplitPane</a><a href="#splitpane" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Variables</summary><div><a href="#splitpane"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>Split<wbr/>Pane</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/src/pane.jsx

@@ -1,270 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, useImperativeHandle } from "./hooks.jsx";
-import { Children, forwardRef } from "./misc.jsx";
-
-
-const clamp = (n, min, max) => {
-  if (!Number.isFinite(n)) return n;
-  return Math.min(max, Math.max(min, n));
-};
-
-/**
- * A split-pane container with a draggable splitter, supporting both horizontal and vertical layouts.
- *
- * The pane can be either:
- * - **Controlled** via the `position` prop (number between `min` and `max`), or
- * - **Uncontrolled** via `defaultPosition` (used as the initial position).
- *
- * Layout behavior:
- * - `mode="horizontal"`: the `position` controls the width of the **left** pane.
- * - `mode="vertical"`: the `position` controls the height of the **top** pane.
- *
- * Ref API:
- * - Exposes imperative methods on `ref.current`:
- *   - `getMode()` to get the current mode
- *   - `setMode(mode)` to switch between `"horizontal"` and `"vertical"`
- *   - `getPosition()` to get the current splitter position
- *   - `setPosition(position)` to update the splitter position
- *
- * Events:
- * - Calls `onSizeChange(position)` whenever the pane size/position changes (e.g., via dragging).
- *
- * Rendering:
- * - Renders `children` into two separate containers (no portals).
- *
- * @param mode - Split direction: `"horizontal"` or `"vertical"`. Defaults to `"horizontal"`.
- * @param position - Controlled splitter position. Normalized value within `[min, max]`.
- * If provided, the component uses this value instead of internal state.
- * @param defaultPosition - Initial splitter position for uncontrolled usage. Defaults to `0.5`.
- * @param min - Minimum allowed position. Defaults to `0.1`.
- * @param max - Maximum allowed position. Defaults to `0.9`.
- * @param splitterSize - Thickness of the draggable splitter in pixels. Defaults to `8`.
- * @param onSizeChange - Callback invoked when the position changes. Receives the new normalized position.
- * @param style - Optional root container styles.
- * @param className - Optional root container CSS class.
- * @param leftPaneStyle - Optional styles applied to the left pane (or top pane in vertical mode).
- * @param rightPaneStyle - Optional styles applied to the right pane (or bottom pane in vertical mode).
- * @param splitterStyle - Optional styles applied to the splitter element.
- * @param children - React children to be rendered into the two pane containers.
- *
- * @example
- * ```tsx
- * const ref = useRef<SplitPaneHandle>(null);
- *
- * <SplitPane
- *   ref={ref}
- *   mode="horizontal"
- *   defaultPosition={0.5}
- *   min={0.1}
- *   max={0.9}
- *   onSizeChange={(pos) => console.log(pos)}
- * >
- *   <div /> <div />
- * </SplitPane>
- * ```
- */
-export const SplitPane = forwardRef(function SplitPane(
-  {
-    mode = "horizontal",
-    position, // controlled: number | undefined/null
-    defaultPosition = 0.5,
-    min = 0.1,
-    max = 0.9,
-    splitterSize = 8,
-    onSizeChange,
-    style,
-    className,
-    leftPaneStyle,
-    rightPaneStyle,
-    splitterStyle,
-    children,
-  },
-  ref
-) {
-  const containerRef = useRef(null);
-  const panes = Children.toArray(children);
-  const leftChild = panes[0] ?? null;
-  const rightChild = panes[1] ?? null;
-
-  const isControlled = position != null;
-
-  const [internalMode, setInternalMode] = useState(mode);
-
-  const [posUncontrolled, setPosUncontrolled] = useState(() =>
-    clamp(
-      position ?? defaultPosition,
-      min,
-      max
-    )
-  );
-
-  useEffect(() => {
-    if (mode != null) setInternalMode(mode);
-  }, [mode]);
-
-  // keep internal position clamped if min/max change (uncontrolled only)
-  useLayoutEffect(() => {
-    if (isControlled) return;
-    setPosUncontrolled((p) => clamp(p, min, max));
-  }, [min, max, isControlled]);
-
-  const posResolved = isControlled ? clamp(position, min, max) : posUncontrolled;
-
-  const setPosition = (next) => {
-    const clamped = clamp(next, min, max);
-    if (!isControlled) setPosUncontrolled(clamped);
-    onSizeChange?.(clamped);
-  };
-
-  const draggingRef = useRef(false);
-  const pointerIdRef = useRef(null);
-
-  const updateFromClient = (clientX, clientY) => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-
-    if (internalMode === "horizontal") {
-      const usable = rect.width;
-      if (!Number.isFinite(usable) || usable <= 0) return; // no jump on init
-      const raw = (clientX - rect.left) / usable;
-      if (!Number.isFinite(raw)) return;
-      setPosition(raw);
-    } else {
-      const usable = rect.height;
-      if (!Number.isFinite(usable) || usable <= 0) return; // no jump on init
-      const raw = (clientY - rect.top) / usable;
-      if (!Number.isFinite(raw)) return;
-      setPosition(raw);
-    }
-  };
-
-  // stable global listeners: only act while draggingRef.current === true
-  useEffect(() => {
-    const onMove = (e) => {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
-      updateFromClient(e.clientX, e.clientY);
-    };
-
-    const stop = (e) => {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
-      draggingRef.current = false;
-      pointerIdRef.current = null;
-    };
-
-    window.addEventListener("pointermove", onMove, { passive: true });
-    window.addEventListener("pointerup", stop, { passive: true });
-    window.addEventListener("pointercancel", stop, { passive: true });
-
-    return () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", stop);
-      window.removeEventListener("pointercancel", stop);
-    };
-  }, [internalMode]); // updateFromClient uses internalMode
-
-  const onPointerDown = (e) => {
-    if (e.button != null && e.button !== 0) return;
-    e.preventDefault();
-
-    draggingRef.current = true;
-    pointerIdRef.current = e.pointerId;
-
-    try {
-      e.currentTarget.setPointerCapture?.(e.pointerId);
-    } catch {}
-
-    updateFromClient(e.clientX, e.clientY); // first update only if rect is sane
-  };
-
-  const onKeyDown = (e) => {
-    const step = 0.02;
-    let delta = 0;
-
-    if (internalMode === "horizontal") {
-      if (e.key === "ArrowLeft") delta = -step;
-      if (e.key === "ArrowRight") delta = step;
-    } else {
-      if (e.key === "ArrowUp") delta = -step;
-      if (e.key === "ArrowDown") delta = step;
-    }
-
-    if (delta !== 0) {
-      e.preventDefault();
-      setPosition(posResolved + delta);
-    }
-  };
-
-  const sizes = useMemo(() => {
-    const leftPct = `${posResolved * 100}%`;
-    const rightCalc = `calc(${100 - posResolved * 100}% - ${splitterSize}px)`;
-    return { leftPct, rightCalc };
-  }, [posResolved, splitterSize]);
-
-  const rootStyle = {
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    touchAction: "none",
-    ...(style || {}),
-    flexDirection: internalMode === "horizontal" ? "row" : "column",
-  };
-
-  const leftPaneComputed =
-    internalMode === "horizontal"
-      ? { width: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...(leftPaneStyle || {}) }
-      : { height: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...(leftPaneStyle || {}) };
-
-  const rightPaneComputed =
-    internalMode === "horizontal"
-      ? { width: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...(rightPaneStyle || {}) }
-      : { height: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...(rightPaneStyle || {}) };
-
-  const splitterComputed =
-    internalMode === "horizontal"
-      ? { width: `${splitterSize}px`, transform: "translateX(-50%)", height: '100%', flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "col-resize", ...(splitterStyle || {}) }
-      : { height: `${splitterSize}px`, transform: "translateY(-50%)", width: '100%', flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "row-resize", ...(splitterStyle || {}) };
-
-  const dividerVisualStyle =
-    internalMode === "horizontal"
-      ? { height: "100%", width: "100%" }
-      : { width: "100%", height: "100%" };
-
-  useImperativeHandle(ref, () => ({
-    setPosition,
-    setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
-    getPosition: () => posResolved,
-    getMode: () => internalMode,
-  }));
-
-  return (
-    <div ref={containerRef} className={className} style={rootStyle}>
-      <div style={leftPaneComputed}>{leftChild}</div>
-
-      <div
-        role="separator"
-        aria-orientation={internalMode === "horizontal" ? "vertical" : "horizontal"}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={posResolved}
-        tabIndex={0}
-        onPointerDown={onPointerDown}
-        onPointerCancel={() => {
-          draggingRef.current = false;
-          pointerIdRef.current = null;
-        }}
-        onKeyDown={onKeyDown}
-        style={splitterComputed}
-      >
-        <div style={dividerVisualStyle} />
-      </div>
-
-      <div style={rightPaneComputed}>{rightChild}</div>
-    </div>
-  );
-});
-
-