feat: shared UI component library (S4)

.claude/launch.json

@@ -4,7 +4,7 @@
     {
       "name": "traverse-website",
       "runtimeExecutable": "npx",
-      "runtimeArgs": ["serve", "-l", "8090", "."],
+      "runtimeArgs": ["serve", "-l", "8090", "dist"],
       "port": 8090,
       "cwd": "/Users/enricopiovesan/Documents/repos/traverseweb"
     }

public/assets/css/components.css

@@ -525,3 +525,161 @@
 .animate-delay-2 { animation-delay: 0.22s; }
 .animate-delay-3 { animation-delay: 0.38s; }
 .animate-delay-4 { animation-delay: 0.54s; }
+
+/* ─── Subpage: Page Hero ─────────────────────────────────────────────────── */
+.page-hero {
+  padding: 5rem 0 4rem;
+  border-bottom: 1px solid var(--border);
+}
+.page-hero-inner { max-width: 780px; }
+.page-hero h1 { margin: 1rem 0 1.5rem; }
+.page-hero-sub {
+  font-size: 1.1rem;
+  line-height: 1.75;
+  color: var(--fg-muted);
+  max-width: 640px;
+}
+.page-hero-badges {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+/* ─── Subpage: Two-column layout ─────────────────────────────────────────── */
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 2.5rem; } }
+
+/* ─── Subpage: Section typography ───────────────────────────────────────── */
+.section-title-sm {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+.section-lead {
+  color: var(--fg-muted);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+/* ─── Subpage: Problem / Benefit lists ───────────────────────────────────── */
+.problem-list, .benefit-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.benefit-list { gap: 1rem; }
+.problem-item, .benefit-item {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+.problem-icon, .benefit-icon {
+  flex-shrink: 0;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.75rem;
+  margin-top: 2px;
+}
+.problem-icon {
+  background: rgba(239,68,68,0.12);
+  border: 1px solid rgba(239,68,68,0.25);
+  color: #ef4444;
+}
+.benefit-icon {
+  background: rgba(16,185,129,0.1);
+  border: 1px solid rgba(16,185,129,0.25);
+  color: var(--success);
+}
+.problem-text {
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--fg-muted);
+}
+.benefit-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--fg);
+  margin-bottom: 0.2rem;
+}
+.benefit-desc {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+/* ─── Subpage: Use-case grid ─────────────────────────────────────────────── */
+.use-case-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+}
+@media (max-width: 640px) { .use-case-grid { grid-template-columns: 1fr; } }
+.use-case-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  transition: border-color 0.2s;
+}
+.use-case-card:hover { border-color: var(--accent); }
+.use-case-num {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--accent);
+  margin-bottom: 0.6rem;
+  letter-spacing: 0.05em;
+}
+.use-case-title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--fg);
+  margin-bottom: 0.4rem;
+}
+.use-case-desc {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+/* ─── Subpage: Stat row ──────────────────────────────────────────────────── */
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  text-align: center;
+}
+.stat-value {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+.stat-label {
+  font-size: 0.8rem;
+  color: var(--fg-muted);
+  line-height: 1.4;
+}

scripts/strip_global_styles.py

@@ -0,0 +1,103 @@
+#!/usr/bin/env python3
+"""
+Strip CSS rules for classes now defined globally in components.css
+from page-level <style is:global slot="head"> blocks.
+"""
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).parent.parent
+SRC_PAGES = ROOT / "src" / "pages"
+
+# Class name prefixes now defined in components.css (subpage section)
+GLOBAL_PREFIXES = (
+    ".page-hero",
+    ".two-col",
+    ".section-title-sm",
+    ".section-lead",
+    ".problem-list",
+    ".problem-item",
+    ".problem-icon",
+    ".problem-text",
+    ".benefit-list",
+    ".benefit-item",
+    ".benefit-icon",
+    ".benefit-body",
+    ".benefit-title",
+    ".benefit-desc",
+    ".use-case-grid",
+    ".use-case-card",
+    ".use-case-num",
+    ".use-case-title",
+    ".use-case-desc",
+    ".stat-row",
+    ".stat-card",
+    ".stat-value",
+    ".stat-label",
+    # Already handled by Breadcrumb.astro scoped styles
+    ".breadcrumb",
+    ".breadcrumb-sep",
+    # Already in SubpageLayout padding
+    "body { padding-top: var(--nav-h)",
+)
+
+
+def strip_rule(css: str, prefix: str) -> str:
+    """Remove all CSS rules/declarations that start with `prefix`."""
+    # Match selector { ... } blocks — greedy within balanced braces
+    pattern = re.compile(
+        r'\s*' + re.escape(prefix) + r'[^{]*\{[^}]*\}',
+        re.DOTALL
+    )
+    return pattern.sub('', css)
+
+
+def strip_single_line(css: str, prefix: str) -> str:
+    """Remove single-line declarations starting with prefix (no braces)."""
+    pattern = re.compile(r'\n[ \t]*' + re.escape(prefix) + r'[^\n]*', re.DOTALL)
+    return pattern.sub('', css)
+
+
+def clean_style_block(css: str) -> str:
+    for p in GLOBAL_PREFIXES:
+        css = strip_rule(css, p)
+    # Remove orphaned @media blocks that are now empty or only contain whitespace
+    css = re.sub(r'@media[^{]+\{\s*\}', '', css)
+    return css.strip()
+
+
+def process_file(path: Path):
+    content = path.read_text(encoding="utf-8")
+
+    def replace_style(m):
+        attrs = m.group(1)
+        original = m.group(2)
+        cleaned = clean_style_block(original)
+        if cleaned == original.strip():
+            return m.group(0)  # no change
+        if not cleaned:
+            return ''  # remove empty style block
+        return f'<style{attrs}>{cleaned}</style>'
+
+    new_content = re.sub(
+        r'<style([^>]*)>(.*?)</style>',
+        replace_style,
+        content,
+        flags=re.DOTALL
+    )
+
+    if new_content != content:
+        path.write_text(new_content, encoding="utf-8")
+        print(f"  ✓ {path.relative_to(ROOT)}")
+
+
+def main():
+    pages = list(SRC_PAGES.rglob("*.astro"))
+    print(f"Scanning {len(pages)} pages...\n")
+    for p in sorted(pages):
+        process_file(p)
+    print("\nDone.")
+
+
+if __name__ == "__main__":
+    main()

