@postxl/ui-components 1.5.1 → 1.5.2

package/dist/index.d.ts

@@ -898,6 +898,8 @@ declare module '@tanstack/react-table' {
     rowHeight?: RowHeightValue;
     onRowHeightChange?: (value: RowHeightValue) => void;
     onRowSelect?: (rowIndex: number, checked: boolean, shiftKey: boolean) => void;
+    /** Optional className applied to each cell in a row. Can be a function receiving row data. */
+    rowClassName?: string | ((row: Row<TData>) => string | undefined);
     /** Index of the row to highlight (e.g., for keyField-based URL routing) */
     highlightedRowIndex?: number;
     /** Called when a row is clicked. Receives the row index */
@@ -955,6 +957,8 @@ type UseDataGridProps<TData> = {
    * The highlighted row gets a subtle background color.
    */
   highlightedRowIndex?: number;
+  /** Optional className applied to each row. Can be a static string or a function receiving the TanStack Row object. */
+  rowClassName?: string | ((row: Row<TData>) => string | undefined);
   rowHeight?: RowHeightValue;
   overscan?: number;
   autoFocus?: boolean | Partial<CellPosition>;
@@ -1000,6 +1004,7 @@ declare function useDataGrid<TData>({
   onCellFocus: onCellFocusProp,
   onRowClick: onRowClickProp,
   highlightedRowIndex,
+  rowClassName,
   rowHeight: rowHeightProp,
   overscan,
   initialState,
@@ -2518,12 +2523,18 @@ declare function SidebarProvider({
 //#endregion
 //#region src/sidebar/sidebar-tab-context-provider.d.ts
 type SidebarSide = 'left' | 'right';
+type SidebarTabBadge = {
+  label: string;
+  variant?: VariantProps<typeof badgeVariants>['variant'];
+  className?: string;
+};
 type SidebarTabDefinition = {
   id: string;
   icon: LucideIcon;
   label: string;
   render: () => React$11.ReactNode;
   order?: number;
+  badge?: SidebarTabBadge;
 };
 type SidebarTabsState = {
   tabs: Partial<Record<SidebarSide, SidebarTabDefinition[]>>;
@@ -2552,7 +2563,8 @@ declare function SidebarTab({
   icon,
   label,
   render,
-  order
+  order,
+  badge
 }: {
   side: SidebarSide;
 } & SidebarTabDefinition): null;
@@ -2883,6 +2895,7 @@ type TreeNode = {
   name: string;
   type: 'node' | 'group';
   children?: TreeNode[];
+  className?: string;
   icon?: React$2.ReactNode;
   trailing?: React$2.ReactNode;
 };
@@ -2930,5 +2943,5 @@ declare const TreeView: React$2.ForwardRefExoticComponent<Callbacks & {
 } & React$2.RefAttributes<HTMLDivElement>>;
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselProps, Cell, CellHierarchyOption, CellPosition, CellRange, CellSelectOption, CellSelectOptionsMap, CellSelectOptionsUnion, CellVariantProps, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ColumnMenuRendererFunction, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandInputProps, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCallbacks, CommentCreate, CommentGroup, CommentItem, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuState, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DataGridViewMenuProps, DateCell, DatePickerDemo, DeferredInput, DeferredInputProps, DeferredNumberInput, DeferredNumberInputProps, DeferredTextarea, DeferredTextareaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, ExternalToast, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttCellProps, GanttTimeline, GanttTimerangePicker, GanttTimerangePickerProps, HeaderComponents, HierarchyCell, HierarchyItem, HierarchyItemProps, HoverCard, HoverCardContent, HoverCardTrigger, ISODateRange, InfoCard, InfoCardVariant, Input, InputProps, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationDirection, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberFormatConfig, NumberFormatter, NumberInput, NumberInputProps, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, RowHeightValue, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SavedView, ScrollArea, ScrollBar, SearchState, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectionState, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarContextProps, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSide, SidebarTab, SidebarTabDefinition, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerFilterOption, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperProps, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeNode, TreeView, TreeViewProps, UpdateCell, UseDataGridProps, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselProps, Cell, CellHierarchyOption, CellPosition, CellRange, CellSelectOption, CellSelectOptionsMap, CellSelectOptionsUnion, CellVariantProps, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ColumnMenuRendererFunction, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandInputProps, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCallbacks, CommentCreate, CommentGroup, CommentItem, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuState, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DataGridViewMenuProps, DateCell, DatePickerDemo, DeferredInput, DeferredInputProps, DeferredNumberInput, DeferredNumberInputProps, DeferredTextarea, DeferredTextareaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, ExternalToast, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttCellProps, GanttTimeline, GanttTimerangePicker, GanttTimerangePickerProps, HeaderComponents, HierarchyCell, HierarchyItem, HierarchyItemProps, HoverCard, HoverCardContent, HoverCardTrigger, ISODateRange, InfoCard, InfoCardVariant, Input, InputProps, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationDirection, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberFormatConfig, NumberFormatter, NumberInput, NumberInputProps, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, RowHeightValue, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SavedView, ScrollArea, ScrollBar, SearchState, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectionState, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarContextProps, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSide, SidebarTab, SidebarTabBadge, SidebarTabDefinition, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerFilterOption, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperProps, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeNode, TreeView, TreeViewProps, UpdateCell, UseDataGridProps, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -2488,6 +2488,12 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
+	const rowClassNameMeta = meta?.rowClassName;
+	const rowCellClassName = React$44.useMemo(() => {
+		if (!rowClassNameMeta) return void 0;
+		if (typeof rowClassNameMeta === "function") return rowClassNameMeta(cell.row);
+		return rowClassNameMeta;
+	}, [rowClassNameMeta, cell.row]);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
 	const onClick = React$44.useCallback((event) => {
@@ -2588,7 +2594,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 			"text-left": align === "left",
 			"text-right": align === "right",
 			"text-center": align === "center"
-		}, {
+		}, rowCellClassName, colCellClassName, {
 			"ring-1 ring-foreground ring-inset dark:ring-secondary-foreground": isFocused,
 			"bg-yellow-100 dark:bg-yellow-900/30": isSearchMatch && !isActiveSearchMatch,
 			"bg-orange-200 dark:bg-orange-900/50": isActiveSearchMatch,
@@ -2599,7 +2605,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 			"**:data-[slot=grid-cell-content]:line-clamp-3": !isEditing && rowHeight === "tall",
 			"**:data-[slot=grid-cell-content]:line-clamp-4": !isEditing && rowHeight === "extra-tall",
 			"relative overflow-visible": !!overlayContent
-		}, colCellClassName, className),
+		}, className),
 		onClick,
 		onContextMenu,
 		onDoubleClick,
@@ -6285,7 +6291,7 @@ function useStore$1(store, selector) {
 	const getSnapshot = React$22.useCallback(() => selector(store.getState()), [store, selector]);
 	return React$22.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
-function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
+function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowClassName, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
 	const dataGridRef = React$22.useRef(null);
 	const tableRef = React$22.useRef(null);
 	const rowVirtualizerRef = React$22.useRef(null);
@@ -6421,7 +6427,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	}, [initialState, persistedState]);
 	const getNavigableColumnIds = React$22.useCallback(() => {
 		const t = tableRef.current;
-		if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
+		if (t) return [
+			...t.getLeftVisibleLeafColumns(),
+			...t.getCenterVisibleLeafColumns(),
+			...t.getRightVisibleLeafColumns()
+		].map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 		return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 	}, [columnIds]);
 	const onDataUpdate = React$22.useCallback((updates) => {
@@ -7300,6 +7310,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowHeight,
 			isScrolling,
 			highlightedRowIndex,
+			rowClassName,
 			columnDefsVersion,
 			onRowClick: onRowClickProp,
 			getIsCellSelected,
@@ -7338,6 +7349,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		searchOpen,
 		isScrolling,
 		highlightedRowIndex,
+		rowClassName,
 		columnDefsVersion,
 		onRowClickProp,
 		getIsCellSelected,
@@ -9821,7 +9833,7 @@ function useSidebarTabs(side) {
 
 //#endregion
 //#region src/sidebar/sidebar-tab.tsx
-function SidebarTab({ side, id, icon, label, render, order }) {
+function SidebarTab({ side, id, icon, label, render, order, badge }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
 	const { register, unregister } = ctx;
@@ -9836,7 +9848,8 @@ function SidebarTab({ side, id, icon, label, render, order }) {
 			icon: iconRef.current,
 			label,
 			render: stableRender,
-			order
+			order,
+			badge
 		});
 		return () => unregister(side, id);
 	}, [
@@ -9844,6 +9857,7 @@ function SidebarTab({ side, id, icon, label, render, order }) {
 		id,
 		label,
 		order,
+		badge,
 		register,
 		unregister,
 		stableRender
@@ -9939,14 +9953,20 @@ function HorizontalTabBar({ side, tabs, activeTabId }) {
 		children: tabs.map((tab) => {
 			const Icon = tab.icon;
 			const isActive = tab.id === activeTabId;
+			const badge = tab.badge;
 			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
+				children: /* @__PURE__ */ jsxs("button", {
 					role: "tab",
 					"aria-selected": isActive,
-					className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+					className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors cursor-pointer group/button", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground", badge && "pt-1"),
 					onClick: () => handleTabClick(tab.id),
-					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+					children: [/* @__PURE__ */ jsx(Icon, { className: "size-4" }), badge && /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: badge.variant,
+						className: cn("ml-0.5 h-3.25 mb-1.25 px-1.5 group-hover/button:opacity-100 opacity-70 transition-opacity", isActive && "opacity-100", badge.className),
+						children: badge.label
+					})]
 				})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: "bottom",
@@ -9973,14 +9993,20 @@ function VerticalTabBar({ side, tabs, activeTabId }) {
 		children: tabs.map((tab) => {
 			const Icon = tab.icon;
 			const isActive = tab.id === activeTabId;
+			const badge = tab.badge;
 			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
+				children: /* @__PURE__ */ jsxs("button", {
 					role: "tab",
 					"aria-selected": isActive,
-					className: cn("size-9 flex items-center justify-center rounded-md transition-colors", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
+					className: cn("size-9 flex items-center justify-center rounded-md transition-colors cursor-pointer group/button", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
 					onClick: () => handleTabClick(tab.id),
-					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+					children: [/* @__PURE__ */ jsx(Icon, { className: "size-4" }), badge && /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: badge.variant,
+						className: cn("ml-0.5 h-3.25 mb-1.25 px-1.5 group-hover/button:opacity-100 opacity-70 transition-opacity", isActive && "opacity-100", badge.className),
+						children: badge.label
+					})]
 				})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: side === "left" ? "right" : "left",
@@ -11265,7 +11291,7 @@ const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, i
 	const hasChildren = node.children && node.children.length > 0;
 	if (!isGroup) return /* @__PURE__ */ jsxs("div", {
 		"data-test-id": `tree-node-${node.id}`,
-		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
+		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
 		style: { marginLeft: `${level * 24}px` },
 		onClick: () => onNodeSelect?.(node),
 		children: [
@@ -11283,7 +11309,7 @@ const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, i
 		"data-test-id": `tree-group-${node.id}`,
 		children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
 			style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
-			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", { "bg-primary text-primary-foreground": selectedId === node.id }),
+			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }),
 			children: [
 				/* @__PURE__ */ jsx(PlusIcon, {
 					"data-test-id": `tree-expand-${node.id}`,