@scripso-homepad/ui 0.4.40 → 0.4.42

package/dist/web/index.cjs

@@ -27566,7 +27566,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal3(children, containerInfo, implementation) {
+        function createPortal4(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28422,7 +28422,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal3(children, container, null, key);
+          return createPortal4(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -29580,7 +29580,12 @@ function isNavItemActive(pathname, item) {
   }
   return pathname === item.to || pathname.startsWith(`${item.to}/`);
 }
-function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
+function SidebarNavItem({
+  item,
+  isOpen,
+  isActive,
+  onNavigate
+}) {
   if (item.hidden) {
     return null;
   }
@@ -29598,6 +29603,7 @@ function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
       type: "button",
       onClick: handleClick,
       "aria-current": isActive ? "page" : void 0,
+      "data-onboarding": item.onboardingId,
       "aria-disabled": item.disabled,
       disabled: item.disabled,
       tabIndex: item.disabled ? -1 : void 0,
@@ -29867,12 +29873,12 @@ function Sidebar({
         )
       }
     ),
-    showCollapsedRail && mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-screen w-[76px] shrink-0", "aria-hidden": true }) : null,
+    showCollapsedRail && mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-dvh w-[76px] shrink-0", "aria-hidden": true }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
         className: cn(
-          "fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
+          "fixed inset-y-0 left-0 z-50 flex h-dvh w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
           "transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]",
           mobileOpen ? "translate-x-0" : "-translate-x-full pointer-events-none",
           "md:relative md:z-auto md:w-[76px] md:translate-x-0 md:pointer-events-auto md:shadow-none md:items-center md:gap-2 md:px-3 md:py-4",
@@ -30005,9 +30011,9 @@ function DashboardLayout({
   className,
   mainClassName
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-md:contents md:h-screen md:shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebar }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-dvh min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-md:contents md:h-dvh md:shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebar }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-dvh min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SidebarMobileHeader, { ...mobileHeader }),
       /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header }),
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClassName ?? "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6", children })
@@ -30539,16 +30545,16 @@ function TableHead({
   sortDirection = null,
   onSort,
   children,
+  onClick,
+  onKeyDown,
   ...props
 }) {
   const isSortable = sortable && onSort != null;
   const content = isSortable ? /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "span",
     {
-      type: "button",
-      onClick: onSort,
       className: cn(
-        "inline-flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit transition-colors hover:text-storm-gray-500",
+        "inline-flex w-full items-center gap-2.5 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit",
         tableHeadSortButtonAlignClasses[align]
       ),
       children: [
@@ -30565,10 +30571,29 @@ function TableHead({
         tableHeadPaddingClassName,
         tableHeaderClassName,
         !isSortable && tableAlignClasses[align],
+        isSortable && "cursor-pointer select-none hover:text-storm-gray-500",
         className
       ),
       "aria-sort": resolveAriaSort(sortDirection, isSortable),
+      tabIndex: isSortable ? 0 : void 0,
       ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+        onSort();
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSort();
+        }
+      },
       children: content
     }
   );
