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

package/src/components/features/board/.index.md

@@ -0,0 +1,56 @@
+<!-- source-hash: 173932afe7ff44448182cb23b63b5547 -->
+Client-side barrel export file for the Board UI component library, exposing all public components, hooks, utilities, and TypeScript types for the Kanban-style ticket board feature.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `Board` / `BoardProps` | Component | Root board container |
+| `BoardColumn` / `BoardColumnProps` | Component | Individual board column |
+| `BoardColumnHeader` / `BoardColumnHeaderProps` | Component | Column header with title/actions |
+| `TicketCard` / `TicketCardProps` | Component | Draggable ticket card |
+| `TicketCardSkeleton` / `TicketCardSkeletonProps` | Component | Loading placeholder for ticket cards |
+| `useBoardCollapse` | Hook | Manages column collapse/expand state |
+| `BoardCollapseMap` / `UseBoardCollapseReturn` | Types | Collapse hook type contracts |
+| `tintOnDark` | Utility | Color tinting helper for dark backgrounds |
+| `columnFromTicketStatus` | Utility | Maps ticket status to board column |
+| `groupTicketsByStatus` | Utility | Groups ticket arrays by their status |
+| `BoardChange`, `BoardColumnDef`, `BoardPriority`, `BoardTicket`, `BoardTicketAssignee` | Types | Core board domain types |
+
+## Usage Example
+
+```typescript
+import {
+  Board,
+  BoardColumn,
+  BoardColumnHeader,
+  TicketCard,
+  useBoardCollapse,
+  groupTicketsByStatus,
+} from '@/components/board'
+import type { BoardTicket, BoardColumnDef } from '@/components/board'
+
+const columns: BoardColumnDef[] = [
+  { id: 'open', label: 'Open' },
+  { id: 'in_progress', label: 'In Progress' },
+  { id: 'closed', label: 'Closed' },
+]
+
+export function TicketBoard({ tickets }: { tickets: BoardTicket[] }) {
+  const { collapseMap, toggle } = useBoardCollapse()
+  const grouped = groupTicketsByStatus(tickets)
+
+  return (
+    <Board>
+      {columns.map((col) => (
+        <BoardColumn key={col.id} collapsed={collapseMap[col.id]}>
+          <BoardColumnHeader column={col} onToggle={() => toggle(col.id)} />
+          {grouped[col.id]?.map((ticket) => (
+            <TicketCard key={ticket.id} ticket={ticket} />
+          ))}
+        </BoardColumn>
+      ))}
+    </Board>
+  )
+}
+```

package/src/components/features/board/.ticket-card-skeleton.md

@@ -0,0 +1,38 @@
+<!-- source-hash: 1103dbd0890929bf5922563df098f12b -->
+Loading state placeholder component that renders an animated skeleton UI mimicking the structure of a ticket card while content is being fetched.
+
+## Key Components
+
+- **`TicketCardSkeleton`** — A `forwardRef` component that renders a structured skeleton layout matching the ticket card's visual hierarchy:
+  - Title placeholder (3/4 width bar)
+  - Subtitle row with icon and text placeholders
+  - Action area with icon and avatar placeholders
+  - Badge/tag row at the bottom
+
+- **`TicketCardSkeletonProps`** — Extends `React.HTMLAttributes<HTMLDivElement>`, accepting all standard div props plus an optional `className` for style overrides.
+
+## Usage Example
+
+```typescript
+import { TicketCardSkeleton } from '@/components/tickets/ticket-card-skeleton'
+
+// Basic loading state
+function TicketList({ isLoading, tickets }) {
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <TicketCardSkeleton key={i} />
+        ))}
+      </div>
+    )
+  }
+
+  return tickets.map(ticket => <TicketCard key={ticket.id} {...ticket} />)
+}
+
+// With custom className
+<TicketCardSkeleton className="opacity-50" />
+```
+
+> **Note:** This component uses ODS design tokens (`--spacing-system-*`, `ods-border`, `ods-bg`) and the shared `Skeleton` primitive for consistent pulse animation across the Flamingo UI. Pair it directly with `TicketCard` to ensure visual dimensions match during loading transitions.

package/src/components/features/board/.ticket-card.md

