cx 26.1.13 → 26.2.1

package/dist/ui.js

@@ -1,6 +1,7 @@
 import {
 	computable,
 	StoreProxy,
+	isAccessorChain,
 	StructuredSelector,
 	invalidateExpressionCache,
 	invalidateStringTemplateCache,
@@ -14,7 +15,6 @@ import {
 	ZoomIntoPropertyView,
 	setGetExpressionCacheCallback,
 	setGetStringTemplateCacheCallback,
-	isAccessorChain,
 	SubscribableView,
 	Store,
 	NestedDataView,
@@ -28,13 +28,21 @@ import {
 	isArray,
 	isFunction,
 	parseStyle,
+	SubscriberList,
+	isNonEmptyArray,
+	GlobalCacheIdentifier,
+	debug,
+	processDataFlag,
+	renderFlag,
+	destroyFlag,
+	validatedDebounce,
+	throttle,
+	isUndefined,
 	isString,
-	Console,
+	isObject,
 	isDefined,
+	Console,
 	innerTextTrim,
-	GlobalCacheIdentifier,
-	isObject,
-	SubscriberList,
 	isSelfOrDescendant,
 	getActiveElement,
 	findFirst,
@@ -46,14 +54,6 @@ import {
 	resolveMinMaxFractionDigits,
 	parseDateInvariant,
 	setGetFormatCacheCallback,
-	isNonEmptyArray,
-	debug,
-	processDataFlag,
-	renderFlag,
-	destroyFlag,
-	validatedDebounce,
-	throttle,
-	isUndefined,
 	TraversalStack,
 	reverseSlice,
 	appDataFlag,
@@ -262,1722 +262,1725 @@ class CSS {
 CSS.classPrefix = "cx";
 CSSHelper.alias("cx", CSS);
 
-const VDOM = VDOM$1;
-let widgetId = 100;
-class Widget extends Component {
-	// runtime values
-	widgetId;
+let isBatching = 0;
+let promiseSubscribers = new SubscriberList();
+function batchUpdates(callback) {
+	if (VDOM$1.DOM.unstable_batchedUpdates)
+		VDOM$1.DOM.unstable_batchedUpdates(() => {
+			isBatching++;
+			try {
+				callback();
+			} finally {
+				isBatching--;
+			}
+		});
+	else callback();
+}
+function isBatchingUpdates() {
+	return isBatching > 0;
+}
+function notifyBatchedUpdateStarting() {
+	promiseSubscribers.execute((x) => {
+		x.pending++;
+	});
+}
+function notifyBatchedUpdateCompleted() {
+	promiseSubscribers.execute((x) => {
+		let cb = x;
+		cb.finished++;
+		if (cb.finished >= cb.pending) cb.complete(true);
+	});
+}
+function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000) {
+	let done = false;
+	let timer;
+	let unsubscribe;
+	const update = {
+		pending: 0,
+		finished: 0,
+		complete: (success) => {
+			if (!done) {
+				done = true;
+				if (timer) clearInterval(timer);
+				if (unsubscribe) unsubscribe();
+				notifyCallback(!!success);
+			}
+		},
+	};
+	unsubscribe = promiseSubscribers.subscribe(update);
+	batchUpdates(callback);
+	if (update.pending <= update.finished) update.complete(true);
+	else timer = setTimeout(update.complete, timeout);
+}
+
+let instanceId = 1000;
+/**
+ * Base Instance class
+ */
+class Instance {
+	// Selectors
+	dataSelector;
+	// Lifecycle flags
 	initialized;
-	components;
+	destroySubscriptions;
 	helpers;
-	selector;
-	nameMap;
-	version;
-	static optimizePrepare;
-	constructor(config) {
-		super(config);
-		this.widgetId = widgetId++;
-		if (isArray(this.jsxSpread)) {
-			if (!this.jsxAttributes) this.jsxAttributes = [];
-			this.jsxSpread.forEach((spread) => {
-				for (const key in spread) {
-					this[key] = spread[key];
-					this.jsxAttributes.push(key);
-				}
-			});
-		}
-	}
-	init() {
-		if (this.styles) this.style = this.styles;
-		if (this.styled) this.style = parseStyle(this.style);
-		if (typeof this.if !== "undefined") this.visible = this.if;
-		this.declareData();
-		if (this.outerLayout) {
-			if (isArray(this.outerLayout)) throw new Error("Only single element outer layout is supported.");
-			//TODO: better handle the case when outer layout is an array. How to get around circular dependency to PureContainer
-			this.outerLayout = Widget.create(this.outerLayout, {});
-		}
-		if (this.contentFor) this.putInto = this.contentFor;
-		if (this.putInto) this.isContent = true;
-		if (isString(this.CSS)) this.CSS = CSSHelper.get(this.CSS);
-		this.initHelpers();
-		this.initComponents();
-		this.initialized = true;
+	components;
+	constructor(widget, key, parent, parentStore) {
+		this.widget = widget;
+		this.key = key;
+		this.id = String(++instanceId);
+		this.cached = {};
+		this.parent = parent;
+		this.parentStore = parentStore ?? parent?.store;
+		if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
 	}
-	initComponents(...args) {
-		if (args.length > 0) {
-			this.components = Object.assign({}, ...args);
-			for (const k in this.components) {
-				if (!this.components[k]) delete this.components[k];
-			}
-		}
+	setParentStore(parentStore) {
+		this.parentStore = parentStore;
+		this.widget.applyParentStore(this);
 	}
-	initHelpers(...args) {
-		if (args.length > 0) {
-			this.helpers = Object.assign({}, ...args);
+	init(context) {
+		// widget is initialized when the first instance is initialized
+		if (!this.widget.initialized) {
+			this.widget.init();
+			this.widget.initialized = true;
 		}
-	}
-	declareData(...args) {
-		const options = {};
-		if (this.styled) {
-			options.class =
-				options.className =
-				options.style =
-					{
-						structured: true,
-					};
+		if (!this.dataSelector) {
+			this.widget.selector.init(this.parentStore);
+			this.dataSelector = this.widget.selector.createStoreSelector();
 		}
-		const props = {
-			visible: undefined,
-			mod: {
-				structured: true,
-			},
-			...options,
-		};
-		Object.assign(props, ...args);
-		this.selector = new StructuredSelector({
-			props: props,
-			values: this,
-		});
-		this.nameMap = this.selector.nameMap;
-	}
-	prepareCSS(_context, { data }) {
-		data.classNames = this.CSS.expand(
-			this.CSS.block(this.baseClass, data.mod, data.stateMods),
-			data.class,
-			data.className,
-		);
-		data.style = parseStyle(data.style);
-	}
-	prepareData(context, instance) {
-		if (this.styled) this.prepareCSS(context, instance);
+		// init instance might change the store, so this must go before the controller initialization
+		this.widget.initInstance(context, this);
+		// initInstance can set the store, otherwise use parent store
+		if (!this.store) this.store = this.parentStore;
+		if (this.widget.onInit) this.widget.onInit(context, this);
+		this.widget.initState(context, this);
+		if (this.widget.controller)
+			this.controller = Controller.create(this.widget.controller, {
+				widget: this.widget,
+				instance: this,
+				store: this.store,
+			});
+		if (
+			this.widget.exploreCleanup ||
+			this.widget.outerLayout ||
+			this.widget.isContent ||
+			this.widget.controller ||
+			this.widget.prepareCleanup
+		)
+			this.needsExploreCleanup = true;
+		if (this.widget.prepare || this.widget.controller) this.needsPrepare = true;
+		if (this.widget.cleanup || this.widget.controller) this.needsCleanup = true;
+		this.initialized = true;
 	}
-	initInstance(_context, _instance) {}
-	initState(_context, _instance) {}
-	checkVisible(_context, _instance, data) {
-		return data.visible;
+	checkVisible(context) {
+		if (!this.initialized) this.init(context);
+		const wasVisible = this.visible;
+		this.rawData = this.dataSelector(this.store);
+		this.visible = this.widget.checkVisible(context, this, this.rawData);
+		if (this.visible && !this.detached) this.parent.instanceCache.addChild(this);
+		this.explored = false;
+		this.prepared = false;
+		if (!this.visible && wasVisible) this.destroy();
+		return this.visible;
 	}
-	explore(context, instance, data) {
-		if (this.components) {
-			instance.components = {};
-			for (const cmp in this.components) {
-				const ins = instance.getChild(context, this.components[cmp], "cmp-" + cmp, instance.store);
-				if (ins.scheduleExploreIfVisible(context)) instance.components[cmp] = ins;
-			}
+	scheduleExploreIfVisible(context) {
+		if (this.checkVisible(context)) {
+			context.exploreStack.push(this);
+			if (this.needsExploreCleanup) context.exploreStack.push(this);
+			return true;
 		}
+		return false;
 	}
-	render(context, instance, key) {
-		Console.log(this);
-		throw new Error(
-			'Widget\'s render method should be overridden. This error usually happens if with incorrect imports, i.e. import { TextField } from "cx/data". Please check the console for details about the component configuration.',
-		);
-	}
-	update() {
-		this.version = (this.version || 0) + 1;
-	}
-	applyParentStore(instance) {
-		instance.store = instance.parentStore;
-		// check when this is actually needed, perhaps this is needed only for tables and repeated elements
-		// if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+	cache(key, value) {
+		const oldValue = this.cached[key];
+		if (oldValue === value) return false;
+		if (!this.cacheList) this.cacheList = {};
+		this.cacheList[key] = value;
+		return true;
 	}
-	static resetCounter() {
-		widgetId = 100;
-	}
-}
-Widget.prototype.visible = true;
-Widget.prototype.memoize = true; //cache rendered content and use it if possible
-Widget.prototype.CSS = CSS;
-Widget.prototype.styled = false;
-Widget.namespace = "ui.";
-Widget.optimizePrepare = true;
-Widget.factory = (type, _config, _more) => {
-	throw new Error(`Invalid widget type: ${type}.`);
-};
-function contentAppend(result, w, prependSpace) {
-	if (w == null || w === false) return false;
-	if (isArray(w)) w.forEach((c) => contentAppend(result, c));
-	else if (isDefined(w.content) && !w.atomic) return contentAppend(result, w.content, false);
-	else {
-		if (prependSpace) result.push(" ");
-		result.push(w);
-	}
-	return true;
-}
-function getContentArray(x) {
-	let result = [];
-	contentAppend(result, x, false);
-	return result;
-}
-function getContent(x) {
-	let result = getContentArray(x);
-	if (result.length == 0) return null;
-	if (result.length == 1) return result[0];
-	return result;
-}
-
-class StaticText extends Widget {
-	render() {
-		return this.text;
-	}
-}
-Widget.alias("static-text", StaticText);
-
-class Text extends Widget {
-	constructor(config) {
-		super(config);
+	markShouldUpdate(context) {
+		let ins = this;
+		let renderList = this.renderList;
+		renderList.markReverseIndex();
+		//notify all parents that child state changed to bust up caching
+		while (ins && !ins.shouldUpdate && ins.explored) {
+			if (ins.renderList !== renderList) {
+				renderList.reverse();
+				renderList = ins.renderList;
+				renderList.markReverseIndex();
+			}
+			ins.shouldUpdate = true;
+			renderList.data.push(ins);
+			ins = ins.widget.isContent
+				? ins.contentPlaceholder
+				: ins.parent?.outerLayout === ins
+					? ins.parent?.parent
+					: ins.parent;
+		}
+		renderList.reverse();
 	}
-	init() {
-		if (!this.value && (this.tpl || this.expr || this.bind))
-			this.value = {
-				tpl: this.tpl,
-				expr: this.expr,
-				bind: this.bind,
+	explore(context) {
+		if (!this.visible) throw new Error("Explore invisible!");
+		if (this.explored) {
+			if (this.widget.prepareCleanup) context.prepareList.push(this);
+			if (this.widget.exploreCleanup) this.widget.exploreCleanup(context, this);
+			if (this.parent?.outerLayout === this) context.popNamedValue("content", "body");
+			if (this.widget.controller) context.pop("controller");
+			return;
+		}
+		this.explored = true;
+		if (this.needsPrepare) context.prepareList.push(this);
+		else this.prepared = true;
+		if (this.needsCleanup) context.cleanupList.push(this);
+		if (this.instanceCache) this.instanceCache.mark();
+		//controller may reconfigure the widget and need to go before shouldUpdate calculation
+		this.parentOptions = context.parentOptions;
+		if (!this.controller) {
+			if (context.controller) this.controller = context.controller;
+			else if (this.parent?.controller) this.controller = this.parent?.controller;
+		}
+		this.destroyTracked = false;
+		if (this.controller) {
+			if (this.widget.controller) {
+				if (!this.controller.initialized) {
+					this.controller.init(context);
+					this.controller.initialized = true;
+				}
+				context.push("controller", this.controller);
+				this.controller.explore(context);
+				if (this.controller.onDestroy && this.controller.widget == this.widget) this.trackDestroy();
+			}
+		}
+		if (this.widget.onDestroy || isNonEmptyArray(this.destroySubscriptions)) this.trackDestroy();
+		this.renderList = this.assignedRenderList || this.parent?.renderList || context.getRootRenderList();
+		let shouldUpdate =
+			this.rawData !== this.cached.rawData ||
+			this.state !== this.cached.state ||
+			this.widget.version !== this.cached.widgetVersion ||
+			this.cached.globalCacheIdentifier !== GlobalCacheIdentifier.get();
+		if (shouldUpdate) {
+			this.data = {
+				...this.rawData,
 			};
-		super.init();
-	}
-	declareData(...args) {
-		super.declareData(
-			{
-				value: undefined,
-			},
-			...args,
-		);
-	}
-	render(context, { data }, key) {
-		return data.value != null ? data.value : "";
-	}
-}
-Widget.alias("text", Text);
-
-function exploreChildren(context, instance, children, previousResult, key, store) {
-	let newChildren = previousResult || [];
-	let oldChildren = previousResult || newChildren;
-	let identical = previousResult ? 0 : -1;
-	for (let c = 0; c < children.length; c++) {
-		let cell = instance.getChild(context, children[c], key, store);
-		if (cell.checkVisible(context)) {
-			if (identical >= 0) {
-				if (cell == oldChildren[identical]) identical++;
-				else {
-					newChildren = newChildren.slice(0, identical);
-					identical = -1;
-					newChildren.push(cell);
+			this.widget.prepareData(context, this);
+			debug(processDataFlag, this.widget);
+		}
+		//onExplore might set the outer layout
+		if (this.widget.onExplore) this.widget.onExplore(context, this);
+		if (this.parent?.outerLayout === this) {
+			this.renderList = this.renderList.insertRight();
+			context.pushNamedValue("content", "body", this.parent);
+		}
+		if (this.widget.outerLayout) {
+			this.outerLayout = this.getChild(context, this.widget.outerLayout, null, this.store);
+			this.outerLayout.scheduleExploreIfVisible(context);
+			this.renderList = this.renderList.insertLeft();
+		}
+		if (this.widget.isContent) {
+			this.contentPlaceholder = context.contentPlaceholder && context.contentPlaceholder[this.widget.putInto];
+			if (this.contentPlaceholder) context.contentPlaceholder[this.widget.putInto](this);
+			else {
+				this.renderList = this.renderList.insertLeft();
+				context.pushNamedValue("content", this.widget.putInto, this);
+				if (!context.contentList) context.contentList = {};
+				let list = context.contentList[this.widget.putInto];
+				if (!list) list = context.contentList[this.widget.putInto] = [];
+				list.push(this);
+			}
+		}
+		this.shouldUpdate = false;
+		if (shouldUpdate || this.childStateDirty || !this.widget.memoize) this.markShouldUpdate(context);
+		context.exploreStack.hop();
+		if (this.widget.helpers) {
+			this.helpers = {};
+			for (let cmp in this.widget.helpers) {
+				let helper = this.widget.helpers[cmp];
+				if (helper) {
+					let ins = this.getChild(context, helper);
+					if (ins.scheduleExploreIfVisible(context)) this.helpers[cmp] = ins;
 				}
-			} else newChildren.push(cell);
-			context.exploreStack.push(cell);
-			if (cell.needsExploreCleanup) context.exploreStack.push(cell);
+			}
 		}
+		//TODO: check do we need to pass data here?
+		this.widget.explore(context, this, this.data);
 	}
-	if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
-	return newChildren;
-}
-
-// Base class for extending with custom Config types
-class ContainerBase extends Widget {
-	init(context) {
-		if (typeof this.ws !== "undefined") this.preserveWhitespace = this.ws;
-		if (this.preserveWhitespace) this.trimWhitespace = false;
-		let items = this.items || this.children || [];
-		delete this.children;
-		this.items = [];
-		if (this.layout) {
-			let layout = Container.create(this.layout, {
-				items,
-			});
-			layout.init(context);
-			this.layout = null;
-			if ("noLayout" in layout && layout.noLayout) {
-				this.useParentLayout = true;
-				this.add(items);
-			} else {
-				this.add(layout);
-				this.layout = layout;
+	prepare(context) {
+		if (!this.visible) throw new Error("Prepare invisible!");
+		if (this.prepared) {
+			if (this.widget.prepareCleanup) this.widget.prepareCleanup(context, this);
+			return;
+		}
+		this.prepared = true;
+		if (this.widget.prepare) this.widget.prepare(context, this);
+		if (this.widget.controller && this.controller?.prepare) this.controller.prepare(context);
+	}
+	render(context) {
+		if (!this.visible) throw new Error("Render invisible!");
+		if (this.shouldUpdate) {
+			debug(renderFlag, this.widget, this.key);
+			const vdom = renderResultFix(this.widget.render(context, this, this.key));
+			if (this.widget.isContent || this.outerLayout) this.contentVDOM = vdom;
+			else this.vdom = vdom;
+		}
+		if (this.cacheList) {
+			for (const key in this.cacheList) {
+				this.cached[key] = this.cacheList[key];
 			}
-		} else {
-			this.add(items);
 		}
-		super.init();
+		this.cacheList = null;
+		this.cached.rawData = this.rawData;
+		this.cached.data = this.data;
+		this.cached.state = this.state;
+		this.cached.widgetVersion = this.widget.version;
+		this.cached.globalCacheIdentifier = GlobalCacheIdentifier.get();
+		this.childStateDirty = false;
+		if (this.instanceCache) this.instanceCache.sweep();
+		if (this.parent?.outerLayout === this) {
+			//if outer layouts are chained we need to find the originating element (last element with OL set)
+			let parent = this.parent;
+			while (parent.parent?.outerLayout == parent) parent = parent.parent;
+			parent.vdom = this.vdom;
+		}
+		return this.vdom;
 	}
-	exploreItems(context, instance, items) {
-		instance.children = exploreChildren(context, instance, items, instance.cached.children, null, instance.store);
-		if (instance.cache("children", instance.children)) instance.markShouldUpdate(context);
+	cleanup(context) {
+		if (this.widget.controller && this.controller?.cleanup) this.controller.cleanup(context);
+		if (this.widget.cleanup) this.widget.cleanup(context, this);
 	}
-	explore(context, instance) {
-		super.explore(context, instance);
-		this.exploreItems(context, instance, this.items);
+	trackDestroy() {
+		if (!this.destroyTracked) {
+			this.destroyTracked = true;
+			if (this.parent && !this.detached) this.parent.trackDestroyableChild(this);
+		}
 	}
-	render(context, instance, key) {
-		return this.renderChildren(context, instance, key);
+	trackDestroyableChild(child) {
+		this.instanceCache.trackDestroy(child);
+		this.trackDestroy();
 	}
-	renderChildren(_context, instance, key) {
-		let preserveComplexContent = this.useParentLayout;
-		function append(result, r) {
-			if (r == null) return;
-			//react element
-			if (!r.hasOwnProperty("content")) {
-				contentAppend(result, r);
-				return;
-			}
-			if (r.useParentLayout) return r.content.forEach((x) => append(result, x));
-			if (r.atomic || preserveComplexContent) {
-				result.push(r);
-			} else {
-				let first = true;
-				for (let k in r) if (contentAppend(result, r[k], !first)) first = false;
+	subscribeOnDestroy(callback) {
+		if (!this.destroySubscriptions) this.destroySubscriptions = [];
+		this.destroySubscriptions.push(callback);
+		this.trackDestroy();
+		return () => {
+			if (this.destroySubscriptions) {
+				this.destroySubscriptions = this.destroySubscriptions.filter((cb) => cb !== callback);
 			}
+		};
+	}
+	destroy() {
+		if (this.instanceCache) {
+			this.instanceCache.destroy();
+			this.instanceCache = null;
 		}
-		let result = [];
-		for (let i = 0; i < instance.children.length; i++) {
-			append(result, instance.children[i].vdom);
+		if (this.destroySubscriptions) {
+			this.destroySubscriptions.forEach((cb) => cb());
+			this.destroySubscriptions = null;
+		}
+		if (this.destroyTracked) {
+			debug(destroyFlag, this);
+			if (this.widget.onDestroy) this.widget.onDestroy(this);
+			if (
+				this.widget.controller &&
+				this.controller &&
+				this.controller.onDestroy &&
+				this.controller.widget == this.widget
+			)
+				this.controller.onDestroy();
+			this.destroyTracked = false;
 		}
-		if (this.useParentLayout)
-			return {
-				useParentLayout: true,
-				content: result,
-			};
-		return result;
 	}
-	clear() {
-		if (this.layout) this.layout.clear();
-		else this.items = [];
+	setState(state) {
+		let skip = !!this.state;
+		if (this.state) {
+			for (const k in state) {
+				if (this.state[k] !== state[k]) {
+					skip = false;
+					break;
+				}
+			}
+		}
+		if (skip) return;
+		this.state = Object.assign({}, this.state, state);
+		let parent = this.parent;
+		//notify all parents that child state change to bust up caching
+		while (parent) {
+			parent.childStateDirty = true;
+			parent = parent.parent;
+		}
+		batchUpdates(() => {
+			this.store.notify();
+		});
 	}
-	add(...args) {
-		if (this.layout) return this.layout.add(...args);
-		for (let a of args) {
-			if (!a) continue;
-			if (isArray(a)) {
-				for (let c of a) this.add(c);
-			} else if (isString(a)) {
-				if (this.trimWhitespace) a = innerTextTrim(a);
-				if (a) this.addText(a);
-			} else if (a.isComponent) this.items.push(this.wrapItem(a));
-			else {
-				this.add(Widget.create(a, this.itemDefaults, {}));
+	set(prop, value, options = {}) {
+		//skip re-rendering (used for reading state from uncontrolled components)
+		if (options.internal && this.rawData) {
+			this.rawData[prop] = value;
+			this.data[prop] = value;
+		}
+		const setter = this.setters && this.setters[prop];
+		if (setter) {
+			if (options.immediate && isFunction(setter.reset)) setter.reset(value);
+			else setter(value);
+			return true;
+		}
+		const p = this.widget[prop];
+		if (p && typeof p == "object") {
+			if (p.debounce) {
+				this.definePropertySetter(
+					prop,
+					validatedDebounce(
+						(value) => this.doSet(prop, value),
+						() => this.dataSelector(this.store)[prop],
+						p.debounce,
+					),
+				);
+				this.set(prop, value, options);
+				return true;
+			}
+			if (p.throttle) {
+				this.definePropertySetter(
+					prop,
+					throttle((value) => this.doSet(prop, value), p.throttle),
+				);
+				this.set(prop, value, options);
+				return true;
 			}
 		}
+		return this.doSet(prop, value);
 	}
-	wrapItem(item) {
-		return item;
+	definePropertySetter(prop, setter) {
+		if (!this.setters) this.setters = {};
+		this.setters[prop] = setter;
 	}
-	addText(text) {
-		if (this.plainText || text.indexOf("{") == -1 || text.indexOf("}") == -1)
-			this.add(
-				Widget.create(
-					StaticText,
-					{
-						text: text,
-					},
-					{},
-				),
+	doSet(prop, value) {
+		let changed = false;
+		batchUpdates(() => {
+			const p = this.widget[prop];
+			if (isObject(p)) {
+				const pObj = p;
+				if (pObj.set) {
+					if (isFunction(pObj.set)) {
+						pObj.set(value, this);
+						changed = true;
+					} else if (isString(pObj.set)) {
+						this.controller?.[pObj.set](value, this);
+						changed = true;
+					}
+				} else if (pObj.action) {
+					const action = pObj.action(value, this);
+					this.store.dispatch(action);
+					changed = true;
+				} else if (isString(pObj.bind) || isAccessorChain(pObj.bind)) {
+					changed = this.store.set(pObj.bind, value);
+				}
+			} else if (isAccessorChain(p)) {
+				changed = this.store.set(p.toString(), value);
+			}
+		});
+		return changed;
+	}
+	nestedDataSet(key, value, dataConfig, useParentStore) {
+		let config = dataConfig[key];
+		if (!config)
+			throw new Error(`Unknown nested data key ${key}. Known keys are ${Object.keys(dataConfig).join(", ")}.`);
+		if (isAccessorChain(config))
+			config = {
+				bind: config.toString(),
+			};
+		if (config.bind) {
+			let store = this.store;
+			//in case of Rescope or DataProxy, bindings point to the data in the parent store
+			if (useParentStore && store.store) store = store.store;
+			return isUndefined(value) ? store.deleteItem(config.bind) : store.setItem(config.bind, value);
+		}
+		if (!config.set)
+			throw new Error(
+				`Cannot change nested data value for ${key} as it's read-only. Either define it as a binding or define a set function.`,
 			);
+		if (isString(config.set)) this.getControllerMethod(config.set)(value, this);
+		else if (isFunction(config.set)) config.set(value, this);
 		else
-			this.add(
-				Widget.create(
-					Text,
-					{
-						text: {
-							tpl: text,
-						},
-					},
-					{},
-				),
+			throw new Error(
+				`Cannot change nested data value for ${key} the defined setter is neither a function nor a controller method.`,
 			);
+		return true;
 	}
-	find(filter, options) {
-		if (!options) options = {};
-		if (!filter || !this.items) return [];
-		let alias = filter;
-		if (isString(filter)) filter = (w) => w.componentAlias == alias;
-		if (filter.isComponentType) filter = (w) => w instanceof alias;
-		let results = [];
-		for (let i = 0; i < this.items.length; i++) {
-			let w = this.items[i];
-			if (w && !w.initialized) w.init();
-			if (filter(w)) {
-				results.push(w);
-				if (options.first) break;
-			}
-			if (w && w.find) results.push(...w.find(filter, options));
-		}
-		return results;
-	}
-	findFirst(filter, options) {
-		return this.find(filter, {
-			...options,
-			first: true,
-		})[0];
-	}
-}
-ContainerBase.prototype.trimWhitespace = true;
-ContainerBase.prototype.plainText = true;
-ContainerBase.prototype.styled = false;
-// Closed type for direct usage - preserves ControllerProp ThisType
-class Container extends ContainerBase {}
-// Base class for styled containers with custom Config types
-class StyledContainerBase extends ContainerBase {}
-StyledContainerBase.prototype.styled = true;
-// Closed type for direct usage
-class StyledContainer extends StyledContainerBase {}
-
-// Base class for extending with custom Config types
-class PureContainerBase extends ContainerBase {}
-PureContainerBase.prototype.isPureContainer = true;
-// Closed type for direct usage - preserves ControllerProp ThisType
-class PureContainer extends PureContainerBase {}
-PureContainer.alias("pure-container", PureContainer);
-
-class DataAdapter extends Component {
-	constructor(config) {
-		super(config);
+	replaceState(state) {
+		this.cached.state = this.state;
+		this.state = state;
+		this.store.notify();
 	}
-	setFilter(filterFn) {
-		this.filterFn = filterFn;
+	getInstanceCache() {
+		if (!this.instanceCache)
+			this.instanceCache = new InstanceCache(this, this.widget.isPureContainer ? this.key : null);
+		return this.instanceCache;
 	}
-	sort(sorters) {}
-}
-DataAdapter.prototype.recordName = "$record";
-DataAdapter.prototype.indexName = "$index";
-DataAdapter.prototype.immutable = false;
-
-let contents = {};
-let localizations = {};
-let overrides = {};
-let defaults = {};
-let trackDefaults = false;
-class Localization {
-	static register(key) {
-		return (type) => {
-			this.registerPrototype(key, type);
-			return type;
-		};
+	clearChildrenCache() {
+		if (this.instanceCache) this.instanceCache.destroy();
 	}
-	static registerPrototype(key, type) {
-		contents[key] = type.prototype;
-		if (overrides[key]) this.override(key, overrides[key]);
+	getChild(context, widget, key, store) {
+		return this.getInstanceCache().getChild(widget, store ?? this.store, key);
 	}
-	static trackDefaults() {
-		trackDefaults = true;
+	getDetachedChild(widget, key, store) {
+		const child = widget.createInstance(key, this, store ?? this.store);
+		child.detached = true;
+		return child;
 	}
-	static restoreDefaults() {
-		for (let type in defaults) {
-			let proto = contents[type];
-			if (!proto) continue;
-			let d = defaults[type];
-			for (let key in d) proto[key] = d[key];
-		}
-		defaults = {};
+	prepareRenderCleanupChild(widget, store, keyPrefix, options) {
+		return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
 	}
-	static override(key, values) {
-		overrides[key] = values;
-		let p = contents[key];
-		if (p) {
-			if (trackDefaults && !defaults[key]) {
-				let d = (defaults[key] = {});
-				for (let key in values) d[key] = p[key];
+	getJsxEventProps() {
+		const { widget } = this;
+		if (!isArray(widget.jsxAttributes)) return null;
+		const props = {};
+		widget.jsxAttributes.forEach((attr) => {
+			if (attr.indexOf("on") == 0 && attr.length > 2) {
+				props[attr] = (e) => this.invoke(attr, e, this);
 			}
-			Object.assign(p, values);
-		}
+		});
+		return props;
 	}
-	static localize(culture, key, values) {
-		let l = localizations[culture];
-		if (!l) l = localizations[culture] = {};
-		l[key] = {
-			...l[key],
-			...values,
-		};
+	getCallback(methodName) {
+		const scope = this.widget;
+		const callback = scope[methodName];
+		if (typeof callback === "string") return this.getControllerMethod(callback);
+		if (typeof callback !== "function")
+			throw new Error(`Cannot invoke callback method ${methodName} as assigned value is not a function.`);
+		return callback.bind(scope);
 	}
-	static setCulture(culture) {
-		var l = localizations[culture];
-		if (l) {
-			for (var key in l) {
-				var content = contents[key];
-				if (content) Object.assign(content, l[key]);
+	/**
+	 * Finds the first controller in the instance tree matching the predicate
+	 * @param predicate Function to test each controller
+	 * @returns The matching controller or undefined
+	 */
+	findController(predicate) {
+		let at = this;
+		while (at?.controller != null) {
+			if (predicate(at.controller)) {
+				return at.controller;
 			}
+			at = at.parent;
 		}
+		return undefined;
 	}
-}
-
-// @ts-expect-error
-let stack = [
-	{
-		culture: "en",
-		numberCulture: null,
-		dateTimeCulture: null,
-		cache: {},
-		defaultCurrency: "USD",
-		dateEncoding: (date) => date.toISOString(),
-		timezone: null,
-	},
-];
-function getDefaultCulture() {
-	return stack[0];
-}
-function getCurrentCulture() {
-	return stack[stack.length - 1];
-}
-function getCurrentCultureCache() {
-	return getCurrentCulture().cache;
-}
-function pushCulture(cultureInfo) {
-	stack.push(cultureInfo);
-}
-function createCulture(cultureSpecs) {
-	let current = getCurrentCulture();
-	let info = {
-		culture: current.culture,
-		dateEncoding: current.dateEncoding,
-		defaultCurrency: current.defaultCurrency,
-		cache: {},
-	};
-	for (let key in cultureSpecs) {
-		if (!cultureSpecs[key]) continue;
-		info[key] = cultureSpecs[key];
-	}
-	return info;
-}
-function popCulture(cultureSpecs) {
-	if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
-	if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
-		Console.warn("Popped culture object does not match the current one.");
-	}
-	return stack.pop();
-}
-class Culture {
-	static setCulture(cultureCode) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.culture = cultureCode;
-		cultureSpecs.cache = {};
-		Localization.setCulture(cultureCode);
-		this.invalidateCache();
-	}
-	static setNumberCulture(cultureCode) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.numberCulture = cultureCode;
-		delete cultureSpecs.cache.numberCulture;
-		this.invalidateCache();
+	/**
+	 * Finds a controller of the specified type in the instance tree
+	 * @param type Controller class/constructor to find
+	 * @returns The matching controller cast to the specified type, or undefined
+	 */
+	findControllerByType(type) {
+		return this.findController((c) => c instanceof type);
 	}
-	static setDateTimeCulture(cultureCode) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.dateTimeCulture = cultureCode;
-		delete cultureSpecs.cache.dateTimeCulture;
-		this.invalidateCache();
+	/**
+	 * Gets the first controller in the instance tree matching the predicate
+	 * @param predicate Function to test each controller
+	 * @returns The matching controller
+	 * @throws Error if no matching controller is found
+	 */
+	getController(predicate) {
+		const controller = this.findController(predicate);
+		if (!controller) throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
+		return controller;
 	}
-	static setDefaultCurrency(currencyCode) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.defaultCurrency = currencyCode;
-		this.invalidateCache();
+	/**
+	 * Gets a controller of the specified type in the instance tree
+	 * @param type Controller class/constructor to find
+	 * @returns The matching controller cast to the specified type
+	 * @throws Error if no controller of the specified type is found
+	 */
+	getControllerByType(type) {
+		const controller = this.findControllerByType(type);
+		if (!controller) throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
+		return controller;
 	}
-	static setDefaultTimezone(timezone) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.timezone = timezone;
-		this.invalidateCache();
+	getControllerMethod(methodName) {
+		if (!this.controller)
+			throw new Error(`Cannot invoke controller method "${methodName}" as controller is not assigned to the widget.`);
+		const controller = this.findController((c) => !!c[methodName]);
+		if (!controller)
+			throw new Error(
+				`Cannot invoke controller method "${methodName}". The method cannot be found in any of the assigned controllers.`,
+			);
+		return controller[methodName].bind(controller);
 	}
-	static setDefaultDateEncoding(encoding) {
-		let cultureSpecs = getDefaultCulture();
-		cultureSpecs.dateEncoding = encoding;
-		this.invalidateCache();
+	invoke(methodName, ...args) {
+		return this.getCallback(methodName).apply(null, args);
 	}
-	static invalidateCache() {
-		GlobalCacheIdentifier.change();
-		invalidateExpressionCache();
-		invalidateStringTemplateCache();
+	invokeControllerMethod(methodName, ...args) {
+		return this.getControllerMethod(methodName).apply(null, args);
 	}
-	static get defaultCurrency() {
-		return getCurrentCulture().defaultCurrency;
+}
+function renderResultFix(res) {
+	return res != null && isDefined(res.content)
+		? res
+		: {
+				content: res,
+			};
+}
+class InstanceCache {
+	constructor(parent, keyPrefix) {
+		this.children = {};
+		this.parent = parent;
+		this.marked = {};
+		this.monitored = null;
+		this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
 	}
-	static get culture() {
-		return getCurrentCulture().culture;
+	getChild(widget, parentStore, key) {
+		const k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
+		let instance = this.children[k];
+		if (
+			!instance ||
+			instance.widget !== widget ||
+			(!instance.visible && (instance.widget.controller || instance.widget.onInit))
+		) {
+			instance = widget.createInstance(k, this.parent, parentStore);
+			this.children[k] = instance;
+		} else if (instance.parentStore !== parentStore) {
+			instance.setParentStore(parentStore);
+		}
+		return instance;
 	}
-	static getNumberCulture() {
-		let { cache, numberCulture, culture } = getCurrentCulture();
-		if (!cache.numberCulture) cache.numberCulture = new NumberCulture(numberCulture ?? culture);
-		return cache.numberCulture;
+	addChild(instance) {
+		this.marked[instance.key] = instance;
 	}
-	static getDateTimeCulture() {
-		let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
-		if (!cache.dateTimeCulture)
-			cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
-				defaultTimezone: timezone,
-			});
-		return cache.dateTimeCulture;
+	mark() {
+		this.marked = {};
 	}
-	static getDefaultDateEncoding() {
-		return getCurrentCulture().dateEncoding;
+	trackDestroy(instance) {
+		if (!this.monitored) this.monitored = {};
+		this.monitored[instance.key] = instance;
 	}
-	static getComparer(options) {
-		let { culture } = getCurrentCulture();
-		if (typeof Intl.Collator != "undefined") return new Intl.Collator(culture, options).compare;
-		return defaultCompare;
+	destroy() {
+		this.children = {};
+		this.marked = {};
+		if (!this.monitored) return;
+		for (const key in this.monitored) {
+			this.monitored[key].destroy();
+		}
+		this.monitored = null;
+	}
+	sweep() {
+		this.children = this.marked;
+		if (!this.monitored) return;
+		let activeCount = 0;
+		for (const key in this.monitored) {
+			const monitoredChild = this.monitored[key];
+			const child = this.children[key];
+			if (child !== monitoredChild || !monitoredChild.visible) {
+				monitoredChild.destroy();
+				delete this.monitored[key];
+				if (child === monitoredChild) delete this.children[key];
+			} else activeCount++;
+		}
+		if (activeCount === 0) this.monitored = null;
 	}
 }
 
-class ArrayAdapter extends DataAdapter {
+const VDOM = VDOM$1;
+let widgetId = 100;
+class Widget extends Component {
+	// runtime values
+	widgetId;
+	initialized;
+	components;
+	helpers;
+	selector;
+	nameMap;
+	version;
+	static optimizePrepare;
 	constructor(config) {
 		super(config);
+		this.widgetId = widgetId++;
+		if (isArray(this.jsxSpread)) {
+			if (!this.jsxAttributes) this.jsxAttributes = [];
+			this.jsxSpread.forEach((spread) => {
+				for (const key in spread) {
+					this[key] = spread[key];
+					this.jsxAttributes.push(key);
+				}
+			});
+		}
 	}
 	init() {
-		this.recordsAccessor = this.recordsBinding ? getAccessor(this.recordsBinding) : getAccessor(this.recordsAccessor);
-		this.recordName = this.recordName?.toString() || "$record";
-		this.indexName = this.indexName?.toString() || "$index";
-	}
-	initInstance(context, instance) {
-		if (!instance.recordStoreCache) {
-			instance.recordStoreCache = new WeakMap();
-			instance.cacheByKey = {};
-		}
-		if (!instance.recordsAccessor && this.recordsAccessor) {
-			instance.recordsAccessor = this.recordsAccessor.bindInstance
-				? this.recordsAccessor.bindInstance(instance)
-				: this.recordsAccessor;
+		if (this.styles) this.style = this.styles;
+		if (this.styled) this.style = parseStyle(this.style);
+		if (typeof this.if !== "undefined") this.visible = this.if;
+		this.declareData();
+		if (this.outerLayout) {
+			if (isArray(this.outerLayout)) throw new Error("Only single element outer layout is supported.");
+			//TODO: better handle the case when outer layout is an array. How to get around circular dependency to PureContainer
+			this.outerLayout = Widget.create(this.outerLayout, {});
 		}
+		if (this.contentFor) this.putInto = this.contentFor;
+		if (this.putInto) this.isContent = true;
+		if (isString(this.CSS)) this.CSS = CSSHelper.get(this.CSS);
+		this.initHelpers();
+		this.initComponents();
+		this.initialized = true;
 	}
-	getRecords(context, instance, records, parentStore) {
-		if (!instance.recordStoreCache) {
-			this.initInstance(context, instance);
+	initComponents(...args) {
+		if (args.length > 0) {
+			this.components = Object.assign({}, ...args);
+			for (const k in this.components) {
+				if (!this.components[k]) delete this.components[k];
+			}
 		}
-		return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
 	}
-	mapRecords(context, instance, records, parentStore, recordsAccessor) {
-		let result = [];
-		if (!instance.recordStoreCache) {
-			this.initInstance(context, instance);
-		}
-		if (isArray(records)) {
-			records.forEach((data, index) => {
-				if (this.filterFn && !this.filterFn(data)) return;
-				const record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
-				result.push(record);
-			});
-		}
-		if (this.sorter && !this.preserveOrder) {
-			result = this.sorter(result);
+	initHelpers(...args) {
+		if (args.length > 0) {
+			this.helpers = Object.assign({}, ...args);
 		}
-		return result;
 	}
-	mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
-		const key = this.cacheByKeyField && this.keyField && isObject(data) ? data[this.keyField] : null;
-		let recordStore = key != null ? instance.cacheByKey[key] : instance.recordStoreCache.get(data);
-		if (recordsAccessor) {
-			if (!recordStore) {
-				recordStore = new ArrayElementView({
-					store: parentStore,
-					arrayAccessor: recordsAccessor,
-					itemIndex: index,
-					recordAlias: this.recordName,
-					indexAlias: this.indexName,
-					immutable: this.immutable,
-					sealed: this.sealed,
-				});
-			} else {
-				recordStore.setStore(parentStore);
-				recordStore.setIndex(index);
-			}
-		} else {
-			if (!recordStore) {
-				recordStore = new ReadOnlyDataView({
-					store: parentStore,
-					data: {
-						[this.recordName]: data,
-						[this.indexName]: index,
-					},
-					immutable: this.immutable,
-					sealed: this.sealed,
-				});
-			} else {
-				recordStore.setStore(parentStore);
-				recordStore.setData({
-					[this.recordName]: data,
-					[this.indexName]: index,
-				});
-			}
-		}
-		if (key != null) {
-			instance.cacheByKey[key] = recordStore;
-		} else if (isObject(data)) {
-			instance.recordStoreCache.set(data, recordStore);
+	declareData(...args) {
+		const options = {};
+		if (this.styled) {
+			options.class =
+				options.className =
+				options.style =
+					{
+						structured: true,
+					};
 		}
-		return {
-			store: recordStore,
-			index: index,
-			data: data,
-			type: "data",
-			key: this.keyField && isObject(data) ? data[this.keyField] : index,
+		const props = {
+			visible: undefined,
+			mod: {
+				structured: true,
+			},
+			...options,
 		};
+		Object.assign(props, ...args);
+		this.selector = new StructuredSelector({
+			props: props,
+			values: this,
+		});
+		this.nameMap = this.selector.nameMap;
 	}
-	setFilter(filterFn) {
-		this.filterFn = filterFn;
+	prepareCSS(_context, { data }) {
+		data.classNames = this.CSS.expand(
+			this.CSS.block(this.baseClass, data.mod, data.stateMods),
+			data.class,
+			data.className,
+		);
+		data.style = parseStyle(data.style);
 	}
-	getComparer(sortOptions) {
-		return sortOptions ? Culture.getComparer(sortOptions) : undefined;
+	prepareData(context, instance) {
+		if (this.styled) this.prepareCSS(context, instance);
 	}
-	buildSorter(sorters) {
-		if (isArray(sorters) && sorters.length > 0) {
-			let dataAccessor;
-			let fieldValueMapper;
-			if (sorters.every((x) => x.field && x.value == null)) {
-				dataAccessor = (x) => x.data;
-				fieldValueMapper = (x) => ({
-					bind: x.field,
-				});
-			} else {
-				dataAccessor = (x) => x.store.getData();
-				fieldValueMapper = (x) => ({
-					bind: this.recordName + "." + x.field,
-				});
+	createInstance(key, parent, parentStore) {
+		return new Instance(this, key, parent, parentStore);
+	}
+	initInstance(_context, _instance) {}
+	initState(_context, _instance) {}
+	checkVisible(_context, _instance, data) {
+		return data.visible;
+	}
+	explore(context, instance, data) {
+		if (this.components) {
+			instance.components = {};
+			for (const cmp in this.components) {
+				const ins = instance.getChild(context, this.components[cmp], "cmp-" + cmp, instance.store);
+				if (ins.scheduleExploreIfVisible(context)) instance.components[cmp] = ins;
 			}
-			this.sorter = sorter(
-				sorters.map((x) => {
-					const s = Object.assign({}, x);
-					if (s.field && s.value == null) {
-						s.value = fieldValueMapper(s);
-					}
-					if (!s.comparer) {
-						s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
-					}
-					return s;
-				}),
-				dataAccessor,
-			);
-		} else {
-			this.sorter = undefined;
 		}
 	}
-	sort(sorters) {
-		if (sorters) {
-			this.buildSorter(sorters);
-		}
+	render(context, instance, key) {
+		Console.log(this);
+		throw new Error(
+			'Widget\'s render method should be overridden. This error usually happens if with incorrect imports, i.e. import { TextField } from "cx/data". Please check the console for details about the component configuration.',
+		);
+	}
+	update() {
+		this.version = (this.version || 0) + 1;
+	}
+	applyParentStore(instance) {
+		instance.store = instance.parentStore;
+		// check when this is actually needed, perhaps this is needed only for tables and repeated elements
+		// if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+	}
+	static resetCounter() {
+		widgetId = 100;
+	}
+}
+Widget.prototype.visible = true;
+Widget.prototype.memoize = true; //cache rendered content and use it if possible
+Widget.prototype.CSS = CSS;
+Widget.prototype.styled = false;
+Widget.namespace = "ui.";
+Widget.optimizePrepare = true;
+Widget.factory = (type, _config, _more) => {
+	throw new Error(`Invalid widget type: ${type}.`);
+};
+function contentAppend(result, w, prependSpace) {
+	if (w == null || w === false) return false;
+	if (isArray(w)) w.forEach((c) => contentAppend(result, c));
+	else if (isDefined(w.content) && !w.atomic) return contentAppend(result, w.content, false);
+	else {
+		if (prependSpace) result.push(" ");
+		result.push(w);
 	}
+	return true;
+}
+function getContentArray(x) {
+	let result = [];
+	contentAppend(result, x, false);
+	return result;
+}
+function getContent(x) {
+	let result = getContentArray(x);
+	if (result.length == 0) return null;
+	if (result.length == 1) return result[0];
+	return result;
 }
-ArrayAdapter.prototype.immutable = false;
-ArrayAdapter.prototype.sealed = false;
-ArrayAdapter.prototype.keyField = null;
-ArrayAdapter.prototype.cacheByKeyField = true;
-ArrayAdapter.prototype.isTreeAdapter = false;
-ArrayAdapter.autoInit = true;
 
-class UseParentLayout extends PureContainer {}
-UseParentLayout.prototype.noLayout = true;
-UseParentLayout.prototype.useParentLayout = true;
+class StaticText extends Widget {
+	render() {
+		return this.text;
+	}
+}
+Widget.alias("static-text", StaticText);
 
-class Repeater extends ContainerBase {
-	recordsAccessor;
-	item;
-	filter;
+class Text extends Widget {
+	constructor(config) {
+		super(config);
+	}
+	init() {
+		if (!this.value && (this.tpl || this.expr || this.bind))
+			this.value = {
+				tpl: this.tpl,
+				expr: this.expr,
+				bind: this.bind,
+			};
+		super.init();
+	}
 	declareData(...args) {
 		super.declareData(
 			{
-				records: undefined,
-				sorters: undefined,
-				sortField: undefined,
-				sortDirection: undefined,
-				filterParams: {
-					structured: true,
-				},
+				value: undefined,
 			},
 			...args,
 		);
 	}
-	init() {
-		this.recordsAccessor = getAccessor(this.records);
-		if (this.recordAlias) this.recordName = this.recordAlias;
-		if (this.indexAlias) this.indexName = this.indexAlias;
-		this.dataAdapter = ArrayAdapter.create({
-			...this.dataAdapter,
-			recordName: this.recordName,
-			indexName: this.indexName,
-			keyField: this.keyField,
-			immutable: this.immutable,
-			sealed: this.sealed,
-			recordsAccessor: this.recordsAccessor,
-			sortOptions: this.sortOptions,
-		});
-		this.item = PureContainer.create({
-			children: this.items || this.children,
-			layout: UseParentLayout,
-		});
+	render(context, { data }, key) {
+		return data.value != null ? data.value : "";
+	}
+}
+Widget.alias("text", Text);
+
+function exploreChildren(context, instance, children, previousResult, key, store) {
+	let newChildren = previousResult || [];
+	let oldChildren = previousResult || newChildren;
+	let identical = previousResult ? 0 : -1;
+	for (let c = 0; c < children.length; c++) {
+		let cell = instance.getChild(context, children[c], key, store);
+		if (cell.checkVisible(context)) {
+			if (identical >= 0) {
+				if (cell == oldChildren[identical]) identical++;
+				else {
+					newChildren = newChildren.slice(0, identical);
+					identical = -1;
+					newChildren.push(cell);
+				}
+			} else newChildren.push(cell);
+			context.exploreStack.push(cell);
+			if (cell.needsExploreCleanup) context.exploreStack.push(cell);
+		}
+	}
+	if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
+	return newChildren;
+}
+
+// Base class for extending with custom Config types
+class ContainerBase extends Widget {
+	init(context) {
+		if (typeof this.ws !== "undefined") this.preserveWhitespace = this.ws;
+		if (this.preserveWhitespace) this.trimWhitespace = false;
+		let items = this.items || this.children || [];
 		delete this.children;
 		this.items = [];
+		if (this.layout) {
+			let layout = Container.create(this.layout, {
+				items,
+			});
+			layout.init(context);
+			this.layout = null;
+			if ("noLayout" in layout && layout.noLayout) {
+				this.useParentLayout = true;
+				this.add(items);
+			} else {
+				this.add(layout);
+				this.layout = layout;
+			}
+		} else {
+			this.add(items);
+		}
 		super.init();
 	}
-	initInstance(context, instance) {
-		this.dataAdapter.initInstance(context, instance);
+	exploreItems(context, instance, items) {
+		instance.children = exploreChildren(context, instance, items, instance.cached.children, null, instance.store);
+		if (instance.cache("children", instance.children)) instance.markShouldUpdate(context);
 	}
-	applyParentStore(instance) {
-		super.applyParentStore(instance);
-		// force prepareData to execute again and propagate the store change to the records
-		if (instance.cached) delete instance.cached.rawData;
+	explore(context, instance) {
+		super.explore(context, instance);
+		this.exploreItems(context, instance, this.items);
 	}
-	prepareData(context, instance) {
-		let { data } = instance;
-		if (data.sortField)
-			data.sorters = [
-				{
-					field: data.sortField,
-					direction: data.sortDirection || "ASC",
-				},
-			];
-		this.dataAdapter.sort(data.sorters);
-		let filter = null;
-		if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
-		else if (this.filter) filter = (item) => this.filter(item, data.filterParams);
-		this.dataAdapter.setFilter(filter);
-		instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
-		if (this.onTrackMappedRecords) {
-			instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
-		}
-		super.prepareData(context, instance);
+	render(context, instance, key) {
+		return this.renderChildren(context, instance, key);
 	}
-	explore(context, instance, data) {
-		let instances = [];
-		instance.mappedRecords.forEach((record) => {
-			let subInstance = instance.getChild(context, this.item, record.key, record.store);
-			let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
-			subInstance.record = record;
-			if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
-				instances.push(subInstance);
-				subInstance.shouldUpdate = false;
-			} else if (subInstance.scheduleExploreIfVisible(context)) instances.push(subInstance);
-		});
-		instance.children = instances;
+	renderChildren(_context, instance, key) {
+		let preserveComplexContent = this.useParentLayout;
+		function append(result, r) {
+			if (r == null) return;
+			//react element
+			if (!r.hasOwnProperty("content")) {
+				contentAppend(result, r);
+				return;
+			}
+			if (r.useParentLayout) return r.content.forEach((x) => append(result, x));
+			if (r.atomic || preserveComplexContent) {
+				result.push(r);
+			} else {
+				let first = true;
+				for (let k in r) if (contentAppend(result, r[k], !first)) first = false;
+			}
+		}
+		let result = [];
+		for (let i = 0; i < instance.children.length; i++) {
+			append(result, instance.children[i].vdom);
+		}
+		if (this.useParentLayout)
+			return {
+				useParentLayout: true,
+				content: result,
+			};
+		return result;
 	}
-}
-Repeater.prototype.recordName = "$record";
-Repeater.prototype.indexName = "$index";
-Repeater.prototype.cached = false;
-Repeater.prototype.immutable = false;
-Repeater.prototype.sealed = false;
-Repeater.prototype.isPureContainer = true;
-Widget.alias("repeater", Repeater);
-
-class StructuredInstanceDataAccessor {
-	instance;
-	dataConfig;
-	useParentStore;
-	dataSelector;
-	constructor(config) {
-		this.instance = config.instance;
-		this.dataConfig = config.data;
-		this.useParentStore = config.useParentStore;
-		this.dataSelector = getSelector(config.data);
-		if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
+	clear() {
+		if (this.layout) this.layout.clear();
+		else this.items = [];
 	}
-	getSelector() {
-		return this.dataSelector;
+	add(...args) {
+		if (this.layout) return this.layout.add(...args);
+		for (let a of args) {
+			if (!a) continue;
+			if (isArray(a)) {
+				for (let c of a) this.add(c);
+			} else if (isString(a)) {
+				if (this.trimWhitespace) a = innerTextTrim(a);
+				if (a) this.addText(a);
+			} else if (a.isComponent) this.items.push(this.wrapItem(a));
+			else {
+				this.add(Widget.create(a, this.itemDefaults, {}));
+			}
+		}
 	}
-	get() {
-		return this.dataSelector.get(this.instance.store.getData());
+	wrapItem(item) {
+		return item;
 	}
-	setItem(key, value) {
-		return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
+	addText(text) {
+		if (this.plainText || text.indexOf("{") == -1 || text.indexOf("}") == -1)
+			this.add(
+				Widget.create(
+					StaticText,
+					{
+						text: text,
+					},
+					{},
+				),
+			);
+		else
+			this.add(
+				Widget.create(
+					Text,
+					{
+						text: {
+							tpl: text,
+						},
+					},
+					{},
+				),
+			);
 	}
-	containsKey(key) {
-		return this.dataConfig.hasOwnProperty(key);
+	find(filter, options) {
+		if (!options) options = {};
+		if (!filter || !this.items) return [];
+		let alias = filter;
+		if (isString(filter)) filter = (w) => w.componentAlias == alias;
+		if (filter.isComponentType) filter = (w) => w instanceof alias;
+		let results = [];
+		for (let i = 0; i < this.items.length; i++) {
+			let w = this.items[i];
+			if (w && !w.initialized) w.init();
+			if (filter(w)) {
+				results.push(w);
+				if (options.first) break;
+			}
+			if (w && w.find) results.push(...w.find(filter, options));
+		}
+		return results;
 	}
-	getKeys() {
-		return Object.keys(this.dataConfig);
+	findFirst(filter, options) {
+		return this.find(filter, {
+			...options,
+			first: true,
+		})[0];
 	}
 }
+ContainerBase.prototype.trimWhitespace = true;
+ContainerBase.prototype.plainText = true;
+ContainerBase.prototype.styled = false;
+// Closed type for direct usage - preserves ControllerProp ThisType
+class Container extends ContainerBase {}
+// Base class for styled containers with custom Config types
+class StyledContainerBase extends ContainerBase {}
+StyledContainerBase.prototype.styled = true;
+// Closed type for direct usage
+class StyledContainer extends StyledContainerBase {}
 
-class Rescope extends PureContainerBase {
-	init() {
-		this.binding = Binding.get(this.bind);
-		if (this.rootAlias) this.rootName = this.rootAlias;
-		super.init();
-	}
-	initInstance(context, instance) {
-		instance.store = new ZoomIntoPropertyView({
-			store: instance.parentStore,
-			binding: this.binding,
-			rootName: this.rootName,
-			nestedData: isObject(this.data)
-				? new StructuredInstanceDataAccessor({
-						instance,
-						data: this.data,
-						useParentStore: true,
-					})
-				: undefined,
-		});
-		super.initInstance(context, instance);
+// Base class for extending with custom Config types
+class PureContainerBase extends ContainerBase {}
+PureContainerBase.prototype.isPureContainer = true;
+// Closed type for direct usage - preserves ControllerProp ThisType
+class PureContainer extends PureContainerBase {}
+PureContainer.alias("pure-container", PureContainer);
+
+class DataAdapter extends Component {
+	constructor(config) {
+		super(config);
 	}
-	applyParentStore(instance) {
-		instance.store.setStore(instance.parentStore);
+	setFilter(filterFn) {
+		this.filterFn = filterFn;
 	}
+	sort(sorters) {}
 }
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-Widget.alias("rescope", Rescope);
-
-let isBatching = 0;
-let promiseSubscribers = new SubscriberList();
-function batchUpdates(callback) {
-	if (VDOM.DOM.unstable_batchedUpdates)
-		VDOM.DOM.unstable_batchedUpdates(() => {
-			isBatching++;
-			try {
-				callback();
-			} finally {
-				isBatching--;
-			}
-		});
-	else callback();
-}
-function isBatchingUpdates() {
-	return isBatching > 0;
-}
-function notifyBatchedUpdateStarting() {
-	promiseSubscribers.execute((x) => {
-		x.pending++;
-	});
-}
-function notifyBatchedUpdateCompleted() {
-	promiseSubscribers.execute((x) => {
-		let cb = x;
-		cb.finished++;
-		if (cb.finished >= cb.pending) cb.complete(true);
-	});
-}
-function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000) {
-	let done = false;
-	let timer;
-	let unsubscribe;
-	const update = {
-		pending: 0,
-		finished: 0,
-		complete: (success) => {
-			if (!done) {
-				done = true;
-				if (timer) clearInterval(timer);
-				if (unsubscribe) unsubscribe();
-				notifyCallback(!!success);
-			}
-		},
-	};
-	unsubscribe = promiseSubscribers.subscribe(update);
-	batchUpdates(callback);
-	if (update.pending <= update.finished) update.complete(true);
-	else timer = setTimeout(update.complete, timeout);
-}
+DataAdapter.prototype.recordName = "$record";
+DataAdapter.prototype.indexName = "$index";
+DataAdapter.prototype.immutable = false;
 
-/*
- *  Purpose of FocusManager is to provide focusout notifications.
- *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
- *  to determine if focus went outside or stayed inside the component.
- */
-let subscribers$3 = new SubscriberList(),
-	timerInterval = 300,
-	timerId = null;
-let lastActiveElement = null;
-let pending = false;
-class FocusManager {
-	static subscribe(callback) {
-		let unsubscribe = subscribers$3.subscribe(callback);
-		checkTimer();
-		return unsubscribe;
+let contents = {};
+let localizations = {};
+let overrides = {};
+let defaults = {};
+let trackDefaults = false;
+class Localization {
+	static register(key) {
+		return (type) => {
+			this.registerPrototype(key, type);
+			return type;
+		};
 	}
-	static onFocusOut(el, callback) {
-		let active = isSelfOrDescendant(el, getActiveElement());
-		return this.subscribe((focusedEl) => {
-			if (!active) active = isSelfOrDescendant(el, getActiveElement());
-			else if (!isSelfOrDescendant(el, focusedEl)) {
-				active = false;
-				callback(focusedEl);
-			}
-		});
+	static registerPrototype(key, type) {
+		contents[key] = type.prototype;
+		if (overrides[key]) this.override(key, overrides[key]);
 	}
-	static oneFocusOut(el, callback) {
-		this.nudge();
-		let off = this.subscribe((focusedEl) => {
-			if (!isSelfOrDescendant(el, focusedEl)) {
-				callback(focusedEl);
-				off();
-			}
-		});
-		return off;
+	static trackDefaults() {
+		trackDefaults = true;
 	}
-	static nudge() {
-		if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
-			if (!pending) {
-				pending = true;
-				setTimeout(function () {
-					pending = false;
-					if (getActiveElement() !== lastActiveElement) {
-						lastActiveElement = getActiveElement();
-						batchUpdates(() => {
-							subscribers$3.notify(lastActiveElement);
-						});
-						checkTimer();
-					}
-				}, 0);
-			}
+	static restoreDefaults() {
+		for (let type in defaults) {
+			let proto = contents[type];
+			if (!proto) continue;
+			let d = defaults[type];
+			for (let key in d) proto[key] = d[key];
 		}
+		defaults = {};
 	}
-	static focus(el) {
-		el.focus();
-		this.nudge();
-	}
-	static focusFirst(el) {
-		let focusable = findFirst(el, isFocusable);
-		if (focusable) this.focus(focusable);
-		return focusable;
-	}
-	static focusFirstChild(el) {
-		let focusable = findFirstChild(el, isFocusable);
-		if (focusable) this.focus(focusable);
-		return focusable;
-	}
-	static focusNext(el) {
-		let next = el,
-			skip = true;
-		do {
-			if (!skip) {
-				let focusable = this.focusFirst(next);
-				if (focusable) return focusable;
-			}
-			if (next.nextSibling) {
-				next = next.nextSibling;
-				skip = false;
-			} else {
-				next = next.parentNode;
-				skip = true;
+	static override(key, values) {
+		overrides[key] = values;
+		let p = contents[key];
+		if (p) {
+			if (trackDefaults && !defaults[key]) {
+				let d = (defaults[key] = {});
+				for (let key in values) d[key] = p[key];
 			}
-		} while (next);
+			Object.assign(p, values);
+		}
 	}
-	static setInterval(interval) {
-		timerInterval = interval;
-		checkTimer();
+	static localize(culture, key, values) {
+		let l = localizations[culture];
+		if (!l) l = localizations[culture] = {};
+		l[key] = {
+			...l[key],
+			...values,
+		};
 	}
-}
-function oneFocusOut(component, el, callback) {
-	if (!component.oneFocusOut)
-		component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
-			delete component.oneFocusOut;
-			callback(focus);
-		});
-}
-function offFocusOut(component) {
-	if (component.oneFocusOut) {
-		component.oneFocusOut();
-		delete component.oneFocusOut;
+	static setCulture(culture) {
+		var l = localizations[culture];
+		if (l) {
+			for (var key in l) {
+				var content = contents[key];
+				if (content) Object.assign(content, l[key]);
+			}
+		}
 	}
 }
-function preventFocus(e) {
-	//Focus can be prevented only on mousedown event. On touchstart this will not work
-	//preventDefault cannot be used as it prevents scrolling
-	if (e.type !== "mousedown") return;
-	e.preventDefault();
-	unfocusElement(e.currentTarget, false);
+
+// @ts-expect-error
+let stack = [
+	{
+		culture: "en",
+		numberCulture: null,
+		dateTimeCulture: null,
+		cache: {},
+		defaultCurrency: "USD",
+		dateEncoding: (date) => date.toISOString(),
+		timezone: null,
+	},
+];
+function getDefaultCulture() {
+	return stack[0];
 }
-function checkTimer() {
-	let shouldRun = !subscribers$3.isEmpty();
-	if (shouldRun && !timerId)
-		timerId = setInterval(() => {
-			FocusManager.nudge();
-		}, timerInterval);
-	if (!shouldRun && timerId) {
-		clearInterval(timerId);
-		timerId = null;
-	}
+function getCurrentCulture() {
+	return stack[stack.length - 1];
 }
-function preventFocusOnTouch(e, force = false) {
-	if (force || isTouchEvent()) preventFocus(e);
+function getCurrentCultureCache() {
+	return getCurrentCulture().cache;
 }
-function unfocusElement(target = null, unfocusParentOverlay = true) {
-	const activeElement = getActiveElement();
-	if (!target) target = activeElement;
-	if (unfocusParentOverlay) {
-		let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
-		if (focusableOverlayContainer) target = focusableOverlayContainer;
+function pushCulture(cultureInfo) {
+	stack.push(cultureInfo);
+}
+function createCulture(cultureSpecs) {
+	let current = getCurrentCulture();
+	let info = {
+		culture: current.culture,
+		dateEncoding: current.dateEncoding,
+		defaultCurrency: current.defaultCurrency,
+		cache: {},
+	};
+	for (let key in cultureSpecs) {
+		if (!cultureSpecs[key]) continue;
+		info[key] = cultureSpecs[key];
 	}
-	//find the closest focusable parent of the target element and focus it instead
-	let focusableParent = closestParent(
-		target,
-		(el) => isFocusable(el) && (!unfocusParentOverlay || !!el.dataset?.focusableOverlayContainer),
-	);
-	if (focusableParent && focusableParent !== document.body)
-		focusableParent.focus({
-			preventScroll: true,
-		});
-	else activeElement.blur();
-	FocusManager.nudge();
+	return info;
 }
-
-let subscribers$2 = new SubscriberList();
-class ResizeManager {
-	static subscribe(callback) {
-		return subscribers$2.subscribe(callback);
+function popCulture(cultureSpecs) {
+	if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
+	if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
+		Console.warn("Popped culture object does not match the current one.");
 	}
-	static notify() {
-		batchUpdates(() => {
-			subscribers$2.notify();
-		});
+	return stack.pop();
+}
+class Culture {
+	static setCulture(cultureCode) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.culture = cultureCode;
+		cultureSpecs.cache = {};
+		Localization.setCulture(cultureCode);
+		this.invalidateCache();
 	}
-	static trackElement(el, callback) {
-		if (typeof ResizeObserver !== "function") return this.subscribe(() => callback([]));
-		let obs = new ResizeObserver(callback);
-		obs.observe(el);
-		return () => {
-			obs.disconnect();
-		};
+	static setNumberCulture(cultureCode) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.numberCulture = cultureCode;
+		delete cultureSpecs.cache.numberCulture;
+		this.invalidateCache();
 	}
-}
-if (typeof window != "undefined") window.addEventListener("resize", () => ResizeManager.notify());
-
-let lastZIndex = 10000;
-class ZIndexManager {
-	static next() {
-		return ++lastZIndex;
+	static setDateTimeCulture(cultureCode) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.dateTimeCulture = cultureCode;
+		delete cultureSpecs.cache.dateTimeCulture;
+		this.invalidateCache();
 	}
-	static reset(zIndex) {
-		lastZIndex = zIndex;
+	static setDefaultCurrency(currencyCode) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.defaultCurrency = currencyCode;
+		this.invalidateCache();
 	}
-}
-
-const Format = Format$1;
-let cultureSensitiveFormatsRegistered = false;
-function resolveNumberFormattingFlags(flags) {
-	if (!flags) return null;
-	let result = {};
-	if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
-	if (flags.indexOf("c") >= 0) result.notation = "compact";
-	if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
-	return result;
-}
-function enableCultureSensitiveFormatting() {
-	if (cultureSensitiveFormatsRegistered) return;
-	cultureSensitiveFormatsRegistered = true;
-	Format$1.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-		let culture = Culture.getNumberCulture();
-		let formatter = culture.getFormatter({
-			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-			...resolveNumberFormattingFlags(flags),
-		});
-		return (value) => formatter.format(value);
-	});
-	Format$1.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
-		let culture = Culture.getNumberCulture();
-		currency = currency || Culture.defaultCurrency;
-		let formatter = culture.getFormatter({
-			style: "currency",
-			currency: currency,
-			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-			...resolveNumberFormattingFlags(flags),
-		});
-		return (value) => formatter.format(value);
-	});
-	Format$1.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-		let culture = Culture.getNumberCulture();
-		let formatter = culture.getFormatter({
-			style: "percent",
-			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-			...resolveNumberFormattingFlags(flags),
-		});
-		return (value) => formatter.format(value);
-	});
-	Format$1.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-		let culture = Culture.getNumberCulture();
-		let formatter = culture.getFormatter({
-			style: "percent",
-			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-			...resolveNumberFormattingFlags(flags),
-		});
-		return (value) => formatter.format(value / 100);
-	});
-	Format$1.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
-		let culture = Culture.getDateTimeCulture();
-		let formatter = culture.getFormatter(format);
-		return (value) => formatter.format(parseDateInvariant(value));
-	});
-	Format$1.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
-		let culture = Culture.getDateTimeCulture();
-		let formatter = culture.getFormatter(format);
-		return (value) => formatter.format(parseDateInvariant(value));
-	});
-	Format$1.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
-		let culture = Culture.getDateTimeCulture();
-		let formatter = culture.getFormatter(format);
-		return (value) => formatter.format(parseDateInvariant(value));
-	});
-	setGetFormatCacheCallback(() => {
-		let cache = getCurrentCultureCache();
-		if (!cache.formatCache) cache.formatCache = {};
-		return cache.formatCache;
-	});
-	setGetExpressionCacheCallback(() => {
-		let cache = getCurrentCultureCache();
-		if (!cache.exprCache) cache.exprCache = {};
-		return cache.exprCache;
-	});
-	setGetStringTemplateCacheCallback(() => {
-		let cache = getCurrentCultureCache();
-		if (!cache.strTplCache) cache.strTplCache = {};
-		return cache.strTplCache;
-	});
-	GlobalCacheIdentifier.change();
-}
-
-let instanceId = 1000;
-/**
- * Base Instance class
- */
-class Instance {
-	// Selectors
-	dataSelector;
-	// Lifecycle flags
-	initialized;
-	destroySubscriptions;
-	helpers;
-	components;
-	constructor(widget, key, parent, parentStore) {
-		this.widget = widget;
-		this.key = key;
-		this.id = String(++instanceId);
-		this.cached = {};
-		this.parent = parent;
-		this.parentStore = parentStore ?? parent?.store;
-		if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
+	static setDefaultTimezone(timezone) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.timezone = timezone;
+		this.invalidateCache();
 	}
-	setParentStore(parentStore) {
-		this.parentStore = parentStore;
-		this.widget.applyParentStore(this);
+	static setDefaultDateEncoding(encoding) {
+		let cultureSpecs = getDefaultCulture();
+		cultureSpecs.dateEncoding = encoding;
+		this.invalidateCache();
 	}
-	init(context) {
-		// widget is initialized when the first instance is initialized
-		if (!this.widget.initialized) {
-			this.widget.init();
-			this.widget.initialized = true;
-		}
-		if (!this.dataSelector) {
-			this.widget.selector.init(this.parentStore);
-			this.dataSelector = this.widget.selector.createStoreSelector();
-		}
-		// init instance might change the store, so this must go before the controller initialization
-		this.widget.initInstance(context, this);
-		// initInstance can set the store, otherwise use parent store
-		if (!this.store) this.store = this.parentStore;
-		if (this.widget.onInit) this.widget.onInit(context, this);
-		this.widget.initState(context, this);
-		if (this.widget.controller)
-			this.controller = Controller.create(this.widget.controller, {
-				widget: this.widget,
-				instance: this,
-				store: this.store,
-			});
-		if (
-			this.widget.exploreCleanup ||
-			this.widget.outerLayout ||
-			this.widget.isContent ||
-			this.widget.controller ||
-			this.widget.prepareCleanup
-		)
-			this.needsExploreCleanup = true;
-		if (this.widget.prepare || this.widget.controller) this.needsPrepare = true;
-		if (this.widget.cleanup || this.widget.controller) this.needsCleanup = true;
-		this.initialized = true;
+	static invalidateCache() {
+		GlobalCacheIdentifier.change();
+		invalidateExpressionCache();
+		invalidateStringTemplateCache();
 	}
-	checkVisible(context) {
-		if (!this.initialized) this.init(context);
-		const wasVisible = this.visible;
-		this.rawData = this.dataSelector(this.store);
-		this.visible = this.widget.checkVisible(context, this, this.rawData);
-		if (this.visible && !this.detached) this.parent.instanceCache.addChild(this);
-		this.explored = false;
-		this.prepared = false;
-		if (!this.visible && wasVisible) this.destroy();
-		return this.visible;
+	static get defaultCurrency() {
+		return getCurrentCulture().defaultCurrency;
 	}
-	scheduleExploreIfVisible(context) {
-		if (this.checkVisible(context)) {
-			context.exploreStack.push(this);
-			if (this.needsExploreCleanup) context.exploreStack.push(this);
-			return true;
-		}
-		return false;
+	static get culture() {
+		return getCurrentCulture().culture;
 	}
-	cache(key, value) {
-		const oldValue = this.cached[key];
-		if (oldValue === value) return false;
-		if (!this.cacheList) this.cacheList = {};
-		this.cacheList[key] = value;
-		return true;
+	static getNumberCulture() {
+		let { cache, numberCulture, culture } = getCurrentCulture();
+		if (!cache.numberCulture) cache.numberCulture = new NumberCulture(numberCulture ?? culture);
+		return cache.numberCulture;
 	}
-	markShouldUpdate(context) {
-		let ins = this;
-		let renderList = this.renderList;
-		renderList.markReverseIndex();
-		//notify all parents that child state changed to bust up caching
-		while (ins && !ins.shouldUpdate && ins.explored) {
-			if (ins.renderList !== renderList) {
-				renderList.reverse();
-				renderList = ins.renderList;
-				renderList.markReverseIndex();
-			}
-			ins.shouldUpdate = true;
-			renderList.data.push(ins);
-			ins = ins.widget.isContent
-				? ins.contentPlaceholder
-				: ins.parent?.outerLayout === ins
-					? ins.parent?.parent
-					: ins.parent;
-		}
-		renderList.reverse();
+	static getDateTimeCulture() {
+		let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
+		if (!cache.dateTimeCulture)
+			cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
+				defaultTimezone: timezone,
+			});
+		return cache.dateTimeCulture;
 	}
-	explore(context) {
-		if (!this.visible) throw new Error("Explore invisible!");
-		if (this.explored) {
-			if (this.widget.prepareCleanup) context.prepareList.push(this);
-			if (this.widget.exploreCleanup) this.widget.exploreCleanup(context, this);
-			if (this.parent?.outerLayout === this) context.popNamedValue("content", "body");
-			if (this.widget.controller) context.pop("controller");
-			return;
-		}
-		this.explored = true;
-		if (this.needsPrepare) context.prepareList.push(this);
-		else this.prepared = true;
-		if (this.needsCleanup) context.cleanupList.push(this);
-		if (this.instanceCache) this.instanceCache.mark();
-		//controller may reconfigure the widget and need to go before shouldUpdate calculation
-		this.parentOptions = context.parentOptions;
-		if (!this.controller) {
-			if (context.controller) this.controller = context.controller;
-			else if (this.parent?.controller) this.controller = this.parent?.controller;
-		}
-		this.destroyTracked = false;
-		if (this.controller) {
-			if (this.widget.controller) {
-				if (!this.controller.initialized) {
-					this.controller.init(context);
-					this.controller.initialized = true;
-				}
-				context.push("controller", this.controller);
-				this.controller.explore(context);
-				if (this.controller.onDestroy && this.controller.widget == this.widget) this.trackDestroy();
-			}
-		}
-		if (this.widget.onDestroy || isNonEmptyArray(this.destroySubscriptions)) this.trackDestroy();
-		this.renderList = this.assignedRenderList || this.parent?.renderList || context.getRootRenderList();
-		let shouldUpdate =
-			this.rawData !== this.cached.rawData ||
-			this.state !== this.cached.state ||
-			this.widget.version !== this.cached.widgetVersion ||
-			this.cached.globalCacheIdentifier !== GlobalCacheIdentifier.get();
-		if (shouldUpdate) {
-			this.data = {
-				...this.rawData,
-			};
-			this.widget.prepareData(context, this);
-			debug(processDataFlag, this.widget);
-		}
-		//onExplore might set the outer layout
-		if (this.widget.onExplore) this.widget.onExplore(context, this);
-		if (this.parent?.outerLayout === this) {
-			this.renderList = this.renderList.insertRight();
-			context.pushNamedValue("content", "body", this.parent);
-		}
-		if (this.widget.outerLayout) {
-			this.outerLayout = this.getChild(context, this.widget.outerLayout, null, this.store);
-			this.outerLayout.scheduleExploreIfVisible(context);
-			this.renderList = this.renderList.insertLeft();
-		}
-		if (this.widget.isContent) {
-			this.contentPlaceholder = context.contentPlaceholder && context.contentPlaceholder[this.widget.putInto];
-			if (this.contentPlaceholder) context.contentPlaceholder[this.widget.putInto](this);
-			else {
-				this.renderList = this.renderList.insertLeft();
-				context.pushNamedValue("content", this.widget.putInto, this);
-				if (!context.contentList) context.contentList = {};
-				let list = context.contentList[this.widget.putInto];
-				if (!list) list = context.contentList[this.widget.putInto] = [];
-				list.push(this);
-			}
-		}
-		this.shouldUpdate = false;
-		if (shouldUpdate || this.childStateDirty || !this.widget.memoize) this.markShouldUpdate(context);
-		context.exploreStack.hop();
-		if (this.widget.helpers) {
-			this.helpers = {};
-			for (let cmp in this.widget.helpers) {
-				let helper = this.widget.helpers[cmp];
-				if (helper) {
-					let ins = this.getChild(context, helper);
-					if (ins.scheduleExploreIfVisible(context)) this.helpers[cmp] = ins;
-				}
-			}
-		}
-		//TODO: check do we need to pass data here?
-		this.widget.explore(context, this, this.data);
+	static getDefaultDateEncoding() {
+		return getCurrentCulture().dateEncoding;
 	}
-	prepare(context) {
-		if (!this.visible) throw new Error("Prepare invisible!");
-		if (this.prepared) {
-			if (this.widget.prepareCleanup) this.widget.prepareCleanup(context, this);
-			return;
-		}
-		this.prepared = true;
-		if (this.widget.prepare) this.widget.prepare(context, this);
-		if (this.widget.controller && this.controller?.prepare) this.controller.prepare(context);
+	static getComparer(options) {
+		let { culture } = getCurrentCulture();
+		if (typeof Intl.Collator != "undefined") return new Intl.Collator(culture, options).compare;
+		return defaultCompare;
 	}
-	render(context) {
-		if (!this.visible) throw new Error("Render invisible!");
-		if (this.shouldUpdate) {
-			debug(renderFlag, this.widget, this.key);
-			const vdom = renderResultFix(this.widget.render(context, this, this.key));
-			if (this.widget.isContent || this.outerLayout) this.contentVDOM = vdom;
-			else this.vdom = vdom;
-		}
-		if (this.cacheList) {
-			for (const key in this.cacheList) {
-				this.cached[key] = this.cacheList[key];
-			}
-		}
-		this.cacheList = null;
-		this.cached.rawData = this.rawData;
-		this.cached.data = this.data;
-		this.cached.state = this.state;
-		this.cached.widgetVersion = this.widget.version;
-		this.cached.globalCacheIdentifier = GlobalCacheIdentifier.get();
-		this.childStateDirty = false;
-		if (this.instanceCache) this.instanceCache.sweep();
-		if (this.parent?.outerLayout === this) {
-			//if outer layouts are chained we need to find the originating element (last element with OL set)
-			let parent = this.parent;
-			while (parent.parent?.outerLayout == parent) parent = parent.parent;
-			parent.vdom = this.vdom;
-		}
-		return this.vdom;
+}
+
+class ArrayAdapter extends DataAdapter {
+	constructor(config) {
+		super(config);
 	}
-	cleanup(context) {
-		if (this.widget.controller && this.controller?.cleanup) this.controller.cleanup(context);
-		if (this.widget.cleanup) this.widget.cleanup(context, this);
+	init() {
+		this.recordsAccessor = this.recordsBinding ? getAccessor(this.recordsBinding) : getAccessor(this.recordsAccessor);
+		this.recordName = this.recordName?.toString() || "$record";
+		this.indexName = this.indexName?.toString() || "$index";
 	}
-	trackDestroy() {
-		if (!this.destroyTracked) {
-			this.destroyTracked = true;
-			if (this.parent && !this.detached) this.parent.trackDestroyableChild(this);
+	initInstance(context, instance) {
+		if (!instance.recordStoreCache) {
+			instance.recordStoreCache = new WeakMap();
+			instance.cacheByKey = {};
+		}
+		if (!instance.recordsAccessor && this.recordsAccessor) {
+			instance.recordsAccessor = this.recordsAccessor.bindInstance
+				? this.recordsAccessor.bindInstance(instance)
+				: this.recordsAccessor;
 		}
 	}
-	trackDestroyableChild(child) {
-		this.instanceCache.trackDestroy(child);
-		this.trackDestroy();
-	}
-	subscribeOnDestroy(callback) {
-		if (!this.destroySubscriptions) this.destroySubscriptions = [];
-		this.destroySubscriptions.push(callback);
-		this.trackDestroy();
-		return () => {
-			if (this.destroySubscriptions) {
-				this.destroySubscriptions = this.destroySubscriptions.filter((cb) => cb !== callback);
-			}
-		};
+	getRecords(context, instance, records, parentStore) {
+		if (!instance.recordStoreCache) {
+			this.initInstance(context, instance);
+		}
+		return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
 	}
-	destroy() {
-		if (this.instanceCache) {
-			this.instanceCache.destroy();
-			this.instanceCache = null;
+	mapRecords(context, instance, records, parentStore, recordsAccessor) {
+		let result = [];
+		if (!instance.recordStoreCache) {
+			this.initInstance(context, instance);
 		}
-		if (this.destroySubscriptions) {
-			this.destroySubscriptions.forEach((cb) => cb());
-			this.destroySubscriptions = null;
+		if (isArray(records)) {
+			records.forEach((data, index) => {
+				if (this.filterFn && !this.filterFn(data)) return;
+				const record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
+				result.push(record);
+			});
 		}
-		if (this.destroyTracked) {
-			debug(destroyFlag, this);
-			if (this.widget.onDestroy) this.widget.onDestroy(this);
-			if (
-				this.widget.controller &&
-				this.controller &&
-				this.controller.onDestroy &&
-				this.controller.widget == this.widget
-			)
-				this.controller.onDestroy();
-			this.destroyTracked = false;
+		if (this.sorter && !this.preserveOrder) {
+			result = this.sorter(result);
 		}
+		return result;
 	}
-	setState(state) {
-		let skip = !!this.state;
-		if (this.state) {
-			for (const k in state) {
-				if (this.state[k] !== state[k]) {
-					skip = false;
-					break;
-				}
+	mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
+		const key = this.cacheByKeyField && this.keyField && isObject(data) ? data[this.keyField] : null;
+		let recordStore = key != null ? instance.cacheByKey[key] : instance.recordStoreCache.get(data);
+		if (recordsAccessor) {
+			if (!recordStore) {
+				recordStore = new ArrayElementView({
+					store: parentStore,
+					arrayAccessor: recordsAccessor,
+					itemIndex: index,
+					recordAlias: this.recordName,
+					indexAlias: this.indexName,
+					immutable: this.immutable,
+					sealed: this.sealed,
+				});
+			} else {
+				recordStore.setStore(parentStore);
+				recordStore.setIndex(index);
+			}
+		} else {
+			if (!recordStore) {
+				recordStore = new ReadOnlyDataView({
+					store: parentStore,
+					data: {
+						[this.recordName]: data,
+						[this.indexName]: index,
+					},
+					immutable: this.immutable,
+					sealed: this.sealed,
+				});
+			} else {
+				recordStore.setStore(parentStore);
+				recordStore.setData({
+					[this.recordName]: data,
+					[this.indexName]: index,
+				});
 			}
 		}
-		if (skip) return;
-		this.state = Object.assign({}, this.state, state);
-		let parent = this.parent;
-		//notify all parents that child state change to bust up caching
-		while (parent) {
-			parent.childStateDirty = true;
-			parent = parent.parent;
+		if (key != null) {
+			instance.cacheByKey[key] = recordStore;
+		} else if (isObject(data)) {
+			instance.recordStoreCache.set(data, recordStore);
 		}
-		batchUpdates(() => {
-			this.store.notify();
-		});
+		return {
+			store: recordStore,
+			index: index,
+			data: data,
+			type: "data",
+			key: this.keyField && isObject(data) ? data[this.keyField] : index,
+		};
 	}
-	set(prop, value, options = {}) {
-		//skip re-rendering (used for reading state from uncontrolled components)
-		if (options.internal && this.rawData) {
-			this.rawData[prop] = value;
-			this.data[prop] = value;
+	setFilter(filterFn) {
+		this.filterFn = filterFn;
+	}
+	getComparer(sortOptions) {
+		return sortOptions ? Culture.getComparer(sortOptions) : undefined;
+	}
+	buildSorter(sorters) {
+		if (isArray(sorters) && sorters.length > 0) {
+			let dataAccessor;
+			let fieldValueMapper;
+			if (sorters.every((x) => x.field && x.value == null)) {
+				dataAccessor = (x) => x.data;
+				fieldValueMapper = (x) => ({
+					bind: x.field,
+				});
+			} else {
+				dataAccessor = (x) => x.store.getData();
+				fieldValueMapper = (x) => ({
+					bind: this.recordName + "." + x.field,
+				});
+			}
+			this.sorter = sorter(
+				sorters.map((x) => {
+					const s = Object.assign({}, x);
+					if (s.field && s.value == null) {
+						s.value = fieldValueMapper(s);
+					}
+					if (!s.comparer) {
+						s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
+					}
+					return s;
+				}),
+				dataAccessor,
+			);
+		} else {
+			this.sorter = undefined;
 		}
-		const setter = this.setters && this.setters[prop];
-		if (setter) {
-			if (options.immediate && isFunction(setter.reset)) setter.reset(value);
-			else setter(value);
-			return true;
+	}
+	sort(sorters) {
+		if (sorters) {
+			this.buildSorter(sorters);
 		}
-		const p = this.widget[prop];
-		if (p && typeof p == "object") {
-			if (p.debounce) {
-				this.definePropertySetter(
-					prop,
-					validatedDebounce(
-						(value) => this.doSet(prop, value),
-						() => this.dataSelector(this.store)[prop],
-						p.debounce,
-					),
-				);
-				this.set(prop, value, options);
-				return true;
-			}
-			if (p.throttle) {
-				this.definePropertySetter(
-					prop,
-					throttle((value) => this.doSet(prop, value), p.throttle),
-				);
-				this.set(prop, value, options);
-				return true;
-			}
+	}
+}
+ArrayAdapter.prototype.immutable = false;
+ArrayAdapter.prototype.sealed = false;
+ArrayAdapter.prototype.keyField = null;
+ArrayAdapter.prototype.cacheByKeyField = true;
+ArrayAdapter.prototype.isTreeAdapter = false;
+ArrayAdapter.autoInit = true;
+
+class UseParentLayout extends PureContainer {}
+UseParentLayout.prototype.noLayout = true;
+UseParentLayout.prototype.useParentLayout = true;
+
+class Repeater extends ContainerBase {
+	recordsAccessor;
+	item;
+	filter;
+	declareData(...args) {
+		super.declareData(
+			{
+				records: undefined,
+				sorters: undefined,
+				sortField: undefined,
+				sortDirection: undefined,
+				filterParams: {
+					structured: true,
+				},
+			},
+			...args,
+		);
+	}
+	init() {
+		this.recordsAccessor = getAccessor(this.records);
+		if (this.recordAlias) this.recordName = this.recordAlias;
+		if (this.indexAlias) this.indexName = this.indexAlias;
+		this.dataAdapter = ArrayAdapter.create({
+			...this.dataAdapter,
+			recordName: this.recordName,
+			indexName: this.indexName,
+			keyField: this.keyField,
+			immutable: this.immutable,
+			sealed: this.sealed,
+			recordsAccessor: this.recordsAccessor,
+			sortOptions: this.sortOptions,
+		});
+		this.item = PureContainer.create({
+			children: this.items || this.children,
+			layout: UseParentLayout,
+		});
+		delete this.children;
+		this.items = [];
+		super.init();
+	}
+	initInstance(context, instance) {
+		this.dataAdapter.initInstance(context, instance);
+	}
+	applyParentStore(instance) {
+		super.applyParentStore(instance);
+		// force prepareData to execute again and propagate the store change to the records
+		if (instance.cached) delete instance.cached.rawData;
+	}
+	prepareData(context, instance) {
+		let { data } = instance;
+		if (data.sortField)
+			data.sorters = [
+				{
+					field: data.sortField,
+					direction: data.sortDirection || "ASC",
+				},
+			];
+		this.dataAdapter.sort(data.sorters);
+		let filter = null;
+		if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+		else if (this.filter) filter = (item) => this.filter(item, data.filterParams);
+		this.dataAdapter.setFilter(filter);
+		instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
+		if (this.onTrackMappedRecords) {
+			instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
 		}
-		return this.doSet(prop, value);
-	}
-	definePropertySetter(prop, setter) {
-		if (!this.setters) this.setters = {};
-		this.setters[prop] = setter;
+		super.prepareData(context, instance);
 	}
-	doSet(prop, value) {
-		let changed = false;
-		batchUpdates(() => {
-			const p = this.widget[prop];
-			if (isObject(p)) {
-				const pObj = p;
-				if (pObj.set) {
-					if (isFunction(pObj.set)) {
-						pObj.set(value, this);
-						changed = true;
-					} else if (isString(pObj.set)) {
-						this.controller?.[pObj.set](value, this);
-						changed = true;
-					}
-				} else if (pObj.action) {
-					const action = pObj.action(value, this);
-					this.store.dispatch(action);
-					changed = true;
-				} else if (isString(pObj.bind) || isAccessorChain(pObj.bind)) {
-					changed = this.store.set(pObj.bind, value);
-				}
-			} else if (isAccessorChain(p)) {
-				changed = this.store.set(p.toString(), value);
-			}
+	explore(context, instance, data) {
+		let instances = [];
+		instance.mappedRecords.forEach((record) => {
+			let subInstance = instance.getChild(context, this.item, record.key, record.store);
+			let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
+			subInstance.record = record;
+			if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
+				instances.push(subInstance);
+				subInstance.shouldUpdate = false;
+			} else if (subInstance.scheduleExploreIfVisible(context)) instances.push(subInstance);
 		});
-		return changed;
+		instance.children = instances;
 	}
-	nestedDataSet(key, value, dataConfig, useParentStore) {
-		let config = dataConfig[key];
-		if (!config)
-			throw new Error(`Unknown nested data key ${key}. Known keys are ${Object.keys(dataConfig).join(", ")}.`);
-		if (isAccessorChain(config))
-			config = {
-				bind: config.toString(),
-			};
-		if (config.bind) {
-			let store = this.store;
-			//in case of Rescope or DataProxy, bindings point to the data in the parent store
-			if (useParentStore && store.store) store = store.store;
-			return isUndefined(value) ? store.deleteItem(config.bind) : store.setItem(config.bind, value);
-		}
-		if (!config.set)
-			throw new Error(
-				`Cannot change nested data value for ${key} as it's read-only. Either define it as a binding or define a set function.`,
-			);
-		if (isString(config.set)) this.getControllerMethod(config.set)(value, this);
-		else if (isFunction(config.set)) config.set(value, this);
-		else
-			throw new Error(
-				`Cannot change nested data value for ${key} the defined setter is neither a function nor a controller method.`,
-			);
-		return true;
+}
+Repeater.prototype.recordName = "$record";
+Repeater.prototype.indexName = "$index";
+Repeater.prototype.cached = false;
+Repeater.prototype.immutable = false;
+Repeater.prototype.sealed = false;
+Repeater.prototype.isPureContainer = true;
+Widget.alias("repeater", Repeater);
+
+class StructuredInstanceDataAccessor {
+	instance;
+	dataConfig;
+	useParentStore;
+	dataSelector;
+	constructor(config) {
+		this.instance = config.instance;
+		this.dataConfig = config.data;
+		this.useParentStore = config.useParentStore;
+		this.dataSelector = getSelector(config.data);
+		if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
 	}
-	replaceState(state) {
-		this.cached.state = this.state;
-		this.state = state;
-		this.store.notify();
+	getSelector() {
+		return this.dataSelector;
 	}
-	getInstanceCache() {
-		if (!this.instanceCache)
-			this.instanceCache = new InstanceCache(this, this.widget.isPureContainer ? this.key : null);
-		return this.instanceCache;
+	get() {
+		return this.dataSelector.get(this.instance.store.getData());
 	}
-	clearChildrenCache() {
-		if (this.instanceCache) this.instanceCache.destroy();
+	setItem(key, value) {
+		return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
 	}
-	getChild(context, widget, key, store) {
-		return this.getInstanceCache().getChild(widget, store ?? this.store, key);
+	containsKey(key) {
+		return this.dataConfig.hasOwnProperty(key);
 	}
-	getDetachedChild(widget, key, store) {
-		const child = new Instance(widget, key, this, store ?? this.store);
-		child.detached = true;
-		return child;
+	getKeys() {
+		return Object.keys(this.dataConfig);
 	}
-	prepareRenderCleanupChild(widget, store, keyPrefix, options) {
-		return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
+}
+
+class Rescope extends PureContainerBase {
+	init() {
+		this.binding = Binding.get(this.bind);
+		if (this.rootAlias) this.rootName = this.rootAlias;
+		super.init();
 	}
-	getJsxEventProps() {
-		const { widget } = this;
-		if (!isArray(widget.jsxAttributes)) return null;
-		const props = {};
-		widget.jsxAttributes.forEach((attr) => {
-			if (attr.indexOf("on") == 0 && attr.length > 2) {
-				props[attr] = (e) => this.invoke(attr, e, this);
-			}
+	initInstance(context, instance) {
+		instance.store = new ZoomIntoPropertyView({
+			store: instance.parentStore,
+			binding: this.binding,
+			rootName: this.rootName,
+			nestedData: isObject(this.data)
+				? new StructuredInstanceDataAccessor({
+						instance,
+						data: this.data,
+						useParentStore: true,
+					})
+				: undefined,
 		});
-		return props;
+		super.initInstance(context, instance);
 	}
-	getCallback(methodName) {
-		const scope = this.widget;
-		const callback = scope[methodName];
-		if (typeof callback === "string") return this.getControllerMethod(callback);
-		if (typeof callback !== "function")
-			throw new Error(`Cannot invoke callback method ${methodName} as assigned value is not a function.`);
-		return callback.bind(scope);
+	applyParentStore(instance) {
+		instance.store.setStore(instance.parentStore);
 	}
-	/**
-	 * Finds the first controller in the instance tree matching the predicate
-	 * @param predicate Function to test each controller
-	 * @returns The matching controller or undefined
-	 */
-	findController(predicate) {
-		let at = this;
-		while (at?.controller != null) {
-			if (predicate(at.controller)) {
-				return at.controller;
+}
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+Widget.alias("rescope", Rescope);
+
+/*
+ *  Purpose of FocusManager is to provide focusout notifications.
+ *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
+ *  to determine if focus went outside or stayed inside the component.
+ */
+let subscribers$3 = new SubscriberList(),
+	timerInterval = 300,
+	timerId = null;
+let lastActiveElement = null;
+let pending = false;
+class FocusManager {
+	static subscribe(callback) {
+		let unsubscribe = subscribers$3.subscribe(callback);
+		checkTimer();
+		return unsubscribe;
+	}
+	static onFocusOut(el, callback) {
+		let active = isSelfOrDescendant(el, getActiveElement());
+		return this.subscribe((focusedEl) => {
+			if (!active) active = isSelfOrDescendant(el, getActiveElement());
+			else if (!isSelfOrDescendant(el, focusedEl)) {
+				active = false;
+				callback(focusedEl);
 			}
-			at = at.parent;
-		}
-		return undefined;
+		});
 	}
-	/**
-	 * Finds a controller of the specified type in the instance tree
-	 * @param type Controller class/constructor to find
-	 * @returns The matching controller cast to the specified type, or undefined
-	 */
-	findControllerByType(type) {
-		return this.findController((c) => c instanceof type);
+	static oneFocusOut(el, callback) {
+		this.nudge();
+		let off = this.subscribe((focusedEl) => {
+			if (!isSelfOrDescendant(el, focusedEl)) {
+				callback(focusedEl);
+				off();
+			}
+		});
+		return off;
 	}
-	/**
-	 * Gets the first controller in the instance tree matching the predicate
-	 * @param predicate Function to test each controller
-	 * @returns The matching controller
-	 * @throws Error if no matching controller is found
-	 */
-	getController(predicate) {
-		const controller = this.findController(predicate);
-		if (!controller) throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
-		return controller;
+	static nudge() {
+		if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
+			if (!pending) {
+				pending = true;
+				setTimeout(function () {
+					pending = false;
+					if (getActiveElement() !== lastActiveElement) {
+						lastActiveElement = getActiveElement();
+						batchUpdates(() => {
+							subscribers$3.notify(lastActiveElement);
+						});
+						checkTimer();
+					}
+				}, 0);
+			}
+		}
 	}
-	/**
-	 * Gets a controller of the specified type in the instance tree
-	 * @param type Controller class/constructor to find
-	 * @returns The matching controller cast to the specified type
-	 * @throws Error if no controller of the specified type is found
-	 */
-	getControllerByType(type) {
-		const controller = this.findControllerByType(type);
-		if (!controller) throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
-		return controller;
+	static focus(el) {
+		el.focus();
+		this.nudge();
 	}
-	getControllerMethod(methodName) {
-		if (!this.controller)
-			throw new Error(`Cannot invoke controller method "${methodName}" as controller is not assigned to the widget.`);
-		const controller = this.findController((c) => !!c[methodName]);
-		if (!controller)
-			throw new Error(
-				`Cannot invoke controller method "${methodName}". The method cannot be found in any of the assigned controllers.`,
-			);
-		return controller[methodName].bind(controller);
+	static focusFirst(el) {
+		let focusable = findFirst(el, isFocusable);
+		if (focusable) this.focus(focusable);
+		return focusable;
 	}
-	invoke(methodName, ...args) {
-		return this.getCallback(methodName).apply(null, args);
+	static focusFirstChild(el) {
+		let focusable = findFirstChild(el, isFocusable);
+		if (focusable) this.focus(focusable);
+		return focusable;
 	}
-	invokeControllerMethod(methodName, ...args) {
-		return this.getControllerMethod(methodName).apply(null, args);
+	static focusNext(el) {
+		let next = el,
+			skip = true;
+		do {
+			if (!skip) {
+				let focusable = this.focusFirst(next);
+				if (focusable) return focusable;
+			}
+			if (next.nextSibling) {
+				next = next.nextSibling;
+				skip = false;
+			} else {
+				next = next.parentNode;
+				skip = true;
+			}
+		} while (next);
+	}
+	static setInterval(interval) {
+		timerInterval = interval;
+		checkTimer();
 	}
 }
-function renderResultFix(res) {
-	return res != null && isDefined(res.content)
-		? res
-		: {
-				content: res,
-			};
+function oneFocusOut(component, el, callback) {
+	if (!component.oneFocusOut)
+		component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
+			delete component.oneFocusOut;
+			callback(focus);
+		});
 }
-class InstanceCache {
-	constructor(parent, keyPrefix) {
-		this.children = {};
-		this.parent = parent;
-		this.marked = {};
-		this.monitored = null;
-		this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
+function offFocusOut(component) {
+	if (component.oneFocusOut) {
+		component.oneFocusOut();
+		delete component.oneFocusOut;
 	}
-	getChild(widget, parentStore, key) {
-		const k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
-		let instance = this.children[k];
-		if (
-			!instance ||
-			instance.widget !== widget ||
-			(!instance.visible && (instance.widget.controller || instance.widget.onInit))
-		) {
-			instance = new Instance(widget, k, this.parent, parentStore);
-			this.children[k] = instance;
-		} else if (instance.parentStore !== parentStore) {
-			instance.setParentStore(parentStore);
-		}
-		return instance;
+}
+function preventFocus(e) {
+	//Focus can be prevented only on mousedown event. On touchstart this will not work
+	//preventDefault cannot be used as it prevents scrolling
+	if (e.type !== "mousedown") return;
+	e.preventDefault();
+	unfocusElement(e.currentTarget, false);
+}
+function checkTimer() {
+	let shouldRun = !subscribers$3.isEmpty();
+	if (shouldRun && !timerId)
+		timerId = setInterval(() => {
+			FocusManager.nudge();
+		}, timerInterval);
+	if (!shouldRun && timerId) {
+		clearInterval(timerId);
+		timerId = null;
 	}
-	addChild(instance) {
-		this.marked[instance.key] = instance;
+}
+function preventFocusOnTouch(e, force = false) {
+	if (force || isTouchEvent()) preventFocus(e);
+}
+function unfocusElement(target = null, unfocusParentOverlay = true) {
+	const activeElement = getActiveElement();
+	if (!target) target = activeElement;
+	if (unfocusParentOverlay) {
+		let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
+		if (focusableOverlayContainer) target = focusableOverlayContainer;
 	}
-	mark() {
-		this.marked = {};
+	//find the closest focusable parent of the target element and focus it instead
+	let focusableParent = closestParent(
+		target,
+		(el) => isFocusable(el) && (!unfocusParentOverlay || !!el.dataset?.focusableOverlayContainer),
+	);
+	if (focusableParent && focusableParent !== document.body)
+		focusableParent.focus({
+			preventScroll: true,
+		});
+	else activeElement.blur();
+	FocusManager.nudge();
+}
+
+let subscribers$2 = new SubscriberList();
+class ResizeManager {
+	static subscribe(callback) {
+		return subscribers$2.subscribe(callback);
 	}
-	trackDestroy(instance) {
-		if (!this.monitored) this.monitored = {};
-		this.monitored[instance.key] = instance;
+	static notify() {
+		batchUpdates(() => {
+			subscribers$2.notify();
+		});
 	}
-	destroy() {
-		this.children = {};
-		this.marked = {};
-		if (!this.monitored) return;
-		for (const key in this.monitored) {
-			this.monitored[key].destroy();
-		}
-		this.monitored = null;
+	static trackElement(el, callback) {
+		if (typeof ResizeObserver !== "function") return this.subscribe(() => callback([]));
+		let obs = new ResizeObserver(callback);
+		obs.observe(el);
+		return () => {
+			obs.disconnect();
+		};
 	}
-	sweep() {
-		this.children = this.marked;
-		if (!this.monitored) return;
-		let activeCount = 0;
-		for (const key in this.monitored) {
-			const monitoredChild = this.monitored[key];
-			const child = this.children[key];
-			if (child !== monitoredChild || !monitoredChild.visible) {
-				monitoredChild.destroy();
-				delete this.monitored[key];
-				if (child === monitoredChild) delete this.children[key];
-			} else activeCount++;
-		}
-		if (activeCount === 0) this.monitored = null;
+}
+if (typeof window != "undefined") window.addEventListener("resize", () => ResizeManager.notify());
+
+let lastZIndex = 10000;
+class ZIndexManager {
+	static next() {
+		return ++lastZIndex;
+	}
+	static reset(zIndex) {
+		lastZIndex = zIndex;
 	}
 }
 
+const Format = Format$1;
+let cultureSensitiveFormatsRegistered = false;
+function resolveNumberFormattingFlags(flags) {
+	if (!flags) return null;
+	let result = {};
+	if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
+	if (flags.indexOf("c") >= 0) result.notation = "compact";
+	if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
+	return result;
+}
+function enableCultureSensitiveFormatting() {
+	if (cultureSensitiveFormatsRegistered) return;
+	cultureSensitiveFormatsRegistered = true;
+	Format$1.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+		let culture = Culture.getNumberCulture();
+		let formatter = culture.getFormatter({
+			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+			...resolveNumberFormattingFlags(flags),
+		});
+		return (value) => formatter.format(value);
+	});
+	Format$1.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
+		let culture = Culture.getNumberCulture();
+		currency = currency || Culture.defaultCurrency;
+		let formatter = culture.getFormatter({
+			style: "currency",
+			currency: currency,
+			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+			...resolveNumberFormattingFlags(flags),
+		});
+		return (value) => formatter.format(value);
+	});
+	Format$1.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+		let culture = Culture.getNumberCulture();
+		let formatter = culture.getFormatter({
+			style: "percent",
+			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+			...resolveNumberFormattingFlags(flags),
+		});
+		return (value) => formatter.format(value);
+	});
+	Format$1.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+		let culture = Culture.getNumberCulture();
+		let formatter = culture.getFormatter({
+			style: "percent",
+			...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+			...resolveNumberFormattingFlags(flags),
+		});
+		return (value) => formatter.format(value / 100);
+	});
+	Format$1.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
+		let culture = Culture.getDateTimeCulture();
+		let formatter = culture.getFormatter(format);
+		return (value) => formatter.format(parseDateInvariant(value));
+	});
+	Format$1.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
+		let culture = Culture.getDateTimeCulture();
+		let formatter = culture.getFormatter(format);
+		return (value) => formatter.format(parseDateInvariant(value));
+	});
+	Format$1.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
+		let culture = Culture.getDateTimeCulture();
+		let formatter = culture.getFormatter(format);
+		return (value) => formatter.format(parseDateInvariant(value));
+	});
+	setGetFormatCacheCallback(() => {
+		let cache = getCurrentCultureCache();
+		if (!cache.formatCache) cache.formatCache = {};
+		return cache.formatCache;
+	});
+	setGetExpressionCacheCallback(() => {
+		let cache = getCurrentCultureCache();
+		if (!cache.exprCache) cache.exprCache = {};
+		return cache.exprCache;
+	});
+	setGetStringTemplateCacheCallback(() => {
+		let cache = getCurrentCultureCache();
+		if (!cache.strTplCache) cache.strTplCache = {};
+		return cache.strTplCache;
+	});
+	GlobalCacheIdentifier.change();
+}
+
 class RenderingContext {
 	options;
 	exploreStack;
@@ -3952,6 +3955,7 @@ class TreeAdapter extends ArrayAdapter {
 				next: new Set(),
 			};
 		}
+		if (this.load) this.onLoad = this.load;
 	}
 	mapRecords(context, instance, data, parentStore, recordsAccessor) {
 		const nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
@@ -3996,9 +4000,9 @@ class TreeAdapter extends ArrayAdapter {
 						this.childrenAccessor,
 					);
 					this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
-				} else if (this.load && !dataRecord[this.loadedField] && !dataRecord[this.loadingField]) {
+				} else if (this.onLoad && !dataRecord[this.loadedField] && !dataRecord[this.loadingField]) {
 					store.set(`${this.recordName}.${this.loadingField}`, true);
-					const response = this.load(context, instance, data);
+					const response = this.onLoad(context, instance, data);
 					Promise.resolve(response)
 						.then((children) => {
 							store.set(`${this.recordName}.${this.childrenField}`, children);