@beweco/aurora-ui 0.6.66 → 0.6.68

package/dist/index.cjs.js

@@ -3011,12 +3011,12 @@ var NotificationButton = function (_a) {
 };
 NotificationButton.displayName = "NotificationButton";
 
-var DEFAULT_TRANSLATIONS$7 = {
+var DEFAULT_TRANSLATIONS$8 = {
     logout: "Cerrar sesión",
 };
 var HeaderComponent = function (_a) {
     var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, extraContent = _a.extraContent, _c = _a.showMenuButton, showMenuButton = _c === void 0 ? true : _c, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$7), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$8), translations);
     return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [showMenuButton && (jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick })), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [extraContent, jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
@@ -3140,7 +3140,7 @@ KanbanColumn.displayName = "KanbanColumn";
  * Traducciones por defecto en español.
  * Se mezclan con las traducciones proporcionadas por el usuario.
  */
-var DEFAULT_TRANSLATIONS$6 = {
+var DEFAULT_TRANSLATIONS$7 = {
     dropHere: "Soltar aquí",
     emptyMessage: "No hay elementos",
 };
@@ -3174,7 +3174,7 @@ var columnGapClasses = {
 var KanbanComponent = function (_a) {
     var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e, onLoadMore = _a.onLoadMore;
     // Mezclar traducciones del usuario con las por defecto
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$6), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$7), translations);
     // Determinar si drag está habilitado
     var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
     // Estado del drag actual
@@ -3332,6 +3332,32 @@ function getSelectedKeyFromPath(pathname, items) {
     return undefined;
 }
 
+/**
+ * Deriva las iniciales para el avatar del usuario a partir de su nombre completo.
+ *
+ * Muestra la inicial del nombre + la inicial del primer apellido (2 letras en
+ * mayúsculas), p. ej. "Roser Ruiz" -> "RR". Si el usuario solo tiene un token
+ * (nombre sin apellido) devuelve una sola inicial. Si no hay texto, devuelve "".
+ *
+ * TECH-1727: reemplaza el comportamiento por defecto de HeroUI (`safeText`), que
+ * muestra las 3 primeras letras del nombre ("Roser Ruiz" -> "Ros").
+ *
+ * @param fullName Nombre completo del usuario (se usa el mismo valor que el label).
+ * @returns Iniciales en mayúsculas (0, 1 o 2 letras).
+ */
+var getUserInitials = function (fullName) {
+    var tokens = fullName.trim().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0) {
+        return "";
+    }
+    var firstInitial = tokens[0].charAt(0).toUpperCase();
+    if (tokens.length === 1) {
+        return firstInitial;
+    }
+    var secondInitial = tokens[1].charAt(0).toUpperCase();
+    return "".concat(firstInitial).concat(secondInitial);
+};
+
 exports.EnumMenuNavListItem = void 0;
 (function (EnumMenuNavListItem) {
     EnumMenuNavListItem["Nest"] = "nest";
@@ -3492,7 +3518,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
 });
 MenuNavList.displayName = "MenuNavList";
 
-var DEFAULT_TRANSLATIONS$5 = {
+var DEFAULT_TRANSLATIONS$6 = {
     menuLabel: "Menú",
     closeSidebarAriaLabel: "Cerrar menú lateral",
     mobileNavAriaLabel: "Navegación móvil",
@@ -3507,10 +3533,10 @@ var DEFAULT_TRANSLATIONS$5 = {
  */
 var MenuComponent = React.memo(function Menu(_a) {
     var _b, _c;
-    var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, onUserInfoClick = _a.onUserInfoClick, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
     var _g = React.useState(false), logoError = _g[0], setLogoError = _g[1];
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$6), translations);
     var selectedKey = React.useMemo(function () {
         var _a, _b, _c;
         if (menuItems.selectedPath) {
@@ -3547,6 +3573,18 @@ var MenuComponent = React.memo(function Menu(_a) {
     var handleSidebarClose = React.useCallback(function () {
         onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
     }, [onOpenSidebarChange]);
+    // TECH-1784: clic en el bloque de usuario -> acción del consumidor (ej.
+    // navegar a /profile) y cierre del sidebar en móvil, igual que los ítems.
+    var handleUserInfoClick = React.useCallback(function () {
+        onUserInfoClick === null || onUserInfoClick === void 0 ? void 0 : onUserInfoClick();
+        handleSidebarClose();
+    }, [onUserInfoClick, handleSidebarClose]);
+    // Contenido del bloque de usuario (avatar + nombre + rol), reutilizado
+    // tanto en la variante estática como en la interactiva (TECH-1784).
+    var userInfoContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, 
+                // TECH-1727: inicial de nombre + inicial de primer apellido
+                // (p. ej. "Roser Ruiz" -> "RR") en vez de las 3 primeras letras.
+                getInitials: getUserInitials, className: "shrink-0" }), jsxRuntime.jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }));
     var handleSidebarOpen = React.useCallback(function () {
         onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
     }, [onOpenSidebarChange]);
@@ -3686,7 +3724,168 @@ var MenuComponent = React.memo(function Menu(_a) {
                                 flexDirection: isCollapsed ? "column-reverse" : "row",
                             }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-foreground text-background", children: hasValidLogo ? (jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "".concat(t.logoAlt, " ").concat(commerceName), className: "h-full w-full object-cover", onError: function () { return setLogoError(true); } })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:buildings-2-outline", size: "sm", className: "shrink-0", "aria-hidden": true })) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold truncate min-w-0", children: commerceName })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
                                                 ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), jsxRuntime.jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }), jsxRuntime.jsxs("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6 relative"), children: [!isCollapsed && showScrollArrows && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollState.canScrollUp && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "menu-scroll-fade menu-scroll-fade--up", "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollUpAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--up", onClick: handleScrollUp, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-up-outline", size: "md", "aria-hidden": true }) })] })), scrollState.canScrollDown && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "menu-scroll-fade menu-scroll-fade--down", "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollDownAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--down", onClick: handleScrollDown, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", size: "md", "aria-hidden": true }) })] }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] select-none ".concat(isDraggingScroll ? "cursor-grabbing" : ""), onMouseDown: handleScrollAreaMouseDown, children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, selectedKey) })] }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item truncate", children: helpSection.title })) }) })) : null] }) })] }));
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), onUserInfoClick ? (jsxRuntime.jsx("button", { type: "button", onClick: handleUserInfoClick, className: "content__menu--user w-full text-left cursor-pointer rounded-large border-none bg-transparent transition-colors hover:bg-default/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus ".concat(isCollapsed ? "gap-0" : "gap-3"), children: userInfoContent })) : (jsxRuntime.jsx("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: userInfoContent })), jsxRuntime.jsxs("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6 relative"), children: [!isCollapsed && showScrollArrows && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollState.canScrollUp && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "menu-scroll-fade menu-scroll-fade--up", "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollUpAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--up", onClick: handleScrollUp, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-up-outline", size: "md", "aria-hidden": true }) })] })), scrollState.canScrollDown && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "menu-scroll-fade menu-scroll-fade--down", "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.scrollDownAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--down", onClick: handleScrollDown, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", size: "md", "aria-hidden": true }) })] }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] select-none ".concat(isDraggingScroll ? "cursor-grabbing" : ""), onMouseDown: handleScrollAreaMouseDown, children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, selectedKey) })] }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item truncate", children: helpSection.title })) }) })) : null] }) })] }));
+});
+
+/**
+ * Sección de historial de conversaciones: botón de nueva conversación + lista de
+ * entradas recientes con "ver más".
+ *
+ * La lista tiene **scroll interno propio** (`flex-1 min-h-0 overflow-y-auto`) y
+ * la sección está acotada en altura, para que crecer el historial no arrastre ni
+ * recorte el área de navegación.
+ *
+ * Densidad de MenuClaw: fila de 36px, `px-2`, `text-small`/`text-tiny` y radios
+ * `rounded-lg`/`rounded-xl` — que es justo lo que difiere del menú compartido.
+ */
+var MenuClawHistoryPanel = React.memo(function MenuClawHistoryPanel(_a) {
+    var items = _a.items, initialVisibleCount = _a.initialVisibleCount, onNewConversation = _a.onNewConversation, isCollapsed = _a.isCollapsed, title = _a.title, newLabel = _a.newLabel, showMoreLabel = _a.showMoreLabel, showLessLabel = _a.showLessLabel, onBeforeSelect = _a.onBeforeSelect;
+    var _b = React.useState(false), isExpanded = _b[0], setIsExpanded = _b[1];
+    var visibleItems = React.useMemo(function () { return (isExpanded ? items : items.slice(0, initialVisibleCount)); }, [isExpanded, items, initialVisibleCount]);
+    var hasHiddenItems = items.length > initialVisibleCount;
+    var handleToggleExpand = React.useCallback(function () {
+        setIsExpanded(function (prev) { return !prev; });
+    }, []);
+    var handleItemPress = React.useCallback(function (item) {
+        var _a;
+        // `disabled` ya bloquea el botón; este guard cubre además el caso de
+        // activación programática.
+        if (item.disabled) {
+            return;
+        }
+        onBeforeSelect === null || onBeforeSelect === void 0 ? void 0 : onBeforeSelect();
+        (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+    }, [onBeforeSelect]);
+    // Comprimido no hay ancho para texto: solo el botón de nueva conversación,
+    // en modo icono. Sin `onNewConversation` no hay nada que mostrar.
+    if (isCollapsed && !onNewConversation) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { className: "flex max-h-[40%] min-h-0 flex-col gap-2 pb-3", children: [onNewConversation ? (jsxRuntime.jsxs("button", { type: "button", title: newLabel, onClick: onNewConversation, className: react.cn("flex h-9 shrink-0 items-center gap-3 rounded-xl bg-foreground px-2 text-small font-medium text-background transition-opacity hover:opacity-90", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", isCollapsed && "justify-center"), children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-new-square-linear", size: "md", "aria-hidden": true }) }), !isCollapsed ? (jsxRuntime.jsx("span", { className: "menu-claw-collapsible truncate", children: newLabel })) : null] })) : null, !isCollapsed && items.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("p", { className: "shrink-0 px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: title }), jsxRuntime.jsx("ul", { "aria-label": title, className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: visibleItems.map(function (item) { return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", disabled: item.disabled, "aria-disabled": item.disabled, title: item.title, onClick: function () { return handleItemPress(item); }, className: react.cn("flex min-h-9 w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left text-small text-default-600 transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", item.disabled
+                                    ? "cursor-not-allowed opacity-50"
+                                    : "hover:bg-default-100"), children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-400", children: jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-dots-linear", size: "md", "aria-hidden": true }) }), jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx("span", { className: "truncate", children: item.title }), item.meta ? (jsxRuntime.jsx("span", { className: "truncate text-tiny text-default-400", children: item.meta })) : null] })] }) }, item.id)); }) }), hasHiddenItems ? (jsxRuntime.jsxs("button", { type: "button", onClick: handleToggleExpand, "aria-expanded": isExpanded, className: "flex w-full shrink-0 items-center gap-1.5 rounded-lg px-2 py-2 text-tiny font-medium text-default-500 transition-colors hover:bg-default-100 hover:text-default-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", children: [jsxRuntime.jsx(IconComponent, { icon: isExpanded
+                                    ? "solar:alt-arrow-up-linear"
+                                    : "solar:alt-arrow-down-linear", size: "sm", "aria-hidden": true }), isExpanded ? showLessLabel : showMoreLabel] })) : null] })) : null] }));
+});
+
+var DEFAULT_TRANSLATIONS$5 = {
+    menuLabel: "Menú",
+    closeSidebarAriaLabel: "Cerrar menú lateral",
+    mobileNavAriaLabel: "Navegación móvil",
+    notDefinedLabel: "no definido",
+    toggleSidebarAriaLabel: "Comprimir o expandir el menú",
+    historyTitle: "Historial",
+    historyNewLabel: "Nueva conversación",
+    historyShowMoreLabel: "Ver más",
+    historyShowLessLabel: "Ver menos",
+};
+/** Ítems del historial visibles antes de pulsar "ver más". */
+var DEFAULT_HISTORY_VISIBLE_COUNT = 5;
+/**
+ * Menú lateral con historial de conversaciones integrado.
+ *
+ * Es un componente **aparte de `MenuComponent`**, no una extensión suya, y esa
+ * es toda su razón de ser: el diseño no solo añade historial, cambia la
+ * DENSIDAD del menú (fila de 36px en vez de 44, `px-2` en vez de `px-3`, dos
+ * escalas tipográficas en vez de una, radios `lg`/`xl` en vez de `large`).
+ * `MenuComponent` lo consumen varias plataformas —solo en beweossmbs hay 446
+ * ficheros que importan el paquete— y no se puede cambiar su densidad base sin
+ * regresionar a todas. Por eso aquí hay render propio y libertad visual, y por
+ * eso **no** se reutiliza `MenuNavList`: heredaría los 44px que el diseño
+ * cambia.
+ *
+ * Lo que sí se reutiliza es el **contrato de datos** (`MenuNavListItem`), para
+ * que un consumidor pueda pasar exactamente la misma estructura de menú que ya
+ * le da a `MenuComponent`. Mismo dato, render distinto.
+ *
+ * Preserva `helpButton` y la barra inferior móvil, que el menú hecho a mano del
+ * diseño dejó caer. No pinta cabecera de comercio: en este diseño la identidad
+ * del comercio vive fuera del lateral.
+ */
+var MenuClaw = React.memo(function MenuClaw(_a) {
+    var _b, _c;
+    var userInfo = _a.userInfo, helpButton = _a.helpButton, menuItems = _a.menuItems, history = _a.history, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
+    var selectedKey = React.useMemo(function () {
+        var _a, _b, _c;
+        if (menuItems.selectedPath) {
+            return ((_b = (_a = getSelectedKeyFromPath(menuItems.selectedPath, menuItems.items)) !== null && _a !== void 0 ? _a : menuItems.selectedKey) !== null && _b !== void 0 ? _b : "");
+        }
+        return (_c = menuItems.selectedKey) !== null && _c !== void 0 ? _c : "";
+    }, [menuItems.selectedPath, menuItems.selectedKey, menuItems.items]);
+    var userName = (typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) === "string" && userInfo.name.trim()) ||
+        t.notDefinedLabel;
+    var userRole = (typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) === "string" && userInfo.role.trim()) ||
+        t.notDefinedLabel;
+    var helpSection = React.useMemo(function () {
+        if (helpButton == null) {
+            return null;
+        }
+        var title = typeof helpButton.title === "string" ? helpButton.title.trim() : "";
+        var redirect = typeof helpButton.redirect === "string" ? helpButton.redirect.trim() : "";
+        if (!(title && redirect)) {
+            return null;
+        }
+        return { title: title, redirect: redirect };
+    }, [helpButton]);
+    var historyConfig = React.useMemo(function () {
+        var items = Array.isArray(history === null || history === void 0 ? void 0 : history.items) ? history.items : [];
+        var rawCount = history === null || history === void 0 ? void 0 : history.initialVisibleCount;
+        var initialVisibleCount = typeof rawCount === "number" && Number.isFinite(rawCount) && rawCount > 0
+            ? Math.floor(rawCount)
+            : DEFAULT_HISTORY_VISIBLE_COUNT;
+        return { items: items, initialVisibleCount: initialVisibleCount };
+    }, [history]);
+    var bottomBarItems = React.useMemo(function () {
+        if (!mobileBottomBarGroupKey) {
+            return [];
+        }
+        var group = menuItems.items.find(function (item) { return item.key === mobileBottomBarGroupKey; });
+        if (!(group === null || group === void 0 ? void 0 : group.items)) {
+            return [];
+        }
+        return group.items.filter(function (item) { return item.icon; });
+    }, [mobileBottomBarGroupKey, menuItems.items]);
+    var handleSidebarClose = React.useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+    }, [onOpenSidebarChange]);
+    var handleSidebarOpen = React.useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
+    }, [onOpenSidebarChange]);
+    var handleCollapseToggle = React.useCallback(function () {
+        setIsCollapsed(function (prev) { return !prev; });
+    }, []);
+    var handleHelpClick = React.useCallback(function () {
+        if (helpSection) {
+            window.open(helpSection.redirect, "_blank");
+        }
+    }, [helpSection]);
+    var handleMenuSelect = React.useCallback(function (key, href) {
+        var _a;
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+        (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "sidebar");
+    }, [onOpenSidebarChange, menuItems.onSelect]);
+    // Barra inferior: cerrar el lateral y avisar con source 'bottomBar' para que
+    // la app no lo reabra al navegar.
+    var handleBottomBarSelect = React.useCallback(function (key, href) {
+        var _a;
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+        (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
+    }, [onOpenSidebarChange, menuItems.onSelect]);
+    var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar ? (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-claw-overlay ".concat(isOpenSidebar ? "menu-claw-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: react.cn("menu-claw", isCollapsed ? "menu-claw--collapsed" : "menu-claw--expanded", isOpenSidebar && "menu-claw--mobile-open"), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "menu-claw__content", children: [jsxRuntime.jsxs("div", { className: react.cn("flex items-center", isCollapsed ? "justify-center" : "justify-end"), children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "block cursor-pointer sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.toggleSidebarAriaLabel, onClick: handleCollapseToggle, className: "hidden h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-default-500 transition-colors hover:bg-default-100 sm:flex", children: jsxRuntime.jsx(IconComponent, { icon: isCollapsed
+                                            ? "solar:alt-arrow-right-linear"
+                                            : "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className: react.cn("flex items-center py-3", isCollapsed ? "justify-center gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "sm", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), !isCollapsed ? (jsxRuntime.jsxs("div", { className: "menu-claw-collapsible flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "truncate text-small font-semibold text-foreground", children: userName }), jsxRuntime.jsx("p", { className: "truncate text-tiny text-default-400", children: userRole })] })) : null] }), jsxRuntime.jsx(MenuClawHistoryPanel, { items: historyConfig.items, initialVisibleCount: historyConfig.initialVisibleCount, onNewConversation: history === null || history === void 0 ? void 0 : history.onNewConversation, isCollapsed: isCollapsed, title: t.historyTitle, newLabel: t.historyNewLabel, showMoreLabel: t.historyShowMoreLabel, showLessLabel: t.historyShowLessLabel, onBeforeSelect: handleSidebarClose }), jsxRuntime.jsx("nav", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: menuItems.items.map(function (group) {
+                                var _a;
+                                return (jsxRuntime.jsxs("div", { className: "mb-2", children: [group.title && !isCollapsed ? (jsxRuntime.jsx("p", { className: "px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: group.title })) : null, jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: ((_a = group.items) !== null && _a !== void 0 ? _a : []).map(function (item) {
+                                                var _a;
+                                                var isActive = !!item.key && item.key === selectedKey;
+                                                return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: function () { return handleMenuSelect(item.key, item.href); }, className: react.cn("flex min-h-9 w-full items-center rounded-lg px-2 py-1.5 text-left text-small transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", isCollapsed ? "justify-center" : "gap-3", isActive
+                                                            ? "bg-default-100 font-medium text-foreground"
+                                                            : "text-default-600 hover:bg-default-100", item.className), children: [item.icon || item.startContent ? (jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-500 [&_svg]:h-5 [&_svg]:w-5", children: item.icon ? (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", "aria-hidden": true })) : (item.startContent) })) : null, !isCollapsed ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "menu-claw-collapsible flex-1 truncate", children: item.title }), (_a = item.endContent) !== null && _a !== void 0 ? _a : null] })) : null] }) }, item.key));
+                                            }) })] }, group.key));
+                            }) }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col items-center justify-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: "text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed ? (jsxRuntime.jsx("span", { className: "menu-claw-collapsible truncate", children: helpSection.title })) : null }) })) : null] }) })] }));
 });
 
 var StepIndicator = function (_a) {
@@ -9312,6 +9511,7 @@ exports.InputPassword = InputPassword;
 exports.Kanban = Kanban;
 exports.KanbanCard = KanbanCard;
 exports.KanbanColumn = KanbanColumn;
+exports.MenuClaw = MenuClaw;
 exports.MenuComponent = MenuComponent;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;