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

package/dist/preview/statsTrackingStrategy.js

@@ -0,0 +1,201 @@
+//#region src/preview/statsTrackingStrategy.ts
+/**
+* Canvas mode stats tracking strategy.
+* Tracks all stats including render time, headroom, resolution scale, and adaptive resolution.
+*/
+var CanvasStatsStrategy = class {
+	constructor(options) {
+		this.animationFrame = null;
+		this.lastStatsUpdateTime = 0;
+		this.currentStats = null;
+		this.canvasPreviewResult = options.canvasPreviewResult;
+		this.adaptiveTracker = options.adaptiveTracker;
+		this.compositionWidth = options.compositionWidth;
+		this.compositionHeight = options.compositionHeight;
+		this.getResolutionScale = options.getResolutionScale;
+		this.isAtRest = options.isAtRest;
+		this.isExporting = options.isExporting;
+	}
+	start() {
+		if (this.animationFrame !== null) return;
+		const { refresh } = this.canvasPreviewResult;
+		const loop = async (timestamp) => {
+			if (this.animationFrame === null) return;
+			if (!this.isExporting()) try {
+				const renderStart = performance.now();
+				await refresh();
+				const renderTime = performance.now() - renderStart;
+				if (!this.isAtRest()) this.adaptiveTracker.recordFrame(renderTime, timestamp);
+				if (timestamp - this.lastStatsUpdateTime > 100) {
+					this.lastStatsUpdateTime = timestamp;
+					const currentScale = this.getResolutionScale();
+					const renderWidth = Math.floor(this.compositionWidth * currentScale);
+					const renderHeight = Math.floor(this.compositionHeight * currentScale);
+					this.updateStats(renderWidth, renderHeight, currentScale);
+				}
+			} catch (e) {
+				console.error("Canvas stats tracking failed:", e);
+			}
+			this.animationFrame = requestAnimationFrame(loop);
+		};
+		this.animationFrame = requestAnimationFrame(loop);
+	}
+	stop() {
+		if (this.animationFrame !== null) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+		this.currentStats = null;
+	}
+	getStats() {
+		return this.currentStats;
+	}
+	supportsStat(_stat) {
+		return true;
+	}
+	updateStats(renderWidth, renderHeight, resolutionScale) {
+		const trackerStats = this.adaptiveTracker.getStats();
+		this.currentStats = {
+			fps: trackerStats.fps,
+			avgRenderTime: trackerStats.avgRenderTime,
+			headroom: trackerStats.headroom,
+			pressureState: trackerStats.pressureState,
+			pressureHistory: trackerStats.pressureHistory,
+			renderWidth,
+			renderHeight,
+			resolutionScale,
+			samplesAtCurrentScale: trackerStats.samplesAtCurrentScale,
+			canScaleUp: trackerStats.canScaleUp,
+			canScaleDown: trackerStats.canScaleDown
+		};
+	}
+};
+/**
+* DOM mode stats tracking strategy.
+* Tracks FPS, resolution, CPU pressure, and frame seek time.
+*/
+var DomStatsStrategy = class {
+	constructor(options) {
+		this.animationFrame = null;
+		this.lastFrameTime = 0;
+		this.frameIntervals = [];
+		this.lastStatsUpdateTime = 0;
+		this.currentStats = null;
+		this.seekStartTime = 0;
+		this.seekTimes = [];
+		this.frameTaskCleanup = null;
+		this.ROLLING_WINDOW_SIZE = 30;
+		this.TARGET_FRAME_TIME_MS = 33.33;
+		this.timegroup = options.timegroup;
+		this.adaptiveTracker = options.adaptiveTracker;
+	}
+	start() {
+		if (this.animationFrame !== null) return;
+		const frameTaskCallback = async () => {
+			if (this.seekStartTime > 0) {
+				const seekTime = performance.now() - this.seekStartTime;
+				this.seekTimes.push(seekTime);
+				if (this.seekTimes.length > this.ROLLING_WINDOW_SIZE) this.seekTimes.shift();
+				this.seekStartTime = 0;
+			}
+		};
+		this.timegroup.addFrameTask(frameTaskCallback);
+		this.frameTaskCleanup = () => {};
+		let lastCurrentTimeMs = this.timegroup.currentTimeMs;
+		const checkSeek = () => {
+			const currentTimeMs = this.timegroup.currentTimeMs;
+			if (currentTimeMs !== lastCurrentTimeMs) {
+				this.seekStartTime = performance.now();
+				lastCurrentTimeMs = currentTimeMs;
+			}
+		};
+		const loop = (timestamp) => {
+			if (this.animationFrame === null) return;
+			checkSeek();
+			if (this.lastFrameTime > 0) {
+				const interval = timestamp - this.lastFrameTime;
+				this.frameIntervals.push(interval);
+				if (this.frameIntervals.length > this.ROLLING_WINDOW_SIZE) this.frameIntervals.shift();
+			}
+			this.lastFrameTime = timestamp;
+			if (timestamp - this.lastStatsUpdateTime > 100) {
+				this.lastStatsUpdateTime = timestamp;
+				this.updateStats();
+			}
+			this.animationFrame = requestAnimationFrame(loop);
+		};
+		this.animationFrame = requestAnimationFrame(loop);
+	}
+	stop() {
+		if (this.animationFrame !== null) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+		if (this.frameTaskCleanup) {
+			this.frameTaskCleanup();
+			this.frameTaskCleanup = null;
+		}
+		this.lastFrameTime = 0;
+		this.frameIntervals = [];
+		this.seekStartTime = 0;
+		this.seekTimes = [];
+		this.currentStats = null;
+	}
+	getStats() {
+		return this.currentStats;
+	}
+	supportsStat(stat) {
+		return stat === "fps" || stat === "resolution" || stat === "cpuPressure" || stat === "renderTime" || stat === "headroom";
+	}
+	updateStats() {
+		const avgFrameInterval = this.frameIntervals.length > 0 ? this.frameIntervals.reduce((a, b) => a + b, 0) / this.frameIntervals.length : 16.67;
+		const fps = avgFrameInterval > 0 ? 1e3 / avgFrameInterval : 0;
+		const avgSeekTime = this.seekTimes.length > 0 ? this.seekTimes.reduce((a, b) => a + b, 0) / this.seekTimes.length : 0;
+		const headroom = avgSeekTime > 0 ? this.TARGET_FRAME_TIME_MS - avgSeekTime : 0;
+		const trackerStats = this.adaptiveTracker.getStats();
+		const rect = this.timegroup.getBoundingClientRect();
+		const renderWidth = Math.round(rect.width);
+		const renderHeight = Math.round(rect.height);
+		this.currentStats = {
+			fps,
+			avgRenderTime: avgSeekTime > 0 ? avgSeekTime : null,
+			headroom: avgSeekTime > 0 ? headroom : null,
+			pressureState: trackerStats.pressureState,
+			pressureHistory: trackerStats.pressureHistory,
+			renderWidth,
+			renderHeight,
+			resolutionScale: null
+		};
+	}
+};
+/**
+* Factory function to create the appropriate stats tracking strategy for a presentation mode.
+* Returns null for modes that don't support stats tracking.
+*/
+function createStatsTrackingStrategy(mode, options) {
+	switch (mode) {
+		case "canvas":
+			if (!options.canvasPreviewResult || !options.getResolutionScale || !options.isAtRest || !options.isExporting) return null;
+			return new CanvasStatsStrategy({
+				canvasPreviewResult: options.canvasPreviewResult,
+				adaptiveTracker: options.adaptiveTracker,
+				compositionWidth: options.compositionWidth,
+				compositionHeight: options.compositionHeight,
+				getResolutionScale: options.getResolutionScale,
+				isAtRest: options.isAtRest,
+				isExporting: options.isExporting
+			});
+		case "dom":
+		case "original": return new DomStatsStrategy({
+			timegroup: options.timegroup,
+			adaptiveTracker: options.adaptiveTracker
+		});
+		case "clone":
+		case "computed": return null;
+		default: return null;
+	}
+}
+
+//#endregion
+export { createStatsTrackingStrategy };
+//# sourceMappingURL=statsTrackingStrategy.js.map

