# ritveak/jainconceptlab architecture

> Architecture diagram of the GitHub repository ritveak/jainconceptlab, 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/ritveak/jainconceptlab
- Repository: https://github.com/ritveak/jainconceptlab

## Overview

Concept Laboratory is a React app for learning concepts through explanatory content, optional FAQs/resources, and concept-specific interactive labs. A visitor opens the hub, selects a concept, then explores its dynamically available tabs; labs progress through scenario selection, guided decisions, and a reflection or scorecard. The shared concept loader discovers Markdown, lab, FAQ, and resource assets, while dedicated Mohniye and Samvaay state hooks implement distinct experiments. Edges reflect explicit imports or documented behavior; unsampled subsystems are represented at their existing concept-directory paths, with no inferred internal calls.

Main entry points: [`src/concepts/index.jsx`](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/index.jsx) (Concept Loader), [`src/concepts/samvaay/Lab.jsx`](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/Lab.jsx) (Samvaay Lab), [`src/concepts/mohniye/Lab.jsx`](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/Lab.jsx) (Mohniye Lab), [`src/components/layout/ConceptPage.jsx`](https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptPage.jsx) (Concept Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_app["Route App<br/>[App.jsx]"]
  node_hub["Concept Hub<br/>[ConceptHub.jsx]"]
  node_page["Concept Page<br/>[ConceptPage.jsx]"]
  node_tabs["Dynamic Tabs<br/>[ConceptTabs.jsx]"]
end

subgraph group_content["Concept Content"]
  node_loader["Concept Loader<br/>[index.jsx]"]
  node_concepts["Concept Definitions"]
  node_markdown["Markdown Renderer"]
  node_prose["Styled Prose<br/>[ConceptProse.jsx]"]
  node_faq["FAQ Renderer<br/>[FaqRenderer.jsx]"]
  node_resources["Resources Renderer"]
end

subgraph group_labs["Interactive Labs"]
  node_karmagranth["Karmagranth Lab<br/>[Lab.jsx]"]
  node_karmadata["Karmagranth Data<br/>[data.js]"]
  node_mohniye["Mohniye Lab<br/>[Lab.jsx]"]
  node_mohniye_state["Mohniye State<br/>[useMohniyeLab.js]"]
  node_mohniye_data["Mohniye Scenarios<br/>[data.js]"]
  node_mohniye_stages["Mohniye Stage UI"]
  node_samvaay["Samvaay Lab<br/>[Lab.jsx]"]
  node_samvaay_state["Samvaay State<br/>[useSamvaayLab.js]"]
  node_samvaay_data["Samvaay Scenarios<br/>[data.js]"]
  node_samvaay_stages["Samvaay Stage UI"]
end

subgraph group_shared["Shared Presentation"]
  node_faq_ui["FAQ Accordion<br/>[FaqSection.jsx]"]
  node_lab_shell["Lab Wrapper<br/>[LabEmbedded.jsx]"]
  node_pivot["Immersive Pivot<br/>[PivotImmersive.jsx]"]
  node_animation["Matrix Animation"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"routes home"| node_hub
node_app -->|"routes concept"| node_page
node_hub -->|"loads concepts"| node_loader
node_hub -->|"navigates to"| node_page
node_page -->|"gets content"| node_loader
node_loader -->|"discovers content"| node_concepts
node_loader -->|"renders markdown"| node_markdown
node_markdown -->|"uses"| node_prose
node_page -->|"renders tabs"| node_tabs
node_loader -->|"renders FAQ"| node_faq
node_faq -->|"renders accordion"| node_faq_ui
node_loader -->|"renders resources"| node_resources
node_loader -.->|"loads lab"| node_karmagranth
node_loader -.->|"loads lab"| node_mohniye
node_loader -.->|"loads lab"| node_samvaay
node_karmagranth -->|"uses wrapper"| node_lab_shell
node_karmagranth -->|"reads data"| node_karmadata
node_mohniye -->|"uses wrapper"| node_lab_shell
node_mohniye -->|"uses state"| node_mohniye_state
node_mohniye -->|"reads data"| node_mohniye_data
node_mohniye -->|"renders stages"| node_mohniye_stages
node_mohniye_state -->|"derives state"| node_mohniye_data
node_samvaay -->|"uses wrapper"| node_lab_shell
node_samvaay -->|"uses state"| node_samvaay_state
node_samvaay -->|"reads data"| node_samvaay_data
node_samvaay -->|"renders stages"| node_samvaay_stages
node_samvaay -->|"uses pivot"| node_pivot
node_samvaay_state -->|"derives state"| node_samvaay_data
node_pivot -->|"uses animation"| node_animation

click node_app "https://github.com/ritveak/jainconceptlab/blob/main/src/App.jsx"
click node_hub "https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptHub.jsx"
click node_page "https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptPage.jsx"
click node_loader "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/index.jsx"
click node_concepts "https://github.com/ritveak/jainconceptlab/tree/main/src/concepts"
click node_markdown "https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptMarkdown.jsx"
click node_prose "https://github.com/ritveak/jainconceptlab/blob/main/src/components/prose/ConceptProse.jsx"
click node_tabs "https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptTabs.jsx"
click node_faq "https://github.com/ritveak/jainconceptlab/blob/main/src/components/renderers/FaqRenderer.jsx"
click node_faq_ui "https://github.com/ritveak/jainconceptlab/blob/main/src/components/faq/FaqSection.jsx"
click node_resources "https://github.com/ritveak/jainconceptlab/blob/main/src/components/renderers/ResourcesRenderer.jsx"
click node_lab_shell "https://github.com/ritveak/jainconceptlab/blob/main/src/components/lab/LabEmbedded.jsx"
click node_karmagranth "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/karmagranth/Lab.jsx"
click node_karmadata "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/karmagranth/data.js"
click node_mohniye "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/Lab.jsx"
click node_mohniye_state "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/useMohniyeLab.js"
click node_mohniye_data "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/data.js"
click node_mohniye_stages "https://github.com/ritveak/jainconceptlab/tree/main/src/concepts/mohniye/lab"
click node_samvaay "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/Lab.jsx"
click node_samvaay_state "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/useSamvaayLab.js"
click node_samvaay_data "https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/data.js"
click node_samvaay_stages "https://github.com/ritveak/jainconceptlab/tree/main/src/concepts/samvaay/lab"
click node_pivot "https://github.com/ritveak/jainconceptlab/blob/main/src/components/lab/PivotImmersive.jsx"
click node_animation "https://github.com/ritveak/jainconceptlab/blob/main/src/hooks/useMatrixAnimation.js"

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_app,node_hub,node_page,node_tabs toneBlue
class node_loader,node_concepts,node_markdown,node_prose,node_faq,node_resources toneAmber
class node_karmagranth,node_karmadata,node_mohniye,node_mohniye_state,node_mohniye_data,node_mohniye_stages,node_samvaay,node_samvaay_state,node_samvaay_data,node_samvaay_stages toneMint
class node_faq_ui,node_lab_shell,node_pivot,node_animation toneRose
class node_visitor toneIndigo
```

## Components

### App Navigation

- [Route App](https://github.com/ritveak/jainconceptlab/blob/main/src/App.jsx): `src/App.jsx`
- [Concept Hub](https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptHub.jsx): `src/components/layout/ConceptHub.jsx`
- [Concept Page](https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptPage.jsx): `src/components/layout/ConceptPage.jsx`
- [Dynamic Tabs](https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptTabs.jsx): `src/components/layout/ConceptTabs.jsx`

### Concept Content

- [Concept Loader](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/index.jsx): `src/concepts/index.jsx`
- [Concept Definitions](https://github.com/ritveak/jainconceptlab/tree/main/src/concepts): `src/concepts`
- [Markdown Renderer](https://github.com/ritveak/jainconceptlab/blob/main/src/components/layout/ConceptMarkdown.jsx): `src/components/layout/ConceptMarkdown.jsx`
- [Styled Prose](https://github.com/ritveak/jainconceptlab/blob/main/src/components/prose/ConceptProse.jsx): `src/components/prose/ConceptProse.jsx`
- [FAQ Renderer](https://github.com/ritveak/jainconceptlab/blob/main/src/components/renderers/FaqRenderer.jsx): `src/components/renderers/FaqRenderer.jsx`
- [Resources Renderer](https://github.com/ritveak/jainconceptlab/blob/main/src/components/renderers/ResourcesRenderer.jsx): `src/components/renderers/ResourcesRenderer.jsx`

### Interactive Labs

- [Karmagranth Lab](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/karmagranth/Lab.jsx): `src/concepts/karmagranth/Lab.jsx`
- [Karmagranth Data](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/karmagranth/data.js): `src/concepts/karmagranth/data.js`
- [Mohniye Lab](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/Lab.jsx): `src/concepts/mohniye/Lab.jsx`
- [Mohniye State](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/useMohniyeLab.js): `src/concepts/mohniye/useMohniyeLab.js`
- [Mohniye Scenarios](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/mohniye/data.js): `src/concepts/mohniye/data.js`
- [Mohniye Stage UI](https://github.com/ritveak/jainconceptlab/tree/main/src/concepts/mohniye/lab): `src/concepts/mohniye/lab`
- [Samvaay Lab](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/Lab.jsx): `src/concepts/samvaay/Lab.jsx`
- [Samvaay State](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/useSamvaayLab.js): `src/concepts/samvaay/useSamvaayLab.js`
- [Samvaay Scenarios](https://github.com/ritveak/jainconceptlab/blob/main/src/concepts/samvaay/data.js): `src/concepts/samvaay/data.js`
- [Samvaay Stage UI](https://github.com/ritveak/jainconceptlab/tree/main/src/concepts/samvaay/lab): `src/concepts/samvaay/lab`

### Shared Presentation

- [FAQ Accordion](https://github.com/ritveak/jainconceptlab/blob/main/src/components/faq/FaqSection.jsx): `src/components/faq/FaqSection.jsx`
- [Lab Wrapper](https://github.com/ritveak/jainconceptlab/blob/main/src/components/lab/LabEmbedded.jsx): `src/components/lab/LabEmbedded.jsx`
- [Immersive Pivot](https://github.com/ritveak/jainconceptlab/blob/main/src/components/lab/PivotImmersive.jsx): `src/components/lab/PivotImmersive.jsx`
- [Matrix Animation](https://github.com/ritveak/jainconceptlab/blob/main/src/hooks/useMatrixAnimation.js): `src/hooks/useMatrixAnimation.js`

### Other components

- **Visitor**

## Connections

- Visitor → Route App: opens (evidence: `src/App.jsx`)
- Route App → Concept Hub: routes home (evidence: `src/App.jsx`)
- Route App → Concept Page: routes concept (evidence: `src/App.jsx`)
- Concept Hub → Concept Loader: loads concepts (evidence: `src/components/layout/ConceptHub.jsx`)
- Concept Hub → Concept Page: navigates to (evidence: `src/components/layout/ConceptHub.jsx`)
- Concept Page → Concept Loader: gets content (evidence: `src/components/layout/ConceptPage.jsx`)
- Concept Loader → Concept Definitions: discovers content (evidence: `src/concepts/index.jsx`)
- Concept Loader → Markdown Renderer: renders markdown (evidence: `src/concepts/index.jsx`)
- Markdown Renderer → Styled Prose: uses (evidence: `src/components/layout/ConceptMarkdown.jsx`)
- Concept Page → Dynamic Tabs: renders tabs (evidence: `src/components/layout/ConceptPage.jsx`)
- Concept Loader → FAQ Renderer: renders FAQ (evidence: `src/concepts/index.jsx`)
- FAQ Renderer → FAQ Accordion: renders accordion (evidence: `src/components/renderers/FaqRenderer.jsx`)
- Concept Loader → Resources Renderer: renders resources (evidence: `src/concepts/index.jsx`)
- Concept Loader → Karmagranth Lab: loads lab
- Concept Loader → Mohniye Lab: loads lab
- Concept Loader → Samvaay Lab: loads lab
- Karmagranth Lab → Lab Wrapper: uses wrapper (evidence: `src/concepts/karmagranth/Lab.jsx`)
- Karmagranth Lab → Karmagranth Data: reads data (evidence: `src/concepts/karmagranth/Lab.jsx`)
- Mohniye Lab → Lab Wrapper: uses wrapper (evidence: `src/concepts/mohniye/Lab.jsx`)
- Mohniye Lab → Mohniye State: uses state (evidence: `src/concepts/mohniye/Lab.jsx`)
- Mohniye Lab → Mohniye Scenarios: reads data (evidence: `src/concepts/mohniye/Lab.jsx`)
- Mohniye Lab → Mohniye Stage UI: renders stages (evidence: `src/concepts/mohniye/Lab.jsx`)
- Mohniye State → Mohniye Scenarios: derives state (evidence: `src/concepts/mohniye/useMohniyeLab.js`)
- Samvaay Lab → Lab Wrapper: uses wrapper (evidence: `src/concepts/samvaay/Lab.jsx`)
- Samvaay Lab → Samvaay State: uses state (evidence: `src/concepts/samvaay/Lab.jsx`)
- Samvaay Lab → Samvaay Scenarios: reads data (evidence: `src/concepts/samvaay/Lab.jsx`)
- Samvaay Lab → Samvaay Stage UI: renders stages (evidence: `src/concepts/samvaay/Lab.jsx`)
- Samvaay Lab → Immersive Pivot: uses pivot (evidence: `src/concepts/samvaay/Lab.jsx`)
- Samvaay State → Samvaay Scenarios: derives state (evidence: `src/concepts/samvaay/useSamvaayLab.js`)
- Immersive Pivot → Matrix Animation: uses animation (evidence: `src/components/lab/PivotImmersive.jsx`)