anteriority-ui 1.8.0 → 1.9.0

package/.verify-bundle.css

@@ -741,8 +741,9 @@
   margin: 0;
   padding: 0;
   gap: 4px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   min-width: 0;
+  overflow: hidden;
 }
 .Breadcrumbs_item {
   display: flex;
@@ -4760,6 +4761,79 @@
   min-width: 68px;
   padding: 20px 8px;
 }
+.Sidebar_sidebarWrapper {
+  display: flex;
+  height: 100%;
+}
+.Sidebar_mobileCloseBtn {
+  display: none;
+}
+.Sidebar_mobileBackdrop {
+  display: none;
+}
+@media (max-width: 767px) {
+  .Sidebar_sidebarWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1300;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+  .Sidebar_sidebarWrapper.Sidebar_mobileOpen {
+    transform: translateX(0);
+  }
+  .Sidebar_sidebarWrapper .Sidebar_sidebar {
+    height: 100%;
+    max-height: 100%;
+    width: 280px;
+    min-width: 280px;
+    max-width: 85vw;
+    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
+  }
+  .Sidebar_sidebarWrapper .Sidebar_sidebar.Sidebar_collapsed {
+    width: 280px;
+    min-width: 280px;
+    padding: 24px 16px;
+  }
+  .Sidebar_mobileCloseBtn {
+    display: inline-flex;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 1px solid #cbd5e1;
+    background-color: #ffffff;
+    color: #475569;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    z-index: 5;
+    transition: background-color 0.2s, color 0.2s;
+  }
+  .Sidebar_mobileCloseBtn:hover {
+    background-color: var(--sidebar-avatar-bg, #0d52f8);
+    color: #ffffff;
+    border-color: var(--sidebar-avatar-bg, #0d52f8);
+  }
+  .Sidebar_mobileBackdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.45);
+    z-index: 1299;
+  }
+  .Sidebar_sidebarWrapper .Sidebar_sidebarHeader {
+    padding-right: 36px;
+  }
+  .Sidebar_sidebarWrapper .Sidebar_toggleBtn {
+    display: none;
+  }
+}
 .Sidebar_sidebar.Sidebar_collapsed .Sidebar_sidebarHeader {
   justify-content: center;
   padding: 0;
@@ -5766,7 +5840,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
 }
 .TopBar_logoButton {
@@ -5780,6 +5854,36 @@
   color: inherit;
   flex-shrink: 0;
 }
