@flamingo-stack/openframe-frontend-core 0.0.212 → 0.0.213-snapshot.20260528174436

package/src/components/features/.filters-dropdown.md

@@ -1,61 +1,48 @@
-<!-- source-hash: 43ec97c557bde453e1b537b137f6f8db -->
-A customizable dropdown component for filtering UI elements with multi-section support, checkboxes, radio buttons, and responsive mobile behavior.
+<!-- source-hash: a3c5543a6675d1ff7a726459eb736d56 -->
+Animated filter dropdown component for selecting, applying, and resetting multi-section filter configurations with support for checkbox, radio, and select modes.
 
 ## Key Components
 
-- **FilterOption**: Interface defining individual filter options with id, label, value, and optional separator type
-- **FilterSection**: Interface for grouping filters by type (checkbox/radio/select) with optional select-all functionality
-- **FilterCheckbox**: Custom checkbox component with Flamingo branding (yellow accent color)
-- **FiltersDropdown**: Main dropdown component with intelligent positioning, mobile responsiveness, and state management
+### Interfaces
+- **`FilterOption`** — Individual filter item with `id`, `label`, `value`, optional `count`, and `type`
+- **`FilterSection`** — Grouping of options with a selection `type` (`"checkbox"` | `"radio"` | `"select"`), optional `allowSelectAll`, and `defaultSelected`
+- **`FiltersDropdownProps`** — Full component props including `sections`, `onApply`, `onReset`, `currentFilters`, and `placement`
+
+### Internal Components
+- **`FilterCheckbox`** — Styled checkbox with accent fill and checkmark icon when selected
+
+### Main Export
+- **`FiltersDropdown`** — Dropdown panel with animated open/close (mount/unmount + CSS transitions), smart viewport-aware placement, mobile-responsive layout, outside-click and Escape key dismissal, and active filter count indicator
 
 ## Usage Example
 
 ```typescript
-import { FiltersDropdown, FilterSection } from './filters-dropdown'
-
-const filterSections: FilterSection[] = [
+const sections: FilterSection[] = [
   {
-    id: 'status',
-    title: 'Status',
-    type: 'checkbox',
+    id: "status",
+    title: "Status",
+    type: "checkbox",
     allowSelectAll: true,
     options: [
-      { id: 'active', label: 'Active', value: 'active' },
-      { id: 'inactive', label: 'Inactive', value: 'inactive' },
-      { id: 'pending', label: 'Pending', value: 'pending' }
-    ]
+      { id: "open", label: "Open", value: "open", count: 12 },
+      { id: "closed", label: "Closed", value: "closed", count: 4 },
+    ],
   },
-  {
-    id: 'priority',
-    title: 'Priority',
-    type: 'radio',
-    options: [
-      { id: 'high', label: 'High', value: 'high' },
-      { id: 'medium', label: 'Medium', value: 'medium' },
-      { id: 'low', label: 'Low', value: 'low' }
-    ]
-  }
 ]
 
-function MyComponent() {
-  const [appliedFilters, setAppliedFilters] = useState({})
-
-  const handleApplyFilters = (filters: Record<string, string[]>) => {
-    setAppliedFilters(filters)
-    // Apply filters to your data
-  }
-
-  return (
-    <FiltersDropdown
-      triggerLabel="Filter Items"
-      sections={filterSections}
-      onApply={handleApplyFilters}
-      currentFilters={appliedFilters}
-      placement="bottom-start"
-      responsive={true}
-    />
-  )
-}
+const [appliedFilters, setAppliedFilters] = useState<Record<string, string[]>>({})
+
+<FiltersDropdown
+  sections={sections}
+  triggerLabel="STATUS"
+  placement="bottom-start"
+  currentFilters={appliedFilters}
+  onApply={(filters) => setAppliedFilters(filters)}
+  onReset={() => setAppliedFilters({})}
+/>
 ```
 
-The component features intelligent positioning to avoid viewport overflow, mobile-responsive behavior with full-width dropdowns, and preserves filter state when reopening. It supports custom trigger elements and includes visual indicators for active filter counts.
+### Key Behaviors
+- `currentFilters` syncs external state back into the dropdown when reopened
+- Placement auto-adjusts (`bottom-start` ↔ `bottom-end`) based on available viewport space
+- On mobile (`< 640px`), the panel switches to a fixed, full-width overlay mode

package/src/components/features/.highlight-config-section.md

