Loading page…
Loading page…
THE Harbor Mode signal. Off is a quiet bronze outline; connecting fades ion in and out; connected-own-node earns the kelp beacon with its expanding ripple ring; degraded blinks a red square frame around a reducing square. The beacon is the only element in the system allowed to animate forever.
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-faintRouting via public endpoints — the outline dot stays deliberately dim.
<HarborBeacon state="connecting" size="md" />--ch-primaryEstablishing the private route — ion dot fading in and out.
<HarborBeacon state="connected-own-node" size="md" />--ch-success--ch-shadow-beaconYour node, your rules — 12 peers at block 961,247. Kelp beacon with an expanding ripple ring.
<HarborBeacon state="degraded" size="md" />--ch-dangerFallback routing — down to 2 peers, 38 blocks behind tip. Red blinking square frame, reducing square inside — never silent failure.
The full-width strip for app chrome — beacon plus per-state copy, with an optional trailing action. Connected carries the shadow-beacon keyline across the whole strip.
<HarborBanner state="off" />--ch-surface--ch-border--ch-fg-mutedDefault copy; override with the message prop.
<HarborBanner state="connecting" />--ch-primary--ch-primary-mutedIon strip while the private route comes up.
<HarborBanner state="connected-own-node" />--ch-success--ch-success-muted--ch-shadow-beaconThe kelp strip — HARBOR MODE, routing through your own node.
<HarborBanner state="degraded" />--ch-danger--ch-danger-mutedRed 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-danger--ch-danger-muted--ch-borderThe trailing slot takes an action — here, a link into the node console.
Connected-own-node beacon and banner together in the flat dark theme. This is the pattern Harbor Mode exists for — the kelp beacon and its ripple mark the one state where you are routing through your own node.
<HarborBeacon state="connected-own-node" size="md" />
<HarborBanner state="connected-own-node" />--ch-success--ch-success-muted--ch-shadow-beacon