{ "component_name": "table-of-contents", "version": "1.0.0", "description": "Tabla de contenido con navegación automática y ScrollSpy", "groups": { "visibility": { "label": "Visibilidad", "priority": 10, "fields": { "is_enabled": { "type": "boolean", "label": "Activar componente", "default": true, "editable": true, "required": true }, "show_on_desktop": { "type": "boolean", "label": "Mostrar en escritorio", "default": true, "editable": true, "description": "Muestra el componente en pantallas >= 992px" }, "show_on_mobile": { "type": "boolean", "label": "Mostrar en móvil", "default": false, "editable": true, "description": "Muestra el componente en pantallas < 992px" }, "is_critical": { "type": "boolean", "label": "CSS Crítico", "default": true, "editable": true, "description": "Inyectar CSS inline en para optimizar LCP (componente above-the-fold)" } } }, "content": { "label": "Contenido", "priority": 20, "fields": { "title": { "type": "text", "label": "Título", "default": "Tabla de Contenido", "editable": true }, "auto_generate": { "type": "boolean", "label": "Generar automáticamente", "default": true, "editable": true, "description": "Genera TOC desde los encabezados del contenido" }, "heading_levels": { "type": "text", "label": "Niveles de encabezados", "default": "h2,h3", "editable": true, "description": "Separados por coma: h2,h3,h4" }, "smooth_scroll": { "type": "boolean", "label": "Scroll suave", "default": true, "editable": true } } }, "typography": { "label": "Tipografía", "priority": 30, "fields": { "title_font_size": { "type": "text", "label": "Tamaño título", "default": "1rem", "editable": true }, "title_font_weight": { "type": "text", "label": "Peso título", "default": "600", "editable": true }, "link_font_size": { "type": "text", "label": "Tamaño enlaces", "default": "0.9rem", "editable": true }, "link_line_height": { "type": "text", "label": "Altura de línea", "default": "1.3", "editable": true }, "level_three_font_size": { "type": "text", "label": "Tamaño nivel H3", "default": "0.85rem", "editable": true }, "level_four_font_size": { "type": "text", "label": "Tamaño nivel H4", "default": "0.8rem", "editable": true } } }, "colors": { "label": "Colores", "priority": 40, "fields": { "background_color": { "type": "color", "label": "Fondo", "default": "#ffffff", "editable": true }, "border_color": { "type": "color", "label": "Borde", "default": "#E6E9ED", "editable": true }, "title_color": { "type": "color", "label": "Color título", "default": "#1e3a5f", "editable": true, "description": "navy-primary del Design System" }, "title_border_color": { "type": "color", "label": "Borde inferior título", "default": "#E6E9ED", "editable": true }, "link_color": { "type": "color", "label": "Color enlaces", "default": "#495057", "editable": true, "description": "neutral-600 del template" }, "link_hover_color": { "type": "color", "label": "Color hover enlaces", "default": "#1e3a5f", "editable": true, "description": "navy-primary del Design System" }, "link_hover_background": { "type": "color", "label": "Fondo hover enlaces", "default": "#F9FAFB", "editable": true }, "active_border_color": { "type": "color", "label": "Borde activo", "default": "#1e3a5f", "editable": true, "description": "navy-primary del Design System" }, "active_background_color": { "type": "color", "label": "Fondo activo", "default": "#F9FAFB", "editable": true }, "active_text_color": { "type": "color", "label": "Texto activo", "default": "#1e3a5f", "editable": true, "description": "navy-primary del Design System" }, "scrollbar_track_color": { "type": "color", "label": "Pista scrollbar", "default": "#F9FAFB", "editable": true }, "scrollbar_thumb_color": { "type": "color", "label": "Thumb scrollbar", "default": "#6B7280", "editable": true } } }, "spacing": { "label": "Espaciado", "priority": 50, "fields": { "container_padding": { "type": "text", "label": "Padding contenedor", "default": "12px 16px", "editable": true }, "margin_bottom": { "type": "text", "label": "Margen inferior", "default": "13px", "editable": true }, "title_padding_bottom": { "type": "text", "label": "Padding inferior título", "default": "8px", "editable": true }, "title_margin_bottom": { "type": "text", "label": "Margen inferior título", "default": "0.75rem", "editable": true }, "item_margin_bottom": { "type": "text", "label": "Margen inferior items", "default": "0.15rem", "editable": true }, "link_padding": { "type": "text", "label": "Padding enlaces", "default": "0.3rem 0.85rem", "editable": true }, "level_three_padding_left": { "type": "text", "label": "Padding izq. nivel 3", "default": "1.5rem", "editable": true }, "level_four_padding_left": { "type": "text", "label": "Padding izq. nivel 4", "default": "2rem", "editable": true }, "scrollbar_width": { "type": "text", "label": "Ancho scrollbar", "default": "6px", "editable": true } } }, "visual_effects": { "label": "Efectos Visuales", "priority": 60, "fields": { "border_radius": { "type": "text", "label": "Radio de borde", "default": "8px", "editable": true }, "box_shadow": { "type": "text", "label": "Sombra", "default": "0 2px 8px rgba(0, 0, 0, 0.08)", "editable": true }, "border_width": { "type": "text", "label": "Grosor borde", "default": "1px", "editable": true }, "link_border_radius": { "type": "text", "label": "Radio borde enlaces", "default": "4px", "editable": true }, "active_border_left_width": { "type": "text", "label": "Grosor borde activo", "default": "3px", "editable": true }, "transition_duration": { "type": "text", "label": "Duración transición", "default": "0.3s", "editable": true }, "scrollbar_border_radius": { "type": "text", "label": "Radio scrollbar", "default": "3px", "editable": true } } }, "behavior": { "label": "Comportamiento", "priority": 70, "fields": { "is_sticky": { "type": "boolean", "label": "Sticky", "default": true, "editable": true, "description": "Fija el TOC al hacer scroll" }, "scroll_offset": { "type": "text", "label": "Offset de scroll", "default": "100", "editable": true, "description": "Píxeles de offset para navegación" }, "max_height": { "type": "text", "label": "Altura máxima", "default": "calc(100vh - 71px - 10px - 250px - 15px - 15px)", "editable": true } } } } }