lilact 0.11.5 → 0.13.1

package/src/accessories.jsx

@@ -28,9 +28,17 @@
 
 */
 
+
+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 {useCallback} from './hooks.jsx'
+import {emotion} from "./lilact.jsx"
+const {css,cx} = emotion;
 
 /**
  * A CSS-only loading spinner component.
@@ -284,3 +292,386 @@ export class Suspense extends Component
 	}
 }
 
+/**
+ * DragHandle - helper component to wire up drag interactions.
+ *
+ * This component does not implement dragging/movement itself. Instead, it listens
+ * for drag gesture updates and delegates them to the provided callbacks.
+ *
+ * @param onDelta - Called when the drag position changes. Receives the delta as
+ * `{ x, y, data }`.
+ * @param onStart - Called when the drag begins. Receives the provided `data`.
+ * @param onEnd - Called when the drag finishes or is cancelled.
+ * Receives `(event, data)` where `event` is either `"up"` (completed) or `"cancel"`.
+ * @param data - Arbitrary user data passed back to callbacks.
+ * @param style - Optional style applied to the rendered wrapper.
+ * @param className - Optional CSS class applied to the rendered wrapper.
+ * @param children - Content to render inside the drag handle.
+ */
+export function DragHandle({
+	onDelta,
+	onStart,
+	onEnd,
+	style,
+	className,
+	children,
+	data
+}) {
+	const activePointerIdRef = useRef(null);
+	const startClientXRef = useRef(0);
+	const startClientYRef = useRef(0);
+	const lastClientXRef = useRef(0);
+	const lastClientYRef = useRef(0);
+	const draggingRef = useRef(false);
+
+	const [isDragging, setIsDragging] = useState(false);
+
+	const resetDrag = useCallback(() => {
+		activePointerIdRef.current = null;
+		draggingRef.current = false;
+		startClientXRef.current = 0;
+		startClientYRef.current = 0;
+		lastClientXRef.current = 0;
+		lastClientYRef.current = 0;
+		setIsDragging(false);
+	}, []);
+
+	const computeDeltaFromStart = useCallback((clientX, clientY) => {
+		const dx = clientX - startClientXRef.current;
+		const dy = clientY - startClientYRef.current;
+		return { dx, dy };
+	}, []);
+
+	const endDrag = useCallback((reason = "up") => {
+		if (!draggingRef.current) return;
+		onEnd?.(reason);
+		resetDrag();
+	}, [onEnd, resetDrag]);
+
+	const onPointerDown = useCallback((e) => {
+		// todo: only left mouse / primary touch, should other buttons be supported too? 
+		if (e.button != null && e.button !== 0) return;
+
+		draggingRef.current = true;
+		activePointerIdRef.current = e.pointerId;
+
+		startClientXRef.current = e.clientX;
+		startClientYRef.current = e.clientY;
+		lastClientXRef.current = e.clientX;
+		lastClientYRef.current = e.clientY;
+
+		setIsDragging(true);
+		onStart?.(data);
+
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {
+			// ignore if unsupported
+		}
+	}, [onStart]);
+
+	const onPointerMove = useCallback((e) => {
+		if (!draggingRef.current) return;
+		if (activePointerIdRef.current !== e.pointerId) return;
+
+		const { dx, dy } = computeDeltaFromStart(e.clientX, e.clientY);
+		onDelta?.(dx, dy, data);
+
+		lastClientXRef.current = e.clientX;
+		lastClientYRef.current = e.clientY;
+	}, [computeDeltaFromStart, onDelta]);
+
+	const onPointerUp = useCallback((e) => {
+		if (activePointerIdRef.current !== e.pointerId) return;
+		endDrag("up", data);
+	}, [endDrag]);
+
+	const onPointerCancel = useCallback((e) => {
+		if (activePointerIdRef.current !== e.pointerId) return;
+		endDrag("cancel", data);
+	}, [endDrag]);
+
+	return (
+		<div
+			role="button"
+			tabIndex={0}
+			style={{ ...style, touchAction: "none" }}
+			className={cx(className, isDragging?"dragging":"")}
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+			onPointerUp={onPointerUp}
+			onPointerCancel={onPointerCancel}
+		>
+			{children}
+		</div>
+	);
+}
+
+
+
+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/components.jsx

@@ -195,11 +195,22 @@ class ComponentCore
 
 
 			if(next_props.ref) {
-				if(this.element) {
-					next_props.ref.current = this.element;
+				if(typeof(next_props.ref)==='function') {
+					if(this.element) {
+						next_props.ref(this.element);
+					}
+					else {
+						next_props.ref(this.component);
+					}
+
 				}
 				else {
-					next_props.ref.current = this.component;
+					if(this.element) {
+						next_props.ref.current = this.element;
+					}
+					else {
+						next_props.ref.current = this.component;
+					}		
 				}
 			}
 
@@ -311,7 +322,16 @@ class ComponentCore
 	{
 		try {
 			const promises = [];
-	
+			
+			if(this.props?.ref) {
+				if(typeof(this.props.ref)==='function') {
+					this.props.ref(null);
+				}
+				else {
+					this.props.current = null;
+				}
+			}
+
 			if(this.component.componentWillUnmount) {
 				this.component.componentWillUnmount();
 			}

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 {ResizablePane} 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 {ResizablePane} from './pane.jsx';
 export {transpileJSX, transpilerConfig} from "./jsx";
 
 
@@ -94,7 +92,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.11",
+	VERSION: "beta.13",
 	
 	// Configuration
 
@@ -117,8 +115,6 @@ export const Lilact =
 	...router,
 	...accessories,
 
-	ResizablePane,
-
 	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="resizablepane"><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.ResizablePane.html">ResizablePane</a><a href="#resizablepane" 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="#resizablepane"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>Resizable<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>