lilact 0.0.0 → 0.2.0

package/root/{lilact.development.js → lilact.development.min.js}

@@ -127,6 +127,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/** @ignore */
 const transpilerConfig = {
 	addons: _jsx_addons_js__WEBPACK_IMPORTED_MODULE_0__,
 	setFunctionLabels: true,
@@ -1348,227 +1349,9 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 
 /***/ }),
 
-/***/ 363:
-/*!****************************************!*\
-  !*** ./node_modules/react-is/index.js ***!
-  \****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-if (false) // removed by dead control flow
-{} else {
-  module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ 413);
-}
-
-
-/***/ }),
-
-/***/ 376:
-/*!********************************************!*\
-  !*** ./node_modules/prop-types/lib/has.js ***!
-  \********************************************/
-/***/ ((module) => {
-
-module.exports = Function.call.bind(Object.prototype.hasOwnProperty);
-
-
-/***/ }),
-
-/***/ 413:
-/*!***********************************************************!*\
-  !*** ./node_modules/react-is/cjs/react-is.development.js ***!
-  \***********************************************************/
-/***/ ((__unused_webpack_module, exports) => {
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-
-
-if (true) {
-  (function() {
-'use strict';
-
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-// (unstable) APIs that have been removed. Can we remove the symbols?
-
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-
-function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-}
-
-function typeOf(object) {
-  if (typeof object === 'object' && object !== null) {
-    var $$typeof = object.$$typeof;
-
-    switch ($$typeof) {
-      case REACT_ELEMENT_TYPE:
-        var type = object.type;
-
-        switch (type) {
-          case REACT_ASYNC_MODE_TYPE:
-          case REACT_CONCURRENT_MODE_TYPE:
-          case REACT_FRAGMENT_TYPE:
-          case REACT_PROFILER_TYPE:
-          case REACT_STRICT_MODE_TYPE:
-          case REACT_SUSPENSE_TYPE:
-            return type;
-
-          default:
-            var $$typeofType = type && type.$$typeof;
-
-            switch ($$typeofType) {
-              case REACT_CONTEXT_TYPE:
-              case REACT_FORWARD_REF_TYPE:
-              case REACT_LAZY_TYPE:
-              case REACT_MEMO_TYPE:
-              case REACT_PROVIDER_TYPE:
-                return $$typeofType;
-
-              default:
-                return $$typeof;
-            }
-
-        }
-
-      case REACT_PORTAL_TYPE:
-        return $$typeof;
-    }
-  }
-
-  return undefined;
-} // AsyncMode is deprecated along with isAsyncMode
-
-var AsyncMode = REACT_ASYNC_MODE_TYPE;
-var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-var ContextConsumer = REACT_CONTEXT_TYPE;
-var ContextProvider = REACT_PROVIDER_TYPE;
-var Element = REACT_ELEMENT_TYPE;
-var ForwardRef = REACT_FORWARD_REF_TYPE;
-var Fragment = REACT_FRAGMENT_TYPE;
-var Lazy = REACT_LAZY_TYPE;
-var Memo = REACT_MEMO_TYPE;
-var Portal = REACT_PORTAL_TYPE;
-var Profiler = REACT_PROFILER_TYPE;
-var StrictMode = REACT_STRICT_MODE_TYPE;
-var Suspense = REACT_SUSPENSE_TYPE;
-var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-function isAsyncMode(object) {
-  {
-    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-    }
-  }
-
-  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-}
-function isConcurrentMode(object) {
-  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-}
-function isContextConsumer(object) {
-  return typeOf(object) === REACT_CONTEXT_TYPE;
-}
-function isContextProvider(object) {
-  return typeOf(object) === REACT_PROVIDER_TYPE;
-}
-function isElement(object) {
-  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-}
-function isForwardRef(object) {
-  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-}
-function isFragment(object) {
-  return typeOf(object) === REACT_FRAGMENT_TYPE;
-}
-function isLazy(object) {
-  return typeOf(object) === REACT_LAZY_TYPE;
-}
-function isMemo(object) {
-  return typeOf(object) === REACT_MEMO_TYPE;
-}
-function isPortal(object) {
-  return typeOf(object) === REACT_PORTAL_TYPE;
-}
-function isProfiler(object) {
-  return typeOf(object) === REACT_PROFILER_TYPE;
-}
-function isStrictMode(object) {
-  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-}
-function isSuspense(object) {
-  return typeOf(object) === REACT_SUSPENSE_TYPE;
-}
-
-exports.AsyncMode = AsyncMode;
-exports.ConcurrentMode = ConcurrentMode;
-exports.ContextConsumer = ContextConsumer;
-exports.ContextProvider = ContextProvider;
-exports.Element = Element;
-exports.ForwardRef = ForwardRef;
-exports.Fragment = Fragment;
-exports.Lazy = Lazy;
-exports.Memo = Memo;
-exports.Portal = Portal;
-exports.Profiler = Profiler;
-exports.StrictMode = StrictMode;
-exports.Suspense = Suspense;
-exports.isAsyncMode = isAsyncMode;
-exports.isConcurrentMode = isConcurrentMode;
-exports.isContextConsumer = isContextConsumer;
-exports.isContextProvider = isContextProvider;
-exports.isElement = isElement;
-exports.isForwardRef = isForwardRef;
-exports.isFragment = isFragment;
-exports.isLazy = isLazy;
-exports.isMemo = isMemo;
-exports.isPortal = isPortal;
-exports.isProfiler = isProfiler;
-exports.isStrictMode = isStrictMode;
-exports.isSuspense = isSuspense;
-exports.isValidElementType = isValidElementType;
-exports.typeOf = typeOf;
-  })();
-}
-
-
-/***/ }),
-
-/***/ 491:
+/***/ 237:
 /*!*************************************!*\
-  !*** ./src/lilact.jsx + 27 modules ***!
+  !*** ./src/lilact.jsx + 28 modules ***!
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -1664,6 +1447,7 @@ var hooks_namespaceObject = {};
 __webpack_require__.r(hooks_namespaceObject);
 __webpack_require__.d(hooks_namespaceObject, {
   createContext: () => (createContext),
+  forwardRef: () => (forwardRef),
   useActionState: () => (useActionState),
   useCallback: () => (useCallback),
   useContext: () => (useContext),
@@ -1671,6 +1455,7 @@ __webpack_require__.d(hooks_namespaceObject, {
   useEffect: () => (useEffect),
   useHook: () => (useHook),
   useId: () => (useId),
+  useImperativeHandle: () => (useImperativeHandle),
   useLayoutEffect: () => (useLayoutEffect),
   useLocalStorage: () => (useLocalStorage),
   useMemo: () => (useMemo),
@@ -4883,6 +4668,7 @@ let events_set = new Set([
 const [components_CORE,components_COMPONENT,components_TEXT,IS_ZOMBIE,IDX,CHILD_CLASS_ADDENDUM,components_MEMOIZED]=[Symbol.for('LILACT:CORE'),Symbol.for('LILACT:COMPONENT'),Symbol.for('LILACT:TEXT'),Symbol.for('LILACT:IS_ZOMBIE'),Symbol.for('LILACT:IDX'),Symbol.for('LILACT:CHILD_CLASS_ADDENDUM'),Symbol.for('LILACT:MEMOIZED')];
 
 
+
 /* 
 ComponentCache is for internal use. It is the heart of the JSX runtime,
 it holds child components and detects which one is being rendered or updated.
@@ -5065,8 +4851,12 @@ class ComponentCore
 			}
 			this.props = next_props;
 
-			if(this.state!==undefined || next_state!==undefined) this.state = next_state;
-			else delete this.state;
+			if(typeof this.next_state==='object') {
+				if(!this.state) this.state = {...next_state};
+				else Object.assign( this.state, next_state );
+			}
+			else if(this.next_state!==undefined) throw 'Component.setState only accepts objects or functions is new state.';
+
 
 			if(this.next_state) delete this.next_state;
 
@@ -5125,7 +4915,7 @@ class ComponentCore
 					}
 					else {
 						if(!core.element) {
-							core.element = document.createTextNode( item[components_TEXT]);
+							core.element = document.createTextNode(item[components_TEXT]);
 							core[components_TEXT] = item[components_TEXT];
 						}
 						else if(core[components_TEXT]!==item[components_TEXT]) {
@@ -5379,7 +5169,7 @@ const renderErrorHandler = (c, e) =>
 	}
 	if(c?.component?.componentDidCatch) {
 		if(c.entity?.getDerivedStateFromError) {
-			c.component.setState({...c.component.state, ...c.entity.getDerivedStateFromError.call(c, e)});
+			c.component.setState(c.entity.getDerivedStateFromError.call(c, e));
 		}
 
 		if(Lilact.isError(e)) {
@@ -5678,7 +5468,7 @@ class Component
 		Lilact.clearTimeout(Lilact.update_timeout);
 
 		Lilact.update_set.add(this[components_CORE].container || this[components_CORE]);
-		if(callback) Lilact.update_cbs.add(callback);
+		if(callback) Lilact.update_cbs.add(callback.bind(this));
 		Lilact.update_timeout = Lilact.setTimeout( doUpdates,  Lilact.update_interval_margin );
 	}
 
@@ -5686,6 +5476,7 @@ class Component
 	* Update component state.
 	* Accepts a partial state (or a function returning partial state) and schedules a re-render.
 	* @param {any} new state
+	* @param {any} callback to called after updates.
 	* @returns {void}
 	*/
 	setState(next_state, callback)
