spb/polyllm

1import * as React from "react";2import { cn } from "@/lib/utils";34/**5 * Single-hue magnitude meter (thin 4px bar, rounded ends, muted track). Server-safe.6 * Values are always written next to it in text tokens; the bar only adds proportion.7 */8export function Meter({ value, max, className, tone = "accent", label }: { value: number | null | undefined; max: number; className?: string; tone?: "accent" | "muted"; label?: string }) {9  const pct = value === null || value === undefined || !Number.isFinite(value) || max <= 0 ? 0 : Math.max(0, Math.min(100, (value / max) * 100));10  return (11    <span className={cn("block h-1 w-full overflow-hidden rounded-full bg-bg-muted", className)} role="img" aria-label={label ?? (value === null || value === undefined ? "no data" : `${Math.round(pct)}% of maximum`)}>12      {pct > 0 ? <span className={cn("block h-full rounded-full", tone === "accent" ? "bg-accent" : "bg-fg-subtle")} style={{ width: `${Math.max(pct, 2)}%` }} /> : null}13    </span>14  );15}16