@youidian/sdk 3.3.10 → 3.4.1

package/dist/index.js

@@ -204,6 +204,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 +298,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 +653,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 +695,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 +789,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");
@@ -737,14 +993,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 +1085,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 +1122,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 +1217,17 @@ 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") || 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 +1331,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);
   }
 };
@@ -1266,6 +1556,658 @@ 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) {
@@ -1618,6 +2560,31 @@ 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
@@ -1703,10 +2670,13 @@ export {
   LoginUI,
   PaymentClient,
   PaymentUI,
+  createFeedbackWidget,
   createLoginUI,
   createPaymentUI,
+  detectLoginEnvironment,
   getCustomAmountRechargeRule,
   handleLoginCallbackIfPresent,
+  mountFeedbackWidget,
   validateCustomAmountRecharge
 };
 //# sourceMappingURL=index.js.map