anteriority-ui 1.4.0 → 1.5.0

package/.verify-bundle.css

@@ -1187,9 +1187,25 @@
   background-color: #ffffff;
   z-index: 10;
 }
+.Frame_skeletonGroup {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
 .Frame_hiddenContent {
   visibility: hidden;
 }
+.Frame_contentWrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+}
+.Frame_scrollContent {
+  display: flex;
+  flex-direction: column;
+}
 
 /* dist/screens/components/Loading/index.module.css */
 .Loading_loadingContainer {
@@ -1393,6 +1409,108 @@
   transform: translateY(-4px);
 }
 
+/* dist/screens/components/Skeleton/index.module.css */
+.Skeleton_skeleton {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: rgba(128, 128, 128, 0.18);
+}
+.Skeleton_skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.35) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: Skeleton_skeletonSweep 1.6s ease-in-out infinite;
+}
+@keyframes Skeleton_skeletonSweep {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* dist/screens/components/ScrollBar/index.module.css */
+.ScrollBar_root {
+  position: relative;
+  width: 100%;
+}
+.ScrollBar_scrollArea {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ScrollBar_reserveTrackSpace {
+  padding-right: 14px;
+}
+.ScrollBar_scrollArea::-webkit-scrollbar {
+  display: none;
+}
+.ScrollBar_trackVertical {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  bottom: 4px;
+  width: 6px;
+  border-radius: 999px;
+  background-color: rgba(148, 163, 184, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 5;
+}
+.ScrollBar_trackHorizontal {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  bottom: 3px;
+  height: 8px;
+  border-radius: 999px;
+  background-color: rgba(148, 163, 184, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 5;
+}
+.ScrollBar_trackVisible {
+  opacity: 1;
+}
+.ScrollBar_thumbVertical {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  border-radius: 999px;
+  background-color: rgba(100, 116, 139, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background-color 0.15s ease;
+}
+.ScrollBar_thumbHorizontal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 999px;
+  background-color: rgba(100, 116, 139, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background-color 0.15s ease;
+}
+.ScrollBar_thumbVertical:hover,
+.ScrollBar_thumbVertical:active,
+.ScrollBar_thumbHorizontal:hover,
+.ScrollBar_thumbHorizontal:active {
+  background-color: rgba(71, 85, 105, 0.75);
+}
+
 /* dist/screens/components/MarkdownContent/index.module.css */
 .MarkdownContent_markdown {
   font-size: 0.88rem;
@@ -1598,6 +1716,18 @@
   border-radius: 8px;
   box-sizing: border-box;
   animation: Callout_calloutSlideIn 0.2s ease-out;
+  text-decoration: none;
+}
+.Callout_clickable {
+  cursor: pointer;
+  transition: filter 0.15s ease, box-shadow 0.15s ease;
+}
+.Callout_clickable:hover {
+  filter: brightness(0.97);
+}
+.Callout_clickable:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 .Callout_icon {
   display: inline-flex;
@@ -1617,6 +1747,11 @@
 .Callout_markdownBody {
   font-size: 0.85rem;
 }
+.Callout_timestamp {
+  font-size: 0.72rem;
+  opacity: 0.7;
+  margin-top: 4px;
+}
 .Callout_actions {
   display: flex;
   flex-wrap: wrap;
@@ -3292,6 +3427,13 @@
   white-space: normal !important;
   overflow-wrap: anywhere !important;
 }
+.IconCatalog_packBadge {
+  font-size: 0.65rem;
+  color: var(--color-text-muted, #64748b);
+  background: var(--color-border, #e2e8f0);
+  border-radius: 999px;
+  padding: 0.1rem 0.5rem;
+}
 .IconCatalog_empty {
   font-size: 0.9rem;
   color: var(--color-text-muted, #64748b);
@@ -3612,6 +3754,33 @@
   margin-top: 2px;
 }
 
+/* dist/screens/components/NotificationsPanel/index.module.css */
+.NotificationsPanel_panel {
+  width: 360px;
+  padding: 1.5rem;
+}
+.NotificationsPanel_list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 0;
+}
+.NotificationsPanel_emptyMessage {
+  margin: 1rem 0;
+  text-align: center;
+  font-size: 0.85rem;
+  color: #94a3b8;
+}
+.NotificationsPanel_item {
+  align-items: flex-start;
+}
+.NotificationsPanel_itemActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
 /* dist/screens/components/ToggleCard/index.module.css */
 .ToggleCard_toggleContainer {
   background: #ffffff;
@@ -3859,104 +4028,6 @@
   }
 }
 
-/* dist/screens/components/ScrollBar/index.module.css */
-.ScrollBar_root {
-  position: relative;
-  width: 100%;
-}
-.ScrollBar_scrollArea {
-  width: 100%;
-  height: 100%;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.ScrollBar_scrollArea::-webkit-scrollbar {
-  display: none;
-}
-.ScrollBar_trackVertical {
-  position: absolute;
-  top: 4px;
-  right: 3px;
-  bottom: 4px;
-  width: 8px;
-  border-radius: 999px;
-  background-color: rgba(148, 163, 184, 0.12);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: 5;
-}
-.ScrollBar_trackHorizontal {
-  position: absolute;
-  left: 4px;
-  right: 4px;
-  bottom: 3px;
-  height: 8px;
-  border-radius: 999px;
-  background-color: rgba(148, 163, 184, 0.12);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: 5;
-}
-.ScrollBar_trackVisible {
-  opacity: 1;
-}
-.ScrollBar_thumbVertical {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  border-radius: 999px;
-  background-color: rgba(100, 116, 139, 0.45);
-  cursor: pointer;
-  pointer-events: auto;
-  transition: background-color 0.15s ease;
-}
-.ScrollBar_thumbHorizontal {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  border-radius: 999px;
-  background-color: rgba(100, 116, 139, 0.45);
-  cursor: pointer;
-  pointer-events: auto;
-  transition: background-color 0.15s ease;
-}
-.ScrollBar_thumbVertical:hover,
-.ScrollBar_thumbVertical:active,
-.ScrollBar_thumbHorizontal:hover,
-.ScrollBar_thumbHorizontal:active {
-  background-color: rgba(71, 85, 105, 0.75);
-}
-
-/* dist/screens/components/Skeleton/index.module.css */
-.Skeleton_skeleton {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  background: rgba(128, 128, 128, 0.18);
-}
-.Skeleton_skeleton::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background:
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.35) 50%,
-      rgba(255, 255, 255, 0) 100%);
-  animation: Skeleton_skeletonSweep 1.6s ease-in-out infinite;
-}
-@keyframes Skeleton_skeletonSweep {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 /* dist/screens/components/Sidebar/index.module.css */
 .Sidebar_sidebar {
   height: 100vh;
@@ -4178,6 +4249,67 @@
 .Sidebar_sidebarItemBtn:hover .Sidebar_icon {
   color: var(--sidebar-text-active) !important;
 }
+.Sidebar_itemWithSubItems {
+  display: flex;
+  flex-direction: column;
+}
+.Sidebar_expandChevron {
+  flex-shrink: 0;
+  color: var(--sidebar-text-muted);
+  opacity: 0.7;
+  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+}
+.Sidebar_expandChevronOpen {
+  transform: rotate(180deg);
+  opacity: 1;
+}
+.Sidebar_expandParentOpen {
+  color: var(--sidebar-text-active) !important;
+  font-weight: 600 !important;
+}
+.Sidebar_expandParentOpen .Sidebar_icon {
+  color: var(--sidebar-text-active) !important;
+}
+.Sidebar_subItemListWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  margin-top: 0;
+  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.Sidebar_subItemListWrapperOpen {
+  grid-template-rows: 1fr;
+  margin-top: 2px;
+}
+.Sidebar_subItemList {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-left: 29px;
+  padding: 2px 0 2px 14px;
+  border-left: 1.5px solid var(--sidebar-border);
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+.Sidebar_subItemListWrapperOpen .Sidebar_subItemList {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.22s ease 0.08s, transform 0.22s ease 0.08s;
+}
+.Sidebar_subItemBtn {
+  padding: 7px 10px !important;
+  min-height: 0 !important;
+}
+.Sidebar_subItemBtn .Sidebar_label {
+  font-size: 0.82rem;
+  font-weight: 500;
+}
+.Sidebar_subItemBtn.Sidebar_activeBtn {
+  background-color: var(--sidebar-subitem-active-bg, #e0edff) !important;
+  color: var(--sidebar-subitem-active-text, #1d4ed8) !important;
+  font-weight: 600 !important;
+}
 .Sidebar_activeBtn {
   background-color: var(--sidebar-hover-bg) !important;
   color: var(--sidebar-text-active) !important;

package/.verify-bundle.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/.verify-bundle.js
-size: 53377441 bytes
-sha256: 41494ab04c027fb299fd3a89b3a7d4e147a0ba85593a36164011b5221a81f68f
+size: 53387707 bytes
+sha256: 95636eacde0da07e512202f5b6d0bb1bf9bd83b31d3484db025dc95b3935b7cf

package/AnteriorityUI.md

@@ -440,7 +440,7 @@ En modo `range`, la selección soporta dos gestos, intercambiables: (1) click en
 
 ### Callout
 
-Caja de aviso/notificación (advertencia, error, éxito, info, nota neutral) con ícono y paleta de color por `variant`, título opcional y cuerpo en Markdown completo (listas, negrita, links, bloques de código, tablas, etc. — reutiliza `MarkdownContent` por dentro). Pensado para usarse suelto en una vista, dentro de `DrawPanel`/`Frame`, o como notificación.
+Caja de aviso/notificación (advertencia, error, éxito, info, nota neutral) con ícono y paleta de color por `variant`, título opcional, timestamp opcional y cuerpo en Markdown completo (listas, negrita, links, bloques de código, tablas, etc. — reutiliza `MarkdownContent` por dentro). Pensado para usarse suelto en una vista, dentro de `DrawPanel`/`Frame`, o como notificación (es el building block que usa `NotificationsPanel` para cada item de la lista). Opcionalmente clickeable/navegable vía `onClick`/`href`.
 
 **Import:**
 ```jsx
@@ -461,10 +461,13 @@ import Callout from '../Callout/index'; // export default
 | `variant` | `'info'` \| `'warning'` \| `'danger'` \| `'success'` \| `'neutral'` | `'info'` | Determina paleta (fondo/borde/texto/ícono) e ícono por default. |
 | `title` | string | — | Título en negrita sobre el cuerpo. |
 | `children` | string | — | Cuerpo en Markdown (mismo formato que `MarkdownContent`). |
+| `timestamp` | string | — | Texto pequeño (ej. `"Hace 5 minutos"`) mostrado debajo del cuerpo. |
 | `icon` | component | — | Reemplaza el ícono default del `variant`. |
-| `actions` | node | — | Contenido (ej. botones) renderizado debajo del cuerpo. |
-| `onClose` | `function()` | — | Si se define, muestra un botón de cerrar (×) arriba a la derecha. |
+| `actions` | node | — | Contenido (ej. botones) renderizado debajo del cuerpo. Los clicks dentro de `actions` no disparan `onClick`/`href` del Callout (`stopPropagation`). |
+| `onClose` | `function()` | — | Si se define, muestra un botón de cerrar (×) arriba a la derecha. Su click tampoco dispara `onClick`/`href`. |
 | `closeLabel` | string | `'Cerrar aviso'` | `aria-label` del botón de cerrar. |
+| `onClick` | `function(event)` | — | Si se define (y no hay `href`), el Callout entero se vuelve clickeable: se renderiza como `<div role="button" tabIndex={0}>` con soporte de teclado (Enter/Espacio) y cursor pointer. |
+| `href` | string | — | Si se define, el Callout se renderiza como `<a href={href}>` (navegación nativa: Ctrl+click, abrir en pestaña nueva, etc.). Tiene prioridad sobre `onClick` como tag, pero `onClick` igual se dispara si también se pasa. |
 | `bgColor` | string | — | Sobrescribe el color de fondo de la paleta del `variant`. |
 | `textColor` | string | — | Sobrescribe el color del título y del cuerpo (markdown incluido). |
 | `iconColor` | string | — | Sobrescribe el color del ícono. |
@@ -1123,7 +1126,7 @@ import { FormCard, FormInput, FormTextArea } from '../FormControls/index'; // na
 
 ### Frame
 
-Contenedor tipo "card" con título, ícono, descripción y estado de error/carga opcionales. Puede renderizarse inline o como modal (overlay + portal).
+Contenedor tipo "card" con título, ícono, descripción y estado de error/carga opcionales. Puede renderizarse inline o como modal (overlay + portal). Opcionalmente scrollea su contenido internamente (vía `ScrollBar`, sin barra de scroll nativa) cuando el contenido supera un alto máximo.
 
 **Import:**
 ```jsx
@@ -1147,7 +1150,12 @@ import Frame from '../Frame/index'; // export default, archivo index.jsx
 | className | string | `''` | Clase(s) CSS adicionales. |
 | isModal | boolean | `false` | Si es `true`, renderiza el frame como overlay modal vía `createPortal` a `document.body`. |
 | onClose | function | — | Se ejecuta al hacer click en el overlay (solo aplica con `isModal`). |
-| isLoading | boolean | `false` | Muestra un overlay con `Loading` (`size="giant"`) y oculta el contenido. |
+| isLoading | boolean | `false` | Muestra un overlay sobre el contenido (oculto con `visibility: hidden`, no desmontado) mientras carga. El tipo de overlay lo decide `loadingType`. |
+| loadingType | `'spinner'` \| `'skeleton'` | `'spinner'` | Con `isLoading`: `'spinner'` muestra `Loading` (`size="giant"`); `'skeleton'` muestra `skeletonCount` barras `Skeleton` genéricas apiladas. |
+| loadingVariant | string | `'default'` | Con `loadingType="spinner"`, se pasa tal cual como prop `variant` a `Loading` (`'default'` \| `'bars'` \| `'bounce'` \| `'box'`). |
+| skeletonCount | number | `3` | Con `loadingType="skeleton"`, cantidad de barras `Skeleton` a mostrar. |
+| scrollable | boolean | `false` | Si es `true`, envuelve `children` con `ScrollBar` (scroll interno sin barra nativa, thumb delgado visible solo on hover/scroll). |
+| maxHeight | number \| string | — | Con `scrollable`, alto máximo del área scrolleable (pasa a `ScrollBar` como `maxHeight`). Sin `maxHeight`, el contenido crece libremente (el `ScrollBar` no limita el alto por sí solo). |
 | bgColor | string | — | Color de fondo del frame (`--frame-bg`). |
 | iconColor | string | — | Color del contenedor del ícono (`--frame-icon`). |
 | descriptionBgColor | string | — | Color de fondo del texto de descripción (`--frame-description-bg`). |
@@ -1161,8 +1169,20 @@ import Frame from '../Frame/index'; // export default, archivo index.jsx
   <p>Este contenido queda oculto mientras carga.</p>
 </Frame>
 ```
+```jsx
+// Overlay tipo skeleton en vez del spinner default
+<Frame title="Cargando datos" isLoading loadingType="skeleton" skeletonCount={4}>
+  <p>Este contenido queda oculto mientras carga.</p>
+</Frame>
+```
+```jsx
+// Lista larga con scroll interno (sin barra de scroll nativa)
+<Frame title="Lista larga" scrollable maxHeight={220}>
+  {items.map((item) => <p key={item.id}>{item.label}</p>)}
+</Frame>
+```
 
-**Notas:** `isModal` renderiza vía `createPortal` sobre `document.body` con un overlay que cierra al hacer click fuera (así lo usa internamente `HoursPicker`). Depende del componente `Loading` para el estado `isLoading`.
+**Notas:** `isModal` renderiza vía `createPortal` sobre `document.body` con un overlay que cierra al hacer click fuera (así lo usa internamente `HoursPicker`). El estado `isLoading` depende de `Loading` (modo `'spinner'`, default) o de `Skeleton` (modo `'skeleton'`) — el skeleton es genérico (barras simples) porque `Frame` no conoce la forma real del contenido de cada consumidor; componentes como `NotificationsPanel` exponen las mismas props (`isLoading`/`loadingType`/`loadingVariant`/`skeletonCount`/`scrollable` vía `maxHeight`) y simplemente las reenvían a su `Frame` interno en vez de reimplementar loading o scroll por su cuenta.
 
 ---
 
@@ -1281,7 +1301,31 @@ import { VscJson } from 'anteriority-ui/screens/components/Icons/vsc';
 
 **Packs disponibles:** cada pack de react-icons se expone en `screens/components/Icons/<pack>`, con el mismo nombre de carpeta que usa react-icons: `ai`, `bi`, `bs`, `cg`, `ci`, `di`, `fa`, `fa6`, `fc`, `fi`, `gi`, `go`, `gr`, `hi`, `hi2`, `im`, `io`, `io5`, `lia`, `lu`, `md`, `pi`, `ri`, `rx`, `si`, `sl`, `tb`, `tfi`, `ti`, `vsc`, `wi`.
 
-**Notas:** Los nombres de cada ícono son exactamente los que exporta react-icons — usar el [buscador oficial](https://react-icons.github.io/react-icons/) o el componente [IconCatalog](#iconcatalog) para encontrar el nombre exacto dentro de su pack. `si` (Simple Icons) es el pack más relevante para logos de marcas/lenguajes/herramientas (JavaScript, YAML, Docker, etc.), pero **no tiene cobertura total** — por ejemplo no existe un ícono de C# en `si`; ese logo vive en el pack `tb` (`TbBrandCSharp`). Si un ícono no aparece en `si`, buscarlo en otros packs (`tb`, `fa`, `md`, etc.) antes de asumir que no está disponible. Packs como `fa` o `md` cubren además íconos genéricos de tipo de archivo (audio, pdf, imagen) que no tienen un logo de marca propio. Los archivos `screens/components/Icons/<pack>/index.js` son re-exports de 1 línea generados por `node scripts/generate-icon-packs.mjs` (correr de nuevo solo si react-icons agrega o quita un pack); quedan versionados en el repo como cualquier otro archivo fuente, no se regeneran en cada build.
+**Notas:** Los nombres de cada ícono son exactamente los que exporta react-icons — usar el [buscador oficial](https://react-icons.github.io/react-icons/), el componente [IconCatalog](#iconcatalog) o la función [findIcons](#findicons) para encontrar el nombre exacto dentro de su pack. `si` (Simple Icons) es el pack más relevante para logos de marcas/lenguajes/herramientas (JavaScript, YAML, Docker, etc.), pero **no tiene cobertura total** — por ejemplo no existe un ícono de C# en `si`; ese logo vive en los packs `tb` (`TbBrandCSharp`) y `pi` (`PiFileCSharp`). Si un ícono no aparece en `si`, buscarlo en otros packs antes de asumir que no está disponible — o usar `findIcons`, que ya busca en los 31 a la vez. Packs como `fa` o `md` cubren además íconos genéricos de tipo de archivo (audio, pdf, imagen) que no tienen un logo de marca propio. Los archivos `screens/components/Icons/<pack>/index.js` son re-exports de 1 línea generados por `node scripts/generate-icon-packs.mjs` (correr de nuevo solo si react-icons agrega o quita un pack); quedan versionados en el repo como cualquier otro archivo fuente, no se regeneran en cada build. `screens/components/Icons/registry.js` centraliza el import de los 31 packs (`ICON_PACKS`, `ICON_PACK_NAMES`) — tanto `IconCatalog` como `findIcons` lo reusan en vez de repetir la lista de imports.
+
+---
+
+### findIcons
+
+Busca un término (substring, case-insensitive) en el nombre de ícono de **todos** los packs de react-icons a la vez, sin necesidad de saber de antemano en qué pack vive cada uno. Pensada para resolver casos como "necesito el logo de C#" sin tener que adivinar o probar pack por pack — `findIcons('csharp')` ya devuelve los matches de `tb`, `pi`, etc. en un solo llamado.
+
+**Import:**
+```jsx
+import { findIcons } from 'anteriority-ui/common/icons';
+```
+
+**Uso básico:**
+```jsx
+const results = findIcons('csharp');
+// [{ pack: 'tb', name: 'TbBrandCSharp', Icon: [Function] }, { pack: 'pi', name: 'PiFileCSharp', Icon: [Function] }, ...]
+
+const { Icon } = results[0];
+<Icon size={24} />
+```
+
+**Firma:** `findIcons(query: string) => { pack: string, name: string, Icon: ComponentType }[]`
+
+**Notas:** Es una utilidad de **búsqueda en runtime**, no un import estático — devuelve el componente ya resuelto (`Icon`), listo para renderizar, pero no reemplaza el subpath import para un ícono que ya se conoce (ver [Icons (react-icons)](#icons-react-icons)), que sigue siendo más explícito y con mejor tree-shaking cuando el nombre exacto ya está decidido. Con query vacío devuelve `[]`. Puede devolver cientos de resultados con términos muy cortos/genéricos (ej. `'a'`) — conviene truncar/paginar en la UI que consuma el resultado, como hace [IconCatalog](#iconcatalog) internamente. También se puede usar directo desde `anteriority-ui/screens/components/Icons/findIcons` (el subpath real); `anteriority-ui/common/icons` es solo un alias más corto.
 
 ---
 
@@ -1931,6 +1975,107 @@ import ErrorMessage from 'screens/components/Notification/Error/ErrorMessage';
 
 ---
 
+### NotificationsPanel
+
+Panel de notificaciones construido sobre `Frame` (header con ícono de campana + título). Cada notificación se renderiza con `Callout` (título, mensaje en Markdown, timestamp, ícono, paleta por `variant`, botones de acción vía `Button`, botón de descarte (×) y soporte de click/navegación). La lista scrollea internamente (vía la prop `scrollable` de `Frame`, que a su vez usa `ScrollBar`) sin mostrar una barra de scroll nativa — el thumb queda oculto hasta hover/scroll. Soporta modo inline o modal (overlay + portal) y loading en dos variantes (spinner o skeleton), todo heredado de `Frame`.
+
+**Import:**
+```jsx
+import NotificationsPanel from '../NotificationsPanel/index'; // export default
+```
+
+**Uso básico:**
+```jsx
+<NotificationsPanel
+  notifications={[
+    {
+      id: 1,
+      title: 'Nueva cita agendada - Firulais',
+      message: 'Se agendó una cita para Firulais el 08/10/2026 a las 15:00 con el Dr. Doctor Doctor.',
+      timestamp: 'Hace 5 minutos',
+      actions: [
+        { label: 'Confirmar asistencia', variant: 'primary', onClick: () => {} },
+        { label: 'No podré asistir', variant: 'outline', color: 'red', onClick: () => {} },
+      ],
+    },
+  ]}
+  onDismiss={(id) => console.log('quitar', id)}
+/>
+```
+
+**Props:**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `title` | string | `'Notificaciones'` | Título del header (prop `title` de `Frame`). |
+| `icon` | node | `<Bell size={20} />` | Ícono del header (prop `icon` de `Frame`). |
+| `notifications` | array | `[]` | Lista de notificaciones. Cada item acepta: `{ id, title?, message?, timestamp?, icon?, variant?, actions?, onClick?, href?, bgColor?, borderColor?, iconColor?, textColor? }`. `message` se pasa como `children` de `Callout` (acepta Markdown). `actions` es un array de `{ key?, label, variant?, color?, fullWidth?, onClick? }`, renderizados con `Button`. `variant` es la misma paleta de `Callout` (`'info'` \| `'warning'` \| `'danger'` \| `'success'` \| `'neutral'`, default `'neutral'`). `onClick`/`href` hacen la tarjeta entera clickeable/navegable (ver `Callout`). Los `bgColor`/`borderColor`/`iconColor`/`textColor` del item individual tienen prioridad sobre los equivalentes globales del panel (`itemBgColor`, etc.). |
+| `onDismiss` | `function(id)` | — | Si se define, cada tarjeta muestra un botón (×) que lo invoca con el `id` de la notificación. El panel no quita el item solo — el consumidor controla el array `notifications` (ver ejemplo `Dismissible` en Storybook). |
+| `emptyMessage` | string | `'No tenés notificaciones nuevas.'` | Texto mostrado cuando `notifications` está vacío. |
+| `maxHeight` | number | `380` | Alto máximo (px) del área scrolleable (pasa a `Frame` como `maxHeight`, junto con `scrollable` activado automáticamente cuando hay notificaciones). |
+| `dismissLabel` | string | `'Quitar notificación'` | `aria-label` del botón de descarte (pasa a `Callout` como `closeLabel`). |
+| `isModal` | boolean | `false` | Renderiza como overlay modal (pasa a `Frame`). |
+| `onClose` | function | — | Click en el overlay cuando `isModal` (pasa a `Frame`). |
+| `isLoading` | boolean | `false` | Muestra el overlay de carga de `Frame` (spinner o skeleton genérico) en vez de la lista. |
+| `loadingType` | `'spinner'` \| `'skeleton'` | `'spinner'` (default de `Frame`) | Tipo de loading cuando `isLoading` (pasa a `Frame`). |
+| `loadingVariant` | string | `'default'` (default de `Frame`) | Con `loadingType="spinner"`, variant de `Loading` (pasa a `Frame`). |
+| `skeletonCount` | number | `3` (default de `Frame`) | Con `loadingType="skeleton"`, cantidad de barras `Skeleton` (pasa a `Frame`). |
+| `className` | string | `''` | Clase adicional en el `Frame` raíz. |
+| `bgColor` | string | — | Color de fondo del panel (pasa a `Frame` como `bgColor`). |
+| `iconColor` | string | — | Color del ícono del header — la campana (pasa a `Frame` como `iconColor`). |
+| `itemBgColor` | string | — | Color de fondo por default de cada tarjeta (pasa a `Callout` como `bgColor`; cada item puede pisarlo con su propio `bgColor`). |
+| `itemBorderColor` | string | — | Color de borde por default de cada tarjeta (pasa a `Callout` como `borderColor`; pisable por item). |
+| `itemIconColor` | string | — | Color del ícono por default de cada tarjeta (pasa a `Callout` como `iconColor`; pisable por item). |
+| `textColor` | string | — | Color de texto (título + mensaje + timestamp) por default de cada tarjeta (pasa a `Callout`; pisable por item). |
+
+**Ejemplos:**
+```jsx
+// Vacío
+<NotificationsPanel notifications={[]} />
+
+// Con descarte controlado por el consumidor
+function Example() {
+  const [items, setItems] = useState(notifications);
+  return (
+    <NotificationsPanel
+      notifications={items}
+      onDismiss={(id) => setItems((prev) => prev.filter((n) => n.id !== id))}
+    />
+  );
+}
+
+// Como modal
+<NotificationsPanel notifications={notifications} isModal onClose={() => setOpen(false)} />
+
+// Loading tipo skeleton
+<NotificationsPanel notifications={[]} isLoading loadingType="skeleton" skeletonCount={4} />
+
+// Notificación clickeable (navega al hacer click) y con paleta/colores propios
+<NotificationsPanel
+  notifications={[
+    {
+      id: 1,
+      variant: 'danger',
+      title: 'Pago rechazado',
+      message: 'No se pudo procesar el pago.',
+      onClick: () => navigate('/facturas/00234'),
+    },
+    {
+      id: 2,
+      title: 'Con colores propios',
+      message: 'Esta tarjeta define su propio bgColor/borderColor/textColor.',
+      bgColor: '#ecfdf5',
+      borderColor: '#a7f3d0',
+      textColor: '#065f46',
+    },
+  ]}
+/>
+```
+
+**Notas:** No persiste ni elimina notificaciones por su cuenta — es UI pura (ver regla de separación en `CLAUDE.md`). `onDismiss` solo informa el `id`; el array `notifications` sigue siendo responsabilidad de quien lo use. El contenedor interno aplica `overflow` vía `ScrollBar`, que oculta el track nativo del navegador y muestra un thumb delgado solo mientras se hace hover/scroll. Cada tarjeta es un `Callout` — para personalizar algo no cubierto por las props de `NotificationsPanel` (ej. `linkColor`, `markdownComponents`), usar `Callout` directamente en vez de este componente.
+
+---
+
 ### PasswordResetPanel
 
 Panel deslizante (basado en `DrawPanel`) para que un administrador solicite y complete el restablecimiento de contraseña de un usuario, incluyendo lista de solicitudes pendientes, polling de estado y asignación de nueva clave.
@@ -2128,6 +2273,7 @@ import ScrollBar from 'screens/components/ScrollBar';
 | `maxHeight` | `string` \| `number` | — | Altura máxima del área scrolleable. |
 | `hideHorizontalTrack` | `boolean` | `false` | Oculta el thumb/track horizontal propio (el scroll sigue funcionando). Lo usa `TableA` cuando muestra su pie de desplazamiento. |
 | `hideVerticalTrack` | `boolean` | `false` | Oculta el thumb/track vertical propio (el scroll sigue funcionando). Lo usa `TableA`/`TableB` con `stickyHeader`. |
+| `reserveTrackSpace` | `boolean` | `false` | Reserva `padding-right` en el área de scroll para que el thumb vertical no quede superpuesto sobre el contenido (texto/botones). Pensado para listas verticales de tarjetas (lo usa `Frame` cuando `scrollable`); no afecta el ancho de tablas con scroll horizontal porque es opt-in. |
 | `scrollAreaRef` | `ref` \| `function` | — | Recibe el elemento del área de scroll interna, para poder leer o mover `scrollLeft`/`scrollTop` desde afuera. |
 | `className` | `string` | `''` | Clase adicional para el contenedor raíz. |
 | `contentClassName` | `string` | `''` | Clase adicional para el área de scroll interna. |
@@ -2146,7 +2292,7 @@ import ScrollBar from 'screens/components/ScrollBar';
 
 ### Sidebar
 
-Barra lateral de navegación colapsable con grupos de items, badges por método HTTP, menú de usuario, menú contextual por item (editar/eliminar/fijar/colaboradores) y reordenamiento por drag & drop.
+Barra lateral de navegación colapsable con grupos de items, subitems anidados y colapsables (ej. "Vacunas" → Ver/Crear/Pendientes/Lotes), badges por método HTTP, menú de usuario, menú contextual por item (editar/eliminar/fijar/colaboradores) y reordenamiento por drag & drop.
 
 **Import:**
 ```jsx
@@ -2168,8 +2314,8 @@ import Sidebar from 'screens/components/Sidebar/index';
 
 | Prop | Tipo | Default | Descripción |
 |---|---|---|---|
-| `groups` | `Array<{ title?, items: Array<{ id, label, icon?, badge?, badgeType?, pinned?, isOwner?, isShared? }> }>` | — | Estructura de grupos e items del menú. |
-| `activeId` | `string`\|`number` | — | Id del item actualmente activo. |
+| `groups` | `Array<{ title?, items: Array<{ id, label, icon?, badge?, badgeType?, pinned?, isOwner?, isShared?, subItems? }> }>` | — | Estructura de grupos e items del menú. `subItems` es un array opcional de `{ id, label, icon?, badge?, badgeType? }`: si un item lo tiene, se renderiza como header colapsable (con chevron) en vez de item navegable — el click solo expande/colapsa, no dispara `onSelect` ni se marca "activo" (ver Notas). |
+| `activeId` | `string`\|`number` | — | Id del item (o subitem) actualmente activo. Si matchea el id de un subitem, ese subitem se resalta y su grupo padre se auto-expande al montar el componente. |
 | `onSelect` | `function(item)` | — | Callback al seleccionar un item. |
 | `collapsible` | `boolean` | `true` | Muestra el botón de colapsar y habilita el atajo de teclado para colapsar/expandir. |
 | `loading` | `boolean` | `false` | Muestra `skeletonItems` filas de `Skeleton` en vez de los grupos reales. |
@@ -2192,6 +2338,32 @@ import Sidebar from 'screens/components/Sidebar/index';
 
 **Ejemplos:**
 ```jsx
+// Item con subItems colapsables (ej. "Vacunas")
+<Sidebar
+  groups={[
+    {
+      title: 'General',
+      items: [
+        { id: 'home', label: 'Inicio', icon: Home },
+        {
+          id: 'vaccines',
+          label: 'Vacunas',
+          icon: Activity,
+          subItems: [
+            { id: 'vaccines-view', label: 'Ver vacunas' },
+            { id: 'vaccines-create', label: 'Crear vacuna' },
+            { id: 'vaccines-pending', label: 'Vacunas pendientes' },
+            { id: 'vaccines-batches', label: 'Lotes de vacunas' },
+          ],
+        },
+      ],
+    },
+  ]}
+  activeId="vaccines-view"
+  onSelect={(item) => setActiveId(item.id)}
+  user={{ email: 'jane.doe@example.com' }}
+/>
+
 <Sidebar groups={[]} loading skeletonItems={8} user={{ email: 'jane.doe@example.com' }} />
 
 <Sidebar
@@ -2215,7 +2387,7 @@ import Sidebar from 'screens/components/Sidebar/index';
 />
 ```
 
-**Notas:** Persiste el estado colapsado en `localStorage` bajo la clave `sidebar_collapsed`.
+**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ó).
 
 ---
 

package/common/icons/index.js

@@ -0,0 +1,7 @@
+import { findIcons } from "../../screens/components/Icons/findIcons";
+import { ICON_PACKS, ICON_PACK_NAMES } from "../../screens/components/Icons/registry";
+export {
+  ICON_PACKS,
+  ICON_PACK_NAMES,
+  findIcons
+};