Half-Arc Gauge Mini

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 701,
  slug: 'half-arc-gauge-mini',
  name: 'Half-Arc Gauge Mini',
  category: 'metrics-telemetry',
  subcategory: 'gauges',
  pillar: 'de',
  description: 'Compact half-arc gauge — minimum viable telemetry primitive for dashboards.',
  spec: `## Intent
Smallest possible half-arc reading: one value, one arc, one label. Builds intuition for the larger gauge family without overhead.

## Acceptance Criteria
- [ ] 180-degree arc with proportional fill
- [ ] Numeric readout below
- [ ] Theme-aware stroke via tokens
- [ ] Negative: does NOT require JS

## Constraints
- Pure SVG
- Single-colour fill, neutral track`,
  tags: ['svg', 'gauge', 'real-content', 'responsive'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const value = 72;
const r = 60;
const total = Math.PI * r;
const dashOffset = total * (1 - value / 100);
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 flex flex-col items-center overflow-hidden">
  <svg viewBox="0 0 140 80" class="w-full max-w-[220px] block" aria-label={`Value ${value} percent`}>
    <path d="M 10 70 A 60 60 0 0 1 130 70" stroke="var(--color-ink)" stroke-width="10" fill="none" opacity="0.12" />
    <path d="M 10 70 A 60 60 0 0 1 130 70" stroke="var(--color-de)" stroke-width="10" fill="none" stroke-dasharray={total} stroke-dashoffset={dashOffset} />
    <text x="70" y="62" text-anchor="middle" font-family="Inter, sans-serif" font-weight="900" font-size="26" fill="var(--color-ink)">{value}<tspan font-size="14" opacity="0.6">%</tspan></text>
  </svg>
  <span class="mt-1 font-mono text-[10px] uppercase tracking-widest opacity-60">throughput</span>
</div>