Timeline plugin: shell and component placeholders

docs/adr/20260209-plugin-communication-model.md

@@ -895,7 +895,7 @@ All 5 existing communication mechanisms can be migrated to the unified Event Bus
 │                          MIGRATION MAPPING                               │
 ├──────────────────────────────────────────────────────────────────────────┤
 │                                                                          │
-│  L_.subscribeTimeChange(id, cb)     →  mmgisAPI.on('time:change', cb)   │
+│  L_.subscribeTimeChange(id, cb)     →  mmgisAPI.on('time:changed', cb)  │
 │  L_.subscribeOnLayerToggle(id, cb)  →  mmgisAPI.on('layer:toggle', cb)  │
 │  L_.unsubscribeTimeChange(id)       →  unsubscribe() return value       │
 │                                                                          │
@@ -934,7 +934,7 @@ L_.subscribeTimeChange('MyTool', callback);
 document.dispatchEvent(new CustomEvent('toolChange', { detail }));
 
 // After (same mmgisAPI object, new methods)
-mmgisAPI.on('time:change', callback);
+mmgisAPI.on('time:changed', callback);
 mmgisAPI.emit('tool:change', detail);
 ```
 

docs/pages/APIs/JavaScript/Main/Event-Bus-API.md

@@ -299,13 +299,22 @@ window.mmgisAPI.on('feature:active', ({ layerName, feature }) => {
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `time:change` | `{ startTime, currentTime, endTime }` | Fired when time range changes |
+| `time:changed` | `{ startTime, currentTime, endTime }` | Fired after a time change is committed, carrying the new committed state. Pairs with `time:changeRequested` |
+| `time:changeRequested` | `{ startTime, currentTime, endTime }` | Emitted by a plugin to ask core to commit a new time window. ISO 8601 strings. Ignored while time is disabled for the mission |
 | `time:toggleUI` | `{ active }` | Fired when time UI is shown/hidden |
 
 ```javascript
