@kteneyck/cesium-timeline-angular 0.4.0 → 0.6.0

package/README.md

@@ -123,7 +123,7 @@ Angular components use standalone imports — no NgModule required. Selectors: `
 - **Auto-scroll during playback** — visible window pans automatically when the needle reaches 10% from either edge.
 - **Infinite scrolling window** — timeline is not clamped to `startTime`/`endTime`; the window can pan anywhere.
 - **Adaptive tick labels** — label granularity adapts to zoom level: milliseconds → seconds → HH:MM:SS → HH:MM → Month Day → Month Year → Year. Tick dates are shown only when the visible window spans more than 24 hours.
-- **Local time labels** — ticks and dates reflect the user's local timezone, not UTC.
+- **Configurable timezone** — tick labels and the datetime display can show any IANA timezone (e.g. `"UTC"`, `"America/New_York"`) or the browser's local time. A short abbreviation (e.g. `UTC`, `EST`, `PDT`) is displayed to the right of the date line whenever a non-local timezone is active.
 - **Netflix/Hulu-style controls** — transport buttons (⏮ ◀◀ ▶/⏸ ▶▶ ⏭) always stay centered; speed badge and LIVE button in the left column never cause layout shift.
 - **Conditional start/end buttons** — ⏮ and ⏭ are only rendered when `startTime` and `endTime` props are explicitly provided.
 - **Speed cycling** — FF cycles through `ffSpeeds` (default `2×→4×→8×→16×→32×→1×`); RW cycles through `rwSpeeds` (default `−1×→−2×→−4×→−8×→−16×→−32×`). Both arrays are fully configurable.
@@ -135,6 +135,7 @@ Angular components use standalone imports — no NgModule required. Selectors: `
 - **Max tick limit** — `maxTicks` prop prevents the canvas from becoming overloaded at wide zoom levels by coarsening the tick scale automatically.
 - **Swim lanes** — display time intervals and instants as horizontal rows inside the canvas. Supports customizable styling, click/hover/double-click event hooks, drag-to-reorder, and vertical scrolling when lanes overflow.
 - **Fully themeable** — 16 theme properties cover every color, size, and font setting, including swim lane item border defaults.
