@scripso-homepad/ui 0.4.15 → 0.4.17

package/dist/web/index.d.cts

@@ -91,11 +91,20 @@ type SidebarProps = {
     branding: AdminSidebarBranding;
     labels: AdminSidebarLabels;
     sidebarStorageKey: string;
+    /**
+     * Current location pathname from the host app router.
+     * Pass `useLocation().pathname` from the app that owns `BrowserRouter`.
+     */
+    pathname: string;
     user?: AdminSidebarUser;
     onLogout?: () => void;
     className?: string;
     mobileOpen: boolean;
     onMobileClose?: () => void;
+    /**
+     * Host-owned navigation. Call `navigate(item.to)` from the app router here.
+     * The sidebar never imports react-router, so this must perform the route change.
+     */
     onNavItemClick?: (item: AdminNavItem) => void;
     collapseIcon?: ReactNode;
     expandIcon?: ReactNode;
@@ -104,7 +113,7 @@ type SidebarProps = {
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
 
 type SidebarMobileHeaderProps = {
     branding: Pick<AdminSidebarBranding, 'logoIconSrc' | 'logoTitle' | 'logoTagline'>;
@@ -128,9 +137,16 @@ declare function DashboardLayout({ sidebar, header, mobileHeader, children, clas
 type SidebarNavItemProps = {
     item: AdminNavItem;
     isOpen: boolean;
+    isActive: boolean;
     onNavigate?: (item: AdminNavItem) => void;
 };
-declare function SidebarNavItem({ item, isOpen, onNavigate }: SidebarNavItemProps): react.JSX.Element | null;
+declare function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNavItemProps): react.JSX.Element | null;
+
+/**
+ * Matches React Router `<NavLink end>` semantics using a host-provided pathname.
+ * Keeps `@scripso-homepad/ui` free of react-router so apps never get duplicate contexts.
+ */
+declare function isNavItemActive(pathname: string, item: Pick<AdminNavItem, 'to' | 'end'>): boolean;
 
 type SidebarUserCardProps = {
     user: AdminSidebarUser;
@@ -254,7 +270,7 @@ type TableActionsMenuProps = {
     menuClassName?: string;
     /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
     menuWidth?: number;
-    /** Size the menu to its content width instead of a fixed pixel width. */
+    /** Size the menu to its content width instead of a fixed pixel width. Defaults to true so labels stay on one line. */
     menuFitContent?: boolean;
 };
 declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, menuWidth, menuFitContent, }: TableActionsMenuProps): react.JSX.Element | null;
@@ -494,13 +510,15 @@ type ConfirmModalProps = {
     confirmText: string;
     onCancel: () => void;
     onConfirm: () => void;
+    /** Optional centered icon above the title (e.g. trash for delete confirmations). */
+    icon?: ReactNode;
     cancelDisabled?: boolean;
     confirmDisabled?: boolean;
     closeOnBackdrop?: boolean;
     containerClassName?: string;
     buttonClassName?: string;
 };
-declare function ConfirmModal({ open, title, description, cancelText, confirmText, onCancel, onConfirm, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, buttonClassName, }: ConfirmModalProps): react.JSX.Element | null;
+declare function ConfirmModal({ open, title, description, cancelText, confirmText, onCancel, onConfirm, icon, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, buttonClassName, }: ConfirmModalProps): react.JSX.Element | null;
 
 declare function useMediaQuery(query: string): boolean;
 
@@ -509,4 +527,4 @@ declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };

package/dist/web/index.d.ts

@@ -91,11 +91,20 @@ type SidebarProps = {
     branding: AdminSidebarBranding;
     labels: AdminSidebarLabels;
     sidebarStorageKey: string;
+    /**
+     * Current location pathname from the host app router.
+     * Pass `useLocation().pathname` from the app that owns `BrowserRouter`.
+     */
+    pathname: string;
     user?: AdminSidebarUser;
     onLogout?: () => void;
     className?: string;
     mobileOpen: boolean;
     onMobileClose?: () => void;
+    /**
+     * Host-owned navigation. Call `navigate(item.to)` from the app router here.
+     * The sidebar never imports react-router, so this must perform the route change.
+     */
     onNavItemClick?: (item: AdminNavItem) => void;
     collapseIcon?: ReactNode;
     expandIcon?: ReactNode;
@@ -104,7 +113,7 @@ type SidebarProps = {
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
 
 type SidebarMobileHeaderProps = {
     branding: Pick<AdminSidebarBranding, 'logoIconSrc' | 'logoTitle' | 'logoTagline'>;
@@ -128,9 +137,16 @@ declare function DashboardLayout({ sidebar, header, mobileHeader, children, clas
 type SidebarNavItemProps = {
     item: AdminNavItem;
     isOpen: boolean;
+    isActive: boolean;
     onNavigate?: (item: AdminNavItem) => void;
 };
-declare function SidebarNavItem({ item, isOpen, onNavigate }: SidebarNavItemProps): react.JSX.Element | null;
+declare function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNavItemProps): react.JSX.Element | null;
+
+/**
+ * Matches React Router `<NavLink end>` semantics using a host-provided pathname.
+ * Keeps `@scripso-homepad/ui` free of react-router so apps never get duplicate contexts.
+ */
+declare function isNavItemActive(pathname: string, item: Pick<AdminNavItem, 'to' | 'end'>): boolean;
 
 type SidebarUserCardProps = {
     user: AdminSidebarUser;
@@ -254,7 +270,7 @@ type TableActionsMenuProps = {
     menuClassName?: string;
     /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
     menuWidth?: number;
-    /** Size the menu to its content width instead of a fixed pixel width. */
+    /** Size the menu to its content width instead of a fixed pixel width. Defaults to true so labels stay on one line. */
     menuFitContent?: boolean;
 };
 declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, menuWidth, menuFitContent, }: TableActionsMenuProps): react.JSX.Element | null;
@@ -494,13 +510,15 @@ type ConfirmModalProps = {
     confirmText: string;
     onCancel: () => void;
     onConfirm: () => void;
+    /** Optional centered icon above the title (e.g. trash for delete confirmations). */
+    icon?: ReactNode;
     cancelDisabled?: boolean;
     confirmDisabled?: boolean;
     closeOnBackdrop?: boolean;
     containerClassName?: string;
     buttonClassName?: string;
 };
-declare function ConfirmModal({ open, title, description, cancelText, confirmText, onCancel, onConfirm, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, buttonClassName, }: ConfirmModalProps): react.JSX.Element | null;
+declare function ConfirmModal({ open, title, description, cancelText, confirmText, onCancel, onConfirm, icon, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, buttonClassName, }: ConfirmModalProps): react.JSX.Element | null;
 
 declare function useMediaQuery(query: string): boolean;
 
@@ -509,4 +527,4 @@ declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };

package/dist/web/index.js

@@ -1,10 +1,9 @@
-import { __commonJS, __require, __toESM, Input, Button } from '../chunk-3G3ZKFHX.js';
+import { __commonJS, __require, __toESM, Input, Button } from '../chunk-U7OSCJKA.js';
 import { ChevronsUpDown, Search, LogOut, PanelLeftClose, PanelLeftOpen, X, Menu, ChevronLeft, ChevronRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useRef, useEffect, useState, useId, useCallback, useMemo, useContext, useLayoutEffect } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
 import { Toaster as Toaster$1, toast } from 'sonner';
 export { toast } from 'sonner';
 import 'sonner/dist/styles.css';
@@ -7371,7 +7370,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment5 = 7;
+        var Fragment4 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8526,7 +8525,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment5:
+            case Fragment4:
               return "Fragment";
             case HostComponent:
               return type;
@@ -16951,7 +16950,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment5) {
+            if (current2 === null || current2.tag !== Fragment4) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17354,7 +17353,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment5) {
+                  if (child.tag === Fragment4) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22828,7 +22827,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment5:
+            case Fragment4:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23100,7 +23099,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment5:
+            case Fragment4:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27352,7 +27351,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment5, elements, key, mode);
+          var fiber = createFiber(Fragment4, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -28875,29 +28874,42 @@ function useMediaQuery(query) {
   }, [query]);
   return matches;
 }
-function SidebarNavItem({ item, isOpen, onNavigate }) {
+
+// src/web/layout/nav-active.ts
+function isNavItemActive(pathname, item) {
+  if (item.end) {
+    return pathname === item.to;
+  }
+  return pathname === item.to || pathname.startsWith(`${item.to}/`);
+}
+function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
   if (item.hidden) {
     return null;
   }
-  const handleClick = () => {
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (item.disabled) {
+      return;
+    }
     item.onClick?.();
     onNavigate?.(item);
   };
-  return /* @__PURE__ */ jsx(
-    NavLink,
+  return /* @__PURE__ */ jsxs(
+    "button",
     {
-      to: item.to,
-      end: item.end,
+      type: "button",
       onClick: handleClick,
+      "aria-current": isActive ? "page" : void 0,
       "aria-disabled": item.disabled,
+      disabled: item.disabled,
       tabIndex: item.disabled ? -1 : void 0,
-      className: ({ isActive }) => cn(
+      className: cn(
         "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
         isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
         item.disabled && "pointer-events-none opacity-50",
         isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
       ),
-      children: ({ isActive }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: [
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -28919,7 +28931,7 @@ function SidebarNavItem({ item, isOpen, onNavigate }) {
             children: item.label
           }
         )
-      ] })
+      ]
     }
   );
 }
@@ -28994,6 +29006,7 @@ function Sidebar({
   branding,
   labels,
   sidebarStorageKey,
+  pathname,
   user,
   onLogout,
   className,
@@ -29007,7 +29020,6 @@ function Sidebar({
   collapsed,
   onCollapsedChange
 }) {
-  const location = useLocation();
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const [internalCollapsed, setInternalCollapsed] = useState(
     () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
@@ -29043,16 +29055,16 @@ function Sidebar({
     },
     [isDesktop, onMobileClose, onNavItemClick]
   );
-  const pathnameRef = useRef(location.pathname);
+  const pathnameRef = useRef(pathname);
   useEffect(() => {
-    if (pathnameRef.current === location.pathname) {
+    if (pathnameRef.current === pathname) {
       return;
     }
-    pathnameRef.current = location.pathname;
+    pathnameRef.current = pathname;
     if (!isDesktop) {
       onMobileClose?.();
     }
-  }, [location.pathname, isDesktop, onMobileClose]);
+  }, [pathname, isDesktop, onMobileClose]);
   useEffect(() => {
     if (!mobileOpen || isDesktop) {
       return;
@@ -29133,6 +29145,7 @@ function Sidebar({
             {
               item,
               isOpen: isExpanded,
+              isActive: isNavItemActive(pathname, item),
               onNavigate: handleNavItemNavigate
             },
             item.to
@@ -29143,6 +29156,7 @@ function Sidebar({
               {
                 item,
                 isOpen: isExpanded,
+                isActive: isNavItemActive(pathname, item),
                 onNavigate: handleNavItemNavigate
               },
               item.to
@@ -29905,7 +29919,7 @@ function TableActionsMenu({
   className,
   menuClassName,
   menuWidth = MENU_WIDTH_PX,
-  menuFitContent = false
+  menuFitContent = true
 }) {
   const [open, setOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState(null);
@@ -29918,11 +29932,14 @@ function TableActionsMenu({
   }, []);
   const updateMenuPosition = useCallback(() => {
     const trigger = triggerRef.current;
+    const menuEl = menuRef.current;
     if (!trigger) {
       return;
     }
     const rect = trigger.getBoundingClientRect();
-    const resolvedMenuWidth = menuFitContent ? menuRef.current?.getBoundingClientRect().width ?? menuWidth : menuWidth;
+    const viewportMaxWidth = typeof window === "undefined" ? menuWidth : Math.max(menuWidth, window.innerWidth - MENU_VIEWPORT_MARGIN_PX * 2);
+    const measuredWidth = menuFitContent ? menuEl?.offsetWidth || menuEl?.getBoundingClientRect().width || menuWidth : menuWidth;
+    const resolvedMenuWidth = Math.min(Math.max(measuredWidth, 1), viewportMaxWidth);
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
       left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
@@ -29935,13 +29952,7 @@ function TableActionsMenu({
       return;
     }
     updateMenuPosition();
-  }, [open, updateMenuPosition]);
-  useIsomorphicLayoutEffect(() => {
-    if (!open || !menuFitContent) {
-      return;
-    }
-    updateMenuPosition();
-  }, [items, menuFitContent, open, updateMenuPosition]);
+  }, [open, items, menuFitContent, updateMenuPosition]);
   useEffect(() => {
     if (!open) {
       return;
@@ -29967,7 +29978,7 @@ function TableActionsMenu({
   if (items.length === 0) {
     return null;
   }
-  const menu = open && menuPosition != null ? /* @__PURE__ */ jsx(
+  const menu = open ? /* @__PURE__ */ jsx(
     "div",
     {
       ref: menuRef,
@@ -29975,9 +29986,13 @@ function TableActionsMenu({
       role: "menu",
       style: {
         position: "fixed",
-        top: menuPosition.top,
-        left: menuPosition.left,
-        ...menuFitContent ? { width: "max-content" } : { width: menuWidth }
+        top: menuPosition?.top ?? 0,
+        left: menuPosition?.left ?? 0,
+        maxWidth: `calc(100vw - ${MENU_VIEWPORT_MARGIN_PX * 2}px)`,
+        ...menuFitContent ? { width: "max-content" } : { width: menuWidth },
+        // Hide until we have a measured viewport-safe position.
+        visibility: menuPosition != null ? "visible" : "hidden",
+        pointerEvents: menuPosition != null ? "auto" : "none"
       },
       className: cn(
         "z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]",
@@ -29999,14 +30014,13 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "flex h-[51px] cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
-              menuFitContent ? "w-auto" : "w-full",
+              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),
             children: [
               icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200", children: icon }) : null,
-              /* @__PURE__ */ jsx("span", { children: item.label })
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: item.label })
             ]
           },
           item.id
@@ -30413,6 +30427,28 @@ function Modal({
   return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
 var DRAWER_TRANSITION_MS = 300;
+var bodyScrollLockCount = 0;
+var previousBodyOverflow = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+}
 function Drawer({
   open,
   title,
@@ -30453,8 +30489,7 @@ function Drawer({
     if (!isPresent) {
       return;
     }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    lockBodyScroll();
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -30462,7 +30497,7 @@ function Drawer({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.body.style.overflow = previousOverflow;
+      unlockBodyScroll();
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isPresent, onClose]);
@@ -30808,6 +30843,7 @@ function ConfirmModal({
   confirmText,
   onCancel,
   onConfirm,
+  icon,
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
@@ -30853,7 +30889,8 @@ function ConfirmModal({
             event.stopPropagation();
           },
           children: [
-            /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-3 text-center", children: [
+            /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-center gap-3 text-center", children: [
+              icon ? /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-2xl bg-storm-gray-50 text-storm-gray-500", children: icon }) : null,
               /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -30963,6 +31000,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map