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

package/src/components/.alert-dialog.md

@@ -1,48 +1,52 @@
-<!-- source-hash: bbddedb267b92c11a666b6cf20ee7915 -->
-A comprehensive alert dialog component built on top of Radix UI primitives with custom styling and animations. This provides a complete set of composable components for creating accessible confirmation dialogs and alerts.
+<!-- source-hash: 935e51d8951204b9160ca16e9245ae95 -->
+Accessible alert dialog component built on Radix UI's `AlertDialogPrimitive`, providing a styled modal for confirmations and destructive actions that require explicit user acknowledgment.
 
 ## Key Components
 
-- **AlertDialog** - Root container component
-- **AlertDialogTrigger** - Element that opens the dialog
-- **AlertDialogContent** - Main dialog container with overlay and animations
-- **AlertDialogOverlay** - Semi-transparent backdrop
-- **AlertDialogHeader/Footer** - Layout components for organizing content
-- **AlertDialogTitle/Description** - Text content components
-- **AlertDialogAction/Cancel** - Action buttons with proper styling
+| Export | Description |
+|--------|-------------|
+| `AlertDialog` | Root wrapper (re-export of Radix `Root`) |
+| `AlertDialogTrigger` | Element that opens the dialog |
+| `AlertDialogPortal` | Renders dialog outside the DOM tree |
+| `AlertDialogOverlay` | Animated dark backdrop (`bg-black/80`) with fade in/out |
+| `AlertDialogContent` | Centered modal panel with zoom/slide animations |
+| `AlertDialogHeader` | Top section for title and description |
+| `AlertDialogFooter` | Bottom action area, stacked on mobile / row on desktop |
+| `AlertDialogTitle` | Semibold heading (`text-lg font-semibold`) |
+| `AlertDialogDescription` | Muted supporting text (`text-sm text-muted-foreground`) |
+| `AlertDialogAction` | Confirm button styled via `buttonVariants()` |
+| `AlertDialogCancel` | Dismiss button using `buttonVariants({ variant: "outline" })` |
 
 ## Usage Example
 
 ```typescript
 import {
   AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
   AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
 } from "./alert-dialog"
 
-function DeleteConfirmation() {
+export function DeleteConfirmation() {
   return (
     <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <button>Delete Item</button>
-      </AlertDialogTrigger>
+      <AlertDialogTrigger>Delete Device</AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete the item.
+            This will permanently remove the device from your fleet.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={() => console.log("Deleted")}>
-            Delete
+          <AlertDialogAction onClick={handleDelete}>
+            Continue
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
@@ -51,4 +55,4 @@ function DeleteConfirmation() {
 }
 ```
 
-The dialog includes smooth fade and zoom animations, responsive design, and follows accessibility best practices through Radix UI primitives.
+> All animations are driven by Radix `data-[state]` attributes, ensuring accessible open/close transitions with no extra state management required.

package/src/components/.announcement-bar.md

@@ -1,35 +1,40 @@
-<!-- source-hash: bd23968cf231aeb2cf4be0beba5bbfc5 -->
-A client-side React component that displays a dismissible announcement bar across the top of the application. The component fetches active announcements from the server, handles platform-specific caching and dismissal states, and provides responsive mobile-first design with optional CTA buttons.
+<!-- source-hash: cbe120bea34edef14f05fff077b0b285 -->
+A client-side React component that renders a dismissible announcement banner, fetching active announcements from a configured API endpoint with localStorage-based caching and per-announcement dismissal persistence.
 
 ## Key Components
 
