@yuno-payments/dashboard-embed-sdk 0.3.0-beta.1 → 0.4.0

package/README.md

@@ -18,12 +18,12 @@ const sdk = initYunoDashboard({
   container: document.getElementById("dashboard")!,
   token: "your-jwt-token",
   theme: {
-    // Simple: flat tokens apply to light mode; dark mode uses design system defaults
-    tokens: { primary: "#134AC3" },
+    // Simple: flat tokens apply to both light mode and dark mode;
+    tokens: { primary: "#134AC3", surface: "#FFFFFF" },
     // Per-mode: full control over both light and dark colors
     // tokens: {
-    //   light: { primary: "#134AC3", background: "#FFFFFF" },
-    //   dark: { primary: "#5B7BFF", background: "#0A0A0A" },
+    //   light: { primary: "#134AC3", surface: "#FFFFFF" },
+    //   dark: { primary: "#5B7BFF", surface: "#0A0A0A" },
     // },
     typography: {
       fontFamily: "'Inter', sans-serif",
@@ -61,7 +61,7 @@ const sdk = getYunoDashboard();
 destroyYunoDashboard();
 ```
 
-### `new YunoDashboard(config)` / `initYunoDashboard(config)`
+### `initYunoDashboard(config)`
 
 | Option | Type | Required | Description |
 |---|---|---|---|
@@ -72,6 +72,7 @@ destroyYunoDashboard();
 | `lang` | `string` | No | Language code (default: `"en"`) |
 | `path` | `string` | No | Initial navigation path (default: `"/"`) |
 | `onReady` | `() => void` | No | Callback invoked when the dashboard is fully loaded and authenticated |
+| `onSessionExpired` | `() => void` | No | Callback invoked when the embedded session has expired. The host should re-authenticate and call `setToken(newToken)` to resume. |
 | `loading` | `HTMLElement` | No | Custom loading overlay element. If omitted, a default spinner is shown |
 
 ### Methods
@@ -129,6 +130,33 @@ interface DashboardTheme {
 }
 ```
 
+## Session timeouts
+
+By default, sessions issued by `POST /v1/external/authenticate` are valid for 24 hours.
+You can issue a shorter session by passing `timeout_seconds` (between 60 and 86400):
+
+```bash
+curl -X POST https://api.y.uno/v1/external/authenticate \
+  -H "x-organization-code: <your-org-uuid>" \
+  -H "Content-Type: application/json" \
+  -d '{"user_id":"<user-uuid>", "timeout_seconds": 1800}'
+```
+
+When the embedded session expires, the iframe paints a "Session expired" overlay
+and emits a message to the host. Subscribe via `onSessionExpired`:
+
+```ts
+const sdk = initYunoDashboard({
+  baseUrl: "https://dashboard.y.uno",
+  container: document.getElementById("dashboard")!,
+  token: initialToken,
+  onSessionExpired: async () => {
+    const newToken = await myBackend.requestEmbedToken({ timeout_seconds: 1800 })
+    sdk.setToken(newToken)
+  },
+})
+```
+
 ## Loading overlay
 
 A loading overlay covers the iframe while initialization completes. You can provide a custom element via the `loading` config option, or the SDK renders a default spinner. The overlay fades out automatically (300ms transition) once the dashboard is authenticated and ready.

package/dist/index.d.ts

@@ -45,6 +45,7 @@ interface YunoDashboardConfig {
     lang?: string;
     path?: string;
     onReady?: () => void;
+    onSessionExpired?: () => void | Promise<void>;
     loading?: HTMLElement;
 }
 
@@ -61,6 +62,7 @@ declare class YunoDashboard {
     private initialPath;
     private token?;
     private onReadyCallback?;
+    private onSessionExpiredCallback?;
     constructor(config: YunoDashboardConfig);
     setTheme(theme: DashboardTheme): void;
     setLang(lang: string): void;

package/dist/index.js

@@ -10,6 +10,7 @@ var YunoDashboard = class {
     this.initialPath = config.path ?? "/";
     this.token = config.token;
     this.onReadyCallback = config.onReady;
+    this.onSessionExpiredCallback = config.onSessionExpired;
     this.wrapper = document.createElement("div");
     this.wrapper.style.position = "relative";
     this.wrapper.style.width = "100%";
@@ -28,6 +29,22 @@ var YunoDashboard = class {
     this.wrapper.appendChild(this.overlay);
     this.messageHandler = (e) => {
       if (e.origin !== this.baseUrl) return;
+      if (e.data?.type === "yuno-dashboard:session-expired") {
+        try {
+          const result = this.onSessionExpiredCallback?.();
+          if (result && typeof result.catch === "function") {
+            result.catch(
+              (err) => (
+                // eslint-disable-next-line no-console
+                console.warn("[yuno-dashboard-sdk] onSessionExpired async callback rejected", err)
+              )
+            );
+          }
+        } catch (err) {
+          console.warn("[yuno-dashboard-sdk] onSessionExpired callback threw", err);
+        }
+        return;
+      }
       if (e.data?.action === "ready") {
         this.onReady();
       }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/yuno-dashboard.ts","../src/singleton.ts"],"sourcesContent":["import type { DashboardTheme, YunoDashboardConfig } from \"./types\";\n\nexport class YunoDashboard {\n  private iframe: HTMLIFrameElement;\n  private wrapper: HTMLDivElement;\n  private overlay: HTMLElement | null = null;\n  private baseUrl: string;\n  private ready = false;\n  private queue: Record<string, unknown>[] = [];\n  private messageHandler: (e: MessageEvent) => void;\n  private initialTheme?: DashboardTheme;\n  private initialLang?: string;\n  private initialPath: string;\n  private token?: string;\n  private onReadyCallback?: () => void;\n\n  constructor(config: YunoDashboardConfig) {\n    this.baseUrl = config.baseUrl;\n    this.initialTheme = config.theme;\n    this.initialLang = config.lang;\n    this.initialPath = config.path ?? \"/\";\n    this.token = config.token;\n    this.onReadyCallback = config.onReady;\n\n    this.wrapper = document.createElement(\"div\");\n    this.wrapper.style.position = \"relative\";\n    this.wrapper.style.width = \"100%\";\n    this.wrapper.style.height = \"100%\";\n\n    this.iframe = document.createElement(\"iframe\");\n    this.iframe.style.width = \"100%\";\n    this.iframe.style.height = \"100%\";\n    this.iframe.style.border = \"none\";\n    this.iframe.title = \"Yuno Dashboard\";\n    this.iframe.src = this.buildSrc();\n\n    this.wrapper.appendChild(this.iframe);\n\n    this.overlay = config.loading instanceof HTMLElement\n      ? config.loading\n      : this.createDefaultOverlay();\n    this.overlay.style.position = \"absolute\";\n    this.overlay.style.inset = \"0\";\n    this.overlay.style.zIndex = \"1\";\n    this.wrapper.appendChild(this.overlay);\n\n    this.messageHandler = (e: MessageEvent) => {\n      if (e.origin !== this.baseUrl) return;\n      if (e.data?.action === \"ready\") {\n        this.onReady();\n      }\n      if (e.data?.action === \"tokenApplied\") {\n        this.onTokenApplied();\n      }\n    };\n    window.addEventListener(\"message\", this.messageHandler);\n\n    config.container.appendChild(this.wrapper);\n  }\n\n  setTheme(theme: DashboardTheme): void {\n    if (theme.tokens || theme.typography) {\n      const themePayload: Record<string, unknown> = {};\n      if (theme.tokens) themePayload.colors = theme.tokens;\n      if (theme.typography) themePayload.typography = theme.typography;\n      this.post({ action: \"setTheme\", theme: themePayload });\n    }\n    if (theme.mode) {\n      this.post({ action: \"setMode\", mode: theme.mode });\n    }\n    if (theme.styles !== undefined) {\n      this.post({ action: \"setExternalStyles\", css: theme.styles });\n    }\n  }\n\n  setLang(lang: string): void {\n    this.post({ action: \"setLang\", lang });\n  }\n\n  setToken(token: string): void {\n    this.token = token;\n    this.post({ action: \"setToken\", token });\n  }\n\n  navigate(path: string): void {\n    this.post({ action: \"navigate\", path });\n  }\n\n  destroy(): void {\n    window.removeEventListener(\"message\", this.messageHandler);\n    this.wrapper.remove();\n    this.queue = [];\n    this.ready = false;\n  }\n\n  private post(message: Record<string, unknown>): void {\n    if (this.ready && this.iframe.contentWindow) {\n      this.iframe.contentWindow.postMessage(message, this.baseUrl);\n    } else {\n      this.queue.push(message);\n    }\n  }\n\n  private flush(): void {\n    const pending = this.queue.splice(0);\n    for (const message of pending) {\n      if (this.iframe.contentWindow) {\n        this.iframe.contentWindow.postMessage(message, this.baseUrl);\n      }\n    }\n  }\n\n  private onReady(): void {\n    this.ready = true;\n    if (this.token) {\n      this.post({ action: \"setToken\", token: this.token });\n    }\n    if (this.initialTheme) {\n      this.setTheme(this.initialTheme);\n    }\n    if (this.initialLang) {\n      this.setLang(this.initialLang);\n    }\n    this.flush();\n  }\n\n  private onTokenApplied(): void {\n    setTimeout(() => {\n      if (this.initialPath !== \"/\") {\n        this.post({ action: \"navigate\", path: this.initialPath });\n      }\n      this.hideOverlay();\n      this.onReadyCallback?.();\n    }, 1000);\n  }\n\n  private hideOverlay(): void {\n    if (!this.overlay) return;\n    this.overlay.style.transition = \"opacity 0.3s\";\n    this.overlay.style.opacity = \"0\";\n    setTimeout(() => this.overlay?.remove(), 300);\n  }\n\n  private createDefaultOverlay(): HTMLElement {\n    const overlay = document.createElement(\"div\");\n    overlay.style.background = \"#ffffff\";\n    overlay.style.display = \"flex\";\n    overlay.style.alignItems = \"center\";\n    overlay.style.justifyContent = \"center\";\n\n    const spinner = document.createElement(\"div\");\n    spinner.style.width = \"32px\";\n    spinner.style.height = \"32px\";\n    spinner.style.border = \"3px solid #e0e0e0\";\n    spinner.style.borderTopColor = \"#666\";\n    spinner.style.borderRadius = \"50%\";\n    spinner.style.animation = \"yuno-spin 0.8s linear infinite\";\n\n    const style = document.createElement(\"style\");\n    style.textContent = \"@keyframes yuno-spin { to { transform: rotate(360deg); } }\";\n\n    overlay.appendChild(style);\n    overlay.appendChild(spinner);\n    return overlay;\n  }\n\n  private buildSrc(): string {\n    const params = new URLSearchParams({\n      embed: \"true\",\n      theme: this.initialTheme?.mode ?? \"light\",\n      lang: this.initialLang ?? \"en\",\n    });\n    return `${this.baseUrl}/?${params.toString()}`;\n  }\n}\n","import { YunoDashboard } from \"./yuno-dashboard\";\nimport type { YunoDashboardConfig } from \"./types\";\n\nlet instance: YunoDashboard | null = null;\n\nexport function initYunoDashboard(config: YunoDashboardConfig): YunoDashboard {\n  if (instance) {\n    instance.destroy();\n  }\n  instance = new YunoDashboard(config);\n  return instance;\n}\n\nexport function getYunoDashboard(): YunoDashboard | null {\n  return instance;\n}\n\nexport function destroyYunoDashboard(): void {\n  if (instance) {\n    instance.destroy();\n    instance = null;\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/yuno-dashboard.ts","../src/singleton.ts"],"sourcesContent":["import type { DashboardTheme, YunoDashboardConfig } from \"./types\";\n\nexport class YunoDashboard {\n  private iframe: HTMLIFrameElement;\n  private wrapper: HTMLDivElement;\n  private overlay: HTMLElement | null = null;\n  private baseUrl: string;\n  private ready = false;\n  private queue: Record<string, unknown>[] = [];\n  private messageHandler: (e: MessageEvent) => void;\n  private initialTheme?: DashboardTheme;\n  private initialLang?: string;\n  private initialPath: string;\n  private token?: string;\n  private onReadyCallback?: () => void;\n  private onSessionExpiredCallback?: () => void | Promise<void>;\n\n  constructor(config: YunoDashboardConfig) {\n    this.baseUrl = config.baseUrl;\n    this.initialTheme = config.theme;\n    this.initialLang = config.lang;\n    this.initialPath = config.path ?? \"/\";\n    this.token = config.token;\n    this.onReadyCallback = config.onReady;\n    this.onSessionExpiredCallback = config.onSessionExpired;\n\n    this.wrapper = document.createElement(\"div\");\n    this.wrapper.style.position = \"relative\";\n    this.wrapper.style.width = \"100%\";\n    this.wrapper.style.height = \"100%\";\n\n    this.iframe = document.createElement(\"iframe\");\n    this.iframe.style.width = \"100%\";\n    this.iframe.style.height = \"100%\";\n    this.iframe.style.border = \"none\";\n    this.iframe.title = \"Yuno Dashboard\";\n    this.iframe.src = this.buildSrc();\n\n    this.wrapper.appendChild(this.iframe);\n\n    this.overlay = config.loading instanceof HTMLElement\n      ? config.loading\n      : this.createDefaultOverlay();\n    this.overlay.style.position = \"absolute\";\n    this.overlay.style.inset = \"0\";\n    this.overlay.style.zIndex = \"1\";\n    this.wrapper.appendChild(this.overlay);\n\n    this.messageHandler = (e: MessageEvent) => {\n      if (e.origin !== this.baseUrl) return;\n      if (e.data?.type === \"yuno-dashboard:session-expired\") {\n        try {\n          const result = this.onSessionExpiredCallback?.();\n          if (result && typeof (result as Promise<unknown>).catch === \"function\") {\n            (result as Promise<unknown>).catch((err) =>\n              // eslint-disable-next-line no-console\n              console.warn(\"[yuno-dashboard-sdk] onSessionExpired async callback rejected\", err),\n            );\n          }\n        } catch (err) {\n          // eslint-disable-next-line no-console\n          console.warn(\"[yuno-dashboard-sdk] onSessionExpired callback threw\", err);\n        }\n        return;\n      }\n      if (e.data?.action === \"ready\") {\n        this.onReady();\n      }\n      if (e.data?.action === \"tokenApplied\") {\n        this.onTokenApplied();\n      }\n    };\n    window.addEventListener(\"message\", this.messageHandler);\n\n    config.container.appendChild(this.wrapper);\n  }\n\n  setTheme(theme: DashboardTheme): void {\n    if (theme.tokens || theme.typography) {\n      const themePayload: Record<string, unknown> = {};\n      if (theme.tokens) themePayload.colors = theme.tokens;\n      if (theme.typography) themePayload.typography = theme.typography;\n      this.post({ action: \"setTheme\", theme: themePayload });\n    }\n    if (theme.mode) {\n      this.post({ action: \"setMode\", mode: theme.mode });\n    }\n    if (theme.styles !== undefined) {\n      this.post({ action: \"setExternalStyles\", css: theme.styles });\n    }\n  }\n\n  setLang(lang: string): void {\n    this.post({ action: \"setLang\", lang });\n  }\n\n  setToken(token: string): void {\n    this.token = token;\n    this.post({ action: \"setToken\", token });\n  }\n\n  navigate(path: string): void {\n    this.post({ action: \"navigate\", path });\n  }\n\n  destroy(): void {\n    window.removeEventListener(\"message\", this.messageHandler);\n    this.wrapper.remove();\n    this.queue = [];\n    this.ready = false;\n  }\n\n  private post(message: Record<string, unknown>): void {\n    if (this.ready && this.iframe.contentWindow) {\n      this.iframe.contentWindow.postMessage(message, this.baseUrl);\n    } else {\n      this.queue.push(message);\n    }\n  }\n\n  private flush(): void {\n    const pending = this.queue.splice(0);\n    for (const message of pending) {\n      if (this.iframe.contentWindow) {\n        this.iframe.contentWindow.postMessage(message, this.baseUrl);\n      }\n    }\n  }\n\n  private onReady(): void {\n    this.ready = true;\n    if (this.token) {\n      this.post({ action: \"setToken\", token: this.token });\n    }\n    if (this.initialTheme) {\n      this.setTheme(this.initialTheme);\n    }\n    if (this.initialLang) {\n      this.setLang(this.initialLang);\n    }\n    this.flush();\n  }\n\n  private onTokenApplied(): void {\n    setTimeout(() => {\n      if (this.initialPath !== \"/\") {\n        this.post({ action: \"navigate\", path: this.initialPath });\n      }\n      this.hideOverlay();\n      this.onReadyCallback?.();\n    }, 1000);\n  }\n\n  private hideOverlay(): void {\n    if (!this.overlay) return;\n    this.overlay.style.transition = \"opacity 0.3s\";\n    this.overlay.style.opacity = \"0\";\n    setTimeout(() => this.overlay?.remove(), 300);\n  }\n\n  private createDefaultOverlay(): HTMLElement {\n    const overlay = document.createElement(\"div\");\n    overlay.style.background = \"#ffffff\";\n    overlay.style.display = \"flex\";\n    overlay.style.alignItems = \"center\";\n    overlay.style.justifyContent = \"center\";\n\n    const spinner = document.createElement(\"div\");\n    spinner.style.width = \"32px\";\n    spinner.style.height = \"32px\";\n    spinner.style.border = \"3px solid #e0e0e0\";\n    spinner.style.borderTopColor = \"#666\";\n    spinner.style.borderRadius = \"50%\";\n    spinner.style.animation = \"yuno-spin 0.8s linear infinite\";\n\n    const style = document.createElement(\"style\");\n    style.textContent = \"@keyframes yuno-spin { to { transform: rotate(360deg); } }\";\n\n    overlay.appendChild(style);\n    overlay.appendChild(spinner);\n    return overlay;\n  }\n\n  private buildSrc(): string {\n    const params = new URLSearchParams({\n      embed: \"true\",\n      theme: this.initialTheme?.mode ?? \"light\",\n      lang: this.initialLang ?? \"en\",\n    });\n    return `${this.baseUrl}/?${params.toString()}`;\n  }\n}\n","import { YunoDashboard } from \"./yuno-dashboard\";\nimport type { YunoDashboardConfig } from \"./types\";\n\nlet instance: YunoDashboard | null = null;\n\nexport function initYunoDashboard(config: YunoDashboardConfig): YunoDashboard {\n  if (instance) {\n    instance.destroy();\n  }\n  instance = new YunoDashboard(config);\n  return instance;\n}\n\nexport function getYunoDashboard(): YunoDashboard | null {\n  return instance;\n}\n\nexport function destroyYunoDashboard(): void {\n  if (instance) {\n    instance.destroy();\n    instance = null;\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-embed-sdk",
-  "version": "0.3.0-beta.1",
+  "version": "0.4.0",
   "description": "Lightweight SDK for embedding the Yuno Dashboard via iframe",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,11 +21,16 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
+    "@vitest/ui": "^4.1.5",
+    "jsdom": "^29.1.1",
     "tsup": "^8.0.1",
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "vitest": "^4.1.5"
   },
   "repository": {
     "type": "git",