Transfer List II

Extend the transfer list with bulk selection and the ability to add new items to either side. The state model doesn't change — still one items array with a side per item plus a selected Set — you're just adding two operations on top: a per-column "select all / none" toggle, and an append.

Signature

type Item = { id: string; label: string; side: 'left' | 'right' };

// A self-contained component. No props.
function App(): JSX.Element;

Examples

click "all" on the left → every left item is selected; click again → none
type "Svelte" + Add on the left → a new item appears in the left list

select-all toggle: allSelected ? remove all side ids : add all side ids
add: items = [...items, { id: uniqueId(), label, side }]

Notes

• Same core model. items (+side) and selected Set — bulk and add are operations over them.
• Bulk is a toggle. If all of a side's items are already selected, deselect them; otherwise select them all.
• Add needs a unique id. Generate one (counter or timestamp); don't reuse labels as ids.
• Reuse move + click-select. The arrow buttons and per-item selection are unchanged from Transfer List.