@playruo/embed 1.7.0 → 1.8.1

package/dist/index.cjs

@@ -211,6 +211,14 @@ var PlayruoEmbed = ({
   }, []);
   const isCompatible = !isMobile && isValidChromium;
   const isReady = isCompatible ? isIframeLoaded : true;
+  (0, import_react.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || iframe.getAttribute("src") === src) {
+      return;
+    }
+    iframe.setAttribute("credentialless", "");
+    iframe.src = src;
+  }, [iframeRef, isCompatible, src]);
   const currentState = (0, import_react.useMemo)(() => {
     if (iframeState) {
       return iframeState;
@@ -283,7 +291,7 @@ var PlayruoEmbed = ({
           embedOrigin
         );
       } catch {
-        console.error("[PlayruoEmbed] Failed to send the password action");
+        console.error("[PlayruoEmbed] Failed to send iframe action");
       }
     },
     [embedOrigin, iframeRef]
@@ -806,7 +814,9 @@ var PlayruoEmbed = ({
       tryNow: handleTryNow,
       buyNow: handleBuyNow,
       canTryNow,
-      canBuyNow: Boolean(isReady),
+      canBuyNow: Boolean(isReady && storeUrl),
+      mute: () => postPasswordAction({ action: "mute" }),
+      unmute: () => postPasswordAction({ action: "unmute" }),
       submitPassword: (password2) => {
         if (!password2) {
           return;
@@ -872,10 +882,8 @@ var PlayruoEmbed = ({
       "iframe",
       {
         ref: iframeRef,
-        src,
         allow: PLAYRUO_IFRAME_ALLOW,
         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",
@@ -887,8 +895,10 @@ var PlayruoEmbed = ({
           height: "100%",
           border: 0
         },
-        onLoad: () => {
-          setIsIframeLoaded(true);
+        onLoad: (event) => {
+          if (event.currentTarget.getAttribute("src")) {
+            setIsIframeLoaded(true);
+          }
         },
         onError: () => {
           console.error("[PlayruoEmbed] Iframe failed to load");
@@ -929,6 +939,7 @@ var createInitialDiagnostics = () => ({
 });
 var EmbedTester = (props = {}) => {
   const [operationDraft, setOperationDraft] = (0, import_react2.useState)(props.operation ?? "iframe");
+  const [operationKeyDraft, setOperationKeyDraft] = (0, import_react2.useState)(props.operationKey ?? "");
   const [storeUrlDraft, setStoreUrlDraft] = (0, import_react2.useState)(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
@@ -936,6 +947,7 @@ var EmbedTester = (props = {}) => {
     props.enableWindowedLaunch ?? false
   );
   const [appliedOperation, setAppliedOperation] = (0, import_react2.useState)(props.operation ?? "iframe");
+  const [appliedOperationKey, setAppliedOperationKey] = (0, import_react2.useState)(props.operationKey ?? "");
   const [appliedStoreUrl, setAppliedStoreUrl] = (0, import_react2.useState)(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
@@ -945,6 +957,7 @@ var EmbedTester = (props = {}) => {
   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 [overlayPassword, setOverlayPassword] = (0, import_react2.useState)("");
   const [embedState, setEmbedState] = (0, import_react2.useState)(createInitialEmbedState);
   const [eventLog, setEventLog] = (0, import_react2.useState)([]);
   const [diagnostics, setDiagnostics] = (0, import_react2.useState)(createInitialDiagnostics);
@@ -955,10 +968,11 @@ var EmbedTester = (props = {}) => {
   const previousStateRef = (0, import_react2.useRef)("");
   const iframeRef = (0, import_react2.useRef)(null);
   const isOperationPending = operationDraft !== appliedOperation;
+  const isOperationKeyPending = operationKeyDraft !== appliedOperationKey;
   const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
   const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
-  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
-  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
+  const hasPendingConfigChanges = isOperationPending || isOperationKeyPending || isStoreUrlPending || isWindowedLaunchPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isOperationKeyPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
   const addEvent = (0, import_react2.useCallback)(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
@@ -1043,7 +1057,7 @@ var EmbedTester = (props = {}) => {
     }
   }, [addEvent, enableConsoleLog]);
   const handleEvent = (0, import_react2.useCallback)((data) => {
-    const eventName = typeof data.event === "string" ? data.event : typeof data.name === "string" ? data.name : "unknown";
+    const eventName = typeof data.name === "string" ? data.name : typeof data.event === "string" ? data.event : "unknown";
     addEvent(`Event received: ${eventName}`);
     if (enableConsoleLog) {
       console.log("Embed event:", data);
@@ -1059,25 +1073,40 @@ var EmbedTester = (props = {}) => {
     setKey((prev) => prev + 1);
     setHasUserClicked(false);
     setShowIframe(false);
+    setOverlayPassword("");
     hasReadyBeenCalled.current = false;
     previousStateRef.current = "";
     addEvent(message);
   }, [addEvent]);
   const handleApply = (0, import_react2.useCallback)(() => {
     setAppliedOperation(operationDraft);
+    setAppliedOperationKey(operationKeyDraft);
     setAppliedStoreUrl(storeUrlDraft);
     setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
     resetEmbedSession("Applied updated embed settings");
-  }, [enableWindowedLaunchDraft, operationDraft, resetEmbedSession, storeUrlDraft]);
+  }, [
+    enableWindowedLaunchDraft,
+    operationDraft,
+    operationKeyDraft,
+    resetEmbedSession,
+    storeUrlDraft
+  ]);
   const handleRestartSession = (0, import_react2.useCallback)(() => {
     resetEmbedSession("Embed restarted with applied settings");
   }, [resetEmbedSession]);
   const handleResetDrafts = (0, import_react2.useCallback)(() => {
     setOperationDraft(appliedOperation);
+    setOperationKeyDraft(appliedOperationKey);
     setStoreUrlDraft(appliedStoreUrl);
     setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
     addEvent("Reverted draft changes to the applied configuration");
-  }, [addEvent, appliedEnableWindowedLaunch, appliedOperation, appliedStoreUrl]);
+  }, [
+    addEvent,
+    appliedEnableWindowedLaunch,
+    appliedOperation,
+    appliedOperationKey,
+    appliedStoreUrl
+  ]);
   const panelStyle = {
     position: "relative",
     border: "1px solid rgba(148, 163, 184, 0.18)",
@@ -1609,6 +1638,46 @@ var EmbedTester = (props = {}) => {
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedOperation })
                     ] })
                   ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: "operationKey", style: labelStyle, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Op key" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: buildIndicatorStyle(isOperationKeyPending), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: buildIndicatorDotStyle(isOperationKeyPending) }),
+                        isOperationKeyPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: buildInputShellStyle(isOperationKeyPending), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "input",
+                        {
+                          id: "operationKey",
+                          style: inputStyle,
+                          onChange: (e) => setOperationKeyDraft(e.target.value),
+                          placeholder: "e.g. embed-password",
+                          value: operationKeyDraft
+                        }
+                      ),
+                      isOperationKeyPending && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            fontSize: "16px",
+                            color: "#fbbf24",
+                            fontWeight: 700
+                          },
+                          children: "!"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: helperTextStyle, children: [
+                      "Optional ",
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: "?op=" }),
+                      " when the path is the campaign. Applied:",
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedOperationKey || "(none)" })
+                    ] })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: "storeUrl", style: labelStyle, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Store URL" }),
@@ -2049,7 +2118,8 @@ var EmbedTester = (props = {}) => {
                         onStateChange: handleStateChange,
                         enableWindowedLaunch: appliedEnableWindowedLaunch,
                         operation: appliedOperation,
-                        renderState: ({ actions, message, status }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !hasUserClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        operationKey: appliedOperationKey || void 0,
+                        renderState: ({ actions, message, status, password }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !hasUserClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           "div",
                           {
                             style: {
@@ -2104,48 +2174,117 @@ var EmbedTester = (props = {}) => {
                                         fontSize: "28px",
                                         letterSpacing: "-0.03em"
                                       },
-                                      children: embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
+                                      children: password?.required && !password.unlocked ? "Password required" : embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
                                     }
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { margin: 0, color: "#94a3b8", lineHeight: 1.7 }, children: [
-                                    "Status: ",
+                                    "Status:",
+                                    " ",
                                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#f8fafc", fontWeight: 700 }, children: status })
                                   ] }),
-                                  message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "12px", marginTop: "24px" }, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                                      "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__ */ (0, import_jsx_runtime2.jsx)(
-                                      "button",
-                                      {
-                                        type: "button",
-                                        style: buildButtonStyle("secondary"),
-                                        onClick: () => {
-                                          addEvent("Buy Now clicked");
-                                          actions.buyNow();
-                                        },
-                                        children: "Buy Now"
-                                      }
-                                    )
-                                  ] })
+                                  message && !(password?.required && !password.unlocked) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
+                                  password?.required && !password.unlocked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                    "form",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        flexWrap: "wrap",
+                                        gap: "12px",
+                                        marginTop: "24px",
+                                        alignItems: "center"
+                                      },
+                                      onSubmit: (event) => {
+                                        event.preventDefault();
+                                        if (!overlayPassword) {
+                                          return;
+                                        }
+                                        actions.submitPassword(overlayPassword);
+                                        setOverlayPassword("");
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "input",
+                                          {
+                                            "aria-label": "Operation password",
+                                            autoComplete: "off",
+                                            onChange: (event) => setOverlayPassword(event.target.value),
+                                            placeholder: "Operation password",
+                                            style: {
+                                              flex: "1 1 180px",
+                                              minWidth: "140px",
+                                              padding: "12px 14px",
+                                              borderRadius: "12px",
+                                              border: "1px solid rgba(148, 163, 184, 0.28)",
+                                              backgroundColor: "rgba(15, 23, 42, 0.9)",
+                                              color: "#f8fafc"
+                                            },
+                                            type: "password",
+                                            value: overlayPassword
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "button",
+                                          {
+                                            type: "submit",
+                                            style: buildButtonStyle("primary", !overlayPassword),
+                                            disabled: !overlayPassword,
+                                            children: "Unlock"
+                                          }
+                                        ),
+                                        password.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "p",
+                                          {
+                                            style: {
+                                              flex: "1 1 100%",
+                                              margin: 0,
+                                              color: "#fca5a5",
+                                              fontSize: "13px"
+                                            },
+                                            children: password.error
+                                          }
+                                        ) : null
+                                      ]
+                                    }
+                                  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                    "div",
+                                    {
+                                      style: { display: "flex", flexWrap: "wrap", gap: "12px", marginTop: "24px" },
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                          "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__ */ (0, import_jsx_runtime2.jsx)(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            style: buildButtonStyle("secondary"),
+                                            onClick: () => {
+                                              addEvent("Buy Now clicked");
+                                              actions.buyNow();
+                                            },
+                                            children: "Buy Now"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  )
                                 ]
                               }
                             )

