@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121

package/dist/esm/hooks/useEmarsysWebPush.d.ts

@@ -0,0 +1,111 @@
+export interface EmarsysContactInfo {
+    /** Emarsys 联系人字段 ID（如 10372） */
+    fieldId: number;
+    /** 字段值（如用户唯一标识） */
+    fieldValue: string;
+}
+export interface EmarsysInitConfig {
+    /** Emarsys Domain Code，从后台获取 */
+    applicationCode: string;
+    /** macOS Safari 16+ 使用 VAPID 替代 APNS */
+    enableMacSafariVapid?: boolean;
+    /** 默认推送通知标题 */
+    defaultNotificationTitle?: string;
+    /** 默认推送通知图标 URL */
+    defaultNotificationIcon?: string;
+    /** 是否自动触发浏览器订阅弹窗，强烈建议设为 false */
+    autoSubscribe?: boolean;
+    /** 开发阶段开启 SDK 日志 */
+    enableLogging?: boolean;
+    serviceWorker: {
+        /** Service Worker 文件路径（需放在网站根目录） */
+        url: string;
+        /** VAPID 公钥（Base64 URL-safe 编码） */
+        applicationServerPublicKey: string;
+    };
+}
+type EmarsysSdkEventName = 'onReady' | 'onSubscribe' | 'onUnsubscribe' | 'onPermissionPrompt' | 'onPermissionGranted' | 'onPermissionDenied' | 'onSWInitError';
+type EmarsysSdkCommand = ['init', EmarsysInitConfig] | [EmarsysSdkEventName, () => void];
+interface EmarsysSdkApi {
+    subscribe: () => void;
+    unsubscribe: () => void;
+    login: (contactInfo: EmarsysContactInfo) => Promise<boolean>;
+    logout: () => Promise<boolean>;
+    isSubscribed: () => Promise<boolean>;
+    isRegistered: () => boolean;
+    customEvent: (eventName: string, payload?: Record<string, unknown>) => Promise<boolean>;
+    push: (command: EmarsysSdkCommand | ((sdk: EmarsysSdkApi) => void)) => void;
+}
+declare global {
+    interface Window {
+        WebEmarsysSdk: EmarsysSdkApi | (EmarsysSdkCommand | ((sdk: EmarsysSdkApi) => void))[];
+    }
+}
+export interface UseEmarsysWebPushOptions {
+    /** Emarsys Domain Code */
+    applicationCode: string;
+    /** VAPID 公钥 */
+    applicationServerPublicKey: string;
+    /** Service Worker 路径，默认 'service-worker.js'（不含前导斜杠） */
+    serviceWorkerUrl?: string;
+    /** 默认通知标题 */
+    defaultNotificationTitle?: string;
+    /** 默认通知图标 URL */
+    defaultNotificationIcon?: string;
+    /** 联系人主键字段 ID（由 Emarsys 后台配置） */
+    fieldId: number;
+    /**
+     * 当前用户的联系人标识（如 hashed email / customer ID）。
+     * null 表示未登录的匿名访客。
+     */
+    contactValue: string | null;
+    /** 是否开启调试日志，默认 false */
+    enableLogging?: boolean;
+    /**
+     * 点击"稍后"后的弹窗冷却天数，默认 7 天。
+     * 冷却期间不再展示自定义弹窗。
+     */
+    dismissCooldownDays?: number;
+    /**
+     * SDK 是否已通过外部 <Script> 标签加载完毕。
+     * 传入此 flag 以便 hook 在正确时机初始化。
+     * 默认 true（假设 SDK 已经加载）。
+     */
+    sdkLoaded?: boolean;
+}
+export interface UseEmarsysWebPushReturn {
+    /** 手动触发浏览器原生订阅弹窗（供"订阅"按钮调用） */
+    subscribe: () => void;
+    /** 取消推送订阅 */
+    unsubscribe: () => void;
+    /** 是否应向用户展示自定义引导弹窗 */
+    shouldShowPopup: boolean;
+    /** 关闭自定义弹窗并写入冷却标记 */
+    dismissPopup: () => void;
+    /** 当前是否已订阅（异步检测完成后更新） */
+    isSubscribed: boolean;
+    /** SDK 是否就绪 */
+    isReady: boolean;
+}
+/**
+ * useEmarsysWebPush
+ *
+ * 封装 Emarsys Web Push SDK 的订阅生命周期，包括：
+ * - SDK 初始化
+ * - 自定义弹窗展示逻辑（两步策略，避免直接触发浏览器原生弹窗）
+ * - 已登录联系人的 login / logout 自动管理
+ * - 已有订阅用户的迁移（从旧推送系统迁移）
+ *
+ * @example
+ * ```tsx
+ * const { shouldShowPopup, subscribe, dismissPopup } = useEmarsysWebPush({
+ *   applicationCode: process.env.NEXT_PUBLIC_EMARSYS_APP_CODE!,
+ *   applicationServerPublicKey: process.env.NEXT_PUBLIC_EMARSYS_VAPID_PUBLIC_KEY!,
+ *   fieldId: 10372,
+ *   contactValue: user?.customerId ?? null,
+ *   sdkLoaded: scriptLoaded,
+ * })
+ * ```
+ */
+export declare function useEmarsysWebPush({ applicationCode, applicationServerPublicKey, serviceWorkerUrl, defaultNotificationTitle, defaultNotificationIcon, fieldId, contactValue, enableLogging, dismissCooldownDays, sdkLoaded, }: UseEmarsysWebPushOptions): UseEmarsysWebPushReturn;
+export {};

package/dist/esm/hooks/useEmarsysWebPush.js

