@editframe/elements 0.37.3-beta → 0.38.1

package/dist/gui/EFWorkbench.js

@@ -1,17 +1,14 @@
+import { TWMixin } from "./TWMixin2.js";
+import { updateAnimations } from "../elements/updateAnimations.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin2.js";
-import { getPreviewPresentationMode, getPreviewResolutionScale, getRenderMode, getShowStats, isNativeCanvasApiAvailable, setPreviewPresentationMode, setPreviewResolutionScale, setRenderMode, setShowStats } from "../preview/previewSettings.js";
-import { renderTimegroupToCanvas } from "../preview/renderTimegroupToCanvas.js";
-import { RenderCancelledError, renderTimegroupToVideo } from "../preview/renderTimegroupToVideo.js";
 import { findRootTemporal } from "../elements/findRootTemporal.js";
 import { ICONS, phosphorIcon } from "./icons.js";
-import { sessionThumbnailCache } from "../elements/SessionThumbnailCache.js";
-import "../elements/EFThumbnailStrip.js";
-import { createStatsTrackingStrategy } from "../preview/statsTrackingStrategy.js";
-import { getThumbnailCacheMaxSize, onThumbnailCacheSettingsChanged, setThumbnailCacheMaxSize } from "../preview/thumbnailCacheSettings.js";
-import { AdaptiveResolutionTracker } from "../preview/AdaptiveResolutionTracker.js";
+import { getPreviewPresentationMode, getPreviewResolutionScale, getRenderMode, getShowStats, getShowThumbnailTimestamps, isNativeCanvasApiAvailable, setPreviewPresentationMode, setRenderMode, setShowStats, setShowThumbnailTimestamps } from "../preview/previewSettings.js";
 import { previewSettingsContext } from "./previewSettingsContext.js";
+import { AdaptiveResolutionTracker } from "../preview/AdaptiveResolutionTracker.js";
+import { RenderStats } from "../preview/RenderStats.js";
+import { DomStatsStrategy } from "../preview/statsTrackingStrategy.js";
 import "./EFFitScale.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { provide } from "@lit/context";
@@ -39,15 +36,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			renderMode: getRenderMode(),
 			resolutionScale: getPreviewResolutionScale(),
 			showStats: getShowStats(),
-			thumbnailCacheMaxSize: getThumbnailCacheMaxSize()
+			showThumbnailTimestamps: getShowThumbnailTimestamps()
 		};
 		this.renderMode = this.previewSettings.renderMode;
 		this.presentationMode = this.previewSettings.presentationMode;
 		this.previewResolutionScale = this.previewSettings.resolutionScale;
-		this.debugThumbnailTimestamps = false;
-		this.thumbnailCacheMaxSize = this.previewSettings.thumbnailCacheMaxSize;
-		this.thumbnailCacheStats = null;
-		this.cacheStatsUpdateInterval = null;
 		this.exportOptions = {
 			includeAudio: true,
 			scale: 1,
@@ -61,20 +54,16 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		this.isAtRest = true;
 		this.currentAdaptiveScale = 1;
 		this.showStats = this.previewSettings.showStats;
-		this.statsStrategy = null;
+		this.themeMode = this.getInitialTheme();
+		this.renderStats = null;
+		this.systemThemeMediaQuery = null;
+		this.systemThemeListener = null;
+		this.domStatsStrategy = null;
 		this.isScrubbingRef = { current: false };
 		this.restDebounceTimer = null;
 		this.playingCheckInterval = null;
 		this.adaptiveTracker = null;
 		this.savePanZoomDebounceTimer = null;
-		this.cloneOverlayRef = createRef();
-		this.cloneRefresh = null;
-		this.cloneAnimationFrame = null;
-		this.cloneRootElement = null;
-		this.cloneTimegroup = null;
-		this.structureObserver = null;
-		this.rebuildPending = false;
-		this.canvasRefresh = null;
 		this.canvasPreviewRef = createRef();
 		this.canvasPreviewResult = null;
 		this.canvasAnimationFrame = null;
@@ -101,29 +90,20 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	static {
 		this.styles = [css`
       :host {
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        grid-template-rows: auto 1fr 280px;
+        grid-template-columns: 280px 1fr;
         width: 100%;
         height: 100%;
-        min-width: 0;
-        min-height: 0;
         overflow: hidden;
+        background-color: var(--ef-color-bg);
         
-        /* Light mode colors */
-        --workbench-bg: rgb(30 41 59); /* slate-800 */
-        --workbench-overlay-border: rgb(59 130 246); /* blue-500 */
-        --workbench-overlay-bg: rgb(191 219 254); /* blue-200 */
-        --toolbar-bg: rgb(15 23 42); /* slate-900 */
-        --toolbar-border: rgba(148, 163, 184, 0.2);
-      }
-      
-      :host(.dark), :host-context(.dark) {
-        /* Dark mode colors */
-        --workbench-bg: rgb(2 6 23); /* slate-950 */
-        --workbench-overlay-border: rgb(96 165 250); /* blue-400 */
-        --workbench-overlay-bg: rgb(30 58 138); /* blue-900 */
-        --toolbar-bg: rgb(2 6 23);
-        --toolbar-border: rgba(148, 163, 184, 0.15);
+        /* Component tokens (reference globals from ef-theme.css) */
+        --workbench-bg: var(--ef-color-bg);
+        --workbench-overlay-border: var(--ef-color-primary);
+        --workbench-overlay-bg: var(--ef-color-primary-subtle);
+        --toolbar-bg: var(--ef-color-bg-elevated);
+        --toolbar-border: var(--ef-color-border-subtle);
       }
       
       /* Utility classes (not relying on external Tailwind) */
@@ -186,36 +166,36 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         justify-content: center;
         gap: 6px;
         padding: 6px 12px;
-        background: rgba(51, 65, 85, 0.6);
-        border: 1px solid rgba(148, 163, 184, 0.2);
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border-subtle);
         border-radius: 6px;
-        color: #e2e8f0;
+        color: var(--ef-color-text);
         font-size: 12px;
-        font-weight: 500;
+        font-weight: 600;
         cursor: pointer;
         transition: all 0.15s ease;
       }
       
       .toolbar-btn:hover {
-        background: rgba(51, 65, 85, 0.9);
-        border-color: rgba(148, 163, 184, 0.3);
+        background: var(--ef-color-hover);
+        border-color: var(--ef-color-border);
       }
       
       .toolbar-btn.active {
-        background: rgba(59, 130, 246, 0.2);
-        border-color: rgba(59, 130, 246, 0.4);
-        color: #60a5fa;
+        background: var(--ef-color-primary-subtle);
+        border-color: var(--ef-color-primary);
+        color: var(--ef-color-primary-hover);
       }
       
       .toolbar-btn.primary {
-        background: linear-gradient(135deg, #3b82f6, #2563eb);
+        background: var(--ef-color-primary);
         border-color: transparent;
         color: white;
         font-weight: 600;
       }
       
       .toolbar-btn.primary:hover {
-        background: linear-gradient(135deg, #60a5fa, #3b82f6);
+        background: var(--ef-color-primary-hover);
       }
       
       .toolbar-icon-btn {
@@ -225,23 +205,23 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         width: 32px;
         height: 32px;
         padding: 0;
-        background: rgba(51, 65, 85, 0.6);
-        border: 1px solid rgba(148, 163, 184, 0.2);
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border-subtle);
         border-radius: 6px;
-        color: #e2e8f0;
+        color: var(--ef-color-text);
         cursor: pointer;
         transition: all 0.15s ease;
       }
       
       .toolbar-icon-btn:hover {
-        background: rgba(51, 65, 85, 0.9);
-        border-color: rgba(148, 163, 184, 0.3);
+        background: var(--ef-color-hover);
+        border-color: var(--ef-color-border);
       }
       
       .toolbar-icon-btn.active {
-        background: rgba(59, 130, 246, 0.2);
-        border-color: rgba(59, 130, 246, 0.4);
-        color: #60a5fa;
+        background: var(--ef-color-primary-subtle);
+        border-color: var(--ef-color-primary);
+        color: var(--ef-color-primary-hover);
       }
       
       .mode-indicator {
@@ -258,15 +238,15 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
       
       .mode-indicator.dom {
-        background: rgba(34, 197, 94, 0.2);
-        color: #4ade80;
-        border: 1px solid rgba(34, 197, 94, 0.3);
+        background: color-mix(in srgb, var(--ef-color-success) 15%, transparent);
+        color: var(--ef-color-success);
+        border: 1px solid color-mix(in srgb, var(--ef-color-success) 30%, transparent);
       }
       
       .mode-indicator.canvas {
-        background: rgba(168, 85, 247, 0.2);
-        color: #c084fc;
-        border: 1px solid rgba(168, 85, 247, 0.3);
+        background: color-mix(in srgb, var(--ef-color-type-image) 15%, transparent);
+        color: var(--ef-color-type-image);
+        border: 1px solid color-mix(in srgb, var(--ef-color-type-image) 30%, transparent);
       }
       
       .canvas-container {
@@ -277,6 +257,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         grid-template-columns: 100%;
         grid-template-rows: 100%;
         min-height: 0;
+        background: var(--ef-color-bg);
       }
       
       .canvas-container ::slotted(*) {
@@ -286,7 +267,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         grid-row: 1;
       }
       
-      .clone-overlay {
+      .canvas-overlay {
         position: absolute;
         inset: 0;
         pointer-events: none;
@@ -303,13 +284,13 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         top: 8px;
         left: 8px;
         width: 200px;
-        background: rgba(0, 0, 0, 0.75);
+        background: color-mix(in srgb, var(--ef-color-bg-elevated) 90%, transparent);
         backdrop-filter: blur(4px);
         border-radius: 6px;
         padding: 8px 12px;
         font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
         font-size: 11px;
-        color: #e2e8f0;
+        color: var(--ef-color-text);
         z-index: 10;
         pointer-events: none;
         line-height: 1.5;
@@ -322,7 +303,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
       
       .playback-stats .stat-label {
-        color: #94a3b8;
+        color: var(--ef-color-text-muted);
         flex-shrink: 0;
         width: 85px;
       }
@@ -335,15 +316,15 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
       
       .playback-stats .stat-value.good {
-        color: #4ade80;
+        color: var(--ef-color-success);
       }
       
       .playback-stats .stat-value.warning {
-        color: #fbbf24;
+        color: var(--ef-color-warning);
       }
       
       .playback-stats .stat-value.bad {
-        color: #f87171;
+        color: var(--ef-color-danger);
       }
       
       .pressure-histogram {
@@ -353,7 +334,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         height: 24px;
         margin-top: 8px;
         padding-top: 8px;
-        border-top: 1px solid rgba(148, 163, 184, 0.2);
+        border-top: 1px solid var(--ef-color-border-subtle);
       }
       
       .pressure-histogram .bar {
@@ -365,22 +346,22 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
       
       .pressure-histogram .bar.nominal {
-        background: #4ade80;
+        background: var(--ef-color-success);
         height: 25%;
       }
       
       .pressure-histogram .bar.fair {
-        background: #a3e635;
+        background: var(--ef-color-warning);
         height: 50%;
       }
       
       .pressure-histogram .bar.serious {
-        background: #fbbf24;
+        background: var(--ef-color-warning);
         height: 75%;
       }
       
       .pressure-histogram .bar.critical {
-        background: #f87171;
+        background: var(--ef-color-danger);
         height: 100%;
       }
       
@@ -389,7 +370,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         justify-content: space-between;
         margin-top: 4px;
         font-size: 9px;
-        color: #64748b;
+        color: var(--ef-color-text-subtle);
       }
       
       .dropdown-panel {
@@ -398,11 +379,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         padding: 14px 16px;
         min-width: 260px;
         max-width: calc(100vw - 32px);
-        background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
-        border: 1px solid rgba(148, 163, 184, 0.3);
+        background: var(--ef-color-bg-elevated);
+        border: 1px solid var(--ef-color-border);
         border-radius: 10px;
         backdrop-filter: blur(12px);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        box-shadow: 0 8px 32px color-mix(in srgb, var(--ef-color-bg) 50%, transparent);
       }
       
       .dropdown-panel::backdrop {
@@ -431,11 +412,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         justify-content: space-between;
         margin-bottom: 12px;
         padding-bottom: 10px;
-        border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+        border-bottom: 1px solid var(--ef-color-border-subtle);
       }
       
       .dropdown-title {
-        color: #e2e8f0;
+        color: var(--ef-color-text);
         font-size: 13px;
         font-weight: 600;
       }
@@ -443,8 +424,100 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       .dropdown-close {
         background: transparent;
         border: none;
-        color: #64748b;
+        color: var(--ef-color-text-subtle);
         cursor: pointer;
+      }
+      
+      .dropdown-section {
+        background: var(--ef-color-bg-inset);
+        border-radius: 8px;
+        padding: 12px;
+        margin-top: 10px;
+      }
+      
+      .dropdown-label {
+        color: var(--ef-color-text);
+        font-size: 11px;
+        font-weight: 600;
+        margin-bottom: 6px;
+      }
+      
+      .dropdown-description {
+        margin-top: 8px;
+        color: var(--ef-color-text-subtle);
+        font-size: 10px;
+        line-height: 1.4;
+      }
+      
+      .button-group {
+        display: flex;
+        gap: 6px;
+        margin-top: 6px;
+      }
+      
+      .button-group-btn {
+        flex: 1;
+        padding: 6px 8px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        font-size: 10px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        background: transparent;
+        color: var(--ef-color-text-muted);
+      }
+      
+      .button-group-btn.active {
+        background: var(--ef-color-selected);
+        color: var(--ef-color-primary);
+        border-color: var(--ef-color-primary-subtle);
+      }
+      
+      .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+      }
+      
+      .checkbox-label input[type="checkbox"] {
+        width: 14px;
+        height: 14px;
+        accent-color: var(--ef-color-primary);
+        cursor: pointer;
+      }
+      
+      .checkbox-label span {
+        color: var(--ef-color-text);
+        font-size: 12px;
+        font-weight: 500;
+      }
+      
+      .dropdown-select {
+        width: 100%;
+        padding: 6px 8px;
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border);
+        border-radius: 6px;
+        color: var(--ef-color-text);
+        font-size: 11px;
+        cursor: pointer;
+      }
+      
+      .dropdown-input {
+        width: 100%;
+        padding: 5px 7px;
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border);
+        border-radius: 4px;
+        color: var(--ef-color-text);
+        font-size: 11px;
+      }
+      
+      .dropdown-input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
         padding: 2px;
         line-height: 1;
         font-size: 14px;
@@ -452,7 +525,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
       
       .dropdown-close:hover {
-        color: #94a3b8;
+        color: var(--ef-color-text-muted);
       }
     `];
 	}
@@ -461,6 +534,8 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.applyTheme();
+		if (!this.hasAttribute("rendering") && typeof window !== "undefined" && "FRAMEGEN_BRIDGE" in window) this.rendering = true;
 		this.addEventListener("transform-changed", this.boundHandleTransformChanged);
 		this.startMotionStateTracking();
 		this.adaptiveTracker = new AdaptiveResolutionTracker({ onScaleChange: (scale) => {
@@ -471,29 +546,20 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 					this.canvasPreviewResult.setResolutionScale(scale);
 					console.log(`[EFWorkbench] Resolution changed ${(oldScale * 100).toFixed(0)}% → ${(scale * 100).toFixed(0)}% (instant)`);
 				}
-			} else console.log(`[EFWorkbench] Adaptive scale updated to ${(scale * 100).toFixed(0)}% (no change: atRest=${this.isAtRest}, mode=${this.presentationMode})`);
+			}
 		} });
