feat: Vue component buttons/panels and flexible navbar (#4)

Add Vue component support for custom buttons and panels in the
Navigator config API. The navbar now supports start/middle/end
positioning for buttons, with custom Vue components rendered
directly in the toolbar.

Source changes:
- top.vue: navbar renders custom component buttons in start/middle/end slots
- panels.vue: panels render Vue components with props and DOM render fallback
- index.js: export getEmitter and useUI for plugin authors

Documentation:
- Rewrite docs/dev/7.features.md with a complete Recordings plugin example
  demonstrating the plugin system, config-driven UI, and map layer management
- Add Recordings plugin source files in docs/dev/feature/ for copy-paste reuse
- Expand docs/dev/8.extending.md with Vue component examples, plugin system
  details, and programmatic panel control via useUI
- Update docs/dev/1.config.md with buttons, panels, and plugins config reference
- Add RTL language support note to docs/dev/5.locale.md

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: morehawes

TASKS.md

@@ -13,8 +13,20 @@ Improve the panel api documented in @docs/dev/1.config.md with to support for Vu
 
 # Menu
 
-# Panel Nvigation
+Update the app top navigation bar to be more flexible. Currently @src/components/ui/top.vue the navbar has a left/middle/right positioned icon buttons. I want to make this more programtic, so that developers can modify/add/remove/replace icon buttons in the navbar as vue components. This can also be used to completely change the navbar dynamically, for example a consuming app may want to add their own custom navbar. I would also like to make this more friendly for reording, to support both RLS and LTR languages (a future consideration) for example. So the concept of start/end instead of left/right. The top nav should be able to accept any number of buttons, with the first aligned to the start, and the last aligned to the end (use bootstrap best practises). 3+ buttons will be added to the middle, evenly spaced. Update the documentation @docs/dev/8.extending.md to reflect these changes, and provide an example of how you would add a centered icon button to the navbar using the new API. Add a github-style alert to the @docs/dev/5.locale.md about the future support for RTL languages, and how the new navbar API will support this when it arrives.
+
+# Testing
 
 # Extending
 
-Let's improve the developer docs, specifically the @docs/dev/7.features.md . I want you to rewrite the "Adding Features to Navigator" section to highight the integration methods documented in @docs/dev/8.extending.md . By way of example, create a new Recordings feature that integrates as a vue plugin. The full plugin code should be included in the documentation, like with the green theme sass example @docs/dev/6.theme.md so that developers could copy and paste the code to create their own feature. As you build this example,
+Let's improve the developer docs, specifically the @docs/dev/7.features.md . I want you to rewrite the "Adding Features to Navigator" section to highight the integration methods documented in @docs/dev/8.extending.md . By way of example, create a new Recordings feature that integrates as a vue plugin. The full plugin code should be included in the documentation, like with the green theme sass example @docs/dev/6.theme.md so that developers could copy and paste the code to create their own feature. The recordings plugin should be a complete, but minimal feature. It should have:
+
+- A centre-aligned Record Button in the top navbar that toggles recording on/off. The button starts/pauses recording, and changes label and color to indicate the recording state (e.g. red when recording, grey when paused). When pause is presses, this should open a simple Recordings panel.
+
+- The Recordings panel should display simple information about the current recording track, such as duration and distance. It should also have "Pause/Resume", "Discard", "Save" button that saves the recording data to localStorage (using @src/composables/useStorage.js) If there is an active recording, it should also be saved to local storage so that it can be resumed if the user accidentally refreshes the page.
+
+- When a recording is active, the map should display a blue (primary brand sass colour @docs/dev/6.theme.md) line showing the path of the recording. This line should update in real time as the recording progresses. When the recording is paused, the line should turn grey.
+
+- The recordings panel should show a list of past recordings saved in localStorage, with the option to show/delete/download(as GPX) them. Each recording should display its duration, distance, and a timestamp of when it was recorded.
+
+Remember to include the full plugin code in the documentation, and to update the "Adding Features to Navigator" section to highlight this new integration method.

assets/screenshots/docs/core/privacy-panel.png

@@ -193,22 +193,70 @@ See [Map](./3.map.md) for the full map API including view persistence and progra
 
 Adds custom buttons to the top navigation bar. Each button can optionally open a panel tab with custom content.
 
+A button can render using the built-in icon button (specify `icon` and `label`) or a custom Vue component (specify `component`):
+
+**Vue component button:**
+
 ```js
+import HomeButton from './components/HomeButton.vue';
+
 Navigator.create({
-  id: "my-map",
+  id: 'my-map',
   buttons: [
     {
-      id: "measure",
-      icon: "ruler",
-      label: "Measure",
-      position: "end",
+      id: 'home',
+      position: 'middle',
+      component: HomeButton,
+      props: { label: 'Home' },
+    },
+  ],
+}).mount();
+```
+
+The component is rendered inside Navigator's Vue app tree, so it has access to dependency injection (`inject('navigatorId')`) and `getMapInstance()`.
+
+**Icon button with panel (Vue component):**
+
+```js
+import MeasurePanel from './components/MeasurePanel.vue';
+
+Navigator.create({
+  id: 'my-map',
+  buttons: [
+    {
+      id: 'measure',
+      icon: 'ruler',
+      label: 'Measure',
+      position: 'end',
+      panel: {
+        title: 'Measurement Tool',
+        component: MeasurePanel,
+      },
+    },
+  ],
+}).mount();
+```
+
+The Vue component is rendered inside Navigator's Vue app tree, so it has full access to Vue's dependency injection. Use `inject('navigatorId')` to get the instance ID and `getMapInstance(id)` to access the map.
+
+**DOM render function:**
+
+```js
+Navigator.create({
+  id: 'my-map',
+  buttons: [
+    {
+      id: 'measure',
+      icon: 'ruler',
+      label: 'Measure',
+      position: 'end',
       onClick: ({ map, instanceId }) => {
         /* ... */
       },
       panel: {
-        title: "Measurement Tool",
+        title: 'Measurement Tool',
         render: (container, { map, instanceId }) => {
-          container.innerHTML = "<p>Draw on the map to measure.</p>";
+          container.innerHTML = '<p>Draw on the map to measure.</p>';
         },
       },
     },
@@ -226,6 +274,27 @@ See [Extending — Config-Driven Buttons and Panels](./8.extending.md#config-dri
 
 Adds custom tabs to the side panel without requiring a toolbar button. Use this when you want panel content accessible from the tab bar but don't need a top-bar button.
 
+**Vue component (preferred):**
+
+```js
+import InfoPanel from './components/InfoPanel.vue';
+
+Navigator.create({
+  id: 'my-map',
+  panels: [
+    {
+      id: 'info',
+      icon: 'info-circle',
+      title: 'Info',
+      component: InfoPanel,
+      props: { showDetails: true },
+    },
+  ],
+}).mount();
+```
+
+**DOM render function:**
+
 ```js
 Navigator.create({
   id: 'my-map',
@@ -247,7 +316,11 @@ Navigator.create({
 | `id` | `string` | ✓ | Unique panel identifier |
 | `icon` | `string` | ✓ | Icon name from the SVG sprite |
 | `title` | `string` | ✓ | Tab label |
-| `render` | `function` | ✓ | Called with `(container, { map, instanceId })` to populate content |
+| `component` | `Component` | | Vue component to render (preferred) |
+| `props` | `object` | | Props to pass to the Vue component |
+| `render` | `function` | | Called with `(container, { map, instanceId })` to populate content |
+
+> Provide either `component` or `render`. If both are present, `component` takes precedence.
 
 > **Buttons vs Panels:** Use `buttons` when you want a toolbar button (optionally with a panel). Use `panels` when you only need a panel tab. Both can be combined in the same config.
 

assets/screenshots/docs/features/locate/button-following.png

@@ -58,6 +58,9 @@ Custom `messages` are merged on top of the built-in translations — only the ke
 > [!TIP]
 > More languages are coming soon! To contribute a translation, see [Contributing a translation](#contributing-a-translation) below.
 
+> [!NOTE]
+> **RTL language support** is planned for a future release. The navigation bar already uses directional positioning (`'start'` / `'end'` rather than left / right) and Bootstrap 5 logical utilities, so the layout will adapt automatically when RTL support lands. See [Extending — Custom Buttons](../dev/8.extending.md#custom-buttons) for the toolbar positioning API.
+
 | Code | Language |
 | ---- | -------- |
 | `en` | English  |