@loopstack/loopstack-studio 0.23.1 → 0.25.0

package/dist/components/layout/StudioSidebar.js

@@ -1,165 +1,225 @@
 import { useStudio, useStudioOptional } from "../../providers/StudioProvider.js";
-import { useFilterPipelines } from "../../hooks/usePipelines.js";
+import { useFilterWorkflows } from "../../hooks/useWorkflows.js";
 import { useComponentOverrides } from "../../providers/ComponentOverridesProvider.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../ui/sidebar.js";
+import { motion } from "../../node_modules/motion/dist/es/react.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Link, useLocation } from "react-router-dom";
-import { CircleAlert, Info, LayoutDashboard, LayoutGrid, Play, Workflow } from "lucide-react";
+import { CircleAlert, Info, LayoutDashboard, LayoutGrid, PanelLeftIcon, Play, Workflow } from "lucide-react";
 var DefaultSidebarHeader = () => {
-	let e = c(5), { state: u } = useSidebar(), d;
-	e[0] === u ? d = e[1] : (d = u === "expanded" && /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 px-1.5",
+	let e = c(18), { state: l, toggleSidebar: u } = useSidebar(), [d, m] = useState(!1), h = l === "collapsed" ? "justify-center" : "justify-between", g;
+	e[0] === h ? g = e[1] : (g = cn("border-sidebar-border h-12 w-full flex-row items-center border-b px-1.5 py-0", h), e[0] = h, e[1] = g);
+	let _;
+	e[2] === l ? _ = e[3] : (_ = l === "expanded" && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 overflow-hidden px-1.5",
 		children: [/* @__PURE__ */ jsx("img", {
 			src: "/loopstack.svg",
 			alt: "Loopstack",
 			className: "h-6 w-6"
-		}), /* @__PURE__ */ jsx("span", {
-			className: "text-sm font-semibold",
+		}), /* @__PURE__ */ jsx(motion.span, {
+			className: "whitespace-nowrap text-sm font-semibold",
+			initial: {
+				opacity: 0,
+				x: -6
+			},
+			animate: {
+				opacity: 1,
+				x: 0
+			},
+			transition: {
+				opacity: {
+					duration: .18,
+					delay: .12,
+					ease: "easeOut"
+				},
+				x: {
+					duration: .18,
+					delay: .12,
+					ease: "easeOut"
+				}
+			},
 			children: "Loopstack Studio"
 		})]
-	}), e[0] = u, e[1] = d);
-	let f;
-	e[2] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx(SidebarTrigger, { className: "hover:cursor-pointer" }), e[2] = f) : f = e[2];
-	let p;
-	return e[3] === d ? p = e[4] : (p = /* @__PURE__ */ jsxs(SidebarHeader, {
-		className: "border-sidebar-border h-12 w-full flex-row items-center justify-between border-b px-1.5 py-0",
-		children: [d, f]
-	}), e[3] = d, e[4] = p), p;
+	}), e[2] = l, e[3] = _);
+	let v;
+	e[4] === Symbol.for("react.memo_cache_sentinel") ? (v = cn("relative size-10 text-muted-foreground hover:cursor-pointer hover:bg-accent/50 hover:text-accent-foreground"), e[4] = v) : v = e[4];
+	let y, x;
+	e[5] === Symbol.for("react.memo_cache_sentinel") ? (y = () => m(!0), x = () => m(!1), e[5] = y, e[6] = x) : (y = e[5], x = e[6]);
+	let S;
+	e[7] !== d || e[8] !== l ? (S = l === "collapsed" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(motion.img, {
+		src: "/loopstack.svg",
+		alt: "Loopstack",
+		className: "absolute top-1/2 left-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2",
+		initial: { opacity: 1 },
+		animate: { opacity: d ? 0 : 1 },
+		transition: { duration: .2 }
+	}), /* @__PURE__ */ jsx(motion.div, {
+		className: "absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
+		initial: { opacity: 0 },
+		animate: { opacity: d ? 1 : 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-5" })
+	})] }) : /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-5" }), e[7] = d, e[8] = l, e[9] = S) : S = e[9];
+	let C;
+	e[10] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "Toggle Sidebar"
+	}), e[10] = C) : C = e[10];
+	let w;
+	e[11] !== S || e[12] !== u ? (w = /* @__PURE__ */ jsxs(Button, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		variant: "ghost",
+		size: "icon",
+		className: v,
+		onClick: u,
+		onMouseEnter: y,
+		onMouseLeave: x,
+		children: [S, C]
+	}), e[11] = S, e[12] = u, e[13] = w) : w = e[13];
+	let k;
+	return e[14] !== g || e[15] !== _ || e[16] !== w ? (k = /* @__PURE__ */ jsxs(SidebarHeader, {
+		className: g,
+		children: [_, w]
+	}), e[14] = g, e[15] = _, e[16] = w, e[17] = k) : k = e[17], k;
 }, RunsNav = () => {
-	let u = c(26), f = useLocation(), { router: p } = useStudio(), m = p.getRuns(), h;
-	u[0] === p ? h = u[1] : (h = p.getRunsActionRequired(), u[0] = p, u[1] = h);
-	let y = h, C;
-	u[2] === Symbol.for("react.memo_cache_sentinel") ? (C = {
+	let l = c(26), d = useLocation(), { router: f } = useStudio(), p = f.getRuns(), m;
+	l[0] === f ? m = l[1] : (m = f.getRunsActionRequired(), l[0] = f, l[1] = m);
+	let h = m, g;
+	l[2] === Symbol.for("react.memo_cache_sentinel") ? (g = {
 		parentId: null,
 		status: "paused"
-	}, u[2] = C) : C = u[2];
-	let w = useFilterPipelines(void 0, C, "createdAt", "DESC", 0, 1).data?.total ?? 0, T;
-	u[3] === Symbol.for("react.memo_cache_sentinel") ? (T = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Runs" }), u[3] = T) : T = u[3];
-	let E = f.pathname === m || f.pathname === m + "/", D, O;
-	u[4] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Play, {}), O = /* @__PURE__ */ jsx("span", { children: "Overview" }), u[4] = D, u[5] = O) : (D = u[4], O = u[5]);
-	let k;
-	u[6] === m ? k = u[7] : (k = /* @__PURE__ */ jsxs(Link, {
-		to: m,
-		children: [D, O]
-	}), u[6] = m, u[7] = k);
+	}, l[2] = g) : g = l[2];
+	let b = useFilterWorkflows(void 0, g, "createdAt", "DESC", 0, 1).data?.total ?? 0, T;
+	l[3] === Symbol.for("react.memo_cache_sentinel") ? (T = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Runs" }), l[3] = T) : T = l[3];
+	let E = d.pathname === p || d.pathname === p + "/", D, O;
+	l[4] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Play, {}), O = /* @__PURE__ */ jsx("span", { children: "Overview" }), l[4] = D, l[5] = O) : (D = l[4], O = l[5]);
 	let A;
