@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.0

package/dist/gui/EFWorkbench.js

@@ -1,16 +1,88 @@
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin2.js";
+import { renderTimegroupPreview } from "../preview/renderTimegroupPreview.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 { previewSettingsContext } from "./previewSettingsContext.js";
+import "./EFFitScale.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, eventOptions, property } from "lit/decorators.js";
+import { customElement, eventOptions, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 //#region src/gui/EFWorkbench.ts
+/** Debounce delay before considering the preview "at rest" after motion stops */
+const REST_DEBOUNCE_MS = 200;
 let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.rendering = false;
+		this.panZoomTransform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this.isExporting = false;
+		this.exportProgress = null;
+		this.exportStatus = "idle";
+		this.previewSettings = {
+			presentationMode: getPreviewPresentationMode(),
+			renderMode: getRenderMode(),
+			resolutionScale: getPreviewResolutionScale(),
+			showStats: getShowStats(),
+			thumbnailCacheMaxSize: getThumbnailCacheMaxSize()
+		};
+		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,
+			useInOut: false,
+			inMs: 0,
+			outMs: 0
+		};
+		this.exportAbortController = null;
+		this.isPlaying = false;
+		this.isScrubbing = false;
+		this.isAtRest = true;
+		this.currentAdaptiveScale = 1;
+		this.showStats = this.previewSettings.showStats;
+		this.statsStrategy = 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;
+		this.boundHandleTransformChanged = this.handleTransformChanged.bind(this);
 		this.focusOverlay = createRef();