@@ -0,0 +1,47 @@
+<!-- source-hash: 5c7fae07590f9209605f37d7b88636f3 -->
+Draggable kanban ticket card component for board views, supporting drag-and-drop via `@dnd-kit/sortable`, priority indicators, assignee avatars, device info, and tag display.
+
+## Key Components
+
+### `TicketCard`
+Main card component with three render modes:
+- **Overlay** – rendered during active drag (slight rotation, shadow)
+- **Link** – wraps content in a Next.js `<Link>` when `href` is provided
+- **Button** – falls back to a `<button>` for click-only interaction
+
+### `TicketTagRow` *(internal)*
+Renders up to `MAX_VISIBLE_TAGS` (2) tags with an overflow count badge (e.g. `+3`).
+
+### `PRIORITY_COLOR_CLASS`
+Maps `BoardPriority` values (`low`, `medium`, `high`, `urgent`) to ODS color tokens for the priority flag icon.
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `ticket` | `BoardTicket` | Ticket data to display |
+| `columnId` | `string` | Parent column ID, passed to sortable context |
+| `href` | `string?` | If set, card navigates on click |
+| `isOverlay` | `boolean` | Drag overlay mode (disables sortable refs) |
+| `dragDisabled` | `boolean?` | Disables dnd-kit drag handling |
+| `renderAssignSlot` | `(ticket) => ReactNode` | Custom assignee slot renderer |
+
+## Usage Example
+
+```typescript
+import { TicketCard } from './ticket-card'
+
+<TicketCard
+  ticket={{
+    id: 'TKT-001',
+    title: 'VPN not connecting',
+    priority: 'high',
+    tags: ['network', 'vpn'],
+    assignees: [{ id: 'u1', name: 'Alice', initials: 'AL' }],
+    deviceHostnames: ['workstation-42'],
+    organizationName: 'Acme Corp',
+  }}
+  columnId="in-progress"
+  href="/tickets/TKT-001"
+/>
+```

package/src/components/features/board/.types.md

@@ -0,0 +1,45 @@
+<!-- source-hash: 17f22ebd29735a4ef28b5782559c367e -->
+Defines the core data types and utility functions for the Kanban-style ticket board, including column definitions, ticket shapes, and helpers for mapping ticket statuses to board columns.
+
+## Key Components
+
+### Types
+
+| Type | Description |
+|------|-------------|
+| `BoardPriority` | Union type for ticket priority levels: `low`, `medium`, `high`, `urgent` |
+| `BoardTicketAssignee` | Assignee shape with optional avatar, initials, and name |
+| `BoardTicket` | Core ticket shape with status, priority, assignees, tags, and device info |
+| `BoardColumnDef` | Column definition including tickets, loading states, and drag/drop controls |
+| `BoardChange` | Represents a ticket move event between columns with ordering context |
+
+### Functions
+
+| Function | Description |
+|----------|-------------|
+| `columnFromTicketStatus` | Creates a `BoardColumnDef` from a `TicketStatus` with optional overrides |
+| `groupTicketsByStatus` | Buckets a flat ticket array into ordered columns by status |
+| `canonicalize` (internal) | Normalizes raw status strings to `TicketStatus`, including legacy `ACTION_REQUIRED → TECH_REQUIRED` mapping |
+
+## Usage Example
+
+```typescript
+import { groupTicketsByStatus, columnFromTicketStatus } from './types'
+
+// Group tickets into columns for the board
+const columns = groupTicketsByStatus(tickets, [
+  'ACTIVE',
+  'TECH_REQUIRED',
+  'ON_HOLD',
+  'RESOLVED',
+])
+
+// Build a single column with custom label and loading state
+const activeColumn = columnFromTicketStatus('ACTIVE', activeTickets, {
+  label: 'In Progress',
+  isLoadingMore: true,
+  total: 42,
+})
+```
+
+> `canonicalize` handles legacy status values automatically — `ACTION_REQUIRED` from older API responses is silently mapped to `TECH_REQUIRED` before bucketing.

package/src/components/features/board/.use-board-collapse.md

