@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-tournament-bracket/index.es.js

@@ -0,0 +1,648 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Clock as n, Crown as r, Maximize2 as i, Star as a, Swords as o, Trophy as s, Users as c, ZoomIn as l, ZoomOut as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/waka-tournament-bracket/index.tsx
+var m = {
+	sm: {
+		matchWidth: 160,
+		matchHeight: 56,
+		verticalGap: 16,
+		horizontalGap: 40,
+		nameSize: "text-xs",
+		scoreSize: "text-xs",
+		avatarSize: "h-5 w-5"
+	},
+	default: {
+		matchWidth: 200,
+		matchHeight: 64,
+		verticalGap: 24,
+		horizontalGap: 60,
+		nameSize: "text-sm",
+		scoreSize: "text-sm",
+		avatarSize: "h-6 w-6"
+	},
+	lg: {
+		matchWidth: 240,
+		matchHeight: 80,
+		verticalGap: 32,
+		horizontalGap: 80,
+		nameSize: "text-base",
+		scoreSize: "text-base",
+		avatarSize: "h-8 w-8"
+	}
+};
+function h(e, t, n, r) {
+	let i = m[r], a = i.matchHeight, o = i.verticalGap, s = e * (i.matchWidth + i.horizontalGap), c = 2 ** (n - e - 1);
+	c * (a + o) - o;
+	let l = (2 ** (n - 1) * (a + o) - o) / c;
+	return {
+		x: s,
+		y: t * l + (l - a) / 2
+	};
+}
+function g(e, t) {
+	let n = t - e;
+	return n === 1 ? "Finals" : n === 2 ? "Semi Finals" : n === 3 ? "Quarter Finals" : `Round of ${2 ** n}`;
+}
+function _(e) {
+	return e.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+}
+function v({ participant: t, size: n, isWinner: i, className: a }) {
+	let o = m[n];
+	return /* @__PURE__ */ p("div", {
+		className: e("relative flex items-center justify-center rounded-full bg-muted text-muted-foreground font-semibold overflow-hidden", o.avatarSize, i && "ring-2 ring-yellow-400", a),
+		children: [t.avatar ? /* @__PURE__ */ f("img", {
+			src: t.avatar,
+			alt: t.name,
+			className: "h-full w-full object-cover"
+		}) : /* @__PURE__ */ f("span", {
+			className: "text-[10px]",
+			children: _(t.name)
+		}), i && /* @__PURE__ */ f("div", {
+			className: "absolute -bottom-0.5 -right-0.5 flex h-3 w-3 items-center justify-center rounded-full bg-yellow-400 text-yellow-900",
+			children: /* @__PURE__ */ f(r, { className: "h-2 w-2" })
+		})]
+	});
+}
+function y({ match: r, size: i, showTime: a, animated: o, onClick: s, onHover: c, selected: l }) {
+	let u = m[i], [d, h] = t.useState(!o);
+	t.useEffect(() => {
+		if (o && r.status === "completed") {
+			let e = setTimeout(() => h(!0), 500);
+			return () => clearTimeout(e);
+		} else h(!0);
+	}, [o, r.status]);
+	let g = r.status === "in_progress", _ = r.status === "completed", y = r.status === "bye", b = _ && r.winnerId === r.participant1?.id, x = _ && r.winnerId === r.participant2?.id, S = (t, n, r, a) => t ? /* @__PURE__ */ p("div", {
+		className: e("flex items-center justify-between px-2 py-1.5 transition-all duration-300", a ? "rounded-t-lg border-b" : "rounded-b-lg", r && d && "bg-green-50 dark:bg-green-950/30", !r && _ && d && "bg-muted/50 opacity-60", g && "bg-primary/5", "border-border"),
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex items-center gap-2 min-w-0",
+			children: [/* @__PURE__ */ f(v, {
+				participant: t,
+				size: i,
+				isWinner: r && d
+			}), /* @__PURE__ */ f("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-1",
+					children: [t.seed && /* @__PURE__ */ p("span", {
+						className: "text-[10px] text-muted-foreground font-mono",
+						children: [
+							"[",
+							t.seed,
+							"]"
+						]
+					}), /* @__PURE__ */ f("span", {
+						className: e("truncate font-medium", u.nameSize, r && d && "text-green-700 dark:text-green-400"),
+						children: t.name
+					})]
+				})
+			})]
+		}), /* @__PURE__ */ f("div", {
+			className: e("flex-shrink-0 font-mono font-bold tabular-nums", u.scoreSize, r && d ? "text-green-600 dark:text-green-400" : "text-muted-foreground"),
+			children: d && n !== void 0 ? n : "-"
+		})]
+	}) : /* @__PURE__ */ f("div", {
+		className: e("flex items-center justify-between px-2 py-1.5", a ? "rounded-t-lg border-b" : "rounded-b-lg", "bg-muted/50 border-border"),
+		children: /* @__PURE__ */ f("span", {
+			className: e("text-muted-foreground italic", u.nameSize),
+			children: y ? "BYE" : "TBD"
+		})
+	});
+	return /* @__PURE__ */ p("div", {
+		onClick: s,
+		onMouseEnter: () => c?.(!0),
+		onMouseLeave: () => c?.(!1),
+		className: e("relative rounded-lg border bg-card shadow-sm transition-all duration-200", s && "cursor-pointer hover:shadow-md hover:border-primary/50", l && "ring-2 ring-primary", g && "border-primary shadow-lg shadow-primary/20", o && _ && !d && "animate-pulse"),
+		style: {
+			width: u.matchWidth,
+			minHeight: u.matchHeight
+		},
+		children: [
+			g && /* @__PURE__ */ p("div", {
+				className: "absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center",
+				children: [/* @__PURE__ */ f("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" }), /* @__PURE__ */ f("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-primary" })]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "divide-y divide-border",
+				children: [S(r.participant1, r.score1, b, !0), S(r.participant2, r.score2, x, !1)]
+			}),
+			a && r.scheduledAt && /* @__PURE__ */ p("div", {
+				className: "absolute -bottom-5 left-0 right-0 flex items-center justify-center gap-1 text-[10px] text-muted-foreground",
+				children: [/* @__PURE__ */ f(n, { className: "h-3 w-3" }), /* @__PURE__ */ f("span", { children: r.scheduledAt.toLocaleTimeString("en-US", {
+					hour: "numeric",
+					minute: "2-digit"
+				}) })]
+			})
+		]
+	});
+}
+function b({ from: t, to: n, matchWidth: r, matchHeight: i, isWinnerPath: a, animated: o }) {
+	let s = t.x + r, c = t.y + i / 2, l = n.x, u = n.y + i / 2;
+	return /* @__PURE__ */ f("path", {
+		d: `
+    M ${s} ${c}
+    H ${(s + l) / 2}
+    V ${u}
+    H ${l}
+  `,
+		fill: "none",
+		stroke: a ? "hsl(var(--primary))" : "hsl(var(--border))",
+		strokeWidth: a ? 2.5 : 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: e("transition-all duration-500", o && a && "animate-draw-line")
+	});
+}
+function x({ match: r, position: i, onClose: a }) {
+	let s = t.useRef(null);
+	return t.useEffect(() => {
+		let e = (e) => {
+			s.current && !s.current.contains(e.target) && a();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [a]), /* @__PURE__ */ f("div", {
+		ref: s,
+		className: "absolute z-50 w-64 rounded-lg border bg-popover p-4 shadow-lg animate-in fade-in-0 zoom-in-95",
+		style: {
+			left: i.x + 220,
+			top: i.y
+		},
+		children: /* @__PURE__ */ p("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ p("span", {
+						className: "text-sm font-semibold flex items-center gap-2",
+						children: [/* @__PURE__ */ f(o, { className: "h-4 w-4" }), "Match Details"]
+					}), /* @__PURE__ */ f("span", {
+						className: e("text-xs px-2 py-0.5 rounded-full", r.status === "completed" && "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300", r.status === "in_progress" && "bg-primary/10 text-primary", r.status === "pending" && "bg-muted text-muted-foreground"),
+						children: r.status === "in_progress" ? "Live" : r.status.charAt(0).toUpperCase() + r.status.slice(1)
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ p("div", {
+							className: e("flex items-center justify-between p-2 rounded-lg", r.winnerId === r.participant1?.id && "bg-green-50 dark:bg-green-950/30"),
+							children: [/* @__PURE__ */ p("div", {
+								className: "flex items-center gap-2",
+								children: [r.participant1 && /* @__PURE__ */ f(v, {
+									participant: r.participant1,
+									size: "default",
+									isWinner: r.winnerId === r.participant1.id
+								}), /* @__PURE__ */ f("span", {
+									className: "font-medium",
+									children: r.participant1?.name || "TBD"
+								})]
+							}), /* @__PURE__ */ f("span", {
+								className: "text-lg font-bold tabular-nums",
+								children: r.score1 ?? "-"
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-2 text-muted-foreground",
+							children: [
+								/* @__PURE__ */ f("div", { className: "flex-1 border-t" }),
+								/* @__PURE__ */ f("span", {
+									className: "text-xs font-semibold",
+									children: "VS"
+								}),
+								/* @__PURE__ */ f("div", { className: "flex-1 border-t" })
+							]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: e("flex items-center justify-between p-2 rounded-lg", r.winnerId === r.participant2?.id && "bg-green-50 dark:bg-green-950/30"),
+							children: [/* @__PURE__ */ p("div", {
+								className: "flex items-center gap-2",
+								children: [r.participant2 && /* @__PURE__ */ f(v, {
+									participant: r.participant2,
+									size: "default",
+									isWinner: r.winnerId === r.participant2.id
+								}), /* @__PURE__ */ f("span", {
+									className: "font-medium",
+									children: r.participant2?.name || "TBD"
+								})]
+							}), /* @__PURE__ */ f("span", {
+								className: "text-lg font-bold tabular-nums",
+								children: r.score2 ?? "-"
+							})]
+						})
+					]
+				}),
+				r.scheduledAt && /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground pt-2 border-t",
+					children: [/* @__PURE__ */ f(n, { className: "h-4 w-4" }), /* @__PURE__ */ f("span", { children: r.scheduledAt.toLocaleDateString("en-US", {
+						weekday: "short",
+						month: "short",
+						day: "numeric",
+						hour: "numeric",
+						minute: "2-digit"
+					}) })]
+				})
+			]
+		})
+	});
+}
+function S({ winner: n, size: i, animated: o }) {
+	let [c, l] = t.useState(!o);
+	return t.useEffect(() => {
+		if (o) {
+			let e = setTimeout(() => l(!0), 800);
+			return () => clearTimeout(e);
+		}
+	}, [o]), c ? /* @__PURE__ */ p("div", {
+		className: e("flex flex-col items-center justify-center p-6 rounded-xl", "bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50", "dark:from-yellow-950/30 dark:via-amber-950/30 dark:to-orange-950/30", "border-2 border-yellow-400/50", o && "animate-in zoom-in-50 duration-500"),
+		style: { boxShadow: "0 0 40px rgba(251, 191, 36, 0.3)" },
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "relative mb-3",
+				children: [/* @__PURE__ */ f(s, { className: e("h-12 w-12 text-yellow-500", o && "animate-bounce") }), o && /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ f(a, { className: "absolute -top-1 -left-2 h-4 w-4 text-yellow-400 animate-pulse" }),
+					/* @__PURE__ */ f(a, { className: "absolute -top-2 right-0 h-3 w-3 text-amber-400 animate-pulse delay-150" }),
+					/* @__PURE__ */ f(a, { className: "absolute top-0 -right-3 h-4 w-4 text-orange-400 animate-pulse delay-300" })
+				] })]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "text-xs uppercase tracking-wider text-yellow-600 dark:text-yellow-400 font-semibold mb-2",
+				children: "Champion"
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "relative mb-2",
+				children: [/* @__PURE__ */ f("div", {
+					className: e("rounded-full p-1 bg-gradient-to-br from-yellow-300 via-amber-400 to-orange-400"),
+					children: /* @__PURE__ */ f("div", {
+						className: "h-16 w-16 rounded-full overflow-hidden bg-muted",
+						children: n.avatar ? /* @__PURE__ */ f("img", {
+							src: n.avatar,
+							alt: n.name,
+							className: "h-full w-full object-cover"
+						}) : /* @__PURE__ */ f("div", {
+							className: "h-full w-full flex items-center justify-center text-lg font-bold text-muted-foreground",
+							children: _(n.name)
+						})
+					})
+				}), /* @__PURE__ */ f("div", {
+					className: "absolute -bottom-1 left-1/2 -translate-x-1/2 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 shadow-lg",
+					children: /* @__PURE__ */ f(r, { className: "h-3.5 w-3.5 text-white" })
+				})]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "text-lg font-bold text-center",
+				children: n.name
+			}),
+			n.seed && /* @__PURE__ */ p("span", {
+				className: "text-xs text-muted-foreground",
+				children: ["Seed #", n.seed]
+			})
+		]
+	}) : null;
+}
+function C({ zoom: e, onZoomIn: t, onZoomOut: n, onReset: r, minZoom: a, maxZoom: o }) {
+	return /* @__PURE__ */ p("div", {
+		className: "absolute top-4 right-4 flex items-center gap-1 rounded-lg border bg-background/95 p-1 shadow-sm backdrop-blur-sm z-10",
+		children: [
+			/* @__PURE__ */ f("button", {
+				onClick: n,
+				disabled: e <= a,
+				className: "p-1.5 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed",
+				title: "Zoom out",
+				children: /* @__PURE__ */ f(u, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ p("span", {
+				className: "min-w-[3rem] text-center text-xs font-mono",
+				children: [Math.round(e * 100), "%"]
+			}),
+			/* @__PURE__ */ f("button", {
+				onClick: t,
+				disabled: e >= o,
+				className: "p-1.5 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed",
+				title: "Zoom in",
+				children: /* @__PURE__ */ f(l, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ f("div", { className: "w-px h-4 bg-border mx-1" }),
+			/* @__PURE__ */ f("button", {
+				onClick: r,
+				className: "p-1.5 rounded hover:bg-muted",
+				title: "Reset view",
+				children: /* @__PURE__ */ f(i, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+function w({ title: n, type: r = "single_elimination", rounds: i, losersRounds: a, grandFinal: o, onMatchClick: l, onMatchHover: u, enableZoomPan: d = !0, initialZoom: _ = 1, showTimes: v = !1, size: w = "default", animated: T = !0, className: E }) {
+	let D = t.useRef(null), [O, k] = t.useState(_), [A, j] = t.useState({
+		x: 0,
+		y: 0
+	}), [M, N] = t.useState(!1), [P, F] = t.useState({
+		x: 0,
+		y: 0
+	}), [I, L] = t.useState(null), [ee, R] = t.useState(null), z = m[w], B = i.length, V = .5, H = B * (z.matchWidth + z.horizontalGap) + 200, U = 2 ** (B - 1) * (z.matchHeight + z.verticalGap) - z.verticalGap + 100, W = i[B - 1]?.matches[0], G = W?.status === "completed" ? W.winnerId === W.participant1?.id ? W.participant1 : W.participant2 : void 0, K = t.useMemo(() => {
+		if (!G) return /* @__PURE__ */ new Set();
+		let e = /* @__PURE__ */ new Set(), t = G.id;
+		for (let n = B - 1; n >= 0; n--) {
+			let r = (i[n]?.matches || []).find((e) => e.winnerId === t && (e.participant1?.id === t || e.participant2?.id === t));
+			if (r && (e.add(r.id), n > 0 && !(i[n - 1]?.matches || []).find((e) => e.winnerId === t && (e.participant1?.id === t || e.participant2?.id === t)))) break;
+		}
+		return e;
+	}, [
+		G,
+		i,
+		B
+	]), q = (e) => {
+		e.button !== 0 || !d || (N(!0), F({
+			x: e.clientX - A.x,
+			y: e.clientY - A.y
+		}));
+	}, J = (e) => {
+		M && j({
+			x: e.clientX - P.x,
+			y: e.clientY - P.y
+		});
+	}, Y = () => {
+		N(!1);
+	}, X = (e) => {
+		if (!d) return;
+		e.preventDefault();
+		let t = e.deltaY > 0 ? -.1 : .1;
+		k((e) => Math.min(2, Math.max(V, e + t)));
+	}, Z = () => k((e) => Math.min(2, e + .1)), Q = () => k((e) => Math.max(V, e - .1)), te = () => {
+		k(1), j({
+			x: 0,
+			y: 0
+		});
+	}, ne = (e, t) => {
+		L({
+			match: e,
+			position: t
+		}), l?.(e);
+	}, $ = [];
+	for (let e = 0; e < B - 1; e++) {
+		let t = i[e]?.matches || [], n = i[e + 1]?.matches || [];
+		t.forEach((t, r) => {
+			let i = Math.floor(r / 2), a = n[i];
+			if (!a) return;
+			let o = h(e, r, B, w), s = h(e + 1, i, B, w), c = K.has(t.id) && K.has(a.id);
+			$.push(/* @__PURE__ */ f(b, {
+				from: o,
+				to: s,
+				matchWidth: z.matchWidth,
+				matchHeight: z.matchHeight,
+				isWinnerPath: c,
+				animated: T
+			}, `line-${e}-${r}`));
+		});
+	}
+	return /* @__PURE__ */ p("div", {
+		className: e("relative w-full overflow-hidden rounded-xl border bg-background", E),
+		children: [
+			n && /* @__PURE__ */ p("div", {
+				className: "flex items-center gap-2 border-b bg-muted/30 px-4 py-3",
+				children: [
+					/* @__PURE__ */ f(s, { className: "h-5 w-5 text-primary" }),
+					/* @__PURE__ */ f("h2", {
+						className: "font-semibold",
+						children: n
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "ml-auto flex items-center gap-2 text-sm text-muted-foreground",
+						children: [/* @__PURE__ */ f(c, { className: "h-4 w-4" }), /* @__PURE__ */ p("span", { children: [2 ** B, " participants"] })]
+					})
+				]
+			}),
+			d && /* @__PURE__ */ f(C, {
+				zoom: O,
+				onZoomIn: Z,
+				onZoomOut: Q,
+				onReset: te,
+				minZoom: V,
+				maxZoom: 2
+			}),
+			/* @__PURE__ */ f("div", {
+				ref: D,
+				className: e("relative min-h-[400px] cursor-grab", M && "cursor-grabbing"),
+				onMouseDown: q,
+				onMouseMove: J,
+				onMouseUp: Y,
+				onMouseLeave: Y,
+				onWheel: X,
+				children: /* @__PURE__ */ p("div", {
+					className: "relative transition-transform duration-100",
+					style: {
+						transform: `translate(${A.x}px, ${A.y}px) scale(${O})`,
+						transformOrigin: "top left",
+						width: H,
+						height: U,
+						padding: 40
+					},
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "absolute top-0 left-0 right-0 flex",
+							children: i.map((e, t) => /* @__PURE__ */ f("div", {
+								className: "text-center text-sm font-medium text-muted-foreground",
+								style: {
+									position: "absolute",
+									left: t * (z.matchWidth + z.horizontalGap) + 40,
+									width: z.matchWidth
+								},
+								children: e.name || g(t, B)
+							}, `header-${t}`))
+						}),
+						/* @__PURE__ */ f("svg", {
+							className: "absolute inset-0 pointer-events-none",
+							style: {
+								left: 40,
+								top: 40
+							},
+							width: H - 80,
+							height: U - 80,
+							children: $
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "relative",
+							style: { paddingTop: 40 },
+							children: [i.map((e, t) => e.matches.map((e, n) => {
+								let r = h(t, n, B, w);
+								return /* @__PURE__ */ f("div", {
+									className: "absolute",
+									style: {
+										left: r.x + 40,
+										top: r.y + 40
+									},
+									children: /* @__PURE__ */ f(y, {
+										match: e,
+										size: w,
+										showTime: v,
+										animated: T,
+										onClick: () => ne(e, {
+											x: r.x + 40,
+											y: r.y + 40
+										}),
+										onHover: (t) => {
+											R(t ? e.id : null), u?.(t ? e : null);
+										},
+										selected: I?.match.id === e.id
+									})
+								}, e.id);
+							})), G && /* @__PURE__ */ f("div", {
+								className: "absolute",
+								style: {
+									left: (B - 1) * (z.matchWidth + z.horizontalGap) + z.matchWidth + z.horizontalGap + 40,
+									top: (U - 240) / 2
+								},
+								children: /* @__PURE__ */ f(S, {
+									winner: G,
+									size: w,
+									animated: T
+								})
+							})]
+						})
+					]
+				})
+			}),
+			I && /* @__PURE__ */ f(x, {
+				match: I.match,
+				position: I.position,
+				onClose: () => L(null)
+			}),
+			/* @__PURE__ */ f("style", { children: "\n        @keyframes draw-line {\n          from {\n            stroke-dasharray: 1000;\n            stroke-dashoffset: 1000;\n          }\n          to {\n            stroke-dasharray: 1000;\n            stroke-dashoffset: 0;\n          }\n        }\n        .animate-draw-line {\n          animation: draw-line 1s ease-out forwards;\n        }\n      " })
+		]
+	});
+}
+function T({ initialRounds: e, type: n = "single_elimination", participants: r } = {}) {
+	let i = t.useCallback((e) => {
+		let t = e.length, n = Math.ceil(Math.log2(t)), r = 2 ** n, i = [...e];
+		for (; i.length < r;) i.push(void 0);
+		i.forEach((e, t) => {
+			e && (e.seed = t + 1);
+		});
+		let a = [], o = [];
+		for (let e = 0; e < r / 2; e++) {
+			let t = i[e], n = i[r - 1 - e], a = !t || !n;
+			o.push({
+				id: `r0-m${e}`,
+				round: 0,
+				position: e,
+				participant1: t,
+				participant2: n,
+				status: a ? "bye" : "pending",
+				winnerId: a ? t?.id || n?.id : void 0
+			});
+		}
+		a.push({
+			name: g(0, n),
+			matches: o
+		});
+		for (let e = 1; e < n; e++) {
+			let t = a[e - 1].matches, r = [];
+			for (let n = 0; n < t.length / 2; n++) r.push({
+				id: `r${e}-m${n}`,
+				round: e,
+				position: n,
+				status: "pending"
+			});
+			a.push({
+				name: g(e, n),
+				matches: r
+			});
+		}
+		return a;
+	}, []), [a, o] = t.useState(() => e || (r ? i(r) : [])), [s, c] = t.useState([]), l = t.useCallback((e, t) => {
+		o((n) => {
+			let r = null;
+			for (let i of n) {
+				let n = i.matches.find((t) => t.id === e);
+				if (!n) continue;
+				let a = {
+					...n,
+					...t
+				};
+				a.status === "completed" && a.winnerId && (r = {
+					nextRoundIdx: n.round + 1,
+					nextMatchIdx: Math.floor(n.position / 2),
+					isFirstSlot: n.position % 2 == 0,
+					winner: a.winnerId === n.participant1?.id ? n.participant1 : n.participant2
+				});
+				break;
+			}
+			return n.map((n, i) => ({
+				...n,
+				matches: n.matches.map((n, a) => n.id === e ? {
+					...n,
+					...t
+				} : r && i === r.nextRoundIdx && a === r.nextMatchIdx ? {
+					...n,
+					[r.isFirstSlot ? "participant1" : "participant2"]: r.winner
+				} : n)
+			}));
+		});
+	}, []), u = t.useCallback((e) => {
+		l(e, { status: "in_progress" });
+	}, [l]), d = t.useCallback((e, t, n) => {
+		o((r) => {
+			let i = r.flatMap((e) => e.matches).find((t) => t.id === e);
+			if (!i) return r;
+			let a = t > n ? i.participant1?.id : i.participant2?.id;
+			return r.map((r) => ({
+				...r,
+				matches: r.matches.map((r) => r.id === e ? {
+					...r,
+					score1: t,
+					score2: n,
+					winnerId: a,
+					status: "completed"
+				} : r)
+			}));
+		}), setTimeout(() => {
+			let r = a.flatMap((e) => e.matches).find((t) => t.id === e);
+			if (!r) return;
+			let i = (t > n ? r.participant1?.id : r.participant2?.id) === r.participant1?.id ? r.participant1 : r.participant2;
+			if (!i) return;
+			let s = r.round + 1, c = Math.floor(r.position / 2), l = r.position % 2 == 0;
+			o((e) => e.map((e, t) => t === s ? {
+				...e,
+				matches: e.matches.map((e, t) => t === c ? {
+					...e,
+					[l ? "participant1" : "participant2"]: i
+				} : e)
+			} : e));
+		}, 0);
+	}, [a]), f = t.useCallback((e) => {
+		e ? o(i(e)) : r && o(i(r));
+	}, [i, r]), p = t.useMemo(() => {
+		for (let e of a) {
+			let t = e.matches.find((e) => e.status === "in_progress");
+			if (t) return t;
+		}
+		for (let e of a) {
+			let t = e.matches.find((e) => e.status === "pending" && e.participant1 && e.participant2);
+			if (t) return t;
+		}
+		return null;
+	}, [a]), m = t.useMemo(() => {
+		if (a.length === 0) return null;
+		let e = a[a.length - 1]?.matches[0];
+		return !e || e.status !== "completed" ? null : e.winnerId === e.participant1?.id ? e.participant1 : e.participant2;
+	}, [a]), h = t.useMemo(() => a.flatMap((e) => e.matches), [a]);
+	return {
+		rounds: a,
+		losersRounds: s,
+		setRounds: o,
+		setLosersRounds: c,
+		updateMatch: l,
+		startMatch: u,
+		completeMatch: d,
+		resetBracket: f,
+		currentMatch: p,
+		winner: m,
+		allMatches: h,
+		getMatch: t.useCallback((e) => h.find((t) => t.id === e), [h]),
+		generateBracket: i,
+		type: n
+	};
+}
+//#endregion
+export { w as WakaTournamentBracket, w as default, T as useTournamentBracket };

package/dist/components/waka-trace-viewer/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../badge/index.cjs.js"),r=require("../button/index.cjs.js"),i=require("../scroll-area/index.cjs.js"),a=require("../tooltip/index.cjs.js");let o=require("react");o=e.__toESM(o);let s=require("lucide-react"),c=require("react/jsx-runtime");var l=[`bg-blue-500`,`bg-green-500`,`bg-purple-500`,`bg-orange-500`,`bg-pink-500`,`bg-cyan-500`,`bg-yellow-500`,`bg-red-500`];function u(e,t){return t.has(e)||t.set(e,l[t.size%l.length]),t.get(e)}function d({span:e,depth:n,totalDuration:r,minTime:i,serviceMap:o,isExpanded:l,onToggle:d,onSpanClick:f}){let p=e.children&&e.children.length>0,m=u(e.serviceName,o),h=(e.startTime-i)/r*100,g=Math.max(e.duration/r*100,.5),_={ok:(0,c.jsx)(s.CheckCircle2,{className:`h-4 w-4 text-green-500`}),error:(0,c.jsx)(s.AlertCircle,{className:`h-4 w-4 text-red-500`}),unset:(0,c.jsx)(s.Clock,{className:`h-4 w-4 text-muted-foreground`})};return(0,c.jsx)(`div`,{className:`group`,children:(0,c.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 cursor-pointer border-b border-border/30`,e.status===`error`&&`bg-red-500/5`),onClick:()=>f?.(e),children:[(0,c.jsx)(`div`,{style:{width:n*20}}),(0,c.jsx)(`button`,{onClick:e=>{e.stopPropagation(),d()},className:`w-5 h-5 flex items-center justify-center`,disabled:!p,children:p?l?(0,c.jsx)(s.ChevronDown,{className:`h-4 w-4`}):(0,c.jsx)(s.ChevronRight,{className:`h-4 w-4`}):(0,c.jsx)(`span`,{className:`w-4`})}),(0,c.jsx)(`div`,{className:t.cn(`w-3 h-3 rounded-full shrink-0`,m)}),(0,c.jsx)(`span`,{className:`text-xs text-muted-foreground w-24 truncate shrink-0`,children:e.serviceName}),(0,c.jsx)(`span`,{className:`text-sm font-medium truncate w-48 shrink-0`,children:e.operationName}),(0,c.jsx)(`div`,{className:`shrink-0`,children:_[e.status]}),(0,c.jsx)(`div`,{className:`flex-1 h-6 bg-muted/30 rounded relative min-w-[200px]`,children:(0,c.jsx)(a.TooltipProvider,{children:(0,c.jsxs)(a.Tooltip,{children:[(0,c.jsx)(a.TooltipTrigger,{asChild:!0,children:(0,c.jsx)(`div`,{className:t.cn(`absolute h-full rounded transition-all`,e.status===`error`?`bg-red-500`:m,`opacity-80 hover:opacity-100`),style:{left:`${h}%`,width:`${g}%`,minWidth:`4px`}})}),(0,c.jsx)(a.TooltipContent,{children:(0,c.jsxs)(`div`,{className:`text-xs space-y-1`,children:[(0,c.jsx)(`div`,{className:`font-semibold`,children:e.operationName}),(0,c.jsxs)(`div`,{children:[`Service: `,e.serviceName]}),(0,c.jsxs)(`div`,{children:[`Duration: `,e.duration.toFixed(2),`ms`]}),(0,c.jsxs)(`div`,{children:[`Start: +`,(e.startTime-i).toFixed(2),`ms`]})]})})]})})}),(0,c.jsxs)(`span`,{className:`text-xs text-muted-foreground w-20 text-right shrink-0`,children:[e.duration.toFixed(2),`ms`]})]})})}function f({spans:e,depth:t,totalDuration:n,minTime:r,serviceMap:i,expandedIds:a,onToggle:s,onSpanClick:l}){return(0,c.jsx)(c.Fragment,{children:e.map(e=>{let u=a.has(e.id);return(0,c.jsxs)(o.Fragment,{children:[(0,c.jsx)(d,{span:e,depth:t,totalDuration:n,minTime:r,serviceMap:i,isExpanded:u,onToggle:()=>s(e.id),onSpanClick:l}),u&&e.children&&(0,c.jsx)(f,{spans:e.children,depth:t+1,totalDuration:n,minTime:r,serviceMap:i,expandedIds:a,onToggle:s,onSpanClick:l})]},e.id)})})}function p({spans:e,traceId:a,totalDuration:l,onSpanClick:d,onCopyTraceId:p,showServiceColors:m=!0,className:h}){let[g,_]=o.useState(new Set),v=o.useMemo(()=>new Map,[]),{minTime:y,totalDuration:b}=o.useMemo(()=>{let t=[],n=e=>{e.forEach(e=>{t.push(e),e.children&&n(e.children)})};if(n(e),t.length===0)return{minTime:0,totalDuration:1};let r=Math.min(...t.map(e=>e.startTime)),i=Math.max(...t.map(e=>e.startTime+e.duration));return{minTime:r,totalDuration:l||i-r||1}},[e,l]),x=e=>{_(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},S=()=>{let t=new Set,n=e=>{e.forEach(e=>{t.add(e.id),e.children&&n(e.children)})};n(e),_(t)},C=()=>{_(new Set)},w=o.useMemo(()=>{let t=new Set,n=e=>{e.forEach(e=>{t.add(e.serviceName),e.children&&n(e.children)})};return n(e),Array.from(t)},[e]),T=o.useMemo(()=>{let t=0,n=e=>{e.forEach(e=>{t++,e.children&&n(e.children)})};return n(e),t},[e]);return(0,c.jsxs)(`div`,{className:t.cn(`flex flex-col border rounded-lg bg-background`,h),children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between gap-4 p-3 border-b`,children:[(0,c.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,c.jsx)(`h3`,{className:`font-semibold`,children:`Trace`}),a&&(0,c.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,c.jsxs)(`code`,{className:`text-xs bg-muted px-2 py-0.5 rounded font-mono`,children:[a.slice(0,16),`...`]}),(0,c.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-6 w-6 p-0`,onClick:()=>p?.(a),children:(0,c.jsx)(s.Copy,{className:`h-3 w-3`})})]}),(0,c.jsxs)(n.Badge,{variant:`secondary`,children:[T,` spans`]}),(0,c.jsxs)(n.Badge,{variant:`outline`,children:[b.toFixed(2),`ms`]})]}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:S,children:`Expand All`}),(0,c.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:C,children:`Collapse All`})]})]}),m&&w.length>0&&(0,c.jsxs)(`div`,{className:`flex items-center gap-3 px-3 py-2 border-b bg-muted/30 flex-wrap`,children:[(0,c.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Services:`}),w.map(e=>(0,c.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,c.jsx)(`div`,{className:t.cn(`w-2.5 h-2.5 rounded-full`,u(e,v))}),(0,c.jsx)(`span`,{className:`text-xs`,children:e})]},e))]}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2 px-2 py-1 border-b bg-muted/20 text-xs text-muted-foreground`,children:[(0,c.jsx)(`div`,{className:`w-5`}),(0,c.jsx)(`div`,{className:`w-5`}),(0,c.jsx)(`div`,{className:`w-3`}),(0,c.jsx)(`div`,{className:`w-24`,children:`Service`}),(0,c.jsx)(`div`,{className:`w-48`,children:`Operation`}),(0,c.jsx)(`div`,{className:`w-4`}),(0,c.jsxs)(`div`,{className:`flex-1 flex justify-between min-w-[200px]`,children:[(0,c.jsx)(`span`,{children:`0ms`}),(0,c.jsxs)(`span`,{children:[(b/2).toFixed(0),`ms`]}),(0,c.jsxs)(`span`,{children:[b.toFixed(0),`ms`]})]}),(0,c.jsx)(`div`,{className:`w-20 text-right`,children:`Duration`})]}),(0,c.jsx)(i.ScrollArea,{className:`flex-1`,children:e.length===0?(0,c.jsx)(`div`,{className:`flex items-center justify-center h-32 text-muted-foreground`,children:`No spans to display`}):(0,c.jsx)(f,{spans:e,depth:0,totalDuration:b,minTime:y,serviceMap:v,expandedIds:g,onToggle:x,onSpanClick:d})})]})}var m=[{id:`span-1`,traceId:`abc123def456`,operationName:`HTTP GET /api/users`,serviceName:`api-gateway`,startTime:0,duration:245,status:`ok`,children:[{id:`span-2`,traceId:`abc123def456`,parentId:`span-1`,operationName:`authenticate`,serviceName:`auth-service`,startTime:5,duration:35,status:`ok`},{id:`span-3`,traceId:`abc123def456`,parentId:`span-1`,operationName:`SELECT * FROM users`,serviceName:`user-service`,startTime:45,duration:120,status:`ok`,children:[{id:`span-4`,traceId:`abc123def456`,parentId:`span-3`,operationName:`PostgreSQL Query`,serviceName:`postgres`,startTime:50,duration:95,status:`ok`}]},{id:`span-5`,traceId:`abc123def456`,parentId:`span-1`,operationName:`cache.get`,serviceName:`redis`,startTime:170,duration:8,status:`ok`},{id:`span-6`,traceId:`abc123def456`,parentId:`span-1`,operationName:`serialize response`,serviceName:`api-gateway`,startTime:185,duration:55,status:`ok`}]}];exports.WakaTraceViewer=p,exports.defaultTraceSpans=m;