-- **AnnouncementBar**: Main React component that manages announcement display state and user interactions
-- **fetchActiveAnnouncement()**: Async function that retrieves active announcements from `/api/announcements/active`
-- **handleDismiss()**: User action handler that stores dismissal state in localStorage with platform-specific keys
-- **handleCtaClick()**: CTA button click handler that opens links based on target preference
-- **renderIcon()**: Helper that renders either PNG images or SVG icons using the icon-utils system
-- **getSvgIcon()**: Wrapper function that standardizes SVG icon rendering with responsive sizing
+| Export/Function | Description |
+|----------------|-------------|
+| `AnnouncementBar` | Main component — renders the announcement banner or `null` if hidden/dismissed |
+| `fetchActiveAnnouncement` | Fetches the active announcement from `announcementsUrl`, updates state and localStorage cache |
+| `handleDismiss` | Marks the current announcement as dismissed in localStorage and hides the bar |
+| `handleCtaClick` | Navigates to the CTA URL, respecting `_blank` target for new-tab behavior |
+| `renderIcon` | Renders either a PNG `<Image>` or an SVG icon based on `announcement.icon_type` |
+| `getSvgIcon` | Thin wrapper around `renderSvgIcon` applying size-appropriate Tailwind classes |
+
+## Behavior Notes
+
+- **Instant paint**: On mount, the cached announcement from localStorage is applied synchronously before the API response arrives.
+- **Polling**: Refreshes every 5 minutes via `setInterval`; interval restarts if `announcementsUrl` changes.
+- **No provider fallback**: When `useEndpointsRuntime` returns no URL, polling is skipped entirely — cached data still renders.
+- **Platform-scoped keys**: localStorage keys are prefixed with the platform type (via `getAppType()`) to prevent key collisions across apps.
+- **Responsive CTA**: The CTA button is desktop-only; on mobile, tapping the content area triggers `handleCtaClick` directly.
 
 ## Usage Example
 
 ```typescript
-import { AnnouncementBar } from './components/announcement-bar';
+// Wrap your app with the endpoints provider, then drop in the bar:
+import { AnnouncementBar } from './announcement-bar';
+import { EndpointsRuntimeProvider } from '../contexts/endpoints-runtime-context';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+function AppShell() {
   return (
-    <div>
+    <EndpointsRuntimeProvider announcementsUrl="/api/announcements/active">
       <AnnouncementBar />
-      <main>{children}</main>
-    </div>
+      <main>{/* app content */}</main>
+    </EndpointsRuntimeProvider>
   );
 }
-
-// The component automatically:
-// - Fetches announcements on mount
-// - Uses cached data for instant rendering
-// - Refreshes every 5 minutes
-// - Handles platform-specific dismissals (OpenFrame vs Flamingo)
-// - Provides mobile-optimized interactions
 ```
 
-The component integrates with the announcement storage utilities and respects platform-specific configuration through the app-config system, ensuring proper data isolation between different application contexts.
+> **Note:** The component renders nothing (`null`) when no active announcement exists, when the fetch URL is unconfigured, or when the user has previously dismissed the current announcement.

package/src/components/.breadcrumb.md

@@ -1,15 +1,17 @@
-<!-- source-hash: b2961e8d88031f10470397a6791442ed -->
-A comprehensive breadcrumb navigation component built with React and TypeScript that provides accessible navigation trails with customizable separators and ellipsis handling for long paths.
+<!-- source-hash: 7dab09d7ecaf9eacb41a428d82640701 -->
+Accessible breadcrumb navigation component built with Radix UI's `Slot` primitive, providing a composable set of sub-components for rendering hierarchical navigation trails.
 
 ## Key Components
 
-- **Breadcrumb** - Main navigation container with `nav` element and breadcrumb aria-label
-- **BreadcrumbList** - Ordered list wrapper with responsive flex layout and text styling
-- **BreadcrumbItem** - Individual breadcrumb item container with inline flex layout
-- **BreadcrumbLink** - Interactive link component with hover effects and optional `asChild` prop for custom rendering
-- **BreadcrumbPage** - Current page indicator with proper ARIA attributes (non-interactive)
-- **BreadcrumbSeparator** - Visual separator between items, defaults to ChevronRight icon
-- **BreadcrumbEllipsis** - Truncation indicator using MoreHorizontal icon for long paths
+| Export | Type | Description |
+|--------|------|-------------|
+| `Breadcrumb` | `nav` wrapper | Root container with `aria-label="breadcrumb"` |
+| `BreadcrumbList` | `ol` element | Flex-wrapped ordered list of breadcrumb items |
+| `BreadcrumbItem` | `li` element | Individual breadcrumb entry wrapper |
+| `BreadcrumbLink` | `a` element | Clickable link with hover color transition; supports `asChild` for custom renderers |
+| `BreadcrumbPage` | `span` element | Non-interactive current page indicator (`aria-current="page"`) |
+| `BreadcrumbSeparator` | `li` element | Decorative separator defaulting to `ChevronRight` icon |
+| `BreadcrumbEllipsis` | `span` element | Collapsed items indicator using `MoreHorizontal` icon |
 
 ## Usage Example
 