@@ -0,0 +1,34 @@
+<!-- source-hash: a1e52401ac78c99d8f31dd0b7b35996a -->
+Manages board column collapse state, supporting both persistent (localStorage) and in-memory storage modes depending on whether a `storageKey` is provided.
+
+## Key Components
+
+- **`BoardCollapseMap`** — Type alias for `Record<string, boolean>` mapping column IDs to their collapsed state
+- **`UseBoardCollapseReturn`** — Interface defining the hook's return shape
+- **`useBoardCollapse(storageKey?)`** — Main hook that initializes collapse state either in localStorage (when `storageKey` is given) or in component memory
+
+## Usage Example
+
+```typescript
+// Persistent collapse state (survives page refresh)
+const { collapsed, toggle, setCollapsed } = useBoardCollapse('my-board-key')
+
+// In-memory only (resets on unmount)
+const { collapsed, toggle, setCollapsed } = useBoardCollapse()
+
+// Toggle a column's collapsed state
+toggle('column-id-123')
+
+// Explicitly set a column's collapsed state
+setCollapsed('column-id-123', true)
+
+// Read current state
+const isCollapsed = collapsed['column-id-123'] // boolean | undefined
+```
+
+## Behavior Notes
+
+- When `storageKey` is provided, state is persisted via `useLocalStorage` and survives page reloads
+- When omitted, state lives in React `useState` and is scoped to the component's lifecycle
+- Both `toggle` and `setCollapsed` are memoized with `useCallback` to prevent unnecessary re-renders
+- Uses a fallback key `__board_collapse_unused__` internally to satisfy the `useLocalStorage` hook's required argument when no `storageKey` is given

package/src/components/features/notifications/.index.md

@@ -0,0 +1,57 @@
+<!-- source-hash: ec818e1d65048d1eb76277abcc10c0b6 -->
+Public API barrel file for the notifications module, re-exporting all components, hooks, context providers, and TypeScript types from their respective source files.
+
+## Key Components
+
+| Export | Type | Source |
+|--------|------|--------|
+| `NotificationsProvider` | Component | `notifications-context` |
+| `useNotifications` | Hook | `notifications-context` |
+| `useOptionalNotifications` | Hook | `notifications-context` |
+| `NotificationDrawer` | Component | `notification-drawer` |
+| `NotificationTile` | Component | `notification-tile` |
+| `Notification` | Type | `types` |
+| `NotificationVariant` | Type | `types` |
+| `AddNotificationInput` | Type | `types` |
+
+## Usage Example
+
+```typescript
+import {
+  NotificationsProvider,
+  useNotifications,
+  NotificationDrawer,
+  NotificationTile,
+} from '@/notifications'
+
+import type {
+  Notification,
+  NotificationVariant,
+  AddNotificationInput,
+} from '@/notifications'
+
+// Wrap your app with the provider
+function App() {
+  return (
+    <NotificationsProvider>
+      <NotificationDrawer />
+      <MainContent />
+    </NotificationsProvider>
+  )
+}
+
+// Consume notifications in a child component
+function MainContent() {
+  const { addNotification } = useNotifications()
+
+  const notify = () => {
+    const input: AddNotificationInput = {
+      variant: 'success' as NotificationVariant,
+      message: 'Operation completed successfully',
+    }
+    addNotification(input)
+  }
+
+  return <button onClick={notify}>Notify</button>
+}
+```

package/src/components/features/notifications/.notification-drawer.md

@@ -0,0 +1,34 @@
+<!-- source-hash: b78c3c40a3c3824dbca516563b5aef06 -->
+A right-side drawer component that displays unread notifications, a "Complete All" action, a pop-up toggle, and a history navigation button — consuming context from `useOptionalNotifications`.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `NotificationDrawer` | Component | Main drawer shell; renders only when notifications context is available |
+| `EmptyState` | Internal Component | Shown when there are no unread notifications |
+| `ShowNotificationsToggleRow` | Internal Component | Switch to enable/disable pop-up notification banners |
+| `NotificationsHistoryButton` | Internal Component | Outline button that navigates to notification history and closes the drawer |
+| `NotificationDrawerProps` | Interface | `className` and optional `liveDurationMs` for tile animations |
+
+## Usage Example
+
+```typescript
+import { NotificationDrawer } from './notification-drawer'
+import { NotificationsProvider } from './notifications-context'
+
+// Wrap your app (or layout) with the provider, then drop the drawer anywhere:
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <NotificationsProvider
+      notifications={notifications}
+      onHistoryClick={() => router.push('/notifications/history')}
+    >
+      {children}
+      <NotificationDrawer liveDurationMs={5000} />
+    </NotificationsProvider>
+  )
+}
+```
+
+> **Note:** `NotificationDrawer` returns `null` when rendered outside a `NotificationsProvider`. Open/close state is fully managed through the context — use the `open`/`close` methods exposed by `useOptionalNotifications` to control visibility from elsewhere in the UI.

