@burdenoff/fe-libs 2026.527.2 → 2026.527.4

package/dist/chrome/PanelTabs.js

@@ -10,29 +10,32 @@ var o = ({ tabs: o, activeTabId: s, onTabClick: c, onClose: l, onMinimize: u, on
 			return /* @__PURE__ */ a("button", {
 				onClick: () => c(e.id),
 				className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${e.id === s ? "bg-bg-surface text-text-primary border-b-2 border-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface-hover"}`,
-				children: [t && /* @__PURE__ */ i(t, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ i("span", { children: e.title })]
+				children: [t && /* @__PURE__ */ i(t, { className: "size-3.5" }), /* @__PURE__ */ i("span", { children: e.title })]
 			}, e.id);
 		})
 	}), /* @__PURE__ */ a("div", {
 		className: "flex items-center gap-0.5",
 		children: [
 			u && /* @__PURE__ */ i("button", {
+				type: "button",
 				onClick: u,
 				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
 				"aria-label": "Minimize panel",
-				children: /* @__PURE__ */ i(n, { className: "w-3.5 h-3.5" })
+				children: /* @__PURE__ */ i(n, { className: "size-3.5" })
 			}),
 			d && /* @__PURE__ */ i("button", {
+				type: "button",
 				onClick: d,
 				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
 				"aria-label": f ? "Restore panel" : "Maximize panel",
-				children: i(f ? t : e, { className: "w-3.5 h-3.5" })
+				children: i(f ? t : e, { className: "size-3.5" })
 			}),
 			/* @__PURE__ */ i("button", {
+				type: "button",
 				onClick: l,
 				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
 				"aria-label": "Close panel",
-				children: /* @__PURE__ */ i(r, { className: "w-3.5 h-3.5" })
+				children: /* @__PURE__ */ i(r, { className: "size-3.5" })
 			})
 		]
 	})]

package/dist/chrome/PluginContextMenuTarget.js

@@ -57,7 +57,7 @@ var o = ({ targetId: o, children: s, className: c }) => {
 					role: "menuitem",
 					children: [/* @__PURE__ */ a("span", {
 						className: "flex items-center gap-2",
-						children: [t ? /* @__PURE__ */ i(t, { className: "h-4 w-4" }) : null, /* @__PURE__ */ i("span", { children: e.label })]
+						children: [t ? /* @__PURE__ */ i(t, { className: "size-4" }) : null, /* @__PURE__ */ i("span", { children: e.label })]
 					}), e.shortcut ? /* @__PURE__ */ i("span", {
 						className: "text-xs text-text-secondary",
 						children: e.shortcut

package/dist/chrome/ProductPickerSheet.js

@@ -24,10 +24,10 @@ var o = ({ open: o, onOpenChange: s, products: c, currentProductId: l, onProduct
 					className: `w-full flex items-center gap-4 px-4 py-3.5 text-body-sm transition-colors ${e.id === l ? "bg-action-ghost-bg-hover" : "hover:bg-action-ghost-bg-hover"}`,
 					children: [
 						e.icon ? /* @__PURE__ */ i("div", {
-							className: "w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
+							className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
 							children: e.icon
 						}) : /* @__PURE__ */ i("div", {
-							className: "w-10 h-10 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0",
+							className: "size-10 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0",
 							children: /* @__PURE__ */ i("span", {
 								className: "text-action-primary-text font-bold text-sm",
 								children: e.name.substring(0, 2).toUpperCase()
@@ -44,7 +44,7 @@ var o = ({ open: o, onOpenChange: s, products: c, currentProductId: l, onProduct
 							})]
 						}),
 						e.id === l && /* @__PURE__ */ i("svg", {
-							className: "w-5 h-5 text-action-primary-bg flex-shrink-0",
+							className: "size-5 text-action-primary-bg flex-shrink-0",
 							fill: "currentColor",
 							viewBox: "0 0 20 20",
 							children: /* @__PURE__ */ i("path", {
@@ -54,7 +54,7 @@ var o = ({ open: o, onOpenChange: s, products: c, currentProductId: l, onProduct
 							})
 						}),
 						e.url && e.id !== l && /* @__PURE__ */ i("svg", {
-							className: "w-4 h-4 text-text-tertiary flex-shrink-0",
+							className: "size-4 text-text-tertiary flex-shrink-0",
 							fill: "none",
 							stroke: "currentColor",
 							viewBox: "0 0 24 24",

package/dist/chrome/ProductSideNav.js

@@ -20,7 +20,7 @@ function c({ logo: c, appName: l, groupOrder: u, groupLabels: d, mobileActions:
 		},
 		"aria-label": m,
 		children: [/* @__PURE__ */ i("div", {
-			className: "w-8 h-8 bg-action-primary-bg rounded-md flex items-center justify-center flex-shrink-0",
+			className: "size-8 bg-action-primary-bg rounded-md flex items-center justify-center flex-shrink-0",
 			children: /* @__PURE__ */ i("span", {
 				className: "text-action-primary-text font-bold text-sm",
 				children: c

package/dist/chrome/ProductSwitcher.js

@@ -22,7 +22,7 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 			"aria-expanded": l,
 			children: [
 				/* @__PURE__ */ r("div", {
-					className: "w-6 h-6 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-xs",
+					className: "size-6 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-xs",
 					style: { backgroundColor: f?.color || "#3b82f6" },
 					children: f?.icon || f?.name.charAt(0)
 				}),
@@ -61,7 +61,7 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.comingSoon ? "text-text-tertiary cursor-not-allowed opacity-60" : e.id === o ? "bg-action-ghost-bg-hover text-text-primary font-medium" : "text-text-primary hover:bg-action-ghost-bg-hover"}`,
 					children: [
 						/* @__PURE__ */ r("div", {
-							className: "w-8 h-8 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm",
+							className: "size-8 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm",
 							style: { backgroundColor: e.color || "#3b82f6" },
 							children: e.icon || e.name.charAt(0)
 						}),
@@ -73,7 +73,7 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 							className: "text-body-xs px-2 py-0.5 rounded-full bg-bg-sunken text-text-secondary border border-border-subtle",
 							children: "Coming soon"
 						}) : e.id === o && /* @__PURE__ */ r("svg", {
-							className: "w-5 h-5 text-action-primary-text",
+							className: "size-5 text-action-primary-text",
 							fill: "currentColor",
 							viewBox: "0 0 20 20",
 							children: /* @__PURE__ */ r("path", {

package/dist/chrome/ProfileSwitcher.js

@@ -20,7 +20,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 			"aria-expanded": h,
 			children: [
 				/* @__PURE__ */ i("div", {
-					className: "w-8 h-8 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
+					className: "size-8 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
 					children: o.avatar ? /* @__PURE__ */ i("img", {
 						src: o.avatar,
 						alt: `${o.firstName} ${o.lastName}`,
@@ -39,7 +39,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 					]
 				}),
 				!m && y && /* @__PURE__ */ i("span", {
-					className: "text-xs bg-action-primary-bg text-action-primary-text rounded-full w-5 h-5 flex items-center justify-center font-semibold",
+					className: "text-xs bg-action-primary-bg text-action-primary-text rounded-full size-5 flex items-center justify-center font-semibold",
 					children: s.length
 				}),
 				!m && /* @__PURE__ */ i("svg", {
@@ -62,7 +62,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 					className: "px-6 py-4 text-center border-b border-border-subtle",
 					children: [
 						/* @__PURE__ */ i("div", {
-							className: "w-20 h-20 mx-auto mb-3 rounded-full bg-action-primary-bg flex items-center justify-center",
+							className: "size-20 mx-auto mb-3 rounded-full bg-action-primary-bg flex items-center justify-center",
 							children: o.avatar ? /* @__PURE__ */ i("img", {
 								src: o.avatar,
 								alt: o.firstName,
@@ -103,6 +103,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 				l && /* @__PURE__ */ i("div", {
 					className: "px-4 py-2",
 					children: /* @__PURE__ */ i("button", {
+						type: "button",
 						onClick: () => {
 							l(), g(!1);
 						},
@@ -126,7 +127,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 								className: "flex items-center gap-3",
 								children: [
 									/* @__PURE__ */ i("div", {
-										className: "w-10 h-10 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
+										className: "size-10 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
 										children: e.avatar ? /* @__PURE__ */ i("img", {
 											src: e.avatar,
 											alt: e.name,
@@ -137,6 +138,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 										})
 									}),
 									/* @__PURE__ */ a("button", {
+										type: "button",
 										onClick: () => {
 											d && (d(e), g(!1));
 										},
@@ -154,13 +156,14 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 										})]
 									}),
 									p && /* @__PURE__ */ i("button", {
+										type: "button",
 										onClick: (t) => {
 											t.stopPropagation(), p(e.id);
 										},
-										className: "w-6 h-6 flex items-center justify-center rounded-full hover:bg-status-error-bg/20 text-text-tertiary hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
+										className: "size-6 flex items-center justify-center rounded-full hover:bg-status-error-bg/20 text-text-tertiary hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
 										"aria-label": "Remove account",
 										children: /* @__PURE__ */ i("svg", {
-											className: "w-4 h-4",
+											className: "size-4",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
@@ -182,12 +185,13 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 					children: /* @__PURE__ */ a("div", {
 						className: "grid grid-cols-2 gap-2",
 						children: [f && /* @__PURE__ */ a("button", {
+							type: "button",
 							onClick: () => {
 								f(), g(!1);
 							},
 							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
 							children: [/* @__PURE__ */ i("svg", {
-								className: "w-4 h-4",
+								className: "size-4",
 								fill: "none",
 								stroke: "currentColor",
 								viewBox: "0 0 24 24",
@@ -199,12 +203,13 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 								})
 							}), /* @__PURE__ */ i("span", { children: "Add account" })]
 						}), u && /* @__PURE__ */ a("button", {
+							type: "button",
 							onClick: () => {
 								u(), g(!1);
 							},
 							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
 							children: [/* @__PURE__ */ i("svg", {
-								className: "w-4 h-4",
+								className: "size-4",
 								fill: "none",
 								stroke: "currentColor",
 								viewBox: "0 0 24 24",

package/dist/chrome/ShortcutHelpDialog.js

@@ -56,10 +56,11 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 						className: "text-text-secondary text-sm mt-1",
 						children: "Quickly navigate and perform actions using your keyboard"
 					})] }), /* @__PURE__ */ a("button", {
+						type: "button",
 						onClick: c,
 						className: "p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-secondary transition-colors",
 						"aria-label": "Close",
-						children: /* @__PURE__ */ a(i, { className: "w-5 h-5" })
+						children: /* @__PURE__ */ a(i, { className: "size-5" })
 					})]
 				}),
 				/* @__PURE__ */ a("div", {

package/dist/chrome/SideNavigation.js

@@ -1,153 +1,43 @@
 import { Tooltip as e, TooltipContent as t, TooltipProvider as n, TooltipTrigger as r } from "../ui/tooltip.js";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { NavItemRenderer as i } from "./sideNavigation/NavItemRenderer.js";
+import { SidebarHeader as a } from "./sideNavigation/SidebarHeader.js";
+import { MobileActionsBar as o } from "./sideNavigation/MobileActionsBar.js";
+import { CollapseToggle as s } from "./sideNavigation/CollapseToggle.js";
+import { useSideNavigationState as c } from "./sideNavigation/useSideNavigationState.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/chrome/SideNavigation.tsx
-function d(e, t, n = !1) {
-	return e ? e === "/" ? t === "/" : n ? t === e : t === e || t.startsWith(`${e}/`) : !1;
-}
-function f(e, t) {
-	return d(e.path, t, e.exact) || d(e.homePath, t, e.exact);
-}
-var p = (e, t) => f(e, t) ? !0 : e.children ? e.children.some((e) => p(e, t)) : !1, m = (e, t, n = []) => {
-	for (let r of e) {
-		if (r.children && r.children.length > 0) {
-			let e = m(r.children, t, [...n, r.id]);
-			if (e.size > 0 || r.children.some((e) => f(e, t))) return e.add(r.id), n.forEach((t) => e.add(t)), e;
-		}
-		if (f(r, t)) return new Set(n);
-	}
-	return /* @__PURE__ */ new Set();
-}, h = ({ item: e, depth: t, maxDepth: n, currentPath: r, expandedItems: i, toggleExpand: a, onItemClick: o, onToggleCollapse: s, collapsed: c }) => {
-	let d = e.children && e.children.length > 0 && t < n, m = i.has(e.id), g = p(e, r), _ = f(e, r), v = t === 0 ? "w-icon-md h-icon-md" : "w-4 h-4";
-	return /* @__PURE__ */ u("li", { children: [/* @__PURE__ */ l("div", {
-		className: "relative",
-		children: /* @__PURE__ */ u("button", {
-			onClick: () => {
-				if (c && t === 0 && d) {
-					o(e.homePath || e.children?.[0]?.path || e.path);
-					return;
-				}
-				d ? a(e.id) : (o(e.path), window.innerWidth < 768 && s && !c && s());
-			},
-			className: `
-            w-full flex items-center gap-icon-gap ${t === 0 ? "py-2" : "py-1.5"} rounded-button
-            transition-colors duration-200 ease-out
-            active:scale-[0.98]
-            ${c && t === 0 ? "md:px-2 md:justify-center" : "px-card-padding"}
-            ${_ && !d ? "bg-action-primary-bg text-action-primary-text shadow-sm" : g && !m ? "bg-action-ghost-bg-hover text-text-primary" : "text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary"}
-          `,
-			"aria-label": e.label,
-			children: [
-				e.icon && /* @__PURE__ */ l("div", {
-					className: `${v} flex-shrink-0 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full [&>svg]:stroke-[1.75]`,
-					children: typeof e.icon == "string" ? /* @__PURE__ */ l("svg", {
-						className: "w-full h-full",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: e.icon
-						})
-					}) : e.icon
-				}),
-				/* @__PURE__ */ l("span", {
-					className: `text-body-sm font-medium flex-1 text-left ${c && t === 0 ? "md:hidden" : ""}`,
-					children: e.label
-				}),
-				e.badge !== void 0 && e.badge > 0 && /* @__PURE__ */ l("span", {
-					className: `text-xs bg-status-error-bg text-status-error-text px-2 py-0.5 rounded-pill ${c && t === 0 ? "md:hidden" : ""}`,
-					children: e.badge
-				}),
-				d && !(c && t === 0) && /* @__PURE__ */ l("svg", {
-					className: `w-4 h-4 transition-transform ${m ? "rotate-90" : ""}`,
-					fill: "none",
-					stroke: "currentColor",
-					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ l("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M9 5l7 7-7 7"
-					})
-				})
-			]
-		})
-	}), d && m && !c && /* @__PURE__ */ l("ul", {
-		className: "mt-1 ml-6 space-y-1 border-l border-border-subtle pl-3 animate-in fade-in-0 slide-in-from-top-2 duration-200",
-		children: e.children.map((e) => /* @__PURE__ */ l(h, {
-			item: e,
-			depth: t + 1,
-			maxDepth: n,
-			currentPath: r,
-			expandedItems: i,
-			toggleExpand: a,
-			onItemClick: o,
-			onToggleCollapse: s,
-			collapsed: c
-		}, e.id))
-	})] });
-}, g = ({ items: d, currentPath: f, collapsed: p = !1, onItemClick: g, onToggleCollapse: _, collapseLabel: v = "Collapse", header: y, footer: b, mobileActions: x, groupOrder: S, groupLabels: C, maxDepth: w = 4 }) => {
-	let [T, E] = s(/* @__PURE__ */ new Set()), D = o(p);
-	a(() => {
-		D.current = p;
-	}, [p]), a(() => {
-		let e = m(d, f);
-		e.size > 0 && E((t) => {
-			let n = new Set(t), r = !1;
-			return e.forEach((e) => {
-				n.has(e) || (n.add(e), r = !0);
-			}), r ? n : t;
-		});
-	}, [f, d]), a(() => {
-		if (typeof window > "u" || !_) return;
-		let e = window.innerWidth < 768, t = () => {
-			let t = window.innerWidth < 768;
-			t && (!e || !D.current) && _(), e = t;
-		};
-		return t(), window.addEventListener("resize", t), () => {
-			window.removeEventListener("resize", t);
-		};
-	}, [_]);
-	let O = d.filter((e) => e.visible !== !1), k = (() => {
-		if (p) return [{
+var f = ({ items: f, currentPath: p, collapsed: m = !1, onItemClick: h, onToggleCollapse: g, collapseLabel: _ = "Collapse", header: v, footer: y, mobileActions: b, groupOrder: x, groupLabels: S, maxDepth: C = 4 }) => {
+	let { expandedItems: w, toggleExpand: T, collapseAll: E } = c({
+		items: f,
+		currentPath: p,
+		collapsed: m,
+		onToggleCollapse: g
+	}), D = f.filter((e) => e.visible !== !1), O = (() => {
+		if (m) return [{
 			id: "__all__",
 			label: null,
-			items: O
+			items: D
 		}];
 		let e = /* @__PURE__ */ new Map();
-		for (let t of O) {
+		for (let t of D) {
 			let n = t.group ?? "__default__", r = e.get(n);
 			r ? r.push(t) : e.set(n, [t]);
 		}
-		return [...S ?? [], ...Array.from(e.keys()).filter((e) => !(S ?? []).includes(e))].filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
+		return [...x ?? [], ...Array.from(e.keys()).filter((e) => !(x ?? []).includes(e))].filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
 			id: t,
-			label: t === "__default__" ? null : C?.[t] ?? t,
+			label: t === "__default__" ? null : S?.[t] ?? t,
 			items: e.get(t) ?? []
 		}));
-	})(), A = i((e) => {
-		E((t) => {
-			let n = new Set(t);
-			return n.has(e) ? n.delete(e) : n.add(e), n;
-		});
-	}, []);
-	return a(() => {
-		if (p) return;
-		let e = (e) => {
-			e.key === "Escape" && _ && _();
-		};
-		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [p, _]), /* @__PURE__ */ u(c, { children: [!p && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+	})();
+	return /* @__PURE__ */ d(l, { children: [!m && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
 		className: "fixed inset-0 bg-bg-overlay z-[109] md:hidden",
 		"aria-hidden": "true"
-	}), /* @__PURE__ */ l("button", {
+	}), /* @__PURE__ */ u("button", {
 		type: "button",
 		className: "fixed inset-y-0 right-0 left-64 z-[112] md:hidden cursor-pointer",
-		onClick: _,
+		onClick: g,
 		"aria-label": "Close sidebar"
-	})] }), /* @__PURE__ */ u("aside", {
+	})] }), /* @__PURE__ */ d("aside", {
 		className: `
           bg-bg-surface border-r border-border-subtle
           transition-all duration-normal
@@ -157,27 +47,28 @@ var p = (e, t) => f(e, t) ? !0 : e.children ? e.children.some((e) => p(e, t)) :
           z-[110] md:z-auto
           md:h-full
           overflow-x-hidden
-          ${p ? "-translate-x-full md:translate-x-0" : "translate-x-0"}
+          ${m ? "-translate-x-full md:translate-x-0" : "translate-x-0"}
           w-64 md:w-auto
-          ${p ? "md:w-16" : "md:w-64"}
+          ${m ? "md:w-16" : "md:w-64"}
         `,
 		style: {
 			paddingTop: "env(safe-area-inset-top)",
 			paddingBottom: "env(safe-area-inset-bottom)"
 		},
 		children: [
-			!p && _ && /* @__PURE__ */ l("div", {
+			!m && g && /* @__PURE__ */ u("div", {
 				className: "md:hidden flex justify-end px-2 pt-2",
-				children: /* @__PURE__ */ l("button", {
-					onClick: _,
+				children: /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: g,
 					className: "p-2 rounded-button hover:bg-action-ghost-bg-hover text-text-secondary hover:text-text-primary transition-colors",
 					"aria-label": "Close sidebar",
-					children: /* @__PURE__ */ l("svg", {
-						className: "w-5 h-5",
+					children: /* @__PURE__ */ u("svg", {
+						className: "size-5",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
+						children: /* @__PURE__ */ u("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -186,77 +77,57 @@ var p = (e, t) => f(e, t) ? !0 : e.children ? e.children.some((e) => p(e, t)) :
 					})
 				})
 			}),
-			y && /* @__PURE__ */ u("div", {
-				className: `py-card-padding border-b border-border-subtle ${p ? "md:px-2" : "px-card-padding"} relative`,
-				children: [/* @__PURE__ */ l("div", {
-					className: T.size > 0 && !p ? "mr-8" : "",
-					children: y
-				}), !p && T.size > 0 && /* @__PURE__ */ l("button", {
-					onClick: () => {
-						E(/* @__PURE__ */ new Set());
-					},
-					className: "absolute top-1/2 -translate-y-1/2 right-3 p-1.5 rounded-button hover:bg-action-ghost-bg-hover text-text-secondary hover:text-text-primary transition-colors",
-					title: "Collapse all",
-					"aria-label": "Collapse all menu items",
-					children: /* @__PURE__ */ l("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M5 15l7-7 7 7"
-						})
-					})
-				})]
+			v && /* @__PURE__ */ u(a, {
+				header: v,
+				collapsed: m,
+				expandedCount: w.size,
+				onCollapseAll: E
 			}),
-			/* @__PURE__ */ l("nav", {
+			/* @__PURE__ */ u("nav", {
 				className: "flex-1 min-h-0 py-card-padding overflow-y-auto overflow-x-hidden",
-				children: /* @__PURE__ */ l(n, {
+				children: /* @__PURE__ */ u(n, {
 					delayDuration: 300,
-					children: /* @__PURE__ */ l("ul", {
+					children: /* @__PURE__ */ u("ul", {
 						className: "space-y-list-gap",
-						children: k.map((n, i) => /* @__PURE__ */ u("li", {
+						children: O.map((n, a) => /* @__PURE__ */ d("li", {
 							className: "list-none",
 							children: [
-								i > 0 && !p && /* @__PURE__ */ l("div", { className: "my-2 border-t border-border-subtle" }),
-								n.label && !p && /* @__PURE__ */ l("p", {
+								a > 0 && !m && /* @__PURE__ */ u("div", { className: "my-2 border-t border-border-subtle" }),
+								n.label && !m && /* @__PURE__ */ u("p", {
 									className: "px-card-padding pb-1 text-xs font-semibold uppercase tracking-wider text-text-tertiary",
 									children: n.label
 								}),
-								/* @__PURE__ */ l("ul", {
+								/* @__PURE__ */ u("ul", {
 									className: "space-y-list-gap",
-									children: n.items.map((n) => p ? /* @__PURE__ */ u(e, { children: [/* @__PURE__ */ l(r, {
+									children: n.items.map((n) => m ? /* @__PURE__ */ d(e, { children: [/* @__PURE__ */ u(r, {
 										asChild: !0,
-										children: /* @__PURE__ */ l(h, {
+										children: /* @__PURE__ */ u(i, {
 											item: n,
 											depth: 0,
-											maxDepth: w,
-											currentPath: f,
-											expandedItems: T,
-											toggleExpand: A,
-											onItemClick: g,
-											onToggleCollapse: _,
-											collapsed: p
+											maxDepth: C,
+											currentPath: p,
+											expandedItems: w,
+											toggleExpand: T,
+											onItemClick: h,
+											onToggleCollapse: g,
+											collapsed: m
 										})
-									}), /* @__PURE__ */ u(t, {
+									}), /* @__PURE__ */ d(t, {
 										side: "right",
-										children: [/* @__PURE__ */ l("p", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ l("span", {
+										children: [/* @__PURE__ */ u("p", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ u("span", {
 											className: "ml-2 text-xs bg-status-error-bg text-status-error-text px-2 py-0.5 rounded-pill",
 											children: n.badge
 										})]
-									})] }, n.id) : /* @__PURE__ */ l(h, {
+									})] }, n.id) : /* @__PURE__ */ u(i, {
 										item: n,
 										depth: 0,
-										maxDepth: w,
-										currentPath: f,
-										expandedItems: T,
-										toggleExpand: A,
-										onItemClick: g,
-										onToggleCollapse: _,
-										collapsed: p
+										maxDepth: C,
+										currentPath: p,
+										expandedItems: w,
+										toggleExpand: T,
+										onItemClick: h,
+										onToggleCollapse: g,
+										collapsed: m
 									}, n.id))
 								})
 							]
@@ -264,57 +135,22 @@ var p = (e, t) => f(e, t) ? !0 : e.children ? e.children.some((e) => p(e, t)) :
 					})
 				})
 			}),
-			b && /* @__PURE__ */ l("div", {
-				className: `py-card-padding border-t border-border-subtle ${p ? "md:px-2" : "px-card-padding"}`,
-				children: b
+			y && /* @__PURE__ */ u("div", {
+				className: `py-card-padding border-t border-border-subtle ${m ? "md:px-2" : "px-card-padding"}`,
+				children: y
 			}),
-			x && x.length > 0 && /* @__PURE__ */ u("div", {
-				className: "md:hidden py-4 px-4 border-t border-border-subtle bg-bg-canvas/50",
-				children: [/* @__PURE__ */ l("p", {
-					className: "text-caption text-text-tertiary mb-3 font-medium uppercase tracking-wider",
-					children: "Quick Actions"
-				}), /* @__PURE__ */ l("div", {
-					className: "flex items-center justify-center gap-3",
-					children: x.map((e) => /* @__PURE__ */ l("button", {
-						onClick: () => {
-							e.onClick(), e.closeSidebar !== !1 && _ && !p && _();
-						},
-						className: `flex items-center justify-center w-12 h-12 rounded-xl text-body-sm font-medium transition-all ${e.isToggle && e.isActive ? "bg-action-primary-bg text-action-primary-text shadow-sm" : "bg-bg-surface text-text-primary hover:bg-action-ghost-bg-hover border border-border-subtle hover:border-border-default active:scale-95"}`,
-						"aria-label": e.label,
-						title: e.label,
-						children: /* @__PURE__ */ l("span", {
-							className: "w-5 h-5",
-							children: e.icon
-						})
-					}, e.id))
-				})]
+			b && b.length > 0 && /* @__PURE__ */ u(o, {
+				actions: b,
+				collapsed: m,
+				onToggleCollapse: g
 			}),
-			_ && /* @__PURE__ */ l("div", {
-				className: `hidden md:block py-4 border-t border-border-subtle ${p ? "px-2" : "px-card-padding"}`,
-				children: /* @__PURE__ */ u("button", {
-					onClick: _,
-					className: `w-full flex items-center gap-icon-gap py-2 rounded-button text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary transition-colors ${p ? "justify-center px-2" : "px-card-padding"}`,
-					"aria-label": p ? "Expand sidebar" : "Collapse sidebar",
-					title: p ? "Expand sidebar" : "Collapse sidebar",
-					children: [/* @__PURE__ */ l("svg", {
-						className: `w-icon-md h-icon-md transition-transform ${p ? "rotate-180" : ""}`,
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M15 19l-7-7 7-7"
-						})
-					}), !p && /* @__PURE__ */ l("span", {
-						className: "text-body-sm font-medium",
-						children: v
-					})]
-				})
+			g && /* @__PURE__ */ u(s, {
+				collapsed: m,
+				collapseLabel: _,
+				onToggleCollapse: g
 			})
 		]
 	})] });
 };
 //#endregion
-export { g as SideNavigation };
+export { f as SideNavigation };

package/dist/chrome/Sidebar.js

@@ -26,6 +26,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 						children: [!o && /* @__PURE__ */ r("div", {
 							className: "px-card-padding mb-2",
 							children: t.collapsible ? /* @__PURE__ */ i("button", {
+								type: "button",
 								onClick: () => h(t.title),
 								className: "flex items-center justify-between w-full text-text-tertiary text-xs font-semibold uppercase tracking-wider hover:text-text-secondary transition-colors",
 								"aria-expanded": !a,