@playruo/embed 1.2.10 → 1.3.1

package/dist/index.js

@@ -3,11 +3,18 @@ import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 
 // src/url.ts
 var PLAYRUO_ORIGIN = "https://playruo.live";
-var buildEmbedUrl = ({ operation = "iframe", storeUrl }) => {
+var normalizeOperation = (operation) => {
+  const trimmedOperation = operation.trim();
+  if (trimmedOperation === "") {
+    throw new Error("`operation` is required to build a Playruo embed URL.");
+  }
+  return trimmedOperation.startsWith("/") ? trimmedOperation.slice(1) : trimmedOperation;
+};
+var buildEmbedUrl = ({ operation, storeUrl }) => {
   return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
 };
-var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
-  const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
+var buildEmbedUrlWithOrigin = (origin, { operation, storeUrl }) => {
+  const operationPath = normalizeOperation(operation);
   const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
   if (storeUrl) {
@@ -20,7 +27,7 @@ var buildEmbedUrlWithOrigin = (origin, { operation = "iframe", storeUrl }) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 var PlayruoEmbed = ({
   baseUrl,
-  operation = "iframe",
+  operation,
   storeUrl,
   showIframe = false,
   className,
@@ -35,7 +42,6 @@ var PlayruoEmbed = ({
   const internalIframeRef = useRef(null);
   const iframeRef = externalIframeRef || internalIframeRef;
   const wasEmbedFullscreenRef = useRef(false);
-  const wasEmbedPointerLockedRef = useRef(false);
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
   const [showGameIframe, setShowGameIframe] = useState(false);
@@ -117,55 +123,8 @@ var PlayruoEmbed = ({
       console.warn("[PlayruoEmbed] Failed to lock Escape key:", error);
     }
   }, [getKeyboardApi]);
-  const getPointerLockElement = useCallback(() => {
-    const doc = document;
-    return doc.pointerLockElement || doc.mozPointerLockElement || doc.webkitPointerLockElement || null;
-  }, []);
-  const releasePointerLock = useCallback(() => {
-    const doc = document;
-    const exitPointerLock = doc.exitPointerLock?.bind(doc) || doc.mozExitPointerLock?.bind(doc) || doc.webkitExitPointerLock?.bind(doc);
-    try {
-      exitPointerLock?.();
-      wasEmbedPointerLockedRef.current = false;
-    } catch (error) {
-      console.warn("[PlayruoEmbed] Failed to release pointer lock:", error);
-    }
-  }, []);
   const requestImmersiveMode = useCallback(
     async (iframe) => {
-      const pointerTarget = iframe;
-      if (pointerTarget.requestPointerLock) {
-        try {
-          const pointerLockResult = pointerTarget.requestPointerLock({ unadjustedMovement: true });
-          if (pointerLockResult && typeof pointerLockResult.then === "function") {
-            void pointerLockResult.then(() => {
-              wasEmbedPointerLockedRef.current = true;
-              console.log("[PlayruoEmbed] Pointer locked on iframe");
-            }).catch(async (error) => {
-              if (error instanceof DOMException && error.name === "NotSupportedError") {
-                try {
-                  const fallbackResult = pointerTarget.requestPointerLock?.();
-                  if (fallbackResult && typeof fallbackResult.then === "function") {
-                    await fallbackResult;
-                  }
-                  wasEmbedPointerLockedRef.current = true;
-                  console.log("[PlayruoEmbed] Pointer locked on iframe without raw input");
-                  return;
-                } catch (fallbackError) {
-                  console.warn("[PlayruoEmbed] Failed to lock pointer without raw input:", fallbackError);
-                  return;
-                }
-              }
-              console.warn("[PlayruoEmbed] Failed to lock pointer:", error);
-            });
-          } else {
-            wasEmbedPointerLockedRef.current = true;
-            console.log("[PlayruoEmbed] Pointer lock requested on iframe");
-          }
-        } catch (error) {
-          console.warn("[PlayruoEmbed] Failed to request pointer lock:", error);
-        }
-      }
       const fullscreenPromise = iframe.requestFullscreen();
       try {
         await fullscreenPromise;
@@ -173,11 +132,10 @@ var PlayruoEmbed = ({
         console.log("[PlayruoEmbed] Fullscreen granted");
       } catch (error) {
         releaseEscapeKeyLock();
-        releasePointerLock();
         throw error;
       }
     },
-    [releaseEscapeKeyLock, releasePointerLock]
+    [releaseEscapeKeyLock]
   );
   const handleTryNow = useCallback(async () => {
     if (!isCompatible) {
@@ -364,10 +322,6 @@ var PlayruoEmbed = ({
       releaseEscapeKeyLock();
       if (wasEmbedFullscreenRef.current) {
         wasEmbedFullscreenRef.current = false;
-        const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
-        if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
-          releasePointerLock();
-        }
         if (iframe) {
           try {
             iframe.contentWindow?.postMessage({
@@ -399,33 +353,12 @@ var PlayruoEmbed = ({
       document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
       document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
     };
-  }, [storeUrl, onDemoCompleted, iframeRef, getPointerLockElement, lockEscapeKey, releaseEscapeKeyLock, releasePointerLock]);
-  useEffect(() => {
-    const handlePointerLockChange = () => {
-      const iframe = iframeRef.current;
-      wasEmbedPointerLockedRef.current = Boolean(iframe && getPointerLockElement() === iframe);
-    };
-    const handlePointerLockError = () => {
-      wasEmbedPointerLockedRef.current = false;
-      console.warn("[PlayruoEmbed] Pointer lock request was rejected");
-    };
-    document.addEventListener("pointerlockchange", handlePointerLockChange);
-    document.addEventListener("pointerlockerror", handlePointerLockError);
-    return () => {
-      document.removeEventListener("pointerlockchange", handlePointerLockChange);
-      document.removeEventListener("pointerlockerror", handlePointerLockError);
-    };
-  }, [getPointerLockElement, iframeRef]);
+  }, [storeUrl, onDemoCompleted, iframeRef, lockEscapeKey, releaseEscapeKeyLock]);
   useEffect(() => {
     return () => {
       releaseEscapeKeyLock();
-      const iframe = iframeRef.current;
-      const isEmbedPointerLocked = Boolean(iframe && getPointerLockElement() === iframe);
-      if (wasEmbedPointerLockedRef.current || isEmbedPointerLocked) {
-        releasePointerLock();
-      }
     };
-  }, [getPointerLockElement, iframeRef, releaseEscapeKeyLock, releasePointerLock]);
+  }, [releaseEscapeKeyLock]);
   useEffect(() => {
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;
@@ -575,36 +508,61 @@ var PlayruoEmbed = ({
 // src/react/embed-tester.tsx
 import React, { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var createInitialEmbedState = () => ({
+  buyNow: { available: false, status: "Not ready" },
+  hasPlayedOnce: false,
+  isReady: false,
+  tryNow: { available: false, status: "Not ready" }
+});
+var createInitialDiagnostics = () => ({
+  chromiumBrowser: false,
+  crossOriginIsolation: false,
+  desktopBrowser: false,
+  fullscreenSupported: false,
+  gamepadSupported: false,
+  iframeAllowsFullscreen: false,
+  iframeAllowsGamepad: false,
+  iframeAllowsPointerLock: false,
+  keyboardLockSupported: false,
+  localStorageSupported: false,
+  pointerLockSupported: false,
+  secureContext: false,
+  sharedArrayBufferSupported: false,
+  topLevelContext: false,
+  webAssemblySupported: false,
+  webgl2Supported: false
+});
 var EmbedTester = (props = {}) => {
-  const [operation, setOperation] = useState2(props.operation ?? "iframe");
-  const [storeUrl, setStoreUrl] = useState2(
+  const [operationDraft, setOperationDraft] = useState2(props.operation ?? "iframe");
+  const [storeUrlDraft, setStoreUrlDraft] = useState2(
+    props.storeUrl ?? "https://store.steampowered.com/app/123456"
+  );
+  const [appliedOperation, setAppliedOperation] = useState2(props.operation ?? "iframe");
+  const [appliedStoreUrl, setAppliedStoreUrl] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
   const [key, setKey] = useState2(0);
   const [hasUserClicked, setHasUserClicked] = useState2(false);
   const [showIframe, setShowIframe] = useState2(false);
-  const [embedState, setEmbedState] = useState2({
-    buyNow: { available: false, status: "Not ready" },
-    hasPlayedOnce: false,
-    isReady: false,
-    tryNow: { available: false, status: "Not ready" }
-  });
+  const [embedState, setEmbedState] = useState2(createInitialEmbedState);
   const [eventLog, setEventLog] = useState2([]);
-  const [diagnostics, setDiagnostics] = useState2({
-    crossOriginIsolation: false,
-    gamepadSupported: false,
-    fullscreenSupported: false,
-    keyboardLockSupported: false
-  });
+  const [diagnostics, setDiagnostics] = useState2(createInitialDiagnostics);
   const displayHost = props.baseUrl ? new URL(props.baseUrl).host : "playruo.live";
   const enableConsoleLog = props.enableConsoleLog ?? false;
   const hasReadyBeenCalled = useRef2(false);
+  const nextEventIdRef = useRef2(0);
   const previousStateRef = useRef2("");
   const iframeRef = useRef2(null);
+  const isOperationPending = operationDraft !== appliedOperation;
+  const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
+  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending);
   const addEvent = useCallback2(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-      setEventLog((prev) => [...prev.slice(-10), { message, timestamp }]);
+      const id = nextEventIdRef.current;
+      nextEventIdRef.current += 1;
+      setEventLog((prev) => [...prev.slice(-10), { id, message, timestamp }]);
       if (enableConsoleLog) {
         console.log(`[EmbedTester] ${timestamp}: ${message}`);
       }
@@ -612,18 +570,48 @@ var EmbedTester = (props = {}) => {
     [enableConsoleLog]
   );
   const runDiagnostics = useCallback2(() => {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera || "";
+    const isMobileDevice = /android|iPad|iPhone|iPod/i.test(userAgent);
+    const hasChrome = !!window.chrome;
+    const isChromium = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    const iframeAllow = iframeRef.current?.getAttribute("allow") ?? "";
+    const iframeSandbox = iframeRef.current?.getAttribute("sandbox") ?? "";
+    const canvas = document.createElement("canvas");
+    let localStorageSupported = false;
+    try {
+      const storageKey = "__playruo_embed_tester__";
+      window.localStorage.setItem(storageKey, "1");
+      window.localStorage.removeItem(storageKey);
+      localStorageSupported = true;
+    } catch {
+      localStorageSupported = false;
+    }
     const newDiagnostics = {
+      chromiumBrowser: hasChrome || isChromium,
       crossOriginIsolation: !!(window.crossOriginIsolated || window.crossOriginIsolated),
-      gamepadSupported: "getGamepads" in navigator,
+      desktopBrowser: !isMobileDevice,
       fullscreenSupported: !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled),
-      keyboardLockSupported: "keyboard" in navigator && "lock" in navigator.keyboard
+      gamepadSupported: "getGamepads" in navigator,
+      iframeAllowsFullscreen: iframeAllow.includes("fullscreen"),
+      iframeAllowsGamepad: iframeAllow.includes("gamepad"),
+      iframeAllowsPointerLock: iframeSandbox.includes("allow-pointer-lock"),
+      keyboardLockSupported: "keyboard" in navigator && "lock" in navigator.keyboard,
+      localStorageSupported,
+      pointerLockSupported: "requestPointerLock" in HTMLIFrameElement.prototype || "requestPointerLock" in HTMLElement.prototype || "pointerLockElement" in document,
+      secureContext: window.isSecureContext,
+      sharedArrayBufferSupported: typeof SharedArrayBuffer !== "undefined",
+      topLevelContext: window.self === window.top,
+      webAssemblySupported: typeof WebAssembly !== "undefined",
+      webgl2Supported: !!canvas.getContext("webgl2")
     };
     setDiagnostics(newDiagnostics);
-    addEvent(`\u{1F50D} Diagnostics updated - COI: ${newDiagnostics.crossOriginIsolation}, Gamepad: ${newDiagnostics.gamepadSupported}`);
-  }, [addEvent]);
+    addEvent(
+      `\u{1F50D} Diagnostics updated - Browser: ${newDiagnostics.desktopBrowser && newDiagnostics.chromiumBrowser}, COI: ${newDiagnostics.crossOriginIsolation}, Fullscreen: ${newDiagnostics.fullscreenSupported}`
+    );
+  }, [addEvent, iframeRef]);
   React.useEffect(() => {
     runDiagnostics();
-  }, [runDiagnostics]);
+  }, [key, runDiagnostics]);
   const handleReady = useCallback2(() => {
     if (!hasReadyBeenCalled.current) {
       hasReadyBeenCalled.current = true;
@@ -657,279 +645,1068 @@ var EmbedTester = (props = {}) => {
     addEvent(`Opening store: ${data.storeUrl}`);
     window.open(data.storeUrl, "_blank");
   }, [addEvent]);
-  const handleRestart = useCallback2(() => {
+  const resetEmbedSession = useCallback2((message) => {
+    setEmbedState(createInitialEmbedState());
     setKey((prev) => prev + 1);
     setHasUserClicked(false);
     setShowIframe(false);
     hasReadyBeenCalled.current = false;
     previousStateRef.current = "";
-    addEvent("Embed restarted");
+    addEvent(message);
   }, [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 handleApply = useCallback2(() => {
+    if (!hasPendingConfigChanges) {
+      return;
+    }
+    setAppliedOperation(operationDraft);
+    setAppliedStoreUrl(storeUrlDraft);
+    resetEmbedSession("Applied updated embed settings");
+  }, [hasPendingConfigChanges, operationDraft, resetEmbedSession, storeUrlDraft]);
+  const handleRestartSession = useCallback2(() => {
+    resetEmbedSession("Embed restarted with applied settings");
+  }, [resetEmbedSession]);
+  const handleResetDrafts = useCallback2(() => {
+    setOperationDraft(appliedOperation);
+    setStoreUrlDraft(appliedStoreUrl);
+    addEvent("Reverted draft changes to the applied configuration");
+  }, [addEvent, appliedOperation, appliedStoreUrl]);
+  const panelStyle = {
+    position: "relative",
+    border: "1px solid rgba(148, 163, 184, 0.18)",
+    borderRadius: "24px",
+    padding: "20px",
+    background: "linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(7, 12, 24, 0.96) 100%)",
+    boxShadow: "0 24px 80px rgba(0, 0, 0, 0.35)",
+    backdropFilter: "blur(18px)"
+  };
+  const sectionTitleStyle = {
+    margin: 0,
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#f8fafc"
+  };
+  const labelStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px",
+    marginBottom: "8px",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#dbe7ff"
   };
+  const buildIndicatorStyle = (pending) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "4px 10px",
+    borderRadius: "999px",
+    border: pending ? "1px solid rgba(251, 191, 36, 0.28)" : "1px solid rgba(74, 222, 128, 0.22)",
+    backgroundColor: pending ? "rgba(245, 158, 11, 0.12)" : "rgba(34, 197, 94, 0.12)",
+    color: pending ? "#fbbf24" : "#86efac",
+    fontSize: "11px",
+    fontWeight: 700,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase"
+  });
+  const buildIndicatorDotStyle = (pending) => ({
+    width: "8px",
+    height: "8px",
+    borderRadius: "999px",
+    backgroundColor: pending ? "#f59e0b" : "#22c55e",
+    boxShadow: pending ? "0 0 0 4px rgba(245, 158, 11, 0.12)" : "0 0 0 4px rgba(34, 197, 94, 0.12)"
+  });
+  const buildInputShellStyle = (pending) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    border: pending ? "1px solid rgba(245, 158, 11, 0.35)" : "1px solid rgba(148, 163, 184, 0.18)",
+    borderRadius: "16px",
+    padding: "0 14px",
+    background: pending ? "rgba(35, 23, 8, 0.72)" : "rgba(15, 23, 42, 0.7)",
+    boxShadow: pending ? "0 0 0 1px rgba(245, 158, 11, 0.08)" : "none"
+  });
   const inputStyle = {
     width: "100%",
-    padding: "8px",
-    margin: "4px 0",
-    border: "1px solid #404040",
-    borderRadius: "4px",
-    backgroundColor: "#1a1a1a",
-    color: "#e5e5e5",
-    fontSize: "14px"
+    padding: "14px 0",
+    border: "none",
+    outline: "none",
+    backgroundColor: "transparent",
+    color: "#f8fafc",
+    fontSize: "15px"
   };
-  const cardStyle = {
-    border: "1px solid #333333",
-    borderRadius: "8px",
-    padding: "16px",
-    margin: "8px 0",
-    backgroundColor: "#1a1a1a"
+  const helperTextStyle = {
+    margin: "8px 0 0 0",
+    color: "#94a3b8",
+    fontSize: "12px",
+    lineHeight: 1.5
   };
-  const statusStyle = {
+  const codeStyle = {
     display: "inline-block",
-    padding: "4px 8px",
-    margin: "2px",
-    borderRadius: "12px",
+    padding: "2px 8px",
+    borderRadius: "999px",
+    backgroundColor: "rgba(148, 163, 184, 0.12)",
+    color: "#e2e8f0",
     fontSize: "12px",
-    fontWeight: "500"
+    fontFamily: '"SF Mono", "Roboto Mono", monospace',
+    wordBreak: "break-all"
   };
-  const successStatus = { ...statusStyle, backgroundColor: "#0d5d1f", color: "#4ade80" };
-  const errorStatus = { ...statusStyle, backgroundColor: "#5d1a1a", color: "#f87171" };
-  return /* @__PURE__ */ jsx2("div", { className: props.className, style: { minHeight: "100vh", padding: "20px", backgroundColor: "#000000", color: "#e5e5e5" }, children: /* @__PURE__ */ jsxs2("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsx2("h1", { style: { marginBottom: "20px", fontSize: "24px", fontWeight: "bold", color: "#ffffff" }, children: "\u{1F9EA} Playruo Embed Tester" }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }, children: [
-      /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-          /* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Test Controls" }),
-          /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "12px" }, children: [
-            /* @__PURE__ */ jsx2("label", { htmlFor: "operation", style: { display: "block", marginBottom: "4px", fontWeight: "500", color: "#d4d4d4" }, children: "Operation" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                style: inputStyle,
-                onChange: (e) => setOperation(e.target.value),
-                placeholder: "e.g., iframe",
-                value: operation
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "12px" }, children: [
-            /* @__PURE__ */ jsx2("label", { htmlFor: "storeUrl", style: { display: "block", marginBottom: "4px", fontWeight: "500", color: "#d4d4d4" }, children: "Store URL" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                style: inputStyle,
-                onChange: (e) => setStoreUrl(e.target.value),
-                placeholder: "https://store.example.com",
-                value: storeUrl
-              }
-            )
-          ] }),
+  const buildButtonStyle = (variant, disabled = false) => {
+    const palette = {
+      ghost: {
+        background: "rgba(15, 23, 42, 0.5)",
+        border: "1px solid rgba(148, 163, 184, 0.18)",
+        color: "#dbe7ff"
+      },
+      primary: {
+        background: "linear-gradient(135deg, #38bdf8 0%, #2563eb 100%)",
+        border: "1px solid rgba(125, 211, 252, 0.32)",
+        color: "#eff6ff"
+      },
+      secondary: {
+        background: "linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%)",
+        border: "1px solid rgba(148, 163, 184, 0.18)",
+        color: "#e2e8f0"
+      }
+    }[variant];
+    return {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      minHeight: "44px",
+      padding: "0 18px",
+      borderRadius: "14px",
+      background: palette.background,
+      border: palette.border,
+      color: palette.color,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.45 : 1,
+      fontSize: "14px",
+      fontWeight: 700,
+      letterSpacing: "0.01em",
+      transition: "all 0.2s ease",
+      boxShadow: variant === "primary" && !disabled ? "0 16px 32px rgba(37, 99, 235, 0.28)" : "none"
+    };
+  };
+  const buildStatusChipStyle = (active) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "8px 12px",
+    borderRadius: "999px",
+    backgroundColor: active ? "rgba(34, 197, 94, 0.12)" : "rgba(248, 113, 113, 0.12)",
+    border: active ? "1px solid rgba(34, 197, 94, 0.22)" : "1px solid rgba(248, 113, 113, 0.22)",
+    color: active ? "#86efac" : "#fca5a5",
+    fontSize: "12px",
+    fontWeight: 700
+  });
+  const statusItems = [
+    { label: "Ready", value: Boolean(embedState.isReady) },
+    { label: "Played", value: Boolean(embedState.hasPlayedOnce) },
+    { label: "Try Now", value: Boolean(embedState.tryNow?.available) },
+    { label: "Buy Now", value: Boolean(embedState.buyNow?.available) }
+  ];
+  const diagnosticGroups = [
+    {
+      title: "Compatibility",
+      items: [
+        {
+          detail: "Playruo currently expects a non-mobile browser.",
+          label: "Desktop browser",
+          value: diagnostics.desktopBrowser
+        },
+        {
+          detail: "The embed flow is tuned for Chromium-based browsers.",
+          label: "Chromium browser",
+          value: diagnostics.chromiumBrowser
+        },
+        {
+          detail: "Keyboard lock works best when the page is not itself embedded.",
+          label: "Top-level tab",
+          value: diagnostics.topLevelContext
+        },
+        {
+          detail: "HTTPS or localhost unlocks the best browser APIs.",
+          label: "Secure context",
+          value: diagnostics.secureContext
+        }
+      ]
+    },
+    {
+      title: "Gameplay APIs",
+      items: [
+        {
+          detail: "Needed for the immersive play flow.",
+          label: "Fullscreen API",
+          value: diagnostics.fullscreenSupported
+        },
+        {
+          detail: "Needed for raw mouse capture on the iframe.",
+          label: "Pointer lock",
+          value: diagnostics.pointerLockSupported
+        },
+        {
+          detail: "Used to keep Escape reserved while fullscreen is active.",
+          label: "Keyboard lock",
+          value: diagnostics.keyboardLockSupported
+        },
+        {
+          detail: "Lets the game read connected controllers.",
+          label: "Gamepad API",
+          value: diagnostics.gamepadSupported
+        }
+      ]
+    },
+    {
+      title: "Performance",
+      items: [
+        {
+          detail: "Improves the overall runtime budget for the experience.",
+          label: "Cross-origin isolated",
+          value: diagnostics.crossOriginIsolation
+        },
+        {
+          detail: "Important for heavier threaded workloads.",
+          label: "SharedArrayBuffer",
+          value: diagnostics.sharedArrayBufferSupported
+        },
+        {
+          detail: "Confirms modern rendering features are reachable.",
+          label: "WebGL2",
+          value: diagnostics.webgl2Supported
+        },
+        {
+          detail: "Confirms the runtime can execute compiled game code paths.",
+          label: "WebAssembly",
+          value: diagnostics.webAssemblySupported
+        }
+      ]
+    },
+    {
+      title: "Embed wiring",
+      items: [
+        {
+          detail: "The iframe allow list includes fullscreen access.",
+          label: "Iframe fullscreen allow",
+          value: diagnostics.iframeAllowsFullscreen
+        },
+        {
+          detail: "The iframe allow list includes gamepad access.",
+          label: "Iframe gamepad allow",
+          value: diagnostics.iframeAllowsGamepad
+        },
+        {
+          detail: "The iframe sandbox includes pointer-lock permission.",
+          label: "Iframe pointer-lock allow",
+          value: diagnostics.iframeAllowsPointerLock
+        },
+        {
+          detail: "Needed for UUID persistence and session continuity.",
+          label: "Local storage",
+          value: diagnostics.localStorageSupported
+        }
+      ]
+    }
+  ];
+  const criticalDiagnosticChecks = [
+    { label: "Desktop browser", value: diagnostics.desktopBrowser },
+    { label: "Chromium browser", value: diagnostics.chromiumBrowser },
+    { label: "Fullscreen API", value: diagnostics.fullscreenSupported },
+    { label: "Pointer lock", value: diagnostics.pointerLockSupported }
+  ];
+  const warningDiagnosticChecks = [
+    { label: "Top-level tab", value: diagnostics.topLevelContext },
+    { label: "Secure context", value: diagnostics.secureContext },
+    { label: "Cross-origin isolation", value: diagnostics.crossOriginIsolation },
+    { label: "SharedArrayBuffer", value: diagnostics.sharedArrayBufferSupported },
+    { label: "Keyboard lock", value: diagnostics.keyboardLockSupported },
+    { label: "Gamepad API", value: diagnostics.gamepadSupported },
+    { label: "WebGL2", value: diagnostics.webgl2Supported }
+  ];
+  const blockingDiagnostics = criticalDiagnosticChecks.filter((item) => !item.value);
+  const advisoryDiagnostics = warningDiagnosticChecks.filter((item) => !item.value);
+  const diagnosticsVerdict = blockingDiagnostics.length > 0 ? {
+    label: "Blocked",
+    tone: "#fca5a5",
+    background: "rgba(127, 29, 29, 0.28)",
+    border: "1px solid rgba(248, 113, 113, 0.24)",
+    text: "A core requirement is missing for the intended embed flow."
+  } : advisoryDiagnostics.length > 0 ? {
+    label: "Limited",
+    tone: "#fde68a",
+    background: "rgba(120, 53, 15, 0.24)",
+    border: "1px solid rgba(245, 158, 11, 0.22)",
+    text: "The embed should run, but some features or performance may be reduced."
+  } : {
+    label: "Ready",
+    tone: "#86efac",
+    background: "rgba(20, 83, 45, 0.24)",
+    border: "1px solid rgba(34, 197, 94, 0.22)",
+    text: "All key browser, performance, and iframe capabilities are present."
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: props.className,
+      style: {
+        position: "relative",
+        minHeight: "100vh",
+        overflow: "hidden",
+        padding: "32px 20px 48px",
+        background: "radial-gradient(circle at top left, rgba(56, 189, 248, 0.18) 0%, rgba(2, 6, 23, 0) 34%), radial-gradient(circle at 85% 10%, rgba(37, 99, 235, 0.18) 0%, rgba(2, 6, 23, 0) 26%), linear-gradient(180deg, #020617 0%, #050816 48%, #020617 100%)",
+        color: "#e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "hidden",
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "-120px",
+                    left: "-120px",
+                    width: "320px",
+                    height: "320px",
+                    borderRadius: "999px",
+                    background: "rgba(56, 189, 248, 0.12)",
+                    filter: "blur(60px)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    right: "-80px",
+                    top: "120px",
+                    width: "280px",
+                    height: "280px",
+                    borderRadius: "999px",
+                    background: "rgba(37, 99, 235, 0.12)",
+                    filter: "blur(60px)"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { style: { position: "relative", maxWidth: "1280px", margin: "0 auto" }, children: [
           /* @__PURE__ */ jsx2(
-            "button",
+            "div",
             {
-              type: "button",
               style: {
-                ...buttonStyle,
-                backgroundColor: "#0066cc",
-                color: "#ffffff",
-                border: "none",
-                fontWeight: "600"
+                ...panelStyle,
+                marginBottom: "24px",
+                padding: "28px",
+                background: "linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 15, 30, 0.98) 55%, rgba(15, 23, 42, 0.92) 100%)"
               },
-              onClick: handleRestart,
-              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#0052a3",
-              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#0066cc",
-              children: "\u{1F504} Restart Embed"
+              children: /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "20px",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { maxWidth: "720px" }, children: [
+                      /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            padding: "6px 12px",
+                            borderRadius: "999px",
+                            backgroundColor: "rgba(56, 189, 248, 0.12)",
+                            border: "1px solid rgba(125, 211, 252, 0.18)",
+                            color: "#7dd3fc",
+                            fontSize: "11px",
+                            fontWeight: 700,
+                            letterSpacing: "0.12em",
+                            textTransform: "uppercase"
+                          },
+                          children: "\u{1F9EA} Playruo QA Surface"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "h1",
+                        {
+                          style: {
+                            margin: "16px 0 12px 0",
+                            fontSize: "clamp(32px, 4vw, 46px)",
+                            lineHeight: 1.05,
+                            letterSpacing: "-0.04em",
+                            color: "#f8fafc"
+                          },
+                          children: "Embed Tester"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "p",
+                        {
+                          style: {
+                            margin: 0,
+                            maxWidth: "640px",
+                            color: "#94a3b8",
+                            fontSize: "16px",
+                            lineHeight: 1.7
+                          },
+                          children: "Edit configuration safely, apply changes only when you decide to, and keep runtime feedback visible without the UI fighting your typing."
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gap: "12px",
+                          gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
+                          flex: "1 1 320px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                padding: "16px",
+                                borderRadius: "18px",
+                                backgroundColor: "rgba(15, 23, 42, 0.72)",
+                                border: "1px solid rgba(148, 163, 184, 0.14)"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#94a3b8", marginBottom: "8px" }, children: "Active host" }),
+                                /* @__PURE__ */ jsx2("div", { style: { color: "#f8fafc", fontSize: "16px", fontWeight: 700 }, children: displayHost })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                padding: "16px",
+                                borderRadius: "18px",
+                                backgroundColor: hasPendingConfigChanges ? "rgba(35, 23, 8, 0.72)" : "rgba(15, 23, 42, 0.72)",
+                                border: hasPendingConfigChanges ? "1px solid rgba(245, 158, 11, 0.24)" : "1px solid rgba(148, 163, 184, 0.14)"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#94a3b8", marginBottom: "8px" }, children: "Config state" }),
+                                /* @__PURE__ */ jsxs2(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "10px",
+                                      color: hasPendingConfigChanges ? "#fbbf24" : "#86efac",
+                                      fontSize: "16px",
+                                      fontWeight: 700
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(hasPendingConfigChanges) }),
+                                      hasPendingConfigChanges ? `${pendingChangeCount} pending change(s)` : "Everything applied"
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-          /* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Status" }),
-          /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx2("span", { style: embedState.isReady ? successStatus : errorStatus, children: embedState.isReady ? "\u2705 Ready" : "\u274C Not Ready" }),
-            /* @__PURE__ */ jsx2("span", { style: embedState.hasPlayedOnce ? successStatus : errorStatus, children: embedState.hasPlayedOnce ? "\u2705 Played" : "\u274C Not Played" }),
-            /* @__PURE__ */ jsx2("span", { style: embedState.tryNow?.available ? successStatus : errorStatus, children: embedState.tryNow?.available ? "\u2705 Try Now" : "\u274C Try Now" }),
-            /* @__PURE__ */ jsx2("span", { style: embedState.buyNow?.available ? successStatus : errorStatus, children: embedState.buyNow?.available ? "\u2705 Buy Now" : "\u274C Buy Now" })
-          ] }),
-          !embedState.tryNow?.available && embedState.tryNow?.status && /* @__PURE__ */ jsxs2("p", { style: { margin: "8px 0 0 0", fontSize: "12px", color: "#a3a3a3" }, children: [
-            "Try Now reason: ",
-            embedState.tryNow.status
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-          /* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "\u{1F50D} Browser Diagnostics" }),
-          /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx2("span", { style: diagnostics.crossOriginIsolation ? successStatus : errorStatus, children: diagnostics.crossOriginIsolation ? "\u2705" : "\u274C" }),
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Cross-Origin Isolation" })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx2("span", { style: diagnostics.gamepadSupported ? successStatus : errorStatus, children: diagnostics.gamepadSupported ? "\u2705" : "\u274C" }),
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Gamepad API" })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx2("span", { style: diagnostics.fullscreenSupported ? successStatus : errorStatus, children: diagnostics.fullscreenSupported ? "\u2705" : "\u274C" }),
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Fullscreen API" })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx2("span", { style: diagnostics.keyboardLockSupported ? successStatus : errorStatus, children: diagnostics.keyboardLockSupported ? "\u2705" : "\u274C" }),
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: "#d4d4d4" }, children: "Keyboard Lock" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-          /* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Event Log" }),
-          /* @__PURE__ */ jsx2("div", { style: {
-            backgroundColor: "#0a0a0a",
-            padding: "12px",
-            borderRadius: "4px",
-            minHeight: "200px",
-            height: "min(50vh, 480px)",
-            overflowY: "auto",
-            fontFamily: "monospace",
-            fontSize: "12px",
-            border: "1px solid #333333"
-          }, children: eventLog.length ? /* @__PURE__ */ jsx2("div", { children: eventLog.map((event) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "4px" }, children: [
-            /* @__PURE__ */ jsxs2("span", { style: { color: "#737373" }, children: [
-              "[",
-              event.timestamp,
-              "]"
-            ] }),
-            " ",
-            /* @__PURE__ */ jsx2("span", { style: { color: "#e5e5e5" }, children: event.message })
-          ] }, event.timestamp)) }) : /* @__PURE__ */ jsx2("div", { style: { color: "#737373" }, children: "No events yet..." }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }, children: [
-          /* @__PURE__ */ jsx2("h3", { style: { margin: "0", fontSize: "18px", fontWeight: "600", color: "#ffffff" }, children: "Embed Container" }),
-          /* @__PURE__ */ jsxs2("span", { style: {
-            backgroundColor: "#2a2a2a",
-            color: "#e5e5e5",
-            padding: "4px 8px",
-            borderRadius: "12px",
-            fontSize: "12px",
-            fontWeight: "500",
-            border: "1px solid #404040"
-          }, children: [
-            "\u{1F9EA} ",
-            displayHost
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx2("div", { style: {
-          position: "relative",
-          minHeight: "500px",
-          overflow: "hidden",
-          borderRadius: "8px",
-          border: "1px solid #333333",
-          backgroundColor: "#0a0a0a"
-        }, children: /* @__PURE__ */ jsx2(
-          PlayruoEmbed,
-          {
-            baseUrl: props.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__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsxs2("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__ */ jsxs2("p", { style: { margin: "0", fontSize: "14px", color: "#d4d4d4" }, children: [
-                "Status: ",
-                /* @__PURE__ */ jsx2("span", { style: { color: "#ffffff", fontWeight: "600" }, children: status })
+          ),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", gap: "24px", alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ jsxs2("div", { style: { flex: "1 1 380px", minWidth: "320px" }, children: [
+              /* @__PURE__ */ jsxs2("div", { style: { ...panelStyle, marginBottom: "18px" }, children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexWrap: "wrap",
+                      justifyContent: "space-between",
+                      gap: "12px",
+                      marginBottom: "18px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("div", { children: [
+                        /* @__PURE__ */ jsx2("h3", { style: sectionTitleStyle, children: "Configuration" }),
+                        /* @__PURE__ */ jsxs2("p", { style: { ...helperTextStyle, marginTop: "6px" }, children: [
+                          "Draft values stay local until you press ",
+                          /* @__PURE__ */ jsx2("strong", { style: { color: "#e2e8f0" }, children: "Apply" }),
+                          "."
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs2("div", { style: buildIndicatorStyle(hasPendingConfigChanges), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(hasPendingConfigChanges) }),
+                        hasPendingConfigChanges ? "Not applied" : "Applied"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gap: "16px" }, children: [
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsxs2("label", { htmlFor: "operation", style: labelStyle, children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Operation" }),
+                      /* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isOperationPending), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isOperationPending) }),
+                        isOperationPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { style: buildInputShellStyle(isOperationPending), children: [
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          id: "operation",
+                          style: inputStyle,
+                          onChange: (e) => setOperationDraft(e.target.value),
+                          placeholder: "e.g. iframe",
+                          value: operationDraft
+                        }
+                      ),
+                      isOperationPending && /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            fontSize: "16px",
+                            color: "#fbbf24",
+                            fontWeight: 700
+                          },
+                          children: "!"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
+                      "Applied value: ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedOperation })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsxs2("label", { htmlFor: "storeUrl", style: labelStyle, children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Store URL" }),
+                      /* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isStoreUrlPending), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isStoreUrlPending) }),
+                        isStoreUrlPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { style: buildInputShellStyle(isStoreUrlPending), children: [
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          id: "storeUrl",
+                          style: inputStyle,
+                          onChange: (e) => setStoreUrlDraft(e.target.value),
+                          placeholder: "https://store.example.com",
+                          value: storeUrlDraft
+                        }
+                      ),
+                      isStoreUrlPending && /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            fontSize: "16px",
+                            color: "#fbbf24",
+                            fontWeight: 700
+                          },
+                          children: "!"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
+                      "Applied value: ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedStoreUrl })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: "12px",
+                      marginTop: "20px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          type: "button",
+                          style: buildButtonStyle("primary", !hasPendingConfigChanges),
+                          disabled: !hasPendingConfigChanges,
+                          onClick: handleApply,
+                          children: "Apply"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          type: "button",
+                          style: buildButtonStyle("secondary"),
+                          onClick: handleRestartSession,
+                          children: "Restart Session"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          type: "button",
+                          style: buildButtonStyle("ghost", !hasPendingConfigChanges),
+                          disabled: !hasPendingConfigChanges,
+                          onClick: handleResetDrafts,
+                          children: "Reset Drafts"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { ...panelStyle, marginBottom: "18px" }, children: [
+                /* @__PURE__ */ jsx2("h3", { style: sectionTitleStyle, children: "Runtime status" }),
+                /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "10px", marginTop: "16px" }, children: statusItems.map((item) => /* @__PURE__ */ jsxs2("span", { style: buildStatusChipStyle(item.value), children: [
+                  /* @__PURE__ */ jsx2("span", { children: item.value ? "\u25CF" : "\u25CB" }),
+                  item.label
+                ] }, item.label)) }),
+                !embedState.tryNow?.available && embedState.tryNow?.status && /* @__PURE__ */ jsxs2("p", { style: { ...helperTextStyle, marginTop: "14px" }, children: [
+                  "Try Now reason: ",
+                  /* @__PURE__ */ jsx2("span", { style: { color: "#cbd5e1" }, children: embedState.tryNow.status })
+                ] })
               ] }),
-              message && /* @__PURE__ */ jsx2("p", { style: { margin: "0", fontSize: "14px", color: "#d4d4d4" }, children: message }),
+              /* @__PURE__ */ jsxs2("div", { style: { ...panelStyle, marginBottom: "18px" }, children: [
+                /* @__PURE__ */ jsx2("h3", { style: sectionTitleStyle, children: "Browser diagnostics" }),
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      marginTop: "16px",
+                      padding: "16px 18px",
+                      borderRadius: "20px",
+                      background: diagnosticsVerdict.background,
+                      border: diagnosticsVerdict.border
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            flexWrap: "wrap",
+                            justifyContent: "space-between",
+                            gap: "12px",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs2("div", { children: [
+                              /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  style: {
+                                    color: diagnosticsVerdict.tone,
+                                    fontSize: "12px",
+                                    fontWeight: 700,
+                                    letterSpacing: "0.1em",
+                                    textTransform: "uppercase"
+                                  },
+                                  children: "Diagnostics verdict"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2("div", { style: { color: "#f8fafc", fontSize: "20px", fontWeight: 700, marginTop: "6px" }, children: diagnosticsVerdict.label })
+                            ] }),
+                            /* @__PURE__ */ jsx2("div", { style: { color: "#cbd5e1", fontSize: "13px", maxWidth: "420px", lineHeight: 1.6 }, children: diagnosticsVerdict.text })
+                          ]
+                        }
+                      ),
+                      (blockingDiagnostics.length > 0 || advisoryDiagnostics.length > 0) && /* @__PURE__ */ jsxs2(
+                        "div",
+                        {
+                          style: {
+                            display: "grid",
+                            gap: "10px",
+                            marginTop: "16px"
+                          },
+                          children: [
+                            blockingDiagnostics.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { color: "#fca5a5", fontSize: "13px", lineHeight: 1.6 }, children: [
+                              "Blocking: ",
+                              blockingDiagnostics.map((item) => item.label).join(", ")
+                            ] }),
+                            advisoryDiagnostics.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { color: "#fde68a", fontSize: "13px", lineHeight: 1.6 }, children: [
+                              "Worth checking: ",
+                              advisoryDiagnostics.map((item) => item.label).join(", ")
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gap: "14px",
+                      marginTop: "18px"
+                    },
+                    children: diagnosticGroups.map((group) => /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          padding: "16px",
+                          borderRadius: "20px",
+                          backgroundColor: "rgba(15, 23, 42, 0.42)",
+                          border: "1px solid rgba(148, 163, 184, 0.12)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "div",
+                            {
+                              style: {
+                                color: "#e2e8f0",
+                                fontSize: "14px",
+                                fontWeight: 700,
+                                marginBottom: "14px"
+                              },
+                              children: group.title
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            "div",
+                            {
+                              style: {
+                                display: "grid",
+                                gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
+                                gap: "12px"
+                              },
+                              children: group.items.map((item) => /* @__PURE__ */ jsxs2(
+                                "div",
+                                {
+                                  style: {
+                                    padding: "14px 16px",
+                                    borderRadius: "18px",
+                                    backgroundColor: item.value ? "rgba(8, 31, 17, 0.72)" : "rgba(42, 12, 12, 0.52)",
+                                    border: item.value ? "1px solid rgba(34, 197, 94, 0.18)" : "1px solid rgba(248, 113, 113, 0.18)"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx2("div", { style: { color: "#94a3b8", fontSize: "12px", marginBottom: "8px" }, children: item.label }),
+                                    /* @__PURE__ */ jsxs2(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          gap: "8px",
+                                          color: item.value ? "#86efac" : "#fca5a5",
+                                          fontWeight: 700
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx2("span", { children: item.value ? "\u2713" : "\u2715" }),
+                                          item.value ? "Available" : "Missing"
+                                        ]
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx2("div", { style: { color: "#94a3b8", fontSize: "12px", lineHeight: 1.5, marginTop: "10px" }, children: item.detail })
+                                  ]
+                                },
+                                item.label
+                              ))
+                            }
+                          )
+                        ]
+                      },
+                      group.title
+                    ))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: panelStyle, children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      gap: "12px",
+                      marginBottom: "16px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2("h3", { style: sectionTitleStyle, children: "Event log" }),
+                      /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "4px 10px" }, children: [
+                        eventLog.length,
+                        " recent events"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      background: "linear-gradient(180deg, rgba(2, 6, 23, 0.88) 0%, rgba(2, 6, 23, 0.64) 100%)",
+                      padding: "14px",
+                      borderRadius: "18px",
+                      minHeight: "220px",
+                      height: "min(46vh, 420px)",
+                      overflowY: "auto",
+                      fontFamily: '"SF Mono", "Roboto Mono", monospace',
+                      fontSize: "12px",
+                      border: "1px solid rgba(148, 163, 184, 0.12)"
+                    },
+                    children: eventLog.length ? /* @__PURE__ */ jsx2("div", { style: { display: "grid", gap: "10px" }, children: eventLog.map((event) => /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          paddingBottom: "10px",
+                          borderBottom: "1px solid rgba(148, 163, 184, 0.08)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2("div", { style: { color: "#64748b", marginBottom: "4px" }, children: event.timestamp }),
+                          /* @__PURE__ */ jsx2("div", { style: { color: "#e2e8f0", lineHeight: 1.6 }, children: event.message })
+                        ]
+                      },
+                      event.id
+                    )) }) : /* @__PURE__ */ jsx2("div", { style: { color: "#64748b" }, children: "No events yet. Start a session or apply a config change." })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx2("div", { style: { flex: "1 1 560px", minWidth: "320px" }, children: /* @__PURE__ */ jsxs2("div", { style: { ...panelStyle, padding: "24px" }, children: [
               /* @__PURE__ */ jsxs2(
-                "button",
+                "div",
                 {
-                  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();
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    gap: "12px",
+                    marginBottom: "16px"
                   },
                   children: [
-                    "\u{1F3AE} ",
-                    embedState.hasPlayedOnce ? "Resume Game" : "Try Demo Now"
+                    /* @__PURE__ */ jsxs2("div", { children: [
+                      /* @__PURE__ */ jsx2("h3", { style: sectionTitleStyle, children: "Embed preview" }),
+                      /* @__PURE__ */ jsx2("p", { style: { ...helperTextStyle, marginTop: "6px" }, children: "The live iframe always reflects the applied configuration." })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", gap: "10px" }, children: [
+                      /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
+                        "Host: ",
+                        displayHost
+                      ] }),
+                      /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
+                        "Operation: ",
+                        appliedOperation
+                      ] })
+                    ] })
                   ]
                 }
               ),
-              actions.canBuyNow && /* @__PURE__ */ jsx2(
-                "button",
+              hasPendingConfigChanges && /* @__PURE__ */ jsxs2(
+                "div",
                 {
-                  type: "button",
                   style: {
-                    ...buttonStyle,
-                    backgroundColor: "#525252",
-                    color: "#ffffff",
-                    border: "none",
-                    padding: "8px 16px",
-                    fontSize: "14px",
-                    fontWeight: "500"
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    padding: "14px 16px",
+                    marginBottom: "16px",
+                    borderRadius: "18px",
+                    backgroundColor: "rgba(35, 23, 8, 0.72)",
+                    border: "1px solid rgba(245, 158, 11, 0.22)",
+                    color: "#fde68a"
                   },
-                  onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#404040",
-                  onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#525252",
-                  onClick: () => {
-                    addEvent("Buy Now clicked");
-                    actions.buyNow();
+                  children: [
+                    /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(true) }),
+                    "Draft values are ready but not applied to the iframe yet."
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    minHeight: "640px",
+                    overflow: "hidden",
+                    borderRadius: "24px",
+                    border: "1px solid rgba(148, 163, 184, 0.14)",
+                    background: "linear-gradient(180deg, rgba(3, 7, 18, 0.86) 0%, rgba(2, 6, 23, 1) 100%)",
+                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04)"
                   },
-                  children: "Buy Now"
+                  children: [
+                    /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: "12px",
+                          padding: "14px 18px",
+                          borderBottom: "1px solid rgba(148, 163, 184, 0.08)",
+                          backgroundColor: "rgba(15, 23, 42, 0.52)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                            /* @__PURE__ */ jsx2("span", { style: { width: "10px", height: "10px", borderRadius: "999px", backgroundColor: "#f97316" } }),
+                            /* @__PURE__ */ jsx2("span", { style: { width: "10px", height: "10px", borderRadius: "999px", backgroundColor: "#facc15" } }),
+                            /* @__PURE__ */ jsx2("span", { style: { width: "10px", height: "10px", borderRadius: "999px", backgroundColor: "#4ade80" } })
+                          ] }),
+                          /* @__PURE__ */ jsxs2("span", { style: { color: "#94a3b8", fontSize: "12px", fontFamily: '"SF Mono", "Roboto Mono", monospace' }, children: [
+                            "/embed?operation=",
+                            appliedOperation
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      PlayruoEmbed,
+                      {
+                        baseUrl: props.baseUrl,
+                        className: "w-full h-full absolute inset-0",
+                        iframeRef,
+                        onDemoCompleted: handleDemoCompleted,
+                        onError: handleError,
+                        onPurchaseRequest: handlePurchaseRequest,
+                        onReady: handleReady,
+                        onStateChange: handleStateChange,
+                        operation: appliedOperation,
+                        renderState: ({ actions, message, status }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              inset: "53px 0 0 0",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              padding: "24px",
+                              background: "linear-gradient(180deg, rgba(2, 6, 23, 0.4) 0%, rgba(2, 6, 23, 0.84) 70%, rgba(2, 6, 23, 0.9) 100%)",
+                              backdropFilter: "blur(12px)",
+                              zIndex: 50
+                            },
+                            children: /* @__PURE__ */ jsxs2(
+                              "div",
+                              {
+                                style: {
+                                  width: "min(100%, 420px)",
+                                  padding: "28px",
+                                  borderRadius: "28px",
+                                  border: "1px solid rgba(148, 163, 184, 0.18)",
+                                  background: "linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(7, 12, 24, 0.98) 100%)",
+                                  boxShadow: "0 32px 72px rgba(0, 0, 0, 0.35)"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx2(
+                                    "div",
+                                    {
+                                      style: {
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        gap: "10px",
+                                        padding: "6px 12px",
+                                        borderRadius: "999px",
+                                        backgroundColor: "rgba(56, 189, 248, 0.12)",
+                                        border: "1px solid rgba(125, 211, 252, 0.18)",
+                                        color: "#7dd3fc",
+                                        fontSize: "11px",
+                                        fontWeight: 700,
+                                        letterSpacing: "0.08em",
+                                        textTransform: "uppercase"
+                                      },
+                                      children: "Live overlay"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx2(
+                                    "h4",
+                                    {
+                                      style: {
+                                        margin: "18px 0 10px 0",
+                                        color: "#f8fafc",
+                                        fontSize: "28px",
+                                        letterSpacing: "-0.03em"
+                                      },
+                                      children: embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs2("p", { style: { margin: 0, color: "#94a3b8", lineHeight: 1.7 }, children: [
+                                    "Status: ",
+                                    /* @__PURE__ */ jsx2("span", { style: { color: "#f8fafc", fontWeight: 700 }, children: status })
+                                  ] }),
+                                  message && /* @__PURE__ */ jsx2("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
+                                  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", gap: "12px", marginTop: "24px" }, children: [
+                                    /* @__PURE__ */ jsxs2(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        style: buildButtonStyle("primary", !actions.canTryNow),
+                                        disabled: !actions.canTryNow,
+                                        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__ */ jsx2(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        style: buildButtonStyle("secondary"),
+                                        onClick: () => {
+                                          addEvent("Buy Now clicked");
+                                          actions.buyNow();
+                                        },
+                                        children: "Buy Now"
+                                      }
+                                    )
+                                  ] })
+                                ]
+                              }
+                            )
+                          }
+                        ) }),
+                        showIframe,
+                        storeUrl: appliedStoreUrl
+                      },
+                      key
+                    )
+                  ]
                 }
               )
-            ] }) }),
-            showIframe,
-            storeUrl
-          },
-          key
-        ) })
-      ] }) })
-    ] })
-  ] }) });
+            ] }) })
+          ] })
+        ] })
+      ]
+    }
+  );
 };
 
 // src/post-message-types.ts