<!-- source-hash: 7aa67860b1ab611a656cba5c50d1632b -->
Manages a dynamic list of script arguments as editable key-value pairs, with support for adding and removing entries.

## Key Components

### Interfaces

- **`ScriptArgument`** — Represents a single argument with `id`, `key`, and `value` fields. Empty `value` strings indicate flag-type arguments.
- **`ScriptArgumentsProps`** — Component props including the arguments array, change callbacks, placeholder text overrides, disabled state, and a required `titleLabel`.

### Component

- **`ScriptArguments`** — Renders a vertically stacked list of key/value input rows. The column label appears only on the first row. Each row includes a delete button (trash icon); an "Add Script Argument" button appends a new blank entry using `crypto.randomUUID()`.

### Internal Handlers

| Handler | Description |
|---|---|
| `handleKeyChange` | Updates the `key` field for a given argument `id` |
| `handleValueChange` | Updates the `value` field for a given argument `id` |
| `handleDelete` | Removes an argument by `id` |
| `handleAdd` | Appends a new blank `ScriptArgument` |

## Usage Example

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

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

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

> **Note:** All mutation callbacks (`onArgumentsChange`) are no-ops when omitted, making the component safe to render in read-only contexts without extra guards.