package/src/components/features/notifications/.notification-tile.md

@@ -0,0 +1,39 @@
+<!-- source-hash: bd12c42181c375131ca22d95cc9d9e24 -->
+A self-contained notification tile component that renders a single notification with live/settled state management, auto-dismiss timing, and a progress bar animation.
+
+## Key Components
+
+- **`NotificationTileProps`** — Interface defining the tile's configuration:
+  - `notification` — The `Notification` object to display
+  - `liveDurationMs` — Auto-settle duration in ms (default: `4000`)
+  - `onComplete` — Callback fired when the user marks the notification as done
+  - `onSettle` — Callback fired when the notification auto-dismisses or is manually closed
+
+- **`NotificationTile`** — Main exported component that:
+  - Determines `isLive` state based on `read`, `settled`, and elapsed time since `createdAt`
+  - Uses a `useEffect` timer to auto-call `onSettle` after the remaining live duration
+  - Shows a dismiss (`XmarkIcon`) button while live, swapping to a complete (`CheckCircleIcon`) button once settled
+  - Renders a CSS progress bar (`toast-progress` animation) anchored to `liveDurationMs` with a negative `animationDelay` to account for already-elapsed time
+
+## Usage Example
+
+```typescript
+import { NotificationTile } from './notification-tile'
+
+const notification = {
+  id: 'notif-1',
+  variant: 'success',
+  title: 'Ticket resolved',
+  description: 'Ticket #4821 has been closed.',
+  createdAt: Date.now(),
+  read: false,
+  settled: false,
+}
+
+<NotificationTile
+  notification={notification}
+  liveDurationMs={5000}
+  onComplete={(id) => markComplete(id)}
+  onSettle={(id) => settleNotification(id)}
+/>
+```

package/src/components/features/notifications/.notifications-context.md