-	u[8] !== E || u[9] !== k ? (A = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+	l[6] === p ? A = l[7] : (A = /* @__PURE__ */ jsxs(Link, {
+		to: p,
+		children: [D, O]
+	}), l[6] = p, l[7] = A);
+	let j;
+	l[8] !== E || l[9] !== A ? (j = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		asChild: !0,
 		isActive: E,
 		tooltip: "Overview",
-		children: k
-	}) }), u[8] = E, u[9] = k, u[10] = A) : A = u[10];
-	let j = f.pathname === y, M, N;
-	u[11] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx(CircleAlert, {}), M = /* @__PURE__ */ jsx("span", { children: "Action Required" }), u[11] = M, u[12] = N) : (M = u[11], N = u[12]);
-	let P;
-	u[13] === y ? P = u[14] : (P = /* @__PURE__ */ jsxs(Link, {
-		to: y,
-		children: [N, M]
-	}), u[13] = y, u[14] = P);
+		children: A
+	}) }), l[8] = E, l[9] = A, l[10] = j) : j = l[10];
+	let M = d.pathname === h, N, P;
+	l[11] === Symbol.for("react.memo_cache_sentinel") ? (P = /* @__PURE__ */ jsx(CircleAlert, {}), N = /* @__PURE__ */ jsx("span", { children: "Action Required" }), l[11] = N, l[12] = P) : (N = l[11], P = l[12]);
 	let F;
