Operator-Grade

Components · Tactical

CoordReadout

A coordinate readout that keeps digits left-to-right isolated (wrapped in <bdi dir="ltr">) so a grid never bidi-reorders inside a right-to-left (Arabic) UI.

Live in all three modes

Day · Night-NVG · Mono — one component, re-themed through the token layer.

GRID38S MC 1234 5678
LAT/LON34.0522, -118.2437
Day
GRID38S MC 1234 5678
LAT/LON34.0522, -118.2437
Night-NVG
GRID38S MC 1234 5678
LAT/LON34.0522, -118.2437
Mono

Variants & states

  • label + value
  • MGRS / lat-lon
  • RTL-safe

Tokens used

  • --semantic-color-surface-input
  • --semantic-color-border-default
  • --semantic-color-text-primary
  • --semantic-color-text-muted

Copy-paste

import { CoordReadout } from 'operator-components';

<CoordReadout label="GRID" value="38S MC 1234 5678" />

Figma: library link coming soon — gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)

Get Operator-Grade Preview in Figma

Related components

OverlayPanel

COP overlay panel — four anchors, map-safe.

Input

Labelled, mono, error states — for tactical data entry.

Table

Numeric-aligned, selectable rows — for track lists.