-		this.updateThumbnailCacheStats();
-		this.startCacheStatsUpdates();
-		onThumbnailCacheSettingsChanged(() => {
-			const newSize = getThumbnailCacheMaxSize();
-			this.thumbnailCacheMaxSize = newSize;
-			this.previewSettings = {
-				...this.previewSettings,
-				thumbnailCacheMaxSize: newSize
+		this.renderStats = new RenderStats(this.adaptiveTracker);
+		if (typeof window !== "undefined") {
+			this.systemThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			this.systemThemeListener = () => {
+				if (this.themeMode === "system") this.applyTheme();
 			};
-			sessionThumbnailCache.setMaxSize(newSize);
-			this.updateThumbnailCacheStats();
-		});
+			this.systemThemeMediaQuery.addEventListener("change", this.systemThemeListener);
+		}
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this.statsStrategy) {
-			this.statsStrategy.stop();
-			this.statsStrategy = null;
-		}
-		if (this.presentationMode === "clone") this.stopCloneOverlay();
-		else if (this.presentationMode === "dom") this.stopDomMode();
+		if (this.presentationMode === "dom") this.stopDomMode();
 		else if (this.presentationMode === "canvas") this.stopCanvasMode();
 		const timegroup = this.getTimegroup();
 		if (timegroup) {
@@ -501,8 +567,9 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			timegroup.style.pointerEvents = "";
 		}
 		this.removeEventListener("transform-changed", this.boundHandleTransformChanged);
+		if (this.systemThemeMediaQuery && this.systemThemeListener) this.systemThemeMediaQuery.removeEventListener("change", this.systemThemeListener);
 		this.stopMotionStateTracking();