-	u[15] !== P || u[16] !== j ? (F = /* @__PURE__ */ jsx(SidebarMenuButton, {
+	l[13] === h ? F = l[14] : (F = /* @__PURE__ */ jsxs(Link, {
+		to: h,
+		children: [P, N]
+	}), l[13] = h, l[14] = F);
+	let I;
+	l[15] !== F || l[16] !== M ? (I = /* @__PURE__ */ jsx(SidebarMenuButton, {
 		asChild: !0,
-		isActive: j,
+		isActive: M,
 		tooltip: "Action Required",
-		children: P
-	}), u[15] = P, u[16] = j, u[17] = F) : F = u[17];
-	let I;
-	u[18] === w ? I = u[19] : (I = w > 0 && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: w }), u[18] = w, u[19] = I);
+		children: F
+	}), l[15] = F, l[16] = M, l[17] = I) : I = l[17];
 	let L;
-	u[20] !== F || u[21] !== I ? (L = /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [F, I] }), u[20] = F, u[21] = I, u[22] = L) : L = u[22];
+	l[18] === b ? L = l[19] : (L = b > 0 && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: b }), l[18] = b, l[19] = L);
 	let R;
-	return u[23] !== L || u[24] !== A ? (R = /* @__PURE__ */ jsxs(SidebarGroup, { children: [T, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxs(SidebarMenu, { children: [A, L] }) })] }), u[23] = L, u[24] = A, u[25] = R) : R = u[25], R;
+	l[20] !== I || l[21] !== L ? (R = /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [I, L] }), l[20] = I, l[21] = L, l[22] = R) : R = l[22];
+	let z;
+	return l[23] !== R || l[24] !== j ? (z = /* @__PURE__ */ jsxs(SidebarGroup, { children: [T, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxs(SidebarMenu, { children: [j, R] }) })] }), l[23] = R, l[24] = j, l[25] = z) : z = l[25], z;
 }, WorkspacesNav = () => {
-	let u = c(11), d = useLocation(), { router: f } = useStudio(), p = f.getWorkspaces(), m;
-	u[0] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Workspaces" }), u[0] = m) : m = u[0];
-	let h;
-	u[1] !== d.pathname || u[2] !== p ? (h = d.pathname === p || d.pathname.startsWith(p + "/"), u[1] = d.pathname, u[2] = p, u[3] = h) : h = u[3];
-	let y, x;
-	u[4] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ jsx(LayoutGrid, {}), x = /* @__PURE__ */ jsx("span", { children: "My Workspaces" }), u[4] = y, u[5] = x) : (y = u[4], x = u[5]);
-	let C;
-	u[6] === p ? C = u[7] : (C = /* @__PURE__ */ jsxs(Link, {
-		to: p,
-		children: [y, x]
-	}), u[6] = p, u[7] = C);
-	let w;
-	return u[8] !== h || u[9] !== C ? (w = /* @__PURE__ */ jsxs(SidebarGroup, { children: [m, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+	let l = c(11), u = useLocation(), { router: d } = useStudio(), f = d.getWorkspaces(), p;
+	l[0] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Workspaces" }), l[0] = p) : p = l[0];
+	let m;
+	l[1] !== u.pathname || l[2] !== f ? (m = u.pathname === f || u.pathname.startsWith(f + "/"), l[1] = u.pathname, l[2] = f, l[3] = m) : m = l[3];
+	let h, g;
+	l[4] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ jsx(LayoutGrid, {}), g = /* @__PURE__ */ jsx("span", { children: "My Workspaces" }), l[4] = h, l[5] = g) : (h = l[4], g = l[5]);
+	let b;
+	l[6] === f ? b = l[7] : (b = /* @__PURE__ */ jsxs(Link, {
+		to: f,
+		children: [h, g]
+	}), l[6] = f, l[7] = b);
+	let S;
+	return l[8] !== m || l[9] !== b ? (S = /* @__PURE__ */ jsxs(SidebarGroup, { children: [p, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		asChild: !0,
-		isActive: h,
+		isActive: m,
 		tooltip: "My Workspaces",
-		children: C
-	}) }) }) })] }), u[8] = h, u[9] = C, u[10] = w) : w = u[10], w;
+		children: b
+	}) }) }) })] }), l[8] = m, l[9] = b, l[10] = S) : S = l[10], S;
 }, InsightsNav = () => {
-	let u = c(15), d = useLocation(), { router: f } = useStudio(), p;
-	u[0] === f ? p = u[1] : (p = f.getDashboard(), u[0] = f, u[1] = p);
-	let m;
-	u[2] === p ? m = u[3] : (m = {
+	let l = c(15), u = useLocation(), { router: d } = useStudio(), f;
+	l[0] === d ? f = l[1] : (f = d.getDashboard(), l[0] = d, l[1] = f);
+	let p;
+	l[2] === f ? p = l[3] : (p = {
 		label: "Dashboard",
-		href: p,
+		href: f,
 		icon: LayoutDashboard
-	}, u[2] = p, u[3] = m);
+	}, l[2] = f, l[3] = p);
+	let m;
+	l[4] === d ? m = l[5] : (m = d.getDebugWorkflows(), l[4] = d, l[5] = m);
 	let h;
-	u[4] === f ? h = u[5] : (h = f.getDebugWorkflows(), u[4] = f, u[5] = h);
-	let y;
-	u[6] === h ? y = u[7] : (y = {
+	l[6] === m ? h = l[7] : (h = {
 		label: "Workflows",
-		href: h,
+		href: m,
 		icon: Workflow
-	}, u[6] = h, u[7] = y);
-	let x;
-	u[8] !== m || u[9] !== y ? (x = [m, y], u[8] = m, u[9] = y, u[10] = x) : x = u[10];
-	let C = x, w;
-	u[11] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Insights" }), u[11] = w) : w = u[11];
+	}, l[6] = m, l[7] = h);
+	let g;
+	l[8] !== p || l[9] !== h ? (g = [p, h], l[8] = p, l[9] = h, l[10] = g) : g = l[10];
+	let b = g, S;
+	l[11] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Insights" }), l[11] = S) : S = l[11];
 	let T;
-	return u[12] !== d || u[13] !== C ? (T = /* @__PURE__ */ jsxs(SidebarGroup, { children: [w, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: C.map((e) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+	return l[12] !== u || l[13] !== b ? (T = /* @__PURE__ */ jsxs(SidebarGroup, { children: [S, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: b.map((e) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		asChild: !0,
-		isActive: d.pathname === e.href,
+		isActive: u.pathname === e.href,
 		tooltip: e.label,
 		children: /* @__PURE__ */ jsxs(Link, {
 			to: e.href,
 			children: [/* @__PURE__ */ jsx(e.icon, {}), /* @__PURE__ */ jsx("span", { children: e.label })]
 		})
-	}) }, e.href)) }) })] }), u[12] = d, u[13] = C, u[14] = T) : T = u[14], T;
+	}) }, e.href)) }) })] }), l[12] = u, l[13] = b, l[14] = T) : T = l[14], T;
 }, DefaultSidebarFooter = () => {
-	let u = c(9), d = useLocation(), { router: f } = useStudio(), p;
-	u[0] === f ? p = u[1] : (p = f.getEnvironmentInfo(), u[0] = f, u[1] = p);
-	let m = p, g = d.pathname === m, _, v;
-	u[2] === Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ jsx(Info, {}), v = /* @__PURE__ */ jsx("span", { children: "Info" }), u[2] = _, u[3] = v) : (_ = u[2], v = u[3]);
+	let l = c(9), u = useLocation(), { router: d } = useStudio(), f;
+	l[0] === d ? f = l[1] : (f = d.getEnvironmentInfo(), l[0] = d, l[1] = f);
+	let p = f, m = u.pathname === p, h, _;
+	l[2] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ jsx(Info, {}), _ = /* @__PURE__ */ jsx("span", { children: "Info" }), l[2] = h, l[3] = _) : (h = l[2], _ = l[3]);
+	let v;
+	l[4] === p ? v = l[5] : (v = /* @__PURE__ */ jsxs(Link, {
+		to: p,
+		children: [h, _]
+	}), l[4] = p, l[5] = v);
 	let y;
