@imj_media/ui 1.10.3 → 1.10.5

package/catalog/design-index.json

@@ -0,0 +1,2857 @@
+{
+  "schemaVersion": "1.0.0",
+  "package": "@imj_media/ui",
+  "version": "1.10.5",
+  "indexedAt": "2026-05-25T20:20:35.330Z",
+  "orbitTokensVersion": "1.3.1",
+  "modules": [
+    {
+      "id": "Accordion",
+      "path": "src/modules/Accordion",
+      "legacy": false,
+      "compositionType": 2,
+      "exports": [
+        {
+          "name": "Accordion",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Accordion permite mostrar contenido colapsable con un encabezado. Útil para organizar información de forma compacta.",
+            "jsdoc": "Accordion - Componente de acordeón expandible\nComponente que permite mostrar/ocultar contenido de forma expandible.\nSoporta múltiples items, estados controlados y no controlados.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Accordion\n      id=\"accordion-1\"\n      title=\"Título del Accordion\"\n      subtitle=\"Subtítulo opcional\"\n    >\n      <div className=\"ui-p-4\">\n        <p>Contenido del accordion</p>\n      </div>\n    </Accordion>\n  );\n}",
+            "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Accordion\n      id=\"accordion-2\"\n      title=\"Accordion Abierto\"\n      defaultOpen={true}\n    >\n      <div className=\"ui-p-4\">\n        <p>Contenido visible desde el inicio</p>\n      </div>\n    </Accordion>\n  );\n}",
+            "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Accordion\n      id=\"accordion-3\"\n      title=\"Accordion Deshabilitado\"\n      disabled={true}\n    >\n      <div className=\"ui-p-4\">\n        <p>Contenido no accesible</p>\n      </div>\n    </Accordion>\n  );\n}",
+            "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Accordion\n      id=\"accordion-4\"\n      title=\"Accordion sin Subtítulo\"\n    >\n      <div className=\"ui-p-4\">\n        <p>Contenido del accordion</p>\n      </div>\n    </Accordion>\n  );\n}",
+            "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <div className=\"ui-space-y-4\">\n      <Accordion id=\"accordion-5\" title=\"Primera Sección\">\n        <div className=\"ui-p-4\">\n          <p>Contenido de la primera sección</p>\n        </div>\n      </Accordion>\n      \n      <Accordion \n        id=\"accordion-6\" \n        title=\"Segunda Sección\"\n        defaultOpen={true}\n      >\n        <div className=\"ui-p-4\">\n          <p>Contenido de la segunda sección</p>\n        </div>\n      </Accordion>\n      \n      <Accordion id=\"accordion-7\" title=\"Tercera Sección\">\n        <div className=\"ui-p-4\">\n          <p>Contenido de la tercera sección</p>\n        </div>\n      </Accordion>\n    </div>\n  );\n}"
+          ]
+        }
+      ],
+      "compositionRecipe": {
+        "pieces": [
+          "Accordion",
+          "AccordionHeader",
+          "AccordionContent"
+        ],
+        "steps": [
+          "Pasa id y title obligatorios en Accordion (API de contenedor).",
+          "El children del accordion es el contenido visible al expandir.",
+          "Para múltiples secciones, repite Accordion o usa items según la story del módulo."
+        ],
+        "storyRefs": [
+          "Accordion.stories.tsx:Default"
+        ],
+        "snippet": "<Accordion\n  id=\"section-1\"\n  title=\"Sección\"\n  subtitle=\"Opcional\"\n  defaultOpen={false}\n>\n  Contenido colapsable\n</Accordion>"
+      }
+    },
+    {
+      "id": "Alert",
+      "path": "src/modules/Alert",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Alert",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Alert permite mostrar mensajes informativos, de éxito, advertencia o error con diferentes variantes visuales.",
+            "jsdoc": "Alert - Componente de alerta\nTokens semánticos de Figma:\n- Padding: 16px (space_16) para md, reducido para sm\n- Gap: 16px (space_16) entre secciones\n- Border radius: control-sm (8px)\n- Border width: 1px",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Alert } from '@/modules/Alert';\n\n  export default function Example() {\n    return (\n      <Alert \n        color=\"success\" \n        message=\"Operación completada exitosamente\" \n        title=\"Éxito\" \n        open={true} \n      />\n    )\n  }",
+            "<Alert color=\"success\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"info\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"warning\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"danger\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"success\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"info\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"warning\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"danger\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />",
+            "<Alert\n    color=\"success\"\n    message=\"Operación completada exitosamente\"\n    title=\"Éxito\"\n    description=\"Los cambios se han guardado correctamente en la base de datos.\"\n    open={true}\n  />\n  <Alert\n    color=\"danger\"\n    message=\"Ha ocurrido un error inesperado\"\n    title=\"Error\"\n    description=\"Por favor, intenta nuevamente o contacta al soporte técnico si el problema persiste.\"\n    open={true}\n  />\n  <Alert\n    color=\"info\"\n    message=\"Información importante para el usuario\"\n    title=\"Información\"\n    description=\"Esta acción puede tardar unos minutos en completarse. Por favor, espera hasta que finalice.\"\n    open={true}\n  />\n  <Alert\n    color=\"warning\"\n    message=\"Advertencia antes de continuar\"\n    title=\"Advertencia\"\n    description=\"Esta acción no se puede deshacer. Asegúrate de que realmente deseas continuar.\"\n    open={true}\n  />\n  <Alert\n    color=\"neutral\"\n    message=\"Mensaje neutral sin color específico\"\n    title=\"Notificación\"\n    description=\"Este es un mensaje informativo que no requiere acción inmediata por parte del usuario.\"\n    open={true}\n  />",
+            "import { Alert } from '@/modules/Alert';\n\n  export default function Example() {\n    return (\n      <Alert \n        color=\"success\" \n        message=\"Operación completada exitosamente\" \n        title=\"Éxito\" \n        open={true} \n      />\n    )\n  }",
+            "<Alert color=\"success\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"info\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"warning\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"danger\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"success\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"info\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"warning\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"danger\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "AlertDialog",
+      "path": "src/modules/AlertDialog",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "AlertDialog",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente AlertDialog permite a los usuarios realizar acciones y tomar decisiones con un solo toque.",
+            "jsdoc": "AlertDialog - Componente de diálogo de confirmación/alert\nComponente de diálogo modal especializado para confirmaciones y alertas.\nSoporta texto de confirmación requerido, iconos personalizados y múltiples tamaños.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { AlertDialog } from '@imj_media/ui';\n  const [isOpen, setIsOpen] = useState(false);\n\n  export default function Example() {\n    return <AlertDialog\n        title='Eliminar borrador'\n        iconContent={faHardDrive}\n        heading='¿Estás seguro?'\n        subheading='Si eliminas este borrador, también se borrarán todas sus tareas y conexiones con otros borradores.'\n        icon={faBan}\n        label=\"Confirmar eliminación\"\n        confirmationText=\"EliminarBorrador\"\n        isOpen={isOpen} onClose={() => setIsOpen(false)}\n        onConfirm={() => { console.log('onConfirm') }}\n        placeholder='Escribe la palabra de confirmación'\n    />\n  }",
+            "import { AlertDialog } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function SizesExample() {\n  const [isOpen, setIsOpen] = useState(false);\n  \n  return (\n    <AlertDialog\n      size=\"lg\" // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\n      title='Confirmar acción'\n      iconContent={faInfoCircle}\n      heading='¿Confirmar?'\n      subheading='Este AlertDialog usa un tamaño grande.'\n      isOpen={isOpen}\n      onClose={() => setIsOpen(false)}\n      onConfirm={() => console.log('Confirmado')}\n      successButtonText=\"Aceptar\"\n      successButtonColor=\"primary\"\n    />\n  );\n}",
+            "import { AlertDialog } from '@/modules/AlertDialog';\nimport { faTrash, faBan } from '@fortawesome/pro-duotone-svg-icons';\nimport { useState } from 'react';\n\nexport default function DuotoneExample() {\n  const [isOpen, setIsOpen] = useState(false);\n  \n  return (\n    <AlertDialog\n      title='Eliminar borrador'\n      iconContent={faBan}\n      iconContentDuotonePrimary=\"danger\"\n      iconContentDuotoneSecondary=\"red\"\n      iconContentDuotoneOpacityPrimary={1}\n      iconContentDuotoneOpacitySecondary={0.4}\n      icon={faTrash}\n      iconDuotonePrimary=\"danger\"\n      iconDuotoneSecondary=\"red\"\n      iconDuotoneOpacityPrimary={1}\n      iconDuotoneOpacitySecondary={0.4}\n      isOpen={isOpen}\n      onClose={() => setIsOpen(false)}\n      onConfirm={() => console.log('Confirmado')}\n    />\n  );\n}",
+            "import { AlertDialog } from '@imj_media/ui';\n  const [isOpen, setIsOpen] = useState(false);\n\n  export default function Example() {\n    return <AlertDialog\n        title='Eliminar borrador'\n        iconContent={faHardDrive}\n        heading='¿Estás seguro?'\n        subheading='Si eliminas este borrador, también se borrarán todas sus tareas y conexiones con otros borradores.'\n        icon={faBan}\n        label=\"Confirmar eliminación\"\n        confirmationText=\"EliminarBorrador\"\n        isOpen={isOpen} onClose={() => setIsOpen(false)}\n        onConfirm={() => { console.log('onConfirm') }}\n        placeholder='Escribe la palabra de confirmación'\n    />\n  }",
+            "import { AlertDialog } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function SizesExample() {\n  const [isOpen, setIsOpen] = useState(false);\n  \n  return (\n    <AlertDialog\n      size=\"lg\" // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\n      title='Confirmar acción'\n      iconContent={faInfoCircle}\n      heading='¿Confirmar?'\n      subheading='Este AlertDialog usa un tamaño grande.'\n      isOpen={isOpen}\n      onClose={() => setIsOpen(false)}\n      onConfirm={() => console.log('Confirmado')}\n      successButtonText=\"Aceptar\"\n      successButtonColor=\"primary\"\n    />\n  );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Avatar",
+      "path": "src/modules/Avatar",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Avatar",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "============================================\nAVATAR COMPONENT - ATOMIC DESIGN\n============================================\nComponente Avatar versátil que sigue principios de Atomic Design.\nActúa como un wrapper que delega la renderización a subcomponentes\nespecializados según el tipo de avatar.\n## Tipos de Avatar\n### 1. People Avatar (type: 'people')\nMuestra una imagen de persona con manejo de errores y fallback automático al icono por defecto\n### 2. Icon Avatar (type: 'icon')\nMuestra un icono del sistema de iconos con temas de color\n### 3. Letter Avatar (type: 'letter')\nMuestra texto (iniciales, números, símbolos) con truncado automático\n## Personalización\nPara modificar colores, tamaños, o agregar nuevos temas:\n@see /constants/index.ts - Tokens de diseño centralizados\n@see /types/index.t",
+            "readme": "# Avatar Component\n\nComponente Avatar versátil construido con **Atomic Design** que soporta múltiples tipos: imágenes de personas, iconos y letras/números.\n\n## 📋 Tabla de Contenidos\n\n- [Características](#características)\n- [Tipos de Avatar](#tipos-de-avatar)\n- [Props](#props)\n- [Ejemplos de Uso](#ejemplos-de-uso)\n- [Personalización](#personalización)\n- [Estructura del Componente](#estructura-del-componente)\n\n## ✨ Características\n\n- ✅ **3 tipos de avatar**: People (imagen), Icon (icono), Letter (texto/números)\n- ✅ **Atomic Design**: Estructura modular y mantenible\n- ✅ **6 tamaños**: xxs, xs, sm, md, lg, xl\n- ✅ **11 colores**: blue, red, orange, yellow, lime, green, cyan, azure, violet, magenta, rose\n- ✅ **2 temas**: solid y soft\n- ✅ **Personalización**: Border (stroke) y forma (pill/rounded)\n- ✅ **Performance**: Lazy loading y preload de imágenes\n- ✅ **TypeScript**: Completamente tipado\n- ✅ **Documentación**: Stories completas en Storybook\n\n## 🎯 Tipos de Avatar\n\n### 1. People Avatar (type: 'people')\n\nMuestra una imagen de persona con manejo de errores y fallback automático al icono por defecto.\n\n```tsx\n<Avatar type=\"people\" src=\"https://example.com/avatar.jpg\" alt=\"John Doe\" size=\"md\" />\n```\n\n### 2. Icon Avatar (type: 'icon')\n\nMuestra un icono fijo (UserOutlined).\n\n```tsx\n<Avatar\n  type=\"icon\"\n  theme=\"solid\" // 'solid' | 'soft'\n  color=\"blue\" // 11 colores disponibles\n  size=\"md\"\n/>\n```\n\n### 3. Letter Avatar (type: 'letter')\n\nMuestra texto, ideal para iniciales, contadores o indicadores.\n\n```tsx\n// Iniciales\n<Avatar\n  type=\"letter\"\n  text=\"AB\"\n  theme=\"solid\"\n  color=\"blue\"\n  size=\"md\"\n/>\n\n// Contador estilo Teams\n<Avatar\n  type=\"letter\"\n  text=\"99+\"\n  theme=\"solid\"\n  color=\"red\"\n  size=\"sm\"\n/>\n\n// Indicador\n<Avatar\n  type=\"letter\"\n  text=\"+5\"\n  theme=\"soft\"\n  color=\"green\"\n  size=\"md\"\n/>\n```\n\n## 📝 Props\n\n### Props Comunes (todas los tipos)\n\n| Prop                    | Tipo         | Default | Descripción                                        |\n| ---------------",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Badge",
+      "path": "src/modules/Badge",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Badge",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Badge permite mostrar pequeñas notificaciones y contadores. **API preferida:** bloques",
+            "jsdoc": "Módulo Badge — insignia contador/estado del design system.\nExporta {@link Badge} para uso desde `@imj_media/ui` o `@/modules/Badge`.\nLas props públicas (`BadgeProps` y sub-interfaces) viven en `@/shared/types/badge`.",
+            "readme": "# Badge Component\n\nComponente de insignia/badge versátil y configurable con soporte para diferentes tamaños, colores, temas, iconos, estados de carga y personalización avanzada.\n\n## Uso Básico\n\n```tsx\nimport { Badge } from '@imj_media/ui';\n\n// Badge simple con label\n<Badge label=\"3\" color=\"danger\" />\n\n// Badge tipo dot (sin label)\n<Badge size=\"dot\" color=\"accent\" />\n\n// Badge con icono\n<Badge label=\"Nuevo\" icon=\"StarOutlined\" color=\"success\" />\n```\n\n## Props Principales\n\n### Contenido\n\n- `label?: string | number` - Texto o número del badge (default: `''`)\n- `icon?: IconType | AnyIconDefinition` - Icono del badge (no se muestra en tamaño `dot`)\n\n### Tamaño y Estilo\n\n- `size?: 'dot' | 'sm' | 'md' | 'lg'` - Tamaño del badge (default: `'dot'`)\n- `color?: 'accent' | 'gray' | 'success' | 'warning' | 'danger' | 'info'` - Color del badge (default: `'accent'`)\n- `theme?: 'solid' | 'soft'` - Tema del badge (default: `'solid'`)\n- `stroke?: boolean` - Mostrar borde (default: `false`)\n\n### Estados\n\n- `disabled?: boolean` - Si el badge está deshabilitado (default: `false`)\n- `loading?: boolean` - Mostrar spinner de carga (default: `false`)\n\n### Personalización\n\n- `customColor?: string` - Color personalizado (hex, rgb, etc.)\n- `className?: string` - Clases CSS adicionales\n\n### Iconos Duotone\n\n- `iconDuotonePrimary?: IconFontColor` - Color primario del icono duotone\n- `iconDuotoneSecondary?: IconFontColor` - Color secundario del icono duotone\n- `iconDuotoneOpacityPrimary?: number` - Opacidad primaria (0-1)\n- `iconDuotoneOpacitySecondary?: number` - Opacidad secundaria (0-1)\n\n## Ejemplos\n\n### Badge tipo dot\n\n```tsx\n// Dot simple\n<Badge size=\"dot\" color=\"accent\" />\n\n// Dot con color personalizado\n<Badge size=\"dot\" customColor=\"#ff0000\" />\n```\n\n### Badge con diferentes tamaños\n\n```tsx\n<Badge label=\"1\" size=\"sm\" color=\"danger\" />\n<Badge label=\"12\" size=\"md\" color=\"success\" />\n<Badge label=\"999+\" size=\"lg\" color=\"warning\" />\n```\n\n### Badge con icono\n\n```tsx\n<Badge label=\"Nuevo\" icon=\"St",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'dot', color: 'accent' }} />\n      <Badge appearance={{ size: 'dot', color: 'gray' }} />\n      <Badge appearance={{ size: 'dot', color: 'success' }} />\n      <Badge appearance={{ size: 'dot', color: 'warning' }} />\n      <Badge appearance={{ size: 'dot', color: 'danger' }} />\n      <Badge appearance={{ size: 'dot', color: 'info' }} />\n      <Badge appearance={{ size: 'dot' }} state={{ disabled: true }} />\n    </>\n  )\n}",
+            "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'dot', color: 'accent', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'gray', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'success', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'warning', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'danger', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'info', stroke: true }} />\n      <Badge appearance={{ size: 'dot', stroke: true }} state={{ disabled: true }} />\n    </>\n  )\n}",
+            "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'dot', color: 'accent', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot', color: 'gray', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot', color: 'success', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot', color: 'warning', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot', color: 'danger', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot', color: 'info', theme: 'soft' }} />\n      <Badge appearance={{ size: 'dot' }} state={{ disabled: true }} />\n    </>\n  )\n}",
+            "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'dot', color: 'accent', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'gray', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'success', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'warning', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'danger', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', color: 'info', theme: 'soft', stroke: true }} />\n      <Badge appearance={{ size: 'dot', stroke: true }} state={{ disabled: true }} />\n    </>\n  )\n}",
+            "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'sm', color: 'accent' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'gray' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'success' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'warning' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'danger' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'info' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm' }} text={{ label: '5' }} state={{ disabled: true }} />\n    </>\n  )\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Badges",
+      "path": "src/modules/Badges",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Badges",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Badges permite crear una lista de badges dinámicos escribiendo texto y presionando Enter. Cada badge puede ser eliminado individualmente.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Badges, BadgeItem } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [badges, setBadges] = useState<BadgeItem[]>([]);\n\n  return (\n    <Badges\n      label=\"Tags\"\n      placeholder=\"Escribe y presiona Enter...\"\n      onChange={(event) => setBadges(event.items)}\n    />\n  );\n}",
+            "import { Badges, BadgeItem, BadgesChangeEvent } from '@imj_media/ui';\nimport { useState } from 'react';\n\nconst initialBadges: BadgeItem[] = [\n  { id: '1', label: 'React', color: 'accent' },\n  { id: '2', label: 'TypeScript', color: 'info' },\n  { id: '3', label: 'Tailwind', color: 'success' },\n];\n\nexport default function Example() {\n  const [badges, setBadges] = useState<BadgeItem[]>(initialBadges);\n\n  const handleChange = (event: BadgesChangeEvent) => {\n    setBadges(event.items);\n  };\n\n  return (\n    <Badges\n      label=\"Tecnologías\"\n      value={initialBadges}\n      placeholder=\"Agregar tecnología...\"\n      onChange={handleChange}\n    />\n  );\n}",
+            "import { Badges, BadgesChangeEvent } from '@imj_media/ui';\n\n// Simplemente pasa un array de strings\nconst initialTags = ['React', 'TypeScript', 'Tailwind', 'Node.js'];\n\nexport default function Example() {\n  return (\n    <Badges\n      label=\"Tecnologías\"\n      value={initialTags}\n      placeholder=\"Agregar tecnología...\"\n      colorCycle={['accent', 'success', 'info', 'warning']}\n    />\n  );\n}",
+            "import { Badges } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Badges\n      label=\"Categorías\"\n      placeholder=\"Agregar categoría...\"\n      colorCycle={['accent', 'success', 'warning', 'danger', 'info', 'gray']}\n    />\n  );\n}",
+            "import { Badges } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <>\n      <Badges label=\"Success\" defaultColor=\"success\" />\n      <Badges label=\"Warning\" defaultColor=\"warning\" />\n      <Badges label=\"Danger\" defaultColor=\"danger\" />\n      <Badges label=\"Info\" defaultColor=\"info\" />\n    </>\n  );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Breadcrumbs",
+      "path": "src/modules/Breadcrumbs",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Breadcrumbs",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Breadcrumbs permite mostrar una lista de enlaces que representan la navegación del usuario.",
+            "jsdoc": "Breadcrumbs - Componente de migas de pan\nComponente de navegación que muestra la ruta jerárquica actual.\nSoporta truncamiento automático cuando hay muchos items y componente de enlace personalizable.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n\n  const items = [\n      { label: 'Home', to: '/' },\n      { label: 'About', to: '/about' },\n      { label: 'Contact', to: '/contact' },\n      { label: 'Gallery', to: '/gallery' },\n      { label: 'Blog', to: '/blog' },\n      { label: 'History', to: '/history' },\n  ];\n\n  export default function Example() {\n    return (\n      <>\n        <Breadcrumbs items={items} />\n      </>\n    )\n  }",
+            "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n  import { Link } from '@react-router';\n  \n  const items = [\n      { label: 'Home', to: '/' },\n      { label: 'About', to: '/about' },\n      { label: 'Contact', to: '/contact' },\n      { label: 'Gallery', to: '/gallery' },\n      { label: 'Blog', to: '/blog' },\n      { label: 'History', to: '/history' },\n  ];\n\n  export default function Example() {\n    return (\n      <>\n        <Breadcrumbs items={items} LinkComponent={Link} />\n      </>\n    )\n  }",
+            "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n\n  const items = [\n      { label: 'Home', to: '/' },\n      { label: 'About', to: '/about' },\n      { label: 'Contact', to: '/contact' },\n      { label: 'Gallery', to: '/gallery' },\n      { label: 'Blog', to: '/blog' },\n      { label: 'History', to: '/history' },\n  ];\n\n  export default function Example() {\n    return (\n      <>\n        <Breadcrumbs items={items} />\n      </>\n    )\n  }",
+            "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n  import { Link } from '@react-router';\n  \n  const items = [\n      { label: 'Home', to: '/' },\n      { label: 'About', to: '/about' },\n      { label: 'Contact', to: '/contact' },\n      { label: 'Gallery', to: '/gallery' },\n      { label: 'Blog', to: '/blog' },\n      { label: 'History', to: '/history' },\n  ];\n\n  export default function Example() {\n    return (\n      <>\n        <Breadcrumbs items={items} LinkComponent={Link} />\n      </>\n    )\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Button",
+      "path": "src/modules/Button",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Button",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Button permite a los usuarios realizar acciones y tomar decisiones con un solo toque.",
+            "jsdoc": "Button - Componente de botón versátil y configurable\nComponente wrapper que proporciona una API simplificada sobre InnerButton.\nSoporta múltiples temas, colores, tamaños, iconos, badges y tooltips.",
+            "readme": "# Button Component\n\nComponente de botón versátil y configurable con múltiples variantes, tamaños, colores y funcionalidades adicionales.\n\n## Estructura\n\n```\nButton/\n├── components/\n│   └── organisms/\n│       └── Button.tsx      # Componente principal\n├── stories/\n│   └── Button.stories.tsx # Storybook stories\n└── index.tsx              # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Button } from '@imj_media/ui';\n\n// Botón simple\n<Button onClick={() => console.log('clicked')}>\n  Hacer clic\n</Button>\n\n// Botón con icono\n<Button icon=\"ImageOutlined\" onClick={handleClick}>\n  Subir imagen\n</Button>\n\n// Botón deshabilitado\n<Button disabled onClick={handleClick}>\n  No disponible\n</Button>\n```\n\n## Props Principales\n\n### Tamaño y Estilo\n\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón (default: `'sm'`)\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón (default: `'primary'`)\n- `fullWidth?: boolean` - Si es true, ocupa todo el ancho disponible (default: `false`)\n- `rounded?: boolean` - Si es true, bordes redondeados (default: `false`)\n\n### Contenido\n\n- `children?: React.ReactNode` - Contenido del botón\n- `icon?: IconType | AnyIconDefinition` - Icono principal del botón\n- `leftSlot?: React.ReactNode` - Slot izquierdo personalizado\n- `rightSlot?: React.ReactNode` - Slot derecho personalizado\n\n### Funcionalidad\n\n- `onClick?: (e: React.MouseEvent) => void` - Callback al hacer clic\n- `disabled?: boolean` - Si es true, el botón está deshabilitado\n- `clickable?: boolean` - Si es true, el botón es clickeable (default: `true`)\n- `link?: string` - URL para convertir el botón en enlace\n- `target?: '_self' | '_blank' | '_parent' | '_top'` - Target para enlaces (default: `'_self'`)\n\n### Badge\n\n- `badgeColor?: BadgeColor` - Color del badge\n- `badgeLabel?: string` - Texto del badge\n- `badgeTheme?: BadgeTheme` - Tema del badge\n- `badgeSize?: BadgeSize` - Tamaño del badge\n- `badgeIcon?: IconType",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Button } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Button color=\"primary\">Blue</Button>\n        <Button color=\"secondary\">Red</Button>\n        <Button color=\"tertiary\">Green</Button>\n        <Button color=\"destructive\">Orange</Button>\n        <Button color=\"primary\">White</Button>\n      </>\n    )\n  }",
+            "import { Button } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Button color=\"primary\">Blue</Button>\n        <Button color=\"secondary\">Red</Button>\n        <Button color=\"tertiary\">Green</Button>\n        <Button color=\"destructive\">Orange</Button>\n        <Button color=\"primary\">White</Button>\n      </>\n    )\n  }",
+            "import { Button } from '@imj_media/ui';\nimport { faUser, faImage } from '@fortawesome/pro-solid-svg-icons';\n\nexport default function FullWidthSlotsExample() {\n  return (\n    <div className=\"ui-flex ui-max-w-2xl ui-flex-col ui-gap-3\">\n      <Button\n        color=\"primary\"\n        size=\"lg\"\n        fullWidth\n        slotLayout={{ var: 'spread', textAlign: 'center' }}\n        leftSlot={faUser}\n        rightSlot={faImage}\n      >\n        Continuar\n      </Button>\n    </div>\n  );\n}",
+            "import { Button } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Button color=\"primary\" tooltip=\"Tooltip\">Blue</Button>\n        <Button color=\"secondary\" tooltip=\"Tooltip\">Red</Button>\n        <Button color=\"tertiary\" tooltip=\"Tooltip\">Green</Button>\n        <Button color=\"destructive\" tooltip=\"Tooltip\">Orange</Button>\n      </>\n    )\n  }",
+            "import { Button } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Button color=\"primary\" tooltip=\"Tooltip\">Blue</Button>\n        <Button color=\"secondary\" tooltip=\"Tooltip\">Red</Button>\n        <Button color=\"tertiary\" tooltip=\"Tooltip\">Green</Button>\n        <Button color=\"destructive\" tooltip=\"Tooltip\">Orange</Button>\n      </>\n    )\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "ButtonGroup",
+      "path": "src/modules/ButtonGroup",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "ButtonGroup",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente ButtonGroup permite agrupar múltiples botones con bordes redondeados en los extremos y botones unidos en el centro.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { ButtonGroup } from '@/modules/ButtonGroup';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    return (\n      <>\n        <ButtonGroup>\n          <Button tooltip=\"Zoom out\" icon=\"Minus2Outlined\" />\n          <Button tooltip=\"100%\" clickable={false}>100%</Button>\n          <Button tooltip=\"Zoom in\" icon=\"Plus1Outlined\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button color=\"primary\">Primero</Button>\n          <Button color=\"primary\">Segundo</Button>\n          <Button color=\"primary\">Tercero</Button>\n        </ButtonGroup>\n        \n        <ButtonGroup>\n          <Button variant=\"outlined\" color=\"destructive\">Cancelar</Button>\n          <Button variant=\"outlined\" color=\"destructive\">Guardar</Button>\n        </ButtonGroup>\n        \n        <ButtonGroup>\n          <Button variant=\"outlined\" color=\"secondary\">Aceptar</Button>\n          <Button variant=\"outlined\" color=\"secondary\">Rechazar</Button>\n          <Button variant=\"outlined\" color=\"secondary\">Pendiente</Button>\n        </ButtonGroup>\n      </>\n    )\n  }",
+            "<ButtonGroup>\n    <Button size=\"sm\" color=\"primary\">Pequeño</Button>\n    <Button size=\"sm\" color=\"primary\">Pequeño</Button>\n    <Button size=\"sm\" color=\"primary\">Pequeño</Button>\n  </ButtonGroup>\n  \n  <ButtonGroup>\n    <Button size=\"lg\" color=\"secondary\">Grande</Button>\n    <Button size=\"lg\" color=\"secondary\">Grande</Button>\n    <Button size=\"lg\" color=\"secondary\">Grande</Button>\n  </ButtonGroup>",
+            "<ButtonGroup>\n    <Button variant=\"outlined\" color=\"destructive\">Outlined</Button>\n    <Button variant=\"outlined\" color=\"destructive\">Outlined</Button>\n    <Button variant=\"outlined\" color=\"destructive\">Outlined</Button>\n  </ButtonGroup>\n  \n  <ButtonGroup>\n    <Button variant=\"soft\" color=\"secondary\">Soft</Button>\n    <Button variant=\"soft\" color=\"secondary\">Soft</Button>\n    <Button variant=\"soft\" color=\"secondary\">Soft</Button>\n  </ButtonGroup>",
+            "<ButtonGroup>\n    <Button color=\"primary\" leftSlot=\"TaskOutlined\">Tareas</Button>\n    <Button color=\"primary\" leftSlot=\"CalendarOutlined\">Calendario</Button>\n    <Button color=\"primary\" leftSlot=\"UserOutlined\">Usuario</Button>\n  </ButtonGroup>\n  \n  <ButtonGroup>\n    <Button variant=\"outlined\" color=\"destructive\" leftSlot=\"DeleteOutlined\">Eliminar</Button>\n    <Button variant=\"outlined\" color=\"destructive\" leftSlot=\"EditOutlined\">Editar</Button>\n  </ButtonGroup>",
+            "<ButtonGroup className=\"ui-shadow-04 ui-p-2 ui-bg-gray-50 ui-rounded-lg\">\n    <Button color=\"primary\">Con Sombra</Button>\n    <Button color=\"primary\">Con Sombra</Button>\n    <Button color=\"primary\">Con Sombra</Button>\n  </ButtonGroup>\n  \n  <ButtonGroup className=\"ui-border-2 ui-border-dashed ui-border-blue-300 ui-p-3 ui-rounded-xl\">\n    <Button variant=\"outlined\" color=\"primary\">Borde Punteado</Button>\n    <Button variant=\"outlined\" color=\"primary\">Borde Punteado</Button>\n  </ButtonGroup>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Cards",
+      "path": "src/modules/Cards",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Cards",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "confidence": "low"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "CardsGenericas",
+      "path": "src/modules/CardsGenericas",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "CardsGenericas",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Chevron Font Awesome (pro-regular), centrado por el propio glifo y el flex del botón. */\nconst ChevronFa = styled(FontAwesomeIcon)<{ $open: boolean }>`\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n  display: block;\n  margin: 0;\n  padding: 0;\n  color: #fff;\n  transform-origin: 50% 50%;\n  transition:\n    transform 0.5s ease-in-out,\n    color 0.3s ease;\n  transform: rotate(${({ $open }) => ($open ? '180deg' : '0deg')});\n\n  ${({ $open }) => css`\n    @media (max-aspect-ratio: 7/10) {\n      transform: rotate(${$open ? '270deg' : '90deg'});\n    }\n  `}\n`;\n\nconst ToggleButton = styled.button<{ $detail: string; $detailColor: string; $bg: string }>`\n  position: absolute;\n  right: -25px;\n  width: 50px;\n  height: 50px;\n  background: ${({ $detail }) => $detail};\n  top: 50%;\n  transform: translateY(-",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "CardsWithAside",
+      "path": "src/modules/CardsWithAside",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "CardsWithAside",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Componente CardsWithAside que muestra contenido inicial con un panel lateral deslizable que contiene tabs con iconos. Permite mostrar contenido adicional al hacer click en los iconos del panel lateral.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<CardsWithAside activeCard={activeCard}>\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Ver información del usuario\"  // Tooltip descriptivo\n  >\n    <UserContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración general\"  // Tooltip descriptivo\n  >\n    <SettingsContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Centro de notificaciones\"  // Tooltip descriptivo\n  >\n    <NotificationsContent />\n  </CardsWithAside.TabContent>\n</CardsWithAside>",
+            "// Posición global de tooltips (afecta a todos los tabs)\n<CardsWithAside tooltipPosition=\"right\">  // default\n<CardsWithAside tooltipPosition=\"left\">\n<CardsWithAside tooltipPosition=\"top\">\n<CardsWithAside tooltipPosition=\"bottom\">",
+            "// La posición global es \"right\" (default), pero cada tab puede sobrescribirla\n<CardsWithAside tooltipPosition=\"right\">\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Usuario\"\n    // Sin tooltipPosition, usa la global \"right\"\n  >\n    ...\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración\"\n    tooltipPosition=\"top\"  // Sobrescribe la global\n  >\n    ...\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Notificaciones\"\n    tooltipPosition=\"bottom\"  // Sobrescribe la global\n  >\n    ...\n  </CardsWithAside.TabContent>\n</CardsWithAside>",
+            "// Mostrar tooltips (default)\n<CardsWithAside showTooltips={true}>\n  ...\n</CardsWithAside>\n\n// Ocultar tooltips\n<CardsWithAside showTooltips={false}>\n  ...\n</CardsWithAside>",
+            "<CardsWithAside activeCard={activeCard}>\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Ver información del usuario\"  // Tooltip descriptivo\n  >\n    <UserContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración general\"  // Tooltip descriptivo\n  >\n    <SettingsContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Centro de notificaciones\"  // Tooltip descriptivo\n  >\n    <NotificationsContent />\n  </CardsWithAside.TabContent>\n</CardsWithAside>"
+          ]
+        },
+        {
+          "name": "TabContent",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Componente CardsWithAside que muestra contenido inicial con un panel lateral deslizable que contiene tabs con iconos. Permite mostrar contenido adicional al hacer click en los iconos del panel lateral.",
+            "jsdoc": "Componente TabContent para usar dentro de CardsWithAside",
+            "confidence": "high"
+          },
+          "examples": [
+            "<CardsWithAside activeCard={activeCard}>\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Ver información del usuario\"  // Tooltip descriptivo\n  >\n    <UserContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración general\"  // Tooltip descriptivo\n  >\n    <SettingsContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Centro de notificaciones\"  // Tooltip descriptivo\n  >\n    <NotificationsContent />\n  </CardsWithAside.TabContent>\n</CardsWithAside>",
+            "// Posición global de tooltips (afecta a todos los tabs)\n<CardsWithAside tooltipPosition=\"right\">  // default\n<CardsWithAside tooltipPosition=\"left\">\n<CardsWithAside tooltipPosition=\"top\">\n<CardsWithAside tooltipPosition=\"bottom\">",
+            "// La posición global es \"right\" (default), pero cada tab puede sobrescribirla\n<CardsWithAside tooltipPosition=\"right\">\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Usuario\"\n    // Sin tooltipPosition, usa la global \"right\"\n  >\n    ...\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración\"\n    tooltipPosition=\"top\"  // Sobrescribe la global\n  >\n    ...\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Notificaciones\"\n    tooltipPosition=\"bottom\"  // Sobrescribe la global\n  >\n    ...\n  </CardsWithAside.TabContent>\n</CardsWithAside>",
+            "// Mostrar tooltips (default)\n<CardsWithAside showTooltips={true}>\n  ...\n</CardsWithAside>\n\n// Ocultar tooltips\n<CardsWithAside showTooltips={false}>\n  ...\n</CardsWithAside>",
+            "<CardsWithAside activeCard={activeCard}>\n  <CardsWithAside.TabContent\n    id=\"user\"\n    icon={faUser}\n    tooltip=\"Ver información del usuario\"  // Tooltip descriptivo\n  >\n    <UserContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"settings\"\n    icon={faCog}\n    tooltip=\"Configuración general\"  // Tooltip descriptivo\n  >\n    <SettingsContent />\n  </CardsWithAside.TabContent>\n  \n  <CardsWithAside.TabContent\n    id=\"notifications\"\n    icon={faBell}\n    tooltip=\"Centro de notificaciones\"  // Tooltip descriptivo\n  >\n    <NotificationsContent />\n  </CardsWithAside.TabContent>\n</CardsWithAside>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "CatalogCard",
+      "path": "src/modules/CatalogCard",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "CatalogCard",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "**CatalogCard** — tarjeta de catálogo / proveedor / usuario (API **cerrada** por props) alineada al archivo Figma\n[Cards](https://www.figma.com/design/3w0SWvV7C5tDKUybsOcgA4/Cards).\nImplementación partida en {@link CatalogCatalogCard}, {@link CatalogSupplierCard} y paneles de menú\n(`catalogCardMenuPanels`) para mantener archivos acotados.\nNo expone slots `media` / `details` / `cta` con ReactNode arbitrario: el organismo compone `Picture`,\n`Icon`, `Tooltip`, `Button`, `Badge`, `Picture`, `Popup` y `List` según props. El menú **…** es lista de acciones\n({@link CatalogCardMenuItem}); los checkboxes de `tags` van en el panel del **CTA principal** (`onPrimaryTagsSelectionChange`).\nFamilia **`user`**: mismo layout que proveedor (~270px), **sin** rating; opcional **`profile.avatarImageSrc`** (o p",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Checkbox",
+      "path": "src/modules/Checkbox",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Checkbox",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Componente base de checkbox basado en los tokens semánticos de Figma.\n\n### Tokens de Figma usados:\n| Token | Valor | Clase Tailwind |\n|---|---|---|\n| \\",
+            "jsdoc": "Estado del checkbox (marcado o no) */\n  checked: boolean;\n  /** Estado indeterminado (parcialmente seleccionado) */\n  indeterminate?: boolean;\n  /** Handler cuando cambia el estado */\n  onChange: (checked: boolean) => void;\n  /** Si el checkbox está deshabilitado */\n  disabled?: boolean;\n  /** Si el checkbox tiene estado de error */\n  error?: boolean;\n  /** Clases CSS adicionales para el input */\n  className?: string;\n  /** Hace el checkbox redondo en lugar de cuadrado */\n  round?: boolean;\n  /** Tamaño del checkbox */\n  size?: 'sm' | 'md';\n  /** Nombre del input para formularios */\n  name?: string;\n  /** ID del input */\n  id?: string;\n  /** Texto del label asociado al checkbox */\n  label?: string;\n  /** Texto de soporte debajo del label */\n  supportingText?: string;\n  /** Clases CSS adici",
+            "readme": "# Checkbox Component\n\nComponente de checkbox con soporte para estados indeterminados, labels y texto de soporte.\n\n## Uso Básico\n\n```tsx\nimport { Checkbox } from '@imj_media/ui';\n\n// Checkbox simple\n<Checkbox\n  checked={isChecked}\n  onChange={(checked) => setIsChecked(checked)}\n/>\n\n// Checkbox con label\n<Checkbox\n  checked={isChecked}\n  onChange={(checked) => setIsChecked(checked)}\n  label=\"Acepto los términos y condiciones\"\n/>\n\n// Checkbox con texto de soporte\n<Checkbox\n  checked={isChecked}\n  onChange={(checked) => setIsChecked(checked)}\n  label=\"Suscribirse al newsletter\"\n  supportingText=\"Recibirás actualizaciones por correo\"\n/>\n```\n\n## Props\n\n### Props Requeridos\n\n- `checked: boolean` - Estado del checkbox (marcado o no)\n- `onChange: (checked: boolean) => void` - Handler cuando cambia el estado\n\n### Props Opcionales\n\n- `indeterminate?: boolean` - Estado indeterminado (parcialmente seleccionado) (default: `false`)\n- `disabled?: boolean` - Si el checkbox está deshabilitado (default: `false`)\n- `error?: boolean` - Si el checkbox tiene estado de error (default: `false`)\n- `round?: boolean` - Hace el checkbox redondo en lugar de cuadrado (default: `false`)\n- `size?: 'sm' | 'md'` - Tamaño del checkbox (default: `'md'`)\n- `name?: string` - Nombre del input para formularios\n- `id?: string` - ID del input\n- `label?: string` - Texto del label asociado al checkbox\n- `supportingText?: string` - Texto de soporte debajo del label\n- `className?: string` - Clases CSS adicionales para el input\n- `classNameLabel?: string` - Clases CSS adicionales para el contenedor del label\n\n## Ejemplos\n\n### Checkbox con estado indeterminado\n\n```tsx\n<Checkbox\n  checked={false}\n  indeterminate={true}\n  onChange={(checked) => console.log(checked)}\n  label=\"Seleccionar todos\"\n/>\n```\n\n### Checkbox deshabilitado\n\n```tsx\n<Checkbox checked={true} disabled={true} onChange={(checked) => {}} label=\"Opción deshabilitada\" />\n```\n\n### Checkbox con error\n\n```tsx\n<Checkbox\n  checked={false}\n  error={true}\n  on",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Checkbox } from '@imj_media/ui'\n\n// Default (unchecked): bg-fill + border-default\n<Checkbox checked={false} onChange={setChecked} />\n\n// Checked: bg-fill-brand + border-transparent (sin borde visible)\n<Checkbox checked={true} onChange={setChecked} />\n\n// Indeterminate: bg-fill-brand + minus SVG\n<Checkbox checked={false} indeterminate onChange={() => {}} />\n\n// Disabled: bg-fill-disabled + border-disabled / bg-fill-brand-disabled\n<Checkbox checked={false} onChange={() => {}} disabled />\n<Checkbox checked={true} onChange={() => {}} disabled />",
+            "// Error unchecked: bg-fill + border-danger\n<Checkbox checked={false} onChange={setChecked} error />\n\n// Error checked: bg-fill-brand + border-danger\n<Checkbox checked={true} onChange={setChecked} error />\n\n// Error indeterminate: bg-fill-brand + border-danger\n<Checkbox checked={false} indeterminate onChange={() => {}} error />",
+            "// Cuadrado: radius/surface/forms = 2px\n<Checkbox checked={checked} onChange={setChecked} />\n\n// Redondo: rounded-full\n<Checkbox checked={checked} onChange={setChecked} round />",
+            "<Checkbox checked={checked} onChange={setChecked} size=\"sm\" />\n<Checkbox checked={checked} onChange={setChecked} size=\"md\" />",
+            "// Con label y supporting text\n<Checkbox\n  checked={checked}\n  onChange={setChecked}\n  id=\"terms\"\n  label=\"Label\"\n  supportingText=\"Supporting text\"\n/>\n\n// Con error\n<Checkbox\n  checked={false}\n  onChange={setChecked}\n  id=\"error-field\"\n  label=\"Label\"\n  supportingText=\"Supporting text\"\n  error\n/>\n\n// Disabled\n<Checkbox\n  checked={true}\n  onChange={setChecked}\n  id=\"disabled-field\"\n  label=\"Label\"\n  supportingText=\"Supporting text\"\n  disabled\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "DatePicker",
+      "path": "src/modules/DatePicker",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "DatePicker",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## DatePicker - Selector de Fechas\n\nUn componente completo y flexible para seleccionar fechas individuales o rangos de fechas.\n\n### Características principales:\n- **Modo único**: Selección de una fecha específica\n- **Modo rango**: Selección de un rango de fechas (inicio y fin)\n- **Vistas múltiples**: Días, meses y años\n- **Internacionalización**: Soporte para diferentes idiomas\n- **Personalización**: Estilos y comportamientos configurables\n- **Validación**: Fechas mínimas y máximas\n- **Modos de control**: Controlado y no controlado\n\n### Casos de uso comunes:\n- Formularios de reservas\n- Filtros de fechas\n- Calendarios de eventos\n- Selectores de período",
+            "readme": "# DatePicker - Estructura Modular\n\nEste módulo contiene una implementación modular del DatePicker con componentes atómicos, moleculares y orgánicos, junto con hooks personalizados y tipos TypeScript.\n\n## Estructura de Carpetas\n\n```\nDatePicker/\n├── atoms/           # Componentes atómicos (más básicos)\n├── molecules/       # Componentes moleculares (combinan átomos)\n├── organisms/       # Componentes orgánicos (combinan moléculas)\n├── types/           # Definiciones de tipos TypeScript\n├── hooks/           # Hooks personalizados\n├── stories/         # Storybook stories\n└── index.tsx        # Componente principal (legacy)\n```\n\n## Componentes Atómicos (`atoms/`)\n\nComponentes más básicos y reutilizables:\n\n- **Day**: Representa un día individual en el calendario\n- **Month**: Representa un mes en la vista de meses\n- **Year**: Representa un año en la vista de años\n- **WeekDay**: Representa los días de la semana\n- **NavigationButton**: Botón de navegación (anterior/siguiente)\n\n## Componentes Moleculares (`molecules/`)\n\nCombinan componentes atómicos para crear funcionalidades más complejas:\n\n- **CalendarHeader**: Header del calendario con navegación\n- **CalendarGrid**: Cuadrícula de días del calendario\n- **MonthGrid**: Cuadrícula de meses\n- **YearGrid**: Cuadrícula de años\n- **DateInput**: Input para la fecha\n\n## Componentes Orgánicos (`organisms/`)\n\nCombinan componentes moleculares para crear funcionalidades completas:\n\n- **Calendar**: Calendario completo con todas las vistas\n- **DatePickerPortal**: Portal del DatePicker con manejo de posicionamiento\n\n## Hooks (`hooks/`)\n\nHooks personalizados para la lógica del DatePicker:\n\n- **useDatePicker**: Hook principal que maneja el estado del DatePicker\n- **useDateRange**: Hook para manejar rangos de fechas\n- **useCalendar**: Hook para la lógica del calendario\n- **useDateInput**: Hook para el manejo del input\n- **usePortal**: Hook para el manejo del portal\n\n## Tipos (`types/`)\n\nDefiniciones de tipos TypeScript organizadas por funcion",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { DatePicker } from '@imj_media/ui';\n\n  export default function Example() {\n    return <DatePicker />\n  }",
+            "import { DatePicker } from '@imj_media/ui';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [selectedDate, setSelectedDate] = useState<Date | null>(new Date('2024-07-15'));\n\n    return (\n      <DatePicker\n        selectedDate={selectedDate}\n        onDateChange={setSelectedDate}\n      />\n    );\n  }",
+            "import { DatePicker } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <DatePicker \n        mode=\"range\"\n        selectedRange={{\n          start: new Date('2024-07-10'),\n          end: new Date('2024-07-20'),\n        }}\n      />\n    )\n  }",
+            "// Caso que antes fallaba (desfase 1 día en zonas UTC−N):\n// selectedRange={{ start: new Date(\"2026-02-01T00:00:00.000Z\"), end: new Date(\"2026-02-28T00:00:00.000Z\") }}\n// Sin normalización: en México (UTC-6) se veía 31/01 - 27/02.\n// Con normalización interna (toLocalDateOnly): se muestra 01/02 - 28/02.",
+            "import { DatePicker } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <DatePicker \n      minDate={minDate ?? undefined}\n      maxDate={maxDate ?? undefined}\n      selectedRange={range}\n      onRangeChange={setRange}\n    />\n  )\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Drawer",
+      "path": "src/modules/Drawer",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Drawer",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Drawer permite mostrar contenido en un panel lateral deslizable con diferentes tamaños, posiciones y configuraciones de botones.",
+            "jsdoc": "DrawerFooter - Subcomponente de footer para Drawer\n@internal\n/\nconst DrawerFooter = ({ children, className }: DrawerFooterProps) => {\n  return (\n    <Card.Footer\n      className={cn('ui-flex ui-items-center ui-justify-end ui-gap-x-16 ui-p-16', className)}\n    >\n      {children}\n    </Card.Footer>\n  );\n};\n\n// Nombre para identificar el componente\nDrawerFooter.displayName = 'DrawerFooter';\n\n// Función auxiliar para extraer el footer de los children\nconst extractFooterFromChildren = (\n  children: ReactNode,\n): { content: ReactNode[]; footer: ReactElement | null } => {\n  const content: ReactNode[] = [];\n  let footer: ReactElement | null = null;\n\n  Children.forEach(children, (child) => {\n    if (\n      isValidElement(child) &&\n      (child.type as { displayName?: string })?.displayName === 'Dra",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Drawer } from '@/modules/Drawer';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Drawer\n      isOpen={isOpen}\n      onClose={() => setIsOpen(false)}\n      title=\"Drawer Básico\"\n      size=\"md\"\n      position=\"right\"\n    >\n      <p>Contenido del drawer aquí</p>\n    </Drawer>\n  )\n}",
+            "<Drawer\n  isOpen={isOpen}\n  onClose={handleClose}\n  title=\"…\"\n  closeButton={{ tooltip: true }}\n>\n  …\n</Drawer>",
+            "<Drawer size=\"sm\">...</Drawer>  // 280px\n<Drawer size=\"md\">...</Drawer>  // 400px (default)\n<Drawer size=\"lg\">...</Drawer>  // 560px",
+            "<Drawer position=\"left\">...</Drawer>\n<Drawer position=\"right\">...</Drawer>  // default",
+            "// Max-width personalizado\n<Drawer maxWidth=\"600px\">...</Drawer>\n<Drawer maxWidth=\"50%\">...</Drawer>\n\n// Sin max-width (full width)\n<Drawer fullWidth>...</Drawer>\n\n// Adaptar al contenido interno ✨\n<Drawer fitContent>\n  <div style={{ width: '350px' }}>\n    Contenido con ancho definido\n  </div>\n</Drawer>\n\n// Max-width por defecto basado en size\n<Drawer size=\"md\">...</Drawer>  // max-width: 400px"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Dropdown",
+      "path": "src/modules/Dropdown",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Dropdown",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "**API agrupada:**",
+            "jsdoc": "Dropdown - Componente de dropdown/select versátil y configurable\nComponente de dropdown que soporta búsqueda, selección múltiple, diferentes variantes de lista,\nestados controlados/no controlados, y múltiples tipos de opciones (default, checkbox, radio, toggle, user).\n**Ancho del menú:** el panel de la lista usa por defecto el ancho del trigger como `width` y\n`maxWidth` (no supera el campo). `popover.fullWidth` por defecto es `true` (campo a ancho completo\ndel contenedor).\n**Orden en lista:** por defecto (`list.pinSelectedFirst`), la opción seleccionada aparece arriba\nen el panel (salvo listas con `isGroupTitle`). Desactivar con `list={{ pinSelectedFirst: false }}`.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Dropdown } from '@/modules/Dropdown';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [value, setValue] = useState('1');\n\n    return (\n      <Dropdown\n        field={{\n          label: 'Selecciona una opción',\n          placeholder: 'Elige una opción',\n        }}\n        items={{\n          options: [\n            { label: 'Opción 1', value: '1' },\n            { label: 'Opción 2', value: '2' },\n            { label: 'Opción 3', value: '3' },\n          ],\n        }}\n        values={{ value }}\n        events={{ onValueChange: setValue }}\n      />\n    )\n  }",
+            "const [value, setValue] = useState('1');\n\n  <Dropdown\n    field={{ label: 'Dropdown con búsqueda', placeholder: 'Busca y selecciona' }}\n    menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n    items={{ options: manyOptions }}\n    values={{ value }}\n    events={{ onValueChange: setValue }}\n  />",
+            "const [value, setValue] = useState(-1);\n\n  <Dropdown\n    field={{ label: 'Dropdown con Opción por Defecto', placeholder: 'Selecciona una opción' }}\n    items={{\n      options: [\n        { label: 'Opción 1', value: '1' },\n        { label: 'Opción 2', value: '2' },\n        { label: 'Opción 3', value: '3' },\n      ],\n      defaultOptionSelected: true,\n    }}\n    values={{ value }}\n    events={{ onValueChange: setValue }}\n  />",
+            "const [value1, setValue1] = useState('');\n  const [value2, setValue2] = useState('');\n  const [value3, setValue3] = useState('');\n\n  const handleValue1Change = createSingleValueHandler(setValue1);\n  const handleValue2Change = createSingleValueHandler(setValue2);\n  const handleValue3Change = createSingleValueHandler(setValue3);\n\n  <div className=\"space-y-4\">\n    <Dropdown\n      field={{ label: 'Primer dropdown', placeholder: 'Selecciona opción 1' }}\n      items={{ options: sampleOptions }}\n      values={{ value: value1 }}\n      events={{ onValueChange: handleValue1Change }}\n      menuSearch={{ searchable: true }}\n    />\n    <Dropdown\n      field={{ label: 'Segundo dropdown', placeholder: 'Selecciona opción 2' }}\n      items={{ options: sampleOptions }}\n      values={{ value: value2 }}\n      events={{ onValueChange: handleValue2Change }}\n    />\n    <Dropdown\n      field={{ label: 'Tercer dropdown', placeholder: 'Selecciona opción 3' }}\n      items={{ options: sampleOptions }}\n      values={{ value: value3 }}\n      events={{ onValueChange: handleValue3Change }}\n      slots={{ leftSlot: faSearch }}\n    />\n  </div>",
+            "const [selectedUser, setSelectedUser] = useState('USR001');\n  const [selectedProduct, setSelectedProduct] = useState('PROD-A-001');\n\n  const handleUserChange = createSingleValueHandler(setSelectedUser);\n  const handleProductChange = createSingleValueHandler(setSelectedProduct);\n\n  <Dropdown\n    field={{ label: 'Seleccionar Usuario', placeholder: 'Elige un usuario' }}\n    items={{ options: customOptions, valueName: 'code', idName: 'identifier' }}\n    values={{ value: selectedUser }}\n    events={{ onValueChange: handleUserChange }}\n    menuSearch={{ searchable: true }}\n  />\n\n  <Dropdown\n    field={{ label: 'Seleccionar Producto', placeholder: 'Elige un producto' }}\n    items={{ options: productOptions, valueName: 'sku', idName: 'productId' }}\n    values={{ value: selectedProduct }}\n    events={{ onValueChange: handleProductChange }}\n    menuSearch={{ searchable: true }}\n  />",
+            "<Dropdown\n  field={{ label: 'Menú de opciones', placeholder: 'Selecciona una opción' }}\n  items={{ options: [/* … */] }}\n  values={{ value }}\n  events={{ onValueChange: setValue }}\n  list={{ listVariant: 'default' }}\n  menuSearch={{ searchable: true }}\n/>",
+            "<Dropdown\n  field={{ label: 'Configuración', placeholder: 'Selecciona una opción' }}\n  items={{ options: [/* … */] }}\n  values={{ value }}\n  events={{ onValueChange: setValue }}\n  list={{ listVariant: 'list-default' }}\n  menuSearch={{ searchable: true }}\n/>",
+            "<Dropdown\n  field={{ label: 'Opciones simples', placeholder: 'Selecciona...' }}\n  items={{ options: [/* … */] }}\n  values={{ value }}\n  events={{ onValueChange: setValue }}\n  list={{ listVariant: 'list-default' }}\n/>",
+            "<Dropdown\n  field={{ label: 'Idioma', placeholder: 'Selecciona un idioma' }}\n  items={{ options: [/* … */] }}\n  values={{ value }}\n  events={{ onValueChange: setValue }}\n  list={{ listVariant: 'radio' }}\n/>",
+            "const [toggles, setToggles] = useState({\n  darkMode: false,\n  notifications: true,\n  sounds: false,\n  autoSave: true,\n});\n\nconst toggleOptions = [\n  {\n    label: 'Modo oscuro',\n    value: 'darkMode',\n    description: 'Activar el tema oscuro',\n    checked: toggles.darkMode,\n  },\n  {\n    label: 'Notificaciones',\n    value: 'notifications',\n    description: 'Recibir notificaciones push',\n    checked: toggles.notifications,\n  },\n];\n\n<Dropdown\n  field={{ label: 'Preferencias', placeholder: 'Configurar preferencias' }}\n  items={{ options: toggleOptions }}\n  list={{ listVariant: 'toggle' }}\n  events={{\n    onToggleChange: (option, checked) => {\n      setToggles((prev) => ({ ...prev, [option.value as string]: checked }));\n    },\n  }}\n/>",
+            "import { useState } from 'react';\n\n  export default function BasicMultipleSelection() {\n    const [selectedValues, setSelectedValues] = useState([]);\n    \n    const handleValueChange = (value) => {\n      if (Array.isArray(value)) {\n        setSelectedValues(value);\n      }\n    };\n\n    return (\n      <Dropdown\n        field={{ label: 'Selección Múltiple', placeholder: 'Selecciona múltiples opciones' }}\n        items={{ options: sampleOptions }}\n        values={{ value: selectedValues }}\n        events={{ onValueChange: handleValueChange }}\n        multi={{ multiple: true, selectionSummary: 'tags' }}\n        menuSearch={{ searchable: true }}\n      />\n    );\n  }",
+            "<Dropdown\n    field={{ label: 'Filtros', placeholder: 'Selecciona…' }}\n    items={{ options }}\n    values={{ value: selectedValues }}\n    events={{ onValueChange: setSelectedValues }}\n    multi={{\n      multiple: true,\n      selectionSummary: 'tags',\n      tagsOverflow: 'single-line',\n      tagsOverflowPopoverTitle: 'Tipos de medio',\n    }}\n    menuSearch={{ searchable: true }}\n  />",
+            "import { faShapes } from '@fortawesome/pro-regular-svg-icons';\n  import { Dropdown } from '@/modules/Dropdown';\n\n  <Dropdown\n    field={{ label: 'Tipo de Indoor padre', placeholder: 'Selecciona uno...' }}\n    slots={{ leftSlot: faShapes }}\n    popover={{ fullWidth: true, popoverZIndex: 1300 }}\n    menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n    items={{ options: opciones }}\n    multi={{\n      multiple: true,\n      selectionSummary: 'tags',\n      tagsOverflow: 'single-line',\n      tagsOverflowPopoverTitle: 'Tipos InDoor padre',\n      tagsOverflowPopoverZIndex: 1300,\n    }}\n    checkbox={{\n      withCheckbox: true,\n      checkboxSelectionTone: 'subtle',\n      checkboxPosition: 'end',\n      checkboxListDensity: 'compact',\n    }}\n    values={{ value: tiposPadreSeleccionIds }}\n    events={{ onValueChange: (v) => { /* ... */ } }}\n  />",
+            "import { useState } from 'react';\n  import { Dropdown } from '@/modules/Dropdown';\n\n  const options = [\n    { label: 'Bonnie Green', value: '1', avatarUrl: 'https://i.pravatar.cc/32?img=5' },\n    // …\n  ];\n\n  export default function Example() {\n    const [selectedValues, setSelectedValues] = useState(['1', '2', '3', '4', '5', '6']);\n\n    return (\n      <Dropdown\n        field={{ label: 'Usuarios', placeholder: 'Buscar...' }}\n        items={{ options }}\n        values={{ value: selectedValues }}\n        events={{ onValueChange: (v) => Array.isArray(v) && setSelectedValues(v) }}\n        multi={{\n          multiple: true,\n          selectionSummary: 'tags',\n          tagsOverflow: 'single-line',\n          tagsOverflowPopoverTitle: 'Tipos de medio',\n        }}\n        checkbox={{\n          withCheckbox: true,\n          checkboxSelectionTone: 'subtle',\n          checkboxPosition: 'end',\n          checkboxListDensity: 'compact',\n        }}\n        menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n      />\n    );\n  }",
+            "<Dropdown\n    field={{ label: 'Plazas', placeholder: 'Seleccionar…' }}\n    items={{ options }}\n    values={{ value: selectedValues }}\n    events={{ onValueChange: (v) => Array.isArray(v) && setSelectedValues(v) }}\n    multi={{\n      multiple: true,\n      selectionSummary: 'tags',\n      tagsOverflow: 'single-line',\n      tagsOverflowPopoverTitle: 'Plazas seleccionadas',\n    }}\n    list={{\n      listVariant: 'search-multi-checkbox',\n      searchMultiCheckbox: {\n        search: { placeholder: 'Buscar plaza…', show: true },\n        header: { id: 'all-plazas', label: 'Todas las plazas' },\n        showClearSelection: true,\n      },\n    }}\n    menuSearch={{ searchable: false }}\n  />\n  {/* Sin buscador en lista: searchMultiCheckbox.search.show: false */}\n  {/* Sin botón «Limpiar selección»: searchMultiCheckbox.showClearSelection: false */}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Emoji",
+      "path": "src/modules/Emoji",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Emoji",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Emoji permite mostrar emojis del sistema con diferentes tamaños y nombres en español.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Emoji } from '@/modules/Emoji';\n\n  export default function Example() {\n    return <Emoji name=\"abeja\" />\n  }",
+            "// Ejemplo de uso de emojis\n<Emoji name=\"feliz\" size=\"md\" />\n<Emoji name=\"corazon\" size=\"lg\" />\n<Emoji name=\"pizza\" size=\"xl\" />\n\n// Buscar emojis disponibles\nconst emojiName = \"feliz\"; // Usar el nombre exacto del emoji\n\n// Categorías disponibles\nconst categories = {\n  emociones: ['feliz', 'triste', 'enojado', ...],\n  animales: ['perro', 'gato', 'abeja', ...],\n  comida: ['pizza', 'cafe', 'manzana', ...],\n  // ... más categorías\n};",
+            "import { Emoji } from '@/modules/Emoji';\n\n  export default function Example() {\n    return <Emoji name=\"abeja\" />\n  }",
+            "// Ejemplo de uso de emojis\n<Emoji name=\"feliz\" size=\"md\" />\n<Emoji name=\"corazon\" size=\"lg\" />\n<Emoji name=\"pizza\" size=\"xl\" />\n\n// Buscar emojis disponibles\nconst emojiName = \"feliz\"; // Usar el nombre exacto del emoji\n\n// Categorías disponibles\nconst categories = {\n  emociones: ['feliz', 'triste', 'enojado', ...],\n  animales: ['perro', 'gato', 'abeja', ...],\n  comida: ['pizza', 'cafe', 'manzana', ...],\n  // ... más categorías\n};"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "EmojiPicker",
+      "path": "src/modules/EmojiPicker",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "EmojiPicker",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# EmojiPicker\n\nComponente selector de emojis con categorías, búsqueda y gestión de emojis recientes.\n\n## Características\n\n- ✅ 8 categorías predefinidas de emojis\n- 🔍 Búsqueda de emojis en tiempo real\n- 🕐 Gestión automática de emojis recientes (localStorage)\n- 📱 Diseño responsive y adaptable\n- 🎨 Totalmente personalizable (ancho, alto, etc.)\n- ♿ Accesible (ARIA labels)\n- 🎯 TypeScript completamente tipado\n\n## Categorías\n\nEl componente incluye las siguientes categorías de emojis:\n\n1. **Recientes** - Emojis usados recientemente\n2. **Sonrisas y personas** - Emojis de emociones y expresiones\n3. **Animales** - Emojis de animales y naturaleza\n4. **Comida** - Emojis de comida y bebida\n5. **Deportes** - Emojis de actividades deportivas\n6. **Viajes** - Emojis de viajes y lugares\n7. **Objetos** - Emojis de objetos diversos\n8. **Símbolos** - Emojis de símbolos y formas\n9. **Banderas** - Emojis de banderas de países\n\n## Uso básico\n\n```tsx\nimport { EmojiPicker } from '@imjmedia/ui';\n\nfunction MyComponent() {\n  const handleEmojiSelect = (emoji: string) => {\n    console.log('Emoji seleccionado:', emoji);\n  };\n\n  return <EmojiPicker onEmojiSelect={handleEmojiSelect} />;\n}\n```\n\n## Uso con Popup\n\nEl EmojiPicker funciona perfectamente dentro de un Popup:\n\n```tsx\nimport { EmojiPicker, Popup } from '@imjmedia/ui';\nimport { useState } from 'react';\n\nfunction MyComponent() {\n  const [selectedEmoji, setSelectedEmoji] = useState('😊');\n\n  return (\n    <Popup\n      label={selectedEmoji}\n      position=\"bottom-left\"\n      variant=\"outlined\"\n      color=\"white\"\n      size=\"md\"\n      borderRadius=\"md\"\n      closeOnClick={true}\n    >\n      <EmojiPicker onEmojiSelect={setSelectedEmoji} />\n    </Popup>\n  );\n}\n```\n\n## Props\n\n### EmojiPickerProps\n\n| Prop                  | Tipo                      | Default       | Descripción                                 |\n| --------------------- | ------------------------- | ------------- | ------------------------------------------- |\n| `onEmojiSelect`",
+            "confidence": "low"
+          },
+          "examples": [
+            "const [selectedEmoji, setSelectedEmoji] = useState('')\n\n<EmojiPicker onEmojiSelect={setSelectedEmoji} />",
+            "const [selectedEmoji, setSelectedEmoji] = useState('🎉')\n\n<EmojiPicker \n  label={selectedEmoji}\n  onEmojiSelect={setSelectedEmoji} \n/>",
+            "<EmojiPicker \n  width={320} \n  height={400}\n  onEmojiSelect={(emoji) => console.log(emoji)} \n/>",
+            "<EmojiPicker \n  showSearch={false}\n  onEmojiSelect={(emoji) => console.log(emoji)} \n/>",
+            "<EmojiPicker \n  position=\"bottom-left\"\n  onEmojiSelect={(emoji) => console.log(emoji)} \n/>\n\n<EmojiPicker \n  position=\"top\"\n  onEmojiSelect={(emoji) => console.log(emoji)} \n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "FileUploader",
+      "path": "src/modules/FileUploader",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "FileUploader",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:",
+            "jsdoc": "50 MiB — mismo criterio que el texto por defecto de `dropZone.hint`. */\nconst DEFAULT_MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024;\n\nconst DEFAULT_CONSTRAINTS = {\n  multiple: true,\n  /** Alineado con el hint por defecto (PNG, JPG, CSV, PDF). */\n  accept: '.png,.jpg,.jpeg,.csv,.pdf',\n  maxFileSizeBytes: DEFAULT_MAX_FILE_SIZE_BYTES,\n} as const;\n\nconst DEFAULT_LIST = {\n  rowSize: 'lg' as FileUploadListRowSize,\n};\n\n/**\nCapas de un icono Font Awesome duotone (mapea a `Icon` / `IconFont`).\n/\nexport interface FileUploaderDropZoneIconDuotoneProps {\n  primary?: IconFontColor;\n  secondary?: IconFontColor;\n  opacityPrimary?: number;\n  opacitySecondary?: number;\n}\n\n/**\nIcono de la zona discontinua (misma superficie que `Icon`: tamaño, color y duotono).\nSe fusiona con valores por defecto (`faFile`, `xl`, `di",
+            "confidence": "high"
+          },
+          "examples": [
+            "<FileUploader\n    events={{\n      onFilesAccepted: (files) => { /* ... */ },\n      onValidationError: (message, file) => { /* ... */ },\n    }}\n  />\n  // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB",
+            "<FileUploader\n    dropZone={{\n      error: 'El archivo no tiene un tipo permitido o supera el límite.',\n    }}\n  />\n  // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'uploading',\n          progress: 35,\n          secondsRemaining: 5,\n          detailLine: '3.4 Mb | 35%',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'error',\n          errorMessage: 'Error al cargar el archivo.',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n      onRetryItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [/* ... status: 'complete', progress: 100 */],\n      rowSize: 'lg',\n      onRemoveItem: (id) => { /* ... */ },\n      onDeleteItem: (id) => { /* ... */ },\n    }}\n  />"
+          ],
+          "props": {
+            "groups": {
+              "fileUploaderDropZoneIcon": {
+                "props": {
+                  "name": {
+                    "name": "name",
+                    "type": "AnyIconDefinition",
+                    "required": false
+                  },
+                  "size": {
+                    "name": "size",
+                    "type": "IconFontSize",
+                    "required": false
+                  },
+                  "color": {
+                    "name": "color",
+                    "type": "IconFontColor",
+                    "required": false
+                  },
+                  "colorActive": {
+                    "name": "colorActive",
+                    "type": "IconFontColor",
+                    "required": false
+                  },
+                  "className": {
+                    "name": "className",
+                    "type": "string",
+                    "required": false
+                  },
+                  "Duotono": {
+                    "name": "Duotono",
+                    "type": "colores y opacidades por capa. */",
+                    "required": true
+                  },
+                  "duotone": {
+                    "name": "duotone",
+                    "type": "FileUploaderDropZoneIconDuotoneProps",
+                    "required": false
+                  }
+                }
+              },
+              "fileUploaderDropZone": {
+                "props": {
+                  "Figma": {
+                    "name": "Figma",
+                    "type": "«Arrastra y suelta tus archivos»). */",
+                    "required": true
+                  },
+                  "title": {
+                    "name": "title",
+                    "type": "string",
+                    "required": false
+                  },
+                  "hint": {
+                    "name": "hint",
+                    "type": "string",
+                    "required": false
+                  },
+                  "selectLabel": {
+                    "name": "selectLabel",
+                    "type": "string",
+                    "required": false
+                  },
+                  "error": {
+                    "name": "error",
+                    "type": "string | null",
+                    "required": false
+                  },
+                  "icon": {
+                    "name": "icon",
+                    "type": "FileUploaderDropZoneIconProps",
+                    "required": false
+                  }
+                }
+              },
+              "fileUploaderConstraints": {
+                "props": {
+                  "defecto": {
+                    "name": "defecto",
+                    "type": "50 MiB (mismo mensaje que el hint).",
+                    "required": true
+                  },
+                  "accept": {
+                    "name": "accept",
+                    "type": "string",
+                    "required": false
+                  },
+                  "maxFileSizeBytes": {
+                    "name": "maxFileSizeBytes",
+                    "type": "number",
+                    "required": false
+                  },
+                  "maxFiles": {
+                    "name": "maxFiles",
+                    "type": "number",
+                    "required": false
+                  },
+                  "maxFilesPerBatch": {
+                    "name": "maxFilesPerBatch",
+                    "type": "number",
+                    "required": false
+                  },
+                  "multiple": {
+                    "name": "multiple",
+                    "type": "boolean",
+                    "required": false
+                  }
+                }
+              },
+              "fileUploaderList": {
+                "props": {
+                  "items": {
+                    "name": "items",
+                    "type": "FileUploadListItemData[]",
+                    "required": false
+                  },
+                  "rowSize": {
+                    "name": "rowSize",
+                    "type": "FileUploadListRowSize",
+                    "required": false
+                  },
+                  "onRemoveItem": {
+                    "name": "onRemoveItem",
+                    "type": "(id: string) => void",
+                    "required": false
+                  },
+                  "onRetryItem": {
+                    "name": "onRetryItem",
+                    "type": "(id: string) => void",
+                    "required": false
+                  },
+                  "onDeleteItem": {
+                    "name": "onDeleteItem",
+                    "type": "(id: string) => void",
+                    "required": false
+                  }
+                }
+              },
+              "fileUploaderEvents": {
+                "props": {
+                  "onFilesAccepted": {
+                    "name": "onFilesAccepted",
+                    "type": "(files: File[]) => void",
+                    "required": false
+                  },
+                  "onValidationError": {
+                    "name": "onValidationError",
+                    "type": "(message: string, files: File[]) => void",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "deprecatedRoot": [],
+            "flat": {
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false
+              },
+              "disabled": {
+                "name": "disabled",
+                "type": "boolean",
+                "required": false
+              },
+              "dropZone": {
+                "name": "dropZone",
+                "type": "FileUploaderDropZoneProps",
+                "required": false,
+                "description": "Zona discontinua: copy visible y `error` de la zona."
+              },
+              "constraints": {
+                "name": "constraints",
+                "type": "FileUploaderConstraintsProps",
+                "required": false,
+                "description": "Input nativo y reglas (`accept`, peso, cupo por lote)."
+              },
+              "list": {
+                "name": "list",
+                "type": "FileUploaderListProps",
+                "required": false,
+                "description": "Lista controlada y callbacks por fila (quitar, reintentar, borrar completado)."
+              },
+              "events": {
+                "name": "events",
+                "type": "FileUploaderEventsProps",
+                "required": false,
+                "description": "Emisión tras validación local; no sustituye el estado de cada fila."
+              }
+            }
+          }
+        },
+        {
+          "name": "FileUploadListItem",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:",
+            "jsdoc": "Datos de la fila (nombre, estado, progreso, etc.). */\n  item: FileUploadListItemData;\n  /** `lg` como fila ancha en Figma; `sm` compacta (sin barra al completar). */\n  rowSize?: FileUploadListRowSize;\n  /** Eliminar esta entrada (siempre; en error va antes del reintento). */\n  onRemove?: (id: string) => void;\n  /**\nReintentar subida tras error (red, 5xx, validación remota, etc.).\nSolo en `status === 'error'`: botón con `faArrowsRotate` junto al cierre (X).\n/\n  onRetry?: (id: string) => void;\n  /** Eliminar archivo completado (papelera). */\n  onDelete?: (id: string) => void;\n  className?: string;\n}\n\n/**\nFila de estado de carga: icono de tipo, título, detalle, barra solo mientras `uploading`,\ny acciones (cerrar, reintentar, papelera, check en completo) según Figma *Loader*.",
+            "confidence": "high"
+          },
+          "examples": [
+            "<FileUploader\n    events={{\n      onFilesAccepted: (files) => { /* ... */ },\n      onValidationError: (message, file) => { /* ... */ },\n    }}\n  />\n  // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB",
+            "<FileUploader\n    dropZone={{\n      error: 'El archivo no tiene un tipo permitido o supera el límite.',\n    }}\n  />\n  // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'uploading',\n          progress: 35,\n          secondsRemaining: 5,\n          detailLine: '3.4 Mb | 35%',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'error',\n          errorMessage: 'Error al cargar el archivo.',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n      onRetryItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [/* ... status: 'complete', progress: 100 */],\n      rowSize: 'lg',\n      onRemoveItem: (id) => { /* ... */ },\n      onDeleteItem: (id) => { /* ... */ },\n    }}\n  />"
+          ]
+        },
+        {
+          "name": "FileTypeIcon",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:",
+            "jsdoc": "Tipo de archivo (artwork en `assets/icons/<format>.svg`). */\n  format: FileUploaderFileFormat;\n  /** Tamaño del bloque (Figma: 18 / 24 / 32). Los SVG de origen son 32×32. */\n  size?: FileTypeIconSize;\n  className?: string;\n}\n\n/**\nIcono de tipo de archivo según Figma `_file types`.\nUsa los vectores en `modules/FileUploader/assets/icons/*.svg` (documento + badge + etiqueta).",
+            "confidence": "high"
+          },
+          "examples": [
+            "<FileUploader\n    events={{\n      onFilesAccepted: (files) => { /* ... */ },\n      onValidationError: (message, file) => { /* ... */ },\n    }}\n  />\n  // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB",
+            "<FileUploader\n    dropZone={{\n      error: 'El archivo no tiene un tipo permitido o supera el límite.',\n    }}\n  />\n  // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'uploading',\n          progress: 35,\n          secondsRemaining: 5,\n          detailLine: '3.4 Mb | 35%',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [\n        {\n          id: '1',\n          fileName: 'informe.png',\n          format: 'png',\n          status: 'error',\n          errorMessage: 'Error al cargar el archivo.',\n        },\n      ],\n      onRemoveItem: (id) => { /* ... */ },\n      onRetryItem: (id) => { /* ... */ },\n    }}\n  />",
+            "<FileUploader\n    list={{\n      items: [/* ... status: 'complete', progress: 100 */],\n      rowSize: 'lg',\n      onRemoveItem: (id) => { /* ... */ },\n      onDeleteItem: (id) => { /* ... */ },\n    }}\n  />"
+          ],
+          "props": {
+            "groups": {
+              "fileTypeIcon": {
+                "props": {
+                  "format": {
+                    "name": "format",
+                    "type": "FileUploaderFileFormat",
+                    "required": true
+                  },
+                  "Figma": {
+                    "name": "Figma",
+                    "type": "18 / 24 / 32). Los SVG de origen son 32×32. */",
+                    "required": true
+                  },
+                  "size": {
+                    "name": "size",
+                    "type": "FileTypeIconSize",
+                    "required": false
+                  },
+                  "className": {
+                    "name": "className",
+                    "type": "string",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "deprecatedRoot": [],
+            "flat": {
+              "format": {
+                "name": "format",
+                "type": "FileUploaderFileFormat",
+                "required": true,
+                "description": "Tipo de archivo (artwork en `assets/icons/<format>.svg`)."
+              },
+              "size": {
+                "name": "size",
+                "type": "FileTypeIconSize",
+                "required": false,
+                "description": "Tamaño del bloque (Figma: 18 / 24 / 32). Los SVG de origen son 32×32."
+              },
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "Filters",
+      "path": "src/modules/Filters",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Filters",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "confidence": "low"
+          },
+          "examples": [
+            "import { useState } from 'react';\n  import { Filters } from '@imj_media/ui';\n  import { faFilter } from '@fortawesome/pro-regular-svg-icons';\n\n  const filters = [\n    {\n      type: 'dropdown',\n      label: 'Estado',\n      keyName: 'estado',\n      placeholder: 'Seleccionar',\n      options: [\n        { label: 'Activo', value: 'activo' },\n        { label: 'Pendiente', value: 'pendiente' },\n      ],\n    },\n    {\n      type: 'input',\n      label: 'Buscar',\n      keyName: 'buscar',\n      placeholder: 'Texto…',\n    },\n  ];\n\n  export function Example() {\n    const [applied, setApplied] = useState<Record<string, unknown> | null>(null);\n\n    return (\n      <Filters\n        size=\"xs\"\n        color=\"secondary\"\n        label=\"Filtros\"\n        title=\"Refinar resultados\"\n        icon={faFilter}\n        clearText=\"Borrar filtros\"\n        filters={filters}\n        onApply={(states) => setApplied(states)}\n        onClear={() => setApplied(null)}\n      />\n    );\n  }",
+            "import { useState } from 'react';\n  import { Filters } from '@imj_media/ui';\n  import { faFilter } from '@fortawesome/pro-regular-svg-icons';\n\n  const filters = [\n    {\n      type: 'dropdown',\n      label: 'Estado',\n      keyName: 'estado',\n      placeholder: 'Seleccionar',\n      options: [\n        { label: 'Activo', value: 'activo' },\n        { label: 'Pendiente', value: 'pendiente' },\n      ],\n    },\n    {\n      type: 'input',\n      label: 'Buscar',\n      keyName: 'buscar',\n      placeholder: 'Texto…',\n    },\n  ];\n\n  export function Example() {\n    const [applied, setApplied] = useState<Record<string, unknown> | null>(null);\n\n    return (\n      <Filters\n        size=\"xs\"\n        color=\"secondary\"\n        label=\"Filtros\"\n        title=\"Refinar resultados\"\n        icon={faFilter}\n        clearText=\"Borrar filtros\"\n        filters={filters}\n        onApply={(states) => setApplied(states)}\n        onClear={() => setApplied(null)}\n      />\n    );\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Ghantt",
+      "path": "src/modules/Ghantt",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Ghantt",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "jsdoc": "X del puntero respecto al borde izquierdo del **mismo** elemento cuyo `scrollLeft` define el desplazamiento\n(viewport de cabecera). Si se mide con el padre del track del cuerpo, thead/tbody pueden desalinearse\n(p. ej. scrollbar vertical solo en el cuerpo) y `scrollLeft + x` cae en el inicio del contenido → anclas en ~2015.\n/\nfunction ghanttWheelTimelineViewportClientX(\n  scrollViewportEl: HTMLElement | null,\n  clientX: number,\n): number {\n  const el = scrollViewportEl;\n  if (!el) return 0;\n  const r = el.getBoundingClientRect();\n  const w = el.clientWidth > 0 ? el.clientWidth : r.width;\n  return Math.max(0, Math.min(w, clientX - r.left));\n}\n\nconst DEFAULT_APPEARANCE = {\n  trackMinHeightPx: 44,\n} as const;\n\nconst DEFAULT_EVENTS = {} as const;\n\n/**\nTabla estándar {@link Table} con **una colu",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GhanttTimelineHeader",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "jsdoc": "Nombre accesible del bloque de cabecera (no dibuja una tercera franja: la cabecera son **dos pisos**\nalineados al ancho de la columna).\n/\n  title?: string;\n  className?: string;\n}\n\n/**\nCabecera de la columna Gantt en **dos pisos** a ancho completo de la columna, alineados con el cuerpo:\n- **Piso 1:** agrupación temporal (meses en vista diaria/semanal, años en vista mensual). En vista **año** no hay piso superior (solo años en el piso inferior).\n- **Piso 2:** etiquetas de cada slot (días, semanas o meses según `timeline.scale`).\nPensado para usarse como `column.header` de la columna `gantt` (el `HeaderCell` la renderiza a ancho\ncompleto sin la fila de acciones de ordenar/filtrar).",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GhanttConfigProvider",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_MODIFIER_ZOOM_MIN_SPAN_MS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_MODIFIER_ZOOM_GLOBAL_START",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_MODIFIER_ZOOM_HOUR_HALF_MS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_MODIFIER_ZOOM_ORDER",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GhanttSlotStrip",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_DENSE_HEADER_MAX_LABELS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_DENSE_SLOT_GRID_MIN_SLOTS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_HOUR_VIRTUAL_MIN_SLOTS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_SCROLL_VIRTUAL_MIN_SLOTS",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_TIMELINE_HEADER_STACK_HEIGHT_PX",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "GHANTT_DEFAULT_COLUMN_ID",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        },
+        {
+          "name": "DEFAULT_GHANTT_COLUMN_MAX_WIDTH_PX",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto",
+            "jsdoc": "Ancho máximo por defecto de la columna Gantt (px). Sustituible con `gantt.column.maxWidth` o `timeline.columnMaxWidthPx`.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>",
+            "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n<Ghantt\n  columns={columns}\n  rows={rows}\n  borderable\n  gantt={{\n    column: {\n      header: <GhanttTimelineHeader title=\"Plan\" />,\n      width: 480,\n    },\n    data: { accessor: (row) => row.plan },\n    timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n    events: {\n      onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n    },\n  }}\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Header",
+      "path": "src/modules/Header",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Header",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "confidence": "low"
+          },
+          "examples": [
+            "import { Header } from \"@imj_me/ui\";\n\nconst sampleFilters = [\n  {\n    label: 'Estado',\n    value: 'estado',\n    options: [\n      { label: 'Activo', value: 'activo', icon: faCheck },\n      { label: 'Inactivo', value: 'inactivo', icon: faMinus },\n    ],\n    icon: faFilter,\n    placeholder: 'Estado',\n    type: 'dropdown',\n  },\n  {\n    label: 'Tipo',\n    value: 'tipo',\n    options: [\n      { label: 'Plantilla', value: 'plantilla', icon: faList },\n      { label: 'Tarea', value: 'tarea', icon: faTasks },\n    ],\n    icon: faFilter,\n    placeholder: 'Tipo',\n    type: 'dropdown',\n  },\n  {\n    label: 'Tareas',\n    value: 'tareas',\n    options: [\n      { label: 'Todas', value: 'todas', icon: faList },\n      { label: 'Completadas', value: 'completadas', icon: faTasks },\n      { label: 'Pendientes', value: 'pendientes', icon: faTasks },\n      { label: 'Canceladas', value: 'canceladas', icon: faTasks },\n    ],\n    icon: faFilter,\n    placeholder: 'Tareas',\n    type: 'multiple',\n  },\n  {\n    label: 'Fecha',\n    value: 'fecha',\n    type: 'date',\n  },\n  {\n    label: 'Buscar',\n    type: 'input',\n    placeholder: 'Buscar',\n  },\n  {\n    label: 'Descripción',\n    type: 'textarea',\n    placeholder: 'Descripción',\n  },\n];\n\nfunction Example() {\n    return (\n        <Header\n            title=\"Plantillas\"\n            filters={sampleFilters}\n            onClear={() => console.log('Filtros limpiados')}\n            onApply={(filters) => console.log('Filtros aplicados:', filters)}\n        />\n    );\n}",
+            "import { Header } from \"@imj_me/ui\";\n\n// Sin filtros - array vacío\nconst noFilters = [];\n\nfunction Example() {\n    return (\n        <Header\n            title=\"Dashboard\"\n            icon={faHome}\n            showFilters={false}\n            filters={noFilters}\n        />\n    );\n}",
+            "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n  {\n    label: 'Estado',\n    type: 'dropdown',\n    options: [\n      { label: 'Activo', value: 'activo' },\n      { label: 'Inactivo', value: 'inactivo' },\n    ],\n  },\n  {\n    label: 'Buscar',\n    type: 'input',\n    placeholder: 'Buscar...',\n  },\n];\n\nfunction Example() {\n    return (\n        <Header\n            title=\"Usuarios\"\n            icon={faUser}\n            showViewMode={false}\n            filters={simpleFilters}\n            onClear={() => console.log('Filtros limpiados')}\n            onApply={(filters) => console.log('Filtros aplicados:', filters)}\n        />\n    );\n}",
+            "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n  {\n    label: 'Estado',\n    type: 'dropdown',\n    options: [\n      { label: 'Activo', value: 'activo' },\n      { label: 'Inactivo', value: 'inactivo' },\n    ],\n  },\n  {\n    label: 'Buscar',\n    type: 'input',\n    placeholder: 'Buscar...',\n  },\n];\n\nfunction Example() {\n    return (\n        <Header\n            title=\"Galería\"\n            icon={faGrid}\n            viewMode=\"grid\"\n            filters={simpleFilters}\n            onClear={() => console.log('Filtros limpiados')}\n            onApply={(filters) => console.log('Filtros aplicados:', filters)}\n        />\n    );\n}",
+            "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n  {\n    label: 'Estado',\n    type: 'dropdown',\n    options: [\n      { label: 'Activo', value: 'activo' },\n      { label: 'Inactivo', value: 'inactivo' },\n    ],\n  },\n  {\n    label: 'Buscar',\n    type: 'input',\n    placeholder: 'Buscar...',\n  },\n];\n\nfunction Example() {\n    return (\n        <Header\n            title=\"Configuración\"\n            icon={faSliders}\n            filters={simpleFilters}\n            onClear={() => console.log('Filtros limpiados')}\n            onApply={(filters) => console.log('Filtros aplicados:', filters)}\n        />\n    );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Icon",
+      "path": "src/modules/Icon",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Icon",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Icon permite mostrar iconos del sistema de diseño con diferentes tamaños y colores.",
+            "readme": "# Icon Component\n\nEl componente `Icon` permite mostrar iconos SVG con diferentes tamaños, colores y variantes.\n\n## Características\n\n- ✅ Soporte para iconos outline y fill\n- ✅ Múltiples tamaños predefinidos\n- ✅ Sistema de colores consistente\n- ✅ Tipado completo con TypeScript\n- ✅ Compatible con Storybook\n\n## Uso Básico\n\n```tsx\nimport { Icon } from '@your-org/ui';\n\nfunction MyComponent() {\n  return <Icon name=\"OutlineEyeIcon\" variant=\"outline\" size=\"md\" color=\"primary\" />;\n}\n```\n\n## Props\n\n| Prop        | Tipo                                            | Por defecto | Descripción                            |\n| ----------- | ----------------------------------------------- | ----------- | -------------------------------------- |\n| `name`      | `IconType`                                      | -           | Nombre del icono a mostrar (requerido) |\n| `variant`   | `'outline' \\| 'fill'`                           | `'outline'` | Variante del icono                     |\n| `size`      | `'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| '2xl'` | `'md'`      | Tamaño del icono                       |\n| `color`     | `IconColor`                                     | `'primary'` | Color del icono                        |\n| `className` | `string`                                        | -           | Clases CSS adicionales                 |\n| `svgProps`  | `React.SVGProps<SVGSVGElement>`                 | `{}`        | Propiedades adicionales del SVG        |\n\n## Tamaños\n\n| Tamaño | Píxeles |\n| ------ | ------- |\n| `xs`   | 12px    |\n| `sm`   | 16px    |\n| `md`   | 20px    |\n| `lg`   | 24px    |\n| `xl`   | 32px    |\n| `2xl`  | 48px    |\n\n## Colores Disponibles\n\n- `primary` - Color primario\n- `secondary` - Color secundario\n- `danger` - Color de peligro/error\n- `success` - Color de éxito\n- `warning` - Color de advertencia\n- `info` - Color informativo\n- `alert` - Color de alerta\n\n## Ejemplos\n\n### Iconos Outline\n\n```tsx\n<div className=\"flex gap-4\">\n  <Icon name=\"OutlineEyeIcon\" variant=\"outli",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Icon } from '@/modules/Icon';\n  import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n  export default function Example() {\n    return <Icon name={faEye} />\n  }",
+            "import { Icon } from '@/modules/Icon';\nimport { faHeart, faStar } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function DuotoneExample() {\n  return (\n    <>\n      {/* Colores semánticos */}\n      <Icon\n        name={faCheckCircle}\n        size=\"xl\"\n        colorDuotonePrimary=\"success\"\n        colorDuotoneSecondary=\"green\"\n        opacityDuotonePrimary={1}\n        opacityDuotoneSecondary={0.4}\n      />\n\n      {/* Combinaciones creativas */}\n      <Icon\n        name={faTrash}\n        size=\"xl\"\n        colorDuotonePrimary=\"rose\"\n        colorDuotoneSecondary=\"magenta\"\n        opacityDuotonePrimary={1}\n        opacityDuotoneSecondary={0.3}\n      />\n\n      {/* Diferentes opacidades */}\n      <Icon\n        name={faPalette}\n        size=\"xl\"\n        colorDuotonePrimary=\"blue\"\n        colorDuotoneSecondary=\"cyan\"\n        opacityDuotonePrimary={1}\n        opacityDuotoneSecondary={0.6}\n      />\n    </>\n  );\n}",
+            "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faEye} size=\"xs\" color=\"blue\" />\n<Icon name={faEye} size=\"sm\" color=\"blue\" />\n<Icon name={faEye} size=\"md\" color=\"blue\" />\n<Icon name={faEye} size=\"lg\" color=\"blue\" />",
+            "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faEye} size=\"lg\" color=\"blue\" />\n<Icon name={faEye} size=\"lg\" color=\"default\" />\n<Icon name={faEye} size=\"lg\" color=\"red\" />\n<Icon name={faEye} size=\"lg\" color=\"green\" />\n<Icon name={faEye} size=\"lg\" color=\"yellow\" />\n<Icon name={faEye} size=\"lg\" color=\"current\" />\n<Icon name={faEye} size=\"lg\" color=\"brand\" />",
+            "import { faHome, faSearch, faBell, faUser, faCog, faStar } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faHome} size=\"md\" color=\"blue\" />\n<Icon name={faSearch} size=\"md\" color=\"default\" />\n<Icon name={faBell} size=\"md\" color=\"red\" />\n<Icon name={faUser} size=\"md\" color=\"green\" />\n<Icon name={faCog} size=\"md\" color=\"yellow\" />\n<Icon name={faStar} size=\"md\" color=\"blue\" />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "IconFont",
+      "path": "src/modules/IconFont",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "IconFont",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "confidence": "low"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "InnerButton",
+      "path": "src/modules/InnerButton",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "InnerButton",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Button permite a los usuarios realizar acciones y tomar decisiones con un solo toque.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { InnerButton } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <InnerButton color=\"primary\">Blue</InnerButton>\n        <InnerButton color=\"secondary\">Red</InnerButton>\n        <InnerButton color=\"tertiary\">Green</InnerButton>\n        <InnerButton color=\"destructive\">Orange</InnerButton>\n        <InnerButton color=\"primary\">White</InnerButton>\n      </>\n    )\n  }",
+            "import { InnerButton } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <InnerButton color=\"primary\">Blue</InnerButton>\n        <InnerButton color=\"secondary\">Red</InnerButton>\n        <InnerButton color=\"tertiary\">Green</InnerButton>\n        <InnerButton color=\"destructive\">Orange</InnerButton>\n        <InnerButton color=\"primary\">White</InnerButton>\n      </>\n    )\n  }",
+            "import { InnerButton } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} />\n          <InnerButton color=\"secondary\" icon={faImage} />\n          <InnerButton color=\"tertiary\" icon={faImage} />\n          <InnerButton color=\"destructive\" icon={faImage} />\n        </div>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} pill=\"xs\" />\n          <InnerButton color=\"secondary\" icon={faImage} pill=\"xs\" />\n          <InnerButton color=\"tertiary\" icon={faImage} pill=\"xs\" />\n          <InnerButton color=\"destructive\" icon={faImage} pill=\"xs\" />\n        </div>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} pill=\"sm\" />\n          <InnerButton color=\"secondary\" icon={faImage} pill=\"sm\" />\n          <InnerButton color=\"tertiary\" icon={faImage} pill=\"sm\" />\n          <InnerButton color=\"destructive\" icon={faImage} pill=\"sm\" />\n        </div>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} pill=\"md\" />\n          <InnerButton color=\"secondary\" icon={faImage} pill=\"md\" />\n          <InnerButton color=\"tertiary\" icon={faImage} pill=\"md\" />\n          <InnerButton color=\"destructive\" icon={faImage} pill=\"md\" />\n        </div>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} pill=\"lg\" />\n          <InnerButton color=\"secondary\" icon={faImage} pill=\"lg\" />\n          <InnerButton color=\"tertiary\" icon={faImage} pill=\"lg\" />\n          <InnerButton color=\"destructive\" icon={faImage} pill=\"lg\" />\n        </div>\n        <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n          <InnerButton color=\"primary\" icon={faImage} pill=\"pill\" />\n          <InnerButton color=\"secondary\" icon={faImage} pill=\"pill\" />\n          <InnerButton color=\"tertiary\" icon={faImage} pill=\"pill\" />\n          <InnerButton color=\"destructive\" icon={faImage} pill=\"pill\" />\n        </div>\n      </>\n    )\n  }",
+            "import { InnerButton } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <InnerButton color=\"primary\" tooltip=\"Tooltip\">Blue</InnerButton>\n        <InnerButton color=\"secondary\" tooltip=\"Tooltip\">Red</InnerButton>\n        <InnerButton color=\"tertiary\" tooltip=\"Tooltip\">Green</InnerButton>\n        <InnerButton color=\"destructive\" tooltip=\"Tooltip\">Orange</InnerButton>\n        <InnerButton color=\"primary\" tooltip=\"Tooltip\">White</InnerButton>\n      </>\n    )\n  }",
+            "<InnerButton color=\"primary\" theme='solid'>\n            Primary\n          </InnerButton>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Input",
+      "path": "src/modules/Input",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Input",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Un componente Input personalizable con soporte para slots, estados de error, y estados controlado y no controlado.",
+            "jsdoc": "Input - Componente de campo de entrada versátil y configurable\nComponente de input que soporta estados controlados y no controlados, labels, mensajes de error,\niconos, slots personalizados, tooltips informativos y múltiples tamaños.",
+            "readme": "# Input Component\n\nComponente de campo de entrada versátil y configurable con soporte para labels, mensajes de error, iconos, slots personalizados y tooltips informativos.\n\n## Estructura\n\n```\nInput/\n├── components/\n│   └── Input.tsx          # Componente principal\n├── hooks/                 # Hooks personalizados\n├── stories/\n│   └── input.stories.tsx # Storybook stories\n└── index.ts              # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Input } from '@imj_media/ui';\n\n// Input simple\n<Input\n  label=\"Nombre\"\n  value={name}\n  onValueChange={(value) => setName(value)}\n/>\n\n// Input con placeholder\n<Input\n  label=\"Email\"\n  placeholder=\"ejemplo@correo.com\"\n  value={email}\n  onValueChange={(value) => setEmail(value)}\n/>\n```\n\n## Props Principales\n\n### Contenido y Estado\n\n- `value?: string` - Valor del input (controlado)\n- `defaultValue?: string` - Valor por defecto (no controlado)\n- `onValueChange?: (value: string) => void` - Callback cuando cambia el valor\n- `onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void` - Callback nativo del input\n- `placeholder?: string` - Texto de placeholder\n\n### Labels y Mensajes\n\n- `label?: string` - Label del input\n- `error?: string` - Mensaje de error\n- `helperText?: string` - Texto de ayuda adicional\n- `infoTooltip?: string` - Texto del tooltip informativo\n\n### Slots e Iconos\n\n- `leftSlot?: VisualSlotType` - Slot izquierdo (icono, imagen, avatar)\n- `rightSlot?: VisualSlotType` - Slot derecho (icono, imagen, avatar)\n- `extraSlot?: VisualSlotType` - Slot extra (icono, imagen, avatar)\n- `onClickExtraSlot?: () => void` - Callback al hacer clic en el slot extra\n\n### Estilo y Tamaño\n\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del input (default: `'sm'`)\n- `color?: InputColor` - Color del input\n- `fullWidth?: boolean` - Si es true, ocupa todo el ancho disponible (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'sm'`)\n\n### Funcionalidad\n\n- `disabled?: boolea",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Input } from '@/modules/Input';\n\n  export default function Example() {\n    return (\n      <Input \n        label=\"Input Básico\"\n        placeholder=\"Escribe algo aquí...\"\n      />\n    )\n  }",
+            "import { Input } from '@/modules/Input';\n\n  export default function Example() {\n    return (\n      <Input \n        label=\"Input Básico\"\n        placeholder=\"Escribe algo aquí...\"\n      />\n    )\n  }",
+            "<Input \n    label=\"Input con Error\"\n    error=\"Este campo es requerido\"\n    placeholder=\"Campo requerido\"\n  />",
+            "<Input \n    label=\"Input con Ayuda\"\n    helperText=\"Este texto te ayudará a entender qué información ingresar\"\n    placeholder=\"Ingresa tu información\"\n  />",
+            "<Input \n    label=\"Input Deshabilitado\"\n    disabled={true}\n    value=\"Valor no editable\"\n  />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "LegacyButton",
+      "path": "src/modules/LegacyButton",
+      "legacy": true,
+      "legacyReason": "Usa iconos SVG legacy; preferir Button + Icon.",
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "LegacyButton",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Botón equivalente a `Button`, pero los slots e iconos usan nombres tipados de `LegacyIcon` (SVG legacy).",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "InnerLegacyButton",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "confidence": "low"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "LegacyIcon",
+      "path": "src/modules/LegacyIcon",
+      "legacy": true,
+      "legacyReason": "Set de iconos SVG legacy; preferir Icon / IconFont.",
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "LegacyIcon",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Iconos SVG legacy (",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { LegacyIcon } from '@/modules/LegacyIcon';\n\n<LegacyIcon name=\"HomeOutlined\" size=\"lg\" color=\"brand\" />\n<LegacyIcon name=\"LogoFill\" size=\"md\" color=\"current\" />",
+            "import { LegacyIcon } from '@/modules/LegacyIcon';\n\n<LegacyIcon name=\"HomeOutlined\" size=\"lg\" color=\"brand\" />\n<LegacyIcon name=\"LogoFill\" size=\"md\" color=\"current\" />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Lightbox",
+      "path": "src/modules/Lightbox",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Lightbox",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Lightbox permite visualizar imágenes en pantalla completa con navegación, indicadores y controles.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { useState } from 'react'\nimport { Lightbox, ILightboxImage } from '@/modules/Lightbox'\n\nconst images: ILightboxImage[] = [\n  {\n    id: 1,\n    src: 'https://example.com/image1.jpg',\n    title: 'Paisaje de Montaña',\n  },\n  {\n    id: 2,\n    src: 'https://example.com/image2.jpg',\n    title: 'Naturaleza Salvaje',\n  },\n]\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <>\n      <button onClick={() => setIsOpen(true)}>\n        Abrir Galería\n      </button>\n\n      <Lightbox\n        images={images}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n      />\n    </>\n  )\n}",
+            "<Lightbox\n  images={images}\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  displayMode=\"square\"\n/>",
+            "const images: ILightboxImage[] = [\n  {\n    id: 1,\n    src: 'https://example.com/image1.jpg',\n    // Sin título\n  },\n  {\n    id: 2,\n    src: 'https://example.com/image2.jpg',\n  },\n]\n\n<Lightbox\n  images={images}\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n/>",
+            "<Lightbox\n  images={images}\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  showIndicators={false}\n/>",
+            "<Lightbox\n  images={images}\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  showNavigation={false}\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "LinearGraphic",
+      "path": "src/modules/LinearGraphic",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "LinearGraphic",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente LinearGraphic muestra una barra de progreso con múltiples segmentos, cada uno con su propio color y porcentaje. Soporta tooltips en hover para mostrar información detallada.",
+            "jsdoc": "LinearGraphic - Gráfica lineal de barras de progreso múltiples\nMuestra una barra de progreso con múltiples segmentos, cada uno con su propio\ncolor y porcentaje. Soporta tooltips en hover para mostrar información detallada.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "LinearGraphicSegment",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente LinearGraphic muestra una barra de progreso con múltiples segmentos, cada uno con su propio color y porcentaje. Soporta tooltips en hover para mostrar información detallada.",
+            "jsdoc": "Datos del segmento */\n  data: LinearGraphicData;\n  /** Índice del segmento */\n  index: number;\n  /** Ancho del segmento en porcentaje */\n  width: number;\n  /** Color semántico del segmento */\n  color: LinearGraphicColor;\n  /** Si es el primer segmento */\n  isFirst: boolean;\n  /** Si es el último segmento */\n  isLast: boolean;\n  /** Altura de la barra */\n  height: number;\n  /** Duración de la transición */\n  transitionDuration: number;\n  /** Si mostrar tooltip */\n  showTooltip: boolean;\n  /** Callback cuando se hace hover */\n  onHover?: (data: LinearGraphicData, index: number) => void;\n  /** Callback cuando se sale del hover */\n  onLeave?: (data: LinearGraphicData, index: number) => void;\n}\n\n/**\nSegmento individual de la gráfica lineal\nÁtomo que representa una porción de la barra de progres",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "ListWithDataInHover",
+      "path": "src/modules/ListWithDataInHover",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "ListWithDataInHover",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente ListWithDataInHover muestra una lista de elementos, cada uno con un indicador de color y un nombre. Al hacer hover sobre un elemento, se muestra un tooltip con el porcentaje asociado.",
+            "jsdoc": "ListWithDataInHover - Lista de elementos con tooltips que muestran datos\nMuestra una lista de elementos, cada uno con un indicador de color y un nombre.\nAl hacer hover sobre un elemento, se muestra un tooltip con el porcentaje asociado.",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Lists",
+      "path": "src/modules/Lists",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Lists",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Organismos de lista por variante (",
+            "readme": "# Componentes de Listas\n\nSistema completo de componentes de listas con **13 variantes** (`variant` en `ListBase`), con **DRY**, **SOC**, **Atomic Design** y **TypeScript Discriminated Unions**.\n\n## API agrupada en `ListBase` (recomendada)\n\nLa API organiza datos y callbacks en **bloques** en la medida de lo posible. Si un valor existe en un bloque y también en la raíz del componente, **gana el bloque**.\n\n### Bloques por responsabilidad\n\n| Bloque                     | Uso                                                                                                            |\n| -------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| **`list`**                 | Datos: `items`, `groups`, `users`, etc. (depende de `variant`)                                                 |\n| **`selection`**            | Estado de selección: `currentValue`, `selectedValue`, `selectedUserId`, `selectedItem`, `darkMode` (perfil), … |\n| **`events`**               | Callbacks (`onItemClick`, `onSelectionChange`, …)                                                              |\n| **`labels`**               | Textos: `title`, `searchPlaceholder` (users-select), `clearLabel` / `applyLabel`, …                            |\n| **`profile`** + **`menu`** | Solo `user-profile`: `profile.user` y `menu.items`                                                             |\n| **`options`**              | Solo `toggle`: p. ej. `enableReordering`                                                                       |\n| **`content`**              | Solo `empty`: p. ej. `icon`                                                                                    |\n| **`search`**               | Solo `search-multi-checkbox`: `show`, `placeholder`                                                            |\n\n### Ejemplo mínimo (`variant=\"default\"`)\n\n```tsx\nimport { ListBase } from '@/modules/Lists';\n\n<ListBase\n  variant=\"defa",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Logo",
+      "path": "src/modules/Logo",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Logo",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Logo permite mostrar el logo del sistema de diseño en diferentes tamaños.",
+            "jsdoc": "Logo - Componente de logo de la aplicación\nRenderiza el logotipo de marca como SVG (`FillLogoIcon`).\nSoporta diferentes tamaños predefinidos.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Logo } from '@/modules/Logo';\n\n  export default function Example() {\n    return <Logo />\n  }",
+            "<Logo size=\"sm\" />\n  <Logo size=\"md\" />\n  <Logo size=\"lg\" />",
+            "<div className=\"flex items-center justify-between\">\n    <div className=\"flex items-center gap-4\">\n      <Logo size=\"md\" />\n      <nav className=\"flex gap-4\">\n        <a href=\"#\" className=\"text-gray-600 hover:text-gray-900\">Inicio</a>\n        <a href=\"#\" className=\"text-gray-600 hover:text-gray-900\">Productos</a>\n        <a href=\"#\" className=\"text-gray-600 hover:text-gray-900\">Servicios</a>\n        <a href=\"#\" className=\"text-gray-600 hover:text-gray-900\">Contacto</a>\n      </nav>\n    </div>\n    <div className=\"flex items-center gap-2\">\n      <button className=\"px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600\">\n        Iniciar Sesión\n      </button>\n    </div>\n  </div>",
+            "<div className=\"flex items-center justify-between\">\n    <div className=\"flex items-center gap-4\">\n      <Logo size=\"sm\" />\n      <p className=\"text-sm text-gray-600\">© 2024 Tu Empresa. Todos los derechos reservados.</p>\n    </div>\n    <div className=\"flex gap-4\">\n      <a href=\"#\" className=\"text-sm text-gray-600 hover:text-gray-900\">Política de Privacidad</a>\n      <a href=\"#\" className=\"text-sm text-gray-600 hover:text-gray-900\">Términos de Servicio</a>\n    </div>\n  </div>",
+            "import { Logo } from '@/modules/Logo';\n\n  export default function Example() {\n    return <Logo />\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Message",
+      "path": "src/modules/Message",
+      "legacy": true,
+      "legacyReason": "API legada de mensajes; preferir Notification.",
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Toaster",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Componente que renderiza todos los toasts en un portal",
+            "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `<Toaster />` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `<Notifier />` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `<Messaging />` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `<Messaging />` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta `<Toaster />`. Si solo notificaciones, `<Notifier />`. Si la aplicación mezcla ambos, `<Messaging />` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { notify, Messaging, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Messaging />\n        <Button onClick={() => notify.success(\"Operación exitosa!\")}>\n          Mostrar mensaje\n        </Button>\n      </div>\n    )",
+            "import { notify } from '@imj_media';\n\n    // Mensajes básicos\n    notify.success(\"Operación completada exitosamente\")\n    notify.error(\"Ha ocurrido un error\")\n    notify.info(\"Información importante\")\n    notify.warning(\"Advertencia: acción requerida\")\n    \n    // Notificaciones agrupadas (mazos)\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n    notify.message({ title: '¡Nueva funcionalidad disponible!' })",
+            "// ✅ Código existente sigue funcionando sin cambios\n    import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Toaster />\n        <Button onClick={() => toast.success(\"Hello, world!\")}>\n          Mostrar toast\n        </Button>\n      </div>\n    )",
+            "import { toast } from '@imj_media';\n\n    toast.success('Toast con API legacy');\n    toast.error('Error con toast legacy');\n    toast.info('Info con toast legacy');",
+            "// ============================================\n    // FORMA ANTIGUA (toast)\n    // ============================================\n    import { toast, Toaster } from '@imj_media';\n    \n    toast.success(\"Mensaje\")\n    toast.error(\"Error\")\n    toast.info(\"Info\")\n    toast.warning(\"Warning\")\n\n    // ============================================\n    // FORMA NUEVA (notify) - Recomendada\n    // ============================================\n    import { notify, Messaging } from '@imj_media';\n    \n    notify.success(\"Mensaje\")\n    notify.error(\"Error\")\n    notify.info(\"Info\")\n    notify.warning(\"Warning\")\n    \n    // ✨ Métodos adicionales\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n    notify.message({ title: 'Mensaje de marca' })",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      title: 'Cola única',\n      message: 'Todas las intenciones comparten el mazo auto.',\n      duration: 8000,\n      appearance: { intent: 'informativa' },\n    });",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Brand',\n      message: 'Mazo primary',\n      duration: 8000,\n    });\n\n    notify.message({\n      stackGroup: 'secondary',\n      title: 'Neutral',\n      message: 'Mazo secondary',\n      duration: 8000,\n    });",
+            "import { notification } from '@imj_media';\n\n    notification.message({ title: 'Encola en auto' });\n    notification.dismissStack('auto');\n    notification.dismissStack('primary');\n    notification.dismissStack('secondary');",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n    notify.message({\n      title: 'Título corto',\n      message: 'Cuerpo por defecto',\n      duration: 10000,\n      stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n      appearance: { intent: 'preventiva', variant: 'outlined' },\n      content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n      meta: { presentation: 'popup' },\n      events: { onClose: () => {} },\n    });",
+            "import { notify, Messaging } from '@imj_media';\n\n    // En la app: <Messaging />\n    notify.message({\n      title: 'Aviso',\n      message: 'Texto breve con la apariencia por defecto del sistema.',\n      duration: 8000,\n      // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n    });",
+            "import { notify } from '@imj_media';\n\n    // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 3' }) // Contador en la frontal\n\n    // Configurar tamaño del stack (opcional)\n    notify.configureNotification({ stackMax: 5 })\n\n    // stackGroup 'secondary' usa otro mazo\n    notify.message({ stackGroup: 'secondary',  title: 'Recordatorio' })\n    notify.message({ stackGroup: 'secondary',  title: 'Otro recordatorio' })",
+            "import { notify } from '@imj_media';\n\n    // Mismo mazo primary: cada encolado con título y mensaje distintos\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      subtitle: 'Hora 14:05:12',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n    // notify.message({ stackGroup: 'primary', title: '…', message: '…' });",
+            "import { notify } from '@imj_media';\n\n    // Una notificación en el mazo (sin pie de apilado)\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Aviso · #2',\n      message: 'Hay cambios pendientes. (seq 2)',\n    });\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Alerta · #3',\n      message: 'La cola se ha actualizado. (seq 3)',\n      stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n    });",
+            "// Cada nueva notificación reinicia el timer\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' }) // Timer: 5s\n    // Después de 2s...\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' }) // Timer: 5s (reiniciado)"
+          ]
+        },
+        {
+          "name": "Notifier",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Componente que renderiza todas las notificaciones en un portal",
+            "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `<Toaster />` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `<Notifier />` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `<Messaging />` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `<Messaging />` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta `<Toaster />`. Si solo notificaciones, `<Notifier />`. Si la aplicación mezcla ambos, `<Messaging />` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { notify, Messaging, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Messaging />\n        <Button onClick={() => notify.success(\"Operación exitosa!\")}>\n          Mostrar mensaje\n        </Button>\n      </div>\n    )",
+            "import { notify } from '@imj_media';\n\n    // Mensajes básicos\n    notify.success(\"Operación completada exitosamente\")\n    notify.error(\"Ha ocurrido un error\")\n    notify.info(\"Información importante\")\n    notify.warning(\"Advertencia: acción requerida\")\n    \n    // Notificaciones agrupadas (mazos)\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n    notify.message({ title: '¡Nueva funcionalidad disponible!' })",
+            "// ✅ Código existente sigue funcionando sin cambios\n    import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Toaster />\n        <Button onClick={() => toast.success(\"Hello, world!\")}>\n          Mostrar toast\n        </Button>\n      </div>\n    )",
+            "import { toast } from '@imj_media';\n\n    toast.success('Toast con API legacy');\n    toast.error('Error con toast legacy');\n    toast.info('Info con toast legacy');",
+            "// ============================================\n    // FORMA ANTIGUA (toast)\n    // ============================================\n    import { toast, Toaster } from '@imj_media';\n    \n    toast.success(\"Mensaje\")\n    toast.error(\"Error\")\n    toast.info(\"Info\")\n    toast.warning(\"Warning\")\n\n    // ============================================\n    // FORMA NUEVA (notify) - Recomendada\n    // ============================================\n    import { notify, Messaging } from '@imj_media';\n    \n    notify.success(\"Mensaje\")\n    notify.error(\"Error\")\n    notify.info(\"Info\")\n    notify.warning(\"Warning\")\n    \n    // ✨ Métodos adicionales\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n    notify.message({ title: 'Mensaje de marca' })",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      title: 'Cola única',\n      message: 'Todas las intenciones comparten el mazo auto.',\n      duration: 8000,\n      appearance: { intent: 'informativa' },\n    });",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Brand',\n      message: 'Mazo primary',\n      duration: 8000,\n    });\n\n    notify.message({\n      stackGroup: 'secondary',\n      title: 'Neutral',\n      message: 'Mazo secondary',\n      duration: 8000,\n    });",
+            "import { notification } from '@imj_media';\n\n    notification.message({ title: 'Encola en auto' });\n    notification.dismissStack('auto');\n    notification.dismissStack('primary');\n    notification.dismissStack('secondary');",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n    notify.message({\n      title: 'Título corto',\n      message: 'Cuerpo por defecto',\n      duration: 10000,\n      stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n      appearance: { intent: 'preventiva', variant: 'outlined' },\n      content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n      meta: { presentation: 'popup' },\n      events: { onClose: () => {} },\n    });",
+            "import { notify, Messaging } from '@imj_media';\n\n    // En la app: <Messaging />\n    notify.message({\n      title: 'Aviso',\n      message: 'Texto breve con la apariencia por defecto del sistema.',\n      duration: 8000,\n      // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n    });",
+            "import { notify } from '@imj_media';\n\n    // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 3' }) // Contador en la frontal\n\n    // Configurar tamaño del stack (opcional)\n    notify.configureNotification({ stackMax: 5 })\n\n    // stackGroup 'secondary' usa otro mazo\n    notify.message({ stackGroup: 'secondary',  title: 'Recordatorio' })\n    notify.message({ stackGroup: 'secondary',  title: 'Otro recordatorio' })",
+            "import { notify } from '@imj_media';\n\n    // Mismo mazo primary: cada encolado con título y mensaje distintos\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      subtitle: 'Hora 14:05:12',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n    // notify.message({ stackGroup: 'primary', title: '…', message: '…' });",
+            "import { notify } from '@imj_media';\n\n    // Una notificación en el mazo (sin pie de apilado)\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Aviso · #2',\n      message: 'Hay cambios pendientes. (seq 2)',\n    });\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Alerta · #3',\n      message: 'La cola se ha actualizado. (seq 3)',\n      stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n    });",
+            "// Cada nueva notificación reinicia el timer\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' }) // Timer: 5s\n    // Después de 2s...\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' }) // Timer: 5s (reiniciado)"
+          ]
+        },
+        {
+          "name": "Messaging",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Componente unificado que renderiza tanto toasts como notificaciones",
+            "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `<Toaster />` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `<Notifier />` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `<Messaging />` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `<Messaging />` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta `<Toaster />`. Si solo notificaciones, `<Notifier />`. Si la aplicación mezcla ambos, `<Messaging />` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { notify, Messaging, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Messaging />\n        <Button onClick={() => notify.success(\"Operación exitosa!\")}>\n          Mostrar mensaje\n        </Button>\n      </div>\n    )",
+            "import { notify } from '@imj_media';\n\n    // Mensajes básicos\n    notify.success(\"Operación completada exitosamente\")\n    notify.error(\"Ha ocurrido un error\")\n    notify.info(\"Información importante\")\n    notify.warning(\"Advertencia: acción requerida\")\n    \n    // Notificaciones agrupadas (mazos)\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n    notify.message({ title: '¡Nueva funcionalidad disponible!' })",
+            "// ✅ Código existente sigue funcionando sin cambios\n    import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Toaster />\n        <Button onClick={() => toast.success(\"Hello, world!\")}>\n          Mostrar toast\n        </Button>\n      </div>\n    )",
+            "import { toast } from '@imj_media';\n\n    toast.success('Toast con API legacy');\n    toast.error('Error con toast legacy');\n    toast.info('Info con toast legacy');",
+            "// ============================================\n    // FORMA ANTIGUA (toast)\n    // ============================================\n    import { toast, Toaster } from '@imj_media';\n    \n    toast.success(\"Mensaje\")\n    toast.error(\"Error\")\n    toast.info(\"Info\")\n    toast.warning(\"Warning\")\n\n    // ============================================\n    // FORMA NUEVA (notify) - Recomendada\n    // ============================================\n    import { notify, Messaging } from '@imj_media';\n    \n    notify.success(\"Mensaje\")\n    notify.error(\"Error\")\n    notify.info(\"Info\")\n    notify.warning(\"Warning\")\n    \n    // ✨ Métodos adicionales\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n    notify.message({ title: 'Mensaje de marca' })",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      title: 'Cola única',\n      message: 'Todas las intenciones comparten el mazo auto.',\n      duration: 8000,\n      appearance: { intent: 'informativa' },\n    });",
+            "import { notify } from '@imj_media';\n\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Brand',\n      message: 'Mazo primary',\n      duration: 8000,\n    });\n\n    notify.message({\n      stackGroup: 'secondary',\n      title: 'Neutral',\n      message: 'Mazo secondary',\n      duration: 8000,\n    });",
+            "import { notification } from '@imj_media';\n\n    notification.message({ title: 'Encola en auto' });\n    notification.dismissStack('auto');\n    notification.dismissStack('primary');\n    notification.dismissStack('secondary');",
+            "// 1) App\n    import { notify, Messaging } from '@imj_media';\n\n    export const App = () => (\n      <>\n        <Messaging />\n        {/* … */}\n      </>\n    );\n\n    // 2) Defaults del servicio (opcional)\n    notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n    // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n    notify.message({\n      title: 'Título corto',\n      message: 'Cuerpo por defecto',\n      duration: 10000,\n      stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n      appearance: { intent: 'preventiva', variant: 'outlined' },\n      content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n      meta: { presentation: 'popup' },\n      events: { onClose: () => {} },\n    });",
+            "import { notify, Messaging } from '@imj_media';\n\n    // En la app: <Messaging />\n    notify.message({\n      title: 'Aviso',\n      message: 'Texto breve con la apariencia por defecto del sistema.',\n      duration: 8000,\n      // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n    });",
+            "import { notify } from '@imj_media';\n\n    // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' })\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 3' }) // Contador en la frontal\n\n    // Configurar tamaño del stack (opcional)\n    notify.configureNotification({ stackMax: 5 })\n\n    // stackGroup 'secondary' usa otro mazo\n    notify.message({ stackGroup: 'secondary',  title: 'Recordatorio' })\n    notify.message({ stackGroup: 'secondary',  title: 'Otro recordatorio' })",
+            "import { notify } from '@imj_media';\n\n    // Mismo mazo primary: cada encolado con título y mensaje distintos\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      subtitle: 'Hora 14:05:12',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n    // notify.message({ stackGroup: 'primary', title: '…', message: '…' });",
+            "import { notify } from '@imj_media';\n\n    // Una notificación en el mazo (sin pie de apilado)\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Actualización · #1',\n      message: 'Revisa el panel principal. (seq 1)',\n    });\n\n    // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Aviso · #2',\n      message: 'Hay cambios pendientes. (seq 2)',\n    });\n    notify.message({\n      stackGroup: 'primary',\n      title: 'Alerta · #3',\n      message: 'La cola se ha actualizado. (seq 3)',\n      stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n    });",
+            "// Cada nueva notificación reinicia el timer\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 1' }) // Timer: 5s\n    // Después de 2s...\n    notify.message({ stackGroup: 'primary',  title: 'Mensaje 2' }) // Timer: 5s (reiniciado)"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Modal",
+      "path": "src/modules/Modal",
+      "legacy": false,
+      "compositionType": 2,
+      "exports": [
+        {
+          "name": "Modal",
+          "kind": "compound-root",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente ModalImage permite mostrar una imagen dentro de un modal. Soporta modo thumbnail que se expande al hacer clic, opcionalmente otra URL (",
+            "readme": "# Modal Component\n\nComponente de modal/diálogo versátil y configurable con soporte para múltiples tamaños, botones personalizados, tabs, iconos, badges y un sistema de compound components.\n\n## Estructura\n\n```\nModal/\n├── Modal.tsx              # Componente principal\n├── components/            # Subcomponentes (Header, Body, Footer)\n├── hooks/                 # Hooks personalizados\n├── context/               # Context para estado del modal\n├── stories/\n│   └── Modal.stories.tsx  # Storybook stories\n└── index.ts              # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Modal } from '@imj_media/ui';\n\n// Modal simple\n<Modal\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  title=\"Título del Modal\"\n>\n  <Modal.Body>Contenido del modal</Modal.Body>\n</Modal>\n\n// Modal con footer\n<Modal\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  title=\"Confirmar acción\"\n>\n  <Modal.Body>¿Estás seguro de que deseas continuar?</Modal.Body>\n  <Modal.Footer>\n    <Button onClick={() => setIsOpen(false)}>Cancelar</Button>\n    <Button onClick={handleConfirm}>Confirmar</Button>\n  </Modal.Footer>\n</Modal>\n```\n\n## Props Principales\n\n### Control del Modal\n\n- `isOpen: boolean` - Si el modal está abierto\n- `onClose: () => void` - Callback para cerrar el modal\n- `title?: string` - Título del modal\n- `size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` - Tamaño del modal (default: `'md'`)\n- `zIndex?: number` - Z-index del modal (default: `52`, por encima de capas sticky de la tabla)\n\n### Comportamiento\n\n- `showCloseButton?: boolean` - Mostrar botón de cerrar (default: `true`)\n- `disableEscapeClose?: boolean` - Deshabilitar cierre con Escape (default: `false`)\n- `disableOutsideClick?: boolean` - Deshabilitar cierre al hacer clic fuera (default: `false`)\n- `disableOutsideTab?: boolean` - Deshabilitar navegación fuera del modal (default: `true`)\n\n### Iconos y Badges\n\n- `icon?: IconType | AnyIconDefinition` - Icono principal del modal\n- `iconConfig?: ButtonIconConfig` - Configuración com",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { useState } from 'react';\n  import { Modal } from '@/modules/Modal';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleClose = () => {\n      setIsOpen(false);\n    };\n\n    return (\n      <div>\n        <Button onClick={() => setIsOpen(true)}>\n          Abrir Modal\n        </Button>\n        <Modal\n          isOpen={isOpen}\n          onClose={handleClose}\n          title=\"Modal Básico\"\n        >\n          <Modal.Body>\n            <p>Este es un modal básico con configuración por defecto.</p>\n            <p>Incluye título, botón de cerrar y footer automático.</p>\n          </Modal.Body>\n        </Modal>\n      </div>\n    )\n  }",
+            "<Modal\n  isOpen={isOpen}\n  onClose={handleClose}\n  title=\"Título\"\n  closeButton={{ tooltip: true }}\n>\n  <Modal.Body>…</Modal.Body>\n</Modal>\n\n<Modal\n  …\n  closeButton={{ tooltip: true, tooltipLabel: 'Close' }}\n/>",
+            "import { useState } from 'react';\n  import { Modal } from '@/modules/Modal';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleClose = () => {\n      setIsOpen(false);\n    };\n\n    return (\n      <div>\n        <Button onClick={() => setIsOpen(true)}>\n          Abrir Modal\n        </Button>\n        <Modal\n          isOpen={isOpen}\n          onClose={handleClose}\n          title=\"Modal\"\n          cancelButtonSlotLeft={faMinusCircle}\n          successButtonSlotRight={faPlusCircle}\n        >\n          <Modal.Body>\n            <p>Este es un modal con iconos en los botones.</p>\n          </Modal.Body>\n        </Modal>\n      </div>\n    )\n  }",
+            "<Modal\n  isOpen={isOpen}\n  onClose={handleClose}\n  title=\"Confirmar cambios\"\n  footerSlotLayout=\"spread\"\n  cancelButtonSlotLeft={faTimes}\n  successButtonSlotRight={faCheck}\n  onCancel={handleClose}\n  onSuccess={handleSave}\n  closeAtSuccess\n>\n  <Modal.Body>…</Modal.Body>\n</Modal>",
+            "import { useState } from 'react';\n  import { Modal } from '@/modules/Modal';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleClose = () => {\n      setIsOpen(false);\n    };\n\n    return (\n      <div>\n        <Button onClick={() => setIsOpen(true)}>\n          Abrir Modal\n        </Button>\n        <Modal\n          isOpen={isOpen}\n          onClose={handleClose}\n          title=\"Modal Básico\"\n          headerButtonIcon={faStar}\n          headerButtonOnClick={() => {\n            console.log('clicked');\n          }}\n        >\n          <Modal.Body>\n            <p>Este es un modal básico con configuración por defecto.</p>\n            <p>Incluye título, botón de cerrar y footer automático.</p>\n          </Modal.Body>\n        </Modal>\n      </div>\n    )\n  }",
+            "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentThumbnailSizes() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [thumbnailSize, setThumbnailSize] = useState<'sm' | 'md' | 'lg' | 'xl' | 'auto'>('md');\n\n  return (\n    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n      <Modal.Body>\n        <div className=\"flex flex-col gap-4\">\n          <p>Lorem ipsum dolor sit amet...</p>\n          <div className=\"flex justify-center\">\n            <Modal.Image\n              src={imageSrc}\n              alt={imageAlt}\n              thumbnailMode={true}\n              thumbnailSize={thumbnailSize}\n            />\n          </div>\n          <p>Duis aute irure dolor...</p>\n        </div>\n      </Modal.Body>\n    </Modal>\n  );\n}",
+            "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentPadding() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [padding, setPadding] = useState<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('md');\n\n  return (\n    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n      <Modal.Body>\n        <Modal.Image\n          src={imageSrc}\n          alt={imageAlt}\n          thumbnailMode={true}\n          thumbnailSize=\"md\"\n          padding={padding}\n        />\n      </Modal.Body>\n    </Modal>\n  );\n}",
+            "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentObjectFit() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [objectFit, setObjectFit] = useState<'cover' | 'contain' | 'fill' | 'none' | 'scale-down'>('cover');\n\n  return (\n    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n      <Modal.Body>\n        <Modal.Image\n          src={imageSrc}\n          alt={imageAlt}\n          thumbnailMode={true}\n          thumbnailSize=\"md\"\n          objectFit={objectFit}\n        />\n      </Modal.Body>\n    </Modal>\n  );\n}",
+            "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function CombinedProps() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Imagen Completa\" size=\"xl\">\n      <Modal.Body>\n        <Modal.Image\n          src={imageSrc}\n          alt={imageAlt}\n          thumbnailMode={true}\n          thumbnailSize=\"lg\"\n          padding=\"lg\"\n          objectFit=\"cover\"\n          expandButtonIcon={faImage}\n        />\n      </Modal.Body>\n    </Modal>\n  );\n}",
+            "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentModalSizes() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [modalSize, setModalSize] = useState<'sm' | 'md' | 'lg' | 'xl'>('lg');\n\n  return (\n    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Modal\" size={modalSize}>\n      <Modal.Body>\n        <Modal.Image\n          src={imageSrc}\n          alt={imageAlt}\n          thumbnailMode={true}\n          thumbnailSize=\"md\"\n        />\n      </Modal.Body>\n    </Modal>\n  );\n}",
+            "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n  const [isOpen, setIsOpen] = useState(false);\n  const rows = useMemo(() => datosEjemplo, []);\n\n  return (\n    <>\n      <button onClick={() => setIsOpen(true)}>Abrir modal con tabla</button>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Listado de usuarios\"\n        size=\"xl\"\n      >\n        <Modal.Body>\n          <div className=\"ui-h-[400px] ui-min-h-0\">\n            <Table\n              columns={columnasModal}\n              rows={rows}\n              empty={{ title: 'Sin datos', description: 'No hay registros para mostrar.' }}\n            />\n          </div>\n        </Modal.Body>\n      </Modal>\n    </>\n  );\n}",
+            "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n  const [isOpen, setIsOpen] = useState(false);\n  const rows = useMemo(() => datosEjemplo, []);\n\n  return (\n    <>\n      <button onClick={() => setIsOpen(true)}>Abrir modal con tabla</button>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Listado de usuarios\"\n        size=\"xl\"\n      >\n        <Modal.Body>\n          <div className=\"ui-h-[400px] ui-min-h-0\">\n            <Table\n              columns={columnasModal}\n              rows={rows}\n              empty={{ title: 'Sin datos', description: 'No hay registros para mostrar.' }}\n            />\n          </div>\n        </Modal.Body>\n      </Modal>\n    </>\n  );\n}"
+          ]
+        }
+      ],
+      "compositionRecipe": {
+        "pieces": [
+          "Modal",
+          "Modal.Header",
+          "Modal.Body",
+          "Modal.Footer",
+          "Modal.Image"
+        ],
+        "steps": [
+          "Controla visibilidad con isOpen y onClose en Modal (raíz).",
+          "Compón Header opcional, Body con el contenido y Footer con acciones.",
+          "Para tabs, usa tabsConfig en la raíz en lugar de props tabs planas deprecadas."
+        ],
+        "storyRefs": [
+          "Modal.stories.tsx:Default",
+          "Modal.stories.tsx:WithTabs"
+        ],
+        "snippet": "<Modal isOpen={open} onClose={() => setOpen(false)} title=\"Título\">\n  <Modal.Body>Contenido</Modal.Body>\n  <Modal.Footer>\n    <Button onClick={() => setOpen(false)}>Cerrar</Button>\n  </Modal.Footer>\n</Modal>"
+      }
+    },
+    {
+      "id": "Notification",
+      "path": "src/modules/Notification",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Notification",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Notificación (Figma Notification): compone",
+            "jsdoc": "Notificación de producto según Figma ([Notification](https://www.figma.com/design/aWDHIXKjf82m6udooBUeZG/Notification)): compone {@link Alert}\ncon API agrupada (`content`, `leading`, `appearance`, `meta`, `events`).",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Notification\n      open\n      content={{\n        title: 'Notification Title',\n        subtitle: 'Subtitle',\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.',\n      }}\n      leading={{ source: 'general' }}\n      appearance={{ intent: 'informativa', showCloseButton: true }}\n      meta={{\n        presentation: 'popup',\n        stackSummary: '5 notificaciones más',\n      }}\n      events={{}}\n    />\n  );\n}",
+            "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <div className=\"ui-w-[260px] ui-max-w-full\">\n      <Notification\n        open\n        content={{\n          title:\n            'Título de notificación deliberadamente largo que debe truncarse con puntos suspensivos',\n          subtitle:\n            'Subtítulo extenso en una sola línea cuando el espacio horizontal es limitado en el panel',\n          description:\n            'Cuerpo del mensaje también largo: una sola línea con ellipsis para mantener la altura de la tarjeta predecible.',\n        }}\n        leading={{ source: 'general' }}\n        appearance={{ intent: 'informativa', showCloseButton: true }}\n        meta={{ presentation: 'popup' }}\n        events={{}}\n      />\n    </div>\n  );\n}",
+            "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <div className=\"ui-w-[260px] ui-max-w-full\">\n      <Notification\n        open\n        content={{\n          kind: 'message',\n          title: 'Título largo que se corta en una sola línea con ellipsis en panel estrecho',\n          subtitle:\n            'Subtítulo igualmente extenso para validar truncado junto al icono y al cerrar',\n          messageText:\n            'Alex Manrique: mensaje citado muy largo que debe mostrarse en una sola línea dentro del panel con fondo y puntos suspensivos al final.',\n        }}\n        leading={{ source: 'general' }}\n        appearance={{ intent: 'informativa', showCloseButton: true }}\n        meta={{ presentation: 'popup' }}\n        events={{}}\n      />\n    </div>\n  );\n}",
+            "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Notification\n      open\n      content={{\n        title: 'Notification Title',\n        subtitle: 'Subtitle',\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.',\n      }}\n      leading={{ source: 'general' }}\n      appearance={{ intent: 'confirmacion', showCloseButton: true }}\n      meta={{ presentation: 'popup', stackSummary: '5 notificaciones más' }}\n      events={{}}\n    />\n  );\n}",
+            "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Notification\n      open\n      content={{\n        title: 'Notification Title',\n        subtitle: 'Subtitle',\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.',\n      }}\n      leading={{ source: 'general' }}\n      appearance={{ intent: 'preventiva', showCloseButton: true }}\n      meta={{ presentation: 'popup', stackSummary: '5 notificaciones más' }}\n      events={{}}\n    />\n  );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Pagination",
+      "path": "src/modules/Pagination",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Pagination",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Pagination permite navegar entre páginas de contenido.",
+            "jsdoc": "Pagination - Componente de paginación\nComponente de paginación que permite navegar entre páginas de datos.\nSoporta selector de tamaño de página, contador de páginas visibles y navegación con botones.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Pagination } from '@/modules/Pagination';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    return (\n      <Pagination \n        currentPage={currentPage} \n        pageCount={10} \n        onPageChange={setCurrentPage} \n      />\n    )\n  }",
+            "import { Pagination } from '@/modules/Pagination';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    return (\n      <Pagination \n        currentPage={currentPage} \n        pageCount={10} \n        onPageChange={setCurrentPage} \n      />\n    )\n  }",
+            "import { Pagination } from '@/modules/Pagination';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    return (\n      <Pagination \n        currentPage={currentPage} \n        pageCount={10} \n        onPageChange={setCurrentPage} \n      />\n    )\n  }",
+            "import { Pagination } from '@/modules/Pagination';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    return (\n      <Pagination \n        currentPage={currentPage} \n        pageCount={10} \n        onPageChange={setCurrentPage} \n      />\n    )\n  }",
+            "import { Pagination } from '@/modules/Pagination';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    return (\n      <Pagination \n        currentPage={currentPage} \n        pageCount={10} \n        onPageChange={setCurrentPage} \n      />\n    )\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "PickerColor",
+      "path": "src/modules/PickerColor",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "PickerColor",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Un componente para seleccionar colores en formato hexadecimal. Incluye un selector visual con colores recientes y recomendados, y persistencia en localStorage.",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Picture",
+      "path": "src/modules/Picture",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Picture",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Picture permite mostrar imágenes con diferentes formatos y tamaños.",
+            "jsdoc": "Inactivo alineado a Figma **Cards** [233:11229](https://www.figma.com/design/3w0SWvV7C5tDKUybsOcgA4/Cards?node-id=233-11229):\ncapa `bg-fill-tertiary` (#f0f1f2) como en Figma; contenedor con `mix-blend-luminosity`; imagen con brillo/contraste suaves.\nSi un consumidor fuerza `img { filter: none !important }` o anula `mix-blend-mode`, el resultado puede no coincidir.\nSin `src` válido o tras error de carga de imagen se muestra el icono Font Awesome **Image** (regular) en superficie terciaria, en lugar de un SVG raster externo.\n/\nconst PICTURE_DISABLED_IMG_STYLE: CSSProperties = {\n  WebkitFilter: 'brightness(1.06) contrast(0.88)',\n  filter: 'brightness(1.06) contrast(0.88)',\n};\n\n/**\nImagen con variantes de tamaño, radio y estado *disabled* alineado a Figma.\nLos `<img>` usan **`draggable={false}",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Picture } from '@imj_media/ui';\n\n  export default function Example() {\n    const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n    return <Picture src={IMAGE} alt=\"Imagen de ejemplo\" />\n  }",
+            "import { Picture } from '@/modules/Picture';\n\n  export default function Example() {\n    const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n    return <StoryBox.Content>\n        <Picture size=\"xs\" src={IMAGE} alt=\"Imagen de ejemplo\" />\n        <Picture size=\"sm\" src={IMAGE} alt=\"Imagen de ejemplo\" />\n        <Picture size=\"md\" src={IMAGE} alt=\"Imagen de ejemplo\" />\n        <Picture size=\"lg\" src={IMAGE} alt=\"Imagen de ejemplo\" />\n        <Picture size=\"xl\" src={IMAGE} alt=\"Imagen de ejemplo\" />\n    </StoryBox.Content>\n  }",
+            "import { Picture } from '@/modules/Picture';\n\n  export default function Example() {\n    const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n    return <StoryBox.Content>\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"none\" />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"sm\" />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"md\" />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"pill\" />\n    </StoryBox.Content>\n  }",
+            "import { Picture } from '@/modules/Picture';\n\n  export default function Example() {\n    const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n    return <StoryBox.Content>\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"none\" square />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"sm\" square />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"md\" square />\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" radius=\"pill\" square />\n    </StoryBox.Content>\n  }",
+            "import { Picture } from '@/modules/Picture';\n\n  export default function Example() {\n    const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n    return <StoryBox.Content>\n        <Picture src={IMAGE} alt=\"Imagen de ejemplo\" shadow />\n    </StoryBox.Content>\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Popup",
+      "path": "src/modules/Popup",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Popup",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Popup - Componente de popup/dropdown posicionable y configurable\nComponente de popup que se posiciona relativamente a un trigger, con soporte para múltiples\nposiciones, cierre automático, tooltips, iconos y slots personalizados.",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "Popover",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "low"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_OPEN_ON_HOVER_CLOSE_DELAY_MS",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Retardo por defecto al abrir con `openOnHover={true}` (ms). */\nexport const POPUP_OPEN_ON_HOVER_DEFAULT_MS = 200;\n/** Margen al salir del trigger o del panel antes de cerrar (ms).",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_OPEN_ON_HOVER_DEFAULT_MS",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Retardo por defecto al abrir con `openOnHover={true}` (ms).",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_ARROW_TILT_LEFT_DEG",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Sin contorno en el trazo + sombra (mismo criterio que el panel con `showPanelBorder={false}`).\nEl relleno sigue usando el token de fondo del panel.\n/\n  elevated?: boolean;\n}\n\n/**\nAncho horizontal del beak respecto al path base (`1` = ancho de diseño; menor = más estrecho).\nSe aplica con `scale` en torno a x=14 (centro del viewBox).\n/\nexport const POPUP_ARROW_WIDTH_SCALE = 0.7;\n\n/**\nInclinación fina del beak solo en bordes laterales (deg); 0 = perpendicular a `-90°` / `90°`.\nValores separados por si en diseño hace falta asimetría.",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_ARROW_TILT_RIGHT_DEG",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "low"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_ARROW_WIDTH_SCALE",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Sin contorno en el trazo + sombra (mismo criterio que el panel con `showPanelBorder={false}`).\nEl relleno sigue usando el token de fondo del panel.\n/\n  elevated?: boolean;\n}\n\n/**\nAncho horizontal del beak respecto al path base (`1` = ancho de diseño; menor = más estrecho).\nSe aplica con `scale` en torno a x=14 (centro del viewBox).",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "POPUP_PANEL_Z_INDEX_BASE",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n  triggerRect: DOMRectReadOnly,\n  clientX: number,\n  clientY: number,\n): { x: number; y: number } {\n  const rw = Math.max(triggerRect.width, 0);\n  const rh = Math.max(triggerRect.height, 0);\n  const insetX = rw > 0 ? Math.min(1, rw) : 0;\n  const insetY = rh > 0 ? Math.min(1, rh) : 0;\n  const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n  const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n  const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n  const y = Math.min(Math.max(c",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "Z_INDEX_MODAL_ABOVE_POPUP",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n  triggerRect: DOMRectReadOnly,\n  clientX: number,\n  clientY: number,\n): { x: number; y: number } {\n  const rw = Math.max(triggerRect.width, 0);\n  const rh = Math.max(triggerRect.height, 0);\n  const insetX = rw > 0 ? Math.min(1, rw) : 0;\n  const insetY = rh > 0 ? Math.min(1, rh) : 0;\n  const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n  const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n  const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n  const y = Math.min(Math.max(c",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        },
+        {
+          "name": "Z_INDEX_TOOLTIP",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n  triggerRect: DOMRectReadOnly,\n  clientX: number,\n  clientY: number,\n): { x: number; y: number } {\n  const rw = Math.max(triggerRect.width, 0);\n  const rh = Math.max(triggerRect.height, 0);\n  const insetX = rw > 0 ? Math.min(1, rw) : 0;\n  const insetY = rh > 0 ? Math.min(1, rh) : 0;\n  const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n  const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n  const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n  const y = Math.min(Math.max(c",
+            "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│   └── organisms/\n│       └── Popup.tsx      # Componente principal\n├── hooks/                  # Hooks personalizados\n├── stories/\n│   └── Popup.stories.tsx   # Storybook stories\n└── index.ts               # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I",
+            "confidence": "medium"
+          },
+          "examples": [
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>",
+            "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n  <Popup\n    label=\"Centro\"\n    fullWidth\n    slotLayout={BUTTON_SLOT_SPREAD_CENTER}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>\n\n  <Popup\n    label=\"Izquierda\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />\n\n  <Popup\n    label=\"Derecha\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n    rightSlot={faAngleDown}\n  />",
+            "<Popup\n    label=\"Menú · icono izq.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'right' }}\n    leftSlot={faBell}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Acción · icono dcha.\"\n    fullWidth\n    slotLayout={{ var: 'spread', textAlign: 'left' }}\n    rightSlot={faAngleDown}\n  >\n    {children}\n  </Popup>",
+            "<Popup\n    label=\"Solo texto · inline\"\n    fullWidth\n    position=\"bottom-center\"\n    /* sin leftSlot / rightSlot — slotLayout inline por defecto */\n  >\n    {children}\n  </Popup>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "ProgressBar",
+      "path": "src/modules/ProgressBar",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "ProgressBar",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Tamaños válidos para ProgressBar */\nconst VALID_SIZES: ProgressBarSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];\n\n/**\nHook interno para manejar la cuenta regresiva del ProgressBar.\nAnima el progreso desde un valor inicial hasta 0 en un tiempo determinado.\n/\nconst useCountdown = (\n  initialProgress: number,\n  countdownSeconds: number | undefined,\n  onComplete?: () => void,\n) => {\n  const [currentProgress, setCurrentProgress] = useState(initialProgress);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = useRef<number>(0);\n  const hasCompletedRef = useRef(false);\n  // Guardar el callback en una ref para evitar que esté en las dependencias del useEffect\n  const onCompleteRef = useRef(onComplete);\n\n  const INTERVAL_MS = 16; // ~60fps\n\n  // Mantener la ref actualizada",
+            "confidence": "medium"
+          },
+          "examples": [
+            "// Modo normal\n<ProgressBar \n  progress={75} \n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  helperText=\"200MB de 512MB\"\n/>\n\n// Modo compacto - barra en línea con el label\n<ProgressBar \n  progress={75} \n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  helperText=\"200MB de 512MB\"\n  compact\n/>",
+            "<ProgressBar\n  progress={75}\n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  size=\"sm\"\n  color=\"brand\"\n  helperText=\"200MB de 512MB\"\n  helperTextType=\"size\"\n  showCloseButton\n  onClose={() => {}}\n  withBackground\n/>",
+            "// Uso simple - la barra anima automáticamente de 75% a 0% en 5 segundos\n<ProgressBar \n  progress={75}\n  countdown={5}\n  label=\"Descargando...\"\n  onCountdownComplete={() => console.log('¡Completado!')}\n/>\n\n// Con diferentes colores y duraciones\n<ProgressBar \n  progress={100}\n  countdown={10}\n  color=\"warning\"\n  label=\"Tiempo restante\"\n  onCountdownComplete={() => alert('¡Se acabó el tiempo!')}\n/>",
+            "// Modo normal\n<ProgressBar \n  progress={75} \n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  helperText=\"200MB de 512MB\"\n/>\n\n// Modo compacto - barra en línea con el label\n<ProgressBar \n  progress={75} \n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  helperText=\"200MB de 512MB\"\n  compact\n/>",
+            "<ProgressBar\n  progress={75}\n  label=\"archivo.zip\"\n  eta=\"1m restante\"\n  size=\"sm\"\n  color=\"brand\"\n  helperText=\"200MB de 512MB\"\n  helperTextType=\"size\"\n  showCloseButton\n  onClose={() => {}}\n  withBackground\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "RadioButton",
+      "path": "src/modules/RadioButton",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "RadioButton",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Un componente RadioButton personalizado y simple para selecciones únicas. Soporta estados controlado y no controlado.",
+            "jsdoc": "Componente RadioButton - Átomo\nUn radio button personalizable con múltiples estados y variantes de color.\nImplementa tokens semánticos de Figma para consistencia visual.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { RadioButton } from '@/modules/RadioButton';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [isChecked, setIsChecked] = useState(false);\n\n    return (\n      <RadioButton\n        label=\"Opción básica\"\n        name=\"basic-radio\"\n        checked={isChecked}\n        onChange={() => setIsChecked(!isChecked)}\n        color=\"blue\"\n        size=\"md\"\n      />\n    )\n  }",
+            "const [selectedSize, setSelectedSize] = useState('md');\n\n  <RadioButton\n    label=\"Opción pequeña\"\n    name=\"size-radio\"\n    checked={selectedSize === 'sm'}\n    onChange={() => setSelectedSize('sm')}\n    size=\"sm\"\n    color=\"blue\"\n  />\n  <RadioButton\n    label=\"Opción mediana\"\n    name=\"size-radio\"\n    checked={selectedSize === 'md'}\n    onChange={() => setSelectedSize('md')}\n    size=\"md\"\n    color=\"blue\"\n  />\n  <RadioButton\n    label=\"Opción grande\"\n    name=\"size-radio\"\n    checked={selectedSize === 'lg'}\n    onChange={() => setSelectedSize('lg')}\n    size=\"lg\"\n    color=\"blue\"\n  />",
+            "const [selectedColor, setSelectedColor] = useState('blue');\n\n  <RadioButton\n    label=\"Opción azul\"\n    name=\"color-radio\"\n    checked={selectedColor === 'blue'}\n    onChange={() => setSelectedColor('blue')}\n    color=\"blue\"\n  />\n  <RadioButton\n    label=\"Opción verde\"\n    name=\"color-radio\"\n    checked={selectedColor === 'green'}\n    onChange={() => setSelectedColor('green')}\n    color=\"green\"\n  />\n  <RadioButton\n    label=\"Opción roja\"\n    name=\"color-radio\"\n    checked={selectedColor === 'red'}\n    onChange={() => setSelectedColor('red')}\n    color=\"red\"\n  />\n  <RadioButton\n    label=\"Opción amarilla\"\n    name=\"color-radio\"\n    checked={selectedColor === 'yellow'}\n    onChange={() => setSelectedColor('yellow')}\n    color=\"yellow\"\n  />\n  <RadioButton\n    label=\"Opción neutral\"\n    name=\"color-radio\"\n    checked={selectedColor === 'neutral'}\n    onChange={() => setSelectedColor('neutral')}\n    color=\"neutral\"\n  />",
+            "const [isChecked, setIsChecked] = useState(false);\n\n  <RadioButton\n    label=\"Opción deshabilitada\"\n    name=\"disabled-radio\"\n    checked={isChecked}\n    onChange={() => setIsChecked(!isChecked)}\n    disabled={true}\n    color=\"blue\"\n  />\n  <RadioButton\n    label=\"Opción habilitada\"\n    name=\"enabled-radio\"\n    checked={isChecked}\n    onChange={() => setIsChecked(!isChecked)}\n    disabled={false}\n    color=\"blue\"\n  />",
+            "const [isChecked, setIsChecked] = useState(false);\n\n  <RadioButton\n    label=\"Opción controlada\"\n    name=\"controlled-radio\"\n    checked={isChecked}\n    onChange={() => setIsChecked(!isChecked)}\n    color=\"blue\"\n    size=\"md\"\n  />",
+            "import { RadioButtonGroup } from '@/modules/RadioButton';\n  import { useState } from 'react';\n\n  export default function Example() {\n    const [selectedValue, setSelectedValue] = useState('option1');\n\n    return (\n      <RadioButtonGroup\n        options={[\n          { value: 'option1', label: 'Opción 1' },\n          { value: 'option2', label: 'Opción 2' },\n          { value: 'option3', label: 'Opción 3' },\n          { value: 'option4', label: 'Opción 4 (Deshabilitada)', disabled: true },\n        ]}\n        value={selectedValue}\n        onChange={setSelectedValue}\n        name=\"basic-group\"\n        color=\"blue\"\n        size=\"md\"\n      />\n    )\n  }",
+            "const [selectedValue, setSelectedValue] = useState('option1');\n\n  <RadioButtonGroup\n    options={defaultOptions}\n    value={selectedValue}\n    onChange={setSelectedValue}\n    name=\"controlled-group\"\n    color=\"blue\"\n  />",
+            "const [selectedValue, setSelectedValue] = useState('option1');\n\n  <RadioButtonGroup\n    options={defaultOptions}\n    value={selectedValue}\n    onChange={setSelectedValue}\n    name=\"uncontrolled-group\"\n    color=\"green\"\n  />",
+            "const [selectedSize, setSelectedSize] = useState('md');\n\n  <RadioButtonGroup\n    options={defaultOptions}\n    value={selectedSize}\n    onChange={setSelectedSize}\n    name=\"size-sm\"\n    color=\"blue\"\n  />\n  <RadioButtonGroup\n    options={defaultOptions}\n    value={selectedSize}\n    onChange={setSelectedSize}\n    name=\"size-md\"\n    color=\"blue\"\n  />\n  <RadioButtonGroup\n    options={defaultOptions}\n    value={selectedSize}\n    onChange={setSelectedSize}\n    name=\"size-lg\"\n    color=\"blue\"\n  />",
+            "const [selectedColor, setSelectedColor] = useState('blue');\n\n  <RadioButtonGroup\n    options={colorOptions}\n    value={selectedColor}\n    onChange={setSelectedColor}\n    name=\"color-blue\"\n    color=\"blue\"\n  />\n  <RadioButtonGroup\n    options={colorOptions}\n    value={selectedColor}\n    onChange={setSelectedColor}\n    name=\"color-green\"\n    color=\"green\"\n  />\n  <RadioButtonGroup\n    options={colorOptions}\n    value={selectedColor}\n    onChange={setSelectedColor}\n    name=\"color-red\"\n    color=\"red\"\n  />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "RangeBar",
+      "path": "src/modules/RangeBar",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "RANGE_BAR_TRACK_BLEED_X",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Control de rango con dos extremos. API agrupada:",
+            "jsdoc": "Padding horizontal del carril: deja sitio para el thumb (20px) centrado en 0% y 100%\nsin recortarse. Debe aplicarse igual en `RangeBar` y en filas de `RangeSelector` alineadas a la pista.",
+            "confidence": "high"
+          },
+          "examples": [
+            "<RangeSelector\n  labels={{ title: 'Costo' }}\n  range={{ min: 0, max: 100000, step: 1000, value }}\n  events={{ onChange: setValue }}\n  appearance={{ compact: true }}\n/>",
+            "<RangeSelector\n  labels={{ title: 'Costo' }}\n  range={{ min: 0, max: 100000, step: 1000, value }}\n  events={{ onChange: setValue }}\n  appearance={{ compact: true }}\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Rating",
+      "path": "src/modules/Rating",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Rating",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Rating - Componente de calificación con estrellas\nComponente que muestra un sistema de calificación con estrellas.\nSoporta modo lectura y edición, hover interactivo y diferentes tamaños.",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Separator",
+      "path": "src/modules/Separator",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Separator",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Separador visual horizontal o vertical. Con",
+            "jsdoc": "Separator - Componente de separador visual\nComponente que muestra una línea separadora horizontal o vertical.\nÚtil para dividir secciones de contenido visualmente.",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Sidebar",
+      "path": "src/modules/Sidebar",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Sidebar",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "Application sidebar aligned with the Sidebar-Menu Figma spec: 240px expanded, 56px collapsed,\n12px rail padding, header row (logo + optional trailing), collapse control with shadow-03,\nscrollable menu region, workspace card below the menu (or sheet over profile when `workspace.workspaceSheet`),\nthen profile and optional footer.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarMenuItem",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "============================================\nSIDEBAR MENU ITEM - ATOM\n============================================\nComponente atómico para items individuales del menú lateral.\nReutiliza el componente ListItemDefault del paquete UI.\nSoporta iconos, badges, estados activo/deshabilitado y submenús.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarDivider",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "============================================\nSIDEBAR DIVIDER - ATOM\n============================================\nSeparador para el sidebar. Puede ser una línea simple\no incluir un texto descriptivo.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarSectionTitle",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "============================================\nSIDEBAR SECTION TITLE - ATOM\n============================================\nSection label for the sidebar; groups menu blocks.\nBody XS Regular, tertiary, sentence case (no uppercase transform).",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarMenuGroup",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "Groups menu rows under an optional section title (Figma section headers).\nWith `collapsible`, the header toggles the item list (chevron up/down).\nWhen `collapsed`, titled groups render a plain divider (unless skipped) and items only.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarUserProfile",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "Sidebar user rail (avatar, name, subtitle) with an optional account menu in a border popover\nwithout arrow (`popoverArrow={false}`), aligned with Sidebar-Menu Figma `290:52422`.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarWorkspaceCard",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "“Mesa de trabajo” surface for the sidebar rail (Figma Sidebar-Menu `_Storage Usage Widget`):\ngradient fill, dashed border, section label, icon + primary line + badge, divider, text CTAs.\nIcon + headline sit on one marquee track (vertically centered vs. badge); hover scrolls icon + title together (see `ui-sidebar-workspace-marquee-*` in shared styles).",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarDrilldownPanel",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.",
+            "jsdoc": "Second-level sidebar region: back control, optional breadcrumb, and submenu rows.\nPresentation-only: routing and `href` handling belong to the host via `onActivateSubmenu`.",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Skeleton",
+      "path": "src/modules/Skeleton",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Skeleton",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Skeleton - Componente de placeholder de carga\nComponente que muestra un placeholder animado mientras se carga el contenido.\nÚtil para mejorar la experiencia de usuario durante la carga de datos.",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Spinner",
+      "path": "src/modules/Spinner",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Spinner",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Spinner permite mostrar un spinner de carga.",
+            "jsdoc": "Spinner - Componente de spinner de carga animado\nComponente que muestra una animación de carga usando Lottie.\nÚtil para indicar que una operación está en progreso.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Spinner } from '@imj_media/ui';\n\n  export default function Example() {\n    return <Spinner />\n  }",
+            "import { Spinner } from '@imj_media/ui';\n\n  export default function Example() {\n    return <Spinner />\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Stepper",
+      "path": "src/modules/Stepper",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Stepper",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Variantes del Stepper usando tokens semánticos\n/\nconst stepperVariants = cva('', {\n  variants: {\n    color: {\n      blue: '',\n      red: '',\n      green: '',\n      orange: '',\n      yellow: '',\n      'blue-dark': '',\n      'blue-light': '',\n      neutral: '',\n      white: '',\n      black: '',\n      transparent: '',\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n  },\n  defaultVariants: {\n    color: 'blue',\n    size: 'md',\n  },\n});\n\n/**\nStepper - Componente de pasos/progreso de pasos\nComponente que muestra un conjunto de pasos con indicadores de estado (completado, activo, pendiente).\nSoporta orientación horizontal y vertical, múltiples colores y tamaños.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Stepper } from \"@imj_me/ui\";\n    import { useState } from \"react\";\n\n    const [currentStep, setCurrentStep] = useState(0);\n\n    function Example() {\n        return (\n            <Stepper\n                steps={steps}\n                currentStep={currentStep}\n                onStepChange={setCurrentStep}\n            />\n        );\n    }",
+            "import { Stepper } from \"@imj_me/ui\";\n\n    const steps = [{}, {}, {}, {}];\n\n    <Stepper steps={steps} currentStep={currentStep} onStepChange={setCurrentStep} className=\"ui-w-full\" />",
+            "// El conector horizontal escala con el ancho de cada celda (flex-1 + min-width del paso).\n    // Envuelve el Stepper en un contenedor con ancho conocido o responsive.\n\n    <div className=\"ui-w-full ui-max-w-3xl\">\n      <Stepper\n        steps={steps}\n        currentStep={currentStep}\n        onStepChange={setCurrentStep}\n        withScroll={false}\n        className=\"ui-w-full\"\n      />\n    </div>",
+            "<Stepper\n        steps={steps}\n        currentStep={currentStep}\n        onStepChange={setCurrentStep}\n        stepClickable\n    />",
+            "<Stepper\n        steps={steps}\n        currentStep={currentStep}\n        onStepChange={setCurrentStep}\n        vertical\n    />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "StoryBox",
+      "path": "src/modules/StoryBox",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "StoryBox",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Tema Orbit efectivo para hijos (`auto` en código): forzado por `StoryBox` o el `data-theme` de `documentElement`. */\ntype StoryBoxOrbitAppearance = 'light' | 'dark';\n\nconst StoryBoxForcedAppearanceContext = createContext<StoryBoxOrbitAppearance | null>(null);\n\nfunction getDocumentThemeSnapshot(): StoryBoxOrbitAppearance {\n  if (typeof document === 'undefined') return 'light';\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n}\n\nfunction subscribeDocumentTheme(onStoreChange: () => void): () => void {\n  if (typeof document === 'undefined') return () => {};\n  const el = document.documentElement;\n  const mo = new MutationObserver(onStoreChange);\n  mo.observe(el, { attributes: true, attributeFilter: ['data-theme'] });\n  return () => mo.disconnect();\n}",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { StoryBox, Button } from '@imj_media/ui';\n\nexport function Ejemplo() {\n  return (\n    <StoryBox appearance=\"dark\">\n      <StoryBox.Title>Título</StoryBox.Title>\n      <StoryBox.Content>\n        <Button variant=\"button\">Acción</Button>\n      </StoryBox.Content>\n    </StoryBox>\n  );\n}",
+            "import { StoryBox } from '@/modules/StoryBox';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    return (\n      <StoryBox>\n        <StoryBox.Title>StoryBox Básico</StoryBox.Title>\n        <StoryBox.Description>StoryBox simple con configuración por defecto</StoryBox.Description>\n        <StoryBox.Content>\n          <Button variant=\"button\">Click me</Button>\n        </StoryBox.Content>\n        <StoryBox.Code language=\"tsx\">\n          <Button variant=\"button\">Click me</Button>\n        </StoryBox.Code>\n      </StoryBox>\n    )\n  }",
+            "import { StoryBox, Button } from '@imj_media/ui';\n\nexport function Ejemplo() {\n  return (\n    <StoryBox appearance=\"dark\">\n      <StoryBox.Title>Título</StoryBox.Title>\n      <StoryBox.Content>\n        <Button variant=\"button\">Acción</Button>\n      </StoryBox.Content>\n    </StoryBox>\n  );\n}",
+            "import { StoryBox } from '@/modules/StoryBox';\n  import { Button } from '@/modules/Button';\n\n  export default function Example() {\n    return (\n      <StoryBox>\n        <StoryBox.Title>StoryBox Básico</StoryBox.Title>\n        <StoryBox.Description>StoryBox simple con configuración por defecto</StoryBox.Description>\n        <StoryBox.Content>\n          <Button variant=\"button\">Click me</Button>\n        </StoryBox.Content>\n        <StoryBox.Code language=\"tsx\">\n          <Button variant=\"button\">Click me</Button>\n        </StoryBox.Code>\n      </StoryBox>\n    )\n  }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Switch",
+      "path": "src/modules/Switch",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Switch",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Tipografía del label en control `md`: tamaño/interlineado/tracking Regular + peso Bold (spec Type/Body/SM). */\nconst SWITCH_MD_LABEL_TYPOGRAPHY =\n  'ui-text-body-sm-regular ui-font-body-sm-bold ui-leading-body-sm-regular ui-tracking-body-sm';\n\nfunction optionSlotToButtonSlotConfig(\n  icon: SwitchOption['leftSlot'],\n  colorIcon: IconFontColor | undefined,\n  duotone: Pick<\n    ButtonSlotConfig,\n    | 'iconDuotonePrimary'\n    | 'iconDuotoneSecondary'\n    | 'iconDuotoneOpacityPrimary'\n    | 'iconDuotoneOpacitySecondary'\n  >,\n  defaultIconFontSize: IconFontSize,\n  optionIconFontSize?: IconFontSize,\n): ButtonSlotConfig | undefined {\n  if (icon === null || icon === undefined) {\n    return undefined;\n  }\n  return {\n    icon,\n    ...(colorIcon !== undefined ? { colorIcon } : {}),\n    ...duotone,",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Switch, SwitchOption } from '@/modules/Switch';\n\n    const options: SwitchOption[] = [\n        { label: \"Acordeón 1\", value: \"accordion-1\", leftSlot: faSlash, rightSlot: faFolder },\n        { label: \"Acordeón 2\", value: \"accordion-2\", leftSlot: faSlash, rightSlot: faCalendar },\n        { label: \"Acordeón 3\", value: \"accordion-3\", leftSlot: faSlash, rightSlot: faCarrot },\n    ]\n  \n    export default function Example() {\n      return <Switch options={options} defaultValue=\"accordion-1\" onChange={(value) => {\n        console.log(value);\n      }} />\n    }",
+            "import { Switch, SwitchOption } from '@/modules/Switch';\n\n    const options: SwitchOption[] = [\n      { label: \"Disponible A\", value: \"a\", leftSlot: faList, rightSlot: faSquare },\n      { label: \"No disponible\", value: \"b\", leftSlot: faClock, rightSlot: faXmark, disabled: true },\n      { label: \"Disponible C\", value: \"c\", leftSlot: faCheck, rightSlot: faEdit },\n    ];\n\n    export default function Example() {\n      return (\n        <Switch\n          options={options}\n          defaultValue=\"a\"\n          onChange={(value) => console.log(value)}\n        />\n      );\n    }",
+            "import { Switch, SwitchOption } from '@/modules/Switch';\n\n    const options: SwitchOption[] = [\n        { label: \"Acordeón 1\", value: \"accordion-1\", leftSlot: faSlash, rightSlot: faFolder },\n        { label: \"Acordeón 2\", value: \"accordion-2\", leftSlot: faSlash, rightSlot: faCalendar },\n        { label: \"Acordeón 3\", value: \"accordion-3\", leftSlot: faSlash, rightSlot: faCarrot }\n    ]\n  \n    export default function Example() {\n        return <div className=\"ui-flex ui-flex-col ui-gap-2\">\n            <Switch options={options} defaultValue=\"accordion-1\" size=\"xs\" onChange={(value) => {\n                console.log(value);\n            }} />\n            <Switch options={options} defaultValue=\"accordion-2\" size=\"sm\" onChange={(value) => {\n                console.log(value);\n            }} />\n            <Switch options={options} defaultValue=\"accordion-3\" size=\"md\" onChange={(value) => {\n                console.log(value);\n            }} />\n        </div>\n    }",
+            "import { Switch, SwitchOption } from '@/modules/Switch';\n\n    const options: SwitchOption[] = [\n        { label: \"Vista Lista\", value: \"list\", leftSlot: faList },\n        { label: \"Vista Grid\", value: \"grid\", leftSlot: faSquare },\n        { label: \"Vista Calendario\", value: \"calendar\", leftSlot: faCalendar }\n    ]\n  \n    export default function Example() {\n      return <Switch options={options} defaultValue=\"list\" onChange={(value) => {\n        console.log(value);\n      }} />\n    }",
+            "import { Switch, SwitchOption } from '@/modules/Switch';\n\n    const options: SwitchOption[] = [\n        { label: \"Activo\", value: \"active\", rightSlot: faCheck },\n        { label: \"Inactivo\", value: \"inactive\", rightSlot: faXmark },\n        { label: \"Pendiente\", value: \"pending\", rightSlot: faClock }\n    ]\n  \n    export default function Example() {\n      return <Switch options={options} defaultValue=\"active\" onChange={(value) => {\n        console.log(value);\n      }} />\n    }"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Table",
+      "path": "src/modules/Table",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Table",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "Prop",
+            "readme": "# Table Component\n\nComponente de tabla completo y altamente configurable con soporte para múltiples funcionalidades empresariales.\n\n## 📚 Documentación\n\n- **[Ver Ejemplo de Uso Completo](./EJEMPLO_USO.md)** - Guía detallada con todos los casos de uso\n- **[Celda `imagePreview`](./IMAGE_PREVIEW_CELL.md)** - Columna con miniatura y popup al hover\n- **[Personalización `imagePreview`](./IMAGE_PREVIEW_CUSTOMIZATION.md)** - Qué se puede ajustar y qué es fijo (aspecto, padding, bordes)\n- **[Ver Stories en Storybook](./stories/Table.stories.tsx)** - Ejemplos interactivos\n\n## ✨ Características\n\n- ✅ **Tipos de celdas múltiples**: Default, Primary, Status, Actions, Link, Avatars, TextField, Dropdown, Button, Progress Bar, Skeleton, Tags, Checkbox, Icon, Stars\n- ✅ **Ordenamiento**: Sorting por columnas con indicadores visuales\n- ✅ **Filtrado**: Múltiples filtros por columna\n- ✅ **Búsqueda global**: Búsqueda en tiempo real en todas las columnas\n- ✅ **Selección**: Selección simple o múltiple de filas con callbacks\n- ✅ **Paginación**: Paginación completa con tamaños configurables\n- ✅ **Toolbar**: Barra de herramientas con búsqueda, filtros, exportación y configuración de columnas\n- ✅ **Estados de carga**: Skeleton loading states\n- ✅ **Estados vacíos**: Personalización de vistas vacías y sin resultados\n- ✅ **Filas expandibles**: Parent/child rows con animaciones\n- ✅ **Columnas bloqueables**: Sticky columns\n- ✅ **Columnas redimensionables**: Resize columns por arrastre o doble click para auto-ajustar\n- ✅ **Responsive**: Diseño adaptable\n- ✅ **Accesibilidad**: Soporte completo ARIA y navegación por teclado\n- ✅ **TypeScript**: Totalmente tipado\n\n## Estructura del Módulo\n\n```\nTable/\n├── components/\n│   ├── atoms/              # Componentes atómicos (celdas)\n│   ├── molecules/          # HeaderCell, TableRow, CellRenderer\n│   └── organisms/          # TableToolbar, TableHeader, TableBody, TableContent\n├── hooks/\n│   ├── useTableSort.ts\n│   ├── useTableFilter.ts\n│   ├── useTableSelection.",
+            "confidence": "high"
+          },
+          "examples": [
+            "<Table\n  columns={columns}\n  rows={rows}\n  selection={{ enabled: true, multiple: true }}\n  excludedRows={{\n    excludeKey: 'estado',\n    rows: ['archivado', 'bloqueado'],\n  }}\n/>",
+            "<Table\n  columns={columns}\n  rows={rows}\n  selection={{ enabled: true, multiple: true }}\n  excludedRows={{\n    excludeKey: 'estado',\n    rows: ['archivado', 'bloqueado'],\n  }}\n/>",
+            "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [checked, setChecked] = useState(false);\n  \n  return (\n    <>\n      <SelectionCheckbox\n        checked={checked}\n        onChange={setChecked}\n      />\n      <SelectionCheckbox\n        checked={true}\n        onChange={() => {}}\n      />\n      <SelectionCheckbox\n        checked={false}\n        indeterminate={true}\n        onChange={() => {}}\n      />\n    </>\n  );\n}",
+            "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [checked, setChecked] = useState(false);\n  \n  return (\n    <>\n      <SelectionCheckbox\n        checked={checked}\n        onChange={setChecked}\n        round={true}\n      />\n      <SelectionCheckbox\n        checked={true}\n        onChange={() => {}}\n        round={true}\n      />\n      <SelectionCheckbox\n        checked={false}\n        indeterminate={true}\n        onChange={() => {}}\n        round={true}\n      />\n    </>\n  );\n}",
+            "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n  \n  return (\n    <>\n      {/* Cuadrado (por defecto) */}\n      <SelectionCheckbox\n        checked={checked1}\n        onChange={setChecked1}\n        round={false}\n      />\n      \n      {/* Redondo */}\n      <SelectionCheckbox\n        checked={checked2}\n        onChange={setChecked2}\n        round={true}\n      />\n    </>\n  );\n}",
+            "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\n\nexport default function Example() {\n  return (\n    <>\n      {/* Cuadrado - No marcado */}\n      <SelectionCheckbox\n        checked={false}\n        onChange={() => {}}\n        round={false}\n      />\n      \n      {/* Cuadrado - Marcado */}\n      <SelectionCheckbox\n        checked={true}\n        onChange={() => {}}\n        round={false}\n      />\n      \n      {/* Redondo - No marcado */}\n      <SelectionCheckbox\n        checked={false}\n        onChange={() => {}}\n        round={true}\n      />\n      \n      {/* Redondo - Marcado */}\n      <SelectionCheckbox\n        checked={true}\n        onChange={() => {}}\n        round={true}\n      />\n    </>\n  );\n}",
+            "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n  const [checked, setChecked] = useState(false);\n  \n  return (\n    <>\n      <SelectionCheckbox\n        checked={checked}\n        onChange={setChecked}\n      />\n      <SelectionCheckbox\n        checked={true}\n        onChange={() => {}}\n      />\n      <SelectionCheckbox\n        checked={false}\n        indeterminate={true}\n        onChange={() => {}}\n      />\n    </>\n  );\n}",
+            "const columnasConAcciones = [\n  {\n    id: 'actions',\n    header: 'Acciones',\n    type: 'actions',\n    render: (_: unknown, row: User): TableActionConfig<User>[] => [\n      {\n        icon: faPen,\n        tooltip: 'Editar',\n        onClick: (r: User) => console.log('Editar', r),\n      },\n      {\n        icon: faTrash,\n        tooltip: 'Eliminar',\n        onClick: (r: User) => console.log('Eliminar', r),\n      },\n      {\n        icon: faEye,\n        tooltip: 'Ver',\n        onClick: (r: User) => console.log('Ver', r),\n      },\n    ],\n  },\n]\n\n<Table\n  columns={columnasConAcciones}\n  rows={rows}\n  hoverable={true}\n/>",
+            "import { Table } from '@imj_media/ui';\nimport { ColumnConfig } from '@/shared/types/table';\n\ninterface AlignmentData {\n  id: number;\n  name: string;\n  amount: number;\n  status: string;\n  progress: number;\n  date: Date;\n  tags: string[];\n}\n\nconst columns: ColumnConfig<AlignmentData>[] = [\n  {\n    id: 'id',\n    header: 'ID',\n    accessor: 'id',\n    contentAlign: 'left', // Por defecto\n  },\n  {\n    id: 'name',\n    header: 'Nombre',\n    accessor: 'name',\n    contentAlign: 'left', // Texto alineado a la izquierda\n  },\n  {\n    id: 'amount',\n    header: 'Monto',\n    accessor: 'amount',\n    contentAlign: 'right', // Números alineados a la derecha\n    render: (value: number) => \\",
+            "<Table\n  columns={columns}\n  rows={rows}\n  hoverable={true}\n/>",
+            "<Table\n  columns={columns}\n  rows={rows}\n  bordered={true}\n  hoverable={true}\n/>",
+            "<Table\n  columns={columns}\n  rows={rows}\n  toolbar={{\n    showSearch: true,\n    searchPlaceholder: 'Buscar por nombre, correo, rol, estado...',\n    searchWidth: 360,\n  }}\n/>",
+            "const columns: ColumnConfig<MisDatos>[] = [\n  { id: 'nombre', header: 'Nombre', accessor: 'nombre', sortable: true },\n  // …sin repetir lockable en cada una\n];\n\n<Table\n  columns={columns}\n  rows={rows}\n  columnsLockable={false}\n  toolbar={{ showColumnConfig: true }}\n  resizable\n/>",
+            "<Table\n  columns={[\n    { id: 'id', header: 'ID', accessor: 'id', lockable: true },\n    { id: 'nombre', header: 'Nombre', accessor: 'nombre' },\n  ]}\n  columnsLockable={false}\n  rows={rows}\n/>",
+            "const columns: ColumnConfig<MisDatos>[] = [\n  { id: 'nombre', header: 'Nombre', accessor: 'nombre', sortable: true },\n  // …sin repetir lockable en cada una\n];\n\n<Table\n  columns={columns}\n  rows={rows}\n  columnsLockable={false}\n  toolbar={{ showColumnConfig: true }}\n  resizable\n/>",
+            "<Table\n  columns={[\n    { id: 'id', header: 'ID', accessor: 'id', lockable: true },\n    { id: 'nombre', header: 'Nombre', accessor: 'nombre' },\n  ]}\n  columnsLockable={false}\n  rows={rows}\n/>",
+            "import { Table } from '@/modules/Table';\n\n// Persistir columnas, orden, filtros y búsqueda en la misma key de localStorage\n<Table<Persona>\n  columns={columnas}\n  rows={filas}\n  configKey=\"mi-tabla\"\n  persistConfig={true}\n  queryPersist={true}\n  toolbar={{\n    showSearch: true,\n    searchPlaceholder: 'Buscar...',\n    internalSearch: true,\n    showFilters: true,\n    internalFilters: true,\n    showColumnConfig: true,\n  }}\n  onConfigChange={(config, changeType) => console.log(changeType, config)}\n  striped\n  hoverable\n  resizable\n/>\n\n// queryPersist={false} → no se guardan ni restauran búsqueda ni filtros (solo columnas/orden)",
+            "import { Table } from '@/modules/Table';\n\n// Persistir columnas, orden, filtros y búsqueda en la misma key de localStorage\n<Table<Persona>\n  columns={columnas}\n  rows={filas}\n  configKey=\"mi-tabla\"\n  persistConfig={true}\n  queryPersist={true}\n  toolbar={{\n    showSearch: true,\n    searchPlaceholder: 'Buscar...',\n    internalSearch: true,\n    showFilters: true,\n    internalFilters: true,\n    showColumnConfig: true,\n  }}\n  onConfigChange={(config, changeType) => console.log(changeType, config)}\n  striped\n  hoverable\n  resizable\n/>\n\n// queryPersist={false} → no se guardan ni restauran búsqueda ni filtros (solo columnas/orden)",
+            "<Table\n  columns={columns}\n  rows={pageRows}\n  selection={{\n    enabled: true,\n    multiple: true,\n    showSelectionBar: true,\n    actions: [{ label: 'Eliminar', onClick: (ids) => { ... } }],\n  }}\n  pagination={{\n    enabled: true,\n    currentPage: page,\n    pageSize,\n    total: totalRowCount,\n    onPageChange: setPage,\n    onPageSizeChange: setPageSize,\n  }}\n/>",
+            "<Table\n  columns={columns}\n  rows={pageRows}\n  selection={{\n    enabled: true,\n    multiple: true,\n    showSelectionBar: true,\n    actions: [{ label: 'Eliminar', onClick: (ids) => { ... } }],\n  }}\n  pagination={{\n    enabled: true,\n    currentPage: page,\n    pageSize,\n    total: totalRowCount,\n    onPageChange: setPage,\n    onPageSizeChange: setPageSize,\n  }}\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Tag",
+      "path": "src/modules/Tag",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Tag",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Tag permite mostrar etiquetas, filtros o categorías con diferentes colores. Icono a la izquierda opcional vía",
+            "jsdoc": "Tag - Componente de etiqueta/tag versátil y configurable\nComponente de tag que soporta múltiples colores, estados (selected, disabled),\navatares, iconos de cierre e información, y diferentes estilos visuales.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Tag } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Tag label=\"Etiqueta\" color=\"accent\" />\n        <Tag label=\"Categoría\" color=\"accent\" />\n        <Tag label=\"Filtro\" color=\"accent\" />\n      </>\n    )\n  }",
+            "<Tag label=\"Accent\" color=\"accent\" />\n  <Tag label=\"Gray\" color=\"gray\" />\n  <Tag label=\"Success\" color=\"success\" />\n  <Tag label=\"Warning\" color=\"warning\" />\n  <Tag label=\"Danger\" color=\"danger\" />\n  <Tag label=\"Info\" color=\"info\" />\n  <Tag label=\"Disabled\" color=\"disabled\" />",
+            "<Tag label=\"Accent\" color=\"accent\" stroke={true} />\n  <Tag label=\"Success\" color=\"success\" stroke={false} />",
+            "import { faCircleInfo } from '@fortawesome/pro-regular-svg-icons';\n\n  <Tag label=\"Info\" color=\"info\" infoIcon={{ name: faCircleInfo }} />\n  <Tag label=\"Success\" color=\"success\" infoIcon={{ name: faCircleInfo }} />",
+            "import {\n    faCircleInfo,\n    faFilter,\n    faSearch,\n  } from '@fortawesome/pro-regular-svg-icons';\n\n  <Tag\n    label='\"query\"'\n    color=\"success\"\n    infoIcon={{ name: faSearch }}\n    onClose={() => {}}\n  />\n  <Tag\n    label=\"Custom\"\n    color=\"info\"\n    infoIcon={{ name: faCircleInfo, size: 'sm', color: 'warning' }}\n  />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Text",
+      "path": "src/modules/Text",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Text",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "jsdoc": "Text - Componente de texto versátil con múltiples variantes tipográficas\nComponente que renderiza texto con diferentes tipos tipográficos (body, title, caption, code)\ny tamaños. Soporta pesos de fuente personalizados y colores.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ]
+        },
+        {
+          "name": "Body",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ],
+          "props": {
+            "groups": {},
+            "deprecatedRoot": [
+              {
+                "name": "textColor",
+                "type": "TextColor"
+              }
+            ],
+            "flat": {
+              "size": {
+                "name": "size",
+                "type": "BodySize | BaseSize",
+                "required": false,
+                "description": "Tamaño del body: xs, sm, md, lg o tamaños base"
+              },
+              "weight": {
+                "name": "weight",
+                "type": "TextWeight",
+                "required": false,
+                "description": "Peso de la fuente"
+              },
+              "children": {
+                "name": "children",
+                "type": "React.ReactNode",
+                "required": true,
+                "description": "Contenido del texto"
+              },
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false,
+                "description": "Clase CSS adicional"
+              },
+              "as": {
+                "name": "as",
+                "type": "keyof JSX.IntrinsicElements",
+                "required": false,
+                "description": "Elemento HTML a renderizar (por defecto: span)"
+              },
+              "color": {
+                "name": "color",
+                "type": "TextColor | (string & {})",
+                "required": false,
+                "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado"
+              }
+            }
+          }
+        },
+        {
+          "name": "Caption",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ],
+          "props": {
+            "groups": {},
+            "deprecatedRoot": [
+              {
+                "name": "textColor",
+                "type": "TextColor"
+              }
+            ],
+            "flat": {
+              "size": {
+                "name": "size",
+                "type": "CaptionSize | BaseSize",
+                "required": false,
+                "description": "Tamaño del caption: xs, md o tamaños base"
+              },
+              "weight": {
+                "name": "weight",
+                "type": "TextWeight",
+                "required": false,
+                "description": "Peso de la fuente (solo aplica si se usa tamaño base)"
+              },
+              "children": {
+                "name": "children",
+                "type": "React.ReactNode",
+                "required": true,
+                "description": "Contenido del texto"
+              },
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false,
+                "description": "Clase CSS adicional"
+              },
+              "as": {
+                "name": "as",
+                "type": "keyof JSX.IntrinsicElements",
+                "required": false,
+                "description": "Elemento HTML a renderizar (por defecto: span)"
+              },
+              "color": {
+                "name": "color",
+                "type": "TextColor | (string & {})",
+                "required": false,
+                "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado"
+              }
+            }
+          }
+        },
+        {
+          "name": "TitleText",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ]
+        },
+        {
+          "name": "Code",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ],
+          "props": {
+            "groups": {},
+            "deprecatedRoot": [
+              {
+                "name": "textColor",
+                "type": "TextColor"
+              }
+            ],
+            "flat": {
+              "size": {
+                "name": "size",
+                "type": "CodeSize | BaseSize",
+                "required": false,
+                "description": "Tamaño del code: md o tamaños base"
+              },
+              "weight": {
+                "name": "weight",
+                "type": "TextWeight",
+                "required": false,
+                "description": "Peso de la fuente (solo aplica si se usa tamaño base)"
+              },
+              "children": {
+                "name": "children",
+                "type": "React.ReactNode",
+                "required": true,
+                "description": "Contenido del código"
+              },
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false,
+                "description": "Clase CSS adicional"
+              },
+              "as": {
+                "name": "as",
+                "type": "keyof JSX.IntrinsicElements",
+                "required": false,
+                "description": "Elemento HTML a renderizar (por defecto: code)"
+              },
+              "color": {
+                "name": "color",
+                "type": "TextColor | (string & {})",
+                "required": false,
+                "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado"
+              }
+            }
+          }
+        },
+        {
+          "name": "CustomText",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return <Text>Este es un texto básico</Text>\n  }",
+            "import { Text } from '@/modules/Text';\n\n  const copy = 'Texto largo repetido o cargado desde CMS…';\n\n  export default function Example() {\n    return (\n      <div style={{ width: 300, maxWidth: '100%' }} className=\"ui-space-y-4 ui-p-3\">\n        <Text type=\"title\" size=\"h5\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"md\" textColor=\"primary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\" textColor=\"secondary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"caption\" size=\"xs\" textColor=\"tertiary\" as=\"p\">\n          {copy}\n        </Text>\n        <Text type=\"code\" size=\"md\" as=\"p\" className=\"ui-break-words\">\n          const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n        </Text>\n      </div>\n    );\n  }",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n        <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n        <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n        <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n      </>\n    )\n  }",
+            "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n  <Text type=\"title\" size=\"h2\">Heading H2</Text>\n  <Text type=\"title\" size=\"h3\">Heading H3</Text>",
+            "import { Text } from '@/modules/Text';\n\n  export default function Example() {\n    return (\n      <>\n        <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n        <Text type=\"caption\" size=\"md\">Caption MD</Text>\n      </>\n    )\n  }"
+          ],
+          "props": {
+            "groups": {},
+            "deprecatedRoot": [
+              {
+                "name": "textColor",
+                "type": "TextColor"
+              }
+            ],
+            "flat": {
+              "size": {
+                "name": "size",
+                "type": "BaseSize",
+                "required": true,
+                "description": "Tamaño base del texto: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl"
+              },
+              "weight": {
+                "name": "weight",
+                "type": "TextWeight",
+                "required": false,
+                "description": "Peso de la fuente"
+              },
+              "children": {
+                "name": "children",
+                "type": "React.ReactNode",
+                "required": true,
+                "description": "Contenido del texto"
+              },
+              "className": {
+                "name": "className",
+                "type": "string",
+                "required": false,
+                "description": "Clase CSS adicional"
+              },
+              "as": {
+                "name": "as",
+                "type": "keyof JSX.IntrinsicElements",
+                "required": false,
+                "description": "Elemento HTML a renderizar (por defecto: span)"
+              },
+              "color": {
+                "name": "color",
+                "type": "TextColor | (string & {})",
+                "required": false,
+                "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "TextListWithData",
+      "path": "src/modules/TextListWithData",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "TextListWithData",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente TextListWithData muestra un texto con un indicador circular de color y un valor asociado. Útil para mostrar etiquetas con datos numéricos o textuales.",
+            "jsdoc": "TextListWithData - Texto con indicador de color y valor\nMuestra un texto con un indicador circular de color y un valor asociado.\nÚtil para mostrar etiquetas con datos numéricos o textuales.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "TextListIndicator",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente TextListWithData muestra un texto con un indicador circular de color y un valor asociado. Útil para mostrar etiquetas con datos numéricos o textuales.",
+            "jsdoc": "Color del indicador (valor CSS) */\n  color: string;\n  /** Tamaño del indicador en píxeles */\n  size: number;\n  /** Clase CSS adicional */\n  className?: string;\n}\n\n/**\nIndicador circular de color\nÁtomo que representa un punto de color para identificar categorías",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Textarea",
+      "path": "src/modules/Textarea",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Textarea",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Textarea - Componente de área de texto versátil y configurable\nComponente de textarea que soporta labels, mensajes de error, slots personalizados,\ncontador de caracteres, límite de longitud y estados controlados/no controlados.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Textarea } from '@/modules/Textarea';\n\n    export default function Example() {\n        const [value, setValue] = useState('');\n        return <Textarea value={value} onChange={setValue} />;\n    }",
+            "<Textarea \n        value={value} \n        onChange={setValue} \n        placeholder=\"Escribe tu mensaje aquí...\"\n    />",
+            "<Textarea \n        value={value} \n        onChange={setValue} \n        leftSlot={faAlignCenter}\n        rightSlot={faList}\n    />",
+            "<Textarea \n        value={value} \n        onChange={setValue} \n        leftSlot={faSearch}\n    />",
+            "<Textarea \n        value={value} \n        onChange={setValue} \n        rightSlot={faPaperPlane}\n    />"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Title",
+      "path": "src/modules/Title",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Title",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Title proporciona un título con soporte para:\n- Título de texto personalizable (mediante prop \\",
+            "jsdoc": "Title - Componente de título con soporte para iconos\nComponente que renderiza un título (h1) con opción de mostrar un icono.\nSoporta iconos duotone y centrado del contenido.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Title } from '@/modules/Title';\n\nexport default function Example() {\n  return (\n    <>\n      {/* Usando prop title */}\n      <Title title=\"Mi Título Principal\" />\n      \n      {/* Usando children */}\n      <Title>Mi Título Principal</Title>\n    </>\n  );\n}",
+            "import { Title } from '@/modules/Title';\nimport { faFolder, faCheckCircle } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function Example() {\n  return (\n    <>\n      {/* Texto simple */}\n      <Title>Mi Título con Children</Title>\n      \n      {/* Con formato */}\n      <Title>\n        Título con <span className=\"ui-text-brand\">texto destacado</span>\n      </Title>\n      \n      {/* Con icono */}\n      <Title icon={faFolder}>\n        Carpeta de Documentos\n      </Title>\n      \n      {/* Centrado */}\n      <Title center icon={faCheckCircle}>\n        Operación Completada\n      </Title>\n      \n      {/* Múltiples elementos */}\n      <Title>\n        Título con <span className=\"ui-text-success\">éxito</span> y <span className=\"ui-text-danger\">error</span>\n      </Title>\n    </>\n  );\n}",
+            "import { Title } from '@/modules/Title';\nimport { faFolder, faCalendar } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function Example() {\n  return (\n    <>\n      <Title title=\"Carpetas\" icon={faFolder} />\n      <Title title=\"Calendario\" icon={faCalendar} />\n    </>\n  );\n}",
+            "import { Title } from '@/modules/Title';\nimport { faCheckCircle, faExclamationTriangle } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function Example() {\n  return (\n    <>\n      <Title\n        title=\"Operación Exitosa\"\n        icon={faCheckCircle}\n        iconDuotonePrimary=\"success\"\n        iconDuotoneSecondary=\"green\"\n        iconDuotoneOpacityPrimary={1}\n        iconDuotoneOpacitySecondary={0.4}\n      />\n      <Title\n        title=\"Advertencia Importante\"\n        icon={faExclamationTriangle}\n        iconDuotonePrimary=\"warning\"\n        iconDuotoneSecondary=\"yellow\"\n        iconDuotoneOpacityPrimary={1}\n        iconDuotoneOpacitySecondary={0.4}\n      />\n    </>\n  );\n}",
+            "import { Title } from '@/modules/Title';\nimport { faFolder, faCalendar } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function Example() {\n  return (\n    <>\n      <Title\n        title=\"Carpetas Organizadas\"\n        icon={faFolder}\n        iconDuotonePrimary=\"azure\"\n        iconDuotoneSecondary=\"blue\"\n        iconDuotoneOpacityPrimary={1}\n        iconDuotoneOpacitySecondary={0.4}\n      />\n      <Title\n        title=\"Eventos del Mes\"\n        icon={faCalendar}\n        iconDuotonePrimary=\"violet\"\n        iconDuotoneSecondary=\"magenta\"\n        iconDuotoneOpacityPrimary={1}\n        iconDuotoneOpacitySecondary={0.4}\n      />\n    </>\n  );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Toast",
+      "path": "src/modules/Toast",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Toaster",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# Toast Component\n\nComponente de notificaciones toast modular y configurable con múltiples variantes y posiciones.\n\n## Estructura\n\n```\nToast/\n├── config/\n│   ├── index.ts\n│   └── toast.config.ts          # Configuración del toast\n├── hooks/\n│   ├── index.ts\n│   ├── useToast.ts              # Hook principal para manejar toasts\n│   ├── useToastService.ts       # Servicio de toast\n│   └── useToastStyles.ts        # Hook para estilos y utilidades\n├── components/\n│   ├── atoms/\n│   │   ├── ToastHeader.tsx      # Encabezado del toast\n│   │   └── ToastFooter.tsx      # Pie del toast\n│   └── molecules/\n│       ├── ToastItem.tsx        # Item individual del toast\n│       └── ToastPositions.tsx   # Contenedor de posiciones\n├── stories/\n│   └── toast.stories.tsx        # Storybook stories\n├── index.tsx                    # Componente principal\n└── README.md                    # Este archivo\n```\n\n## Uso\n\n### Básico\n\n```tsx\nimport { toast, Toaster } from '@/modules/Toast';\n\n// Mostrar un toast\ntoast.success('Operación exitosa');\ntoast.error('Algo salió mal');\ntoast.info('Información importante');\ntoast.warning('Advertencia');\n\n// En tu componente\nfunction App() {\n  return (\n    <div>\n      <Toaster />\n      {/* resto de tu app */}\n    </div>\n  );\n}\n```\n\n### Con título\n\n```tsx\n// Toast con título\ntoast.success('Usuario creado correctamente', {\n  title: 'Éxito',\n});\n\ntoast.error('No se pudo conectar al servidor', {\n  title: 'Error de conexión',\n});\n\ntoast.info('Tu sesión expirará en 5 minutos', {\n  title: 'Sesión',\n});\n\ntoast.warning('Los cambios no se han guardado', {\n  title: 'Advertencia',\n});\n```\n\n### Sin botón de cerrar\n\n```tsx\n// Toast sin botón de cerrar (se cerrará automáticamente)\ntoast.success('Mensaje temporal', {\n  showCloseButton: false,\n});\n\n// Toast con título pero sin botón de cerrar\ntoast.info('Procesando...', {\n  title: 'Carga',\n  showCloseButton: false,\n  duration: 3000,\n});\n```\n\n### Variantes de estilo\n\n```tsx\n// Variante contained (por defecto)\ntoast.success('",
+            "confidence": "low"
+          },
+          "examples": [
+            "// ✅ Nueva forma (recomendada)\n    import { notify, Messaging, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Messaging />\n        <Button onClick={() => notify.success(\"Hello, world!\")}>Success</Button>\n      </div>\n    )\n\n    // ✅ Forma legacy (sigue funcionando)\n    import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Toaster />\n        <Button onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n      </div>\n    )",
+            "import { notify } from '@imj_media'; // o import { toast } para compatibilidad\n\n    notify.success(\"Hello, world!\")\n    notify.error(\"Hello, world!\")\n    notify.info(\"Hello, world!\")\n    notify.warning(\"Hello, world!\")\n    \n    // ✨ Nuevos métodos disponibles con notify\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n    notify.message({ title: 'Mensaje de marca' })\n\n    notify.success({\n      message: \"Hello, world!\",\n      title: \"Success\",\n      position: 'top-center',\n      variant: 'outlined'\n    })\n\n    notify.success(\"Hello, world!\", {\n      title: \"Success\",\n      position: 'top-center',\n      variant: 'outlined'\n    })",
+            "import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => {\n\n      toast.configure({ \n        duration: 5000,\n        maxMessages: 5,\n        position: 'bottom-right',\n        variant: 'contained',\n        primaryButtonText: 'Aceptar',\n        secondaryButtonText: 'Cancelar'\n      }) \n\n      return (\n        <div>\n          <Toaster />\n          <Button variant=\"contained\" color=\"success\" onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n        </div>\n      )\n    }",
+            "import { toast, Toaster } from '@/modules/Toast';\n  import { Button } from '@/modules/Button';\n\n  import { faCheck, faExclamationTriangle, faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\n  export default function Example() {\n    return (\n      <>\n        <Toaster />\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"danger\" onClick={() => toast.error(\"Hello, world!\", { position: 'top-left' })}>Error</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.info(\"Hello, world!\")}>Info</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.warning(\"Hello, world!\")}>Warning</Button>\n      </>\n    )\n  }",
+            "// Tamaño pequeño (por defecto)\n    toast.success({\n      message: \"Toast con tamaño pequeño\",\n      title: \"Tamaño SM\",\n      size: 'sm'\n    })\n\n    // Tamaño mediano\n    toast.info({\n      message: \"Toast con tamaño mediano\", \n      title: \"Tamaño MD\",\n      size: 'md'\n    })"
+          ]
+        },
+        {
+          "name": "Messaging",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# Toast Component\n\nComponente de notificaciones toast modular y configurable con múltiples variantes y posiciones.\n\n## Estructura\n\n```\nToast/\n├── config/\n│   ├── index.ts\n│   └── toast.config.ts          # Configuración del toast\n├── hooks/\n│   ├── index.ts\n│   ├── useToast.ts              # Hook principal para manejar toasts\n│   ├── useToastService.ts       # Servicio de toast\n│   └── useToastStyles.ts        # Hook para estilos y utilidades\n├── components/\n│   ├── atoms/\n│   │   ├── ToastHeader.tsx      # Encabezado del toast\n│   │   └── ToastFooter.tsx      # Pie del toast\n│   └── molecules/\n│       ├── ToastItem.tsx        # Item individual del toast\n│       └── ToastPositions.tsx   # Contenedor de posiciones\n├── stories/\n│   └── toast.stories.tsx        # Storybook stories\n├── index.tsx                    # Componente principal\n└── README.md                    # Este archivo\n```\n\n## Uso\n\n### Básico\n\n```tsx\nimport { toast, Toaster } from '@/modules/Toast';\n\n// Mostrar un toast\ntoast.success('Operación exitosa');\ntoast.error('Algo salió mal');\ntoast.info('Información importante');\ntoast.warning('Advertencia');\n\n// En tu componente\nfunction App() {\n  return (\n    <div>\n      <Toaster />\n      {/* resto de tu app */}\n    </div>\n  );\n}\n```\n\n### Con título\n\n```tsx\n// Toast con título\ntoast.success('Usuario creado correctamente', {\n  title: 'Éxito',\n});\n\ntoast.error('No se pudo conectar al servidor', {\n  title: 'Error de conexión',\n});\n\ntoast.info('Tu sesión expirará en 5 minutos', {\n  title: 'Sesión',\n});\n\ntoast.warning('Los cambios no se han guardado', {\n  title: 'Advertencia',\n});\n```\n\n### Sin botón de cerrar\n\n```tsx\n// Toast sin botón de cerrar (se cerrará automáticamente)\ntoast.success('Mensaje temporal', {\n  showCloseButton: false,\n});\n\n// Toast con título pero sin botón de cerrar\ntoast.info('Procesando...', {\n  title: 'Carga',\n  showCloseButton: false,\n  duration: 3000,\n});\n```\n\n### Variantes de estilo\n\n```tsx\n// Variante contained (por defecto)\ntoast.success('",
+            "confidence": "low"
+          },
+          "examples": [
+            "// ✅ Nueva forma (recomendada)\n    import { notify, Messaging, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Messaging />\n        <Button onClick={() => notify.success(\"Hello, world!\")}>Success</Button>\n      </div>\n    )\n\n    // ✅ Forma legacy (sigue funcionando)\n    import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => (\n      <div>\n        <Toaster />\n        <Button onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n      </div>\n    )",
+            "import { notify } from '@imj_media'; // o import { toast } para compatibilidad\n\n    notify.success(\"Hello, world!\")\n    notify.error(\"Hello, world!\")\n    notify.info(\"Hello, world!\")\n    notify.warning(\"Hello, world!\")\n    \n    // ✨ Nuevos métodos disponibles con notify\n    notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n    notify.message({ title: 'Mensaje de marca' })\n\n    notify.success({\n      message: \"Hello, world!\",\n      title: \"Success\",\n      position: 'top-center',\n      variant: 'outlined'\n    })\n\n    notify.success(\"Hello, world!\", {\n      title: \"Success\",\n      position: 'top-center',\n      variant: 'outlined'\n    })",
+            "import { toast, Toaster, Button } from '@imj_media';\n\n    export const App = () => {\n\n      toast.configure({ \n        duration: 5000,\n        maxMessages: 5,\n        position: 'bottom-right',\n        variant: 'contained',\n        primaryButtonText: 'Aceptar',\n        secondaryButtonText: 'Cancelar'\n      }) \n\n      return (\n        <div>\n          <Toaster />\n          <Button variant=\"contained\" color=\"success\" onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n        </div>\n      )\n    }",
+            "import { toast, Toaster } from '@/modules/Toast';\n  import { Button } from '@/modules/Button';\n\n  import { faCheck, faExclamationTriangle, faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\n  export default function Example() {\n    return (\n      <>\n        <Toaster />\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.success(\"Hello, world!\")}>Success</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"danger\" onClick={() => toast.error(\"Hello, world!\", { position: 'top-left' })}>Error</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.info(\"Hello, world!\")}>Info</Button>\n        <Button size=\"sm\" theme=\"solid\" color=\"primary\" onClick={() => toast.warning(\"Hello, world!\")}>Warning</Button>\n      </>\n    )\n  }",
+            "// Tamaño pequeño (por defecto)\n    toast.success({\n      message: \"Toast con tamaño pequeño\",\n      title: \"Tamaño SM\",\n      size: 'sm'\n    })\n\n    // Tamaño mediano\n    toast.info({\n      message: \"Toast con tamaño mediano\", \n      title: \"Tamaño MD\",\n      size: 'md'\n    })"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Toggle",
+      "path": "src/modules/Toggle",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "TOGGLE_DESIGN_TOKENS",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Tokens semánticos del Toggle según diseño de Figma\nEl componente usa clases semánticas de Tailwind configuradas con variables CSS de Figma:\nCOLORES (tokens semánticos):\n- Activo: ui-bg-fill-brand → var(--ui-color-bg-fill-brand-default) = #3658c1\n- Inactivo: ui-bg-fill-brand-disabled → var(--ui-color-bg-fill-brand-disabled) = #b8c5ee\n- Disabled: ui-bg-fill-hover → var(--ui-color-bg-fill-hover) = #f0f1f2\n- Border: ui-border-DEFAULT → var(--ui-color-border-default) = #c6c8cc\n- Thumb: ui-bg-fill = #ffffff\n- Text: ui-text-primary → var(--ui-color-text-primary) = #313336\nDIMENSIONES (clases de Tailwind con Positive Space):\n- Container width: ui-w-32 → var(--ui-Positive-space_32) = 32px\n- Container height: ui-h-20 → var(--ui-Positive-space_20) = 20px\n- Thumb: ui-w-16 ui-h-16 → var(--ui-Positive-s",
+            "readme": "# Toggle Component\n\nComponente Toggle (interruptor) altamente configurable y accesible para React, construido fielmente siguiendo el diseño de Figma.\n\n## Características\n\n- ✅ **Diseño fiel a Figma** (32x20px, colores exactos)\n- ✅ Soporta modo controlado y no controlado\n- ✅ Label opcional con icono y posición configurable\n- ✅ Variante con stroke (borde)\n- ✅ Estados: activo, inactivo, disabled\n- ✅ Animaciones suaves\n- ✅ Totalmente accesible (ARIA)\n- ✅ Clases semánticas con prefijo `ui-`\n- ✅ TypeScript completo\n- ✅ Hook personalizado reutilizable\n\n## Especificaciones de Diseño (Figma)\n\n### Dimensiones (usando clases de Tailwind con Positive Space)\n\n- **Container width**: `ui-w-32` → `var(--ui-Positive-space_32)` = 32px\n- **Container height**: `ui-h-20` → `var(--ui-Positive-space_20)` = 20px\n- **Thumb**: `ui-w-16 ui-h-16` → `var(--ui-Positive-space_16)` = 16px\n- **Border radius**: `ui-rounded-2xl` = 16px\n- **Padding**: `ui-px-2` → `var(--ui-Positive-space_2)` = 2px\n- **Gap**: `ui-gap-8` → `var(--ui-Positive-space_8)` = 8px\n\n### Colores (usando tokens semánticos)\n\n- **Activo**: `ui-bg-fill-brand` → `var(--ui-color-bg-fill-brand-default)` = `#3658c1`\n- **Inactivo**: `ui-bg-fill-brand-disabled` → `var(--ui-color-bg-fill-brand-disabled)` = `#b8c5ee`\n- **Disabled**: `ui-bg-fill-hover` → `var(--ui-color-bg-fill-hover)` = `#f0f1f2`\n- **Border**: `ui-border-DEFAULT` → `var(--ui-color-border-default)` = `#c6c8cc`\n- **Thumb**: `ui-bg-fill` = `#ffffff`\n- **Text**: `ui-text-primary` → `var(--ui-color-text-primary)` = `#313336`\n\n### Tipografía (según Type/Body/SM/Bold de Figma)\n\n- **Weight**: `ui-font-body-sm-bold` (700)\n- **Size**: `ui-text-body-sm-bold` (14px)\n- **Line Height**: `20.5px`\n- **Tracking**: `0.5px`\n\n## Uso Básico\n\n```tsx\nimport { Toggle } from '@/modules/Toggle'\n\n// Sin label\n<Toggle ariaLabel=\"Activar función\" />\n\n// Con label\n<Toggle label=\"Notificaciones\" />\n\n// Controlado\nconst [enabled, setEnabled] = useState(false)\n<Toggle\n  checked={enabled}\n  onChange={setEnab",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Toolbar",
+      "path": "src/modules/Toolbar",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Toolbar",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Toolbar - Barra de herramientas flexible\n\nUn componente flexible que muestra botones en una barra flotante. Cada botón puede tener sus propios addons (inputs/date pickers) asociados.\n\n### Características principales:\n- **Vista de botones**: Siempre se muestra primero\n- **Addons por botón**: Cada botón puede tener sus propios addons\n- **Navegación**: Al hacer click en un botón con addons, se muestra la vista de addons\n- **Botón de volver**: Permite regresar a la vista de botones\n- **Botón de cerrar**: Oculta el toolbar completamente\n- **Contador**: Muestra",
+            "jsdoc": "Toolbar - Barra de herramientas flexible con botones y addons\nSegún diseño de Figma:\n- Fondo: bg-fill-brand (azul)\n- Border radius: radius-surface-modal (16px)\n- Padding: 16px horizontal, 8px vertical\n- Gap: 16px entre elementos\n- Texto blanco para el contador\n- Divisor vertical entre secciones\nFuncionamiento:\n1. Siempre se muestra primero la vista de botones\n2. Cada botón puede tener sus propios addons asociados\n3. Al hacer click en un botón:\n   - Se ejecuta onClick (siempre)\n   - Si tiene addons, se muestra la vista de addons de ese botón\n4. En la vista de addons se muestra (por defecto):\n   - Botón de volver (opcional con `showBackButton={false}`)\n   - Texto con contador \"(count) text\"\n   - Los addons del botón seleccionado\n   - Botón de cerrar (si `onClose` está definido y `showCloseBu",
+            "confidence": "high"
+          },
+          "examples": []
+        }
+      ]
+    },
+    {
+      "id": "Tooltip",
+      "path": "src/modules/Tooltip",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Tooltip",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Tooltip permite mostrar información contextual cuando el usuario hace hover sobre un elemento. Soporta múltiples posiciones, colores y configuraciones.",
+            "jsdoc": "TooltipComponent - Componente interno de tooltip con posicionamiento avanzado\nComponente que renderiza el tooltip con posicionamiento dinámico, flecha ajustable\ny soporte para múltiples posiciones y alineaciones.\nEl copy usa {@link Body} (equivalente a `Text` con `type=\"body\"`) para tokens de\ntipografía y color en tema claro/oscuro; no se importa `Text` aquí para evitar\ndependencia circular con el truncado que envuelve `Text`.\n@internal\n/\nconst TooltipComponent = ({\n  children,\n  label,\n  position = 'top',\n  alignment = 'center',\n  id = `tooltip-${Math.random().toString(36).substring(2, 9)}`,\n  delay = 0,\n  disabled = false,\n  className = '',\n  fullWidth = false,\n  style,\n  arrowClassName,\n  absolute = false,\n  preserveLayout = false,\n  ...props\n}: TooltipProps) => {\n  const {\n    isVisibl",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Tooltip } from '@/modules/Tooltip';\n\n  export default function Example() {\n    return (\n      <Tooltip label=\"Este es un tooltip básico\">\n        <InnerButton color=\"primary\">Hover me</InnerButton>\n      </Tooltip>\n    )\n  }",
+            "import { Tooltip } from '@/modules/Tooltip';\n\nexport default function Example() {\n  return (\n    <Tooltip label=\"Este es un tooltip básico\">\n      <InnerButton color=\"primary\">Hover me</InnerButton>\n    </Tooltip>\n  )\n}",
+            "<Tooltip label=\"Este tooltip aparece después de 500ms\" delay={500}>\n    <InnerButton color=\"secondary\">Hover me (delay 500ms)</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"No deberías ver este tooltip\" disabled={true}>\n    <InnerButton color=\"neutral\">Este tooltip está deshabilitado</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"Tooltip arriba\" position=\"top\">\n    <InnerButton color=\"primary\">Top</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip abajo\" position=\"bottom\">\n    <InnerButton color=\"secondary\">Bottom</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip izquierda\" position=\"left\">\n    <InnerButton color=\"destructive\">Left</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip derecha\" position=\"right\">\n    <InnerButton color=\"tertiary\">Right</InnerButton>\n  </Tooltip>"
+          ]
+        },
+        {
+          "name": "InlineTooltip",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Tooltip permite mostrar información contextual cuando el usuario hace hover sobre un elemento. Soporta múltiples posiciones, colores y configuraciones.",
+            "jsdoc": "Contenido del tooltip */\n  label: React.ReactNode;\n  /** Si el tooltip está visible */\n  isVisible: boolean;\n  /** Posición del tooltip */\n  position?: InlineTooltipPosition;\n  /** Clase adicional para el tooltip */\n  className?: string;\n}\n\n/**\nInlineTooltip - Tooltip CSS puro para usar dentro de elementos flex\nEste componente es útil cuando el Tooltip normal interfiere con layouts flex.\nSe posiciona absolutamente dentro del elemento padre que debe tener `position: relative`.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Tooltip } from '@/modules/Tooltip';\n\n  export default function Example() {\n    return (\n      <Tooltip label=\"Este es un tooltip básico\">\n        <InnerButton color=\"primary\">Hover me</InnerButton>\n      </Tooltip>\n    )\n  }",
+            "import { Tooltip } from '@/modules/Tooltip';\n\nexport default function Example() {\n  return (\n    <Tooltip label=\"Este es un tooltip básico\">\n      <InnerButton color=\"primary\">Hover me</InnerButton>\n    </Tooltip>\n  )\n}",
+            "<Tooltip label=\"Este tooltip aparece después de 500ms\" delay={500}>\n    <InnerButton color=\"secondary\">Hover me (delay 500ms)</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"No deberías ver este tooltip\" disabled={true}>\n    <InnerButton color=\"neutral\">Este tooltip está deshabilitado</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"Tooltip arriba\" position=\"top\">\n    <InnerButton color=\"primary\">Top</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip abajo\" position=\"bottom\">\n    <InnerButton color=\"secondary\">Bottom</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip izquierda\" position=\"left\">\n    <InnerButton color=\"destructive\">Left</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip derecha\" position=\"right\">\n    <InnerButton color=\"tertiary\">Right</InnerButton>\n  </Tooltip>"
+          ]
+        },
+        {
+          "name": "TruncatedWithTooltip",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "El componente Tooltip permite mostrar información contextual cuando el usuario hace hover sobre un elemento. Soporta múltiples posiciones, colores y configuraciones.",
+            "jsdoc": "Con `text-overflow: ellipsis`, en Chromium/WebKit suele cumplirse `scrollWidth === clientWidth`\naunque el texto esté recortado; el tooltip quedaría deshabilitado si solo usáramos esa comparación.\n/\nfunction isTextTruncatedInElement(el: HTMLElement): boolean {\n  if (el.scrollWidth > el.clientWidth) {\n    return true;\n  }\n  const text = el.textContent ?? '';\n  if (!text.trim()) {\n    return false;\n  }\n  const containerWidth = el.getBoundingClientRect().width;\n  if (containerWidth < 1) {\n    return false;\n  }\n  const style = window.getComputedStyle(el);\n  const clone = document.createElement('span');\n  clone.setAttribute('aria-hidden', 'true');\n  clone.style.position = 'absolute';\n  clone.style.visibility = 'hidden';\n  clone.style.whiteSpace = 'nowrap';\n  clone.style.top = '0';\n  clone.style.",
+            "confidence": "high"
+          },
+          "examples": [
+            "import { Tooltip } from '@/modules/Tooltip';\n\n  export default function Example() {\n    return (\n      <Tooltip label=\"Este es un tooltip básico\">\n        <InnerButton color=\"primary\">Hover me</InnerButton>\n      </Tooltip>\n    )\n  }",
+            "import { Tooltip } from '@/modules/Tooltip';\n\nexport default function Example() {\n  return (\n    <Tooltip label=\"Este es un tooltip básico\">\n      <InnerButton color=\"primary\">Hover me</InnerButton>\n    </Tooltip>\n  )\n}",
+            "<Tooltip label=\"Este tooltip aparece después de 500ms\" delay={500}>\n    <InnerButton color=\"secondary\">Hover me (delay 500ms)</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"No deberías ver este tooltip\" disabled={true}>\n    <InnerButton color=\"neutral\">Este tooltip está deshabilitado</InnerButton>\n  </Tooltip>",
+            "<Tooltip label=\"Tooltip arriba\" position=\"top\">\n    <InnerButton color=\"primary\">Top</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip abajo\" position=\"bottom\">\n    <InnerButton color=\"secondary\">Bottom</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip izquierda\" position=\"left\">\n    <InnerButton color=\"destructive\">Left</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip derecha\" position=\"right\">\n    <InnerButton color=\"tertiary\">Right</InnerButton>\n  </Tooltip>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Visual",
+      "path": "src/modules/Visual",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Visual",
+          "kind": "component",
+          "description": {
+            "primary": "jsdoc",
+            "jsdoc": "Visual - Componente visual versátil (icono, imagen o avatar)\nComponente que renderiza diferentes tipos de contenido visual según el slot proporcionado:\niconos, imágenes (URL o base64), avatares o contenido personalizado.\nSoporta tooltips, estados de hover y fallbacks.",
+            "confidence": "medium"
+          },
+          "examples": [
+            "import { Visual } from '@/modules/Visual';\n\n  export default function Example() {\n    return <Visual tooltip=\"Editor\" slot=\"https://pc.net/img/terms/avatar.svg\" size='6xl' defaultSizeIcon={false} />\n  }",
+            "import { Visual } from '@/modules/Visual';\nimport { faFolder, faCalendar, faEnvelope } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function DuotoneExample() {\n  return (\n    <>\n      <Visual\n        slot={faFolder}\n        size=\"xl\"\n        colorIconDuotonePrimary=\"brand\"\n        colorIconDuotoneSecondary=\"azure\"\n        opacityIconDuotonePrimary={1}\n        opacityIconDuotoneSecondary={0.4}\n      />\n      <Visual\n        slot={faCalendar}\n        size=\"xl\"\n        colorIconDuotonePrimary=\"success\"\n        colorIconDuotoneSecondary=\"green\"\n        opacityIconDuotonePrimary={1}\n        opacityIconDuotoneSecondary={0.4}\n      />\n    </>\n  );\n}",
+            "import { Visual } from '@/modules/Visual';\n\n  export default function Example() {\n    return <Visual tooltip=\"Editor\" slot=\"https://pc.net/img/terms/avatar.svg\" size='6xl' defaultSizeIcon={false} />\n  }",
+            "import { Visual } from '@/modules/Visual';\nimport { faFolder, faCalendar, faEnvelope } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function DuotoneExample() {\n  return (\n    <>\n      <Visual\n        slot={faFolder}\n        size=\"xl\"\n        colorIconDuotonePrimary=\"brand\"\n        colorIconDuotoneSecondary=\"azure\"\n        opacityIconDuotonePrimary={1}\n        opacityIconDuotoneSecondary={0.4}\n      />\n      <Visual\n        slot={faCalendar}\n        size=\"xl\"\n        colorIconDuotonePrimary=\"success\"\n        colorIconDuotoneSecondary=\"green\"\n        opacityIconDuotonePrimary={1}\n        opacityIconDuotoneSecondary={0.4}\n      />\n    </>\n  );\n}"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Wysiwyg",
+      "path": "src/modules/Wysiwyg",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "Wysiwyg",
+          "kind": "component",
+          "description": {
+            "primary": "readme",
+            "readme": "# Wysiwyg\n\nEditor de texto enriquecido (What You See Is What You Get) con soporte para formato de texto, listas, enlaces, emojis y adjuntos.\n\n## Características\n\n- ✏️ **Formato de texto**: Negrita, cursiva, subrayado, tachado\n- 📝 **Listas**: Ordenadas y sin orden\n- 🔗 **Enlaces**: Inserción de enlaces\n- 😊 **Emojis**: Integración completa con EmojiPicker\n- 📎 **Adjuntos**: Carga de archivos\n- 👤 **Menciones**: Sistema de menciones con @\n- 📏 **Altura personalizable**: Control de min/max height\n- 🎯 **Auto focus**: Opción de enfoque automático\n- ♿ **Accesible**: Totalmente accesible con teclado\n\n## Uso Básico\n\n```tsx\nimport { Wysiwyg } from '@/modules/Wysiwyg';\n\nfunction MiComponente() {\n  const [content, setContent] = useState('');\n\n  return (\n    <Wysiwyg\n      onChange={(html) => setContent(html)}\n      onSubmit={() => console.log('Enviando:', content)}\n    />\n  );\n}\n```\n\n## Props\n\n### WysiwygProps\n\n| Prop               | Tipo                        | Default                      | Descripción                           |\n| ------------------ | --------------------------- | ---------------------------- | ------------------------------------- |\n| `value`            | `string`                    | `undefined`                  | Valor controlado del contenido HTML   |\n| `defaultValue`     | `string`                    | `''`                         | Valor por defecto del contenido HTML  |\n| `onChange`         | `(html: string) => void`    | `undefined`                  | Callback cuando el contenido cambia   |\n| `placeholder`      | `string`                    | `'Escribe un mensaje nuevo'` | Placeholder del editor                |\n| `disabled`         | `boolean`                   | `false`                      | Deshabilitar el editor                |\n| `showToolbar`      | `boolean`                   | `true`                       | Mostrar toolbar de formato            |\n| `allowAttachments` | `boolean`                   | `true`                       | Permitir",
+            "confidence": "low"
+          },
+          "examples": [
+            "const [content, setContent] = useState('')\n\n<Wysiwyg\n  onChange={(html) => setContent(html)}\n  onSubmit={() => console.log('Enviando:', content)}\n/>",
+            "<Wysiwyg\n  defaultValue=\"<p>Este es un <strong>mensaje inicial</strong> con <em>formato</em>.</p>\"\n  onSubmit={() => alert('Mensaje enviado!')}\n/>",
+            "<Wysiwyg\n  defaultValue=\"<p>Contenido no editable</p>\"\n  disabled={true}\n/>",
+            "<Wysiwyg\n  showToolbar={false}\n  placeholder=\"Escribe un mensaje simple...\"\n  onSubmit={() => alert('Enviado!')}\n/>",
+            "// Editor pequeño\n<Wysiwyg\n  minHeight={40}\n  maxHeight={150}\n/>\n\n// Editor grande\n<Wysiwyg\n  minHeight={150}\n  maxHeight={500}\n/>"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "imj-calendar-timeline",
+      "path": "src/modules/imj-calendar-timeline",
+      "legacy": false,
+      "compositionType": 1,
+      "exports": [
+        {
+          "name": "TimelineMarkers",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "TodayMarker",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "jsdoc": "Marker that is placed based on current date.  This component updates itself on\na set interval, dictated by the 'interval' prop.",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "CustomMarker",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "jsdoc": "CustomMarker that is placed based on passed in date prop",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "CursorMarker",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "jsdoc": "CursorMarker implementation subscribes to 'subscribeToCanvasMouseOver' on mount.\nThis subscription is passed in via MarkerCanvasConsumer, which is wired up to\nMarkerCanvasProvider in the MarkerCanvas component. When the user mouses over MarkerCanvas,\nthe callback registered in CursorMarker (this component) is passed:\n leftOffset - pixels from left edge of canvas, used to position this element\n date - the date the cursor pertains to\n isCursorOverCanvas - whether the user cursor is over the canvas. This is set to 'false'\n when the user mouseleaves the element",
+            "confidence": "high"
+          },
+          "examples": []
+        },
+        {
+          "name": "TimelineHeaders",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "SidebarHeader",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "CustomHeader",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "DateHeader",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "GroupRow",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "RowItems",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "Timeline",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        },
+        {
+          "name": "ReactCalendarTimeline",
+          "kind": "component",
+          "description": {
+            "primary": "storybook",
+            "storybook": "## Timeline (Calendar Timeline)\n\nLínea de tiempo tipo calendario con grupos, ítems arrastrables y redimensionables, marcadores y cabeceras personalizables.\n\n### Props principales\n- **groups** / **items**: datos de filas e ítems (cada ítem tiene \\",
+            "confidence": "medium"
+          },
+          "examples": []
+        }
+      ]
+    }
+  ],
+  "styleIndex": {
+    "rules": [
+      "ui-prefix",
+      "typography-pairs",
+      "cn-helper",
+      "no-ui-typography-star",
+      "orbit-tokens-ssot"
+    ],
+    "tailwindClasses": [
+      {
+        "class": "ui-bg-fill-brand",
+        "cssVar": "--ui-color-bg-fill-brand-default",
+        "category": "color"
+      },
+      {
+        "class": "ui-text-primary",
+        "cssVar": "--ui-color-text-primary-default",
+        "category": "color"
+      },
+      {
+        "class": "ui-p-16",
+        "cssVar": "--ui-spacing-16",
+        "category": "spacing"
+      },
+      {
+        "class": "ui-rounded-md",
+        "cssVar": "--ui-radius-md",
+        "category": "radius"
+      }
+    ]
+  },
+  "changelogRetirements": [],
+  "consumerChecklist": [
+    {
+      "id": "tailwind-prefix",
+      "title": "Prefijo ui- en Tailwind",
+      "body": "Usa clases con prefijo ui- (p. ej. ui-bg-fill-brand, ui-p-16). No utilidades sin prefijo del DS."
+    },
+    {
+      "id": "typography-pairs",
+      "title": "Pares tipografía",
+      "body": "Combina ui-text-body-*-regular con ui-font-body-*-regular. No uses ui-typography-*."
+    },
+    {
+      "id": "cn-helper",
+      "title": "Composición de clases",
+      "body": "Usa cn() desde el paquete para variantes; evita concatenación ad hoc."
+    },
+    {
+      "id": "orbit-tokens",
+      "title": "Tokens Orbit",
+      "body": "No declares --ui-* ni theme.extend duplicado; consume @imj_media/orbit-tokens."
+    },
+    {
+      "id": "grouped-props",
+      "title": "Props agrupadas",
+      "body": "En organismos extensos, agrupa por dominio (dropZone, constraints, list, events) y migra raíz deprecada gradualmente."
+    },
+    {
+      "id": "composition-type-2",
+      "title": "Composición (Modal, Accordion)",
+      "body": "Módulos Tipo 2 se usan por piezas; consulta get_composition_recipe antes de aplanar la API."
+    },
+    {
+      "id": "legacy-modules",
+      "title": "Módulos legacy",
+      "body": "LegacyButton, LegacyIcon y Message siguen exportados con legacy:true; evita en código nuevo."
+    },
+    {
+      "id": "jsdoc-imports",
+      "title": "Imports del paquete",
+      "body": "Importa desde @imj_media/ui; usa import type para tipos. Revisa deprecations en get_deprecations."
+    }
+  ]
+}