lilact 0.2.1 → 0.2.2

package/src/components.jsx

@@ -401,6 +401,9 @@ class ComponentCore
 					this.event_detachers[al] = Lilact.addWrappedEventListener(this.element, al.substring(2), patch[a]);
 				}
 				else if(al==='style') {
+					for(const x in patch[a]) {
+						if(isFinite(patch[a][x])) patch[a][x]+='px';
+					}
 					Object.assign(this.element.style, patch[a]);
 				}
 				else {
@@ -418,7 +421,7 @@ class ComponentCore
 		}
 
 ʔ if(DEBUG) {
-		this.element.setAttribute('key', this.props.key);
+		//this.element.setAttribute('key', this.props.key);
 ʔ }		
 
 		this.updateElementClass(patch);

package/src/hooks.jsx

@@ -207,7 +207,7 @@ export function useTransition()
  * @param {any} initialValue - Initial value used if nothing exists in localStorage.
  * @returns {any} Stored state/result.
  */
-export function useLocalStorage(key, default_val)
+export function useLocalStorage(key, initialValue)
 {
 
 	const hk = Lilact.useHook();
@@ -220,8 +220,8 @@ export function useLocalStorage(key, default_val)
 	}
 
 	if(val===undefined) {
-		if(typeof(default_val)==='function') default_val = default_val();
-		val = default_val;
+		if(typeof(initialValue)==='function') initialValue = initialValue();
+		val = initialValue;
 		localStorage[key] = JSON.stringify(val);
 	}
 
@@ -251,12 +251,12 @@ export function useLocalStorage(key, default_val)
  * @param {any} initialValue - Initial ref value.
  * @returns {Object} Ref object with `.current`.
  */
-export function useRef(val = null)
+export function useRef(initialValue = null)
 {
 	const hk = Lilact.useHook();
 
 	if( Lilact.isEmpty(hk) ) {
-		hk.current = val;
+		hk.current = initialValue;
 	}
 
 	return hk;
@@ -269,7 +269,7 @@ export function useRef(val = null)
  * @param {Array<any>} [deps] - Dependency list.
  * @returns {void}
  */
-export function useLayoutEffect(setup, deps=undefined)
+export function useLayoutEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "layout effect dependencies must be an array or omitted.";
@@ -286,7 +286,7 @@ export function useLayoutEffect(setup, deps=undefined)
 	}
 
 	hk.deps = deps;
-	Lilact.layout_effects.add( ()=>{ hk.cleanup = setup(); });
+	Lilact.layout_effects.add( ()=>{ hk.cleanup = effect(); });
 	Lilact.current_component[0].component.forceUpdate();
 }
 
@@ -297,7 +297,7 @@ export function useLayoutEffect(setup, deps=undefined)
  * @param {Array<any>} [deps] - Dependency list.
  * @returns {void}
  */
-export function useEffect(setup, deps=[{}])
+export function useEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "effect dependencies must be an array or omitted.";
@@ -314,7 +314,7 @@ export function useEffect(setup, deps=[{}])
 	}
 
 	hk.deps = deps;
-	Lilact.setTimeout( ()=>{ hk.cleanup = setup(); }, 0 );
+	Lilact.setTimeout( ()=>{ hk.cleanup = effect(); }, 0 );
 
 }
 
@@ -325,7 +325,7 @@ export function useEffect(setup, deps=[{}])
  * @param {Array<any>} deps - Dependency list.
  * @returns {any} Memoized value.
  */
-export function useMemo(fn,deps=undefined)
+export function useMemo(factory,deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "memo dependencies must be an array or omitted.";
@@ -338,7 +338,7 @@ export function useMemo(fn,deps=undefined)
 	}
 
 	hk.deps = deps;
-	hk.value = fn(hk.value);
+	hk.value = factory(hk.value);
 
 	return hk.value;
 }
@@ -350,14 +350,14 @@ export function useMemo(fn,deps=undefined)
  * @param {any} initialState - Initial state for the hook.
  * @returns {any} Hook result
  */
-export function useActionState(fn, initial_state)
+export function useActionState(fn, initialState)
 {
 	const hk = Lilact.useHook();
 	const [is_pending, tran_start_func] = Lilact.useTransition();
 
 	if( Lilact.isEmpty(hk) ) {
 
-		hk.state = initial_state;
+		hk.state = initialState;
 
 		hk.form_action = (sub)=>{
 			event.preventDefault();
@@ -486,7 +486,7 @@ export function forwardRef(render)
  *   Dependency list that controls when the exposed value is recalculated.
  * @returns {void}
  */
-export function useImperativeHandle(ref, factory, deps)
+export function useImperativeHandle(ref, factory, deps=undefined)
 {
 	if(deps!==undefined && ref?.deps!==undefined && Lilact.shallowEqual(deps, ref.deps)) return;
 
@@ -497,6 +497,6 @@ export function useImperativeHandle(ref, factory, deps)
 			ref.current = {};
 		}
 		Object.assign( ref.current, factory(), 0 );	
-	});
+	}, 0);
 }
 

package/src/misc.jsx