-		this.stopCacheStatsUpdates();
+		if (typeof this.stopCacheStatsUpdates === "function") this.stopCacheStatsUpdates();
 		if (this.adaptiveTracker) {
 			this.adaptiveTracker.dispose();
 			this.adaptiveTracker = null;
@@ -517,25 +584,29 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		requestAnimationFrame(() => {
 			this.restorePreviewPanZoom();
 		});
-		if (this.presentationMode === "clone") this.initCloneOverlay();
-		else if (this.presentationMode === "dom") this.initDomMode();
-		else if (this.presentationMode === "canvas") this.initCanvasMode();
+		this.updateComplete.then(() => {
+			if (this.presentationMode === "dom") this.initDomMode();
+			else if (this.presentationMode === "canvas") this.initCanvasMode();
+		});
 	}
 	handleTransformChanged(e) {
 		this.panZoomTransform = e.detail;
 		this.debouncedSavePreviewPanZoom();
-		if (this.presentationMode === "clone") this.updateCloneTransform();
-		else if (this.presentationMode === "canvas") {
+		if (this.presentationMode === "canvas") {
 			this.updateCanvasTransform();
 			const zoomRatio = e.detail.scale / this.lastCanvasZoom;
 			if (zoomRatio < .75 || zoomRatio > 1.33) {
 				if (this.zoomReinitTimeout !== null) clearTimeout(this.zoomReinitTimeout);
 				this.zoomReinitTimeout = window.setTimeout(() => {
 					this.zoomReinitTimeout = null;
-					if (this.presentationMode === "canvas") {
+					if (this.presentationMode === "canvas" && this.canvasPreviewResult) {
 						this.lastCanvasZoom = this.panZoomTransform.scale;
-						this.stopCanvasMode();
-						this.initCanvasMode();
+						const timegroup = this.getTimegroup();
+						const canvasContainer = this.canvasPreviewRef.value;
+						if (timegroup && canvasContainer) {
+							const newScale = this.previewResolutionScale === "auto" ? this.getEffectiveResolutionScale(timegroup, canvasContainer) : this.getResolutionScale(timegroup, canvasContainer);
+							this.canvasPreviewResult.setResolutionScale(newScale);
+						}
 					}
 				}, 500);
 			}
@@ -605,8 +676,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 						panZoomElement.y = this.panZoomTransform.y;
 						panZoomElement.scale = this.panZoomTransform.scale;
 					}
-					if (this.presentationMode === "clone") this.updateCloneTransform();
-					else if (this.presentationMode === "canvas") this.updateCanvasTransform();
+					if (this.presentationMode === "canvas") this.updateCanvasTransform();
 				});
 			}
 		} catch (error) {
@@ -660,6 +730,18 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		else if (!isInMotion && wasInMotion) this.handleMotionStop();
 	}
 	/**
+	* Pause or unpause the canvas overlay components (EFCanvas, SelectionOverlay)
+	* to avoid layout-thrashing during playback.
+	*/
+	setOverlaysPaused(paused) {
+		const canvasSlot = this.querySelector("[slot='canvas']");
+		if (!canvasSlot) return;
+		const efCanvas = canvasSlot.querySelector("ef-canvas");
+		if (efCanvas && "paused" in efCanvas) efCanvas.paused = paused;
+		const overlay = canvasSlot.querySelector("ef-canvas-selection-overlay") ?? this.querySelector("ef-canvas-selection-overlay");
+		if (overlay && "paused" in overlay) overlay.paused = paused;
+	}
+	/**
 	* Called when motion starts (playing or scrubbing began).
 	*/
 	handleMotionStart() {
@@ -668,6 +750,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			this.restDebounceTimer = null;
 		}
 		this.isAtRest = false;
+		this.setOverlaysPaused(true);
 		if (this.previewResolutionScale === "auto" && this.adaptiveTracker) {
 			const timegroup = this.getTimegroup();
 			if (timegroup) {
@@ -678,10 +761,8 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 				this.adaptiveTracker.initializeAtScale(displayScale);
 				this.currentAdaptiveScale = this.adaptiveTracker.getRecommendedScale();
 				if (this.canvasPreviewResult) this.canvasPreviewResult.setResolutionScale(this.currentAdaptiveScale);
-				console.log(`[EFWorkbench] Motion started, set resolution to ${(this.currentAdaptiveScale * 100).toFixed(0)}% (displayScale=${(displayScale * 100).toFixed(0)}%)`);
 			}
 		}
-		console.log(`[EFWorkbench] Motion started (playing=${this.isPlaying}, scrubbing=${this.isScrubbing})`);
 	}
 	/**
 	* Called when motion stops (not playing and not scrubbing).
@@ -699,14 +780,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	*/
 	transitionToRest() {
 		this.isAtRest = true;
-		console.log("[EFWorkbench] Transitioned to rest state");
+		this.setOverlaysPaused(false);
 		if (this.previewResolutionScale === "auto" && this.presentationMode === "canvas") {
 			this.adaptiveTracker?.reset();
 			this.currentAdaptiveScale = 1;
-			if (this.canvasPreviewResult) {
-				this.canvasPreviewResult.setResolutionScale(1);
-				console.log("[EFWorkbench] Set full resolution for rest state (instant)");
-			}
+			if (this.canvasPreviewResult) this.canvasPreviewResult.setResolutionScale(1);
 		}
 	}
 	/**
@@ -742,173 +820,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		this.renderMode = this.previewSettings.renderMode;
 		this.previewResolutionScale = this.previewSettings.resolutionScale;
 		this.showStats = this.previewSettings.showStats;
-		this.thumbnailCacheMaxSize = this.previewSettings.thumbnailCacheMaxSize;
-		this.updateStatsStrategy();
-	}
-	/**
-	* Update or create stats tracking strategy based on current mode and settings.
-	*/
-	updateStatsStrategy() {
-		if (this.statsStrategy) {
-			this.statsStrategy.stop();
-			this.statsStrategy = null;
-		}
-		if (!this.showStats) return;
-		const timegroup = this.getTimegroup();
-		if (!timegroup || !this.adaptiveTracker) return;
-		const compositionWidth = timegroup.offsetWidth || 1920;
-		const compositionHeight = timegroup.offsetHeight || 1080;
-		const strategy = createStatsTrackingStrategy(this.presentationMode, {
-			timegroup,
-			adaptiveTracker: this.adaptiveTracker,
-			canvasPreviewResult: this.canvasPreviewResult ?? void 0,
-			compositionWidth,
-			compositionHeight,
-			getResolutionScale: this.canvasPreviewResult?.getResolutionScale,
-			isAtRest: () => this.isAtRest,
-			isExporting: () => this.isExporting
-		});
-		if (strategy) {
-			this.statsStrategy = strategy;
-			strategy.start();
-		}
-	}
-	initCloneOverlay() {
-		if (this.presentationMode !== "clone") return;
-		const timegroup = this.getTimegroup();
-		const cloneContainer = this.cloneOverlayRef.value;
-		if (!timegroup || !cloneContainer) {
-			setTimeout(() => this.initCloneOverlay(), 100);
-			return;
-		}
-		this.cloneTimegroup = timegroup;
-		timegroup.proxyMode = false;
-		timegroup.updateComplete.then(() => {
-			if (this.presentationMode !== "clone") return;
-			this.finishCloneSetup(timegroup, cloneContainer);
-		});
-	}
-	finishCloneSetup(timegroup, cloneContainer) {
-		timegroup.style.clipPath = "inset(100%)";
-		timegroup.style.pointerEvents = "none";
-		cloneContainer.style.display = "block";
-		this.rebuildClone(timegroup);
-		this.setupStructureObserver(timegroup);
-	}
-	rebuildClone(timegroup) {
-		if (this.presentationMode !== "clone") return;
-		const container = this.cloneOverlayRef.value;
-		if (!container) return;
-		try {
-			const { container: previewContainer, refresh } = renderTimegroupPreview(timegroup);
-			container.innerHTML = "";
-			previewContainer.classList.add("clone-content");
-			container.appendChild(previewContainer);
-			this.cloneRefresh = refresh;
-			this.cloneRootElement = previewContainer.firstElementChild ?? null;
-			if (this.cloneRootElement) {
-				this.cloneRootElement.style.opacity = "1";
-				this.cloneRootElement.style.clipPath = "none";
-				this.cloneRootElement.style.position = "relative";
-				this.cloneRootElement.style.inset = "auto";
-				this.cloneRootElement.style.top = "0";
-				this.cloneRootElement.style.right = "auto";
-				this.cloneRootElement.style.bottom = "auto";
-				this.cloneRootElement.style.left = "0";
-			}
-			this.updateCloneTransform();
-			this.observeShadowRoots(timegroup);
-			if (this.cloneAnimationFrame === null) this.startCloneLoop();
-		} catch (e) {
-			console.error("Failed to build clone:", e);
-		}
-	}
-	setupStructureObserver(timegroup) {
-		if (this.structureObserver) this.structureObserver.disconnect();
-		this.structureObserver = new MutationObserver((mutations) => {
-			if (this.presentationMode !== "clone") return;
-			if (mutations.some((m) => m.type === "childList" && (m.addedNodes.length > 0 || m.removedNodes.length > 0)) && !this.rebuildPending) {
-				this.rebuildPending = true;
-				requestAnimationFrame(() => {
-					this.rebuildPending = false;
-					if (this.presentationMode === "clone") this.rebuildClone(timegroup);
-				});
-			}
-		});
-		this.structureObserver.observe(timegroup, {
-			childList: true,
-			subtree: true
-		});
-		this.observeShadowRoots(timegroup);
-	}
-	observeShadowRoots(root) {
-		if (!this.structureObserver) return;
-		const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
-		let node = root;
-		while (node) {
-			if (node.shadowRoot) this.structureObserver.observe(node.shadowRoot, {
-				childList: true,
-				subtree: true
-			});
-			node = walker.nextNode();
-		}
-	}
-	updateCloneTransform() {
-		if (this.presentationMode !== "clone") return;
-		const container = this.cloneOverlayRef.value;
-		if (!container) return;
-		const cloneContent = container.querySelector(".clone-content");
-		if (!cloneContent) return;
-		const { x, y, scale } = this.panZoomTransform;
-		cloneContent.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
-	}
-	startCloneLoop() {
-		const loop = () => {
-			if (this.presentationMode !== "clone" || !this.cloneRefresh) {
-				this.cloneAnimationFrame = null;
-				return;
-			}
-			if (!this.isExporting) {
-				this.cloneRefresh();
-				if (this.cloneRootElement) {
-					this.cloneRootElement.style.clipPath = "none";
-					this.cloneRootElement.style.opacity = "1";
-					this.cloneRootElement.style.position = "relative";
-					this.cloneRootElement.style.inset = "auto";
-					this.cloneRootElement.style.top = "0";
-					this.cloneRootElement.style.right = "auto";
-					this.cloneRootElement.style.bottom = "auto";
-					this.cloneRootElement.style.left = "0";
-				}
-			}
-			this.cloneAnimationFrame = requestAnimationFrame(loop);
-		};
-		this.cloneAnimationFrame = requestAnimationFrame(loop);
-	}
-	stopCloneOverlay() {
-		if (this.cloneAnimationFrame !== null) {
-			cancelAnimationFrame(this.cloneAnimationFrame);
-			this.cloneAnimationFrame = null;
-		}
-		if (this.structureObserver) {
-			this.structureObserver.disconnect();
-			this.structureObserver = null;
-		}
-		this.cloneRefresh = null;
-		this.cloneRootElement = null;
-		this.cloneTimegroup = null;
-		this.rebuildPending = false;
-		const container = this.cloneOverlayRef.value;
-		if (container) {
-			container.innerHTML = "";
-			container.style.display = "none";
-		}
 	}
 	async handlePresentationModeChange(mode) {
 		if (mode === this.presentationMode) return;
 		const previousMode = this.presentationMode;
-		if (previousMode === "clone") this.stopCloneOverlay();
-		else if (previousMode === "dom") this.stopDomMode();
+		if (previousMode === "dom") this.stopDomMode();
 		else if (previousMode === "canvas") this.stopCanvasMode();
 		setPreviewPresentationMode(mode);
 		this.previewSettings = {
@@ -916,8 +832,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			presentationMode: mode
 		};
 		await this.updateComplete;
-		if (mode === "clone") this.initCloneOverlay();
-		else if (mode === "dom") this.initDomMode();
+		if (mode === "dom") this.initDomMode();
 		else if (mode === "canvas") this.initCanvasMode();
 	}
 	initDomMode() {
@@ -928,15 +843,26 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			return;
 		}
 		const fitScale = this.querySelector("[slot='canvas']");
