# Quickstart: Inline HP Delta Input

## What changes

One file: `apps/web/src/components/quick-hp-input.tsx`

The QuickHpInput component is refactored from a mode-toggle design to an explicit-button design:

**Before** (011-quick-hp-input):
- Mode toggle button (Sword/Heart icon) + numeric input
- User switches mode, then types number, then presses Enter
- Mode state determines whether delta is positive or negative

**After** (014-inline-hp-delta):
- Numeric input + damage button (Sword) + heal button (Heart)
- Enter key always applies damage (negative delta)
- Damage button applies damage (negative delta)
- Heal button applies healing (positive delta)
- No mode state

## How to implement

1. Remove the `mode` state variable and the toggle button
2. Replace with two action buttons (damage + heal) alongside the input
3. Enter key handler calls `onAdjustHp(combatantId, -n)` (always damage)
4. Damage button calls `onAdjustHp(combatantId, -n)`
5. Heal button calls `onAdjustHp(combatantId, +n)`
6. Remove Tab key override (restore default browser behavior)
7. Clear input after any successful apply

## How to verify

```bash
pnpm check    # Must pass (knip + format + lint + typecheck + test)
```

Manual verification:
1. Set a combatant's max HP to 20 (currentHp initializes to 20)
2. Type 7 in the delta input, press Enter → HP should show 13
3. Type 5 in the delta input, click heal button → HP should show 18
4. Type 3 in the delta input, click damage button → HP should show 15
5. Verify input clears after each action
6. Verify no mode toggle exists in the UI