From 89c7a7f603d8e251af74c576e8557cc9d4909688 Mon Sep 17 00:00:00 2001
From: Dreamodus <info@dreamodus.software>
Date: Mon, 13 Jul 2026 19:36:28 -0700
Subject: [PATCH] Gauge: short rim pointer so the needle never covers the
 center readout

The full center-to-rim needle crossed the digital readout at low/mid
values. Draw it as a short marker riding just inside the arc (with a dark
outline for contrast) and recenter the readout.
---
 packages/dreamknob/src/skins/Gauge.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/dreamknob/src/skins/Gauge.tsx b/packages/dreamknob/src/skins/Gauge.tsx
index b7444dc..7fa212d 100644
--- a/packages/dreamknob/src/skins/Gauge.tsx
+++ b/packages/dreamknob/src/skins/Gauge.tsx
@@ -91,8 +91,10 @@ export const Gauge: React.FC<GaugeProps> = ({
   const valueAngle = angleFromNormalized(n, angleOffset, angleRange);
   const trackPath = describeArc(c, c, r, angleOffset, angleOffset + angleRange);
   const valuePath = n > 0.001 ? describeArc(c, c, r, angleOffset, valueAngle) : '';
-  const tip = polarToCartesian(c, c, r - t * 0.1, valueAngle);
-  const tail = polarToCartesian(c, c, t * 0.4, valueAngle);
+  // A short pointer riding the rim — it never crosses the center, so it can't
+  // cover the digital readout that sits there.
+  const tip = polarToCartesian(c, c, r + t * 0.15, valueAngle);
+  const tail = polarToCartesian(c, c, r - t * 1.2, valueAngle);
 
   return (
     <div
@@ -117,18 +119,28 @@ export const Gauge: React.FC<GaugeProps> = ({
           {valuePath && (
             <path d={valuePath} fill="none" stroke={litColor} strokeWidth={t} strokeLinecap="round" />
           )}
-          {needle && (
+          {needle && n > 0.001 && (
             <line
               x1={tail.x}
               y1={tail.y}
               x2={tip.x}
               y2={tip.y}
-              stroke={litColor}
-              strokeWidth={Math.max(2, size * 0.022)}
+              stroke="#0b0d0e"
+              strokeWidth={Math.max(3, size * 0.05)}
+              strokeLinecap="round"
+            />
+          )}
+          {needle && n > 0.001 && (
+            <line
+              x1={tail.x}
+              y1={tail.y}
+              x2={tip.x}
+              y2={tip.y}
+              stroke="#fff"
+              strokeWidth={Math.max(1.5, size * 0.022)}
               strokeLinecap="round"
             />
           )}
-          {needle && <circle cx={c} cy={c} r={Math.max(2.5, size * 0.04)} fill={litColor} />}
         </svg>
         {showValue && (
           <div
@@ -136,7 +148,7 @@ export const Gauge: React.FC<GaugeProps> = ({
               position: 'absolute',
               left: 0,
               right: 0,
-              top: needle ? '58%' : '50%',
+              top: '50%',
               transform: 'translateY(-50%)',
               display: 'flex',
               flexDirection: 'column',