@ktjs/core 0.28.2 → 0.29.0

package/dist/index.mjs

@@ -1,1115 +1,918 @@
-// Cached native methods for performance optimization
-const $isArray = Array.isArray;
-const $is = Object.is;
-const $entries = Object.entries;
-const $random = Math.random;
-const $isThenable = (o) => typeof o?.then === 'function';
-
-if (typeof Symbol === 'undefined') {
-    window.Symbol = function Symbol(description) {
-        return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
-    };
-}
-
-// Shared constants
-// Empty for now - can be extended with framework-wide constants
-/**
- * Mark the attribute as SVG to handle special cases during rendering.
- */
-const SVG_ATTR_FLAG = '__kt_svg__';
-/**
- * Mark the attribute as MathML to handle special cases during rendering.
- */
-const MATHML_ATTR_FLAG = '__kt_mathml__';
-
-// DOM manipulation utilities
-// # dom natives
-const $isNode = (x) => x?.nodeType > 0;
-/**
- * Safe replace `oldNode` With `newNode`
- */
-const $replaceNode = (oldNode, newNode) => {
-    if ($isNode(oldNode) && $isNode(newNode)) {
-        if (newNode.contains(oldNode)) {
-            newNode.remove();
-        }
-        oldNode.replaceWith(newNode);
-    }
-};
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? originAppend
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-/**
- * Used for `k-model`
- */
-const $applyModel = (element, valueRef, propName, eventName) => {
-    element[propName] = valueRef.value; // initialize
-    valueRef.addOnChange((newValue) => (element[propName] = newValue));
-    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
-};
-
-// String manipulation utilities
-/**
- * Default empty function
- */
-const $emptyFn = (() => true);
-/**
- * Safe and quick forEach implementation that works with array-like objects and handles sparse arrays.
- */
-const $forEach = (array, callback) => {
-    const len = array.length;
-    for (let i = 0; i < len; i++) {
-        callback(array[i], i, array);
-    }
-};
-
-// incase that symbol is not supported
-Object.defineProperty(window, '__ktjs__', { value: '0.23.11' });
+import { $isArray, $isThenable, $append, $isNode, $emptyFn, $is, $replaceNode, $entries, $applyModel, $forEach } from '@ktjs/shared';
 
+var KTReactiveType = /* @__PURE__ */ ((KTReactiveType2) => {
+  KTReactiveType2[KTReactiveType2["REF"] = 1] = "REF";
+  KTReactiveType2[KTReactiveType2["COMPUTED"] = 2] = "COMPUTED";
+  return KTReactiveType2;
+})(KTReactiveType || {});
 const isKT = (obj) => obj?.isKT;
-const isRef = (obj) => obj?.ktType === 1 /* KTReactiveType.REF */;
-const isComputed = (obj) => obj?.ktType === 2 /* KTReactiveType.COMPUTED */;
+const isRef = (obj) => obj?.ktType === 1 /* REF */;
+const isComputed = (obj) => obj?.ktType === 2 /* COMPUTED */;
 
 const booleanHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = !!value;
-    }
-    else {
-        element.setAttribute(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);
-    }
+  if (key in element) {
+    element[key] = value;
+  } else {
+    element.setAttribute(key, value);
+  }
 };
-// Attribute handlers map for optimized lookup
 const handlers = {
-    checked: booleanHandler,
-    selected: booleanHandler,
-    value: valueHandler,
-    valueAsDate: valueHandler,
-    valueAsNumber: valueHandler,
-    defaultValue: valueHandler,
-    defaultChecked: booleanHandler,
-    defaultSelected: booleanHandler,
-    disabled: booleanHandler,
-    readOnly: booleanHandler,
-    multiple: booleanHandler,
-    required: booleanHandler,
-    autofocus: booleanHandler,
-    open: booleanHandler,
-    controls: booleanHandler,
-    autoplay: booleanHandler,
-    loop: booleanHandler,
-    muted: booleanHandler,
-    defer: booleanHandler,
-    async: booleanHandler,
-    hidden: (element, _key, value) => (element.hidden = !!value),
+  checked: booleanHandler,
+  selected: booleanHandler,
+  value: valueHandler,
+  valueAsDate: valueHandler,
+  valueAsNumber: valueHandler,
+  defaultValue: valueHandler,
+  defaultChecked: booleanHandler,
+  defaultSelected: booleanHandler,
+  disabled: booleanHandler,
+  readOnly: booleanHandler,
+  multiple: booleanHandler,
+  required: booleanHandler,
+  autofocus: booleanHandler,
+  open: booleanHandler,
+  controls: booleanHandler,
+  autoplay: booleanHandler,
+  loop: booleanHandler,
+  muted: booleanHandler,
+  defer: booleanHandler,
+  async: booleanHandler,
+  hidden: (element, _key, value) => element.hidden = !!value
 };
 
 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];