+.TopBar_mobileMenuButton {
+  display: none;
+}
+@media (max-width: 767px) {
+  .TopBar_mobileMenuButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    border-radius: 6px;
+    border: 1px solid var(--topbar-action-border, #e2e8f0);
+    background-color: var(--topbar-action-bg, #f1f5f9);
+    color: var(--topbar-icon, #475569);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease,
+      border-color 0.15s ease;
+  }
+  .TopBar_mobileMenuButton:hover {
+    background-color: var(--topbar-action-hover-bg, var(--topbar-hover-bg, #e2e8f0));
+    color: var(--topbar-text, #0f172a);
+  }
+  .TopBar_mobileMenuButton:disabled {
+    cursor: default;
+  }
+}
 .TopBar_logoButton:disabled {
   cursor: default;
 }
@@ -5864,6 +5968,7 @@ button.TopBar_searchWrapper {
 }
 .TopBar_ctaButton {
   flex-shrink: 0;
+  white-space: nowrap;
 }
 .TopBar_searchIcon {
   position: absolute;
@@ -5914,12 +6019,13 @@ button.TopBar_searchWrapper {
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
 }
 .TopBar_actionBtnWrapper {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
 }
 .TopBar_actionBtn {
   border-radius: 6px !important;
@@ -5990,6 +6096,7 @@ button.TopBar_searchWrapper {
 .TopBar_userSection {
   position: relative;
   margin-left: 4px;
+  flex-shrink: 0;
 }
 .TopBar_userButton {
   display: inline-flex;
@@ -6053,6 +6160,10 @@ button.TopBar_searchWrapper {
 .TopBar_userMenuItemDanger:hover {
   background-color: #fef2f2;
 }
+.TopBar_mobileSearchButton,
+.TopBar_mobileActionsButton {
+  display: none;
+}
 @media (max-width: 1023px) {
   .TopBar_topbar {
     gap: 12px;
@@ -6066,18 +6177,103 @@ button.TopBar_searchWrapper {
   .TopBar_topbar {
     gap: 8px;
     padding: 10px 12px;
+    flex-wrap: wrap;
   }
   .TopBar_centerSection {
     display: none;
   }
+  .TopBar_leftSection {
+    min-width: 0;
+  }
   .TopBar_breadcrumbs,
   .TopBar_skeletonBreadcrumbs {
-    max-width: 50vw;
+    max-width: 38vw;
   }
   .TopBar_title {
-    max-width: 50vw;
+    max-width: 38vw;
+  }
+  .TopBar_rightSection {
+    gap: 2px;
+  }
+  .TopBar_ctaButton {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+  .TopBar_actionBtnWrapper,
+  .TopBar_actionsDivider {
+    display: none;
+  }
+  .TopBar_mobileSearchButton,
+  .TopBar_mobileActionsButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    border-radius: 6px;
+    border: 1px solid var(--topbar-action-border, #e2e8f0);
+    background-color: var(--topbar-action-bg, #f1f5f9);
+    color: var(--topbar-icon, #475569);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease,
+      border-color 0.15s ease;
+  }
+  .TopBar_mobileSearchButton:hover,
+  .TopBar_mobileActionsButton:hover {
+    background-color: var(--topbar-action-hover-bg, var(--topbar-hover-bg, #e2e8f0));
+    color: var(--topbar-text, #0f172a);
+  }
+  .TopBar_mobileActionsButtonWrapper {
+    position: relative;
+    display: inline-flex;
   }
 }
+.TopBar_mobileSearchOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2100;
+  background-color: var(--topbar-bg, #ffffff);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  box-sizing: border-box;
+}
+.TopBar_mobileSearchOverlayInput {
+  flex: 1;
+  min-width: 0;
+  height: 40px;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid var(--topbar-border, #e2e8f0);
+  background-color: var(--topbar-search-bg, #f8fafc);
+  color: var(--topbar-text, #0f172a);
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+}
+.TopBar_mobileSearchOverlayInput:focus {
+  border-color: var(--topbar-accent, #0ea5e9);
+}
+.TopBar_mobileSearchOverlayClose {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid var(--topbar-border, #e2e8f0);
+  background: transparent;
+  color: var(--topbar-text, #0f172a);
+  cursor: pointer;
+}
 @media (max-width: 479px) {
   .TopBar_topbar {
     gap: 6px;
@@ -6086,10 +6282,13 @@ button.TopBar_searchWrapper {
   .TopBar_breadcrumbs,
   .TopBar_skeletonBreadcrumbs,
   .TopBar_title {
-    max-width: 38vw;
+    max-width: 30vw;
   }
   .TopBar_actionsDivider {
-    margin: 0 4px;
+    margin: 0 2px;
+  }
+  .TopBar_actionBtn {
+    padding: 6px !important;
   }
 }
 
@@ -6117,6 +6316,65 @@ button.TopBar_searchWrapper {
   }
 }
 
+/* dist/screens/components/TopBar/components/MobileActionsPanel/index.module.css */
+.MobileActionsPanel_list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.MobileActionsPanel_item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #0f172a;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.MobileActionsPanel_item:hover {
+  background-color: #f1f5f9;
+}
+.MobileActionsPanel_item:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.MobileActionsPanel_item:disabled:hover {
+  background-color: transparent;
+}
+.MobileActionsPanel_itemIcon {
+  flex-shrink: 0;
+  color: #475569;
+}
+.MobileActionsPanel_itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.MobileActionsPanel_itemBadge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background-color: #ef4444;
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
 /* dist/screens/components/UserEditPopover/index.module.css */
 .UserEditPopover_popoverPaper {
   padding: 16px;

package/.verify-bundle.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/.verify-bundle.js
-size: 53948362 bytes
-sha256: 17a35cbb6ec5561afc8b588687b284f34b9adb6826713d2aa9aedac76c2b9515
+size: 53957731 bytes
+sha256: 6af1d4bc31a21cecb25245c9bffe0a07a9c1e3d12889ff76316da6731efc2921

package/AnteriorityUI.md

@@ -2902,6 +2902,8 @@ import Sidebar from 'screens/components/Sidebar/index';
 
 **Notas:** Persiste el estado colapsado en `localStorage` bajo la clave `sidebar_collapsed`. Los subitems no soportan drag & drop (`onReorderItems`), menú contextual (`onItemEdit`/`onItemDelete`/`onItemPin`/`onItemCollaborators`) ni colapsado individual persistido — solo navegación simple vía `onSelect`. Cuando el sidebar está colapsado (`isCollapsed`), los grupos con `subItems` se muestran colapsados y sin chevron (igual que cualquier item simple, con tooltip); hay que expandir el sidebar para ver/navegar los subitems. `onSearch`/`filterMenuGroups` matchea por `label` del item padre o de cualquiera de sus `subItems`, pero si matchea, se muestra el item completo con **todos** sus subitems (no solo el que matcheó).
 
+**Responsive (mobile):** por debajo de 767px de viewport, el sidebar se comporta como un drawer: queda oculto fuera de pantalla y aparece un botón flotante con ícono de hamburguesa (esquina superior izquierda) para abrirlo. Al abrirse, se desliza como overlay a ancho completo (280px, hasta 85vw) sobre un backdrop oscuro; se cierra al tocar el backdrop, al presionar Escape, al tocar la X del propio drawer, o automáticamente al seleccionar un item (`onSelect`). El botón de colapsar (`collapsible`) se oculta en este modo, ya que no aplica a un drawer full-width. No requiere ninguna prop nueva — la detección de mobile es automática vía `matchMedia`.
+
 ---
 
 ### Skeleton
@@ -3530,6 +3532,8 @@ import TopBar from '../TopBar/index'; // export default
 
 **Notas:** El menú de usuario se renderiza vía `createPortal` a `document.body` (mismo patrón que el menú de usuario de `Sidebar`), posicionado contra el botón del avatar. `actions` son completamente genéricas — no asume ningún set fijo de íconos (notificaciones, mensajes, ayuda, etc. quedan a elección del consumidor). El atajo de teclado Ctrl/Cmd+K para abrir el `CommandPalette` (`useCommandPaletteShortcut` en `utils.js`) usa el hook genérico `useKeyboardShortcut` (`common/hooks/useKeyboardShortcut.js`), reutilizable para registrar cualquier otro atajo global (`{ key, ctrlOrMeta, shift, alt, enabled, onTrigger }`) sin reimplementar el listener de teclado a mano en cada componente nuevo.
 
+**Responsive:** `leftSection` (logo + breadcrumb/título) se encoge primero y trunca con ellipsis; `rightSection` (acciones + divisor + avatar + `ctaButton`) nunca se encoge, para que los botones nunca queden apretados ni se superpongan entre sí. Por debajo de 1023px el buscador central se angosta, por debajo de 767px se oculta por completo (el consumidor puede ofrecer una lupa en `actions` para ese breakpoint) y el header pasa a `flex-wrap` como red de seguridad si aun así no entra todo en una fila; por debajo de 479px se reducen aún más los paddings de los botones de acción y el ancho máximo de breadcrumb/título.
+
 ---
 
 ### UserEditPopover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anteriority-ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Librería interna de componentes React (UI) construida sobre MUI, lucide-react y CSS Modules.",
   "main": "index.js",
   "license": "ISC",

package/screens/components/Breadcrumbs/index.module.css

@@ -11,8 +11,9 @@
   margin: 0;
   padding: 0;
   gap: 4px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   min-width: 0;
+  overflow: hidden;
 }
 
 .item {

package/screens/components/Sidebar/constants.js

@@ -12,7 +12,8 @@ const TEXTS = {
   leaveItem: "Salir",
   pinItem: "Fijar",
   unpinItem: "Desfijar",
-  collaboratorsItem: "Colaboradores"
+  collaboratorsItem: "Colaboradores",
+  closeMobileMenu: "Cerrar men\xFA"
 };
 export {
   TEXTS