Screens

Screens live in src/screens/ and are real Astro/HTML/CSS components, not images. Each is wrapped in <Screenshot> (src/screens/_Screenshot.astro), which draws the browser-chrome frame with a fake address bar and optional caption.

---
import Screenshot from '../screens/_Screenshot.astro';
import DecisionQueue from '../screens/DecisionQueue.astro';
---

<Screenshot url="northstar.dev/toolbar/decisions" caption="The decision queue.">
  <DecisionQueue />
</Screenshot>

Why components, not images

Screens consume the live design-token file. A token edit — “rounder corners” — changes the marketing pages and every screenshot in the same keystroke. Screens are also the seed of the real frontend: the build step lifts them into the app one at a time.

Conventions

• Underscore-prefixed files (_Screenshot.astro) are infrastructure, not screens.
• A screen referenced from feature frontmatter (screens: [DecisionQueue]) should exist in src/screens/ — this edge joins the trace graph when the linter learns about screens (filed against the toolbar phase).
• Sample data is hard-coded in the screen. Dreamed screens are static by design; wiring them up is build-phase work.

States & edge cases

• Empty / error / permission states belong in docs pages as additional screen variants — a screen per state, not a happy-path collage.
• Screens must render without JavaScript; the frame is pure CSS.