@@ -414,6 +414,18 @@ export let events_set = new Set([
 	"onabort","oncanplay","oncanplaythrough","oncuechange","ondurationchange","onemptied","onended","onerror",
 	"onloadeddata","onloadedmetadata","onloadstart","onpause","onplay","onplaying","onprogress","onratechange",
 	"onseeked","onseeking","onstalled","onsuspend","ontimeupdate","onvolumechange","onwaiting",
-	"ontoggle"
+	"ontoggle",
+
+	"onpointerdown", "onpointerup", "onpointermove", "onpointercancel", "onpointerover", "onpointerout", 
+	"onpointerenter", "onpointerleave"
+])
+/** @ignore */
+export let length_css_attributes_set = new Set([
+	"width","height","minWidth","minHeight","maxWidth","maxHeight","top","right","bottom","left","margin",
+	"marginTop","marginRight","marginBottom","marginLeft","padding","paddingTop","paddingRight","paddingBottom",
+	"paddingLeft","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth",
+	"outlineWidth","fontSize","lineHeight","letterSpacing","wordSpacing","textIndent","borderRadius",
+	"borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius",
+	"columnGap","rowGap","gap"
 ])
 

package/src/pane.jsx

@@ -1,9 +1,11 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "./hooks.jsx";
 import { Children } from "./misc.jsx";
 
-function clamp(n, min, max) {
-	return Math.max(min, Math.min(max, n));
-}
+
+const clamp = (n, min, max) => {
+  if (!Number.isFinite(n)) return n;
+  return Math.min(max, Math.max(min, n));
+};
 
 /**
  * ResizablePane
@@ -17,271 +19,207 @@ function clamp(n, min, max) {
  * - Callback when size changes via onSizeChange
  * - Children are rendered in two separate containers (no portals)
  */
