@motifx/core 1.0.1 → 1.2.0-rc.0

package/dist/index.umd.js

@@ -188,7 +188,7 @@
 	function isDevLike() {
 	    return state.enabled || globalThis.__MOTIF_DEV__ === true;
 	}
-	function detectEnabled() {
+	function isRequestedByFlag() {
 	    try {
 	        if (typeof window === 'undefined')
 	            return false;
@@ -199,25 +199,31 @@
 	            return true;
 	        if (globalThis.__MOTIF_DEVTOOLS_FLAG === true)
 	            return true;
-	        const qs = (w.location && w.location.search) || '';
-	        if (qs && /(?:[?&])devtools=1(?:&|$)/i.test(qs))
-	            return true;
 	        return false;
 	    }
 	    catch {
 	        return false;
 	    }
 	}
+	function exposeBus(visible) {
+	    try {
+	        if (visible)
+	            window.__motifDevBus = { on, emit, warn, getWarnings, isEnabled, setRoutes, getRoutes };
+	        else
+	            delete window.__motifDevBus;
+	    }
+	    catch { }
+	}
 	function ensureDevtoolsFlagInitialized() {
 	    if (state.enabled)
 	        return;
-	    state.enabled = detectEnabled();
-	    if (state.enabled) {
-	        try {
-	            window.__motifDevBus = { on, emit, warn, getWarnings, isEnabled, setRoutes, getRoutes };
-	        }
-	        catch { }
-	    }
+	    state.enabled = isRequestedByFlag();
+	    if (state.enabled)
+	        exposeBus(true);
+	}
+	function setDevtoolsEnabled(enabled) {
+	    state.enabled = enabled || isRequestedByFlag();
+	    exposeBus(state.enabled);
 	}
 	function isEnabled() { return state.enabled; }
 	function on(listener) {
@@ -280,6 +286,17 @@
 	    MJX121: (compiled, runtime) => `This code was compiled for compiler contract ${compiled}, but the @motifx/core runtime implements contract ${runtime}. Install matching versions of @motifx/compiler and @motifx/core, and rebuild packages that ship compiled JSX.`,
 	    MJX122: (hook) => `The component ${hook} hook threw.`,
 	    MJX123: (event) => `The '${event}' event handler threw.`,
+	    MJX124: (key) => `A spread object on a DOM tag cannot set ${key}; the key was ignored. Write it on the tag, or use x-html, for HTML you trust.`,
+	    MJX125: (key) => `A spread object on a DOM tag cannot set a javascript: URL on '${key}'; the value was ignored. Write the attribute on the tag if it is intended.`,
+	    MJX126: () => `Lazy: loading the component failed and no Fallbackview is set; the host was cleared.`,
+	    MJX127: (got) => got === 'module'
+	        ? `The loaded module has no default export. Export the component as default, or map it: () => import('./X').then(m => m.X).`
+	        : `The loaded value is not a component (got ${got}). Return a component class, a function component, an Options API factory or a component instance.`,
+	    MJX128: (cls, member, how) => how === 'method'
+	        ? `${cls} overrides ${member} without calling super.${member}; MotifJS relies on this ComponentBase member. Rename your member, or call super.${member} in the override.`
+	        : how === 'field'
+	            ? `${cls} defines '${member}' as an instance field, which hides the ComponentBase member MotifJS relies on. Rename your field.`
+	            : `${cls} replaces '${member}', which MotifJS created for the component (a class field or an assignment with that name). Rename your member.`,
 	    MJX201: () => `ListBinding: renderFn must return a component instance, a component class, or a factory function.`,
 	    MJX202: (key, index) => `ListBinding: duplicate key "${String(key)}" at index ${index}. Rows are matched by the item object, not by key, so rendering is not affected; keep keys unique so they identify items.`,
 	    MJX203: (max) => `An effect ran ${max} times in one flush and keeps triggering itself; it is skipped for the rest of this flush. It probably writes a value it reads (for example state.n++). Wrap the write in untracked(...).`,
@@ -490,20 +507,27 @@
 	    }
 	}
 
+	const Flags = {
+	    IS_REACTIVE: Symbol.for('motif.isReactive'),
+	    IS_READONLY: Symbol.for('motif.isReadonly'),
+	    IS_SUPERFICIAL: Symbol.for('motif.isSuperficial'),
+	    RAW: Symbol.for('motif.raw'),
+	    GET_SETUP: Symbol.for('motif.getSetup'),
+	};
 	const ITERATE_KEY = Symbol('');
 	let followTracking = true;
 	let arrayScope = { enabled: false, key: '' };
 	function getRaw(value) {
 	    let current = value;
-	    while (current && current["[__raw__]" /* Flags.RAW */]) {
-	        current = current["[__raw__]" /* Flags.RAW */];
+	    while (current && current[Flags.RAW]) {
+	        current = current[Flags.RAW];
 	    }
 	    return current;
 	}
 	function isReadonly(candidate) {
 	    if (candidate == null)
 	        return false;
-	    return Boolean(candidate["[__isReadonly__]" /* Flags.IS_READONLY */]);
+	    return Boolean(candidate[Flags.IS_READONLY]);
 	}
 	function hasOwn(target, key) {
 	    return Object.prototype.hasOwnProperty.call(target, key);
@@ -691,13 +715,28 @@
 	    }
 	    _setupBinding() {
 	        const update = () => {
-	            const items = this._toArray(this.itemsFn());
+	            const source = this._toArray(this.itemsFn());
+	            const rawSource = getRaw(source);
+	            const count = source.length;
+	            let items;
+	            if (rawSource === source) {
+	                items = source;
+	            }
+	            else {
+	                items = new Array(count);
+	                for (let i = 0; i < count; i++) {
+	                    if (i in rawSource)
+	                        items[i] = source[i];
+	                    else
+	                        void source[i];
+	                }
+	            }
 	            const prevItems = this.olditems;
 	            const prevComponents = this._rendered;
 	            if (this.olditems.length > 0) {
 	                const currentRaws = new Set();
-	                for (const it of items)
-	                    currentRaws.add(getRaw(it));
+	                for (let i = 0; i < count; i++)
+	                    currentRaws.add(getRaw(items[i]));
 	                for (const old of this.olditems) {
 	                    const raw = getRaw(old);
 	                    if (!currentRaws.has(raw)) {
@@ -814,8 +853,8 @@
 	            });
 	            this._syncContainer(newComponents);
 	            this._rendered = newComponents;
-	            this.olditems = items.slice();
-	            return items.length;
+	            this.olditems = items === source ? source.slice() : items;
+	            return count;
 	        };
 	        this._effectCleanup = effect(() => update());
 	    }
@@ -831,6 +870,34 @@
 	            }
 	            return;
 	        }
+	        if (newComponents.length >= items.length) {
+	            let appendOnly = true;
+	            for (let i = 0; i < items.length; i++) {
+	                if (newComponents[i] !== items[i]) {
+	                    appendOnly = false;
+	                    break;
+	                }
+	            }
+	            if (appendOnly && newComponents.length > items.length) {
+	                const existing = new Set(items);
+	                for (let i = items.length; i < newComponents.length; i++) {
+	                    if (existing.has(newComponents[i])) {
+	                        appendOnly = false;
+	                        break;
+	                    }
+	                    existing.add(newComponents[i]);
+	                }
+	            }
+	            if (appendOnly) {
+	                for (let i = items.length; i < newComponents.length; i++) {
+	                    try {
+	                        controls.add(newComponents[i]);
+	                    }
+	                    catch { }
+	                }
+	                return;
+	            }
+	        }
 	        const oldIndex = new Map();
 	        items.forEach((c, i) => oldIndex.set(c, i));
 	        const sources = newComponents.map(c => {
@@ -947,10 +1014,11 @@
 	    }
 	    ;
 	    remove(item) {
+	        const index = this.__list.indexOf(item);
+	        if (index === -1)
+	            return [];
 	        this._map.delete(item);
-	        this.__list.splice(this.__list.indexOf(item), 1);
-	        item = null;
-	        return [];
+	        return this.__list.splice(index, 1);
 	    }
 	    ;
 	    indexOf(item) {
@@ -977,7 +1045,7 @@
 	        this.__list?.forEach(callbackfn);
 	    }
 	    ReverseClone() {
-	        return this.__list.reverse();
+	        return this.__list.slice().reverse();
 	    }
 	    filter(callbackfn) {
 	        return this.__list.filter(callbackfn);
@@ -1092,8 +1160,7 @@
 	    }
 	    OnItemAdded;
 	    removeIndex(index) {
-	        var i = this.__values.removeIndex(index - 1);
-	        return i;
+	        return this.__values.removeIndex(index);
 	    }
 	    ;
 	    remove(Key) {
@@ -1763,27 +1830,67 @@
 	    }
 	}
 
