<!-- source-hash: 78008c7e3ccfb1ba2cc09775fac553c1 -->
Displays script metadata in a responsive card layout with a header (title, description) and a grid of detail cells (shell type, platforms, category, author).

## Key Components

| Export | Type | Description |
|---|---|---|
| `ScriptInfoSection` | `React.FC` | Main component rendering the full script info card |
| `ScriptInfoSectionProps` | `interface` | Props for the main component |
| `ScriptAuthor` | `interface` | Author shape with `name`, `initials`, and `photoUrl` |
| `InfoCell` | Internal component | Single label/value cell, optionally renders an author avatar |
| `formatSupportedPlatforms` | Helper function | Converts a platform array to a display string via `getOSLabel` |
| `getInitials` | Helper function | Derives two-letter initials from a full name |

## Usage Example

```typescript
import { ScriptInfoSection } from './components/ScriptInfoSection'

<ScriptInfoSection
  headline="System Backup Script"
  subheadline="Comprehensive Linux system backup with incremental support."
  shellType="BASH"
  supportedPlatforms={['linux', 'darwin']}
  category="System Maintenance"
  author={{
    name: 'Jane Smith',
    photoUrl: '/avatars/jane.jpg',
  }}
/>
```

## Layout Behavior

The detail grid is responsive:

- **Mobile / Tablet (`< lg`):** Two rows of two cells each, separated by a border.
- **Desktop (`lg+`):** All four cells rendered in a single four-column row; the mobile second row is hidden via `hidden lg:flex`.

## Notes

- `shellType` is resolved to a display label via `getShellLabel` (e.g., `"BASH"` → `"Bash"`).
- `supportedPlatforms` defaults to `"All Platforms"` when absent or empty.
- Author avatar falls back to computed initials (`getInitials`) when `photoUrl` is not provided.
- Accepts an optional `className` prop for layout overrides at the card level.

**Source:** [`ScriptInfoSection.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ScriptInfoSection.tsx)