A reusable React client component for managing a list of collapsible changelog entries, supporting add, remove, expand/collapse, field editing, and optional per-entry public/internal visibility toggling. ## Key Components ### `ChangelogManager` (default export) A controlled component that renders a titled list of `ChangelogEntry` items with accordion-style expand/collapse behavior. **Props (`ChangelogManagerProps`):** | Prop | Type | Description | |---|---|---| | `title` | `string` | Section label displayed above the entry list | | `entries` | `ChangelogEntry[]` | Controlled array of changelog entries | | `onChange` | `(entries: ChangelogEntry[]) => void` | Callback fired on any mutation | | `className` | `string?` | Optional CSS class override | | `expandAll` | `boolean?` | When `true`, expands all entries (e.g., after AI enrichment) | | `showVisibilityToggle` | `boolean?` | Enables per-entry Eye/EyeOff toggle for investor update flows | **Internal state:** - `expandedIndices` — `Set` tracking which entries are currently expanded **Key handlers:** - `addEntry` — appends a blank entry and auto-expands it; defaults `visibility` to `'public'` when `showVisibilityToggle` is enabled - `removeEntry` — filters out the entry and re-indexes `expandedIndices` - `updateEntry` — immutably patches a single field on an entry - `toggleExpanded` — toggles an index in the expanded set - `toggleVisibility` — flips an entry between `'public'` and `'internal'` ## Usage Example ```typescript import { ChangelogManager } from './changelog-manager'; import type { ChangelogEntry } from '../../types/product-release'; const [entries, setEntries] = useState([]); // Basic product release usage // Investor update usage with visibility controls ``` > **Source:** [`changelog-manager.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/changelog-manager.tsx)