<!-- source-hash: fd0b3b382332c759225974101fb17198 -->
Displays structured service information in a card layout with labeled rows that support copy, reveal (masked secrets), and external link actions.

## Key Components

- **`ServiceCard`** — Main card component rendering a header (icon, title, subtitle, tag) and a list of data rows
- **`ServiceCardRowItem`** — Internal row component handling per-row interactivity (reveal/copy/open)
- **`MaskedValue`** — Renders a value as bullet dots (`•`) until revealed
- **`ServiceCardProps`** — Props interface for the card
- **`ServiceCardRow`** — Defines a single row with optional label, secret masking, monospace formatting, href, and action overrides
- **`ServiceCardTag`** — Badge displayed in the card header
- **`ServiceCardRowAction`** — Flags controlling which actions (`copy`, `open`, `reveal`) appear per row

## Usage Example

```typescript
import { ServiceCard } from '@your-org/ui'

<ServiceCard
  title="PostgreSQL"
  subtitle="Primary database"
  tag={{ label: 'Production' }}
  rows={[
    {
      label: 'Host',
      value: 'db.example.com',
      actions: { copy: true },
    },
    {
      label: 'Password',
      value: 's3cr3tpassword',
      isSecret: true,
      copyValue: 's3cr3tpassword',
    },
    {
      label: 'Console',
      value: 'Open dashboard',
      href: 'https://console.example.com',
      actions: { copy: false, open: true },
    },
  ]}
/>
```

## Behavior Notes

- **Secrets** default to masked display; `reveal` action toggles visibility
- **Copy** action defaults to `true`; uses `copyValue` if provided, otherwise falls back to `value`
- **Open** action is automatically enabled when a `href` is present
- Falls back to the **OpenFrameLogo** if no `icon` is supplied