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

package/src/components/features/.select-button.md

@@ -1,44 +1,54 @@
-<!-- source-hash: c0c15fc6a2db52816eb6102a785d7fa9 -->
-A customizable button component that displays as a selectable option with support for icons, images, descriptions, and tags. Used for creating interactive selection lists or option grids with visual feedback for selected states.
+<!-- source-hash: e190543dcb8ddd78af0a45f332d3eefe -->
+A selectable button component that supports icons, images, tags, and selected/disabled states, designed for use in option-selection UIs such as lists or grids.
 
 ## Key Components
 
-- **SelectButton** - Main component with `forwardRef` support for external ref management
-- **SelectButtonProps** - TypeScript interface defining all available props including styling and content options
-- **Conditional rendering** - Smart display logic for icons, images, descriptions, and tags based on screen size
+### `SelectButtonProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Primary label text (required) |
+| `description` | `string` | Optional subtitle, visible on `md+` screens |
+| `selected` | `boolean` | Highlights the button with accent styling and shows a check icon |
+| `disabled` | `boolean` | Disables interaction and reduces opacity |
+| `icon` | `React.ReactNode` | Optional leading icon |
+| `image` | `{ src, alt }` | Optional thumbnail image |
+| `tag` | `string` | Optional badge label rendered via `Tag` |
+| `tagVariant` | `TagProps['variant']` | Controls tag style, defaults to `"outline"` |
+| `onClick` | `() => void` | Click handler |
+| `className` | `string` | Additional CSS classes |
+
+### `SelectButton`
+A `forwardRef` button with `role="option"` and `aria-selected`, suitable for accessible listbox patterns. Applies ODS design tokens for color, spacing, and focus states.
 
 ## Usage Example
 
 ```typescript
 import { SelectButton } from './select-button'
-import { UserIcon } from '../icons'
+import { ServerIcon } from '../icons-v2-generated/...'
 
-// Basic usage
+// Basic selectable option
 <SelectButton
-  title="Premium Plan"
-  description="Advanced features included"
-  selected={selectedPlan === 'premium'}
-  onClick={() => setSelectedPlan('premium')}
+  title="Standard Plan"
+  description="Up to 10 devices"
+  selected={selectedPlan === 'standard'}
+  onClick={() => setSelectedPlan('standard')}
 />
 
 // With icon and tag
 <SelectButton
-  title="Team Workspace"
-  description="Collaborate with your team"
-  icon={<UserIcon />}
+  title="Enterprise Plan"
+  description="Unlimited devices"
+  icon={<ServerIcon />}
   tag="Popular"
-  tagVariant="default"
-  selected={workspace === 'team'}
-  onClick={() => setWorkspace('team')}
+  tagVariant="solid"
+  selected={selectedPlan === 'enterprise'}
+  onClick={() => setSelectedPlan('enterprise')}
 />
 
-// With image
+// With thumbnail image
 <SelectButton
-  title="Custom Theme"
-  image={{ src: "/theme-preview.jpg", alt: "Theme preview" }}
-  disabled={!isPremium}
-  onClick={handleThemeSelect}
+  title="Acme Corp"
+  image={{ src: '/logos/acme.png', alt: 'Acme Corp logo' }}
+  selected={true}
 />
-```
-
-The component includes responsive design with different sizing for mobile/desktop, accessibility support with ARIA attributes, and visual states for hover, active, and selected interactions.
+```

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

@@ -1,54 +1,51 @@
-<!-- source-hash: 410b6e5a31286d450355a5354f7b013a -->
-This file provides a comprehensive SEO editor component with real-time social media preview functionality for managing meta tags, Open Graph data, and image uploads in content management workflows.
+<!-- source-hash: e691658139dcf0e352222348aeae0a32 -->
+Self-contained React component that combines SEO metadata editing fields with a live social media (Open Graph) card preview, used across blog posts, case studies, and product releases in the Flamingo/OpenFrame platform.
 
 ## Key Components
 
-- **SEOEditorPreview**: Main component for editing SEO meta tags with live preview
-- **SEOEditorPreviewProps**: TypeScript interface defining all props including SEO fields, change handlers, and AI confidence scores
-- **Image upload handling**: File upload with progress states and error handling
-- **Live preview**: Real-time Open Graph card preview showing how content appears on social media
-- **AI integration**: Support for displaying AI-generated content with confidence badges
+### `SEOEditorPreview` (default export)
+The main component rendering a two-panel layout:
+- **Editor fields** — SEO title, description, keywords, and OG image upload
+- **Live OG card preview** — real-time social media card simulation
+
+### `SEOEditorPreviewProps` interface
+| Prop | Type | Description |
+|------|------|-------------|
+| `seoTitle` / `seoDescription` / `seoKeywords` / `ogImageUrl` | `string` | Controlled SEO field values |
+| `title` / `summary` / `featuredImage` | `string` | Auto-populate fallback sources |
+| `onSeo*Change` / `onOgImageUrlChange` | `(value: string) => void` | Change handlers per field |
+| `onOgImageUpload` | `(file: File) => Promise<string>` | Optional parent-provided upload handler |
+| `aiConfidenceSeo*` | `number` (optional) | AI confidence scores shown via `ConfidenceBadge` |
+| `domain` | `string` | Preview domain label (default: `'openmsp.ai'`) |
+| `disabled` | `boolean` | Disables all inputs |
+
+### Internal State
+- `imageError` — falls back to placeholder when OG image fails to load
+- `isUploading` — shows `Loader2` spinner during file upload
+- `fileInputRef` — ref to hidden `<input type="file">` for programmatic click
 
 ## Usage Example
 
 ```typescript
