Components / SignalCard
SignalCard
A board of every outside source a project could be read from, present from the first second and dimmed until it is real. The onboarding canvas is the consumer: the board shows the shape of the whole relationship before the visitor has given anything.
import { SignalCard, SignalCardGrid } from '@layers/ui/signal-card'Rendered stock
House rules
- The axis is how real a source is to us, never whether a credential exists. state="lit" means we are reading it in this run, which an App Store listing can be without ever being connected.
- state="named" is what they SAID, state="lit" is what we READ. Collapsing them makes a guess indistinguishable from an observation, which is the whole reason the board is worth building.
- Render the full universe, dim included. A board that only shows what has been revealed is a moving target, and the sources appearing one at a time is the thing this replaces.
- Keep the universe honest per project: a source the project cannot have (Play Store for an iOS-only app) is not dim, it is absent.
- The line truncates on one line, like ConnectionCard. Budget is about 34 characters at the grid minimum. Fit the copy; never widen the card.
- tint is the CATEGORY accent, from the area palette (social purple, ads green, revenue blue, product peach). It is a named token, not a colour: a call site cannot pass a hue outside the palette.
- Not a ConnectionCard variant. That card ends every state in an action or a note; a dim tile must offer nothing, because a note about connecting a source they have not mentioned is the dead affordance the anatomy exists to avoid.