-    }
+  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);
-            }
-        }
-    }
-    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) {
-        if (key === 'k-if' ||
-            key === 'k-model' ||
-            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:')) {
-            element.addEventListener(key.slice(3), o); // chop off the `on:`
-        }
-        // normal attributes
-        else {
-            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);
-            }
-        }
-    }
+  const classValue = attr.class || attr.className;
+  if (classValue !== void 0) {
+    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);
+      }
+    }
+  }
+  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) {
+    if (key === "k-if" || key === "k-model" || key === "ref" || key === "class" || key === "className" || key === "style" || key === "children" || key === "k-html") {
+      continue;
+    }
+    const o = attr[key];
+    if (key.startsWith("on:")) {
+      element.addEventListener(key.slice(3), o);
+    } else {
+      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('[kt.js error] attr must be an object.');
-    }
+  if (!attr) {
+    return;
+  }
+  if (typeof attr === "object" && attr !== null) {
+    attrIsObject(element, attr);
+  } else {
+    throw new Error("[@ktjs/core error] attr must be an object.");
+  }
 }
 
-const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
+const assureNode = (o) => $isNode(o) ? o : document.createTextNode(o);
 function apdSingle(element, c) {
-    // & JSX should ignore false, undefined, and null
-    if (c === false || c === undefined || c === null) {
+  if (c === false || c === void 0 || c === null) {
+    return;
+  }
+  if (isKT(c)) {
+    let node = assureNode(c.value);
+    $append.call(element, node);
+    c.addOnChange((newValue, oldValue) => {
+      if ($isNode(newValue) && $isNode(oldValue)) {
         return;
+      }
+      const oldNode = node;
+      node = assureNode(newValue);
+      oldNode.replaceWith(node);
+    });
+  } else {
+    $append.call(element, c);
+    const list = c.__kt_for_list__;
+    if ($isArray(list)) {
+      apd(element, list);
     }
-    if (isKT(c)) {
-        let node = assureNode(c.value);
-        $append.call(element, node);
-        c.addOnChange((newValue, oldValue) => {
-            if ($isNode(newValue) && $isNode(oldValue)) {
-                // & this case is handled automically in `class KTRef`
-                return;
-            }
-            const oldNode = node;
-            node = assureNode(newValue);
-            oldNode.replaceWith(node);
-        });
-    }
-    else {
-        $append.call(element, c);
-        // Handle KTFor anchor
-        // todo Maybe not needed anymore
-        const list = c.__kt_for_list__;
-        if ($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');
-                $append.call(element, 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");
+        $append.call(element, 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);
+  }
 }
 
 class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    ktType = 1 /* KTReactiveType.REF */;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    /**
-     * @internal
-     */
-    _emit(newValue, oldValue) {
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    constructor(_value, _onChanges) {
-        this._value = _value;
-        this._onChanges = _onChanges;
-    }
-    /**
-     * 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;
-        $replaceNode(oldValue, newValue);
-        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.
-     */
-    notify() {
-        this._emit(this._value, this._value);
-    }
-    /**
-     * Mutate current value in-place and notify listeners once.
-     *
-     * @example
-     * const items = ref<number[]>([1, 2]);
-     * items.mutate((list) => list.push(3));
-     */
-    mutate(mutator) {
-        if (typeof mutator !== 'function') {
-            throw new Error('[kt.js error] KTRef.mutate: mutator must be a function');
-        }
-        const oldValue = this._value;
-        const result = mutator(this._value);
-        this._emit(this._value, oldValue);
-        return result;
-    }
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
-        }
-        this._onChanges.push(callback);
-    }
-    removeOnChange(callback) {
-        for (let i = this._onChanges.length - 1; i >= 0; i--) {
-            if (this._onChanges[i] === callback) {
-                this._onChanges.splice(i, 1);
-                return true;
-            }
-        }
-        return false;
-    }
+  /**
+   * Indicates that this is a KTRef instance
+   */
+  isKT = true;
+  ktType = KTReactiveType.REF;
+  /**
+   * @internal
+   */
+  _value;
+  /**
+   * @internal
+   */
+  _onChanges;
+  /**
+   * @internal
+   */
+  _emit(newValue, oldValue) {
+    for (let i = 0; i < this._onChanges.length; i++) {
+      this._onChanges[i](newValue, oldValue);
+    }
+  }
+  constructor(_value, _onChanges) {
+    this._value = _value;
+    this._onChanges = _onChanges;
+  }
+  /**
+   * 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;
+    $replaceNode(oldValue, newValue);
+    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.
+   */
+  notify() {
+    this._emit(this._value, this._value);
+  }
+  /**
+   * Mutate current value in-place and notify listeners once.
+   *
+   * @example
+   * const items = ref<number[]>([1, 2]);
+   * items.mutate((list) => list.push(3));
+   */
+  mutate(mutator) {
+    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);
+    return result;
+  }
+  /**
+   * Register a callback when the value changes
+   * @param callback (newValue, oldValue) => xxx
+   */
+  addOnChange(callback) {
+    if (typeof callback !== "function") {
+      throw new Error("[@ktjs/core error] KTRef.addOnChange: callback must be a function");
+    }
+    this._onChanges.push(callback);
+  }
+  removeOnChange(callback) {
+    for (let i = this._onChanges.length - 1; i >= 0; i--) {
+      if (this._onChanges[i] === callback) {
+        this._onChanges.splice(i, 1);
+        return true;
+      }
+    }
+    return false;
+  }
 }
-/**
- * Reference to the created HTML element.
- * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
- * - can alse be used to store normal values, but it is not reactive.
- * - if the value is already a `KTRef`, it will be returned **directly**.
- * @param value mostly an HTMLElement
- */
 function ref(value, onChange) {
-    return new KTRef(value, onChange ? [onChange] : []);
+  return new KTRef(value, onChange ? [onChange] : []);
 }
-/**
- * Convert a value to `KTRef`.
- * - Returns the original value if it is already a `KTRef`.
- * - Throws error if the value is a `KTComputed`.
- * - Otherwise wraps the value with `ref()`.
- * @param o value to convert
- */
 const toRef = (o) => {
-    if (isRef(o)) {
-        return o;
-    }
-    else if (isComputed(o)) {
-        throw new Error('[kt.js error] Computed values cannot be used as KTRef.');
-    }
-    else {
-        return ref(o);
-    }
+  if (isRef(o)) {
+    return o;
+  } else if (isComputed(o)) {
+    throw new Error("[@ktjs/core error] Computed values cannot be used as KTRef.");
+  } else {
+    return ref(o);
+  }
 };
 function kcollect() {
-    const newObj = {};
-    const entries = $entries(this);
-    for (let i = 0; i < entries.length; i++) {
-        const key = entries[i][0];
-        if (key === 'kcollect') {
-            continue;
-        }
-        newObj[key] = entries[i][1].value;
-    }
-    return newObj;
+  const newObj = {};
+  const entries = $entries(this);
+  for (let i = 0; i < entries.length; i++) {
+    const key = entries[i][0];
+    if (key === "kcollect") {
+      continue;
+    }
+    newObj[key] = entries[i][1].value;
+  }
+  return newObj;
 }
-/**
- * Make all first-level properties of the object a `KTRef`.
- * - `obj.a.b` is not reactive
- */
 const surfaceRef = (obj) => {
-    const entries = $entries(obj);
-    const newObj = { kcollect };
-    for (let i = 0; i < entries.length; i++) {
-        newObj[entries[i][0]] = ref(entries[i][1]);
-    }
-    return newObj;
+  const entries = $entries(obj);
+  const newObj = { kcollect };
+  for (let i = 0; i < entries.length; i++) {
+    newObj[entries[i][0]] = ref(entries[i][1]);
+  }
+  return newObj;
 };
-// # asserts
-/**
- * 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(`[kt.js error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
-        }
-    }
-    return ref(defaultValue);
+  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 $setRef = (props, node) => {
-    if ('ref' in props) {
-        const r = props.ref;
-        if (isRef(r)) {
-            r.value = node;
-        }
-        else {
-            throw new Error('[kt.js error] Fragment: ref must be a KTRef');
-        }
-    }
+const $refSetter = (props, node) => props.ref.value = node;
+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");
+  }
 };
 
 class KTComputed {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    ktType = 2 /* KTReactiveType.COMPUTED */;
-    /**
-     * @internal
-     */
-    _calculator;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges = [];
-    /**
-     * @internal
-     */
-    _emit(newValue, oldValue) {
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    /**
-     * @internal
-     */
-    _recalculate(forceEmit = false) {
-        const oldValue = this._value;
-        const newValue = this._calculator();
-        if (oldValue === newValue) {
-            if (forceEmit) {
-                this._emit(newValue, oldValue);
-            }
-            return;
-        }
-        this._value = newValue;
-        $replaceNode(oldValue, newValue);
+  /**
+   * Indicates that this is a KTRef instance
+   */
+  isKT = true;
+  ktType = KTReactiveType.COMPUTED;
+  /**
+   * @internal
+   */
+  _calculator;
+  /**
+   * @internal
+   */
+  _value;
+  /**
+   * @internal
+   */
+  _onChanges = [];
+  /**
+   * @internal
+   */
+  _emit(newValue, oldValue) {
+    for (let i = 0; i < this._onChanges.length; i++) {
+      this._onChanges[i](newValue, oldValue);
+    }
+  }
+  /**
+   * @internal
+   */
+  _recalculate(forceEmit = false) {
+    const oldValue = this._value;
+    const newValue = this._calculator();
+    if (oldValue === newValue) {
+      if (forceEmit) {
         this._emit(newValue, oldValue);
-    }
-    /**
-     * @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('[kt.js error] KTComputed: cannot set value of a computed value');
-    }
-    /**
-     * Force listeners to run once with the latest computed result.
-     */
-    notify() {
-        this._recalculate(true);
-    }
-    /**
-     * Computed values are derived from dependencies and should not be mutated manually.
-     */
-    mutate() {
-        console.warn('[kt.js warn]','KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead');
-        return this._value;
-    }
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
-        }
-        this._onChanges.push(callback);
-    }
-    /**
-     * Unregister a callback
-     * @param callback (newValue, oldValue) => xxx
-     */
-    removeOnChange(callback) {
-        for (let i = this._onChanges.length - 1; i >= 0; i--) {
-            if (this._onChanges[i] === callback) {
-                this._onChanges.splice(i, 1);
-                return true;
-            }
-        }
-        return false;
-    }
+      }
+      return;
+    }
+    this._value = newValue;
+    $replaceNode(oldValue, newValue);
+    this._emit(newValue, oldValue);
+  }
+  /**
+   * @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() {
+    this._recalculate(true);
+  }
+  /**
+   * Computed values are derived from dependencies and should not be mutated manually.
+   */
+  mutate() {
+    console.warn('[@ktjs/core warn]',"KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead");
+    return this._value;
+  }
+  /**
+   * Register a callback when the value changes
+   * @param callback (newValue, oldValue) => xxx
+   */
+  addOnChange(callback) {
+    if (typeof callback !== "function") {
+      throw new Error("[@ktjs/core error] KTRef.addOnChange: callback must be a function");
+    }
+    this._onChanges.push(callback);
+  }
+  /**
+   * Unregister a callback
+   * @param callback (newValue, oldValue) => xxx
+   */
+  removeOnChange(callback) {
+    for (let i = this._onChanges.length - 1; i >= 0; i--) {
+      if (this._onChanges[i] === callback) {
+        this._onChanges.splice(i, 1);
+        return true;
+      }
+    }
+    return false;
+  }
 }