-import { SEOEditorPreview } from './seo-editor-preview';
-
-function BlogEditor() {
-  const [seoData, setSeoData] = useState({
-    seoTitle: '',
-    seoDescription: '',
-    seoKeywords: '',
-    ogImageUrl: ''
-  });
-
-  const handleImageUpload = async (file: File) => {
-    const formData = new FormData();
-    formData.append('image', file);
-    const response = await fetch('/api/upload', { method: 'POST', body: formData });
-    const { url } = await response.json();
+<SEOEditorPreview
+  seoTitle={post.seoTitle}
+  seoDescription={post.seoDescription}
+  seoKeywords={post.seoKeywords}
+  ogImageUrl={post.ogImageUrl}
+  title={post.title}
+  summary={post.summary}
+  featuredImage={post.featuredImage}
+  onSeoTitleChange={(v) => updatePost({ seoTitle: v })}
+  onSeoDescriptionChange={(v) => updatePost({ seoDescription: v })}
+  onSeoKeywordsChange={(v) => updatePost({ seoKeywords: v })}
+  onOgImageUrlChange={(v) => updatePost({ ogImageUrl: v })}
+  onOgImageUpload={async (file) => {
+    const { url } = await uploadAsset(file);
     return url;
-  };
-
-  return (
-    <SEOEditorPreview
-      seoTitle={seoData.seoTitle}
-      seoDescription={seoData.seoDescription}
-      seoKeywords={seoData.seoKeywords}
-      ogImageUrl={seoData.ogImageUrl}
-      title="Blog Post Title"
-      summary="Blog post summary"
-      featuredImage="/featured.jpg"
-      onSeoTitleChange={(value) => setSeoData(prev => ({ ...prev, seoTitle: value }))}
-      onSeoDescriptionChange={(value) => setSeoData(prev => ({ ...prev, seoDescription: value }))}
-      onSeoKeywordsChange={(value) => setSeoData(prev => ({ ...prev, seoKeywords: value }))}
-      onOgImageUrlChange={(value) => setSeoData(prev => ({ ...prev, ogImageUrl: value }))}
-      onOgImageUpload={handleImageUpload}
-      aiConfidenceSeoTitle={0.85}
-      domain="example.com"
-    />
-  );
-}
+  }}
+  aiConfidenceSeoTitle={0.92}
+  domain="flamingo.run"
+/>
 ```
 
-The component automatically falls back to content fields (title, summary, featuredImage) when SEO fields are empty, displays AI confidence scores when available, and provides drag-and-drop image upload functionality with real-time preview updates.
+> All SEO fields accept empty strings (never `undefined`). When a field is empty, the component automatically falls back to `title`, `summary`, or `featuredImage` props, showing an "Auto-populated" hint label beneath the input.

package/src/components/features/.social-links-manager.md

@@ -1,12 +1,25 @@
-<!-- source-hash: 0d462bb6c17817fbe23701be501c0223 -->
-A React component for managing social media links with platform selection, URL input, and dynamic icon rendering.
+<!-- source-hash: d38fe303fe5fb74d67b5d888ec7ca267 -->
+A client-side React component for managing a dynamic list of social media profile links, supporting add, update, and remove operations with platform-aware icons.
 
 ## Key Components
 
-- **SocialLinksManager**: Main component for adding, editing, and removing social media links
-- **SocialLink**: Interface defining platform, URL, and optional username fields
-- **SocialPlatform**: Interface for platform configuration with display names, icons, and URL patterns
-- **iconMap**: Static mapping of platform names to their corresponding icon components
+### Interfaces
+
+| Interface | Description |
+|---|---|
+| `SocialLink` | Represents a single link entry with `platform`, `url`, and optional `username` |
+| `SocialPlatform` | Describes a platform definition sourced from dynamic data (e.g., database), including `icon_name`, `url_pattern`, and `placeholder` |
+| `SocialLinksManagerProps` | Component props: `links`, `onChange` callback, optional `platforms` array, and optional `className` |
+
+### `SocialLinksManager`
+
+The primary exported component. Renders a list of social link rows, each with:
+- A platform icon (resolved via `iconMap` using `icon_name` from `SocialPlatform` or falls back to `platform` string)
+- A `Select` dropdown for choosing the platform
+- An `Input` for the profile URL
+- A delete button (`Trash2`) to remove the entry
+
+Supported icon keys in `iconMap`: `linkedin`, `github`, `twitter`, `reddit`, `slack`, `whatsapp`, `website`, `youtube`, `instagram`, `facebook`, `discord`, `telegram`, `tiktok`.
 
 ## Usage Example
 
@@ -14,28 +27,21 @@ A React component for managing social media links with platform selection, URL i
 import { SocialLinksManager, SocialLink, SocialPlatform } from './social-links-manager';
 
 const platforms: SocialPlatform[] = [
-  {
-    id: '1',
-    name: 'linkedin',
-    display_name: 'LinkedIn',
-    icon_name: 'linkedin',
-    placeholder: 'LinkedIn profile URL',
-    enabled: true
-  }
+  { id: '1', name: 'linkedin', display_name: 'LinkedIn', icon_name: 'linkedin', enabled: true, placeholder: 'https://linkedin.com/in/...' },
+  { id: '2', name: 'github', display_name: 'GitHub', icon_name: 'github', enabled: true, placeholder: 'https://github.com/...' },
 ];
 
 function ProfileEditor() {
-  const [socialLinks, setSocialLinks] = useState<SocialLink[]>([]);
+  const [links, setLinks] = useState<SocialLink[]>([]);
 
   return (
     <SocialLinksManager
-      links={socialLinks}
-      onChange={setSocialLinks}
+      links={links}
+      onChange={setLinks}
       platforms={platforms}
-      className="max-w-2xl"
     />
   );
 }
 ```
 
