@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-allocation-matrix/index.es.js

@@ -0,0 +1,735 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, ArrowUpDown as r, ChevronDown as i, ChevronUp as a, Filter as o, GripHorizontal as s, Percent as c, Search as l, X as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-allocation-matrix/index.tsx
+var p = {
+	sm: {
+		cell: "w-12 h-12",
+		header: "w-12 h-10",
+		text: "text-xs",
+		headerText: "text-xs",
+		padding: "p-1",
+		icon: "h-3 w-3"
+	},
+	md: {
+		cell: "w-16 h-16",
+		header: "w-16 h-12",
+		text: "text-sm",
+		headerText: "text-sm",
+		padding: "p-2",
+		icon: "h-4 w-4"
+	},
+	lg: {
+		cell: "w-20 h-20",
+		header: "w-20 h-14",
+		text: "text-base",
+		headerText: "text-base",
+		padding: "p-3",
+		icon: "h-5 w-5"
+	}
+}, m = {
+	blue: {
+		light: [
+			"bg-blue-50",
+			"bg-blue-100",
+			"bg-blue-200",
+			"bg-blue-300",
+			"bg-blue-400",
+			"bg-blue-500"
+		],
+		dark: [
+			"dark:bg-blue-950",
+			"dark:bg-blue-900",
+			"dark:bg-blue-800",
+			"dark:bg-blue-700",
+			"dark:bg-blue-600",
+			"dark:bg-blue-500"
+		],
+		text: [
+			"text-blue-900",
+			"text-blue-900",
+			"text-blue-900",
+			"text-white",
+			"text-white",
+			"text-white"
+		],
+		darkText: [
+			"dark:text-blue-100",
+			"dark:text-blue-100",
+			"dark:text-blue-100",
+			"dark:text-white",
+			"dark:text-white",
+			"dark:text-white"
+		]
+	},
+	green: {
+		light: [
+			"bg-green-50",
+			"bg-green-100",
+			"bg-green-200",
+			"bg-green-300",
+			"bg-green-400",
+			"bg-green-500"
+		],
+		dark: [
+			"dark:bg-green-950",
+			"dark:bg-green-900",
+			"dark:bg-green-800",
+			"dark:bg-green-700",
+			"dark:bg-green-600",
+			"dark:bg-green-500"
+		],
+		text: [
+			"text-green-900",
+			"text-green-900",
+			"text-green-900",
+			"text-white",
+			"text-white",
+			"text-white"
+		],
+		darkText: [
+			"dark:text-green-100",
+			"dark:text-green-100",
+			"dark:text-green-100",
+			"dark:text-white",
+			"dark:text-white",
+			"dark:text-white"
+		]
+	},
+	purple: {
+		light: [
+			"bg-purple-50",
+			"bg-purple-100",
+			"bg-purple-200",
+			"bg-purple-300",
+			"bg-purple-400",
+			"bg-purple-500"
+		],
+		dark: [
+			"dark:bg-purple-950",
+			"dark:bg-purple-900",
+			"dark:bg-purple-800",
+			"dark:bg-purple-700",
+			"dark:bg-purple-600",
+			"dark:bg-purple-500"
+		],
+		text: [
+			"text-purple-900",
+			"text-purple-900",
+			"text-purple-900",
+			"text-white",
+			"text-white",
+			"text-white"
+		],
+		darkText: [
+			"dark:text-purple-100",
+			"dark:text-purple-100",
+			"dark:text-purple-100",
+			"dark:text-white",
+			"dark:text-white",
+			"dark:text-white"
+		]
+	},
+	orange: {
+		light: [
+			"bg-orange-50",
+			"bg-orange-100",
+			"bg-orange-200",
+			"bg-orange-300",
+			"bg-orange-400",
+			"bg-orange-500"
+		],
+		dark: [
+			"dark:bg-orange-950",
+			"dark:bg-orange-900",
+			"dark:bg-orange-800",
+			"dark:bg-orange-700",
+			"dark:bg-orange-600",
+			"dark:bg-orange-500"
+		],
+		text: [
+			"text-orange-900",
+			"text-orange-900",
+			"text-orange-900",
+			"text-white",
+			"text-white",
+			"text-white"
+		],
+		darkText: [
+			"dark:text-orange-100",
+			"dark:text-orange-100",
+			"dark:text-orange-100",
+			"dark:text-white",
+			"dark:text-white",
+			"dark:text-white"
+		]
+	}
+}, h = {
+	low: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400",
+	medium: "bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400",
+	high: "bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-400",
+	critical: "bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400"
+};
+function g(e, t) {
+	return `${e}:${t}`;
+}
+function _(e, t = 100) {
+	if (e === 0) return 0;
+	let n = e / t * 100;
+	return n <= 20 ? 1 : n <= 40 ? 2 : n <= 60 ? 3 : n <= 80 ? 4 : 5;
+}
+function v(e, t, n) {
+	return t.reduce((t, r) => {
+		let i = g(e, r.id);
+		return t + (n.get(i) || 0);
+	}, 0);
+}
+function y(e, t, n) {
+	return t.reduce((t, r) => {
+		let i = g(r.id, e);
+		return t + (n.get(i) || 0);
+	}, 0);
+}
+function b(e, t, n, r) {
+	let i = 0, a = 0, o = 0, s = 0, c = 0;
+	e.forEach((e) => {
+		let l = v(e.id, t, n);
+		i += l;
+		let u = e.capacity || r;
+		l === 0 ? c++ : l > u ? a++ : l === u ? s++ : o++;
+	});
+	let l = e.length * t.length, u = l > 0 ? i / l : 0, d = e.reduce((e, t) => e + (t.capacity || r), 0), f = d > 0 ? Math.min(100, i / d * 100) : 0;
+	return {
+		totalAllocations: i,
+		averageAllocation: u,
+		overAllocatedCount: a,
+		underAllocatedCount: o,
+		fullyAllocatedCount: s,
+		unallocatedCount: c,
+		utilizationEfficiency: f
+	};
+}
+function x({ resources: e, consumers: n, initialAllocations: r = [], overAllocationThreshold: i = 100, onAllocationChange: a }) {
+	let [o, s] = t.useState(() => {
+		let e = /* @__PURE__ */ new Map();
+		return r.forEach((t) => {
+			let n = g(t.resourceId, t.consumerId);
+			e.set(n, t.value);
+		}), e;
+	}), [c, l] = t.useState(null), [u, d] = t.useState({
+		field: "name",
+		direction: "asc"
+	}), [f, p] = t.useState({
+		field: "name",
+		direction: "asc"
+	}), [m, h] = t.useState("all"), [_, x] = t.useState(""), S = t.useRef(r), C = t.useCallback((e, t, n) => {
+		let r = g(e, t), i = Math.max(0, n);
+		s((e) => {
+			let t = new Map(e);
+			return i === 0 ? t.delete(r) : t.set(r, i), t;
+		}), a?.(e, t, i);
+	}, [a]), w = t.useCallback((e, t) => {
+		let n = g(e, t);
+		return o.get(n) || 0;
+	}, [o]), T = t.useCallback((e) => v(e, n, o), [n, o]), E = t.useCallback((t) => y(t, e, o), [e, o]), D = t.useCallback((t) => {
+		let n = e.find((e) => e.id === t)?.capacity || i;
+		return T(t) > n;
+	}, [
+		e,
+		T,
+		i
+	]);
+	return {
+		allocations: o,
+		setAllocation: C,
+		getAllocation: w,
+		getRowTotal: T,
+		getColumnTotal: E,
+		isOverAllocated: D,
+		getSummary: t.useCallback(() => b(e, n, o, i), [
+			e,
+			n,
+			o,
+			i
+		]),
+		clearAll: t.useCallback(() => {
+			s(/* @__PURE__ */ new Map());
+		}, []),
+		reset: t.useCallback(() => {
+			let e = /* @__PURE__ */ new Map();
+			S.current.forEach((t) => {
+				let n = g(t.resourceId, t.consumerId);
+				e.set(n, t.value);
+			}), s(e);
+		}, []),
+		exportAllocations: t.useCallback(() => {
+			let e = [];
+			return o.forEach((t, n) => {
+				let [r, i] = n.split(":");
+				e.push({
+					resourceId: r,
+					consumerId: i,
+					value: t
+				});
+			}), e;
+		}, [o]),
+		importAllocations: t.useCallback((e) => {
+			let t = /* @__PURE__ */ new Map();
+			e.forEach((e) => {
+				let n = g(e.resourceId, e.consumerId);
+				t.set(n, e.value);
+			}), s(t);
+		}, []),
+		selectedCell: c,
+		setSelectedCell: l,
+		rowSort: u,
+		setRowSort: d,
+		columnSort: f,
+		setColumnSort: p,
+		filterMode: m,
+		setFilterMode: h,
+		searchQuery: _,
+		setSearchQuery: x,
+		filteredResources: t.useMemo(() => {
+			let t = [...e];
+			if (_) {
+				let e = _.toLowerCase();
+				t = t.filter((t) => t.name.toLowerCase().includes(e) || t.category?.toLowerCase().includes(e));
+			}
+			switch (m) {
+				case "over-allocated":
+					t = t.filter((e) => D(e.id));
+					break;
+				case "under-allocated":
+					t = t.filter((e) => {
+						let t = T(e.id), n = e.capacity || i;
+						return t > 0 && t < n;
+					});
+					break;
+				case "unallocated":
+					t = t.filter((e) => T(e.id) === 0);
+					break;
+			}
+			return t.sort((e, t) => {
+				let n = 0;
+				switch (u.field) {
+					case "name":
+						n = e.name.localeCompare(t.name);
+						break;
+					case "total":
+						n = T(e.id) - T(t.id);
+						break;
+				}
+				return u.direction === "asc" ? n : -n;
+			}), t;
+		}, [
+			e,
+			_,
+			m,
+			u,
+			D,
+			T,
+			i
+		]),
+		sortedConsumers: t.useMemo(() => {
+			let e = [...n];
+			return e.sort((e, t) => {
+				let n = 0;
+				switch (f.field) {
+					case "name":
+						n = e.name.localeCompare(t.name);
+						break;
+					case "total":
+						n = E(e.id) - E(t.id);
+						break;
+				}
+				return f.direction === "asc" ? n : -n;
+			}), e;
+		}, [
+			n,
+			f,
+			E
+		])
+	};
+}
+function S({ value: n, isSelected: r, isEditable: i, enableDrag: a, isOverAllocated: o, colorScheme: c, size: l, onSelect: u, onChange: h, onDragStart: g, onDrag: v, onDragEnd: y }) {
+	let [b, x] = t.useState(n.toString()), [S, C] = t.useState(!1), w = t.useRef(0), T = t.useRef(null), E = p[l], D = m[c], O = _(n);
+	t.useEffect(() => {
+		x(n.toString());
+	}, [n]), t.useEffect(() => {
+		r && T.current && (T.current.focus(), T.current.select());
+	}, [r]);
+	let k = (e) => {
+		e.key === "Enter" ? (h(Math.max(0, parseInt(b) || 0)), u()) : e.key === "Escape" && (x(n.toString()), u());
+	}, A = () => {
+		let e = Math.max(0, parseInt(b) || 0);
+		e !== n && h(e);
+	}, j = (e) => {
+		!a || !i || (C(!0), w.current = e.clientY, g(n));
+	}, M = t.useCallback((e) => {
+		S && v(w.current - e.clientY);
+	}, [S, v]), N = t.useCallback(() => {
+		S && (C(!1), y());
+	}, [S, y]);
+	return t.useEffect(() => {
+		if (S) return window.addEventListener("mousemove", M), window.addEventListener("mouseup", N), () => {
+			window.removeEventListener("mousemove", M), window.removeEventListener("mouseup", N);
+		};
+	}, [
+		S,
+		M,
+		N
+	]), /* @__PURE__ */ f("div", {
+		className: e("relative flex items-center justify-center border border-border/50 transition-all duration-200", E.cell, E.padding, D.light[O], D.dark[O], D.text[O], D.darkText[O], i && "cursor-pointer hover:ring-2 hover:ring-primary/50", r && "ring-2 ring-primary z-10", S && "cursor-ns-resize", o && n > 0 && "ring-2 ring-red-500 ring-inset"),
+		onClick: i && !r ? u : void 0,
+		onMouseDown: j,
+		children: [r && i ? /* @__PURE__ */ d("input", {
+			ref: T,
+			type: "number",
+			min: "0",
+			max: "200",
+			value: b,
+			onChange: (e) => x(e.target.value),
+			onKeyDown: k,
+			onBlur: A,
+			"aria-label": "Allocation value (percent)",
+			className: e("w-full h-full text-center bg-transparent outline-none", E.text, "font-medium tabular-nums", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none")
+		}) : /* @__PURE__ */ d("span", {
+			className: e(E.text, "font-medium tabular-nums select-none"),
+			children: n > 0 ? `${n}%` : "-"
+		}), a && i && !r && /* @__PURE__ */ d("div", {
+			className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-50 transition-opacity",
+			children: /* @__PURE__ */ d(s, { className: e(E.icon, "text-current") })
+		})]
+	});
+}
+function C({ label: t, subtitle: n, priority: r, isColumn: o, isSortable: s, sortDirection: c, size: l, onSort: u }) {
+	let m = p[l];
+	return /* @__PURE__ */ f("div", {
+		className: e("flex flex-col items-center justify-center bg-muted/50 border border-border/50", m.header, m.padding, o && "min-w-max", s && "cursor-pointer hover:bg-muted transition-colors"),
+		onClick: u,
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ d("span", {
+					className: e(m.headerText, "font-medium truncate max-w-full", o && "writing-mode-vertical-rl rotate-180"),
+					style: o ? { writingMode: "vertical-rl" } : void 0,
+					title: t,
+					children: t
+				}), s && c && d(c === "asc" ? a : i, { className: m.icon })]
+			}),
+			n && /* @__PURE__ */ d("span", {
+				className: e("text-muted-foreground", l === "sm" ? "text-[10px]" : "text-xs"),
+				children: n
+			}),
+			r && /* @__PURE__ */ d("span", {
+				className: e("mt-0.5 px-1 rounded text-[10px] font-medium", h[r]),
+				children: r
+			})
+		]
+	});
+}
+function w({ value: t, isOverAllocated: r, maxValue: i = 100, size: a, isRow: o }) {
+	let s = p[a], c = t / i * 100;
+	return /* @__PURE__ */ f("div", {
+		className: e("flex flex-col items-center justify-center border border-border/50", o ? "bg-muted/30" : "bg-muted/50", s.cell, s.padding, r && "bg-red-100 dark:bg-red-900/30"),
+		children: [
+			/* @__PURE__ */ f("span", {
+				className: e(s.text, "font-bold tabular-nums", r ? "text-red-600 dark:text-red-400" : "text-foreground"),
+				children: [t, "%"]
+			}),
+			o && /* @__PURE__ */ d("div", {
+				className: "w-full mt-1 h-1 bg-muted rounded-full overflow-hidden",
+				children: /* @__PURE__ */ d("div", {
+					className: e("h-full rounded-full transition-all duration-300", r ? "bg-red-500" : c >= 80 ? "bg-yellow-500" : "bg-green-500"),
+					style: { width: `${Math.min(c, 100)}%` }
+				})
+			}),
+			r && /* @__PURE__ */ d(n, { className: e(s.icon, "text-red-500 mt-0.5") })
+		]
+	});
+}
+function T({ summary: t, size: n }) {
+	let r = p[n];
+	return /* @__PURE__ */ d("div", {
+		className: "flex flex-wrap gap-4 p-4 bg-muted/30 rounded-lg border border-border",
+		children: [
+			{
+				label: "Total Allocated",
+				value: `${t.totalAllocations.toFixed(0)}%`,
+				color: "text-foreground"
+			},
+			{
+				label: "Avg per Cell",
+				value: `${t.averageAllocation.toFixed(1)}%`,
+				color: "text-foreground"
+			},
+			{
+				label: "Utilization",
+				value: `${t.utilizationEfficiency.toFixed(1)}%`,
+				color: "text-blue-600"
+			},
+			{
+				label: "Over-allocated",
+				value: t.overAllocatedCount.toString(),
+				color: t.overAllocatedCount > 0 ? "text-red-600" : "text-green-600"
+			},
+			{
+				label: "Fully Allocated",
+				value: t.fullyAllocatedCount.toString(),
+				color: "text-green-600"
+			},
+			{
+				label: "Under-allocated",
+				value: t.underAllocatedCount.toString(),
+				color: "text-yellow-600"
+			},
+			{
+				label: "Unallocated",
+				value: t.unallocatedCount.toString(),
+				color: "text-muted-foreground"
+			}
+		].map((t) => /* @__PURE__ */ f("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ d("span", {
+				className: e("text-muted-foreground", r.headerText),
+				children: t.label
+			}), /* @__PURE__ */ d("span", {
+				className: e("font-bold tabular-nums", r.text, t.color),
+				children: t.value
+			})]
+		}, t.label))
+	});
+}
+function E({ resources: n, consumers: i, allocations: a = [], editable: s = !0, enableDrag: m = !0, showRowTotals: h = !0, showColumnTotals: g = !0, showSummary: _ = !0, showFilters: v = !0, showSearch: y = !0, overAllocationThreshold: b = 100, cellSize: E = "md", colorScheme: D = "blue", onAllocationChange: O, onSave: k, formatValue: A, className: j }) {
+	let M = x({
+		resources: n,
+		consumers: i,
+		initialAllocations: a,
+		overAllocationThreshold: b,
+		onAllocationChange: O
+	}), [N, P] = t.useState(0), [F, I] = t.useState(null), L = p[E], R = (e, t, n) => {
+		P(n), I({
+			resourceId: e,
+			consumerId: t
+		});
+	}, z = (e, t, n) => {
+		if (!F) return;
+		let r = Math.max(0, Math.min(200, N + Math.round(n / 5)));
+		M.setAllocation(e, t, r);
+	}, B = () => {
+		I(null);
+	}, V = () => {
+		k?.(M.exportAllocations());
+	}, H = () => {
+		M.setRowSort({
+			field: M.rowSort.field === "name" ? "total" : "name",
+			direction: M.rowSort.field === M.rowSort.field && M.rowSort.direction === "asc" ? "desc" : "asc"
+		});
+	}, U = () => {
+		M.setColumnSort({
+			field: M.columnSort.field === "name" ? "total" : "name",
+			direction: M.columnSort.field === M.columnSort.field && M.columnSort.direction === "asc" ? "desc" : "asc"
+		});
+	}, W = M.getSummary();
+	return /* @__PURE__ */ f("div", {
+		className: e("space-y-4", j),
+		children: [
+			(v || y) && /* @__PURE__ */ f("div", {
+				className: "flex flex-wrap items-center gap-4",
+				children: [
+					y && /* @__PURE__ */ f("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ d(l, { className: e(L.icon, "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground") }),
+							/* @__PURE__ */ d("input", {
+								type: "text",
+								placeholder: "Search resources...",
+								"aria-label": "Search resources",
+								value: M.searchQuery,
+								onChange: (e) => M.setSearchQuery(e.target.value),
+								className: e("pl-10 pr-4 py-2 border border-border rounded-lg bg-background", L.text, "focus:outline-none focus:ring-2 focus:ring-primary/50")
+							}),
+							M.searchQuery && /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => M.setSearchQuery(""),
+								className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+								children: /* @__PURE__ */ d(u, { className: L.icon })
+							})
+						]
+					}),
+					v && /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ d(o, { className: e(L.icon, "text-muted-foreground") }), /* @__PURE__ */ d("div", {
+							className: "flex rounded-lg border border-border overflow-hidden",
+							children: [
+								"all",
+								"over-allocated",
+								"under-allocated",
+								"unallocated"
+							].map((t) => /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => M.setFilterMode(t),
+								className: e("px-3 py-1.5 transition-colors", L.text, M.filterMode === t ? "bg-primary text-primary-foreground" : "bg-background hover:bg-muted"),
+								children: t === "all" ? "All" : t === "over-allocated" ? "Over" : t === "under-allocated" ? "Under" : "None"
+							}, t))
+						})]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2 ml-auto",
+						children: [/* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: H,
+							className: e("flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg", "bg-background hover:bg-muted transition-colors", L.text),
+							children: [
+								/* @__PURE__ */ d(r, { className: L.icon }),
+								"Rows: ",
+								M.rowSort.field
+							]
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: U,
+							className: e("flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg", "bg-background hover:bg-muted transition-colors", L.text),
+							children: [
+								/* @__PURE__ */ d(r, { className: L.icon }),
+								"Columns: ",
+								M.columnSort.field
+							]
+						})]
+					})
+				]
+			}),
+			_ && /* @__PURE__ */ d(T, {
+				summary: W,
+				size: E
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "overflow-auto",
+				children: /* @__PURE__ */ f("div", {
+					className: "inline-block min-w-full",
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "flex",
+							children: [
+								/* @__PURE__ */ d("div", {
+									className: e("flex items-center justify-center bg-muted/50 border border-border/50 sticky left-0 z-20", L.header, L.padding),
+									children: /* @__PURE__ */ d(c, { className: e(L.icon, "text-muted-foreground") })
+								}),
+								M.sortedConsumers.map((e) => /* @__PURE__ */ d(C, {
+									label: e.name,
+									priority: e.priority,
+									isColumn: !0,
+									isSortable: !0,
+									sortDirection: M.columnSort.field === "name" ? M.columnSort.direction : null,
+									size: E,
+									onSort: U
+								}, e.id)),
+								h && /* @__PURE__ */ d("div", {
+									className: e("flex items-center justify-center bg-muted/50 border border-border/50", L.header, L.padding),
+									children: /* @__PURE__ */ d("span", {
+										className: e(L.headerText, "font-bold"),
+										children: "Total"
+									})
+								})
+							]
+						}),
+						M.filteredResources.map((e) => {
+							let t = M.getRowTotal(e.id), n = e.capacity || b, r = t > n;
+							return /* @__PURE__ */ f("div", {
+								className: "flex group",
+								children: [
+									/* @__PURE__ */ d(C, {
+										label: e.name,
+										subtitle: e.category,
+										isSortable: !0,
+										sortDirection: M.rowSort.field === "name" ? M.rowSort.direction : null,
+										size: E,
+										onSort: H
+									}),
+									M.sortedConsumers.map((t) => {
+										let n = M.getAllocation(e.id, t.id), i = M.selectedCell?.resourceId === e.id && M.selectedCell?.consumerId === t.id;
+										return /* @__PURE__ */ d(S, {
+											resourceId: e.id,
+											consumerId: t.id,
+											value: n,
+											isSelected: i,
+											isEditable: s,
+											enableDrag: m,
+											isOverAllocated: r,
+											colorScheme: D,
+											size: E,
+											onSelect: () => M.setSelectedCell(i ? null : {
+												resourceId: e.id,
+												consumerId: t.id
+											}),
+											onChange: (n) => M.setAllocation(e.id, t.id, n),
+											onDragStart: (n) => R(e.id, t.id, n),
+											onDrag: (n) => z(e.id, t.id, n),
+											onDragEnd: B
+										}, `${e.id}-${t.id}`);
+									}),
+									h && /* @__PURE__ */ d(w, {
+										value: t,
+										isOverAllocated: r,
+										maxValue: n,
+										size: E,
+										isRow: !0
+									})
+								]
+							}, e.id);
+						}),
+						g && /* @__PURE__ */ f("div", {
+							className: "flex",
+							children: [
+								/* @__PURE__ */ d("div", {
+									className: e("flex items-center justify-center bg-muted/50 border border-border/50", L.header, L.padding),
+									children: /* @__PURE__ */ d("span", {
+										className: e(L.headerText, "font-bold"),
+										children: "Total"
+									})
+								}),
+								M.sortedConsumers.map((e) => /* @__PURE__ */ d(w, {
+									value: M.getColumnTotal(e.id),
+									size: E
+								}, `total-${e.id}`)),
+								h && /* @__PURE__ */ f("div", {
+									className: e("flex items-center justify-center bg-muted border border-border/50 font-bold", L.cell, L.padding, L.text),
+									children: [W.totalAllocations.toFixed(0), "%"]
+								})
+							]
+						})
+					]
+				})
+			}),
+			s && k && /* @__PURE__ */ f("div", {
+				className: "flex justify-end gap-2",
+				children: [
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: M.reset,
+						className: e("px-4 py-2 border border-border rounded-lg", "bg-background hover:bg-muted transition-colors", L.text),
+						children: "Reset"
+					}),
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: M.clearAll,
+						className: e("px-4 py-2 border border-border rounded-lg", "bg-background hover:bg-muted transition-colors", L.text),
+						children: "Clear All"
+					}),
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: V,
+						className: e("px-4 py-2 rounded-lg", "bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", L.text),
+						children: "Save Allocations"
+					})
+				]
+			}),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes allocation-pulse {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.7; }\n        }\n\n        .allocation-cell-editing {\n          animation: allocation-pulse 1.5s ease-in-out infinite;\n        }\n\n        @keyframes over-allocation-warning {\n          0%, 100% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.5); }\n          50% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 1); }\n        }\n\n        .over-allocated-cell {\n          animation: over-allocation-warning 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+//#endregion
+export { E as WakaAllocationMatrix, E as default, x as useAllocationMatrix };