@burdenoff/fe-libs 2026.510.126

package/dist/chrome/SideNavigation.d.ts

@@ -0,0 +1,85 @@
+import { FC, ReactNode } from 'react';
+import { MobileActionItem } from './HeaderBar';
+/**
+ * Navigation Item Interface
+ */
+export interface NavItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Navigation path */
+    path: string;
+    /** Icon (ReactNode or SVG path) */
+    icon?: ReactNode;
+    /** Badge count */
+    badge?: number;
+    /** Item order */
+    order?: number;
+    /** Group identifier */
+    group?: string;
+    /** Visibility flag */
+    visible?: boolean;
+    /** Nested children items */
+    children?: NavItem[];
+    /** Match only this exact path instead of nested descendants. */
+    exact?: boolean;
+    /**
+     * When sidebar is collapsed and this parent item is clicked,
+     * navigate to this path instead of the parent's path.
+     * If not specified, defaults to the first child's path (if children exist).
+     */
+    homePath?: string;
+}
+/**
+ * SideNavigation Props Interface
+ */
+export interface SideNavigationProps {
+    /** Navigation items to display */
+    items: NavItem[];
+    /** Current active path */
+    currentPath: string;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+    /** Item click handler */
+    onItemClick: (path: string) => void;
+    /** Toggle collapse handler */
+    onToggleCollapse?: () => void;
+    /** Collapse button label */
+    collapseLabel?: string;
+    /** Additional content to render at top */
+    header?: ReactNode;
+    /** Additional content to render at bottom */
+    footer?: ReactNode;
+    /** Mobile-only action items (shown at bottom of sidenav on mobile) */
+    mobileActions?: MobileActionItem[];
+    /** Preferred section ordering when expanded */
+    groupOrder?: string[];
+    /** Section labels by group key when expanded */
+    groupLabels?: Record<string, string>;
+    /** Maximum visual depth for nested items (default: 4) */
+    maxDepth?: number;
+}
+/**
+ * SideNavigation Component
+ *
+ * Generic sidebar navigation for app shells. Pure presentation component
+ * that accepts all data via props.
+ *
+ * Features:
+ * - Dynamic navigation items with **recursive nesting** (arbitrary depth)
+ * - Collapse/expand state with responsive behavior
+ * - Active item highlighting (recursive ancestor detection)
+ * - Badge support
+ * - Grouped items
+ * - Custom header/footer
+ * - Auto-expand ancestors of the active item
+ *
+ * Responsive Behavior:
+ * - Mobile (< md): Overlay drawer - completely hidden when collapsed, full-width overlay when open
+ * - Desktop (≥ md): Push sidebar - icon-only when collapsed (w-16), full-width when expanded (w-64)
+ *
+ * Uses semantic tokens for styling, which must be provided by the shell.
+ */
+export declare const SideNavigation: FC<SideNavigationProps>;
+//# sourceMappingURL=SideNavigation.d.ts.map

package/dist/chrome/SideNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../src/chrome/SideNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQpD;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAErB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,KAAK,EAAE,OAAO,EAAE,CAAC;IAEjB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqOD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA0XlD,CAAC"}

package/dist/chrome/SideNavigation.js