+		this.lastCanvasZoom = 1;
+		this.zoomReinitTimeout = null;
 		this.drawOverlays = () => {
 			const focusOverlay = this.focusOverlay.value;
 			if (focusOverlay) if (this.focusedElement) {
@@ -30,14 +102,20 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	static {
 		this.styles = [css`
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
         width: 100%;
         height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
         
         /* 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) {
@@ -45,6 +123,309 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         --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);
+      }
+      
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 8px 12px;
+        background: var(--toolbar-bg);
+        border-bottom: 1px solid var(--toolbar-border);
+        flex-shrink: 0;
+        font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+        position: relative;
+        z-index: 20;
+      }
+      
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      
+      .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      
+      .toolbar-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 6px 12px;
+        background: rgba(51, 65, 85, 0.6);
+        border: 1px solid rgba(148, 163, 184, 0.2);
+        border-radius: 6px;
+        color: #e2e8f0;
+        font-size: 12px;
+        font-weight: 500;
+        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);
+      }
+      
+      .toolbar-btn.active {
+        background: rgba(59, 130, 246, 0.2);
+        border-color: rgba(59, 130, 246, 0.4);
+        color: #60a5fa;
+      }
+      
+      .toolbar-btn.primary {
+        background: linear-gradient(135deg, #3b82f6, #2563eb);
+        border-color: transparent;
+        color: white;
+        font-weight: 600;
+      }
+      
+      .toolbar-btn.primary:hover {
+        background: linear-gradient(135deg, #60a5fa, #3b82f6);
+      }
+      
+      .toolbar-icon-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: rgba(51, 65, 85, 0.6);
+        border: 1px solid rgba(148, 163, 184, 0.2);
+        border-radius: 6px;
+        color: #e2e8f0;
+        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);
+      }
+      
+      .toolbar-icon-btn.active {
+        background: rgba(59, 130, 246, 0.2);
+        border-color: rgba(59, 130, 246, 0.4);
+        color: #60a5fa;
+      }
+      
+      .mode-indicator {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+      }
+      
+      .mode-indicator.dom {
+        background: rgba(34, 197, 94, 0.2);
+        color: #4ade80;
+        border: 1px solid rgba(34, 197, 94, 0.3);
+      }
+      
+      .mode-indicator.canvas {
+        background: rgba(168, 85, 247, 0.2);
+        color: #c084fc;
+        border: 1px solid rgba(168, 85, 247, 0.3);
+      }
+      
+      .canvas-container {
+        position: relative;
+        overflow: hidden;
+        flex: 1;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+        min-height: 0;
+      }
+      
+      .canvas-container ::slotted(*) {
+        width: 100%;
+        height: 100%;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      
+      .clone-overlay {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+      
+      .clone-content {
+        position: absolute;
+        transform-origin: 0 0;
+      }
+      
+      .playback-stats {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        width: 200px;
+        background: rgba(0, 0, 0, 0.75);
+        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;
+        z-index: 10;
+        pointer-events: none;
+        line-height: 1.5;
+      }
+      
+      .playback-stats .stat-row {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      
+      .playback-stats .stat-label {
+        color: #94a3b8;
+        flex-shrink: 0;
+        width: 85px;
+      }
+      
+      .playback-stats .stat-value {
+        font-weight: 600;
+        text-align: right;
+        flex: 1;
+        font-variant-numeric: tabular-nums;
+      }
+      
+      .playback-stats .stat-value.good {
+        color: #4ade80;
+      }
+      
+      .playback-stats .stat-value.warning {
+        color: #fbbf24;
+      }
+      
+      .playback-stats .stat-value.bad {
+        color: #f87171;
+      }
+      
+      .pressure-histogram {
+        display: flex;
+        align-items: flex-end;
+        gap: 1px;
+        height: 24px;
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid rgba(148, 163, 184, 0.2);
+      }
+      
+      .pressure-histogram .bar {
+        flex: 1;
+        min-width: 2px;
+        max-width: 4px;
+        border-radius: 1px 1px 0 0;
+        transition: height 0.1s ease-out;
+      }
+      
+      .pressure-histogram .bar.nominal {
+        background: #4ade80;
+        height: 25%;
+      }
+      
+      .pressure-histogram .bar.fair {
+        background: #a3e635;
+        height: 50%;
+      }
+      
+      .pressure-histogram .bar.serious {
+        background: #fbbf24;
+        height: 75%;
+      }
+      
+      .pressure-histogram .bar.critical {
+        background: #f87171;
+        height: 100%;
+      }
+      
+      .pressure-histogram-label {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 4px;
+        font-size: 9px;
+        color: #64748b;
+      }
+      
+      .dropdown-panel {
+        position: fixed;
+        margin: 0;
+        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);
+        border-radius: 10px;
+        backdrop-filter: blur(12px);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+      }
+      
+      .dropdown-panel::backdrop {
+        background: transparent;
+      }
+      
+      .dropdown-panel:popover-open {
+        /* Animation for opening */
+        animation: popover-fade-in 0.15s ease-out;
+      }
+      
+      @keyframes popover-fade-in {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      .dropdown-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+      }
+      
+      .dropdown-title {
+        color: #e2e8f0;
+        font-size: 13px;
+        font-weight: 600;
+      }
+      
+      .dropdown-close {
+        background: transparent;
+        border: none;
+        color: #64748b;
+        cursor: pointer;
+        padding: 2px;
+        line-height: 1;
+        font-size: 14px;
+        transition: color 0.15s;
+      }
+      
+      .dropdown-close:hover {
+        color: #94a3b8;
       }
     `];
 	}
@@ -52,52 +433,1716 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 		event.preventDefault();
 	}
 	connectedCallback() {
-		document.body.style.width = "100%";
-		document.body.style.height = "100%";
-		document.documentElement.style.width = "100%";
-		document.documentElement.style.height = "100%";
 		super.connectedCallback();
+		this.addEventListener("transform-changed", this.boundHandleTransformChanged);
+		this.startMotionStateTracking();
+		this.adaptiveTracker = new AdaptiveResolutionTracker({ onScaleChange: (scale) => {
+			const oldScale = this.currentAdaptiveScale;
+			this.currentAdaptiveScale = scale;
+			if (this.previewResolutionScale === "auto" && this.presentationMode === "canvas" && !this.isAtRest) {
+				if (this.canvasPreviewResult) {
+					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
+			};
+			sessionThumbnailCache.setMaxSize(newSize);
+			this.updateThumbnailCacheStats();
+		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.body.style.width = "";
-		document.body.style.height = "";
-		document.documentElement.style.width = "";
-		document.documentElement.style.height = "";
+		if (this.statsStrategy) {
+			this.statsStrategy.stop();
+			this.statsStrategy = null;
+		}
+		if (this.presentationMode === "clone") this.stopCloneOverlay();
+		else if (this.presentationMode === "dom") this.stopDomMode();
+		else if (this.presentationMode === "canvas") this.stopCanvasMode();
+		const timegroup = this.getTimegroup();
+		if (timegroup) {
+			timegroup.style.clipPath = "";
+			timegroup.style.pointerEvents = "";
+		}
+		this.removeEventListener("transform-changed", this.boundHandleTransformChanged);
+		this.stopMotionStateTracking();
+		this.stopCacheStatsUpdates();
+		if (this.adaptiveTracker) {
+			this.adaptiveTracker.dispose();
+			this.adaptiveTracker = null;
+		}
+		if (this.savePanZoomDebounceTimer !== null) {
+			clearTimeout(this.savePanZoomDebounceTimer);
+			this.savePanZoomDebounceTimer = null;
+		}
+		this.savePreviewPanZoom();
+	}
+	firstUpdated() {
+		requestAnimationFrame(() => {
+			this.restorePreviewPanZoom();
+		});
+		if (this.presentationMode === "clone") this.initCloneOverlay();
+		else 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") {
+			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") {
+						this.lastCanvasZoom = this.panZoomTransform.scale;
+						this.stopCanvasMode();
+						this.initCanvasMode();
+					}
+				}, 500);
+			}
+		}
+	}
+	getTimegroup() {
+		const canvas = this.querySelector("[slot='canvas']");
+		if (!canvas) return null;
+		return canvas.querySelector("ef-timegroup");
+	}
+	/**
+	* Get the root timegroup ID for localStorage key generation.
+	* Returns null if no root timegroup is found or it has no ID.
+	*/
+	getRootTimegroupId() {
+		const timegroup = this.getTimegroup();
+		if (!timegroup) return null;
+		const rootTemporal = findRootTemporal(timegroup);
+		if (rootTemporal instanceof EFTimegroup && rootTemporal.id) return rootTemporal.id;
+		return null;
+	}
+	/**
+	* Get localStorage key for preview pan/zoom state.
+	*/
+	getPreviewPanZoomStorageKey() {
+		const rootId = this.getRootTimegroupId();
+		return rootId ? `ef-workbench-panzoom-${rootId}` : null;
+	}
+	/**
+	* Save preview pan/zoom to localStorage.
+	*/
+	savePreviewPanZoom() {
+		const storageKey = this.getPreviewPanZoomStorageKey();
+		if (!storageKey) return;
+		try {
+			const state$1 = {
+				x: this.panZoomTransform.x,
+				y: this.panZoomTransform.y,
+				scale: this.panZoomTransform.scale
+			};
+			localStorage.setItem(storageKey, JSON.stringify(state$1));
+		} catch (error) {
+			console.warn("Failed to save preview pan/zoom to localStorage", error);
+		}
+	}
+	/**
+	* Restore preview pan/zoom from localStorage.
+	*/
+	restorePreviewPanZoom() {
+		const storageKey = this.getPreviewPanZoomStorageKey();
+		if (!storageKey) return;
+		try {
+			const stored = localStorage.getItem(storageKey);
+			if (!stored) return;
+			const state$1 = JSON.parse(stored);
+			if (typeof state$1.x === "number" && typeof state$1.y === "number" && typeof state$1.scale === "number" && state$1.scale > 0) {
+				const clampedScale = Math.max(.1, Math.min(5, state$1.scale));
+				this.panZoomTransform = {
+					x: state$1.x,
+					y: state$1.y,
+					scale: clampedScale
+				};
+				requestAnimationFrame(() => {
+					const panZoomElement = this.querySelector("ef-pan-zoom");
+					if (panZoomElement) {
+						panZoomElement.x = this.panZoomTransform.x;
+						panZoomElement.y = this.panZoomTransform.y;
+						panZoomElement.scale = this.panZoomTransform.scale;
+					}
+					if (this.presentationMode === "clone") this.updateCloneTransform();
+					else if (this.presentationMode === "canvas") this.updateCanvasTransform();
+				});
+			}
+		} catch (error) {
+			console.warn("Failed to restore preview pan/zoom from localStorage", error);
+		}
+	}
+	/**
+	* Debounced save of preview pan/zoom to avoid excessive localStorage writes.
+	*/
+	debouncedSavePreviewPanZoom() {
+		if (this.savePanZoomDebounceTimer !== null) clearTimeout(this.savePanZoomDebounceTimer);
+		this.savePanZoomDebounceTimer = window.setTimeout(() => {
+			this.savePanZoomDebounceTimer = null;
+			this.savePreviewPanZoom();
+		}, 200);
+	}
+	/**
+	* Start polling for motion state (playing/scrubbing).
+	* We use polling because:
+	* - Playing state comes from timegroup's playbackController
+	* - Scrubbing state comes from isScrubbingRef (set by EFScrubber)
+	*/
+	startMotionStateTracking() {
+		if (this.playingCheckInterval !== null) return;
+		this.playingCheckInterval = window.setInterval(() => {
+			this.updateMotionState();
+		}, 50);
+	}
+	stopMotionStateTracking() {
+		if (this.playingCheckInterval !== null) {
+			clearInterval(this.playingCheckInterval);
+			this.playingCheckInterval = null;
+		}
+		if (this.restDebounceTimer !== null) {
+			clearTimeout(this.restDebounceTimer);
+			this.restDebounceTimer = null;
+		}
+	}
+	/**
+	* Update motion state by checking timegroup and scrubbing ref.
+	*/
+	updateMotionState() {
+		const timegroup = this.getTimegroup();
+		const wasPlaying = this.isPlaying;
+		const wasScrubbing = this.isScrubbing;
+		this.isPlaying = timegroup?.playing ?? false;
+		this.isScrubbing = this.isScrubbingRef.current;
+		const wasInMotion = wasPlaying || wasScrubbing;
+		const isInMotion = this.isPlaying || this.isScrubbing;
+		if (isInMotion && !wasInMotion) this.handleMotionStart();
+		else if (!isInMotion && wasInMotion) this.handleMotionStop();
+	}
+	/**
+	* Called when motion starts (playing or scrubbing began).
+	*/
+	handleMotionStart() {
+		if (this.restDebounceTimer !== null) {
+			clearTimeout(this.restDebounceTimer);
+			this.restDebounceTimer = null;
+		}
+		this.isAtRest = false;
+		if (this.previewResolutionScale === "auto" && this.adaptiveTracker) {
+			const timegroup = this.getTimegroup();
+			if (timegroup) {
+				const compositionWidth = timegroup.offsetWidth || 1920;
+				const compositionHeight = timegroup.offsetHeight || 1080;
+				const rect = timegroup.getBoundingClientRect();
+				const displayScale = Math.min(rect.width / compositionWidth, rect.height / compositionHeight);
+				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).
+	* Starts a debounce timer before transitioning to rest state.
+	*/
+	handleMotionStop() {
+		if (this.restDebounceTimer !== null) clearTimeout(this.restDebounceTimer);
+		this.restDebounceTimer = window.setTimeout(() => {
+			this.restDebounceTimer = null;
+			this.transitionToRest();
+		}, REST_DEBOUNCE_MS);
+	}
+	/**
+	* Called after debounce period when we're confirmed to be at rest.
+	*/
+	transitionToRest() {
+		this.isAtRest = true;
+		console.log("[EFWorkbench] Transitioned to rest state");
+		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)");
+			}
+		}
+	}
+	/**
+	* Get the effective resolution scale based on current mode and motion state.
+	* For "auto" mode, returns full resolution at rest, adaptive scale in motion.
+	*/
+	getEffectiveResolutionScale(timegroup, canvasContainer) {
+		if (this.previewResolutionScale !== "auto") return this.getResolutionScale(timegroup, canvasContainer);
+		const compositionWidth = timegroup.offsetWidth || 1920;
+		const compositionHeight = timegroup.offsetHeight || 1080;
+		const rect = timegroup.getBoundingClientRect();
+		const displayedWidth = rect.width;
+		const displayedHeight = rect.height;
+		const displayScale = Math.min(displayedWidth / compositionWidth, displayedHeight / compositionHeight);
+		if (this.isAtRest) {
+			const scale = Math.max(.1, Math.min(1, displayScale));
+			console.log(`[EFWorkbench] Auto mode (at rest): using display scale ${(scale * 100).toFixed(1)}%`);
+			return scale;
+		} else {
+			const adaptiveScale = this.currentAdaptiveScale;
+			const targetScale = Math.min(displayScale, adaptiveScale);
+			const scale = Math.max(.1, Math.min(1, targetScale));
+			console.log(`[EFWorkbench] Auto mode (in motion): adaptive=${adaptiveScale}, display=${displayScale.toFixed(2)}, final=${(scale * 100).toFixed(1)}%`);
+			return scale;
+		}
+	}
+	/**
+	* Apply settings when dependencies are ready.
+	* Called from updated() hook when settings change or dependencies become available.
+	*/
+	applySettings() {
+		this.presentationMode = this.previewSettings.presentationMode;
+		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();
+		else if (previousMode === "canvas") this.stopCanvasMode();
+		setPreviewPresentationMode(mode);
+		this.previewSettings = {
+			...this.previewSettings,
+			presentationMode: mode
+		};
+		await this.updateComplete;
+		if (mode === "clone") this.initCloneOverlay();
+		else if (mode === "dom") this.initDomMode();
+		else if (mode === "canvas") this.initCanvasMode();
+	}
+	initDomMode() {
+		if (this.presentationMode !== "dom") return;
+		const timegroup = this.getTimegroup();
+		if (!timegroup) {
+			setTimeout(() => this.initDomMode(), 100);
+			return;
+		}
+		const fitScale = this.querySelector("[slot='canvas']");
+		if (fitScale?.removeScale && fitScale?.paused !== void 0) {
+			fitScale.paused = true;
+			fitScale.removeScale();
+		}
+		timegroup.proxyMode = false;
+		timegroup.style.clipPath = "";
+		timegroup.style.pointerEvents = "";
+	}
+	stopDomMode() {
+		const timegroup = this.getTimegroup();
+		if (timegroup) {
+			timegroup.style.clipPath = "inset(100%)";
+			timegroup.style.pointerEvents = "none";
+		}
+		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) {
+		if (this.previewResolutionScale === "auto") return this.getEffectiveResolutionScale(timegroup, _canvasContainer);
+		const compositionWidth = timegroup.offsetWidth || 1920;
+		const compositionHeight = timegroup.offsetHeight || 1080;
+		const rect = timegroup.getBoundingClientRect();
+		const displayedWidth = rect.width;
+		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;
+	}
+	initCanvasMode() {
+		if (this.presentationMode !== "canvas") return;
+		const timegroup = this.getTimegroup();
+		const canvasContainer = this.canvasPreviewRef.value;
+		if (!timegroup || !canvasContainer) {
+			setTimeout(() => this.initCanvasMode(), 100);
+			return;
+		}
+		timegroup.proxyMode = false;
+		timegroup.style.clipPath = "inset(100%)";
+		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 {
+			const result = renderTimegroupToCanvas(timegroup, {
+				scale: 1,
+				resolutionScale: initialResolutionScale
+			});
+			this.canvasPreviewResult = result;
+			const { container, canvas, refresh, getResolutionScale } = result;
+			canvas.classList.add("clone-content");
+			canvasContainer.innerHTML = "";
+			canvasContainer.appendChild(container);
+			this.updateCanvasTransform();
+			const loop = async () => {
+				if (this.presentationMode !== "canvas") return;
+				if (!this.isExporting) try {
+					await refresh();
+					this.updateCanvasTransform();
+				} catch (e) {
+					console.error("Canvas refresh failed:", e);
+				}
+				this.canvasAnimationFrame = requestAnimationFrame(loop);
+			};
+			this.canvasAnimationFrame = requestAnimationFrame(loop);
+		} catch (e) {
+			console.error("Failed to init canvas mode:", e);
+		}
+	}
+	stopCanvasMode() {
+		if (this.canvasAnimationFrame !== null) {
+			cancelAnimationFrame(this.canvasAnimationFrame);
+			this.canvasAnimationFrame = null;
+		}
+		if (this.zoomReinitTimeout !== null) {
+			clearTimeout(this.zoomReinitTimeout);
+			this.zoomReinitTimeout = null;
+		}
+		this.canvasPreviewResult = null;
+		if (this.statsStrategy) {
+			this.statsStrategy.stop();
+			this.statsStrategy = null;
+		}
+		const container = this.canvasPreviewRef.value;
+		if (container) {
+			container.innerHTML = "";
+			container.style.display = "none";
+		}
+	}
+	updateCanvasTransform() {
+		if (this.presentationMode !== "canvas") return;
+		const container = this.canvasPreviewRef.value;
+		if (!container) return;
+		const canvas = container.querySelector("canvas");
+		if (!canvas) return;
+		const { x, y, scale } = this.panZoomTransform;
+		canvas.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
+	}
+	initCanvasRenderer() {
+		const timegroup = this.getTimegroup();
+		if (!timegroup) return null;
+		try {
+			const { canvas, refresh } = renderTimegroupToCanvas(timegroup, 1);
+			this.canvasRefresh = refresh;
+			return {
+				canvas,
+				refresh
+			};
+		} catch (e) {
+			console.error("Failed to init canvas renderer:", e);
+			return null;
+		}
+	}
+	/** Start video export with progress tracking */
+	async startExport(options = {}) {
+		const timegroup = this.getTimegroup();
+		if (!timegroup) {
+			console.error("No timegroup found for export");
+			return;
+		}
+		if (this.isExporting) {
+			console.warn("Export already in progress");
+			return;
+		}
+		this.exportAbortController = new AbortController();
+		this.isExporting = true;
+		this.exportProgress = null;
+		this.exportStatus = "rendering";
+		try {
+			await renderTimegroupToVideo(timegroup, {
+				...options,
+				signal: this.exportAbortController.signal,
+				onProgress: (progress) => {
+					this.exportProgress = progress;
+				}
+			});
+			this.exportStatus = "complete";
+			setTimeout(() => {
+				this.isExporting = false;
+				this.exportProgress = null;
+				this.exportStatus = "idle";
+				this.exportAbortController = null;
+			}, 2e3);
+		} catch (e) {
+			if (e instanceof RenderCancelledError) {
+				console.log("Export cancelled by user");
+				this.exportStatus = "cancelled";
+				setTimeout(() => {
+					this.isExporting = false;
+					this.exportProgress = null;
+					this.exportStatus = "idle";
+					this.exportAbortController = null;
+				}, 1500);
+			} else {
+				console.error("Export failed:", e);
+				this.exportStatus = "error";
+				setTimeout(() => {
+					this.isExporting = false;
+					this.exportProgress = null;
+					this.exportStatus = "idle";
+					this.exportAbortController = null;
+				}, 3e3);
+			}
+		}
+	}
+	/** Cancel the current export */
+	cancelExport() {
+		if (this.exportAbortController) this.exportAbortController.abort();
+	}
+	positionPopover(popover, anchorId) {
+		const anchor = this.shadowRoot?.getElementById(anchorId);
+		if (!anchor) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const popoverRect = popover.getBoundingClientRect();
+		const padding = 8;
+		let top = anchorRect.bottom + padding;
+		let left = anchorRect.right - popoverRect.width;
+		if (left < padding) left = padding;
+		if (left + popoverRect.width > window.innerWidth - padding) left = window.innerWidth - popoverRect.width - padding;
+		if (top + popoverRect.height > window.innerHeight - padding) top = anchorRect.top - popoverRect.height - padding;
+		popover.style.top = `${top}px`;
+		popover.style.left = `${left}px`;
+	}
+	handleSettingsPopoverToggle(e) {
+		const popover = e.target;
+		if (e.newState === "open") requestAnimationFrame(() => {
+			this.positionPopover(popover, "settings-btn");
+		});
+	}
+	handleExportPopoverToggle(e) {
+		const popover = e.target;
+		if (e.newState === "open") {
+			if (this.exportOptions.outMs === 0) {
+				const timegroup = this.getTimegroup();
+				if (timegroup) this.exportOptions = {
+					...this.exportOptions,
+					outMs: timegroup.durationMs
+				};
+			}
+			requestAnimationFrame(() => {
+				this.positionPopover(popover, "export-btn");
+			});
+		}
+	}
+	handleStartExport() {
+		this.startExport({
+			includeAudio: this.exportOptions.includeAudio,
+			scale: this.exportOptions.scale,
+			fromMs: this.exportOptions.useInOut ? this.exportOptions.inMs : void 0,
+			toMs: this.exportOptions.useInOut ? this.exportOptions.outMs : void 0
+		});
+	}
+	updateExportOption(key, value) {
+		this.exportOptions = {
+			...this.exportOptions,
+			[key]: value
+		};
+	}
+	formatTime(ms) {
+		const totalSeconds = Math.floor(ms / 1e3);
+		const minutes = Math.floor(totalSeconds / 60);
+		const seconds = totalSeconds % 60;
+		if (minutes > 0) return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+		return `${seconds}s`;
+	}
+	handleCancelClick() {
+		this.cancelExport();
+	}
+	handleRenderModeChange(mode) {
+		setRenderMode(mode);
+		this.previewSettings = {
+			...this.previewSettings,
+			renderMode: mode
+		};
+	}
+	handleResolutionScaleChange(scale) {
+		console.log(`[EFWorkbench] Resolution scale changed to ${scale}, presentationMode=${this.presentationMode}`);
+		setPreviewResolutionScale(scale);
+		this.previewSettings = {
+			...this.previewSettings,
+			resolutionScale: scale
+		};
+		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);
+		this.previewSettings = {
+			...this.previewSettings,
+			thumbnailCacheMaxSize: size
+		};
+		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`;
+	}
+	handleDebugThumbnailTimestampsToggle(enabled) {
+		this.debugThumbnailTimestamps = enabled;
+		this.dispatchEvent(new CustomEvent("ef-debug-thumbnail-timestamps-changed", {
+			detail: { enabled },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleShowStatsToggle(enabled) {
+		setShowStats(enabled);
+		this.previewSettings = {
+			...this.previewSettings,
+			showStats: enabled
+		};
+	}
+	/**
+	* Reset and fit the preview to show all content centered.
+	* Finds the pan-zoom element and calls fitToContent() on it.
+	*/
+	handleFitToContent() {
+		const panZoomElement = this.querySelector("ef-pan-zoom");
+		if (panZoomElement && typeof panZoomElement.fitToContent === "function") panZoomElement.fitToContent();
+	}
+	renderSettingsPopover() {
+		const isAvailable = isNativeCanvasApiAvailable();
+		return html`
+      <div 
+        id="settings-popover" 
+        popover="auto"
+        class="dropdown-panel"
+        @toggle=${this.handleSettingsPopoverToggle}
+      >
+        <div class="dropdown-header">
+          <span class="dropdown-title">Preview Settings</span>
+          <button class="dropdown-close" popovertarget="settings-popover" popovertargetaction="hide">✕</button>
+        </div>
+        
+        <!-- Presentation Mode Setting -->
+        <div style="
+          background: rgba(51, 65, 85, 0.4);
+          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 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>
+            <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"};
+              "
+            >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"};
+              "
+            >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>
+        </div>
+        
+        <!-- Render Mode Setting -->
+        <div style="
+          background: rgba(51, 65, 85, 0.4);
+          border-radius: 8px;
+          padding: 12px;
+        ">
+          <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>
+            ${isAvailable ? html`
+              <div style="display: flex; align-items: center; gap: 5px;">
+                <span style="
+                  display: inline-block;
+                  width: 7px;
+                  height: 7px;
+                  border-radius: 50%;
+                  background: #4ade80;
+                "></span>
+                <span style="color: #4ade80; 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;">
+            <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"};
+              "
+            >foreignObject</button>
+            <button
+              @click=${() => this.handleRenderModeChange("native")}
+              ?disabled=${!isAvailable}
+              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;">
+            ${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>
+        
+        <!-- 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;
+          ">
+            <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>
+          </label>
+          
+          <div style="
+            margin-top: 8px;
+            color: #64748b;
+            font-size: 10px;
+            line-height: 1.4;
+          ">
+            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;
+          ">
+            <input
+              type="checkbox"
+              ?checked=${this.debugThumbnailTimestamps}
+              @change=${(e) => this.handleDebugThumbnailTimestampsToggle(e.target.checked)}
+              style="
+                width: 14px;
+                height: 14px;
+                accent-color: #f59e0b;
+                cursor: pointer;
+              "
+            />
+            <span style="color: #e2e8f0; font-size: 12px; font-weight: 500;">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>
+        </div>
+      </div>
+    `;
+	}
+	renderExportPopover() {
+		const durationMs = this.getTimegroup()?.durationMs ?? 0;
+		return html`
+      <div 
+        id="export-popover" 
+        popover="auto"
+        class="dropdown-panel"
+        @toggle=${this.handleExportPopoverToggle}
+      >
+        <div class="dropdown-header">
+          <span class="dropdown-title">Export Settings</span>
+          <button class="dropdown-close" popovertarget="export-popover" popovertargetaction="hide">✕</button>
+        </div>
+        
+        <!-- Scale -->
+        <div style="margin-bottom: 10px;">
+          <label style="display: block; color: #94a3b8; font-size: 11px; 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;
+            "
+            .value=${String(this.exportOptions.scale)}
+            @change=${(e) => this.updateExportOption("scale", Number(e.target.value))}
+          >
+            <option value="1">100% (Full)</option>
+            <option value="0.75">75%</option>
+            <option value="0.5">50%</option>
+            <option value="0.25">25%</option>
+          </select>
+        </div>
+        
+        <!-- Audio -->
+        <div style="margin-bottom: 10px;">
+          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+            <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>
+          </label>
+        </div>
+        
+        <!-- In/Out Range -->
+        <div style="margin-bottom: 12px;">
+          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; 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>
+          </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>
+                <input
+                  type="number"
+                  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>
+                <input
+                  type="number"
+                  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;">
+              Duration: ${this.formatTime(this.exportOptions.outMs - this.exportOptions.inMs)} / ${this.formatTime(durationMs)}
+            </div>
+          ` : html`
+            <div style="color: #64748b; font-size: 10px;">
+              Full duration: ${this.formatTime(durationMs)}
+            </div>
+          `}
+        </div>
+        
+        <!-- Start Export button -->
+        <button
+          class="toolbar-btn primary"
+          style="width: 100%; justify-content: center;"
+          @click=${this.handleStartExport}
+          popovertarget="export-popover"
+          popovertargetaction="hide"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="23 7 16 12 23 17 23 7"></polygon>
+            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+          </svg>
+          Start Export
+        </button>
+      </div>
+    `;
+	}
+	renderExportProgressPopover() {
+		const p = this.exportProgress;
+		const progressPercent = p ? Math.round(p.progress * 100) : 0;
+		const isComplete = this.exportStatus === "complete";
+		const isError = this.exportStatus === "error";
+		const isCancelled = this.exportStatus === "cancelled";
+		const isRendering = this.exportStatus === "rendering";
+		let statusColor;
+		let statusText;
+		if (isComplete) {
+			statusColor = "#4ade80";
+			statusText = "Complete!";
+		} else if (isError) {
+			statusColor = "#f87171";
+			statusText = "Failed";
+		} else if (isCancelled) {
+			statusColor = "#fbbf24";
+			statusText = "Cancelled";
+		} else {
+			statusColor = "#60a5fa";
+			statusText = `${progressPercent}%`;
+		}
+		return html`
+      <div 
+        id="export-progress-popover" 
+        popover="manual"
+        class="dropdown-panel" 
+        style="min-width: 240px;"
+      >
+        <div class="dropdown-header">
+          <span class="dropdown-title">Exporting</span>
+          ${isRendering ? html`
+            <button 
+              class="dropdown-close" 
+              style="color: #f87171;"
+              @click=${this.handleCancelClick}
+            >Cancel</button>
+          ` : null}
+        </div>
+        
+        ${isRendering && p !== null ? html`
+          ${p.framePreviewUrl ? html`
+            <div style="margin-bottom: 10px; display: flex; justify-content: center;">
+              <img 
+                src=${p.framePreviewUrl} 
+                alt="Current frame"
+                style="
+                  border-radius: 4px;
+                  border: 1px solid rgba(148, 163, 184, 0.2);
+                  max-width: 100%;
+                  height: auto;
+                "
+              />
+            </div>
+          ` : null}
+          
+          <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>
+            <div>
+              <div style="color: #64748b;">Time</div>
+              <div style="color: #e2e8f0;">${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>
+            <div>
+              <div style="color: #64748b;">ETA</div>
+              <div style="color: #e2e8f0;">${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: 100%;
+            width: ${progressPercent}%;
+            background: ${statusColor};
+            border-radius: 2px;
+            transition: width 0.15s ease-out;
+          "></div>
+        </div>
+        
+        <div style="text-align: center; margin-top: 6px; font-size: 11px; font-weight: 600; color: ${statusColor};">
+          ${statusText}
+        </div>
+      </div>
+      
+      <style>
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      </style>
+    `;
+	}
+	renderToolbar() {
+		return html`
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <!-- Fit to content button -->
+          <button 
+            class="toolbar-icon-btn"
+            @click=${this.handleFitToContent}
+            title="Fit to Content (Reset Zoom & Center)"
+          >
+            <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="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              <path d="M8 12h8M12 8v8"></path>
+            </svg>
+          </button>
+        </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}
+          
+          <!-- Settings button -->
+          <button 
+            id="settings-btn"
+            class="toolbar-icon-btn"
+            popovertarget="settings-popover"
+            title="Preview Settings"
+          >
+            ${phosphorIcon(ICONS.gear, 16)}
+          </button>
+          
+          <!-- Export button -->
+          ${this.isExporting ? html`
+            <button 
+              id="export-btn"
+              class="toolbar-btn active"
+              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>
+              Exporting...
+            </button>
+          ` : html`
+            <button 
+              id="export-btn"
+              class="toolbar-btn primary"
+              popovertarget="export-popover"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+              </svg>
+              Export
+            </button>
+          `}
+        </div>
+      </div>
+      
+      <!-- Popovers (rendered into top-layer) -->
+      ${this.renderSettingsPopover()}
+      ${this.renderExportPopover()}
+      ${this.renderExportProgressPopover()}
+    `;
 	}
 	update(changedProperties) {
 		super.update(changedProperties);
 		if (changedProperties.has("focusedElement")) this.drawOverlays();
 	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.getTimegroup() && !changedProperties.has("panZoomTransform")) {
+			if (this.panZoomTransform.x === 0 && this.panZoomTransform.y === 0 && this.panZoomTransform.scale === 1) requestAnimationFrame(() => {
+				this.restorePreviewPanZoom();
+			});
+		}
+		if (changedProperties.has("previewSettings") || changedProperties.has("presentationMode") || changedProperties.has("showStats")) this.applySettings();
+		if (changedProperties.has("isExporting")) {
+			const popover = this.shadowRoot?.getElementById("export-progress-popover");
+			if (popover) if (this.isExporting) {
+				popover.showPopover();
+				requestAnimationFrame(() => {
+					this.positionPopover(popover, "export-btn");
+				});
+			} else popover.hidePopover();
+		}
+	}
+	renderPlaybackStats() {
+		if (!this.showStats || !this.statsStrategy) return null;
+		const stats = this.statsStrategy.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 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>`;
+			return html`
+        <div class="pressure-histogram">
+          ${stats.pressureHistory.map((state$1) => html`
+            <div class="bar ${state$1}"></div>
+          `)}
+        </div>
+        <div class="pressure-histogram-label">
+          <span>30s ago</span>
+          <span>now</span>
+        </div>
+      `;
+		};
+		const padNum = (n, decimals, width) => {
+			return n.toFixed(decimals).padStart(width, " ");
+		};
+		return html`
+      <div class="playback-stats">
+        <div class="stat-row">
+          <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`
+          <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`
+          <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>
+          </div>
+        ` : null}
+        <div class="stat-row">
+          <span class="stat-label">Resolution</span>
+          <span class="stat-value">${stats.renderWidth}×${stats.renderHeight}</span>
+        </div>
+        ${this.statsStrategy.supportsStat("resolutionScale") && 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>
+          </div>
+        ` : null}
+        <div class="stat-row">
+          <span class="stat-label">CPU</span>
+          <span class="stat-value ${pressureClass}">${stats.pressureState}</span>
+        </div>
+        <div class="stat-row">
+          <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);">
+            <div class="stat-row">
+              <span class="stat-label">Mode</span>
+              <span class="stat-value good">Auto</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">Samples</span>
+              <span class="stat-value">${String(stats.samplesAtCurrentScale).padStart(3, " ")}/60</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">Scale Up</span>
+              <span class="stat-value ${stats.canScaleUp ? "good" : ""}">${stats.canScaleUp ? "Ready" : "Waiting"}</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">Scale Down</span>
+              <span class="stat-value ${stats.canScaleDown ? "" : "warning"}">${stats.canScaleDown ? "Ready" : "Min"}</span>
+            </div>
+          </div>
+        ` : null}
+        
+        <!-- CPU Pressure Histogram -->
+        <div style="margin-top: 8px;">
+          <div style="color: #94a3b8; font-size: 10px; margin-bottom: 4px;">CPU Pressure History</div>
+          ${renderPressureHistogram()}
+        </div>
+      </div>
+    `;
+	}
 	render() {
-		if (this.rendering || typeof window !== "undefined" && window.EF_RENDERING?.() === true) return html`
+		if (this.rendering) return html`
         <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;
 		return html`
       <div
-        class="grid h-full w-full"
-        style="grid-template-rows: 1fr 300px; grid-template-columns: 100%; background-color: var(--workbench-bg);"
+        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);"
       >
+        <!-- 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>
+
+        <!-- Center: Canvas area -->
         <div
-          class="relative h-full w-full overflow-hidden"
+          class="canvas-container"
+          style="grid-row: 2 / 3; grid-column: 2 / 3; min-height: 0;"
           @wheel=${this.handleStageWheel}
         >
-          <ef-fit-scale class="h-full grid place-content-center">
-            <slot name="canvas" class="contents"></slot>
-          </ef-fit-scale>
-          <div
-            class="border bg-opacity-20 absolute"
-            style="border-color: var(--workbench-overlay-border); background-color: var(--workbench-overlay-bg);"
-            ${ref(this.focusOverlay)}
+          <!-- 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>
 
-        <slot class="overflow inline-block" name="timeline"></slot>
+        <!-- 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>
       </div>
     `;
 	}
 };
 __decorate([property({ type: Boolean })], EFWorkbench.prototype, "rendering", void 0);
+__decorate([state()], EFWorkbench.prototype, "panZoomTransform", void 0);
+__decorate([state()], EFWorkbench.prototype, "isExporting", void 0);
+__decorate([state()], EFWorkbench.prototype, "exportProgress", void 0);
+__decorate([state()], EFWorkbench.prototype, "exportStatus", void 0);
+__decorate([provide({ context: previewSettingsContext }), state()], EFWorkbench.prototype, "previewSettings", void 0);
+__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([eventOptions({
 	passive: false,
 	capture: true