lilact 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A Little JSX/React Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",

package/root/demos/pane.jsx

@@ -0,0 +1,31 @@
+const { useRef, useState, ResizablePane } = Lilact;
+
+module.exports = function Demo() {
+  const ref = useRef(null);
+  const [mode, setMode] = useState("horizontal");
+  const [position, setPosition] = useState(0.35);
+
+  return (
+    <>
+      <button onClick={() => ref.current?.setMode(ref.current?.getMode() === "horizontal" ? "vertical" : "horizontal")}>
+        Toggle mode
+      </button>
+      <button onClick={() => ref.current?.setPosition(0.5)}>Center</button>
+
+      <div  style={{ height: "calc(100% - 2em)", width: "100% - 2em", border: "1px solid" }}>
+        <ResizablePane
+          ref={ref}
+          mode={mode}
+          position={position}
+          min={0.2}
+          max={0.8}
+          splitterSize={10}
+          onSizeChange={(p) => setPosition(p)}
+        >
+          <div style={{ padding: 12 }}>Left/Top</div>
+          <div style={{ padding: 12 }}>Right/Bottom</div>
+        </ResizablePane>
+      </div>
+    </>
+  );
+}

package/root/index.html

@@ -160,6 +160,7 @@ function App()
 {
 	const demos =[	
 		['stopwatch.jsx',				'( useState, useRef )'],
+		['pane.jsx',						'( useRef, useState, ResizablePane )'],
 		['modal.jsx',						'( useEffect, useRef, useState )'],
 		['actionstate.jsx',			'( useActionState, useState )'],
 		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],

package/root/lilact.development.min.js

@@ -1418,6 +1418,7 @@ __webpack_require__.d(misc_namespaceObject, {
   isThenable: () => (isThenable),
   isValidElement: () => (isValidElement),
   layout_effects: () => (layout_effects),
+  length_css_attributes_set: () => (length_css_attributes_set),
   mapLocation: () => (mapLocation),
   roots: () => (roots),
   scanFunctionLabels: () => (scanFunctionLabels),
@@ -4628,7 +4629,19 @@ 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 */
+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"
 ])
 
 
@@ -5036,6 +5049,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 {
@@ -5052,7 +5068,7 @@ class ComponentCore
 			this.element.onsubmit = undefined;
 		}
 
-		this.element.setAttribute('key', this.props.key);
+		//this.element.setAttribute('key', this.props.key);
 
 		this.updateElementClass(patch);
 	}
@@ -5910,7 +5926,7 @@ function useTransition()
  * @param {any} initialValue - Initial value used if nothing exists in localStorage.
  * @returns {any} Stored state/result.
  */
-function useLocalStorage(key, default_val)
+function useLocalStorage(key, initialValue)
 {
 
 	const hk = Lilact.useHook();
@@ -5923,8 +5939,8 @@ 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);
 	}
 
@@ -5954,12 +5970,12 @@ function useLocalStorage(key, default_val)
  * @param {any} initialValue - Initial ref value.
  * @returns {Object} Ref object with `.current`.
  */
-function useRef(val = null)
+function useRef(initialValue = null)
 {
 	const hk = Lilact.useHook();
 
 	if( Lilact.isEmpty(hk) ) {
-		hk.current = val;
+		hk.current = initialValue;
 	}
 
 	return hk;
@@ -5972,7 +5988,7 @@ function useRef(val = null)
  * @param {Array<any>} [deps] - Dependency list.
  * @returns {void}
  */
-function useLayoutEffect(setup, deps=undefined)
+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.";
@@ -5989,7 +6005,7 @@ 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();
 }
 
@@ -6000,7 +6016,7 @@ function useLayoutEffect(setup, deps=undefined)
  * @param {Array<any>} [deps] - Dependency list.
  * @returns {void}
  */
-function useEffect(setup, deps=[{}])
+function useEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "effect dependencies must be an array or omitted.";
@@ -6017,7 +6033,7 @@ function useEffect(setup, deps=[{}])
 	}
 
 	hk.deps = deps;
-	Lilact.setTimeout( ()=>{ hk.cleanup = setup(); }, 0 );
+	Lilact.setTimeout( ()=>{ hk.cleanup = effect(); }, 0 );
 
 }
 
@@ -6028,7 +6044,7 @@ function useEffect(setup, deps=[{}])
  * @param {Array<any>} deps - Dependency list.
  * @returns {any} Memoized value.
  */
-function useMemo(fn,deps=undefined)
+function useMemo(factory,deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "memo dependencies must be an array or omitted.";
@@ -6041,7 +6057,7 @@ function useMemo(fn,deps=undefined)
 	}
 
 	hk.deps = deps;
-	hk.value = fn(hk.value);
+	hk.value = factory(hk.value);
 
 	return hk.value;
 }
@@ -6053,14 +6069,14 @@ function useMemo(fn,deps=undefined)
  * @param {any} initialState - Initial state for the hook.
  * @returns {any} Hook result
  */
-function useActionState(fn, initial_state)
+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();
@@ -6189,7 +6205,7 @@ function forwardRef(render)
  *   Dependency list that controls when the exposed value is recalculated.
  * @returns {void}
  */
-function useImperativeHandle(ref, factory, deps)
+function useImperativeHandle(ref, factory, deps=undefined)
 {
 	if(deps!==undefined && ref?.deps!==undefined && Lilact.shallowEqual(deps, ref.deps)) return;
 
@@ -6200,7 +6216,7 @@ function useImperativeHandle(ref, factory, deps)
 			ref.current = {};
 		}
 		Object.assign( ref.current, factory(), 0 );	
