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

package/dist/chunks/{core-SS-LXi1V.cjs → core-DD3SssnS.cjs}

@@ -4,10 +4,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;
     }
@@ -348,7 +350,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';
@@ -380,7 +381,9 @@ function reportWarning(code, args, details) {
 }
 
 class DisposableCore {
-    disposableTracker = null;
+    constructor() {
+        this.disposableTracker = null;
+    }
     notifyCreated(target) {
         this.disposableTracker?.trackDisposable(target);
         return target;
@@ -409,9 +412,8 @@ class DisposableCore {
 const disposableCore = new DisposableCore();
 
 class DisposableStore {
-    _items = new Set();
-    _closed = false;
     constructor() {
+        this._closed = false;
         disposableCore.notifyCreated(this);
     }
     get isDisposed() {
@@ -429,7 +431,7 @@ class DisposableStore {
             reportWarning('MJX504', [], new Error().stack);
         }
         else {
-            this._items.add(item);
+            (this._items ??= new Set()).add(item);
         }
         return item;
     }
@@ -440,20 +442,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();
             }
@@ -461,7 +464,7 @@ class DisposableStore {
                 failures.push(error);
             }
         }
-        this._items.clear();
+        items.clear();
         if (failures.length === 1) {
             throw failures[0];
         }
@@ -479,16 +482,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 {
@@ -593,27 +614,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)
@@ -697,7 +708,6 @@ class ListBinding {
         }
         return component;
     }
-    olditems = [];
     get _indexSensitive() {
         try {
             return this.renderFn.length >= 2;
@@ -901,6 +911,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];
@@ -923,6 +937,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 = [];
@@ -1010,13 +1037,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) {
@@ -1052,8 +1077,10 @@ function createRing() {
     return ring;
 }
 class LinkedList {
-    _ring = createRing();
-    _count = 0;
+    constructor() {
+        this._ring = createRing();
+        this._count = 0;
+    }
     get size() {
         return this._count;
     }
@@ -1111,11 +1138,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);
@@ -1150,15 +1178,12 @@ exports.NodeTypes = void 0;
 })(exports.NodeTypes || (exports.NodeTypes = {}));
 
 class Effect {
-    fn;
-    callback;
-    deps = [];
-    active = true;
-    running = false;
-    scheduler;
     constructor(fn, callback) {
         this.fn = fn;
         this.callback = callback;
+        this.deps = [];
+        this.active = true;
+        this.running = false;
     }
     run() {
         let value;
@@ -1404,21 +1429,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;
@@ -1670,10 +1684,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) {
@@ -1942,6 +1955,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 = () => {
@@ -1949,35 +1994,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 */ }
             };
@@ -1990,6 +2007,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 = [];
@@ -2049,10 +2083,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) => {
@@ -2136,10 +2170,6 @@ class Emitter {
 }
 
 class ComponentEmiter {
-    component;
-    _emitters;
-    _sourceDisposables;
-    _listenerDisposables;
     constructor(component) {
         this.component = component;
     }
@@ -2290,9 +2320,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;
     }
@@ -2824,14 +2851,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(); }
@@ -2847,13 +2870,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;
@@ -2919,10 +2936,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();
@@ -3021,14 +3039,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();
@@ -3349,8 +3384,6 @@ function runCssTransition(el, props, phase, done, appear = false) {
 }
 
 class ComponentMotif {
-    _component;
-    options;
     constructor(component, options) {
         this._component = component;
         this.options = options;
@@ -3393,15 +3426,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;
@@ -3458,14 +3487,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;
@@ -3530,14 +3554,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;
@@ -3701,24 +3720,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';
@@ -4102,15 +4122,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);
@@ -4217,8 +4228,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) {
@@ -4240,15 +4265,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))));
 }
@@ -4403,8 +4428,6 @@ function createTransitionApi(owner) {
     return t;
 }
 class ComponentOptionsImpl {
-    [OPTIONS_OWNER];
-    [TRANSITION_SLOT];
     constructor(owner) {
         this[OPTIONS_OWNER] = owner;
     }
@@ -4444,24 +4467,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();
@@ -4530,21 +4573,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) {
@@ -4557,11 +4596,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');
         }
@@ -4575,11 +4610,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) {
@@ -4590,11 +4621,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) {
@@ -4606,7 +4633,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);
             }
@@ -4621,27 +4648,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');
             }
@@ -4661,11 +4687,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');
             }
@@ -4677,11 +4699,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;
@@ -4710,11 +4732,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');
         }
@@ -4731,11 +4749,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) {
@@ -4743,8 +4757,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;
@@ -4753,21 +4768,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;
         }
