Keyed lists

import { signal } from '@zidomjs/core';import { For } from '@zidomjs/dom';interface Task {  id: number;  name: string;}export default function ListsDemo() {  const tasks = signal<Task[]>([    { id: 1, name: 'Read the guide' },    { id: 2, name: 'Try a signal' },    { id: 3, name: 'Build with Zidom' }  ]);  const nextId = signal(4);  return (    <div className="example-card">      <p>Stable keys keep row DOM identity when the order changes.</p>      <ul className="demo-list">        <For each={tasks} by={task => task.id}>          {(task, index) => (            <li>              <span>{() => `${index.value + 1}. ${task.value.name}`}</span>              <button                aria-label={() => `Remove ${task.value.name}`}                onClick={() => {                  tasks.value = tasks.value.filter(                    item => item.id !== task.value.id                  );                }}              >                Remove              </button>            </li>          )}        </For>      </ul>      <div className="demo-actions">        <button onClick={() => (tasks.value = [...tasks.value].reverse())}>          Reverse        </button>        <button          onClick={() => {            const id = nextId.value++;            tasks.value = [...tasks.value, { id, name: `New task ${id}` }];          }}        >          Add task        </button>      </div>    </div>  );}