mcp-interface-structure.ts•24.8 kB
/**
* EuConquisto Composer MCP Server Interface Structure
* Complete TypeScript definitions for all content elements
*
* Analysis Method: HTML Export Reverse Engineering
* Last Updated: 2025-06-03
* Status: Header widget validated via HTML export analysis
*/
// =============================================================================
// 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?: File | 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
}
// =============================================================================
// SUPPORTING INTERFACES
// =============================================================================
/**
* TEMPLATE MANAGEMENT INTERFACE
* Supports template creation, saving, and management functionality
*/
interface TemplateManagement {
enabled: boolean; // Whether template management is enabled
create_template?: () => void; // Create new template function
save_template?: (name: string) => Promise<boolean>; // Save current as template
load_template?: (templateId: string) => Promise<boolean>; // Load existing template
delete_template?: (templateId: string) => Promise<boolean>; // Delete template
list_templates?: () => Promise<TemplateInfo[]>; // Get available templates
}
/**
* TEMPLATE INFO STRUCTURE
* Metadata for saved templates
*/
interface TemplateInfo {
id: string;
name: string;
description?: string;
created_date: string;
thumbnail?: string;
element_type: ElementType;
}
// =============================================================================
// PENDING ELEMENT INTERFACES (Templates for analysis)
// =============================================================================
/**
* HEADER ELEMENT - ✅ FULLY ANALYZED VIA HTML EXPORT
* Header sections with background images/videos, categories, avatars and author information
* Analysis Method: HTML Export Reverse Engineering (Template 2 Complete - Phase 3 Documented)
* CSS Class Pattern: rdp-element-head-1
* JavaScript Component: v (Header Component)
* Technical Features: Video background scaling, avatar intelligence, rich text support
* Knowledge Graph: Fully documented with validation rules, integration points, and template relationships
* Analysis Status: Phase 3 Documentation & Knowledge Management COMPLETED
*/
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
};
// Technical Implementation References
css_classes?: {
container: 'rdp-element-head-1';
category: 'rdp-element-head-1-category';
avatar: 'rdp-element-head-1-avatar';
author_info: 'rdp-element-head-1-author-info';
author_name: 'rdp-element-head-1-author-name';
author_office: 'rdp-element-head-1-author-office';
author_divider: 'rdp-element-head-1-author-divider';
decorative_divider: 'rdp-element-head-1-divider';
video_mask: 'rdp-element-head-1-video-mask';
};
// 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
* Analysis Method: HTML Export Reverse Engineering (Phase 2 Complete - Phase 3 In Progress)
* Architecture: React application with webpack chunks
* Educational Features: SCORM compliance, progress tracking, index menu navigation
* Enterprise Features: 50+ Brazilian banking fonts, API-driven content, PWA capabilities
* Knowledge Graph Status: Entities and relationships documented
*/
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)
// Technical Implementation References
css_classes?: {
header_container: 'rdp-composer-player-header';
header_title: 'rdp-composer-player-header-title';
index_menu: 'rdp-composer-player-index-menu';
menu_item: 'rdp-composer-player-index-menu-item';
menu_item_active: 'rdp-composer-player-index-menu-item.active';
};
// React Architecture Configuration
react_config?: {
mount_point: '#root'; // React application mount point
chunk_loading: 'lazy'; // Webpack chunk loading strategy
build_optimization: 'production'; // Build optimization level
};
}
/**
* 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: File | 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: File | string;
alt_text?: string;
caption?: string;
}
/**
* MULTIMEDIA ELEMENT - ❌ NOT ANALYZED
* Audio and video content embedding
*/
interface MultimediaElement extends ElementBase {
type: 'multimidia';
// TODO: Add properties after analysis
// Expected: media_type, source, controls, autoplay, etc.
}
/**
* 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
}
/**
* QUIZ ELEMENT - ❌ NOT ANALYZED
* Quiz questions with scoring and feedback
*/
interface QuizElement extends ElementBase {
type: 'quiz';
// TODO: Add properties after analysis
// Expected: question_type, options, correct_answer, feedback, etc.
}
/**
* ACTIVITIES ELEMENT - ❌ NOT ANALYZED
* Learning activities and exercises
*/
interface ActivitiesElement extends ElementBase {
type: 'atividades';
// TODO: Add properties after analysis
// Expected: activity_type, instructions, completion_criteria, etc.
}
/**
* BOOKMARKS ELEMENT - ❌ NOT ANALYZED
* Navigation markers and progress indicators
*/
interface BookmarksElement extends ElementBase {
type: 'marcadores';
// TODO: Add properties after analysis
// Expected: marker_type, position, label, navigation, etc.
}
/**
* HOTSPOT INTERACTIVE ELEMENT - ✅ FULLY ANALYZED
* Interactive image with clickable information points
*/
interface HotspotInteractiveElement extends InteractivityElement {
subtype: 'hotspot-interactive';
// Background Configuration
imagem_fundo: File | 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?: File | string;
audio?: File | 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
// Insert this after the existing interfaces, before the UNION TYPES section
type ContentElement =
| TextElement
| ImageElement
| HeaderElement
| HeaderTemplate3Element
| ListElement
| GalleryElement
| MultimediaElement
| InteractivityElement
| HotspotInteractiveElement
| QuizElement
| ActivitiesElement
| BookmarksElement;
// =============================================================================
// 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: 'multimidia',
status: 'pending'
},
{
elementType: 'interatividade',
status: 'in-progress',
completedDate: '2025-06-02',
propertiesCount: 15,
subtypesCount: 13,
specialFeatures: ['hotspot interactive analyzed', 'rich text editor', '25+ icon options', 'audio/image support']
},
{
elementType: 'quiz',
status: 'pending'
},
{
elementType: 'atividades',
status: 'pending'
},
{
elementType: 'marcadores',
status: 'pending'
}
];
export {
ElementBase,
ContentElement,
TextElement,
ImageElement,
HeaderElement,
HeaderTemplate3Element,
MenuItemConfig,
BrazilianEnterpriseFont,
ListElement,
GalleryElement,
InteractivityElement,
HotspotInteractiveElement,
HotspotMarker,
RichTextContent,
HotspotIconType,
TemplateManagement,
TemplateInfo,
ElementType,
FontFamily,
ComposerAPI,
AnalysisStatus,
ANALYSIS_PROGRESS
};