@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-capacity-planner/index.es.js

@@ -0,0 +1,559 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, ArrowUpRight as r, Calendar as i, ChevronRight as a, Clock as o, Cpu as s, HardDrive as c, Lightbulb as l, MemoryStick as u, Network as d, Plus as f, TrendingUp as p, Zap as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/waka-capacity-planner/index.tsx
+var _ = {
+	warning: 70,
+	danger: 85,
+	critical: 95
+}, v = {
+	"1m": "1 Month",
+	"3m": "3 Months",
+	"6m": "6 Months",
+	"12m": "12 Months"
+}, y = [
+	"1m",
+	"3m",
+	"6m",
+	"12m"
+], b = {
+	sm: {
+		padding: "p-3",
+		gap: "gap-3",
+		text: "text-xs",
+		heading: "text-sm",
+		icon: "h-4 w-4",
+		barHeight: "h-2",
+		cardPadding: "p-3",
+		spacing: "space-y-3"
+	},
+	md: {
+		padding: "p-4",
+		gap: "gap-4",
+		text: "text-sm",
+		heading: "text-base",
+		icon: "h-5 w-5",
+		barHeight: "h-3",
+		cardPadding: "p-4",
+		spacing: "space-y-4"
+	},
+	lg: {
+		padding: "p-6",
+		gap: "gap-6",
+		text: "text-base",
+		heading: "text-lg",
+		icon: "h-6 w-6",
+		barHeight: "h-4",
+		cardPadding: "p-6",
+		spacing: "space-y-6"
+	}
+}, x = {
+	cpu: s,
+	memory: u,
+	storage: c,
+	network: d,
+	custom: m
+}, S = {
+	low: "text-blue-500 bg-blue-50 dark:bg-blue-950/50 border-blue-200 dark:border-blue-800",
+	medium: "text-yellow-600 bg-yellow-50 dark:bg-yellow-950/50 border-yellow-200 dark:border-yellow-800",
+	high: "text-orange-500 bg-orange-50 dark:bg-orange-950/50 border-orange-200 dark:border-orange-800",
+	urgent: "text-red-500 bg-red-50 dark:bg-red-950/50 border-red-200 dark:border-red-800"
+};
+function C(e, t) {
+	return e >= t.critical ? "critical" : e >= t.danger ? "danger" : e >= t.warning ? "warning" : "safe";
+}
+function w(e) {
+	switch (e) {
+		case "critical": return "text-red-600 dark:text-red-400";
+		case "danger": return "text-orange-500 dark:text-orange-400";
+		case "warning": return "text-yellow-500 dark:text-yellow-400";
+		default: return "text-green-500 dark:text-green-400";
+	}
+}
+function T(e) {
+	switch (e) {
+		case "critical": return "bg-red-500";
+		case "danger": return "bg-orange-500";
+		case "warning": return "bg-yellow-500";
+		default: return "bg-green-500";
+	}
+}
+function E(e, t) {
+	return e >= 1e3 ? `${(e / 1e3).toFixed(1)}K ${t}` : `${e.toFixed(t === "%" ? 0 : 1)} ${t}`;
+}
+function D({ resources: e, thresholds: n = _, initialTimelineRange: r = "3m" }) {
+	let [i, a] = t.useState(e), [o, s] = t.useState(r), [c, l] = t.useState(n), u = t.useCallback((e) => e.projections[o] ?? e.current, [o]), d = t.useCallback((e) => C(e.total > 0 ? e.current / e.total * 100 : 0, c), [c]), f = t.useCallback((e) => C(u(e) / e.total * 100, c), [u, c]), p = t.useCallback((e, t) => {
+		let n = e.growthRate ?? 5, r = e.current / e.total * 100, i;
+		switch (t) {
+			case "warning":
+				i = c.warning;
+				break;
+			case "danger":
+				i = c.danger;
+				break;
+			case "critical":
+				i = c.critical;
+				break;
+			default: return null;
+		}
+		if (r >= i) return "Now";
+		if (n <= 0) return null;
+		let a = Math.ceil((i - r) / n);
+		return a <= 1 ? "< 1 month" : a <= 12 ? `${a} months` : `${Math.round(a / 12)} years`;
+	}, [c]), m = t.useMemo(() => i.filter((e) => f(e) !== "safe"), [i, f]), h = t.useMemo(() => i.filter((e) => f(e) === "critical"), [i, f]);
+	return {
+		resources: i,
+		timelineRange: o,
+		thresholds: c,
+		resourcesAtRisk: m,
+		criticalResources: h,
+		overallHealth: t.useMemo(() => h.length > 0 ? "critical" : i.filter((e) => f(e) === "danger").length > 0 ? "danger" : m.length > 0 ? "warning" : "safe", [
+			i,
+			h,
+			m,
+			f
+		]),
+		setTimelineRange: s,
+		updateResource: t.useCallback((e, t) => {
+			a((n) => n.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n));
+		}, []),
+		getProjectedValue: u,
+		getResourceStatus: d,
+		getProjectedStatus: f,
+		getTimeUntilBreach: p,
+		setThresholds: l,
+		addResource: t.useCallback((e) => {
+			a((t) => [...t, e]);
+		}, []),
+		removeResource: t.useCallback((e) => {
+			a((t) => t.filter((t) => t.id !== e));
+		}, [])
+	};
+}
+function O({ value: t, onChange: n, size: r, animated: a }) {
+	let o = b[r], s = y.indexOf(t);
+	return /* @__PURE__ */ g("div", {
+		className: e("relative", o.spacing),
+		children: [/* @__PURE__ */ g("div", {
+			className: "flex items-center justify-between mb-2",
+			children: [/* @__PURE__ */ g("div", {
+				className: e("flex items-center gap-2", o.text),
+				children: [/* @__PURE__ */ h(i, { className: o.icon }), /* @__PURE__ */ h("span", {
+					className: "font-medium",
+					children: "Projection Timeline"
+				})]
+			}), /* @__PURE__ */ h("span", {
+				className: e("font-semibold text-primary", o.text),
+				children: v[t]
+			})]
+		}), /* @__PURE__ */ g("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ g("div", {
+				className: "relative h-2 bg-muted rounded-full",
+				children: [/* @__PURE__ */ h("div", {
+					className: e("absolute h-full bg-primary rounded-full", a && "transition-all duration-300 ease-out"),
+					style: { width: `${(s + 1) / y.length * 100}%` }
+				}), /* @__PURE__ */ h("div", {
+					className: "absolute inset-0 flex items-center justify-between px-0",
+					children: y.map((t, r) => /* @__PURE__ */ h("button", {
+						type: "button",
+						onClick: () => n(t),
+						className: e("relative z-10 h-4 w-4 rounded-full border-2 transition-all duration-200", r <= s ? "bg-primary border-primary" : "bg-background border-muted-foreground/30 hover:border-primary/50"),
+						"aria-label": `Set timeline to ${v[t]}`,
+						children: r === s && a && /* @__PURE__ */ h("span", { className: "absolute inset-0 rounded-full animate-capacity-ping bg-primary/50" })
+					}, t))
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: "flex justify-between mt-2",
+				children: y.map((r) => /* @__PURE__ */ h("button", {
+					type: "button",
+					onClick: () => n(r),
+					className: e("text-center transition-colors duration-200", o.text, r === t ? "text-primary font-medium" : "text-muted-foreground hover:text-foreground"),
+					children: v[r]
+				}, r))
+			})]
+		})]
+	});
+}
+function k({ resource: r, timelineRange: i, thresholds: o, size: s, animated: c, onClick: l }) {
+	let u = b[s], d = r.customIcon || x[r.type], f = r.current / r.total * 100, m = r.projections[i] ?? r.current, _ = m / r.total * 100, y = C(f, o), S = C(_, o), [D, O] = t.useState(0), [k, A] = t.useState(0);
+	t.useEffect(() => {
+		if (!c) {
+			O(f), A(_);
+			return;
+		}
+		let e = Date.now(), t = D, n = k, r = () => {
+			let i = Date.now() - e, a = Math.min(i / 800, 1), o = 1 - (1 - a) ** 3;
+			O(t + (f - t) * o), A(n + (_ - n) * o), a < 1 && requestAnimationFrame(r);
+		};
+		requestAnimationFrame(r);
+	}, [
+		f,
+		_,
+		c
+	]);
+	let j = S !== "safe", M = S !== y && S !== "safe";
+	return /* @__PURE__ */ g("div", {
+		onClick: l,
+		className: e("group relative rounded-xl border bg-card transition-all duration-200", u.cardPadding, l && "cursor-pointer hover:shadow-md hover:border-primary/50", j && "border-l-4", S === "critical" && "border-l-red-500", S === "danger" && "border-l-orange-500", S === "warning" && "border-l-yellow-500"),
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: e("flex items-center justify-between mb-3", u.gap),
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ h("div", {
+						className: e("p-2 rounded-lg", S === "safe" && "bg-green-100 dark:bg-green-900/30", S === "warning" && "bg-yellow-100 dark:bg-yellow-900/30", S === "danger" && "bg-orange-100 dark:bg-orange-900/30", S === "critical" && "bg-red-100 dark:bg-red-900/30"),
+						children: /* @__PURE__ */ h(d, { className: e(u.icon, w(S)) })
+					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h3", {
+						className: e("font-semibold", u.heading),
+						children: r.name
+					}), r.growthRate !== void 0 && /* @__PURE__ */ g("div", {
+						className: e("flex items-center gap-1 text-muted-foreground", u.text),
+						children: [/* @__PURE__ */ h(p, { className: "h-3 w-3" }), /* @__PURE__ */ g("span", { children: [
+							"+",
+							r.growthRate,
+							"%/month"
+						] })]
+					})] })]
+				}), M && /* @__PURE__ */ g("div", {
+					className: e("flex items-center gap-1 px-2 py-1 rounded-full", u.text, w(S), "bg-current/10"),
+					children: [/* @__PURE__ */ h(n, { className: "h-3 w-3" }), /* @__PURE__ */ h("span", { children: "Risk" })]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: e("grid grid-cols-2 gap-4 mb-4", u.text),
+				children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("div", {
+					className: "text-muted-foreground mb-1",
+					children: "Current"
+				}), /* @__PURE__ */ g("div", {
+					className: "flex items-baseline gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: e("font-bold text-xl", w(y)),
+						children: [D.toFixed(0), "%"]
+					}), /* @__PURE__ */ g("span", {
+						className: "text-muted-foreground",
+						children: [
+							"(",
+							E(r.current, r.unit),
+							")"
+						]
+					})]
+				})] }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("div", {
+					className: "text-muted-foreground mb-1",
+					children: [
+						"Projected (",
+						v[i],
+						")"
+					]
+				}), /* @__PURE__ */ g("div", {
+					className: "flex items-baseline gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: e("font-bold text-xl", w(S)),
+						children: [k.toFixed(0), "%"]
+					}), /* @__PURE__ */ g("span", {
+						className: "text-muted-foreground",
+						children: [
+							"(",
+							E(m, r.unit),
+							")"
+						]
+					})]
+				})] })]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ g("div", {
+					className: e("w-full bg-muted rounded-full overflow-hidden", u.barHeight),
+					children: [
+						/* @__PURE__ */ h("div", {
+							className: "absolute top-0 bottom-0 w-px bg-yellow-500/50 z-10",
+							style: { left: `${o.warning}%` }
+						}),
+						/* @__PURE__ */ h("div", {
+							className: "absolute top-0 bottom-0 w-px bg-orange-500/50 z-10",
+							style: { left: `${o.danger}%` }
+						}),
+						/* @__PURE__ */ h("div", {
+							className: "absolute top-0 bottom-0 w-px bg-red-500/50 z-10",
+							style: { left: `${o.critical}%` }
+						}),
+						/* @__PURE__ */ h("div", {
+							className: e("absolute h-full opacity-30 rounded-full", T(S), c && "transition-all duration-500 ease-out"),
+							style: { width: `${Math.min(k, 100)}%` }
+						}),
+						/* @__PURE__ */ h("div", {
+							className: e("relative h-full rounded-full", T(y), c && "transition-all duration-500 ease-out"),
+							style: { width: `${Math.min(D, 100)}%` },
+							children: c && /* @__PURE__ */ h("div", {
+								className: "absolute inset-0 overflow-hidden rounded-full",
+								children: /* @__PURE__ */ h("div", { className: "absolute inset-0 animate-capacity-shine" })
+							})
+						})
+					]
+				}), /* @__PURE__ */ g("div", {
+					className: e("flex justify-between mt-1 text-muted-foreground", u.text),
+					children: [/* @__PURE__ */ h("span", { children: "0%" }), /* @__PURE__ */ g("span", { children: ["Total: ", E(r.total, r.unit)] })]
+				})]
+			}),
+			l && /* @__PURE__ */ h("div", {
+				className: "absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity",
+				children: /* @__PURE__ */ h(a, { className: e(u.icon, "text-muted-foreground") })
+			})
+		]
+	});
+}
+function A({ resources: n, timelineRange: r, thresholds: i, size: a, animated: o }) {
+	let s = b[a], c = a === "sm" ? 120 : a === "md" ? 160 : 200, l = t.useMemo(() => {
+		let e = r === "1m" ? 1 : r === "3m" ? 3 : r === "6m" ? 6 : 12;
+		return Array.from({ length: e + 1 }, (e, t) => t);
+	}, [r]), u = t.useMemo(() => n.map((e) => {
+		let t = 1 + (e.growthRate ?? 5) / 100, n = l.length - 1, r = l.map((r) => {
+			let i = e.current * t ** +r, a = Math.min(i / e.total * 100, 110);
+			return {
+				x: r / n * 100,
+				y: 100 - a
+			};
+		}).map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" "), a = C(e.current * t ** +n / e.total * 100, i);
+		return {
+			id: e.id,
+			name: e.name,
+			path: r,
+			color: T(a).replace("bg-", ""),
+			status: a
+		};
+	}), [
+		n,
+		l,
+		i
+	]), d = {
+		"green-500": "#22c55e",
+		"yellow-500": "#eab308",
+		"orange-500": "#f97316",
+		"red-500": "#ef4444"
+	};
+	return /* @__PURE__ */ g("div", {
+		className: e("rounded-xl border bg-card", s.cardPadding),
+		children: [
+			/* @__PURE__ */ h("h3", {
+				className: e("font-semibold mb-4", s.heading),
+				children: "Capacity Projection"
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "relative",
+				style: { height: c },
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "absolute left-0 right-0 border-t border-dashed border-yellow-500/50",
+						style: { top: `${100 - i.warning}%` },
+						children: /* @__PURE__ */ g("span", {
+							className: e("absolute -top-3 right-0 text-yellow-500", s.text),
+							children: [i.warning, "%"]
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "absolute left-0 right-0 border-t border-dashed border-orange-500/50",
+						style: { top: `${100 - i.danger}%` },
+						children: /* @__PURE__ */ g("span", {
+							className: e("absolute -top-3 right-0 text-orange-500", s.text),
+							children: [i.danger, "%"]
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "absolute left-0 right-0 border-t border-dashed border-red-500/50",
+						style: { top: `${100 - i.critical}%` },
+						children: /* @__PURE__ */ g("span", {
+							className: e("absolute -top-3 right-0 text-red-500", s.text),
+							children: [i.critical, "%"]
+						})
+					}),
+					/* @__PURE__ */ h("svg", {
+						viewBox: "0 0 100 100",
+						preserveAspectRatio: "none",
+						className: "w-full h-full",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: u.map((t) => /* @__PURE__ */ h("path", {
+							d: t.path,
+							fill: "none",
+							stroke: d[t.color] || "#22c55e",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							className: e(o && "animate-capacity-draw")
+						}, t.id))
+					}),
+					/* @__PURE__ */ g("div", {
+						className: e("flex justify-between mt-2 text-muted-foreground", s.text),
+						children: [/* @__PURE__ */ h("span", { children: "Now" }), /* @__PURE__ */ h("span", { children: v[r] })]
+					})
+				]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: e("flex flex-wrap gap-4 mt-4", s.text),
+				children: n.map((e, t) => {
+					let n = u[t];
+					return /* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ h("div", {
+							className: "w-3 h-3 rounded-full",
+							style: { backgroundColor: d[n?.color] || "#22c55e" }
+						}), /* @__PURE__ */ h("span", { children: e.name })]
+					}, e.id);
+				})
+			})
+		]
+	});
+}
+function j({ recommendations: t, size: n, onAction: i }) {
+	let a = b[n];
+	return t.length === 0 ? /* @__PURE__ */ h("div", {
+		className: e("rounded-xl border bg-card text-center", a.cardPadding),
+		children: /* @__PURE__ */ g("div", {
+			className: "flex flex-col items-center gap-2 py-4 text-muted-foreground",
+			children: [/* @__PURE__ */ h(l, { className: e(a.icon, "text-green-500") }), /* @__PURE__ */ h("p", {
+				className: a.text,
+				children: "All resources are within healthy limits!"
+			})]
+		})
+	}) : /* @__PURE__ */ g("div", {
+		className: e("rounded-xl border bg-card", a.cardPadding),
+		children: [/* @__PURE__ */ g("div", {
+			className: "flex items-center justify-between mb-4",
+			children: [/* @__PURE__ */ h("h3", {
+				className: e("font-semibold", a.heading),
+				children: "Scaling Recommendations"
+			}), /* @__PURE__ */ g("span", {
+				className: e("px-2 py-1 rounded-full bg-muted", a.text),
+				children: [
+					t.length,
+					" action",
+					t.length > 1 ? "s" : ""
+				]
+			})]
+		}), /* @__PURE__ */ h("div", {
+			className: e("space-y-3"),
+			children: t.map((t) => /* @__PURE__ */ h("div", {
+				className: e("rounded-lg border p-3 transition-colors", S[t.priority]),
+				children: /* @__PURE__ */ g("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex-1",
+						children: [
+							/* @__PURE__ */ g("div", {
+								className: "flex items-center gap-2 mb-1",
+								children: [
+									t.type === "scale_up" && /* @__PURE__ */ h(r, { className: "h-4 w-4" }),
+									t.type === "scale_out" && /* @__PURE__ */ h(f, { className: "h-4 w-4" }),
+									t.type === "optimize" && /* @__PURE__ */ h(m, { className: "h-4 w-4" }),
+									t.type === "monitor" && /* @__PURE__ */ h(o, { className: "h-4 w-4" }),
+									/* @__PURE__ */ h("span", {
+										className: e("font-medium", a.text),
+										children: t.title
+									})
+								]
+							}),
+							/* @__PURE__ */ h("p", {
+								className: e("text-muted-foreground mb-2", a.text),
+								children: t.description
+							}),
+							/* @__PURE__ */ g("div", {
+								className: e("flex items-center gap-4", a.text),
+								children: [t.timeframe && /* @__PURE__ */ g("span", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ h(o, { className: "h-3 w-3" }), t.timeframe]
+								}), t.costImpact && /* @__PURE__ */ h("span", {
+									className: "text-muted-foreground",
+									children: t.costImpact
+								})]
+							})
+						]
+					}), i && /* @__PURE__ */ h("button", {
+						type: "button",
+						onClick: () => i(t),
+						className: e("px-3 py-1.5 rounded-lg bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", a.text),
+						children: t.action
+					})]
+				})
+			}, t.id))
+		})]
+	});
+}
+function M({ resources: r, thresholds: i = _, recommendations: a = [], initialTimelineRange: o = "3m", size: s = "md", animated: c = !0, showRecommendations: l = !0, showTimeline: u = !0, showProjectionChart: d = !0, onTimelineChange: f, onResourceClick: p, onRecommendationAction: m, className: v }) {
+	let [y, x] = t.useState(o), S = b[s], T = t.useCallback((e) => {
+		x(e), f?.(e);
+	}, [f]), E = t.useMemo(() => {
+		let e = "safe";
+		for (let t of r) {
+			let n = C((t.projections[y] ?? t.current) / t.total * 100, i);
+			if (n === "critical") return "critical";
+			n === "danger" ? e = "danger" : n === "warning" && e === "safe" && (e = "warning");
+		}
+		return e;
+	}, [
+		r,
+		y,
+		i
+	]);
+	return /* @__PURE__ */ g("div", {
+		className: e("w-full", S.spacing, v),
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
+					className: e("font-bold text-xl", S.heading),
+					children: "Capacity Planner"
+				}), /* @__PURE__ */ h("p", {
+					className: e("text-muted-foreground mt-1", S.text),
+					children: "Monitor and plan resource capacity across your infrastructure"
+				})] }), /* @__PURE__ */ g("div", {
+					className: e("flex items-center gap-2 px-3 py-2 rounded-lg", E === "safe" && "bg-green-100 dark:bg-green-900/30", E === "warning" && "bg-yellow-100 dark:bg-yellow-900/30", E === "danger" && "bg-orange-100 dark:bg-orange-900/30", E === "critical" && "bg-red-100 dark:bg-red-900/30"),
+					children: [E === "critical" && /* @__PURE__ */ h(n, { className: e(S.icon, "text-red-500") }), /* @__PURE__ */ h("span", {
+						className: e("font-medium capitalize", w(E)),
+						children: E === "safe" ? "Healthy" : E
+					})]
+				})]
+			}),
+			u && /* @__PURE__ */ h("div", {
+				className: e("rounded-xl border bg-card", S.cardPadding),
+				children: /* @__PURE__ */ h(O, {
+					value: y,
+					onChange: T,
+					size: s,
+					animated: c
+				})
+			}),
+			d && r.length > 0 && /* @__PURE__ */ h(A, {
+				resources: r,
+				timelineRange: y,
+				thresholds: i,
+				size: s,
+				animated: c
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: r.map((e) => /* @__PURE__ */ h(k, {
+					resource: e,
+					timelineRange: y,
+					thresholds: i,
+					size: s,
+					animated: c,
+					onClick: p ? () => p(e) : void 0
+				}, e.id))
+			}),
+			l && /* @__PURE__ */ h(j, {
+				recommendations: a,
+				size: s,
+				onAction: m
+			}),
+			/* @__PURE__ */ h("style", { children: "\n        @keyframes capacity-ping {\n          0% { transform: scale(1); opacity: 1; }\n          75%, 100% { transform: scale(2); opacity: 0; }\n        }\n        .animate-capacity-ping {\n          animation: capacity-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;\n        }\n\n        @keyframes capacity-shine {\n          0% { transform: translateX(-100%); opacity: 0; }\n          50% { opacity: 0.4; }\n          100% { transform: translateX(100%); opacity: 0; }\n        }\n        .animate-capacity-shine {\n          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n          animation: capacity-shine 2s ease-in-out infinite;\n        }\n\n        @keyframes capacity-draw {\n          from { stroke-dashoffset: 1000; }\n          to { stroke-dashoffset: 0; }\n        }\n        .animate-capacity-draw {\n          stroke-dasharray: 1000;\n          animation: capacity-draw 1.5s ease-out forwards;\n        }\n      " })
+		]
+	});
+}
+//#endregion
+export { M as default, D as useCapacityPlanner };

