@playruo/embed 1.2.0 → 1.2.2

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,11 +17,20 @@ 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,
@@ -96,7 +107,7 @@ var PlayruoEmbed = ({
       status: "Ready"
     }
   }), [hasPlayedOnce, isCompatible]);
-  const checkKeyboardLockPermission = async () => {
+  const checkKeyboardLockPermission = (0, import_react.useCallback)(async () => {
     if (!navigator.permissions) {
       console.log("[PlayruoEmbed] Permissions API not supported");
       return false;
@@ -115,8 +126,8 @@ var PlayruoEmbed = ({
       console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
       return false;
     }
-  };
-  const requestFullscreenWithKeyboardLock = async () => {
+  }, []);
+  const requestFullscreenWithKeyboardLock = (0, import_react.useCallback)(async () => {
     const iframe = iframeRef.current;
     if (!iframe?.requestFullscreen) {
       console.log("[PlayruoEmbed] Fullscreen not supported on this browser");
@@ -124,18 +135,30 @@ var PlayruoEmbed = ({
     }
     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");
+      if (navigator.keyboard && window.self === window.top) {
+        try {
+          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) => {
+            const isTopLevelContextError = err?.name === "InvalidStateError" && err?.message?.includes("primary top-level browsing context");
+            if (!isTopLevelContextError) {
+              console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
+            }
+          });
+        } catch (err) {
+          const isTopLevelContextError = err?.name === "InvalidStateError" && err?.message?.includes("primary top-level browsing context");
+          if (!isTopLevelContextError) {
+            console.warn("[PlayruoEmbed] Keyboard lock error:", err);
           }
-        }).catch((err) => {
-          console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
-        });
-      } else {
+        }
+      } else if (!navigator.keyboard) {
         console.log("[PlayruoEmbed] Keyboard API not supported");
+      } else {
+        console.log("[PlayruoEmbed] Keyboard lock not available (not in top-level context)");
       }
       void fullscreenPromise.then(() => {
         console.log("[PlayruoEmbed] Fullscreen activated successfully");
@@ -147,7 +170,7 @@ var PlayruoEmbed = ({
       console.error("[PlayruoEmbed] Error requesting fullscreen:", error);
       return false;
     }
-  };
+  }, [iframeRef, checkKeyboardLockPermission]);
   const handleTryNow = (0, import_react.useCallback)(() => {
     if (!isCompatible) {
       console.warn("[PlayruoEmbed] Browser not compatible");
@@ -160,6 +183,13 @@ var PlayruoEmbed = ({
     }
     setShowGameIframe(true);
     try {
+      const el = iframeRef.current;
+      if (el) {
+        try {
+          el.focus();
+        } catch {
+        }
+      }
       requestFullscreenWithKeyboardLock();
       iframe.contentWindow?.postMessage({
         type: "playruo",
@@ -179,7 +209,7 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef]);
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestFullscreenWithKeyboardLock]);
   const handleBuyNow = (0, import_react.useCallback)(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -229,6 +259,7 @@ var PlayruoEmbed = ({
           clearTimeout(escapeKeyTimer.current);
           escapeKeyTimer.current = null;
         }
+        setShowGameIframe(false);
         setHasPlayedOnce(true);
         onDemoCompleted?.({
           reason: "Demo session ended",
@@ -285,12 +316,96 @@ var PlayruoEmbed = ({
     };
   }, []);
   (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  }'
-      );
+    const isVisible = showGameIframe || showIframe;
+    const iframe = iframeRef.current;
+    if (!iframe || !isIframeLoaded) return;
+    try {
+      iframe.contentWindow?.postMessage({
+        type: "playruo",
+        action: isVisible ? "unmute" : "mute",
+        fromEmbed: true
+      }, "*");
+    } catch {
     }
-  }, []);
+  }, [showGameIframe, showIframe, isIframeLoaded, iframeRef]);
+  (0, import_react.useEffect)(() => {
+    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' }
+        ]
+      }
+    ];
+  }
+};`);
+        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();
+      }
+      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");
+      }
+    };
+    logCrossOriginStatus();
+    if (isReady) {
+      console.log("[PlayruoEmbed] \u{1F4CA} Final status check:");
+      logCrossOriginStatus();
+    }
+  }, [isReady]);
   const isAvailable = Boolean(isReady && isCompatible);
   const renderContent = () => {
     if (!renderState) return null;
@@ -320,19 +435,20 @@ var PlayruoEmbed = ({
       {
         ref: iframeRef,
         src,
-        allow: "fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
+        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);
@@ -353,6 +469,361 @@ 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;
@@ -368,6 +839,7 @@ var isPlayruoEmbedCommand = (data) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EmbedTester,
   PlayruoEmbed,
   buildEmbedUrl,
   isPlayruoEmbedCommand,

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface PlayruoEmbedState {
     hasPlayedOnce: boolean;
@@ -65,6 +66,15 @@ interface PlayruoEmbedProps {
 }
 declare const PlayruoEmbed: FC<PlayruoEmbedProps>;
 
+interface EmbedTesterProps {
+    baseUrl?: string;
+    enableConsoleLog?: boolean;
+    operation?: string;
+    storeUrl?: string;
+    className?: string;
+}
+declare const EmbedTester: (props?: EmbedTesterProps) => react_jsx_runtime.JSX.Element;
+
 interface PlayruoReadyMessage {
     type: "playruo_ready";
 }
@@ -121,4 +131,4 @@ interface BuildUrlParams {
  */
 declare const buildEmbedUrl: ({ baseUrl, operation, storeUrl }: BuildUrlParams) => string;
 
-export { type BuyNowCommand, type DemoCompletedPayload, type GetStateCommand, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedCommand, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoStateUpdateMessage, type TryNowCommand, buildEmbedUrl, isPlayruoEmbedCommand, isPlayruoEmbedMessage };
+export { type BuyNowCommand, type DemoCompletedPayload, EmbedTester, type EmbedTesterProps, type GetStateCommand, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedCommand, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoStateUpdateMessage, type TryNowCommand, buildEmbedUrl, isPlayruoEmbedCommand, isPlayruoEmbedMessage };