-	u[4] === m ? y = u[5] : (y = /* @__PURE__ */ jsxs(Link, {
-		to: m,
-		children: [_, v]
-	}), u[4] = m, u[5] = y);
-	let x;
-	return u[6] !== g || u[7] !== y ? (x = /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+	return l[6] !== m || l[7] !== v ? (y = /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		asChild: !0,
-		isActive: g,
+		isActive: m,
 		size: "sm",
 		tooltip: "Info",
-		children: y
-	}) }) }) }), u[6] = g, u[7] = y, u[8] = x) : x = u[8], x;
+		children: v
+	}) }) }) }), l[6] = m, l[7] = v, l[8] = y) : y = l[8], y;
 };
 const StudioSidebar = () => {
-	let e = c(13), d = useComponentOverrides(), h = useStudioOptional(), g = d.SidebarHeader ?? DefaultSidebarHeader, _ = d.SidebarFooter ?? DefaultSidebarFooter, v;
-	e[0] === g ? v = e[1] : (v = /* @__PURE__ */ jsx(g, {}), e[0] = g, e[1] = v);
-	let y;
-	e[2] === h ? y = e[3] : (y = h && /* @__PURE__ */ jsxs(Fragment, { children: [
+	let e = c(13), u = useComponentOverrides(), f = useStudioOptional(), p = u.SidebarHeader ?? DefaultSidebarHeader, g = u.SidebarFooter ?? DefaultSidebarFooter, _;
+	e[0] === p ? _ = e[1] : (_ = /* @__PURE__ */ jsx(p, {}), e[0] = p, e[1] = _);
+	let v;
+	e[2] === f ? v = e[3] : (v = f && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(RunsNav, {}),
 		/* @__PURE__ */ jsx(WorkspacesNav, {}),
 		/* @__PURE__ */ jsx(InsightsNav, {})
-	] }), e[2] = h, e[3] = y);
+	] }), e[2] = f, e[3] = v);
+	let y;
+	e[4] === v ? y = e[5] : (y = /* @__PURE__ */ jsx(SidebarContent, { children: v }), e[4] = v, e[5] = y);
 	let b;