-/**
- * Create a reactive computed value
- * @param computeFn
- * @param reactives refs and computeds that this computed depends on
- */
 function computed(computeFn, reactives) {
-    if (reactives.some((v) => !isKT(v))) {
-        throw new Error('[kt.js error] computed: all reactives must be KTRef or KTComputed instances');
-    }
-    return new KTComputed(computeFn, reactives);
+  if (reactives.some((v) => !isKT(v))) {
+    throw new Error("[@ktjs/core error] computed: all reactives must be KTRef or KTComputed instances");
+  }
+  return new KTComputed(computeFn, reactives);
 }
 
-/**
- * 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);
-    let active = true;
-    const run = () => {
-        if (!active) {
-            return;
-        }
-        // cleanup before rerun
-        onCleanup();
-        try {
-            effectFn();
-        }
-        catch (err) {
-            console.debug('[kt.js debug]','effect error:', debugName, err);
-        }
-    };
-    // subscribe to dependencies
+  const { lazy = false, onCleanup = $emptyFn, debugName = "" } = Object(options);
+  let active = true;
+  const run = () => {
+    if (!active) {
+      return;
+    }
+    onCleanup();
+    try {
+      effectFn();
+    } catch (err) {
+      console.debug('[@ktjs/core debug]',"effect error:", debugName, err);
+    }
+  };
+  for (let i = 0; i < reactives.length; i++) {
+    reactives[i].addOnChange(run);
+  }
+  if (!lazy) {
+    run();
+  }
+  return () => {
+    if (!active) {
+      return;
+    }
+    active = false;
     for (let i = 0; i < reactives.length; i++) {
-        reactives[i].addOnChange(run);
-    }
-    // auto run unless lazy
-    if (!lazy) {
-        run();
+      reactives[i].removeOnChange(run);
     }
-    // stop function
-    return () => {
-        if (!active) {
-            return;
-        }
-        active = false;
-        for (let i = 0; i < reactives.length; i++) {
-            reactives[i].removeOnChange(run);
-        }
-        // final cleanup
-        onCleanup();
-    };
+    onCleanup();
+  };
 }
 
 const toReactive = (value, onChange) => {
-    if (isKT(value)) {
-        if (onChange) {
-            value.addOnChange(onChange);
-        }
-        return value;
-    }
-    else {
-        return ref(value, onChange);
-    }
+  if (isKT(value)) {
+    if (onChange) {
+      value.addOnChange(onChange);
+    }
+    return value;
+  } else {
+    return ref(value, onChange);
+  }
 };
-/**
- * Extracts the value from a KTReactive, or returns the value directly if it's not reactive.
- */
 function dereactive(value) {
-    return isKT(value) ? value.value : value;
+  return isKT(value) ? value.value : value;
 }
 
 function applyKModel(element, valueRef) {
-    if (!isKT(valueRef)) {
-        console.warn('[kt.js warn]','k-model value must be a KTRef.');
-        return;
-    }
-    if (element instanceof HTMLInputElement) {
-        if (element.type === 'radio' || element.type === 'checkbox') {
-            $applyModel(element, valueRef, 'checked', 'change');
-        }
-        else {
-            $applyModel(element, valueRef, 'value', 'input');
-        }
-    }
-    else if (element instanceof HTMLSelectElement) {
-        $applyModel(element, valueRef, 'value', 'change');
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        $applyModel(element, valueRef, 'value', 'input');
-    }
-    else {
-        console.warn('[kt.js warn]','not supported element for k-model:');
-    }
+  if (!isKT(valueRef)) {
+    console.warn('[@ktjs/core warn]',"k-model value must be a KTRef.");
+    return;
+  }
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "radio" || element.type === "checkbox") {
+      $applyModel(element, valueRef, "checked", "change");
+    } else {
+      $applyModel(element, valueRef, "value", "input");
+    }
+  } else if (element instanceof HTMLSelectElement) {
+    $applyModel(element, valueRef, "value", "change");
+  } else if (element instanceof HTMLTextAreaElement) {
+    $applyModel(element, valueRef, "value", "input");
+  } else {
+    console.warn('[@ktjs/core warn]',"not supported element for k-model:");
+  }
 }
 
 const htmlCreator = (tag) => document.createElement(tag);