-		if (fitScale?.removeScale && fitScale?.paused !== void 0) {
+		if (!!(fitScale?.removeScale && fitScale?.paused !== void 0)) {
 			fitScale.paused = true;
 			fitScale.removeScale();
 		}
 		timegroup.proxyMode = false;
 		timegroup.style.clipPath = "";
 		timegroup.style.pointerEvents = "";
+		if (this.showStats && this.adaptiveTracker) {
+			this.domStatsStrategy = new DomStatsStrategy({
+				timegroup,
+				adaptiveTracker: this.adaptiveTracker
+			});
+			this.domStatsStrategy.start();
+		}
 	}
 	stopDomMode() {
+		if (this.domStatsStrategy) {
+			this.domStatsStrategy.stop();
+			this.domStatsStrategy = null;
+		}
 		const timegroup = this.getTimegroup();
 		if (timegroup) {
 			timegroup.style.clipPath = "inset(100%)";
@@ -944,20 +870,16 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		}
 		const fitScale = this.querySelector("[slot='canvas']");
 		if (fitScale?.paused !== void 0) fitScale.paused = false;
-		if (this.statsStrategy) {
-			this.statsStrategy.stop();
-			this.statsStrategy = null;
-		}
 	}
 	/**
 	* Get the resolution scale for canvas rendering (for fixed scale modes).
-	* 
+	*
 	* Logic:
 	* - Get actual displayed size from getBoundingClientRect()
 	* - For "Full": render at displayed size (1:1 pixel mapping)
 	* - For other settings: render at that % of displayed size
 	* - Never exceed composition size (100%)
-	* 
+	*
 	* Note: For "auto" mode, use getEffectiveResolutionScale() instead.
 	*/
 	getResolutionScale(timegroup, _canvasContainer) {
@@ -969,18 +891,9 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		const displayedHeight = rect.height;
 		const displayScale = Math.min(displayedWidth / compositionWidth, displayedHeight / compositionHeight);
 		const targetScale = this.previewResolutionScale === 1 ? displayScale : Math.min(displayScale, this.previewResolutionScale);
-		const finalScale = Math.max(.1, Math.min(1, targetScale));
-		const renderWidth = Math.floor(compositionWidth * finalScale);
-		const renderHeight = Math.floor(compositionHeight * finalScale);
-		console.log(`[EFWorkbench] Resolution scale:
-  Composition (offsetWidth×offsetHeight): ${compositionWidth}×${compositionHeight}
-  Displayed (boundingRect): ${Math.round(displayedWidth)}×${Math.round(displayedHeight)}
-  Display scale: ${(displayScale * 100).toFixed(1)}%
-  Setting: ${this.previewResolutionScale === 1 ? "Full" : `${Math.round(this.previewResolutionScale * 100)}%`}
-  Final: ${(finalScale * 100).toFixed(1)}% → ${renderWidth}×${renderHeight}`);
-		return finalScale;
+		return Math.max(.1, Math.min(1, targetScale));
 	}