@@ -0,0 +1,42 @@
+<!-- source-hash: d7af9befa8736257f5fa1a7169b8bc9d -->
+Reusable configuration section component for highlight video generation settings, providing duration selection and subtitle burning controls in a unified horizontal layout.
+
+## Key Components
+
+### `HighlightConfigSection`
+A client-side React component used across `CustomerInterview` and `ProductRelease` entity workflows to configure highlight video output options.
+
+### `HighlightConfigSectionProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `targetDurationSeconds` | `number` | Current selected duration in seconds |
+| `onTargetDurationChange` | `(seconds: number) => void` | Callback fired on duration change |
+| `skipSubtitleBurning` | `boolean` | Whether subtitle burning is skipped |
+| `onSkipSubtitleBurningChange` | `(skip: boolean) => void` | Callback fired on subtitle toggle |
+| `disabled` | `boolean?` | Disables all controls (default: `false`) |
+| `className` | `string?` | Additional CSS class override |
+
+**Duration options:** 60s, 120s, 180s *(recommended)*, 240s, 300s
+
+## Usage Example
+
+```typescript
+import { HighlightConfigSection } from './highlight-config-section';
+
+function VideoEditor() {
+  const [duration, setDuration] = useState(180);
+  const [skipSubs, setSkipSubs] = useState(false);
+
+  return (
+    <HighlightConfigSection
+      targetDurationSeconds={duration}
+      onTargetDurationChange={setDuration}
+      skipSubtitleBurning={skipSubs}
+      onSkipSubtitleBurningChange={setSkipSubs}
+      disabled={false}
+    />
+  );
+}
+```
+
+> **Note:** Renders as a dark-themed panel (`bg-[#1a1a1a]`) with a `Select` dropdown for duration and a checkbox for subtitle burning, laid out horizontally via flexbox.

package/src/components/features/.highlight-generation-section.md

@@ -0,0 +1,46 @@
+<!-- source-hash: 9a48f5db58e0fc209ed8daeba5dd9324 -->
+A reusable React wrapper around `AIEnrichSection` that provides a standardized UI for triggering AI-powered highlight video generation for `CustomerInterview` and `ProductRelease` entities.
+
+## Key Components
+
+### `HighlightGenerationSection`
+The primary export — a thin, opinionated wrapper that pre-configures `AIEnrichSection` with highlight-specific defaults:
+
+| Prop | Type | Default |
+|------|------|---------|
+| `onGenerateHighlight` | `() => void` | — |
+| `isProcessing` | `boolean` | — |
+| `canEnrich` | `boolean` | — |
+| `requiredFields` | `AIRequiredField[]` | — |
+| `targetDurationSeconds` | `number` | `180` |
+| `hasResult` | `boolean` | `false` |
+| `disabledMessage` | `string` | `"Upload a video and run transcription first"` |
+| `showCancel` | `boolean` | `true` |
+| `loadingLabel` | `string` | `"Generating highlight..."` |
+
+### `HighlightGenerationSectionProps`
+The exported interface describing all configurable props, including optional overrides for `title`, `description`, `buttonLabel`, and cancellation controls.
+
+## Usage Example
+
+```typescript
+import { HighlightGenerationSection } from './highlight-generation-section';
+
+<HighlightGenerationSection
+  onGenerateHighlight={handleGenerate}
+  isProcessing={isGenerating}
+  canEnrich={hasTranscription}
+  requiredFields={[
+    { label: 'Video Upload', satisfied: hasVideo },
+    { label: 'Transcription', satisfied: hasTranscription },
+  ]}
+  hasResult={!!highlightUrl}
+  targetDurationSeconds={120}
+  onCancel={handleCancel}
+  isCancelling={isCancelling}
+  status={status}
+  statusMessage={statusMessage}
+/>
+```
+
+> **Note:** Pair this component with `HighlightConfigSection` for the full highlight generation experience. The button label automatically switches between `"Generate Highlight"` and `"Regenerate Highlight"` based on the `hasResult` prop.

package/src/components/features/.highlight-video-combined-section.md

