v1.3.0

feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation
v1.2.0
2026-02-05 16:50:51 +00:00 · 2026-02-05 16:50:51 +00:00 · 2026-02-05 15:49:07 +00:00 · 2026-02-05 15:49:07 +00:00
8 changed files with 745 additions and 207 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,24 @@
 # Changelog

+## 2026-02-05 - 1.3.0 - feat(dees-geo-map)
+Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation
+
+- Replace hard-coded colors with cssManager.bdTheme(...) across component styles to enable automatic light/dark theming
+- When mapStyle is 'osm', switch between CartoDB Voyager (light) and CartoDB Dark Matter (dark) vector basemaps
+- Subscribe to domtools.themeManager.themeObservable to update the map style at runtime and unsubscribe on disconnectedCallback
+- Add a traffic-aware routing toggle in the navigation panel and expose callbacks (onTrafficToggle, getTrafficEnabled) to wire UI state to the trafficController
+- Integrate traffic toggle state into navigation controller callbacks and simplify traffic controller render usage
+
+## 2026-02-05 - 1.2.0 - feat(map)
+Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction
+
+- Replace overlay/header layout with a CSS Grid: left and right sidebars (controlled via --left-panel-width/--right-panel-width) that push the map area instead of overlaying it.
+- Move navigation panel from map overlay into a left sidebar and add NavigationController viewMode with a new directions view (summary, back button) and planning view separation.
+- Add a right-side draw tools panel (draw panel UI, tool grid, actions) with isDrawPanelOpen state and toolbar toggle to show/hide draw tools.
+- Add interactivity: clicking a turn-by-turn step flies the map to that step (flyToStep), and directions->planning switching via setViewMode/back button.
+- Numerous style additions and adjustments: header toolbar grid area, sidebar/draw panel styling, nav directions styles, z-index tweaks, cursor and hover states.
+- Add new arrowLeft icon and reorganize toolbar controls (navigation/draw toggles, traffic, zoom) to accommodate sidebar layout
+
 ## 2026-02-05 - 1.1.1 - fix(assets)
 remove header toolbar PNG assets (header-toolbar-fixed, header-toolbar-full, header-toolbar-layout, header-toolbar-v3)

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog-geo",
-  "version": "1.1.1",
+  "version": "1.3.0",
  "private": false,
  "description": "A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools",
  "main": "dist_ts_web/index.js",
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -82,6 +82,7 @@ The navigation panel (`showNavigation={true}`) provides A-to-B routing using OSR
 - **Transport modes**: Driving, Walking, Cycling
 - **Point selection**: Type an address or click on the map
 - **Route display**: Blue line overlay with turn-by-turn directions
