@motifx/core 1.0.1 → 1.1.0

package/dist/chunks/{core-DxINgP83.esm.js → core-BGdhUeHu.esm.js}

@@ -1,4 +1,373 @@
-import { m as motifError, r as reportWarning, M as MotifError, f as formatMotifMessage, u as untracked, e as effect, w as getRaw, a as reportError, x as isDevLike, k as dom, l as errorHandler, y as callReported, S as Signal, o as reactive, s as safeCall, p as safeCallAsync, q as safeCallSilent, z as ensureDevtoolsFlagInitialized, A as isEnabled, B as on, D as safeCallSilentAsync, $, F as setErrorConsoleLogging, G as engine, H as setRoutes, d as configureReactivityLeakMonitor } from './core-BDvHkZLQ.esm.js';
+function rethrowLater(error) {
+    setTimeout(() => { throw error; }, 0);
+}
+class ErrorHandler {
+    unexpectedErrorHandler = rethrowLater;
+    listeners = [];
+    _isDevelopment = false;
+    _enableConsoleLogging = true;
+    setDevelopmentMode(isDev) {
+        this._isDevelopment = isDev;
+    }
+    setConsoleLogging(enabled) {
+        this._enableConsoleLogging = enabled;
+    }
+    isDevelopment() {
+        return this._isDevelopment || globalThis.__MOTIF_DEV__ === true;
+    }
+    reportSuppressed(context, error) {
+        this.logIfDev(context, error);
+    }
+    report(error) {
+        if (this._enableConsoleLogging) {
+            if (error.cause !== undefined)
+                console.error(error.message, error.cause);
+            else
+                console.error(error.message);
+        }
+        try {
+            const bus = globalThis.__MOTIF_DEVTOOLS_BUS__;
+            if (bus && typeof bus.publish === 'function') {
+                bus.publish('error:caught', { context: error.code ?? error.name, error: this.serializeError(error) });
+            }
+        }
+        catch { /* ignore */ }
+        this.emit(error);
+    }
+    logIfDev(context, error) {
+        if (this.isDevelopment() && this._enableConsoleLogging) {
+            console.error(`[motifjs Error - ${context}]`, error);
+        }
+        try {
+            const bus = globalThis.__MOTIF_DEVTOOLS_BUS__;
+            if (bus && typeof bus.publish === 'function') {
+                bus.publish('error:caught', { context, error: this.serializeError(error) });
+            }
+        }
+        catch { /* ignore */ }
+    }
+    serializeError(error) {
+        if (!error)
+            return { message: 'Unknown error' };
+        if (error instanceof Error) {
+            return {
+                name: error.name,
+                message: error.message,
+                stack: error.stack,
+                cause: error.cause ? this.serializeError(error.cause) : undefined
+            };
+        }
+        if (typeof error === 'object') {
+            try {
+                return JSON.parse(JSON.stringify(error));
+            }
+            catch {
+                return String(error);
+            }
+        }
+        return String(error);
+    }
+    addListener(listener) {
+        this.listeners.push(listener);
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            if (index !== -1) {
+                this.listeners.splice(index, 1);
+            }
+        };
+    }
+    emit(error) {
+        for (const listener of this.listeners.slice()) {
+            listener(error);
+        }
+    }
+    setUnexpectedErrorHandler(handler) {
+        this.unexpectedErrorHandler = handler;
+    }
+    getUnexpectedErrorHandler() {
+        return this.unexpectedErrorHandler;
+    }
+    onUnexpectedError(error) {
+        this.unexpectedErrorHandler(error);
+        this.emit(error);
+    }
+    safeCall(fn, context, fallback) {
+        try {
+            return fn();
+        }
+        catch (error) {
+            this.logIfDev(context, error);
+            this.onUnexpectedError(error);
+            return fallback;
+        }
+    }
+    async safeCallAsync(fn, context, fallback) {
+        try {
+            return await fn();
+        }
+        catch (error) {
+            this.logIfDev(context, error);
+            this.onUnexpectedError(error);
+            return fallback;
+        }
+    }
+    safeCallSilent(fn, context) {
+        try {
+            fn();
+        }
+        catch (error) {
+            this.logIfDev(context, error);
+        }
+    }
+    async safeCallSilentAsync(fn, context) {
+        try {
+            return await fn();
+        }
+        catch (error) {
+            this.logIfDev(context, error);
+        }
+    }
+    wrapSafe(fn, context) {
+        return (...args) => {
+            try {
+                return fn(...args);
+            }
+            catch (error) {
+                this.logIfDev(context, error);
+                this.onUnexpectedError(error);
+                return undefined;
+            }
+        };
+    }
+    wrapSafeAsync(fn, context) {
+        return async (...args) => {
+            try {
+                return await fn(...args);
+            }
+            catch (error) {
+                this.logIfDev(context, error);
+                this.onUnexpectedError(error);
+                return undefined;
+            }
+        };
+    }
+}
+const errorHandler = new ErrorHandler();
+function setErrorConsoleLogging(enabled) {
+    errorHandler.setConsoleLogging(enabled);
+}
+function safeCall(fn, context, fallback) {
+    return errorHandler.safeCall(fn, context, fallback);
+}
+function safeCallAsync(fn, context, fallback) {
+    return errorHandler.safeCallAsync(fn, context, fallback);
+}
+function safeCallSilent(fn, context) {
+    errorHandler.safeCallSilent(fn, context);
+}
+function safeCallSilentAsync(fn, context) {
+    return errorHandler.safeCallSilentAsync(fn, context);
+}
+function setUnexpectedErrorHandler(handler) {
+    errorHandler.setUnexpectedErrorHandler(handler);
+}
+
+const state = {
+    enabled: false,
+    listeners: new Set(),
+    warnings: [],
+    routes: null,
+};
+/** Dev modu: devtools açık ya da `globalThis.__MOTIF_DEV__ === true`. */
+function isDevLike() {
+    return state.enabled || globalThis.__MOTIF_DEV__ === true;
+}
+function isRequestedByFlag() {
+    try {
+        if (typeof window === 'undefined')
+            return false;
+        const w = window;
+        if (w.__motif_DEVTOOLS === true)
+            return true;
+        if (globalThis.__MOTIF_DEVTOOLS__ === true)
+            return true;
+        if (globalThis.__MOTIF_DEVTOOLS_FLAG === true)
+            return true;
+        return false;
+    }
+    catch {
+        return false;
+    }
+}
+function exposeBus(visible) {
+    try {
+        if (visible)
+            window.__motifDevBus = { on, emit, warn, getWarnings, isEnabled, setRoutes, getRoutes };
+        else
+            delete window.__motifDevBus;
+    }
+    catch { }
+}
+function ensureDevtoolsFlagInitialized() {
+    if (state.enabled)
+        return;
+    state.enabled = isRequestedByFlag();
+    if (state.enabled)
+        exposeBus(true);
+}
+function setDevtoolsEnabled(enabled) {
+    state.enabled = enabled || isRequestedByFlag();
+    exposeBus(state.enabled);
+}
+function isEnabled() { return state.enabled; }
+function on(listener) {
+    state.listeners.add(listener);
+    return () => { state.listeners.delete(listener); };
+}
+function emit(type, payload) {
+    const ev = { type, payload };
+    for (const l of state.listeners) {
+        try {
+            l(ev);
+        }
+        catch { }
+    }
+    try {
+        const bus = globalThis.__MOTIF_DEVTOOLS_BUS__;
+        if (bus && typeof bus.publish === 'function') {
+            bus.publish('devtools:' + type, payload);
+        }
+    }
+    catch { }
+}
+function warn(code, message, details) {
+    if (!isDevLike())
+        return;
+    const w = { code, message, details };
+    state.warnings.push(w);
+    try {
+        if (typeof console !== 'undefined')
+            details === undefined ? console.warn(`[motifjs] ${code}: ${message}`) : console.warn(`[motifjs] ${code}: ${message}`, details);
+    }
+    catch { }
+    emit('warning', w);
+}
+function getWarnings() { return state.warnings.slice(); }
+function setRoutes(routes) { state.routes = routes; }
+function getRoutes() { return state.routes; }
+
+const motifMessages = {
+    MJX101: (tag) => `dom.createElement('${tag}'): no document is available (no DOM environment).`,
+    MJX102: (description) => `Invalid element selector "${description}".`,
+    MJX103: (tag) => `dom.createElementNS('${tag}') failed.`,
+    MJX104: () => `Skipped inserting a component into the DOM because it contains its own parent.`,
+    MJX105: () => `Applying router link classes failed.`,
+    MJX106: () => `The placeholder parent changed; rebuilding the component.`,
+    MJX107: () => `Disposing a child component failed.`,
+    MJX108: () => `Component is disposed; the result of doWork was discarded.`,
+    MJX109: () => `A content block child was removed because its content body is being disposed.`,
+    MJX110: (ms) => `Lazy timeout: the component did not load within ${ms} ms.`,
+    MJX111: () => `Lazy aborted: loading the component was cancelled.`,
+    MJX112: (depth) => `resolveComponent: the factory chain exceeded ${depth} levels; a factory may be returning itself.`,
+    MJX113: () => `The transport slot has no parent; mount the slot before transporting into it.`,
+    MJX114: () => `Placing the navigation target into its host failed.`,
+    MJX115: () => `Disposing the previous navigation target failed.`,
+    MJX116: (ms) => `Timeout: the listener guard did not settle within ${ms} ms.`,
+    MJX117: () => `Detaching a control failed.`,
+    MJX118: () => `The onRemove callback failed while detaching a control.`,
+    MJX119: () => `Moving a fragment's DOM range stopped: its end marker was not found (possible infinite loop).`,
+    MJX120: () => `Scanning a fragment's DOM range stopped: its end marker was not found (possible infinite loop).`,
+    MJX121: (compiled, runtime) => `This code was compiled for compiler contract ${compiled}, but the @motifx/core runtime implements contract ${runtime}. Install matching versions of @motifx/compiler and @motifx/core, and rebuild packages that ship compiled JSX.`,
+    MJX122: (hook) => `The component ${hook} hook threw.`,
+    MJX123: (event) => `The '${event}' event handler threw.`,
+    MJX124: () => `A spread object on a DOM tag cannot set innerHTML; the key was ignored. Use x-html for trusted HTML.`,
+    MJX125: (key) => `A spread object on a DOM tag cannot set a javascript: URL on '${key}'; the value was ignored. Write the attribute on the tag if it is intended.`,
+    MJX126: () => `Lazy: loading the component failed and no Fallbackview is set; the host was cleared.`,
+    MJX201: () => `ListBinding: renderFn must return a component instance, a component class, or a factory function.`,
+    MJX202: (key, index) => `ListBinding: duplicate key "${String(key)}" at index ${index}. Rows are matched by the item object, not by key, so rendering is not affected; keep keys unique so they identify items.`,
+    MJX203: (max) => `An effect ran ${max} times in one flush and keeps triggering itself; it is skipped for the rest of this flush. It probably writes a value it reads (for example state.n++). Wrap the write in untracked(...).`,
+    MJX204: () => `A component reached a text binding and was not written to the DOM. For a template prop that can change later, write a getter: {() => props.tpl}. Templates that are ready at setup also work as {props.tpl}.`,
+    MJX205: () => `Virtualization: the watch callback threw.`,
+    MJX206: () => `Virtualization: autoRefresh stopped; dataRequest may be changing the reactive data it reads on every refresh.`,
+    MJX207: () => `Virtualization: loading data failed.`,
+    MJX208: () => `An effect threw.`,
+    MJX301: (outlet, ms) => `RouterView outlet '${outlet}' was not built within ${ms} ms, so the route chain cannot be mounted. Does the layout component render a <RouterView>?`,
+    MJX302: (name) => `Named route '${name}' was not found.`,
+    MJX303: (chain) => `Redirect loop or too many redirects: ${chain}`,
+    MJX304: () => `Route execution failed.`,
+    MJX305: () => `The error fallback route failed.`,
+    MJX306: (hook) => `The ${hook} hook threw.`,
+    MJX307: () => `Disposing a route component failed.`,
+    MJX308: () => `The stack navigation transition failed.`,
+    MJX309: () => `Router is not initialized. Call useRouter() before navigating.`,
+    MJX310: (parentPath) => `Route path cannot be empty; use '/' for the default child. Under parent "${parentPath}".`,
+    MJX311: (path, parentPath) => `Child route path should start with '/': "${path}" under parent "${parentPath}".`,
+    MJX312: (full) => `Child route path resolves to the same full path as its parent: "${full}".`,
+    MJX313: (full) => `Multiple routes resolve to the same full path: "${full}".`,
+    MJX314: (alias, parentPath) => `Child route alias should start with '/': "${alias}" under parent "${parentPath}".`,
+    MJX315: (alias) => `Route alias resolves to the route's own path: "${alias}".`,
+    MJX316: (alias) => `Multiple routes use the same alias: "${alias}".`,
+    MJX401: (token) => `Service not registered for token: ${token}`,
+    MJX402: (token) => `Async factory used with get() for token ${token}; use getAsync().`,
+    MJX403: () => `Invalid service descriptor.`,
+    MJX404: (chain) => `Cyclic dependency detected: ${chain}`,
+    MJX405: () => `Only one ApplicationBuilder instance is allowed.`,
+    MJX406: (selector) => `Application.run: host not found for selector: ${selector}`,
+    MJX407: (token) => `getService: no ServiceProvider found for token '${token}'.`,
+    MJX408: (token, reason) => `getService failed for token '${token}': ${reason}`,
+    MJX409: (token) => `inject(${token}) was called outside a service construction; call it in a field initializer or constructor of a class the ServiceProvider creates.`,
+    MJX410: (token, sources) => `Multiple sources provided for token '${token}': ${sources}. Resolution order is useValue > useFactory > useClass.`,
+    MJX411: (token) => `'deps' must be an array for token '${token}'; the invalid deps are ignored.`,
+    MJX413: (token) => `Service '${token}' is registered with a function that cannot be constructed. Use { useValue: fn } to provide the function itself or { useFactory: fn } to create the service.`,
+    MJX414: (token, reason) => `FromService failed for token '${token}': ${reason}`,
+    MJX501: () => `Disposable already disposed.`,
+    MJX502: () => `Cannot register a disposable on itself.`,
+    MJX503: () => `Errors were thrown while disposing a store.`,
+    MJX504: () => `A disposable was added to a DisposableStore that is already disposed; the added object will leak.`,
+    MJX505: () => `Cannot dispose a disposable on itself.`,
+    MJX507: (name, limit, count) => `[${name}] potential listener LEAK: ${limit} listeners already; most frequent stack (${count}):`,
+    MJX601: () => `Sequence contains no elements.`,
+    MJX602: () => `Circuit is open.`,
+    MJX603: () => `Bulkhead queue is full.`,
+    MJX604: () => `Rate limit exceeded.`,
+    MJX605: () => `Operation timed out.`,
+    MJX607: () => `A history must be created with at least one entry.`,
+    MJX608: () => `Method not implemented.`,
+    MJX609: () => `OperationRunner: the operation threw.`,
+    MJX610: () => `Matching the request path failed.`,
+    MJX611: () => `The devtools panel failed to load.`,
+};
+class MotifError extends Error {
+    code;
+    constructor(code, message, options) {
+        super(message, options);
+        this.name = 'MotifError';
+        this.code = code;
+    }
+}
+function formatMotifMessage(code, ...args) {
+    return `[motifjs] ${code}: ${motifMessages[code](...args)}`;
+}
+function motifError(code, ...args) {
+    return new MotifError(code, formatMotifMessage(code, ...args));
+}
+function reportError(code, cause, ...args) {
+    errorHandler.report(new MotifError(code, formatMotifMessage(code, ...args), { cause }));
+}
+function callReported(fn, code, ...args) {
+    try {
+        const result = fn();
+        if (result && typeof result.then === 'function') {
+            result.then(undefined, (error) => reportError(code, error, ...args));
+        }
+    }
+    catch (error) {
+        reportError(code, error, ...args);
+    }
+}
+function reportWarning(code, args, details) {
+    warn(code, motifMessages[code](...args), details);
+}
 
 class DisposableCore {
     disposableTracker = null;
@@ -124,6 +493,95 @@ class Disposable {
     }
 }
 