-	e[4] === y ? b = e[5] : (b = /* @__PURE__ */ jsx(SidebarContent, { children: y }), e[4] = y, e[5] = b);
+	e[6] !== g || e[7] !== f ? (b = f && /* @__PURE__ */ jsx(g, {}), e[6] = g, e[7] = f, e[8] = b) : b = e[8];
 	let x;
-	e[6] !== _ || e[7] !== h ? (x = h && /* @__PURE__ */ jsx(_, {}), e[6] = _, e[7] = h, e[8] = x) : x = e[8];
-	let S;
-	return e[9] !== v || e[10] !== b || e[11] !== x ? (S = /* @__PURE__ */ jsxs(Sidebar, {
+	return e[9] !== _ || e[10] !== y || e[11] !== b ? (x = /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible: "icon",
 		children: [
-			v,
-			b,
-			x
+			_,
+			y,
+			b
 		]
-	}), e[9] = v, e[10] = b, e[11] = x, e[12] = S) : S = e[12], S;
+	}), e[9] = _, e[10] = y, e[11] = b, e[12] = x) : x = e[12], x;
 };
 export { StudioSidebar };

package/dist/components/loopstack-elements/link.js

@@ -1,115 +1,116 @@
 "use client";
 import { useStudio } from "../../providers/StudioProvider.js";
 import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, LinkIcon, icons } from "lucide-react";