package/dist/preview/statsTrackingStrategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statsTrackingStrategy.js","names":[],"sources":["../../src/preview/statsTrackingStrategy.ts"],"sourcesContent":["/**\n * Stats tracking strategy for different presentation modes.\n * \n * Uses strategy pattern to encapsulate mode-specific stats tracking logic,\n * allowing each mode to report what stats it supports and provide its own implementation.\n */\n\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { AdaptiveResolutionTracker } from \"./AdaptiveResolutionTracker.js\";\nimport type { CanvasPreviewResult } from \"./renderTimegroupToCanvas.js\";\nimport type { PreviewPresentationMode } from \"./previewSettings.js\";\n\n/**\n * Stat types that can be tracked.\n */\nexport type StatType =\n  | \"fps\"\n  | \"renderTime\"\n  | \"headroom\"\n  | \"resolution\"\n  | \"resolutionScale\"\n  | \"cpuPressure\"\n  | \"adaptiveResolution\";\n\n/**\n * Playback statistics for display.\n */\nexport interface PlaybackStats {\n  fps: number;\n  avgRenderTime: number | null; // null if not measurable\n  headroom: number | null; // null if not applicable\n  pressureState: string;\n  pressureHistory: string[];\n  renderWidth: number;\n  renderHeight: number;\n  resolutionScale: number | null; // null if not applicable\n  samplesAtCurrentScale?: number; // only for adaptive resolution\n  canScaleUp?: boolean; // only for adaptive resolution\n  canScaleDown?: boolean; // only for adaptive resolution\n}\n\n/**\n * Strategy interface for tracking stats in different presentation modes.\n */\nexport interface StatsTrackingStrategy {\n  /** Start tracking stats (called when mode is initialized and stats are enabled) */\n  start(): void;\n  /** Stop tracking stats (called when mode stops or stats are disabled) */\n  stop(): void;\n  /** Get current stats, or null if not available */\n  getStats(): PlaybackStats | null;\n  /** Check if this strategy supports a specific stat type */\n  supportsStat(stat: StatType): boolean;\n}\n\n/**\n * Canvas mode stats tracking strategy.\n * Tracks all stats including render time, headroom, resolution scale, and adaptive resolution.\n */\nexport class CanvasStatsStrategy implements StatsTrackingStrategy {\n  private canvasPreviewResult: CanvasPreviewResult;\n  private adaptiveTracker: AdaptiveResolutionTracker;\n  private readonly compositionWidth: number;\n  private readonly compositionHeight: number;\n  private getResolutionScale: () => number;\n  private isAtRest: () => boolean;\n  private isExporting: () => boolean;\n  \n  private animationFrame: number | null = null;\n  private lastStatsUpdateTime = 0;\n  private currentStats: PlaybackStats | null = null;\n\n  constructor(options: {\n    canvasPreviewResult: CanvasPreviewResult;\n    adaptiveTracker: AdaptiveResolutionTracker;\n    compositionWidth: number;\n    compositionHeight: number;\n    getResolutionScale: () => number;\n    isAtRest: () => boolean;\n    isExporting: () => boolean;\n  }) {\n    this.canvasPreviewResult = options.canvasPreviewResult;\n    this.adaptiveTracker = options.adaptiveTracker;\n    this.compositionWidth = options.compositionWidth;\n    this.compositionHeight = options.compositionHeight;\n    this.getResolutionScale = options.getResolutionScale;\n    this.isAtRest = options.isAtRest;\n    this.isExporting = options.isExporting;\n  }\n\n  start(): void {\n    if (this.animationFrame !== null) return;\n    \n    const { refresh } = this.canvasPreviewResult;\n    \n    const loop = async (timestamp: number) => {\n      if (this.animationFrame === null) return; // Stopped\n      \n      // Skip refresh during export to avoid wasting CPU\n      if (!this.isExporting()) {\n        try {\n          // Measure actual render time\n          const renderStart = performance.now();\n          await refresh();\n          const renderTime = performance.now() - renderStart;\n          \n          // Only record frame timing when in motion (playing/scrubbing)\n          // This prevents inflated stats at rest and focuses tracking on actual playback\n          if (!this.isAtRest()) {\n            this.adaptiveTracker.recordFrame(renderTime, timestamp);\n          }\n\n          // Update playback stats every 100ms (10 times per second)\n          if (timestamp - this.lastStatsUpdateTime > 100) {\n            this.lastStatsUpdateTime = timestamp;\n            // Get CURRENT resolution from the canvas result (may have changed dynamically)\n            const currentScale = this.getResolutionScale();\n            const renderWidth = Math.floor(this.compositionWidth * currentScale);\n            const renderHeight = Math.floor(this.compositionHeight * currentScale);\n            this.updateStats(renderWidth, renderHeight, currentScale);\n          }\n        } catch (e) {\n          console.error(\"Canvas stats tracking failed:\", e);\n        }\n      }\n      \n      this.animationFrame = requestAnimationFrame(loop);\n    };\n    \n    this.animationFrame = requestAnimationFrame(loop);\n  }\n\n  stop(): void {\n    if (this.animationFrame !== null) {\n      cancelAnimationFrame(this.animationFrame);\n      this.animationFrame = null;\n    }\n    this.currentStats = null;\n  }\n\n  getStats(): PlaybackStats | null {\n    return this.currentStats;\n  }\n\n  supportsStat(_stat: StatType): boolean {\n    // Canvas mode supports all stats\n    return true;\n  }\n\n  private updateStats(renderWidth: number, renderHeight: number, resolutionScale: number): void {\n    const trackerStats = this.adaptiveTracker.getStats();\n\n    this.currentStats = {\n      fps: trackerStats.fps,\n      avgRenderTime: trackerStats.avgRenderTime,\n      headroom: trackerStats.headroom,\n      pressureState: trackerStats.pressureState,\n      pressureHistory: trackerStats.pressureHistory,\n      renderWidth,\n      renderHeight,\n      resolutionScale,\n      samplesAtCurrentScale: trackerStats.samplesAtCurrentScale,\n      canScaleUp: trackerStats.canScaleUp,\n      canScaleDown: trackerStats.canScaleDown,\n    };\n  }\n}\n\n/**\n * DOM mode stats tracking strategy.\n * Tracks FPS, resolution, CPU pressure, and frame seek time.\n */\nexport class DomStatsStrategy implements StatsTrackingStrategy {\n  private timegroup: EFTimegroup;\n  private adaptiveTracker: AdaptiveResolutionTracker;\n  \n  private animationFrame: number | null = null;\n  private lastFrameTime = 0;\n  private frameIntervals: number[] = [];\n  private lastStatsUpdateTime = 0;\n  private currentStats: PlaybackStats | null = null;\n  \n  // Frame seek time tracking\n  private seekStartTime = 0;\n  private seekTimes: number[] = [];\n  private frameTaskCleanup: (() => void) | null = null;\n  \n  private readonly ROLLING_WINDOW_SIZE = 30; // ~1 second at 30fps\n  private readonly TARGET_FRAME_TIME_MS = 33.33; // 30fps target\n\n  constructor(options: {\n    timegroup: EFTimegroup;\n    adaptiveTracker: AdaptiveResolutionTracker;\n  }) {\n    this.timegroup = options.timegroup;\n    this.adaptiveTracker = options.adaptiveTracker;\n  }\n\n  start(): void {\n    if (this.animationFrame !== null) return;\n    \n    // Track frame seek times using frameTask callback\n    // This measures how long it takes for the timegroup to fully update after a seek\n    const frameTaskCallback = async () => {\n      if (this.seekStartTime > 0) {\n        const seekTime = performance.now() - this.seekStartTime;\n        this.seekTimes.push(seekTime);\n        if (this.seekTimes.length > this.ROLLING_WINDOW_SIZE) {\n          this.seekTimes.shift();\n        }\n        this.seekStartTime = 0; // Reset after recording\n      }\n    };\n    \n    this.timegroup.addFrameTask(frameTaskCallback);\n    this.frameTaskCleanup = () => {\n      // Note: EFTimegroup doesn't have removeFrameTask, but this is fine\n      // The callback will be cleaned up when the timegroup is destroyed\n    };\n    \n    // Track currentTimeMs changes to detect seeks\n    let lastCurrentTimeMs = this.timegroup.currentTimeMs;\n    const checkSeek = () => {\n      const currentTimeMs = this.timegroup.currentTimeMs;\n      if (currentTimeMs !== lastCurrentTimeMs) {\n        // Seek detected - start timing\n        this.seekStartTime = performance.now();\n        lastCurrentTimeMs = currentTimeMs;\n      }\n    };\n    \n    const loop = (timestamp: number) => {\n      if (this.animationFrame === null) return; // Stopped\n      \n      // Check for seeks\n      checkSeek();\n      \n      // Track frame intervals for FPS calculation\n      if (this.lastFrameTime > 0) {\n        const interval = timestamp - this.lastFrameTime;\n        this.frameIntervals.push(interval);\n        if (this.frameIntervals.length > this.ROLLING_WINDOW_SIZE) {\n          this.frameIntervals.shift();\n        }\n      }\n      this.lastFrameTime = timestamp;\n      \n      // Update stats every 100ms (10 times per second)\n      if (timestamp - this.lastStatsUpdateTime > 100) {\n        this.lastStatsUpdateTime = timestamp;\n        this.updateStats();\n      }\n      \n      this.animationFrame = requestAnimationFrame(loop);\n    };\n    \n    this.animationFrame = requestAnimationFrame(loop);\n  }\n\n  stop(): void {\n    if (this.animationFrame !== null) {\n      cancelAnimationFrame(this.animationFrame);\n      this.animationFrame = null;\n    }\n    if (this.frameTaskCleanup) {\n      this.frameTaskCleanup();\n      this.frameTaskCleanup = null;\n    }\n    this.lastFrameTime = 0;\n    this.frameIntervals = [];\n    this.seekStartTime = 0;\n    this.seekTimes = [];\n    this.currentStats = null;\n  }\n\n  getStats(): PlaybackStats | null {\n    return this.currentStats;\n  }\n\n  supportsStat(stat: StatType): boolean {\n    // DOM mode supports: fps, resolution, cpuPressure, renderTime (seek time), headroom\n    // Does NOT support: resolutionScale, adaptiveResolution\n    return stat === \"fps\" || stat === \"resolution\" || stat === \"cpuPressure\" || stat === \"renderTime\" || stat === \"headroom\";\n  }\n\n  private updateStats(): void {\n    // Calculate FPS from frame intervals\n    const avgFrameInterval = this.frameIntervals.length > 0\n      ? this.frameIntervals.reduce((a, b) => a + b, 0) / this.frameIntervals.length\n      : 16.67;\n    const fps = avgFrameInterval > 0 ? 1000 / avgFrameInterval : 0;\n    \n    // Calculate average seek time (frame update time)\n    const avgSeekTime = this.seekTimes.length > 0\n      ? this.seekTimes.reduce((a, b) => a + b, 0) / this.seekTimes.length\n      : 0;\n    \n    // Calculate headroom (positive = faster than target, negative = slower)\n    const headroom = avgSeekTime > 0\n      ? this.TARGET_FRAME_TIME_MS - avgSeekTime\n      : 0;\n    \n    // Get CPU pressure from adaptive tracker\n    const trackerStats = this.adaptiveTracker.getStats();\n    \n    // Calculate displayed resolution from timegroup bounding rect\n    const rect = this.timegroup.getBoundingClientRect();\n    const renderWidth = Math.round(rect.width);\n    const renderHeight = Math.round(rect.height);\n\n    this.currentStats = {\n      fps,\n      avgRenderTime: avgSeekTime > 0 ? avgSeekTime : null,\n      headroom: avgSeekTime > 0 ? headroom : null,\n      pressureState: trackerStats.pressureState,\n      pressureHistory: trackerStats.pressureHistory,\n      renderWidth,\n      renderHeight,\n      resolutionScale: null, // Not applicable in DOM mode\n    };\n  }\n}\n\n/**\n * Factory function to create the appropriate stats tracking strategy for a presentation mode.\n * Returns null for modes that don't support stats tracking.\n */\nexport function createStatsTrackingStrategy(\n  mode: PreviewPresentationMode,\n  options: {\n    timegroup: EFTimegroup;\n    adaptiveTracker: AdaptiveResolutionTracker;\n    canvasPreviewResult?: CanvasPreviewResult | null;\n    compositionWidth: number;\n    compositionHeight: number;\n    getResolutionScale?: () => number;\n    isAtRest?: () => boolean;\n    isExporting?: () => boolean;\n  }\n): StatsTrackingStrategy | null {\n  switch (mode) {\n    case \"canvas\":\n      if (!options.canvasPreviewResult || !options.getResolutionScale || !options.isAtRest || !options.isExporting) {\n        return null;\n      }\n      return new CanvasStatsStrategy({\n        canvasPreviewResult: options.canvasPreviewResult,\n        adaptiveTracker: options.adaptiveTracker,\n        compositionWidth: options.compositionWidth,\n        compositionHeight: options.compositionHeight,\n        getResolutionScale: options.getResolutionScale,\n        isAtRest: options.isAtRest,\n        isExporting: options.isExporting,\n      });\n    \n    case \"dom\":\n    case \"original\": // \"dom\" maps to \"original\" mode\n      return new DomStatsStrategy({\n        timegroup: options.timegroup,\n        adaptiveTracker: options.adaptiveTracker,\n      });\n    \n    case \"clone\":\n    case \"computed\": // \"clone\" maps to \"computed\" mode\n      // These modes don't support stats tracking\n      return null;\n    \n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}

