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

package/src/components/features/.push-button-selector.md

@@ -1,51 +1,62 @@
-<!-- source-hash: 4405e37ec9d96729a3270f3e6a23dc05 -->
-A reusable React component that provides an interactive list of selectable options with visual feedback, supporting both single and multi-selection modes with comprehensive loading, error, and validation states.
+<!-- source-hash: 07ba5865678ee01e8867762d1e641327 -->
+A reusable React selector component that renders options as push-button cards with checkbox indicators, supporting single/multi-select, grouped sections, loading skeletons, and error states.
 
 ## Key Components
 
-- **`SelectableOption`** - Interface defining the structure for selectable items with optional metadata
-- **`PushButtonSelector`** - Main component providing clickable option selection with visual indicators
-- **`PushButtonSelectorSkeleton`** - Loading state component with animated placeholders
-- **`PushButtonSelectorError`** - Error state component with themed error messaging
+| Export | Type | Description |
+|--------|------|-------------|
+| `PushButtonSelector` | Component | Main selector rendered as interactive card list |
+| `SelectableOption` | Interface | Shape of each selectable item (id, name, icon, section, etc.) |
+| `SectionDefinition` | Interface | Defines a named group to bucket options under |
+| `PushButtonSelectorSkeleton` | Internal | Animated skeleton shown during `isLoading` |
+| `PushButtonSelectorError` | Internal | Error panel using ODS error tokens |
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SelectableOption[]` | — | All available options |
+| `selectedIds` | `string[]` | — | Controlled selected IDs |
+| `onSelectionChange` | `(ids: string[]) => void` | — | Fires on toggle |
+| `multiSelect` | `boolean` | `true` | Allow multiple selections |
+| `sections` | `SectionDefinition[]` | — | Groups options under labeled headers |
+| `selectionSummary` | `boolean` | `false` | Shows badge summary of selected items |
+| `optional` | `boolean` | `false` | Suppresses empty-state warning |
+| `isLoading` | `boolean` | `false` | Renders skeleton UI |
+| `error` | `string \| null` | `null` | Renders error panel |
 
 ## Usage Example
 
 ```typescript
-import { PushButtonSelector, SelectableOption } from './push-button-selector';
+import { PushButtonSelector, SelectableOption, SectionDefinition } from './push-button-selector';
 
 const platforms: SelectableOption[] = [
-  {
-    id: '1',
-    name: 'github',
-    displayName: 'GitHub',
-    description: 'Version control platform',
-    icon: <GitHubIcon />,
-    disabled: false
-  },
-  {
-    id: '2', 
-    name: 'gitlab',
-    displayName: 'GitLab',
-    description: 'DevOps platform',
-    icon: <GitLabIcon />
-  }
+  { id: 'uuid-1', name: 'connectwise', displayName: 'ConnectWise', description: 'PSA platform', section: 'psa' },
+  { id: 'uuid-2', name: 'halo',        displayName: 'HaloPSA',     description: 'PSA platform', section: 'psa' },
+  { id: 'uuid-3', name: 'ninja',       displayName: 'NinjaRMM',    description: 'RMM platform', section: 'rmm' },
 ];
 
-function PlatformSelector() {
-  const [selected, setSelected] = useState<string[]>([]);
+const sections: SectionDefinition[] = [
+  { id: 'psa', label: 'PSA Tools' },
+  { id: 'rmm', label: 'RMM Tools' },
+];
+
+function IntegrationPicker() {
+  const [selected, setSelected] = React.useState<string[]>([]);
 
   return (
     <PushButtonSelector
       options={platforms}
       selectedIds={selected}
       onSelectionChange={setSelected}
-      title="Select Platforms"
-      multiSelect={true}
-      selectionSummary={true}
-      helpText="Choose one or more platforms to integrate"
+      sections={sections}
+      title="Select Integrations"
+      helpText="Choose the platforms to connect."
+      selectionSummary
+      multiSelect
     />
   );
 }
 ```
 
-The component features hover effects, selection validation, skeleton loading states, and comprehensive error handling with ODS (OpenFrame Design System) styling.
+> **Note:** Invalid `selectedIds` (IDs not present in `options`) are silently filtered once `options` has loaded. A `console.warn` is emitted in `development` mode to aid debugging.

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

@@ -1,43 +1,58 @@
-<!-- source-hash: 0b2642ad551b655994b6986eb6e18999 -->
-A comprehensive React component for managing media uploads and organization in release creation, featuring drag-and-drop reordering, real-time upload states, and media type categorization.
+<!-- source-hash: 567153c4bee0ea823c8dcb3ad142df21 -->
+A React client component for managing media attachments (images, videos, screenshots, demos) on release entries, supporting file upload, drag-to-reorder, and inline editing.
 
 ## Key Components
 
-- **`ReleaseMediaItem`** - Interface defining media items with type, URL, metadata, and upload state
-- **`ReleaseMediaManagerProps`** - Component props including media array, change handler, and upload function
-- **`ReleaseMediaManager`** - Main component with file upload, preview, editing, and reordering capabilities
+### `ReleaseMediaItem` (interface)
+Represents a single media entry with the following fields:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `media_type` | `'image' \| 'video' \| 'screenshot' \| 'demo'` | Category of media |
+| `media_url` | `string` | Public URL after upload |
+| `title` | `string?` | Optional display title |
+| `description` | `string?` | Optional description |
+| `display_order` | `number?` | Sort position in gallery |
+| `_file` | `File?` | Temporary pre-upload file reference |
+| `_uploading` | `boolean?` | Upload in-progress flag |
+
+### `ReleaseMediaManager` (component)
+
+**Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `media` | `ReleaseMediaItem[]` | Controlled media list |
+| `onChange` | `(media: ReleaseMediaItem[]) => void` | Called on any list mutation |
+| `onUpload` | `(file, mediaType) => Promise<string>` | Handles actual file upload, returns URL |
+| `className` | `string?` | Optional wrapper class |
+
+**Internal behaviors:**
+- `handleFileSelect` — detects file MIME type, auto-assigns `media_type`, triggers `onUpload`, rolls back on failure
+- `removeMedia` — removes item by index
+- `updateMedia` — updates a single field on an existing item
+- `handleDragStart` / `handleDragOver` / `handleDrop` — native HTML5 drag-and-drop reordering, updates `display_order` on drop
 
 ## Usage Example
 
 ```typescript
 import { ReleaseMediaManager, ReleaseMediaItem } from './release-media-manager';
 
-function ReleaseForm() {
-  const [media, setMedia] = useState<ReleaseMediaItem[]>([]);
-
-  const handleUpload = async (file: File, mediaType: string) => {
-    // Upload logic - return uploaded URL
-    const formData = new FormData();
-    formData.append('file', file);
-    
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: formData
-    });
-    
-    const { url } = await response.json();
-    return url;
-  };
-
-  return (
-    <ReleaseMediaManager
-      media={media}
-      onChange={setMedia}
-      onUpload={handleUpload}
-      className="w-full"
-    />
-  );
+const [media, setMedia] = useState<ReleaseMediaItem[]>([]);
+
+async function uploadToStorage(file: File, mediaType: string): Promise<string> {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await fetch('/api/upload', { method: 'POST', body: formData });
+  const { url } = await res.json();
+  return url;
 }