-var EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize", PIPELINE_HREF_PATTERN = /^\/pipelines\/([a-zA-Z0-9_-]+)$/, link_default = (m) => {
-	let h = c(53), { className: g, href: _, label: v, caption: y, icon: b, type: x, embed: S, defaultExpanded: C, iconClassName: w } = m, { router: T } = useStudio(), [E, D] = useState(C ?? !1), [O, k] = useState(0), A = b && icons[b] ? icons[b] : LinkIcon, j;
-	h[0] !== _ || h[1] !== v ? (j = v || (() => {
-		if (!_) return "";
+import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, FolderClosedIcon, FolderOpenIcon } from "lucide-react";
+var EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize", statusColorMap = {
+	pending: "text-muted-foreground",
+	success: "text-green-600",
+	failure: "text-red-600"
+}, WORKFLOW_HREF_PATTERN = /^\/workflows\/([a-zA-Z0-9_-]+)$/, link_default = (h) => {
+	let g = c(55), { className: _, href: v, label: y, status: b, embed: x, defaultExpanded: S } = h, C = b === void 0 ? "pending" : b, { router: w } = useStudio(), [T, E] = useState(S ?? !1), [D, O] = useState(0), k;
+	g[0] !== v || g[1] !== y ? (k = y || (() => {
+		if (!v) return "";
 		try {
-			return new URL(_).hostname.replace("www.", "");
+			return new URL(v).hostname.replace("www.", "");
 		} catch {
-			return _;
+			return v;
 		}
-	})(), h[0] = _, h[1] = v, h[2] = j) : j = h[2];
-	let M = j, N = x === "success", P, F;
-	h[3] !== S || h[4] !== _ || h[5] !== T ? (P = _?.match(PIPELINE_HREF_PATTERN)?.[1] ?? null, F = S === !0 && P != null ? T.getEmbedPipeline(P) : null, h[3] = S, h[4] = _, h[5] = T, h[6] = P, h[7] = F) : (P = h[6], F = h[7]);
-	let I = F, L, R;
-	h[8] !== E || h[9] !== P ? (L = () => {
-		if (!P || !E) return;
+	})(), g[0] = v, g[1] = y, g[2] = k) : k = g[2];
+	let A = k, j, M;
+	g[3] !== x || g[4] !== v || g[5] !== w ? (M = v?.match(WORKFLOW_HREF_PATTERN)?.[1] ?? null, j = x === !0 && M != null ? w.getEmbedWorkflow(M) : null, g[3] = x, g[4] = v, g[5] = w, g[6] = j, g[7] = M) : (j = g[6], M = g[7]);
+	let N = j, P, F;
+	g[8] !== T || g[9] !== M ? (P = () => {
+		if (!M || !T) return;
 		let t = (t) => {
 			if (t.origin !== window.location.origin) return;
-			let f = t.data;
-			if (f?.type !== EMBED_RESIZE_MESSAGE_TYPE || f?.pipelineId !== P) return;
-			let p = f?.height;
-			typeof p == "number" && p > 0 && k(p);
+			let p = t.data;
+			if (p?.type !== EMBED_RESIZE_MESSAGE_TYPE || p?.workflowId !== M) return;
+			let m = p?.height;
+			typeof m == "number" && m > 0 && O(m);
 		};
 		return window.addEventListener("message", t), () => window.removeEventListener("message", t);
-	}, R = [P, E], h[8] = E, h[9] = P, h[10] = L, h[11] = R) : (L = h[10], R = h[11]), useEffect(L, R);
-	let z;
-	h[12] === g ? z = h[13] : (z = cn("not-prose flex w-full flex-col rounded-md border bg-background", g), h[12] = g, h[13] = z);
-	let B = N ? "bg-green-50 text-green-600 border-green-200" : "text-muted-foreground bg-muted/50", V;
-	h[14] === B ? V = h[15] : (V = cn("flex size-8 shrink-0 items-center justify-center rounded-md border", B), h[14] = B, h[15] = V);
-	let H;
-	h[16] === w ? H = h[17] : (H = cn("size-4", w), h[16] = w, h[17] = H);
-	let U;
-	h[18] !== A || h[19] !== H ? (U = /* @__PURE__ */ jsx(A, { className: H }), h[18] = A, h[19] = H, h[20] = U) : U = h[20];
+	}, F = [M, T], g[8] = T, g[9] = M, g[10] = P, g[11] = F) : (P = g[10], F = g[11]), useEffect(P, F);
+	let I;
+	g[12] === _ ? I = g[13] : (I = cn("not-prose flex w-full cursor-pointer flex-col", _), g[12] = _, g[13] = I);
+	let L;
+	g[14] === N ? L = g[15] : (L = () => N && E(_temp), g[14] = N, g[15] = L);
+	let R = statusColorMap[C], z;
+	g[16] === R ? z = g[17] : (z = cn("flex shrink-0 items-center", R), g[16] = R, g[17] = z);
+	let B;
+	g[18] === T ? B = g[19] : (B = jsx(T ? FolderOpenIcon : FolderClosedIcon, { className: "size-4" }), g[18] = T, g[19] = B);
+	let V;
+	g[20] !== B || g[21] !== z ? (V = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx("span", {
+			className: z,
+			children: B
+		})
+	}), g[20] = B, g[21] = z, g[22] = V) : V = g[22];
+	let H = T ? "Collapse" : "Expand", U;
+	g[23] === H ? U = g[24] : (U = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		children: H
+	}), g[23] = H, g[24] = U);
 	let W;
