@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

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.
+```

package/src/components/features/.og-editor-preview.md

@@ -1,43 +1,47 @@
-<!-- source-hash: 08ec4f842d84b7970d3f7a6fb899875b -->
-A unified React component for editing SEO metadata and Open Graph data with live preview functionality. This component provides a consistent interface for managing meta titles, descriptions, keywords, and OG images across different content types.
+<!-- source-hash: 7e8d4cbbf42c408ee48d1318fbf9c4e3 -->
+Unified SEO & Open Graph editor component that combines meta fields (title, description, keywords), OG image upload, and a live preview into a single reusable panel. Designed for content editors across blog posts, case studies, and product releases.
 
 ## Key Components
 
-- **OGEditorPreview** - Main component that renders the complete SEO/OG editing interface
-- **OGEditorPreviewProps** - TypeScript interface defining all required props including SEO fields, auto-populate sources, change handlers, and render prop components
-- Responsive grid layout with form inputs for SEO metadata
-- Integration points for custom OG image upload and preview components
+### `OGEditorPreview`
+Main exported component that renders a card-style panel with:
+- **SEO Title + Keywords** — side-by-side `Input` fields (responsive grid)
+- **SEO Description + OG Image** — `Textarea` paired with an injected upload widget
+- **OG Preview** — rendered below a divider via the `OGPreviewComponent` slot
+
+### `OGEditorPreviewProps`
+Full interface defining:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `seoTitle` / `seoDescription` / `seoKeywords` | `string` | Controlled SEO field values |
+| `ogImageUrl` | `string` | Current OG image URL |
+| `title` / `summary` / `featuredImage` | `string` | Auto-populate sources from parent content |
+| `categories` | `Array<{name, slug}>` | Optional category metadata |
+| `OGImageUploadComponent` | `React.ReactNode` | Upload widget injected by parent |
+| `OGPreviewComponent` | `React.ReactNode` | Preview widget injected by parent |
+| `disabled` | `boolean` | Disables all inputs |
 
 ## Usage Example
 
 ```typescript
-import { OGEditorPreview } from './components/og-editor-preview';
-import { OGImageUpload } from './components/og-image-upload';
-import { OGPreviewCard } from './components/og-preview-card';
-
-function BlogEditor() {
-  const [seoData, setSeoData] = useState({
-    title: '',
-    description: '',
-    keywords: ''
-  });
-
-  return (
-    <OGEditorPreview
-      seoTitle={seoData.title}
-      seoDescription={seoData.description}
-      seoKeywords={seoData.keywords}
-      ogImageUrl=""
-      title="Blog Post Title"
-      summary="Auto-populated summary"
-      featuredImage=""
-      onSeoTitleChange={(title) => setSeoData(prev => ({ ...prev, title }))}
-      onSeoDescriptionChange={(description) => setSeoData(prev => ({ ...prev, description }))}
-      onSeoKeywordsChange={(keywords) => setSeoData(prev => ({ ...prev, keywords }))}
-      onOgImageUrlChange={(url) => console.log('OG image changed:', url)}
-      OGImageUploadComponent={<OGImageUpload />}
-      OGPreviewComponent={<OGPreviewCard />}
-    />
-  );
-}
-```
+import { OGEditorPreview } from './og-editor-preview';
+
+<OGEditorPreview
+  seoTitle={post.seoTitle}
+  seoDescription={post.seoDescription}
+  seoKeywords={post.seoKeywords}
+  ogImageUrl={post.ogImageUrl}
+  title={post.title}
+  summary={post.summary}
+  featuredImage={post.featuredImage}
+  onSeoTitleChange={(val) => updateField('seoTitle', val)}
+  onSeoDescriptionChange={(val) => updateField('seoDescription', val)}
+  onSeoKeywordsChange={(val) => updateField('seoKeywords', val)}
+  onOgImageUrlChange={(val) => updateField('ogImageUrl', val)}
+  OGImageUploadComponent={<OGImageUploader postId={post.id} />}
+  OGPreviewComponent={<OGPreview title={post.seoTitle} description={post.seoDescription} image={post.ogImageUrl} />}
+/>
+```
+
+> Upload and preview widgets are passed as render props (`React.ReactNode`), keeping this component decoupled from specific upload or preview implementations.