-The component provides a user-friendly interface with platform dropdowns, URL inputs, icon previews, and remove buttons. It supports dynamic platform configuration and includes built-in icons for popular social media platforms.
+> **Note:** `platforms` defaults to an empty array, so platform data should always be passed explicitly — typically fetched from your database to keep icon and URL patterns in sync.

package/src/components/features/.start-with-openframe-button.md

@@ -1,14 +1,32 @@
-<!-- source-hash: b3af358fc7532622afce87b502165a25 -->
-A customizable button component for promoting OpenFrame with multiple visual themes and an integrated beta status badge.
+<!-- source-hash: 12ec98968857443cbefad0230bd2d335 -->
+A client-side React button component that renders a branded "Start with OpenFrame" CTA button, supporting five visual modes with the OpenFrame logo icon and a "Beta" status badge.
 
 ## Key Components
 
-**StartWithOpenFrameButton** - Main React component with forwardRef support
-- **Props Interface**: `StartWithOpenFrameButtonProps` extending base ButtonProps
-- **Visual Modes**: 5 color schemes (outline, yellow, pink, purple, cyan)
-- **Size Options**: Small, medium, and large variants
-- **Icon Integration**: OpenFrameLogo with dynamic colors
-- **Status Badge**: Built-in "Beta" badge indicator
+| Export | Type | Description |
+|--------|------|-------------|
+| `StartWithOpenFrameButton` | `React.ForwardRefExoticComponent` | Main button component with OpenFrame branding |
+| `StartWithOpenFrameButtonProps` | `interface` | Extends `ButtonProps`, omitting `variant`, `size`, and `leftIcon` |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `'outline' \| 'yellow' \| 'pink' \| 'purple' \| 'cyan'` | `'outline'` | Visual color mode |
+| `buttonSize` | `'sm' \| 'md' \| 'lg'` | — | Maps to internal Button size tokens |
+| `loading` | `boolean` | `false` | Shows loading state, hides the OpenFrame icon |
+| `buttonBackgroundColor` | `string` | — | Custom background override (cyan mode only) |
+| `buttonTextColor` | `string` | — | Custom text color override (cyan mode only) |
+| `children` | `React.ReactNode` | `'Start Free Trial'` | Button label |
+
+### Mode Behavior
+
+| Mode | Variant | Background Token |
+|------|---------|-----------------|
+| `outline` | `outline` | Default outline style |
+| `yellow` | `accent` | `--ods-open-yellow-base` |
+| `pink` / `purple` | `accent` | `--ods-flamingo-pink-base` |
+| `cyan` | `accent` | `--ods-flamingo-cyan-base` |
 
 ## Usage Example
 
