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

package/dist/preview/RenderProfiler.js

@@ -0,0 +1,135 @@
+//#region src/preview/RenderProfiler.ts
+/**
+* Profiling utility for render operations.
+* Centralizes timing accumulation and logging to keep business logic clean.
+*/
+/** Interval between profiling log outputs (ms) */
+const DEFAULT_LOG_INTERVAL_MS = 2e3;
+/** Interval for periodic frame logging (every N frames) */
+const DEFAULT_FRAME_LOG_INTERVAL = 60;
+/**
+* Profiler for render operations.
+* Accumulates timing data and provides structured logging.
+*/
+var RenderProfiler = class {
+	constructor() {
+		this._renderCount = 0;
+		this._lastLogTime = 0;
+		this._timingLoggedAt = 0;
+		this._timings = {
+			setup: 0,
+			draw: 0,
+			downsample: 0,
+			canvasEncode: 0,
+			inline: 0,
+			serialize: 0,
+			base64: 0,
+			imageLoad: 0,
+			restore: 0
+		};
+	}
+	/**
+	* Reset all timing data.
+	*/
+	reset() {
+		this._renderCount = 0;
+		this._lastLogTime = 0;
+		this._timingLoggedAt = 0;
+		for (const key of Object.keys(this._timings)) this._timings[key] = 0;
+	}
+	/**
+	* Get current render count.
+	*/
+	get renderCount() {
+		return this._renderCount;
+	}
+	/**
+	* Increment render count.
+	*/
+	incrementRenderCount() {
+		this._renderCount++;
+	}
+	/**
+	* Add time to a specific phase.
+	*/
+	addTime(phase, ms) {
+		this._timings[phase] += ms;
+	}
+	/**
+	* Time a synchronous operation and add to the specified phase.
+	*/
+	time(phase, fn) {
+		const start = performance.now();
+		const result = fn();
+		this._timings[phase] += performance.now() - start;
+		return result;
+	}
+	/**
+	* Time an async operation and add to the specified phase.
+	*/
+	async timeAsync(phase, fn) {
+		const start = performance.now();
+		const result = await fn();
+		this._timings[phase] += performance.now() - start;
+		return result;
+	}
+	/**
+	* Check if enough time has passed since last log (for time-based logging).
+	*/
+	shouldLogByTime(intervalMs = DEFAULT_LOG_INTERVAL_MS) {
+		const now = performance.now();
+		if (now - this._lastLogTime > intervalMs) {
+			this._lastLogTime = now;
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Check if enough frames have passed since last log (for frame-based logging).
+	*/
+	shouldLogByFrameCount(interval = DEFAULT_FRAME_LOG_INTERVAL) {
+		if (this._renderCount - this._timingLoggedAt >= interval) {
+			this._timingLoggedAt = this._renderCount;
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Check if this is an early render (for initial debug logging).
+	*/
+	isEarlyRender(threshold = 2) {
+		return this._renderCount < threshold;
+	}
+	/**
+	* Get timing summary string.
+	*/
+	summary() {
+		const t = this._timings;
+		const parts = [];
+		if (t.setup > 0) parts.push(`setup=${t.setup.toFixed(0)}ms`);
+		if (t.draw > 0) parts.push(`draw=${t.draw.toFixed(0)}ms`);
+		if (t.downsample > 0) parts.push(`downsample=${t.downsample.toFixed(0)}ms`);
+		if (t.canvasEncode > 0) parts.push(`canvasEncode=${t.canvasEncode.toFixed(0)}ms`);
+		if (t.inline > 0) parts.push(`inline=${t.inline.toFixed(0)}ms`);
+		if (t.serialize > 0) parts.push(`serialize=${t.serialize.toFixed(0)}ms`);
+		if (t.base64 > 0) parts.push(`base64=${t.base64.toFixed(0)}ms`);
+		if (t.imageLoad > 0) parts.push(`imageLoad=${t.imageLoad.toFixed(0)}ms`);
+		if (t.restore > 0) parts.push(`restore=${t.restore.toFixed(0)}ms`);
+		return parts.join(", ");
+	}
+	/**
+	* Get raw timings object.
+	*/
+	getTimings() {
+		return { ...this._timings };
+	}
+};
+/**
+* Default shared profiler instance.
+* Can be replaced with a custom instance for testing.
+*/
+const defaultProfiler = new RenderProfiler();
+
+//#endregion
+export { defaultProfiler };
+//# sourceMappingURL=RenderProfiler.js.map

package/dist/preview/RenderProfiler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderProfiler.js","names":["parts: string[]"],"sources":["../../src/preview/RenderProfiler.ts"],"sourcesContent":["/**\n * Profiling utility for render operations.\n * Centralizes timing accumulation and logging to keep business logic clean.\n */\n\n/** Interval between profiling log outputs (ms) */\nconst DEFAULT_LOG_INTERVAL_MS = 2000;\n\n/** Interval for periodic frame logging (every N frames) */\nconst DEFAULT_FRAME_LOG_INTERVAL = 60;\n\n/**\n * Phases tracked during rendering.\n */\nexport interface RenderTimings {\n  setup: number;\n  draw: number;\n  downsample: number;\n  canvasEncode: number;\n  inline: number;\n  serialize: number;\n  base64: number;\n  imageLoad: number;\n  restore: number;\n}\n\n/**\n * Profiler for render operations.\n * Accumulates timing data and provides structured logging.\n */\nexport class RenderProfiler {\n  private _renderCount = 0;\n  private _lastLogTime = 0;\n  private _timingLoggedAt = 0;\n  \n  private _timings: RenderTimings = {\n    setup: 0,\n    draw: 0,\n    downsample: 0,\n    canvasEncode: 0,\n    inline: 0,\n    serialize: 0,\n    base64: 0,\n    imageLoad: 0,\n    restore: 0,\n  };\n\n  /**\n   * Reset all timing data.\n   */\n  reset(): void {\n    this._renderCount = 0;\n    this._lastLogTime = 0;\n    this._timingLoggedAt = 0;\n    \n    for (const key of Object.keys(this._timings) as (keyof RenderTimings)[]) {\n      this._timings[key] = 0;\n    }\n  }\n\n  /**\n   * Get current render count.\n   */\n  get renderCount(): number {\n    return this._renderCount;\n  }\n\n  /**\n   * Increment render count.\n   */\n  incrementRenderCount(): void {\n    this._renderCount++;\n  }\n\n  /**\n   * Add time to a specific phase.\n   */\n  addTime(phase: keyof RenderTimings, ms: number): void {\n    this._timings[phase] += ms;\n  }\n\n  /**\n   * Time a synchronous operation and add to the specified phase.\n   */\n  time<T>(phase: keyof RenderTimings, fn: () => T): T {\n    const start = performance.now();\n    const result = fn();\n    this._timings[phase] += performance.now() - start;\n    return result;\n  }\n\n  /**\n   * Time an async operation and add to the specified phase.\n   */\n  async timeAsync<T>(phase: keyof RenderTimings, fn: () => Promise<T>): Promise<T> {\n    const start = performance.now();\n    const result = await fn();\n    this._timings[phase] += performance.now() - start;\n    return result;\n  }\n\n  /**\n   * Check if enough time has passed since last log (for time-based logging).\n   */\n  shouldLogByTime(intervalMs: number = DEFAULT_LOG_INTERVAL_MS): boolean {\n    const now = performance.now();\n    if (now - this._lastLogTime > intervalMs) {\n      this._lastLogTime = now;\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Check if enough frames have passed since last log (for frame-based logging).\n   */\n  shouldLogByFrameCount(interval: number = DEFAULT_FRAME_LOG_INTERVAL): boolean {\n    if (this._renderCount - this._timingLoggedAt >= interval) {\n      this._timingLoggedAt = this._renderCount;\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Check if this is an early render (for initial debug logging).\n   */\n  isEarlyRender(threshold: number = 2): boolean {\n    return this._renderCount < threshold;\n  }\n\n  /**\n   * Get timing summary string.\n   */\n  summary(): string {\n    const t = this._timings;\n    const parts: string[] = [];\n    \n    if (t.setup > 0) parts.push(`setup=${t.setup.toFixed(0)}ms`);\n    if (t.draw > 0) parts.push(`draw=${t.draw.toFixed(0)}ms`);\n    if (t.downsample > 0) parts.push(`downsample=${t.downsample.toFixed(0)}ms`);\n    if (t.canvasEncode > 0) parts.push(`canvasEncode=${t.canvasEncode.toFixed(0)}ms`);\n    if (t.inline > 0) parts.push(`inline=${t.inline.toFixed(0)}ms`);\n    if (t.serialize > 0) parts.push(`serialize=${t.serialize.toFixed(0)}ms`);\n    if (t.base64 > 0) parts.push(`base64=${t.base64.toFixed(0)}ms`);\n    if (t.imageLoad > 0) parts.push(`imageLoad=${t.imageLoad.toFixed(0)}ms`);\n    if (t.restore > 0) parts.push(`restore=${t.restore.toFixed(0)}ms`);\n    \n    return parts.join(', ');\n  }\n\n  /**\n   * Get raw timings object.\n   */\n  getTimings(): Readonly<RenderTimings> {\n    return { ...this._timings };\n  }\n}\n\n/**\n * Default shared profiler instance.\n * Can be replaced with a custom instance for testing.\n */\nexport const defaultProfiler = new RenderProfiler();\n"],"mappings":";;;;;;AAMA,MAAM,0BAA0B;;AAGhC,MAAM,6BAA6B;;;;;AAqBnC,IAAa,iBAAb,MAA4B;;sBACH;sBACA;yBACG;kBAEQ;GAChC,OAAO;GACP,MAAM;GACN,YAAY;GACZ,cAAc;GACd,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,WAAW;GACX,SAAS;GACV;;;;;CAKD,QAAc;AACZ,OAAK,eAAe;AACpB,OAAK,eAAe;AACpB,OAAK,kBAAkB;AAEvB,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,SAAS,CAC1C,MAAK,SAAS,OAAO;;;;;CAOzB,IAAI,cAAsB;AACxB,SAAO,KAAK;;;;;CAMd,uBAA6B;AAC3B,OAAK;;;;;CAMP,QAAQ,OAA4B,IAAkB;AACpD,OAAK,SAAS,UAAU;;;;;CAM1B,KAAQ,OAA4B,IAAgB;EAClD,MAAM,QAAQ,YAAY,KAAK;EAC/B,MAAM,SAAS,IAAI;AACnB,OAAK,SAAS,UAAU,YAAY,KAAK,GAAG;AAC5C,SAAO;;;;;CAMT,MAAM,UAAa,OAA4B,IAAkC;EAC/E,MAAM,QAAQ,YAAY,KAAK;EAC/B,MAAM,SAAS,MAAM,IAAI;AACzB,OAAK,SAAS,UAAU,YAAY,KAAK,GAAG;AAC5C,SAAO;;;;;CAMT,gBAAgB,aAAqB,yBAAkC;EACrE,MAAM,MAAM,YAAY,KAAK;AAC7B,MAAI,MAAM,KAAK,eAAe,YAAY;AACxC,QAAK,eAAe;AACpB,UAAO;;AAET,SAAO;;;;;CAMT,sBAAsB,WAAmB,4BAAqC;AAC5E,MAAI,KAAK,eAAe,KAAK,mBAAmB,UAAU;AACxD,QAAK,kBAAkB,KAAK;AAC5B,UAAO;;AAET,SAAO;;;;;CAMT,cAAc,YAAoB,GAAY;AAC5C,SAAO,KAAK,eAAe;;;;;CAM7B,UAAkB;EAChB,MAAM,IAAI,KAAK;EACf,MAAMA,QAAkB,EAAE;AAE1B,MAAI,EAAE,QAAQ,EAAG,OAAM,KAAK,SAAS,EAAE,MAAM,QAAQ,EAAE,CAAC,IAAI;AAC5D,MAAI,EAAE,OAAO,EAAG,OAAM,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,CAAC,IAAI;AACzD,MAAI,EAAE,aAAa,EAAG,OAAM,KAAK,cAAc,EAAE,WAAW,QAAQ,EAAE,CAAC,IAAI;AAC3E,MAAI,EAAE,eAAe,EAAG,OAAM,KAAK,gBAAgB,EAAE,aAAa,QAAQ,EAAE,CAAC,IAAI;AACjF,MAAI,EAAE,SAAS,EAAG,OAAM,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI;AAC/D,MAAI,EAAE,YAAY,EAAG,OAAM,KAAK,aAAa,EAAE,UAAU,QAAQ,EAAE,CAAC,IAAI;AACxE,MAAI,EAAE,SAAS,EAAG,OAAM,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI;AAC/D,MAAI,EAAE,YAAY,EAAG,OAAM,KAAK,aAAa,EAAE,UAAU,QAAQ,EAAE,CAAC,IAAI;AACxE,MAAI,EAAE,UAAU,EAAG,OAAM,KAAK,WAAW,EAAE,QAAQ,QAAQ,EAAE,CAAC,IAAI;AAElE,SAAO,MAAM,KAAK,KAAK;;;;;CAMzB,aAAsC;AACpC,SAAO,EAAE,GAAG,KAAK,UAAU;;;;;;;AAQ/B,MAAa,kBAAkB,IAAI,gBAAgB"}

package/dist/preview/previewSettings.js

@@ -0,0 +1,131 @@
+//#region src/preview/previewSettings.ts
+const STORAGE_KEY_PRESENTATION_MODE = "ef-preview-presentation-mode";
+const STORAGE_KEY_RENDER_MODE = "ef-preview-render-mode";
+const STORAGE_KEY_RESOLUTION_SCALE = "ef-preview-resolution-scale";
+const STORAGE_KEY_SHOW_STATS = "ef-preview-show-stats";
+/**
+* Cached detection result for native HTML-in-Canvas API availability.
+* This is separate from the user preference - it detects browser capability.
+*/
+let _nativeApiAvailable = null;
+/**
+* Detect if the native HTML-in-Canvas API (drawElementImage) is available in this browser.
+* This checks browser capability, not user preference.
+* 
+* The API is available in Chrome Canary with chrome://flags/#canvas-draw-element
+* @see https://github.com/WICG/html-in-canvas
+*/
+function isNativeCanvasApiAvailable() {
+	if (_nativeApiAvailable === null) {
+		const ctx = document.createElement("canvas").getContext("2d");
+		_nativeApiAvailable = ctx !== null && "drawElementImage" in ctx;
+	}
+	return _nativeApiAvailable;
+}
+/**
+* Get the current preview presentation mode.
+* Defaults to "original" if not set.
+*/
+function getPreviewPresentationMode() {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_PRESENTATION_MODE);
+		if (stored === "original" || stored === "computed" || stored === "canvas") return stored;
+		return "original";
+	} catch {
+		return "original";
+	}
+}
+/**
+* Set the preview presentation mode.
+* Persists to localStorage and dispatches a change event.
+*/
+function setPreviewPresentationMode(mode) {
+	try {
+		localStorage.setItem(STORAGE_KEY_PRESENTATION_MODE, mode);
+	} catch {}
+	window.dispatchEvent(new CustomEvent("ef-preview-settings-changed", { detail: { presentationMode: mode } }));
+}
+/**
+* Get the current render mode for HTML-to-canvas capture.
+* Defaults to "native" if available, otherwise "foreignObject".
+*/
+function getRenderMode() {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_RENDER_MODE);
+		if (stored === "foreignObject" || stored === "native") return stored;
+		return isNativeCanvasApiAvailable() ? "native" : "foreignObject";
+	} catch {
+		return isNativeCanvasApiAvailable() ? "native" : "foreignObject";
+	}
+}
+/**
+* Set the render mode for HTML-to-canvas capture.
+* Persists to localStorage and dispatches a change event.
+*/
+function setRenderMode(mode) {
+	try {
+		localStorage.setItem(STORAGE_KEY_RENDER_MODE, mode);
+	} catch {}
+	window.dispatchEvent(new CustomEvent("ef-preview-settings-changed", { detail: { renderMode: mode } }));
+}
+/**
+* Valid numeric resolution scale values.
+*/
+const VALID_NUMERIC_SCALES = [
+	1,
+	.75,
+	.5,
+	.25
+];
+/**
+* Get the current preview resolution scale.
+* Defaults to 1 (full resolution) if not set.
+*/
+function getPreviewResolutionScale() {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_RESOLUTION_SCALE);
+		if (stored !== null) {
+			if (stored === "auto") return "auto";
+			const parsed = parseFloat(stored);
+			if (VALID_NUMERIC_SCALES.includes(parsed)) return parsed;
+		}
+		return 1;
+	} catch {
+		return 1;
+	}
+}
+/**
+* Set the preview resolution scale.
+* Persists to localStorage and dispatches a change event.
+*/
+function setPreviewResolutionScale(scale) {
+	try {
+		localStorage.setItem(STORAGE_KEY_RESOLUTION_SCALE, String(scale));
+	} catch {}
+	window.dispatchEvent(new CustomEvent("ef-preview-settings-changed", { detail: { resolutionScale: scale } }));
+}
+/**
+* Get whether performance stats should be shown.
+* Defaults to false (stats hidden by default).
+*/
+function getShowStats() {
+	try {
+		return localStorage.getItem(STORAGE_KEY_SHOW_STATS) === "true";
+	} catch {
+		return false;
+	}
+}
+/**
+* Set whether performance stats should be shown.
+* Persists to localStorage and dispatches a change event.
+*/
+function setShowStats(enabled) {
+	try {
+		localStorage.setItem(STORAGE_KEY_SHOW_STATS, String(enabled));
+	} catch {}
+	window.dispatchEvent(new CustomEvent("ef-preview-settings-changed", { detail: { showStats: enabled } }));
+}
+
+//#endregion
+export { getPreviewPresentationMode, getPreviewResolutionScale, getRenderMode, getShowStats, isNativeCanvasApiAvailable, setPreviewPresentationMode, setPreviewResolutionScale, setRenderMode, setShowStats };
+//# sourceMappingURL=previewSettings.js.map

package/dist/preview/previewSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewSettings.js","names":["_nativeApiAvailable: boolean | null","VALID_NUMERIC_SCALES: number[]"],"sources":["../../src/preview/previewSettings.ts"],"sourcesContent":["/**\n * Preview settings module with localStorage persistence.\n * Manages configuration for the preview rendering system.\n */\n\nconst STORAGE_KEY_NATIVE_CANVAS_API = \"ef-preview-native-canvas-api-enabled\";\nconst STORAGE_KEY_PRESENTATION_MODE = \"ef-preview-presentation-mode\";\nconst STORAGE_KEY_RENDER_MODE = \"ef-preview-render-mode\";\nconst STORAGE_KEY_RESOLUTION_SCALE = \"ef-preview-resolution-scale\";\nconst STORAGE_KEY_SHOW_STATS = \"ef-preview-show-stats\";\n\n/**\n * Render mode for HTML-to-canvas capture operations.\n * - \"foreignObject\": SVG foreignObject serialization (fallback, works everywhere)\n * - \"native\": Chrome's experimental drawElementImage API (fastest when available)\n */\nexport type RenderMode = \"foreignObject\" | \"native\";\n\n/**\n * Preview resolution scale factor.\n * Controls how much to reduce the preview render resolution for better performance.\n * - 1: Full resolution (default)\n * - 0.75: 3/4 resolution\n * - 0.5: Half resolution\n * - 0.25: Quarter resolution\n * - \"auto\": Adaptive resolution that scales down during motion to prevent dropped frames,\n *           and renders at full resolution when at rest\n */\nexport type PreviewResolutionScale = 1 | 0.75 | 0.5 | 0.25 | \"auto\";\n\n/**\n * Preview presentation mode determines how content is rendered in the workbench.\n * - \"clone\": Show a clone with computed styles applied (alias for \"computed\")\n * - \"dom\": Show the original DOM content directly (alias for \"original\")\n * - \"original\": Show the original DOM content directly\n * - \"computed\": Show a clone with computed styles applied\n * - \"canvas\": Render to canvas using the active rendering path\n */\nexport type PreviewPresentationMode = \"original\" | \"computed\" | \"canvas\" | \"clone\" | \"dom\";\n\n/**\n * Cached detection result for native HTML-in-Canvas API availability.\n * This is separate from the user preference - it detects browser capability.\n */\nlet _nativeApiAvailable: boolean | null = null;\n\n/**\n * Detect if the native HTML-in-Canvas API (drawElementImage) is available in this browser.\n * This checks browser capability, not user preference.\n * \n * The API is available in Chrome Canary with chrome://flags/#canvas-draw-element\n * @see https://github.com/WICG/html-in-canvas\n */\nexport function isNativeCanvasApiAvailable(): boolean {\n  if (_nativeApiAvailable === null) {\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    _nativeApiAvailable = ctx !== null && \"drawElementImage\" in ctx;\n  }\n  return _nativeApiAvailable;\n}\n\n/**\n * Check if the native Canvas API is enabled by the user.\n * Returns true only if:\n * 1. The API is available in the browser\n * 2. The user has not explicitly disabled it\n * \n * Default is enabled when available (opt-out model).\n */\nexport function isNativeCanvasApiEnabled(): boolean {\n  if (!isNativeCanvasApiAvailable()) {\n    return false;\n  }\n  \n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_NATIVE_CANVAS_API);\n    // Default to true (enabled) when available, unless explicitly disabled\n    if (stored === null) {\n      return true;\n    }\n    return stored === \"true\";\n  } catch {\n    // localStorage not available (e.g., private browsing)\n    return true;\n  }\n}\n\n/**\n * Set whether the native Canvas API should be used (when available).\n * Persists to localStorage and dispatches a change event.\n */\nexport function setNativeCanvasApiEnabled(enabled: boolean): void {\n  try {\n    localStorage.setItem(STORAGE_KEY_NATIVE_CANVAS_API, String(enabled));\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-preview-settings-changed\", {\n    detail: { nativeCanvasApiEnabled: enabled }\n  }));\n}\n\n/**\n * Get the current raw user preference (ignoring availability).\n * Returns null if no preference is set.\n */\nexport function getNativeCanvasApiPreference(): boolean | null {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_NATIVE_CANVAS_API);\n    if (stored === null) {\n      return null;\n    }\n    return stored === \"true\";\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Subscribe to preview settings changes.\n * @returns Unsubscribe function\n */\nexport function onPreviewSettingsChanged(\n  callback: (detail: PreviewSettingsChangedDetail) => void\n): () => void {\n  const handler = (event: Event) => {\n    callback((event as CustomEvent).detail);\n  };\n  window.addEventListener(\"ef-preview-settings-changed\", handler);\n  return () => window.removeEventListener(\"ef-preview-settings-changed\", handler);\n}\n\n/**\n * Detail object for preview settings change events.\n */\nexport interface PreviewSettingsChangedDetail {\n  nativeCanvasApiEnabled?: boolean;\n  presentationMode?: PreviewPresentationMode;\n  renderMode?: RenderMode;\n  resolutionScale?: PreviewResolutionScale;\n  showStats?: boolean;\n}\n\n/**\n * Get the current preview presentation mode.\n * Defaults to \"original\" if not set.\n */\nexport function getPreviewPresentationMode(): PreviewPresentationMode {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_PRESENTATION_MODE);\n    if (stored === \"original\" || stored === \"computed\" || stored === \"canvas\") {\n      return stored;\n    }\n    return \"original\";\n  } catch {\n    return \"original\";\n  }\n}\n\n/**\n * Set the preview presentation mode.\n * Persists to localStorage and dispatches a change event.\n */\nexport function setPreviewPresentationMode(mode: PreviewPresentationMode): void {\n  try {\n    localStorage.setItem(STORAGE_KEY_PRESENTATION_MODE, mode);\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-preview-settings-changed\", {\n    detail: { presentationMode: mode }\n  }));\n}\n\n/**\n * Get the current render mode for HTML-to-canvas capture.\n * Defaults to \"native\" if available, otherwise \"foreignObject\".\n */\nexport function getRenderMode(): RenderMode {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_RENDER_MODE);\n    if (stored === \"foreignObject\" || stored === \"native\") {\n      return stored;\n    }\n    // Default: prefer native if available, otherwise foreignObject\n    return isNativeCanvasApiAvailable() ? \"native\" : \"foreignObject\";\n  } catch {\n    return isNativeCanvasApiAvailable() ? \"native\" : \"foreignObject\";\n  }\n}\n\n/**\n * Set the render mode for HTML-to-canvas capture.\n * Persists to localStorage and dispatches a change event.\n */\nexport function setRenderMode(mode: RenderMode): void {\n  try {\n    localStorage.setItem(STORAGE_KEY_RENDER_MODE, mode);\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-preview-settings-changed\", {\n    detail: { renderMode: mode }\n  }));\n}\n\n/**\n * Valid numeric resolution scale values.\n */\nconst VALID_NUMERIC_SCALES: number[] = [1, 0.75, 0.5, 0.25];\n\n/**\n * Get the current preview resolution scale.\n * Defaults to 1 (full resolution) if not set.\n */\nexport function getPreviewResolutionScale(): PreviewResolutionScale {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_RESOLUTION_SCALE);\n    if (stored !== null) {\n      // Check for \"auto\" string first\n      if (stored === \"auto\") {\n        return \"auto\";\n      }\n      // Then check numeric values\n      const parsed = parseFloat(stored);\n      if (VALID_NUMERIC_SCALES.includes(parsed)) {\n        return parsed as PreviewResolutionScale;\n      }\n    }\n    return 1;\n  } catch {\n    return 1;\n  }\n}\n\n/**\n * Set the preview resolution scale.\n * Persists to localStorage and dispatches a change event.\n */\nexport function setPreviewResolutionScale(scale: PreviewResolutionScale): void {\n  try {\n    localStorage.setItem(STORAGE_KEY_RESOLUTION_SCALE, String(scale));\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-preview-settings-changed\", {\n    detail: { resolutionScale: scale }\n  }));\n}\n\n/**\n * Get whether performance stats should be shown.\n * Defaults to false (stats hidden by default).\n */\nexport function getShowStats(): boolean {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY_SHOW_STATS);\n    return stored === \"true\";\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Set whether performance stats should be shown.\n * Persists to localStorage and dispatches a change event.\n */\nexport function setShowStats(enabled: boolean): void {\n  try {\n    localStorage.setItem(STORAGE_KEY_SHOW_STATS, String(enabled));\n  } catch {\n    // localStorage not available\n  }\n  \n  // Dispatch event so components can react to the change\n  window.dispatchEvent(new CustomEvent(\"ef-preview-settings-changed\", {\n    detail: { showStats: enabled }\n  }));\n}\n\n"],"mappings":";AAMA,MAAM,gCAAgC;AACtC,MAAM,0BAA0B;AAChC,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;;;;;AAmC/B,IAAIA,sBAAsC;;;;;;;;AAS1C,SAAgB,6BAAsC;AACpD,KAAI,wBAAwB,MAAM;EAEhC,MAAM,MADS,SAAS,cAAc,SAAS,CAC5B,WAAW,KAAK;AACnC,wBAAsB,QAAQ,QAAQ,sBAAsB;;AAE9D,QAAO;;;;;;AA2FT,SAAgB,6BAAsD;AACpE,KAAI;EACF,MAAM,SAAS,aAAa,QAAQ,8BAA8B;AAClE,MAAI,WAAW,cAAc,WAAW,cAAc,WAAW,SAC/D,QAAO;AAET,SAAO;SACD;AACN,SAAO;;;;;;;AAQX,SAAgB,2BAA2B,MAAqC;AAC9E,KAAI;AACF,eAAa,QAAQ,+BAA+B,KAAK;SACnD;AAKR,QAAO,cAAc,IAAI,YAAY,+BAA+B,EAClE,QAAQ,EAAE,kBAAkB,MAAM,EACnC,CAAC,CAAC;;;;;;AAOL,SAAgB,gBAA4B;AAC1C,KAAI;EACF,MAAM,SAAS,aAAa,QAAQ,wBAAwB;AAC5D,MAAI,WAAW,mBAAmB,WAAW,SAC3C,QAAO;AAGT,SAAO,4BAA4B,GAAG,WAAW;SAC3C;AACN,SAAO,4BAA4B,GAAG,WAAW;;;;;;;AAQrD,SAAgB,cAAc,MAAwB;AACpD,KAAI;AACF,eAAa,QAAQ,yBAAyB,KAAK;SAC7C;AAKR,QAAO,cAAc,IAAI,YAAY,+BAA+B,EAClE,QAAQ,EAAE,YAAY,MAAM,EAC7B,CAAC,CAAC;;;;;AAML,MAAMC,uBAAiC;CAAC;CAAG;CAAM;CAAK;CAAK;;;;;AAM3D,SAAgB,4BAAoD;AAClE,KAAI;EACF,MAAM,SAAS,aAAa,QAAQ,6BAA6B;AACjE,MAAI,WAAW,MAAM;AAEnB,OAAI,WAAW,OACb,QAAO;GAGT,MAAM,SAAS,WAAW,OAAO;AACjC,OAAI,qBAAqB,SAAS,OAAO,CACvC,QAAO;;AAGX,SAAO;SACD;AACN,SAAO;;;;;;;AAQX,SAAgB,0BAA0B,OAAqC;AAC7E,KAAI;AACF,eAAa,QAAQ,8BAA8B,OAAO,MAAM,CAAC;SAC3D;AAKR,QAAO,cAAc,IAAI,YAAY,+BAA+B,EAClE,QAAQ,EAAE,iBAAiB,OAAO,EACnC,CAAC,CAAC;;;;;;AAOL,SAAgB,eAAwB;AACtC,KAAI;AAEF,SADe,aAAa,QAAQ,uBAAuB,KACzC;SACZ;AACN,SAAO;;;;;;;AAQX,SAAgB,aAAa,SAAwB;AACnD,KAAI;AACF,eAAa,QAAQ,wBAAwB,OAAO,QAAQ,CAAC;SACvD;AAKR,QAAO,cAAc,IAAI,YAAY,+BAA+B,EAClE,QAAQ,EAAE,WAAW,SAAS,EAC/B,CAAC,CAAC"}

