lilact 0.13.0 → 0.14.0

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;
 
@@ -290,19 +295,27 @@ 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.
+ * This component does not implement dragging/movement itself. Instead, it
+ * listens for drag gesture events and delegates them to the provided callbacks.
+ *
+ * @param {object} props
+ * @param {(x: number, y: number, data: any) => void} [props.onDelta]
+ * Called when the drag position changes.
+ *
+ * @param {(data: any) => void} [props.onStart]
+ * Called when the drag begins.
  *
- * @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.
+ * @param {(event: ("up"|"cancel"), data: any) => void} [props.onEnd]
+ * Called when the drag ends or is cancelled.
+ *
+ * @param {any} [props.data] Arbitrary user data passed through callbacks.
+ * @param {object} [props.style] Optional style applied to the wrapper element.
+ * @param {string} [props.className] Optional CSS class applied to the wrapper element. 
+ * A `.dragging` class will be also applied when dragging.
+ * 
+ * @param {React.ReactNode} [props.children] Content rendered inside the handle.
  */
+
 export function DragHandle({
 	onDelta,
 	onStart,
@@ -402,3 +415,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/components.jsx

@@ -426,6 +426,13 @@ class ComponentCore
 					this.event_detachers[al]?.();
 					this.event_detachers[al] = Lilact.addWrappedEventListener(this.element, al.substring(2), patch[a]);
 				}
+				else if( Lilact.capture_events_set.hasOwnProperty(al) ) {
+					const alc = Lilact.capture_events_set[al];
+					this.event_detachers ??= {};
+					this.event_detachers[al]?.();
+					this.event_detachers[al] = 
+						Lilact.addWrappedEventListener(this.element, alc.substring(2), patch[a], {capture: true});
+				}
 				else if(al==='style') {
 					for(const x in patch[a]) {
 						if( Lilact.length_css_attributes_set.has(x) ) {

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";
 
 
@@ -94,7 +92,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.13",
+	VERSION: "beta.14",
 	
 	// Configuration
 
@@ -117,8 +115,6 @@ export const Lilact =
 	...router,
 	...accessories,
 
-	SplitPane,
-
 	transpileJSX,
 	transpilerConfig,
 

package/src/misc.jsx

@@ -380,11 +380,16 @@ export const events_set = new Set([
 	"onloadeddata","onloadedmetadata","onloadstart","onpause","onplay","onplaying","onprogress","onratechange",
 	"onseeked","onseeking","onstalled","onsuspend","ontimeupdate","onvolumechange","onwaiting",
 	"ontoggle",
-
 	"onpointerdown", "onpointerup", "onpointermove", "onpointercancel", "onpointerover", "onpointerout", 
 	"onpointerenter", "onpointerleave"
 ]);
 
+/** @ignore */
+export const capture_events_set = {};
+for (const x of events_set) {
+  capture_events_set[x+"capture"] = x;
+}
+
 /** @ignore */
 export const length_css_attributes_set = new Set([
 	"width","height","minWidth","minHeight","maxWidth","maxHeight","top","right","bottom","left","margin",

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>