package/dist/index.d.cts

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { FC, ReactNode } from 'react';
 
 /**
  * iframe `allow` feature policy delegated to the Playruo player.
@@ -28,7 +27,13 @@ interface DemoCompletedPayload {
 type PlayruoEventPayload = Record<string, unknown> & {
     action?: string;
     category?: string;
+    /**
+     * @deprecated The webapp puts the event identifier on `name`. Nothing it
+     * posts carries `event`, so a host switching on it never matches. Kept so
+     * older hosts still compile.
+     */
     event?: string;
+    /** Event identifier, snake_case (`auth_ok`, `streaming`, `vmnok`). */
     name?: string;
 };
 
@@ -162,8 +167,16 @@ interface PlayruoEmbedActions {
     buyNow: () => void;
     /** Whether try now is currently available */
     canTryNow: boolean;
-    /** Whether buy now is currently available */
+    /**
+     * Whether buy now can call `onPurchaseRequest`. True only when the SDK is
+     * ready and a `storeUrl` prop is set. Compatible with mobile/unavailable
+     * hosts that still want a store CTA.
+     */
     canBuyNow: boolean;
+    /** Mute active stream audio. No acknowledgement is returned. */
+    mute: () => void;
+    /** Resume and unmute stream audio. No acknowledgement is returned. */
+    unmute: () => void;
     /** Send the password collected by the host to a protected operation. */
     submitPassword: (password: string) => void;
     /**
@@ -263,12 +276,14 @@ interface EmbedTesterProps {
     baseUrl?: string;
     enableConsoleLog?: boolean;
     operation?: string;
+    /** Optional ?op= key when the campaign path is not the operation itself. */
+    operationKey?: string;
     storeUrl?: string;
     /** Start the experience inside the iframe without requesting parent fullscreen. */
     enableWindowedLaunch?: boolean;
     className?: string;
 }