package/dist/preview/previewTypes.js

@@ -0,0 +1,64 @@
+//#region src/preview/previewTypes.ts
+/**
+* Type guard to check if an element has temporal properties.
+*/
+function isTemporal(el) {
+	return "startTimeMs" in el && "endTimeMs" in el;
+}
+/**
+* Get temporal bounds for an element, treating invalid ranges as unbounded.
+* Invalid range (end <= start) means element hasn't computed its duration yet.
+*/
+function getTemporalBounds(el) {
+	if (!isTemporal(el)) return {
+		startMs: -Infinity,
+		endMs: Infinity
+	};
+	const startMs = el.startTimeMs ?? -Infinity;
+	const endMs = el.endTimeMs ?? Infinity;
+	if (endMs <= startMs) return {
+		startMs: -Infinity,
+		endMs: Infinity
+	};
+	return {
+		startMs,
+		endMs
+	};
+}
+/**
+* Check if an element is temporally visible at the given time.
+*/
+function isVisibleAtTime(element, timeMs) {
+	const { startMs, endMs } = getTemporalBounds(element);
+	return timeMs >= startMs && timeMs <= endMs;
+}
+/** Default timegroup dimensions when not measurable */
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1080;
+/** Default scale for thumbnail captures */
+const DEFAULT_THUMBNAIL_SCALE = .25;
+/** Default timeout for blocking content readiness mode (ms) */
+const DEFAULT_BLOCKING_TIMEOUT_MS = 5e3;
+/** JPEG quality settings for different canvas scales */
+const JPEG_QUALITY_HIGH = .95;
+const JPEG_QUALITY_MEDIUM = .85;
+/**
+* Create a preview container with standard styling.
+* Consolidates the repeated container creation pattern across preview functions.
+*/
+function createPreviewContainer(options) {
+	const { width, height, background = "#000", position = "relative" } = options;
+	const container = document.createElement("div");
+	container.style.cssText = `
+    width: ${width}px;
+    height: ${height}px;
+    position: ${position};
+    overflow: hidden;
+    background: ${background};
+  `;
+	return container;
+}
+
+//#endregion
+export { DEFAULT_BLOCKING_TIMEOUT_MS, DEFAULT_HEIGHT, DEFAULT_THUMBNAIL_SCALE, DEFAULT_WIDTH, JPEG_QUALITY_HIGH, JPEG_QUALITY_MEDIUM, createPreviewContainer, getTemporalBounds, isTemporal, isVisibleAtTime };
+//# sourceMappingURL=previewTypes.js.map

