Only what
changes.

import { signal, computed } from '@zidomjs/core';export default function CounterDemo() {  const count = signal(0);  const doubled = computed(() => count.value * 2);  return (    <div className="example-card">      <p>Click to update a single bound text node.</p>      <div className="demo-number">{count}</div>      <p>        Computed double: <strong>{doubled}</strong>      </p>      <div className="demo-actions">        <button onClick={() => count.value--}>−</button>        <button onClick={() => (count.value = 0)}>Reset</button>        <button onClick={() => count.value++}>+</button>      </div>    </div>  );}

import { signal } from '@zidomjs/core';export default function ConditionalDemo() {  const connected = signal(false);  return (    <div className="example-card">      <button onClick={() => (connected.value = !connected.value)}>        Toggle connection      </button>      <div className="demo-output">        {() =>          connected.value ? (            <p role="status">Connected. This branch is mounted.</p>          ) : (            <p role="status">Disconnected. The previous branch was disposed.</p>          )}      </div>    </div>  );}

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>  );}