-window.mmgisAPI.on('time:change', ({ startTime, currentTime, endTime }) => {
+window.mmgisAPI.on('time:changed', ({ startTime, currentTime, endTime }) => {
     console.log(`Time range: ${startTime} - ${endTime}`)
 })
+
+// Ask core to move the current time. Core commits it and broadcasts the
+// result on 'time:changed' — including back to the plugin that asked.
+window.mmgisAPI.emit('time:changeRequested', {
+    startTime: '2024-01-01T00:00:00.000Z',
+    endTime: '2024-12-31T23:59:59.000Z',
+    currentTime: '2024-06-15T12:00:00.000Z'
+})
 ```
 
 ### Legend Events
@@ -384,13 +393,15 @@ const newState = await window.mmgisAPI.request('layers:toggle', 'myLayerName')
 
 | Provider | Params | Returns | Description |
 |----------|--------|---------|-------------|
+| `time:isEnabled` | none | `boolean` | Whether the mission has time enabled. The getters below return `null` both when time is off and when it is on but not yet seeded |
 | `time:getCurrent` | none | `string` | Get current time |
 | `time:getStart` | none | `string` | Get start time |
 | `time:getEnd` | none | `string` | Get end time |
 | `time:set` | `{ startTime, endTime, currentTime, ... }` | `boolean` | Set time range |
 
 ```javascript
 // Get time state
+const timeEnabled = await window.mmgisAPI.request('time:isEnabled')
 const current = await window.mmgisAPI.request('time:getCurrent')
 const start = await window.mmgisAPI.request('time:getStart')
 const end = await window.mmgisAPI.request('time:getEnd')
@@ -469,7 +480,7 @@ const MyPlugin = {
     init() {
         this._unsubscribers.push(
             window.mmgisAPI.on('layer:visibilityChange', this.handleLayerChange),
-            window.mmgisAPI.on('time:change', this.handleTimeChange)
+            window.mmgisAPI.on('time:changed', this.handleTimeChange)
         )
     },
 

src/essence/Basics/TimeControl_/TimeControl.js

@@ -55,6 +55,9 @@ var TimeControl = {
                             timeInputChange(startTime, endTime, currentTime)
                     }
                 ),
+                // Separates "time is off for this mission" from "on but not yet
+                // seeded"; the getters below return null for both.
+                window.mmgisAPI.provide('time:isEnabled', () => TimeControl.enabled === true),
                 window.mmgisAPI.provide('time:getCurrent', () => TimeControl.getTime()),
                 window.mmgisAPI.provide('time:getStart', () => TimeControl.getStartTime()),
                 window.mmgisAPI.provide('time:getEnd', () => TimeControl.getEndTime()),

src/essence/Basics/UserInterface_/UserInterfaceModern_.css

@@ -128,6 +128,20 @@
     background-color: var(--theme-color-white, #ffffff);
 }
 
+/* Cards fill the panel where they stack vertically. Top/bottom regions lay
+   them out in a row, so there they keep their intrinsic width. */
+.ui-region-left .ui-tool-card,
+.ui-region-right .ui-tool-card,
+.ui-panel-body-tabbed .ui-tool-card {
+    width: 100%;
+}
+
+/* A lone tool in a horizontal region still fills it. */
+.ui-region-top .ui-panel-body > .ui-tool-card:only-child,
+.ui-region-bottom .ui-panel-body > .ui-tool-card:only-child {
+    width: 100%;
+}
+
 /* Stacked Tool Cards (default clickable cards in panel body) */
 .ui-tool-card-stacked {
     display: flex;

src/essence/Tools/LayerManager/lib/styles/components-geo/colormap-control.scss

@@ -61,7 +61,7 @@
         &:hover {
             border-color: var(--theme-color-base-dark, #565c65);
             color: var(--theme-color-base-darker, #3d4551);
-            background: var(--theme-color-base-light, #a9aeb1);
+            background: var(--theme-color-primary-lightest, #e6f4f6);
         }
 
         &--active {

src/essence/Tools/LayerManager/lib/styles/components-geo/gradient-graphic.scss

@@ -45,7 +45,7 @@
         transition: background-color 0.15s ease, color 0.15s ease;
 
         &:hover {
-            background: var(--theme-color-base-lighter, #dfe1e2);
+            background: var(--theme-color-primary-lightest, #e6f4f6);
             color: var(--theme-color-base-darker, #3d4551);
         }
 

src/essence/Tools/LayerManager/lib/styles/components-geo/layer-legend.scss

@@ -119,7 +119,7 @@ $legend-content-indent: 28px;
 
         &:hover {
             background: var(--theme-color-primary-lightest, #e6f4f6);
-            color: var(--theme-color-primary, #0e7482);
+            color: var(--theme-color-base-darker, #3d4551);
         }
 
         &--active {

src/essence/Tools/Timeline/Timeline.css

@@ -0,0 +1,241 @@
+.timeline {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--theme-color-white, #ffffff);
+    color: var(--theme-color-primary-dark, #0d313d);
+    font-family: var(--theme-font-ui, 'Public Sans', system-ui, -apple-system, sans-serif);
+    overflow: hidden;
+}
+
+/* Core's global `*:focus { outline: none }` strips the native ring, so every
+   focusable control in the plugin restores one here. */
+.timeline button:focus-visible,
+.timeline input:focus-visible,
+.timeline [tabindex]:focus-visible,
+.floating-popover-portal button:focus-visible,
+.floating-popover-portal input:focus-visible,
+.floating-popover-portal [tabindex]:focus-visible {
+    outline: 2px solid var(--theme-color-primary, #0e7482);
+    outline-offset: 2px;
+}
+
+/* Collapsed: only the header remains. The host panel keeps its configured
+   height, so the timeline stays top-aligned within it. */
+.timeline--collapsed {
+    height: auto;
+}
+
+.timeline--collapsed .timeline-content {
+    display: none;
+}
+
+.timeline--collapsed .timeline-header {
+    border-bottom: none;
+}
+
+.timeline-collapse-btn svg {
+    display: block;
+    transition: transform 0.2s ease;
+}
+
+.timeline--collapsed .timeline-collapse-btn svg {
+    transform: rotate(180deg);
+}
+
+
+.timeline-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+}
+
+.timeline-loading .loading-message {
+    color: var(--theme-color-base, #71767a);
+    font-size: 14px;
+}
+
+/* Shown when the mission has no time enabled and there is nothing to scrub. */
+.timeline-unavailable {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+    text-align: center;
+    background: var(--theme-color-white, #ffffff);
+    font-family: var(--theme-font-ui, 'Public Sans', system-ui, -apple-system, sans-serif);
+}
+
+.timeline-unavailable-message {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--theme-color-base-darker, #3d4551);
+}
+
+.timeline-unavailable-hint {
+    font-size: 12px;
+    color: var(--theme-color-base, #71767a);
+}
+
+.timeline-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .25rem .75rem;
+    border-bottom: 1px solid var(--theme-color-base-lighter, #dfe1e2);
+    background: var(--theme-color-white, #ffffff);
+    flex-shrink: 0;
+}
+
+.timeline-header-left,
+.timeline-header-center,
+.timeline-header-right {
+    display: flex;
+    align-items: center;
+}
+
+.timeline-header-center {
+    flex: 1;
+    justify-content: center;
+}
+
+.timeline-header-right {
+    gap: 12px;
+}
+
+.timeline-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 8px;
+}
+
+/* Empty state shown when no layers are on the timeline */
+.timeline-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 16px;
+    text-align: center;
+}
+
+.timeline-empty-message {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--theme-color-base-darker, #3d4551);
+}
+
+.timeline-empty-hint {
+    font-size: 12px;
+    color: var(--theme-color-base, #71767a);
+}
+
+/* Timeline Toolbar */
+.timeline-toolbar {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    border-left: 1px solid var(--theme-color-base-lighter, #dfe1e2);
+}
+
+.timeline-tool-btn {
+    background: transparent;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: var(--theme-color-primary, #0e7482);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    height: 24px;
+    width: 24px;
+}
+
+.timeline-tool-btn:hover:not(:disabled) {
+    background: var(--theme-color-primary-lightest, #e6f4f6);
+    opacity: 0.8;
+}
+
+.timeline-tool-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+/* Info Tooltip Portal. Portalled to document.body, so it carries the plugin's
+   font rather than inheriting core's. */
+.timeline-info-tooltip-portal {
+    background: var(--theme-color-primary-dark, #0d313d);
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px var(--theme-color-shadow, rgba(0, 0, 0, 0.15));
+    padding: 12px 16px;
+    width: 280px;
+    z-index: 999999;
+    animation: tooltipFadeIn 0.15s ease;
+    pointer-events: none;
+    font-family: var(--theme-font-ui, 'Public Sans', system-ui, -apple-system, sans-serif);
+}
+
+@keyframes tooltipFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .timeline-info-tooltip-portal {
+        animation: none;
+    }
+}
+
+.timeline-info-tooltip-content {
+    color: var(--theme-color-base-lighter, #dfe1e2);
+}
+
+.timeline-info-tooltip-content strong {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--theme-color-white, #ffffff);
+    margin-bottom: 8px;
+}
+
+.timeline-info-tooltip-content p {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--theme-color-base-light, #a9aeb1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .timeline-header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+    }
+
+    .timeline-header-center {
+        justify-content: center;
+    }
+
+    .timeline-sidebar {
+        width: 100px;
+    }
+}