+- **Click on step**: Click any turn-by-turn step to fly/pan the map to that location
 - **API**: Uses free OSRM API (https://router.project-osrm.org) with fair-use rate limit
 - **Traffic-aware routing**: When a traffic provider is configured, shows duration with/without traffic

@@ -209,34 +210,75 @@ const nav = new NavigationController({

 ### UI Layout

-The component uses a header toolbar above the map for a cleaner layout:
+The component uses a CSS Grid layout with sidebars that **push** the map (not overlay):

 ```
 ┌──────────────────────────────────────────────────────────────────────┐
 │ HEADER TOOLBAR                                                        │
-│ [Draw Tools] | [Search Bar] | [Nav Toggle] [Traffic] [Zoom +/-]      │
-├──────────────────────────────────────────────────────────────────────┤
-│                                                                      │
-│  [Navigation]                      MAP                               │
-│  (toggleable)                                                        │
-│                                                                      │
-│ [Traffic Legend]                                     [Feature Count] │
-└──────────────────────────────────────────────────────────────────────┘
+│ [Nav Toggle] |         [Search Bar]        | [Draw Toggle] [Traffic] [+/-] │
+├───────────────┬──────────────────────────────┬───────────────────────┤
+│ LEFT SIDEBAR  │            MAP               │   RIGHT SIDEBAR       │
+│ (Navigation)  │                              │   (Draw Tools)        │
+│               │                              │                       │
+│ - Mode select │                              │   [Point]  [Line]     │
+│ - Start input │                              │   [Polygon][Rect]     │
+│ - End input   │                              │   [Circle] [Free]     │
+│ - Route steps │                              │   ─────────────────   │
+│               │   [Traffic Legend]           │   [Select & Edit]     │
+│               │   [Feature Count]            │   [Clear All]         │
+└───────────────┴──────────────────────────────┴───────────────────────┘
 ```

-**Header Toolbar Sections:**
- **Left**: Draw tools (Point, Line, Polygon, Rectangle, Circle, Freehand, Select, Clear)
- **Center**: Search bar (expandable width)
- **Right**: Navigation toggle, Traffic toggle, Zoom in/out buttons
+**CSS Grid Layout:**
+- Grid columns: `var(--left-panel-width) 1fr var(--right-panel-width)`
+- Grid rows: `auto 1fr` (header + content)
+- Sidebars push the map area, not overlay it

-**Map Overlays:**
- Navigation panel: Toggleable overlay on top-left of map
+**Header Toolbar Sections:**
+- **Left**: Navigation panel toggle button
+- **Center**: Search bar (expandable width)
+- **Right**: Draw panel toggle, Traffic toggle, Zoom in/out buttons
+
+**Left Sidebar (300px when open):**
+- Contains NavigationController render output
+- Slides in/out with 0.25s ease transition
+- Default open when `showNavigation={true}`
+
+**Right Sidebar (180px when open):**
+- Draw tools panel with 2-column grid layout
+- Tool buttons with icons AND labels
+- Select & Edit and Clear All actions
+- Slides in/out with 0.25s ease transition
+- Default open when `showToolbar={true}`
+
+**Map Overlays (remaining):**
 - Traffic legend: Bottom-left overlay (when traffic enabled)
 - Feature count: Bottom-left overlay (when features exist)

 **Z-index hierarchy:**
 - `z-index: 20` - Dropdowns (search results, nav search results)
- `z-index: 5` - Map overlays (navigation panel, traffic legend, feature count)
+- `z-index: 10` - Header toolbar
+- `z-index: 5` - Map overlays (traffic legend, feature count)
+
+### Dark/Light Theme Support
+
+The component fully supports automatic dark/light theme switching:
+
+**UI Elements Theming:**
+- All UI elements (toolbar, panels, search, navigation) use `cssManager.bdTheme()` for automatic color switching
+- Pattern: `cssManager.bdTheme('lightValue', 'darkValue')` - first arg is light theme, second is dark
+
+**Map Tiles Theming:**
+- When `mapStyle="osm"` (default), the map automatically switches between:
+  - **Light theme**: CartoDB Voyager GL (vector tiles) - clean, detailed style
+  - **Dark theme**: CartoDB Dark Matter GL (vector tiles) - sleek dark style
+- Theme changes are detected via `domtools.themeManager.themeObservable`
+- No API key required for CartoDB basemaps
+
+**Semantic Colors (unchanged by theme):**
+- Navigation markers: Green (#22c55e) for start, Red (#ef4444) for end
+- Route line: Blue (#3b82f6) with dark outline (#1e40af)
+- Traffic congestion: Green → Yellow → Orange → Red → Dark Red (universal traffic colors)

 ### Shadow DOM & Terra-Draw Drawing Fix
 Terra-draw's event listeners normally intercept map events through MapLibre's canvas element. In Shadow DOM contexts, these events are scoped locally and don't propagate correctly, causing terra-draw handlers to fail while MapLibre's drag handlers continue working.
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog-geo',
-  version: '1.1.1',
+  version: '1.3.0',
  description: 'A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools'
 }
--- a/ts_web/elements/00componentstyles.ts
+++ b/ts_web/elements/00componentstyles.ts
@@ -1,4 +1,4 @@
-import { css } from '@design.estate/dees-element';
+import { css, cssManager } from '@design.estate/dees-element';

 /**
 * Shared component styles for geo components
@@ -103,8 +103,8 @@ export const toolbarStyles = css`
    flex-direction: column;
    gap: 4px;
    padding: 8px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -120,7 +120,7 @@ export const toolbarStyles = css`
  .toolbar-divider {
    height: 1px;
    margin: 4px 0;
-    background: var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .tool-button {
@@ -133,13 +133,13 @@ export const toolbarStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .tool-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .tool-button.active {
@@ -170,8 +170,8 @@ export const searchStyles = css`
  .search-input-wrapper {
    display: flex;
    align-items: center;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -187,7 +187,7 @@ export const searchStyles = css`
    justify-content: center;
    width: 36px;
    height: 36px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    flex-shrink: 0;
  }

@@ -202,14 +202,14 @@ export const searchStyles = css`
    padding: 0 12px 0 0;
    border: none;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    font-size: 13px;
    font-family: inherit;
    outline: none;
  }

  .search-input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }

  .search-spinner {
@@ -224,7 +224,7 @@ export const searchStyles = css`
  .search-spinner svg {
    width: 16px;
    height: 16px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    animation: spin 1s linear infinite;
  }

@@ -243,15 +243,15 @@ export const searchStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .search-clear:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .search-clear svg {
@@ -266,8 +266,8 @@ export const searchStyles = css`
    right: 0;
    max-height: 300px;
    overflow-y: auto;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -285,7 +285,7 @@ export const searchStyles = css`
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
  }

  .search-result:last-child {
@@ -294,25 +294,25 @@ export const searchStyles = css`

  .search-result:hover,
  .search-result.highlighted {
-    background: rgba(255, 255, 255, 0.1);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .search-result-name {
    font-size: 13px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.3;
  }

  .search-result-type {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    text-transform: capitalize;
  }

  .search-no-results {
    padding: 12px;
    text-align: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    font-size: 13px;
  }
 `;
@@ -323,8 +323,8 @@ export const searchStyles = css`
 export const navigationStyles = css`
  .navigation-panel {
    width: 300px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -337,7 +337,7 @@ export const navigationStyles = css`
    align-items: center;
    gap: 8px;
    padding: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-header-icon {
@@ -357,14 +357,14 @@ export const navigationStyles = css`
  .nav-header-title {
    font-size: 13px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .nav-mode-selector {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-mode-btn {
@@ -377,15 +377,15 @@ export const navigationStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .nav-mode-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
  }

  .nav-mode-btn.active {
@@ -398,6 +398,67 @@ export const navigationStyles = css`
    height: 16px;
  }

+  /* Traffic toggle in navigation panel */
+  .nav-traffic-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
+  .nav-traffic-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
+  }
+
+  .nav-traffic-toggle-label svg {
+    width: 14px;
+    height: 14px;
+    color: var(--geo-tool-active, #0084ff);
+  }
+
+  .nav-traffic-toggle-btn {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border: none;
+    border-radius: 10px;
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.2)')};
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    padding: 0;
+  }
+
+  .nav-traffic-toggle-btn.active {
+    background: var(--geo-tool-active, #0084ff);
+  }
+
+  .toggle-track {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+  }
+
+  .nav-traffic-toggle-btn.active .toggle-thumb {
+    transform: translateX(16px);
+  }
+
  .nav-inputs {
    padding: 12px;
    display: flex;
@@ -437,10 +498,10 @@ export const navigationStyles = css`
    width: 100%;
    height: 36px;
    padding: 0 36px 0 12px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.2);
-    color: var(--geo-text, #fff);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    font-size: 13px;
    font-family: inherit;
    outline: none;
@@ -452,7 +513,7 @@ export const navigationStyles = css`
  }

  .nav-input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }

  .nav-input.has-value {
@@ -472,14 +533,14 @@ export const navigationStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .nav-set-map-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
  }

  .nav-set-map-btn.active {
@@ -505,13 +566,13 @@ export const navigationStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .nav-input-clear:hover {
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-input-clear svg {
@@ -526,8 +587,8 @@ export const navigationStyles = css`
    right: 0;
    max-height: 200px;
    overflow-y: auto;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.98));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 6px;
    z-index: 20;
  }
@@ -539,7 +600,7 @@ export const navigationStyles = css`
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
  }

  .nav-search-result:last-child {
@@ -548,12 +609,12 @@ export const navigationStyles = css`

  .nav-search-result:hover,
  .nav-search-result.highlighted {
-    background: rgba(255, 255, 255, 0.1);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-search-result-name {
    font-size: 12px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -562,7 +623,7 @@ export const navigationStyles = css`

  .nav-search-result-type {
    font-size: 10px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    text-transform: capitalize;
  }

@@ -602,12 +663,12 @@ export const navigationStyles = css`
  }

  .nav-action-btn.secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-action-btn.secondary:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.15)')};
  }

  .nav-action-btn svg {
@@ -622,8 +683,8 @@ export const navigationStyles = css`
    gap: 16px;
    padding: 12px;
    background: rgba(0, 132, 255, 0.1);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-summary-item {
@@ -632,7 +693,7 @@ export const navigationStyles = css`
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .nav-summary-item svg {
@@ -650,8 +711,9 @@ export const navigationStyles = css`
    display: flex;
    gap: 12px;
    padding: 10px 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
    transition: background-color 0.15s ease;
+    cursor: pointer;
  }

  .nav-step:last-child {
@@ -659,7 +721,7 @@ export const navigationStyles = css`
  }

  .nav-step:hover {
-    background: rgba(255, 255, 255, 0.05);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
  }

  .nav-step-icon {
@@ -669,8 +731,8 @@ export const navigationStyles = css`
    width: 28px;
    height: 28px;
    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
    font-size: 14px;
    flex-shrink: 0;
  }
@@ -682,14 +744,14 @@ export const navigationStyles = css`

  .nav-step-instruction {
    font-size: 13px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.4;
    margin-bottom: 2px;
  }

  .nav-step-distance {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
  }

  .nav-error {
@@ -715,7 +777,7 @@ export const navigationStyles = css`
    justify-content: center;
    gap: 8px;
    padding: 16px;
-    color: rgba(255, 255, 255, 0.6);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
    font-size: 13px;
  }

@@ -728,10 +790,77 @@ export const navigationStyles = css`
  .nav-empty-steps {
    padding: 16px 12px;
    text-align: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    font-size: 12px;
  }

+  /* Directions view styles */
+  .nav-directions-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
+  .nav-back-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  .nav-back-btn:hover {
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.2)')};
+  }
+
+  .nav-back-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .nav-directions-summary {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+  }
+
+  .nav-directions-summary svg {
+    width: 14px;
+    height: 14px;
+    color: var(--geo-tool-active, #0084ff);
+  }
+
+  .nav-directions-separator {
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
+    margin: 0 4px;
+  }
+
+  /* Make steps section taller when it's the main content in directions view */
+  .nav-directions-view .nav-steps {
+    max-height: none;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .nav-directions-view {
+    display: flex;
+    flex-direction: column;
+  }
+
  /* Traffic-aware route info */
  .nav-traffic-info {
    display: flex;
@@ -784,12 +913,12 @@ export const navigationStyles = css`

  .nav-traffic-text {
    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-traffic-delay {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    margin-left: auto;
  }
 `;
@@ -801,21 +930,27 @@ export const navigationStyles = css`
 * Header toolbar styles for toolbar above map
 */
 export const headerToolbarStyles = css`
+  /* CSS Grid layout for sidebars that push the map */
  .geo-component {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: var(--left-panel-width, 0px) 1fr var(--right-panel-width, 0px);
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "header header header"
+      "left-panel map-area right-panel";
    height: 100%;
    width: 100%;
+    transition: grid-template-columns 0.25s ease;
  }

  .header-toolbar {
+    grid-area: header;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
-    flex-shrink: 0;
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    min-height: 52px;
    position: relative;
    z-index: 10;
@@ -824,7 +959,7 @@ export const headerToolbarStyles = css`
  .toolbar-left {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: 8px;
    flex-shrink: 0;
  }

@@ -845,7 +980,7 @@ export const headerToolbarStyles = css`
  .header-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
-    background: rgba(255, 255, 255, 0.15);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
    margin: 0 4px;
  }

@@ -860,13 +995,13 @@ export const headerToolbarStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .header-toolbar .tool-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .header-toolbar .tool-button.active {
@@ -890,11 +1025,196 @@ export const headerToolbarStyles = css`
    max-width: 300px;
  }

-  /* Map container takes remaining space */
+  /* Left Sidebar - Navigation Panel */
+  .left-sidebar {
+    grid-area: left-panel;
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-right: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .left-sidebar.collapsed {
+    border-right: none;
+  }
+
+  .left-sidebar .navigation-panel {
+    width: 300px;
+    min-width: 300px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* Right Sidebar - Draw Panel */
+  .right-sidebar {
+    grid-area: right-panel;
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-left: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .right-sidebar.collapsed {
+    border-left: none;
+  }
+
+  /* Draw Panel Styles */
+  .draw-panel {
+    width: 180px;
+    min-width: 180px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .draw-panel-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
+  .draw-panel-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--geo-tool-active, #0084ff);
+  }
+
+  .draw-panel-header-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .draw-panel-header-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+  }
+
+  .draw-tools-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .draw-tool-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 12px 8px;
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    border-radius: 8px;
+    background: transparent;
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .draw-tool-button:hover {
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
+  }
+
+  .draw-tool-button.active {
+    background: var(--geo-tool-active, #0084ff);
+    border-color: var(--geo-tool-active, #0084ff);
+    color: #fff;
+  }
+
+  .draw-tool-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .draw-tool-button svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .draw-tool-button-label {
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .draw-panel-divider {
+    height: 1px;
+    margin: 4px 12px;
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
+  .draw-panel-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .draw-action-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    border-radius: 8px;
+    background: transparent;
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .draw-action-button:hover {
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
+  }
+
+  .draw-action-button.active {
+    background: var(--geo-tool-active, #0084ff);
+    border-color: var(--geo-tool-active, #0084ff);
+  }
+
+  .draw-action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .draw-action-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .draw-action-button.danger:hover {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
+  }
+
+  /* Map container takes grid area */
  .geo-component .map-container {
-    flex: 1;
+    grid-area: map-area;
    position: relative;
    min-height: 0;
+    min-width: 0;
  }
 `;

@@ -918,9 +1238,9 @@ export const trafficStyles = css`
    padding: 0;
    border: none;
    border-radius: 8px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
-    color: var(--geo-text, #fff);
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -928,7 +1248,7 @@ export const trafficStyles = css`
  }

  .traffic-toggle-btn:hover:not(:disabled) {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.15));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
  }

  .traffic-toggle-btn.active {
@@ -956,7 +1276,7 @@ export const trafficStyles = css`
    justify-content: center;
    width: 14px;
    height: 14px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
    border-radius: 50%;
  }

@@ -971,8 +1291,8 @@ export const trafficStyles = css`
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -993,7 +1313,7 @@ export const trafficStyles = css`

  .traffic-status-text {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.7);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
  }

  .traffic-error {
@@ -1014,8 +1334,8 @@ export const trafficStyles = css`
  /* Traffic Legend */
  .traffic-legend {
    padding: 10px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -1026,7 +1346,7 @@ export const trafficStyles = css`
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    margin-bottom: 8px;
  }

@@ -1041,7 +1361,7 @@ export const trafficStyles = css`
    align-items: center;
    gap: 8px;
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .traffic-legend-color {
@@ -1053,8 +1373,8 @@ export const trafficStyles = css`
  .traffic-legend-updated {
    margin-top: 8px;
    padding-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    font-size: 10px;
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }
 `;
--- a/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
@@ -8,6 +8,7 @@ import {
  type TemplateResult,
  cssManager,
  css,
+  domtools,
 } from '@design.estate/dees-element';
 import { DeesContextmenu } from '@design.estate/dees-catalog';
 import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles, trafficStyles, headerToolbarStyles } from '../../00componentstyles.js';
@@ -141,6 +142,9 @@ export class DeesGeoMap extends DeesElement {
  @state()
  private accessor isNavigationOpen: boolean = true;

+  @state()
+  private accessor isDrawPanelOpen: boolean = true;
+
  // Controllers
  private searchController: SearchController | null = null;
  private navigationController: NavigationController | null = null;
@@ -172,41 +176,63 @@ export class DeesGeoMap extends DeesElement {

      .maplibregl-ctrl-attrib {
        font-size: 11px;
-        background: rgba(0, 0, 0, 0.5);
-        color: rgba(255, 255, 255, 0.8);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.5)')};
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
        padding: 2px 6px;
        border-radius: 4px;
      }

      .maplibregl-ctrl-attrib a {
-        color: rgba(255, 255, 255, 0.8);
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
      }

      .feature-count {
        padding: 6px 12px;
-        background: rgba(30, 30, 30, 0.9);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
        border-radius: 6px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
      }
    `,
  ];

+  // Map theme subscription for cleanup
+  private mapThemeSubscription: { unsubscribe: () => void } | null = null;
+
  // ─── Lifecycle ──────────────────────────────────────────────────────────────

  public async firstUpdated() {
    this.initializeControllers();
    await this.initializeMap();
+
+    // Subscribe to theme changes to update map style
+    this.subscribeToThemeChanges();
  }

  public async disconnectedCallback() {
    await super.disconnectedCallback();
+    if (this.mapThemeSubscription) {
+      this.mapThemeSubscription.unsubscribe();
+      this.mapThemeSubscription = null;
+    }
    this.cleanup();
  }

+  /**
+   * Subscribe to theme changes via domtools
+   */
+  private async subscribeToThemeChanges(): Promise<void> {
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    this.mapThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
+      (_goBright: boolean) => {
+        this.updateMapStyleForTheme();
+      }
+    );
+  }
+
  public updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);
    if (changedProperties.has('dragToDraw') && this.draw && this.map) {
@@ -290,11 +316,21 @@ export class DeesGeoMap extends DeesElement {
      getMap: () => this.map,
      // Connect traffic controller for traffic-aware routing
      getTrafficRoute: async (start, end, mode) => {
-        if (this.trafficController?.supportsTrafficRouting()) {
+        if (this.showTraffic && this.trafficController?.supportsTrafficRouting()) {
          return this.trafficController.fetchRouteWithTraffic(start, end, mode);
        }
        return null;
      },
+      // Traffic toggle callbacks
+      onTrafficToggle: (enabled) => {
+        if (enabled) {
+          this.trafficController?.enable();
+        } else {
+          this.trafficController?.disable();
+        }
+        this.showTraffic = enabled;
+      },
+      getTrafficEnabled: () => this.showTraffic,
    });
    this.navigationController.navigationMode = this.navigationMode;

@@ -374,30 +410,30 @@ export class DeesGeoMap extends DeesElement {

  private getMapStyle(): maplibregl.StyleSpecification | string {
    if (this.mapStyle === 'osm') {
-      return {
-        version: 8,
-        sources: {
-          'osm-tiles': {
-            type: 'raster',
-            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-            tileSize: 256,
-            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-          },
-        },
-        layers: [
-          {
-            id: 'osm-tiles',
-            type: 'raster',
-            source: 'osm-tiles',
-            minzoom: 0,
-            maxzoom: 19,
-          },
-        ],
-      };
+      // Check current theme and use appropriate tiles
+      const isDarkTheme = !cssManager.goBright;
+
+      if (isDarkTheme) {
+        // CartoDB Dark Matter GL vector style - high quality dark theme
+        return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+      } else {
+        // CartoDB Voyager GL vector style - high quality light theme
+        return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+      }
    }
    return this.mapStyle;
  }

+  /**
+   * Update the map style when theme changes
+   */
+  private updateMapStyleForTheme(): void {
+    if (!this.map || !this.isMapReady || this.mapStyle !== 'osm') return;
+
+    const newStyle = this.getMapStyle();
+    this.map.setStyle(newStyle as maplibregl.StyleSpecification);
+  }
+
  // ─── Terra Draw Initialization ──────────────────────────────────────────────

  private initializeTerraDraw() {
@@ -836,6 +872,10 @@ export class DeesGeoMap extends DeesElement {
    this.isNavigationOpen = !this.isNavigationOpen;
  }

+  private toggleDrawPanel(): void {
+    this.isDrawPanelOpen = !this.isDrawPanelOpen;
+  }
+
  // ─── Render ─────────────────────────────────────────────────────────────────

  public render(): TemplateResult {
@@ -843,24 +883,31 @@ export class DeesGeoMap extends DeesElement {
    const hasTrafficProvider = this.trafficController?.provider?.isConfigured ?? false;
    const showTrafficControls = Boolean(hasTrafficProvider || this.trafficApiKey || this.trafficProvider);

+    // Calculate panel widths for CSS Grid
+    const leftPanelWidth = this.showNavigation && this.isNavigationOpen ? '300px' : '0px';
+    const rightPanelWidth = this.showToolbar && this.isDrawPanelOpen ? '180px' : '0px';
+
    return html`
-      <div class="geo-component">
+      <div class="geo-component" style="--left-panel-width: ${leftPanelWidth}; --right-panel-width: ${rightPanelWidth};">
        <!-- Header Toolbar Above Map -->
        ${this.renderHeaderToolbar(showTrafficControls)}

+        <!-- Left Sidebar: Navigation Panel -->
+        <div class="left-sidebar ${!this.showNavigation || !this.isNavigationOpen ? 'collapsed' : ''}">
+          ${this.showNavigation && this.isNavigationOpen && this.navigationController
+            ? this.navigationController.render()
+            : ''}
+        </div>
+
        <!-- Map Container -->
        <div class="map-container" @contextmenu=${(e: MouseEvent) => this.handleMapContextMenu(e)}>
          <div class="map-wrapper"></div>

          <div class="map-overlay">
-            <!-- Top Left: Navigation Panel (toggleable) -->
-            <div class="overlay-top-left">
-              ${this.showNavigation && this.isNavigationOpen && this.navigationController
-                ? this.navigationController.render()
-                : ''}
-            </div>
+            <!-- Top Left: Empty (navigation moved to sidebar) -->
+            <div class="overlay-top-left"></div>

-            <!-- Top Right: Empty now (controls moved to header) -->
+            <!-- Top Right: Empty (controls in header) -->
            <div class="overlay-top-right"></div>

            <!-- Bottom Left: Traffic Legend + Feature Count -->
@@ -873,10 +920,15 @@ export class DeesGeoMap extends DeesElement {
              ` : ''}
            </div>

-            <!-- Bottom Right: Empty now (zoom moved to header) -->
+            <!-- Bottom Right: Empty (zoom in header) -->
            <div class="overlay-bottom-right"></div>
          </div>
        </div>
+
+        <!-- Right Sidebar: Draw Panel -->
+        <div class="right-sidebar ${!this.showToolbar || !this.isDrawPanelOpen ? 'collapsed' : ''}">
+          ${this.showToolbar && this.isDrawPanelOpen ? this.renderDrawPanel() : ''}
+        </div>
      </div>
    `;
  }
@@ -884,11 +936,16 @@ export class DeesGeoMap extends DeesElement {
  private renderHeaderToolbar(showTrafficControls: boolean): TemplateResult {
    return html`
      <div class="header-toolbar">
-        <!-- Left: Draw Tools -->
+        <!-- Left: Navigation Panel Toggle -->
        <div class="toolbar-left">
-          ${this.showToolbar ? html`
-            ${this.renderDrawTools()}
-            <div class="toolbar-divider"></div>
+          ${this.showNavigation ? html`
+            <button
+              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
+              title="Toggle Navigation Panel"
+              @click=${() => this.toggleNavigation()}
+            >
+              ${renderIcon('navigation')}
+            </button>
          ` : ''}
        </div>

@@ -899,20 +956,18 @@ export class DeesGeoMap extends DeesElement {
            : ''}
        </div>

-        <!-- Right: Navigation Toggle + Traffic Toggle + Zoom Controls -->
+        <!-- Right: Draw Panel Toggle + Traffic Toggle + Zoom Controls -->
        <div class="toolbar-right">
-          ${this.showNavigation ? html`
+          ${this.showToolbar ? html`
            <button
-              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
-              title="Navigation"
-              @click=${() => this.toggleNavigation()}
+              class="tool-button ${this.isDrawPanelOpen ? 'active' : ''}"
+              title="Toggle Draw Tools"
+              @click=${() => this.toggleDrawPanel()}
            >
-              ${renderIcon('navigation')}
+              ${renderIcon('polygon')}
            </button>
          ` : ''}
-          ${showTrafficControls && this.trafficController
-            ? this.trafficController.render()
-            : ''}
+          ${this.trafficController?.render()}
          <div class="toolbar-divider"></div>
          <button
            class="tool-button"
@@ -933,7 +988,7 @@ export class DeesGeoMap extends DeesElement {
    `;
  }

-  private renderDrawTools(): TemplateResult {
+  private renderDrawPanel(): TemplateResult {
    const tools: { id: TDrawTool; icon: string; label: string }[] = [
      { id: 'point', icon: 'point', label: 'Point' },
      { id: 'linestring', icon: 'line', label: 'Line' },
@@ -944,33 +999,51 @@ export class DeesGeoMap extends DeesElement {
    ];

    return html`
-      ${tools.map(tool => html`
-        <button
-          class="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
-          title="${tool.label}"
-          @click=${() => this.handleToolClick(tool.id)}
-          ?disabled=${!this.isMapReady}
-        >
-          ${renderIcon(tool.icon)}
-        </button>
-      `)}
-      <div class="toolbar-divider"></div>
-      <button
-        class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
-        title="Select & Edit"
-        @click=${() => this.handleToolClick('select')}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('select')}
-      </button>
-      <button
-        class="tool-button"
-        title="Clear All"
-        @click=${this.handleClearClick}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('trash')}
-      </button>
+      <div class="draw-panel">
+        <div class="draw-panel-header">
+          <div class="draw-panel-header-icon">
+            ${renderIcon('polygon')}
+          </div>
+          <div class="draw-panel-header-title">Draw Tools</div>
+        </div>
+
+        <div class="draw-tools-grid">
+          ${tools.map(tool => html`
+            <button
+              class="draw-tool-button ${this.activeTool === tool.id ? 'active' : ''}"
+              title="${tool.label}"
+              @click=${() => this.handleToolClick(tool.id)}
+              ?disabled=${!this.isMapReady}
+            >
+              ${renderIcon(tool.icon)}
+              <span class="draw-tool-button-label">${tool.label}</span>
+            </button>
+          `)}
+        </div>
+
+        <div class="draw-panel-divider"></div>
+
+        <div class="draw-panel-actions">
+          <button
+            class="draw-action-button ${this.activeTool === 'select' ? 'active' : ''}"
+            title="Select & Edit"
+            @click=${() => this.handleToolClick('select')}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('select')}
+            <span>Select & Edit</span>
+          </button>
+          <button
+            class="draw-action-button danger"
+            title="Clear All"
+            @click=${this.handleClearClick}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('trash')}
+            <span>Clear All</span>
+          </button>
+        </div>
+      </div>
    `;
  }

--- a/ts_web/elements/00group-map/dees-geo-map/geo-map.icons.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/geo-map.icons.ts
@@ -37,6 +37,9 @@ export const GEO_MAP_ICONS: Record<string, TemplateResult> = {
  ruler: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3c-1 1-2.5 1-3.4 0l-2.6-2.6c-1-1-1-2.5 0-3.4L15.3 2.7c1-1 2.5-1 3.4 0l2.6 2.6c1 1 1 2.5 0 3.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>`,
  error: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,

+  // Arrows
+  arrowLeft: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>`,
+
  // Traffic
  traffic: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="2"/><circle cx="12" cy="7" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="17" r="1.5" fill="currentColor"/></svg>`,
  trafficLight: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5"/><path d="M15 7h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5"/><path d="M12 4v4"/><path d="M12 16v4"/><circle cx="12" cy="12" r="3"/></svg>`,
--- a/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
@@ -65,6 +65,10 @@ export interface INavigationControllerCallbacks {
    end: [number, number],
    mode: TNavigationMode
  ) => Promise<ITrafficAwareRoute | null>;
+  /** Optional callback when traffic toggle is changed */
+  onTrafficToggle?: (enabled: boolean) => void;
+  /** Optional callback to get current traffic state */
+  getTrafficEnabled?: () => boolean;
 }

 /**
@@ -96,6 +100,9 @@ export class NavigationController {
  // Mode
  public navigationMode: TNavigationMode = 'driving';

+  // View mode: 'planning' for route input, 'directions' for turn-by-turn
+  public viewMode: 'planning' | 'directions' = 'planning';
+
  // Internal
  private callbacks: INavigationControllerCallbacks;
  private navSearchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
@@ -198,6 +205,9 @@ export class NavigationController {

        // Fit map to route bounds
        this.fitToRoute(routeToRender);
+
+        // Switch to directions view after successful route calculation
+        this.viewMode = 'directions';
      }
    } catch (error) {
      this.navigationState = {
@@ -272,6 +282,7 @@ export class NavigationController {
    this.navStartSearchResults = [];
    this.navEndSearchResults = [];
    this.navClickMode = null;
+    this.viewMode = 'planning';

    // Remove markers
    if (this.startMarker) {
@@ -516,6 +527,20 @@ export class NavigationController {
    map.fitBounds(bounds, { padding: 80 });
  }

+  /**
+   * Fly to a specific navigation step location
+   */
+  public flyToStep(step: IOSRMStep): void {
+    const map = this.callbacks.getMap();
+    if (!map) return;
+
+    map.flyTo({
+      center: step.maneuver.location,
+      zoom: 17,
+      duration: 1000,
+    });
+  }
+
  // ─── Search within Navigation ───────────────────────────────────────────────

  /**
@@ -763,6 +788,14 @@ export class NavigationController {
    }
  }

+  /**
+   * Switch between planning and directions view
+   */
+  public setViewMode(mode: 'planning' | 'directions'): void {
+    this.viewMode = mode;
+    this.callbacks.onRequestUpdate();
+  }
+
  // ─── Cleanup ────────────────────────────────────────────────────────────────

  /**
@@ -790,8 +823,20 @@ export class NavigationController {
   * @param extraClass - Optional CSS class to add to the panel for positioning
   */
  public render(extraClass?: string): TemplateResult {
-    const { route, isLoading, error, startPoint, endPoint } = this.navigationState;
+    // If we have a route and we're in directions view, show that
+    if (this.viewMode === 'directions' && this.navigationState.route) {
+      return this.renderDirectionsView(extraClass);
+    }
+    return this.renderPlanningView(extraClass);
+  }
+
+  /**
+   * Render the route planning view (inputs, mode selector, actions)
+   */
+  private renderPlanningView(extraClass?: string): TemplateResult {
+    const { isLoading, error, startPoint, endPoint } = this.navigationState;
    const canCalculate = startPoint && endPoint && !isLoading;
+    const trafficEnabled = this.callbacks.getTrafficEnabled?.() ?? false;

    return html`
      <div class="navigation-panel ${extraClass || ''}">
@@ -824,6 +869,22 @@ export class NavigationController {
          </button>
        </div>

+        <div class="nav-traffic-toggle">
+          <div class="nav-traffic-toggle-label">
+            ${renderIcon('traffic')}
+            <span>Traffic-aware routing</span>
+          </div>
+          <button
+            class="nav-traffic-toggle-btn ${trafficEnabled ? 'active' : ''}"
+            @click=${() => this.callbacks.onTrafficToggle?.(!trafficEnabled)}
+            title="${trafficEnabled ? 'Disable traffic' : 'Enable traffic'}"
+          >
+            <span class="toggle-track">
+              <span class="toggle-thumb"></span>
+            </span>
+          </button>
+        </div>
+
        <div class="nav-inputs">
          ${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)}
          ${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)}
@@ -858,35 +919,55 @@ export class NavigationController {
            <span>Calculating route...</span>
          </div>
        ` : ''}
+      </div>
+    `;
+  }

-        ${route && !isLoading ? html`
-          <div class="nav-summary">
-            <div class="nav-summary-item">
-              ${renderIcon('ruler')}
-              <span>${this.formatDistance(route.distance)}</span>
-            </div>
-            <div class="nav-summary-item">
-              ${renderIcon('clock')}
-              <span>${this.formatDuration(this.navigationState.trafficRoute?.duration ?? route.duration)}</span>
-            </div>
+  /**
+   * Render the directions view (back button, summary, turn-by-turn steps)
+   */
+  private renderDirectionsView(extraClass?: string): TemplateResult {
+    const { route, trafficRoute } = this.navigationState;
+
+    if (!route) {
+      // Shouldn't happen, but fallback to planning view
+      return this.renderPlanningView(extraClass);
+    }
+
+    return html`
+      <div class="navigation-panel nav-directions-view ${extraClass || ''}">
+        <div class="nav-directions-header">
+          <button
+            class="nav-back-btn"
+            @click=${() => this.setViewMode('planning')}
+            title="Back to route planning"
+          >
+            ${renderIcon('arrowLeft')}
+          </button>
+          <div class="nav-directions-summary">
+            ${renderIcon('ruler')}
+            <span>${this.formatDistance(route.distance)}</span>
+            <span class="nav-directions-separator">•</span>
+            ${renderIcon('clock')}
+            <span>${this.formatDuration(trafficRoute?.duration ?? route.duration)}</span>
          </div>
+        </div>

-          ${this.navigationState.trafficRoute ? html`
-            <div class="nav-traffic-info ${this.navigationState.trafficRoute.congestionLevel}">
-              <span class="nav-traffic-indicator ${this.navigationState.trafficRoute.congestionLevel}"></span>
-              <span class="nav-traffic-text">${this.getCongestionLabel(this.navigationState.trafficRoute.congestionLevel)}</span>
-              ${this.navigationState.trafficRoute.duration > this.navigationState.trafficRoute.durationWithoutTraffic ? html`
-                <span class="nav-traffic-delay">
-                  +${this.formatDuration(this.navigationState.trafficRoute.duration - this.navigationState.trafficRoute.durationWithoutTraffic)} due to traffic
-                </span>
-              ` : ''}
-            </div>
-          ` : ''}
-
-          <div class="nav-steps">
-            ${this.renderTurnByTurn(route)}
+        ${trafficRoute ? html`
+          <div class="nav-traffic-info ${trafficRoute.congestionLevel}">
+            <span class="nav-traffic-indicator ${trafficRoute.congestionLevel}"></span>
+            <span class="nav-traffic-text">${this.getCongestionLabel(trafficRoute.congestionLevel)}</span>
+            ${trafficRoute.duration > trafficRoute.durationWithoutTraffic ? html`
+              <span class="nav-traffic-delay">
+                +${this.formatDuration(trafficRoute.duration - trafficRoute.durationWithoutTraffic)} due to traffic
+              </span>
+            ` : ''}
          </div>
        ` : ''}
+
+        <div class="nav-steps">
+          ${this.renderTurnByTurn(route)}
+        </div>
      </div>
    `;
  }
@@ -975,7 +1056,7 @@ export class NavigationController {
        const distance = this.formatDistance(step.distance);

        return html`
-          <div class="nav-step">
+          <div class="nav-step" @click=${() => this.flyToStep(step)}>
            <div class="nav-step-icon">${icon}</div>
            <div class="nav-step-content">
              <div class="nav-step-instruction">${instruction}</div>
Author	SHA1	Message	Date
Juergen Kunz	428e0546bd	v1.3.0	2026-02-05 16:50:51 +00:00
Juergen Kunz	54999a52b7	feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation	2026-02-05 16:50:51 +00:00
Juergen Kunz	32454a7d19	v1.2.0	2026-02-05 15:49:07 +00:00
Juergen Kunz	f215133997	feat(map): Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction	2026-02-05 15:49:07 +00:00