@@ -0,0 +1,2 @@
+import{useCallback as d,useEffect as g,useRef as R,useState as y}from"react";const E="emarsysSubscribe",b="emarsysLogin",C="anker_push_dismissed";function D(){return typeof navigator>"u"?!1:/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())}function x(){return typeof window>"u"?!1:window.matchMedia("(display-mode: standalone)").matches||"standalone"in window.navigator&&window.navigator.standalone===!0}function r(n,o,u){try{if(n==="get")return localStorage.getItem(o);n==="set"&&u!==void 0&&localStorage.setItem(o,u),n==="remove"&&localStorage.removeItem(o)}catch{}return null}function a(){if(typeof window>"u")return null;const n=window.WebEmarsysSdk;return!n||Array.isArray(n)?null:n}function K({applicationCode:n,applicationServerPublicKey:o,serviceWorkerUrl:u="service-worker.js",defaultNotificationTitle:w,defaultNotificationIcon:k,fieldId:h,contactValue:t,enableLogging:v=!1,dismissCooldownDays:P=7,sdkLoaded:c=!0}){const[f,L]=y(!1),[G,m]=y(!1),[_,p]=y(!1),S=R(!1),A=R(!1);g(()=>{if(!c||typeof window>"u")return;const e=u.replace(/^\/+/,"").replace(/^https?:\/\/[^/]+\//,"");window.WebEmarsysSdk=window.WebEmarsysSdk||[],window.WebEmarsysSdk.push(["init",{applicationCode:n,enableMacSafariVapid:!0,defaultNotificationTitle:w,defaultNotificationIcon:k,autoSubscribe:!1,enableLogging:v,serviceWorker:{url:e,applicationServerPublicKey:o}}])},[c,n,o,u,w,k,v]);const l=d(e=>{if(S.current)return;const s=a();s&&s.isSubscribed().then(i=>{i&&s.login({fieldId:h,fieldValue:e}).then(W=>{W&&(r("set",b,"login"),S.current=!0)})})},[h]),I=d(()=>{const e=a();e&&e.isSubscribed().then(s=>{s&&e.logout().then(i=>{i&&(r("remove",b),S.current=!1)})})},[]);g(()=>{if(!c||typeof window>"u"||D()&&!x())return;window.WebEmarsysSdk=window.WebEmarsysSdk||[];const e=window.WebEmarsysSdk;e.push(["onReady",()=>{L(!0),a()?.isSubscribed().then(i=>{m(i)}),e.push(["onPermissionGranted",()=>{!r("get",E)&&!A.current&&(a()?.subscribe(),r("set",E,"subscribe"))}]);let s=!1;e.push(["onPermissionGranted",()=>{s=!0}]),e.push(["onPermissionDenied",()=>{s=!0}]),setTimeout(()=>{if(s)return;const i=r("get",C);i&&Date.now()-parseInt(i,10)<P*24*60*60*1e3||p(!0)},2e3)}]),e.push(["onSubscribe",()=>{m(!0),r("set",E,"subscribe"),t&&l(t)}]),e.push(["onUnsubscribe",()=>{m(!1)}])},[c,t,P,l]),g(()=>{f&&(t?r("get",b)||l(t):r("get",b)&&I())},[f,t,l,I]);const N=d(()=>{p(!1),A.current=!0;const e=a();if(!e){window.WebEmarsysSdk.push(i=>{i.subscribe()});return}e.subscribe()},[]),O=d(()=>{a()?.unsubscribe()},[]),U=d(()=>{p(!1),r("set",C,String(Date.now()))},[]);return{subscribe:N,unsubscribe:O,shouldShowPopup:_,dismissPopup:U,isSubscribed:G,isReady:f}}export{K as useEmarsysWebPush};
+//# sourceMappingURL=useEmarsysWebPush.js.map

package/dist/esm/hooks/useEmarsysWebPush.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useEmarsysWebPush.ts"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Emarsys Web Push SDK \u5168\u5C40\u7C7B\u578B\u58F0\u660E\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface EmarsysContactInfo {\n  /** Emarsys \u8054\u7CFB\u4EBA\u5B57\u6BB5 ID\uFF08\u5982 10372\uFF09 */\n  fieldId: number\n  /** \u5B57\u6BB5\u503C\uFF08\u5982\u7528\u6237\u552F\u4E00\u6807\u8BC6\uFF09 */\n  fieldValue: string\n}\n\nexport interface EmarsysInitConfig {\n  /** Emarsys Domain Code\uFF0C\u4ECE\u540E\u53F0\u83B7\u53D6 */\n  applicationCode: string\n  /** macOS Safari 16+ \u4F7F\u7528 VAPID \u66FF\u4EE3 APNS */\n  enableMacSafariVapid?: boolean\n  /** \u9ED8\u8BA4\u63A8\u9001\u901A\u77E5\u6807\u9898 */\n  defaultNotificationTitle?: string\n  /** \u9ED8\u8BA4\u63A8\u9001\u901A\u77E5\u56FE\u6807 URL */\n  defaultNotificationIcon?: string\n  /** \u662F\u5426\u81EA\u52A8\u89E6\u53D1\u6D4F\u89C8\u5668\u8BA2\u9605\u5F39\u7A97\uFF0C\u5F3A\u70C8\u5EFA\u8BAE\u8BBE\u4E3A false */\n  autoSubscribe?: boolean\n  /** \u5F00\u53D1\u9636\u6BB5\u5F00\u542F SDK \u65E5\u5FD7 */\n  enableLogging?: boolean\n  serviceWorker: {\n    /** Service Worker \u6587\u4EF6\u8DEF\u5F84\uFF08\u9700\u653E\u5728\u7F51\u7AD9\u6839\u76EE\u5F55\uFF09 */\n    url: string\n    /** VAPID \u516C\u94A5\uFF08Base64 URL-safe \u7F16\u7801\uFF09 */\n    applicationServerPublicKey: string\n  }\n}\n\ntype EmarsysSdkEventName =\n  | 'onReady'\n  | 'onSubscribe'\n  | 'onUnsubscribe'\n  | 'onPermissionPrompt'\n  | 'onPermissionGranted'\n  | 'onPermissionDenied'\n  | 'onSWInitError'\n\ntype EmarsysSdkCommand = ['init', EmarsysInitConfig] | [EmarsysSdkEventName, () => void]\n\ninterface EmarsysSdkApi {\n  subscribe: () => void\n  unsubscribe: () => void\n  login: (contactInfo: EmarsysContactInfo) => Promise<boolean>\n  logout: () => Promise<boolean>\n  isSubscribed: () => Promise<boolean>\n  isRegistered: () => boolean\n  customEvent: (eventName: string, payload?: Record<string, unknown>) => Promise<boolean>\n  push: (command: EmarsysSdkCommand | ((sdk: EmarsysSdkApi) => void)) => void\n}\n\ndeclare global {\n  interface Window {\n    WebEmarsysSdk: EmarsysSdkApi | (EmarsysSdkCommand | ((sdk: EmarsysSdkApi) => void))[]\n  }\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Hook \u5165\u53C2\u7C7B\u578B\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface UseEmarsysWebPushOptions {\n  /** Emarsys Domain Code */\n  applicationCode: string\n  /** VAPID \u516C\u94A5 */\n  applicationServerPublicKey: string\n  /** Service Worker \u8DEF\u5F84\uFF0C\u9ED8\u8BA4 'service-worker.js'\uFF08\u4E0D\u542B\u524D\u5BFC\u659C\u6760\uFF09 */\n  serviceWorkerUrl?: string\n  /** \u9ED8\u8BA4\u901A\u77E5\u6807\u9898 */\n  defaultNotificationTitle?: string\n  /** \u9ED8\u8BA4\u901A\u77E5\u56FE\u6807 URL */\n  defaultNotificationIcon?: string\n  /** \u8054\u7CFB\u4EBA\u4E3B\u952E\u5B57\u6BB5 ID\uFF08\u7531 Emarsys \u540E\u53F0\u914D\u7F6E\uFF09 */\n  fieldId: number\n  /**\n   * \u5F53\u524D\u7528\u6237\u7684\u8054\u7CFB\u4EBA\u6807\u8BC6\uFF08\u5982 hashed email / customer ID\uFF09\u3002\n   * null \u8868\u793A\u672A\u767B\u5F55\u7684\u533F\u540D\u8BBF\u5BA2\u3002\n   */\n  contactValue: string | null\n  /** \u662F\u5426\u5F00\u542F\u8C03\u8BD5\u65E5\u5FD7\uFF0C\u9ED8\u8BA4 false */\n  enableLogging?: boolean\n  /**\n   * \u70B9\u51FB\"\u7A0D\u540E\"\u540E\u7684\u5F39\u7A97\u51B7\u5374\u5929\u6570\uFF0C\u9ED8\u8BA4 7 \u5929\u3002\n   * \u51B7\u5374\u671F\u95F4\u4E0D\u518D\u5C55\u793A\u81EA\u5B9A\u4E49\u5F39\u7A97\u3002\n   */\n  dismissCooldownDays?: number\n  /**\n   * SDK \u662F\u5426\u5DF2\u901A\u8FC7\u5916\u90E8 <Script> \u6807\u7B7E\u52A0\u8F7D\u5B8C\u6BD5\u3002\n   * \u4F20\u5165\u6B64 flag \u4EE5\u4FBF hook \u5728\u6B63\u786E\u65F6\u673A\u521D\u59CB\u5316\u3002\n   * \u9ED8\u8BA4 true\uFF08\u5047\u8BBE SDK \u5DF2\u7ECF\u52A0\u8F7D\uFF09\u3002\n   */\n  sdkLoaded?: boolean\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Hook \u8FD4\u56DE\u503C\u7C7B\u578B\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface UseEmarsysWebPushReturn {\n  /** \u624B\u52A8\u89E6\u53D1\u6D4F\u89C8\u5668\u539F\u751F\u8BA2\u9605\u5F39\u7A97\uFF08\u4F9B\"\u8BA2\u9605\"\u6309\u94AE\u8C03\u7528\uFF09 */\n  subscribe: () => void\n  /** \u53D6\u6D88\u63A8\u9001\u8BA2\u9605 */\n  unsubscribe: () => void\n  /** \u662F\u5426\u5E94\u5411\u7528\u6237\u5C55\u793A\u81EA\u5B9A\u4E49\u5F15\u5BFC\u5F39\u7A97 */\n  shouldShowPopup: boolean\n  /** \u5173\u95ED\u81EA\u5B9A\u4E49\u5F39\u7A97\u5E76\u5199\u5165\u51B7\u5374\u6807\u8BB0 */\n  dismissPopup: () => void\n  /** \u5F53\u524D\u662F\u5426\u5DF2\u8BA2\u9605\uFF08\u5F02\u6B65\u68C0\u6D4B\u5B8C\u6210\u540E\u66F4\u65B0\uFF09 */\n  isSubscribed: boolean\n  /** SDK \u662F\u5426\u5C31\u7EEA */\n  isReady: boolean\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u5DE5\u5177\u51FD\u6570\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst STORAGE_KEY_SUBSCRIBE = 'emarsysSubscribe'\nconst STORAGE_KEY_LOGIN = 'emarsysLogin'\nconst STORAGE_KEY_DISMISSED = 'anker_push_dismissed'\n\nfunction isIOS(): boolean {\n  if (typeof navigator === 'undefined') return false\n  return /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())\n}\n\nfunction isStandaloneWebApp(): boolean {\n  if (typeof window === 'undefined') return false\n  return (\n    window.matchMedia('(display-mode: standalone)').matches ||\n    // Safari standalone \u5C5E\u6027\uFF08\u975E\u6807\u51C6\uFF09\n    ('standalone' in window.navigator && (window.navigator as Navigator & { standalone?: boolean }).standalone === true)\n  )\n}\n\nfunction safeLocalStorage(action: 'get', key: string): string | null\nfunction safeLocalStorage(action: 'set', key: string, value: string): void\nfunction safeLocalStorage(action: 'remove', key: string): void\nfunction safeLocalStorage(action: 'get' | 'set' | 'remove', key: string, value?: string): string | null | void {\n  try {\n    if (action === 'get') return localStorage.getItem(key)\n    if (action === 'set' && value !== undefined) localStorage.setItem(key, value)\n    if (action === 'remove') localStorage.removeItem(key)\n  } catch {\n    // SSR \u6216\u9690\u79C1\u6A21\u5F0F\u4E0B localStorage \u4E0D\u53EF\u7528\n  }\n  return null\n}\n\nfunction getSdkApi(): EmarsysSdkApi | null {\n  if (typeof window === 'undefined') return null\n  const sdk = window.WebEmarsysSdk\n  if (!sdk || Array.isArray(sdk)) return null\n  return sdk as EmarsysSdkApi\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u6838\u5FC3 Hook\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * useEmarsysWebPush\n *\n * \u5C01\u88C5 Emarsys Web Push SDK \u7684\u8BA2\u9605\u751F\u547D\u5468\u671F\uFF0C\u5305\u62EC\uFF1A\n * - SDK \u521D\u59CB\u5316\n * - \u81EA\u5B9A\u4E49\u5F39\u7A97\u5C55\u793A\u903B\u8F91\uFF08\u4E24\u6B65\u7B56\u7565\uFF0C\u907F\u514D\u76F4\u63A5\u89E6\u53D1\u6D4F\u89C8\u5668\u539F\u751F\u5F39\u7A97\uFF09\n * - \u5DF2\u767B\u5F55\u8054\u7CFB\u4EBA\u7684 login / logout \u81EA\u52A8\u7BA1\u7406\n * - \u5DF2\u6709\u8BA2\u9605\u7528\u6237\u7684\u8FC1\u79FB\uFF08\u4ECE\u65E7\u63A8\u9001\u7CFB\u7EDF\u8FC1\u79FB\uFF09\n *\n * @example\n * ```tsx\n * const { shouldShowPopup, subscribe, dismissPopup } = useEmarsysWebPush({\n *   applicationCode: process.env.NEXT_PUBLIC_EMARSYS_APP_CODE!,\n *   applicationServerPublicKey: process.env.NEXT_PUBLIC_EMARSYS_VAPID_PUBLIC_KEY!,\n *   fieldId: 10372,\n *   contactValue: user?.customerId ?? null,\n *   sdkLoaded: scriptLoaded,\n * })\n * ```\n */\nexport function useEmarsysWebPush({\n  applicationCode,\n  applicationServerPublicKey,\n  serviceWorkerUrl = 'service-worker.js',\n  defaultNotificationTitle,\n  defaultNotificationIcon,\n  fieldId,\n  contactValue,\n  enableLogging = false,\n  dismissCooldownDays = 7,\n  sdkLoaded = true,\n}: UseEmarsysWebPushOptions): UseEmarsysWebPushReturn {\n  const [isReady, setIsReady] = useState(false)\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [shouldShowPopup, setShouldShowPopup] = useState(false)\n\n  // \u907F\u514D\u91CD\u590D login/logout\n  const hasPerformedLogin = useRef(false)\n  // \u8FFD\u8E2A\u5F53\u524D session \u5185\u662F\u5426\u5DF2\u4E3B\u52A8\u89E6\u53D1\u8FC7 subscribe\n  const isGeneralSubscribeRef = useRef(false)\n\n  // \u2500\u2500 \u521D\u59CB\u5316 SDK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  useEffect(() => {\n    if (!sdkLoaded || typeof window === 'undefined') return\n\n    // SDK v4.7.0 \u5185\u90E8 registerServiceWorker() \u6267\u884C `/${url}` \u62FC\u63A5\uFF0C\n    // \u56E0\u6B64\u6B64\u5904\u5FC5\u987B\u4F20\u4E0D\u542B\u524D\u5BFC\u659C\u6760\u7684\u7EAF\u8DEF\u5F84\uFF08\u5982 'service-worker.js'\uFF09\uFF0C\n    // \u4F20\u5165\u5E26\u659C\u6760\u7684\u8DEF\u5F84\u6216\u7EDD\u5BF9 URL \u5747\u4F1A\u5BFC\u81F4\u53CC\u659C\u6760/\u8DE8\u57DF SecurityError\u3002\n    const swPath = serviceWorkerUrl.replace(/^\\/+/, '').replace(/^https?:\\/\\/[^/]+\\//, '')\n\n    window.WebEmarsysSdk = window.WebEmarsysSdk || []\n    const sdk = window.WebEmarsysSdk as (EmarsysSdkCommand | ((api: EmarsysSdkApi) => void))[]\n\n    sdk.push([\n      'init',\n      {\n        applicationCode,\n        enableMacSafariVapid: true,\n        defaultNotificationTitle,\n        defaultNotificationIcon,\n        autoSubscribe: false,\n        enableLogging,\n        serviceWorker: {\n          url: swPath,\n          applicationServerPublicKey,\n        },\n      },\n    ])\n  }, [\n    sdkLoaded,\n    applicationCode,\n    applicationServerPublicKey,\n    serviceWorkerUrl,\n    defaultNotificationTitle,\n    defaultNotificationIcon,\n    enableLogging,\n  ])\n\n  // \u2500\u2500 \u6267\u884C Emarsys login\uFF08\u5173\u8054\u5DF2\u77E5\u8054\u7CFB\u4EBA\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  const performLogin = useCallback(\n    (value: string) => {\n      if (hasPerformedLogin.current) return\n      const api = getSdkApi()\n      if (!api) return\n\n      api.isSubscribed().then(subscribed => {\n        if (!subscribed) return\n        api.login({ fieldId, fieldValue: value }).then(result => {\n          if (result) {\n            safeLocalStorage('set', STORAGE_KEY_LOGIN, 'login')\n            hasPerformedLogin.current = true\n          }\n        })\n      })\n    },\n    [fieldId]\n  )\n\n  // \u2500\u2500 \u6267\u884C Emarsys logout\uFF08\u89E3\u9664\u8054\u7CFB\u4EBA\u5173\u8054\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  const performLogout = useCallback(() => {\n    const api = getSdkApi()\n    if (!api) return\n\n    api.isSubscribed().then(subscribed => {\n      if (!subscribed) return\n      api.logout().then(result => {\n        if (result) {\n          safeLocalStorage('remove', STORAGE_KEY_LOGIN)\n          hasPerformedLogin.current = false\n        }\n      })\n    })\n  }, [])\n\n  // \u2500\u2500 \u6CE8\u518C SDK \u56DE\u8C03 & \u4E1A\u52A1\u903B\u8F91 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  useEffect(() => {\n    if (!sdkLoaded || typeof window === 'undefined') return\n\n    // iOS \u6D4F\u89C8\u5668\uFF08\u975E PWA \u6A21\u5F0F\uFF09\u4E0D\u505A\u4EFB\u4F55\u64CD\u4F5C\n    if (isIOS() && !isStandaloneWebApp()) return\n\n    window.WebEmarsysSdk = window.WebEmarsysSdk || []\n    const sdk = window.WebEmarsysSdk as (EmarsysSdkCommand | ((api: EmarsysSdkApi) => void))[]\n\n    sdk.push([\n      'onReady',\n      () => {\n        setIsReady(true)\n\n        // \u68C0\u67E5\u5F53\u524D\u8BA2\u9605\u72B6\u6001\n        getSdkApi()\n          ?.isSubscribed()\n          .then(subscribed => {\n            setIsSubscribed(subscribed)\n          })\n\n        // \u5DF2\u6709\u8BA2\u9605\u7528\u6237\u8FC1\u79FB\uFF08\u65E7\u63A8\u9001\u7CFB\u7EDF \u2192 Emarsys\uFF09\n        sdk.push([\n          'onPermissionGranted',\n          () => {\n            if (!safeLocalStorage('get', STORAGE_KEY_SUBSCRIBE) && !isGeneralSubscribeRef.current) {\n              getSdkApi()?.subscribe()\n              safeLocalStorage('set', STORAGE_KEY_SUBSCRIBE, 'subscribe')\n            }\n          },\n        ])\n\n        // \u5224\u65AD\u662F\u5426\u9700\u8981\u5C55\u793A\u81EA\u5B9A\u4E49\u5F15\u5BFC\u5F39\u7A97\n        // \u5EF6\u8FDF 2 \u79D2\uFF0C\u7B49\u5F85 onPermissionGranted / onPermissionDenied \u5F02\u6B65\u56DE\u8C03\n        let permissionAlreadyHandled = false\n        sdk.push([\n          'onPermissionGranted',\n          () => {\n            permissionAlreadyHandled = true\n          },\n        ])\n        sdk.push([\n          'onPermissionDenied',\n          () => {\n            permissionAlreadyHandled = true\n          },\n        ])\n\n        setTimeout(() => {\n          if (permissionAlreadyHandled) return\n\n          // \u68C0\u67E5\u51B7\u5374\u671F\n          const dismissedAt = safeLocalStorage('get', STORAGE_KEY_DISMISSED)\n          if (dismissedAt) {\n            const elapsed = Date.now() - parseInt(dismissedAt, 10)\n            if (elapsed < dismissCooldownDays * 24 * 60 * 60 * 1000) return\n          }\n\n          setShouldShowPopup(true)\n        }, 2000)\n      },\n    ])\n\n    // \u8BA2\u9605\u6210\u529F\u540E\u66F4\u65B0\u72B6\u6001\u5E76\u6267\u884C login\n    sdk.push([\n      'onSubscribe',\n      () => {\n        setIsSubscribed(true)\n        safeLocalStorage('set', STORAGE_KEY_SUBSCRIBE, 'subscribe')\n        if (contactValue) {\n          performLogin(contactValue)\n        }\n      },\n    ])\n\n    sdk.push([\n      'onUnsubscribe',\n      () => {\n        setIsSubscribed(false)\n      },\n    ])\n  }, [sdkLoaded, contactValue, dismissCooldownDays, performLogin])\n\n  // \u2500\u2500 \u76D1\u542C contactValue \u53D8\u5316\uFF0C\u81EA\u52A8 login / logout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  useEffect(() => {\n    if (!isReady) return\n\n    if (contactValue) {\n      if (!safeLocalStorage('get', STORAGE_KEY_LOGIN)) {\n        performLogin(contactValue)\n      }\n    } else {\n      if (safeLocalStorage('get', STORAGE_KEY_LOGIN)) {\n        performLogout()\n      }\n    }\n  }, [isReady, contactValue, performLogin, performLogout])\n\n  // \u2500\u2500 \u5BF9\u5916\u66B4\u9732\u7684 API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  const subscribe = useCallback(() => {\n    setShouldShowPopup(false)\n    isGeneralSubscribeRef.current = true\n    const api = getSdkApi()\n    if (!api) {\n      const sdk = window.WebEmarsysSdk as ((api: EmarsysSdkApi) => void)[]\n      sdk.push(sdkApi => {\n        sdkApi.subscribe()\n      })\n      return\n    }\n    api.subscribe()\n  }, [])\n\n  const unsubscribe = useCallback(() => {\n    getSdkApi()?.unsubscribe()\n  }, [])\n\n  const dismissPopup = useCallback(() => {\n    setShouldShowPopup(false)\n    safeLocalStorage('set', STORAGE_KEY_DISMISSED, String(Date.now()))\n  }, [])\n\n  return {\n    subscribe,\n    unsubscribe,\n    shouldShowPopup,\n    dismissPopup,\n    isSubscribed,\n    isReady,\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["useCallback", "useEffect", "useRef", "useState", "STORAGE_KEY_SUBSCRIBE", "STORAGE_KEY_LOGIN", "STORAGE_KEY_DISMISSED", "isIOS", "isStandaloneWebApp", "safeLocalStorage", "action", "key", "value", "getSdkApi", "sdk", "useEmarsysWebPush", "applicationCode", "applicationServerPublicKey", "serviceWorkerUrl", "defaultNotificationTitle", "defaultNotificationIcon", "fieldId", "contactValue", "enableLogging", "dismissCooldownDays", "sdkLoaded", "isReady", "setIsReady", "isSubscribed", "setIsSubscribed", "shouldShowPopup", "setShouldShowPopup", "hasPerformedLogin", "isGeneralSubscribeRef", "swPath", "performLogin", "api", "subscribed", "result", "performLogout", "permissionAlreadyHandled", "dismissedAt", "subscribe", "sdkApi", "unsubscribe", "dismissPopup"]
+}

package/dist/esm/hooks/useProductListTrack.d.ts

@@ -0,0 +1,43 @@
+import { type RefObject } from 'react';
+import type { Product } from '../biz-components/Listing/types/product.js';
+/** 单个产品项的埋点数据（CMS 配置的简化产品） */
+export interface ProductItem {
+    sku?: string;
+    handle?: string;
+    custom_price?: number;
+    [key: string]: any;
+}
+/** Hook 入参 */
+export interface ProductListTrackOptions {
+    /** 组件容器 ref，用于 view_item_list 的视口检测 */
+    containerRef: RefObject<HTMLDivElement>;
+    /** 列表名称，用于 item_list_name 字段 */
+    listName: string;
+    /** 产品列表（简化数据，来自 CMS 配置） */
+    items: ProductItem[];
+    /** 构建时产品完整数据（来自 Shopify API） */
+    products?: Product[];
+}
+/**
+ * 产品列表埋点 Hook
+ *
+ * 封装两个 GA4 电商事件：
+ * - `view_item_list` — 组件进入视口时自动触发一次（产品列表露出）
+ * - `select_item` — 返回 trackSelectItem 函数，点击产品时手动调用（产品选择）
+ *
+ * @example
+ * ```tsx
+ * const { trackSelectItem } = useProductListTrack({
+ *   containerRef: innerRef,
+ *   listName: 'gift_tier_shelf',
+ *   items: availableItems.map(item => item.products?.[0]).filter(Boolean),
+ *   products: buildData?.products,
+ * })
+ *
+ * // 点击产品卡片时
+ * <Card onClick={() => { trackSelectItem(product, index); onCardClick?.() }} />
+ * ```
+ */
+export declare const useProductListTrack: ({ containerRef, listName, items, products }: ProductListTrackOptions) => {
+    trackSelectItem: (item: ProductItem, index: number) => void;
+};

package/dist/esm/hooks/useProductListTrack.js

@@ -0,0 +1,2 @@
+import{useRef as p,useEffect as _,useCallback as v}from"react";import{gaTrack as l}from"../shared/track.js";import{useAiuiContext as g}from"../biz-components/AiuiProvider/index.js";const k=(a,c)=>a.map((r,n)=>{const i=c?.find(s=>s.handle===r.handle)||null,t=i?.variants?.find(s=>s?.sku===r.sku)||null;return{item_id:r.sku||t?.sku||"",item_name:t?.title||i?.title||"",item_variant:t?.title||"",price:r.custom_price??t?.price?.amount??"",index:n+1}}),b=({containerRef:a,listName:c,items:r,products:n})=>{const{trackingData:i}=g(),t=p(!1);return _(()=>{if(!a.current||t.current||!n?.length)return;const e=new IntersectionObserver(([u])=>{u.isIntersecting&&!t.current&&(t.current=!0,l({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:i?.pageGroup||"Home Page",item_list_name:c,items:k(r,n)}}),e.disconnect())},{threshold:0});return e.observe(a.current),()=>e.disconnect()},[n,r,i,c,a]),{trackSelectItem:v((e,u)=>{const d=n?.find(m=>m.handle===e.handle)||null,o=d?.variants?.find(m=>m?.sku===e.sku)||null;l({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:i?.pageGroup||"Home Page",item_list_name:c,items:[{item_id:e.sku||o?.sku||"",item_name:o?.title||d?.title||"",item_variant:o?.title||"",price:e.custom_price??o?.price?.amount??"",index:u+1}]}})},[n,i,c])}};export{b as useProductListTrack};
+//# sourceMappingURL=useProductListTrack.js.map

package/dist/esm/hooks/useProductListTrack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useProductListTrack.ts"],
+  "sourcesContent": ["import { type RefObject, useRef, useEffect, useCallback } from 'react'\nimport { gaTrack } from '../shared/track.js'\nimport { useAiuiContext } from '../biz-components/AiuiProvider/index.js'\nimport type { Product, ProductVariant } from '../biz-components/Listing/types/product.js'\n\n/** \u5355\u4E2A\u4EA7\u54C1\u9879\u7684\u57CB\u70B9\u6570\u636E\uFF08CMS \u914D\u7F6E\u7684\u7B80\u5316\u4EA7\u54C1\uFF09 */\nexport interface ProductItem {\n  sku?: string\n  handle?: string\n  custom_price?: number\n  [key: string]: any\n}\n\n/** Hook \u5165\u53C2 */\nexport interface ProductListTrackOptions {\n  /** \u7EC4\u4EF6\u5BB9\u5668 ref\uFF0C\u7528\u4E8E view_item_list \u7684\u89C6\u53E3\u68C0\u6D4B */\n  containerRef: RefObject<HTMLDivElement>\n  /** \u5217\u8868\u540D\u79F0\uFF0C\u7528\u4E8E item_list_name \u5B57\u6BB5 */\n  listName: string\n  /** \u4EA7\u54C1\u5217\u8868\uFF08\u7B80\u5316\u6570\u636E\uFF0C\u6765\u81EA CMS \u914D\u7F6E\uFF09 */\n  items: ProductItem[]\n  /** \u6784\u5EFA\u65F6\u4EA7\u54C1\u5B8C\u6574\u6570\u636E\uFF08\u6765\u81EA Shopify API\uFF09 */\n  products?: Product[]\n}\n\n/**\n * \u6839\u636E\u7B80\u5316\u4EA7\u54C1 + \u5B8C\u6574\u4EA7\u54C1\u6570\u636E\uFF0C\u6784\u5EFA GA4 \u6807\u51C6 items \u6570\u7EC4\n */\nconst resolveItemList = (items: ProductItem[], products?: Product[]) => {\n  return items.map((item, index) => {\n    const matchedProduct = products?.find(p => p.handle === item.handle) || null\n    const variant = matchedProduct?.variants?.find((v: ProductVariant) => v?.sku === item.sku) || null\n    return {\n      item_id: item.sku || variant?.sku || '',\n      item_name: variant?.title || matchedProduct?.title || '',\n      item_variant: variant?.title || '',\n      price: item.custom_price ?? variant?.price?.amount ?? '',\n      index: index + 1,\n    }\n  })\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u57CB\u70B9 Hook\n *\n * \u5C01\u88C5\u4E24\u4E2A GA4 \u7535\u5546\u4E8B\u4EF6\uFF1A\n * - `view_item_list` \u2014 \u7EC4\u4EF6\u8FDB\u5165\u89C6\u53E3\u65F6\u81EA\u52A8\u89E6\u53D1\u4E00\u6B21\uFF08\u4EA7\u54C1\u5217\u8868\u9732\u51FA\uFF09\n * - `select_item` \u2014 \u8FD4\u56DE trackSelectItem \u51FD\u6570\uFF0C\u70B9\u51FB\u4EA7\u54C1\u65F6\u624B\u52A8\u8C03\u7528\uFF08\u4EA7\u54C1\u9009\u62E9\uFF09\n *\n * @example\n * ```tsx\n * const { trackSelectItem } = useProductListTrack({\n *   containerRef: innerRef,\n *   listName: 'gift_tier_shelf',\n *   items: availableItems.map(item => item.products?.[0]).filter(Boolean),\n *   products: buildData?.products,\n * })\n *\n * // \u70B9\u51FB\u4EA7\u54C1\u5361\u7247\u65F6\n * <Card onClick={() => { trackSelectItem(product, index); onCardClick?.() }} />\n * ```\n */\nexport const useProductListTrack = ({ containerRef, listName, items, products }: ProductListTrackOptions) => {\n  const { trackingData } = useAiuiContext()\n  const hasViewed = useRef(false)\n\n  // view_item_list \u2014 \u8FDB\u5165\u89C6\u53E3\u89E6\u53D1\u4E00\u6B21\n  useEffect(() => {\n    if (!containerRef.current || hasViewed.current || !products?.length) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting && !hasViewed.current) {\n          hasViewed.current = true\n          gaTrack({\n            event: 'ga4Event',\n            event_name: 'view_item_list',\n            event_parameters: {\n              page_group: trackingData?.pageGroup || 'Home Page',\n              item_list_name: listName,\n              items: resolveItemList(items, products),\n            },\n          })\n          observer.disconnect()\n        }\n      },\n      { threshold: 0 }\n    )\n\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [products, items, trackingData, listName, containerRef])\n\n  // select_item \u2014 \u70B9\u51FB\u67D0\u4EA7\u54C1\u65F6\u8C03\u7528\n  const trackSelectItem = useCallback(\n    (item: ProductItem, index: number) => {\n      const matchedProduct = products?.find(p => p.handle === item.handle) || null\n      const variant = matchedProduct?.variants?.find((v: ProductVariant) => v?.sku === item.sku) || null\n\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        event_parameters: {\n          page_group: trackingData?.pageGroup || 'Home Page',\n          item_list_name: listName,\n          items: [\n            {\n              item_id: item.sku || variant?.sku || '',\n              item_name: variant?.title || matchedProduct?.title || '',\n              item_variant: variant?.title || '',\n              price: item.custom_price ?? variant?.price?.amount ?? '',\n              index: index + 1,\n            },\n          ],\n        },\n      })\n    },\n    [products, trackingData, listName]\n  )\n\n  return { trackSelectItem }\n}\n"],
+  "mappings": "AAAA,OAAyB,UAAAA,EAAQ,aAAAC,EAAW,eAAAC,MAAmB,QAC/D,OAAS,WAAAC,MAAe,qBACxB,OAAS,kBAAAC,MAAsB,0CA0B/B,MAAMC,EAAkB,CAACC,EAAsBC,IACtCD,EAAM,IAAI,CAACE,EAAMC,IAAU,CAChC,MAAMC,EAAiBH,GAAU,KAAKI,GAAKA,EAAE,SAAWH,EAAK,MAAM,GAAK,KAClEI,EAAUF,GAAgB,UAAU,KAAMG,GAAsBA,GAAG,MAAQL,EAAK,GAAG,GAAK,KAC9F,MAAO,CACL,QAASA,EAAK,KAAOI,GAAS,KAAO,GACrC,UAAWA,GAAS,OAASF,GAAgB,OAAS,GACtD,aAAcE,GAAS,OAAS,GAChC,MAAOJ,EAAK,cAAgBI,GAAS,OAAO,QAAU,GACtD,MAAOH,EAAQ,CACjB,CACF,CAAC,EAuBUK,EAAsB,CAAC,CAAE,aAAAC,EAAc,SAAAC,EAAU,MAAAV,EAAO,SAAAC,CAAS,IAA+B,CAC3G,KAAM,CAAE,aAAAU,CAAa,EAAIb,EAAe,EAClCc,EAAYlB,EAAO,EAAK,EAG9B,OAAAC,EAAU,IAAM,CACd,GAAI,CAACc,EAAa,SAAWG,EAAU,SAAW,CAACX,GAAU,OAAQ,OAErE,MAAMY,EAAW,IAAI,qBACnB,CAAC,CAACC,CAAK,IAAM,CACPA,EAAM,gBAAkB,CAACF,EAAU,UACrCA,EAAU,QAAU,GACpBf,EAAQ,CACN,MAAO,WACP,WAAY,iBACZ,iBAAkB,CAChB,WAAYc,GAAc,WAAa,YACvC,eAAgBD,EAChB,MAAOX,EAAgBC,EAAOC,CAAQ,CACxC,CACF,CAAC,EACDY,EAAS,WAAW,EAExB,EACA,CAAE,UAAW,CAAE,CACjB,EAEA,OAAAA,EAAS,QAAQJ,EAAa,OAAO,EAC9B,IAAMI,EAAS,WAAW,CACnC,EAAG,CAACZ,EAAUD,EAAOW,EAAcD,EAAUD,CAAY,CAAC,EA6BnD,CAAE,gBA1Beb,EACtB,CAACM,EAAmBC,IAAkB,CACpC,MAAMC,EAAiBH,GAAU,KAAKI,GAAKA,EAAE,SAAWH,EAAK,MAAM,GAAK,KAClEI,EAAUF,GAAgB,UAAU,KAAMG,GAAsBA,GAAG,MAAQL,EAAK,GAAG,GAAK,KAE9FL,EAAQ,CACN,MAAO,WACP,WAAY,cACZ,iBAAkB,CAChB,WAAYc,GAAc,WAAa,YACvC,eAAgBD,EAChB,MAAO,CACL,CACE,QAASR,EAAK,KAAOI,GAAS,KAAO,GACrC,UAAWA,GAAS,OAASF,GAAgB,OAAS,GACtD,aAAcE,GAAS,OAAS,GAChC,MAAOJ,EAAK,cAAgBI,GAAS,OAAO,QAAU,GACtD,MAAOH,EAAQ,CACjB,CACF,CACF,CACF,CAAC,CACH,EACA,CAACF,EAAUU,EAAcD,CAAQ,CACnC,CAEyB,CAC3B",
+  "names": ["useRef", "useEffect", "useCallback", "gaTrack", "useAiuiContext", "resolveItemList", "items", "products", "item", "index", "matchedProduct", "p", "variant", "v", "useProductListTrack", "containerRef", "listName", "trackingData", "hasViewed", "observer", "entry"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.2.2",
+  "version": "1.2.3-alpha.1778583232121",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css

@@ -1001,6 +1001,9 @@ video {
 .mt-0 {
   margin-top: 0px;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1010,6 +1013,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-20 {
+  margin-top: 5rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1184,6 +1190,9 @@ video {
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
 .size-0 {
   width: 0px;
   height: 0px;
@@ -1642,6 +1651,9 @@ video {
 .min-h-\[336px\] {
   min-height: 336px;
 }
+.min-h-\[36px\] {
+  min-height: 36px;
+}
 .min-h-\[48px\] {
   min-height: 48px;
 }
@@ -1705,6 +1717,9 @@ video {
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[200px\] {
+  width: 200px;
+}
 .w-\[20px\] {
   width: 20px;
 }
@@ -2020,6 +2035,28 @@ video {
 .animate-\[spin_120s_linear_infinite\] {
   animation: spin 120s linear infinite;
 }
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-1 * var(--track-width, 50%)));
+  }
+}
+.animate-marquee {
+  animation: marquee var(--marquee-duration, 10s) linear infinite;
+}
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(calc(-1 * var(--track-width, 50%)));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.animate-marquee-reverse {
+  animation: marquee-reverse var(--marquee-duration, 10s) linear infinite;
+}
 @keyframes marquee-x {
   0% {
     transform: translateX(0);
@@ -2535,6 +2572,10 @@ video {
   --tw-border-opacity: 1 !important;
   border-color: rgb(248 77 79 / var(--tw-border-opacity, 1)) !important;
 }
+.border-\[\#005D8E\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 93 142 / var(--tw-border-opacity, 1));
+}
 .border-\[\#00BEFA\] {
   --tw-border-opacity: 1;
   border-color: rgb(0 190 250 / var(--tw-border-opacity, 1));
@@ -2589,6 +2630,9 @@ video {
 .border-\[var\(--brand-color-0\)\] {
   border-color: var(--brand-color-0);
 }
+.border-black\/5 {
+  border-color: rgb(0 0 0 / 0.05);
+}
 .border-brand-0 {
   border-color: var(--brand-color-0);
 }
@@ -2649,6 +2693,10 @@ video {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(8 10 15 / var(--tw-bg-opacity, 1)) !important;
 }
+.\!bg-\[\#1E2024\] {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(30 32 36 / var(--tw-bg-opacity, 1)) !important;
+}
 .\!bg-\[\#E8E8E8\] {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity, 1)) !important;
@@ -2836,6 +2884,10 @@ video {
 .bg-error-1 {
   background-color: var(--error-color-1);
 }
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+}
 .bg-info-primary {
   background-color: var(--info-primary-color);
 }
@@ -3328,9 +3380,15 @@ video {
 .pr-0 {
   padding-right: 0px;
 }
+.pr-12 {
+  padding-right: 3rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
+.pr-20 {
+  padding-right: 5rem;
+}
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -3349,6 +3407,9 @@ video {
 .pt-0 {
   padding-top: 0px;
 }
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -3528,6 +3589,12 @@ video {
 .leading-none {
   line-height: 1;
 }
+.leading-relaxed {
+  line-height: 1.625;
+}
+.leading-snug {
+  line-height: 1.375;
+}
 .leading-tight {
   line-height: var(--line-height-tight);
 }
@@ -3575,6 +3642,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.text-\[\#005D8E\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 93 142 / var(--tw-text-opacity, 1));
+}
 .text-\[\#00BEFA\] {
   --tw-text-opacity: 1;
   color: rgb(0 190 250 / var(--tw-text-opacity, 1));
@@ -3708,6 +3779,9 @@ video {
 .text-\[1D1D1F\] {
   color: 1D1D1F;
 }
+.text-\[var\(--brand-color-0\)\] {
+  color: var(--brand-color-0);
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@@ -3736,6 +3810,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
 .text-info-primary {
   color: var(--info-primary-color);
 }
@@ -3952,6 +4030,9 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.duration-150 {
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -4256,6 +4337,14 @@ video {
 .hover\:bg-container-secondary-0:hover {
   background-color: var(--container-secondary-color-0);
 }
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-info-white:hover {
   background-color: var(--info-white-color);
 }
@@ -4323,6 +4412,9 @@ video {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-70:hover {
+  opacity: 0.7;
+}
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
@@ -4380,6 +4472,21 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:outline:focus-visible {
+  outline-style: solid;
+}
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+.focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+.focus-visible\:outline-gray-400:focus-visible {
+  outline-color: #9ca3af;
+}
+.focus-visible\:outline-gray-900:focus-visible {
+  outline-color: #111827;
+}
 .focus-visible\:ring-0:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5546,6 +5653,9 @@ video {
   .laptop\:aspect-\[824\/560\] {
     aspect-ratio: 824/560;
   }
+  .laptop\:aspect-auto {
+    aspect-ratio: auto;
+  }
   .laptop\:size-1\/2 {
     width: 50%;
     height: 50%;
@@ -5618,6 +5728,14 @@ video {
     width: 90%;
     height: 90%;
   }
+  .laptop\:size-\[96px\] {
+    width: 96px;
+    height: 96px;
+  }
+  .laptop\:size-full {
+    width: 100%;
+    height: 100%;
+  }
   .laptop\:h-0 {
     height: 0px;
   }
@@ -5690,8 +5808,8 @@ video {
   .laptop\:h-\[54px\] {
     height: 54px;
   }
-  .laptop\:h-\[80px\] {
-    height: 80px;
+  .laptop\:h-\[72px\] {
+    height: 72px;
   }
   .laptop\:h-\[calc\(220px-72px\)\] {
     height: calc(220px - 72px);
@@ -5729,6 +5847,9 @@ video {
   .laptop\:w-2\/3 {
     width: 66.666667%;
   }
+  .laptop\:w-80 {
+    width: 20rem;
+  }
   .laptop\:w-\[--circle-laptop-size\] {
     width: var(--circle-laptop-size);
   }
@@ -6158,6 +6279,9 @@ video {
   .laptop\:pr-1 {
     padding-right: 0.25rem;
   }
+  .laptop\:pr-24 {
+    padding-right: 6rem;
+  }
   .laptop\:pt-4 {
     padding-top: 1rem;
   }
@@ -6560,6 +6684,10 @@ video {
     width: 1.5rem;
     height: 1.5rem;
   }
+  .desktop\:size-\[112px\] {
+    width: 112px;
+    height: 112px;
+  }
   .desktop\:size-\[115px\] {
     width: 115px;
     height: 115px;
@@ -6920,6 +7048,10 @@ video {
     padding-left: 1.75rem;
     padding-right: 1.75rem;
   }
+  .desktop\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
   .desktop\:px-\[111px\] {
     padding-left: 111px;
     padding-right: 111px;
@@ -6989,6 +7121,9 @@ video {
   .desktop\:pr-16 {
     padding-right: 4rem;
   }
+  .desktop\:pr-28 {
+    padding-right: 7rem;
+  }
   .desktop\:pt-0 {
     padding-top: 0px;
   }
@@ -7201,6 +7336,10 @@ video {
     width: 108px;
     height: 108px;
   }
+  .lg-desktop\:size-\[128px\] {
+    width: 128px;
+    height: 128px;
+  }
   .lg-desktop\:size-\[144px\] {
     width: 144px;
     height: 144px;
@@ -7722,9 +7861,8 @@ video {
 .\[\&_\.banner-dot\.swiper-pagination-bullet-active\]\:rounded-full .banner-dot.swiper-pagination-bullet-active {
   border-radius: 9999px;
 }
-.\[\&_\.banner-dot\.swiper-pagination-bullet-active\]\:bg-\[\#080A0F\] .banner-dot.swiper-pagination-bullet-active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 10 15 / var(--tw-bg-opacity, 1));
+.\[\&_\.banner-dot\.swiper-pagination-bullet-active\]\:bg-info-primary .banner-dot.swiper-pagination-bullet-active {
+  background-color: var(--info-primary-color);
 }
 .\[\&_\.banner-dot\]\:size-2 .banner-dot {
   width: 0.5rem;
@@ -7808,18 +7946,12 @@ video {
 .\[\&_\.swiper-slide\]\:\!h-auto .swiper-slide {
   height: auto !important;
 }
-.\[\&_\.swiper-slide\]\:\!w-auto .swiper-slide {
-  width: auto !important;
-}
 .\[\&_\.swiper-wrapper\]\:flex .swiper-wrapper {
   display: flex;
 }
 .\[\&_\.swiper-wrapper\]\:items-stretch .swiper-wrapper {
   align-items: stretch;
 }
-.\[\&_\.swiper-wrapper\]\:\!ease-linear .swiper-wrapper {
-  transition-timing-function: linear !important;
-}
 .\[\&_a\]\:text-\[\#1E2024\] a {
   --tw-text-opacity: 1;
   color: rgb(30 32 36 / var(--tw-text-opacity, 1));

package/tailwind.config.js

@@ -24,6 +24,14 @@ module.exports = {
           '0%': { transform: 'translateX(0)' },
           '100%': { transform: 'translateX(-50%)' },
         },
+        marquee: {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(calc(-1 * var(--track-width, 50%)))' },
+        },
+        'marquee-reverse': {
+          '0%': { transform: 'translateX(calc(-1 * var(--track-width, 50%)))' },
+          '100%': { transform: 'translateX(0)' },
+        },
         'marquee-y': {
           from: { transform: 'translateY(0%)' },
           to: { transform: 'translateY(-50%)' },
@@ -50,6 +58,8 @@ module.exports = {
       animation: {
         'marquee-y': 'marquee-y 20s linear infinite',
         'marquee-x': 'marquee-x var(--scroll-duration, 30s) linear infinite',
+        marquee: 'marquee var(--marquee-duration, 10s) linear infinite',
+        'marquee-reverse': 'marquee-reverse var(--marquee-duration, 10s) linear infinite',
         'scroll-text': 'scroll-text 2s ease-in-out infinite',
         'progress-bar': 'progress-bar var(--interval-time) ease-out',
         'fade-in-overlay': 'fade-in-overlay 0.3s cubic-bezier(0.4,0,0.2,1) both',