@@ -0,0 +1,73 @@
+<!-- source-hash: c21d20125d1c832d1265f5a500b7053e -->
+React context provider managing in-app notification state, including add, read, settle, remove, and panel open/close operations via a reducer pattern.
+
+## Key Components
+
+### `NotificationsProvider`
+Wraps your app (or a subtree) to supply notification state. Uses `useReducer` for immutable state transitions and `useCallback`/`useMemo` for stable references.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialNotifications` | `Notification[]` | `[]` | Seed the store on mount |
+| `maxNotifications` | `number` | `50` | Hard cap; oldest entries are trimmed |
+| `defaultShowPopups` | `boolean` | `true` | Initial popup visibility |
+| `onShowPopupsChange` | `(v: boolean) => void` | — | Callback on popup toggle |
+| `onHistoryClick` | `() => void` | — | Callback for "view history" action |
+
+### `useNotifications`
+Primary hook — throws if called outside the provider.
+
+### `useOptionalNotifications`
+Safe hook — returns `null` instead of throwing; useful for components that optionally participate in the notification system.
+
+### `reducer`
+Pure state reducer handling: `add`, `markRead`, `markAllRead`, `markSettled`, `remove`, `clear`.
+
+## Usage Example
+
+```typescript
+import { NotificationsProvider, useNotifications } from './notifications-context'
+
+// 1. Wrap your app
+export default function App() {
+  return (
+    <NotificationsProvider maxNotifications={100} defaultShowPopups={true}>
+      <Dashboard />
+    </NotificationsProvider>
+  )
+}
+
+// 2. Consume in any child component
+function Dashboard() {
+  const { addNotification, unreadCount, markAllRead, toggle } = useNotifications()
+
+  const notify = () =>
+    addNotification({
+      title: 'Ticket Updated',
+      description: 'Ticket #1042 was resolved by Mingo AI.',
+      color: 'success',
+    })
+
+  return (
+    <>
+      <button onClick={notify}>Trigger</button>
+      <button onClick={toggle}>Inbox ({unreadCount})</button>
+      <button onClick={markAllRead}>Mark all read</button>
+    </>
+  )
+}
+```
+
+## Context Value Reference
+
+| Method / Property | Description |
+|---|---|
+| `notifications` | Full ordered array, newest first |
+| `unreadCount` | Derived count of unread items |
+| `isOpen` | Panel open state |
+| `addNotification(input)` | Adds entry, returns generated `id` |
+| `markSettled(id)` | Marks a notification as acted upon (e.g. hides progress) |
+| `open / close / toggle` | Control panel visibility |
+| `setShowPopups(bool)` | Toggle toast popups globally |

package/src/components/features/notifications/.types.md

@@ -0,0 +1,45 @@
+<!-- source-hash: 30636d800aad270ef8c49d64c5fe172d -->
+Defines TypeScript types for the notification system, including variant styles, notification shape, and input for creating new notifications.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `NotificationVariant` | `type` | Union type for notification styles: `default`, `success`, `warning`, `error`, `info` |
+| `Notification` | `interface` | Full notification object shape including metadata and state |
+| `AddNotificationInput` | `type` | Partial input type for creating notifications, omitting auto-generated fields |
+
+## Usage Example
+
+```typescript
+import type { Notification, AddNotificationInput, NotificationVariant } from './types'
+
+// Creating a new notification input
+const input: AddNotificationInput = {
+  variant: 'success',
+  title: 'Ticket Resolved',
+  description: 'Issue #1042 has been closed successfully.',
+  meta: { ticketId: '1042' }
+}
+
+// Full notification object (after system assigns id, createdAt, etc.)
+const notification: Notification = {
+  id: 'notif-abc123',
+  variant: 'error',
+  title: 'Connection Failed',
+  description: 'Unable to reach the RMM agent.',
+  createdAt: Date.now(),
+  read: false,
+  settled: false,
+  meta: { agentId: 'agent-007' }
+}
+
+// Using the variant type directly
+const variant: NotificationVariant = 'warning'
+```
+
+## Notes
+
+- `title` and `description` accept `ReactNode`, allowing rich content (strings, JSX elements).
+- `AddNotificationInput` makes `id` and `createdAt` optional, allowing the system to auto-generate them.
+- `meta` is an open-ended `Record<string, unknown>` for attaching arbitrary contextual data.

package/src/components/icons/.about-icon.md

@@ -1,40 +1,32 @@
-<!-- source-hash: 30508e6a020756269fa301de008c0e0d -->
-A React component that renders a customizable information/question mark icon using SVG, typically used for "About" sections or help indicators.
+<!-- source-hash: 054b79bb04cd65f7f1ce6ca872c8e022 -->
+A deprecated SVG icon component rendering a circular "about/info" (question mark) symbol.
 
 ## Key Components
 
-- **AboutIcon**: Main functional component that renders an SVG icon
-- **AboutIconProps**: TypeScript interface defining optional props for customization:
-  - `width` - Icon width in pixels (default: 24)
-  - `height` - Icon height in pixels (default: 24) 
-  - `className` - CSS classes for styling
-  - `color` - Fill color for the icon (default: 'white')
+| Export | Type | Description |
+|--------|------|-------------|
+| `AboutIcon` | React Component | Renders a 24×24 SVG info/question mark icon |
+| `AboutIconProps` | Interface | Props for controlling icon dimensions, styling, and color |
 
-The component renders a circular icon with an information symbol (question mark with dot) commonly used in user interfaces to indicate help or additional information.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | `24` | SVG width in pixels |
+| `height` | `number` | `24` | SVG height in pixels |
+| `className` | `string` | `""` | CSS class for custom styling |
+| `color` | `string` | `"white"` | Fill color for the icon path |
 
 ## Usage Example
 
 ```typescript
 import { AboutIcon } from './about-icon';
 
-// Basic usage with defaults
+// Default usage
 <AboutIcon />
 
-// Customized size and color
-<AboutIcon 
-  width={32} 
-  height={32} 
-  color="#007bff" 
-  className="hover:opacity-80" 
-/>
-
-// Large blue icon for help section
-<AboutIcon 
-  width={48} 
-  height={48} 
-  color="#1e40af" 
-  className="cursor-pointer transition-colors" 
-/>
-```
-
-The icon uses a 24x24 viewBox and scales proportionally based on the provided width and height props, making it suitable for various UI contexts from navigation bars to help tooltips.
+// Custom size and color
+<AboutIcon width={32} height={32} color="#FFC008" className="ml-2" />
+```

