@motifx/core 1.2.0-rc.1 → 1.2.0-rc.3

package/dist/index.umd.js

@@ -8,10 +8,12 @@
 	    setTimeout(() => { throw error; }, 0);
 	}
 	class ErrorHandler {
-	    unexpectedErrorHandler = rethrowLater;
-	    listeners = [];
-	    _isDevelopment = false;
-	    _enableConsoleLogging = true;
+	    constructor() {
+	        this.unexpectedErrorHandler = rethrowLater;
+	        this.listeners = [];
+	        this._isDevelopment = false;
+	        this._enableConsoleLogging = true;
+	    }
 	    setDevelopmentMode(isDev) {
 	        this._isDevelopment = isDev;
 	    }
@@ -352,7 +354,6 @@
 	    MJX611: () => `The devtools panel failed to load.`,
 	};
 	class MotifError extends Error {
-	    code;
 	    constructor(code, message, options) {
 	        super(message, options);
 	        this.name = 'MotifError';
@@ -384,7 +385,9 @@
 	}
 
 	class DisposableCore {
-	    disposableTracker = null;
+	    constructor() {
+	        this.disposableTracker = null;
+	    }
 	    notifyCreated(target) {
 	        this.disposableTracker?.trackDisposable(target);
 	        return target;
@@ -413,9 +416,8 @@
 	const disposableCore = new DisposableCore();
 
 	class DisposableStore {
-	    _items = new Set();
-	    _closed = false;
 	    constructor() {
+	        this._closed = false;
 	        disposableCore.notifyCreated(this);
 	    }
 	    get isDisposed() {
@@ -433,7 +435,7 @@
 	            reportWarning('MJX504', [], new Error().stack);
 	        }
 	        else {
-	            this._items.add(item);
+	            (this._items ??= new Set()).add(item);
 	        }
 	        return item;
 	    }
@@ -444,20 +446,21 @@
 	        if (item === this) {
 	            throw motifError('MJX505');
 	        }
-	        this._items.delete(item);
+	        this._items?.delete(item);
 	        item.dispose();
 	    }
 	    detach(item) {
-	        if (item && this._items.delete(item)) {
+	        if (item && this._items?.delete(item)) {
 	            disposableCore.notifyOwner(item, null);
 	        }
 	    }
 	    clear() {
-	        if (this._items.size === 0) {
+	        const items = this._items;
+	        if (!items || items.size === 0) {
 	            return;
 	        }
 	        const failures = [];
-	        for (const item of this._items) {
+	        for (const item of items) {
 	            try {
 	                item?.dispose();
 	            }
@@ -465,7 +468,7 @@
 	                failures.push(error);
 	            }
 	        }
-	        this._items.clear();
+	        items.clear();
 	        if (failures.length === 1) {
 	            throw failures[0];
 	        }
@@ -483,16 +486,34 @@
 	    }
 	}
 
+	let closedStore;
+	function sharedClosedStore() {
+	    if (closedStore === undefined) {
+	        closedStore = new DisposableStore();
+	        closedStore.dispose();
+	    }
+	    return closedStore;
+	}
 	class Disposable {
-	    _disposables = new DisposableStore();
+	    get _disposables() {
+	        let store = this._store;
+	        if (store === undefined) {
+	            store = this._store = new DisposableStore();
+	            disposableCore.notifyOwner(store, this);
+	        }
+	        return store;
+	    }
 	    constructor() {
+	        this._store = undefined;
 	        disposableCore.notifyCreated(this);
-	        disposableCore.notifyOwner(this._disposables, this);
 	    }
 	    dispose() {
 	        disposableCore.notifyDisposed(this);
-	        const owned = this._disposables;
-	        if (owned && typeof owned.dispose === 'function') {
+	        const owned = this._store;
+	        if (owned === undefined) {
+	            this._store = sharedClosedStore();
+	        }
+	        else if (owned && typeof owned.dispose === 'function') {
 	            owned.dispose();
 	        }
 	        else {
@@ -597,27 +618,17 @@
 	}
 
 	class ListBinding {
-	    component;
-	    itemsFn;
-	    renderFn;
-	    options;
-	    propertyName = "__list__";
-	    dataSource;
-	    dataMember;
-	    formatString;
-	    converter;
-	    converterBack;
-	    updateMode;
-	    _isActive = false;
-	    _effectCleanup;
-	    _rendered = [];
-	    _identityMap = new WeakMap();
-	    container = motifFragment('list-container');
 	    constructor(component, itemsFn, renderFn, options) {
 	        this.component = component;
 	        this.itemsFn = itemsFn;
 	        this.renderFn = renderFn;
 	        this.options = options;
+	        this.propertyName = "__list__";
+	        this._isActive = false;
+	        this._rendered = [];
+	        this._identityMap = new WeakMap();
+	        this.container = motifFragment('list-container');
+	        this.olditems = [];
 	        this.component.controls.add(this.container);
 	    }
 	    activate() { if (this._isActive)
@@ -701,7 +712,6 @@
 	        }
 	        return component;
 	    }
-	    olditems = [];
 	    get _indexSensitive() {
 	        try {
 	            return this.renderFn.length >= 2;
@@ -905,6 +915,10 @@
 	            return oi === undefined ? -1 : oi;
 	        });
 	        const stable = new Set(longestIncreasingIndices(sources));
+	        if (newComponents.length === items.length && isPermutation(sources, newComponents, this.container)) {
+	            controls._reorder(newComponents, stable);
+	            return;
+	        }
 	        let anchor = null;
 	        for (let i = newComponents.length - 1; i >= 0; i--) {
 	            const comp = newComponents[i];
@@ -927,6 +941,19 @@
 	        }
 	    }
 	}
+	function isPermutation(sources, components, owner) {
+	    const seen = new Uint8Array(sources.length);
+	    for (let i = 0; i < sources.length; i++) {
+	        const s = sources[i];
+	        if (s === -1 || seen[s])
+	            return false;
+	        seen[s] = 1;
+	        const c = components[i];
+	        if (c.isDisposed || c.parent !== owner)
+	            return false;
+	    }
+	    return true;
+	}
 	function longestIncreasingIndices(sources) {
 	    const predecessors = new Array(sources.length).fill(-1);
 	    const tails = [];
@@ -962,16 +989,13 @@
 	}
 
 	class NameValuePair {
-	    Key;
-	    value;
 	}
 
 	class List {
-	    ItemAdded;
-	    ItemAddedBefore;
-	    ItemSplice;
-	    __list = [];
-	    _map = new Set();
+	    constructor() {
+	        this.__list = [];
+	        this._map = new Set();
+	    }
 	    Dispose() {
 	        this.__list = [];
 	    }
@@ -1105,13 +1129,11 @@
 	}
 
 	class LeakMonitor {
-	    threshold;
-	    name;
-	    _origins = new Map();
-	    _quietChecks = 0;
 	    constructor(threshold, name) {
 	        this.threshold = threshold;
 	        this.name = name;
+	        this._origins = new Map();
+	        this._quietChecks = 0;
 	    }
 	    check(size) {
 	        if (this.threshold <= 0 || size < this.threshold) {
@@ -1141,7 +1163,9 @@
 	}
 
 	class Dictionary {
-	    __values = new List();
+	    constructor() {
+	        this.__values = new List();
+	    }
 	    Add(Key, Value) {
 	        var item = new NameValuePair();
 	        item.Key = Key;
@@ -1158,7 +1182,6 @@
 	    item(key) {
 	        return this.filter(t => t.Key == key)[0];
 	    }
-	    OnItemAdded;
 	    removeIndex(index) {
 	        return this.__values.removeIndex(index);
 	    }
@@ -1195,8 +1218,10 @@
 	    return ring;
 	}
 	class LinkedList {
-	    _ring = createRing();
-	    _count = 0;
+	    constructor() {
+	        this._ring = createRing();
+	        this._count = 0;
+	    }
 	    get size() {
 	        return this._count;
 	    }
@@ -1265,7 +1290,6 @@
 	    return a > b ? 1 : a < b ? -1 : 0;
 	}
 	class Query {
-	    source;
 	    constructor(source) {
 	        this.source = Array.isArray(source) ? source : Array.from(source);
 	    }
@@ -1334,11 +1358,12 @@
 	    }
 	}
 
-	const COMPILER_CONTRACT = 1;
+	const COMPILER_CONTRACT = 2;
+	const SUPPORTED_CONTRACTS = [1, 2];
 	const reported = new Set();
 	const pending = new Set();
 	function motifCompiled(contract) {
-	    if (contract === COMPILER_CONTRACT || reported.has(contract))
+	    if (SUPPORTED_CONTRACTS.includes(contract) || reported.has(contract))
 	        return;
 	    if (!isDevLike()) {
 	        pending.add(contract);
@@ -1373,15 +1398,12 @@
 	})(exports.NodeTypes || (exports.NodeTypes = {}));
 
 	class Effect {
-	    fn;
-	    callback;
-	    deps = [];
-	    active = true;
-	    running = false;
-	    scheduler;
 	    constructor(fn, callback) {
 	        this.fn = fn;
 	        this.callback = callback;
+	        this.deps = [];
+	        this.active = true;
+	        this.running = false;
 	    }
 	    run() {
 	        let value;
@@ -1620,21 +1642,10 @@
 	    return el.value;
 	}
 	class Binding {
-	    propertyName;
-	    dataSource;
-	    dataMember;
-	    formatString;
-	    converter;
-	    converterBack;
-	    setter;
-	    formatInfo;
-	    updateMode = 'onPropertyChanged';
-	    _isActive = false;
-	    _component;
-	    _effectCleanup;
-	    _memberPath = null;
-	    _memberPathSource;
 	    constructor(component, propertyName, dataSource, dataMember, formatString, formatInfo) {
+	        this.updateMode = 'onPropertyChanged';
+	        this._isActive = false;
+	        this._memberPath = null;
 	        this._component = component;
 	        this.propertyName = propertyName;
 	        this.dataSource = dataSource;
@@ -1886,10 +1897,9 @@
 	    return true;
 	}
 	class BindingCollection {
-	    _items = [];
-	    _component;
-	    _branchScope = null;
 	    constructor(component) {
+	        this._items = [];
+	        this._branchScope = null;
 	        this._component = component;
 	    }
 	    _own(stop) {
@@ -2158,6 +2168,38 @@
 	            const [dataSource, dataMember, formatString, formatInfo] = args;
 	            binding = new Binding(this._component, propertyName, dataSource, dataMember, formatString, formatInfo);
 	        }
+	        const write = (raw) => {
+	            let value = raw;
+	            const b = binding;
+	            if (typeof b.converterBack === 'function') {
+	                value = b.converterBack(value);
+	            }
+	            if (typeof b.setter === 'function') {
+	                b.setter(value);
+	                return;
+	            }
+	            const member = b.dataMember;
+	            const source = b.dataSource;
+	            if (member && source != null) {
+	                const path = member.split('.');
+	                let target = source;
+	                for (let i = 0; i < path.length && target != null; i++) {
+	                    const key = path[i];
+	                    if (!isWritablePathKey(target, key))
+	                        return;
+	                    if (i === path.length - 1) {
+	                        target[key] = value;
+	                    }
+	                    else {
+	                        target = target[key];
+	                    }
+	                }
+	            }
+	            else if (source != null && typeof source === 'object' && 'value' in source) {
+	                source.value = value;
+	            }
+	        };
+	        (this._modelWriters ??= new WeakMap()).set(binding, write);
 	        const lowerTag = tn.toLowerCase();
 	        if (lowerTag === 'input' || lowerTag === 'select' || lowerTag === 'textarea') {
 	            const writeBack = () => {
@@ -2165,35 +2207,7 @@
 	                    const el = this._component.element;
 	                    if (!el)
 	                        return;
-	                    let value = readModelValue(el);
-	                    const b = binding;
-	                    if (typeof b.converterBack === 'function') {
-	                        value = b.converterBack(value);
-	                    }
-	                    if (typeof b.setter === 'function') {
-	                        b.setter(value);
-	                        return;
-	                    }
-	                    const member = b.dataMember;
-	                    const source = b.dataSource;
-	                    if (member && source != null) {
-	                        const path = member.split('.');
-	                        let target = source;
-	                        for (let i = 0; i < path.length && target != null; i++) {
-	                            const key = path[i];
-	                            if (!isWritablePathKey(target, key))
-	                                return;
-	                            if (i === path.length - 1) {
-	                                target[key] = value;
-	                            }
-	                            else {
-	                                target = target[key];
-	                            }
-	                        }
-	                    }
-	                    else if (source != null && typeof source === 'object' && 'value' in source) {
-	                        source.value = value;
-	                    }
+	                    write(readModelValue(el));
 	                }
 	                catch { /* ignore */ }
 	            };
@@ -2206,6 +2220,23 @@
 	        }
 	        return binding;
 	    }
+	    writeModel(value) {
+	        const writers = this._modelWriters;
+	        if (!writers)
+	            return false;
+	        let written = false;
+	        for (const binding of this._items) {
+	            const write = writers.get(binding);
+	            if (!write)
+	                continue;
+	            try {
+	                write(value);
+	                written = true;
+	            }
+	            catch { /* ignore */ }
+	        }
+	        return written;
+	    }
 	    deactivateAll() {
 	        this._items.forEach(binding => binding.deactivate());
 	        this._items = [];
@@ -2265,10 +2296,10 @@
 	]);
 
 	class Emitter {
-	    _subscriptions = [];
-	    _delivery;
-	    _subscribe;
-	    _disposed = false;
+	    constructor() {
+	        this._subscriptions = [];
+	        this._disposed = false;
+	    }
 	    get event() {
 	        if (!this._subscribe) {
 	            this._subscribe = (listener, thisArgs, disposables) => {
@@ -2352,10 +2383,6 @@
 	}
 
 	class ComponentEmiter {
-	    component;
-	    _emitters;
-	    _sourceDisposables;
-	    _listenerDisposables;
 	    constructor(component) {
 	        this.component = component;
 	    }
@@ -2506,9 +2533,6 @@
 	const ARGUMENT_METHODS = new Set(['setSelectionRange', 'setRangeText', 'setPointerCapture', 'releasePointerCapture', 'fastSeek']);
 	const PROPERTY_FIRST = new Set(['checked', 'selected', 'muted', 'indeterminate', 'srcObject']);
 	class controlAttribute {
-	    _parent;
-	    _attrMapStore;
-	    _watchersStore;
 	    constructor(parent) {
 	        this._parent = parent;
 	    }
@@ -3040,14 +3064,10 @@
 	}
 
 	class controlClass {
-	    _parent;
 	    constructor(parent) {
+	        this._watcherSeq = 0;
 	        this._parent = parent;
 	    }
-	    _countsStore;
-	    _staticSetStore;
-	    _watchersStore;
-	    _watcherSeq = 0;
 	    get _counts() { return this._countsStore ??= new Map(); }
 	    get _staticSet() { return this._staticSetStore ??= new Set(); }
 	    get _watchers() { return this._watchersStore ??= new Map(); }
@@ -3063,13 +3083,7 @@
 	                this._addStaticFromObject(value);
 	            }
 	            else {
-	                var valueStr = String(value ?? '').trim();
-	                if (valueStr.split(' ').length > 1) {
-	                    this._addStaticFromArray(valueStr.split(' '));
-	                }
-	                else {
-	                    this._addStaticFromString(valueStr);
-	                }
+	                this._addStaticNames(this._splitClasses(String(value ?? '')));
 	            }
 	        }
 	        return this._parent;
@@ -3135,10 +3149,11 @@
 	        return null;
 	    }
 	    _splitClasses(input) {
-	        return (input || '')
-	            .split(/\s+/)
-	            .map(s => s.trim())
-	            .filter(s => s.length > 0);
+	        if (!input)
+	            return [];
+	        if (!/\s/.test(input))
+	            return [input];
+	        return input.split(/\s+/).filter(s => s.length > 0);
 	    }
 	    _normalizeToSet(values, key) {
 	        const result = new Set();
@@ -3237,14 +3252,31 @@
 	            }
 	        }
 	    }
-	    _addStaticFromString(s) {
-	        if (!s)
+	    _addStaticNames(names) {
+	        if (names.length === 0)
 	            return;
 	        const el = this._getElement();
-	        const prev = new Set(this._staticSet);
-	        for (const cls of this._splitClasses(s))
-	            this._staticSet.add(cls);
-	        this._applySourceDiff('static', prev, new Set(this._staticSet), el);
+	        const staticSet = this._staticSet;
+	        const fresh = el && !el.hasAttribute('class') ? [] : null;
+	        for (const cls of names) {
+	            if (staticSet.has(cls))
+	                continue;
+	            staticSet.add(cls);
+	            const prevCount = this._counts.get(cls) || 0;
+	            this._counts.set(cls, prevCount + 1);
+	            if (prevCount === 0 && el) {
+	                if (fresh)
+	                    fresh.push(cls);
+	                else {
+	                    try {
+	                        el.classList.add(cls);
+	                    }
+	                    catch { }
+	                }
+	            }
+	        }
+	        if (fresh && fresh.length > 0)
+	            el.setAttribute('class', fresh.join(' '));
 	    }
 	    _addStaticFromArray(arr) {
 	        const el = this._getElement();
@@ -3565,8 +3597,6 @@
 	}
 
 	class ComponentMotif {
-	    _component;
-	    options;
 	    constructor(component, options) {
 	        this._component = component;
 	        this.options = options;
@@ -3609,15 +3639,11 @@
 	const SIGNAL_TARGET = Symbol('SignalTarget');
 	const SIGNAL_KEY = Symbol('SignalKey');
 	class Signal {
-	    _value;
-	    _target;
-	    _key;
-	    _equals;
-	    _disposed = false;
 	    static create(initialValue, equals) {
 	        return new Signal(initialValue, equals);
 	    }
 	    constructor(initialValue, equals = Object.is) {
+	        this._disposed = false;
 	        this._value = initialValue;
 	        this._target = { [SIGNAL_TARGET]: true };
 	        this._key = SIGNAL_KEY;
@@ -3674,14 +3700,9 @@
 	    }
 	}
 	class Computed {
-	    _value;
-	    _dirty = true;
-	    _computing = false;
-	    _target;
-	    _key;
-	    _getter;
-	    _cleanup;
 	    constructor(getter) {
+	        this._dirty = true;
+	        this._computing = false;
 	        this._getter = getter;
 	        this._target = { [SIGNAL_TARGET]: true };
 	        this._key = SIGNAL_KEY;
@@ -3746,14 +3767,9 @@
 	    }
 	}
 	class LazyComputed {
-	    _value;
-	    _dirty = true;
-	    _disposed = false;
-	    _target;
-	    _key;
-	    _getter;
-	    _runner;
 	    constructor(getter) {
+	        this._dirty = true;
+	        this._disposed = false;
 	        this._getter = getter;
 	        this._target = { [SIGNAL_TARGET]: true };
 	        this._key = SIGNAL_KEY;
@@ -3917,24 +3933,25 @@
 	    pins.set(owner, { scope: pinnedScopeOf(owner) ?? navigatingRoot._currentScope(), live: false });
 	}
 	class ServiceProvider {
-	    services;
-	    parent;
-	    root;
-	    scopeName;
-	    kind;
-	    singletonCache;
-	    scopedCache = new Map();
-	    transientSet = new Set();
-	    _autoDisposeTransients = false;
-	    pendingSingleton;
-	    pendingScoped = new Map();
-	    _navigation;
-	    _ownerlessSlot = { owner: null, ownerless: true };
-	    _navigationDisposed = false;
-	    _livePins = 0;
-	    _pending = false;
 	    constructor(services, parent, root) {
 	        this.services = services;
+	        this.scopedCache = new Map();
+	        this.transientSet = new Set();
+	        this._autoDisposeTransients = false;
+	        this.pendingScoped = new Map();
+	        this._ownerlessSlot = { owner: null, ownerless: true };
+	        this._navigationDisposed = false;
+	        this._livePins = 0;
+	        this._pending = false;
+	        this.describeToken = (t) => {
+	            if (typeof t === 'string')
+	                return t;
+	            if (typeof t === 'symbol')
+	                return t.toString();
+	            if (typeof t === 'function')
+	                return t.name || '[AnonymousClass]';
+	            return String(t);
+	        };
 	        this.parent = parent;
 	        this.root = root ?? this;
 	        this.kind = this.root === this ? 'root' : 'user';
@@ -4318,15 +4335,6 @@
 	            throw motifError('MJX404', chain);
 	        }
 	    }
-	    describeToken = (t) => {
-	        if (typeof t === 'string')
-	            return t;
-	        if (typeof t === 'symbol')
-	            return t.toString();
-	        if (typeof t === 'function')
-	            return t.name || '[AnonymousClass]';
-	        return String(t);
-	    };
 	    describeTokenWithSource(t) {
 	        const name = this.describeToken(t);
 	        const d = this.services.getDescriptor(t);
@@ -4433,8 +4441,22 @@
 	        return t.name || '[AnonymousClass]';
 	    return String(t);
 	}
+	const F_BUILT = 1;
+	const F_INITIALIZED = 2;
+	const F_DISPOSED = 4;
+	const F_CONFIGURED = 8;
+	const F_PAINTING = 16;
+	const F_PAINTED = 32;
+	const F_HIDDEN = 64;
+	const F_WAIT = 128;
+	const F_POSTCONFIG = 256;
+	const F_PREBOUND = 512;
+	const F_DISPOSED_FIRED = 1024;
+	function optionsOf(c) {
+	    return c?._motif?.options;
+	}
 	function peekTransition(c) {
-	    return c?.motif?.options?.[TRANSITION_SLOT];
+	    return c?._motif?.options?.[TRANSITION_SLOT];
 	}
 	/**WAAPI keyframe (transitionIn) YA DA CSS class transition (name/classes) tanımlı olarak enter animasyonu varmı */
 	function clearNavDirection(c) {
@@ -4456,15 +4478,15 @@
 	        const node = c.element;
 	        if (!node || node.nodeType !== Node.COMMENT_NODE)
 	            break;
-	        c = c.parent ?? c._base?._leaveContainer;
+	        c = c.parent ?? c._leaveContainer;
 	    }
 	    return transitionSettings.mode;
 	}
 	function leaveModeOf(c) {
-	    return enterModeOf(c.parent ?? c._base?._leaveContainer);
+	    return enterModeOf(c.parent ?? c._leaveContainer);
 	}
 	function wantsEnterTransition(c) {
-	    const o = c?.motif?.options;
+	    const o = c?._motif?.options;
 	    const t = o?.[TRANSITION_SLOT];
 	    return !!(o?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
 	}
@@ -4619,8 +4641,6 @@
 	    return t;
 	}
 	class ComponentOptionsImpl {
-	    [OPTIONS_OWNER];
-	    [TRANSITION_SLOT];
 	    constructor(owner) {
 	        this[OPTIONS_OWNER] = owner;
 	    }
@@ -4660,24 +4680,44 @@
 	        }
 	    }
 	    hasEvent(name) {
-	        return !!this[OPTIONS_OWNER]._eventHandlers?.has(name);
+	        return hasEventKey(this[OPTIONS_OWNER], name);
 	    }
 	}
 	lazyBindMethods(ComponentOptionsImpl.prototype, ['getInstance', 'hasEvent']);
 	function fireLifecycle(component, name, ev) {
-	    const base = component._base;
+	    const base = component._baseCtx;
 	    if (base)
-	        base.emiters.fire(name, ev);
+	        base._emiters?.fire(name, ev);
+	}
+	function runHooks(base, listName, sender, ev, label) {
+	    if (!base)
+	        return;
+	    let slot = base[listName];
+	    if (!slot)
+	        return;
+	    let from = 0;
+	    if (typeof slot === 'function') {
+	        const fn = slot;
+	        callReported(() => fn(sender, ev), 'MJX122', label);
+	        slot = base[listName];
+	        if (!Array.isArray(slot))
+	            return;
+	        from = 1;
+	    }
+	    for (let i = from; i < slot.length; i++) {
+	        const fn = slot[i];
+	        callReported(() => fn(sender, ev), 'MJX122', label);
+	    }
 	}
 	function hasLifecycleHook(component, hook, listName, lowerName, legacyProp) {
 	    if (component[hook])
 	        return true;
-	    const list = component._base[listName];
-	    if (Array.isArray(list) && list.length > 0)
+	    const base = component._baseCtx;
+	    if (base?.[listName])
 	        return true;
 	    if (legacyProp && component[legacyProp])
 	        return true;
-	    return component._base.emiters.hasListeners(lowerName);
+	    return !!base?._emiters?.hasListeners(lowerName);
 	}
 	const RESERVED_METHODS = ['build', 'setState', 'reState', 'setText', 'style', 'dispose', 'disposeAsync', 'using', 'doWork', 'getService', '$', 'useModel', 'context', 'siblings', 'serviceProvider', 'isWait'];
 	const checkedComponentClasses = new WeakSet();
@@ -4746,21 +4786,17 @@
 	            callReported(() => component.initializeComponent(sender, ev), 'MJX122', 'initializeComponent');
 	        }
 	        // 2) aggregated extra initializeComponent handlers (örn, from props)
-	        if (Array.isArray(component._base._initializeComponentHandlers) && component._base._initializeComponentHandlers.length) {
-	            for (const fn of component._base._initializeComponentHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'initializeComponent');
-	            }
+	        const compiled = component._init;
+	        if (compiled) {
+	            callReported(() => compiled(sender, ev), 'MJX122', 'initializeComponent');
 	        }
+	        runHooks(component._baseCtx, '_initializeComponentHandlers', sender, ev, 'initializeComponent');
 	        // 3) class method  oninitializeComponent  
 	        if (typeof component.oninitializeComponent === 'function') {
 	            callReported(() => component.oninitializeComponent(sender, ev), 'MJX122', 'oninitializeComponent');
 	        }
 	        // 4) aggregated extra oninitializeComponent handlers (örn, from props)
-	        if (Array.isArray(component._base._onInitializeComponentHandlers) && component._base._onInitializeComponentHandlers.length) {
-	            for (const fn of component._base._onInitializeComponentHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'oninitializeComponent');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onInitializeComponentHandlers', sender, ev, 'oninitializeComponent');
 	    },
 	    callDisposing(component) {
 	        if (!component || component.isDisposed) {
@@ -4773,11 +4809,7 @@
 	        if (component.onDisposing) {
 	            callReported(() => component.onDisposing(sender, ev), 'MJX122', 'onDisposing');
 	        }
-	        if (Array.isArray(component._base._onDisposingHandlers)) {
-	            for (const fn of component._base._onDisposingHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onDisposing');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onDisposingHandlers', sender, ev, 'onDisposing');
 	        if (component.ondisposing) {
 	            callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
 	        }
@@ -4791,11 +4823,7 @@
 	        if (component.onActivated) {
 	            callReported(() => component.onActivated(sender, ev), 'MJX122', 'onActivated');
 	        }
-	        if (Array.isArray(component._base._onActivatedHandlers)) {
-	            for (const fn of component._base._onActivatedHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onActivated');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onActivatedHandlers', sender, ev, 'onActivated');
 	        fireLifecycle(component, 'onactivated', ev);
 	    },
 	    callDeactivated(component) {
@@ -4806,11 +4834,7 @@
 	        if (component.onDeactivated) {
 	            callReported(() => component.onDeactivated(sender, ev), 'MJX122', 'onDeactivated');
 	        }
-	        if (Array.isArray(component._base._onDeactivatedHandlers)) {
-	            for (const fn of component._base._onDeactivatedHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onDeactivated');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onDeactivatedHandlers', sender, ev, 'onDeactivated');
 	        fireLifecycle(component, 'ondeactivated', ev);
 	    },
 	    deactivateTree(component, deep = true) {
@@ -4822,7 +4846,7 @@
 	        if (!deep || component.isDisposed) {
 	            return;
 	        }
-	        for (const c of component.controls.items.slice()) {
+	        for (const c of childrenOf(component).slice()) {
 	            if (c && !c.isDisposed && c.isVisible && !c.isWait) {
 	                ComponentHelper.deactivateTree(c, true);
 	            }
@@ -4837,27 +4861,26 @@
 	        if (!deep || component.isDisposed) {
 	            return;
 	        }
-	        for (const c of component.controls.items.slice()) {
+	        for (const c of childrenOf(component).slice()) {
 	            if (c && !c.isDisposed && c.isVisible && !c.isWait) {
 	                ComponentHelper.activateTree(c, true);
 	            }
 	        }
 	    },
 	    callDisposed(component) {
-	        if (!component || !component._base || component._base._disposedFired) {
+	        if (!component || (component._flags & F_DISPOSED_FIRED) !== 0) {
 	            return;
 	        }
-	        component._base._disposedFired = true;
+	        if (component.isDisposed && !component.element && component._baseCtx === undefined) {
+	            return;
+	        }
+	        component._flags |= F_DISPOSED_FIRED;
 	        if (hasLifecycleHook(component, 'onDisposed', '_onDisposedHandlers', 'ondisposed', 'ondisposed')) {
 	            const sender = component, ev = { cancel: false };
 	            if (component.onDisposed) {
 	                callReported(() => component.onDisposed(sender, ev), 'MJX122', 'onDisposed');
 	            }
-	            if (Array.isArray(component._base._onDisposedHandlers)) {
-	                for (const fn of component._base._onDisposedHandlers) {
-	                    callReported(() => fn(sender, ev), 'MJX122', 'onDisposed');
-	                }
-	            }
+	            runHooks(component._baseCtx, '_onDisposedHandlers', sender, ev, 'onDisposed');
 	            if (component.ondisposed) {
 	                callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
 	            }
@@ -4877,11 +4900,7 @@
 	            if (component.onBuilt) {
 	                callReported(() => component.onBuilt(sender, ev), 'MJX122', 'onBuilt');
 	            }
-	            if (Array.isArray(component._base._onBuiltHandlers)) {
-	                for (const fn of component._base._onBuiltHandlers) {
-	                    callReported(() => fn(sender, ev), 'MJX122', 'onBuilt');
-	                }
-	            }
+	            runHooks(component._baseCtx, '_onBuiltHandlers', sender, ev, 'onBuilt');
 	            if (component.onbuilt) {
 	                callReported(() => component.onbuilt(sender, ev), 'MJX122', 'onbuilt');
 	            }
@@ -4893,11 +4912,11 @@
 	        catch { }
 	    },
 	    scheduleMounted(component) {
-	        if (!component || component.isDisposed || component._base._mountedScheduled) {
+	        if (!component || component.isDisposed || component._baseCtx?._mountedScheduled) {
 	            return;
 	        }
 	        const hasHook = typeof component.onMounted === 'function'
-	            || (Array.isArray(component._base._onMountedHandlers) && component._base._onMountedHandlers.length > 0)
+	            || !!component._baseCtx?._onMountedHandlers
 	            || typeof component.onmounted === 'function';
 	        if (!hasHook) {
 	            return;
@@ -4926,11 +4945,7 @@
 	        if (component.onMounted) {
 	            callReported(() => component.onMounted(sender, ev), 'MJX122', 'onMounted');
 	        }
-	        if (Array.isArray(component._base._onMountedHandlers)) {
-	            for (const fn of component._base._onMountedHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onMounted');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onMountedHandlers', sender, ev, 'onMounted');
 	        if (component.onmounted) {
 	            callReported(() => component.onmounted(sender, ev), 'MJX122', 'onmounted');
 	        }
@@ -4947,11 +4962,7 @@
 	        if (component.onBuilding) {
 	            callReported(() => component.onBuilding(sender, ev), 'MJX122', 'onBuilding');
 	        }
-	        if (Array.isArray(component._base._onBuildingHandlers)) {
-	            for (const fn of component._base._onBuildingHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onBuilding');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onBuildingHandlers', sender, ev, 'onBuilding');
 	        fireLifecycle(component, 'onbuilding', ev);
 	    },
 	    callConfig(component) {
@@ -4959,8 +4970,9 @@
 	            return;
 	        }
 	        component.isConfigured = true;
-	        if (component.motif.options._preconfig) {
-	            safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
+	        const preconfig = component._motif?.options?._preconfig;
+	        if (preconfig) {
+	            safeCallSilent(() => preconfig(component), 'Component._preconfig');
 	        }
 	        if (!hasLifecycleHook(component, 'onConfig', '_onConfigHandlers', 'onconfig')) {
 	            return;
@@ -4969,21 +4981,17 @@
 	        if (component.onConfig) {
 	            callReported(() => component.onConfig(sender, ev), 'MJX122', 'onConfig');
 	        }
-	        if (Array.isArray(component._base._onConfigHandlers)) {
-	            for (const fn of component._base._onConfigHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onConfig');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onConfigHandlers', sender, ev, 'onConfig');
 	        fireLifecycle(component, 'onconfig', ev);
 	    },
 	    callConfigured(component) {
-	        if (component.motif.options && component.motif.options._postconfigdone) {
+	        if ((component._flags & F_POSTCONFIG) !== 0) {
 	            return;
 	        }
-	        if (component?._base?._configDeferred && !component.isConfigured) {
+	        if (component?._baseCtx?._configDeferred && !component.isConfigured) {
 	            ComponentHelper.callConfig(component);
 	        }
-	        component.motif.options._postconfigdone = true;
+	        component._flags |= F_POSTCONFIG;
 	        if (!component || component.isDisposed) {
 	            return;
 	        }
@@ -4994,11 +5002,7 @@
 	        if (component.onConfigured) {
 	            callReported(() => component.onConfigured(sender, ev), 'MJX122', 'onConfigured');
 	        }
-	        if (Array.isArray(component._base._onConfiguredHandlers)) {
-	            for (const fn of component._base._onConfiguredHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onConfigured');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onConfiguredHandlers', sender, ev, 'onConfigured');
 	        fireLifecycle(component, 'onconfigured', ev);
 	    },
 	    callOnInitialized(component) {
@@ -5013,11 +5017,7 @@
 	        if (component.onInitialized) {
 	            callReported(() => component.onInitialized(sender, ev), 'MJX122', 'onInitialized');
 	        }
-	        if (Array.isArray(component._base._onInitializedHandlers)) {
-	            for (const fn of component._base._onInitializedHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onInitialized');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onInitializedHandlers', sender, ev, 'onInitialized');
 	        fireLifecycle(component, 'oninitialized', ev);
 	    },
 	    callOnInitializing(component) {
@@ -5031,29 +5031,21 @@
 	        if (component.onInitializing) {
 	            callReported(() => component.onInitializing(sender, ev), 'MJX122', 'onInitializing');
 	        }
-	        if (Array.isArray(component._base._onInitializingHandlers)) {
-	            for (const fn of component._base._onInitializingHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onInitializing');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onInitializingHandlers', sender, ev, 'onInitializing');
 	        fireLifecycle(component, 'oninitializing', ev);
 	    },
-	    callVisibilityChanged(component) {
+	    callVisibilityChanged(component, visible) {
 	        if (!component || component.isDisposed) {
 	            return;
 	        }
 	        if (!hasLifecycleHook(component, 'onVisibilityChanged', '_onVisibilityChangedHandlers', 'onvisibilitychanged')) {
 	            return;
 	        }
-	        const sender = component, ev = { cancel: false };
+	        const sender = component, ev = { cancel: false, visible };
 	        if (component.onVisibilityChanged) {
 	            callReported(() => component.onVisibilityChanged(sender, ev), 'MJX122', 'onVisibilityChanged');
 	        }
-	        if (Array.isArray(component._base._onVisibilityChangedHandlers)) {
-	            for (const fn of component._base._onVisibilityChangedHandlers) {
-	                callReported(() => fn(sender, ev), 'MJX122', 'onVisibilityChanged');
-	            }
-	        }
+	        runHooks(component._baseCtx, '_onVisibilityChangedHandlers', sender, ev, 'onVisibilityChanged');
 	        fireLifecycle(component, 'onvisibilitychanged', ev);
 	    },
 	    findFragmentContent(c) {
@@ -5082,9 +5074,12 @@
 	        ComponentHelper.callConfigured(c);
 	        if (c.isDisposed)
 	            return;
-	        c._base._activatePreBindings();
-	        if (c.isWait)
+	        activatePreBindings(c);
+	        if (c.isWait) {
+	            if (this.isBuilt)
+	                placeTrace(this, c);
 	            return;
+	        }
 	        const cisBuilt = c.isBuilt;
 	        if (!this.isBuilt) {
 	            return;
@@ -5092,7 +5087,7 @@
 	        if (c.isWait) {
 	            return;
 	        }
-	        const enterSeq = c._base._enterSeq;
+	        const enterSeq = c._baseCtx?._enterSeq;
 	        if (!c.isBuilt) {
 	            c.build();
 	        }
@@ -5121,40 +5116,12 @@
 	        if (cisBuilt && c.element.nodeType == Node.COMMENT_NODE && controlElement?.childNodes.length == 0 && c.controls.length > 0) {
 	            controlElement = ComponentHelper.getContent.call(c);
 	        }
-	        let referenceNode = null;
 	        const insertHost = appendableElement?.element;
-	        const domReferenceOf = (n) => {
-	            if (!n || !n.isBuilt)
-	                return null;
-	            const candidate = n.isVisible
-	                ? n.element
-	                : (n.motif.options?.placeholder ?? null);
-	            if (!candidate)
-	                return null;
-	            return (insertHost && candidate.parentNode === insertHost) ? candidate : null;
-	        };
-	        const siblings = this.controls.items;
-	        for (let i = currentIndex + 1; i < siblings.length; i++) {
-	            const candidate = domReferenceOf(siblings[i]);
-	            if (candidate) {
-	                referenceNode = candidate;
-	                break;
-	            }
-	        }
-	        if (!referenceNode) {
-	            if (this.element.nodeType === Node.COMMENT_NODE) {
-	                const close = this.motif.options.closeFragment;
-	                referenceNode = (close && insertHost && close.parentNode === insertHost) ? close : null;
-	            }
-	            else {
-	                referenceNode = null;
-	            }
-	        }
+	        const trace = c.motif.options.placeholder;
+	        const ownTrace = c.isVisible && trace && insertHost && trace.parentNode === insertHost ? trace : null;
+	        const referenceNode = ownTrace ?? (insertHost ? followingAnchor(this, currentIndex + 1, insertHost) : null);
 	        if (!c.isVisible) {
-	            const cfg = c.motif.options?.hideStrategy ?? 'auto';
-	            const isFromListOrKeyed = !!(c.motif.options?.__fromList || typeof c.motif.options?.indexkey !== 'undefined' || typeof c.motif.options?.__key !== 'undefined');
-	            const strategy = cfg === 'placeholder' ? 'placeholder' : (cfg === 'detach' ? 'detach' : (isFromListOrKeyed ? 'detach' : 'placeholder'));
-	            if (strategy === 'placeholder') {
+	            if (keepsTrace(c)) {
 	                if (!c.motif.options.placeholder) {
 	                    c.motif.options.placeholder = dom.createComment("h");
 	                }
@@ -5192,9 +5159,11 @@
 	            else {
 	                appendableElement?.element.appendChild(controlElement);
 	            }
+	            if (ownTrace && ownTrace.parentNode)
+	                ownTrace.parentNode.removeChild(ownTrace);
 	        }
 	        if (c.isVisible) {
-	            const enteredInBuild = !cisBuilt && c._base._enterSeq !== enterSeq;
+	            const enteredInBuild = !cisBuilt && c._baseCtx?._enterSeq !== enterSeq;
 	            !enteredInBuild && wantsEnterTransition(c) && c.motif.options.transition.enterTransition(() => { });
 	            if (cisBuilt) {
 	                ComponentHelper.activateTree(c);
@@ -5208,7 +5177,11 @@
 	        if (this.element.nodeType == Node.COMMENT_NODE) {
 	            this.motif.options.cache?.appendChild(this.element);
 	            this.controls.forEach(child => {
-	                this.motif.options.cache?.appendChild(ComponentHelper.getContent.call(child));
+	                const node = child.isWait || !child.isVisible
+	                    ? (keepsTrace(child) ? (child.motif.options.placeholder ??= dom.createComment("h")) : undefined)
+	                    : ComponentHelper.getContent.call(child);
+	                if (node)
+	                    this.motif.options.cache?.appendChild(node);
 	            });
 	            this.motif.options.cache?.appendChild(this.motif.options.closeFragment);
 	            return this.motif.options.cache;
@@ -5257,34 +5230,72 @@
 	        }
 	    }
 	};
+	function keepsTrace(c) {
+	    return optionsOf(c)?.hideStrategy !== 'detach';
+	}
+	function domAnchor(c, host) {
+	    const trace = optionsOf(c)?.placeholder;
+	    if (trace && trace.parentNode === host)
+	        return trace;
+	    const node = c.element;
+	    return node && node.parentNode === host ? node : null;
+	}
+	function followingAnchor(owner, start, host) {
+	    const siblings = owner.controls.items;
+	    for (let i = start; i < siblings.length; i++) {
+	        const anchor = siblings[i] ? domAnchor(siblings[i], host) : null;
+	        if (anchor)
+	            return anchor;
+	    }
+	    if (owner.element.nodeType === Node.COMMENT_NODE) {
+	        const close = optionsOf(owner)?.closeFragment;
+	        return close && close.parentNode === host ? close : null;
+	    }
+	    return null;
+	}
+	function placeTrace(owner, c) {
+	    if (!keepsTrace(c))
+	        return;
+	    const host = findAppendableComponent(owner)?.element;
+	    if (!host)
+	        return;
+	    const element = c.element;
+	    if (element && element.parentNode === host)
+	        return;
+	    const opts = c.motif.options;
+	    const trace = opts.placeholder ?? (opts.placeholder = dom.createComment("h"));
+	    if (trace.parentNode === host)
+	        return;
+	    host.insertBefore(trace, followingAnchor(owner, owner.controls.items.indexOf(c) + 1, host));
+	}
 	function removeComponentDom(c, node, alsoPlaceholder) {
-	    const opts = c.motif?.options;
+	    const opts = optionsOf(c);
 	    const parent = node.parentNode;
 	    if (node.nodeType === Node.COMMENT_NODE) {
-	        if (!parent)
-	            return;
-	        const close = opts?.closeFragment || null;
-	        if (close) {
-	            let current = node;
-	            while (current) {
-	                const after = current.nextSibling;
+	        if (parent) {
+	            const close = opts?.closeFragment || null;
+	            if (close) {
+	                let current = node;
+	                while (current) {
+	                    const after = current.nextSibling;
+	                    try {
+	                        parent.removeChild(current);
+	                    }
+	                    catch { }
+	                    if (current === close)
+	                        break;
+	                    current = after;
+	                }
+	            }
+	            else {
 	                try {
-	                    parent.removeChild(current);
+	                    parent.removeChild(node);
 	                }
 	                catch { }
-	                if (current === close)
-	                    break;
-	                current = after;
 	            }
+	            if (!alsoPlaceholder)
+	                return;
 	        }
-	        else {
-	            try {
-	                parent.removeChild(node);
-	            }
-	            catch { }
-	        }
-	        if (!alsoPlaceholder)
-	            return;
 	    }
 	    else if (parent) {
 	        try {
@@ -5371,23 +5382,23 @@
 	        return;
 	    ComponentHelper.callDisposing.call(c, c);
 	    try {
-	        c._base._offAll();
+	        offAll(c);
 	    }
 	    catch {
 	    }
 	    c.motif.stopAnimations();
-	    c._base._deactivateBindings();
-	    if (c.controls?.items?.length) {
-	        for (const child of c.controls.items) {
+	    deactivateBindings(c);
+	    if (childrenOf(c).length) {
+	        for (const child of c._controls.items) {
 	            try {
-	                child._base._disposeShallow();
+	                disposeShallow(child);
 	            }
 	            catch {
 	            }
 	        }
 	    }
 	    ComponentHelper.callDisposed.call(c, c);
-	    safeCall(() => { c._base.emiters.clear(); }, 'disposeShallow.emiters');
+	    safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'disposeShallow.emiters');
 	    c.isDisposed = true;
 	    Disposable.prototype.dispose.call(c);
 	}
@@ -5396,33 +5407,29 @@
 	        c.parent = null;
 	    }
 	    catch { }
-	    try {
-	        c._eventHandlers?.clear();
-	    }
-	    catch {
-	    }
 	    c._eventHandlers = undefined;
 	    try {
-	        c.class?._countsStore?.clear();
+	        c._class?._countsStore?.clear();
 	    }
 	    catch { }
 	    try {
-	        c.class?._watchersStore?.clear();
+	        c._class?._watchersStore?.clear();
 	    }
 	    catch { }
 	    try {
-	        c.attr?._attrMapStore?.clear();
+	        c._attr?._attrMapStore?.clear();
 	    }
 	    catch { }
 	    try {
-	        c.attr?._watchersStore?.clear();
+	        c._attr?._watchersStore?.clear();
 	    }
 	    catch { }
 	    try {
-	        if (c.motif.options) {
-	            c.motif.options.cache = undefined;
-	            c.motif.options.closeFragment = undefined;
-	            c.motif.options.placeholder = undefined;
+	        const opts = c._motif?.options;
+	        if (opts) {
+	            opts.cache = undefined;
+	            opts.closeFragment = undefined;
+	            opts.placeholder = undefined;
 	        }
 	    }
 	    catch {
@@ -5452,20 +5459,22 @@
 	    }
 	    catch { }
 	    try {
-	        c.motif.options = undefined;
+	        if (c._motif)
+	            c._motif.options = undefined;
 	    }
 	    catch { }
 	    const keys = Object.keys(c);
 	    for (let i = 0; i < keys.length; i++) {
 	        const key = keys[i];
-	        if (key === 'motif')
+	        if (key === '_motif' || key === '_flags')
 	            continue;
 	        try {
 	            c[key] = undefined;
 	        }
 	        catch { }
 	    }
-	    c.isDisposed = true;
+	    c._store = null;
+	    c._flags = F_DISPOSED | F_HIDDEN | F_DISPOSED_FIRED | F_POSTCONFIG | F_PREBOUND;
 	}
 	const DISPOSE_STARTED = Promise.resolve();
 	function subtreeDisposesSync(c, root) {
@@ -5473,7 +5482,7 @@
 	        return false;
 	    if (c.disposeAsync !== ComponentBase.prototype.disposeAsync)
 	        return false;
-	    const opts = c.motif?.options;
+	    const opts = optionsOf(c);
 	    if (opts) {
 	        if (opts.transitionOut)
 	            return false;
@@ -5487,8 +5496,8 @@
 	                return false;
 	        }
 	    }
-	    const items = c.controls?.items;
-	    if (items) {
+	    const items = childrenOf(c);
+	    if (items.length) {
 	        for (let i = 0; i < items.length; i++) {
 	            const child = items[i];
 	            if (child && !child.isDisposed && !subtreeDisposesSync(child, false))
@@ -5519,27 +5528,28 @@
 	        c.motif.options.transition.skipNextLeave = true;
 	    }
 	    safeCall(() => { ComponentHelper.callDisposing.call(c, c); }, ctx + '.callDisposing');
-	    c._base._offAll();
-	    c._base._deactivateBindings();
+	    offAll(c);
+	    deactivateBindings(c);
 	    safeCall(() => { c.parent?.controls?.silentDetach?.(c, true); }, ctx + '.silentDetach');
 	}
 	function disposeFinish(c, options, asChild) {
 	    c.isDisposed = true;
 	    Disposable.prototype.dispose.call(c);
 	    if (asChild) {
-	        c.controls.items = [];
+	        if (c._controls)
+	            c._controls.items = [];
 	        safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'disposeAsync.callDisposed');
-	        safeCall(() => { c._base.emiters.clear(); }, 'disposeAsync.emiters');
+	        safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'disposeAsync.emiters');
 	        if (options?.deep) {
-	            c._base._deepCleanup();
+	            deepCleanup(c);
 	        }
 	        return;
 	    }
 	    c.element = null;
 	    safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'dispose.callDisposed');
-	    safeCall(() => { c._base.emiters.clear(); }, 'dispose.emiters');
-	    c._base._offAll();
-	    c._base._deepCleanup();
+	    safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'dispose.emiters');
+	    offAll(c);
+	    deepCleanup(c);
 	}
 	async function disposeRemainderAsync(c, options, asChild, leave) {
 	    if (leave) {
@@ -5552,7 +5562,7 @@
 	        else if (peekTransition(c)?.skipNextLeave) {
 	            await c.motif.stopAnimations();
 	        }
-	        await c._base._detachDomWithAnimationAsync();
+	        await detachDomWithAnimationAsync(c);
 	    }
 	    if (!asChild && c.constructor.name !== 'TransportTo') {
 	        await disposeContentBlocks(c);
@@ -5562,7 +5572,7 @@
 	        if (c.isDisposed) {
 	            return;
 	        }
-	        const ctrls = Array.from(c.controls.items);
+	        const ctrls = Array.from(childrenOf(c));
 	        if (ctrls.length) {
 	            await Promise.all(ctrls.map(child => asChild
 	                ? safeCallAsync(async () => { await child.disposeAsync(childOptions); }, 'disposeAsync.disposeAsyncChildren.handler')
@@ -5592,8 +5602,8 @@
 	        const node = nodes[n];
 	        if (node.isDisposed)
 	            continue;
-	        const items = node.controls?.items;
-	        if (!items || items.length === 0)
+	        const items = childrenOf(node);
+	        if (items.length === 0)
 	            continue;
 	        const ctrls = Array.from(items);
 	        for (let j = 0; j < ctrls.length; j++) {
@@ -5608,7 +5618,8 @@
 	                retireServiceOwner(child);
 	                child._disposing = root._disposing;
 	                disposePrefix(child, childOptions, true);
-	                detachDomWithAnimation(child);
+	                if (child.element?.isConnected !== false)
+	                    detachDomWithAnimation(child);
 	                nodes.push(child);
 	                parents.push(n);
 	            }
@@ -5647,68 +5658,24 @@
 	    return null;
 	}
 	const BASE_PROTO = {
+	    get emiters() {
+	        const base = this;
+	        return base._emiters ??= new ComponentEmiter(base.owner);
+	    },
 	    _offAll() {
-	        const c = this.owner;
-	        if (!c._eventHandlers)
-	            return;
-	        for (const [full, set] of c._eventHandlers) {
-	            const name = full.split(":")[0];
-	            const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-	            for (const rec of set) {
-	                if (!rec || !rec.wrapped) {
-	                    continue;
-	                }
-	                if (rec.domEvent === false) {
-	                    continue;
-	                }
-	                const cap = rec.capture === true;
-	                try {
-	                    c.element.removeEventListener(evt, rec.wrapped, cap);
-	                }
-	                catch { }
-	                try {
-	                    if (rec.capture === undefined) {
-	                        c.element.removeEventListener(evt, rec.wrapped, !cap);
-	                    }
-	                }
-	                catch { }
-	            }
-	        }
-	        c._eventHandlers.clear();
-	        c._eventHandlers = undefined;
+	        offAll(this.owner);
 	    },
 	    _deactivateBindings() {
-	        const c = this.owner;
-	        try {
-	            c.bindings?.deactivateAll();
-	        }
-	        catch { }
+	        deactivateBindings(this.owner);
 	    },
 	    _activateBindings() {
-	        const c = this.owner;
-	        try {
-	            c.bindings?.activateAll();
-	        }
-	        catch { }
+	        activateBindings(this.owner);
 	    },
 	    _reactivateBindings() {
-	        const c = this.owner;
-	        try {
-	            c.bindings?.reActivateAll();
-	        }
-	        catch { }
+	        reactivateBindings(this.owner);
 	    },
 	    _activatePreBindings() {
-	        if (this.prebinding_Activated)
-	            return;
-	        const c = this.owner;
-	        const registered = c.bindings?._items;
-	        if (registered && registered.length > 0) {
-	            c.bindings.items.filter((x) => x.propertyName == "isWait" || x.propertyName == "display").forEach((b) => {
-	                b.activate();
-	            });
-	        }
-	        this.prebinding_Activated = true;
+	        activatePreBindings(this.owner);
 	    },
 	    _detachDomWithAnimation() {
 	        detachDomWithAnimation(this.owner);
@@ -5723,13 +5690,184 @@
 	        deepCleanup(this.owner);
 	    },
 	};
+	const EV_SELF = 1;
+	const EV_TRUSTED = 2;
+	const EV_PREVENT = 4;
+	const EV_STOP = 8;
+	const EV_CAPTURE = 16;
+	const EV_DOM = 32;
+	const EV_REMOVED = 64;
+	const NO_MODS = [];
+	let eventDispatchDepth = 0;
+	class EventRecord {
+	    constructor(owner, key, original, type, flags) {
+	        this.owner = owner;
+	        this.key = key;
+	        this.original = original;
+	        this.type = type;
+	        this.flags = flags;
+	        this.next = undefined;
+	    }
+	    handleEvent(ev) {
+	        const flags = this.flags;
+	        const owner = this.owner;
+	        if ((flags & EV_SELF) !== 0 && ev.target !== owner.element)
+	            return;
+	        if ((flags & EV_TRUSTED) !== 0 && !ev.isTrusted)
+	            return;
+	        const cb = this.original;
+	        let res;
+	        try {
+	            if (cb && cb.length <= 1) {
+	                res = cb(ev);
+	            }
+	            else if (cb) {
+	                res = cb(owner, ev);
+	            }
+	        }
+	        catch (error) {
+	            reportError('MJX123', error, this.type);
+	        }
+	        if (res && typeof res.then === 'function') {
+	            const type = this.type;
+	            res.then(undefined, (error) => reportError('MJX123', error, type));
+	        }
+	        if ((flags & EV_PREVENT) !== 0) {
+	            preventEvent(ev);
+	        }
+	        if ((flags & EV_STOP) !== 0) {
+	            stopEvent(ev);
+	        }
+	        if (res && res.cancel === true) {
+	            preventEvent(ev);
+	            stopEvent(ev);
+	        }
+	    }
+	}
+	function preventEvent(ev) {
+	    if (typeof ev?.preventDefault === 'function')
+	        ev.preventDefault();
+	}
+	function stopEvent(ev) {
+	    if (typeof ev?.stopPropagation === 'function')
+	        ev.stopPropagation();
+	}
+	function addEventRecord(c, record) {
+	    let last = c._eventHandlers;
+	    if (last === undefined) {
+	        c._eventHandlers = record;
+	        return;
+	    }
+	    while (last.next !== undefined)
+	        last = last.next;
+	    last.next = record;
+	}
+	function compactEventRecords(c) {
+	    let head;
+	    let tail;
+	    for (let r = c._eventHandlers; r !== undefined; r = r.next) {
+	        if ((r.flags & EV_REMOVED) !== 0)
+	            continue;
+	        if (tail === undefined)
+	            head = r;
+	        else
+	            tail.next = r;
+	        tail = r;
+	    }
+	    if (tail !== undefined)
+	        tail.next = undefined;
+	    c._eventHandlers = head;
+	}
+	function hasEventKey(c, key) {
+	    for (let r = c._eventHandlers; r !== undefined; r = r.next) {
+	        if ((r.flags & EV_REMOVED) === 0 && r.key === key)
+	            return true;
+	    }
+	    return false;
+	}
+	function offAll(c) {
+	    const head = c._eventHandlers;
+	    if (head === undefined)
+	        return;
+	    for (let r = head; r !== undefined; r = r.next) {
+	        if ((r.flags & (EV_DOM | EV_REMOVED)) !== EV_DOM) {
+	            continue;
+	        }
+	        try {
+	            c.element.removeEventListener(r.type, r, (r.flags & EV_CAPTURE) !== 0);
+	        }
+	        catch { }
+	    }
+	    c._eventHandlers = undefined;
+	}
+	function deactivateBindings(c) {
+	    try {
+	        if (c._bindings?._items?.length)
+	            c._bindings.deactivateAll();
+	    }
+	    catch { }
+	}
+	function activateBindings(c) {
+	    try {
+	        c._bindings?.activateAll();
+	    }
+	    catch { }
+	}
+	function reactivateBindings(c) {
+	    try {
+	        c._bindings?.reActivateAll();
+	    }
+	    catch { }
+	}
+	function activatePreBindings(c) {
+	    if ((c._flags & F_PREBOUND) !== 0)
+	        return;
+	    const registered = c._bindings?._items;
+	    if (registered && registered.length > 0) {
+	        c._bindings.items.filter((x) => x.propertyName == "isWait" || x.propertyName == "display").forEach((b) => {
+	            b.activate();
+	        });
+	    }
+	    c._flags |= F_PREBOUND;
+	}
 	function createBaseCtx(owner) {
 	    const base = Object.create(BASE_PROTO);
 	    base.owner = owner;
-	    base.prebinding_Activated = false;
-	    base.emiters = new ComponentEmiter(owner);
 	    return base;
 	}
+	function controlsOwner(collection) {
+	    return collection.owner;
+	}
+	const NO_CHILDREN = Object.freeze([]);
+	const NO_BINDINGS = Object.freeze([]);
+	function childrenOf(c) {
+	    return c._controls?.items ?? NO_CHILDREN;
+	}
+	function createOwnedControls(c) {
+	    const controls = new ControlCollection(c);
+	    controls.onAdd = ownerControlAdded;
+	    controls.onAddBeforeBuild = ownerControlAddedBeforeBuild;
+	    controls.onRemove = ownerControlRemoved;
+	    return controls;
+	}
+	function ownerControlAdded(c) {
+	    const owner = controlsOwner(this);
+	    if (hasEventKey(owner, 'controladded'))
+	        owner.motif.trigger('controladded', { control: c });
+	    if (!owner.isVisible && owner.element?.nodeType === Node.COMMENT_NODE)
+	        return;
+	    ComponentHelper.internalBuild.call(owner, c);
+	}
+	function ownerControlAddedBeforeBuild(c) {
+	    const owner = controlsOwner(this);
+	    if (hasEventKey(owner, 'controladded'))
+	        owner.motif.trigger('controladded', { control: c });
+	}
+	function ownerControlRemoved(c) {
+	    const owner = controlsOwner(this);
+	    if (hasEventKey(owner, 'controlremoved'))
+	        owner.motif.trigger('controlremoved', { control: c });
+	}
 	const fragmentCloseMarkers = new WeakMap();
 	const LIFECYCLE_X_EVENTS = new Set([
 	    'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
@@ -5768,37 +5906,83 @@
 	    });
 	}
 	class ComponentBase extends Disposable {
-	    motif = new ComponentMotif(this, new ComponentOptionsImpl(this));
-	    element;
-	    props;
-	    isBuilt = false;
-	    isInitialized = false;
-	    isDisposed = false;
-	    isConfigured = false;
-	    isPainting = false;
-	    isPainted = false;
-	    isVisible = true;
-	    controls = new ControlCollection(this);
-	    _eventHandlers;
-	    _isWait = false;
-	    class = new controlClass(this);
-	    attr = new controlAttribute(this);
-	    bindings = new BindingCollection(this);
-	    /** style(fn) izleyicisi: tek tek tutulur, yeniden çağrıda önceki durdurulur. */
-	    _styleFx;
+	    get motif() {
+	        return this._motif !== undefined ? this._motif : (this._motif = new ComponentMotif(this, (this.isDisposed && !this.element ? undefined : new ComponentOptionsImpl(this))));
+	    }
+	    set motif(value) {
+	        this._motif = value;
+	    }
+	    get isBuilt() {
+	        return (this._flags & F_BUILT) !== 0;
+	    }
+	    set isBuilt(value) {
+	        this._flags = value ? this._flags | F_BUILT : this._flags & ~F_BUILT;
+	    }
+	    get isInitialized() {
+	        return (this._flags & F_INITIALIZED) !== 0;
+	    }
+	    set isInitialized(value) {
+	        this._flags = value ? this._flags | F_INITIALIZED : this._flags & ~F_INITIALIZED;
+	    }
+	    get isDisposed() {
+	        return (this._flags & F_DISPOSED) !== 0;
+	    }
+	    set isDisposed(value) {
+	        this._flags = value ? this._flags | F_DISPOSED : this._flags & ~F_DISPOSED;
+	    }
+	    get isConfigured() {
+	        return (this._flags & F_CONFIGURED) !== 0;
+	    }
+	    set isConfigured(value) {
+	        this._flags = value ? this._flags | F_CONFIGURED : this._flags & ~F_CONFIGURED;
+	    }
+	    get isPainting() {
+	        return (this._flags & F_PAINTING) !== 0;
+	    }
+	    set isPainting(value) {
+	        this._flags = value ? this._flags | F_PAINTING : this._flags & ~F_PAINTING;
+	    }
+	    get isPainted() {
+	        return (this._flags & F_PAINTED) !== 0;
+	    }
+	    set isPainted(value) {
+	        this._flags = value ? this._flags | F_PAINTED : this._flags & ~F_PAINTED;
+	    }
+	    get isVisible() {
+	        return (this._flags & F_HIDDEN) === 0;
+	    }
+	    set isVisible(value) {
+	        this._flags = value ? this._flags & ~F_HIDDEN : this._flags | F_HIDDEN;
+	    }
+	    get controls() {
+	        return this._controls !== undefined || (this.isDisposed && !this.element) ? this._controls : (this._controls = createOwnedControls(this));
+	    }
+	    set controls(value) {
+	        this._controls = value;
+	    }
+	    get class() {
+	        return this._class !== undefined || (this.isDisposed && !this.element) ? this._class : (this._class = new controlClass(this));
+	    }
+	    set class(value) {
+	        this._class = value;
+	    }
+	    get attr() {
+	        return this._attr !== undefined || (this.isDisposed && !this.element) ? this._attr : (this._attr = new controlAttribute(this));
+	    }
+	    set attr(value) {
+	        this._attr = value;
+	    }
+	    get bindings() {
+	        return this._bindings !== undefined || (this.isDisposed && !this.element) ? this._bindings : (this._bindings = new BindingCollection(this));
+	    }
+	    set bindings(value) {
+	        this._bindings = value;
+	    }
 	    useModel(modelCtor) {
 	        return reactive(modelCtor);
 	    }
 	    _computeHideStrategy() {
-	        const cfg = this.motif.options?.hideStrategy ?? 'auto';
-	        if (cfg === 'placeholder')
-	            return 'placeholder';
-	        if (cfg === 'detach')
-	            return 'detach';
-	        if (this.motif.options?.__fromList || typeof this.motif.options?.indexkey !== 'undefined' || typeof this.motif.options?.__key !== 'undefined') {
-	            return 'detach';
-	        }
-	        return 'placeholder';
+	        return keepsTrace(this) ? 'placeholder' : 'detach';
 	    }
 	    _isInDom() {
 	        try {
@@ -5815,7 +5999,7 @@
 	        }
 	    }
 	    set isWait(value) {
-	        this._isWait = value;
+	        this._flags = value ? this._flags | F_WAIT : this._flags & ~F_WAIT;
 	        if (this.isBuilt) {
 	            if (value) {
 	                this.motif.hide();
@@ -5830,10 +6014,22 @@
 	        }
 	    }
 	    get isWait() {
-	        return this._isWait;
+	        return (this._flags & F_WAIT) !== 0;
 	    }
 	    constructor(element, props = {}) {
 	        super();
+	        this._motif = undefined;
+	        this._flags = 0;
+	        this._controls = undefined;
+	        this._class = undefined;
+	        this._attr = undefined;
+	        this._bindings = undefined;
+	        this._baseCtx = undefined;
+	        this._init = undefined;
+	        this._leaveContainer = undefined;
+	        this.parent = null;
+	        const asComponentRoot = constructingComponentRoot;
+	        constructingComponentRoot = false;
 	        recordServiceOwner(this);
 	        if (this.onElementCreating) {
 	            this.element = this.onElementCreating.call(this);
@@ -5844,44 +6040,38 @@
 	        else {
 	            this.element = element;
 	        }
-	        if (props) {
-	            const refs = extractRefs(props, this);
-	            if (refs.length > 0) {
-	                for (const fn of takePendingRefs(this, refs)) {
-	                    callReported(() => fn(this), 'MJX122', 'ref');
-	                }
-	            }
+	        if (this.element?.nodeType !== 3) {
+	            if (this._controls === undefined)
+	                this._controls = new ControlCollection(this);
 	        }
-	        props && ParseProps(props, this);
+	        const refs = props ? extractRefs(props, this) : [];
+	        if (props && ParseProps(props, this))
+	            props = {};
 	        applyComponentOptions(props?.options, this);
 	        this.props = props;
 	        // (class/style/id/tabindex/role/aria-*/data-*) kök düğüme (root node) düşer, prop'lar this.props'ta kalır.
 	        if (props) {
 	            const ctor0 = new.target;
-	            const plain = ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase;
+	            const plain = !asComponentRoot && (ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase);
 	            if (plain)
 	                applyPlainElementProps(props, this);
 	            else
 	                applyFallthroughProps(props, this);
 	        }
+	        if (refs.length > 0) {
+	            for (const fn of takePendingRefs(this, refs)) {
+	                callReported(() => fn(this), 'MJX122', 'ref');
+	            }
+	        }
 	        ComponentHelper.callOnInitializing(this);
 	        if (this.isDisposed)
 	            return;
-	        this.controls.onAdd = (c) => {
-	            if (this._eventHandlers?.has('controladded'))
-	                this.motif.trigger('controladded', { control: c });
-	            if (this.isWait || this.parent?.isWait)
-	                return;
-	            ComponentHelper.internalBuild.call(this, c);
-	        };
-	        this.controls.onAddBeforeBuild = (c) => {
-	            if (this._eventHandlers?.has('controladded'))
-	                this.motif.trigger('controladded', { control: c });
-	        };
-	        this.controls.onRemove = (c) => {
-	            if (this._eventHandlers?.has('controlremoved'))
-	                this.motif.trigger('controlremoved', { control: c });
-	        };
+	        const controls = this._controls;
+	        if (controls) {
+	            controls.onAdd = ownerControlAdded;
+	            controls.onAddBeforeBuild = ownerControlAddedBeforeBuild;
+	            controls.onRemove = ownerControlRemoved;
+	        }
 	        ComponentHelper.callOnInitialized(this);
 	        const ctor = new.target;
 	        const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
@@ -5892,10 +6082,9 @@
 	            this._base._configDeferred = true;
 	        }
 	    }
-	    childs;
-	    _base = createBaseCtx(this);
-	    parent = null;
-	    _scopedContext;
+	    get _base() {
+	        return this._baseCtx !== undefined || (this.isDisposed && !this.element) ? this._baseCtx : (this._baseCtx = createBaseCtx(this));
+	    }
 	    get context() {
 	        const parentCtx = this.parent?.context;
 	        const app = parentCtx?.[RAW_APPLICATION] ?? parentCtx ?? teardownApplications.get(this) ?? Application.main;
@@ -5922,7 +6111,7 @@
 	    build(building = true) {
 	        checkReservedMembers(this);
 	        ComponentHelper.callConfigured(this);
-	        this._base._activatePreBindings();
+	        activatePreBindings(this);
 	        if (this.isDisposed || !this.element || this.isWait) {
 	            return;
 	        }
@@ -5959,7 +6148,7 @@
 	        }
 	        const deferredSelectValue = this.element?.nodeName === 'SELECT'
 	            ? this.bindings.items.filter(b => b.propertyName === 'value')
-	            : [];
+	            : NO_BINDINGS;
 	        if (deferredSelectValue.length) {
 	            try {
 	                this.bindings.items.filter(b => !deferredSelectValue.includes(b)).forEach(b => b.activate());
@@ -5967,32 +6156,41 @@
 	            catch { }
 	        }
 	        else {
-	            this._base._activateBindings();
+	            activateBindings(this);
 	        }
-	        for (const element of this.controls.items.filter(c => !c.isWait)) {
-	            element.parent = this;
-	            element.build(false);
+	        const kids = childrenOf(this);
+	        for (const element of kids.length ? kids.slice() : kids) {
+	            var target = isFragment ? this.motif.options.cache : this.element;
+	            if (!element.isWait) {
+	                element.parent = this;
+	                element.build(false);
+	            }
 	            if (element.isWait) {
+	                if (keepsTrace(element)) {
+	                    const opts = element.motif.options;
+	                    (building ? ph : target).appendChild(opts.placeholder ?? (opts.placeholder = dom.createComment("h")));
+	                }
 	                continue;
 	            }
-	            var target = isFragment ? this.motif.options.cache : this.element;
 	            if (building) {
-	                if (element.motif.options.cache) {
-	                    ph.appendChild(element.motif.options.cache);
+	                const cache = optionsOf(element)?.cache;
+	                if (cache) {
+	                    ph.appendChild(cache);
 	                }
 	                else {
 	                    ph.appendChild(element.element);
 	                }
 	            }
 	            else {
-	                if (element.motif.options.cache) {
-	                    target.appendChild(element.motif.options.cache);
+	                const cache = optionsOf(element)?.cache;
+	                if (cache) {
+	                    target.appendChild(cache);
 	                }
 	                else {
 	                    target.appendChild(element.element);
 	                }
 	            }
-	            if (element._base?._inactive && element.isVisible) {
+	            if (element._baseCtx?._inactive && element.isVisible) {
 	                ComponentHelper.activateTree(element);
 	            }
 	        }
@@ -6055,10 +6253,10 @@
 	        this.controls.forEach(c => {
 	            c.setState();
 	        });
-	        this._base._reactivateBindings();
+	        reactivateBindings(this);
 	    }
 	    reState() {
-	        this._base._reactivateBindings();
+	        reactivateBindings(this);
 	        this.controls.forEach(c => {
 	            c.reState();
 	        });
@@ -6182,6 +6380,9 @@
 	        if (this.isVisible) {
 	            return;
 	        } /* A*/
+	        if (this.isWait) {
+	            return;
+	        }
 	        if (this.parent && enterModeOf(this.parent) === 'out-in') {
 	            const showHost = (this.motif.options.placeholder?.parentNode)
 	                ?? findAppendableComponent(this.parent)?.element;
@@ -6203,7 +6404,7 @@
 	        /** A*/
 	        const strategy = this._computeHideStrategy();
 	        if (strategy === 'detach') {
-	            ComponentHelper.callVisibilityChanged(this);
+	            ComponentHelper.callVisibilityChanged(this, true);
 	            if (this.isDisposed) {
 	                return;
 	            }
@@ -6220,6 +6421,10 @@
 	            const expectedParent = findAppendableComponent(this.parent)?.element;
 	            if (this.motif.options.placeholder && placeholderParent && placeholderParent !== expectedParent) {
 	                reportWarning('MJX106', []);
+	                ComponentHelper.callVisibilityChanged(this, true);
+	                if (this.isDisposed) {
+	                    return;
+	                }
 	                this.isVisible = true;
 	                if (this.parent?.isBuilt) {
 	                    ComponentHelper.internalBuild.call(this.parent, this);
@@ -6228,11 +6433,12 @@
 	            }
 	            /** A*/
 	            wantsEnterTransition(this) && this.motif.options.transition.enterTransition(() => { });
-	            ComponentHelper.callVisibilityChanged(this);
+	            ComponentHelper.callVisibilityChanged(this, true);
 	            if (this.isDisposed) {
 	                return;
 	            }
 	            if (this.element.nodeType === Node.COMMENT_NODE) {
+	                this.controls.items.filter(c => !c.isBuilt).forEach(c => ComponentHelper.internalBuild.call(this, c));
 	                this.controls.forEach(c => {
 	                    c.motif.show();
 	                });
@@ -6240,6 +6446,10 @@
 	                ComponentHelper.activateTree(this, false);
 	                return;
 	            }
+	            if (!this.isBuilt) {
+	                this.isVisible = true;
+	                return;
+	            }
 	            var parent = this.motif.options.placeholder?.parentElement;
 	            if (parent) {
 	                parent.replaceChild(this.element, this.motif.options.placeholder);
@@ -6258,7 +6468,7 @@
 	        }
 	        const strategy = this._computeHideStrategy();
 	        if (strategy === 'detach') {
-	            ComponentHelper.callVisibilityChanged(this);
+	            ComponentHelper.callVisibilityChanged(this, false);
 	            if (this.isDisposed) {
 	                return;
 	            }
@@ -6273,7 +6483,7 @@
 	            if (skip)
 	                transition.skipNextLeave = false;
 	            const finish = () => {
-	                ComponentHelper.callVisibilityChanged(this);
+	                ComponentHelper.callVisibilityChanged(this, false);
 	                if (this.isDisposed) {
 	                    return;
 	                }
@@ -6356,61 +6566,36 @@
 	                return this;
 	            }
 	        }
-	        const [name, ...mods] = full.split(":");
+	        const colon = full.indexOf(":");
+	        const name = colon < 0 ? full : full.slice(0, colon);
+	        const mods = colon < 0 ? NO_MODS : full.slice(colon + 1).split(":");
 	        const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-	        const options = {};
-	        if (mods.includes("once"))
-	            options.once = true;
-	        if (mods.includes("passive"))
-	            options.passive = true;
-	        if (mods.includes("capture"))
-	            options.capture = true;
-	        const wrapped = (ev) => {
-	            if (mods.includes("self") && ev.target !== this.element)
-	                return;
-	            if (mods.includes("trusted") && !ev.isTrusted)
-	                return;
-	            let res;
-	            try {
-	                if (cb && cb.length <= 1) {
-	                    res = cb(ev);
-	                }
-	                else if (cb) {
-	                    res = cb(this, ev);
-	                }
-	            }
-	            catch (error) {
-	                reportError('MJX123', error, evt);
-	            }
-	            if (res && typeof res.then === 'function') {
-	                res.then(undefined, (error) => reportError('MJX123', error, evt));
-	            }
-	            const prevent = () => { if (typeof ev?.preventDefault === 'function')
-	                ev.preventDefault(); };
-	            const stop = () => { if (typeof ev?.stopPropagation === 'function')
-	                ev.stopPropagation(); };
-	            if (mods.includes("prevent")) {
-	                prevent();
-	            }
-	            if (mods.includes("stop")) {
-	                stop();
-	            }
-	            if (res && res.cancel === true) {
-	                prevent();
-	                stop();
-	            }
-	        };
+	        let flags = domEvent ? EV_DOM : 0;
+	        let options;
+	        if (mods.length) {
+	            options = {};
+	            if (mods.includes("once"))
+	                options.once = true;
+	            if (mods.includes("passive"))
+	                options.passive = true;
+	            if (mods.includes("capture")) {
+	                options.capture = true;
+	                flags |= EV_CAPTURE;
+	            }
+	            if (mods.includes("self"))
+	                flags |= EV_SELF;
+	            if (mods.includes("trusted"))
+	                flags |= EV_TRUSTED;
+	            if (mods.includes("prevent"))
+	                flags |= EV_PREVENT;
+	            if (mods.includes("stop"))
+	                flags |= EV_STOP;
+	        }
+	        const record = new EventRecord(this, full.toLowerCase(), cb, evt, flags);
 	        if (domEvent) {
-	            this.element.addEventListener(evt, wrapped, options);
-	        }
-	        this._eventHandlers ??= new Map();
-	        const key = full.toLowerCase();
-	        const set = this._eventHandlers.get(key) ?? new Set();
-	        set.add({ original: cb, wrapped, capture: !!options.capture, domEvent: !!domEvent, type: evt });
-	        this._eventHandlers.set(key, set);
-	        this._register(disposableCore.toDisposable(() => {
-	            this.motif.off(event, cb);
-	        }));
+	            this.element.addEventListener(evt, record, options);
+	        }
+	        addEventRecord(this, record);
 	        return this;
 	    }
 	    async _trigger(event, ev) {
@@ -6419,15 +6604,20 @@
 	        }
 	        const name = String(event).toLowerCase();
 	        safeCall(() => {
-	            var eh = this._eventHandlers?.get(name);
-	            if (eh) {
-	                eh.forEach(rec => {
+	            eventDispatchDepth++;
+	            try {
+	                for (let r = this._eventHandlers; r !== undefined; r = r.next) {
+	                    if ((r.flags & EV_REMOVED) !== 0 || r.key !== name)
+	                        continue;
 	                    try {
-	                        rec.wrapped(ev);
+	                        r.handleEvent(ev);
 	                    }
 	                    catch {
 	                    }
-	                });
+	                }
+	            }
+	            finally {
+	                eventDispatchDepth--;
 	            }
 	        }, 'trigger');
 	        return this;
@@ -6450,38 +6640,24 @@
 	                return this;
 	            }
 	            if (LIFECYCLE_X_EVENTS.has(xName)) {
-	                this._base.emiters.off("on" + xName, cb);
+	                this._base._emiters?.off("on" + xName, cb);
 	            }
 	            return this;
 	        }
-	        const name = full.split(":")[0];
-	        const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-	        if (!this._eventHandlers)
-	            return this;
-	        const set = this._eventHandlers.get(full);
-	        if (!set)
-	            return this;
-	        for (const rec of Array.from(set)) {
-	            if (rec.original === cb) {
-	                if (rec.domEvent !== false) {
-	                    const cap = rec.capture === true;
-	                    safeCall(() => { this.element.removeEventListener(evt, rec.wrapped, cap); }, 'off.removeEventListener');
-	                    safeCall(() => {
-	                        if (rec.capture === undefined) {
-	                            this.element.removeEventListener(evt, rec.wrapped, !cap);
-	                        }
-	                    }, 'off.removeEventListener.fallback');
-	                }
-	                set.delete(rec);
-	                break;
+	        for (let r = this._eventHandlers; r !== undefined; r = r.next) {
+	            if ((r.flags & EV_REMOVED) !== 0 || r.key !== full || r.original !== cb)
+	                continue;
+	            if ((r.flags & EV_DOM) !== 0) {
+	                const rec = r;
+	                safeCall(() => { this.element.removeEventListener(rec.type, rec, (rec.flags & EV_CAPTURE) !== 0); }, 'off.removeEventListener');
 	            }
+	            r.flags |= EV_REMOVED;
+	            break;
 	        }
-	        if (set.size === 0)
-	            this._eventHandlers.delete(full);
+	        if (eventDispatchDepth === 0)
+	            compactEventRecords(this);
 	        return this;
 	    }
-	    /** Süren bertaraf: ikinci bir dispose/disposeAsync çağrısı yenisini başlatmaz, bunu bekler. */
-	    _disposing;
 	    dispose(options = { deep: true }) {
 	        if (this.isDisposed) {
 	            return Promise.resolve();
@@ -6552,8 +6728,6 @@
 	            }
 	        });
 	    }
-	    _siblingsApi;
-	    _siblingsSet;
 	    get siblings() {
 	        if (this._siblingsSet) {
 	            return this._siblingsApi;
@@ -6745,6 +6919,16 @@
 	    }
 	    return pending;
 	}
+	function disposeUnplacedChilds(owner, kids) {
+	    if (!Array.isArray(kids) || !kids.some(kid => kid instanceof ComponentBase))
+	        return;
+	    owner.motif.setDisposable(() => {
+	        for (const kid of kids) {
+	            if (kid instanceof ComponentBase && !kid.isDisposed && !kid.parent)
+	                kid.dispose();
+	        }
+	    });
+	}
 	const isCallableRef = (ref) => typeof ref === 'function' || Array.isArray(ref);
 	function extractRefs(props, component) {
 	    const refs = [];
@@ -6796,26 +6980,38 @@
 	    const fns = Array.isArray(value) ? value : [value];
 	    if (fns.length === 0 || !fns.every(fn => typeof fn === 'function'))
 	        return false;
-	    component._base[listName] ??= [];
-	    const list = component._base[listName];
-	    for (const fn of fns) {
-	        if (!list.includes(fn))
-	            list.push(fn);
+	    const target = component;
+	    let from = 0;
+	    if (listName === '_initializeComponentHandlers') {
+	        if (target._init === undefined && !target._baseCtx?._initializeComponentHandlers) {
+	            target._init = fns[0];
+	            from = 1;
+	        }
+	    }
+	    if (from >= fns.length)
+	        return true;
+	    const base = target._base;
+	    for (let i = from; i < fns.length; i++) {
+	        const fn = fns[i];
+	        if (listName === '_initializeComponentHandlers' && fn === target._init)
+	            continue;
+	        const slot = base[listName];
+	        if (slot === undefined)
+	            base[listName] = fn;
+	        else if (typeof slot === 'function') {
+	            if (slot !== fn)
+	                base[listName] = [slot, fn];
+	        }
+	        else if (!slot.includes(fn))
+	            slot.push(fn);
 	    }
 	    return true;
 	}
 	function ParseProps(props, component) {
 	    if (props) {
-	        if (component.motif.options.props) {
-	            Object.assign(component.motif.options.props, props);
-	        }
-	        else {
-	            component.motif.options.props = {};
-	            Object.assign(component.motif.options.props, props);
-	        }
 	        var keys = Object.keys(props);
 	        if (keys.length === 0)
-	            return;
+	            return false;
 	        keys.forEach(key => {
 	            if (key == 'initializeComponent' || key == 'oninitializeComponent' || key.startsWith('on')) {
 	                if (collectLifecycleHandlers(component, key.toLowerCase(), props[key])) {
@@ -6826,6 +7022,7 @@
 	            else if (key == 'childs') {
 	                const flat = [].concat(...props[key]);
 	                component.childs = flat;
+	                disposeUnplacedChilds(component, flat);
 	                delete props[key];
 	            }
 	            else if (key === 'transition') {
@@ -6870,9 +7067,14 @@
 	                component.motif.options._preconfig = props[key];
 	                delete props[key];
 	            }
+	            else if (key === '__childExpr') {
+	                delete props[key];
+	            }
 	            else ;
 	        });
+	        return typeof props === 'object' && Reflect.ownKeys(props).length === 0;
 	    }
+	    return false;
 	}
 	const _transitionSources = new WeakMap();
 	function setTransition(component, value, live) {
@@ -7043,6 +7245,16 @@
 	function isFallthroughKey(key) {
 	    return FALLTHROUGH_KEYS.has(key) || key.startsWith('aria-') || key.startsWith('data-');
 	}
+	let constructingComponentRoot = false;
+	function constructComponentRoot(make) {
+	    constructingComponentRoot = true;
+	    try {
+	        return make();
+	    }
+	    finally {
+	        constructingComponentRoot = false;
+	    }
+	}
 	function applyFallthroughProps(props, component) {
 	    if (!props || typeof props !== 'object' || component.isDisposed)
 	        return;
@@ -7092,35 +7304,51 @@
 	        return null;
 	    }, 'findAppendableComponent', null);
 	}
+	const attachWaiters = new Set();
+	let attachObserver = null;
+	function releaseAttachObserver() {
+	    if (attachWaiters.size || !attachObserver) {
+	        return;
+	    }
+	    try {
+	        attachObserver.disconnect();
+	    }
+	    catch { /* ignore */ }
+	    attachObserver = null;
+	}
+	function flushAttachWaiters() {
+	    for (const waiter of [...attachWaiters]) {
+	        if (!attachWaiters.has(waiter) || !document.contains(waiter.element)) {
+	            continue;
+	        }
+	        attachWaiters.delete(waiter);
+	        try {
+	            waiter.callback();
+	        }
+	        catch (error) {
+	            queueMicrotask(() => { throw error; });
+	        }
+	    }
+	    releaseAttachObserver();
+	}
 	function onElementAttached(element, callback) {
 	    if (document.contains(element)) {
 	        callback();
 	        return null;
 	    }
-	    let done = false;
-	    const observer = new MutationObserver(() => {
-	        if (done) {
-	            return;
-	        }
-	        if (document.contains(element)) {
-	            done = true;
-	            observer.disconnect();
-	            callback();
-	        }
-	    });
-	    observer.observe(document.documentElement, {
-	        childList: true,
-	        subtree: true,
-	    });
+	    const waiter = { element, callback };
+	    attachWaiters.add(waiter);
+	    if (!attachObserver) {
+	        attachObserver = new MutationObserver(flushAttachWaiters);
+	        attachObserver.observe(document.documentElement, {
+	            childList: true,
+	            subtree: true,
+	        });
+	    }
 	    return () => {
-	        if (done) {
-	            return;
+	        if (attachWaiters.delete(waiter)) {
+	            releaseAttachObserver();
 	        }
-	        done = true;
-	        try {
-	            observer.disconnect();
-	        }
-	        catch { /* ignore */ }
 	    };
 	}
 	function notifyActivated(component) {
@@ -7176,8 +7404,6 @@
 	    return dom.createElement(tag, props);
 	}
 	class Component extends ComponentBase {
-	    static elementTag;
-	    static elementNamespace;
 	    constructor() {
 	        const derivedCtor = new.target;
 	        var args = arguments;
@@ -7257,9 +7483,11 @@
 	            // Alt sınıflar initializeComponent'i ezdiği için FragmentNode.initializeComponent'e güvenilemez.
 	            const kids = this.childs;
 	            if (Array.isArray(kids) && kids.length) {
-	                for (const kid of kids) {
-	                    if (kid)
-	                        this.controls.add(kid);
+	                if (derivedCtor?._placesChilds !== true) {
+	                    for (const kid of kids) {
+	                        if (kid)
+	                            this.controls.add(kid);
+	                    }
 	                }
 	            }
 	        }
@@ -7281,6 +7509,7 @@
 	    if (!(target instanceof ComponentBase))
 	        return target;
 	    applyRefs(target, refs.concat(extractRefs(props)));
+	    disposeUnplacedChilds(target, props.childs);
 	    // Fonksiyon bileşeni etiketindeki ortak öznitelikler (class/id/aria-*…) döndürülen köke düşer.
 	    // Kök `<div {...props}/>` ise aynı değerler zaten uygulanmıştır; ikinci kez uygulanmaz.
 	    applyFallthroughProps(props, target);
@@ -7291,8 +7520,7 @@
 	    const runover = props.runover;
 	    if (!runover || typeof runover !== 'object')
 	        return target;
-	    const handlers = target._base?._onConfigHandlers;
-	    const configuredBefore = Array.isArray(handlers) ? handlers.length : 0;
+	    const configuredBefore = handlerCount(target, '_onConfigHandlers');
 	    const initializingBefore = handlerCount(target, '_onInitializingHandlers');
 	    const initializedBefore = handlerCount(target, '_onInitializedHandlers');
 	    ParseProps(runover, target);
@@ -7306,12 +7534,9 @@
 	        if (typeof pre === 'function') {
 	            safeCallSilent(() => pre(target), 'motifComponent.preconfig');
 	        }
-	        const after = target._base?._onConfigHandlers;
-	        if (Array.isArray(after)) {
-	            for (let i = configuredBefore; i < after.length; i++) {
-	                const fn = after[i];
-	                callReported(() => fn(target, { cancel: false }), 'MJX122', 'onConfig');
-	            }
+	        for (let i = configuredBefore; i < handlerCount(target, '_onConfigHandlers'); i++) {
+	            const fn = hookList(target, '_onConfigHandlers')[i];
+	            callReported(() => fn(target, { cancel: false }), 'MJX122', 'onConfig');
 	        }
 	    }
 	    return target;
@@ -7324,18 +7549,18 @@
 	    }
 	    return target;
 	}
+	function hookList(target, listName) {
+	    const slot = target._base?.[listName];
+	    return !slot ? [] : typeof slot === 'function' ? [slot] : slot;
+	}
 	function handlerCount(target, listName) {
-	    const list = target._base?.[listName];
-	    return Array.isArray(list) ? list.length : 0;
+	    return hookList(target, listName).length;
 	}
 	function callAddedHandlers(target, listName, from, hook) {
-	    const list = target._base?.[listName];
-	    if (!Array.isArray(list))
-	        return;
-	    for (let i = from; i < list.length; i++) {
+	    for (let i = from; i < handlerCount(target, listName); i++) {
 	        if (target.isDisposed)
 	            return;
-	        const fn = list[i];
+	        const fn = hookList(target, listName)[i];
 	        callReported(() => fn(target, { cancel: false }), 'MJX122', hook);
 	    }
 	}
@@ -7358,6 +7583,11 @@
 	function motifComponent(element, props) {
 	    // Etiket adı: element yaratımı (HTML/SVG) ve spread prop uygulaması Component ctor'ının string parametresinde
 	    if (typeof element === "string") {
+	        if (typeof props === "function") {
+	            const compiled = new Component(element);
+	            compiled._init = props;
+	            return compiled;
+	        }
 	        if (element === "text" && props && props.__childExpr) {
 	            const resolved = resolveChildExpression(props.__childExpr);
 	            if (resolved !== undefined)
@@ -7419,7 +7649,9 @@
 	    return resolved;
 	}
 	function materializeOptionsObject(spec, props) {
-	    const result = motifComponent(spec.el, props);
+	    const result = typeof spec.el === 'string'
+	        ? constructComponentRoot(() => motifComponent(spec.el, props))
+	        : motifComponent(spec.el, props);
 	    Object.getOwnPropertyNames(spec).forEach(key => {
 	        if (key !== 'el' && key !== 'ctor') {
 	            result[key] = spec[key];
@@ -7455,7 +7687,7 @@
 	            }
 	        }
 	        safeCallSilent(() => {
-	            const nodes = this.motif.options?.props?.nodes;
+	            const nodes = this.props?.nodes;
 	            if (Array.isArray(nodes) && nodes.length) {
 	                for (const n of nodes) {
 	                    if (n)
@@ -7617,11 +7849,10 @@
 
 	// import { dom } from "../browser";
 	class ControlCollection {
-	    owner;
 	    constructor(owner) {
 	        this.owner = owner;
+	        this.items = [];
 	    }
-	    items = [];
 	    add() {
 	        const count = arguments.length;
 	        if (count === 0)
@@ -7701,7 +7932,7 @@
 	        this.items.splice(index, 1);
 	        if (control.isDisposed)
 	            return Promise.resolve();
-	        control._base && (control._base._leaveContainer = this.owner);
+	        control._leaveContainer = this.owner;
 	        control.parent = null;
 	        return runLeaveThenDetach(control, () => { if (this.onRemove)
 	            this.onRemove(control); });
@@ -7731,7 +7962,7 @@
 	        if (index === -1)
 	            return;
 	        this.items.splice(index, 1);
-	        control._base && (control._base._leaveContainer = this.owner);
+	        control._leaveContainer = this.owner;
 	        control.parent = null;
 	    }
 	    async clearAsync() {
@@ -7756,9 +7987,6 @@
 	    map(callbackfn) {
 	        return this.items.map(callbackfn);
 	    }
-	    onAdd;
-	    onRemove;
-	    onAddBeforeBuild;
 	    move(control, before) {
 	        if (!control || control.isDisposed)
 	            return;
@@ -7786,14 +8014,29 @@
 	            const insertAt = newBeforeIndex >= 0 ? newBeforeIndex : this.items.length;
 	            this.items.splice(insertAt, 0, control);
 	        }
-	        if (control.isWait) {
-	            return;
-	        }
 	        const container = findAppendableElement(this.owner);
-	        if (!container)
+	        if (!container || !domAnchor(control, container))
 	            return;
-	        const referenceNode = before ? before.element : computeAppendReference(this.owner);
-	        moveComponentDomRange(control, container, referenceNode);
+	        const at = before ? this.items.indexOf(before) : -1;
+	        moveComponentDomRange(control, container, at >= 0 ? anchorFrom(this.owner, this.items, at, container) : computeAppendReference(this.owner));
+	    }
+	    _reorder(order, stable) {
+	        const container = findAppendableElement(this.owner);
+	        if (container) {
+	            let ref = computeAppendReference(this.owner);
+	            for (let i = order.length - 1; i >= 0; i--) {
+	                const control = order[i];
+	                const node = domAnchor(control, container);
+	                if (!node)
+	                    continue;
+	                if (!stable.has(i))
+	                    moveComponentDomRange(control, container, ref);
+	                ref = node;
+	            }
+	        }
+	        const items = this.items;
+	        for (let i = 0; i < order.length; i++)
+	            items[i] = order[i];
 	    }
 	    moveToIndex(control, index) {
 	        if (!control || control.isDisposed)
@@ -7830,12 +8073,20 @@
 	    }
 	    return null;
 	}
+	function anchorFrom(owner, items, start, container) {
+	    for (let i = start; i < items.length; i++) {
+	        const anchor = domAnchor(items[i], container);
+	        if (anchor)
+	            return anchor;
+	    }
+	    return computeAppendReference(owner);
+	}
 	/** Bir component'in kök DOM aralığını (tek element veya fragment aralığı) referenceNode öncesine taşır. */
 	function moveComponentDomRange(control, container, referenceNode) {
-	    const node = control.element;
+	    const node = domAnchor(control, container);
 	    if (!node)
 	        return;
-	    if (node.nodeType !== Node.COMMENT_NODE) {
+	    if (node.nodeType !== Node.COMMENT_NODE || node !== control.element) {
 	        try {
 	            container.insertBefore(node, referenceNode);
 	        }
@@ -7918,9 +8169,7 @@
 	    if (!node)
 	        return;
 	    const opts = control.motif.options;
-	    if (node.nodeType === Node.COMMENT_NODE) {
-	        if (!node.parentNode)
-	            return;
+	    if (node.nodeType === Node.COMMENT_NODE && node.parentNode) {
 	        const close = opts?.closeFragment || null;
 	        const cache = opts.cache ?? (opts.cache = dom.createDocumentFragment());
 	        let current = node;
@@ -8393,13 +8642,12 @@
 	}
 
 	class Frame extends Component {
-	    current = null;
-	    _latestNavigateId = 0;
-	    _navLock = Promise.resolve();
-	    _navAbort;
-	    isBusy = false;
 	    constructor(props) {
 	        super(dom.createComment(''), props);
+	        this.current = null;
+	        this._latestNavigateId = 0;
+	        this._navLock = Promise.resolve();
+	        this.isBusy = false;
 	        if (props && props.childs && Array.isArray(props.childs) && props.childs.length > 0) {
 	            this.controls.add(props.childs);
 	        }
@@ -8414,7 +8662,6 @@
 	    async _clear() {
 	        await disposeNavigationTarget(this.current);
 	    }
-	    previouspage;
 	    async navigate(page, keepOldControl = false) {
 	        await navigateHost(this, page, keepOldControl);
 	    }
@@ -8508,7 +8755,7 @@
 	const SLOT_REGISTERED_EVENT = Symbol('slotRegistered');
 	const SLOT_UNREGISTERED_EVENT = Symbol('slotUnregistered');
 	class TransportRegistry {
-	    static slots = new Map();
+	    static { this.slots = new Map(); }
 	    static registerSlot(name, slot) {
 	        this.slots.set(name, slot);
 	        Application.main.fire(SLOT_REGISTERED_EVENT, { name, slot });
@@ -8525,7 +8772,6 @@
 	}
 
 	class Transport extends Component {
-	    mode;
 	    constructor(props) {
 	        super(props);
 	        this.mode = props.mode || 'replace';
@@ -8613,28 +8859,34 @@
 	}
 
 	class TransportTo extends Component {
-	    _onAddRef;
-	    _onRemoveRef;
-	    _slotRegisteredListener;
-	    _slotUnregisteredListener;
-	    _transported = [];
-	    _countedLive = false;
 	    constructor(props) {
 	        super('div', props);
+	        this._transported = [];
+	        this._countedLive = false;
+	        this._handleSlotChange = (eventArgs) => {
+	            if (eventArgs.name === this.props.name) {
+	                const slot = eventArgs.slot;
+	                if (slot.mode !== 'merge') {
+	                    slot.clearSlot?.();
+	                }
+	                const all = [...(this.childs || []), ...this.controls.items];
+	                Transporter.transportMany(all, slot);
+	                this._rememberTransported(all);
+	            }
+	        };
+	        this._clearChildrenFromSlot = (slot) => {
+	            (this.childs || []).forEach(child => {
+	                slot.controls.remove(child);
+	                child.dispose();
+	            });
+	            (this.controls.items || []).forEach(child => {
+	                slot.controls.remove(child);
+	                child.dispose();
+	            });
+	        };
 	        contentBlocks.live++;
 	        this._countedLive = true;
 	    }
-	    _handleSlotChange = (eventArgs) => {
-	        if (eventArgs.name === this.props.name) {
-	            const slot = eventArgs.slot;
-	            if (slot.mode !== 'merge') {
-	                slot.clearSlot?.();
-	            }
-	            const all = [...(this.childs || []), ...this.controls.items];
-	            Transporter.transportMany(all, slot);
-	            this._rememberTransported(all);
-	        }
-	    };
 	    _rememberTransported(children) {
 	        const kept = this._transported.filter(c => !c.isDisposed);
 	        for (const child of children) {
@@ -8643,16 +8895,6 @@
 	        }
 	        this._transported = kept;
 	    }
-	    _clearChildrenFromSlot = (slot) => {
-	        (this.childs || []).forEach(child => {
-	            slot.controls.remove(child);
-	            child.dispose();
-	        });
-	        (this.controls.items || []).forEach(child => {
-	            slot.controls.remove(child);
-	            child.dispose();
-	        });
-	    };
 	    initializeComponent(sender) {
 	        let slot = TransportRegistry.getSlot(this.props.name);
 	        if (slot) {
@@ -8852,11 +9094,10 @@
 	];
 	const isLookupMiss = (outcome) => outcome === false || outcome === -1;
 	class ArrayMethods {
-	    engine;
 	    constructor(engine) {
 	        this.engine = engine;
+	        this.get = this.createArrayMethods();
 	    }
-	    get = this.createArrayMethods();
 	    createArrayMethods() {
 	        const table = {};
 	        for (const [name, kind] of PATCHED_ARRAY_METHODS) {
@@ -9048,7 +9289,6 @@
 	const AllreactiveMap = new WeakMap();
 	function armgetter() { return AllreactiveMap; }
 	class ReactiveEngine {
-	    _gci;
 	    startGc(_intervalMs = 10000) { }
 	    stopGc() { if (this._gci) {
 	        try {
@@ -9058,31 +9298,30 @@
 	        this._gci = undefined;
 	    } }
 	    constructor() {
+	        this.DisposeMapper = new LinkedList();
+	        this.arrayTriggerCache = new Map();
+	        this.ReactiveMap = () => armgetter();
+	        this.isReadonly = false;
+	        this.superficial = false;
+	        this.arrayMethods = new ArrayMethods(this);
+	        this.arrayHandler = {
+	            get: createGetter(this),
+	            set: createSetter(this),
+	            has: createHas(),
+	            deleteProperty: createDelete(),
+	            ownKeys: createOwn()
+	        };
+	        this.deepHandler = {
+	            get: createGetter(this),
+	            set: createSetter(this),
+	            has: createHas(),
+	            deleteProperty: createDelete(),
+	            ownKeys: createOwn()
+	        };
+	        this.collectionHandler = createCollectionHandler(this);
 	        ReactiveEngineMapper.add(this);
 	        this.startGc();
 	    }
-	    DisposeMapper = new LinkedList();
-	    arrayTriggerCache = new Map();
-	    ReactiveMap = () => armgetter();
-	    activeCallback;
-	    isReadonly = false;
-	    superficial = false;
-	    arrayMethods = new ArrayMethods(this);
-	    arrayHandler = {
-	        get: createGetter(this),
-	        set: createSetter(this),
-	        has: createHas(),
-	        deleteProperty: createDelete(),
-	        ownKeys: createOwn()
-	    };
-	    deepHandler = {
-	        get: createGetter(this),
-	        set: createSetter(this),
-	        has: createHas(),
-	        deleteProperty: createDelete(),
-	        ownKeys: createOwn()
-	    };
-	    collectionHandler = createCollectionHandler(this);
 	    reactive(model) {
 	        if (!isObject(model)) {
 	            model = { value: model };
@@ -9145,7 +9384,6 @@
 	    ArrayTrigger(target, key, ...args) {
 	        this.trigger(target, key, args);
 	    }
-	    onValueChanged;
 	    toRaw(item) {
 	        return JSON.parse(JSON.stringify(this.deepClone(item)));
 	    }
@@ -9320,19 +9558,35 @@
 	}
 
 	class Virtualization extends Component {
-	    _state;
-	    _virtualContent;
-	    _topSpacer;
-	    _bottomSpacer;
-	    _cache = new Map();
-	    _view = [];
-	    _occurrence = [];
-	    _occurrenceKeys = new WeakMap();
-	    _isLoadingMore = false;
-	    _emptyRendered = false;
-	    _renderPending = false;
 	    constructor(props) {
 	        super('div', props);
+	        this._cache = new Map();
+	        this._view = [];
+	        this._occurrence = [];
+	        this._occurrenceKeys = new WeakMap();
+	        this._isLoadingMore = false;
+	        this._emptyRendered = false;
+	        this._renderPending = false;
+	        this.contentWrapper = new Component();
+	        this._initialLoadStarted = false;
+	        this._offsets = null;
+	        this._observedHeight = -1;
+	        this._loadSeq = 0;
+	        this._reloadScheduled = false;
+	        this._reloadTimes = [];
+	        this._handleScroll = (_sender, _event) => {
+	            this.renderViewport();
+	            if (this.props.autoLoad === false)
+	                return;
+	            if (!this._state.hasMore || this._isLoadingMore || !this._state.isInitialized)
+	                return;
+	            const el = this.wrapper.element;
+	            const fixed = this._fixedHeight();
+	            const loadedBottom = fixed !== null ? this._state.data.length * fixed : this._offsetOf(this._view.length);
+	            const distanceToLoaded = loadedBottom - (el.scrollTop + el.clientHeight);
+	            if (distanceToLoaded < (this.props.autoLoadThreshold ?? 100))
+	                void this._loadMore();
+	        };
 	        if (props.className)
 	            this.class.add(props.className);
 	        if (props.style)
@@ -9354,8 +9608,6 @@
 	        this.renderViewport = this.renderViewport.bind(this);
 	        this._makeView();
 	    }
-	    contentWrapper = new Component();
-	    wrapper;
 	    _makeView() {
 	        this._topSpacer = new Component('div');
 	        this._topSpacer.element.style.cssText = 'height: 0px;';
@@ -9384,7 +9636,6 @@
 	            this.motif.on('scroll', this._handleScroll);
 	        }
 	    }
-	    _initialLoadStarted = false;
 	    onBuilding() {
 	        if (this.props.mainTemplate || this._initialLoadStarted)
 	            return;
@@ -9401,10 +9652,6 @@
 	        this._stopDataWatch();
 	        this._clearContent();
 	    }
-	    _offsets = null;
-	    _resizeObserver;
-	    _observed;
-	    _observedHeight = -1;
 	    _fixedHeight() {
 	        const h = this.props.itemHeight;
 	        return typeof h === 'function' ? null : h;
@@ -9486,10 +9733,6 @@
 	        this._resizeObserver = undefined;
 	        this._observed = undefined;
 	    }
-	    _loadSeq = 0;
-	    _dataWatchStop;
-	    _reloadScheduled = false;
-	    _reloadTimes = [];
 	    _stopDataWatch() {
 	        this._dataWatchStop?.();
 	        this._dataWatchStop = undefined;
@@ -9588,19 +9831,6 @@
 	            this._renderErrorState(error);
 	        }
 	    }
-	    _handleScroll = (_sender, _event) => {
-	        this.renderViewport();
-	        if (this.props.autoLoad === false)
-	            return;
-	        if (!this._state.hasMore || this._isLoadingMore || !this._state.isInitialized)
-	            return;
-	        const el = this.wrapper.element;
-	        const fixed = this._fixedHeight();
-	        const loadedBottom = fixed !== null ? this._state.data.length * fixed : this._offsetOf(this._view.length);
-	        const distanceToLoaded = loadedBottom - (el.scrollTop + el.clientHeight);
-	        if (distanceToLoaded < (this.props.autoLoadThreshold ?? 100))
-	            void this._loadMore();
-	    };
 	    async _loadInitial() {
 	        const seq = ++this._loadSeq;
 	        this._state.isLoading = true;
@@ -9919,7 +10149,9 @@
 	    }
 	}
 	class ServiceCollection {
-	    descriptors = new Map();
+	    constructor() {
+	        this.descriptors = new Map();
+	    }
 	    reset() {
 	        this.descriptors.clear();
 	    }
@@ -10176,7 +10408,7 @@
 	}
 
 	class RouterViewRegistry {
-	    static outlets = new Map();
+	    static { this.outlets = new Map(); }
 	    static register(name, scopeId, instance) {
 	        if (!this.outlets.has(name))
 	            this.outlets.set(name, new Map());
@@ -10205,9 +10437,12 @@
 	class RouterView extends Component {
 	    constructor(props) {
 	        super(props);
+	        this._navLock = Promise.resolve();
+	        this.disposingChilds = false;
+	        this.current = null;
+	        this._latestNavigateId = 0;
+	        this.isBusy = false;
 	    }
-	    _navLock = Promise.resolve();
-	    _navAbort;
 	    get __isRouterView() {
 	        return true;
 	    }
@@ -10219,11 +10454,6 @@
 	        }
 	        return ids.join('>');
 	    }
-	    disposingChilds = false;
-	    previouspage;
-	    current = null;
-	    _latestNavigateId = 0;
-	    isBusy = false;
 	    async navigate(page, keepOldControl = false) {
 	        await navigateHost(this, page, keepOldControl);
 	    }
@@ -10254,17 +10484,16 @@
 	const DEFAULT_SETTLE_MS = 1200;
 	const USER_INPUT = ['wheel', 'touchstart', 'keydown', 'mousedown'];
 	class ScrollMemory {
-	    options;
-	    viewport;
-	    positions = new Map();
-	    currentKey = '';
-	    visited = false;
-	    restoring = false;
-	    cancelFrame = null;
-	    disarmAbort = null;
-	    offs = [];
-	    locationAnchor = true;
 	    constructor(options = {}, viewport) {
+	        this.positions = new Map();
+	        this.currentKey = '';
+	        this.currentPath = null;
+	        this.visited = false;
+	        this.restoring = false;
+	        this.cancelFrame = null;
+	        this.disarmAbort = null;
+	        this.offs = [];
+	        this.locationAnchor = true;
 	        this.options = options;
 	        this.viewport = viewport ?? (options.container ? containerViewport(options.container) : windowViewport());
 	        this.load();
@@ -10289,11 +10518,13 @@
 	        this.remember(this.currentKey, this.viewport.scrollTop());
 	        this.persist();
 	    }
-	    arrived(uri) {
+	    arrived(uri, direction) {
 	        this.visited = true;
 	        const { path, hash } = splitUri(uri);
+	        const inPage = !!hash && path === this.currentPath && (direction === 'push' || direction === 'replace' || direction === 'traverse');
+	        this.currentPath = path;
 	        this.currentKey = this.keyOf(path);
-	        this.restore(this.currentKey, this.options.anchor === false ? '' : hash || (this.locationAnchor ? locationHash() : ''));
+	        this.restore(this.currentKey, this.options.anchor === false ? '' : hash || (this.locationAnchor ? locationHash() : ''), inPage);
 	    }
 	    saved(key) {
 	        return this.positions.get(this.keyOf(splitUri(key).path)) ?? 0;
@@ -10320,7 +10551,7 @@
 	            this.positions.delete(oldest.value);
 	        }
 	    }
-	    restore(key, anchor) {
+	    restore(key, anchor, follow) {
 	        this.cancelRestore();
 	        const target = this.positions.get(key) ?? 0;
 	        if (!anchor && target <= 0) {
@@ -10333,7 +10564,7 @@
 	        const startedAt = Date.now();
 	        const attempt = () => {
 	            this.cancelFrame = null;
-	            const done = anchor ? this.viewport.scrollToAnchor(anchor) : this.reached(target);
+	            const done = anchor ? this.viewport.scrollToAnchor(anchor, follow) : this.reached(target);
 	            if (done || Date.now() - startedAt >= settleMs) {
 	                this.cancelRestore();
 	                this.remember(key, this.viewport.scrollTop());
@@ -10425,16 +10656,30 @@
 	        },
 	        scrollTo: (top) => {
 	            try {
-	                window.scrollTo(0, top);
+	                window.scrollTo({ top, behavior: 'instant' });
+	            }
+	            catch {
+	                try {
+	                    window.scrollTo(0, top);
+	                }
+	                catch { }
 	            }
-	            catch { }
 	        },
-	        scrollToAnchor: (id) => {
+	        scrollToAnchor: (id, follow) => {
 	            try {
 	                const node = document.getElementById(id);
 	                if (!node)
 	                    return false;
-	                node.scrollIntoView();
+	                if (follow)
+	                    node.scrollIntoView();
+	                else {
+	                    try {
+	                        node.scrollIntoView({ behavior: 'instant' });
+	                    }
+	                    catch {
+	                        node.scrollIntoView();
+	                    }
+	                }
 	                return true;
 	            }
 	            catch {
@@ -10471,11 +10716,16 @@
 	                return;
 	            }
 	            try {
-	                el.scrollTop = top;
+	                el.scrollTo({ top, behavior: 'instant' });
+	            }
+	            catch {
+	                try {
+	                    el.scrollTop = top;
+	                }
+	                catch { }
 	            }
-	            catch { }
 	        },
-	        scrollToAnchor: (id) => fallback.scrollToAnchor(id),
+	        scrollToAnchor: (id, follow) => fallback.scrollToAnchor(id, follow),
 	    };
 	}
 	/** `/docs/x#bolum` → `{ path: '/docs/x', hash: 'bolum' }`. */
@@ -10646,24 +10896,18 @@
 	    }
 	}
 	class NavigationStack {
-	    retainAttached;
-	    depth;
-	    persist;
-	    animation;
-	    duration;
-	    swipe;
-	    session = null;
-	    entries = new Map();
-	    uris = new Map();
-	    loaded = null;
-	    current = null;
-	    currentTop = null;
-	    offs = [];
-	    gesture = null;
-	    gestureCommitted = false;
-	    awaitingGestureResult = false;
-	    disposed = false;
 	    constructor(options) {
+	        this.session = null;
+	        this.entries = new Map();
+	        this.uris = new Map();
+	        this.loaded = null;
+	        this.current = null;
+	        this.currentTop = null;
+	        this.offs = [];
+	        this.gesture = null;
+	        this.gestureCommitted = false;
+	        this.awaitingGestureResult = false;
+	        this.disposed = false;
 	        const o = options === true ? {} : options;
 	        this.retainAttached = o.retain === true;
 	        this.depth = Math.max(0, Math.floor(o.depth ?? 5));
@@ -11172,13 +11416,28 @@
 	}
 
 	class Scanner {
-	    source;
 	    constructor(source) {
 	        this.source = source;
+	        this.currentColumn = 0;
+	        this.tokens = [];
+	        this.parameters = {};
+	        this.codePointAt = String.prototype.codePointAt ?
+	            (s, i) => s.codePointAt(i) : function codePointAt(str, i) {
+	            const size = str.length;
+	            if (i < 0 || i >= size) {
+	                return undefined;
+	            }
+	            const first = str.charCodeAt(i);
+	            if (first >= 0xD800 && first <= 0xDBFF && size > i + 1) {
+	                const second = str.charCodeAt(i + 1);
+	                if (second >= 0xDC00 && second <= 0xDFFF) {
+	                    return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+	                }
+	            }
+	            return first;
+	        };
 	        this.tokens = [];
 	    }
-	    currentColumn = 0;
-	    tokens = [];
 	    addToken(token) {
 	        this.tokens.push(token);
 	    }
@@ -11406,7 +11665,6 @@
 	        pattern += '$';
 	        return new RegExp(pattern, "i");
 	    }
-	    parameters = {};
 	    exist(input, pageSearch) {
 	        const hashIdx = input.indexOf('#');
 	        const withoutHash = hashIdx >= 0 ? input.substring(0, hashIdx) : input;
@@ -11490,21 +11748,6 @@
 	        }
 	        return false;
 	    }
-	    codePointAt = String.prototype.codePointAt ?
-	        (s, i) => s.codePointAt(i) : function codePointAt(str, i) {
-	        const size = str.length;
-	        if (i < 0 || i >= size) {
-	            return undefined;
-	        }
-	        const first = str.charCodeAt(i);
-	        if (first >= 0xD800 && first <= 0xDBFF && size > i + 1) {
-	            const second = str.charCodeAt(i + 1);
-	            if (second >= 0xDC00 && second <= 0xDFFF) {
-	                return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
-	            }
-	        }
-	        return first;
-	    };
 	}
 
 	/** Bir fullPath'in statik (parametresiz) ve parametreli segment sayıları. */
@@ -11532,11 +11775,41 @@
 	    return b.fullPath.length - a.fullPath.length;
 	}
 	class RouteCollection {
-	    routes;
-	    records = [];
-	    routesMap = new Map();
 	    constructor(routes) {
 	        this.routes = routes;
+	        this.records = [];
+	        this.routesMap = new Map();
+	        this.walk = (chain, parentPath, node, viaAlias = false) => {
+	            const fullPath = this.joinPaths(parentPath, node.path);
+	            if (!viaAlias) {
+	                const existing = node.fullPath;
+	                if (existing == null || (typeof existing === 'string' && existing.trim() === '')) {
+	                    node.fullPath = fullPath;
+	                }
+	                if (node.name != null) {
+	                    this.routesMap.set(node.name, node);
+	                }
+	            }
+	            const nextChain = [...chain, node];
+	            const aliases = node.alias == null ? [] : (Array.isArray(node.alias) ? node.alias : [node.alias]);
+	            const variants = [
+	                { path: fullPath, isAlias: viaAlias },
+	                ...aliases.map(a => ({ path: this.joinPaths(parentPath, a), isAlias: true }))
+	            ];
+	            for (const variant of variants) {
+	                this.records.push({
+	                    fullPath: variant.path,
+	                    chain: nextChain,
+	                    leaf: node,
+	                    scanner: new Scanner(variant.path),
+	                    aliasOf: variant.isAlias ? (node.fullPath ?? null) : null
+	                });
+	                if (node.childs && node.childs.length) {
+	                    for (const child of node.childs)
+	                        this.walk(nextChain, variant.path, child, variant.isAlias);
+	                }
+	            }
+	        };
 	        this.build();
 	    }
 	    build() {
@@ -11546,37 +11819,6 @@
 	            this.walk([], "", r);
 	        this.records.sort(compareRouteRecords);
 	    }
-	    walk = (chain, parentPath, node, viaAlias = false) => {
-	        const fullPath = this.joinPaths(parentPath, node.path);
-	        if (!viaAlias) {
-	            const existing = node.fullPath;
-	            if (existing == null || (typeof existing === 'string' && existing.trim() === '')) {
-	                node.fullPath = fullPath;
-	            }
-	            if (node.name != null) {
-	                this.routesMap.set(node.name, node);
-	            }
-	        }
-	        const nextChain = [...chain, node];
-	        const aliases = node.alias == null ? [] : (Array.isArray(node.alias) ? node.alias : [node.alias]);
-	        const variants = [
-	            { path: fullPath, isAlias: viaAlias },
-	            ...aliases.map(a => ({ path: this.joinPaths(parentPath, a), isAlias: true }))
-	        ];
-	        for (const variant of variants) {
-	            this.records.push({
-	                fullPath: variant.path,
-	                chain: nextChain,
-	                leaf: node,
-	                scanner: new Scanner(variant.path),
-	                aliasOf: variant.isAlias ? (node.fullPath ?? null) : null
-	            });
-	            if (node.childs && node.childs.length) {
-	                for (const child of node.childs)
-	                    this.walk(nextChain, variant.path, child, variant.isAlias);
-	            }
-	        }
-	    };
 	    joinPaths(parent, child) {
 	        parent = parent || "";
 	        child = child || "";
@@ -11593,19 +11835,22 @@
 	}
 
 	class RoutingEngine {
-	    stack = null;
-	    _revealed = new Set();
-	    root;
-	    application;
-	    routingModule;
-	    _previousPath = null;
-	    _previousInstances = [];
+	    constructor() {
+	        this.stack = null;
+	        this._revealed = new Set();
+	        this._previousPath = null;
+	        this._previousInstances = [];
+	        this.controlCache = new Map();
+	        this._navVersion = 0;
+	        this._pendingActivate = new Set();
+	        this.pendingMount = new WeakMap();
+	        this.pendingListeners = new WeakMap();
+	    }
 	    register(mainApp, application, routingModule) {
 	        this.root = mainApp;
 	        this.application = application;
 	        this.routingModule = routingModule;
 	    }
-	    controlCache = new Map();
 	    async evict(route) {
 	        const targets = route ? [route] : Array.from(this.controlCache.keys());
 	        for (const r of targets) {
@@ -11667,8 +11912,6 @@
 	        }
 	        return result;
 	    }
-	    _navVersion = 0;
-	    _pendingActivate = new Set();
 	    async execute(path, nav, route) {
 	        route ??= {
 	            target: path,
@@ -12139,9 +12382,7 @@
 	    }
 	    async activator(container) {
 	    }
-	    pendingMount = new WeakMap();
-	    pendingListeners = new WeakMap();
-	    static OUTLET_WARN_MS = 3000;
+	    static { this.OUTLET_WARN_MS = 3000; }
 	    async mountChain(instances, chain, container, navVersion) {
 	        for (let index = 0; index < instances.length;) {
 	            if (navVersion !== this._navVersion)
@@ -12313,17 +12554,20 @@
 	const pathOf = (uri) => uri.split('#')[0].split('?')[0];
 	const newHistorySession = () => Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
 	class UrlRoutingModule {
-	    static MAX_REDIRECTS = 10;
-	    _routerOptions;
-	    routingEngine;
-	    routeCollection;
-	    routesMap = new Map();
-	    mainApp;
-	    application;
-	    _suppressBeforeEachOnce = false;
-	    _suppressMiddlewaresOnce = false;
-	    _scroll = null;
+	    static { this.MAX_REDIRECTS = 10; }
 	    constructor(options, application) {
+	        this.routesMap = new Map();
+	        this._suppressBeforeEachOnce = false;
+	        this._suppressMiddlewaresOnce = false;
+	        this._scroll = null;
+	        this._stack = null;
+	        this._windowNavListener = null;
+	        this._historyStamp = null;
+	        this._pendingTraversal = null;
+	        this._currentUri = '___startup___';
+	        this._previousRoute = null;
+	        this._fallbackRoutes = {};
+	        this._navHandler = null;
 	        this._routerOptions = options;
 	        this.routeCollection = new RouteCollection(options.RouteItems);
 	        this.routingEngine = new RoutingEngine();
@@ -12339,11 +12583,9 @@
 	            this.routingEngine.stack = this._stack;
 	        }
 	    }
-	    _stack = null;
 	    getHooks() {
 	        return this._routerOptions.hooks;
 	    }
-	    _windowNavListener = null;
 	    start(mainApp, shellUri) {
 	        this.mainApp = mainApp;
 	        this.routingEngine.register(this.mainApp, this.application, this);
@@ -12369,14 +12611,13 @@
 	                const h = w?.location?.hash || '';
 	                return h && h.startsWith('#') ? h.slice(1) || '/' : '/';
 	            }
-	            return (w?.location?.pathname || '/') + (w?.location?.search || '');
+	            return (w?.location?.pathname || '/') + (w?.location?.search || '') + (w?.location?.hash || '');
 	        }
 	        catch {
 	            return '/';
 	        }
 	    }
-	    static HISTORY_STAMP_KEY = '__motifHistory';
-	    _historyStamp = null;
+	    static { this.HISTORY_STAMP_KEY = '__motifHistory'; }
 	    _addressMode() {
 	        const w = window;
 	        return this._routerOptions.mode || (w?.location?.protocol === 'file:' ? 'hash' : 'history');
@@ -12472,7 +12713,6 @@
 	        this._stampCurrentEntry(stamp);
 	        this._historyStamp = stamp;
 	    }
-	    _pendingTraversal = null;
 	    async _onHistoryTraversal() {
 	        const shown = this._historyStamp;
 	        const arrived = this._readHistoryStamp();
@@ -12508,8 +12748,6 @@
 	        }
 	        catch { }
 	    }
-	    _currentUri = '___startup___';
-	    _previousRoute = null;
 	    get currentUri() {
 	        return this._currentUri;
 	    }
@@ -12644,7 +12882,7 @@
 	            }
 	            const snapshotOf = (result) => ({
 	                target: result,
-	                chain: result.chain.map(r => this.routingEngine.generatePathString(r.path, result.params) || ''),
+	                chain: this.chainOf(result),
 	                direction,
 	                state: entryState,
 	            });
@@ -12688,7 +12926,7 @@
 	                this._handleScrollBehavior(navOptions.scroll);
 	            }
 	            else {
-	                this._scroll?.arrived(this._uriWithHash(appliedPath, uri));
+	                this._scroll?.arrived(this._uriWithHash(appliedPath, uri), direction);
 	            }
 	            this.application.fire?.('motifjs-router-navigated', {
 	                uri: appliedPath,
@@ -12748,7 +12986,6 @@
 	        }
 	        await this.routingEngine.evict(item);
 	    }
-	    _fallbackRoutes = {};
 	    _getFallbackRoute(kind) {
 	        const existing = this._fallbackRoutes[kind];
 	        if (existing)
@@ -12821,7 +13058,7 @@
 	        }
 	        return best ? { chain: best.rec.chain, params: best.params } : null;
 	    }
-	    static _builtinNotFound = () => new Component('div', {
+	    static { this._builtinNotFound = () => new Component('div', {
 	        initializeComponent(sender) {
 	            sender.style({
 	                padding: '20px', fontFamily: 'Arial, sans-serif', display: 'flex', 'flex-direction': 'column', 'align-items': 'center'
@@ -12829,8 +13066,8 @@
 	            sender.element.appendChild($('h2', {}, ...['404 - Not Found']));
 	            sender.element.appendChild($('p', {}, ...['The requested page was not found.']));
 	        },
-	    });
-	    static _builtinError = () => new Component('div', {
+	    }); }
+	    static { this._builtinError = () => new Component('div', {
 	        initializeComponent(sender) {
 	            sender.style({
 	                padding: '20px', fontFamily: 'Arial, sans-serif', display: 'flex', 'flex-direction': 'column', 'align-items': 'center'
@@ -12838,7 +13075,7 @@
 	            sender.element.appendChild($('h2', {}, ...['Error']));
 	            sender.element.appendChild($('p', {}, ...['The requested page could not be loaded.']));
 	        },
-	    });
+	    }); }
 	    async navigateByName(name, params, options) {
 	        return await this.navigate(this.href(name, params), options);
 	    }
@@ -12870,6 +13107,9 @@
 	        }
 	        return { proceed, uri: urix };
 	    }
+	    chainOf(result) {
+	        return result.chain.map(r => this.routingEngine.generatePathString(r.path, result.params) || '');
+	    }
 	    resolve(uri) {
 	        const candidates = [];
 	        const pageSearch = this._pageSearch();
@@ -12991,7 +13231,6 @@
 	        }
 	        return true;
 	    }
-	    _navHandler = null;
 	    _installLinkInterceptor() {
 	        try {
 	            if (this._navHandler)
@@ -13067,8 +13306,14 @@
 	                return;
 	            }
 	            if (w?.history && typeof w.history.pushState === 'function') {
-	                const current = (w.location.pathname || '/') + (w.location.search || '');
-	                if (current !== uri) {
+	                const current = (w.location.pathname || '/') + (w.location.search || '') + (w.location.hash || '');
+	                let wanted = uri;
+	                try {
+	                    const url = new URL(uri, w.location.href);
+	                    wanted = url.pathname + url.search + url.hash;
+	                }
+	                catch { }
+	                if (current !== wanted) {
 	                    if (options.replace) {
 	                        const stamp = this._nextHistoryStamp(false);
 	                        w.history.replaceState(this._routerState(options.state, stamp), '', uri);
@@ -13190,9 +13435,11 @@
 	}
 
 	class RouterState {
-	    version = new Signal(0);
-	    _current = null;
-	    _constructing = null;
+	    constructor() {
+	        this.version = new Signal(0);
+	        this._current = null;
+	        this._constructing = null;
+	    }
 	    read() {
 	        this.version.value;
 	        return this._constructing ?? this._current;
@@ -13253,15 +13500,19 @@
 	            return module()?.routeInfos() ?? [];
 	        },
 	        navigate: async (uri, options) => {
-	            await required().navigate(uri, options);
+	            return await required().navigate(uri, options);
 	        },
 	        navigateByName: async (name, params, options) => {
-	            await required().navigateByName(name, params, options);
+	            return await required().navigateByName(name, params, options);
 	        },
 	        evict: async (route) => {
 	            await required().evict(route);
 	        },
-	        resolve: (uri) => required().resolve(uri),
+	        resolve: (uri) => {
+	            const current = required();
+	            const result = current.resolve(uri);
+	            return { chain: current.chainOf(result), result };
+	        },
 	        href: (name, params) => required().href(name, params),
 	    };
 	}
@@ -13269,8 +13520,8 @@
 	let _globalApplication = null;
 	let startedApplicationBuilder = false;
 	class ApplicationBuilder {
-	    services = new ServiceCollection();
 	    constructor() {
+	        this.services = new ServiceCollection();
 	        if ((_globalApplication && _globalApplication.state !== 'disposing') || startedApplicationBuilder) {
 	            throw new MotifError('MJX405', formatMotifMessage('MJX405'), { cause: _globalApplication });
 	        }
@@ -13297,28 +13548,31 @@
 	    }
 	}
 	class Application {
-	    provider;
 	    static get main() {
 	        return _globalApplication;
 	    }
 	    constructor(provider) {
 	        this.provider = provider;
+	        this._state = 'initializing';
+	        this._middlewares = [];
+	        this._beforeEachGuards = [];
+	        this._routerState = new RouterState();
+	        this.router = createRouter(this._routerState, () => this.urlRoutingModule);
+	        this.events = new Map();
+	        this._routerConfig = null;
+	        this._routerRoot = null;
+	        this._startedRouter = null;
+	        this._lifecycleOff = null;
+	        this._isDevelopment = false;
+	        this._enableErrorLogging = true;
 	    }
-	    static _disposingCount = 0;
-	    _state = 'initializing';
-	    _disposing;
+	    static { this._disposingCount = 0; }
 	    get state() {
 	        return this._state;
 	    }
-	    _middlewares = [];
-	    _beforeEachGuards = [];
-	    _routerState = new RouterState();
-	    router = createRouter(this._routerState, () => this.urlRoutingModule);
-	    events = new Map();
 	    static CreateBuilder() {
 	        return new ApplicationBuilder();
 	    }
-	    appShell;
 	    getAppShell() {
 	        return this.appShell;
 	    }
@@ -13462,10 +13716,6 @@
 	        }
 	        return true;
 	    }
-	    urlRoutingModule;
-	    _routerConfig = null;
-	    _routerRoot = null;
-	    _startedRouter = null;
 	    useRouter(options) {
 	        let routes;
 	        let mode;
@@ -13585,7 +13835,6 @@
 	            return true;
 	        }
 	    }
-	    _lifecycleOff = null;
 	    onLifecycle(handler) {
 	        this._installLifecycleListeners();
 	        return this.on('motifjs-app-lifecycle', handler);
@@ -13627,8 +13876,6 @@
 	            for (const off of offs)
 	                off();
 	    }
-	    _isDevelopment = false;
-	    _enableErrorLogging = true;
 	    get isDevelopmentModeEnabled() {
 	        return this._isDevelopment;
 	    }
@@ -13708,12 +13955,6 @@
 	class Policy {
 	}
 	class RetryPolicy extends Policy {
-	    retries;
-	    backoff;
-	    delayMs;
-	    jitter;
-	    shouldHandle;
-	    onRetry;
 	    constructor(options = {}) {
 	        super();
 	        this.retries = options.retries ?? 3;
@@ -13752,7 +13993,6 @@
 	    }
 	}
 	class TimeoutPolicy extends Policy {
-	    timeoutMs;
 	    constructor(opts) {
 	        super();
 	        this.timeoutMs = opts.timeoutMs;
@@ -13772,17 +14012,12 @@
 	    }
 	}
 	class CircuitBreakerPolicy extends Policy {
-	    failureThreshold;
-	    successThreshold;
-	    durationOfBreakMs;
-	    shouldHandle;
-	    onStateChange;
-	    state = 'CLOSED';
-	    failureCount = 0;
-	    successCount = 0;
-	    nextAttemptTime = 0;
 	    constructor(opts = {}) {
 	        super();
+	        this.state = 'CLOSED';
+	        this.failureCount = 0;
+	        this.successCount = 0;
+	        this.nextAttemptTime = 0;
 	        this.failureThreshold = opts.failureThreshold ?? 5;
 	        this.successThreshold = opts.successThreshold ?? 2;
 	        this.durationOfBreakMs = opts.durationOfBreakMs ?? 60000;
@@ -13835,12 +14070,10 @@
 	    }
 	}
 	class BulkheadPolicy extends Policy {
-	    maxConcurrent;
-	    maxQueue;
-	    active = 0;
-	    queue = [];
 	    constructor(opts = {}) {
 	        super();
+	        this.active = 0;
+	        this.queue = [];
 	        this.maxConcurrent = opts.maxConcurrent ?? 10;
 	        this.maxQueue = opts.maxQueue ?? 50;
 	    }
@@ -13873,11 +14106,6 @@
 	    }
 	}
 	class RateLimiterPolicy extends Policy {
-	    tokensPerInterval;
-	    intervalMs;
-	    capacity;
-	    tokens;
-	    lastRefill;
 	    constructor(opts = {}) {
 	        super();
 	        this.tokensPerInterval = opts.tokensPerInterval ?? 1;
@@ -13907,8 +14135,6 @@
 	    }
 	}
 	class FallbackPolicy extends Policy {
-	    fallback;
-	    shouldHandle;
 	    constructor(opts) {
 	        super();
 	        this.fallback = opts.fallback;
@@ -13926,7 +14152,6 @@
 	    }
 	}
 	class PolicyWrap extends Policy {
-	    policies;
 	    constructor(...policies) {
 	        super();
 	        this.policies = policies;
@@ -13951,34 +14176,36 @@
 	    return (ctx) => policy.execute(fn, ctx);
 	}
 	class Resilience {
+	    constructor() {
+	        this.resiliences = [];
+	        this.retry = (opts) => {
+	            this.resiliences.push(resilience.retry(opts));
+	            return this;
+	        };
+	        this.timeout = (opts) => {
+	            this.resiliences.push(resilience.timeout(opts));
+	            return this;
+	        };
+	        this.circuitBreaker = (opts) => {
+	            this.resiliences.push(resilience.circuitBreaker(opts));
+	            return this;
+	        };
+	        this.bulkhead = (opts) => {
+	            this.resiliences.push(resilience.bulkhead(opts));
+	            return this;
+	        };
+	        this.rateLimiter = (opts) => {
+	            this.resiliences.push(resilience.rateLimiter(opts));
+	            return this;
+	        };
+	        this.fallback = (opts) => {
+	            this.resiliences.push(resilience.fallback(opts));
+	            return this;
+	        };
+	    }
 	    static get create() {
 	        return new Resilience();
 	    }
-	    resiliences = [];
-	    retry = (opts) => {
-	        this.resiliences.push(resilience.retry(opts));
-	        return this;
-	    };
-	    timeout = (opts) => {
-	        this.resiliences.push(resilience.timeout(opts));
-	        return this;
-	    };
-	    circuitBreaker = (opts) => {
-	        this.resiliences.push(resilience.circuitBreaker(opts));
-	        return this;
-	    };
-	    bulkhead = (opts) => {
-	        this.resiliences.push(resilience.bulkhead(opts));
-	        return this;
-	    };
-	    rateLimiter = (opts) => {
-	        this.resiliences.push(resilience.rateLimiter(opts));
-	        return this;
-	    };
-	    fallback = (opts) => {
-	        this.resiliences.push(resilience.fallback(opts));
-	        return this;
-	    };
 	    async execute(action, ctx) {
 	        return resilience.wrap(...this.resiliences).execute(action, ctx);
 	    }