# Frontend — lib Structure

**Location: src/lib/**

# components/ — Components

<span style="white-space: pre-wrap;">A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The documentation for them is </span>[here](https://bookstack.roboteamtwente.nl/books/base-station/chapter/frontend-components).

# stores/ — Stores

Svelte writable stores used for state that needs to be shared and persisted across route navigations within the same session.

**`<strong class="editor-theme-bold editor-theme-code">stores/samples.ts</strong>`**<span style="white-space: pre-wrap;"> — </span>`<span class="editor-theme-code">samples: Writable<Sample[]></span>`<span style="white-space: pre-wrap;"> Holds the list of science samples collected during the current task. Persists across navigation so samples are not lost when the operator moves between routes. Cleared when a task ends (or optionally kept when starting a new task — the layout prompts the operator to choose).</span>

**`<strong class="editor-theme-bold editor-theme-code">stores/map.ts</strong>`**<span style="white-space: pre-wrap;"> — </span>`<span class="editor-theme-code">displayedMap</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">startPoint</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">endPoint</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">waypoints</span>`<span style="white-space: pre-wrap;"> Holds the state of the navigation map: the currently loaded map image, start and end waypoints, and the list of intermediate waypoints. All are writable stores so any component can update them and the map will react.</span>

**`<strong class="editor-theme-bold editor-theme-code">stores/probes.ts</strong>`**<span style="white-space: pre-wrap;"> — </span>`<span class="editor-theme-code">probes: Writable<Probe[]></span>`<span style="white-space: pre-wrap;"> Holds the list of probe locations recorded during the Probing task.</span>

<p class="callout danger">**TODO** Add the rest of stores</p>

# css/ — Style



# proto/ — Protobufers Interface