///|
using @css {respo_style}

///|
using @css {type RespoStyle}

///|
/// 
 element with children.
pub fn[T, G] div(
  class_name? : String,
  class_list? : Array[String] = [],
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
  innerHTML? : String,
  draggable? : Bool,
  on_click? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drag_start? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drag_end? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drag_over? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drag_enter? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drag_leave? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_drop? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  if draggable is Some(d) {
    attrs.set("draggable", d.to_string())
  }
  if on_click is Some(on_click) {
    event.set(Click, on_click)
  }
  if on_drag_start is Some(handler) {
    event.set(DragStart, handler)
  }
  if on_drag_end is Some(handler) {
    event.set(DragEnd, handler)
  }
  if on_drag_over is Some(handler) {
    event.set(DragOver, handler)
  }
  if on_drag_enter is Some(handler) {
    event.set(DragEnter, handler)
  }
  if on_drag_leave is Some(handler) {
    event.set(DragLeave, handler)
  }
  if on_drop is Some(handler) {
    event.set(Drop, handler)
  }
  Element({
    name: "div",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
/// Combines a base class name with a list of additional class names into a
/// single string, with class names separated by spaces. Returns `None` if both
/// inputs are empty.
fn combile_classes(class_name : String?, class_list : Array[String]) -> String? {
  let mut class_content = ""
  if class_name is Some(class_name) {
    class_content += " " + class_name
  }
  if !class_list.is_empty() {
    for class_name in class_list {
      class_content += " " + class_name
    }
  }
  class_content = class_content.trim(char_set=" ").to_owned()
  if class_content.is_empty() {
    None
  } else {
    Some(class_content)
  }
}

///|
/// create a list of `
` elements with children. `IndexKey` is used in children for quick diffing.
pub fn[T, G] div_listed(
  class_name? : String,
  class_list? : Array[String] = [],
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[(RespoIndexKey, RespoNode[T, G])],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  Element({ name: "div", attrs, event, style, children })
}

///|
pub fn[T, G] span(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
  on_click? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  if on_click is Some(on_click) {
    event.set(Click, on_click)
  }
  Element({
    name: "span",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
/// internally using span element to render text.
pub fn[T, G] text_node(
  class_name? : String,
  class_list? : Array[String] = [],
  style? : RespoStyle,
  text : String,
) -> RespoNode[T, G] {
  span(
    inner_text=text,
    class_name=class_name.unwrap_or_default(),
    class_list~,
    style=style.unwrap_or_default(),
    [],
  )
}

///|
pub fn[T, G] button(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text~ : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  on_click? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if on_click is Some(on_click) {
    event.set(Click, on_click)
  }
  attrs.set("innerText", inner_text)
  Element({ name: "button", attrs, event, style, children: [] })
}

///|
pub fn[T, G] input(
  class_name? : String,
  class_list? : Array[String] = [],
  autocomplete? : TextareaElementAutoComplete,
  autofocus? : Bool,
  disabled? : Bool,
  name? : String,
  placeholder? : String,
  readonly_? : Bool,
  spellcheck? : Bool,
  attrs? : Map[String, String] = {},
  value~ : String,
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  on_input? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_change? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keydown? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keyup? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keypress? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_focus? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_blur? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if autocomplete is Some(autocomplete) {
    attrs.set(
      "autocomplete",
      match autocomplete {
        On => "on"
        Off => "off"
      },
    )
  }
  if autofocus is Some(autofocus) {
    attrs.set("autofocus", if autofocus { "true" } else { "false" })
  }
  if disabled is Some(disabled) {
    attrs.set("disabled", if disabled { "true" } else { "false" })
  }
  if name is Some(name) {
    attrs.set("name", name)
  }
  if placeholder is Some(placeholder) {
    attrs.set("placeholder", placeholder)
  }
  if readonly_ is Some(readonly_) {
    attrs.set("readonly", if readonly_ { "true" } else { "false" })
  }
  if spellcheck is Some(spellcheck) {
    attrs.set("spellcheck", if spellcheck { "true" } else { "false" })
  }
  attrs.set("value", value)
  if on_input is Some(on_input) {
    event.set(Input, on_input)
  }
  if on_change is Some(on_change) {
    event.set(Change, on_change)
  }
  if on_keydown is Some(on_keydown) {
    event.set(Keydown, on_keydown)
  }
  if on_keyup is Some(on_keyup) {
    event.set(Keyup, on_keyup)
  }
  if on_keypress is Some(on_keypress) {
    event.set(Keypress, on_keypress)
  }
  if on_focus is Some(on_focus) {
    event.set(Focus, on_focus)
  }
  if on_blur is Some(on_blur) {
    event.set(Blur, on_blur)
  }
  Element({ name: "input", attrs, event, style, children: [] })
}

///|
pub(all) enum TextareaElementAutoComplete {
  On
  Off
}

///|
pub fn[T, G] textarea(
  class_name? : String,
  class_list? : Array[String] = [],
  value~ : String,
  autocomplete? : TextareaElementAutoComplete,
  autofocus? : Bool,
  disabled? : Bool,
  name? : String,
  placeholder? : String,
  readonly_? : Bool,
  spellcheck? : Bool,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  on_input? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_change? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keydown? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keyup? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_keypress? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_focus? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  on_blur? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("value", value)
  if autocomplete is Some(autocomplete) {
    attrs.set(
      "autocomplete",
      match autocomplete {
        On => "on"
        Off => "off"
      },
    )
  }
  if autofocus is Some(autofocus) {
    attrs.set("autofocus", if autofocus { "true" } else { "false" })
  }
  if disabled is Some(disabled) {
    attrs.set("disabled", if disabled { "true" } else { "false" })
  }
  if name is Some(name) {
    attrs.set("name", name)
  }
  if placeholder is Some(placeholder) {
    attrs.set("placeholder", placeholder)
  }
  if readonly_ is Some(readonly_) {
    attrs.set("readonly", if readonly_ { "true" } else { "false" })
  }
  if spellcheck is Some(spellcheck) {
    attrs.set("spellcheck", if spellcheck { "true" } else { "false" })
  }
  if on_input is Some(on_input) {
    event.set(Input, on_input)
  }
  if on_change is Some(on_change) {
    event.set(Change, on_change)
  }
  if on_keydown is Some(on_keydown) {
    event.set(Keydown, on_keydown)
  }
  if on_keyup is Some(on_keyup) {
    event.set(Keyup, on_keyup)
  }
  if on_keypress is Some(on_keypress) {
    event.set(Keypress, on_keypress)
  }
  if on_focus is Some(on_focus) {
    event.set(Focus, on_focus)
  }
  if on_blur is Some(on_blur) {
    event.set(Blur, on_blur)
  }
  Element({ name: "textarea", attrs, event, style, children: [] })
}

///|
pub(all) enum AnchorElementTarget {
  Blank
  Parent
  Self
  Top
}

///|
pub fn AnchorElementTarget::to_string(self : AnchorElementTarget) -> String {
  match self {
    AnchorElementTarget::Blank => "_blank"
    AnchorElementTarget::Parent => "_parent"
    AnchorElementTarget::Self => "_self"
    AnchorElementTarget::Top => "_top"
  }
}

///|
/// anchor element
/// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
pub fn[T, G] a(
  inner_text? : String,
  class_name? : String,
  class_list? : Array[String] = [],
  /// The URL that the hyperlink points to.
  /// will override href in attrs.
  href~ : String,
  /// The value of the download attribute, which will be used when the user triggers a download.
  /// will override download in attrs.
  download? : String,
  /// The target attribute specifies where to open the linked document.
  /// will override target in attrs.
  target? : AnchorElementTarget,
  attrs? : Map[String, String] = {},
  /// mime type of the linked document.
  type_? : String,
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children? : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  attrs.set("href", href)
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if download is Some(download) {
    attrs.set("download", download)
  }
  if target is Some(target) {
    attrs.set("target", target.to_string())
  }
  if type_ is Some(type_) {
    attrs.set("type", type_)
  }
  let indexed_children = children
    .unwrap_or([])
    .mapi(fn(idx, child) { (RespoIndexKey(idx.to_string()), child) })
  Element({ name: "a", attrs, event, style, children: indexed_children })
}

///|
pub fn[T, G] br(
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  Element({ name: "br", attrs, event, style, children: [] })
}

///|
/// Horizontal rule element `
`.
pub fn[T, G] hr(
  class_name? : String,
  class_list? : Array[String] = [],
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  Element({ name: "hr", attrs, event, style, children: [] })
}

///|
pub fn[T, G] i(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
  on_click? : (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  if on_click is Some(on_click) {
    event.set(Click, on_click)
  }
  Element({
    name: "i",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] b(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "b",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub(all) enum IframeElementLoading {
  Eager
  Lazy
}

///|
pub fn[T, G] iframe(
  class_name? : String,
  class_list? : Array[String] = [],
  height? : Int,
  width? : Int,
  loading? : IframeElementLoading,
  src~ : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("src", src)
  if height is Some(height) {
    attrs.set("height", height.to_string())
  }
  if width is Some(width) {
    attrs.set("width", width.to_string())
  }
  if loading is Some(loading) {
    attrs.set(
      "loading",
      match loading {
        Eager => "eager"
        Lazy => "lazy"
      },
    )
  }
  Element({ name: "iframe", attrs, event, style, children: [] })
}

///|
pub fn[T, G] canvas(
  class_name? : String,
  class_list? : Array[String] = [],
  height? : Int,
  width? : Int,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if height is Some(height) {
    attrs.set("height", height.to_string())
  }
  if width is Some(width) {
    attrs.set("width", width.to_string())
  }
  Element({ name: "canvas", attrs, event, style, children: [] })
}

///|
pub fn[T, G] code(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text~ : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("innerText", inner_text)
  Element({ name: "code", attrs, event, style, children: [] })
}

///|
pub fn[T, G] pre(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children? : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  let children = children
    .unwrap_or([])
    .mapi(fn(idx, child) { (RespoIndexKey(idx.to_string()), child) })
  Element({ name: "pre", attrs, event, style, children })
}

///|
pub fn[T, G] p(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text~ : String,
  attrs? : Map[String, String] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("innerText", inner_text)
  let children = children.mapi(fn(idx, child) {
    (RespoIndexKey(idx.to_string()), child)
  })
  Element({ name: "p", attrs, event: {}, style, children })
}

///|
pub fn[T, G] blockquote(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  attrs? : Map[String, String] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  let children = children.mapi(fn(idx, child) {
    (RespoIndexKey(idx.to_string()), child)
  })
  Element({ name: "blockquote", attrs, event: {}, style, children })
}

///|
pub(all) enum ImgElementLoading {
  Eager
  Lazy
}

///|
pub impl Show for ImgElementLoading with output(self, logger) {
  match self {
    Eager => logger.write_string("eager")
    Lazy => logger.write_string("lazy")
  }
}

///|
pub fn[T, G] img(
  class_name? : String,
  class_list? : Array[String] = [],
  alt~ : String,
  height? : Int,
  src~ : String,
  width? : Int,
  loading? : ImgElementLoading,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("alt", alt)
  attrs.set("src", src)
  if height is Some(height) {
    attrs.set("height", height.to_string())
  }
  if width is Some(width) {
    attrs.set("width", width.to_string())
  }
  if loading is Some(loading) {
    attrs.set("loading", loading.to_string())
  }
  Element({ name: "img", attrs, event, style, children: [] })
}

///|
pub(all) enum VideoElementPreload {
  Auto
  Metadata
  None
}

///|
pub fn[T, G] video(
  class_name? : String,
  class_list? : Array[String] = [],
  height? : Int,
  width? : Int,
  src~ : String,
  controls? : Bool,
  preload? : VideoElementPreload,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  attrs.set("src", src)
  if height is Some(height) {
    attrs.set("height", height.to_string())
  }
  if width is Some(width) {
    attrs.set("width", width.to_string())
  }
  if controls is Some(controls) {
    attrs.set("controls", if controls { "true" } else { "false" })
  }
  if preload is Some(preload) {
    attrs.set(
      "preload",
      match preload {
        VideoElementPreload::Auto => "auto"
        VideoElementPreload::Metadata => "metadata"
        VideoElementPreload::None => "none"
      },
    )
  } else {
    ()
  }
  Element({ name: "video", attrs, event, style, children: [] })
}

///|
pub fn[T, G] h1(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h1",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] h2(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h2",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] h3(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h3",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] h4(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h4",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] h5(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h5",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] h6(
  class_name? : String,
  class_list? : Array[String] = [],
  inner_text? : String,
  innerHTML? : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if inner_text is Some(inner_text) {
    attrs.set("innerText", inner_text)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "h6",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
pub fn[T, G] li(
  class_name? : String,
  class_list? : Array[String] = [],
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
  innerHTML? : String,
) -> RespoNode[T, G] {
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  if innerHTML is Some(innerHTML) {
    attrs.set("innerHTML", innerHTML)
  }
  Element({
    name: "li",
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}

///|
/// create a `
` element to render space.
pub fn[T, G] space(
  width? : Float = 1,
  height? : Float = 1,
  class_name? : String,
  class_list? : Array[String] = [],
) -> RespoNode[T, G] {
  let attrs : Map[String, String] = {}
  if combile_classes(class_name, class_list) is Some(class_name) {
    attrs.set("class", class_name)
  }
  div(
    style=respo_style(
      width=width |> Px,
      height=height |> Px,
      display=if height > 1 { Block } else { InlineBlock },
    ),
    attrs~,
    [],
  )
}

///|
/// create element with a custom name
pub fn[T, G] create_element(
  name : String,
  attrs? : Map[String, String] = {},
  event? : Map[
    RespoEventType,
    (RespoEvent, DispatchFn[T]) -> Unit raise RespoCommonError,
  ] = {},
  style? : RespoStyle = respo_style(),
  children : Array[RespoNode[T, G]],
) -> RespoNode[T, G] {
  Element({
    name,
    attrs,
    event,
    style,
    children: children.mapi(fn(idx, child) {
      (RespoIndexKey(idx.to_string()), child)
    }),
  })
}