{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "energy-meter",
  "title": "Energy meter",
  "description": "The armor energy capacity readout: a row of pips where `used` are filled, the rest of `total` are empty sockets, and any headroom up to `max` shows as faint upgrade ghosts.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/energy-meter.tsx",
      "content": "import type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface EnergyMeterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Energy points spent (filled pips). */\n  used: number;\n  /** Current capacity (filled + empty pips). */\n  total: number;\n  /**\n   * Upgradeable ceiling — pips between `total` and `max` render as faint ghosts\n   * to show remaining headroom. Defaults to `total` (no ghosts).\n   */\n  max?: number;\n  /** Pip diameter (px). Default 10. */\n  size?: number;\n  /** Pip fill color (the energy affinity). Defaults to the accent token. */\n  color?: string;\n}\n\n/**\n * The armor energy capacity readout: a row of pips where `used` are filled,\n * the rest of `total` are empty sockets, and any headroom up to `max` shows as\n * faint upgrade ghosts. Color-tint via `color` for elemental affinity.\n */\nexport function EnergyMeter({\n  used,\n  total,\n  max,\n  size = 10,\n  color = \"var(--engram-accent)\",\n  className,\n  style,\n  ...props\n}: EnergyMeterProps) {\n  const ceiling = Math.max(total, max ?? total);\n  const pips = Array.from({ length: ceiling }, (_, i) => {\n    if (i < used) return \"used\" as const;\n    if (i < total) return \"open\" as const;\n    return \"ghost\" as const;\n  });\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: native <meter> can't hold the custom pip elements; role=\"meter\" carries the same semantics\n    <div\n      className={cn(\"inline-flex items-center\", className)}\n      style={{ gap: Math.max(2, Math.round(size * 0.28)), ...style }}\n      role=\"meter\"\n      aria-valuenow={used}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-label=\"Energy\"\n      {...props}\n    >\n      {pips.map((kind, i) => (\n        <span\n          // pips are positional and identical within a kind — index is the identity\n          // biome-ignore lint/suspicious/noArrayIndexKey: pips have no stable id; position is the identity\n          key={i}\n          aria-hidden\n          className={cn(\n            // Angular notches (not soft circles) — the Destiny FUI energy meter.\n            \"inline-block border\",\n            kind === \"open\" && \"border-engram-border-strong\",\n            kind === \"ghost\" && \"border-engram-border border-dashed opacity-50\",\n          )}\n          style={\n            {\n              width: Math.round(size * 0.62),\n              height: size,\n              ...(kind === \"used\"\n                ? {\n                    background: color,\n                    borderColor: color,\n                    boxShadow: `0 0 5px color-mix(in oklch, ${color} 55%, transparent)`,\n                  }\n                : {}),\n            } as CSSProperties\n          }\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/energy-meter.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "loadout"
  ],
  "type": "registry:component"
}