@knymbus/voxel-ui 1.0.17 → 1.0.19

package/dist/chunks/{search-WFmasN49.js → search-DSDSn6PK.js}

@@ -1,36 +1,20 @@
 import { t as e } from "./jsx-runtime-Boo2vksn.js";
-import { t } from "./Button-BgQwvn3C.js";
-import { E as n, S as r } from "./icons-BpfDVwCQ.js";
-import { useEffect as i, useRef as a, useState as o } from "react";
-//#region src/components/search/types.ts
-var s = {
-	colors: {
-		bgInput: "var(--color-vsc-bg-input, #f6f8fa)",
-		border: "var(--color-vsc-border, #e4e4e7)",
-		borderAccent: "var(--color-vsc-accent, #007acc)",
-		borderAccentHover: "var(--color-vsc-accent-hover, #0062a3)",
-		text: "var(--color-vsc-text, #333333)",
-		muted: "var(--color-vsc-muted, #6a737d)",
-		sidebarBg: "var(--color-vsc-sidebar, #f3f3f3)",
-		hoverBg: "var(--color-vsc-hover, #e8e8e8)",
-		accentBgLight: "rgba(0, 122, 204, 0.1)"
-	},
-	typography: {
-		sans: "var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)",
-		mono: "var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)"
-	},
-	transitions: { smooth: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)" }
-}, c = e();
-function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreClick: i, onCloseMenu: a }) {
-	let [l, u] = o(null), [d, f] = o(!1);
-	return !e || !t ? null : /* @__PURE__ */ (0, c.jsxs)("div", {
+import { t } from "./types-DmQVfNPh.js";
+import { t as n } from "./Button-BgQwvn3C.js";
+import { E as r, S as i } from "./icons-BpfDVwCQ.js";
+import { useEffect as a, useRef as o, useState as s } from "react";
+//#region src/components/search/SearchMenu.tsx
+var c = e();
+function l({ isOpen: e, value: n, menuResults: r, onResultClick: i, onViewMoreClick: a, onCloseMenu: o }) {
+	let [l, u] = s(null), [d, f] = s(!1);
+	return !e || !n ? null : /* @__PURE__ */ (0, c.jsxs)("div", {
 		style: {
 			position: "absolute",
 			top: "36px",
 			left: 0,
 			width: "100%",
-			backgroundColor: s.colors.sidebarBg,
-			border: `1px solid ${s.colors.border}`,
+			backgroundColor: t.colors.sidebarBg,
+			border: `1px solid ${t.colors.border}`,
 			borderRadius: "4px",
 			boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
 			zIndex: 50,
@@ -44,25 +28,25 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				overflowY: "auto",
 				flex: 1
 			},
-			children: n.length === 0 ? /* @__PURE__ */ (0, c.jsx)("div", {
+			children: r.length === 0 ? /* @__PURE__ */ (0, c.jsx)("div", {
 				style: {
 					padding: "16px",
 					textAlign: "center",
 					fontSize: "11px",
-					color: s.colors.muted,
+					color: t.colors.muted,
 					fontStyle: "italic"
 				},
 				children: "No indexed record entities match your text query constraints."
-			}) : n.map((e) => /* @__PURE__ */ (0, c.jsxs)("div", {
+			}) : r.map((e) => /* @__PURE__ */ (0, c.jsxs)("div", {
 				onMouseEnter: () => u(e.id),
 				onMouseLeave: () => u(null),
 				onClick: () => {
-					r && r(e), a();
+					i && i(e), o();
 				},
 				style: {
 					width: "100%",
 					padding: "8px",
-					backgroundColor: l === e.id ? s.colors.hoverBg : "transparent",
+					backgroundColor: l === e.id ? t.colors.hoverBg : "transparent",
 					borderRadius: "2px",
 					cursor: "pointer",
 					display: "flex",
@@ -74,7 +58,7 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				children: [/* @__PURE__ */ (0, c.jsxs)("div", {
 					style: {
 						fontWeight: 600,
-						color: s.colors.text,
+						color: t.colors.text,
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
@@ -93,9 +77,9 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 							fontSize: "9px",
 							fontFamily: "monospace",
 							fontWeight: "bold",
-							backgroundColor: s.colors.accentBgLight,
+							backgroundColor: t.colors.accentBgLight,
 							border: "1px solid rgba(0, 122, 204, 0.2)",
-							color: s.colors.borderAccent,
+							color: t.colors.borderAccent,
 							padding: "2px 4px",
 							borderRadius: "2px",
 							textTransform: "uppercase",
@@ -107,7 +91,7 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				}), e.subtitle && /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
 						fontSize: "10px",
-						color: s.colors.muted,
+						color: t.colors.muted,
 						whiteSpace: "nowrap",
 						overflow: "hidden",
 						textOverflow: "ellipsis"
@@ -115,22 +99,22 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 					children: e.subtitle
 				})]
 			}, e.id))
-		}), n.length > 0 && i && /* @__PURE__ */ (0, c.jsx)("button", {
+		}), r.length > 0 && a && /* @__PURE__ */ (0, c.jsx)("button", {
 			onMouseEnter: () => f(!0),
 			onMouseLeave: () => f(!1),
 			onClick: () => {
-				i(), a();
+				a(), o();
 			},
 			style: {
 				width: "100%",
 				border: "none",
-				borderTop: `1px solid ${s.colors.border}`,
-				backgroundColor: d ? s.colors.hoverBg : "transparent",
+				borderTop: `1px solid ${t.colors.border}`,
+				backgroundColor: d ? t.colors.hoverBg : "transparent",
 				padding: "8px",
 				textAlign: "center",
 				fontSize: "10px",
 				fontWeight: "bold",
-				color: s.colors.borderAccent,
+				color: t.colors.borderAccent,
 				letterSpacing: "0.5px",
 				textTransform: "uppercase",
 				transition: "background-color 150ms",
@@ -144,8 +128,8 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 //#endregion
 //#region src/components/search/SearchInput.tsx
 function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placeholder: p = "Search manifests or tracking codes...", resultsCount: m = 0, menuResults: h = [], onResultClick: g, onViewMoreClick: _, className: v = "", showFloatPeek: y = !1, peekContent: b }) {
-	let [x, S] = o(!1), [C, w] = o(!1), [T, E] = o(!1), [D, O] = o(!1), k = a(null), A = a(null);
-	i(() => {
+	let [x, S] = s(!1), [C, w] = s(!1), [T, E] = s(!1), [D, O] = s(!1), k = o(null), A = o(null);
+	a(() => {
 		let t = (t) => {
 			k.current && !k.current.contains(t.target) && (w(!1), e === "float" && u === "" && S(!1));
 		};
@@ -159,7 +143,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		position: "relative",
 		display: "flex",
 		flexDirection: "column",
-		fontFamily: s.typography.sans,
+		fontFamily: t.typography.sans,
 		fontSize: "12px",
 		userSelect: "none",
 		boxSizing: "border-box"
@@ -167,26 +151,26 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		position: "relative",
 		display: "flex",
 		alignItems: "center",
-		backgroundColor: s.colors.bgInput,
-		border: `1px solid ${D || e === "float" && x ? s.colors.borderAccent : T ? s.colors.borderAccentHover : s.colors.border}`,
+		backgroundColor: t.colors.bgInput,
+		border: `1px solid ${D || e === "float" && x ? t.colors.borderAccent : T ? t.colors.borderAccentHover : t.colors.border}`,
 		borderRadius: "6px",
 		height: "32px",
-		transition: s.transitions.smooth,
+		transition: t.transitions.smooth,
 		boxSizing: "border-box"
 	}, F = {
 		width: "100%",
 		height: "100%",
 		backgroundColor: "transparent",
-		color: s.colors.text,
+		color: t.colors.text,
 		border: "none",
 		outline: "none",
 		padding: "0 32px",
 		fontSize: "12px",
-		fontFamily: s.typography.sans,
+		fontFamily: t.typography.sans,
 		boxSizing: "border-box"
 	};
 	if (e === "simple") {
-		let e = u.length > 0, i = m > 0;
+		let e = u.length > 0, a = m > 0;
 		return /* @__PURE__ */ (0, c.jsxs)("div", {
 			style: N,
 			className: v,
@@ -201,9 +185,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							left: "10px",
 							display: "flex",
 							alignItems: "center",
-							color: T ? s.colors.text : s.colors.muted
+							color: T ? t.colors.text : t.colors.muted
 						},
-						children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+						children: /* @__PURE__ */ (0, c.jsx)(i, { size: 14 })
 					}),
 					/* @__PURE__ */ (0, c.jsx)("input", {
 						ref: A,
@@ -224,8 +208,8 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							display: "flex",
 							alignItems: "center"
 						},
-						children: /* @__PURE__ */ (0, c.jsx)(t, {
-							icon: n,
+						children: /* @__PURE__ */ (0, c.jsx)(n, {
+							icon: r,
 							color: "ghost",
 							iconOnly: !0,
 							onClick: j,
@@ -240,7 +224,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					right: 0,
 					top: "32px",
 					zIndex: 10,
-					transition: s.transitions.smooth,
+					transition: t.transitions.smooth,
 					height: e ? "auto" : "0px",
 					opacity: +!!e,
 					transform: e ? "translateY(4px)" : "translateY(-4px)",
@@ -248,19 +232,19 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 				},
 				children: /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
-						backgroundColor: s.colors.sidebarBg,
-						border: `0px solid ${s.colors.border}`,
+						backgroundColor: t.colors.sidebarBg,
+						border: `0px solid ${t.colors.border}`,
 						borderTop: "none",
 						padding: "4px 6px",
 						borderRadius: "6px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: e && b ? b : e && !b && i ? /* @__PURE__ */ (0, c.jsxs)("p", {
+					children: e && b ? b : e && !b && a ? /* @__PURE__ */ (0, c.jsxs)("p", {
 						style: {
 							margin: 0,
 							fontSize: "10px",
-							fontFamily: s.typography.mono,
-							color: s.colors.muted,
+							fontFamily: t.typography.mono,
+							color: t.colors.muted,
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis"
@@ -269,26 +253,26 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							"Showing ",
 							/* @__PURE__ */ (0, c.jsx)("span", {
 								style: {
-									color: s.colors.borderAccent,
+									color: t.colors.borderAccent,
 									fontWeight: "bold"
 								},
 								children: m
 							}),
 							" matching database metrics records"
 						]
-					}) : e && !b && !i ? /* @__PURE__ */ (0, c.jsxs)("p", {
+					}) : e && !b && !a ? /* @__PURE__ */ (0, c.jsxs)("p", {
 						style: {
 							margin: 0,
 							fontSize: "10px",
-							fontFamily: s.typography.mono,
-							color: s.colors.borderAccent,
+							fontFamily: t.typography.mono,
+							color: t.colors.borderAccent,
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis"
 						},
 						children: ["No matching  records found for your query: ", /* @__PURE__ */ (0, c.jsx)("span", {
 							style: {
-								color: s.colors.text,
+								color: t.colors.text,
 								fontWeight: "bold"
 							},
 							children: u
@@ -299,12 +283,12 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		});
 	}
 	if (e === "float") {
-		let e = y && m > 0 && u.length > 0, i = x || u.length > 0, a = b || /* @__PURE__ */ (0, c.jsxs)("p", {
+		let e = y && m > 0 && u.length > 0, a = x || u.length > 0, o = b || /* @__PURE__ */ (0, c.jsxs)("p", {
 			style: {
 				margin: 0,
 				fontSize: "9px",
-				fontFamily: s.typography.mono,
-				color: s.colors.borderAccent,
+				fontFamily: t.typography.mono,
+				color: t.colors.borderAccent,
 				whiteSpace: "nowrap",
 				overflow: "hidden",
 				textOverflow: "ellipsis"
@@ -324,13 +308,13 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 				onMouseLeave: () => E(!1),
 				style: {
 					...P,
-					width: i ? "256px" : "32px",
-					justifyContent: i ? "flex-start" : "center",
-					backgroundColor: i ? s.colors.bgInput : "transparent",
-					borderColor: i ? s.colors.borderAccent : "transparent",
-					padding: i ? "0 8px" : "0"
+					width: a ? "256px" : "32px",
+					justifyContent: a ? "flex-start" : "center",
+					backgroundColor: a ? t.colors.bgInput : "transparent",
+					borderColor: a ? t.colors.borderAccent : "transparent",
+					padding: a ? "0 8px" : "0"
 				},
-				children: i ? /* @__PURE__ */ (0, c.jsxs)("div", {
+				children: a ? /* @__PURE__ */ (0, c.jsxs)("div", {
 					style: {
 						position: "relative",
 						display: "flex",
@@ -339,10 +323,10 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						height: "100%"
 					},
 					children: [
-						/* @__PURE__ */ (0, c.jsx)(r, {
+						/* @__PURE__ */ (0, c.jsx)(i, {
 							size: 14,
 							style: {
-								color: s.colors.text,
+								color: t.colors.text,
 								flexShrink: 0
 							}
 						}),
@@ -366,22 +350,22 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 								display: "flex",
 								alignItems: "center"
 							},
-							children: /* @__PURE__ */ (0, c.jsx)(t, {
+							children: /* @__PURE__ */ (0, c.jsx)(n, {
 								iconOnly: !0,
 								color: "ghost",
-								icon: n,
+								icon: r,
 								onClick: j,
 								size: "xs"
 							})
 						})
 					]
-				}) : /* @__PURE__ */ (0, c.jsx)(t, {
+				}) : /* @__PURE__ */ (0, c.jsx)(n, {
 					iconOnly: !0,
 					size: "sm",
-					icon: r,
+					icon: i,
 					onClick: M,
 					color: "ghost",
-					style: { color: s.colors.muted },
+					style: { color: t.colors.muted },
 					title: "Open Expandable Search"
 				})
 			}), /* @__PURE__ */ (0, c.jsx)("div", {
@@ -391,7 +375,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					width: "256px",
 					zIndex: 10,
 					overflow: "hidden",
-					transition: s.transitions.smooth,
+					transition: t.transitions.smooth,
 					height: e ? "24px" : "0px",
 					opacity: +!!e,
 					transform: e ? "translateY(0px)" : "translateY(-4px)",
@@ -399,14 +383,14 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 				},
 				children: /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
-						backgroundColor: s.colors.sidebarBg,
-						border: `1px solid ${s.colors.border}`,
+						backgroundColor: t.colors.sidebarBg,
+						border: `1px solid ${t.colors.border}`,
 						borderTop: "none",
 						padding: "4px",
 						borderRadius: "0 0 2px 2px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: a
+					children: o
 				})
 			})]
 		});
@@ -426,9 +410,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						left: "10px",
 						display: "flex",
 						alignItems: "center",
-						color: s.colors.muted
+						color: t.colors.muted
 					},
-					children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+					children: /* @__PURE__ */ (0, c.jsx)(i, { size: 14 })
 				}),
 				/* @__PURE__ */ (0, c.jsx)("input", {
 					ref: A,
@@ -450,9 +434,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						display: "flex",
 						alignItems: "center"
 					},
-					children: /* @__PURE__ */ (0, c.jsx)(t, {
+					children: /* @__PURE__ */ (0, c.jsx)(n, {
 						iconOnly: !0,
-						icon: n,
+						icon: r,
 						color: "ghost",
 						onClick: j,
 						size: "xs"
@@ -470,4 +454,4 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 	});
 }
 //#endregion
-export { s as n, u as t };
+export { u as t };

package/dist/chunks/tabs-DkmFedCI.js

@@ -0,0 +1,182 @@
+import { t as e } from "./jsx-runtime-Boo2vksn.js";
+import { t } from "./types-DmQVfNPh.js";
+import { createContext as n, useContext as r, useEffect as i, useState as a } from "react";
+import { create as o } from "zustand";
+//#region src/components/tabs/useTab.ts
+var s = o((e) => ({
+	activeTabs: {},
+	setActiveTab: (t, n) => e((e) => ({ activeTabs: {
+		...e.activeTabs,
+		[t]: n
+	} })),
+	initializeTab: (t, n) => e((e) => e.activeTabs[t] ? {} : { activeTabs: {
+		...e.activeTabs,
+		[t]: n
+	} })
+}));
+function c(e) {
+	let t = s((t) => t.activeTabs[e]), n = s((e) => e.setActiveTab), r = s((e) => e.initializeTab);
+	return {
+		activeTab: t,
+		changeTab: (t) => n(e, t),
+		registerDefault: (t) => r(e, t)
+	};
+}
+//#endregion
+//#region src/components/tabs/TabPanelList.tsx
+var l = e(), u = n({ activeTabId: void 0 }), d = () => r(u);
+function f({ children: e, targetScopeName: n, defaultValue: r }) {
+	let { activeTab: a, registerDefault: o } = c(n);
+	i(() => {
+		o(r);
+	}, [r, o]);
+	let s = a || r, d = {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		minHeight: 0,
+		flex: "1 1 0%",
+		overflow: "hidden",
+		backgroundColor: t.colors.bgInput,
+		fontFamily: t.typography.sans,
+		boxSizing: "border-box"
+	};
+	return /* @__PURE__ */ (0, l.jsx)(u.Provider, {
+		value: { activeTabId: s },
+		children: /* @__PURE__ */ (0, l.jsx)("div", {
+			style: d,
+			children: e
+		})
+	});
+}
+//#endregion
+//#region src/components/tabs/TabPanel.tsx
+function p({ children: e, id: t, persist: n = !1 }) {
+	let { activeTabId: r } = d(), o = r === t, [s, c] = a(!1);
+	return i(() => {
+		o && !s && c(!0);
+	}, [o, s]), !s || !n && !o ? null : /* @__PURE__ */ (0, l.jsx)("div", {
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			width: "100%",
+			height: "100%",
+			backgroundColor: "transparent",
+			transition: "opacity 250ms ease-out, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+			boxSizing: "border-box",
+			opacity: +!!o,
+			transform: o ? "scale(1)" : "scale(0.995)",
+			zIndex: o ? 10 : 0,
+			pointerEvents: o ? "auto" : "none",
+			visibility: o ? "visible" : "hidden"
+		},
+		children: /* @__PURE__ */ (0, l.jsx)("div", {
+			style: {
+				width: "100%",
+				height: "100%",
+				boxSizing: "border-box"
+			},
+			children: e
+		})
+	});
+}
+//#endregion
+//#region src/components/tabs/TabButton.tsx
+function m({ id: e, scopeName: n, children: r, variant: i = "underline", startIcon: o, endIcon: s }) {
+	let { activeTab: u, changeTab: d } = c(n), [f, p] = a(!1), m = u === e, h = {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "6px",
+		backgroundColor: "transparent",
+		border: "none",
+		outline: "none",
+		fontFamily: t.typography.sans,
+		fontSize: "12px",
+		userSelect: "none",
+		cursor: "pointer",
+		height: "100%",
+		transition: "all 150ms ease",
+		boxSizing: "border-box",
+		position: "relative",
+		zIndex: 10
+	}, g = {
+		underline: {
+			padding: "4px 12px 8px 12px",
+			fontWeight: m ? 600 : 500,
+			color: m || f ? t.colors.text : t.colors.muted,
+			borderBottom: `2px solid ${m ? t.colors.borderAccent : "transparent"}`
+		},
+		"sliding-underline": {
+			padding: "8px 16px",
+			fontWeight: m ? 700 : 500,
+			color: m || f ? t.colors.text : t.colors.muted
+		},
+		pill: {
+			padding: "6px 14px",
+			fontWeight: 700,
+			borderRadius: "9999px",
+			backgroundColor: m ? t.colors.borderAccent : f ? t.colors.hoverBg : "transparent",
+			color: m ? "#ffffff" : f ? t.colors.text : t.colors.muted,
+			transform: m ? "scale(1.02)" : "scale(1)",
+			boxShadow: m ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+		},
+		vscode: {
+			padding: "0 16px",
+			fontWeight: 500,
+			color: m || f ? t.colors.text : t.colors.muted,
+			backgroundColor: m ? t.colors.bgInput : f ? "rgba(0,0,0,0.02)" : t.colors.sidebarBg,
+			borderRight: `1px solid ${t.colors.border}`,
+			borderTop: m ? `2px solid ${t.colors.borderAccent}` : "2px solid transparent",
+			marginTop: m ? "-1px" : "0"
+		},
+		ghost: {
+			padding: "6px 12px",
+			fontWeight: m ? 700 : 500,
+			borderRadius: "2px",
+			backgroundColor: m ? t.colors.hoverBg : f ? "rgba(0,0,0,0.04)" : "transparent",
+			color: m || f ? t.colors.text : t.colors.muted
+		}
+	};
+	return /* @__PURE__ */ (0, l.jsxs)("button", {
+		"data-id": e,
+		onClick: () => d(e),
+		onMouseEnter: () => p(!0),
+		onMouseLeave: () => p(!1),
+		style: {
+			...h,
+			...g[i]
+		},
+		children: [
+			o && /* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					display: "inline-flex",
+					flexShrink: 0,
+					opacity: m || f ? 1 : .7
+				},
+				children: o
+			}),
+			/* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: r
+			}),
+			s && /* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					display: "inline-flex",
+					flexShrink: 0,
+					opacity: m || f ? 1 : .6
+				},
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { c as i, p as n, f as r, m as t };

package/dist/chunks/types-DmQVfNPh.js

@@ -0,0 +1,21 @@
+//#region src/components/types.ts
+var e = {
+	colors: {
+		bgInput: "var(--color-vsc-bg-input, #f6f8fa)",
+		border: "var(--color-vsc-border, #e4e4e7)",
+		borderAccent: "var(--color-vsc-accent, #007acc)",
+		borderAccentHover: "var(--color-vsc-accent-hover, #0062a3)",
+		text: "var(--color-vsc-text, #333333)",
+		muted: "var(--color-vsc-muted, #6a737d)",
+		sidebarBg: "var(--color-vsc-sidebar, #f3f3f3)",
+		hoverBg: "var(--color-vsc-hover, #e8e8e8)",
+		accentBgLight: "rgba(0, 122, 204, 0.1)"
+	},
+	typography: {
+		sans: "var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)",
+		mono: "var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)"
+	},
+	transitions: { smooth: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)" }
+};
+//#endregion
+export { e as t };

package/dist/components/search/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/search-WFmasN49.js";
-export { t as SearchInput, e as searchTokens };
+import { t as e } from "../../chunks/search-DSDSn6PK.js";
+export { e as SearchInput };

package/dist/components/search/types.d.ts

@@ -20,23 +20,3 @@ export interface SearchInputProps {
     showFloatPeek?: boolean;
     peekContent?: React.ReactNode;
 }
-export declare const searchTokens: {
-    colors: {
-        bgInput: string;
-        border: string;
-        borderAccent: string;
-        borderAccentHover: string;
-        text: string;
-        muted: string;
-        sidebarBg: string;
-        hoverBg: string;
-        accentBgLight: string;
-    };
-    typography: {
-        sans: string;
-        mono: string;
-    };
-    transitions: {
-        smooth: string;
-    };
-};

package/dist/components/tabs/index.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../../chunks/tabs-MaVN00hJ.js";
+import { i as e, n as t, r as n, t as r } from "../../chunks/tabs-DkmFedCI.js";
 export { r as TabButton, t as TabPanel, n as TabPanelList, e as useTab };

package/dist/components/types.d.ts

@@ -0,0 +1,20 @@
+export declare const searchTokens: {
+    colors: {
+        bgInput: string;
+        border: string;
+        borderAccent: string;
+        borderAccentHover: string;
+        text: string;
+        muted: string;
+        sidebarBg: string;
+        hoverBg: string;
+        accentBgLight: string;
+    };
+    typography: {
+        sans: string;
+        mono: string;
+    };
+    transitions: {
+        smooth: string;
+    };
+};

package/dist/index.js

@@ -1,7 +1,7 @@
 import { t as e } from "./chunks/resizable-ImB8dfG_.js";
-import { i as t, n, r, t as i } from "./chunks/tabs-MaVN00hJ.js";
+import { i as t, n, r, t as i } from "./chunks/tabs-DkmFedCI.js";
 import { t as a } from "./chunks/Button-BgQwvn3C.js";
 import { n as o, t as s } from "./chunks/button-dHcpTNIG.js";
 import { C as c, E as l, S as u, T as d, _ as f, a as p, b as m, c as h, d as g, f as _, g as v, h as y, i as b, l as x, m as S, n as C, o as w, p as T, r as E, s as D, t as O, u as k, v as A, w as j, x as M, y as N } from "./chunks/icons-BpfDVwCQ.js";
-import { n as P, t as F } from "./chunks/search-WFmasN49.js";
-export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, F as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, P as searchTokens, t as useTab };
+import { t as P } from "./chunks/search-DSDSn6PK.js";
+export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, P as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, t as useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knymbus/voxel-ui",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/search/SearchInput.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { SearchInputProps, searchTokens } from './types';
+import { SearchInputProps } from './types';
 import { Search, Close } from '../icons';
 import { Button } from '../button/Button';
 import SearchMenu from './SearchMenu';
+import { searchTokens } from '../types';
 
 export default function SearchInput({
     variant = 'simple',

package/src/components/search/SearchMenu.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { SearchResultItem, searchTokens } from './types';
+import { SearchResultItem } from './types';
+import { searchTokens } from '../types';
 
 interface SearchMenuProps {
   isOpen: boolean;

package/src/components/search/types.ts

@@ -25,24 +25,3 @@ export interface SearchInputProps {
   peekContent?: React.ReactNode; 
 }
 
-export const searchTokens = {
-  colors: {
-    bgInput: 'var(--color-vsc-bg-input, #f6f8fa)',
-    border: 'var(--color-vsc-border, #e4e4e7)',
-    borderAccent: 'var(--color-vsc-accent, #007acc)',
-    borderAccentHover: 'var(--color-vsc-accent-hover, #0062a3)',
-    text: 'var(--color-vsc-text, #333333)',
-    muted: 'var(--color-vsc-muted, #6a737d)',
-    sidebarBg: 'var(--color-vsc-sidebar, #f3f3f3)',
-    hoverBg: 'var(--color-vsc-hover, #e8e8e8)',
-    accentBgLight: 'rgba(0, 122, 204, 0.1)'
-  },
-  typography: {
-    /* ⚡ Pulls Tailwind's native font configuration maps from your global layout shell App context */
-    sans: 'var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)',
-    mono: 'var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)'
-  },
-  transitions: {
-    smooth: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'
-  }
-};

package/src/components/tabs/TabButton.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTab } from './useTab';
-import { TabVariant } from './types';
+import { TabVariant } from './types'; // Shares the typography/color tokens mapping schema
+import { searchTokens } from '../types';
 
 interface TabButtonProps {
   id: string;
@@ -20,37 +21,78 @@ export default function TabButton({
   endIcon
 }: TabButtonProps) {
   const { activeTab, changeTab } = useTab(scopeName);
+  const [isHovered, setIsHovered] = useState(false);
   const isCurrent = activeTab === id;
 
-  const baseStyles = "flex items-center justify-center gap-1.5 focus:outline-none border-none outline-none z-10 transition-colors select-none h-full";
+  const baseButtonStyles: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '6px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    fontFamily: searchTokens.typography.sans,
+    fontSize: '12px',
+    userSelect: 'none',
+    cursor: 'pointer',
+    height: '100%',
+    transition: 'all 150ms ease',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 10
+  };
 
-  const variantClasses: Record<TabVariant, string> = {
-    underline: `pb-2 pt-1 px-3 text-xs font-semibold cursor-pointer border-b-2 ${
-      isCurrent ? 'border-vsc-accent text-vsc-text' : 'border-transparent text-vsc-muted hover:text-vsc-text'
-    }`,
-    'sliding-underline': `py-2 px-4 text-xs font-semibold cursor-pointer transition-colors duration-200 ${
-      isCurrent ? 'text-vsc-text font-bold' : 'text-vsc-muted hover:text-vsc-text'
-    }`,
-    pill: `px-3.5 py-1.5 text-xs font-bold rounded-full cursor-pointer scale-100 ${
-      isCurrent ? 'bg-vsc-accent text-vsc-button-text shadow-sm' : 'bg-vsc-hover/40 text-vsc-muted hover:bg-vsc-hover'
-    }`,
-    vscode: `px-4 text-xs font-medium border-r border-vsc-border cursor-pointer ${
-      isCurrent ? 'bg-vsc-bg text-vsc-text border-t-2 border-t-vsc-accent -mt-[1px]' : 'bg-vsc-sidebar text-vsc-muted hover:bg-vsc-hover/50'
-    }`,
-    ghost: `px-3 py-1.5 text-xs font-semibold rounded cursor-pointer ${
-      isCurrent ? 'bg-vsc-hover text-vsc-text font-bold' : 'text-vsc-muted hover:bg-vsc-hover/30'
-    }`
+  const variantStyles: Record<TabVariant, React.CSSProperties> = {
+    underline: {
+      padding: '4px 12px 8px 12px',
+      fontWeight: isCurrent ? 600 : 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      borderBottom: `2px solid ${isCurrent ? searchTokens.colors.borderAccent : 'transparent'}`
+    },
+    'sliding-underline': {
+      padding: '8px 16px',
+      fontWeight: isCurrent ? 700 : 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted)
+    },
+    pill: {
+      padding: '6px 14px',
+      fontWeight: 700,
+      borderRadius: '9999px',
+      backgroundColor: isCurrent ? searchTokens.colors.borderAccent : (isHovered ? searchTokens.colors.hoverBg : 'transparent'),
+      color: isCurrent ? '#ffffff' : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      transform: isCurrent ? 'scale(1.02)' : 'scale(1)',
+      boxShadow: isCurrent ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+    },
+    vscode: {
+      padding: '0 16px',
+      fontWeight: 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      backgroundColor: isCurrent ? searchTokens.colors.bgInput : (isHovered ? 'rgba(0,0,0,0.02)' : searchTokens.colors.sidebarBg),
+      borderRight: `1px solid ${searchTokens.colors.border}`,
+      borderTop: isCurrent ? `2px solid ${searchTokens.colors.borderAccent}` : '2px solid transparent',
+      marginTop: isCurrent ? '-1px' : '0'
+    },
+    ghost: {
+      padding: '6px 12px',
+      fontWeight: isCurrent ? 700 : 500,
+      borderRadius: '2px',
+      backgroundColor: isCurrent ? searchTokens.colors.hoverBg : (isHovered ? 'rgba(0,0,0,0.04)' : 'transparent'),
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted)
+    }
   };
 
   return (
     <button
       data-id={id}
       onClick={() => changeTab(id)}
-      className={`${baseStyles} ${variantClasses[variant]}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{ ...baseButtonStyles, ...variantStyles[variant] }}
     >
-      {startIcon && <span className="shrink-0 opacity-80">{startIcon}</span>}
-      <span className="truncate">{children}</span>
-      {endIcon && <span className="shrink-0 opacity-70">{endIcon}</span>}
+      {startIcon && <span style={{ display: 'inline-flex', flexShrink: 0, opacity: isCurrent || isHovered ? 1 : 0.7 }}>{startIcon}</span>}
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{children}</span>
+      {endIcon && <span style={{ display: 'inline-flex', flexShrink: 0, opacity: isCurrent || isHovered ? 1 : 0.6 }}>{endIcon}</span>}
     </button>
   );
 }

package/src/components/tabs/TabButtonGroup.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTab } from './useTab';
 import { TabVariant } from './types';
-import TabButton from './TabButton'; // Imported to execute type-checking audits
+import TabButton from './TabButton';
+import { searchTokens } from '../types';
 
 interface TabButtonGroupProps {
   children: React.ReactNode;
@@ -20,15 +21,10 @@ export default function TabButtonGroup({
   const [lineStyles, setLineStyles] = useState<React.CSSProperties>({ left: 0, width: 0, opacity: 0 });
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
-  // --- STRICT CHILDREN SUB-COMPONENT VALIDATION ENGINE LOOP ---
   const validatedChildren = React.Children.map(children, (child) => {
     if (!React.isValidElement(child)) return null;
-
-    // Verify if the child component reference maps directly to our TabButton signature
     if (child.type !== TabButton) {
-      console.warn(
-        `[Voxel UI Validation Warning]: TabButtonGroup scope "${scopeName}" only accepts sub-children elements of type <TabButton />. Ignored invalid component node.`
-      );
+      console.warn(`[Voxel UI Warning]: TabButtonGroup only accepts children of type <TabButton />.`);
       return null;
     }
     return child;
@@ -45,18 +41,27 @@ export default function TabButtonGroup({
         left: `${targetElement.offsetLeft}px`,
         width: `${targetElement.offsetWidth}px`,
         opacity: 1,
-        backgroundColor: hoveredId && hoveredId !== activeTab ? 'var(--color-vsc-text)' : 'var(--color-vsc-accent)'
+        backgroundColor: hoveredId && hoveredId !== activeTab ? searchTokens.colors.text : searchTokens.colors.borderAccent
       });
     }
   }, [activeTab, hoveredId, variant]);
 
-  const containerClasses = {
-    underline: 'flex items-center space-x-2 border-b border-vsc-border w-full bg-vsc-bg pb-[1px]',
-    'sliding-underline': 'relative flex items-center border-b border-vsc-border w-full bg-vsc-bg pb-[2px]',
-    pill: 'flex items-center space-x-1.5 p-1 bg-vsc-sidebar rounded-full w-fit',
-    vscode: 'flex items-center h-9 bg-vsc-sidebar border-b border-vsc-border w-full overflow-hidden',
-    ghost: 'flex items-center space-x-1 p-1 bg-vsc-bg-input border border-vsc-border rounded'
-  }[variant];
+  const baseContainerStyles: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: searchTokens.typography.sans,
+    userSelect: 'none',
+    boxSizing: 'border-box',
+    position: 'relative'
+  };
+
+  const variantContainerStyles: Record<TabVariant, React.CSSProperties> = {
+    underline: { width: '100%', borderBottom: `1px solid ${searchTokens.colors.border}`, backgroundColor: searchTokens.colors.bgInput, gap: '8px', paddingBottom: '1px' },
+    'sliding-underline': { width: '100%', borderBottom: `1px solid ${searchTokens.colors.border}`, backgroundColor: searchTokens.colors.bgInput, paddingBottom: '2px' },
+    pill: { width: 'max-content', padding: '4px', backgroundColor: searchTokens.colors.sidebarBg, borderRadius: '9999px', gap: '6px' },
+    vscode: { width: '100%', height: '36px', backgroundColor: searchTokens.colors.sidebarBg, borderBottom: `1px solid ${searchTokens.colors.border}`, overflowX: 'auto', overflowY: 'hidden' },
+    ghost: { width: '100%', padding: '4px', backgroundColor: searchTokens.colors.bgInput, border: `1px solid ${searchTokens.colors.border}`, borderRadius: '4px', gap: '4px' }
+  };
 
   return (
     <div 
@@ -66,15 +71,22 @@ export default function TabButtonGroup({
         if (btn) setHoveredId(btn.getAttribute('data-id'));
       }}
       onMouseLeave={() => setHoveredId(null)}
-      className={`${containerClasses} select-none`}
+      style={{ ...baseContainerStyles, ...variantContainerStyles[variant] }}
     >
-      {/* Render exclusively the type-validated sub-nodes collection array */}
       {validatedChildren}
 
+      {/* Real-time Sliding Underline Track Line Component */}
       {variant === 'sliding-underline' && (
         <div 
-          className="absolute bottom-0 h-0.5 rounded-t transition-all duration-200 ease-out pointer-events-none z-20"
-          style={lineStyles}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            height: '2px',
+            borderRadius: '2px 2px 0 0',
+            transition: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+            zIndex: 20,
+            ...lineStyles
+          }}
         />
       )}
     </div>

package/src/components/tabs/TabPanel.tsx

@@ -10,7 +10,6 @@ interface TabPanelProps {
 export default function TabPanel({ children, id, persist = false }: TabPanelProps) {
   const { activeTabId } = useTabListContext();
   const isCurrent = activeTabId === id;
-  
   const [hasRenderedOnce, setHasRenderedOnce] = useState<boolean>(false);
 
   useEffect(() => {
@@ -22,21 +21,40 @@ export default function TabPanel({ children, id, persist = false }: TabPanelProp
   if (!hasRenderedOnce) return null;
   if (!persist && !isCurrent) return null;
 
+  // Render the core layout canvas frame absolutely with zero layout shifts
+  const panelInlineStyles: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    /* 
+      ⚡ FIXED VISIBILITY OVERRIDE: 
+      Bypassed background color fills entirely to prevent canvas z-index clipping traps.
+    */
+    backgroundColor: 'transparent', 
+    transition: 'opacity 250ms ease-out, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    boxSizing: 'border-box',
+    
+    // Smooth opacity fading animation matrices
+    opacity: isCurrent ? 1 : 0,
+    transform: isCurrent ? 'scale(1)' : 'scale(0.995)',
+    zIndex: isCurrent ? 10 : 0,
+    pointerEvents: isCurrent ? 'auto' : 'none',
+    visibility: isCurrent ? 'visible' : 'hidden'
+  };
+
   return (
-    <div
-      className={`absolute inset-0 w-full h-full bg-vsc-bg transition-all duration-300 ease-in-out ${
-        isCurrent
-          ? 'opacity-100 scale-100 z-10 pointer-events-auto visible'
-          : 'opacity-0 scale-[0.99] z-0 pointer-events-none invisible delay-75'
-      }`}
-    >
-      {/* 
-        Inner layout wrapper applies a micro-blur and fine opacity mask cross-fade 
-        to ensure background elements never clip through transparent gaps during transitions.
-      */}
-      <div className={`w-full h-full transition-opacity duration-300 ${
-        isCurrent ? 'opacity-100' : 'opacity-0'
-      }`}>
+    <div style={panelInlineStyles}>
+      <div 
+        style={{ 
+          width: '100%', 
+          height: '100%', 
+          boxSizing: 'border-box'
+        }}
+      >
         {children}
       </div>
     </div>

package/src/components/tabs/TabPanelList.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, createContext, useContext } from 'react';
 import { useTab } from './useTab';
+import { searchTokens } from '../types';
 
 interface TabPanelListProps {
   children: React.ReactNode;
-  targetScopeName: string; // Ties this structural list panel block to a named useTab hook loop
-  defaultValue: string;    // Initial focus viewport tab on render
+  targetScopeName: string; // Ties this list panel block to a named useTab instance
+  defaultValue: string;    // Initial focused tab on mount
 }
 
 const TabListContext = createContext<{ activeTabId: string | undefined }>({ activeTabId: undefined });
@@ -14,16 +15,29 @@ export const useTabListContext = () => useContext(TabListContext);
 export default function TabPanelList({ children, targetScopeName, defaultValue }: TabPanelListProps) {
   const { activeTab, registerDefault } = useTab(targetScopeName);
 
-  // Initialize defaultValue into state if it's the first execution pass
+  // Initialize defaultValue into the global Zustand store on first render execution
   useEffect(() => {
     registerDefault(defaultValue);
   }, [defaultValue, registerDefault]);
 
   const activeTabId = activeTab || defaultValue;
 
+  // Root canvas frame styling object using pure inline layout logic
+  const listContainerInlineStyles: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    minHeight: 0,
+    flex: '1 1 0%',
+    overflow: 'hidden',
+    backgroundColor: searchTokens.colors.bgInput,
+    fontFamily: searchTokens.typography.sans,
+    boxSizing: 'border-box'
+  };
+
   return (
     <TabListContext.Provider value={{ activeTabId }}>
-      <div className="relative w-full h-full min-h-0 flex-1 overflow-hidden bg-vsc-bg">
+      <div style={listContainerInlineStyles}>
         {children}
       </div>
     </TabListContext.Provider>

package/src/components/types.ts

@@ -0,0 +1,22 @@
+
+export const searchTokens = {
+  colors: {
+    bgInput: 'var(--color-vsc-bg-input, #f6f8fa)',
+    border: 'var(--color-vsc-border, #e4e4e7)',
+    borderAccent: 'var(--color-vsc-accent, #007acc)',
+    borderAccentHover: 'var(--color-vsc-accent-hover, #0062a3)',
+    text: 'var(--color-vsc-text, #333333)',
+    muted: 'var(--color-vsc-muted, #6a737d)',
+    sidebarBg: 'var(--color-vsc-sidebar, #f3f3f3)',
+    hoverBg: 'var(--color-vsc-hover, #e8e8e8)',
+    accentBgLight: 'rgba(0, 122, 204, 0.1)'
+  },
+  typography: {
+    /* ⚡ Pulls Tailwind's native font configuration maps from your global layout shell App context */
+    sans: 'var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)',
+    mono: 'var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)'
+  },
+  transitions: {
+    smooth: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'
+  }
+};

package/dist/chunks/tabs-MaVN00hJ.js

@@ -1,86 +0,0 @@
-import { t as e } from "./jsx-runtime-Boo2vksn.js";
-import { createContext as t, useContext as n, useEffect as r, useState as i } from "react";
-import { create as a } from "zustand";
-//#region src/components/tabs/useTab.ts
-var o = a((e) => ({
-	activeTabs: {},
-	setActiveTab: (t, n) => e((e) => ({ activeTabs: {
-		...e.activeTabs,
-		[t]: n
-	} })),
-	initializeTab: (t, n) => e((e) => e.activeTabs[t] ? {} : { activeTabs: {
-		...e.activeTabs,
-		[t]: n
-	} })
-}));
-function s(e) {
-	let t = o((t) => t.activeTabs[e]), n = o((e) => e.setActiveTab), r = o((e) => e.initializeTab);
-	return {
-		activeTab: t,
-		changeTab: (t) => n(e, t),
-		registerDefault: (t) => r(e, t)
-	};
-}
-//#endregion
-//#region src/components/tabs/TabPanelList.tsx
-var c = e(), l = t({ activeTabId: void 0 }), u = () => n(l);
-function d({ children: e, targetScopeName: t, defaultValue: n }) {
-	let { activeTab: i, registerDefault: a } = s(t);
-	r(() => {
-		a(n);
-	}, [n, a]);
-	let o = i || n;
-	return /* @__PURE__ */ (0, c.jsx)(l.Provider, {
-		value: { activeTabId: o },
-		children: /* @__PURE__ */ (0, c.jsx)("div", {
-			className: "relative w-full h-full min-h-0 flex-1 overflow-hidden bg-vsc-bg",
-			children: e
-		})
-	});
-}
-//#endregion
-//#region src/components/tabs/TabPanel.tsx
-function f({ children: e, id: t, persist: n = !1 }) {
-	let { activeTabId: a } = u(), o = a === t, [s, l] = i(!1);
-	return r(() => {
-		o && !s && l(!0);
-	}, [o, s]), !s || !n && !o ? null : /* @__PURE__ */ (0, c.jsx)("div", {
-		className: `absolute inset-0 w-full h-full bg-vsc-bg transition-all duration-300 ease-in-out ${o ? "opacity-100 scale-100 z-10 pointer-events-auto visible" : "opacity-0 scale-[0.99] z-0 pointer-events-none invisible delay-75"}`,
-		children: /* @__PURE__ */ (0, c.jsx)("div", {
-			className: `w-full h-full transition-opacity duration-300 ${o ? "opacity-100" : "opacity-0"}`,
-			children: e
-		})
-	});
-}
-//#endregion
-//#region src/components/tabs/TabButton.tsx
-function p({ id: e, scopeName: t, children: n, variant: r = "underline", startIcon: i, endIcon: a }) {
-	let { activeTab: o, changeTab: l } = s(t), u = o === e;
-	return /* @__PURE__ */ (0, c.jsxs)("button", {
-		"data-id": e,
-		onClick: () => l(e),
-		className: `flex items-center justify-center gap-1.5 focus:outline-none border-none outline-none z-10 transition-colors select-none h-full ${{
-			underline: `pb-2 pt-1 px-3 text-xs font-semibold cursor-pointer border-b-2 ${u ? "border-vsc-accent text-vsc-text" : "border-transparent text-vsc-muted hover:text-vsc-text"}`,
-			"sliding-underline": `py-2 px-4 text-xs font-semibold cursor-pointer transition-colors duration-200 ${u ? "text-vsc-text font-bold" : "text-vsc-muted hover:text-vsc-text"}`,
-			pill: `px-3.5 py-1.5 text-xs font-bold rounded-full cursor-pointer scale-100 ${u ? "bg-vsc-accent text-vsc-button-text shadow-sm" : "bg-vsc-hover/40 text-vsc-muted hover:bg-vsc-hover"}`,
-			vscode: `px-4 text-xs font-medium border-r border-vsc-border cursor-pointer ${u ? "bg-vsc-bg text-vsc-text border-t-2 border-t-vsc-accent -mt-[1px]" : "bg-vsc-sidebar text-vsc-muted hover:bg-vsc-hover/50"}`,
-			ghost: `px-3 py-1.5 text-xs font-semibold rounded cursor-pointer ${u ? "bg-vsc-hover text-vsc-text font-bold" : "text-vsc-muted hover:bg-vsc-hover/30"}`
-		}[r]}`,
-		children: [
-			i && /* @__PURE__ */ (0, c.jsx)("span", {
-				className: "shrink-0 opacity-80",
-				children: i
-			}),
-			/* @__PURE__ */ (0, c.jsx)("span", {
-				className: "truncate",
-				children: n
-			}),
-			a && /* @__PURE__ */ (0, c.jsx)("span", {
-				className: "shrink-0 opacity-70",
-				children: a
-			})
-		]
-	});
-}
-//#endregion
-export { s as i, f as n, d as r, p as t };