<!-- source-hash: 981f1e46dc31590c456984a7462fa013 -->
A React client component that renders an embedded Google Sheets viewer with a header bar and an external link button.

## Key Components

### `GoogleSheetsViewerProps`
| Prop | Type | Required | Description |
|---|---|---|---|
| `externalUrl` | `string` | ✅ | Google Sheets URL (standard or embed format) |
| `fileName` | `string` | ❌ | Display name shown in the header; defaults to `"Google Sheet"` |
| `height` | `string` | ❌ | Iframe height passed to `EmbedIframe` |

### `GoogleSheetsViewer`
Main exported component. Handles two render states:
- **Empty state** — renders a centered icon and message when `externalUrl` is falsy
- **Viewer state** — renders a header row (icon + title + open-in-Sheets button) above an `EmbedIframe`

URL conversion is delegated to two utility helpers:
- `toGoogleSheetsEmbedUrl` — converts the URL to the `/pub?output=html` embed format for the iframe
- `toGoogleSheetsOriginalUrl` — normalises the URL back to the standard `docs.google.com/spreadsheets` form for the external link

## Usage Example

```typescript
import { GoogleSheetsViewer } from '@/components/viewers/google-sheets-viewer'

export default function ReportPage() {
  return (
    <GoogleSheetsViewer
      externalUrl="https://docs.google.com/spreadsheets/d/SHEET_ID/edit"
      fileName="Q3 Budget Report"
      height="600px"
    />
  )
}
```

## Source

[`google-sheets-viewer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/openframe-frontend-core/src/components/embeds/google-sheets-viewer.tsx)
## Refactor note
Shell now delegates to `EmbedViewerFrame` (`.embed-viewer-frame.md`); rendered output pinned byte-parity by `__tests__/embed-viewer-frame.test.tsx`.