From c7f0f0a46eeae1c749a75db63d1c95483b6f8590 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Mar 2026 11:21:16 +0000
Subject: [PATCH] docs: add global beta banner to docs site

Adds a BetaBanner component above the site header informing visitors
that the platform is pre-production, beta lands at v0.8, and production
readiness is targeted at v1.0. Updates --header-height to 5.5rem to
account for the banner's added height in the sticky header block.

https://claude.ai/code/session_01UzFuNb7s5aVLFT1SGmC1Ta
---
 docs/site/fragments/header.html | 31 +++++++++++++++++++++++++++++++
 docs/site/style.css             |  2 +-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/docs/site/fragments/header.html b/docs/site/fragments/header.html
index 6832662..dbc5865 100644
--- a/docs/site/fragments/header.html
+++ b/docs/site/fragments/header.html
@@ -1,4 +1,34 @@
 <!-- Component Definitions -->
+<fe-component name="BetaBanner">
+    <style>
+        .beta-banner {
+            background: color-mix(in srgb, var(--card-a) 15%, var(--bg));
+            border-bottom: 1px solid color-mix(in srgb, var(--card-a) 35%, transparent);
+            color: var(--ink);
+            font-size: 0.68rem;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            text-align: center;
+            padding: 0.55rem 2rem;
+            line-height: 1.4;
+        }
+
+        .beta-banner a {
+            color: var(--accent);
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+
+        .beta-banner a:hover {
+            opacity: 0.8;
+        }
+    </style>
+    <div class="beta-banner">
+        pre-production · beta at v0.8 · production-ready at v1.0 · <a href="https://github.com/fe-platform/fe/releases" target="_blank" rel="noopener noreferrer">track releases</a>
+    </div>
+</fe-component>
+
 <fe-component name="SiteTitle">
     <style>
         .site-title {
@@ -140,6 +170,7 @@
 </fe-component>
 
 <!-- Composition -->
+<fe-compose name="BetaBanner"></fe-compose>
 <fe-compose name="SiteHeader">
     <fe-compose name="HeaderInner">
         <fe-compose name="SiteTitle" slot="left"></fe-compose>
diff --git a/docs/site/style.css b/docs/site/style.css
index cba0590..4ef1c28 100644
--- a/docs/site/style.css
+++ b/docs/site/style.css
@@ -2,7 +2,7 @@
     --bg: #fcfcf9; --ink: #0a0a0a; --mid: #4a4a48; --accent: #4338ca; --rule: #d1d1cc; --dot: #bdbdb8;
     --card-a: #f59e0b; --card-b: #3b82f6; --card-c: #10b981; --card-d: #f43f5e;
     --code-bg: #fffcf0; --code-text: #222220; --code-rule: #f0eee0;
-    --article-bg: #f8f8f6; --article-text: #1a1a1a; --header-height: 3.5rem;
+    --article-bg: #f8f8f6; --article-text: #1a1a1a; --header-height: 5.5rem;
 }
 @media (prefers-color-scheme: dark) {
     :root {