package/src/components/icons/.ai-robot-icon.md

@@ -1,30 +1,28 @@
-<!-- source-hash: 3aeea0c6fafccc25d60ac429911ef2f0 -->
-A React SVG icon component that renders a stylized AI robot with customizable color and styling.
+<!-- source-hash: 22c04bab85b8575100d749b55f72026c -->
+Renders a customizable AI robot SVG icon as a React functional component.
 
 ## Key Components
 
-- **AiRobotIcon**: Main React functional component that renders an SVG robot icon
-- **AiRobotIconProps**: TypeScript interface defining optional `className` and `color` props
-- **SVG Path**: Single path element defining the robot's outline with head antenna, rectangular body, circular eyes, and side arms
+- **`AiRobotIconProps`** — Interface accepting optional `className` (string) and `color` (string) props
+- **`AiRobotIcon`** — Deprecated React FC rendering a 200×200 SVG robot icon with configurable stroke color
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { AiRobotIcon } from './ai-robot-icon'
 
-// Basic usage with default pink color
+// Default pink color
 <AiRobotIcon />
 
-// Custom styling and color
-<AiRobotIcon 
-  className="w-16 h-16 hover:opacity-80" 
-  color="#00ff00" 
-/>
-
-// In a button or interactive element
-<button className="p-2 rounded-lg bg-gray-100">
-  <AiRobotIcon className="w-8 h-8" color="#333" />
-</button>
+// Custom color and class
+<AiRobotIcon color="#FFC008" className="w-8 h-8" />
 ```
 
-The icon uses a 200x200 viewBox with stroke-based rendering, making it scalable and suitable for various UI contexts. The default magenta color (`#f357bb`) can be overridden, and additional CSS classes can be applied for responsive sizing and hover effects.
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class applied to the `<svg>` element |
+| `color` | `string` | `#f357bb` | Stroke color of the robot icon paths |

package/src/components/icons/.bash-icon.md

@@ -1,36 +1,29 @@
-<!-- source-hash: cee244200c0cea007d2394b5537b6c0d -->
-A React SVG icon component that renders a Bash/shell terminal symbol with customizable styling properties.
+<!-- source-hash: ec4645ac7d5fe8499469ecd03cdd9e67 -->
+Renders a Bash shell SVG icon as a React functional component. This component is **deprecated** and should be replaced with icons from the `icons-v2-generated` package.
 
 ## Key Components
 
-- **BashIconProps** - TypeScript interface defining the component's props:
-  - `size?: number` - Icon dimensions (default: 16px)
-  - `className?: string` - CSS classes for styling
-  - `color?: string` - Fill color (default: 'white')
-
-- **BashIcon** - Main React functional component that renders an SVG icon representing a Bash terminal or hashtag symbol
+- **`BashIconProps`** — Interface defining optional props: `size`, `className`, and `color`
+- **`BashIcon`** — Deprecated React FC that renders a 24×24 viewBox SVG representing the Bash shell icon
 
 ## Usage Example
 
 ```typescript
 import { BashIcon } from './bash-icon'
 
-// Basic usage with defaults
+// Default usage (16px, white)
 <BashIcon />
 
-// Customized icon
-<BashIcon 
-  size={24} 
-  color="#00ff00" 
-  className="terminal-icon" 
-/>
-
-// Large icon for headers
-<BashIcon 
-  size={32} 
-  color="currentColor" 
-  className="text-blue-500" 
-/>
+// Custom size and color
+<BashIcon size={24} color="#4CAF50" className="my-icon" />
 ```
 
-The component uses a 24x24 viewBox and scales proportionally based on the `size` prop. The SVG path creates a hashtag-like symbol commonly associated with shell/terminal interfaces. The `displayName` is set for better debugging in React DevTools.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead of this component.
+
+## Default Props
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `size` | `16` | Width and height in pixels |
+| `color` | `"white"` | SVG fill color |
+| `className` | `""` | Additional CSS classes |