@@ -4778,11 +4789,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) {
@@ -4797,11 +4804,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) {
@@ -4815,29 +4818,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) {
@@ -4866,9 +4861,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;
@@ -4876,7 +4874,7 @@ const ComponentHelper = {
         if (c.isWait) {
             return;
         }
-        const enterSeq = c._base._enterSeq;
+        const enterSeq = c._baseCtx?._enterSeq;
         if (!c.isBuilt) {
             c.build();
         }
@@ -4905,40 +4903,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");
                 }
@@ -4976,9 +4946,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);
@@ -4992,7 +4964,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;
@@ -5041,34 +5017,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 {
@@ -5155,23 +5169,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);
 }
@@ -5180,33 +5194,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 {
@@ -5236,20 +5246,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) {
@@ -5257,7 +5269,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;
@@ -5271,8 +5283,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))
@@ -5303,27 +5315,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) {
@@ -5336,7 +5349,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);
@@ -5346,7 +5359,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')
@@ -5376,8 +5389,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++) {
@@ -5392,7 +5405,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);
             }
@@ -5431,68 +5445,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);
@@ -5507,13 +5477,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',
@@ -5552,37 +5693,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 {
@@ -5599,7 +5786,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();
@@ -5614,10 +5801,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);
@@ -5628,44 +5827,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;
@@ -5676,10 +5869,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;
@@ -5706,7 +5898,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;
         }
@@ -5743,7 +5935,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());
@@ -5751,32 +5943,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);
             }
         }
@@ -5839,10 +6040,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();
         });
@@ -5966,6 +6167,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;
@@ -5987,7 +6191,7 @@ class ComponentBase extends Disposable {
         /** A*/
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
-            ComponentHelper.callVisibilityChanged(this);
+            ComponentHelper.callVisibilityChanged(this, true);
             if (this.isDisposed) {
                 return;
             }
@@ -6004,6 +6208,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);
@@ -6012,11 +6220,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();
                 });
@@ -6024,6 +6233,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);
@@ -6042,7 +6255,7 @@ class ComponentBase extends Disposable {
         }
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
-            ComponentHelper.callVisibilityChanged(this);
+            ComponentHelper.callVisibilityChanged(this, false);
             if (this.isDisposed) {
                 return;
             }
@@ -6057,7 +6270,7 @@ class ComponentBase extends Disposable {
             if (skip)
                 transition.skipNextLeave = false;
             const finish = () => {
-                ComponentHelper.callVisibilityChanged(this);
+                ComponentHelper.callVisibilityChanged(this, false);
                 if (this.isDisposed) {
                     return;
                 }
@@ -6140,61 +6353,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) {
@@ -6203,15 +6391,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;
@@ -6234,38 +6427,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();
@@ -6336,8 +6515,6 @@ class ComponentBase extends Disposable {
             }
         });
     }
-    _siblingsApi;
-    _siblingsSet;
     get siblings() {
         if (this._siblingsSet) {
             return this._siblingsApi;
@@ -6529,6 +6706,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 = [];
@@ -6580,26 +6767,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])) {
@@ -6610,6 +6809,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') {
@@ -6654,9 +6854,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) {
@@ -6827,6 +7032,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;
@@ -6876,35 +7091,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) {
@@ -6960,8 +7191,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;
@@ -7041,9 +7270,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);
+                    }
                 }
             }
         }
@@ -7065,6 +7296,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);
@@ -7075,8 +7307,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);
@@ -7090,12 +7321,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;
@@ -7108,18 +7336,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);
     }
 }
@@ -7142,6 +7370,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)
@@ -7203,7 +7436,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];
@@ -7239,7 +7474,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)
@@ -7401,11 +7636,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)
@@ -7485,7 +7719,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); });
@@ -7515,7 +7749,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() {
@@ -7540,9 +7774,6 @@ class ControlCollection {
     map(callbackfn) {
         return this.items.map(callbackfn);
     }
-    onAdd;
-    onRemove;
-    onAddBeforeBuild;
     move(control, before) {
         if (!control || control.isDisposed)
             return;
@@ -7570,14 +7801,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)
@@ -7614,12 +7860,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);
         }
@@ -7702,9 +7956,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;
@@ -8177,13 +8429,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);
         }
@@ -8198,7 +8449,6 @@ class Frame extends Component {
     async _clear() {
         await disposeNavigationTarget(this.current);
     }
-    previouspage;
     async navigate(page, keepOldControl = false) {
         await navigateHost(this, page, keepOldControl);
     }
@@ -8208,6 +8458,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([
@@ -8345,11 +8614,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) {
@@ -8541,7 +8809,6 @@ const ReactiveEngineMapper = new WeakSet();
 const AllreactiveMap = new WeakMap();
 function armgetter() { return AllreactiveMap; }
 class ReactiveEngine {
-    _gci;
     startGc(_intervalMs = 10000) { }
     stopGc() { if (this._gci) {
         try {
@@ -8551,31 +8818,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 };
@@ -8638,7 +8904,6 @@ class ReactiveEngine {
     ArrayTrigger(target, key, ...args) {
         this.trigger(target, key, args);
     }
-    onValueChanged;
     toRaw(item) {
         return JSON.parse(JSON.stringify(this.deepClone(item)));
     }
@@ -8824,7 +9089,9 @@ function isConstructor(fn) {
     }
 }
 class ServiceCollection {
-    descriptors = new Map();
+    constructor() {
+        this.descriptors = new Map();
+    }
     reset() {
         this.descriptors.clear();
     }
@@ -9081,7 +9348,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());
@@ -9110,9 +9377,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;
     }
@@ -9124,11 +9394,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);
     }
@@ -9159,17 +9424,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();
@@ -9194,11 +9458,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;
@@ -9225,7 +9491,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) {
@@ -9238,7 +9504,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());
@@ -9330,16 +9596,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 {
@@ -9376,11 +9656,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' }`. */
@@ -9551,24 +9836,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));
@@ -10077,13 +10356,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);
     }