-declare const EmbedTester: (props?: EmbedTesterProps) => react_jsx_runtime.JSX.Element;
+declare const EmbedTester: (props?: EmbedTesterProps) => React$1.JSX.Element;
 
 interface BuildUrlParams {
     operation: string;
@@ -291,8 +306,8 @@ declare const buildEmbedUrl: ({ operation, operationKey, storeUrl, }: BuildUrlPa
 declare const PLAYRUO_UUID_STORAGE_KEY = "playruo_uuid";
 /**
  * Visitor identity the host answers on `playruo_uuid_request`.
- * Same rule as PlayruoEmbed `clientFingerprint`: a non-empty value is used as-is
- * and is not written to localStorage. Otherwise the SDK-managed UUID is used.
+ * Same rule as PlayruoEmbed `clientFingerprint`: a non-empty trimmed value is
+ * used and is not written to localStorage. Otherwise the SDK-managed UUID is used.
  */
 declare const resolveVisitorUuid: (clientFingerprint?: string) => string;
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { FC, ReactNode } from 'react';
 
 /**
  * iframe `allow` feature policy delegated to the Playruo player.
@@ -28,7 +27,13 @@ interface DemoCompletedPayload {
 type PlayruoEventPayload = Record<string, unknown> & {
     action?: string;
     category?: string;
+    /**
+     * @deprecated The webapp puts the event identifier on `name`. Nothing it
+     * posts carries `event`, so a host switching on it never matches. Kept so
+     * older hosts still compile.
+     */
     event?: string;
+    /** Event identifier, snake_case (`auth_ok`, `streaming`, `vmnok`). */
     name?: string;
 };
 
@@ -162,8 +167,16 @@ interface PlayruoEmbedActions {
     buyNow: () => void;
     /** Whether try now is currently available */
     canTryNow: boolean;
-    /** Whether buy now is currently available */
+    /**
+     * Whether buy now can call `onPurchaseRequest`. True only when the SDK is
+     * ready and a `storeUrl` prop is set. Compatible with mobile/unavailable
+     * hosts that still want a store CTA.
+     */
     canBuyNow: boolean;
+    /** Mute active stream audio. No acknowledgement is returned. */
+    mute: () => void;
+    /** Resume and unmute stream audio. No acknowledgement is returned. */
+    unmute: () => void;
     /** Send the password collected by the host to a protected operation. */
     submitPassword: (password: string) => void;
     /**
@@ -263,12 +276,14 @@ interface EmbedTesterProps {
     baseUrl?: string;
     enableConsoleLog?: boolean;
     operation?: string;
+    /** Optional ?op= key when the campaign path is not the operation itself. */
+    operationKey?: string;
     storeUrl?: string;
     /** Start the experience inside the iframe without requesting parent fullscreen. */
     enableWindowedLaunch?: boolean;
     className?: string;
 }
-declare const EmbedTester: (props?: EmbedTesterProps) => react_jsx_runtime.JSX.Element;
+declare const EmbedTester: (props?: EmbedTesterProps) => React$1.JSX.Element;
 
 interface BuildUrlParams {
     operation: string;
@@ -291,8 +306,8 @@ declare const buildEmbedUrl: ({ operation, operationKey, storeUrl, }: BuildUrlPa
 declare const PLAYRUO_UUID_STORAGE_KEY = "playruo_uuid";
 /**
  * Visitor identity the host answers on `playruo_uuid_request`.
- * Same rule as PlayruoEmbed `clientFingerprint`: a non-empty value is used as-is
- * and is not written to localStorage. Otherwise the SDK-managed UUID is used.
+ * Same rule as PlayruoEmbed `clientFingerprint`: a non-empty trimmed value is
+ * used and is not written to localStorage. Otherwise the SDK-managed UUID is used.
  */
 declare const resolveVisitorUuid: (clientFingerprint?: string) => string;
 

package/dist/index.js

@@ -167,6 +167,14 @@ var PlayruoEmbed = ({
   }, []);
   const isCompatible = !isMobile && isValidChromium;
   const isReady = isCompatible ? isIframeLoaded : true;
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || iframe.getAttribute("src") === src) {
+      return;
+    }
+    iframe.setAttribute("credentialless", "");
+    iframe.src = src;
+  }, [iframeRef, isCompatible, src]);
   const currentState = useMemo(() => {
     if (iframeState) {
       return iframeState;
@@ -239,7 +247,7 @@ var PlayruoEmbed = ({
           embedOrigin
         );
       } catch {
-        console.error("[PlayruoEmbed] Failed to send the password action");
+        console.error("[PlayruoEmbed] Failed to send iframe action");
       }
     },
     [embedOrigin, iframeRef]
@@ -762,7 +770,9 @@ var PlayruoEmbed = ({
       tryNow: handleTryNow,
       buyNow: handleBuyNow,
       canTryNow,
-      canBuyNow: Boolean(isReady),
+      canBuyNow: Boolean(isReady && storeUrl),
+      mute: () => postPasswordAction({ action: "mute" }),
+      unmute: () => postPasswordAction({ action: "unmute" }),
       submitPassword: (password2) => {
         if (!password2) {
           return;
@@ -828,10 +838,8 @@ var PlayruoEmbed = ({
       "iframe",
       {
         ref: iframeRef,
-        src,
         allow: PLAYRUO_IFRAME_ALLOW,
         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",
@@ -843,8 +851,10 @@ var PlayruoEmbed = ({
           height: "100%",
           border: 0
         },
-        onLoad: () => {
-          setIsIframeLoaded(true);
+        onLoad: (event) => {
+          if (event.currentTarget.getAttribute("src")) {
+            setIsIframeLoaded(true);
+          }
         },
         onError: () => {
           console.error("[PlayruoEmbed] Iframe failed to load");
@@ -885,6 +895,7 @@ var createInitialDiagnostics = () => ({
 });
 var EmbedTester = (props = {}) => {
   const [operationDraft, setOperationDraft] = useState2(props.operation ?? "iframe");
+  const [operationKeyDraft, setOperationKeyDraft] = useState2(props.operationKey ?? "");
   const [storeUrlDraft, setStoreUrlDraft] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
@@ -892,6 +903,7 @@ var EmbedTester = (props = {}) => {
     props.enableWindowedLaunch ?? false
   );
   const [appliedOperation, setAppliedOperation] = useState2(props.operation ?? "iframe");
+  const [appliedOperationKey, setAppliedOperationKey] = useState2(props.operationKey ?? "");
   const [appliedStoreUrl, setAppliedStoreUrl] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
@@ -901,6 +913,7 @@ var EmbedTester = (props = {}) => {
   const [key, setKey] = useState2(0);
   const [hasUserClicked, setHasUserClicked] = useState2(false);
   const [showIframe, setShowIframe] = useState2(false);
+  const [overlayPassword, setOverlayPassword] = useState2("");
   const [embedState, setEmbedState] = useState2(createInitialEmbedState);
   const [eventLog, setEventLog] = useState2([]);
   const [diagnostics, setDiagnostics] = useState2(createInitialDiagnostics);
@@ -911,10 +924,11 @@ var EmbedTester = (props = {}) => {
   const previousStateRef = useRef2("");
   const iframeRef = useRef2(null);
   const isOperationPending = operationDraft !== appliedOperation;
+  const isOperationKeyPending = operationKeyDraft !== appliedOperationKey;
   const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
   const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
-  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
-  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
+  const hasPendingConfigChanges = isOperationPending || isOperationKeyPending || isStoreUrlPending || isWindowedLaunchPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isOperationKeyPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
   const addEvent = useCallback2(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
@@ -999,7 +1013,7 @@ var EmbedTester = (props = {}) => {
     }
   }, [addEvent, enableConsoleLog]);
   const handleEvent = useCallback2((data) => {
-    const eventName = typeof data.event === "string" ? data.event : typeof data.name === "string" ? data.name : "unknown";
+    const eventName = typeof data.name === "string" ? data.name : typeof data.event === "string" ? data.event : "unknown";
     addEvent(`Event received: ${eventName}`);
     if (enableConsoleLog) {
       console.log("Embed event:", data);
@@ -1015,25 +1029,40 @@ var EmbedTester = (props = {}) => {
     setKey((prev) => prev + 1);
     setHasUserClicked(false);
     setShowIframe(false);
+    setOverlayPassword("");
     hasReadyBeenCalled.current = false;
     previousStateRef.current = "";
     addEvent(message);
   }, [addEvent]);
   const handleApply = useCallback2(() => {
     setAppliedOperation(operationDraft);
+    setAppliedOperationKey(operationKeyDraft);
     setAppliedStoreUrl(storeUrlDraft);
     setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
     resetEmbedSession("Applied updated embed settings");
-  }, [enableWindowedLaunchDraft, operationDraft, resetEmbedSession, storeUrlDraft]);
+  }, [
+    enableWindowedLaunchDraft,
+    operationDraft,
+    operationKeyDraft,
+    resetEmbedSession,
+    storeUrlDraft
+  ]);
   const handleRestartSession = useCallback2(() => {
     resetEmbedSession("Embed restarted with applied settings");
   }, [resetEmbedSession]);
   const handleResetDrafts = useCallback2(() => {
     setOperationDraft(appliedOperation);
+    setOperationKeyDraft(appliedOperationKey);
     setStoreUrlDraft(appliedStoreUrl);
     setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
     addEvent("Reverted draft changes to the applied configuration");
-  }, [addEvent, appliedEnableWindowedLaunch, appliedOperation, appliedStoreUrl]);
+  }, [
+    addEvent,
+    appliedEnableWindowedLaunch,
+    appliedOperation,
+    appliedOperationKey,
+    appliedStoreUrl
+  ]);
   const panelStyle = {
     position: "relative",
     border: "1px solid rgba(148, 163, 184, 0.18)",
@@ -1565,6 +1594,46 @@ var EmbedTester = (props = {}) => {
                       /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedOperation })
                     ] })
                   ] }),
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsxs2("label", { htmlFor: "operationKey", style: labelStyle, children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Op key" }),
+                      /* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isOperationKeyPending), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isOperationKeyPending) }),
+                        isOperationKeyPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { style: buildInputShellStyle(isOperationKeyPending), children: [
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          id: "operationKey",
+                          style: inputStyle,
+                          onChange: (e) => setOperationKeyDraft(e.target.value),
+                          placeholder: "e.g. embed-password",
+                          value: operationKeyDraft
+                        }
+                      ),
+                      isOperationKeyPending && /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            fontSize: "16px",
+                            color: "#fbbf24",
+                            fontWeight: 700
+                          },
+                          children: "!"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
+                      "Optional ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: "?op=" }),
+                      " when the path is the campaign. Applied:",
+                      " ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedOperationKey || "(none)" })
+                    ] })
+                  ] }),
                   /* @__PURE__ */ jsxs2("div", { children: [
                     /* @__PURE__ */ jsxs2("label", { htmlFor: "storeUrl", style: labelStyle, children: [
                       /* @__PURE__ */ jsx2("span", { children: "Store URL" }),
@@ -2005,7 +2074,8 @@ var EmbedTester = (props = {}) => {
                         onStateChange: handleStateChange,
                         enableWindowedLaunch: appliedEnableWindowedLaunch,
                         operation: appliedOperation,
-                        renderState: ({ actions, message, status }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
+                        operationKey: appliedOperationKey || void 0,
+                        renderState: ({ actions, message, status, password }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
                           "div",
                           {
                             style: {
@@ -2060,48 +2130,117 @@ var EmbedTester = (props = {}) => {
                                         fontSize: "28px",
                                         letterSpacing: "-0.03em"
                                       },
-                                      children: embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
+                                      children: password?.required && !password.unlocked ? "Password required" : embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
                                     }
                                   ),
                                   /* @__PURE__ */ jsxs2("p", { style: { margin: 0, color: "#94a3b8", lineHeight: 1.7 }, children: [
-                                    "Status: ",
+                                    "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"
-                                      }
-                                    )
-                                  ] })
+                                  message && !(password?.required && !password.unlocked) && /* @__PURE__ */ jsx2("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
+                                  password?.required && !password.unlocked ? /* @__PURE__ */ jsxs2(
+                                    "form",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        flexWrap: "wrap",
+                                        gap: "12px",
+                                        marginTop: "24px",
+                                        alignItems: "center"
+                                      },
+                                      onSubmit: (event) => {
+                                        event.preventDefault();
+                                        if (!overlayPassword) {
+                                          return;
+                                        }
+                                        actions.submitPassword(overlayPassword);
+                                        setOverlayPassword("");
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx2(
+                                          "input",
+                                          {
+                                            "aria-label": "Operation password",
+                                            autoComplete: "off",
+                                            onChange: (event) => setOverlayPassword(event.target.value),
+                                            placeholder: "Operation password",
+                                            style: {
+                                              flex: "1 1 180px",
+                                              minWidth: "140px",
+                                              padding: "12px 14px",
+                                              borderRadius: "12px",
+                                              border: "1px solid rgba(148, 163, 184, 0.28)",
+                                              backgroundColor: "rgba(15, 23, 42, 0.9)",
+                                              color: "#f8fafc"
+                                            },
+                                            type: "password",
+                                            value: overlayPassword
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx2(
+                                          "button",
+                                          {
+                                            type: "submit",
+                                            style: buildButtonStyle("primary", !overlayPassword),
+                                            disabled: !overlayPassword,
+                                            children: "Unlock"
+                                          }
+                                        ),
+                                        password.error ? /* @__PURE__ */ jsx2(
+                                          "p",
+                                          {
+                                            style: {
+                                              flex: "1 1 100%",
+                                              margin: 0,
+                                              color: "#fca5a5",
+                                              fontSize: "13px"
+                                            },
+                                            children: password.error
+                                          }
+                                        ) : null
+                                      ]
+                                    }
+                                  ) : /* @__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"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  )
                                 ]
                               }
                             )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playruo/embed",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "React SDK to embed Playruo with postMessage API.",
   "license": "MIT",
   "type": "module",
@@ -35,15 +35,22 @@
     "@types/node": "^26.2.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitest/browser": "^3.2.7",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/browser": "^5.0.2",
+    "@vitest/browser-playwright": "^5.0.2",
+    "@vitest/coverage-v8": "^5.0.2",
     "jsdom": "^26.1.0",
-    "playwright": "^1.62.1",
+    "playwright": "1.62.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
-    "vitest": "^3.2.4"
+    "vitest": "^5.0.2"
+  },
+  "overrides": {
+    "esbuild": "^0.28.1",
+    "picomatch": "^4.0.4",
+    "rollup": "^4.59.0",
+    "source-map-js": "^1.2.2"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
@@ -52,9 +59,11 @@
     "typecheck": "tsc -p tsconfig.test.json",
     "check:exports": "attw --pack .",
     "test": "npm run build && vitest run --coverage",
+    "test:smoke": "vitest run tests/smoke",
     "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:watch": "npm run build && vitest",
     "docs:notion:dry-run": "node scripts/sync-notion-docs.mjs",
-    "docs:notion:publish": "node scripts/sync-notion-docs.mjs --publish"
+    "docs:notion:publish": "node scripts/sync-notion-docs.mjs --publish",
+    "docs:catalog:check": "node scripts/check-embed-event-catalog.mjs && node scripts/check-embed-error-catalog.mjs"
   }
 }