EuConquisto Composer MCP

/** * EuConquisto Composer Widget Interfaces - Imported from Analysis * * @version 0.1.2 * @source /Users/ricardokawasaki/Desktop/composer-mcp/mcp-interface-structure.ts * @analysis_date 2025-06-03 to 2025-06-08 * @validation PoC integration validation * * @description Real EuConquisto Composer widget interfaces based on * completed analysis. Used for MCP server validation - no new mapping. * * @scope VALIDATION ONLY - no new widget discovery * - Text Element: ✅ 8 properties, 9 subtypes * - Image Element: ✅ 12 properties, 5 subtypes * - Header Element: ✅ 44 properties, 6 subtypes (inc. Template 3 SCORM) * - List Element: ✅ 10 properties, 3 subtypes * - Gallery Element: ✅ 10 properties, 1 subtype * - Hotspot Interactive: ✅ 15 properties, 25+ icons */ // Type definitions for browser File type type FileType = string; // Use string paths instead of File objects for Node.js compatibility // ============================================================================= // BASE INTERFACES // ============================================================================= interface ElementBase { id: string; type: ElementType; titulo_conteudo?: string; cor_fundo?: string; margem_superior?: number; margem_inferior?: number; regras_visualizacao?: DisplayRule[]; contabilizacao_progresso?: boolean; feedback_progresso?: boolean; } interface DisplayRule { id: string; condition: string; action: string; } // ============================================================================= // ELEMENT TYPES // ============================================================================= type ElementType = | 'texto' | 'imagem' | 'cabecalho' | 'lista' | 'galeria' | 'multimidia' | 'interatividade' | 'quiz' | 'atividades' | 'marcadores'; // ============================================================================= // COMPLETED ELEMENT INTERFACES // ============================================================================= /** * TEXT ELEMENT - ✅ FULLY ANALYZED * Basic text content with rich formatting options */ interface TextElement extends ElementBase { type: 'texto'; content: string; fonte_elemento?: FontFamily; // Text-specific subtypes subtype?: | 'simple-text' // Basic editable text | 'text-with-title' // Text with title | 'text-with-subtitle' // Text with subtitle | 'title-only' // Title only | 'subtitle-only' // Subtitle only | 'two-column' // Two column layout | 'declaration-format' // Declaration style | 'note-format' // Note format | 'custom-table'; // Custom table } /** * IMAGE ELEMENT - ✅ FULLY ANALYZED * Image display with caption and zoom functionality */ interface ImageElement extends ElementBase { type: 'imagem'; imagem_fundo?: FileType | string; largura_imagem?: number; legenda_texto?: string; legenda_cor?: string; legenda_tamanho?: number; legenda_alinhamento?: 'Esquerda' | 'Centro' | 'Direita'; zoom?: 'Habilitado' | 'Desabilitado'; // Image-specific subtypes subtype?: | 'basic' // Customizable width (max 760px) | 'fullscreen' // 100% device width | 'gallery' // Side-by-side images | 'with-text-side' // Text alongside image | 'with-text-internal'; // Text overlay on image } /** * HEADER ELEMENT - ✅ FULLY ANALYZED VIA HTML EXPORT * Header sections with background images/videos, categories, avatars and author information */ interface HeaderElement extends ElementBase { type: 'cabecalho'; // Background Configuration - Enhanced with Template 2 analysis background_image?: string; // URL for background image (File upload supported) background_video?: string; // URL for background video with auto-play, loop, muted playback background_color?: string; // Background color fallback (default: "#FFFFFF", Color picker) // Content Elements - Rich text support confirmed category?: string; // Category label text (Rich text editor, HTML content) show_category?: boolean; // Whether to display category (Toggle/Checkbox, default: true) avatar?: string; // URL for avatar image (File upload, automatic aspect ratio detection) avatar_border_color?: string; // Avatar border color (Color picker, default: "#8fd7e8") author_name?: string; // Author name text (Rich text editor, HTML content) author_office?: string; // Author position/office (Rich text editor, HTML content) show_author_name?: boolean; // Whether to display author info (Toggle/Checkbox, default: true) // Visual Properties - Template 2 defaults confirmed primary_color?: string; // Primary accent color (Color picker, default: "#aa2c23") secondary_color?: string; // Secondary accent color (Color picker, default: "#aa2c23") font_family?: FontFamily; // Font family name (Dropdown, default: "Prompt") show_divider?: boolean; // Whether to show decorative divider (Toggle/Checkbox, default: true) // Layout Properties - Pixel-based padding padding_top?: number; // Top padding in pixels (Number input, default: 0) padding_bottom?: number; // Bottom padding in pixels (Number input, default: 0) // Tracking & Analytics - Enhanced capabilities progress_tracking?: boolean; // Enable view tracking with intersection observer (default: false) dam_assets?: string[]; // Digital asset references for DAM integration // Meta Properties content_title?: string; // Internal content title (Text input) // Template-specific Configuration template_config?: { layout_style?: 'fullwidth'; // Full-width background coverage content_alignment?: 'center'; // Content positioning video_resize_mode?: string; // Video scaling behavior avatar_size_calculation?: 'auto'; // Automatic sizing based on image }; // Header-specific subtypes (Template-based) subtype?: | 'template-1' // Header Template 1 | 'template-2' // Header Template 2 (fullwidth background, video support) | 'template-3' // Header Template 3 (React LMS with SCORM integration) | 'template-4' // Header Template 4 | 'template-5' // Header Template 5 | 'template-6'; // Header Template 6 } /** * HEADER TEMPLATE 3 ELEMENT - ✅ FULLY ANALYZED VIA HTML EXPORT * React-based Learning Management System header with SCORM integration and Brazilian enterprise features */ interface HeaderTemplate3Element extends ElementBase { type: 'cabecalho'; subtype: 'template-3'; // SCORM Integration Configuration scorm_enabled?: boolean; // Enable LMS integration (default: false) lms_auto_initialize?: boolean; // Auto-initialize SCORM on page load (default: false) scorm_api_wrapper?: string; // Path to SCORM API wrapper script // Header Layout Configuration header_title?: string; // Main header title text (Rich text support) header_height?: number; // Fixed header height in pixels (default: 70) title_scroll_enabled?: boolean; // Enable scrolling animation for long titles (default: false) header_background?: string; // Header background color (default: "#fff") header_shadow?: boolean; // Enable header box shadow (default: true) // Progress System Configuration progress_enabled?: boolean; // Enable progress tracking display (default: false) progress_position?: 'left' | 'right'; // Progress indicator positioning (default: 'left') progress_color?: string; // Progress indicator color (default: "#3f3f3f") // Index Menu System Configuration index_menu_enabled?: boolean; // Enable navigation menu (default: false) index_menu_position?: 'left' | 'right'; // Menu positioning (default: 'left') index_menu_width?: number; // Menu width in pixels (default: 300) menu_items?: MenuItemConfig[]; // Array of navigation items // External Content API Configuration external_content_enabled?: boolean; // Enable API-driven content (default: false) api_instance_uid?: string; // Unique API instance identifier content_version?: string; // Content version tracking (default: "1.1") // Brazilian Enterprise Font Configuration font_family?: BrazilianEnterpriseFont; // Enterprise font selection (default: 'Prompt') font_weight?: 400 | 700; // Font weight options (default: 400) // Progressive Web App Configuration mobile_app_capable?: boolean; // PWA mobile app features (default: false) theme_color?: string; // PWA theme color (default: "#07a651") status_bar_style?: string; // Mobile status bar styling // Performance Configuration animation_chunks?: boolean; // Enable animation library loading (default: false) service_worker_enabled?: boolean; // Enable offline support (default: false) } /** * MENU ITEM CONFIGURATION * Individual navigation item in Template 3 index menu */ interface MenuItemConfig { id: string; // Unique item identifier title: string; // Menu item title bullet: string; // Bullet/number indicator duration?: string; // Content duration (e.g., "5 min") active?: boolean; // Currently active item (default: false) link?: string; // Navigation target URL } /** * BRAZILIAN ENTERPRISE FONT TYPES * 50+ enterprise fonts including banking and corporate fonts */ type BrazilianEnterpriseFont = // Banking Fonts | 'BradescoSans' | 'ItauDisplayPro' | 'ItauTextPro' // Corporate Fonts | 'Sharp-Sans' | 'Duplicate-Ionic' | 'ProductSans' // International Standard Fonts | 'Inter' | 'Roboto' | 'Lato' | 'Montserrat' // Default Google Font | 'Prompt'; /** * LIST ELEMENT - ✅ FULLY ANALYZED * Lists with various formatting options (numbered, bullet, checkbox) */ interface ListElement extends ElementBase { type: 'lista'; // Content Configuration itens_lista: ListItem[]; tipo_lista: 'numbered' | 'bullet' | 'checkbox'; // Styling Configuration cor_primaria?: string; cor_secundaria?: string; fonte_elemento?: FontFamily; // Rich Text Configuration rich_text_habilitado?: boolean; // List-specific subtypes subtype?: | 'numbered' // Sequential numbering (1, 2, 3...) | 'bullet' // Standard bullet points | 'checkbox'; // Interactive checkbox list } /** * LIST ITEM STRUCTURE * Individual item within a list with rich content support */ interface ListItem { id: string; content: RichTextContent; checked?: boolean; // For checkbox lists ordem?: number; // Item order/position } /** * GALLERY ELEMENT - ✅ FULLY ANALYZED * Slideshow/gallery component for displaying multiple images with navigation */ interface GalleryElement extends ElementBase { type: 'galeria'; // Content Configuration slides: Slide[]; slideImage: FileType | string; // Styling Configuration cor_de_fundo?: string; cor_primaria?: string; // Layout Configuration margem_superior?: number; margem_inferior?: number; // Display Rules and Progress regra_visualizacao?: string; interacao_obrigatoria?: boolean; feedback_progresso?: boolean; // Action Components adicionar_slide?: () => void; // Gallery-specific subtypes subtype?: 'slideshow'; // Standard slideshow gallery with navigation controls } /** * SLIDE STRUCTURE * Individual slide within a gallery */ interface Slide { id: string; image: FileType | string; alt_text?: string; caption?: string; } /** * INTERACTIVITY ELEMENT - ✅ PARTIALLY ANALYZED (Hotspot Interactive) * Interactive widgets and user input elements */ interface InteractivityElement extends ElementBase { type: 'interatividade'; subtype?: | 'hotspot-interactive' // ✅ Image with clickable information points | 'accordion' // ❌ Expandable content sections | 'tabs' // ❌ Tabbed content interface | 'flashcards' // ❌ Flip cards for learning | 'flashcard-slider' // ❌ Slider with flip cards | 'drag-drop-cards' // ❌ Draggable card sorting | 'timeline' // ❌ Interactive timeline | 'step-slides' // ❌ Sequential step presentation | 'code-snippet' // ❌ Copyable code blocks | 'button' // ❌ Action button | 'button-group' // ❌ Multiple action buttons | 'video-interactive' // ❌ Interactive video window | '3d-objects'; // ❌ 3D object viewer } /** * HOTSPOT INTERACTIVE ELEMENT - ✅ FULLY ANALYZED * Interactive image with clickable information points */ interface HotspotInteractiveElement extends InteractivityElement { subtype: 'hotspot-interactive'; // Background Configuration imagem_fundo: FileType | string; texto_alternativo?: string; cor_fundo?: string; // Hotspot Configuration cor_marcadores?: string; largura_imagem?: 'Pequena' | 'Média' | 'Largura total' | 'Largura da página'; // Typography fonte_titulo_interacoes?: FontFamily; fonte_texto_interacoes?: FontFamily; // Hotspot Data marcadores: HotspotMarker[]; // Progress & Interaction interacao_obrigatoria?: boolean; feedback_progresso?: boolean; } /** * HOTSPOT MARKER CONFIGURATION * Individual hotspot point with rich content */ interface HotspotMarker { id: string; titulo: string; descricao: RichTextContent; posicao: { x: number; y: number }; icone_marcador: HotspotIconType; imagem?: FileType | string; audio?: FileType | string; } /** * RICH TEXT CONTENT STRUCTURE * Supports full rich text formatting */ interface RichTextContent { html: string; // Rich text features: bold, italic, underline, strikethrough, // alignment, lists, links, colors, superscript, subscript } /** * HOTSPOT ICON TYPES * 25+ predefined icon options */ type HotspotIconType = | 'info' // Information icon | 'question' // Question mark | 'plus' // Plus sign | 'arrow-left' // Left arrow | 'arrow-right' // Right arrow | 'arrow-up' // Up arrow | 'arrow-down' // Down arrow | 'target' // Target/crosshair | 'play' // Play button | 'pause' // Pause button | 'settings' // Settings gear | 'text' // Text icon | 'image' // Image icon | 'video' // Video icon | 'hand-pointer' // Hand pointer | 'click' // Click indicator | 'eye' // Eye/view icon | 'star' // Star icon | 'heart' // Heart icon | 'thumbs-up' // Thumbs up | 'thumbs-down' // Thumbs down | 'warning' // Warning triangle | 'check' // Checkmark | 'x' // X/close icon | 'custom'; // Custom uploaded icon // ============================================================================= // UNION TYPES // ============================================================================= type ContentElement = | TextElement | ImageElement | HeaderElement | HeaderTemplate3Element | ListElement | GalleryElement | InteractivityElement | HotspotInteractiveElement; // ============================================================================= // FONT FAMILY DEFINITIONS // ============================================================================= type FontFamily = // Standard Fonts | 'Bradesco Sans' | 'Grueber' | 'Helvetica Neue' | 'Lato' | 'Lora' | 'Merriweather' | 'Montserrat' | 'Objective' // Google Fonts | 'Open Sans' | 'Open Sans Condensed' | 'Prompt' | 'Roboto' | 'Roboto Condensed' | 'Roboto Slab' | 'Ubuntu' // Custom Fonts | 'Proxima Nova' | 'Product Sans' // Brand Fonts - Itau | 'Itau Display Pro' | 'Itau Text Pro' // Brand Fonts - Inter Variants | 'Inter-Black' | 'Inter-SemiBold' | 'Inter-Bold' | 'Inter-Extrabold' | 'Inter-Medium' | 'Inter-Regular' | 'Inter-Light' | 'Inter-ExtraLight' | 'Inter-Thin' // Brand Fonts - Sharp Sans Variants | 'Sharp Sans' | 'Sharp Sans Thin' | 'Sharp Sans Light' | 'Sharp Sans Medium' | 'Sharp Sans Semibold' | 'Sharp Sans ExtraBold' // Brand Fonts - Duplicate Ionic Variants | 'Duplicate Ionic' | 'Duplicate Ionic Bold' | 'Duplicate Ionic Heavy' | 'Duplicate Ionic Italic' | 'Duplicate Ionic Light' | 'Duplicate Ionic Medium' | 'Duplicate Ionic Thin' // Brand Fonts - Flama Variants | 'Flama' | 'Flama Bold' | 'Flama Condensed Bold' | 'Flama Condensed Light'; // ============================================================================= // MCP SERVER API INTERFACES // ============================================================================= interface ComposerAPI { // Element CRUD operations createElement(element: Partial<ContentElement>): Promise<ContentElement>; updateElement(id: string, updates: Partial<ContentElement>): Promise<ContentElement>; deleteElement(id: string): Promise<boolean>; getElement(id: string): Promise<ContentElement | null>; // Composition operations createComposition(title: string): Promise<string>; addElementToComposition(compositionId: string, element: ContentElement): Promise<boolean>; getComposition(id: string): Promise<ContentElement[]>; // Template operations saveTemplate(element: ContentElement, name: string): Promise<string>; getTemplates(elementType: ElementType): Promise<ContentElement[]>; } // ============================================================================= // ANALYSIS STATUS TRACKING // ============================================================================= interface AnalysisStatus { elementType: ElementType; status: 'completed' | 'in-progress' | 'pending'; completedDate?: string; propertiesCount?: number; subtypesCount?: number; specialFeatures?: string[]; } const ANALYSIS_PROGRESS: AnalysisStatus[] = [ { elementType: 'texto', status: 'completed', completedDate: '2025-05-29', propertiesCount: 8, subtypesCount: 9, specialFeatures: ['45+ fonts', 'progress tracking', 'display rules'] }, { elementType: 'imagem', status: 'completed', completedDate: '2025-05-29', propertiesCount: 12, subtypesCount: 5, specialFeatures: ['caption configuration', 'zoom functionality', 'file upload'] }, { elementType: 'lista', status: 'completed', completedDate: '2025-06-03', propertiesCount: 10, subtypesCount: 3, specialFeatures: ['rich text per item', 'dynamic item management', '45+ fonts', 'progress tracking', 'template switching'] }, { elementType: 'cabecalho', status: 'completed', completedDate: '2025-06-08', propertiesCount: 44, subtypesCount: 6, specialFeatures: ['video background support', 'avatar intelligence', 'responsive scaling', 'progress tracking', 'rich text content', 'DAM integration', 'template variations', 'Template 2 Phase 4 verified', 'Template 3 Phase 4 verified', 'SCORM LMS integration', 'Brazilian enterprise fonts', 'React architecture', 'API-driven content', 'PWA capabilities', 'index menu navigation'] }, { elementType: 'galeria', status: 'completed', completedDate: '2025-06-03', propertiesCount: 10, subtypesCount: 1, specialFeatures: ['multi-slide management', 'dynamic slide addition', 'progress tracking', 'custom display rules', 'theme customization', 'navigation controls'] }, { elementType: 'interatividade', status: 'completed', completedDate: '2025-06-02', propertiesCount: 15, subtypesCount: 1, specialFeatures: ['hotspot interactive analyzed', 'rich text editor', '25+ icon options', 'audio/image support'] } ]; // Additional MCP-specific types for integration export interface ElementValidationResult { isValid: boolean; elementType: ElementType; analysisStatus: 'completed' | 'in-progress' | 'pending'; errors: string[]; warnings: string[]; } export interface WidgetCreationParams { elementType: ElementType; subtype?: string; configuration: Record<string, any>; templateId?: string; } export interface ComposerIntegrationContext { organizationId: string; directoryId: string; jwtToken: string; apiBase: string; embedBase: string; } // MCP Resource URI patterns for Composer content export const COMPOSER_URI_PATTERNS = { ELEMENTS: 'composer://elements/{elementType}/{elementId}', TEMPLATES: 'composer://templates/{elementType}', COMPOSITIONS: 'composer://compositions/{compositionId}', WIDGET_ANALYSIS: 'composer://analysis/{elementType}', WIDGET_LIBRARY: 'composer://widgets/{status}' // completed/pending/in-progress } as const; // Validation schemas for analyzed widgets export const ELEMENT_VALIDATION_SCHEMAS = { texto: { requiredProperties: ['content'], optionalProperties: ['fonte_elemento', 'subtype'], validSubtypes: ['simple-text', 'text-with-title', 'text-with-subtitle', 'title-only', 'subtitle-only', 'two-column', 'declaration-format', 'note-format', 'custom-table'] }, imagem: { requiredProperties: ['imagem_fundo'], optionalProperties: ['largura_imagem', 'legenda_texto', 'zoom', 'subtype'], validSubtypes: ['basic', 'fullscreen', 'gallery', 'with-text-side', 'with-text-internal'] }, cabecalho: { requiredProperties: [], optionalProperties: ['background_image', 'background_video', 'category', 'author_name', 'subtype'], validSubtypes: ['template-1', 'template-2', 'template-3', 'template-4', 'template-5', 'template-6'] }, lista: { requiredProperties: ['itens_lista', 'tipo_lista'], optionalProperties: ['cor_primaria', 'fonte_elemento', 'subtype'], validSubtypes: ['numbered', 'bullet', 'checkbox'] }, galeria: { requiredProperties: ['slides'], optionalProperties: ['cor_de_fundo', 'cor_primaria', 'subtype'], validSubtypes: ['slideshow'] }, interatividade: { requiredProperties: ['subtype'], optionalProperties: ['imagem_fundo', 'marcadores'], validSubtypes: ['hotspot-interactive'] } } as const; export { ElementBase, DisplayRule, ContentElement, TextElement, ImageElement, HeaderElement, HeaderTemplate3Element, MenuItemConfig, BrazilianEnterpriseFont, ListElement, ListItem, GalleryElement, Slide, InteractivityElement, HotspotInteractiveElement, HotspotMarker, RichTextContent, HotspotIconType, ElementType, FontFamily, ComposerAPI, AnalysisStatus, ANALYSIS_PROGRESS };