living-documentation 7.13.0 → 7.14.0

package/dist/src/frontend/accuracy-gauge.js

@@ -2,12 +2,35 @@
 // Shown in the sticky document header (right-aligned, own row) when the
 // current document has at least one metadata entry.
 
+const RED = "#dc2626"; // red-600
+const YELLOW = "#eab308"; // yellow-500
+const GREEN = "#16a34a"; // green-600
+
 function accuracyColor(ratio) {
   const pct = Math.max(0, Math.min(1, ratio)) * 100;
-  if (pct > 80) return "#16a34a"; // green-600
-  if (pct >= 60) return "#eab308"; // yellow-500
+  if (pct > 80) return GREEN;
+  if (pct >= 60) return YELLOW;
   if (pct >= 40) return "#f97316"; // orange-500
-  return "#dc2626"; // red-600
+  return RED;
+}
+
+// Returns the CSS background for the gauge bar (always 100% wide).
+// < 30%       → solid red
+// 30–60%      → red → yellow gradient, red-dominant (yellow at 85%)
+// 60–80%      → red → yellow gradient, yellow-dominant (red at 15%)
+// 80–100%     → yellow → green gradient, green-dominant (yellow at 15%)
+// 100%        → solid green
+function accuracyBackground(ratio) {
+  const pct = Math.max(0, Math.min(1, ratio)) * 100;
+  if (pct >= 100) return GREEN;
+  if (pct < 30) return RED;
+  if (pct < 60) {
+    return `linear-gradient(to right, ${RED} 0%, ${RED} 60%, ${YELLOW} 100%)`;
+  }
+  if (pct < 80) {
+    return `linear-gradient(to right, ${RED} 0%, ${YELLOW} 40%, ${YELLOW} 100%)`;
+  }
+  return `linear-gradient(to right, ${YELLOW} 0%, ${GREEN} 40%, ${GREEN} 100%)`;
 }
 
 function renderAccuracyGauge(report) {
@@ -28,11 +51,8 @@ function renderAccuracyGauge(report) {
 
   if (label) label.textContent = window.t("accuracy.label");
   if (bar) {
-    bar.style.width = pct + "%";
-    // The gradient spans the full track width, so we stretch the background
-    // to (100/pct)× the bar width — this way the bar only shows the left
-    // portion of the red→green gradient corresponding to its percentage.
-    bar.style.backgroundSize = pct > 0 ? `${10000 / pct}% 100%` : "100% 100%";
+    bar.style.width = "100%";
+    bar.style.background = accuracyBackground(report.accuracy);
   }
   if (value) {
     value.textContent = pct + "%";

package/dist/src/frontend/index.html

@@ -659,8 +659,8 @@
                 >
                   <div
                     id="accuracy-gauge-bar"
-                    class="h-full transition-all"
-                    style="width: 0%; background: linear-gradient(to right, #dc2626, #f97316, #eab308, #16a34a); background-size: 100% 100%; background-repeat: no-repeat;"
+                    class="h-full w-full transition-all"
+                    style="background: #dc2626;"
                   ></div>
                 </div>
                 <span

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-documentation",
-  "version": "7.13.0",
+  "version": "7.14.0",
   "description": "A CLI tool that serves a local Markdown documentation viewer",
   "main": "dist/src/server.js",
   "bin": {