src/pages/about.astro

@@ -9,14 +9,7 @@ const _body = "<div class=\"container\">\n  <div class=\"about-hero\">\n    <spa
   canonical={"https://traverse-framework.com/about.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    /* Hero */
-    .about-hero {
-      padding: 5rem 0 4rem;
-      max-width: 720px;
-    }
-    .about-hero .t-h1 {
+  <style is:global slot="head">.about-hero .t-h1 {
       margin: 0.75rem 0 1.5rem;
       line-height: 1.15;
     }

src/pages/blog/ai-agents-need-contracts.astro

@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/ai-agents-need-contracts.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }

src/pages/blog/logic-duplication.astro

@@ -9,13 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/logic-duplication.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .post-hero {
-      padding: 4rem 0 3rem;
-      border-bottom: 1px solid var(--border);
-    }
-    .post-hero-meta {
+  <style is:global slot="head">.post-hero-meta {
       display: flex;
       align-items: center;
       gap: 0.75rem;

src/pages/blog/runtime-assumptions.astro

@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/runtime-assumptions.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }

src/pages/blog/uma-explained.astro

@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/uma-explained.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }

src/pages/blog/wasm-business-logic.astro

@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/wasm-business-logic.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }

src/pages/changelog.astro

@@ -9,9 +9,7 @@ const _body = "<div class=\"changelog-wrap\">\n  <div class=\"section-label\" st
   canonical={"https://traverse-framework.com/changelog.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .changelog-wrap { max-width: 760px; margin: 0 auto; padding: 4rem 2rem 6rem; }
-    @media (max-width: 768px) { .changelog-wrap { padding: 2.5rem 1.25rem 4rem; } }
+  <style is:global slot="head">@media (max-width: 768px) { .changelog-wrap { padding: 2.5rem 1.25rem 4rem; } }
 
     .release {
       display: grid;