<!-- source-hash: af0402d9923c0e0c41315794a7eff4a9 -->
A client-side React component that renders a single row in a ticket status configuration UI, supporting both system-defined and custom ticket statuses with drag-and-drop reordering, color picking, and delete controls.

## Key Components

### `TicketStatusConfigRow`
The primary exported component. Renders a row containing:
- **Drag handle** — interactive for custom rows, decorative/disabled for system rows
- **Name input** — editable for custom, read-only for system rows
- **Color controls** — `ColorPresetSelect` and `ColorPickerInput` shown only for custom rows with color support
- **Live preview** — `TicketStatusTag` reflecting current name and color
- **Action button** — info tooltip icon for system rows; delete button (with optional disabled state tooltip) for custom rows

### `WithLeftTooltip` (internal)
A touch-aware tooltip wrapper that ensures only one tooltip is open at a time via a module-level `dismissOpenTooltip` ref. Renders children unchanged when no `content` is provided.

### `TicketStatusConfigRowProps`
The full props interface, key fields:

| Prop | Description |
|---|---|
| `variant` | `'system'` or `'custom'` — controls editability and available actions |
| `statusKey` | Canonical key forwarded to `TicketStatusTag` |
| `onColorChange` | Callback receiving `{ color, preset? }` |
| `dragHandleProps` / `dragHandleAttributes` | From `@dnd-kit/core` for drag-and-drop |
| `deleteDisabledReason` | Shown as tooltip when delete is disabled |
| `isDragging` | Applies visual feedback during drag |

## Usage Example

```typescript
import { TicketStatusConfigRow } from './ticket-status-config-row'

// Custom row with color picker and delete
<TicketStatusConfigRow
  variant="custom"
  statusKey="row-uuid-123"
  name={statusName}
  onNameChange={setStatusName}
  color={color}
  presetKey={preset}
  onColorChange={({ color, preset }) => {
    setColor(color)
    setPreset(preset)
  }}
  onDelete={handleDelete}
  deleteDisabled={isOnlyStatus}
  deleteDisabledReason="At least one status is required"
  dragHandleProps={listeners}
  dragHandleAttributes={attributes}
  isDragging={isDragging}
/>

// System row (read-only, no delete)
<TicketStatusConfigRow
  variant="system"
  statusKey="RESOLVED"
  name="Resolved"
  systemTooltip="Built-in status — cannot be removed"
  systemTagVariant="outline"
/>
```

## Source

[`ticket-status-config-row.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ticket-status-config-row.tsx)