Shared progressive-disclosure primitive that clamps long content to a fixed height with a CSS fade mask and a "Show N more / Show less" toggle button. ## Key Components ### `FadePreviewProps` | Prop | Type | Default | Description | |---|---|---|---| | `hiddenCount` | `number` | — | Items hidden while collapsed; drives "Show N more" label. `<= 0` disables clamping entirely | | `collapsedHeight` | `number` | `120` | Collapsed height in px before the fade mask kicks in | | `resetKey` | `unknown` | — | Resets expanded state when value changes (e.g. on data refetch) | | `children` | `React.ReactNode` | — | Content to render inside the clamp wrapper | ### `FadePreview` Stateful component managing expand/collapse. When `hiddenCount <= 0`, renders children unwrapped with no height clamp — avoids clipping single-entry sections. Expanded height is measured from `scrollHeight` to handle variable-length content. ## Usage Example ```typescript import { FadePreview } from '@/components/fade-preview'; // Basic usage — hide overflow items in a changelog list {releases.map(r => )} // Taller rows (e.g. a delivery table) — increase collapsed height // Single entry — no fade, no toggle rendered ``` > **Do not re-inline the mask/clamp/toggle pattern.** All fade-preview surfaces must compose this component — it is the single shared implementation extracted from `ReleaseChangelogSection`. ## Source [`fade-preview.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/fade-preview.tsx)