@@ -22,9 +24,9 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-} from "./breadcrumb"
+} from "@/components/breadcrumb"
 
-function Navigation() {
+export function AppBreadcrumb() {
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -33,18 +35,20 @@ function Navigation() {
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+          <BreadcrumbEllipsis />
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbEllipsis />
+          <BreadcrumbLink href="/clients">Clients</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>Current Page</BreadcrumbPage>
+          <BreadcrumbPage>Acme Corp</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
   )
 }
-```
+```
+
+> **`asChild` pattern:** Pass `asChild` to `BreadcrumbLink` to delegate rendering to a child component (e.g., a router `Link`), forwarding all props via Radix UI's `Slot`.

package/src/components/.calendar.md

@@ -1,46 +1,51 @@
-<!-- source-hash: f3005c5dada61ba6352cbb0a2c9ba87f -->
-A React calendar component built on top of `react-day-picker` with customized styling and navigation controls for date selection interfaces.
+<!-- source-hash: f8ae158ddc696cfb68419e4860069278 -->
+A styled calendar component wrapping `react-day-picker`'s `DayPicker` with Flamingo/Tailwind design tokens and accessible navigation icons.
 
 ## Key Components
 
-- **Calendar**: Main calendar component that wraps `DayPicker` with custom styling
-- **CalendarProps**: TypeScript type extending `DayPicker` component props
-- **Custom Navigation**: Uses Lucide React chevron icons for month navigation
-- **Tailwind Classes**: Comprehensive styling for all calendar states and elements
+- **`Calendar`** — Main export; a thin wrapper around `DayPicker` that applies consistent Tailwind class names for layout, navigation, day cells, selected/range/today states, and outside-day visibility.
+- **`CalendarProps`** — Re-exported type alias for `React.ComponentProps<typeof DayPicker>`, allowing full passthrough of any `DayPicker` prop.
+- **`Chevron` override** — Replaces the default DayPicker navigation icon with `lucide-react`'s `ChevronLeft` at a fixed `h-4 w-4` size.
 
 ## Usage Example
 
 ```typescript
-import { Calendar } from "./calendar"
+import { Calendar } from "@/components/calendar"
+import { useState } from "react"
 
-// Basic calendar
-function DatePicker() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date())
+export function DatePicker() {
+  const [selected, setSelected] = useState<Date>()
 
   return (
     <Calendar
       mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
+      selected={selected}
+      onSelect={setSelected}
+      showOutsideDays={false}
     />
   )
 }
+```
+
+```typescript
+// Date range selection
+import { DateRange } from "react-day-picker"
 
-// Date range picker
-function DateRangePicker() {
-  const [range, setRange] = React.useState<DateRange | undefined>()
+export function RangePicker() {
+  const [range, setRange] = useState<DateRange>()
 
   return (
     <Calendar
       mode="range"
       selected={range}
       onSelect={setRange}
-      numberOfMonths={2}
-      showOutsideDays={false}
     />
   )
 }
 ```
 
-The component provides comprehensive styling for selected dates, today's date, disabled dates, and range selections, making it suitable for various date picking scenarios in forms and interfaces.
+## Notes
+
+- `showOutsideDays` defaults to `true`; pass `false` to hide days from adjacent months.
+- Custom `classNames` are merged via spread (`...classNames`), so individual slot styles can be overridden per instance.
+- The `Chevron` component override is cast with `as any` to satisfy DayPicker's internal component map typing.

package/src/components/.categories-cart.md

@@ -1,37 +1,42 @@
-<!-- source-hash: e9b736a7607c06a157802f282b8c1181 -->
-A React component that renders an interactive category card displaying vendor logos, category information, and navigation for the Flamingo MSP platform's vendor directory.
+<!-- source-hash: 7161864532df5559c1bd18aba5ddcb23 -->
+A clickable card component that displays a product/vendor category with its associated vendor icons, subcategory count, and product count, linking to a filtered vendor listing page.
 
 ## Key Components
 
-- **CategoriesCart**: Main component that renders a clickable category card with vendor icons, category details, and hover effects
-- **VendorIcon Integration**: Displays a grid of vendor logos with grayscale filter and fade effects
-- **Responsive Design**: Adapts layout and sizing for mobile and desktop viewports
-- **Loading States**: Shows skeleton placeholders while data is being fetched
-- **Interactive Elements**: Hover effects with color transitions and arrow navigation button
+- **`CategoriesCart`** — Main exported component accepting `RealCategoryCardProps`
+  - `category` — Category object with `slug`, `name`, and `description`
+  - `vendors` — Array of vendor objects to display as icons (default: `[]`)
+  - `vendorCount` — Total number of products in the category (default: `0`)
+  - `subcategoryCount` — Number of subcategories (default: `0`)
+  - `isLoading` — Toggles skeleton loading state (default: `false`)
+  - `className` — Optional additional CSS classes
+
+## Key Behaviors
+
+| State | Behavior |
+|-------|----------|
+| `isLoading: true` | Renders 20 animated pulse skeleton placeholders |
+| Vendors present | Renders `VendorIcon` components in grayscale/muted style |
+| No vendors | Renders 6 grey placeholder icon blocks |
+
+- Navigates to `/vendors?category={slug}` on click
+- Highlights border and arrow button in `#FFC008` (Flamingo yellow) on hover
+- Applies left/right gradient overlays to fade the vendor icon row
 
 ## Usage Example
 
 ```typescript
 import { CategoriesCart } from './categories-cart';
 
-// Basic usage with category data
 <CategoriesCart
   category={{
-    name: "Network Security",
-    slug: "network-security",
-    description: "Comprehensive security solutions for network infrastructure"
+    slug: 'rmm-tools',
+    name: 'RMM Tools',
+    description: 'Remote monitoring and management platforms for MSPs.',
   }}
-  vendors={vendorArray}
-  vendorCount={25}
-  subcategoryCount={8}
+  vendors={[{ id: '1', name: 'NinjaRMM', logo: '/logos/ninja.png' }]}
+  vendorCount={12}
+  subcategoryCount={3}
+  isLoading={false}
 />
-
-// Loading state
-<CategoriesCart
-  category={categoryData}
-  isLoading={true}
-  className="custom-spacing"
-/>
-```
-
-The component creates a hover-interactive card that links to `/vendors?category={slug}`, featuring a scrolling vendor icon grid with gradient fade effects, category statistics, and a prominent call-to-action arrow that changes color on hover.
+```

package/src/components/.checkbox.md

@@ -1,41 +1,39 @@
-<!-- source-hash: 48e893d0b953dc4ea14554f218644641 -->
-A reusable checkbox component built on Radix UI primitives with customizable styling and accessibility features.
+<!-- source-hash: ebf5d1beb048574c71be25e85338e2db -->
+Accessible checkbox component built on Radix UI's `CheckboxPrimitive`, styled with Tailwind CSS utility classes and a custom checkmark icon.
 
 ## Key Components
 
-- **`Checkbox`** - Main checkbox component with forwarded ref support
-- **`CheckboxPrimitive.Root`** - Base Radix UI checkbox primitive
-- **`CheckboxPrimitive.Indicator`** - Visual indicator container for checked state
-- **`Check`** - Lucide React icon for the checkmark visual
+- **`Checkbox`** — A forwarded-ref React component wrapping `@radix-ui/react-checkbox` with Flamingo design system styles, including focus ring, disabled state, and checked state variants.
 
 ## Usage Example
 
 ```typescript
-import { Checkbox } from "./components/ui/checkbox"
+import { Checkbox } from "@/components/checkbox"
 
 // Basic usage
-<Checkbox />
+<Checkbox id="terms" />
 
-// With custom styling
-<Checkbox className="h-6 w-6 border-2" />
+// With label and controlled state
+const [checked, setChecked] = React.useState(false)
 
-// Controlled component
-const [checked, setChecked] = useState(false)
-<Checkbox 
-  checked={checked}
-  onCheckedChange={setChecked}
-/>
+<div className="flex items-center gap-2">
+  <Checkbox
+    id="accept"
+    checked={checked}
+    onCheckedChange={setChecked}
+  />
+  <label htmlFor="accept">Accept terms and conditions</label>
+</div>
 
 // Disabled state
 <Checkbox disabled />
-
-// With form integration
-<form>
-  <div className="flex items-center space-x-2">
-    <Checkbox id="terms" />
-    <label htmlFor="terms">Accept terms and conditions</label>
-  </div>
-</form>
 ```
 
-The component automatically handles focus states, keyboard navigation, and screen reader compatibility through Radix UI primitives. The checkmark icon appears when the checkbox is in a checked state, with smooth transitions and proper color theming based on CSS custom properties.
+## Styling Highlights
+
+| State | Applied Style |
+|---|---|
+| Default | `border-primary`, `rounded-sm` |
+| Checked | `bg-primary text-primary-foreground` |
+| Focused | `ring-2 ring-ring ring-offset-2` |
+| Disabled | `cursor-not-allowed opacity-50` |

package/src/components/.chevron-button.md

@@ -1,41 +1,46 @@
-<!-- source-hash: e1bda247f65658eec261b3399f769e46 -->
-A reusable React component that renders an animated chevron button with customizable styling and expansion states, commonly used for collapsible UI elements.
+<!-- source-hash: b0e5b6389fabb9232cd48e08b608bcb8 -->
+A reusable toggle button component that renders a chevron icon with animated rotation to indicate expanded/collapsed state.
 
 ## Key Components
 
-- **`ChevronButton`** - Main component that wraps a Button with a rotating ChevronDown icon
-- **`ChevronButtonProps`** - TypeScript interface defining component props including expansion state, styling options, and event handlers
-- **Dynamic styling system** - Handles background color, border customization, and hover effects
-- **Size variants** - Supports 'sm', 'default', 'lg', and 'icon' sizing options
+### `ChevronButton`
+The primary exported component. Wraps the base `Button` with a `ChevronDown` icon that rotates 180° when `isExpanded` is `true`.
+
+### `ChevronButtonProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isExpanded` | `boolean` | `false` | Controls chevron rotation (0° → 180°) |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'icon'` | Sets button and icon dimensions |
+| `backgroundColor` | `string` | `'transparent'` | Custom background color (clears on hover) |
+| `borderColor` | `string` | `'transparent'` | Custom border color and style |
+| `className` | `string` | — | Additional Tailwind classes |
+| `onClick` | `(e: React.MouseEvent) => void` | — | Click handler |
 
 ## Usage Example
 
 ```typescript
-import { ChevronButton } from './components/chevron-button';
-
-function CollapsibleSection() {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <div className="border rounded-lg p-4">
-      <div className="flex items-center justify-between">
-        <h3>Section Title</h3>
-        <ChevronButton
-          isExpanded={isExpanded}
-          size="default"
-          backgroundColor="#f3f4f6"
-          borderColor="#d1d5db"
-          onClick={() => setIsExpanded(!isExpanded)}
-        />
-      </div>
-      {isExpanded && (
-        <div className="mt-4">
-          <p>Collapsible content here...</p>
-        </div>
-      )}
-    </div>
-  );
-}
+import { ChevronButton } from './chevron-button';
+
+// Basic expand/collapse toggle
+const [isOpen, setIsOpen] = React.useState(false);
+
+<ChevronButton
+  isExpanded={isOpen}
+  onClick={() => setIsOpen(!isOpen)}
+/>
+
+// Custom styled with border and size
+<ChevronButton
+  isExpanded={isOpen}
+  size="default"
+  backgroundColor="#1a1a2e"
+  borderColor="#FFC008"
+  onClick={() => setIsOpen(!isOpen)}
+/>
 ```
 
-The component features smooth 180-degree rotation animation when toggled, customizable hover effects that override background colors, and responsive sizing that automatically adjusts icon dimensions based on the selected size variant.
+## Behavior Notes
+
+- **Hover state**: Background color resets to `transparent` on hover regardless of `backgroundColor` prop.
+- **Rotation**: Chevron smoothly rotates via `transition-transform` when `isExpanded` toggles.
+- **Border**: Border width/style are only applied when `borderColor` is not `'transparent'`.

package/src/components/.comment-card.md

@@ -1,72 +1,42 @@
-<!-- source-hash: b7543d98f2f184984a3640db3aa7830d -->
-A React component that renders individual comment cards with user information, vendor details, and interactive features like deletion. The component adapts its layout and functionality based on context (profile vs vendor views).
+<!-- source-hash: 0b18246ba972b704769b5c9382e327c6 -->
+Renders a styled card for displaying a user comment, supporting both vendor-context (showing the commenter's identity) and profile-context (showing the associated vendor) views with optional delete functionality.
 
 ## Key Components
 
-**Main Component:**
-- `CommentCard` - Primary comment display component with responsive layout
+### `CommentCard`
+The primary exported component accepting a `CommentCardProps` object.
 
-**Key Features:**
-- **Dual Context Support** - Renders differently for 'profile' and 'vendor' contexts
-- **User Authentication** - Integrates with auth system for deletion permissions
-- **Responsive Design** - Adapts layout for different screen sizes with breakpoints
-- **Interactive Elements** - Delete button with permission checks
-- **Content Overflow Handling** - Text truncation and word breaking for long content
+**Props:**
 
-**Props Interface:**
-- `comment` - Comment data including content, metadata, and user/vendor info
-- `onViewProduct` - Callback for vendor product navigation
-- `onDeleteComment` - Callback for comment deletion
-- `showVendorInfo` - Toggle for vendor information display
-- `compact` - Compact mode for reduced spacing
-- `context` - Context mode ('profile' | 'vendor') affecting layout
+| Prop | Type | Description |
+|------|------|-------------|
+| `comment` | `object` | Comment data including content, metadata, and optional vendor/user info |
+| `onViewProduct` | `(vendorSlug: string) => void` | Callback when vendor button is clicked |
+| `onDeleteComment` | `(commentId: string) => void` | Callback when delete button is clicked |
+| `showVendorInfo` | `boolean` | Whether to display vendor information (default: `true`) |
+| `compact` | `boolean` | Reduces content area height (default: `false`) |
+| `context` | `'profile' \| 'vendor'` | Controls header layout — vendor button or user summary |
+
+### Delete Authorization Logic (`canUserDeleteComment`)
+Context-aware check: in `profile` context, relies on `comment.canDelete`; in `vendor` context, compares `currentUser.id` against `comment.user.id`.
 
 ## Usage Example
 
 ```typescript
-import { CommentCard } from './comment-card'
-
-function CommentList() {
-  const handleDeleteComment = (commentId: string) => {
-    // Delete comment logic
-    console.log('Deleting comment:', commentId)
-  }
-
-  const handleViewProduct = (vendorSlug: string) => {
-    // Navigate to product page
-    router.push(`/vendor/${vendorSlug}`)
-  }
-
-  return (
-    <div className="space-y-4">
-      <CommentCard
-        comment={{
-          id: "comment-1",
-          content: "This tool has been incredibly helpful for our MSP operations.",
-          title: "Great automation features",
-          type: "pro",
-          importance: "Important",
-          createdAt: "2024-01-15T10:30:00Z",
-          vendor: {
-            id: 1,
-            title: "ConnectWise",
-            slug: "connectwise",
-            logo: "/logos/connectwise.png"
-          },
-          user: {
-            id: "user-123",
-            name: "John Doe",
-            profilePicture: "/avatars/john.jpg"
-          },
-          canDelete: true
-        }}
-        context="profile"
-        onDeleteComment={handleDeleteComment}
-        onViewProduct={handleViewProduct}
-        showVendorInfo={true}
-        compact={false}
-      />
-    </div>
-  )
-}
+<CommentCard
+  comment={{
+    id: "abc123",
+    content: "Excellent ticketing integration with our existing stack.",
+    title: "Great RMM Tool",
+    type: "pro",
+    importance: "Critical",
+    createdAt: "2024-11-01T10:00:00Z",
+    vendor: { id: 1, title: "NinjaRMM", slug: "ninjarmm", logo: "/logos/ninja.png" },
+    canDelete: true,
+  }}
+  context="profile"
+  onViewProduct={(slug) => router.push(`/vendors/${slug}`)}
+  onDeleteComment={(id) => handleDelete(id)}
+  compact={false}
+/>
 ```