@@ -0,0 +1,47 @@
+<!-- source-hash: 396284dd8be1b09a6ecb781dd4fed0ce -->
+Unified React component that combines highlight video configuration, AI-powered generation, and video preview/upload into a single composable section used across multiple modal contexts.
+
+## Key Components
+
+### `HighlightVideoCombinedSection`
+The primary export. Renders three sequential sub-sections:
+1. **`HighlightConfigSection`** — Duration and subtitle burning settings
+2. **`AIEnrichSection`** — AI generation trigger with status feedback and cancel support
+3. **Preview + Upload** — Inline video preview with manual upload fallback
+
+### `HighlightVideoCombinedSectionProps`
+Full interface grouping props into four logical namespaces:
+- **Config** — `targetDurationSeconds`, `skipSubtitleBurning`, `configDisabled`
+- **Generation** — `onGenerateHighlight`, `isProcessing`, `canEnrich`, `requiredFields`, `status`
+- **Preview** — `highlightVideoUrl`, `highlightVideoThumbnail`, `renderVideoPreview`, `onUpload`, `onDelete`
+- **Common** — `className`, `title`, `description`, `buttonLabel`
+
+## Usage Example
+
+```typescript
+<HighlightVideoCombinedSection
+  // Config
+  targetDurationSeconds={120}
+  onTargetDurationChange={(s) => setDuration(s)}
+  skipSubtitleBurning={false}
+  onSkipSubtitleBurningChange={(v) => setSkipSubs(v)}
+  // Generation
+  onGenerateHighlight={handleGenerate}
+  isProcessing={isGenerating}
+  canEnrich={hasTranscript}
+  requiredFields={[{ key: 'transcript', label: 'Transcription' }]}
+  status={jobStatus}
+  statusMessage={jobMessage}
+  onCancel={handleCancel}
+  hasResult={!!highlightUrl}
+  // Preview
+  highlightVideoUrl={highlightUrl}
+  onUpload={async (file) => await uploadFile(file)}
+  onDelete={async () => await deleteHighlight()}
+  renderVideoPreview={({ videoUrl, title, thumbnailUrl, onDelete }) => (
+    <VideoPlayer url={videoUrl} thumbnail={thumbnailUrl} onDelete={onDelete} />
+  )}
+/>
+```
+
+> **Note:** `renderVideoPreview` uses a render-prop pattern, keeping the component decoupled from any specific video player implementation. The manual upload uses a hidden `<input type="file">` created programmatically to avoid controlled input complexity.

package/src/components/features/.highlight-video-preview.md

@@ -0,0 +1,44 @@
+<!-- source-hash: 9c2fe27cb025dab5e630418cc7b208a0 -->
+Reusable React component for displaying and managing highlight video previews with support for manual upload, AI-generated badges, and duration display.
+
+## Key Components
+
+### `HighlightVideoPreviewProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `highlightVideoUrl` | `string \| null` | URL of the highlight video |
+| `highlightVideoThumbnail` | `string \| null` | Thumbnail image URL |
+| `highlightVideoDurationMs` | `number \| null` | Duration in milliseconds |
+| `highlightVideoSource` | `'manual' \| 'ai_generated' \| null` | Video origin, shows AI badge if `ai_generated` |
+| `onUpload` | `(file: File) => Promise<string>` | File upload handler |
+| `onDelete` | `() => Promise<void>` | Delete handler |
+| `renderVideoPreview` | `(props) => ReactNode` | Render prop for custom video player |
+| `uploadProgressComponent` | `ReactNode` | Optional upload progress UI |
+
+### `HighlightVideoPreview`
+Main exported component rendering the label row, badges, upload button, and delegating video display to the `renderVideoPreview` render prop.
+
+## Usage Example
+
+```typescript
+import { HighlightVideoPreview } from './highlight-video-preview';
+
+<HighlightVideoPreview
+  highlightVideoUrl="https://cdn.example.com/video.mp4"
+  highlightVideoThumbnail="https://cdn.example.com/thumb.jpg"
+  highlightVideoDurationMs={125000}
+  highlightVideoSource="ai_generated"
+  onUpload={async (file) => {
+    const url = await uploadToStorage(file);
+    return url;
+  }}
+  onDelete={async () => {
+    await deleteVideo();
+  }}
+  renderVideoPreview={({ videoUrl, thumbnailUrl, onDelete }) => (
+    <VideoPlayer src={videoUrl} poster={thumbnailUrl} onDelete={onDelete} />
+  )}
+/>
+```
+
+> **Note:** This component is designed for both `CustomerInterview` and `ProductRelease` entities, providing a consistent highlight video UI across the platform. The `renderVideoPreview` render prop keeps the video player implementation decoupled.

package/src/components/features/.highlight-video-section.md