-export const ResizablePane = forwardRef(function Pane(
-	{
-		mode = "horizontal", // "horizontal" | "vertical"
-		initialPosition, // optional (alias-ish to position)
-		position, // controlled position (number)
-		defaultPosition = 0.5, // used if position/initialPosition not provided
-		min = 0.1, // clamp in "percent of container" units: 0..1
-		max = 0.9, // clamp in "percent of container" units: 0..1
-		splitterSize = 8, // px thickness of the drag handle
-		onSizeChange, // (newPosition: number) => void
-		style,
-		className,
-		leftPaneStyle,
-		rightPaneStyle,
-		splitterStyle,
-		children, // expects two children: [A, B]
-	},
-	ref
+export const ResizablePane = forwardRef(function ResizablePane(
+  {
+    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 [internalMode, setInternalMode] = useState(mode);
-	const [pos, setPos] = useState(() => {
-		const start =
-			position ?? initialPosition ?? (defaultPosition != null ? defaultPosition : 0.5);
-		return clamp(start, min, max);
-	});
-
-	const containerRef = useRef(null);
-	const draggingRef = useRef(false);
-
-	const panes = Children.toArray(children);
-	const leftChild = panes[0] ?? null;
-	const rightChild = panes[1] ?? null;
-
-	const modeResolved = mode != null ? mode : internalMode;
-
-	// Keep internalMode aligned if mode is provided as a prop
-	useEffect(() => {
-		if (mode != null) setInternalMode(mode);
-	}, [mode]);
-
-	// Controlled position: update state when prop changes
-	useEffect(() => {
-		if (position == null) return;
-		setPos(clamp(position, min, max));
-	}, [position, min, max]);
-
-	const setPosition = (newPos) => {
-		const next = clamp(newPos, min, max);
-		if (position == null) setPos(next); // only update internal state if uncontrolled
-		onSizeChange?.(next);
-	};
-
-	const setMode = (nextMode) => {
-		const m = nextMode === "vertical" ? "vertical" : "horizontal";
-		if (mode == null) setInternalMode(m);
-		// If mode is controlled via prop, consumer should re-render with new prop.
-	};
-
-	useImperativeHandle(
-		ref,
-		() => ({
-			setPosition,
-			setMode,
-			getPosition: () => (position == null ? pos : clamp(position, min, max)),
-			getMode: () => modeResolved,
-		}),
-		[pos, position, min, max, modeResolved, onSizeChange, mode]
-	);
-
-	const updateFromClientXorY = (clientX, clientY) => {
-		const el = containerRef.current;
-		if (!el) return;
-
-		const rect = el.getBoundingClientRect();
-		let next;
-
-		if (modeResolved === "horizontal") {
-			const usable = rect.width;
-			if (usable <= 0) return;
-			next = (clientX - rect.left) / usable;
-		} else {
-			const usable = rect.height;
-			if (usable <= 0) return;
-			next = (clientY - rect.top) / usable;
-		}
-		setPosition(next);
-	};
-
-	const onPointerDown = (e) => {
-		e.preventDefault();
-		draggingRef.current = true;
-
-		// Capture pointer so we still get events outside the handle area.
-		try {
-			e.currentTarget.setPointerCapture?.(e.pointerId);
-		} catch {
-			// ignore
-		}
-
-		updateFromClientXorY(e.clientX, e.clientY);
-	};
-
-	const onPointerMove = (e) => {
-		if (!draggingRef.current) return;
-		updateFromClientXorY(e.clientX, e.clientY);
-	};
-
-	const stopDragging = () => {
-		draggingRef.current = false;
-	};
-
-	// Attach global listeners to ensure smooth dragging even if pointer capture fails
-	useEffect(() => {
-		const handleMove = (e) => {
-			if (!draggingRef.current) return;
-			updateFromClientXorY(e.clientX, e.clientY);
-		};
-		const handleUp = () => stopDragging();
-
-		window.addEventListener("pointermove", handleMove, { passive: false });
-		window.addEventListener("pointerup", handleUp, { passive: true });
-		window.addEventListener("pointercancel", handleUp, { passive: true });
-
-		return () => {
-			window.removeEventListener("pointermove", handleMove);
-			window.removeEventListener("pointerup", handleUp);
-			window.removeEventListener("pointercancel", handleUp);
-		};
-	}, [modeResolved, min, max, position, onSizeChange]);
-
-	const posResolved = position == null ? pos : clamp(position, min, max);
-
-	const sizes = useMemo(() => {
-		if (modeResolved === "horizontal") {
-			// left width = pos, splitter width = splitterSize, right flexes
-			// We set left/right as percentages and keep splitter fixed in px.
-			return {
-				left: `${posResolved * 100}%`,
-				right: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
-			};
-		}
-		return {
-			left: `${posResolved * 100}%`,
-			right: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
-		};
-	}, [modeResolved, posResolved, splitterSize]);
-
-	// Improve keyboard accessibility (arrow keys when handle is focused)
-	const onSplitterKeyDown = (e) => {
-		const step = 0.02;
-		let delta = 0;
-		if (modeResolved === "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);
-		}
-	};
-
-	// Ensure position clamps correctly if min/max change
-	useLayoutEffect(() => {
-		setPos((p) => clamp(p, min, max));
-	}, [min, max]);
-
-	const rootStyle = {
-		display: "flex",
-		width: "100%",
-		height: "100%",
-		overflow: "hidden",
-		touchAction: "none",
-		...(style || {}),
-		flexDirection: modeResolved === "horizontal" ? "row" : "column",
-	};
-
-	const leftPaneComputed =
-		modeResolved === "horizontal"
-			? {
-					width: sizes.left,
-					flex: `0 0 ${sizes.left}`,
-					overflow: "auto",
-					...(leftPaneStyle || {}),
-				}
-			: {
-					height: sizes.left,
-					flex: `0 0 ${sizes.left}`,
-					overflow: "auto",
-					...(leftPaneStyle || {}),
-				};
-
-	const rightPaneComputed =
-		modeResolved === "horizontal"
-			? {
-					width: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
-					flex: `1 1 auto`,
-					overflow: "auto",
-					...(rightPaneStyle || {}),
-				}
-			: {
-					height: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
-					flex: `1 1 auto`,
-					overflow: "auto",
-					...(rightPaneStyle || {}),
-				};
-
-	const splitterComputed =
-		modeResolved === "horizontal"
-			? {
-					width: `${splitterSize}px`,
-					flex: `0 0 ${splitterSize}px`,
-					cursor: "col-resize",
-					background: "transparent",
-					...(splitterStyle || {}),
-				}
-			: {
-					height: `${splitterSize}px`,
-					flex: `0 0 ${splitterSize}px`,
-					cursor: "row-resize",
-					background: "transparent",
-					...(splitterStyle || {}),
-				};
-
-	const dividerVisualStyle =
-		modeResolved === "horizontal"
-			? {
-					height: "100%",
-					width: "100%",
-					background: "rgba(0,0,0,0.08)",
-				}
-			: {
-					width: "100%",
-					height: "100%",
-					background: "rgba(0,0,0,0.08)",
-				};
-
-	return (
-		<div
-			ref={containerRef}
-			className={className}
-			style={rootStyle}
-			onPointerMove={onPointerMove}
-		>
-			<div style={leftPaneComputed}>{leftChild}</div>
-
-			<div
-				role="separator"
-				aria-orientation={modeResolved === "horizontal" ? "vertical" : "horizontal"}
-				aria-valuemin={min}
-				aria-valuemax={max}
-				aria-valuenow={posResolved}
-				tabIndex={0}
-				onPointerDown={onPointerDown}
-				onPointerUp={stopDragging}
-				onPointerCancel={stopDragging}
-				onKeyDown={onSplitterKeyDown}
-				style={splitterComputed}
-			>
-				<div style={dividerVisualStyle} />
-			</div>
-
-			<div style={rightPaneComputed}>{rightChild}</div>
-		</div>
-	);
+  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`, height: '100%', flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "col-resize", ...(splitterStyle || {}) }
+      : { height: `${splitterSize}px`, 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/webpack.config.js

@@ -56,7 +56,7 @@ export default (env, argv) => {
 		optimization: {
 		    concatenateModules: true,      // scope hoisting
 		    moduleIds: 'deterministic',   // smaller stable ids (or 'hashed')
-			minimize: mode === 'production',
+			minimize: false, //mode === 'production',
 		},
 		experiments: {    
 			outputModule: true           // enable module output