@@ -16,30 +34,20 @@ A customizable button component for promoting OpenFrame with multiple visual the
 import { StartWithOpenFrameButton } from './start-with-openframe-button';
 
 // Default outline mode
-<StartWithOpenFrameButton 
-  onClick={() => window.open('/openframe')}
->
-  Start Free Trial
-</StartWithOpenFrameButton>
+<StartWithOpenFrameButton onClick={() => router.push('/signup')} />
 
-// Yellow primary mode with large size
-<StartWithOpenFrameButton 
-  mode="yellow"
-  buttonSize="lg"
-  onClick={handleStartTrial}
->
-  Get Started Now
+// Yellow accent, large size
+<StartWithOpenFrameButton mode="yellow" buttonSize="lg">
+  Get Started
 </StartWithOpenFrameButton>
 
-// Cyan mode with custom colors
-<StartWithOpenFrameButton 
+// Cyan with custom brand colors
+<StartWithOpenFrameButton
   mode="cyan"
-  buttonBackgroundColor="#00D4FF"
+  buttonBackgroundColor="#00BCD4"
   buttonTextColor="#000000"
-  loading={isLoading}
->
-  Launch OpenFrame
-</StartWithOpenFrameButton>
-```
+/>
 
-The component automatically adjusts icon colors based on the selected mode to maintain proper contrast and visual hierarchy. Each mode follows Flamingo's design system color tokens for consistent branding.
+// Loading state
+<StartWithOpenFrameButton loading={isSubmitting} />
+```

package/src/components/features/.status-filter-component.md

@@ -1,40 +1,56 @@
-<!-- source-hash: 4db0e02f86ff4b3306433ead043438a2 -->
-A reusable status filter component for admin dashboards that displays filter buttons with an optional item count.
+<!-- source-hash: f987a6879214f07a120da4bd03335b15 -->
+Reusable client-side status filter component that renders a row of toggle buttons for filtering content by status, following the admin dashboard pattern used across the Flamingo/OpenFrame platform.
 
 ## Key Components
 
-- **StatusFilterComponent**: Main React component that renders a horizontal row of status filter buttons
-- **StatusOption**: Interface defining the structure for filter options with value and label
-- **StatusFilterComponentProps**: Props interface supporting status selection, change handlers, options, and optional count display
+### Interfaces
 