+	const RAW_KEY = Flags.RAW;
+	function isPrototypeObject(o) {
+	    return Object.prototype.hasOwnProperty.call(o, 'constructor') && typeof o.constructor === 'function' && o.constructor.prototype === o;
+	}
+	function overridesBelow(instance, proto, name) {
+	    let p = Object.getPrototypeOf(instance);
+	    while (p && p !== proto) {
+	        if (Object.prototype.hasOwnProperty.call(p, name))
+	            return true;
+	        p = Object.getPrototypeOf(p);
+	    }
+	    return false;
+	}
+	function lazyBindMethods(proto, names) {
+	    for (const name of names) {
+	        let fn = proto[name];
+	        if (typeof fn !== 'function')
+	            continue;
+	        Object.defineProperty(proto, name, {
+	            configurable: true,
+	            enumerable: false,
+	            get() {
+	                if (this === proto || isPrototypeObject(this))
+	                    return fn;
+	                const target = this[RAW_KEY] ?? this;
+	                const bound = fn.bind(target);
+	                if (!overridesBelow(target, proto, name)) {
+	                    try {
+	                        Object.defineProperty(target, name, { value: bound, writable: true, configurable: true, enumerable: true });
+	                    }
+	                    catch { }
+	                }
+	                return bound;
+	            },
+	            set(value) {
+	                if (this === proto && typeof value === 'function') {
+	                    fn = value;
+	                    return;
+	                }
+	                Object.defineProperty(this, name, { value, writable: true, configurable: true, enumerable: true });
+	            },
+	        });
+	    }
+	}
+
+	function resolveValue(value) {
+	    return typeof value === 'function' ? resolveValue(value()) : value;
+	}
+	function isWritablePathKey(target, key) {
+	    if (key === '__proto__')
+	        return false;
+	    if (key === 'constructor' || key === 'prototype')
+	        return Object.prototype.hasOwnProperty.call(target, key);
+	    return true;
+	}
 	class BindingCollection {
 	    _items = [];
 	    _component;
 	    _branchScope = null;
 	    constructor(component) {
 	        this._component = component;
-	        this.add = this.add.bind(this);
-	        this.remove = this.remove.bind(this);
-	        this.clear = this.clear.bind(this);
-	        this.activateAll = this.activateAll.bind(this);
-	        this.deactivateAll = this.deactivateAll.bind(this);
-	        this.reActivateAll = this.reActivateAll.bind(this);
-	        this.when = this.when.bind(this);
-	        this.text = this.text.bind(this);
-	        this.value = this.value.bind(this);
-	        this.list = this.list.bind(this);
-	        this.loop = this.loop.bind(this);
-	        this.method = this.method.bind(this);
-	        this.watch = this.watch.bind(this);
-	        this.display = this.display.bind(this);
-	        this.wait = this.wait.bind(this);
 	    }
 	    _own(stop) {
 	        if (this._branchScope) {
@@ -1854,7 +1961,7 @@
 	        return binding;
 	    }
 	    display(predicate) {
-	        const binding = new Binding(this._component, 'isWait', () => !predicate());
+	        const binding = new Binding(this._component, 'isWait', () => !resolveValue(predicate()));
 	        this._items.push(binding);
 	        if (this._component.isBuilt) {
 	            binding.activate();
@@ -1980,12 +2087,12 @@
 	            stopInner();
 	        });
 	    }
-	    ternaryCall = (condFn, onTrue, onFalse) => {
+	    ternaryCall(condFn, onTrue, onFalse) {
 	        this._ternarySchedule(condFn, onTrue, onFalse, (run) => queueMicrotask(run));
-	    };
-	    _ternaryCallTop = (condFn, onTrue, onFalse) => {
+	    }
+	    _ternaryCallTop(condFn, onTrue, onFalse) {
 	        this._ternarySchedule(condFn, onTrue, onFalse, (run) => setTimeout(run, 0));
-	    };
+	    }
 	    watch(cb) {
 	        const ef = effect(() => {
 	            cb();
@@ -2072,11 +2179,17 @@
 	                    if (member && source != null) {
 	                        const path = member.split('.');
 	                        let target = source;
-	                        for (let i = 0; i < path.length - 1 && target != null; i++) {
-	                            target = target[path[i]];
+	                        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];
+	                            }
 	                        }
-	                        if (target != null)
-	                            target[path[path.length - 1]] = value;
 	                    }
 	                    else if (source != null && typeof source === 'object' && 'value' in source) {
 	                        source.value = value;
@@ -2145,6 +2258,11 @@
 	        return null;
 	    }
 	}
+	lazyBindMethods(BindingCollection.prototype, [
+	    'add', 'remove', 'clear', 'activateAll', 'deactivateAll', 'reActivateAll',
+	    'when', 'text', 'value', 'list', 'loop', 'method', 'watch', 'display', 'wait',
+	    'ternaryCall', '_ternaryCallTop'
+	]);
 
 	class Emitter {
 	    _subscriptions = [];
@@ -2235,18 +2353,14 @@
 
 	class ComponentEmiter {
 	    component;
-	    _emitters = new Map();
-	    _sourceDisposables = new Map();
-	    _listenerDisposables = new Map();
+	    _emitters;
+	    _sourceDisposables;
+	    _listenerDisposables;
 	    constructor(component) {
 	        this.component = component;
-	        this.fire = this.fire.bind(this);
-	        this.on = this.on.bind(this);
-	        this.off = this.off.bind(this);
-	        this.createEvent = this.createEvent.bind(this);
-	        this.getOrCreateEmitter = this.getOrCreateEmitter.bind(this);
-	        this.addSource = this.addSource.bind(this);
-	        this.clear = this.clear.bind(this);
+	    }
+	    hasListeners(eventName) {
+	        return this._emitters !== undefined && this._emitters.has(eventName);
 	    }
 	    fire(eventName, args) {
 	        try {
@@ -2266,7 +2380,7 @@
 	    }
 	    off(event, cb) {
 	        const lower = String(event).toLowerCase();
-	        const map = this._listenerDisposables.get(lower);
+	        const map = this._listenerDisposables?.get(lower);
 	        if (!map)
 	            return this;
 	        const list = map.get(cb);
@@ -2278,10 +2392,11 @@
 	        return this;
 	    }
 	    getOrCreateEmitter(name) {
-	        let e = this._emitters.get(name);
+	        const emitters = this._emitters ??= new Map();
+	        let e = emitters.get(name);
 	        if (!e) {
-	            this._emitters.set(name, new Emitter());
-	            e = this._emitters.get(name);
+	            e = new Emitter();
+	            emitters.set(name, e);
 	        }
 	        return e;
 	    }
@@ -2299,10 +2414,11 @@
 	        };
 	        const emitter = this.getOrCreateEmitter(lowerFull);
 	        const disp = emitter.event((e) => invoke(e));
-	        let map = this._listenerDisposables.get(lowerFull);
+	        const listeners = this._listenerDisposables ??= new Map();
+	        let map = listeners.get(lowerFull);
 	        if (!map) {
 	            map = new Map();
-	            this._listenerDisposables.set(lowerFull, map);
+	            listeners.set(lowerFull, map);
 	        }
 	        const list = map.get(cb);
 	        if (list) {
@@ -2328,10 +2444,11 @@
 	        }
 	        catch { }
 	        if (disp) {
-	            let set = this._sourceDisposables.get(lower);
+	            const sources = this._sourceDisposables ??= new Map();
+	            let set = sources.get(lower);
 	            if (!set) {
 	                set = new Set();
-	                this._sourceDisposables.set(lower, set);
+	                sources.set(lower, set);
 	            }
 	            set.add(disp);
 	            this.component.motif.register(disposableCore.toDisposable(() => {
@@ -2350,21 +2467,21 @@
 	    clear(event) {
 	        if (event) {
 	            const lower = event.toLowerCase();
-	            const srcs = this._sourceDisposables.get(lower);
+	            const srcs = this._sourceDisposables?.get(lower);
 	            srcs?.forEach(d => { try {
 	                d.dispose();
 	            }
 	            catch { } });
-	            this._sourceDisposables.delete(lower);
-	            const agg = this._emitters.get(lower);
+	            this._sourceDisposables?.delete(lower);
+	            const agg = this._emitters?.get(lower);
 	            try {
 	                agg?.dispose();
 	            }
 	            catch { }
-	            this._emitters.delete(lower);
-	            this._listenerDisposables.delete(lower);
+	            this._emitters?.delete(lower);
+	            this._listenerDisposables?.delete(lower);
 	        }
-	        else {
+	        else if (this._emitters) {
 	            for (const key of Array.from(this._emitters.keys())) {
 	                this.clear(key);
 	            }
@@ -2372,6 +2489,7 @@
 	        return this;
 	    }
 	}
+	lazyBindMethods(ComponentEmiter.prototype, ['fire', 'on', 'off', 'createEvent', 'getOrCreateEmitter', 'addSource', 'clear']);
 
 	const METHOD_ATTRS = new Set([
 	    'focus', 'blur', 'click', 'pause', 'submit', 'reset',
@@ -2389,11 +2507,13 @@
 	const PROPERTY_FIRST = new Set(['checked', 'selected', 'muted', 'indeterminate', 'srcObject']);
 	class controlAttribute {
 	    _parent;
-	    _attrMap = new Map();
-	    _watchers = new Map();
+	    _attrMapStore;
+	    _watchersStore;
 	    constructor(parent) {
 	        this._parent = parent;
 	    }
+	    get _attrMap() { return this._attrMapStore ??= new Map(); }
+	    get _watchers() { return this._watchersStore ??= new Map(); }
 	    /** @deprecated Tek kaynak `_attrMap`; geriye dönük okuma için türetilmiş görünüm. */
 	    get attributes() {
 	        return Array.from(this._attrMap.entries(), ([name, value]) => ({ name: String(name), value }));
@@ -2924,10 +3044,13 @@
 	    constructor(parent) {
 	        this._parent = parent;
 	    }
-	    _counts = new Map();
-	    _staticSet = new Set();
-	    _watchers = new Map();
+	    _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(); }
 	    add(...values) {
 	        for (const value of values) {
 	            if (typeof value === 'function') {
@@ -4214,6 +4337,92 @@
 	    }
 	}
 
+	const contentBlocks = { live: 0 };
+
+	const OPTIONS_OWNER = Symbol('motif.optionsOwner');
+	const TRANSITION_SLOT = Symbol('motif.transition');
+
+	const transitionSettings = { mode: 'concurrent' };
+	const noop = () => { };
+	function createTracker() {
+	    const running = new WeakMap();
+	    function track(node, resolve, via) {
+	        const host = node?.parentNode ?? via?.parentNode;
+	        if (!host)
+	            return { done: resolve, release: noop };
+	        let set = running.get(host);
+	        if (!set)
+	            running.set(host, (set = new Set()));
+	        let finish = noop;
+	        const entry = { node: node, via: via ?? null, done: new Promise(r => { finish = r; }) };
+	        set.add(entry);
+	        let settled = false;
+	        const release = () => {
+	            if (settled)
+	                return;
+	            settled = true;
+	            set.delete(entry);
+	            finish();
+	        };
+	        return {
+	            done: () => {
+	                const first = !settled;
+	                release();
+	                if (first && resolve)
+	                    resolve();
+	            },
+	            release,
+	            finished: entry.done,
+	        };
+	    }
+	    function pending(host, except) {
+	        if (!host)
+	            return null;
+	        const set = running.get(host);
+	        if (!set || set.size === 0)
+	            return null;
+	        let waits = null;
+	        for (const entry of set) {
+	            if (entry.node === except)
+	                continue;
+	            if (entry.node.parentNode !== host && entry.via?.parentNode !== host) {
+	                set.delete(entry);
+	                continue;
+	            }
+	            (waits ??= []).push(entry.done);
+	        }
+	        return waits ? Promise.all(waits).then(noop) : null;
+	    }
+	    return { track, pending };
+	}
+	const leaves = createTracker();
+	const enters = createTracker();
+	const trackLeave = leaves.track;
+	const pendingLeaves = leaves.pending;
+	const trackEnter = enters.track;
+	const pendingEnters = enters.pending;
+	function deferUntilEntered(node, run, play) {
+	    const host = node.parentNode;
+	    const handle = {
+	        finished: run.finished ?? Promise.resolve(),
+	        playState: 'pending',
+	        addEventListener: noop,
+	        removeEventListener: noop,
+	        cancel: noop,
+	    };
+	    queueMicrotask(() => {
+	        const wait = pendingEnters(host, node);
+	        if (wait)
+	            wait.then(() => { play(); });
+	        else
+	            play();
+	    });
+	    return handle;
+	}
+	function isTransitionMode(value) {
+	    return value === 'concurrent' || value === 'out-in' || value === 'in-out';
+	}
+
 	/** DI token'ını okunur biçime çevirir (dev uyarıları için). */
 	function describeServiceToken$1(t) {
 	    if (typeof t === 'string')
@@ -4224,9 +4433,12 @@
 	        return t.name || '[AnonymousClass]';
 	    return String(t);
 	}
+	function peekTransition(c) {
+	    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) {
-	    const t = c?.motif?.options?.transition;
+	    const t = peekTransition(c);
 	    if (!t?._markedDirection)
 	        return;
 	    t._markedDirection = false;
@@ -4235,9 +4447,292 @@
 	    }
 	    catch { }
 	}
+	function enterModeOf(container) {
+	    let c = container;
+	    while (c) {
+	        const mode = peekTransition(c)?.mode;
+	        if (mode)
+	            return mode;
+	        const node = c.element;
+	        if (!node || node.nodeType !== Node.COMMENT_NODE)
+	            break;
+	        c = c.parent ?? c._base?._leaveContainer;
+	    }
+	    return transitionSettings.mode;
+	}
+	function leaveModeOf(c) {
+	    return enterModeOf(c.parent ?? c._base?._leaveContainer);
+	}
 	function wantsEnterTransition(c) {
-	    const t = c?.motif.options?.transition;
-	    return !!(c?.motif.options?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
+	    const o = c?.motif?.options;
+	    const t = o?.[TRANSITION_SLOT];
+	    return !!(o?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
+	}
+	function createTransitionApi(owner) {
+	    const cur = () => owner.motif.options?.[TRANSITION_SLOT] ?? t;
+	    const t = {
+	        transitionInfo: () => {
+	            const s = cur();
+	            return {
+	                in: getTransitionInfo(owner.element, `${s.name}-enter ${s.name}-enter-start`),
+	                out: getTransitionInfo(owner.element, `${s.name}-leave ${s.name}-leave-start`),
+	            };
+	        },
+	        name: '',
+	        mode: undefined,
+	        classes: undefined,
+	        activeCssCancel: null,
+	        activeCssPhase: null,
+	        cssProps: () => {
+	            const s = cur();
+	            if (s.classes) {
+	                return { name: s.classes.name || s.name || '', ...s.classes };
+	            }
+	            if (s.name && s.name.length > 0) {
+	                return { name: s.name };
+	            }
+	            return null;
+	        },
+	        skipNextLeave: false,
+	        _suppressEnter: false,
+	        _markedDirection: false,
+	        in: (op) => {
+	            owner.motif.options.transitionIn = op;
+	        },
+	        out: (op) => {
+	            owner.motif.options.transitionOut = op;
+	        },
+	        enterTransition: (resolve) => {
+	            const s = cur();
+	            const base = owner._base;
+	            const appear = !base._enterPlayed;
+	            base._enterPlayed = true;
+	            base._enterSeq = (base._enterSeq ?? 0) + 1;
+	            if (s._suppressEnter) {
+	                resolve && resolve();
+	                return shimAnimation;
+	            }
+	            const attempt = {};
+	            base._enterRun = attempt;
+	            const enter = trackEnter(owner.element, () => {
+	                if (owner._base?._enterRun === attempt) {
+	                    owner._base._enterRun = null;
+	                    clearNavDirection(owner);
+	                }
+	                resolve && resolve();
+	            }, owner.motif.options.placeholder);
+	            const transitionIn = owner.motif.options.transitionIn;
+	            const animation = transitionIn
+	                ? s.run(transitionIn.keyframes, transitionIn.options, enter.done)
+	                : s._runCss('enter', enter.done, appear);
+	            if (animation && animation !== shimAnimation && typeof animation.addEventListener === 'function') {
+	                animation.addEventListener('cancel', enter.release);
+	            }
+	            return animation;
+	        },
+	        leaveTransition: (resolve) => {
+	            const s = cur();
+	            const node = owner.element;
+	            const leave = trackLeave(node, resolve);
+	            const play = () => {
+	                const transitionOut = owner.motif.options?.transitionOut;
+	                const animation = transitionOut
+	                    ? s.run(transitionOut.keyframes, transitionOut.options, leave.done)
+	                    : s._runCss('leave', leave.done);
+	                if (animation && animation !== shimAnimation && typeof animation.addEventListener === 'function') {
+	                    animation.addEventListener('cancel', leave.release);
+	                }
+	                return animation;
+	            };
+	            if (leave.finished && leaveModeOf(owner) === 'in-out') {
+	                return deferUntilEntered(node, leave, play);
+	            }
+	            return play();
+	        },
+	        _runCss: (phase, resolve, appear = false) => {
+	            const s = cur();
+	            if (phase === 'enter' && s.activeCssPhase === 'leave') {
+	                resolve && resolve();
+	                return shimAnimation;
+	            }
+	            const cssProps = s.cssProps();
+	            const el = owner.element;
+	            if (cssProps && el && el.nodeType === 1 && el.classList) {
+	                try {
+	                    s.activeCssCancel?.();
+	                }
+	                catch { }
+	                const cancel = runCssTransition(el, cssProps, phase, () => {
+	                    s.activeCssCancel = null;
+	                    s.activeCssPhase = null;
+	                    resolve && resolve();
+	                }, appear);
+	                s.activeCssCancel = cancel;
+	                s.activeCssPhase = phase;
+	                return shimAnimation;
+	            }
+	            resolve && resolve();
+	            return shimAnimation;
+	        },
+	        activeAnimations: [],
+	        run: (keyframes, options, resolve) => {
+	            const s = cur();
+	            owner.motif.stopAnimations();
+	            const element = owner.element;
+	            if (element.animate) {
+	                var x = element.animate(keyframes, options);
+	                s.activeAnimations.push(x);
+	                let cleanedUp = false;
+	                const safeCleanup = () => {
+	                    if (cleanedUp)
+	                        return;
+	                    cleanedUp = true;
+	                    try {
+	                        if (s.activeAnimations) {
+	                            s.activeAnimations = s.activeAnimations.filter(a => a !== x);
+	                        }
+	                    }
+	                    catch { }
+	                };
+	                x.addEventListener('finish', () => {
+	                    resolve && resolve();
+	                    safeCleanup();
+	                });
+	                x.oncancel = () => {
+	                    safeCleanup();
+	                };
+	                return x;
+	            }
+	            else {
+	                resolve && resolve();
+	                const g = globalThis;
+	                if (typeof g.Animation === 'function') {
+	                    try {
+	                        return new g.Animation();
+	                    }
+	                    catch { /* ignore */ }
+	                }
+	                return shimAnimation;
+	            }
+	        }
+	    };
+	    return t;
+	}
+	class ComponentOptionsImpl {
+	    [OPTIONS_OWNER];
+	    [TRANSITION_SLOT];
+	    constructor(owner) {
+	        this[OPTIONS_OWNER] = owner;
+	    }
+	    get transition() {
+	        return this[TRANSITION_SLOT] ??= createTransitionApi(this[OPTIONS_OWNER]);
+	    }
+	    set transition(value) {
+	        this[TRANSITION_SLOT] = value;
+	    }
+	    set enableRouterClassing(value) {
+	        try {
+	            const ins = this[OPTIONS_OWNER];
+	            const callback = ins.context.onRouterChanged(() => {
+	                ComponentHelper.routerClassing.call(ins, value);
+	            });
+	            ins.motif.register(disposableCore.toDisposable(() => {
+	                callback();
+	            }));
+	            ComponentHelper.routerClassing.call(ins, value);
+	        }
+	        catch (error) {
+	            reportError('MJX105', error);
+	        }
+	    }
+	    getInstance() {
+	        return this[OPTIONS_OWNER];
+	    }
+	    get display() {
+	        return this[OPTIONS_OWNER].isVisible;
+	    }
+	    set display(value) {
+	        if (value) {
+	            this[OPTIONS_OWNER].motif.show();
+	        }
+	        else {
+	            this[OPTIONS_OWNER].motif.hide();
+	        }
+	    }
+	    hasEvent(name) {
+	        return !!this[OPTIONS_OWNER]._eventHandlers?.has(name);
+	    }
+	}
+	lazyBindMethods(ComponentOptionsImpl.prototype, ['getInstance', 'hasEvent']);
+	function fireLifecycle(component, name, ev) {
+	    const base = component._base;
+	    if (base)
+	        base.emiters.fire(name, ev);
+	}
+	function hasLifecycleHook(component, hook, listName, lowerName, legacyProp) {
+	    if (component[hook])
+	        return true;
+	    const list = component._base[listName];
+	    if (Array.isArray(list) && list.length > 0)
+	        return true;
+	    if (legacyProp && component[legacyProp])
+	        return true;
+	    return component._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();
+	function callsSuper(fn, name) {
+	    if (typeof fn !== 'function')
+	        return false;
+	    const escaped = name.replace(/\$/g, '\\$');
+	    return new RegExp(`\\bsuper\\s*(\\.\\s*${escaped}(?![\\w$])|\\[)`).test(Function.prototype.toString.call(fn));
+	}
+	function reservedMemberProblems(c) {
+	    const problems = [];
+	    const own = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
+	    for (const name of RESERVED_METHODS) {
+	        if (own(c, name)) {
+	            problems.push([name, 'field']);
+	            continue;
+	        }
+	        for (let p = Object.getPrototypeOf(c); p && p !== ComponentBase.prototype; p = Object.getPrototypeOf(p)) {
+	            const d = Object.getOwnPropertyDescriptor(p, name);
+	            if (!d)
+	                continue;
+	            const fns = 'value' in d ? [d.value] : [d.get, d.set].filter(Boolean);
+	            if (!fns.some(fn => callsSuper(fn, name)))
+	                problems.push([name, 'method']);
+	            break;
+	        }
+	    }
+	    const anyC = c;
+	    if (!(anyC.motif instanceof ComponentMotif))
+	        problems.push(['motif', 'replaced']);
+	    if (!(anyC.controls instanceof ControlCollection))
+	        problems.push(['controls', 'replaced']);
+	    if (!(anyC.class instanceof controlClass))
+	        problems.push(['class', 'replaced']);
+	    if (!(anyC.attr instanceof controlAttribute))
+	        problems.push(['attr', 'replaced']);
+	    if (!(anyC.bindings instanceof BindingCollection))
+	        problems.push(['bindings', 'replaced']);
+	    if (anyC.element != null && typeof Node !== 'undefined' && !(anyC.element instanceof Node))
+	        problems.push(['element', 'replaced']);
+	    if (anyC.parent != null && !(anyC.parent instanceof ComponentBase))
+	        problems.push(['parent', 'replaced']);
+	    return problems;
+	}
+	function checkReservedMembers(c) {
+	    if (!isDevLike())
+	        return;
+	    const ctor = c?.constructor;
+	    if (typeof ctor !== 'function' || checkedComponentClasses.has(ctor))
+	        return;
+	    checkedComponentClasses.add(ctor);
+	    const name = ctor.name || 'An anonymous component class';
+	    for (const [member, how] of reservedMemberProblems(c)) {
+	        reportWarning('MJX128', [name, member, how]);
+	    }
 	}
 	const ComponentHelper = {
 	    callInitializeComponent(component) {
@@ -4267,25 +4762,26 @@
 	            }
 	        }
 	    },
-	    async callDisposing(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
-	            }
-	            if (component.ondisposing) {
-	                callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
+	    callDisposing(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (!hasLifecycleHook(component, 'onDisposing', '_onDisposingHandlers', 'ondisposing', 'ondisposing')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('ondisposing', ev);
-	        });
+	        }
+	        if (component.ondisposing) {
+	            callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
+	        }
+	        fireLifecycle(component, 'ondisposing', ev);
 	    },
 	    callActivated(component) {
 	        if (!component || component.isDisposed) {
@@ -4300,7 +4796,7 @@
 	                callReported(() => fn(sender, ev), 'MJX122', 'onActivated');
 	            }
 	        }
-	        component._base.emiters.fire('onactivated', ev);
+	        fireLifecycle(component, 'onactivated', ev);
 	    },
 	    callDeactivated(component) {
 	        if (!component || component.isDisposed) {
@@ -4315,7 +4811,7 @@
 	                callReported(() => fn(sender, ev), 'MJX122', 'onDeactivated');
 	            }
 	        }
-	        component._base.emiters.fire('ondeactivated', ev);
+	        fireLifecycle(component, 'ondeactivated', ev);
 	    },
 	    deactivateTree(component, deep = true) {
 	        if (!component || component.isDisposed || !component.isBuilt || !component._base || component._base._inactive) {
@@ -4323,7 +4819,7 @@
 	        }
 	        component._base._inactive = true;
 	        ComponentHelper.callDeactivated(component);
-	        if (!deep) {
+	        if (!deep || component.isDisposed) {
 	            return;
 	        }
 	        for (const c of component.controls.items.slice()) {
@@ -4338,7 +4834,7 @@
 	        }
 	        component._base._inactive = false;
 	        ComponentHelper.callActivated(component);
-	        if (!deep) {
+	        if (!deep || component.isDisposed) {
 	            return;
 	        }
 	        for (const c of component.controls.items.slice()) {
@@ -4347,34 +4843,36 @@
 	            }
 	        }
 	    },
-	    async callDisposed(component) {
+	    callDisposed(component) {
 	        if (!component || !component._base || component._base._disposedFired) {
 	            return;
 	        }
 	        component._base._disposedFired = true;
-	        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');
+	        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');
+	                }
+	            }
+	            if (component.ondisposed) {
+	                callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
+	            }
+	            fireLifecycle(component, 'ondisposed', ev);
 	        }
-	        if (component.ondisposed) {
-	            callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
-	        }
-	        component._base.emiters.fire('ondisposed', ev);
 	        try {
 	            globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:disposed', { id: component.id, type: component.constructor?.name });
 	        }
 	        catch { }
 	    },
-	    async callBuilt(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
+	    callBuilt(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (hasLifecycleHook(component, 'onBuilt', '_onBuiltHandlers', 'onbuilt', 'onbuilt')) {
 	            const sender = component, ev = { cancel: false };
 	            if (component.onBuilt) {
 	                callReported(() => component.onBuilt(sender, ev), 'MJX122', 'onBuilt');
@@ -4387,12 +4885,12 @@
 	            if (component.onbuilt) {
 	                callReported(() => component.onbuilt(sender, ev), 'MJX122', 'onbuilt');
 	            }
-	            component._base.emiters.fire('onbuilt', ev);
-	            try {
-	                globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:mounted', { id: component.id, type: component.constructor?.name });
-	            }
-	            catch { }
-	        });
+	            fireLifecycle(component, 'onbuilt', ev);
+	        }
+	        try {
+	            globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:mounted', { id: component.id, type: component.constructor?.name });
+	        }
+	        catch { }
 	    },
 	    scheduleMounted(component) {
 	        if (!component || component.isDisposed || component._base._mountedScheduled) {
@@ -4436,47 +4934,49 @@
 	        if (component.onmounted) {
 	            callReported(() => component.onmounted(sender, ev), 'MJX122', 'onmounted');
 	        }
-	        component._base.emiters.fire('onmounted', ev);
+	        fireLifecycle(component, 'onmounted', ev);
 	    },
-	    async callBuilding(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	    callBuilding(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (!hasLifecycleHook(component, 'onBuilding', '_onBuildingHandlers', 'onbuilding')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('onbuilding', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'onbuilding', ev);
 	    },
-	    async callConfig(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed || component.isConfigured) {
-	                return;
-	            }
-	            component.isConfigured = true;
-	            if (component.motif.options._preconfig) {
-	                safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	    callConfig(component) {
+	        if (!component || component.isDisposed || component.isConfigured) {
+	            return;
+	        }
+	        component.isConfigured = true;
+	        if (component.motif.options._preconfig) {
+	            safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
+	        }
+	        if (!hasLifecycleHook(component, 'onConfig', '_onConfigHandlers', 'onconfig')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('onconfig', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'onconfig', ev);
 	    },
-	    async callConfigured(component) {
+	    callConfigured(component) {
 	        if (component.motif.options && component.motif.options._postconfigdone) {
 	            return;
 	        }
@@ -4484,73 +4984,77 @@
 	            ComponentHelper.callConfig(component);
 	        }
 	        component.motif.options._postconfigdone = true;
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (!hasLifecycleHook(component, 'onConfigured', '_onConfiguredHandlers', 'onconfigured')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('onconfigured', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'onconfigured', ev);
 	    },
-	    async callOnInitialized(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            component.isInitialized = true;
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	    callOnInitialized(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        component.isInitialized = true;
+	        if (!hasLifecycleHook(component, 'onInitialized', '_onInitializedHandlers', 'oninitialized')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('oninitialized', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'oninitialized', ev);
 	    },
-	    async callOnInitializing(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	    callOnInitializing(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (!hasLifecycleHook(component, 'onInitializing', '_onInitializingHandlers', 'oninitializing')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('oninitializing', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'oninitializing', ev);
 	    },
-	    async callVisibilityChanged(component) {
-	        ComponentHelper.backgroundCallback(() => {
-	            if (!component || component.isDisposed) {
-	                return;
-	            }
-	            const sender = component, ev = { cancel: false };
-	            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');
-	                }
+	    callVisibilityChanged(component) {
+	        if (!component || component.isDisposed) {
+	            return;
+	        }
+	        if (!hasLifecycleHook(component, 'onVisibilityChanged', '_onVisibilityChangedHandlers', 'onvisibilitychanged')) {
+	            return;
+	        }
+	        const sender = component, ev = { cancel: false };
+	        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');
 	            }
-	            component._base.emiters.fire('onvisibilitychanged', ev);
-	        });
+	        }
+	        fireLifecycle(component, 'onvisibilitychanged', ev);
 	    },
 	    findFragmentContent(c) {
 	        const controlElement = c.element.nodeType == Node.COMMENT_NODE
@@ -4576,6 +5080,8 @@
 	            return;
 	        }
 	        ComponentHelper.callConfigured(c);
+	        if (c.isDisposed)
+	            return;
 	        c._base._activatePreBindings();
 	        if (c.isWait)
 	            return;
@@ -4603,8 +5109,11 @@
 	                return;
 	            }
 	        }
+	        if (c.isDisposed || this.isDisposed)
+	            return;
 	        c.parent = this;
-	        const currentIndex = this.controls.items.indexOf(c);
+	        const ownItems = this.controls.items;
+	        const currentIndex = ownItems.length > 0 && ownItems[ownItems.length - 1] === c ? ownItems.length - 1 : ownItems.indexOf(c);
 	        const appendableElement = findAppendableComponent(this);
 	        var controlElement = c.element.nodeType == Node.COMMENT_NODE
 	            ? c.motif.options.cache
@@ -4655,6 +5164,18 @@
 	                return;
 	            }
 	        }
+	        if (insertHost && enterModeOf(this) === 'out-in') {
+	            const wait = pendingLeaves(insertHost, controlElement);
+	            if (wait) {
+	                c._base._enterSeq = (c._base._enterSeq ?? 0) + 1;
+	                wait.then(() => {
+	                    if (this.isDisposed || c.isDisposed || c.parent !== this)
+	                        return;
+	                    ComponentHelper.internalBuild.call(this, c);
+	                });
+	                return;
+	            }
+	        }
 	        const parentNode = appendableElement?.element;
 	        if (controlElement && parentNode && (controlElement === parentNode || controlElement.contains(parentNode))) {
 	            reportWarning('MJX104', []);
@@ -4736,717 +5257,648 @@
 	        }
 	    }
 	};
-	const fragmentCloseMarkers = new WeakMap();
-	const LIFECYCLE_X_EVENTS = new Set([
-	    'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
-	    'config', 'configured', 'visibilitychanged', 'activated', 'deactivated'
-	]);
-	const RAW_APPLICATION = Symbol('motif.rawApplication');
-	const SCOPED_SUBSCRIBERS = new Set(['on', 'onRouterChanged']);
-	/**
-	 * Uygulamanın bileşene bağlı görünümü. `on`/`onRouterChanged` aboneliklerini sahibin ömrüne
-	 * kaydeder; diğer tüm üyeler (alanlar, metotlar, atamalar) uygulamanın kendisine yönlenir.
-	 */
-	function createScopedContext(app, owner) {
-	    const cache = new Map();
-	    return new Proxy(app, {
-	        get(target, prop) {
-	            if (prop === RAW_APPLICATION) {
-	                return target;
-	            }
-	            const value = Reflect.get(target, prop, target);
-	            if (typeof value !== 'function') {
-	                return value;
-	            }
-	            const hit = cache.get(prop);
-	            if (hit && hit.fn === value) {
-	                return hit.bound;
-	            }
-	            const bound = SCOPED_SUBSCRIBERS.has(prop)
-	                ? (...args) => owner._trackContextSubscription(value.apply(target, args))
-	                : value.bind(target);
-	            cache.set(prop, { fn: value, bound });
-	            return bound;
-	        },
-	        set(target, prop, value) {
-	            return Reflect.set(target, prop, value, target);
-	        },
-	    });
-	}
-	class ComponentBase extends Disposable {
-	    motif = new ComponentMotif(this, {
-	        transition: {
-	            transitionInfo: () => {
-	                return {
-	                    in: getTransitionInfo(this.element, `${this.motif.options.transition.name}-enter ${this.motif.options.transition.name}-enter-start`),
-	                    out: getTransitionInfo(this.element, `${this.motif.options.transition.name}-leave ${this.motif.options.transition.name}-leave-start`),
-	                };
-	            },
-	            name: '',
-	            classes: undefined,
-	            activeCssCancel: null,
-	            activeCssPhase: null,
-	            cssProps: () => {
-	                const t = this.motif.options.transition;
-	                if (t.classes) {
-	                    return { name: t.classes.name || t.name || '', ...t.classes };
-	                }
-	                if (t.name && t.name.length > 0) {
-	                    return { name: t.name };
-	                }
-	                return null;
-	            },
-	            skipNextLeave: false,
-	            _suppressEnter: false,
-	            _markedDirection: false,
-	            in: (op) => {
-	                this.motif.options.transitionIn = op;
-	            },
-	            out: (op) => {
-	                this.motif.options.transitionOut = op;
-	            },
-	            enterTransition: (resolve) => {
-	                const t = this.motif.options.transition;
-	                const appear = !this._base._enterPlayed;
-	                this._base._enterPlayed = true;
-	                this._base._enterSeq = (this._base._enterSeq ?? 0) + 1;
-	                if (t._suppressEnter) {
-	                    resolve && resolve();
-	                    return shimAnimation;
-	                }
-	                const attempt = {};
-	                this._base._enterRun = attempt;
-	                const done = () => {
-	                    if (this._base?._enterRun === attempt) {
-	                        this._base._enterRun = null;
-	                        clearNavDirection(this);
-	                    }
-	                    resolve && resolve();
-	                };
-	                if (this.motif.options.transitionIn) {
-	                    return t.run(this.motif.options.transitionIn.keyframes, this.motif.options.transitionIn.options, done);
-	                }
-	                return t._runCss('enter', done, appear);
-	            },
-	            leaveTransition: (resolve) => {
-	                if (this.motif.options.transitionOut) {
-	                    return this.motif.options.transition.run(this.motif.options.transitionOut.keyframes, this.motif.options.transitionOut.options, resolve);
-	                }
-	                return this.motif.options.transition._runCss('leave', resolve);
-	            },
-	            _runCss: (phase, resolve, appear = false) => {
-	                const t = this.motif.options.transition;
-	                if (phase === 'enter' && t.activeCssPhase === 'leave') {
-	                    resolve && resolve();
-	                    return shimAnimation;
-	                }
-	                const cssProps = t.cssProps();
-	                const el = this.element;
-	                if (cssProps && el && el.nodeType === 1 && el.classList) {
-	                    try {
-	                        t.activeCssCancel?.();
-	                    }
-	                    catch { }
-	                    const cancel = runCssTransition(el, cssProps, phase, () => {
-	                        if (this.motif.options?.transition) {
-	                            this.motif.options.transition.activeCssCancel = null;
-	                            this.motif.options.transition.activeCssPhase = null;
-	                        }
-	                        resolve && resolve();
-	                    }, appear);
-	                    t.activeCssCancel = cancel;
-	                    t.activeCssPhase = phase;
-	                    return shimAnimation;
-	                }
-	                resolve && resolve();
-	                return shimAnimation;
-	            },
-	            activeAnimations: [],
-	            run: (keyframes, options, resolve) => {
-	                this.motif.stopAnimations();
-	                const element = this.element;
-	                if (element.animate) {
-	                    var x = element.animate(keyframes, options);
-	                    this.motif.options.transition.activeAnimations.push(x);
-	                    let cleanedUp = false;
-	                    const safeCleanup = () => {
-	                        if (cleanedUp)
-	                            return;
-	                        cleanedUp = true;
-	                        try {
-	                            if (this?.motif.options?.transition?.activeAnimations) {
-	                                this.motif.options.transition.activeAnimations = this.motif.options.transition.activeAnimations.filter(a => a !== x);
-	                            }
-	                        }
-	                        catch { }
-	                    };
-	                    x.addEventListener('finish', () => {
-	                        resolve && resolve();
-	                        safeCleanup();
-	                    });
-	                    x.oncancel = () => {
-	                        safeCleanup();
-	                    };
-	                    return x;
-	                }
-	                else {
-	                    resolve && resolve();
-	                    const g = globalThis;
-	                    if (typeof g.Animation === 'function') {
-	                        try {
-	                            return new g.Animation();
-	                        }
-	                        catch { /* ignore */ }
-	                    }
-	                    return shimAnimation;
+	function removeComponentDom(c, node, alsoPlaceholder) {
+	    const opts = c.motif?.options;
+	    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;
+	                try {
+	                    parent.removeChild(current);
 	                }
+	                catch { }
+	                if (current === close)
+	                    break;
+	                current = after;
 	            }
-	        },
-	        set enableRouterClassing(value) {
+	        }
+	        else {
 	            try {
-	                var ins = this.getInstance();
-	                const callback = ins.context.onRouterChanged(() => {
-	                    ComponentHelper.routerClassing.call(ins, value);
-	                });
-	                ins.motif.register(disposableCore.toDisposable(() => {
-	                    callback();
-	                }));
-	                ComponentHelper.routerClassing.call(ins, value);
-	            }
-	            catch (error) {
-	                reportError('MJX105', error);
-	            }
-	        },
-	        getInstance: () => {
-	            return this;
-	        },
-	        get display() {
-	            return this.getInstance().isVisible;
-	        },
-	        set display(value) {
-	            if (value) {
-	                this.getInstance().motif.show();
-	            }
-	            else {
-	                this.getInstance().motif.hide();
+	                parent.removeChild(node);
 	            }
-	        },
-	        hasEvent: (name) => {
-	            const ins = this._eventHandlers?.has(name);
-	            if (ins)
-	                return true;
-	            return false;
+	            catch { }
 	        }
-	    });
-	    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;
-	    useModel(modelCtor) {
-	        return reactive(modelCtor);
+	        if (!alsoPlaceholder)
+	            return;
 	    }
-	    _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';
+	    else if (parent) {
+	        try {
+	            parent.removeChild(node);
 	        }
-	        return 'placeholder';
+	        catch { }
+	        if (!alsoPlaceholder)
+	            return;
 	    }
-	    _isInDom() {
+	    const placeholder = opts?.placeholder;
+	    if (placeholder && placeholder.parentNode) {
 	        try {
-	            if (!this.element)
-	                return false;
-	            const node = this.element;
-	            if (node.nodeType === Node.COMMENT_NODE) {
-	                return !!node.parentNode;
-	            }
-	            return !!node.parentNode;
-	        }
-	        catch {
-	            return false;
+	            placeholder.parentNode.removeChild(placeholder);
 	        }
+	        catch { }
 	    }
-	    set isWait(value) {
-	        this._isWait = value;
-	        if (this.isBuilt) {
-	            if (value) {
-	                this.motif.hide();
-	            }
-	            else {
-	                this.motif.show();
-	            }
+	}
+	function detachDomWithAnimation(c) {
+	    const node = c.element;
+	    if (!node || c._keepElementOnDispose === true)
+	        return;
+	    const opts = c.motif.options;
+	    const t = opts?.[TRANSITION_SLOT];
+	    try {
+	        const skip = t?.skipNextLeave === true || c._forceInstantDetach === true;
+	        if (skip) {
+	            if (t)
+	                t.skipNextLeave = false;
+	            c._forceInstantDetach = false;
+	            removeComponentDom(c, node, true);
 	            return;
 	        }
-	        if (value === false && this.parent && this.parent.isBuilt) {
-	            ComponentHelper.internalBuild.call(this.parent, this);
-	        }
 	    }
-	    get isWait() {
-	        return this._isWait;
+	    catch { }
+	    if (!t && !opts?.transitionOut) {
+	        removeComponentDom(c, node, false);
+	        return;
 	    }
-	    constructor(element, props = {}) {
-	        super();
-	        recordServiceOwner(this);
-	        if (this.onElementCreating) {
-	            this.element = this.onElementCreating.call(this);
+	    try {
+	        opts.transition.leaveTransition(() => {
+	            removeComponentDom(c, node, false);
+	        });
+	    }
+	    catch {
+	        removeComponentDom(c, node, false);
+	    }
+	}
+	async function detachDomWithAnimationAsync(c) {
+	    const node = c.element;
+	    if (!node || c._keepElementOnDispose === true)
+	        return;
+	    const opts = c.motif.options;
+	    const t = opts?.[TRANSITION_SLOT];
+	    try {
+	        const skip = t?.skipNextLeave === true || c._forceInstantDetach === true;
+	        if (skip) {
+	            if (t)
+	                t.skipNextLeave = false;
+	            c._forceInstantDetach = false;
+	            removeComponentDom(c, node, true);
+	            return;
 	        }
-	        else if (props?.onElementCreating) {
-	            this.element = props.onElementCreating.call(this);
+	    }
+	    catch { }
+	    if (!t && !opts?.transitionOut) {
+	        removeComponentDom(c, node, false);
+	        return;
+	    }
+	    return new Promise((resolve) => {
+	        try {
+	            opts.transition.leaveTransition(() => {
+	                removeComponentDom(c, node, false);
+	                resolve();
+	            });
 	        }
-	        else {
-	            this.element = element;
+	        catch {
+	            removeComponentDom(c, node, false);
+	            resolve();
 	        }
-	        if (props) {
-	            for (const fn of takePendingRefs(this, extractRefs(props, this))) {
-	                callReported(() => fn(this), 'MJX122', 'ref');
+	    });
+	}
+	function disposeShallow(c) {
+	    if (c.isDisposed)
+	        return;
+	    ComponentHelper.callDisposing.call(c, c);
+	    try {
+	        c._base._offAll();
+	    }
+	    catch {
+	    }
+	    c.motif.stopAnimations();
+	    c._base._deactivateBindings();
+	    if (c.controls?.items?.length) {
+	        for (const child of c.controls.items) {
+	            try {
+	                child._base._disposeShallow();
+	            }
+	            catch {
 	            }
 	        }
-	        props && ParseProps(props, this);
-	        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;
-	            if (plain)
-	                applyPlainElementProps(props, this);
-	            else
-	                applyFallthroughProps(props, this);
+	    }
+	    ComponentHelper.callDisposed.call(c, c);
+	    safeCall(() => { c._base.emiters.clear(); }, 'disposeShallow.emiters');
+	    c.isDisposed = true;
+	    Disposable.prototype.dispose.call(c);
+	}
+	function deepCleanup(c) {
+	    try {
+	        c.parent = null;
+	    }
+	    catch { }
+	    try {
+	        c._eventHandlers?.clear();
+	    }
+	    catch {
+	    }
+	    c._eventHandlers = undefined;
+	    try {
+	        c.class?._countsStore?.clear();
+	    }
+	    catch { }
+	    try {
+	        c.class?._watchersStore?.clear();
+	    }
+	    catch { }
+	    try {
+	        c.attr?._attrMapStore?.clear();
+	    }
+	    catch { }
+	    try {
+	        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;
 	        }
-	        ComponentHelper.callOnInitializing(this);
-	        this.controls.onAdd = (c) => {
-	            this.motif.trigger('controladded', { control: c });
-	            if (this.isWait || this.parent?.isWait)
-	                return;
-	            ComponentHelper.internalBuild.call(this, c);
-	        };
-	        this.controls.onAddBeforeBuild = (c) => {
-	            this.motif.trigger('controladded', { control: c });
-	        };
-	        this.controls.onRemove = (c) => {
-	            this.motif.trigger('controlremoved', { control: c });
-	        };
-	        ComponentHelper.callOnInitialized(this);
-	        const ctor = new.target;
-	        const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
-	        if (isBaseCtor) {
-	            ComponentHelper.callConfig(this);
+	    }
+	    catch {
+	    }
+	    try {
+	        c.element = null;
+	    }
+	    catch { }
+	    try {
+	        c.props = undefined;
+	    }
+	    catch { }
+	    try {
+	        c.childs = undefined;
+	    }
+	    catch { }
+	    try {
+	        c.class = undefined;
+	    }
+	    catch { }
+	    try {
+	        c.attr = undefined;
+	    }
+	    catch { }
+	    try {
+	        c.parent = null;
+	    }
+	    catch { }
+	    try {
+	        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')
+	            continue;
+	        try {
+	            c[key] = undefined;
 	        }
-	        else {
-	            this._base._configDeferred = true;
+	        catch { }
+	    }
+	    c.isDisposed = true;
+	}
+	const DISPOSE_STARTED = Promise.resolve();
+	function subtreeDisposesSync(c, root) {
+	    if (!root && c._disposing && !c.isDisposed)
+	        return false;
+	    if (c.disposeAsync !== ComponentBase.prototype.disposeAsync)
+	        return false;
+	    const opts = c.motif?.options;
+	    if (opts) {
+	        if (opts.transitionOut)
+	            return false;
+	        const t = opts[TRANSITION_SLOT];
+	        if (t) {
+	            if (t.activeAnimations && t.activeAnimations.length > 0)
+	                return false;
+	            if (t.activeCssCancel)
+	                return false;
+	            if (t.classes || (t.name && t.name.length > 0))
+	                return false;
 	        }
 	    }
-	    childs;
-	    _base = {
-	        prebinding_Activated: false,
-	        _offAll: () => {
-	            if (!this._eventHandlers)
-	                return;
-	            for (const [full, set] of this._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 {
-	                        this.element.removeEventListener(evt, rec.wrapped, cap);
-	                    }
-	                    catch { }
-	                    try {
-	                        if (rec.capture === undefined) {
-	                            this.element.removeEventListener(evt, rec.wrapped, !cap);
-	                        }
-	                    }
-	                    catch { }
-	                }
-	            }
-	            this._eventHandlers.clear();
-	            this._eventHandlers = undefined;
-	        },
-	        _deactivateBindings: () => {
-	            try {
-	                this.bindings?.deactivateAll();
-	            }
-	            catch { }
-	        },
-	        _activateBindings: () => {
-	            try {
-	                this.bindings?.activateAll();
-	            }
-	            catch { }
-	        },
-	        _reactivateBindings: () => {
-	            try {
-	                this.bindings?.reActivateAll();
-	            }
-	            catch { }
-	        },
-	        _activatePreBindings: () => {
-	            if (this._base.prebinding_Activated)
-	                return;
-	            this.bindings.items.filter(x => x.propertyName == "isWait" || x.propertyName == "display").forEach(b => {
-	                b.activate();
-	            });
-	            this._base.prebinding_Activated = true;
-	        },
-	        _detachDomWithAnimation: () => {
-	            const node = this.element;
-	            if (!node)
-	                return;
-	            try {
-	                const skip = this.motif.options.transition.skipNextLeave === true || this?._forceInstantDetach === true;
-	                if (skip) {
-	                    if (this?.motif.options?.transition)
-	                        this.motif.options.transition.skipNextLeave = false;
-	                    this._forceInstantDetach = false;
-	                    const immediate = () => {
-	                        const parent = node.parentNode;
-	                        if (node.nodeType === Node.COMMENT_NODE) {
-	                            const open = node;
-	                            const close = this.motif.options?.closeFragment || null;
-	                            if (!parent)
-	                                return;
-	                            if (close) {
-	                                let current = open;
-	                                while (current) {
-	                                    const after = current.nextSibling;
-	                                    try {
-	                                        parent.removeChild(current);
-	                                    }
-	                                    catch { }
-	                                    if (current === close)
-	                                        break;
-	                                    current = after;
-	                                }
-	                            }
-	                            else {
-	                                try {
-	                                    parent.removeChild(open);
-	                                }
-	                                catch { }
-	                            }
-	                        }
-	                        else if (parent) {
-	                            try {
-	                                parent.removeChild(node);
-	                            }
-	                            catch { }
-	                        }
-	                        const placeholder = this.motif.options?.placeholder;
-	                        if (placeholder && placeholder.parentNode) {
-	                            try {
-	                                placeholder.parentNode.removeChild(placeholder);
-	                            }
-	                            catch { }
-	                        }
-	                    };
-	                    immediate();
-	                    return;
-	                }
-	            }
-	            catch { }
-	            const removeNow = () => {
-	                if (node.nodeType === Node.COMMENT_NODE) {
-	                    const open = node;
-	                    const close = this.motif.options?.closeFragment || null;
-	                    const parent = open.parentNode;
-	                    if (!parent)
-	                        return;
-	                    if (close) {
-	                        let current = open;
-	                        while (current) {
-	                            const after = current.nextSibling;
-	                            try {
-	                                parent.removeChild(current);
-	                            }
-	                            catch { }
-	                            if (current === close)
-	                                break;
-	                            current = after;
-	                        }
-	                    }
-	                    else {
-	                        try {
-	                            parent.removeChild(open);
-	                        }
-	                        catch { }
-	                    }
-	                    return;
-	                }
-	                const parent = node.parentNode;
-	                if (parent) {
-	                    try {
-	                        parent.removeChild(node);
-	                    }
-	                    catch { }
-	                    return;
-	                }
-	                const placeholder = this.motif.options?.placeholder;
-	                if (placeholder && placeholder.parentNode) {
-	                    try {
-	                        placeholder.parentNode.removeChild(placeholder);
-	                    }
-	                    catch { }
-	                }
-	            };
-	            try {
-	                this.motif.options.transition.leaveTransition(() => {
-	                    removeNow();
-	                });
-	            }
-	            catch {
-	                removeNow();
-	            }
-	        },
-	        _detachDomWithAnimationAsync: async () => {
-	            const node = this.element;
-	            if (!node)
-	                return Promise.resolve();
-	            try {
-	                const skip = this.motif.options.transition.skipNextLeave === true || this?._forceInstantDetach === true;
-	                if (skip) {
-	                    if (this.motif.options.transition)
-	                        this.motif.options.transition.skipNextLeave = false;
-	                    this._forceInstantDetach = false;
-	                    const immediateRemove = () => {
-	                        if (node.nodeType === Node.COMMENT_NODE) {
-	                            const open = node;
-	                            const close = this.motif.options?.closeFragment || null;
-	                            const parent = open.parentNode;
-	                            if (!parent)
-	                                return;
-	                            if (close) {
-	                                let current = open;
-	                                while (current) {
-	                                    const after = current.nextSibling;
-	                                    try {
-	                                        parent.removeChild(current);
-	                                    }
-	                                    catch { }
-	                                    if (current === close)
-	                                        break;
-	                                    current = after;
-	                                }
-	                            }
-	                            else {
-	                                try {
-	                                    parent.removeChild(open);
-	                                }
-	                                catch { }
-	                            }
-	                        }
-	                        else {
-	                            const parent = node.parentNode;
-	                            if (parent) {
-	                                try {
-	                                    parent.removeChild(node);
-	                                }
-	                                catch { }
-	                            }
-	                        }
-	                        const placeholder = this.motif.options?.placeholder;
-	                        if (placeholder && placeholder.parentNode) {
-	                            try {
-	                                placeholder.parentNode.removeChild(placeholder);
-	                            }
-	                            catch { }
-	                        }
-	                    };
-	                    immediateRemove();
-	                    return Promise.resolve();
-	                }
-	            }
-	            catch { }
-	            const removeNow = () => {
-	                if (node.nodeType === Node.COMMENT_NODE) {
-	                    const open = node;
-	                    const close = this.motif.options?.closeFragment || null;
-	                    const parent = open.parentNode;
-	                    if (!parent)
-	                        return;
-	                    if (close) {
-	                        let current = open;
-	                        while (current) {
-	                            const after = current.nextSibling;
-	                            try {
-	                                parent.removeChild(current);
-	                            }
-	                            catch { }
-	                            if (current === close)
-	                                break;
-	                            current = after;
-	                        }
-	                    }
-	                    else {
-	                        try {
-	                            parent.removeChild(open);
-	                        }
-	                        catch { }
-	                    }
-	                    return;
-	                }
-	                const parent = node.parentNode;
-	                if (parent) {
-	                    try {
-	                        parent.removeChild(node);
-	                    }
-	                    catch { }
-	                    return;
-	                }
-	                const placeholder = this.motif.options?.placeholder;
-	                if (placeholder && placeholder.parentNode) {
-	                    try {
-	                        placeholder.parentNode.removeChild(placeholder);
-	                    }
-	                    catch { }
-	                }
-	            };
-	            return new Promise((resolve) => {
-	                try {
-	                    this.motif.options.transition.leaveTransition(() => {
-	                        removeNow();
-	                        resolve();
-	                    });
-	                }
-	                catch {
-	                    removeNow();
-	                    resolve();
-	                }
-	            });
-	        },
-	        _disposeShallow: () => {
-	            if (this.isDisposed)
-	                return;
-	            ComponentHelper.callDisposing.call(this, this);
-	            try {
-	                this._base._offAll();
-	            }
-	            catch {
-	            }
-	            this.motif.stopAnimations();
-	            this._base._deactivateBindings();
-	            if (this.controls?.items?.length) {
-	                for (const c of this.controls.items) {
+	    const items = c.controls?.items;
+	    if (items) {
+	        for (let i = 0; i < items.length; i++) {
+	            const child = items[i];
+	            if (child && !child.isDisposed && !subtreeDisposesSync(child, false))
+	                return false;
+	        }
+	    }
+	    return true;
+	}
+	const teardownApplications = new WeakMap();
+	function owningApplication(c) {
+	    for (let p = c; p; p = p.parent) {
+	        if (p.application)
+	            return p.application;
+	        const recorded = teardownApplications.get(p);
+	        if (recorded)
+	            return recorded;
+	    }
+	    return Application.main ?? null;
+	}
+	function disposePrefix(c, options, asChild) {
+	    const ctx = asChild ? 'disposeAsync' : 'dispose';
+	    if (Application._disposingCount > 0) {
+	        const app = owningApplication(c);
+	        if (app && app.state === 'disposing')
+	            teardownApplications.set(c, app);
+	    }
+	    if (!asChild && options?.skipLeaveTransition) {
+	        c.motif.options.transition.skipNextLeave = true;
+	    }
+	    safeCall(() => { ComponentHelper.callDisposing.call(c, c); }, ctx + '.callDisposing');
+	    c._base._offAll();
+	    c._base._deactivateBindings();
+	    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 = [];
+	        safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'disposeAsync.callDisposed');
+	        safeCall(() => { c._base.emiters.clear(); }, 'disposeAsync.emiters');
+	        if (options?.deep) {
+	            c._base._deepCleanup();
+	        }
+	        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();
+	}
+	async function disposeRemainderAsync(c, options, asChild, leave) {
+	    if (leave) {
+	        await leave;
+	    }
+	    else {
+	        if (asChild) {
+	            await c.motif.stopAnimations();
+	        }
+	        else if (peekTransition(c)?.skipNextLeave) {
+	            await c.motif.stopAnimations();
+	        }
+	        await c._base._detachDomWithAnimationAsync();
+	    }
+	    if (!asChild && c.constructor.name !== 'TransportTo') {
+	        await disposeContentBlocks(c);
+	    }
+	    const childOptions = { deep: options?.deep };
+	    await safeCallAsync(async () => {
+	        if (c.isDisposed) {
+	            return;
+	        }
+	        const ctrls = Array.from(c.controls.items);
+	        if (ctrls.length) {
+	            await Promise.all(ctrls.map(child => asChild
+	                ? safeCallAsync(async () => { await child.disposeAsync(childOptions); }, 'disposeAsync.disposeAsyncChildren.handler')
+	                : (async () => {
 	                    try {
-	                        c._base._disposeShallow();
+	                        await child.disposeAsync(childOptions);
 	                    }
-	                    catch {
+	                    catch (error) {
+	                        reportError('MJX107', error);
 	                    }
-	                }
-	            }
-	            ComponentHelper.callDisposed.call(this, this);
-	            safeCall(() => { this._base.emiters.clear(); }, 'disposeShallow.emiters');
-	            this.isDisposed = true;
-	            super.dispose();
-	        },
-	        _deepCleanup: () => {
-	            try {
-	                this.parent = null;
-	            }
-	            catch { }
-	            try {
-	                this._eventHandlers?.clear();
-	            }
-	            catch {
-	            }
-	            // for (const c of this.controls.items) {
-	            //         try {
-	            //         } catch {
-	            this._eventHandlers = undefined;
-	            try {
-	                this.class?._counts?.clear();
-	            }
-	            catch { }
-	            try {
-	                this.class?._watchers?.clear();
-	            }
-	            catch { }
-	            try {
-	                this.attr?._attrMap?.clear();
-	            }
-	            catch { }
-	            try {
-	                this.attr?._watchers?.clear();
-	            }
-	            catch { }
-	            try {
-	                if (this.motif.options) {
-	                    this.motif.options.cache = undefined;
-	                    this.motif.options.closeFragment = undefined;
-	                    this.motif.options.placeholder = undefined;
-	                }
-	            }
-	            catch {
-	            }
-	            try {
-	                this.element = null;
-	            }
-	            catch { }
-	            try {
-	                this.props = undefined;
-	            }
-	            catch { }
-	            try {
-	                this.childs = undefined;
+	                })()));
+	        }
+	    }, asChild ? 'disposeAsync.disposeAsyncChildren' : 'dispose.disposeAsync');
+	    if (!asChild && c.isDisposed) {
+	        return;
+	    }
+	    disposeFinish(c, options, asChild);
+	}
+	function disposeRemainderSync(root, options, asChild, rootDetached) {
+	    const childOptions = { deep: options?.deep };
+	    const nodes = [root];
+	    const parents = [-1];
+	    let pending = null;
+	    if (!rootDetached)
+	        detachDomWithAnimation(root);
+	    for (let n = 0; n < nodes.length; n++) {
+	        const node = nodes[n];
+	        if (node.isDisposed)
+	            continue;
+	        const items = node.controls?.items;
+	        if (!items || items.length === 0)
+	            continue;
+	        const ctrls = Array.from(items);
+	        for (let j = 0; j < ctrls.length; j++) {
+	            const child = ctrls[j];
+	            if (child.isDisposed)
+	                continue;
+	            if (child._disposing) {
+	                (pending ??= []).push(child._disposing);
+	                continue;
 	            }
-	            catch { }
 	            try {
-	                this.class = undefined;
+	                retireServiceOwner(child);
+	                child._disposing = root._disposing;
+	                disposePrefix(child, childOptions, true);
+	                detachDomWithAnimation(child);
+	                nodes.push(child);
+	                parents.push(n);
 	            }
-	            catch { }
-	            try {
-	                this.attr = undefined;
+	            catch (error) {
+	                reportError('MJX107', error);
 	            }
-	            catch { }
+	        }
+	    }
+	    const count = nodes.length;
+	    if (count > 1) {
+	        const heights = new Array(count).fill(0);
+	        for (let i = count - 1; i >= 1; i--) {
+	            const p = parents[i];
+	            if (heights[i] + 1 > heights[p])
+	                heights[p] = heights[i] + 1;
+	        }
+	        const order = [];
+	        for (let i = 1; i < count; i++)
+	            order.push(i);
+	        order.sort((a, b) => heights[a] - heights[b] || a - b);
+	        for (let k = 0; k < order.length; k++) {
 	            try {
-	                this.parent = null;
+	                disposeFinish(nodes[order[k]], childOptions, true);
 	            }
-	            catch { }
-	            try {
-	                this.motif.options = undefined;
+	            catch (error) {
+	                reportError('MJX107', error);
 	            }
-	            catch { }
-	            Object.entries(this).forEach(([key, value]) => {
-	                if (key === 'motif')
-	                    return;
+	        }
+	    }
+	    if (pending)
+	        return pending;
+	    if (!asChild && root.isDisposed) {
+	        return null;
+	    }
+	    disposeFinish(root, options, asChild);
+	    return null;
+	}
+	const BASE_PROTO = {
+	    _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 {
-	                    this[key] = null;
-	                    delete this[key];
+	                    c.element.removeEventListener(evt, rec.wrapped, cap);
 	                }
-	                catch {
+	                catch { }
+	                try {
+	                    if (rec.capture === undefined) {
+	                        c.element.removeEventListener(evt, rec.wrapped, !cap);
+	                    }
 	                }
+	                catch { }
+	            }
+	        }
+	        c._eventHandlers.clear();
+	        c._eventHandlers = undefined;
+	    },
+	    _deactivateBindings() {
+	        const c = this.owner;
+	        try {
+	            c.bindings?.deactivateAll();
+	        }
+	        catch { }
+	    },
+	    _activateBindings() {
+	        const c = this.owner;
+	        try {
+	            c.bindings?.activateAll();
+	        }
+	        catch { }
+	    },
+	    _reactivateBindings() {
+	        const c = this.owner;
+	        try {
+	            c.bindings?.reActivateAll();
+	        }
+	        catch { }
+	    },
+	    _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.isDisposed = true;
+	        }
+	        this.prebinding_Activated = true;
+	    },
+	    _detachDomWithAnimation() {
+	        detachDomWithAnimation(this.owner);
+	    },
+	    _detachDomWithAnimationAsync() {
+	        return detachDomWithAnimationAsync(this.owner);
+	    },
+	    _disposeShallow() {
+	        disposeShallow(this.owner);
+	    },
+	    _deepCleanup() {
+	        deepCleanup(this.owner);
+	    },
+	};
+	function createBaseCtx(owner) {
+	    const base = Object.create(BASE_PROTO);
+	    base.owner = owner;
+	    base.prebinding_Activated = false;
+	    base.emiters = new ComponentEmiter(owner);
+	    return base;
+	}
+	const fragmentCloseMarkers = new WeakMap();
+	const LIFECYCLE_X_EVENTS = new Set([
+	    'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
+	    'config', 'configured', 'visibilitychanged', 'activated', 'deactivated'
+	]);
+	const RAW_APPLICATION = Symbol('motif.rawApplication');
+	const SCOPED_SUBSCRIBERS = new Set(['on', 'onRouterChanged']);
+	/**
+	 * Uygulamanın bileşene bağlı görünümü. `on`/`onRouterChanged` aboneliklerini sahibin ömrüne
+	 * kaydeder; diğer tüm üyeler (alanlar, metotlar, atamalar) uygulamanın kendisine yönlenir.
+	 */
+	function createScopedContext(app, owner) {
+	    const cache = new Map();
+	    return new Proxy(app, {
+	        get(target, prop) {
+	            if (prop === RAW_APPLICATION) {
+	                return target;
+	            }
+	            const value = Reflect.get(target, prop, target);
+	            if (typeof value !== 'function') {
+	                return value;
+	            }
+	            const hit = cache.get(prop);
+	            if (hit && hit.fn === value) {
+	                return hit.bound;
+	            }
+	            const bound = SCOPED_SUBSCRIBERS.has(prop)
+	                ? (...args) => owner._trackContextSubscription(value.apply(target, args))
+	                : value.bind(target);
+	            cache.set(prop, { fn: value, bound });
+	            return bound;
 	        },
-	        emiters: new ComponentEmiter(this)
-	    };
+	        set(target, prop, value) {
+	            return Reflect.set(target, prop, value, target);
+	        },
+	    });
+	}
+	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;
+	    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';
+	    }
+	    _isInDom() {
+	        try {
+	            if (!this.element)
+	                return false;
+	            const node = this.element;
+	            if (node.nodeType === Node.COMMENT_NODE) {
+	                return !!node.parentNode;
+	            }
+	            return !!node.parentNode;
+	        }
+	        catch {
+	            return false;
+	        }
+	    }
+	    set isWait(value) {
+	        this._isWait = value;
+	        if (this.isBuilt) {
+	            if (value) {
+	                this.motif.hide();
+	            }
+	            else {
+	                this.motif.show();
+	            }
+	            return;
+	        }
+	        if (value === false && this.parent && this.parent.isBuilt) {
+	            ComponentHelper.internalBuild.call(this.parent, this);
+	        }
+	    }
+	    get isWait() {
+	        return this._isWait;
+	    }
+	    constructor(element, props = {}) {
+	        super();
+	        recordServiceOwner(this);
+	        if (this.onElementCreating) {
+	            this.element = this.onElementCreating.call(this);
+	        }
+	        else if (props?.onElementCreating) {
+	            this.element = props.onElementCreating.call(this);
+	        }
+	        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');
+	                }
+	            }
+	        }
+	        props && ParseProps(props, this);
+	        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;
+	            if (plain)
+	                applyPlainElementProps(props, this);
+	            else
+	                applyFallthroughProps(props, this);
+	        }
+	        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 });
+	        };
+	        ComponentHelper.callOnInitialized(this);
+	        const ctor = new.target;
+	        const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
+	        if (isBaseCtor) {
+	            ComponentHelper.callConfig(this);
+	        }
+	        else {
+	            this._base._configDeferred = true;
+	        }
+	    }
+	    childs;
+	    _base = createBaseCtx(this);
 	    parent = null;
 	    _scopedContext;
 	    get context() {
 	        const parentCtx = this.parent?.context;
-	        const app = parentCtx?.[RAW_APPLICATION] ?? parentCtx ?? Application.main;
+	        const app = parentCtx?.[RAW_APPLICATION] ?? parentCtx ?? teardownApplications.get(this) ?? Application.main;
 	        if (!app) {
 	            return app;
 	        }
@@ -5468,6 +5920,7 @@
 	        return () => { this._disposables.detach(d); off(); };
 	    }
 	    build(building = true) {
+	        checkReservedMembers(this);
 	        ComponentHelper.callConfigured(this);
 	        this._base._activatePreBindings();
 	        if (this.isDisposed || !this.element || this.isWait) {
@@ -5477,6 +5930,9 @@
 	            return;
 	        }
 	        ComponentHelper.callBuilding(this);
+	        if (this.isDisposed) {
+	            return;
+	        }
 	        var ph = this.element;
 	        if (building) {
 	            ph = dom.createDocumentFragment();
@@ -5491,9 +5947,15 @@
 	            return;
 	        }
 	        ComponentHelper.callInitializeComponent(this);
+	        if (this.isDisposed) {
+	            return;
+	        }
 	        if (this.view) {
 	            const templ = this.view();
 	            this.controls.add(templ);
+	            if (this.isDisposed) {
+	                return;
+	            }
 	        }
 	        const deferredSelectValue = this.element?.nodeName === 'SELECT'
 	            ? this.bindings.items.filter(b => b.propertyName === 'value')
@@ -5534,6 +5996,9 @@
 	                ComponentHelper.activateTree(element);
 	            }
 	        }
+	        if (this.isDisposed) {
+	            return;
+	        }
 	        if (wantsEnterTransition(this)) {
 	            const node = this.element;
 	            if (node && node.isConnected) {
@@ -5717,7 +6182,20 @@
 	        if (this.isVisible) {
 	            return;
 	        } /* A*/
-	        if (this.motif.options?.transition?.activeAnimations?.length) {
+	        if (this.parent && enterModeOf(this.parent) === 'out-in') {
+	            const showHost = (this.motif.options.placeholder?.parentNode)
+	                ?? findAppendableComponent(this.parent)?.element;
+	            const wait = pendingLeaves(showHost, this.element);
+	            if (wait) {
+	                const seq = this._base._showSeq = (this._base._showSeq ?? 0) + 1;
+	                return wait.then(() => {
+	                    if (this.isDisposed || this._base._showSeq !== seq)
+	                        return;
+	                    return this._show();
+	                });
+	            }
+	        }
+	        if (peekTransition(this)?.activeAnimations?.length) {
 	            safeCall(async () => {
 	                await Promise.all(this.motif.options.transition.activeAnimations.map(a => a.finished?.catch(() => { })));
 	            }, 'show.waitForLeaveAnimations');
@@ -5726,6 +6204,9 @@
 	        const strategy = this._computeHideStrategy();
 	        if (strategy === 'detach') {
 	            ComponentHelper.callVisibilityChanged(this);
+	            if (this.isDisposed) {
+	                return;
+	            }
 	            const needAttach = !this._isInDom() && this.parent && this.parent.isBuilt && !this.isWait;
 	            this.isVisible = true;
 	            if (needAttach) {
@@ -5748,6 +6229,9 @@
 	            /** A*/
 	            wantsEnterTransition(this) && this.motif.options.transition.enterTransition(() => { });
 	            ComponentHelper.callVisibilityChanged(this);
+	            if (this.isDisposed) {
+	                return;
+	            }
 	            if (this.element.nodeType === Node.COMMENT_NODE) {
 	                this.controls.forEach(c => {
 	                    c.motif.show();
@@ -5768,12 +6252,16 @@
 	        if (this.isDisposed || !this.element) {
 	            return;
 	        }
+	        this._base._showSeq = (this._base._showSeq ?? 0) + 1;
 	        if (!this.isVisible) {
 	            return;
 	        }
 	        const strategy = this._computeHideStrategy();
 	        if (strategy === 'detach') {
 	            ComponentHelper.callVisibilityChanged(this);
+	            if (this.isDisposed) {
+	                return;
+	            }
 	            await this._base._detachDomWithAnimationAsync();
 	            this.isVisible = false;
 	            ComponentHelper.deactivateTree(this);
@@ -5786,6 +6274,9 @@
 	                transition.skipNextLeave = false;
 	            const finish = () => {
 	                ComponentHelper.callVisibilityChanged(this);
+	                if (this.isDisposed) {
+	                    return;
+	                }
 	                if (this.element.nodeType === Node.COMMENT_NODE) {
 	                    this.controls.forEach(c => {
 	                        if (skip && c.isVisible && c.element && !c.isDisposed && c.motif.options?.transition) {
@@ -5904,7 +6395,7 @@
 	            if (mods.includes("stop")) {
 	                stop();
 	            }
-	            if (res === false || (res && res.cancel === true)) {
+	            if (res && res.cancel === true) {
 	                prevent();
 	                stop();
 	            }
@@ -5990,114 +6481,48 @@
 	        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();
-	        }
-	        if (!this._disposing) {
-	            retireServiceOwner(this);
-	        }
-	        return this._disposing ??= this._disposeCore(options);
-	    }
-	    async _disposeCore(options) {
-	        if (options?.skipLeaveTransition) {
-	            this.motif.options.transition.skipNextLeave = true;
-	        }
-	        safeCall(() => {
-	            ComponentHelper.callDisposing.call(this, this);
-	        }, 'dispose.callDisposing');
-	        // DOM dinleyicileri hemen sökülür, aşağıda isDisposed true olunca off() boşa döner,
-	        // element null'lanınca da _offAll dom'dan sökülemez — DOM'dan çıkmış öğeye sonradan gelen 
-	        this._base._offAll();
-	        this._base._deactivateBindings();
-	        safeCall(() => {
-	            this.parent?.controls?.silentDetach?.(this, true);
-	        }, 'dispose.silentDetach');
-	        this.motif.options.transition.skipNextLeave && await this.motif.stopAnimations();
-	        await this._base._detachDomWithAnimationAsync();
-	        if (this.constructor.name !== 'TransportTo') {
-	            await disposeContentBlocks(this);
-	        }
-	        await safeCallAsync(async () => {
-	            if (this.isDisposed) {
-	                return;
-	            }
-	            const ctrls = Array.from(this.controls.items);
-	            if (ctrls.length) {
-	                await Promise.all(ctrls.map(async (c) => {
-	                    try {
-	                        await c.disposeAsync({ deep: options?.deep });
-	                    }
-	                    catch (error) {
-	                        reportError('MJX107', error);
-	                    }
-	                }));
-	            }
-	        }, 'dispose.disposeAsync');
+	    _disposing;
+	    dispose(options = { deep: true }) {
 	        if (this.isDisposed) {
+	            return Promise.resolve();
+	        }
+	        if (this._disposing) {
+	            return this._disposing;
+	        }
+	        retireServiceOwner(this);
+	        this._disposing = DISPOSE_STARTED;
+	        return this._disposing = this._disposeCore(options, false);
+	    }
+	    async _disposeCore(options, asChild) {
+	        disposePrefix(this, options, asChild);
+	        let leave;
+	        if (!asChild && !peekTransition(this)?.skipNextLeave) {
+	            leave = this._base._detachDomWithAnimationAsync();
+	        }
+	        await undefined;
+	        if (contentBlocks.live === 0 && subtreeDisposesSync(this, true)) {
+	            const pending = disposeRemainderSync(this, options, asChild, leave !== undefined);
+	            if (pending) {
+	                await Promise.all(pending);
+	                if (!asChild && this.isDisposed) {
+	                    return;
+	                }
+	                disposeFinish(this, options, asChild);
+	            }
 	            return;
 	        }
-	        this.isDisposed = true;
-	        super.dispose();
-	        this.element = null;
-	        //if (options?.deep) {
-	        safeCall(() => {
-	            ComponentHelper.callDisposed.call(this, this);
-	        }, 'dispose.callDisposed');
-	        safeCall(() => { this._base.emiters.clear(); }, 'dispose.emiters');
-	        this._base._offAll();
-	        this._base._deepCleanup();
-	        // var k = Object.keys(this);
-	        // for (var i = 0; i < k.length; i++) {
-	        //         try {
-	        //         } catch {
+	        await disposeRemainderAsync(this, options, asChild, leave);
 	    }
 	    disposeAsync(options = { deep: true }) {
 	        if (this.isDisposed) {
 	            return Promise.resolve();
 	        }
-	        if (!this._disposing) {
-	            retireServiceOwner(this);
-	        }
-	        return this._disposing ??= this._disposeAsyncCore(options);
-	    }
-	    async _disposeAsyncCore(options) {
-	        safeCall(() => {
-	            ComponentHelper.callDisposing.call(this, this);
-	        }, 'disposeAsync.callDisposing');
-	        this._base._offAll();
-	        this._base._deactivateBindings();
-	        safeCall(() => {
-	            this.parent?.controls?.silentDetach?.(this, true);
-	        }, 'disposeAsync.silentDetach');
-	        await this.motif.stopAnimations();
-	        await this._base._detachDomWithAnimationAsync();
-	        await safeCallAsync(async () => {
-	            if (this.isDisposed) {
-	                return;
-	            }
-	            const ctrls = Array.from(this.controls.items);
-	            if (ctrls.length) {
-	                await Promise.all(ctrls.map(c => safeCallAsync(async () => {
-	                    await c.disposeAsync({ deep: options?.deep });
-	                }, 'disposeAsync.disposeAsyncChildren.handler')));
-	            }
-	        }, 'disposeAsync.disposeAsyncChildren');
-	        this.isDisposed = true;
-	        super.dispose();
-	        this.controls.items = [];
-	        safeCall(() => {
-	            ComponentHelper.callDisposed.call(this, this);
-	        }, 'disposeAsync.callDisposed');
-	        safeCall(() => { this._base.emiters.clear(); }, 'disposeAsync.emiters');
-	        if (options?.deep) {
-	            this._base._deepCleanup();
+	        if (this._disposing) {
+	            return this._disposing;
 	        }
-	        // var k = Object.keys(this);
-	        // for (var i = 0; i < k.length; i++) {
-	        //         try {
-	        //         } catch { }
+	        retireServiceOwner(this);
+	        this._disposing = DISPOSE_STARTED;
+	        return this._disposing = this._disposeCore(options, true);
 	    }
 	    async _clear() {
 	        if (this.isDisposed == true) {
@@ -6127,39 +6552,59 @@
 	            }
 	        });
 	    }
-	    siblings = {
-	        all: () => { return this.parent?.controls.items; },
-	        next: () => {
-	            if (!this.parent)
-	                return undefined;
-	            const idx = this.parent.controls.items.indexOf(this);
-	            return this.parent.controls.items[idx + 1];
-	        },
-	        prev: () => {
-	            if (!this.parent)
-	                return undefined;
-	            const idx = this.parent.controls.items.indexOf(this);
-	            return this.parent.controls.items[idx - 1];
-	        },
-	        nextAll: () => {
-	            if (!this.parent)
-	                return undefined;
-	            const idx = this.parent.controls.items.indexOf(this);
-	            return this.parent.controls.items.slice(idx + 1);
-	        },
-	        prevAll: () => {
-	            if (!this.parent)
-	                return undefined;
-	            const idx = this.parent.controls.items.indexOf(this);
-	            return this.parent.controls.items.slice(0, idx);
+	    _siblingsApi;
+	    _siblingsSet;
+	    get siblings() {
+	        if (this._siblingsSet) {
+	            return this._siblingsApi;
 	        }
-	    };
+	        if (this.isDisposed && !this.motif?.options) {
+	            return this._siblingsApi;
+	        }
+	        return this._siblingsApi ??= this._createSiblingsApi();
+	    }
+	    set siblings(value) {
+	        this._siblingsApi = value;
+	        this._siblingsSet = true;
+	    }
+	    _createSiblingsApi() {
+	        return {
+	            all: () => { return this.parent?.controls.items; },
+	            next: () => {
+	                if (!this.parent)
+	                    return undefined;
+	                const idx = this.parent.controls.items.indexOf(this);
+	                return this.parent.controls.items[idx + 1];
+	            },
+	            prev: () => {
+	                if (!this.parent)
+	                    return undefined;
+	                const idx = this.parent.controls.items.indexOf(this);
+	                return this.parent.controls.items[idx - 1];
+	            },
+	            nextAll: () => {
+	                if (!this.parent)
+	                    return undefined;
+	                const idx = this.parent.controls.items.indexOf(this);
+	                return this.parent.controls.items.slice(idx + 1);
+	            },
+	            prevAll: () => {
+	                if (!this.parent)
+	                    return undefined;
+	                const idx = this.parent.controls.items.indexOf(this);
+	                return this.parent.controls.items.slice(0, idx);
+	            }
+	        };
+	    }
 	    get serviceProvider() {
 	        let c = this;
 	        while (c) {
 	            const p = c.provider;
 	            if (p)
 	                return p;
+	            const recorded = teardownApplications.get(c);
+	            if (recorded)
+	                return recorded.state === 'disposed' ? null : recorded.provider;
 	            c = c.parent;
 	        }
 	        try {
@@ -6235,14 +6680,15 @@
 	        return result;
 	    }
 	    async _stopAnimations() {
+	        const t = peekTransition(this);
 	        try {
-	            this.motif.options?.transition?.activeCssCancel?.();
+	            t?.activeCssCancel?.();
 	        }
 	        catch { }
 	        try {
-	            if (this.motif.options?.transition?.activeAnimations?.length) {
+	            if (t?.activeAnimations?.length) {
 	                try {
-	                    await Promise.all(this.motif.options.transition.activeAnimations.map(a => a.finished?.catch(() => { })));
+	                    await Promise.all(t.activeAnimations.map(a => a.finished?.catch(() => { })));
 	                }
 	                catch { /* ignore */ }
 	            }
@@ -6251,7 +6697,8 @@
 	        }
 	        if (this.isDisposed)
 	            return;
-	        this.motif.options.transition.activeAnimations = [];
+	        if (t)
+	            t.activeAnimations = [];
 	    }
 	}
 	function findContentBlocks(root, results = []) {
@@ -6266,8 +6713,10 @@
 	    return results;
 	}
 	async function disposeContentBlocks(root) {
-	    const contentBlocks = findContentBlocks(root);
-	    return await Promise.all(contentBlocks.map(async (block) => {
+	    if (contentBlocks.live === 0)
+	        return;
+	    const contentBlocks$1 = findContentBlocks(root);
+	    return await Promise.all(contentBlocks$1.map(async (block) => {
 	        block.motif.options.transition.skipNextLeave = root.motif.options.transition.skipNextLeave;
 	        for (const element of block.controls.items) {
 	            element.motif.options.transition.skipNextLeave = block.motif.options.transition.skipNextLeave;
@@ -6322,7 +6771,7 @@
 	            runover.ref = component;
 	        }
 	    }
-	    return [].concat(...refs);
+	    return refs.length === 0 ? refs : [].concat(...refs);
 	}
 	const LIFECYCLE_HANDLER_LISTS = {
 	    'initializecomponent': '_initializeComponentHandlers',
@@ -6365,6 +6814,8 @@
 	            Object.assign(component.motif.options.props, props);
 	        }
 	        var keys = Object.keys(props);
+	        if (keys.length === 0)
+	            return;
 	        keys.forEach(key => {
 	            if (key == 'initializeComponent' || key == 'oninitializeComponent' || key.startsWith('on')) {
 	                if (collectLifecycleHandlers(component, key.toLowerCase(), props[key])) {
@@ -6435,7 +6886,18 @@
 	        if (typeof value.name === 'string' && value.name.length > 0) {
 	            transition.name = value.name;
 	        }
-	        transition.classes = value;
+	        if (!('mode' in value)) {
+	            transition.classes = value;
+	        }
+	        else {
+	            const { mode, ...classes } = value;
+	            if (isTransitionMode(mode)) {
+	                transition.mode = mode;
+	            }
+	            if (Object.keys(classes).length > 0) {
+	                transition.classes = classes;
+	            }
+	        }
 	    }
 	    else if (live) {
 	        transition.name = '';
@@ -6487,17 +6949,46 @@
 	    'ref', 'key', 'indexkey', 'inject', 'options', 'props', 'settings', 'isSvg',
 	    'childs', 'initializeComponent', 'runover', 'transition', 'preconfig', 'nodes', 'onElementCreating'
 	]);
+	const SPREAD_HTML_KEYS = new Set(['innerhtml', 'srcdoc']);
+	const SPREAD_URL_ATTRIBUTES = new Set(['href', 'src', 'action', 'formaction', 'xlink:href']);
+	const JAVASCRIPT_URL = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;
+	function isJavascriptUrl(value) {
+	    if (value === undefined || value === null || typeof value === 'boolean')
+	        return false;
+	    try {
+	        return JAVASCRIPT_URL.test(String(value));
+	    }
+	    catch {
+	        return false;
+	    }
+	}
+	function guardSpreadUrl(key, read) {
+	    return () => {
+	        let value = read();
+	        if (typeof value === 'function')
+	            value = value();
+	        if (typeof value === 'function')
+	            value = value();
+	        if (!isJavascriptUrl(value))
+	            return value;
+	        reportWarning('MJX125', [key]);
+	        return null;
+	    };
+	}
 	function applyPlainElementProps(props, component) {
 	    if (!props || typeof props !== 'object' || component.isDisposed)
 	        return;
-	    const attrs = {};
-	    const applied = appliedDomProps(component);
-	    for (const key of Object.keys(props)) {
+	    const keys = Object.keys(props);
+	    if (keys.length === 0)
+	        return;
+	    let attrs = null;
+	    let applied = null;
+	    for (const key of keys) {
 	        if (PLAIN_ELEMENT_SKIP.has(key))
 	            continue;
 	        if (key.startsWith('x-') || key.startsWith('x:') || key.startsWith('__'))
 	            continue;
-	        const v = props[key];
+	        let v = props[key];
 	        if (v === undefined)
 	            continue;
 	        if (/^on/i.test(key)) {
@@ -6507,7 +6998,21 @@
 	        }
 	        if (typeof v === 'function' && v.length > 0)
 	            continue;
-	        applied.set(key, v);
+	        const lowerKey = key.toLowerCase();
+	        if (SPREAD_HTML_KEYS.has(lowerKey)) {
+	            reportWarning('MJX124', [key]);
+	            continue;
+	        }
+	        if (SPREAD_URL_ATTRIBUTES.has(lowerKey)) {
+	            if (typeof v === 'function') {
+	                v = guardSpreadUrl(key, v);
+	            }
+	            else if (isJavascriptUrl(v)) {
+	                reportWarning('MJX125', [key]);
+	                continue;
+	            }
+	        }
+	        (applied ??= appliedDomProps(component)).set(key, v);
 	        if (key === 'class' || key === 'className') {
 	            component.class.add(v && typeof v === 'object' && !Array.isArray(v) ? [v] : v);
 	        }
@@ -6518,10 +7023,10 @@
 	            component.bindings.add(key, v);
 	        }
 	        else {
-	            attrs[key] = v;
+	            (attrs ??= {})[key] = v;
 	        }
 	    }
-	    if (Object.keys(attrs).length > 0)
+	    if (attrs)
 	        component.attr.add(attrs);
 	}
 	const _appliedDomProps = new WeakMap();
@@ -6541,8 +7046,8 @@
 	function applyFallthroughProps(props, component) {
 	    if (!props || typeof props !== 'object' || component.isDisposed)
 	        return;
-	    const applied = appliedDomProps(component);
-	    const subset = {};
+	    const applied = _appliedDomProps.get(component);
+	    let subset = null;
 	    for (const key of Object.keys(props)) {
 	        if (!isFallthroughKey(key))
 	            continue;
@@ -6551,11 +7056,11 @@
 	            continue;
 	        if (typeof v === 'function' && v.length > 0)
 	            continue;
-	        if (applied.has(key) && Object.is(applied.get(key), v))
+	        if (applied && applied.has(key) && Object.is(applied.get(key), v))
 	            continue;
-	        subset[key] = v;
+	        (subset ??= {})[key] = v;
 	    }
-	    if (Object.keys(subset).length > 0)
+	    if (subset)
 	        applyPlainElementProps(subset, component);
 	}
 	const componentMethods = {
@@ -6687,6 +7192,9 @@
 	        }
 	        if (elementOrParams instanceof Function) {
 	            elementOrParams = resolveComponent(elementOrParams, options);
+	            if (isOptionsObject(elementOrParams)) {
+	                return materializeOptionsObject(elementOrParams, options);
+	            }
 	        }
 	        if (Array.isArray(elementOrParams)) {
 	            const letter = CreateFragment();
@@ -6876,6 +7384,40 @@
 	    }
 	    return new Component(element, props);
 	}
+	function isOptionsObject(value) {
+	    return typeof value == "object" && value !== null && !(value instanceof ComponentBase) && 'el' in value;
+	}
+	function unwrapModule(result) {
+	    if (result && typeof result === "object" && !(result instanceof ComponentBase) && result.default != null) {
+	        return result.default;
+	    }
+	    return result;
+	}
+	function describeLoaded(value) {
+	    if (value === null)
+	        return 'null';
+	    if (Array.isArray(value))
+	        return 'array';
+	    if (typeof value === "object" && (Object.prototype.toString.call(value) === '[object Module]' || value.__esModule))
+	        return 'module';
+	    return typeof value;
+	}
+	function assertLoadedComponent(value) {
+	    if (value === null || typeof value !== "object")
+	        return;
+	    if (value instanceof ComponentBase || Array.isArray(value) || value instanceof Node)
+	        return;
+	    if (typeof value.then === "function")
+	        return;
+	    throw motifError('MJX127', describeLoaded(value));
+	}
+	function resolveToComponent(input, props) {
+	    const resolved = resolveComponent(input, props);
+	    if (isOptionsObject(resolved)) {
+	        return materializeOptionsObject(resolved, undefined);
+	    }
+	    return resolved;
+	}
 	function materializeOptionsObject(spec, props) {
 	    const result = motifComponent(spec.el, props);
 	    Object.getOwnPropertyNames(spec).forEach(key => {
@@ -7074,7 +7616,6 @@
 	}
 
 	// import { dom } from "../browser";
-	// import { effect } from "../store";
 	class ControlCollection {
 	    owner;
 	    constructor(owner) {
@@ -7082,9 +7623,16 @@
 	    }
 	    items = [];
 	    add() {
-	        const args = Array.from(arguments);
-	        if (args.length === 0)
+	        const count = arguments.length;
+	        if (count === 0)
 	            return [];
+	        const first = arguments[0];
+	        if (count === 1 && first instanceof ComponentBase) {
+	            if (first.isDisposed)
+	                return [];
+	            return [this._insertOne(undefined, first)];
+	        }
+	        const args = Array.from(arguments);
 	        if (typeof args[0] === 'number' && args.length > 1) {
 	            const index = args[0];
 	            const children = [].concat(...args.slice(1));
@@ -7097,42 +7645,44 @@
 	    }
 	    insert(index, ...controls) {
 	        const flat = [].concat(...controls);
-	        return flat.filter(x => x != undefined && !x.isDisposed).map(control => {
-	            control = resolveComponent(control);
-	            if (typeof control == 'string' || typeof control == 'number' || typeof control == 'boolean' || typeof control == 'bigint') {
-	                control = new Component(dom.createTextNode(control), null);
-	            }
-	            if (control.parent) {
-	                control.parent.controls.detach(control);
-	            }
-	            if (index != undefined && index >= 0) {
-	                this.items.splice(index, 0, control);
-	            }
-	            else {
-	                this.items.push(control);
-	            }
-	            control.parent = this.owner;
-	            const pendingLeave = control.__pendingLeave;
-	            if (pendingLeave) {
-	                if (this.onAddBeforeBuild && !this.owner.isBuilt) {
-	                    this.onAddBeforeBuild(control);
-	                }
-	                pendingLeave.promise.then(() => {
-	                    if (control.isDisposed || this.owner.isDisposed || control.parent !== this.owner)
-	                        return;
-	                    if (this.onAdd && this.owner.isBuilt)
-	                        this.onAdd(control);
-	                });
-	                return control;
-	            }
-	            if (this.onAdd && this.owner.isBuilt) {
-	                this.onAdd(control);
-	            }
+	        return flat.filter(x => x != undefined && !x.isDisposed).map(control => this._insertOne(index, control));
+	    }
+	    _insertOne(index, control) {
+	        control = resolveComponent(control);
+	        if (typeof control == 'string' || typeof control == 'number' || typeof control == 'boolean' || typeof control == 'bigint') {
+	            control = new Component(dom.createTextNode(control), null);
+	        }
+	        checkReservedMembers(control);
+	        if (control.parent) {
+	            control.parent.controls.detach(control);
+	        }
+	        if (index != undefined && index >= 0) {
+	            this.items.splice(index, 0, control);
+	        }
+	        else {
+	            this.items.push(control);
+	        }
+	        control.parent = this.owner;
+	        const pendingLeave = control.__pendingLeave;
+	        if (pendingLeave) {
 	            if (this.onAddBeforeBuild && !this.owner.isBuilt) {
 	                this.onAddBeforeBuild(control);
 	            }
+	            pendingLeave.promise.then(() => {
+	                if (control.isDisposed || this.owner.isDisposed || control.parent !== this.owner)
+	                    return;
+	                if (this.onAdd && this.owner.isBuilt)
+	                    this.onAdd(control);
+	            });
 	            return control;
-	        });
+	        }
+	        if (this.onAdd && this.owner.isBuilt) {
+	            this.onAdd(control);
+	        }
+	        if (this.onAddBeforeBuild && !this.owner.isBuilt) {
+	            this.onAddBeforeBuild(control);
+	        }
+	        return control;
 	    }
 	    remove(control) {
 	        var index = this.items.indexOf(control);
@@ -7151,6 +7701,7 @@
 	        this.items.splice(index, 1);
 	        if (control.isDisposed)
 	            return Promise.resolve();
+	        control._base && (control._base._leaveContainer = this.owner);
 	        control.parent = null;
 	        return runLeaveThenDetach(control, () => { if (this.onRemove)
 	            this.onRemove(control); });
@@ -7180,6 +7731,7 @@
 	        if (index === -1)
 	            return;
 	        this.items.splice(index, 1);
+	        control._base && (control._base._leaveContainer = this.owner);
 	        control.parent = null;
 	    }
 	    async clearAsync() {
@@ -7442,7 +7994,12 @@
 	            arrive();
 	        };
 	        try {
-	            c.motif.options.transition.leaveTransition(once);
+	            const opts = c.motif.options;
+	            if (!opts[TRANSITION_SLOT] && !opts.transitionOut) {
+	                once();
+	                return;
+	            }
+	            opts.transition.leaveTransition(once);
 	        }
 	        catch {
 	            once();
@@ -7467,10 +8024,7 @@
 	    return { count: 0, delayMs: 0, whenOnline: false };
 	}
 	function defaultMapper(result) {
-	    if (result && typeof result === "object" && typeof result.default === "function") {
-	        return result.default;
-	    }
-	    return result;
+	    return unwrapModule(result);
 	}
 	function Lazy(props) {
 	    const opts = (props && props.options) || {};
@@ -7499,7 +8053,7 @@
 	    catch { }
 	    const initial = opts.Placeholderview ?? opts.Loaderview;
 	    if (initial != null) {
-	        frame.navigate(resolveComponent(initial));
+	        frame.navigate(resolveToComponent(initial));
 	    }
 	    const attemptLoad = () => {
 	        if (!opts.timeoutMs && !opts.signal) {
@@ -7625,6 +8179,36 @@
 	    };
 	    const loadPromise = retry.count > 0 ? loadWithRetry() : attemptLoad();
 	    const startTs = Date.now();
+	    const fail = (err) => {
+	        try {
+	            opts.onError?.(err);
+	        }
+	        catch { /* swallow */ }
+	        if (opts.signal?.aborted)
+	            return;
+	        if (opts.Fallbackview != null) {
+	            frame.navigate(resolveToComponent(opts.Fallbackview));
+	        }
+	        else {
+	            reportError('MJX126', err);
+	            try {
+	                frame.motif.clear().catch(() => { });
+	            }
+	            catch { }
+	        }
+	    };
+	    const place = (target) => {
+	        let component;
+	        try {
+	            component = resolveToComponent(target);
+	            assertLoadedComponent(component);
+	        }
+	        catch (err) {
+	            fail(err);
+	            return;
+	        }
+	        frame.navigate(component);
+	    };
 	    loadPromise
 	        .then((result) => {
 	        if (opts.signal?.aborted) {
@@ -7638,7 +8222,7 @@
 	        if (remaining > 0) {
 	            const id = trackTimer(setTimeout(() => {
 	                if (!opts.signal?.aborted) {
-	                    frame.navigate(resolveComponent(target));
+	                    place(target);
 	                }
 	            }, remaining));
 	            if (opts.signal) {
@@ -7654,30 +8238,27 @@
 	            }
 	        }
 	        else {
-	            frame.navigate(resolveComponent(target));
+	            place(target);
 	        }
 	    })
-	        .catch((err) => {
-	        try {
-	            opts.onError?.(err);
-	        }
-	        catch { /* swallow */ }
-	        if (opts.signal?.aborted)
-	            return;
-	        if (opts.Fallbackview != null) {
-	            frame.navigate(resolveComponent(opts.Fallbackview));
-	        }
-	        else {
-	            errorHandler.reportSuppressed('Lazy.load (no Fallbackview)', err);
-	            try {
-	                frame.motif.clear().catch(() => { });
-	            }
-	            catch { }
-	        }
-	    });
+	        .catch(fail);
 	    return frame;
 	}
 
+	function hasOwnTransition(component, phase) {
+	    const options = component?.motif?.options;
+	    if (!options)
+	        return false;
+	    const transition = options.transition;
+	    return !!((phase === 'enter' ? options.transitionIn : options.transitionOut) || (transition && (transition.classes || (transition.name && transition.name.length > 0))));
+	}
+	function playsLeave(target) {
+	    if (!target)
+	        return false;
+	    if (Array.isArray(target))
+	        return target.some(t => !!t && !t.isDisposed && hasOwnTransition(t, 'leave'));
+	    return !target.isDisposed && hasOwnTransition(target, 'leave');
+	}
 	function cancelAnimationsDeep(target) {
 	    if (!target || target.isDisposed)
 	        return;
@@ -7713,26 +8294,20 @@
 	    }
 	    catch { }
 	}
-	async function disposeNavigationTarget(target) {
+	async function disposeNavigationTarget(target, options = { deep: true }) {
 	    if (!target)
 	        return;
-	    if (Array.isArray(target)) {
-	        for (const xr of target) {
-	            try {
-	                if (xr && !xr.isDisposed) {
-	                    await xr.dispose({ deep: true, skipLeaveTransition: true });
-	                }
-	            }
-	            catch (err) {
-	                reportError('MJX115', err);
-	            }
+	    const list = Array.isArray(target) ? target : [target];
+	    await Promise.all(list.map(async (xr) => {
+	        if (!xr || xr.isDisposed)
+	            return;
+	        try {
+	            await xr.dispose(options);
 	        }
-	    }
-	    else {
-	        if (!target.isDisposed) {
-	            await target.dispose({ deep: true, skipLeaveTransition: true });
+	        catch (err) {
+	            reportError('MJX115', err);
 	        }
-	    }
+	    }));
 	}
 	async function navigateHost(host, page, keepOldControl = false) {
 	    if (host.isDisposed || page == null)
@@ -7786,10 +8361,14 @@
 	            if (oldPage && !keepOldControl) {
 	                cancelAnimationsDeep(oldPage);
 	                cancelAnimationsDeep(host);
-	                try {
-	                    await disposeNavigationTarget(oldPage);
+	                const animated = playsLeave(oldPage);
+	                const leaving = disposeNavigationTarget(oldPage);
+	                if (animated) {
+	                    leaving.catch(() => { });
+	                }
+	                else {
+	                    await leaving;
 	                }
-	                catch { }
 	            }
 	            try {
 	                if (page instanceof Promise) {
@@ -7825,9 +8404,9 @@
 	            this.controls.add(props.childs);
 	        }
 	    }
-	    async dispose() {
-	        await disposeNavigationTarget(this.current);
-	        await super.dispose();
+	    async dispose(options = { deep: true }) {
+	        await disposeNavigationTarget(this.current, options);
+	        await super.dispose(options);
 	    }
 	    async flush() {
 	        await disposeNavigationTarget(this.current);
@@ -7867,20 +8446,16 @@
 	        // } else {
 	        //         var cb = ContentBodyCollectionHandable.get(props.target);
 	        //         if (cb) {
-	        this.controls.onAdd = (control) => {
-	            var cb = ContentBodyCollectionHandable.get(this.props.target);
-	            if (cb) {
-	                control.motif.options["ownerContentBlock"] = this;
-	                cb.controls.add(control);
-	            }
-	        };
-	        this.controls.onAddBeforeBuild = (control) => {
+	        const forward = (control) => {
+	            this.motif.trigger('controladded', { control });
 	            var cb = ContentBodyCollectionHandable.get(this.props.target);
 	            if (cb) {
 	                control.motif.options["ownerContentBlock"] = this;
 	                cb.controls.add(control);
 	            }
 	        };
+	        this.controls.onAdd = forward;
+	        this.controls.onAddBeforeBuild = forward;
 	        if (this.childs) {
 	            this.controls.add(...this.childs);
 	        }
@@ -7924,7 +8499,9 @@
 	        this.context.fire(changeBodyCollectionHandler);
 	    }
 	    ondisposing(sender) {
-	        ContentBodyCollectionHandable.delete(this.props.name);
+	        if (ContentBodyCollectionHandable.get(this.props.name) === this) {
+	            ContentBodyCollectionHandable.delete(this.props.name);
+	        }
 	    }
 	}
 
@@ -7956,7 +8533,7 @@
 	    initializeComponent(sender) {
 	        TransportRegistry.registerSlot(this.props.name, this);
 	        this.onDisposing = () => {
-	            (this.controls.items || []).forEach(child => {
+	            [...(this.controls.items || [])].forEach(child => {
 	                this.controls.remove(child);
 	                child.dispose?.();
 	            });
@@ -7964,7 +8541,7 @@
 	        };
 	    }
 	    clearSlot() {
-	        (this.controls.items || []).forEach(child => {
+	        [...(this.controls.items || [])].forEach(child => {
 	            this.controls.remove(child);
 	            child.dispose?.();
 	        });
@@ -7978,7 +8555,7 @@
 	        if (child.parent === newParent && newParent.controls.items.includes(child))
 	            return;
 	        if (child.parent && child.parent !== newParent) {
-	            child.parent.controls.remove(child);
+	            child.parent.controls.silentDetach(child, true);
 	        }
 	        if (options.owner) {
 	            child.motif.options.ownerTransporter = options.owner;
@@ -8041,8 +8618,11 @@
 	    _slotRegisteredListener;
 	    _slotUnregisteredListener;
 	    _transported = [];
+	    _countedLive = false;
 	    constructor(props) {
 	        super('div', props);
+	        contentBlocks.live++;
+	        this._countedLive = true;
 	    }
 	    _handleSlotChange = (eventArgs) => {
 	        if (eventArgs.name === this.props.name) {
@@ -8052,9 +8632,17 @@
 	            }
 	            const all = [...(this.childs || []), ...this.controls.items];
 	            Transporter.transportMany(all, slot);
-	            this._transported = all;
+	            this._rememberTransported(all);
 	        }
 	    };
+	    _rememberTransported(children) {
+	        const kept = this._transported.filter(c => !c.isDisposed);
+	        for (const child of children) {
+	            if (!kept.includes(child))
+	                kept.push(child);
+	        }
+	        this._transported = kept;
+	    }
 	    _clearChildrenFromSlot = (slot) => {
 	        (this.childs || []).forEach(child => {
 	            slot.controls.remove(child);
@@ -8073,7 +8661,7 @@
 	            }
 	            const all = [...(this.childs || []), ...this.controls.items];
 	            Transporter.transportMany(all, slot);
-	            this._transported = all;
+	            this._rememberTransported(all);
 	        }
 	        this._slotRegisteredListener = Application.main.on(SLOT_REGISTERED_EVENT, this._handleSlotChange);
 	        this._slotUnregisteredListener = Application.main.on(SLOT_UNREGISTERED_EVENT, (eventArgs) => {
@@ -8082,9 +8670,11 @@
 	            }
 	        });
 	        this._onAddRef = (child) => {
+	            this.motif.trigger('controladded', { control: child });
 	            const currentSlot = TransportRegistry.getSlot(this.props.name);
 	            if (currentSlot) {
 	                Transporter.transport(child, currentSlot);
+	                this._rememberTransported([child]);
 	            }
 	        };
 	        this._onRemoveRef = (child) => {
@@ -8092,17 +8682,20 @@
 	            if (currentSlot) {
 	                currentSlot.controls.remove(child);
 	            }
+	            this._transported = this._transported.filter(c => c !== child);
 	        };
 	        this.controls.onAdd = this._onAddRef;
 	        this.controls.onRemove = this._onRemoveRef;
 	    }
 	    onDisposing(sender, e) {
+	        if (this._countedLive) {
+	            this._countedLive = false;
+	            contentBlocks.live--;
+	        }
 	        const currentSlot = TransportRegistry.getSlot(this.props.name);
-	        if (currentSlot) {
-	            (this._transported || []).forEach(child => {
-	                currentSlot.controls.remove(child);
-	                child.dispose();
-	            });
+	        for (const child of this._transported || []) {
+	            currentSlot?.controls.remove(child);
+	            child.dispose();
 	        }
 	        if (this._slotRegisteredListener) {
 	            Application.main.off(SLOT_REGISTERED_EVENT, this._handleSlotChange);
@@ -8125,14 +8718,14 @@
 	const ARRAY_MUTATORS = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort']);
 	const NOT_META = Symbol('');
 	const metaReaders = new Map([
-	    ["[__isReactive__]" /* Flags.IS_REACTIVE */, () => true],
-	    ["[__isReadonly__]" /* Flags.IS_READONLY */, engine => engine.isReadonly],
-	    ["[__issuperficial__]" /* Flags.IS_SUPERFICIAL */, engine => engine.superficial],
-	    ["[__get_setup__]" /* Flags.GET_SETUP */, (_engine, target) => target],
-	    ["[__raw__]" /* Flags.RAW */, (engine, target, receiver) => engine.ReactiveMap().get(target) === receiver ? target : NOT_META],
+	    [Flags.IS_REACTIVE, () => true],
+	    [Flags.IS_READONLY, engine => engine.isReadonly],
+	    [Flags.IS_SUPERFICIAL, engine => engine.superficial],
+	    [Flags.GET_SETUP, (_engine, target) => target],
+	    [Flags.RAW, (engine, target, receiver) => engine.ReactiveMap().get(target) === receiver ? target : NOT_META],
 	]);
 	function readMeta(engine, target, key, receiver) {
-	    if (typeof key !== 'string' || key.charCodeAt(0) !== 91)
+	    if (typeof key !== 'symbol')
 	        return NOT_META;
 	    const reader = metaReaders.get(key);
 	    return reader === undefined ? NOT_META : reader(engine, target, receiver);
@@ -8313,6 +8906,144 @@
 	    }
 	}
 
+	const KEYS_KEY = Symbol('');
+	function changed(target, key, keysChanged) {
+	    trigger(target, key);
+	    trigger(target, ITERATE_KEY);
+	    if (keysChanged)
+	        trigger(target, KEYS_KEY);
+	}
+	function lookupKey(target, key) {
+	    return target.has(key) ? key : getRaw(key);
+	}
+	function wrapIterator(source, convert) {
+	    return {
+	        next() {
+	            const step = source.next();
+	            return step.done ? step : { value: convert(step.value), done: false };
+	        },
+	        [Symbol.iterator]() {
+	            return this;
+	        },
+	    };
+	}
+	function createCollectionMethods(engine) {
+	    const wrap = (value) => isObject(value) ? engine.reactive(value) : value;
+	    const wrapEntry = (target) => target instanceof Map
+	        ? ([key, value]) => [key, wrap(value)]
+	        : ([value]) => { const item = wrap(value); return [item, item]; };
+	    return {
+	        get(key) {
+	            const target = getRaw(this);
+	            const found = lookupKey(target, key);
+	            track(target, found);
+	            return wrap(target.get(found));
+	        },
+	        has(key) {
+	            const target = getRaw(this);
+	            const found = lookupKey(target, key);
+	            track(target, found);
+	            return target.has(found);
+	        },
+	        set(key, value) {
+	            const target = getRaw(this);
+	            const stored = lookupKey(target, key);
+	            const raw = getRaw(value);
+	            const existed = target.has(stored);
+	            const previous = target.get(stored);
+	            target.set(stored, raw);
+	            if (!existed)
+	                changed(target, stored, true);
+	            else if (!Object.is(previous, raw))
+	                changed(target, stored, false);
+	            return this;
+	        },
+	        add(value) {
+	            const target = getRaw(this);
+	            const stored = lookupKey(target, value);
+	            if (!target.has(stored)) {
+	                target.add(stored);
+	                changed(target, stored, true);
+	            }
+	            return this;
+	        },
+	        delete(key) {
+	            const target = getRaw(this);
+	            const found = lookupKey(target, key);
+	            const removed = target.delete(found);
+	            if (removed)
+	                changed(target, found, true);
+	            return removed;
+	        },
+	        clear() {
+	            const target = getRaw(this);
+	            if (target.size === 0)
+	                return;
+	            const keys = Array.from(target.keys());
+	            target.clear();
+	            for (const key of keys)
+	                trigger(target, key);
+	            trigger(target, ITERATE_KEY);
+	            trigger(target, KEYS_KEY);
+	        },
+	        forEach(callback, thisArg) {
+	            const target = getRaw(this);
+	            track(target, ITERATE_KEY);
+	            const owner = this;
+	            const isMap = target instanceof Map;
+	            target.forEach((value, key) => {
+	                const item = wrap(value);
+	                callback.call(thisArg, item, isMap ? key : item, owner);
+	            });
+	        },
+	        keys() {
+	            const target = getRaw(this);
+	            if (target instanceof Map) {
+	                track(target, KEYS_KEY);
+	                return target.keys();
+	            }
+	            track(target, ITERATE_KEY);
+	            return wrapIterator(target.keys(), wrap);
+	        },
+	        values() {
+	            const target = getRaw(this);
+	            track(target, ITERATE_KEY);
+	            return wrapIterator(target.values(), wrap);
+	        },
+	        entries() {
+	            const target = getRaw(this);
+	            track(target, ITERATE_KEY);
+	            return wrapIterator(target.entries(), wrapEntry(target));
+	        },
+	        [Symbol.iterator]() {
+	            const target = getRaw(this);
+	            track(target, ITERATE_KEY);
+	            return target instanceof Map
+	                ? wrapIterator(target.entries(), wrapEntry(target))
+	                : wrapIterator(target.values(), wrap);
+	        },
+	    };
+	}
+	function createCollectionHandler(engine) {
+	    const methods = createCollectionMethods(engine);
+	    return {
+	        get(target, key, receiver) {
+	            const meta = readMeta(engine, target, key, receiver);
+	            if (meta !== NOT_META)
+	                return meta;
+	            if (key === 'size') {
+	                track(target, ITERATE_KEY);
+	                return target.size;
+	            }
+	            if ((typeof key === 'string' || key === Symbol.iterator) && hasOwn(methods, key) && key in target) {
+	                return methods[key];
+	            }
+	            const value = Reflect.get(target, key, target);
+	            return typeof value === 'function' ? value.bind(target) : value;
+	        },
+	    };
+	}
+
 	const ReactiveEngineMapper = new WeakSet();
 	const AllreactiveMap = new WeakMap();
 	function armgetter() { return AllreactiveMap; }
@@ -8351,12 +9082,13 @@
 	        deleteProperty: createDelete(),
 	        ownKeys: createOwn()
 	    };
+	    collectionHandler = createCollectionHandler(this);
 	    reactive(model) {
 	        if (!isObject(model)) {
 	            model = { value: model };
 	        }
 	        const targetType = getTargetType(model);
-	        if (targetType === 0 /* TargetType.SYSTEM */ || targetType === 2 /* TargetType.COLLECTION */ || 0 /* TargetType.INVALID */) {
+	        if (targetType === 0 /* TargetType.SYSTEM */ || 0 /* TargetType.INVALID */) {
 	            return model;
 	        }
 	        let existingProxy = AllreactiveMap.get(model);
@@ -8368,7 +9100,12 @@
 	            return existingProxy;
 	        }
 	        // if (targetType === TargetType.INVALID) {
-	        if (Array.isArray(model)) {
+	        if (targetType === 2 /* TargetType.COLLECTION */) {
+	            var proxy = new Proxy(model, this.collectionHandler);
+	            AllreactiveMap.set(model, proxy);
+	            return proxy;
+	        }
+	        else if (Array.isArray(model)) {
 	            var proxy = new Proxy(model, this.arrayHandler);
 	            // var original = Object.getPrototypeOf(proxy);
 	            // original["copy"] = () => { return model; }
@@ -9410,12 +10147,12 @@
 	function toggle(force) {
 	    if (!overlayHost)
 	        return;
-	    visible = typeof force === 'boolean' ? force : !visible;
+	    visible = !visible;
 	    overlayHost.style.display = visible ? 'block' : 'none';
 	}
 	function initOverlayIfEnabled() {
 	    ensureDevtoolsFlagInitialized();
-	    if (!isEnabled())
+	    if (!isRequestedByFlag())
 	        return;
 	    try {
 	        if (!overlayHost) {
@@ -9433,9 +10170,6 @@
 	            });
 	            on((ev) => { if (ev.type === 'warning' && visible)
 	                render(); });
-	            const qs = location.search || '';
-	            if (Application.main.isDevelopmentModeEnabled)
-	                toggle(true);
 	        }
 	    }
 	    catch { }
@@ -9793,13 +10527,6 @@
 	const SLIDE_OFFSET = 30;
 	const EASING = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
 	const isElement = (node) => !!node && node.nodeType === 1 && !!node.style;
-	function hasOwnTransition(component, phase) {
-	    const options = component?.motif?.options;
-	    if (!options)
-	        return false;
-	    const transition = options.transition;
-	    return !!((phase === 'enter' ? options.transitionIn : options.transitionOut) || (transition && (transition.classes || (transition.name && transition.name.length > 0))));
-	}
 	function markDirection(component, direction) {
 	    const el = component?.element;
 	    if (!component || component.isDisposed || !isElement(el))
@@ -10182,7 +10909,7 @@
 	        if (!top || top.isDisposed)
 	            return;
 	        try {
-	            await disposeNavigationTarget(top);
+	            await disposeNavigationTarget(top, { deep: true, skipLeaveTransition: true });
 	        }
 	        catch (error) {
 	            reportError('MJX307', error);
@@ -11367,18 +12094,16 @@
 	        }
 	        let val = control;
 	        if (val instanceof Promise) {
-	            val = await val.then((result) => {
-	                return result.default ? result.default : result;
-	            });
+	            val = unwrapModule(await val);
 	        }
 	        instance = this._construct(scope, route, () => this._resolveFrom(scope, val));
 	        if (instance) {
 	            return instance;
 	        }
 	        if (typeof val === 'function') {
-	            return this.parseControl(this._construct(scope, route, () => resolveComponent(val, this.application)), scope, route);
+	            return this.parseControl(this._construct(scope, route, () => resolveToComponent(val, this.application)), scope, route);
 	        }
-	        return val;
+	        return resolveToComponent(val);
 	    }
 	    _resolveFrom(scope, token) {
 	        const provider = scope ?? this._rootProvider();
@@ -11399,6 +12124,7 @@
 	    }
 	    async _instanceCreator(control, scope, route) {
 	        let val = await this.parseControl(control, scope, route);
+	        assertLoadedComponent(val);
 	        // if (val instanceof Promise) {
 	        //         return result.default ? result.default : result;
 	        // if (typeof val === 'function') {
@@ -12435,10 +13161,11 @@
 	        catch { }
 	        this._scroll = null;
 	        this._historyStamp = null;
+	        let done = Promise.resolve();
 	        try {
 	            // keepAlive önbelleğindeki örnekleri bırak
 	            try {
-	                void this.routingEngine.dispose();
+	                done = this.routingEngine.dispose();
 	            }
 	            catch { }
 	            if (this._navHandler) {
@@ -12458,6 +13185,7 @@
 	            }
 	        }
 	        catch { }
+	        return done;
 	    }
 	}
 
@@ -12543,7 +13271,7 @@
 	class ApplicationBuilder {
 	    services = new ServiceCollection();
 	    constructor() {
-	        if (_globalApplication || startedApplicationBuilder) {
+	        if ((_globalApplication && _globalApplication.state !== 'disposing') || startedApplicationBuilder) {
 	            throw new MotifError('MJX405', formatMotifMessage('MJX405'), { cause: _globalApplication });
 	        }
 	        startedApplicationBuilder = true;
@@ -12576,6 +13304,12 @@
 	    constructor(provider) {
 	        this.provider = provider;
 	    }
+	    static _disposingCount = 0;
+	    _state = 'initializing';
+	    _disposing;
+	    get state() {
+	        return this._state;
+	    }
 	    _middlewares = [];
 	    _beforeEachGuards = [];
 	    _routerState = new RouterState();
@@ -12602,9 +13336,11 @@
 	            target = host;
 	        }
 	        let rootInstance = appRoot;
+	        this._state = 'running';
 	        const AppShell = new Component(target);
 	        this.appShell = AppShell;
 	        safeCallSilent(() => {
+	            AppShell._keepElementOnDispose = true;
 	            AppShell.application = this;
 	            AppShell.provider = this.provider;
 	        }, 'Application.run.setupAppShell');
@@ -12639,10 +13375,14 @@
 	        this.appShell.element?.appendChild(component);
 	    }
 	    dispose() {
+	        if (this._disposing)
+	            return this._disposing;
+	        this._state = 'disposing';
+	        Application._disposingCount++;
 	        startedApplicationBuilder = false;
+	        let routerDone;
 	        safeCallSilent(() => { this._removeLifecycleListeners(); }, 'Application.dispose.lifecycle');
-	        safeCallSilent(() => { this.urlRoutingModule?.dispose?.(); }, 'Application.dispose.router');
-	        safeCallSilent(() => { this.provider.dispose(); }, 'Application.dispose.preDispose');
+	        safeCallSilent(() => { routerDone = this.urlRoutingModule?.dispose?.(); }, 'Application.dispose.router');
 	        safeCallSilent(() => { engine.stopGc(); }, 'Application.dispose.gcStop');
 	        safeCallSilent(() => {
 	            try {
@@ -12654,7 +13394,37 @@
 	            }
 	            catch { /* ignore */ }
 	        }, 'Application.dispose.resetUrl');
-	        _globalApplication = null;
+	        transitionSettings.mode = 'concurrent';
+	        const shell = this.appShell;
+	        return this._disposing = (async () => {
+	            try {
+	                await routerDone;
+	            }
+	            catch (error) {
+	                reportError('MJX307', error);
+	            }
+	            if (shell && !shell.isDisposed) {
+	                try {
+	                    await shell.dispose();
+	                }
+	                catch (error) {
+	                    reportError('MJX307', error);
+	                }
+	            }
+	            try {
+	                await this.provider.dispose();
+	            }
+	            catch { }
+	            if (_globalApplication === this)
+	                _globalApplication = null;
+	            this._state = 'disposed';
+	            Application._disposingCount--;
+	        })();
+	    }
+	    useTransitions(options) {
+	        if (isTransitionMode(options?.mode))
+	            transitionSettings.mode = options.mode;
+	        return this;
 	    }
 	    use(callback) {
 	        this._middlewares.push(callback);
@@ -12871,6 +13641,7 @@
 	        this._isDevelopment = isDev;
 	        errorHandler.setDevelopmentMode(isDev);
 	        safeCallSilent(() => { globalThis.__MOTIF_DEV__ = isDev; }, 'Application.useDevelopment.flag');
+	        safeCallSilent(() => { setDevtoolsEnabled(isDev); }, 'Application.useDevelopment.devtools');
 	        if (isDev)
 	            flushCompilerContractWarnings();
 	        return this;
@@ -13111,7 +13882,7 @@
 	        super();
 	        this.tokensPerInterval = opts.tokensPerInterval ?? 1;
 	        this.intervalMs = opts.intervalMs ?? 1000;
-	        this.capacity = opts.capacity ?? 1000;
+	        this.capacity = opts.capacity ?? this.tokensPerInterval;
 	        this.tokens = this.capacity;
 	        this.lastRefill = Date.now();
 	    }