@editframe/elements 0.49.6 → 0.50.0

package/dist/gui/timeline/EFTimeline.d.ts

@@ -69,6 +69,7 @@ declare class EFTimeline extends EFTimeline_base {
    * This should be set to the canvas element.
    */
   private targetElement;
+  private _highlightedElement;
   private currentTimeMs;
   private isPlaying;
   private isLooping;
@@ -81,6 +82,7 @@ declare class EFTimeline extends EFTimeline_base {
   private playheadRef;
   private playheadHandleRef;
   private frameHighlightRef;
+  private playheadLayerRef;
   private animationFrameId?;
   private selectionChangeHandler?;
   private scrollHandler?;
@@ -112,12 +114,13 @@ declare class EFTimeline extends EFTimeline_base {
   private getCanvas;
   private getCanvasSelectionContext;
   /**
-   * Get the currently highlighted element from the canvas.
+   * Get the currently highlighted element.
+   * Local state is the source of truth; canvas is kept in sync as a side effect.
    */
   getHighlightedElement(): HTMLElement | null;
   /**
-   * Set the highlighted element on the canvas.
-   * Called when user hovers a row in the timeline.
+   * Set the highlighted element.
+   * Always updates local state (triggers re-render); also syncs to canvas when present.
    */
   setHighlightedElement(element: HTMLElement | null): void;
   get targetTemporal(): TemporalMixinInterface | null;
@@ -170,6 +173,12 @@ declare class EFTimeline extends EFTimeline_base {
   protected updated(changedProperties: PropertyValues): void;
   private setupSelectionListener;
   private removeSelectionListener;
+  /**
+   * Single source-of-truth for applying a scroll position change.
+   * Keeps ruler-outer, viewportScrollLeft, playhead, and clip-path all in sync
+   * immediately — without relying on the async scroll event.
+   */
+  private applyScrollLeft;
   private setupScrollListener;
   private removeScrollListener;
   private setupKeyboardListener;
@@ -251,14 +260,10 @@ declare class EFTimeline extends EFTimeline_base {
   private renderTimeDisplay;
   private renderZoomControls;
   /**
-   * Calculate frame highlight bounds (semantics).
-   * Returns null if frame markers aren't visible or duration is invalid.
-   */
-  private calculateFrameHighlightBounds;
-  /**
-   * Render frame highlight (mechanism).
-   * Shows the current frame as a rectangle to indicate frames have duration.
-   * Only rendered when frame markers are visible (zoom level high enough).
+   * Render the frame highlight placeholder.
+   * Position and visibility are controlled exclusively by updatePlayheadPositionDirect
+   * via the frameHighlightRef so that Lit re-renders never clobber the 60fps rAF
+   * position with the throttled this.currentTimeMs value.
    */
   private renderFrameHighlight;
   private renderControls;

package/dist/gui/timeline/EFTimeline.js

@@ -1,8 +1,8 @@
 import { TWMixin } from "../TWMixin2.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { currentTimeContext } from "../currentTimeContext.js";
 import { durationContext } from "../durationContext.js";
 import { loopContext, playingContext } from "../playingContext.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { isEFTemporal } from "../../elements/EFTemporal.js";
 import { targetTemporalContext } from "../ContextMixin.js";
 import { TargetController } from "../../elements/TargetController.js";
@@ -20,7 +20,6 @@ import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { consume, provide } from "@lit/context";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 //#region src/gui/timeline/EFTimeline.ts
@@ -46,6 +45,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 		this.hide = "";
 		this.show = "";
 		this.targetElement = null;
+		this._highlightedElement = null;
 		this.currentTimeMs = 0;
 		this.isPlaying = false;
 		this.isLooping = false;
@@ -67,6 +67,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 		this.playheadRef = createRef();
 		this.playheadHandleRef = createRef();
 		this.frameHighlightRef = createRef();
+		this.playheadLayerRef = createRef();
 		this.isDraggingPlayhead = false;
 		this.cachedViewportWidth = 800;
 		this.saveZoomScrollDebounceTimer = null;
@@ -83,13 +84,14 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         width: 100%;
         height: 100%;
         min-height: 100px;
+        user-select: none;
         
         /* Layout coordination via CSS custom properties */
         --timeline-hierarchy-width: var(--ef-hierarchy-width, 200px);
         --timeline-row-height: var(--ef-row-height, 24px);
         --timeline-track-height: var(--ef-track-height, 24px);
         
-        /* Component tokens (reference globals from ef-theme.css) */
+        /* Component alias tokens — resolved from ef-color-* regardless of theme */
         --timeline-bg: var(--ef-color-bg);
         --timeline-border: var(--ef-color-border);
         --timeline-header-bg: var(--ef-color-bg-panel);
@@ -98,6 +100,78 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         --timeline-track-bg: var(--ef-color-bg-inset);
         --timeline-track-hover: var(--ef-color-hover);
         --timeline-playhead: var(--ef-color-playhead);
+
+        /* Filmstrip alias tokens */
+        --filmstrip-bg: var(--ef-color-bg-inset);
+        --filmstrip-item-focused: rgba(229, 57, 53, 0.3);
+        --filmstrip-border: var(--ef-color-border);
+        --filmstrip-caption-bg: rgba(76, 175, 80, 0.15);
+        --filmstrip-caption-border: rgba(76, 175, 80, 0.5);
+        --filmstrip-segment-bg: rgba(76, 175, 80, 0.3);
+        --filmstrip-segment-border: rgba(76, 175, 80, 0.6);
+        --filmstrip-timegroup-focused: var(--ef-color-focused);
+        --filmstrip-animation-bg: rgba(229, 57, 53, 0.2);
+        --filmstrip-keyframe-bg: rgba(229, 57, 53, 0.4);
+      }
+
+      :host-context(.dark) {
+        --ef-color-bg: #0a0a0a;
+        --ef-color-bg-panel: #111111;
+        --ef-color-bg-elevated: #1a1a1a;
+        --ef-color-bg-inset: #050505;
+        --ef-color-border: rgba(255, 255, 255, 0.15);
+        --ef-color-border-subtle: rgba(255, 255, 255, 0.08);
+        --ef-color-text: #fafafa;
+        --ef-color-text-muted: #9ca3af;
+        --ef-color-text-subtle: #6b7280;
+        --ef-color-primary: #3b82f6;
+        --ef-color-primary-subtle: rgba(59, 130, 246, 0.15);
+        --ef-color-hover: rgba(255, 255, 255, 0.06);
+        --ef-color-selected: rgba(59, 130, 246, 0.2);
+        --ef-color-selected-subtle: rgba(59, 130, 246, 0.1);
+        --ef-color-focused: rgba(59, 130, 246, 0.25);
+        --ef-color-success: #059669;
+        --ef-color-error: #dc2626;
+        --ef-color-playhead: #dc2626;
+        --ef-color-type-video: #3b82f6;
+        --ef-color-type-audio: #10b981;
+        --ef-color-type-image: #8b5cf6;
+        --ef-color-type-text: #f59e0b;
+        --ef-color-type-captions: #14b8a6;
+        --ef-color-type-timegroup: #64748b;
+        --filmstrip-item-bg: rgba(17, 17, 17, 0.9);
+        --filmstrip-waveform-bg: rgba(0, 0, 0, 0.4);
+        --filmstrip-waveform-border: rgba(255, 255, 255, 0.15);
+      }
+
+      :host-context(.light) {
+        --ef-color-bg: #ffffff;
+        --ef-color-bg-panel: #f8f8f8;
+        --ef-color-bg-elevated: #ffffff;
+        --ef-color-bg-inset: #eeeeee;
+        --ef-color-border: rgba(0, 0, 0, 0.20);
+        --ef-color-border-subtle: rgba(0, 0, 0, 0.10);
+        --ef-color-text: #0a0a0a;
+        --ef-color-text-muted: #404040;
+        --ef-color-text-subtle: #666666;
+        --ef-color-primary: #2563eb;
+        --ef-color-primary-subtle: rgba(37, 99, 235, 0.12);
+        --ef-color-hover: rgba(0, 0, 0, 0.06);
+        --ef-color-selected: rgba(37, 99, 235, 0.18);
+        --ef-color-selected-subtle: rgba(37, 99, 235, 0.10);
+        --ef-color-focused: rgba(37, 99, 235, 0.25);
+        --ef-color-success: #059669;
+        --ef-color-error: #dc2626;
+        --ef-color-playhead: #dc2626;
+        --ef-color-type-video: #2563eb;
+        --ef-color-type-audio: #059669;
+        --ef-color-type-image: #7c3aed;
+        --ef-color-type-text: #ea580c;
+        --ef-color-type-captions: #0891b2;
+        --ef-color-type-timegroup: #475569;
+        --filmstrip-item-bg: rgba(238, 238, 238, 0.95);
+        --filmstrip-waveform-bg: rgba(0, 0, 0, 0.06);
+        --filmstrip-waveform-border: rgba(0, 0, 0, 0.12);
       }
       
       .timeline-container {
@@ -140,8 +214,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         min-width: 32px;
         height: 32px;
         padding: 6px 10px;
-        background: var(--ef-color-bg-inset);
-        border: 1px solid var(--ef-color-border-subtle);
+        background: var(--ef-color-bg-inset, #050505);
+        border: 1px solid var(--ef-color-border-subtle, rgba(255, 255, 255, 0.08));
         border-radius: 6px;
         color: inherit;
         font-size: 14px;
@@ -153,8 +227,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
       }
       
       .control-btn:hover:not(:disabled) {
-        background: var(--ef-color-hover);
-        border-color: var(--ef-color-border);
+        background: var(--ef-color-hover, rgba(255, 255, 255, 0.06));
+        border-color: var(--ef-color-border, rgba(255, 255, 255, 0.15));
       }
       
       .control-btn:disabled {
@@ -163,8 +237,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
       }
       
       .control-btn.active {
-        background: var(--ef-color-primary-subtle);
-        border-color: var(--ef-color-primary);
+        background: var(--ef-color-primary-subtle, rgba(59, 130, 246, 0.15));
+        border-color: var(--ef-color-primary, #3b82f6);
       }
       
       .time-display {
@@ -172,7 +246,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         font-size: 13px;
         font-weight: 500;
         padding: 6px 12px;
-        background: var(--ef-color-bg-elevated);
+        background: var(--ef-color-bg-elevated, #1a1a1a);
         border-radius: 6px;
         letter-spacing: 0.5px;
       }
@@ -189,8 +263,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(--ef-color-bg-inset);
-        border: 1px solid var(--ef-color-border-subtle);
+        background: var(--ef-color-bg-inset, #050505);
+        border: 1px solid var(--ef-color-border-subtle, rgba(255, 255, 255, 0.08));
         border-radius: 6px;
         color: inherit;
         font-size: 18px;
@@ -200,8 +274,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
       }
       
       .zoom-btn:hover {
-        background: var(--ef-color-hover);
-        border-color: var(--ef-color-border);
+        background: var(--ef-color-hover, rgba(255, 255, 255, 0.06));
+        border-color: var(--ef-color-border, rgba(255, 255, 255, 0.15));
         transform: scale(1.05);
       }
       
@@ -220,8 +294,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
       }
 
       .zoom-label:hover {
-        background: var(--ef-color-hover);
-        border-color: var(--ef-color-border-subtle);
+        background: var(--ef-color-hover, rgba(255, 255, 255, 0.06));
+        border-color: var(--ef-color-border-subtle, rgba(255, 255, 255, 0.08));
       }
 
       .zoom-btn:disabled {
@@ -239,13 +313,15 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         overflow: hidden;
       }
       
+      /* Clips the ruler row during horizontal scroll — scrollLeft synced via JS */
       .ruler-row {
         display: flex;
         height: 24px;
         background: var(--timeline-ruler-bg);
         border-bottom: 1px solid var(--timeline-border);
         flex-shrink: 0;
-        /* Sticky positioning for native scroll sync */
+        /* Sticky inside tracks-scroll so the ruler stays visible during vertical scroll.
+           The ruler scrolls horizontally with tracks-scroll natively — no sync needed. */
         position: sticky;
         top: 0;
         z-index: 10;
@@ -348,6 +424,20 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         display: flex;
         flex-direction: column;
       }
+
+      /* Fills the label column background for the full tracks height, covering
+         empty space below the last row. Sits in the same grid cell as the rows
+         layer but at z-index 0 so actual row labels (z-index: 8) paint above it. */
+      .label-column-bg {
+        align-self: stretch;
+        position: sticky;
+        left: 0;
+        width: var(--timeline-hierarchy-width, 200px);
+        background: var(--ef-color-bg-panel);
+        border-right: 1px solid var(--ef-color-border-subtle);
+        z-index: 0;
+        pointer-events: none;
+      }
       
       /* === PLAYHEAD (sticky layer that stays visible during vertical scroll) === */
       .playhead-layer {
@@ -358,6 +448,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         /* Below sticky labels (z-index 10-11) but above tracks */
         z-index: 5;
         overflow: hidden;
+        /* clip-path is set dynamically in updatePlayheadPositionDirect so it
+           tracks horizontal scroll and always aligns with the label column edge. */
       }
       
       .playhead {
@@ -385,8 +477,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         position: absolute;
         top: 0;
         bottom: 0;
-        background: var(--ef-color-primary-subtle);
-        border-left: 2px solid var(--ef-color-primary);
+        background: var(--ef-color-primary-subtle, rgba(59, 130, 246, 0.15));
+        border-left: 2px solid var(--ef-color-primary, #3b82f6);
         pointer-events: none;
       }
       
@@ -395,7 +487,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: var(--ef-color-text-subtle);
+        color: var(--ef-color-text-subtle, #6b7280);
         font-style: italic;
       }
     `];
@@ -475,16 +567,18 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 		return this.getCanvas()?.selectionContext;
 	}
 	/**
-	* Get the currently highlighted element from the canvas.
+	* Get the currently highlighted element.
+	* Local state is the source of truth; canvas is kept in sync as a side effect.
 	*/
 	getHighlightedElement() {
-		return this.getCanvas()?.highlightedElement ?? null;
+		return this._highlightedElement;
 	}
 	/**
-	* Set the highlighted element on the canvas.
-	* Called when user hovers a row in the timeline.
+	* Set the highlighted element.
+	* Always updates local state (triggers re-render); also syncs to canvas when present.
 	*/
 	setHighlightedElement(element) {
+		this._highlightedElement = element;
 		this.getCanvas()?.setHighlightedElement(element);
 	}
 	get targetTemporal() {
@@ -581,11 +675,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			if (typeof state.viewportScrollLeft === "number" && state.viewportScrollLeft >= 0) {
 				const scrollLeft = state.viewportScrollLeft;
 				this.updateComplete.then(() => {
-					const tracksScroll = this.tracksScrollRef.value;
-					if (tracksScroll) {
-						tracksScroll.scrollLeft = scrollLeft;
-						this.viewportScrollLeft = scrollLeft;
-					}
+					if (this.tracksScrollRef.value) this.applyScrollLeft(scrollLeft);
 				});
 			}
 		} catch (error) {
@@ -783,6 +873,23 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			this.canvasActiveRootTemporalChangeHandler = void 0;
 		}
 	}
+	/**
+	* Single source-of-truth for applying a scroll position change.
+	* Keeps ruler-outer, viewportScrollLeft, playhead, and clip-path all in sync
+	* immediately — without relying on the async scroll event.
+	*/
+	applyScrollLeft(scrollLeft) {
+		const tracksScroll = this.tracksScrollRef.value;
+		if (!tracksScroll) return;
+		tracksScroll.scrollLeft = scrollLeft;
+		const actual = tracksScroll.scrollLeft;
+		if (actual !== this.viewportScrollLeft) {
+			this.viewportScrollLeft = actual;
+			this.updatePlayheadPositionDirect(this.currentTimeMs);
+			this.updateTimelineState();
+			this.debouncedSaveTimelineState();
+		}
+	}
 	setupScrollListener() {
 		if (this.tracksScrollRef.value) {
 			this.scrollHandler = () => {
@@ -790,6 +897,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 					const newScrollLeft = this.tracksScrollRef.value.scrollLeft;
 					if (newScrollLeft !== this.viewportScrollLeft) {
 						this.viewportScrollLeft = newScrollLeft;
+						this.updatePlayheadPositionDirect(this.currentTimeMs);
 						this.updateTimelineState();
 						this.debouncedSaveTimelineState();
 					}
@@ -827,6 +935,8 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 					const rawTime = this.targetTemporal.currentTimeMs ?? 0;
 					const duration = this.targetTemporal.durationMs ?? 0;
 					const newTimeMs = Math.max(0, Math.min(rawTime, duration));
+					if (this.isPlaying && !this.isDraggingPlayhead) this.followPlayhead(newTimeMs);
+					else this.isFollowingPlayhead = false;
 					this.updatePlayheadPositionDirect(newTimeMs);
 					const newIsPlaying = this.targetTemporal.playing ?? false;
 					const newIsLooping = this.targetTemporal.loop ?? false;
@@ -843,8 +953,6 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 						this.currentTimeMs = newTimeMs;
 						this.lastContextUpdateTime = now;
 					}
-					if (this.isPlaying && !this.isDraggingPlayhead) this.followPlayhead(newTimeMs);
-					else this.isFollowingPlayhead = false;
 				}
 			} else if (this.isPlaying) {
 				console.warn("[EFTimeline] Lost targetTemporal during playback. Stopping playback state.", "controlTarget:", this.controlTarget, "target:", this.target);
@@ -864,6 +972,9 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 		const hierarchyWidth = this.showHierarchy ? _EFTimeline.HIERARCHY_WIDTH : 0;
 		const playheadPx = timeToPx(timeMs, this.pixelsPerMs);
 		const playheadLeft = hierarchyWidth + playheadPx;
+		const scrollLeft = this.viewportScrollLeft;
+		const playheadLayer = this.playheadLayerRef.value;
+		if (playheadLayer) playheadLayer.style.clipPath = hierarchyWidth > 0 ? `inset(0 0 0 ${hierarchyWidth + scrollLeft}px)` : "";
 		const playhead = this.playheadRef.value;
 		if (playhead) playhead.style.left = `${playheadLeft - 1}px`;
 		const handle = this.playheadHandleRef.value;
@@ -985,6 +1096,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			return;
 		}
 		this.targetTemporal.play();
+		this.isPlaying = true;
 	}
 	handlePause() {
 		if (!this.targetTemporal) {
@@ -992,6 +1104,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			return;
 		}
 		this.targetTemporal.pause();
+		this.isPlaying = false;
 	}
 	handleToggleLoop() {
 		if (!this.targetTemporal) {
@@ -1024,22 +1137,12 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 	handleZoomOut() {
 		const newPixelsPerMs = Math.max(this.effectiveMinPixelsPerMs, this.pixelsPerMs / 1.25);
 		this.pixelsPerMs = newPixelsPerMs;
-		if (newPixelsPerMs <= this.fitPixelsPerMs + 1e-9) {
-			const tracksScroll = this.tracksScrollRef.value;
-			if (tracksScroll) {
-				tracksScroll.scrollLeft = 0;
-				this.viewportScrollLeft = 0;
-			}
-		}
+		if (newPixelsPerMs <= this.fitPixelsPerMs + 1e-9) this.applyScrollLeft(0);
 		this.updateTimelineState();
 	}
 	handleFitToViewport() {
 		this.pixelsPerMs = this.fitPixelsPerMs;
-		const tracksScroll = this.tracksScrollRef.value;
-		if (tracksScroll) {
-			tracksScroll.scrollLeft = 0;
-			this.viewportScrollLeft = 0;
-		}
+		this.applyScrollLeft(0);
 		this.updateTimelineState();
 	}
 	/**
@@ -1063,8 +1166,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 		const newScrollLeft = timeToPx(timeAtCursor, newPixelsPerMs) - cursorXInViewport;
 		this.pixelsPerMs = newPixelsPerMs;
 		const maxScroll = Math.max(0, timeToPx(this.durationMs, newPixelsPerMs) - (rect.width - hierarchyWidth));
-		tracksScroll.scrollLeft = Math.max(0, Math.min(maxScroll, newScrollLeft));
-		this.viewportScrollLeft = tracksScroll.scrollLeft;
+		this.applyScrollLeft(Math.max(0, Math.min(maxScroll, newScrollLeft)));
 		this.updateTimelineState();
 	}
 	/**
@@ -1152,7 +1254,10 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			startTimeMs: this.currentTimeMs
 		});
 		const tracksScroll = this.tracksScrollRef.value;
-		if (tracksScroll) this.viewportScrollLeft = tracksScroll.scrollLeft;
+		if (tracksScroll) {
+			this.viewportScrollLeft = tracksScroll.scrollLeft;
+			this.updatePlayheadPositionDirect(this.currentTimeMs);
+		}
 		const hierarchyWidth = this.showHierarchy ? _EFTimeline.HIERARCHY_WIDTH : 0;
 		let lastClientX = e.clientX;
 		let edgeScrollAnimationId = null;
@@ -1186,8 +1291,7 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
 			if (scrollDelta !== 0) {
 				const maxScroll = tracksScroll.scrollWidth - tracksScroll.clientWidth;
 				const newScrollLeft = Math.max(0, Math.min(maxScroll, tracksScroll.scrollLeft + scrollDelta));
-				tracksScroll.scrollLeft = newScrollLeft;
-				this.viewportScrollLeft = newScrollLeft;
+				this.applyScrollLeft(newScrollLeft);
 				updatePlayheadFromMouse();
 			}
 			edgeScrollAnimationId = requestAnimationFrame(edgeScrollLoop);
@@ -1254,43 +1358,13 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
     `;
 	}
 	/**
-	* Calculate frame highlight bounds (semantics).
-	* Returns null if frame markers aren't visible or duration is invalid.
-	*/
-	calculateFrameHighlightBounds() {
-		if (!this.showFrameMarkers || this.durationMs <= 0) return null;
-		const fps = this.fps;
-		const frameDurationMs = 1e3 / fps;
-		const frameStartMs = quantizeToFrameTimeMs(this.currentTimeMs, fps);
-		const frameEndMs = Math.min(frameStartMs + frameDurationMs, this.durationMs);
-		const startPx = timeToPx(frameStartMs, this.pixelsPerMs);
-		const widthPx = timeToPx(frameEndMs, this.pixelsPerMs) - startPx;
-		if (widthPx <= 0 || startPx < 0) return null;
-		return {
-			startPx,
-			widthPx
-		};
-	}
-	/**
-	* Render frame highlight (mechanism).
-	* Shows the current frame as a rectangle to indicate frames have duration.
-	* Only rendered when frame markers are visible (zoom level high enough).
+	* Render the frame highlight placeholder.
+	* Position and visibility are controlled exclusively by updatePlayheadPositionDirect
+	* via the frameHighlightRef so that Lit re-renders never clobber the 60fps rAF
+	* position with the throttled this.currentTimeMs value.
 	*/
 	renderFrameHighlight() {
-		if (!this.showFrameMarkers) return nothing;
-		const bounds = this.calculateFrameHighlightBounds();
-		if (!bounds) return nothing;
-		const hierarchyWidth = this.showHierarchy ? _EFTimeline.HIERARCHY_WIDTH : 0;
-		return html`
-      <div 
-        ${ref(this.frameHighlightRef)}
-        class="frame-highlight" 
-        style=${styleMap({
-			left: `${hierarchyWidth + bounds.startPx}px`,
-			width: `${bounds.widthPx}px`
-		})}
-      ></div>
-    `;
+		return html`<div ${ref(this.frameHighlightRef)} class="frame-highlight" style="display:none"></div>`;
 	}
 	renderControls() {
 		if (!this.showControls) return nothing;
@@ -1375,14 +1449,14 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
       <div class="timeline-container" tabindex="0" ${ref(this.containerRef)}>
         ${this.renderControls()}
         <div class="timeline-area">
-          <!-- Tracks Viewport - Single scrollable container -->
+          <!-- Tracks Viewport — single scroll container for ruler + tracks -->
           <div class="tracks-viewport" part="tracks">
             <div 
               class="tracks-scroll" 
               ${ref(this.tracksScrollRef)} 
               @pointerdown=${this.handleTracksPointerDown}
             >
-              <!-- Ruler Row - Inside scroll container with sticky positioning -->
+              <!-- Ruler Row — sticky inside tracks-scroll, scrolls horizontally with it natively -->
               ${this.showRuler ? html`
                 <div class="ruler-row" style="width: ${this.contentWidthPx + hierarchyWidth}px;">
                   ${this.showHierarchy ? html`<div class="ruler-spacer"></div>` : nothing}
@@ -1408,13 +1482,15 @@ let EFTimeline = class EFTimeline extends TWMixin(LitElement) {
                 </div>
               ` : nothing}
               <div class="tracks-content" style="min-width: ${this.contentWidthPx + hierarchyWidth}px;">
+                <!-- Label column background — fills full height below the last row -->
+                ${hierarchyWidth > 0 ? html`<div class="label-column-bg"></div>` : nothing}
                 <!-- Track rows layer -->
                 <div class="tracks-rows-layer">
                   ${this.renderRows(target)}
                 </div>
                 
                 <!-- Playhead layer - sticky to stay visible during vertical scroll -->
-                <div class="playhead-layer">
+                <div ${ref(this.playheadLayerRef)} class="playhead-layer">
                   ${this.renderFrameHighlight()}
                   ${this.showPlayhead ? html`
                     <div ${ref(this.playheadRef)} class="playhead" part="playhead" style="left: ${playheadLeft - 1}px;">
@@ -1478,6 +1554,7 @@ __decorate([property({
 __decorate([property({ type: String })], EFTimeline.prototype, "hide", void 0);
 __decorate([property({ type: String })], EFTimeline.prototype, "show", void 0);
 __decorate([state()], EFTimeline.prototype, "targetElement", void 0);
+__decorate([state()], EFTimeline.prototype, "_highlightedElement", void 0);
 __decorate([state()], EFTimeline.prototype, "currentTimeMs", void 0);
 __decorate([state()], EFTimeline.prototype, "isPlaying", void 0);
 __decorate([state()], EFTimeline.prototype, "isLooping", void 0);