+- **Localizable labels** — every control-bar label and tooltip is overridable via the `labels` prop; dynamic tooltips accept a `(multiplier: number) => string` callback. See [Labels & i18n](#labels--i18n).
 - **Responsive** — fills container width; `ResizeObserver` redraws on resize.
 
 ---
@@ -159,6 +160,7 @@ Angular components use standalone imports — no NgModule required. Selectors: `
 | `ffSpeeds` | `number[]` | `[2,4,8,16,32,1]` | Speed steps cycled by the ▶▶ button. Last entry wraps back to first. |
 | `rwSpeeds` | `number[]` | `[1,2,4,8,16,32]` | Absolute-value speed steps cycled by the ◀◀ button (negated internally). |
 | `dateTimeFormat` | `string` | `'MMM DD YYYY HH:mm:ss'` | Token-based format string for the controls datetime display |
+| `timezone` | `string` | browser local | IANA timezone name (e.g. `'UTC'`, `'America/New_York'`) or `'local'` for the browser's timezone. Controls both tick labels and the datetime display. When set, a short abbreviation (e.g. `UTC`, `EST`) appears to the right of the date. |
 | `onDateTimeClick` | `() => void` | — | Called when the user clicks the datetime display. Use to open your own date picker. |
 | `jumpToTime` | `JulianDate \| Date` | — | Set to programmatically jump the timeline to a moment (pans canvas + sets time). |
 | `theme` | `Partial<TimelineTheme>` | `defaultTheme` | Theme overrides (merged with defaults) |
@@ -172,6 +174,7 @@ Angular components use standalone imports — no NgModule required. Selectors: `
 | `onSwimLaneItemHover` | `(info: SwimLaneEventInfo \| null) => void` | — | Fires when mouse enters/leaves a swim lane item |
 | `onSwimLaneItemDoubleClick` | `(info: SwimLaneEventInfo) => void` | — | Fires when a swim lane item is double-clicked |
 | `onSwimLaneReorder` | `(orderedIds: string[]) => void` | — | Fires when swim lanes are reordered via drag. Receives the new lane id order. |
+| `labels` | `Partial<TimelineLabels>` | English defaults | Override any control-bar label or tooltip string. See [Labels & i18n](#labels--i18n). |
 
 ---
 
@@ -229,6 +232,60 @@ const theme = useMemo(() => {
 
 ---
 
+## Timezone
+
+By default the timeline displays all times in the **browser's local timezone**. Pass the `timezone` prop to use UTC or any [IANA timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) instead.
+
+```tsx
+// UTC
+<Timeline clock={viewer.clock} timezone="UTC" ... />
+
+// A named IANA zone
+<Timeline clock={viewer.clock} timezone="America/New_York" ... />
+
+// Back to local (or simply omit the prop)
+<Timeline clock={viewer.clock} timezone="local" ... />
+```
+
+Both the **canvas tick labels** and the **control bar datetime display** update to reflect the chosen timezone. When a non-local timezone is active a short abbreviation (e.g. `UTC`, `EST`, `PDT`) is shown to the right of the date line. The abbreviation is DST-aware — it automatically switches between `EST` and `EDT`, `PST` and `PDT`, etc.
+
+### `Timezones` constants
+
+```tsx
+import { Timezones } from '@kteneyck/cesium-timeline-react';
+
+<Timeline timezone={Timezones.UTC} ... />   // "UTC"
+<Timeline timezone={Timezones.LOCAL} ... /> // "local" (default behavior)
+```
+
+### `getTimezoneAbbr` utility
+
+Returns the short abbreviation for a given date and timezone, or `null` for local.
+
+```tsx
+import { getTimezoneAbbr } from '@kteneyck/cesium-timeline-react';
+
+getTimezoneAbbr(new Date(), 'UTC');               // → "UTC"
+getTimezoneAbbr(new Date(), 'America/Chicago');   // → "CDT" or "CST"
+getTimezoneAbbr(new Date());                      // → null  (local)
+```
+
+### `formatDateTime` with timezone
+
+The `formatDateTime` utility accepts an optional third argument:
+
+```tsx
+import { formatDateTime, DateTimeFormats } from '@kteneyck/cesium-timeline-react';
+
+formatDateTime(new Date(), DateTimeFormats.ISO, 'UTC');
+// → "2026-02-24 14:04:07"  (always in UTC regardless of local browser timezone)
+
+formatDateTime(new Date(), DateTimeFormats.DEFAULT, 'America/Los_Angeles');
+// → "Feb 24 2026 06:04:07"
+```
+
+---
+
 ## DateTime Format
 
 The `dateTimeFormat` prop controls the two-line datetime display in the control bar. It accepts a token-based format string.
@@ -357,6 +414,88 @@ const [pickerOpen, setPickerOpen] = useState(false);
 
 ---
 
+## Labels & i18n
+
+Every label and tooltip in the control bar is overridable via the `labels` prop. Pass a `Partial<TimelineLabels>` object — only the keys you provide are changed; everything else falls back to the English defaults.
+
+### `TimelineLabels` reference
+
+| Key | Default (English) | Notes |
+|-----|-------------------|-------|
+| `dateTimeClickTooltip` | `"Click to jump to a date/time"` | Tooltip on the datetime display when `onDateTimeClick` is wired up |
+| `liveLabel` | `"LIVE"` | LIVE button text when not at live time |
+| `liveActiveLabel` | `"● LIVE"` | LIVE button text when at live time |
+| `liveTooltip` | `"Jump to live (now)"` | LIVE button tooltip when not at live time |
+| `liveActiveTooltip` | `"Currently live"` | LIVE button tooltip when at live time |
+| `resetSpeedTooltip` | `"Reset to 1× speed"` | Tooltip on the speed-reset badge |
+| `jumpToStartTooltip` | `"Jump to start"` | ⏮ button tooltip when a start time is set |
+| `noStartTimeTooltip` | `"No start time set"` | ⏮ button tooltip when no start time is set |
+| `jumpToEndTooltip` | `"Jump to end"` | ⏭ button tooltip when an end time is set |
+| `noEndTimeTooltip` | `"No end time set"` | ⏭ button tooltip when no end time is set |
+| `rewindTooltip` | `"Rewind"` | ◀◀ button tooltip at normal speed |
+| `rewindActiveTooltip` | `(n) => "Reverse N× — click to speed up…"` | ◀◀ button tooltip while rewinding — receives the current multiplier |
+| `playTooltip` | `"Play"` | ▶ button tooltip when stopped |
+| `playFromRewindTooltip` | `"Play (reset to 1×)"` | ▶ button tooltip when coming out of rewind |
+| `pauseTooltip` | `"Pause"` | ▶ button tooltip when playing |
+| `fastForwardTooltip` | `"Fast forward"` | ▶▶ button tooltip at normal speed |
+| `fastForwardActiveTooltip` | `(n) => "N× speed — click to increase…"` | ▶▶ button tooltip while fast-forwarding — receives the current multiplier |
+| `collapseSwimLanesTooltip` | `"Collapse swim lanes"` | Chevron button tooltip when lanes are visible |
+| `expandSwimLanesTooltip` | `"Expand swim lanes"` | Chevron button tooltip when lanes are hidden |
+
+Dynamic fields (`rewindActiveTooltip`, `fastForwardActiveTooltip`) accept either a **static string** or a **function** `(multiplier: number) => string`. Use a function when you want to embed the speed value in your translated string.
+
+### React example
+
+```tsx
+import { Timeline } from '@kteneyck/cesium-timeline-react';
+import type { TimelineLabels } from '@kteneyck/cesium-timeline-core';
+
+const frLabels: Partial<TimelineLabels> = {
+  playTooltip: 'Lecture',
+  pauseTooltip: 'Pause',
+  liveLabel: 'EN DIRECT',
+  liveActiveLabel: '● EN DIRECT',
+  liveTooltip: 'Aller en direct',
+  liveActiveTooltip: 'Vous êtes en direct',
+  rewindTooltip: 'Retour rapide',
+  rewindActiveTooltip: (n) => `Retour ${n}× — cliquer pour accélérer`,
+  fastForwardTooltip: 'Avance rapide',
+  fastForwardActiveTooltip: (n) => `${n}× — cliquer pour augmenter la vitesse`,
+  collapseSwimLanesTooltip: 'Réduire les pistes',
+  expandSwimLanesTooltip: 'Développer les pistes',
+};
+
+<Timeline clock={viewer.clock} labels={frLabels} height={120} />
+```
+
+### Angular example
+
+```typescript
+// component.ts
+import type { TimelineLabels } from '@kteneyck/cesium-timeline-core';
+
+@Component({ ... })
+export class AppComponent {
+  frLabels: Partial<TimelineLabels> = {
+    playTooltip: 'Lecture',
+    pauseTooltip: 'Pause',
+    liveLabel: 'EN DIRECT',
+    liveActiveLabel: '● EN DIRECT',
+    liveTooltip: 'Aller en direct',
+    liveActiveTooltip: 'Vous êtes en direct',
+    rewindActiveTooltip: (n) => `Retour ${n}× — cliquer pour accélérer`,
+    fastForwardActiveTooltip: (n) => `${n}× — cliquer pour augmenter la vitesse`,
+  };
+}
+```
+
+```html
+<!-- component.html -->
+<ct-timeline [clock]="clock" [labels]="frLabels" [height]="120" />
+```
+
+---
+
 ## Exports
 
 ### React
@@ -385,7 +524,10 @@ import {
 ```tsx
 import {
   DateTimeFormats,   // Format string presets
-  formatDateTime,    // Token-based date formatter
+  Timezones,         // { LOCAL: 'local', UTC: 'UTC' } convenience constants
+  DEFAULT_LABELS,    // Default English label/tooltip strings
+  formatDateTime,    // Token-based date formatter (date, format, timezone?)
+  getTimezoneAbbr,   // Short timezone abbreviation for a date (date, timezone?)
   splitForDisplay,   // Split format string into time/date parts
   toJulianDate,      // Convert Date | JulianDate → JulianDate
   toDate,            // Convert Date | JulianDate → Date
@@ -401,6 +543,7 @@ import {
 // TypeScript types
 import type {
   TimelineTheme,
+  TimelineLabels,
   SwimLane,
   SwimLaneItem,
   SwimLaneItemStyle,

package/{dist/fesm2022 → fesm2022}/kteneyck-cesium-timeline-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as Cesium from 'cesium';
-import { splitForDisplay, formatDateTime, getTimezoneAbbr, MIN_SPAN_MS, MAX_SPAN_MS, drawTimeline, hitTestSwimLane, hitTestLaneLabel, isInSwimLaneRegion, zoomRange, DEFAULT_LANE_HEIGHT, LANE_GAP, totalSwimLaneHeight, TICK_AREA_HEIGHT, SWIM_LANE_SCROLL_SPEED, defaultTheme, toJulianDate } from '@kteneyck/cesium-timeline-core';
+import { splitForDisplay, formatDateTime, getTimezoneAbbr, DEFAULT_LABELS, resolveLabel, MIN_SPAN_MS, MAX_SPAN_MS, drawTimeline, hitTestSwimLane, hitTestLaneLabel, isInSwimLaneRegion, zoomRange, DEFAULT_LANE_HEIGHT, LANE_GAP, totalSwimLaneHeight, TICK_AREA_HEIGHT, SWIM_LANE_SCROLL_SPEED, defaultTheme, toJulianDate } from '@kteneyck/cesium-timeline-core';
 export * from '@kteneyck/cesium-timeline-core';
 export { TICK_AREA_HEIGHT } from '@kteneyck/cesium-timeline-core';
 
@@ -18,6 +18,7 @@ class TimelineControlsComponent {
     showJumpToEnd;
     theme;
     swimLanesVisible;
+    labels;
     dateTimeClick = new EventEmitter();
     playPause = new EventEmitter();
     jumpToStart = new EventEmitter();
@@ -40,6 +41,10 @@ class TimelineControlsComponent {
     get formattedTime() { return formatDateTime(this.currentTime, this.timeFormat, this.timezone); }
     get formattedDate() { return formatDateTime(this.currentTime, this.dateFormat, this.timezone); }
     get timezoneAbbr() { return getTimezoneAbbr(this.currentTime, this.timezone); }
+    /** Merged labels — defaults overridden by whatever the consumer provides. */
+    get l() { return { ...DEFAULT_LABELS, ...this.labels }; }
+    resolveRewindActive(multiplier) { return resolveLabel(this.l.rewindActiveTooltip, multiplier); }
+    resolveFastForwardActive(multiplier) { return resolveLabel(this.l.fastForwardActiveTooltip, multiplier); }
     ngAfterViewInit() {
         const el = this.containerRef?.nativeElement;
         if (!el)
@@ -53,7 +58,7 @@ class TimelineControlsComponent {
         this.ro?.disconnect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineControlsComponent, isStandalone: true, selector: "ct-timeline-controls", inputs: { currentTime: "currentTime", isPlaying: "isPlaying", multiplier: "multiplier", dateTimeFormat: "dateTimeFormat", timezone: "timezone", isLive: "isLive", hasStartTime: "hasStartTime", hasEndTime: "hasEndTime", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", theme: "theme", swimLanesVisible: "swimLanesVisible" }, outputs: { dateTimeClick: "dateTimeClick", playPause: "playPause", jumpToStart: "jumpToStart", rewind: "rewind", fastForward: "fastForward", jumpToEnd: "jumpToEnd", jumpToLive: "jumpToLive", resetSpeed: "resetSpeed", toggleSwimLanes: "toggleSwimLanes" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineControlsComponent, isStandalone: true, selector: "ct-timeline-controls", inputs: { currentTime: "currentTime", isPlaying: "isPlaying", multiplier: "multiplier", dateTimeFormat: "dateTimeFormat", timezone: "timezone", isLive: "isLive", hasStartTime: "hasStartTime", hasEndTime: "hasEndTime", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", theme: "theme", swimLanesVisible: "swimLanesVisible", labels: "labels" }, outputs: { dateTimeClick: "dateTimeClick", playPause: "playPause", jumpToStart: "jumpToStart", rewind: "rewind", fastForward: "fastForward", jumpToEnd: "jumpToEnd", jumpToLive: "jumpToLive", resetSpeed: "resetSpeed", toggleSwimLanes: "toggleSwimLanes" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
     <div
       #container
       [style.display]="isNarrow ? 'flex' : 'grid'"
@@ -68,7 +73,7 @@ class TimelineControlsComponent {
       <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
         <div
           (click)="dateTimeClick.emit()"
-          [title]="dateTimeClick.observed ? 'Click to jump to a date/time' : ''"
+          [title]="dateTimeClick.observed ? l.dateTimeClickTooltip : ''"
           [style.color]="theme.labelColor"
           style="font-family:monospace;line-height:1.15;border-radius:4px;padding:2px 4px;transition:background 0.15s"
           [style.cursor]="dateTimeClick.observed ? 'pointer' : 'default'"
@@ -102,9 +107,9 @@ class TimelineControlsComponent {
             [style.border-color]="theme.buttonActiveColor"
             [style.opacity]="isLive ? 1 : 0.55"
             style="background:none;border:1px solid;cursor:pointer;font-size:11px;font-weight:bold;letter-spacing:0.05em;width:52px;min-width:52px;height:20px;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;font-family:system-ui,-apple-system,sans-serif;transition:opacity 0.15s"
-            [title]="isLive ? 'Currently live' : 'Jump to live (now)'"
+            [title]="isLive ? l.liveActiveTooltip : l.liveTooltip"
           >
-            {{ isLive ? '● LIVE' : 'LIVE' }}
+            {{ isLive ? l.liveActiveLabel : l.liveLabel }}
           </button>
 
           <!-- Speed badge -->
@@ -115,7 +120,7 @@ class TimelineControlsComponent {
                 [style.color]="theme.buttonActiveColor"
                 [style.border-color]="theme.buttonActiveColor + '44'"
                 style="background:none;border:1px solid;cursor:pointer;font-size:11px;width:52px;min-width:52px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0;font-family:system-ui,-apple-system,sans-serif;transition:background-color 0.15s"
-                title="Reset to 1× speed"
+                [title]="l.resetSpeedTooltip"
               >
                 {{ isRewinding ? '◀ ' + absMultiplier + '×' : absMultiplier + '× ▶' }}
               </button>
@@ -138,7 +143,7 @@ class TimelineControlsComponent {
             [style.opacity]="hasStartTime ? 1 : 0.3"
             [style.cursor]="hasStartTime ? 'pointer' : 'default'"
             class="ct-btn"
-            [title]="hasStartTime ? 'Jump to start' : 'No start time set'"
+            [title]="hasStartTime ? l.jumpToStartTooltip : l.noStartTimeTooltip"
           >⏮</button>
         }
 
@@ -147,7 +152,7 @@ class TimelineControlsComponent {
           [style.color]="isRewinding ? theme.buttonActiveColor : theme.buttonColor"
           [style.border-color]="isRewinding ? theme.buttonActiveColor + '33' : 'transparent'"
           class="ct-btn ct-btn-wide"
-          [title]="isRewinding ? 'Reverse ' + absMultiplier + '× — click to speed up' : 'Rewind'"
+          [title]="isRewinding ? resolveRewindActive(absMultiplier) : l.rewindTooltip"
         >
           @if (isRewinding) {
             <span style="font-size:11px;font-weight:bold">{{ absMultiplier }}×</span>◀◀
@@ -162,7 +167,7 @@ class TimelineControlsComponent {
           [style.border-color]="theme.buttonActiveColor + '55'"
           [style.padding-left]="isPlaying ? '0' : '2px'"
           class="ct-btn ct-btn-play"
-          [title]="isPlaying ? 'Pause' : (isRewinding ? 'Play (reset to 1×)' : 'Play')"
+          [title]="isPlaying ? l.pauseTooltip : (isRewinding ? l.playFromRewindTooltip : l.playTooltip)"
         >
           @if (isPlaying) {
             <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor">
@@ -179,7 +184,7 @@ class TimelineControlsComponent {
           [style.color]="isFastForward ? theme.buttonActiveColor : theme.buttonColor"
           [style.border-color]="isFastForward ? theme.buttonActiveColor + '33' : 'transparent'"
           class="ct-btn ct-btn-wide"
-          [title]="isFastForward ? absMultiplier + '× speed — click to increase' : 'Fast forward'"
+          [title]="isFastForward ? resolveFastForwardActive(absMultiplier) : l.fastForwardTooltip"
         >
           @if (isFastForward) {
             ▶▶<span style="font-size:11px;font-weight:bold">{{ absMultiplier }}×</span>
@@ -196,7 +201,7 @@ class TimelineControlsComponent {
             [style.opacity]="hasEndTime ? 1 : 0.3"
             [style.cursor]="hasEndTime ? 'pointer' : 'default'"
             class="ct-btn"
-            [title]="hasEndTime ? 'Jump to end' : 'No end time set'"
+            [title]="hasEndTime ? l.jumpToEndTooltip : l.noEndTimeTooltip"
           >⏭</button>
         }
       </div>
@@ -210,7 +215,7 @@ class TimelineControlsComponent {
               [style.color]="theme.buttonActiveColor"
               [style.border-color]="theme.buttonActiveColor + '33'"
               class="ct-btn"
-              [title]="swimLanesVisible ? 'Collapse swim lanes' : 'Expand swim lanes'"
+              [title]="swimLanesVisible ? l.collapseSwimLanesTooltip : l.expandSwimLanesTooltip"
             >
               <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 @if (swimLanesVisible) {
@@ -231,7 +236,7 @@ class TimelineControlsComponent {
           [style.border-color]="theme.buttonActiveColor + '33'"
           class="ct-btn"
           style="margin-left:4px"
-          [title]="swimLanesVisible ? 'Collapse swim lanes' : 'Expand swim lanes'"
+          [title]="swimLanesVisible ? l.collapseSwimLanesTooltip : l.expandSwimLanesTooltip"
         >
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             @if (swimLanesVisible) {
@@ -262,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
       <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
         <div
           (click)="dateTimeClick.emit()"
-          [title]="dateTimeClick.observed ? 'Click to jump to a date/time' : ''"
+          [title]="dateTimeClick.observed ? l.dateTimeClickTooltip : ''"
           [style.color]="theme.labelColor"
           style="font-family:monospace;line-height:1.15;border-radius:4px;padding:2px 4px;transition:background 0.15s"
           [style.cursor]="dateTimeClick.observed ? 'pointer' : 'default'"
@@ -296,9 +301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             [style.border-color]="theme.buttonActiveColor"
             [style.opacity]="isLive ? 1 : 0.55"
             style="background:none;border:1px solid;cursor:pointer;font-size:11px;font-weight:bold;letter-spacing:0.05em;width:52px;min-width:52px;height:20px;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;font-family:system-ui,-apple-system,sans-serif;transition:opacity 0.15s"
-            [title]="isLive ? 'Currently live' : 'Jump to live (now)'"
+            [title]="isLive ? l.liveActiveTooltip : l.liveTooltip"
           >
-            {{ isLive ? '● LIVE' : 'LIVE' }}
+            {{ isLive ? l.liveActiveLabel : l.liveLabel }}
           </button>
 
           <!-- Speed badge -->
@@ -309,7 +314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 [style.color]="theme.buttonActiveColor"
                 [style.border-color]="theme.buttonActiveColor + '44'"
                 style="background:none;border:1px solid;cursor:pointer;font-size:11px;width:52px;min-width:52px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0;font-family:system-ui,-apple-system,sans-serif;transition:background-color 0.15s"
-                title="Reset to 1× speed"
+                [title]="l.resetSpeedTooltip"
               >
                 {{ isRewinding ? '◀ ' + absMultiplier + '×' : absMultiplier + '× ▶' }}
               </button>
@@ -332,7 +337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             [style.opacity]="hasStartTime ? 1 : 0.3"
             [style.cursor]="hasStartTime ? 'pointer' : 'default'"
             class="ct-btn"
-            [title]="hasStartTime ? 'Jump to start' : 'No start time set'"
+            [title]="hasStartTime ? l.jumpToStartTooltip : l.noStartTimeTooltip"
           >⏮</button>
         }
 
@@ -341,7 +346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
           [style.color]="isRewinding ? theme.buttonActiveColor : theme.buttonColor"
           [style.border-color]="isRewinding ? theme.buttonActiveColor + '33' : 'transparent'"
           class="ct-btn ct-btn-wide"
-          [title]="isRewinding ? 'Reverse ' + absMultiplier + '× — click to speed up' : 'Rewind'"
+          [title]="isRewinding ? resolveRewindActive(absMultiplier) : l.rewindTooltip"
         >
           @if (isRewinding) {
             <span style="font-size:11px;font-weight:bold">{{ absMultiplier }}×</span>◀◀
@@ -356,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
           [style.border-color]="theme.buttonActiveColor + '55'"
           [style.padding-left]="isPlaying ? '0' : '2px'"
           class="ct-btn ct-btn-play"
-          [title]="isPlaying ? 'Pause' : (isRewinding ? 'Play (reset to 1×)' : 'Play')"
+          [title]="isPlaying ? l.pauseTooltip : (isRewinding ? l.playFromRewindTooltip : l.playTooltip)"
         >
           @if (isPlaying) {
             <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor">
@@ -373,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
           [style.color]="isFastForward ? theme.buttonActiveColor : theme.buttonColor"
           [style.border-color]="isFastForward ? theme.buttonActiveColor + '33' : 'transparent'"
           class="ct-btn ct-btn-wide"
-          [title]="isFastForward ? absMultiplier + '× speed — click to increase' : 'Fast forward'"
+          [title]="isFastForward ? resolveFastForwardActive(absMultiplier) : l.fastForwardTooltip"
         >
           @if (isFastForward) {
             ▶▶<span style="font-size:11px;font-weight:bold">{{ absMultiplier }}×</span>
@@ -390,7 +395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             [style.opacity]="hasEndTime ? 1 : 0.3"
             [style.cursor]="hasEndTime ? 'pointer' : 'default'"
             class="ct-btn"
-            [title]="hasEndTime ? 'Jump to end' : 'No end time set'"
+            [title]="hasEndTime ? l.jumpToEndTooltip : l.noEndTimeTooltip"
           >⏭</button>
         }
       </div>
@@ -404,7 +409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
               [style.color]="theme.buttonActiveColor"
               [style.border-color]="theme.buttonActiveColor + '33'"
               class="ct-btn"
-              [title]="swimLanesVisible ? 'Collapse swim lanes' : 'Expand swim lanes'"
+              [title]="swimLanesVisible ? l.collapseSwimLanesTooltip : l.expandSwimLanesTooltip"
             >
               <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 @if (swimLanesVisible) {
@@ -425,7 +430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
           [style.border-color]="theme.buttonActiveColor + '33'"
           class="ct-btn"
           style="margin-left:4px"
-          [title]="swimLanesVisible ? 'Collapse swim lanes' : 'Expand swim lanes'"
+          [title]="swimLanesVisible ? l.collapseSwimLanesTooltip : l.expandSwimLanesTooltip"
         >
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             @if (swimLanesVisible) {
@@ -462,6 +467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], swimLanesVisible: [{
                 type: Input
+            }], labels: [{
+                type: Input
             }], dateTimeClick: [{
                 type: Output
             }], playPause: [{
@@ -1193,6 +1200,8 @@ class TimelineComponent {
     swimLanes;
     showSwimLanes;
     swimLaneTransition = 'animated';
+    /** Overrides for control-bar labels and tooltips (i18n / custom verbiage). */
+    labels;
     // ── Outputs ────────────────────────────────────────────────────────────
     timeChange = new EventEmitter();
     playPause = new EventEmitter();
@@ -1429,7 +1438,7 @@ class TimelineComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineComponent, isStandalone: true, selector: "ct-timeline", inputs: { startTime: "startTime", endTime: "endTime", currentTime: "currentTime", clock: "clock", height: "height", showControls: "showControls", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", enableDrag: "enableDrag", dateTimeFormat: "dateTimeFormat", jumpToTime: "jumpToTime", maxTicks: "maxTicks", ffSpeeds: "ffSpeeds", rwSpeeds: "rwSpeeds", theme: "theme", cssClass: "cssClass", timezone: "timezone", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes", swimLaneTransition: "swimLaneTransition" }, outputs: { timeChange: "timeChange", playPause: "playPause", multiplierChange: "multiplierChange", dateTimeClick: "dateTimeClick", showSwimLanesChange: "showSwimLanesChange", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasComp", first: true, predicate: TimelineCanvasComponent, descendants: true }, { propertyName: "controlsRef", first: true, predicate: ["controlsEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineComponent, isStandalone: true, selector: "ct-timeline", inputs: { startTime: "startTime", endTime: "endTime", currentTime: "currentTime", clock: "clock", height: "height", showControls: "showControls", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", enableDrag: "enableDrag", dateTimeFormat: "dateTimeFormat", jumpToTime: "jumpToTime", maxTicks: "maxTicks", ffSpeeds: "ffSpeeds", rwSpeeds: "rwSpeeds", theme: "theme", cssClass: "cssClass", timezone: "timezone", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes", swimLaneTransition: "swimLaneTransition", labels: "labels" }, outputs: { timeChange: "timeChange", playPause: "playPause", multiplierChange: "multiplierChange", dateTimeClick: "dateTimeClick", showSwimLanesChange: "showSwimLanesChange", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasComp", first: true, predicate: TimelineCanvasComponent, descendants: true }, { propertyName: "controlsRef", first: true, predicate: ["controlsEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       [class]="cssClass"
       [style.width]="'100%'"
@@ -1464,6 +1473,7 @@ class TimelineComponent {
             (resetSpeed)="applyMultiplier(1)"
             (dateTimeClick)="dateTimeClick.emit()"
             (toggleSwimLanes)="handleToggleSwimLanes()"
+            [labels]="labels"
           />
         </div>
       }
@@ -1489,7 +1499,7 @@ class TimelineComponent {
         />
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TimelineControlsComponent, selector: "ct-timeline-controls", inputs: ["currentTime", "isPlaying", "multiplier", "dateTimeFormat", "timezone", "isLive", "hasStartTime", "hasEndTime", "showJumpToStart", "showJumpToEnd", "theme", "swimLanesVisible"], outputs: ["dateTimeClick", "playPause", "jumpToStart", "rewind", "fastForward", "jumpToEnd", "jumpToLive", "resetSpeed", "toggleSwimLanes"] }, { kind: "component", type: TimelineCanvasComponent, selector: "ct-timeline-canvas", inputs: ["currentTime", "defaultStartMs", "defaultEndMs", "theme", "maxTicks", "timezone", "swimLanes", "showSwimLanes"], outputs: ["timeChange", "dragStart", "dragEnd", "swimLaneItemClick", "swimLaneItemHover", "swimLaneItemDoubleClick", "swimLaneItemContextMenu", "swimLaneReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TimelineControlsComponent, selector: "ct-timeline-controls", inputs: ["currentTime", "isPlaying", "multiplier", "dateTimeFormat", "timezone", "isLive", "hasStartTime", "hasEndTime", "showJumpToStart", "showJumpToEnd", "theme", "swimLanesVisible", "labels"], outputs: ["dateTimeClick", "playPause", "jumpToStart", "rewind", "fastForward", "jumpToEnd", "jumpToLive", "resetSpeed", "toggleSwimLanes"] }, { kind: "component", type: TimelineCanvasComponent, selector: "ct-timeline-canvas", inputs: ["currentTime", "defaultStartMs", "defaultEndMs", "theme", "maxTicks", "timezone", "swimLanes", "showSwimLanes"], outputs: ["timeChange", "dragStart", "dragEnd", "swimLaneItemClick", "swimLaneItemHover", "swimLaneItemDoubleClick", "swimLaneItemContextMenu", "swimLaneReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
@@ -1528,6 +1538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             (resetSpeed)="applyMultiplier(1)"
             (dateTimeClick)="dateTimeClick.emit()"
             (toggleSwimLanes)="handleToggleSwimLanes()"
+            [labels]="labels"
           />
         </div>
       }
@@ -1594,6 +1605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], swimLaneTransition: [{
                 type: Input
+            }], labels: [{
+                type: Input
             }], timeChange: [{
                 type: Output
             }], playPause: [{