Harbor Beacon
THE Harbor Mode signal. Off is a quiet bronze outline; connecting pulses ion; connected-own-node earns the aurum beacon with its shadow-beacon halo and radar sweep; degraded flickers amber. The beacon is the only element in the system allowed to animate forever.
Beacon — all states, both sizes
Each state at md (chrome headers), sm (inline rows), and sm dot-only for the tightest slots. The label is mono microcopy in the state's own tone.
<HarborBeacon state="off" size="md" />
<HarborBeacon state="off" size="sm" showLabel={false} />--ch-border-strong--ch-fg-faint
Routing via public endpoints — the outline dot stays deliberately dim.
<HarborBeacon state="connecting" size="md" />--ch-primary
Establishing the private route — ion dot with an expanding pulse ring.
<HarborBeacon state="connected-own-node" size="md" />--ch-accent--ch-shadow-beacon--ch-harbor-beacon
Your node, your rules — 12 peers at block 961,247. Aurum beacon, halo, radar sweep.
<HarborBeacon state="degraded" size="md" />--ch-warning
Fallback routing — down to 2 peers, 38 blocks behind tip. Amber flicker, never silent failure.
Banner
The full-width strip for app chrome — beacon plus per-state copy, with an optional trailing action. Connected carries the shadow-beacon halo across the whole strip.
<HarborBanner state="off" />--ch-surface--ch-border--ch-fg-muted
Default copy; override with the message prop.
<HarborBanner state="connecting" />--ch-primary--ch-primary-muted
Ion strip while the private route comes up.
<HarborBanner state="connected-own-node" />--ch-accent--ch-accent-muted--ch-shadow-beacon
The aurum strip — HARBOR MODE, routing through your own node.
<HarborBanner state="degraded" />--ch-warning--ch-warning-muted
Amber strip naming the fallback, not hiding it.
<HarborBanner state="degraded" message="Harbor degraded — 2 peers, fallback routing in use">
<ButtonLink href="/console">Open console</ButtonLink>
</HarborBanner>--ch-warning--ch-warning-muted--ch-border
The trailing slot takes an action — here, a link into the node console.
Across themes
Connected-own-node under dark, light, and Harbor Mode. This is the pattern Harbor Mode exists for — with data-harbor on, the accent re-points to the beacon aurum and the whole chrome tilts toward it.
<HarborBeacon state="connected-own-node" size="md" />
<HarborBanner state="connected-own-node" />--ch-accent--ch-accent-muted--ch-shadow-beacon--ch-harbor-beacon--ch-harbor-beacon-halo