# DebtAccordion

## 2026-07-20 — Inline Add / Edit Debt form (FE parity)

**Prompted by:** Hellen Tran (PO)

### What changed
- The accordion now hosts an **inline add/edit form** in the item area (no modal / no route change), matching the real frontend loan-application flow.
- "Add {debt}" opens a blank inline form; the Edit (pencil) icon opens it pre-filled; both end with **Save & Collapse** / Cancel back to the collapsed summary row.
- Debt form fields (composed from existing primitives): amount owing, original loan amount, loan repayments + frequency (all `CurrencyInputWithSlider` / `LoanOptionGroup`), and a branch on debt type — **credit-card** shows Name of lender / Account Name / BSB / Account Number; every other type shows a single Details field. Liability ownership split (`OwnershipSplit`) shows when > 1 owner.
- Props: replaced `onAddItem`/`onEditItem` with a single `onSaveItem(debtType, item)` (item.id === "" ⇒ newly added). Added `owners`. `DebtItem` extended with the debt detail fields; new `DebtOwner` type exported.

### Why
- The previous version only rendered read-only rows; adding/editing a debt fired a no-op callback. This brings the design system to parity with the frontend's inline debt flow so the Storybook wizard is testable end-to-end.

### Affected tokens / files
- `packages/shadcn/src/components/ui/debt-accordion.tsx`
- Reuses `form-primitives.tsx` (`CurrencyInputWithSlider`, `OwnershipSplit`), `loan-option-group.tsx`, `input.tsx`.