Gauge: no value arc at the minimum

At 0 the value arc is a zero-length dash (pathLength 0), and its round
caps still painted a primary dot on the dial in every look. The arc is
now transparent while its fraction is not above 0. The widget spec puts
a gauge at 0 on its panel and checks it in each look; its tile count,
stale since the buttons widget, is 11.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/Dashboard/ui/fluksio/Data.tsx

@@ -64,6 +64,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
       ? 0
       : Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
   )
+  // At the minimum the reading is a zero-length dash, and its round caps would
+  // still paint a dot on the dial. Nothing reads there, so nothing is drawn.
+  const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
   const { label: reading, numeric } = useAnimatedNumber(value, precision)
   return (
     <div className="flex min-h-0 flex-1 items-center justify-center">
@@ -86,7 +89,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
             fraction itself. */}
         <motion.path
           d={arcPath(GAUGE_START, GAUGE_START + GAUGE_SWEEP)}
-          style={{ pathLength: fraction }}
+          style={{ pathLength: fraction, opacity: drawn }}
           fill="none"
           stroke="var(--primary)"
           strokeWidth={9}

frontend/src/components/Dashboard/ui/glass/Data.tsx

@@ -63,6 +63,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
       ? 0
       : Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
   )
+  // At the minimum the reading is a zero-length dash, and its round caps would
+  // still paint a dot on the dial. Nothing reads there, so nothing is drawn.
+  const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
   const { label: reading, numeric } = useAnimatedNumber(value, precision)
   return (
     <div className="flex min-h-0 flex-1 items-center justify-center">
@@ -91,6 +94,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
           // fills and the active controls do.
           style={{
             pathLength: fraction,
+            opacity: drawn,
             filter: "drop-shadow(0 0 4px var(--primary))",
           }}
           fill="none"

frontend/src/components/Dashboard/ui/material/Data.tsx

@@ -62,6 +62,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
       ? 0
       : Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
   )
+  // At the minimum the reading is a zero-length dash, and its round caps would
+  // still paint a dot on the dial. Nothing reads there, so nothing is drawn.
+  const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
   const { label: reading, numeric } = useAnimatedNumber(value, precision)
   return (
     <div className="flex min-h-0 flex-1 items-center justify-center">
@@ -84,7 +87,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
             fraction itself. */}
         <motion.path
           d={arcPath(GAUGE_START, GAUGE_START + GAUGE_SWEEP)}
-          style={{ pathLength: fraction }}
+          style={{ pathLength: fraction, opacity: drawn }}
           fill="none"
           stroke="var(--primary)"
           strokeWidth={9}