# yunuseeeeeeee/yunze-kovan architecture

> Architecture diagram of the GitHub repository yunuseeeeeeee/yunze-kovan, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yunuseeeeeeee/yunze-kovan
- Repository: https://github.com/yunuseeeeeeee/yunze-kovan

## Overview

Yunze Kovan is a small browser library for coordinating same-origin tabs as one app. Application code creates a named hive; tabs discover peers over BroadcastChannel, elect a leader, and synchronize shared state. The leader can run leader-only work and handle requests from other tabs, while events reach all tabs. The runtime behavior is implemented in both the ES module and UMD entry point; the sampled source shows these capabilities within a single implementation, not separate internal modules.

Main entry points: [`index.mjs`](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs) (Hive API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_coordination["Tab coordination"]
  node_election["Leader election<br/>[index.mjs]"]
  node_channel["BroadcastChannel"]
  node_peers(("Peer tabs"))
end

subgraph group_shared_runtime["Shared runtime"]
  node_hive["Hive API<br/>[index.mjs]"]
  node_state["Shared state<br/>[index.mjs]"]
  node_leader_work["Leader work<br/>[index.mjs]"]
  node_rpc["Leader RPC<br/>[index.mjs]"]
  node_events["Cross-tab events<br/>[index.mjs]"]
end

node_app(("Application code"))

node_app -->|"creates hive"| node_hive
node_hive -->|"opens channel"| node_channel
node_channel -->|"delivers messages"| node_hive
node_peers -->|"exchange messages"| node_channel
node_hive -->|"elects leader"| node_election
node_election -->|"starts or stops"| node_leader_work
node_hive -->|"reads and writes"| node_state
node_state -->|"broadcasts updates"| node_channel
node_channel -->|"merges updates"| node_state
node_app -->|"registers work"| node_leader_work
node_app -->|"registers or requests"| node_rpc
node_channel -->|"delivers requests"| node_rpc
node_app -->|"emits or listens"| node_events
node_channel -->|"delivers events"| node_events

click node_hive "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"
click node_election "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"
click node_state "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"
click node_leader_work "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"
click node_rpc "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"
click node_events "https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_election,node_channel,node_peers toneBlue
class node_hive,node_state,node_leader_work,node_rpc,node_events toneAmber
class node_app toneIndigo
```

## Components

### Tab coordination

- [Leader election](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`
- **BroadcastChannel**
- **Peer tabs**

### Shared runtime

- [Hive API](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`
- [Shared state](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`
- [Leader work](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`
- [Leader RPC](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`
- [Cross-tab events](https://github.com/yunuseeeeeeee/yunze-kovan/blob/main/index.mjs): `index.mjs`

### Other components

- **Application code**

## Connections

- Application code → Hive API: creates hive (evidence: `README.md`)
- Hive API → BroadcastChannel: opens channel (evidence: `index.mjs`)
- BroadcastChannel → Hive API: delivers messages (evidence: `index.mjs`)
- Peer tabs → BroadcastChannel: exchange messages (evidence: `README.md`)
- Hive API → Leader election: elects leader (evidence: `index.mjs`)
- Leader election → Leader work: starts or stops (evidence: `index.mjs`)
- Hive API → Shared state: reads and writes (evidence: `index.mjs`)
- Shared state → BroadcastChannel: broadcasts updates (evidence: `index.mjs`)
- BroadcastChannel → Shared state: merges updates (evidence: `index.mjs`)
- Application code → Leader work: registers work (evidence: `README.md`)
- Application code → Leader RPC: registers or requests (evidence: `README.md`)
- BroadcastChannel → Leader RPC: delivers requests (evidence: `index.mjs`)
- Application code → Cross-tab events: emits or listens (evidence: `README.md`)
- BroadcastChannel → Cross-tab events: delivers events (evidence: `index.mjs`)