# Frontend Layers

The frontend uses Nuxt layers to separate generic framework UI from reflectometry-specific behavior.

## Layer order

The root Nuxt configuration extends the layers in this order:

1. `./layers/reflectometry`
2. `./layers/base`

Because the reflectometry layer is listed first in `vipr-frontend/nuxt.config.ts`, it has higher priority for route, component, and auto-import resolution. The base layer acts as the generic fallback.

## Base layer

The base layer provides the reusable application shell:

- shared pipeline configuration stores
- generic inference and results state
- file upload handlers
- streaming and plugin management UI
- shared composables such as configuration import, validation, downloads, and progress tracking

Representative entry points:

- `vipr-frontend/layers/base/app/composables/useConfigImporter.ts`
- `vipr-frontend/layers/base/app/stores/inferenceStore.ts`
- `vipr-frontend/layers/base/app/stores/pipelineConfigurationStore.ts`

The base layer registers its stores and composables for Nuxt auto-imports in `vipr-frontend/layers/base/nuxt.config.ts`.

## Reflectometry layer

The reflectometry layer adds domain-specific behavior on top of the base layer:

- model adapters for `reflectorch`, `panpe`, and flow-model handlers
- reflectometry-specific configuration stores
- reflectometry charts and result views
- use-case-specific pipeline step overrides

Representative entry points:

- `vipr-frontend/layers/reflectometry/app/composables/useModelAdapter.ts`
- `vipr-frontend/layers/reflectometry/app/composables/useModelHandler.ts`
- `vipr-frontend/layers/reflectometry/app/stores/reflectometryConfigStore.ts`

The reflectometry layer also registers its stores and composables via `vipr-frontend/layers/reflectometry/nuxt.config.ts`.

## Documentation strategy

The layer boundary is the key architectural concept, so the frontend docs treat it as a first-class topic.

This is also why the planned generated TypeScript reference focuses on:

- `app/composables`
- `app/stores`
- `app/types`

Pages and Vue SFCs remain important, but they are mostly orchestration surfaces. Their responsibilities are documented separately on the routes page instead of treating them as the primary API reference.