@@ -0,0 +1,320 @@
+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";
+//#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 [{
+			id: "__all__",
+			label: null,
+			items: O
+		}];
+		let e = /* @__PURE__ */ new Map();
+		for (let t of O) {
+			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) => ({
+			id: t,
+			label: t === "__default__" ? null : C?.[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", {
+		className: "fixed inset-0 bg-bg-overlay z-[109] md:hidden",
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ l("button", {
+		type: "button",
+		className: "fixed inset-y-0 right-0 left-64 z-[112] md:hidden cursor-pointer",
+		onClick: _,
+		"aria-label": "Close sidebar"
+	})] }), /* @__PURE__ */ u("aside", {
+		className: `
+          bg-bg-surface border-r border-border-subtle
+          transition-all duration-normal
+          flex flex-col min-h-0
+          fixed md:relative
+          inset-y-0 left-0
+          z-[110] md:z-auto
+          md:h-full
+          overflow-x-hidden
+          ${p ? "-translate-x-full md:translate-x-0" : "translate-x-0"}
+          w-64 md:w-auto
+          ${p ? "md:w-16" : "md:w-64"}
+        `,
+		style: {
+			paddingTop: "env(safe-area-inset-top)",
+			paddingBottom: "env(safe-area-inset-bottom)"
+		},
+		children: [
+			!p && _ && /* @__PURE__ */ l("div", {
+				className: "md:hidden flex justify-end px-2 pt-2",
+				children: /* @__PURE__ */ l("button", {
+					onClick: _,
+					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",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ l("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M6 18L18 6M6 6l12 12"
+						})
+					})
+				})
+			}),
+			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"
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ l("nav", {
+				className: "flex-1 min-h-0 py-card-padding overflow-y-auto overflow-x-hidden",
+				children: /* @__PURE__ */ l(n, {
+					delayDuration: 300,
+					children: /* @__PURE__ */ l("ul", {
+						className: "space-y-list-gap",
+						children: k.map((n, i) => /* @__PURE__ */ u("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", {
+									className: "px-card-padding pb-1 text-xs font-semibold uppercase tracking-wider text-text-tertiary",
+									children: n.label
+								}),
+								/* @__PURE__ */ l("ul", {
+									className: "space-y-list-gap",
+									children: n.items.map((n) => p ? /* @__PURE__ */ u(e, { children: [/* @__PURE__ */ l(r, {
+										asChild: !0,
+										children: /* @__PURE__ */ l(h, {
+											item: n,
+											depth: 0,
+											maxDepth: w,
+											currentPath: f,
+											expandedItems: T,
+											toggleExpand: A,
+											onItemClick: g,
+											onToggleCollapse: _,
+											collapsed: p
+										})
+									}), /* @__PURE__ */ u(t, {
+										side: "right",
+										children: [/* @__PURE__ */ l("p", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ l("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, {
+										item: n,
+										depth: 0,
+										maxDepth: w,
+										currentPath: f,
+										expandedItems: T,
+										toggleExpand: A,
+										onItemClick: g,
+										onToggleCollapse: _,
+										collapsed: p
+									}, n.id))
+								})
+							]
+						}, n.id))
+					})
+				})
+			}),
+			b && /* @__PURE__ */ l("div", {
+				className: `py-card-padding border-t border-border-subtle ${p ? "md:px-2" : "px-card-padding"}`,
+				children: b
+			}),
+			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))
+				})]
+			}),
+			_ && /* @__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
+					})]
+				})
+			})
+		]
+	})] });
+};
+//#endregion
+export { g as SideNavigation };

package/dist/chrome/Sidebar.d.ts

@@ -0,0 +1,108 @@
+import { FC, ReactNode } from 'react';
+/**
+ * Sidebar Item Interface
+ *
+ * Represents a single item in the sidebar navigation.
+ */
+export interface SidebarItem {
+    /** Unique identifier */
+    id: string;
+    /** Item label */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Optional badge */
+    badge?: string | number;
+    /** Whether item is active */
+    isActive?: boolean;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Optional href for native links */
+    href?: string;
+}
+/**
+ * Sidebar Section Interface
+ *
+ * Represents a collapsible section in the sidebar.
+ */
+export interface SidebarSection {
+    /** Section title */
+    title: string;
+    /** Section items */
+    items: SidebarItem[];
+    /** Whether section is initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Whether section can be collapsed */
+    collapsible?: boolean;
+}
+/**
+ * Sidebar Props Interface
+ *
+ * Generic sidebar navigation component that accepts all data via props.
+ * No dependencies on routing libraries - pure presentation component.
+ */
+export interface SidebarProps {
+    /** Sidebar sections */
+    sections: SidebarSection[];
+    /** Whether sidebar is collapsed (icon-only mode) */
+    isCollapsed?: boolean;
+    /** Collapse toggle handler */
+    onToggleCollapse?: () => void;
+    /** Header content (logo, branding) */
+    header?: ReactNode;
+    /** Footer content (user menu, settings) */
+    footer?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Width when expanded */
+    width?: string;
+    /** Width when collapsed */
+    collapsedWidth?: string;
+}
+/**
+ * Sidebar Component
+ *
+ * Generic sidebar navigation for app shells. Pure presentation component
+ * that accepts all data via props.
+ *
+ * Features:
+ * - Collapsible sections
+ * - Collapsed/expanded states (icon-only mode)
+ * - Active state indication
+ * - Icon and badge support
+ * - Header and footer slots
+ * - Smooth transitions
+ * - Accessible navigation
+ *
+ * Uses semantic tokens for styling, which must be provided by the shell.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   sections={[
+ *     {
+ *       title: 'Main',
+ *       items: [
+ *         { id: 'dashboard', label: 'Dashboard', icon: <HomeIcon />, isActive: true },
+ *         { id: 'projects', label: 'Projects', icon: <FolderIcon />, badge: 5 }
+ *       ]
+ *     },
+ *     {
+ *       title: 'Settings',
+ *       collapsible: true,
+ *       items: [
+ *         { id: 'preferences', label: 'Preferences', icon: <SettingsIcon /> }
+ *       ]
+ *     }
+ *   ]}
+ *   isCollapsed={isSidebarCollapsed}
+ *   onToggleCollapse={toggleSidebar}
+ *   header={<Logo />}
+ *   footer={<UserMenu />}
+ * />
+ * ```
+ */
+export declare const Sidebar: FC<SidebarProps>;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/chrome/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/chrome/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAE3B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAsMpC,CAAC"}