-	h[21] !== V || h[22] !== U ? (W = /* @__PURE__ */ jsx("div", {
-		className: V,
-		children: U
-	}), h[21] = V, h[22] = U, h[23] = W) : W = h[23];
-	let G;
-	h[24] === M ? G = h[25] : (G = /* @__PURE__ */ jsx("span", {
-		className: "truncate text-sm font-medium",
-		children: M
-	}), h[24] = M, h[25] = G);
-	let K;
-	h[26] !== y || h[27] !== _ ? (K = y ? /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground truncate text-xs",
-		children: y
-	}) : _ && /* @__PURE__ */ jsx("a", {
-		href: _,
-		target: "_blank",
-		rel: "noopener noreferrer",
-		className: "text-muted-foreground truncate text-xs hover:underline",
-		children: _
-	}), h[26] = y, h[27] = _, h[28] = K) : K = h[28];
+	g[25] !== V || g[26] !== U ? (W = /* @__PURE__ */ jsxs(Tooltip, { children: [V, U] }), g[25] = V, g[26] = U, g[27] = W) : W = g[27];
+	let G = T ? "font-medium" : "text-muted-foreground", K;
+	g[28] === G ? K = g[29] : (K = cn("min-w-0 flex-1 truncate text-sm", G), g[28] = G, g[29] = K);
 	let q;
-	h[29] !== G || h[30] !== K ? (q = /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col",
-		children: [G, K]
-	}), h[29] = G, h[30] = K, h[31] = q) : q = h[31];
+	g[30] !== A || g[31] !== K ? (q = /* @__PURE__ */ jsx("span", {
+		className: K,
+		children: A
+	}), g[30] = A, g[31] = K, g[32] = q) : q = g[32];
 	let J;
