@returningai/widget-sdk 1.0.0

package/README.md

@@ -0,0 +1,393 @@
+# ReturningAI Widget SDK
+
+A Shadow DOM-isolated Web Component SDK for embedding ReturningAI widgets on any customer website. Drop-in replacement for the legacy `widget-loader.js` — identical embed attributes, zero CSS conflicts.
+
+---
+
+## Table of Contents
+
+- [Architecture](#architecture)
+- [Shadow DOM Implementation](#shadow-dom-implementation)
+- [Dependencies](#dependencies)
+- [Usage](#usage)
+  - [Script Tag (Legacy Embed)](#script-tag-legacy-embed)
+  - [Web Component](#web-component)
+  - [Configuration Attributes](#configuration-attributes)
+  - [Public API](#public-api)
+- [Build Process](#build-process)
+- [Project Structure](#project-structure)
+
+---
+
+## Architecture
+
+```
+Customer page DOM
+└── <div id="returning-ai-widget-{id}">   ← customer's container (unchanged)
+    └── <rai-widget>                 ← custom element (auto-mounted)
+        └── Shadow Root [closed]
+            ├── <style>                    ← all CSS scoped here, never leaks
+            ├── <div class="rai-loader">   ← animated loader (hidden after ready)
+            ├── <div class="rai-error">    ← error state (hidden until error)
+            └── <iframe src="widget-url">  ← actual widget content
+```
+
+### Module Responsibilities
+
+| Module | File | Purpose |
+|--------|------|---------|
+| Base Web Component | `src/BaseWidget.ts` | Abstract `HTMLElement` subclass; owns the Shadow Root, auth lifecycle, iframe creation, public API |
+| Store Widget | `src/StoreWidget.ts` | Extends `BaseWidget`; implements `buildWidgetUrl()` for the store micro-frontend |
+| Channel Widget | `src/ChannelWidget.ts` | Extends `BaseWidget`; appends `widgetId` to base URL or passes full URL through |
+| Milestone Widget | `src/MilestoneWidget.ts` | Extends `BaseWidget`; same URL strategy as `ChannelWidget` |
+| Social Widget | `src/SocialWidget.ts` | Extends `BaseWidget`; same URL strategy as `ChannelWidget` |
+| Currency Widget | `src/CurrencyWidget.ts` | Extends `BaseWidget`; same URL strategy as `ChannelWidget` |
+| Auth | `src/core/auth.ts` | Serverless auth, token refresh (with concurrency lock), logout, error settings fetch |
+| Storage | `src/core/storage.ts` | `localStorage` helpers scoped to `{prefix}-{widgetId}-*`; access token never written to disk |
+| postMessage | `src/core/postmessage.ts` | Sends token to iframe; receives `WIDGET_READY`, `WIDGET_HEIGHT_UPDATE`, `WIDGET_LOGOUT`, `RETURNINGAI_WIDGET_REQUEST_TOKEN` |
+| Styles | `src/styles/widget.css` | Loader animation, error state, iframe fade-in — all scoped inside Shadow DOM |
+| Entry | `src/index.ts` | Registers all 5 custom elements; bootstraps from `<script>` tag for legacy embeds; routes by `widget-type`; exposes `window.ReturningAIWidget` |
+
+### Auth Flow
+
+```
+Page load
+  │
+  ├─ loadFromStorage()  ── refresh token in localStorage?
+  │       Yes ──► refreshAccessToken()  ──► createIframe()
+  │       No  ──► authenticateServerless() ──► createIframe()
+  │
+  └─ iframe.onload
+        └─ sendTokenToWidget()   ← postMessage with access token
+           schedulePeriodicSync() ← resend every 2 min
+
+Token nearing expiry (1 min early)
+  └─ refreshAccessToken()
+        ├─ 401/403 ──► re-authenticate serverless (token family rotated)
+        └─ success ──► sendTokenToWidget()
+```
+
+**Token storage strategy**
+
+| Token | Location | TTL |
+|-------|----------|-----|
+| Access token | Memory only (`WidgetState.accessToken`) | ~5 min |
+| Refresh token | `localStorage` | 7 days |
+
+The access token is never written to `localStorage`. On every page load the refresh token is exchanged for a fresh access token before the iframe mounts.
+
+### postMessage Protocol
+
+Messages the SDK sends **to** the widget iframe:
+
+| Type | Payload | When |
+|------|---------|------|
+| `RETURNINGAI_WIDGET_TOKEN` | `{ widgetId, token }` | After iframe load, on refresh, every 2 min |
+
+Messages the SDK **receives** from the widget iframe:
+
+| Type | Action |
+|------|--------|
+| `WIDGET_READY` | Hides loader, fades in iframe |
+| `WIDGET_HEIGHT_UPDATE` | Resizes iframe to `payload.height` |
+| `WIDGET_ERROR` | Hides loader |
+| `WIDGET_LOGOUT` | Calls logout endpoint, removes iframe |
+| `RETURNINGAI_WIDGET_REQUEST_TOKEN` | Responds immediately with a fresh token |
+
+All messages are origin-validated against `config.widgetDomain`.
+
+---
+
+## Shadow DOM Implementation
+
+The SDK uses a **closed** Shadow Root (`mode: 'closed'`), which means:
+
+- Customer page CSS cannot reach any element inside the widget
+- The widget's loader and error styles are fully encapsulated
+- No class name collisions with customer frameworks (Tailwind, Bootstrap, etc.)
+
+### How it is attached
+
+```typescript
+// StoreWidget.ts — constructor
+this.shadow = this.attachShadow({ mode: 'closed' })
+
+// connectedCallback — CSS injected as a <style> tag inside the shadow root
+const style = document.createElement('style')
+style.textContent = widgetCSS   // inlined at build time via Vite ?inline import
+this.shadow.appendChild(style)
+```
+
+CSS custom properties (`--rai-accent`, `--rai-loader-bg`, `--rai-text4`) are set on the host element and cascade into the Shadow Root, allowing theme-aware colours without breaking encapsulation.
+
+### Theme variables
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--rai-accent` | `#000000` | `#ffffff` |
+| `--rai-text4` | `#6b7280` | `#9ca3af` |
+| `--rai-loader-bg` | `#ffffff` | `#1a1a1a` |
+| `--rai-error-bg` | `#ffffff` | `#1a1a1a` |
+
+---
+
+## Dependencies
+
+### Runtime
+
+None. The SDK ships as a single self-contained IIFE with no external runtime dependencies.
+
+### Dev / Build
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `vite` | ^5.1 | Bundles TypeScript + inlines CSS → single IIFE |
+| `typescript` | ^5.3 | Type checking and compilation |
+| `terser` | ^5.46 | Minification for production builds |
+
+### Browser requirements
+
+| Feature | Minimum |
+|---------|---------|
+| Custom Elements v1 | Chrome 67, Firefox 63, Safari 13 |
+| Shadow DOM v1 | Chrome 53, Firefox 63, Safari 10 |
+| `crypto.randomUUID()` | Chrome 92, Firefox 95, Safari 15.4 |
+| `localStorage` | All modern browsers |
+
+---
+
+## Usage
+
+### Script Tag (Legacy Embed)
+
+Zero changes required to existing embed HTML. Point `src` at the SDK and keep all `data-*` attributes as-is:
+
+```html
+<!-- 1. Container div (unchanged from current embed) -->
+<div
+  id="returning-ai-widget-6502c9e514a3e564c5c09c0a"
+  style="width: 100%; height: 600px;"
+></div>
+
+<!-- 2. SDK script tag -->
+<script
+  src="https://cdn.returningai.com/widget-sdk/v1.0.0/rai-widget.iife.js"
+  data-widget-id="6502c9e514a3e564c5c09c0a"
+  data-widget-type="store"
+  data-container="returning-ai-widget-6502c9e514a3e564c5c09c0a"
+  data-theme="dark"
+  data-width="100%"
+  data-height="600px"
+  data-api-url="https://sgtr-eks-widgets.genesiv.org"
+  data-widget-url="https://widget.returningai.com/widgets/store/6502c9e514a3e564c5c09c0a/open-widget"
+  data-auto-refresh="true"
+  data-email="user@example.com"
+></script>
+```
+
+The SDK scans for the loader `<script>` tag, reads its `data-*` attributes, creates a `<rai-widget>` element, and mounts it inside the container div.
+
+### Web Component
+
+For customers using a JavaScript framework (React, Vue, Angular), import the SDK once and use the custom element directly. Each widget type has its own tag:
+
+| Tag | Widget type |
+|-----|-------------|
+| `<rai-widget>` | `store` |
+| `<rai-channel-widget>` | `channel` |
+| `<rai-milestone-widget>` | `milestone` |
+| `<rai-social-widget>` | `social` |
+| `<rai-currency-widget>` | `currency-view` |
+
+```html
+<script src="https://cdn.returningai.com/widget-sdk/v1.0.0/rai-widget.iife.js"></script>
+
+<!-- Store widget -->
+<rai-widget
+  widget-id="6502c9e514a3e564c5c09c0a"
+  widget-type="store"
+  theme="dark"
+  width="100%"
+  height="600px"
+  api-url="https://sgtr-eks-widgets.genesiv.org"
+  widget-url="https://widget.returningai.com/widgets/store/6502c9e514a3e564c5c09c0a/open-widget"
+  data-email="user@example.com"
+></rai-widget>
+
+<!-- Channel widget -->
+<rai-channel-widget
+  widget-id="NjdmNmExNDU4NDQ5NDRmZjYwYWEzYzEz"
+  widget-type="channel"
+  theme="dark"
+  api-url="https://sgtr-eks-widgets.genesiv.org"
+  widget-url="https://sgtr-eks-widgets.genesiv.org/channel-widget"
+  data-email="user@example.com"
+></rai-channel-widget>
+```
+
+In React (TypeScript):
+
+```tsx
+// JSX types are included in the package — no manual declarations needed
+import '@returningai/widget-sdk'
+
+export function WidgetEmbed() {
+  return (
+    <rai-widget
+      widget-id="6502c9e514a3e564c5c09c0a"
+      widget-type="store"
+      theme="dark"
+      height="600px"
+      data-email={currentUser.email}
+    />
+  )
+}
+```
+
+### Configuration Attributes
+
+All attributes can be provided with or without the `data-` prefix.
+
+| Attribute | Required | Default | Description |
+|-----------|----------|---------|-------------|
+| `widget-id` | Yes | — | MongoDB ObjectId of the widget |
+| `widget-type` | No | `store` | `store`, `channel`, `milestone`, `social`, `currency-view` |
+| `theme` | No | `light` | `light` or `dark` |
+| `container` | No | `returning-ai-widget-{id}` | ID of the container element |
+| `width` | No | `100%` | CSS width of the iframe |
+| `height` | No | `600px` | Initial CSS height (auto-resized by `WIDGET_HEIGHT_UPDATE`) |
+| `api-url` | No | `https://sgtr-eks-widgets.genesiv.org` | Auth API base URL |
+| `widget-url` | No | `https://widget.returningai.com` | URL served inside the iframe |
+| `auto-refresh` | No | `true` | Automatically refresh access token before expiry |
+| `debug` | No | `false` | Enable verbose console logging |
+| `data-email` | No | — | User identifier passed to auth |
+| `data-*` | No | — | Any additional `data-*` attributes are forwarded as `userIdentifiers` to the auth API |
+
+### Public API
+
+After the SDK loads, `window.ReturningAIWidget` is available:
+
+```javascript
+// Check the loaded version
+window.ReturningAIWidget.version          // e.g. "1.0.0"
+
+// Reload the widget (re-runs auth flow)
+await window.ReturningAIWidget.reload()
+
+// Log out and remove the iframe
+await window.ReturningAIWidget.logout()
+
+// Check authentication state
+window.ReturningAIWidget.isAuthenticated()  // boolean
+
+// Inspect token metadata (no token values exposed)
+window.ReturningAIWidget.getTokenInfo()
+// {
+//   hasAccessToken: true,
+//   hasRefreshToken: true,
+//   accessTokenExpiry: Date,
+//   refreshTokenExpiry: Date,
+//   isAccessTokenValid: true,
+//   isRefreshTokenValid: true
+// }
+```
+
+---
+
+## Build Process
+
+### Prerequisites
+
+```bash
+node >= 18
+npm >= 9
+```
+
+### Install
+
+```bash
+cd rai-widget-sdks
+npm install
+```
+
+### Development build (unminified, fast)
+
+```bash
+npm run build
+# → dist/rai-widget.iife.js  (~17 kB, IIFE for CDN/script-tag)
+# → dist/rai-widget.js       (~17 kB, ESM for bundlers/npm)
+```
+
+### Production build (minified with Terser)
+
+```bash
+npm run build:min
+# → dist/rai-widget.iife.js  (~6 kB gzip, IIFE for CDN/script-tag)
+# → dist/rai-widget.js       (~6 kB gzip, ESM for bundlers/npm)
+```
+
+### Local dev server
+
+```bash
+npm run dev
+# Opens Vite dev server — open test/index.html via the dev server URL
+```
+
+### How the build works
+
+1. **Entry**: `src/index.ts` — imports `StoreWidget`, registers the custom element, runs the bootstrap
+2. **CSS inlining**: `src/styles/widget.css` is imported with Vite's `?inline` suffix, which converts it to a JavaScript string at build time — no separate CSS file is emitted
+3. **Output formats**: `iife` (Immediately Invoked Function Expression) for CDN/script-tag embeds → `dist/rai-widget.iife.js`; `es` (ES module) for bundlers and npm consumers → `dist/rai-widget.js`
+4. **Version injection**: `vite.config.ts` reads `version` from `package.json` and replaces the `__WIDGET_VERSION__` placeholder at build time
+
+```
+src/index.ts
+  ├── src/StoreWidget.ts
+  │     └── src/BaseWidget.ts  ← shared auth/iframe/Shadow DOM logic
+  │           ├── src/types.ts
+  │           ├── src/core/auth.ts
+  │           │     └── src/core/storage.ts
+  │           ├── src/core/storage.ts
+  │           ├── src/core/postmessage.ts
+  │           └── src/styles/widget.css  [inlined as string]
+  ├── src/ChannelWidget.ts   └── src/BaseWidget.ts
+  ├── src/MilestoneWidget.ts └── src/BaseWidget.ts
+  ├── src/SocialWidget.ts    └── src/BaseWidget.ts
+  └── src/CurrencyWidget.ts  └── src/BaseWidget.ts
+```
+
+To release a new version, bump `version` in `package.json`, rebuild, and upload `dist/rai-widget.iife.js` to the CDN under the new version path. Run `npm publish` to push the ESM build to the npm registry (`prepublishOnly` handles the rebuild automatically).
+
+---
+
+## Project Structure
+
+```
+rai-widget-sdks/
+├── src/
+│   ├── types.ts              # WidgetConfig, WidgetState, TokenData interfaces
+│   ├── BaseWidget.ts         # Abstract HTMLElement subclass — Shadow Root, auth, iframe
+│   ├── StoreWidget.ts        # Extends BaseWidget; store micro-frontend URL builder
+│   ├── ChannelWidget.ts      # Extends BaseWidget; channel SSR URL builder
+│   ├── MilestoneWidget.ts    # Extends BaseWidget; milestone SSR URL builder
+│   ├── SocialWidget.ts       # Extends BaseWidget; social SSR URL builder
+│   ├── CurrencyWidget.ts     # Extends BaseWidget; currency-view SSR URL builder
+│   ├── index.ts              # Registers all 5 custom elements + IIFE bootstrap
+│   ├── jsx.d.ts              # React JSX IntrinsicElements + Vue GlobalComponents type shims
+│   ├── vite-env.d.ts         # Type declarations for ?inline imports + __WIDGET_VERSION__
+│   ├── core/
+│   │   ├── auth.ts           # Serverless auth, refresh, logout, error settings
+│   │   ├── storage.ts        # localStorage helpers (refresh token persistence)
+│   │   └── postmessage.ts    # iframe token delivery + message listener
+│   └── styles/
+│       └── widget.css        # All loader/error/iframe CSS (inlined into Shadow DOM)
+├── test/
+│   └── index.html            # Local test page with config panel and verification checklist
+├── dist/                     # Built output (gitignored)
+│   ├── rai-widget.iife.js    # IIFE bundle for CDN / <script src> embeds
+│   ├── rai-widget.js         # ESM bundle for bundlers / npm consumers
+│   └── types/                # TypeScript declarations (generated by tsc)
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```

package/dist/rai-widget.iife.js

@@ -0,0 +1 @@
+var RaiWidget=function(e){"use strict";var t=Object.defineProperty,r=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a)(e,"symbol"!=typeof r?r+"":r,a);function a(e){return`${e.storagePrefix}-${e.widgetId}-auth`}function i(e){return`${e.storagePrefix}-${e.widgetId}-error-settings`}function s(e){try{localStorage.removeItem(a(e))}catch{}}function n(e){return!e||Date.now()>=e-6e4}function o(e,t,r,i){t.accessToken=r.accessToken,t.refreshToken=r.refreshToken,t.tokenFamily=r.tokenFamily??null;const s=Date.now();t.accessTokenExpiry=s+1e3*r.accessTokenTTL,t.refreshTokenExpiry=s+1e3*r.refreshTokenTTL,function(e,t){try{const r={refreshToken:t.refreshToken,tokenFamily:t.tokenFamily,refreshTokenExpiry:t.refreshTokenExpiry};localStorage.setItem(a(e),JSON.stringify(r))}catch{}}(e,t),e.autoRefresh&&i&&i()}async function l(e,t,r){const a=crypto.randomUUID(),i=Date.now();try{const s=await fetch(`${e.apiUrl}/${e.widgetId}/auth/serverless`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({nonce:a,timestamp:i,widgetType:e.widgetType,userIdentifiers:e.userIdentifiers}),credentials:"include"});if(!s.ok){const e=await s.json().catch(()=>({error:"Authentication failed"}));throw new Error(e.error||`HTTP ${s.status}`)}const n=await s.json();if(!n.accessToken||!n.refreshToken)throw new Error("Invalid authentication response");return o(e,t,n,r),t.isAuthenticated=!0,!0}catch{return t.isAuthenticated=!1,!1}}async function c(e,t,r,a){return t.isRefreshing?t.refreshPromise:!!t.refreshToken&&(t.isRefreshing=!0,t.refreshPromise=(async()=>{try{const i=await fetch(`${e.apiUrl}/${e.widgetId}/auth/refresh`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${t.refreshToken}`},body:JSON.stringify({widgetType:e.widgetType})});if(!i.ok){if(401===i.status||403===i.status)return h(t),s(e),l(e,t,r);const a=await i.json().catch(()=>({error:"Token refresh failed"}));throw new Error(a.error||`HTTP ${i.status}`)}const n=await i.json();if(!n.accessToken||!n.refreshToken)throw new Error("Invalid refresh response");return o(e,t,n,r),a&&a(),!0}catch{return h(t),s(e),l(e,t,r)}finally{t.isRefreshing=!1,t.refreshPromise=null}})(),t.refreshPromise)}async function d(e,t){const r=function(e){try{const t=localStorage.getItem(i(e));if(!t)return null;const r=JSON.parse(t);return r.cachedAt&&Date.now()-r.cachedAt<36e5?r:(localStorage.removeItem(i(e)),null)}catch{return null}}(e);if(r)return r.configured&&(t.errorSettings={errorMessage:r.errorMessage,modalColor:r.modalColor,backgroundImage:r.backgroundImage}),t.errorSettings;try{const r=await fetch(`${e.apiUrl}/${e.widgetId}/auth/error-settings?widgetType=${e.widgetType}`,{method:"GET",headers:{"Content-Type":"application/json"}});if(!r.ok)return null;const a=await r.json();return function(e,t){try{localStorage.setItem(i(e),JSON.stringify({...t,cachedAt:Date.now()}))}catch{}}(e,a),a.configured&&(t.errorSettings={errorMessage:a.errorMessage,modalColor:a.modalColor,backgroundImage:a.backgroundImage}),t.errorSettings}catch{return null}}function h(e){e.accessToken=null,e.refreshToken=null,e.tokenFamily=null,e.accessTokenExpiry=null,e.refreshTokenExpiry=null,e.isAuthenticated=!1,e.isRefreshing=!1,e.refreshPromise=null,e.refreshTimer&&(clearTimeout(e.refreshTimer),e.refreshTimer=null),e.syncTimer&&(clearInterval(e.syncTimer),e.syncTimer=null)}function f(e,t,r){var a;if(t.accessToken)try{null==(a=r.contentWindow)||a.postMessage({type:"RETURNINGAI_WIDGET_TOKEN",value:{widgetId:e.widgetId,token:t.accessToken}},e.widgetDomain)}catch{}}function u(e,t,r,a,i,s,o){const d=async r=>{var d;if(r.origin!==e.widgetDomain)return;if(!r.data||"string"!=typeof r.data.type)return;const{type:h,containerId:f,widgetId:u,payload:g}=r.data;switch(h){case"RETURNINGAI_WIDGET_REQUEST_TOKEN":try{const r=await async function(e,t,r){if(t.accessToken&&!n(t.accessTokenExpiry))return t.accessToken;if(await c(e,t,r)&&t.accessToken)return t.accessToken;if(await l(e,t,r)&&t.accessToken)return t.accessToken;throw new Error("Unable to obtain valid token")}(e,t,i);null==(d=a.contentWindow)||d.postMessage({type:"RETURNINGAI_WIDGET_TOKEN",value:{token:r,widgetId:e.widgetId}},e.widgetDomain)}catch{}break;case"WIDGET_HEIGHT_UPDATE":{const e=Number(null==g?void 0:g.height);Number.isFinite(e)&&e>0&&(a.style.height=`${e}px`);break}case"WIDGET_READY":if(void 0!==u&&u!==e.widgetId)break;if(void 0!==f&&f!==e.container)break;a.classList.add("loaded"),o&&o();break;case"WIDGET_ERROR":o&&o();break;case"WIDGET_LOGOUT":s&&await s()}};return window.addEventListener("message",d),()=>window.removeEventListener("message",d)}const g=new Set(["widget-id","widget-type","theme","container","width","height","api-url","widget-url","auto-refresh","debug"]);class m extends HTMLElement{constructor(){super(),r(this,"shadow"),r(this,"config"),r(this,"state",{accessToken:null,refreshToken:null,tokenFamily:null,accessTokenExpiry:null,refreshTokenExpiry:null,refreshTimer:null,syncTimer:null,iframe:null,isAuthenticated:!1,isRefreshing:!1,refreshPromise:null,errorSettings:null}),r(this,"loaderEl",null),r(this,"errorEl",null),r(this,"cleanupListener"),this.shadow=this.attachShadow({mode:"closed"})}connectedCallback(){this.config=function(e,t){const r=t=>e.getAttribute(t)??e.getAttribute(`data-${t}`)??"";let a,i=r("widget-url")||"https://widget.returningai.com";i.endsWith("store-widget")&&(i=`${i}/${r("widget-id")}/open-widget`);try{a=new URL(i).origin}catch{a=i}if(i.includes("store-widget")){const e=new URL(i);e.searchParams.set("color",r("theme")||"light"),i=e.toString()}const s=r("widget-id")||t||"",n=r("container")||r("data-container")||`returning-ai-widget-${s}`,o={};return Array.from(e.attributes).forEach(e=>{const t=e.name.toLowerCase();if(!t.startsWith("data-"))return;const r=t.slice(5);g.has(r)||(o[t]=e.value)}),{widgetId:s,widgetType:r("widget-type")||"store",theme:r("theme")||"light",container:n,width:r("width")||"100%",height:r("height")||"600px",apiUrl:r("api-url")||"https://sgtr-eks-widgets.genesiv.org",widgetUrl:i,widgetDomain:a,autoRefresh:"false"!==r("auto-refresh"),debug:"true"===r("debug"),storagePrefix:"returning-ai-widget",userIdentifiers:o}}(this,void 0);const e=document.createElement("style");e.textContent=":host{display:block;position:relative;width:100%;height:100%}.rai-loader{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--rai-loader-bg, #ffffff);border-radius:8px;z-index:10;transition:opacity .3s ease-out}.rai-loader.fade-out{opacity:0;pointer-events:none}.rai-error{display:none;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--rai-error-bg, #1a1a1a);border-radius:8px;padding:24px;box-sizing:border-box;text-align:center;color:var(--rai-error-text, #9ca3af);font-family:system-ui,-apple-system,sans-serif;z-index:10}.rai-error.visible{display:flex}iframe{display:block;border:none;opacity:0;transition:opacity .3s ease-in}iframe.loaded{opacity:1}.loader{position:relative;width:75px;height:100px}.loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:var(--rai-accent, #000000);transform-origin:center bottom;box-shadow:1px 1px #0003}.loader__bar:nth-child(1){left:0;transform:scaleY(.2);animation:barUp1 4s infinite}.loader__bar:nth-child(2){left:15px;transform:scaleY(.4);animation:barUp2 4s infinite}.loader__bar:nth-child(3){left:30px;transform:scaleY(.6);animation:barUp3 4s infinite}.loader__bar:nth-child(4){left:45px;transform:scaleY(.8);animation:barUp4 4s infinite}.loader__bar:nth-child(5){left:60px;transform:scale(1);animation:barUp5 4s infinite}.loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:var(--rai-accent, #000000);border-radius:50%;animation:ball 4s infinite}@keyframes ball{0%{transform:translate(0)}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px)}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translateY(-40px)}to{transform:translate(0)}}@keyframes barUp1{0%{transform:scaleY(.2)}40%{transform:scaleY(.2)}50%{transform:scale(1)}90%{transform:scale(1)}to{transform:scaleY(.2)}}@keyframes barUp2{0%{transform:scaleY(.4)}40%{transform:scaleY(.4)}50%{transform:scaleY(.8)}90%{transform:scaleY(.8)}to{transform:scaleY(.4)}}@keyframes barUp3{0%{transform:scaleY(.6)}to{transform:scaleY(.6)}}@keyframes barUp4{0%{transform:scaleY(.8)}40%{transform:scaleY(.8)}50%{transform:scaleY(.4)}90%{transform:scaleY(.4)}to{transform:scaleY(.8)}}@keyframes barUp5{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scaleY(.2)}90%{transform:scaleY(.2)}to{transform:scale(1)}}#loading-square{width:75px;aspect-ratio:1;display:flex;color:var(--rai-accent, #000000);background:linear-gradient(currentColor 0 0) right / 51% 100%,linear-gradient(currentColor 0 0) bottom / 100% 51%;background-repeat:no-repeat;animation:l16-0 2s infinite linear .25s}#loading-square>div{width:50%;height:50%;background:currentColor;animation:l16-1 .5s infinite linear}@keyframes l16-0{0%,12.49%{transform:rotate(0)}12.5%,37.49%{transform:rotate(90deg)}37.5%,62.49%{transform:rotate(180deg)}62.5%,87.49%{transform:rotate(270deg)}87.5%,to{transform:rotate(360deg)}}@keyframes l16-1{0%{transform:perspective(80px) rotate3d(-1,-1,0,0)}80%,to{transform:perspective(80px) rotate3d(-1,-1,0,-180deg)}}#loading-circle{width:75px;aspect-ratio:1;display:grid;grid:50%/50%;color:var(--rai-accent, #000000);border-radius:50%;--_g: no-repeat linear-gradient(currentColor 0 0);background:var(--_g),var(--_g),var(--_g);background-size:50.1% 50.1%;animation:l9-0 1.5s infinite steps(1) alternate,l9-0-0 3s infinite steps(1) alternate}#loading-circle>div{background:var(--rai-text4, #6b7280);border-top-left-radius:100px;transform:perspective(150px) rotateY(0) rotateX(0);transform-origin:bottom right;animation:l9-1 1.5s infinite linear alternate}@keyframes l9-0{0%{background-position:0 100%,100% 100%,100% 0}33%{background-position:100% 100%,100% 100%,100% 0}66%{background-position:100% 0,100% 0,100% 0}}@keyframes l9-0-0{0%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(-1) rotate(-90deg)}}@keyframes l9-1{16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0) rotateX(0);filter:grayscale(.8)}33%{transform:perspective(150px) rotateX(-180deg) rotateY(0) rotateX(0)}66%{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0)}to{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(.8)}}",this.shadow.appendChild(e);const t=this.config.theme,r="dark"===t?"#ffffff":"#000000",a="dark"===t?"#9ca3af":"#6b7280",i="dark"===t?"#1a1a1a":"#ffffff";this.style.setProperty("--rai-accent",r),this.style.setProperty("--rai-text4",a),this.style.setProperty("--rai-loader-bg",i),this.style.setProperty("--rai-error-bg",i),this.renderShell(),this.init()}disconnectedCallback(){this.cleanupListener&&this.cleanupListener(),h(this.state)}renderShell(){this.loaderEl=document.createElement("div"),this.loaderEl.className="rai-loader",this.loaderEl.appendChild(this.createDefaultLoader()),this.shadow.appendChild(this.loaderEl),this.errorEl=document.createElement("div"),this.errorEl.className="rai-error",this.errorEl.textContent="Authentication failed. Please try again later.",this.shadow.appendChild(this.errorEl)}createDefaultLoader(){const e=document.createElement("div");e.className="loader";for(let r=0;r<5;r++){const t=document.createElement("div");t.className="loader__bar",e.appendChild(t)}const t=document.createElement("div");return t.className="loader__ball",e.appendChild(t),e}hideLoader(){this.loaderEl&&(this.loaderEl.classList.add("fade-out"),setTimeout(()=>{var e;return null==(e=this.loaderEl)?void 0:e.remove()},300),this.loaderEl=null)}showError(){var e;this.hideLoader(),this.errorEl&&((null==(e=this.state.errorSettings)?void 0:e.errorMessage)&&(this.errorEl.textContent=this.state.errorSettings.errorMessage),this.errorEl.classList.add("visible"))}async init(){if(!this.config.widgetId)return void this.showError();await d(this.config,this.state);if(function(e,t){try{const r=localStorage.getItem(a(e));if(!r)return!1;const i=JSON.parse(r);return i.refreshToken&&!n(i.refreshTokenExpiry)?(t.refreshToken=i.refreshToken,t.tokenFamily=i.tokenFamily,t.refreshTokenExpiry=i.refreshTokenExpiry,!0):(s(e),!1)}catch{return!1}}(this.config,this.state)){return await c(this.config,this.state,()=>this.scheduleRefresh())?(this.state.isAuthenticated=!0,void this.createIframe()):void this.showError()}await l(this.config,this.state,()=>this.scheduleRefresh())?this.createIframe():this.showError()}createIframe(){const e=document.createElement("iframe");e.src=this.buildWidgetUrl(this.config),e.allow="clipboard-write",e.frameBorder="0",e.scrolling="no",e.style.cssText=`width: ${this.config.width}; height: ${this.config.height}; border: none; display: block;`,e.onload=()=>{f(this.config,this.state,e),this.schedulePeriodicSync(e)},e.onerror=()=>{this.showError()},this.state.iframe=e,this.shadow.appendChild(e),this.cleanupListener=u(this.config,this.state,this.shadow,e,()=>this.scheduleRefresh(),()=>this.logoutAndClear(),()=>this.hideLoader())}scheduleRefresh(){if(this.state.refreshTimer&&clearTimeout(this.state.refreshTimer),!this.state.accessTokenExpiry)return;const e=this.state.accessTokenExpiry-Date.now()-6e4;e>0?this.state.refreshTimer=setTimeout(async()=>{await c(this.config,this.state,()=>this.scheduleRefresh(),()=>{this.state.iframe&&f(this.config,this.state,this.state.iframe)})},e):c(this.config,this.state,()=>this.scheduleRefresh(),()=>{this.state.iframe&&f(this.config,this.state,this.state.iframe)})}schedulePeriodicSync(e){this.state.syncTimer&&clearInterval(this.state.syncTimer),this.state.syncTimer=setInterval(()=>{this.state.accessToken&&f(this.config,this.state,e)},12e4)}async logoutAndClear(){await async function(e,t){if(t.accessToken)try{await fetch(`${e.apiUrl}/${e.widgetId}/auth/logout`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${t.accessToken}`},body:JSON.stringify({refreshToken:t.refreshToken})})}catch{}h(t),s(e)}(this.config,this.state),this.shadow.querySelectorAll("iframe").forEach(e=>e.remove())}async reload(){h(this.state),this.shadow.querySelectorAll("iframe").forEach(e=>e.remove()),await this.init()}async logoutPublic(){await this.logoutAndClear()}isAuthenticated(){return this.state.isAuthenticated&&null!==this.state.accessToken}getTokenInfo(){return{hasAccessToken:!!this.state.accessToken,hasRefreshToken:!!this.state.refreshToken,accessTokenExpiry:this.state.accessTokenExpiry?new Date(this.state.accessTokenExpiry):null,refreshTokenExpiry:this.state.refreshTokenExpiry?new Date(this.state.refreshTokenExpiry):null,isAccessTokenValid:!!this.state.accessToken&&!n(this.state.accessTokenExpiry),isRefreshTokenValid:!!this.state.refreshToken&&!n(this.state.refreshTokenExpiry)}}}class p extends m{buildWidgetUrl(e){const t=new URL(e.widgetUrl);return t.searchParams.set("color",e.theme),t.searchParams.set("containerId",e.container),t.searchParams.set("connectType","simple"),t.searchParams.set("mode","private"),t.toString()}}class w extends m{buildWidgetUrl(e){return e.widgetUrl.endsWith("channel-widget")?`${e.widgetUrl}/${e.widgetId}`:e.widgetUrl}}class y extends m{buildWidgetUrl(e){return e.widgetUrl.endsWith("milestone-widget")?`${e.widgetUrl}/${e.widgetId}`:e.widgetUrl}}class T extends m{buildWidgetUrl(e){return e.widgetUrl.endsWith("social-widget")?`${e.widgetUrl}/${e.widgetId}`:e.widgetUrl}}class k extends m{buildWidgetUrl(e){return e.widgetUrl.endsWith("currency-overview-widget")?`${e.widgetUrl}/${e.widgetId}`:e.widgetUrl}}console.log("[rai-widget] v1.0.0");const b=[["rai-widget",p],["rai-channel-widget",w],["rai-milestone-widget",y],["rai-social-widget",T],["rai-currency-widget",k]];for(const[S,U]of b)customElements.get(S)||customElements.define(S,U);const x={store:p,channel:w,milestone:y,social:T,"currency-view":k},E=b.map(([e])=>e).join(", ");function v(){var e;const t=((null==(e=document.currentScript)?void 0:e.hasAttribute("data-widget-id"))?document.currentScript:null)||document.querySelector("script[data-widget-id]");if(!t)return;const r=t.getAttribute("data-widget-id");if(!r)return;const a=t.getAttribute("data-container")||`returning-ai-widget-${r}`,i=document.getElementById(a);if(!i)return;"static"===getComputedStyle(i).position&&(i.style.position="relative");const s=t.getAttribute("data-widget-type")??"store",n=new(x[s]??p);Array.from(t.attributes).forEach(e=>{n.setAttribute(e.name,e.value)}),i.appendChild(n)}function I(){const e=(()=>{var e;const t=((null==(e=document.currentScript)?void 0:e.hasAttribute("data-widget-id"))?document.currentScript:null)||document.querySelector("script[data-widget-id]");if(!t)return null;const r=t.getAttribute("data-container")||`returning-ai-widget-${t.getAttribute("data-widget-id")}`;return document.getElementById(r)})(),t=null==e?void 0:e.querySelector(E);window.ReturningAIWidget={version:"1.0.0",reload:()=>(null==t?void 0:t.reload())??Promise.resolve(),logout:()=>(null==t?void 0:t.logoutPublic())??Promise.resolve(),isAuthenticated:()=>(null==t?void 0:t.isAuthenticated())??!1,getTokenInfo:()=>(null==t?void 0:t.getTokenInfo())??{}}}return"loading"===document.readyState?document.addEventListener("DOMContentLoaded",v):v(),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",I):I(),e.ChannelWidget=w,e.CurrencyWidget=k,e.MilestoneWidget=y,e.SocialWidget=T,e.StoreWidget=p,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});

package/dist/rai-widget.js

@@ -0,0 +1,683 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function storageKey(config) {
+  return `${config.storagePrefix}-${config.widgetId}-auth`;
+}
+function errorSettingsKey(config) {
+  return `${config.storagePrefix}-${config.widgetId}-error-settings`;
+}
+function saveToStorage(config, state) {
+  try {
+    const data = {
+      refreshToken: state.refreshToken,
+      tokenFamily: state.tokenFamily,
+      refreshTokenExpiry: state.refreshTokenExpiry
+    };
+    localStorage.setItem(storageKey(config), JSON.stringify(data));
+  } catch {
+  }
+}
+function loadFromStorage(config, state) {
+  try {
+    const raw = localStorage.getItem(storageKey(config));
+    if (!raw) return false;
+    const parsed = JSON.parse(raw);
+    if (parsed.refreshToken && !isTokenExpired(parsed.refreshTokenExpiry)) {
+      state.refreshToken = parsed.refreshToken;
+      state.tokenFamily = parsed.tokenFamily;
+      state.refreshTokenExpiry = parsed.refreshTokenExpiry;
+      return true;
+    }
+    clearStorage(config);
+    return false;
+  } catch {
+    return false;
+  }
+}
+function clearStorage(config) {
+  try {
+    localStorage.removeItem(storageKey(config));
+  } catch {
+  }
+}
+function loadErrorSettingsFromStorage(config) {
+  const ERROR_SETTINGS_CACHE_TTL = 36e5;
+  try {
+    const raw = localStorage.getItem(errorSettingsKey(config));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed.cachedAt && Date.now() - parsed.cachedAt < ERROR_SETTINGS_CACHE_TTL) {
+      return parsed;
+    }
+    localStorage.removeItem(errorSettingsKey(config));
+    return null;
+  } catch {
+    return null;
+  }
+}
+function saveErrorSettingsToStorage(config, settings) {
+  try {
+    localStorage.setItem(errorSettingsKey(config), JSON.stringify({ ...settings, cachedAt: Date.now() }));
+  } catch {
+  }
+}
+function isTokenExpired(expiry) {
+  if (!expiry) return true;
+  return Date.now() >= expiry - 6e4;
+}
+function setTokens(config, state, data, onRefreshScheduled) {
+  state.accessToken = data.accessToken;
+  state.refreshToken = data.refreshToken;
+  state.tokenFamily = data.tokenFamily ?? null;
+  const now = Date.now();
+  state.accessTokenExpiry = now + data.accessTokenTTL * 1e3;
+  state.refreshTokenExpiry = now + data.refreshTokenTTL * 1e3;
+  saveToStorage(config, state);
+  if (config.autoRefresh && onRefreshScheduled) {
+    onRefreshScheduled();
+  }
+}
+async function authenticateServerless(config, state, onRefreshScheduled) {
+  const nonce = crypto.randomUUID();
+  const timestamp = Date.now();
+  try {
+    const response = await fetch(`${config.apiUrl}/${config.widgetId}/auth/serverless`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        nonce,
+        timestamp,
+        widgetType: config.widgetType,
+        userIdentifiers: config.userIdentifiers
+      }),
+      credentials: "include"
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Authentication failed" }));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data.accessToken || !data.refreshToken) {
+      throw new Error("Invalid authentication response");
+    }
+    setTokens(config, state, data, onRefreshScheduled);
+    state.isAuthenticated = true;
+    return true;
+  } catch {
+    state.isAuthenticated = false;
+    return false;
+  }
+}
+async function refreshAccessToken(config, state, onRefreshScheduled, sendToken) {
+  if (state.isRefreshing) {
+    return state.refreshPromise;
+  }
+  if (!state.refreshToken) {
+    return false;
+  }
+  state.isRefreshing = true;
+  state.refreshPromise = (async () => {
+    try {
+      const response = await fetch(`${config.apiUrl}/${config.widgetId}/auth/refresh`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${state.refreshToken}`
+        },
+        body: JSON.stringify({ widgetType: config.widgetType })
+      });
+      if (!response.ok) {
+        if (response.status === 401 || response.status === 403) {
+          clearState(state);
+          clearStorage(config);
+          return authenticateServerless(config, state, onRefreshScheduled);
+        }
+        const error = await response.json().catch(() => ({ error: "Token refresh failed" }));
+        throw new Error(error.error || `HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      if (!data.accessToken || !data.refreshToken) {
+        throw new Error("Invalid refresh response");
+      }
+      setTokens(config, state, data, onRefreshScheduled);
+      if (sendToken) sendToken();
+      return true;
+    } catch {
+      clearState(state);
+      clearStorage(config);
+      return authenticateServerless(config, state, onRefreshScheduled);
+    } finally {
+      state.isRefreshing = false;
+      state.refreshPromise = null;
+    }
+  })();
+  return state.refreshPromise;
+}
+async function getValidToken(config, state, onRefreshScheduled) {
+  if (state.accessToken && !isTokenExpired(state.accessTokenExpiry)) {
+    return state.accessToken;
+  }
+  const refreshed = await refreshAccessToken(config, state, onRefreshScheduled);
+  if (refreshed && state.accessToken) return state.accessToken;
+  const authed = await authenticateServerless(config, state, onRefreshScheduled);
+  if (authed && state.accessToken) return state.accessToken;
+  throw new Error("Unable to obtain valid token");
+}
+async function logout(config, state) {
+  if (state.accessToken) {
+    try {
+      await fetch(`${config.apiUrl}/${config.widgetId}/auth/logout`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${state.accessToken}`
+        },
+        body: JSON.stringify({ refreshToken: state.refreshToken })
+      });
+    } catch {
+    }
+  }
+  clearState(state);
+  clearStorage(config);
+}
+async function fetchErrorSettings(config, state) {
+  const cached = loadErrorSettingsFromStorage(config);
+  if (cached) {
+    if (cached.configured) {
+      state.errorSettings = {
+        errorMessage: cached.errorMessage,
+        modalColor: cached.modalColor,
+        backgroundImage: cached.backgroundImage
+      };
+    }
+    return state.errorSettings;
+  }
+  try {
+    const response = await fetch(
+      `${config.apiUrl}/${config.widgetId}/auth/error-settings?widgetType=${config.widgetType}`,
+      { method: "GET", headers: { "Content-Type": "application/json" } }
+    );
+    if (!response.ok) return null;
+    const data = await response.json();
+    saveErrorSettingsToStorage(config, data);
+    if (data.configured) {
+      state.errorSettings = {
+        errorMessage: data.errorMessage,
+        modalColor: data.modalColor,
+        backgroundImage: data.backgroundImage
+      };
+    }
+    return state.errorSettings;
+  } catch {
+    return null;
+  }
+}
+function clearState(state) {
+  state.accessToken = null;
+  state.refreshToken = null;
+  state.tokenFamily = null;
+  state.accessTokenExpiry = null;
+  state.refreshTokenExpiry = null;
+  state.isAuthenticated = false;
+  state.isRefreshing = false;
+  state.refreshPromise = null;
+  if (state.refreshTimer) {
+    clearTimeout(state.refreshTimer);
+    state.refreshTimer = null;
+  }
+  if (state.syncTimer) {
+    clearInterval(state.syncTimer);
+    state.syncTimer = null;
+  }
+}
+function sendTokenToWidget(config, state, iframe) {
+  var _a;
+  if (!state.accessToken) return;
+  try {
+    (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
+      {
+        type: "RETURNINGAI_WIDGET_TOKEN",
+        value: {
+          widgetId: config.widgetId,
+          token: state.accessToken
+        }
+      },
+      config.widgetDomain
+    );
+  } catch {
+  }
+}
+function setupMessageListener(config, state, _shadow, iframe, onRefreshScheduled, onLogout, hideLoader) {
+  const handler = async (event) => {
+    var _a;
+    if (event.origin !== config.widgetDomain) return;
+    if (!event.data || typeof event.data.type !== "string") return;
+    const { type, containerId, widgetId, payload } = event.data;
+    switch (type) {
+      case "RETURNINGAI_WIDGET_REQUEST_TOKEN": {
+        try {
+          const token = await getValidToken(config, state, onRefreshScheduled);
+          (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
+            {
+              type: "RETURNINGAI_WIDGET_TOKEN",
+              value: { token, widgetId: config.widgetId }
+            },
+            config.widgetDomain
+          );
+        } catch {
+        }
+        break;
+      }
+      case "WIDGET_HEIGHT_UPDATE": {
+        const h = Number(payload == null ? void 0 : payload.height);
+        if (Number.isFinite(h) && h > 0) {
+          iframe.style.height = `${h}px`;
+        }
+        break;
+      }
+      case "WIDGET_READY": {
+        if (widgetId !== void 0 && widgetId !== config.widgetId) break;
+        if (containerId !== void 0 && containerId !== config.container) break;
+        iframe.classList.add("loaded");
+        if (hideLoader) hideLoader();
+        break;
+      }
+      case "WIDGET_ERROR": {
+        if (hideLoader) hideLoader();
+        break;
+      }
+      case "WIDGET_LOGOUT": {
+        if (onLogout) await onLogout();
+        break;
+      }
+    }
+  };
+  window.addEventListener("message", handler);
+  return () => window.removeEventListener("message", handler);
+}
+const widgetCSS = ":host{display:block;position:relative;width:100%;height:100%}.rai-loader{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--rai-loader-bg, #ffffff);border-radius:8px;z-index:10;transition:opacity .3s ease-out}.rai-loader.fade-out{opacity:0;pointer-events:none}.rai-error{display:none;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--rai-error-bg, #1a1a1a);border-radius:8px;padding:24px;box-sizing:border-box;text-align:center;color:var(--rai-error-text, #9ca3af);font-family:system-ui,-apple-system,sans-serif;z-index:10}.rai-error.visible{display:flex}iframe{display:block;border:none;opacity:0;transition:opacity .3s ease-in}iframe.loaded{opacity:1}.loader{position:relative;width:75px;height:100px}.loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:var(--rai-accent, #000000);transform-origin:center bottom;box-shadow:1px 1px #0003}.loader__bar:nth-child(1){left:0;transform:scaleY(.2);animation:barUp1 4s infinite}.loader__bar:nth-child(2){left:15px;transform:scaleY(.4);animation:barUp2 4s infinite}.loader__bar:nth-child(3){left:30px;transform:scaleY(.6);animation:barUp3 4s infinite}.loader__bar:nth-child(4){left:45px;transform:scaleY(.8);animation:barUp4 4s infinite}.loader__bar:nth-child(5){left:60px;transform:scale(1);animation:barUp5 4s infinite}.loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:var(--rai-accent, #000000);border-radius:50%;animation:ball 4s infinite}@keyframes ball{0%{transform:translate(0)}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px)}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translateY(-40px)}to{transform:translate(0)}}@keyframes barUp1{0%{transform:scaleY(.2)}40%{transform:scaleY(.2)}50%{transform:scale(1)}90%{transform:scale(1)}to{transform:scaleY(.2)}}@keyframes barUp2{0%{transform:scaleY(.4)}40%{transform:scaleY(.4)}50%{transform:scaleY(.8)}90%{transform:scaleY(.8)}to{transform:scaleY(.4)}}@keyframes barUp3{0%{transform:scaleY(.6)}to{transform:scaleY(.6)}}@keyframes barUp4{0%{transform:scaleY(.8)}40%{transform:scaleY(.8)}50%{transform:scaleY(.4)}90%{transform:scaleY(.4)}to{transform:scaleY(.8)}}@keyframes barUp5{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scaleY(.2)}90%{transform:scaleY(.2)}to{transform:scale(1)}}#loading-square{width:75px;aspect-ratio:1;display:flex;color:var(--rai-accent, #000000);background:linear-gradient(currentColor 0 0) right / 51% 100%,linear-gradient(currentColor 0 0) bottom / 100% 51%;background-repeat:no-repeat;animation:l16-0 2s infinite linear .25s}#loading-square>div{width:50%;height:50%;background:currentColor;animation:l16-1 .5s infinite linear}@keyframes l16-0{0%,12.49%{transform:rotate(0)}12.5%,37.49%{transform:rotate(90deg)}37.5%,62.49%{transform:rotate(180deg)}62.5%,87.49%{transform:rotate(270deg)}87.5%,to{transform:rotate(360deg)}}@keyframes l16-1{0%{transform:perspective(80px) rotate3d(-1,-1,0,0)}80%,to{transform:perspective(80px) rotate3d(-1,-1,0,-180deg)}}#loading-circle{width:75px;aspect-ratio:1;display:grid;grid:50%/50%;color:var(--rai-accent, #000000);border-radius:50%;--_g: no-repeat linear-gradient(currentColor 0 0);background:var(--_g),var(--_g),var(--_g);background-size:50.1% 50.1%;animation:l9-0 1.5s infinite steps(1) alternate,l9-0-0 3s infinite steps(1) alternate}#loading-circle>div{background:var(--rai-text4, #6b7280);border-top-left-radius:100px;transform:perspective(150px) rotateY(0) rotateX(0);transform-origin:bottom right;animation:l9-1 1.5s infinite linear alternate}@keyframes l9-0{0%{background-position:0 100%,100% 100%,100% 0}33%{background-position:100% 100%,100% 100%,100% 0}66%{background-position:100% 0,100% 0,100% 0}}@keyframes l9-0-0{0%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(-1) rotate(-90deg)}}@keyframes l9-1{16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0) rotateX(0);filter:grayscale(.8)}33%{transform:perspective(150px) rotateX(-180deg) rotateY(0) rotateX(0)}66%{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0)}to{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(.8)}}";
+const DEFINED_ATTRS = /* @__PURE__ */ new Set([
+  "widget-id",
+  "widget-type",
+  "theme",
+  "container",
+  "width",
+  "height",
+  "api-url",
+  "widget-url",
+  "auto-refresh",
+  "debug"
+]);
+function readConfig(el, existingId) {
+  const get = (name) => el.getAttribute(name) ?? el.getAttribute(`data-${name}`) ?? "";
+  const rawWidgetUrl = get("widget-url") || "https://widget.returningai.com";
+  let widgetUrl = rawWidgetUrl;
+  if (widgetUrl.endsWith("store-widget")) {
+    widgetUrl = `${widgetUrl}/${get("widget-id")}/open-widget`;
+  }
+  let widgetDomain;
+  try {
+    widgetDomain = new URL(widgetUrl).origin;
+  } catch {
+    widgetDomain = widgetUrl;
+  }
+  if (widgetUrl.includes("store-widget")) {
+    const u = new URL(widgetUrl);
+    u.searchParams.set("color", get("theme") || "light");
+    widgetUrl = u.toString();
+  }
+  const widgetId = get("widget-id") || existingId || "";
+  const container = get("container") || get("data-container") || `returning-ai-widget-${widgetId}`;
+  const userIdentifiers = {};
+  Array.from(el.attributes).forEach((attr) => {
+    const name = attr.name.toLowerCase();
+    if (!name.startsWith("data-")) return;
+    const bare = name.slice(5);
+    if (!DEFINED_ATTRS.has(bare)) {
+      userIdentifiers[name] = attr.value;
+    }
+  });
+  return {
+    widgetId,
+    widgetType: get("widget-type") || "store",
+    theme: get("theme") || "light",
+    container,
+    width: get("width") || "100%",
+    height: get("height") || "600px",
+    apiUrl: get("api-url") || "https://sgtr-eks-widgets.genesiv.org",
+    widgetUrl,
+    widgetDomain,
+    autoRefresh: get("auto-refresh") !== "false",
+    debug: get("debug") === "true",
+    storagePrefix: "returning-ai-widget",
+    userIdentifiers
+  };
+}
+function createInitialState() {
+  return {
+    accessToken: null,
+    refreshToken: null,
+    tokenFamily: null,
+    accessTokenExpiry: null,
+    refreshTokenExpiry: null,
+    refreshTimer: null,
+    syncTimer: null,
+    iframe: null,
+    isAuthenticated: false,
+    isRefreshing: false,
+    refreshPromise: null,
+    errorSettings: null
+  };
+}
+class BaseWidget extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "shadow");
+    __publicField(this, "config");
+    __publicField(this, "state", createInitialState());
+    __publicField(this, "loaderEl", null);
+    __publicField(this, "errorEl", null);
+    __publicField(this, "cleanupListener");
+    this.shadow = this.attachShadow({ mode: "closed" });
+  }
+  connectedCallback() {
+    this.config = readConfig(this, void 0);
+    const style = document.createElement("style");
+    style.textContent = widgetCSS;
+    this.shadow.appendChild(style);
+    const theme = this.config.theme;
+    const accentColor = theme === "dark" ? "#ffffff" : "#000000";
+    const text4Color = theme === "dark" ? "#9ca3af" : "#6b7280";
+    const bgColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
+    this.style.setProperty("--rai-accent", accentColor);
+    this.style.setProperty("--rai-text4", text4Color);
+    this.style.setProperty("--rai-loader-bg", bgColor);
+    this.style.setProperty("--rai-error-bg", bgColor);
+    this.renderShell();
+    this.init();
+  }
+  disconnectedCallback() {
+    if (this.cleanupListener) this.cleanupListener();
+    clearState(this.state);
+  }
+  // ── Rendering ─────────────────────────────────────────────────────────
+  renderShell() {
+    this.loaderEl = document.createElement("div");
+    this.loaderEl.className = "rai-loader";
+    this.loaderEl.appendChild(this.createDefaultLoader());
+    this.shadow.appendChild(this.loaderEl);
+    this.errorEl = document.createElement("div");
+    this.errorEl.className = "rai-error";
+    this.errorEl.textContent = "Authentication failed. Please try again later.";
+    this.shadow.appendChild(this.errorEl);
+  }
+  createDefaultLoader() {
+    const loader = document.createElement("div");
+    loader.className = "loader";
+    for (let i = 0; i < 5; i++) {
+      const bar = document.createElement("div");
+      bar.className = "loader__bar";
+      loader.appendChild(bar);
+    }
+    const ball = document.createElement("div");
+    ball.className = "loader__ball";
+    loader.appendChild(ball);
+    return loader;
+  }
+  hideLoader() {
+    if (!this.loaderEl) return;
+    this.loaderEl.classList.add("fade-out");
+    setTimeout(() => {
+      var _a;
+      return (_a = this.loaderEl) == null ? void 0 : _a.remove();
+    }, 300);
+    this.loaderEl = null;
+  }
+  showError() {
+    var _a;
+    this.hideLoader();
+    if (this.errorEl) {
+      if ((_a = this.state.errorSettings) == null ? void 0 : _a.errorMessage) {
+        this.errorEl.textContent = this.state.errorSettings.errorMessage;
+      }
+      this.errorEl.classList.add("visible");
+    }
+  }
+  // ── Initialization ─────────────────────────────────────────────────────
+  async init() {
+    if (!this.config.widgetId) {
+      this.showError();
+      return;
+    }
+    await fetchErrorSettings(this.config, this.state);
+    const hasStored = loadFromStorage(this.config, this.state);
+    if (hasStored) {
+      const refreshed = await refreshAccessToken(
+        this.config,
+        this.state,
+        () => this.scheduleRefresh()
+      );
+      if (!refreshed) {
+        this.showError();
+        return;
+      }
+      this.state.isAuthenticated = true;
+      this.createIframe();
+      return;
+    }
+    const authed = await authenticateServerless(
+      this.config,
+      this.state,
+      () => this.scheduleRefresh()
+    );
+    if (authed) {
+      this.createIframe();
+    } else {
+      this.showError();
+    }
+  }
+  createIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.src = this.buildWidgetUrl(this.config);
+    iframe.allow = "clipboard-write";
+    iframe.frameBorder = "0";
+    iframe.scrolling = "no";
+    iframe.style.cssText = `width: ${this.config.width}; height: ${this.config.height}; border: none; display: block;`;
+    iframe.onload = () => {
+      sendTokenToWidget(this.config, this.state, iframe);
+      this.schedulePeriodicSync(iframe);
+    };
+    iframe.onerror = () => {
+      this.showError();
+    };
+    this.state.iframe = iframe;
+    this.shadow.appendChild(iframe);
+    this.cleanupListener = setupMessageListener(
+      this.config,
+      this.state,
+      this.shadow,
+      iframe,
+      () => this.scheduleRefresh(),
+      () => this.logoutAndClear(),
+      () => this.hideLoader()
+    );
+  }
+  // ── Token scheduling ──────────────────────────────────────────────────
+  scheduleRefresh() {
+    if (this.state.refreshTimer) clearTimeout(this.state.refreshTimer);
+    if (!this.state.accessTokenExpiry) return;
+    const delay = this.state.accessTokenExpiry - Date.now() - 6e4;
+    if (delay > 0) {
+      this.state.refreshTimer = setTimeout(async () => {
+        await refreshAccessToken(
+          this.config,
+          this.state,
+          () => this.scheduleRefresh(),
+          () => {
+            if (this.state.iframe) sendTokenToWidget(this.config, this.state, this.state.iframe);
+          }
+        );
+      }, delay);
+    } else {
+      refreshAccessToken(
+        this.config,
+        this.state,
+        () => this.scheduleRefresh(),
+        () => {
+          if (this.state.iframe) sendTokenToWidget(this.config, this.state, this.state.iframe);
+        }
+      );
+    }
+  }
+  schedulePeriodicSync(iframe) {
+    if (this.state.syncTimer) clearInterval(this.state.syncTimer);
+    this.state.syncTimer = setInterval(() => {
+      if (this.state.accessToken) sendTokenToWidget(this.config, this.state, iframe);
+    }, 12e4);
+  }
+  // ── Logout helper ─────────────────────────────────────────────────────
+  async logoutAndClear() {
+    await logout(this.config, this.state);
+    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+  }
+  // ── Public API ────────────────────────────────────────────────────────
+  async reload() {
+    clearState(this.state);
+    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+    await this.init();
+  }
+  async logoutPublic() {
+    await this.logoutAndClear();
+  }
+  isAuthenticated() {
+    return this.state.isAuthenticated && this.state.accessToken !== null;
+  }
+  getTokenInfo() {
+    return {
+      hasAccessToken: !!this.state.accessToken,
+      hasRefreshToken: !!this.state.refreshToken,
+      accessTokenExpiry: this.state.accessTokenExpiry ? new Date(this.state.accessTokenExpiry) : null,
+      refreshTokenExpiry: this.state.refreshTokenExpiry ? new Date(this.state.refreshTokenExpiry) : null,
+      isAccessTokenValid: !!this.state.accessToken && !isTokenExpired(this.state.accessTokenExpiry),
+      isRefreshTokenValid: !!this.state.refreshToken && !isTokenExpired(this.state.refreshTokenExpiry)
+    };
+  }
+}
+class StoreWidget extends BaseWidget {
+  buildWidgetUrl(config) {
+    const url = new URL(config.widgetUrl);
+    url.searchParams.set("color", config.theme);
+    url.searchParams.set("containerId", config.container);
+    url.searchParams.set("connectType", "simple");
+    url.searchParams.set("mode", "private");
+    return url.toString();
+  }
+}
+class ChannelWidget extends BaseWidget {
+  buildWidgetUrl(config) {
+    if (config.widgetUrl.endsWith("channel-widget")) {
+      return `${config.widgetUrl}/${config.widgetId}`;
+    }
+    return config.widgetUrl;
+  }
+}
+class MilestoneWidget extends BaseWidget {
+  buildWidgetUrl(config) {
+    if (config.widgetUrl.endsWith("milestone-widget")) {
+      return `${config.widgetUrl}/${config.widgetId}`;
+    }
+    return config.widgetUrl;
+  }
+}
+class SocialWidget extends BaseWidget {
+  buildWidgetUrl(config) {
+    if (config.widgetUrl.endsWith("social-widget")) {
+      return `${config.widgetUrl}/${config.widgetId}`;
+    }
+    return config.widgetUrl;
+  }
+}
+class CurrencyWidget extends BaseWidget {
+  buildWidgetUrl(config) {
+    if (config.widgetUrl.endsWith("currency-overview-widget")) {
+      return `${config.widgetUrl}/${config.widgetId}`;
+    }
+    return config.widgetUrl;
+  }
+}
+console.log(`[rai-widget] v${"1.0.0"}`);
+const WIDGET_REGISTRY = [
+  ["rai-widget", StoreWidget],
+  ["rai-channel-widget", ChannelWidget],
+  ["rai-milestone-widget", MilestoneWidget],
+  ["rai-social-widget", SocialWidget],
+  ["rai-currency-widget", CurrencyWidget]
+];
+for (const [tag, cls] of WIDGET_REGISTRY) {
+  if (!customElements.get(tag)) {
+    customElements.define(tag, cls);
+  }
+}
+const WIDGET_CLASS_MAP = {
+  store: StoreWidget,
+  channel: ChannelWidget,
+  milestone: MilestoneWidget,
+  social: SocialWidget,
+  "currency-view": CurrencyWidget
+};
+const ALL_WIDGET_SELECTOR = WIDGET_REGISTRY.map(([tag]) => tag).join(", ");
+function bootstrapFromScriptTag() {
+  var _a;
+  const script = (((_a = document.currentScript) == null ? void 0 : _a.hasAttribute("data-widget-id")) ? document.currentScript : null) || document.querySelector("script[data-widget-id]");
+  if (!script) return;
+  const widgetId = script.getAttribute("data-widget-id");
+  if (!widgetId) return;
+  const containerId = script.getAttribute("data-container") || `returning-ai-widget-${widgetId}`;
+  const container = document.getElementById(containerId);
+  if (!container) return;
+  if (getComputedStyle(container).position === "static") {
+    container.style.position = "relative";
+  }
+  const widgetType = script.getAttribute("data-widget-type") ?? "store";
+  const WidgetClass = WIDGET_CLASS_MAP[widgetType] ?? StoreWidget;
+  const widget = new WidgetClass();
+  Array.from(script.attributes).forEach((attr) => {
+    widget.setAttribute(attr.name, attr.value);
+  });
+  container.appendChild(widget);
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", bootstrapFromScriptTag);
+} else {
+  bootstrapFromScriptTag();
+}
+function exposePublicApi() {
+  const container = (() => {
+    var _a;
+    const script = (((_a = document.currentScript) == null ? void 0 : _a.hasAttribute("data-widget-id")) ? document.currentScript : null) || document.querySelector("script[data-widget-id]");
+    if (!script) return null;
+    const id = script.getAttribute("data-container") || `returning-ai-widget-${script.getAttribute("data-widget-id")}`;
+    return document.getElementById(id);
+  })();
+  const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
+  window.ReturningAIWidget = {
+    version: "1.0.0",
+    reload: () => (widget == null ? void 0 : widget.reload()) ?? Promise.resolve(),
+    logout: () => (widget == null ? void 0 : widget.logoutPublic()) ?? Promise.resolve(),
+    isAuthenticated: () => (widget == null ? void 0 : widget.isAuthenticated()) ?? false,
+    getTokenInfo: () => (widget == null ? void 0 : widget.getTokenInfo()) ?? {}
+  };
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", exposePublicApi);
+} else {
+  exposePublicApi();
+}
+export {
+  ChannelWidget,
+  CurrencyWidget,
+  MilestoneWidget,
+  SocialWidget,
+  StoreWidget
+};

package/dist/types/BaseWidget.d.ts

@@ -0,0 +1,34 @@
+import type { WidgetConfig } from './types';
+export declare function readConfig(el: Element, existingId?: string): WidgetConfig;
+export declare abstract class BaseWidget extends HTMLElement {
+    protected shadow: ShadowRoot;
+    protected config: WidgetConfig;
+    private state;
+    private loaderEl;
+    private errorEl;
+    private cleanupListener?;
+    constructor();
+    protected abstract buildWidgetUrl(config: WidgetConfig): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderShell;
+    private createDefaultLoader;
+    private hideLoader;
+    private showError;
+    private init;
+    private createIframe;
+    private scheduleRefresh;
+    private schedulePeriodicSync;
+    private logoutAndClear;
+    reload(): Promise<void>;
+    logoutPublic(): Promise<void>;
+    isAuthenticated(): boolean;
+    getTokenInfo(): {
+        hasAccessToken: boolean;
+        hasRefreshToken: boolean;
+        accessTokenExpiry: Date | null;
+        refreshTokenExpiry: Date | null;
+        isAccessTokenValid: boolean;
+        isRefreshTokenValid: boolean;
+    };
+}

package/dist/types/ChannelWidget.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from './types';
+import { BaseWidget } from './BaseWidget';
+export declare class ChannelWidget extends BaseWidget {
+    protected buildWidgetUrl(config: WidgetConfig): string;
+}

package/dist/types/CurrencyWidget.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from './types';
+import { BaseWidget } from './BaseWidget';
+export declare class CurrencyWidget extends BaseWidget {
+    protected buildWidgetUrl(config: WidgetConfig): string;
+}

package/dist/types/MilestoneWidget.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from './types';
+import { BaseWidget } from './BaseWidget';
+export declare class MilestoneWidget extends BaseWidget {
+    protected buildWidgetUrl(config: WidgetConfig): string;
+}

package/dist/types/SocialWidget.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from './types';
+import { BaseWidget } from './BaseWidget';
+export declare class SocialWidget extends BaseWidget {
+    protected buildWidgetUrl(config: WidgetConfig): string;
+}

package/dist/types/StoreWidget.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from './types';
+import { BaseWidget } from './BaseWidget';
+export declare class StoreWidget extends BaseWidget {
+    protected buildWidgetUrl(config: WidgetConfig): string;
+}

package/dist/types/core/auth.d.ts

@@ -0,0 +1,8 @@
+import type { WidgetConfig, WidgetState } from '../types';
+export declare function authenticateServerless(config: WidgetConfig, state: WidgetState, onRefreshScheduled?: () => void): Promise<boolean>;
+export declare function refreshAccessToken(config: WidgetConfig, state: WidgetState, onRefreshScheduled?: () => void, sendToken?: () => void): Promise<boolean>;
+export declare function getValidToken(config: WidgetConfig, state: WidgetState, onRefreshScheduled?: () => void): Promise<string>;
+export declare function logout(config: WidgetConfig, state: WidgetState): Promise<void>;
+export declare function fetchErrorSettings(config: WidgetConfig, state: WidgetState): Promise<typeof state.errorSettings>;
+declare function clearState(state: WidgetState): void;
+export { clearState };

package/dist/types/core/postmessage.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetConfig, WidgetState } from '../types';
+export declare function sendTokenToWidget(config: WidgetConfig, state: WidgetState, iframe: HTMLIFrameElement): void;
+export declare function setupMessageListener(config: WidgetConfig, state: WidgetState, _shadow: ShadowRoot, iframe: HTMLIFrameElement, onRefreshScheduled?: () => void, onLogout?: () => Promise<void>, hideLoader?: () => void): () => void;

package/dist/types/core/storage.d.ts

@@ -0,0 +1,8 @@
+import type { WidgetConfig, WidgetState } from '../types';
+export declare function saveToStorage(config: WidgetConfig, state: WidgetState): void;
+export declare function loadFromStorage(config: WidgetConfig, state: WidgetState): boolean;
+export declare function clearStorage(config: WidgetConfig): void;
+export declare function loadErrorSettingsFromStorage(config: WidgetConfig): Record<string, unknown> | null;
+export declare function saveErrorSettingsToStorage(config: WidgetConfig, settings: Record<string, unknown>): void;
+declare function isTokenExpired(expiry: number | null): boolean;
+export { isTokenExpired };

package/dist/types/index.d.ts

@@ -0,0 +1,17 @@
+import { StoreWidget } from './StoreWidget';
+import { ChannelWidget } from './ChannelWidget';
+import { MilestoneWidget } from './MilestoneWidget';
+import { SocialWidget } from './SocialWidget';
+import { CurrencyWidget } from './CurrencyWidget';
+declare global {
+    interface Window {
+        ReturningAIWidget: {
+            version: string;
+            reload: () => Promise<void>;
+            logout: () => Promise<void>;
+            isAuthenticated: () => boolean;
+            getTokenInfo: () => object;
+        };
+    }
+}
+export { StoreWidget, ChannelWidget, MilestoneWidget, SocialWidget, CurrencyWidget };

package/dist/types/types.d.ts

@@ -0,0 +1,40 @@
+export interface WidgetConfig {
+    widgetId: string;
+    widgetType: 'store' | 'channel' | 'milestone' | 'social' | 'currency-view';
+    theme: 'light' | 'dark';
+    container: string;
+    width: string;
+    height: string;
+    apiUrl: string;
+    widgetUrl: string;
+    widgetDomain: string;
+    autoRefresh: boolean;
+    debug: boolean;
+    storagePrefix: string;
+    userIdentifiers: Record<string, string>;
+}
+export interface WidgetState {
+    accessToken: string | null;
+    refreshToken: string | null;
+    tokenFamily: string | null;
+    accessTokenExpiry: number | null;
+    refreshTokenExpiry: number | null;
+    refreshTimer: ReturnType<typeof setTimeout> | null;
+    syncTimer: ReturnType<typeof setInterval> | null;
+    iframe: HTMLIFrameElement | null;
+    isAuthenticated: boolean;
+    isRefreshing: boolean;
+    refreshPromise: Promise<boolean> | null;
+    errorSettings: {
+        errorMessage?: string;
+        modalColor?: string;
+        backgroundImage?: string;
+    } | null;
+}
+export interface TokenData {
+    accessToken: string;
+    refreshToken: string;
+    tokenFamily?: string;
+    accessTokenTTL: number;
+    refreshTokenTTL: number;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@returningai/widget-sdk",
+  "version": "1.0.0",
+  "description": "Shadow DOM isolated widget SDK for ReturningAI",
+  "main": "dist/rai-widget.iife.js",
+  "module": "dist/rai-widget.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "import": "./dist/rai-widget.js",
+      "default": "./dist/rai-widget.iife.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:min": "vite build --mode production",
+    "types": "tsc --emitDeclarationOnly --outDir dist/types",
+    "prepublishOnly": "npm run build:min && npm run types"
+  },
+  "devDependencies": {
+    "terser": "^5.46.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0"
+  }
+}