@scripso-homepad/ui 0.4.41 → 0.4.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.41",
+  "version": "0.4.42",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/Drawer.tsx

@@ -143,7 +143,7 @@ export function Drawer({
     };
   }, [isPresent, onClose]);
 
-  if (!isPresent) {
+  if (!open && !isPresent) {
     return null;
   }
 
@@ -181,9 +181,7 @@ export function Drawer({
           className,
         )}
       >
-        <header
-          className={cn('shrink-0 border-b border-storm-gray-50', headerClassName)}
-        >
+        <header className={cn('shrink-0 border-b border-storm-gray-50', headerClassName)}>
           <div className="flex items-start justify-between pt-6 pr-6 pb-4 pl-6">
             <div className="min-w-0 flex flex-col gap-1">
               <h2
@@ -211,7 +209,10 @@ export function Drawer({
               className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600"
               onClick={onClose}
             >
-              <X className="size-5" strokeWidth={1.75} />
+              <X
+                className="size-5"
+                strokeWidth={1.75}
+              />
             </button>
           </div>
 

package/src/web/components/Modal.tsx

@@ -5,6 +5,7 @@ import { Button } from '../../components/Button';
 import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 import './drawer-scroll.css';
+import './modal-motion.css';
 
 export type ModalFooterAlign = 'left' | 'center' | 'right';
 export type ModalFooterLayout = 'inline' | 'split';
@@ -29,6 +30,7 @@ export type ModalProps = {
   closeOnBackdrop?: boolean;
   closeOnEscape?: boolean;
   containerClassName?: string;
+  containerDataOnboarding?: string;
   contentClassName?: string;
   buttonClassName?: string;
 };
@@ -59,6 +61,7 @@ export function Modal({
   closeOnBackdrop = true,
   closeOnEscape = true,
   containerClassName,
+  containerDataOnboarding,
   contentClassName,
   buttonClassName,
 }: ModalProps) {
@@ -90,14 +93,11 @@ export function Modal({
     return null;
   }
 
-  const sharedButtonClassName = cn(
-    'btn h-13 w-full! min-w-0! justify-center!',
-    buttonClassName,
-  );
+  const sharedButtonClassName = cn('btn h-13 w-full! min-w-0! justify-center!', buttonClassName);
 
   const modal = (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
+      className="homepad-modal-in fixed inset-0 z-[100] flex items-center justify-center bg-storm-gray-850/40 p-4 backdrop-blur-[12px]"
       onPointerDown={backdropDismiss.onPointerDown}
       onClick={backdropDismiss.onClick}
       role="presentation"
@@ -107,6 +107,7 @@ export function Modal({
         aria-modal="true"
         aria-labelledby="homepad-modal-title"
         {...(subtitle ? { 'aria-describedby': 'homepad-modal-subtitle' } : {})}
+        {...(containerDataOnboarding ? { 'data-onboarding': containerDataOnboarding } : {})}
         className={cn(
           'flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
           containerClassName,
@@ -146,7 +147,14 @@ export function Modal({
           </div>
         </header>
 
-        <div className={cn('drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto', contentClassName)}>{children}</div>
+        <div
+          className={cn(
+            'drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto',
+            contentClassName,
+          )}
+        >
+          {children}
+        </div>
 
         <footer
           className={cn(

package/src/web/components/TableActionsMenu.tsx

@@ -1,21 +1,29 @@
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { TableMenuCheckIcon } from '../icons/TableMenuCheckIcon';
-import { TableMenuCloseIcon } from '../icons/TableMenuCloseIcon';
-import { TableMoreIcon } from '../icons/TableMoreIcon';
-import { cn } from '../utils/cn';
-import { TableActionButton } from './TableActionButton';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { useOnClickOutside } from "../hooks/useOnClickOutside";
+import { TableMenuCheckIcon } from "../icons/TableMenuCheckIcon";
+import { TableMenuCloseIcon } from "../icons/TableMenuCloseIcon";
+import { TableMoreIcon } from "../icons/TableMoreIcon";
+import { cn } from "../utils/cn";
+import { TableActionButton } from "./TableActionButton";
 
 const MENU_WIDTH_PX = 231;
 const MENU_OFFSET_PX = 4;
 const MENU_VIEWPORT_MARGIN_PX = 8;
 
-const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
 
-export type TableActionsMenuItemTone = 'default' | 'success' | 'danger';
+export type TableActionsMenuItemTone = "default" | "success" | "danger";
 
 export type TableActionsMenuItem = {
   id: string;
@@ -37,6 +45,10 @@ export type TableActionsMenuProps = {
   menuWidth?: number;
   /** Size the menu to its content width instead of a fixed pixel width. Defaults to true so labels stay on one line. */
   menuFitContent?: boolean;
+
+  /** Keep the menu open while a page tour is explaining this row. */
+  forceOpen?: boolean;
+  menuOnboardingId?: string;
 };
 
 type MenuPosition = {
@@ -45,12 +57,15 @@ type MenuPosition = {
 };
 
 function clampMenuLeft(left: number, menuWidth: number): number {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return left;
   }
 
   const minLeft = MENU_VIEWPORT_MARGIN_PX;
-  const maxLeft = Math.max(minLeft, window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX);
+  const maxLeft = Math.max(
+    minLeft,
+    window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX,
+  );
 
   return Math.min(Math.max(left, minLeft), maxLeft);
 }
@@ -61,9 +76,9 @@ function resolveMenuItemIcon(item: TableActionsMenuItem): ReactNode | null {
   }
 
   switch (item.tone) {
-    case 'success':
+    case "success":
       return <TableMenuCheckIcon />;
-    case 'danger':
+    case "danger":
       return <TableMenuCloseIcon />;
     default:
       return null;
@@ -78,6 +93,8 @@ export function TableActionsMenu({
   triggerIcon,
   menuWidth = MENU_WIDTH_PX,
   menuFitContent = true,
+  forceOpen,
+  menuOnboardingId,
 }: TableActionsMenuProps) {
   const [open, setOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
@@ -87,8 +104,20 @@ export function TableActionsMenu({
   const menuId = useId();
 
   const closeMenu = useCallback(() => {
+    if (forceOpen) {
+      return;
+    }
+
     setOpen(false);
-  }, []);
+  }, [forceOpen]);
+
+  useEffect(() => {
+    if (forceOpen === undefined) {
+      return;
+    }
+
+    setOpen(forceOpen);
+  }, [forceOpen]);
 
   const updateMenuPosition = useCallback(() => {
     const trigger = triggerRef.current;
@@ -99,14 +128,19 @@ export function TableActionsMenu({
 
     const rect = trigger.getBoundingClientRect();
     const viewportMaxWidth =
-      typeof window === 'undefined'
+      typeof window === "undefined"
         ? menuWidth
         : Math.max(menuWidth, window.innerWidth - MENU_VIEWPORT_MARGIN_PX * 2);
 
     const measuredWidth = menuFitContent
-      ? (menuEl?.offsetWidth || menuEl?.getBoundingClientRect().width || menuWidth)
+      ? menuEl?.offsetWidth ||
+        menuEl?.getBoundingClientRect().width ||
+        menuWidth
       : menuWidth;
-    const resolvedMenuWidth = Math.min(Math.max(measuredWidth, 1), viewportMaxWidth);
+    const resolvedMenuWidth = Math.min(
+      Math.max(measuredWidth, 1),
+      viewportMaxWidth,
+    );
 
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
@@ -132,27 +166,31 @@ export function TableActionsMenu({
     }
 
     const closeOnScroll = () => {
+      if (forceOpen) {
+        return;
+      }
+
       closeMenu();
     };
 
-    window.addEventListener('resize', updateMenuPosition);
-    window.addEventListener('scroll', closeOnScroll, true);
+    window.addEventListener("resize", updateMenuPosition);
+    window.addEventListener("scroll", closeOnScroll, true);
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         closeMenu();
         triggerRef.current?.focus();
       }
     };
 
-    document.addEventListener('keydown', closeOnEscape);
+    document.addEventListener("keydown", closeOnEscape);
 
     return () => {
-      window.removeEventListener('resize', updateMenuPosition);
-      window.removeEventListener('scroll', closeOnScroll, true);
-      document.removeEventListener('keydown', closeOnEscape);
+      window.removeEventListener("resize", updateMenuPosition);
+      window.removeEventListener("scroll", closeOnScroll, true);
+      document.removeEventListener("keydown", closeOnEscape);
     };
-  }, [closeMenu, open, updateMenuPosition]);
+  }, [closeMenu, forceOpen, open, updateMenuPosition]);
 
   if (items.length === 0) {
     return null;
@@ -164,17 +202,18 @@ export function TableActionsMenu({
       id={menuId}
       role="menu"
       style={{
-        position: 'fixed',
+        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 }),
+        ...(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',
+        visibility: menuPosition != null ? "visible" : "hidden",
+        pointerEvents: menuPosition != null ? "auto" : "none",
       }}
+      {...(menuOnboardingId ? { "data-onboarding": menuOnboardingId } : {})}
       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)]',
+        "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,
       )}
     >
@@ -196,25 +235,25 @@ export function TableActionsMenu({
               item.onSelect();
             }}
             className={cn(
-              'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium transition-colors hover:bg-storm-gray-0',
-              index > 0 && 'border-t border-storm-gray-50',
-              item.disabled && 'cursor-not-allowed opacity-50',
-              item.tone === 'danger'
-                ? 'text-[#AE0011]'
-                : item.tone === 'success'
-                  ? 'text-green-600'
-                  : 'text-storm-gray-900',
+              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium transition-colors hover:bg-storm-gray-0",
+              index > 0 && "border-t border-storm-gray-50",
+              item.disabled && "cursor-not-allowed opacity-50",
+              item.tone === "danger"
+                ? "text-[#AE0011]"
+                : item.tone === "success"
+                  ? "text-green-600"
+                  : "text-storm-gray-900",
             )}
           >
             {icon ? (
               <span
                 className={cn(
-                  'inline-flex size-5 shrink-0 items-center justify-center',
-                  item.tone === 'danger'
-                    ? 'text-[#AE0011]'
-                    : item.tone === 'success'
-                      ? 'text-green-600'
-                      : 'text-storm-gray-200',
+                  "inline-flex size-5 shrink-0 items-center justify-center",
+                  item.tone === "danger"
+                    ? "text-[#AE0011]"
+                    : item.tone === "success"
+                      ? "text-green-600"
+                      : "text-storm-gray-200",
                 )}
               >
                 {icon}
@@ -228,7 +267,7 @@ export function TableActionsMenu({
   ) : null;
 
   return (
-    <div ref={rootRef} className={cn('relative', className)}>
+    <div ref={rootRef} className={cn("relative", className)}>
       <TableActionButton
         ref={triggerRef}
         variant="menu"
@@ -240,7 +279,9 @@ export function TableActionsMenu({
         aria-controls={menuId}
       />
 
-      {typeof document !== 'undefined' && menu != null ? createPortal(menu, document.body) : null}
+      {typeof document !== "undefined" && menu != null
+        ? createPortal(menu, document.body)
+        : null}
     </div>
   );
 }

package/src/web/components/modal-motion.css

@@ -0,0 +1,19 @@
+@keyframes homepad-modal-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.homepad-modal-in {
+  animation: homepad-modal-in 300ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homepad-modal-in {
+    animation: none;
+  }
+}

package/src/web/layout/SidebarNavItem.tsx

@@ -1,7 +1,7 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent } from "react";
 
-import { cn } from '../utils/cn';
-import type { AdminNavItem } from './types';
+import { cn } from "../utils/cn";
+import type { AdminNavItem } from "./types";
 
 export type SidebarNavItemProps = {
   item: AdminNavItem;
@@ -10,7 +10,12 @@ export type SidebarNavItemProps = {
   onNavigate?: (item: AdminNavItem) => void;
 };
 
-export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNavItemProps) {
+export function SidebarNavItem({
+  item,
+  isOpen,
+  isActive,
+  onNavigate,
+}: SidebarNavItemProps) {
   if (item.hidden) {
     return null;
   }
@@ -30,31 +35,34 @@ export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNa
     <button
       type="button"
       onClick={handleClick}
-      aria-current={isActive ? 'page' : undefined}
+      aria-current={isActive ? "page" : undefined}
+      data-onboarding={item.onboardingId}
       aria-disabled={item.disabled}
       disabled={item.disabled}
       tabIndex={item.disabled ? -1 : undefined}
       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' : 'w-full justify-center gap-0 px-3',
-        item.disabled && 'pointer-events-none opacity-50',
+        "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" : "w-full justify-center gap-0 px-3",
+        item.disabled && "pointer-events-none opacity-50",
         isActive
-          ? 'bg-black/12 text-white shadow-none'
-          : 'text-navy-100 shadow-none hover:bg-white/5',
+          ? "bg-black/12 text-white shadow-none"
+          : "text-navy-100 shadow-none hover:bg-white/5",
       )}
     >
       <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',
+          "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="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',
+          "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}

package/src/web/layout/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
 export type AdminNavItem = {
   to: string;
@@ -8,6 +8,7 @@ export type AdminNavItem = {
   hidden?: boolean;
   disabled?: boolean;
   onClick?: () => void;
+  onboardingId?: string;
 };
 
 export type AdminSidebarUser = {