<!-- source-hash: 0eb9d42ebd2c94e50a4a59a1b4f5779d -->
Storybook stories for the `UserSummary` component, covering all display variants from minimal to fully-featured configurations.

## Key Components

- **`makeAvatar`** — Helper that generates inline SVG avatar data URIs with initials and a background color, used to produce deterministic test fixtures without external image dependencies.
- **`meta`** — Storybook metadata block configuring controls for `compact`, `avatarSize`, `showEditButton`, and `editablePhoto`.
- **Story exports** — 14 named stories grouped by feature area:

| Group | Stories |
|---|---|
| Default (Full) | `Default`, `NoAvatar`, `WithSubtitle` |
| Auth Providers | `WithAuthProviders` |
| MSP Preview | `WithMSP`, `WithMSPNoLogo` |
| Edit Button | `WithEditButton` |
| Full Featured | `FullFeatured` |
| Compact Variant | `Compact`, `CompactNoAvatar`, `CompactWithSubtitle`, `CompactWithMSP`, `CompactLargeAvatar` |

## Usage Example

```typescript
// Reuse the avatar helper in other story files
const avatar = makeAvatar('AB', '#14b8a6')

export const MyStory: Story = {
  args: {
    name: 'Alice Brown',
    email: 'alice@example.com',
    avatarUrl: avatar,
    compact: true,
    mspPreview: {
      name: 'Acme MSP',
      seatCount: 300,
      technicianCount: 8,
      annualRevenue: 750_000,
    },
  },
}
```

The `FullFeatured` story serves as the canonical reference combining avatar, MSP badge, auth provider icons, and the edit button in a single configuration.