@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

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

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

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../checkbox/index.cjs.js`);let r=require(`react`);r=e.__toESM(r);let i=require(`lucide-react`),a=require(`react/jsx-runtime`);var o=r.createContext(null);function s(){let e=r.useContext(o);if(!e)throw Error(`useTreeContext must be used within a WakaTree`);return e}function c(e){let t=[];function n(e){for(let r of e)t.push(r.id),r.children&&n(r.children)}return n(e),t}function l({node:e,level:r}){let{selectedIds:o,selectionMode:c,showCheckboxes:u,showIcons:d,draggable:f,size:p,toggleSelect:m,toggleExpand:h,isSelected:g,isExpanded:_,onDragStart:v,onDragOver:y,onDragLeave:b,onDrop:x,dragOverId:S,dragPosition:C}=s(),w=e.children&&e.children.length>0,T=_(e.id),E=g(e.id),D={sm:`py-0.5 text-xs`,md:`py-1 text-sm`,lg:`py-1.5 text-base`},O={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},k=r*(p===`sm`?12:p===`md`?16:20),A=t=>{t.stopPropagation(),c!==`none`&&e.selectable!==!1&&!e.disabled&&m(e.id)},j=t=>{t.stopPropagation(),h(e.id)},M=t=>{f&&v(t,e.id)},N=t=>{f&&(t.preventDefault(),y(t,e.id))},P=e=>{f&&b(e)},F=t=>{if(!f)return;t.preventDefault();let n=t.currentTarget.getBoundingClientRect(),r=t.clientY-n.top,i=n.height,a=`inside`;r<i*.25?a=`before`:r>i*.75&&(a=`after`),x(t,e.id,a)},I=()=>e.icon?e.icon:d?w?T?(0,a.jsx)(i.FolderOpen,{className:t.cn(O[p],`text-amber-500`)}):(0,a.jsx)(i.Folder,{className:t.cn(O[p],`text-amber-500`)}):(0,a.jsx)(i.File,{className:t.cn(O[p],`text-muted-foreground`)}):null,L=S===e.id;return(0,a.jsxs)(`li`,{role:`treeitem`,"aria-expanded":w?T:void 0,"aria-selected":E,children:[(0,a.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 rounded-md cursor-pointer transition-colors group`,D[p],E&&`bg-primary/10 text-primary`,!E&&`hover:bg-muted`,e.disabled&&`opacity-50 cursor-not-allowed`,L&&C===`before`&&`border-t-2 border-primary`,L&&C===`after`&&`border-b-2 border-primary`,L&&C===`inside`&&`bg-primary/20`),style:{paddingLeft:k},onClick:A,draggable:f&&!e.disabled,onDragStart:M,onDragOver:N,onDragLeave:P,onDrop:F,children:[f&&(0,a.jsx)(i.GripVertical,{className:t.cn(O[p],`text-muted-foreground opacity-0 group-hover:opacity-100 cursor-grab`)}),(0,a.jsx)(`button`,{type:`button`,onClick:j,className:t.cn(`flex items-center justify-center rounded hover:bg-muted-foreground/10`,!w&&`invisible`),tabIndex:-1,children:T?(0,a.jsx)(i.ChevronDown,{className:O[p]}):(0,a.jsx)(i.ChevronRight,{className:O[p]})}),u&&c!==`none`&&(0,a.jsx)(n.Checkbox,{checked:E,onCheckedChange:()=>m(e.id),disabled:e.disabled||e.selectable===!1,className:p===`sm`?`h-3 w-3`:p===`lg`?`h-5 w-5`:`h-4 w-4`}),I(),(0,a.jsx)(`span`,{className:`truncate flex-1`,children:e.label})]}),w&&T&&(0,a.jsx)(`ul`,{role:`group`,className:`list-none`,children:e.children.map(e=>(0,a.jsx)(l,{node:e,level:r+1},e.id))})]})}function u({data:e,selectedIds:n,onSelect:i,expandedIds:s,onExpand:u,selectionMode:d=`single`,showCheckboxes:f=!1,showIcons:p=!0,draggable:m=!1,onDrop:h,size:g=`md`,className:_,defaultExpandAll:v=!1}){let[y,b]=r.useState([]),[x,S]=r.useState(()=>v?c(e):[]),[C,w]=r.useState(null),[T,E]=r.useState(null),[D,O]=r.useState(null),k=n??y,A=s??x,j={selectedIds:k,expandedIds:A,selectionMode:d,showCheckboxes:f,showIcons:p,draggable:m,size:g,toggleSelect:r.useCallback(e=>{let t;t=d===`single`?k.includes(e)?[]:[e]:k.includes(e)?k.filter(t=>t!==e):[...k,e],i?i(t):b(t)},[k,d,i]),toggleExpand:r.useCallback(e=>{let t=A.includes(e)?A.filter(t=>t!==e):[...A,e];u?u(t):S(t)},[A,u]),isSelected:r.useCallback(e=>k.includes(e),[k]),isExpanded:r.useCallback(e=>A.includes(e),[A]),onDragStart:r.useCallback((e,t)=>{w(t),e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/plain`,t)},[]),onDragOver:r.useCallback((e,t)=>{if(C===t)return;let n=e.currentTarget.getBoundingClientRect(),r=e.clientY-n.top,i=n.height,a=`inside`;r<i*.25?a=`before`:r>i*.75&&(a=`after`),E(t),O(a)},[C]),onDragLeave:r.useCallback(()=>{E(null),O(null)},[]),onDrop:r.useCallback((e,t,n)=>{e.preventDefault(),C&&C!==t&&h&&h(C,t,n),w(null),E(null),O(null)},[C,h]),dragOverId:T,dragPosition:D};return(0,a.jsx)(o.Provider,{value:j,children:(0,a.jsx)(`ul`,{role:`tree`,"aria-multiselectable":d===`multiple`,className:t.cn(`list-none`,_),children:e.map(e=>(0,a.jsx)(l,{node:e,level:0},e.id))})})}function d(e,t){for(let n of e){if(n.id===t)return n;if(n.children){let e=d(n.children,t);if(e)return e}}return null}function f(e,t,n){return e.map(e=>e.id===t?{...e,...n}:e.children?{...e,children:f(e.children,t,n)}:e)}function p(e,t){return e.filter(e=>e.id!==t).map(e=>e.children?{...e,children:p(e.children,t)}:e)}function m(e,t,n){return e.map(e=>e.id===t?{...e,children:[...e.children||[],n]}:e.children?{...e,children:m(e.children,t,n)}:e)}function h(e,t,n,r){let i=d(e,t);if(!i)return e;let a=p(e,t);if(r===`inside`)a=m(a,n,i);else{let e=t=>{let a=[];for(let o of t)o.id===n?r===`before`?(a.push(i),a.push(o)):(a.push(o),a.push(i)):a.push({...o,children:o.children?e(o.children):void 0});return a};a=e(a)}return a}exports.addChildNode=m,exports.default=u,exports.findNodeById=d,exports.moveNode=h,exports.removeNode=p,exports.updateNode=f;

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

@@ -0,0 +1,197 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Checkbox as t } from "../checkbox/index.es.js";
+import * as n from "react";
+import { ChevronDown as r, ChevronRight as i, File as a, Folder as o, FolderOpen as s, GripVertical as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-tree/index.tsx
+var d = n.createContext(null);
+function f() {
+	let e = n.useContext(d);
+	if (!e) throw Error("useTreeContext must be used within a WakaTree");
+	return e;
+}
+function p(e) {
+	let t = [];
+	function n(e) {
+		for (let r of e) t.push(r.id), r.children && n(r.children);
+	}
+	return n(e), t;
+}
+function m({ node: n, level: d }) {
+	let { selectedIds: p, selectionMode: h, showCheckboxes: g, showIcons: _, draggable: v, size: y, toggleSelect: b, toggleExpand: x, isSelected: S, isExpanded: C, onDragStart: w, onDragOver: T, onDragLeave: E, onDrop: D, dragOverId: O, dragPosition: k } = f(), A = n.children && n.children.length > 0, j = C(n.id), M = S(n.id), N = {
+		sm: "py-0.5 text-xs",
+		md: "py-1 text-sm",
+		lg: "py-1.5 text-base"
+	}, P = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, F = d * (y === "sm" ? 12 : y === "md" ? 16 : 20), I = (e) => {
+		e.stopPropagation(), h !== "none" && n.selectable !== !1 && !n.disabled && b(n.id);
+	}, L = (e) => {
+		e.stopPropagation(), x(n.id);
+	}, R = (e) => {
+		v && w(e, n.id);
+	}, z = (e) => {
+		v && (e.preventDefault(), T(e, n.id));
+	}, B = (e) => {
+		v && E(e);
+	}, V = (e) => {
+		if (!v) return;
+		e.preventDefault();
+		let t = e.currentTarget.getBoundingClientRect(), r = e.clientY - t.top, i = t.height, a = "inside";
+		r < i * .25 ? a = "before" : r > i * .75 && (a = "after"), D(e, n.id, a);
+	}, H = () => n.icon ? n.icon : _ ? A ? l(j ? s : o, { className: e(P[y], "text-amber-500") }) : /* @__PURE__ */ l(a, { className: e(P[y], "text-muted-foreground") }) : null, U = O === n.id;
+	return /* @__PURE__ */ u("li", {
+		role: "treeitem",
+		"aria-expanded": A ? j : void 0,
+		"aria-selected": M,
+		children: [/* @__PURE__ */ u("div", {
+			className: e("flex items-center gap-1 rounded-md cursor-pointer transition-colors group", N[y], M && "bg-primary/10 text-primary", !M && "hover:bg-muted", n.disabled && "opacity-50 cursor-not-allowed", U && k === "before" && "border-t-2 border-primary", U && k === "after" && "border-b-2 border-primary", U && k === "inside" && "bg-primary/20"),
+			style: { paddingLeft: F },
+			onClick: I,
+			draggable: v && !n.disabled,
+			onDragStart: R,
+			onDragOver: z,
+			onDragLeave: B,
+			onDrop: V,
+			children: [
+				v && /* @__PURE__ */ l(c, { className: e(P[y], "text-muted-foreground opacity-0 group-hover:opacity-100 cursor-grab") }),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: L,
+					className: e("flex items-center justify-center rounded hover:bg-muted-foreground/10", !A && "invisible"),
+					tabIndex: -1,
+					children: l(j ? r : i, { className: P[y] })
+				}),
+				g && h !== "none" && /* @__PURE__ */ l(t, {
+					checked: M,
+					onCheckedChange: () => b(n.id),
+					disabled: n.disabled || n.selectable === !1,
+					className: y === "sm" ? "h-3 w-3" : y === "lg" ? "h-5 w-5" : "h-4 w-4"
+				}),
+				H(),
+				/* @__PURE__ */ l("span", {
+					className: "truncate flex-1",
+					children: n.label
+				})
+			]
+		}), A && j && /* @__PURE__ */ l("ul", {
+			role: "group",
+			className: "list-none",
+			children: n.children.map((e) => /* @__PURE__ */ l(m, {
+				node: e,
+				level: d + 1
+			}, e.id))
+		})]
+	});
+}
+function h({ data: t, selectedIds: r, onSelect: i, expandedIds: a, onExpand: o, selectionMode: s = "single", showCheckboxes: c = !1, showIcons: u = !0, draggable: f = !1, onDrop: h, size: g = "md", className: _, defaultExpandAll: v = !1 }) {
+	let [y, b] = n.useState([]), [x, S] = n.useState(() => v ? p(t) : []), [C, w] = n.useState(null), [T, E] = n.useState(null), [D, O] = n.useState(null), k = r ?? y, A = a ?? x, j = {
+		selectedIds: k,
+		expandedIds: A,
+		selectionMode: s,
+		showCheckboxes: c,
+		showIcons: u,
+		draggable: f,
+		size: g,
+		toggleSelect: n.useCallback((e) => {
+			let t;
+			t = s === "single" ? k.includes(e) ? [] : [e] : k.includes(e) ? k.filter((t) => t !== e) : [...k, e], i ? i(t) : b(t);
+		}, [
+			k,
+			s,
+			i
+		]),
+		toggleExpand: n.useCallback((e) => {
+			let t = A.includes(e) ? A.filter((t) => t !== e) : [...A, e];
+			o ? o(t) : S(t);
+		}, [A, o]),
+		isSelected: n.useCallback((e) => k.includes(e), [k]),
+		isExpanded: n.useCallback((e) => A.includes(e), [A]),
+		onDragStart: n.useCallback((e, t) => {
+			w(t), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t);
+		}, []),
+		onDragOver: n.useCallback((e, t) => {
+			if (C === t) return;
+			let n = e.currentTarget.getBoundingClientRect(), r = e.clientY - n.top, i = n.height, a = "inside";
+			r < i * .25 ? a = "before" : r > i * .75 && (a = "after"), E(t), O(a);
+		}, [C]),
+		onDragLeave: n.useCallback(() => {
+			E(null), O(null);
+		}, []),
+		onDrop: n.useCallback((e, t, n) => {
+			e.preventDefault(), C && C !== t && h && h(C, t, n), w(null), E(null), O(null);
+		}, [C, h]),
+		dragOverId: T,
+		dragPosition: D
+	};
+	return /* @__PURE__ */ l(d.Provider, {
+		value: j,
+		children: /* @__PURE__ */ l("ul", {
+			role: "tree",
+			"aria-multiselectable": s === "multiple",
+			className: e("list-none", _),
+			children: t.map((e) => /* @__PURE__ */ l(m, {
+				node: e,
+				level: 0
+			}, e.id))
+		})
+	});
+}
+function g(e, t) {
+	for (let n of e) {
+		if (n.id === t) return n;
+		if (n.children) {
+			let e = g(n.children, t);
+			if (e) return e;
+		}
+	}
+	return null;
+}
+function _(e, t, n) {
+	return e.map((e) => e.id === t ? {
+		...e,
+		...n
+	} : e.children ? {
+		...e,
+		children: _(e.children, t, n)
+	} : e);
+}
+function v(e, t) {
+	return e.filter((e) => e.id !== t).map((e) => e.children ? {
+		...e,
+		children: v(e.children, t)
+	} : e);
+}
+function y(e, t, n) {
+	return e.map((e) => e.id === t ? {
+		...e,
+		children: [...e.children || [], n]
+	} : e.children ? {
+		...e,
+		children: y(e.children, t, n)
+	} : e);
+}
+function b(e, t, n, r) {
+	let i = g(e, t);
+	if (!i) return e;
+	let a = v(e, t);
+	if (r === "inside") a = y(a, n, i);
+	else {
+		let e = (t) => {
+			let a = [];
+			for (let o of t) o.id === n ? r === "before" ? (a.push(i), a.push(o)) : (a.push(o), a.push(i)) : a.push({
+				...o,
+				children: o.children ? e(o.children) : void 0
+			});
+			return a;
+		};
+		a = e(a);
+	}
+	return a;
+}
+//#endregion
+export { y as addChildNode, h as default, g as findNodeById, b as moveNode, v as removeNode, _ as updateNode };

package/dist/components/waka-treemap-chart/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={default:[`#3b82f6`,`#ef4444`,`#22c55e`,`#f59e0b`,`#8b5cf6`,`#ec4899`,`#14b8a6`,`#f97316`,`#6366f1`,`#84cc16`],cool:[`#06b6d4`,`#3b82f6`,`#8b5cf6`,`#6366f1`,`#0ea5e9`,`#a855f7`,`#14b8a6`,`#22d3ee`,`#7c3aed`,`#2dd4bf`],warm:[`#f97316`,`#ef4444`,`#f59e0b`,`#ec4899`,`#f43f5e`,`#fb923c`,`#fbbf24`,`#e11d48`,`#dc2626`,`#ea580c`],neon:[`#00ff87`,`#00d4ff`,`#ff00ff`,`#ffff00`,`#ff6b35`,`#00ffff`,`#ff1493`,`#7fff00`,`#ff00aa`,`#00ff00`],pastel:[`#a5b4fc`,`#fca5a5`,`#86efac`,`#fcd34d`,`#c4b5fd`,`#f9a8d4`,`#5eead4`,`#fdba74`,`#93c5fd`,`#bef264`]};function o(e){let{width:t,height:r,padding:i=2,innerPadding:o=4,aspectRatio:s=1}=e,[c,l]=n.useState([]),u=n.useCallback(e=>e.reduce((e,t)=>t.children&&t.children.length>0?e+u(t.children):e+t.value,0),[]),d=n.useCallback((e,t)=>{for(let n of e){if(n.id===t)return n;if(n.children){let e=d(n.children,t);if(e)return e}}return null},[]),f=n.useCallback((e,t,n=[])=>{for(let r of e){if(r.id===t)return[...n,r];if(r.children){let e=f(r.children,t,[...n,r]);if(e.length>0)return e}}return[]},[]),p=n.useCallback((e,t,n,r,a,s,c,l,d,f,m,h)=>{if(e.length===0||r<=0||a<=0)return[];let g=[],_=[...e],v=t,y=n,b=r,x=a,S=(e,t)=>{if(e.color)return e.color;if(f===`value`){let t=h>0?e.value/h:0;return`hsl(${200-t*150}, 70%, ${50+(1-t)*20}%)`}if(e.category){if(!m.has(e.category)){let t=m.size%d.length;m.set(e.category,d[t])}return m.get(e.category)}return d[t%d.length]},C=(e,t,n)=>{if(e.length===0)return 1/0;let i=e.reduce((e,t)=>e+t.value/s*(r*a),0),o=Math.min(...e.map(e=>e.value/s*(r*a))),c=Math.max(...e.map(e=>e.value/s*(r*a)));return Math.max(n*n*c/(i*i),i*i/(n*n*o))},w=(e,t,n,_,v,y)=>{let b=s>0?e.reduce((e,t)=>e+t.value/s*(r*a),0):0,x=_>0?b/_:0,C=0;e.forEach((e,_)=>{let b=s>0?e.value/s*(r*a):0,w=x>0?b/x:0,T=v?t:t+C,E=v?n+C:n,D=v?x:w,O=v?w:x,k=T+i,A=E+i,j=Math.max(0,D-i*2),M=Math.max(0,O-i*2),N=S(e,y+_);if(g.push({...e,x:k,y:A,width:j,height:M,depth:c,parentId:l,computedColor:N}),e.children&&e.children.length>0&&j>o*2&&M>o*2){let t=u(e.children),n=p(e.children,k+o,A+o,j-o*2,M-o*2,t,c+1,e.id,d,f,m,h);g.push(...n)}C+=w})},T=[],E=0;for(;_.length>0;){let e=b>=x,t=e?x:b,n=_[0],r=C([...T,n],t,t),i=C(T,t,t);if(T.length===0||r<=i)T.push(_.shift());else{let n=T.reduce((e,t)=>e+t.value/s*(b*x),0)/t;w(T,v,y,t,e,E),E+=T.length,e?(v+=n,b-=n):(y+=n,x-=n),T.length=0}}if(T.length>0){let e=b>=x;w(T,v,y,e?x:b,e,E)}return g},[i,o,u]);return{layoutNodes:c,computeLayout:n.useCallback((e,n=null,i=a.default,o=`category`)=>{let s=e;if(n){let t=d(e,n);t?.children&&(s=t.children)}if(s.length===0)return l([]),[];let c=[...s].sort((e,t)=>{let n=e.children?u(e.children):e.value;return(t.children?u(t.children):t.value)-n}),f=u(c),m=Math.max(...c.map(e=>e.children?u(e.children):e.value)),h=p(c,0,0,t,r,f,0,n||void 0,i,o,new Map,m);return l(h),h},[t,r,p,d,u]),getTotalValue:u,findNode:d,getPathToNode:f}}function s({node:e,x:n,y:r,showValues:a}){return(0,i.jsxs)(`div`,{className:t.cn(`absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg`,`bg-popover text-popover-foreground border`,`pointer-events-none whitespace-nowrap`,`animate-in fade-in-0 zoom-in-95 duration-100`),style:{left:n,top:r,transform:`translate(-50%, -100%)`,marginTop:-8},children:[(0,i.jsx)(`div`,{className:`font-semibold`,children:e.label}),e.category&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.category}),a&&(0,i.jsxs)(`div`,{className:`text-xs mt-1`,children:[`Value: `,(0,i.jsx)(`span`,{className:`font-medium`,children:e.value.toLocaleString()})]}),(0,i.jsx)(`div`,{className:`absolute left-1/2 bottom-0 w-2 h-2 rotate-45 -translate-x-1/2 translate-y-1/2 bg-popover border-r border-b`})]})}function c({items:e,position:n,onItemClick:r,highlightedCategory:a}){return(0,i.jsx)(`div`,{className:t.cn(`flex gap-2`,n===`right`&&`flex-col`,n===`bottom`&&`flex-wrap justify-center`),children:e.map(e=>(0,i.jsxs)(`button`,{className:t.cn(`flex items-center gap-2 px-2 py-1 text-sm rounded transition-all duration-200`,`hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary`,a===e.label&&`bg-muted ring-2 ring-primary`),onClick:()=>r?.(e.label),children:[(0,i.jsx)(`span`,{className:`w-3 h-3 rounded-sm flex-shrink-0`,style:{backgroundColor:e.color}}),(0,i.jsx)(`span`,{className:`text-muted-foreground truncate max-w-[100px]`,children:e.label})]},e.label))})}function l({path:e,onNavigate:a}){return(0,i.jsxs)(`nav`,{className:`flex items-center gap-1 text-sm overflow-x-auto pb-2`,children:[(0,i.jsxs)(`button`,{className:t.cn(`flex items-center gap-1 px-2 py-1 rounded transition-colors`,`text-muted-foreground hover:text-foreground hover:bg-muted`,e.length===0&&`text-foreground font-medium`),onClick:()=>a(null),children:[(0,i.jsx)(r.Home,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:`Root`})]}),e.map((o,s)=>(0,i.jsxs)(n.Fragment,{children:[(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4 text-muted-foreground flex-shrink-0`}),(0,i.jsx)(`button`,{className:t.cn(`px-2 py-1 rounded transition-colors truncate max-w-[120px]`,`text-muted-foreground hover:text-foreground hover:bg-muted`,s===e.length-1&&`text-foreground font-medium`),onClick:()=>a(o.id),children:o.label})]},o.id))]})}function u({onZoomIn:e,onZoomOut:t,onZoomToFit:n,showZoomToFit:a,zoom:o}){return(0,i.jsxs)(`div`,{className:`flex items-center gap-1 bg-background/80 backdrop-blur-sm rounded-lg border p-1`,children:[(0,i.jsx)(`button`,{className:`p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-50`,onClick:t,disabled:o<=.5,"aria-label":`Zoom out`,children:(0,i.jsx)(r.ZoomOut,{className:`h-4 w-4`})}),(0,i.jsxs)(`span`,{className:`text-xs font-medium min-w-[40px] text-center`,children:[Math.round(o*100),`%`]}),(0,i.jsx)(`button`,{className:`p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-50`,onClick:e,disabled:o>=3,"aria-label":`Zoom in`,children:(0,i.jsx)(r.ZoomIn,{className:`h-4 w-4`})}),a&&(0,i.jsx)(`button`,{className:`p-1.5 rounded hover:bg-muted transition-colors`,onClick:n,"aria-label":`Zoom to fit`,children:(0,i.jsx)(r.Maximize2,{className:`h-4 w-4`})})]})}function d({node:e,isHovered:n,isHighlighted:r,showLabel:a,showValue:o,minLabelSize:s,animationDuration:c,onClick:l,onMouseEnter:u,onMouseLeave:d}){let f=e.width>=s&&e.height>=s/2,p=e.children&&e.children.length>0,m=Math.min(Math.max(10,e.width/10),Math.max(10,e.height/3),14),h=(e=>{let t=e.replace(`#`,``),n,r,i;return t.length===3?(n=parseInt(t[0]+t[0],16),r=parseInt(t[1]+t[1],16),i=parseInt(t[2]+t[2],16)):(n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16)),isNaN(n)||isNaN(r)||isNaN(i)||(.299*n+.587*r+.114*i)/255>.5?`#000000`:`#ffffff`})(e.computedColor);return(0,i.jsxs)(`g`,{className:t.cn(`cursor-pointer`,`transition-all`,p&&`hover:opacity-90`),style:{transitionDuration:`${c}ms`},onClick:l,onMouseEnter:u,onMouseLeave:d,children:[(0,i.jsx)(`rect`,{x:e.x,y:e.y,width:e.width,height:e.height,fill:e.computedColor,stroke:n||r?`#ffffff`:`rgba(255,255,255,0.3)`,strokeWidth:n||r?2:1,rx:2,className:`transition-all`,style:{transitionDuration:`${c}ms`,filter:n?`brightness(1.1)`:r?`brightness(1.05)`:`brightness(1)`,opacity:r===!1?.5:1}}),a&&f&&(0,i.jsx)(`foreignObject`,{x:e.x+4,y:e.y+4,width:e.width-8,height:e.height-8,className:`pointer-events-none overflow-hidden`,children:(0,i.jsxs)(`div`,{className:`flex flex-col justify-center h-full`,style:{color:h,fontSize:`${m}px`},children:[(0,i.jsx)(`span`,{className:`font-medium truncate leading-tight`,children:e.label}),o&&e.height>s*.75&&(0,i.jsx)(`span`,{className:`text-xs opacity-80 truncate`,children:e.value.toLocaleString()})]})})]})}function f({data:e,width:r=600,height:f=400,padding:p=2,innerPadding:m=4,colorScheme:h=`default`,colors:g,colorBy:_=`category`,showLabels:v=!0,minLabelSize:y=50,showValues:b=!0,showTooltip:x=!0,showLegend:S=!0,legendPosition:C=`right`,enableDrillDown:w=!0,showBreadcrumb:T=!0,showZoomControls:E=!1,enableZoomToFit:D=!0,animationDuration:O=300,aspectRatio:k=1,className:A,onNodeClick:j,onNodeHover:M,onNavigate:N}){let P=n.useRef(null),[F,I]=n.useState(null),[L,R]=n.useState(null),[z,B]=n.useState(null),[V,H]=n.useState([]),[U,W]=n.useState(1),[G,K]=n.useState(null),q=g||a[h]||a.default,{layoutNodes:J,computeLayout:Y,findNode:ee,getPathToNode:X,getTotalValue:te}=o({width:r,height:f,padding:p,innerPadding:m,aspectRatio:k});n.useEffect(()=>{Y(e,z,q,_)},[e,z,q,_,Y]);let Z=n.useMemo(()=>z?J.filter(e=>e.parentId===z&&e.depth===0):J.filter(e=>e.depth===0),[J,z]),Q=n.useMemo(()=>{let e=new Map;return Z.forEach(t=>{let n=t.category||t.label;e.has(n)||e.set(n,t.computedColor)}),Array.from(e.entries()).map(([e,t])=>({label:e,color:t}))},[Z]),$=t=>{if(j?.(t),w&&t.children&&t.children.length>0){B(t.id);let n=X(e,t.id);H(n),N?.(n)}},ne=t=>{if(B(t),t===null)H([]),N?.([]);else{let n=X(e,t).slice(0,-1);H(n),N?.(n)}},re=(e,t)=>{if(I(e),M?.(e),x&&P.current){P.current.getBoundingClientRect();let t=e.x+e.width/2,n=e.y;R({x:t*U,y:n*U})}},ie=()=>{I(null),R(null),M?.(null)};return(0,i.jsxs)(`div`,{className:t.cn(`flex gap-4`,C===`bottom`&&`flex-col`,A),children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-2 flex-1`,children:[T&&w&&(0,i.jsx)(l,{path:V,onNavigate:ne}),(0,i.jsxs)(`div`,{ref:P,className:`relative overflow-hidden rounded-lg border bg-muted/20`,children:[E&&(0,i.jsx)(`div`,{className:`absolute top-2 right-2 z-10`,children:(0,i.jsx)(u,{zoom:U,onZoomIn:()=>W(e=>Math.min(e+.25,3)),onZoomOut:()=>W(e=>Math.max(e-.25,.5)),onZoomToFit:()=>W(1),showZoomToFit:D})}),(0,i.jsxs)(`svg`,{width:r*U,height:f*U,viewBox:`0 0 ${r} ${f}`,className:`transition-all duration-300`,style:{transformOrigin:`top left`},children:[(0,i.jsx)(`rect`,{x:0,y:0,width:r,height:f,fill:`transparent`}),Z.map(e=>{let t=G===null?void 0:(e.category||e.label)===G;return(0,i.jsx)(d,{node:e,isHovered:F?.id===e.id,isHighlighted:t!==!1,showLabel:v,showValue:b,minLabelSize:y,animationDuration:O,onClick:()=>$(e),onMouseEnter:t=>re(e,t),onMouseLeave:ie},e.id)})]}),x&&F&&L&&(0,i.jsx)(s,{node:F,x:L.x,y:L.y,showValues:b})]})]}),S&&Q.length>0&&(0,i.jsx)(`div`,{className:t.cn(C===`right`&&`min-w-[120px]`,C===`bottom`&&`w-full`),children:(0,i.jsx)(c,{items:Q,position:C,onItemClick:e=>{K(t=>t===e?null:e)},highlightedCategory:G})})]})}exports.default=f,exports.useTreemapChart=o;