@playruo/embed 1.3.2 → 1.4.0

package/dist/index.js

@@ -8,15 +8,33 @@ var normalizeOperation = (operation) => {
   if (trimmedOperation === "") {
     throw new Error("`operation` is required to build a Playruo embed URL.");
   }
+  const operationQuery = trimmedOperation.split("?")[1];
+  if (operationQuery != null && new URLSearchParams(operationQuery).has("op")) {
+    console.warn(
+      "[PlayruoEmbed] `?op=` inside `operation` is deprecated: pass it as the `operationKey` prop."
+    );
+  }
   return trimmedOperation.startsWith("/") ? trimmedOperation.slice(1) : trimmedOperation;
 };
-var buildEmbedUrl = ({ operation, storeUrl }) => {
-  return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, { operation, storeUrl });
+var buildEmbedUrl = ({
+  operation,
+  operationKey,
+  storeUrl
+}) => {
+  return buildEmbedUrlWithOrigin(PLAYRUO_ORIGIN, {
+    operation,
+    operationKey,
+    storeUrl
+  });
 };
-var buildEmbedUrlWithOrigin = (origin, { operation, storeUrl }) => {
+var buildEmbedUrlWithOrigin = (origin, { operation, operationKey, storeUrl }) => {
   const operationPath = normalizeOperation(operation);
   const url = new URL(`/${operationPath}`, origin);
   url.searchParams.set("iframe", "true");
+  const trimmedOperationKey = operationKey?.trim();
+  if (trimmedOperationKey) {
+    url.searchParams.set("op", trimmedOperationKey);
+  }
   if (storeUrl) {
     url.searchParams.set("storeUrl", storeUrl);
   }
@@ -28,6 +46,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var PlayruoEmbed = ({
   baseUrl,
   operation,
+  operationKey,
   storeUrl,
   showIframe = false,
   className,
@@ -37,6 +56,9 @@ var PlayruoEmbed = ({
   onEvent,
   onPurchaseRequest,
   onError,
+  onPasswordRequired,
+  onPasswordResult,
+  enableWindowedLaunch = false,
   forwardEventsToParent = true,
   renderState,
   iframeRef: externalIframeRef
@@ -53,12 +75,24 @@ var PlayruoEmbed = ({
   const [isValidChromium, setIsValidChromium] = useState(true);
   const [errorMessage, setErrorMessage] = useState(null);
   const [iframeState, setIframeState] = useState(null);
+  const [passwordRequired, setPasswordRequired] = useState(false);
+  const [passwordChecked, setPasswordChecked] = useState(false);
+  const [passwordUnlocked, setPasswordUnlocked] = useState(false);
+  const [passwordError, setPasswordError] = useState(
+    void 0
+  );
   const src = useMemo(
-    () => baseUrl != null && baseUrl !== "" ? buildEmbedUrlWithOrigin(baseUrl, { operation, storeUrl }) : buildEmbedUrl({ operation, storeUrl }),
-    [baseUrl, operation, storeUrl]
+    () => baseUrl != null && baseUrl !== "" ? buildEmbedUrlWithOrigin(baseUrl, { operation, operationKey, storeUrl }) : buildEmbedUrl({ operation, operationKey, storeUrl }),
+    [baseUrl, operation, operationKey, storeUrl]
   );
+  const embedOrigin = useMemo(() => new URL(src).origin, [src]);
+  useEffect(() => {
+    setPasswordRequired(false);
+    setPasswordChecked(false);
+    setPasswordUnlocked(false);
+    setPasswordError(void 0);
+  }, [src]);
   useEffect(() => {
-    if (typeof window === "undefined") return;
     const detectMobile = () => {
       const userAgent = navigator.userAgent || navigator.vendor || window.opera;
       return /android|iPad|iPhone|iPod/i.test(userAgent);
@@ -96,15 +130,14 @@ var PlayruoEmbed = ({
       tryNow: {
         ...currentState.tryNow,
         available: hasIframeConfirmed,
-        status: currentState.tryNow.status ?? (hasIframeConfirmed ? "Ready" : isCompatible ? "Checking availability\u2026" : "Browser not compatible")
+        // A missing status means the state came from the iframe, which only loads on
+        // compatible browsers — the incompatible copy is supplied by currentState.
+        status: currentState.tryNow.status ?? (hasIframeConfirmed ? "Ready" : "Checking availability\u2026")
       }
     }),
-    [currentState, hasIframeConfirmed, isCompatible]
+    [currentState, hasIframeConfirmed]
   );
   const getKeyboardApi = useCallback(() => {
-    if (typeof navigator === "undefined") {
-      return void 0;
-    }
     return navigator.keyboard;
   }, []);
   const releaseEscapeKeyLock = useCallback(() => {
@@ -134,6 +167,23 @@ var PlayruoEmbed = ({
     },
     [onDemoCompleted, storeUrl]
   );
+  const postPasswordAction = useCallback(
+    (message) => {
+      const contentWindow = iframeRef.current?.contentWindow;
+      if (!contentWindow) {
+        return;
+      }
+      try {
+        contentWindow.postMessage(
+          { type: "playruo", fromEmbed: true, ...message },
+          embedOrigin
+        );
+      } catch {
+        console.error("[PlayruoEmbed] Failed to send the password action");
+      }
+    },
+    [embedOrigin, iframeRef]
+  );
   const postExitFullscreenToIframe = useCallback(() => {
     const iframe = iframeRef.current;
     if (!iframe) {
@@ -146,22 +196,22 @@ var PlayruoEmbed = ({
         fromEmbed: true,
         isFullscreen: false,
         parentWillHandleFullscreen: true
-      }, "*");
+      }, embedOrigin);
     } catch {
       console.error("[PlayruoEmbed] Failed to exit fullscreen");
     }
-  }, [iframeRef]);
+  }, [embedOrigin, iframeRef]);
   const postExitFullscreenAckToIframe = useCallback(() => {
     const iframe = iframeRef.current;
     if (!iframe) {
       return;
     }
     try {
-      iframe.contentWindow?.postMessage({ type: "ACK_EXIT_FULLSCREEN" }, "*");
+      iframe.contentWindow?.postMessage({ type: "ACK_EXIT_FULLSCREEN" }, embedOrigin);
     } catch {
       console.error("[PlayruoEmbed] Failed to acknowledge fullscreen exit");
     }
-  }, [iframeRef]);
+  }, [embedOrigin, iframeRef]);
   const exitEmbedFullscreen = useCallback(
     async ({
       reason = "cleanup",
@@ -247,7 +297,7 @@ var PlayruoEmbed = ({
   }, []);
   const forwardEventToParent = useCallback(
     (message) => {
-      if (!forwardEventsToParent || typeof window === "undefined" || window.parent === window) {
+      if (!forwardEventsToParent || window.parent === window) {
         return;
       }
       try {
@@ -297,19 +347,26 @@ var PlayruoEmbed = ({
     hasNotifiedCompletionRef.current = false;
     setShowGameIframe(true);
     try {
-      try {
-        await requestImmersiveMode(iframe);
-      } catch (fsError) {
-        console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+      let isParentFullscreen = false;
+      if (enableWindowedLaunch) {
+        releaseEscapeKeyLock();
+        console.log("[PlayruoEmbed] Windowed launch enabled, skipping fullscreen request");
+      } else {
+        try {
+          await requestImmersiveMode(iframe);
+          isParentFullscreen = true;
+        } catch (fsError) {
+          console.warn("[PlayruoEmbed] Fullscreen denied, continuing without:", fsError);
+        }
       }
       iframe.contentWindow?.postMessage({
         type: "playruo",
         action: "tryNowClick",
         fromEmbed: true,
-        isFullscreen: true,
-        parentWillHandleFullscreen: true,
+        isFullscreen: isParentFullscreen,
+        parentWillHandleFullscreen: isParentFullscreen,
         isReplay: hasPlayedOnce
-      }, "*");
+      }, embedOrigin);
       console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
       iframe.focus();
       requestAnimationFrame(() => {
@@ -322,7 +379,15 @@ var PlayruoEmbed = ({
       setErrorMessage("Failed to start game");
       onError?.("Failed to start game");
     }
-  }, [isCompatible, hasPlayedOnce, onError, iframeRef, requestImmersiveMode]);
+  }, [
+    enableWindowedLaunch,
+    hasPlayedOnce,
+    iframeRef,
+    isCompatible,
+    onError,
+    releaseEscapeKeyLock,
+    requestImmersiveMode
+  ]);
   const handleBuyNow = useCallback(() => {
     if (!storeUrl) {
       console.warn("[PlayruoEmbed] No store URL provided");
@@ -348,6 +413,9 @@ var PlayruoEmbed = ({
       if (!iframe || event.source !== iframe.contentWindow) {
         return;
       }
+      if (event.origin !== embedOrigin) {
+        return;
+      }
       console.log("\u{1F537} [Embed] Message received from iframe:", { type, data });
       if (type === "playruo_ready") {
         console.log("\u{1F537} [Embed] playruo_ready received");
@@ -416,6 +484,24 @@ var PlayruoEmbed = ({
         const eventPayload = message.payload;
         onEvent?.(eventPayload);
         forwardEventToParent({ type: "playruo_event", data: eventPayload });
+      } else if (type === "playruo_password_required") {
+        console.log("\u{1F537} [Embed] playruo_password_required received");
+        setPasswordRequired(true);
+        setPasswordChecked(true);
+        setPasswordUnlocked(false);
+        setPasswordError(void 0);
+        onPasswordRequired?.();
+      } else if (type === "playruo_password_not_required") {
+        console.log("\u{1F537} [Embed] playruo_password_not_required received");
+        setPasswordRequired(false);
+        setPasswordChecked(true);
+      } else if (type === "playruo_password_result" && data) {
+        const result = data;
+        const success = result.success === true;
+        console.log("\u{1F537} [Embed] playruo_password_result received:", result);
+        setPasswordUnlocked(success);
+        setPasswordError(success ? void 0 : result.error ?? "unknown");
+        onPasswordResult?.({ success, error: result.error });
       }
       if (type === "error" || type === "closeForBuy" || type === "goToStore") {
         console.log("\u{1F537} [Embed] Legacy message received:", type);
@@ -431,6 +517,7 @@ var PlayruoEmbed = ({
     return () => window.removeEventListener("message", handleGameMessage);
   }, [
     cleanupEmbedSession,
+    embedOrigin,
     exitEmbedFullscreen,
     forwardEventToParent,
     hasPlayedOnce,
@@ -438,6 +525,8 @@ var PlayruoEmbed = ({
     markStreamActive,
     onEvent,
     onError,
+    onPasswordRequired,
+    onPasswordResult,
     onPurchaseRequest,
     onReady,
     onStateChange,
@@ -460,6 +549,9 @@ var PlayruoEmbed = ({
       if (!iframe || event.source !== iframe.contentWindow) {
         return;
       }
+      if (event.origin !== embedOrigin) {
+        return;
+      }
       const { type, requestId } = event.data || {};
       if (type === "playruo_uuid_request") {
         try {
@@ -474,34 +566,27 @@ var PlayruoEmbed = ({
               requestId,
               uuid: storedUUID
             },
-            "*"
+            embedOrigin
           );
         } catch (e) {
         }
-      } else if (type === "playruo_uuid_remove") {
-        try {
-          localStorage.removeItem("playruo_uuid");
-        } catch (e) {
-        }
       }
     };
     window.addEventListener("message", handleUUIDMessage);
     return () => window.removeEventListener("message", handleUUIDMessage);
-  }, [iframeRef]);
+  }, [embedOrigin, iframeRef]);
   useEffect(() => {
     const handleFullscreenChange = () => {
       const iframe = iframeRef.current;
       const fullscreenElement = getFullscreenElement();
       const isEmbedFullscreen = Boolean(iframe && fullscreenElement === iframe);
-      if (isEmbedFullscreen) {
+      if (isEmbedFullscreen && iframe) {
         wasEmbedFullscreenRef.current = true;
         void lockEscapeKey();
-        if (iframe) {
-          setTimeout(() => {
-            iframe.focus();
-            iframe.contentWindow?.focus();
-          }, 200);
-        }
+        setTimeout(() => {
+          iframe.focus();
+          iframe.contentWindow?.focus();
+        }, 200);
         return;
       }
       if (fullscreenElement) {
@@ -546,17 +631,16 @@ var PlayruoEmbed = ({
     const logCrossOriginStatus = () => {
       const isIsolated = self.crossOriginIsolated;
       const hasSharedArrayBuffer = typeof SharedArrayBuffer !== "undefined";
-      const hasHighResTime = typeof performance !== "undefined" && typeof performance.now === "function";
       console.group("[PlayruoEmbed] \u{1F512} Cross-Origin Isolation Status");
       if (isIsolated) {
         console.log("\u2705 Cross-origin isolation: ENABLED");
         console.log("\u2705 SharedArrayBuffer support:", hasSharedArrayBuffer ? "Available" : "Not available");
-        console.log("\u2705 High-resolution timers:", hasHighResTime ? "Available" : "Not available");
+        console.log("\u2705 High-resolution timers: Full precision");
         console.log("\u{1F3AE} Game performance: Optimal");
       } else {
         console.warn("\u26A0\uFE0F Cross-origin isolation: DISABLED");
         console.warn("\u26A0\uFE0F SharedArrayBuffer support:", hasSharedArrayBuffer ? "Available" : "Not available");
-        console.warn("\u26A0\uFE0F High-resolution timers:", hasHighResTime ? "Available" : "Not available");
+        console.warn("\u26A0\uFE0F High-resolution timers: Reduced precision");
         console.warn("\u{1F3AE} Game performance: May be degraded");
         console.group("\u{1F4CB} Setup Instructions:");
         console.log("Add these headers to your server:");
@@ -600,7 +684,7 @@ var PlayruoEmbed = ({
         console.log("User agent:", navigator.userAgent);
         console.log("Available APIs:", {
           SharedArrayBuffer: hasSharedArrayBuffer,
-          Performance: hasHighResTime,
+          Performance: true,
           WebGL: !!document.createElement("canvas").getContext("webgl"),
           WebGL2: !!document.createElement("canvas").getContext("webgl2"),
           WebAssembly: typeof WebAssembly !== "undefined"
@@ -632,22 +716,44 @@ var PlayruoEmbed = ({
       tryNow: handleTryNow,
       buyNow: handleBuyNow,
       canTryNow,
-      canBuyNow: Boolean(isReady)
+      canBuyNow: Boolean(isReady),
+      submitPassword: (password2) => {
+        if (!password2) {
+          return;
+        }
+        postPasswordAction({ action: "submitPassword", password: password2 });
+      },
+      requestPassword: () => postPasswordAction({ action: "requestPassword" })
+    };
+    const password = {
+      required: passwordRequired,
+      checked: passwordChecked,
+      unlocked: passwordUnlocked,
+      error: passwordError
     };
     if (errorMessage) {
-      return renderState({ status: "error", message: errorMessage, actions });
+      return renderState({ status: "error", message: errorMessage, actions, password });
+    }
+    if (password.required && !password.unlocked) {
+      return renderState({
+        status: "loading",
+        message: "Password required",
+        actions,
+        password
+      });
     }
     if (!isReady) {
-      return renderState({ status: "loading", message: "Loading\u2026", actions });
+      return renderState({ status: "loading", message: "Loading\u2026", actions, password });
     }
     if (isCompatible && !iframeState) {
-      return renderState({ status: "loading", message: "Checking availability\u2026", actions });
+      return renderState({ status: "loading", message: "Checking availability\u2026", actions, password });
     }
     const message = !isAvailable ? currentState.tryNow.status ?? exposedState.tryNow.status : void 0;
     return renderState({
       status: isAvailable ? "available" : "unavailable",
       message,
-      actions
+      actions,
+      password
     });
   };
   return /* @__PURE__ */ jsxs("div", { className, children: [
@@ -742,10 +848,16 @@ var EmbedTester = (props = {}) => {
   const [storeUrlDraft, setStoreUrlDraft] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [enableWindowedLaunchDraft, setEnableWindowedLaunchDraft] = useState2(
+    props.enableWindowedLaunch ?? false
+  );
   const [appliedOperation, setAppliedOperation] = useState2(props.operation ?? "iframe");
   const [appliedStoreUrl, setAppliedStoreUrl] = useState2(
     props.storeUrl ?? "https://store.steampowered.com/app/123456"
   );
+  const [appliedEnableWindowedLaunch, setAppliedEnableWindowedLaunch] = useState2(
+    props.enableWindowedLaunch ?? false
+  );
   const [key, setKey] = useState2(0);
   const [hasUserClicked, setHasUserClicked] = useState2(false);
   const [showIframe, setShowIframe] = useState2(false);
@@ -760,8 +872,9 @@ var EmbedTester = (props = {}) => {
   const iframeRef = useRef2(null);
   const isOperationPending = operationDraft !== appliedOperation;
   const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
-  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending;
-  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending);
+  const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
+  const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
+  const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
   const addEvent = useCallback2(
     (message) => {
       const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
@@ -867,21 +980,20 @@ var EmbedTester = (props = {}) => {
     addEvent(message);
   }, [addEvent]);
   const handleApply = useCallback2(() => {
-    if (!hasPendingConfigChanges) {
-      return;
-    }
     setAppliedOperation(operationDraft);
     setAppliedStoreUrl(storeUrlDraft);
+    setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
     resetEmbedSession("Applied updated embed settings");
-  }, [hasPendingConfigChanges, operationDraft, resetEmbedSession, storeUrlDraft]);
+  }, [enableWindowedLaunchDraft, operationDraft, resetEmbedSession, storeUrlDraft]);
   const handleRestartSession = useCallback2(() => {
     resetEmbedSession("Embed restarted with applied settings");
   }, [resetEmbedSession]);
   const handleResetDrafts = useCallback2(() => {
     setOperationDraft(appliedOperation);
     setStoreUrlDraft(appliedStoreUrl);
+    setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
     addEvent("Reverted draft changes to the applied configuration");
-  }, [addEvent, appliedOperation, appliedStoreUrl]);
+  }, [addEvent, appliedEnableWindowedLaunch, appliedOperation, appliedStoreUrl]);
   const panelStyle = {
     position: "relative",
     border: "1px solid rgba(148, 163, 184, 0.18)",
@@ -1449,6 +1561,50 @@ var EmbedTester = (props = {}) => {
                       "Applied value: ",
                       /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedStoreUrl })
                     ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsxs2("div", { style: labelStyle, children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Launch mode" }),
+                      /* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isWindowedLaunchPending), children: [
+                        /* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isWindowedLaunchPending) }),
+                        isWindowedLaunchPending ? "Pending" : "Live"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2(
+                      "label",
+                      {
+                        htmlFor: "enableWindowedLaunch",
+                        style: {
+                          ...buildInputShellStyle(isWindowedLaunchPending),
+                          justifyContent: "space-between",
+                          minHeight: "48px",
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2("span", { style: { color: "#f8fafc", fontSize: "15px", fontWeight: 600 }, children: "Windowed launch" }),
+                          /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              id: "enableWindowedLaunch",
+                              type: "checkbox",
+                              checked: enableWindowedLaunchDraft,
+                              onChange: (event) => setEnableWindowedLaunchDraft(event.target.checked),
+                              style: {
+                                width: "18px",
+                                height: "18px",
+                                accentColor: "#38bdf8",
+                                cursor: "pointer"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
+                      "Applied value:",
+                      " ",
+                      /* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedEnableWindowedLaunch ? "windowed" : "fullscreen request" })
+                    ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs2(
@@ -1728,6 +1884,10 @@ var EmbedTester = (props = {}) => {
                       /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
                         "Operation: ",
                         appliedOperation
+                      ] }),
+                      /* @__PURE__ */ jsxs2("span", { style: { ...codeStyle, padding: "6px 10px" }, children: [
+                        "Launch: ",
+                        appliedEnableWindowedLaunch ? "windowed" : "fullscreen request"
                       ] })
                     ] })
                   ]
@@ -1803,6 +1963,7 @@ var EmbedTester = (props = {}) => {
                         onPurchaseRequest: handlePurchaseRequest,
                         onReady: handleReady,
                         onStateChange: handleStateChange,
+                        enableWindowedLaunch: appliedEnableWindowedLaunch,
                         operation: appliedOperation,
                         renderState: ({ actions, message, status }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
                           "div",
@@ -1927,12 +2088,12 @@ var isPlayruoEmbedMessage = (data) => {
   if (!data || typeof data !== "object") return false;
   const msg = data;
   if (typeof msg.type !== "string") return false;
-  return msg.type === "playruo_ready" || msg.type === "playruo_state_update" || msg.type === "playruo_purchase_request" || msg.type === "playruo_demo_completed" || msg.type === "playruo_error" || msg.type === "playruo_session_over" || msg.type === "playruo_stream_start" || msg.type === "playruo_stream_stop" || msg.type === "REQUEST_EXIT_FULLSCREEN" || msg.type === "playruo_event";
+  return msg.type === "playruo_ready" || msg.type === "playruo_state_update" || msg.type === "playruo_purchase_request" || msg.type === "playruo_demo_completed" || msg.type === "playruo_error" || msg.type === "playruo_session_over" || msg.type === "playruo_stream_start" || msg.type === "playruo_stream_stop" || msg.type === "REQUEST_EXIT_FULLSCREEN" || msg.type === "playruo_event" || msg.type === "playruo_password_required" || msg.type === "playruo_password_not_required" || msg.type === "playruo_password_result";
 };
 var isPlayruoInternalMessage = (data) => {
   if (!data || typeof data !== "object") return false;
   const msg = data;
-  return msg.type === "playruo" && typeof msg.action === "string" && (msg.action === "tryNowClick" || msg.action === "exitFullscreen" || msg.action === "mute" || msg.action === "unmute") && msg.fromEmbed === true;
+  return msg.type === "playruo" && typeof msg.action === "string" && (msg.action === "tryNowClick" || msg.action === "exitFullscreen" || msg.action === "mute" || msg.action === "unmute" || msg.action === "submitPassword" || msg.action === "requestPassword") && msg.fromEmbed === true;
 };
 export {
   EmbedTester,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playruo/embed",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "React SDK to embed Playruo with postMessage API.",
   "license": "MIT",
   "type": "module",
@@ -9,27 +9,50 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitest/browser": "^3.2.7",
+    "@vitest/coverage-v8": "^3.2.4",
+    "jsdom": "^26.1.0",
+    "playwright": "^1.62.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
-    "@types/react": "^19",
-    "@types/react-dom": "^19"
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
     "dev": "tsup src/index.ts --format esm --dts --watch",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "typecheck": "tsc -p tsconfig.test.json",
+    "check:exports": "attw --pack .",
+    "test": "npm run build && vitest run --coverage",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
+    "test:watch": "npm run build && vitest"
   }
 }