feat(native-el-ui): convert all component files to el-html vessel API

Replaced raw HTML heredoc returns with native el_ function calls across
all 21 component files. styles.el intentionally excluded.

src/hero.el

@@ -4,34 +4,52 @@
 // Glow orbs are pure CSS absolute-positioned divs.
 // Entrance animations are CSS keyframes with class-based delays.
 
+extern fn el_section(attrs: String, children: String) -> String
+extern fn el_div(attrs: String, children: String) -> String
+extern fn el_p(attrs: String, children: String) -> String
+extern fn el_h1(attrs: String, text: String) -> String
+extern fn el_a(href: String, attrs: String, children: String) -> String
+extern fn el_span(attrs: String, children: String) -> String
+
 fn hero() -> String {
-    return <section id="hero" aria-label="Hero">
-  <div class="glow-tl" aria-hidden="true"></div>
-  <div class="glow-br" aria-hidden="true"></div>
+    let glows: String =
+        el_div("class=\"glow-tl\" aria-hidden=\"true\"", "") +
+        el_div("class=\"glow-br\" aria-hidden=\"true\"", "")
 
-  <p class="label hero-label animate-up-1">One builder. Patented. No permission.</p>
+    let label: String = el_p(
+        "class=\"label hero-label animate-up-1\"",
+        "One builder. Patented. No permission."
+    )
 
-  <h1 class="display-xl hero-headline animate-up-2">
-    Every AI resets when you close the tab.
-    <em class="gold" style="font-style:normal">I built the one that doesn&#39;t.</em>
-  </h1>
+    let headline_em: String = el_span("class=\"gold\" style=\"font-style:normal\"",
+        "I built the one that doesn&#39;t."
+    )
+    let headline: String = el_h1(
+        "class=\"display-xl hero-headline animate-up-2\"",
+        "Every AI resets when you close the tab. " + headline_em
+    )
 
-  <p class="hero-sub animate-up-3">
-    Runs on your machine. Remembers everything. Priced below ChatGPT on day one.
-  </p>
+    let sub: String = el_p(
+        "class=\"hero-sub animate-up-3\"",
+        "Runs on your machine. Remembers everything. Priced below ChatGPT on day one."
+    )
 
-  <div class="hero-ctas animate-up-5">
-    <a href="#pricing" class="btn-primary">
-      Preorder <span>&#8594;</span>
-    </a>
-    <a href="#how-it-works" class="btn-ghost">
-      See how it works
-    </a>
-  </div>
+    let cta_primary: String = el_a(
+        "#pricing",
+        "class=\"btn-primary\"",
+        "Preorder " + el_span("", "&#8594;")
+    )
+    let cta_ghost: String = el_a(
+        "#how-it-works",
+        "class=\"btn-ghost\"",
+        "See how it works"
+    )
+    let ctas: String = el_div("class=\"hero-ctas animate-up-5\"", cta_primary + cta_ghost)
 
-  <div class="hero-scroll" aria-hidden="true">
-    <span>Scroll</span>
-    <div class="hero-scroll-line"></div>
-  </div>
-</section>
+    let scroll_inner: String =
+        el_span("", "Scroll") +
+        el_div("class=\"hero-scroll-line\"", "")
+    let scroll: String = el_div("class=\"hero-scroll\" aria-hidden=\"true\"", scroll_inner)
+
+    el_section("id=\"hero\" aria-label=\"Hero\"", glows + label + headline + sub + ctas + scroll)
 }