@ktjs/core 0.32.5 → 0.33.1

package/dist/index.mjs

@@ -1,40 +1,10 @@
-import { $isArray, $isThenable, $isNode, $is, $emptyFn, $applyModel, $forEach, $identity } from '@ktjs/shared';
+import { $isArray, $isThenable, $isNode, $emptyFn, $is, $applyModel, $forEach, $identity } from "@ktjs/shared";
 
-const isKT = (obj) => obj?.isKT;
-const isRef = (obj) => {
-    // & This is tested to be the fastest way.
-    // faster than includes, arrayindex, if or.
-    if (obj.ktType === undefined) {
-        return false;
-    }
-    return obj.ktType >= 2 /* KTReactiveType.Ref */;
-};
-const isArrayRef = (obj) => obj?.ktType === 4 /* KTReactiveType.ArrayRef */;
-const isMapRef = (obj) => obj?.ktType === 5 /* KTReactiveType.MapRef */;
-const isSetRef = (obj) => obj?.ktType === 6 /* KTReactiveType.SetRef */;
-const isWeakMapRef = (obj) => obj?.ktType === 7 /* KTReactiveType.WeakMapRef */;
-const isWeakSetRef = (obj) => obj?.ktType === 8 /* KTReactiveType.WeakSetRef */;
-const isDateRef = (obj) => obj?.ktType === 9 /* KTReactiveType.DateRef */;
-const isComputed = (obj) => obj?.ktType === 1 /* KTReactiveType.Computed */;
-
-const booleanHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = !!value;
-    }
-    else {
-        element.setAttribute(key, value);
-    }
-};
-const valueHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = value;
-    }
-    else {
-        element.setAttribute(key, value);
-    }
-};
-// Attribute handlers map for optimized lookup
-const handlers = {
+const isKT = obj => obj?.isKT, isRef = obj => void 0 !== obj.ktType && 3 === obj.ktType, isComputed = obj => 2 === obj?.ktType, booleanHandler = (element, key, value) => {
+    key in element ? element[key] = !!value : element.setAttribute(key, value);
+}, valueHandler = (element, key, value) => {
+    key in element ? element[key] = value : element.setAttribute(key, value);
+}, handlers = {
     checked: booleanHandler,
     selected: booleanHandler,
     value: valueHandler,
@@ -55,777 +25,224 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: (element, _key, value) => (element.hidden = !!value),
+    hidden: (element, _key, value) => element.hidden = !!value
+}, defaultHandler = (element, key, value) => element.setAttribute(key, value), setElementStyle = (element, style) => {
+    if ("string" != typeof style) for (const key in style) element.style[key] = style[key]; else element.style.cssText = style;
 };
 
-const defaultHandler = (element, key, value) => element.setAttribute(key, value);
-const setElementStyle = (element, style) => {
-    if (typeof style === 'string') {
-        element.style.cssText = style;
-        return;
-    }
-    for (const key in style) {
-        element.style[key] = style[key];
-    }
-};
-function attrIsObject(element, attr) {
-    const classValue = attr.class || attr.className;
-    if (classValue !== undefined) {
-        if (isKT(classValue)) {
-            element.setAttribute('class', classValue.value);
-            classValue.addOnChange((v) => element.setAttribute('class', v));
-        }
-        else {
-            element.setAttribute('class', classValue);
-        }
-    }
-    const style = attr.style;
-    if (style) {
-        if (typeof style === 'string') {
-            element.setAttribute('style', style);
-        }
-        else if (typeof style === 'object') {
-            if (isKT(style)) {
-                setElementStyle(element, style.value);
-                style.addOnChange((v) => setElementStyle(element, v));
-            }
-            else {
-                setElementStyle(element, style);
+function applyAttr(element, attr) {
+    if (attr) {
+        if ("object" != typeof attr || null === attr) throw new Error("[@ktjs/core error] attr must be an object.");
+        !function(element, attr) {
+            const classValue = attr.class || attr.className;
+            void 0 !== classValue && (isKT(classValue) ? (element.setAttribute("class", classValue.value), 
+            classValue.addOnChange(v => element.setAttribute("class", v))) : element.setAttribute("class", classValue));
+            const style = attr.style;
+            if (style && ("string" == typeof style ? element.setAttribute("style", style) : "object" == typeof style && (isKT(style) ? (setElementStyle(element, style.value), 
+            style.addOnChange(v => setElementStyle(element, v))) : setElementStyle(element, style))), 
+            "k-html" in attr) {
+                const html = attr["k-html"];
+                isKT(html) ? (element.innerHTML = html.value, html.addOnChange(v => element.innerHTML = v)) : element.innerHTML = html;
             }
-        }
-    }
-    if ('k-html' in attr) {
-        const html = attr['k-html'];
-        if (isKT(html)) {
-            element.innerHTML = html.value;
-            html.addOnChange((v) => (element.innerHTML = v));
-        }
-        else {
-            element.innerHTML = html;
-        }
-    }
-    for (const key in attr) {
-        // & Arranged in order of usage frequency
-        if (
-        // key === 'k-if' ||
-        // key === 'k-else' ||
-        key === 'k-model' ||
-            key === 'k-for' ||
-            key === 'k-key' ||
-            key === 'ref' ||
-            key === 'class' ||
-            key === 'className' ||
-            key === 'style' ||
-            key === 'children' ||
-            key === 'k-html') {
-            continue;
-        }
-        const o = attr[key];
-        // normal event handler
-        if (key.startsWith('on:')) {
-            if (o) {
-                element.addEventListener(key.slice(3), o); // chop off the `on:`
+            for (const key in attr) {
+                if ("k-model" === key || "k-for" === key || "k-key" === key || "ref" === key || "class" === key || "className" === key || "style" === key || "children" === key || "k-html" === key) continue;
+                const o = attr[key];
+                if (key.startsWith("on:")) {
+                    o && element.addEventListener(key.slice(3), o);
+                    continue;
+                }
+                const handler = handlers[key] || defaultHandler;
+                isKT(o) ? (handler(element, key, o.value), o.addOnChange(v => handler(element, key, v))) : handler(element, key, o);
             }
-            continue;
-        }
-        // normal attributes
-        const handler = handlers[key] || defaultHandler;
-        if (isKT(o)) {
-            handler(element, key, o.value);
-            o.addOnChange((v) => handler(element, key, v));
-        }
-        else {
-            handler(element, key, o);
-        }
-    }
-}
-function applyAttr(element, attr) {
-    if (!attr) {
-        return;
-    }
-    if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
-    }
-    else {
-        throw new Error('[@ktjs/core error] attr must be an object.');
+        }(element, attr);
     }
 }
 
-const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
+const assureNode = o => $isNode(o) ? o : document.createTextNode(o);
+
 function apdSingle(element, c) {
-    // & Ignores falsy values, consistent with React's behavior
-    if (c === undefined || c === null || c === false) {
-        return;
-    }
-    if (isKT(c)) {
+    if (null != c && !1 !== c) if (isKT(c)) {
         let node = assureNode(c.value);
-        element.appendChild(node);
-        c.addOnChange((newValue, _oldValue) => {
+        element.appendChild(node), c.addOnChange((newValue, _oldValue) => {
             const oldNode = node;
-            node = assureNode(newValue);
-            oldNode.replaceWith(node);
+            node = assureNode(newValue), oldNode.replaceWith(node);
         });
-    }
-    else {
+    } else {
         const node = assureNode(c);
         element.appendChild(node);
-        // Handle KTFor anchor
         const list = node.__kt_for_list__;
-        if ($isArray(list)) {
-            apd(element, list);
-        }
+        $isArray(list) && apd(element, list);
     }
 }
+
 function apd(element, c) {
-    if ($isThenable(c)) {
-        c.then((r) => apd(element, r));
-    }
-    else if ($isArray(c)) {
-        for (let i = 0; i < c.length; i++) {
-            // & might be thenable here too
-            const ci = c[i];
-            if ($isThenable(ci)) {
-                const comment = document.createComment('ktjs-promise-placeholder');
-                element.appendChild(comment);
-                ci.then((awaited) => comment.replaceWith(awaited));
-            }
-            else {
-                apdSingle(element, ci);
-            }
-        }
-    }
-    else {
-        // & here is thened, so must be a simple elementj
-        apdSingle(element, c);
-    }
+    if ($isThenable(c)) c.then(r => apd(element, r)); else if ($isArray(c)) for (let i = 0; i < c.length; i++) {
+        const ci = c[i];
+        if ($isThenable(ci)) {
+            const comment = document.createComment("ktjs-promise-placeholder");
+            element.appendChild(comment), ci.then(awaited => comment.replaceWith(awaited));
+        } else apdSingle(element, ci);
+    } else apdSingle(element, c);
 }
+
 function applyContent(element, content) {
-    if ($isArray(content)) {
-        for (let i = 0; i < content.length; i++) {
-            apd(element, content[i]);
-        }
-    }
-    else {
-        apd(element, content);
-    }
+    if ($isArray(content)) for (let i = 0; i < content.length; i++) apd(element, content[i]); else apd(element, content);
 }
 
-// # internal methods that cannot be placed in @ktjs/shared
 const IdGenerator = {
     _refOnChangeId: 1,
     get refOnChangeId() {
         return this._refOnChangeId++;
-    },
-    _computedOnChangeId: 1,
-    get computedOnChangeId() {
-        return this._computedOnChangeId++;
-    }};
-
-class KTComputed {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    ktType = 1 /* KTReactiveType.Computed */;
-    /**
-     * @internal
-     */
-    _calculator;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges = new Map();
-    /**
-     * @internal
-     */
-    _emit(newValue, oldValue, handlerKeys) {
-        if (handlerKeys) {
-            for (let i = 0; i < handlerKeys.length; i++) {
-                this._onChanges.get(handlerKeys[i])?.(newValue, oldValue);
-            }
-            return;
-        }
-        this._onChanges.forEach((c) => c(newValue, oldValue));
-    }
-    /**
-     * @internal
-     */
-    _recalculate(forceEmit = false, handlerKeys) {
-        const oldValue = this._value;
-        const newValue = this._calculator();
-        if (oldValue === newValue) {
-            if (forceEmit) {
-                this._emit(newValue, oldValue, handlerKeys);
-            }
-            return;
-        }
-        this._value = newValue;
-        this._emit(newValue, oldValue, handlerKeys);
-    }
-    /**
-     * @internal
-     */
-    _subscribe(reactives) {
-        for (let i = 0; i < reactives.length; i++) {
-            const reactive = reactives[i];
-            reactive.addOnChange(() => this._recalculate());
-        }
     }
-    constructor(_calculator, reactives) {
-        this._calculator = _calculator;
-        this._value = _calculator();
-        this._subscribe(reactives);
-    }
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value() {
-        return this._value;
-    }
-    set value(_newValue) {
-        throw new Error('[@ktjs/core error] KTComputed: cannot set value of a computed value');
-    }
-    /**
-     * Force listeners to run once with the latest computed result.
-     */
-    notify(handlerKeys) {
-        this._recalculate(true, handlerKeys);
-    }
-    /**
-     * Computed values are derived from dependencies and should not be mutated manually.
-     */
-    mutate(_mutator, handlerKeys) {
-        console.warn('[@ktjs/core warn]','KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead');
-        if (handlerKeys) {
-            this._emit(this._value, this._value, handlerKeys);
-        }
-        return this._value;
-    }
-    toComputed(calculator, dependencies) {
-        return computed(() => calculator(this.value), dependencies ? [this, ...dependencies] : [this]);
-    }
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback, key) {
-        if (typeof callback !== 'function') {
-            throw new Error('[@ktjs/core error] KTComputed.addOnChange: callback must be a function');
-        }
-        const k = key ?? IdGenerator.computedOnChangeId;
-        this._onChanges.set(k, callback);
-        return k;
-    }
-    /**
-     * Unregister a callback
-     * @param key registered listener key
-     */
-    removeOnChange(key) {
-        const callback = this._onChanges.get(key);
-        this._onChanges.delete(key);
-        return callback;
-    }
-}
-/**
- * Create a reactive computed value
- * @param computeFn
- * @param dependencies refs and computeds that this computed depends on
- */
-function computed(computeFn, dependencies) {
-    if (dependencies.some((v) => !isKT(v))) {
-        throw new Error('[@ktjs/core error] computed: all reactives must be KTRef or KTComputed instances');
-    }
-    return new KTComputed(computeFn, dependencies);
-}
+};
 
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    ktType = 2 /* KTReactiveType.Ref */;
-    /**
-     * @internal
-     */
+class KTReactive {
+    isKT=!0;
+    ktType=1;
     _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    /**
-     * @internal
-     */
+    _changeHandlers=new Map;
     _emit(newValue, oldValue, handlerKeys) {
         if (handlerKeys) {
-            for (let i = 0; i < handlerKeys.length; i++) {
-                this._onChanges.get(handlerKeys[i])?.(newValue, oldValue);
-            }
-            return;
+            for (let i = 0; i < handlerKeys.length; i++) this._changeHandlers.get(handlerKeys[i])?.(newValue, oldValue);
+            return this;
         }
-        this._onChanges.forEach((c) => c(newValue, oldValue));
+        return this._changeHandlers.forEach(c => c(newValue, oldValue)), this;
     }
-    constructor(_value, _onChange) {
-        this._value = _value;
-        this._onChanges = new Map();
-        if (_onChange) {
-            this._onChanges.set(IdGenerator.refOnChangeId, _onChange);
-        }
+    constructor(_value) {
+        this._value = _value, this._changeHandlers = new Map;
     }
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
     get value() {
         return this._value;
     }
-    set value(newValue) {
-        if ($is(newValue, this._value)) {
-            return;
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        this._emit(newValue, oldValue);
-    }
-    /**
-     * Force all listeners to run even when reference identity has not changed.
-     * Useful for in-place array/object mutations.
-     */
+    set value(_newValue) {}
     notify(handlerKeys) {
-        this._emit(this._value, this._value, handlerKeys);
-    }
-    /**
-     * Mutate current value in-place and notify listeners once.
-     *
-     * @example
-     * const items = ref<number[]>([1, 2]);
-     * items.mutate((list) => list.push(3));
-     */
-    mutate(mutator, handlerKeys) {
-        if (typeof mutator !== 'function') {
-            throw new Error('[@ktjs/core error] KTRef.mutate: mutator must be a function');
-        }
-        const oldValue = this._value;
-        const result = mutator(this._value);
-        this._emit(this._value, oldValue, handlerKeys);
-        return result;
+        return this._emit(this._value, this._value, handlerKeys);
     }
-    toComputed(calculator, dependencies) {
-        return computed(() => calculator(this.value), dependencies ? [this, ...dependencies] : [this]);
+    map(..._args) {
+        throw new Error("This is meant to be override in computed.ts");
     }
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     * @param key Optional key to identify the callback, allowing multiple listeners on the same ref and individual removal. If not provided, a unique ID will be generated.
-     */
     addOnChange(callback, key) {
-        if (typeof callback !== 'function') {
-            throw new Error('[@ktjs/core error] KTRef.addOnChange: callback must be a function');
-        }
+        if ("function" != typeof callback) throw new Error("[@ktjs/core error] KTRef.addOnChange: callback must be a function");
         const k = key ?? IdGenerator.refOnChangeId;
-        this._onChanges.set(k, callback);
-        return k;
+        return this._changeHandlers.set(k, callback), this;
     }
     removeOnChange(key) {
-        const callback = this._onChanges.get(key);
-        this._onChanges.delete(key);
-        return callback;
+        const callback = this._changeHandlers.get(key);
+        return this._changeHandlers.delete(key), callback;
     }
 }
 
-/**
- * Calls the setter-like function and emit all changes of it
- */
-const apply = (r, setter, args) => {
-    const v = r.value;
-    const result = setter.apply(v, args);
-    r._onChanges.forEach((handler) => handler(v, v));
-    return result;
-};
-const applyArgless = (r, setter) => {
-    const v = r.value;
-    const result = setter.apply(v);
-    r._onChanges.forEach((handler) => handler(v, v));
-    return result;
-};
+const reactiveToOldValue = new Map;
 
-class KTArrayRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 4 /* KTReactiveType.ArrayRef */;
-    }
-    get length() {
-        return this.value.length;
-    }
-    set length(newLength) {
-        this._value.length = newLength;
-        this._onChanges.forEach((handler) => handler(this._value, this._value));
-    }
-    push(...items) {
-        return apply(this, this._value.push, items);
-    }
-    /**
-     * Same as `Array.prototype.pop`, but emits change after calling it
-     */
-    pop() {
-        return applyArgless(this, this._value.pop);
-    }
-    /**
-     * Same as `Array.prototype.shift`, but emits change after calling it
-     */
-    shift() {
-        return applyArgless(this, this._value.shift);
-    }
-    /**
-     * Same as `Array.prototype.unshift`, but emits change after calling it
-     */
-    unshift(...items) {
-        return apply(this, this._value.unshift, items);
-    }
-    splice(...args) {
-        return apply(this, this._value.splice, args);
-    }
-    sort(...args) {
-        apply(this, this._value.sort, args);
-        return this;
-    }
-    /**
-     * Same as `Array.prototype.reverse`, but emits change after calling it
-     */
-    reverse() {
-        applyArgless(this, this._value.reverse);
-        return this;
-    }
-    fill(...args) {
-        apply(this, this._value.fill, args);
-        return this;
-    }
-    copyWithin(...args) {
-        apply(this, this._value.copyWithin, args);
-        return this;
-    }
-}
-const arrayRef = (value, onChange) => new KTArrayRef(value, onChange);
+let scheduled = !1;
 
-class KTDateRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 9 /* KTReactiveType.DateRef */;
-    }
-    setTime(timeValue) {
-        return apply(this, this._value.setTime, [timeValue]);
-    }
-    setMilliseconds(millisecondsValue) {
-        return apply(this, this._value.setMilliseconds, [millisecondsValue]);
-    }
-    setUTCMilliseconds(millisecondsValue) {
-        return apply(this, this._value.setUTCMilliseconds, [millisecondsValue]);
-    }
-    setSeconds(...args) {
-        return apply(this, this._value.setSeconds, args);
-    }
-    setUTCSeconds(...args) {
-        return apply(this, this._value.setUTCSeconds, args);
-    }
-    setMinutes(...args) {
-        return apply(this, this._value.setMinutes, args);
-    }
-    setUTCMinutes(...args) {
-        return apply(this, this._value.setUTCMinutes, args);
-    }
-    setHours(...args) {
-        return apply(this, this._value.setHours, args);
-    }
-    setUTCHours(...args) {
-        return apply(this, this._value.setUTCHours, args);
-    }
-    setDate(dateValue) {
-        return apply(this, this._value.setDate, [dateValue]);
-    }
-    setUTCDate(dateValue) {
-        return apply(this, this._value.setUTCDate, [dateValue]);
-    }
-    setMonth(...args) {
-        return apply(this, this._value.setMonth, args);
-    }
-    setUTCMonth(...args) {
-        return apply(this, this._value.setUTCMonth, args);
-    }
-    setFullYear(...args) {
-        return apply(this, this._value.setFullYear, args);
-    }
-    setUTCFullYear(...args) {
-        return apply(this, this._value.setUTCFullYear, args);
-    }
-}
-const dateRef = (value, onChange) => new KTDateRef(value, onChange);
-
-class KTMapRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 5 /* KTReactiveType.MapRef */;
-    }
-    get size() {
-        return this._value.size;
-    }
-    has(key) {
-        return this._value.has(key);
-    }
-    get(key) {
-        return this._value.get(key);
-    }
-    set(key, value) {
-        apply(this, this._value.set, [key, value]);
-        return this;
-    }
-    delete(key) {
-        return apply(this, this._value.delete, [key]);
+class KTRef extends KTReactive {
+    ktType=3;
+    get value() {
+        return this._value;
     }
-    clear() {
-        return applyArgless(this, this._value.clear);
+    set value(newValue) {
+        if ($is(newValue, this._value)) return;
+        const oldValue = this._value;
+        this._value = newValue, this._emit(newValue, oldValue);
+    }
+    get draft() {
+        return (reactive => {
+            if (!reactiveToOldValue.has(reactive)) {
+                if (reactiveToOldValue.set(reactive, reactive._value), scheduled) return;
+                scheduled = !0, Promise.resolve().then(() => {
+                    scheduled = !1, reactiveToOldValue.forEach((oldValue, reactive) => {
+                        reactive._changeHandlers.forEach(handler => handler(reactive.value, oldValue));
+                    }), reactiveToOldValue.clear();
+                });
+            }
+        })(this), this._value;
     }
 }
-const mapRef = (value, onChange) => new KTMapRef(value, onChange);
 
-class KTSetRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 6 /* KTReactiveType.SetRef */;
-    }
-    get size() {
-        return this._value.size;
+const ref = value => new KTRef(value), $modelOrRef = (props, defaultValue) => {
+    if ("k-model" in props) {
+        const kmodel = props["k-model"];
+        if (isRef(kmodel)) return kmodel;
+        throw new Error("[@ktjs/core error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.");
     }
-    has(value) {
-        return this._value.has(value);
-    }
-    add(value) {
-        apply(this, this._value.add, [value]);
-        return this;
-    }
-    delete(value) {
-        return apply(this, this._value.delete, [value]);
-    }
-    clear() {
-        return applyArgless(this, this._value.clear);
-    }
-}
-const setRef = (value, onChange) => new KTSetRef(value, onChange);
+    return ref(defaultValue);
+}, $refSetter = (props, node) => props.ref.value = node, $initRef = (props, node) => {
+    if (!("ref" in props)) return $emptyFn;
+    const r = props.ref;
+    if (isRef(r)) return r.value = node, $refSetter;
+    throw new Error("[@ktjs/core error] Fragment: ref must be a KTRef");
+};
 
-class KTWeakMapRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 7 /* KTReactiveType.WeakMapRef */;
-    }
-    has(key) {
-        return this._value.has(key);
-    }
-    get(key) {
-        return this._value.get(key);
-    }
-    set(key, value) {
-        apply(this, this._value.set, [key, value]);
-        return this;
-    }
-    delete(key) {
-        return apply(this, this._value.delete, [key]);
+class KTComputed extends KTReactive {
+    ktType=2;
+    _calculator;
+    _recalculate(forceEmit = !1, handlerKeys) {
+        const oldValue = this._value, newValue = this._calculator();
+        return oldValue === newValue ? (forceEmit && this._emit(newValue, oldValue, handlerKeys), 
+        this) : (this._value = newValue, this._emit(newValue, oldValue, handlerKeys), this);
     }
-}
-const weakMapRef = (value, onChange) => new KTWeakMapRef(value, onChange);
-
-class KTWeakSetRef extends KTRef {
-    constructor(value, onChange) {
-        super(value, onChange);
-        this.ktType = 8 /* KTReactiveType.WeakSetRef */;
+    constructor(_calculator, dependencies) {
+        super(_calculator()), this._calculator = _calculator;
+        for (let i = 0; i < dependencies.length; i++) dependencies[i].addOnChange(() => this._recalculate());
     }
-    has(value) {
-        return this._value.has(value);
+    get value() {
+        return this._value;
     }
-    add(value) {
-        apply(this, this._value.add, [value]);
-        return this;
+    set value(_newValue) {
+        console.warn("[@ktjs/core warn]", "'value' of Computed are read-only.");
     }
-    delete(value) {
-        return apply(this, this._value.delete, [value]);
+    notify(handlerKeys) {
+        return this._recalculate(!0, handlerKeys);
     }
 }
-const weakSetRef = (value, onChange) => new KTWeakSetRef(value, onChange);
 
-/**
- * Reference to the created HTML element or other reactive data.
- * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
- * - Automatically wrap the value with corresponding ref type based on its type.
- *   - When wrapped, setter-like methods will be reactive. like `push` for `Array`, `set` for `Map`, `add` for `Set`, etc.
- *   - Supports: `Array`, `Map`, `Set`, `WeakMap`, `WeakSet`, `Date`.
- *   - Since there will be some cost for runtime detection, and compilation plugin might not be able to analyze all cases. It is recommended to use specific ref type directly if you already know the type of value, like `ref.array`, `ref.map`, etc.
- * @param value any data
- * @param onChange event handler triggered when the value changes, with signature `(newValue, oldValue) => void`
- */
-function autoRef(value, onChange) {
-    if (Array.isArray(value)) {
-        return arrayRef(value, onChange);
-    }
-    if (value instanceof Map) {
-        return mapRef(value, onChange);
-    }
-    if (value instanceof Set) {
-        return setRef(value, onChange);
-    }
-    if (value instanceof WeakMap) {
-        return weakMapRef(value, onChange);
-    }
-    if (value instanceof WeakSet) {
-        return weakSetRef(value, onChange);
-    }
-    if (value instanceof Date) {
-        return dateRef(value, onChange);
-    }
-    return new KTRef(value, onChange);
+function computed(computeFn, dependencies) {
+    if (dependencies.some(v => !isKT(v))) throw new Error("[@ktjs/core error] computed: all reactives must be KTRef or KTComputed instances");
+    return new KTComputed(computeFn, dependencies);
 }
-// todo 编译时期，插件要尽量分析出谁是谁，并基于最大限度的覆写支持，避免运行时for循环创建ref
-/**
- * Create a plain `KTRef` object.
- *
- * If you want the value to be automatically wrapped with corresponding ref type based on its type, please use `autoRef` instead.
- *
- * @param value any data
- * @param onChange event handler triggered when the value changes, with signature `(newValue, oldValue) => void`
- * @returns
- */
-const ref = ((value, onChange) => new KTRef(value, onChange));
-ref.array = arrayRef;
-ref.date = dateRef;
-ref.map = mapRef;
-ref.set = setRef;
-ref.weakMap = weakMapRef;
-ref.weakSet = weakSetRef;
-/**
- * Assert k-model to be a ref object
- */
-const $modelOrRef = (props, defaultValue) => {
-    // & props is an object. Won't use it in any other place
-    if ('k-model' in props) {
-        const kmodel = props['k-model'];
-        if (isRef(kmodel)) {
-            return kmodel;
-        }
-        else {
-            throw new Error(`[@ktjs/core error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
-        }
-    }
-    return ref(defaultValue);
-};
-const $refSetter = (props, node) => (props.ref.value = node);
-/**
- * Whether `props.ref` is a `KTRef` only needs to be checked in the initial render
- */
-const $initRef = (props, node) => {
-    if (!('ref' in props)) {
-        return $emptyFn;
-    }
-    const r = props.ref;
-    if (isRef(r)) {
-        r.value = node;
-        return $refSetter;
-    }
-    else {
-        throw new Error('[@ktjs/core error] Fragment: ref must be a KTRef');
-    }
-};
 
-/**
- * Register a reactive effect with options.
- * @param effectFn The effect function to run when dependencies change
- * @param reactives The reactive dependencies
- * @param options Effect options: lazy, onCleanup, debugName
- * @returns stop function to remove all listeners
- */
 function effect(effectFn, reactives, options) {
-    const { lazy = false, onCleanup = $emptyFn, debugName = '' } = Object(options);
-    const listenerKeys = [];
-    let active = true;
+    const {lazy: lazy = !1, onCleanup: onCleanup = $emptyFn, debugName: debugName = ""} = Object(options), listenerKeys = [];
+    let active = !0;
     const run = () => {
-        if (!active) {
-            return;
-        }
-        // cleanup before rerun
-        onCleanup();
-        try {
-            effectFn();
-        }
-        catch (err) {
-            console.debug('[@ktjs/core debug]','effect error:', debugName, err);
+        if (active) {
+            onCleanup();
+            try {
+                effectFn();
+            } catch (err) {
+                console.debug("[@ktjs/core debug]", "effect error:", debugName, err);
+            }
         }
     };
-    // subscribe to dependencies
-    for (let i = 0; i < reactives.length; i++) {
-        listenerKeys[i] = reactives[i].addOnChange(run);
-    }
-    // auto run unless lazy
-    if (!lazy) {
-        run();
-    }
-    // stop function
-    return () => {
-        if (!active) {
-            return;
-        }
-        active = false;
-        for (let i = 0; i < reactives.length; i++) {
-            reactives[i].removeOnChange(listenerKeys[i]);
+    for (let i = 0; i < reactives.length; i++) listenerKeys[i] = i, reactives[i].addOnChange(run, i);
+    return lazy || run(), () => {
+        if (active) {
+            active = !1;
+            for (let i = 0; i < reactives.length; i++) reactives[i].removeOnChange(listenerKeys[i]);
+            onCleanup();
         }
-        // final cleanup
-        onCleanup();
     };
 }
 
-const toReactive = (value, onChange) => {
-    if (isKT(value)) {
-        if (onChange) {
-            value.addOnChange(onChange);
-        }
-        return value;
-    }
-    else {
-        return ref(value, onChange);
-    }
+KTReactive.prototype.map = function(calculator, dependencies) {
+    return new KTComputed(() => calculator(this._value), dependencies ? [ this, ...dependencies ] : [ this ]);
 };
-/**
- * Extracts the value from a KTReactive, or returns the value directly if it's not reactive.
- */
+
+const toReactive = value => isKT(value) ? value : ref(value);
+
 function dereactive(value) {
     return isKT(value) ? value.value : value;
 }
 
 function applyKModel(element, valueRef) {
-    if (!isKT(valueRef)) {
-        throw new Error('[@ktjs/core error] k-model value must be a KTRef.');
-    }
-    if (element.tagName === 'INPUT') {
-        if (element.type === 'radio' || element.type === 'checkbox') {
-            $applyModel(element, valueRef, 'checked', 'change');
-            return;
-        }
-        if (element.type === 'number') {
-            $applyModel(element, valueRef, 'checked', 'change', Number);
-            return;
-        }
-        if (element.type === 'date') {
-            $applyModel(element, valueRef, 'checked', 'change', (v) => new Date(v));
-            return;
-        }
-        $applyModel(element, valueRef, 'value', 'input');
-    }
-    else if (element.tagName === 'SELECT') {
-        $applyModel(element, valueRef, 'value', 'change');
-    }
-    else if (element.tagName === 'TEXTAREA') {
-        $applyModel(element, valueRef, 'value', 'input');
-    }
-    else {
-        console.warn('[@ktjs/core warn]','not supported element for k-model:');
-    }
+    if (!isKT(valueRef)) throw new Error("[@ktjs/core error] k-model value must be a KTRef.");
+    if ("INPUT" === element.tagName) {
+        if ("radio" === element.type || "checkbox" === element.type) return void $applyModel(element, valueRef, "checked", "change");
+        if ("number" === element.type) return void $applyModel(element, valueRef, "checked", "change", Number);
+        if ("date" === element.type) return void $applyModel(element, valueRef, "checked", "change", v => new Date(v));
+        $applyModel(element, valueRef, "value", "input");
+    } else "SELECT" === element.tagName ? $applyModel(element, valueRef, "value", "change") : "TEXTAREA" === element.tagName ? $applyModel(element, valueRef, "value", "input") : console.warn("[@ktjs/core warn]", "not supported element for k-model:");
 }
 
 /**
@@ -838,473 +255,228 @@ function applyKModel(element, valueRef) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.32.5 (Last Update: 2026.03.19 20:31:46.571)
+ * @version 0.33.1 (Last Update: 2026.03.21 23:05:09.100)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
- */
-const h = (tag, attr, content) => {
-    if (typeof tag !== 'string') {
-        throw new Error('[@ktjs/core error] tagName must be a string.');
-    }
-    // * start creating the element
+ */ const h = (tag, attr, content) => {
+    if ("string" != typeof tag) throw new Error("[@ktjs/core error] tagName must be a string.");
     const element = document.createElement(tag);
-    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
-        applyKModel(element, attr['k-model']);
-    }
-    // * Handle content
-    applyAttr(element, attr);
-    applyContent(element, content);
-    return element;
-};
-const svg$1 = (tag, attr, content) => {
-    if (typeof tag !== 'string') {
-        throw new Error('[@ktjs/core error] tagName must be a string.');
-    }
-    // * start creating the element
-    const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-    // * Handle content
-    applyAttr(element, attr);
-    applyContent(element, content);
-    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
-        applyKModel(element, attr['k-model']);
-    }
-    return element;
-};
-const mathml$1 = (tag, attr, content) => {
-    if (typeof tag !== 'string') {
-        throw new Error('[@ktjs/core error] tagName must be a string.');
-    }
-    // * start creating the element
-    const element = document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
-    // * Handle content
-    applyAttr(element, attr);
-    applyContent(element, content);
-    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
-        applyKModel(element, attr['k-model']);
-    }
-    return element;
+    return "object" == typeof attr && null !== attr && "k-model" in attr && applyKModel(element, attr["k-model"]), 
+    applyAttr(element, attr), applyContent(element, content), element;
+}, svg$1 = (tag, attr, content) => {
+    if ("string" != typeof tag) throw new Error("[@ktjs/core error] tagName must be a string.");
+    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    return applyAttr(element, attr), applyContent(element, content), "object" == typeof attr && null !== attr && "k-model" in attr && applyKModel(element, attr["k-model"]), 
+    element;
+}, mathml$1 = (tag, attr, content) => {
+    if ("string" != typeof tag) throw new Error("[@ktjs/core error] tagName must be a string.");
+    const element = document.createElementNS("http://www.w3.org/1998/Math/MathML", tag);
+    return applyAttr(element, attr), applyContent(element, content), "object" == typeof attr && null !== attr && "k-model" in attr && applyKModel(element, attr["k-model"]), 
+    element;
 };
 
-const FRAGMENT_MOUNT_PATCHED = '__kt_fragment_mount_patched__';
-const FRAGMENT_MOUNT = '__kt_fragment_mount__';
-if (typeof Node !== 'undefined' && !globalThis[FRAGMENT_MOUNT_PATCHED]) {
-    globalThis[FRAGMENT_MOUNT_PATCHED] = true;
+if ("undefined" != typeof Node && !globalThis.__kt_fragment_mount_patched__) {
+    globalThis.__kt_fragment_mount_patched__ = !0;
     const originAppendChild = Node.prototype.appendChild;
-    Node.prototype.appendChild = function (node) {
-        const result = originAppendChild.call(this, node);
-        const mount = node[FRAGMENT_MOUNT];
-        if (typeof mount === 'function') {
-            mount();
-        }
-        return result;
+    Node.prototype.appendChild = function(node) {
+        const result = originAppendChild.call(this, node), mount = node.__kt_fragment_mount__;
+        return "function" == typeof mount && mount(), result;
     };
     const originInsertBefore = Node.prototype.insertBefore;
-    Node.prototype.insertBefore = function (node, child) {
-        const result = originInsertBefore.call(this, node, child);
-        const mount = node[FRAGMENT_MOUNT];
-        if (typeof mount === 'function') {
-            mount();
-        }
-        return result;
+    Node.prototype.insertBefore = function(node, child) {
+        const result = originInsertBefore.call(this, node, child), mount = node.__kt_fragment_mount__;
+        return "function" == typeof mount && mount(), result;
     };
 }
-/**
- * Fragment - Container component for managing arrays of child elements
- *
- * Features:
- * 1. Returns a comment anchor node, child elements are inserted after the anchor
- * 2. Supports reactive arrays, automatically updates DOM when array changes
- * 3. Basic version uses simple replacement algorithm (remove all old elements, insert all new elements)
- * 4. Future enhancement: key-based optimization
- *
- * Usage example:
- * ```tsx
- * const children = ref([<div>A</div>, <div>B</div>]);
- * const fragment = <Fragment children={children} />;
- * document.body.appendChild(fragment);
- *
- * // Automatic update
- * children.value = [<div>C</div>, <div>D</div>];
- * ```
- */
-function Fragment$1(props) {
-    const elements = [];
-    const anchor = document.createComment('kt-fragment');
-    let inserted = false;
-    let observer;
-    const redraw = () => {
-        const newElements = childrenRef.value;
-        const parent = anchor.parentNode;
-        if (!parent) {
-            elements.length = 0;
-            for (let i = 0; i < newElements.length; i++) {
-                elements.push(newElements[i]);
-            }
-            anchor.__kt_fragment_list__ = elements;
-            return;
-        }
-        for (let i = 0; i < elements.length; i++) {
-            elements[i].remove();
-        }
-        const fragment = document.createDocumentFragment();
-        elements.length = 0;
-        for (let i = 0; i < newElements.length; i++) {
-            const element = newElements[i];
-            elements.push(element);
-            fragment.appendChild(element);
-        }
-        parent.insertBefore(fragment, anchor.nextSibling);
-        inserted = true;
-        delete anchor[FRAGMENT_MOUNT];
-        observer?.disconnect();
-        observer = undefined;
-        anchor.__kt_fragment_list__ = elements;
-    };
-    const childrenRef = toReactive(props.children, redraw);
-    const renderInitial = () => {
-        const current = childrenRef.value;
-        elements.length = 0;
-        const fragment = document.createDocumentFragment();
-        for (let i = 0; i < current.length; i++) {
-            const element = current[i];
-            elements.push(element);
-            fragment.appendChild(element);
-        }
-        anchor.__kt_fragment_list__ = elements;
-        const parent = anchor.parentNode;
-        if (parent && !inserted) {
-            parent.insertBefore(fragment, anchor.nextSibling);
-            inserted = true;
-        }
-    };
-    renderInitial();
-    anchor[FRAGMENT_MOUNT] = () => {
-        if (!inserted && anchor.parentNode) {
-            redraw();
-        }
-    };
-    observer = new MutationObserver(() => {
-        if (anchor.parentNode && !inserted) {
-            redraw();
-            observer?.disconnect();
-            observer = undefined;
-        }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-    $initRef(props, anchor);
-    return anchor;
-}
-/**
- * Convert KTRawContent to HTMLElement array
- */
-function convertChildrenToElements(children) {
-    const elements = [];
-    const processChild = (child) => {
-        if (child === undefined || child === null || child === false || child === true) {
-            // Ignore null, undefined, false, true
-            return;
-        }
-        if ($isArray(child)) {
-            // Recursively process array
-            $forEach(child, processChild);
-            return;
-        }
-        if (typeof child === 'string' || typeof child === 'number') {
-            const span = document.createElement('span');
-            span.textContent = String(child);
-            elements.push(span);
-            return;
-        }
-        if (child instanceof HTMLElement) {
-            elements.push(child);
-            return;
-        }
-        if (isKT(child)) {
-            processChild(child.value);
-            return;
-        }
-        console.warn('Fragment: unsupported child type', child);
-    };
-    processChild(children);
-    return elements;
-}
 
-const jsxh = (tag, props) => (typeof tag === 'function' ? tag(props) : h(tag, props, props.children));
-const placeholder = (data) => document.createComment(data);
+const jsxh = (tag, props) => "function" == typeof tag ? tag(props) : h(tag, props, props.children), placeholder = data => document.createComment(data);
 
 function create(creator, tag, props) {
-    if (props.ref && isComputed(props.ref)) {
-        throw new Error('[@ktjs/core error] Cannot assign a computed value to an element.');
-    }
+    if (props.ref && isComputed(props.ref)) throw new Error("[@ktjs/core error] Cannot assign a computed value to an element.");
     const el = creator(tag, props, props.children);
-    $initRef(props, el);
-    return el;
+    return $initRef(props, el), el;
 }
-const jsx = (tag, props) => create(jsxh, tag, props);
-const svg = (tag, props) => create(svg$1, tag, props);
-const mathml = (tag, props) => create(mathml$1, tag, props);
-/**
- * Fragment support - returns an array of children
- * Enhanced Fragment component that manages arrays of elements
- */
+
+const jsx = (tag, props) => create(jsxh, tag, props), svg = (tag, props) => create(svg$1, tag, props), mathml = (tag, props) => create(mathml$1, tag, props);
+
 function Fragment(props) {
-    const { children } = props ?? {};
-    if (!children) {
-        return placeholder('kt-fragment-empty');
-    }
-    const elements = convertChildrenToElements(children);
-    return Fragment$1({ children: elements });
+    const {children: children} = props ?? {};
+    if (!children) return placeholder("kt-fragment-empty");
+    const elements = function(children) {
+        const elements = [], processChild = child => {
+            if (null != child && !1 !== child && !0 !== child) if ($isArray(child)) $forEach(child, processChild); else {
+                if ("string" == typeof child || "number" == typeof child) {
+                    const span = document.createElement("span");
+                    return span.textContent = String(child), void elements.push(span);
+                }
+                if (child instanceof HTMLElement) elements.push(child); else {
+                    if (!isKT(child)) throw console.warn("[@ktjs/core warn]", "Fragment: unsupported child type", child), 
+                    new Error("Fragment: unsupported child type");
+                    processChild(child.value);
+                }
+            }
+        };
+        return processChild(children), elements;
+    }(children);
+    return function(props) {
+        const elements = [], anchor = document.createComment("kt-fragment");
+        let observer, inserted = !1;
+        const redraw = () => {
+            const newElements = childrenRef.value, parent = anchor.parentNode;
+            if (!parent) {
+                elements.length = 0;
+                for (let i = 0; i < newElements.length; i++) elements.push(newElements[i]);
+                return void (anchor.__kt_fragment_list__ = elements);
+            }
+            for (let i = 0; i < elements.length; i++) elements[i].remove();
+            const fragment = document.createDocumentFragment();
+            elements.length = 0;
+            for (let i = 0; i < newElements.length; i++) {
+                const element = newElements[i];
+                elements.push(element), fragment.appendChild(element);
+            }
+            parent.insertBefore(fragment, anchor.nextSibling), inserted = !0, delete anchor.__kt_fragment_mount__, 
+            observer?.disconnect(), observer = void 0, anchor.__kt_fragment_list__ = elements;
+        }, childrenRef = toReactive(props.children).addOnChange(redraw);
+        return (() => {
+            const current = childrenRef.value;
+            elements.length = 0;
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < current.length; i++) {
+                const element = current[i];
+                elements.push(element), fragment.appendChild(element);
+            }
+            anchor.__kt_fragment_list__ = elements;
+            const parent = anchor.parentNode;
+            parent && !inserted && (parent.insertBefore(fragment, anchor.nextSibling), inserted = !0);
+        })(), anchor.__kt_fragment_mount__ = () => {
+            !inserted && anchor.parentNode && redraw();
+        }, observer = new MutationObserver(() => {
+            anchor.parentNode && !inserted && (redraw(), observer?.disconnect(), observer = void 0);
+        }), observer.observe(document.body, {
+            childList: !0,
+            subtree: !0
+        }), $initRef(props, anchor), anchor;
+    }({
+        children: elements
+    });
 }
-/**
- * JSX Development runtime - same as jsx but with additional dev checks
- */
-const jsxDEV = (...args) => {
-    // console.log('JSX DEV called:', ...args);
-    // console.log('children', (args[1] as any)?.children);
-    return jsx(...args);
-};
-/**
- * JSX runtime for React 17+ automatic runtime
- * This is called when using jsx: "react-jsx" or "react-jsxdev"
- */
-const jsxs = jsx;
+
+const jsxDEV = (...args) => jsx(...args), jsxs = jsx;
 
 function KTAsync(props) {
     const raw = props.component(props);
-    let comp = props.skeleton ?? document.createComment('ktjs-suspense-placeholder');
-    if ($isThenable(raw)) {
-        raw.then((resolved) => comp.replaceWith(resolved));
-    }
-    else {
-        comp = raw;
-    }
-    return comp;
+    let comp = props.skeleton ?? document.createComment("ktjs-suspense-placeholder");
+    return $isThenable(raw) ? raw.then(resolved => comp.replaceWith(resolved)) : comp = raw, 
+    comp;
 }
 
-// todo 对于template标签的for和if，会编译为fragment，可特殊处理，让它们保持原样
-/**
- * KTFor - List rendering component with key-based optimization
- * Returns a Comment anchor node with rendered elements in __kt_for_list__
- */
 function KTFor(props) {
-    const redraw = () => {
-        const newList = listRef.value;
-        const parent = anchor.parentNode;
+    const {key: currentKey = item => item, map: currentMap = $identity} = props, listRef = toReactive(props.list).addOnChange(() => {
+        const newList = listRef.value, parent = anchor.parentNode;
         if (!parent) {
-            // If not in DOM yet, just rebuild the list
             const newElements = [];
             nodeMap.clear();
             for (let index = 0; index < newList.length; index++) {
-                const item = newList[index];
-                const itemKey = currentKey(item, index, newList);
-                const node = currentMap(item, index, newList);
-                nodeMap.set(itemKey, node);
-                newElements.push(node);
+                const item = newList[index], itemKey = currentKey(item, index, newList), node = currentMap(item, index, newList);
+                nodeMap.set(itemKey, node), newElements.push(node);
             }
-            anchor.__kt_for_list__ = newElements;
-            return anchor;
+            return anchor.__kt_for_list__ = newElements, anchor;
         }
-        const oldLength = anchor.__kt_for_list__.length;
-        const newLength = newList.length;
-        // Fast path: empty list
-        if (newLength === 0) {
-            nodeMap.forEach((node) => node.remove());
-            nodeMap.clear();
-            anchor.__kt_for_list__ = [];
-            return anchor;
-        }
-        // Fast path: all new items
-        if (oldLength === 0) {
-            const newElements = [];
-            const fragment = document.createDocumentFragment();
+        const oldLength = anchor.__kt_for_list__.length, newLength = newList.length;
+        if (0 === newLength) return nodeMap.forEach(node => node.remove()), nodeMap.clear(), 
+        anchor.__kt_for_list__ = [], anchor;
+        if (0 === oldLength) {
+            const newElements = [], fragment = document.createDocumentFragment();
             for (let i = 0; i < newLength; i++) {
-                const item = newList[i];
-                const itemKey = currentKey(item, i, newList);
-                const node = currentMap(item, i, newList);
-                nodeMap.set(itemKey, node);
-                newElements.push(node);
-                fragment.appendChild(node);
+                const item = newList[i], itemKey = currentKey(item, i, newList), node = currentMap(item, i, newList);
+                nodeMap.set(itemKey, node), newElements.push(node), fragment.appendChild(node);
             }
-            parent.insertBefore(fragment, anchor.nextSibling);
-            anchor.__kt_for_list__ = newElements;
-            return anchor;
+            return parent.insertBefore(fragment, anchor.nextSibling), anchor.__kt_for_list__ = newElements, 
+            anchor;
         }
-        // Build key index map and new elements array in one pass
-        const newKeyToNewIndex = new Map();
-        const newElements = new Array(newLength);
-        let maxNewIndexSoFar = 0;
-        let moved = false;
+        const newKeyToNewIndex = new Map, newElements = new Array(newLength);
+        let maxNewIndexSoFar = 0, moved = !1;
         for (let i = 0; i < newLength; i++) {
-            const item = newList[i];
-            const itemKey = currentKey(item, i, newList);
-            newKeyToNewIndex.set(itemKey, i);
-            if (nodeMap.has(itemKey)) {
-                // Reuse existing node
+            const item = newList[i], itemKey = currentKey(item, i, newList);
+            if (newKeyToNewIndex.set(itemKey, i), nodeMap.has(itemKey)) {
                 const node = nodeMap.get(itemKey);
-                newElements[i] = node;
-                // Track if items moved
-                if (i < maxNewIndexSoFar) {
-                    moved = true;
-                }
-                else {
-                    maxNewIndexSoFar = i;
-                }
-            }
-            else {
-                // Create new node
-                newElements[i] = currentMap(item, i, newList);
-            }
+                newElements[i] = node, i < maxNewIndexSoFar ? moved = !0 : maxNewIndexSoFar = i;
+            } else newElements[i] = currentMap(item, i, newList);
         }
-        // Remove nodes not in new list
         const toRemove = [];
         nodeMap.forEach((node, key) => {
-            if (!newKeyToNewIndex.has(key)) {
-                toRemove.push(node);
-            }
+            newKeyToNewIndex.has(key) || toRemove.push(node);
         });
-        for (let i = 0; i < toRemove.length; i++) {
-            toRemove[i].remove();
-        }
-        // Update DOM with minimal operations
+        for (let i = 0; i < toRemove.length; i++) toRemove[i].remove();
         if (moved) {
-            // Use longest increasing subsequence to minimize moves
-            const seq = getSequence(newElements.map((el, i) => (nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1)));
-            let j = seq.length - 1;
-            let anchor = null;
-            // Traverse from end to start for stable insertions
-            for (let i = newLength - 1; i >= 0; i--) {
-                const node = newElements[i];
-                if (j < 0 || i !== seq[j]) {
-                    // Node needs to be moved or inserted
-                    if (anchor) {
-                        parent.insertBefore(node, anchor);
+            const seq = function(arr) {
+                const p = arr.slice(), result = [ 0 ];
+                let i, j, u, v, c;
+                const len = arr.length;
+                for (i = 0; i < len; i++) {
+                    const arrI = arr[i];
+                    if (-1 !== arrI) if (j = result[result.length - 1], arr[j] < arrI) p[i] = j, result.push(i); else {
+                        for (u = 0, v = result.length - 1; u < v; ) c = (u + v) / 2 | 0, arr[result[c]] < arrI ? u = c + 1 : v = c;
+                        arrI < arr[result[u]] && (u > 0 && (p[i] = result[u - 1]), result[u] = i);
                     }
-                    else {
-                        // Insert at end
-                        let nextSibling = anchor.nextSibling;
-                        let temp = nextSibling;
-                        while (temp && newElements.includes(temp)) {
-                            temp = temp.nextSibling;
-                        }
-                        parent.insertBefore(node, temp);
-                    }
-                }
-                else {
-                    j--;
                 }
+                u = result.length, v = result[u - 1];
+                for (;u-- > 0; ) result[u] = v, v = p[v];
+                return result;
+            }(newElements.map((el, i) => nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1));
+            let j = seq.length - 1, anchor = null;
+            for (let i = newLength - 1; i >= 0; i--) {
+                const node = newElements[i];
+                if (j < 0 || i !== seq[j]) if (anchor) parent.insertBefore(node, anchor); else {
+                    let temp = anchor.nextSibling;
+                    for (;temp && newElements.includes(temp); ) temp = temp.nextSibling;
+                    parent.insertBefore(node, temp);
+                } else j--;
                 anchor = node;
             }
-        }
-        else {
-            // No moves needed, just insert new nodes
+        } else {
             let currentNode = anchor.nextSibling;
             for (let i = 0; i < newLength; i++) {
                 const node = newElements[i];
-                if (currentNode !== node) {
-                    parent.insertBefore(node, currentNode);
-                }
-                else {
-                    currentNode = currentNode.nextSibling;
-                }
+                currentNode !== node ? parent.insertBefore(node, currentNode) : currentNode = currentNode.nextSibling;
             }
         }
-        // Update maps
         nodeMap.clear();
         for (let i = 0; i < newLength; i++) {
             const itemKey = currentKey(newList[i], i, newList);
             nodeMap.set(itemKey, newElements[i]);
         }
-        anchor.__kt_for_list__ = newElements;
-        return anchor;
-    };
-    const { key: currentKey = (item) => item, map: currentMap = $identity } = props;
-    const listRef = toReactive(props.list, redraw);
-    const anchor = document.createComment('kt-for');
-    // Map to track rendered nodes by key
-    const nodeMap = new Map();
-    // Render initial list
-    const elements = [];
+        return anchor.__kt_for_list__ = newElements, anchor;
+    }), anchor = document.createComment("kt-for"), nodeMap = new Map, elements = [];
     for (let index = 0; index < listRef.value.length; index++) {
-        const item = listRef.value[index];
-        const itemKey = currentKey(item, index, listRef.value);
-        const node = currentMap(item, index, listRef.value);
-        nodeMap.set(itemKey, node);
-        elements.push(node);
-    }
-    anchor.__kt_for_list__ = elements;
-    $initRef(props, anchor);
-    return anchor;
-}
-// Longest Increasing Subsequence algorithm (optimized for diff)
-function getSequence(arr) {
-    const p = arr.slice();
-    const result = [0];
-    let i, j, u, v, c;
-    const len = arr.length;
-    for (i = 0; i < len; i++) {
-        const arrI = arr[i];
-        if (arrI === -1)
-            continue;
-        j = result[result.length - 1];
-        if (arr[j] < arrI) {
-            p[i] = j;
-            result.push(i);
-            continue;
-        }
-        u = 0;
-        v = result.length - 1;
-        while (u < v) {
-            c = ((u + v) / 2) | 0;
-            if (arr[result[c]] < arrI) {
-                u = c + 1;
-            }
-            else {
-                v = c;
-            }
-        }
-        if (arrI < arr[result[u]]) {
-            if (u > 0) {
-                p[i] = result[u - 1];
-            }
-            result[u] = i;
-        }
+        const item = listRef.value[index], itemKey = currentKey(item, index, listRef.value), node = currentMap(item, index, listRef.value);
+        nodeMap.set(itemKey, node), elements.push(node);
     }
-    u = result.length;
-    v = result[u - 1];
-    while (u-- > 0) {
-        result[u] = v;
-        v = p[v];
-    }
-    return result;
+    return anchor.__kt_for_list__ = elements, $initRef(props, anchor), anchor;
 }
 
 function KTConditional(condition, tagIf, propsIf, tagElse, propsElse) {
-    if (!isKT(condition)) {
-        return condition ? jsxh(tagIf, propsIf) : tagElse ? jsxh(tagElse, propsElse) : placeholder('kt-conditional');
-    }
+    if (!isKT(condition)) return condition ? jsxh(tagIf, propsIf) : tagElse ? jsxh(tagElse, propsElse) : placeholder("kt-conditional");
     if (tagElse) {
         let current = condition.value ? jsxh(tagIf, propsIf) : jsxh(tagElse, propsElse);
-        condition.addOnChange((newValue) => {
+        return condition.addOnChange(newValue => {
             const old = current;
-            current = newValue ? jsxh(tagIf, propsIf) : jsxh(tagElse, propsElse);
-            old.replaceWith(current);
-        });
-        return current;
+            current = newValue ? jsxh(tagIf, propsIf) : jsxh(tagElse, propsElse), old.replaceWith(current);
+        }), current;
     }
-    else {
-        const dummy = placeholder('kt-conditional');
+    {
+        const dummy = placeholder("kt-conditional");
         let current = condition.value ? jsxh(tagIf, propsIf) : dummy;
-        condition.addOnChange((newValue) => {
+        return condition.addOnChange(newValue => {
             const old = current;
-            current = newValue ? jsxh(tagIf, propsIf) : dummy;
-            old.replaceWith(current);
-        });
-        return current;
+            current = newValue ? jsxh(tagIf, propsIf) : dummy, old.replaceWith(current);
+        }), current;
     }
 }
 
-export { $initRef, $modelOrRef, Fragment, KTArrayRef, KTAsync, KTComputed, KTConditional, KTDateRef, KTFor, KTMapRef, KTSetRef, KTWeakMapRef, KTWeakSetRef, applyAttr, autoRef, computed, h as createElement, mathml$1 as createMathMLElement, svg$1 as createSVGElement, dereactive, effect, h, isArrayRef, isComputed, isDateRef, isKT, isMapRef, isRef, isSetRef, isWeakMapRef, isWeakSetRef, jsx, jsxDEV, jsxs, mathml, mathml as mathmlRuntime, ref, svg, svg as svgRuntime, toReactive };
+export { $initRef, $modelOrRef, Fragment, KTAsync, KTComputed, KTConditional, KTFor, KTRef, applyAttr, computed, h as createElement, mathml$1 as createMathMLElement, svg$1 as createSVGElement, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, mathml, mathml as mathmlRuntime, ref, svg, svg as svgRuntime, toReactive };
 //# sourceMappingURL=index.mjs.map