package/dist/preview/thumbnailCacheSettings.js

@@ -0,0 +1,52 @@
+//#region src/preview/thumbnailCacheSettings.ts
+/**
+* Thumbnail cache settings module with localStorage persistence.
+* Manages configuration for the thumbnail cache system.
+*/
+const STORAGE_KEY_MAX_SIZE = "ef-thumbnail-cache-max-size";
+/**
+* Default maximum cache size (number of items).
+*/
+const DEFAULT_MAX_SIZE = 1e3;
+/**
+* Get the current thumbnail cache max size.
+* Defaults to 1000 if not set.
+*/
+function getThumbnailCacheMaxSize() {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_MAX_SIZE);
+		if (stored !== null) {
+			const parsed = parseInt(stored, 10);
+			if (!isNaN(parsed) && parsed > 0) return parsed;
+		}
+		return DEFAULT_MAX_SIZE;
+	} catch {
+		return DEFAULT_MAX_SIZE;
+	}
+}
+/**
+* Set the thumbnail cache max size.
+* Persists to localStorage and dispatches a change event.
+*/
+function setThumbnailCacheMaxSize(size) {
+	if (size <= 0) throw new Error("Cache size must be greater than 0");
+	try {
+		localStorage.setItem(STORAGE_KEY_MAX_SIZE, String(size));
+	} catch {}
+	window.dispatchEvent(new CustomEvent("ef-thumbnail-cache-settings-changed", { detail: { maxSize: size } }));
+}
+/**
+* Subscribe to thumbnail cache settings changes.
+* @returns Unsubscribe function
+*/
+function onThumbnailCacheSettingsChanged(callback) {
+	const handler = (event) => {
+		callback(event.detail);
+	};
+	window.addEventListener("ef-thumbnail-cache-settings-changed", handler);
+	return () => window.removeEventListener("ef-thumbnail-cache-settings-changed", handler);
+}
+
+//#endregion
+export { getThumbnailCacheMaxSize, onThumbnailCacheSettingsChanged, setThumbnailCacheMaxSize };
+//# sourceMappingURL=thumbnailCacheSettings.js.map

