v1.3.0

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)
 

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",

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 +/-]      │
+│ [Nav Toggle] |         [Search Bar]        | [Draw Toggle] [Traffic] [+/-] │
-├──────────────────────────────────────────────────────────────────────┤
+├───────────────┬──────────────────────────────┬───────────────────────┤
-│                                                                      │
+│ LEFT SIDEBAR  │            MAP               │   RIGHT SIDEBAR       │
-│  [Navigation]                      MAP                               │
+│ (Navigation)  │                              │   (Draw Tools)        │
-│  (toggleable)                                                        │
+│               │                              │                       │
-│                                                                      │
+│ - Mode select │                              │   [Point]  [Line]     │
-│ [Traffic Legend]                                     [Feature Count] │
+│ - Start input │                              │   [Polygon][Rect]     │
-└──────────────────────────────────────────────────────────────────────┘
+│ - End input   │                              │   [Circle] [Free]     │
+│ - Route steps │                              │   ─────────────────   │
+│               │   [Traffic Legend]           │   [Select & Edit]     │
+│               │   [Feature Count]            │   [Clear All]         │
+└───────────────┴──────────────────────────────┴───────────────────────┘
 ```
 
-**Header Toolbar Sections:**
+**CSS Grid Layout:**
-- **Left**: Draw tools (Point, Line, Polygon, Rectangle, Circle, Freehand, Select, Clear)
+- Grid columns: `var(--left-panel-width) 1fr var(--right-panel-width)`
-- **Center**: Search bar (expandable width)
+- Grid rows: `auto 1fr` (header + content)
-- **Right**: Navigation toggle, Traffic toggle, Zoom in/out buttons
+- Sidebars push the map area, not overlay it
 
-**Map Overlays:**
+**Header Toolbar Sections:**
-- Navigation panel: Toggleable overlay on top-left of map
+- **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.

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'
 }

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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
-    color: rgba(255, 255, 255, 0.8);
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
-    color: rgba(255, 255, 255, 0.9);
+    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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
-    color: var(--geo-text, #fff);
+    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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
-    color: rgba(255, 255, 255, 0.9);
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
-    color: rgba(255, 255, 255, 0.8);
+    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-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-    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-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);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
-    color: rgba(255, 255, 255, 0.8);
+    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;
+    display: grid;
-    flex-direction: column;
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
-    border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-    flex-shrink: 0;
     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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-    color: var(--geo-text, #fff);
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    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)')};
   }
 `;

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);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.5)')};
-        color: rgba(255, 255, 255, 0.8);
+        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);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        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 {
+      // Check current theme and use appropriate tiles
-        version: 8,
+      const isDarkTheme = !cssManager.goBright;
-        sources: {
+
-          'osm-tiles': {
+      if (isDarkTheme) {
-            type: 'raster',
+        // CartoDB Dark Matter GL vector style - high quality dark theme
-            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+        return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
-            tileSize: 256,
+      } else {
-            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        // CartoDB Voyager GL vector style - high quality light theme
-          },
+        return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
-        },
+      }
-        layers: [
-          {
-            id: 'osm-tiles',
-            type: 'raster',
-            source: 'osm-tiles',
-            minzoom: 0,
-            maxzoom: 19,
-          },
-        ],
-      };
     }
     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) -->
+            <!-- Top Left: Empty (navigation moved to sidebar) -->
-            <div class="overlay-top-left">
+            <div class="overlay-top-left"></div>
-              ${this.showNavigation && this.isNavigationOpen && this.navigationController
-                ? this.navigationController.render()
-                : ''}
-            </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.showNavigation ? html`
-            ${this.renderDrawTools()}
+            <button
-            <div class="toolbar-divider"></div>
+              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' : ''}"
+              class="tool-button ${this.isDrawPanelOpen ? 'active' : ''}"
-              title="Navigation"
+              title="Toggle Draw Tools"
-              @click=${() => this.toggleNavigation()}
+              @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`
+      <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="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
+              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 class="toolbar-divider"></div>
+        </div>
+
+        <div class="draw-panel-divider"></div>
+
+        <div class="draw-panel-actions">
           <button
-        class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
+            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="tool-button"
+            class="draw-action-button danger"
             title="Clear All"
             @click=${this.handleClearClick}
             ?disabled=${!this.isMapReady}
           >
             ${renderIcon('trash')}
+            <span>Clear All</span>
           </button>
+        </div>
+      </div>
     `;
   }
 

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>`,

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,26 +919,47 @@ export class NavigationController {
             <span>Calculating route...</span>
           </div>
         ` : ''}
+      </div>
+    `;
+  }
 
-        ${route && !isLoading ? html`
+  /**
-          <div class="nav-summary">
+   * Render the directions view (back button, summary, turn-by-turn steps)
-            <div class="nav-summary-item">
+   */
+  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>
-            </div>
+            <span class="nav-directions-separator">•</span>
-            <div class="nav-summary-item">
             ${renderIcon('clock')}
-              <span>${this.formatDuration(this.navigationState.trafficRoute?.duration ?? route.duration)}</span>
+            <span>${this.formatDuration(trafficRoute?.duration ?? route.duration)}</span>
           </div>
         </div>
 
-          ${this.navigationState.trafficRoute ? html`
+        ${trafficRoute ? html`
-            <div class="nav-traffic-info ${this.navigationState.trafficRoute.congestionLevel}">
+          <div class="nav-traffic-info ${trafficRoute.congestionLevel}">
-              <span class="nav-traffic-indicator ${this.navigationState.trafficRoute.congestionLevel}"></span>
+            <span class="nav-traffic-indicator ${trafficRoute.congestionLevel}"></span>
-              <span class="nav-traffic-text">${this.getCongestionLabel(this.navigationState.trafficRoute.congestionLevel)}</span>
+            <span class="nav-traffic-text">${this.getCongestionLabel(trafficRoute.congestionLevel)}</span>
-              ${this.navigationState.trafficRoute.duration > this.navigationState.trafficRoute.durationWithoutTraffic ? html`
+            ${trafficRoute.duration > trafficRoute.durationWithoutTraffic ? html`
               <span class="nav-traffic-delay">
-                  +${this.formatDuration(this.navigationState.trafficRoute.duration - this.navigationState.trafficRoute.durationWithoutTraffic)} due to traffic
+                +${this.formatDuration(trafficRoute.duration - trafficRoute.durationWithoutTraffic)} due to traffic
               </span>
             ` : ''}
           </div>
@@ -886,7 +968,6 @@ export class NavigationController {
         <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>