@playruo/embed 1.2.1 → 1.2.4

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,15 +17,24 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  EmbedTester: () => EmbedTester,
   PlayruoEmbed: () => PlayruoEmbed,
   buildEmbedUrl: () => buildEmbedUrl,
-  isPlayruoEmbedCommand: () => isPlayruoEmbedCommand,
-  isPlayruoEmbedMessage: () => isPlayruoEmbedMessage
+  isPlayruoEmbedMessage: () => isPlayruoEmbedMessage,
+  isPlayruoInternalMessage: () => isPlayruoInternalMessage
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -65,9 +76,7 @@ var PlayruoEmbed = ({
   const [isMobile, setIsMobile] = (0, import_react.useState)(false);
   const [isValidChromium, setIsValidChromium] = (0, import_react.useState)(true);
   const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
-  const escapeKeyTimer = (0, import_react.useRef)(null);
-  const escapeKeyPressed = (0, import_react.useRef)(false);
-  const ESCAPE_HOLD_DURATION = 1500;
+  const [iframeState, setIframeState] = (0, import_react.useState)(null);
   const src = (0, import_react.useMemo)(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
   (0, import_react.useEffect)(() => {
     if (typeof window === "undefined") return;
@@ -85,69 +94,22 @@ var PlayruoEmbed = ({
   }, []);
   const isCompatible = !isMobile && isValidChromium;
   const isReady = isCompatible ? isIframeLoaded : true;
-  const currentState = (0, import_react.useMemo)(() => ({
-    hasPlayedOnce,
-    tryNow: {
-      available: isCompatible,
-      status: !isCompatible ? "Browser not compatible" : hasPlayedOnce ? "Click to replay" : "Ready"
-    },
-    buyNow: {
-      available: true,
-      status: "Ready"
-    }
-  }), [hasPlayedOnce, isCompatible]);
-  const checkKeyboardLockPermission = async () => {
-    if (!navigator.permissions) {
-      console.log("[PlayruoEmbed] Permissions API not supported");
-      return false;
-    }
-    try {
-      const { state } = await navigator.permissions.query({
-        name: "keyboard-lock"
-      });
-      if (state === "granted" || state === "prompt") {
-        console.log(`[PlayruoEmbed] Keyboard lock permission: ${state}`);
-        return true;
-      }
-      console.log("[PlayruoEmbed] Keyboard lock permission denied");
-      return false;
-    } catch (error) {
-      console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
-      return false;
-    }
-  };
-  const requestFullscreenWithKeyboardLock = async () => {
-    const iframe = iframeRef.current;
-    if (!iframe?.requestFullscreen) {
-      console.log("[PlayruoEmbed] Fullscreen not supported on this browser");
-      return false;
+  const currentState = (0, import_react.useMemo)(() => {
+    if (iframeState) {
+      return iframeState;
     }
-    try {
-      const fullscreenPromise = iframe.requestFullscreen();
-      if (navigator.keyboard) {
-        const permissionPromise = checkKeyboardLockPermission();
-        const keyboardLockPromise = navigator.keyboard.lock(["Escape"]);
-        void Promise.all([permissionPromise, keyboardLockPromise]).then(([hasPermission]) => {
-          if (hasPermission) {
-            console.log("[PlayruoEmbed] Keyboard locked successfully");
-          }
-        }).catch((err) => {
-          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
-        });
-      } else {
-        console.log("[PlayruoEmbed] Keyboard API not supported");
+    return {
+      hasPlayedOnce,
+      tryNow: {
+        available: isCompatible,
+        status: !isCompatible ? "Browser not compatible" : hasPlayedOnce ? "Click to resume" : "Ready"
+      },
+      buyNow: {
+        available: true,
+        status: "Ready"
       }
-      void fullscreenPromise.then(() => {
-        console.log("[PlayruoEmbed] Fullscreen activated successfully");
-      }).catch((err) => {
-        console.warn("[PlayruoEmbed] Fullscreen failed:", err);
-      });
-      return true;
-    } catch (error) {
-      console.error("[PlayruoEmbed] Error requesting fullscreen:", error);
-      return false;
-    }
-  };
+    };
+  }, [hasPlayedOnce, isCompatible, iframeState]);
   const handleTryNow = (0, import_react.useCallback)(() => {
     if (!isCompatible) {
       console.warn("[PlayruoEmbed] Browser not compatible");
@@ -160,12 +122,17 @@ var PlayruoEmbed = ({
     }
     setShowGameIframe(true);
     try {
-      requestFullscreenWithKeyboardLock();
+      const el = iframeRef.current;
+      if (el) {
+        try {
+          el.focus();
+        } catch {
+        }
+      }
       iframe.contentWindow?.postMessage({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
-        isFullscreen: true,
         isReplay: hasPlayedOnce
       }, "*");
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
@@ -199,18 +166,112 @@ var PlayruoEmbed = ({
   }, [isReady, onReady]);
   (0, import_react.useEffect)(() => {
     const handleGameMessage = (event) => {
-      const { type } = event.data || {};
+      const { type, data } = event.data || {};
+      const iframe = iframeRef.current;
+      if (!iframe || event.source !== iframe.contentWindow) {
+        return;
+      }
+      console.log("\u{1F537} [Embed] Message received from iframe:", { type, data });
+      if (type === "playruo_ready") {
+        console.log("\u{1F537} [Embed] playruo_ready received");
+        onReady?.();
+      } else if (type === "playruo_state_update" && data) {
+        console.log("\u{1F537} [Embed] playruo_state_update received:", data);
+        setIframeState(data);
+        if (data.hasPlayedOnce !== void 0) {
+          setHasPlayedOnce(data.hasPlayedOnce);
+        }
+        onStateChange?.(data);
+      } else if (type === "playruo_purchase_request" && data?.storeUrl) {
+        console.log("\u{1F537} [Embed] playruo_purchase_request received:", data);
+        onPurchaseRequest?.(data);
+      } else if (type === "playruo_demo_completed" && data) {
+        console.log("\u{1F537} [Embed] playruo_demo_completed received:", data);
+        setHasPlayedOnce(true);
+        onDemoCompleted?.(data);
+      } else if (type === "playruo_error") {
+        const errorMessage2 = typeof data === "string" ? data : data?.message || "Unknown error";
+        console.log("\u{1F537} [Embed] playruo_error received:", errorMessage2);
+        setErrorMessage(errorMessage2);
+        const errorState = {
+          hasPlayedOnce,
+          tryNow: {
+            available: false,
+            status: `Error: ${errorMessage2}`
+          },
+          buyNow: {
+            available: true,
+            status: "Ready"
+          }
+        };
+        setIframeState(errorState);
+        onStateChange?.(errorState);
+        onError?.(errorMessage2);
+      } else if (type === "playruo_session_over" && data) {
+        console.log("\u{1F537} [Embed] playruo_session_over received:", data);
+        setHasPlayedOnce(true);
+        setIframeState(data);
+        onStateChange?.(data);
+      } else if (type === "playruo_stream_start") {
+        console.log("\u{1F537} [Embed] playruo_stream_start received");
+      }
       if (type === "error" || type === "closeForBuy" || type === "goToStore") {
+        console.log("\u{1F537} [Embed] Legacy message received:", type);
         setHasPlayedOnce(true);
-        onDemoCompleted?.({
+        const payload = {
           reason: "Demo session ended",
           storeUrl
-        });
+        };
+        onDemoCompleted?.(payload);
       }
     };
     window.addEventListener("message", handleGameMessage);
     return () => window.removeEventListener("message", handleGameMessage);
-  }, [storeUrl, onDemoCompleted]);
+  }, [storeUrl, onDemoCompleted, onReady, onStateChange, onPurchaseRequest, onError, iframeRef]);
+  const generateUUID = () => {
+    if (self.crypto.randomUUID) return self.crypto.randomUUID();
+    const bytes = new Uint8Array(16);
+    self.crypto.getRandomValues(bytes);
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    return [...bytes].map(
+      (b, i) => ([4, 6, 8, 10].includes(i) ? "-" : "") + b.toString(16).padStart(2, "0")
+    ).join("");
+  };
+  (0, import_react.useEffect)(() => {
+    const handleUUIDMessage = (event) => {
+      const iframe = iframeRef.current;
+      if (!iframe || event.source !== iframe.contentWindow) {
+        return;
+      }
+      const { type, requestId } = event.data || {};
+      if (type === "playruo_uuid_request") {
+        try {
+          let storedUUID = localStorage.getItem("playruo_uuid");
+          if (!storedUUID) {
+            storedUUID = generateUUID();
+            localStorage.setItem("playruo_uuid", storedUUID);
+          }
+          iframe.contentWindow?.postMessage(
+            {
+              type: "playruo_uuid_response",
+              requestId,
+              uuid: storedUUID
+            },
+            "*"
+          );
+        } catch (e) {
+        }
+      } else if (type === "playruo_uuid_remove") {
+        try {
+          localStorage.removeItem("playruo_uuid");
+        } catch (e) {
+        }
+      }
+    };
+    window.addEventListener("message", handleUUIDMessage);
+    return () => window.removeEventListener("message", handleUUIDMessage);
+  }, [iframeRef]);
   (0, import_react.useEffect)(() => {
     const handleFullscreenChange = () => {
       const doc = document;
@@ -224,11 +285,19 @@ var PlayruoEmbed = ({
           }, 200);
         }
       } else {
-        escapeKeyPressed.current = false;
-        if (escapeKeyTimer.current) {
-          clearTimeout(escapeKeyTimer.current);
-          escapeKeyTimer.current = null;
+        const iframe = iframeRef.current;
+        if (iframe) {
+          try {
+            iframe.contentWindow?.postMessage({
+              type: "playruo",
+              action: "exitFullscreen",
+              fromEmbed: true
+            }, "*");
+          } catch {
+            console.error("[PlayruoEmbed] Failed to exit fullscreen");
+          }
         }
+        setShowGameIframe(false);
         setHasPlayedOnce(true);
         onDemoCompleted?.({
           reason: "Demo session ended",
@@ -248,49 +317,83 @@ var PlayruoEmbed = ({
     };
   }, [storeUrl, onDemoCompleted, iframeRef]);
   (0, import_react.useEffect)(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && !escapeKeyPressed.current) {
-        escapeKeyPressed.current = true;
-        event.preventDefault();
-        escapeKeyTimer.current = setTimeout(() => {
-          if (document.fullscreenElement) {
-            document.exitFullscreen();
-          }
-        }, ESCAPE_HOLD_DURATION);
+    const logCrossOriginStatus = () => {
+      const isIsolated = self.crossOriginIsolated;
+      const hasSharedArrayBuffer = typeof SharedArrayBuffer !== "undefined";
+      const hasHighResTime = typeof performance !== "undefined" && typeof performance.now === "function";
+      console.group("[PlayruoEmbed] \u{1F512} Cross-Origin Isolation Status");
+      if (isIsolated) {
+        console.log("\u2705 Cross-origin isolation: ENABLED");
+        console.log("\u2705 SharedArrayBuffer support:", hasSharedArrayBuffer ? "Available" : "Not available");
+        console.log("\u2705 High-resolution timers:", hasHighResTime ? "Available" : "Not available");
+        console.log("\u{1F3AE} Game performance: Optimal");
+      } else {
+        console.warn("\u26A0\uFE0F Cross-origin isolation: DISABLED");
+        console.warn("\u26A0\uFE0F SharedArrayBuffer support:", hasSharedArrayBuffer ? "Available" : "Not available");
+        console.warn("\u26A0\uFE0F High-resolution timers:", hasHighResTime ? "Available" : "Not available");
+        console.warn("\u{1F3AE} Game performance: May be degraded");
+        console.group("\u{1F4CB} Setup Instructions:");
+        console.log("Add these headers to your server:");
+        console.log("  Cross-Origin-Opener-Policy: same-origin");
+        console.log("  Cross-Origin-Embedder-Policy: credentialless");
+        console.groupEnd();
+        console.group("\u{1F527} Framework-specific setup:");
+        console.log("Next.js (next.config.js):");
+        console.log(`const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
+          { key: 'Cross-Origin-Embedder-Policy', value: 'credentialless' }
+        ]
       }
-      if (event.ctrlKey && event.shiftKey && event.key === "R") {
-        event.preventDefault();
-        if (document.fullscreenElement) {
-          document.exitFullscreen().catch(console.warn);
-        }
-        setTimeout(() => {
-          window.location.reload();
-        }, 500);
+    ];
+  }
+};`);
+        console.log("Vite (vite.config.ts):");
+        console.log(`export default defineConfig({
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'credentialless'
+    }
+  }
+});`);
+        console.log("Express.js:");
+        console.log(`app.use((req, res, next) => {
+  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+  res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+  next();
+});`);
+        console.groupEnd();
+        console.group("\u{1F50D} Debug Information:");
+        console.log("Current origin:", window.location.origin);
+        console.log("Protocol:", window.location.protocol);
+        console.log("User agent:", navigator.userAgent);
+        console.log("Available APIs:", {
+          SharedArrayBuffer: hasSharedArrayBuffer,
+          Performance: hasHighResTime,
+          WebGL: !!document.createElement("canvas").getContext("webgl"),
+          WebGL2: !!document.createElement("canvas").getContext("webgl2"),
+          WebAssembly: typeof WebAssembly !== "undefined"
+        });
+        console.groupEnd();
       }
-    };
-    const handleKeyUp = (event) => {
-      if (event.key === "Escape" && escapeKeyPressed.current) {
-        escapeKeyPressed.current = false;
-        if (escapeKeyTimer.current) {
-          clearTimeout(escapeKeyTimer.current);
-          escapeKeyTimer.current = null;
-        }
+      console.groupEnd();
+      if (isIsolated) {
+        console.log("[PlayruoEmbed] \u{1F680} All performance features available - optimal gaming experience!");
+      } else {
+        console.warn("[PlayruoEmbed] \u26A0\uFE0F Some features may not work optimally without cross-origin isolation");
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("keyup", handleKeyUp);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("keyup", handleKeyUp);
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (!self.crossOriginIsolated) {
-      console.warn(
-        '[PlayruoEmbed] \u26A0\uFE0F Not in a cross-origin isolated context.\nSharedArrayBuffer and high-precision timers may not work.\n\nAdd these headers to your server:\n  Cross-Origin-Opener-Policy: same-origin\n  Cross-Origin-Embedder-Policy: credentialless\n\nFor Next.js, add to next.config.js:\n  async headers() {\n    return [{\n      source: "/:path*",\n      headers: [\n        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },\n        { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }\n      ]\n    }];\n  }'
-      );
+    logCrossOriginStatus();
+    if (isReady) {
+      console.log("[PlayruoEmbed] \u{1F4CA} Final status check:");
+      logCrossOriginStatus();
     }
-  }, []);
+  }, [isReady]);
   const isAvailable = Boolean(isReady && isCompatible);
   const renderContent = () => {
     if (!renderState) return null;
@@ -321,20 +424,18 @@ var PlayruoEmbed = ({
         ref: iframeRef,
         src,
         allow: "cross-origin-isolated; fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
-        allowFullScreen: true,
         className: "w-full h-[70vh] rounded-lg border",
         ...{ credentialless: "true" },
         sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-presentation allow-top-navigation allow-modals allow-pointer-lock",
         title: "Playruo",
         referrerPolicy: "strict-origin-when-cross-origin",
         style: {
-          position: showIframe ? void 0 : "absolute",
-          top: showIframe ? void 0 : -9999,
-          left: showIframe ? void 0 : -9999,
-          zIndex: showIframe ? void 0 : -10,
-          opacity: showIframe && showGameIframe ? 1 : 0,
-          visibility: showIframe && showGameIframe ? "visible" : "hidden",
-          pointerEvents: showIframe ? "auto" : "none"
+          // Only mounted when compatible; visible after click (internal) or if parent explicitly asks
+          opacity: showGameIframe || showIframe ? 1 : 0,
+          pointerEvents: showGameIframe || showIframe ? "auto" : "none",
+          width: "100%",
+          height: "100%",
+          border: 0
         },
         onLoad: () => {
           setIsIframeLoaded(true);
@@ -355,23 +456,378 @@ var PlayruoEmbed = ({
   ] });
 };
 
+// src/react/embed-tester.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EmbedTester = (props = {}) => {
+  const [operation, setOperation] = (0, import_react2.useState)(props.operation ?? "iframe");
+  const [storeUrl, setStoreUrl] = (0, import_react2.useState)(
+    props.storeUrl ?? "https://store.steampowered.com/app/123456"
+  );
+  const [key, setKey] = (0, import_react2.useState)(0);
+  const [hasUserClicked, setHasUserClicked] = (0, import_react2.useState)(false);
+  const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
+  const [embedState, setEmbedState] = (0, import_react2.useState)({
+    buyNow: { available: false, status: "Not ready" },
+    hasPlayedOnce: false,
+    isReady: false,
+    tryNow: { available: false, status: "Not ready" }
+  });
+  const [eventLog, setEventLog] = (0, import_react2.useState)([]);
+  const [diagnostics, setDiagnostics] = (0, import_react2.useState)({
+    crossOriginIsolation: false,
+    gamepadSupported: false,
+    fullscreenSupported: false,
+    keyboardLockSupported: false
+  });
+  const baseUrl = props.baseUrl;
+  const enableConsoleLog = props.enableConsoleLog ?? false;
+  const hasReadyBeenCalled = (0, import_react2.useRef)(false);
+  const previousStateRef = (0, import_react2.useRef)("");
+  const iframeRef = (0, import_react2.useRef)(null);
+  const addEvent = (0, import_react2.useCallback)(
+    (message) => {
+      const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+      setEventLog((prev) => [...prev.slice(-10), { message, timestamp }]);
+      if (enableConsoleLog) {
+        console.log(`[EmbedTester] ${timestamp}: ${message}`);
+      }
+    },
+    [enableConsoleLog]
+  );
+  const runDiagnostics = (0, import_react2.useCallback)(() => {
+    const newDiagnostics = {
+      crossOriginIsolation: !!(window.crossOriginIsolated || window.crossOriginIsolated),
+      gamepadSupported: "getGamepads" in navigator,
+      fullscreenSupported: !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled),
+      keyboardLockSupported: "keyboard" in navigator && "lock" in navigator.keyboard
+    };
+    setDiagnostics(newDiagnostics);
+    addEvent(`\u{1F50D} Diagnostics updated - COI: ${newDiagnostics.crossOriginIsolation}, Gamepad: ${newDiagnostics.gamepadSupported}`);
+  }, [addEvent]);
+  import_react2.default.useEffect(() => {
+    runDiagnostics();
+  }, [runDiagnostics]);
+  const handleReady = (0, import_react2.useCallback)(() => {
+    if (!hasReadyBeenCalled.current) {
+      hasReadyBeenCalled.current = true;
+      addEvent("Embed ready");
+      setEmbedState((prev) => ({ ...prev, isReady: true }));
+    }
+  }, [addEvent]);
+  const handleStateChange = (0, import_react2.useCallback)((state) => {
+    const stateString = JSON.stringify(state);
+    if (stateString !== previousStateRef.current) {
+      previousStateRef.current = stateString;
+      setEmbedState(state);
+      addEvent(`State changed: ${stateString}`);
+    }
+  }, [addEvent]);
+  const handleDemoCompleted = (0, import_react2.useCallback)((data) => {
+    const payload = data;
+    addEvent(`\u{1F3AF} Demo completed! Reason: ${payload.reason}`);
+    addEvent(`Store URL available for purchase: ${payload.storeUrl}`);
+    setShowIframe(false);
+    setHasUserClicked(false);
+  }, [addEvent]);
+  const handleError = (0, import_react2.useCallback)((error) => {
+    addEvent(`Error: ${error}`);
+    if (enableConsoleLog) {
+      console.error("Embed error:", error);
+    }
+  }, [addEvent, enableConsoleLog]);
+  const handlePurchaseRequest = (0, import_react2.useCallback)((data) => {
+    addEvent(`\u{1F4B3} Explicit purchase request from Buy Now button`);
+    addEvent(`Opening store: ${data.storeUrl}`);
+    window.open(data.storeUrl, "_blank");
+  }, [addEvent]);
+  const handleRestart = (0, import_react2.useCallback)(() => {
+    setKey((prev) => prev + 1);
+    setHasUserClicked(false);
+    setShowIframe(false);
+    hasReadyBeenCalled.current = false;
+    previousStateRef.current = "";
+    addEvent("Embed restarted");
+  }, [addEvent]);
+  const buttonStyle = {
+    padding: "8px 16px",
+    margin: "4px",
+    border: "1px solid #404040",
+    borderRadius: "4px",
+    backgroundColor: "#2a2a2a",
+    color: "#e5e5e5",
+    cursor: "pointer",
+    fontSize: "14px",
+    transition: "all 0.2s ease"
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: "8px",
+    margin: "4px 0",
+    border: "1px solid #404040",
+    borderRadius: "4px",
+    backgroundColor: "#1a1a1a",
+    color: "#e5e5e5",
+    fontSize: "14px"
+  };
+  const cardStyle = {
+    border: "1px solid #333333",
+    borderRadius: "8px",
+    padding: "16px",
+    margin: "8px 0",
+    backgroundColor: "#1a1a1a"
+  };
+  const statusStyle = {
+    display: "inline-block",
+    padding: "4px 8px",
+    margin: "2px",
+    borderRadius: "12px",
+    fontSize: "12px",
+    fontWeight: "500"
+  };
+  const successStatus = { ...statusStyle, backgroundColor: "#0d5d1f", color: "#4ade80" };
+  const errorStatus = { ...statusStyle, backgroundColor: "#5d1a1a", color: "#f87171" };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: props.className, style: { minHeight: "100vh", padding: "20px", backgroundColor: "#000000", color: "#e5e5e5" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { style: { marginBottom: "20px", fontSize: "24px", fontWeight: "bold", color: "#ffffff" }, children: "\u{1F9EA} Playruo Embed Tester" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Test Controls" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "operation", style: { display: "block", marginBottom: "4px", fontWeight: "500", color: "#d4d4d4" }, children: "Operation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                style: inputStyle,
+                onChange: (e) => setOperation(e.target.value),
+                placeholder: "e.g., iframe",
+                value: operation
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "storeUrl", style: { display: "block", marginBottom: "4px", fontWeight: "500", color: "#d4d4d4" }, children: "Store URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                style: inputStyle,
+                onChange: (e) => setStoreUrl(e.target.value),
+                placeholder: "https://store.example.com",
+                value: storeUrl
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...buttonStyle,
+                backgroundColor: "#0066cc",
+                color: "#ffffff",
+                border: "none",
+                fontWeight: "600"
+              },
+              onClick: handleRestart,
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#0052a3",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#0066cc",
+              children: "\u{1F504} Restart Embed"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: embedState.isReady ? successStatus : errorStatus, children: embedState.isReady ? "\u2705 Ready" : "\u274C Not Ready" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: embedState.hasPlayedOnce ? successStatus : errorStatus, children: embedState.hasPlayedOnce ? "\u2705 Played" : "\u274C Not Played" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: embedState.tryNow?.available ? successStatus : errorStatus, children: embedState.tryNow?.available ? "\u2705 Try Now" : "\u274C Try Now" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: embedState.buyNow?.available ? successStatus : errorStatus, children: embedState.buyNow?.available ? "\u2705 Buy Now" : "\u274C Buy Now" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "\u{1F50D} Browser Diagnostics" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: diagnostics.crossOriginIsolation ? successStatus : errorStatus, children: diagnostics.crossOriginIsolation ? "\u2705" : "\u274C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Cross-Origin Isolation" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: diagnostics.gamepadSupported ? successStatus : errorStatus, children: diagnostics.gamepadSupported ? "\u2705" : "\u274C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Gamepad API" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: diagnostics.fullscreenSupported ? successStatus : errorStatus, children: diagnostics.fullscreenSupported ? "\u2705" : "\u274C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Fullscreen API" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: diagnostics.keyboardLockSupported ? successStatus : errorStatus, children: diagnostics.keyboardLockSupported ? "\u2705" : "\u274C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Keyboard Lock" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Event Log" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+            backgroundColor: "#0a0a0a",
+            padding: "12px",
+            borderRadius: "4px",
+            height: "200px",
+            overflowY: "auto",
+            fontFamily: "monospace",
+            fontSize: "12px",
+            border: "1px solid #333333"
+          }, children: eventLog.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: eventLog.map((event) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "4px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "#737373" }, children: [
+              "[",
+              event.timestamp,
+              "]"
+            ] }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#e5e5e5" }, children: event.message })
+          ] }, event.timestamp)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#737373" }, children: "No events yet..." }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: "0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Embed Container" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
+            backgroundColor: "#2a2a2a",
+            color: "#e5e5e5",
+            padding: "4px 8px",
+            borderRadius: "12px",
+            fontSize: "12px",
+            fontWeight: "500",
+            border: "1px solid #404040"
+          }, children: [
+            "\u{1F9EA} ",
+            baseUrl ? new URL(baseUrl).host : "localhost:3000"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          position: "relative",
+          minHeight: "500px",
+          overflow: "hidden",
+          borderRadius: "8px",
+          border: "1px solid #333333",
+          backgroundColor: "#0a0a0a"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          PlayruoEmbed,
+          {
+            baseUrl: baseUrl || "",
+            className: "w-full h-full absolute inset-0",
+            iframeRef,
+            onDemoCompleted: handleDemoCompleted,
+            onError: handleError,
+            onPurchaseRequest: handlePurchaseRequest,
+            onReady: handleReady,
+            onStateChange: handleStateChange,
+            operation,
+            renderState: ({ actions, message, status }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !hasUserClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+              position: "absolute",
+              inset: "0",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "16px",
+              backgroundColor: "rgba(0, 0, 0, 0.85)",
+              backdropFilter: "blur(8px)",
+              zIndex: 50,
+              padding: "20px"
+            }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { margin: "0", fontSize: "14px", color: "#d4d4d4" }, children: [
+                "Status: ",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#ffffff", fontWeight: "600" }, children: status })
+              ] }),
+              message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "0", fontSize: "14px", color: "#d4d4d4" }, children: message }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...buttonStyle,
+                    backgroundColor: "#16a34a",
+                    color: "#ffffff",
+                    border: "none",
+                    padding: "12px 24px",
+                    fontSize: "16px",
+                    fontWeight: "600",
+                    cursor: actions.canTryNow ? "pointer" : "not-allowed",
+                    opacity: actions.canTryNow ? 1 : 0.5
+                  },
+                  disabled: !actions.canTryNow,
+                  onMouseEnter: (e) => {
+                    if (actions.canTryNow) {
+                      e.currentTarget.style.backgroundColor = "#15803d";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (actions.canTryNow) {
+                      e.currentTarget.style.backgroundColor = "#16a34a";
+                    }
+                  },
+                  onClick: () => {
+                    setHasUserClicked(true);
+                    setShowIframe(true);
+                    addEvent(embedState.hasPlayedOnce ? "User clicked - Resuming game" : "User clicked - Starting game with tryNow");
+                    actions.tryNow();
+                  },
+                  children: [
+                    "\u{1F3AE} ",
+                    embedState.hasPlayedOnce ? "Resume Game" : "Try Demo Now"
+                  ]
+                }
+              ),
+              actions.canBuyNow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...buttonStyle,
+                    backgroundColor: "#525252",
+                    color: "#ffffff",
+                    border: "none",
+                    padding: "8px 16px",
+                    fontSize: "14px",
+                    fontWeight: "500"
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#404040",
+                  onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#525252",
+                  onClick: () => {
+                    addEvent("Buy Now clicked");
+                    actions.buyNow();
+                  },
+                  children: "Buy Now"
+                }
+              )
+            ] }) }),
+            showIframe,
+            storeUrl
+          },
+          key
+        ) })
+      ] }) })
+    ] })
+  ] }) });
+};
+
 // src/post-message-types.ts
 var isPlayruoEmbedMessage = (data) => {
   if (!data || typeof data !== "object") return false;
   const msg = data;
   if (typeof msg.type !== "string") return false;
-  return msg.type === "playruo_ready" || msg.type === "playruo_state_update" || msg.type === "playruo_purchase_request" || msg.type === "playruo_demo_completed" || msg.type === "playruo_error";
+  return msg.type === "playruo_ready" || msg.type === "playruo_state_update" || msg.type === "playruo_purchase_request" || msg.type === "playruo_demo_completed" || msg.type === "playruo_error" || msg.type === "playruo_session_over" || msg.type === "playruo_stream_start" || msg.type === "playruo_stream_stop";
 };
-var isPlayruoEmbedCommand = (data) => {
+var isPlayruoInternalMessage = (data) => {
   if (!data || typeof data !== "object") return false;
-  const cmd = data;
-  if (typeof cmd.type !== "string") return false;
-  return cmd.type === "try_now" || cmd.type === "buy_now" || cmd.type === "get_state";
+  const msg = data;
+  return msg.type === "playruo" && typeof msg.action === "string" && (msg.action === "tryNowClick" || msg.action === "exitFullscreen" || msg.action === "mute" || msg.action === "unmute") && msg.fromEmbed === true;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EmbedTester,
   PlayruoEmbed,
   buildEmbedUrl,
-  isPlayruoEmbedCommand,
-  isPlayruoEmbedMessage
+  isPlayruoEmbedMessage,
+  isPlayruoInternalMessage
 });