-	});
+	}, 0);
 }
 
 
@@ -7716,9 +7732,11 @@ class Suspense extends Component
 
 
 
-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
@@ -7732,248 +7750,190 @@ function clamp(n, min, max) {
  * - Callback when size changes via onSizeChange
  * - Children are rendered in two separate containers (no portals)
  */
-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
+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 panes = Children.toArray(children);
+  const leftChild = panes[0] ?? null;
+  const rightChild = panes[1] ?? null;
 
-	const containerRef = useRef(null);
-	const draggingRef = useRef(false);
+  const isControlled = position != null;
 
-	const panes = Children.toArray(children);
-	const leftChild = panes[0] ?? null;
-	const rightChild = panes[1] ?? null;
+  const [internalMode, setInternalMode] = useState(mode);
 
-	const modeResolved = mode != null ? mode : internalMode;
+  const [posUncontrolled, setPosUncontrolled] = useState(() =>
+    clamp(
+      position ?? defaultPosition,
+      min,
+      max
+    )
+  );
 
-	// Keep internalMode aligned if mode is provided as a prop
-	useEffect(() => {
-		if (mode != null) setInternalMode(mode);
-	}, [mode]);
+  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);
-	};
+  // keep internal position clamped if min/max change (uncontrolled only)
+  useLayoutEffect(() => {
+    if (isControlled) return;
+    setPosUncontrolled((p) => clamp(p, min, max));
+  }, [min, max, isControlled]);
 
-	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.
-	};
+  const posResolved = isControlled ? clamp(position, min, max) : posUncontrolled;
 
-	useImperativeHandle(
-		ref,
-		() => ({
-			setPosition,
-			setMode,
-			getPosition: () => (position == null ? pos : clamp(position, min, max)),
-			getMode: () => modeResolved,
-		}),
-		[pos, position, min, max, modeResolved, onSizeChange, mode]
-	);
+  const setPosition = (next) => {
+    const clamped = clamp(next, min, max);
+    if (!isControlled) setPosUncontrolled(clamped);
+    onSizeChange?.(clamped);
+  };
 
-	const updateFromClientXorY = (clientX, clientY) => {
-		const el = containerRef.current;
-		if (!el) return;
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
 
-		const rect = el.getBoundingClientRect();
-		let next;
+  const updateFromClient = (clientX, clientY) => {
+    const el = containerRef.current;
+    if (!el) return;
 
-		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 rect = el.getBoundingClientRect();
 
-	const onPointerDown = (e) => {
-		e.preventDefault();
-		draggingRef.current = true;
+    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);
+    }
+  };
 
-		// Capture pointer so we still get events outside the handle area.
-		try {
-			e.currentTarget.setPointerCapture?.(e.pointerId);
-		} catch {
-			// ignore
-		}
+  // 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);
+    };
 
-		updateFromClientXorY(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;
+    };
 
-	const onPointerMove = (e) => {
-		if (!draggingRef.current) return;
-		updateFromClientXorY(e.clientX, e.clientY);
-	};
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerup", stop, { passive: true });
+    window.addEventListener("pointercancel", stop, { passive: true });
 
-	const stopDragging = () => {
-		draggingRef.current = false;
-	};
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", stop);
+      window.removeEventListener("pointercancel", stop);
+    };
+  }, [internalMode]); // updateFromClient uses internalMode
 
-	// 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();
+  const onPointerDown = (e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
 
-		window.addEventListener("pointermove", handleMove, { passive: false });
-		window.addEventListener("pointerup", handleUp, { passive: true });
-		window.addEventListener("pointercancel", handleUp, { passive: true });
+    draggingRef.current = true;
+    pointerIdRef.current = e.pointerId;
 
-		return () => {
-			window.removeEventListener("pointermove", handleMove);
-			window.removeEventListener("pointerup", handleUp);
-			window.removeEventListener("pointercancel", handleUp);
-		};
-	}, [modeResolved, min, max, position, onSizeChange]);
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {}
 
-	const posResolved = position == null ? pos : clamp(position, min, max);
+    updateFromClient(e.clientX, e.clientY); // first update only if rect is sane
+  };
 
-	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);
-		}
-	};
+  const onKeyDown = (e) => {
+    const step = 0.02;
+    let delta = 0;
 
-	// 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",
-	};
+    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;
+    }
 
-	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)",
-				};
+    if (delta !== 0) {
+      e.preventDefault();
+      setPosition(posResolved + delta);
+    }
+  };
 
-	return (
-		Lilact.createComponent( "div", { "ref": containerRef, "className": className, "style": rootStyle, "onPointerMove": onPointerMove }, Lilact.createComponent( "div", { "style": leftPaneComputed }, leftChild ), Lilact.createComponent( "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 }, Lilact.createComponent( "div", { "style": dividerVisualStyle } ) ), Lilact.createComponent( "div", { "style": rightPaneComputed }, rightChild ) )
-	);
+  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 (
+    Lilact.createComponent( "div", { "ref": containerRef, "className": className, "style": rootStyle }, Lilact.createComponent( "div", { "style": leftPaneComputed }, leftChild ), Lilact.createComponent( "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 }, Lilact.createComponent( "div", { "style": dividerVisualStyle } ) ), Lilact.createComponent( "div", { "style": rightPaneComputed }, rightChild ) )
+  );
 });