package/dist/components/waka-carousel/index.cjs.js

@@ -0,0 +1 @@
+"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=({images:e,autoplay:a=!1,autoplayInterval:o=3e3,showIndicators:ee=!0,showNavigation:te=!0,showThumbnails:ne=!1,showFullscreen:s=!1,showDownload:re=!1,showShare:ie=!1,showCounter:ae=!1,showProgress:oe=!1,transition:se=`fade`,layout:ce=`default`,theme:c=`auto`,aspectRatio:le=`16/9`,maxHeight:ue,className:de,imageClassName:l,indicatorClassName:fe,navigationClassName:u,thumbnailClassName:pe,overlayClassName:me,counterClassName:he,progressClassName:ge,onImageChange:d,onImageClick:_e,onFullscreenToggle:f,onDownload:ve,onShare:ye,onPlayPause:p,onThumbnailClick:be,onIndicatorClick:xe,onNavigationClick:m,onKeyboardNavigation:h,onTouchStart:g,onTouchEnd:_,onSwipeLeft:v,onSwipeRight:y,onSwipeUp:b,onSwipeDown:x,onLoadStart:Se,onLoadEnd:Ce,onError:we,onReady:Te,onDestroy:Ee,loop:S=!0,pauseOnHover:C=!0,pauseOnFocus:w=!0,pauseOnTouch:De=!0,keyboardNavigation:Oe=!0,touchNavigation:T=!0,swipeThreshold:E=50,animationDuration:ke=300,preloadImages:Ae=!0,lazyLoading:je=!0,imageQuality:Me=`auto`,placeholder:Ne,errorImage:Pe,loadingSpinner:Fe,emptyState:Ie,customControls:Le,customOverlay:Re,customThumbnails:ze,customIndicators:D,customNavigation:O,ariaLabel:Be=`Carrousel d'images`,ariaLabelledBy:Ve,ariaDescribedBy:He,role:Ue=`region`,virtualScrolling:We=!1,maxVisibleThumbnails:Ge=10,thumbnailSize:k=`medium`,overlayOpacity:Ke=.7,overlayGradient:qe,navigationSize:A=`medium`,indicatorSize:j=`medium`,indicatorShape:M=`circle`,thumbnailAspectRatio:N=`1/1`,onMount:P,onUnmount:F,onBeforeChange:I,onAfterChange:L})=>{let[R,z]=(0,n.useState)(0),[B,V]=(0,n.useState)(a),[H,U]=(0,n.useState)(!1),[Je,Ye]=(0,n.useState)(!1),[Xe,Ze]=(0,n.useState)(!1),[W,Qe]=(0,n.useState)(null),[$e,et]=(0,n.useState)(null),[tt,nt]=(0,n.useState)(new Set),[rt,it]=(0,n.useState)(0),G=(0,n.useRef)(null),at=(0,n.useRef)(null),ot=(0,n.useRef)([]),st=(0,n.useRef)(null),ct=(0,n.useRef)(0),K=e&&e.length>0,q=Math.max(0,Math.min(R,e.length-1)),J=K?e[q]:null,lt=(0,n.useMemo)(()=>{switch(le){case`16/9`:return`aspect-video`;case`4/3`:return`aspect-[4/3]`;case`1/1`:return`aspect-square`;case`3/2`:return`aspect-[3/2]`;default:return`aspect-video`}},[le]),ut=(0,n.useMemo)(()=>c===`auto`?``:c===`dark`?`dark`:`light`,[c]),Y=(0,n.useCallback)(()=>{G.current&&clearInterval(G.current),B&&K&&e.length>1&&(G.current=setInterval(()=>{z(t=>S?(t+1)%e.length:Math.min(t+1,e.length-1))},o))},[B,K,e.length,o,S]),X=(0,n.useCallback)(()=>{G.current&&=(clearInterval(G.current),null)},[]),dt=(0,n.useCallback)(()=>{if(!B||!a)return;let e=Date.now(),t=()=>{let n=(Date.now()-e)/o*100;it(Math.min(n,100)),n<100&&requestAnimationFrame(t)};requestAnimationFrame(t)},[B,a,o]);(0,n.useEffect)(()=>(B?(Y(),dt()):(X(),it(0)),()=>X()),[B,Y,X,dt]);let Z=(0,n.useCallback)(()=>{if(!K)return;let t=S?(R-1+e.length)%e.length:Math.max(R-1,0);I&&!I(R,t)||(z(t),m?.(`prev`))},[K,R,e.length,S,I,m]),Q=(0,n.useCallback)(()=>{if(!K)return;let t=S?(R+1)%e.length:Math.min(R+1,e.length-1);I&&!I(R,t)||(z(t),m?.(`next`))},[K,R,e.length,S,I,m]),ft=(0,n.useCallback)(t=>{!K||t<0||t>=e.length||I&&!I(R,t)||(z(t),xe?.(t))},[K,R,e.length,I,xe]),pt=(0,n.useCallback)(e=>{if(!Oe)return;let t=e.key;switch(h?.(t),t){case`ArrowLeft`:e.preventDefault(),Z();break;case`ArrowRight`:e.preventDefault(),Q();break;case`ArrowUp`:e.preventDefault(),b?.();break;case`ArrowDown`:e.preventDefault(),x?.();break;case` `:e.preventDefault(),V(e=>!e),p?.(!B);break;case`Escape`:H&&(U(!1),f?.(!1));break;case`f`:case`F`:s&&U(e=>(f?.(!e),!e));break}},[Oe,Z,Q,h,b,x,B,p,H,s,f]),mt=(0,n.useCallback)(e=>{if(!T)return;let t=e.touches[0];Qe({x:t.clientX,y:t.clientY}),ct.current=Date.now(),g?.(e),De&&V(!1)},[T,g,De]),ht=(0,n.useCallback)(e=>{if(!T||!W)return;let t=e.changedTouches[0];et({x:t.clientX,y:t.clientY}),_?.(e);let n=t.clientX-W.x,r=t.clientY-W.y;Date.now()-ct.current,Math.abs(n)>Math.abs(r)&&Math.abs(n)>E?n>0?(y?.(),Z()):(v?.(),Q()):Math.abs(r)>E&&(r>0?x?.():b?.()),Qe(null),et(null)},[T,W,_,E,y,v,x,b,Z,Q]),gt=(0,n.useCallback)(e=>{nt(t=>new Set([...t,e])),Ye(!1),Ce?.(e)},[Ce]),_t=(0,n.useCallback)((e,t)=>{Ze(!0),Ye(!1),we?.(e,t)},[we]);(0,n.useEffect)(()=>{J&&(d?.(q,J),L?.(q))},[q,J,d,L]);let vt=(0,n.useCallback)(()=>{J&&_e?.(J,q)},[J,q,_e]),$=(0,n.useCallback)(e=>{e.stopPropagation()},[]),yt=(0,n.useCallback)(()=>{U(e=>(f?.(!e),!e))},[f]),bt=(0,n.useCallback)(()=>{J&&ve?.(J,q)},[J,q,ve]),xt=(0,n.useCallback)(()=>{J&&ye?.(J,q)},[J,q,ye]),St=(0,n.useCallback)(()=>{C&&V(!1)},[C]),Ct=(0,n.useCallback)(()=>{C&&a&&V(!0)},[C,a]),wt=(0,n.useCallback)(()=>{w&&V(!1)},[w]),Tt=(0,n.useCallback)(()=>{w&&a&&V(!0)},[w,a]);if((0,n.useEffect)(()=>(P?.(),Te?.(),()=>{F?.(),Ee?.(),X()}),[P,Te,F,Ee,X]),(0,n.useEffect)(()=>()=>X(),[X]),!K)return(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-center h-64 bg-gray-100 rounded-lg`,de),children:Ie||(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`p`,{className:`text-gray-500 mb-2`,children:`Aucune image à afficher`}),(0,i.jsx)(`p`,{className:`text-sm text-gray-400`,children:`Ajoutez des images pour commencer`})]})});let Et=t.cn(`waka-carousel relative w-full mx-auto bg-black rounded-lg overflow-hidden`,`focus:outline-none focus:ring-2 focus:ring-blue-500`,H&&`fixed inset-0 z-50 rounded-none`,ut,de),Dt=t.cn(`relative`,lt,l),Ot=t.cn(`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4`,me);return(0,i.jsxs)(`div`,{ref:at,className:Et,style:{maxHeight:ue},tabIndex:0,onKeyDown:pt,onTouchStart:mt,onTouchEnd:ht,onMouseEnter:St,onMouseLeave:Ct,onFocus:wt,onBlur:Tt,role:Ue,"aria-label":Be,"aria-labelledby":Ve,"aria-describedby":He,children:[(0,i.jsxs)(`div`,{className:Dt,children:[Je&&Fe&&(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/50 z-20`,children:Fe}),Xe&&Pe?(0,i.jsx)(`img`,{src:Pe,alt:`Erreur de chargement`,className:t.cn(`w-full h-full object-cover`,l)}):J?(0,i.jsx)(`img`,{ref:e=>{ot.current[q]=e},src:J.src,alt:J.alt,className:t.cn(`w-full h-full object-cover transition-opacity duration-300`,l),onClick:vt,loading:je?`lazy`:`eager`,onLoad:()=>gt(q),onError:e=>_t(q,Error(`Erreur de chargement de l'image`))}):null,J&&(J.title||J.description||J.caption)&&(0,i.jsxs)(`div`,{className:Ot,children:[J.title&&(0,i.jsx)(`h3`,{className:`text-white text-lg font-semibold mb-1`,children:J.title}),J.description&&(0,i.jsx)(`p`,{className:`text-white/90 text-sm mb-2`,children:J.description}),J.caption&&(0,i.jsx)(`p`,{className:`text-white/80 text-xs`,children:J.caption})]}),Le&&(0,i.jsx)(`div`,{className:`absolute inset-0 z-10`,children:Le}),Re&&(0,i.jsx)(`div`,{className:`absolute inset-0 z-10`,children:Re}),te&&e.length>1&&(0,i.jsx)(i.Fragment,{children:O?(0,i.jsx)(`div`,{className:`absolute inset-0 z-10`,children:O}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`button`,{onClick:e=>{$(e),Z()},className:t.cn(`absolute left-2 top-1/2 -translate-y-1/2 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`,A===`small`&&`p-1`,A===`large`&&`p-3`,u),"aria-label":`Image précédente`,children:(0,i.jsx)(r.ChevronLeft,{className:t.cn(`w-5 h-5`,A===`small`&&`w-4 h-4`,A===`large`&&`w-6 h-6`)})}),(0,i.jsx)(`button`,{onClick:e=>{$(e),Q()},className:t.cn(`absolute right-2 top-1/2 -translate-y-1/2 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`,A===`small`&&`p-1`,A===`large`&&`p-3`,u),"aria-label":`Image suivante`,children:(0,i.jsx)(r.ChevronRight,{className:t.cn(`w-5 h-5`,A===`small`&&`w-4 h-4`,A===`large`&&`w-6 h-6`)})})]})}),a&&e.length>1&&(0,i.jsx)(`button`,{onClick:e=>{$(e),V(e=>(p?.(!e),!e))},className:t.cn(`absolute top-2 right-2 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`),"aria-label":B?`Pause`:`Lecture`,children:B?(0,i.jsx)(r.Pause,{className:`w-4 h-4`}):(0,i.jsx)(r.Play,{className:`w-4 h-4`})}),s&&(0,i.jsx)(`button`,{onClick:e=>{$(e),yt()},className:t.cn(`absolute top-2 left-2 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`),"aria-label":H?`Quitter le plein écran`:`Plein écran`,children:H?(0,i.jsx)(r.X,{className:`w-4 h-4`}):(0,i.jsx)(r.Maximize2,{className:`w-4 h-4`})}),re&&J?.downloadUrl&&(0,i.jsx)(`button`,{onClick:e=>{$(e),bt()},className:t.cn(`absolute top-2 right-12 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`),"aria-label":`Télécharger l'image`,children:(0,i.jsx)(r.Download,{className:`w-4 h-4`})}),ie&&J?.shareUrl&&(0,i.jsx)(`button`,{onClick:e=>{$(e),xt()},className:t.cn(`absolute top-2 right-20 z-10`,`bg-black/50 hover:bg-black/70 text-white p-2 rounded-full`,`transition-all duration-200 hover:scale-110`,`focus:outline-none focus:ring-2 focus:ring-white`),"aria-label":`Partager l'image`,children:(0,i.jsx)(r.Share2,{className:`w-4 h-4`})}),ae&&(0,i.jsxs)(`div`,{className:t.cn(`absolute top-2 left-1/2 -translate-x-1/2 z-10`,`bg-black/50 text-white px-3 py-1 rounded-full text-sm`,he),children:[q+1,` / `,e.length]}),oe&&B&&(0,i.jsx)(`div`,{className:t.cn(`absolute bottom-0 left-0 right-0 h-1 bg-black/30`,ge),children:(0,i.jsx)(`div`,{ref:st,className:`h-full bg-white transition-all duration-100`,style:{width:`${rt}%`}})})]}),ee&&e.length>1&&(0,i.jsx)(`div`,{className:`absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2`,children:D?(0,i.jsx)(`div`,{className:`flex space-x-2`,children:D}):e.map((e,n)=>(0,i.jsx)(`button`,{onClick:e=>{$(e),ft(n)},className:t.cn(`transition-all duration-200`,`focus:outline-none focus:ring-2 focus:ring-white`,M===`circle`&&`rounded-full`,M===`square`&&`rounded`,M===`diamond`&&`rotate-45`,M===`line`&&`rounded-none`,j===`small`&&`w-2 h-2`,j===`medium`&&`w-3 h-3`,j===`large`&&`w-4 h-4`,M===`line`&&j===`small`&&`w-8 h-1`,M===`line`&&j===`medium`&&`w-12 h-1`,M===`line`&&j===`large`&&`w-16 h-1`,n===q?`bg-white`:`bg-white/50 hover:bg-white/70`,fe),"aria-label":`Aller à l'image ${n+1}`},n))}),ne&&e.length>1&&(0,i.jsx)(`div`,{className:`flex space-x-2 p-4 bg-gray-100 overflow-x-auto`,children:ze?(0,i.jsx)(`div`,{className:`flex space-x-2`,children:ze}):e.map((e,n)=>(0,i.jsx)(`button`,{onClick:e=>{$(e),ft(n),be?.(n)},className:t.cn(`flex-shrink-0 rounded overflow-hidden`,`border-2 transition-all duration-200`,`focus:outline-none focus:ring-2 focus:ring-blue-500`,k===`small`&&`w-12 h-12`,k===`medium`&&`w-16 h-16`,k===`large`&&`w-20 h-20`,N===`1/1`&&`aspect-square`,N===`4/3`&&`aspect-[4/3]`,N===`16/9`&&`aspect-video`,n===q?`border-blue-500`:`border-gray-300 hover:border-gray-400`,pe),children:(0,i.jsx)(`img`,{src:e.src,alt:e.alt,className:`w-full h-full object-cover`,loading:`lazy`})},n))})]})};exports.default=a;