<!-- source-hash: 726aed7bdab22617295842e04fb380be -->
A display card component for presenting service information with labeled rows that support copy-to-clipboard, external link opening, and secret value masking/revealing.

## Key Components

| Export | Type | Description |
|---|---|---|
| `ServiceCard` | Component | Main card with header (icon, title, subtitle, tag) and a list of data rows |
| `ServiceCardRowItem` | Component (internal) | Individual row with value display and action buttons |
| `MaskedValue` | Component (internal) | Renders a value as dots or plaintext based on reveal state |
| `ServiceCardProps` | Interface | Props for `ServiceCard` |
| `ServiceCardRow` | Type | Row data: label, value, href, secret flag, monospace flag, and per-row action overrides |
| `ServiceCardTag` | Type | Badge label displayed in the card header |
| `ServiceCardRowAction` | Type | Flags controlling which actions (`copy`, `open`, `reveal`) are available per row |

**Default row action behavior:**
- `copy` — always enabled
- `open` — enabled when `row.href` is provided
- `reveal` — enabled when `row.isSecret` is `true`

## Usage Example

```typescript
import { ServiceCard } from '@openframe/ui'

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

## Notes

- Defaults to the `OpenFrameLogo` icon when no `icon` prop is supplied.
- Secret rows display a bullet mask (`••••••••••••`) until the eye toggle is clicked.
- Copy feedback uses a `CheckIcon` that reverts after a short delay via the `useCopyToClipboard` hook.
- External links always open with `noopener,noreferrer` for security.