@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/components/features/.platform-badge.md

@@ -1,50 +1,51 @@
-<!-- source-hash: 8fc07a96a287d7d30046a7e6b1251b68 -->
-A React component that renders platform-specific badges with branded icons, colors, and labels for Flamingo Stack platforms.
+<!-- source-hash: 8742c38ee7680d3664638dd468a8ed67 -->
+A client-side React component that renders a styled badge identifying the source platform of content, with platform-specific icons, colors, and sizing options.
 
 ## Key Components
 
-- **PlatformBadge** - Main component that displays a platform badge with icon and optional label
-- **PlatformIcon** - Internal component that renders platform-specific icons based on platform name
-- **sizeClasses** - Configuration object defining size variants (xs, sm, md) for container, icon, and text
-- **platformColors** - Color scheme mapping for each platform (background, border, text colors)
-- **PlatformBadgeProps** - TypeScript interface defining component props including platform data, size, and display options
+- **`PlatformBadge`** — Main exported component that renders a rounded pill badge with an icon and optional label
+- **`PlatformIcon`** — Internal component that resolves the correct logo/icon for a given platform ID
+- **`sizeClasses`** — Size variant map (`xs`, `sm`, `md`) controlling container padding, icon dimensions, and text size
+- **`platformColors`** — Color theme map per platform, defining background, border, and text Tailwind classes
+
+### Supported Platforms
+
+| Platform ID | Color |
+|---|---|
+| `openmsp` | Yellow `#FFC008` |
+| `flamingo` / `flamingo-teaser` | Pink `#FF006E` |
+| `openframe` | Cyan `#00D9D9` |
+| `tmcg` | Magenta `#F357BB` |
+| `company-hub` | Red `#f36666` |
+| `marketing-hub` | Magenta `#F357BB` |
+| `product-hub` | Green `#5EA62E` |
+| `revenue-hub` | Yellow `#FFC008` |
+| `people-hub` | Teal `#5EFAF0` |
+| `universal` (fallback) | Gray `#6B7280` |
 
 ## Usage Example
 
 ```typescript
-import { PlatformBadge } from './components/ui/platform-badge';
-
-// Basic usage with platform object
-<PlatformBadge 
-  platform={{
-    id: "1",
-    name: "flamingo",
-    display_name: "Flamingo"
-  }}
-/>
+import { PlatformBadge } from './platform-badge';
 
-// Different sizes and configurations
-<PlatformBadge 
-  platform={{
-    id: "2", 
-    name: "openframe",
-    display_name: "OpenFrame"
-  }}
-  size="md"
+// Basic usage with label
+<PlatformBadge
+  platform={{ id: '1', name: 'flamingo', display_name: 'Flamingo' }}
+  size="sm"
   showLabel={true}
-  className="custom-styles"
 />
 
-// Icon only (no label)
-<PlatformBadge 
-  platform={{
-    id: "3",
-    name: "openmsp", 
-    display_name: "OpenMSP"
-  }}
-  size="xs"
+// Icon-only, larger size
+<PlatformBadge
+  platform={{ id: '2', name: 'openframe', display_name: 'OpenFrame' }}
+  size="md"
   showLabel={false}
 />
-```
 
-The component supports platforms like Flamingo, OpenMSP, OpenFrame, Admin Hub, and TMCG with their respective brand colors and icons. It gracefully handles unknown platforms with a generic globe icon and gray color scheme.
+// With custom class override
+<PlatformBadge
+  platform={{ id: '3', name: 'openmsp', display_name: 'OpenMSP' }}
+  size="xs"
+  className="opacity-75"
+/>
+```

package/src/components/features/.platform-filter.md

@@ -1,38 +1,45 @@
-<!-- source-hash: 03180f80130a11561f970ec5330ba8be -->
-A React component that renders a set of filter buttons for selecting different platforms, with support for icons and customizable styling.
+<!-- source-hash: aa1e11dd3e0b9d6a8141611784c7d212 -->
+A reusable React filter component that renders a row of platform-selection buttons, including an "All Platforms" option, with optional platform icons.
 
 ## Key Components
 
-- **PlatformFilterComponentProps** - Interface defining component props including platform selection state, change handler, and styling options
-- **PlatformFilterComponent** - Main functional component that renders platform filter buttons with optional icons
-- **getSmallPlatformIcon** - Utility function import for retrieving platform-specific icons
+### `PlatformFilterComponent`
+The primary export — a client-side React component that maps a `PlatformConfig[]` array into toggle buttons, highlighting the currently selected platform using the `"accent"` variant.
+
+### `PlatformFilterComponentProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `selectedPlatform` | `string` | — | Currently active platform value (use `'all'` for the global option) |
+| `onPlatformChange` | `(platform: string) => void` | — | Callback fired when a platform button is clicked |
+| `platforms` | `PlatformConfig[]` | `[]` | List of platform options to render |
+| `className` | `string` | `''` | Additional CSS classes for the wrapper `div` |
+| `showIcons` | `boolean` | `true` | Whether to render small platform icons via `getSmallPlatformIcon` |
+| `size` | `'small-legacy' \| 'default'` | `'small-legacy'` | Button size variant |
 
 ## Usage Example
 
 ```typescript
 import { PlatformFilterComponent } from './platform-filter';
-import type { PlatformConfig } from '../types/platform';
+import type { PlatformConfig } from '../../types/platform';
 
 const platforms: PlatformConfig[] = [
-  { value: 'ios', label: 'iOS' },
-  { value: 'android', label: 'Android' },
-  { value: 'web', label: 'Web' }
+  { value: 'connectwise', label: 'ConnectWise' },
+  { value: 'halo',        label: 'HaloPSA'    },
 ];
 
-function AppFilters() {
-  const [selectedPlatform, setSelectedPlatform] = useState('all');
+function TicketFilters() {
+  const [platform, setPlatform] = React.useState('all');
 
   return (
     <PlatformFilterComponent
-      selectedPlatform={selectedPlatform}
-      onPlatformChange={setSelectedPlatform}
+      selectedPlatform={platform}
+      onPlatformChange={setPlatform}
       platforms={platforms}
       showIcons={true}
-      size="default"
-      className="my-4"
     />
   );
 }
 ```
 
