Daftar Reaktif Berkunci — v1.3.1

---
judul: "Daftar Reaktif Berkunci — v1.3.1"
---

Gaya:
    body
        font-family: 'Inter', system-ui, -apple-system, sans-serif
        margin: 0
        min-height: 100vh
        display: flex
        align-items: center
        justify-content: center
        background: #0f0c29
        color: #e0e0e0
    .card
        background: #17162b
        border: 1px solid #2a2a45
        border-radius: 20px
        padding: 36px
        width: 440px
        box-shadow: 0 20px 50px rgba(0,0,0,0.4)
    .card h1
        margin: 0 0 4px
        font-size: 1.4rem
        font-weight: 800
        color: #7dd3fc
    .card p.sub
        margin: 0 0 24px
        font-size: 0.85rem
        color: #64748b
    .toolbar
        display: flex
        gap: 8px
        margin-bottom: 20px
    .toolbar button
        flex: 1
        padding: 10px
        border: 1px solid #2a2a45
        border-radius: 10px
        background: #1f1e38
        color: #e0e0e0
        font-size: 0.85rem
        font-weight: 600
        cursor: pointer
    .toolbar button:hover
        background: #2a2846
    .row
        display: flex
        align-items: center
        justify-content: space-between
        padding: 12px 16px
        margin-bottom: 8px
        background: #1f1e38
        border: 1px solid #2a2a45
        border-radius: 10px
    .row .name
        font-weight: 600
    .row .id
        font-size: 0.75rem
        color: #64748b
    .note
        margin-top: 20px
        font-size: 0.75rem
        color: #475569
        line-height: 1.6

Halaman KeyedList:
    data barisan = []

    Buat div.card:
        Buat h1: $judul
        Buat p.sub: "Keyed diff (Opsi B) atas node DOM asli — tanpa Virtual DOM."

        Buat div.toolbar:
            Buat tombol#tambah: "Tambah"
                on_klik = tambahkan { id: panjang($barisan) + 1, nama: "Item" } ke barisan
            Buat tombol#kosong: "Kosongkan"
                on_klik = simpan [] ke barisan

        -- Daftar reaktif BERKUNCI: node dipakai ulang saat urutan berubah.
        -- "dengan kunci baris.id" mengaktifkan keyed diff (Map kunci ke node).
        -- Menghapus item di tengah pun tetap mempertahankan node item lain.
        Ulangi untuk baris dari $barisan dengan kunci baris.id:
            Buat div.row:
                Buat span.name: baris.nama
                Buat span.id: baris.id
                Buat tombol.del: "✕"
                    on_klik = hapus baris dari barisan

        Buat p.note: "Sumber reaktif (data) → daftar dirender ulang otomatis. Dengan kunci, item yang kuncinya sama dipakai ulang (insertBefore) alih-alih dibangun ulang, sehingga fokus & animasi tetap stabil."