@@ -10311,7 +10605,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;
@@ -10395,21 +10688,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ı. */
@@ -10437,11 +10715,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() {
@@ -10451,37 +10759,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 || "";
@@ -10498,19 +10775,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) {
@@ -10572,8 +10852,6 @@ class RoutingEngine {
         }
         return result;
     }
-    _navVersion = 0;
-    _pendingActivate = new Set();
     async execute(path, nav, route) {
         route ??= {
             target: path,
@@ -11044,9 +11322,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)
@@ -11178,17 +11454,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();
@@ -11204,11 +11483,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);
@@ -11234,14 +11511,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');
@@ -11337,7 +11613,6 @@ class UrlRoutingModule {
         this._stampCurrentEntry(stamp);
         this._historyStamp = stamp;
     }
-    _pendingTraversal = null;
     async _onHistoryTraversal() {
         const shown = this._historyStamp;
         const arrived = this._readHistoryStamp();
@@ -11373,8 +11648,6 @@ class UrlRoutingModule {
         }
         catch { }
     }
-    _currentUri = '___startup___';
-    _previousRoute = null;
     get currentUri() {
         return this._currentUri;
     }
@@ -11509,7 +11782,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,
             });
@@ -11553,7 +11826,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,
@@ -11613,7 +11886,6 @@ class UrlRoutingModule {
         }
         await this.routingEngine.evict(item);
     }
-    _fallbackRoutes = {};
     _getFallbackRoute(kind) {
         const existing = this._fallbackRoutes[kind];
         if (existing)
@@ -11686,7 +11958,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'
@@ -11694,8 +11966,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'
@@ -11703,7 +11975,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);
     }
@@ -11735,6 +12007,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();
@@ -11856,7 +12131,6 @@ class UrlRoutingModule {
         }
         return true;
     }
-    _navHandler = null;
     _installLinkInterceptor() {
         try {
             if (this._navHandler)
@@ -11932,8 +12206,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);
@@ -12055,9 +12335,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;
@@ -12118,15 +12400,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),
     };
 }
@@ -12134,8 +12420,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 });
         }
@@ -12162,28 +12448,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;
     }
@@ -12327,10 +12616,6 @@ class Application {
         }
         return true;
     }
-    urlRoutingModule;
-    _routerConfig = null;
-    _routerRoot = null;
-    _startedRouter = null;
     useRouter(options) {
         let routes;
         let mode;
@@ -12450,7 +12735,6 @@ class Application {
             return true;
         }
     }
-    _lifecycleOff = null;
     onLifecycle(handler) {
         this._installLifecycleListeners();
         return this.on('motifjs-app-lifecycle', handler);
@@ -12492,8 +12776,6 @@ class Application {
             for (const off of offs)
                 off();
     }
-    _isDevelopment = false;
-    _enableErrorLogging = true;
     get isDevelopmentModeEnabled() {
         return this._isDevelopment;
     }
@@ -12553,10 +12835,13 @@ exports.RouteCollection = RouteCollection;
 exports.RouterState = RouterState;
 exports.RouterView = RouterView;
 exports.RoutingEngine = RoutingEngine;
+exports.SLOT_REGISTERED_EVENT = SLOT_REGISTERED_EVENT;
+exports.SLOT_UNREGISTERED_EVENT = SLOT_UNREGISTERED_EVENT;
 exports.Scanner = Scanner;
 exports.ServiceCollection = ServiceCollection;
 exports.ServiceProvider = ServiceProvider;
 exports.Signal = Signal;
+exports.TransportRegistry = TransportRegistry;
 exports.UrlRoutingModule = UrlRoutingModule;
 exports.asyncTracking = asyncTracking;
 exports.autoRegistry = autoRegistry;
@@ -12594,4 +12879,4 @@ exports.untracked = untracked;
 exports.useApplication = useApplication;
 exports.useModel = useModel;
 exports.useNavigation = useNavigation;
-//# sourceMappingURL=core-SS-LXi1V.cjs.map
+//# sourceMappingURL=core-DD3SssnS.cjs.map