@genex-ai/embed-sdk 0.6.0 → 0.7.0

package/dist/{chunk-5VYRFOFN.js → chunk-BWJ2FVCH.js}

@@ -12,9 +12,11 @@ var parentOrigin = null;
 var initialized = false;
 var redeeming = false;
 var requestingGuest = false;
+var identityEpoch = 0;
 var handshakeTimeoutMs = 1e4;
 var refreshDelayMs = 10 * 6e4;
 var refreshRetryMs = 6e4;
+var overlayTextDelayMs = 500;
 var handshakeTimer;
 var refreshTimer;
 var messageHandler;
@@ -419,6 +421,7 @@ async function fetchDashboardOrigins() {
 async function redeemTicket(ticket) {
   if (!config || localTestMode || redeeming || state !== "pending" && state !== "guest") return;
   const upgradingFromGuest = state === "guest";
+  const epoch = ++identityEpoch;
   redeeming = true;
   try {
     const res = await doFetch(`${config.apiUrl}/api/embed/session`, {
@@ -426,12 +429,14 @@ async function redeemTicket(ticket) {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ ticket })
     });
+    if (epoch !== identityEpoch) return;
     if (!res.ok) {
       emit("error", { error: new Error(`ticket redemption failed (${res.status})`) });
       if (!upgradingFromGuest) await handleRedeemFailure();
       return;
     }
     const body = await res.json();
+    if (epoch !== identityEpoch) return;
     embedToken = body.embedToken;
     user = body.user;
     colyseusUrls = body.colyseus?.urls;
@@ -449,6 +454,7 @@ async function redeemTicket(ticket) {
     for (const waiter of playerWaiters.splice(0)) waiter.resolve({ user, guest: false });
     emit("authenticated", ctx);
   } catch (error) {
+    if (epoch !== identityEpoch) return;
     emit("error", { error });
     if (!upgradingFromGuest) await handleRedeemFailure();
   } finally {
@@ -458,6 +464,7 @@ async function redeemTicket(ticket) {
 async function requestGuestSession() {
   if (!config || localTestMode || requestingGuest || redeeming) return;
   if (state !== "pending" && state !== "guest") return;
+  const epoch = ++identityEpoch;
   requestingGuest = true;
   try {
     const res = await doFetch(`${config.apiUrl}/api/embed/guest-session`, {
@@ -465,17 +472,20 @@ async function requestGuestSession() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ slug: config.slug })
     });
+    if (epoch !== identityEpoch) return;
     if (!res.ok) {
       emit("error", { error: new Error(`guest session failed (${res.status})`) });
       enterBlocked();
       return;
     }
     const body = await res.json();
+    if (epoch !== identityEpoch) return;
     embedToken = body.embedToken;
     user = body.user;
     colyseusUrls = body.colyseus?.urls;
     enterGuest();
   } catch (error) {
+    if (epoch !== identityEpoch) return;
     emit("error", { error });
     enterBlocked();
   } finally {
@@ -553,18 +563,22 @@ function scheduleRefresh() {
 }
 async function refreshToken() {
   if (!config || state !== "authenticated" && state !== "guest" || !embedToken) return;
+  const epoch = identityEpoch;
+  const tokenAtStart = embedToken;
   let status;
   try {
     const res = await doFetch(`${config.apiUrl}/api/embed/session/refresh`, {
       method: "POST",
-      headers: { Authorization: `Bearer ${embedToken}` },
+      headers: { Authorization: `Bearer ${tokenAtStart}` },
       // Best-effort completion if the tab starts unloading mid-refresh; zero
       // security consequence either way (worst case the token just expires).
       keepalive: true
     });
     status = res.status;
+    if (epoch !== identityEpoch || embedToken !== tokenAtStart) return;
     if (res.ok) {
       const body = await res.json();
+      if (epoch !== identityEpoch || embedToken !== tokenAtStart) return;
       embedToken = body.embedToken;
       scheduleRefresh();
       return;
@@ -572,6 +586,7 @@ async function refreshToken() {
   } catch {
     status = void 0;
   }
+  if (epoch !== identityEpoch || embedToken !== tokenAtStart) return;
   if (status === 401) {
     if (state === "guest") {
       void requestGuestSession();
@@ -588,6 +603,7 @@ async function refreshToken() {
 }
 function enterBlocked() {
   if (state === "blocked") return;
+  identityEpoch++;
   state = "blocked";
   user = null;
   embedToken = void 0;
@@ -604,13 +620,36 @@ function enterBlocked() {
   emit("blocked");
 }
 var OVERLAY_TEXT = {
-  connecting: { title: "Connecting to Genex\u2026" },
-  // Neutral on purpose: the automatic bounce precedes GUEST play as often as
-  // sign-in — "signing you in" would be wrong for most visitors.
-  redirecting: { title: "Loading\u2026" },
-  "blocked-standalone": { title: "Sign in to play", button: "Sign in" },
-  "blocked-embedded": { title: "Sign in on the Genex dashboard to continue" }
+  // Delayed (text grace period): most connects finish before the text ever
+  // shows — a sub-second text flash reads as a glitch.
+  connecting: { title: "Connecting\u2026" },
+  // Same copy as `connecting` so the whole standalone bounce (gate ->
+  // /play/authorize -> gate) reads as ONE continuous screen. Still neutral:
+  // the automatic bounce precedes GUEST play as often as sign-in.
+  redirecting: { title: "Connecting\u2026" },
+  // Terminal states need the visitor to act — text shows immediately.
+  "blocked-standalone": { title: "Sign in to play", button: "Sign in", instant: true },
+  "blocked-embedded": { title: "Sign in on the Genex dashboard to continue", instant: true }
 };
+var OVERLAY_FONT_URL = "https://cdn.genex.technology/fonts/Geist-variable.woff2";
+var OVERLAY_FONT_STACK = "'Geist',system-ui,-apple-system,sans-serif";
+var overlayFontRequested = false;
+function ensureOverlayFont(d) {
+  if (overlayFontRequested) return;
+  overlayFontRequested = true;
+  try {
+    const FF = win()?.FontFace;
+    const fonts = d.fonts;
+    if (!FF || !fonts?.add) return;
+    const face = new FF("Geist", `url(${OVERLAY_FONT_URL}) format('woff2')`, {
+      weight: "100 900",
+      display: "swap"
+    });
+    face.load().then((loaded) => fonts.add(loaded)).catch(() => {
+    });
+  } catch {
+  }
+}
 function showOverlay(kind) {
   const d = doc();
   if (!d?.createElement) return;
@@ -620,23 +659,45 @@ function showOverlay(kind) {
   } catch {
   }
 }
-function removeOverlay() {
+function removeOverlay(instant = false) {
   try {
-    const root = overlayEl?.root;
-    root?.remove?.();
+    const el = overlayEl;
+    overlayEl = null;
+    if (!el) return;
+    el.clearTextTimer();
+    const root = el.root;
+    if (instant || !root.style) {
+      root.remove?.();
+      return;
+    }
+    root.style.pointerEvents = "none";
+    root.style.transition = "opacity 180ms ease";
+    root.style.opacity = "0";
+    setTimeout(() => {
+      try {
+        root.remove?.();
+      } catch {
+      }
+    }, 220);
   } catch {
   }
-  overlayEl = null;
 }
 function buildOverlay(d) {
+  ensureOverlayFont(d);
   const root = d.createElement("div");
   root.setAttribute("data-genex-embed-overlay", "");
-  root.style.cssText = "position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#080a14;color:#fff;font-family:system-ui,-apple-system,sans-serif;text-align:center;pointer-events:auto;user-select:none";
+  root.style.cssText = `position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#000;color:#fff;font-family:${OVERLAY_FONT_STACK};text-align:center;pointer-events:auto;user-select:none`;
   const title = d.createElement("div");
-  title.style.cssText = "font-size:18px;font-weight:600;padding:0 24px";
+  title.style.cssText = "font-size:18px;font-weight:600;padding:0 24px;opacity:0";
   root.appendChild(title);
   const button = d.createElement("button");
-  button.style.cssText = "font-size:15px;font-weight:600;padding:10px 28px;border-radius:8px;border:none;cursor:pointer;background:#fff;color:#111;display:none";
+  button.style.cssText = "font-size:15px;font-weight:600;padding:10px 28px;border-radius:9px;border:none;cursor:pointer;background:#4b60bf;color:#fff;display:none";
+  button.addEventListener("mouseenter", () => {
+    button.style.background = "#3f51a8";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.background = "#4b60bf";
+  });
   button.addEventListener("click", () => {
     const w = win();
     if (!w) return;
@@ -650,11 +711,32 @@ function buildOverlay(d) {
   };
   if (d.body) mount();
   else d.addEventListener?.("DOMContentLoaded", mount);
+  let textTimer;
+  const clearTextTimer = () => {
+    if (textTimer !== void 0) {
+      clearTimeout(textTimer);
+      textTimer = void 0;
+    }
+  };
   return {
     root,
+    clearTextTimer,
     setContent(kind) {
       const text = OVERLAY_TEXT[kind];
+      clearTextTimer();
       title.textContent = text.title;
+      if (text.instant || overlayTextDelayMs <= 0) {
+        title.style.transition = "";
+        title.style.opacity = "1";
+      } else {
+        title.style.transition = "";
+        title.style.opacity = "0";
+        textTimer = setTimeout(() => {
+          textTimer = void 0;
+          title.style.transition = "opacity 200ms ease";
+          title.style.opacity = "1";
+        }, overlayTextDelayMs);
+      }
       button.style.display = text.button ? "inline-block" : "none";
       if (text.button) button.textContent = text.button;
       mount();
@@ -678,15 +760,22 @@ function removeGuestPopover() {
   popoverEl = null;
 }
 function buildGuestPopover(d) {
+  ensureOverlayFont(d);
   const root = d.createElement("div");
   root.setAttribute("data-genex-guest-popover", "");
-  root.style.cssText = "position:fixed;top:12px;right:12px;z-index:2147483646;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:rgba(8,10,20,0.85);color:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:13px;box-shadow:0 4px 24px rgba(0,0,0,0.4);pointer-events:auto;user-select:none";
+  root.style.cssText = `position:fixed;top:12px;right:12px;z-index:2147483646;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:rgba(0,0,0,0.85);color:#fff;font-family:${OVERLAY_FONT_STACK};font-size:13px;box-shadow:0 4px 24px rgba(0,0,0,0.4);pointer-events:auto;user-select:none`;
   const text = d.createElement("span");
   text.textContent = user?.name ? `Playing as ${user.name} \u2014 sign in to save progress` : "Sign in to save progress";
   root.appendChild(text);
   const signIn = d.createElement("button");
   signIn.textContent = "Sign in";
-  signIn.style.cssText = "font-size:13px;font-weight:600;padding:6px 16px;border-radius:999px;border:none;cursor:pointer;background:#fff;color:#111";
+  signIn.style.cssText = "font-size:13px;font-weight:600;padding:6px 16px;border-radius:9px;border:none;cursor:pointer;background:#4b60bf;color:#fff";
+  signIn.addEventListener("mouseenter", () => {
+    signIn.style.background = "#3f51a8";
+  });
+  signIn.addEventListener("mouseleave", () => {
+    signIn.style.background = "#4b60bf";
+  });
   signIn.addEventListener("click", () => {
     const w = win();
     if (!w) return;
@@ -719,8 +808,9 @@ function __resetForTests(overrides) {
   if (refreshTimer !== void 0) clearTimeout(refreshTimer);
   handshakeTimer = void 0;
   refreshTimer = void 0;
-  removeOverlay();
+  removeOverlay(true);
   removeGuestPopover();
+  overlayFontRequested = false;
   config = null;
   state = "pending";
   user = null;
@@ -731,6 +821,7 @@ function __resetForTests(overrides) {
   initialized = false;
   redeeming = false;
   requestingGuest = false;
+  identityEpoch++;
   listeners.clear();
   authWaiters = [];
   playerWaiters = [];
@@ -741,6 +832,7 @@ function __resetForTests(overrides) {
   handshakeTimeoutMs = overrides?.handshakeTimeoutMs ?? 1e4;
   refreshDelayMs = overrides?.refreshDelayMs ?? 10 * 6e4;
   refreshRetryMs = overrides?.refreshRetryMs ?? 6e4;
+  overlayTextDelayMs = overrides?.overlayTextDelayMs ?? 500;
 }
 
 export {

package/dist/index.d.ts

@@ -116,7 +116,7 @@ declare function getUser(): EmbedUser | null;
  */
 declare function getEmbedToken(): string | undefined;
 /**
- * The credential for multiplayer: pass as `connect({ ..., auth: getColyseusAuth() })`
+ * The credential for multiplayer: pass as `connect({ ..., auth: () => getColyseusAuth() })`
  * AFTER `await waitForPlayer()` — the relay rejects tokenless joins, but
  * accepts guest tokens. Read it fresh at every connect() call (tokens rotate
  * ~every 10 minutes). NEVER log this value.
@@ -221,6 +221,7 @@ declare function __resetForTests(overrides?: {
     handshakeTimeoutMs?: number;
     refreshDelayMs?: number;
     refreshRetryMs?: number;
+    overlayTextDelayMs?: number;
 }): void;
 
 export { type AuthState, type EmbedConfig, type EmbedEvent, type EmbedUser, type Leaderboard, type LeaderboardEntry, type PlayerStateResult, type SaveStateResult, type SubmitScoreResult, type WorldStateResult, __resetForTests, _stashTicketFromUrl, getAuthState, getColyseusAuth, getColyseusUrls, getEmbedToken, getLeaderboard, getUser, initEmbed, isEmbedded, loadPlayerState, loadWorldState, on, savePlayerState, saveWorldState, submitScore, waitForAuth, waitForPlayer };

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   submitScore,
   waitForAuth,
   waitForPlayer
-} from "./chunk-5VYRFOFN.js";
+} from "./chunk-BWJ2FVCH.js";
 export {
   __resetForTests,
   _stashTicketFromUrl,

package/dist/sentry.js

@@ -2,7 +2,7 @@ import {
   _stashTicketFromUrl,
   getUser,
   on
-} from "./chunk-5VYRFOFN.js";
+} from "./chunk-BWJ2FVCH.js";
 
 // src/sentry.ts
 import * as Sentry from "@sentry/browser";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genex-ai/embed-sdk",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Player identity + durable game state for genex games — signed-in or guest play, per-player save slots, shared world state, and soft-trust leaderboards.",
   "type": "module",
   "main": "./dist/index.js",