@ktjs/core 0.28.1 → 0.29.0

package/dist/index.d.ts

@@ -1,1468 +1,434 @@
-import { otherstring, HTMLTag, SVGTag, MathMLTag } from '@ktjs/shared';
-export { HTMLTag, InputElementTag, MathMLTag, SVGTag } from '@ktjs/shared';
-
-declare class KTComputed<T> {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT: true;
-    ktType: KTReactiveType;
-    constructor(_calculator: () => T, reactives: Array<KTReactive<unknown>>);
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value(): T;
-    set value(_newValue: T);
-    /**
-     * Force listeners to run once with the latest computed result.
-     */
-    notify(): void;
-    /**
-     * Computed values are derived from dependencies and should not be mutated manually.
-     */
-    mutate<R = void>(_mutator?: (value: T) => R): void;
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback: ReactiveChangeHandler<T>): void;
-    /**
-     * Unregister a callback
-     * @param callback (newValue, oldValue) => xxx
-     */
-    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
-}
-/**
- * Create a reactive computed value
- * @param computeFn
- * @param reactives refs and computeds that this computed depends on
- */
-declare function computed<T = JSX.Element>(computeFn: () => T, reactives: Array<KTReactive<any>>): KTComputed<T>;
-
-interface KTEffectOptions {
-    lazy: boolean;
-    onCleanup: () => void;
-    debugName: string;
-}
-/**
- * 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
- */
-declare function effect(effectFn: () => void, reactives: Array<KTReactive<any>>, options?: Partial<KTEffectOptions>): () => void;
-
-declare const toReactive: <T>(value: T | KTReactive<T>, onChange?: ReactiveChangeHandler<T>) => KTReactive<T>;
-/**
- * Extracts the value from a KTReactive, or returns the value directly if it's not reactive.
- */
-declare function dereactive<T = JSX.Element>(value: T | KTReactive<T>): T;
-type KTReactify<T> = T extends boolean ? KTReactive<boolean> : T extends any ? KTReactive<T> : never;
-type KTReactifyObject<T extends object> = {
-    [K in keyof T]: KTReactify<T[K]>;
-};
-type KTReactifyProps<T extends object> = {
-    [K in keyof T]: KTReactify<Exclude<T[K], undefined>> | T[K];
-};
-
-declare const enum KTReactiveType {
-    REF = 1,
-    COMPUTED = 2
-}
-declare const isKT: <T = any>(obj: any) => obj is KTReactive<T>;
-declare const isRef: <T = any>(obj: any) => obj is KTRef<T>;
-declare const isComputed: <T = any>(obj: any) => obj is KTComputed<T>;
-
-type ReactiveChangeHandler<T> = (newValue: T, oldValue: T) => void;
-
-declare class KTReactive<T> {
-  /**
-   * Indicates that this is a KTRef instance
-   */
-  isKT: boolean;
-
-  ktType: KTReactiveType;
-
-  /**
-   * If new value and old value are both nodes, the old one will be replaced in the DOM
-   */
-  get value();
-  set value(newValue: T);
-
-  /**
-   * Force all listeners to run even when reference identity has not changed.
-   * Useful for in-place array/object mutations.
-   */
-  notify(): void;
-
-  /**
-   * Mutate current value in-place and notify listeners once.
-   *
-   * @example
-   * const items = ref<number[]>([1, 2]);
-   * items.mutate((list) => list.push(3));
-   */
-  mutate<R = void>(mutator: (currentValue: T) => R): R;
-  /**
-   * Register a callback when the value changes
-   * @param callback (newValue, oldValue) => xxx
-   */
-  addOnChange(callback: ReactiveChangeHandler<T>): void;
-  removeOnChange(callback: ReactiveChangeHandler<T>): void;
-}
-
-declare class KTRef<T> {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT: true;
-    ktType: KTReactiveType;
-    constructor(_value: T, _onChanges: Array<ReactiveChangeHandler<T>>);
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value(): T;
-    set value(newValue: T);
-    /**
-     * Force all listeners to run even when reference identity has not changed.
-     * Useful for in-place array/object mutations.
-     */
-    notify(): void;
-    /**
-     * Mutate current value in-place and notify listeners once.
-     *
-     * @example
-     * const items = ref<number[]>([1, 2]);
-     * items.mutate((list) => list.push(3));
-     */
-    mutate<R = void>(mutator: (currentValue: T) => R): R;
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback: ReactiveChangeHandler<T>): void;
-    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
-}
-/**
- * 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
- */
-declare function ref<T = JSX.Element>(value?: T, onChange?: ReactiveChangeHandler<T>): KTRef<T>;
-/**
- * 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
- */
-declare const toRef: <T = any>(o: any) => KTRef<T>;
-type KTSurfaceRef<T extends Object> = {
-    [K in keyof T]: KTRef<T[K]>;
-} & {
-    /**
-     * Get the dereferenced object like the original one
-     */
-    kcollect: () => T;
-};
-/**
- * Make all first-level properties of the object a `KTRef`.
- * - `obj.a.b` is not reactive
- */
-declare const surfaceRef: <T extends Object>(obj: T) => KTSurfaceRef<T>;
-/**
- * Assert k-model to be a ref object
- */
-declare const $modelOrRef: <T = any>(props: any, defaultValue?: T) => KTRef<T>;
-declare const $setRef: (props: {
-    ref?: KTRef<any>;
-}, node: Node) => void;
-
-type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag
-  ? SVGElementTagNameMap[T]
-  : T extends HTMLTag
-    ? HTMLElementTagNameMap[T]
-    : T extends MathMLTag
-      ? MathMLElementTagNameMap[T]
-      : HTMLElement;
-
-type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
-type KTAvailableContent = SingleContent | KTAvailableContent[];
-type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
-type KTRawAttr = KTAttribute | null | undefined | '' | false;
-type KTRawContents = KTAvailableContent;
-
-/**
- * Event handler type for DOM events
- */
-type EventHandler<T extends Event = Event> = (this: HTMLElement, ev: T) => any;
-
-/**
- * Used to create enhanced HTML elements
- */
-interface KTBaseAttribute {
-  [k: string]: any;
-
-  // # kt-specific attributes
-  ref?: KTRef<JSX.Element>;
-
-  /**
-   * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
-   */
-  'k-if'?: any;
-
-  /**
-   * 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>;
-
-  /**
-   * Directly apply html string to `innerHTML`.
-   * - Would be reactive if `KTRef` instance is provided
-   */
-  'k-html'?: any;
-
-  // # normal HTML attributes
-  id?: string;
-  class?: string;
-  className?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-
-  type?:
-    | 'text'
-    | 'password'
-    | 'email'
-    | 'number'
-    | 'tel'
-    | 'url'
-    | 'search'
-    | 'date'
-    | 'datetime-local'
-    | 'time'
-    | 'month'
-    | 'week'
-    | 'color'
-    | 'range'
-    | 'file'
-    | 'checkbox'
-    | 'radio'
-    | 'hidden'
-    | 'submit'
-    | 'reset'
-    | 'button'
-    | 'image'
-    | otherstring;
-  for?: string;
-
-  name?: string;
-  title?: string;
-  placeholder?: string;
-  contenteditable?: boolean;
-  value?: any;
-  valueAsDate?: Date;
-  valueAsNumber?: number;
-  label?: string;
-  disabled?: boolean;
-
-  min?: string | number;
-  max?: string | number;
-  step?: string | number;
-
-  selected?: boolean;
-  checked?: boolean;
-
-  action?: string;
-  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
-}
-
-type KTPrefixedEventAttribute = {
-  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
-};
-
-type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
-
-type KTComponent = (
-  props: {
-    ref?: KTRef<JSX.Element>;
-    children?: KTRawContent;
-  } & KTAttribute &
-    any,
-) => JSX.Element | Promise<JSX.Element> | any;
-
-/**
- * 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.
- */
-declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
-
-type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
-/**
- * @param tag html tag or function component
- * @param props properties/attributes
- */
-declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
-/**
- * Fragment support - returns an array of children
- * Enhanced Fragment component that manages arrays of elements
- */
-declare function Fragment(props: {
-    children?: KTRawContent;
-}): JSX.Element;
-/**
- * JSX Development runtime - same as jsx but with additional dev checks
- */
-declare const jsxDEV: typeof jsx;
-/**
- * JSX runtime for React 17+ automatic runtime
- * This is called when using jsx: "react-jsx" or "react-jsxdev"
- */
-declare const jsxs: typeof 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
- */
-declare function createRedrawable<T>(creator: () => T): KTRef<T> & {
-    redraw: () => T;
-};
-
-// Base events available to all HTML elements
-type BaseAttr = KTPrefixedEventAttribute &
-  KTReactifyProps<{
-    [k: string]: any;
-
-    // # base attributes
-    class?: string;
-    className?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-  }>;
-
-interface AttributesMap {
-  // Anchor element
-  a: BaseAttr &
-    KTReactifyProps<{
-      download?: string;
-      href?: string;
-      hreflang?: string;
-      ping?: string;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      rel?: string;
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-      type?: string;
-    }>;
-
-  // Area element
-  area: BaseAttr &
-    KTReactifyProps<{
-      alt?: string;
-      coords?: string;
-      download?: string;
-      href?: string;
-      ping?: string;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      rel?: string;
-      shape?: 'rect' | 'circle' | 'poly' | 'default';
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    }>;
-
-  // Audio element
-  audio: BaseAttr &
-    KTReactifyProps<{
-      autoplay?: boolean;
-      controls?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      loop?: boolean;
-      muted?: boolean;
-      preload?: 'none' | 'metadata' | 'auto' | '';
-      src?: string;
-    }>;
-
-  // Base element
-  base: BaseAttr &
-    KTReactifyProps<{
-      href?: string;
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    }>;
-
-  // Body element
-  body: BaseAttr & KTReactifyProps<{}>;
-
-  // BR element
-  br: BaseAttr & KTReactifyProps<{}>;
-
-  // Button element
-  button: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      form?: string;
-      formaction?: string;
-      formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-      formmethod?: 'get' | 'post' | 'dialog';
-      formnovalidate?: boolean;
-      formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
-      name?: string;
-      type?: 'submit' | 'reset' | 'button';
-      value?: string;
-    }>;
-
-  // Canvas element
-  canvas: BaseAttr &
-    KTReactifyProps<{
-      height?: number | string;
-      width?: number | string;
-    }>;
-
-  // Table caption element
-  caption: BaseAttr & KTReactifyProps<{}>;
-
-  // Col element
-  col: BaseAttr &
-    KTReactifyProps<{
-      span?: number | string;
-    }>;
-
-  // Colgroup element
-  colgroup: BaseAttr &
-    KTReactifyProps<{
-      span?: number | string;
-    }>;
-
-  // Data element
-  data: BaseAttr &
-    KTReactifyProps<{
-      value?: string;
-    }>;
-
-  // Datalist element
-  datalist: BaseAttr & KTReactifyProps<{}>;
-
-  // Del element
-  del: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-      datetime?: string;
-    }>;
-
-  // Details element
-  details: BaseAttr &
-    KTReactifyProps<{
-      open?: boolean;
-    }>;
-
-  // Dialog element
-  dialog: BaseAttr &
-    KTReactifyProps<{
-      open?: boolean;
-    }>;
-
-  // Embed element
-  embed: BaseAttr &
-    KTReactifyProps<{
-      height?: number | string;
-      src?: string;
-      type?: string;
-      width?: number | string;
-    }>;
-
-  // Fieldset element
-  fieldset: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      form?: string;
-      name?: string;
-    }>;
-
-  // Form element
-  form: BaseAttr &
-    KTReactifyProps<{
-      'accept-charset'?: string;
-      action?: string;
-      autocomplete?: 'on' | 'off';
-      enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-      method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
-
-      name?: string;
-      novalidate?: boolean;
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    }>;
-
-  // Head element
-  head: BaseAttr & KTReactifyProps<{}>;
-
-  // HR element
-  hr: BaseAttr & KTReactifyProps<{}>;
-
-  // HTML element
-  html: BaseAttr & KTReactifyProps<{}>;
-
-  // IFrame element
-  iframe: BaseAttr &
-    KTReactifyProps<{
-      allow?: string;
-      allowfullscreen?: boolean;
-      allowpaymentrequest?: boolean;
-      height?: number | string;
-      loading?: 'eager' | 'lazy';
-      name?: string;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      sandbox?: string;
-      src?: string;
-      srcdoc?: string;
-      width?: number | string;
-    }>;
-
-  // Image element
-  img: BaseAttr &
-    KTReactifyProps<{
-      alt?: string;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      decoding?: 'sync' | 'async' | 'auto';
-      height?: number | string;
-      ismap?: boolean;
-      loading?: 'eager' | 'lazy';
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      sizes?: string;
-      src?: string;
-      srcset?: string;
-      usemap?: string;
-      width?: number | string;
-    }>;
-
-  // Input element
-  input: BaseAttr &
-    KTReactifyProps<{
-      accept?: string;
-      alt?: string;
-      autocomplete?: string;
-      checked?: boolean;
-      dirname?: string;
-      disabled?: boolean;
-      form?: string;
-      formaction?: string;
-      formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-      formmethod?: 'get' | 'post';
-      formnovalidate?: boolean;
-      formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
-      height?: number | string;
-      list?: string;
-      max?: number | string;
-      maxlength?: number | string;
-      min?: number | string;
-      minlength?: number | string;
-      multiple?: boolean;
-      name?: string;
-      pattern?: string;
-      placeholder?: string;
-      readonly?: boolean;
-      required?: boolean;
-      size?: number | string;
-      src?: string;
-      step?: number | string;
-      type?:
-        | 'button'
-        | 'checkbox'
-        | 'color'
-        | 'date'
-        | 'datetime-local'
-        | 'email'
-        | 'file'
-        | 'hidden'
-        | 'image'
-        | 'month'
-        | 'number'
-        | 'password'
-        | 'radio'
-        | 'range'
-        | 'reset'
-        | 'search'
-        | 'submit'
-        | 'tel'
-        | 'text'
-        | 'time'
-        | 'url'
-        | 'week';
-      value?: string;
-      width?: number | string;
-    }>;
-
-  // Ins element
-  ins: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-      datetime?: string;
-    }>;
-
-  // Label element
-  label: BaseAttr &
-    KTReactifyProps<{
-      for?: string;
-    }>;
-
-  // Legend element
-  legend: BaseAttr & KTReactifyProps<{}>;
-
-  // LI element
-  li: BaseAttr &
-    KTReactifyProps<{
-      value?: number | string;
-    }>;
-
-  // Link element
-  link: BaseAttr &
-    KTReactifyProps<{
-      as?: string;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      disabled?: boolean;
-      href?: string;
-      hreflang?: string;
-      imagesizes?: string;
-      imagesrcset?: string;
-      integrity?: string;
-      media?: string;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      rel?: string;
-      sizes?: string;
-      type?: string;
-    }>;
-
-  // Map element
-  map: BaseAttr &
-    KTReactifyProps<{
-      name?: string;
-    }>;
-
-  // Menu element
-  menu: BaseAttr & KTReactifyProps<{}>;
-
-  // Meta element
-  meta: BaseAttr &
-    KTReactifyProps<{
-      charset?: string;
-      content?: string;
-      'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
-      name?: string;
-    }>;
-
-  // Meter element
-  meter: BaseAttr &
-    KTReactifyProps<{
-      form?: string;
-      high?: number | string;
-      low?: number | string;
-      max?: number | string;
-      min?: number | string;
-      optimum?: number | string;
-      value?: number | string;
-    }>;
-
-  // Object element
-  object: BaseAttr &
-    KTReactifyProps<{
-      data?: string;
-      form?: string;
-      height?: number | string;
-      name?: string;
-      type?: string;
-      usemap?: string;
-      width?: number | string;
-    }>;
-
-  // OL element
-  ol: BaseAttr &
-    KTReactifyProps<{
-      reversed?: boolean;
-      start?: number | string;
-      type?: '1' | 'a' | 'A' | 'i' | 'I';
-    }>;
-
-  // Optgroup element
-  optgroup: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      label?: string;
-    }>;
-
-  // Option element
-  option: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      label?: string;
-      selected?: boolean;
-      value?: string;
-    }>;
-
-  // Output element
-  output: BaseAttr &
-    KTReactifyProps<{
-      for?: string;
-      form?: string;
-      name?: string;
-    }>;
-
-  // Picture element
-  picture: BaseAttr & KTReactifyProps<{}>;
-
-  // Pre element
-  pre: BaseAttr & KTReactifyProps<{}>;
-
-  // Progress element
-  progress: BaseAttr &
-    KTReactifyProps<{
-      max?: number | string;
-      value?: number | string;
-    }>;
-
-  // Quote element (q and blockquote)
-  q: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-    }>;
-
-  blockquote: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-    }>;
-
-  // Script element
-  script: BaseAttr &
-    KTReactifyProps<{
-      async?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      defer?: boolean;
-      integrity?: string;
-      nomodule?: boolean;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      src?: string;
-      type?: string;
-    }>;
-
-  // Select element
-  select: BaseAttr &
-    KTReactifyProps<{
-      autocomplete?: string;
-      disabled?: boolean;
-      form?: string;
-      multiple?: boolean;
-      name?: string;
-      required?: boolean;
-      size?: number | string;
-    }>;
-
-  // Slot element
-  slot: BaseAttr &
-    KTReactifyProps<{
-      name?: string;
-    }>;
-
-  // Source element
-  source: BaseAttr &
-    KTReactifyProps<{
-      height?: number | string;
-      media?: string;
-      sizes?: string;
-      src?: string;
-      srcset?: string;
-      type?: string;
-      width?: number | string;
-    }>;
-
-  // Style element
-  style: BaseAttr &
-    KTReactifyProps<{
-      media?: string;
-    }>;
-
-  // Table element
-  table: BaseAttr & KTReactifyProps<{}>;
-
-  // Table body/footer/header elements
-  tbody: BaseAttr & KTReactifyProps<{}>;
-
-  tfoot: BaseAttr & KTReactifyProps<{}>;
-
-  thead: BaseAttr & KTReactifyProps<{}>;
-
-  // Table cell elements
-  td: BaseAttr &
-    KTReactifyProps<{
-      colspan?: number | string;
-      headers?: string;
-      rowspan?: number | string;
-    }>;
-
-  th: BaseAttr &
-    KTReactifyProps<{
-      abbr?: string;
-      colspan?: number | string;
-      headers?: string;
-      rowspan?: number | string;
-      scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
-    }>;
-
-  // Template element
-  template: BaseAttr & KTReactifyProps<{}>;
-
-  // Textarea element
-  textarea: BaseAttr &
-    KTReactifyProps<{
-      autocomplete?: string;
-      cols?: number | string;
-      dirname?: string;
-      disabled?: boolean;
-      form?: string;
-      maxlength?: number | string;
-      minlength?: number | string;
-      name?: string;
-      placeholder?: string;
-      readonly?: boolean;
-      required?: boolean;
-      rows?: number | string;
-      wrap?: 'hard' | 'soft' | 'off';
-    }>;
-
-  // Time element
-  time: BaseAttr &
-    KTReactifyProps<{
-      datetime?: string;
-    }>;
-
-  // Title element
-  title: BaseAttr & KTReactifyProps<{}>;
-
-  // TR element
-  tr: BaseAttr & KTReactifyProps<{}>;
-
-  // Track element
-  track: BaseAttr &
-    KTReactifyProps<{
-      default?: boolean;
-      kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-      label?: string;
-      src?: string;
-      srclang?: string;
-    }>;
-
-  // UL element
-  ul: BaseAttr & KTReactifyProps<{}>;
-
-  // Video element
-  video: BaseAttr &
-    KTReactifyProps<{
-      autoplay?: boolean;
-      controls?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      height?: number | string;
-      loop?: boolean;
-      muted?: boolean;
-      playsinline?: boolean;
-      poster?: string;
-      preload?: 'none' | 'metadata' | 'auto' | '';
-      src?: string;
-      width?: number | string;
-    }>;
-
-  // Generic HTMLElement (no specific attributes beyond BaseEvent)
-  abbr: BaseAttr & KTReactifyProps<{}>;
-  address: BaseAttr & KTReactifyProps<{}>;
-  article: BaseAttr & KTReactifyProps<{}>;
-  aside: BaseAttr & KTReactifyProps<{}>;
-  b: BaseAttr & KTReactifyProps<{}>;
-  bdi: BaseAttr & KTReactifyProps<{}>;
-  bdo: BaseAttr & KTReactifyProps<{}>;
-  cite: BaseAttr & KTReactifyProps<{}>;
-  code: BaseAttr & KTReactifyProps<{}>;
-  dd: BaseAttr & KTReactifyProps<{}>;
-  dfn: BaseAttr & KTReactifyProps<{}>;
-  div: BaseAttr & KTReactifyProps<{}>;
-  dl: BaseAttr & KTReactifyProps<{}>;
-  dt: BaseAttr & KTReactifyProps<{}>;
-  em: BaseAttr & KTReactifyProps<{}>;
-  figcaption: BaseAttr & KTReactifyProps<{}>;
-  figure: BaseAttr & KTReactifyProps<{}>;
-  footer: BaseAttr & KTReactifyProps<{}>;
-  h1: BaseAttr & KTReactifyProps<{}>;
-  h2: BaseAttr & KTReactifyProps<{}>;
-  h3: BaseAttr & KTReactifyProps<{}>;
-  h4: BaseAttr & KTReactifyProps<{}>;
-  h5: BaseAttr & KTReactifyProps<{}>;
-  h6: BaseAttr & KTReactifyProps<{}>;
-  header: BaseAttr & KTReactifyProps<{}>;
-  hgroup: BaseAttr & KTReactifyProps<{}>;
-  i: BaseAttr & KTReactifyProps<{}>;
-  kbd: BaseAttr & KTReactifyProps<{}>;
-  main: BaseAttr & KTReactifyProps<{}>;
-  mark: BaseAttr & KTReactifyProps<{}>;
-  nav: BaseAttr & KTReactifyProps<{}>;
-  noscript: BaseAttr & KTReactifyProps<{}>;
-  p: BaseAttr & KTReactifyProps<{}>;
-  rp: BaseAttr & KTReactifyProps<{}>;
-  rt: BaseAttr & KTReactifyProps<{}>;
-  ruby: BaseAttr & KTReactifyProps<{}>;
-  s: BaseAttr & KTReactifyProps<{}>;
-  samp: BaseAttr & KTReactifyProps<{}>;
-  search: BaseAttr & KTReactifyProps<{}>;
-  section: BaseAttr & KTReactifyProps<{}>;
-  small: BaseAttr & KTReactifyProps<{}>;
-  span: BaseAttr & KTReactifyProps<{}>;
-  strong: BaseAttr & KTReactifyProps<{}>;
-  sub: BaseAttr & KTReactifyProps<{}>;
-  summary: BaseAttr & KTReactifyProps<{}>;
-  sup: BaseAttr & KTReactifyProps<{}>;
-  u: BaseAttr & KTReactifyProps<{}>;
-  var: BaseAttr & KTReactifyProps<{}>;
-  wbr: BaseAttr & KTReactifyProps<{}>;
-
-  svg: BaseAttr & {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    width?: number | string;
-    height?: number | string;
-    viewBox?: string;
-    xmlns?: string;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number | string;
-    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
-    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
-    strokeDasharray?: string;
-    strokeDashoffset?: number | string;
-    opacity?: number | string;
-    preserveAspectRatio?: string;
-    transform?: string;
-    x?: number | string;
-    y?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-    r?: number | string;
-    cx?: number | string;
-    cy?: number | string;
-    d?: string;
-    points?: string;
-    pathLength?: number | string;
-    viewbox?: string;
-    role?: string;
-    focusable?: boolean | 'true' | 'false';
-    xlinkHref?: string; // legacy xlink:href
-  };
-}
-
-interface SVGAttributesMap {
-  a: AttributesMap['svg'] & { href?: string; x?: number | string; y?: number | string };
-  animate: AttributesMap['svg'] & {
-    attributeName?: string;
-    from?: string | number;
-    to?: string | number;
-    dur?: string;
-    repeatCount?: string | number;
-  };
-  animateMotion: AttributesMap['svg'] & { path?: string; dur?: string; rotate?: string };
-  animateTransform: AttributesMap['svg'] & { type?: string; from?: string; to?: string; dur?: string };
-  circle: AttributesMap['svg'] & { cx?: number | string; cy?: number | string; r?: number | string };
-  clipPath: AttributesMap['svg'] & { clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox' };
-  defs: AttributesMap['svg'];
-  desc: AttributesMap['svg'];
-  ellipse: AttributesMap['svg'] & {
-    cx?: number | string;
-    cy?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-  };
-
-  // Filter primitives (provide common props)
-  feBlend: AttributesMap['svg'] & { in?: string; in2?: string; mode?: string };
-  feColorMatrix: AttributesMap['svg'] & {
-    type?: 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
-    values?: string;
-  };
-  feComponentTransfer: AttributesMap['svg'] & {};
-  feComposite: AttributesMap['svg'] & {
-    in?: string;
-    in2?: string;
-    operator?: string;
-    k1?: number | string;
-    k2?: number | string;
-    k3?: number | string;
-    k4?: number | string;
-  };
-  feConvolveMatrix: AttributesMap['svg'] & {
-    order?: string | number;
-    kernelMatrix?: string;
-    divisor?: string | number;
-    bias?: string | number;
-  };
-  feDiffuseLighting: AttributesMap['svg'] & {};
-  feDisplacementMap: AttributesMap['svg'] & {
-    in?: string;
-    in2?: string;
-    scale?: number | string;
-    xChannelSelector?: string;
-    yChannelSelector?: string;
-  };
-  feDistantLight: AttributesMap['svg'] & { azimuth?: number | string; elevation?: number | string };
-  feDropShadow: AttributesMap['svg'] & {
-    dx?: number | string;
-    dy?: number | string;
-    stdDeviation?: number | string;
-    floodColor?: string;
-    floodOpacity?: number | string;
-  };
-  feFlood: AttributesMap['svg'] & { floodColor?: string; floodOpacity?: number | string };
-  feFuncA: AttributesMap['svg'] & {};
-  feFuncB: AttributesMap['svg'] & {};
-  feFuncG: AttributesMap['svg'] & {};
-  feFuncR: AttributesMap['svg'] & {};
-  feGaussianBlur: AttributesMap['svg'] & { stdDeviation?: number | string; edgeMode?: string };
-  feImage: AttributesMap['svg'] & { href?: string };
-  feMerge: AttributesMap['svg'] & {};
-  feMergeNode: AttributesMap['svg'] & { in?: string };
-  feMorphology: AttributesMap['svg'] & { operator?: 'erode' | 'dilate'; radius?: number | string };
-  feOffset: AttributesMap['svg'] & { dx?: number | string; dy?: number | string };
-  fePointLight: AttributesMap['svg'] & { x?: number | string; y?: number | string; z?: number | string };
-  feSpecularLighting: AttributesMap['svg'] & {
-    specularConstant?: number | string;
-    specularExponent?: number | string;
-    surfaceScale?: number | string;
-  };
-  feSpotLight: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    z?: number | string;
-    pointsAtX?: number | string;
-    pointsAtY?: number | string;
-    pointsAtZ?: number | string;
-    specularExponent?: number | string;
-    limitingConeAngle?: number | string;
-  };
-  feTile: AttributesMap['svg'] & {};
-  feTurbulence: AttributesMap['svg'] & {
-    baseFrequency?: number | string;
-    numOctaves?: number | string;
-    seed?: number | string;
-    stitchTiles?: string;
-    type?: 'fractalNoise' | 'turbulence';
-  };
-
-  filter: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-    filterUnits?: string;
-    primitiveUnits?: string;
-  };
-  foreignObject: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  g: AttributesMap['svg'];
-  image: AttributesMap['svg'] & {
-    href?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  line: AttributesMap['svg'] & {
-    x1?: number | string;
-    y1?: number | string;
-    x2?: number | string;
-    y2?: number | string;
-  };
-  linearGradient: AttributesMap['svg'] & {
-    x1?: number | string;
-    y1?: number | string;
-    x2?: number | string;
-    y2?: number | string;
-    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
-    gradientTransform?: string;
-  };
-  marker: AttributesMap['svg'] & {
-    markerUnits?: string;
-    markerWidth?: number | string;
-    markerHeight?: number | string;
-    refX?: number | string;
-    refY?: number | string;
-    orient?: string;
-  };
-  mask: AttributesMap['svg'] & {
-    maskUnits?: string;
-    maskContentUnits?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  metadata: AttributesMap['svg'];
-  mpath: AttributesMap['svg'] & { href?: string };
-  path: AttributesMap['svg'] & { d?: string; pathLength?: number | string };
-  pattern: AttributesMap['svg'] & {
-    patternUnits?: string;
-    patternContentUnits?: string;
-    width?: number | string;
-    height?: number | string;
-    x?: number | string;
-    y?: number | string;
-  };
-  polygon: AttributesMap['svg'] & { points?: string };
-  polyline: AttributesMap['svg'] & { points?: string };
-  radialGradient: AttributesMap['svg'] & {
-    cx?: number | string;
-    cy?: number | string;
-    r?: number | string;
-    fx?: number | string;
-    fy?: number | string;
-    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
-    gradientTransform?: string;
-  };
-  rect: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-  };
-  script: AttributesMap['svg'] & { href?: string; type?: string };
-  set: AttributesMap['svg'] & { attributeName?: string; to?: string | number; begin?: string; dur?: string };
-  stop: AttributesMap['svg'] & { offset?: number | string; stopColor?: string; stopOpacity?: number | string };
-  style: AttributesMap['svg'] & { media?: string };
-  svg: AttributesMap['svg'];
-  switch: AttributesMap['svg'];
-  symbol: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
-  text: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    dx?: number | string;
-    dy?: number | string;
-    textLength?: number | string;
-  };
-  textPath: AttributesMap['svg'] & { href?: string; startOffset?: number | string };
-  title: AttributesMap['svg'];
-  tspan: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    dx?: number | string;
-    dy?: number | string;
-  };
-  use: AttributesMap['svg'] & {
-    href?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
-}
-
-declare global {
-  namespace JSX {
-    type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-    interface IntrinsicElements {
-      [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
-
-      // Document-level & metadata
-      html: AttributesMap['html'];
-      head: AttributesMap['head'];
-      title: AttributesMap['title'];
-      base: AttributesMap['base'];
-      link: AttributesMap['link'];
-      meta: AttributesMap['meta'];
-
-      // Sectioning
-      body: AttributesMap['body'];
-      header: AttributesMap['header'];
-      footer: AttributesMap['footer'];
-      nav: AttributesMap['nav'];
-      main: AttributesMap['main'];
-      section: AttributesMap['section'];
-      article: AttributesMap['article'];
-      aside: AttributesMap['aside'];
-
-      // Headings
-      h1: AttributesMap['h1'];
-      h2: AttributesMap['h2'];
-      h3: AttributesMap['h3'];
-      h4: AttributesMap['h4'];
-      h5: AttributesMap['h5'];
-      h6: AttributesMap['h6'];
-
-      // Text content
-      p: AttributesMap['p'];
-      pre: AttributesMap['pre'];
-      code: AttributesMap['code'];
-      strong: AttributesMap['strong'];
-      small: AttributesMap['small'];
-      em: AttributesMap['em'];
-      br: AttributesMap['br'];
-      i: AttributesMap['i'];
-
-      // Lists
-      ul: AttributesMap['ul'];
-      ol: AttributesMap['ol'];
-      li: AttributesMap['li'];
-
-      // Tables
-      table: AttributesMap['table'];
-      thead: AttributesMap['thead'];
-      tbody: AttributesMap['tbody'];
-      tfoot: AttributesMap['tfoot'];
-      tr: AttributesMap['tr'];
-      th: AttributesMap['th'];
-      td: AttributesMap['td'];
-
-      // Forms
-      form: AttributesMap['form'];
-      label: AttributesMap['label'];
-      input: AttributesMap['input'];
-      textarea: AttributesMap['textarea'];
-      select: AttributesMap['select'];
-      option: AttributesMap['option'];
-      optgroup: AttributesMap['optgroup'];
-      button: AttributesMap['button'];
-      fieldset: AttributesMap['fieldset'];
-      legend: AttributesMap['legend'];
-      datalist: AttributesMap['datalist'];
-      output: AttributesMap['output'];
-
-      // Media & embedded
-      img: AttributesMap['img'];
-      picture: AttributesMap['picture'];
-      source: AttributesMap['source'];
-      audio: AttributesMap['audio'];
-      video: AttributesMap['video'];
-      track: AttributesMap['track'];
-      iframe: AttributesMap['iframe'];
-      embed: AttributesMap['embed'];
-      object: AttributesMap['object'];
-      canvas: AttributesMap['canvas'];
-
-      // Interactive & misc
-      a: AttributesMap['a'] & SVGAttributesMap['a'];
-      area: AttributesMap['area'];
-      map: AttributesMap['map'];
-      details: AttributesMap['details'];
-      dialog: AttributesMap['dialog'];
-      summary: AttributesMap['summary'];
-      slot: AttributesMap['slot'];
-
-      // Scripting & styles
-      script: AttributesMap['script'];
-      style: AttributesMap['style'];
-
-      // Semantic & phrasing
-      figure: AttributesMap['figure'];
-      figcaption: AttributesMap['figcaption'];
-      blockquote: AttributesMap['blockquote'];
-      q: AttributesMap['q'];
-
-      // Generic elements
-      div: AttributesMap['div'];
-      span: AttributesMap['span'];
-      address: AttributesMap['address'];
-      abbr: AttributesMap['abbr'];
-      b: AttributesMap['b'];
-      cite: AttributesMap['cite'];
-      dl: AttributesMap['dl'];
-      dt: AttributesMap['dt'];
-      dd: AttributesMap['dd'];
-      hr: AttributesMap['hr'];
-
-      // SVG
-      svg: AttributesMap['svg'];
-      // a: SVGAttributesMap['a'];
-      animate: SVGAttributesMap['animate'];
-      animateMotion: SVGAttributesMap['animateMotion'];
-      animateTransform: SVGAttributesMap['animateTransform'];
-      circle: SVGAttributesMap['circle'];
-      clipPath: SVGAttributesMap['clipPath'];
-      defs: SVGAttributesMap['defs'];
-      desc: SVGAttributesMap['desc'];
-      ellipse: SVGAttributesMap['ellipse'];
-      feBlend: SVGAttributesMap['feBlend'];
-      feColorMatrix: SVGAttributesMap['feColorMatrix'];
-      feComponentTransfer: SVGAttributesMap['feComponentTransfer'];
-      feComposite: SVGAttributesMap['feComposite'];
-      feConvolveMatrix: SVGAttributesMap['feConvolveMatrix'];
-      feDiffuseLighting: SVGAttributesMap['feDiffuseLighting'];
-      feDisplacementMap: SVGAttributesMap['feDisplacementMap'];
-      feDistantLight: SVGAttributesMap['feDistantLight'];
-      feDropShadow: SVGAttributesMap['feDropShadow'];
-      feFlood: SVGAttributesMap['feFlood'];
-      feFuncA: SVGAttributesMap['feFuncA'];
-      feFuncB: SVGAttributesMap['feFuncB'];
-      feFuncG: SVGAttributesMap['feFuncG'];
-      feFuncR: SVGAttributesMap['feFuncR'];
-      feGaussianBlur: SVGAttributesMap['feGaussianBlur'];
-      feImage: SVGAttributesMap['feImage'];
-      feMerge: SVGAttributesMap['feMerge'];
-      feMergeNode: SVGAttributesMap['feMergeNode'];
-      feMorphology: SVGAttributesMap['feMorphology'];
-      feOffset: SVGAttributesMap['feOffset'];
-      fePointLight: SVGAttributesMap['fePointLight'];
-      feSpecularLighting: SVGAttributesMap['feSpecularLighting'];
-      feSpotLight: SVGAttributesMap['feSpotLight'];
-      feTile: SVGAttributesMap['feTile'];
-      feTurbulence: SVGAttributesMap['feTurbulence'];
-      filter: SVGAttributesMap['filter'];
-      foreignObject: SVGAttributesMap['foreignObject'];
-      g: SVGAttributesMap['g'];
-      image: SVGAttributesMap['image'];
-      line: SVGAttributesMap['line'];
-      linearGradient: SVGAttributesMap['linearGradient'];
-      marker: SVGAttributesMap['marker'];
-      mask: SVGAttributesMap['mask'];
-      metadata: SVGAttributesMap['metadata'];
-      mpath: SVGAttributesMap['mpath'];
-      path: SVGAttributesMap['path'];
-      pattern: SVGAttributesMap['pattern'];
-      polygon: SVGAttributesMap['polygon'];
-      polyline: SVGAttributesMap['polyline'];
-      radialGradient: SVGAttributesMap['radialGradient'];
-      rect: SVGAttributesMap['rect'];
-      set: SVGAttributesMap['set'];
-      stop: SVGAttributesMap['stop'];
-      switch: SVGAttributesMap['switch'];
-      symbol: SVGAttributesMap['symbol'];
-      text: SVGAttributesMap['text'];
-      textPath: SVGAttributesMap['textPath'];
-      tspan: SVGAttributesMap['tspan'];
-      use: SVGAttributesMap['use'];
-      view: SVGAttributesMap['view'];
-    }
-
-    type IntrinsicAttributes = {
-      /**
-       * Make a reference to the created element
-       */
-      ref?: KTRef<any>;
-
-      /**
-       * Conditional rendering
-       * - Provide a `KTRef` to make it reactive
-       */
-      'k-if'?: any;
-
-      /**
-       * 2-way binding
-       * - Provide a `KTRef` to make it reactive
-       */
-      'k-model'?: KTRef<any>;
-
-      /**
-       * Raw html binding
-       * - Provide a `KTRef` to make it reactive
-       */
-      'k-html'?: any;
-      children?: KTRawContent;
-    };
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
-
-/**
- * Extract component props type (excluding ref and children)
- */
-type ExtractComponentProps<T> = T extends (props: infer P) => any ? Omit<P, 'ref' | 'children'> : {};
-declare function KTAsync<T extends KTComponent>(props: {
-    ref?: KTRef<JSX.Element>;
-    skeleton?: JSX.Element;
-    component: T;
-    children?: KTRawContent;
-} & ExtractComponentProps<T>): JSX.Element;
-
-type KTForElement = JSX.Element;
-interface KTForProps<T> {
-    ref?: KTRef<KTForElement>;
-    list: T[] | KTReactive<T[]>;
-    key?: (item: T, index: number, array: T[]) => any;
-    map: (item: T, index: number, array: T[]) => HTMLElement;
-}
-/**
- * KTFor - List rendering component with key-based optimization
- * Returns a Comment anchor node with rendered elements in __kt_for_list__
- */
-declare function KTFor<T>(props: KTForProps<T>): KTForElement;
-
-export { $modelOrRef, $setRef, Fragment, KTAsync, KTComputed, KTFor, KTReactive, KTReactiveType, KTRef, computed, h as createElement, createRedrawable, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
-export type { EventHandler, KTAttribute, KTForElement, KTForProps, KTPrefixedEventAttribute, KTRawAttr, KTRawContent, KTRawContents, KTReactify, KTReactifyObject, KTReactifyProps, KTSurfaceRef, ReactiveChangeHandler };
+/**
+ * Whether `props.ref` is a `KTRef` only needs to be checked in the initial render
+ */
+export declare const $initRef: <T extends Node>(props: {
+    ref?: KTRef<T>;
+}, node: T) => RefSetter<T>;
+
+/**
+ * Assert k-model to be a ref object
+ */
+export declare const $modelOrRef: <T = any>(props: any, defaultValue?: T) => KTRef<T>;
+
+/**
+ * Create a reactive computed value
+ * @param computeFn
+ * @param reactives refs and computeds that this computed depends on
+ */
+export declare function computed<T = JSX.Element>(computeFn: () => T, reactives: Array<KTReactive<any>>): KTComputed<T>;
+
+/**
+ * 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
+ */
+export declare function createRedrawable<T>(creator: () => T): KTRef<T> & {
+    redraw: () => T;
+};
+
+/**
+ * Extracts the value from a KTReactive, or returns the value directly if it's not reactive.
+ */
+export declare function dereactive<T = JSX.Element>(value: T | KTReactive<T>): T;
+
+/**
+ * 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
+ */
+export declare function effect(effectFn: () => void, reactives: Array<KTReactive<any>>, options?: Partial<KTEffectOptions>): () => void;
+
+/**
+ * Event handler type for DOM events
+ */
+export declare type EventHandler<T extends Event = Event> = (this: HTMLElement, ev: T) => any;
+
+/**
+ * Extract component props type (excluding ref and children)
+ */
+declare type ExtractComponentProps<T> = T extends (props: infer P) => any ? Omit<P, 'ref' | 'children'> : {};
+
+/**
+ * Fragment support - returns an array of children
+ * Enhanced Fragment component that manages arrays of elements
+ */
+export declare function Fragment(props: {
+    children?: KTRawContent;
+}): JSX.Element;
+
+/**
+ * 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
+ *
+ * __PKG_INFO__
+ */
+declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+export { h as createElement }
+export { h }
+
+declare type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag
+? SVGElementTagNameMap[T]
+: T extends HTMLTag
+? HTMLElementTagNameMap[T]
+: T extends MathMLTag
+? MathMLElementTagNameMap[T]
+: HTMLElement;
+
+declare type HTMLJSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
+
+/**
+ * Normal HTML tags like `div`, `span`, `a`, etc.
+ */
+export declare type HTMLTag = keyof HTMLElementTagNameMap;
+
+export declare type InputElementTag = 'input' | 'select' | 'textarea';
+
+export declare const isComputed: <T = any>(obj: any) => obj is KTComputed<T>;
+
+export declare const isKT: <T = any>(obj: any) => obj is KTReactive<T>;
+
+export declare const isRef: <T = any>(obj: any) => obj is KTRef<T>;
+
+/**
+ * @param tag html tag or function component
+ * @param props properties/attributes
+ */
+export declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
+
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+export declare const jsxDEV: typeof jsx;
+
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+export declare const jsxs: typeof jsx;
+
+declare type JSXTag = HTMLJSXTag | SVGJSXTag | MathMLJSXTag;
+
+export declare function KTAsync<T extends KTComponent>(props: {
+    ref?: KTRef<JSX.Element>;
+    skeleton?: JSX.Element;
+    component: T;
+    children?: KTRawContent;
+} & ExtractComponentProps<T>): JSX.Element;
+
+export declare type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
+
+declare type KTAvailableContent = SingleContent | KTAvailableContent[];
+
+/**
+ * Used to create enhanced HTML elements
+ */
+declare interface KTBaseAttribute {
+    [k: string]: any;
+
+    // # kt-specific attributes
+    ref?: KTRef<JSX.Element>;
+
+    /**
+     * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
+     */
+    'k-if'?: any;
+
+    /**
+     * 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>;
+
+    /**
+     * Directly apply html string to `innerHTML`.
+     * - Would be reactive if `KTRef` instance is provided
+     */
+    'k-html'?: any;
+
+    // # normal HTML attributes
+    id?: string;
+    class?: string;
+    className?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
+
+    type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+    for?: string;
+
+    name?: string;
+    title?: string;
+    placeholder?: string;
+    contenteditable?: boolean;
+    value?: any;
+    valueAsDate?: Date;
+    valueAsNumber?: number;
+    label?: string;
+    disabled?: boolean;
+
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+
+    selected?: boolean;
+    checked?: boolean;
+
+    action?: string;
+    method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+declare type KTComponent = (
+props: {
+    ref?: KTRef<JSX.Element>;
+    children?: KTRawContent;
+} & KTAttribute &
+any,
+) => JSX.Element | Promise<JSX.Element> | any;
+
+export declare class KTComputed<T> implements KTReactive<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: true;
+    ktType: KTReactiveType;
+    /* Excluded from this release type: _calculator */
+    /* Excluded from this release type: _value */
+    /* Excluded from this release type: _onChanges */
+    /* Excluded from this release type: _emit */
+    /* Excluded from this release type: _recalculate */
+    /* Excluded from this release type: _subscribe */
+    constructor(_calculator: () => T, reactives: Array<KTReactive<unknown>>);
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value(): T;
+    set value(_newValue: T);
+    /**
+     * Force listeners to run once with the latest computed result.
+     */
+    notify(): void;
+    /**
+     * Computed values are derived from dependencies and should not be mutated manually.
+     */
+    mutate<R = void>(): R;
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    /**
+     * Unregister a callback
+     * @param callback (newValue, oldValue) => xxx
+     */
+    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
+}
+
+declare interface KTEffectOptions {
+    lazy: boolean;
+    onCleanup: () => void;
+    debugName: string;
+}
+
+/**
+ * KTFor - List rendering component with key-based optimization
+ * Returns a Comment anchor node with rendered elements in __kt_for_list__
+ */
+export declare function KTFor<T>(props: KTForProps<T>): KTForElement;
+
+export declare type KTForElement = JSX.Element;
+
+export declare interface KTForProps<T> {
+    ref?: KTRef<KTForElement>;
+    list: T[] | KTReactive<T[]>;
+    key?: (item: T, index: number, array: T[]) => any;
+    map: (item: T, index: number, array: T[]) => HTMLElement;
+}
+
+export declare type KTPrefixedEventAttribute = {
+    [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+export declare type KTRawAttr = KTAttribute | null | undefined | '' | false;
+
+export declare type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
+
+export declare type KTRawContents = KTAvailableContent;
+
+export declare type KTReactify<T> = T extends boolean ? KTReactive<boolean> : T extends any ? KTReactive<T> : never;
+
+export declare type KTReactifyObject<T extends object> = {
+    [K in keyof T]: KTReactify<T[K]>;
+};
+
+export declare type KTReactifyProps<T extends object> = {
+    [K in keyof T]: KTReactify<Exclude<T[K], undefined>> | T[K];
+};
+
+export declare class KTReactive<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: boolean;
+
+    ktType: KTReactiveType;
+
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value();
+    set value(newValue: T);
+
+    /**
+     * Force all listeners to run even when reference identity has not changed.
+     * Useful for in-place array/object mutations.
+     */
+    notify(): void;
+
+    /**
+     * Mutate current value in-place and notify listeners once.
+     *
+     * @example
+     * const items = ref<number[]>([1, 2]);
+     * items.mutate((list) => list.push(3));
+     */
+    mutate<R = void>(mutator: (currentValue: T) => R): R;
+
+    /**
+     * Register a callback when the value changes
+     * - Value setter will check `Object.is(newValue, oldValue)`.
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    removeOnChange(callback: ReactiveChangeHandler<T>): void;
+}
+
+export declare const enum KTReactiveType {
+    REF = 1,
+    COMPUTED = 2
+}
+
+export declare class KTRef<T> implements KTReactive<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: true;
+    ktType: KTReactiveType;
+    /* Excluded from this release type: _value */
+    /* Excluded from this release type: _onChanges */
+    /* Excluded from this release type: _emit */
+    constructor(_value: T, _onChanges: Array<ReactiveChangeHandler<T>>);
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value(): T;
+    set value(newValue: T);
+    /**
+     * Force all listeners to run even when reference identity has not changed.
+     * Useful for in-place array/object mutations.
+     */
+    notify(): void;
+    /**
+     * Mutate current value in-place and notify listeners once.
+     *
+     * @example
+     * const items = ref<number[]>([1, 2]);
+     * items.mutate((list) => list.push(3));
+     */
+    mutate<R = void>(mutator: (currentValue: T) => R): R;
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
+}
+
+export declare type KTSurfaceRef<T extends object> = {
+    [K in keyof T]: KTRef<T[K]>;
+} & {
+    /**
+     * Get the dereferenced object like the original one
+     */
+    kcollect: () => T;
+};
+
+declare type MathMLJSXTag = HTMLTag | ((props?: any) => MathMLElement) | ((props?: any) => Promise<MathMLElement>);
+
+export declare type MathMLTag = keyof MathMLElementTagNameMap;
+
+declare type otherstring = string & {};
+
+export declare type ReactiveChangeHandler<T> = (newValue: T, oldValue: T) => void;
+
+/**
+ * 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
+ */
+export declare function ref<T = JSX.Element>(value?: T, onChange?: ReactiveChangeHandler<T>): KTRef<T>;
+
+declare type RefSetter<T> = (props: {
+    ref?: KTRef<T>;
+}, node: T) => void;
+
+declare type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
+
+/**
+ * Make all first-level properties of the object a `KTRef`.
+ * - `obj.a.b` is not reactive
+ */
+export declare const surfaceRef: <T extends object>(obj: T) => KTSurfaceRef<T>;
+
+declare type SVGJSXTag = HTMLTag | ((props?: any) => SVGElement) | ((props?: any) => Promise<SVGElement>);
+
+export declare type SVGTag = keyof SVGElementTagNameMap;
+
+export declare const toReactive: <T>(value: T | KTReactive<T>, onChange?: ReactiveChangeHandler<T>) => KTReactive<T>;
+
+/**
+ * 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
+ */
+export declare const toRef: <T = any>(o: any) => KTRef<T>;
+
+export { }