-	h[32] !== I || h[33] !== E ? (J = I && /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => D(_temp),
-		className: "text-muted-foreground hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors hover:bg-muted/50",
-		children: jsx(E ? ChevronUpIcon : ChevronDownIcon, { className: "size-4" })
-	}), h[32] = I, h[33] = E, h[34] = J) : J = h[34];
-	let Y;
-	h[35] === _ ? Y = h[36] : (Y = _ && /* @__PURE__ */ jsx("a", {
-		href: _,
+	g[33] === v ? J = g[34] : (J = v && /* @__PURE__ */ jsx("a", {
+		href: v,
 		target: "_blank",
 		rel: "noopener noreferrer",
-		className: "text-muted-foreground hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors hover:bg-muted/50",
-		children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4" })
-	}), h[35] = _, h[36] = Y);
+		onClick: _temp2,
+		className: "text-muted-foreground hover:text-foreground flex items-center justify-center transition-colors",
+		children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3.5" })
+	}), g[33] = v, g[34] = J);
+	let Y;
+	g[35] !== N || g[36] !== T ? (Y = N && jsx(T ? ChevronUpIcon : ChevronDownIcon, { className: "text-muted-foreground size-3.5" }), g[35] = N, g[36] = T, g[37] = Y) : Y = g[37];
 	let X;
-	h[37] !== J || h[38] !== Y ? (X = /* @__PURE__ */ jsxs("div", {
+	g[38] !== J || g[39] !== Y ? (X = /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 items-center gap-1",
 		children: [J, Y]
-	}), h[37] = J, h[38] = Y, h[39] = X) : X = h[39];
+	}), g[38] = J, g[39] = Y, g[40] = X) : X = g[40];
 	let Z;
-	h[40] !== W || h[41] !== q || h[42] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-3 p-3",
+	g[41] !== W || g[42] !== q || g[43] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-1.5 py-1",
 		children: [
 			W,
 			q,
 			X
 		]
-	}), h[40] = W, h[41] = q, h[42] = X, h[43] = Z) : Z = h[43];
+	}), g[41] = W, g[42] = q, g[43] = X, g[44] = Z) : Z = g[44];
 	let Q;
-	h[44] !== M || h[45] !== I || h[46] !== E || h[47] !== O ? (Q = E && I && /* @__PURE__ */ jsx("div", {
-		className: "border-t",
+	g[45] !== A || g[46] !== N || g[47] !== T || g[48] !== D ? (Q = T && N && /* @__PURE__ */ jsx("div", {
+		className: "mt-2 border-t",
 		children: /* @__PURE__ */ jsx("iframe", {
-			src: I,
+			src: N,
 			className: "w-full overflow-hidden border-0",
-			style: { height: `${O}px` },
+			style: { height: `${D}px` },
 			scrolling: "no",
-			title: M
+			title: A
 		})
-	}), h[44] = M, h[45] = I, h[46] = E, h[47] = O, h[48] = Q) : Q = h[48];
+	}), g[45] = A, g[46] = N, g[47] = T, g[48] = D, g[49] = Q) : Q = g[49];
 	let $;
-	return h[49] !== Z || h[50] !== Q || h[51] !== z ? ($ = /* @__PURE__ */ jsxs("div", {
-		className: z,
+	return g[50] !== Z || g[51] !== Q || g[52] !== I || g[53] !== L ? ($ = /* @__PURE__ */ jsxs("div", {
+		className: I,
+		onClick: L,
 		children: [Z, Q]
-	}), h[49] = Z, h[50] = Q, h[51] = z, h[52] = $) : $ = h[52], $;
+	}), g[50] = Z, g[51] = Q, g[52] = I, g[53] = L, g[54] = $) : $ = g[54], $;
 };
 function _temp(t) {
 	return !t;
 }
+function _temp2(t) {
+	return t.stopPropagation();
+}
 export { link_default as default };