<!-- source-hash: d8463fe41098681892c9956a4d6c77ce -->
Renders an interactive Figma prototype viewer component with responsive layout, automatic device detection, section navigation, and scaled iframe embedding for both desktop and mobile viewports.

## Key Components

### Interfaces & Types
- **`FigmaPrototypeViewerConfig`** — Main configuration object; accepts file keys (per-device or legacy single), sections, dimensions, starting points, and UI class overrides
- **`FigmaPrototypeSection`** — Defines a navigable prototype section with separate desktop/mobile node IDs
- **`UnifiedState`** — Consolidated state shape covering view mode, iframe lifecycle, scaling, UI visibility flags, and navigation
- **`ViewMode`** — `'DESKTOP' | 'MOBILE' | 'MOBILE_TOUCH'`
- **`IframeState`** — `'INITIAL' | 'LOADING' | 'READY' | 'RELOADING' | 'SLEEP_RECOVERY'`

### Core Functions
- **`getViewMode(screenWidth, isTouchDevice)`** — Derives current `ViewMode` from screen width against the 768px breakpoint
- **`calculateScaling(viewMode, containerDimensions, config?)`** — Computes `scale`, `marginX/Y`, and `scaledDimensions` to fit content without upscaling
- **`resolveFileKey(config, viewMode)`** — Picks the correct Figma file key via env vars → per-device config → legacy `fileKey`
- **`resolveStartingPoint(config, viewMode, section?)`** — Resolves the initial prototype node via env vars → config → first section fallback
- **`generateEmbedUrl(...)`** — Builds the `embed.figma.com/proto` URL with all required query parameters
- **`renderUnifiedUI(state, handlers, config, iframeRef)`** — Pure render function producing the full component JSX from state

### Environment Variable Overrides
Content dimensions and file keys can be set at the environment level:

```text
NEXT_PUBLIC_FIGMA_MOBILE_FILE_KEY
NEXT_PUBLIC_FIGMA_DESKTOP_FILE_KEY
NEXT_PUBLIC_FIGMA_MOBILE_STARTING_POINT
NEXT_PUBLIC_FIGMA_DESKTOP_STARTING_POINT
NEXT_PUBLIC_FIGMA_MOBILE_WIDTH / _HEIGHT
NEXT_PUBLIC_FIGMA_DESKTOP_WIDTH / _HEIGHT
```

Priority order: **env vars → config props → defaults**

## Usage Example

```typescript
import { FigmaPrototypeViewer } from './figma-prototype-viewer'
import type { FigmaPrototypeViewerConfig } from './figma-prototype-viewer'

const config: FigmaPrototypeViewerConfig = {
  title: 'Onboarding Flow',
  desktopFileKey: 'abc123XYZ',
  mobileFileKey: 'xyz789ABC',
  desktopStartingPoint: '1:23',
  mobileStartingPoint: '4:56',
  sections: [
    {
      id: 'sign-up',
      number: '01',
      title: 'Sign Up',
      description: 'New user registration flow',
      startingNodeId: '1:23',
      mobileStartingNodeId: '4:56',
    },
  ],
  mobileContentDimensions: { width: 343, height: 600 },
  desktopContentDimensions: { width: 944, height: 600 },
}

export default function PrototypePage() {
  return <FigmaPrototypeViewer config={config} />
}
```