+
+<ReleaseMediaManager
+  media={media}
+  onChange={setMedia}
+  onUpload={uploadToStorage}
+/>
 ```
 
-The component supports automatic file type detection, real-time upload progress, drag-and-drop reordering, and provides a responsive grid layout with preview functionality for both images and videos.
+> **Note:** The component is fully controlled — the parent owns the `media` array. Failed uploads automatically roll back to the previous state without manual intervention.

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

@@ -1,56 +1,51 @@
-<!-- source-hash: 4f16f50a29435f77c23b9c708e9e4a98 -->
-A React component that renders a configurable section selector with button-style navigation items, supporting both vertical and wrap layouts with badges, icons, and descriptions.
+<!-- source-hash: 760f28bd91ca25a2a1341b709f1c96c4 -->
+A client-side navigation component that renders a list of selectable section buttons with support for vertical and wrap layouts, optional badges, icons, descriptions, and active state highlighting.
 
 ## Key Components
 
-**Interfaces:**
-- `SectionItem` - Configuration for individual section buttons including title, badge, icons, and state
-- `SectionSelectorProps` - Main component props with layout, styling, and behavior options
+### Interfaces
 
-**Components:**
-- `SectionButton` - Internal button component handling individual section rendering
-- `SectionSelector` - Main component that renders the collection of section buttons
+- **`SectionItem`** — Defines a single section entry with `id`, `title`, optional `subtitle`, `description`, `number`, `leftIcon`, `badge`, `screenshots`, and `disabled` flag.
+- **`SectionSelectorProps`** — Configuration for the selector including `sections`, `activeSection`, `onSectionChange` callback, `layout`, `buttonWidth`, `minHeight`, and display toggles.
 
-**Key Features:**
-- Two layout modes: `vertical` (stacked) and `wrap` (flexible grid)
-- Status badges with customizable variants and color schemes
-- Optional left icons, numbering, and descriptions
-- Responsive button widths (`auto`, `full`, `responsive`)
-- Disabled state support at item and component level
+### Components
+
+- **`SectionButton`** *(internal)* — Renders an individual section button. Supports two layout modes:
+  - `vertical` — Displays number prefix, left icon, title, badge, and description stacked.
+  - `wrap` — Displays left icon, title, badge, and subtitle in a compact horizontal card.
+- **`SectionSelector`** *(exported)* — Orchestrates the full selector by mapping `sections` to `SectionButton` instances inside a flex container.
 
 ## Usage Example
 
 ```typescript
-import { SectionSelector, SectionItem } from './components/section-selector'
-import { Settings, User } from 'lucide-react'
+import SectionSelector, { SectionItem } from './section-selector'
 
 const sections: SectionItem[] = [
   {
-    id: 'profile',
-    title: 'User Profile',
-    description: 'Manage your account settings',
-    leftIcon: <User size={20} />,
-    badge: { text: 'New', colorScheme: 'green' }
+    id: 'overview',
+    title: 'Overview',
+    subtitle: 'General information',
+    badge: { text: 'New', colorScheme: 'green' },
   },
   {
     id: 'settings',
-    title: 'Application Settings',
-    subtitle: 'Configure app preferences',
-    leftIcon: <Settings size={20} />,
-    number: '2'
-  }
+    title: 'Settings',
+    description: 'Configure your preferences',
+    number: '02',
+    disabled: false,
+  },
 ]
 
-function NavigationPanel() {
-  const [activeSection, setActiveSection] = useState('profile')
+export default function Page() {
+  const [active, setActive] = React.useState('overview')
 
   return (
     <SectionSelector
       sections={sections}
-      activeSection={activeSection}
-      onSectionChange={setActiveSection}
+      activeSection={active}
+      onSectionChange={setActive}
       layout="vertical"
-      buttonWidth="responsive"
+      buttonWidth="full"
       showDescription={true}
     />
   )

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} />
+```