@editframe/elements 0.37.3-beta → 0.38.0

package/dist/render/EFRenderAPI.js

@@ -1,4 +1,3 @@
-import { renderTimegroupToVideo } from "../preview/renderTimegroupToVideo.js";
 import { getRenderInfo } from "../getRenderInfo.js";
 
 //#region src/render/EFRenderAPI.ts
@@ -15,47 +14,23 @@ function setWorkbenchRendering(rendering) {
 	if (workbench) workbench.rendering = rendering;
 }
 async function waitForTimegroupDimensions(timegroup) {
-	console.log("[EFRenderAPI] Waiting for stylesheets to load...");
-	console.log(`[EFRenderAPI] Found ${document.styleSheets.length} stylesheets`);
-	const styleLinks = Array.from(document.querySelectorAll("link[rel=\"stylesheet\"]"));
-	console.log(`[EFRenderAPI] Found ${styleLinks.length} stylesheet <link> elements`);
-	styleLinks.forEach((link, i) => {
-		const href = link.href;
-		const sheet = link.sheet;
-		console.log(`[EFRenderAPI]   [${i}] ${href}`);
-		try {
-			const rulesCount = sheet ? sheet.cssRules.length : 0;
-			console.log(`[EFRenderAPI]       loaded: ${!!sheet}, rules: ${rulesCount}`);
-			if (sheet && sheet.cssRules.length > 0) {
-				const firstRules = Array.from(sheet.cssRules).slice(0, 5).map((r) => r.cssText.substring(0, 100));
-				console.log(`[EFRenderAPI]       first rules:`, firstRules);
-				const hasWidthClass = Array.from(sheet.cssRules).some((r) => r.cssText.includes("w-\\[1080px\\]") || r.cssText.includes("width: 1080px"));
-				console.log(`[EFRenderAPI]       has w-[1080px] class: ${hasWidthClass}`);
-			}
-		} catch (e) {
-			console.log(`[EFRenderAPI]       Error reading stylesheet rules:`, e);
-		}
-	});
 	await Promise.all(Array.from(document.styleSheets).map((sheet) => {
 		if (sheet.href) {
 			const link = Array.from(document.querySelectorAll("link[rel=\"stylesheet\"]")).find((l) => l.href === sheet.href);
-			if (link && !link.sheet) {
-				console.log(`[EFRenderAPI] Waiting for stylesheet: ${sheet.href}`);
-				return new Promise((resolve) => {
-					link.addEventListener("load", resolve);
-					link.addEventListener("error", resolve);
-				});
-			}
+			if (link && !link.sheet) return new Promise((resolve) => {
+				link.addEventListener("load", resolve);
+				link.addEventListener("error", resolve);
+			});
 		}
 		return Promise.resolve();
 	}));
 	timegroup.offsetHeight;
-	if (!timegroup.offsetWidth || !timegroup.offsetHeight) {
-		const computedWidth = getComputedStyle(timegroup).width;
-		const computedHeight = getComputedStyle(timegroup).height;
-		throw new Error(`Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). Computed styles: width=${computedWidth}, height=${computedHeight}. Classes: "${timegroup.className}". \n\nTailwind CSS did not generate styles for these classes. Check that:\n1. Your Tailwind config 'content' array includes the HTML file\n2. Tailwind CSS is properly configured in your project\n3. The dev server successfully compiled CSS (check for Tailwind warnings above)`);
-	}
-	console.log(`[EFRenderAPI] Timegroup dimensions ready: ${timegroup.offsetWidth}x${timegroup.offsetHeight}`);
+	const rect = timegroup.getBoundingClientRect();
+	const hasOffset = timegroup.offsetWidth > 0 && timegroup.offsetHeight > 0;
+	const hasRect = rect.width > 0 && rect.height > 0;
+	const computedWidth = getComputedStyle(timegroup).width;
+	const computedHeight = getComputedStyle(timegroup).height;
+	if (!hasOffset && !hasRect && !(parseFloat(computedWidth) > 0 && parseFloat(computedHeight) > 0)) throw new Error(`Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). Computed styles: width=${computedWidth}, height=${computedHeight}. Classes: "${timegroup.className}". \n\nTailwind CSS did not generate styles for these classes. Check that:\n1. Your Tailwind config 'content' array includes the HTML file\n2. Tailwind CSS is properly configured in your project\n3. The dev server successfully compiled CSS (check for Tailwind warnings above)`);
 }
 const api = {
 	async renderStreaming(options = {}) {
@@ -67,10 +42,10 @@ const api = {
 			await waitForTimegroupDimensions(timegroup);
 			await timegroup.waitForMediaDurations();
 			const chunkWriter = new WritableStream({ write(chunk) {
-				console.error("Writing chunk", chunk);
 				if (window.onRenderChunk) window.onRenderChunk(chunk);
 			} });
 			const onProgress = options.onProgress || window.onRenderProgress;
+			const { renderTimegroupToVideo } = await import("../preview/renderTimegroupToVideo.js");
 			await renderTimegroupToVideo(timegroup, {
 				...options,
 				customWritableStream: chunkWriter,
@@ -89,6 +64,7 @@ const api = {
 			await waitForTimegroupDimensions(timegroup);
 			await timegroup.waitForMediaDurations();
 			const onProgress = options.onProgress || window.onRenderProgress;
+			const { renderTimegroupToVideo } = await import("../preview/renderTimegroupToVideo.js");
 			const buffer = await renderTimegroupToVideo(timegroup, {
 				...options,
 				returnBuffer: true,

package/dist/render/EFRenderAPI.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFRenderAPI.js","names":["api: IEFRenderAPI"],"sources":["../../src/render/EFRenderAPI.ts"],"sourcesContent":["/**\n * Window API for programmatic video rendering.\n * \n * Exposes renderTimegroupToVideo for use from Playwright/CLI.\n * Supports streaming output and custom data injection.\n */\n\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { EFWorkbench } from \"../gui/EFWorkbench.js\";\nimport { getRenderInfo, type RenderInfo } from \"../getRenderInfo.js\";\nimport {\n  renderTimegroupToVideo,\n  type RenderToVideoOptions,\n  type RenderProgress,\n} from \"../preview/renderTimegroupToVideo.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IEFRenderAPI {\n  /**\n   * Render with streaming output (calls window.onRenderChunk for each chunk).\n   * Use this for CLI/Playwright to avoid memory buffering.\n   */\n  renderStreaming(options?: RenderToVideoOptions): Promise<void>;\n\n  /**\n   * Render and return buffer (for shorter videos or in-browser use).\n   * Returns the video as Uint8Array.\n   */\n  render(options?: RenderToVideoOptions): Promise<Uint8Array>;\n\n  /**\n   * Get render info (dimensions, duration, assets).\n   * Same as the exported getRenderInfo function.\n   */\n  getRenderInfo(): Promise<RenderInfo>;\n\n  /**\n   * Check if SDK is ready for rendering.\n   * Returns true if a root timegroup is found.\n   */\n  isReady(): boolean;\n}\n\ndeclare global {\n  interface Window {\n    EF_RENDER?: IEFRenderAPI;\n    EF_RENDER_DATA?: Record<string, unknown>;\n    onRenderChunk?: (chunk: Uint8Array) => void; // Set by Playwright\n    onRenderProgress?: (progress: RenderProgress) => void; // Optional progress callback\n  }\n}\n\n// ============================================================================\n// Implementation\n// ============================================================================\n\nfunction findRootTimegroup(): EFTimegroup | null {\n  // Try to find timegroup from workbench first\n  const workbench = document.querySelector(\"ef-workbench\") as EFWorkbench | null;\n  if (workbench) {\n    const timegroup = workbench.querySelector(\"ef-timegroup\") as EFTimegroup | null;\n    if (timegroup) {\n      return timegroup;\n    }\n  }\n\n  // Fallback: find first root timegroup\n  const rootTimegroup = document.querySelector(\"ef-timegroup\") as EFTimegroup | null;\n  return rootTimegroup;\n}\n\nfunction setWorkbenchRendering(rendering: boolean): void {\n  const workbench = document.querySelector(\"ef-workbench\") as EFWorkbench | null;\n  if (workbench) {\n    workbench.rendering = rendering;\n  }\n}\n\nasync function waitForTimegroupDimensions(timegroup: EFTimegroup): Promise<void> {\n  // Wait for all stylesheets to load first\n  console.log('[EFRenderAPI] Waiting for stylesheets to load...');\n  console.log(`[EFRenderAPI] Found ${document.styleSheets.length} stylesheets`);\n  \n  const styleLinks = Array.from(document.querySelectorAll('link[rel=\"stylesheet\"]'));\n  console.log(`[EFRenderAPI] Found ${styleLinks.length} stylesheet <link> elements`);\n  styleLinks.forEach((link, i) => {\n    const href = (link as HTMLLinkElement).href;\n    const sheet = (link as HTMLLinkElement).sheet;\n    console.log(`[EFRenderAPI]   [${i}] ${href}`);\n    try {\n      const rulesCount = sheet ? sheet.cssRules.length : 0;\n      console.log(`[EFRenderAPI]       loaded: ${!!sheet}, rules: ${rulesCount}`);\n      if (sheet && sheet.cssRules.length > 0) {\n        // Log first few rules to see what CSS is loaded\n        const firstRules = Array.from(sheet.cssRules).slice(0, 5).map(r => r.cssText.substring(0, 100));\n        console.log(`[EFRenderAPI]       first rules:`, firstRules);\n        \n        // Search for the specific Tailwind classes we need\n        const hasWidthClass = Array.from(sheet.cssRules).some(r => \n          r.cssText.includes('w-\\\\[1080px\\\\]') || r.cssText.includes('width: 1080px')\n        );\n        console.log(`[EFRenderAPI]       has w-[1080px] class: ${hasWidthClass}`);\n      }\n    } catch (e) {\n      console.log(`[EFRenderAPI]       Error reading stylesheet rules:`, e);\n    }\n  });\n  \n  await Promise.all(\n    Array.from(document.styleSheets).map((sheet) => {\n      if (sheet.href) {\n        // Check if stylesheet is from a <link> tag and wait for it\n        const link = Array.from(document.querySelectorAll('link[rel=\"stylesheet\"]')).find(\n          (l) => (l as HTMLLinkElement).href === sheet.href\n        );\n        if (link && !(link as HTMLLinkElement).sheet) {\n          console.log(`[EFRenderAPI] Waiting for stylesheet: ${sheet.href}`);\n          return new Promise((resolve) => {\n            link.addEventListener('load', resolve);\n            link.addEventListener('error', resolve);\n          });\n        }\n      }\n      return Promise.resolve();\n    })\n  );\n  \n  // Force layout immediately after stylesheets load\n  void timegroup.offsetHeight;\n  \n  if (!timegroup.offsetWidth || !timegroup.offsetHeight) {\n    const computedWidth = getComputedStyle(timegroup).width;\n    const computedHeight = getComputedStyle(timegroup).height;\n    \n    throw new Error(\n      `Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). ` +\n      `Computed styles: width=${computedWidth}, height=${computedHeight}. ` +\n      `Classes: \"${timegroup.className}\". ` +\n      `\\n\\nTailwind CSS did not generate styles for these classes. ` +\n      `Check that:\\n` +\n      `1. Your Tailwind config 'content' array includes the HTML file\\n` +\n      `2. Tailwind CSS is properly configured in your project\\n` +\n      `3. The dev server successfully compiled CSS (check for Tailwind warnings above)`\n    );\n  }\n  \n  console.log(`[EFRenderAPI] Timegroup dimensions ready: ${timegroup.offsetWidth}x${timegroup.offsetHeight}`);\n}\n\nconst api: IEFRenderAPI = {\n  async renderStreaming(options: RenderToVideoOptions = {}): Promise<void> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Check if window.onRenderChunk is available\n    if (typeof window === \"undefined\" || !window.onRenderChunk) {\n      throw new Error(\n        \"window.onRenderChunk is not set. \" +\n        \"Call page.exposeFunction('onRenderChunk', callback) from Playwright first.\"\n      );\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n      \n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Create custom writable stream that calls window.onRenderChunk\n      const chunkWriter = new WritableStream<Uint8Array>({\n        write(chunk: Uint8Array) {\n          console.error(\"Writing chunk\", chunk);\n          if (window.onRenderChunk) {\n            window.onRenderChunk(chunk);\n          }\n        },\n      });\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Render with custom stream\n      await renderTimegroupToVideo(timegroup, {\n        ...options,\n        customWritableStream: chunkWriter,\n        onProgress,\n        returnBuffer: false,\n      });\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async render(options: RenderToVideoOptions = {}): Promise<Uint8Array> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n      \n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      const buffer = await renderTimegroupToVideo(timegroup, {\n        ...options,\n        returnBuffer: true,\n        onProgress,\n      });\n\n      if (!buffer) {\n        throw new Error(\"Render failed: no buffer returned\");\n      }\n\n      return buffer;\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async getRenderInfo(): Promise<RenderInfo> {\n    return getRenderInfo();\n  },\n\n  isReady(): boolean {\n    return findRootTimegroup() !== null;\n  },\n};\n\n// Export and register on window\nif (typeof window !== \"undefined\") {\n  window.EF_RENDER = api;\n}\n\nexport { api as EFRenderAPI };\nexport type { IEFRenderAPI as EFRenderAPIInterface };\n"],"mappings":"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"}
+{"version":3,"file":"EFRenderAPI.js","names":["api: IEFRenderAPI"],"sources":["../../src/render/EFRenderAPI.ts"],"sourcesContent":["/**\n * Window API for programmatic video rendering.\n *\n * Exposes renderTimegroupToVideo for use from Playwright/CLI.\n * Supports streaming output and custom data injection.\n */\n\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { EFWorkbench } from \"../gui/EFWorkbench.js\";\nimport { getRenderInfo, type RenderInfo } from \"../getRenderInfo.js\";\n// Import only types - actual function loaded dynamically\nimport type {\n  RenderToVideoOptions,\n  RenderProgress,\n} from \"../preview/renderTimegroupToVideo.types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IEFRenderAPI {\n  /**\n   * Render with streaming output (calls window.onRenderChunk for each chunk).\n   * Use this for CLI/Playwright to avoid memory buffering.\n   */\n  renderStreaming(options?: RenderToVideoOptions): Promise<void>;\n\n  /**\n   * Render and return buffer (for shorter videos or in-browser use).\n   * Returns the video as Uint8Array.\n   */\n  render(options?: RenderToVideoOptions): Promise<Uint8Array>;\n\n  /**\n   * Get render info (dimensions, duration, assets).\n   * Same as the exported getRenderInfo function.\n   */\n  getRenderInfo(): Promise<RenderInfo>;\n\n  /**\n   * Check if SDK is ready for rendering.\n   * Returns true if a root timegroup is found.\n   */\n  isReady(): boolean;\n}\n\ndeclare global {\n  interface Window {\n    EF_RENDER?: IEFRenderAPI;\n    EF_RENDER_DATA?: Record<string, unknown>;\n    onRenderChunk?: (chunk: Uint8Array) => void; // Set by Playwright\n    onRenderProgress?: (progress: RenderProgress) => void; // Optional progress callback\n  }\n}\n\n// ============================================================================\n// Implementation\n// ============================================================================\n\nfunction findRootTimegroup(): EFTimegroup | null {\n  // Try to find timegroup from workbench first\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    const timegroup = workbench.querySelector(\n      \"ef-timegroup\",\n    ) as EFTimegroup | null;\n    if (timegroup) {\n      return timegroup;\n    }\n  }\n\n  // Fallback: find first root timegroup\n  const rootTimegroup = document.querySelector(\n    \"ef-timegroup\",\n  ) as EFTimegroup | null;\n  return rootTimegroup;\n}\n\nfunction setWorkbenchRendering(rendering: boolean): void {\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    workbench.rendering = rendering;\n  }\n}\n\nasync function waitForTimegroupDimensions(\n  timegroup: EFTimegroup,\n): Promise<void> {\n  await Promise.all(\n    Array.from(document.styleSheets).map((sheet) => {\n      if (sheet.href) {\n        const link = Array.from(\n          document.querySelectorAll('link[rel=\"stylesheet\"]'),\n        ).find((l) => (l as HTMLLinkElement).href === sheet.href);\n        if (link && !(link as HTMLLinkElement).sheet) {\n          return new Promise((resolve) => {\n            link.addEventListener(\"load\", resolve);\n            link.addEventListener(\"error\", resolve);\n          });\n        }\n      }\n      return Promise.resolve();\n    }),\n  );\n\n  // Force layout immediately after stylesheets load\n  void timegroup.offsetHeight;\n\n  const rect = timegroup.getBoundingClientRect();\n  const hasOffset = timegroup.offsetWidth > 0 && timegroup.offsetHeight > 0;\n  const hasRect = rect.width > 0 && rect.height > 0;\n  const computedWidth = getComputedStyle(timegroup).width;\n  const computedHeight = getComputedStyle(timegroup).height;\n  const hasComputed =\n    parseFloat(computedWidth) > 0 && parseFloat(computedHeight) > 0;\n\n  if (!hasOffset && !hasRect && !hasComputed) {\n    throw new Error(\n      `Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). ` +\n        `Computed styles: width=${computedWidth}, height=${computedHeight}. ` +\n        `Classes: \"${timegroup.className}\". ` +\n        `\\n\\nTailwind CSS did not generate styles for these classes. ` +\n        `Check that:\\n` +\n        `1. Your Tailwind config 'content' array includes the HTML file\\n` +\n        `2. Tailwind CSS is properly configured in your project\\n` +\n        `3. The dev server successfully compiled CSS (check for Tailwind warnings above)`,\n    );\n  }\n\n}\n\nconst api: IEFRenderAPI = {\n  async renderStreaming(options: RenderToVideoOptions = {}): Promise<void> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Check if window.onRenderChunk is available\n    if (typeof window === \"undefined\" || !window.onRenderChunk) {\n      throw new Error(\n        \"window.onRenderChunk is not set. \" +\n          \"Call page.exposeFunction('onRenderChunk', callback) from Playwright first.\",\n      );\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Create custom writable stream that calls window.onRenderChunk\n      const chunkWriter = new WritableStream<Uint8Array>({\n        write(chunk: Uint8Array) {\n          if (window.onRenderChunk) {\n            window.onRenderChunk(chunk);\n          }\n        },\n      });\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Render with custom stream\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      await renderTimegroupToVideo(timegroup, {\n        ...options,\n        customWritableStream: chunkWriter,\n        onProgress,\n        returnBuffer: false,\n      });\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async render(options: RenderToVideoOptions = {}): Promise<Uint8Array> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      const buffer = await renderTimegroupToVideo(timegroup, {\n        ...options,\n        returnBuffer: true,\n        onProgress,\n      });\n\n      if (!buffer) {\n        throw new Error(\"Render failed: no buffer returned\");\n      }\n\n      return buffer;\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async getRenderInfo(): Promise<RenderInfo> {\n    return getRenderInfo();\n  },\n\n  isReady(): boolean {\n    return findRootTimegroup() !== null;\n  },\n};\n\n// Export and register on window\nif (typeof window !== \"undefined\") {\n  window.EF_RENDER = api;\n}\n\nexport { api as EFRenderAPI };\nexport type { IEFRenderAPI as EFRenderAPIInterface };\n"],"mappings":";;;AA2DA,SAAS,oBAAwC;CAE/C,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,WAAW;EACb,MAAM,YAAY,UAAU,cAC1B,eACD;AACD,MAAI,UACF,QAAO;;AAQX,QAHsB,SAAS,cAC7B,eACD;;AAIH,SAAS,sBAAsB,WAA0B;CACvD,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,UACF,WAAU,YAAY;;AAI1B,eAAe,2BACb,WACe;AACf,OAAM,QAAQ,IACZ,MAAM,KAAK,SAAS,YAAY,CAAC,KAAK,UAAU;AAC9C,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,MAAM,KACjB,SAAS,iBAAiB,2BAAyB,CACpD,CAAC,MAAM,MAAO,EAAsB,SAAS,MAAM,KAAK;AACzD,OAAI,QAAQ,CAAE,KAAyB,MACrC,QAAO,IAAI,SAAS,YAAY;AAC9B,SAAK,iBAAiB,QAAQ,QAAQ;AACtC,SAAK,iBAAiB,SAAS,QAAQ;KACvC;;AAGN,SAAO,QAAQ,SAAS;GACxB,CACH;AAGD,CAAK,UAAU;CAEf,MAAM,OAAO,UAAU,uBAAuB;CAC9C,MAAM,YAAY,UAAU,cAAc,KAAK,UAAU,eAAe;CACxE,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS;CAChD,MAAM,gBAAgB,iBAAiB,UAAU,CAAC;CAClD,MAAM,iBAAiB,iBAAiB,UAAU,CAAC;AAInD,KAAI,CAAC,aAAa,CAAC,WAAW,EAF5B,WAAW,cAAc,GAAG,KAAK,WAAW,eAAe,GAAG,GAG9D,OAAM,IAAI,MACR,gCAAgC,UAAU,YAAY,GAAG,UAAU,aAAa,4BACpD,cAAc,WAAW,eAAe,cACrD,UAAU,UAAU,qRAMpC;;AAKL,MAAMA,MAAoB;CACxB,MAAM,gBAAgB,UAAgC,EAAE,EAAiB;EACvE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,cAC3C,OAAM,IAAI,MACR,8GAED;AAIH,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,cAAc,IAAI,eAA2B,EACjD,MAAM,OAAmB;AACvB,QAAI,OAAO,cACT,QAAO,cAAc,MAAM;MAGhC,CAAC;GAGF,MAAM,aAAa,QAAQ,cAAc,OAAO;GAIhD,MAAM,EAAE,2BACN,MAAM,OAAO;AACf,SAAM,uBAAuB,WAAW;IACtC,GAAG;IACH,sBAAsB;IACtB;IACA,cAAc;IACf,CAAC;YACM;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,OAAO,UAAgC,EAAE,EAAuB;EACpE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,aAAa,QAAQ,cAAc,OAAO;GAGhD,MAAM,EAAE,2BACN,MAAM,OAAO;GACf,MAAM,SAAS,MAAM,uBAAuB,WAAW;IACrD,GAAG;IACH,cAAc;IACd;IACD,CAAC;AAEF,OAAI,CAAC,OACH,OAAM,IAAI,MAAM,oCAAoC;AAGtD,UAAO;YACC;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,gBAAqC;AACzC,SAAO,eAAe;;CAGxB,UAAmB;AACjB,SAAO,mBAAmB,KAAK;;CAElC;AAGD,IAAI,OAAO,WAAW,YACpB,QAAO,YAAY"}

package/dist/render/getRenderData.js

@@ -1,18 +1,18 @@
 //#region src/render/getRenderData.ts
 /**
 * Get custom render data that was passed to the render process.
-* 
+*
 * @returns The render data object, or undefined if no data was provided
-* 
+*
 * @example
 * ```typescript
 * import { getRenderData } from "@editframe/elements";
-* 
+*
 * interface MyRenderData {
 *   userName: string;
 *   theme: "light" | "dark";
 * }
-* 
+*
 * const data = getRenderData<MyRenderData>();
 * if (data) {
 *   console.log(data.userName);  // "John"

package/dist/render/getRenderData.js.map

@@ -1 +1 @@
-{"version":3,"file":"getRenderData.js","names":[],"sources":["../../src/render/getRenderData.ts"],"sourcesContent":["/**\n * Helper function for compositions to read custom render data.\n * \n * Supports both runtime data (set by Playwright/CLI via window.EF_RENDER_DATA)\n * and build-time data (set by Vite define as RENDER_DATA).\n */\n\n// Declare RENDER_DATA for TypeScript (set via Vite define at build time)\ndeclare const RENDER_DATA: unknown | undefined;\n\n/**\n * Get custom render data that was passed to the render process.\n * \n * @returns The render data object, or undefined if no data was provided\n * \n * @example\n * ```typescript\n * import { getRenderData } from \"@editframe/elements\";\n * \n * interface MyRenderData {\n *   userName: string;\n *   theme: \"light\" | \"dark\";\n * }\n * \n * const data = getRenderData<MyRenderData>();\n * if (data) {\n *   console.log(data.userName);  // \"John\"\n * }\n * ```\n */\nexport function getRenderData<T = unknown>(): T | undefined {\n  // Runtime data (set by Playwright/CLI)\n  if (typeof window !== \"undefined\" && window.EF_RENDER_DATA) {\n    return window.EF_RENDER_DATA as T;\n  }\n  \n  // Build-time data (set by Vite define)\n  if (typeof RENDER_DATA !== \"undefined\") {\n    return RENDER_DATA as T;\n  }\n  \n  return undefined;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,gBAA4C;AAE1D,KAAI,OAAO,WAAW,eAAe,OAAO,eAC1C,QAAO,OAAO;AAIhB,KAAI,OAAO,gBAAgB,YACzB,QAAO"}
+{"version":3,"file":"getRenderData.js","names":[],"sources":["../../src/render/getRenderData.ts"],"sourcesContent":["/**\n * Helper function for compositions to read custom render data.\n *\n * Supports both runtime data (set by Playwright/CLI via window.EF_RENDER_DATA)\n * and build-time data (set by Vite define as RENDER_DATA).\n */\n\n// Declare RENDER_DATA for TypeScript (set via Vite define at build time)\ndeclare const RENDER_DATA: unknown | undefined;\n\n/**\n * Get custom render data that was passed to the render process.\n *\n * @returns The render data object, or undefined if no data was provided\n *\n * @example\n * ```typescript\n * import { getRenderData } from \"@editframe/elements\";\n *\n * interface MyRenderData {\n *   userName: string;\n *   theme: \"light\" | \"dark\";\n * }\n *\n * const data = getRenderData<MyRenderData>();\n * if (data) {\n *   console.log(data.userName);  // \"John\"\n * }\n * ```\n */\nexport function getRenderData<T = unknown>(): T | undefined {\n  // Runtime data (set by Playwright/CLI)\n  if (typeof window !== \"undefined\" && window.EF_RENDER_DATA) {\n    return window.EF_RENDER_DATA as T;\n  }\n\n  // Build-time data (set by Vite define)\n  if (typeof RENDER_DATA !== \"undefined\") {\n    return RENDER_DATA as T;\n  }\n\n  return undefined;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,gBAA4C;AAE1D,KAAI,OAAO,WAAW,eAAe,OAAO,eAC1C,QAAO,OAAO;AAIhB,KAAI,OAAO,gBAAgB,YACzB,QAAO"}

package/dist/style.css

@@ -1,5 +1,8 @@
+/* Import theme tokens first so they're available to all components */
+@import "./gui/ef-theme.css";
+
 /* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-*, ::before, ::after {
+*, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -52,7 +55,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-::backdrop {
+::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -433,348 +436,296 @@ video {
   display: none;
 }
 /* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-.\!container {
+.\!container{
   width: 100% !important;
 }
-.container {
+.container{
   width: 100%;
 }
-@media (min-width: 640px) {
-  .\!container {
+@media (min-width: 640px){
+  .\!container{
     max-width: 640px !important;
   }
-  .container {
+  .container{
     max-width: 640px;
   }
 }
-@media (min-width: 768px) {
-  .\!container {
+@media (min-width: 768px){
+  .\!container{
     max-width: 768px !important;
   }
-  .container {
+  .container{
     max-width: 768px;
   }
 }
-@media (min-width: 1024px) {
-  .\!container {
+@media (min-width: 1024px){
+  .\!container{
     max-width: 1024px !important;
   }
-  .container {
+  .container{
     max-width: 1024px;
   }
 }
-@media (min-width: 1280px) {
-  .\!container {
+@media (min-width: 1280px){
+  .\!container{
     max-width: 1280px !important;
   }
-  .container {
+  .container{
     max-width: 1280px;
   }
 }
-@media (min-width: 1536px) {
-  .\!container {
+@media (min-width: 1536px){
+  .\!container{
     max-width: 1536px !important;
   }
-  .container {
+  .container{
     max-width: 1536px;
   }
 }
 /* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-.\!visible {
-  visibility: visible !important;
-}
-.visible {
+.visible{
   visibility: visible;
 }
-.invisible {
+.invisible{
   visibility: hidden;
 }
-.collapse {
+.collapse{
   visibility: collapse;
 }
-.static {
+.static{
   position: static;
 }
-.fixed {
+.fixed{
   position: fixed;
 }
-.absolute {
+.absolute{
   position: absolute;
 }
-.relative {
+.relative{
   position: relative;
 }
-.sticky {
+.sticky{
   position: sticky;
 }
-.inset-0 {
+.inset-0{
   inset: 0px;
 }
-.left-0 {
+.left-0{
   left: 0px;
 }
-.top-0 {
+.right-0{
+  right: 0px;
+}
+.top-0{
   top: 0px;
 }
-.isolate {
+.top-8{
+  top: 2rem;
+}
+.isolate{
   isolation: isolate;
 }
-.z-\[5\] {
+.z-\[5\]{
   z-index: 5;
 }
-.mb-0 {
+.mb-0{
   margin-bottom: 0px;
 }
-.mb-\[1px\] {
+.mb-\[1px\]{
   margin-bottom: 1px;
 }
-.block {
+.block{
   display: block;
 }
-.inline-block {
+.inline-block{
   display: inline-block;
 }
-.inline {
+.inline{
   display: inline;
 }
-.flex {
+.flex{
   display: flex;
 }
-.inline-flex {
+.inline-flex{
   display: inline-flex;
 }
-.table {
+.table{
   display: table;
 }
-.grid {
+.grid{
   display: grid;
 }
-.inline-grid {
+.inline-grid{
   display: inline-grid;
 }
-.contents {
+.contents{
   display: contents;
 }
-.hidden {
+.hidden{
   display: none;
 }
-.size-full {
+.size-full{
   width: 100%;
   height: 100%;
 }
-.h-\[1\.1rem\] {
+.h-\[1\.1rem\]{
   height: 1.1rem;
 }
-.h-\[1080px\] {
+.h-\[1080px\]{
   height: 1080px;
 }
-.h-\[200px\] {
-  height: 200px;
-}
-.h-\[270px\] {
-  height: 270px;
-}
-.h-\[300px\] {
-  height: 300px;
-}
-.h-\[360px\] {
-  height: 360px;
-}
-.h-\[400px\] {
-  height: 400px;
-}
-.h-\[500px\] {
+.h-\[500px\]{
   height: 500px;
 }
-.h-\[5px\] {
+.h-\[5px\]{
   height: 5px;
 }
-.h-full {
+.h-\[calc\(50vh-4rem\)\]{
+  height: calc(50vh - 4rem);
+}
+.h-full{
   height: 100%;
 }
-.w-1 {
+.w-1{
   width: 0.25rem;
 }
-.w-\[1000px\] {
+.w-\[1000px\]{
   width: 1000px;
 }
-.w-\[1080px\] {
-  width: 1080px;
-}
-.w-\[1920px\] {
+.w-\[1920px\]{
   width: 1920px;
 }
-.w-\[200px\] {
-  width: 200px;
-}
-.w-\[420px\] {
+.w-\[420px\]{
   width: 420px;
 }
-.w-\[480px\] {
-  width: 480px;
-}
-.w-\[600px\] {
-  width: 600px;
-}
-.w-\[640px\] {
-  width: 640px;
-}
-.w-full {
+.w-full{
   width: 100%;
 }
-.flex-shrink {
+.flex-1{
+  flex: 1 1 0%;
+}
+.flex-shrink{
   flex-shrink: 1;
 }
-.shrink {
+.shrink{
   flex-shrink: 1;
 }
-.\!transform {
+.\!transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
-.transform {
+.transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.cursor-grabbing {
-  cursor: grabbing;
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.resize {
+.resize{
   resize: both;
 }
-.flex-row {
-  flex-direction: row;
-}
-.flex-wrap {
+.flex-wrap{
   flex-wrap: wrap;
 }
-.items-center {
+.items-center{
   align-items: center;
 }
-.gap-2 {
-  gap: 0.5rem;
-}
-.overflow-hidden {
+.overflow-hidden{
   overflow: hidden;
 }
-.overflow-visible {
+.overflow-visible{
   overflow: visible;
 }
-.whitespace-nowrap {
+.whitespace-nowrap{
   white-space: nowrap;
 }
-.text-nowrap {
+.text-nowrap{
   text-wrap: nowrap;
 }
-.rounded {
+.rounded{
   border-radius: 0.25rem;
 }
-.border {
+.border{
   border-width: 1px;
 }
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-.bg-lime-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));
-}
-.bg-slate-500 {
+.bg-slate-500{
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
 }
-.bg-yellow-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
-}
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
+.object-cover{
+  -o-object-fit: cover;
+     object-fit: cover;
 }
-.p-4 {
-  padding: 1rem;
-}
-.px-0\.5 {
+.px-0\.5{
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.text-center {
+.text-center{
   text-align: center;
 }
-.text-\[8px\] {
+.text-3xl{
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.text-\[8px\]{
   font-size: 8px;
 }
-.text-sm {
+.text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-xs {
+.text-xs{
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.font-bold {
+.font-bold{
   font-weight: 700;
 }
-.uppercase {
+.uppercase{
   text-transform: uppercase;
 }
-.capitalize {
+.capitalize{
   text-transform: capitalize;
 }
-.italic {
+.italic{
   font-style: italic;
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
-}
-.text-green-200 {
-  --tw-text-opacity: 1;
-  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
-}
-.text-green-900 {
+.text-white{
   --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.opacity-50 {
+.opacity-50{
   opacity: 0.5;
 }
-.shadow {
+.shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline {
+.outline{
   outline-style: solid;
 }
-.blur {
+.blur{
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.drop-shadow {
-  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+.grayscale{
+  --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.filter {
+.filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.backdrop-filter {
+.backdrop-filter{
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.transition {
+.transition{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.ease-in {
+.ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
-.ease-in-out {
+.ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out {
+.ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 

package/dist/transcoding/cache/RequestDeduplicator.js

@@ -17,6 +17,7 @@ var RequestDeduplicator = class {
 		if (existingRequest) return existingRequest;
 		const requestPromise = requestFactory();
 		this.pendingRequests.set(key, requestPromise);
+		requestPromise.catch(() => {});
 		try {
 			const result = await requestPromise;
 			this.pendingRequests.delete(key);

package/dist/transcoding/cache/RequestDeduplicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestDeduplicator.js","names":[],"sources":["../../../src/transcoding/cache/RequestDeduplicator.ts"],"sourcesContent":["/**\n * Request deduplication utility\n * Manages pending requests to prevent concurrent duplicate requests\n */\n\nexport class RequestDeduplicator {\n  private pendingRequests = new Map<string, Promise<any>>();\n\n  /**\n   * Execute a request with deduplication\n   * If a request with the same key is already pending, return the existing promise\n   * Otherwise, execute the request factory and track the promise\n   */\n  async executeRequest<T>(\n    key: string,\n    requestFactory: () => Promise<T>,\n  ): Promise<T> {\n    // Check if there's already a pending request for this key\n    const existingRequest = this.pendingRequests.get(key);\n    if (existingRequest) {\n      return existingRequest;\n    }\n\n    // Create and track the new request\n    const requestPromise = requestFactory();\n    this.pendingRequests.set(key, requestPromise);\n\n    try {\n      const result = await requestPromise;\n      this.pendingRequests.delete(key);\n      return result;\n    } catch (error) {\n      this.pendingRequests.delete(key);\n      throw error;\n    }\n  }\n\n  /**\n   * Clear all pending requests (used in cache clearing)\n   */\n  clear(): void {\n    this.pendingRequests.clear();\n  }\n\n  /**\n   * Get number of pending requests\n   */\n  getPendingCount(): number {\n    return this.pendingRequests.size;\n  }\n\n  /**\n   * Check if a request is pending\n   */\n  isPending(key: string): boolean {\n    return this.pendingRequests.has(key);\n  }\n\n  /**\n   * Get all pending request keys\n   */\n  getPendingKeys(): string[] {\n    return Array.from(this.pendingRequests.keys());\n  }\n}\n"],"mappings":";;;;;AAKA,IAAa,sBAAb,MAAiC;;yCACL,IAAI,KAA2B;;;;;;;CAOzD,MAAM,eACJ,KACA,gBACY;EAEZ,MAAM,kBAAkB,KAAK,gBAAgB,IAAI,IAAI;AACrD,MAAI,gBACF,QAAO;EAIT,MAAM,iBAAiB,gBAAgB;AACvC,OAAK,gBAAgB,IAAI,KAAK,eAAe;AAE7C,MAAI;GACF,MAAM,SAAS,MAAM;AACrB,QAAK,gBAAgB,OAAO,IAAI;AAChC,UAAO;WACA,OAAO;AACd,QAAK,gBAAgB,OAAO,IAAI;AAChC,SAAM;;;;;;CAOV,QAAc;AACZ,OAAK,gBAAgB,OAAO;;;;;CAM9B,kBAA0B;AACxB,SAAO,KAAK,gBAAgB;;;;;CAM9B,UAAU,KAAsB;AAC9B,SAAO,KAAK,gBAAgB,IAAI,IAAI;;;;;CAMtC,iBAA2B;AACzB,SAAO,MAAM,KAAK,KAAK,gBAAgB,MAAM,CAAC"}
+{"version":3,"file":"RequestDeduplicator.js","names":[],"sources":["../../../src/transcoding/cache/RequestDeduplicator.ts"],"sourcesContent":["/**\n * Request deduplication utility\n * Manages pending requests to prevent concurrent duplicate requests\n */\n\nexport class RequestDeduplicator {\n  private pendingRequests = new Map<string, Promise<any>>();\n\n  /**\n   * Execute a request with deduplication\n   * If a request with the same key is already pending, return the existing promise\n   * Otherwise, execute the request factory and track the promise\n   */\n  async executeRequest<T>(\n    key: string,\n    requestFactory: () => Promise<T>,\n  ): Promise<T> {\n    // Check if there's already a pending request for this key\n    const existingRequest = this.pendingRequests.get(key);\n    if (existingRequest) {\n      return existingRequest;\n    }\n\n    // Create and track the new request\n    const requestPromise = requestFactory();\n    this.pendingRequests.set(key, requestPromise);\n\n    // Prevent unhandled rejection on the raw factory promise. Chrome's V8\n    // may detect a rejection as unhandled if no synchronous .catch() is\n    // attached before any microtask boundary, even when the promise is\n    // currently being await-ed. The error still propagates via the try/catch.\n    requestPromise.catch(() => {});\n\n    try {\n      const result = await requestPromise;\n      this.pendingRequests.delete(key);\n      return result;\n    } catch (error) {\n      this.pendingRequests.delete(key);\n      throw error;\n    }\n  }\n\n  /**\n   * Clear all pending requests (used in cache clearing)\n   */\n  clear(): void {\n    this.pendingRequests.clear();\n  }\n\n  /**\n   * Get number of pending requests\n   */\n  getPendingCount(): number {\n    return this.pendingRequests.size;\n  }\n\n  /**\n   * Check if a request is pending\n   */\n  isPending(key: string): boolean {\n    return this.pendingRequests.has(key);\n  }\n\n  /**\n   * Get all pending request keys\n   */\n  getPendingKeys(): string[] {\n    return Array.from(this.pendingRequests.keys());\n  }\n}\n"],"mappings":";;;;;AAKA,IAAa,sBAAb,MAAiC;;yCACL,IAAI,KAA2B;;;;;;;CAOzD,MAAM,eACJ,KACA,gBACY;EAEZ,MAAM,kBAAkB,KAAK,gBAAgB,IAAI,IAAI;AACrD,MAAI,gBACF,QAAO;EAIT,MAAM,iBAAiB,gBAAgB;AACvC,OAAK,gBAAgB,IAAI,KAAK,eAAe;AAM7C,iBAAe,YAAY,GAAG;AAE9B,MAAI;GACF,MAAM,SAAS,MAAM;AACrB,QAAK,gBAAgB,OAAO,IAAI;AAChC,UAAO;WACA,OAAO;AACd,QAAK,gBAAgB,OAAO,IAAI;AAChC,SAAM;;;;;;CAOV,QAAc;AACZ,OAAK,gBAAgB,OAAO;;;;;CAM9B,kBAA0B;AACxB,SAAO,KAAK,gBAAgB;;;;;CAM9B,UAAU,KAAsB;AAC9B,SAAO,KAAK,gBAAgB,IAAI,IAAI;;;;;CAMtC,iBAA2B;AACzB,SAAO,MAAM,KAAK,KAAK,gBAAgB,MAAM,CAAC"}