-The component automatically handles the "All" filter option separately and applies the ODS design system styling with responsive typography.
+| Interface | Description |
+|-----------|-------------|
+| `StatusOption` | Defines a filter option with `value` and `label` strings |
+| `StatusFilterComponentProps` | Full props contract for the component |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `selectedStatus` | `string` | — | Currently active filter value |
+| `onStatusChange` | `(status: string) => void` | — | Callback fired on filter selection |
+| `statusOptions` | `StatusOption[]` | — | Array of filter options to render |
+| `showCount` | `boolean` | `false` | Toggles item count display |
+| `count` | `number` | `0` | Number shown when `showCount` is enabled |
+| `className` | `string` | `''` | Additional CSS classes for the wrapper |
+
+### Exported
+
+- `StatusFilterComponent` — named export, main component
+- `StatusOption` — exported interface
+- `StatusFilterComponentProps` — exported interface
 
 ## Usage Example
 
 ```typescript
 import { StatusFilterComponent, StatusOption } from './status-filter-component';
 
-const statusOptions: StatusOption[] = [
-  { value: 'published', label: 'Published' },
-  { value: 'draft', label: 'Draft' },
-  { value: 'archived', label: 'Archived' }
+const ticketStatusOptions: StatusOption[] = [
+  { value: 'open', label: 'Open' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'closed', label: 'Closed' },
 ];
 
-function BlogDashboard() {
-  const [selectedStatus, setSelectedStatus] = useState('all');
-  const [itemCount, setItemCount] = useState(42);
+export function TicketDashboard() {
+  const [status, setStatus] = React.useState('all');
 
   return (
     <StatusFilterComponent
-      selectedStatus={selectedStatus}
-      onStatusChange={setSelectedStatus}
-      statusOptions={statusOptions}
-      showCount={true}
-      count={itemCount}
-      className="mb-6"
+      selectedStatus={status}
+      onStatusChange={setStatus}
+      statusOptions={ticketStatusOptions}
+      showCount
+      count={42}
     />
   );
 }
 ```
 
-The component uses the Filter icon from Lucide React and integrates with the ODS design system for consistent styling across admin interfaces.
+> **Note:** The `'all'` option is always rendered as a dedicated button — any `StatusOption` with `value: 'all'` in the input array is automatically excluded from the mapped list to prevent duplication.

package/src/components/features/.tags-selector.md

@@ -1,45 +1,61 @@
-<!-- source-hash: 47cbe94daf59a2aa16dfaa405816a3d9 -->
-A comprehensive React component for selecting multiple tags with search functionality and visual chip display inside the input field.
+<!-- source-hash: 0d6f9a8deca3671804c89abef2d0469f -->
+A reusable React component for selecting and creating tags with search autocomplete, chip display, and tag limit enforcement.
 
 ## Key Components
 
-**TagsSelector** - Main component featuring:
-- Search autocomplete with dropdown suggestions
-- Selected tags displayed as removable chips inside the search input
-- Configurable tag limits (default 10)
-- Focus-triggered dropdown with all available tags
-- Real-time filtering based on search query
-- Disabled state support with visual feedback
+### `TagsSelector`
+Main exported component that renders a search input with inline tag chips, an autocomplete dropdown, and a tag counter.
 