+const Flags = {
+    IS_REACTIVE: Symbol.for('motif.isReactive'),
+    IS_READONLY: Symbol.for('motif.isReadonly'),
+    IS_SUPERFICIAL: Symbol.for('motif.isSuperficial'),
+    RAW: Symbol.for('motif.raw'),
+    GET_SETUP: Symbol.for('motif.getSetup'),
+};
+const ITERATE_KEY = Symbol('');
+let followTracking = true;
+let arrayScope = { enabled: false, key: '' };
+function getRaw(value) {
+    let current = value;
+    while (current && current[Flags.RAW]) {
+        current = current[Flags.RAW];
+    }
+    return current;
+}
+function isReadonly(candidate) {
+    if (candidate == null)
+        return false;
+    return Boolean(candidate[Flags.IS_READONLY]);
+}
+function hasOwn(target, key) {
+    return Object.prototype.hasOwnProperty.call(target, key);
+}
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
+const intrinsicSymbols = new Set(Object.values(Object.getOwnPropertyDescriptors(Symbol))
+    .map(descriptor => descriptor.value)
+    .filter((value) => typeof value === 'symbol'));
+function isIntrinsicSymbol(key) {
+    return typeof key === 'symbol' && intrinsicSymbols.has(key);
+}
+const proxyableTags = new Map([
+    ['[object Object]', 1 /* TargetType.COMMON */],
+    ['[object Array]', 1 /* TargetType.COMMON */],
+    ['[object Map]', 2 /* TargetType.COLLECTION */],
+    ['[object Set]', 2 /* TargetType.COLLECTION */],
+    ['[object WeakMap]', 2 /* TargetType.COLLECTION */],
+    ['[object WeakSet]', 2 /* TargetType.COLLECTION */],
+]);
+function getTargetType(value) {
+    var proto = Object.getPrototypeOf(value);
+    var cname = "";
+    if (proto && proto.constructor) {
+        cname = proto.constructor.name;
+    }
+    if ((cname === "Control" || cname == "RouteManager" || cname == "ServiceManager")) {
+        return 0 /* TargetType.SYSTEM */;
+    }
+    if (!Object.isExtensible(value)) {
+        return 0 /* TargetType.INVALID */;
+    }
+    return proxyableTags.get(Object.prototype.toString.call(value)) ?? 0 /* TargetType.INVALID */;
+}
+const canonicalIndex = /^(?:0|[1-9]\d*)$/;
+const isNumericKey = (key) => typeof key === 'string' && canonicalIndex.test(key) && String(Number(key)) === key;
+const savedTracking = [];
+let trackingDepth = 0;
+function enterTracking(enabled) {
+    savedTracking[trackingDepth++] = followTracking;
+    followTracking = enabled;
+}
+function pauseTracking() {
+    enterTracking(false);
+}
+function enableTracking() {
+    enterTracking(true);
+}
+function resetTracking() {
+    followTracking = trackingDepth > 0 ? savedTracking[--trackingDepth] : true;
+}
+const arrayStack = [];
+function addArrayStack(key) {
+    arrayStack.push(arrayScope);
+    arrayScope.enabled = true;
+    arrayScope.key = key;
+}
+function removeArrayStack() {
+    const last = arrayStack.pop();
+    if (arrayStack.length > 0) {
+        arrayScope = last === undefined ? { enabled: false, key: '' } : last;
+    }
+    else {
+        arrayScope = { enabled: false, key: '' };
+    }
+}
+
 class ListBinding {
     component;
     itemsFn;
@@ -243,13 +701,28 @@ class ListBinding {
     }
     _setupBinding() {
         const update = () => {
-            const items = this._toArray(this.itemsFn());
+            const source = this._toArray(this.itemsFn());
+            const rawSource = getRaw(source);
+            const count = source.length;
+            let items;
+            if (rawSource === source) {
+                items = source;
+            }
+            else {
+                items = new Array(count);
+                for (let i = 0; i < count; i++) {
+                    if (i in rawSource)
+                        items[i] = source[i];
+                    else
+                        void source[i];
+                }
+            }
             const prevItems = this.olditems;
             const prevComponents = this._rendered;
             if (this.olditems.length > 0) {
                 const currentRaws = new Set();
-                for (const it of items)
-                    currentRaws.add(getRaw(it));
+                for (let i = 0; i < count; i++)
+                    currentRaws.add(getRaw(items[i]));
                 for (const old of this.olditems) {
                     const raw = getRaw(old);
                     if (!currentRaws.has(raw)) {
@@ -366,8 +839,8 @@ class ListBinding {
             });
             this._syncContainer(newComponents);
             this._rendered = newComponents;
-            this.olditems = items.slice();
-            return items.length;
+            this.olditems = items === source ? source.slice() : items;
+            return count;
         };
         this._effectCleanup = effect(() => update());
     }
@@ -383,6 +856,34 @@ class ListBinding {
             }
             return;
         }
+        if (newComponents.length >= items.length) {
+            let appendOnly = true;
+            for (let i = 0; i < items.length; i++) {
+                if (newComponents[i] !== items[i]) {
+                    appendOnly = false;
+                    break;
+                }
+            }
+            if (appendOnly && newComponents.length > items.length) {
+                const existing = new Set(items);
+                for (let i = items.length; i < newComponents.length; i++) {
+                    if (existing.has(newComponents[i])) {
+                        appendOnly = false;
+                        break;
+                    }
+                    existing.add(newComponents[i]);
+                }
+            }
+            if (appendOnly) {
+                for (let i = items.length; i < newComponents.length; i++) {
+                    try {
+                        controls.add(newComponents[i]);
+                    }
+                    catch { }
+                }
+                return;
+            }
+        }
         const oldIndex = new Map();
         items.forEach((c, i) => oldIndex.set(c, i));
         const sources = newComponents.map(c => {
@@ -498,6 +999,108 @@ function findAppendableComponent$1(component) {
     return null;
 }
 
+class LeakMonitor {
+    threshold;
+    name;
+    _origins = new Map();
+    _quietChecks = 0;
+    constructor(threshold, name) {
+        this.threshold = threshold;
+        this.name = name;
+    }
+    check(size) {
+        if (this.threshold <= 0 || size < this.threshold) {
+            return undefined;
+        }
+        const origin = new Error().stack ?? '';
+        this._origins.set(origin, (this._origins.get(origin) ?? 0) + 1);
+        this._quietChecks--;
+        if (this._quietChecks <= 0) {
+            this._quietChecks = this.threshold / 2;
+            const [stack, count] = this._busiestOrigin();
+            reportWarning('MJX507', [this.name, size, count], stack);
+        }
+        return () => {
+            this._origins.set(origin, (this._origins.get(origin) ?? 0) - 1);
+        };
+    }
+    _busiestOrigin() {
+        let busiest = ['', 0];
+        for (const entry of this._origins) {
+            if (entry[1] > busiest[1]) {
+                busiest = entry;
+            }
+        }
+        return busiest;
+    }
+}
+
+function createRing() {
+    const ring = { value: undefined, linked: false };
+    ring.before = ring;
+    ring.after = ring;
+    return ring;
+}
+class LinkedList {
+    _ring = createRing();
+    _count = 0;
+    get size() {
+        return this._count;
+    }
+    isEmpty() {
+        return this._count === 0;
+    }
+    push(value) {
+        return this._link(value, this._ring.before);
+    }
+    unshift(value) {
+        return this._link(value, this._ring);
+    }
+    pop() {
+        return this._take(this._ring.before);
+    }
+    shift() {
+        return this._take(this._ring.after);
+    }
+    clear() {
+        for (let link = this._ring.after; link !== this._ring; link = link.after) {
+            link.linked = false;
+        }
+        this._ring = createRing();
+        this._count = 0;
+    }
+    *[Symbol.iterator]() {
+        const ring = this._ring;
+        for (let link = ring.after; link !== ring; link = link.after) {
+            yield link.value;
+        }
+    }
+    _link(value, previous) {
+        const link = { value, before: previous, after: previous.after, linked: true };
+        previous.after.before = link;
+        previous.after = link;
+        this._count++;
+        return () => this._unlink(link);
+    }
+    _take(link) {
+        if (link === this._ring) {
+            return undefined;
+        }
+        const value = link.value;
+        this._unlink(link);
+        return value;
+    }
+    _unlink(link) {
+        if (!link.linked) {
+            return;
+        }
+        link.linked = false;
+        link.before.after = link.after;
+        link.after.before = link.before;
+        this._count--;
+    }
+}
+
 const COMPILER_CONTRACT = 1;
 const reported = new Set();
 const pending = new Set();
@@ -517,50 +1120,297 @@ function flushCompilerContractWarnings() {
         motifCompiled(contract);
 }
 
-function isCheckedInput(el) {
-    if (!el || el.tagName !== 'INPUT')
-        return false;
-    const t = String(el.type || '').toLowerCase();
-    return t === 'checkbox' || t === 'radio';
+var NodeTypes;
+(function (NodeTypes) {
+    NodeTypes[NodeTypes["ELEMENT_NODE"] = 1] = "ELEMENT_NODE";
+    NodeTypes[NodeTypes["ATTRIBUTE_NODE"] = 2] = "ATTRIBUTE_NODE";
+    NodeTypes[NodeTypes["TEXT_NODE"] = 3] = "TEXT_NODE";
+    NodeTypes[NodeTypes["CDATA_SECTION_NODE"] = 4] = "CDATA_SECTION_NODE";
+    NodeTypes[NodeTypes["ENTITY_REFERENCE_NODE"] = 5] = "ENTITY_REFERENCE_NODE";
+    /**deprecated */
+    NodeTypes[NodeTypes["ENTITY_NODE"] = 6] = "ENTITY_NODE";
+    /**deprecated */
+    NodeTypes[NodeTypes["PROCESSING_INSTRUCTION_NODE"] = 7] = "PROCESSING_INSTRUCTION_NODE";
+    NodeTypes[NodeTypes["COMMENT_NODE"] = 8] = "COMMENT_NODE";
+    NodeTypes[NodeTypes["DOCUMENT_NODE"] = 9] = "DOCUMENT_NODE";
+    NodeTypes[NodeTypes["DOCUMENT_TYPE_NODE"] = 10] = "DOCUMENT_TYPE_NODE";
+    NodeTypes[NodeTypes["DOCUMENT_FRAGMENT_NODE"] = 11] = "DOCUMENT_FRAGMENT_NODE";
+    /**deprecated */
+    NodeTypes[NodeTypes["NOTATION_NODE"] = 12] = "NOTATION_NODE";
+})(NodeTypes || (NodeTypes = {}));
+
+class Effect {
+    fn;
+    callback;
+    deps = [];
+    active = true;
+    running = false;
+    scheduler;
+    constructor(fn, callback) {
+        this.fn = fn;
+        this.callback = callback;
+    }
+    run() {
+        let value;
+        if (!this.active || this.running)
+            return;
+        cleanup(this);
+        effectStack.push(this);
+        this.running = true;
+        try {
+            value = this.fn();
+        }
+        finally {
+            effectStack.pop();
+            this.running = false;
+            if (this.callback) {
+                this.callback(value);
+            }
+        }
+    }
+    stop() {
+        this.active = false;
+        cleanup(this);
+    }
 }
-function isNumericInput(el) {
-    if (!el || el.tagName !== 'INPUT')
-        return false;
-    const t = String(el.type || '').toLowerCase();
-    return t === 'number' || t === 'range';
+const depMap = new WeakMap();
+const effectStack = [];
+const effectQueue = new Set();
+let isFlushing = false;
+let leakEnabled = false;
+let leakThreshold = -1;
+let leakMonitor;
+const leakCleanups = new WeakMap();
+function configureReactivityLeakMonitor(opts = {}) {
+    leakEnabled = !!opts.enabled;
+    leakThreshold = typeof opts.threshold === 'number' ? opts.threshold : (leakEnabled ? 200 : -1);
+    leakMonitor = leakEnabled && leakThreshold > 0 ? new LeakMonitor(leakThreshold, opts.name ?? 'reactivity-core') : undefined;
 }
-function readModelValue(el) {
-    if (!el)
-        return undefined;
-    if (isCheckedInput(el))
-        return !!el.checked;
-    if (isNumericInput(el)) {
-        const raw = el.value;
-        if (raw === '' || raw == null)
-            return null;
-        const n = typeof el.valueAsNumber === 'number' ? el.valueAsNumber : Number(raw);
-        return Number.isFinite(n) ? n : null;
+function track(target, key) {
+    if (!followTracking)
+        return;
+    const rawTarget = getRaw(target);
+    const effect = effectStack[effectStack.length - 1];
+    if (!effect || !effect.active)
+        return;
+    let deps = depMap.get(rawTarget);
+    if (!deps)
+        depMap.set(rawTarget, (deps = new Map()));
+    let dep = deps.get(key);
+    if (!dep)
+        deps.set(key, (dep = new Set()));
+    if (!dep.has(effect)) {
+        dep.add(effect);
+        effect.deps.push([rawTarget, key]);
+        if (leakEnabled && leakMonitor && leakThreshold > 0) {
+            try {
+                const cleanup = leakMonitor.check(dep.size);
+                if (cleanup) {
+                    let m = leakCleanups.get(dep);
+                    if (!m) {
+                        m = new Map();
+                        leakCleanups.set(dep, m);
+                    }
+                    m.set(effect, cleanup);
+                }
+            }
+            catch { }
+        }
     }
-    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._component = component;
-        this.propertyName = propertyName;
+function trigger(target, key) {
+    const rawTarget = getRaw(target);
+    const deps = depMap.get(rawTarget);
+    if (!deps)
+        return;
+    const effects = deps.get(key);
+    if (!effects)
+        return;
+    let queued = false;
+    effects.forEach(effect => {
+        if (!effect.active)
+            return;
+        if (effect.scheduler) {
+            runReported(effect.scheduler);
+            return;
+        }
+        effectQueue.add(effect);
+        queued = true;
+    });
+    if (queued)
+        flushEffects();
+}
+function runReported(fn) {
+    try {
+        fn();
+    }
+    catch (error) {
+        reportError('MJX208', error);
+    }
+}
+const MAX_EFFECT_RUNS_PER_FLUSH = 50;
+function flushEffects() {
+    if (isFlushing)
+        return;
+    isFlushing = true;
+    Promise.resolve().then(() => {
+        const runCounts = new Map();
+        try {
+            while (effectQueue.size > 0) {
+                const batch = Array.from(effectQueue);
+                effectQueue.clear();
+                for (const e of batch) {
+                    const runs = (runCounts.get(e) ?? 0) + 1;
+                    runCounts.set(e, runs);
+                    if (runs > MAX_EFFECT_RUNS_PER_FLUSH) {
+                        if (runs === MAX_EFFECT_RUNS_PER_FLUSH + 1) {
+                            reportWarning('MJX203', [MAX_EFFECT_RUNS_PER_FLUSH], { fn: String(e.fn).slice(0, 200) });
+                        }
+                        continue;
+                    }
+                    runReported(() => e.run());
+                }
+            }
+        }
+        finally {
+            effectQueue.clear();
+            isFlushing = false;
+        }
+    });
+}
+function cleanup(effect) {
+    for (const [target, key] of effect.deps) {
+        const keyMap = depMap.get(target);
+        if (!keyMap)
+            continue;
+        const depSet = keyMap.get(key);
+        if (!depSet)
+            continue;
+        depSet.delete(effect);
+        try {
+            const map = leakCleanups.get(depSet);
+            const fn = map?.get(effect);
+            if (fn) {
+                try {
+                    fn();
+                }
+                catch { }
+                map.delete(effect);
+            }
+        }
+        catch { }
+        if (depSet.size === 0) {
+            keyMap.delete(key);
+        }
+        if (keyMap.size === 0) {
+            depMap.delete(target);
+        }
+    }
+    effect.deps = [];
+}
+function effect(fn, onValueChanged) {
+    const e = new Effect(fn, onValueChanged);
+    runReported(() => e.run());
+    return () => e.stop();
+}
+function createScheduledEffect(fn, scheduler) {
+    const e = new Effect(fn);
+    e.scheduler = scheduler;
+    return {
+        run: () => { runReported(() => e.run()); },
+        stop: () => e.stop(),
+    };
+}
+function popAsyncTracking(t) {
+    if (!t.pushed)
+        return;
+    t.pushed = false;
+    const i = effectStack.lastIndexOf(t.effect);
+    if (i >= 0)
+        effectStack.splice(i, 1);
+}
+const asyncTracking = {
+    capture() {
+        return { effect: effectStack[effectStack.length - 1], pushed: false };
+    },
+    suspend(t, value) {
+        popAsyncTracking(t);
+        return value;
+    },
+    resume(t, value) {
+        if (t.effect && t.effect.active && !t.pushed) {
+            effectStack.push(t.effect);
+            t.pushed = true;
+        }
+        return value;
+    },
+    end(t) {
+        popAsyncTracking(t);
+    },
+};
+const UNTRACKED_SENTINEL = new Effect(() => { });
+UNTRACKED_SENTINEL.active = false;
+function untracked(fn) {
+    effectStack.push(UNTRACKED_SENTINEL);
+    try {
+        return fn();
+    }
+    finally {
+        effectStack.pop();
+    }
+}
+function debugGetDeps(target) {
+    const rawTarget = getRaw(target);
+    return depMap.get(rawTarget);
+}
+function debugGetDepMap() {
+    return depMap;
+}
+
+function isCheckedInput(el) {
+    if (!el || el.tagName !== 'INPUT')
+        return false;
+    const t = String(el.type || '').toLowerCase();
+    return t === 'checkbox' || t === 'radio';
+}
+function isNumericInput(el) {
+    if (!el || el.tagName !== 'INPUT')
+        return false;
+    const t = String(el.type || '').toLowerCase();
+    return t === 'number' || t === 'range';
+}
+function readModelValue(el) {
+    if (!el)
+        return undefined;
+    if (isCheckedInput(el))
+        return !!el.checked;
+    if (isNumericInput(el)) {
+        const raw = el.value;
+        if (raw === '' || raw == null)
+            return null;
+        const n = typeof el.valueAsNumber === 'number' ? el.valueAsNumber : Number(raw);
+        return Number.isFinite(n) ? n : null;
+    }
+    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._component = component;
+        this.propertyName = propertyName;
         this.dataSource = dataSource;
         this.dataMember = dataMember;
         this.formatString = formatString;
@@ -754,27 +1604,64 @@ class Binding {
     }
 }
 
+const RAW_KEY = Flags.RAW;
+function isPrototypeObject(o) {
+    return Object.prototype.hasOwnProperty.call(o, 'constructor') && typeof o.constructor === 'function' && o.constructor.prototype === o;
+}
+function overridesBelow(instance, proto, name) {
+    let p = Object.getPrototypeOf(instance);
+    while (p && p !== proto) {
+        if (Object.prototype.hasOwnProperty.call(p, name))
+            return true;
+        p = Object.getPrototypeOf(p);
+    }
+    return false;
+}
+function lazyBindMethods(proto, names) {
+    for (const name of names) {
+        let fn = proto[name];
+        if (typeof fn !== 'function')
+            continue;
+        Object.defineProperty(proto, name, {
+            configurable: true,
+            enumerable: false,
+            get() {
+                if (this === proto || isPrototypeObject(this))
+                    return fn;
+                const target = this[RAW_KEY] ?? this;
+                const bound = fn.bind(target);
+                if (!overridesBelow(target, proto, name)) {
+                    try {
+                        Object.defineProperty(target, name, { value: bound, writable: true, configurable: true, enumerable: true });
+                    }
+                    catch { }
+                }
+                return bound;
+            },
+            set(value) {
+                if (this === proto && typeof value === 'function') {
+                    fn = value;
+                    return;
+                }
+                Object.defineProperty(this, name, { value, writable: true, configurable: true, enumerable: true });
+            },
+        });
+    }
+}
+
+function isWritablePathKey(target, key) {
+    if (key === '__proto__')
+        return false;
+    if (key === 'constructor' || key === 'prototype')
+        return Object.prototype.hasOwnProperty.call(target, key);
+    return true;
+}
 class BindingCollection {
     _items = [];
     _component;
     _branchScope = null;
     constructor(component) {
         this._component = component;
-        this.add = this.add.bind(this);
-        this.remove = this.remove.bind(this);
-        this.clear = this.clear.bind(this);
-        this.activateAll = this.activateAll.bind(this);
-        this.deactivateAll = this.deactivateAll.bind(this);
-        this.reActivateAll = this.reActivateAll.bind(this);
-        this.when = this.when.bind(this);
-        this.text = this.text.bind(this);
-        this.value = this.value.bind(this);
-        this.list = this.list.bind(this);
-        this.loop = this.loop.bind(this);
-        this.method = this.method.bind(this);
-        this.watch = this.watch.bind(this);
-        this.display = this.display.bind(this);
-        this.wait = this.wait.bind(this);
     }
     _own(stop) {
         if (this._branchScope) {
@@ -971,12 +1858,12 @@ class BindingCollection {
             stopInner();
         });
     }
-    ternaryCall = (condFn, onTrue, onFalse) => {
+    ternaryCall(condFn, onTrue, onFalse) {
         this._ternarySchedule(condFn, onTrue, onFalse, (run) => queueMicrotask(run));
-    };
-    _ternaryCallTop = (condFn, onTrue, onFalse) => {
+    }
+    _ternaryCallTop(condFn, onTrue, onFalse) {
         this._ternarySchedule(condFn, onTrue, onFalse, (run) => setTimeout(run, 0));
-    };
+    }
     watch(cb) {
         const ef = effect(() => {
             cb();
@@ -1063,11 +1950,17 @@ class BindingCollection {
                     if (member && source != null) {
                         const path = member.split('.');
                         let target = source;
-                        for (let i = 0; i < path.length - 1 && target != null; i++) {
-                            target = target[path[i]];
+                        for (let i = 0; i < path.length && target != null; i++) {
+                            const key = path[i];
+                            if (!isWritablePathKey(target, key))
+                                return;
+                            if (i === path.length - 1) {
+                                target[key] = value;
+                            }
+                            else {
+                                target = target[key];
+                            }
                         }
-                        if (target != null)
-                            target[path[path.length - 1]] = value;
                     }
                     else if (source != null && typeof source === 'object' && 'value' in source) {
                         source.value = value;
@@ -1136,6 +2029,11 @@ class BindingCollection {
         return null;
     }
 }
+lazyBindMethods(BindingCollection.prototype, [
+    'add', 'remove', 'clear', 'activateAll', 'deactivateAll', 'reActivateAll',
+    'when', 'text', 'value', 'list', 'loop', 'method', 'watch', 'display', 'wait',
+    'ternaryCall', '_ternaryCallTop'
+]);
 
 class Emitter {
     _subscriptions = [];
@@ -1226,18 +2124,14 @@ class Emitter {
 
 class ComponentEmiter {
     component;
-    _emitters = new Map();
-    _sourceDisposables = new Map();
-    _listenerDisposables = new Map();
+    _emitters;
+    _sourceDisposables;
+    _listenerDisposables;
     constructor(component) {
         this.component = component;
-        this.fire = this.fire.bind(this);
-        this.on = this.on.bind(this);
-        this.off = this.off.bind(this);
-        this.createEvent = this.createEvent.bind(this);
-        this.getOrCreateEmitter = this.getOrCreateEmitter.bind(this);
-        this.addSource = this.addSource.bind(this);
-        this.clear = this.clear.bind(this);
+    }
+    hasListeners(eventName) {
+        return this._emitters !== undefined && this._emitters.has(eventName);
     }
     fire(eventName, args) {
         try {
@@ -1257,7 +2151,7 @@ class ComponentEmiter {
     }
     off(event, cb) {
         const lower = String(event).toLowerCase();
-        const map = this._listenerDisposables.get(lower);
+        const map = this._listenerDisposables?.get(lower);
         if (!map)
             return this;
         const list = map.get(cb);
@@ -1269,10 +2163,11 @@ class ComponentEmiter {
         return this;
     }
     getOrCreateEmitter(name) {
-        let e = this._emitters.get(name);
+        const emitters = this._emitters ??= new Map();
+        let e = emitters.get(name);
         if (!e) {
-            this._emitters.set(name, new Emitter());
-            e = this._emitters.get(name);
+            e = new Emitter();
+            emitters.set(name, e);
         }
         return e;
     }
@@ -1290,10 +2185,11 @@ class ComponentEmiter {
         };
         const emitter = this.getOrCreateEmitter(lowerFull);
         const disp = emitter.event((e) => invoke(e));
-        let map = this._listenerDisposables.get(lowerFull);
+        const listeners = this._listenerDisposables ??= new Map();
+        let map = listeners.get(lowerFull);
         if (!map) {
             map = new Map();
-            this._listenerDisposables.set(lowerFull, map);
+            listeners.set(lowerFull, map);
         }
         const list = map.get(cb);
         if (list) {
@@ -1319,10 +2215,11 @@ class ComponentEmiter {
         }
         catch { }
         if (disp) {
-            let set = this._sourceDisposables.get(lower);
+            const sources = this._sourceDisposables ??= new Map();
+            let set = sources.get(lower);
             if (!set) {
                 set = new Set();
-                this._sourceDisposables.set(lower, set);
+                sources.set(lower, set);
             }
             set.add(disp);
             this.component.motif.register(disposableCore.toDisposable(() => {
@@ -1341,21 +2238,21 @@ class ComponentEmiter {
     clear(event) {
         if (event) {
             const lower = event.toLowerCase();
-            const srcs = this._sourceDisposables.get(lower);
+            const srcs = this._sourceDisposables?.get(lower);
             srcs?.forEach(d => { try {
                 d.dispose();
             }
             catch { } });
-            this._sourceDisposables.delete(lower);
-            const agg = this._emitters.get(lower);
+            this._sourceDisposables?.delete(lower);
+            const agg = this._emitters?.get(lower);
             try {
                 agg?.dispose();
             }
             catch { }
-            this._emitters.delete(lower);
-            this._listenerDisposables.delete(lower);
+            this._emitters?.delete(lower);
+            this._listenerDisposables?.delete(lower);
         }
-        else {
+        else if (this._emitters) {
             for (const key of Array.from(this._emitters.keys())) {
                 this.clear(key);
             }
@@ -1363,6 +2260,7 @@ class ComponentEmiter {
         return this;
     }
 }
+lazyBindMethods(ComponentEmiter.prototype, ['fire', 'on', 'off', 'createEvent', 'getOrCreateEmitter', 'addSource', 'clear']);
 
 const METHOD_ATTRS = new Set([
     'focus', 'blur', 'click', 'pause', 'submit', 'reset',
@@ -1380,11 +2278,13 @@ const ARGUMENT_METHODS = new Set(['setSelectionRange', 'setRangeText', 'setPoint
 const PROPERTY_FIRST = new Set(['checked', 'selected', 'muted', 'indeterminate', 'srcObject']);
 class controlAttribute {
     _parent;
-    _attrMap = new Map();
-    _watchers = new Map();
+    _attrMapStore;
+    _watchersStore;
     constructor(parent) {
         this._parent = parent;
     }
+    get _attrMap() { return this._attrMapStore ??= new Map(); }
+    get _watchers() { return this._watchersStore ??= new Map(); }
     /** @deprecated Tek kaynak `_attrMap`; geriye dönük okuma için türetilmiş görünüm. */
     get attributes() {
         return Array.from(this._attrMap.entries(), ([name, value]) => ({ name: String(name), value }));
@@ -1915,10 +2815,13 @@ class controlClass {
     constructor(parent) {
         this._parent = parent;
     }
-    _counts = new Map();
-    _staticSet = new Set();
-    _watchers = new Map();
+    _countsStore;
+    _staticSetStore;
+    _watchersStore;
     _watcherSeq = 0;
+    get _counts() { return this._countsStore ??= new Map(); }
+    get _staticSet() { return this._staticSetStore ??= new Set(); }
+    get _watchers() { return this._watchersStore ??= new Map(); }
     add(...values) {
         for (const value of values) {
             if (typeof value === 'function') {
@@ -2474,6 +3377,203 @@ 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._value = initialValue;
+        this._target = { [SIGNAL_TARGET]: true };
+        this._key = SIGNAL_KEY;
+        this._equals = equals;
+    }
+    get value() {
+        if (!this._disposed) {
+            track(this._target, this._key);
+        }
+        return this._value;
+    }
+    set value(newValue) {
+        if (this._disposed)
+            return;
+        if (!this._equals(this._value, newValue)) {
+            this._value = newValue;
+            trigger(this._target, this._key);
+        }
+    }
+    peek() {
+        return this._value;
+    }
+    update(updater) {
+        this.value = (updater(this._value));
+    }
+    mutate(mutator) {
+        if (this._disposed)
+            return;
+        mutator(this._value);
+        trigger(this._target, this._key);
+    }
+    notify() {
+        if (this._disposed)
+            return;
+        trigger(this._target, this._key);
+    }
+    asReadonly() {
+        const self = this;
+        return {
+            get value() { return self.value; },
+            peek() { return self.peek(); },
+            valueOf() { return self.valueOf(); },
+            toString() { return self.toString(); }
+        };
+    }
+    dispose() {
+        this._disposed = true;
+    }
+    valueOf() {
+        return this.value;
+    }
+    toString() {
+        return String(this.value);
+    }
+}
+class Computed {
+    _value;
+    _dirty = true;
+    _computing = false;
+    _target;
+    _key;
+    _getter;
+    _cleanup;
+    constructor(getter) {
+        this._getter = getter;
+        this._target = { [SIGNAL_TARGET]: true };
+        this._key = SIGNAL_KEY;
+        this._cleanup = effect(() => {
+            if (this._computing)
+                return;
+            this._computing = true;
+            try {
+                const newVal = this._getter();
+                const changed = this._dirty || !Object.is(this._value, newVal);
+                this._value = newVal;
+                this._dirty = false;
+                if (changed) {
+                    trigger(this._target, this._key);
+                }
+            }
+            finally {
+                this._computing = false;
+            }
+        });
+    }
+    get value() {
+        track(this._target, this._key);
+        if (this._dirty) {
+            this._computing = true;
+            pauseTracking();
+            try {
+                this._value = this._getter();
+                this._dirty = false;
+            }
+            finally {
+                resetTracking();
+                this._computing = false;
+            }
+        }
+        return this._value;
+    }
+    peek() {
+        if (this._dirty) {
+            pauseTracking();
+            try {
+                this._value = this._getter();
+                this._dirty = false;
+            }
+            finally {
+                resetTracking();
+            }
+        }
+        return this._value;
+    }
+    dispose() {
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = undefined;
+        }
+    }
+    valueOf() {
+        return this.value;
+    }
+    toString() {
+        return String(this.value);
+    }
+}
+class LazyComputed {
+    _value;
+    _dirty = true;
+    _disposed = false;
+    _target;
+    _key;
+    _getter;
+    _runner;
+    constructor(getter) {
+        this._getter = getter;
+        this._target = { [SIGNAL_TARGET]: true };
+        this._key = SIGNAL_KEY;
+        this._runner = createScheduledEffect(() => { this._value = this._getter(); }, () => {
+            if (this._dirty || this._disposed)
+                return;
+            this._dirty = true;
+            trigger(this._target, this._key);
+        });
+    }
+    get value() {
+        if (!this._disposed) {
+            track(this._target, this._key);
+        }
+        this._refresh();
+        return this._value;
+    }
+    peek() {
+        this._refresh();
+        return this._value;
+    }
+    get isDirty() {
+        return this._dirty;
+    }
+    _refresh() {
+        if (!this._dirty)
+            return;
+        if (this._disposed) {
+            this._value = untracked(this._getter);
+        }
+        else {
+            this._runner.run();
+        }
+        this._dirty = false;
+    }
+    dispose() {
+        if (this._disposed)
+            return;
+        this._disposed = true;
+        this._runner.stop();
+    }
+    valueOf() {
+        return this.value;
+    }
+    toString() {
+        return String(this.value);
+    }
+}
+
 let activeResolver = null;
 let activeSlot = null;
 let rawScopedIn = null;
@@ -3008,6 +4108,92 @@ class ServiceProvider {
     }
 }
 
+const contentBlocks = { live: 0 };
+
+const OPTIONS_OWNER = Symbol('motif.optionsOwner');
+const TRANSITION_SLOT = Symbol('motif.transition');
+
+const transitionSettings = { mode: 'concurrent' };
+const noop = () => { };
+function createTracker() {
+    const running = new WeakMap();
+    function track(node, resolve, via) {
+        const host = node?.parentNode ?? via?.parentNode;
+        if (!host)
+            return { done: resolve, release: noop };
+        let set = running.get(host);
+        if (!set)
+            running.set(host, (set = new Set()));
+        let finish = noop;
+        const entry = { node: node, via: via ?? null, done: new Promise(r => { finish = r; }) };
+        set.add(entry);
+        let settled = false;
+        const release = () => {
+            if (settled)
+                return;
+            settled = true;
+            set.delete(entry);
+            finish();
+        };
+        return {
+            done: () => {
+                const first = !settled;
+                release();
+                if (first && resolve)
+                    resolve();
+            },
+            release,
+            finished: entry.done,
+        };
+    }
+    function pending(host, except) {
+        if (!host)
+            return null;
+        const set = running.get(host);
+        if (!set || set.size === 0)
+            return null;
+        let waits = null;
+        for (const entry of set) {
+            if (entry.node === except)
+                continue;
+            if (entry.node.parentNode !== host && entry.via?.parentNode !== host) {
+                set.delete(entry);
+                continue;
+            }
+            (waits ??= []).push(entry.done);
+        }
+        return waits ? Promise.all(waits).then(noop) : null;
+    }
+    return { track, pending };
+}
+const leaves = createTracker();
+const enters = createTracker();
+const trackLeave = leaves.track;
+const pendingLeaves = leaves.pending;
+const trackEnter = enters.track;
+const pendingEnters = enters.pending;
+function deferUntilEntered(node, run, play) {
+    const host = node.parentNode;
+    const handle = {
+        finished: run.finished ?? Promise.resolve(),
+        playState: 'pending',
+        addEventListener: noop,
+        removeEventListener: noop,
+        cancel: noop,
+    };
+    queueMicrotask(() => {
+        const wait = pendingEnters(host, node);
+        if (wait)
+            wait.then(() => { play(); });
+        else
+            play();
+    });
+    return handle;
+}
+function isTransitionMode(value) {
+    return value === 'concurrent' || value === 'out-in' || value === 'in-out';
+}
+
 /** DI token'ını okunur biçime çevirir (dev uyarıları için). */
 function describeServiceToken(t) {
     if (typeof t === 'string')
@@ -3018,9 +4204,12 @@ function describeServiceToken(t) {
         return t.name || '[AnonymousClass]';
     return String(t);
 }
+function peekTransition(c) {
+    return c?.motif?.options?.[TRANSITION_SLOT];
+}
 /**WAAPI keyframe (transitionIn) YA DA CSS class transition (name/classes) tanımlı olarak enter animasyonu varmı */
 function clearNavDirection(c) {
-    const t = c?.motif?.options?.transition;
+    const t = peekTransition(c);
     if (!t?._markedDirection)
         return;
     t._markedDirection = false;
@@ -3029,57 +4218,286 @@ function clearNavDirection(c) {
     }
     catch { }
 }
-function wantsEnterTransition(c) {
-    const t = c?.motif.options?.transition;
-    return !!(c?.motif.options?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
+function enterModeOf(container) {
+    let c = container;
+    while (c) {
+        const mode = peekTransition(c)?.mode;
+        if (mode)
+            return mode;
+        const node = c.element;
+        if (!node || node.nodeType !== Node.COMMENT_NODE)
+            break;
+        c = c.parent ?? c._base?._leaveContainer;
+    }
+    return transitionSettings.mode;
 }
-const ComponentHelper = {
-    callInitializeComponent(component) {
-        const sender = component;
-        const ev = { cancel: false };
-        if (!component || component.isDisposed) {
-            return;
-        }
-        // 1) class method initializeComponent
-        if (typeof component.initializeComponent === 'function') {
-            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');
+function leaveModeOf(c) {
+    return enterModeOf(c.parent ?? c._base?._leaveContainer);
+}
+function wantsEnterTransition(c) {
+    const o = c?.motif?.options;
+    const t = o?.[TRANSITION_SLOT];
+    return !!(o?.transitionIn || (t && (t.classes || (t.name && t.name.length > 0))));
+}
+function createTransitionApi(owner) {
+    const cur = () => owner.motif.options?.[TRANSITION_SLOT] ?? t;
+    const t = {
+        transitionInfo: () => {
+            const s = cur();
+            return {
+                in: getTransitionInfo(owner.element, `${s.name}-enter ${s.name}-enter-start`),
+                out: getTransitionInfo(owner.element, `${s.name}-leave ${s.name}-leave-start`),
+            };
+        },
+        name: '',
+        mode: undefined,
+        classes: undefined,
+        activeCssCancel: null,
+        activeCssPhase: null,
+        cssProps: () => {
+            const s = cur();
+            if (s.classes) {
+                return { name: s.classes.name || s.name || '', ...s.classes };
+            }
+            if (s.name && s.name.length > 0) {
+                return { name: s.name };
             }
-        }
-        // 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');
+            return null;
+        },
+        skipNextLeave: false,
+        _suppressEnter: false,
+        _markedDirection: false,
+        in: (op) => {
+            owner.motif.options.transitionIn = op;
+        },
+        out: (op) => {
+            owner.motif.options.transitionOut = op;
+        },
+        enterTransition: (resolve) => {
+            const s = cur();
+            const base = owner._base;
+            const appear = !base._enterPlayed;
+            base._enterPlayed = true;
+            base._enterSeq = (base._enterSeq ?? 0) + 1;
+            if (s._suppressEnter) {
+                resolve && resolve();
+                return shimAnimation;
             }
-        }
-    },
-    async callDisposing(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
+            const attempt = {};
+            base._enterRun = attempt;
+            const enter = trackEnter(owner.element, () => {
+                if (owner._base?._enterRun === attempt) {
+                    owner._base._enterRun = null;
+                    clearNavDirection(owner);
+                }
+                resolve && resolve();
+            }, owner.motif.options.placeholder);
+            const transitionIn = owner.motif.options.transitionIn;
+            const animation = transitionIn
+                ? s.run(transitionIn.keyframes, transitionIn.options, enter.done)
+                : s._runCss('enter', enter.done, appear);
+            if (animation && animation !== shimAnimation && typeof animation.addEventListener === 'function') {
+                animation.addEventListener('cancel', enter.release);
+            }
+            return animation;
+        },
+        leaveTransition: (resolve) => {
+            const s = cur();
+            const node = owner.element;
+            const leave = trackLeave(node, resolve);
+            const play = () => {
+                const transitionOut = owner.motif.options?.transitionOut;
+                const animation = transitionOut
+                    ? s.run(transitionOut.keyframes, transitionOut.options, leave.done)
+                    : s._runCss('leave', leave.done);
+                if (animation && animation !== shimAnimation && typeof animation.addEventListener === 'function') {
+                    animation.addEventListener('cancel', leave.release);
+                }
+                return animation;
+            };
+            if (leave.finished && leaveModeOf(owner) === 'in-out') {
+                return deferUntilEntered(node, leave, play);
             }
-            const sender = component, ev = { cancel: false };
-            if (component.onDisposing) {
-                callReported(() => component.onDisposing(sender, ev), 'MJX122', 'onDisposing');
+            return play();
+        },
+        _runCss: (phase, resolve, appear = false) => {
+            const s = cur();
+            if (phase === 'enter' && s.activeCssPhase === 'leave') {
+                resolve && resolve();
+                return shimAnimation;
             }
-            if (Array.isArray(component._base._onDisposingHandlers)) {
-                for (const fn of component._base._onDisposingHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onDisposing');
+            const cssProps = s.cssProps();
+            const el = owner.element;
+            if (cssProps && el && el.nodeType === 1 && el.classList) {
+                try {
+                    s.activeCssCancel?.();
                 }
+                catch { }
+                const cancel = runCssTransition(el, cssProps, phase, () => {
+                    s.activeCssCancel = null;
+                    s.activeCssPhase = null;
+                    resolve && resolve();
+                }, appear);
+                s.activeCssCancel = cancel;
+                s.activeCssPhase = phase;
+                return shimAnimation;
+            }
+            resolve && resolve();
+            return shimAnimation;
+        },
+        activeAnimations: [],
+        run: (keyframes, options, resolve) => {
+            const s = cur();
+            owner.motif.stopAnimations();
+            const element = owner.element;
+            if (element.animate) {
+                var x = element.animate(keyframes, options);
+                s.activeAnimations.push(x);
+                let cleanedUp = false;
+                const safeCleanup = () => {
+                    if (cleanedUp)
+                        return;
+                    cleanedUp = true;
+                    try {
+                        if (s.activeAnimations) {
+                            s.activeAnimations = s.activeAnimations.filter(a => a !== x);
+                        }
+                    }
+                    catch { }
+                };
+                x.addEventListener('finish', () => {
+                    resolve && resolve();
+                    safeCleanup();
+                });
+                x.oncancel = () => {
+                    safeCleanup();
+                };
+                return x;
             }
-            if (component.ondisposing) {
-                callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
+            else {
+                resolve && resolve();
+                const g = globalThis;
+                if (typeof g.Animation === 'function') {
+                    try {
+                        return new g.Animation();
+                    }
+                    catch { /* ignore */ }
+                }
+                return shimAnimation;
             }
-            component._base.emiters.fire('ondisposing', ev);
-        });
+        }
+    };
+    return t;
+}
+class ComponentOptionsImpl {
+    [OPTIONS_OWNER];
+    [TRANSITION_SLOT];
+    constructor(owner) {
+        this[OPTIONS_OWNER] = owner;
+    }
+    get transition() {
+        return this[TRANSITION_SLOT] ??= createTransitionApi(this[OPTIONS_OWNER]);
+    }
+    set transition(value) {
+        this[TRANSITION_SLOT] = value;
+    }
+    set enableRouterClassing(value) {
+        try {
+            const ins = this[OPTIONS_OWNER];
+            const callback = ins.context.onRouterChanged(() => {
+                ComponentHelper.routerClassing.call(ins, value);
+            });
+            ins.motif.register(disposableCore.toDisposable(() => {
+                callback();
+            }));
+            ComponentHelper.routerClassing.call(ins, value);
+        }
+        catch (error) {
+            reportError('MJX105', error);
+        }
+    }
+    getInstance() {
+        return this[OPTIONS_OWNER];
+    }
+    get display() {
+        return this[OPTIONS_OWNER].isVisible;
+    }
+    set display(value) {
+        if (value) {
+            this[OPTIONS_OWNER].motif.show();
+        }
+        else {
+            this[OPTIONS_OWNER].motif.hide();
+        }
+    }
+    hasEvent(name) {
+        return !!this[OPTIONS_OWNER]._eventHandlers?.has(name);
+    }
+}
+lazyBindMethods(ComponentOptionsImpl.prototype, ['getInstance', 'hasEvent']);
+function fireLifecycle(component, name, ev) {
+    const base = component._base;
+    if (base)
+        base.emiters.fire(name, ev);
+}
+function hasLifecycleHook(component, hook, listName, lowerName, legacyProp) {
+    if (component[hook])
+        return true;
+    const list = component._base[listName];
+    if (Array.isArray(list) && list.length > 0)
+        return true;
+    if (legacyProp && component[legacyProp])
+        return true;
+    return component._base.emiters.hasListeners(lowerName);
+}
+const ComponentHelper = {
+    callInitializeComponent(component) {
+        const sender = component;
+        const ev = { cancel: false };
+        if (!component || component.isDisposed) {
+            return;
+        }
+        // 1) class method initializeComponent
+        if (typeof component.initializeComponent === 'function') {
+            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');
+            }
+        }
+        // 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');
+            }
+        }
+    },
+    callDisposing(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (!hasLifecycleHook(component, 'onDisposing', '_onDisposingHandlers', 'ondisposing', 'ondisposing')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onDisposing) {
+            callReported(() => component.onDisposing(sender, ev), 'MJX122', 'onDisposing');
+        }
+        if (Array.isArray(component._base._onDisposingHandlers)) {
+            for (const fn of component._base._onDisposingHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onDisposing');
+            }
+        }
+        if (component.ondisposing) {
+            callReported(() => component.ondisposing(sender, ev), 'MJX122', 'ondisposing');
+        }
+        fireLifecycle(component, 'ondisposing', ev);
     },
     callActivated(component) {
         if (!component || component.isDisposed) {
@@ -3094,7 +4512,7 @@ const ComponentHelper = {
                 callReported(() => fn(sender, ev), 'MJX122', 'onActivated');
             }
         }
-        component._base.emiters.fire('onactivated', ev);
+        fireLifecycle(component, 'onactivated', ev);
     },
     callDeactivated(component) {
         if (!component || component.isDisposed) {
@@ -3109,7 +4527,7 @@ const ComponentHelper = {
                 callReported(() => fn(sender, ev), 'MJX122', 'onDeactivated');
             }
         }
-        component._base.emiters.fire('ondeactivated', ev);
+        fireLifecycle(component, 'ondeactivated', ev);
     },
     deactivateTree(component, deep = true) {
         if (!component || component.isDisposed || !component.isBuilt || !component._base || component._base._inactive) {
@@ -3117,7 +4535,7 @@ const ComponentHelper = {
         }
         component._base._inactive = true;
         ComponentHelper.callDeactivated(component);
-        if (!deep) {
+        if (!deep || component.isDisposed) {
             return;
         }
         for (const c of component.controls.items.slice()) {
@@ -3132,7 +4550,7 @@ const ComponentHelper = {
         }
         component._base._inactive = false;
         ComponentHelper.callActivated(component);
-        if (!deep) {
+        if (!deep || component.isDisposed) {
             return;
         }
         for (const c of component.controls.items.slice()) {
@@ -3141,34 +4559,36 @@ const ComponentHelper = {
             }
         }
     },
-    async callDisposed(component) {
+    callDisposed(component) {
         if (!component || !component._base || component._base._disposedFired) {
             return;
         }
         component._base._disposedFired = true;
-        const sender = component, ev = { cancel: false };
-        if (component.onDisposed) {
-            callReported(() => component.onDisposed(sender, ev), 'MJX122', 'onDisposed');
-        }
-        if (Array.isArray(component._base._onDisposedHandlers)) {
-            for (const fn of component._base._onDisposedHandlers) {
-                callReported(() => fn(sender, ev), 'MJX122', 'onDisposed');
+        if (hasLifecycleHook(component, 'onDisposed', '_onDisposedHandlers', 'ondisposed', 'ondisposed')) {
+            const sender = component, ev = { cancel: false };
+            if (component.onDisposed) {
+                callReported(() => component.onDisposed(sender, ev), 'MJX122', 'onDisposed');
             }
+            if (Array.isArray(component._base._onDisposedHandlers)) {
+                for (const fn of component._base._onDisposedHandlers) {
+                    callReported(() => fn(sender, ev), 'MJX122', 'onDisposed');
+                }
+            }
+            if (component.ondisposed) {
+                callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
+            }
+            fireLifecycle(component, 'ondisposed', ev);
         }
-        if (component.ondisposed) {
-            callReported(() => component.ondisposed(sender, ev), 'MJX122', 'ondisposed');
-        }
-        component._base.emiters.fire('ondisposed', ev);
         try {
             globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:disposed', { id: component.id, type: component.constructor?.name });
         }
         catch { }
     },
-    async callBuilt(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
+    callBuilt(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (hasLifecycleHook(component, 'onBuilt', '_onBuiltHandlers', 'onbuilt', 'onbuilt')) {
             const sender = component, ev = { cancel: false };
             if (component.onBuilt) {
                 callReported(() => component.onBuilt(sender, ev), 'MJX122', 'onBuilt');
@@ -3181,12 +4601,12 @@ const ComponentHelper = {
             if (component.onbuilt) {
                 callReported(() => component.onbuilt(sender, ev), 'MJX122', 'onbuilt');
             }
-            component._base.emiters.fire('onbuilt', ev);
-            try {
-                globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:mounted', { id: component.id, type: component.constructor?.name });
-            }
-            catch { }
-        });
+            fireLifecycle(component, 'onbuilt', ev);
+        }
+        try {
+            globalThis.__MOTIF_DEVTOOLS_BUS__?.publish?.('component:mounted', { id: component.id, type: component.constructor?.name });
+        }
+        catch { }
     },
     scheduleMounted(component) {
         if (!component || component.isDisposed || component._base._mountedScheduled) {
@@ -3230,47 +4650,49 @@ const ComponentHelper = {
         if (component.onmounted) {
             callReported(() => component.onmounted(sender, ev), 'MJX122', 'onmounted');
         }
-        component._base.emiters.fire('onmounted', ev);
+        fireLifecycle(component, 'onmounted', ev);
     },
-    async callBuilding(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
-            const sender = component, ev = { cancel: false };
-            if (component.onBuilding) {
-                callReported(() => component.onBuilding(sender, ev), 'MJX122', 'onBuilding');
-            }
-            if (Array.isArray(component._base._onBuildingHandlers)) {
-                for (const fn of component._base._onBuildingHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onBuilding');
-                }
+    callBuilding(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (!hasLifecycleHook(component, 'onBuilding', '_onBuildingHandlers', 'onbuilding')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onBuilding) {
+            callReported(() => component.onBuilding(sender, ev), 'MJX122', 'onBuilding');
+        }
+        if (Array.isArray(component._base._onBuildingHandlers)) {
+            for (const fn of component._base._onBuildingHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onBuilding');
             }
-            component._base.emiters.fire('onbuilding', ev);
-        });
+        }
+        fireLifecycle(component, 'onbuilding', ev);
     },
-    async callConfig(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed || component.isConfigured) {
-                return;
-            }
-            component.isConfigured = true;
-            if (component.motif.options._preconfig) {
-                safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
-            }
-            const sender = component, ev = { cancel: false };
-            if (component.onConfig) {
-                callReported(() => component.onConfig(sender, ev), 'MJX122', 'onConfig');
-            }
-            if (Array.isArray(component._base._onConfigHandlers)) {
-                for (const fn of component._base._onConfigHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onConfig');
-                }
+    callConfig(component) {
+        if (!component || component.isDisposed || component.isConfigured) {
+            return;
+        }
+        component.isConfigured = true;
+        if (component.motif.options._preconfig) {
+            safeCallSilent(() => component.motif.options._preconfig(component), 'Component._preconfig');
+        }
+        if (!hasLifecycleHook(component, 'onConfig', '_onConfigHandlers', 'onconfig')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onConfig) {
+            callReported(() => component.onConfig(sender, ev), 'MJX122', 'onConfig');
+        }
+        if (Array.isArray(component._base._onConfigHandlers)) {
+            for (const fn of component._base._onConfigHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onConfig');
             }
-            component._base.emiters.fire('onconfig', ev);
-        });
+        }
+        fireLifecycle(component, 'onconfig', ev);
     },
-    async callConfigured(component) {
+    callConfigured(component) {
         if (component.motif.options && component.motif.options._postconfigdone) {
             return;
         }
@@ -3278,73 +4700,77 @@ const ComponentHelper = {
             ComponentHelper.callConfig(component);
         }
         component.motif.options._postconfigdone = true;
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
-            const sender = component, ev = { cancel: false };
-            if (component.onConfigured) {
-                callReported(() => component.onConfigured(sender, ev), 'MJX122', 'onConfigured');
-            }
-            if (Array.isArray(component._base._onConfiguredHandlers)) {
-                for (const fn of component._base._onConfiguredHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onConfigured');
-                }
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (!hasLifecycleHook(component, 'onConfigured', '_onConfiguredHandlers', 'onconfigured')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onConfigured) {
+            callReported(() => component.onConfigured(sender, ev), 'MJX122', 'onConfigured');
+        }
+        if (Array.isArray(component._base._onConfiguredHandlers)) {
+            for (const fn of component._base._onConfiguredHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onConfigured');
             }
-            component._base.emiters.fire('onconfigured', ev);
-        });
+        }
+        fireLifecycle(component, 'onconfigured', ev);
     },
-    async callOnInitialized(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
-            component.isInitialized = true;
-            const sender = component, ev = { cancel: false };
-            if (component.onInitialized) {
-                callReported(() => component.onInitialized(sender, ev), 'MJX122', 'onInitialized');
-            }
-            if (Array.isArray(component._base._onInitializedHandlers)) {
-                for (const fn of component._base._onInitializedHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onInitialized');
-                }
+    callOnInitialized(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        component.isInitialized = true;
+        if (!hasLifecycleHook(component, 'onInitialized', '_onInitializedHandlers', 'oninitialized')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onInitialized) {
+            callReported(() => component.onInitialized(sender, ev), 'MJX122', 'onInitialized');
+        }
+        if (Array.isArray(component._base._onInitializedHandlers)) {
+            for (const fn of component._base._onInitializedHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onInitialized');
             }
-            component._base.emiters.fire('oninitialized', ev);
-        });
+        }
+        fireLifecycle(component, 'oninitialized', ev);
     },
-    async callOnInitializing(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
-            const sender = component, ev = { cancel: false };
-            if (component.onInitializing) {
-                callReported(() => component.onInitializing(sender, ev), 'MJX122', 'onInitializing');
-            }
-            if (Array.isArray(component._base._onInitializingHandlers)) {
-                for (const fn of component._base._onInitializingHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onInitializing');
-                }
+    callOnInitializing(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (!hasLifecycleHook(component, 'onInitializing', '_onInitializingHandlers', 'oninitializing')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onInitializing) {
+            callReported(() => component.onInitializing(sender, ev), 'MJX122', 'onInitializing');
+        }
+        if (Array.isArray(component._base._onInitializingHandlers)) {
+            for (const fn of component._base._onInitializingHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onInitializing');
             }
-            component._base.emiters.fire('oninitializing', ev);
-        });
+        }
+        fireLifecycle(component, 'oninitializing', ev);
     },
-    async callVisibilityChanged(component) {
-        ComponentHelper.backgroundCallback(() => {
-            if (!component || component.isDisposed) {
-                return;
-            }
-            const sender = component, ev = { cancel: false };
-            if (component.onVisibilityChanged) {
-                callReported(() => component.onVisibilityChanged(sender, ev), 'MJX122', 'onVisibilityChanged');
-            }
-            if (Array.isArray(component._base._onVisibilityChangedHandlers)) {
-                for (const fn of component._base._onVisibilityChangedHandlers) {
-                    callReported(() => fn(sender, ev), 'MJX122', 'onVisibilityChanged');
-                }
+    callVisibilityChanged(component) {
+        if (!component || component.isDisposed) {
+            return;
+        }
+        if (!hasLifecycleHook(component, 'onVisibilityChanged', '_onVisibilityChangedHandlers', 'onvisibilitychanged')) {
+            return;
+        }
+        const sender = component, ev = { cancel: false };
+        if (component.onVisibilityChanged) {
+            callReported(() => component.onVisibilityChanged(sender, ev), 'MJX122', 'onVisibilityChanged');
+        }
+        if (Array.isArray(component._base._onVisibilityChangedHandlers)) {
+            for (const fn of component._base._onVisibilityChangedHandlers) {
+                callReported(() => fn(sender, ev), 'MJX122', 'onVisibilityChanged');
             }
-            component._base.emiters.fire('onvisibilitychanged', ev);
-        });
+        }
+        fireLifecycle(component, 'onvisibilitychanged', ev);
     },
     findFragmentContent(c) {
         const controlElement = c.element.nodeType == Node.COMMENT_NODE
@@ -3370,6 +4796,8 @@ const ComponentHelper = {
             return;
         }
         ComponentHelper.callConfigured(c);
+        if (c.isDisposed)
+            return;
         c._base._activatePreBindings();
         if (c.isWait)
             return;
@@ -3397,8 +4825,11 @@ const ComponentHelper = {
                 return;
             }
         }
+        if (c.isDisposed || this.isDisposed)
+            return;
         c.parent = this;
-        const currentIndex = this.controls.items.indexOf(c);
+        const ownItems = this.controls.items;
+        const currentIndex = ownItems.length > 0 && ownItems[ownItems.length - 1] === c ? ownItems.length - 1 : ownItems.indexOf(c);
         const appendableElement = findAppendableComponent(this);
         var controlElement = c.element.nodeType == Node.COMMENT_NODE
             ? c.motif.options.cache
@@ -3449,6 +4880,18 @@ const ComponentHelper = {
                 return;
             }
         }
+        if (insertHost && enterModeOf(this) === 'out-in') {
+            const wait = pendingLeaves(insertHost, controlElement);
+            if (wait) {
+                c._base._enterSeq = (c._base._enterSeq ?? 0) + 1;
+                wait.then(() => {
+                    if (this.isDisposed || c.isDisposed || c.parent !== this)
+                        return;
+                    ComponentHelper.internalBuild.call(this, c);
+                });
+                return;
+            }
+        }
         const parentNode = appendableElement?.element;
         if (controlElement && parentNode && (controlElement === parentNode || controlElement.contains(parentNode))) {
             reportWarning('MJX104', []);
@@ -3530,712 +4973,627 @@ const ComponentHelper = {
         }
     }
 };
-const fragmentCloseMarkers = new WeakMap();
-const LIFECYCLE_X_EVENTS = new Set([
-    'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
-    'config', 'configured', 'visibilitychanged', 'activated', 'deactivated'
-]);
-const RAW_APPLICATION = Symbol('motif.rawApplication');
-const SCOPED_SUBSCRIBERS = new Set(['on', 'onRouterChanged']);
-/**
- * Uygulamanın bileşene bağlı görünümü. `on`/`onRouterChanged` aboneliklerini sahibin ömrüne
- * kaydeder; diğer tüm üyeler (alanlar, metotlar, atamalar) uygulamanın kendisine yönlenir.
- */
-function createScopedContext(app, owner) {
-    const cache = new Map();
-    return new Proxy(app, {
-        get(target, prop) {
-            if (prop === RAW_APPLICATION) {
-                return target;
+function removeComponentDom(c, node, alsoPlaceholder) {
+    const opts = c.motif?.options;
+    const parent = node.parentNode;
+    if (node.nodeType === Node.COMMENT_NODE) {
+        if (!parent)
+            return;
+        const close = opts?.closeFragment || null;
+        if (close) {
+            let current = node;
+            while (current) {
+                const after = current.nextSibling;
+                try {
+                    parent.removeChild(current);
+                }
+                catch { }
+                if (current === close)
+                    break;
+                current = after;
             }
-            const value = Reflect.get(target, prop, target);
-            if (typeof value !== 'function') {
-                return value;
+        }
+        else {
+            try {
+                parent.removeChild(node);
             }
-            const hit = cache.get(prop);
-            if (hit && hit.fn === value) {
-                return hit.bound;
-            }
-            const bound = SCOPED_SUBSCRIBERS.has(prop)
-                ? (...args) => owner._trackContextSubscription(value.apply(target, args))
-                : value.bind(target);
-            cache.set(prop, { fn: value, bound });
-            return bound;
-        },
-        set(target, prop, value) {
-            return Reflect.set(target, prop, value, target);
-        },
-    });
+            catch { }
+        }
+        if (!alsoPlaceholder)
+            return;
+    }
+    else if (parent) {
+        try {
+            parent.removeChild(node);
+        }
+        catch { }
+        if (!alsoPlaceholder)
+            return;
+    }
+    const placeholder = opts?.placeholder;
+    if (placeholder && placeholder.parentNode) {
+        try {
+            placeholder.parentNode.removeChild(placeholder);
+        }
+        catch { }
+    }
 }
-class ComponentBase extends Disposable {
-    motif = new ComponentMotif(this, {
-        transition: {
-            transitionInfo: () => {
-                return {
-                    in: getTransitionInfo(this.element, `${this.motif.options.transition.name}-enter ${this.motif.options.transition.name}-enter-start`),
-                    out: getTransitionInfo(this.element, `${this.motif.options.transition.name}-leave ${this.motif.options.transition.name}-leave-start`),
-                };
-            },
-            name: '',
-            classes: undefined,
-            activeCssCancel: null,
-            activeCssPhase: null,
-            cssProps: () => {
-                const t = this.motif.options.transition;
-                if (t.classes) {
-                    return { name: t.classes.name || t.name || '', ...t.classes };
-                }
-                if (t.name && t.name.length > 0) {
-                    return { name: t.name };
-                }
-                return null;
-            },
-            skipNextLeave: false,
-            _suppressEnter: false,
-            _markedDirection: false,
-            in: (op) => {
-                this.motif.options.transitionIn = op;
-            },
-            out: (op) => {
-                this.motif.options.transitionOut = op;
-            },
-            enterTransition: (resolve) => {
-                const t = this.motif.options.transition;
-                const appear = !this._base._enterPlayed;
-                this._base._enterPlayed = true;
-                this._base._enterSeq = (this._base._enterSeq ?? 0) + 1;
-                if (t._suppressEnter) {
-                    resolve && resolve();
-                    return shimAnimation;
-                }
-                const attempt = {};
-                this._base._enterRun = attempt;
-                const done = () => {
-                    if (this._base?._enterRun === attempt) {
-                        this._base._enterRun = null;
-                        clearNavDirection(this);
-                    }
-                    resolve && resolve();
-                };
-                if (this.motif.options.transitionIn) {
-                    return t.run(this.motif.options.transitionIn.keyframes, this.motif.options.transitionIn.options, done);
-                }
-                return t._runCss('enter', done, appear);
-            },
-            leaveTransition: (resolve) => {
-                if (this.motif.options.transitionOut) {
-                    return this.motif.options.transition.run(this.motif.options.transitionOut.keyframes, this.motif.options.transitionOut.options, resolve);
-                }
-                return this.motif.options.transition._runCss('leave', resolve);
-            },
-            _runCss: (phase, resolve, appear = false) => {
-                const t = this.motif.options.transition;
-                if (phase === 'enter' && t.activeCssPhase === 'leave') {
-                    resolve && resolve();
-                    return shimAnimation;
-                }
-                const cssProps = t.cssProps();
-                const el = this.element;
-                if (cssProps && el && el.nodeType === 1 && el.classList) {
-                    try {
-                        t.activeCssCancel?.();
-                    }
-                    catch { }
-                    const cancel = runCssTransition(el, cssProps, phase, () => {
-                        if (this.motif.options?.transition) {
-                            this.motif.options.transition.activeCssCancel = null;
-                            this.motif.options.transition.activeCssPhase = null;
-                        }
-                        resolve && resolve();
-                    }, appear);
-                    t.activeCssCancel = cancel;
-                    t.activeCssPhase = phase;
-                    return shimAnimation;
-                }
-                resolve && resolve();
-                return shimAnimation;
-            },
-            activeAnimations: [],
-            run: (keyframes, options, resolve) => {
-                this.motif.stopAnimations();
-                const element = this.element;
-                if (element.animate) {
-                    var x = element.animate(keyframes, options);
-                    this.motif.options.transition.activeAnimations.push(x);
-                    let cleanedUp = false;
-                    const safeCleanup = () => {
-                        if (cleanedUp)
-                            return;
-                        cleanedUp = true;
-                        try {
-                            if (this?.motif.options?.transition?.activeAnimations) {
-                                this.motif.options.transition.activeAnimations = this.motif.options.transition.activeAnimations.filter(a => a !== x);
-                            }
-                        }
-                        catch { }
-                    };
-                    x.addEventListener('finish', () => {
-                        resolve && resolve();
-                        safeCleanup();
-                    });
-                    x.oncancel = () => {
-                        safeCleanup();
-                    };
-                    return x;
-                }
-                else {
-                    resolve && resolve();
-                    const g = globalThis;
-                    if (typeof g.Animation === 'function') {
-                        try {
-                            return new g.Animation();
-                        }
-                        catch { /* ignore */ }
-                    }
-                    return shimAnimation;
-                }
-            }
-        },
-        set enableRouterClassing(value) {
-            try {
-                var ins = this.getInstance();
-                const callback = ins.context.onRouterChanged(() => {
-                    ComponentHelper.routerClassing.call(ins, value);
-                });
-                ins.motif.register(disposableCore.toDisposable(() => {
-                    callback();
-                }));
-                ComponentHelper.routerClassing.call(ins, value);
-            }
-            catch (error) {
-                reportError('MJX105', error);
-            }
-        },
-        getInstance: () => {
-            return this;
-        },
-        get display() {
-            return this.getInstance().isVisible;
-        },
-        set display(value) {
-            if (value) {
-                this.getInstance().motif.show();
-            }
-            else {
-                this.getInstance().motif.hide();
-            }
-        },
-        hasEvent: (name) => {
-            const ins = this._eventHandlers?.has(name);
-            if (ins)
-                return true;
-            return false;
+function detachDomWithAnimation(c) {
+    const node = c.element;
+    if (!node)
+        return;
+    const opts = c.motif.options;
+    const t = opts?.[TRANSITION_SLOT];
+    try {
+        const skip = t?.skipNextLeave === true || c._forceInstantDetach === true;
+        if (skip) {
+            if (t)
+                t.skipNextLeave = false;
+            c._forceInstantDetach = false;
+            removeComponentDom(c, node, true);
+            return;
         }
-    });
-    element;
-    props;
-    isBuilt = false;
-    isInitialized = false;
-    isDisposed = false;
-    isConfigured = false;
-    isPainting = false;
-    isPainted = false;
-    isVisible = true;
-    controls = new ControlCollection(this);
-    _eventHandlers;
-    _isWait = false;
-    class = new controlClass(this);
-    attr = new controlAttribute(this);
-    bindings = new BindingCollection(this);
-    /** style(fn) izleyicisi: tek tek tutulur, yeniden çağrıda önceki durdurulur. */
-    _styleFx;
-    useModel(modelCtor) {
-        return reactive(modelCtor);
     }
-    _computeHideStrategy() {
-        const cfg = this.motif.options?.hideStrategy ?? 'auto';
-        if (cfg === 'placeholder')
-            return 'placeholder';
-        if (cfg === 'detach')
-            return 'detach';
-        if (this.motif.options?.__fromList || typeof this.motif.options?.indexkey !== 'undefined' || typeof this.motif.options?.__key !== 'undefined') {
-            return 'detach';
+    catch { }
+    if (!t && !opts?.transitionOut) {
+        removeComponentDom(c, node, false);
+        return;
+    }
+    try {
+        opts.transition.leaveTransition(() => {
+            removeComponentDom(c, node, false);
+        });
+    }
+    catch {
+        removeComponentDom(c, node, false);
+    }
+}
+async function detachDomWithAnimationAsync(c) {
+    const node = c.element;
+    if (!node)
+        return;
+    const opts = c.motif.options;
+    const t = opts?.[TRANSITION_SLOT];
+    try {
+        const skip = t?.skipNextLeave === true || c._forceInstantDetach === true;
+        if (skip) {
+            if (t)
+                t.skipNextLeave = false;
+            c._forceInstantDetach = false;
+            removeComponentDom(c, node, true);
+            return;
         }
-        return 'placeholder';
     }
-    _isInDom() {
+    catch { }
+    if (!t && !opts?.transitionOut) {
+        removeComponentDom(c, node, false);
+        return;
+    }
+    return new Promise((resolve) => {
         try {
-            if (!this.element)
-                return false;
-            const node = this.element;
-            if (node.nodeType === Node.COMMENT_NODE) {
-                return !!node.parentNode;
-            }
-            return !!node.parentNode;
+            opts.transition.leaveTransition(() => {
+                removeComponentDom(c, node, false);
+                resolve();
+            });
         }
         catch {
-            return false;
+            removeComponentDom(c, node, false);
+            resolve();
         }
+    });
+}
+function disposeShallow(c) {
+    if (c.isDisposed)
+        return;
+    ComponentHelper.callDisposing.call(c, c);
+    try {
+        c._base._offAll();
     }
-    set isWait(value) {
-        this._isWait = value;
-        if (this.isBuilt) {
-            if (value) {
-                this.motif.hide();
+    catch {
+    }
+    c.motif.stopAnimations();
+    c._base._deactivateBindings();
+    if (c.controls?.items?.length) {
+        for (const child of c.controls.items) {
+            try {
+                child._base._disposeShallow();
             }
-            else {
-                this.motif.show();
+            catch {
             }
-            return;
-        }
-        if (value === false && this.parent && this.parent.isBuilt) {
-            ComponentHelper.internalBuild.call(this.parent, this);
         }
     }
-    get isWait() {
-        return this._isWait;
+    ComponentHelper.callDisposed.call(c, c);
+    safeCall(() => { c._base.emiters.clear(); }, 'disposeShallow.emiters');
+    c.isDisposed = true;
+    Disposable.prototype.dispose.call(c);
+}
+function deepCleanup(c) {
+    try {
+        c.parent = null;
     }
-    constructor(element, props = {}) {
-        super();
-        recordServiceOwner(this);
-        if (this.onElementCreating) {
-            this.element = this.onElementCreating.call(this);
+    catch { }
+    try {
+        c._eventHandlers?.clear();
+    }
+    catch {
+    }
+    c._eventHandlers = undefined;
+    try {
+        c.class?._countsStore?.clear();
+    }
+    catch { }
+    try {
+        c.class?._watchersStore?.clear();
+    }
+    catch { }
+    try {
+        c.attr?._attrMapStore?.clear();
+    }
+    catch { }
+    try {
+        c.attr?._watchersStore?.clear();
+    }
+    catch { }
+    try {
+        if (c.motif.options) {
+            c.motif.options.cache = undefined;
+            c.motif.options.closeFragment = undefined;
+            c.motif.options.placeholder = undefined;
         }
-        else if (props?.onElementCreating) {
-            this.element = props.onElementCreating.call(this);
+    }
+    catch {
+    }
+    try {
+        c.element = null;
+    }
+    catch { }
+    try {
+        c.props = undefined;
+    }
+    catch { }
+    try {
+        c.childs = undefined;
+    }
+    catch { }
+    try {
+        c.class = undefined;
+    }
+    catch { }
+    try {
+        c.attr = undefined;
+    }
+    catch { }
+    try {
+        c.parent = null;
+    }
+    catch { }
+    try {
+        c.motif.options = undefined;
+    }
+    catch { }
+    const keys = Object.keys(c);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (key === 'motif')
+            continue;
+        try {
+            c[key] = undefined;
         }
-        else {
-            this.element = element;
+        catch { }
+    }
+    c.isDisposed = true;
+}
+const DISPOSE_STARTED = Promise.resolve();
+function subtreeDisposesSync(c, root) {
+    if (!root && c._disposing && !c.isDisposed)
+        return false;
+    if (c.disposeAsync !== ComponentBase.prototype.disposeAsync)
+        return false;
+    const opts = c.motif?.options;
+    if (opts) {
+        if (opts.transitionOut)
+            return false;
+        const t = opts[TRANSITION_SLOT];
+        if (t) {
+            if (t.activeAnimations && t.activeAnimations.length > 0)
+                return false;
+            if (t.activeCssCancel)
+                return false;
+            if (t.classes || (t.name && t.name.length > 0))
+                return false;
         }
-        if (props) {
-            for (const fn of takePendingRefs(this, extractRefs(props, this))) {
-                callReported(() => fn(this), 'MJX122', 'ref');
-            }
+    }
+    const items = c.controls?.items;
+    if (items) {
+        for (let i = 0; i < items.length; i++) {
+            const child = items[i];
+            if (child && !child.isDisposed && !subtreeDisposesSync(child, false))
+                return false;
         }
-        props && ParseProps(props, this);
-        applyComponentOptions(props?.options, this);
-        this.props = props;
-        // (class/style/id/tabindex/role/aria-*/data-*) kök düğüme (root node) düşer, prop'lar this.props'ta kalır.
-        if (props) {
-            const ctor0 = new.target;
-            const plain = ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase;
-            if (plain)
-                applyPlainElementProps(props, this);
-            else
-                applyFallthroughProps(props, this);
+    }
+    return true;
+}
+function disposePrefix(c, options, asChild) {
+    const ctx = asChild ? 'disposeAsync' : 'dispose';
+    if (!asChild && options?.skipLeaveTransition) {
+        c.motif.options.transition.skipNextLeave = true;
+    }
+    safeCall(() => { ComponentHelper.callDisposing.call(c, c); }, ctx + '.callDisposing');
+    c._base._offAll();
+    c._base._deactivateBindings();
+    safeCall(() => { c.parent?.controls?.silentDetach?.(c, true); }, ctx + '.silentDetach');
+}
+function disposeFinish(c, options, asChild) {
+    c.isDisposed = true;
+    Disposable.prototype.dispose.call(c);
+    if (asChild) {
+        c.controls.items = [];
+        safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'disposeAsync.callDisposed');
+        safeCall(() => { c._base.emiters.clear(); }, 'disposeAsync.emiters');
+        if (options?.deep) {
+            c._base._deepCleanup();
         }
-        ComponentHelper.callOnInitializing(this);
-        this.controls.onAdd = (c) => {
-            this.motif.trigger('controladded', { control: c });
-            if (this.isWait || this.parent?.isWait)
-                return;
-            ComponentHelper.internalBuild.call(this, c);
-        };
-        this.controls.onAddBeforeBuild = (c) => {
-            this.motif.trigger('controladded', { control: c });
-        };
-        this.controls.onRemove = (c) => {
-            this.motif.trigger('controlremoved', { control: c });
-        };
-        ComponentHelper.callOnInitialized(this);
-        const ctor = new.target;
-        const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
-        if (isBaseCtor) {
-            ComponentHelper.callConfig(this);
+        return;
+    }
+    c.element = null;
+    safeCall(() => { ComponentHelper.callDisposed.call(c, c); }, 'dispose.callDisposed');
+    safeCall(() => { c._base.emiters.clear(); }, 'dispose.emiters');
+    c._base._offAll();
+    c._base._deepCleanup();
+}
+async function disposeRemainderAsync(c, options, asChild, leave) {
+    if (leave) {
+        await leave;
+    }
+    else {
+        if (asChild) {
+            await c.motif.stopAnimations();
         }
-        else {
-            this._base._configDeferred = true;
+        else if (peekTransition(c)?.skipNextLeave) {
+            await c.motif.stopAnimations();
         }
+        await c._base._detachDomWithAnimationAsync();
     }
-    childs;
-    _base = {
-        prebinding_Activated: false,
-        _offAll: () => {
-            if (!this._eventHandlers)
-                return;
-            for (const [full, set] of this._eventHandlers) {
-                const name = full.split(":")[0];
-                const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
-                for (const rec of set) {
-                    if (!rec || !rec.wrapped) {
-                        continue;
-                    }
-                    if (rec.domEvent === false) {
-                        continue;
-                    }
-                    const cap = rec.capture === true;
+    if (!asChild && c.constructor.name !== 'TransportTo') {
+        await disposeContentBlocks(c);
+    }
+    const childOptions = { deep: options?.deep };
+    await safeCallAsync(async () => {
+        if (c.isDisposed) {
+            return;
+        }
+        const ctrls = Array.from(c.controls.items);
+        if (ctrls.length) {
+            await Promise.all(ctrls.map(child => asChild
+                ? safeCallAsync(async () => { await child.disposeAsync(childOptions); }, 'disposeAsync.disposeAsyncChildren.handler')
+                : (async () => {
                     try {
-                        this.element.removeEventListener(evt, rec.wrapped, cap);
+                        await child.disposeAsync(childOptions);
                     }
-                    catch { }
-                    try {
-                        if (rec.capture === undefined) {
-                            this.element.removeEventListener(evt, rec.wrapped, !cap);
-                        }
+                    catch (error) {
+                        reportError('MJX107', error);
                     }
-                    catch { }
-                }
-            }
-            this._eventHandlers.clear();
-            this._eventHandlers = undefined;
-        },
-        _deactivateBindings: () => {
-            try {
-                this.bindings?.deactivateAll();
-            }
-            catch { }
-        },
-        _activateBindings: () => {
-            try {
-                this.bindings?.activateAll();
+                })()));
+        }
+    }, asChild ? 'disposeAsync.disposeAsyncChildren' : 'dispose.disposeAsync');
+    if (!asChild && c.isDisposed) {
+        return;
+    }
+    disposeFinish(c, options, asChild);
+}
+function disposeRemainderSync(root, options, asChild, rootDetached) {
+    const childOptions = { deep: options?.deep };
+    const nodes = [root];
+    const parents = [-1];
+    let pending = null;
+    if (!rootDetached)
+        detachDomWithAnimation(root);
+    for (let n = 0; n < nodes.length; n++) {
+        const node = nodes[n];
+        if (node.isDisposed)
+            continue;
+        const items = node.controls?.items;
+        if (!items || items.length === 0)
+            continue;
+        const ctrls = Array.from(items);
+        for (let j = 0; j < ctrls.length; j++) {
+            const child = ctrls[j];
+            if (child.isDisposed)
+                continue;
+            if (child._disposing) {
+                (pending ??= []).push(child._disposing);
+                continue;
             }
-            catch { }
-        },
-        _reactivateBindings: () => {
             try {
-                this.bindings?.reActivateAll();
+                retireServiceOwner(child);
+                child._disposing = root._disposing;
+                disposePrefix(child, childOptions, true);
+                detachDomWithAnimation(child);
+                nodes.push(child);
+                parents.push(n);
             }
-            catch { }
-        },
-        _activatePreBindings: () => {
-            if (this._base.prebinding_Activated)
-                return;
-            this.bindings.items.filter(x => x.propertyName == "isWait" || x.propertyName == "display").forEach(b => {
-                b.activate();
-            });
-            this._base.prebinding_Activated = true;
-        },
-        _detachDomWithAnimation: () => {
-            const node = this.element;
-            if (!node)
-                return;
-            try {
-                const skip = this.motif.options.transition.skipNextLeave === true || this?._forceInstantDetach === true;
-                if (skip) {
-                    if (this?.motif.options?.transition)
-                        this.motif.options.transition.skipNextLeave = false;
-                    this._forceInstantDetach = false;
-                    const immediate = () => {
-                        const parent = node.parentNode;
-                        if (node.nodeType === Node.COMMENT_NODE) {
-                            const open = node;
-                            const close = this.motif.options?.closeFragment || null;
-                            if (!parent)
-                                return;
-                            if (close) {
-                                let current = open;
-                                while (current) {
-                                    const after = current.nextSibling;
-                                    try {
-                                        parent.removeChild(current);
-                                    }
-                                    catch { }
-                                    if (current === close)
-                                        break;
-                                    current = after;
-                                }
-                            }
-                            else {
-                                try {
-                                    parent.removeChild(open);
-                                }
-                                catch { }
-                            }
-                        }
-                        else if (parent) {
-                            try {
-                                parent.removeChild(node);
-                            }
-                            catch { }
-                        }
-                        const placeholder = this.motif.options?.placeholder;
-                        if (placeholder && placeholder.parentNode) {
-                            try {
-                                placeholder.parentNode.removeChild(placeholder);
-                            }
-                            catch { }
-                        }
-                    };
-                    immediate();
-                    return;
-                }
+            catch (error) {
+                reportError('MJX107', error);
             }
-            catch { }
-            const removeNow = () => {
-                if (node.nodeType === Node.COMMENT_NODE) {
-                    const open = node;
-                    const close = this.motif.options?.closeFragment || null;
-                    const parent = open.parentNode;
-                    if (!parent)
-                        return;
-                    if (close) {
-                        let current = open;
-                        while (current) {
-                            const after = current.nextSibling;
-                            try {
-                                parent.removeChild(current);
-                            }
-                            catch { }
-                            if (current === close)
-                                break;
-                            current = after;
-                        }
-                    }
-                    else {
-                        try {
-                            parent.removeChild(open);
-                        }
-                        catch { }
-                    }
-                    return;
-                }
-                const parent = node.parentNode;
-                if (parent) {
-                    try {
-                        parent.removeChild(node);
-                    }
-                    catch { }
-                    return;
-                }
-                const placeholder = this.motif.options?.placeholder;
-                if (placeholder && placeholder.parentNode) {
-                    try {
-                        placeholder.parentNode.removeChild(placeholder);
-                    }
-                    catch { }
-                }
-            };
+        }
+    }
+    const count = nodes.length;
+    if (count > 1) {
+        const heights = new Array(count).fill(0);
+        for (let i = count - 1; i >= 1; i--) {
+            const p = parents[i];
+            if (heights[i] + 1 > heights[p])
+                heights[p] = heights[i] + 1;
+        }
+        const order = [];
+        for (let i = 1; i < count; i++)
+            order.push(i);
+        order.sort((a, b) => heights[a] - heights[b] || a - b);
+        for (let k = 0; k < order.length; k++) {
             try {
-                this.motif.options.transition.leaveTransition(() => {
-                    removeNow();
-                });
-            }
-            catch {
-                removeNow();
+                disposeFinish(nodes[order[k]], childOptions, true);
             }
-        },
-        _detachDomWithAnimationAsync: async () => {
-            const node = this.element;
-            if (!node)
-                return Promise.resolve();
-            try {
-                const skip = this.motif.options.transition.skipNextLeave === true || this?._forceInstantDetach === true;
-                if (skip) {
-                    if (this.motif.options.transition)
-                        this.motif.options.transition.skipNextLeave = false;
-                    this._forceInstantDetach = false;
-                    const immediateRemove = () => {
-                        if (node.nodeType === Node.COMMENT_NODE) {
-                            const open = node;
-                            const close = this.motif.options?.closeFragment || null;
-                            const parent = open.parentNode;
-                            if (!parent)
-                                return;
-                            if (close) {
-                                let current = open;
-                                while (current) {
-                                    const after = current.nextSibling;
-                                    try {
-                                        parent.removeChild(current);
-                                    }
-                                    catch { }
-                                    if (current === close)
-                                        break;
-                                    current = after;
-                                }
-                            }
-                            else {
-                                try {
-                                    parent.removeChild(open);
-                                }
-                                catch { }
-                            }
-                        }
-                        else {
-                            const parent = node.parentNode;
-                            if (parent) {
-                                try {
-                                    parent.removeChild(node);
-                                }
-                                catch { }
-                            }
-                        }
-                        const placeholder = this.motif.options?.placeholder;
-                        if (placeholder && placeholder.parentNode) {
-                            try {
-                                placeholder.parentNode.removeChild(placeholder);
-                            }
-                            catch { }
-                        }
-                    };
-                    immediateRemove();
-                    return Promise.resolve();
-                }
+            catch (error) {
+                reportError('MJX107', error);
             }
-            catch { }
-            const removeNow = () => {
-                if (node.nodeType === Node.COMMENT_NODE) {
-                    const open = node;
-                    const close = this.motif.options?.closeFragment || null;
-                    const parent = open.parentNode;
-                    if (!parent)
-                        return;
-                    if (close) {
-                        let current = open;
-                        while (current) {
-                            const after = current.nextSibling;
-                            try {
-                                parent.removeChild(current);
-                            }
-                            catch { }
-                            if (current === close)
-                                break;
-                            current = after;
-                        }
-                    }
-                    else {
-                        try {
-                            parent.removeChild(open);
-                        }
-                        catch { }
-                    }
-                    return;
-                }
-                const parent = node.parentNode;
-                if (parent) {
-                    try {
-                        parent.removeChild(node);
-                    }
-                    catch { }
-                    return;
+        }
+    }
+    if (pending)
+        return pending;
+    if (!asChild && root.isDisposed) {
+        return null;
+    }
+    disposeFinish(root, options, asChild);
+    return null;
+}
+const BASE_PROTO = {
+    _offAll() {
+        const c = this.owner;
+        if (!c._eventHandlers)
+            return;
+        for (const [full, set] of c._eventHandlers) {
+            const name = full.split(":")[0];
+            const evt = name.startsWith("on") ? name.slice(2).toLowerCase() : name.toLowerCase();
+            for (const rec of set) {
+                if (!rec || !rec.wrapped) {
+                    continue;
                 }
-                const placeholder = this.motif.options?.placeholder;
-                if (placeholder && placeholder.parentNode) {
-                    try {
-                        placeholder.parentNode.removeChild(placeholder);
-                    }
-                    catch { }
+                if (rec.domEvent === false) {
+                    continue;
                 }
-            };
-            return new Promise((resolve) => {
+                const cap = rec.capture === true;
                 try {
-                    this.motif.options.transition.leaveTransition(() => {
-                        removeNow();
-                        resolve();
-                    });
+                    c.element.removeEventListener(evt, rec.wrapped, cap);
                 }
-                catch {
-                    removeNow();
-                    resolve();
-                }
-            });
-        },
-        _disposeShallow: () => {
-            if (this.isDisposed)
-                return;
-            ComponentHelper.callDisposing.call(this, this);
-            try {
-                this._base._offAll();
-            }
-            catch {
-            }
-            this.motif.stopAnimations();
-            this._base._deactivateBindings();
-            if (this.controls?.items?.length) {
-                for (const c of this.controls.items) {
-                    try {
-                        c._base._disposeShallow();
-                    }
-                    catch {
+                catch { }
+                try {
+                    if (rec.capture === undefined) {
+                        c.element.removeEventListener(evt, rec.wrapped, !cap);
                     }
                 }
+                catch { }
             }
-            ComponentHelper.callDisposed.call(this, this);
-            safeCall(() => { this._base.emiters.clear(); }, 'disposeShallow.emiters');
-            this.isDisposed = true;
-            super.dispose();
-        },
-        _deepCleanup: () => {
-            try {
-                this.parent = null;
-            }
-            catch { }
-            try {
-                this._eventHandlers?.clear();
-            }
-            catch {
-            }
-            // for (const c of this.controls.items) {
-            //         try {
-            //         } catch {
-            this._eventHandlers = undefined;
-            try {
-                this.class?._counts?.clear();
-            }
-            catch { }
-            try {
-                this.class?._watchers?.clear();
-            }
-            catch { }
-            try {
-                this.attr?._attrMap?.clear();
-            }
-            catch { }
-            try {
-                this.attr?._watchers?.clear();
-            }
-            catch { }
-            try {
-                if (this.motif.options) {
-                    this.motif.options.cache = undefined;
-                    this.motif.options.closeFragment = undefined;
-                    this.motif.options.placeholder = undefined;
-                }
-            }
-            catch {
-            }
-            try {
-                this.element = null;
-            }
-            catch { }
-            try {
-                this.props = undefined;
+        }
+        c._eventHandlers.clear();
+        c._eventHandlers = undefined;
+    },
+    _deactivateBindings() {
+        const c = this.owner;
+        try {
+            c.bindings?.deactivateAll();
+        }
+        catch { }
+    },
+    _activateBindings() {
+        const c = this.owner;
+        try {
+            c.bindings?.activateAll();
+        }
+        catch { }
+    },
+    _reactivateBindings() {
+        const c = this.owner;
+        try {
+            c.bindings?.reActivateAll();
+        }
+        catch { }
+    },
+    _activatePreBindings() {
+        if (this.prebinding_Activated)
+            return;
+        const c = this.owner;
+        const registered = c.bindings?._items;
+        if (registered && registered.length > 0) {
+            c.bindings.items.filter((x) => x.propertyName == "isWait" || x.propertyName == "display").forEach((b) => {
+                b.activate();
+            });
+        }
+        this.prebinding_Activated = true;
+    },
+    _detachDomWithAnimation() {
+        detachDomWithAnimation(this.owner);
+    },
+    _detachDomWithAnimationAsync() {
+        return detachDomWithAnimationAsync(this.owner);
+    },
+    _disposeShallow() {
+        disposeShallow(this.owner);
+    },
+    _deepCleanup() {
+        deepCleanup(this.owner);
+    },
+};
+function createBaseCtx(owner) {
+    const base = Object.create(BASE_PROTO);
+    base.owner = owner;
+    base.prebinding_Activated = false;
+    base.emiters = new ComponentEmiter(owner);
+    return base;
+}
+const fragmentCloseMarkers = new WeakMap();
+const LIFECYCLE_X_EVENTS = new Set([
+    'building', 'built', 'initializing', 'initialized', 'disposing', 'disposed',
+    'config', 'configured', 'visibilitychanged', 'activated', 'deactivated'
+]);
+const RAW_APPLICATION = Symbol('motif.rawApplication');
+const SCOPED_SUBSCRIBERS = new Set(['on', 'onRouterChanged']);
+/**
+ * Uygulamanın bileşene bağlı görünümü. `on`/`onRouterChanged` aboneliklerini sahibin ömrüne
+ * kaydeder; diğer tüm üyeler (alanlar, metotlar, atamalar) uygulamanın kendisine yönlenir.
+ */
+function createScopedContext(app, owner) {
+    const cache = new Map();
+    return new Proxy(app, {
+        get(target, prop) {
+            if (prop === RAW_APPLICATION) {
+                return target;
             }
-            catch { }
-            try {
-                this.childs = undefined;
+            const value = Reflect.get(target, prop, target);
+            if (typeof value !== 'function') {
+                return value;
             }
-            catch { }
-            try {
-                this.class = undefined;
+            const hit = cache.get(prop);
+            if (hit && hit.fn === value) {
+                return hit.bound;
             }
-            catch { }
-            try {
-                this.attr = undefined;
+            const bound = SCOPED_SUBSCRIBERS.has(prop)
+                ? (...args) => owner._trackContextSubscription(value.apply(target, args))
+                : value.bind(target);
+            cache.set(prop, { fn: value, bound });
+            return bound;
+        },
+        set(target, prop, value) {
+            return Reflect.set(target, prop, value, target);
+        },
+    });
+}
+class ComponentBase extends Disposable {
+    motif = new ComponentMotif(this, new ComponentOptionsImpl(this));
+    element;
+    props;
+    isBuilt = false;
+    isInitialized = false;
+    isDisposed = false;
+    isConfigured = false;
+    isPainting = false;
+    isPainted = false;
+    isVisible = true;
+    controls = new ControlCollection(this);
+    _eventHandlers;
+    _isWait = false;
+    class = new controlClass(this);
+    attr = new controlAttribute(this);
+    bindings = new BindingCollection(this);
+    /** style(fn) izleyicisi: tek tek tutulur, yeniden çağrıda önceki durdurulur. */
+    _styleFx;
+    useModel(modelCtor) {
+        return reactive(modelCtor);
+    }
+    _computeHideStrategy() {
+        const cfg = this.motif.options?.hideStrategy ?? 'auto';
+        if (cfg === 'placeholder')
+            return 'placeholder';
+        if (cfg === 'detach')
+            return 'detach';
+        if (this.motif.options?.__fromList || typeof this.motif.options?.indexkey !== 'undefined' || typeof this.motif.options?.__key !== 'undefined') {
+            return 'detach';
+        }
+        return 'placeholder';
+    }
+    _isInDom() {
+        try {
+            if (!this.element)
+                return false;
+            const node = this.element;
+            if (node.nodeType === Node.COMMENT_NODE) {
+                return !!node.parentNode;
             }
-            catch { }
-            try {
-                this.parent = null;
+            return !!node.parentNode;
+        }
+        catch {
+            return false;
+        }
+    }
+    set isWait(value) {
+        this._isWait = value;
+        if (this.isBuilt) {
+            if (value) {
+                this.motif.hide();
             }
-            catch { }
-            try {
-                this.motif.options = undefined;
+            else {
+                this.motif.show();
             }
-            catch { }
-            Object.entries(this).forEach(([key, value]) => {
-                if (key === 'motif')
-                    return;
-                try {
-                    this[key] = null;
-                    delete this[key];
-                }
-                catch {
+            return;
+        }
+        if (value === false && this.parent && this.parent.isBuilt) {
+            ComponentHelper.internalBuild.call(this.parent, this);
+        }
+    }
+    get isWait() {
+        return this._isWait;
+    }
+    constructor(element, props = {}) {
+        super();
+        recordServiceOwner(this);
+        if (this.onElementCreating) {
+            this.element = this.onElementCreating.call(this);
+        }
+        else if (props?.onElementCreating) {
+            this.element = props.onElementCreating.call(this);
+        }
+        else {
+            this.element = element;
+        }
+        if (props) {
+            const refs = extractRefs(props, this);
+            if (refs.length > 0) {
+                for (const fn of takePendingRefs(this, refs)) {
+                    callReported(() => fn(this), 'MJX122', 'ref');
                 }
-            });
-            this.isDisposed = true;
-        },
-        emiters: new ComponentEmiter(this)
-    };
+            }
+        }
+        props && ParseProps(props, this);
+        applyComponentOptions(props?.options, this);
+        this.props = props;
+        // (class/style/id/tabindex/role/aria-*/data-*) kök düğüme (root node) düşer, prop'lar this.props'ta kalır.
+        if (props) {
+            const ctor0 = new.target;
+            const plain = ctor0 === ComponentBase || Object.getPrototypeOf(ctor0) === ComponentBase;
+            if (plain)
+                applyPlainElementProps(props, this);
+            else
+                applyFallthroughProps(props, this);
+        }
+        ComponentHelper.callOnInitializing(this);
+        if (this.isDisposed)
+            return;
+        this.controls.onAdd = (c) => {
+            if (this._eventHandlers?.has('controladded'))
+                this.motif.trigger('controladded', { control: c });
+            if (this.isWait || this.parent?.isWait)
+                return;
+            ComponentHelper.internalBuild.call(this, c);
+        };
+        this.controls.onAddBeforeBuild = (c) => {
+            if (this._eventHandlers?.has('controladded'))
+                this.motif.trigger('controladded', { control: c });
+        };
+        this.controls.onRemove = (c) => {
+            if (this._eventHandlers?.has('controlremoved'))
+                this.motif.trigger('controlremoved', { control: c });
+        };
+        ComponentHelper.callOnInitialized(this);
+        const ctor = new.target;
+        const isBaseCtor = ctor === ComponentBase || Object.getPrototypeOf(ctor) === ComponentBase;
+        if (isBaseCtor) {
+            ComponentHelper.callConfig(this);
+        }
+        else {
+            this._base._configDeferred = true;
+        }
+    }
+    childs;
+    _base = createBaseCtx(this);
     parent = null;
     _scopedContext;
     get context() {
@@ -4271,6 +5629,9 @@ class ComponentBase extends Disposable {
             return;
         }
         ComponentHelper.callBuilding(this);
+        if (this.isDisposed) {
+            return;
+        }
         var ph = this.element;
         if (building) {
             ph = dom.createDocumentFragment();
@@ -4285,9 +5646,15 @@ class ComponentBase extends Disposable {
             return;
         }
         ComponentHelper.callInitializeComponent(this);
+        if (this.isDisposed) {
+            return;
+        }
         if (this.view) {
             const templ = this.view();
             this.controls.add(templ);
+            if (this.isDisposed) {
+                return;
+            }
         }
         const deferredSelectValue = this.element?.nodeName === 'SELECT'
             ? this.bindings.items.filter(b => b.propertyName === 'value')
@@ -4328,6 +5695,9 @@ class ComponentBase extends Disposable {
                 ComponentHelper.activateTree(element);
             }
         }
+        if (this.isDisposed) {
+            return;
+        }
         if (wantsEnterTransition(this)) {
             const node = this.element;
             if (node && node.isConnected) {
@@ -4511,7 +5881,20 @@ class ComponentBase extends Disposable {
         if (this.isVisible) {
             return;
         } /* A*/
-        if (this.motif.options?.transition?.activeAnimations?.length) {
+        if (this.parent && enterModeOf(this.parent) === 'out-in') {
+            const showHost = (this.motif.options.placeholder?.parentNode)
+                ?? findAppendableComponent(this.parent)?.element;
+            const wait = pendingLeaves(showHost, this.element);
+            if (wait) {
+                const seq = this._base._showSeq = (this._base._showSeq ?? 0) + 1;
+                return wait.then(() => {
+                    if (this.isDisposed || this._base._showSeq !== seq)
+                        return;
+                    return this._show();
+                });
+            }
+        }
+        if (peekTransition(this)?.activeAnimations?.length) {
             safeCall(async () => {
                 await Promise.all(this.motif.options.transition.activeAnimations.map(a => a.finished?.catch(() => { })));
             }, 'show.waitForLeaveAnimations');
@@ -4520,6 +5903,9 @@ class ComponentBase extends Disposable {
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
             ComponentHelper.callVisibilityChanged(this);
+            if (this.isDisposed) {
+                return;
+            }
             const needAttach = !this._isInDom() && this.parent && this.parent.isBuilt && !this.isWait;
             this.isVisible = true;
             if (needAttach) {
@@ -4542,6 +5928,9 @@ class ComponentBase extends Disposable {
             /** A*/
             wantsEnterTransition(this) && this.motif.options.transition.enterTransition(() => { });
             ComponentHelper.callVisibilityChanged(this);
+            if (this.isDisposed) {
+                return;
+            }
             if (this.element.nodeType === Node.COMMENT_NODE) {
                 this.controls.forEach(c => {
                     c.motif.show();
@@ -4562,12 +5951,16 @@ class ComponentBase extends Disposable {
         if (this.isDisposed || !this.element) {
             return;
         }
+        this._base._showSeq = (this._base._showSeq ?? 0) + 1;
         if (!this.isVisible) {
             return;
         }
         const strategy = this._computeHideStrategy();
         if (strategy === 'detach') {
             ComponentHelper.callVisibilityChanged(this);
+            if (this.isDisposed) {
+                return;
+            }
             await this._base._detachDomWithAnimationAsync();
             this.isVisible = false;
             ComponentHelper.deactivateTree(this);
@@ -4580,6 +5973,9 @@ class ComponentBase extends Disposable {
                 transition.skipNextLeave = false;
             const finish = () => {
                 ComponentHelper.callVisibilityChanged(this);
+                if (this.isDisposed) {
+                    return;
+                }
                 if (this.element.nodeType === Node.COMMENT_NODE) {
                     this.controls.forEach(c => {
                         if (skip && c.isVisible && c.element && !c.isDisposed && c.motif.options?.transition) {
@@ -4789,109 +6185,43 @@ class ComponentBase extends Disposable {
         if (this.isDisposed) {
             return Promise.resolve();
         }
-        if (!this._disposing) {
-            retireServiceOwner(this);
-        }
-        return this._disposing ??= this._disposeCore(options);
-    }
-    async _disposeCore(options) {
-        if (options?.skipLeaveTransition) {
-            this.motif.options.transition.skipNextLeave = true;
-        }
-        safeCall(() => {
-            ComponentHelper.callDisposing.call(this, this);
-        }, 'dispose.callDisposing');
-        // DOM dinleyicileri hemen sökülür, aşağıda isDisposed true olunca off() boşa döner,
-        // element null'lanınca da _offAll dom'dan sökülemez — DOM'dan çıkmış öğeye sonradan gelen 
-        this._base._offAll();
-        this._base._deactivateBindings();
-        safeCall(() => {
-            this.parent?.controls?.silentDetach?.(this, true);
-        }, 'dispose.silentDetach');
-        this.motif.options.transition.skipNextLeave && await this.motif.stopAnimations();
-        await this._base._detachDomWithAnimationAsync();
-        if (this.constructor.name !== 'TransportTo') {
-            await disposeContentBlocks(this);
-        }
-        await safeCallAsync(async () => {
-            if (this.isDisposed) {
-                return;
-            }
-            const ctrls = Array.from(this.controls.items);
-            if (ctrls.length) {
-                await Promise.all(ctrls.map(async (c) => {
-                    try {
-                        await c.disposeAsync({ deep: options?.deep });
-                    }
-                    catch (error) {
-                        reportError('MJX107', error);
-                    }
-                }));
+        if (this._disposing) {
+            return this._disposing;
+        }
+        retireServiceOwner(this);
+        this._disposing = DISPOSE_STARTED;
+        return this._disposing = this._disposeCore(options, false);
+    }
+    async _disposeCore(options, asChild) {
+        disposePrefix(this, options, asChild);
+        let leave;
+        if (!asChild && !peekTransition(this)?.skipNextLeave) {
+            leave = this._base._detachDomWithAnimationAsync();
+        }
+        await undefined;
+        if (contentBlocks.live === 0 && subtreeDisposesSync(this, true)) {
+            const pending = disposeRemainderSync(this, options, asChild, leave !== undefined);
+            if (pending) {
+                await Promise.all(pending);
+                if (!asChild && this.isDisposed) {
+                    return;
+                }
+                disposeFinish(this, options, asChild);
             }
-        }, 'dispose.disposeAsync');
-        if (this.isDisposed) {
             return;
         }
-        this.isDisposed = true;
-        super.dispose();
-        this.element = null;
-        //if (options?.deep) {
-        safeCall(() => {
-            ComponentHelper.callDisposed.call(this, this);
-        }, 'dispose.callDisposed');
-        safeCall(() => { this._base.emiters.clear(); }, 'dispose.emiters');
-        this._base._offAll();
-        this._base._deepCleanup();
-        // var k = Object.keys(this);
-        // for (var i = 0; i < k.length; i++) {
-        //         try {
-        //         } catch {
+        await disposeRemainderAsync(this, options, asChild, leave);
     }
     disposeAsync(options = { deep: true }) {
         if (this.isDisposed) {
             return Promise.resolve();
         }
-        if (!this._disposing) {
-            retireServiceOwner(this);
-        }
-        return this._disposing ??= this._disposeAsyncCore(options);
-    }
-    async _disposeAsyncCore(options) {
-        safeCall(() => {
-            ComponentHelper.callDisposing.call(this, this);
-        }, 'disposeAsync.callDisposing');
-        this._base._offAll();
-        this._base._deactivateBindings();
-        safeCall(() => {
-            this.parent?.controls?.silentDetach?.(this, true);
-        }, 'disposeAsync.silentDetach');
-        await this.motif.stopAnimations();
-        await this._base._detachDomWithAnimationAsync();
-        await safeCallAsync(async () => {
-            if (this.isDisposed) {
-                return;
-            }
-            const ctrls = Array.from(this.controls.items);
-            if (ctrls.length) {
-                await Promise.all(ctrls.map(c => safeCallAsync(async () => {
-                    await c.disposeAsync({ deep: options?.deep });
-                }, 'disposeAsync.disposeAsyncChildren.handler')));
-            }
-        }, 'disposeAsync.disposeAsyncChildren');
-        this.isDisposed = true;
-        super.dispose();
-        this.controls.items = [];
-        safeCall(() => {
-            ComponentHelper.callDisposed.call(this, this);
-        }, 'disposeAsync.callDisposed');
-        safeCall(() => { this._base.emiters.clear(); }, 'disposeAsync.emiters');
-        if (options?.deep) {
-            this._base._deepCleanup();
+        if (this._disposing) {
+            return this._disposing;
         }
-        // var k = Object.keys(this);
-        // for (var i = 0; i < k.length; i++) {
-        //         try {
-        //         } catch { }
+        retireServiceOwner(this);
+        this._disposing = DISPOSE_STARTED;
+        return this._disposing = this._disposeCore(options, true);
     }
     async _clear() {
         if (this.isDisposed == true) {
@@ -4921,33 +6251,50 @@ class ComponentBase extends Disposable {
             }
         });
     }
-    siblings = {
-        all: () => { return this.parent?.controls.items; },
-        next: () => {
-            if (!this.parent)
-                return undefined;
-            const idx = this.parent.controls.items.indexOf(this);
-            return this.parent.controls.items[idx + 1];
-        },
-        prev: () => {
-            if (!this.parent)
-                return undefined;
-            const idx = this.parent.controls.items.indexOf(this);
-            return this.parent.controls.items[idx - 1];
-        },
-        nextAll: () => {
-            if (!this.parent)
-                return undefined;
-            const idx = this.parent.controls.items.indexOf(this);
-            return this.parent.controls.items.slice(idx + 1);
-        },
-        prevAll: () => {
-            if (!this.parent)
-                return undefined;
-            const idx = this.parent.controls.items.indexOf(this);
-            return this.parent.controls.items.slice(0, idx);
+    _siblingsApi;
+    _siblingsSet;
+    get siblings() {
+        if (this._siblingsSet) {
+            return this._siblingsApi;
         }
-    };
+        if (this.isDisposed && !this.motif?.options) {
+            return this._siblingsApi;
+        }
+        return this._siblingsApi ??= this._createSiblingsApi();
+    }
+    set siblings(value) {
+        this._siblingsApi = value;
+        this._siblingsSet = true;
+    }
+    _createSiblingsApi() {
+        return {
+            all: () => { return this.parent?.controls.items; },
+            next: () => {
+                if (!this.parent)
+                    return undefined;
+                const idx = this.parent.controls.items.indexOf(this);
+                return this.parent.controls.items[idx + 1];
+            },
+            prev: () => {
+                if (!this.parent)
+                    return undefined;
+                const idx = this.parent.controls.items.indexOf(this);
+                return this.parent.controls.items[idx - 1];
+            },
+            nextAll: () => {
+                if (!this.parent)
+                    return undefined;
+                const idx = this.parent.controls.items.indexOf(this);
+                return this.parent.controls.items.slice(idx + 1);
+            },
+            prevAll: () => {
+                if (!this.parent)
+                    return undefined;
+                const idx = this.parent.controls.items.indexOf(this);
+                return this.parent.controls.items.slice(0, idx);
+            }
+        };
+    }
     get serviceProvider() {
         let c = this;
         while (c) {
@@ -5029,14 +6376,15 @@ class ComponentBase extends Disposable {
         return result;
     }
     async _stopAnimations() {
+        const t = peekTransition(this);
         try {
-            this.motif.options?.transition?.activeCssCancel?.();
+            t?.activeCssCancel?.();
         }
         catch { }
         try {
-            if (this.motif.options?.transition?.activeAnimations?.length) {
+            if (t?.activeAnimations?.length) {
                 try {
-                    await Promise.all(this.motif.options.transition.activeAnimations.map(a => a.finished?.catch(() => { })));
+                    await Promise.all(t.activeAnimations.map(a => a.finished?.catch(() => { })));
                 }
                 catch { /* ignore */ }
             }
@@ -5045,7 +6393,8 @@ class ComponentBase extends Disposable {
         }
         if (this.isDisposed)
             return;
-        this.motif.options.transition.activeAnimations = [];
+        if (t)
+            t.activeAnimations = [];
     }
 }
 function findContentBlocks(root, results = []) {
@@ -5060,8 +6409,10 @@ function findContentBlocks(root, results = []) {
     return results;
 }
 async function disposeContentBlocks(root) {
-    const contentBlocks = findContentBlocks(root);
-    return await Promise.all(contentBlocks.map(async (block) => {
+    if (contentBlocks.live === 0)
+        return;
+    const contentBlocks$1 = findContentBlocks(root);
+    return await Promise.all(contentBlocks$1.map(async (block) => {
         block.motif.options.transition.skipNextLeave = root.motif.options.transition.skipNextLeave;
         for (const element of block.controls.items) {
             element.motif.options.transition.skipNextLeave = block.motif.options.transition.skipNextLeave;
@@ -5116,7 +6467,7 @@ function extractRefs(props, component) {
             runover.ref = component;
         }
     }
-    return [].concat(...refs);
+    return refs.length === 0 ? refs : [].concat(...refs);
 }
 const LIFECYCLE_HANDLER_LISTS = {
     'initializecomponent': '_initializeComponentHandlers',
@@ -5159,6 +6510,8 @@ function ParseProps(props, component) {
             Object.assign(component.motif.options.props, props);
         }
         var keys = Object.keys(props);
+        if (keys.length === 0)
+            return;
         keys.forEach(key => {
             if (key == 'initializeComponent' || key == 'oninitializeComponent' || key.startsWith('on')) {
                 if (collectLifecycleHandlers(component, key.toLowerCase(), props[key])) {
@@ -5229,7 +6582,18 @@ function setTransition(component, value, live) {
         if (typeof value.name === 'string' && value.name.length > 0) {
             transition.name = value.name;
         }
-        transition.classes = value;
+        if (!('mode' in value)) {
+            transition.classes = value;
+        }
+        else {
+            const { mode, ...classes } = value;
+            if (isTransitionMode(mode)) {
+                transition.mode = mode;
+            }
+            if (Object.keys(classes).length > 0) {
+                transition.classes = classes;
+            }
+        }
     }
     else if (live) {
         transition.name = '';
@@ -5281,17 +6645,45 @@ const PLAIN_ELEMENT_SKIP = new Set([
     'ref', 'key', 'indexkey', 'inject', 'options', 'props', 'settings', 'isSvg',
     'childs', 'initializeComponent', 'runover', 'transition', 'preconfig', 'nodes', 'onElementCreating'
 ]);
+const SPREAD_URL_ATTRIBUTES = new Set(['href', 'src', 'action', 'formaction', 'xlink:href']);
+const JAVASCRIPT_URL = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;
+function isJavascriptUrl(value) {
+    if (value === undefined || value === null || typeof value === 'boolean')
+        return false;
+    try {
+        return JAVASCRIPT_URL.test(String(value));
+    }
+    catch {
+        return false;
+    }
+}
+function guardSpreadUrl(key, read) {
+    return () => {
+        let value = read();
+        if (typeof value === 'function')
+            value = value();
+        if (typeof value === 'function')
+            value = value();
+        if (!isJavascriptUrl(value))
+            return value;
+        reportWarning('MJX125', [key]);
+        return null;
+    };
+}
 function applyPlainElementProps(props, component) {
     if (!props || typeof props !== 'object' || component.isDisposed)
         return;
-    const attrs = {};
-    const applied = appliedDomProps(component);
-    for (const key of Object.keys(props)) {
+    const keys = Object.keys(props);
+    if (keys.length === 0)
+        return;
+    let attrs = null;
+    let applied = null;
+    for (const key of keys) {
         if (PLAIN_ELEMENT_SKIP.has(key))
             continue;
         if (key.startsWith('x-') || key.startsWith('x:') || key.startsWith('__'))
             continue;
-        const v = props[key];
+        let v = props[key];
         if (v === undefined)
             continue;
         if (/^on/i.test(key)) {
@@ -5301,7 +6693,20 @@ function applyPlainElementProps(props, component) {
         }
         if (typeof v === 'function' && v.length > 0)
             continue;
-        applied.set(key, v);
+        if (key === 'innerHTML') {
+            reportWarning('MJX124', []);
+            continue;
+        }
+        if (SPREAD_URL_ATTRIBUTES.has(key.toLowerCase())) {
+            if (typeof v === 'function') {
+                v = guardSpreadUrl(key, v);
+            }
+            else if (isJavascriptUrl(v)) {
+                reportWarning('MJX125', [key]);
+                continue;
+            }
+        }
+        (applied ??= appliedDomProps(component)).set(key, v);
         if (key === 'class' || key === 'className') {
             component.class.add(v && typeof v === 'object' && !Array.isArray(v) ? [v] : v);
         }
@@ -5312,10 +6717,10 @@ function applyPlainElementProps(props, component) {
             component.bindings.add(key, v);
         }
         else {
-            attrs[key] = v;
+            (attrs ??= {})[key] = v;
         }
     }
-    if (Object.keys(attrs).length > 0)
+    if (attrs)
         component.attr.add(attrs);
 }
 const _appliedDomProps = new WeakMap();
@@ -5335,8 +6740,8 @@ function isFallthroughKey(key) {
 function applyFallthroughProps(props, component) {
     if (!props || typeof props !== 'object' || component.isDisposed)
         return;
-    const applied = appliedDomProps(component);
-    const subset = {};
+    const applied = _appliedDomProps.get(component);
+    let subset = null;
     for (const key of Object.keys(props)) {
         if (!isFallthroughKey(key))
             continue;
@@ -5345,11 +6750,11 @@ function applyFallthroughProps(props, component) {
             continue;
         if (typeof v === 'function' && v.length > 0)
             continue;
-        if (applied.has(key) && Object.is(applied.get(key), v))
+        if (applied && applied.has(key) && Object.is(applied.get(key), v))
             continue;
-        subset[key] = v;
+        (subset ??= {})[key] = v;
     }
-    if (Object.keys(subset).length > 0)
+    if (subset)
         applyPlainElementProps(subset, component);
 }
 const componentMethods = {
@@ -5718,8 +7123,156 @@ class FragmentNode extends Component {
     }
 }
 
+const glblths = globalThis;
+function getCurrentDom() {
+    if (glblths && glblths.motifDom) {
+        return glblths.motifDom.window.document;
+    }
+    return glblths.document;
+}
+const dom = {
+    get window() {
+        if (glblths && glblths.window) {
+            return glblths.window;
+        }
+        else if (glblths && glblths) {
+            return glblths.motifDom.window;
+        }
+        else {
+            return glblths;
+        }
+    },
+    _created: new Map(),
+    document: getCurrentDom(),
+    createElement(tagName, options) {
+        const doc = getCurrentDom();
+        if (!doc) {
+            throw motifError('MJX101', tagName);
+        }
+        if (tagName === "text") {
+            return doc.createTextNode('');
+        }
+        if (!this._created.has(tagName)) {
+            const view = doc.createElement(tagName, options);
+            this._created.set(tagName, view);
+        }
+        const tpl = this._created.get(tagName);
+        return tpl.cloneNode(false);
+    },
+    createDocumentFragment() {
+        try {
+            var cd = getCurrentDom();
+            if (cd) {
+                return cd.createDocumentFragment();
+            }
+        }
+        catch (error) {
+            errorHandler.reportSuppressed('dom.createDocumentFragment', error);
+        }
+    },
+    createComment(content) {
+        try {
+            return getCurrentDom()?.createComment(content);
+        }
+        catch (error) {
+            errorHandler.reportSuppressed('dom.createComment', error);
+        }
+    },
+    createTextNode(content) {
+        try {
+            return getCurrentDom()?.createTextNode(content);
+        }
+        catch (error) {
+            errorHandler.reportSuppressed('dom.createTextNode', error);
+        }
+    },
+    querySelectorAll(selectors) {
+        try {
+            return getCurrentDom()?.querySelectorAll(selectors);
+        }
+        catch (error) {
+            errorHandler.reportSuppressed('dom.querySelectorAll', error);
+        }
+    },
+    createElementNS(namepsaceUri, tagName, options) {
+        try {
+            return getCurrentDom()?.createElementNS(namepsaceUri, tagName, options);
+        }
+        catch (error) {
+            reportError('MJX103', error, tagName);
+        }
+    },
+    convertToSvgElement(element) {
+        const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+        const tagName = element.tagName.toLowerCase();
+        const newSvgElement = document.createElementNS(SVG_NAMESPACE, tagName);
+        for (const attr of element.attributes) {
+            newSvgElement.setAttribute(attr.name, attr.value);
+        }
+        while (element.firstChild) {
+            newSvgElement.appendChild(element.firstChild);
+        }
+        const parent = element.parentNode;
+        if (parent) {
+            parent.replaceChild(newSvgElement, element);
+        }
+        return newSvgElement;
+    },
+    get body() {
+        return getCurrentDom()?.body;
+    }
+};
+const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((\.([\w\-]+))*)/;
+var Namespace;
+(function (Namespace) {
+    Namespace["HTML"] = "http://www.w3.org/1999/xhtml";
+    Namespace["SVG"] = "http://www.w3.org/2000/svg";
+})(Namespace || (Namespace = {}));
+function _$(namespace, description, attrs, ...children) {
+    const match = SELECTOR_REGEX.exec(description);
+    if (!match) {
+        throw motifError('MJX102', description);
+    }
+    const tagName = match[1] || 'div';
+    let result;
+    if (namespace !== Namespace.HTML) {
+        result = dom.createElementNS(namespace, tagName);
+    }
+    else {
+        result = dom.createElement(tagName);
+    }
+    if (match[3]) {
+        result.id = match[3];
+    }
+    if (match[4]) {
+        result.className = match[4].replace(/\./g, ' ').trim();
+    }
+    if (attrs) {
+        Object.entries(attrs).forEach(([name, value]) => {
+            if (typeof value === 'undefined') {
+                return;
+            }
+            if (/^on\w+$/.test(name)) {
+                result[name] = value;
+            }
+            else if (name === 'selected') {
+                if (value) {
+                    result.setAttribute(name, 'true');
+                }
+            }
+            else {
+                result.setAttribute(name, value);
+            }
+        });
+    }
+    result.append(...children);
+    return result;
+}
+function $(description, attrs, ...children) {
+    return _$(Namespace.HTML, description, attrs, ...children);
+}
+
 // import { dom } from "../browser";
-// import { effect } from "../store";
 class ControlCollection {
     owner;
     constructor(owner) {
@@ -5727,9 +7280,16 @@ class ControlCollection {
     }
     items = [];
     add() {
-        const args = Array.from(arguments);
-        if (args.length === 0)
+        const count = arguments.length;
+        if (count === 0)
             return [];
+        const first = arguments[0];
+        if (count === 1 && first instanceof ComponentBase) {
+            if (first.isDisposed)
+                return [];
+            return [this._insertOne(undefined, first)];
+        }
+        const args = Array.from(arguments);
         if (typeof args[0] === 'number' && args.length > 1) {
             const index = args[0];
             const children = [].concat(...args.slice(1));
@@ -5742,42 +7302,43 @@ class ControlCollection {
     }
     insert(index, ...controls) {
         const flat = [].concat(...controls);
-        return flat.filter(x => x != undefined && !x.isDisposed).map(control => {
-            control = resolveComponent(control);
-            if (typeof control == 'string' || typeof control == 'number' || typeof control == 'boolean' || typeof control == 'bigint') {
-                control = new Component(dom.createTextNode(control), null);
-            }
-            if (control.parent) {
-                control.parent.controls.detach(control);
-            }
-            if (index != undefined && index >= 0) {
-                this.items.splice(index, 0, control);
-            }
-            else {
-                this.items.push(control);
-            }
-            control.parent = this.owner;
-            const pendingLeave = control.__pendingLeave;
-            if (pendingLeave) {
-                if (this.onAddBeforeBuild && !this.owner.isBuilt) {
-                    this.onAddBeforeBuild(control);
-                }
-                pendingLeave.promise.then(() => {
-                    if (control.isDisposed || this.owner.isDisposed || control.parent !== this.owner)
-                        return;
-                    if (this.onAdd && this.owner.isBuilt)
-                        this.onAdd(control);
-                });
-                return control;
-            }
-            if (this.onAdd && this.owner.isBuilt) {
-                this.onAdd(control);
-            }
+        return flat.filter(x => x != undefined && !x.isDisposed).map(control => this._insertOne(index, control));
+    }
+    _insertOne(index, control) {
+        control = resolveComponent(control);
+        if (typeof control == 'string' || typeof control == 'number' || typeof control == 'boolean' || typeof control == 'bigint') {
+            control = new Component(dom.createTextNode(control), null);
+        }
+        if (control.parent) {
+            control.parent.controls.detach(control);
+        }
+        if (index != undefined && index >= 0) {
+            this.items.splice(index, 0, control);
+        }
+        else {
+            this.items.push(control);
+        }
+        control.parent = this.owner;
+        const pendingLeave = control.__pendingLeave;
+        if (pendingLeave) {
             if (this.onAddBeforeBuild && !this.owner.isBuilt) {
                 this.onAddBeforeBuild(control);
             }
+            pendingLeave.promise.then(() => {
+                if (control.isDisposed || this.owner.isDisposed || control.parent !== this.owner)
+                    return;
+                if (this.onAdd && this.owner.isBuilt)
+                    this.onAdd(control);
+            });
             return control;
-        });
+        }
+        if (this.onAdd && this.owner.isBuilt) {
+            this.onAdd(control);
+        }
+        if (this.onAddBeforeBuild && !this.owner.isBuilt) {
+            this.onAddBeforeBuild(control);
+        }
+        return control;
     }
     remove(control) {
         var index = this.items.indexOf(control);
@@ -5796,6 +7357,7 @@ class ControlCollection {
         this.items.splice(index, 1);
         if (control.isDisposed)
             return Promise.resolve();
+        control._base && (control._base._leaveContainer = this.owner);
         control.parent = null;
         return runLeaveThenDetach(control, () => { if (this.onRemove)
             this.onRemove(control); });
@@ -5825,6 +7387,7 @@ class ControlCollection {
         if (index === -1)
             return;
         this.items.splice(index, 1);
+        control._base && (control._base._leaveContainer = this.owner);
         control.parent = null;
     }
     async clearAsync() {
@@ -6087,7 +7650,12 @@ function runLeaveThenDetach(control, notify) {
             arrive();
         };
         try {
-            c.motif.options.transition.leaveTransition(once);
+            const opts = c.motif.options;
+            if (!opts[TRANSITION_SLOT] && !opts.transitionOut) {
+                once();
+                return;
+            }
+            opts.transition.leaveTransition(once);
         }
         catch {
             once();
@@ -6313,7 +7881,7 @@ function Lazy(props) {
             frame.navigate(resolveComponent(opts.Fallbackview));
         }
         else {
-            errorHandler.reportSuppressed('Lazy.load (no Fallbackview)', err);
+            reportError('MJX126', err);
             try {
                 frame.motif.clear().catch(() => { });
             }
@@ -6323,6 +7891,20 @@ function Lazy(props) {
     return frame;
 }
 
+function hasOwnTransition(component, phase) {
+    const options = component?.motif?.options;
+    if (!options)
+        return false;
+    const transition = options.transition;
+    return !!((phase === 'enter' ? options.transitionIn : options.transitionOut) || (transition && (transition.classes || (transition.name && transition.name.length > 0))));
+}
+function playsLeave(target) {
+    if (!target)
+        return false;
+    if (Array.isArray(target))
+        return target.some(t => !!t && !t.isDisposed && hasOwnTransition(t, 'leave'));
+    return !target.isDisposed && hasOwnTransition(target, 'leave');
+}
 function cancelAnimationsDeep(target) {
     if (!target || target.isDisposed)
         return;
@@ -6358,26 +7940,20 @@ function cancelAnimationsDeep(target) {
     }
     catch { }
 }
-async function disposeNavigationTarget(target) {
+async function disposeNavigationTarget(target, options = { deep: true }) {
     if (!target)
         return;
-    if (Array.isArray(target)) {
-        for (const xr of target) {
-            try {
-                if (xr && !xr.isDisposed) {
-                    await xr.dispose({ deep: true, skipLeaveTransition: true });
-                }
-            }
-            catch (err) {
-                reportError('MJX115', err);
-            }
+    const list = Array.isArray(target) ? target : [target];
+    await Promise.all(list.map(async (xr) => {
+        if (!xr || xr.isDisposed)
+            return;
+        try {
+            await xr.dispose(options);
         }
-    }
-    else {
-        if (!target.isDisposed) {
-            await target.dispose({ deep: true, skipLeaveTransition: true });
+        catch (err) {
+            reportError('MJX115', err);
         }
-    }
+    }));
 }
 async function navigateHost(host, page, keepOldControl = false) {
     if (host.isDisposed || page == null)
@@ -6431,10 +8007,14 @@ async function navigateHost(host, page, keepOldControl = false) {
             if (oldPage && !keepOldControl) {
                 cancelAnimationsDeep(oldPage);
                 cancelAnimationsDeep(host);
-                try {
-                    await disposeNavigationTarget(oldPage);
+                const animated = playsLeave(oldPage);
+                const leaving = disposeNavigationTarget(oldPage);
+                if (animated) {
+                    leaving.catch(() => { });
+                }
+                else {
+                    await leaving;
                 }
-                catch { }
             }
             try {
                 if (page instanceof Promise) {
@@ -6470,9 +8050,9 @@ class Frame extends Component {
             this.controls.add(props.childs);
         }
     }
-    async dispose() {
-        await disposeNavigationTarget(this.current);
-        await super.dispose();
+    async dispose(options = { deep: true }) {
+        await disposeNavigationTarget(this.current, options);
+        await super.dispose(options);
     }
     async flush() {
         await disposeNavigationTarget(this.current);
@@ -6490,6 +8070,466 @@ class Frame extends Component {
     }
 }
 
+const ARRAY_MUTATORS = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort']);
+const NOT_META = Symbol('');
+const metaReaders = new Map([
+    [Flags.IS_REACTIVE, () => true],
+    [Flags.IS_READONLY, engine => engine.isReadonly],
+    [Flags.IS_SUPERFICIAL, engine => engine.superficial],
+    [Flags.GET_SETUP, (_engine, target) => target],
+    [Flags.RAW, (engine, target, receiver) => engine.ReactiveMap().get(target) === receiver ? target : NOT_META],
+]);
+function readMeta(engine, target, key, receiver) {
+    if (typeof key !== 'symbol')
+        return NOT_META;
+    const reader = metaReaders.get(key);
+    return reader === undefined ? NOT_META : reader(engine, target, receiver);
+}
+function createGetter(engine) {
+    return function (target, p, receiver) {
+        const meta = readMeta(engine, target, p, receiver);
+        if (meta !== NOT_META)
+            return meta;
+        if (Array.isArray(target) && !engine.isReadonly) {
+            const patched = engine.arrayMethods.get;
+            if (hasOwn(patched, p)) {
+                const method = patched[p];
+                if (ARRAY_MUTATORS.has(p))
+                    addArrayStack(p);
+                else
+                    track(target, p);
+                return method;
+            }
+        }
+        const value = Reflect.get(target, p, receiver);
+        if (p === '__proto__' || isIntrinsicSymbol(p))
+            return value;
+        if (!engine.isReadonly)
+            track(target, p);
+        if (engine.superficial || !isObject(value))
+            return value;
+        return engine.reactive(value);
+    };
+}
+
+function createSetter(engine) {
+    return function (target, p, newValue, receiver) {
+        if (isReadonly(target)) {
+            return false;
+        }
+        const isArray = Array.isArray(target);
+        const oldValue = target[p];
+        const oldLength = isArray ? target.length : 0;
+        const numeric = isArray && isNumericKey(p);
+        const hadKey = numeric ? Number(p) < oldLength : hasOwn(target, p);
+        const res = Reflect.set(target, p, newValue, receiver);
+        if (engine.onValueChanged) {
+            try {
+                engine.onValueChanged({ raw: target, proxy: receiver }, p);
+            }
+            catch { }
+        }
+        if (getRaw(target) !== getRaw(receiver)) {
+            return res;
+        }
+        if (!isArray && hadKey && Object.is(newValue, oldValue)) {
+            return res;
+        }
+        trigger(target, p);
+        if (!isArray && !hadKey) {
+            trigger(target, ITERATE_KEY);
+        }
+        if (numeric && !hadKey) {
+            trigger(target, 'length');
+        }
+        if (isArray && p === 'length') {
+            const newLength = Number(newValue);
+            for (let i = newLength; i < oldLength; i++) {
+                trigger(target, String(i));
+            }
+        }
+        removeArrayStack();
+        return res;
+    };
+}
+
+function createOwn(engine) {
+    return function ownKeys(target) {
+        const shapeKey = Array.isArray(target) ? 'length' : ITERATE_KEY;
+        track(target, shapeKey);
+        return Reflect.ownKeys(target);
+    };
+}
+function createHas(engine) {
+    return function has(target, p) {
+        const found = Reflect.has(target, p);
+        if (isIntrinsicSymbol(p))
+            return found;
+        track(target, p);
+        return found;
+    };
+}
+function createDelete(engine) {
+    return function deleteProperty(target, p) {
+        pauseTracking();
+        try {
+            const isOwned = hasOwn(target, p);
+            const result = Reflect.deleteProperty(target, p);
+            if (isOwned) {
+                if (Array.isArray(target)) {
+                    trigger(target, 'length');
+                }
+                else {
+                    trigger(target, p);
+                    trigger(target, ITERATE_KEY);
+                }
+            }
+            return result;
+        }
+        finally {
+            resetTracking();
+        }
+    };
+}
+
+const PATCHED_ARRAY_METHODS = [
+    ['includes', 'lookup'],
+    ['indexOf', 'lookup'],
+    ['lastIndexOf', 'lookup'],
+    ['sort', 'order'],
+    ['concat', 'join'],
+    ['push', 'structural'],
+    ['pop', 'structural'],
+    ['shift', 'structural'],
+    ['unshift', 'structural'],
+    ['splice', 'structural'],
+    ['reverse', 'structural'],
+];
+const isLookupMiss = (outcome) => outcome === false || outcome === -1;
+class ArrayMethods {
+    engine;
+    constructor(engine) {
+        this.engine = engine;
+    }
+    get = this.createArrayMethods();
+    createArrayMethods() {
+        const table = {};
+        for (const [name, kind] of PATCHED_ARRAY_METHODS) {
+            table[name] = this.patch(name, kind);
+        }
+        return table;
+    }
+    patch(name, kind) {
+        const owner = this;
+        switch (kind) {
+            case 'lookup':
+                return function (...needles) {
+                    const source = getRaw(this);
+                    owner.engine.track(source, 'length');
+                    const direct = source[name](...needles);
+                    if (!isLookupMiss(direct))
+                        return direct;
+                    return source[name](...needles.map(needle => getRaw(needle)));
+                };
+            case 'order':
+                return function (...args) {
+                    const source = getRaw(this);
+                    const size = this.length;
+                    for (let index = 0; index < size; index++) {
+                        owner.engine.track(source, String(index));
+                    }
+                    const sorted = source[name].apply(this, args);
+                    owner.engine.track(source, name);
+                    return sorted;
+                };
+            case 'join':
+                return function (...args) {
+                    return Array.prototype.concat.apply(this, args);
+                };
+            default:
+                return function (...args) {
+                    pauseTracking();
+                    const source = getRaw(this);
+                    try {
+                        return source[name].apply(this, args);
+                    }
+                    finally {
+                        resetTracking();
+                    }
+                };
+        }
+    }
+}
+
+const ReactiveEngineMapper = new WeakSet();
+const AllreactiveMap = new WeakMap();
+function armgetter() { return AllreactiveMap; }
+class ReactiveEngine {
+    _gci;
+    startGc(_intervalMs = 10000) { }
+    stopGc() { if (this._gci) {
+        try {
+            clearInterval(this._gci);
+        }
+        catch { }
+        this._gci = undefined;
+    } }
+    constructor() {
+        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()
+    };
+    reactive(model) {
+        if (!isObject(model)) {
+            model = { value: model };
+        }
+        const targetType = getTargetType(model);
+        if (targetType === 0 /* TargetType.SYSTEM */ || targetType === 2 /* TargetType.COLLECTION */ || 0 /* TargetType.INVALID */) {
+            return model;
+        }
+        let existingProxy = AllreactiveMap.get(model);
+        if (existingProxy) {
+            return existingProxy;
+        }
+        existingProxy = AllreactiveMap.get(getRaw(model));
+        if (existingProxy) {
+            return existingProxy;
+        }
+        // if (targetType === TargetType.INVALID) {
+        if (Array.isArray(model)) {
+            var proxy = new Proxy(model, this.arrayHandler);
+            // var original = Object.getPrototypeOf(proxy);
+            // original["copy"] = () => { return model; }
+            //     return "copied";
+            AllreactiveMap.set(model, proxy);
+            // try { this.startGc(); } catch { }
+            return proxy;
+        }
+        else {
+            var proxy = new Proxy(model, this.deepHandler);
+            AllreactiveMap.set(model, proxy);
+            // try { this.startGc(); } catch { }
+            return proxy;
+        }
+    }
+    clearModel(model) {
+        if (model != null && model != undefined) {
+            Object.keys(model).forEach((key) => {
+                if (typeof model[key] === 'object') {
+                    if (AllreactiveMap.has(model[key]) || AllreactiveMap.has(getRaw(model[key]))) {
+                        this.clearModel(model[key]);
+                    }
+                }
+                AllreactiveMap.delete(getRaw(model[key]));
+                AllreactiveMap.delete(model[key]);
+            });
+            AllreactiveMap.delete(getRaw(model));
+            AllreactiveMap.delete(model);
+        }
+    }
+    track(model, key) {
+        track(model, key);
+    }
+    trigger(model, key, value) {
+        trigger(model, key);
+    }
+    ArrayTrigger(target, key, ...args) {
+        this.trigger(target, key, args);
+    }
+    onValueChanged;
+    toRaw(item) {
+        return JSON.parse(JSON.stringify(this.deepClone(item)));
+    }
+    deepClone(item) {
+        var self = this;
+        if (!item) {
+            return item;
+        }
+        var types = [Number, String, Boolean], result;
+        types.forEach(function (type) {
+            if (item instanceof type) {
+                result = type(item);
+            }
+        });
+        if (typeof result == "undefined") {
+            if (Object.prototype.toString.call(item) === "[object Array]") {
+                result = [];
+                item.forEach(function (child, index, array) {
+                    result[index] = self.deepClone(child);
+                });
+            }
+            else if (typeof item == "object") {
+                if (item.nodeType && typeof item.cloneNode == "function") {
+                    result = item.cloneNode(true);
+                }
+                else if (!item.prototype) {
+                    if (item instanceof Date) {
+                        result = new Date(item);
+                    }
+                    else {
+                        result = {};
+                        for (var i in item) {
+                            result[i] = self.deepClone(item[i]);
+                        }
+                    }
+                }
+                else {
+                    {
+                        result = item;
+                    }
+                }
+            }
+            else {
+                result = item;
+            }
+        }
+        return result;
+    }
+    pauseTracking() {
+        pauseTracking();
+    }
+    enableTracking() {
+        enableTracking();
+    }
+    resetTracking() {
+        resetTracking();
+    }
+    dispose() {
+        var cnt = true;
+        this.stopGc();
+        while (cnt == true) {
+            if (this.DisposeMapper.size > 0) {
+                const element = this.DisposeMapper.pop();
+                //     if (ApplicationService.current?.Options?.onReactiveEffectRun) {
+                AllreactiveMap.delete(element);
+            }
+            else {
+                cnt = false;
+            }
+        }
+        this.DisposeMapper.clear();
+        ReactiveEngineMapper.delete(this);
+        // if (ApplicationService.current?.Options?.onReactiveEffectRun) {
+    }
+}
+
+const engine = new ReactiveEngine();
+/* @DEV-ONLY */ const reactiveRegistry = [];
+const isDevRegistryEnabled = () => {
+    try {
+        const g = globalThis;
+        if (!g.__MOTIF_DEV__)
+            return false;
+        if (g.__MOTIF_STORE_REGISTRY__ !== reactiveRegistry)
+            g.__MOTIF_STORE_REGISTRY__ = reactiveRegistry;
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+// export * from "./IStoreBinder";
+// export function reactiveListeners(model?: any) {
+//     if (model) {
+//         /* @DEV-ONLY */return debugGetDeps(model) ?? new Map();
+//     return debugGetDepMap();
+function reactive(model) {
+    const result = engine.reactive(model);
+    /* @DEV-ONLY */ try {
+        /* @DEV-ONLY */ if (isDevRegistryEnabled()) {
+            /* @DEV-ONLY */ const name = model?.constructor?.name || 'reactive';
+            /* @DEV-ONLY */ reactiveRegistry.push({ name, value: result, type: 'reactive' });
+            /* @DEV-ONLY */ if (reactiveRegistry.length > 200)
+                reactiveRegistry.shift();
+            /* @DEV-ONLY */ }
+        /* @DEV-ONLY */
+        /* @DEV-ONLY */ }
+    catch { }
+    return result;
+}
+function useModel(model) {
+    const result = engine.reactive(model);
+    /* @DEV-ONLY */ try {
+        /* @DEV-ONLY */ if (isDevRegistryEnabled()) {
+            /* @DEV-ONLY */ const name = model?.constructor?.name || 'useModel';
+            /* @DEV-ONLY */ reactiveRegistry.push({ name, value: result, type: 'reactive' });
+            /* @DEV-ONLY */ if (reactiveRegistry.length > 200)
+                reactiveRegistry.shift();
+            /* @DEV-ONLY */ }
+        /* @DEV-ONLY */
+        /* @DEV-ONLY */ }
+    catch { }
+    return result;
+}
+function clearModel(model) {
+    return engine.clearModel(model);
+}
+function deepClone(item) {
+    return engine.deepClone(item);
+}
+function createSignal(initialValue) {
+    const sig = new Signal(initialValue);
+    /* @DEV-ONLY */ try {
+        /* @DEV-ONLY */ if (isDevRegistryEnabled()) {
+            /* @DEV-ONLY */ const name = `signal_${reactiveRegistry.length}`;
+            /* @DEV-ONLY */ reactiveRegistry.push({ name, value: sig.value, type: 'signal' });
+            /* @DEV-ONLY */ if (reactiveRegistry.length > 200)
+                reactiveRegistry.shift();
+            /* @DEV-ONLY */ }
+        /* @DEV-ONLY */
+        /* @DEV-ONLY */ }
+    catch { }
+    return sig;
+}
+function createComputed(getter) {
+    const comp = new Computed(getter);
+    /* @DEV-ONLY */ try {
+        /* @DEV-ONLY */ if (isDevRegistryEnabled()) {
+            /* @DEV-ONLY */ const name = `computed_${reactiveRegistry.length}`;
+            /* @DEV-ONLY */ reactiveRegistry.push({ name, value: comp.value, type: 'computed' });
+            /* @DEV-ONLY */ if (reactiveRegistry.length > 200)
+                reactiveRegistry.shift();
+            /* @DEV-ONLY */ }
+        /* @DEV-ONLY */
+        /* @DEV-ONLY */ }
+    catch { }
+    return comp;
+}
+function createLazyComputed(getter) {
+    const comp = new LazyComputed(getter);
+    /* @DEV-ONLY */ try {
+        /* @DEV-ONLY */ if (isDevRegistryEnabled()) {
+            /* @DEV-ONLY */ const name = `lazyComputed_${reactiveRegistry.length}`;
+            /* @DEV-ONLY */ reactiveRegistry.push({ name, value: undefined, type: 'computed' });
+            /* @DEV-ONLY */ if (reactiveRegistry.length > 200)
+                reactiveRegistry.shift();
+            /* @DEV-ONLY */ }
+        /* @DEV-ONLY */
+        /* @DEV-ONLY */ }
+    catch { }
+    return comp;
+}
+
 const autoRegistry = new Map();
 
 function isConstructor(fn) {
@@ -6730,12 +8770,12 @@ function render() {
 function toggle(force) {
     if (!overlayHost)
         return;
-    visible = typeof force === 'boolean' ? force : !visible;
+    visible = !visible;
     overlayHost.style.display = visible ? 'block' : 'none';
 }
 function initOverlayIfEnabled() {
     ensureDevtoolsFlagInitialized();
-    if (!isEnabled())
+    if (!isRequestedByFlag())
         return;
     try {
         if (!overlayHost) {
@@ -6753,9 +8793,6 @@ function initOverlayIfEnabled() {
             });
             on((ev) => { if (ev.type === 'warning' && visible)
                 render(); });
-            const qs = location.search || '';
-            if (Application.main.isDevelopmentModeEnabled)
-                toggle(true);
         }
     }
     catch { }
@@ -7113,13 +9150,6 @@ const STORAGE_KEY = 'motifjs:stack';
 const SLIDE_OFFSET = 30;
 const EASING = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
 const isElement = (node) => !!node && node.nodeType === 1 && !!node.style;
-function hasOwnTransition(component, phase) {
-    const options = component?.motif?.options;
-    if (!options)
-        return false;
-    const transition = options.transition;
-    return !!((phase === 'enter' ? options.transitionIn : options.transitionOut) || (transition && (transition.classes || (transition.name && transition.name.length > 0))));
-}
 function markDirection(component, direction) {
     const el = component?.element;
     if (!component || component.isDisposed || !isElement(el))
@@ -7502,7 +9532,7 @@ class NavigationStack {
         if (!top || top.isDisposed)
             return;
         try {
-            await disposeNavigationTarget(top);
+            await disposeNavigationTarget(top, { deep: true, skipLeaveTransition: true });
         }
         catch (error) {
             reportError('MJX307', error);
@@ -9934,8 +11964,14 @@ class Application {
             }
             catch { /* ignore */ }
         }, 'Application.dispose.resetUrl');
+        transitionSettings.mode = 'concurrent';
         _globalApplication = null;
     }
+    useTransitions(options) {
+        if (isTransitionMode(options?.mode))
+            transitionSettings.mode = options.mode;
+        return this;
+    }
     use(callback) {
         this._middlewares.push(callback);
         return this;
@@ -10151,6 +12187,7 @@ class Application {
         this._isDevelopment = isDev;
         errorHandler.setDevelopmentMode(isDev);
         safeCallSilent(() => { globalThis.__MOTIF_DEV__ = isDev; }, 'Application.useDevelopment.flag');
+        safeCallSilent(() => { setDevtoolsEnabled(isDev); }, 'Application.useDevelopment.devtools');
         if (isDev)
             flushCompilerContractWarnings();
         return this;
@@ -10175,5 +12212,5 @@ function useApplication() {
     };
 }
 
-export { Application as A, Component as C, Disposable as D, Emitter as E, FNComponent as F, Lazy as L, RouterView as R, ServiceCollection as S, UrlRoutingModule as U, ComponentBase as a, autoRegistry as b, ApplicationBuilder as c, ComponentMotif as d, ControlCollection as e, findAppendableComponent$1 as f, disposableCore as g, DisposableStore as h, FragmentNode as i, Frame as j, inject as k, motifComponent as l, motifCompiled as m, notifyDeactivated as n, motifFragment as o, ServiceProvider as p, useNavigation as q, RoutingEngine as r, RouterState as s, toDisposable as t, useApplication as u, createRouter as v, Scanner as w, RouteCollection as x };
-//# sourceMappingURL=core-DxINgP83.esm.js.map
+export { useApplication as $, Application as A, ErrorHandler as B, Component as C, Disposable as D, Emitter as E, FNComponent as F, FragmentNode as G, Frame as H, inject as I, LazyComputed as J, LinkedList as K, Lazy as L, MotifError as M, motifCompiled as N, motifComponent as O, motifFragment as P, NodeTypes as Q, reactive as R, RouterView as S, safeCall as T, safeCallAsync as U, safeCallSilent as V, ServiceCollection as W, ServiceProvider as X, setUnexpectedErrorHandler as Y, Signal as Z, toDisposable as _, reportError as a, useModel as a0, useNavigation as a1, debugGetDeps as a2, debugGetDepMap as a3, UrlRoutingModule as a4, RoutingEngine as a5, RouterState as a6, createRouter as a7, Scanner as a8, RouteCollection as a9, ComponentBase as b, contentBlocks as c, autoRegistry as d, effect as e, findAppendableComponent$1 as f, formatMotifMessage as g, ApplicationBuilder as h, asyncTracking as i, clearModel as j, ComponentMotif as k, Computed as l, motifError as m, notifyDeactivated as n, configureReactivityLeakMonitor as o, ControlCollection as p, createComputed as q, reportWarning as r, createLazyComputed as s, createSignal as t, untracked as u, deepClone as v, disposableCore as w, DisposableStore as x, dom as y, errorHandler as z };
+//# sourceMappingURL=core-BGdhUeHu.esm.js.map