package/dist/preview/previewTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewTypes.js","names":[],"sources":["../../src/preview/previewTypes.ts"],"sourcesContent":["/**\n * Shared types and constants for preview rendering.\n * \n * Consolidates duplicate definitions from renderTimegroupToCanvas.ts and\n * renderTimegroupPreview.ts into a single source of truth.\n */\n\n// ============================================================================\n// Temporal Types\n// ============================================================================\n\n/**\n * Element with temporal properties (startTimeMs, endTimeMs).\n * Used for temporal visibility checks during preview rendering.\n */\nexport interface TemporalElement extends Element {\n  startTimeMs?: number;\n  endTimeMs?: number;\n  src?: string;\n}\n\n/**\n * Type guard to check if an element has temporal properties.\n */\nexport function isTemporal(el: Element): el is TemporalElement {\n  return \"startTimeMs\" in el && \"endTimeMs\" in el;\n}\n\n/**\n * Get temporal bounds for an element, treating invalid ranges as unbounded.\n * Invalid range (end <= start) means element hasn't computed its duration yet.\n */\nexport function getTemporalBounds(el: Element): { startMs: number; endMs: number } {\n  if (!isTemporal(el)) return { startMs: -Infinity, endMs: Infinity };\n\n  const startMs = el.startTimeMs ?? -Infinity;\n  const endMs = el.endTimeMs ?? Infinity;\n\n  // Invalid range (end <= start) means element hasn't computed its duration yet\n  if (endMs <= startMs) return { startMs: -Infinity, endMs: Infinity };\n\n  return { startMs, endMs };\n}\n\n/**\n * Check if an element is temporally visible at the given time.\n */\nexport function isVisibleAtTime(element: Element, timeMs: number): boolean {\n  const { startMs, endMs } = getTemporalBounds(element);\n  return timeMs >= startMs && timeMs <= endMs;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Default timegroup dimensions when not measurable */\nexport const DEFAULT_WIDTH = 1920;\nexport const DEFAULT_HEIGHT = 1080;\n\n/** Default scale for thumbnail captures */\nexport const DEFAULT_THUMBNAIL_SCALE = 0.25;\n\n/** Default timeout for blocking content readiness mode (ms) */\nexport const DEFAULT_BLOCKING_TIMEOUT_MS = 5000;\n\n/** JPEG quality settings for different canvas scales */\nexport const JPEG_QUALITY_HIGH = 0.95;\nexport const JPEG_QUALITY_MEDIUM = 0.85;\n\n// ============================================================================\n// Container Creation\n// ============================================================================\n\n/**\n * Options for creating a preview container.\n */\nexport interface PreviewContainerOptions {\n  width: number;\n  height: number;\n  background?: string;\n  position?: \"relative\" | \"absolute\" | \"fixed\";\n}\n\n/**\n * Create a preview container with standard styling.\n * Consolidates the repeated container creation pattern across preview functions.\n */\nexport function createPreviewContainer(options: PreviewContainerOptions): HTMLDivElement {\n  const { width, height, background = \"#000\", position = \"relative\" } = options;\n\n  const container = document.createElement(\"div\");\n  container.style.cssText = `\n    width: ${width}px;\n    height: ${height}px;\n    position: ${position};\n    overflow: hidden;\n    background: ${background};\n  `;\n  return container;\n}\n\n// ============================================================================\n// Style Injection\n// ============================================================================\n\n/**\n * Inject document styles into a container for foreignObject rendering.\n * SVG foreignObject needs all CSS rules inlined since it can't access\n * the document's stylesheets.\n */\nexport function injectDocumentStyles(\n  container: HTMLElement,\n  collectStyles: () => string,\n): HTMLStyleElement {\n  const styleEl = document.createElement(\"style\");\n  styleEl.textContent = collectStyles();\n  container.appendChild(styleEl);\n  return styleEl;\n}\n"],"mappings":";;;;AAwBA,SAAgB,WAAW,IAAoC;AAC7D,QAAO,iBAAiB,MAAM,eAAe;;;;;;AAO/C,SAAgB,kBAAkB,IAAiD;AACjF,KAAI,CAAC,WAAW,GAAG,CAAE,QAAO;EAAE,SAAS;EAAW,OAAO;EAAU;CAEnE,MAAM,UAAU,GAAG,eAAe;CAClC,MAAM,QAAQ,GAAG,aAAa;AAG9B,KAAI,SAAS,QAAS,QAAO;EAAE,SAAS;EAAW,OAAO;EAAU;AAEpE,QAAO;EAAE;EAAS;EAAO;;;;;AAM3B,SAAgB,gBAAgB,SAAkB,QAAyB;CACzE,MAAM,EAAE,SAAS,UAAU,kBAAkB,QAAQ;AACrD,QAAO,UAAU,WAAW,UAAU;;;AAQxC,MAAa,gBAAgB;AAC7B,MAAa,iBAAiB;;AAG9B,MAAa,0BAA0B;;AAGvC,MAAa,8BAA8B;;AAG3C,MAAa,oBAAoB;AACjC,MAAa,sBAAsB;;;;;AAoBnC,SAAgB,uBAAuB,SAAkD;CACvF,MAAM,EAAE,OAAO,QAAQ,aAAa,QAAQ,WAAW,eAAe;CAEtE,MAAM,YAAY,SAAS,cAAc,MAAM;AAC/C,WAAU,MAAM,UAAU;aACf,MAAM;cACL,OAAO;gBACL,SAAS;;kBAEP,WAAW;;AAE3B,QAAO"}