@scripso-homepad/ui 0.4.15 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -53,7 +53,6 @@
     "react-native": ">=0.74",
     "react-native-svg": ">=13",
     "react-native-web": ">=0.19",
-    "react-router-dom": ">=6",
     "sonner": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -63,9 +62,6 @@
     "react-native-web": {
       "optional": true
     },
-    "react-router-dom": {
-      "optional": true
-    },
     "lucide-react": {
       "optional": true
     },
@@ -95,7 +91,6 @@
     "react-native": "^0.76.5",
     "react-native-svg": "^15.11.2",
     "react-native-web": "^0.19.13",
-    "react-router-dom": "^7.9.1",
     "sonner": "^2.0.7",
     "storybook": "^8.4.7",
     "tailwindcss": "^4.1.13",

package/src/components/Button.tsx

@@ -69,6 +69,8 @@ const variantConfig: Record<ButtonVariant, VariantStyleSet> = {
 
 const sizeConfig = {
   lg: {
+    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */
+    minHeight: 52,
     borderRadius: 16,
     paddingTop: 8,
     paddingRight: 8,
@@ -82,6 +84,7 @@ const sizeConfig = {
     iconSize: 20,
   },
   sm: {
+    minHeight: 40,
     borderRadius: 12,
     paddingTop: 8,
     paddingRight: 8,
@@ -138,6 +141,7 @@ export function Button({
   const containerStyle = [
     styles.base,
     {
+      minHeight: metrics.minHeight,
       borderRadius: metrics.borderRadius,
       backgroundColor: preset.backgroundColor,
       paddingTop: metrics.paddingTop,

package/src/components/Input.tsx

@@ -224,6 +224,7 @@ export function Input({
 const styles = StyleSheet.create({
   wrapper: {
     width: "100%",
+    minWidth: 0,
     gap: spacing.sm,
   },
   iconSlot: {

package/src/utils/useApplyWebClassName.ts

@@ -41,6 +41,10 @@ function resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | nu
 /**
  * Applies CSS class names to the underlying DOM node on web.
  * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.
+ *
+ * Retries via rAF when the host node is not ready yet — otherwise classes like
+ * `h-13` / `w-full` would only land after a later re-render (e.g. typing in a form),
+ * which visibly changes button size.
  */
 export function useApplyWebClassName(
   ref: React.RefObject<unknown>,
@@ -50,14 +54,30 @@ export function useApplyWebClassName(
   useLayoutEffect(() => {
     if (!enabled || Platform.OS !== "web" || !className?.trim()) return;
 
-    const element = resolveWebElement(ref);
-    if (!element) return;
-
+    let cancelled = false;
+    let rafId = 0;
+    let appliedElement: ClassListElement | null = null;
     const classes = className.trim().split(/\s+/);
-    element.classList.add(...classes);
+
+    const apply = () => {
+      if (cancelled) return;
+
+      const element = resolveWebElement(ref);
+      if (!element) {
+        rafId = requestAnimationFrame(apply);
+        return;
+      }
+
+      appliedElement = element;
+      element.classList.add(...classes);
+    };
+
+    apply();
 
     return () => {
-      element.classList.remove(...classes);
+      cancelled = true;
+      if (rafId) cancelAnimationFrame(rafId);
+      appliedElement?.classList.remove(...classes);
     };
   }, [ref, className, enabled]);
 }

package/src/web/components/ConfirmModal.tsx

@@ -11,6 +11,8 @@ export 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;
@@ -26,6 +28,7 @@ export function ConfirmModal({
   confirmText,
   onCancel,
   onConfirm,
+  icon,
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
@@ -75,7 +78,12 @@ export function ConfirmModal({
           event.stopPropagation();
         }}
       >
-        <header className="flex flex-col gap-3 text-center">
+        <header className="flex flex-col items-center gap-3 text-center">
+          {icon ? (
+            <div className="flex size-14 items-center justify-center rounded-2xl bg-storm-gray-50 text-storm-gray-500">
+              {icon}
+            </div>
+          ) : null}
           <h2
             id="homepad-confirm-modal-title"
             className="typography-title tracking-normal text-black"
@@ -95,7 +103,7 @@ export function ConfirmModal({
             title={cancelText}
             onPress={onCancel}
             variant="gray"
-            size='sm'
+            size="sm"
             disabled={cancelDisabled}
             className={sharedButtonClassName}
             textClassName="text-center!"
@@ -104,7 +112,7 @@ export function ConfirmModal({
             title={confirmText}
             onPress={onConfirm}
             variant="primary"
-            size='sm'
+            size="sm"
             disabled={confirmDisabled}
             className={sharedButtonClassName}
             textClassName="text-center!"

package/src/web/components/TableActionsMenu.tsx

@@ -33,7 +33,7 @@ export 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;
 };
 
@@ -74,7 +74,7 @@ export function TableActionsMenu({
   className,
   menuClassName,
   menuWidth = MENU_WIDTH_PX,
-  menuFitContent = false,
+  menuFitContent = true,
 }: TableActionsMenuProps) {
   const [open, setOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
@@ -89,14 +89,21 @@ export 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)
+    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,
@@ -106,6 +113,7 @@ export function TableActionsMenu({
 
   useOnClickOutside([rootRef, menuRef], closeMenu, open);
 
+  // Mount the menu when open (possibly off-screen), then measure and place it.
   useIsomorphicLayoutEffect(() => {
     if (!open) {
       setMenuPosition(null);
@@ -113,15 +121,7 @@ export function TableActionsMenu({
     }
 
     updateMenuPosition();
-  }, [open, updateMenuPosition]);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!open || !menuFitContent) {
-      return;
-    }
-
-    updateMenuPosition();
-  }, [items, menuFitContent, open, updateMenuPosition]);
+  }, [open, items, menuFitContent, updateMenuPosition]);
 
   useEffect(() => {
     if (!open) {
@@ -155,58 +155,60 @@ export function TableActionsMenu({
     return null;
   }
 
-  const menu =
-    open && menuPosition != null ? (
-      <div
-        ref={menuRef}
-        id={menuId}
-        role="menu"
-        style={{
-          position: 'fixed',
-          top: menuPosition.top,
-          left: menuPosition.left,
-          ...(menuFitContent ? { width: 'max-content' } : { width: menuWidth }),
-        }}
-        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)]',
-          menuClassName,
-        )}
-      >
-        {items.map((item, index) => {
-          const icon = resolveMenuItemIcon(item);
-
-          return (
-            <button
-              key={item.id}
-              type="button"
-              role="menuitem"
-              disabled={item.disabled}
-              onClick={() => {
-                if (item.disabled) {
-                  return;
-                }
-
-                closeMenu();
-                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',
-                index > 0 && 'border-t border-storm-gray-50',
-                item.disabled && 'cursor-not-allowed opacity-50',
-              )}
-            >
-              {icon ? (
-                <span className="inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200">
-                  {icon}
-                </span>
-              ) : null}
-              <span>{item.label}</span>
-            </button>
-          );
-        })}
-      </div>
-    ) : null;
+  const menu = open ? (
+    <div
+      ref={menuRef}
+      id={menuId}
+      role="menu"
+      style={{
+        position: 'fixed',
+        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)]',
+        menuClassName,
+      )}
+    >
+      {items.map((item, index) => {
+        const icon = resolveMenuItemIcon(item);
+
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="menuitem"
+            disabled={item.disabled}
+            onClick={() => {
+              if (item.disabled) {
+                return;
+              }
+
+              closeMenu();
+              item.onSelect();
+            }}
+            className={cn(
+              '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',
+            )}
+          >
+            {icon ? (
+              <span className="inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200">
+                {icon}
+              </span>
+            ) : null}
+            <span className="whitespace-nowrap">{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
 
   return (
     <div ref={rootRef} className={cn('relative', className)}>

package/src/web/index.ts

@@ -16,6 +16,8 @@ export type { SidebarMobileHeaderProps } from './layout/SidebarMobileHeader';
 export { SidebarNavItem } from './layout/SidebarNavItem';
 export type { SidebarNavItemProps } from './layout/SidebarNavItem';
 
+export { isNavItemActive } from './layout/nav-active';
+
 export { SidebarUserCard } from './layout/SidebarUserCard';
 export type { SidebarUserCardProps } from './layout/SidebarUserCard';
 

package/src/web/layout/DashboardLayout.stories.tsx

@@ -39,6 +39,7 @@ function DashboardLayoutDemo() {
           branding: storyBranding,
           labels: storyLabels.sidebar,
           sidebarStorageKey: 'homepad.storybook.sidebar.open',
+          pathname: '/',
           user: storyUser,
           mobileOpen: mobileMenuOpen,
           onMobileClose: () => setMobileMenuOpen(false),

package/src/web/layout/Sidebar.stories.tsx

@@ -25,6 +25,7 @@ const meta = {
     branding: storyBranding,
     labels: storyLabels.sidebar,
     sidebarStorageKey: 'homepad.storybook.sidebar.open',
+    pathname: '/',
     user: storyUser,
     mobileOpen: true,
     onLogout: fn(),

package/src/web/layout/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { cn } from '../utils/cn';
+import { isNavItemActive } from './nav-active';
 import { SidebarNavItem } from './SidebarNavItem';
 import { SidebarUserCard } from './SidebarUserCard';
 import type { AdminNavItem, AdminSidebarBranding, AdminSidebarLabels, AdminSidebarUser } from './types';
@@ -14,11 +14,20 @@ export 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;
@@ -51,6 +60,7 @@ export function Sidebar({
   branding,
   labels,
   sidebarStorageKey,
+  pathname,
   user,
   onLogout,
   className,
@@ -64,7 +74,6 @@ export function Sidebar({
   collapsed,
   onCollapsedChange,
 }: SidebarProps) {
-  const location = useLocation();
   const isDesktop = useMediaQuery('(min-width: 768px)');
   const [internalCollapsed, setInternalCollapsed] = useState(() =>
     readInitialCollapsedState(sidebarStorageKey, initialCollapsed),
@@ -110,19 +119,19 @@ export 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) {
@@ -215,6 +224,7 @@ export function Sidebar({
               key={item.to}
               item={item}
               isOpen={isExpanded}
+              isActive={isNavItemActive(pathname, item)}
               onNavigate={handleNavItemNavigate}
             />
           ))}
@@ -226,6 +236,7 @@ export function Sidebar({
               key={item.to}
               item={item}
               isOpen={isExpanded}
+              isActive={isNavItemActive(pathname, item)}
               onNavigate={handleNavItemNavigate}
             />
           ))}

package/src/web/layout/SidebarNavItem.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import type { MouseEvent } from 'react';
 
 import { cn } from '../utils/cn';
 import type { AdminNavItem } from './types';
@@ -6,55 +6,66 @@ import type { AdminNavItem } from './types';
 export type SidebarNavItemProps = {
   item: AdminNavItem;
   isOpen: boolean;
+  isActive: boolean;
   onNavigate?: (item: AdminNavItem) => void;
 };
 
-export function SidebarNavItem({ item, isOpen, onNavigate }: SidebarNavItemProps) {
+function isModifiedClick(event: MouseEvent<HTMLAnchorElement>): boolean {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+}
+
+export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNavItemProps) {
   if (item.hidden) {
     return null;
   }
 
-  const handleClick = () => {
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    // Keep routing in the host app's React Router instance so workspace /
+    // published UI copies never fight over duplicate router contexts.
+    if (event.defaultPrevented || isModifiedClick(event)) {
+      return;
+    }
+
+    event.preventDefault();
     item.onClick?.();
     onNavigate?.(item);
   };
 
   return (
-    <NavLink
-      to={item.to}
-      end={item.end}
+    <a
+      href={item.to}
       onClick={handleClick}
+      aria-current={isActive ? 'page' : undefined}
       aria-disabled={item.disabled}
       tabIndex={item.disabled ? -1 : undefined}
-      className={({ isActive }) =>
-        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',
-        )
-      }
-    >
-      {({ isActive }) => (
-        <>
-          <span
-            aria-hidden
-            className={cn(
-              'absolute top-1.5 -left-1 h-8 w-2 rounded-full bg-white transition-[opacity,transform] duration-300 ease-in-out',
-              isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-0',
-            )}
-          />
-          <span className="flex size-5 shrink-0 items-center justify-center">{item.icon}</span>
-          <span
-            className={cn(
-              'overflow-hidden typography-14 font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out',
-              isOpen ? 'max-w-[180px] opacity-100' : 'max-w-0 opacity-0',
-            )}
-          >
-            {item.label}
-          </span>
-        </>
+      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',
       )}
-    </NavLink>
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'absolute top-1.5 -left-1 h-8 w-2 rounded-full bg-white transition-[opacity,transform] duration-300 ease-in-out',
+          isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-0',
+        )}
+      />
+      <span className="flex size-5 shrink-0 items-center justify-center">{item.icon}</span>
+      <span
+        className={cn(
+          'overflow-hidden typography-14 font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out',
+          isOpen ? 'max-w-[180px] opacity-100' : 'max-w-0 opacity-0',
+        )}
+      >
+        {item.label}
+      </span>
+    </a>
   );
 }

package/src/web/layout/nav-active.ts

@@ -0,0 +1,13 @@
+import type { AdminNavItem } from './types';
+
+/**
+ * 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.
+ */
+export function isNavItemActive(pathname: string, item: Pick<AdminNavItem, 'to' | 'end'>): boolean {
+  if (item.end) {
+    return pathname === item.to;
+  }
+
+  return pathname === item.to || pathname.startsWith(`${item.to}/`);
+}