-	initCanvasMode() {
+	async initCanvasMode() {
 		if (this.presentationMode !== "canvas") return;
 		const timegroup = this.getTimegroup();
 		const canvasContainer = this.canvasPreviewRef.value;
@@ -989,20 +902,23 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			return;
 		}
 		timegroup.proxyMode = false;
-		timegroup.style.clipPath = "inset(100%)";
+		timegroup.canvasPreviewActive = true;
+		timegroup.style.clipPath = "";
 		timegroup.style.pointerEvents = "none";
 		canvasContainer.style.display = "block";
 		const initialResolutionScale = this.previewResolutionScale === "auto" ? this.getEffectiveResolutionScale(timegroup, canvasContainer) : this.getResolutionScale(timegroup, canvasContainer);
 		this.lastCanvasZoom = this.panZoomTransform.scale;
-		timegroup.offsetWidth;
-		timegroup.offsetHeight;
 		try {
+			await timegroup.seekTask.taskComplete;
+			if (timegroup.playbackController) await new Promise((resolve) => setTimeout(resolve, 0));
+			updateAnimations(timegroup);
+			const { renderTimegroupToCanvas } = await import("../preview/renderTimegroupToCanvas.js");
 			const result = renderTimegroupToCanvas(timegroup, {
 				scale: 1,
 				resolutionScale: initialResolutionScale
 			});
 			this.canvasPreviewResult = result;
-			const { container, canvas, refresh, getResolutionScale } = result;
+			const { container, canvas, refresh } = result;
 			canvas.classList.add("clone-content");
 			canvasContainer.innerHTML = "";
 			canvasContainer.appendChild(container);
@@ -1010,7 +926,10 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			const loop = async () => {
 				if (this.presentationMode !== "canvas") return;
 				if (!this.isExporting) try {
+					const renderStart = performance.now();
 					await refresh();
+					const renderTime = performance.now() - renderStart;
+					if (this.renderStats) this.renderStats.recordFrame(renderTime, performance.now(), this.isAtRest);
 					this.updateCanvasTransform();
 				} catch (e) {
 					console.error("Canvas refresh failed:", e);
@@ -1031,11 +950,10 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			clearTimeout(this.zoomReinitTimeout);
 			this.zoomReinitTimeout = null;
 		}
+		this.canvasPreviewResult?.dispose();
 		this.canvasPreviewResult = null;
-		if (this.statsStrategy) {
-			this.statsStrategy.stop();
-			this.statsStrategy = null;
-		}
+		const timegroup = this.getTimegroup();
+		if (timegroup) timegroup.canvasPreviewActive = false;
 		const container = this.canvasPreviewRef.value;
 		if (container) {
 			container.innerHTML = "";
@@ -1051,12 +969,12 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		const { x, y, scale } = this.panZoomTransform;
 		canvas.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
 	}
-	initCanvasRenderer() {
+	async initCanvasRenderer() {
 		const timegroup = this.getTimegroup();
 		if (!timegroup) return null;
 		try {
+			const { renderTimegroupToCanvas } = await import("../preview/renderTimegroupToCanvas.js");
 			const { canvas, refresh } = renderTimegroupToCanvas(timegroup, 1);
-			this.canvasRefresh = refresh;
 			return {
 				canvas,
 				refresh
@@ -1082,6 +1000,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		this.exportProgress = null;
 		this.exportStatus = "rendering";
 		try {
+			const { renderTimegroupToVideo } = await import("../preview/renderTimegroupToVideo.js");
 			await renderTimegroupToVideo(timegroup, {
 				...options,
 				signal: this.exportAbortController.signal,
@@ -1097,6 +1016,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 				this.exportAbortController = null;
 			}, 2e3);
 		} catch (e) {
+			const { RenderCancelledError } = await import("../preview/renderTimegroupToVideo.js");
 			if (e instanceof RenderCancelledError) {
 				console.log("Export cancelled by user");
 				this.exportStatus = "cancelled";
@@ -1188,73 +1108,61 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			renderMode: mode
 		};
 	}
-	handleResolutionScaleChange(scale) {
-		console.log(`[EFWorkbench] Resolution scale changed to ${scale}, presentationMode=${this.presentationMode}`);
-		setPreviewResolutionScale(scale);
+	handleShowStatsToggle(enabled) {
+		setShowStats(enabled);
 		this.previewSettings = {
 			...this.previewSettings,
-			resolutionScale: scale
+			showStats: enabled
 		};
-		if (scale === "auto") {
-			this.adaptiveTracker?.reset();
-			this.currentAdaptiveScale = 1;
-		}
-		if (this.presentationMode === "canvas") {
-			console.log("[EFWorkbench] Reinitializing canvas mode with new resolution scale");
-			this.stopCanvasMode();
-			this.initCanvasMode();
-		}
-	}
-	async updateThumbnailCacheStats() {
-		try {
-			this.thumbnailCacheStats = await sessionThumbnailCache.getStats();
-		} catch (error) {
-			console.warn("Failed to update thumbnail cache stats:", error);
-		}
 	}
-	startCacheStatsUpdates() {
-		this.cacheStatsUpdateInterval = window.setInterval(() => {
-			this.updateThumbnailCacheStats();
-		}, 2e3);
-	}
-	stopCacheStatsUpdates() {
-		if (this.cacheStatsUpdateInterval !== null) {
-			clearInterval(this.cacheStatsUpdateInterval);
-			this.cacheStatsUpdateInterval = null;
-		}
-	}
-	handleThumbnailCacheMaxSizeChange(size) {
-		setThumbnailCacheMaxSize(size);
+	handleShowThumbnailTimestampsToggle(enabled) {
+		setShowThumbnailTimestamps(enabled);
 		this.previewSettings = {
 			...this.previewSettings,
-			thumbnailCacheMaxSize: size
+			showThumbnailTimestamps: enabled
 		};
-		sessionThumbnailCache.setMaxSize(size);
-		this.updateThumbnailCacheStats();
 	}
-	async handleClearThumbnailCache() {
-		await sessionThumbnailCache.clear();
-		await this.updateThumbnailCacheStats();
-	}
-	formatBytes(bytes) {
-		if (bytes < 1024) return `${bytes} B`;
-		else if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-		else return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	/**
+	* Get initial theme from localStorage or default to 'dark'
+	*/
+	getInitialTheme() {
+		if (typeof window === "undefined") return "dark";
+		const stored = localStorage.getItem("ef-theme");
+		if (stored === "light" || stored === "dark" || stored === "system") return stored;
+		return "dark";
 	}
-	handleDebugThumbnailTimestampsToggle(enabled) {
-		this.debugThumbnailTimestamps = enabled;
-		this.dispatchEvent(new CustomEvent("ef-debug-thumbnail-timestamps-changed", {
-			detail: { enabled },
-			bubbles: true,
-			composed: true
-		}));
+	/**
+	* Cycle through theme modes: light → dark → system → light
+	*/
+	handleThemeToggle() {
+		const nextTheme = this.themeMode === "light" ? "dark" : this.themeMode === "dark" ? "system" : "light";
+		this.themeMode = nextTheme;
+		localStorage.setItem("ef-theme", nextTheme);
+		this.applyTheme();
 	}
-	handleShowStatsToggle(enabled) {
-		setShowStats(enabled);
-		this.previewSettings = {
-			...this.previewSettings,
-			showStats: enabled
-		};
+	/**
+	* Apply the current theme to the document and host element
+	*/
+	applyTheme() {
+		const root = document.documentElement;
+		let shouldBeDark = false;
+		if (this.themeMode === "light") shouldBeDark = false;
+		else if (this.themeMode === "dark") shouldBeDark = true;
+		else shouldBeDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+		if (shouldBeDark) {
+			root.classList.add("dark");
+			root.classList.remove("light");
+		} else {
+			root.classList.add("light");
+			root.classList.remove("dark");
+		}
+		if (shouldBeDark) {
+			this.classList.add("dark");
+			this.classList.remove("light");
+		} else {
+			this.classList.add("light");
+			this.classList.remove("dark");
+		}
 	}
 	/**
 	* Reset and fit the preview to show all content centered.
@@ -1280,77 +1188,33 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         
         <!-- Presentation Mode Setting -->
         <div style="
-          background: rgba(51, 65, 85, 0.4);
+          background: var(--ef-color-bg-inset);
           border-radius: 8px;
           padding: 12px;
           margin-bottom: 10px;
         ">
-          <div style="color: #e2e8f0; font-size: 12px; font-weight: 500; margin-bottom: 10px;">Presentation Mode</div>
+          <div class="dropdown-label" style="margin-bottom: 10px;">Presentation Mode</div>
           
-          <div style="display: flex; gap: 4px; background: rgba(30, 41, 59, 0.6); border-radius: 6px; padding: 3px;">
-            <button
-              @click=${() => this.handlePresentationModeChange("clone")}
-              style="
-                flex: 1;
-                padding: 6px 10px;
-                border: none;
-                border-radius: 4px;
-                font-size: 11px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.presentationMode === "clone" ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.presentationMode === "clone" ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.presentationMode === "clone" ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
-            >Clone</button>
+          <div class="button-group">
             <button
               @click=${() => this.handlePresentationModeChange("dom")}
-              style="
-                flex: 1;
-                padding: 6px 10px;
-                border: none;
-                border-radius: 4px;
-                font-size: 11px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.presentationMode === "dom" ? "rgba(34, 197, 94, 0.3)" : "transparent"};
-                color: ${this.presentationMode === "dom" ? "#4ade80" : "#94a3b8"};
-                border: 1px solid ${this.presentationMode === "dom" ? "rgba(34, 197, 94, 0.4)" : "transparent"};
-              "
+              class="button-group-btn ${this.presentationMode === "dom" ? "active" : ""}"
             >DOM</button>
             <button
               @click=${() => this.handlePresentationModeChange("canvas")}
-              style="
-                flex: 1;
-                padding: 6px 10px;
-                border: none;
-                border-radius: 4px;
-                font-size: 11px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.presentationMode === "canvas" ? "rgba(168, 85, 247, 0.3)" : "transparent"};
-                color: ${this.presentationMode === "canvas" ? "#c084fc" : "#94a3b8"};
-                border: 1px solid ${this.presentationMode === "canvas" ? "rgba(168, 85, 247, 0.4)" : "transparent"};
-              "
+              class="button-group-btn ${this.presentationMode === "canvas" ? "active" : ""}"
             >Canvas</button>
           </div>
           
-          <div style="margin-top: 8px; color: #64748b; font-size: 10px; line-height: 1.4;">
-            ${this.presentationMode === "clone" ? "Default. Shows a styled clone synced from the hidden original." : this.presentationMode === "dom" ? "Shows the real timegroup DOM directly." : "Renders to canvas each frame (experimental)."}
+          <div class="dropdown-description">
+            ${this.presentationMode === "dom" ? "Default. Shows the real timegroup DOM directly." : "Renders to canvas each frame."}
           </div>
         </div>
         
         <!-- Render Mode Setting -->
-        <div style="
-          background: rgba(51, 65, 85, 0.4);
-          border-radius: 8px;
-          padding: 12px;
-        ">
+        <div class="dropdown-section">
           <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: #e2e8f0; font-size: 12px; font-weight: 500;">Render Mode</span>
+            <span class="dropdown-label">Render Mode</span>
             ${isAvailable ? html`
               <div style="display: flex; align-items: center; gap: 5px;">
                 <span style="
@@ -1358,321 +1222,67 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
                   width: 7px;
                   height: 7px;
                   border-radius: 50%;
-                  background: #4ade80;
+                  background: var(--ef-color-success);
                 "></span>
-                <span style="color: #4ade80; font-size: 10px; font-weight: 500;">
+                <span style="color: var(--ef-color-success); font-size: 10px; font-weight: 500;">
                   Native Available
                 </span>
               </div>
             ` : ""}
           </div>
           
-          <div style="display: flex; gap: 4px; background: rgba(30, 41, 59, 0.6); border-radius: 6px; padding: 3px;">
+          <div class="button-group">
             <button
               @click=${() => this.handleRenderModeChange("foreignObject")}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.renderMode === "foreignObject" ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.renderMode === "foreignObject" ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.renderMode === "foreignObject" ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
+              class="button-group-btn ${this.renderMode === "foreignObject" ? "active" : ""}"
             >foreignObject</button>
             <button
               @click=${() => this.handleRenderModeChange("native")}
               ?disabled=${!isAvailable}
+              class="button-group-btn ${this.renderMode === "native" ? "active" : ""}"
               style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
                 cursor: ${isAvailable ? "pointer" : "not-allowed"};
-                transition: all 0.15s ease;
-                background: ${this.renderMode === "native" ? "rgba(34, 197, 94, 0.3)" : "transparent"};
-                color: ${this.renderMode === "native" ? "#4ade80" : isAvailable ? "#94a3b8" : "#64748b"};
-                border: 1px solid ${this.renderMode === "native" ? "rgba(34, 197, 94, 0.4)" : "transparent"};
                 opacity: ${isAvailable ? "1" : "0.5"};
               "
             >native</button>
           </div>
           
-          <div style="margin-top: 8px; color: #64748b; font-size: 10px; line-height: 1.4;">
+          <div class="dropdown-description">
             ${this.renderMode === "foreignObject" ? "SVG foreignObject serialization. Works everywhere but slower." : "Chrome's drawElementImage API. Fastest, requires chrome://flags/#canvas-draw-element."}
           </div>
         </div>
         
-        <!-- Preview Resolution Setting -->
-        <div style="
-          background: rgba(51, 65, 85, 0.4);
-          border-radius: 8px;
-          padding: 12px;
-          margin-top: 10px;
-        ">
-          <div style="color: #e2e8f0; font-size: 12px; font-weight: 500; margin-bottom: 10px;">Preview Resolution</div>
-          
-          <div style="display: flex; gap: 4px; background: rgba(30, 41, 59, 0.6); border-radius: 6px; padding: 3px;">
-            <button
-              @click=${() => this.handleResolutionScaleChange("auto")}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.previewResolutionScale === "auto" ? "rgba(34, 197, 94, 0.3)" : "transparent"};
-                color: ${this.previewResolutionScale === "auto" ? "#4ade80" : "#94a3b8"};
-                border: 1px solid ${this.previewResolutionScale === "auto" ? "rgba(34, 197, 94, 0.4)" : "transparent"};
-              "
-            >Auto</button>
-            <button
-              @click=${() => this.handleResolutionScaleChange(1)}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.previewResolutionScale === 1 ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.previewResolutionScale === 1 ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.previewResolutionScale === 1 ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
-            >Full</button>
-            <button
-              @click=${() => this.handleResolutionScaleChange(.75)}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.previewResolutionScale === .75 ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.previewResolutionScale === .75 ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.previewResolutionScale === .75 ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
-            >3/4</button>
-            <button
-              @click=${() => this.handleResolutionScaleChange(.5)}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.previewResolutionScale === .5 ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.previewResolutionScale === .5 ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.previewResolutionScale === .5 ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
-            >1/2</button>
-            <button
-              @click=${() => this.handleResolutionScaleChange(.25)}
-              style="
-                flex: 1;
-                padding: 6px 8px;
-                border: none;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.15s ease;
-                background: ${this.previewResolutionScale === .25 ? "rgba(59, 130, 246, 0.3)" : "transparent"};
-                color: ${this.previewResolutionScale === .25 ? "#60a5fa" : "#94a3b8"};
-                border: 1px solid ${this.previewResolutionScale === .25 ? "rgba(59, 130, 246, 0.4)" : "transparent"};
-              "
-            >1/4</button>
-          </div>
-          
-          <div style="margin-top: 8px; color: #64748b; font-size: 10px; line-height: 1.4;">
-            ${this.previewResolutionScale === "auto" ? `Auto: Full resolution at rest, adaptive during playback/scrub.${!this.isAtRest ? ` Currently: ${Math.round(this.currentAdaptiveScale * 100)}%` : ""}` : this.previewResolutionScale === 1 ? "Full: Matches display resolution (1:1 pixels, adapts to zoom)." : `${Math.round(this.previewResolutionScale * 100)}%: Reduced quality for faster rendering.`}
-            Canvas mode only.
-          </div>
-        </div>
+        <!-- This section was already updated earlier in the dropdown-section refactor -->
         
         <!-- Show Performance Stats Setting -->
-        <div style="
-          background: rgba(51, 65, 85, 0.4);
-          border-radius: 8px;
-          padding: 12px;
-          margin-top: 10px;
-        ">
-          <label style="
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-          ">
+        <div class="dropdown-section">
+          <label class="checkbox-label">
             <input
               type="checkbox"
               ?checked=${this.showStats}
               @change=${(e) => this.handleShowStatsToggle(e.target.checked)}
-              style="
-                width: 14px;
-                height: 14px;
-                accent-color: #3b82f6;
-                cursor: pointer;
-              "
             />
-            <span style="color: #e2e8f0; font-size: 12px; font-weight: 500;">Show Performance Stats</span>
+            <span>Show Performance Stats</span>
           </label>
           
-          <div style="
-            margin-top: 8px;
-            color: #64748b;
-            font-size: 10px;
-            line-height: 1.4;
-          ">
+          <div class="dropdown-description">
             Display FPS, CPU pressure, and performance metrics overlay.
           </div>
         </div>
         
-        <!-- Thumbnail Cache Setting -->
-        <div 
-          data-testid="thumbnail-cache-section"
-          style="
-            background: rgba(51, 65, 85, 0.4);
-            border-radius: 8px;
-            padding: 12px;
-            margin-top: 10px;
-          "
-        >
-          <div style="color: #e2e8f0; font-size: 12px; font-weight: 500; margin-bottom: 10px;">Thumbnail Cache</div>
-          
-          <!-- Cache Size Input -->
-          <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-            <label style="color: #94a3b8; font-size: 11px; min-width: 80px;">Max Size:</label>
-            <input
-              data-testid="thumbnail-cache-size"
-              type="number"
-              min="100"
-              max="5000"
-              step="100"
-              .value=${String(this.thumbnailCacheMaxSize)}
-              @change=${(e) => {
-			const value = parseInt(e.target.value, 10);
-			if (!isNaN(value) && value >= 100 && value <= 5e3) this.handleThumbnailCacheMaxSizeChange(value);
-		}}
-              style="
-                flex: 1;
-                padding: 4px 8px;
-                background: rgba(30, 41, 59, 0.6);
-                border: 1px solid rgba(148, 163, 184, 0.2);
-                border-radius: 4px;
-                color: #e2e8f0;
-                font-size: 11px;
-              "
-            />
-            <span style="color: #64748b; font-size: 10px;">items</span>
-          </div>
-          
-          <!-- Cache Statistics -->
-          ${this.thumbnailCacheStats ? html`
-            <div 
-              data-testid="thumbnail-cache-stats"
-              style="
-                background: rgba(30, 41, 59, 0.6);
-                border-radius: 6px;
-                padding: 8px;
-                margin-bottom: 10px;
-                font-size: 10px;
-                color: #94a3b8;
-              "
-            >
-              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
-                <span>Items:</span>
-                <span style="color: #e2e8f0; font-weight: 500;">${this.thumbnailCacheStats.itemCount} / ${this.thumbnailCacheStats.maxSize}</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span>Size:</span>
-                <span style="color: #e2e8f0; font-weight: 500;">${this.formatBytes(this.thumbnailCacheStats.totalSizeBytes)}</span>
-              </div>
-            </div>
-          ` : ""}
-          
-          <!-- Clear Cache Button -->
-          <button
-            data-testid="thumbnail-cache-clear"
-            @click=${() => this.handleClearThumbnailCache()}
-            style="
-              width: 100%;
-              padding: 6px 10px;
-              background: rgba(239, 68, 68, 0.2);
-              border: 1px solid rgba(239, 68, 68, 0.4);
-              border-radius: 4px;
-              color: #f87171;
-              font-size: 11px;
-              font-weight: 500;
-              cursor: pointer;
-              transition: all 0.15s ease;
-            "
-            onmouseover="this.style.background='rgba(239, 68, 68, 0.3)'"
-            onmouseout="this.style.background='rgba(239, 68, 68, 0.2)'"
-          >
-            Clear Cache
-          </button>
-          
-          <div style="
-            margin-top: 8px;
-            color: #64748b;
-            font-size: 10px;
-            line-height: 1.4;
-          ">
-            Persistent cache survives page reloads. Stored in IndexedDB.
-          </div>
-        </div>
-        
-        <!-- Debug Thumbnails Setting -->
-        <div style="
-          background: rgba(51, 65, 85, 0.4);
-          border-radius: 8px;
-          padding: 12px;
-          margin-top: 10px;
-        ">
-          <label style="
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-          ">
+        <!-- Thumbnail Timestamps -->
+        <div class="dropdown-section">
+          <label class="checkbox-label">
             <input
               type="checkbox"
-              ?checked=${this.debugThumbnailTimestamps}
-              @change=${(e) => this.handleDebugThumbnailTimestampsToggle(e.target.checked)}
-              style="
-                width: 14px;
-                height: 14px;
-                accent-color: #f59e0b;
-                cursor: pointer;
-              "
+              ?checked=${this.previewSettings.showThumbnailTimestamps}
+              @change=${(e) => this.handleShowThumbnailTimestampsToggle(e.target.checked)}
             />
-            <span style="color: #e2e8f0; font-size: 12px; font-weight: 500;">Show Thumbnail Timestamps</span>
+            <span>Show Thumbnail Timestamps</span>
           </label>
           
-          <div style="
-            margin-top: 8px;
-            color: #64748b;
-            font-size: 10px;
-            line-height: 1.4;
-          ">
-            Overlays capture timestamps on timeline thumbnails for debugging.
+          <div class="dropdown-description">
+            Display timestamp overlay on timeline thumbnails for debugging.
           </div>
         </div>
       </div>
@@ -1694,18 +1304,9 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         
         <!-- Scale -->
         <div style="margin-bottom: 10px;">
-          <label style="display: block; color: #94a3b8; font-size: 11px; margin-bottom: 4px;">Scale</label>
+          <label class="dropdown-label" style="display: block; margin-bottom: 4px;">Scale</label>
           <select
-            style="
-              width: 100%;
-              padding: 6px 10px;
-              background: rgba(51, 65, 85, 0.8);
-              border: 1px solid rgba(148, 163, 184, 0.2);
-              border-radius: 5px;
-              color: #e2e8f0;
-              font-size: 12px;
-              cursor: pointer;
-            "
+            class="dropdown-select"
             .value=${String(this.exportOptions.scale)}
             @change=${(e) => this.updateExportOption("scale", Number(e.target.value))}
           >
@@ -1718,77 +1319,59 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         
         <!-- Audio -->
         <div style="margin-bottom: 10px;">
-          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+          <label class="checkbox-label">
             <input
               type="checkbox"
               ?checked=${this.exportOptions.includeAudio}
               @change=${(e) => this.updateExportOption("includeAudio", e.target.checked)}
-              style="width: 14px; height: 14px; accent-color: #3b82f6;"
             />
-            <span style="color: #e2e8f0; font-size: 12px;">Include Audio</span>
+            <span>Include Audio</span>
           </label>
         </div>
         
         <!-- In/Out Range -->
         <div style="margin-bottom: 12px;">
-          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 6px;">
+          <label class="checkbox-label" style="margin-bottom: 6px;">
             <input
               type="checkbox"
               ?checked=${this.exportOptions.useInOut}
               @change=${(e) => this.updateExportOption("useInOut", e.target.checked)}
-              style="width: 14px; height: 14px; accent-color: #3b82f6;"
             />
-            <span style="color: #e2e8f0; font-size: 12px;">Custom Range</span>
+            <span>Custom Range</span>
           </label>
           
           ${this.exportOptions.useInOut ? html`
             <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px;">
               <div>
-                <label style="display: block; color: #94a3b8; font-size: 10px; margin-bottom: 2px;">In (ms)</label>
+                <label class="dropdown-label" style="display: block; margin-bottom: 2px; font-size: 10px;">In (ms)</label>
                 <input
                   type="number"
+                  class="dropdown-input"
+                  style="font-family: ui-monospace, monospace;"
                   min="0"
                   max=${durationMs}
                   .value=${String(this.exportOptions.inMs)}
                   @change=${(e) => this.updateExportOption("inMs", Number(e.target.value))}
-                  style="
-                    width: 100%;
-                    padding: 5px 7px;
-                    background: rgba(51, 65, 85, 0.8);
-                    border: 1px solid rgba(148, 163, 184, 0.2);
-                    border-radius: 4px;
-                    color: #e2e8f0;
-                    font-size: 11px;
-                    font-family: ui-monospace, monospace;
-                  "
                 />
               </div>
               <div>
-                <label style="display: block; color: #94a3b8; font-size: 10px; margin-bottom: 2px;">Out (ms)</label>
+                <label class="dropdown-label" style="display: block; margin-bottom: 2px; font-size: 10px;">Out (ms)</label>
                 <input
                   type="number"
+                  class="dropdown-input"
+                  style="font-family: ui-monospace, monospace;"
                   min="0"
                   max=${durationMs}
                   .value=${String(this.exportOptions.outMs)}
                   @change=${(e) => this.updateExportOption("outMs", Number(e.target.value))}
-                  style="
-                    width: 100%;
-                    padding: 5px 7px;
-                    background: rgba(51, 65, 85, 0.8);
-                    border: 1px solid rgba(148, 163, 184, 0.2);
-                    border-radius: 4px;
-                    color: #e2e8f0;
-                    font-size: 11px;
-                    font-family: ui-monospace, monospace;
-                  "
                 />
               </div>
             </div>
-            <div style="color: #64748b; font-size: 10px; margin-top: 4px;">
+            <div class="dropdown-description" style="margin-top: 4px;">
               Duration: ${this.formatTime(this.exportOptions.outMs - this.exportOptions.inMs)} / ${this.formatTime(durationMs)}
             </div>
           ` : html`
-            <div style="color: #64748b; font-size: 10px;">
+            <div class="dropdown-description">
               Full duration: ${this.formatTime(durationMs)}
             </div>
           `}
@@ -1821,16 +1404,16 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		let statusColor;
 		let statusText;
 		if (isComplete) {
-			statusColor = "#4ade80";
+			statusColor = "var(--ef-color-success)";
 			statusText = "Complete!";
 		} else if (isError) {
-			statusColor = "#f87171";
+			statusColor = "var(--ef-color-danger)";
 			statusText = "Failed";
 		} else if (isCancelled) {
-			statusColor = "#fbbf24";
+			statusColor = "var(--ef-color-warning)";
 			statusText = "Cancelled";
 		} else {
-			statusColor = "#60a5fa";
+			statusColor = "var(--ef-color-primary)";
 			statusText = `${progressPercent}%`;
 		}
 		return html`
@@ -1845,7 +1428,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           ${isRendering ? html`
             <button 
               class="dropdown-close" 
-              style="color: #f87171;"
+              style="color: var(--ef-color-danger);"
               @click=${this.handleCancelClick}
             >Cancel</button>
           ` : null}
@@ -1859,7 +1442,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
             <style>
               ef-workbench canvas {
                 border-radius: 4px;
-                border: 1px solid rgba(148, 163, 184, 0.2);
+                border: 1px solid var(--ef-color-border);
                 max-width: 100%;
                 height: auto;
               }
@@ -1868,25 +1451,25 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 10px; font-family: ui-monospace, monospace; font-size: 10px;">
             <div>
-              <div style="color: #64748b;">Frames</div>
-              <div style="color: #e2e8f0;">${p.currentFrame} / ${p.totalFrames}</div>
+              <div style="color: var(--ef-color-text-subtle);">Frames</div>
+              <div style="color: var(--ef-color-text);">${p.currentFrame} / ${p.totalFrames}</div>
             </div>
             <div>
-              <div style="color: #64748b;">Time</div>
-              <div style="color: #e2e8f0;">${this.formatTime(p.renderedMs)} / ${this.formatTime(p.totalDurationMs)}</div>
+              <div style="color: var(--ef-color-text-subtle);">Time</div>
+              <div style="color: var(--ef-color-text);">${this.formatTime(p.renderedMs)} / ${this.formatTime(p.totalDurationMs)}</div>
             </div>
             <div>
-              <div style="color: #64748b;">Speed</div>
-              <div style="color: ${p.speedMultiplier >= 1 ? "#4ade80" : "#fbbf24"};">${p.speedMultiplier.toFixed(2)}x</div>
+              <div style="color: var(--ef-color-text-subtle);">Speed</div>
+              <div style="color: ${p.speedMultiplier >= 1 ? "var(--ef-color-success)" : "var(--ef-color-warning)"};">${p.speedMultiplier.toFixed(2)}x</div>
             </div>
             <div>
-              <div style="color: #64748b;">ETA</div>
-              <div style="color: #e2e8f0;">${this.formatTime(p.estimatedRemainingMs)}</div>
+              <div style="color: var(--ef-color-text-subtle);">ETA</div>
+              <div style="color: var(--ef-color-text);">${this.formatTime(p.estimatedRemainingMs)}</div>
             </div>
           </div>
         ` : null}
         
-        <div style="height: 4px; background: rgba(51, 65, 85, 0.8); border-radius: 2px; overflow: hidden;">
+        <div style="height: 4px; background: var(--ef-color-bg-inset); border-radius: 2px; overflow: hidden;">
           <div style="
             height: 100%;
             width: ${progressPercent}%;
@@ -1910,7 +1493,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	}
 	renderToolbar() {
 		return html`
-      <div class="toolbar">
+      <div class="toolbar" part="toolbar">
         <div class="toolbar-left">
           <!-- Fit to content button -->
           <button 
@@ -1926,14 +1509,43 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         </div>
         
         <div class="toolbar-right">
-          <!-- Mode indicator (shown when not in default clone mode) -->
-          ${this.presentationMode !== "clone" ? html`
-            <span class="mode-indicator ${this.presentationMode}">
-              ${this.presentationMode === "dom" ? "DOM" : html`
-                Canvas ${getRenderMode() === "native" ? phosphorIcon(ICONS.lightning, 12) : phosphorIcon(ICONS.code, 12)}
-              `}
-            </span>
-          ` : null}
+          <!-- Mode indicator -->
+          <span class="mode-indicator ${this.presentationMode}">
+            ${this.presentationMode === "dom" ? "DOM" : html`
+              Canvas ${getRenderMode() === "native" ? phosphorIcon(ICONS.lightning, 12) : phosphorIcon(ICONS.code, 12)}
+            `}
+          </span>
+          
+          <!-- Theme toggle button -->
+          <button 
+            class="toolbar-icon-btn"
+            @click=${this.handleThemeToggle}
+            title="${this.themeMode === "light" ? "Light mode" : this.themeMode === "dark" ? "Dark mode" : "System preference"}"
+          >
+            ${this.themeMode === "light" ? html`
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            ` : this.themeMode === "dark" ? html`
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+              </svg>
+            ` : html`
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                <line x1="8" y1="21" x2="16" y2="21"></line>
+                <line x1="12" y1="17" x2="12" y2="21"></line>
+              </svg>
+            `}
+          </button>
           
           <!-- Settings button -->
           <button 
@@ -1953,7 +1565,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
               style="min-width: 100px;"
               popovertarget="export-progress-popover"
             >
-              <div style="width: 12px; height: 12px; border: 2px solid rgba(96, 165, 250, 0.3); border-top-color: #60a5fa; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+              <div style="width: 12px; height: 12px; border: 2px solid var(--ef-color-primary-subtle); border-top-color: var(--ef-color-primary); border-radius: 50%; animation: spin 1s linear infinite;"></div>
               Exporting...
             </button>
           ` : html`
@@ -2001,17 +1613,32 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		}
 	}
 	renderPlaybackStats() {
-		if (!this.showStats || !this.statsStrategy) return null;
-		const stats = this.statsStrategy.getStats();
+		if (!this.showStats) return null;
+		let stats = null;
+		if (this.presentationMode === "canvas" && this.renderStats) {
+			const timegroup = this.getTimegroup();
+			if (!timegroup) return null;
+			const compositionWidth = timegroup.offsetWidth || 1920;
+			const compositionHeight = timegroup.offsetHeight || 1080;
+			const resolutionScale = this.canvasPreviewResult ? this.canvasPreviewResult.getResolutionScale() : 1;
+			const renderWidth = Math.floor(compositionWidth * resolutionScale);
+			const renderHeight = Math.floor(compositionHeight * resolutionScale);
+			stats = this.renderStats.getStats(renderWidth, renderHeight, resolutionScale);
+		} else if (this.presentationMode === "dom" && this.domStatsStrategy) stats = this.domStatsStrategy.getStats();
 		if (!stats) return null;
 		const fpsClass = stats.fps >= 55 ? "good" : stats.fps >= 25 ? "warning" : "bad";
 		const renderClass = stats.avgRenderTime !== null ? stats.avgRenderTime <= 20 ? "good" : stats.avgRenderTime <= 30 ? "warning" : "bad" : "";
 		const headroomClass = stats.headroom !== null ? stats.headroom >= 10 ? "good" : stats.headroom >= 0 ? "warning" : "bad" : "";
 		const pressureClass = stats.pressureState === "nominal" ? "good" : stats.pressureState === "fair" ? "good" : stats.pressureState === "serious" ? "warning" : "bad";
 		const scaleClass = stats.resolutionScale !== null ? stats.resolutionScale >= .75 ? "good" : stats.resolutionScale >= .5 ? "warning" : "bad" : "";
+		const isCanvasMode = this.presentationMode === "canvas";
+		const showRenderTime = isCanvasMode;
+		const showHeadroom = isCanvasMode;
+		const showResolutionScale = isCanvasMode;
+		const showAdaptiveResolution = isCanvasMode && this.previewResolutionScale === "auto";
 		const motionState = this.isAtRest ? "At Rest" : this.isPlaying ? "Playing" : this.isScrubbing ? "Scrubbing" : "Idle";
 		const renderPressureHistogram = () => {
-			if (stats.pressureHistory.length === 0) return html`<div style="color: #64748b; font-size: 9px;">No pressure data (API not available)</div>`;
+			if (stats.pressureHistory.length === 0) return html`<div style="color: var(--ef-color-text-subtle); font-size: 9px;">No pressure data (API not available)</div>`;
 			return html`
         <div class="pressure-histogram">
           ${stats.pressureHistory.map((state$1) => html`
@@ -2033,13 +1660,13 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           <span class="stat-label">FPS</span>
           <span class="stat-value ${fpsClass}">${padNum(stats.fps, 1, 5)}</span>
         </div>
-        ${this.statsStrategy.supportsStat("renderTime") && stats.avgRenderTime !== null ? html`
+        ${showRenderTime && stats.avgRenderTime !== null ? html`
           <div class="stat-row">
             <span class="stat-label">Render</span>
             <span class="stat-value ${renderClass}">${padNum(stats.avgRenderTime, 1, 5)}ms</span>
           </div>
         ` : null}
-        ${this.statsStrategy.supportsStat("headroom") && stats.headroom !== null ? html`
+        ${showHeadroom && stats.headroom !== null ? html`
           <div class="stat-row">
             <span class="stat-label">Headroom</span>
             <span class="stat-value ${headroomClass}">${stats.headroom >= 0 ? "+" : ""}${padNum(stats.headroom, 1, 4)}ms</span>
@@ -2049,7 +1676,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           <span class="stat-label">Resolution</span>
           <span class="stat-value">${stats.renderWidth}×${stats.renderHeight}</span>
         </div>
-        ${this.statsStrategy.supportsStat("resolutionScale") && stats.resolutionScale !== null ? html`
+        ${showResolutionScale && stats.resolutionScale !== null ? html`
           <div class="stat-row">
             <span class="stat-label">Scale</span>
             <span class="stat-value ${scaleClass}">${String(Math.round(stats.resolutionScale * 100)).padStart(3, " ")}%</span>
@@ -2063,8 +1690,8 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           <span class="stat-label">State</span>
           <span class="stat-value">${motionState}</span>
         </div>
-        ${this.statsStrategy.supportsStat("adaptiveResolution") && this.previewResolutionScale === "auto" && stats.samplesAtCurrentScale !== void 0 ? html`
-          <div style="margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(148, 163, 184, 0.2);">
+        ${showAdaptiveResolution && stats.samplesAtCurrentScale !== void 0 ? html`
+          <div style="margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ef-color-border-subtle);">
             <div class="stat-row">
               <span class="stat-label">Mode</span>
               <span class="stat-value good">Auto</span>
@@ -2097,56 +1724,45 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;
 		return html`
+      <!-- Top: Full-width Toolbar -->
+      <div style="grid-row: 1 / 2; grid-column: 1 / -1;">
+        ${this.renderToolbar()}
+      </div>
+      
+      <!-- Left: Hierarchy Panel -->
       <div
-        class="grid overflow-hidden"
-        style="flex: 1; min-height: 0; width: 100%; grid-template-rows: auto 1fr 280px; grid-template-columns: 280px 1fr; background-color: var(--workbench-bg);"
+        style="grid-row: 2 / 3; grid-column: 1 / 2; background: var(--ef-color-bg-panel); border-right: 1px solid var(--ef-color-border); min-height: 0; overflow: hidden;"
       >
-        <!-- Top: Full-width Toolbar -->
-        <div style="grid-row: 1 / 2; grid-column: 1 / -1;">
-          ${this.renderToolbar()}
-        </div>
-        
-        <!-- Left: Hierarchy Panel -->
-        <div
-          style="grid-row: 2 / 3; grid-column: 1 / 2; background: rgb(30 41 59); border-right: 1px solid rgba(148, 163, 184, 0.2); min-height: 0; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;"
-        >
-          <slot name="hierarchy"></slot>
-        </div>
+        <slot name="hierarchy"></slot>
+      </div>
 
-        <!-- Center: Canvas area -->
-        <div
-          class="canvas-container"
-          style="grid-row: 2 / 3; grid-column: 2 / 3; min-height: 0;"
-          @wheel=${this.handleStageWheel}
-        >
-          <!-- Original timegroup (hidden in clone/canvas mode, visible in dom mode) -->
-          <slot name="canvas"></slot>
-          
-          <!-- Clone overlay (visible in clone mode only) -->
-          <div 
-            class="clone-overlay" 
-            ${ref(this.cloneOverlayRef)}
-            style="display: ${this.presentationMode === "clone" ? "block" : "none"}"
-          ></div>
-          
-          <!-- Canvas preview (visible in canvas mode only) -->
-          <div 
-            class="clone-overlay" 
-            ${ref(this.canvasPreviewRef)}
-            style="display: ${this.presentationMode === "canvas" ? "block" : "none"}"
-          ></div>
-          
-          <!-- Playback stats overlay (visible in canvas mode only) -->
-          ${this.renderPlaybackStats()}
-        </div>
+      <!-- Center: Canvas area -->
+      <div
+        class="canvas-container"
+        part="canvas"
+        style="grid-row: 2 / 3; grid-column: 2 / 3; min-height: 0; overflow: hidden;"
+        @wheel=${this.handleStageWheel}
+      >
+        <!-- Original timegroup (hidden in clone/canvas mode, visible in dom mode) -->
+        <slot name="canvas"></slot>
+        
+        <!-- Canvas preview (visible in canvas mode only) -->
+        <div 
+          class="canvas-overlay" 
+          ${ref(this.canvasPreviewRef)}
+          style="display: ${this.presentationMode === "canvas" ? "block" : "none"}"
+        ></div>
+        
+        <!-- Playback stats overlay (visible in canvas mode only) -->
+        ${this.renderPlaybackStats()}
+      </div>
 
-        <!-- Bottom: Timeline -->
-        <div
-          class="overflow-hidden"
-          style="grid-row: 3 / 4; grid-column: 1 / -1; width: 100%; border-top: 1px solid rgba(148, 163, 184, 0.2);"
-        >
-          <slot name="timeline"></slot>
-        </div>
+      <!-- Bottom: Timeline -->
+      <div
+        class="overflow-hidden"
+        style="grid-row: 3 / 4; grid-column: 1 / -1; height: 100%; border-top: 1px solid var(--ef-color-border);"
+      >
+        <slot name="timeline"></slot>
       </div>
     `;
 	}
@@ -2160,15 +1776,13 @@ __decorate([provide({ context: previewSettingsContext }), state()], EFWorkbench.
 __decorate([state()], EFWorkbench.prototype, "renderMode", void 0);
 __decorate([state()], EFWorkbench.prototype, "presentationMode", void 0);
 __decorate([state()], EFWorkbench.prototype, "previewResolutionScale", void 0);
-__decorate([state()], EFWorkbench.prototype, "debugThumbnailTimestamps", void 0);
-__decorate([state()], EFWorkbench.prototype, "thumbnailCacheMaxSize", void 0);
-__decorate([state()], EFWorkbench.prototype, "thumbnailCacheStats", void 0);
 __decorate([state()], EFWorkbench.prototype, "exportOptions", void 0);
 __decorate([state()], EFWorkbench.prototype, "isPlaying", void 0);
 __decorate([state()], EFWorkbench.prototype, "isScrubbing", void 0);
 __decorate([state()], EFWorkbench.prototype, "isAtRest", void 0);
 __decorate([state()], EFWorkbench.prototype, "currentAdaptiveScale", void 0);
 __decorate([state()], EFWorkbench.prototype, "showStats", void 0);
+__decorate([state()], EFWorkbench.prototype, "themeMode", void 0);
 __decorate([eventOptions({
 	passive: false,
 	capture: true