package/dist/preview/thumbnailCacheSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnailCacheSettings.js","names":[],"sources":["../../src/preview/thumbnailCacheSettings.ts"],"sourcesContent":["/**\n * Thumbnail cache settings module with localStorage persistence.\n * Manages configuration for the thumbnail cache system.\n */\n\nconst STORAGE_KEY_MAX_SIZE = \"ef-thumbnail-cache-max-size\";\n\n/**\n * Default maximum cache size (number of items).\n */\nconst DEFAULT_MAX_SIZE = 1000;\n\n/**\n * Get the current thumbnail cache max size.\n * Defaults to 1000 if not set.\n */\nexport function getThumbnailCacheMaxSize(): number {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_MAX_SIZE);\n    if (stored !== null) {\n      const parsed = parseInt(stored, 10);\n      if (!isNaN(parsed) && parsed > 0) {\n        return parsed;\n      }\n    }\n    return DEFAULT_MAX_SIZE;\n  } catch {\n    return DEFAULT_MAX_SIZE;\n  }\n}\n\n/**\n * Set the thumbnail cache max size.\n * Persists to localStorage and dispatches a change event.\n */\nexport function setThumbnailCacheMaxSize(size: number): void {\n  if (size <= 0) {\n    throw new Error(\"Cache size must be greater than 0\");\n  }\n  \n  try {\n    localStorage.setItem(STORAGE_KEY_MAX_SIZE, String(size));\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-thumbnail-cache-settings-changed\", {\n    detail: { maxSize: size }\n  }));\n}\n\n/**\n * Subscribe to thumbnail cache settings changes.\n * @returns Unsubscribe function\n */\nexport function onThumbnailCacheSettingsChanged(\n  callback: (detail: ThumbnailCacheSettingsChangedDetail) => void\n): () => void {\n  const handler = (event: Event) => {\n    callback((event as CustomEvent).detail);\n  };\n  window.addEventListener(\"ef-thumbnail-cache-settings-changed\", handler);\n  return () => window.removeEventListener(\"ef-thumbnail-cache-settings-changed\", handler);\n}\n\n/**\n * Detail object for thumbnail cache settings change events.\n */\nexport interface ThumbnailCacheSettingsChangedDetail {\n  maxSize?: number;\n}\n"],"mappings":";;;;;AAKA,MAAM,uBAAuB;;;;AAK7B,MAAM,mBAAmB;;;;;AAMzB,SAAgB,2BAAmC;AACjD,KAAI;EACF,MAAM,SAAS,aAAa,QAAQ,qBAAqB;AACzD,MAAI,WAAW,MAAM;GACnB,MAAM,SAAS,SAAS,QAAQ,GAAG;AACnC,OAAI,CAAC,MAAM,OAAO,IAAI,SAAS,EAC7B,QAAO;;AAGX,SAAO;SACD;AACN,SAAO;;;;;;;AAQX,SAAgB,yBAAyB,MAAoB;AAC3D,KAAI,QAAQ,EACV,OAAM,IAAI,MAAM,oCAAoC;AAGtD,KAAI;AACF,eAAa,QAAQ,sBAAsB,OAAO,KAAK,CAAC;SAClD;AAKR,QAAO,cAAc,IAAI,YAAY,uCAAuC,EAC1E,QAAQ,EAAE,SAAS,MAAM,EAC1B,CAAC,CAAC;;;;;;AAOL,SAAgB,gCACd,UACY;CACZ,MAAM,WAAW,UAAiB;AAChC,WAAU,MAAsB,OAAO;;AAEzC,QAAO,iBAAiB,uCAAuC,QAAQ;AACvE,cAAa,OAAO,oBAAoB,uCAAuC,QAAQ"}

package/dist/preview/workers/WorkerPool.js