-The component renders an "All Platforms" button followed by individual platform buttons, with the selected platform highlighted using the primary variant. Icons are displayed by default and can be toggled via the `showIcons` prop.
+> **Note:** Platform icons are resolved via the shared `getSmallPlatformIcon` utility in `platform-config`. To add a new platform, extend the `PlatformConfig` type and register its icon there rather than modifying this component.

package/src/components/features/.policy-configuration-panel.md

@@ -1,66 +1,58 @@
-<!-- source-hash: c4760001ccc6ea7295fa325e79556bf6 -->
-A comprehensive React component that renders an expandable permission policy configuration interface with hierarchical categories and granular policy controls.
+<!-- source-hash: bd515872f4cb1c49add8d17631e037c5 -->
+A React panel component for displaying and editing permission policies grouped by category, supporting both view and edit modes with animated expand/collapse behavior.
 
 ## Key Components
 
-**PolicyConfigurationPanel**: Main container component that renders a list of expandable permission categories with global and individual policy settings.
-
-**CategorySection**: Individual category component with animated expansion/collapse, global permission dropdown, and policy list management.
-
-**PolicyRow**: Individual policy item component displaying tool icon, policy details (name and command pattern), and permission level dropdown.
-
-**useAnimatedHeight**: Custom hook providing smooth height animations for expanding/collapsing category sections.
-
-**Helper Functions**:
-- `getApprovalLevelLabel()`: Maps approval level values to user-friendly labels
-- `approvalLevelOptions`: Predefined approval level configuration
+| Export / Internal | Type | Description |
+|---|---|---|
+| `PolicyConfigurationPanel` | Component (exported) | Root panel rendering all permission categories |
+| `CategorySection` | Internal component | Collapsible category with global permission dropdown |
+| `PolicyRow` | Internal component | Single policy entry with approval level selector |
+| `useAnimatedHeight` | Custom hook | Smooth height animation for expand/collapse transitions |
+| `approvalLevelOptions` | Constant | Available levels: `ALLOW`, `ASK_USER`, `ASK_TECHNICIAN`, `DENY` |
+| `getApprovalLevelLabel` | Utility fn | Resolves `ApprovalLevel` enum to display string |
 
 ## Usage Example
 
 ```typescript
 import { PolicyConfigurationPanel } from './policy-configuration-panel'
-
-function PermissionsSettings() {
-  const [categories, setCategories] = useState<PermissionCategory[]>([
-    {
-      id: 'network',
-      name: 'Network Tools',
-      icon: '🌐',
-      configurationsCount: 5,
-      isExpanded: false,
-      globalPermission: 'ASK_USER',
-      policies: [
-        {
-          id: 'ping',
-          name: 'Ping Command',
-          toolName: 'ping',
-          commandPattern: 'ping -c 4 {host}',
-          approvalLevel: 'ALLOW'
-        }
-      ]
-    }
-  ])
-
-  return (
-    <PolicyConfigurationPanel
-      categories={categories}
-      editMode={true}
-      onCategoryToggle={(categoryId) => {
-        setCategories(prev => prev.map(cat => 
-          cat.id === categoryId 
-            ? { ...cat, isExpanded: !cat.isExpanded }
-            : cat
-        ))
-      }}
-      onGlobalPermissionChange={(categoryId, level) => {
-        // Update global permission logic
-      }}
-      onPolicyPermissionChange={(categoryId, policyId, level) => {
-        // Update individual policy logic
-      }}
-    />
-  )
-}
+import { PermissionCategory, ApprovalLevel } from '../../types/permissions'
+
+const categories: PermissionCategory[] = [
+  {
+    id: 'network',
+    name: 'Network',
+    icon: <NetworkIcon />,
+    configurationsCount: 3,
+    isExpanded: false,
+    globalPermission: 'ALLOW',
+    policies: [
+      {
+        id: 'ping',
+        name: 'Ping Host',
+        commandPattern: 'ping *',
+        toolName: 'network',
+        approvalLevel: 'ALLOW',
+      },
+    ],
+  },
+]
+
+<PolicyConfigurationPanel
+  categories={categories}
+  editMode={true}
+  onCategoryToggle={(categoryId) => toggleCategory(categoryId)}
+  onGlobalPermissionChange={(categoryId, level) => setGlobal(categoryId, level)}
+  onPolicyPermissionChange={(categoryId, policyId, level) =>
+    updatePolicy(categoryId, policyId, level)
+  }
+  className="my-4"
+/>
 ```
 
