@ktjs/core 0.29.9 → 0.29.12

package/dist/index.d.ts

@@ -1,428 +1,1484 @@
-import { HTMLTag } from '@ktjs/shared';
-import { InputElementTag } from '@ktjs/shared';
-import { JSXTag } from '@ktjs/shared';
-import { MathMLTag } from '@ktjs/shared';
-import { otherstring } from '@ktjs/shared';
-import { SVGTag } from '@ktjs/shared';
-
-/**
- * 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;
-
-export { HTMLTag }
-
-export { InputElementTag }
-
-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;
-
-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;
-};
-
-export { MathMLTag }
-
-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>;
-
-export { SVGTag }
-
-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 { }
+import { otherstring, HTMLTag, SVGTag, MathMLTag, JSXTag } from '@ktjs/shared';
+export { HTMLTag, InputElementTag, MathMLTag, SVGTag } from '@ktjs/shared';
+
+// 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 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'];
+  }
+
+  interface IntrinsicAttributes {
+    /**
+     * Make a reference to the created element
+     */
+    ref?: KTRef<any>;
+
+    /**
+     * Conditional rendering
+     * - Provide a `KTRef` to make it reactive
+     */
+    'k-if'?: any;
+
+    /**
+     * Conditional rendering, must come after `k-if`
+     * @throws Error if used without a preceding `k-if` or coexisting with another `k-if`
+     */
+    'k-else'?: any;
+
+    /**
+     * List rendering. Must provide an iterable or array-like `KTReactive`
+     */
+    'k-for'?: any;
+
+    /**
+     * List key. Use it with `k-for`
+     */
+    'k-key'?: any;
+
+    /**
+     * 2-way binding. Must provide a `KTRef`
+     */
+    'k-model'?: KTRef<any>;
+
+    /**
+     * Raw html binding
+     * - Provide a `KTRef` to make it reactive
+     */
+    'k-html'?: any;
+    children?: KTRawContent;
+  }
+
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+}
+
+declare class KTComputed<T> implements KTReactive<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>(): 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;
+}
+/**
+ * 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;
+
+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
+   * - Value setter will check `Object.is(newValue, oldValue)`.
+   * @param callback (newValue, oldValue) => xxx
+   */
+  addOnChange(callback: ReactiveChangeHandler<T>): void;
+  removeOnChange(callback: ReactiveChangeHandler<T>): void;
+}
+
+// & Shockingly, If T is boolean, KTReactify<T> becomes KTReactive<true> | KTReactive<false>. It causes @ktjs/mui that disabledRefs not assignable.
+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 class KTRef<T> implements KTReactive<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>;
+type RefSetter<T> = (props: {
+    ref?: KTRef<T>;
+}, node: T) => void;
+/**
+ * Whether `props.ref` is a `KTRef` only needs to be checked in the initial render
+ */
+declare const $initRef: <T extends Node>(props: {
+    ref?: KTRef<T>;
+}, node: T) => RefSetter<T>;
+
+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
+ *
+ * __PKG_INFO__
+ */
+declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+
+/**
+ * @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;
+};
+
+/**
+ * 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 { $initRef, $modelOrRef, Fragment, JSX, 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 };