@ktjs/core 0.15.5 → 0.16.0

package/README.md

@@ -12,7 +12,7 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
 
 `@ktjs/core` is the foundation of KT.js, providing the essential `h` function and DOM utilities for building web applications with direct DOM manipulation. It emphasizes performance, type safety, and minimal abstraction over native DOM APIs.
 
-**Current Version:** 0.14.6
+**Current Version:** 0.16.0
 
 ## Features
 
@@ -28,6 +28,12 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
   - `redraw()` method for controlled re-rendering
   - **k-if directive**: Conditional element creation with `k-if` attribute
   - Array children support for seamless list rendering
+- **KTFor Component**: Efficient list rendering with key-based optimization (v0.16.0)
+  - Key-based DOM reuse similar to Svelte's `{#each}` blocks
+  - Minimal DOM operations - only updates what changed
+  - Returns Comment anchor node for flexible positioning
+  - Type-safe with full TypeScript generics support
+  - `KTForStatic` variant for simple lists without key optimization
 - **KTAsync Component**: Handle async components with ease
   - Automatic handling of Promise-based components
   - Seamless integration with JSX/TSX
@@ -200,6 +206,62 @@ const div = (<div>Old content</div>) as KTHTMLElement;
 div.redraw(undefined, 'New content');
 ```
 
+### List Rendering with KTFor (v0.16.0)
+
+The `KTFor` component provides efficient list rendering with key-based DOM reuse:
+
+```tsx
+import { KTFor, KTForStatic, KTForAnchor } from '@ktjs/core';
+
+interface Todo {
+  id: number;
+  text: string;
+  done: boolean;
+}
+
+let todos: Todo[] = [
+  { id: 1, text: 'Buy milk', done: false },
+  { id: 2, text: 'Write code', done: true },
+];
+
+// Create optimized list with key-based reuse
+const todoList = (
+  <KTFor
+    list={todos}
+    key={(item) => item.id} // Stable key for efficient updates
+    mapper={(item, index) => (
+      <div class={`todo ${item.done ? 'done' : ''}`}>
+        <input type="checkbox" checked={item.done} />
+        <span>{item.text}</span>
+        <button on:click={() => deleteTodo(item.id)}>Delete</button>
+      </div>
+    )}
+  />
+) as KTForAnchor;
+
+// Add to DOM (anchor + all items are rendered)
+document.body.appendChild(todoList);
+
+// Update the list - only changed items are updated
+todos = [...todos, { id: 3, text: 'New task', done: false }];
+todoList.redraw({ list: todos });
+
+// For simple static lists, use KTForStatic (no key optimization)
+const simpleList = (
+  <KTForStatic list={['Apple', 'Banana', 'Orange']} mapper={(item) => <div>{item}</div>} />
+) as KTForAnchor;
+```
+
+**How it works:**
+
+- Returns a Comment node (`<!-- kt-for -->`) as anchor point
+- All list items are rendered as siblings after the anchor
+- Uses key-based diff algorithm to reuse DOM nodes
+- Only adds/removes/moves nodes that changed
+- Similar to Svelte's `{#each}` blocks
+
+````
+
 ### Array Children Support (v0.14.1+)
 
 Children can now be arrays for easier list rendering:
@@ -231,7 +293,7 @@ const TodoList = ({ todos }: { todos: string[] }) => (
     </ul>
   </div>
 );
-```
+````
 
 ### Async Components
 

package/dist/index.d.ts

@@ -98,7 +98,7 @@ interface KTBaseAttribute {
   title?: string;
   placeholder?: string;
   contenteditable?: boolean;
-  value?: string;
+  value?: any;
   valueAsDate?: Date;
   valueAsNumber?: number;
   label?: string;
@@ -120,12 +120,30 @@ type KTPrefixedEventHandlers = {
 };
 
 type KTSpecialEventHandlers = {
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktchangenumber'?: (value: number) => void;
 
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktinputnumber'?: (value: number) => void;
 };
 
@@ -150,7 +168,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -224,5 +242,63 @@ declare function KTAsync<T extends KTComponent>(props: {
     children?: KTRawContent;
 } & ExtractComponentProps<T>): KTHTMLElement;
 
-export { Fragment, KTAsync, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
-export type { EventHandler, HTMLTag, KTAttribute, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };
+interface KTForProps<T> {
+    list: T[];
+    /**
+     * Key function to uniquely identify each item
+     * Using stable keys enables efficient DOM reuse and updates
+     */
+    key: (item: T, index: number) => string | number;
+    /**
+     * Mapper function to render each item
+     */
+    mapper: (item: T, index: number) => HTMLElement;
+}
+/**
+ * Extended Comment node with redraw capability for KTFor
+ */
+interface KTForAnchor extends Comment {
+    redraw: (newProps?: {
+        list?: any[];
+        mapper?: (item: any, index: number) => HTMLElement;
+    }) => void;
+}
+/**
+ * KTFor component - Efficient list rendering with key-based DOM reuse
+ * Similar to Svelte's {#each} blocks, provides optimized updates
+ *
+ * Returns a Comment node as anchor point. All list items are rendered after this anchor.
+ *
+ * @example
+ * ```tsx
+ * const listAnchor = <KTFor
+ *   list={items}
+ *   key={(item) => item.id}
+ *   mapper={(item) => <div>{item.name}</div>}
+ * /> as KTForAnchor;
+ *
+ * document.body.appendChild(listAnchor); // Anchor + all items are rendered
+ *
+ * // Update the list
+ * listAnchor.redraw({ list: newItems });
+ * ```
+ */
+declare function KTFor<T>(props: KTForProps<T>): KTForAnchor;
+/**
+ * Simple list rendering without key optimization
+ * Rebuilds the entire list on each update - use for small static lists
+ *
+ * Returns a Comment anchor node. All items are rendered after this anchor.
+ *
+ * @example
+ * ```tsx
+ * const listAnchor = <KTForStatic
+ *   list={items}
+ *   mapper={(item) => <div>{item}</div>}
+ * /> as KTForAnchor;
+ * ```
+ */
+declare function KTForStatic<T>(props: Omit<KTForProps<T>, 'key'>): KTForAnchor;
+
+export { Fragment, KTAsync, KTFor, KTForStatic, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
+export type { EventHandler, HTMLTag, KTAttribute, KTForAnchor, KTForProps, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };

package/dist/index.iife.js

@@ -206,7 +206,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+     * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -378,8 +378,206 @@ var __ktjs_core__ = (function (exports) {
         return comp;
     }
 
+    /**
+     * KTFor component - Efficient list rendering with key-based DOM reuse
+     * Similar to Svelte's {#each} blocks, provides optimized updates
+     *
+     * Returns a Comment node as anchor point. All list items are rendered after this anchor.
+     *
+     * @example
+     * ```tsx
+     * const listAnchor = <KTFor
+     *   list={items}
+     *   key={(item) => item.id}
+     *   mapper={(item) => <div>{item.name}</div>}
+     * /> as KTForAnchor;
+     *
+     * document.body.appendChild(listAnchor); // Anchor + all items are rendered
+     *
+     * // Update the list
+     * listAnchor.redraw({ list: newItems });
+     * ```
+     */
+    function KTFor(props) {
+        const { list: initList, key: getKey, mapper } = props;
+        // Cache: key -> { node: HTMLElement, item: T }
+        const nodeCache = new Map();
+        // Current key order
+        let currentKeys = [];
+        // Create anchor comment node - marks the position of the list
+        const anchor = document.createComment('kt-for');
+        /**
+         * Get all nodes currently in the DOM that belong to this list
+         * They are all siblings after the anchor node
+         */
+        const getListNodes = () => {
+            const nodes = [];
+            if (!anchor.parentNode)
+                return nodes;
+            let current = anchor.nextSibling;
+            new Set(currentKeys);
+            // Collect nodes that belong to this list
+            while (current) {
+                const isListNode = Array.from(nodeCache.values()).some((cached) => cached.node === current);
+                if (!isListNode)
+                    break;
+                nodes.push(current);
+                current = current.nextSibling;
+            }
+            return nodes;
+        };
+        /**
+         * Initialize list - append all initial items after anchor
+         */
+        const initialize = () => {
+            for (let i = 0; i < initList.length; i++) {
+                const item = initList[i];
+                const key = getKey(item, i);
+                const node = mapper(item, i);
+                nodeCache.set(key, { node, item });
+                currentKeys.push(key);
+                // Append to parent if anchor is already in DOM
+                if (anchor.parentNode) {
+                    const lastNode = getListNodes()[getListNodes().length - 1];
+                    if (lastNode) {
+                        lastNode.after(node);
+                    }
+                    else {
+                        anchor.after(node);
+                    }
+                }
+            }
+        };
+        /**
+         * Smart update method - only modifies DOM nodes that changed
+         * Uses key-based diff algorithm to minimize DOM operations
+         */
+        const smartUpdate = (newList, newMapper) => {
+            const mapperFn = newMapper ?? mapper;
+            const newKeys = newList.map((item, index) => getKey(item, index));
+            if (!anchor.parentNode) {
+                // If anchor is not in DOM yet, just update cache
+                nodeCache.clear();
+                currentKeys = [];
+                for (let i = 0; i < newList.length; i++) {
+                    const item = newList[i];
+                    const key = newKeys[i];
+                    const node = mapperFn(item, i);
+                    nodeCache.set(key, { node, item });
+                    currentKeys.push(key);
+                }
+                return;
+            }
+            // Find keys to remove (exist in current but not in new)
+            const keysToRemove = currentKeys.filter((k) => !newKeys.includes(k));
+            for (let i = 0; i < keysToRemove.length; i++) {
+                const key = keysToRemove[i];
+                const cached = nodeCache.get(key);
+                if (cached && cached.node.parentNode) {
+                    cached.node.parentNode.removeChild(cached.node);
+                }
+                nodeCache.delete(key);
+            }
+            // Update/add nodes in correct order
+            let previousNode = anchor;
+            for (let i = 0; i < newList.length; i++) {
+                const item = newList[i];
+                const key = newKeys[i];
+                let cached = nodeCache.get(key);
+                // New item: create and cache
+                if (!cached) {
+                    const node = mapperFn(item, i);
+                    cached = { node, item };
+                    nodeCache.set(key, cached);
+                }
+                else {
+                    // Update cached item reference
+                    cached.item = item;
+                }
+                // Ensure node is at correct position (right after previousNode)
+                if (previousNode.nextSibling !== cached.node) {
+                    if (previousNode.nextSibling) {
+                        anchor.parentNode.insertBefore(cached.node, previousNode.nextSibling);
+                    }
+                    else {
+                        anchor.parentNode.appendChild(cached.node);
+                    }
+                }
+                previousNode = cached.node;
+            }
+            currentKeys = newKeys;
+        };
+        // Mount redraw method on anchor
+        anchor.redraw = (newProps) => {
+            if (newProps?.list) {
+                smartUpdate(newProps.list, newProps.mapper);
+            }
+        };
+        // Initialize the list
+        initialize();
+        return anchor;
+    }
+    /**
+     * Simple list rendering without key optimization
+     * Rebuilds the entire list on each update - use for small static lists
+     *
+     * Returns a Comment anchor node. All items are rendered after this anchor.
+     *
+     * @example
+     * ```tsx
+     * const listAnchor = <KTForStatic
+     *   list={items}
+     *   mapper={(item) => <div>{item}</div>}
+     * /> as KTForAnchor;
+     * ```
+     */
+    function KTForStatic(props) {
+        const { list: initList, mapper } = props;
+        // Create anchor comment node
+        const anchor = document.createComment('kt-for-static');
+        let nodes = [];
+        // Simple rebuild on redraw
+        const rebuild = (newList) => {
+            // Remove all old nodes
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (node.parentNode) {
+                    node.parentNode.removeChild(node);
+                }
+            }
+            nodes = [];
+            // Create new nodes
+            let previousNode = anchor;
+            for (let i = 0; i < newList.length; i++) {
+                const item = newList[i];
+                const node = mapper(item, i);
+                nodes.push(node);
+                if (anchor.parentNode) {
+                    if (previousNode.nextSibling) {
+                        anchor.parentNode.insertBefore(node, previousNode.nextSibling);
+                    }
+                    else {
+                        anchor.parentNode.appendChild(node);
+                    }
+                    previousNode = node;
+                }
+            }
+        };
+        // Initial render
+        rebuild(initList);
+        // Mount redraw
+        anchor.redraw = (newProps) => {
+            if (newProps?.list) {
+                rebuild(newProps.list);
+            }
+        };
+        return anchor;
+    }
+
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
+    exports.KTFor = KTFor;
+    exports.KTForStatic = KTForStatic;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.createRedrawableNoref = createRedrawableNoref;

package/dist/index.legacy.js

@@ -231,7 +231,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+     * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -443,8 +443,206 @@ var __ktjs_core__ = (function (exports) {
         return comp;
     }
 
+    /**
+     * KTFor component - Efficient list rendering with key-based DOM reuse
+     * Similar to Svelte's {#each} blocks, provides optimized updates
+     *
+     * Returns a Comment node as anchor point. All list items are rendered after this anchor.
+     *
+     * @example
+     * ```tsx
+     * const listAnchor = <KTFor
+     *   list={items}
+     *   key={(item) => item.id}
+     *   mapper={(item) => <div>{item.name}</div>}
+     * /> as KTForAnchor;
+     *
+     * document.body.appendChild(listAnchor); // Anchor + all items are rendered
+     *
+     * // Update the list
+     * listAnchor.redraw({ list: newItems });
+     * ```
+     */
+    function KTFor(props) {
+        var initList = props.list, getKey = props.key, mapper = props.mapper;
+        // Cache: key -> { node: HTMLElement, item: T }
+        var nodeCache = new Map();
+        // Current key order
+        var currentKeys = [];
+        // Create anchor comment node - marks the position of the list
+        var anchor = document.createComment('kt-for');
+        /**
+         * Get all nodes currently in the DOM that belong to this list
+         * They are all siblings after the anchor node
+         */
+        var getListNodes = function () {
+            var nodes = [];
+            if (!anchor.parentNode)
+                return nodes;
+            var current = anchor.nextSibling;
+            new Set(currentKeys);
+            // Collect nodes that belong to this list
+            while (current) {
+                var isListNode = Array.from(nodeCache.values()).some(function (cached) { return cached.node === current; });
+                if (!isListNode)
+                    break;
+                nodes.push(current);
+                current = current.nextSibling;
+            }
+            return nodes;
+        };
+        /**
+         * Initialize list - append all initial items after anchor
+         */
+        var initialize = function () {
+            for (var i = 0; i < initList.length; i++) {
+                var item = initList[i];
+                var key = getKey(item, i);
+                var node = mapper(item, i);
+                nodeCache.set(key, { node: node, item: item });
+                currentKeys.push(key);
+                // Append to parent if anchor is already in DOM
+                if (anchor.parentNode) {
+                    var lastNode = getListNodes()[getListNodes().length - 1];
+                    if (lastNode) {
+                        lastNode.after(node);
+                    }
+                    else {
+                        anchor.after(node);
+                    }
+                }
+            }
+        };
+        /**
+         * Smart update method - only modifies DOM nodes that changed
+         * Uses key-based diff algorithm to minimize DOM operations
+         */
+        var smartUpdate = function (newList, newMapper) {
+            var mapperFn = newMapper !== null && newMapper !== void 0 ? newMapper : mapper;
+            var newKeys = newList.map(function (item, index) { return getKey(item, index); });
+            if (!anchor.parentNode) {
+                // If anchor is not in DOM yet, just update cache
+                nodeCache.clear();
+                currentKeys = [];
+                for (var i = 0; i < newList.length; i++) {
+                    var item = newList[i];
+                    var key = newKeys[i];
+                    var node = mapperFn(item, i);
+                    nodeCache.set(key, { node: node, item: item });
+                    currentKeys.push(key);
+                }
+                return;
+            }
+            // Find keys to remove (exist in current but not in new)
+            var keysToRemove = currentKeys.filter(function (k) { return !newKeys.includes(k); });
+            for (var i = 0; i < keysToRemove.length; i++) {
+                var key = keysToRemove[i];
+                var cached = nodeCache.get(key);
+                if (cached && cached.node.parentNode) {
+                    cached.node.parentNode.removeChild(cached.node);
+                }
+                nodeCache.delete(key);
+            }
+            // Update/add nodes in correct order
+            var previousNode = anchor;
+            for (var i = 0; i < newList.length; i++) {
+                var item = newList[i];
+                var key = newKeys[i];
+                var cached = nodeCache.get(key);
+                // New item: create and cache
+                if (!cached) {
+                    var node = mapperFn(item, i);
+                    cached = { node: node, item: item };
+                    nodeCache.set(key, cached);
+                }
+                else {
+                    // Update cached item reference
+                    cached.item = item;
+                }
+                // Ensure node is at correct position (right after previousNode)
+                if (previousNode.nextSibling !== cached.node) {
+                    if (previousNode.nextSibling) {
+                        anchor.parentNode.insertBefore(cached.node, previousNode.nextSibling);
+                    }
+                    else {
+                        anchor.parentNode.appendChild(cached.node);
+                    }
+                }
+                previousNode = cached.node;
+            }
+            currentKeys = newKeys;
+        };
+        // Mount redraw method on anchor
+        anchor.redraw = function (newProps) {
+            if (newProps === null || newProps === void 0 ? void 0 : newProps.list) {
+                smartUpdate(newProps.list, newProps.mapper);
+            }
+        };
+        // Initialize the list
+        initialize();
+        return anchor;
+    }
+    /**
+     * Simple list rendering without key optimization
+     * Rebuilds the entire list on each update - use for small static lists
+     *
+     * Returns a Comment anchor node. All items are rendered after this anchor.
+     *
+     * @example
+     * ```tsx
+     * const listAnchor = <KTForStatic
+     *   list={items}
+     *   mapper={(item) => <div>{item}</div>}
+     * /> as KTForAnchor;
+     * ```
+     */
+    function KTForStatic(props) {
+        var initList = props.list, mapper = props.mapper;
+        // Create anchor comment node
+        var anchor = document.createComment('kt-for-static');
+        var nodes = [];
+        // Simple rebuild on redraw
+        var rebuild = function (newList) {
+            // Remove all old nodes
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node.parentNode) {
+                    node.parentNode.removeChild(node);
+                }
+            }
+            nodes = [];
+            // Create new nodes
+            var previousNode = anchor;
+            for (var i = 0; i < newList.length; i++) {
+                var item = newList[i];
+                var node = mapper(item, i);
+                nodes.push(node);
+                if (anchor.parentNode) {
+                    if (previousNode.nextSibling) {
+                        anchor.parentNode.insertBefore(node, previousNode.nextSibling);
+                    }
+                    else {
+                        anchor.parentNode.appendChild(node);
+                    }
+                    previousNode = node;
+                }
+            }
+        };
+        // Initial render
+        rebuild(initList);
+        // Mount redraw
+        anchor.redraw = function (newProps) {
+            if (newProps === null || newProps === void 0 ? void 0 : newProps.list) {
+                rebuild(newProps.list);
+            }
+        };
+        return anchor;
+    }
+
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
+    exports.KTFor = KTFor;
+    exports.KTForStatic = KTForStatic;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.createRedrawableNoref = createRedrawableNoref;

package/dist/index.mjs

@@ -203,7 +203,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -375,4 +375,200 @@ function KTAsync(props) {
     return comp;
 }
 
-export { Fragment, KTAsync, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
+/**
+ * KTFor component - Efficient list rendering with key-based DOM reuse
+ * Similar to Svelte's {#each} blocks, provides optimized updates
+ *
+ * Returns a Comment node as anchor point. All list items are rendered after this anchor.
+ *
+ * @example
+ * ```tsx
+ * const listAnchor = <KTFor
+ *   list={items}
+ *   key={(item) => item.id}
+ *   mapper={(item) => <div>{item.name}</div>}
+ * /> as KTForAnchor;
+ *
+ * document.body.appendChild(listAnchor); // Anchor + all items are rendered
+ *
+ * // Update the list
+ * listAnchor.redraw({ list: newItems });
+ * ```
+ */
+function KTFor(props) {
+    const { list: initList, key: getKey, mapper } = props;
+    // Cache: key -> { node: HTMLElement, item: T }
+    const nodeCache = new Map();
+    // Current key order
+    let currentKeys = [];
+    // Create anchor comment node - marks the position of the list
+    const anchor = document.createComment('kt-for');
+    /**
+     * Get all nodes currently in the DOM that belong to this list
+     * They are all siblings after the anchor node
+     */
+    const getListNodes = () => {
+        const nodes = [];
+        if (!anchor.parentNode)
+            return nodes;
+        let current = anchor.nextSibling;
+        new Set(currentKeys);
+        // Collect nodes that belong to this list
+        while (current) {
+            const isListNode = Array.from(nodeCache.values()).some((cached) => cached.node === current);
+            if (!isListNode)
+                break;
+            nodes.push(current);
+            current = current.nextSibling;
+        }
+        return nodes;
+    };
+    /**
+     * Initialize list - append all initial items after anchor
+     */
+    const initialize = () => {
+        for (let i = 0; i < initList.length; i++) {
+            const item = initList[i];
+            const key = getKey(item, i);
+            const node = mapper(item, i);
+            nodeCache.set(key, { node, item });
+            currentKeys.push(key);
+            // Append to parent if anchor is already in DOM
+            if (anchor.parentNode) {
+                const lastNode = getListNodes()[getListNodes().length - 1];
+                if (lastNode) {
+                    lastNode.after(node);
+                }
+                else {
+                    anchor.after(node);
+                }
+            }
+        }
+    };
+    /**
+     * Smart update method - only modifies DOM nodes that changed
+     * Uses key-based diff algorithm to minimize DOM operations
+     */
+    const smartUpdate = (newList, newMapper) => {
+        const mapperFn = newMapper ?? mapper;
+        const newKeys = newList.map((item, index) => getKey(item, index));
+        if (!anchor.parentNode) {
+            // If anchor is not in DOM yet, just update cache
+            nodeCache.clear();
+            currentKeys = [];
+            for (let i = 0; i < newList.length; i++) {
+                const item = newList[i];
+                const key = newKeys[i];
+                const node = mapperFn(item, i);
+                nodeCache.set(key, { node, item });
+                currentKeys.push(key);
+            }
+            return;
+        }
+        // Find keys to remove (exist in current but not in new)
+        const keysToRemove = currentKeys.filter((k) => !newKeys.includes(k));
+        for (let i = 0; i < keysToRemove.length; i++) {
+            const key = keysToRemove[i];
+            const cached = nodeCache.get(key);
+            if (cached && cached.node.parentNode) {
+                cached.node.parentNode.removeChild(cached.node);
+            }
+            nodeCache.delete(key);
+        }
+        // Update/add nodes in correct order
+        let previousNode = anchor;
+        for (let i = 0; i < newList.length; i++) {
+            const item = newList[i];
+            const key = newKeys[i];
+            let cached = nodeCache.get(key);
+            // New item: create and cache
+            if (!cached) {
+                const node = mapperFn(item, i);
+                cached = { node, item };
+                nodeCache.set(key, cached);
+            }
+            else {
+                // Update cached item reference
+                cached.item = item;
+            }
+            // Ensure node is at correct position (right after previousNode)
+            if (previousNode.nextSibling !== cached.node) {
+                if (previousNode.nextSibling) {
+                    anchor.parentNode.insertBefore(cached.node, previousNode.nextSibling);
+                }
+                else {
+                    anchor.parentNode.appendChild(cached.node);
+                }
+            }
+            previousNode = cached.node;
+        }
+        currentKeys = newKeys;
+    };
+    // Mount redraw method on anchor
+    anchor.redraw = (newProps) => {
+        if (newProps?.list) {
+            smartUpdate(newProps.list, newProps.mapper);
+        }
+    };
+    // Initialize the list
+    initialize();
+    return anchor;
+}
+/**
+ * Simple list rendering without key optimization
+ * Rebuilds the entire list on each update - use for small static lists
+ *
+ * Returns a Comment anchor node. All items are rendered after this anchor.
+ *
+ * @example
+ * ```tsx
+ * const listAnchor = <KTForStatic
+ *   list={items}
+ *   mapper={(item) => <div>{item}</div>}
+ * /> as KTForAnchor;
+ * ```
+ */
+function KTForStatic(props) {
+    const { list: initList, mapper } = props;
+    // Create anchor comment node
+    const anchor = document.createComment('kt-for-static');
+    let nodes = [];
+    // Simple rebuild on redraw
+    const rebuild = (newList) => {
+        // Remove all old nodes
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+        }
+        nodes = [];
+        // Create new nodes
+        let previousNode = anchor;
+        for (let i = 0; i < newList.length; i++) {
+            const item = newList[i];
+            const node = mapper(item, i);
+            nodes.push(node);
+            if (anchor.parentNode) {
+                if (previousNode.nextSibling) {
+                    anchor.parentNode.insertBefore(node, previousNode.nextSibling);
+                }
+                else {
+                    anchor.parentNode.appendChild(node);
+                }
+                previousNode = node;
+            }
+        }
+    };
+    // Initial render
+    rebuild(initList);
+    // Mount redraw
+    anchor.redraw = (newProps) => {
+        if (newProps?.list) {
+            rebuild(newProps.list);
+        }
+    };
+    return anchor;
+}
+
+export { Fragment, KTAsync, KTFor, KTForStatic, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.d.ts

@@ -92,7 +92,7 @@ interface KTBaseAttribute {
   title?: string;
   placeholder?: string;
   contenteditable?: boolean;
-  value?: string;
+  value?: any;
   valueAsDate?: Date;
   valueAsNumber?: number;
   label?: string;
@@ -114,12 +114,30 @@ type KTPrefixedEventHandlers = {
 };
 
 type KTSpecialEventHandlers = {
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktchangenumber'?: (value: number) => void;
 
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktinputnumber'?: (value: number) => void;
 };
 
@@ -136,7 +154,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -203,7 +203,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

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

@@ -86,7 +86,7 @@ interface KTBaseAttribute {
   title?: string;
   placeholder?: string;
   contenteditable?: boolean;
-  value?: string;
+  value?: any;
   valueAsDate?: Date;
   valueAsNumber?: number;
   label?: string;
@@ -108,12 +108,30 @@ type KTPrefixedEventHandlers = {
 };
 
 type KTSpecialEventHandlers = {
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktchange'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktchangenumber'?: (value: number) => void;
 
+  /**
+   * Directly extract `value` from the input element
+   */
   'on:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and trim it
+   */
   'ontrim:ktinput'?: (value: string) => void;
+  /**
+   * Directly extract `value` and parse it to number
+   */
   'on:ktinputnumber'?: (value: number) => void;
 };
 
@@ -130,7 +148,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -203,7 +203,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.5 (Last Update: 2026.01.25 18:25:48.373)
+ * @version 0.16.0 (Last Update: 2026.01.27 17:30:39.673)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/package.json

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