package/dist/chrome/Sidebar.js

@@ -0,0 +1,104 @@
+import { cn as e } from "../shared-utils.js";
+import { useState as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/chrome/Sidebar.tsx
+var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, footer: l, className: u, width: d = "280px", collapsedWidth: f = "64px" }) => {
+	let [p, m] = t(new Set(a.filter((e) => e.defaultCollapsed).map((e) => e.title))), h = (e) => {
+		m((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	};
+	return /* @__PURE__ */ i("aside", {
+		className: e("flex flex-col bg-bg-elevated border-r border-border-subtle transition-all duration-300", u),
+		style: { width: o ? f : d },
+		children: [
+			c && /* @__PURE__ */ r("div", {
+				className: e("flex items-center border-b border-border-subtle", o ? "justify-center p-4" : "px-card-padding py-4"),
+				children: c
+			}),
+			/* @__PURE__ */ r("nav", {
+				className: "flex-1 overflow-y-auto py-section-gap",
+				children: a.map((t) => {
+					let a = p.has(t.title);
+					return /* @__PURE__ */ i("div", {
+						className: "mb-section-gap",
+						children: [!o && /* @__PURE__ */ r("div", {
+							className: "px-card-padding mb-2",
+							children: t.collapsible ? /* @__PURE__ */ i("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,
+								children: [/* @__PURE__ */ r("span", { children: t.title }), /* @__PURE__ */ r("svg", {
+									className: e("w-4 h-4 transition-transform", a && "rotate-180"),
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ r("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M19 9l-7 7-7-7"
+									})
+								})]
+							}) : /* @__PURE__ */ r("div", {
+								className: "text-text-tertiary text-xs font-semibold uppercase tracking-wider",
+								children: t.title
+							})
+						}), (!t.collapsible || !a) && /* @__PURE__ */ r("ul", {
+							className: "space-y-1 px-2",
+							children: t.items.map((t) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i("button", {
+								onClick: t.onClick,
+								disabled: t.disabled,
+								className: e("w-full flex items-center gap-icon-gap rounded-button transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o ? "justify-center p-3" : "px-3 py-2", {
+									"bg-action-primary-bg text-action-primary-text font-medium": t.isActive && !t.disabled,
+									"text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover": !t.isActive && !t.disabled,
+									"text-text-disabled cursor-not-allowed opacity-50": t.disabled
+								}),
+								"aria-label": o ? t.label : void 0,
+								"aria-current": t.isActive ? "page" : void 0,
+								title: o ? t.label : void 0,
+								type: "button",
+								children: [t.icon && /* @__PURE__ */ r("span", {
+									className: "flex items-center flex-shrink-0",
+									children: t.icon
+								}), !o && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+									className: "flex-1 text-left truncate",
+									children: t.label
+								}), t.badge !== void 0 && /* @__PURE__ */ r("span", {
+									className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium", t.isActive ? "bg-action-primary-text text-action-primary-bg" : "bg-status-info-bg text-status-info-text"),
+									children: typeof t.badge == "number" && t.badge > 99 ? "99+" : t.badge
+								})] })]
+							}) }, t.id))
+						})]
+					}, t.title);
+				})
+			}),
+			l && /* @__PURE__ */ r("div", {
+				className: e("border-t border-border-subtle", o ? "flex justify-center p-4" : "px-card-padding py-4"),
+				children: l
+			}),
+			s && /* @__PURE__ */ r("button", {
+				onClick: s,
+				className: e("border-t border-border-subtle p-4 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o && "flex justify-center"),
+				"aria-label": o ? "Expand sidebar" : "Collapse sidebar",
+				title: o ? "Expand sidebar" : "Collapse sidebar",
+				type: "button",
+				children: /* @__PURE__ */ r("svg", {
+					className: e("w-5 h-5 transition-transform", o && "rotate-180"),
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ r("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { a as Sidebar };

package/dist/chrome/StatusBar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const StatusBar: FC;
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/chrome/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../src/chrome/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGzC,eAAO,MAAM,SAAS,EAAE,EAmFvB,CAAC"}