@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-resource-gauge/index.es.js

@@ -0,0 +1,344 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-resource-gauge/index.tsx
+var a = {
+	warning: 70,
+	danger: 85
+}, o = {
+	sm: {
+		size: 80,
+		strokeWidth: 6,
+		fontSize: "text-sm",
+		labelSize: "text-xs",
+		unitSize: "text-[10px]",
+		sparklineHeight: 16
+	},
+	md: {
+		size: 120,
+		strokeWidth: 8,
+		fontSize: "text-xl",
+		labelSize: "text-sm",
+		unitSize: "text-xs",
+		sparklineHeight: 24
+	},
+	lg: {
+		size: 180,
+		strokeWidth: 12,
+		fontSize: "text-3xl",
+		labelSize: "text-base",
+		unitSize: "text-sm",
+		sparklineHeight: 32
+	}
+}, s = {
+	full: {
+		startAngle: 0,
+		endAngle: 360,
+		rotation: -90
+	},
+	semi: {
+		startAngle: 0,
+		endAngle: 180,
+		rotation: -90
+	},
+	quarter: {
+		startAngle: 0,
+		endAngle: 90,
+		rotation: -90
+	}
+};
+function c(e, t, n, r) {
+	let i = (r - 90) * Math.PI / 180;
+	return {
+		x: e + n * Math.cos(i),
+		y: t + n * Math.sin(i)
+	};
+}
+function l(e, t, n, r, i) {
+	let a = c(e, t, n, i), o = c(e, t, n, r), s = i - r <= 180 ? "0" : "1";
+	return [
+		"M",
+		a.x,
+		a.y,
+		"A",
+		n,
+		n,
+		0,
+		s,
+		0,
+		o.x,
+		o.y
+	].join(" ");
+}
+function u(e, t) {
+	return e >= t.danger ? {
+		color: "#ef4444",
+		glowColor: "rgba(239, 68, 68, 0.6)",
+		zone: "danger"
+	} : e >= t.warning ? {
+		color: "#eab308",
+		glowColor: "rgba(234, 179, 8, 0.4)",
+		zone: "warning"
+	} : {
+		color: "#22c55e",
+		glowColor: "rgba(34, 197, 94, 0.3)",
+		zone: "safe"
+	};
+}
+function d({ data: t, width: n, height: a, color: o, className: s }) {
+	if (t.length < 2) return null;
+	let c = Math.max(...t, 100), l = Math.min(...t, 0), u = c - l || 1, d = `M ${t.map((e, r) => `${r / (t.length - 1) * n},${a - (e - l) / u * a}`).join(" L ")}`, f = `${d} L ${n},${a} L 0,${a} Z`;
+	return /* @__PURE__ */ i("svg", {
+		width: n,
+		height: a,
+		className: e("overflow-visible", s),
+		viewBox: `0 0 ${n} ${a}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ i("linearGradient", {
+				id: `sparkline-gradient-${o}`,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ r("stop", {
+					offset: "0%",
+					stopColor: o,
+					stopOpacity: "0.3"
+				}), /* @__PURE__ */ r("stop", {
+					offset: "100%",
+					stopColor: o,
+					stopOpacity: "0"
+				})]
+			}) }),
+			/* @__PURE__ */ r("path", {
+				d: f,
+				fill: `url(#sparkline-gradient-${o})`
+			}),
+			/* @__PURE__ */ r("path", {
+				d,
+				fill: "none",
+				stroke: o,
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		]
+	});
+}
+function f(e = 0, n = 100) {
+	let [r, i] = t.useState(e), [a, o] = t.useState([e]), s = t.useCallback((e) => {
+		let t = Math.max(0, Math.min(n, e));
+		i(t), o((e) => [...e, t].slice(-20));
+	}, [n]);
+	return {
+		value: r,
+		percentage: r / n * 100,
+		history: a,
+		updateValue: s,
+		setValue: i,
+		setHistory: o
+	};
+}
+function p({ value: f, max: p = 100, label: m, unit: h = "%", size: g = "md", variant: _ = "full", thresholds: v = a, showValue: y = !0, showLabel: b = !0, animated: x = !0, glowOnDanger: S = !0, history: C, className: w, onChange: T }) {
+	let [E, D] = t.useState(0), [O, k] = t.useState(!1), A = t.useRef(void 0), j = o[g], M = s[_], N = p > 0 ? Math.min(100, Math.max(0, f / p * 100)) : 0, P = p > 0 ? Math.min(100, Math.max(0, E / p * 100)) : 0, { color: F, glowColor: I, zone: L } = u(N, v), R = j.size, z = R / 2, B = (R - j.strokeWidth) / 2, V = 2 * Math.PI * B, H = M.endAngle / 360 * V;
+	P / 100 * H, t.useEffect(() => {
+		if (!x) {
+			D(f);
+			return;
+		}
+		let e = E, t = f - e, n = Date.now();
+		k(!0);
+		let r = () => {
+			let i = Date.now() - n, a = Math.min(i / 800, 1);
+			D(e + t * (1 - (1 - a) ** 3)), a < 1 ? A.current = requestAnimationFrame(r) : k(!1);
+		};
+		return A.current = requestAnimationFrame(r), () => {
+			A.current && cancelAnimationFrame(A.current);
+		};
+	}, [f, x]);
+	let U = l(z, z, B, 0, M.endAngle - .01), W = l(z, z, B, 0, P / 100 * M.endAngle || .01), G = S && L === "danger", K = Math.round(h === "%" ? P : E), q = _ === "full" ? R : _ === "semi" ? R / 2 + j.strokeWidth : R;
+	return /* @__PURE__ */ i("div", {
+		className: e("inline-flex flex-col items-center gap-1", w),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "relative",
+				style: {
+					width: R,
+					height: q,
+					overflow: "visible"
+				},
+				children: [
+					G && /* @__PURE__ */ r("div", {
+						className: e("absolute inset-0 rounded-full blur-xl transition-opacity duration-500", O ? "opacity-50" : "animate-pulse"),
+						style: { background: `radial-gradient(circle, ${I} 0%, transparent 70%)` }
+					}),
+					/* @__PURE__ */ i("svg", {
+						width: R,
+						height: R,
+						viewBox: `0 0 ${R} ${R}`,
+						className: "overflow-visible",
+						style: { transform: `rotate(${M.rotation}deg)` },
+						"aria-hidden": "true",
+						focusable: "false",
+						children: [
+							/* @__PURE__ */ i("defs", { children: [/* @__PURE__ */ i("linearGradient", {
+								id: `gauge-gradient-${g}-${_}`,
+								x1: "0%",
+								y1: "0%",
+								x2: "100%",
+								y2: "0%",
+								children: [/* @__PURE__ */ r("stop", {
+									offset: "0%",
+									stopColor: F,
+									stopOpacity: "0.8"
+								}), /* @__PURE__ */ r("stop", {
+									offset: "100%",
+									stopColor: F,
+									stopOpacity: "1"
+								})]
+							}), /* @__PURE__ */ r("filter", {
+								id: `gauge-shadow-${g}-${_}`,
+								x: "-20%",
+								y: "-20%",
+								width: "140%",
+								height: "140%",
+								children: /* @__PURE__ */ r("feDropShadow", {
+									dx: "0",
+									dy: "0",
+									stdDeviation: "3",
+									floodColor: F,
+									floodOpacity: "0.5"
+								})
+							})] }),
+							/* @__PURE__ */ r("path", {
+								d: U,
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: j.strokeWidth,
+								strokeLinecap: "round",
+								className: "text-muted opacity-20"
+							}),
+							_ === "full" && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("path", {
+								d: l(z, z, B, v.warning / 100 * 360, v.danger / 100 * 360),
+								fill: "none",
+								stroke: "#eab308",
+								strokeWidth: j.strokeWidth,
+								strokeLinecap: "round",
+								className: "opacity-10"
+							}), /* @__PURE__ */ r("path", {
+								d: l(z, z, B, v.danger / 100 * 360, 360),
+								fill: "none",
+								stroke: "#ef4444",
+								strokeWidth: j.strokeWidth,
+								strokeLinecap: "round",
+								className: "opacity-10"
+							})] }),
+							/* @__PURE__ */ r("path", {
+								d: W,
+								fill: "none",
+								stroke: `url(#gauge-gradient-${g}-${_})`,
+								strokeWidth: j.strokeWidth,
+								strokeLinecap: "round",
+								filter: G ? `url(#gauge-shadow-${g}-${_})` : void 0,
+								className: e(x && "transition-all duration-300 ease-out")
+							}),
+							P > 0 && /* @__PURE__ */ r("circle", {
+								cx: c(z, z, B, P / 100 * M.endAngle).x,
+								cy: c(z, z, B, P / 100 * M.endAngle).y,
+								r: j.strokeWidth / 3,
+								fill: "white",
+								className: e("transition-all duration-300", G && "animate-pulse")
+							})
+						]
+					}),
+					(y || b) && /* @__PURE__ */ i("div", {
+						className: e("absolute inset-0 flex flex-col items-center justify-center", _ === "semi" && "top-auto bottom-0 pb-1"),
+						style: {
+							height: _ === "semi" ? R / 2 : void 0,
+							top: _ === "semi" ? "auto" : void 0
+						},
+						children: [y && /* @__PURE__ */ i("div", {
+							className: "flex items-baseline gap-0.5",
+							children: [/* @__PURE__ */ r("span", {
+								className: e("font-bold tabular-nums transition-colors duration-300", j.fontSize),
+								style: { color: F },
+								children: K
+							}), h && /* @__PURE__ */ r("span", {
+								className: e("font-medium text-muted-foreground", j.unitSize),
+								children: h
+							})]
+						}), b && m && _ === "full" && /* @__PURE__ */ r("span", {
+							className: e("text-muted-foreground mt-0.5", j.labelSize),
+							children: m
+						})]
+					})
+				]
+			}),
+			b && m && _ !== "full" && /* @__PURE__ */ r("span", {
+				className: e("text-muted-foreground text-center", j.labelSize),
+				children: m
+			}),
+			C && C.length > 1 && /* @__PURE__ */ r("div", {
+				className: "mt-1",
+				children: /* @__PURE__ */ r(d, {
+					data: C,
+					width: j.size * .8,
+					height: j.sparklineHeight,
+					color: F
+				})
+			}),
+			/* @__PURE__ */ r("style", { children: "\n        @keyframes gauge-pulse {\n          0%, 100% { opacity: 0.6; }\n          50% { opacity: 1; }\n        }\n      " })
+		]
+	});
+}
+function m({ label: e = "CPU", ...t }) {
+	return /* @__PURE__ */ r(p, {
+		label: e,
+		unit: "%",
+		...t
+	});
+}
+function h({ label: e = "RAM", max: t = 100, unit: n = "GB", ...i }) {
+	return /* @__PURE__ */ r(p, {
+		label: e,
+		max: t,
+		unit: n,
+		...i
+	});
+}
+function g({ label: e = "Storage", max: t = 100, unit: n = "GB", ...i }) {
+	return /* @__PURE__ */ r(p, {
+		label: e,
+		max: t,
+		unit: n,
+		...i
+	});
+}
+function _({ label: e = "Network", max: t = 100, unit: n = "Mbps", ...i }) {
+	return /* @__PURE__ */ r(p, {
+		label: e,
+		max: t,
+		unit: n,
+		thresholds: {
+			warning: 60,
+			danger: 80
+		},
+		...i
+	});
+}
+function v({ gauges: t, direction: n = "horizontal", gap: i = "md", className: a }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("flex flex-wrap items-center justify-center", n === "vertical" && "flex-col", {
+			sm: "gap-2",
+			md: "gap-4",
+			lg: "gap-8"
+		}[i], a),
+		children: t.map((e) => /* @__PURE__ */ r(p, { ...e }, e.id))
+	});
+}
+//#endregion
+export { m as WakaCpuGauge, _ as WakaNetworkGauge, h as WakaRamGauge, v as WakaResourceGaugeGroup, g as WakaStorageGauge, p as default, f as useResourceGauge };

