<!-- source-hash: a38e5427737fa8905946762e9d50beed -->
Manages a dynamic list of script arguments as editable key-value pairs, allowing users to add, modify, and delete entries through a controlled form interface.

## Key Components

### Interfaces

| Interface | Description |
|-----------|-------------|
| `ScriptArgument` | Represents a single argument with `id`, `key`, and `value` fields |
| `ScriptArgumentsProps` | Props for the component including arguments array, change callbacks, and display options |

### Component

**`ScriptArguments`** — A controlled React component that renders a vertically stacked list of key-value input rows. Each row contains:
- A **key input** (with label shown only on the first row)
- A **value input** (placeholder indicates empty = flag-type argument)
- A **delete button** (`Trash2` icon) to remove the row

An **"Add Script Argument"** button appends a new empty entry using `crypto.randomUUID()` for unique IDs.

## Usage Example

```typescript
import { ScriptArguments, ScriptArgument } from './ScriptArguments'

const [args, setArgs] = useState<ScriptArgument[]>([
  { id: '1', key: 'port', value: '3000' },
  { id: '2', key: 'verbose', value: '' }, // empty value = flag
])

<ScriptArguments
  titleLabel="Argument"
  arguments={args}
  onArgumentsChange={setArgs}
  keyPlaceholder="Enter Key"
  valuePlaceholder="Enter Value (empty=flag)"
  addButtonLabel="Add Script Argument"
  disabled={false}
/>
```

### Prop Defaults

| Prop | Default |
|------|---------|
| `keyPlaceholder` | `'Enter Key'` |
| `valuePlaceholder` | `'Enter Value (empty=flag)'` |
| `addButtonLabel` | `'Add Script Argument'` |
| `disabled` | `false` |