From e618acec1ba9ef580a4e14f0b5cf9aa0d3ce1d94 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Tue, 6 Jan 2026 21:27:59 -0500
Subject: [PATCH 1/2] feat(metabar): subtle indicators

---
 .../web/ui/components/MetaBar/index.jsx       | 28 ++++++-------------
 .../ui/components/MetaBar/index.module.css    | 28 +++++++++++++++++--
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/generators/web/ui/components/MetaBar/index.jsx b/src/generators/web/ui/components/MetaBar/index.jsx
index 129b8554..2ef1fd60 100644
--- a/src/generators/web/ui/components/MetaBar/index.jsx
+++ b/src/generators/web/ui/components/MetaBar/index.jsx
@@ -1,5 +1,4 @@
 import { CodeBracketIcon, DocumentIcon } from '@heroicons/react/24/outline';
-import Badge from '@node-core/ui-components/Common/Badge';
 import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 
@@ -12,16 +11,19 @@ const iconMap = {
 
 /**
  * @typedef MetaBarProps
- * @property {Array<import('@vcarl/remark-headings').Heading & { stability: string }>} headings - Array of page headings for table of contents
+ * @property {Array<import('@vcarl/remark-headings').Heading & { stability: number }>} headings - Array of page headings for table of contents
  * @property {string} addedIn - Version or date when feature was added
  * @property {string} readingTime - Estimated reading time for the page
  * @property {Array<[string, string]>} viewAs - Array of [title, path] tuples for view options
  * @property {string} editThisPage - URL for editing the current page
  */
 
-const STABILITY_KINDS = ['error', 'warning', null, 'info'];
-const STABILITY_LABELS = ['D', 'E', null, 'L'];
-
+const STABILITY_CLASS_MAP = [
+  styles.deprecated,
+  styles.experimental,
+  undefined,
+  styles.legacy,
+];
 /**
  * MetaBar component that displays table of contents and page metadata
  * @param {MetaBarProps} props - Component props
@@ -38,21 +40,7 @@ export default ({
     headings={{
       items: headings.map(({ slug, value, stability, ...heading }) => ({
         ...heading,
-        value:
-          stability !== 2 ? (
-            <>
-              {value}
-              <Badge
-                size="small"
-                className={styles.badge}
-                kind={STABILITY_KINDS[stability]}
-              >
-                {STABILITY_LABELS[stability]}
-              </Badge>
-            </>
-          ) : (
-            value
-          ),
+        value: <span className={STABILITY_CLASS_MAP[stability]}>{value}</span>,
         data: { id: slug },
       })),
     }}
diff --git a/src/generators/web/ui/components/MetaBar/index.module.css b/src/generators/web/ui/components/MetaBar/index.module.css
index 0f3163ee..17073b42 100644
--- a/src/generators/web/ui/components/MetaBar/index.module.css
+++ b/src/generators/web/ui/components/MetaBar/index.module.css
@@ -5,7 +5,29 @@
   margin-right: 0.25rem;
 }
 
-.badge {
-  display: inline-block;
-  margin-left: 0.25rem;
+:has(> .deprecated),
+:has(> .legacy) {
+  text-decoration-line: line-through !important;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 2px;
+
+  > span {
+    opacity: 0.7;
+  }
+}
+
+:has(> .deprecated) {
+  text-decoration-color: var(--color-danger-600);
+}
+
+:has(> .legacy) {
+  text-decoration-color: var(--color-info-600);
+}
+
+:has(> .experimental) {
+  text-decoration-line: underline !important;
+  text-decoration-style: dashed;
+  text-decoration-color: var(--color-warning-600);
+  text-underline-offset: 3px;
+  font-style: italic;
 }

From 48ef002527d8a071247974f66a74d52b24083166 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Tue, 6 Jan 2026 21:40:04 -0500
Subject: [PATCH 2/2] fixup!

---
 .../web/ui/components/MetaBar/index.jsx           | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/generators/web/ui/components/MetaBar/index.jsx b/src/generators/web/ui/components/MetaBar/index.jsx
index 2ef1fd60..22d3b0cb 100644
--- a/src/generators/web/ui/components/MetaBar/index.jsx
+++ b/src/generators/web/ui/components/MetaBar/index.jsx
@@ -24,6 +24,9 @@ const STABILITY_CLASS_MAP = [
   undefined,
   styles.legacy,
 ];
+
+const STABILITY_TITLE_MAP = ['Deprecated', 'Experimental', undefined, 'Legacy'];
+
 /**
  * MetaBar component that displays table of contents and page metadata
  * @param {MetaBarProps} props - Component props
@@ -40,7 +43,17 @@ export default ({
     headings={{
       items: headings.map(({ slug, value, stability, ...heading }) => ({
         ...heading,
-        value: <span className={STABILITY_CLASS_MAP[stability]}>{value}</span>,
+        value:
+          stability === 2 ? (
+            value
+          ) : (
+            <span
+              className={STABILITY_CLASS_MAP[stability]}
+              title={STABILITY_TITLE_MAP[stability]}
+            >
+              {value}
+            </span>
+          ),
         data: { id: slug },
       })),
     }}