package/src/components/features/.parallax-image-showcase.md

@@ -1,47 +1,54 @@
-<!-- source-hash: 5ea87f0b89bc2824f1f4d66b74b70a08 -->
-An interactive React component that creates animated image showcases with parallax effects, supporting three distinct layouts with scroll and mouse-based movement animations.
+<!-- source-hash: 95c8b5bc96c688ed1c4897e169dbdcc0 -->
+A React component that renders up to three images with scroll-based and mouse-tracking parallax animations using Framer Motion, supporting three distinct layout modes.
 
 ## Key Components
 
-- **ParallaxImageShowcase**: Main component with three layout modes:
-  - `non-boxed`: Stacked images with z-index layering and complex positioning
-  - `boxed`: Clean two-row grid with logo support and image overlaps
-  - `grid`: Simple responsive three-column grid layout
-- **Animation System**: Combines scroll-based and global mouse tracking using Framer Motion
-- **Responsive Design**: Adaptive layouts with mobile-friendly breakpoints
+### `ParallaxImageShowcaseProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `images` | `array` | Up to 3 images with `src`, `alt`, and `position` (`left`, `center`, `right`) |
+| `layout` | `'non-boxed' \| 'boxed' \| 'grid'` | Visual arrangement mode (default: `'non-boxed'`) |
+| `intensity` | `number` | Animation strength multiplier (default: `1`; range: `0.1`–`10`) |
+| `shadow` | `boolean` | Applies drop shadow to images (grid layout only) |
+| `logoElement` | `ReactNode` | Custom logo rendered above images in boxed layout |
+| `className` | `string` | Additional Tailwind classes on the root element |
+
+### Layout Modes
+- **`non-boxed`** — Overlapping layered images with z-index depth, large responsive offsets
+- **`boxed`** — Two-row structure with a logo slot and two overlapping card-style images
+- **`grid`** — Responsive 3-column grid with gentler vertical-only parallax
+
+### Animation System
+- **Scroll**: `useScroll` → `useTransform` drives `x`, `y`, and `rotate` based on page scroll position
+- **Mouse**: Global `mousemove` listener computes cursor offset relative to the component's `DOMRect`, fed into spring-smoothed motion values
+- **Combined**: Scroll and mouse transforms are summed via `useTransform` with array input
 
 ## Usage Example
 
 ```typescript
 import { ParallaxImageShowcase } from './parallax-image-showcase'
 
-// Grid layout with shadows
-<ParallaxImageShowcase
-  images={[
-    { src: '/img1.jpg', alt: 'Screenshot 1', position: 'left' },
-    { src: '/img2.jpg', alt: 'Screenshot 2', position: 'center' },
-    { src: '/img3.jpg', alt: 'Screenshot 3', position: 'right' }
-  ]}
-  layout="grid"
-  intensity={2}
-  shadow={true}
-  className="h-96"
-/>
+const images = [
+  { src: '/screens/dashboard.png', alt: 'Dashboard', position: 'left' as const },
+  { src: '/screens/tickets.png',   alt: 'Tickets',   position: 'center' as const },
+  { src: '/screens/reports.png',   alt: 'Reports',   position: 'right' as const },
+]
 
-// Boxed layout with logo
+// Gentle grid layout with shadows
 <ParallaxImageShowcase
   images={images}
-  layout="boxed"
-  logoElement={<div>My Logo</div>}
+  layout="grid"
   intensity={0.5}
+  shadow
 />
 
-// Non-boxed layered layout
+// Aggressive non-boxed hero section
 <ParallaxImageShowcase
   images={images}
   layout="non-boxed"
-  intensity={1}
+  intensity={3}
+  className="h-[600px]"
 />
 ```
 
-The component features global mouse tracking, smooth spring animations, and configurable intensity levels for different visual effects. All layouts respond to both scroll position and mouse movement for immersive parallax experiences.
+> **Intensity guide:** `0.1` = nearly static · `1` = default · `5` = dramatic · `10` = extreme. Tune per layout — `grid` looks best below `1`, `non-boxed` can handle up to `3–5`.