-**Interfaces**:
-- `Tag` - Defines tag structure with id, name, and slug
-- `TagsSelectorProps` - Component configuration including available tags, selection state, and UI options
+**Props (`TagsSelectorProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `availableTags` | `Tag[]` | — | Pool of tags to search from |
+| `selectedTagIds` | `number[]` | — | Currently selected tag IDs |
+| `onTagsChange` | `(tagIds: number[]) => void` | — | Callback when selection changes |
+| `onCreateTag` | `(name: string) => Promise<Tag \| null>` | — | Optional async tag creation handler |
+| `maxTags` | `number` | `10` | Maximum selectable tags |
+| `allowCreate` | `boolean` | `true` | Enables the "Create tag" option |
+| `disabled` | `boolean` | `false` | Disables all interactions |
+
+### Internal Helpers
+
+- `handleTagAdd` — Adds a tag if not already selected and under the limit
+- `handleTagRemove` — Removes a tag chip from selection
+- `handleCreateTag` — Calls `onCreateTag`, auto-selects the result, manages loading state
+- `getFilteredTagsForAutocomplete` — Filters available tags by search query, excluding already selected
+- `tagExistsWithName` — Case-insensitive duplicate check before showing "Create" option
 
 ## Usage Example
 
 ```typescript
-import { TagsSelector } from './components/tags-selector';
+import { TagsSelector } from './tags-selector';
 
-const availableTags = [
-  { id: 1, name: 'React', slug: 'react' },
-  { id: 2, name: 'TypeScript', slug: 'typescript' },
-  { id: 3, name: 'Next.js', slug: 'nextjs' }
-];
-
-function BlogEditor() {
+function BlogPostForm() {
   const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
 
+  const handleCreateTag = async (name: string) => {
+    const res = await fetch('/api/tags', {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    });
+    return res.json(); // { id, name, slug }
+  };
+
   return (
     <TagsSelector
-      availableTags={availableTags}
+      availableTags={[
+        { id: 1, name: 'MSP', slug: 'msp' },
+        { id: 2, name: 'AI', slug: 'ai' },
+      ]}
       selectedTagIds={selectedTagIds}
       onTagsChange={setSelectedTagIds}
+      onCreateTag={handleCreateTag}
       maxTags={5}
-      placeholder="Search and select tags..."
-      className="w-full"
+      placeholder="Search tags..."
     />
   );
 }
 ```
 
-The component automatically handles tag addition/removal, search filtering, and displays a counter showing current selection against the maximum limit. Selected tags appear as yellow chips with remove buttons directly in the search input area.
+> **Note:** The dropdown auto-opens on focus and supports keyboard creation — pressing `Enter` while typing a new tag name triggers `handleCreateTag` when `allowCreate` is enabled.

package/src/components/features/.transcribe-and-summarize-combined-section.md

@@ -0,0 +1,45 @@
+<!-- source-hash: a9ac065f3da523be3fea0a878f95156f -->
+Unified React component that combines the `AIEnrichSection` (trigger button + status) and `TranscriptSummaryEditor` (editable output fields) into a single cohesive UI for video transcription and summarization workflows.
+
+## Key Components
+
+- **`TranscribeAndSummarizeCombinedSection`** — Default export; renders an `AIEnrichSection` followed by a `TranscriptSummaryEditor` in a vertical stack
+- **`TranscribeAndSummarizeCombinedSectionProps`** — Full interface merging props from both child components, split into two logical groups via inline comments
+- Automatically resolves `buttonLabel` to `"Generate"` or `"Regenerate"` based on the `hasResult` flag when no custom label is provided
+
+## Usage Example
+
+```typescript
+import { TranscribeAndSummarizeCombinedSection } from './transcribe-and-summarize-combined-section';
+
+<TranscribeAndSummarizeCombinedSection
+  // Trigger controls
+  onTranscribe={handleTranscribe}
+  isProcessing={isLoading}
+  canEnrich={!!videoFile}
+  requiredFields={[{ label: 'Video file', met: !!videoFile }]}
+  status={status}
+  statusMessage={statusMessage}
+  hasResult={!!transcript}
+  showCancel
+  onCancel={handleCancel}
+
+  // Editor content
+  videoSummary={summary}
+  onVideoSummaryChange={setSummary}
+  transcript={transcript}
+  onTranscriptChange={setTranscript}
+  isAIGenerated={isAIGenerated}
+  videoSummaryConfidence={0.92}
+  transcriptConfidence={0.88}
+  subtitles={srtContent}
+  onSubtitlesChange={setSrtContent}
+  hasSubtitles={hasSubtitles}
+/>
+```
+
+## Notes
+
+- Used by both `CustomerInterview` and `ProductRelease` modals
+- All text labels (`title`, `description`, `videoSummaryLabel`, etc.) are fully customizable with sensible defaults
+- The `disabled` prop propagates only to `TranscriptSummaryEditor`, not to the enrich trigger button

package/src/components/features/.transcribe-summarize-section.md

@@ -0,0 +1,48 @@
+<!-- source-hash: e9e7f82a90db0014d3b7c868be383461 -->
+A reusable React wrapper around `AIEnrichSection` that provides a standardized UI for video transcription and summarization workflows across `CustomerInterview` and `ProductRelease` entities.
+
+## Key Components
+
+### `TranscribeSummarizeSection`
+The primary export — a client-side React component that delegates rendering to `AIEnrichSection` with transcription-specific defaults.
+
+### `TranscribeSummarizeSectionProps`
+Full TypeScript interface exposing all configurable props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onTranscribe` | `() => void` | — | Triggers transcription processing |
+| `isProcessing` | `boolean` | — | Controls loading state |
+| `canEnrich` | `boolean` | — | Enables/disables the action button |
+| `requiredFields` | `AIRequiredField[]` | — | Fields displayed as prerequisites |
+| `hasResult` | `boolean` | `false` | Switches button label to "Regenerate" |
+| `disabledMessage` | `string` | `"Upload a video first"` | Shown when button is disabled |
+| `title` | `string` | `"Transcribe & Summarize"` | Section heading |
+| `description` | `string` | `"Generate transcript..."` | Section subtext |
+| `loadingLabel` | `string` | `"Processing..."` | Label during active processing |
+| `showCancel` | `boolean` | `true` | Toggles cancel button visibility |
+
+## Usage Example
+
+```typescript
+import { TranscribeSummarizeSection } from './transcribe-summarize-section';
+
+function CustomerInterviewPanel() {
+  const [isProcessing, setIsProcessing] = React.useState(false);
+
+  return (
+    <TranscribeSummarizeSection
+      onTranscribe={() => setIsProcessing(true)}
+      isProcessing={isProcessing}
+      canEnrich={true}
+      requiredFields={[{ key: 'videoUrl', label: 'Video URL' }]}
+      hasResult={false}
+      onCancel={() => setIsProcessing(false)}
+      status="loading"
+      statusMessage="Transcribing video..."
+    />
+  );
+}
+```
+
+The button label automatically toggles between `"Generate"` and `"Regenerate"` based on the `hasResult` prop, or can be fully overridden via `buttonLabel`.

package/src/components/features/.transcript-summary-editor.md

@@ -0,0 +1,53 @@
+<!-- source-hash: 82679c7416bd1640d332a170504ba800 -->
+A reusable React component that renders editable textarea fields for video summary, transcript, and optional SRT subtitles — with AI generation badges and confidence score indicators.
+
+## Key Components
+
+### `TranscriptSummaryEditor`
+The default export. Renders up to three labeled textarea sections:
+
+| Section | Shown When |
+|---|---|
+| **Video Summary** | Always |
+| **Transcript** | Always |
+| **Subtitles (SRT)** | `subtitles` content exists OR `onSubtitlesChange` is provided |
+
+Each section supports:
+- Customizable label, helper text, and placeholder
+- Configurable minimum height
+- `isAIGenerated` badge (Sparkles icon / CC icon for subtitles)
+- `ConfidenceBadge` for AI confidence scores (video summary and transcript only)
+- `disabled` state propagated to all textareas
+
+### `TranscriptSummaryEditorProps`
+Full TypeScript interface with all configurable props — all optional except `onVideoSummaryChange` and `onTranscriptChange`.
+
+## Usage Example
+
+```typescript
+import { TranscriptSummaryEditor } from './transcript-summary-editor';
+
+function InterviewEditor() {
+  const [summary, setSummary] = useState('');
+  const [transcript, setTranscript] = useState('');
+  const [subtitles, setSubtitles] = useState('');
+
+  return (
+    <TranscriptSummaryEditor
+      videoSummary={summary}
+      onVideoSummaryChange={setSummary}
+      transcript={transcript}
+      onTranscriptChange={setTranscript}
+      isAIGenerated={true}
+      videoSummaryConfidence={87}
+      transcriptConfidence={92}
+      subtitles={subtitles}
+      onSubtitlesChange={setSubtitles}
+      videoSummaryMinHeight={250}
+      transcriptMinHeight={400}
+    />
+  );
+}
+```
+
+> Designed for use with `CustomerInterview` and `ProductRelease` entities in the Flamingo/OpenFrame platform, providing a consistent editing UI across entity types.