Components / Power List

Power List

The answer to "why would I do this" on any surface that puts a capability behind a setup step: a connection, a phone number to verify, an SDK to install. One sentence per thing the capability buys.

import { PowerList } from '@layers/ui/power-list'

Rendered stock

House rules

• Render it in BOTH states, set up and not. A list that disappears once you are connected leaves nobody able to say why the connection they already have matters.
• Put it ABOVE the body, before the form or the QR or the instance list. "Why am I doing this" precedes "do it".
• One sentence each, and only what the product actually does. This is the copy a user decides on, so a line the code cannot back is a support ticket, not a sell.
• The points are primary reading content, not caption text: reading size, full-contrast ink. Education rendered small and muted is the anti-pattern this treatment replaced.
• The block cards itself — education and help content gets card containment, never loose body text (founder ruling 2026-08-02). The surface stack handles every plane: --card reads inside a dialog in both themes, and a secondary surface remaps it to --background. Call sites never wrap it in a second card.
• Prose education takes EducationCard, the same treatment with paragraphs instead of bullets: the "how this one works" block, the popup-authorization note. Enumerable outcomes are PowerList; explanation is EducationCard; neither is ever a loose muted paragraph.
• Every point gets an ICON in a medallion, never a bullet. A disc says only "this is a list"; the icon says what KIND of thing the line is about, which is the one thing a reader can take from the block before reading a word (founder ruling 2026-08-05).
• Pass icons as { text, icon } when they carry real distinctions, and a bare string when they do not — the Check fallback repeated down the list is BETTER than three glyphs picked to look busy, which implies a taxonomy the reader then tries and fails to decode.
• The medallion is EmptyState's recipe at PowerList's own size: rounded-full bg-muted, 40px circle, size-5 glyph at strokeWidth 1.5 (restored from a brief run at 1 — founder call 2026-08-15). Never a second take on "icon in a circle" — that is how a design system grows two of everything.
• The label is omitted ONLY when the surface already names the block — a Dialog whose DialogTitle is the education title (the library education dialogs). A list floating in a mixed body always carries its marker.
• Never hand-roll the block. ConnectionPanel and the SMS settings panel both render it, and it is a component so the two cannot drift.