@ktjs/core 0.28.1 → 0.29.0

package/dist/index.iife.js

@@ -1,1143 +0,0 @@
-var __ktjs_core__ = (function (exports) {
-    'use strict';
-
-    // 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' });
-
-    const isKT = (obj) => obj?.isKT;
-    const isRef = (obj) => obj?.ktType === 1 /* KTReactiveType.REF */;
-    const isComputed = (obj) => obj?.ktType === 2 /* KTReactiveType.COMPUTED */;
-
-    const booleanHandler = (element, key, value) => {
-        if (key in element) {
-            element[key] = !!value;
-        }
-        else {
-            element.setAttribute(key, value);
-        }
-    };
-    const valueHandler = (element, key, value) => {
-        if (key in element) {
-            element[key] = value;
-        }
-        else {
-            element.setAttribute(key, value);
-        }
-    };
-    // Attribute handlers map for optimized lookup
-    const handlers = {
-        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];
-        }
-    };
-    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);
-                }
-            }
-        }
-    }
-    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.');
-        }
-    }
-
-    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) {
-            return;
-        }
-        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);
-        }
-    }
-    function applyContent(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;
-        }
-    }
-    /**
-     * 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] : []);
-    }
-    /**
-     * 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);
-        }
-    };
-    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;
-    };
-    // # 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);
-    };
-    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');
-            }
-        }
-    };
-
-    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);
-            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(_mutator) {
-            console.warn('[kt.js warn]','KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead');
-        }
-        /**
-         * 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;
-        }
-    }
-    /**
-     * 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);
-    }
-
-    /**
-     * 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
-        for (let i = 0; i < reactives.length; i++) {
-            reactives[i].addOnChange(run);
-        }
-        // auto run unless lazy
-        if (!lazy) {
-            run();
-        }
-        // stop function
-        return () => {
-            if (!active) {
-                return;
-            }
-            active = false;
-            for (let i = 0; i < reactives.length; i++) {
-                reactives[i].removeOnChange(run);
-            }
-            // final cleanup
-            onCleanup();
-        };
-    }
-
-    const toReactive = (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;
-    }
-
-    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:');
-        }
-    }
-
-    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);
-    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.1 (Last Update: 2026.02.10 11:23:01.128)
-     * @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;
-    };
-
-    /**
-     * Fragment - Container component for managing arrays of child elements
-     *
-     * Features:
-     * 1. Returns a comment anchor node, child elements are inserted after the anchor
-     * 2. Supports reactive arrays, automatically updates DOM when array changes
-     * 3. Basic version uses simple replacement algorithm (remove all old elements, insert all new elements)
-     * 4. Future enhancement: key-based optimization
-     *
-     * Usage example:
-     * ```tsx
-     * const children = ref([<div>A</div>, <div>B</div>]);
-     * const fragment = <Fragment children={children} />;
-     * document.body.appendChild(fragment);
-     *
-     * // Automatic update
-     * children.value = [<div>C</div>, <div>D</div>];
-     * ```
-     */
-    function Fragment$1(props) {
-        // 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;
-    }
-    /**
-     * Convert KTRawContent to HTMLElement array
-     */
-    function convertChildrenToElements(children) {
-        const elements = [];
-        const processChild = (child) => {
-            if (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 create = (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
-     */
-    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;
-    }
-    /**
-     * 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 });
-    }
-    /**
-     * JSX Development runtime - same as jsx but with additional dev checks
-     */
-    const jsxDEV = (...args) => {
-        // console.log('JSX DEV called:', ...args);
-        // console.log('children', (args[1] as any)?.children);
-        return jsx(...args);
-    };
-    /**
-     * JSX runtime for React 17+ automatic runtime
-     * This is called when using jsx: "react-jsx" or "react-jsxdev"
-     */
-    const jsxs = jsx;
-    /**
-     * 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;
-    }
-
-    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;
-    }
-
-    /**
-     * 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);
-            nodeMap.set(itemKey, node);
-            elements.push(node);
-        }
-        anchor.__kt_for_list__ = elements;
-        $setRef(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;
-    }
-
-    exports.$modelOrRef = $modelOrRef;
-    exports.$setRef = $setRef;
-    exports.Fragment = Fragment;
-    exports.KTAsync = KTAsync;
-    exports.KTComputed = KTComputed;
-    exports.KTFor = KTFor;
-    exports.KTRef = KTRef;
-    exports.computed = computed;
-    exports.createElement = h;
-    exports.createRedrawable = createRedrawable;
-    exports.dereactive = dereactive;
-    exports.effect = effect;
-    exports.h = h;
-    exports.isComputed = isComputed;
-    exports.isKT = isKT;
-    exports.isRef = isRef;
-    exports.jsx = jsx;
-    exports.jsxDEV = jsxDEV;
-    exports.jsxs = jsxs;
-    exports.ref = ref;
-    exports.surfaceRef = surfaceRef;
-    exports.toReactive = toReactive;
-    exports.toRef = toRef;
-
-    return exports;
-
-})({});