@ktjs/core 0.25.0 → 0.26.2

package/dist/jsx/index.d.ts

@@ -7,6 +7,37 @@ type HTMLTag = keyof HTMLElementTagNameMap;
 type SVGTag = keyof SVGElementTagNameMap;
 type MathMLTag = keyof MathMLElementTagNameMap;
 
+declare class KTComputed<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: true;
+    ktType: KTReactiveType;
+    private _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);
+    /**
+     * 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;
+}
+
+type KTReactive<T> = KTRef<T> | KTComputed<T>;
+type KTReactify<T> = T extends any ? KTReactive<T> : never;
+type KTReactifyProps<T extends object> = {
+    [K in keyof T]: KTReactify<Exclude<T[K], undefined>> | T[K];
+};
+
 declare const enum KTReactiveType {
     REF = 1,
     COMPUTED = 2
@@ -141,7 +172,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.25.0 (Last Update: 2026.02.05 16:20:09.244)
+ * @version 0.26.2 (Last Update: 2026.02.05 20:44:45.309)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -192,593 +223,638 @@ declare function createRedrawable<T>(creator: () => T): KTRef<T> & {
 };
 
 // Base events available to all HTML elements
-type BaseAttr = KTPrefixedEventAttribute & {
-  [k: string]: any;
+type BaseAttr = KTPrefixedEventAttribute &
+  KTReactifyProps<{
+    [k: string]: any;
 
-  // # base attributes
-  class?: string;
-  className?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-};
+    // # base attributes
+    class?: string;
+    className?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
+  }>;
 
 interface AttributesMap {
   // Anchor element
-  a: BaseAttr & {
-    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;
-  };
+  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 & {
-    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;
-  };
+  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 & {
-    autoplay?: boolean;
-    controls?: boolean;
-    crossorigin?: 'anonymous' | 'use-credentials' | '';
-    loop?: boolean;
-    muted?: boolean;
-    preload?: 'none' | 'metadata' | 'auto' | '';
-    src?: string;
-  };
+  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 & {
-    href?: string;
-    target?: '_self' | '_blank' | '_parent' | '_top' | string;
-  };
+  base: BaseAttr &
+    KTReactifyProps<{
+      href?: string;
+      target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    }>;
 
   // Body element
-  body: BaseAttr & {};
+  body: BaseAttr & KTReactifyProps<{}>;
 
   // BR element
-  br: BaseAttr & {};
+  br: BaseAttr & KTReactifyProps<{}>;
 
   // Button element
-  button: BaseAttr & {
-    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;
-  };
+  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 & {
-    height?: number | string;
-    width?: number | string;
-  };
+  canvas: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      width?: number | string;
+    }>;
 
   // Table caption element
-  caption: BaseAttr & {};
+  caption: BaseAttr & KTReactifyProps<{}>;
 
   // Col element
-  col: BaseAttr & {
-    span?: number | string;
-  };
+  col: BaseAttr &
+    KTReactifyProps<{
+      span?: number | string;
+    }>;
 
   // Colgroup element
-  colgroup: BaseAttr & {
-    span?: number | string;
-  };
+  colgroup: BaseAttr &
+    KTReactifyProps<{
+      span?: number | string;
+    }>;
 
   // Data element
-  data: BaseAttr & {
-    value?: string;
-  };
+  data: BaseAttr &
+    KTReactifyProps<{
+      value?: string;
+    }>;
 
   // Datalist element
-  datalist: BaseAttr & {};
+  datalist: BaseAttr & KTReactifyProps<{}>;
 
   // Del element
-  del: BaseAttr & {
-    cite?: string;
-    datetime?: string;
-  };
+  del: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+      datetime?: string;
+    }>;
 
   // Details element
-  details: BaseAttr & {
-    open?: boolean;
-  };
+  details: BaseAttr &
+    KTReactifyProps<{
+      open?: boolean;
+    }>;
 
   // Dialog element
-  dialog: BaseAttr & {
-    open?: boolean;
-  };
+  dialog: BaseAttr &
+    KTReactifyProps<{
+      open?: boolean;
+    }>;
 
   // Embed element
-  embed: BaseAttr & {
-    height?: number | string;
-    src?: string;
-    type?: string;
-    width?: number | string;
-  };
+  embed: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      src?: string;
+      type?: string;
+      width?: number | string;
+    }>;
 
   // Fieldset element
-  fieldset: BaseAttr & {
-    disabled?: boolean;
-    form?: string;
-    name?: string;
-  };
+  fieldset: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      form?: string;
+      name?: string;
+    }>;
 
   // Form element
-  form: BaseAttr & {
-    '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;
-  };
+  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 & {};
+  head: BaseAttr & KTReactifyProps<{}>;
 
   // HR element
-  hr: BaseAttr & {};
+  hr: BaseAttr & KTReactifyProps<{}>;
 
   // HTML element
-  html: BaseAttr & {};
+  html: BaseAttr & KTReactifyProps<{}>;
 
   // IFrame element
-  iframe: BaseAttr & {
-    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;
-  };
+  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 & {
-    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;
-  };
+  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 & {
-    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;
-  };
+  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 & {
-    cite?: string;
-    datetime?: string;
-  };
+  ins: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+      datetime?: string;
+    }>;
 
   // Label element
-  label: BaseAttr & {
-    for?: string;
-  };
+  label: BaseAttr &
+    KTReactifyProps<{
+      for?: string;
+    }>;
 
   // Legend element
-  legend: BaseAttr & {};
+  legend: BaseAttr & KTReactifyProps<{}>;
 
   // LI element
-  li: BaseAttr & {
-    value?: number | string;
-  };
+  li: BaseAttr &
+    KTReactifyProps<{
+      value?: number | string;
+    }>;
 
   // Link element
-  link: BaseAttr & {
-    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;
-  };
+  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 & {
-    name?: string;
-  };
+  map: BaseAttr &
+    KTReactifyProps<{
+      name?: string;
+    }>;
 
   // Menu element
-  menu: BaseAttr & {};
+  menu: BaseAttr & KTReactifyProps<{}>;
 
   // Meta element
-  meta: BaseAttr & {
-    charset?: string;
-    content?: string;
-    'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
-    name?: string;
-  };
+  meta: BaseAttr &
+    KTReactifyProps<{
+      charset?: string;
+      content?: string;
+      'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
+      name?: string;
+    }>;
 
   // Meter element
-  meter: BaseAttr & {
-    form?: string;
-    high?: number | string;
-    low?: number | string;
-    max?: number | string;
-    min?: number | string;
-    optimum?: number | string;
-    value?: number | string;
-  };
+  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 & {
-    data?: string;
-    form?: string;
-    height?: number | string;
-    name?: string;
-    type?: string;
-    usemap?: string;
-    width?: number | string;
-  };
+  object: BaseAttr &
+    KTReactifyProps<{
+      data?: string;
+      form?: string;
+      height?: number | string;
+      name?: string;
+      type?: string;
+      usemap?: string;
+      width?: number | string;
+    }>;
 
   // OL element
-  ol: BaseAttr & {
-    reversed?: boolean;
-    start?: number | string;
-    type?: '1' | 'a' | 'A' | 'i' | 'I';
-  };
+  ol: BaseAttr &
+    KTReactifyProps<{
+      reversed?: boolean;
+      start?: number | string;
+      type?: '1' | 'a' | 'A' | 'i' | 'I';
+    }>;
 
   // Optgroup element
-  optgroup: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-  };
+  optgroup: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      label?: string;
+    }>;
 
   // Option element
-  option: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-    selected?: boolean;
-    value?: string;
-  };
+  option: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      label?: string;
+      selected?: boolean;
+      value?: string;
+    }>;
 
   // Output element
-  output: BaseAttr & {
-    for?: string;
-    form?: string;
-    name?: string;
-  };
+  output: BaseAttr &
+    KTReactifyProps<{
+      for?: string;
+      form?: string;
+      name?: string;
+    }>;
 
   // Picture element
-  picture: BaseAttr & {};
+  picture: BaseAttr & KTReactifyProps<{}>;
 
   // Pre element
-  pre: BaseAttr & {};
+  pre: BaseAttr & KTReactifyProps<{}>;
 
   // Progress element
-  progress: BaseAttr & {
-    max?: number | string;
-    value?: number | string;
-  };
+  progress: BaseAttr &
+    KTReactifyProps<{
+      max?: number | string;
+      value?: number | string;
+    }>;
 
   // Quote element (q and blockquote)
-  q: BaseAttr & {
-    cite?: string;
-  };
+  q: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+    }>;
 
-  blockquote: BaseAttr & {
-    cite?: string;
-  };
+  blockquote: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+    }>;
 
   // Script element
-  script: BaseAttr & {
-    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;
-  };
+  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 & {
-    autocomplete?: string;
-    disabled?: boolean;
-    form?: string;
-    multiple?: boolean;
-    name?: string;
-    required?: boolean;
-    size?: number | string;
-  };
+  select: BaseAttr &
+    KTReactifyProps<{
+      autocomplete?: string;
+      disabled?: boolean;
+      form?: string;
+      multiple?: boolean;
+      name?: string;
+      required?: boolean;
+      size?: number | string;
+    }>;
 
   // Slot element
-  slot: BaseAttr & {
-    name?: string;
-  };
+  slot: BaseAttr &
+    KTReactifyProps<{
+      name?: string;
+    }>;
 
   // Source element
-  source: BaseAttr & {
-    height?: number | string;
-    media?: string;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    type?: string;
-    width?: number | string;
-  };
+  source: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      media?: string;
+      sizes?: string;
+      src?: string;
+      srcset?: string;
+      type?: string;
+      width?: number | string;
+    }>;
 
   // Style element
-  style: BaseAttr & {
-    media?: string;
-  };
+  style: BaseAttr &
+    KTReactifyProps<{
+      media?: string;
+    }>;
 
   // Table element
-  table: BaseAttr & {};
+  table: BaseAttr & KTReactifyProps<{}>;
 
   // Table body/footer/header elements
-  tbody: BaseAttr & {};
+  tbody: BaseAttr & KTReactifyProps<{}>;
 
-  tfoot: BaseAttr & {};
+  tfoot: BaseAttr & KTReactifyProps<{}>;
 
-  thead: BaseAttr & {};
+  thead: BaseAttr & KTReactifyProps<{}>;
 
   // Table cell elements
-  td: BaseAttr & {
-    colspan?: number | string;
-    headers?: string;
-    rowspan?: number | string;
-  };
-
-  th: BaseAttr & {
-    abbr?: string;
-    colspan?: number | string;
-    headers?: string;
-    rowspan?: number | string;
-    scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
-  };
+  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 & {};
+  template: BaseAttr & KTReactifyProps<{}>;
 
   // Textarea element
-  textarea: BaseAttr & {
-    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';
-  };
+  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 & {
-    datetime?: string;
-  };
+  time: BaseAttr &
+    KTReactifyProps<{
+      datetime?: string;
+    }>;
 
   // Title element
-  title: BaseAttr & {};
+  title: BaseAttr & KTReactifyProps<{}>;
 
   // TR element
-  tr: BaseAttr & {};
+  tr: BaseAttr & KTReactifyProps<{}>;
 
   // Track element
-  track: BaseAttr & {
-    default?: boolean;
-    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    label?: string;
-    src?: string;
-    srclang?: string;
-  };
+  track: BaseAttr &
+    KTReactifyProps<{
+      default?: boolean;
+      kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+      label?: string;
+      src?: string;
+      srclang?: string;
+    }>;
 
   // UL element
-  ul: BaseAttr & {};
+  ul: BaseAttr & KTReactifyProps<{}>;
 
   // Video element
-  video: BaseAttr & {
-    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;
-  };
+  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 & {};
-  address: BaseAttr & {};
-  article: BaseAttr & {};
-  aside: BaseAttr & {};
-  b: BaseAttr & {};
-  bdi: BaseAttr & {};
-  bdo: BaseAttr & {};
-  cite: BaseAttr & {};
-  code: BaseAttr & {};
-  dd: BaseAttr & {};
-  dfn: BaseAttr & {};
-  div: BaseAttr & {};
-  dl: BaseAttr & {};
-  dt: BaseAttr & {};
-  em: BaseAttr & {};
-  figcaption: BaseAttr & {};
-  figure: BaseAttr & {};
-  footer: BaseAttr & {};
-  h1: BaseAttr & {};
-  h2: BaseAttr & {};
-  h3: BaseAttr & {};
-  h4: BaseAttr & {};
-  h5: BaseAttr & {};
-  h6: BaseAttr & {};
-  header: BaseAttr & {};
-  hgroup: BaseAttr & {};
-  i: BaseAttr & {};
-  kbd: BaseAttr & {};
-  main: BaseAttr & {};
-  mark: BaseAttr & {};
-  nav: BaseAttr & {};
-  noscript: BaseAttr & {};
-  p: BaseAttr & {};
-  rp: BaseAttr & {};
-  rt: BaseAttr & {};
-  ruby: BaseAttr & {};
-  s: BaseAttr & {};
-  samp: BaseAttr & {};
-  search: BaseAttr & {};
-  section: BaseAttr & {};
-  small: BaseAttr & {};
-  span: BaseAttr & {};
-  strong: BaseAttr & {};
-  sub: BaseAttr & {};
-  summary: BaseAttr & {};
-  sup: BaseAttr & {};
-  u: BaseAttr & {};
-  var: BaseAttr & {};
-  wbr: BaseAttr & {};
+  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;