Validación de React Islands con shadcn/ui

1. client:load — LoadIsland (Button interactivo)

Se hidrata inmediatamente al cargar la página.

Count: 0

2. client:visible — VisibleIsland (Card + Input)

Se hidrata cuando entra en el viewport.

Búsqueda

3. client:idle — LoadIsland (carga en idle)

Se hidrata cuando el navegador está inactivo.

Count: 0

4. client:only="react" — VisibleIsland (sin SSR)

No genera HTML en servidor; solo se renderiza en el cliente.

5. nanostores — Estado compartido entre islands independientes

CounterIsland y DisplayIsland son árboles React independientes que comparten estado via nanostore.

Island 1: Contador

Counter: 0

Island 2: Display

Display: 0