-const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
-const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
+const svgCreator = (tag) => document.createElementNS("http://www.w3.org/2000/svg", tag);
+const mathMLCreator = (tag) => document.createElementNS("http://www.w3.org/1998/Math/MathML", tag);
 let creator = htmlCreator;
-/**
- * Create an enhanced HTMLElement.
- * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
- * @param tag tag of an `HTMLElement`
- * @param attr attribute object or className
- * @param content a string or an array of HTMLEnhancedElement as child nodes
- *
- * ## About
- * @package @ktjs/core
- * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.28.2 (Last Update: 2026.02.10 14:46:21.243)
- * @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('[kt.js error] tagName must be a string.');
-    }
-    if (attr) {
-        if (SVG_ATTR_FLAG in attr) {
-            delete attr[SVG_ATTR_FLAG];
-            creator = svgCreator;
-        }
-        else if (MATHML_ATTR_FLAG in attr) {
-            delete attr[MATHML_ATTR_FLAG];
-            creator = mathMLCreator;
-        }
-        else {
-            creator = htmlCreator;
-        }
-    }
-    // * start creating the element
-    const element = creator(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;
+  if (typeof tag !== "string") {
+    throw new Error("[@ktjs/core error] tagName must be a string.");
+  }
+  if (attr) {
+    if ("__svg" in attr) {
+      delete attr["__svg"];
+      creator = svgCreator;
+    } else if ("__mathml" in attr) {
+      delete attr["__mathml"];
+      creator = mathMLCreator;
+    } else {
+      creator = htmlCreator;
+    }
+  }
+  const element = creator(tag);
+  applyAttr(element, attr);
+  applyContent(element, content);
+  if (typeof attr === "object" && attr !== null && "k-model" in attr) {
+    applyKModel(element, attr["k-model"]);
+  }
+  return element;
 };
 
-/**
- * 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>];
- * ```
- */
+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;
+  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;
+  };
+  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;
+  };
+}
 function Fragment$1(props) {
-    // key parameter reserved for future enhancement, currently unused
-    // const { key: _key } = props;
-    const redraw = () => {
-        const newElements = childrenRef.value;
-        const parent = anchor.parentNode;
-        if (!parent) {
-            // If anchor is not in DOM, only update internal state
-            elements.length = 0;
-            for (let i = 0; i < newElements.length; i++) {
-                elements.push(newElements[i]);
-            }
-            return;
-        }
-        // Simple replacement algorithm: remove all old elements, insert all new elements
-        // todo Future enhancement: key-based optimization
-        // 1. Remove all old elements
-        for (let i = 0; i < elements.length; i++) {
-            elements[i].remove();
-        }
-        // 2. Insert all new elements
-        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);
-        }
-        // Insert after anchor
-        parent.insertBefore(fragment, anchor.nextSibling);
-    };
-    let initialized = false;
-    const childrenRef = toReactive(props.children, redraw);
-    const elements = [];
-    const anchor = document.createComment('kt-fragment');
-    // Observe DOM insertion
-    const observer = new MutationObserver(() => {
-        if (anchor.isConnected && !initialized) {
-            initialized = true;
-            redraw();
-            observer.disconnect();
-        }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-    // Set ref reference
-    $setRef(props, anchor);
-    return anchor;
+  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 = void 0;
+    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 = void 0;
+    }
+  });
+  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') {
-            // & Wrap text in span element? No! use text node instead
-            const textNode = document.createTextNode(String(child));
-            elements.push(textNode);
-            return;
-        }
-        if (child instanceof HTMLElement) {
-            elements.push(child);
-            return;
-        }
-        if (isKT(child)) {
-            processChild(child.value);
-            return;
-        }
-        // Other types ignored or converted to string
-        console.warn('[kt.js warn]','Fragment: unsupported child type', child);
-    };
-    processChild(children);
-    return elements;
+  const elements = [];
+  const processChild = (child) => {
+    if (child === void 0 || child === null || child === false || child === true) {
+      return;
+    }
+    if ($isArray(child)) {
+      $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 create = (tag, props) => {
-    if (typeof tag === 'function') {
-        return tag(props);
-    }
-    else {
-        return h(tag, props, props.children);
-    }
+const jsxh = (tag, props) => {
+  if (typeof tag === "function") {
+    return tag(props);
+  } else {
+    return h(tag, props, props.children);
+  }
 };
-const placeholder = () => document.createComment('k-if');
-/**
- * @param tag html tag or function component
- * @param props properties/attributes
- */
+const placeholder = (data) => document.createComment(data);
+
+function kif(tag, props) {
+  const kif2 = toReactive(props["k-if"]);
+  let el = kif2.value ? jsxh(tag, props) : placeholder("k-if");
+  el.__kif__ = kif2;
+  const setter = $initRef(props, el);
+  kif2.addOnChange((newValue) => {
+    const old = el;
+    el = newValue ? jsxh(tag, props) : placeholder("k-if");
+    el.__kif__ = kif2;
+    setter(props, el);
+    $replaceNode(old, el);
+  });
+  return el;
+}
+function kelse(tag, props) {
+  let el = placeholder("k-else");
+  const setter = $initRef(props, el);
+  el.__kelse__ = (newValue) => {
+    const old = el;
+    el = newValue ? placeholder("k-else") : jsxh(tag, props);
+    el.__kelse__ = old.__kelse__;
+    setter(props, el);
+    $replaceNode(old, el);
+  };
+  return el;
+}
+function kifelseApply(el) {
+  const childNodes = el.childNodes;
+  if (childNodes.length === 0) {
+    return;
+  }
+  if (childNodes[0].__kelse__) {
+    throw new Error("[@ktjs/core error] k-else cannot be the first child of its parent element.");
+  }
+  for (let i = 1; i < childNodes.length; i++) {
+    const child = childNodes[i];
+    if (!child.__kelse__) {
+      continue;
+    }
+    const last = childNodes[i - 1];
+    if (!("__kif__" in last)) {
+      throw new Error("[@ktjs/core error] k-else must be immediately preceded by a k-if element.");
+    }
+    const kif2 = last.__kif__;
+    if (!kif2) {
+      continue;
+    }
+    if (!isKT(kif2)) {
+      continue;
+    }
+    kif2.addOnChange(child.__kelse__);
+    if (!kif2.value) {
+      child.__kelse__(false);
+    }
+  }
+}
+
 function jsx(tag, props) {
-    if (isComputed(props.ref)) {
-        throw new Error('[kt.js error] Cannot assign a computed value to an element.');
-    }
-    let el;
-    if ('k-if' in props) {
-        const kif = props['k-if'];
-        let condition = kif; // assume boolean by default
-        // Handle reactive k-if
-        if (isKT(kif)) {
-            kif.addOnChange((newValue, oldValue) => {
-                if (newValue === oldValue) {
-                    return;
-                }
-                const oldEl = el;
-                $setRef(props, (el = newValue ? create(tag, props) : placeholder()));
-                $replaceNode(oldEl, el);
-            });
-            condition = kif.value;
-        }
-        if (!condition) {
-            // & make comment placeholder in case that ref might be redrawn later
-            $setRef(props, (el = placeholder()));
-            return el;
-        }
-    }
-    $setRef(props, (el = create(tag, props)));
-    return el;
+  if (isComputed(props.ref)) {
+    throw new Error("[@ktjs/core error] Cannot assign a computed value to an element.");
+  }
+  if ("k-if" in props) {
+    return kif(tag, props);
+  }
+  if ("k-else" in props) {
+    return kelse(tag, props);
+  }
+  const el = jsxh(tag, props);
+  $initRef(props, el);
+  kifelseApply(el);
+  return el;
 }
-/**
- * Fragment support - returns an array of children
- * Enhanced Fragment component that manages arrays of elements
- */
 function Fragment(props) {
-    const { children } = props ?? {};
-    if (!children) {
-        return document.createComment('kt-fragment-empty');
-    }
-    const elements = convertChildrenToElements(children);
-    return Fragment$1({ children: elements });
+  const { children } = props ?? {};
+  if (!children) {
+    return placeholder("kt-fragment-empty");
+  }
+  const elements = convertChildrenToElements(children);
+  return Fragment$1({ 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);
+  return jsx(...args);
 };
-/**
- * JSX runtime for React 17+ automatic runtime
- * This is called when using jsx: "react-jsx" or "react-jsxdev"
- */
 const jsxs = jsx;
-/**
- * A helper to create redrawable elements
- * ```tsx
- * export function MyComponent() {
- *    let aa = 10;
- *    // ...
- *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
- * }
- * ```
- * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator a simple creator function that returns an element
- * @returns created element's ref
- */
 function createRedrawable(creator) {
-    const elRef = ref();
-    const redraw = () => {
-        elRef.value = creator(); // ref setter automatically calls replaceWith
-        elRef.redraw = redraw;
-        return elRef.value;
-    };
-    redraw();
-    return elRef;
+  const elRef = ref();
+  const redraw = () => {
+    elRef.value = creator();
+    elRef.redraw = redraw;
+    return elRef.value;
+  };
+  redraw();
+  return elRef;
 }
 
 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;
+  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;
 }
 
-/**
- * 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;
-        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);
-            }
-            anchor.__kt_for_list__ = newElements;
-            return 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();
-            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);
-            }
-            parent.insertBefore(fragment, anchor.nextSibling);
-            anchor.__kt_for_list__ = newElements;
-            return 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;
-        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 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);
-            }
-        }
-        // Remove nodes not in new list
-        const toRemove = [];
-        nodeMap.forEach((node, key) => {
-            if (!newKeyToNewIndex.has(key)) {
-                toRemove.push(node);
-            }
-        });
-        for (let i = 0; i < toRemove.length; i++) {
-            toRemove[i].remove();
-        }
-        // Update DOM with minimal operations
-        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);
-                    }
-                    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--;
-                }
-                anchor = node;
-            }
-        }
-        else {
-            // No moves needed, just insert new nodes
-            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;
-                }
-            }
-        }
-        // 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 } = 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 = [];
-    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);
+  const redraw = () => {
+    const newList = listRef.value;
+    const parent = anchor.parentNode;
+    if (!parent) {
+      const newElements2 = [];
+      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);
-        elements.push(node);
-    }
-    anchor.__kt_for_list__ = elements;
-    $setRef(props, anchor);
+        newElements2.push(node);
+      }
+      anchor.__kt_for_list__ = newElements2;
+      return anchor;
+    }
+    const oldLength = anchor.__kt_for_list__.length;
+    const newLength = newList.length;
+    if (newLength === 0) {
+      nodeMap.forEach((node) => node.remove());
+      nodeMap.clear();
+      anchor.__kt_for_list__ = [];
+      return anchor;
+    }
+    if (oldLength === 0) {
+      const newElements2 = [];
+      const 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);
+        newElements2.push(node);
+        fragment.appendChild(node);
+      }
+      parent.insertBefore(fragment, anchor.nextSibling);
+      anchor.__kt_for_list__ = newElements2;
+      return anchor;
+    }
+    const newKeyToNewIndex = /* @__PURE__ */ new Map();
+    const newElements = new Array(newLength);
+    let maxNewIndexSoFar = 0;
+    let moved = false;
+    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)) {
+        const node = nodeMap.get(itemKey);
+        newElements[i] = node;
+        if (i < maxNewIndexSoFar) {
+          moved = true;
+        } else {
+          maxNewIndexSoFar = i;
+        }
+      } else {
+        newElements[i] = currentMap(item, i, newList);
+      }
+    }
+    const toRemove = [];
+    nodeMap.forEach((node, key) => {
+      if (!newKeyToNewIndex.has(key)) {
+        toRemove.push(node);
+      }
+    });
+    for (let i = 0; i < toRemove.length; i++) {
+      toRemove[i].remove();
+    }
+    if (moved) {
+      const seq = getSequence(newElements.map((el, i) => nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1));
+      let j = seq.length - 1;
+      let anchor2 = null;
+      for (let i = newLength - 1; i >= 0; i--) {
+        const node = newElements[i];
+        if (j < 0 || i !== seq[j]) {
+          if (anchor2) {
+            parent.insertBefore(node, anchor2);
+          } else {
+            let nextSibling = anchor2.nextSibling;
+            let temp = nextSibling;
+            while (temp && newElements.includes(temp)) {
+              temp = temp.nextSibling;
+            }
+            parent.insertBefore(node, temp);
+          }
+        } else {
+          j--;
+        }
+        anchor2 = node;
+      }
+    } 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;
+        }
+      }
+    }
+    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 } = props;
+  const listRef = toReactive(props.list, redraw);
+  const anchor = document.createComment("kt-for");
+  const nodeMap = /* @__PURE__ */ new Map();
+  const 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;
-        }
-    }
-    u = result.length;
-    v = result[u - 1];
-    while (u-- > 0) {
-        result[u] = v;
-        v = p[v];
-    }
-    return result;
+  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;
+    }
+  }
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
+  }
+  return result;
 }
 
-export { $modelOrRef, $setRef, Fragment, KTAsync, KTComputed, KTFor, KTRef, computed, h as createElement, createRedrawable, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
+export { $initRef, $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTReactiveType, KTRef, computed, h as createElement, createRedrawable, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };