@beweco/aurora-ui 0.6.65 → 0.6.67

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
@@ -3492,7 +3492,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",
@@ -3510,7 +3510,7 @@ var MenuComponent = React.memo(function Menu(_a) {
     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 _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) {
@@ -3689,6 +3689,167 @@ var MenuComponent = React.memo(function Menu(_a) {
                                                 : "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] }) })] }));
 });
 
+/**
+ * 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) {
     var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
     var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
@@ -6445,10 +6606,17 @@ var COLOR_BODY = "#c7d2fe";
 var COLOR_STROKE = "#4338ca";
 var COLOR_MEDIAN = "#1e3a8a";
 var COLOR_AXIS = "#6b7280";
+/** Desplazamiento vertical del rótulo del grupo bajo el eje X. */
+var GROUP_LABEL_DY = 16;
+/** Desplazamiento vertical de la línea `n=` (bajo el rótulo del grupo). */
+var SAMPLE_SIZE_DY = 30;
+/** Aire por debajo de la línea `n=` que la superficie de hover también cubre. */
+var HOVER_PADDING = 4;
 var defaultTranslations$1 = {
     emptyState: "Sin datos de distribución",
     sampleSizeLabel: "n",
     outliersLabel: "outliers",
+    pointsLabel: "puntos",
 };
 function formatTick(value, factor, unit) {
     var scaled = value * factor;
@@ -6496,9 +6664,22 @@ function ViolinPlot(_a) {
     var fmt = formatValue !== null && formatValue !== void 0 ? formatValue : (function (v) { return formatTick(v, factor, unit); });
     var columnWidth = (VIEW_WIDTH - marginLeft - MARGIN.right) / groups.length;
     var axisTitle = unit ? "".concat(valueLabel, " (").concat(unit, ")") : valueLabel;
+    /**
+     * Texto del tooltip de columna (TECH-1768): de qué grupo es y cuántos puntos tiene.
+     *
+     * El `nExcluded` va en el MISMO tooltip cuando lo hay: sin él, `n` se leería como "puntos
+     * dibujados" y no lo son — los outliers recortados están contados en `n` pero fuera del lienzo,
+     * y la diferencia importa justo en los grupos con cola larga.
+     */
+    var tooltipFor = function (group) {
+        var base = "".concat(group.label, " \u00B7 ").concat(group.n, " ").concat(t.pointsLabel);
+        return group.nExcluded > 0
+            ? "".concat(base, " \u00B7 \u2212").concat(group.nExcluded, " ").concat(t.outliersLabel)
+            : base;
+    };
     return (jsxRuntime.jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("line", { x1: marginLeft, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsxRuntime.jsx("text", { x: marginLeft - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), jsxRuntime.jsx("text", { transform: "translate(12 ".concat(plotTop + plotHeight / 2, ") rotate(-90)"), textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: axisTitle }), groupLabel ? (jsxRuntime.jsx("text", { x: marginLeft + (VIEW_WIDTH - marginLeft - MARGIN.right) / 2, y: height - 6, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: groupLabel })) : null, groups.map(function (group, i) {
                 var centerX = marginLeft + columnWidth * (i + 0.5);
-                return (jsxRuntime.jsxs("g", { children: [shouldFallback(group, minSampleForViolin) ? (jsxRuntime.jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsxRuntime.jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsxRuntime.jsx("text", { x: centerX, y: plotBottom + 16, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxRuntime.jsxs("text", { x: centerX, y: plotBottom + 30, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
+                return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("title", { children: tooltipFor(group) }), jsxRuntime.jsx("rect", { x: centerX - columnWidth / 2, y: plotTop, width: columnWidth, height: plotBottom - plotTop + SAMPLE_SIZE_DY + HOVER_PADDING, fill: "transparent", pointerEvents: "all" }), shouldFallback(group, minSampleForViolin) ? (jsxRuntime.jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsxRuntime.jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsxRuntime.jsx("text", { x: centerX, y: plotBottom + GROUP_LABEL_DY, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxRuntime.jsxs("text", { x: centerX, y: plotBottom + SAMPLE_SIZE_DY, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
                                     ? " \u00B7 \u2212".concat(group.nExcluded, " ").concat(t.outliersLabel)
                                     : ""] })] }, group.label));
             })] }));
@@ -9292,6 +9473,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;

package/dist/index.esm.js

@@ -3012,12 +3012,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 (jsx("header", { className: "header__container", children: jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxs("div", { className: "flex items-center gap-4", children: [showMenuButton && (jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick })), breadcrumbs && breadcrumbs.length > 0 && (jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxs("div", { className: "flex items-center gap-4", children: [extraContent, jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
@@ -3141,7 +3141,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",
 };
@@ -3175,7 +3175,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
@@ -3493,7 +3493,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",
@@ -3511,7 +3511,7 @@ var MenuComponent = React.memo(function Menu(_a) {
     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 _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) {
@@ -3690,6 +3690,167 @@ var MenuComponent = React.memo(function Menu(_a) {
                                                 : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(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" }), jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }), jsxs("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6 relative"), children: [!isCollapsed && showScrollArrows && (jsxs(Fragment, { children: [scrollState.canScrollUp && (jsxs(Fragment, { children: [jsx("div", { className: "menu-scroll-fade menu-scroll-fade--up", "aria-hidden": "true" }), jsx("button", { type: "button", "aria-label": t.scrollUpAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--up", onClick: handleScrollUp, children: jsx(IconComponent, { icon: "solar:alt-arrow-up-outline", size: "md", "aria-hidden": true }) })] })), scrollState.canScrollDown && (jsxs(Fragment, { children: [jsx("div", { className: "menu-scroll-fade menu-scroll-fade--down", "aria-hidden": "true" }), jsx("button", { type: "button", "aria-label": t.scrollDownAriaLabel, className: "menu-scroll-chevron menu-scroll-chevron--down", onClick: handleScrollDown, children: jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", size: "md", "aria-hidden": true }) })] }))] })), 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: jsx(MenuNavList, { defaultSelectedKey: selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, selectedKey) })] }), helpSection ? (jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button$1, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (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 = useMemo(function () { return (isExpanded ? items : items.slice(0, initialVisibleCount)); }, [isExpanded, items, initialVisibleCount]);
+    var hasHiddenItems = items.length > initialVisibleCount;
+    var handleToggleExpand = useCallback(function () {
+        setIsExpanded(function (prev) { return !prev; });
+    }, []);
+    var handleItemPress = 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 (jsxs("div", { className: "flex max-h-[40%] min-h-0 flex-col gap-2 pb-3", children: [onNewConversation ? (jsxs("button", { type: "button", title: newLabel, onClick: onNewConversation, className: 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: [jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: jsx(IconComponent, { icon: "solar:pen-new-square-linear", size: "md", "aria-hidden": true }) }), !isCollapsed ? (jsx("span", { className: "menu-claw-collapsible truncate", children: newLabel })) : null] })) : null, !isCollapsed && items.length > 0 ? (jsxs(Fragment, { children: [jsx("p", { className: "shrink-0 px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: title }), 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 (jsx("li", { children: jsxs("button", { type: "button", disabled: item.disabled, "aria-disabled": item.disabled, title: item.title, onClick: function () { return handleItemPress(item); }, className: 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: [jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-400", children: jsx(IconComponent, { icon: "solar:chat-round-dots-linear", size: "md", "aria-hidden": true }) }), jsxs("span", { className: "flex min-w-0 flex-col", children: [jsx("span", { className: "truncate", children: item.title }), item.meta ? (jsx("span", { className: "truncate text-tiny text-default-400", children: item.meta })) : null] })] }) }, item.id)); }) }), hasHiddenItems ? (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: [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 = 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 = 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 = 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 = 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 = useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+    }, [onOpenSidebarChange]);
+    var handleSidebarOpen = useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
+    }, [onOpenSidebarChange]);
+    var handleCollapseToggle = useCallback(function () {
+        setIsCollapsed(function (prev) { return !prev; });
+    }, []);
+    var handleHelpClick = useCallback(function () {
+        if (helpSection) {
+            window.open(helpSection.redirect, "_blank");
+        }
+    }, [helpSection]);
+    var handleMenuSelect = 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 = 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 (jsxs(Fragment, { children: [showBottomBar ? (jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-claw-overlay ".concat(isOpenSidebar ? "menu-claw-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsx("div", { className: cn("menu-claw", isCollapsed ? "menu-claw--collapsed" : "menu-claw--expanded", isOpenSidebar && "menu-claw--mobile-open"), "aria-hidden": !isOpenSidebar, children: jsxs("div", { className: "menu-claw__content", children: [jsxs("div", { className: cn("flex items-center", isCollapsed ? "justify-center" : "justify-end"), children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "block cursor-pointer sm:hidden", onClick: handleSidebarClose }), 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: jsx(IconComponent, { icon: isCollapsed
+                                            ? "solar:alt-arrow-right-linear"
+                                            : "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxs("div", { className: cn("flex items-center py-3", isCollapsed ? "justify-center gap-0" : "gap-3"), children: [jsx(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 ? (jsxs("div", { className: "menu-claw-collapsible flex min-w-0 flex-col overflow-hidden", children: [jsx("p", { className: "truncate text-small font-semibold text-foreground", children: userName }), jsx("p", { className: "truncate text-tiny text-default-400", children: userRole })] })) : null] }), 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 }), 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 (jsxs("div", { className: "mb-2", children: [group.title && !isCollapsed ? (jsx("p", { className: "px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: group.title })) : null, 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 (jsx("li", { children: jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: function () { return handleMenuSelect(item.key, item.href); }, className: 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 ? (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 ? (jsx(IconComponent, { icon: item.icon, size: "md", "aria-hidden": true })) : (item.startContent) })) : null, !isCollapsed ? (jsxs(Fragment, { children: [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 ? (jsx("div", { className: "mt-auto flex flex-col items-center justify-center", children: jsx(Button$1, { fullWidth: true, className: "text-default-500 data-[hover=true]:text-default-600", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed ? (jsx("span", { className: "menu-claw-collapsible truncate", children: helpSection.title })) : null }) })) : null] }) })] }));
+});
+
 var StepIndicator = function (_a) {
     var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
     var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
@@ -6446,10 +6607,17 @@ var COLOR_BODY = "#c7d2fe";
 var COLOR_STROKE = "#4338ca";
 var COLOR_MEDIAN = "#1e3a8a";
 var COLOR_AXIS = "#6b7280";
+/** Desplazamiento vertical del rótulo del grupo bajo el eje X. */
+var GROUP_LABEL_DY = 16;
+/** Desplazamiento vertical de la línea `n=` (bajo el rótulo del grupo). */
+var SAMPLE_SIZE_DY = 30;
+/** Aire por debajo de la línea `n=` que la superficie de hover también cubre. */
+var HOVER_PADDING = 4;
 var defaultTranslations$1 = {
     emptyState: "Sin datos de distribución",
     sampleSizeLabel: "n",
     outliersLabel: "outliers",
+    pointsLabel: "puntos",
 };
 function formatTick(value, factor, unit) {
     var scaled = value * factor;
@@ -6497,9 +6665,22 @@ function ViolinPlot(_a) {
     var fmt = formatValue !== null && formatValue !== void 0 ? formatValue : (function (v) { return formatTick(v, factor, unit); });
     var columnWidth = (VIEW_WIDTH - marginLeft - MARGIN.right) / groups.length;
     var axisTitle = unit ? "".concat(valueLabel, " (").concat(unit, ")") : valueLabel;
+    /**
+     * Texto del tooltip de columna (TECH-1768): de qué grupo es y cuántos puntos tiene.
+     *
+     * El `nExcluded` va en el MISMO tooltip cuando lo hay: sin él, `n` se leería como "puntos
+     * dibujados" y no lo son — los outliers recortados están contados en `n` pero fuera del lienzo,
+     * y la diferencia importa justo en los grupos con cola larga.
+     */
+    var tooltipFor = function (group) {
+        var base = "".concat(group.label, " \u00B7 ").concat(group.n, " ").concat(t.pointsLabel);
+        return group.nExcluded > 0
+            ? "".concat(base, " \u00B7 \u2212").concat(group.nExcluded, " ").concat(t.outliersLabel)
+            : base;
+    };
     return (jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxs("g", { children: [jsx("line", { x1: marginLeft, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsx("text", { x: marginLeft - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), jsx("text", { transform: "translate(12 ".concat(plotTop + plotHeight / 2, ") rotate(-90)"), textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: axisTitle }), groupLabel ? (jsx("text", { x: marginLeft + (VIEW_WIDTH - marginLeft - MARGIN.right) / 2, y: height - 6, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: groupLabel })) : null, groups.map(function (group, i) {
                 var centerX = marginLeft + columnWidth * (i + 0.5);
-                return (jsxs("g", { children: [shouldFallback(group, minSampleForViolin) ? (jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsx("text", { x: centerX, y: plotBottom + 16, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxs("text", { x: centerX, y: plotBottom + 30, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
+                return (jsxs("g", { children: [jsx("title", { children: tooltipFor(group) }), jsx("rect", { x: centerX - columnWidth / 2, y: plotTop, width: columnWidth, height: plotBottom - plotTop + SAMPLE_SIZE_DY + HOVER_PADDING, fill: "transparent", pointerEvents: "all" }), shouldFallback(group, minSampleForViolin) ? (jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsx("text", { x: centerX, y: plotBottom + GROUP_LABEL_DY, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxs("text", { x: centerX, y: plotBottom + SAMPLE_SIZE_DY, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
                                     ? " \u00B7 \u2212".concat(group.nExcluded, " ").concat(t.outliersLabel)
                                     : ""] })] }, group.label));
             })] }));
@@ -9247,4 +9428,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isExactThemeColor, isGroupState, isHexColor, isSegmentationGroup, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };
+export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isExactThemeColor, isGroupState, isHexColor, isSegmentationGroup, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };

package/dist/types/components/menu-claw/MenuClaw.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import "./MenuClaw.scss";
+import type { MenuClawProps } from "./MenuClaw.types";
+/**
+ * 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.
+ */
+export declare const MenuClaw: React.FC<MenuClawProps>;
+//# sourceMappingURL=MenuClaw.d.ts.map

package/dist/types/components/menu-claw/MenuClaw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuClaw.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-claw/MenuClaw.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,kBAAkB,CAAC;AAkB5E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4S3C,CAAC"}