-The component features smooth animations, responsive design, and comprehensive permission management with support for both category-level global permissions and individual policy-level controls.
+## Behavior Notes
+
+- In **edit mode**, dropdowns allow selecting approval levels per policy or globally per category
+- In **view mode**, current levels are rendered as static text
+- `useAnimatedHeight` uses `scrollHeight` measurement + CSS transitions for smooth accordion animation
+- Category header clicks and the chevron button both toggle expansion; dropdown clicks use `stopPropagation` to prevent conflicts

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

@@ -1,50 +1,47 @@
-<!-- source-hash: 274a22be0c31fdc49ccdc0daf827abd4 -->
-A React component that renders authentication provider buttons with integrated loading states and consistent styling for OAuth sign-in flows.
+<!-- source-hash: 18cb2f4cc768f6f9efb9b720bfbd1714 -->
+A reusable OAuth provider sign-in button component that handles loading states, click propagation, and renders the appropriate provider icon and label.
 
 ## Key Components
 
-**ProviderButton Component**
-- `ProviderButtonProps` - Interface defining provider type, click handler, and optional disabled/loading states
-- `PROVIDER_CONFIG` - Configuration object mapping provider names to display text and icons
-- Supports Microsoft, Google, Slack, and GitHub authentication providers
+### `ProviderButtonProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `provider` | `'microsoft' \| 'google' \| 'slack' \| 'github'` | OAuth provider to render |
+| `onClick` | `() => Promise<void> \| void` | Sign-in handler (sync or async) |
+| `disabled` | `boolean` | Disables the button (default: `false`) |
+| `loading` | `boolean` | External loading state override (default: `false`) |
 
-**Key Features**
-- Dual loading state management (internal and external)
-- Event bubbling prevention for modal contexts
-- Consistent styling with hover states and accessibility labels
-- Error handling with console logging
+### `PROVIDER_CONFIG`
+Static map linking each provider key to its display name and icon component.
+
+### `ProviderButton`
+Main exported component. Manages an internal loading state that activates during async `onClick` execution, falling back gracefully when an external `loading` prop is passed. Stops click propagation to prevent accidental modal/backdrop dismissals.
 
 ## Usage Example
 
 ```typescript
 import { ProviderButton } from './provider-button';
 
-function SignInModal() {
-  const [loading, setLoading] = useState(false);
+async function handleMicrosoftSignIn() {
+  await signIn('microsoft');
+}
+
+// Basic usage
+<ProviderButton provider="microsoft" onClick={handleMicrosoftSignIn} />
 
-  const handleGoogleSignIn = async () => {
+// With external loading control
+const [loading, setLoading] = useState(false);
+
+<ProviderButton
+  provider="google"
+  onClick={async () => {
     setLoading(true);
-    try {
-      await signInWithGoogle();
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="space-y-3">
-      <ProviderButton 
-        provider="google" 
-        onClick={handleGoogleSignIn}
-        loading={loading}
-      />
-      <ProviderButton 
-        provider="github" 
-        onClick={() => signInWithGitHub()}
-      />
-    </div>
-  );
-}
+    await signIn('google');
+    setLoading(false);
+  }}
+  loading={loading}
+  disabled={loading}
+/>
 ```
 
-The component automatically handles loading states, displays appropriate icons, and provides consistent UX patterns for authentication flows across different OAuth providers.
+> **Note:** When `loading` is provided externally, internal loading state management is skipped to avoid state conflicts.

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}
     />
   )