package/src/components/features/.paths-display.md

@@ -1,51 +1,50 @@
-<!-- source-hash: 7ad75ac8ea63324a0a3900bc15151bcb -->
-A React component for displaying file system paths with copy-to-clipboard functionality, featuring ODS styling and cross-platform path support. Designed for use cases like antivirus exclusions or system configuration paths.
+<!-- source-hash: da445924e21f0d905c4ca341c95ec68c -->
+Displays a list of file/folder paths with optional copy-to-clipboard functionality, styled with ODS design tokens and monospace formatting.
 
 ## Key Components
 
-- **PathsDisplay**: Main component that renders a list of paths with optional copy buttons
-- **PathsDisplayProps**: TypeScript interface defining component props
-- **OPENFRAME_PATHS**: Pre-defined path constants for Windows, macOS, and Linux platforms
-- **getOpenFramePaths**: Utility function to retrieve platform-specific OpenFrame paths
-- **OpenFramePathsPlatform**: Type union for supported platforms
+| Export | Type | Description |
+|--------|------|-------------|
+| `PathsDisplay` | Component | Main component rendering a styled list of paths with optional copy buttons |
+| `PathsDisplayProps` | Interface | Props definition for the `PathsDisplay` component |
+| `OPENFRAME_PATHS` | Constant | Pre-defined path sets for Windows, macOS, and Linux platforms |
+| `getOpenFramePaths` | Function | Returns a mutable array of paths for a given platform key |
+| `OpenFramePathsPlatform` | Type | Union type of `'windows' \| 'darwin' \| 'linux'` |
 
 ## Usage Example
 
 ```typescript
-import { PathsDisplay, getOpenFramePaths } from './paths-display'
-
-// Basic usage with custom paths
-const systemPaths = [
-  'C:\\Program Files\\MyApp\\',
-  'C:\\Users\\%USERNAME%\\AppData\\Local\\MyApp\\'
-]
-
-function PathsList() {
-  const handleCopyPath = (path: string) => {
+import { PathsDisplay, getOpenFramePaths } from '@flamingo/ui-kit/components/features'
+
+// Basic usage with antivirus exclusion paths
+<PathsDisplay
+  paths={getOpenFramePaths('windows')}
+  title="Antivirus Exclusions"
+  description="Add these folders to your antivirus exclusions list"
+  onCopyPath={(path) => {
     navigator.clipboard.writeText(path)
-    toast({ title: 'Copied!', description: 'Path copied to clipboard' })
-  }
-
-  return (
-    <PathsDisplay
-      paths={systemPaths}
-      title="Antivirus Exclusions"
-      description="Add these paths to your antivirus whitelist"
-      onCopyPath={handleCopyPath}
-      showCopyButtons={true}
-    />
-  )
-}
-
-// Using pre-defined OpenFrame paths
-function OpenFramePaths() {
-  const windowsPaths = getOpenFramePaths('windows')
-  
-  return (
-    <PathsDisplay
-      paths={windowsPaths}
-      title="OpenFrame Installation Paths"
-    />
-  )
-}
-```
+    toast({ title: 'Copied', description: 'Path copied to clipboard' })
+  }}
+/>
+
+// Display-only, no copy buttons
+<PathsDisplay
+  paths={getOpenFramePaths('linux')}
+  title="Linux Agent Paths"
+  showCopyButtons={false}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `paths` | `string[]` | — | Array of paths to display |
+| `onCopyPath` | `(path: string) => void` | — | Callback triggered on copy button click |
+| `title` | `string` | — | Optional heading above the list |
+| `description` | `string` | — | Optional subtext below the title |
+| `showCopyButtons` | `boolean` | `true` | Toggle copy button visibility |
+| `copyIconSize` | `string` | `'w-5 h-5'` | Tailwind size classes for the copy icon |
+| `className` | `string` | — | Additional CSS classes for the container |
+
+> **Note:** The component renders `null` when `paths` is empty or undefined. Copy buttons only render when both `showCopyButtons` is `true` **and** `onCopyPath` is provided.