@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-service-graph/index.es.js

@@ -0,0 +1,444 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Tooltip as r, TooltipContent as i, TooltipProvider as a, TooltipTrigger as o } from "../tooltip/index.es.js";
+import * as s from "react";
+import { AlertTriangle as c, CheckCircle2 as l, Database as u, Globe as d, Maximize2 as f, MessageSquare as p, Network as m, RefreshCw as h, Server as g, XCircle as _, Zap as v, ZoomIn as y, ZoomOut as b } from "lucide-react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/waka-service-graph/index.tsx
+var w = {
+	api: {
+		icon: g,
+		color: "bg-blue-500"
+	},
+	database: {
+		icon: u,
+		color: "bg-purple-500"
+	},
+	cache: {
+		icon: v,
+		color: "bg-yellow-500"
+	},
+	queue: {
+		icon: p,
+		color: "bg-orange-500"
+	},
+	gateway: {
+		icon: d,
+		color: "bg-green-500"
+	},
+	external: {
+		icon: m,
+		color: "bg-gray-500"
+	}
+}, T = {
+	healthy: {
+		color: "text-green-500",
+		borderColor: "border-green-500",
+		icon: l
+	},
+	degraded: {
+		color: "text-yellow-500",
+		borderColor: "border-yellow-500",
+		icon: c
+	},
+	unhealthy: {
+		color: "text-red-500",
+		borderColor: "border-red-500",
+		icon: _
+	},
+	unknown: {
+		color: "text-gray-500",
+		borderColor: "border-gray-500",
+		icon: c
+	}
+};
+function E({ service: t, isSelected: n, onClick: s, showMetrics: c, position: l }) {
+	let u = w[t.type], d = T[t.health], f = u.icon, p = d.icon;
+	return /* @__PURE__ */ S(a, { children: /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, {
+		asChild: !0,
+		children: /* @__PURE__ */ S("div", {
+			className: e("absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer", "transition-all duration-200 hover:scale-110"),
+			style: {
+				left: l.x,
+				top: l.y
+			},
+			onClick: s,
+			children: /* @__PURE__ */ C("div", {
+				className: e("relative bg-background border-2 rounded-xl p-3 shadow-lg", d.borderColor, n && "ring-2 ring-primary ring-offset-2"),
+				children: [
+					/* @__PURE__ */ S("div", {
+						className: e("absolute -top-2 -right-2", d.color),
+						children: /* @__PURE__ */ S(p, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ S("div", {
+						className: e("w-10 h-10 rounded-lg flex items-center justify-center text-white", u.color),
+						children: /* @__PURE__ */ S(f, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ C("div", {
+						className: "mt-2 text-center",
+						children: [/* @__PURE__ */ S("div", {
+							className: "font-medium text-sm truncate max-w-[100px]",
+							children: t.name
+						}), t.namespace && /* @__PURE__ */ S("div", {
+							className: "text-xs text-muted-foreground",
+							children: t.namespace
+						})]
+					}),
+					c && /* @__PURE__ */ C("div", {
+						className: "mt-2 text-xs text-center space-y-0.5",
+						children: [t.requestsPerSec !== void 0 && /* @__PURE__ */ C("div", {
+							className: "text-muted-foreground",
+							children: [t.requestsPerSec, " req/s"]
+						}), t.errorRate !== void 0 && t.errorRate > 0 && /* @__PURE__ */ C("div", {
+							className: "text-red-500",
+							children: [(t.errorRate * 100).toFixed(1), "% errors"]
+						})]
+					})
+				]
+			})
+		})
+	}), /* @__PURE__ */ S(i, {
+		side: "right",
+		className: "max-w-xs",
+		children: /* @__PURE__ */ C("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ S("div", {
+				className: "font-semibold",
+				children: t.name
+			}), /* @__PURE__ */ C("div", {
+				className: "grid grid-cols-2 gap-x-4 gap-y-1 text-xs",
+				children: [
+					/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Type:"
+					}),
+					/* @__PURE__ */ S("span", {
+						className: "capitalize",
+						children: t.type
+					}),
+					/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Health:"
+					}),
+					/* @__PURE__ */ S("span", {
+						className: d.color,
+						children: t.health
+					}),
+					t.version && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Version:"
+					}), /* @__PURE__ */ S("span", { children: t.version })] }),
+					t.replicas !== void 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Replicas:"
+					}), /* @__PURE__ */ S("span", { children: t.replicas })] }),
+					t.latencyP50 !== void 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Latency P50:"
+					}), /* @__PURE__ */ C("span", { children: [t.latencyP50, "ms"] })] }),
+					t.latencyP99 !== void 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("span", {
+						className: "text-muted-foreground",
+						children: "Latency P99:"
+					}), /* @__PURE__ */ C("span", { children: [t.latencyP99, "ms"] })] })
+				]
+			})]
+		})
+	})] }) });
+}
+function D({ start: e, end: t, connection: n, onClick: r }) {
+	let i = (e.x + t.x) / 2, a = (e.y + t.y) / 2, o = t.x - e.x, s = t.y - e.y, c = Math.sqrt(o * o + s * s), l = .2, u = -s / c * l * c, d = o / c * l * c, f = i + u, p = a + d, m = `M ${e.x} ${e.y} Q ${f} ${p} ${t.x} ${t.y}`, h = n.errorRate || 0;
+	return /* @__PURE__ */ C("g", {
+		className: "cursor-pointer hover:opacity-70",
+		onClick: r,
+		children: [/* @__PURE__ */ S("path", {
+			d: m,
+			fill: "none",
+			stroke: h > .05 ? "#ef4444" : h > .01 ? "#eab308" : "#6b7280",
+			strokeWidth: Math.min(Math.max((n.requestsPerSec || 1) / 100, 1), 4),
+			strokeOpacity: .6,
+			markerEnd: "url(#arrowhead)"
+		}), n.requestsPerSec !== void 0 && /* @__PURE__ */ C("text", {
+			x: f,
+			y: p,
+			textAnchor: "middle",
+			dy: -8,
+			className: "fill-muted-foreground text-xs",
+			children: [n.requestsPerSec, " req/s"]
+		})]
+	});
+}
+function O({ services: r, connections: i, selectedService: a, onServiceClick: o, onConnectionClick: c, onRefresh: l, showMetrics: u = !0, className: d }) {
+	let [p, g] = s.useState(1), _ = s.useRef(null), v = s.useMemo(() => {
+		let e = {}, t = 2 * Math.PI / r.length;
+		return r.forEach((n, r) => {
+			let i = r * t - Math.PI / 2;
+			e[n.id] = {
+				x: 300 + 140 * Math.cos(i),
+				y: 200 + 140 * Math.sin(i)
+			};
+		}), e;
+	}, [r]), x = s.useMemo(() => r.reduce((e, t) => (e[t.health] = (e[t.health] || 0) + 1, e), {}), [r]);
+	return /* @__PURE__ */ C("div", {
+		className: e("flex flex-col border rounded-lg bg-background", d),
+		children: [
+			/* @__PURE__ */ C("div", {
+				className: "flex items-center justify-between gap-4 p-3 border-b",
+				children: [/* @__PURE__ */ C("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ S(m, { className: "h-5 w-5" }),
+						/* @__PURE__ */ S("h3", {
+							className: "font-semibold",
+							children: "Service Mesh"
+						}),
+						/* @__PURE__ */ C(t, {
+							variant: "secondary",
+							children: [r.length, " services"]
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "hidden md:flex items-center gap-1",
+							children: [
+								x.healthy > 0 && /* @__PURE__ */ C(t, {
+									className: "bg-green-500 text-xs",
+									children: [x.healthy, " healthy"]
+								}),
+								x.degraded > 0 && /* @__PURE__ */ C(t, {
+									className: "bg-yellow-500 text-xs",
+									children: [x.degraded, " degraded"]
+								}),
+								x.unhealthy > 0 && /* @__PURE__ */ C(t, {
+									className: "bg-red-500 text-xs",
+									children: [x.unhealthy, " unhealthy"]
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ C("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ S(n, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => g((e) => Math.max(.5, e - .1)),
+							children: /* @__PURE__ */ S(b, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ C("span", {
+							className: "text-xs text-muted-foreground w-12 text-center",
+							children: [(p * 100).toFixed(0), "%"]
+						}),
+						/* @__PURE__ */ S(n, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => g((e) => Math.min(2, e + .1)),
+							children: /* @__PURE__ */ S(y, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ S(n, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => g(1),
+							children: /* @__PURE__ */ S(f, { className: "h-4 w-4" })
+						}),
+						l && /* @__PURE__ */ S(n, {
+							variant: "ghost",
+							size: "sm",
+							onClick: l,
+							children: /* @__PURE__ */ S(h, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "flex items-center gap-4 px-3 py-2 border-b bg-muted/30 text-xs flex-wrap",
+				children: Object.entries(w).map(([t, n]) => (n.icon, /* @__PURE__ */ C("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ S("div", { className: e("w-3 h-3 rounded", n.color) }), /* @__PURE__ */ S("span", {
+						className: "capitalize",
+						children: t
+					})]
+				}, t)))
+			}),
+			/* @__PURE__ */ S("div", {
+				ref: _,
+				className: "flex-1 relative overflow-hidden min-h-[400px]",
+				style: { cursor: "grab" },
+				children: /* @__PURE__ */ C("div", {
+					className: "absolute inset-0 transition-transform duration-200",
+					style: {
+						transform: `scale(${p})`,
+						transformOrigin: "center center"
+					},
+					children: [/* @__PURE__ */ C("svg", {
+						className: "absolute inset-0 w-full h-full pointer-events-none",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: [/* @__PURE__ */ S("defs", { children: /* @__PURE__ */ S("marker", {
+							id: "arrowhead",
+							markerWidth: "10",
+							markerHeight: "7",
+							refX: "9",
+							refY: "3.5",
+							orient: "auto",
+							children: /* @__PURE__ */ S("polygon", {
+								points: "0 0, 10 3.5, 0 7",
+								fill: "#6b7280"
+							})
+						}) }), i.map((e, t) => {
+							let n = v[e.source], r = v[e.target];
+							return !n || !r ? null : /* @__PURE__ */ S(D, {
+								start: n,
+								end: r,
+								connection: e,
+								onClick: () => c?.(e)
+							}, t);
+						})]
+					}), r.map((e) => /* @__PURE__ */ S(E, {
+						service: e,
+						isSelected: a === e.id,
+						onClick: () => o?.(e),
+						showMetrics: u,
+						position: v[e.id]
+					}, e.id))]
+				})
+			})
+		]
+	});
+}
+var k = [
+	{
+		id: "gateway",
+		name: "API Gateway",
+		type: "gateway",
+		health: "healthy",
+		namespace: "ingress",
+		version: "v2.1.0",
+		replicas: 3,
+		requestsPerSec: 1250,
+		errorRate: .001
+	},
+	{
+		id: "auth",
+		name: "Auth Service",
+		type: "api",
+		health: "healthy",
+		namespace: "auth",
+		version: "v1.5.2",
+		replicas: 2,
+		requestsPerSec: 450,
+		errorRate: .002
+	},
+	{
+		id: "users",
+		name: "User Service",
+		type: "api",
+		health: "healthy",
+		namespace: "users",
+		version: "v3.0.1",
+		replicas: 3,
+		requestsPerSec: 320,
+		errorRate: .001
+	},
+	{
+		id: "orders",
+		name: "Order Service",
+		type: "api",
+		health: "degraded",
+		namespace: "commerce",
+		version: "v2.8.0",
+		replicas: 4,
+		requestsPerSec: 180,
+		errorRate: .05
+	},
+	{
+		id: "postgres",
+		name: "PostgreSQL",
+		type: "database",
+		health: "healthy",
+		version: "15.2",
+		replicas: 1
+	},
+	{
+		id: "redis",
+		name: "Redis Cache",
+		type: "cache",
+		health: "healthy",
+		version: "7.0",
+		replicas: 3
+	},
+	{
+		id: "rabbitmq",
+		name: "RabbitMQ",
+		type: "queue",
+		health: "healthy",
+		version: "3.12",
+		replicas: 3
+	},
+	{
+		id: "stripe",
+		name: "Stripe API",
+		type: "external",
+		health: "healthy"
+	}
+], A = [
+	{
+		source: "gateway",
+		target: "auth",
+		protocol: "gRPC",
+		requestsPerSec: 450,
+		errorRate: .001
+	},
+	{
+		source: "gateway",
+		target: "users",
+		protocol: "gRPC",
+		requestsPerSec: 320,
+		errorRate: .001
+	},
+	{
+		source: "gateway",
+		target: "orders",
+		protocol: "gRPC",
+		requestsPerSec: 180,
+		errorRate: .03
+	},
+	{
+		source: "auth",
+		target: "postgres",
+		protocol: "PostgreSQL",
+		requestsPerSec: 200
+	},
+	{
+		source: "auth",
+		target: "redis",
+		protocol: "Redis",
+		requestsPerSec: 800
+	},
+	{
+		source: "users",
+		target: "postgres",
+		protocol: "PostgreSQL",
+		requestsPerSec: 150
+	},
+	{
+		source: "orders",
+		target: "postgres",
+		protocol: "PostgreSQL",
+		requestsPerSec: 100
+	},
+	{
+		source: "orders",
+		target: "rabbitmq",
+		protocol: "AMQP",
+		requestsPerSec: 50
+	},
+	{
+		source: "orders",
+		target: "stripe",
+		protocol: "HTTPS",
+		requestsPerSec: 30
+	}
+];
+//#endregion
+export { O as WakaServiceGraph, A as defaultConnections, k as defaultServices };

package/dist/components/waka-session-manager/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={desktop:r.Monitor,mobile:r.Smartphone,tablet:r.Tablet,unknown:r.Globe},o={desktop:`Desktop`,mobile:`Mobile`,tablet:`Tablet`,unknown:`Unknown Device`};function s(e){let t=new Date().getTime()-e.getTime(),n=Math.floor(t/1e3),r=Math.floor(n/60),i=Math.floor(r/60),a=Math.floor(i/24);return n<60?`Just now`:r<60?`${r} minute${r===1?``:`s`} ago`:i<24?`${i} hour${i===1?``:`s`} ago`:a<7?`${a} day${a===1?``:`s`} ago`:e.toLocaleDateString(void 0,{month:`short`,day:`numeric`,year:a>365?`numeric`:void 0})}function c(e){return e.toLocaleString(void 0,{month:`short`,day:`numeric`,year:`numeric`,hour:`2-digit`,minute:`2-digit`})}function l(e){if(!e)return null;let t=[e.city,e.region,e.country].filter(Boolean);return t.length>0?t.join(`, `):null}function u(e){let t=[];return e.browser&&t.push(e.browserVersion?`${e.browser} ${e.browserVersion}`:e.browser),e.os&&t.push(e.osVersion?`${e.os} ${e.osVersion}`:e.os),t.length>0?t.join(` on `):o[e.type]}function d({isOpen:e,onClose:n,onConfirm:a,title:o,description:s,isLoading:c=!1,variant:l=`danger`}){return e?(0,i.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:[(0,i.jsx)(`div`,{className:`absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,onClick:n}),(0,i.jsxs)(`div`,{className:`relative z-10 w-full max-w-md mx-4 bg-background rounded-lg shadow-xl border animate-in zoom-in-95 fade-in duration-200`,children:[(0,i.jsxs)(`div`,{className:`p-6`,children:[(0,i.jsx)(`div`,{className:t.cn(`mx-auto mb-4 h-12 w-12 rounded-full flex items-center justify-center`,l===`danger`?`bg-destructive/10`:`bg-yellow-500/10`),children:(0,i.jsx)(r.AlertTriangle,{className:t.cn(`h-6 w-6`,l===`danger`?`text-destructive`:`text-yellow-500`)})}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold text-center mb-2`,children:o}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground text-center mb-6`,children:s}),(0,i.jsxs)(`div`,{className:`flex gap-3`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:n,disabled:c,className:t.cn(`flex-1 px-4 py-2 rounded-md border font-medium text-sm`,`bg-background hover:bg-muted transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:`Cancel`}),(0,i.jsx)(`button`,{type:`button`,onClick:a,disabled:c,className:t.cn(`flex-1 px-4 py-2 rounded-md font-medium text-sm`,`transition-colors flex items-center justify-center gap-2`,`disabled:opacity-50 disabled:cursor-not-allowed`,l===`danger`?`bg-destructive text-destructive-foreground hover:bg-destructive/90`:`bg-yellow-500 text-white hover:bg-yellow-600`),children:c?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Loader2,{className:`h-4 w-4 animate-spin`}),(0,i.jsx)(`span`,{children:`Revoking...`})]}):`Confirm`})]})]}),(0,i.jsx)(`button`,{type:`button`,onClick:n,className:`absolute top-4 right-4 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,children:(0,i.jsx)(r.X,{className:`h-4 w-4`})})]})]}):null}function f({session:e,showIpAddress:n,timeFormat:d,onRevoke:f,isRevoking:p,expanded:m,onToggleExpand:h}){let g=a[e.device.type],_=l(e.location),v=u(e.device),y=d===`relative`?s(e.lastActive):c(e.lastActive);return(0,i.jsx)(`div`,{className:t.cn(`group relative rounded-lg border p-4 transition-all duration-200`,e.isCurrent?`bg-primary/5 border-primary/30 ring-1 ring-primary/20`:`bg-card hover:bg-accent/50 hover:border-accent`,p&&`opacity-50 pointer-events-none`),children:(0,i.jsxs)(`div`,{className:`flex items-start gap-4`,children:[(0,i.jsx)(`div`,{className:t.cn(`flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center`,e.isCurrent?`bg-primary/10 text-primary`:`bg-muted text-muted-foreground`),children:(0,i.jsx)(g,{className:`h-5 w-5`})}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,i.jsx)(`span`,{className:`font-medium text-sm truncate`,children:e.device.name||o[e.device.type]}),e.status&&(0,i.jsx)(`span`,{className:t.cn(`h-2 w-2 rounded-full flex-shrink-0`,{active:`bg-green-500`,idle:`bg-yellow-500`,expired:`bg-red-500`}[e.status]),title:`Status: ${e.status}`}),e.isCurrent&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary`,children:[(0,i.jsx)(r.ShieldCheck,{className:`h-3 w-3`}),`Current`]})]}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground truncate mb-2`,children:v}),(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground`,children:[(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1`,children:[(0,i.jsx)(r.Clock,{className:`h-3 w-3`}),y]}),_&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1`,children:[(0,i.jsx)(r.MapPin,{className:`h-3 w-3`}),_]})]}),m&&(0,i.jsxs)(`div`,{className:`mt-3 pt-3 border-t border-dashed space-y-2 text-xs animate-in slide-in-from-top-2 duration-200`,children:[n&&e.ipAddress&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Globe,{className:`h-3 w-3 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`IP Address:`}),(0,i.jsx)(`code`,{className:`px-1.5 py-0.5 bg-muted rounded font-mono`,children:e.ipAddress})]}),e.createdAt&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Shield,{className:`h-3 w-3 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Session started:`}),(0,i.jsx)(`span`,{children:c(e.createdAt)})]}),e.device.browser&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Globe,{className:`h-3 w-3 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Browser:`}),(0,i.jsxs)(`span`,{children:[e.device.browser,e.device.browserVersion&&` v${e.device.browserVersion}`]})]}),e.device.os&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Monitor,{className:`h-3 w-3 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`OS:`}),(0,i.jsxs)(`span`,{children:[e.device.os,e.device.osVersion&&` ${e.device.osVersion}`]})]})]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2 flex-shrink-0`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:h,className:t.cn(`p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,`opacity-0 group-hover:opacity-100 focus:opacity-100`),title:m?`Show less`:`Show more`,children:m?(0,i.jsx)(r.ChevronUp,{className:`h-4 w-4`}):(0,i.jsx)(r.ChevronDown,{className:`h-4 w-4`})}),!e.isCurrent&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>f(e.id),disabled:p,className:t.cn(`p-2 rounded-md text-muted-foreground transition-colors`,`hover:text-destructive hover:bg-destructive/10`,`disabled:opacity-50 disabled:cursor-not-allowed`),title:`Revoke session`,children:p?(0,i.jsx)(r.Loader2,{className:`h-4 w-4 animate-spin`}):(0,i.jsx)(r.LogOut,{className:`h-4 w-4`})})]})]})})}function p({sessions:e,showIpAddress:a=!1,onRevokeSession:o,onRevokeAllOtherSessions:s,renderConfirmDialog:c,timeFormat:l=`relative`,defaultExpanded:u=!1,className:p,isLoading:m=!1,title:h=`Active Sessions`,description:g}){let[_,v]=n.useState({isOpen:!1}),[y,b]=n.useState(null),[x,S]=n.useState(!1),[C,w]=n.useState(()=>new Set(u?e.map(e=>e.id):[])),T=n.useMemo(()=>[...e].sort((e,t)=>e.isCurrent&&!t.isCurrent?-1:!e.isCurrent&&t.isCurrent?1:t.lastActive.getTime()-e.lastActive.getTime()),[e]),E=e.filter(e=>!e.isCurrent).length,D=e=>{v({isOpen:!0,sessionId:e})},O=()=>{v({isOpen:!0,isRevokeAll:!0})},k=async()=>{if(_.isRevokeAll){S(!0);try{await s?.()}finally{S(!1),v({isOpen:!1})}}else if(_.sessionId){b(_.sessionId);try{await o?.(_.sessionId)}finally{b(null),v({isOpen:!1})}}},A=()=>{!y&&!x&&v({isOpen:!1})},j=e=>{w(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},M={isOpen:_.isOpen,onClose:A,onConfirm:k,title:_.isRevokeAll?`Revoke All Other Sessions`:`Revoke Session`,description:_.isRevokeAll?`This will sign out all ${E} other session${E===1?``:`s`}. You will remain signed in on this device.`:`This will sign out the selected session. The device will need to sign in again to access the account.`,isLoading:y!==null||x,variant:_.isRevokeAll?`danger`:`warning`};return(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,p),children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Shield,{className:`h-5 w-5 text-muted-foreground`}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold`,children:h})]}),g&&(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground mt-1`,children:g})]}),E>0&&s&&(0,i.jsxs)(`button`,{type:`button`,onClick:O,disabled:m||x,className:t.cn(`inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium`,`border border-destructive/30 text-destructive`,`hover:bg-destructive/10 transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:[(0,i.jsx)(r.LogOut,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`hidden sm:inline`,children:`Sign out all other sessions`}),(0,i.jsx)(`span`,{className:`sm:hidden`,children:`Sign out all`})]})]}),m?(0,i.jsx)(`div`,{className:`space-y-3`,children:[1,2,3].map(e=>(0,i.jsx)(`div`,{className:`h-24 rounded-lg border bg-muted/50 animate-pulse`},e))}):e.length===0?(0,i.jsxs)(`div`,{className:`text-center py-12 text-muted-foreground`,children:[(0,i.jsx)(r.Shield,{className:`h-12 w-12 mx-auto mb-4 opacity-50`}),(0,i.jsx)(`p`,{children:`No active sessions found`})]}):(0,i.jsx)(`div`,{className:`space-y-3`,children:T.map(e=>(0,i.jsx)(f,{session:e,showIpAddress:a,timeFormat:l,onRevoke:D,isRevoking:y===e.id,expanded:C.has(e.id),onToggleExpand:()=>j(e.id)},e.id))}),!m&&e.length>0&&(0,i.jsxs)(`p`,{className:`text-xs text-muted-foreground text-center`,children:[e.length,` active session`,e.length===1?``:`s`,E>0&&` (${E} on other devices)`]}),c?c(M):(0,i.jsx)(d,{...M})]})}function m({initialSessions:e=[],currentSessionId:t,fetchSessions:r,revokeSession:i,revokeAllOtherSessions:a,autoRefreshInterval:o}={}){let[s,c]=n.useState(()=>e.map(e=>({...e,isCurrent:e.isCurrent??e.id===t}))),[l,u]=n.useState(!1),[d,f]=n.useState(null),p=n.useCallback(async()=>{if(r){u(!0),f(null);try{let e=await r();c(e.map(e=>({...e,isCurrent:e.isCurrent??e.id===t})))}catch(e){f(e instanceof Error?e:Error(`Failed to fetch sessions`))}finally{u(!1)}}},[r,t]),m=n.useCallback(async e=>{if(i)try{await i(e),c(t=>t.filter(t=>t.id!==e))}catch(e){throw f(e instanceof Error?e:Error(`Failed to revoke session`)),e}},[i]),h=n.useCallback(async()=>{if(a)try{await a(),c(e=>e.filter(e=>e.isCurrent))}catch(e){throw f(e instanceof Error?e:Error(`Failed to revoke sessions`)),e}},[a]);n.useEffect(()=>{if(!o||!r)return;let e=setInterval(p,o);return()=>clearInterval(e)},[o,p,r]),n.useEffect(()=>{r&&e.length===0&&p()},[]);let g=n.useMemo(()=>s.find(e=>e.isCurrent),[s]),_=n.useMemo(()=>s.filter(e=>!e.isCurrent),[s]);return{sessions:s,isLoading:l,error:d,refresh:p,onRevokeSession:m,onRevokeAllOtherSessions:h,currentSession:g,otherSessions:_,sessionsByDevice:n.useMemo(()=>{let e={desktop:[],mobile:[],tablet:[],unknown:[]};return s.forEach(t=>{e[t.device.type].push(t)}),e},[s]),totalSessions:s.length,otherSessionsCount:_.length}}exports.SessionCard=f,exports.SessionConfirmDialog=d,exports.WakaSessionManager=p,exports.default=p,exports.useSessionManager=m;

package/dist/components/waka-session-manager/index.d.ts

@@ -73,7 +73,7 @@ export interface ConfirmDialogProps {
     isLoading?: boolean;
     variant?: "danger" | "warning";
 }
-declare function DefaultConfirmDialog({ isOpen, onClose, onConfirm, title, description, isLoading, variant, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function DefaultConfirmDialog({ isOpen, onClose, onConfirm, title, description, isLoading, variant, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
 interface SessionCardProps {
     session: Session;
     showIpAddress: boolean;
@@ -102,11 +102,11 @@ export interface UseSessionManagerOptions {
 export declare function useSessionManager({ initialSessions, currentSessionId, fetchSessions, revokeSession, revokeAllOtherSessions, autoRefreshInterval, }?: UseSessionManagerOptions): {
     sessions: Session[];
     isLoading: boolean;
-    error: Error;
+    error: Error | null;
     refresh: () => Promise<void>;
     onRevokeSession: (sessionId: string) => Promise<void>;
     onRevokeAllOtherSessions: () => Promise<void>;
-    currentSession: Session;
+    currentSession: Session | undefined;
     otherSessions: Session[];
     sessionsByDevice: Record<DeviceType, Session[]>;
     totalSessions: number;