@@ -5962,10 +5753,10 @@ function useHook()
 }
 
 /**
- * Adds state to a component using a React-like [value, setter] pattern.
+ * Adds state to a component using a [value, setter] pattern.
  *
  * @param {any} initialValue - Initial state value.
- * @returns {any} Hook result (implementation-dependent; typically `[state, setState]`).
+ * @returns {any} Hook result `[state, setState]`.
  */
 function useState(val)
 {
@@ -6020,7 +5811,7 @@ function useCallback(callback, deps=[{}])
  * Creates a context object for sharing a value through the component tree.
  *
  * @param {any} [defaultValue] - Initial context value when no Provider is present.
- * @returns {any} A context object (implementation-dependent).
+ * @returns {any} A context object
  */
 function createContext(val)
 {
@@ -6076,7 +5867,7 @@ function useId(prefix="N")
 /**
  * Starts a transition and returns helpers for pending updates vs immediate ones.
  *
- * @returns {any} Transition API (implementation-dependent; typically `[isPending, startTransition]`).
+ * @returns {any} `[isPending, startTransition]`
  */
 function useTransition()
 {
@@ -6260,7 +6051,7 @@ function useMemo(fn,deps=[])
  *
  * @param {Function} action - The async/queued action function.
  * @param {any} initialState - Initial state for the hook.
- * @returns {any} Hook result (implementation-dependent).
+ * @returns {any} Hook result
  */
 function useActionState(fn, initial_state)
 {
@@ -6295,7 +6086,7 @@ function useActionState(fn, initial_state)
  * @param {Function} reducer - Reducer function.
  * @param {any} initialArg - Initial state value (or initializer arg).
  * @param {Function} [init] - Optional initializer function for lazy initial state.
- * @returns {any} Hook result (implementation-dependent; typically `[state, dispatch]`).
+ * @returns {any} Hook result `[state, dispatch]`.
  */
 function useReducer(reducer, initialArg, init)
 {
@@ -6371,6 +6162,47 @@ function useDeferredValue(value, initialValue)
 }
 
 
+/**
+ * Wraps a render function so that a parent can pass a `ref` into it.
+ * The forwarded `ref` is provided as the second argument to the render function: `(props, ref)`.
+ *
+ * @param {function(props: any, ref: any)} render
+ *   The component render function that receives the props and the forwarded ref.
+ * @returns {}
+ */
+function forwardRef(render)
+{
+	return (props)=>render({...props, ref: undefined}, props.ref);
+}
+
+
+/**
+ * Customizes the value that is exposed to the parent when it uses a `ref` on a component created with `forwardRef`.
+ * The object returned by `factory` becomes the value of `ref.current` for object refs.
+ *
+ * @param {Ref<any>} ref
+ *   The ref that was received in your component (typically via `forwardRef` as the second argument).
+ * @param {function(): any} factory
+ *   Function that returns the value to expose to the parent. Commonly an object with methods,
+ *   or a DOM node reference.
+ * @param {Array<any>} [deps]
+ *   Dependency list that controls when the exposed value is recalculated.
+ * @returns {void}
+ */
+function useImperativeHandle(ref, factory, deps)
+{
+	Lilact.setTimeout( ()=>{ 
+			if( !Lilact.defaultIsEqual(deps[d],hk.deps[d]) ) {
+				
+				hk.deps = deps;
+				if(typeof ref.current !== object) {
+					ref.current = {};
+				}
+				Object.assign( ref.current, factory(), 0 );	
+			}
+		});
+}
+
 
 
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9ob29rcy5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIvVXNlcnMvYXJhc2gvRGVza3RvcC9Qcm9qZWN0cy9MaWxhY3Qvc3JjL2hvb2tzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
@@ -6728,10 +6560,10 @@ const [transition_CORE,transition_COMPONENT,transition_CHILD_CLASS_ADDENDUM]=[Sy
 
 /* States */
 const UNMOUNTED = "unmounted";
-const EXITED = "exited";
-const ENTERING = "entering";
-const ENTERED = "entered";
-const EXITING = "exiting";
+const EXITED = 	  "exited";
+const ENTERING =  "entering";
+const ENTERED =   "entered";
+const EXITING =   "exiting";
 
 
 
@@ -6777,12 +6609,16 @@ function Transition({
 	this[transition_CORE].is_appeared ??= inProp;
 	this[transition_CORE].timer ??= null;
 
-	if(!this.state) {
-		if (!this[transition_CORE].is_mounted) this.state = UNMOUNTED;
+	this[transition_CORE].childFunctionHandler = (func)=>{
+		return func(this[transition_CORE].mount_state); 
+	}
+
+	if(!this[transition_CORE].mount_state) {
+		if (!this[transition_CORE].is_mounted) this[transition_CORE].mount_state = UNMOUNTED;
 		if (inProp) {
-			this.state = appear && !this[transition_CORE].is_appeared ? ENTERING : ENTERED;
+			this[transition_CORE].mount_state = appear && !this[transition_CORE].is_appeared ? ENTERING : ENTERED;
 		}
-		this.state = EXITED;
+		else this[transition_CORE].mount_state = EXITED;
 	}
 
 	useEffect(() => {
@@ -6790,13 +6626,14 @@ function Transition({
 	}, []);
 
 	useEffect(() => {
-		if (!this[transition_CORE].is_appeared && appear && this.state === ENTERING && inProp) {
+		if (!this[transition_CORE].is_appeared && appear && this[transition_CORE].mount_state === ENTERING && inProp) {
 			onEnter?.();
 			requestAnimationFrame(() => {
 				onEntering?.(!this[transition_CORE].is_appeared);
 				timers_clearTimeout(this[transition_CORE].timer);
 				this[transition_CORE].timer = timers_setTimeout(() => {
-					this.setState(ENTERED);
+					this[transition_CORE].mount_state = ENTERED;
+					this.forceUpdate();
 					this[transition_CORE].is_appeared = true;
 					onEntered?.(!this[transition_CORE].is_appeared);
 				}, timeout);
@@ -6808,32 +6645,38 @@ function Transition({
 		if (inProp) {
 			this[transition_CORE].is_mounted = true;
 			// If we are already entering/entered, no-op
-			if (this.state === ENTERING || this.state === ENTERED) return;
+			if (this[transition_CORE].mount_state === ENTERING || this[transition_CORE].mount_state === ENTERED) return;
 
 			onEnter?.(!this[transition_CORE].is_appeared);
-			this.setState(ENTERING, () => {
+			this[transition_CORE].mount_state = ENTERING;
+			this.forceUpdate(() => {
 				onEntering?.(!this[transition_CORE].is_appeared);
 				timers_clearTimeout(this[transition_CORE].timer);
+
 				this[transition_CORE].timer = timers_setTimeout(() => {
-					this.setState(ENTERED);
+					this[transition_CORE].mount_state = ENTERED;
+					this.forceUpdate();
 					this[transition_CORE].is_appeared = true;
 					onEntered?.();
 				}, timeout);
 			});
 		} 
 		else {
-			if (this.state === UNMOUNTED || this.state === EXITING || this.state === EXITED) return;
+			if (this[transition_CORE].mount_state === UNMOUNTED || this[transition_CORE].mount_state === EXITING || this[transition_CORE].mount_state === EXITED) return;
 
 			onExit?.();
-			this.setState(EXITING, () => {
+			this[transition_CORE].mount_state = EXITING;
+			this.forceUpdate( () => {
 				onExiting?.();
 				timers_clearTimeout(this[transition_CORE].timer);
 				this[transition_CORE].timer = timers_setTimeout(() => {
-					this.setState(EXITED);
+					this[transition_CORE].mount_state = EXITED;
+					this.forceUpdate();
 					onExited?.();
 					if (unmountOnExit) {
 						this[transition_CORE].is_mounted = false;
-						this.setState(UNMOUNTED);
+						this[transition_CORE].mount_state = UNMOUNTED;
+						this.forceUpdate();
 					}
 				}, timeout);
 			});
@@ -6843,20 +6686,20 @@ function Transition({
 	if (!this[transition_CORE].is_mounted) return null;
 
 	if(classNames) {
-		if (this.state === ENTERING) {
+		if (this[transition_CORE].mount_state === ENTERING) {
 			if(this[transition_CORE].is_appeared)
 				this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.appearActive;
 			else
 				this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.enterActive;
 		}
-		else if (this.state === ENTERED) {
+		else if (this[transition_CORE].mount_state === ENTERED) {
 			if(this[transition_CORE].is_appeared)
 				this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.appearDone;
 			else
 				this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.enterDone;
 		}
-		else if (this.state === EXITING) this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.exitActive;
-		else if (this.state === EXITED) this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.exitDone;
+		else if (this[transition_CORE].mount_state === EXITING) this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.exitActive;
+		else if (this[transition_CORE].mount_state === EXITED) this[transition_CORE][transition_CHILD_CLASS_ADDENDUM] = classNames.exitDone;
 	}
 	return children;
 }
@@ -7622,17 +7465,6 @@ function Routes({ children }) {
 
 
 
-/*
-type SpinnerProps = {
-	size?: number; // px
-	className?: string;
-	style?: React.CSSProperties;
-	color?: string; // stroke/fill color
-	strokeWidth?: number; // px
-	"aria-label"?: string;
-};
-*/
-
 /**
  * A CSS-only loading spinner component.
  * 
@@ -7736,15 +7568,21 @@ class Suspense extends Component
 	constructor(props) {
 
 		super(props);
+/** @ignore */
 		this.state = { showingFallback: false };
 
+/** @ignore */
 		this._pending = new Set();
 
+/** @ignore */
 		this._delayTimer = null;
+/** @ignore */
 		this._minShowTimer = null;
+/** @ignore */
 		this._fallbackShownAt = 0;
 	}
 
+/** @ignore */
 	static getDerivedStateFromError(error) {
 		if (Lilact.isThenable(error)) {
 			// signal to call componentDidCatch where we handle the thenable
@@ -7754,6 +7592,7 @@ class Suspense extends Component
 		throw error;
 	}
 
+/** @ignore */
 	componentDidCatch(error) {
 		if (!Lilact.isThenable(error)) return;
 
@@ -7780,11 +7619,13 @@ class Suspense extends Component
 		}
 	}
 
+/** @ignore */
 	componentWillUnmount() {
 		this._clearTimers();
 		this._pending.clear();
 	}
 
+/** @ignore */
 	_clearTimers() {
 		if (this._delayTimer) {
 			Lilact.clearTimeout(this._delayTimer);
@@ -7796,6 +7637,7 @@ class Suspense extends Component
 		}
 	}
 
+/** @ignore */
 	_attachPromise(promise) {
 		if (this._pending.has(promise)) return;
 		this._pending.add(promise);
@@ -7852,11 +7694,13 @@ class Suspense extends Component
 		promise.then(onSettled, onSettled);
 	}
 
+/** @ignore */
 	componentDidCatch(error, info) {
 		if (!Lilact.isThenable(error)) return;
 		this._attachPromise(error);
 	}
 
+/** @ignore */
 	render() {
 		if (this.state.showingFallback) {
 			return Lilact.createComponent( null, {  }, this.props.fallback );
@@ -7868,6 +7712,272 @@ class Suspense extends Component
 
 
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9hY2Nlc3Nvcmllcy5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIvVXNlcnMvYXJhc2gvRGVza3RvcC9Qcm9qZWN0cy9MaWxhY3Qvc3JjL2FjY2Vzc29yaWVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+;// ./src/pane.jsx
+
+
+
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+
+/**
+ * ResizablePane
+ *
+ * Features:
+ * - Supports "horizontal" (left/top size affects width) and "vertical" (affects height)
+ * - Initial position via props.position
+ * - Methods to set mode and position via ref:
+ *     ref.current.setMode(mode)
+ *     ref.current.setPosition(position)
+ * - 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 [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 (
+		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 ) )
+	);
+});
+
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9wYW5lLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi9Vc2Vycy9hcmFzaC9EZXNrdG9wL1Byb2plY3RzL0xpbGFjdC9zcmMvcGFuZS5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
 // EXTERNAL MODULE: ./src/jsx.js
 var jsx = __webpack_require__(207);
 ;// ./src/lilact.jsx
@@ -7921,6 +8031,7 @@ var jsx = __webpack_require__(207);
 
 
 
+
 
 
 //import '../node_modules/@dragdroptouch/drag-drop-touch/dist/drag-drop-touch.esm.min.js';
@@ -7934,7 +8045,7 @@ var jsx = __webpack_require__(207);
  * @property emotion - Handle to Emotion’s CSS-in-JS package for styling (https://github.com/emotion-js/emotion).
  */
 const lilact_Lilact = 
-{
+{	
 
 	VERSION: "beta.0",
 	
@@ -7959,27 +8070,24 @@ const lilact_Lilact =
 	...router_namespaceObject,
 	...accessories_namespaceObject,
 
+	ResizablePane: ResizablePane,
+
 	transpileJSX: jsx.transpileJSX,
 	transpilerConfig: jsx.transpilerConfig,
 
 	// Dependencies ()
 
 	PropTypes: (prop_types_default()),
+	//redux: {...redux, createSlice, createAsyncThunk},
 	redux: redux_namespaceObject,
 	emotion: emotion_css_development_esm_namespaceObject,
 
 }
 
-
-// or, if you prefer DOMContentLoaded:
 document.addEventListener('DOMContentLoaded', () => {
   lilact_Lilact.runScripts();
 });
 
-function yourFunctionHere() {
-  // ...
-}
-
 	console.log(`Lilact (Version: ${lilact_Lilact.VERSION}) - Debug Mode`);
 	console.log(`Copyright(C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>`);
 
@@ -7987,6 +8095,224 @@ function yourFunctionHere() {
 
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9saWxhY3QuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9saWxhY3QuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
 
+/***/ }),
+
+/***/ 363:
+/*!****************************************!*\
+  !*** ./node_modules/react-is/index.js ***!
+  \****************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+if (false) // removed by dead control flow
+{} else {
+  module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ 413);
+}
+
+
+/***/ }),
+
+/***/ 376:
+/*!********************************************!*\
+  !*** ./node_modules/prop-types/lib/has.js ***!
+  \********************************************/
+/***/ ((module) => {
+
+module.exports = Function.call.bind(Object.prototype.hasOwnProperty);
+
+
+/***/ }),
+
+/***/ 413:
+/*!***********************************************************!*\
+  !*** ./node_modules/react-is/cjs/react-is.development.js ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+
+
+if (true) {
+  (function() {
+'use strict';
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+exports.isValidElementType = isValidElementType;
+exports.typeOf = typeOf;
+  })();
+}
+
+
 /***/ }),
 
 /***/ 556:
@@ -8756,12 +9082,13 @@ module.exports = checkPropTypes;
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   lazy: () => (/* binding */ lazy),
 /* harmony export */   require: () => (/* binding */ require),
 /* harmony export */   run: () => (/* binding */ run),
 /* harmony export */   runScripts: () => (/* binding */ runScripts),
 /* harmony export */   traceError: () => (/* binding */ traceError)
 /* harmony export */ });
-/* harmony import */ var _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lilact.jsx */ 491);
+/* harmony import */ var _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lilact.jsx */ 237);
 /*
 
 	Lilact
@@ -8774,10 +9101,10 @@ __webpack_require__.r(__webpack_exports__);
 	modification, are permitted provided that the following conditions are met:
 
 	* Redistributions of source code must retain the above copyright
-	  notice, this list of conditions and the following disclaimer.
+		notice, this list of conditions and the following disclaimer.
 	* Redistributions in binary form must reproduce the above copyright
-	  notice, this list of conditions and the following disclaimer in the
-	  documentation and/or other materials provided with the distribution.
+		notice, this list of conditions and the following disclaimer in the
+		documentation and/or other materials provided with the distribution.
 
 	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -8792,7 +9119,8 @@ __webpack_require__.r(__webpack_exports__);
 
 */
 
-const [CORE,COMPONENT]=[Symbol.for('LILACT:CORE'),Symbol.for('LILACT:COMPONENT')];
+const [CORE,COMPONENT,LAZY]=[Symbol.for('LILACT:CORE'),Symbol.for('LILACT:COMPONENT'),Symbol.for('LILACT:LAZY')];
+
 
 
 
@@ -8800,10 +9128,8 @@ const [CORE,COMPONENT]=[Symbol.for('LILACT:CORE'),Symbol.for('LILACT:COMPONENT')
  * Runs a jsx script. All scripts can access Lilact namespace as a global object. 
  * 
  * Notice that `run` uses eval internally. There is no standard way of getting the error location when
- * running it with eval. Lilact has its own experimental workarounds for this, but generally speaking it
- * works better when an script is loaded from a file (using <script type='text/jsx' src=''.../> and is not 
- * inline, because that way the generated sourcemap will be used by the browser and the exceptions will be
- * located automatically. When an inline script raises exception, the original exception does not report
+ * running it with eval. Lilact has its own experimental workarounds for this.
+ * When an inline script raises an exception, the original exception does not report
  * which eval has caused the error, so Lilact should guess it from some labels, and for the sake of 
  * efficiency, it is block based and not exact.
  *
@@ -8873,50 +9199,62 @@ function run(jsx, path=`<string input ${++_lilact_jsx__WEBPACK_IMPORTED_MODULE_0
 	}
 }
 
-// export async function importAsync(path)
-// {
-// 	const res = await fetch(path);
-// 	const text = await res.text();
-
-// 	return Lilact.run(text, path, false);
-// }
 
 /**
  * Loads a jsx script from a path. All scripts can access Lilact namespace as a global object. 
  * 
- * Lilact require loads synchronously, as it is expected to be loaded on the next instruction.
- * It is better to load existing scripts using <script type="text/jsx" src+"..."/> if possible.
+ * `Lilact.require` loads synchronously, as it is expected to be loaded on the next instruction.
+ * 
+ * As running the transpiled scripts rely on `eval`, it is not possible to use module imports 
+ * and exports. So to import you should use `const {useState} = Lilact` convention. And to 
+ * export, you should use `module.exports = ...`. `Lilact.require` returns `module.exports` value
+ * so you can import different modules using the convention above.
+ * 
+ * If the path is in the format #id, it will query the document for a script element with the given 
+ * id and run its contents.
+ * 
+ * If require is called inside the function given to lazy, it will run async. See `lazy`.
+ * 
+ * @param path - The path to the required file. Must be either absolute path or relative to the current 
+ * document’s URL (the page/location that initiated the request).
  * 
- * Notice that run uses eval internally. There is no standard way of getting the error location when
- * running it with eval. Lilact has its own experimental workarounds for this, but generally speaking it
- * works better when an script is loaded from a file (using <script type='text/jsx' src=''.../> and is not 
- * inline, because that way the generated sourcemap will be used by the browser and the exceptions will be
- * located automatically. When an inline script raises exception, the original exception does not report
- * which eval has caused the error, so Lilact should guess it from some labels, and for the sake of 
- * efficiency, it is block based and not exact.
- *
- * @param path - The path to the required file.
  * @param force_update - To treat the code as inline. The main difference at the moment is that inline code doesn't include sourcemap.
  * 
  * @returns An array representation of the children.
  */
 function require(path, force_update)
 {
-	if(_lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].transpilerConfig.required[path]!==undefined && !force_update) return _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].transpilerConfig.required[path].module;
+	//if(Lilact.transpilerConfig.required[path]!==undefined && !force_update) return Lilact.transpilerConfig.required[path].module;
 
 	if(path[0]==='#') {
 
-		const el = document.querySelector(path);
+		const el = document.getElementById(path);
 
 		if(el) {
 			return _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].run(el.innerText, path);
 		}
 
 	}
-	else {
+	else if(_lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"]?.[LAZY]) {
+		_lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"][LAZY]=false;
 
+		return fetch(path)
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.text();
+			})
+			.then(res => {
+				res = _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].run(res, path, false);
+				// todo: this is for the lazy, so we detect default, should we do it in sync mode too?
+				return res?.default ?? res;
+			})
+			.catch(err => {
+				throw err;
+			});
+	}
+	else {
 		// note: this makes a sync request. this is not advised,
-		// but import should be sync. for an async solution use importAsync.
+		// but import should be sync. for an async solution use lazy and suspense.
 
 		const request = new XMLHttpRequest();
 		request.open("GET", path, false);
@@ -8931,6 +9269,48 @@ function require(path, force_update)
 }
 
 
+/**
+ * Wrapper that enables async, code-split component loading. `lazy` should be used
+ * outside the component definintion or it will produce new components on each rerender.
+ *
+ * @param factory - A function with **no arguments** that returns a `Promise`.
+ * The promise must resolve to a module whose module.exports.default is a Lilact component
+ * or otherwise it will be whatever the module.exports is set to.
+ * 
+ * @returns A Lilact component that should be rendered inside a {@link Suspense} boundary.
+ */
+function lazy(factory) {
+	let status = "pending"; // pending | success | error
+	let result;             // component | error
+
+	_lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"][LAZY] = true;
+	result = factory();
+
+	if(_lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].isThenable(result)) {
+		result.then(
+			(mod) => {
+				status = "success";
+				result = mod;
+				return result;
+			},
+			(err) => {
+				status = "error";
+				result = err;
+				throw err;
+			}
+		);
+	}
+
+	function LazyComponent(props) {
+		if (status === "pending") throw result;
+		if (status === "error") throw result;   
+		const Component = result;
+		return _lilact_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].createComponent( Component, { ...props } );
+	}
+
+	return LazyComponent;
+}
+
 /**
  * Debug tool to get the Lilact traced location of an error. It can also produce some block based stack trace 
  * if `Lilact.transpilerConfig.enableLabelStack` is set to `true` before loading the script. This is `false`
@@ -9000,21 +9380,16 @@ function traceError(err)
 }
 
 function scanScriptTagsWithType() {
-  const scripts = Array.from(
-    document.querySelectorAll('script[type="text/jsx"]')
-  );
+	const scripts = Array.from(
+		document.querySelectorAll('script[type="text/jsx"]')
+	);
 
-  return scripts.map((el) => ({
-    src: el.getAttribute("src") ?? null,
-    content: el.textContent ?? ""
-  }));
+	return scripts.map((el) => ({
+		src: el.getAttribute("src") ?? null,
+		content: el.textContent ?? ""
+	}));
 }
 
-// usage (in browser):
-// const result = scanScriptTagsWithType();
-// console.log(result);
-
-
 /**
  * Scans the whole documents and runs all the script elements with type `text/jsx`.
  * It is automatically attached to document.onload when Lilact is loaded.
@@ -9335,10 +9710,10 @@ module.exports = ReactPropTypesSecret;
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module is referenced by other modules so it can't be inlined
-/******/ var __webpack_exports__ = __webpack_require__(491);
+/******/ var __webpack_exports__ = __webpack_require__(237);
 /******/ const __webpack_exports__Lilact = __webpack_exports__.Lilact;
 /******/ const __webpack_exports__default = __webpack_exports__["default"];
 /******/ export { __webpack_exports__Lilact as Lilact, __webpack_exports__default as default };
 /******/ 
 
-//# sourceMappingURL=lilact.development.js.map
+//# sourceMappingURL=lilact.development.min.js.map