@@ -0,0 +1,47 @@
+<!-- source-hash: 4bfda13fcb66ea09d23c0f65e2a0d2f7 -->
+Unified React component for managing highlight video generation and upload, supporting both AI-generated and manually uploaded highlight videos for `CustomerInterview` and `ProductRelease` entities.
+
+## Key Components
+
+### `HighlightVideoSection`
+Main exported component that renders three logical sections:
+
+- **Configuration Panel** — Target duration selector (1–5 min) and subtitle-burning toggle
+- **AI Generation Section** — Wraps `AIEnrichSection` with Claude AI + Shotstack integration, including progress feedback, cancellation, and status messages
+- **Video Preview + Manual Upload** — Shows current highlight with metadata badges, handles file input for manual uploads, and renders either a custom `VideoPreviewComponent` or a built-in `<video>` player with delete support
+
+### `HighlightVideoSectionProps`
+Full TypeScript interface exposing all configuration and callback props. Notable props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `targetDurationSeconds` | `number` | AI generation target duration |
+| `canGenerateHighlight` | `boolean` | Gates the generate button |
+| `requiredFields` | `AIRequiredField[]` | Validation hints shown before generation |
+| `VideoPreviewComponent` | `React.ComponentType` | Optional custom video player |
+| `generationStatus` | `'idle' \| 'loading' \| 'success' \| 'error'` | Controls `AIEnrichSection` state |
+
+## Usage Example
+
+```typescript
+import { HighlightVideoSection } from './highlight-video-section';
+
+<HighlightVideoSection
+  highlightVideoUrl={interview.highlightUrl}
+  highlightVideoSource="ai_generated"
+  highlightVideoDurationMs={180000}
+  targetDurationSeconds={180}
+  onTargetDurationChange={(secs) => setTargetDuration(secs)}
+  skipSubtitleBurning={false}
+  onSkipSubtitleBurningChange={(skip) => setSkipSubs(skip)}
+  onGenerateHighlight={handleGenerate}
+  isGenerating={isGenerating}
+  generationProgress={progress}
+  generationStatus={status}
+  canGenerateHighlight={!!interview.transcriptId}
+  requiredFields={[{ field: 'transcript', label: 'Transcription' }]}
+  onUploadHighlight={async (file) => uploadToStorage(file)}
+  onDeleteHighlight={handleDelete}
+  onCancelGeneration={handleCancel}
+/>
+```

package/src/components/features/.index.md

@@ -1,76 +1,50 @@
-<!-- source-hash: 8ecd31115612faa5ff5118d4a9df18f8 -->
-Central export hub for all reusable UI components and providers used across the Flamingo/OpenFrame platform, providing a single import point for feature components, managers, and specialized UI elements.
+<!-- source-hash: 14a224c533f658697e4039f0850c87ac -->
+Central barrel export file for the feature components library, re-exporting all UI components, providers, and utilities from their respective modules into a single public API surface.
 
 ## Key Components
 
