Event Checklist Map Detail Integration Block for React

The block names PostHog in text, the way any integration page says what it works with, and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. Cairnstep's own tile has an icon slot for your logo. The pair is hidden from assistive technology because the heading already names both products.

Both buttons are links (href="#"). Point Connect PostHog at your own connect flow, where the buyer pastes a personal API key, and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect PostHog is a Shine Button, the block's one primary action; View docs is an outline button. Both buttons render the link they're given with render, with nativeButton={false}.

Edit READS at the top of the file: each entry is a PostHog API scope in code and a short reason. person:read and cohort:read are scope names in PostHog's API reference, and query:read is the scope its query endpoint asks for; check the list against the key settings in your own PostHog before you ship, and list exactly the scopes your product requests so the page and the key agree. PostHog's personal API keys start with phx_, and the block says so beside the list.

It is a real list of three rows. Each row is the event name in code, a visually hidden "ticks", a hairline arrow drawn with CSS and an icon, and the checklist step with a filled or hollow tick and the words "Done" or "Waiting for the event", so the state never rests on shade alone. The caption counts the ticked steps from the data. Change LINKS to show your own events and steps.

The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile. The letters are typed, not worked out from the name, so services that share a first letter stay apart. MarkTile draws either side: filled for your product, with your logo as its child, and neutral for the service. Then rewrite READS, STEPS and LINKS in that service's own terms.

Below lg the divider gives way to a rule between the parts, which stack in reading order, and below sm each arrow turns down between an event and its step. In a right-to-left layout the columns and the step rail flip and the arrows mirror, while scopes and event names keep their left-to-right order. The header and the buttons fade up once on load with CSS transitions; with reduced motion they simply appear. The block has no state.