npm package: @scfools/hud-kit
Description: Tactical HUD component library for Star Citizen data visualization
Latest version: 0.1.0

# @scfools/hud-kit

Tactical HUD component library for Angular. Dark-themed, data-dense UI components designed for Star Citizen data visualization.

## Install

```bash
npm install @scfools/hud-kit
```

Requires Angular 19+ as a peer dependency.

## Setup

### 1. Include design tokens

Add the HUD tokens stylesheet to your `angular.json` styles array:

```json
"styles": [
  "node_modules/@scfools/hud-kit/tokens/hud-tokens.css",
  "src/styles.css"
]
```

Or import it in your global stylesheet:

```css
@import '@scfools/hud-kit/tokens/hud-tokens.css';
```

### 2. Include fonts

Add Space Grotesk and JetBrains Mono from Google Fonts to your `index.html`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
```

## Entry Points

### `@scfools/hud-kit/tokens`

Design token constants for use in TypeScript.

```ts
import { HUD_COLORS, HUD_SERIES_COLORS } from '@scfools/hud-kit/tokens';
```

- `HUD_COLORS` -- named color constants (primary, secondary, danger, surfaces)
- `HUD_SERIES_COLORS` -- ordered palette for chart series

### `@scfools/hud-kit/chrome`

App shell components: navigation bars, status indicators.

```ts
import { HudTopBar, HudSideNav, HudStatusBadge, HudBottomBar } from '@scfools/hud-kit/chrome';
```

### `@scfools/hud-kit/headers`

Page and section title components.

```ts
import { HudPageTitle, HudSectionHeader } from '@scfools/hud-kit/headers';
```

### `@scfools/hud-kit/stats`

Stat display components: KPI cards, gauges, readouts, ratings.

```ts
import {
  HudKpiCard, HudCompactStat, HudStatUnderbar, HudDelta,
  HudRingGauge, HudDigitalReadout, HudOverlayReadout,
  HudSegmentedBar, HudControlSurfaceRow, HudCombatRating
} from '@scfools/hud-kit/stats';
```

### `@scfools/hud-kit/charts`

SVG chart components and composite panels.

```ts
// Individual charts
import {
  GroupedBarsComponent, StackedBarsComponent, BulletChartComponent,
  RadarChartComponent, ScatterPlotComponent, HeatmapGridComponent,
  LineAreaChartComponent, BubblePlotComponent, PowerFlowComponent,
  // ... 20 chart types total
} from '@scfools/hud-kit/charts';

// Composite panels (pre-configured chart groups)
import {
  OffensivePanelComponent, DefensivePanelComponent,
  PowerPanelComponent, RadarPanelComponent, FlightPanelComponent
} from '@scfools/hud-kit/charts';

// Types
import type { ChartSeries, ChartDataPoint } from '@scfools/hud-kit/charts';
```

### `@scfools/hud-kit/comparison`

Side-by-side comparison components.

```ts
import {
  HudComparisonRow, HudShipComparisonCard,
  HudTelemetryTable, HudFleetHubCard
} from '@scfools/hud-kit/comparison';
```

### `@scfools/hud-kit/controls`

Interactive controls: buttons, filters, alerts, tags.

```ts
import { HudAlertCard, HudDataTag, HudButton, HudFilterPanel } from '@scfools/hud-kit/controls';
```

### `@scfools/hud-kit/edge`

Glassmorphism-styled display components.

```ts
import {
  EdgeRadarChartComponent, EdgeCircleGraphComponent,
  EdgeProgressBarComponent, EdgeBadgeComponent,
  EdgeStatCardComponent, EdgeBentoCardComponent,
  EdgeGlassPanelComponent, EdgeInlineAlertComponent
} from '@scfools/hud-kit/edge';
```

## Usage Example

```ts
import { Component } from '@angular/core';
import { HudPageTitle } from '@scfools/hud-kit/headers';
import { HudKpiCard, HudRingGauge } from '@scfools/hud-kit/stats';
import { HudComparisonRow } from '@scfools/hud-kit/comparison';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [HudPageTitle, HudKpiCard, HudRingGauge, HudComparisonRow],
  template: `
    <hud-page-title label="Fleet Overview" />
    <div class="grid">
      <hud-kpi-card label="Ships" [value]="fleet.count" />
      <hud-ring-gauge label="Shield HP" [value]="shields.current" [max]="shields.max" />
      <hud-comparison-row label="Speed" [values]="[shipA.speed, shipB.speed]" unit="m/s" />
    </div>
  `
})
export class DashboardComponent { }
```

## Theming

All components use CSS custom properties from `hud-tokens.css`. Override them to customize:

```css
:root {
  --hud-primary: #00ff88;
  --hud-secondary: #ff6600;
  --hud-bg: #0a0a0a;
  --hud-surface: #0a0a0a;
  --hud-font-display: 'Your Font', sans-serif;
}
```

See `hud-tokens.css` for the full list of available properties.

## License

MIT