Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Mfe Remote Debug Overlay
  3. Usage

MfeRemoteDebugOverlay

Usage

Import MfeRemoteDebugOverlay and MfeRemoteDebugCategory from @prepared911/ui/mfe-remote-debug-overlay. The shell portals it into document.body when ?debug=true is set; remotes never render it.
The host measures the remote and passes rect in viewport coordinates. The ring follows the rect, and the category picks its color: registry (green), local (amber), trunk (light blue), pull request (violet) or unresolved (red).
The label names the origin (local, registry, trunk, pr or unresolved) in strong text, followed by the host's own label, the remote id, such as map.
Label placement
The label sits just outside the ring, against its block-start edge, so it never covers a panel title or table header the remote renders at its top. When the viewport leaves no room above the ring, the label flips inside the ring's block-start corner. Both placements mirror under right-to-left.
Hover
Each label keeps a tinted, translucent background at rest. On hover it takes the origin's solid surface (the status solid for registry, local, trunk and unresolved; the accent fill for pull requests), with text on top that passes APCA in both states. The change animates background-color over --duration-default on --easing-standard, and switches instantly under reduced motion. Only the label takes pointer events; the ring never blocks clicks on the content beneath it.
Stacking
The overlay stacks one step above --z-max, the top of the layer scale, so a drawer, popover, toast or tooltip never covers it. Content a native dialog opens with showModal() sits in the top layer, which no z-index outranks.
Previous
Metric Card / Accessibility
Next
MfeRemoteDebugOverlay / API and Development
On this page
Label placement
Hover
Stacking