<!-- source-hash: b7d1c615d3d37a540958daff7feed5f3 -->
A reusable React component for displaying command strings in a styled monospace box with optional title and configurable action buttons.

## Key Components

### Interfaces

| Interface | Description |
|-----------|-------------|
| `CommandBoxAction` | Defines a button with `label`, `onClick`, optional `variant`, `icon`, `disabled`, and `loading` states |
| `CommandBoxProps` | Component props including `command` (required), `title`, `primaryAction`, `secondaryAction`, layout classes, and `maxLines` |

### Exports

- **`CommandBox`** — Main component rendering the command display box
- **`CommandBoxAction`** — Interface for action button configuration
- **`CommandBoxProps`** — Interface for component props

## Usage Example

```typescript
import { CommandBox } from '@flamingo/ui-kit/components/features'
import { Copy, Play } from 'lucide-react'

<CommandBox
  title="Device Add Command"
  command="curl -L https://example.com/install.sh | bash"
  maxLines={3}
  primaryAction={{
    label: 'Copy Command',
    onClick: () => navigator.clipboard.writeText(command),
    icon: <Copy className="w-5 h-5" />,
    variant: 'accent'
  }}
  secondaryAction={{
    label: 'Run on Machine',
    onClick: handleRun,
    icon: <Play className="w-5 h-5" />,
    variant: 'outline',
    loading: isRunning
  }}
/>
```

## Notes

- **Line clamping** uses a static `lineClampClasses` map (`1–6`) to ensure Tailwind generates the correct `line-clamp-*` classes at build time. Set `maxLines={0}` (default) for unlimited display.
- **Button layout** stacks vertically on mobile and aligns right horizontally on `md+` screens.
- Secondary action renders before the primary action visually, consistent with standard UI conventions.
- `variant` defaults to `'accent'` for primary and `'outline'` for secondary if not specified.