-### Providers & Context
-- **DynamicThemeProvider** - Theme management with dynamic switching capabilities
-- **useDynamicTheme** - Hook for accessing theme context and utilities
-- **LoadingProvider** - Global loading state management
-
-### Content Management
-- **ChangelogManager** - Version history and release notes management
-- **ChangelogSectionsManager** - Structured changelog organization
-- **GithubReleasesManager** - GitHub release data integration
-- **KnowledgeBaseLinksManager** - Documentation link organization
-- **MediaGalleryManager** - Media asset management and display
-- **ReleaseMediaManager** - Release-specific media handling
-- **SocialLinksManager** - Social media link management
-
-### Interactive Components
-- **CommandBox** - Command palette/search interface
-- **ArrayEntryManager** - Dynamic array field management
-- **FiltersDropdown** - Advanced filtering interface
-- **OrganizationSelector** - Multi-org selection component
-- **PlatformFilter** - Platform-specific filtering
-- **TagsSelector** - Tag management interface
-- **ViewToggle** - Layout/view switching controls
-
-### Display & Media
-- **YoutubeEmbed** - YouTube video integration
-- **VideoPlayer** - Custom video player component
-- **FigmaPrototypeViewer** - Embedded Figma prototype display
-- **ParallaxImageShowcase** - Animated image presentation
-
-### Platform-Specific
-- **OSPlatformSelector** - Operating system selection
-- **OSTypeBadge** / **OSTypeBadgeGroup** - OS identification badges
-- **PlatformBadge** - Platform indicator components
-- **StatusFilterComponent** - Status-based filtering
-
-### AI & Enhancement
-- **AI Enrich components** - AI-powered content enhancement tools
-- **PolicyConfigurationPanel** - AI policy management interface
-
-### Utilities
-- **ErrorBoundary** - React error handling wrapper
-- **SEOEditorPreview** - SEO content preview functionality
+### Theme System
+- `ThemeProvider` / `useTheme` / `useThemeToggle` — Canonical ODS theme system wrapping `next-themes` with manual light/dark switching, default dark, and no-flash support
+- `DynamicThemeProvider` / `useDynamicTheme` — Dynamic theme provider variant
+- `THEME_STORAGE_KEY`, `THEME_ATTRIBUTE`, `DEFAULT_THEME` — Theme configuration constants
+- `Theme`, `ThemeProviderProps`, `UseThemeToggleResult` — TypeScript types
+
+### Video Primitives
+- `video` — Unified `<Video>` component replacing legacy `VideoPlayer` + `YouTubeEmbed`
+- `entity-video-section` / `video-bites-display` — Public detail-page wrappers
+- `video-ratio-tabs` — Aspect-ratio grouping primitives for bites grid and admin editors
+- `highlight-video-*` / `transcript-summary-editor` / `video-clips-section` — Video processing and display utilities
+
+### UI Components
+- `command-box`, `filters-dropdown`, `tags-selector`, `select-button`, `view-toggle`
+- `os-type-badge`, `platform-badge`, `platform-filter` — Platform/OS display components
+- `error-boundary`, `loading-provider` — App infrastructure components
+- `seo-editor-preview`, `social-links-manager`, `knowledge-base-links-manager`
+- `board`, `notifications`, `waitlist-form`, `ai-enrich`, `policy-configuration-panel`
+
+### Manager Components
+- `array-entry-manager`, `changelog-manager`, `changelog-sections-manager`
+- `clickup-tasks-manager`, `github-releases-manager`, `media-gallery-manager`
+- `release-media-manager`
 
 ## Usage Example
 
 ```typescript
-import { 
-  DynamicThemeProvider, 
-  useDynamicTheme,
-  CommandBox,
-  YoutubeEmbed,
-  ChangelogManager,
-  ErrorBoundary 
-} from '@/components'
+// Import theme system
+import { ThemeProvider, useThemeToggle } from '@/features'
+
+function App({ children }) {
+  return <ThemeProvider>{children}</ThemeProvider>
+}
 
-function App() {
-  const { theme, toggleTheme } = useDynamicTheme()
-  
-  return (
-    <DynamicThemeProvider>
-      <ErrorBoundary>
-        <div className={`app ${theme}`}>
-          <CommandBox onCommand={handleCommand} />
-          <ChangelogManager repository="flamingo/openframe" />
-          <YoutubeEmbed videoId="awc-yAnkhIo" />
-        </div>
-      </ErrorBoundary>
-    </DynamicThemeProvider>
-  )
+function ThemeToggle() {
+  const { toggle, theme } = useThemeToggle()
+  return <Button onClick={toggle}>Mode: {theme}</Button>
 }
+
+// Import video primitives
+import { Video, EntityVideoSection, VideoBitesDisplay } from '@/features'
+
+// Import UI components
+import { CommandBox, FiltersDropdown, OsTypeBadge } from '@/features'
 ```

package/src/components/features/.media-gallery-manager.md

@@ -1,50 +1,60 @@
-<!-- source-hash: f58dc2c8c0d0cb27343cb060f7ee08e3 -->
-A unified React component for managing media galleries with upload, reordering, and deletion capabilities across different content types like events and product releases.
+<!-- source-hash: 19b6fb4bf578261808d64ed0dbbafcce -->
+Reusable React component for managing a media gallery with upload, display, drag-and-drop reordering, and deletion capabilities. Designed for use across events, product releases, and any content requiring media gallery management.
 
 ## Key Components
 
-**MediaGalleryManager**: Main component providing complete media management functionality
-- File upload with drag-and-drop support
-- Visual media grid with thumbnails
-- Drag-and-drop reordering with visual feedback
-- Individual item deletion with confirmation states
-- Responsive design for mobile and desktop
-
-**MediaItem Interface**: TypeScript definition for media objects
-- Support for images, videos, screenshots, and demos
-- Optional metadata like titles, descriptions, and display order
-- Upload state tracking for UI feedback
+### `MediaItem` Interface
+Describes a single media entry with the following fields:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string \| number` | Optional identifier for existing items |
+| `media_type` | `'image' \| 'video' \| 'screenshot' \| 'demo'` | Type classification |
+| `media_url` | `string` | URL of the media asset |
+| `title` | `string` | Optional display title |
+| `description` | `string` | Optional description |
+| `display_order` | `number` | Optional sort order |
+| `_uploading` | `boolean` | Internal upload state flag |
+
+### `MediaGalleryManager` Component
+Primary export. Renders upload zone, media grid, drag-and-drop controls, and delete actions.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `media` | `MediaItem[]` | — | Current media items array |
+| `onChange` | `(media: MediaItem[]) => void` | — | Called on any mutation |
+| `onUpload` | `(file, mediaType) => Promise<string>` | — | Handles file upload, returns URL |
+| `isUploading` | `boolean` | `false` | Disables controls during upload |
+| `showInModal` | `boolean` | `false` | Reserved for modal rendering |
+| `modalTitle` | `string` | `'Media Gallery'` | Modal heading text |
+| `className` | `string` | `''` | Additional CSS classes |
 
 ## Usage Example
 
 ```typescript
 import { MediaGalleryManager, MediaItem } from './media-gallery-manager';
 
