@youidian/sdk 3.3.10 → 3.4.2

package/dist/index.js

@@ -2,6 +2,221 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/brand-logo.ts
+function ensureSdkBrandLogoStyles() {
+  if (document.getElementById?.("youidian-sdk-brand-logo-style")) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = "youidian-sdk-brand-logo-style";
+  style.textContent = `
+		.youidian-sdk-brand-logo__ring,
+		.youidian-sdk-brand-logo__dot,
+		.youidian-sdk-brand-logo__copy,
+		.youidian-sdk-brand-logo__tagline {
+			transform-box: fill-box;
+			transform-origin: center;
+			will-change: opacity, transform;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__ring {
+			animation: youidian-sdk-brand-logo-ring 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__dot {
+			animation: youidian-sdk-brand-logo-dot 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__copy {
+			animation: youidian-sdk-brand-logo-copy 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__tagline {
+			animation: youidian-sdk-brand-logo-tagline 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		@keyframes youidian-sdk-brand-logo-ring {
+			0%,
+			100% {
+				opacity: 0.72;
+				transform: rotate(0deg) scale(0.98);
+			}
+			50% {
+				opacity: 1;
+				transform: rotate(8deg) scale(1.02);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-dot {
+			0%,
+			100% {
+				opacity: 0.58;
+				transform: scale(0.9);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(1.08);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-copy {
+			0%,
+			100% {
+				opacity: 0.86;
+				transform: translateY(0);
+			}
+			50% {
+				opacity: 1;
+				transform: translateY(-1px);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-tagline {
+			0%,
+			100% {
+				opacity: 0.64;
+			}
+			50% {
+				opacity: 0.92;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.youidian-sdk-brand-logo__ring,
+			.youidian-sdk-brand-logo__dot,
+			.youidian-sdk-brand-logo__copy,
+			.youidian-sdk-brand-logo__tagline {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	`;
+  document.head?.appendChild(style);
+}
+function createSdkBrandLogoMark({
+  animated,
+  inverted,
+  size,
+  theme,
+  variant = "brand"
+}) {
+  ensureSdkBrandLogoStyles();
+  const mark = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  mark.setAttribute("viewBox", "0 0 512 512");
+  mark.setAttribute("fill", "none");
+  mark.setAttribute("aria-hidden", "true");
+  Object.assign(mark.style, {
+    width: `${size}px`,
+    height: `${size}px`,
+    color: inverted ? "#ffffff" : theme.primary,
+    display: "block",
+    flex: "0 0 auto",
+    overflow: "visible"
+  });
+  const logoGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  logoGroup.setAttribute(
+    "transform",
+    variant === "mark" ? "matrix(0.74 0 0 0.74 -124 -114)" : "matrix(0.58 0 0 0.58 -40 -31)"
+  );
+  const ring = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  ring.setAttribute("class", animated ? "youidian-sdk-brand-logo__ring" : "");
+  ring.setAttribute("fill", inverted ? "currentColor" : theme.primary);
+  ring.setAttribute(
+    "d",
+    "M704.298 679.54A264 264 0 1 1 704.298 309.46A49 49 0 0 1 634.4 378.149A166 166 0 1 0 634.4 610.851A49 49 0 0 1 704.298 679.54Z"
+  );
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("class", animated ? "youidian-sdk-brand-logo__dot" : "");
+  dot.setAttribute("fill", inverted ? "currentColor" : theme.secondary);
+  dot.setAttribute("cx", "714.5");
+  dot.setAttribute("cy", "490.5");
+  dot.setAttribute("r", "68");
+  dot.setAttribute("opacity", inverted ? "0.78" : "1");
+  logoGroup.appendChild(ring);
+  logoGroup.appendChild(dot);
+  mark.appendChild(logoGroup);
+  return mark;
+}
+function createSdkBrandLogo({
+  animated,
+  brand,
+  brandWidth,
+  copyWidth,
+  gap = 10,
+  markMarginRight,
+  markSize,
+  nameSize,
+  subtitleMarginTop = 6,
+  subtitleSize,
+  subtitleWeight = "800",
+  theme,
+  variant = "brand"
+}) {
+  ensureSdkBrandLogoStyles();
+  const wrapper = document.createElement("div");
+  wrapper.className = "youidian-sdk-brand-logo";
+  wrapper.setAttribute("data-animated", animated ? "true" : "false");
+  Object.assign(wrapper.style, {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: `${gap}px`,
+    width: brandWidth ? `${brandWidth}px` : void 0
+  });
+  const copy = document.createElement("div");
+  copy.className = "youidian-sdk-brand-logo__copy";
+  copy.setAttribute("data-brand-locale", brand.language);
+  Object.assign(copy.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    lineHeight: "1",
+    width: copyWidth ? `${copyWidth}px` : void 0
+  });
+  const name = document.createElement("div");
+  name.className = "youidian-sdk-brand-logo__name";
+  name.textContent = brand.name;
+  Object.assign(name.style, {
+    color: theme.foreground,
+    fontFamily: brand.language === "zh" ? '"Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' : '"Unbounded", "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: `${nameSize}px`,
+    fontWeight: brand.language === "zh" ? "900" : "800",
+    letterSpacing: brand.language === "zh" ? "0.08em" : "0.01em",
+    lineHeight: "1",
+    whiteSpace: "nowrap"
+  });
+  const subtitle = document.createElement("div");
+  subtitle.className = "youidian-sdk-brand-logo__tagline";
+  subtitle.textContent = brand.subtitle;
+  Object.assign(subtitle.style, {
+    color: theme.muted,
+    fontFamily: brand.language === "zh" ? '"Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' : '"Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: `${subtitleSize}px`,
+    fontWeight: subtitleWeight,
+    letterSpacing: brand.language === "zh" ? "0.24em" : "0.07em",
+    lineHeight: "1",
+    marginTop: `${subtitleMarginTop}px`,
+    textTransform: brand.language === "zh" ? "none" : "uppercase",
+    whiteSpace: "nowrap"
+  });
+  copy.appendChild(name);
+  copy.appendChild(subtitle);
+  const mark = createSdkBrandLogoMark({
+    animated,
+    size: markSize,
+    theme,
+    variant
+  });
+  if (typeof markMarginRight === "number") {
+    mark.style.marginRight = `${markMarginRight}px`;
+  }
+  wrapper.appendChild(mark);
+  wrapper.appendChild(copy);
+  return wrapper;
+}
+
 // src/hosted-modal.ts
 var SDK_SUPPORTED_LOCALES = [
   "en",
@@ -125,7 +340,7 @@ var HostedFrameModal = class {
     const container = document.createElement("div");
     Object.assign(container.style, {
       width: options.width || "450px",
-      height: options.height || "min(600px, 90vh)",
+      height: options.height || "min(760px, calc(100vh - 32px))",
       backgroundColor: "transparent",
       borderRadius: "28px",
       overflow: "visible",
@@ -133,8 +348,7 @@ var HostedFrameModal = class {
       boxShadow: "none",
       maxWidth: "calc(100vw - 32px)",
       maxHeight: "calc(100vh - 32px)",
-      transition: "height 180ms ease",
-      willChange: "height"
+      transition: "none"
     });
     const closeBtn = document.createElement("button");
     closeBtn.innerHTML = "\xD7";
@@ -204,6 +418,91 @@ var HostedFrameModal = class {
   }
 };
 
+// src/environment.ts
+function normalizeText(value) {
+  return value || "";
+}
+function getRuntimeInput() {
+  if (typeof navigator === "undefined") {
+    return {};
+  }
+  const nav = navigator;
+  const coarsePointer = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : void 0;
+  return {
+    coarsePointer,
+    maxTouchPoints: nav.maxTouchPoints || 0,
+    platform: nav.platform || "",
+    standalone: nav.standalone,
+    userAgent: nav.userAgent || "",
+    userAgentDataMobile: nav.userAgentData?.mobile
+  };
+}
+function includesAny(value, patterns) {
+  return patterns.some((pattern) => pattern.test(value));
+}
+function detectLoginEnvironment(input = getRuntimeInput()) {
+  const userAgent = normalizeText(input.userAgent);
+  const platform = normalizeText(input.platform);
+  const rawMaxTouchPoints = input.maxTouchPoints ?? 0;
+  const maxTouchPoints = Number.isFinite(rawMaxTouchPoints) ? Math.max(0, rawMaxTouchPoints) : 0;
+  const isCoarsePointer = input.coarsePointer === true;
+  const isTouch = maxTouchPoints > 0 || isCoarsePointer;
+  const isWeChat = /micromessenger/i.test(userAgent);
+  const isAndroid = /\bandroid\b/i.test(userAgent);
+  const hasExplicitIOSDevice = /\b(iPad|iPhone|iPod)\b/i.test(userAgent);
+  const hasMacintoshUserAgent = /\bMacintosh\b/i.test(userAgent);
+  const hasMacPlatform = /^Mac/i.test(platform);
+  const isIPadOS = !hasExplicitIOSDevice && hasMacintoshUserAgent && hasMacPlatform && typeof input.standalone !== "undefined" && maxTouchPoints > 2;
+  const isIOS = hasExplicitIOSDevice || isIPadOS;
+  const isTabletByUa = includesAny(userAgent, [
+    /\biPad\b/i,
+    /\btablet\b/i,
+    /\bplaybook\b/i,
+    /\bsilk\b(?!.*\bmobile\b)/i,
+    /\bkindle\b/i,
+    /\bnexus 7\b/i,
+    /\bnexus 9\b/i,
+    /\bxoom\b/i,
+    /\bsm-t\d+/i,
+    /\bgt-p\d+/i,
+    /\bmi pad\b/i
+  ]);
+  const isMobileByUa = includesAny(userAgent, [
+    /\bMobile\b/i,
+    /\biPhone\b/i,
+    /\biPod\b/i,
+    /\bWindows Phone\b/i,
+    /\bIEMobile\b/i,
+    /\bBlackBerry\b/i,
+    /\bBB10\b/i,
+    /\bOpera Mini\b/i,
+    /\bOpera Mobi\b/i,
+    /\bwebOS\b/i
+  ]);
+  const isAndroidTablet = isAndroid && !/\bMobile\b/i.test(userAgent);
+  const isTablet = isIPadOS || isTabletByUa || isAndroidTablet;
+  const isMobile = input.userAgentDataMobile === true || isMobileByUa || isAndroid && !isTablet || isIOS && !isTablet;
+  const deviceType = isTablet ? "tablet" : isMobile ? "mobile" : userAgent || platform || isTouch ? "desktop" : "unknown";
+  const shouldUseRedirectLogin = deviceType === "mobile" || deviceType === "tablet" || isWeChat;
+  return {
+    deviceType,
+    isAndroid,
+    isCoarsePointer,
+    isDesktop: deviceType === "desktop",
+    isIOS,
+    isIPadOS,
+    isMobile,
+    isStandalone: input.standalone === true,
+    isTablet,
+    isTouch,
+    isWeChat,
+    maxTouchPoints,
+    platform,
+    shouldUseRedirectLogin,
+    userAgent
+  };
+}
+
 // src/login.ts
 function getOrigin(value) {
   if (!value) return null;
@@ -213,6 +512,15 @@ function getOrigin(value) {
     return null;
   }
 }
+function isValidLoginRedirectUrl(value) {
+  if (!value) return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
 function createLoginCallbackState() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID().replace(/-/g, "");
@@ -559,6 +867,24 @@ function applyLoginPanelStyle(panel) {
     backdropFilter: "blur(16px)"
   });
 }
+function applyLoginLoadingPanelStyle(panel) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "0",
+    borderRadius: "28px",
+    background: "rgba(255,255,255,0.94)",
+    color: "#0f172a",
+    padding: "24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "none",
+    backdropFilter: "blur(16px)"
+  });
+}
 function createLoginPanelContent() {
   const content = document.createElement("div");
   Object.assign(content.style, {
@@ -583,6 +909,71 @@ function createLoginPanelContent() {
   content.appendChild(badge);
   return content;
 }
+function createBrandLoadingMark() {
+  const logo = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  logo.setAttribute("viewBox", "0 0 1024 1024");
+  logo.setAttribute("fill", "none");
+  logo.setAttribute("aria-hidden", "true");
+  Object.assign(logo.style, {
+    width: "112px",
+    height: "112px",
+    color: "#22c55e",
+    display: "block",
+    overflow: "visible"
+  });
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.setAttribute("fill", "currentColor");
+  const ring = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  ring.setAttribute(
+    "d",
+    "M704.298 679.54A264 264 0 1 1 704.298 309.46A49 49 0 0 1 634.4 378.149A166 166 0 1 0 634.4 610.851A49 49 0 0 1 704.298 679.54Z"
+  );
+  ring.setAttribute("class", "youidian-sdk-brand-loading__ring");
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("class", "youidian-sdk-brand-loading__dot");
+  dot.setAttribute("cx", "714.5");
+  dot.setAttribute("cy", "490.5");
+  dot.setAttribute("r", "68");
+  group.appendChild(ring);
+  group.appendChild(dot);
+  logo.appendChild(group);
+  return logo;
+}
+function createBrandLoadingCopy() {
+  const brand = document.createElement("div");
+  brand.className = "youidian-sdk-brand-loading__copy";
+  Object.assign(brand.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    lineHeight: "1"
+  });
+  const name = document.createElement("div");
+  name.className = "youidian-sdk-brand-loading__name";
+  name.textContent = "\u4F18\u6613\u70B9";
+  Object.assign(name.style, {
+    color: "#0f172a",
+    fontSize: "34px",
+    fontWeight: "900",
+    letterSpacing: "0",
+    lineHeight: "1"
+  });
+  const tagline = document.createElement("div");
+  tagline.className = "youidian-sdk-brand-loading__tagline";
+  tagline.textContent = "\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0";
+  Object.assign(tagline.style, {
+    color: "#64748b",
+    fontSize: "16px",
+    fontWeight: "700",
+    letterSpacing: "0.24em",
+    lineHeight: "1",
+    marginTop: "6px"
+  });
+  brand.appendChild(name);
+  brand.appendChild(tagline);
+  return brand;
+}
 function createLoginPanelTitle(value) {
   const title = document.createElement("div");
   title.textContent = value;
@@ -612,32 +1003,111 @@ function ensureLoginLoadingStyles() {
   }
   const style = document.createElement("style");
   style.id = "youidian-login-loading-style";
-  style.textContent = "@keyframes youidian-login-spin{to{transform:rotate(360deg)}}";
+  style.textContent = `
+		.youidian-sdk-brand-loading__ring,
+		.youidian-sdk-brand-loading__dot {
+			transform-box: fill-box;
+			transform-origin: center;
+			will-change: opacity, transform;
+		}
+
+		.youidian-sdk-brand-loading__ring {
+			animation: youidian-sdk-brand-loading-ring 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__dot {
+			animation: youidian-sdk-brand-loading-dot 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__copy {
+			will-change: opacity, transform;
+			animation: youidian-sdk-brand-loading-copy 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__tagline {
+			will-change: opacity;
+			animation: youidian-sdk-brand-loading-tagline 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		@keyframes youidian-sdk-brand-loading-ring {
+			0%,
+			100% {
+				opacity: 0.72;
+				transform: rotate(0deg) scale(0.98);
+			}
+			50% {
+				opacity: 1;
+				transform: rotate(8deg) scale(1.02);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-dot {
+			0%,
+			100% {
+				opacity: 0.55;
+				transform: scale(0.9);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(1.08);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-copy {
+			0%,
+			100% {
+				opacity: 0.86;
+				transform: translateY(0);
+			}
+			50% {
+				opacity: 1;
+				transform: translateY(-1px);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-tagline {
+			0%,
+			100% {
+				opacity: 0.64;
+			}
+			50% {
+				opacity: 0.92;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.youidian-sdk-brand-loading__ring,
+			.youidian-sdk-brand-loading__dot,
+			.youidian-sdk-brand-loading__copy,
+			.youidian-sdk-brand-loading__tagline {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	`;
   document.head.appendChild(style);
 }
-function createLoginLoadingPanel(options) {
+function createLoginLoadingPanel() {
   ensureLoginLoadingStyles();
   const panel = document.createElement("div");
-  applyLoginPanelStyle(panel);
-  const content = createLoginPanelContent();
-  const spinner = document.createElement("div");
-  Object.assign(spinner.style, {
-    width: "22px",
-    height: "22px",
-    borderRadius: "9999px",
-    border: "2px solid rgba(23,23,23,0.16)",
-    borderTopColor: "#171717",
-    margin: "0 auto 18px",
-    animation: "youidian-login-spin 780ms linear infinite"
+  applyLoginLoadingPanelStyle(panel);
+  panel.setAttribute("role", "status");
+  panel.setAttribute("aria-label", "\u4F18\u6613\u70B9\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0");
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px"
   });
-  content.appendChild(spinner);
-  content.appendChild(createLoginPanelTitle(options.title));
-  content.appendChild(createLoginPanelDescription(options.description));
+  content.appendChild(createBrandLoadingMark());
+  content.appendChild(createBrandLoadingCopy());
   panel.appendChild(content);
   return panel;
 }
-function createLoginRedirectingPanel(options) {
-  return createLoginLoadingPanel(options);
+function createLoginRedirectingPanel(_options) {
+  return createLoginLoadingPanel();
 }
 function createLoginFallbackPanel(options) {
   const panel = document.createElement("div");
@@ -719,6 +1189,7 @@ var LoginUI = class extends HostedFrameModal {
     this.completed = false;
   }
   markIframeReady() {
+    if (this.iframeReady) return;
     this.iframeReady = true;
     if (typeof window !== "undefined" && this.iframeLoadTimer) {
       window.clearTimeout(this.iframeLoadTimer);
@@ -737,14 +1208,11 @@ var LoginUI = class extends HostedFrameModal {
     this.iframeFallbackPanel = null;
     this.iframeLoadingPanel = null;
   }
-  showIframeLoading(container, options) {
+  showIframeLoading(container) {
     if (this.iframeLoadingPanel || this.iframeReady) {
       return;
     }
-    const panel = createLoginLoadingPanel({
-      description: options?.loadingDescription || "Please wait while the secure login page opens.",
-      title: options?.loadingTitle || "Opening login page"
-    });
+    const panel = createLoginLoadingPanel();
     this.iframeLoadingPanel = panel;
     container.appendChild(panel);
   }
@@ -832,6 +1300,20 @@ var LoginUI = class extends HostedFrameModal {
         break;
       case "LOGIN_RESIZE":
         break;
+      case "LOGIN_REDIRECT_REQUIRED":
+        if (!isValidLoginRedirectUrl(data.authUrl)) {
+          logLoginWarn("Login redirect requested with invalid authUrl");
+          options?.onError?.("Login redirect URL is invalid", data);
+          break;
+        }
+        logLoginInfo("Login redirect requested by hosted page", {
+          attemptId: data.attemptId || null,
+          channel: data.channel || null,
+          authUrl: data.authUrl
+        });
+        this.close();
+        window.location.assign(data.authUrl);
+        break;
       case "LOGIN_ERROR":
         if (this.completed) {
           break;
@@ -855,6 +1337,25 @@ var LoginUI = class extends HostedFrameModal {
         break;
     }
   }
+  openLoginRedirect(params, options) {
+    if (typeof window === "undefined") return;
+    const { callbackState, finalUrl, launchPayload } = this.buildOpenContext(
+      params,
+      options
+    );
+    logLoginInfo("Redirecting to hosted login page", {
+      appId: params.appId,
+      callbackState,
+      callbackUrl: launchPayload.callbackUrl || null,
+      hasCallbackUrl: Boolean(launchPayload.callbackUrl),
+      loginUrl: finalUrl,
+      autoClose: options?.autoClose ?? true,
+      displayMode: "redirect",
+      pageUrl: window.location.href,
+      parentOrigin: launchPayload.origin || null
+    });
+    window.location.assign(finalUrl);
+  }
   listenForLoginCallback(callbackState, options) {
     try {
       this.callbackChannel = new BroadcastChannel(
@@ -931,21 +1432,28 @@ var LoginUI = class extends HostedFrameModal {
         options?.onCancel?.();
         options?.onClose?.();
       },
-      onMessage: (data, container, event) => {
+      onMessage: (data, _container, event) => {
         const isIframeEvent = event.source === this.iframe?.contentWindow;
+        if (!isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE")) {
+          logLoginWarn(
+            "Login lifecycle event ignored: event.source does not match iframe contentWindow",
+            {
+              type: data.type,
+              eventOrigin: event.origin,
+              hasIframe: Boolean(this.iframe),
+              hasIframeContentWindow: Boolean(this.iframe?.contentWindow)
+            }
+          );
+        }
         if (isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE") || data.type === "LOGIN_SUCCESS" || data.type === "LOGIN_ERROR") {
           this.markIframeReady();
         }
-        if (data.type === "LOGIN_RESIZE" && data.height) {
-          const maxHeight = window.innerHeight * 0.94;
-          container.style.height = `${Math.min(data.height, maxHeight)}px`;
-        }
         this.handleLoginEvent(data, options);
       },
       width: "min(520px, 100%)"
     });
     if (hostedFrame) {
-      this.showIframeLoading(hostedFrame.container, options);
+      this.showIframeLoading(hostedFrame.container);
       this.startIframeWatchdog({
         container: hostedFrame.container,
         finalUrl,
@@ -1049,11 +1557,19 @@ var LoginUI = class extends HostedFrameModal {
   }
   openLogin(params, options) {
     if (typeof window === "undefined") return;
-    const displayMode = options?.displayMode ?? "modal";
+    const displayMode = options?.displayMode ?? "auto";
+    if (displayMode === "redirect") {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     if (displayMode === "popup") {
       this.openLoginPopup(params, options);
       return;
     }
+    if (displayMode === "auto" && detectLoginEnvironment().shouldUseRedirectLogin) {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     this.openLoginModal(params, options);
   }
 };
@@ -1063,6 +1579,406 @@ function createLoginUI() {
 handleLoginCallbackIfPresent({ autoClose: false });
 
 // src/client.ts
+var DEFAULT_PAYMENT_IFRAME_LOAD_TIMEOUT_MS = 8e3;
+var PAYMENT_UI_LOG_PREFIX = "[Youidian PaymentUI]";
+function hexToRgb(value) {
+  const normalized = value.trim().replace(/^#/, "");
+  if (!/^[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized)) return null;
+  const hex = normalized.length === 3 ? normalized.split("").map((char) => `${char}${char}`).join("") : normalized;
+  const number = Number.parseInt(hex, 16);
+  return {
+    b: number & 255,
+    g: number >> 8 & 255,
+    r: number >> 16 & 255
+  };
+}
+function alphaColor(value, alpha) {
+  const rgb = hexToRgb(value);
+  if (!rgb)
+    return `color-mix(in srgb, ${value} ${Math.round(alpha * 100)}%, transparent)`;
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+}
+function resolvePaymentTheme(options) {
+  const primary = options?.theme?.primary || "#16a34a";
+  const secondary = options?.theme?.secondary || "color-mix(in srgb, #16a34a 78%, white)";
+  const foreground = options?.theme?.foreground || "#0f172a";
+  const muted = options?.theme?.muted || "#64748b";
+  const surface = options?.theme?.surface || "#ffffff";
+  return {
+    foreground,
+    muted,
+    primary,
+    primary10: alphaColor(primary, 0.1),
+    primary14: alphaColor(primary, 0.14),
+    primary20: alphaColor(primary, 0.2),
+    primary28: alphaColor(primary, 0.28),
+    primary36: alphaColor(primary, 0.36),
+    primary64: alphaColor(primary, 0.64),
+    secondary,
+    surface
+  };
+}
+function logPaymentInfo(message, details) {
+  if (typeof console === "undefined") return;
+  console.info(PAYMENT_UI_LOG_PREFIX, message, details || {});
+}
+function logPaymentWarn(message, details) {
+  if (typeof console === "undefined") return;
+  console.warn(PAYMENT_UI_LOG_PREFIX, message, details || {});
+}
+function getPaymentIframeLoadTimeoutMs(options) {
+  const timeout = options?.iframeLoadTimeoutMs;
+  if (typeof timeout !== "number" || !Number.isFinite(timeout)) {
+    return DEFAULT_PAYMENT_IFRAME_LOAD_TIMEOUT_MS;
+  }
+  return Math.max(0, timeout);
+}
+function isChinesePaymentLocale(locale) {
+  return locale?.toLowerCase().startsWith("zh") || false;
+}
+function getPaymentFallbackText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    buttonText: options?.fallbackButtonText || (isChinese ? "\u5728\u65B0\u9875\u9762\u4E2D\u6253\u5F00" : "Open in new page"),
+    description: isChinese ? "\u5F53\u524D\u7F51\u7EDC\u53EF\u80FD\u8F83\u6162\uFF0C\u5EFA\u8BAE\u91CD\u65B0\u5C1D\u8BD5\u6216\u5728\u65B0\u9875\u9762\u4E2D\u6253\u5F00\uFF0C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u652F\u4ED8\u4F53\u9A8C\u3002" : "Your network may be slow. Try again or open the payment page in a new page to continue.",
+    retryText: options?.fallbackRetryText || (isChinese ? "\u91CD\u65B0\u5C1D\u8BD5" : "Try again"),
+    title: isChinese ? "\u652F\u4ED8\u9875\u9762\u6253\u5F00\u8F83\u6162" : "Payment page is taking longer"
+  };
+}
+function getPaymentBrandText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    language: isChinese ? "zh" : "en",
+    name: isChinese ? "\u4F18\u6613\u70B9" : "Youidian",
+    subtitle: isChinese ? "\u5F00\u53D1\u8005\u670D\u52A1\u5E73\u53F0" : "Developer Service Platform"
+  };
+}
+function getPaymentBrandLoadingText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    language: isChinese ? "zh" : "en",
+    name: isChinese ? "\u4F18\u6613\u70B9" : "Youidian",
+    subtitle: isChinese ? "\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0" : "Developer Service"
+  };
+}
+function getPaymentLoadingText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return options?.loadingTitle || options?.loadingDescription || (isChinese ? "\u52A0\u8F7D\u4E2D..." : "Loading...");
+}
+function applyPaymentPanelStyle(panel, theme) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "28px",
+    background: `linear-gradient(180deg, ${theme.surface} 0%, rgba(248,250,252,0.98) 100%)`,
+    color: theme.foreground,
+    padding: "28px 24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "none",
+    backdropFilter: "blur(16px)"
+  });
+}
+function createPaymentIcon(type) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("aria-hidden", "true");
+  Object.assign(svg.style, {
+    display: "block",
+    flex: "0 0 auto"
+  });
+  const paths = type === "external" ? [
+    "M7 17L17 7",
+    "M10 7H17V14",
+    "M6.5 6.5H5.5A2.5 2.5 0 0 0 3 9V18.5A2.5 2.5 0 0 0 5.5 21H15A2.5 2.5 0 0 0 17.5 18.5V17.5"
+  ] : type === "refresh" ? [
+    "M20 6V11H15",
+    "M4 18V13H9",
+    "M18.2 9A7 7 0 0 0 6.2 6.6L4 9",
+    "M5.8 15A7 7 0 0 0 17.8 17.4L20 15"
+  ] : ["M12 7V12L15 14", "M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12"];
+  for (const value of paths) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", value);
+    path.setAttribute("stroke", "currentColor");
+    path.setAttribute("stroke-width", "2");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    svg.appendChild(path);
+  }
+  return svg;
+}
+function createPaymentFallbackArtwork(theme) {
+  const artwork = document.createElement("div");
+  Object.assign(artwork.style, {
+    height: "164px",
+    margin: "0 auto 34px",
+    position: "relative",
+    width: "184px"
+  });
+  const wash = document.createElement("div");
+  Object.assign(wash.style, {
+    position: "absolute",
+    left: "16px",
+    top: "20px",
+    width: "152px",
+    height: "126px",
+    borderRadius: "48% 52% 43% 57% / 54% 42% 58% 46%",
+    background: `radial-gradient(circle at 48% 42%, ${theme.primary20}, ${theme.primary10} 52%, transparent 76%)`,
+    filter: "blur(1px)",
+    transform: "rotate(-10deg)"
+  });
+  const blob = document.createElement("div");
+  Object.assign(blob.style, {
+    position: "absolute",
+    left: "26px",
+    top: "28px",
+    width: "132px",
+    height: "116px",
+    borderRadius: "42% 58% 53% 47% / 45% 39% 61% 55%",
+    background: `linear-gradient(150deg, ${theme.primary14}, ${theme.primary10})`,
+    boxShadow: `0 30px 64px ${theme.primary14}`,
+    transform: "rotate(8deg)"
+  });
+  const tile = document.createElement("div");
+  Object.assign(tile.style, {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%) rotate(-4deg)",
+    width: "112px",
+    height: "106px",
+    borderRadius: "38% 62% 50% 50% / 44% 43% 57% 56%",
+    background: `linear-gradient(145deg, ${theme.primary}, ${theme.secondary})`,
+    border: `1px solid ${theme.primary36}`,
+    color: "#ffffff",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: `0 26px 54px ${theme.primary28}`
+  });
+  const icon = createPaymentIcon("slow");
+  Object.assign(icon.style, {
+    width: "52px",
+    height: "52px",
+    transform: "rotate(4deg)"
+  });
+  tile.appendChild(icon);
+  artwork.appendChild(wash);
+  artwork.appendChild(blob);
+  artwork.appendChild(tile);
+  return artwork;
+}
+function createPaymentBrandLoading(options, theme) {
+  const brand = getPaymentBrandLoadingText(options);
+  const wrapper = document.createElement("div");
+  Object.assign(wrapper.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 16px"
+  });
+  wrapper.appendChild(
+    createSdkBrandLogo({
+      animated: true,
+      brand,
+      brandWidth: 292,
+      copyWidth: 176,
+      gap: 6,
+      markMarginRight: -10,
+      markSize: 112,
+      nameSize: 39,
+      subtitleMarginTop: 8,
+      subtitleSize: 14,
+      subtitleWeight: "700",
+      theme,
+      variant: "brand"
+    })
+  );
+  return wrapper;
+}
+function createPaymentPlatformLogo(options, theme) {
+  const brand = getPaymentBrandText(options);
+  const wrapper = document.createElement("div");
+  Object.assign(wrapper.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 10px"
+  });
+  wrapper.appendChild(
+    createSdkBrandLogo({
+      brand,
+      markSize: 48,
+      nameSize: brand.language === "zh" ? 22 : 22,
+      subtitleSize: brand.language === "zh" ? 9 : 9,
+      theme
+    })
+  );
+  return wrapper;
+}
+function createPaymentPanelContent() {
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    maxWidth: "364px",
+    minHeight: "100%",
+    width: "100%"
+  });
+  return content;
+}
+function createPaymentPanelTitle(value, theme) {
+  const title = document.createElement("div");
+  title.textContent = value;
+  Object.assign(title.style, {
+    color: theme?.foreground || "#0f172a",
+    fontSize: "24px",
+    fontWeight: "900",
+    lineHeight: "1.22",
+    marginBottom: "16px"
+  });
+  return title;
+}
+function createPaymentPanelDescription(value, theme) {
+  const description = document.createElement("div");
+  description.textContent = value;
+  Object.assign(description.style, {
+    color: theme?.muted || "#64748b",
+    fontSize: "14px",
+    fontWeight: "600",
+    lineHeight: "1.62",
+    margin: "0 auto",
+    maxWidth: "320px"
+  });
+  return description;
+}
+function createPaymentLoadingDescription(value, theme) {
+  const description = document.createElement("div");
+  description.textContent = value;
+  Object.assign(description.style, {
+    color: theme?.muted || "#64748b",
+    fontSize: "14px",
+    fontWeight: "500",
+    lineHeight: "1.25",
+    margin: "12px auto 0",
+    maxWidth: "320px"
+  });
+  return description;
+}
+function createPaymentFallbackMessage(options) {
+  const message = document.createElement("div");
+  Object.assign(message.style, {
+    margin: "0 auto",
+    textAlign: "center"
+  });
+  message.appendChild(createPaymentFallbackArtwork(options.theme));
+  message.appendChild(createPaymentPanelTitle(options.title, options.theme));
+  message.appendChild(
+    createPaymentPanelDescription(options.description, options.theme)
+  );
+  return message;
+}
+function createPaymentLoadingPanel(options) {
+  const panel = document.createElement("div");
+  const theme = resolvePaymentTheme(options);
+  applyPaymentPanelStyle(panel, theme);
+  const content = createPaymentPanelContent();
+  content.appendChild(createPaymentBrandLoading(options, theme));
+  content.appendChild(
+    createPaymentLoadingDescription(getPaymentLoadingText(options), theme)
+  );
+  panel.appendChild(content);
+  return panel;
+}
+function createPaymentButton(value, options) {
+  const primary = options?.primary || false;
+  const theme = options?.theme || resolvePaymentTheme();
+  const button = document.createElement("button");
+  button.type = "button";
+  Object.assign(button.style, {
+    width: "100%",
+    height: "50px",
+    borderRadius: "14px",
+    border: primary ? `1px solid ${theme.primary}` : `1px solid ${theme.primary64}`,
+    background: primary ? `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})` : "#ffffff",
+    color: primary ? "#ffffff" : theme.primary,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "10px",
+    fontSize: "15px",
+    fontWeight: "800",
+    marginTop: primary ? "12px" : "0",
+    boxShadow: primary ? `0 14px 28px ${theme.primary20}` : "none"
+  });
+  if (options?.icon) {
+    const icon = createPaymentIcon(options.icon);
+    Object.assign(icon.style, {
+      width: "17px",
+      height: "17px"
+    });
+    button.appendChild(icon);
+  }
+  const label = document.createElement("span");
+  label.textContent = value;
+  button.appendChild(label);
+  return button;
+}
+function createPaymentFallbackPanel(options) {
+  const panel = document.createElement("div");
+  const theme = resolvePaymentTheme(options.paymentOptions);
+  applyPaymentPanelStyle(panel, theme);
+  const content = createPaymentPanelContent();
+  Object.assign(content.style, {
+    justifyContent: "space-between"
+  });
+  const main = document.createElement("div");
+  Object.assign(main.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    marginTop: "38px",
+    width: "100%"
+  });
+  main.appendChild(
+    createPaymentFallbackMessage({
+      description: options.description,
+      theme,
+      title: options.title
+    })
+  );
+  const actions = document.createElement("div");
+  Object.assign(actions.style, {
+    marginTop: "46px",
+    width: "100%"
+  });
+  const retryButton = createPaymentButton(options.retryText, {
+    icon: "refresh",
+    theme
+  });
+  retryButton.onclick = options.onRetry;
+  actions.appendChild(retryButton);
+  const openButton = createPaymentButton(options.buttonText, {
+    icon: "external",
+    primary: true,
+    theme
+  });
+  openButton.onclick = options.onOpen;
+  actions.appendChild(openButton);
+  main.appendChild(actions);
+  content.appendChild(main);
+  content.appendChild(createPaymentPlatformLogo(options.paymentOptions, theme));
+  panel.appendChild(content);
+  return panel;
+}
 var PaymentUI = class extends HostedFrameModal {
   constructor() {
     super(...arguments);
@@ -1071,6 +1987,127 @@ var PaymentUI = class extends HostedFrameModal {
     __publicField(this, "activeOrderId", null);
     __publicField(this, "paymentCompleted", false);
     __publicField(this, "cancelRequestedOrderId", null);
+    __publicField(this, "iframeFallbackPanel", null);
+    __publicField(this, "iframeLoadingPanel", null);
+    __publicField(this, "iframeLoadTimer", null);
+    __publicField(this, "iframeReady", false);
+  }
+  cleanupPaymentFrameState() {
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+    this.iframeLoadTimer = null;
+    this.iframeReady = false;
+  }
+  markPaymentIframeReady() {
+    if (this.iframeReady) return;
+    this.iframeReady = true;
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+      this.iframeLoadTimer = null;
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+  }
+  showPaymentIframeLoading(container, options) {
+    if (this.iframeLoadingPanel || this.iframeReady) return;
+    const panel = createPaymentLoadingPanel(options);
+    this.iframeLoadingPanel = panel;
+    container.appendChild(panel);
+  }
+  openFallbackPaymentPage(finalUrl, options) {
+    if (typeof window === "undefined") return;
+    const popup = window.open(
+      finalUrl,
+      "youidian-payment-checkout",
+      "popup=yes,width=480,height=760,resizable=yes,scrollbars=yes"
+    );
+    if (popup) {
+      logPaymentInfo("Opened hosted checkout fallback page", {
+        checkoutUrl: finalUrl
+      });
+      options?.onFallbackOpen?.(finalUrl);
+      try {
+        popup.focus();
+      } catch {
+      }
+      return;
+    }
+    logPaymentWarn("Hosted checkout fallback popup was blocked", {
+      checkoutUrl: finalUrl
+    });
+    options?.onFallbackBlocked?.(finalUrl);
+    window.location.assign(finalUrl);
+  }
+  showPaymentIframeFallback(options) {
+    if (this.iframeReady || this.iframeFallbackPanel) return;
+    const { container, finalUrl, paymentOptions } = options;
+    logPaymentWarn("Hosted checkout iframe did not report ready in time", {
+      checkoutUrl: finalUrl
+    });
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeLoadingPanel = null;
+    const fallbackText = getPaymentFallbackText(paymentOptions);
+    const panel = createPaymentFallbackPanel({
+      buttonText: fallbackText.buttonText,
+      description: fallbackText.description,
+      onOpen: () => {
+        this.openFallbackPaymentPage(finalUrl, paymentOptions);
+      },
+      onRetry: () => {
+        this.iframeFallbackPanel = null;
+        if (panel.parentNode) {
+          panel.parentNode.removeChild(panel);
+        }
+        this.iframeReady = false;
+        this.showPaymentIframeLoading(container, paymentOptions);
+        if (this.iframe) {
+          this.iframe.src = finalUrl;
+        }
+        this.startPaymentIframeWatchdog({
+          container,
+          finalUrl,
+          paymentOptions
+        });
+      },
+      paymentOptions,
+      retryText: fallbackText.retryText,
+      title: fallbackText.title
+    });
+    this.iframeFallbackPanel = panel;
+    container.appendChild(panel);
+    paymentOptions?.onFallbackVisible?.();
+  }
+  startPaymentIframeWatchdog(options) {
+    if (typeof window === "undefined") return;
+    if (this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+    }
+    const timeoutMs = getPaymentIframeLoadTimeoutMs(options.paymentOptions);
+    if (timeoutMs === 0) {
+      this.showPaymentIframeFallback(options);
+      return;
+    }
+    this.iframeLoadTimer = window.setTimeout(() => {
+      this.iframeLoadTimer = null;
+      this.showPaymentIframeFallback(options);
+    }, timeoutMs);
   }
   cancelHostedOrder(reason = "user_cancel", orderId) {
     const targetOrderId = orderId || this.activeOrderId;
@@ -1113,6 +2150,7 @@ var PaymentUI = class extends HostedFrameModal {
     this.activeOrderId = null;
     this.paymentCompleted = false;
     this.cancelRequestedOrderId = null;
+    this.cleanupPaymentFrameState();
     if (typeof urlOrParams === "string") {
       checkoutUrl = urlOrParams;
       try {
@@ -1181,14 +2219,21 @@ var PaymentUI = class extends HostedFrameModal {
       checkoutUrl,
       getAutoResolvedLocale(options?.locale)
     );
-    this.openHostedFrame(finalUrl, {
+    const hostedFrame = this.openHostedFrame(finalUrl, {
       allowedOrigin: options?.allowedOrigin,
+      height: "min(760px, calc(100vh - 32px))",
       onCloseButton: () => {
         this.cancelHostedOrder("modal_close");
         options?.onCancel?.(this.activeOrderId || void 0);
       },
-      onMessage: (data, container) => {
+      onMessage: (data, container, event) => {
+        const isIframeMessage = event.source === this.iframe?.contentWindow;
+        if (isIframeMessage && (data.type === "PAYMENT_READY" || data.type === "PAYMENT_RESIZE" || data.type === "PAYMENT_STARTED")) {
+          this.markPaymentIframeReady();
+        }
         switch (data.type) {
+          case "PAYMENT_READY":
+            break;
           case "PAYMENT_STARTED":
             if (data.orderId) {
               this.activeOrderId = data.orderId;
@@ -1203,11 +2248,6 @@ var PaymentUI = class extends HostedFrameModal {
             options?.onCancel?.(data.orderId);
             break;
           case "PAYMENT_RESIZE":
-            if (data.height) {
-              const maxHeight = window.innerHeight * 0.9;
-              const newHeight = Math.min(data.height, maxHeight);
-              container.style.height = `${newHeight}px`;
-            }
             break;
           case "PAYMENT_CLOSE":
             this.cancelHostedOrder("payment_close", data.orderId);
@@ -1215,8 +2255,21 @@ var PaymentUI = class extends HostedFrameModal {
             options?.onClose?.();
             break;
         }
-      }
+      },
+      width: "min(450px, 100%)"
     });
+    if (hostedFrame) {
+      this.showPaymentIframeLoading(hostedFrame.container, options);
+      this.startPaymentIframeWatchdog({
+        container: hostedFrame.container,
+        finalUrl,
+        paymentOptions: options
+      });
+    }
+  }
+  close() {
+    super.close();
+    this.cleanupPaymentFrameState();
   }
   /**
    * Poll order status from integrator's API endpoint
@@ -1262,10 +2315,685 @@ var PaymentUI = class extends HostedFrameModal {
     });
   }
 };
+var MessageUI = class {
+  openWechatBinding(options) {
+    const bindingUrl = options.bindingUrl?.trim();
+    if (!bindingUrl) {
+      throw new Error("bindingUrl is required");
+    }
+    if (options.displayMode === "popup") {
+      const popup = window.open(
+        bindingUrl,
+        options.popupName || "youidian-wechat-message-binding",
+        "width=480,height=720,noopener,noreferrer"
+      );
+      if (!popup) {
+        window.location.href = bindingUrl;
+      }
+      return;
+    }
+    window.location.href = bindingUrl;
+  }
+};
+function createMessageUI() {
+  return new MessageUI();
+}
 function createPaymentUI() {
   return new PaymentUI();
 }
 
+// src/feedback.ts
+var DEFAULT_CATEGORIES = [
+  { value: "BUG", label: "\u95EE\u9898\u53CD\u9988" },
+  { value: "PAYMENT", label: "\u652F\u4ED8\u95EE\u9898" },
+  { value: "LOGIN", label: "\u767B\u5F55\u95EE\u9898" },
+  { value: "SUGGESTION", label: "\u529F\u80FD\u5EFA\u8BAE" },
+  { value: "OTHER", label: "\u5176\u4ED6" }
+];
+var STYLE_ID = "youidian-feedback-widget-style";
+var MAX_IMAGES_PER_MESSAGE = 4;
+var DEFAULT_PANEL_TITLE = "\u53CD\u9988";
+var DEFAULT_PANEL_SUBTITLE = "\u63D0\u4EA4\u95EE\u9898\u3001\u5EFA\u8BAE\u6216\u4F7F\u7528\u53CD\u9988\u3002";
+var DEFAULT_ATTACHMENTS_LABEL = "\u652F\u6301\u7C98\u8D34\u3001\u62D6\u5165\u6216\u4E0A\u4F20\u622A\u56FE\uFF0C\u6700\u591A 4 \u5F20";
+var FEEDBACK_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.6 8.6 0 0 1-7.7 4.7 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.2a8.5 8.5 0 0 1-1-4.1 8.6 8.6 0 0 1 8.6-8.6 8.5 8.5 0 0 1 8.5 8.4Z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.4 10.2h7.2M8.4 13.5h4.7" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>`;
+var BUG_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8.5a4 4 0 0 1 8 0v6a4 4 0 0 1-8 0v-6Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M5 9h3m8 0h3M5.5 15H8m8 0h2.5M7 5.5 5.5 4M17 5.5 18.5 4M12 4.5V2.8M12 20.5v-12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
+var NOTE_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3.5h7l3.5 3.5v13.5H7A2.5 2.5 0 0 1 4.5 18V6A2.5 2.5 0 0 1 7 3.5Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M14 3.8V7h3.2M8 11h8M8 15h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
+var MAIL_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 6.5h15v11h-15v-11Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m5 7 7 6 7-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var IMAGE_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v14H5V5Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m7.5 16 3.2-3.2 2.4 2.4 1.7-1.7L18 16.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.8 8.2h.01" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg>`;
+var CHEVRON_ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+function ensureStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.yd-feedback-root,.yd-feedback-root *{box-sizing:border-box}
+.yd-feedback-root{--yd-feedback-bg:hsl(var(--background,0 0% 100%));--yd-feedback-fg:hsl(var(--foreground,240 10% 3.9%));--yd-feedback-card:hsl(var(--card,0 0% 100%));--yd-feedback-card-fg:hsl(var(--card-foreground,240 10% 3.9%));--yd-feedback-muted:hsl(var(--muted,240 4.8% 95.9%));--yd-feedback-muted-fg:hsl(var(--muted-foreground,240 3.8% 46.1%));--yd-feedback-border:hsl(var(--border,240 5.9% 90%));--yd-feedback-primary:hsl(var(--primary,142 76% 36%));--yd-feedback-primary-fg:hsl(var(--primary-foreground,0 0% 100%));--yd-feedback-ring:hsl(var(--ring,142 76% 36%));font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--yd-feedback-fg)}
+.yd-feedback-root button,.yd-feedback-root input,.yd-feedback-root textarea{font:inherit}
+.yd-feedback-launcher{position:fixed;right:22px;bottom:22px;z-index:2147483000;width:54px;height:54px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--yd-feedback-primary) 24%,var(--yd-feedback-border));border-radius:999px;background:var(--yd-feedback-primary);color:var(--yd-feedback-primary-fg);box-shadow:0 18px 45px color-mix(in srgb,var(--yd-feedback-primary) 22%,transparent);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
+.yd-feedback-launcher:hover{transform:translateY(-2px);box-shadow:0 22px 56px color-mix(in srgb,var(--yd-feedback-primary) 30%,transparent)}
+.yd-feedback-launcher:focus-visible{outline:3px solid color-mix(in srgb,var(--yd-feedback-ring) 32%,transparent);outline-offset:3px}
+.yd-feedback-launcher svg{width:27px;height:27px}
+.yd-feedback-panel{position:fixed;inset:auto 22px 86px auto;z-index:2147483000;width:min(760px,calc(100vw - 44px));height:min(560px,calc(100vh - 108px));display:none;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid var(--yd-feedback-border);border-radius:18px;background:var(--yd-feedback-card);color:var(--yd-feedback-card-fg);box-shadow:0 24px 70px rgba(15,23,42,.18)}
+.yd-feedback-panel[data-open="true"]{display:grid}
+.yd-feedback-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 16px;border-bottom:1px solid var(--yd-feedback-border);background:var(--yd-feedback-card)}
+.yd-feedback-title{margin:0;font-size:22px;line-height:1.15;font-weight:760;letter-spacing:0;color:var(--yd-feedback-fg)}
+.yd-feedback-subtitle{margin:8px 0 0;color:var(--yd-feedback-muted-fg);font-size:13px;line-height:1.45}
+.yd-feedback-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--yd-feedback-muted-fg);cursor:pointer;transition:background .16s ease,color .16s ease}
+.yd-feedback-close:hover{background:var(--yd-feedback-muted);color:var(--yd-feedback-fg)}
+.yd-feedback-close svg{width:24px;height:24px}
+.yd-feedback-shell{display:grid;min-height:0;grid-template-columns:230px minmax(0,1fr)}
+.yd-feedback-sidebar{min-width:0;border-right:1px solid var(--yd-feedback-border);background:var(--yd-feedback-muted)}
+.yd-feedback-sidebar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px;border-bottom:1px solid var(--yd-feedback-border)}
+.yd-feedback-sidebar-title{display:flex;align-items:center;gap:9px;color:var(--yd-feedback-fg);font-size:15px;font-weight:720}
+.yd-feedback-sidebar-title svg{width:20px;height:20px;color:var(--yd-feedback-primary)}
+.yd-feedback-icon-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--yd-feedback-border);border-radius:999px;background:var(--yd-feedback-card);color:var(--yd-feedback-fg);cursor:pointer;transition:background .16s ease,border-color .16s ease}
+.yd-feedback-icon-button:hover{background:color-mix(in srgb,var(--yd-feedback-primary) 8%,var(--yd-feedback-card));border-color:color-mix(in srgb,var(--yd-feedback-primary) 38%,var(--yd-feedback-border))}
+.yd-feedback-icon-button svg{width:18px;height:18px}
+.yd-feedback-thread-list{padding:12px}
+.yd-feedback-thread-card{display:none;border:1px solid var(--yd-feedback-border);border-radius:14px;background:var(--yd-feedback-card);padding:12px}
+.yd-feedback-thread-card[data-visible="true"]{display:block}
+.yd-feedback-thread-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
+.yd-feedback-badge{display:inline-flex;align-items:center;border:1px solid var(--yd-feedback-border);border-radius:999px;background:var(--yd-feedback-muted);color:var(--yd-feedback-fg);padding:4px 9px;font-size:11px;font-weight:700;line-height:1}
+.yd-feedback-badge[data-status="true"]{border-color:color-mix(in srgb,var(--yd-feedback-primary) 45%,var(--yd-feedback-border));background:color-mix(in srgb,var(--yd-feedback-primary) 12%,var(--yd-feedback-card));color:var(--yd-feedback-primary)}
+.yd-feedback-thread-preview{margin:0;color:var(--yd-feedback-fg);font-size:13px;line-height:1.45;word-break:break-word}
+.yd-feedback-thread-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:var(--yd-feedback-muted-fg);font-size:11px}
+.yd-feedback-empty-thread{border:1px dashed var(--yd-feedback-border);border-radius:14px;padding:14px;color:var(--yd-feedback-muted-fg);font-size:12px}
+.yd-feedback-main{min-width:0;min-height:0;background:var(--yd-feedback-card);overflow:hidden}
+.yd-feedback-form{height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:14px;padding:16px 18px 0}
+.yd-feedback-row{display:grid;gap:14px;grid-template-columns:180px minmax(0,1fr)}
+.yd-feedback-field{display:flex;min-width:0;flex-direction:column;gap:8px}
+.yd-feedback-label{display:flex;align-items:center;gap:8px;color:var(--yd-feedback-fg);font-size:13px;font-weight:720}
+.yd-feedback-label svg{width:17px;height:17px;color:var(--yd-feedback-fg)}
+.yd-feedback-input,.yd-feedback-textarea{width:100%;border:1px solid var(--yd-feedback-border);border-radius:13px;background:var(--yd-feedback-card);color:var(--yd-feedback-fg);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
+.yd-feedback-input{height:40px;padding:0 13px;font-size:14px}
+.yd-feedback-textarea{min-height:118px;padding:13px 14px;font-size:14px;resize:none}
+.yd-feedback-input::placeholder,.yd-feedback-textarea::placeholder{color:var(--yd-feedback-muted-fg)}
+.yd-feedback-input:focus,.yd-feedback-textarea:focus{border-color:var(--yd-feedback-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--yd-feedback-ring) 18%,transparent);background:var(--yd-feedback-card)}
+.yd-feedback-compose-box{overflow:hidden;border:1px solid var(--yd-feedback-border);border-radius:15px;background:var(--yd-feedback-card)}
+.yd-feedback-compose-box .yd-feedback-textarea{border:0;border-radius:0;box-shadow:none;background:transparent}
+.yd-feedback-attachment-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--yd-feedback-border);padding:9px 12px;color:var(--yd-feedback-muted-fg)}
+.yd-feedback-file-trigger{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--yd-feedback-fg);cursor:pointer;padding:7px 8px;border-radius:10px}
+.yd-feedback-file-trigger:hover{background:var(--yd-feedback-muted)}
+.yd-feedback-file-trigger svg{width:18px;height:18px}
+.yd-feedback-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}
+.yd-feedback-files{min-width:0;text-align:right;color:var(--yd-feedback-muted-fg);font-size:12px}
+.yd-feedback-select{position:relative;width:142px}
+.yd-feedback-select-button{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--yd-feedback-border);border-radius:13px;background:var(--yd-feedback-card);color:var(--yd-feedback-fg);padding:0 12px;cursor:pointer}
+.yd-feedback-select-value{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
+.yd-feedback-select-value svg{width:18px;height:18px;color:var(--yd-feedback-muted-fg)}
+.yd-feedback-select-chevron{width:17px;height:17px;color:var(--yd-feedback-muted-fg)}
+.yd-feedback-select-menu{position:absolute;left:0;top:calc(100% + 7px);z-index:2;display:none;min-width:176px;max-height:220px;overflow:auto;border:1px solid var(--yd-feedback-border);border-radius:13px;background:var(--yd-feedback-card);box-shadow:0 18px 45px rgba(15,23,42,.16);padding:5px}
+.yd-feedback-select[data-open="true"] .yd-feedback-select-menu{display:block}
+.yd-feedback-select-option{width:100%;min-height:38px;display:flex;align-items:center;gap:8px;border:0;border-radius:10px;background:transparent;color:var(--yd-feedback-fg);text-align:left;padding:9px 10px;cursor:pointer}
+.yd-feedback-select-option svg{width:18px;height:18px;flex:0 0 18px;color:var(--yd-feedback-muted-fg)}
+.yd-feedback-select-option span{line-height:1.2;white-space:nowrap}
+.yd-feedback-select-option:hover,.yd-feedback-select-option[data-selected="true"]{background:color-mix(in srgb,var(--yd-feedback-primary) 10%,var(--yd-feedback-card));color:var(--yd-feedback-fg)}
+.yd-feedback-messages{display:flex;min-height:0;flex-direction:column;gap:8px;overflow:auto}
+.yd-feedback-message{border:1px solid var(--yd-feedback-border);border-radius:12px;padding:9px 10px;background:var(--yd-feedback-muted)}
+.yd-feedback-message[data-admin="true"]{background:color-mix(in srgb,var(--yd-feedback-primary) 10%,var(--yd-feedback-card));border-color:color-mix(in srgb,var(--yd-feedback-primary) 24%,var(--yd-feedback-border))}
+.yd-feedback-message-meta{margin-bottom:4px;color:var(--yd-feedback-muted-fg);font-size:11px}
+.yd-feedback-message-content{color:var(--yd-feedback-fg);font-size:12px;line-height:1.45;word-break:break-word}
+.yd-feedback-actions{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 -18px;padding:12px 18px 16px;border-top:1px solid var(--yd-feedback-border);background:var(--yd-feedback-card)}
+.yd-feedback-submit{min-width:104px;height:44px;border:0;border-radius:13px;background:var(--yd-feedback-primary);color:var(--yd-feedback-primary-fg);padding:0 18px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px color-mix(in srgb,var(--yd-feedback-primary) 18%,transparent);transition:background .16s ease,transform .16s ease}
+.yd-feedback-submit:hover{transform:translateY(-1px)}
+.yd-feedback-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
+.yd-feedback-secondary{height:38px;border:0;border-radius:12px;background:transparent;color:var(--yd-feedback-fg);padding:0 12px;font-size:14px;font-weight:760;cursor:pointer}
+.yd-feedback-secondary:hover{background:var(--yd-feedback-muted)}
+.yd-feedback-error{min-height:18px;color:#fb7185;font-size:13px}
+@media (max-width:760px){
+	.yd-feedback-panel{inset:auto 14px 78px 14px;width:auto;height:min(560px,calc(100vh - 96px));border-radius:16px}
+	.yd-feedback-header{padding:16px 16px 14px}
+	.yd-feedback-title{font-size:20px}
+	.yd-feedback-shell{grid-template-columns:1fr}
+	.yd-feedback-sidebar{display:none}
+	.yd-feedback-form{padding:14px 14px 0;gap:12px}
+	.yd-feedback-row{grid-template-columns:1fr}
+	.yd-feedback-actions{justify-content:space-between}
+}
+`;
+  document.head.appendChild(style);
+}
+function getBaseUrl(options) {
+  return (options.apiBaseUrl || "https://pay.imgto.link").replace(/\/$/, "");
+}
+function safeJson(value) {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "{}";
+  }
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function getInitialContact(actor) {
+  return actor?.contactEmail || actor?.contactPhone || "";
+}
+function formatCategoryLabel(value, categories = DEFAULT_CATEGORIES) {
+  const matched = categories.find((item) => item.value === value);
+  return matched?.label || value || DEFAULT_CATEGORIES[0]?.label || "\u53CD\u9988";
+}
+function formatThreadStatus(value) {
+  const statusMap = {
+    OPEN: "\u5DF2\u63D0\u4EA4",
+    WAITING_ADMIN: "\u7B49\u5F85\u56DE\u590D",
+    WAITING_USER: "\u5F85\u8865\u5145",
+    RESOLVED: "\u5DF2\u5904\u7406",
+    CLOSED: "\u5DF2\u5173\u95ED"
+  };
+  return statusMap[value || ""] || value || "\u5DF2\u63D0\u4EA4";
+}
+function formatSenderType(value) {
+  if (value === "END_USER") return "\u7528\u6237";
+  if (value === "ADMIN") return "\u7BA1\u7406\u5458";
+  return "\u7CFB\u7EDF";
+}
+function formatThreadTime(value) {
+  if (!value) return "";
+  return new Date(value).toLocaleString();
+}
+async function requestJson(url, init) {
+  const response = await fetch(url, {
+    ...init,
+    headers: {
+      Accept: "application/json",
+      ...init?.body ? { "Content-Type": "application/json" } : {},
+      ...init?.headers || {}
+    }
+  });
+  const payload = await response.json().catch(() => null);
+  if (!response.ok || payload?.code !== 200) {
+    throw new Error(payload?.message || response.statusText || "Request failed");
+  }
+  return payload.data;
+}
+function collectMetadata(options) {
+  const page = typeof window === "undefined" ? {} : {
+    pageUrl: window.location.href,
+    pageTitle: document.title,
+    userAgent: navigator.userAgent
+  };
+  return { ...page, ...options.metadata || {} };
+}
+async function compressImage(file) {
+  if (typeof document === "undefined" || !file.type.startsWith("image/")) {
+    return file;
+  }
+  const bitmap = await createImageBitmap(file);
+  const maxSize = 1600;
+  const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return file;
+  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  const blob = await new Promise((resolve) => {
+    canvas.toBlob(resolve, "image/webp", 0.82);
+  });
+  if (!blob) return file;
+  return new File([blob], file.name.replace(/\.[^.]+$/, ".webp"), {
+    type: "image/webp",
+    lastModified: Date.now()
+  });
+}
+function createFeedbackWidget(container, options) {
+  if (typeof document === "undefined") {
+    return { open() {
+    }, close() {
+    }, destroy() {
+    } };
+  }
+  if (!options.appId) throw new Error("appId is required");
+  ensureStyle();
+  let threadState = null;
+  let pollTimer = null;
+  let panelReady = false;
+  let pendingFiles = [];
+  let renderedMessages = [];
+  let removeLoadListener = null;
+  const root = document.createElement("div");
+  root.className = "yd-feedback-root";
+  const launcher = document.createElement("button");
+  launcher.type = "button";
+  launcher.className = "yd-feedback-launcher";
+  launcher.setAttribute("aria-label", options.launcherText || "\u53CD\u9988");
+  launcher.innerHTML = FEEDBACK_ICON;
+  root.appendChild(launcher);
+  container.appendChild(root);
+  const panel = document.createElement("section");
+  panel.className = "yd-feedback-panel";
+  panel.setAttribute("aria-label", options.panelTitle || DEFAULT_PANEL_TITLE);
+  panel.innerHTML = `
+<div class="yd-feedback-header">
+	<div>
+		<h2 class="yd-feedback-title">${escapeHtml(options.panelTitle || DEFAULT_PANEL_TITLE)}</h2>
+		<p class="yd-feedback-subtitle">${escapeHtml(options.panelSubtitle || DEFAULT_PANEL_SUBTITLE)}</p>
+	</div>
+	<button type="button" class="yd-feedback-close" aria-label="\u5173\u95ED">
+		<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
+	</button>
+</div>
+<div class="yd-feedback-shell">
+	<aside class="yd-feedback-sidebar">
+		<div class="yd-feedback-sidebar-toolbar">
+			<div class="yd-feedback-sidebar-title">${FEEDBACK_ICON}<span>\u53CD\u9988\u8BB0\u5F55</span></div>
+			<button type="button" class="yd-feedback-icon-button" data-role="clear" aria-label="\u65B0\u5EFA\u53CD\u9988">
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
+			</button>
+		</div>
+		<div class="yd-feedback-thread-list">
+			<div class="yd-feedback-thread-card" data-role="thread-card">
+				<div class="yd-feedback-thread-badges">
+					<span class="yd-feedback-badge" data-role="thread-category">\u95EE\u9898\u53CD\u9988</span>
+					<span class="yd-feedback-badge" data-status="true" data-role="thread-status">\u5DF2\u63D0\u4EA4</span>
+				</div>
+				<p class="yd-feedback-thread-preview" data-role="thread-preview"></p>
+				<div class="yd-feedback-thread-meta">
+					<span data-role="thread-time"></span>
+					<span>\u6211\u7684\u53CD\u9988</span>
+				</div>
+			</div>
+			<div class="yd-feedback-empty-thread" data-role="thread-empty">\u63D0\u4EA4\u53CD\u9988\u540E\uFF0C\u8BB0\u5F55\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002</div>
+		</div>
+	</aside>
+	<div class="yd-feedback-main">
+		<div class="yd-feedback-form">
+			<div class="yd-feedback-row">
+				<div class="yd-feedback-field">
+					<label class="yd-feedback-label">\u53CD\u9988\u7C7B\u578B</label>
+					<div class="yd-feedback-select" data-role="category-select">
+						<button type="button" class="yd-feedback-select-button" data-role="category-trigger">
+							<span class="yd-feedback-select-value">${BUG_ICON}<span data-role="category-value">\u95EE\u9898\u53CD\u9988</span></span>
+							<span class="yd-feedback-select-chevron">${CHEVRON_ICON}</span>
+						</button>
+						<div class="yd-feedback-select-menu" data-role="category-menu"></div>
+					</div>
+				</div>
+			</div>
+			<div class="yd-feedback-field">
+				<label class="yd-feedback-label">${NOTE_ICON}<span>\u53CD\u9988\u5185\u5BB9</span></label>
+				<div class="yd-feedback-compose-box">
+					<textarea class="yd-feedback-textarea" data-role="content" placeholder="${escapeHtml(options.placeholder || "\u8BF7\u63CF\u8FF0\u95EE\u9898\u73B0\u8C61\u3001\u64CD\u4F5C\u6B65\u9AA4\u6216\u5EFA\u8BAE\u5185\u5BB9\u3002")}"></textarea>
+					<div class="yd-feedback-attachment-row">
+						<button type="button" class="yd-feedback-file-trigger" data-role="files-trigger">${IMAGE_ICON}<span>\u4E0A\u4F20\u56FE\u7247</span></button>
+						<input class="yd-feedback-file-input" type="file" accept="image/png,image/jpeg,image/webp" multiple data-role="files" />
+						<div class="yd-feedback-files" data-role="files-label">${DEFAULT_ATTACHMENTS_LABEL}</div>
+					</div>
+				</div>
+			</div>
+			<div class="yd-feedback-field">
+				<label class="yd-feedback-label">${MAIL_ICON}<span>\u8054\u7CFB\u65B9\u5F0F\uFF08\u9009\u586B\uFF09</span></label>
+				<input class="yd-feedback-input" data-role="contact" value="${escapeHtml(getInitialContact(options.actor))}" placeholder="${escapeHtml(options.contactPlaceholder || "\u90AE\u7BB1\u6216\u7535\u8BDD\u53F7\u7801\uFF0C\u4EC5\u7528\u4E8E\u53CD\u9988\u8DDF\u8FDB")}" />
+			</div>
+			<div class="yd-feedback-messages" data-role="messages"></div>
+			<div class="yd-feedback-error" data-role="error"></div>
+			<div class="yd-feedback-actions">
+				<button type="button" class="yd-feedback-secondary" data-role="clear-secondary">\u5173\u95ED</button>
+				<button type="button" class="yd-feedback-submit" data-role="submit">\u63D0\u4EA4\u53CD\u9988</button>
+			</div>
+		</div>
+	</div>
+</div>
+`;
+  function initPanel() {
+    if (panelReady) return;
+    panelReady = true;
+    root.appendChild(panel);
+    const categorySelect = panel.querySelector(
+      '[data-role="category-select"]'
+    );
+    const categoryMenu = panel.querySelector(
+      '[data-role="category-menu"]'
+    );
+    const categoryValue = panel.querySelector(
+      '[data-role="category-value"]'
+    );
+    if (categoryMenu && categoryValue) {
+      const categories = options.categories || DEFAULT_CATEGORIES;
+      categoryValue.textContent = categories[0]?.label || DEFAULT_CATEGORIES[0]?.label || "\u53CD\u9988";
+      for (const item of categories) {
+        const option = document.createElement("button");
+        option.type = "button";
+        option.className = "yd-feedback-select-option";
+        option.dataset.value = item.value;
+        option.dataset.selected = String(item.value === categories[0]?.value);
+        option.innerHTML = `${BUG_ICON}<span>${escapeHtml(item.label)}</span>`;
+        option.addEventListener("click", () => {
+          for (const node of categoryMenu.querySelectorAll(
+            ".yd-feedback-select-option"
+          )) {
+            node.dataset.selected = String(node === option);
+          }
+          categoryValue.textContent = item.label;
+          if (categorySelect) {
+            categorySelect.dataset.value = item.value;
+            categorySelect.dataset.open = "false";
+          }
+        });
+        categoryMenu.appendChild(option);
+      }
+      categorySelect?.setAttribute("data-value", categories[0]?.value || "BUG");
+    }
+    panel.querySelector('[data-role="category-trigger"]')?.addEventListener("click", () => {
+      if (!categorySelect) return;
+      categorySelect.dataset.open = categorySelect.dataset.open === "true" ? "false" : "true";
+    });
+    panel.querySelector(".yd-feedback-close")?.addEventListener("click", close);
+    panel.querySelector('[data-role="clear"]')?.addEventListener("click", resetThread);
+    panel.querySelector('[data-role="clear-secondary"]')?.addEventListener("click", close);
+    panel.querySelector('[data-role="files-trigger"]')?.addEventListener("click", () => {
+      panel.querySelector('[data-role="files"]')?.click();
+    });
+    panel.querySelector('[data-role="files"]')?.addEventListener("change", (event) => {
+      setPendingFiles(event.target.files);
+    });
+    const composeBox = panel.querySelector(
+      ".yd-feedback-compose-box"
+    );
+    composeBox?.addEventListener("dragover", (event) => {
+      event.preventDefault();
+    });
+    composeBox?.addEventListener("drop", (event) => {
+      event.preventDefault();
+      setPendingFiles(event.dataTransfer?.files || null);
+    });
+    composeBox?.addEventListener("paste", (event) => {
+      const files = Array.from(event.clipboardData?.files || []).filter(
+        (file) => file.type.startsWith("image/")
+      );
+      if (files.length > 0) {
+        setPendingFiles(files);
+      }
+    });
+    panel.querySelector('[data-role="submit"]')?.addEventListener("click", () => void submit());
+  }
+  function setPendingFiles(files) {
+    pendingFiles = Array.from(files || []).filter((file) => file.type.startsWith("image/")).slice(0, MAX_IMAGES_PER_MESSAGE);
+    const label = panel.querySelector('[data-role="files-label"]');
+    if (label) {
+      label.textContent = pendingFiles.length > 0 ? `\u5DF2\u9009\u62E9 ${pendingFiles.length} \u5F20\u56FE\u7247` : DEFAULT_ATTACHMENTS_LABEL;
+    }
+  }
+  function resetThread() {
+    threadState = null;
+    pendingFiles = [];
+    renderedMessages = [];
+    renderMessages([]);
+    updateThreadCard();
+    setError("");
+    const textarea = panel.querySelector(
+      '[data-role="content"]'
+    );
+    if (textarea) textarea.value = "";
+    const fileInput = panel.querySelector(
+      '[data-role="files"]'
+    );
+    if (fileInput) fileInput.value = "";
+    const filesLabel = panel.querySelector(
+      '[data-role="files-label"]'
+    );
+    if (filesLabel) filesLabel.textContent = DEFAULT_ATTACHMENTS_LABEL;
+  }
+  function updateThreadCard() {
+    const card = panel.querySelector('[data-role="thread-card"]');
+    const empty = panel.querySelector('[data-role="thread-empty"]');
+    if (!card || !empty) return;
+    if (!threadState) {
+      card.dataset.visible = "false";
+      empty.style.display = "block";
+      return;
+    }
+    card.dataset.visible = "true";
+    empty.style.display = "none";
+    const category = card.querySelector(
+      '[data-role="thread-category"]'
+    );
+    const status = card.querySelector(
+      '[data-role="thread-status"]'
+    );
+    const preview = card.querySelector(
+      '[data-role="thread-preview"]'
+    );
+    const time = card.querySelector('[data-role="thread-time"]');
+    if (category) {
+      category.textContent = formatCategoryLabel(
+        threadState.category || DEFAULT_CATEGORIES[0]?.value,
+        options.categories || DEFAULT_CATEGORIES
+      );
+    }
+    if (status) status.textContent = formatThreadStatus(threadState.status);
+    if (preview) preview.textContent = threadState.contentPreview || "";
+    if (time) time.textContent = formatThreadTime(threadState.createdAt);
+  }
+  function setError(message) {
+    const node = panel.querySelector('[data-role="error"]');
+    if (node) node.textContent = message;
+    if (message) options.onError?.(new Error(message));
+  }
+  function setSubmitting(value) {
+    const button = panel.querySelector(
+      '[data-role="submit"]'
+    );
+    if (button) button.disabled = value;
+  }
+  function renderMessages(messages) {
+    const node = panel.querySelector('[data-role="messages"]');
+    if (!node) return;
+    renderedMessages = messages;
+    node.innerHTML = "";
+    for (const message of messages) {
+      const item = document.createElement("div");
+      item.className = "yd-feedback-message";
+      item.dataset.admin = String(message.senderType !== "END_USER");
+      item.innerHTML = `<div class="yd-feedback-message-meta">${formatSenderType(message.senderType)} \xB7 ${new Date(message.createdAt).toLocaleString()}</div><div class="yd-feedback-message-content"></div>`;
+      const content = item.querySelector(".yd-feedback-message-content");
+      if (content) {
+        content.textContent = message.senderType === "END_USER" ? message.content : message.translatedContent || message.content;
+      }
+      node.appendChild(item);
+    }
+  }
+  function appendMessages(messages) {
+    const byId = /* @__PURE__ */ new Map();
+    for (const message of renderedMessages) byId.set(message.id, message);
+    for (const message of messages) byId.set(message.id, message);
+    renderMessages(Array.from(byId.values()));
+  }
+  async function uploadImages(files) {
+    const selected = files.slice(0, MAX_IMAGES_PER_MESSAGE);
+    const ids = [];
+    for (const file of selected) {
+      const compressed = await compressImage(file);
+      const body = new FormData();
+      body.append("file", compressed);
+      if (threadState) body.append("threadId", threadState.threadId);
+      const headers = {};
+      if (threadState) headers["x-feedback-token"] = threadState.clientToken;
+      const response = await fetch(
+        `${getBaseUrl(options)}/api/v1/feedback/${encodeURIComponent(options.appId)}/resources/images`,
+        { method: "POST", body, headers }
+      );
+      const payload = await response.json();
+      if (!response.ok || payload?.code !== 200) {
+        throw new Error(payload?.message || "Image upload failed");
+      }
+      ids.push(payload.data.resource.id);
+    }
+    return ids;
+  }
+  async function submit() {
+    const content = panel.querySelector('[data-role="content"]')?.value.trim();
+    if (!content) {
+      setError("\u8BF7\u8F93\u5165\u53CD\u9988\u5185\u5BB9\u3002");
+      return;
+    }
+    setSubmitting(true);
+    setError("");
+    try {
+      const category = panel.querySelector('[data-role="category-select"]')?.dataset.value || "OTHER";
+      const contact = panel.querySelector('[data-role="contact"]')?.value || "";
+      const fileInput = panel.querySelector(
+        '[data-role="files"]'
+      );
+      const attachments = await uploadImages(pendingFiles);
+      if (!threadState) {
+        const result = await requestJson(
+          `${getBaseUrl(options)}/api/v1/feedback/${encodeURIComponent(options.appId)}/threads`,
+          {
+            method: "POST",
+            body: safeJson({
+              category,
+              content,
+              attachments,
+              actor: {
+                ...options.actor || {},
+                contactEmail: contact.includes("@") ? contact : options.actor?.contactEmail,
+                contactPhone: contact && !contact.includes("@") ? contact : options.actor?.contactPhone
+              },
+              metadata: collectMetadata(options)
+            })
+          }
+        );
+        threadState = {
+          threadId: result.thread.id,
+          clientToken: result.clientToken,
+          lastMessageId: result.message?.id,
+          status: result.thread.status,
+          category,
+          contentPreview: content,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        updateThreadCard();
+        options.onThreadCreated?.(result.thread.id);
+        options.onMessageSent?.(result.message.id);
+      } else {
+        const result = await requestJson(
+          `${getBaseUrl(options)}/api/v1/feedback/${encodeURIComponent(options.appId)}/threads/${encodeURIComponent(threadState.threadId)}/messages`,
+          {
+            method: "POST",
+            headers: { "x-feedback-token": threadState.clientToken },
+            body: safeJson({
+              content,
+              attachments,
+              metadata: collectMetadata(options)
+            })
+          }
+        );
+        threadState.lastMessageId = result.message.id;
+        threadState.contentPreview = content;
+        options.onMessageSent?.(result.message.id);
+      }
+      const textarea = panel.querySelector(
+        '[data-role="content"]'
+      );
+      if (textarea) textarea.value = "";
+      if (fileInput) fileInput.value = "";
+      pendingFiles = [];
+      const filesLabel = panel.querySelector(
+        '[data-role="files-label"]'
+      );
+      if (filesLabel) filesLabel.textContent = DEFAULT_ATTACHMENTS_LABEL;
+      await pollOnce();
+      startPolling();
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "\u63D0\u4EA4\u5931\u8D25");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  async function pollOnce() {
+    if (!threadState) return;
+    const currentThread = threadState;
+    const params = new URLSearchParams();
+    if (currentThread.lastMessageId) {
+      params.set("afterMessageId", currentThread.lastMessageId);
+    }
+    params.set("feedbackToken", currentThread.clientToken);
+    const result = await requestJson(
+      `${getBaseUrl(options)}/api/v1/feedback/${encodeURIComponent(options.appId)}/threads/${encodeURIComponent(currentThread.threadId)}/messages?${params.toString()}`
+    );
+    currentThread.status = result.threadStatus;
+    updateThreadCard();
+    if (result.messages.length > 0) {
+      const latestMessage = result.messages.at(-1);
+      if (latestMessage) currentThread.lastMessageId = latestMessage.id;
+      appendMessages(result.messages);
+    }
+    if (result.threadStatus !== "WAITING_ADMIN") stopPolling();
+    else schedulePoll(result.nextPollAfterMs);
+  }
+  function schedulePoll(delay) {
+    stopPolling();
+    if (!delay || delay < 1 || document.hidden || !threadState) return;
+    pollTimer = window.setTimeout(() => void pollOnce(), delay);
+  }
+  function startPolling() {
+    if (!threadState || threadState.status !== "WAITING_ADMIN") return;
+    schedulePoll(1e4);
+  }
+  function stopPolling() {
+    if (pollTimer) window.clearTimeout(pollTimer);
+    pollTimer = null;
+  }
+  function open() {
+    initPanel();
+    panel.dataset.open = "true";
+    window.setTimeout(() => {
+      panel.querySelector('[data-role="content"]')?.focus();
+    }, 0);
+  }
+  function close() {
+    panel.dataset.open = "false";
+    stopPolling();
+  }
+  launcher.addEventListener("click", open);
+  const handleVisibilityChange = () => {
+    if (document.hidden) stopPolling();
+    else startPolling();
+  };
+  const handleDocumentClick = (event) => {
+    const categorySelect = panel.querySelector(
+      '[data-role="category-select"]'
+    );
+    if (categorySelect && event.target instanceof Node && !categorySelect.contains(event.target)) {
+      categorySelect.dataset.open = "false";
+    }
+  };
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  document.addEventListener("click", handleDocumentClick);
+  if (typeof window !== "undefined") {
+    const preload = () => {
+      if ("requestIdleCallback" in window) {
+        ;
+        window.requestIdleCallback(() => initPanel());
+      } else {
+        globalThis.setTimeout(() => initPanel(), 1200);
+      }
+    };
+    if (document.readyState === "complete") preload();
+    else {
+      window.addEventListener("load", preload, { once: true });
+      removeLoadListener = () => window.removeEventListener("load", preload);
+    }
+  }
+  return {
+    open,
+    close,
+    destroy() {
+      stopPolling();
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      document.removeEventListener("click", handleDocumentClick);
+      removeLoadListener?.();
+      root.remove();
+    }
+  };
+}
+function mountFeedbackWidget(container, options) {
+  return createFeedbackWidget(container, options);
+}
+
 // src/server.ts
 import crypto2 from "crypto";
 function getCustomAmountRechargeRule(product, currency) {
@@ -1395,6 +3123,12 @@ var PaymentClient = class {
   }
   /**
    * Decrypts the callback notification payload using AES-256-GCM.
+   *
+   * @deprecated This legacy encrypted-envelope protocol is NOT what the platform
+   * actually delivers. The platform sends an HMAC-signed plaintext JSON webhook
+   * with `X-UniPay-Signature` / `X-UniPay-Timestamp` headers; use
+   * {@link PaymentClient.verifyWebhookSignature} to validate those instead.
+   *
    * @param notification - The encrypted notification from payment webhook
    * @returns Decrypted payment callback data
    */
@@ -1417,6 +3151,39 @@ var PaymentClient = class {
       );
     }
   }
+  /**
+   * Verify an inbound platform webhook signature.
+   *
+   * The platform delivers webhooks as plaintext JSON with two headers:
+   * `X-UniPay-Signature` (HMAC-SHA256 of `${timestamp}.${rawBodyString}`) and
+   * `X-UniPay-Timestamp`. The body itself is NOT encrypted; verify the signature
+   * then `JSON.parse` the body to obtain a {@link WebhookPayload}.
+   *
+   * @param rawBody - The raw request body string (exactly as received)
+   * @param signature - The `X-UniPay-Signature` header value (hex)
+   * @param timestamp - The `X-UniPay-Timestamp` header value (ms epoch string)
+   * @param options - Optional `toleranceMs` for timestamp freshness (default 5 min)
+   * @returns `true` if the signature is valid and the timestamp is fresh
+   */
+  verifyWebhookSignature(rawBody, signature, timestamp, options) {
+    try {
+      const toleranceMs = options?.toleranceMs ?? 5 * 60 * 1e3;
+      const timestampMs = Number.parseInt(timestamp, 10);
+      if (Number.isNaN(timestampMs) || Math.abs(Date.now() - timestampMs) > toleranceMs) {
+        return false;
+      }
+      const rawString = `${timestamp}.${rawBody}`;
+      const expected = crypto2.createHmac("sha256", this.appSecret).update(rawString).digest("hex");
+      const signatureBuffer = Buffer.from(signature);
+      const expectedBuffer = Buffer.from(expected);
+      if (signatureBuffer.length !== expectedBuffer.length) {
+        return false;
+      }
+      return crypto2.timingSafeEqual(signatureBuffer, expectedBuffer);
+    } catch {
+      return false;
+    }
+  }
   /**
    * Fetch products for the configured app.
    */
@@ -1618,6 +3385,27 @@ var PaymentClient = class {
       ...options
     });
   }
+  /**
+   * Consume numeric entitlements from an ordered key pool.
+   * Useful when subscription credits and perpetual credits use separate keys.
+   */
+  async consumeEntitlementPool(userId, keys, amount, options) {
+    return this.request("POST", `/users/${userId}/entitlements/consume-pool`, {
+      keys,
+      amount,
+      ...options
+    });
+  }
+  /**
+   * Get active numeric entitlement buckets ordered by expiration.
+   */
+  async getEntitlementCreditBuckets(userId, keys) {
+    const query = keys && keys.length > 0 ? `?keys=${encodeURIComponent(keys.join(","))}` : "";
+    return this.request(
+      "GET",
+      `/users/${userId}/entitlements/credit-buckets${query}`
+    );
+  }
   /**
    * Add numeric entitlement (e.g. refund)
    * @param userId - User ID
@@ -1698,15 +3486,47 @@ var PaymentClient = class {
       }
     );
   }
+  /**
+   * Create a hosted WeChat official account binding URL for a user.
+   */
+  async createWechatMessageBinding(params) {
+    const loginExternalUserId = params.loginExternalUserId?.trim() || params.userId?.trim();
+    const merchantUserId = params.merchantUserId?.trim();
+    if (!loginExternalUserId && !merchantUserId) {
+      throw new Error("userId or merchantUserId is required");
+    }
+    return this.request("POST", "/messages/wechat/bindings", {
+      ...params,
+      loginExternalUserId,
+      merchantUserId
+    });
+  }
+  /**
+   * Send an app-linked message template to a bound recipient.
+   */
+  async sendMessage(params) {
+    if (!params.templateId?.trim() && !params.templateCode?.trim()) {
+      throw new Error("templateId or templateCode is required");
+    }
+    if (!params.data || typeof params.data !== "object") {
+      throw new Error("data is required");
+    }
+    return this.request("POST", "/messages/send", params);
+  }
 };
 export {
   LoginUI,
+  MessageUI,
   PaymentClient,
   PaymentUI,
+  createFeedbackWidget,
   createLoginUI,
+  createMessageUI,
   createPaymentUI,
+  detectLoginEnvironment,
   getCustomAmountRechargeRule,
   handleLoginCallbackIfPresent,
+  mountFeedbackWidget,
   validateCustomAmountRecharge
 };
 //# sourceMappingURL=index.js.map