# shadowhedgehog76/webmood architecture

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

- Interactive diagram: https://gitdiagram.com/shadowhedgehog76/webmood
- Repository: https://github.com/shadowhedgehog76/webmood

## Overview

Moodboard is an infinite-canvas editor for drawing, connecting and arranging text, media, code and other blocks across multiple boards. The principal workflow is to open a board, create or edit content with the canvas tools, and persist the result locally; search, sharing and collaboration extend that workflow. The graph also preserves documented board-library, visual-block and account/cloud capabilities. Whiteboard excerpts are partial, so some UI wiring and cloud behavior is represented only where the available source or README supports it.

Main entry points: [`src/components/Whiteboard.jsx`](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Whiteboard.jsx) (Whiteboard runtime), [`src/components/Toolbar.jsx`](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Toolbar.jsx) (Tool selection), [`src/components/ContextBar.jsx`](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/ContextBar.jsx) (Context settings), [`src/components/Search.jsx`](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Search.jsx) (Board search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Canvas editor"]
  node_whiteboard["Whiteboard runtime<br/>[Whiteboard.jsx]"]
  node_toolbar["Tool selection<br/>[Toolbar.jsx]"]
  node_contextbar["Context settings<br/>[ContextBar.jsx]"]
  node_search["Board search<br/>[Search.jsx]"]
  node_canvas["Canvas rendering<br/>[Whiteboard.jsx]"]
end

subgraph group_content["Board content"]
  node_blocks["Content blocks"]
  node_shapes["Vector shapes<br/>[ShapeBlock.jsx]"]
  node_mindmap["Mind-map nodes<br/>[MindNode.jsx]"]
  node_library["Reusable library<br/>[Library.jsx]"]
  node_files["File insertion<br/>[files.js]"]
  node_links["Board connections<br/>[links.js]"]
end

subgraph group_boards["Board management"]
  node_boardrail["Board navigation<br/>[BoardRail.jsx]"]
  node_preview["Board previews<br/>[preview.js]"]
end

subgraph group_persistence["Local persistence"]
  node_localstore[("Browser storage<br/>[storage.js]")]
end

subgraph group_sharing["Sharing and collaboration"]
  node_share["Share and import<br/>[share.js]"]
  node_cloud["Cloud board sync<br/>[cloud.js]"]
  node_supabase["Supabase sessions"]
  node_p2p["Peer sessions<br/>[session-p2p.js]"]
  node_realtime["Realtime services"]
  node_account["Account controls<br/>[AccountDialog.jsx]"]
end

node_user(("Board user"))

node_user -->|"edits board"| node_whiteboard
node_whiteboard -->|"renders tools"| node_toolbar
node_whiteboard -->|"renders settings"| node_contextbar
node_whiteboard -->|"renders canvas"| node_canvas
node_toolbar -->|"selects tools"| node_whiteboard
node_contextbar -->|"sets options"| node_whiteboard
node_whiteboard -->|"renders content"| node_blocks
node_whiteboard -->|"renders shapes"| node_shapes
node_whiteboard -->|"renders nodes"| node_mindmap
node_whiteboard -->|"creates from files"| node_files
node_whiteboard -->|"resolves connections"| node_links
node_whiteboard -->|"loads and saves"| node_localstore
node_whiteboard -->|"builds previews"| node_preview
node_boardrail -->|"chooses board"| node_whiteboard
node_whiteboard -->|"supplies boards"| node_boardrail
node_whiteboard -->|"opens search"| node_search
node_search -->|"selects result"| node_whiteboard
node_whiteboard -->|"manages stencils"| node_library
node_library -->|"loads and saves"| node_localstore
node_whiteboard -->|"imports board"| node_share
node_whiteboard -->|"syncs boards"| node_cloud
node_whiteboard -->|"manages account"| node_account
node_whiteboard -.->|"opens session"| node_supabase
node_whiteboard -.->|"opens fallback"| node_p2p
node_supabase -.->|"broadcasts messages"| node_realtime
node_p2p -.->|"connects peers"| node_realtime

click node_whiteboard "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Whiteboard.jsx"
click node_toolbar "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Toolbar.jsx"
click node_contextbar "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/ContextBar.jsx"
click node_search "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Search.jsx"
click node_canvas "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Whiteboard.jsx"
click node_blocks "https://github.com/shadowhedgehog76/webmood/tree/main/src/components"
click node_shapes "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/ShapeBlock.jsx"
click node_mindmap "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/MindNode.jsx"
click node_library "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Library.jsx"
click node_files "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/files.js"
click node_links "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/links.js"
click node_boardrail "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/BoardRail.jsx"
click node_preview "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/preview.js"
click node_localstore "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/storage.js"
click node_share "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/share.js"
click node_cloud "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/cloud.js"
click node_supabase "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/session-supabase.js"
click node_p2p "https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/session-p2p.js"
click node_account "https://github.com/shadowhedgehog76/webmood/blob/main/src/components/AccountDialog.jsx"

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_whiteboard,node_toolbar,node_contextbar,node_search,node_canvas,node_user toneBlue
class node_blocks,node_shapes,node_mindmap,node_library,node_files,node_links toneAmber
class node_boardrail,node_preview toneMint
class node_localstore toneRose
class node_share,node_cloud,node_supabase,node_p2p,node_realtime,node_account toneIndigo
```

## Components

### Canvas editor

- [Whiteboard runtime](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Whiteboard.jsx): `src/components/Whiteboard.jsx`
- [Tool selection](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Toolbar.jsx): `src/components/Toolbar.jsx`
- [Context settings](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/ContextBar.jsx): `src/components/ContextBar.jsx`
- [Board search](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Search.jsx): `src/components/Search.jsx`
- [Canvas rendering](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Whiteboard.jsx): `src/components/Whiteboard.jsx`

### Board content

- [Content blocks](https://github.com/shadowhedgehog76/webmood/tree/main/src/components): `src/components`
- [Vector shapes](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/ShapeBlock.jsx): `src/components/ShapeBlock.jsx`
- [Mind-map nodes](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/MindNode.jsx): `src/components/MindNode.jsx`
- [Reusable library](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/Library.jsx): `src/components/Library.jsx`
- [File insertion](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/files.js): `src/lib/files.js`
- [Board connections](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/links.js): `src/lib/links.js`

### Board management

- [Board navigation](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/BoardRail.jsx): `src/components/BoardRail.jsx`
- [Board previews](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/preview.js): `src/lib/preview.js`

### Local persistence

- [Browser storage](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/storage.js): `src/lib/storage.js`

### Sharing and collaboration

- [Share and import](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/share.js): `src/lib/share.js`
- [Cloud board sync](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/cloud.js): `src/lib/cloud.js`
- [Supabase sessions](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/session-supabase.js): `src/lib/session-supabase.js`
- [Peer sessions](https://github.com/shadowhedgehog76/webmood/blob/main/src/lib/session-p2p.js): `src/lib/session-p2p.js`
- **Realtime services**
- [Account controls](https://github.com/shadowhedgehog76/webmood/blob/main/src/components/AccountDialog.jsx): `src/components/AccountDialog.jsx`

### Other components

- **Board user**

## Connections

- Board user → Whiteboard runtime: edits board
- Whiteboard runtime → Tool selection: renders tools
- Whiteboard runtime → Context settings: renders settings
- Whiteboard runtime → Canvas rendering: renders canvas
- Tool selection → Whiteboard runtime: selects tools
- Context settings → Whiteboard runtime: sets options
- Whiteboard runtime → Content blocks: renders content
- Whiteboard runtime → Vector shapes: renders shapes
- Whiteboard runtime → Mind-map nodes: renders nodes
- Whiteboard runtime → File insertion: creates from files
- Whiteboard runtime → Board connections: resolves connections
- Whiteboard runtime → Browser storage: loads and saves
- Whiteboard runtime → Board previews: builds previews
- Board navigation → Whiteboard runtime: chooses board
- Whiteboard runtime → Board navigation: supplies boards
- Whiteboard runtime → Board search: opens search
- Board search → Whiteboard runtime: selects result
- Whiteboard runtime → Reusable library: manages stencils
- Reusable library → Browser storage: loads and saves
- Whiteboard runtime → Share and import: imports board
- Whiteboard runtime → Cloud board sync: syncs boards
- Whiteboard runtime → Account controls: manages account
- Whiteboard runtime → Supabase sessions: opens session
- Whiteboard runtime → Peer sessions: opens fallback
- Supabase sessions → Realtime services: broadcasts messages
- Peer sessions → Realtime services: connects peers