-function MyComponent() {
-  const [media, setMedia] = useState<MediaItem[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleUpload = async (file: File, mediaType: 'image' | 'video') => {
-    setIsUploading(true);
-    try {
-      // Upload to your storage service
-      const url = await uploadFile(file);
-      return url;
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  return (
-    <MediaGalleryManager
-      media={media}
-      onChange={setMedia}
-      onUpload={handleUpload}
-      isUploading={isUploading}
-      modalTitle="Product Media"
-    />
-  );
+const [media, setMedia] = useState<MediaItem[]>([]);
+const [uploading, setUploading] = useState(false);
+
+async function handleUpload(file: File, mediaType: 'image' | 'video'): Promise<string> {
+  setUploading(true);
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await fetch('/api/upload', { method: 'POST', body: formData });
+  const { url } = await res.json();
+  setUploading(false);
+  return url;
 }
+
+<MediaGalleryManager
+  media={media}
+  onChange={setMedia}
+  onUpload={handleUpload}
+  isUploading={uploading}
+/>
 ```
 
-The component handles automatic file type detection, maintains display order through drag-and-drop, and provides visual feedback for all user interactions including upload progress and deletion states.
+> **Note:** Accepted file types are `image/*` and `video/*` with a recommended maximum of 50MB. On upload, images map to `screenshot` and videos to `demo` media types.

package/src/components/features/.more-about-button.md

@@ -1,31 +1,34 @@
-<!-- source-hash: 572ac09a6913ae9b6cc6555971ffbead -->
-A React client component that renders a styled "Learn more" button with an arrow icon, designed to navigate users to additional information pages.
+<!-- source-hash: c6ba4615a3e784ac271d4e3e3c456fed -->
+A reusable "Learn more" navigation button component that links to additional information, styled with Flamingo's yellow brand color and an arrow icon.
 
 ## Key Components
 
-- **MoreAboutButtonProps** - Interface defining optional onClick handler, href URL, and CSS className
-- **MoreAboutButton** - Main component that renders a large ghost-style button with OpenFrame branding colors
-- **Default exports** - Both named and default exports for flexible importing
+- **`MoreAboutButton`** — A styled `Button` wrapper that renders a "Learn more" label with a trailing `ArrowRight` icon, using the `transparent` variant and `--ods-open-yellow-base` brand color.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `href` | `string` | `"/openframe"` | Destination URL; opens in a new tab when provided |
+| `onClick` | `() => void` | — | Optional click handler *(accepted but not wired internally)* |
+| `className` | `string` | `""` | Additional CSS classes for customization |
+
+> **Note:** The `onClick` prop is declared in the interface but not currently forwarded to the underlying `Button`. Use `href` for navigation.
 
 ## Usage Example
 
 ```typescript
-import { MoreAboutButton } from './more-about-button'
+import { MoreAboutButton } from '@/components/more-about-button'
 
-// Basic usage with default "/openframe" link
+// Default — links to /openframe
 <MoreAboutButton />
 
-// Custom destination and styling
-<MoreAboutButton 
-  href="/custom-page"
-  className="mt-4"
-/>
+// Custom destination
+<MoreAboutButton href="https://flamingo.run" />
 
-// With click handler (overrides href behavior)
-<MoreAboutButton 
-  onClick={() => console.log('Button clicked')}
-  className="custom-styles"
+// With additional styling
+<MoreAboutButton
+  href="/openframe"
+  className="mt-4"
 />
-```
-
-The component uses the OpenFrame design system's yellow color (`--ods-open-yellow-base`) and automatically opens external links in new tabs. It leverages a custom Button component with built-in support for right icons and various styling variants.
+```