mobile-design 0.0.0-stage → 0.1.0

package/src/catalog.ts

@@ -0,0 +1,683 @@
+export type MobileDesignCategory = 'actions' | 'communication' | 'containment' | 'navigation' | 'selection' | 'input';
+export type MobileDesignImplementation = 'paper' | 'paper-composition' | 'mobile-design';
+/** Groups in the Components navigation drawer on m3.material.io. */
+export const mobileDesignCatalogGroups = [
+    { id: 'buttons', title: 'Buttons' },
+    { id: 'date-time-pickers', title: 'Date & time pickers' },
+    { id: 'loading-progress', title: 'Loading & progress' },
+    { id: 'navigation', title: 'Navigation' },
+    { id: 'sheets', title: 'Sheets' },
+    { id: 'extensions', title: 'Extensiones de Mobile Design' },
+] as const;
+export type MobileDesignCatalogGroupId = (typeof mobileDesignCatalogGroups)[number]['id'];
+export type MobileDesignCatalogEntry = {
+    id: string;
+    title: string;
+    searchAliases: readonly string[];
+    group: MobileDesignCatalogGroupId | null;
+    category: MobileDesignCategory;
+    /** Implemented variants, rather than a promise of device-verified visual equivalence. */
+    variants: readonly string[];
+    /** Options, states and compositions are separate from the documented variants. */
+    configurations?: readonly string[];
+    implementation: MobileDesignImplementation;
+    exports: readonly string[];
+    reference?: string;
+    notes: readonly string[];
+};
+
+/** Material 3 families in navigation order, followed by Mobile Design extensions. */
+export const mobileDesignCatalog = [
+    {
+        id: 'app-bars',
+        title: 'App bars',
+        searchAliases: ['Barras de aplicación'],
+        group: null,
+        category: 'navigation',
+        variants: ['Search app bar', 'Small', 'Medium flexible', 'Large flexible'],
+        configurations: ['centered text', 'subtitle', 'image', 'filled action', 'scroll behavior'],
+        implementation: 'mobile-design',
+        exports: ['TopAppBar', 'useAppBarScrollBehavior'],
+        reference: 'https://m3.material.io/components/app-bars/overview',
+        notes: [
+            'Cuatro variantes actuales; texto centrado, subtítulos, imágenes y acciones son configuraciones. TopAppBar mide su contenido y comparte el controlador de scroll con la pantalla.',
+        ],
+    },
+    {
+        id: 'badges',
+        title: 'Badges',
+        searchAliases: ['Insignias'],
+        group: null,
+        category: 'communication',
+        variants: ['Small', 'Large'],
+        implementation: 'mobile-design',
+        exports: ['Badge', 'BadgedBox'],
+        reference: 'https://m3.material.io/components/badges/overview',
+        notes: [
+            'Small6dp sin texto; Large mínimo16dp con LabelSmall y hasta4 caracteres. BadgedBox conserva el ancla superior al extremo lógico del icono; el destino anuncia su significado.',
+        ],
+    },
+    {
+        id: 'button-groups',
+        title: 'Button groups',
+        searchAliases: ['Grupos de botones'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['standard', 'connected'],
+        configurations: ['5 sizes', 'round', 'square', 'icons', 'labels', 'single selection', 'multiple selection'],
+        implementation: 'mobile-design',
+        exports: ['ButtonGroup'],
+        reference: 'https://m3.material.io/components/button-groups/overview',
+        notes: [
+            'Dos variantes; cinco tamaños y formas round/square son configuraciones. Standard amplía el botón pulsado y comprime sólo los vecinos inmediatos dentro de su padding disponible.',
+            'Connected cambia la forma de cada botón sin desplazar a sus vecinos. Permite acciones o selección única/múltiple; las etiquetas se miden antes de resolver overflow.',
+        ],
+    },
+    {
+        id: 'buttons',
+        title: 'Buttons',
+        searchAliases: ['Botones', 'filled', 'tonal', 'elevated', 'outlined', 'text', 'round', 'square', '5 sizes'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['Default', 'Toggle'],
+        configurations: ['filled', 'tonal', 'elevated', 'outlined', 'text', '5 sizes', 'round', 'square'],
+        implementation: 'mobile-design',
+        exports: ['Button'],
+        reference: 'https://m3.material.io/components/buttons/overview',
+        notes: [
+            'Dos variantes: Default y Toggle. Elevated, Filled, Tonal, Outlined y Text son configuraciones; Text no admite Toggle.',
+            'El Button de Paper instalado conserva medidas de la generación anterior; el paquete exporta su extensión.',
+        ],
+    },
+    {
+        id: 'extended-fab',
+        title: 'Extended FABs',
+        searchAliases: ['FAB extendido'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['small', 'medium', 'large'],
+        configurations: ['6 color roles', 'expanded', 'collapsed'],
+        implementation: 'mobile-design',
+        exports: ['FAB.Extended'],
+        reference: 'https://m3.material.io/components/extended-fab/overview',
+        notes: [
+            'Tres tamaños y seis pares semánticos. Colapso por anchura y opacidad sin escalar glifos; movimiento FastSpatial/FastEffects y preferencia de movimiento compartida.',
+        ],
+    },
+    {
+        id: 'fab-menu',
+        title: 'FAB menu',
+        searchAliases: ['Menú FAB'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['FAB menu'],
+        configurations: [
+            'trailing',
+            '2–6 actions',
+            '3 trigger sizes',
+            '3 menu color roles',
+            'expanded',
+            'collapsed',
+            'scrollable extension',
+        ],
+        implementation: 'mobile-design',
+        exports: ['FAB.Menu'],
+        reference: 'https://m3.material.io/components/fab-menu/overview',
+        notes: [
+            'Apilado local, anclaje al borde superior trailing, cierre accesible, scroll acotado y rama web baseline.',
+            'Alineación trailing lógica en LTR/RTL, conforme a Guidelines; sin posiciones alternativas heredadas.',
+        ],
+    },
+    {
+        id: 'floating-action-button',
+        title: 'FABs',
+        searchAliases: ['Botón de acción flotante'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['FAB', 'medium FAB', 'large FAB'],
+        configurations: ['primary', 'secondary', 'tertiary', 'tonalPrimary', 'tonalSecondary', 'tonalTertiary', 'show/hide'],
+        implementation: 'mobile-design',
+        exports: ['FAB'],
+        reference: 'https://m3.material.io/components/floating-action-button/overview',
+        notes: ['56/80/96dp y radios16/20/28dp; presencia desde escala0.2 y colores semánticos actuales.'],
+    },
+    {
+        id: 'icon-buttons',
+        title: 'Icon buttons',
+        searchAliases: ['Botones de icono'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['default', 'toggle'],
+        configurations: ['standard', 'filled', 'tonal', 'outlined', '5 sizes', '3 widths', 'round', 'square'],
+        implementation: 'mobile-design',
+        exports: ['IconButton'],
+        reference: 'https://m3.material.io/components/icon-buttons/overview',
+        notes: ['Escala expresiva separada de size numérico del glifo; exige accessibilityLabel para acciones sin texto.'],
+    },
+    {
+        id: 'segmented-buttons',
+        title: 'Segmented buttons',
+        searchAliases: ['Botones segmentados'],
+        group: 'buttons',
+        category: 'selection',
+        variants: ['single-select', 'multi-select'],
+        configurations: ['icons', 'labels', 'selected check', 'density', 'disabled'],
+        implementation: 'mobile-design',
+        exports: ['SegmentedButtons'],
+        reference: 'https://m3.material.io/components/segmented-buttons/overview',
+        notes: [
+            'La documentación mantiene esta familia, pero M3 Expressive recomienda Button groups connected. Motor local actualizado, selección única/múltiple y target48dp.',
+        ],
+    },
+    {
+        id: 'split-button',
+        title: 'Split button',
+        searchAliases: ['Botón dividido'],
+        group: 'buttons',
+        category: 'actions',
+        variants: ['split button'],
+        configurations: ['filled', 'tonal', 'outlined', 'elevated', '5 sizes', 'expanded'],
+        implementation: 'mobile-design',
+        exports: ['SplitButton'],
+        reference: 'https://m3.material.io/components/split-button/overview',
+        notes: ['Acción primaria independiente y menú local acotado; las esquinas internas y el chevrón responden a presión/expansión.'],
+    },
+    {
+        id: 'cards',
+        title: 'Cards',
+        searchAliases: ['Tarjetas'],
+        group: null,
+        category: 'containment',
+        variants: ['elevated', 'filled', 'outlined'],
+        configurations: ['cover', 'content', 'actions', 'selection', 'media', 'collections', 'swipe', 'reorder'],
+        implementation: 'paper-composition',
+        exports: ['Card'],
+        reference: 'https://m3.material.io/components/cards/overview',
+        notes: [
+            'Tres variantes de contenedor local con colores, bordes y elevaciones de estado actuales; conserva Title/Content/Cover/Actions de Paper.',
+            'Selección, media, colecciones y gestos son composiciones de ejemplos. El viewport de gestos posee su FlatList y no añade controles de laboratorio a la tarjeta.',
+        ],
+    },
+    {
+        id: 'carousel',
+        title: 'Carousel',
+        searchAliases: ['Carrusel'],
+        group: null,
+        category: 'containment',
+        variants: ['multi-browse', 'hero', 'center-aligned-hero', 'uncontained', 'uncontained-multi-aspect', 'full-screen', 'vertical'],
+        configurations: [
+            'uncontained multi-aspect ratio',
+            'centered',
+            'center-aligned hero',
+            'text placement',
+            'snap scrolling',
+            'default scrolling',
+            'vertical gallery',
+            'variable item aspect ratio',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Carousel'],
+        reference: 'https://m3.material.io/components/carousel/overview',
+        notes: [
+            'Keylines y máscaras adaptados de MDC Android; indíces y navegación interrumpible en UI thread.',
+            'Full-screen requiere portrait compacto/medio; gesto/snap y FPS requieren revisión nativa.',
+            'Vertical es una extensión propia de Mobile Design: galería con varias fotos, proporciones individuales y scroll libre; no es una variante oficial de MD3 ni el feed Full-screen.',
+        ],
+    },
+    {
+        id: 'checkbox',
+        title: 'Checkbox',
+        searchAliases: ['Casillas'],
+        group: null,
+        category: 'selection',
+        variants: [],
+        configurations: ['unchecked', 'checked', 'indeterminate', 'disabled', 'error', 'label'],
+        implementation: 'mobile-design',
+        exports: ['Checkbox'],
+        reference: 'https://m3.material.io/components/checkbox/overview',
+        notes: ['Animación SVG, checked/indeterminate/error y foco propios con objetivo48dp. Forma MD3 consistente en ambas plataformas.'],
+    },
+    {
+        id: 'chips',
+        title: 'Chips',
+        searchAliases: ['Chips'],
+        group: null,
+        category: 'selection',
+        variants: ['assist', 'filter', 'input', 'suggestion'],
+        configurations: ['elevated', 'outlined', 'selected', 'disabled', 'avatar', 'remove action'],
+        implementation: 'mobile-design',
+        exports: ['Chip'],
+        reference: 'https://m3.material.io/components/chips/overview',
+        notes: [
+            'Assist/filter/input/suggestion con roles distintos, selección, iconos/avatar y cierre independiente; visual32dp y targets48dp.',
+        ],
+    },
+    {
+        id: 'date-pickers',
+        title: 'Date pickers',
+        searchAliases: ['Selectores de fecha'],
+        group: 'date-time-pickers',
+        category: 'input',
+        variants: ['docked', 'modal date picker', 'modal date input'],
+        configurations: ['single date', 'date range', 'month selection', 'year selection', 'full-screen', 'locale', 'limits'],
+        implementation: 'mobile-design',
+        exports: ['DatePicker', 'DockedDatePicker'],
+        reference: 'https://m3.material.io/components/date-pickers/overview',
+        notes: [
+            'DatePicker maneja selección simple o rango; validación, límites, localización y teclado están en la API.',
+            'La fidelidad de animación y gestos nativos se documenta por separado de la cobertura.',
+        ],
+    },
+    {
+        id: 'time-pickers',
+        title: 'Time pickers',
+        searchAliases: ['Selectores de hora'],
+        group: 'date-time-pickers',
+        category: 'input',
+        variants: ['dial', 'input'],
+        configurations: ['12-hour', '24-hour', 'hour/minute selection', 'period selection', 'landscape'],
+        implementation: 'mobile-design',
+        exports: ['TimePicker'],
+        reference: 'https://m3.material.io/components/time-pickers/overview',
+        notes: ['Reloj/entrada controlados en modal; el paquete no instala un picker del sistema distinto de MD3.'],
+    },
+    {
+        id: 'dialogs',
+        title: 'Dialogs',
+        searchAliases: ['Diálogos'],
+        group: null,
+        category: 'containment',
+        variants: ['basic', 'full-screen'],
+        configurations: ['icon', 'title', 'supporting text', 'scrollable', 'actions', 'adaptive layout'],
+        implementation: 'paper-composition',
+        exports: ['Dialog', 'FullScreenDialog', 'Portal'],
+        reference: 'https://m3.material.io/components/dialogs/overview',
+        notes: [
+            'Contenedor NativeModal y piezas propias con inset24, acciones adaptativas/RTL y alternativa full-screen que adapta a modal560dp.',
+            'El Modal genérico de Paper sigue disponible como primitiva y no es accesible por defecto.',
+        ],
+    },
+    {
+        id: 'divider',
+        title: 'Divider',
+        searchAliases: ['Separadores'],
+        group: null,
+        category: 'containment',
+        variants: [],
+        configurations: ['full width', 'start inset', 'middle inset', 'vertical', '1dp'],
+        implementation: 'mobile-design',
+        exports: ['Divider'],
+        reference: 'https://m3.material.io/components/divider/overview',
+        notes: ['Separador OutlineVariant de1dp por defecto; horizontal/vertical y full/insets16dp.'],
+    },
+    {
+        id: 'lists',
+        title: 'Lists',
+        searchAliases: ['Listas'],
+        group: null,
+        category: 'containment',
+        variants: ['standard', 'segmented'],
+        configurations: [
+            'single selection',
+            'multi selection',
+            'multi-action',
+            'single-action',
+            'non-interactive',
+            'one line',
+            'two line',
+            'three line',
+            'expand',
+            'reorder',
+            'swipe direct',
+            'swipe indirect',
+        ],
+        implementation: 'mobile-design',
+        exports: ['List', 'ListReorderGroup', 'SwipeListItem', 'SwipeListGroup'],
+        reference: 'https://m3.material.io/components/lists/overview',
+        notes: [
+            'Listas expresivas estándar/segmentadas, selección única/múltiple y acciones independientes; baseline explícito56/72/88dp. No virtualiza: combinar con FlatList.',
+        ],
+    },
+    {
+        id: 'loading-indicator',
+        title: 'Loading indicator',
+        searchAliases: ['Indicador de carga'],
+        group: 'loading-progress',
+        category: 'communication',
+        variants: ['loading indicator'],
+        configurations: [
+            'default',
+            'contained',
+            'scaled',
+            'gesture progress',
+            'paused',
+            'button',
+            'tab icon',
+            'append',
+            'pull-to-refresh overlay',
+            'pull-to-refresh adjacent',
+            'separate success/error composition',
+        ],
+        implementation: 'mobile-design',
+        exports: ['LoadingIndicator', 'PullToRefresh'],
+        reference: 'https://m3.material.io/components/loading-indicator/overview',
+        notes: [
+            'Morph real de siete contornos SVG MaterialShapes, intervalo650ms y giro4666ms.',
+            'La correspondencia de puntos SVG adapta AndroidX Morph; no implica equivalencia píxel a píxel con su motor de polígonos.',
+        ],
+    },
+    {
+        id: 'progress-indicators',
+        title: 'Progress indicators',
+        searchAliases: ['Indicadores de progreso'],
+        group: 'loading-progress',
+        category: 'communication',
+        variants: ['linear', 'circular'],
+        configurations: ['flat', 'wavy', 'determinate', 'indeterminate', 'variable thickness', 'success composition', 'paused'],
+        implementation: 'mobile-design',
+        exports: ['ProgressIndicator', 'CircularProgressStatus'],
+        reference: 'https://m3.material.io/components/progress-indicators/overview',
+        notes: [
+            'Geometría y fases expresivas independientes del ActivityIndicator/ProgressBar básico de Paper.',
+            'CircularProgressStatus reproduce la composición progreso→anillo→check del vídeo Overview. El check mantiene posición/color; sus tiempos observados no son tokens normativos.',
+        ],
+    },
+    {
+        id: 'menus',
+        title: 'Menus',
+        searchAliases: ['Menús'],
+        group: null,
+        category: 'containment',
+        variants: ['vertical menu'],
+        configurations: [
+            'standard',
+            'vibrant',
+            'grouped',
+            'single selection',
+            'multi selection',
+            'anchored',
+            'context',
+            'scrollable',
+            'submenus',
+            'filtering',
+            'slots',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Menu'],
+        reference: 'https://m3.material.io/components/menus/overview',
+        notes: [
+            'Estándar/vibrante/baseline, grupos, selección y popup local FastSpatial/FastEffects con límites de ventana/teclado. La auditoría distingue soporte nativo y web.',
+        ],
+    },
+    {
+        id: 'navigation-bar',
+        title: 'Navigation bar',
+        searchAliases: ['Barra de navegación'],
+        group: 'navigation',
+        category: 'navigation',
+        variants: ['flexible navigation bar'],
+        configurations: ['64dp', 'top icons', 'start icons', 'equal', 'centered', 'labels', 'badges'],
+        implementation: 'mobile-design',
+        exports: ['NavigationBar'],
+        reference: 'https://m3.material.io/components/navigation-bar/overview',
+        notes: [
+            'Flexible64dp, iconos arriba/al inicio y distribución igual/centrada. La altura80dp sigue como referencia anterior en Specs, no como recomendación actual. El host aplica rutas y selección.',
+        ],
+    },
+    {
+        id: 'navigation-drawer',
+        title: 'Navigation drawer',
+        searchAliases: ['Cajón de navegación'],
+        group: 'navigation',
+        category: 'navigation',
+        variants: ['standard', 'modal'],
+        configurations: ['sections', 'selected destination', 'header', 'footer'],
+        implementation: 'mobile-design',
+        exports: ['NavigationDrawer', 'NavigationDrawerModal'],
+        reference: 'https://m3.material.io/components/navigation-drawer/overview',
+        notes: ['Drawer estándar y modal con selección, header/footer y estado controlado. Conserva Drawer de Paper como API adicional.'],
+    },
+    {
+        id: 'navigation-rail',
+        title: 'Navigation rail',
+        searchAliases: ['Rail de navegación'],
+        group: 'navigation',
+        category: 'navigation',
+        variants: ['collapsed', 'expanded'],
+        configurations: ['modal', 'non-modal', 'header', 'FAB', 'badges', 'adaptive layout'],
+        implementation: 'mobile-design',
+        exports: ['NavigationRail', 'NavigationRailModal'],
+        reference: 'https://m3.material.io/components/navigation-rail/overview',
+        notes: ['Colapsada, expandida y modal; colores, intervalos y destinos actuales. El host decide breakpoint y ruta.'],
+    },
+    {
+        id: 'radio-button',
+        title: 'Radio button',
+        searchAliases: ['Botones de opción'],
+        group: null,
+        category: 'selection',
+        variants: [],
+        configurations: ['selected', 'unselected', 'disabled', 'group', 'label'],
+        implementation: 'mobile-design',
+        exports: ['RadioButton'],
+        reference: 'https://m3.material.io/components/radio-button/overview',
+        notes: ['Círculo y animación MD3 locales, Group/Item, foco y objetivo48dp en iOS y Android.'],
+    },
+    {
+        id: 'search',
+        title: 'Search',
+        searchAliases: ['Búsqueda'],
+        group: null,
+        category: 'navigation',
+        variants: ['Search'],
+        configurations: ['contained', 'divided', 'docked', 'full-screen', 'results', 'empty', 'loading', 'keyboard'],
+        implementation: 'mobile-design',
+        exports: ['Searchbar', 'SearchView', 'SearchTrigger', 'SearchIconButton'],
+        reference: 'https://m3.material.io/components/search/overview',
+        notes: [
+            'Barra MD3 con controles compartidos, estilo contained o divided y adaptación docked/full-screen. El consumidor obtiene los datos.',
+        ],
+    },
+    {
+        id: 'bottom-sheets',
+        title: 'Bottom sheets',
+        searchAliases: ['Hojas inferiores'],
+        group: 'sheets',
+        category: 'containment',
+        variants: ['standard', 'modal'],
+        configurations: ['snap points', 'content sizing', 'minimized standard', 'full-height', 'drag handle', 'scrollable', 'keyboard'],
+        implementation: 'mobile-design',
+        exports: [
+            'BottomSheet',
+            'BottomSheetScrollView',
+            'BottomSheetFlatList',
+            'BottomSheetSectionList',
+            'BottomSheetTextInput',
+            'BottomSheetTextField',
+        ],
+        reference: 'https://m3.material.io/components/bottom-sheets/overview',
+        notes: ['Usa el motor de gestos instalado de Gorhom con superficies y contexto Paper; necesita GestureHandlerRootView.'],
+    },
+    {
+        id: 'side-sheets',
+        title: 'Side sheets',
+        searchAliases: ['Hojas laterales'],
+        group: 'sheets',
+        category: 'containment',
+        variants: ['standard', 'modal'],
+        configurations: ['start', 'end', 'attached', 'detached', 'draggable', 'header', 'footer', 'independent scroll', 'adaptive layout'],
+        implementation: 'mobile-design',
+        exports: ['SideSheet'],
+        reference: 'https://m3.material.io/components/side-sheets/overview',
+        notes: ['La hoja estándar participa en el layout; modal gestiona scrim, cierre y accesibilidad en NativeModal.'],
+    },
+    {
+        id: 'sliders',
+        title: 'Sliders',
+        searchAliases: ['Deslizadores'],
+        group: null,
+        category: 'selection',
+        variants: ['standard', 'centered', 'range'],
+        configurations: ['vertical', 'horizontal', '5 sizes', 'inset icons', 'stops', 'value labels', 'reversed', 'disabled'],
+        implementation: 'mobile-design',
+        exports: ['Slider', 'RangeSlider'],
+        reference: 'https://m3.material.io/components/sliders/overview',
+        notes: [
+            'Gestos/UI thread, límites y acciones de incremento/decremento accesibles; la precisión del gesto necesita prueba nativa.',
+            'Continuous/discrete describen la configuración de step y stops del API, no nuevas familias de slider.',
+        ],
+    },
+    {
+        id: 'snackbar',
+        title: 'Snackbar',
+        searchAliases: ['Snackbar'],
+        group: null,
+        category: 'communication',
+        variants: [],
+        configurations: [
+            'single line',
+            'single line with action',
+            'two lines',
+            'two lines with action',
+            'action on new line',
+            'optional dismiss',
+            'accessible duration',
+            'placement',
+            'consecutive messages',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Snackbar'],
+        reference: 'https://m3.material.io/components/snackbar/overview',
+        notes: [
+            'Contenedor y ciclo de vida propios, FastSpatial/FastEffects, anuncios corteses, acciones persistentes y plazo accesible; bottomOffset evita solapamiento con navegación/FAB.',
+        ],
+    },
+    {
+        id: 'switch',
+        title: 'Switch',
+        searchAliases: ['Interruptores'],
+        group: null,
+        category: 'selection',
+        variants: [],
+        configurations: [
+            'without icons',
+            'selected icon',
+            'both icons',
+            'on / off',
+            'hover / focus / press',
+            'disabled',
+            'drag',
+            'immediate settings',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Switch'],
+        reference: 'https://m3.material.io/components/switch/overview',
+        notes: [
+            'Track 52×32 dp, handle 16/24/28 dp, tinta de 40 dp y objetivo de 52×48 dp. Gesto horizontal, colores FastEffects, posición FastSpatial y foco de teclado; los ajustes se aplican inmediatamente.',
+        ],
+    },
+    {
+        id: 'tabs',
+        title: 'Tabs',
+        searchAliases: ['Pestañas'],
+        group: null,
+        category: 'navigation',
+        variants: ['primary', 'secondary'],
+        configurations: ['fixed', 'scrollable', 'labels', 'icons', 'icons and labels', 'badges', 'swipe pager'],
+        implementation: 'mobile-design',
+        exports: ['Tabs', 'TabsPager'],
+        reference: 'https://m3.material.io/components/tabs/overview',
+        notes: [
+            'Primary y secondary compartidos; selección controlada, indicador medido y posición fraccional opcional enlazada al pager en el hilo UI.',
+            'Configuraciones fixed/scrollable, etiquetas, iconos, icono + etiqueta y badges; no son variantes adicionales.',
+        ],
+    },
+    {
+        id: 'text-fields',
+        title: 'Text fields',
+        searchAliases: ['Campos de texto'],
+        group: null,
+        category: 'input',
+        variants: ['filled', 'outlined'],
+        configurations: ['leading', 'trailing', 'supporting text', 'error', 'counter', 'read-only', 'multiline', 'bottom sheet input'],
+        implementation: 'mobile-design',
+        exports: ['TextField', 'BottomSheetTextField'],
+        reference: 'https://m3.material.io/components/text-fields/overview',
+        notes: [
+            'TextField propio con entrada nativa, tipografía/iconos/tema Paper y etiqueta flotante16→12sp; expone handle de foco y adaptador BottomSheetTextField.',
+        ],
+    },
+    {
+        id: 'toolbars',
+        title: 'Toolbars',
+        searchAliases: ['Barras de herramientas'],
+        group: null,
+        category: 'navigation',
+        variants: ['docked', 'floating'],
+        configurations: ['horizontal', 'vertical', 'standard', 'vibrant', 'overflow', 'expand/collapse'],
+        implementation: 'mobile-design',
+        exports: ['Toolbar'],
+        reference: 'https://m3.material.io/components/toolbars/overview',
+        notes: ['Acciones con objetivos48dp y superficies Paper; posición de la barra flotante se controla desde el host.'],
+    },
+    {
+        id: 'tooltips',
+        title: 'Tooltips',
+        searchAliases: ['Ayudas contextuales'],
+        group: null,
+        category: 'communication',
+        variants: ['plain', 'rich'],
+        configurations: ['title', 'body', 'actions', 'controlled visibility', 'hover', 'long press', 'focus'],
+        implementation: 'mobile-design',
+        exports: ['Tooltip', 'RichTooltip'],
+        reference: 'https://m3.material.io/components/tooltips/overview',
+        notes: [
+            'Plain24×40dp mínimo e inverso; rich320dp y roles SurfaceContainer/OnSurfaceVariant. Temporizadores, long press/hover, exclusión mutua y popup adaptativo propios.',
+        ],
+    },
+    {
+        id: 'select',
+        title: 'Select',
+        searchAliases: ['Selector', 'Lista desplegable'],
+        group: 'extensions',
+        category: 'input',
+        variants: ['outlined', 'filled'],
+        configurations: [
+            'Selección única',
+            'Opción deshabilitada',
+            'Campo deshabilitado',
+            'Lista desplazable',
+            'Sin opciones',
+            'Configuración de reproducción',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Select'],
+        notes: ['Extensión basada en TextField y una lista de opciones anclada. El consumidor controla el valor seleccionado.'],
+    },
+    {
+        id: 'autocomplete',
+        title: 'Autocomplete',
+        searchAliases: ['Autocompletar', 'Sugerencias'],
+        group: 'extensions',
+        category: 'input',
+        variants: ['outlined', 'filled'],
+        configurations: [
+            'Sugerencias ancladas',
+            'Sugerencias en línea',
+            'Filtro local',
+            'Resultados del consumidor',
+            'Apertura al escribir',
+            'Campo deshabilitado',
+            'Sin resultados',
+            'Ciudad del evento',
+        ],
+        implementation: 'mobile-design',
+        exports: ['Autocomplete'],
+        notes: ['Extensión basada en TextField. Permite escribir y elegir sugerencias con iconos y descripciones.'],
+    },
+] as const satisfies readonly MobileDesignCatalogEntry[];
+
+export type MobileDesignComponentId = (typeof mobileDesignCatalog)[number]['id'];
+export function getMobileDesignComponent(id: string): (typeof mobileDesignCatalog)[number] | undefined {
+    return mobileDesignCatalog.find((entry) => entry.id === id);
+}