@ktjs/core 0.21.1 → 0.22.0

package/dist/index.d.ts

@@ -72,12 +72,15 @@ interface KTBaseAttribute {
   // # kt-specific attributes
   ref?: KTRef<JSX.Element>;
 
-  // todo 是否要让k-if是KTRef的时候具备响应能力?
   /**
    * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
    */
   'k-if'?: any;
-  // todo k-model如何指定value还是checked还是别的什么?
+
+  /**
+   * Register two-way data binding between an input element and a KTRef.
+   * - Default to regist `input` event and `value` property(`checked` for checkboxes and radios).
+   */
   'k-model'?: KTRef<any>;
 
   // # normal HTML attributes
@@ -157,7 +160,7 @@ type KTComponent = (
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.iife.js

@@ -10,10 +10,6 @@ var __ktjs_core__ = (function (exports) {
     const $throw = (message) => {
         throw new Error('@ktjs/shared: ' + message);
     };
-
-    // DOM manipulation utilities
-    // # dom natives
-    const $replaceWith = Element.prototype.replaceWith;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -55,6 +51,96 @@ var __ktjs_core__ = (function (exports) {
     // Re-export all utilities
     Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
 
+    class KTRef {
+        /**
+         * Indicates that this is a KTRef instance
+         */
+        isKT = true;
+        /**
+         * @internal
+         */
+        _value;
+        /**
+         * @internal
+         */
+        _onChanges;
+        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 (newValue === this._value) {
+                return;
+            }
+            // replace the old node with the new one in the DOM if both are nodes
+            if (this._value instanceof Node && newValue instanceof Node) {
+                if (newValue.contains(this._value)) {
+                    this._value.remove();
+                }
+                this._value.replaceWith(newValue);
+            }
+            const oldValue = this._value;
+            this._value = newValue;
+            for (let i = 0; i < this._onChanges.length; i++) {
+                this._onChanges[i](newValue, oldValue);
+            }
+        }
+        addOnChange(callback) {
+            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;
+        }
+    }
+    const isKTRef = (obj) => {
+        return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    };
+    /**
+     * 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.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    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;
+    }
+    /**
+     * 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 booleanHandler = (element, key, value) => {
         if (key in element) {
             element[key] = !!value;
@@ -119,6 +205,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -196,6 +283,29 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function register(element, valueRef, propName, eventName) {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange((newValue) => (element[propName] = newValue));
+        element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+    }
+    function applyModel(element, valueRef) {
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                register(element, valueRef, 'checked', 'change');
+            }
+            else {
+                register(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            register(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            register(element, valueRef, 'value', 'input');
+        }
+        console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+    }
+
     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);
@@ -213,7 +323,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+     * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -242,97 +352,16 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        return element;
-    };
-
-    class KTRef {
-        /**
-         * Indicates that this is a KTRef instance
-         */
-        isKT = true;
-        /**
-         * @internal
-         */
-        _value;
-        /**
-         * @internal
-         */
-        _onChanges;
-        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 (newValue === this._value) {
-                return;
-            }
-            // replace the old node with the new one in the DOM if both are nodes
-            if (this._value instanceof Node && newValue instanceof Node) {
-                if (newValue.contains(this._value)) {
-                    this._value.remove();
-                }
-                this._value.replaceWith(newValue);
-            }
-            const oldValue = this._value;
-            this._value = newValue;
-            for (let i = 0; i < this._onChanges.length; i++) {
-                this._onChanges[i](newValue, oldValue);
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            const kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyModel(element, kmodel);
             }
-        }
-        addOnChange(callback) {
-            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;
-        }
-    }
-    const isKTRef = (obj) => {
-        return typeof obj === 'object' && obj !== null && obj.isKT === true;
-    };
-    /**
-     * 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.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        return new KTRef(value, onChange ? [onChange] : []);
-    }
-    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;
+            else {
+                $throw('k-model value must be a KTRef.');
             }
-            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;
+        return element;
     };
 
     const dummyRef = { value: null };
@@ -363,7 +392,7 @@ var __ktjs_core__ = (function (exports) {
                     }
                     const oldEl = el;
                     el = newValue ? create(tag, props) : placeholder();
-                    $replaceWith.call(oldEl, el);
+                    oldEl.replaceWith(el);
                     maybeDummyRef.value = el;
                 });
                 condition = kif.value;

package/dist/index.legacy.js

@@ -10,10 +10,6 @@ var __ktjs_core__ = (function (exports) {
     const $throw = (message) => {
         throw new Error('@ktjs/shared: ' + message);
     };
-
-    // DOM manipulation utilities
-    // # dom natives
-    const $replaceWith = Element.prototype.replaceWith;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -55,6 +51,93 @@ var __ktjs_core__ = (function (exports) {
     // Re-export all utilities
     Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
 
+    var KTRef = /** @class */ (function () {
+        function KTRef(_value, _onChanges) {
+            /**
+             * Indicates that this is a KTRef instance
+             */
+            this.isKT = true;
+            this._value = _value;
+            this._onChanges = _onChanges;
+        }
+        Object.defineProperty(KTRef.prototype, "value", {
+            /**
+             * If new value and old value are both nodes, the old one will be replaced in the DOM
+             */
+            get: function () {
+                return this._value;
+            },
+            set: function (newValue) {
+                if (newValue === this._value) {
+                    return;
+                }
+                // replace the old node with the new one in the DOM if both are nodes
+                if (this._value instanceof Node && newValue instanceof Node) {
+                    if (newValue.contains(this._value)) {
+                        this._value.remove();
+                    }
+                    this._value.replaceWith(newValue);
+                }
+                var oldValue = this._value;
+                this._value = newValue;
+                for (var i = 0; i < this._onChanges.length; i++) {
+                    this._onChanges[i](newValue, oldValue);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KTRef.prototype.addOnChange = function (callback) {
+            this._onChanges.push(callback);
+        };
+        KTRef.prototype.removeOnChange = function (callback) {
+            for (var i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        };
+        return KTRef;
+    }());
+    var isKTRef = function (obj) {
+        return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    };
+    /**
+     * 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.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    function kcollect() {
+        var newObj = {};
+        var entries = $entries(this);
+        for (var i = 0; i < entries.length; i++) {
+            var 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
+     */
+    var surfaceRef = function (obj) {
+        var entries = $entries(obj);
+        var newObj = { kcollect: kcollect };
+        for (var i = 0; i < entries.length; i++) {
+            newObj[entries[i][0]] = ref(entries[i][1]);
+        }
+        return newObj;
+    };
+
     var booleanHandler = function (element, key, value) {
         if (key in element) {
             element[key] = !!value;
@@ -121,6 +204,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -201,6 +285,29 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function register(element, valueRef, propName, eventName) {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange(function (newValue) { return (element[propName] = newValue); });
+        element.addEventListener(eventName, function () { return (valueRef.value = element[propName]); });
+    }
+    function applyModel(element, valueRef) {
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                register(element, valueRef, 'checked', 'change');
+            }
+            else {
+                register(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            register(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            register(element, valueRef, 'value', 'input');
+        }
+        console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+    }
+
     var htmlCreator = function (tag) { return document.createElement(tag); };
     var svgCreator = function (tag) { return document.createElementNS('http://www.w3.org/2000/svg', tag); };
     var mathMLCreator = function (tag) { return document.createElementNS('http://www.w3.org/1998/Math/MathML', tag); };
@@ -218,7 +325,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+     * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -247,94 +354,16 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        return element;
-    };
-
-    var KTRef = /** @class */ (function () {
-        function KTRef(_value, _onChanges) {
-            /**
-             * Indicates that this is a KTRef instance
-             */
-            this.isKT = true;
-            this._value = _value;
-            this._onChanges = _onChanges;
-        }
-        Object.defineProperty(KTRef.prototype, "value", {
-            /**
-             * If new value and old value are both nodes, the old one will be replaced in the DOM
-             */
-            get: function () {
-                return this._value;
-            },
-            set: function (newValue) {
-                if (newValue === this._value) {
-                    return;
-                }
-                // replace the old node with the new one in the DOM if both are nodes
-                if (this._value instanceof Node && newValue instanceof Node) {
-                    if (newValue.contains(this._value)) {
-                        this._value.remove();
-                    }
-                    this._value.replaceWith(newValue);
-                }
-                var oldValue = this._value;
-                this._value = newValue;
-                for (var i = 0; i < this._onChanges.length; i++) {
-                    this._onChanges[i](newValue, oldValue);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        KTRef.prototype.addOnChange = function (callback) {
-            this._onChanges.push(callback);
-        };
-        KTRef.prototype.removeOnChange = function (callback) {
-            for (var i = this._onChanges.length - 1; i >= 0; i--) {
-                if (this._onChanges[i] === callback) {
-                    this._onChanges.splice(i, 1);
-                    return true;
-                }
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            var kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyModel(element, kmodel);
             }
-            return false;
-        };
-        return KTRef;
-    }());
-    var isKTRef = function (obj) {
-        return typeof obj === 'object' && obj !== null && obj.isKT === true;
-    };
-    /**
-     * 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.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        return new KTRef(value, onChange ? [onChange] : []);
-    }
-    function kcollect() {
-        var newObj = {};
-        var entries = $entries(this);
-        for (var i = 0; i < entries.length; i++) {
-            var key = entries[i][0];
-            if (key === 'kcollect') {
-                continue;
+            else {
+                $throw('k-model value must be a KTRef.');
             }
-            newObj[key] = entries[i][1].value;
         }
-        return newObj;
-    }
-    /**
-     * Make all first-level properties of the object a `KTRef`.
-     * - `obj.a.b` is not reactive
-     */
-    var surfaceRef = function (obj) {
-        var entries = $entries(obj);
-        var newObj = { kcollect: kcollect };
-        for (var i = 0; i < entries.length; i++) {
-            newObj[entries[i][0]] = ref(entries[i][1]);
-        }
-        return newObj;
+        return element;
     };
 
     var dummyRef = { value: null };
@@ -365,7 +394,7 @@ var __ktjs_core__ = (function (exports) {
                     }
                     var oldEl = el;
                     el = newValue ? create(tag, props) : placeholder();
-                    $replaceWith.call(oldEl, el);
+                    oldEl.replaceWith(el);
                     maybeDummyRef.value = el;
                 });
                 condition = kif.value;

package/dist/index.mjs

@@ -7,10 +7,6 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 const $throw = (message) => {
     throw new Error('@ktjs/shared: ' + message);
 };
-
-// DOM manipulation utilities
-// # dom natives
-const $replaceWith = Element.prototype.replaceWith;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -52,6 +48,96 @@ const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwn
 // Re-export all utilities
 Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
 
+class KTRef {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    /**
+     * @internal
+     */
+    _value;
+    /**
+     * @internal
+     */
+    _onChanges;
+    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 (newValue === this._value) {
+            return;
+        }
+        // replace the old node with the new one in the DOM if both are nodes
+        if (this._value instanceof Node && newValue instanceof Node) {
+            if (newValue.contains(this._value)) {
+                this._value.remove();
+            }
+            this._value.replaceWith(newValue);
+        }
+        const oldValue = this._value;
+        this._value = newValue;
+        for (let i = 0; i < this._onChanges.length; i++) {
+            this._onChanges[i](newValue, oldValue);
+        }
+    }
+    addOnChange(callback) {
+        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;
+    }
+}
+const isKTRef = (obj) => {
+    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+};
+/**
+ * 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.
+ * @param value mostly an HTMLElement
+ */
+function ref(value, onChange) {
+    return new KTRef(value, onChange ? [onChange] : []);
+}
+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;
+}
+/**
+ * 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 booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -116,6 +202,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -193,6 +280,29 @@ function applyContent(element, content) {
     }
 }
 
+function register(element, valueRef, propName, eventName) {
+    element[propName] = valueRef.value; // initialize
+    valueRef.addOnChange((newValue) => (element[propName] = newValue));
+    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+}
+function applyModel(element, valueRef) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'radio' || element.type === 'checkbox') {
+            register(element, valueRef, 'checked', 'change');
+        }
+        else {
+            register(element, valueRef, 'value', 'input');
+        }
+    }
+    else if (element instanceof HTMLSelectElement) {
+        register(element, valueRef, 'value', 'change');
+    }
+    else if (element instanceof HTMLTextAreaElement) {
+        register(element, valueRef, 'value', 'input');
+    }
+    console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+}
+
 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);
@@ -210,7 +320,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -239,97 +349,16 @@ const h = (tag, attr, content) => {
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
-    return element;
-};
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    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 (newValue === this._value) {
-            return;
-        }
-        // replace the old node with the new one in the DOM if both are nodes
-        if (this._value instanceof Node && newValue instanceof Node) {
-            if (newValue.contains(this._value)) {
-                this._value.remove();
-            }
-            this._value.replaceWith(newValue);
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
+    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+        const kmodel = attr['k-model'];
+        if (isKTRef(kmodel)) {
+            applyModel(element, kmodel);
         }
-    }
-    addOnChange(callback) {
-        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;
-    }
-}
-const isKTRef = (obj) => {
-    return typeof obj === 'object' && obj !== null && obj.isKT === true;
-};
-/**
- * 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.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, onChange ? [onChange] : []);
-}
-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;
+        else {
+            $throw('k-model value must be a KTRef.');
         }
-        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;
+    return element;
 };
 
 const dummyRef = { value: null };
@@ -360,7 +389,7 @@ function jsx(tag, props) {
                 }
                 const oldEl = el;
                 el = newValue ? create(tag, props) : placeholder();
-                $replaceWith.call(oldEl, el);
+                oldEl.replaceWith(el);
                 maybeDummyRef.value = el;
             });
             condition = kif.value;

package/dist/jsx/index.d.ts

@@ -66,12 +66,15 @@ interface KTBaseAttribute {
   // # kt-specific attributes
   ref?: KTRef<JSX.Element>;
 
-  // todo 是否要让k-if是KTRef的时候具备响应能力?
   /**
    * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
    */
   'k-if'?: any;
-  // todo k-model如何指定value还是checked还是别的什么?
+
+  /**
+   * Register two-way data binding between an input element and a KTRef.
+   * - Default to regist `input` event and `value` property(`checked` for checkboxes and radios).
+   */
   'k-model'?: KTRef<any>;
 
   // # normal HTML attributes
@@ -143,7 +146,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -7,10 +7,6 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 const $throw = (message) => {
     throw new Error('@ktjs/shared: ' + message);
 };
-
-// DOM manipulation utilities
-// # dom natives
-const $replaceWith = Element.prototype.replaceWith;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -52,6 +48,96 @@ const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwn
 // Re-export all utilities
 Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
 
+class KTRef {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    /**
+     * @internal
+     */
+    _value;
+    /**
+     * @internal
+     */
+    _onChanges;
+    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 (newValue === this._value) {
+            return;
+        }
+        // replace the old node with the new one in the DOM if both are nodes
+        if (this._value instanceof Node && newValue instanceof Node) {
+            if (newValue.contains(this._value)) {
+                this._value.remove();
+            }
+            this._value.replaceWith(newValue);
+        }
+        const oldValue = this._value;
+        this._value = newValue;
+        for (let i = 0; i < this._onChanges.length; i++) {
+            this._onChanges[i](newValue, oldValue);
+        }
+    }
+    addOnChange(callback) {
+        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;
+    }
+}
+const isKTRef = (obj) => {
+    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+};
+/**
+ * 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.
+ * @param value mostly an HTMLElement
+ */
+function ref(value, onChange) {
+    return new KTRef(value, onChange ? [onChange] : []);
+}
+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;
+}
+/**
+ * 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 booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -116,6 +202,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -193,6 +280,29 @@ function applyContent(element, content) {
     }
 }
 
+function register(element, valueRef, propName, eventName) {
+    element[propName] = valueRef.value; // initialize
+    valueRef.addOnChange((newValue) => (element[propName] = newValue));
+    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+}
+function applyModel(element, valueRef) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'radio' || element.type === 'checkbox') {
+            register(element, valueRef, 'checked', 'change');
+        }
+        else {
+            register(element, valueRef, 'value', 'input');
+        }
+    }
+    else if (element instanceof HTMLSelectElement) {
+        register(element, valueRef, 'value', 'change');
+    }
+    else if (element instanceof HTMLTextAreaElement) {
+        register(element, valueRef, 'value', 'input');
+    }
+    console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+}
+
 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);
@@ -210,7 +320,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -239,97 +349,16 @@ const h = (tag, attr, content) => {
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
-    return element;
-};
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    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 (newValue === this._value) {
-            return;
-        }
-        // replace the old node with the new one in the DOM if both are nodes
-        if (this._value instanceof Node && newValue instanceof Node) {
-            if (newValue.contains(this._value)) {
-                this._value.remove();
-            }
-            this._value.replaceWith(newValue);
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
+    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+        const kmodel = attr['k-model'];
+        if (isKTRef(kmodel)) {
+            applyModel(element, kmodel);
         }
-    }
-    addOnChange(callback) {
-        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;
-    }
-}
-const isKTRef = (obj) => {
-    return typeof obj === 'object' && obj !== null && obj.isKT === true;
-};
-/**
- * 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.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, onChange ? [onChange] : []);
-}
-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;
+        else {
+            $throw('k-model value must be a KTRef.');
         }
-        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;
+    return element;
 };
 
 const dummyRef = { value: null };
@@ -360,7 +389,7 @@ function jsx(tag, props) {
                 }
                 const oldEl = el;
                 el = newValue ? create(tag, props) : placeholder();
-                $replaceWith.call(oldEl, el);
+                oldEl.replaceWith(el);
                 maybeDummyRef.value = el;
             });
             condition = kif.value;

package/dist/jsx/jsx-runtime.d.ts

@@ -45,12 +45,15 @@ interface KTBaseAttribute {
   // # kt-specific attributes
   ref?: KTRef<JSX.Element>;
 
-  // todo 是否要让k-if是KTRef的时候具备响应能力?
   /**
    * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
    */
   'k-if'?: any;
-  // todo k-model如何指定value还是checked还是别的什么?
+
+  /**
+   * Register two-way data binding between an input element and a KTRef.
+   * - Default to regist `input` event and `value` property(`checked` for checkboxes and radios).
+   */
   'k-model'?: KTRef<any>;
 
   // # normal HTML attributes
@@ -122,7 +125,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -6,10 +6,6 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 const $throw = (message) => {
     throw new Error('@ktjs/shared: ' + message);
 };
-
-// DOM manipulation utilities
-// # dom natives
-const $replaceWith = Element.prototype.replaceWith;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -51,6 +47,72 @@ const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwn
 // Re-export all utilities
 Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
 
+class KTRef {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    /**
+     * @internal
+     */
+    _value;
+    /**
+     * @internal
+     */
+    _onChanges;
+    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 (newValue === this._value) {
+            return;
+        }
+        // replace the old node with the new one in the DOM if both are nodes
+        if (this._value instanceof Node && newValue instanceof Node) {
+            if (newValue.contains(this._value)) {
+                this._value.remove();
+            }
+            this._value.replaceWith(newValue);
+        }
+        const oldValue = this._value;
+        this._value = newValue;
+        for (let i = 0; i < this._onChanges.length; i++) {
+            this._onChanges[i](newValue, oldValue);
+        }
+    }
+    addOnChange(callback) {
+        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;
+    }
+}
+const isKTRef = (obj) => {
+    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+};
+/**
+ * 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.
+ * @param value mostly an HTMLElement
+ */
+function ref(value, onChange) {
+    return new KTRef(value, []);
+}
+
 const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -115,6 +177,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -192,6 +255,29 @@ function applyContent(element, content) {
     }
 }
 
+function register(element, valueRef, propName, eventName) {
+    element[propName] = valueRef.value; // initialize
+    valueRef.addOnChange((newValue) => (element[propName] = newValue));
+    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+}
+function applyModel(element, valueRef) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'radio' || element.type === 'checkbox') {
+            register(element, valueRef, 'checked', 'change');
+        }
+        else {
+            register(element, valueRef, 'value', 'input');
+        }
+    }
+    else if (element instanceof HTMLSelectElement) {
+        register(element, valueRef, 'value', 'change');
+    }
+    else if (element instanceof HTMLTextAreaElement) {
+        register(element, valueRef, 'value', 'input');
+    }
+    console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+}
+
 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);
@@ -209,7 +295,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -238,74 +324,17 @@ const h = (tag, attr, content) => {
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
-    return element;
-};
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    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 (newValue === this._value) {
-            return;
+    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+        const kmodel = attr['k-model'];
+        if (isKTRef(kmodel)) {
+            applyModel(element, kmodel);
         }
-        // replace the old node with the new one in the DOM if both are nodes
-        if (this._value instanceof Node && newValue instanceof Node) {
-            if (newValue.contains(this._value)) {
-                this._value.remove();
-            }
-            this._value.replaceWith(newValue);
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    addOnChange(callback) {
-        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;
-            }
+        else {
+            $throw('k-model value must be a KTRef.');
         }
-        return false;
     }
-}
-const isKTRef = (obj) => {
-    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    return element;
 };
-/**
- * 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.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, []);
-}
 
 const dummyRef = { value: null };
 const create = (tag, props) => {
@@ -335,7 +364,7 @@ function jsx(tag, props) {
                 }
                 const oldEl = el;
                 el = newValue ? create(tag, props) : placeholder();
-                $replaceWith.call(oldEl, el);
+                oldEl.replaceWith(el);
                 maybeDummyRef.value = el;
             });
             condition = kif.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",