@@ -0,0 +1,178 @@
+//#region src/preview/workers/WorkerPool.ts
+/**
+* Worker pool for parallel task execution.
+* Manages a pool of workers and distributes tasks across them.
+*/
+const WORKER_TASK_TIMEOUT_MS = 3e4;
+const WORKER_INIT_TEST_TIMEOUT_MS = 2e3;
+var WorkerPool = class {
+	constructor(workerScriptUrl, poolSize = navigator.hardwareConcurrency || 4) {
+		this.poolSize = poolSize;
+		this.workers = [];
+		this.availableWorkers = [];
+		this.taskQueue = [];
+		this.isTerminated = false;
+		this.taskIdCounter = 0;
+		this.workerUrl = workerScriptUrl;
+		if (this.hasBrowserSupport()) this.initializeWorkers();
+	}
+	/**
+	* Check if browser supports workers (before initialization).
+	*/
+	hasBrowserSupport() {
+		return typeof Worker !== "undefined" && typeof OffscreenCanvas !== "undefined" && typeof createImageBitmap !== "undefined";
+	}
+	initializeWorkers() {
+		for (let i = 0; i < this.poolSize; i++) try {
+			const worker = new Worker(this.workerUrl, { type: "module" });
+			let testTimeout = null;
+			let testHandler = null;
+			const cleanupTest = () => {
+				if (testTimeout !== null) {
+					clearTimeout(testTimeout);
+					testTimeout = null;
+				}
+				if (testHandler !== null) {
+					worker.removeEventListener("message", testHandler);
+					testHandler = null;
+				}
+			};
+			testTimeout = window.setTimeout(() => {
+				cleanupTest();
+			}, WORKER_INIT_TEST_TIMEOUT_MS);
+			testHandler = (event) => {
+				if (event.data && typeof event.data === "string" && event.data.includes("encoderWorker")) cleanupTest();
+			};
+			worker.addEventListener("message", testHandler);
+			worker.onerror = (error) => {
+				cleanupTest();
+				console.error(`[WorkerPool] Worker ${i} error:`, {
+					message: error.message,
+					filename: error.filename,
+					lineno: error.lineno,
+					colno: error.colno
+				});
+			};
+			worker.onmessageerror = (error) => {
+				console.error(`[WorkerPool] Worker ${i} message error:`, error);
+			};
+			this.workers.push(worker);
+			this.availableWorkers.push(worker);
+		} catch (error) {
+			console.error(`[WorkerPool] Failed to create worker ${i}:`, error instanceof Error ? error.message : String(error));
+		}
+		if (this.workers.length === 0) {
+			console.error(`[WorkerPool] Failed to create any workers. URL: ${this.workerUrl}`);
+			console.error(`[WorkerPool] Browser support check:`, {
+				Worker: typeof Worker !== "undefined",
+				OffscreenCanvas: typeof OffscreenCanvas !== "undefined",
+				createImageBitmap: typeof createImageBitmap !== "undefined"
+			});
+		}
+	}
+	/**
+	* Get the number of workers in the pool.
+	*/
+	get workerCount() {
+		return this.workers.length;
+	}
+	/**
+	* Check if workers are available and initialized.
+	*/
+	isAvailable() {
+		return this.hasBrowserSupport() && this.workers.length > 0 && !this.isTerminated;
+	}
+	/**
+	* Execute a task using an available worker from the pool.
+	*/
+	async execute(task) {
+		if (this.isTerminated) throw new Error("WorkerPool has been terminated");
+		if (!this.isAvailable()) throw new Error("Workers not available");
+		return new Promise((resolve, reject) => {
+			this.taskQueue.push({
+				resolve,
+				reject,
+				task
+			});
+			this.processQueue();
+		});
+	}
+	processQueue() {
+		while (this.availableWorkers.length > 0 && this.taskQueue.length > 0) {
+			const worker = this.availableWorkers.shift();
+			const queuedTask = this.taskQueue.shift();
+			if (!worker || !queuedTask) break;
+			const { resolve, reject, task } = queuedTask;
+			task(worker).then((result) => {
+				resolve(result);
+				this.availableWorkers.push(worker);
+				this.processQueue();
+			}).catch((error) => {
+				reject(error instanceof Error ? error : new Error(String(error)));
+				this.availableWorkers.push(worker);
+				this.processQueue();
+			});
+		}
+	}
+	/**
+	* Terminate all workers and clear the task queue.
+	*/
+	terminate() {
+		this.isTerminated = true;
+		for (const { reject } of this.taskQueue) reject(/* @__PURE__ */ new Error("WorkerPool terminated"));
+		this.taskQueue = [];
+		for (const worker of this.workers) worker.terminate();
+		this.workers = [];
+		this.availableWorkers = [];
+	}
+};
+/**
+* Helper function to encode a canvas using a worker.
+*/
+async function encodeCanvasInWorker(worker, canvas, preserveAlpha) {
+	return new Promise((resolve, reject) => {
+		const taskId = `task-${Date.now()}-${Math.random()}-${performance.now()}`;
+		performance.now();
+		let timeoutId = null;
+		const cleanup = () => {
+			if (timeoutId !== null) {
+				clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+			worker.removeEventListener("message", messageHandler);
+			worker.removeEventListener("messageerror", messageErrorHandler);
+		};
+		const messageHandler = (event) => {
+			const result = event.data;
+			if (result.taskId === taskId) {
+				cleanup();
+				if (result.error) reject(/* @__PURE__ */ new Error(`Worker encoding failed: ${result.error}`));
+				else resolve(result.dataUrl);
+			}
+		};
+		const messageErrorHandler = () => {
+			cleanup();
+			reject(/* @__PURE__ */ new Error("Worker message error"));
+		};
+		worker.addEventListener("message", messageHandler);
+		worker.addEventListener("messageerror", messageErrorHandler);
+		timeoutId = window.setTimeout(() => {
+			cleanup();
+			reject(/* @__PURE__ */ new Error("Worker task timed out"));
+		}, WORKER_TASK_TIMEOUT_MS);
+		createImageBitmap(canvas).then((bitmap) => {
+			worker.postMessage({
+				taskId,
+				bitmap,
+				preserveAlpha
+			}, [bitmap]);
+		}).catch((error) => {
+			cleanup();
+			reject(error instanceof Error ? error : new Error(String(error)));
+		});
+	});
+}
+
+//#endregion
+export { WorkerPool, encodeCanvasInWorker };
+//# sourceMappingURL=WorkerPool.js.map

package/dist/preview/workers/WorkerPool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkerPool.js","names":["poolSize: number","testTimeout: number | null","testHandler: ((event: MessageEvent) => void) | null","timeoutId: number | null"],"sources":["../../../src/preview/workers/WorkerPool.ts"],"sourcesContent":["/**\n * Worker pool for parallel task execution.\n * Manages a pool of workers and distributes tasks across them.\n */\n\n// Constants\nconst WORKER_TASK_TIMEOUT_MS = 30000;\nconst WORKER_INIT_TEST_TIMEOUT_MS = 2000;\n\ninterface QueuedTask<T> {\n  resolve: (value: T) => void;\n  reject: (error: Error) => void;\n  task: (worker: Worker) => Promise<T>;\n}\n\nexport class WorkerPool {\n  private workers: Worker[] = [];\n  private availableWorkers: Worker[] = [];\n  private taskQueue: QueuedTask<unknown>[] = [];\n  private isTerminated = false;\n  private workerUrl: string;\n  private taskIdCounter = 0;\n\n  constructor(\n    workerScriptUrl: string,\n    private poolSize: number = navigator.hardwareConcurrency || 4,\n  ) {\n    this.workerUrl = workerScriptUrl;\n\n    // Check browser support first, then initialize workers\n    if (this.hasBrowserSupport()) {\n      this.initializeWorkers();\n    }\n  }\n\n  /**\n   * Check if browser supports workers (before initialization).\n   */\n  private hasBrowserSupport(): boolean {\n    return (\n      typeof Worker !== \"undefined\" &&\n      typeof OffscreenCanvas !== \"undefined\" &&\n      typeof createImageBitmap !== \"undefined\"\n    );\n  }\n\n  private initializeWorkers(): void {\n    for (let i = 0; i < this.poolSize; i++) {\n      try {\n        // Vite processes worker files - the URL should point to the actual worker file\n        // When using ?worker_file&type=module, Vite will serve the processed worker\n        const worker = new Worker(this.workerUrl, { type: \"module\" });\n        \n        // Test if worker is responding - cleanup handler after confirmation\n        let testTimeout: number | null = null;\n        let testHandler: ((event: MessageEvent) => void) | null = null;\n        \n        const cleanupTest = () => {\n          if (testTimeout !== null) {\n            clearTimeout(testTimeout);\n            testTimeout = null;\n          }\n          if (testHandler !== null) {\n            worker.removeEventListener(\"message\", testHandler);\n            testHandler = null;\n          }\n        };\n        \n        testTimeout = window.setTimeout(() => {\n          cleanupTest();\n        }, WORKER_INIT_TEST_TIMEOUT_MS);\n        \n        testHandler = (event: MessageEvent) => {\n          // Check if this is a test response (worker startup message)\n          if (event.data && typeof event.data === \"string\" && event.data.includes(\"encoderWorker\")) {\n            cleanupTest();\n          }\n        };\n        worker.addEventListener(\"message\", testHandler);\n        \n        worker.onerror = (error) => {\n          cleanupTest();\n          console.error(`[WorkerPool] Worker ${i} error:`, {\n            message: error.message,\n            filename: error.filename,\n            lineno: error.lineno,\n            colno: error.colno,\n          });\n        };\n        worker.onmessageerror = (error) => {\n          console.error(`[WorkerPool] Worker ${i} message error:`, error);\n        };\n        this.workers.push(worker);\n        this.availableWorkers.push(worker);\n      } catch (error) {\n        console.error(`[WorkerPool] Failed to create worker ${i}:`, error instanceof Error ? error.message : String(error));\n      }\n    }\n    if (this.workers.length === 0) {\n      console.error(`[WorkerPool] Failed to create any workers. URL: ${this.workerUrl}`);\n      console.error(`[WorkerPool] Browser support check:`, {\n        Worker: typeof Worker !== \"undefined\",\n        OffscreenCanvas: typeof OffscreenCanvas !== \"undefined\",\n        createImageBitmap: typeof createImageBitmap !== \"undefined\",\n      });\n    }\n  }\n\n  /**\n   * Get the number of workers in the pool.\n   */\n  get workerCount(): number {\n    return this.workers.length;\n  }\n\n  /**\n   * Check if workers are available and initialized.\n   */\n  isAvailable(): boolean {\n    return (\n      this.hasBrowserSupport() &&\n      this.workers.length > 0 &&\n      !this.isTerminated\n    );\n  }\n\n  /**\n   * Execute a task using an available worker from the pool.\n   */\n  async execute<T>(task: (worker: Worker) => Promise<T>): Promise<T> {\n    if (this.isTerminated) {\n      throw new Error(\"WorkerPool has been terminated\");\n    }\n\n    // If workers aren't available, this will be handled by the caller's fallback\n    if (!this.isAvailable()) {\n      throw new Error(\"Workers not available\");\n    }\n\n    return new Promise<T>((resolve, reject) => {\n      this.taskQueue.push({ \n        resolve: resolve as (value: unknown) => void, \n        reject, \n        task \n      });\n      this.processQueue();\n    });\n  }\n\n  private processQueue(): void {\n    // Process tasks while we have available workers and queued tasks\n    while (this.availableWorkers.length > 0 && this.taskQueue.length > 0) {\n      const worker = this.availableWorkers.shift();\n      const queuedTask = this.taskQueue.shift();\n      \n      if (!worker || !queuedTask) {\n        // Safety check - should not happen but prevents crashes\n        break;\n      }\n\n      const { resolve, reject, task } = queuedTask;\n\n      // Execute the task\n      task(worker)\n        .then((result) => {\n          resolve(result);\n          // Return worker to pool\n          this.availableWorkers.push(worker);\n          // Process next task\n          this.processQueue();\n        })\n        .catch((error) => {\n          reject(error instanceof Error ? error : new Error(String(error)));\n          // Return worker to pool\n          this.availableWorkers.push(worker);\n          // Process next task\n          this.processQueue();\n        });\n    }\n  }\n\n  /**\n   * Terminate all workers and clear the task queue.\n   */\n  terminate(): void {\n    this.isTerminated = true;\n\n    // Reject all pending tasks\n    for (const { reject } of this.taskQueue) {\n      reject(new Error(\"WorkerPool terminated\"));\n    }\n    this.taskQueue = [];\n\n    // Terminate all workers\n    for (const worker of this.workers) {\n      worker.terminate();\n    }\n    this.workers = [];\n    this.availableWorkers = [];\n  }\n}\n\n/**\n * Helper function to encode a canvas using a worker.\n */\nexport async function encodeCanvasInWorker(\n  worker: Worker,\n  canvas: HTMLCanvasElement,\n  preserveAlpha: boolean,\n): Promise<string> {\n  return new Promise<string>((resolve, reject) => {\n    const taskId = `task-${Date.now()}-${Math.random()}-${performance.now()}`;\n    const startTime = performance.now();\n    let timeoutId: number | null = null;\n\n    const cleanup = () => {\n      if (timeoutId !== null) {\n        clearTimeout(timeoutId);\n        timeoutId = null;\n      }\n      worker.removeEventListener(\"message\", messageHandler);\n      worker.removeEventListener(\"messageerror\", messageErrorHandler);\n    };\n\n    const messageHandler = (event: MessageEvent) => {\n      const result = event.data as { taskId: string; dataUrl: string; error?: string };\n      if (result.taskId === taskId) {\n        cleanup();\n        if (result.error) {\n          reject(new Error(`Worker encoding failed: ${result.error}`));\n        } else {\n          resolve(result.dataUrl);\n        }\n      }\n    };\n\n    const messageErrorHandler = () => {\n      cleanup();\n      reject(new Error(\"Worker message error\"));\n    };\n\n    worker.addEventListener(\"message\", messageHandler);\n    worker.addEventListener(\"messageerror\", messageErrorHandler);\n\n    // Set timeout to detect if worker never responds\n    timeoutId = window.setTimeout(() => {\n      cleanup();\n      reject(new Error(\"Worker task timed out\"));\n    }, WORKER_TASK_TIMEOUT_MS);\n\n    // Create ImageBitmap from canvas\n    createImageBitmap(canvas)\n      .then((bitmap) => {\n        // Transfer bitmap to worker (zero-copy)\n        worker.postMessage(\n          {\n            taskId,\n            bitmap,\n            preserveAlpha,\n          },\n          [bitmap],\n        );\n      })\n      .catch((error) => {\n        cleanup();\n        reject(error instanceof Error ? error : new Error(String(error)));\n      });\n  });\n}\n"],"mappings":"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"}

package/dist/sandbox/PlaybackControls.js

@@ -0,0 +1,10 @@
+import { __toESM } from "../_virtual/rolldown_runtime.js";
+import { require_react } from "../node_modules/react/index.js";
+import { require_jsx_runtime } from "../node_modules/react/jsx-runtime.js";
+
+//#region src/sandbox/PlaybackControls.tsx
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime());
+
+//#endregion
+//# sourceMappingURL=PlaybackControls.js.map

