// =============================================================================
// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
// Generated by: scripts/generate_dom_elements.ts
// =============================================================================

///| Element factories for browser DOM with DSL syntax

///|

///| These functions create DOM elements with event handler support.

///| Uses HandlerMap and build_props from dsl.mbt.

// =============================================================================

// HTML Element factories

// =============================================================================

///|
/// Create a main element
pub fn main_(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("main", props, children)
}

///|
/// Create a nav element
pub fn nav(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("nav", props, children)
}

///|
/// Create a header element
pub fn header_(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("header", props, children)
}

///|
/// Create a footer element
pub fn footer_(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("footer", props, children)
}

///|
/// Create a section element
pub fn section(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("section", props, children)
}

///|
/// Create an article element
pub fn article(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("article", props, children)
}

///|
/// Create an aside element
pub fn aside(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("aside", props, children)
}

///|
/// Create a div element
pub fn div(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("div", props, children)
}

///|
/// Create a span element
pub fn span(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("span", props, children)
}

///|
/// Create a p element
pub fn p(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("p", props, children)
}

///|
/// Create an anchor element
pub fn a(
  href? : String,
  target? : String,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if href is Some(v) {
    props.push(("href", Static(v)))
  }
  if target is Some(v) {
    props.push(("target", Static(v)))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("a", props, children)
}

///|
/// Create h1 element
pub fn h1(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h1", props, children)
}

///|
/// Create h2 element
pub fn h2(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h2", props, children)
}

///|
/// Create h3 element
pub fn h3(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h3", props, children)
}

///|
/// Create h4 element
pub fn h4(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h4", props, children)
}

///|
/// Create h5 element
pub fn h5(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h5", props, children)
}

///|
/// Create h6 element
pub fn h6(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("h6", props, children)
}

///|
/// Create ul element
pub fn ul(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("ul", props, children)
}

///|
/// Create ol element
pub fn ol(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("ol", props, children)
}

///|
/// Create li element
pub fn li(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("li", props, children)
}

///|
/// Create a button element
pub fn button(
  disabled? : Bool,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  dyn_disabled? : () -> Bool,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if disabled is Some(true) {
    props.push(("disabled", Static("true")))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  if dyn_disabled is Some(getter) {
    props.push(("disabled", Dynamic(fn() { getter().to_string() })))
  }
  create_element("button", props, children)
}

///|
/// Create an input element
pub fn input(
  type_? : String,
  name? : String,
  value? : String,
  placeholder? : String,
  disabled? : Bool,
  readonly_? : Bool,
  required? : Bool,
  checked? : Bool,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  dyn_value? : () -> String,
  dyn_disabled? : () -> Bool,
  dyn_checked? : () -> Bool,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if type_ is Some(v) {
    props.push(("type", Static(v)))
  }
  if name is Some(v) {
    props.push(("name", Static(v)))
  }
  if value is Some(v) {
    props.push(("value", Static(v)))
  }
  if placeholder is Some(v) {
    props.push(("placeholder", Static(v)))
  }
  if disabled is Some(true) {
    props.push(("disabled", Static("true")))
  }
  if readonly_ is Some(true) {
    props.push(("readonly", Static("true")))
  }
  if required is Some(true) {
    props.push(("required", Static("true")))
  }
  if checked is Some(true) {
    props.push(("checked", Static("true")))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  if dyn_value is Some(getter) {
    props.push(("value", Dynamic(getter)))
  }
  if dyn_disabled is Some(getter) {
    props.push(("disabled", Dynamic(fn() { getter().to_string() })))
  }
  if dyn_checked is Some(getter) {
    props.push(("checked", Dynamic(fn() { getter().to_string() })))
  }
  create_element("input", props, [])
}

///|
/// Create a textarea element
pub fn textarea(
  name? : String,
  placeholder? : String,
  disabled? : Bool,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if name is Some(v) {
    props.push(("name", Static(v)))
  }
  if placeholder is Some(v) {
    props.push(("placeholder", Static(v)))
  }
  if disabled is Some(true) {
    props.push(("disabled", Static("true")))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("textarea", props, children)
}

///|
/// Create a form element
pub fn form(
  action? : String,
  http_method? : String,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if action is Some(v) {
    props.push(("action", Static(v)))
  }
  if http_method is Some(v) {
    props.push(("method", Static(v)))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("form", props, children)
}

///|
/// Create a label element
pub fn label(
  for_? : String,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if for_ is Some(v) {
    props.push(("for", Static(v)))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("label", props, children)
}

///|
/// Create img element
pub fn img(
  src? : String,
  alt? : String,
  width? : String,
  height? : String,
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if src is Some(v) {
    props.push(("src", Static(v)))
  }
  if alt is Some(v) {
    props.push(("alt", Static(v)))
  }
  if width is Some(v) {
    props.push(("width", Static(v)))
  }
  if height is Some(v) {
    props.push(("height", Static(v)))
  }
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("img", props, [])
}

///|
/// Create br element
pub fn br(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("br", props, [])
}

///|
/// Create hr element
pub fn hr(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("hr", props, [])
}

///|
/// Create strong element
pub fn strong(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("strong", props, children)
}

///|
/// Create em element
pub fn em(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("em", props, children)
}

///|
/// Create code element
pub fn code(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("code", props, children)
}

///|
/// Create pre element
pub fn pre(
  id? : String,
  class? : String,
  style? : String,
  dyn_class? : () -> String,
  dyn_style? : () -> String,
  on? : HandlerMap,
  ref_? : ElementRef,
  attrs? : Array[(String, Attr)],
  dyn_attrs? : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  let props = build_props(id, class, style, on, ref_, attrs, dyn_attrs~)
  if dyn_class is Some(getter) {
    props.push(("className", Dynamic(getter)))
  }
  if dyn_style is Some(getter) {
    props.push(("style", Dynamic(getter)))
  }
  create_element("pre", props, children)
}
// =============================================================================
// Text helpers
// =============================================================================

///|
/// Create a static text node
pub fn text(content : String) -> DomNode {
  ToDomNode::to_dom_node(content)
}

///|
/// Create a reactive text node from a getter function
pub fn text_dyn(content : () -> String) -> DomNode {
  text_node(content)
}

///|
/// Create a reactive text node from a signal
pub fn[T : Show] text_sig(sig : @resource.Signal[T]) -> DomNode {
  text_from_signal(sig)
}

///|
/// Create a reactive text node from a signal (alias for text_sig)
pub fn[T : Show] text_of(sig : @resource.Signal[T]) -> DomNode {
  text_from_signal(sig)
}

// =============================================================================
// AttrValue factory functions for external use
// =============================================================================

///|
/// Create a static attribute value
pub fn attr_static(value : String) -> AttrValue {
  Static(value)
}

///|
/// Create a dynamic attribute value
pub fn attr_dynamic(getter : () -> String) -> AttrValue {
  Dynamic(getter)
}

///|
/// Create an event handler attribute
pub fn attr_handler(handler : (@js.Any) -> Unit) -> AttrValue {
  Handler(handler)
}

///|
/// Create a static style attribute (string form, e.g. "color: red; margin: 10px")
pub fn attr_style(style : String) -> AttrValue {
  Static(style)
}

///|
/// Create a dynamic style attribute
pub fn attr_dynamic_style(getter : () -> String) -> AttrValue {
  Dynamic(getter)
}

// =============================================================================
// JSX Runtime - For TSX/JSX compatibility
// =============================================================================

///|
/// JSX runtime: jsx function (maps directly to create_element)
/// Usage in TSX: 
children
pub fn jsx(
  tag : String,
  attrs : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  create_element(tag, attrs, children)
}

///|
/// JSX runtime: jsxs function (same as jsx, for static children)
pub fn jsxs(
  tag : String,
  attrs : Array[(String, AttrValue)],
  children : Array[DomNode],
) -> DomNode {
  create_element(tag, attrs, children)
}

///|
/// JSX runtime: Fragment (returns children as a DocumentFragment)
pub fn fragment(children : Array[DomNode]) -> DomNode {
  // Return single child directly for optimization
  match children.length() {
    0 => {
      // Empty fragment: return empty DocumentFragment
      let doc = @js_dom.document()
      let frag = doc.createDocumentFragment()
      Raw(frag.as_node())
    }
    1 => children[0]
    _ => {
      // Multiple children: use real DocumentFragment
      let doc = @js_dom.document()
      let frag = doc.createDocumentFragment()
      for child in children {
        frag.as_node().appendChild(child.to_dom()) |> ignore
      }
      Raw(frag.as_node())
    }
  }
}