@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-skill-tree/index.es.js

@@ -0,0 +1,630 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronDown as n, ChevronUp as r, Lock as i, Star as a, Unlock as o, Zap as s, ZoomIn as c, ZoomOut as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-skill-tree/index.tsx
+function p(e, t) {
+	return e.find((e) => e.id === t);
+}
+function m(e, t) {
+	let n = e.filter((e) => e.branch === t);
+	if (n.length === 0) return 0;
+	let r = n.filter((e) => e.unlocked).length;
+	return Math.round(r / n.length * 100);
+}
+function h(e) {
+	let t = [
+		"#ef4444",
+		"#3b82f6",
+		"#22c55e",
+		"#a855f7",
+		"#f59e0b",
+		"#06b6d4",
+		"#ec4899",
+		"#8b5cf6"
+	];
+	return t[e % t.length];
+}
+function g({ from: t, to: n, color: r, unlocked: i, available: a, animated: o }) {
+	let s = n.x - t.x, c = n.y - t.y, l = (t.x + n.x) / 2, u = (t.y + n.y) / 2, p;
+	p = Math.abs(c) > Math.abs(s) ? `M ${t.x} ${t.y} C ${t.x} ${u}, ${n.x} ${u}, ${n.x} ${n.y}` : `M ${t.x} ${t.y} C ${l} ${t.y}, ${l} ${n.y}, ${n.x} ${n.y}`;
+	let m = i ? r : a ? `${r}80` : "rgba(128, 128, 128, 0.3)";
+	return /* @__PURE__ */ f("g", { children: [
+		i && /* @__PURE__ */ d("path", {
+			d: p,
+			fill: "none",
+			stroke: r,
+			strokeWidth: 8,
+			strokeLinecap: "round",
+			opacity: .3,
+			className: o ? "animate-pulse" : ""
+		}),
+		/* @__PURE__ */ d("path", {
+			d: p,
+			fill: "none",
+			stroke: m,
+			strokeWidth: i ? 4 : 2,
+			strokeLinecap: "round",
+			strokeDasharray: !i && a ? "8 4" : "none",
+			className: e("transition-all duration-500", o && i && "animate-flow")
+		}),
+		/* @__PURE__ */ d("polygon", {
+			points: "-5,-4 0,0 -5,4",
+			fill: m,
+			transform: `translate(${n.x}, ${n.y}) rotate(${Math.atan2(c, s) * 180 / Math.PI})`
+		})
+	] });
+}
+function _({ skill: n, branchColor: r, onUnlock: c, onHover: l, isHovered: p, animated: m, canAfford: h }) {
+	let [g, _] = t.useState(!1), v = () => {
+		n.available && !n.unlocked && h && (_(!0), setTimeout(() => {
+			c(), _(!1);
+		}, 500));
+	}, y = n.available && !n.unlocked && h;
+	return /* @__PURE__ */ f("g", {
+		transform: `translate(${n.position.x}, ${n.position.y})`,
+		onMouseEnter: () => l(n),
+		onMouseLeave: () => l(null),
+		onClick: v,
+		className: e("cursor-pointer transition-transform duration-300", y && "hover:scale-110"),
+		style: { cursor: y ? "pointer" : n.unlocked ? "default" : "not-allowed" },
+		children: [
+			n.unlocked && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("circle", {
+				r: 42,
+				fill: "none",
+				stroke: r,
+				strokeWidth: 2,
+				opacity: .3,
+				className: m ? "animate-pulse" : ""
+			}), /* @__PURE__ */ d("circle", {
+				r: 38,
+				fill: `${r}20`,
+				className: m ? "animate-glow" : ""
+			})] }),
+			n.available && !n.unlocked && /* @__PURE__ */ d("circle", {
+				r: 36,
+				fill: "none",
+				stroke: r,
+				strokeWidth: 2,
+				strokeDasharray: "4 4",
+				className: m ? "animate-spin-slow" : ""
+			}),
+			g && /* @__PURE__ */ d("circle", {
+				r: 60 / 2,
+				fill: "none",
+				stroke: r,
+				strokeWidth: 4,
+				className: "animate-unlock-ring"
+			}),
+			/* @__PURE__ */ d("circle", {
+				r: 60 / 2,
+				fill: n.unlocked ? `url(#gradient-${n.branch || "default"})` : n.available ? "hsl(var(--background))" : "hsl(var(--muted))",
+				stroke: n.unlocked || n.available ? r : "hsl(var(--border))",
+				strokeWidth: n.unlocked ? 3 : 2,
+				className: e("transition-all duration-300", p && "filter drop-shadow-lg", g && "animate-unlock-pulse")
+			}),
+			n.unlocked && /* @__PURE__ */ d("circle", {
+				r: 60 / 2 - 6,
+				fill: "none",
+				stroke: "rgba(255,255,255,0.3)",
+				strokeWidth: 1
+			}),
+			/* @__PURE__ */ d("g", {
+				transform: "translate(-12, -12)",
+				children: n.unlocked ? /* @__PURE__ */ d("g", {
+					className: "text-white",
+					children: n.icon || /* @__PURE__ */ d(a, {
+						className: "h-6 w-6",
+						fill: "currentColor"
+					})
+				}) : n.available ? /* @__PURE__ */ d("g", {
+					className: `text-${n.unlocked ? "white" : "muted-foreground"}`,
+					children: h ? /* @__PURE__ */ d(o, {
+						className: "h-6 w-6",
+						stroke: r
+					}) : /* @__PURE__ */ d(i, {
+						className: "h-6 w-6",
+						stroke: "hsl(var(--muted-foreground))"
+					})
+				}) : /* @__PURE__ */ d(i, {
+					className: "h-6 w-6",
+					stroke: "hsl(var(--muted-foreground))",
+					opacity: .5
+				})
+			}),
+			n.maxLevel && n.maxLevel > 1 && n.unlocked && /* @__PURE__ */ f("g", {
+				transform: `translate(${60 / 2 - 8}, ${60 / 2 - 8})`,
+				children: [/* @__PURE__ */ d("circle", {
+					r: 10,
+					fill: r,
+					stroke: "white",
+					strokeWidth: 2
+				}), /* @__PURE__ */ f("text", {
+					textAnchor: "middle",
+					dominantBaseline: "central",
+					className: "fill-white text-xs font-bold",
+					style: { fontSize: 10 },
+					children: [
+						n.level || 1,
+						"/",
+						n.maxLevel
+					]
+				})]
+			}),
+			n.available && !n.unlocked && n.cost && /* @__PURE__ */ f("g", {
+				transform: "translate(0, 46)",
+				children: [
+					/* @__PURE__ */ d("rect", {
+						x: -20,
+						y: -10,
+						width: 40,
+						height: 20,
+						rx: 10,
+						fill: h ? r : "hsl(var(--muted))",
+						className: "transition-colors duration-300"
+					}),
+					/* @__PURE__ */ d("g", {
+						transform: "translate(-8, -6)",
+						children: /* @__PURE__ */ d(s, {
+							className: "h-3 w-3",
+							fill: "white",
+							stroke: "white"
+						})
+					}),
+					/* @__PURE__ */ d("text", {
+						x: 6,
+						textAnchor: "middle",
+						dominantBaseline: "central",
+						className: "fill-white text-xs font-bold",
+						style: { fontSize: 11 },
+						children: n.cost
+					})
+				]
+			}),
+			/* @__PURE__ */ d("text", {
+				y: n.available && !n.unlocked && n.cost ? 68 : 46,
+				textAnchor: "middle",
+				className: e("text-xs font-medium pointer-events-none", n.unlocked ? "fill-foreground" : n.available ? "fill-muted-foreground" : "fill-muted-foreground/50"),
+				style: { fontSize: 11 },
+				children: n.name
+			}),
+			g && /* @__PURE__ */ d("g", {
+				className: "particles",
+				children: [...Array(8)].map((e, t) => /* @__PURE__ */ d("circle", {
+					r: 3,
+					fill: r,
+					className: "animate-particle",
+					style: {
+						"--angle": `${t * 45}deg`,
+						animationDelay: `${t * .05}s`
+					}
+				}, t))
+			})
+		]
+	});
+}
+function v({ skill: t, branchColor: n, canAfford: r }) {
+	return /* @__PURE__ */ f("div", {
+		className: "fixed z-50 w-64 rounded-lg border bg-popover p-4 shadow-xl animate-tooltip-in",
+		style: {
+			left: t.position.x + 80,
+			top: t.position.y - 40,
+			borderColor: t.unlocked ? n : void 0
+		},
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "mb-2 flex items-center gap-2",
+				children: [/* @__PURE__ */ d("div", {
+					className: e("flex h-8 w-8 items-center justify-center rounded-full", t.unlocked ? "text-white" : "text-muted-foreground"),
+					style: { backgroundColor: t.unlocked ? n : "hsl(var(--muted))" },
+					children: t.icon || /* @__PURE__ */ d(a, {
+						className: "h-4 w-4",
+						fill: t.unlocked ? "currentColor" : "none"
+					})
+				}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h4", {
+					className: "font-semibold",
+					children: t.name
+				}), t.maxLevel && t.maxLevel > 1 && /* @__PURE__ */ f("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"Level ",
+						t.level || +!!t.unlocked,
+						"/",
+						t.maxLevel
+					]
+				})] })]
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "mb-3 text-sm text-muted-foreground",
+				children: t.description
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [t.unlocked ? /* @__PURE__ */ f("span", {
+					className: "flex items-center gap-1 text-green-500",
+					children: [/* @__PURE__ */ d(o, { className: "h-4 w-4" }), "Unlocked"]
+				}) : t.available ? /* @__PURE__ */ d("span", {
+					className: "flex items-center gap-1",
+					style: { color: r ? n : "hsl(var(--muted-foreground))" },
+					children: r ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(o, { className: "h-4 w-4" }), "Click to unlock"] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, { className: "h-4 w-4" }), "Not enough points"] })
+				}) : /* @__PURE__ */ f("span", {
+					className: "flex items-center gap-1 text-muted-foreground",
+					children: [/* @__PURE__ */ d(i, { className: "h-4 w-4" }), "Locked"]
+				}), !t.unlocked && t.cost && /* @__PURE__ */ f("span", {
+					className: "flex items-center gap-1 font-medium",
+					children: [
+						/* @__PURE__ */ d(s, { className: "h-4 w-4 text-amber-500" }),
+						t.cost,
+						" points"
+					]
+				})]
+			}),
+			t.prerequisites && t.prerequisites.length > 0 && !t.unlocked && /* @__PURE__ */ f("div", {
+				className: "mt-3 border-t pt-3",
+				children: [/* @__PURE__ */ d("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: "Requires:"
+				}), /* @__PURE__ */ d("div", {
+					className: "mt-1 flex flex-wrap gap-1",
+					children: t.prerequisites.map((e) => /* @__PURE__ */ d("span", {
+						className: "rounded-full bg-muted px-2 py-0.5 text-xs",
+						children: e
+					}, e))
+				})]
+			})
+		]
+	});
+}
+function y({ branch: e, progress: t, expanded: o, onToggle: s, skills: c }) {
+	let l = c.filter((t) => t.branch === e.id), u = l.filter((e) => e.unlocked).length;
+	return /* @__PURE__ */ f("div", {
+		className: "rounded-lg border bg-card p-3 transition-all duration-300",
+		children: [
+			/* @__PURE__ */ f("button", {
+				type: "button",
+				onClick: s,
+				className: "flex w-full items-center justify-between",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ d("div", {
+						className: "h-3 w-3 rounded-full",
+						style: { backgroundColor: e.color }
+					}), /* @__PURE__ */ d("span", {
+						className: "font-medium",
+						children: e.name
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							u,
+							"/",
+							l.length
+						]
+					}), d(o ? r : n, { className: "h-4 w-4 text-muted-foreground" })]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "mt-2 h-2 w-full overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ d("div", {
+					className: "h-full rounded-full transition-all duration-500",
+					style: {
+						width: `${t}%`,
+						backgroundColor: e.color
+					}
+				})
+			}),
+			o && /* @__PURE__ */ d("div", {
+				className: "mt-3 space-y-1",
+				children: l.map((t) => /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2 text-sm",
+					children: [t.unlocked ? /* @__PURE__ */ d(a, {
+						className: "h-3 w-3",
+						style: { color: e.color },
+						fill: e.color
+					}) : /* @__PURE__ */ d(i, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ d("span", {
+						className: t.unlocked ? "" : "text-muted-foreground",
+						children: t.name
+					})]
+				}, t.id))
+			})
+		]
+	});
+}
+function b({ skills: n, skillPoints: r = 0, onUnlock: i, onReset: a, branches: o = [], showConnections: u = !0, zoomable: b = !0, animated: x = !0, showResetButton: ee = !0, showCategoryFilters: S = !0, className: C }) {
+	let w = t.useRef(null), [T, E] = t.useState(null), [D, O] = t.useState(1), [k, A] = t.useState({
+		x: 0,
+		y: 0
+	}), [j, M] = t.useState(!1), [N, P] = t.useState({
+		x: 0,
+		y: 0
+	}), [F, I] = t.useState(/* @__PURE__ */ new Set()), [L, R] = t.useState(/* @__PURE__ */ new Set()), [z, B] = t.useState(!1), [V, te] = t.useState(!1), H = t.useMemo(() => n.length === 0 ? {
+		minX: 0,
+		maxX: 800,
+		minY: 0,
+		maxY: 600
+	} : {
+		minX: Math.min(...n.map((e) => e.position.x)) - 100,
+		maxX: Math.max(...n.map((e) => e.position.x)) + 100,
+		minY: Math.min(...n.map((e) => e.position.y)) - 100,
+		maxY: Math.max(...n.map((e) => e.position.y)) + 100
+	}, [n]), U = H.maxX - H.minX, W = H.maxY - H.minY, G = t.useMemo(() => {
+		if (o.length > 0) return o;
+		let e = new Set(n.map((e) => e.branch).filter(Boolean));
+		return Array.from(e).map((e, t) => ({
+			id: e,
+			name: e.charAt(0).toUpperCase() + e.slice(1),
+			color: h(t)
+		}));
+	}, [o, n]), K = (e) => G.find((t) => t.id === e.branch)?.color || "#6366f1", q = (e) => {
+		O((t) => Math.max(.5, Math.min(2, t + e)));
+	}, J = (e) => {
+		e.button === 0 && (M(!0), P({
+			x: e.clientX - k.x,
+			y: e.clientY - k.y
+		}));
+	}, Y = (e) => {
+		j && A({
+			x: e.clientX - N.x,
+			y: e.clientY - N.y
+		});
+	}, X = () => {
+		M(!1);
+	}, Z = (e) => {
+		b && e.ctrlKey && (e.preventDefault(), q(e.deltaY > 0 ? -.1 : .1));
+	}, Q = (e) => {
+		I((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, $ = t.useMemo(() => {
+		let e = [];
+		return n.forEach((t) => {
+			t.prerequisites && t.prerequisites.forEach((r) => {
+				let i = p(n, r);
+				i && e.push({
+					from: i,
+					to: t,
+					color: K(t)
+				});
+			});
+		}), e;
+	}, [n, G]);
+	return /* @__PURE__ */ f("div", {
+		className: e("relative flex gap-4", C),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ f("div", {
+					className: "mb-4 flex items-center justify-between rounded-lg border bg-card p-4",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-400 to-orange-500",
+							children: /* @__PURE__ */ d(s, {
+								className: "h-5 w-5 text-white",
+								fill: "white"
+							})
+						}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+							className: "text-sm text-muted-foreground",
+							children: "Available Points"
+						}), /* @__PURE__ */ d("div", {
+							className: "text-2xl font-bold",
+							children: r
+						})] })]
+					}), b && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2 rounded-full border bg-background px-3 py-1",
+						children: [
+							/* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => q(-.1),
+								className: "rounded-full p-1 hover:bg-muted transition-colors",
+								disabled: D <= .5,
+								children: /* @__PURE__ */ d(l, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ f("span", {
+								className: "min-w-[3rem] text-center text-sm",
+								children: [Math.round(D * 100), "%"]
+							}),
+							/* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => q(.1),
+								className: "rounded-full p-1 hover:bg-muted transition-colors",
+								disabled: D >= 2,
+								children: /* @__PURE__ */ d(c, { className: "h-4 w-4" })
+							})
+						]
+					})]
+				}), /* @__PURE__ */ f("div", {
+					ref: w,
+					className: "relative overflow-hidden rounded-lg border bg-gradient-to-br from-background to-muted/20",
+					style: { height: 500 },
+					onMouseDown: J,
+					onMouseMove: Y,
+					onMouseUp: X,
+					onMouseLeave: X,
+					onWheel: Z,
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "pointer-events-none absolute inset-0 opacity-20",
+							style: {
+								backgroundImage: "radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0)",
+								backgroundSize: `${20 * D}px ${20 * D}px`
+							}
+						}),
+						/* @__PURE__ */ f("svg", {
+							className: "absolute inset-0",
+							style: {
+								width: U * D,
+								height: W * D,
+								transform: `translate(${k.x}px, ${k.y}px) translate(${-H.minX * D}px, ${-H.minY * D}px)`,
+								transformOrigin: "top left"
+							},
+							viewBox: `${H.minX} ${H.minY} ${U} ${W}`,
+							"aria-hidden": "true",
+							focusable: "false",
+							children: [
+								/* @__PURE__ */ f("defs", { children: [G.map((e) => /* @__PURE__ */ f("radialGradient", {
+									id: `gradient-${e.id}`,
+									cx: "30%",
+									cy: "30%",
+									r: "70%",
+									children: [/* @__PURE__ */ d("stop", {
+										offset: "0%",
+										stopColor: `${e.color}ff`
+									}), /* @__PURE__ */ d("stop", {
+										offset: "100%",
+										stopColor: `${e.color}aa`
+									})]
+								}, `gradient-${e.id}`)), /* @__PURE__ */ f("radialGradient", {
+									id: "gradient-default",
+									cx: "30%",
+									cy: "30%",
+									r: "70%",
+									children: [/* @__PURE__ */ d("stop", {
+										offset: "0%",
+										stopColor: "#6366f1"
+									}), /* @__PURE__ */ d("stop", {
+										offset: "100%",
+										stopColor: "#4f46e5"
+									})]
+								})] }),
+								u && $.map((e, t) => /* @__PURE__ */ d(g, {
+									from: e.from.position,
+									to: e.to.position,
+									color: e.color,
+									unlocked: e.from.unlocked && e.to.unlocked,
+									available: e.from.unlocked && e.to.available,
+									animated: x
+								}, `${e.from.id}-${e.to.id}-${t}`)),
+								n.map((e) => /* @__PURE__ */ d(_, {
+									skill: e,
+									branchColor: K(e),
+									onUnlock: () => i?.(e.id),
+									onHover: E,
+									isHovered: T?.id === e.id,
+									animated: x,
+									canAfford: r >= (e.cost || 1)
+								}, e.id))
+							]
+						}),
+						T && /* @__PURE__ */ d(v, {
+							skill: T,
+							branchColor: K(T),
+							canAfford: r >= (T.cost || 1)
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "absolute bottom-4 left-4 text-xs text-muted-foreground/60",
+							children: ["Drag to pan ", b && "| Ctrl+Scroll to zoom"]
+						})
+					]
+				})]
+			}),
+			G.length > 0 && /* @__PURE__ */ f("div", {
+				className: "w-64 space-y-2",
+				children: [
+					/* @__PURE__ */ d("h3", {
+						className: "mb-3 font-semibold",
+						children: "Skill Branches"
+					}),
+					G.map((e) => /* @__PURE__ */ d(y, {
+						branch: e,
+						progress: m(n, e.id),
+						expanded: F.has(e.id),
+						onToggle: () => Q(e.id),
+						skills: n
+					}, e.id)),
+					/* @__PURE__ */ f("div", {
+						className: "mt-4 rounded-lg border bg-card p-3",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ d("span", {
+									className: "font-medium",
+									children: "Total Progress"
+								}), /* @__PURE__ */ f("span", {
+									className: "text-sm text-muted-foreground",
+									children: [
+										n.filter((e) => e.unlocked).length,
+										"/",
+										n.length
+									]
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "mt-2 h-3 w-full overflow-hidden rounded-full bg-muted",
+								children: /* @__PURE__ */ d("div", {
+									className: "h-full rounded-full bg-gradient-to-r from-green-400 to-emerald-500 transition-all duration-500",
+									style: { width: `${n.filter((e) => e.unlocked).length / n.length * 100}%` }
+								})
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "mt-1 text-center text-sm font-medium",
+								children: [Math.round(n.filter((e) => e.unlocked).length / n.length * 100), "%"]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes spin-slow {\n          from { transform: rotate(0deg); }\n          to { transform: rotate(360deg); }\n        }\n        @keyframes glow {\n          0%, 100% { opacity: 0.3; transform: scale(1); }\n          50% { opacity: 0.6; transform: scale(1.05); }\n        }\n        @keyframes flow {\n          0% { stroke-dashoffset: 24; }\n          100% { stroke-dashoffset: 0; }\n        }\n        @keyframes unlock-ring {\n          0% { r: 30; stroke-width: 4; opacity: 1; }\n          100% { r: 60; stroke-width: 0; opacity: 0; }\n        }\n        @keyframes unlock-pulse {\n          0% { transform: scale(1); }\n          50% { transform: scale(1.15); }\n          100% { transform: scale(1); }\n        }\n        @keyframes particle {\n          0% {\n            transform: rotate(var(--angle)) translateX(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: rotate(var(--angle)) translateX(50px) scale(0);\n            opacity: 0;\n          }\n        }\n        @keyframes tooltip-in {\n          from {\n            opacity: 0;\n            transform: translateX(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateX(0);\n          }\n        }\n        .animate-spin-slow {\n          animation: spin-slow 8s linear infinite;\n        }\n        .animate-glow {\n          animation: glow 2s ease-in-out infinite;\n        }\n        .animate-flow {\n          stroke-dasharray: 8 4;\n          animation: flow 0.5s linear infinite;\n        }\n        .animate-unlock-ring {\n          animation: unlock-ring 0.5s ease-out forwards;\n        }\n        .animate-unlock-pulse {\n          animation: unlock-pulse 0.5s ease-out;\n        }\n        .animate-particle {\n          animation: particle 0.6s ease-out forwards;\n        }\n        .animate-tooltip-in {\n          animation: tooltip-in 0.2s ease-out;\n        }\n      " })
+		]
+	});
+}
+function x({ initialSkills: e, initialPoints: n = 0, onSkillUnlock: r }) {
+	let [i, a] = t.useState(e), [o, s] = t.useState(n), c = t.useCallback((e) => e.map((t) => {
+		if (t.unlocked) return t;
+		let n = !t.prerequisites || t.prerequisites.every((t) => e.find((e) => e.id === t)?.unlocked);
+		return {
+			...t,
+			available: n
+		};
+	}), []), l = t.useCallback((e) => {
+		a((t) => {
+			let n = t.find((t) => t.id === e);
+			if (!n || n.unlocked || !n.available) return t;
+			let i = n.cost || 1;
+			if (o < i) return t;
+			s((e) => e - i);
+			let a = t.map((t) => t.id === e ? {
+				...t,
+				unlocked: !0,
+				level: 1
+			} : t), l = c(a);
+			return r?.(n, o - i), l;
+		});
+	}, [
+		o,
+		c,
+		r
+	]), u = t.useCallback((e) => {
+		s((t) => t + e);
+	}, []), d = t.useCallback(() => {
+		let t = i.filter((e) => e.unlocked).reduce((e, t) => e + (t.cost || 1), 0);
+		a(c(e.map((e) => ({
+			...e,
+			unlocked: !1,
+			level: 0
+		})))), s((e) => e + t);
+	}, [
+		i,
+		e,
+		c
+	]);
+	return t.useEffect(() => {
+		a((e) => c(e));
+	}, [c]), {
+		skills: i,
+		skillPoints: o,
+		unlockSkill: l,
+		addPoints: u,
+		resetSkills: d,
+		totalUnlocked: i.filter((e) => e.unlocked).length,
+		totalSkills: i.length,
+		progress: i.length > 0 ? i.filter((e) => e.unlocked).length / i.length * 100 : 0
+	};
+}
+//#endregion
+export { b as WakaSkillTree, x as useSkillTree };

package/dist/components/waka-sla-tracker/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={day:`24h`,week:`7d`,month:`30d`,quarter:`90d`,year:`365d`},o={day:1440,week:10080,month:720*60,quarter:2160*60,year:365*24*60},s={sm:{container:`p-3`,uptimeText:`text-2xl`,targetText:`text-xs`,labelText:`text-xs`,valueText:`text-sm`,iconSize:`h-3 w-3`,ringSize:64,ringStroke:5,gap:`gap-2`,metricGap:`gap-3`},md:{container:`p-4`,uptimeText:`text-4xl`,targetText:`text-sm`,labelText:`text-sm`,valueText:`text-base`,iconSize:`h-4 w-4`,ringSize:96,ringStroke:6,gap:`gap-3`,metricGap:`gap-4`},lg:{container:`p-6`,uptimeText:`text-5xl`,targetText:`text-base`,labelText:`text-base`,valueText:`text-lg`,iconSize:`h-5 w-5`,ringSize:128,ringStroke:8,gap:`gap-4`,metricGap:`gap-6`}};function c(e,t){if(e<t)return`breached`;let n=Math.round((e-t)*1e4)/1e4;return n<.01?`critical`:n<.05?`warning`:`healthy`}function l(e){switch(e){case`healthy`:return{text:`text-green-600`,bg:`bg-green-100 dark:bg-green-900/30`,ring:`#22c55e`,hex:`#22c55e`};case`warning`:return{text:`text-yellow-600`,bg:`bg-yellow-100 dark:bg-yellow-900/30`,ring:`#eab308`,hex:`#eab308`};case`critical`:return{text:`text-orange-600`,bg:`bg-orange-100 dark:bg-orange-900/30`,ring:`#f97316`,hex:`#f97316`};case`breached`:return{text:`text-red-600`,bg:`bg-red-100 dark:bg-red-900/30`,ring:`#ef4444`,hex:`#ef4444`}}}function u(e){switch(e){case`healthy`:return r.CheckCircle2;case`warning`:return r.AlertCircle;case`critical`:return r.AlertTriangle;case`breached`:return r.XCircle}}function d(e){return e.toFixed(e>=99.99?3:2)}function f(e){return e<60?`${Math.round(e)}m`:e<1440?`${(e/60).toFixed(1)}h`:`${(e/1440).toFixed(1)}d`}function p(e,t){return(100-e)/100*t}function m({value:e,max:n,size:r,strokeWidth:a,color:o,bgColor:s=`currentColor`,className:c}){let l=(r-a)/2,u=2*Math.PI*l,d=u-Math.min(100,Math.max(0,e/n*100))/100*u;return(0,i.jsxs)(`svg`,{width:r,height:r,viewBox:`0 0 ${r} ${r}`,className:t.cn(`transform -rotate-90`,c),children:[(0,i.jsx)(`circle`,{cx:r/2,cy:r/2,r:l,fill:`none`,stroke:s,strokeWidth:a,className:`opacity-20`}),(0,i.jsx)(`circle`,{cx:r/2,cy:r/2,r:l,fill:`none`,stroke:o,strokeWidth:a,strokeLinecap:`round`,strokeDasharray:u,strokeDashoffset:d,className:`transition-all duration-700 ease-out`})]})}function h({trend:e,size:n}){let a=s[n],o=e===`up`?r.TrendingUp:e===`down`?r.TrendingDown:r.Minus;return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,a.gap,e===`up`&&`text-green-600`,e===`down`&&`text-red-600`,e===`stable`&&`text-muted-foreground`),children:[(0,i.jsx)(o,{className:a.iconSize}),(0,i.jsx)(`span`,{className:a.labelText,children:e===`up`?`Improving`:e===`down`?`Declining`:`Stable`})]})}function g({period:e,onPeriodChange:n,size:r}){let o=s[r];return(0,i.jsx)(`div`,{className:t.cn(`flex rounded-lg bg-muted p-1`,o.gap),children:[`day`,`week`,`month`,`quarter`,`year`].map(r=>(0,i.jsx)(`button`,{type:`button`,onClick:()=>n?.(r),className:t.cn(`px-2 py-1 rounded-md transition-colors font-medium`,o.labelText,r===e?`bg-background text-foreground shadow-sm`:`text-muted-foreground hover:text-foreground`),children:a[r]},r))})}function _({budget:e,size:n,status:r}){let a=s[n],o=l(r),c=Math.min(100,e.used/e.total*100),u=100-c,d=e.used>=e.total;return(0,i.jsxs)(`div`,{className:`w-full`,children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between mb-1.5`,a.labelText),children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Error Budget`}),(0,i.jsxs)(`span`,{className:t.cn(`font-medium tabular-nums`,d?`text-red-600`:o.text),children:[u.toFixed(1),`% remaining`]})]}),(0,i.jsxs)(`div`,{className:`relative h-2 w-full rounded-full bg-muted overflow-hidden`,children:[(0,i.jsx)(`div`,{className:t.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-500`,d?`bg-red-500`:`bg-current`,o.text),style:{width:`${c}%`}}),(0,i.jsx)(`div`,{className:`absolute inset-y-0 w-0.5 bg-yellow-500 opacity-50`,style:{left:`80%`}})]}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between mt-1`,a.labelText),children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground tabular-nums`,children:[f(e.used),` used`]}),(0,i.jsxs)(`span`,{className:`text-muted-foreground tabular-nums`,children:[f(e.total),` total`]})]})]})}function v({status:e,uptime:n,target:r,size:a}){let o=s[a],c=l(e);if(e===`healthy`)return null;let d={warning:`Approaching SLA threshold`,critical:`Critical: SLA breach imminent`,breached:`SLA breached by ${(r-n).toFixed(2)}%`},f=u(e);return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center rounded-lg px-3 py-2`,o.gap,c.bg),children:[(0,i.jsx)(f,{className:t.cn(o.iconSize,c.text)}),(0,i.jsx)(`span`,{className:t.cn(o.labelText,`font-medium`,c.text),children:d[e]})]})}function y({label:e,value:n,icon:r,size:a,className:o}){let c=s[a];return(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col`,o),children:[(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,c.labelText),children:e}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center font-semibold tabular-nums`,c.gap,c.valueText),children:[r,n]})]})}function b({uptime:e,target:n,period:a,downtimeMinutes:b,incidentCount:x,errorBudget:S,trend:C,onPeriodChange:w,variant:T=`detailed`,size:E=`md`,className:D}){let O=s[E],k=c(e,n),A=l(k),j=u(k),M=o[a],N=p(n,M),P=b??(100-e)/100*M,F=S??{used:P,total:N};return T===`compact`?(0,i.jsxs)(`div`,{className:t.cn(`inline-flex items-center rounded-lg border bg-card`,O.gap,O.container,D),children:[(0,i.jsx)(j,{className:t.cn(O.iconSize,A.text)}),(0,i.jsxs)(`span`,{className:t.cn(`font-bold tabular-nums`,O.uptimeText,A.text),children:[d(e),`%`]}),(0,i.jsxs)(`span`,{className:t.cn(`text-muted-foreground`,O.labelText),children:[`/ `,n,`%`]}),C&&(0,i.jsx)(h,{trend:C,size:E})]}):T===`card`?(0,i.jsxs)(`div`,{className:t.cn(`rounded-lg border bg-card shadow-sm`,O.container,D),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-start justify-between`,O.gap),children:[(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,O.gap),children:[(0,i.jsx)(j,{className:t.cn(O.iconSize,A.text)}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground font-medium`,O.labelText),children:`SLA Status`})]}),(0,i.jsxs)(`div`,{className:`mt-2`,children:[(0,i.jsxs)(`span`,{className:t.cn(`font-bold tabular-nums`,O.uptimeText,A.text),children:[d(e),`%`]}),(0,i.jsxs)(`span`,{className:t.cn(`text-muted-foreground ml-2`,O.targetText),children:[`Target: `,n,`%`]})]}),C&&(0,i.jsx)(`div`,{className:`mt-2`,children:(0,i.jsx)(h,{trend:C,size:E})})]}),(0,i.jsx)(`div`,{className:`flex flex-col items-end gap-2`,children:(0,i.jsx)(g,{period:a,onPeriodChange:w,size:E})})]}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center mt-4 pt-4 border-t`,O.metricGap),children:[x!==void 0&&(0,i.jsx)(y,{label:`Incidents`,value:x,size:E}),b!==void 0&&(0,i.jsx)(y,{label:`Downtime`,value:f(b),icon:(0,i.jsx)(r.Clock,{className:O.iconSize}),size:E}),(0,i.jsx)(y,{label:`Budget Used`,value:`${(F.used/F.total*100).toFixed(1)}%`,size:E})]}),k!==`healthy`&&(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsx)(v,{status:k,uptime:e,target:n,size:E})})]}):(0,i.jsxs)(`div`,{className:t.cn(`rounded-lg border bg-card shadow-sm`,O.container,D),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between`,O.gap),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,O.gap),children:[(0,i.jsx)(j,{className:t.cn(O.iconSize,A.text)}),(0,i.jsx)(`span`,{className:t.cn(`font-medium`,O.labelText),children:`SLA Tracker`})]}),(0,i.jsx)(g,{period:a,onPeriodChange:w,size:E})]}),k!==`healthy`&&(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(v,{status:k,uptime:e,target:n,size:E})}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center mt-4`,O.metricGap),children:[(0,i.jsxs)(`div`,{className:`relative flex-shrink-0`,children:[(0,i.jsx)(m,{value:e,max:100,size:O.ringSize,strokeWidth:O.ringStroke,color:A.ring}),(0,i.jsxs)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center`,children:[(0,i.jsx)(`span`,{className:t.cn(`font-bold tabular-nums leading-none`,E===`sm`?`text-lg`:E===`md`?`text-2xl`:`text-3xl`,A.text),children:d(e)}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,O.labelText),children:`%`})]})]}),(0,i.jsxs)(`div`,{className:t.cn(`flex-1 grid grid-cols-2 gap-y-3`,O.metricGap),children:[(0,i.jsx)(y,{label:`Target`,value:`${n}%`,size:E}),x!==void 0&&(0,i.jsx)(y,{label:`Incidents`,value:x,size:E}),b!==void 0&&(0,i.jsx)(y,{label:`Downtime`,value:f(b),icon:(0,i.jsx)(r.Clock,{className:O.iconSize}),size:E}),C&&(0,i.jsxs)(`div`,{className:`flex flex-col`,children:[(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,O.labelText),children:`Trend`}),(0,i.jsx)(h,{trend:C,size:E})]})]})]}),(0,i.jsx)(`div`,{className:`mt-4 pt-4 border-t`,children:(0,i.jsx)(_,{budget:F,size:E,status:k})})]})}function x({initialUptime:e=100,target:t,initialPeriod:r=`month`,onStatusChange:i,onBreach:a}){let[s,l]=n.useState(e),[u,d]=n.useState(r),[f,m]=n.useState(0),[h,g]=n.useState(0),[_,v]=n.useState([e]),y=n.useRef(null),b=c(s,t),x=o[u],S={used:f,total:p(t,x)},C=n.useMemo(()=>{if(_.length<2)return`stable`;let e=_.slice(-5),t=e.reduce((e,t)=>e+t,0)/e.length,n=_.slice(-10,-5);if(n.length===0)return`stable`;let r=n.reduce((e,t)=>e+t,0)/n.length;return t>r+.01?`up`:t<r-.01?`down`:`stable`},[_]);n.useEffect(()=>{y.current!==null&&y.current!==b&&(i?.(b),b===`breached`&&a?.(s,t)),y.current=b},[b,s,t,i,a]);let w=n.useCallback(e=>{g(e=>e+1),m(t=>t+e);let t=Math.max(0,(x-(f+e))/x*100);l(t),v(e=>[...e.slice(-19),t])},[x,f]),T=n.useCallback(()=>{l(100),m(0),g(0),v([100])},[]);return{uptime:s,target:t,period:u,status:b,trend:C,downtimeMinutes:f,incidentCount:h,errorBudget:S,setPeriod:d,setUptime:n.useCallback(e=>{let t=Math.max(0,Math.min(100,e));l(t),v(e=>[...e.slice(-19),t])},[]),recordIncident:w,reset:T}}b.displayName=`WakaSLATracker`,exports.WakaSLATracker=b,exports.default=b,exports.useSLATracker=x;