package/dist/components/waka-resource-pool/index.cjs.js

@@ -0,0 +1,54 @@
+"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={compute:{color:`bg-blue-500`,lightColor:`bg-blue-100`,textColor:`text-blue-600`,borderColor:`border-blue-500`,gradient:`from-blue-500 to-blue-600`,icon:r.Cpu},memory:{color:`bg-purple-500`,lightColor:`bg-purple-100`,textColor:`text-purple-600`,borderColor:`border-purple-500`,gradient:`from-purple-500 to-purple-600`,icon:r.MemoryStick},storage:{color:`bg-amber-500`,lightColor:`bg-amber-100`,textColor:`text-amber-600`,borderColor:`border-amber-500`,gradient:`from-amber-500 to-amber-600`,icon:r.HardDrive},network:{color:`bg-emerald-500`,lightColor:`bg-emerald-100`,textColor:`text-emerald-600`,borderColor:`border-emerald-500`,gradient:`from-emerald-500 to-emerald-600`,icon:r.Network}};function o(e){return Math.min(100,(e.used+(e.reserved||0))/e.total*100)}function s(e){return Math.min(100,e.used/e.total*100)}function c(e){return Math.min(100,(e.reserved||0)/e.total*100)}function l(e,t=80){return o(e)>=t}function u(e,t=95){return o(e)>=t}function d({pool:e,animated:r=!0,onBlockClick:o,draggable:s}){let c=a[e.type||`compute`],l=Math.min(20,e.total),u=e.total/l,d=Math.round(e.used/u),f=Math.round((e.reserved||0)/u),p=l-d-f,[m,h]=n.useState(null),g=(t,n,r)=>{t.dataTransfer.setData(`blockIndex`,n.toString()),t.dataTransfer.setData(`blockType`,r),t.dataTransfer.setData(`poolId`,e.id)},_=(e,t)=>{e.preventDefault(),h(t)},v=()=>{h(null)},y=(t,n,r)=>{t.preventDefault(),h(null);let i=t.dataTransfer.getData(`blockType`);t.dataTransfer.getData(`poolId`)===e.id&&i!==r&&(i===`available`&&r===`used`?o?.(n,!1):i===`used`&&r===`available`&&o?.(n,!0))};return(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-1.5`,children:[Array.from({length:d}).map((e,n)=>(0,i.jsx)(`div`,{draggable:s,onDragStart:e=>g(e,n,`used`),onDragOver:e=>_(e,n),onDragLeave:v,onDrop:e=>y(e,n,`used`),onClick:()=>o?.(n,!0),className:t.cn(`h-6 w-6 rounded-sm cursor-pointer transition-all`,c.color,`hover:opacity-80 hover:scale-105`,r&&`animate-block-appear`,m===n&&`ring-2 ring-white ring-offset-2`,s&&`cursor-grab active:cursor-grabbing`),style:{animationDelay:r?`${n*30}ms`:void 0}},`used-${n}`)),Array.from({length:f}).map((e,n)=>(0,i.jsx)(`div`,{className:t.cn(`h-6 w-6 rounded-sm relative overflow-hidden`,c.lightColor,`border-2`,c.borderColor,r&&`animate-block-appear`),style:{animationDelay:r?`${(d+n)*30}ms`:void 0},children:(0,i.jsx)(`div`,{className:t.cn(`absolute inset-0 opacity-50`,c.color),style:{backgroundImage:`repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 3px,
+                currentColor 3px,
+                currentColor 6px
+              )`}})},`reserved-${n}`)),Array.from({length:p}).map((e,n)=>(0,i.jsx)(`div`,{draggable:s,onDragStart:e=>g(e,n,`available`),onDragOver:e=>_(e,d+f+n),onDragLeave:v,onDrop:e=>y(e,n,`available`),onClick:()=>o?.(n,!1),className:t.cn(`h-6 w-6 rounded-sm cursor-pointer transition-all`,`border-2 border-dashed border-muted-foreground/30`,`hover:border-muted-foreground/60 hover:bg-muted/50`,r&&`animate-block-appear`,m===d+f+n&&`ring-2 ring-primary ring-offset-2`,s&&`cursor-grab active:cursor-grabbing`),style:{animationDelay:r?`${(d+f+n)*30}ms`:void 0}},`available-${n}`)),(0,i.jsx)(`style`,{children:`
+        @keyframes block-appear {
+          0% { transform: scale(0); opacity: 0; }
+          100% { transform: scale(1); opacity: 1; }
+        }
+        .animate-block-appear {
+          animation: block-appear 0.3s ease-out forwards;
+        }
+      `})]})}function f({pool:e,animated:r=!0,onClick:o}){let l=a[e.type||`compute`],u=s(e),d=c(e),[f,p]=n.useState(0),[m,h]=n.useState(0),g=n.useRef(null);return n.useEffect(()=>{if(!r){p(u),h(d);return}let e=Date.now(),t=f,n=m,i=()=>{let r=Date.now()-e,a=Math.min(r/800,1),o=1-(1-a)**3;p(t+(u-t)*o),h(n+(d-n)*o),a<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[u,d,r]),(0,i.jsxs)(`div`,{ref:g,className:`relative h-8 w-full rounded-lg overflow-hidden bg-muted cursor-pointer group`,onClick:e=>{if(!g.current||!o)return;let t=g.current.getBoundingClientRect();o((e.clientX-t.left)/t.width*100)},children:[(0,i.jsx)(`div`,{className:t.cn(`absolute inset-y-0 left-0 transition-all duration-300`,`bg-gradient-to-r ${l.gradient}`),style:{width:`${f}%`},children:(0,i.jsx)(`div`,{className:`absolute inset-0 bg-gradient-to-b from-white/20 to-transparent`})}),(0,i.jsx)(`div`,{className:t.cn(`absolute inset-y-0 transition-all duration-300`,l.lightColor),style:{left:`${f}%`,width:`${m}%`},children:(0,i.jsx)(`div`,{className:`absolute inset-0`,style:{backgroundImage:`repeating-linear-gradient(
+              45deg,
+              transparent,
+              transparent 4px,
+              rgba(0,0,0,0.1) 4px,
+              rgba(0,0,0,0.1) 8px
+            )`}})}),(0,i.jsx)(`div`,{className:`absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity`}),f>15&&(0,i.jsxs)(`div`,{className:`absolute inset-y-0 left-2 flex items-center text-white text-xs font-medium`,children:[Math.round(f),`%`]})]})}function p({pool:e,animated:o=!0,onClick:d}){let f=a[e.type||`compute`],p=s(e),m=c(e),[h,g]=n.useState(0),_=n.useRef(null);n.useEffect(()=>{if(!o){g(p+m);return}let e=Date.now(),t=h,n=p+m,r=()=>{let i=Date.now()-e,a=Math.min(i/1e3,1),o=a<.5?4*a*a*a:1-(-2*a+2)**3/2;g(t+(n-t)*o),a<1&&requestAnimationFrame(r)};requestAnimationFrame(r)},[p,m,o]);let v=e=>{if(!_.current||!d)return;let t=_.current.getBoundingClientRect();d(100-(e.clientY-t.top)/t.height*100)},y=u(e),b=l(e);return(0,i.jsxs)(`div`,{ref:_,className:`relative h-32 w-24 rounded-xl overflow-hidden bg-muted border-2 border-muted-foreground/20 cursor-pointer group`,onClick:v,children:[(0,i.jsx)(`div`,{className:`absolute inset-0 bg-gradient-to-r from-white/10 via-transparent to-black/10`}),(0,i.jsxs)(`div`,{className:t.cn(`absolute inset-x-0 bottom-0 transition-all`,`bg-gradient-to-t ${f.gradient}`,o&&`animate-liquid-wave`),style:{height:`${h}%`},children:[(0,i.jsx)(`div`,{className:`absolute inset-x-0 -top-2 h-4`,children:(0,i.jsx)(`svg`,{viewBox:`0 0 100 20`,preserveAspectRatio:`none`,className:`w-full h-full`,"aria-hidden":`true`,focusable:`false`,children:(0,i.jsx)(`path`,{d:o?`M0,10 Q25,0 50,10 T100,10 V20 H0 Z`:`M0,10 L100,10 V20 H0 Z`,fill:`currentColor`,className:f.textColor,style:{opacity:.8}})})}),o&&(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden`,children:[...[,,,,,]].map((e,t)=>(0,i.jsx)(`div`,{className:`absolute w-2 h-2 rounded-full bg-white/30 animate-bubble`,style:{left:`${20+t*15}%`,bottom:`10%`,animationDelay:`${t*.5}s`,animationDuration:`${2+Math.random()}s`}},t))}),(0,i.jsx)(`div`,{className:`absolute inset-0 bg-gradient-to-r from-white/20 via-transparent to-black/10`})]}),e.reserved&&e.reserved>0&&(0,i.jsx)(`div`,{className:`absolute inset-x-0 transition-all`,style:{bottom:`${e.used/e.total*100}%`,height:`${m}%`},children:(0,i.jsx)(`div`,{className:t.cn(`absolute inset-0`,f.lightColor),style:{backgroundImage:`repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 3px,
+                rgba(0,0,0,0.1) 3px,
+                rgba(0,0,0,0.1) 6px
+              )`}})}),(0,i.jsxs)(`div`,{className:`absolute inset-y-0 right-1 flex flex-col justify-between py-2`,children:[(0,i.jsx)(`span`,{className:`text-[8px] text-muted-foreground`,children:`100%`}),(0,i.jsx)(`span`,{className:`text-[8px] text-muted-foreground`,children:`50%`}),(0,i.jsx)(`span`,{className:`text-[8px] text-muted-foreground`,children:`0%`})]}),(b||y)&&(0,i.jsx)(`div`,{className:t.cn(`absolute top-2 left-2 p-1 rounded-full`,y?`bg-red-500 animate-pulse`:`bg-amber-500`),children:(0,i.jsx)(r.AlertTriangle,{className:`h-3 w-3 text-white`})}),(0,i.jsx)(`div`,{className:`absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity`}),(0,i.jsx)(`style`,{children:`
+        @keyframes liquid-wave {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-2px); }
+        }
+        @keyframes bubble {
+          0% { transform: translateY(0) scale(1); opacity: 0.6; }
+          100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
+        }
+        .animate-liquid-wave {
+          animation: liquid-wave 3s ease-in-out infinite;
+        }
+        .animate-bubble {
+          animation: bubble 2s ease-out infinite;
+        }
+      `})]})}function m({pool:e,variant:n,showLabels:o,showCapacity:s,onAllocate:c,onRelease:m,draggable:h,animated:g}){let _=a[e.type||`compute`],v=_.icon,y=l(e),b=u(e),x=e.total-e.used-(e.reserved||0);return(0,i.jsxs)(`div`,{className:`rounded-lg border bg-card p-4 shadow-sm`,children:[o&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between mb-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:t.cn(`p-1.5 rounded-md`,_.lightColor),children:(0,i.jsx)(v,{className:t.cn(`h-4 w-4`,_.textColor)})}),(0,i.jsx)(`span`,{className:`font-medium text-sm`,children:e.name})]}),(y||b)&&(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium`,b?`bg-red-100 text-red-700`:`bg-amber-100 text-amber-700`),children:[(0,i.jsx)(r.AlertTriangle,{className:`h-3 w-3`}),b?`Critical`:`Near Capacity`]})]}),(0,i.jsxs)(`div`,{className:t.cn(`flex`,n===`liquid`?`justify-center`:`flex-col`),children:[n===`blocks`&&(0,i.jsx)(d,{pool:e,animated:g,onBlockClick:(t,n)=>{let r=e.total/Math.min(20,e.total),i=Math.round(r);n?m?.(i):c?.(i)},draggable:h}),n===`bar`&&(0,i.jsx)(f,{pool:e,animated:g,onClick:t=>{let n=Math.round(t/100*e.total)-e.used;n>0?c?.(n):n<0&&m?.(Math.abs(n))}}),n===`liquid`&&(0,i.jsx)(p,{pool:e,animated:g,onClick:t=>{let n=Math.round(t/100*e.total)-e.used;n>0?c?.(n):n<0&&m?.(Math.abs(n))}})]}),s&&(0,i.jsxs)(`div`,{className:`mt-3 flex items-center justify-between text-sm`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:t.cn(`h-3 w-3 rounded-sm`,_.color)}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Used:`}),(0,i.jsx)(`span`,{className:`font-medium tabular-nums`,children:e.used})]}),e.reserved&&e.reserved>0&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:t.cn(`h-3 w-3 rounded-sm border-2`,_.borderColor,_.lightColor)}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Reserved:`}),(0,i.jsx)(`span`,{className:`font-medium tabular-nums`,children:e.reserved})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-sm border-2 border-dashed border-muted-foreground/30`}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Available:`}),(0,i.jsx)(`span`,{className:`font-medium tabular-nums`,children:x})]})]}),(0,i.jsxs)(`div`,{className:t.cn(`font-semibold tabular-nums`,_.textColor),children:[e.used+(e.reserved||0),`/`,e.total,` `,e.unit||`units`]})]}),(c||m)&&(0,i.jsxs)(`div`,{className:`mt-3 flex items-center gap-2`,children:[m&&e.used>0&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{let t=Math.max(1,Math.round(e.total*.1));m?.(Math.min(t,e.used))},className:t.cn(`flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium transition-colors`,`bg-muted hover:bg-muted/80 text-muted-foreground hover:text-foreground`),children:[(0,i.jsx)(r.Minus,{className:`h-3 w-3`}),`Release`]}),c&&x>0&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{let t=Math.max(1,Math.round(e.total*.1));c?.(Math.min(t,x))},className:t.cn(`flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium transition-colors`,`${_.color} text-white hover:opacity-90`),children:[(0,i.jsx)(r.Plus,{className:`h-3 w-3`}),`Allocate`]}),h&&(0,i.jsxs)(`div`,{className:`ml-auto flex items-center gap-1 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.GripVertical,{className:`h-3 w-3`}),`Drag to allocate`]})]})]})}function h({pools:e,variant:n=`blocks`,showLabels:r=!0,showCapacity:a=!0,onAllocate:o,onRelease:s,draggable:c=!1,animated:l=!0,className:u}){return(0,i.jsx)(`div`,{className:t.cn(`space-y-4`,u),children:e.map(e=>(0,i.jsx)(m,{pool:e,variant:n,showLabels:r,showCapacity:a,onAllocate:o?t=>o(e.id,t):void 0,onRelease:s?t=>s(e.id,t):void 0,draggable:c,animated:l},e.id))})}function g({pools:e,showLegend:n=!0,className:o}){let s=Math.max(...e.map(e=>e.total));return(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,o),children:[(0,i.jsx)(`div`,{className:`space-y-3`,children:e.map(e=>{let n=a[e.type||`compute`],o=n.icon;e.used/s*100,(e.reserved||0)/s*100;let c=e.total/s*100,d=u(e),f=l(e);return(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 w-32 flex-shrink-0`,children:[(0,i.jsx)(`div`,{className:t.cn(`p-1 rounded`,n.lightColor),children:(0,i.jsx)(o,{className:t.cn(`h-3.5 w-3.5`,n.textColor)})}),(0,i.jsx)(`span`,{className:`text-sm font-medium truncate`,children:e.name})]}),(0,i.jsx)(`div`,{className:`flex-1 relative`,children:(0,i.jsxs)(`div`,{className:`h-6 rounded bg-muted relative overflow-hidden`,style:{width:`${c}%`},children:[(0,i.jsx)(`div`,{className:t.cn(`absolute inset-y-0 left-0 rounded-l`,`bg-gradient-to-r ${n.gradient}`),style:{width:`${e.used/e.total*100}%`}}),e.reserved&&e.reserved>0&&(0,i.jsx)(`div`,{className:t.cn(`absolute inset-y-0`,n.lightColor),style:{left:`${e.used/e.total*100}%`,width:`${(e.reserved||0)/e.total*100}%`,backgroundImage:`repeating-linear-gradient(
+                          45deg,
+                          transparent,
+                          transparent 3px,
+                          rgba(0,0,0,0.1) 3px,
+                          rgba(0,0,0,0.1) 6px
+                        )`}}),(f||d)&&(0,i.jsx)(`div`,{className:t.cn(`absolute right-1 top-1/2 -translate-y-1/2`,d?`text-red-500`:`text-amber-500`),children:(0,i.jsx)(r.AlertTriangle,{className:`h-3.5 w-3.5`})})]})}),(0,i.jsxs)(`div`,{className:`w-28 flex-shrink-0 text-right`,children:[(0,i.jsxs)(`span`,{className:t.cn(`text-sm font-semibold tabular-nums`,n.textColor),children:[e.used+(e.reserved||0),`/`,e.total]}),(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground ml-1`,children:e.unit||`units`})]})]},e.id)})}),n&&(0,i.jsxs)(`div`,{className:`flex items-center gap-6 pt-2 border-t`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-sm bg-gradient-to-r from-gray-500 to-gray-600`}),(0,i.jsx)(`span`,{children:`Used`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-sm bg-gray-200`,style:{backgroundImage:`repeating-linear-gradient(
+                  45deg,
+                  transparent,
+                  transparent 2px,
+                  rgba(0,0,0,0.1) 2px,
+                  rgba(0,0,0,0.1) 4px
+                )`}}),(0,i.jsx)(`span`,{children:`Reserved`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-sm bg-muted border border-muted-foreground/20`}),(0,i.jsx)(`span`,{children:`Available`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground ml-auto`,children:[(0,i.jsx)(r.AlertTriangle,{className:`h-3 w-3 text-amber-500`}),(0,i.jsx)(`span`,{children:`Near Capacity (80%+)`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.AlertTriangle,{className:`h-3 w-3 text-red-500`}),(0,i.jsx)(`span`,{children:`Critical (95%+)`})]})]})]})}function _({initialPools:e,onPoolChange:t}){let[r,i]=n.useState(e);return{pools:r,setPools:i,allocate:n.useCallback((e,n)=>{i(r=>{let i=r.map(t=>{if(t.id!==e)return t;let r=t.total-t.used-(t.reserved||0),i=Math.min(n,r);return{...t,used:t.used+i}});return t?.(i),i})},[t]),release:n.useCallback((e,n)=>{i(r=>{let i=r.map(t=>{if(t.id!==e)return t;let r=Math.min(n,t.used);return{...t,used:t.used-r}});return t?.(i),i})},[t]),reserve:n.useCallback((e,n)=>{i(r=>{let i=r.map(t=>{if(t.id!==e)return t;let r=t.total-t.used-(t.reserved||0),i=Math.min(n,r);return{...t,reserved:(t.reserved||0)+i}});return t?.(i),i})},[t]),unreserve:n.useCallback((e,n)=>{i(r=>{let i=r.map(t=>{if(t.id!==e)return t;let r=Math.min(n,t.reserved||0);return{...t,reserved:(t.reserved||0)-r}});return t?.(i),i})},[t]),getPool:n.useCallback(e=>r.find(t=>t.id===e),[r]),getPoolStats:n.useCallback(e=>{let t=r.find(t=>t.id===e);if(!t)return null;let n=e=>t.total>0?e/t.total*100:0;return{used:t.used,reserved:t.reserved||0,available:t.total-t.used-(t.reserved||0),total:t.total,usedPercent:n(t.used),reservedPercent:n(t.reserved||0),availablePercent:n(t.total-t.used-(t.reserved||0)),isNearCapacity:l(t),isCritical:u(t)}},[r]),getTotalStats:n.useCallback(()=>{let e=r.reduce((e,t)=>({used:e.used+t.used,reserved:e.reserved+(t.reserved||0),total:e.total+t.total}),{used:0,reserved:0,total:0});return{...e,available:e.total-e.used-e.reserved,usedPercent:e.used/e.total*100,reservedPercent:e.reserved/e.total*100,availablePercent:(e.total-e.used-e.reserved)/e.total*100}},[r])}}exports.WakaResourcePoolComparison=g,exports.default=h,exports.useResourcePool=_;

package/dist/components/waka-resource-pool/index.d.ts

@@ -56,7 +56,7 @@ export declare function useResourcePool({ initialPools, onPoolChange }: UseResou
     release: (poolId: string, amount: number) => void;
     reserve: (poolId: string, amount: number) => void;
     unreserve: (poolId: string, amount: number) => void;
-    getPool: (poolId: string) => ResourcePool;
+    getPool: (poolId: string) => ResourcePool | undefined;
     getPoolStats: (poolId: string) => {
         used: number;
         reserved: number;
@@ -67,7 +67,7 @@ export declare function useResourcePool({ initialPools, onPoolChange }: UseResou
         availablePercent: number;
         isNearCapacity: boolean;
         isCritical: boolean;
-    };
+    } | null;
     getTotalStats: () => {
         available: number;
         usedPercent: number;