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

package/dist/chunks/{core-vVL0WG0n.esm.js → core-W7wNt8bq.esm.js}

@@ -2,10 +2,12 @@ function rethrowLater(error) {
     setTimeout(() => { throw error; }, 0);
 }
 class ErrorHandler {
-    unexpectedErrorHandler = rethrowLater;
-    listeners = [];
-    _isDevelopment = false;
-    _enableConsoleLogging = true;
+    constructor() {
+        this.unexpectedErrorHandler = rethrowLater;
+        this.listeners = [];
+        this._isDevelopment = false;
+        this._enableConsoleLogging = true;
+    }
     setDevelopmentMode(isDev) {
         this._isDevelopment = isDev;
     }
@@ -346,7 +348,6 @@ const motifMessages = {
     MJX611: () => `The devtools panel failed to load.`,
 };
 class MotifError extends Error {
-    code;
     constructor(code, message, options) {
         super(message, options);
         this.name = 'MotifError';
@@ -378,7 +379,9 @@ function reportWarning(code, args, details) {
 }
 
 class DisposableCore {
-    disposableTracker = null;
+    constructor() {
+        this.disposableTracker = null;
+    }
     notifyCreated(target) {
         this.disposableTracker?.trackDisposable(target);
         return target;
@@ -407,9 +410,8 @@ class DisposableCore {
 const disposableCore = new DisposableCore();
 
 class DisposableStore {
-    _items = new Set();
-    _closed = false;
     constructor() {
+        this._closed = false;
         disposableCore.notifyCreated(this);
     }
     get isDisposed() {
@@ -427,7 +429,7 @@ class DisposableStore {
             reportWarning('MJX504', [], new Error().stack);
         }
         else {
-            this._items.add(item);
+            (this._items ??= new Set()).add(item);
         }
         return item;
     }
@@ -438,20 +440,21 @@ class DisposableStore {
         if (item === this) {
             throw motifError('MJX505');
         }
-        this._items.delete(item);
+        this._items?.delete(item);
         item.dispose();
     }
     detach(item) {
-        if (item && this._items.delete(item)) {
+        if (item && this._items?.delete(item)) {
             disposableCore.notifyOwner(item, null);
         }
     }
     clear() {
-        if (this._items.size === 0) {
+        const items = this._items;
+        if (!items || items.size === 0) {
             return;
         }
         const failures = [];
-        for (const item of this._items) {
+        for (const item of items) {
             try {
                 item?.dispose();
             }
@@ -459,7 +462,7 @@ class DisposableStore {
                 failures.push(error);
             }
         }
-        this._items.clear();
+        items.clear();
         if (failures.length === 1) {
             throw failures[0];
         }
@@ -477,16 +480,34 @@ class DisposableStore {
     }
 }
 
+let closedStore;
+function sharedClosedStore() {
+    if (closedStore === undefined) {
+        closedStore = new DisposableStore();
+        closedStore.dispose();
+    }
+    return closedStore;
+}
 class Disposable {
-    _disposables = new DisposableStore();
+    get _disposables() {
+        let store = this._store;
+        if (store === undefined) {
+            store = this._store = new DisposableStore();
+            disposableCore.notifyOwner(store, this);
+        }
+        return store;
+    }
     constructor() {
+        this._store = undefined;
         disposableCore.notifyCreated(this);
-        disposableCore.notifyOwner(this._disposables, this);
     }
     dispose() {
         disposableCore.notifyDisposed(this);
-        const owned = this._disposables;
-        if (owned && typeof owned.dispose === 'function') {
+        const owned = this._store;
+        if (owned === undefined) {
+            this._store = sharedClosedStore();
+        }
+        else if (owned && typeof owned.dispose === 'function') {
             owned.dispose();
         }
         else {
@@ -591,27 +612,17 @@ function removeArrayStack() {
 }
 
 class ListBinding {
-    component;
-    itemsFn;
-    renderFn;
-    options;
-    propertyName = "__list__";
-    dataSource;
-    dataMember;
-    formatString;
-    converter;
-    converterBack;
-    updateMode;
-    _isActive = false;
-    _effectCleanup;
-    _rendered = [];
-    _identityMap = new WeakMap();
-    container = motifFragment('list-container');
     constructor(component, itemsFn, renderFn, options) {
         this.component = component;
         this.itemsFn = itemsFn;
         this.renderFn = renderFn;
         this.options = options;
+        this.propertyName = "__list__";
+        this._isActive = false;
+        this._rendered = [];
+        this._identityMap = new WeakMap();
+        this.container = motifFragment('list-container');
+        this.olditems = [];
         this.component.controls.add(this.container);
     }
     activate() { if (this._isActive)
@@ -695,7 +706,6 @@ class ListBinding {
         }
         return component;
     }
-    olditems = [];
     get _indexSensitive() {
         try {
             return this.renderFn.length >= 2;
@@ -899,6 +909,10 @@ class ListBinding {
             return oi === undefined ? -1 : oi;
         });
         const stable = new Set(longestIncreasingIndices(sources));
+        if (newComponents.length === items.length && isPermutation(sources, newComponents, this.container)) {
+            controls._reorder(newComponents, stable);
+            return;
+        }
         let anchor = null;
         for (let i = newComponents.length - 1; i >= 0; i--) {
             const comp = newComponents[i];
@@ -921,6 +935,19 @@ class ListBinding {
         }
     }
 }
+function isPermutation(sources, components, owner) {
+    const seen = new Uint8Array(sources.length);
+    for (let i = 0; i < sources.length; i++) {
+        const s = sources[i];
+        if (s === -1 || seen[s])
+            return false;
+        seen[s] = 1;
+        const c = components[i];
+        if (c.isDisposed || c.parent !== owner)
+            return false;
+    }
+    return true;
+}
 function longestIncreasingIndices(sources) {
     const predecessors = new Array(sources.length).fill(-1);
     const tails = [];
@@ -1008,13 +1035,11 @@ function findAppendableComponent$1(component) {
 }
 
 class LeakMonitor {
-    threshold;
-    name;
-    _origins = new Map();
-    _quietChecks = 0;
     constructor(threshold, name) {
         this.threshold = threshold;
         this.name = name;
+        this._origins = new Map();
+        this._quietChecks = 0;
     }
     check(size) {
         if (this.threshold <= 0 || size < this.threshold) {
@@ -1050,8 +1075,10 @@ function createRing() {
     return ring;
 }
 class LinkedList {
-    _ring = createRing();
-    _count = 0;
+    constructor() {
+        this._ring = createRing();
+        this._count = 0;
+    }
     get size() {
         return this._count;
     }
@@ -1109,11 +1136,12 @@ class LinkedList {
     }
 }
 
-const COMPILER_CONTRACT = 1;
+const COMPILER_CONTRACT = 2;
+const SUPPORTED_CONTRACTS = [1, 2];
 const reported = new Set();
 const pending = new Set();
 function motifCompiled(contract) {
-    if (contract === COMPILER_CONTRACT || reported.has(contract))
+    if (SUPPORTED_CONTRACTS.includes(contract) || reported.has(contract))
         return;
     if (!isDevLike()) {
         pending.add(contract);
@@ -1148,15 +1176,12 @@ var NodeTypes;
 })(NodeTypes || (NodeTypes = {}));
 
 class Effect {
-    fn;
-    callback;
-    deps = [];
-    active = true;
-    running = false;
-    scheduler;
     constructor(fn, callback) {
         this.fn = fn;
         this.callback = callback;
+        this.deps = [];
+        this.active = true;
+        this.running = false;
     }
     run() {
         let value;
@@ -1402,21 +1427,10 @@ function readModelValue(el) {
     return el.value;
 }
 class Binding {
-    propertyName;
-    dataSource;
-    dataMember;
-    formatString;
-    converter;
-    converterBack;
-    setter;
-    formatInfo;
-    updateMode = 'onPropertyChanged';
-    _isActive = false;
-    _component;
-    _effectCleanup;
-    _memberPath = null;
-    _memberPathSource;
     constructor(component, propertyName, dataSource, dataMember, formatString, formatInfo) {
+        this.updateMode = 'onPropertyChanged';
+        this._isActive = false;
+        this._memberPath = null;
         this._component = component;
         this.propertyName = propertyName;
         this.dataSource = dataSource;
@@ -1668,10 +1682,9 @@ function isWritablePathKey(target, key) {
     return true;
 }
 class BindingCollection {
-    _items = [];
-    _component;
-    _branchScope = null;
     constructor(component) {
+        this._items = [];
+        this._branchScope = null;
         this._component = component;
     }
     _own(stop) {
@@ -1940,6 +1953,38 @@ class BindingCollection {
             const [dataSource, dataMember, formatString, formatInfo] = args;
             binding = new Binding(this._component, propertyName, dataSource, dataMember, formatString, formatInfo);
         }
+        const write = (raw) => {
+            let value = raw;
+            const b = binding;
+            if (typeof b.converterBack === 'function') {
+                value = b.converterBack(value);
+            }
+            if (typeof b.setter === 'function') {
+                b.setter(value);
+                return;
+            }
+            const member = b.dataMember;
+            const source = b.dataSource;
+            if (member && source != null) {
+                const path = member.split('.');
+                let target = source;
+                for (let i = 0; i < path.length && target != null; i++) {
+                    const key = path[i];
+                    if (!isWritablePathKey(target, key))
+                        return;
+                    if (i === path.length - 1) {
+                        target[key] = value;
+                    }
+                    else {
+                        target = target[key];
+                    }
+                }
+            }
+            else if (source != null && typeof source === 'object' && 'value' in source) {
+                source.value = value;
+            }
+        };
+        (this._modelWriters ??= new WeakMap()).set(binding, write);
         const lowerTag = tn.toLowerCase();
         if (lowerTag === 'input' || lowerTag === 'select' || lowerTag === 'textarea') {
             const writeBack = () => {
@@ -1947,35 +1992,7 @@ class BindingCollection {
                     const el = this._component.element;
                     if (!el)
                         return;
-                    let value = readModelValue(el);
-                    const b = binding;
-                    if (typeof b.converterBack === 'function') {
-                        value = b.converterBack(value);
-                    }
-                    if (typeof b.setter === 'function') {
-                        b.setter(value);
-                        return;
-                    }
-                    const member = b.dataMember;
-                    const source = b.dataSource;
-                    if (member && source != null) {
-                        const path = member.split('.');
-                        let target = source;
-                        for (let i = 0; i < path.length && target != null; i++) {
-                            const key = path[i];
-                            if (!isWritablePathKey(target, key))
-                                return;
-                            if (i === path.length - 1) {
-                                target[key] = value;
-                            }
-                            else {
-                                target = target[key];
-                            }
-                        }
-                    }
-                    else if (source != null && typeof source === 'object' && 'value' in source) {
-                        source.value = value;
-                    }
+                    write(readModelValue(el));
                 }
                 catch { /* ignore */ }
             };
@@ -1988,6 +2005,23 @@ class BindingCollection {
         }
         return binding;
     }
+    writeModel(value) {
+        const writers = this._modelWriters;
+        if (!writers)
+            return false;
+        let written = false;
+        for (const binding of this._items) {
+            const write = writers.get(binding);
+            if (!write)
+                continue;
+            try {
+                write(value);
+                written = true;
+            }
+            catch { /* ignore */ }
+        }
+        return written;
+    }
     deactivateAll() {
         this._items.forEach(binding => binding.deactivate());
         this._items = [];
@@ -2047,10 +2081,10 @@ lazyBindMethods(BindingCollection.prototype, [
 ]);
 
 class Emitter {
-    _subscriptions = [];
-    _delivery;
-    _subscribe;
-    _disposed = false;
+    constructor() {
+        this._subscriptions = [];
+        this._disposed = false;
+    }
     get event() {
         if (!this._subscribe) {
             this._subscribe = (listener, thisArgs, disposables) => {
@@ -2134,10 +2168,6 @@ class Emitter {
 }
 
 class ComponentEmiter {
-    component;
-    _emitters;
-    _sourceDisposables;
-    _listenerDisposables;
     constructor(component) {
         this.component = component;
     }
@@ -2288,9 +2318,6 @@ const WHEN_TRUTHY_METHODS = new Set(['close', 'hidePopover', 'requestSubmit', 'c
 const ARGUMENT_METHODS = new Set(['setSelectionRange', 'setRangeText', 'setPointerCapture', 'releasePointerCapture', 'fastSeek']);
 const PROPERTY_FIRST = new Set(['checked', 'selected', 'muted', 'indeterminate', 'srcObject']);
 class controlAttribute {
-    _parent;
-    _attrMapStore;
-    _watchersStore;
     constructor(parent) {
         this._parent = parent;
     }
@@ -2822,14 +2849,10 @@ class controlAttribute {
 }
 
 class controlClass {
-    _parent;
     constructor(parent) {
+        this._watcherSeq = 0;
         this._parent = parent;
     }
-    _countsStore;
-    _staticSetStore;
-    _watchersStore;
-    _watcherSeq = 0;
     get _counts() { return this._countsStore ??= new Map(); }
     get _staticSet() { return this._staticSetStore ??= new Set(); }
     get _watchers() { return this._watchersStore ??= new Map(); }
@@ -2845,13 +2868,7 @@ class controlClass {
                 this._addStaticFromObject(value);
             }
             else {
-                var valueStr = String(value ?? '').trim();
-                if (valueStr.split(' ').length > 1) {
-                    this._addStaticFromArray(valueStr.split(' '));
-                }
-                else {
-                    this._addStaticFromString(valueStr);
-                }
+                this._addStaticNames(this._splitClasses(String(value ?? '')));
             }
         }
         return this._parent;
@@ -2917,10 +2934,11 @@ class controlClass {
         return null;
     }
     _splitClasses(input) {
-        return (input || '')
-            .split(/\s+/)
-            .map(s => s.trim())
-            .filter(s => s.length > 0);
+        if (!input)
+            return [];
+        if (!/\s/.test(input))
+            return [input];
+        return input.split(/\s+/).filter(s => s.length > 0);
     }
     _normalizeToSet(values, key) {
         const result = new Set();
@@ -3019,14 +3037,31 @@ class controlClass {
             }
         }
     }
-    _addStaticFromString(s) {
-        if (!s)
+    _addStaticNames(names) {
+        if (names.length === 0)
             return;
         const el = this._getElement();
-        const prev = new Set(this._staticSet);
-        for (const cls of this._splitClasses(s))
-            this._staticSet.add(cls);
-        this._applySourceDiff('static', prev, new Set(this._staticSet), el);
+        const staticSet = this._staticSet;
+        const fresh = el && !el.hasAttribute('class') ? [] : null;
+        for (const cls of names) {
+            if (staticSet.has(cls))
+                continue;
+            staticSet.add(cls);
+            const prevCount = this._counts.get(cls) || 0;
+            this._counts.set(cls, prevCount + 1);
+            if (prevCount === 0 && el) {
+                if (fresh)
+                    fresh.push(cls);
+                else {
+                    try {
+                        el.classList.add(cls);
+                    }
+                    catch { }
+                }
+            }
+        }
+        if (fresh && fresh.length > 0)
+            el.setAttribute('class', fresh.join(' '));
     }
     _addStaticFromArray(arr) {
         const el = this._getElement();
@@ -3347,8 +3382,6 @@ function runCssTransition(el, props, phase, done, appear = false) {
 }
 
 class ComponentMotif {
-    _component;
-    options;
     constructor(component, options) {
         this._component = component;
         this.options = options;
@@ -3391,15 +3424,11 @@ class ComponentMotif {
 const SIGNAL_TARGET = Symbol('SignalTarget');
 const SIGNAL_KEY = Symbol('SignalKey');
 class Signal {
-    _value;
-    _target;
-    _key;
-    _equals;
-    _disposed = false;
     static create(initialValue, equals) {
         return new Signal(initialValue, equals);
     }
     constructor(initialValue, equals = Object.is) {
+        this._disposed = false;
         this._value = initialValue;
         this._target = { [SIGNAL_TARGET]: true };
         this._key = SIGNAL_KEY;
@@ -3456,14 +3485,9 @@ class Signal {
     }
 }
 class Computed {
-    _value;
-    _dirty = true;
-    _computing = false;
-    _target;
-    _key;
-    _getter;
-    _cleanup;
     constructor(getter) {
+        this._dirty = true;
+        this._computing = false;
         this._getter = getter;
         this._target = { [SIGNAL_TARGET]: true };
         this._key = SIGNAL_KEY;
@@ -3528,14 +3552,9 @@ class Computed {
     }
 }
 class LazyComputed {
-    _value;
-    _dirty = true;
-    _disposed = false;
-    _target;
-    _key;
-    _getter;
-    _runner;
     constructor(getter) {
+        this._dirty = true;
+        this._disposed = false;
         this._getter = getter;
         this._target = { [SIGNAL_TARGET]: true };
         this._key = SIGNAL_KEY;
@@ -3699,24 +3718,25 @@ function retireServiceOwner(owner) {
     pins.set(owner, { scope: pinnedScopeOf(owner) ?? navigatingRoot._currentScope(), live: false });
 }
 class ServiceProvider {
-    services;
-    parent;
-    root;
-    scopeName;
-    kind;
-    singletonCache;
-    scopedCache = new Map();
-    transientSet = new Set();
-    _autoDisposeTransients = false;
-    pendingSingleton;
-    pendingScoped = new Map();
-    _navigation;
-    _ownerlessSlot = { owner: null, ownerless: true };
-    _navigationDisposed = false;
-    _livePins = 0;
-    _pending = false;
     constructor(services, parent, root) {
         this.services = services;
+        this.scopedCache = new Map();
+        this.transientSet = new Set();
+        this._autoDisposeTransients = false;
+        this.pendingScoped = new Map();
+        this._ownerlessSlot = { owner: null, ownerless: true };
+        this._navigationDisposed = false;
+        this._livePins = 0;
+        this._pending = false;
+        this.describeToken = (t) => {
+            if (typeof t === 'string')
+                return t;
+            if (typeof t === 'symbol')
+                return t.toString();
+            if (typeof t === 'function')
+                return t.name || '[AnonymousClass]';
+            return String(t);
+        };
         this.parent = parent;
         this.root = root ?? this;
         this.kind = this.root === this ? 'root' : 'user';
@@ -4100,15 +4120,6 @@ class ServiceProvider {
             throw motifError('MJX404', chain);
         }
     }
-    describeToken = (t) => {
-        if (typeof t === 'string')
-            return t;
-        if (typeof t === 'symbol')
-            return t.toString();
-        if (typeof t === 'function')
-            return t.name || '[AnonymousClass]';
-        return String(t);
-    };
     describeTokenWithSource(t) {
         const name = this.describeToken(t);
         const d = this.services.getDescriptor(t);
@@ -4215,8 +4226,22 @@ function describeServiceToken(t) {
         return t.name || '[AnonymousClass]';
     return String(t);
 }
+const F_BUILT = 1;
+const F_INITIALIZED = 2;
+const F_DISPOSED = 4;
+const F_CONFIGURED = 8;
+const F_PAINTING = 16;
+const F_PAINTED = 32;
+const F_HIDDEN = 64;
+const F_WAIT = 128;
+const F_POSTCONFIG = 256;
+const F_PREBOUND = 512;
+const F_DISPOSED_FIRED = 1024;
+function optionsOf(c) {
+    return c?._motif?.options;
+}
 function peekTransition(c) {
-    return c?.motif?.options?.[TRANSITION_SLOT];
+    return c?._motif?.options?.[TRANSITION_SLOT];
 }
 /**WAAPI keyframe (transitionIn) YA DA CSS class transition (name/classes) tanımlı olarak enter animasyonu varmı */
 function clearNavDirection(c) {
@@ -4238,15 +4263,15 @@ function enterModeOf(container) {
         const node = c.element;
         if (!node || node.nodeType !== Node.COMMENT_NODE)
             break;
-        c = c.parent ?? c._base?._leaveContainer;
+        c = c.parent ?? c._leaveContainer;
     }
     return transitionSettings.mode;
 }
 function leaveModeOf(c) {
-    return enterModeOf(c.parent ?? c._base?._leaveContainer);
+    return enterModeOf(c.parent ?? c._leaveContainer);
 }
 function wantsEnterTransition(c) {
-    const o = c?.motif?.options;
+    const o = c?._motif?.options;
     const t = o?.[TRANSITION_SLOT];
     return !!(o?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
 }
@@ -4401,8 +4426,6 @@ function createTransitionApi(owner) {
     return t;
 }
 class ComponentOptionsImpl {
-    [OPTIONS_OWNER];
-    [TRANSITION_SLOT];
     constructor(owner) {
         this[OPTIONS_OWNER] = owner;
     }
@@ -4442,24 +4465,44 @@ class ComponentOptionsImpl {
         }
     }
     hasEvent(name) {
-        return !!this[OPTIONS_OWNER]._eventHandlers?.has(name);
+        return hasEventKey(this[OPTIONS_OWNER], name);
     }
 }
 lazyBindMethods(ComponentOptionsImpl.prototype, ['getInstance', 'hasEvent']);
 function fireLifecycle(component, name, ev) {
-    const base = component._base;
+    const base = component._baseCtx;
     if (base)
-        base.emiters.fire(name, ev);
+        base._emiters?.fire(name, ev);
+}
+function runHooks(base, listName, sender, ev, label) {
+    if (!base)
+        return;
+    let slot = base[listName];
+    if (!slot)
+        return;
+    let from = 0;
+    if (typeof slot === 'function') {
+        const fn = slot;
+        callReported(() => fn(sender, ev), 'MJX122', label);
+        slot = base[listName];
+        if (!Array.isArray(slot))
+            return;
+        from = 1;
+    }
+    for (let i = from; i < slot.length; i++) {
+        const fn = slot[i];
+        callReported(() => fn(sender, ev), 'MJX122', label);
+    }
 }
 function hasLifecycleHook(component, hook, listName, lowerName, legacyProp) {
     if (component[hook])
         return true;
-    const list = component._base[listName];
-    if (Array.isArray(list) && list.length > 0)
+    const base = component._baseCtx;
+    if (base?.[listName])
         return true;
     if (legacyProp && component[legacyProp])
         return true;
-    return component._base.emiters.hasListeners(lowerName);
+    return !!base?._emiters?.hasListeners(lowerName);
 }
 const RESERVED_METHODS = ['build', 'setState', 'reState', 'setText', 'style', 'dispose', 'disposeAsync', 'using', 'doWork', 'getService', '$', 'useModel', 'context', 'siblings', 'serviceProvider', 'isWait'];
 const checkedComponentClasses = new WeakSet();
@@ -4528,21 +4571,17 @@ const ComponentHelper = {
             callReported(() => component.initializeComponent(sender, ev), 'MJX122', 'initializeComponent');
         }
         // 2) aggregated extra initializeComponent handlers (örn, from props)
-        if (Array.isArray(component._base._initializeComponentHandlers) && component._base._initializeComponentHandlers.length) {
-            for (const fn of component._base._initializeComponentHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'initializeComponent');
-            }
+        const compiled = component._init;
+        if (compiled) {
+            callReported(() => compiled(sender, ev), 'MJX122', 'initializeComponent');
         }
+        runHooks(component._baseCtx, '_initializeComponentHandlers', sender, ev, 'initializeComponent');
         // 3) class method  oninitializeComponent  
         if (typeof component.oninitializeComponent === 'function') {
             callReported(() => component.oninitializeComponent(sender, ev), 'MJX122', 'oninitializeComponent');
         }
         // 4) aggregated extra oninitializeComponent handlers (örn, from props)
-        if (Array.isArray(component._base._onInitializeComponentHandlers) && component._base._onInitializeComponentHandlers.length) {
-            for (const fn of component._base._onInitializeComponentHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'oninitializeComponent');
-            }
-        }
+        runHooks(component._baseCtx, '_onInitializeComponentHandlers', sender, ev, 'oninitializeComponent');
     },
     callDisposing(component) {
         if (!component || component.isDisposed) {
@@ -4555,11 +4594,7 @@ const ComponentHelper = {
         if (component.onDisposing) {
             callReported(() => component.onDisposing(sender, ev), 'MJX122', 'onDisposing');
         }
-        if (Array.isArray(component._base._onDisposingHandlers)) {
-            for (const fn of component._base._onDisposingHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onDisposing');
-            }
-        }
+        runHooks(component._baseCtx, '_onDisposingHandlers', sender, ev, 'onDisposing');
         if (component.ondisposing) {
             callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
         }
@@ -4573,11 +4608,7 @@ const ComponentHelper = {
         if (component.onActivated) {
             callReported(() => component.onActivated(sender, ev), 'MJX122', 'onActivated');
         }
-        if (Array.isArray(component._base._onActivatedHandlers)) {
-            for (const fn of component._base._onActivatedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onActivated');
-            }
-        }
+        runHooks(component._baseCtx, '_onActivatedHandlers', sender, ev, 'onActivated');
         fireLifecycle(component, 'onactivated', ev);
     },
     callDeactivated(component) {
@@ -4588,11 +4619,7 @@ const ComponentHelper = {
         if (component.onDeactivated) {
             callReported(() => component.onDeactivated(sender, ev), 'MJX122', 'onDeactivated');
         }
-        if (Array.isArray(component._base._onDeactivatedHandlers)) {
-            for (const fn of component._base._onDeactivatedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onDeactivated');
-            }
-        }
+        runHooks(component._baseCtx, '_onDeactivatedHandlers', sender, ev, 'onDeactivated');
         fireLifecycle(component, 'ondeactivated', ev);
     },
     deactivateTree(component, deep = true) {
@@ -4604,7 +4631,7 @@ const ComponentHelper = {
         if (!deep || component.isDisposed) {
             return;
         }
-        for (const c of component.controls.items.slice()) {
+        for (const c of childrenOf(component).slice()) {
             if (c && !c.isDisposed && c.isVisible && !c.isWait) {
                 ComponentHelper.deactivateTree(c, true);
             }
@@ -4619,27 +4646,26 @@ const ComponentHelper = {
         if (!deep || component.isDisposed) {
             return;
         }
-        for (const c of component.controls.items.slice()) {
+        for (const c of childrenOf(component).slice()) {
             if (c && !c.isDisposed && c.isVisible && !c.isWait) {
                 ComponentHelper.activateTree(c, true);
             }
         }
     },
     callDisposed(component) {
-        if (!component || !component._base || component._base._disposedFired) {
+        if (!component || (component._flags & F_DISPOSED_FIRED) !== 0) {
+            return;
+        }
+        if (component.isDisposed && !component.element && component._baseCtx === undefined) {
             return;
         }
-        component._base._disposedFired = true;
+        component._flags |= F_DISPOSED_FIRED;
         if (hasLifecycleHook(component, 'onDisposed', '_onDisposedHandlers', 'ondisposed', 'ondisposed')) {
             const sender = component, ev = { cancel: false };
             if (component.onDisposed) {
                 callReported(() => component.onDisposed(sender, ev), 'MJX122', 'onDisposed');
             }
-            if (Array.isArray(component._base._onDisposedHandlers)) {
-                for (const fn of component._base._onDisposedHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onDisposed');
-                }
-            }
+            runHooks(component._baseCtx, '_onDisposedHandlers', sender, ev, 'onDisposed');
             if (component.ondisposed) {
                 callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
             }
@@ -4659,11 +4685,7 @@ const ComponentHelper = {
             if (component.onBuilt) {
                 callReported(() => component.onBuilt(sender, ev), 'MJX122', 'onBuilt');
             }
-            if (Array.isArray(component._base._onBuiltHandlers)) {
-                for (const fn of component._base._onBuiltHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onBuilt');
-                }
-            }
+            runHooks(component._baseCtx, '_onBuiltHandlers', sender, ev, 'onBuilt');
             if (component.onbuilt) {
                 callReported(() => component.onbuilt(sender, ev), 'MJX122', 'onbuilt');
             }
@@ -4675,11 +4697,11 @@ const ComponentHelper = {
         catch { }
     },
     scheduleMounted(component) {
-        if (!component || component.isDisposed || component._base._mountedScheduled) {
+        if (!component || component.isDisposed || component._baseCtx?._mountedScheduled) {
             return;
         }
         const hasHook = typeof component.onMounted === 'function'
-            || (Array.isArray(component._base._onMountedHandlers) && component._base._onMountedHandlers.length > 0)
+            || !!component._baseCtx?._onMountedHandlers
             || typeof component.onmounted === 'function';
         if (!hasHook) {
             return;
@@ -4708,11 +4730,7 @@ const ComponentHelper = {
         if (component.onMounted) {
             callReported(() => component.onMounted(sender, ev), 'MJX122', 'onMounted');
         }
-        if (Array.isArray(component._base._onMountedHandlers)) {
-            for (const fn of component._base._onMountedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onMounted');
-            }
-        }
+        runHooks(component._baseCtx, '_onMountedHandlers', sender, ev, 'onMounted');
         if (component.onmounted) {
             callReported(() => component.onmounted(sender, ev), 'MJX122', 'onmounted');
         }
@@ -4729,11 +4747,7 @@ const ComponentHelper = {
         if (component.onBuilding) {
             callReported(() => component.onBuilding(sender, ev), 'MJX122', 'onBuilding');
         }
-        if (Array.isArray(component._base._onBuildingHandlers)) {
-            for (const fn of component._base._onBuildingHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onBuilding');
-            }
-        }
+        runHooks(component._baseCtx, '_onBuildingHandlers', sender, ev, 'onBuilding');
         fireLifecycle(component, 'onbuilding', ev);
     },
     callConfig(component) {
@@ -4741,8 +4755,9 @@ const ComponentHelper = {
             return;
         }
         component.isConfigured = true;
-        if (component.motif.options._preconfig) {
-            safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
+        const preconfig = component._motif?.options?._preconfig;
+        if (preconfig) {
+            safeCallSilent(() => preconfig(component), 'Component._preconfig');
         }
         if (!hasLifecycleHook(component, 'onConfig', '_onConfigHandlers', 'onconfig')) {
             return;
@@ -4751,21 +4766,17 @@ const ComponentHelper = {
         if (component.onConfig) {
             callReported(() => component.onConfig(sender, ev), 'MJX122', 'onConfig');
         }
-        if (Array.isArray(component._base._onConfigHandlers)) {
-            for (const fn of component._base._onConfigHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onConfig');
-            }
-        }
+        runHooks(component._baseCtx, '_onConfigHandlers', sender, ev, 'onConfig');
         fireLifecycle(component, 'onconfig', ev);
     },
     callConfigured(component) {
-        if (component.motif.options && component.motif.options._postconfigdone) {
+        if ((component._flags & F_POSTCONFIG) !== 0) {
             return;
         }
-        if (component?._base?._configDeferred && !component.isConfigured) {
+        if (component?._baseCtx?._configDeferred && !component.isConfigured) {
             ComponentHelper.callConfig(component);
         }
-        component.motif.options._postconfigdone = true;
+        component._flags |= F_POSTCONFIG;
         if (!component || component.isDisposed) {
             return;
         }
@@ -4776,11 +4787,7 @@ const ComponentHelper = {
         if (component.onConfigured) {
             callReported(() => component.onConfigured(sender, ev), 'MJX122', 'onConfigured');
         }
-        if (Array.isArray(component._base._onConfiguredHandlers)) {
-            for (const fn of component._base._onConfiguredHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onConfigured');
-            }
-        }
+        runHooks(component._baseCtx, '_onConfiguredHandlers', sender, ev, 'onConfigured');
         fireLifecycle(component, 'onconfigured', ev);
     },
     callOnInitialized(component) {
@@ -4795,11 +4802,7 @@ const ComponentHelper = {
         if (component.onInitialized) {
             callReported(() => component.onInitialized(sender, ev), 'MJX122', 'onInitialized');
         }
-        if (Array.isArray(component._base._onInitializedHandlers)) {
-            for (const fn of component._base._onInitializedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onInitialized');
-            }
-        }
+        runHooks(component._baseCtx, '_onInitializedHandlers', sender, ev, 'onInitialized');
         fireLifecycle(component, 'oninitialized', ev);
     },
     callOnInitializing(component) {
@@ -4813,29 +4816,21 @@ const ComponentHelper = {
         if (component.onInitializing) {
             callReported(() => component.onInitializing(sender, ev), 'MJX122', 'onInitializing');
         }
-        if (Array.isArray(component._base._onInitializingHandlers)) {
-            for (const fn of component._base._onInitializingHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onInitializing');
-            }
-        }
+        runHooks(component._baseCtx, '_onInitializingHandlers', sender, ev, 'onInitializing');
         fireLifecycle(component, 'oninitializing', ev);
     },
-    callVisibilityChanged(component) {
+    callVisibilityChanged(component, visible) {
         if (!component || component.isDisposed) {
             return;
         }
         if (!hasLifecycleHook(component, 'onVisibilityChanged', '_onVisibilityChangedHandlers', 'onvisibilitychanged')) {
             return;
         }
-        const sender = component, ev = { cancel: false };
+        const sender = component, ev = { cancel: false, visible };
         if (component.onVisibilityChanged) {
             callReported(() => component.onVisibilityChanged(sender, ev), 'MJX122', 'onVisibilityChanged');
         }
-        if (Array.isArray(component._base._onVisibilityChangedHandlers)) {
-            for (const fn of component._base._onVisibilityChangedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onVisibilityChanged');
-            }
-        }
+        runHooks(component._baseCtx, '_onVisibilityChangedHandlers', sender, ev, 'onVisibilityChanged');
         fireLifecycle(component, 'onvisibilitychanged', ev);
     },
     findFragmentContent(c) {
@@ -4864,9 +4859,12 @@ const ComponentHelper = {
         ComponentHelper.callConfigured(c);
         if (c.isDisposed)
             return;
-        c._base._activatePreBindings();
-        if (c.isWait)
+        activatePreBindings(c);
+        if (c.isWait) {
+            if (this.isBuilt)
+                placeTrace(this, c);
             return;
+        }
         const cisBuilt = c.isBuilt;
         if (!this.isBuilt) {
             return;
@@ -4874,7 +4872,7 @@ const ComponentHelper = {
         if (c.isWait) {
             return;
         }
-        const enterSeq = c._base._enterSeq;
+        const enterSeq = c._baseCtx?._enterSeq;
         if (!c.isBuilt) {
             c.build();
         }
@@ -4903,40 +4901,12 @@ const ComponentHelper = {
         if (cisBuilt && c.element.nodeType == Node.COMMENT_NODE && controlElement?.childNodes.length == 0 && c.controls.length > 0) {
             controlElement = ComponentHelper.getContent.call(c);
         }
-        let referenceNode = null;
         const insertHost = appendableElement?.element;
-        const domReferenceOf = (n) => {
-            if (!n || !n.isBuilt)
-                return null;
-            const candidate = n.isVisible
-                ? n.element
-                : (n.motif.options?.placeholder ?? null);
-            if (!candidate)
-                return null;
-            return (insertHost && candidate.parentNode === insertHost) ? candidate : null;
-        };
-        const siblings = this.controls.items;
-        for (let i = currentIndex + 1; i < siblings.length; i++) {
-            const candidate = domReferenceOf(siblings[i]);
-            if (candidate) {
-                referenceNode = candidate;
-                break;
-            }
-        }
-        if (!referenceNode) {
-            if (this.element.nodeType === Node.COMMENT_NODE) {
-                const close = this.motif.options.closeFragment;
-                referenceNode = (close && insertHost && close.parentNode === insertHost) ? close : null;
-            }
-            else {
-                referenceNode = null;
-            }
-        }
+        const trace = c.motif.options.placeholder;
+        const ownTrace = c.isVisible && trace && insertHost && trace.parentNode === insertHost ? trace : null;
+        const referenceNode = ownTrace ?? (insertHost ? followingAnchor(this, currentIndex + 1, insertHost) : null);
         if (!c.isVisible) {
-            const cfg = c.motif.options?.hideStrategy ?? 'auto';
-            const isFromListOrKeyed = !!(c.motif.options?.__fromList || typeof c.motif.options?.indexkey !== 'undefined' || typeof c.motif.options?.__key !== 'undefined');
-            const strategy = cfg === 'placeholder' ? 'placeholder' : (cfg === 'detach' ? 'detach' : (isFromListOrKeyed ? 'detach' : 'placeholder'));
-            if (strategy === 'placeholder') {
+            if (keepsTrace(c)) {
                 if (!c.motif.options.placeholder) {
                     c.motif.options.placeholder = dom.createComment("h");
                 }
@@ -4974,9 +4944,11 @@ const ComponentHelper = {
             else {
                 appendableElement?.element.appendChild(controlElement);
             }
+            if (ownTrace && ownTrace.parentNode)
+                ownTrace.parentNode.removeChild(ownTrace);
         }
         if (c.isVisible) {
-            const enteredInBuild = !cisBuilt && c._base._enterSeq !== enterSeq;
+            const enteredInBuild = !cisBuilt && c._baseCtx?._enterSeq !== enterSeq;
             !enteredInBuild && wantsEnterTransition(c) && c.motif.options.transition.enterTransition(() => { });
             if (cisBuilt) {
                 ComponentHelper.activateTree(c);
@@ -4990,7 +4962,11 @@ const ComponentHelper = {
         if (this.element.nodeType == Node.COMMENT_NODE) {
             this.motif.options.cache?.appendChild(this.element);
             this.controls.forEach(child => {
-                this.motif.options.cache?.appendChild(ComponentHelper.getContent.call(child));
+                const node = child.isWait || !child.isVisible
+                    ? (keepsTrace(child) ? (child.motif.options.placeholder ??= dom.createComment("h")) : undefined)
+                    : ComponentHelper.getContent.call(child);
+                if (node)
+                    this.motif.options.cache?.appendChild(node);
             });
             this.motif.options.cache?.appendChild(this.motif.options.closeFragment);
             return this.motif.options.cache;
@@ -5039,34 +5015,72 @@ const ComponentHelper = {
         }
     }
 };
+function keepsTrace(c) {
+    return optionsOf(c)?.hideStrategy !== 'detach';
+}
+function domAnchor(c, host) {
+    const trace = optionsOf(c)?.placeholder;
+    if (trace && trace.parentNode === host)
+        return trace;
+    const node = c.element;
+    return node && node.parentNode === host ? node : null;
+}
+function followingAnchor(owner, start, host) {
+    const siblings = owner.controls.items;
+    for (let i = start; i < siblings.length; i++) {
+        const anchor = siblings[i] ? domAnchor(siblings[i], host) : null;
+        if (anchor)
+            return anchor;
+    }
+    if (owner.element.nodeType === Node.COMMENT_NODE) {
+        const close = optionsOf(owner)?.closeFragment;
+        return close && close.parentNode === host ? close : null;
+    }
+    return null;
+}
+function placeTrace(owner, c) {
+    if (!keepsTrace(c))
+        return;
+    const host = findAppendableComponent(owner)?.element;
+    if (!host)
+        return;
+    const element = c.element;
+    if (element && element.parentNode === host)
+        return;
+    const opts = c.motif.options;
+    const trace = opts.placeholder ?? (opts.placeholder = dom.createComment("h"));
+    if (trace.parentNode === host)
+        return;
+    host.insertBefore(trace, followingAnchor(owner, owner.controls.items.indexOf(c) + 1, host));
+}
 function removeComponentDom(c, node, alsoPlaceholder) {
-    const opts = c.motif?.options;
+    const opts = optionsOf(c);
     const parent = node.parentNode;
     if (node.nodeType === Node.COMMENT_NODE) {
-        if (!parent)
-            return;
-        const close = opts?.closeFragment || null;
-        if (close) {
-            let current = node;
-            while (current) {
-                const after = current.nextSibling;
+        if (parent) {
+            const close = opts?.closeFragment || null;
+            if (close) {
+                let current = node;
+                while (current) {
+                    const after = current.nextSibling;
+                    try {
+                        parent.removeChild(current);
+                    }
+                    catch { }
+                    if (current === close)
+                        break;
+                    current = after;
+                }
+            }
+            else {
                 try {
-                    parent.removeChild(current);
+                    parent.removeChild(node);
                 }
                 catch { }
-                if (current === close)
-                    break;
-                current = after;
-            }
-        }
-        else {
-            try {
-                parent.removeChild(node);
             }
-            catch { }
+            if (!alsoPlaceholder)
+                return;
         }
-        if (!alsoPlaceholder)
-            return;
     }
     else if (parent) {
         try {
@@ -5153,23 +5167,23 @@ function disposeShallow(c) {
         return;
     ComponentHelper.callDisposing.call(c, c);
     try {
-        c._base._offAll();
+        offAll(c);
     }
     catch {
     }
     c.motif.stopAnimations();
-    c._base._deactivateBindings();
-    if (c.controls?.items?.length) {
-        for (const child of c.controls.items) {
+    deactivateBindings(c);
+    if (childrenOf(c).length) {
+        for (const child of c._controls.items) {
             try {
-                child._base._disposeShallow();
+                disposeShallow(child);
             }
             catch {
             }
         }
     }
     ComponentHelper.callDisposed.call(c, c);
-    safeCall(() => { c._base.emiters.clear(); }, 'disposeShallow.emiters');
+    safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'disposeShallow.emiters');
     c.isDisposed = true;
     Disposable.prototype.dispose.call(c);
 }
@@ -5178,33 +5192,29 @@ function deepCleanup(c) {
         c.parent = null;
     }
     catch { }
-    try {
-        c._eventHandlers?.clear();
-    }
-    catch {
-    }
     c._eventHandlers = undefined;
     try {
-        c.class?._countsStore?.clear();
+        c._class?._countsStore?.clear();
     }
     catch { }
     try {
-        c.class?._watchersStore?.clear();
+        c._class?._watchersStore?.clear();
     }
     catch { }
     try {
-        c.attr?._attrMapStore?.clear();
+        c._attr?._attrMapStore?.clear();
     }
     catch { }
     try {
-        c.attr?._watchersStore?.clear();
+        c._attr?._watchersStore?.clear();
     }
     catch { }
     try {
-        if (c.motif.options) {
-            c.motif.options.cache = undefined;
-            c.motif.options.closeFragment = undefined;
-            c.motif.options.placeholder = undefined;
+        const opts = c._motif?.options;
+        if (opts) {
+            opts.cache = undefined;
+            opts.closeFragment = undefined;
+            opts.placeholder = undefined;
         }
     }
     catch {
@@ -5234,20 +5244,22 @@ function deepCleanup(c) {
     }
     catch { }
     try {
-        c.motif.options = undefined;
+        if (c._motif)
+            c._motif.options = undefined;
     }
     catch { }
     const keys = Object.keys(c);
     for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
-        if (key === 'motif')
+        if (key === '_motif' || key === '_flags')
             continue;
         try {
             c[key] = undefined;
         }
         catch { }
     }
-    c.isDisposed = true;
+    c._store = null;
+    c._flags = F_DISPOSED | F_HIDDEN | F_DISPOSED_FIRED | F_POSTCONFIG | F_PREBOUND;
 }
 const DISPOSE_STARTED = Promise.resolve();
 function subtreeDisposesSync(c, root) {
@@ -5255,7 +5267,7 @@ function subtreeDisposesSync(c, root) {
         return false;
     if (c.disposeAsync !== ComponentBase.prototype.disposeAsync)
         return false;
-    const opts = c.motif?.options;
+    const opts = optionsOf(c);
     if (opts) {
         if (opts.transitionOut)
             return false;
@@ -5269,8 +5281,8 @@ function subtreeDisposesSync(c, root) {
                 return false;
         }
     }
-    const items = c.controls?.items;
-    if (items) {
+    const items = childrenOf(c);
+    if (items.length) {
         for (let i = 0; i < items.length; i++) {
             const child = items[i];
             if (child && !child.isDisposed && !subtreeDisposesSync(child, false))
@@ -5301,27 +5313,28 @@ function disposePrefix(c, options, asChild) {
         c.motif.options.transition.skipNextLeave = true;
     }
     safeCall(() => { ComponentHelper.callDisposing.call(c, c); }, ctx + '.callDisposing');
-    c._base._offAll();
-    c._base._deactivateBindings();
+    offAll(c);
+    deactivateBindings(c);
     safeCall(() => { c.parent?.controls?.silentDetach?.(c, true); }, ctx + '.silentDetach');
 }
 function disposeFinish(c, options, asChild) {
     c.isDisposed = true;
     Disposable.prototype.dispose.call(c);
     if (asChild) {
-        c.controls.items = [];
+        if (c._controls)
+            c._controls.items = [];
         safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'disposeAsync.callDisposed');
-        safeCall(() => { c._base.emiters.clear(); }, 'disposeAsync.emiters');
+        safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'disposeAsync.emiters');
         if (options?.deep) {
-            c._base._deepCleanup();
+            deepCleanup(c);
         }
         return;
     }
     c.element = null;
     safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'dispose.callDisposed');
-    safeCall(() => { c._base.emiters.clear(); }, 'dispose.emiters');
-    c._base._offAll();
-    c._base._deepCleanup();
+    safeCall(() => { c._baseCtx?._emiters?.clear(); }, 'dispose.emiters');
+    offAll(c);
+    deepCleanup(c);
 }
 async function disposeRemainderAsync(c, options, asChild, leave) {
     if (leave) {
@@ -5334,7 +5347,7 @@ async function disposeRemainderAsync(c, options, asChild, leave) {
         else if (peekTransition(c)?.skipNextLeave) {
             await c.motif.stopAnimations();
         }
-        await c._base._detachDomWithAnimationAsync();
+        await detachDomWithAnimationAsync(c);
     }
     if (!asChild && c.constructor.name !== 'TransportTo') {
         await disposeContentBlocks(c);
@@ -5344,7 +5357,7 @@ async function disposeRemainderAsync(c, options, asChild, leave) {
         if (c.isDisposed) {
             return;
         }
-        const ctrls = Array.from(c.controls.items);
+        const ctrls = Array.from(childrenOf(c));
         if (ctrls.length) {
             await Promise.all(ctrls.map(child => asChild
                 ? safeCallAsync(async () => { await child.disposeAsync(childOptions); }, 'disposeAsync.disposeAsyncChildren.handler')
@@ -5374,8 +5387,8 @@ function disposeRemainderSync(root, options, asChild, rootDetached) {
         const node = nodes[n];
         if (node.isDisposed)
             continue;
-        const items = node.controls?.items;
-        if (!items || items.length === 0)
+        const items = childrenOf(node);
+        if (items.length === 0)
             continue;
         const ctrls = Array.from(items);
         for (let j = 0; j < ctrls.length; j++) {
@@ -5390,7 +5403,8 @@ function disposeRemainderSync(root, options, asChild, rootDetached) {
                 retireServiceOwner(child);
                 child._disposing = root._disposing;
                 disposePrefix(child, childOptions, true);
-                detachDomWithAnimation(child);
+                if (child.element?.isConnected !== false)
+                    detachDomWithAnimation(child);
                 nodes.push(child);
                 parents.push(n);
             }
@@ -5429,68 +5443,24 @@ function disposeRemainderSync(root, options, asChild, rootDetached) {
     return null;
 }
 const BASE_PROTO = {
+    get emiters() {
+        const base = this;
+        return base._emiters ??= new ComponentEmiter(base.owner);
+    },
     _offAll() {
-        const c = this.owner;
-        if (!c._eventHandlers)
-            return;
-        for (const [full, set] of c._eventHandlers) {
-            const name = full.split(":")[0];
-            const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-            for (const rec of set) {
-                if (!rec || !rec.wrapped) {
-                    continue;
-                }
-                if (rec.domEvent === false) {
-                    continue;
-                }
-                const cap = rec.capture === true;
-                try {
-                    c.element.removeEventListener(evt, rec.wrapped, cap);
-                }
-                catch { }
-                try {
-                    if (rec.capture === undefined) {
-                        c.element.removeEventListener(evt, rec.wrapped, !cap);
-                    }
-                }
-                catch { }
-            }
-        }
-        c._eventHandlers.clear();
-        c._eventHandlers = undefined;
+        offAll(this.owner);
     },
     _deactivateBindings() {
-        const c = this.owner;
-        try {
-            c.bindings?.deactivateAll();
-        }
-        catch { }
+        deactivateBindings(this.owner);
     },
     _activateBindings() {
-        const c = this.owner;
-        try {
-            c.bindings?.activateAll();
-        }
-        catch { }
+        activateBindings(this.owner);
     },
     _reactivateBindings() {
-        const c = this.owner;
-        try {
-            c.bindings?.reActivateAll();
-        }
-        catch { }
+        reactivateBindings(this.owner);
     },
     _activatePreBindings() {
-        if (this.prebinding_Activated)
-            return;
-        const c = this.owner;
-        const registered = c.bindings?._items;
-        if (registered && registered.length > 0) {
-            c.bindings.items.filter((x) => x.propertyName == "isWait" || x.propertyName == "display").forEach((b) => {
-                b.activate();
-            });
-        }
-        this.prebinding_Activated = true;
+        activatePreBindings(this.owner);
     },
     _detachDomWithAnimation() {
         detachDomWithAnimation(this.owner);
@@ -5505,13 +5475,184 @@ const BASE_PROTO = {
         deepCleanup(this.owner);
     },
 };
+const EV_SELF = 1;
+const EV_TRUSTED = 2;
+const EV_PREVENT = 4;
+const EV_STOP = 8;
+const EV_CAPTURE = 16;
+const EV_DOM = 32;
+const EV_REMOVED = 64;
+const NO_MODS = [];
+let eventDispatchDepth = 0;
+class EventRecord {
+    constructor(owner, key, original, type, flags) {
+        this.owner = owner;
+        this.key = key;
+        this.original = original;
+        this.type = type;
+        this.flags = flags;
+        this.next = undefined;
+    }
+    handleEvent(ev) {
+        const flags = this.flags;
+        const owner = this.owner;
+        if ((flags & EV_SELF) !== 0 && ev.target !== owner.element)
+            return;
+        if ((flags & EV_TRUSTED) !== 0 && !ev.isTrusted)
+            return;
+        const cb = this.original;
+        let res;
+        try {
+            if (cb && cb.length <= 1) {
+                res = cb(ev);
+            }
+            else if (cb) {
+                res = cb(owner, ev);
+            }
+        }
+        catch (error) {
+            reportError('MJX123', error, this.type);
+        }
+        if (res && typeof res.then === 'function') {
+            const type = this.type;
+            res.then(undefined, (error) => reportError('MJX123', error, type));
+        }
+        if ((flags & EV_PREVENT) !== 0) {
+            preventEvent(ev);
+        }
+        if ((flags & EV_STOP) !== 0) {
+            stopEvent(ev);
+        }
+        if (res && res.cancel === true) {
+            preventEvent(ev);
+            stopEvent(ev);
+        }
+    }
+}
+function preventEvent(ev) {
+    if (typeof ev?.preventDefault === 'function')
+        ev.preventDefault();
+}
+function stopEvent(ev) {
+    if (typeof ev?.stopPropagation === 'function')
+        ev.stopPropagation();
+}
+function addEventRecord(c, record) {
+    let last = c._eventHandlers;
+    if (last === undefined) {
+        c._eventHandlers = record;
+        return;
+    }
+    while (last.next !== undefined)
+        last = last.next;
+    last.next = record;
+}
+function compactEventRecords(c) {
+    let head;
+    let tail;
+    for (let r = c._eventHandlers; r !== undefined; r = r.next) {
+        if ((r.flags & EV_REMOVED) !== 0)
+            continue;
+        if (tail === undefined)
+            head = r;
+        else
+            tail.next = r;
+        tail = r;
+    }
+    if (tail !== undefined)
+        tail.next = undefined;
+    c._eventHandlers = head;
+}
+function hasEventKey(c, key) {
+    for (let r = c._eventHandlers; r !== undefined; r = r.next) {
+        if ((r.flags & EV_REMOVED) === 0 && r.key === key)
+            return true;
+    }
+    return false;
+}
+function offAll(c) {
+    const head = c._eventHandlers;
+    if (head === undefined)
+        return;
+    for (let r = head; r !== undefined; r = r.next) {
+        if ((r.flags & (EV_DOM | EV_REMOVED)) !== EV_DOM) {
+            continue;
+        }
+        try {
+            c.element.removeEventListener(r.type, r, (r.flags & EV_CAPTURE) !== 0);
+        }
+        catch { }
+    }
+    c._eventHandlers = undefined;
+}
+function deactivateBindings(c) {
+    try {
+        if (c._bindings?._items?.length)
+            c._bindings.deactivateAll();
+    }
+    catch { }
+}
+function activateBindings(c) {
+    try {
+        c._bindings?.activateAll();
+    }
+    catch { }
+}
+function reactivateBindings(c) {
+    try {
+        c._bindings?.reActivateAll();
+    }
+    catch { }
+}
+function activatePreBindings(c) {
+    if ((c._flags & F_PREBOUND) !== 0)
+        return;
+    const registered = c._bindings?._items;
+    if (registered && registered.length > 0) {
+        c._bindings.items.filter((x) => x.propertyName == "isWait" || x.propertyName == "display").forEach((b) => {
+            b.activate();
+        });
+    }
+    c._flags |= F_PREBOUND;
+}
 function createBaseCtx(owner) {
     const base = Object.create(BASE_PROTO);
     base.owner = owner;
-    base.prebinding_Activated = false;
-    base.emiters = new ComponentEmiter(owner);
     return base;
 }
+function controlsOwner(collection) {
+    return collection.owner;
+}
+const NO_CHILDREN = Object.freeze([]);
+const NO_BINDINGS = Object.freeze([]);
+function childrenOf(c) {
+    return c._controls?.items ?? NO_CHILDREN;
+}
+function createOwnedControls(c) {
+    const controls = new ControlCollection(c);
+    controls.onAdd = ownerControlAdded;
+    controls.onAddBeforeBuild = ownerControlAddedBeforeBuild;
+    controls.onRemove = ownerControlRemoved;
+    return controls;
+}
+function ownerControlAdded(c) {
+    const owner = controlsOwner(this);
+    if (hasEventKey(owner, 'controladded'))
+        owner.motif.trigger('controladded', { control: c });
+    if (!owner.isVisible && owner.element?.nodeType === Node.COMMENT_NODE)
+        return;
+    ComponentHelper.internalBuild.call(owner, c);
+}
+function ownerControlAddedBeforeBuild(c) {
+    const owner = controlsOwner(this);
+    if (hasEventKey(owner, 'controladded'))
+        owner.motif.trigger('controladded', { control: c });
+}
+function ownerControlRemoved(c) {
+    const owner = controlsOwner(this);
+    if (hasEventKey(owner, 'controlremoved'))
+        owner.motif.trigger('controlremoved', { control: c });
+}
 const fragmentCloseMarkers = new WeakMap();
 const LIFECYCLE_X_EVENTS = new Set([
     'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
@@ -5550,37 +5691,83 @@ function createScopedContext(app, owner) {
     });
 }
 class ComponentBase extends Disposable {
-    motif = new ComponentMotif(this, new ComponentOptionsImpl(this));
-    element;
-    props;
-    isBuilt = false;
-    isInitialized = false;
-    isDisposed = false;
-    isConfigured = false;
-    isPainting = false;
-    isPainted = false;
-    isVisible = true;
-    controls = new ControlCollection(this);
-    _eventHandlers;
-    _isWait = false;
-    class = new controlClass(this);
-    attr = new controlAttribute(this);
-    bindings = new BindingCollection(this);
-    /** style(fn) izleyicisi: tek tek tutulur, yeniden çağrıda önceki durdurulur. */
-    _styleFx;
+    get motif() {
+        return this._motif !== undefined ? this._motif : (this._motif = new ComponentMotif(this, (this.isDisposed && !this.element ? undefined : new ComponentOptionsImpl(this))));
+    }
+    set motif(value) {
+        this._motif = value;
+    }
+    get isBuilt() {
+        return (this._flags & F_BUILT) !== 0;
+    }
+    set isBuilt(value) {
+        this._flags = value ? this._flags | F_BUILT : this._flags & ~F_BUILT;
+    }
+    get isInitialized() {
+        return (this._flags & F_INITIALIZED) !== 0;
+    }
+    set isInitialized(value) {
+        this._flags = value ? this._flags | F_INITIALIZED : this._flags & ~F_INITIALIZED;
+    }
+    get isDisposed() {
+        return (this._flags & F_DISPOSED) !== 0;
+    }
+    set isDisposed(value) {
+        this._flags = value ? this._flags | F_DISPOSED : this._flags & ~F_DISPOSED;
+    }
+    get isConfigured() {
+        return (this._flags & F_CONFIGURED) !== 0;
+    }
+    set isConfigured(value) {
+        this._flags = value ? this._flags | F_CONFIGURED : this._flags & ~F_CONFIGURED;
+    }
+    get isPainting() {
+        return (this._flags & F_PAINTING) !== 0;
+    }
+    set isPainting(value) {
+        this._flags = value ? this._flags | F_PAINTING : this._flags & ~F_PAINTING;
+    }
+    get isPainted() {
+        return (this._flags & F_PAINTED) !== 0;
+    }
+    set isPainted(value) {
+        this._flags = value ? this._flags | F_PAINTED : this._flags & ~F_PAINTED;
+    }
+    get isVisible() {
+        return (this._flags & F_HIDDEN) === 0;
+    }
+    set isVisible(value) {
+        this._flags = value ? this._flags & ~F_HIDDEN : this._flags | F_HIDDEN;
+    }
+    get controls() {
+        return this._controls !== undefined || (this.isDisposed && !this.element) ? this._controls : (this._controls = createOwnedControls(this));
+    }
+    set controls(value) {
+        this._controls = value;
+    }
+    get class() {
+        return this._class !== undefined || (this.isDisposed && !this.element) ? this._class : (this._class = new controlClass(this));
+    }
+    set class(value) {
+        this._class = value;
+    }
+    get attr() {
+        return this._attr !== undefined || (this.isDisposed && !this.element) ? this._attr : (this._attr = new controlAttribute(this));
+    }
+    set attr(value) {
+        this._attr = value;
+    }
+    get bindings() {
+        return this._bindings !== undefined || (this.isDisposed && !this.element) ? this._bindings : (this._bindings = new BindingCollection(this));
+    }
+    set bindings(value) {
+        this._bindings = value;
+    }
     useModel(modelCtor) {
         return reactive(modelCtor);
     }
     _computeHideStrategy() {
-        const cfg = this.motif.options?.hideStrategy ?? 'auto';
-        if (cfg === 'placeholder')
-            return 'placeholder';
-        if (cfg === 'detach')
-            return 'detach';
-        if (this.motif.options?.__fromList || typeof this.motif.options?.indexkey !== 'undefined' || typeof this.motif.options?.__key !== 'undefined') {
-            return 'detach';
-        }
-        return 'placeholder';
+        return keepsTrace(this) ? 'placeholder' : 'detach';
     }
     _isInDom() {
         try {
@@ -5597,7 +5784,7 @@ class ComponentBase extends Disposable {
         }
     }
     set isWait(value) {
-        this._isWait = value;
+        this._flags = value ? this._flags | F_WAIT : this._flags & ~F_WAIT;
         if (this.isBuilt) {
             if (value) {
                 this.motif.hide();
@@ -5612,10 +5799,22 @@ class ComponentBase extends Disposable {
         }
     }
     get isWait() {
-        return this._isWait;
+        return (this._flags & F_WAIT) !== 0;
     }
     constructor(element, props = {}) {
         super();
+        this._motif = undefined;
+        this._flags = 0;
+        this._controls = undefined;
+        this._class = undefined;
+        this._attr = undefined;
+        this._bindings = undefined;
+        this._baseCtx = undefined;
+        this._init = undefined;
+        this._leaveContainer = undefined;
+        this.parent = null;
+        const asComponentRoot = constructingComponentRoot;
+        constructingComponentRoot = false;
         recordServiceOwner(this);
         if (this.onElementCreating) {
             this.element = this.onElementCreating.call(this);
@@ -5626,44 +5825,38 @@ class ComponentBase extends Disposable {
         else {
             this.element = element;
         }
-        if (props) {
-            const refs = extractRefs(props, this);
-            if (refs.length > 0) {
-                for (const fn of takePendingRefs(this, refs)) {
-                    callReported(() => fn(this), 'MJX122', 'ref');
-                }
-            }
+        if (this.element?.nodeType !== 3) {
+            if (this._controls === undefined)
+                this._controls = new ControlCollection(this);
         }
-        props && ParseProps(props, this);
+        const refs = props ? extractRefs(props, this) : [];
+        if (props && ParseProps(props, this))
+            props = {};
         applyComponentOptions(props?.options, this);
         this.props = props;
         // (class/style/id/tabindex/role/aria-*/data-*) kök düğüme (root node) düşer, prop'lar this.props'ta kalır.
         if (props) {
             const ctor0 = new.target;
-            const plain = ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase;
+            const plain = !asComponentRoot && (ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase);
             if (plain)
                 applyPlainElementProps(props, this);
             else
                 applyFallthroughProps(props, this);
         }
+        if (refs.length > 0) {
+            for (const fn of takePendingRefs(this, refs)) {
+                callReported(() => fn(this), 'MJX122', 'ref');
+            }
+        }
         ComponentHelper.callOnInitializing(this);
         if (this.isDisposed)
             return;
-        this.controls.onAdd = (c) => {
-            if (this._eventHandlers?.has('controladded'))
-                this.motif.trigger('controladded', { control: c });
-            if (this.isWait || this.parent?.isWait)
-                return;
-            ComponentHelper.internalBuild.call(this, c);
-        };
-        this.controls.onAddBeforeBuild = (c) => {
-            if (this._eventHandlers?.has('controladded'))
-                this.motif.trigger('controladded', { control: c });
-        };
-        this.controls.onRemove = (c) => {
-            if (this._eventHandlers?.has('controlremoved'))
-                this.motif.trigger('controlremoved', { control: c });
-        };
+        const controls = this._controls;
+        if (controls) {
+            controls.onAdd = ownerControlAdded;
+            controls.onAddBeforeBuild = ownerControlAddedBeforeBuild;
+            controls.onRemove = ownerControlRemoved;
+        }
         ComponentHelper.callOnInitialized(this);
         const ctor = new.target;
         const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
@@ -5674,10 +5867,9 @@ class ComponentBase extends Disposable {
             this._base._configDeferred = true;
         }
     }
-    childs;
-    _base = createBaseCtx(this);
-    parent = null;
-    _scopedContext;
+    get _base() {
+        return this._baseCtx !== undefined || (this.isDisposed && !this.element) ? this._baseCtx : (this._baseCtx = createBaseCtx(this));
+    }
     get context() {
         const parentCtx = this.parent?.context;
         const app = parentCtx?.[RAW_APPLICATION] ?? parentCtx ?? teardownApplications.get(this) ?? Application.main;
@@ -5704,7 +5896,7 @@ class ComponentBase extends Disposable {
     build(building = true) {
         checkReservedMembers(this);
         ComponentHelper.callConfigured(this);
-        this._base._activatePreBindings();
+        activatePreBindings(this);
         if (this.isDisposed || !this.element || this.isWait) {
             return;
         }
@@ -5741,7 +5933,7 @@ class ComponentBase extends Disposable {
         }
         const deferredSelectValue = this.element?.nodeName === 'SELECT'
             ? this.bindings.items.filter(b => b.propertyName === 'value')
-            : [];
+            : NO_BINDINGS;
         if (deferredSelectValue.length) {
             try {
                 this.bindings.items.filter(b => !deferredSelectValue.includes(b)).forEach(b => b.activate());
@@ -5749,32 +5941,41 @@ class ComponentBase extends Disposable {
             catch { }
         }
         else {
-            this._base._activateBindings();
+            activateBindings(this);
         }
-        for (const element of this.controls.items.filter(c => !c.isWait)) {
-            element.parent = this;
-            element.build(false);
+        const kids = childrenOf(this);
+        for (const element of kids.length ? kids.slice() : kids) {
+            var target = isFragment ? this.motif.options.cache : this.element;
+            if (!element.isWait) {
+                element.parent = this;
+                element.build(false);
+            }
             if (element.isWait) {
+                if (keepsTrace(element)) {
+                    const opts = element.motif.options;
+                    (building ? ph : target).appendChild(opts.placeholder ?? (opts.placeholder = dom.createComment("h")));
+                }
                 continue;
             }
-            var target = isFragment ? this.motif.options.cache : this.element;
             if (building) {
-                if (element.motif.options.cache) {
-                    ph.appendChild(element.motif.options.cache);
+                const cache = optionsOf(element)?.cache;
+                if (cache) {
+                    ph.appendChild(cache);
                 }
                 else {
                     ph.appendChild(element.element);
                 }
             }
             else {
-                if (element.motif.options.cache) {
-                    target.appendChild(element.motif.options.cache);
+                const cache = optionsOf(element)?.cache;
+                if (cache) {
+                    target.appendChild(cache);
                 }
                 else {
                     target.appendChild(element.element);
                 }
             }
-            if (element._base?._inactive && element.isVisible) {
+            if (element._baseCtx?._inactive && element.isVisible) {
                 ComponentHelper.activateTree(element);
             }
         }
@@ -5837,10 +6038,10 @@ class ComponentBase extends Disposable {
         this.controls.forEach(c => {
             c.setState();
         });
-        this._base._reactivateBindings();
+        reactivateBindings(this);
     }
     reState() {
-        this._base._reactivateBindings();
+        reactivateBindings(this);
         this.controls.forEach(c => {
             c.reState();
         });
@@ -5964,6 +6165,9 @@ class ComponentBase extends Disposable {
         if (this.isVisible) {
             return;
         } /* A*/
+        if (this.isWait) {
+            return;
+        }
         if (this.parent && enterModeOf(this.parent) === 'out-in') {
             const showHost = (this.motif.options.placeholder?.parentNode)
                 ?? findAppendableComponent(this.parent)?.element;
@@ -5985,7 +6189,7 @@ class ComponentBase extends Disposable {
         /** A*/
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
-            ComponentHelper.callVisibilityChanged(this);
+            ComponentHelper.callVisibilityChanged(this, true);
             if (this.isDisposed) {
                 return;
             }
@@ -6002,6 +6206,10 @@ class ComponentBase extends Disposable {
             const expectedParent = findAppendableComponent(this.parent)?.element;
             if (this.motif.options.placeholder && placeholderParent && placeholderParent !== expectedParent) {
                 reportWarning('MJX106', []);
+                ComponentHelper.callVisibilityChanged(this, true);
+                if (this.isDisposed) {
+                    return;
+                }
                 this.isVisible = true;
                 if (this.parent?.isBuilt) {
                     ComponentHelper.internalBuild.call(this.parent, this);
@@ -6010,11 +6218,12 @@ class ComponentBase extends Disposable {
             }
             /** A*/
             wantsEnterTransition(this) && this.motif.options.transition.enterTransition(() => { });
-            ComponentHelper.callVisibilityChanged(this);
+            ComponentHelper.callVisibilityChanged(this, true);
             if (this.isDisposed) {
                 return;
             }
             if (this.element.nodeType === Node.COMMENT_NODE) {
+                this.controls.items.filter(c => !c.isBuilt).forEach(c => ComponentHelper.internalBuild.call(this, c));
                 this.controls.forEach(c => {
                     c.motif.show();
                 });
@@ -6022,6 +6231,10 @@ class ComponentBase extends Disposable {
                 ComponentHelper.activateTree(this, false);
                 return;
             }
+            if (!this.isBuilt) {
+                this.isVisible = true;
+                return;
+            }
             var parent = this.motif.options.placeholder?.parentElement;
             if (parent) {
                 parent.replaceChild(this.element, this.motif.options.placeholder);
@@ -6040,7 +6253,7 @@ class ComponentBase extends Disposable {
         }
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
-            ComponentHelper.callVisibilityChanged(this);
+            ComponentHelper.callVisibilityChanged(this, false);
             if (this.isDisposed) {
                 return;
             }
@@ -6055,7 +6268,7 @@ class ComponentBase extends Disposable {
             if (skip)
                 transition.skipNextLeave = false;
             const finish = () => {
-                ComponentHelper.callVisibilityChanged(this);
+                ComponentHelper.callVisibilityChanged(this, false);
                 if (this.isDisposed) {
                     return;
                 }
@@ -6138,61 +6351,36 @@ class ComponentBase extends Disposable {
                 return this;
             }
         }
-        const [name, ...mods] = full.split(":");
+        const colon = full.indexOf(":");
+        const name = colon < 0 ? full : full.slice(0, colon);
+        const mods = colon < 0 ? NO_MODS : full.slice(colon + 1).split(":");
         const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-        const options = {};
-        if (mods.includes("once"))
-            options.once = true;
-        if (mods.includes("passive"))
-            options.passive = true;
-        if (mods.includes("capture"))
-            options.capture = true;
-        const wrapped = (ev) => {
-            if (mods.includes("self") && ev.target !== this.element)
-                return;
-            if (mods.includes("trusted") && !ev.isTrusted)
-                return;
-            let res;
-            try {
-                if (cb && cb.length <= 1) {
-                    res = cb(ev);
-                }
-                else if (cb) {
-                    res = cb(this, ev);
-                }
-            }
-            catch (error) {
-                reportError('MJX123', error, evt);
-            }
-            if (res && typeof res.then === 'function') {
-                res.then(undefined, (error) => reportError('MJX123', error, evt));
-            }
-            const prevent = () => { if (typeof ev?.preventDefault === 'function')
-                ev.preventDefault(); };
-            const stop = () => { if (typeof ev?.stopPropagation === 'function')
-                ev.stopPropagation(); };
-            if (mods.includes("prevent")) {
-                prevent();
-            }
-            if (mods.includes("stop")) {
-                stop();
-            }
-            if (res && res.cancel === true) {
-                prevent();
-                stop();
-            }
-        };
+        let flags = domEvent ? EV_DOM : 0;
+        let options;
+        if (mods.length) {
+            options = {};
+            if (mods.includes("once"))
+                options.once = true;
+            if (mods.includes("passive"))
+                options.passive = true;
+            if (mods.includes("capture")) {
+                options.capture = true;
+                flags |= EV_CAPTURE;
+            }
+            if (mods.includes("self"))
+                flags |= EV_SELF;
+            if (mods.includes("trusted"))
+                flags |= EV_TRUSTED;
+            if (mods.includes("prevent"))
+                flags |= EV_PREVENT;
+            if (mods.includes("stop"))
+                flags |= EV_STOP;
+        }
+        const record = new EventRecord(this, full.toLowerCase(), cb, evt, flags);
         if (domEvent) {
-            this.element.addEventListener(evt, wrapped, options);
-        }
-        this._eventHandlers ??= new Map();
-        const key = full.toLowerCase();
-        const set = this._eventHandlers.get(key) ?? new Set();
-        set.add({ original: cb, wrapped, capture: !!options.capture, domEvent: !!domEvent, type: evt });
-        this._eventHandlers.set(key, set);
-        this._register(disposableCore.toDisposable(() => {
-            this.motif.off(event, cb);
-        }));
+            this.element.addEventListener(evt, record, options);
+        }
+        addEventRecord(this, record);
         return this;
     }
     async _trigger(event, ev) {
@@ -6201,15 +6389,20 @@ class ComponentBase extends Disposable {
         }
         const name = String(event).toLowerCase();
         safeCall(() => {
-            var eh = this._eventHandlers?.get(name);
-            if (eh) {
-                eh.forEach(rec => {
+            eventDispatchDepth++;
+            try {
+                for (let r = this._eventHandlers; r !== undefined; r = r.next) {
+                    if ((r.flags & EV_REMOVED) !== 0 || r.key !== name)
+                        continue;
                     try {
-                        rec.wrapped(ev);
+                        r.handleEvent(ev);
                     }
                     catch {
                     }
-                });
+                }
+            }
+            finally {
+                eventDispatchDepth--;
             }
         }, 'trigger');
         return this;
@@ -6232,38 +6425,24 @@ class ComponentBase extends Disposable {
                 return this;
             }
             if (LIFECYCLE_X_EVENTS.has(xName)) {
-                this._base.emiters.off("on" + xName, cb);
+                this._base._emiters?.off("on" + xName, cb);
             }
             return this;
         }
-        const name = full.split(":")[0];
-        const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-        if (!this._eventHandlers)
-            return this;
-        const set = this._eventHandlers.get(full);
-        if (!set)
-            return this;
-        for (const rec of Array.from(set)) {
-            if (rec.original === cb) {
-                if (rec.domEvent !== false) {
-                    const cap = rec.capture === true;
-                    safeCall(() => { this.element.removeEventListener(evt, rec.wrapped, cap); }, 'off.removeEventListener');
-                    safeCall(() => {
-                        if (rec.capture === undefined) {
-                            this.element.removeEventListener(evt, rec.wrapped, !cap);
-                        }
-                    }, 'off.removeEventListener.fallback');
-                }
-                set.delete(rec);
-                break;
+        for (let r = this._eventHandlers; r !== undefined; r = r.next) {
+            if ((r.flags & EV_REMOVED) !== 0 || r.key !== full || r.original !== cb)
+                continue;
+            if ((r.flags & EV_DOM) !== 0) {
+                const rec = r;
+                safeCall(() => { this.element.removeEventListener(rec.type, rec, (rec.flags & EV_CAPTURE) !== 0); }, 'off.removeEventListener');
             }
+            r.flags |= EV_REMOVED;
+            break;
         }
-        if (set.size === 0)
-            this._eventHandlers.delete(full);
+        if (eventDispatchDepth === 0)
+            compactEventRecords(this);
         return this;
     }
-    /** Süren bertaraf: ikinci bir dispose/disposeAsync çağrısı yenisini başlatmaz, bunu bekler. */
-    _disposing;
     dispose(options = { deep: true }) {
         if (this.isDisposed) {
             return Promise.resolve();
@@ -6334,8 +6513,6 @@ class ComponentBase extends Disposable {
             }
         });
     }
-    _siblingsApi;
-    _siblingsSet;
     get siblings() {
         if (this._siblingsSet) {
             return this._siblingsApi;
@@ -6527,6 +6704,16 @@ function takePendingRefs(component, ref) {
     }
     return pending;
 }
+function disposeUnplacedChilds(owner, kids) {
+    if (!Array.isArray(kids) || !kids.some(kid => kid instanceof ComponentBase))
+        return;
+    owner.motif.setDisposable(() => {
+        for (const kid of kids) {
+            if (kid instanceof ComponentBase && !kid.isDisposed && !kid.parent)
+                kid.dispose();
+        }
+    });
+}
 const isCallableRef = (ref) => typeof ref === 'function' || Array.isArray(ref);
 function extractRefs(props, component) {
     const refs = [];
@@ -6578,26 +6765,38 @@ function collectLifecycleHandlers(component, lowerKey, value) {
     const fns = Array.isArray(value) ? value : [value];
     if (fns.length === 0 || !fns.every(fn => typeof fn === 'function'))
         return false;
-    component._base[listName] ??= [];
-    const list = component._base[listName];
-    for (const fn of fns) {
-        if (!list.includes(fn))
-            list.push(fn);
+    const target = component;
+    let from = 0;
+    if (listName === '_initializeComponentHandlers') {
+        if (target._init === undefined && !target._baseCtx?._initializeComponentHandlers) {
+            target._init = fns[0];
+            from = 1;
+        }
+    }
+    if (from >= fns.length)
+        return true;
+    const base = target._base;
+    for (let i = from; i < fns.length; i++) {
+        const fn = fns[i];
+        if (listName === '_initializeComponentHandlers' && fn === target._init)
+            continue;
+        const slot = base[listName];
+        if (slot === undefined)
+            base[listName] = fn;
+        else if (typeof slot === 'function') {
+            if (slot !== fn)
+                base[listName] = [slot, fn];
+        }
+        else if (!slot.includes(fn))
+            slot.push(fn);
     }
     return true;
 }
 function ParseProps(props, component) {
     if (props) {
-        if (component.motif.options.props) {
-            Object.assign(component.motif.options.props, props);
-        }
-        else {
-            component.motif.options.props = {};
-            Object.assign(component.motif.options.props, props);
-        }
         var keys = Object.keys(props);
         if (keys.length === 0)
-            return;
+            return false;
         keys.forEach(key => {
             if (key == 'initializeComponent' || key == 'oninitializeComponent' || key.startsWith('on')) {
                 if (collectLifecycleHandlers(component, key.toLowerCase(), props[key])) {
@@ -6608,6 +6807,7 @@ function ParseProps(props, component) {
             else if (key == 'childs') {
                 const flat = [].concat(...props[key]);
                 component.childs = flat;
+                disposeUnplacedChilds(component, flat);
                 delete props[key];
             }
             else if (key === 'transition') {
@@ -6652,9 +6852,14 @@ function ParseProps(props, component) {
                 component.motif.options._preconfig = props[key];
                 delete props[key];
             }
+            else if (key === '__childExpr') {
+                delete props[key];
+            }
             else ;
         });
+        return typeof props === 'object' && Reflect.ownKeys(props).length === 0;
     }
+    return false;
 }
 const _transitionSources = new WeakMap();
 function setTransition(component, value, live) {
@@ -6825,6 +7030,16 @@ const FALLTHROUGH_KEYS = new Set(['class', 'className', 'style', 'id', 'tabindex
 function isFallthroughKey(key) {
     return FALLTHROUGH_KEYS.has(key) || key.startsWith('aria-') || key.startsWith('data-');
 }
+let constructingComponentRoot = false;
+function constructComponentRoot(make) {
+    constructingComponentRoot = true;
+    try {
+        return make();
+    }
+    finally {
+        constructingComponentRoot = false;
+    }
+}
 function applyFallthroughProps(props, component) {
     if (!props || typeof props !== 'object' || component.isDisposed)
         return;
@@ -6874,35 +7089,51 @@ function findAppendableComponent(component) {
         return null;
     }, 'findAppendableComponent', null);
 }
+const attachWaiters = new Set();
+let attachObserver = null;
+function releaseAttachObserver() {
+    if (attachWaiters.size || !attachObserver) {
+        return;
+    }
+    try {
+        attachObserver.disconnect();
+    }
+    catch { /* ignore */ }
+    attachObserver = null;
+}
+function flushAttachWaiters() {
+    for (const waiter of [...attachWaiters]) {
+        if (!attachWaiters.has(waiter) || !document.contains(waiter.element)) {
+            continue;
+        }
+        attachWaiters.delete(waiter);
+        try {
+            waiter.callback();
+        }
+        catch (error) {
+            queueMicrotask(() => { throw error; });
+        }
+    }
+    releaseAttachObserver();
+}
 function onElementAttached(element, callback) {
     if (document.contains(element)) {
         callback();
         return null;
     }
-    let done = false;
-    const observer = new MutationObserver(() => {
-        if (done) {
-            return;
-        }
-        if (document.contains(element)) {
-            done = true;
-            observer.disconnect();
-            callback();
-        }
-    });
-    observer.observe(document.documentElement, {
-        childList: true,
-        subtree: true,
-    });
+    const waiter = { element, callback };
+    attachWaiters.add(waiter);
+    if (!attachObserver) {
+        attachObserver = new MutationObserver(flushAttachWaiters);
+        attachObserver.observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
     return () => {
-        if (done) {
-            return;
+        if (attachWaiters.delete(waiter)) {
+            releaseAttachObserver();
         }
-        done = true;
-        try {
-            observer.disconnect();
-        }
-        catch { /* ignore */ }
     };
 }
 function notifyActivated(component) {
@@ -6958,8 +7189,6 @@ function createDeclaredElement(tag, ctor, props) {
     return dom.createElement(tag, props);
 }
 class Component extends ComponentBase {
-    static elementTag;
-    static elementNamespace;
     constructor() {
         const derivedCtor = new.target;
         var args = arguments;
@@ -7039,9 +7268,11 @@ class Component extends ComponentBase {
             // Alt sınıflar initializeComponent'i ezdiği için FragmentNode.initializeComponent'e güvenilemez.
             const kids = this.childs;
             if (Array.isArray(kids) && kids.length) {
-                for (const kid of kids) {
-                    if (kid)
-                        this.controls.add(kid);
+                if (derivedCtor?._placesChilds !== true) {
+                    for (const kid of kids) {
+                        if (kid)
+                            this.controls.add(kid);
+                    }
                 }
             }
         }
@@ -7063,6 +7294,7 @@ function applyJsxFrameworkProps(target, props, refs) {
     if (!(target instanceof ComponentBase))
         return target;
     applyRefs(target, refs.concat(extractRefs(props)));
+    disposeUnplacedChilds(target, props.childs);
     // Fonksiyon bileşeni etiketindeki ortak öznitelikler (class/id/aria-*…) döndürülen köke düşer.
     // Kök `<div {...props}/>` ise aynı değerler zaten uygulanmıştır; ikinci kez uygulanmaz.
     applyFallthroughProps(props, target);
@@ -7073,8 +7305,7 @@ function applyJsxFrameworkProps(target, props, refs) {
     const runover = props.runover;
     if (!runover || typeof runover !== 'object')
         return target;
-    const handlers = target._base?._onConfigHandlers;
-    const configuredBefore = Array.isArray(handlers) ? handlers.length : 0;
+    const configuredBefore = handlerCount(target, '_onConfigHandlers');
     const initializingBefore = handlerCount(target, '_onInitializingHandlers');
     const initializedBefore = handlerCount(target, '_onInitializedHandlers');
     ParseProps(runover, target);
@@ -7088,12 +7319,9 @@ function applyJsxFrameworkProps(target, props, refs) {
         if (typeof pre === 'function') {
             safeCallSilent(() => pre(target), 'motifComponent.preconfig');
         }
-        const after = target._base?._onConfigHandlers;
-        if (Array.isArray(after)) {
-            for (let i = configuredBefore; i < after.length; i++) {
-                const fn = after[i];
-                callReported(() => fn(target, { cancel: false }), 'MJX122', 'onConfig');
-            }
+        for (let i = configuredBefore; i < handlerCount(target, '_onConfigHandlers'); i++) {
+            const fn = hookList(target, '_onConfigHandlers')[i];
+            callReported(() => fn(target, { cancel: false }), 'MJX122', 'onConfig');
         }
     }
     return target;
@@ -7106,18 +7334,18 @@ function applyRefs(target, refs) {
     }
     return target;
 }
+function hookList(target, listName) {
+    const slot = target._base?.[listName];
+    return !slot ? [] : typeof slot === 'function' ? [slot] : slot;
+}
 function handlerCount(target, listName) {
-    const list = target._base?.[listName];
-    return Array.isArray(list) ? list.length : 0;
+    return hookList(target, listName).length;
 }
 function callAddedHandlers(target, listName, from, hook) {
-    const list = target._base?.[listName];
-    if (!Array.isArray(list))
-        return;
-    for (let i = from; i < list.length; i++) {
+    for (let i = from; i < handlerCount(target, listName); i++) {
         if (target.isDisposed)
             return;
-        const fn = list[i];
+        const fn = hookList(target, listName)[i];
         callReported(() => fn(target, { cancel: false }), 'MJX122', hook);
     }
 }
@@ -7140,6 +7368,11 @@ function resolveChildExpression(probe) {
 function motifComponent(element, props) {
     // Etiket adı: element yaratımı (HTML/SVG) ve spread prop uygulaması Component ctor'ının string parametresinde
     if (typeof element === "string") {
+        if (typeof props === "function") {
+            const compiled = new Component(element);
+            compiled._init = props;
+            return compiled;
+        }
         if (element === "text" && props && props.__childExpr) {
             const resolved = resolveChildExpression(props.__childExpr);
             if (resolved !== undefined)
@@ -7201,7 +7434,9 @@ function resolveToComponent(input, props) {
     return resolved;
 }
 function materializeOptionsObject(spec, props) {
-    const result = motifComponent(spec.el, props);
+    const result = typeof spec.el === 'string'
+        ? constructComponentRoot(() => motifComponent(spec.el, props))
+        : motifComponent(spec.el, props);
     Object.getOwnPropertyNames(spec).forEach(key => {
         if (key !== 'el' && key !== 'ctor') {
             result[key] = spec[key];
@@ -7237,7 +7472,7 @@ class FragmentNode extends Component {
             }
         }
         safeCallSilent(() => {
-            const nodes = this.motif.options?.props?.nodes;
+            const nodes = this.props?.nodes;
             if (Array.isArray(nodes) && nodes.length) {
                 for (const n of nodes) {
                     if (n)
@@ -7399,11 +7634,10 @@ function $(description, attrs, ...children) {
 
 // import { dom } from "../browser";
 class ControlCollection {
-    owner;
     constructor(owner) {
         this.owner = owner;
+        this.items = [];
     }
-    items = [];
     add() {
         const count = arguments.length;
         if (count === 0)
@@ -7483,7 +7717,7 @@ class ControlCollection {
         this.items.splice(index, 1);
         if (control.isDisposed)
             return Promise.resolve();
-        control._base && (control._base._leaveContainer = this.owner);
+        control._leaveContainer = this.owner;
         control.parent = null;
         return runLeaveThenDetach(control, () => { if (this.onRemove)
             this.onRemove(control); });
@@ -7513,7 +7747,7 @@ class ControlCollection {
         if (index === -1)
             return;
         this.items.splice(index, 1);
-        control._base && (control._base._leaveContainer = this.owner);
+        control._leaveContainer = this.owner;
         control.parent = null;
     }
     async clearAsync() {
@@ -7538,9 +7772,6 @@ class ControlCollection {
     map(callbackfn) {
         return this.items.map(callbackfn);
     }
-    onAdd;
-    onRemove;
-    onAddBeforeBuild;
     move(control, before) {
         if (!control || control.isDisposed)
             return;
@@ -7568,14 +7799,29 @@ class ControlCollection {
             const insertAt = newBeforeIndex >= 0 ? newBeforeIndex : this.items.length;
             this.items.splice(insertAt, 0, control);
         }
-        if (control.isWait) {
-            return;
-        }
         const container = findAppendableElement(this.owner);
-        if (!container)
+        if (!container || !domAnchor(control, container))
             return;
-        const referenceNode = before ? before.element : computeAppendReference(this.owner);
-        moveComponentDomRange(control, container, referenceNode);
+        const at = before ? this.items.indexOf(before) : -1;
+        moveComponentDomRange(control, container, at >= 0 ? anchorFrom(this.owner, this.items, at, container) : computeAppendReference(this.owner));
+    }
+    _reorder(order, stable) {
+        const container = findAppendableElement(this.owner);
+        if (container) {
+            let ref = computeAppendReference(this.owner);
+            for (let i = order.length - 1; i >= 0; i--) {
+                const control = order[i];
+                const node = domAnchor(control, container);
+                if (!node)
+                    continue;
+                if (!stable.has(i))
+                    moveComponentDomRange(control, container, ref);
+                ref = node;
+            }
+        }
+        const items = this.items;
+        for (let i = 0; i < order.length; i++)
+            items[i] = order[i];
     }
     moveToIndex(control, index) {
         if (!control || control.isDisposed)
@@ -7612,12 +7858,20 @@ function computeAppendReference(owner) {
     }
     return null;
 }
+function anchorFrom(owner, items, start, container) {
+    for (let i = start; i < items.length; i++) {
+        const anchor = domAnchor(items[i], container);
+        if (anchor)
+            return anchor;
+    }
+    return computeAppendReference(owner);
+}
 /** Bir component'in kök DOM aralığını (tek element veya fragment aralığı) referenceNode öncesine taşır. */
 function moveComponentDomRange(control, container, referenceNode) {
-    const node = control.element;
+    const node = domAnchor(control, container);
     if (!node)
         return;
-    if (node.nodeType !== Node.COMMENT_NODE) {
+    if (node.nodeType !== Node.COMMENT_NODE || node !== control.element) {
         try {
             container.insertBefore(node, referenceNode);
         }
@@ -7700,9 +7954,7 @@ function detachComponentDom(control) {
     if (!node)
         return;
     const opts = control.motif.options;
-    if (node.nodeType === Node.COMMENT_NODE) {
-        if (!node.parentNode)
-            return;
+    if (node.nodeType === Node.COMMENT_NODE && node.parentNode) {
         const close = opts?.closeFragment || null;
         const cache = opts.cache ?? (opts.cache = dom.createDocumentFragment());
         let current = node;
@@ -8175,13 +8427,12 @@ async function navigateHost(host, page, keepOldControl = false) {
 }
 
 class Frame extends Component {
-    current = null;
-    _latestNavigateId = 0;
-    _navLock = Promise.resolve();
-    _navAbort;
-    isBusy = false;
     constructor(props) {
         super(dom.createComment(''), props);
+        this.current = null;
+        this._latestNavigateId = 0;
+        this._navLock = Promise.resolve();
+        this.isBusy = false;
         if (props && props.childs && Array.isArray(props.childs) && props.childs.length > 0) {
             this.controls.add(props.childs);
         }
@@ -8196,7 +8447,6 @@ class Frame extends Component {
     async _clear() {
         await disposeNavigationTarget(this.current);
     }
-    previouspage;
     async navigate(page, keepOldControl = false) {
         await navigateHost(this, page, keepOldControl);
     }
@@ -8206,6 +8456,25 @@ class Frame extends Component {
     }
 }
 
+const SLOT_REGISTERED_EVENT = Symbol('slotRegistered');
+const SLOT_UNREGISTERED_EVENT = Symbol('slotUnregistered');
+class TransportRegistry {
+    static { this.slots = new Map(); }
+    static registerSlot(name, slot) {
+        this.slots.set(name, slot);
+        Application.main.fire(SLOT_REGISTERED_EVENT, { name, slot });
+    }
+    static unregisterSlot(name, slot) {
+        if (this.slots.get(name) === slot) {
+            this.slots.delete(name);
+            Application.main.fire(SLOT_UNREGISTERED_EVENT, { name, slot });
+        }
+    }
+    static getSlot(name) {
+        return this.slots.get(name);
+    }
+}
+
 const ARRAY_MUTATORS = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort']);
 const NOT_META = Symbol('');
 const metaReaders = new Map([
@@ -8343,11 +8612,10 @@ const PATCHED_ARRAY_METHODS = [
 ];
 const isLookupMiss = (outcome) => outcome === false || outcome === -1;
 class ArrayMethods {
-    engine;
     constructor(engine) {
         this.engine = engine;
+        this.get = this.createArrayMethods();
     }
-    get = this.createArrayMethods();
     createArrayMethods() {
         const table = {};
         for (const [name, kind] of PATCHED_ARRAY_METHODS) {
@@ -8539,7 +8807,6 @@ const ReactiveEngineMapper = new WeakSet();
 const AllreactiveMap = new WeakMap();
 function armgetter() { return AllreactiveMap; }
 class ReactiveEngine {
-    _gci;
     startGc(_intervalMs = 10000) { }
     stopGc() { if (this._gci) {
         try {
@@ -8549,31 +8816,30 @@ class ReactiveEngine {
         this._gci = undefined;
     } }
     constructor() {
+        this.DisposeMapper = new LinkedList();
+        this.arrayTriggerCache = new Map();
+        this.ReactiveMap = () => armgetter();
+        this.isReadonly = false;
+        this.superficial = false;
+        this.arrayMethods = new ArrayMethods(this);
+        this.arrayHandler = {
+            get: createGetter(this),
+            set: createSetter(this),
+            has: createHas(),
+            deleteProperty: createDelete(),
+            ownKeys: createOwn()
+        };
+        this.deepHandler = {
+            get: createGetter(this),
+            set: createSetter(this),
+            has: createHas(),
+            deleteProperty: createDelete(),
+            ownKeys: createOwn()
+        };
+        this.collectionHandler = createCollectionHandler(this);
         ReactiveEngineMapper.add(this);
         this.startGc();
     }
-    DisposeMapper = new LinkedList();
-    arrayTriggerCache = new Map();
-    ReactiveMap = () => armgetter();
-    activeCallback;
-    isReadonly = false;
-    superficial = false;
-    arrayMethods = new ArrayMethods(this);
-    arrayHandler = {
-        get: createGetter(this),
-        set: createSetter(this),
-        has: createHas(),
-        deleteProperty: createDelete(),
-        ownKeys: createOwn()
-    };
-    deepHandler = {
-        get: createGetter(this),
-        set: createSetter(this),
-        has: createHas(),
-        deleteProperty: createDelete(),
-        ownKeys: createOwn()
-    };
-    collectionHandler = createCollectionHandler(this);
     reactive(model) {
         if (!isObject(model)) {
             model = { value: model };
@@ -8636,7 +8902,6 @@ class ReactiveEngine {
     ArrayTrigger(target, key, ...args) {
         this.trigger(target, key, args);
     }
-    onValueChanged;
     toRaw(item) {
         return JSON.parse(JSON.stringify(this.deepClone(item)));
     }
@@ -8822,7 +9087,9 @@ function isConstructor(fn) {
     }
 }
 class ServiceCollection {
-    descriptors = new Map();
+    constructor() {
+        this.descriptors = new Map();
+    }
     reset() {
         this.descriptors.clear();
     }
@@ -9079,7 +9346,7 @@ function initOverlayIfEnabled() {
 }
 
 class RouterViewRegistry {
-    static outlets = new Map();
+    static { this.outlets = new Map(); }
     static register(name, scopeId, instance) {
         if (!this.outlets.has(name))
             this.outlets.set(name, new Map());
@@ -9108,9 +9375,12 @@ const RouterViewBuilt = Symbol.for("RouterView.built");
 class RouterView extends Component {
     constructor(props) {
         super(props);
+        this._navLock = Promise.resolve();
+        this.disposingChilds = false;
+        this.current = null;
+        this._latestNavigateId = 0;
+        this.isBusy = false;
     }
-    _navLock = Promise.resolve();
-    _navAbort;
     get __isRouterView() {
         return true;
     }
@@ -9122,11 +9392,6 @@ class RouterView extends Component {
         }
         return ids.join('>');
     }
-    disposingChilds = false;
-    previouspage;
-    current = null;
-    _latestNavigateId = 0;
-    isBusy = false;
     async navigate(page, keepOldControl = false) {
         await navigateHost(this, page, keepOldControl);
     }
@@ -9157,17 +9422,16 @@ const DEFAULT_LIMIT = 60;
 const DEFAULT_SETTLE_MS = 1200;
 const USER_INPUT = ['wheel', 'touchstart', 'keydown', 'mousedown'];
 class ScrollMemory {
-    options;
-    viewport;
-    positions = new Map();
-    currentKey = '';
-    visited = false;
-    restoring = false;
-    cancelFrame = null;
-    disarmAbort = null;
-    offs = [];
-    locationAnchor = true;
     constructor(options = {}, viewport) {
+        this.positions = new Map();
+        this.currentKey = '';
+        this.currentPath = null;
+        this.visited = false;
+        this.restoring = false;
+        this.cancelFrame = null;
+        this.disarmAbort = null;
+        this.offs = [];
+        this.locationAnchor = true;
         this.options = options;
         this.viewport = viewport ?? (options.container ? containerViewport(options.container) : windowViewport());
         this.load();
@@ -9192,11 +9456,13 @@ class ScrollMemory {
         this.remember(this.currentKey, this.viewport.scrollTop());
         this.persist();
     }
-    arrived(uri) {
+    arrived(uri, direction) {
         this.visited = true;
         const { path, hash } = splitUri(uri);
+        const inPage = !!hash && path === this.currentPath && (direction === 'push' || direction === 'replace' || direction === 'traverse');
+        this.currentPath = path;
         this.currentKey = this.keyOf(path);
-        this.restore(this.currentKey, this.options.anchor === false ? '' : hash || (this.locationAnchor ? locationHash() : ''));
+        this.restore(this.currentKey, this.options.anchor === false ? '' : hash || (this.locationAnchor ? locationHash() : ''), inPage);
     }
     saved(key) {
         return this.positions.get(this.keyOf(splitUri(key).path)) ?? 0;
@@ -9223,7 +9489,7 @@ class ScrollMemory {
             this.positions.delete(oldest.value);
         }
     }
-    restore(key, anchor) {
+    restore(key, anchor, follow) {
         this.cancelRestore();
         const target = this.positions.get(key) ?? 0;
         if (!anchor && target <= 0) {
@@ -9236,7 +9502,7 @@ class ScrollMemory {
         const startedAt = Date.now();
         const attempt = () => {
             this.cancelFrame = null;
-            const done = anchor ? this.viewport.scrollToAnchor(anchor) : this.reached(target);
+            const done = anchor ? this.viewport.scrollToAnchor(anchor, follow) : this.reached(target);
             if (done || Date.now() - startedAt >= settleMs) {
                 this.cancelRestore();
                 this.remember(key, this.viewport.scrollTop());
@@ -9328,16 +9594,30 @@ function windowViewport() {
         },
         scrollTo: (top) => {
             try {
-                window.scrollTo(0, top);
+                window.scrollTo({ top, behavior: 'instant' });
+            }
+            catch {
+                try {
+                    window.scrollTo(0, top);
+                }
+                catch { }
             }
-            catch { }
         },
-        scrollToAnchor: (id) => {
+        scrollToAnchor: (id, follow) => {
             try {
                 const node = document.getElementById(id);
                 if (!node)
                     return false;
-                node.scrollIntoView();
+                if (follow)
+                    node.scrollIntoView();
+                else {
+                    try {
+                        node.scrollIntoView({ behavior: 'instant' });
+                    }
+                    catch {
+                        node.scrollIntoView();
+                    }
+                }
                 return true;
             }
             catch {
@@ -9374,11 +9654,16 @@ function containerViewport(container) {
                 return;
             }
             try {
-                el.scrollTop = top;
+                el.scrollTo({ top, behavior: 'instant' });
+            }
+            catch {
+                try {
+                    el.scrollTop = top;
+                }
+                catch { }
             }
-            catch { }
         },
-        scrollToAnchor: (id) => fallback.scrollToAnchor(id),
+        scrollToAnchor: (id, follow) => fallback.scrollToAnchor(id, follow),
     };
 }
 /** `/docs/x#bolum` → `{ path: '/docs/x', hash: 'bolum' }`. */
@@ -9549,24 +9834,18 @@ function overlay(floating, anchor, above) {
     }
 }
 class NavigationStack {
-    retainAttached;
-    depth;
-    persist;
-    animation;
-    duration;
-    swipe;
-    session = null;
-    entries = new Map();
-    uris = new Map();
-    loaded = null;
-    current = null;
-    currentTop = null;
-    offs = [];
-    gesture = null;
-    gestureCommitted = false;
-    awaitingGestureResult = false;
-    disposed = false;
     constructor(options) {
+        this.session = null;
+        this.entries = new Map();
+        this.uris = new Map();
+        this.loaded = null;
+        this.current = null;
+        this.currentTop = null;
+        this.offs = [];
+        this.gesture = null;
+        this.gestureCommitted = false;
+        this.awaitingGestureResult = false;
+        this.disposed = false;
         const o = options === true ? {} : options;
         this.retainAttached = o.retain === true;
         this.depth = Math.max(0, Math.floor(o.depth ?? 5));
@@ -10075,13 +10354,28 @@ class NavigationStack {
 }
 
 class Scanner {
-    source;
     constructor(source) {
         this.source = source;
+        this.currentColumn = 0;
+        this.tokens = [];
+        this.parameters = {};
+        this.codePointAt = String.prototype.codePointAt ?
+            (s, i) => s.codePointAt(i) : function codePointAt(str, i) {
+            const size = str.length;
+            if (i < 0 || i >= size) {
+                return undefined;
+            }
+            const first = str.charCodeAt(i);
+            if (first >= 0xD800 && first <= 0xDBFF && size > i + 1) {
+                const second = str.charCodeAt(i + 1);
+                if (second >= 0xDC00 && second <= 0xDFFF) {
+                    return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+                }
+            }
+            return first;
+        };
         this.tokens = [];
     }
-    currentColumn = 0;
-    tokens = [];
     addToken(token) {
         this.tokens.push(token);
     }
@@ -10309,7 +10603,6 @@ class Scanner {
         pattern += '$';
         return new RegExp(pattern, "i");
     }
-    parameters = {};
     exist(input, pageSearch) {
         const hashIdx = input.indexOf('#');
         const withoutHash = hashIdx >= 0 ? input.substring(0, hashIdx) : input;
@@ -10393,21 +10686,6 @@ class Scanner {
         }
         return false;
     }
-    codePointAt = String.prototype.codePointAt ?
-        (s, i) => s.codePointAt(i) : function codePointAt(str, i) {
-        const size = str.length;
-        if (i < 0 || i >= size) {
-            return undefined;
-        }
-        const first = str.charCodeAt(i);
-        if (first >= 0xD800 && first <= 0xDBFF && size > i + 1) {
-            const second = str.charCodeAt(i + 1);
-            if (second >= 0xDC00 && second <= 0xDFFF) {
-                return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
-            }
-        }
-        return first;
-    };
 }
 
 /** Bir fullPath'in statik (parametresiz) ve parametreli segment sayıları. */
@@ -10435,11 +10713,41 @@ function compareRouteRecords(a, b) {
     return b.fullPath.length - a.fullPath.length;
 }
 class RouteCollection {
-    routes;
-    records = [];
-    routesMap = new Map();
     constructor(routes) {
         this.routes = routes;
+        this.records = [];
+        this.routesMap = new Map();
+        this.walk = (chain, parentPath, node, viaAlias = false) => {
+            const fullPath = this.joinPaths(parentPath, node.path);
+            if (!viaAlias) {
+                const existing = node.fullPath;
+                if (existing == null || (typeof existing === 'string' && existing.trim() === '')) {
+                    node.fullPath = fullPath;
+                }
+                if (node.name != null) {
+                    this.routesMap.set(node.name, node);
+                }
+            }
+            const nextChain = [...chain, node];
+            const aliases = node.alias == null ? [] : (Array.isArray(node.alias) ? node.alias : [node.alias]);
+            const variants = [
+                { path: fullPath, isAlias: viaAlias },
+                ...aliases.map(a => ({ path: this.joinPaths(parentPath, a), isAlias: true }))
+            ];
+            for (const variant of variants) {
+                this.records.push({
+                    fullPath: variant.path,
+                    chain: nextChain,
+                    leaf: node,
+                    scanner: new Scanner(variant.path),
+                    aliasOf: variant.isAlias ? (node.fullPath ?? null) : null
+                });
+                if (node.childs && node.childs.length) {
+                    for (const child of node.childs)
+                        this.walk(nextChain, variant.path, child, variant.isAlias);
+                }
+            }
+        };
         this.build();
     }
     build() {
@@ -10449,37 +10757,6 @@ class RouteCollection {
             this.walk([], "", r);
         this.records.sort(compareRouteRecords);
     }
-    walk = (chain, parentPath, node, viaAlias = false) => {
-        const fullPath = this.joinPaths(parentPath, node.path);
-        if (!viaAlias) {
-            const existing = node.fullPath;
-            if (existing == null || (typeof existing === 'string' && existing.trim() === '')) {
-                node.fullPath = fullPath;
-            }
-            if (node.name != null) {
-                this.routesMap.set(node.name, node);
-            }
-        }
-        const nextChain = [...chain, node];
-        const aliases = node.alias == null ? [] : (Array.isArray(node.alias) ? node.alias : [node.alias]);
-        const variants = [
-            { path: fullPath, isAlias: viaAlias },
-            ...aliases.map(a => ({ path: this.joinPaths(parentPath, a), isAlias: true }))
-        ];
-        for (const variant of variants) {
-            this.records.push({
-                fullPath: variant.path,
-                chain: nextChain,
-                leaf: node,
-                scanner: new Scanner(variant.path),
-                aliasOf: variant.isAlias ? (node.fullPath ?? null) : null
-            });
-            if (node.childs && node.childs.length) {
-                for (const child of node.childs)
-                    this.walk(nextChain, variant.path, child, variant.isAlias);
-            }
-        }
-    };
     joinPaths(parent, child) {
         parent = parent || "";
         child = child || "";
@@ -10496,19 +10773,22 @@ class RouteCollection {
 }
 
 class RoutingEngine {
-    stack = null;
-    _revealed = new Set();
-    root;
-    application;
-    routingModule;
-    _previousPath = null;
-    _previousInstances = [];
+    constructor() {
+        this.stack = null;
+        this._revealed = new Set();
+        this._previousPath = null;
+        this._previousInstances = [];
+        this.controlCache = new Map();
+        this._navVersion = 0;
+        this._pendingActivate = new Set();
+        this.pendingMount = new WeakMap();
+        this.pendingListeners = new WeakMap();
+    }
     register(mainApp, application, routingModule) {
         this.root = mainApp;
         this.application = application;
         this.routingModule = routingModule;
     }
-    controlCache = new Map();
     async evict(route) {
         const targets = route ? [route] : Array.from(this.controlCache.keys());
         for (const r of targets) {
@@ -10570,8 +10850,6 @@ class RoutingEngine {
         }
         return result;
     }
-    _navVersion = 0;
-    _pendingActivate = new Set();
     async execute(path, nav, route) {
         route ??= {
             target: path,
@@ -11042,9 +11320,7 @@ class RoutingEngine {
     }
     async activator(container) {
     }
-    pendingMount = new WeakMap();
-    pendingListeners = new WeakMap();
-    static OUTLET_WARN_MS = 3000;
+    static { this.OUTLET_WARN_MS = 3000; }
     async mountChain(instances, chain, container, navVersion) {
         for (let index = 0; index < instances.length;) {
             if (navVersion !== this._navVersion)
@@ -11176,17 +11452,20 @@ class RoutingEngine {
 const pathOf = (uri) => uri.split('#')[0].split('?')[0];
 const newHistorySession = () => Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
 class UrlRoutingModule {
-    static MAX_REDIRECTS = 10;
-    _routerOptions;
-    routingEngine;
-    routeCollection;
-    routesMap = new Map();
-    mainApp;
-    application;
-    _suppressBeforeEachOnce = false;
-    _suppressMiddlewaresOnce = false;
-    _scroll = null;
+    static { this.MAX_REDIRECTS = 10; }
     constructor(options, application) {
+        this.routesMap = new Map();
+        this._suppressBeforeEachOnce = false;
+        this._suppressMiddlewaresOnce = false;
+        this._scroll = null;
+        this._stack = null;
+        this._windowNavListener = null;
+        this._historyStamp = null;
+        this._pendingTraversal = null;
+        this._currentUri = '___startup___';
+        this._previousRoute = null;
+        this._fallbackRoutes = {};
+        this._navHandler = null;
         this._routerOptions = options;
         this.routeCollection = new RouteCollection(options.RouteItems);
         this.routingEngine = new RoutingEngine();
@@ -11202,11 +11481,9 @@ class UrlRoutingModule {
             this.routingEngine.stack = this._stack;
         }
     }
-    _stack = null;
     getHooks() {
         return this._routerOptions.hooks;
     }
-    _windowNavListener = null;
     start(mainApp, shellUri) {
         this.mainApp = mainApp;
         this.routingEngine.register(this.mainApp, this.application, this);
@@ -11232,14 +11509,13 @@ class UrlRoutingModule {
                 const h = w?.location?.hash || '';
                 return h && h.startsWith('#') ? h.slice(1) || '/' : '/';
             }
-            return (w?.location?.pathname || '/') + (w?.location?.search || '');
+            return (w?.location?.pathname || '/') + (w?.location?.search || '') + (w?.location?.hash || '');
         }
         catch {
             return '/';
         }
     }
-    static HISTORY_STAMP_KEY = '__motifHistory';
-    _historyStamp = null;
+    static { this.HISTORY_STAMP_KEY = '__motifHistory'; }
     _addressMode() {
         const w = window;
         return this._routerOptions.mode || (w?.location?.protocol === 'file:' ? 'hash' : 'history');
@@ -11335,7 +11611,6 @@ class UrlRoutingModule {
         this._stampCurrentEntry(stamp);
         this._historyStamp = stamp;
     }
-    _pendingTraversal = null;
     async _onHistoryTraversal() {
         const shown = this._historyStamp;
         const arrived = this._readHistoryStamp();
@@ -11371,8 +11646,6 @@ class UrlRoutingModule {
         }
         catch { }
     }
-    _currentUri = '___startup___';
-    _previousRoute = null;
     get currentUri() {
         return this._currentUri;
     }
@@ -11507,7 +11780,7 @@ class UrlRoutingModule {
             }
             const snapshotOf = (result) => ({
                 target: result,
-                chain: result.chain.map(r => this.routingEngine.generatePathString(r.path, result.params) || ''),
+                chain: this.chainOf(result),
                 direction,
                 state: entryState,
             });
@@ -11551,7 +11824,7 @@ class UrlRoutingModule {
                 this._handleScrollBehavior(navOptions.scroll);
             }
             else {
-                this._scroll?.arrived(this._uriWithHash(appliedPath, uri));
+                this._scroll?.arrived(this._uriWithHash(appliedPath, uri), direction);
             }
             this.application.fire?.('motifjs-router-navigated', {
                 uri: appliedPath,
@@ -11611,7 +11884,6 @@ class UrlRoutingModule {
         }
         await this.routingEngine.evict(item);
     }
-    _fallbackRoutes = {};
     _getFallbackRoute(kind) {
         const existing = this._fallbackRoutes[kind];
         if (existing)
@@ -11684,7 +11956,7 @@ class UrlRoutingModule {
         }
         return best ? { chain: best.rec.chain, params: best.params } : null;
     }
-    static _builtinNotFound = () => new Component('div', {
+    static { this._builtinNotFound = () => new Component('div', {
         initializeComponent(sender) {
             sender.style({
                 padding: '20px', fontFamily: 'Arial, sans-serif', display: 'flex', 'flex-direction': 'column', 'align-items': 'center'
@@ -11692,8 +11964,8 @@ class UrlRoutingModule {
             sender.element.appendChild($('h2', {}, ...['404 - Not Found']));
             sender.element.appendChild($('p', {}, ...['The requested page was not found.']));
         },
-    });
-    static _builtinError = () => new Component('div', {
+    }); }
+    static { this._builtinError = () => new Component('div', {
         initializeComponent(sender) {
             sender.style({
                 padding: '20px', fontFamily: 'Arial, sans-serif', display: 'flex', 'flex-direction': 'column', 'align-items': 'center'
@@ -11701,7 +11973,7 @@ class UrlRoutingModule {
             sender.element.appendChild($('h2', {}, ...['Error']));
             sender.element.appendChild($('p', {}, ...['The requested page could not be loaded.']));
         },
-    });
+    }); }
     async navigateByName(name, params, options) {
         return await this.navigate(this.href(name, params), options);
     }
@@ -11733,6 +12005,9 @@ class UrlRoutingModule {
         }
         return { proceed, uri: urix };
     }
+    chainOf(result) {
+        return result.chain.map(r => this.routingEngine.generatePathString(r.path, result.params) || '');
+    }
     resolve(uri) {
         const candidates = [];
         const pageSearch = this._pageSearch();
@@ -11854,7 +12129,6 @@ class UrlRoutingModule {
         }
         return true;
     }
-    _navHandler = null;
     _installLinkInterceptor() {
         try {
             if (this._navHandler)
@@ -11930,8 +12204,14 @@ class UrlRoutingModule {
                 return;
             }
             if (w?.history && typeof w.history.pushState === 'function') {
-                const current = (w.location.pathname || '/') + (w.location.search || '');
-                if (current !== uri) {
+                const current = (w.location.pathname || '/') + (w.location.search || '') + (w.location.hash || '');
+                let wanted = uri;
+                try {
+                    const url = new URL(uri, w.location.href);
+                    wanted = url.pathname + url.search + url.hash;
+                }
+                catch { }
+                if (current !== wanted) {
                     if (options.replace) {
                         const stamp = this._nextHistoryStamp(false);
                         w.history.replaceState(this._routerState(options.state, stamp), '', uri);
@@ -12053,9 +12333,11 @@ class UrlRoutingModule {
 }
 
 class RouterState {
-    version = new Signal(0);
-    _current = null;
-    _constructing = null;
+    constructor() {
+        this.version = new Signal(0);
+        this._current = null;
+        this._constructing = null;
+    }
     read() {
         this.version.value;
         return this._constructing ?? this._current;
@@ -12116,15 +12398,19 @@ function createRouter(state, module) {
             return module()?.routeInfos() ?? [];
         },
         navigate: async (uri, options) => {
-            await required().navigate(uri, options);
+            return await required().navigate(uri, options);
         },
         navigateByName: async (name, params, options) => {
-            await required().navigateByName(name, params, options);
+            return await required().navigateByName(name, params, options);
         },
         evict: async (route) => {
             await required().evict(route);
         },
-        resolve: (uri) => required().resolve(uri),
+        resolve: (uri) => {
+            const current = required();
+            const result = current.resolve(uri);
+            return { chain: current.chainOf(result), result };
+        },
         href: (name, params) => required().href(name, params),
     };
 }
@@ -12132,8 +12418,8 @@ function createRouter(state, module) {
 let _globalApplication = null;
 let startedApplicationBuilder = false;
 class ApplicationBuilder {
-    services = new ServiceCollection();
     constructor() {
+        this.services = new ServiceCollection();
         if ((_globalApplication && _globalApplication.state !== 'disposing') || startedApplicationBuilder) {
             throw new MotifError('MJX405', formatMotifMessage('MJX405'), { cause: _globalApplication });
         }
@@ -12160,28 +12446,31 @@ class ApplicationBuilder {
     }
 }
 class Application {
-    provider;
     static get main() {
         return _globalApplication;
     }
     constructor(provider) {
         this.provider = provider;
+        this._state = 'initializing';
+        this._middlewares = [];
+        this._beforeEachGuards = [];
+        this._routerState = new RouterState();
+        this.router = createRouter(this._routerState, () => this.urlRoutingModule);
+        this.events = new Map();
+        this._routerConfig = null;
+        this._routerRoot = null;
+        this._startedRouter = null;
+        this._lifecycleOff = null;
+        this._isDevelopment = false;
+        this._enableErrorLogging = true;
     }
-    static _disposingCount = 0;
-    _state = 'initializing';
-    _disposing;
+    static { this._disposingCount = 0; }
     get state() {
         return this._state;
     }
-    _middlewares = [];
-    _beforeEachGuards = [];
-    _routerState = new RouterState();
-    router = createRouter(this._routerState, () => this.urlRoutingModule);
-    events = new Map();
     static CreateBuilder() {
         return new ApplicationBuilder();
     }
-    appShell;
     getAppShell() {
         return this.appShell;
     }
@@ -12325,10 +12614,6 @@ class Application {
         }
         return true;
     }
-    urlRoutingModule;
-    _routerConfig = null;
-    _routerRoot = null;
-    _startedRouter = null;
     useRouter(options) {
         let routes;
         let mode;
@@ -12448,7 +12733,6 @@ class Application {
             return true;
         }
     }
-    _lifecycleOff = null;
     onLifecycle(handler) {
         this._installLifecycleListeners();
         return this.on('motifjs-app-lifecycle', handler);
@@ -12490,8 +12774,6 @@ class Application {
             for (const off of offs)
                 off();
     }
-    _isDevelopment = false;
-    _enableErrorLogging = true;
     get isDevelopmentModeEnabled() {
         return this._isDevelopment;
     }
@@ -12529,5 +12811,5 @@ function useApplication() {
     };
 }
 
-export { useApplication as $, Application as A, ErrorHandler as B, Component as C, Disposable as D, Emitter as E, FNComponent as F, FragmentNode as G, Frame as H, inject as I, LazyComputed as J, LinkedList as K, Lazy as L, MotifError as M, motifCompiled as N, motifComponent as O, motifFragment as P, NodeTypes as Q, reactive as R, RouterView as S, safeCall as T, safeCallAsync as U, safeCallSilent as V, ServiceCollection as W, ServiceProvider as X, setUnexpectedErrorHandler as Y, Signal as Z, toDisposable as _, reportError as a, useModel as a0, useNavigation as a1, debugGetDeps as a2, debugGetDepMap as a3, UrlRoutingModule as a4, RoutingEngine as a5, RouterState as a6, createRouter as a7, Scanner as a8, RouteCollection as a9, ComponentBase as b, contentBlocks as c, autoRegistry as d, effect as e, findAppendableComponent$1 as f, formatMotifMessage as g, ApplicationBuilder as h, asyncTracking as i, clearModel as j, ComponentMotif as k, Computed as l, motifError as m, notifyDeactivated as n, configureReactivityLeakMonitor as o, ControlCollection as p, createComputed as q, reportWarning as r, createLazyComputed as s, createSignal as t, untracked as u, deepClone as v, disposableCore as w, DisposableStore as x, dom as y, errorHandler as z };
-//# sourceMappingURL=core-vVL0WG0n.esm.js.map
+export { setUnexpectedErrorHandler as $, Application as A, errorHandler as B, Component as C, Disposable as D, Emitter as E, ErrorHandler as F, FNComponent as G, FragmentNode as H, Frame as I, inject as J, LazyComputed as K, Lazy as L, MotifError as M, LinkedList as N, motifCompiled as O, motifComponent as P, motifFragment as Q, NodeTypes as R, SLOT_REGISTERED_EVENT as S, TransportRegistry as T, reactive as U, RouterView as V, safeCall as W, safeCallAsync as X, safeCallSilent as Y, ServiceCollection as Z, ServiceProvider as _, SLOT_UNREGISTERED_EVENT as a, Signal as a0, toDisposable as a1, useApplication as a2, useModel as a3, useNavigation as a4, debugGetDeps as a5, debugGetDepMap as a6, UrlRoutingModule as a7, RoutingEngine as a8, RouterState as a9, createRouter as aa, Scanner as ab, RouteCollection as ac, reportError as b, contentBlocks as c, ComponentBase as d, effect as e, findAppendableComponent$1 as f, autoRegistry as g, formatMotifMessage as h, ApplicationBuilder as i, asyncTracking as j, clearModel as k, ComponentMotif as l, motifError as m, notifyDeactivated as n, Computed as o, configureReactivityLeakMonitor as p, ControlCollection as q, reportWarning as r, createComputed as s, createLazyComputed as t, untracked as u, createSignal as v, deepClone as w, disposableCore as x, DisposableStore as y, dom as z };
+//# sourceMappingURL=core-W7wNt8bq.esm.js.map