@@ -30670,7 +30695,10 @@ function clampMenuLeft(left, menuWidth) {
     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);
 }
 function resolveMenuItemIcon(item) {
@@ -30693,7 +30721,9 @@ function TableActionsMenu({
   menuClassName,
   triggerIcon,
   menuWidth = MENU_WIDTH_PX,
-  menuFitContent = true
+  menuFitContent = true,
+  forceOpen,
+  menuOnboardingId
 }) {
   const [open, setOpen] = react.useState(false);
   const [menuPosition, setMenuPosition] = react.useState(null);
@@ -30702,8 +30732,17 @@ function TableActionsMenu({
   const triggerRef = react.useRef(null);
   const menuId = react.useId();
   const closeMenu = react.useCallback(() => {
+    if (forceOpen) {
+      return;
+    }
     setOpen(false);
-  }, []);
+  }, [forceOpen]);
+  react.useEffect(() => {
+    if (forceOpen === void 0) {
+      return;
+    }
+    setOpen(forceOpen);
+  }, [forceOpen]);
   const updateMenuPosition = react.useCallback(() => {
     const trigger = triggerRef.current;
     const menuEl = menuRef.current;
@@ -30713,7 +30752,10 @@ function TableActionsMenu({
     const rect = trigger.getBoundingClientRect();
     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);
+    const resolvedMenuWidth = Math.min(
+      Math.max(measuredWidth, 1),
+      viewportMaxWidth
+    );
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
       left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
@@ -30732,6 +30774,9 @@ function TableActionsMenu({
       return;
     }
     const closeOnScroll = () => {
+      if (forceOpen) {
+        return;
+      }
       closeMenu();
     };
     window.addEventListener("resize", updateMenuPosition);
@@ -30748,7 +30793,7 @@ function TableActionsMenu({
       window.removeEventListener("scroll", closeOnScroll, true);
       document.removeEventListener("keydown", closeOnEscape);
     };
-  }, [closeMenu, open, updateMenuPosition]);
+  }, [closeMenu, forceOpen, open, updateMenuPosition]);
   if (items.length === 0) {
     return null;
   }
@@ -30768,6 +30813,7 @@ function TableActionsMenu({
         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)]",
         menuClassName
@@ -31246,6 +31292,7 @@ function Modal({
   closeOnBackdrop = true,
   closeOnEscape = true,
   containerClassName,
+  containerDataOnboarding,
   contentClassName,
   buttonClassName
 }) {
@@ -31270,14 +31317,11 @@ function Modal({
   if (!open) {
     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 = /* @__PURE__ */ jsxRuntime.jsx(
     "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",
@@ -31288,6 +31332,7 @@ 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
@@ -31326,7 +31371,16 @@ function Modal({
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto",
+                  contentClassName
+                ),
+                children
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "footer",
               {
@@ -31369,16 +31423,22 @@ function Modal({
   );
   return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
+
+// src/web/components/Drawer.tsx
+var import_react_dom3 = __toESM(require_react_dom());
 var DRAWER_TRANSITION_MS = 300;
 var bodyScrollLockCount = 0;
 var previousBodyOverflow = "";
+var previousHtmlOverflow = "";
 function lockBodyScroll() {
   if (typeof document === "undefined") {
     return;
   }
   if (bodyScrollLockCount === 0) {
     previousBodyOverflow = document.body.style.overflow;
+    previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
   }
   bodyScrollLockCount += 1;
 }
@@ -31389,7 +31449,9 @@ function unlockBodyScroll() {
   bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
   if (bodyScrollLockCount === 0) {
     document.body.style.overflow = previousBodyOverflow;
+    document.documentElement.style.overflow = previousHtmlOverflow;
     previousBodyOverflow = "";
+    previousHtmlOverflow = "";
   }
 }
 function Drawer({
@@ -31460,13 +31522,13 @@ function Drawer({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isPresent, onClose]);
-  if (!isPresent) {
+  if (!open && !isPresent) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const drawer = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "fixed inset-0 z-50 flex justify-end p-2 max-md:p-0",
+      className: "fixed inset-0 z-50 flex justify-end overscroll-none p-2 max-md:p-0",
       role: "presentation",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -31490,7 +31552,7 @@ function Drawer({
             "aria-labelledby": "homepad-drawer-title",
             ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
             className: cn(
-              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none",
+              "relative z-10 flex h-full max-h-full min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:rounded-none",
               // Keep GPU transform only while animating — settled translate-x-0 blurs text.
               !isTransformSettled && "will-change-transform",
               isAnimatedIn ? isTransformSettled ? "transform-none" : "translate-x-0" : "translate-x-full",
@@ -31498,48 +31560,48 @@ function Drawer({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "header",
-                {
-                  className: cn("shrink-0 border-b border-storm-gray-50", headerClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between pt-6 pr-6 pb-4 pl-6", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "h2",
-                          {
-                            id: "homepad-drawer-title",
-                            className: "typography-title-sm tracking-normal text-black",
-                            children: title
-                          }
+              /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("shrink-0 border-b border-storm-gray-50", headerClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between pt-6 pr-6 pb-4 pl-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h2",
+                      {
+                        id: "homepad-drawer-title",
+                        className: "typography-title-sm tracking-normal text-black",
+                        children: title
+                      }
+                    ),
+                    subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        id: "homepad-drawer-subtitle",
+                        className: cn(
+                          "typography-body tracking-normal text-storm-gray-400",
+                          subtitleClassName
                         ),
-                        subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
-                          "p",
-                          {
-                            id: "homepad-drawer-subtitle",
-                            className: cn(
-                              "typography-body tracking-normal text-storm-gray-400",
-                              subtitleClassName
-                            ),
-                            children: subtitle
-                          }
-                        ) : null
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
+                        children: subtitle
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": closeAriaLabel,
+                      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,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.X,
                         {
-                          type: "button",
-                          "aria-label": closeAriaLabel,
-                          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,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5", strokeWidth: 1.75 })
+                          className: "size-5",
+                          strokeWidth: 1.75
                         }
                       )
-                    ] }),
-                    headerBottom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-storm-gray-50 px-6", children: headerBottom }) : null
-                  ]
-                }
-              ),
+                    }
+                  )
+                ] }),
+                headerBottom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-storm-gray-50 px-6", children: headerBottom }) : null
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -31557,6 +31619,7 @@ function Drawer({
       ]
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(drawer, document.body) : drawer;
 }
 function TimelineCheckIcon({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(