A unified React component for displaying command strings with optional action buttons, monospace formatting, and configurable line clamping. ## Key Components ### Interfaces - **`CommandBoxAction`** — Defines a button's `label`, `onClick` handler, optional `variant` (`accent` | `outline` | `transparent` | `destructive`), `icon`, `disabled`, and `loading` states. - **`CommandBoxProps`** — Component props including `command` (required), `title`, `primaryAction`, `secondaryAction`, `className`, `commandClassName`, and `maxLines`. ### Exports - **`CommandBox`** — Main component rendering a styled command display area with up to two action buttons (primary stacked right, secondary before primary). Supports responsive flex layout (`flex-col` → `md:flex-row`). ## Usage Example ```typescript import { CommandBox } from '@flamingo/ui-kit/components/features' import { Copy, Play } from 'lucide-react' navigator.clipboard.writeText(command), icon: , variant: 'accent', }} secondaryAction={{ label: 'Run on Current Machine', onClick: handleRun, icon: , variant: 'outline', loading: isRunning, }} /> ``` ## Notes - **Line clamping** uses a static `lineClampClasses` map (`1`–`6`) to satisfy Tailwind's build-time static class requirement. Set `maxLines={0}` (default) for unlimited display. - Button variants default to `accent` for primary and `outline` for secondary if not specified. - Source: [`command-box.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/command-box.tsx)