package/dist/sandbox/PlaybackControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackControls.js","names":[],"sources":["../../src/sandbox/PlaybackControls.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\n\nexport interface PlaybackControlsProps {\n  /**\n   * The timegroup element to control.\n   * If null, controls are disabled.\n   */\n  timegroup: EFTimegroup | null;\n  \n  /**\n   * Playback mode:\n   * - \"auto\": Play/pause with continuous scrubbing\n   * - \"step\": Discrete keyframe navigation\n   */\n  mode?: \"auto\" | \"step\";\n  \n  /**\n   * Callback when mode changes.\n   */\n  onModeChange?: (mode: \"auto\" | \"step\") => void;\n  \n  /**\n   * Keyframes for step mode (array of time values in ms).\n   * If not provided, step mode divides duration into 10 equal steps.\n   */\n  keyframes?: number[];\n}\n\nfunction formatTime(ms: number): string {\n  const totalSeconds = Math.floor(ms / 1000);\n  const minutes = Math.floor(totalSeconds / 60);\n  const seconds = totalSeconds % 60;\n  const centiseconds = Math.floor((ms % 1000) / 10);\n  return `${minutes}:${seconds.toString().padStart(2, \"0\")}.${centiseconds.toString().padStart(2, \"0\")}`;\n}\n\nexport function PlaybackControls({\n  timegroup,\n  mode = \"auto\",\n  onModeChange,\n  keyframes,\n}: PlaybackControlsProps) {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isLooping, setIsLooping] = useState(false);\n  const [currentTimeMs, setCurrentTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  \n  const scrubberRef = useRef<HTMLDivElement>(null);\n  const updateIntervalRef = useRef<number | null>(null);\n\n  // Calculate step keyframes\n  const steps = React.useMemo(() => {\n    if (keyframes && keyframes.length > 0) {\n      return keyframes;\n    }\n    // Default: 11 steps (0%, 10%, 20%, ..., 100%)\n    const stepCount = 11;\n    const stepSize = durationMs / (stepCount - 1);\n    return Array.from({ length: stepCount }, (_, i) => i * stepSize);\n  }, [keyframes, durationMs]);\n\n  // Update duration when timegroup changes\n  useEffect(() => {\n    if (timegroup) {\n      setDurationMs(timegroup.durationMs);\n      setCurrentTimeMs(timegroup.currentTimeMs);\n    } else {\n      setDurationMs(0);\n      setCurrentTimeMs(0);\n    }\n  }, [timegroup]);\n\n  // Update current time periodically\n  useEffect(() => {\n    if (!timegroup) return;\n\n    const updateTime = () => {\n      if (!isDragging) {\n        setCurrentTimeMs(timegroup.currentTimeMs);\n        setIsPlaying(timegroup.playbackController?.playing ?? false);\n      }\n    };\n\n    updateIntervalRef.current = window.setInterval(updateTime, 50);\n\n    return () => {\n      if (updateIntervalRef.current) {\n        window.clearInterval(updateIntervalRef.current);\n      }\n    };\n  }, [timegroup, isDragging]);\n\n  // Update step index when time changes in step mode\n  useEffect(() => {\n    if (mode === \"step\" && steps.length > 0) {\n      // Find closest step\n      let closestIndex = 0;\n      const firstStep = steps[0];\n      if (firstStep !== undefined) {\n        let closestDiff = Math.abs(currentTimeMs - firstStep);\n        for (let i = 1; i < steps.length; i++) {\n          const step = steps[i];\n          if (step !== undefined) {\n            const diff = Math.abs(currentTimeMs - step);\n            if (diff < closestDiff) {\n              closestDiff = diff;\n              closestIndex = i;\n            }\n          }\n        }\n        setCurrentStepIndex(closestIndex);\n      }\n    }\n  }, [currentTimeMs, mode, steps]);\n\n  const handlePlayPause = useCallback(async () => {\n    if (!timegroup) return;\n    \n    if (isPlaying) {\n      timegroup.pause();\n      setIsPlaying(false);\n    } else {\n      // Handle AudioContext for mobile devices\n      if (timegroup.playbackController) {\n        try {\n          const audioContext = new AudioContext({ latencyHint: \"playback\" });\n          audioContext.resume();\n          timegroup.playbackController.setPendingAudioContext(audioContext);\n        } catch (error) {\n          console.warn(\"Failed to create/resume AudioContext:\", error);\n        }\n      }\n      await timegroup.play();\n      setIsPlaying(true);\n    }\n  }, [timegroup, isPlaying]);\n\n  const handleLoopToggle = useCallback(() => {\n    if (!timegroup?.playbackController) return;\n    \n    const newLooping = !isLooping;\n    // @ts-expect-error - loop property is read-only in types but writable at runtime\n    timegroup.playbackController.loop = newLooping;\n    setIsLooping(newLooping);\n  }, [timegroup, isLooping]);\n\n  const handleScrubStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {\n    if (!timegroup || !scrubberRef.current) return;\n    \n    setIsDragging(true);\n    handleScrub(e);\n  }, [timegroup]);\n\n  const handleScrub = useCallback((e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => {\n    if (!timegroup || !scrubberRef.current || !isDragging) return;\n    \n    const scrubber = scrubberRef.current;\n    if (!scrubber) return;\n    \n    const rect = scrubber.getBoundingClientRect();\n    const touches = \"touches\" in e ? e.touches : null;\n    const clientX = touches && touches[0] \n      ? touches[0].clientX \n      : (e as MouseEvent).clientX;\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(1, x / rect.width));\n    const targetTimeMs = percent * durationMs;\n    \n    timegroup.currentTime = targetTimeMs / 1000;\n    setCurrentTimeMs(targetTimeMs);\n  }, [timegroup, durationMs, isDragging]);\n\n  const handleScrubEnd = useCallback(() => {\n    setIsDragging(false);\n  }, []);\n\n  // Global mouse/touch events for scrubbing\n  useEffect(() => {\n    if (isDragging) {\n      const handleMove = (e: MouseEvent | TouchEvent) => handleScrub(e);\n      const handleUp = () => handleScrubEnd();\n      \n      document.addEventListener(\"mousemove\", handleMove);\n      document.addEventListener(\"mouseup\", handleUp);\n      document.addEventListener(\"touchmove\", handleMove);\n      document.addEventListener(\"touchend\", handleUp);\n      \n      return () => {\n        document.removeEventListener(\"mousemove\", handleMove);\n        document.removeEventListener(\"mouseup\", handleUp);\n        document.removeEventListener(\"touchmove\", handleMove);\n        document.removeEventListener(\"touchend\", handleUp);\n      };\n    }\n  }, [isDragging, handleScrub, handleScrubEnd]);\n\n  const handleStepPrevious = useCallback(() => {\n    if (!timegroup || steps.length === 0) return;\n    \n    const newIndex = Math.max(0, currentStepIndex - 1);\n    const step = steps[newIndex];\n    if (step !== undefined) {\n      timegroup.currentTime = step / 1000;\n      setCurrentStepIndex(newIndex);\n      setCurrentTimeMs(step);\n    }\n  }, [timegroup, steps, currentStepIndex]);\n\n  const handleStepNext = useCallback(() => {\n    if (!timegroup || steps.length === 0) return;\n    \n    const newIndex = Math.min(steps.length - 1, currentStepIndex + 1);\n    const step = steps[newIndex];\n    if (step !== undefined) {\n      timegroup.currentTime = step / 1000;\n      setCurrentStepIndex(newIndex);\n      setCurrentTimeMs(step);\n    }\n  }, [timegroup, steps, currentStepIndex]);\n\n  const progress = durationMs > 0 ? (currentTimeMs / durationMs) * 100 : 0;\n  const isDisabled = !timegroup;\n\n  return (\n    <div style={styles.container}>\n      {/* Mode Toggle */}\n      <div style={styles.modeToggle}>\n        <button\n          style={{\n            ...styles.modeButton,\n            ...(mode === \"auto\" ? styles.modeButtonActive : {}),\n          }}\n          onClick={() => onModeChange?.(\"auto\")}\n          disabled={isDisabled}\n        >\n          Auto\n        </button>\n        <button\n          style={{\n            ...styles.modeButton,\n            ...(mode === \"step\" ? styles.modeButtonActive : {}),\n          }}\n          onClick={() => onModeChange?.(\"step\")}\n          disabled={isDisabled}\n        >\n          Step\n        </button>\n      </div>\n\n      {/* Controls */}\n      <div style={styles.controls}>\n        {mode === \"auto\" ? (\n          <>\n            {/* Play/Pause */}\n            <button\n              style={styles.button}\n              onClick={handlePlayPause}\n              disabled={isDisabled}\n              title={isPlaying ? \"Pause\" : \"Play\"}\n            >\n              {isPlaying ? \"⏸\" : \"▶\"}\n            </button>\n\n            {/* Loop */}\n            <button\n              style={{\n                ...styles.button,\n                ...(isLooping ? styles.buttonActive : {}),\n              }}\n              onClick={handleLoopToggle}\n              disabled={isDisabled}\n              title=\"Loop\"\n            >\n              🔁\n            </button>\n          </>\n        ) : (\n          <>\n            {/* Previous Step */}\n            <button\n              style={styles.button}\n              onClick={handleStepPrevious}\n              disabled={isDisabled || currentStepIndex === 0}\n              title=\"Previous Step\"\n            >\n              ⏮\n            </button>\n\n            {/* Step indicator */}\n            <span style={styles.stepIndicator}>\n              {currentStepIndex + 1} / {steps.length}\n            </span>\n\n            {/* Next Step */}\n            <button\n              style={styles.button}\n              onClick={handleStepNext}\n              disabled={isDisabled || currentStepIndex === steps.length - 1}\n              title=\"Next Step\"\n            >\n              ⏭\n            </button>\n          </>\n        )}\n      </div>\n\n      {/* Scrubber */}\n      <div style={styles.scrubberContainer}>\n        <span style={styles.time}>{formatTime(currentTimeMs)}</span>\n        <div\n          ref={scrubberRef}\n          style={{\n            ...styles.scrubberTrack,\n            ...(isDragging ? styles.scrubberTrackDragging : {}),\n          }}\n          onMouseDown={handleScrubStart}\n          onTouchStart={handleScrubStart}\n        >\n          <div\n            style={{\n              ...styles.scrubberProgress,\n              width: `${progress}%`,\n            }}\n          >\n            <div style={styles.scrubberHandle} />\n          </div>\n        </div>\n        <span style={styles.time}>{formatTime(durationMs)}</span>\n      </div>\n    </div>\n  );\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n  container: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"8px\",\n    padding: \"8px\",\n    background: \"#1f2937\",\n    borderTop: \"1px solid #374151\",\n  },\n  modeToggle: {\n    display: \"flex\",\n    gap: \"4px\",\n    justifyContent: \"center\",\n  },\n  modeButton: {\n    padding: \"4px 12px\",\n    fontSize: \"11px\",\n    background: \"#374151\",\n    border: \"1px solid #4b5563\",\n    borderRadius: \"4px\",\n    color: \"#d1d5db\",\n    cursor: \"pointer\",\n  },\n  modeButtonActive: {\n    background: \"#3b82f6\",\n    borderColor: \"#3b82f6\",\n    color: \"white\",\n  },\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"8px\",\n  },\n  button: {\n    width: \"32px\",\n    height: \"32px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"transparent\",\n    border: \"none\",\n    color: \"#e5e7eb\",\n    fontSize: \"16px\",\n    cursor: \"pointer\",\n    borderRadius: \"4px\",\n  },\n  buttonActive: {\n    color: \"#22c55e\",\n  },\n  stepIndicator: {\n    fontSize: \"12px\",\n    color: \"#9ca3af\",\n    minWidth: \"50px\",\n    textAlign: \"center\",\n  },\n  scrubberContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"8px\",\n  },\n  time: {\n    fontSize: \"11px\",\n    color: \"#9ca3af\",\n    fontFamily: \"'SF Mono', 'Monaco', 'Consolas', monospace\",\n    minWidth: \"60px\",\n  },\n  scrubberTrack: {\n    flex: 1,\n    height: \"4px\",\n    background: \"rgba(255, 255, 255, 0.2)\",\n    borderRadius: \"2px\",\n    cursor: \"pointer\",\n    position: \"relative\",\n  },\n  scrubberTrackDragging: {\n    cursor: \"grabbing\",\n  },\n  scrubberProgress: {\n    height: \"100%\",\n    background: \"#3b82f6\",\n    borderRadius: \"2px\",\n    position: \"relative\",\n    transition: \"width 0.05s linear\",\n  },\n  scrubberHandle: {\n    position: \"absolute\",\n    right: \"-6px\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    width: \"12px\",\n    height: \"12px\",\n    background: \"white\",\n    borderRadius: \"50%\",\n    boxShadow: \"0 2px 4px rgba(0, 0, 0, 0.3)\",\n  },\n};\n"],"mappings":""}

package/dist/sandbox/ScenarioRunner.js

@@ -0,0 +1 @@
+import { nothing } from "lit";

package/dist/sandbox/index.js

@@ -0,0 +1,2 @@
+import "./PlaybackControls.js";
+import "./ScenarioRunner.js";